diff --git a/src/css/style.scss b/src/css/style.scss
index 38660a6..3d2f4ea 100644
--- a/src/css/style.scss
+++ b/src/css/style.scss
@@ -98,7 +98,7 @@ h2{
   justify-content: space-between;
 }
 
-.main-column-hydration {
+.main-column-hydration, .main-column-activity, .main-column-sleep{
   align-items: center;
   padding: 0px 15px;
   display: flex;
@@ -106,32 +106,16 @@ h2{
   height: 100%
 }
 
-.main-column-activity {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.main-column-sleep {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  padding: 0px 15px;
-}
-
 .infoContainer-cardContainer-card-horizontal {
   width: 100%;
   background-color: white;
-  // border: 1px solid black;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
 }
 
-.horizontalCard-activity-container {
+.horizontalCard-activity-container, .horizontalCard-sleep-container {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
@@ -140,29 +124,12 @@ h2{
 
 .infoContainer-cardContainer-card-vertical {
   width: 100%;
-  // background-color: white;
-  // border: 1px solid black;
   display: flex;
   flex-direction: row;
-  // margin: 1%;
-}
-
-.card-today-hydration {
-  text-align: center;
-  background-color: #5BC8AC;
-  height: auto;
-  font-size: 1.5em;
-  margin: .5em;
-  font-family: sans-serif;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 80%;
 }
 
-.card-today-sleep {
+.card-today {
   text-align: center;
-  background-color: #EC96A4;
   height: auto;
   font-size: 1.5em;
   margin: .5em;
@@ -171,53 +138,38 @@ h2{
   flex-direction: column;
   justify-content: space-between;
   width: 80%;
+  &-hydration {
+    @extend .card-today;
+    background-color: #5BC8AC;
+  }
+  &-activity {
+    @extend .card-today;
+    background-color: #DFE166;
+    width: 40%;
+  }
+  &-sleep {
+    @extend .card-today;
+    background-color: #EC96A4;
+  }
 }
 
-.card-today-activity {
-  text-align: center;
-  background-color: #DFE166;
-  height: auto;
-  font-size: 1.5em;
-  margin: .3em;
-  font-family: sans-serif;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 40%;
-}
-
-.card-history-hydration {
-  text-align: center;
-  background-color: #ffffff;
-  font-size: 1em;
-  // margin: .5em;
-  font-family: sans-serif;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  // width: 50%;
-}
-
-.card-history-sleep {
-  text-align: center;
-  font-size: 1em;
-  margin: .5em;
-  font-family: sans-serif;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-}
-
-.card-history-activity {
+.card-history {
   text-align: center;
   font-size: 1em;
-  margin: .5em;
   font-family: sans-serif;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  // width: 50%;
-  height: 93%;
+  &-hydration {
+    @extend .card-history;
+  }
+  &-activity {
+    @extend .card-history;
+    height: 93%;
+  }
+  &-sleep {
+    @extend .card-history;
+  }
 }
 
 .number {
@@ -555,17 +507,10 @@ h2{
   color: red;
 }
 
-
 .hidden {
   display: none;
 }
 
-
-.visibility {
-  visibility: hidden;
-}
-
-
 .dropbtn {
   background-color: rgba(255, 255, 255, 0);
   color: #ddd;
@@ -586,6 +531,7 @@ h2{
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
+  text-align: -webkit-center;
 }
 
 .dropdown-content a {
@@ -607,4 +553,27 @@ nav {
 
 .dropdown-menus {
   padding-left: 35px;
+}
+
+
+@media only screen and (max-width: 900px) {
+  nav{
+    grid-template-rows: repeat(2, 1fr);
+    justify-content: center;
+    grid-template-columns: unset;
+  }
+  .body-main-infoContainter {
+    flex-direction: column;
+  }
+  .main-column-hydration, .main-column-activity, .main-column-sleep {
+    padding: 0px;
+  }
+  .card-history-activity, .card-history-hydration, .card-history-sleep {
+    width: -webkit-fill-available;
+  }
+.dropdown-content {
+  right: -111%;
+  width: 360px;
+  padding: 10px;
+}
 }
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 75f0995..c0ec6ea 100644
--- a/src/index.html
+++ b/src/index.html
@@ -14,23 +14,24 @@
 <body>
   <nav>
     <div class="dropdown-menus">
-    <div class="dropdown">
-      <img src="./images/The Rock.jpg" class="sidebar-header-userImage dropbbtn" alt="User Photo" </img>
-      <div class="dropdown-content">
-        <p class="sidebar-header-userInfo" id="userName"></p>
-        <div class="sidebar-header-line"></div>
-        <p class="sidebar-header-userInfo" id="userAddress"></p>
-        <div class="sidebar-header-line"></div>
-        <p class="sidebar-header-userInfo" id="userEmail"></p>
-        <div class="sidebar-header-line"></div>
-        <p class="sidebar-header-userInfo" id="userStridelength"></p>
-        <div class="sidebar-header-line"></div>
-        <p class="sidebar-header-userInfo" id="stepGoalCard"></p>
-        <p class="sidebar-header-userInfo" id="avStepGoalCard">
-        <p>
+      <div class="dropdown">
+        <img src="./images/The Rock.jpg" class="sidebar-header-userImage dropbbtn" alt="User Photo" </img>
+        <div class="dropdown-content">
+          <p class="sidebar-header-userInfo" id="userName"></p>
+          <div class="sidebar-header-line"></div>
+          <p class="sidebar-header-userInfo" id="userAddress"></p>
+          <div class="sidebar-header-line"></div>
+          <p class="sidebar-header-userInfo" id="userEmail"></p>
+          <div class="sidebar-header-line"></div>
+          <p class="sidebar-header-userInfo" id="userStridelength"></p>
+          <div class="sidebar-header-line"></div>
+          <p class="sidebar-header-userInfo" id="stepGoalCard"></p>
+          <p class="sidebar-header-userInfo" id="avStepGoalCard">
+          <p>
+            <button>ADD NEW DAY DATA</button>
+        </div>
       </div>
     </div>
-    </div>
     <h1 id="headerText">Activity Tracker</h1>
   </nav>
   <section class="main">
@@ -56,20 +57,11 @@ <h2 class="middle" id="chart-num">0<span>oz</span></h2>
               <label id="avg-oz-label" for="avg-oz">Average</label>
             </div>
           </div>
-        </section>
-        <section class="infoContainer-cardContainer-card-vertical">
           <div class="card-history-hydration">
             <p class="thisWeek">Water intake this week:</p>
             <div class="sidebar-header-line"></div>
             <div id="chartDiv-numOunces" style="width: 100%; height: 400px;"></div>
           </div>
-          <div class="card-history-hydration hidden">
-            <p class="historicalWeek"></p>
-            <div class="sidebar-header-line"></div>
-            <ul class="card-vertical-list" id="hydrationEarlierWeek">
-              <!-- Hydration week list goes here -->
-            </ul>
-          </div>
         </section>
       </section>
         <section class="main-column-activity">