From 6a806d36f6c0557f69450ab52c2cb08fcc9e35e6 Mon Sep 17 00:00:00 2001
From: tahmid-saj <tahmid.saj@gmail.com>
Date: Fri, 21 Jun 2024 17:54:26 -0400
Subject: [PATCH] updating dashboard signed in styling

---
 .../hidden-drawer/hidden-drawer.component.jsx |   4 +-
 .../calories-burned-graph-pie.component.jsx   |  26 ++-
 .../calories-burned-graph-pie.styles.jsx      |   9 +
 .../calories-burned-graph.component.jsx       |  23 +-
 .../calories-burned-graph.styles.jsx          |   9 +
 .../calories-burned-summary.component.jsx     |  37 +++-
 .../calories-burned-summary.styles.jsx        |   8 +
 .../schedule-calendar.styles.scss             |   1 -
 .../schedule-day-info.component.jsx           |   4 +-
 .../schedule-calendar.component.jsx           |  38 ----
 .../schedule-calendar.styles.scss             |   2 -
 .../schedule-day-info.component.jsx           |   6 +-
 .../schedule-day-info.styles.scss             |   2 +-
 ...ition-tracker-graph-calories.component.jsx |  21 +-
 ...utrition-tracker-graph-calories.styles.jsx |   9 +
 ...tracker-graph-macronutrients.component.jsx |  21 +-
 ...on-tracker-graph-macronutrients.styles.jsx |   9 +
 .../nutrition-tracker-graph-pie.component.jsx |  22 +-
 .../nutrition-tracker-graph-pie.styles.jsx    |   5 +
 .../nutrition-tracker-summary.component.jsx   |  48 +++-
 .../nutrition-tracker-summary.styles.jsx      |  15 ++
 .../schedule-calendar.component.jsx           |   2 +-
 .../schedule-calendar.styles.scss             |   1 -
 .../schedule-day-info.component.jsx           |  11 +-
 .../schedule-day-info.component.jsx           |   3 +-
 .../dashboard/dashboard.component.jsx         | 206 ++++++++++++++----
 .../signed-in/dashboard/dashboard.styles.jsx  |   6 +
 27 files changed, 392 insertions(+), 156 deletions(-)
 create mode 100644 src/components/signed-in/dashboard/calories-burned/calories-burned-graph/calories-burned-graph-pie.styles.jsx
 create mode 100644 src/components/signed-in/dashboard/calories-burned/calories-burned-graph/calories-burned-graph.styles.jsx
 create mode 100644 src/components/signed-in/dashboard/calories-burned/calories-burned-summary/calories-burned-summary.styles.jsx
 create mode 100644 src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-graph-calories/nutrition-tracker-graph-calories.styles.jsx
 create mode 100644 src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-graph-macronutrients/nutrition-tracker-graph-macronutrients.styles.jsx
 create mode 100644 src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-graph-pie/nutrition-tracker-graph-pie.styles.jsx
 create mode 100644 src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-summary.styles.jsx
 create mode 100644 src/pages/signed-in/dashboard/dashboard.styles.jsx

diff --git a/src/components/shared/mui/hidden-drawer/hidden-drawer.component.jsx b/src/components/shared/mui/hidden-drawer/hidden-drawer.component.jsx
index 10f5111..290ea63 100644
--- a/src/components/shared/mui/hidden-drawer/hidden-drawer.component.jsx
+++ b/src/components/shared/mui/hidden-drawer/hidden-drawer.component.jsx
@@ -160,8 +160,8 @@ export default function HiddenDrawer() {
           </Typography>
           {
             currentUser ?
-            <Typography sx={{ color: COLOR_CODES.general["5"] }} variant="body2">
-              { `Hello ${currentUser.displayName}` }
+            <Typography sx={{ marginLeft: "15px", color: COLOR_CODES.general["5"] }} variant="caption">
+              { `Hello ${currentUser.displayName.split(" ")[0]}` }
             </Typography> : null
           }
         </div>
diff --git a/src/components/signed-in/dashboard/calories-burned/calories-burned-graph/calories-burned-graph-pie.component.jsx b/src/components/signed-in/dashboard/calories-burned/calories-burned-graph/calories-burned-graph-pie.component.jsx
index db4e5c5..6dd1dbb 100644
--- a/src/components/signed-in/dashboard/calories-burned/calories-burned-graph/calories-burned-graph-pie.component.jsx
+++ b/src/components/signed-in/dashboard/calories-burned/calories-burned-graph/calories-burned-graph-pie.component.jsx
@@ -1,7 +1,16 @@
-import "./calories-burned-graph-pie.styles.scss"
+import "./calories-burned-graph-pie.styles.jsx"
+import { CaloriesBurnedDashboardGraphPieContainer } from "./calories-burned-graph-pie.styles.jsx"
 import ReactApexChart from 'react-apexcharts'
 import { useContext, Fragment } from "react"
 import { CaloriesBurnedContext } from "../../../../../contexts/signed-in/calories-burned/calories-burned.context"
+import { Typography } from "@mui/material"
+import { COLOR_CODES, COMMON_SPACING } from "../../../../../utils/constants/shared.constants.js"
+import SimplePaper from "../../../../shared/mui/paper/paper.component.jsx"
+
+const paperStyles = {
+  backgroundColor: COLOR_CODES.general["0"],
+  margin: "2%",
+}
 
 const CaloriesBurnedGraphPie = () => {
   const { trackedCaloriesBurned } = useContext(CaloriesBurnedContext)
@@ -20,15 +29,11 @@ const CaloriesBurnedGraphPie = () => {
   const options = {
     chart: {
       type: 'donut',
-      height: 600,
     },
     labels: [ ...trackedCalories.keys() ],
     responsive: [{
       breakpoint: 50,
       options: {
-        chart: {
-          height: 600
-        },
         legend: {
           position: 'bottom'
         }
@@ -38,10 +43,13 @@ const CaloriesBurnedGraphPie = () => {
 
   return (
     <Fragment>
-      <h4>Tracked activities</h4>
-      <div className="calories-burned-dashboard-graph-pie-container">
-        <ReactApexChart options={ options } series={ series } type="donut" height={ 600 } width={ 700 }/>
-      </div>
+      <SimplePaper styles={ paperStyles }>
+        <Typography sx={{ display: "flex", justifyContent: "center", alignItems: "center" }} variant="h6">Tracked activities</Typography>
+        <CaloriesBurnedDashboardGraphPieContainer>
+          <ReactApexChart options={ options } series={ series } type="donut" 
+            height={ COMMON_SPACING.pieChart.height } width={ COMMON_SPACING.pieChart.width }/>
+        </CaloriesBurnedDashboardGraphPieContainer>
+      </SimplePaper>
     </Fragment>
   )
 }
diff --git a/src/components/signed-in/dashboard/calories-burned/calories-burned-graph/calories-burned-graph-pie.styles.jsx b/src/components/signed-in/dashboard/calories-burned/calories-burned-graph/calories-burned-graph-pie.styles.jsx
new file mode 100644
index 0000000..50d4889
--- /dev/null
+++ b/src/components/signed-in/dashboard/calories-burned/calories-burned-graph/calories-burned-graph-pie.styles.jsx
@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+export const CaloriesBurnedDashboardGraphPieContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2%;
+  margin: 2%;
+`
\ No newline at end of file
diff --git a/src/components/signed-in/dashboard/calories-burned/calories-burned-graph/calories-burned-graph.component.jsx b/src/components/signed-in/dashboard/calories-burned/calories-burned-graph/calories-burned-graph.component.jsx
index 19b04dc..ffe2228 100644
--- a/src/components/signed-in/dashboard/calories-burned/calories-burned-graph/calories-burned-graph.component.jsx
+++ b/src/components/signed-in/dashboard/calories-burned/calories-burned-graph/calories-burned-graph.component.jsx
@@ -1,9 +1,17 @@
-import "./calories-burned-graph.styles.scss"
+import "./calories-burned-graph.styles.jsx"
+import { CaloriesBurnedDashboardGraphLineContainer } from "./calories-burned-graph.styles.jsx"
 import ReactApexChart from "react-apexcharts"
 import { useContext } from "react"
 import { CaloriesBurnedContext } from "../../../../../contexts/signed-in/calories-burned/calories-burned.context"
-
 import { GRAPH_FIELDS } from "../../../../../utils/constants/calories-burned.constants"
+import { COLOR_CODES, COMMON_SPACING } from "../../../../../utils/constants/shared.constants"
+import SimplePaper from "../../../../shared/mui/paper/paper.component.jsx"
+
+const paperStyles = {
+  backgroundColor: COLOR_CODES.general["0"],
+  marginLeft: "2%",
+  marginRight: "2%"
+}
 
 const CaloriesBurnedGraph = () => {
   const { trackedCaloriesBurned } = useContext(CaloriesBurnedContext)
@@ -25,7 +33,7 @@ const CaloriesBurnedGraph = () => {
   const options = {
     chart: {
       type: 'area',
-      height: 500,
+      height: COMMON_SPACING.lineChart.height,
       zoom: {
         enabled: true
       }
@@ -57,9 +65,12 @@ const CaloriesBurnedGraph = () => {
   };
 
   return (
-    <div className="calories-burned-dashboard-graph-line-container">
-      <ReactApexChart options={ options } series={ series } type="area" height={ 500 } width={ 1000 }/>
-    </div>
+    <SimplePaper styles={ paperStyles }>
+      <CaloriesBurnedDashboardGraphLineContainer>
+        <ReactApexChart options={ options } series={ series } type="area" 
+          height={ COMMON_SPACING.lineChart.height } width={ COMMON_SPACING.lineChart.width }/>
+      </CaloriesBurnedDashboardGraphLineContainer>
+    </SimplePaper>
   )
 }
 
diff --git a/src/components/signed-in/dashboard/calories-burned/calories-burned-graph/calories-burned-graph.styles.jsx b/src/components/signed-in/dashboard/calories-burned/calories-burned-graph/calories-burned-graph.styles.jsx
new file mode 100644
index 0000000..477766a
--- /dev/null
+++ b/src/components/signed-in/dashboard/calories-burned/calories-burned-graph/calories-burned-graph.styles.jsx
@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+export const CaloriesBurnedDashboardGraphLineContainer = styled.div`
+  display: block;
+  justify-content: center;
+  align-items: center;
+  margin: 1%;
+  padding: 1%;
+`
\ No newline at end of file
diff --git a/src/components/signed-in/dashboard/calories-burned/calories-burned-summary/calories-burned-summary.component.jsx b/src/components/signed-in/dashboard/calories-burned/calories-burned-summary/calories-burned-summary.component.jsx
index 4727059..037a124 100644
--- a/src/components/signed-in/dashboard/calories-burned/calories-burned-summary/calories-burned-summary.component.jsx
+++ b/src/components/signed-in/dashboard/calories-burned/calories-burned-summary/calories-burned-summary.component.jsx
@@ -1,19 +1,38 @@
-import "./calories-burned-summary.styles.scss"
+import "./calories-burned-summary.styles.jsx"
+import { CaloriesBurnedDashboardSummaryContainer } from "./calories-burned-summary.styles.jsx"
 import { useContext } from "react"
 import { CaloriesBurnedContext } from "../../../../../contexts/signed-in/calories-burned/calories-burned.context"
+import { Divider, Typography } from "@mui/material"
+import SimplePaper from "../../../../shared/mui/paper/paper.component.jsx"
+import { COLOR_CODES } from "../../../../../utils/constants/shared.constants.js"
+
+const paperStyles = {
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  backgroundColor: COLOR_CODES.general["1"],
+  marginLeft: "2%",
+  marginRight: "2%"
+}
 
 const CaloriesBurnedSummary = () => {
   const { trackedCaloriesBurnedSummary } = useContext(CaloriesBurnedContext)
 
   return (
-    <div className="calories-burned-dashboard-summary-container">
-      <h3>{ `Daily average burned : ${trackedCaloriesBurnedSummary.dailyAverageCaloriesBurned}` }</h3>
-      <br></br>
-      <h3>Most calories burned</h3>
-      <h4>{ `Date : ${trackedCaloriesBurnedSummary.mostCaloriesBurned.date}` }</h4>
-      <h4>{ `Calories burned : ${trackedCaloriesBurnedSummary.mostCaloriesBurned.caloriesBurned}` }</h4>
-      <h4>{ `Activity : ${trackedCaloriesBurnedSummary.mostCaloriesBurned.activity}` }</h4>
-    </div>
+    <SimplePaper styles={ paperStyles }>
+      <CaloriesBurnedDashboardSummaryContainer>
+        <Typography variant="h6">{ `Daily average burned : ${trackedCaloriesBurnedSummary.dailyAverageCaloriesBurned}` }</Typography>
+
+        <br/>
+        <Divider/>
+        <br/>
+
+        <Typography variant="h6">Most calories burned</Typography>
+        <Typography variant="body1">{ `Date : ${trackedCaloriesBurnedSummary.mostCaloriesBurned.date}` }</Typography>
+        <Typography variant="body1">{ `Calories burned : ${trackedCaloriesBurnedSummary.mostCaloriesBurned.caloriesBurned}` }</Typography>
+        <Typography variant="body1">{ `Activity : ${trackedCaloriesBurnedSummary.mostCaloriesBurned.activity}` }</Typography>
+      </CaloriesBurnedDashboardSummaryContainer>
+    </SimplePaper>
   )
 }
 
diff --git a/src/components/signed-in/dashboard/calories-burned/calories-burned-summary/calories-burned-summary.styles.jsx b/src/components/signed-in/dashboard/calories-burned/calories-burned-summary/calories-burned-summary.styles.jsx
new file mode 100644
index 0000000..0cb4bec
--- /dev/null
+++ b/src/components/signed-in/dashboard/calories-burned/calories-burned-summary/calories-burned-summary.styles.jsx
@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+export const CaloriesBurnedDashboardSummaryContainer = styled.div`
+  display: block;
+  justify-content: center;
+  align-items: center;
+  margin: 1%;
+`
\ No newline at end of file
diff --git a/src/components/signed-in/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.styles.scss b/src/components/signed-in/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.styles.scss
index 4abd345..40f3c99 100644
--- a/src/components/signed-in/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.styles.scss
+++ b/src/components/signed-in/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.styles.scss
@@ -21,6 +21,5 @@
   display: block;
   justify-content: center;
   align-items: center;
-  margin: 2%;
   padding: 1%;
 }
\ No newline at end of file
diff --git a/src/components/signed-in/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.component.jsx b/src/components/signed-in/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.component.jsx
index dd2ebe8..5830f49 100644
--- a/src/components/signed-in/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.component.jsx
+++ b/src/components/signed-in/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.component.jsx
@@ -2,12 +2,12 @@ import "./schedule-day-info.styles.scss"
 import { Typography, Divider } from "@mui/material"
 import { Fragment, useContext } from "react"
 import SimplePaper from "../../../../../shared/mui/paper/paper.component"
-import { COLOR_CODES } from "../../../../../../utils/constants/shared.constants"
+import { COLOR_CODES, COMMON_SPACING } from "../../../../../../utils/constants/shared.constants"
 import { CaloriesBurnedContext } from "../../../../../../contexts/signed-in/calories-burned/calories-burned.context"
 
 const paperStyles = {
   backgroundColor: COLOR_CODES.general["1"],
-  width: 400
+  width: COMMON_SPACING.calendarDayInfo.width
 }
 
 const ScheduleDayInfo = () => {
diff --git a/src/components/signed-in/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.component.jsx b/src/components/signed-in/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.component.jsx
index 39b94ad..ba54eac 100644
--- a/src/components/signed-in/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.component.jsx
+++ b/src/components/signed-in/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.component.jsx
@@ -10,25 +10,6 @@ function getScheduledData(date, exercises) {
   // const day = date.getDate();
   date = date.toISOString().split('T')[0]
 
-  // switch (day) {
-  //   case 10:
-  //     return [
-  //       { time: '10:30 am', title: 'Meeting' },
-  //       { time: '12:00 pm', title: 'Lunch' }
-  //     ];
-  //   case 15:
-  //     return [
-  //       { time: '09:30 pm', title: 'Products Introduction Meeting' },
-  //       { time: '12:30 pm', title: 'Client entertaining' },
-  //       { time: '02:00 pm', title: 'Product design discussion' },
-  //       { time: '05:00 pm', title: 'Product test and acceptance' },
-  //       { time: '06:30 pm', title: 'Reporting' },
-  //       { time: '10:00 pm', title: 'Going home to walk the dog' }
-  //     ];
-  //   default:
-  //     return [];
-  // }
-
   let scheduledExercisesForDate = []
   exercises.map((exercise) => {
     if (exercise.exerciseDate === date) {
@@ -51,25 +32,6 @@ const ScheduleCalendar = () => {
 
     if (list.length) {
       const moreCount = list.length - displayList.length;
-      // const moreItem = (
-      //   <li>
-      //     <Whisper
-      //       placement="top"
-      //       trigger="click"
-      //       speaker={
-      //         <Popover>
-      //           {list.map((item, index) => (
-      //             <p key={index}>
-      //               <b>{item.time}</b> - {item.title}
-      //             </p>
-      //           ))}
-      //         </Popover>
-      //       }
-      //     >
-      //       <h10>{moreCount} more</h10>
-      //     </Whisper>
-      //   </li>
-      // );
 
       return (
         <Fragment>
diff --git a/src/components/signed-in/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.styles.scss b/src/components/signed-in/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.styles.scss
index 679c602..7b9828c 100644
--- a/src/components/signed-in/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.styles.scss
+++ b/src/components/signed-in/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.styles.scss
@@ -21,7 +21,5 @@
   display: block;
   justify-content: center;
   align-items: center;
-  background-color: lightblue;
-  margin: 2%;
   padding: 1%;
 }
\ No newline at end of file
diff --git a/src/components/signed-in/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.component.jsx b/src/components/signed-in/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.component.jsx
index 29a1a7f..5f90e85 100644
--- a/src/components/signed-in/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.component.jsx
+++ b/src/components/signed-in/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.component.jsx
@@ -7,14 +7,14 @@ import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the
 import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
 
 import SimplePaper from "../../../../../shared/mui/paper/paper.component";
-import { COLOR_CODES } from "../../../../../../utils/constants/shared.constants";
+import { COLOR_CODES, COMMON_SPACING } from "../../../../../../utils/constants/shared.constants";
 import { FitnessContext } from "../../../../../../contexts/signed-in/fitness/fitness.context";
 import Button from "../../../../../shared/button/button.component";
 import { ButtonsContainer } from "../../../../../shared/button/button.styles";
 
 const paperStyles = {
   backgroundColor: COLOR_CODES.general["8"],
-  height: 600
+  height: COMMON_SPACING.calendarDayInfo.height
 }
 
 const ScheduleDayInfo = () => {
@@ -58,7 +58,7 @@ const ScheduleDayInfo = () => {
 
   return (
     <div className="fitness-schedule-day-info-container">
-      <Typography sx={{ display: "flex", marginLeft: "2%" }} 
+      <Typography sx={{ display: "flex", marginLeft: "2%", color: COLOR_CODES.general["0"] }} 
         variant="h6">{`Exercises planned`}</Typography>
 
       <SimplePaper styles={ paperStyles }>
diff --git a/src/components/signed-in/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.styles.scss b/src/components/signed-in/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.styles.scss
index a10dff1..2bde813 100644
--- a/src/components/signed-in/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.styles.scss
+++ b/src/components/signed-in/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.styles.scss
@@ -1,4 +1,5 @@
 .fitness-schedule-day-info-container {
+  margin: 0% 2% 0% 2%;
   margin-bottom: 2%;
 }
 
@@ -9,7 +10,6 @@
   padding: 1% 1% 0% 1%;
 }
 
-.remove-exercise-selected-button,
 .unselect-exercise-button {
   margin: 1%;
 }
\ No newline at end of file
diff --git a/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-graph-calories/nutrition-tracker-graph-calories.component.jsx b/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-graph-calories/nutrition-tracker-graph-calories.component.jsx
index 96c72cd..26d60d6 100644
--- a/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-graph-calories/nutrition-tracker-graph-calories.component.jsx
+++ b/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-graph-calories/nutrition-tracker-graph-calories.component.jsx
@@ -1,10 +1,16 @@
-import "./nutrition-tracker-graph-calories.styles.scss"
+import "./nutrition-tracker-graph-calories.styles.jsx"
+import { NutritionTrackerDashboardGraphCalories } from "./nutrition-tracker-graph-calories.styles.jsx"
 import ReactApexChart from "react-apexcharts"
 import { useContext } from "react"
 import { NutritionTrackerContext } from "../../../../../contexts/signed-in/nutrition-tracker/nutrition-tracker.context"
-
+import { COLOR_CODES, COMMON_SPACING } from "../../../../../utils/constants/shared.constants.js"
+import SimplePaper from "../../../../shared/mui/paper/paper.component.jsx"
 import { GRAPH_FIELDS } from "../../../../../utils/constants/nutrition-tracker.constants"
 
+const paperStyles = {
+  backgroundColor: COLOR_CODES.general["1"]
+}
+
 const NutritionTrackerGraphCalories = () => {
   const { nutritionTrackedDays } = useContext(NutritionTrackerContext)
 
@@ -25,7 +31,7 @@ const NutritionTrackerGraphCalories = () => {
   const options = {
     chart: {
       type: 'area',
-      height: 500,
+      height: COMMON_SPACING.lineChart.height,
       zoom: {
         enabled: true
       }
@@ -57,9 +63,12 @@ const NutritionTrackerGraphCalories = () => {
   };
 
   return (
-    <div className="nutrition-tracker-dashboard-graph-calories">
-      <ReactApexChart options={ options } series={ series } type="area" height={ 500 } width={ "95%" }/>
-    </div>
+    <NutritionTrackerDashboardGraphCalories>
+      <SimplePaper styles={ paperStyles }>
+        <ReactApexChart options={ options } series={ series } type="area" 
+          height={ COMMON_SPACING.lineChart.height } width={ COMMON_SPACING.lineChart.width }/>
+      </SimplePaper>
+    </NutritionTrackerDashboardGraphCalories>
   )
 }
 
diff --git a/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-graph-calories/nutrition-tracker-graph-calories.styles.jsx b/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-graph-calories/nutrition-tracker-graph-calories.styles.jsx
new file mode 100644
index 0000000..6541014
--- /dev/null
+++ b/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-graph-calories/nutrition-tracker-graph-calories.styles.jsx
@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+export const NutritionTrackerDashboardGraphCalories = styled.div`
+  display: block;
+  justify-content: center;
+  align-items: center;
+  margin: 1%;
+  padding: 1%;
+`
\ No newline at end of file
diff --git a/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-graph-macronutrients/nutrition-tracker-graph-macronutrients.component.jsx b/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-graph-macronutrients/nutrition-tracker-graph-macronutrients.component.jsx
index 0eac38f..a895569 100644
--- a/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-graph-macronutrients/nutrition-tracker-graph-macronutrients.component.jsx
+++ b/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-graph-macronutrients/nutrition-tracker-graph-macronutrients.component.jsx
@@ -1,9 +1,17 @@
-import "./nutrition-tracker-graph-macronutrients.styles.scss"
+import "./nutrition-tracker-graph-macronutrients.styles.jsx"
+import { NutritionTrackerDashboardGraphNutrientsContainer } from "./nutrition-tracker-graph-macronutrients.styles.jsx";
 import { Fragment, useContext, useState, Component } from "react";
 import ReactApexChart from 'react-apexcharts'
 
 import { NutritionTrackerContext } from "../../../../../contexts/signed-in/nutrition-tracker/nutrition-tracker.context";
 import { GRAPH_FIELDS } from "../../../../../utils/constants/nutrition-tracker.constants";
+import { COLOR_CODES, COMMON_SPACING } from "../../../../../utils/constants/shared.constants.js";
+import { Typography } from "@mui/material";
+import SimplePaper from "../../../../shared/mui/paper/paper.component.jsx";
+
+const paperStyles = {
+  backgroundColor: COLOR_CODES.general["1"]
+}
 
 const NutritionTrackerGraphMacronutrients = () => {
   const { nutritionTrackedDaysView } = useContext(NutritionTrackerContext);
@@ -84,10 +92,13 @@ const NutritionTrackerGraphMacronutrients = () => {
   };
 
   return (
-    <div className="nutrition-tracker-dashboard-graph-nutrients-container">
-        <h4>Macronutrients consumption</h4>
-        <ReactApexChart options={ options } series={ series } type="bar" height={ 350 } width={ "100%" }/>
-    </div>
+    <NutritionTrackerDashboardGraphNutrientsContainer>
+      <SimplePaper styles={ paperStyles }>
+        <Typography variant="body1">Macronutrients consumption</Typography>
+        <ReactApexChart options={ options } series={ series } type="bar" 
+          height={ COMMON_SPACING.barChart.height } width={ COMMON_SPACING.barChart.width }/>
+      </SimplePaper>
+    </NutritionTrackerDashboardGraphNutrientsContainer>
   )
 }
 
diff --git a/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-graph-macronutrients/nutrition-tracker-graph-macronutrients.styles.jsx b/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-graph-macronutrients/nutrition-tracker-graph-macronutrients.styles.jsx
new file mode 100644
index 0000000..38a0208
--- /dev/null
+++ b/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-graph-macronutrients/nutrition-tracker-graph-macronutrients.styles.jsx
@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+export const NutritionTrackerDashboardGraphNutrientsContainer = styled.div`
+  display: block;
+  justify-content: center;
+  align-items: center;
+  margin: 1%;
+  padding: 1%;
+`
\ No newline at end of file
diff --git a/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-graph-pie/nutrition-tracker-graph-pie.component.jsx b/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-graph-pie/nutrition-tracker-graph-pie.component.jsx
index 35a39f4..17b9251 100644
--- a/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-graph-pie/nutrition-tracker-graph-pie.component.jsx
+++ b/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-graph-pie/nutrition-tracker-graph-pie.component.jsx
@@ -1,9 +1,16 @@
-import "./nutrition-tracker-graph-pie.styles.scss"
+import "./nutrition-tracker-graph-pie.styles.jsx"
+import { NutritionTrackerDashboardGraphPieContainer } from "./nutrition-tracker-graph-pie.styles.jsx";
 import ReactApexChart from "react-apexcharts";
 import { useContext, Fragment } from "react"
 import { NutritionTrackerContext } from "../../../../../../contexts/signed-in/nutrition-tracker/nutrition-tracker.context"
+import SimplePaper from "../../../../../shared/mui/paper/paper.component.jsx";
 
 import { GRAPH_FIELDS } from "../../../../../../utils/constants/nutrition-tracker.constants";
+import { COLOR_CODES, COMMON_SPACING } from "../../../../../../utils/constants/shared.constants.js";
+
+const paperStyles = {
+  backgroundColor: COLOR_CODES.general["0"]
+}
 
 const NutritionTrackerGraphPie = () => {
   const { nutritionTrackedDaysSummary } = useContext(NutritionTrackerContext);
@@ -19,15 +26,11 @@ const NutritionTrackerGraphPie = () => {
   const options = {
     chart: {
       type: 'donut',
-      height: 400,
     },
     labels: [ ...trackedMacronutrients.keys() ],
     responsive: [{
       breakpoint: 50,
       options: {
-        chart: {
-          height: 400
-        },
         legend: {
           position: 'bottom'
         }
@@ -36,9 +39,12 @@ const NutritionTrackerGraphPie = () => {
   }
 
   return (
-    <div className="nutrition-tracker-dashboard-graph-pie-container">
-      <ReactApexChart options={ options } series={ series } type="donut" height={ 400 } width={ 400 }></ReactApexChart>
-    </div>
+    <NutritionTrackerDashboardGraphPieContainer>
+      <SimplePaper styles={ paperStyles }>
+        <ReactApexChart options={ options } series={ series } type="donut" 
+          height={ COMMON_SPACING.pieChart.height } width={ COMMON_SPACING.pieChart.width }></ReactApexChart>
+      </SimplePaper>
+    </NutritionTrackerDashboardGraphPieContainer>
   )
 }
 
diff --git a/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-graph-pie/nutrition-tracker-graph-pie.styles.jsx b/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-graph-pie/nutrition-tracker-graph-pie.styles.jsx
new file mode 100644
index 0000000..0b44cc0
--- /dev/null
+++ b/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-graph-pie/nutrition-tracker-graph-pie.styles.jsx
@@ -0,0 +1,5 @@
+import styled from "styled-components"
+
+export const NutritionTrackerDashboardGraphPieContainer = styled.div`
+  margin-top: 2%;
+`
\ No newline at end of file
diff --git a/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-summary.component.jsx b/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-summary.component.jsx
index f819b2f..3629deb 100644
--- a/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-summary.component.jsx
+++ b/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-summary.component.jsx
@@ -1,7 +1,13 @@
-import "./nutrition-tracker-summary.styles.scss"
+import "./nutrition-tracker-summary.styles.jsx"
+import { NutritionTrackerDashboardSummaryContainer,
+  NutritionTrackerDashboardSummaryInfoContainer
+} from "./nutrition-tracker-summary.styles.jsx";
 import { useContext } from "react";
 import { NutritionTrackerContext } from "../../../../../contexts/signed-in/nutrition-tracker/nutrition-tracker.context";
 import NutritionTrackerGraphPie from "./nutrition-tracker-graph-pie/nutrition-tracker-graph-pie.component";
+import { COLOR_CODES } from "../../../../../utils/constants/shared.constants.js";
+import { Typography, Divider } from "@mui/material";
+import SimplePaper from "../../../../shared/mui/paper/paper.component.jsx";
 
 const date = new Date();
 let currentDay= String(date.getDate()).padStart(2, '0');
@@ -9,21 +15,41 @@ let currentMonth = String(date.getMonth()+1).padStart(2,"0");
 let currentYear = date.getFullYear();
 let currentDate = `${currentYear}-${currentMonth}-${currentDay}`;
 
+const paperStyles = {
+  backgroundColor: COLOR_CODES.general["0"],
+}
+
 const NutritionTrackerSummary = () => {
   const { nutritionTrackedDaysSummary } = useContext(NutritionTrackerContext)
 
   return (
-    <div className="nutrition-tracker-dashboard-summary-container">
-      <div className="nutrition-tracker-dashboard-summary-info-container">
-        <h3>{`As of ${currentDate}`}</h3>
-
-        <h5>{`Average daily calories : ${nutritionTrackedDaysSummary.averageDailyCaloriesConsumption}`}</h5>
-        <h5>{`Average daily carbohydrates : ${nutritionTrackedDaysSummary.averageDailyCarbohydratesConsumption} g`}</h5>
-        <h5>{`Average daily protein : ${nutritionTrackedDaysSummary.averageDailyProteinConsumption} g`}</h5>
-        <h5>{`Average daily fat : ${nutritionTrackedDaysSummary.averageDailyFatConsumption} g`}</h5>
+    <NutritionTrackerDashboardSummaryContainer>
+      <div className="container">
+        <div className="row justify-content-evenly align-items-center">
+          <div className="col-sm-12 col-md-6">
+            <SimplePaper styles={ paperStyles }>
+              <NutritionTrackerDashboardSummaryInfoContainer>
+                <Typography variant="h6">{`As of ${currentDate}`}</Typography>
+
+                <Typography variant="body1">{`Average daily calories : ${nutritionTrackedDaysSummary.averageDailyCaloriesConsumption}`}</Typography>
+
+                <br/>
+                <Divider/>
+                <br/>
+
+                <Typography variant="body1">{`Average daily carbohydrates : ${nutritionTrackedDaysSummary.averageDailyCarbohydratesConsumption} g`}</Typography>
+                <Typography variant="body1">{`Average daily protein : ${nutritionTrackedDaysSummary.averageDailyProteinConsumption} g`}</Typography>
+                <Typography variant="body1">{`Average daily fat : ${nutritionTrackedDaysSummary.averageDailyFatConsumption} g`}</Typography>
+              </NutritionTrackerDashboardSummaryInfoContainer>
+            </SimplePaper>
+          </div>
+
+          <div className="col-sm-12 col-md-4">
+            <NutritionTrackerGraphPie></NutritionTrackerGraphPie>
+          </div>
+        </div>
       </div>
-      <NutritionTrackerGraphPie></NutritionTrackerGraphPie>
-    </div>
+    </NutritionTrackerDashboardSummaryContainer>
   )
 }
 
diff --git a/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-summary.styles.jsx b/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-summary.styles.jsx
new file mode 100644
index 0000000..add7a5d
--- /dev/null
+++ b/src/components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-summary.styles.jsx
@@ -0,0 +1,15 @@
+import styled from "styled-components"
+
+export const NutritionTrackerDashboardSummaryContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
+export const NutritionTrackerDashboardSummaryInfoContainer = styled.div`
+  display: block;
+  justify-content: center;
+  align-items: center;
+  padding: 4%;
+  margin: 2%;
+`
\ No newline at end of file
diff --git a/src/components/signed-in/dashboard/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.component.jsx b/src/components/signed-in/dashboard/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.component.jsx
index f972d85..0c8add1 100644
--- a/src/components/signed-in/dashboard/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.component.jsx
+++ b/src/components/signed-in/dashboard/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.component.jsx
@@ -59,7 +59,7 @@ const ScheduleCalendar = () => {
   }
 
   return (
-    <div className="nutrition-tracker-schedule-calendar-container" style={{ backgroundColor: COLOR_CODES.general["0"] }}>
+    <div className="nutrition-tracker-calendar-container" style={{ backgroundColor: COLOR_CODES.general["0"] }}>
       <Typography sx={{ display: "flex", marginLeft: "1%" }} 
         variant="h6">{`Nutrition tracker calendar`}</Typography>
       <Calendar bordered renderCell={ renderCell } onSelect={ onSelectDate } style={{ backgroundColor: COLOR_CODES.general["0"] }}/>
diff --git a/src/components/signed-in/dashboard/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.styles.scss b/src/components/signed-in/dashboard/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.styles.scss
index 2fc760b..acf7906 100644
--- a/src/components/signed-in/dashboard/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.styles.scss
+++ b/src/components/signed-in/dashboard/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.styles.scss
@@ -21,6 +21,5 @@
   display: block;
   justify-content: center;
   align-items: center;
-  margin: 2%;
   padding: 1%;
 }
\ No newline at end of file
diff --git a/src/components/signed-in/dashboard/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.component.jsx b/src/components/signed-in/dashboard/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.component.jsx
index e5a4a8e..7af5be9 100644
--- a/src/components/signed-in/dashboard/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.component.jsx
+++ b/src/components/signed-in/dashboard/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.component.jsx
@@ -2,12 +2,12 @@ import "./schedule-day-info.styles.scss"
 import { Typography, Divider } from "@mui/material"
 import { Fragment, useContext } from "react"
 import SimplePaper from "../../../../../shared/mui/paper/paper.component"
-import { COLOR_CODES } from "../../../../../../utils/constants/shared.constants"
+import { COLOR_CODES, COMMON_SPACING } from "../../../../../../utils/constants/shared.constants"
 import { NutritionTrackerContext } from "../../../../../../contexts/signed-in/nutrition-tracker/nutrition-tracker.context"
 
 const paperStyles = {
   backgroundColor: COLOR_CODES.general["1"],
-  width: 400
+  width: COMMON_SPACING.calendarDayInfo.width
 }
 
 const ScheduleDayInfo = () => {
@@ -23,7 +23,7 @@ const ScheduleDayInfo = () => {
         <Divider/>
         <br/>
 
-        <strong><h4>Macronutrients</h4></strong>
+        <Typography sx={{ display: "flex", justifyContent: "center" }} variant="h6">Macronutrients</Typography>
         <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Carbohydrates - ${scheduledNutritionTrackedDaysView.macronutrients.carbohydrates} g`}</Typography>
         <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Protein - ${scheduledNutritionTrackedDaysView.macronutrients.protein} g`}</Typography>
         <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Fat - ${scheduledNutritionTrackedDaysView.macronutrients.fat} g`}</Typography>
@@ -35,11 +35,12 @@ const ScheduleDayInfo = () => {
             <Divider/>
             <br/>
 
-            <strong><h4>Micronutrients</h4></strong>
+            <Typography sx={{ display: "flex", justifyContent: "center" }} variant="h6">Micronutrients</Typography>
             {
               scheduledNutritionTrackedDaysView.micronutrients.map((micronutrient) => {
                 return (
-                  <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`${micronutrient.name} - ${micronutrient.amount} ${micronutrient.unit}`}</Typography>
+                  <Typography sx={{ display: "flex", justifyContent: "center" }} 
+                    variant="body1">{`${micronutrient.name} - ${micronutrient.amount} ${micronutrient.unit}`}</Typography>
                 )
               })
             }
diff --git a/src/components/signed-out/dashboard/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.component.jsx b/src/components/signed-out/dashboard/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.component.jsx
index aa356fc..7a63c3d 100644
--- a/src/components/signed-out/dashboard/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.component.jsx
+++ b/src/components/signed-out/dashboard/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.component.jsx
@@ -40,7 +40,8 @@ const ScheduleDayInfo = () => {
             {
               scheduledNutritionTrackedDaysView.micronutrients.map((micronutrient) => {
                 return (
-                  <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`${micronutrient.name} - ${micronutrient.amount} ${micronutrient.unit}`}</Typography>
+                  <Typography sx={{ display: "flex", justifyContent: "center" }} 
+                    variant="body1">{`${micronutrient.name} - ${micronutrient.amount} ${micronutrient.unit}`}</Typography>
                 )
               })
             }
diff --git a/src/pages/signed-in/dashboard/dashboard.component.jsx b/src/pages/signed-in/dashboard/dashboard.component.jsx
index 65a1c1a..86ff7ca 100644
--- a/src/pages/signed-in/dashboard/dashboard.component.jsx
+++ b/src/pages/signed-in/dashboard/dashboard.component.jsx
@@ -1,7 +1,8 @@
 import CaloriesBurnedGraphPie from "../../../components/signed-in/dashboard/calories-burned/calories-burned-graph/calories-burned-graph-pie.component"
 import CaloriesBurnedGraph from "../../../components/signed-in/dashboard/calories-burned/calories-burned-graph/calories-burned-graph.component"
 import CaloriesBurnedSummary from "../../../components/signed-in/dashboard/calories-burned/calories-burned-summary/calories-burned-summary.component"
-import "./dashboard.styles.scss"
+import "./dashboard.styles.jsx"
+import { DashboardContainer } from "./dashboard.styles.jsx"
 import NutritionTrackerGraphCalories from "../../../components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-graph-calories/nutrition-tracker-graph-calories.component"
 import NutritionTrackerGraphMacronutrients from "../../../components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-graph-macronutrients/nutrition-tracker-graph-macronutrients.component"
 import NutritionTrackerSummary from "../../../components/signed-in/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-summary.component"
@@ -19,83 +20,198 @@ import ScheduleCalendarCaloriesBurned from "../../../components/signed-in/dashbo
 import ScheduleDayInfoCaloriesBurned from "../../../components/signed-in/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.component"
 import ScheduleCalendarFitness from "../../../components/signed-in/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.component"
 import ScheduleDayInfoFitness from "../../../components/signed-in/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.component"
+import ItemTabs from "../../../components/shared/mui/tabs/tabs.component"
+import SmartToyIcon from '@mui/icons-material/SmartToy';
+import RestaurantIcon from '@mui/icons-material/Restaurant';
+import FitnessCenterIcon from '@mui/icons-material/FitnessCenter';
+import DirectionsRunIcon from '@mui/icons-material/DirectionsRun';
+import { COMMON_SPACING } from "../../../utils/constants/shared.constants"
 
 const Dashboard = () => {
   const { nutritionTrackedDays, scheduledNutritionTrackedDaysView } = useContext(NutritionTrackerContext)
   const { trackedCaloriesBurned, scheduledTrackedCaloriesBurnedView } = useContext(CaloriesBurnedContext)
   const { exercises, selectedSearchedExercise } = useContext(FitnessContext)
 
-  if (nutritionTrackedDays.length === 0 && trackedCaloriesBurned.length === 0) {
+  let tabList = [
+    {
+      value: "chatbot",
+      icon: <SmartToyIcon/>,
+      label: "Chatbot"
+    }
+  ]
+  let panelList = [
+    {
+      value: "chatbot",
+      children: <ChatBot/>
+    }
+  ]
+
+  // if (nutritionTrackedDays.length === 0 && trackedCaloriesBurned.length === 0) {
+  //   return (
+  //     <Fragment>
+  //       <ChatBot></ChatBot>
+  //       <h4>Nothing yet, track nutrition and activities to get started!</h4>
+  //     </Fragment>
+  //   )
+  // }
+
+  if (nutritionTrackedDays.length === 0 && exercises.length === 0 && trackedCaloriesBurned.length === 0) {
     return (
-      <Fragment>
-        <ChatBot></ChatBot>
-        <h4>Nothing yet, track nutrition and activities to get started!</h4>
-      </Fragment>
+      <DashboardContainer>
+        <ItemTabs tabList={ tabList } panelList={ panelList }></ItemTabs>
+      </DashboardContainer>
     )
   }
 
-  return (
-    <div className="dashboard-container">
-      <ChatBot></ChatBot>
-      {
-        nutritionTrackedDays.length !== 0 &&
-        <div className="nutrition-tracker-dashboard-container">
-          <h3>Nutrition Tracker</h3>
+  if (nutritionTrackedDays.length !== 0) {
+    tabList.push({
+      value: "nutrition-tracker",
+      icon: <RestaurantIcon/>,
+      label: "Nutrition"
+    })
+
+    panelList.push({
+      value: "nutrition-tracker",
+      children: (
+        <Fragment>
           <ScheduleCalendarNutritionTracker></ScheduleCalendarNutritionTracker>
           {
             scheduledNutritionTrackedDaysView ?
             <ScheduleDayInfoNutritionTracker></ScheduleDayInfoNutritionTracker> : null
           }
 
+          <br/>
+          <Divider/>
+          <br/>
+
           <NutritionTrackerSummary></NutritionTrackerSummary>
           <NutritionTrackerGraphCalories></NutritionTrackerGraphCalories>
           <NutritionTrackerGraphMacronutrients></NutritionTrackerGraphMacronutrients>
-        </div>
-      }
+        </Fragment>
+      )
+    })
+  }
 
-      {
-        trackedCaloriesBurned.length !== 0 &&
+  if (exercises.length !== 0) {
+    tabList.push({
+      value: "fitness",
+      icon: <FitnessCenterIcon/>,
+      label: "Fitness"
+    })
+
+    panelList.push({
+      value: "fitness",
+      children: (
         <Fragment>
-          <div className="dashboard-separator-container">
-            <hr className="rounded"/>
-          </div>
+          <ScheduleCalendarFitness></ScheduleCalendarFitness>
+
+          <br/>
+          <Divider/>
+          <br/>
+
+          <ScheduleDayInfoFitness></ScheduleDayInfoFitness>
+        </Fragment>
+      )
+    })
+  }
 
-          <div className="calories-burned-dashboard-container">
-            <h3>Calories Burned</h3>
+  if (trackedCaloriesBurned.length !== 0) {
+    tabList.push({
+      value: "calories-burned",
+      icon: <DirectionsRunIcon/>,
+      label: "Calories"
+    })
+
+    panelList.push({
+      value: "calories-burned",
+      children: (
+        <Fragment>
             <ScheduleCalendarCaloriesBurned></ScheduleCalendarCaloriesBurned>
             {
               scheduledTrackedCaloriesBurnedView ?
               <ScheduleDayInfoCaloriesBurned></ScheduleDayInfoCaloriesBurned> : null
             }
-            <div className="calories-burned-dashboard-summary-graph-container">
-              <CaloriesBurnedSummary></CaloriesBurnedSummary>
-            </div>
+
+            <br/>
+            <Divider/>
+            <br/>
+
+            <CaloriesBurnedSummary></CaloriesBurnedSummary>
             <CaloriesBurnedGraphPie></CaloriesBurnedGraphPie>
             <CaloriesBurnedGraph></CaloriesBurnedGraph>
-          </div>
         </Fragment>
-      }
+      )
+    })
+  }
 
-      {
-        exercises.length !== 0 &&
-        <Fragment>
-          <div className="fitness-dashboard-container">
-          <div className="dashboard-separator-container">
-            <hr className="rounded"/>
-          </div>
-          <h3>Fitness</h3>
-          <ScheduleCalendarFitness></ScheduleCalendarFitness>
+  return (
+    <DashboardContainer>
+      <ItemTabs tabList={ tabList } panelList={ panelList }></ItemTabs>
+    </DashboardContainer>
+  )
 
-          <br/>
-          <Divider/>
-          <br/>
+  // return (
+  //   <div className="dashboard-container">
+  //     <ChatBot></ChatBot>
+  //     {
+  //       nutritionTrackedDays.length !== 0 &&
+  //       <div className="nutrition-tracker-dashboard-container">
+  //         <h3>Nutrition Tracker</h3>
+  //         <ScheduleCalendarNutritionTracker></ScheduleCalendarNutritionTracker>
+  //         {
+  //           scheduledNutritionTrackedDaysView ?
+  //           <ScheduleDayInfoNutritionTracker></ScheduleDayInfoNutritionTracker> : null
+  //         }
 
-          <ScheduleDayInfoFitness></ScheduleDayInfoFitness>
-          </div>
-        </Fragment>
-      }
-    </div>
-  )
+  //         <NutritionTrackerSummary></NutritionTrackerSummary>
+  //         <NutritionTrackerGraphCalories></NutritionTrackerGraphCalories>
+  //         <NutritionTrackerGraphMacronutrients></NutritionTrackerGraphMacronutrients>
+  //       </div>
+  //     }
+
+  //     {
+  //       trackedCaloriesBurned.length !== 0 &&
+  //       <Fragment>
+  //         <div className="dashboard-separator-container">
+  //           <hr className="rounded"/>
+  //         </div>
+
+  //         <div className="calories-burned-dashboard-container">
+  //           <h3>Calories Burned</h3>
+  //           <ScheduleCalendarCaloriesBurned></ScheduleCalendarCaloriesBurned>
+  //           {
+  //             scheduledTrackedCaloriesBurnedView ?
+  //             <ScheduleDayInfoCaloriesBurned></ScheduleDayInfoCaloriesBurned> : null
+  //           }
+  //           <div className="calories-burned-dashboard-summary-graph-container">
+  //             <CaloriesBurnedSummary></CaloriesBurnedSummary>
+  //           </div>
+  //           <CaloriesBurnedGraphPie></CaloriesBurnedGraphPie>
+  //           <CaloriesBurnedGraph></CaloriesBurnedGraph>
+  //         </div>
+  //       </Fragment>
+  //     }
+
+  //     {
+  //       exercises.length !== 0 &&
+  //       <Fragment>
+  //         <div className="fitness-dashboard-container">
+  //         <div className="dashboard-separator-container">
+  //           <hr className="rounded"/>
+  //         </div>
+  //         <h3>Fitness</h3>
+  //         <ScheduleCalendarFitness></ScheduleCalendarFitness>
+
+  //         <br/>
+  //         <Divider/>
+  //         <br/>
+
+  //         <ScheduleDayInfoFitness></ScheduleDayInfoFitness>
+  //         </div>
+  //       </Fragment>
+  //     }
+  //   </div>
+  // )
 }
 
 export default Dashboard
\ No newline at end of file
diff --git a/src/pages/signed-in/dashboard/dashboard.styles.jsx b/src/pages/signed-in/dashboard/dashboard.styles.jsx
new file mode 100644
index 0000000..c002ca0
--- /dev/null
+++ b/src/pages/signed-in/dashboard/dashboard.styles.jsx
@@ -0,0 +1,6 @@
+import styled from "styled-components";
+import { COMMON_SPACING } from "../../../utils/constants/shared.constants";
+
+export const DashboardContainer = styled.div`
+  
+`
\ No newline at end of file