diff --git a/frontend/src/components/Dashboard/index.js b/frontend/src/components/Dashboard/index.js
index 32a159d..e6e51dd 100644
--- a/frontend/src/components/Dashboard/index.js
+++ b/frontend/src/components/Dashboard/index.js
@@ -1,11 +1,17 @@
-import React from 'react';
+import React,{useState} from 'react';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import useScrollTrigger from '@material-ui/core/useScrollTrigger';
 import Container from '@material-ui/core/Container';
+import { IconButton,Paper } from "@material-ui/core";
+import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
 import { dashConstants } from '../../config/constants';
+import {LightTheme,DarkTheme} from "../../util/themes/GlobalThemes"
+import {getAppBarStyles} from "../../util/styles/componentStyles"
+import MoonIcon from '../../moon.svg';
+import LightIcon from "../../sun.svg"
 import Home from '../Pages/Home';
 
 function ElevationScroll(props) {
@@ -25,20 +31,32 @@ function ElevationScroll(props) {
 }
 
 function Dashboard(props) {
+   const [isDark, setIsDark] = useState(false);
+   const theme = isDark ? createMuiTheme(DarkTheme) : createMuiTheme(LightTheme)
+   const classes = getAppBarStyles()
+
+   function handleThemeChange(){
+      setIsDark(!isDark)
+   }
     return (
         <React.Fragment>
-            <CssBaseline />
-            <ElevationScroll {...props}>
-                <AppBar>
-                    <Toolbar>
-                        <Typography variant="h6">{dashConstants.APP_NAME}</Typography>
-                    </Toolbar>
-                </AppBar>
-            </ElevationScroll>
-            <Toolbar />
-            <Container style={{backgroundColor:'white'}}>
-                <Home/>
-            </Container>
+            <ThemeProvider theme={theme}>
+                <Paper>
+                    <CssBaseline />
+                    <ElevationScroll {...props}>
+                    <AppBar>
+                        <Toolbar className = {classes.root}>
+                            <Typography variant="h6" className = {classes.title}>{dashConstants.APP_NAME}</Typography>
+                            <IconButton className = {classes.themeIcon}  onClick = {handleThemeChange} >{<img alt="Theme Icon" src={isDark ? LightIcon : MoonIcon}/>}</IconButton>
+                        </Toolbar>
+                    </AppBar>
+                    </ElevationScroll>
+                    <Toolbar />
+                    <Container style={{backgroundColor:'white'}}>
+                        <Home/>
+                    </Container>
+                </Paper>
+            </ThemeProvider>
         </React.Fragment>
     );
 }
diff --git a/frontend/src/moon.svg b/frontend/src/moon.svg
new file mode 100644
index 0000000..6c081d4
--- /dev/null
+++ b/frontend/src/moon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/sun.svg b/frontend/src/sun.svg
new file mode 100644
index 0000000..c014fc4
--- /dev/null
+++ b/frontend/src/sun.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
\ No newline at end of file
diff --git a/frontend/src/util/styles/componentStyles.js b/frontend/src/util/styles/componentStyles.js
new file mode 100644
index 0000000..bc44844
--- /dev/null
+++ b/frontend/src/util/styles/componentStyles.js
@@ -0,0 +1,13 @@
+import { makeStyles } from "@material-ui/core";
+
+export const getAppBarStyles = makeStyles((theme) => ({
+    title: {
+      flexGrow: 1,
+    },
+    themeIcon:{
+        backgroundColor:"transparent !important",
+        height:"38px",
+        width:"38px",
+        boxShadow:"0px 0px 0.5px 0.5px #6e7681"
+    }
+  }));
\ No newline at end of file
diff --git a/frontend/src/util/themes/GlobalThemes.js b/frontend/src/util/themes/GlobalThemes.js
new file mode 100644
index 0000000..fd34a25
--- /dev/null
+++ b/frontend/src/util/themes/GlobalThemes.js
@@ -0,0 +1,151 @@
+export const LightTheme = {
+   palette: {
+      primary: {
+         light: "#7986cb",
+         main: "#3f51b5",
+         dark: "#303f9f",
+         contrastText: "#fff",
+      },
+
+      text: {
+         primary: "rgba(0, 0, 0, 0.87)",
+         secondary: "rgba(0, 0, 0, 0.54)",
+         disabled: "rgba(0, 0, 0, 0.38)",
+         hint: "rgba(0, 0, 0, 0.38)",
+      },
+      background: {
+         paper: "#fff",
+         default: "#fafafa",
+      },
+      action: {
+         active: "rgba(0, 0, 0, 0.54)",
+         hover: "rgba(0, 0, 0, 0.04)",
+         selected: "rgba(0, 0, 0, 0.08)",
+         focus:"rgba(0, 0, 0, 0.12)"
+      },
+   },
+
+   typography: {
+      allVariants: {
+         color: "#000",
+      },
+      h5: {
+         color: "#000",
+      },
+      h6: {
+         color: "#fff",
+      },
+      h2: {
+         color: "#000",
+      },
+   },
+   overrides: {
+      MuiToolbar: {
+         root: {
+            background: "#3f51b5",
+         },
+      },
+      MuiPaper: {
+         root: {
+            border: "none",
+         },
+      },
+      MuiContainer: {
+         root: {
+            backgroundColor: "#fff !important",
+         },
+      },
+      MuiInputBase: {
+        root: {
+           border: "none",
+        },
+     },
+     MuiSvgIcon:{
+      root:{
+        color:"#484f58"
+      }
+    },
+    MuiInputLabel:{
+      root:{
+        background:"#fff",
+        color:"#000"
+      }
+    }
+   },
+};
+
+export const DarkTheme = {
+   palette: {
+      primary: {
+         light: "#0d419d",
+         main: "#0d419d",
+         dark: "#0d419d",
+         contrastText: "#fff",
+      },
+
+      text: {
+         primary: "#bdd1d9",
+         secondary: "#f0f6fc",
+         disabled: "#30363d",
+         hint: "#6e7681",
+      },
+      background: {
+         paper: "#0d1117",
+         default: "#0d1117",
+      },
+      action: {
+        active: "rgba(0, 0, 0, 0.54)",
+        hover: "#30363d",
+        selected: "#21262d",
+        focus:"rgba(0, 0, 0, 0.12)"
+     },
+   },
+   typography: {
+      allVariants: {
+         color: "#bdd1d9",
+      },
+      h5: {
+         color: "#bdd1d9",
+      },
+      h6: {
+         color: "#f0f6fc",
+      },
+      h2: {
+         color: "#c9d1d9",
+      },
+   },
+   overrides: {
+      MuiToolbar: {
+         root: {
+            background: "#1c2128",
+         },
+      },
+      MuiPaper: {
+         root: {
+            border: "1px solid #30363d",
+         },
+      },
+      MuiContainer: {
+         root: {
+            backgroundColor: "#0d1117 !important",
+         },
+      },
+      MuiInputBase: {
+        root: {
+           border: "solid #30363d 1px",
+        },
+     },
+     MuiSvgIcon:{
+      root:{
+        color:"#484f58"
+      }
+    },
+    MuiInputLabel:{
+      root:{
+        background:"#0d1117",
+        color:"#f0f6fc"
+      }
+    },
+   },
+   
+};