diff --git a/package.json b/package.json
index d15d1347798..6ce5af52f6d 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "node server/index.js",
-    "local": "./node_modules/.bin/nodemon --watch server -e js server/index.js"
+    "local": "./node_modules/.bin/nodemon --watch server -e js server/index.js",
+    "sass-watch": "sass sass:public/styles --watch --poll --no-source-map"
   },
   "author": "Lighthouse Labs",
   "license": "ISC",
diff --git a/public/styles/article.css b/public/styles/article.css
index 008513ea80f..60600dd16c6 100644
--- a/public/styles/article.css
+++ b/public/styles/article.css
@@ -5,21 +5,18 @@ article {
   border-width: 5px;
   margin-top: 2em;
 }
-
-article header{
+article header {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   margin: 0.5em;
 }
-
-article footer{
+article footer {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   margin: 0.5em;
 }
-
 article img {
   display: flex;
   vertical-align: middle;
@@ -44,7 +41,7 @@ article img {
 .tweet-header-handle {
   display: flex;
   align-items: center;
-  color:rgb(142, 164, 172);
+  color: #8ea4ac;
   font-family: sans-serif;
   font-weight: 400;
   margin: 0em;
@@ -75,5 +72,5 @@ article img {
 }
 
 .tweet-footer-logo {
-  color: rgb(45, 19, 68);
-}
\ No newline at end of file
+  color: #2d1344;
+}
diff --git a/public/styles/header.css b/public/styles/header.css
index cc7398df528..5ca20458523 100644
--- a/public/styles/header.css
+++ b/public/styles/header.css
@@ -1,8 +1,8 @@
 #header-main {
   height: 400px;
   width: 100%;
-  position:relative;
-  background-color:rgb(201, 153, 64);
+  position: relative;
+  background-color: #c99940;
   background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
 }
 
@@ -23,4 +23,4 @@
   margin-top: 0px;
   margin-bottom: 0px;
   color: white;
-}
\ No newline at end of file
+}
diff --git a/public/styles/layout.css b/public/styles/layout.css
index a841331c7fe..7f635fae4f8 100644
--- a/public/styles/layout.css
+++ b/public/styles/layout.css
@@ -6,6 +6,7 @@
 html {
   box-sizing: border-box;
 }
+
 *, *:before, *:after {
   box-sizing: inherit;
 }
@@ -13,12 +14,11 @@ html {
 /*
  * Global layout stuff
  */
-
 body {
   color: #545149;
   background-color: #f4f1ec;
   font-size: 24px;
-  font-family: 'Source Sans Pro', sans-serif;
+  font-family: "Source Sans Pro", sans-serif;
 }
 
 main {
@@ -30,7 +30,6 @@ main {
   background-color: #f4f1ec;
 }
 
-
 /*
  * Additional CSS can be defined below or in other CSS files, as per instructions
- */
\ No newline at end of file
+ */
diff --git a/public/styles/main.css b/public/styles/main.css
index 94ecbd7958d..da2c65f02e8 100644
--- a/public/styles/main.css
+++ b/public/styles/main.css
@@ -1,7 +1,7 @@
 .main-circle-arrow {
   display: flex;
   position: fixed;
-  justify-content:center;
+  justify-content: center;
   align-items: center;
   right: 2em;
   bottom: 2em;
@@ -22,4 +22,4 @@
 
 #main-hide {
   display: none;
-}
\ No newline at end of file
+}
diff --git a/public/styles/nav.css b/public/styles/nav.css
index 60a7250589e..725223760f2 100644
--- a/public/styles/nav.css
+++ b/public/styles/nav.css
@@ -1,21 +1,18 @@
 nav {
   height: 120px;
   width: 100%;
-  /* background-color: #4056A1; */
   color: white;
   position: absolute;
   top: 0;
   z-index: 1;
-  background-color:rgb(201, 153, 64);
+  background-color: #c99940;
   background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
 }
-
 nav span {
-  font-family: 'Bungee', cursive;
+  font-family: "Bungee", cursive;
   padding-left: 1.5em;
   padding-right: 1.5em;
 }
-
 nav div {
   display: flex;
   flex-direction: column;
@@ -57,9 +54,9 @@ nav div {
   color: white;
   font-family: sans-serif;
   font-weight: 200;
-  background-color: rgb(201, 153, 64);
+  background-color: #c99940;
   border: solid;
-  border-color:rgb(201, 153, 64);
+  border-color: #c99940;
   background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
 }
 
@@ -73,4 +70,4 @@ nav div {
 
 nav i {
   color: red;
-}
\ No newline at end of file
+}
diff --git a/public/styles/new-tweets.css b/public/styles/new-tweets.css
index ec8618b9a15..abb3d6932a1 100644
--- a/public/styles/new-tweets.css
+++ b/public/styles/new-tweets.css
@@ -1,17 +1,12 @@
-#tweet-new-form {
-  display: none;
-}
-
 main section form {
   display: flex;
   flex-direction: column;
   margin: 0.5em;
 }
-
 main section form label {
   margin-top: 2em;
   font-family: sans-serif;
-  font-weight: 600
+  font-weight: 600;
 }
 
 .new-tweet {
@@ -19,10 +14,14 @@ main section form label {
   flex-direction: column;
 }
 
+#tweet-new-form {
+  display: none;
+}
+
 #tweet-text {
   padding-left: 0.5em;
   padding-right: 0.5em;
-  padding-bottom: 0.5emem;
+  padding-bottom: 0.5em;
   padding-top: 0em;
   border-top-width: 0px;
   border-left-width: 0px;
@@ -47,7 +46,7 @@ main section form label {
 #tweet-button button {
   background-color: #4056A1;
   color: white;
-  font-family: 'Bungee', cursive;
+  font-family: "Bungee", cursive;
   padding-top: 0.1em;
   padding-bottom: 0.1em;
   padding-left: 0.5em;
@@ -57,7 +56,7 @@ main section form label {
 }
 
 #tweet-button output {
-  font-family: 'Bungee', cursive;
+  font-family: "Bungee", cursive;
 }
 
 #error-message {
diff --git a/public/styles/responsive-design.css b/public/styles/responsive-design.css
index b9aebc60869..c72464a9a0c 100644
--- a/public/styles/responsive-design.css
+++ b/public/styles/responsive-design.css
@@ -1,5 +1,13 @@
 @media only screen and (min-width: 1024px) {
-  nav {
+  html {
+    width: 100%;
+  }
+  html main {
+    width: 55%;
+    margin-right: 2em;
+    float: right;
+  }
+  html nav {
     background-color: #4056A1;
     background-image: none;
   }
@@ -10,10 +18,6 @@
     border-color: #4056A1;
   }
 
-  html {
-    width: 100%;
-  }
-  
   #header-main {
     height: 300px;
     margin: 2em;
@@ -30,10 +34,4 @@
     display: flex;
     margin-top: 5em;
   }
-
-  main {
-    width: 55%;
-    margin-right: 2em;
-    float: right;
-  }
-}
\ No newline at end of file
+}
diff --git a/sass/_base.scss b/sass/_base.scss
new file mode 100644
index 00000000000..2373ca7221f
--- /dev/null
+++ b/sass/_base.scss
@@ -0,0 +1,5 @@
+$main-color-yellow: rgb(201, 153, 64);
+$main-color-black: #545149;
+$main-color-white: #f4f1ec;
+$main-color-blue: #4056A1;
+$main-back-texture: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
\ No newline at end of file
diff --git a/sass/article.scss b/sass/article.scss
new file mode 100644
index 00000000000..dad5b938706
--- /dev/null
+++ b/sass/article.scss
@@ -0,0 +1,79 @@
+article {
+  display: flex;
+  flex-direction: column;
+  border-style: solid;
+  border-width: 5px;
+  margin-top: 2em;
+
+  header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin: 0.5em;
+  }
+
+  footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin: 0.5em;
+  }
+
+  img {
+    display: flex;
+    vertical-align: middle;
+    height: 50px;
+    width: 50px;
+  }
+}
+
+.tweet-header-left {
+  display: flex;
+  align-content: center;
+}
+
+.tweet-header-name {
+  display: flex;
+  align-items: center;
+  font-family: sans-serif;
+  font-weight: 100;
+  margin: 0em;
+  padding-left: 0.5em;
+}
+
+.tweet-header-handle {
+  display: flex;
+  align-items: center;
+  color:rgb(142, 164, 172);
+  font-family: sans-serif;
+  font-weight: 400;
+  margin: 0em;
+  padding-right: 0.3em;
+}
+
+.tweet-article-content {
+  border-style: solid;
+  border-top-width: 0px;
+  border-left-width: 0px;
+  border-right-width: 0px;
+  border-bottom-width: 5px;
+  margin: 0.5em;
+  font-family: sans-serif;
+  font-weight: 400;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  padding-bottom: 1.2em;
+  padding-top: 0em;
+  word-wrap: break-word;
+}
+
+.tweet-footer-time {
+  font-family: sans-serif;
+  font-weight: 100;
+  font-size: 0.8em;
+  margin-left: 0.7em;
+}
+
+.tweet-footer-logo {
+  color: rgb(45, 19, 68);
+}
\ No newline at end of file
diff --git a/sass/header.scss b/sass/header.scss
new file mode 100644
index 00000000000..5cde07503cf
--- /dev/null
+++ b/sass/header.scss
@@ -0,0 +1,28 @@
+@use 'base';
+
+#header-main {
+  height: 400px;
+  width: 100%;
+  position: relative;
+  background-color: base.$main-color-yellow;
+  background-image: base.$main-back-texture;
+}
+
+#header-element {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+#header-avator {
+  padding-top: 120px;
+  width: 150px;
+  height: auto;
+}
+
+#header-word {
+  margin-top: 0px;
+  margin-bottom: 0px;
+  color: white;
+}
\ No newline at end of file
diff --git a/sass/layout.scss b/sass/layout.scss
new file mode 100644
index 00000000000..07097d54853
--- /dev/null
+++ b/sass/layout.scss
@@ -0,0 +1,39 @@
+/*
+ * http://www.paulirish.com/2012/box-sizing-border-box-ftw/
+ * https://css-tricks.com/international-box-sizing-awareness-day/
+ * Do not modify these two selectors, please
+ */
+
+@use 'base';
+
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+/*
+ * Global layout stuff
+ */
+
+body {
+  color: base.$main-color-black;
+  background-color: base.$main-color-white;
+  font-size: 24px;
+  font-family: 'Source Sans Pro', sans-serif;
+}
+
+main {
+  width: 90%;
+  padding: auto;
+  margin: auto;
+  margin-bottom: 2em;
+  text-align: centre;
+  background-color: base.$main-color-white;
+}
+
+
+/*
+ * Additional CSS can be defined below or in other CSS files, as per instructions
+ */
\ No newline at end of file
diff --git a/sass/main.scss b/sass/main.scss
new file mode 100644
index 00000000000..94ecbd7958d
--- /dev/null
+++ b/sass/main.scss
@@ -0,0 +1,25 @@
+.main-circle-arrow {
+  display: flex;
+  position: fixed;
+  justify-content:center;
+  align-items: center;
+  right: 2em;
+  bottom: 2em;
+}
+
+#main-circle {
+  position: fixed;
+  color: red;
+  font-size: 70px;
+}
+
+#main-arrow {
+  position: fixed;
+  color: white;
+  font-size: 40px;
+  vertical-align: middle;
+}
+
+#main-hide {
+  display: none;
+}
\ No newline at end of file
diff --git a/sass/nav.scss b/sass/nav.scss
new file mode 100644
index 00000000000..8f476d7e87b
--- /dev/null
+++ b/sass/nav.scss
@@ -0,0 +1,78 @@
+@use 'base';
+
+nav {
+  height: 120px;
+  width: 100%;
+  color: white;
+  position: absolute;
+  top: 0;
+  z-index: 1;
+  background-color: base.$main-color-yellow;
+  background-image: base.$main-back-texture;
+
+  span {
+    font-family: 'Bungee', cursive;
+    padding-left: 1.5em;
+    padding-right: 1.5em;
+  }
+
+  div {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+}
+
+#nav-element {
+  display: flex;
+  justify-content: space-between;
+  height: 120px;
+}
+
+#nav-left {
+  display: flex;
+  font-size: 1.5em;
+  align-items: flex-end;
+  padding-bottom: 1em;
+}
+
+#nav-mid {
+  font-family: sans-serif;
+  font-size: xx-large;
+}
+
+#nav-mid-bold {
+  font-weight: 600;
+}
+
+#nav-mid-normal {
+  font-weight: 200;
+}
+
+#nav-right {
+  margin: 1em;
+}
+
+#nav-button {
+  color: white;
+  font-family: sans-serif;
+  font-weight: 200;
+  background-color: base.$main-color-yellow;
+  border: solid;
+  border-color: base.$main-color-yellow;
+  background-image: base.$main-back-texture;
+}
+
+#nav-right-arrow {
+  height: 30px;
+}
+
+#nav-right-bold {
+  font-weight: 500px;
+}
+
+nav i {
+  color: red;
+}
\ No newline at end of file
diff --git a/sass/new-tweets.scss b/sass/new-tweets.scss
new file mode 100644
index 00000000000..4ab41dcd61d
--- /dev/null
+++ b/sass/new-tweets.scss
@@ -0,0 +1,91 @@
+@use 'base';
+
+main section form {
+  display: flex;
+  flex-direction: column;
+  margin: 0.5em;
+
+  label {
+    margin-top: 2em;
+    font-family: sans-serif;
+    font-weight: 600
+  }
+
+}
+
+.new-tweet {
+  display: flex;
+  flex-direction: column;
+}
+
+#tweet-new-form {
+  display: none;
+}
+
+#tweet-text {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  padding-bottom: 0.5em;
+  padding-top: 0em;
+  border-top-width: 0px;
+  border-left-width: 0px;
+  border-right-width: 0px;
+  border-bottom-width: 5px;
+  margin-top: 1em;
+  outline: none;
+  background-color: base.$main-color-white;
+  resize: none;
+  overflow: hidden;
+  font-family: sans-serif;
+  font-weight: 400;
+  height: 56px;
+}
+
+#tweet-button {
+  display: flex;
+  padding-top: 1em;
+  justify-content: space-between;
+}
+
+#tweet-button button {
+  background-color: base.$main-color-blue;
+  color: white;
+  font-family: 'Bungee', cursive;
+  padding-top: 0.1em;
+  padding-bottom: 0.1em;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  border: solid;
+  border-color: base.$main-color-white;
+}
+
+#tweet-button output {
+  font-family: 'Bungee', cursive;
+}
+
+#error-message {
+  margin: 1em;
+  border: solid;
+  border-color: red;
+  width: auto;
+  display: none;
+}
+
+#error-message div {
+  margin: 0.3em;
+  display: flex;
+}
+
+#error-message i {
+  color: red;
+}
+
+#error-message p {
+  margin-top: 0px;
+  margin-bottom: 0px;
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+  color: red;
+  font-family: sans-serif;
+  font-weight: 100;
+}
diff --git a/sass/responsive-design.scss b/sass/responsive-design.scss
new file mode 100644
index 00000000000..25cc06f9b7d
--- /dev/null
+++ b/sass/responsive-design.scss
@@ -0,0 +1,42 @@
+@use 'base';
+
+@media only screen and (min-width: 1024px) {
+  html {
+    width: 100%;
+
+    main {
+      width: 55%;
+      margin-right: 2em;
+      float: right;
+    }
+
+    nav {
+      background-color: base.$main-color-blue;
+      background-image: none;
+    }
+  }
+
+  #nav-button {
+    background-color: base.$main-color-blue;
+    background-image: none;
+    border-color: base.$main-color-blue;
+  }
+
+  
+  #header-main {
+    height: 300px;
+    margin: 2em;
+    width: 45%;
+  }
+
+  #header-avator {
+    padding-top: 40px;
+    width: 150px;
+    height: auto;
+  }
+
+  #header-and-main {
+    display: flex;
+    margin-top: 5em;
+  }
+}
\ No newline at end of file
diff --git a/server/data-files/initial-tweets.json b/server/data-files/initial-tweets.json
index 7ea1d062aab..4c2414e2352 100644
--- a/server/data-files/initial-tweets.json
+++ b/server/data-files/initial-tweets.json
@@ -8,7 +8,7 @@
     "content": {
       "text": "If I have seen further it is by standing on the shoulders of giants"
     },
-    "created_at": 1632262273756
+    "created_at": 1632630018067
   },
   {
     "user": {
@@ -19,6 +19,6 @@
     "content": {
       "text": "Je pense , donc je suis"
     },
-    "created_at": 1632348673756
+    "created_at": 1632716418067
   }
 ]
\ No newline at end of file