diff --git a/src/Sleep.js b/src/Sleep.js
index 336cc38..107cc50 100644
--- a/src/Sleep.js
+++ b/src/Sleep.js
@@ -1,10 +1,8 @@
 class Sleep {
   constructor(sleepData, userNow, date, userRepo) {
-  // constructor(sleepData, userNow, userRepo) {
     this.sleepData = sleepData;
     this.user = userNow;
     this.date = date;
-    // this.date = this.returnToday(this.sleepData);
     this.userRepo = userRepo;
   }
   
@@ -35,13 +33,11 @@ class Sleep {
     });
     return findSleepQualityByDate.sleepQuality;
   }
-
-  calculateWeekSleep() {
-    return this.userRepo.getWeekFromDate(this.date, this.user.id, this.sleepData).map((data) => `${data.date}: ${data.hoursSlept}`);
-  }
-
-  calculateWeekSleepQuality() {
-    return this.userRepo.getWeekFromDate(this.date, this.user.id, this.sleepData).map((data) => `${data.date}: ${data.sleepQuality}`);
+  
+  userDataForWeek(relevantData) {
+    return this.userRepo.getWeekFromDate(this.date, this.user.id, this.sleepData).map((data) => {
+      return {x: data.date, y: data[relevantData]}
+    });
   }
 
   calculateAllUserSleepQuality() {
@@ -52,44 +48,7 @@ class Sleep {
     let total = totalSleepQuality / this.sleepData.length;
     return parseFloat(total.toFixed(2));
   }
-//   determineBestSleepers(date, userRepo) {
-//     let timeline = userRepo.chooseWeekDataForAllUsers(this.sleepData, date);
-//     let userSleepObject = userRepo.isolateUsernameAndRelevantData(this.sleepData, date, 'sleepQuality', timeline);
-
-//     return Object.keys(userSleepObject).filter(function(key) {
-//       return (userSleepObject[key].reduce(function(sumSoFar, sleepQualityValue) {
-//         sumSoFar += sleepQualityValue
-//         return sumSoFar;
-//       }, 0) / userSleepObject[key].length) > 3
-//     }).map(function(sleeper) {
-//       return userRepo.getDataFromID(parseInt(sleeper)).name;
-//     })
-//   }
-//   determineSleepWinnerForWeek(date, userRepo) {
-//     let timeline = userRepo.chooseWeekDataForAllUsers(this.sleepData, date);
-//     let sleepRankWithData = userRepo.combineRankedUserIDsAndAveragedData(this.sleepData, date, 'sleepQuality', timeline);
-
-//     return this.getWinnerNamesFromList(sleepRankWithData, userRepo);
-//   }
-//   determineSleepHoursWinnerForDay(date, userRepo) {
-//     let timeline = userRepo.chooseDayDataForAllUsers(this.sleepData, date);
-//     let sleepRankWithData = userRepo.combineRankedUserIDsAndAveragedData(this.sleepData, date, 'hoursSlept', timeline);
-
-//     return this.getWinnerNamesFromList(sleepRankWithData, userRepo);
-//   }
-//   getWinnerNamesFromList(sortedArray, userRepo) {
-//     let bestSleepers = sortedArray.filter(function(element) {
-//       return element[Object.keys(element)] === Object.values(sortedArray[0])[0]
-//     });
-
-//     let bestSleeperIds = bestSleepers.map(function(bestSleeper) {
-//       return (Object.keys(bestSleeper));
-//     });
 
-//     return bestSleeperIds.map(function(sleepNumber) {
-//       return userRepo.getDataFromID(parseInt(sleepNumber)).name;
-//     });
-//   }
 }
 
 
diff --git a/src/css/style.scss b/src/css/style.scss
index ed4a5b5..2156aaa 100644
--- a/src/css/style.scss
+++ b/src/css/style.scss
@@ -1,4 +1,7 @@
+
+
 * {
+  font-family: 'Montserrat', sans-serif !important;
   margin: 0;
 }
 
@@ -16,6 +19,10 @@ h1 {
   padding-top: 10px;
 }
 
+h2{
+  padding: 10px !important;
+}
+
 .main {
   display: flex;
   flex-direction: row;
@@ -81,39 +88,42 @@ h1 {
 
 .body-main-infoContainter {
   width: 100%;
-  border: 1px solid black;
   margin: 0 0 1em;
   display: flex;
-  flex-direction: column;
-  overflow: scroll;
+  flex-direction: row;
+  justify-content: space-between;
 }
 
 .main-column-hydration {
+  align-items: center;
+  padding: 0px 15px;
   display: flex;
-  flex-direction: row;
-  height: 25%
+  flex-direction: column;
+  height: 100%
 }
 
 .main-column-activity {
+  align-items: center;
   display: flex;
-  flex-direction: row;
-  height: 50%
+  flex-direction: column;
+  height: 100%;
 }
 
 .main-column-sleep {
+  align-items: center;
   display: flex;
-  flex-direction: row;
-  height: 35%
+  flex-direction: column;
+  height: 100%;
+  padding: 0px 15px;
 }
 
 .infoContainer-cardContainer-card-horizontal {
   width: 100%;
   background-color: white;
-  border: 1px solid black;
+  // border: 1px solid black;
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin: 1%;
   justify-content: space-between;
 }
 
@@ -122,17 +132,15 @@ h1 {
   flex-direction: row;
   justify-content: space-around;
   width: 100%;
-  overflow: scroll;
 }
 
 .infoContainer-cardContainer-card-vertical {
   width: 100%;
-  background-color: white;
-  border: 1px solid black;
+  // background-color: white;
+  // border: 1px solid black;
   display: flex;
   flex-direction: row;
-  margin: 1%;
-  overflow: scroll;
+  // margin: 1%;
 }
 
 .card-today-hydration {
@@ -176,40 +184,36 @@ h1 {
 
 .card-history-hydration {
   text-align: center;
-  background-color: #5BC8AC;
+  background-color: #ffffff;
   font-size: 1em;
-  margin: .5em;
+  // margin: .5em;
   font-family: sans-serif;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  width: 50%;
+  // width: 50%;
 }
 
 .card-history-sleep {
   text-align: center;
-  background-color: #EC96A4;
   font-size: 1em;
   margin: .5em;
   font-family: sans-serif;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  width: 50%;
 }
 
 .card-history-activity {
   text-align: center;
-  background-color: #DFE166;
   font-size: 1em;
   margin: .5em;
   font-family: sans-serif;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  width: 50%;
+  // width: 50%;
   height: 93%;
-  overflow: scroll;
 }
 
 .number {
@@ -219,6 +223,10 @@ h1 {
   font-kerning: normal;
 }
 
+.percent {
+  padding: 0px 0px 15px 0px;
+}
+
 .historicalWeek {
   text-align: center;
   font-size: 1em;
@@ -248,3 +256,237 @@ h1 {
   font-weight: bold;
   font-family: sans-serif;
 }
+
+
+.box{
+  position:relative;
+  width:fit-content;
+  height:400px;
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  flex-direction:column;
+  background: #fff0;
+}
+
+
+.box .percent svg{
+  padding-bottom: 5px;
+  overflow: visible;
+  position:relative;
+  width: 150px;
+  height: 150px;
+}
+
+.box .percent svg circle {
+  width: 150px;
+  height: 150px;
+  fill: none;
+  stroke-width: 10;
+  stroke: #000;
+  transform: translate(5px,5px);
+  stroke-dasharray:440;
+  stroke-dashoffset:440;
+  stroke-linecap:round;
+}
+
+.box .percent svg circle:nth-child(1){
+  stroke-dashoffset:0;
+  stroke:#f3f3f3;
+  transform: rotate(-90deg);
+  transform-origin: center;
+}
+
+@keyframes circle-chart-fill {
+  to { stroke-dasharray: 0 100; }
+}
+
+#chart-bar{
+  animation: circle-chart-fill 4s reverse;
+  transform: rotate(-90deg);
+  transform-origin: center;
+  stroke-dashoffset: calc(440 - (440*87) / 100);
+  &hydro {
+    @extend #chart-bar;
+    stroke: #00aeff;
+  }
+  &activity {
+    @extend #chart-bar;
+    stroke: #DFE166;
+  }
+  &sleep {
+    @extend #chart-bar;
+    stroke: #EC96A4;
+  }
+}
+
+.box .percent .number{
+  flex-direction: column;
+  position: absolute;
+  top:0;
+  left:0;
+  width:100%;
+  height:90%;
+  display:flex;
+  justify-content:center;
+  align-items: center;
+  &hydro {
+    @extend .box, .percent, .number;
+    color: #00aeff;
+  }
+  &activity {
+    @extend .box, .percent, .number;
+    color: #DFE166;
+    height: 95%;
+  }
+  &sleep {
+    @extend .box, .percent, .number;
+    color: #EC96A4;
+  }
+}
+
+.box .percent .number h2{
+  font-size: 27px;
+}
+
+.box .percent .number h2 span{
+  font-size:22px;
+}
+
+.box .text{
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  width: max-content;
+  height: 0px;
+  &hydro {
+    @extend .box, .text;
+    color: #00aeff;
+  }
+  &activity {
+    @extend .box, .text;
+    color: #DFE166;
+  }
+  &sleep {
+    @extend .box, .text;
+    color: #EC96A4;
+  }
+}
+
+.data-radio{
+  display: flex;
+  flex-direction: row;
+}
+.data-radio-activity {
+  @extend .data-radio;
+  @extend .data-radio, label;
+  @extend .data-radio, input[type="radio"];
+}
+
+.data-radio-sleep {
+  @extend .data-radio-activity;
+}
+
+.data-radio input[type="radio"] {
+  opacity: 0;
+  position: fixed;
+  width: 0;
+}
+
+.data-radio label {
+  color: rgb(255, 255, 255);
+  display: inline-block;
+  background-color: #8b8b8b;
+  padding: 5px 15px;
+  margin: 0px 5px;
+  font-family: sans-serif, Arial;
+  font-size: 13px;
+  border: 1px solid #00aeff;
+  border-radius: 18px;
+  z-index: 1;
+  border: 1px solid #00aeff; 
+}
+
+.data-radio input[type="radio"]:checked + label {
+  box-shadow: inset 0px 0px 6px 0px black;
+  background-color:#00aeff;
+  border-color: rgb(255, 255, 255);
+}
+
+.data-radio-activity label {
+  color: rgb(18, 18, 18);
+  display: inline-block;
+  background-color: #8b8b8b;
+  padding: 5px 15px;
+  margin: 0px 5px;
+  font-family: sans-serif, Arial;
+  font-size: 13px;
+  border: 1px solid #DFE166;
+  border-radius: 18px;
+  z-index: 1;
+  border: 1px solid #DFE166; 
+}
+
+.data-radio-activity input[type="radio"]:checked + label {
+  box-shadow: inset 0px 0px 6px 0px black;
+  background-color:#DFE166;
+  border-color: rgb(255, 255, 255);
+}
+
+.data-radio-sleep label {
+  color: rgb(18, 18, 18);
+  display: inline-block;
+  background-color: #8b8b8b;
+  padding: 5px 15px;
+  margin: 0px 5px;
+  font-family: sans-serif, Arial;
+  font-size: 13px;
+  border: 1px solid #EC96A4;
+  border-radius: 18px;
+  z-index: 1;
+  border: 1px solid #EC96A4; 
+}
+
+.data-radio-sleep input[type="radio"]:checked + label {
+  box-shadow: inset 0px 0px 6px 0px black;
+  background-color:#EC96A4;
+  border-color: rgb(255, 255, 255);
+}
+
+.title{
+  font-size: 48px;
+  &hydro {
+    @extend .title;
+    color: #00aeff;
+  }
+  &activity {
+    @extend .title;
+    color: #DFE166;
+  }
+  &sleep{
+    @extend .title;
+    color: #EC96A4;
+  }
+}
+
+
+.activity-charts{
+  display: flex !important;
+  flex: row;
+  justify-content: center;
+  width: 75%;
+}
+
+.error-message{
+  color: red;
+}
+
+
+.hidden {
+  display: none;
+}
+
+
+.visibility {
+  visibility: hidden;
+}
diff --git a/src/index.html b/src/index.html
index 74f515e..97f6bbb 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,10 +1,14 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Activity Tracker</title>
-  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,800&display=swap" rel="stylesheet" />
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,800&display=swap"
+    rel="stylesheet" />
 </head>
 
 <body>
@@ -16,6 +20,7 @@ <h2 class="sidebar-header-name" id="sidebarName">Name Name</h2>
         <div class="sidebar-header-line"></div>
         <img src="./images/The Rock.jpg" class="sidebar-header-userImage"></img>
         <div class="sidebar-header-line"></div>
+        <input type="date" value="2019-09-22" min="2019-06-15" max="2019-09-22">
         <p class="sidebar-header-userInfo" id="userAddress"></p>
         <div class="sidebar-header-line"></div>
         <p class="sidebar-header-userInfo" id="userEmail"></p>
@@ -24,31 +29,44 @@ <h2 class="sidebar-header-name" id="sidebarName">Name Name</h2>
         <div class="sidebar-header-line"></div>
         <p class="sidebar-header-userInfo" id="stepGoalCard"></p>
         <p class="sidebar-header-userInfo" id="avStepGoalCard">
-          <p>
-            <div class="sidebar-header-line"></div>
-            <section class="sidebar-body-friendContainer">
-              <p class="sidebar-header-userInfo">Friends</p>
-              <section class="sidebar-friendContainer-listItems">
-                <ul class="card-vertical-list" id="friendList">
-                  <!-- friend list goes here -->
-                </ul>
-              </section>
-              <div class="sidebar-header-line"></div>
-              <p class="thisWeek">Keep up the good work! You were increasingly active on these dates:</p>
-              <ul class="card-vertical-list" id="streakListMinutes">
-                <!-- friend list goes here -->
-              </ul>
-            </section>
+        <p>
+        <div class="sidebar-header-line"></div>
+        <section class="sidebar-body-friendContainer">
+          <p class="sidebar-header-userInfo">Friends</p>
+          <section class="sidebar-friendContainer-listItems">
+            <ul class="card-vertical-list" id="friendList">
+              <!-- friend list goes here -->
+            </ul>
+          </section>
+          <div class="sidebar-header-line"></div>
+          <p class="thisWeek">Keep up the good work! You were increasingly active on these dates:</p>
+          <ul class="card-vertical-list" id="streakListMinutes">
+            <!-- friend list goes here -->
+          </ul>
+        </section>
       </section>
     </section>
     <section class="body-main-infoContainter">
       <section class="main-column-hydration">
         <section class="infoContainer-cardContainer-card-horizontal">
-          <div class="card-today-hydration">
-            <p id="hydrationToday"></p>
-          </div>
-          <div class="card-today-hydration">
-            <p id="hydrationAverage"></p>
+          <h1 class="titlehydro">Hydration</h1>
+          <div class="box">
+            <div class="percent">
+              <svg>
+                <circle cx="70" cy="70" r="70"></circle>
+                <circle id="chart-barhydro" cx="70" cy="70" r="70"></circle>
+              </svg>
+              <div class="numberhydro">
+                <h2 class="middle" id="chart-num">0<span>oz</span></h2>
+                <p class="texthydro" id="chart-text">Today</p>
+              </div>
+            </div>
+            <div class="data-radio">
+              <input type="radio" name="hydrationBtn" id="day-oz" value="small" checked="checked" />
+              <label id="day-oz-label" for="day-oz">Today</label>
+              <input type="radio" name="hydrationBtn" id="avg-oz" value="small" />
+              <label id="avg-oz-label" for="avg-oz">Average</label>
+            </div>
           </div>
         </section>
         <section class="infoContainer-cardContainer-card-vertical">
@@ -57,7 +75,7 @@ <h2 class="sidebar-header-name" id="sidebarName">Name Name</h2>
             <div class="sidebar-header-line"></div>
             <div id="chartDiv-numOunces" style="width: 100%; height: 400px;"></div>
           </div>
-          <div class="card-history-hydration">
+          <div class="card-history-hydration hidden">
             <p class="historicalWeek"></p>
             <div class="sidebar-header-line"></div>
             <ul class="card-vertical-list" id="hydrationEarlierWeek">
@@ -68,121 +86,147 @@ <h2 class="sidebar-header-name" id="sidebarName">Name Name</h2>
       </section>
       <section class="main-column-activity">
         <section class="infoContainer-cardContainer-card-horizontal">
-          <section class="horizontalCard-activity-container">
-            <div class="card-today-activity">
-              <p id="userStepsToday"></p>
-            </div>
-            <div class="card-today-activity">
-              <p id="avgStepsToday"></p>
-            </div>
-          </section>
-          <section class="horizontalCard-activity-container">
-            <div class="card-today-activity">
-              <p id="userStairsToday"></p>
-            </div>
-            <div class="card-today-activity">
-              <p id="avgStairsToday"></p>
-            </div>
-          </section>
-          <section class="horizontalCard-activity-container">
-            <div class="card-today-activity">
-              <p id="userMinutesToday"></p>
+          <h1 class="titleactivity">Activity</h1>
+          <div class="data-radio-activity" id="user-selector">
+            <input type="radio" name="dataBtn" id="personal-data" value="small" checked="checked" />
+            <label id="data-selector" for="personal-data">Personal</label>
+            <input type="radio" name="dataBtn" id="all-users" value="small" />
+            <label id="data-selector" for="all-users">All Users</label>
+          </div>
+          <div class="activity-charts">
+            <div class="box" id="personal-data-chart">
+              <div class="percent">
+                <svg>
+                  <circle cx="70" cy="70" r="70"></circle>
+                  <circle id="chart-baractivity" cx="70" cy="70" r="70"></circle>
+                </svg>
+                <div class="numberactivity">
+                  <h2 class="middle" id="activity-chart-num">0<span></span></h2>
+                  <p class="textactivity" id="activity-chart-text">Today</p>
+                </div>
+              </div>
             </div>
-            <div class="card-today-activity">
-              <p id="avgMinutesToday"></p>
+            <div class="box hidden" id="all-user-chart">
+              <div class="percent">
+                <svg>
+                  <circle cx="70" cy="70" r="70"></circle>
+                  <circle class="all-user-bar" id="chart-baractivity" cx="70" cy="70" r="70"></circle>
+                </svg>
+                <div class="numberactivity">
+                  <h2 class="middle all-user-num" id="activity-chart-num">0<span></span></h2>
+                  <p class="textactivity" id="activity-chart-text">Today</p>
+                </div>
+              </div>
             </div>
-          </section>
+          </div>
+          <h2>Activity Category</h2>
+          <div class="data-radio-activity" id="category">
+            <input type="radio" name="categoryBtn" id="category-steps" value="small" checked="checked" />
+            <label id="category-label-steps" for="category-steps">Steps</label>
+            <input type="radio" name="categoryBtn" id="category-miles" value="small" />
+            <label id="category-label-miles" for="category-miles">Miles</label>
+            <input type="radio" name="categoryBtn" id="category-stairs" value="small" />
+            <label id="category-label-stairs" for="category-stairs">Stairs</label>
+            <input type="radio" name="categoryBtn" id="category-active" value="small" />
+            <label id="category-label-active" for="category-active">Active Minutes</label>
+          </div>
         </section>
         <section class="infoContainer-cardContainer-card-horizontal">
           <section class="horizontalCard-activity-container">
-            <div class="card-history-activity">
-              <p class="thisWeek">Your steps this week</p>
-              <div class="sidebar-header-line"></div>
-              <div id="chartDiv-numSteps" style="width: 100%; height: 400px;"></div>
-            </div>
-            <div class="card-history-activity">
-              <p class="thisWeek">Your stair count this week</p>
+            <div class="card-history-activity" id="steps-graph">
+              <p class="activity-chart-header">Your steps this week</p>
               <div class="sidebar-header-line"></div>
-              <div id="chartDiv-flightsOfStairs" style="width: 100%; height: 400px;"></div>
-            </div>
-          </section>
-          <section class="horizontalCard-activity-container">
-            <div class="card-history-activity">
-              <p class="thisWeek">Your minutes of activity this week</p>
-              <div class="sidebar-header-line"></div>
-              <div id="chartDiv-minutesActive" style="width: 100%; height: 400px;"></div>
-            </div>
-            <div class="card-history-activity">
-              <p class="thisWeek">Winner's steps this week</p>
-              <div class="sidebar-header-line"></div>
-              <ul class="card-vertical-list" id="bestUserSteps">
-                <!-- Activity week list goes here -->
-              </ul>
+              <div class="activity-chart" id="chartDiv-numSteps"></div>
             </div>
           </section>
         </section>
       </section>
       <section class="main-column-sleep">
         <section class="infoContainer-cardContainer-card-horizontal">
-          <div class="card-today-sleep">
-            <p id="sleepToday"></p>
+          <h1 class="titlesleep">Sleep</h1>
+          <div class="data-radio-sleep" id="selector-sleep">
+            <input type="radio" name="dataBtnSleep" id="personal-sleep" value="small" checked="checked" />
+            <label id="data-selector-sleep" for="personal-sleep">Today</label>
+            <input type="radio" name="dataBtnSleep" id="all-sleep" value="small" />
+            <label id="data-selector-sleep" for="all-sleep">All Time</label>
           </div>
-          <div class="card-today-sleep">
-            <p id="sleepQualityToday"></p>
+          <div class="activity-charts">
+            <div class="box" id="personal-sleep-chart">
+              <div class="percent">
+                <svg>
+                  <circle cx="70" cy="70" r="70"></circle>
+                  <circle id="chart-barsleep" cx="70" cy="70" r="70"></circle>
+                </svg>
+                <div class="numbersleep">
+                  <h2 class="middle" id="sleep-chart-num">0<span></span></h2>
+                  <p class="textsleep" id="sleep-chart-text">Today</p>
+                </div>
+              </div>
+            </div>
+            <div class="box hidden" id="all-sleep-chart">
+              <div class="percent">
+                <svg>
+                  <circle cx="70" cy="70" r="70"></circle>
+                  <circle class="all-sleep-bar" id="chart-barsleep" cx="70" cy="70" r="70"></circle>
+                </svg>
+                <div class="numbersleep">
+                  <h2 class="middle all-sleep-num" id="all-chart-num">0<span></span></h2>
+                  <p class="textsleep" id="sleep-chart-text">On Average</p>
+                </div>
+              </div>
+            </div>
           </div>
-          <div class="card-today-sleep">
-            <p id="avUserSleepQuality"></p>
+          <div class="data-radio-sleep" id="sleep-type">
+            <input type="radio" name="typeBtn" id="type-hours" value="small" checked="checked" />
+            <label id="type-label-hours" for="type-hours">Hours Slept</label>
+            <input type="radio" name="typeBtn" id="type-quality" value="small" />
+            <label id="type-label-quality" for="type-quality">Sleep Quality</label>
           </div>
         </section>
-        <section class="infoContainer-cardContainer-card-vertical">
-          <div class="card-history-sleep">
-            <p class="thisWeek">Hours of sleep this week</p>
-            <div class="sidebar-header-line"></div>
-            <ul class="card-vertical-list" id="sleepThisWeek">
-              <!-- Sleep week list goes here -->
-            </ul>
-          </div>
-          <div class="card-history-sleep">
-            <p class="historicalWeek"></p>
-            <div class="sidebar-header-line"></div>
-            <ul class="card-vertical-list" id="sleepEarlierWeek">
-              <!-- Sleep week list goes here -->
-            </ul>
-          </div>
+        <section class="infoContainer-cardContainer-card-horizontal">
+          <section class="horizontalCard-sleep-container">
+            <div class="card-history-sleep" id="sleep-graph">
+              <p class="sleepChartHeader">Your sleep this week</p>
+              <div class="sidebar-header-line"></div>
+              <div class="sleep-chart" id="chartDiv-hoursSlept"></div>
+            </div>
+          </section>
         </section>
       </section>
     </section>
-    <section class="main-sidebar-body">
-      <section class="body-sidebar-sidebarContainer">
-        <h2 class="sidebar-header-name" id="sidebarName">FRIENDLY STEP CHALLENGE!</h2>
-        <div class="sidebar-header-line"></div>
-        <img src="./images/person walking on path.jpg" class="sidebar-header-userImage"></img>
-        <div class="sidebar-header-line"></div>
-        <p class="sidebar-header-userInfo" id="bigWinner"></p>
-        <div class="sidebar-header-line"></div>
-        <p class="sidebar-header-userInfo" id="stepGoalCard"></p>
-        <p class="sidebar-header-userInfo" id="avStepGoalCard">
-          <p>
-            <section class="sidebar-body-friendContainer">
-              <section class="sidebar-friendContainer-listItems">
-                <p class="thisWeek">Rank this week</p>
-                <ul class="card-vertical-list" id="friendChallengeListToday">
-                  <!-- friend list goes here -->
-                </ul>
-                <div class="sidebar-header-line"></div>
-                <p class="historicalWeek">- Historical Rank</p>
-                <ul class="card-vertical-list" id="friendChallengeListHistory">
-                  <!-- friend list goes here -->
-                </ul>
-                <div class="sidebar-header-line"></div>
-              </section>
-              <p class="thisWeek">You had 3 DAY STEP STREAKS on these days:</p>
-              <ul class="card-vertical-list" id="streakList">
-                <!-- friend list goes here -->
-              </ul>
-            </section>
+  </section>
+  <section class="main-sidebar-body hidden">
+    <section class="body-sidebar-sidebarContainer">
+      <h2 class="sidebar-header-name" id="sidebarName">FRIENDLY STEP CHALLENGE!</h2>
+      <div class="sidebar-header-line"></div>
+      <img src="./images/person walking on path.jpg" class="sidebar-header-userImage"></img>
+      <div class="sidebar-header-line"></div>
+      <p class="sidebar-header-userInfo" id="bigWinner"></p>
+      <div class="sidebar-header-line"></div>
+      <p class="sidebar-header-userInfo" id="stepGoalCard"></p>
+      <p class="sidebar-header-userInfo" id="avStepGoalCard">
+      <p>
+      <section class="sidebar-body-friendContainer">
+        <section class="sidebar-friendContainer-listItems">
+          <p class="thisWeek">Rank this week</p>
+          <ul class="card-vertical-list" id="friendChallengeListToday">
+            <!-- friend list goes here -->
+          </ul>
+          <div class="sidebar-header-line"></div>
+          <p class="historicalWeek">- Historical Rank</p>
+          <ul class="card-vertical-list" id="friendChallengeListHistory">
+            <!-- friend list goes here -->
+          </ul>
+          <div class="sidebar-header-line"></div>
+        </section>
+        <p class="thisWeek">You had 3 DAY STEP STREAKS on these days:</p>
+        <ul class="card-vertical-list" id="streakList">
+          <!-- friend list goes here -->
+        </ul>
       </section>
     </section>
   </section>
+  </section>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 67ee4f2..59fd945 100644
--- a/src/index.js
+++ b/src/index.js
@@ -12,4 +12,3 @@
 // An example of how you tell webpack to use an image (also need to link to it in the index.html)
 //import './images/turing-logo.png'
 
-console.log('This is the JavaScript entry file - your code begins here.');
diff --git a/src/scripts.js b/src/scripts.js
index d6707ab..8c43b44 100644
--- a/src/scripts.js
+++ b/src/scripts.js
@@ -14,22 +14,86 @@ import postAllUserData from './PostData';
 
 import * as JSC from 'jscharting';
 
-// var sidebarName = document.getElementById('sidebarName');
-// var headerText = document.getElementById('headerText');
-// var userAddress = document.getElementById('userAddress');
-// var userEmail = document.getElementById('userEmail');
-// var historicalWeek = document.querySelectorAll('.historicalWeek');
+var sidebarName = document.getElementById('sidebarName');
+var stepGoalCard = document.getElementById('stepGoalCard');
+var headerText = document.getElementById('headerText');
+var userAddress = document.getElementById('userAddress');
+var userEmail = document.getElementById('userEmail');
+var userStridelength = document.getElementById('userStridelength');
+var friendList = document.getElementById('friendList');
+var hydrationToday = document.getElementById('hydrationToday');
+var hydrationAverage = document.getElementById('hydrationAverage');
+var hydrationThisWeek = document.getElementById('hydrationThisWeek');
+var hydrationEarlierWeek = document.getElementById('hydrationEarlierWeek');
+var historicalWeek = document.querySelectorAll('.historicalWeek');
+var sleepToday = document.getElementById('sleepToday');
+var sleepQualityToday = document.getElementById('sleepQualityToday');
+var avUserSleepQuality = document.getElementById('avUserSleepQuality');
+var sleepThisWeek = document.getElementById('sleepThisWeek');
+var sleepEarlierWeek = document.getElementById('sleepEarlierWeek');
+var friendChallengeListToday = document.getElementById('friendChallengeListToday');
+var friendChallengeListHistory = document.getElementById('friendChallengeListHistory');
+var bigWinner = document.getElementById('bigWinner');
+var userStepsToday = document.getElementById('userStepsToday');
+var avgStepsToday = document.getElementById('avgStepsToday');
+var avgStepGoalCard = document.getElementById('avStepGoalCard')
+var userStairsToday = document.getElementById('userStairsToday');
+var avgStairsToday = document.getElementById('avgStairsToday');
+var userMinutesToday = document.getElementById('userMinutesToday');
+var avgMinutesToday = document.getElementById('avgMinutesToday');
+var userStepsThisWeek = document.getElementById('userStepsThisWeek');
+var userStairsThisWeek = document.getElementById('userStairsThisWeek');
+var userMinutesThisWeek = document.getElementById('userMinutesThisWeek');
+var bestUserSteps = document.getElementById('bestUserSteps');
+var streakList = document.getElementById('streakList');
+var streakListMinutes = document.getElementById('streakListMinutes');
+//HYDRATION CIRCLE CHART
+var hydrationChartText = document.getElementById('chart-text');
+var hydrationChartNum = document.getElementById('chart-num');
+var hydrationBar = document.getElementById('chart-barhydro');
+var hydrationDay = document.getElementById('day-oz');
+var hydrationAvg = document.getElementById('avg-oz');
+var radioBox = document.querySelector('.data-radio');
+radioBox.addEventListener('click', updateHydrationChart);
+//ACTIVITY CIRCLE CHART
+var dataSelectorRadio = document.getElementById('user-selector');
+var personalDataChart = document.getElementById('personal-data-chart');
+var allUserDataChart = document.getElementById('all-user-chart');
+var personalDataRadio = document.getElementById('personal-data');
+var allUserDataRadio = document.getElementById('all-users');
+var activityStepChartNum = document.getElementById('activity-chart-num');
+var activityStepBar = document.getElementById('chart-baractivity');
+var allUserChartNum = document.querySelector('.all-user-num');
+var allUserBar = document.querySelector('.all-user-bar');
+var activityCategoryRadio = document.getElementById('category');
+var stepsRadio = document.getElementById('category-steps');
+var milesRadio = document.getElementById('category-miles');
+var milesLabel = document.getElementById('category-label-miles');
+var stairsRadio = document.getElementById('category-stairs');
+var activeRadio = document.getElementById('category-active');
+
+var activityChart = document.querySelector('.activity-chart');
+var activityChartHeader = document.querySelector('.activity-chart-header');
+dataSelectorRadio.addEventListener('click', changeShownData)
+// SLEEP CIRCLE CHART
+var sleepChart = document.querySelector('.sleep-chart');
+var sleepChartHeader = document.querySelector('.sleepChartHeader')
+var sleepDataSelector = document.getElementById('selector-sleep');
+var personalSleepChart = document.getElementById('personal-sleep-chart');
+var personalSleepRadio = document.getElementById('personal-sleep');
+var allSleepRadio = document.getElementById('all-sleep');
+var sleepChartNum = document.getElementById('sleep-chart-num');
+var sleepChartBar = document.getElementById('chart-barsleep');
+var allSleepChart = document.getElementById('all-sleep-chart')
+var allSleepChartNum = document.querySelector('.all-sleep-num');
+var allSleepChartBar = document.querySelector('.all-sleep-bar');
+var sleepTypeRadio = document.getElementById('sleep-type');
+var hoursSleptRadio = document.getElementById('type-hours');
+var sleepQualityRadio = document.getElementById('type-quality');
+sleepDataSelector.addEventListener('click', changeShownType);
 
 
-//var friendChallengeListToday = document.getElementById('friendChallengeListToday');
-//var friendChallengeListHistory = document.getElementById('friendChallengeListHistory');
-//var bigWinner = document.getElementById('bigWinner');
 
-// var streakList = document.getElementById('streakList');
-// var streakListMinutes = document.getElementById('streakListMinutes');
-
-
-// NEW VARIABLE AND EVENT LISTENERS 
 
 let currentUser = null
 let today
@@ -55,14 +119,38 @@ function fetchCurrentData() {
   })
 }
 
-
-function returnLatestDate(allData) {
+  fetchData()
+    .then(allData => {
+      let currentUser = new User(allData.userData[Math.floor(Math.random() * allData.userData.length)]);
+      let userRepo = new UserRepo(allData.userData, currentUser);
+      let today = allData.activityData[allData.activityData.length - 1].date
+      // console.log(userRepo.getToday(currentUser.id))
+      let hydrationRepo = new Hydration(allData.hydrationData, currentUser);
+      // let today = makeToday(userRepo, currentUser.id, hydrationData);
+      // console.log(allData.activityData.length, allData.activityData)
+      displaySleepData(allData.sleepData, currentUser, today, userRepo);
+      displayHydrationData(allData.hydrationData, currentUser, today, userRepo);
+      displayActivityData(allData.activityData, currentUser, today, userRepo);
+    })
+
+  function returnLatestDate(allData) {
   let userActivityData = allData.activityData.filter(userData => {
     return currentUser.id === userData.userID
   })
   return userActivityData[userActivityData.length - 1].date
 }
 
+function displayHydrationData(hydrationData, user, today, userRepo) {
+    let hydrationObject = new Hydration(hydrationData, user, today, userRepo);
+    let averageHydration = hydrationObject.calculateAverageOunces();
+    let dayAmount = hydrationObject.calculateDailyOunces();
+    window.averageHydration = hydrationObject.calculateAverageOunces();
+    window.dailyHydration = dayAmount;
+    const weekHydrationRecord = hydrationObject.hydrationData.filter(drink => drink.userID === hydrationObject.user.id);
+    hydrationChartNum.innerHTML = `${dayAmount}<span>oz</span>`
+    hydrationBar.style.strokeDashoffset = `calc(440 - (440* ${dayAmount}) / 100)`
+    compileChart(hydrationObject, "numOunces")
+  }
 
 startApp();
 
@@ -74,56 +162,6 @@ function postData() {
   }
 }
 
-//   function displayHydrationData(hydrationData, user, today, userRepo) {
-//     var friendList = document.getElementById('friendList');
-//     var hydrationToday = document.getElementById('hydrationToday');
-//     var hydrationAverage = document.getElementById('hydrationAverage');
-//     var hydrationThisWeek = document.getElementById('hydrationThisWeek');
-//     var hydrationEarlierWeek = document.getElementById('hydrationEarlierWeek');
-
-//     let hydrationObject = new Hydration(hydrationData, user, today, userRepo);
-//     let averageHydration = hydrationObject.calculateAverageOunces();
-//     hydrationAverage.insertAdjacentHTML('afterBegin', `<p>Your average water intake is</p><p><span class="number">${averageHydration}</span></p> <p>oz per day.</p>`);
-//     hydrationToday.insertAdjacentHTML('afterBegin', `<p>You drank</p><p><span class="number">${hydrationObject.calculateDailyOunces()}</span></p><p>oz water today.</p>`); //userRepo.getToday()
-//     const weekHydrationRecord = hydrationObject.hydrationData.filter(drink => drink.userID === hydrationObject.user.id);
-//     // hydrationThisWeek.insertAdjacentHTML('afterBegin', makeHydrationHTML(hydrationObject.user.id, hydrationObject, hydrationObject.user, hydrationObject.calculateFirstWeekOunces()));
-//     // hydrationEarlierWeek.insertAdjacentHTML('afterBegin', makeHydrationHTML(hydrationObject.user.id, hydrationObject, hydrationObject.user, hydrationObject.calculateRandomWeekOunces()));
-//     compileChart(hydrationObject, "numOunces")
-//   }
-
-//   function makeHydrationHTML(id, hydrationInfo, userStorage, drinks) {
-//     return drinks.map(drinkData => `<li class="historical-list-listItem">On ${drinkData}oz</li>`).join(''); // needs dates?
-//   }
-
-//   function displaySleepData(sleepData, user, today, userRepo) {
-//     var sleepToday = document.getElementById('sleepToday');
-//     var sleepQualityToday = document.getElementById('sleepQualityToday');
-//     var avUserSleepQuality = document.getElementById('avUserSleepQuality');
-//     var sleepThisWeek = document.getElementById('sleepThisWeek');
-//     var sleepEarlierWeek = document.getElementById('sleepEarlierWeek');
-//     let sleepObject = new Sleep(sleepData, user, today, userRepo);
-//     let averageSleep = sleepObject.calculateAverageSleep();
-//     let sleepQuality = sleepObject.calculateAverageSleepQuality();
-//     let weekSleep = sleepObject.calculateWeekSleep();
-//     let averageWeekSleep = sleepObject.calculateWeekSleepQuality();
-//     let allUsersSleepQuality = sleepObject.calculateAllUserSleepQuality();
-
-//     sleepToday.insertAdjacentHTML("afterBegin", `<p>You slept</p> <p><span class="number">${sleepObject.calculateDailySleep(today)}</span></p> <p>hours today.</p>`);
-//     sleepQualityToday.insertAdjacentHTML("afterBegin", `<p>Your sleep quality was</p> <p><span class="number">${sleepObject.calculateDailySleepQuality()}</span></p><p>out of 5.</p>`);
-//     avUserSleepQuality.insertAdjacentHTML("afterBegin", `<p>The average user's sleep quality is</p> <p><span class="number">${Math.round(sleepObject.calculateAllUserSleepQuality() *100)/100}</span></p><p>out of 5.</p>`);
-//     //console.log(sleepObject.calculateAllUserSleepQuality())
-//   }
-
-//   function makeGraphPoints(dates) {
-//     //INPUT: Array w/objects Date/value pairs
-//     //OUTPUT: Array w/ objects of x: date and y:value
-//     const points = dates.map(date => {
-//       return Object.keys(date)[0];
-//     });
-//     return points.map((dateKey, index) => {
-//       return { x: dateKey, y: dates[index][dateKey] }
-//     });
-
 function postNewData() {
   let userSleepData = {
     "userID" : currentUser.id, 
@@ -165,25 +203,11 @@ function makeGraphPoints(dates) {
   })
 };
 
-function compileHydrationChart(hydrationObject) {
-  // console.log(hydrationObject.calculateFirstWeekOunces())
-  let hydrationChart = new JSC.Chart("chartDiv-hydration", {
-    type: 'spline',
-    legend_visible: false,
-    axisTick_gridline: {visible: false},
-    box_fill: '#5bc8ac',
-    series: [
-      {
-        points: hydrationObject.calculateFirstWeekOunces()
-      },
-    ]
-  });
-}
-
 function makeHydrationHTML(id, hydrationInfo, userStorage, drinks) {
   return drinks.map(drinkData => `<li class="historical-list-listItem">On ${drinkData}oz</li>`).join(''); // needs dates?
 }
 
+
   function displaySleepData(sleepData, user, today, userRepo) {
     var sleepToday = document.getElementById('sleepToday');
     var sleepQualityToday = document.getElementById('sleepQualityToday');
@@ -191,88 +215,78 @@ function makeHydrationHTML(id, hydrationInfo, userStorage, drinks) {
     var sleepThisWeek = document.getElementById('sleepThisWeek');
     var sleepEarlierWeek = document.getElementById('sleepEarlierWeek');
     let sleepObject = new Sleep(sleepData, user, today, userRepo);
+    let daySleep = sleepObject.calculateDailySleep();
+    console.log(daySleep)
+    let dayQuality = sleepObject.calculateDailySleepQuality();
+    window.sleepDay = { hours: daySleep, quality: dayQuality};
+    console.log(sleepDay)
     let averageSleep = sleepObject.calculateAverageSleep();
     let sleepQuality = sleepObject.calculateAverageSleepQuality();
-    let weekSleep = sleepObject.calculateWeekSleep();
-    let averageWeekSleep = sleepObject.calculateWeekSleepQuality();
+    window.sleepAvg = { hours: averageSleep, quality: sleepQuality };
     let allUsersSleepQuality = sleepObject.calculateAllUserSleepQuality();
+    sleepChartHeader.innerText = 'Your hours slept this week';
+    sleepChartNum.innerHTML = `${sleepDay.hours}<span>hr</span>`
+    sleepChartBar.style.strokeDashoffset = `calc(440 - (40 * ${sleepDay.hours}) / 12)`
+    allSleepChartNum.innerHTML = `${sleepAvg.hours}<span></span>`
+    allSleepChartBar.style.strokeDashoffset = `calc(440 - (40 * ${sleepAvg.hours}) / 12)`
+    compileChart(sleepObject, 'hoursSlept');
+    sleepTypeRadio.addEventListener('click', function () {
+      updateSleepChart(sleepObject);
+    });
+  }  
 
-    sleepToday.insertAdjacentHTML("afterBegin", `<p>You slept</p> <p><span class="number">${sleepObject.calculateDailySleep(today)}</span></p> <p>hours today.</p>`);
-    sleepQualityToday.insertAdjacentHTML("afterBegin", `<p>Your sleep quality was</p> <p><span class="number">${sleepObject.calculateDailySleepQuality()}</span></p><p>out of 5.</p>`);
-    avUserSleepQuality.insertAdjacentHTML("afterBegin", `<p>The average user's sleep quality is</p> <p><span class="number">${Math.round(sleepObject.calculateAllUserSleepQuality() *100)/100}</span></p><p>out of 5.</p>`);
-    //console.log(sleepObject.calculateAllUserSleepQuality())
-  }
-  
-  function displayHydrationData(hydrationData, user, today, userRepo) {
-    var friendList = document.getElementById('friendList');
-    var hydrationToday = document.getElementById('hydrationToday');
-    var hydrationAverage = document.getElementById('hydrationAverage');
-    var hydrationThisWeek = document.getElementById('hydrationThisWeek');
-    var hydrationEarlierWeek = document.getElementById('hydrationEarlierWeek');
-
-    let hydrationObject = new Hydration(hydrationData, user, today, userRepo);
-    let averageHydration = hydrationObject.calculateAverageOunces();
-    hydrationAverage.insertAdjacentHTML('afterBegin', `<p>Your average water intake is</p><p><span class="number">${averageHydration}</span></p> <p>oz per day.</p>`);
-    hydrationToday.insertAdjacentHTML('afterBegin', `<p>You drank</p><p><span class="number">${hydrationObject.calculateDailyOunces()}</span></p><p>oz water today.</p>`); //userRepo.getToday()
-    const weekHydrationRecord = hydrationObject.hydrationData.filter(drink => drink.userID === hydrationObject.user.id);
-    // hydrationThisWeek.insertAdjacentHTML('afterBegin', makeHydrationHTML(hydrationObject.user.id, hydrationObject, hydrationObject.user, hydrationObject.calculateFirstWeekOunces()));
-    // hydrationEarlierWeek.insertAdjacentHTML('afterBegin', makeHydrationHTML(hydrationObject.user.id, hydrationObject, hydrationObject.user, hydrationObject.calculateRandomWeekOunces()));
-    compileChart(hydrationObject, "numOunces")
-  }
-  
-function displayActivityData(activityData, currentUser, today, userRepo) {
-    var stepGoalCard = document.getElementById('stepGoalCard');
-    var userStridelength = document.getElementById('userStridelength');
-    var avgStepGoalCard = document.getElementById('avStepGoalCard')
-    var userMinutesThisWeek = document.getElementById('userMinutesThisWeek');
-    var bestUserSteps = document.getElementById('bestUserSteps');
-    var userStairsThisWeek = document.getElementById('userStairsThisWeek');
-
+  function displayActivityData(activityData, currentUser, today, userRepo) {
     let activityRepo = new Activity(activityData, today, currentUser, userRepo);
-
-    var userStepsToday = document.getElementById('userStepsToday');
-    display(userStepsToday, 'Step Count', activityRepo.returnUserStepsByDate().numSteps)
-    var userMinutesToday = document.getElementById('userMinutesToday');
+    let personalAmount = activityRepo.returnUserStepsByDate().numSteps;
+    let personalMiles = activityRepo.getMilesFromStepsByDate();
+    let personalStairs = activityRepo.getStairRecord();
+    let personalActive = activityRepo.getActiveMinutesByDate();
+    window.personalData = { steps: personalAmount, miles: personalMiles, stairCount: personalStairs, minsActive: personalActive };
+    console.log(personalData)
+    let allAmount = activityRepo.getAllUserAverageForDay('numSteps');
+    let allStairs = activityRepo.getAllUserAverageForDay('flightsOfStairs');
+    let allActive = activityRepo.getAllUserAverageForDay('minutesActive');
+    window.allUserData = { steps: allAmount, stairCount: allStairs, minsActive: allActive };
+
+   
     display(userMinutesToday, 'Active Minutes', activityRepo.getActiveMinutesByDate())
 
     const userStairs = activityRepo.userDataForToday('flightsOfStairs')
-    var userStairsToday = document.getElementById('userStairsToday');
-    userStairsToday.insertAdjacentHTML("afterBegin", `<p>Stair Count:</p><p>You</><p><span class="number">${userStairs}</span></p>`)
-    // need users flights of stairs --??We have flights in activity data
     activityRepo.getMilesFromStepsByDate()
     // need to create dom element
     activityRepo.getStairRecord()
     //  - all time stair record need to create dom element
     var avgStairsToday = document.getElementById('avgStairsToday');
     const averageStairs = activityRepo.getAllUserAverageForDay('flightsOfStairs')
-    avgStairsToday.insertAdjacentHTML("afterBegin", `<p>Stair Count: </p><p>All Users</p><p><span class="number">${averageStairs}</span></p>`)
+    // avgStairsToday.insertAdjacentHTML("afterBegin", `<p>Stair Count: </p><p>All Users</p><p><span class="number">${averageStairs}</span></p>`)
     // this returns the average # of stairs for today for all users
     var avgMinutesToday = document.getElementById('avgMinutesToday');
     const averageMinutes = activityRepo.getAllUserAverageForDay('minutesActive')
-    avgMinutesToday.insertAdjacentHTML("afterBegin", `<p>Active Minutes:</p><p>All Users</p><p><span class="number">${averageMinutes}</span></p>`)
+    // avgMinutesToday.insertAdjacentHTML("afterBegin", `<p>Active Minutes:</p><p>All Users</p><p><span class="number">${averageMinutes}</span></p>`)
     // average minutes active for all users today
     var avgStepsToday = document.getElementById('avgStepsToday');
     const averageSteps = activityRepo.getAllUserAverageForDay('numSteps')
-    avgStepsToday.insertAdjacentHTML("afterBegin", `<p>Step Count:</p><p>All Users</p><p><span class="number">${averageSteps}</span></p>`)
+    // avgStepsToday.insertAdjacentHTML("afterBegin", `<p>Step Count:</p><p>All Users</p><p><span class="number">${averageSteps}</span></p>`)
     // average number of steps for everyone today
     //weekly views:
+    activityStepChartNum.innerHTML = `${personalAmount}<span></span>`
+    activityStepBar.style.strokeDashoffset = `calc(440 - (40 * ${personalAmount}) / 1500)`
+    allUserChartNum.innerHTML = `${allAmount}<span></span>`
+    allUserBar.style.strokeDashoffset = `calc(440 - (40 * ${allAmount}) / 1500)`
     var userStepsThisWeek = document.getElementById('userStepsThisWeek');
     const weeklySteps = activityRepo.userDataForWeek("numSteps");
     compileChart(activityRepo, "numSteps")
-    compileChart(activityRepo, "flightsOfStairs")
-    compileChart(activityRepo, "minutesActive")
-    // userStepsThisWeek.insertAdjacentHTML("afterBegin", makeStepsHTML(activityRepo.userDataForWeek("numSteps")));
-    //console.log(activityRepo.userDataForWeek("minutesActive"));
-    //console.log(activityRepo.userDataForWeek("flightsOfStairs"));
-
+    activityCategoryRadio.addEventListener('click', function () {
+      updateCategory(activityRepo);
+    });
   }
   
  function compileChart(healthCategory, propertyName) {
     let chart = new JSC.Chart(`chartDiv-${propertyName}`, {
       type: 'spline',
       legend_visible: false,
-      axisTick_gridline: {visible: false},
-      box_fill: '#ee6',
+      axisTick_gridline: { visible: false },
+      box_fill: '#ffffff00',
       series: [
         {
           points: makeGraphPoints(healthCategory.userDataForWeek(propertyName))
@@ -281,176 +295,104 @@ function displayActivityData(activityData, currentUser, today, userRepo) {
     });
   }
 
-//function displayActivityData(activityData, currentUser, today, userRepo) {
-  //let activityRepo = new Activity(activityData, today, currentUser, userRepo);
-  //display(userStepsToday, 'Step Count', activityRepo.returnUserStepsByDate().numSteps)
-  //display(userMinutesToday, 'Active Minutes', activityRepo.getActiveMinutesByDate())
- // const userStairs = activityRepo.userDataForToday('flightsOfStairs')
-  //userStairsToday.insertAdjacentHTML("afterBegin", `<p>Stair Count:</p><p>You</><p><span class="number">${userStairs}</span></p>`)
-  // need users flights of stairs
- // activityRepo.getMilesFromStepsByDate()
-  // need to create dom element
- // activityRepo.getStairRecord()
-  //  - all time stair record need to create dom element
- // const averageStairs = activityRepo.getAllUserAverageForDay('flightsOfStairs')
- // avgStairsToday.insertAdjacentHTML("afterBegin", `<p>Stair Count: </p><p>All Users</p><p><span class="number">${averageStairs}</span></p>`)
-  // this returns the average # of stairs for today for all users
- // const averageMinutes = activityRepo.getAllUserAverageForDay('minutesActive')
- // avgMinutesToday.insertAdjacentHTML("afterBegin", `<p>Active Minutes:</p><p>All Users</p><p><span class="number">${averageMinutes}</span></p>`)
-  // average minutes active for all users today
- // const averageSteps = activityRepo.getAllUserAverageForDay('numSteps')
- // avgStepsToday.insertAdjacentHTML("afterBegin", `<p>Step Count:</p><p>All Users</p><p><span class="number">${averageSteps}</span></p>`)
-  // average number of steps for everyone today
-  //weekly views:
-  //const weeklySteps = activityRepo.userDataForWeek("numSteps");
-  // userStepsThisWeek.insertAdjacentHTML("afterBegin", makeStepsHTML(activityRepo.userDataForWeek("numSteps")));
-  //console.log(activityRepo.userDataForWeek("minutesActive"));
-  //console.log(activityRepo.userDataForWeek("flightsOfStairs"));
-//}
-
-function display(element, description, method) {
-  element.insertAdjacentHTML("afterBegin", `<p>${description}:</p><p>You</p><p><span class="number">${method}</span></p>`)
-}
-
-function displayAverageSteps(activityRepo) {
-  let averageSteps = activityRepo.returnUserStepsByDate();
-  userStepsToday.insertAdjacentHTML("afterBegin", `<p>Step Count:</p><p>You</p><p><span class="number">${averageSteps.numSteps}</span></p>`)
-}
-
-function displayActiveMinutes(activityRepo) {
-  let activeMinutes = activityRepo.getActiveMinutesByDate();
-  userMinutesToday.insertAdjacentHTML("afterBegin", `<p>Active Minutes:</p><p>You</p><p><span class="number">${activeMinutes}</span></p>`)
-}
+  function updateCategory(activityRepo) {
+    if (stepsRadio.checked === true) {
+      activityChart.id = 'chartDiv-numSteps';
+      compileChart(activityRepo, 'numSteps');
+      activityChartHeader.innerText = 'Your steps this week';
+      activityStepChartNum.innerHTML = `${personalData.steps}<span></span>`
+      activityStepBar.style.strokeDashoffset = `calc(440 - (40 * ${personalData.steps}) / 1500)`
+      allUserChartNum.innerHTML = `${allUserData.steps}<span></span>`
+      allUserBar.style.strokeDashoffset = `calc(440 - (40 * ${allUserData.steps}) / 1500)`
+    } else if (milesRadio.checked === true) {
+      activityChart.id = 'chartDiv-numSteps';
+      compileChart(activityRepo, 'numSteps');
+      activityChartHeader.innerText = 'Your steps this week'
+      activityStepChartNum.innerHTML = `${personalData.miles}<span>mi</span>`
+      activityStepBar.style.strokeDashoffset = `calc(440 - (440 * ${personalData.miles}) / 25)`
+    } else if (stairsRadio.checked === true) {
+      activityChart.id = 'chartDiv-flightsOfStairs';
+      compileChart(activityRepo, 'flightsOfStairs');
+      activityChartHeader.innerText = 'Your stairs this week';
+      activityStepChartNum.innerHTML = `${personalData.stairCount}<span>stairs</span>`
+      activityStepBar.style.strokeDashoffset = `calc(440 - (440 * ${personalData.stairCount}) / 100)`
+      allUserChartNum.innerHTML = `${allUserData.stairCount}<span>stairs</span>`
+      allUserBar.style.strokeDashoffset = `calc(440 - (440 * ${allUserData.stairCount}) / 100)`
+    } else if (activeRadio.checked === true) {
+      activityChart.id = 'chartDiv-minutesActive';
+      compileChart(activityRepo, 'minutesActive');
+      activityChartHeader.innerText = 'Your active minutes this week';
+      activityStepChartNum.innerHTML = `${personalData.minsActive}<span>mins</span>`
+      activityStepBar.style.strokeDashoffset = `calc(440 - (440 * ${personalData.minsActive}) / 250)`
+      allUserChartNum.innerHTML = `${allUserData.minsActive}<span>mins</span>`
+      allUserBar.style.strokeDashoffset = `calc(440 - (440 * ${allUserData.minsActive}) / 250)`
+    }
+  }
 
+  function updateSleepChart(sleepObject) {
+    if (hoursSleptRadio.checked === true) {
+      sleepChart.id = 'chartDiv-hoursSlept';
+      compileChart(sleepObject, 'hoursSlept');
+      sleepChartHeader.innerText = 'Your hours slept this week';
+      sleepChartNum.innerHTML = `${sleepDay.hours}<span>hr</span>`
+      sleepChartBar.style.strokeDashoffset = `calc(440 - (40 * ${sleepDay.hours}) / 12)`
+      allSleepChartNum.innerHTML = `${sleepAvg.hours}<span>hr</span>`
+      allSleepChartBar.style.strokeDashoffset = `calc(440 - (40 * ${sleepAvg.hours}) / 12)`
+    } else if (sleepQualityRadio.checked === true) {
+      sleepChart.id = 'chartDiv-sleepQuality';
+      compileChart(sleepObject, 'sleepQuality');
+      sleepChartHeader.innerText = 'Your sleep quality this week'
+      sleepChartNum.innerHTML = `${sleepDay.quality}<span>/5</span>`
+      sleepChartBar.style.strokeDashoffset = `calc(440 - (40 * ${sleepDay.quality}) / 5)`
+      allSleepChartNum.innerHTML = `${sleepAvg.quality}<span>/5</span>`
+      allSleepChartBar.style.strokeDashoffset = `calc(440 - (440 * ${sleepAvg.quality}) / 5)`
+    }
+  }
 
+  function displayAverageSteps(activityRepo) {
+    let averageSteps = activityRepo.returnUserStepsByDate();
+    userStepsToday.insertAdjacentHTML("afterBegin", `<p>Step Count:</p><p>You</p><p><span class="number">${averageSteps.numSteps}</span></p>`)
+  }
 
+  function displayActiveMinutes(activityRepo) {
+    let activeMinutes = activityRepo.getActiveMinutesByDate();
+    userMinutesToday.insertAdjacentHTML("afterBegin", `<p>Active Minutes:</p><p>You</p><p><span class="number">${activeMinutes}</span></p>`)
+  }
+}
 
+function updateHydrationChart() {
+  if (hydrationDay.checked === true) {
+    hydrationChartNum.innerHTML = `${dailyHydration}<span>oz</span>`
+    hydrationBar.style.strokeDashoffset = `calc(440 - (440* ${dailyHydration}) / 100)`
+    hydrationChartText.innerText = 'Today'
+  } else if (hydrationAvg.checked === true) {
+    hydrationChartNum.innerHTML = `${averageHydration}<span>oz</span>`
+    hydrationBar.style.strokeDashoffset = `calc(440 - (440* ${averageHydration}) / 100)`
+    hydrationChartText.innerText = 'On Average'
+  }
+}
 
-//OLD FUNCTIONS FOR DISPLAY//
+function changeShownData() {
+  if (personalDataRadio.checked === true) {
+    personalDataChart.classList.remove('hidden');
+    allUserDataChart.classList.add('hidden');
+    milesLabel.style.display = 'inline-block';
+  } else if (allUserDataRadio.checked === true) {
+    allUserDataChart.classList.remove('hidden');
+    personalDataChart.classList.add('hidden');
+    milesLabel.style.display = 'none';
+  }
+}
 
+function changeShownType() {
+  if (personalSleepRadio.checked === true) {
+    personalSleepChart.classList.remove('hidden');
+    allSleepChart.classList.add('hidden');
+  } else if (allSleepRadio.checked === true) {
+    allSleepChart.classList.remove('hidden');
+    personalSleepChart.classList.add('hidden');
+  }
+}
 
-  // function displayDistanceWalked()
-
-  // let randomHistory = makeRandomDate(userRepo, userNowId, hydrationData);
-  // historicalWeek.forEach(instance => instance.insertAdjacentHTML('afterBegin', `Week of ${randomHistory}`));
-  // addInfoToSidebar(userNow, userRepo);
+startApp();
 
-  //addHydrationInfo(userNowId, hydrationRepo, today, userRepo, randomHistory);
-  // addSleepInfo(userNowId, sleepRepo, today, userRepo, randomHistory);
-  // let winnerNow = makeWinnerID(activityRepo, userNow, today, userRepo);
-  // addActivityInfo(userNowId, activityRepo, today, userRepo, randomHistory, userNow, winnerNow);
-  // addFriendGameInfo(userNowId, activityRepo, userRepo, today, randomHistory, userNow);
-
-
-// function makeUsers(array) {
-//   userData.forEach(function(dataItem) {
-//     let user = new User(dataItem);
-//     array.push(user);
-//   })
-// }
-
-// function pickUser() {
-//   return Math.floor(Math.random() * 50);
-// }
-
-// function getUserById(id, listRepo) {
-//   return listRepo.getDataFromID(id);
-// }
-
-// function addInfoToSidebar(user, userRepo) {
-//   sidebarName.innerText = user.name;
-//   headerText.innerText = `${user.getFirstName()}'s Activity Tracker`;
-//   stepGoalCard.innerText = `Your daily step goal is ${user.dailyStepGoal}.`
-//   avgStepGoalCard.innerText = `The average daily step goal is ${userRepo.calculateAverageStepGoal()}`;
-//   userAddress.innerText = user.address;
-//   userEmail.innerText = user.email;
-//   userStridelength.innerText = `Your stridelength is ${user.strideLength} meters.`;
-//   friendList.insertAdjacentHTML('afterBegin', makeFriendHTML(user, userRepo))
-// }
-// need to refactor and call in our .then callback passing in current info
-
-// function makeFriendHTML(user, userRepo) {
-//   return user.getFriendsNames(userRepo).map(friendName => `<li class='historical-list-listItem'>${friendName}</li>`).join('');
-// }
-
-// function makeWinnerID(activityInfo, user, dateString, userStorage){
-//   return activityInfo.getWinnerId(user, dateString, userStorage)
-// }
-
-// function makeToday(userStorage, id, dataSet) {
-//   //console.log(userStorage, id, dataSet)
-//   var sortedArray = userStorage.makeSortedUserArray(id, dataSet);
-//   return sortedArray[0].date;
-// }
-
-// function makeRandomDate(userStorage, id, dataSet) {
-//   var sortedArray = userStorage.makeSortedUserArray(id, dataSet);
-//   return sortedArray[Math.floor(Math.random() * sortedArray.length + 1)].date
-
-// }
-
-// function addHydrationInfo(id, hydrationInfo, dateString, userStorage, laterDateString) {
-  //hydrationToday.insertAdjacentHTML('afterBegin', `<p>You drank</p><p><span class="number">${hydrationInfo.calculateDailyOunces(id, dateString)}</span></p><p>oz water today.</p>`);
-  //hydrationAverage.insertAdjacentHTML('afterBegin', `<p>Your average water intake is</p><p><span class="number">${hydrationInfo.calculateAverageOunces(id)}</span></p> <p>oz per day.</p>`)
-  //hydrationAverage.insertAdjacentHTML('afterBegin', `<p>Your average water intake is</p><p><span class="number">${hydrationInfo.calculateAverageOunces(id)}</span></p> <p>oz per day.</p>`)
-  //hydrationThisWeek.insertAdjacentHTML('afterBegin', makeHydrationHTML(id, hydrationInfo, userStorage, hydrationInfo.calculateFirstWeekOunces(userStorage, id)));
-  // hydrationEarlierWeek.insertAdjacentHTML('afterBegin', makeHydrationHTML(id, hydrationInfo, userStorage, hydrationInfo.calculateRandomWeekOunces(laterDateString, id, userStorage)));
-// }
-
-
-// function addSleepInfo(id, sleepInfo, dateString, userStorage, laterDateString) {
-//   // sleepThisWeek.insertAdjacentHTML('afterBegin', makeSleepHTML(id, sleepInfo, userStorage, sleepInfo.calculateWeekSleep(dateString, id, userStorage)));
-//   // sleepEarlierWeek.insertAdjacentHTML('afterBegin', makeSleepHTML(id, sleepInfo, userStorage, sleepInfo.calculateWeekSleep(laterDateString, id, userStorage)));
-// }
-
-// function makeSleepHTML(id, sleepInfo, userStorage, method) {
-//   return method.map(sleepData => `<li class="historical-list-listItem">On ${sleepData} hours</li>`).join('');
-// }
-
-// function makeSleepQualityHTML(id, sleepInfo, userStorage, method) {
-//   return method.map(sleepQualityData => `<li class="historical-list-listItem">On ${sleepQualityData}/5 quality of sleep</li>`).join('');
-// }
-
-// function addActivityInfo(id, activityInfo, dateString, userStorage, laterDateString, user, winnerId) {
-  // userStairsToday.insertAdjacentHTML("afterBegin", `<p>Stair Count:</p><p>You</><p><span class="number">${activityInfo.userDataForToday(id, dateString, userStorage, 'flightsOfStairs')}</span></p>`)
-  // avgStairsToday.insertAdjacentHTML("afterBegin", `<p>Stair Count: </p><p>All Users</p><p><span class="number">${activityInfo.getAllUserAverageForDay(dateString, userStorage, 'flightsOfStairs')}</span></p>`)
-  // userStepsToday.insertAdjacentHTML("afterBegin", `<p>Step Count:</p><p>You</p><p><span class="number">${activityInfo.userDataForToday(id, dateString, userStorage, 'numSteps')}</span></p>`)
-  // avgStepsToday.insertAdjacentHTML("afterBegin", `<p>Step Count:</p><p>All Users</p><p><span class="number">${activityInfo.getAllUserAverageForDay(dateString, userStorage, 'numSteps')}</span></p>`)
-  // userMinutesToday.insertAdjacentHTML("afterBegin", `<p>Active Minutes:</p><p>You</p><p><span class="number">${activityInfo.userDataForToday(id, dateString, userStorage, 'minutesActive')}</span></p>`)
-  // avgMinutesToday.insertAdjacentHTML("afterBegin", `<p>Active Minutes:</p><p>All Users</p><p><span class="number">${activityInfo.getAllUserAverageForDay(dateString, userStorage, 'minutesActive')}</span></p>`)
-  // userStepsThisWeek.insertAdjacentHTML("afterBegin", makeStepsHTML(id, activityInfo, userStorage, activityInfo.userDataForWeek(id, dateString, userStorage, "numSteps")));
-  // userStairsThisWeek.insertAdjacentHTML("afterBegin", makeStairsHTML(id, activityInfo, userStorage, activityInfo.userDataForWeek(id, dateString, userStorage, "flightsOfStairs")));
-  // userMinutesThisWeek.insertAdjacentHTML("afterBegin", makeMinutesHTML(id, activityInfo, userStorage, activityInfo.userDataForWeek(id, dateString, userStorage, "minutesActive")));
-  /////bestUserSteps.insertAdjacentHTML("afterBegin", makeStepsHTML(user, activityInfo, userStorage, activityInfo.userDataForWeek(winnerId, dateString, userStorage, "numSteps")));
-// }
-
-// function makeStepsHTML(id, activityInfo, userStorage, method) {
-//   return method.map(activityData => `<li class="historical-list-listItem">On ${activityData} steps</li>`).join('');
-// }
-// function makeStepsHTML(method) {
-//   return method.map(activityData => `<li class="historical-list-listItem">On ${activityData} steps</li>`).join('');
-// }
-
-// function makeStairsHTML(id, activityInfo, userStorage, method) {
-//   return method.map(data => `<li class="historical-list-listItem">On ${data} flights</li>`).join('');
-// }
-
-// function makeMinutesHTML(id, activityInfo, userStorage, method) {
-//   return method.map(data => `<li class="historical-list-listItem">On ${data} minutes</li>`).join('');
-// }
-
-// function addFriendGameInfo(id, activityInfo, userStorage, dateString, laterDateString, user) {
-//   friendChallengeListToday.insertAdjacentHTML("afterBegin", makeFriendChallengeHTML(id, activityInfo, userStorage, activityInfo.showChallengeListAndWinner(user, dateString, userStorage)));
-//   streakList.insertAdjacentHTML("afterBegin", makeStepStreakHTML(id, activityInfo, userStorage, activityInfo.getStreak(userStorage, id, 'numSteps')));
-//   streakListMinutes.insertAdjacentHTML("afterBegin", makeStepStreakHTML(id, activityInfo, userStorage, activityInfo.getStreak(userStorage, id, 'minutesActive')));
-//   friendChallengeListHistory.insertAdjacentHTML("afterBegin", makeFriendChallengeHTML(id, activityInfo, userStorage, activityInfo.showChallengeListAndWinner(user, dateString, userStorage)));
-//   bigWinner.insertAdjacentHTML('afterBegin', `THIS WEEK'S WINNER! ${activityInfo.showcaseWinner(user, dateString, userStorage)} steps`)
-// }
-
-// function makeFriendChallengeHTML(id, activityInfo, userStorage, method) {
-//   return method.map(friendChallengeData => `<li class="historical-list-listItem">Your friend ${friendChallengeData} average steps.</li>`).join('');
-// }
-
-// function makeStepStreakHTML(id, activityInfo, userStorage, method) {
-//   return method.map(streakData => `<li class="historical-list-listItem">${streakData}!</li>`).join('');
-// }