diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index e6c3963ea9142a26c02d0d0cff4d2fed04ca67ef..191c5bc6b9fed4543f0ddc9d4ad8bebb29f839fa 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -37,15 +37,16 @@ const MENU_ITEMS: AppBarMenuItem[] = [
 
 const useStyles = makeStyles((theme) => ({
   appBar: {
-    backgroundColor: '#E5BD2F',
+    backgroundColor: theme.palette.primary.main,
     padding: theme.spacing(1),
   },
   tab: {
+    color: theme.palette.secondary.main,
     fontWeight: 600,
     padding: '0px',
   },
   indicator: {
-    backgroundColor: 'white',
+    backgroundColor: theme.palette.secondary.main,
   },
   navItem: {
     flex: 1,
@@ -94,7 +95,9 @@ const Header: React.FC = () => {
             <Typography variant="h4">SCH-BODY</Typography>
           </Grid>
           <Grid className={classes.navItem} item container justify="flex-end">
-            <Button variant="contained">Login</Button>
+            <Button color="secondary" variant="contained">
+              Login
+            </Button>
           </Grid>
         </Grid>
       </Toolbar>
diff --git a/src/components/News.tsx b/src/components/News.tsx
index d674e392308f147b57dbfa910004eb7aae255b22..6927dde045399f8b630019ec18dbf41ec072f8cb 100644
--- a/src/components/News.tsx
+++ b/src/components/News.tsx
@@ -10,8 +10,9 @@ interface NewsProps {
 
 const useStyles = makeStyles((theme) => ({
   container: {
+    color: 'white',
     borderRadius: '8px',
-    backgroundColor: '#E5E5E5',
+    backgroundColor: theme.palette.background.paper,
     margin: theme.spacing(2),
     padding: theme.spacing(1),
   },
diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx
index fed7ec330f96cd5d1ffd5ea0b1f5fab0598520be..d2204f6460d05e80232a5c3bd71f695facb3f575 100644
--- a/src/pages/Page.tsx
+++ b/src/pages/Page.tsx
@@ -3,12 +3,16 @@ import styled from 'styled-components';
 import Footer from '../components/Footer';
 import Header from '../components/Header';
 
-const Container = styled.div`
+const Container = styled.div(
+  (props) => `
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-`;
+
+  background-color: ${props.theme.palette.background.default};
+`,
+);
 
 const MainContent = styled.div`
   height: 100%;
diff --git a/src/theme.ts b/src/theme.ts
index a72bf25fda295c49038289bc62c64c97e04b84be..b40cff6a6f63846c622d1abc6dc226dde0fb738f 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -33,11 +33,16 @@ export const darkTheme = createMuiTheme({
       main: '#FF0C3E',
     },
     background: {
-      default: '#222222',
+      default: '#2A2A28',
+      paper: '#202020',
     },
-    success: {},
+    /* success: {},
     info: {},
-    warning: {},
+    warning: {}, */
+
+    text: {
+      primary: '#FFFFFF',
+    },
   },
   typography: {
     fontFamily: 'Roboto',