diff --git a/src/App.tsx b/src/App.tsx
index a7d52357308f11b8680e37247835dfc19f721792..5279e89bd76752473dd481d4087c9d71a3644806 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,16 +1,20 @@
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { ClientContextProvider } from './context';
+import ThemeProvider from './context/ThemeProvider';
 import { UserStateProvider } from './context/UserContext';
 import Routes from './Routes';
+import { darkTheme } from './theme';
 
 function App(): React.ReactElement {
   return (
     <ClientContextProvider>
       <UserStateProvider>
-        <Router>
-          <Routes />
-        </Router>
+        <ThemeProvider theme={darkTheme}>
+          <Router>
+            <Routes />
+          </Router>
+        </ThemeProvider>
       </UserStateProvider>
     </ClientContextProvider>
   );
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/components/NewsContainer.tsx b/src/components/NewsContainer.tsx
index eaa3db945382fb25a0e906c6eb209a3d1c01a032..42714e2cc3f9909d5f9ae52a284dc76e142f6249 100644
--- a/src/components/NewsContainer.tsx
+++ b/src/components/NewsContainer.tsx
@@ -1,30 +1,17 @@
 import { CircularProgress, Grid } from '@material-ui/core';
-import React, { useEffect } from 'react';
-import useGetNewsList from '../hooks/useGetNewsList';
+import React from 'react';
 import News from './News';
 
 interface Props {}
 
 const NewsContainer: React.FC = () => {
-  const [{ data, isLoading }, getNews] = useGetNewsList();
-
-  useEffect(() => {
-    getNews();
-  }, [getNews]);
+  const isLoading = false;
 
   return isLoading ? (
     <CircularProgress />
   ) : (
     <Grid container spacing={2}>
-      {data &&
-        data.map((item) => (
-          <News
-            title={item.title}
-            author="Anonymus"
-            content={item.text}
-            createDate={item.publishedAt}
-          />
-        ))}
+      <News title="ASd" author="Anonymus" content="ASDADDD" createDate="2021.01.01" />
     </Grid>
   );
 };
diff --git a/src/context/ThemeProvider.tsx b/src/context/ThemeProvider.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a32c2249373bd7826f228c0c1251a6631e180453
--- /dev/null
+++ b/src/context/ThemeProvider.tsx
@@ -0,0 +1,29 @@
+import {
+  createMuiTheme,
+  StylesProvider,
+  Theme,
+  ThemeProvider as MUIThemeProvider,
+} from '@material-ui/core/styles';
+import React, { useMemo } from 'react';
+import { ThemeProvider as SCThemeProvider } from 'styled-components';
+import { theme as defaultTheme } from '../theme';
+
+export interface ThemeProviderProps {
+  theme?: Theme;
+}
+
+const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme: themeProp, children }) => {
+  const theme = useMemo(
+    () => (themeProp ? createMuiTheme(defaultTheme, themeProp) : defaultTheme),
+    [themeProp],
+  );
+  return (
+    <StylesProvider injectFirst>
+      <MUIThemeProvider theme={theme}>
+        <SCThemeProvider theme={theme}>{children}</SCThemeProvider>
+      </MUIThemeProvider>
+    </StylesProvider>
+  );
+};
+
+export default ThemeProvider;
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/styled-components.d.ts b/src/styled-components.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..38cc3fd77826cef9386713bf741b22a5323152b0
--- /dev/null
+++ b/src/styled-components.d.ts
@@ -0,0 +1,7 @@
+import { Theme } from '@material-ui/core/styles';
+import 'styled-components';
+
+declare module 'styled-components' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends Theme {}
+}
diff --git a/src/theme.ts b/src/theme.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b40cff6a6f63846c622d1abc6dc226dde0fb738f
--- /dev/null
+++ b/src/theme.ts
@@ -0,0 +1,50 @@
+import { createMuiTheme } from '@material-ui/core';
+
+// eslint-disable-next-line import/prefer-default-export
+export const theme = createMuiTheme({
+  // TODO: Create default theme
+  /*   palette: {
+    primary: {},
+    secondary: {},
+    error: {},
+    success: {},
+    info: {},
+    warning: {},
+    grey: {},
+
+    text: {},
+  }, */
+  typography: {
+    fontFamily: 'Roboto',
+  },
+});
+
+export const darkTheme = createMuiTheme({
+  palette: {
+    primary: {
+      main: '#1A6B97',
+      contrastText: '#FFFFFF',
+    },
+    secondary: {
+      main: '#FFD200',
+      contrastText: '#202020',
+    },
+    error: {
+      main: '#FF0C3E',
+    },
+    background: {
+      default: '#2A2A28',
+      paper: '#202020',
+    },
+    /* success: {},
+    info: {},
+    warning: {}, */
+
+    text: {
+      primary: '#FFFFFF',
+    },
+  },
+  typography: {
+    fontFamily: 'Roboto',
+  },
+});