diff --git a/public/css_styles/styles.css b/public/css_styles/styles.css
index 88adf74..ebf0d52 100644
--- a/public/css_styles/styles.css
+++ b/public/css_styles/styles.css
@@ -11,7 +11,7 @@
 }
 .header-main-page h1 {
   color: #ffffff;
-  font-size: 7vh;
+  font-size: 3vw;
   font-family: "Raleway", sans-serif;
   font-weight: 700;
   margin: 0;
@@ -20,7 +20,7 @@
 }
 .header-main-page h3 {
   color: rgba(255, 255, 255, 0.75);
-  font-size: 2vh;
+  font-size: 1vw;
   font-family: "Raleway", sans-serif;
   font-weight: 700;
   margin: 0;
@@ -44,6 +44,18 @@
   color: #000000;
 }
 
+@media (max-width: 991.98px) {
+  .header-main-page {
+    height: auto;
+    padding: 3vw 0px;
+  }
+  .header-main-page h1 {
+    font-size: 26pt;
+  }
+  .header-main-page h3 {
+    font-size: 13pt;
+  }
+}
 .banner-login {
   background-color: #D17262;
   color: white;
@@ -86,6 +98,36 @@
   opacity: 0%;
 }
 
+@media (max-width: 918px) {
+  .banner-login {
+    justify-content: initial;
+    height: auto;
+    padding: 2vh 2vw;
+  }
+  .banner-login p {
+    width: 33.3%;
+  }
+  .banner-login .button-container {
+    width: 66.6%;
+    justify-content: space-around;
+  }
+  .banner-login .button-container button {
+    width: 30%;
+  }
+}
+@media (max-width: 576px) {
+  .banner-login p {
+    width: 50%;
+  }
+  .banner-login .button-container {
+    width: 50%;
+    flex-direction: column;
+  }
+  .banner-login .button-container button {
+    width: 75%;
+    margin: 10px;
+  }
+}
 .main-pomodoro {
   display: flex;
   flex-direction: column;
@@ -137,6 +179,14 @@
   color: white;
 }
 
+@media (max-width: 576px) {
+  .main-pomodoro .timer {
+    font-size: 80pt;
+  }
+  .main-pomodoro .start-pomodoro {
+    font-size: 13pt;
+  }
+}
 .style-selector {
   width: calc(20vw - 1px);
   padding-left: 3vw;
@@ -210,6 +260,47 @@
   pointer-events: none;
 }
 
+@media (max-width: 991.98px) {
+  .style-selector {
+    position: initial;
+    margin: 0 0 5% 0;
+    width: 100%;
+    padding: 0;
+    padding: 0px 5vw;
+    box-sizing: border-box;
+  }
+  .style-selector h2 {
+    text-align: start;
+    margin-left: 0;
+  }
+  .style-selector .style-selection-container {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+  }
+  .style-selector .style-selection-container .style-container {
+    height: 100%;
+    width: 30%;
+    margin: 1% 10%;
+  }
+}
+@media (max-width: 918px) {
+  .style-selector {
+    margin-bottom: 5vh;
+  }
+  .style-selector .style-selection-container {
+    flex-wrap: nowrap;
+    flex-direction: column;
+  }
+  .style-selector .style-selection-container .style-container {
+    width: 60%;
+  }
+}
+@media (max-width: 462px) {
+  .style-selector .style-selection-container .style-container {
+    width: 100%;
+  }
+}
 .go-down {
   height: 7vh;
   width: 100%;
@@ -225,6 +316,18 @@
   fill: #aaaaaa;
 }
 
+.go-down-separator-line {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+.go-down-separator-line hr {
+  height: 1px;
+  width: 75%;
+  border: none;
+  border-top: 1px solid #b8b8b8;
+}
+
 #about-this, #credits {
   height: 83vh;
   padding: 0px 3vw;
@@ -275,6 +378,12 @@
   height: 95vh;
 }
 
+@media (max-width: 918px) {
+  #about-this, #credits {
+    height: auto;
+    padding-bottom: 5vh;
+  }
+}
 .history-button {
   background: none;
   border: none;
@@ -343,6 +452,12 @@
   background-color: #9DF3C4;
 }
 
+@media (max-width: 991.98px) {
+  .pomodoro-counter {
+    position: initial;
+    padding-bottom: 5vh;
+  }
+}
 .identify-container {
   display: flex;
   flex-direction: column;
@@ -454,6 +569,24 @@
   background-color: #b632eb;
 }
 
+@media (max-width: 991.98px) {
+  .dark-mode {
+    position: initial;
+  }
+}
+@media (max-width: 576px) {
+  .dark-mode {
+    margin-bottom: 20px;
+  }
+  .dark-mode label {
+    width: 50px;
+    height: 20px;
+  }
+  .dark-mode label::after {
+    width: 15px;
+    height: 15px;
+  }
+}
 .account-container #message {
   padding-left: 5vw;
   background-color: #ff6a6a;
@@ -567,13 +700,14 @@
 .go-to-account .go-to-account-text {
   font-family: "Raleway", sans-serif;
   font-weight: 700;
+  font-size: 1vw;
   text-decoration: none;
   user-select: none;
   color: #ffffff;
 }
 
 .close-session {
-  width: 6vw;
+  width: 7vw;
   height: 3vw;
   position: absolute;
   left: 10vw;
@@ -586,11 +720,41 @@
 .close-session .close-session-text {
   font-family: "Raleway", sans-serif;
   font-weight: 700;
+  font-size: 1vw;
   text-decoration: none;
   user-select: none;
   color: #ffffff;
 }
 
+@media (max-width: 991.98px) {
+  .go-to-account, .close-session {
+    position: initial;
+    padding: 1vw;
+  }
+
+  .go-to-account {
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+  .go-to-account .go-to-account-text {
+    font-size: 9pt;
+  }
+
+  .close-session .close-session-text {
+    font-size: 9pt;
+  }
+}
+@media (max-width: 576px) {
+  .go-to-account, .close-session {
+    width: auto;
+    height: auto;
+  }
+
+  .go-to-account-text, .close-session-text {
+    position: initial;
+    margin: 10px 10px;
+  }
+}
 .clockify-tasks-display {
   width: 20vw;
   position: absolute;
@@ -638,6 +802,41 @@
   opacity: 30%;
 }
 
+@media (max-width: 991.98px) {
+  .clockify-tasks-display {
+    position: initial;
+    width: auto;
+    display: flex;
+    justify-content: space-around;
+    padding: 0px 5vw;
+  }
+  .clockify-tasks-display.loading-container {
+    width: 90%;
+    height: auto;
+  }
+  .clockify-tasks-display .workspace-selector, .clockify-tasks-display .project-selector, .clockify-tasks-display input[type=text] {
+    width: 20vw;
+    height: 5vw;
+  }
+}
+@media (max-width: 576px) {
+  .clockify-tasks-display {
+    position: initial;
+    width: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .clockify-tasks-display.loading-container {
+    width: 90%;
+    height: auto;
+  }
+  .clockify-tasks-display .workspace-selector, .clockify-tasks-display .project-selector, .clockify-tasks-display input[type=text] {
+    width: 70%;
+    height: 4vh;
+    margin-top: 1vh;
+  }
+}
 html, body {
   margin: 0;
   padding: 0;
diff --git a/public/css_styles/styles.css.map b/public/css_styles/styles.css.map
index 4bb7b18..2d2d628 100644
--- a/public/css_styles/styles.css.map
+++ b/public/css_styles/styles.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss","../sass_styles/_pomodoro-counter.scss","../sass_styles/_identify.scss","../sass_styles/_dark-mode_toogle-switch.scss","../sass_styles/_account.scss","../sass_styles/_goToAccount.scss","../sass_styles/_clockify-tasks-display.scss"],"names":[],"mappings":"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","file":"styles.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss","../sass_styles/_pomodoro-counter.scss","../sass_styles/_identify.scss","../sass_styles/_dark-mode_toogle-switch.scss","../sass_styles/_account.scss","../sass_styles/_goToAccount.scss","../sass_styles/_clockify-tasks-display.scss"],"names":[],"mappings":"AACA;EACI,kBCsCS;EDpCT;EACA;EACA;EACA;EAEA;;AAEA;EACI;;AAGJ;EACI;EAEA;ECfJ;EACA;EAQA;EACA;EACA;;ADSA;EACI;EAEA;ECvBJ;EACA;EAQA;EACA;EACA;;ADiBI;EACI;;AAGA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAKA;EACI;EACA;;;AAUnB;EACI;IACG;IACA;;EACA;IACI;;EAGJ;IACI;;;AEpEZ;EACI;EACA;EDMA;ECFA;EACA;EACA;EAEA;EAEA;;AAGA;EDGA;EACA;;ACAA;EAEI;EAEA;EACA;;AAEA;EDHJ;EACA;EACA;ECIQ;EACA;EACA;EAEA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;;AAOZ;EACI;;;AAGJ;EACI;IACI;IAEA;IAEA;;EAEA;IACI;;EAGJ;IACI;IAEA;;EAEA;IACI;;;AAMhB;EAGQ;IACI;;EAGJ;IACI;IAEA;;EAEA;IACI;IACA;;;AC7FhB;EAEI;EACA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;EFJJ;EEOI;EACA;EAEA,OFuBO;;AEpBX;EAEI;EACA;EACA;EFjBJ;;AEqBI;EACI;EFZR;EACA;EEeQ,OFOG;EENH;;AAIJ;EACI;EFtBR;EACA;EEyBQ,OFHG;EEKH;EACA;;AAIR;EF5BA;EACA;EACA;EAtBA;EACA;EEmDI;EACA;EACA;EAEA,YFlBO;EEmBP;EAEA;EACA;;;AAKR;EAIQ;IACI;;EAGJ;IACI;;;AC7EZ;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAgFA;;AA9EA;EHRA;EGUI,OHuBO;EGtBP;EACA;EAEA;EAIA;EACA;;AAMA;EACI;EACA;EAEA;;AAEA;EACI;EACA;EACA;;AAEA;EHpCZ;EGsCgB;;AAGJ;EHzCZ;EG2CgB,OHVL;EGWK;;AAMZ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAKR;EACI;EAEA;EACA;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI,kBH7CE;;;AGsDd;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;IACI;IAEA;IAEA;IAEA;IACA;IAEA;;EAEA;IACI;IAEA;;EAIJ;IAEI;IAEA;IAEA;;EAEA;IACI;IACA;IAEA;;;AAMhB;EAEI;IAWI;;EATA;IACI;IAEA;;EAEA;IACI;;;AAQhB;EAMY;IACI;;;AC1KhB;EACI;EACA;EAEA;EACA;;AAGA;EACI;EACA;EAEA;;AAEA;EACI;;;AAMZ;EAEI;EAEA;EACA;;AAEA;EACI;EACA;EAEA;EACA;;;ACjCR;EACI;EAEA;EACA;;AAEA;EAEI;;AAEA;EACI;ELRR;EACA;EAQA;EACA;EACA;EKEQ;;AAEA;EACI;EACA;;AAKZ;EAEI;;AAEA;EACI;;AAEA;EAEI;;AAEA;ELxBZ;EACA;EACA;EANA;EK+BgB;;AAGJ;ELxBZ;EACA;EAXA;EKqCgB;EACA;EACA;;;AAOpB;EACI;;;AAGJ;EACI;IACI;IAEA;;;AC9DR;ENuBI;EACA;EACA;EMtBA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,kBN0BU;;AMxBV;ENUA;EMHI;EACA;;ANIJ;EACI;;AMVA;EACI;;AAQR;EACI;;AAIJ;EACI;IACI;;EAIJ;IACI;;;;AC3CZ;EAGI;EACA;;AAII;EACI;EPDR;EOKQ;EACA;EAEA;EAEA;;AAEA;EACI;EACA;;AAGJ;EPtBR;EACA;EOwBY;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,OPED;EODC,kBPGF;;;AOId;EAEI;IAEI;IACA;;;ACpDR;EACI;EACA;EACA;;AAEA;EACI;EAEA;EAEA;EACA;EACA;;AAEA;EACI;EACA;ERbR;EACA;EQeQ;EAEA;;AAMR;EACI;;AAEA;EACI;;AAEA;EACI;EAEA;EACA;EAEA;EACA,kBRCD;EQCC;EAEA;;AAEA;ER3CZ;EACA;EAQA;EACA;EACA;EQoCgB;;AAIR;EACI;EACA,kBRdM;;AQkBd;EAEI;EACA;;AAEA;EACI;EAEA;EACA;EACA;EAEA;;AAGA;EACI;EACA;EAEA;EAEA;EACA;EACA;;AAIJ;EACI;EACA;;;ACzFpB;EAEI;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA,kBT6BS;ES5BT;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EAEA,kBTKS;;ASFb;EACI;;;AAIR;EAEI;IACI;;;AAMR;EACI;IAWI;;EAVA;IACI;IACA;;EAGJ;IACI;IACA;;;AC/DR;EACI;EAEA;;AAEA;EVJJ;EACA;EAQA;EACA;EACA;EUHQ;EACA;;AAIR;EACI;;AAEA;EAAI;;AAKJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EAEA;EAEA,kBVOE;;AULF;EV1BR;EACA;EACA;EAXA;EACA;EUuCY,OVFD;EUIC;;AAIR;EACI;EAEA;EACA;EACA;EAEA;;AAGA;EACI;EACA;EAEA;EAEA;EACA;EACA;;AAIJ;EACI;EACA;;AAIR;EACI;;AAGJ;EACI;;AAEA;EACI;EACA,kBV1CC;EU4CD;EACA;EAEA;EAEA;;AAKI;EVtFhB;EACA;EACA;EAXA;EACA;;AUmGgB;EACI;;AAIR;EACI;EACA;EAEA;EAEA;EACA;EAEA;;;AAOpB;EACI;EACA;EAEA;EACA;EACA;;;AClIJ;EAEI;EACA;EAEA;EAEA;EAEA,kBXgCW;EW9BX;EACA;EACA;EAEA;;AAEA;EXdA;EACA;EWiBI;EACA;EACA;EAEA;;;AAIR;EACI;EACA;EAEA;EAEA;EAEA,kBXIW;EWFX;EACA;EACA;EAEA;;AAEA;EX1CA;EACA;EW4CI;EAEA;EAEA;EAEA;;;AAKR;EAEI;IACG;IACA;;;EAIH;IAOI;IACA;;EANA;IACI;;;EAUJ;IACI;;;AAKZ;EACI;IACI;IACA;;;EAGJ;IACI;IACA;;;AC9FR;EAEI;EACA;EAEA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EZhCJ;EYoCI;EAEA;EACA;EAEA;;AAEA;EACI;EACA;EACA;EACA;;;AAKZ;EAEI;IACI;IACA;IAEA;IACA;IAEA;;EAEA;IACI;IACA;;EAGJ;IACI;IACA;;;AAMZ;EAEI;IACI;IACA;IAEA;IACA;IACA;;EAEA;IACI;IACA;;EAGJ;IACI;IACA;IACA;;;AZrCZ;EACI;EACA;;;AAGJ;EACI;EACA,kBAnCe","file":"styles.css"}
\ No newline at end of file
diff --git a/public/sass_styles/_aboutThis.scss b/public/sass_styles/_aboutThis.scss
index 8bb31e4..79a5fc9 100644
--- a/public/sass_styles/_aboutThis.scss
+++ b/public/sass_styles/_aboutThis.scss
@@ -54,4 +54,12 @@
 
 #credits {
     height: 95vh;
+}
+
+@media (max-width: 918px) {
+    #about-this, #credits {
+        height: auto;
+
+        padding-bottom: 5vh;
+    }
 }
\ No newline at end of file
diff --git a/public/sass_styles/_banner-login.scss b/public/sass_styles/_banner-login.scss
index 5608a0e..56e04f8 100644
--- a/public/sass_styles/_banner-login.scss
+++ b/public/sass_styles/_banner-login.scss
@@ -51,4 +51,48 @@
 
 .blank {
     opacity: 0%;
+}
+
+@media (max-width: 918px) {
+    .banner-login {
+        justify-content: initial;
+
+        height: auto;
+
+        padding: 2vh 2vw;
+
+        p {
+            width: 33.3%;
+        }
+
+        .button-container {
+            width: 66.6%;
+
+            justify-content: space-around;
+
+            button {
+                width: 30%;
+            }
+        }
+    }
+}
+
+@media (max-width: 576px) {
+    .banner-login {
+
+        p {
+            width: 50%;
+        }
+
+        .button-container {
+            width: 50%;
+
+            flex-direction: column;
+
+            button {
+                width: 75%;
+                margin: 10px;
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/public/sass_styles/_clockify-tasks-display.scss b/public/sass_styles/_clockify-tasks-display.scss
index e9411f7..ecf761b 100644
--- a/public/sass_styles/_clockify-tasks-display.scss
+++ b/public/sass_styles/_clockify-tasks-display.scss
@@ -56,4 +56,51 @@
             opacity: 30%;
         }
     }
+}
+
+@media (max-width: 991.98px) {
+
+    .clockify-tasks-display {
+        position: initial;
+        width: auto;
+
+        display: flex;
+        justify-content:space-around;
+
+        padding: 0px 5vw;
+
+        &.loading-container {
+            width: 90%;
+            height: auto;
+        }
+
+        .workspace-selector, .project-selector, input[type=text] {
+            width: 20vw;
+            height: 5vw;
+        }
+    
+    }
+}
+
+@media (max-width: 576px) {
+
+    .clockify-tasks-display {
+        position: initial;
+        width: auto;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        &.loading-container {
+            width: 90%;
+            height: auto;
+        }
+
+        .workspace-selector, .project-selector, input[type=text] {
+            width: 70%;
+            height: 4vh;
+            margin-top: 1vh;
+        }
+    }
 }
\ No newline at end of file
diff --git a/public/sass_styles/_dark-mode_toogle-switch.scss b/public/sass_styles/_dark-mode_toogle-switch.scss
index ce36927..7608447 100644
--- a/public/sass_styles/_dark-mode_toogle-switch.scss
+++ b/public/sass_styles/_dark-mode_toogle-switch.scss
@@ -44,3 +44,28 @@
         background-color: #b632eb;
     }
 }
+
+@media (max-width: 991.98px) {
+    
+    .dark-mode {
+        position: initial;
+
+    }
+}
+
+
+@media (max-width: 576px) { 
+    .dark-mode {
+        label {
+            width: 50px;
+            height: 20px;
+        }
+    
+        label::after {
+            width: 15px;
+            height: 15px;
+        }
+
+        margin-bottom: 20px;
+    }
+}
\ No newline at end of file
diff --git a/public/sass_styles/_goDownArrow.scss b/public/sass_styles/_goDownArrow.scss
index bcdb09b..c1f300f 100644
--- a/public/sass_styles/_goDownArrow.scss
+++ b/public/sass_styles/_goDownArrow.scss
@@ -17,4 +17,20 @@
             // CREDITS TO https://stackoverflow.com/a/49627345
         }
     }
+}
+
+.go-down-separator-line {
+
+    width: 100%;
+
+    display: flex;
+    justify-content: center;
+    
+    hr {
+        height: 1px;
+        width: 75%;
+
+        border: none;
+        border-top: 1px solid rgb(184, 184, 184);
+    }
 }
\ No newline at end of file
diff --git a/public/sass_styles/_goToAccount.scss b/public/sass_styles/_goToAccount.scss
index 751f209..8c84255 100644
--- a/public/sass_styles/_goToAccount.scss
+++ b/public/sass_styles/_goToAccount.scss
@@ -18,6 +18,8 @@
     .go-to-account-text {
 
         @include titleFont();
+        
+        font-size: 1vw;
         text-decoration: none;
         user-select: none;
 
@@ -26,7 +28,7 @@
 }
 
 .close-session {
-    width: 6vw;
+    width: 7vw;
     height: 3vw;
 
     position: absolute;
@@ -44,10 +46,53 @@
     .close-session-text {
 
         @include titleFont();
+        font-size: 1vw;
+
         text-decoration: none;
 
         user-select: none;
 
         color: #ffffff;
     }
+}
+
+
+@media (max-width: 991.98px) {
+    //! I fucking hate make the responsive design
+    .go-to-account, .close-session {
+       position: initial;
+       padding: 1vw;
+
+    }
+
+    .go-to-account {
+
+        .go-to-account-text {
+            font-size: 9pt;
+            
+        }
+
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+
+    .close-session {
+
+        .close-session-text {
+            font-size: 9pt;
+        }
+    }
+}
+
+@media (max-width: 576px) {
+    .go-to-account, .close-session {
+        width: auto;
+        height: auto;
+    }
+
+    .go-to-account-text, .close-session-text {
+        position: initial;
+        margin:10px 10px;
+ 
+     }
 }
\ No newline at end of file
diff --git a/public/sass_styles/_header.scss b/public/sass_styles/_header.scss
index a951f74..8f9079c 100644
--- a/public/sass_styles/_header.scss
+++ b/public/sass_styles/_header.scss
@@ -16,7 +16,7 @@
     h1 {
         color: #ffffff;
 
-        font-size: 7vh;
+        font-size: 3vw;
         @include titleFont();
         @include normalizeTitle();
     }
@@ -24,7 +24,8 @@
     h3 {
         color: rgba(255, 255, 255, 0.75);
 
-        font-size: 2vh;
+        font-size: 1vw;
+
         @include titleFont();
         @include normalizeTitle();
 
@@ -51,4 +52,21 @@
             }
         }
     }
-}
\ No newline at end of file
+}
+
+
+
+
+ @media (max-width: 991.98px) {
+     .header-main-page {
+        height: auto;
+        padding: 3vw 0px;
+        h1 {
+            font-size: 26pt;
+        }
+
+        h3 {
+            font-size: 13pt;
+        }
+     }
+ }
\ No newline at end of file
diff --git a/public/sass_styles/_mainPomodoro.scss b/public/sass_styles/_mainPomodoro.scss
index 73d77e4..9250cef 100644
--- a/public/sass_styles/_mainPomodoro.scss
+++ b/public/sass_styles/_mainPomodoro.scss
@@ -63,4 +63,19 @@
         font-size: 5vh;
         color: white;
     }
+}
+
+
+@media (max-width: 576px) {
+
+    .main-pomodoro {
+        
+        .timer {
+            font-size: 80pt;
+        }
+
+        .start-pomodoro {
+            font-size: 13pt;
+        }
+    }
 }
\ No newline at end of file
diff --git a/public/sass_styles/_pomodoro-counter.scss b/public/sass_styles/_pomodoro-counter.scss
index f02a9c5..1aed09b 100644
--- a/public/sass_styles/_pomodoro-counter.scss
+++ b/public/sass_styles/_pomodoro-counter.scss
@@ -42,4 +42,14 @@
             }
         }
     }
+}
+
+
+@media (max-width: 991.98px) {
+
+    .pomodoro-counter {
+
+        position: initial;
+        padding-bottom: 5vh;
+    }
 }
\ No newline at end of file
diff --git a/public/sass_styles/_styleSelector.scss b/public/sass_styles/_styleSelector.scss
index 08fa53c..c54a92c 100644
--- a/public/sass_styles/_styleSelector.scss
+++ b/public/sass_styles/_styleSelector.scss
@@ -95,12 +95,82 @@
     transition: 0.2s ease-in-out;
 }
 
-        .style-selector-show {
-            opacity: 100%;
-            pointer-events: auto;
+.style-selector-show {
+    opacity: 100%;
+    pointer-events: auto;
+}
+
+.style-selector-hidden {
+    opacity: 0%;
+    pointer-events: none;
+}
+
+@media (max-width: 991.98px) {
+    .style-selector {
+        position: initial;
+
+        margin: 0 0 5% 0;
+
+        width: 100%;
+
+        padding: 0;
+        padding: 0px 5vw;
+
+        box-sizing: border-box;
+
+        h2 {
+            text-align: start;
+
+            margin-left: 0;
+            
         }
 
-        .style-selector-hidden {
-            opacity: 0%;
-            pointer-events: none;
-        }
\ No newline at end of file
+        .style-selection-container {
+
+            display: flex;
+
+            flex-wrap: wrap;
+
+            width: 100%;
+
+            .style-container{
+                height: 100%;
+                width: 30%;
+
+                margin: 1% 10%;
+            }
+        }
+    }
+}
+
+@media (max-width: 918px) {
+
+    .style-selector {
+        
+        .style-selection-container {
+            flex-wrap: nowrap;
+
+            flex-direction: column;
+
+            .style-container {
+                width: 60%  ;
+            }
+        }
+        margin-bottom: 5vh;
+
+    }
+}
+
+@media (max-width: 462px) {
+
+    .style-selector {
+
+        .style-selection-container {
+
+            .style-container{
+                width: 100%;
+            }
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 33036aa..d0e0574 100644
--- a/src/App.js
+++ b/src/App.js
@@ -66,6 +66,24 @@ function App() {
             <BannerLogin 
               signIn={signIn}
             />
+
+            <ClockifyTasksDisplay
+              signIn={signIn}
+              timerOn={timerOn}
+
+              apiKey={apiKey}
+              setApiKey={setApiKey}
+
+              taskName={taskName}
+              setTaskName={setTaskName}
+
+              workspaceID={workspaceID}
+              setWorspaceID={setWorspaceID}
+
+              projectID={projectID}
+              setProjectID={setProjectID}
+            />
+
             <MainPomodoro 
               signIn={signIn}
               timerOn={timerOn}
@@ -84,22 +102,6 @@ function App() {
 
             />
 
-            <ClockifyTasksDisplay
-              signIn={signIn}
-              timerOn={timerOn}
-
-              apiKey={apiKey}
-              setApiKey={setApiKey}
-
-              taskName={taskName}
-              setTaskName={setTaskName}
-
-              workspaceID={workspaceID}
-              setWorspaceID={setWorspaceID}
-
-              projectID={projectID}
-              setProjectID={setProjectID}
-            />
             <GoDownArrow 
               direction={'about-this'}
             />
diff --git a/src/components/GoDownArrow.jsx b/src/components/GoDownArrow.jsx
index 87b5431..74ffed0 100644
--- a/src/components/GoDownArrow.jsx
+++ b/src/components/GoDownArrow.jsx
@@ -3,6 +3,19 @@ import { Link, animateScroll as scroll } from "react-scroll";
 
 const GoDownArrow = (props) => {
 
+        
+        const width = window.screen.width
+
+        console.log(width)
+
+        if (width <= '991.98') {
+            return (
+                <div className="go-down-separator-line">
+                    <hr/>
+                </div>
+            )
+        }
+
     console.log('GO DOWN ARROW DEPLOYED')
 
     return (