diff --git a/src/components/form/button/button.css b/src/components/form/button/button.css
new file mode 100644
index 0000000..688f5e6
--- /dev/null
+++ b/src/components/form/button/button.css
@@ -0,0 +1,24 @@
+.form-button{
+    touch-action: manipulation;
+
+    width: var(--form-mid-width);
+    border-radius: var(--def-radius);
+
+    padding: 0.56rem 0.8rem;
+
+    border: none;
+    outline-color: rgba(255, 255, 255, 0.87);
+
+    background-color: #f1f5f9;
+    transition: background-color 0.2s ease-out;
+
+    color: var(--text-color);
+    font-weight: 600;
+    font-size: 14px;
+
+    cursor: pointer;
+}
+
+.form-button:hover{
+    background-color: #e2e8f0;
+}
\ No newline at end of file
diff --git a/src/components/form/button/button.html b/src/components/form/button/button.html
new file mode 100644
index 0000000..7db39b1
--- /dev/null
+++ b/src/components/form/button/button.html
@@ -0,0 +1 @@
+<button class="form-button">Submit</button>
\ No newline at end of file
diff --git a/src/components/form/listbox/listbox.css b/src/components/form/listbox/listbox.css
index 2f7003b..d0abe4d 100644
--- a/src/components/form/listbox/listbox.css
+++ b/src/components/form/listbox/listbox.css
@@ -5,10 +5,30 @@
     border-radius: var(--def-radius);
     padding: 2px;
     width: var(--form-mid-width);
+    margin-bottom: var(--form-el-margin-bottom);
 }
 
 .list-option{
-    padding: 0.4rem 0.6rem;
+    padding: 0.24rem 0.48rem;
     cursor: pointer;
     border-radius: var(--def-radius);
+    transition: background-color 0.2s ease-out;
+}
+
+.list-option:not(:last-child){
+    margin-bottom: 1px;
+}
+
+.list-option:hover{
+    background-color: #f1f5f9;
+}
+
+.list-option-selected{
+    background-color: #020617;
+    color: #fff;
+}
+
+.list-option-selected:hover{
+    background-color:  #020617; 
+    transition: none;
 }
\ No newline at end of file
diff --git a/src/components/form/listbox/listbox.html b/src/components/form/listbox/listbox.html
index 8793f92..1bd8756 100644
--- a/src/components/form/listbox/listbox.html
+++ b/src/components/form/listbox/listbox.html
@@ -2,7 +2,7 @@
     <ul class="list-container">
         <li class="list-option">New York</li>
         <li class="list-option">Rome</li>
-        <li class="list-option">London</li>
+        <li class="list-option list-option-selected">London</li>
         <li class="list-option">Istanbul</li>
         <li class="list-option">Paris</li>
     </ul>
diff --git a/src/pages/css/initial.css b/src/pages/css/initial.css
index 68ea490..de25f00 100644
--- a/src/pages/css/initial.css
+++ b/src/pages/css/initial.css
@@ -54,47 +54,6 @@ body {
   font-weight: 400;
 }
 
-h1 {
-  font-size: 2.5rem;
-  font-weight: 500;
-}
-
-h2 {
-  font-size: 2.25rem;  
-  font-weight: 500;
-}
-
-h3 {
-  font-size: 2rem;  
-  font-weight: 500;
-}
-
-h4 {
-  font-size: 1.75rem;
-}
-
-h5 {
-  font-size: 1.5rem;
-}
-
-h6 {
-  font-size: 1.25rem;
-}
-
-#main{
-    margin: 0 auto;
-    max-width: 1920px;
-    min-width: 320px;
-    min-height: 100vh;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    background-color: #fff;
-    position: relative;
-    border: 5px solid orange;
-    /*letter-spacing: 0!important;*/
-}
-
 @media only screen and (max-width : 320px) {
   body * {
       animation: none !important;
diff --git a/src/pages/css/main.css b/src/pages/css/main.css
new file mode 100644
index 0000000..3f39838
--- /dev/null
+++ b/src/pages/css/main.css
@@ -0,0 +1,59 @@
+:root {
+  --silver-color: #E1E3DF;
+  --text-color: #34485E;
+
+  --animate-duration: 1s;
+  --animate-delay: 1s;
+  --animate-repeat: 1;
+
+  --def-radius: 6px;
+  --def-border-color: #e5e7eb;
+
+  --form-small-width: 132px;
+  --form-mid-width: 264px;
+  --form-big-width: 528px;
+
+  --form-el-margin-bottom: 8px;  
+
+}
+
+h1 {
+  font-size: 2.5rem;
+  font-weight: 500;
+}
+
+h2 {
+  font-size: 2.25rem;  
+  font-weight: 500;
+}
+
+h3 {
+  font-size: 2rem;  
+  font-weight: 500;
+}
+
+h4 {
+  font-size: 1.75rem;
+}
+
+h5 {
+  font-size: 1.5rem;
+}
+
+h6 {
+  font-size: 1.25rem;
+}
+
+#main{
+    margin: 0 auto;
+    max-width: 1920px;
+    min-width: 320px;
+    min-height: 100vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    background-color: #fff;
+    position: relative;
+    color: var(--text-color)
+    /*letter-spacing: 0!important;*/
+}
\ No newline at end of file
diff --git a/src/pages/css/vars.css b/src/pages/css/vars.css
deleted file mode 100644
index 4edb78b..0000000
--- a/src/pages/css/vars.css
+++ /dev/null
@@ -1,16 +0,0 @@
-:root {
-  --silver-color: #E1E3DF;
-  --text-color: #34485E;
-
-  --animate-duration: 1s;
-  --animate-delay: 1s;
-  --animate-repeat: 1;
-
-  --def-radius: 4px;
-  --def-border-color: #e5e7eb;
-
-  --form-small-width: 132px;
-  --form-mid-width: 264px;
-  --form-big-width: 528px;
-
-}
\ No newline at end of file
diff --git a/src/pages/example/example.css b/src/pages/example/example.css
index bc1768e..92d3593 100644
--- a/src/pages/example/example.css
+++ b/src/pages/example/example.css
@@ -1,5 +1,4 @@
 .preview {
-    border: 4px solid greenyellow;
     width: 100%;
     flex-grow: 1;
     display: flex;