diff --git a/src/js/steevcss.js b/src/js/steevcss.js
index e968ea4..a8be249 100644
--- a/src/js/steevcss.js
+++ b/src/js/steevcss.js
@@ -1,25 +1,25 @@
-var code = document.querySelectorAll("code");
-
-// code embed
-code.forEach(c => {
-    let code = c.innerHTML.toString();
-    var output = "";
-    for(let i = 0; i < code.length; i++){
-        switch(code.charAt(i)){
-            default: output += code.charAt(i); break;
-            case ">": output += "&gt;"; break;
-            case "<": output += "&lt;"; break;
-            case "&": output += "&amp;"; break;
-            case "\"": output += "&quot;"; break;
-        }
-    }
-    c.innerHTML = output;
-});
-
-// TODO JavaScript Input value return
-// Current way.. 
-// -------------------------------------
-// get input by getting the input object
-// catch oninput event inside a function
-// Handle it inside the function
+var code = document.querySelectorAll("code");
+
+// code embed
+code.forEach(c => {
+    let code = c.innerHTML.toString();
+    var output = "";
+    for(let i = 0; i < code.length; i++){
+        switch(code.charAt(i)){
+            default: output += code.charAt(i); break;
+            case ">": output += "&gt;"; break;
+            case "<": output += "&lt;"; break;
+            case "&": output += "&amp;"; break;
+            case "\"": output += "&quot;"; break;
+        }
+    }
+    c.innerHTML = output;
+});
+
+// TODO JavaScript Input value return
+// Current way.. 
+// -------------------------------------
+// get input by getting the input object
+// catch oninput event inside a function
+// Handle it inside the function
 // -------------------------------------
\ No newline at end of file
diff --git a/src/scss/button.sass b/src/scss/button.sass
new file mode 100644
index 0000000..af0ed9c
--- /dev/null
+++ b/src/scss/button.sass
@@ -0,0 +1,47 @@
+$primBG: rgb(248, 248, 248)
+$primary: #3498db
+$primary_dark: #2980b9
+$danger: #e74c3c
+$danger_dark: #c0392b
+$warning: #f1c40f
+$warning_dark: #f39c12
+$success: #2ecc71
+$success_dark: #27ae60
+$border_width: 2px
+$border_radius: 5px
+$padding: 5px
+
+/* Button Style Classes */
+.btn
+    border-radius: $border_radius
+    border-width: $border_width
+    padding: $padding
+    transition: 50ms
+.btn-primary
+    background-color: $primary 
+    border: $border_width solid $primary_dark
+    color: white
+.btn-danger
+    background-color: $danger 
+    border: $border_width solid $danger_dark
+    color: white
+.btn-warning
+    background-color: $warning 
+    border: $border_width solid $warning_dark
+    color: white
+.btn-success
+    background-color: $success 
+    border: $border_width solid $success_dark
+    color: white
+
+/* Hover classes */
+.btn:hover
+    background-color: #d8d8d8d8
+.btn-primary:hover
+    background-color: $primary_dark
+.btn-danger:hover
+    background-color: $danger_dark
+.btn-warning:hover
+    background-color: $warning_dark
+.btn-success:hover
+    background-color: $success_dark
diff --git a/src/scss/forms.sass b/src/scss/forms.sass
new file mode 100644
index 0000000..e69de29
diff --git a/src/scss/messaging.sass b/src/scss/messaging.sass
index 0cb282c..7b95523 100644
--- a/src/scss/messaging.sass
+++ b/src/scss/messaging.sass
@@ -1,93 +1,93 @@
-$primary: #3498db
-$primary_dark: #2980b9
-$danger: #e74c3c
-$danger_dark: #c0392b
-$warning: #f1c40f
-$warning_dark: #f39c12
-$success: #2ecc71
-$success_dark: #27ae60
-    
-.embed 
-    background-color: #d8d8d8
-    border-radius: 5px
-    padding: 5px
-.alert-primary
-    border-radius: 2px
-    background-color: $primary
-    border: 1px solid $primary_dark
-    padding: 1rem
-    color: white
-.alert-danger
-    border-radius: 2px
-    background-color: $danger
-    border: 1px solid $danger_dark
-    padding: 1rem
-    color: white
-.alert-warning
-    border-radius: 2px
-    background-color: $warning
-    border: 1px solid $warning_dark
-    padding: 1rem
-    color: white
-.alert-success
-    border-radius: 2px
-    background-color: $success
-    border: 1px solid $success_dark
-    padding: 1rem
-    color: white
-.notification-primary
-    width: 100%;
-    display: flex
-    padding: 5px
-    border: 2px solid $primary
-    border-radius: 2px
-.notification-primary h2
-    border-right: 0.3rem solid $primary
-    padding: 5px
-    margin-right: 5px;
-    min-width: 70px
-    height: auto
-    display: flex
-.notification-danger
-    width: 100%;
-    display: flex
-    padding: 5px
-    border: 2px solid $danger
-    border-radius: 2px
-.notification-danger h2
-    border-right: 0.3rem solid $danger
-    padding: 5px
-    margin-right: 5px;
-    min-width: 70px
-    height: auto
-    display: flex
-.notification-warning
-    width: 100%;
-    display: flex
-    padding: 5px
-    border: 2px solid $warning
-    border-radius: 2px
-.notification-warning h2
-    border-right: 0.3rem solid $warning
-    padding: 5px
-    margin-right: 5px;
-    min-width: 70px
-    height: auto
-    display: flex
-.notification-success
-    width: 100%;
-    display: flex
-    padding: 5px
-    border: 2px solid $success
-    border-radius: 2px
-.notification-success h2
-    border-right: 0.3rem solid $success
-    padding: 5px
-    margin-right: 5px;
-    min-width: 70px
-    height: auto
-    display: flex
-.notification-body
-    line-height: 30pt
-    font-size: 15pt
+$primary: #3498db
+$primary_dark: #2980b9
+$danger: #e74c3c
+$danger_dark: #c0392b
+$warning: #f1c40f
+$warning_dark: #f39c12
+$success: #2ecc71
+$success_dark: #27ae60
+    
+.embed 
+    background-color: #d8d8d8
+    border-radius: 5px
+    padding: 5px
+.alert-primary
+    border-radius: 2px
+    background-color: $primary
+    border: 1px solid $primary_dark
+    padding: 1rem
+    color: white
+.alert-danger
+    border-radius: 2px
+    background-color: $danger
+    border: 1px solid $danger_dark
+    padding: 1rem
+    color: white
+.alert-warning
+    border-radius: 2px
+    background-color: $warning
+    border: 1px solid $warning_dark
+    padding: 1rem
+    color: white
+.alert-success
+    border-radius: 2px
+    background-color: $success
+    border: 1px solid $success_dark
+    padding: 1rem
+    color: white
+.notification-primary
+    width: 100%;
+    display: flex
+    padding: 5px
+    border: 2px solid $primary
+    border-radius: 2px
+.notification-primary h2
+    border-right: 0.3rem solid $primary
+    padding: 5px
+    margin-right: 5px;
+    min-width: 70px
+    height: auto
+    display: flex
+.notification-danger
+    width: 100%;
+    display: flex
+    padding: 5px
+    border: 2px solid $danger
+    border-radius: 2px
+.notification-danger h2
+    border-right: 0.3rem solid $danger
+    padding: 5px
+    margin-right: 5px;
+    min-width: 70px
+    height: auto
+    display: flex
+.notification-warning
+    width: 100%;
+    display: flex
+    padding: 5px
+    border: 2px solid $warning
+    border-radius: 2px
+.notification-warning h2
+    border-right: 0.3rem solid $warning
+    padding: 5px
+    margin-right: 5px;
+    min-width: 70px
+    height: auto
+    display: flex
+.notification-success
+    width: 100%;
+    display: flex
+    padding: 5px
+    border: 2px solid $success
+    border-radius: 2px
+.notification-success h2
+    border-right: 0.3rem solid $success
+    padding: 5px
+    margin-right: 5px;
+    min-width: 70px
+    height: auto
+    display: flex
+.notification-body
+    line-height: 30pt
+    font-size: 15pt
     word-wrap: break-word
\ No newline at end of file
diff --git a/src/scss/selector.sass b/src/scss/selector.sass
index ccc4641..b1484db 100644
--- a/src/scss/selector.sass
+++ b/src/scss/selector.sass
@@ -1,100 +1,100 @@
-$primBG: rgb(248, 248, 248)
-$columns: 12
-$primary: #3498db
-$primary_dark: #2980b9
-
-/* The switch - the box around the slider */
-.switch 
-    position: relative
-    display: inline-block
-    width: 60px
-    height: 34px
-/* Hide default HTML checkbox */
-.switch input 
-    opacity: 0
-    width: 0
-    height: 0
-/* The slider */
-.slider 
-    position: absolute
-    cursor: pointer
-    top: 0
-    left: 0
-    right: 0
-    bottom: 0
-    background-color: #ccc
-    -webkit-transition: .4s
-    transition: .4s
-.slider:before 
-    position: absolute
-    content: ""
-    height: 26px
-    width: 26px
-    left: 4px
-    bottom: 4px
-    background-color: white
-    -webkit-transition: .4s
-    transition: .4s
-input:checked + .slider 
-    background-color: $primary
-input:focus + .slider 
-    box-shadow: 0 0 1px $primary
-input:checked + .slider:before 
-    -webkit-transform: translateX(26px)
-    -ms-transform: translateX(26px)
-    transform: translateX(26px)
-/* Rounded sliders */
-.slider.round 
-    border-radius: 34px
-.slider.round:before 
-    border-radius: 50%
-/* Range slider */
-.range-slider
-    -webkit-appearance: none
-    border-radius: 5px
-    width: 100%
-    height: 25px
-    background: #d8d8d8
-    outline: none
-    opacity: 0.7
-    -webkit-transition: .2s
-    transition: opacity .2s
-.range-slider:hover
-    opacity: 1
-.range-slider::-webkit-slider-thumb
-    -webkit-appearance: none
-    appearance: none
-    width: 25px
-    height: 25px
-    background: #5b6568
-    cursor: pointer
-.range-slider::-moz-range-thumb 
-    width: 25px
-    height: 25px
-    background: #5b6568
-    cursor: pointer
-.range-slider-rounded
-    -webkit-appearance: none
-    border-radius: 5px
-    width: 100%
-    height: 15px
-    background: #d8d8d8
-    outline: none
-    opacity: 0.7
-    -webkit-transition: .2s
-    transition: opacity .2s
-.range-slider-rounded:hover
-    opacity: 1
-.range-slider-rounded::-webkit-slider-thumb
-    -webkit-appearance: none
-    appearance: none
-    border-radius: 50%
-    width: 25px
-    height: 25px
-    background: #5b6568
-    cursor: pointer
-.range-slider-rounded::-moz-range-thumb 
-    width: 25px
-    height: 25px
-    background: #ecf0f1
+$primBG: rgb(248, 248, 248)
+$columns: 12
+$primary: #3498db
+$primary_dark: #2980b9
+
+/* The switch - the box around the slider */
+.switch 
+    position: relative
+    display: inline-block
+    width: 60px
+    height: 34px
+/* Hide default HTML checkbox */
+.switch input 
+    opacity: 0
+    width: 0
+    height: 0
+/* The slider */
+.slider 
+    position: absolute
+    cursor: pointer
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    background-color: #ccc
+    -webkit-transition: .4s
+    transition: .4s
+.slider:before 
+    position: absolute
+    content: ""
+    height: 26px
+    width: 26px
+    left: 4px
+    bottom: 4px
+    background-color: white
+    -webkit-transition: .4s
+    transition: .4s
+input:checked + .slider 
+    background-color: $primary
+input:focus + .slider 
+    box-shadow: 0 0 1px $primary
+input:checked + .slider:before 
+    -webkit-transform: translateX(26px)
+    -ms-transform: translateX(26px)
+    transform: translateX(26px)
+/* Rounded sliders */
+.slider.round 
+    border-radius: 34px
+.slider.round:before 
+    border-radius: 50%
+/* Range slider */
+.range-slider
+    -webkit-appearance: none
+    border-radius: 5px
+    width: 100%
+    height: 25px
+    background: #d8d8d8
+    outline: none
+    opacity: 0.7
+    -webkit-transition: .2s
+    transition: opacity .2s
+.range-slider:hover
+    opacity: 1
+.range-slider::-webkit-slider-thumb
+    -webkit-appearance: none
+    appearance: none
+    width: 25px
+    height: 25px
+    background: #5b6568
+    cursor: pointer
+.range-slider::-moz-range-thumb 
+    width: 25px
+    height: 25px
+    background: #5b6568
+    cursor: pointer
+.range-slider-rounded
+    -webkit-appearance: none
+    border-radius: 5px
+    width: 100%
+    height: 15px
+    background: #d8d8d8
+    outline: none
+    opacity: 0.7
+    -webkit-transition: .2s
+    transition: opacity .2s
+.range-slider-rounded:hover
+    opacity: 1
+.range-slider-rounded::-webkit-slider-thumb
+    -webkit-appearance: none
+    appearance: none
+    border-radius: 50%
+    width: 25px
+    height: 25px
+    background: #5b6568
+    cursor: pointer
+.range-slider-rounded::-moz-range-thumb 
+    width: 25px
+    height: 25px
+    background: #ecf0f1
     cursor: pointer
\ No newline at end of file