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 58ad885..e5c8b44 100644
--- a/src/components/shared/mui/hidden-drawer/hidden-drawer.component.jsx
+++ b/src/components/shared/mui/hidden-drawer/hidden-drawer.component.jsx
@@ -73,7 +73,7 @@ export default function HiddenDrawer() {
   };
 
   const DrawerList = (
-    <Box sx={{ width: 250 }} role="presentation" onClick={toggleDrawer(false)}>
+    <Box sx={{ width: 250, marginTop: "40px" }} role="presentation" onClick={toggleDrawer(false)}>
       <List>
         { navLinksHeaders.section1.map(({ header, path }, index) => (
           <Link to={ `${path}` }>
@@ -152,13 +152,13 @@ export default function HiddenDrawer() {
 
   return (
     <div className="nutrition-tracker-app-bar">
-      <Button sx={{ position: "fixed", top: "0", width: "100%", justifyContent: "left", 
-        backgroundColor: COLOR_CODES.general["9"] 
-        }}
+      <Button sx={{ position: "fixed", width: "100%", justifyContent: "left", top: "0", zIndex: "9999", overflow: "hidden",
+        backgroundColor: COLOR_CODES.general["9"] }}
         onClick={toggleDrawer(true)}>
         <div className='nutrition-tracker-title'>
           <MenuIcon/>
-          <Typography sx={{ marginLeft: "10px", color: COLOR_CODES.general["0"] }} variant="h6">
+          <Typography sx={{ marginLeft: "10px", color: COLOR_CODES.general["0"], textTransform: "capitalize" }} 
+            variant="h6">
             Nutrition Tracker
           </Typography>
           {
diff --git a/src/components/shared/mui/hidden-drawer/hidden-drawer.styles.scss b/src/components/shared/mui/hidden-drawer/hidden-drawer.styles.scss
index 198ffed..5fed623 100644
--- a/src/components/shared/mui/hidden-drawer/hidden-drawer.styles.scss
+++ b/src/components/shared/mui/hidden-drawer/hidden-drawer.styles.scss
@@ -10,4 +10,6 @@ ion-icon {
 
 .nutrition-tracker-app-bar {
   cursor: pointer;
+  z-index: 9999;
+  overflow: "hidden";
 }
\ No newline at end of file
diff --git a/src/components/signed-in/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.component.jsx b/src/components/signed-in/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.component.jsx
index 38b5f87..ebe1654 100644
--- a/src/components/signed-in/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.component.jsx
+++ b/src/components/signed-in/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.component.jsx
@@ -1,4 +1,5 @@
-import "./schedule-calendar.styles.scss"
+import "./schedule-calendar.styles.jsx"
+import { CalendarTodoList, CaloriesBurnedCalendarContainer } from "./schedule-calendar.styles.jsx";
 import 'rsuite/Calendar/styles/index.css';
 import { Fragment, useContext, useState } from "react";
 import { Calendar, Whisper, Popover, Badge } from 'rsuite';
@@ -34,14 +35,14 @@ const ScheduleCalendar = () => {
 
       return (
         <Fragment>
-          <ul className="calendar-todo-list">
+          <CalendarTodoList>
             {displayList.map((item, index) => (
               <li key={index}>
                 <Badge /> <b>{`Calories: ${item.caloriesBurned}`}</b>
               </li>
             ))}
             {moreCount ? `${moreCount} more` : null}
-          </ul>
+          </CalendarTodoList>
           {/* {moreCount} more */}
         </Fragment>
       );
@@ -57,11 +58,11 @@ const ScheduleCalendar = () => {
   }
 
   return (
-    <div className="calories-burned-calendar-container" style={{ backgroundColor: COLOR_CODES.general["0"] }}>
+    <CaloriesBurnedCalendarContainer>
       <Typography sx={{ display: "flex", marginLeft: "1%" }} 
         variant="h6">{`Calories burned calendar`}</Typography>
       <Calendar bordered renderCell={ renderCell } onSelect={ onSelectDate } style={{ backgroundColor: COLOR_CODES.general["0"] }}/>
-    </div>
+    </CaloriesBurnedCalendarContainer>
   )
 }
 
diff --git a/src/components/signed-in/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.styles.jsx b/src/components/signed-in/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.styles.jsx
new file mode 100644
index 0000000..e4bbdce
--- /dev/null
+++ b/src/components/signed-in/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.styles.jsx
@@ -0,0 +1,22 @@
+import styled from "styled-components";
+import { COLOR_CODES } from "../../../../../../utils/constants/shared.constants";
+
+export const CalendarTodoList = styled.ul`
+  text-align: left;
+  padding: 0;
+  list-style: none;
+
+  li {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`
+
+export const CaloriesBurnedCalendarContainer = styled.div`
+  display: block;
+  justify-content: center;
+  align-items: center;
+  padding: 1%;
+  background-color: ${COLOR_CODES.general["0"]};
+`
\ 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 5830f49..835904e 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
@@ -1,4 +1,5 @@
-import "./schedule-day-info.styles.scss"
+import "./schedule-day-info.styles.jsx"
+import { CaloriesBurnedScheduleDayInfo } from "./schedule-day-info.styles.jsx"
 import { Typography, Divider } from "@mui/material"
 import { Fragment, useContext } from "react"
 import SimplePaper from "../../../../../shared/mui/paper/paper.component"
@@ -16,7 +17,7 @@ const ScheduleDayInfo = () => {
   if (!scheduledTrackedCaloriesBurnedView.length) return <Fragment/>
 
   return (
-    <div className="calories-burned-schedule-day-info">
+    <CaloriesBurnedScheduleDayInfo>
     {
       scheduledTrackedCaloriesBurnedView.map((trackedCaloriesBurned) => {
         return (
@@ -35,7 +36,7 @@ const ScheduleDayInfo = () => {
         )
       })
     }
-    </div>
+    </CaloriesBurnedScheduleDayInfo>
   )
 }
 
diff --git a/src/components/signed-in/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.styles.jsx b/src/components/signed-in/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.styles.jsx
new file mode 100644
index 0000000..c9705d4
--- /dev/null
+++ b/src/components/signed-in/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.styles.jsx
@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+export const CaloriesBurnedScheduleDayInfo = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2% 2% 2% 2%;
+`
\ No newline at end of file
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 ba54eac..6655250 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
@@ -1,4 +1,5 @@
-import "./schedule-calendar.styles.scss"
+import "./schedule-calendar.styles.jsx"
+import { CalendarTodoList, FitnessScheduleCalendarContainer } from "./schedule-calendar.styles.jsx";
 import 'rsuite/Calendar/styles/index.css';
 import { Fragment, useContext, useState } from "react";
 import { Calendar, Whisper, Popover, Badge } from 'rsuite';
@@ -7,7 +8,6 @@ import { FitnessContext } from "../../../../../../contexts/signed-in/fitness/fit
 import { COLOR_CODES } from "../../../../../../utils/constants/shared.constants";
 
 function getScheduledData(date, exercises) {
-  // const day = date.getDate();
   date = date.toISOString().split('T')[0]
 
   let scheduledExercisesForDate = []
@@ -35,14 +35,14 @@ const ScheduleCalendar = () => {
 
       return (
         <Fragment>
-          <ul className="calendar-todo-list">
+          <CalendarTodoList>
             {displayList.map((item, index) => (
               <li key={index}>
                 <Badge /> <b>{item.type}</b> - {item.name}
               </li>
             ))}
             {moreCount ? `${moreCount} more` : null}
-          </ul>
+          </CalendarTodoList>
           {/* {moreCount} more */}
         </Fragment>
       );
@@ -58,11 +58,11 @@ const ScheduleCalendar = () => {
   }
 
   return (
-    <div className="fitness-schedule-calendar-container" style={{ backgroundColor: COLOR_CODES.general["0"] }}>
+    <FitnessScheduleCalendarContainer>
       <Typography sx={{ display: "flex", marginLeft: "1%" }} 
         variant="h6">{`Exercises calendar`}</Typography>
       <Calendar bordered renderCell={ renderCell } onSelect={ onSelectDate } style={{ backgroundColor: COLOR_CODES.general["0"] }}/>
-    </div>
+    </FitnessScheduleCalendarContainer>
   )
 }
 
diff --git a/src/components/signed-in/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.styles.jsx b/src/components/signed-in/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.styles.jsx
new file mode 100644
index 0000000..a03fd6e
--- /dev/null
+++ b/src/components/signed-in/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.styles.jsx
@@ -0,0 +1,22 @@
+import styled from "styled-components";
+import { COLOR_CODES } from "../../../../../../utils/constants/shared.constants";
+
+export const CalendarTodoList = styled.ul`
+  text-align: left;
+  padding: 0;
+  list-style: none;
+
+  li {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`
+
+export const FitnessScheduleCalendarContainer = styled.div`
+  display: block;
+  justify-content: center;
+  align-items: center;
+  padding: 1%;
+  background-color: ${COLOR_CODES.general["0"]};
+`
\ 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 5f90e85..e5cac55 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
@@ -1,4 +1,7 @@
-import "./schedule-day-info.styles.scss"
+import "./schedule-day-info.styles.jsx"
+import { FitnessScheduleDayInfoContainer,
+  FitnessScheduleDayInfo
+} from "./schedule-day-info.styles.jsx";
 import { useState, useContext, Fragment } from "react"
 import { Typography } from "@mui/material";
 
@@ -57,25 +60,26 @@ const ScheduleDayInfo = () => {
   }
 
   return (
-    <div className="fitness-schedule-day-info-container">
+    <FitnessScheduleDayInfoContainer>
       <Typography sx={{ display: "flex", marginLeft: "2%", color: COLOR_CODES.general["0"] }} 
         variant="h6">{`Exercises planned`}</Typography>
 
       <SimplePaper styles={ paperStyles }>
-        <div className="ag-theme-quartz-dark fitness-schedule-day-info" // applying the grid theme
-          style={{ height: 500, width: '100%' }} // the grid will fill the size of the parent container
-          >
-          <AgGridReact 
-            rowData={ rowData } 
-            columnDefs={ columnDefs } rowSelection={ "multiple" }/>
-            <ButtonsContainer>
-              <div className="unselect-exercise-button">
-                <Button type="button" onClick={ (e) => handleUnselect(e) }>Unselect</Button>
-              </div>
-            </ButtonsContainer>
-        </div>
+        <FitnessScheduleDayInfo>
+          <div className="ag-theme-quartz-dark" // applying the grid theme
+            style={{ height: 475, width: '100%' }} // the grid will fill the size of the parent container
+            >
+            <AgGridReact 
+              rowData={ rowData } 
+              columnDefs={ columnDefs } rowSelection={ "multiple" }/>
+          </div>
+        </FitnessScheduleDayInfo>
+
+        <ButtonsContainer>
+          <Button type="button" onClick={ (e) => handleUnselect(e) }>Unselect</Button>
+        </ButtonsContainer>
       </SimplePaper>
-    </div>
+    </FitnessScheduleDayInfoContainer>
   )
 }
 
diff --git a/src/components/signed-in/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.styles.jsx b/src/components/signed-in/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.styles.jsx
new file mode 100644
index 0000000..22df740
--- /dev/null
+++ b/src/components/signed-in/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.styles.jsx
@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+export const FitnessScheduleDayInfoContainer = styled.div`
+  margin: 0% 2% 2% 2%;
+`
+
+export const FitnessScheduleDayInfo = styled.div`
+  display: block;
+  justify-content: center;
+  align-items: center;
+  padding: 1% 1% 1% 1%;
+`
\ 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 0c8add1..38fe821 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
@@ -1,4 +1,6 @@
-import "./schedule-calendar.styles.scss"
+import "./schedule-calendar.styles.jsx"
+import { CalendarTodoList, NutritionTrackerCalendarContainer } from "./schedule-calendar.styles.jsx";
+import 'rsuite/Calendar/styles/index.css';
 import 'rsuite/Calendar/styles/index.css';
 import { Fragment, useContext, useState } from "react";
 import { Calendar, Whisper, Popover, Badge } from 'rsuite';
@@ -36,14 +38,14 @@ const ScheduleCalendar = () => {
 
       return (
         <Fragment>
-          <ul className="calendar-todo-list">
+          <CalendarTodoList>
             {displayList.map((item, index) => (
               <li key={index}>
                 <Badge /> <b>{`Calories: ${item.calories}`}</b>
               </li>
             ))}
             {moreCount ? `${moreCount} more` : null}
-          </ul>
+          </CalendarTodoList>
           {/* {moreCount} more */}
         </Fragment>
       );
@@ -59,11 +61,11 @@ const ScheduleCalendar = () => {
   }
 
   return (
-    <div className="nutrition-tracker-calendar-container" style={{ backgroundColor: COLOR_CODES.general["0"] }}>
+    <NutritionTrackerCalendarContainer>
       <Typography sx={{ display: "flex", marginLeft: "1%" }} 
         variant="h6">{`Nutrition tracker calendar`}</Typography>
       <Calendar bordered renderCell={ renderCell } onSelect={ onSelectDate } style={{ backgroundColor: COLOR_CODES.general["0"] }}/>
-    </div>
+    </NutritionTrackerCalendarContainer>
   )
 }
 
diff --git a/src/components/signed-in/dashboard/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.styles.jsx b/src/components/signed-in/dashboard/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.styles.jsx
new file mode 100644
index 0000000..54e747d
--- /dev/null
+++ b/src/components/signed-in/dashboard/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.styles.jsx
@@ -0,0 +1,22 @@
+import styled from "styled-components";
+import { COLOR_CODES } from "../../../../../../utils/constants/shared.constants";
+
+export const CalendarTodoList = styled.ul`
+  text-align: left;
+  padding: 0;
+  list-style: none;
+
+  li {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`
+
+export const NutritionTrackerCalendarContainer = styled.div`
+  display: block;
+  justify-content: center;
+  align-items: center;
+  padding: 1%;
+  background-color: ${COLOR_CODES.general["0"]};
+`
\ 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 7af5be9..d752571 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
@@ -1,4 +1,5 @@
-import "./schedule-day-info.styles.scss"
+import "./schedule-day-info.styles.jsx"
+import { NutritionTrackerScheduleDayInfo } from "./schedule-day-info.styles.jsx"
 import { Typography, Divider } from "@mui/material"
 import { Fragment, useContext } from "react"
 import SimplePaper from "../../../../../shared/mui/paper/paper.component"
@@ -14,7 +15,7 @@ const ScheduleDayInfo = () => {
   const { scheduledNutritionTrackedDaysView } = useContext(NutritionTrackerContext)
 
   return (
-    <div className="nutrition-tracker-schedule-day-info">
+    <NutritionTrackerScheduleDayInfo>
       <SimplePaper styles={ paperStyles }>
         <Typography sx={{ display: "flex", justifyContent: "center" }} variant="h6">{`${scheduledNutritionTrackedDaysView.dateTracked}`}</Typography>
         <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Calories - ${scheduledNutritionTrackedDaysView.calories}`}</Typography>
@@ -47,7 +48,7 @@ const ScheduleDayInfo = () => {
           </Fragment> : null
         }
       </SimplePaper>
-    </div>
+    </NutritionTrackerScheduleDayInfo>
   )
 }
 
diff --git a/src/components/signed-in/dashboard/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.styles.jsx b/src/components/signed-in/dashboard/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.styles.jsx
new file mode 100644
index 0000000..71234a8
--- /dev/null
+++ b/src/components/signed-in/dashboard/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.styles.jsx
@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+export const NutritionTrackerScheduleDayInfo = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2% 2% 2% 2%;
+`
\ No newline at end of file
diff --git a/src/components/signed-out/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.component.jsx b/src/components/signed-out/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.component.jsx
index b81756b..26fd614 100644
--- a/src/components/signed-out/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.component.jsx
+++ b/src/components/signed-out/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.component.jsx
@@ -1,4 +1,5 @@
-import "./schedule-calendar.styles.scss"
+import "./schedule-calendar.styles.jsx"
+import { CalendarTodoList, CaloriesBurnedCalendarContainer } from "./schedule-calendar.styles.jsx";
 import 'rsuite/Calendar/styles/index.css';
 import { Fragment, useContext, useState } from "react";
 import { Calendar, Whisper, Popover, Badge } from 'rsuite';
@@ -34,14 +35,14 @@ const ScheduleCalendar = () => {
 
       return (
         <Fragment>
-          <ul className="calendar-todo-list">
+          <CalendarTodoList>
             {displayList.map((item, index) => (
               <li key={index}>
                 <Badge /> <b>{`Calories: ${item.caloriesBurned}`}</b>
               </li>
             ))}
             {moreCount ? `${moreCount} more` : null}
-          </ul>
+          </CalendarTodoList>
           {/* {moreCount} more */}
         </Fragment>
       );
@@ -57,11 +58,11 @@ const ScheduleCalendar = () => {
   }
 
   return (
-    <div className="calories-burned-calendar-container" style={{ backgroundColor: COLOR_CODES.general["0"] }}>
+    <CaloriesBurnedCalendarContainer>
       <Typography sx={{ display: "flex", marginLeft: "1%" }} 
         variant="h6">{`Calories burned calendar`}</Typography>
       <Calendar bordered renderCell={ renderCell } onSelect={ onSelectDate } style={{ backgroundColor: COLOR_CODES.general["0"] }}/>
-    </div>
+    </CaloriesBurnedCalendarContainer>
   )
 }
 
diff --git a/src/components/signed-out/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.styles.jsx b/src/components/signed-out/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.styles.jsx
new file mode 100644
index 0000000..e4bbdce
--- /dev/null
+++ b/src/components/signed-out/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.styles.jsx
@@ -0,0 +1,22 @@
+import styled from "styled-components";
+import { COLOR_CODES } from "../../../../../../utils/constants/shared.constants";
+
+export const CalendarTodoList = styled.ul`
+  text-align: left;
+  padding: 0;
+  list-style: none;
+
+  li {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`
+
+export const CaloriesBurnedCalendarContainer = styled.div`
+  display: block;
+  justify-content: center;
+  align-items: center;
+  padding: 1%;
+  background-color: ${COLOR_CODES.general["0"]};
+`
\ No newline at end of file
diff --git a/src/components/signed-out/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.component.jsx b/src/components/signed-out/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.component.jsx
index 0ef2e82..9597f26 100644
--- a/src/components/signed-out/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.component.jsx
+++ b/src/components/signed-out/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.component.jsx
@@ -1,4 +1,5 @@
-import "./schedule-day-info.styles.scss"
+import "./schedule-day-info.styles.jsx"
+import { CaloriesBurnedScheduleDayInfo } from "./schedule-day-info.styles.jsx"
 import { Typography, Divider } from "@mui/material"
 import { Fragment, useContext } from "react"
 import SimplePaper from "../../../../../shared/mui/paper/paper.component"
@@ -16,7 +17,7 @@ const ScheduleDayInfo = () => {
   if (!scheduledTrackedCaloriesBurnedView.length) return <Fragment/>
 
   return (
-    <div className="calories-burned-schedule-day-info">
+    <CaloriesBurnedScheduleDayInfo>
     {
       scheduledTrackedCaloriesBurnedView.map((trackedCaloriesBurned) => {
         return (
@@ -35,7 +36,7 @@ const ScheduleDayInfo = () => {
         )
       })
     }
-    </div>
+    </CaloriesBurnedScheduleDayInfo>
   )
 }
 
diff --git a/src/components/signed-out/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.styles.jsx b/src/components/signed-out/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.styles.jsx
new file mode 100644
index 0000000..c9705d4
--- /dev/null
+++ b/src/components/signed-out/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.styles.jsx
@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+export const CaloriesBurnedScheduleDayInfo = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2% 2% 2% 2%;
+`
\ No newline at end of file
diff --git a/src/components/signed-out/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.component.jsx b/src/components/signed-out/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.component.jsx
index 3a207a0..12ee34d 100644
--- a/src/components/signed-out/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.component.jsx
+++ b/src/components/signed-out/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.component.jsx
@@ -1,4 +1,5 @@
-import "./schedule-calendar.styles.scss"
+import "./schedule-calendar.styles.jsx"
+import { CalendarTodoList, FitnessScheduleCalendarContainer } from "./schedule-calendar.styles.jsx";
 import 'rsuite/Calendar/styles/index.css';
 import { Fragment, useContext, useState } from "react";
 import { Calendar, Whisper, Popover, Badge } from 'rsuite';
@@ -34,14 +35,14 @@ const ScheduleCalendar = () => {
 
       return (
         <Fragment>
-          <ul className="calendar-todo-list">
+          <CalendarTodoList>
             {displayList.map((item, index) => (
               <li key={index}>
                 <Badge /> <b>{item.type}</b> - {item.name}
               </li>
             ))}
             {moreCount ? `${moreCount} more` : null}
-          </ul>
+          </CalendarTodoList>
           {/* {moreCount} more */}
         </Fragment>
       );
@@ -57,11 +58,11 @@ const ScheduleCalendar = () => {
   }
 
   return (
-    <div className="fitness-schedule-calendar-container" style={{ backgroundColor: COLOR_CODES.general["0"] }}>
+    <FitnessScheduleCalendarContainer>
       <Typography sx={{ display: "flex", marginLeft: "1%" }} 
         variant="h6">{`Exercises calendar`}</Typography>
       <Calendar bordered renderCell={ renderCell } onSelect={ onSelectDate } style={{ backgroundColor: COLOR_CODES.general["0"] }}/>
-    </div>
+    </FitnessScheduleCalendarContainer>
   )
 }
 
diff --git a/src/components/signed-out/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.styles.jsx b/src/components/signed-out/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.styles.jsx
new file mode 100644
index 0000000..a03fd6e
--- /dev/null
+++ b/src/components/signed-out/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.styles.jsx
@@ -0,0 +1,22 @@
+import styled from "styled-components";
+import { COLOR_CODES } from "../../../../../../utils/constants/shared.constants";
+
+export const CalendarTodoList = styled.ul`
+  text-align: left;
+  padding: 0;
+  list-style: none;
+
+  li {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`
+
+export const FitnessScheduleCalendarContainer = styled.div`
+  display: block;
+  justify-content: center;
+  align-items: center;
+  padding: 1%;
+  background-color: ${COLOR_CODES.general["0"]};
+`
\ No newline at end of file
diff --git a/src/components/signed-out/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.component.jsx b/src/components/signed-out/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.component.jsx
index 815a283..f2efacc 100644
--- a/src/components/signed-out/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.component.jsx
+++ b/src/components/signed-out/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.component.jsx
@@ -1,4 +1,7 @@
-import "./schedule-day-info.styles.scss"
+import "./schedule-day-info.styles.jsx"
+import { FitnessScheduleDayInfoContainer,
+  FitnessScheduleDayInfo
+} from "./schedule-day-info.styles.jsx";
 import { useState, useContext, Fragment } from "react"
 import { Typography } from "@mui/material";
 
@@ -14,7 +17,7 @@ import { ButtonsContainer } from "../../../../../shared/button/button.styles";
 
 const paperStyles = {
   backgroundColor: COLOR_CODES.general["8"],
-  height: COMMON_SPACING.calendarDayInfo.height
+  height: COMMON_SPACING.calendarDayInfo.height,
 }
 
 const ScheduleDayInfo = () => {
@@ -57,25 +60,26 @@ const ScheduleDayInfo = () => {
   }
 
   return (
-    <div className="fitness-schedule-day-info-container">
+    <FitnessScheduleDayInfoContainer>
       <Typography sx={{ display: "flex", marginLeft: "2%", color: COLOR_CODES.general["0"] }} 
         variant="h6">{`Exercises planned`}</Typography>
 
       <SimplePaper styles={ paperStyles }>
-        <div className="ag-theme-quartz-dark fitness-schedule-day-info" // applying the grid theme
-          style={{ height: 500, width: '100%' }} // the grid will fill the size of the parent container
-          >
-          <AgGridReact 
-            rowData={ rowData } 
-            columnDefs={ columnDefs } rowSelection={ "multiple" }/>
-            <ButtonsContainer>
-              <div className="unselect-exercise-button">
-                <Button type="button" onClick={ (e) => handleUnselect(e) }>Unselect</Button>
-              </div>
-            </ButtonsContainer>
-        </div>
+        <FitnessScheduleDayInfo>
+          <div className="ag-theme-quartz-dark" // applying the grid theme
+            style={{ height: 475, width: '100%' }} // the grid will fill the size of the parent container
+            >
+            <AgGridReact 
+              rowData={ rowData } 
+              columnDefs={ columnDefs } rowSelection={ "multiple" }/>
+          </div>
+        </FitnessScheduleDayInfo>
+
+        <ButtonsContainer>
+          <Button type="button" onClick={ (e) => handleUnselect(e) }>Unselect</Button>
+        </ButtonsContainer>
       </SimplePaper>
-    </div>
+    </FitnessScheduleDayInfoContainer>
   )
 }
 
diff --git a/src/components/signed-out/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.styles.jsx b/src/components/signed-out/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.styles.jsx
new file mode 100644
index 0000000..22df740
--- /dev/null
+++ b/src/components/signed-out/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.styles.jsx
@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+export const FitnessScheduleDayInfoContainer = styled.div`
+  margin: 0% 2% 2% 2%;
+`
+
+export const FitnessScheduleDayInfo = styled.div`
+  display: block;
+  justify-content: center;
+  align-items: center;
+  padding: 1% 1% 1% 1%;
+`
\ No newline at end of file
diff --git a/src/components/signed-out/dashboard/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.component.jsx b/src/components/signed-out/dashboard/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.component.jsx
index 0bacfbc..b28b4ee 100644
--- a/src/components/signed-out/dashboard/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.component.jsx
+++ b/src/components/signed-out/dashboard/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.component.jsx
@@ -1,4 +1,5 @@
-import "./schedule-calendar.styles.scss"
+import "./schedule-calendar.styles.jsx"
+import { CalendarTodoList, NutritionTrackerCalendarContainer } from "./schedule-calendar.styles.jsx";
 import 'rsuite/Calendar/styles/index.css';
 import { Fragment, useState } from "react";
 import { Calendar, Whisper, Popover, Badge } from 'rsuite';
@@ -38,14 +39,14 @@ const ScheduleCalendar = () => {
 
       return (
         <Fragment>
-          <ul className="calendar-todo-list">
+          <CalendarTodoList>
             {displayList.map((item, index) => (
               <li key={index}>
                 <Badge /> <b>{`Calories: ${item.calories}`}</b>
               </li>
             ))}
             {moreCount ? `${moreCount} more` : null}
-          </ul>
+          </CalendarTodoList>
           {/* {moreCount} more */}
         </Fragment>
       );
@@ -61,11 +62,11 @@ const ScheduleCalendar = () => {
   }
 
   return (
-    <div className="nutrition-tracker-calendar-container" style={{ backgroundColor: COLOR_CODES.general["0"] }}>
+    <NutritionTrackerCalendarContainer>
       <Typography sx={{ display: "flex", marginLeft: "1%" }} 
         variant="h6">{`Nutrition tracker calendar`}</Typography>
       <Calendar bordered renderCell={ renderCell } onSelect={ onSelectDate } style={{ backgroundColor: COLOR_CODES.general["0"] }}/>
-    </div>
+    </NutritionTrackerCalendarContainer>
   )
 }
 
diff --git a/src/components/signed-out/dashboard/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.styles.jsx b/src/components/signed-out/dashboard/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.styles.jsx
new file mode 100644
index 0000000..54e747d
--- /dev/null
+++ b/src/components/signed-out/dashboard/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.styles.jsx
@@ -0,0 +1,22 @@
+import styled from "styled-components";
+import { COLOR_CODES } from "../../../../../../utils/constants/shared.constants";
+
+export const CalendarTodoList = styled.ul`
+  text-align: left;
+  padding: 0;
+  list-style: none;
+
+  li {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`
+
+export const NutritionTrackerCalendarContainer = styled.div`
+  display: block;
+  justify-content: center;
+  align-items: center;
+  padding: 1%;
+  background-color: ${COLOR_CODES.general["0"]};
+`
\ No newline at end of file
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 7a63c3d..dc132b6 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
@@ -1,4 +1,5 @@
-import "./schedule-day-info.styles.scss"
+import "./schedule-day-info.styles.jsx"
+import { NutritionTrackerScheduleDayInfo } from "./schedule-day-info.styles.jsx"
 import { useSelector } from "react-redux"
 import { selectScheduledNutritionTrackedDaysView } from "../../../../../../store/signed-out/nutrition-tracker/nutrition-tracker.selector"
 import { Typography, Divider } from "@mui/material"
@@ -15,7 +16,7 @@ const ScheduleDayInfo = () => {
   const scheduledNutritionTrackedDaysView = useSelector(selectScheduledNutritionTrackedDaysView)
 
   return (
-    <div className="nutrition-tracker-schedule-day-info">
+    <NutritionTrackerScheduleDayInfo>
       <SimplePaper styles={ paperStyles }>
         <Typography sx={{ display: "flex", justifyContent: "center" }} variant="h6">{`${scheduledNutritionTrackedDaysView.dateTracked}`}</Typography>
         <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Calories - ${scheduledNutritionTrackedDaysView.calories}`}</Typography>
@@ -48,7 +49,7 @@ const ScheduleDayInfo = () => {
           </Fragment> : null
         }
       </SimplePaper>
-    </div>
+    </NutritionTrackerScheduleDayInfo>
   )
 }
 
diff --git a/src/components/signed-out/dashboard/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.styles.jsx b/src/components/signed-out/dashboard/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.styles.jsx
new file mode 100644
index 0000000..71234a8
--- /dev/null
+++ b/src/components/signed-out/dashboard/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.styles.jsx
@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+export const NutritionTrackerScheduleDayInfo = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2% 2% 2% 2%;
+`
\ No newline at end of file
diff --git a/src/components/signed-out/nutrition-tracker/calories-graph/calories-graph.component.jsx b/src/components/signed-out/nutrition-tracker/calories-graph/calories-graph.component.jsx
index 516cac4..b29ccb4 100644
--- a/src/components/signed-out/nutrition-tracker/calories-graph/calories-graph.component.jsx
+++ b/src/components/signed-out/nutrition-tracker/calories-graph/calories-graph.component.jsx
@@ -1,4 +1,5 @@
-import "./calories-graph.styles.scss"
+import "./calories-graph.styles.jsx"
+import { NutritionTrackerCaloriesGraphContainer } from "./calories-graph.styles.jsx"
 import ReactApexChart from "react-apexcharts"
 import { useContext } from "react"
 // import { NutritionTrackerContext } from "../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context"
@@ -6,6 +7,12 @@ import { useSelector } from "react-redux"
 import { selectNutritionTrackedDaysView } from "../../../../store/signed-out/nutrition-tracker/nutrition-tracker.selector"
 
 import { GRAPH_FIELDS } from "../../../../utils/constants/nutrition-tracker.constants"
+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["1"]
+}
 
 const CaloriesGraph = () => {
   // const { nutritionTrackedDaysView } = useContext(NutritionTrackerContext)
@@ -28,7 +35,7 @@ const CaloriesGraph = () => {
   const options = {
     chart: {
       type: 'area',
-      height: 500,
+      height: COMMON_SPACING.lineChart.height,
       zoom: {
         enabled: true
       }
@@ -60,9 +67,12 @@ const CaloriesGraph = () => {
   };
 
   return (
-    <div className="nutrition-tracker-calories-graph-container">
-      <ReactApexChart options={ options } series={ series } type="area" height={ 500 } width={ "90%" }/>
-    </div>
+    <NutritionTrackerCaloriesGraphContainer>
+      <SimplePaper styles={ paperStyles }>
+        <ReactApexChart options={ options } series={ series } type="area" 
+          height={ COMMON_SPACING.lineChart.height } width={ COMMON_SPACING.lineChart.width }/>
+      </SimplePaper>
+    </NutritionTrackerCaloriesGraphContainer>
   )
 }
 
diff --git a/src/components/signed-out/nutrition-tracker/calories-graph/calories-graph.styles.jsx b/src/components/signed-out/nutrition-tracker/calories-graph/calories-graph.styles.jsx
new file mode 100644
index 0000000..e2f07a1
--- /dev/null
+++ b/src/components/signed-out/nutrition-tracker/calories-graph/calories-graph.styles.jsx
@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+export const NutritionTrackerCaloriesGraphContainer = 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-out/nutrition-tracker/nutrition-tracker-filter/nutrition-tracker-filter.component.jsx b/src/components/signed-out/nutrition-tracker/nutrition-tracker-filter/nutrition-tracker-filter.component.jsx
index d26925d..d0c85fa 100644
--- a/src/components/signed-out/nutrition-tracker/nutrition-tracker-filter/nutrition-tracker-filter.component.jsx
+++ b/src/components/signed-out/nutrition-tracker/nutrition-tracker-filter/nutrition-tracker-filter.component.jsx
@@ -1,17 +1,26 @@
 import Button from "../../../shared/button/button.component";
 import FormInput from "../../../shared/form-input/form-input.component";
-import "./nutrition-tracker-filter.styles.scss"
+import "./nutrition-tracker-filter.styles.jsx"
+import { NutritionTrackerFilterContainer, FilterButtonsContainer } from "./nutrition-tracker-filter.styles.jsx"
 
 import { useState, useContext } from "react"
 // import { NutritionTrackerContext } from "../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context";
 import { useDispatch } from "react-redux"
 import { filterDayTracked, clearDayTrackedFilter } from "../../../../store/signed-out/nutrition-tracker/nutrition-tracker.action";
+import { Typography } from "@mui/material";
+import SimplePaper from "../../../shared/mui/paper/paper.component.jsx";
+import { COLOR_CODES, COMMON_SPACING } from "../../../../utils/constants/shared.constants.js";
 
 const defaultFormFields = {
   filterStartDate: "",
   filterEndDate: ""
 }
 
+const paperStyles = {
+  backgroundColor: COLOR_CODES.general["1"],
+  width: COMMON_SPACING.filter.width
+}
+
 const NutritionTrackerFilter = () => {
   const [formFields, setFormFields] = useState(defaultFormFields)
   // const { filterDayTracked, clearDayTrackedFilter } = useContext(NutritionTrackerContext)
@@ -45,21 +54,23 @@ const NutritionTrackerFilter = () => {
   }
 
   return (
-    <div className="nutrition-tracker-filter-container">
-      <form onSubmit={ handleSubmit }>
-        <h4>Filter by date range</h4>
-        <FormInput type="date" onChange={ handleChange }
-                    name="filterStartDate" value={ formFields.filterStartDate }></FormInput>
-        
-        <FormInput type="date" onChange={ handleChange }
-                    name="filterEndDate" value={ formFields.filterEndDate }></FormInput>
-        
-        <div className="buttons-container">
-          <Button type="submit">Filter</Button>
-          <Button type="button" onClick={ handleClearFilter }>Clear</Button>
-        </div>
-      </form>
-    </div>
+    <NutritionTrackerFilterContainer>
+      <SimplePaper styles={ paperStyles }>
+        <form onSubmit={ handleSubmit }>
+          <Typography variant="h6">Filter by date range</Typography>
+          <FormInput type="date" onChange={ handleChange }
+                      name="filterStartDate" value={ formFields.filterStartDate }></FormInput>
+          
+          <FormInput type="date" onChange={ handleChange }
+                      name="filterEndDate" value={ formFields.filterEndDate }></FormInput>
+          
+          <FilterButtonsContainer>
+            <Button type="submit">Filter</Button>
+            <Button type="button" onClick={ handleClearFilter }>Clear</Button>
+          </FilterButtonsContainer>
+        </form>
+      </SimplePaper>
+    </NutritionTrackerFilterContainer>
   )
 }
 
diff --git a/src/components/signed-out/nutrition-tracker/nutrition-tracker-filter/nutrition-tracker-filter.styles.jsx b/src/components/signed-out/nutrition-tracker/nutrition-tracker-filter/nutrition-tracker-filter.styles.jsx
new file mode 100644
index 0000000..ac1fe29
--- /dev/null
+++ b/src/components/signed-out/nutrition-tracker/nutrition-tracker-filter/nutrition-tracker-filter.styles.jsx
@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+export const NutritionTrackerFilterContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2%;
+`
+
+export const FilterButtonsContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
\ No newline at end of file
diff --git a/src/components/signed-out/nutrition-tracker/nutrition-tracker-table/nutrition-tracker-table.component.jsx b/src/components/signed-out/nutrition-tracker/nutrition-tracker-table/nutrition-tracker-table.component.jsx
index 2521ea5..5a399e8 100644
--- a/src/components/signed-out/nutrition-tracker/nutrition-tracker-table/nutrition-tracker-table.component.jsx
+++ b/src/components/signed-out/nutrition-tracker/nutrition-tracker-table/nutrition-tracker-table.component.jsx
@@ -1,4 +1,5 @@
-import "./nutrition-tracker-table.styles.scss"
+import "./nutrition-tracker-table.styles.jsx"
+import { FilterNutritionTrackerTableContainer, FilterButtonsContainer } from "./nutrition-tracker-table.styles.jsx";
 import { useContext, useState, useRef } from "react"
 
 import { AgGridReact } from 'ag-grid-react'; // React Data Grid Component
@@ -11,6 +12,15 @@ import { selectNutritionTrackedDaysView, selectNutritionTrackedDays } from "../.
 import { removeDayTracked, clearDayTrackedFilter } from "../../../../store/signed-out/nutrition-tracker/nutrition-tracker.action";
 
 import Button from "../../../shared/button/button.component";
+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["8"],
+  margin: "0% 2% 0% 2%",
+  height: COMMON_SPACING.filterTable.height
+}
 
 const NutritionTrackerTable = () => {
   const gridRef = useRef()
@@ -62,17 +72,29 @@ const NutritionTrackerTable = () => {
 
   return (
     // wrapping container with theme & size
-    <div className="ag-theme-quartz-dark filter-nutrition-tracker-table-container" // applying the grid theme
-      style={{ height: 700, width: '85%' }} // the grid will fill the size of the parent container
-      >
-      <h3>Filter or remove tracked date</h3>
+    <SimplePaper styles={ paperStyles }>
+      <Typography sx={{ color: COLOR_CODES.general["5"] }} variant="h6">Filter or remove tracked date</Typography>
+      <FilterNutritionTrackerTableContainer>
+        <div className="ag-theme-quartz-dark" // applying the grid theme
+          style={{ height: 475, width: COMMON_SPACING.table.width }} // the grid will fill the size of the parent container
+          >
 
-      <AgGridReact rowData={ rowData } columnDefs={ columnDefs } ref={ gridRef } rowSelection={ "single" }/>
-      <div className="remove-tracked-date-selected-button">
-        <Button onClick={ (e) => onRemoveSelected(e) }>Remove Selected</Button>
-        <Button type="button" onClick={ onClearFilter }>Clear Filter</Button>
-      </div>
-    </div>
+          <AgGridReact rowData={ rowData } columnDefs={ columnDefs } ref={ gridRef } rowSelection={ "single" }/>
+          <FilterButtonsContainer>
+            <div className="container">
+              <div className="row justify-content-left align-items-center">
+                <div className="col-sm-12 col-md-6 col-lg-6">
+                  <Button onClick={ (e) => onRemoveSelected(e) }>Remove Selected</Button>
+                </div>
+                <div className="col-sm-12 col-md-6 col-lg-6">
+                  <Button type="button" onClick={ onClearFilter }>Clear Filter</Button>
+                </div>
+              </div>
+            </div>
+          </FilterButtonsContainer>
+        </div>
+      </FilterNutritionTrackerTableContainer>
+    </SimplePaper>
   )
 }
 
diff --git a/src/components/signed-out/nutrition-tracker/nutrition-tracker-table/nutrition-tracker-table.styles.jsx b/src/components/signed-out/nutrition-tracker/nutrition-tracker-table/nutrition-tracker-table.styles.jsx
new file mode 100644
index 0000000..8120ab7
--- /dev/null
+++ b/src/components/signed-out/nutrition-tracker/nutrition-tracker-table/nutrition-tracker-table.styles.jsx
@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export const FilterNutritionTrackerTableContainer = styled.div`
+  display: block;
+  justify-content: center;
+  align-items: center;
+  margin: 0% 0% 3% 0%;
+  padding: 2%;
+`
+
+export const FilterButtonsContainer = styled.div`
+  margin: 1%;
+`
\ No newline at end of file
diff --git a/src/components/signed-out/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.component.jsx b/src/components/signed-out/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.component.jsx
index ca12a94..6b894d6 100644
--- a/src/components/signed-out/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.component.jsx
+++ b/src/components/signed-out/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.component.jsx
@@ -1,4 +1,5 @@
-import "./schedule-calendar.styles.scss"
+import "./schedule-calendar.styles.jsx"
+import { CalendarTodoList, NutritionTrackerCalendarContainer } from "./schedule-calendar.styles.jsx";
 import 'rsuite/Calendar/styles/index.css';
 import { Fragment, useContext, useState } from "react";
 import { Calendar, Whisper, Popover, Badge } from 'rsuite';
@@ -38,14 +39,14 @@ const ScheduleCalendar = () => {
 
       return (
         <Fragment>
-          <ul className="calendar-todo-list">
+          <CalendarTodoList>
             {displayList.map((item, index) => (
               <li key={index}>
                 <Badge /> <b>{`Calories: ${item.calories}`}</b>
               </li>
             ))}
             {moreCount ? `${moreCount} more` : null}
-          </ul>
+          </CalendarTodoList>
           {/* {moreCount} more */}
         </Fragment>
       );
@@ -61,11 +62,11 @@ const ScheduleCalendar = () => {
   }
 
   return (
-    <div className="nutrition-tracker-schedule-calendar-container" style={{ backgroundColor: COLOR_CODES.general["0"] }}>
+    <NutritionTrackerCalendarContainer>
       <Typography sx={{ display: "flex", marginLeft: "1%" }} 
         variant="h6">{`Nutrition tracker calendar`}</Typography>
       <Calendar bordered renderCell={ renderCell } onSelect={ onSelectDate } style={{ backgroundColor: COLOR_CODES.general["0"] }}/>
-    </div>
+    </NutritionTrackerCalendarContainer>
   )
 }
 
diff --git a/src/components/signed-out/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.styles.jsx b/src/components/signed-out/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.styles.jsx
new file mode 100644
index 0000000..91d1378
--- /dev/null
+++ b/src/components/signed-out/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.styles.jsx
@@ -0,0 +1,23 @@
+import styled from "styled-components";
+import { COLOR_CODES } from "../../../../../utils/constants/shared.constants";
+
+export const CalendarTodoList = styled.ul`
+  text-align: left;
+  padding: 0;
+  list-style: none;
+
+  li {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`
+
+export const NutritionTrackerCalendarContainer = styled.div`
+  display: block;
+  justify-content: center;
+  align-items: center;
+  padding: 1%;
+  margin: 1% 1% 0% 1%;
+  background-color: ${COLOR_CODES.general["0"]};
+`
\ No newline at end of file
diff --git a/src/components/signed-out/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.styles.scss b/src/components/signed-out/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.styles.scss
index 2fc760b..acf7906 100644
--- a/src/components/signed-out/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.styles.scss
+++ b/src/components/signed-out/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-out/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.component.jsx b/src/components/signed-out/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.component.jsx
index 9354993..f5ba4d9 100644
--- a/src/components/signed-out/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.component.jsx
+++ b/src/components/signed-out/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.component.jsx
@@ -1,21 +1,22 @@
-import "./schedule-day-info.styles.scss"
+import "./schedule-day-info.styles.jsx"
+import { NutritionTrackerScheduleDayInfo } from "./schedule-day-info.styles.jsx"
 import { useSelector } from "react-redux"
 import { selectScheduledNutritionTrackedDaysView } from "../../../../../store/signed-out/nutrition-tracker/nutrition-tracker.selector"
 import { Typography, Divider } from "@mui/material"
 import { Fragment } 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"
 
 const paperStyles = {
   backgroundColor: COLOR_CODES.general["1"],
-  width: 400
+  width: COMMON_SPACING.calendarDayInfo.width
 }
 
 const ScheduleDayInfo = () => {
   const scheduledNutritionTrackedDaysView = useSelector(selectScheduledNutritionTrackedDaysView)
 
   return (
-    <div className="nutrition-tracker-schedule-day-info">
+    <NutritionTrackerScheduleDayInfo>
       <SimplePaper styles={ paperStyles }>
         <Typography sx={{ display: "flex", justifyContent: "center" }} variant="h6">{`${scheduledNutritionTrackedDaysView.dateTracked}`}</Typography>
         <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Calories - ${scheduledNutritionTrackedDaysView.calories}`}</Typography>
@@ -24,7 +25,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>
@@ -36,18 +37,19 @@ 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>
                 )
               })
             }
           </Fragment> : null
         }
       </SimplePaper>
-    </div>
+    </NutritionTrackerScheduleDayInfo>
   )
 }
 
diff --git a/src/components/signed-out/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.styles.jsx b/src/components/signed-out/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.styles.jsx
new file mode 100644
index 0000000..71234a8
--- /dev/null
+++ b/src/components/signed-out/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.styles.jsx
@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+export const NutritionTrackerScheduleDayInfo = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2% 2% 2% 2%;
+`
\ No newline at end of file
diff --git a/src/components/signed-out/nutrition-tracker/summary-graph/summary-graph.component.jsx b/src/components/signed-out/nutrition-tracker/summary-graph/summary-graph.component.jsx
index 9224a85..fb9a7ed 100644
--- a/src/components/signed-out/nutrition-tracker/summary-graph/summary-graph.component.jsx
+++ b/src/components/signed-out/nutrition-tracker/summary-graph/summary-graph.component.jsx
@@ -1,13 +1,20 @@
 import { Fragment, useContext, useState, Component } from "react";
 import ReactApexChart from 'react-apexcharts'
 
-import "./summary-graph.styles.scss";
-
+import "./summary-graph.styles.jsx";
+import { SummaryGraphContainer } from "./summary-graph.styles.jsx";
 // import { NutritionTrackerContext } from "../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context";
 import { useSelector } from "react-redux"
 import { selectNutritionTrackedDaysView } from "../../../../store/signed-out/nutrition-tracker/nutrition-tracker.selector";
 
 import { GRAPH_FIELDS } from "../../../../utils/constants/nutrition-tracker.constants";
+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["1"]
+}
 
 const SummaryGraph = () => {
   // const { nutritionTrackedDaysView } = useContext(NutritionTrackerContext);
@@ -89,12 +96,13 @@ const SummaryGraph = () => {
   };
 
   return (
-    <Fragment>
-      <h5>Consumption Timeline</h5>
-      <div className="summary-graph-container">
-        <ReactApexChart options={ options } series={ series } type="bar" height={ 350 } width={ 1000 }/>
-      </div>
-    </Fragment>
+    <SummaryGraphContainer>
+      <SimplePaper styles={ paperStyles }>
+        <Typography variant="body1">Consumption timeline</Typography>
+          <ReactApexChart options={ options } series={ series } type="bar" 
+            height={ COMMON_SPACING.barChart.height } width={ COMMON_SPACING.barChart.width }/>
+      </SimplePaper>
+    </SummaryGraphContainer>
   )
 }
 
diff --git a/src/components/signed-out/nutrition-tracker/summary-graph/summary-graph.styles.jsx b/src/components/signed-out/nutrition-tracker/summary-graph/summary-graph.styles.jsx
new file mode 100644
index 0000000..5f6060a
--- /dev/null
+++ b/src/components/signed-out/nutrition-tracker/summary-graph/summary-graph.styles.jsx
@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+export const SummaryGraphContainer = 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-out/nutrition-tracker/summary/summary.component.jsx b/src/components/signed-out/nutrition-tracker/summary/summary.component.jsx
index 2907d4a..7c8db2f 100644
--- a/src/components/signed-out/nutrition-tracker/summary/summary.component.jsx
+++ b/src/components/signed-out/nutrition-tracker/summary/summary.component.jsx
@@ -1,10 +1,15 @@
 import { useContext } from "react";
 
-import "./summary.styles.scss";
+import "./summary.styles.jsx";
+import { NutritionTrackerSummary } from "./summary.styles.jsx";
 
 // import { NutritionTrackerContext } from "../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context";
 import { useSelector } from "react-redux"
 import { selectNutritionTrackedDaysSummary } from "../../../../store/signed-out/nutrition-tracker/nutrition-tracker.selector";
+import { Typography } from "@mui/material";
+
+import SimplePaper from "../../../shared/mui/paper/paper.component.jsx";
+import { COLOR_CODES, COMMON_SPACING } from "../../../../utils/constants/shared.constants.js";
 
 const date = new Date();
 let currentDay= String(date.getDate()).padStart(2, '0');
@@ -12,19 +17,26 @@ let currentMonth = String(date.getMonth()+1).padStart(2,"0");
 let currentYear = date.getFullYear();
 let currentDate = `${currentYear}-${currentMonth}-${currentDay}`;
 
+const paperStyles = {
+  backgroundColor: COLOR_CODES.general["1"],
+  width: COMMON_SPACING.summaryInfoCard.width
+}
+
 const Summary = () => {
   // const { nutritionTrackedDaysSummary } = useContext(NutritionTrackerContext);
   const nutritionTrackedDaysSummary = useSelector(selectNutritionTrackedDaysSummary)
 
   return (
-    <div className="nutrition-tracker-summary">
-      <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>
-    </div>
+    <NutritionTrackerSummary>
+      <SimplePaper styles={ paperStyles }>
+        <Typography variant="h6">{`As of ${currentDate}`}</Typography>
+
+        <Typography variant="body1">{`Average daily calories : ${nutritionTrackedDaysSummary.averageDailyCaloriesConsumption}`}</Typography>
+        <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>
+      </SimplePaper>
+    </NutritionTrackerSummary>
   );
 };
 
diff --git a/src/components/signed-out/nutrition-tracker/summary/summary.styles.jsx b/src/components/signed-out/nutrition-tracker/summary/summary.styles.jsx
new file mode 100644
index 0000000..77fff55
--- /dev/null
+++ b/src/components/signed-out/nutrition-tracker/summary/summary.styles.jsx
@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+export const NutritionTrackerSummary = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 2%;
+  text-align: center;
+`
\ No newline at end of file
diff --git a/src/components/signed-out/nutrition-tracker/top-search/top-search.component.jsx b/src/components/signed-out/nutrition-tracker/top-search/top-search.component.jsx
index ead8cbe..b8d0795 100644
--- a/src/components/signed-out/nutrition-tracker/top-search/top-search.component.jsx
+++ b/src/components/signed-out/nutrition-tracker/top-search/top-search.component.jsx
@@ -1,39 +1,42 @@
 import React from "react";
 
-import "./top-search.styles.scss";
+import "./top-search.styles.jsx";
+import { NutritionTrackerSummaryFilterContainer,
+  SearchDaysSummaryContainer, NutritionTrackerSummaryGraphTableContainer
+} from "./top-search.styles.jsx";
 
 import SearchDays from "../search-days/search-days.component";
 import ConsumptionInfo from "../consumption-info/consumption-info.component";
-import Summary from "../summary/summary.component";
+
 import NutritionTrackerFilter from "../nutrition-tracker-filter/nutrition-tracker-filter.component";
 import SummaryGraph from "../summary-graph/summary-graph.component";
 import CaloriesGraph from "../calories-graph/calories-graph.component";
 import NutritionTrackerTable from "../nutrition-tracker-table/nutrition-tracker-table.component";
+import { Typography } from "@mui/material";
+import { COLOR_CODES } from "../../../../utils/constants/shared.constants.js";
   
 const TopSearch = () => {
   return (
-    <div className="search-days-summary-container">
-      <div className="nutrition-tracker-summary-filter-container">
-        <Summary></Summary>
+    <SearchDaysSummaryContainer>
+      <NutritionTrackerSummaryFilterContainer>
         <NutritionTrackerFilter></NutritionTrackerFilter>
-      </div>
+      </NutritionTrackerSummaryFilterContainer>
 
-      <div className="calories-burned-summary-separator-container">
-        <hr className="rounded"/>
-      </div>
+      <br/>
 
-      <h3 className="nutrition-tracked-summary-header">Tracked Summary</h3>
+      <Typography sx={{ display: "flex", justifyContent: "center", color: COLOR_CODES.general["0"] }} 
+        variant="h6">Filtered results</Typography>
 
-      <div className="nutrition-tracked-summary-graph-table-container">
+      <NutritionTrackerSummaryGraphTableContainer>
         <CaloriesGraph></CaloriesGraph>
         <SummaryGraph></SummaryGraph>
         <NutritionTrackerTable></NutritionTrackerTable>
-      </div>
+      </NutritionTrackerSummaryGraphTableContainer>
 
       {/* <div className="search-days-nutrition-tracker-container">
         <SearchDays></SearchDays>
       </div> */}
-    </div>
+    </SearchDaysSummaryContainer>
   );
 };
 
diff --git a/src/components/signed-out/nutrition-tracker/top-search/top-search.styles.jsx b/src/components/signed-out/nutrition-tracker/top-search/top-search.styles.jsx
new file mode 100644
index 0000000..2302722
--- /dev/null
+++ b/src/components/signed-out/nutrition-tracker/top-search/top-search.styles.jsx
@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+export const NutritionTrackerSummaryFilterContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
+export const SearchDaysSummaryContainer = styled.div`
+  display: block;
+  justify-content: center;
+  align-items: center;
+`
+
+export const NutritionTrackerSummaryGraphTableContainer = styled.div`
+  display: block;
+  justify-content: center;
+  align-items: center;
+`
\ No newline at end of file
diff --git a/src/pages/signed-out/nutrition-tracker/nutrition-tracker.component.jsx b/src/pages/signed-out/nutrition-tracker/nutrition-tracker.component.jsx
index 97916a9..2b26f80 100644
--- a/src/pages/signed-out/nutrition-tracker/nutrition-tracker.component.jsx
+++ b/src/pages/signed-out/nutrition-tracker/nutrition-tracker.component.jsx
@@ -2,7 +2,8 @@ import React, { Component, useEffect, Fragment } from "react";
 
 import Summary from "../../../components/signed-out/nutrition-tracker/summary/summary.component";
 
-import "./nutrition-tracker.styles.scss";
+import "./nutrition-tracker.styles.jsx";
+import { NutritionTrackerContainer, UpdateConsumptionContainer } from "./nutrition-tracker.styles";
 import SearchDays from "../../../components/signed-out/nutrition-tracker/search-days/search-days.component";
 import UpdateConsumptionForm from "../../../components/signed-out/nutrition-tracker/update-consumption-form/update-consumption-form.component";
 import ConsumptionInfo from "../../../components/signed-out/nutrition-tracker/consumption-info/consumption-info.component";
@@ -21,6 +22,13 @@ import { calculateSummary } from "../../../utils/calculations/nutrition-tracker.
 import ScheduleCalendar from "../../../components/signed-out/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.component";
 import { Divider } from "rsuite";
 import ScheduleDayInfo from "../../../components/signed-out/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.component";
+import { Typography } from "@mui/material";
+
+import SummarizeIcon from '@mui/icons-material/Summarize';
+import EditIcon from '@mui/icons-material/Edit';
+import FilterAltIcon from '@mui/icons-material/FilterAlt';
+import ItemTabs from "../../../components/shared/mui/tabs/tabs.component";
+
 
 const NutritionTracker = () => {
   // const { nutritionTrackedDays } = useContext(NutritionTrackerContext);
@@ -68,37 +76,85 @@ const NutritionTracker = () => {
     }
   }, [nutritionTrackedDays, selectedNutritionTrackedDay, dispatch])
 
+  let tabList = []
+  let panelList = []
+  
+  if (nutritionTrackedDays && nutritionTrackedDays.length !== 0) {
+    tabList.push({
+      value: "summary",
+      icon: <SummarizeIcon/>,
+      label: "Summary"
+    })
+    tabList.push({
+      value: "filter",
+      icon: <FilterAltIcon/>,
+      label: "Filter"
+    })
+    
+    panelList.push({
+      value: "summary",
+      children: <Summary/>
+    })
+    panelList.push({
+      value: "filter",
+      children: <TopSearch/>
+    })
+  }
+
+  tabList.push({
+    value: "edit",
+    icon: <EditIcon/>,
+    label: "Edit"
+  })
+
+  panelList.push({
+    value: "edit",
+    children: (
+      <UpdateConsumptionContainer>
+        <UpdateConsumptionForm></UpdateConsumptionForm>
+      </UpdateConsumptionContainer>
+    )
+  })
+
   return (
-    <div className="nutrition-tracker-container">
+    <NutritionTrackerContainer>
       <ScheduleCalendar></ScheduleCalendar>
       {
         scheduledNutritionTrackedDaysView ?
         <ScheduleDayInfo></ScheduleDayInfo> : null
       }
 
-      <br/>
-      <Divider/>
       <br/>
 
-      {
-        nutritionTrackedDays && nutritionTrackedDays.length !== 0 &&
-        <Fragment>
-        <h2 className="nutrition-tracker-summary-header">Summary</h2>
-          <TopSearch></TopSearch>
-
-          <div className="form-view-separator-container">
-            <hr className="rounded"/>
-          </div>
-        </Fragment>
-      }
+      <ItemTabs tabList={ tabList } panelList={ panelList }></ItemTabs>
+    </NutritionTrackerContainer>
+  )
 
-      <div className="update-consumption-container">
-        <UpdateConsumptionForm></UpdateConsumptionForm>
-      </div>
+  // return (
+  //   <NutritionTrackerContainer>
+  //     <ScheduleCalendar></ScheduleCalendar>
+  //     {
+  //       scheduledNutritionTrackedDaysView ?
+  //       <ScheduleDayInfo></ScheduleDayInfo> : null
+  //     }
+
+  //     <br/>
+  //     <Divider/>
+  //     <br/>
+
+  //     {
+  //       nutritionTrackedDays && nutritionTrackedDays.length !== 0 &&
+  //       <Fragment>
+  //         <TopSearch></TopSearch>
+  //       </Fragment>
+  //     }
+
+  //     <UpdateConsumptionContainer>
+  //       <UpdateConsumptionForm></UpdateConsumptionForm>
+  //     </UpdateConsumptionContainer>
 
-    </div>
-  );
-  // };
+  //   </NutritionTrackerContainer>
+  // );
 };
 
 export default NutritionTracker;
\ No newline at end of file
diff --git a/src/pages/signed-out/nutrition-tracker/nutrition-tracker.styles.jsx b/src/pages/signed-out/nutrition-tracker/nutrition-tracker.styles.jsx
new file mode 100644
index 0000000..8731016
--- /dev/null
+++ b/src/pages/signed-out/nutrition-tracker/nutrition-tracker.styles.jsx
@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+export const NutritionTrackerContainer = styled.div`
+
+`
+
+export const UpdateConsumptionContainer = styled.div`
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+`
+
diff --git a/src/utils/constants/shared.constants.js b/src/utils/constants/shared.constants.js
index 7bc3d9b..7f1c9ea 100644
--- a/src/utils/constants/shared.constants.js
+++ b/src/utils/constants/shared.constants.js
@@ -217,6 +217,12 @@ export const COMMON_SPACING = {
     width: 375,
     height: 600
   },
+  summaryInfoCard: {
+    width: 375
+  },
+  filter: {
+    width: 375
+  },
   pieChart: {
     width: 375,
     height: 375
@@ -228,5 +234,11 @@ export const COMMON_SPACING = {
   lineChart: {
     width: "100%",
     height: 400
+  },
+  table: {
+    width: "100%"
+  },
+  filterTable: {
+    height: 650
   }
 }
\ No newline at end of file