diff --git a/src/App.vue b/src/App.vue
index 79a747d..fdb670e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <div class="content">
+    <div id="appContent">
       <router-view />
       <error />
     </div>
@@ -18,27 +18,12 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss">
+@import "main.scss";
+
 body{
   margin: 0;
 }
-input{
-  padding: 0 2rem 0 2rem;
-  height: 2.5rem;
-  color: #fff;
-  background-color: #1d1d1d;
-  border-radius: 1.25rem;
-  border: 0.1rem solid #fff;
-  text-align: center;
-  font-size: 1.1rem;
-  margin: 0.5rem;
-  appearance: none;
-  outline: none;
-}
-input:focus{
-  color: #000;
-  background-color: #fff;
-}
 a{
   color: #00BCD4;
 }
@@ -65,7 +50,7 @@ a{
   min-height: 100%;
   width: 100%;
 }
-.content{
+#appContent{
   position: absolute;
   top: 0;
   left: calc(50% - 35rem);
@@ -77,7 +62,7 @@ a{
   box-shadow: 3px 3px 10px #111;
 }
 @media (max-width: 75rem){
-  .content{
+  #appContent{
     width: 100%;
     left: 0;
   }
diff --git a/src/main.scss b/src/main.scss
new file mode 100644
index 0000000..9b4cced
--- /dev/null
+++ b/src/main.scss
@@ -0,0 +1,50 @@
+:root {
+  --primary: #2196f3;
+  --secondary: #2196f3;
+
+  --red: #e53935;
+  --green: #4caf50;
+  --blue: #03a9f4;
+  --teal: #009688;
+
+  --white: #fff;
+  --black: #000;
+
+  --grey100: #fff;
+  --grey200: #414141;
+  --grey300: #313131;
+  --grey400: #2d2d2d;
+  --grey500: #222222;
+  --grey600: #1d1d1d;
+  --grey700: #111111;
+  --grey800: #050505;
+  --grey900: #000;
+
+  --shadow100: 2px 2px 5px #111;
+  --shadow200: 3px 3px 10px #111;
+  --shadow300: 6px 6px 20px #111;
+}
+
+input, textarea, select {
+  background-color: var(--grey400);
+  border-radius: 0.7rem;
+  border: none;
+  padding: 0.5rem;
+  color: var(--grey100);
+  outline: none;
+  margin: 0.2rem;
+}
+input:focus, textarea:focus {
+  background-color: var(--grey300);
+}
+
+textarea {
+  width: 20rem;
+  min-width: 10rem;
+  min-height: 3rem;
+  max-width: calc(100% - 1.2rem);
+}
+
+.viewer-backdrop{
+  background-color: #000e !important;
+}
\ No newline at end of file
diff --git a/src/views/login.vue b/src/views/login.vue
index c21abdf..ba7009c 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -83,6 +83,23 @@ export default {
 </script>
 
 <style scoped>
+input{
+  padding: 0 2rem 0 2rem;
+  height: 2.5rem;
+  color: #fff;
+  background-color: #1d1d1d;
+  border-radius: 1.25rem;
+  border: 0.1rem solid #fff;
+  text-align: center;
+  font-size: 1.1rem;
+  margin: 0.5rem;
+  appearance: none;
+  outline: none;
+}
+input:focus{
+  color: #000;
+  background-color: #fff;
+}
 .login{
   width: 100%;
   height: 100%;