diff --git a/app/components/Footer.js b/app/components/Footer.js
index 2b6d01b..bc0f971 100644
--- a/app/components/Footer.js
+++ b/app/components/Footer.js
@@ -1,9 +1,16 @@
 import { Component } from 'react'
+import { Box } from '@mui/material'
 
 export default class Footer extends Component {
   render () {
     return (
-      <div>Footer</div>
+      <Box
+        sx={{
+          p: 12
+        }}
+      >
+        Warframe Center is not associated with Digital Extremes
+      </Box>
     )
   }
 }
diff --git a/app/components/layout.js b/app/components/layout.js
index 2f0b32f..fe96482 100644
--- a/app/components/layout.js
+++ b/app/components/layout.js
@@ -1,5 +1,6 @@
 import Head from 'next/head'
 import Footer from './Footer'
+import { YMInitializer } from 'react-yandex-metrika'
 
 export default function Layout ({ children }) {
   return (
@@ -7,6 +8,7 @@ export default function Layout ({ children }) {
       <Head>
         <title>Warframe Center</title>
         <link rel='icon' href='/favicon.ico' />
+        <YMInitializer accounts={[87671663]} />
       </Head>
       <main>{children}</main>
       <Footer />
diff --git a/app/package-lock.json b/app/package-lock.json
index 3d3ad9a..5e9a667 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -15,6 +15,7 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-moment": "^1.1.1",
+        "react-yandex-metrika": "^2.6.0",
         "reset-css": "^5.0.1",
         "sass": "^1.49.9",
         "shared-stuff": "file:../shared-stuff",
@@ -3939,6 +3940,15 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-yandex-metrika": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/react-yandex-metrika/-/react-yandex-metrika-2.6.0.tgz",
+      "integrity": "sha512-8K4wExsNZtY3DTxh1G8a+zWH9Pg8fw23MJcoJ4I/562qrHRnh7L5nteq3lnNL58dnNQbuuHIRoGgMjIo+r1GjA==",
+      "peerDependencies": {
+        "prop-types": "*",
+        "react": "*"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
@@ -7313,6 +7323,12 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-yandex-metrika": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/react-yandex-metrika/-/react-yandex-metrika-2.6.0.tgz",
+      "integrity": "sha512-8K4wExsNZtY3DTxh1G8a+zWH9Pg8fw23MJcoJ4I/562qrHRnh7L5nteq3lnNL58dnNQbuuHIRoGgMjIo+r1GjA==",
+      "requires": {}
+    },
     "readable-stream": {
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
diff --git a/app/package.json b/app/package.json
index 9b92287..b5d95f8 100644
--- a/app/package.json
+++ b/app/package.json
@@ -16,6 +16,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-moment": "^1.1.1",
+    "react-yandex-metrika": "^2.6.0",
     "reset-css": "^5.0.1",
     "sass": "^1.49.9",
     "shared-stuff": "file:../shared-stuff",
diff --git a/app/pages/_app.js b/app/pages/_app.js
index c77a3fc..8c88394 100644
--- a/app/pages/_app.js
+++ b/app/pages/_app.js
@@ -1,13 +1,22 @@
+import { createTheme, ThemeProvider } from '@mui/material/styles'
 import 'reset-css'
 import '../styles/global.scss'
 import Layout from '../components/layout'
 
-function MyApp ({ Component, pageProps }) {
+function App ({ Component, pageProps }) {
+  const lightTheme = createTheme({
+    palette: {
+      mode: 'light'
+    }
+  })
+
   return (
-    <Layout>
-      <Component {...pageProps} />
-    </Layout>
+    <ThemeProvider theme={lightTheme}>
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
+    </ThemeProvider>
   )
 }
 
-export default MyApp
+export default App
diff --git a/app/pages/home/Hero.js b/app/pages/home/Hero.js
index 9d29fcd..b6d9880 100644
--- a/app/pages/home/Hero.js
+++ b/app/pages/home/Hero.js
@@ -1,13 +1,23 @@
 import { Component } from 'react'
 import Image from 'next/image'
-import styles from './Hero.module.scss'
+import { Box } from '@mui/material'
 import logo from './assets/warframe_logo.png'
 
 export default class Hero extends Component {
   render () {
     return (
-      <div className={styles.hero}>
-        <div className={styles.logo}>
+      <Box
+        sx={{
+          py: 12,
+          textAlign: 'center'
+        }}
+      >
+        <Box
+          sx={{
+            width: 400,
+            m: 'auto'
+          }}
+        >
           <Image
             src={logo}
             alt='logo'
@@ -15,12 +25,17 @@ export default class Hero extends Component {
             width={500}
             height={300}
           />
-        </div>
-        <div className={styles.text}>
+        </Box>
+        <Box
+          sx={{
+            width: 400,
+            m: 'auto'
+          }}
+        >
           <h1>Market Gaps</h1>
           <p>Find a profitable difference between the price of the set and the price of the sum of it's parts.</p>
-        </div>
-      </div>
+        </Box>
+      </Box>
     )
   }
 }
diff --git a/app/pages/home/Hero.module.scss b/app/pages/home/Hero.module.scss
deleted file mode 100644
index 7cf534d..0000000
--- a/app/pages/home/Hero.module.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.hero {
-  width: 100%;
-  padding: 128px 0;
-  position: relative;
-  background: white;
-  text-align: center;
-  overflow: hidden;
-
-  .text, .logo {
-    width: 400px;
-    margin: auto;
-  }
-
-  .logo {
-    img {
-      object-fit: contain;
-    }
-  }
-
-  .text {
-    
-  }
-}
diff --git a/app/pages/home/Table.js b/app/pages/home/Table.js
index ee940ce..176f55a 100644
--- a/app/pages/home/Table.js
+++ b/app/pages/home/Table.js
@@ -32,7 +32,7 @@ export default class Table extends Component {
               </Link>
               <Typography variant='caption' display='block'>
                 <Moment
-                  format='DD.MM hh:mm'
+                  format='DD.MM HH:mm'
                 >
                   {cellValues.row.updatedAt}
                 </Moment>
diff --git a/app/styles/_colors.scss b/app/styles/_colors.scss
deleted file mode 100644
index 4381562..0000000
--- a/app/styles/_colors.scss
+++ /dev/null
@@ -1 +0,0 @@
-$clr-text: #1f1f1f;
\ No newline at end of file
diff --git a/app/styles/_variables.scss b/app/styles/_variables.scss
index d53fabb..25b29a9 100644
--- a/app/styles/_variables.scss
+++ b/app/styles/_variables.scss
@@ -1,2 +1 @@
 @import './fonts';
-@import './colors';
diff --git a/app/styles/global.scss b/app/styles/global.scss
index 173274e..f82941d 100644
--- a/app/styles/global.scss
+++ b/app/styles/global.scss
@@ -5,7 +5,6 @@ body {
   padding: 0;
   margin: 0;
   font: $font-r4;
-  color: $clr-text;
 }
 
 * {
