diff --git a/src/app.riot b/src/app.riot
index a87a5c0..aa55dba 100644
--- a/src/app.riot
+++ b/src/app.riot
@@ -1,84 +1,64 @@
 <app>
-  <div class="container">
-    <router>
-      <div if={state.showNotFound} class="row">
-        <div class="column column-60">
-          <not-found />
-        </div>
-      </div>
-      <div if={!state.showNotFound} class="">
-        <div class="column column-60">
-          <route each={page in state.pages} path={page.path}>
-            <main is={page.componentName} />
-          </route>
-        </div>
-      </div>
-    </router>
-  </div>
+    <div class="container">
+        <router>
+            <div if={state.showNotFound} class="row">
+                <div class="column column-60">
+                    <not-found />
+                </div>
+            </div>
 
-  <script>
-    import { Router, Route, route, toRegexp, match } from '@riotjs/route'
-    import lazy from '@riotjs/lazy'
-    import Loader from './components/includes/loader/loader.riot'
-    import NotFound from './pages/not-found.riot'
-    import pages from './pages'
+            <div if={!state.showNotFound}>
+                  <route each={page in state.pages} path={page.path}>
+                      <main is={page.componentName} />
+                  </route>
+            </div>
+        </router>
+    </div>
 
-    export default {
-      components: {
-        Router,
-        Route,
-        NotFound,
-        Home: lazy(Loader, () => import(
-          /* webpackPrefetch: true, webpackChunkName: 'pages/home' */
-          './pages/home.riot'
-        )),
-      },
-      state: {
-        pages,
-        showNotFound: false,
-        activePage: null
-      },
-      onBeforeMount({ isServer }) {
-        // create a stream on all routes to catch the not-found page
-        this.anyRouteStream = route('(.*)')
-        this.anyRouteStream.on.value(this.onAnyRoute)
-      },
-      onAnyRoute(path) {
-        // show the not found page if none of the page paths are matched
-        const activePage = pages.find(p => match(path.pathname, toRegexp(p.path)))
+    <script>
+        import { Router, Route, route, toRegexp, match } from '@riotjs/route'
+        import lazy from '@riotjs/lazy'
+        import Loader from './components/includes/loader/loader.riot'
+        import NotFound from './pages/not-found.riot'
+        import pages from './pages'
 
-        this.update({
-          activePage,
-          showNotFound: !activePage
-        })
-      },
-      onBeforeUnmount() {
-        this.anyRouteStream.end()
-      }
-    }
-  </script>
+        export default {
+            components: {
+                Router,
+                Route,
+                NotFound,
+                Home: lazy(Loader, () => import(
+                    './pages/home.riot'
+                )),
+            },
+            state: {
+                pages,
+                showNotFound: false,
+                activePage: null
+            },
+            onBeforeMount({ isServer }) {
+                this.anyRouteStream = route('(.*)')
+                this.anyRouteStream.on.value(this.onAnyRoute)
+            },
+            onAnyRoute(path) {// show the not found page if none of the page paths are matched
+                const activePage = pages.find(p => match(path.pathname, toRegexp(p.path)))
 
-  <style>
-    :host {
-      padding: 2rem 0;
-    }
+                this.update({
+                    activePage,
+                    showNotFound: !activePage
+                })
+            },
+            onBeforeUnmount() {
+                this.anyRouteStream.end()
+            }
+        }
+    </script>
 
-    .menu {
-      margin: 1rem -1rem;
-    }
-
-    .menu a {
-      padding: 0 1rem;
-      color: black;
-    }
-
-    .menu a.active.active {
-      font-weight: bold;
-      text-decoration: none;
-    }
-
-    .menu a:hover, .menu a:focus, .menu a:active {
-      text-decoration: underline;
-    }
-  </style>
+    <style>
+        :host {
+            padding: 6%;
+            background: #B8CBD0;
+            min-height: 100vh;
+        }
+    </style>
 </app>
diff --git a/src/components/global/etablanalytics/etablanalytics.riot b/src/components/global/etablanalytics/etablanalytics.riot
new file mode 100644
index 0000000..7575321
--- /dev/null
+++ b/src/components/global/etablanalytics/etablanalytics.riot
@@ -0,0 +1,3 @@
+<etablanalytics>
+    <p>eta</p>
+</etablanalytics>
\ No newline at end of file
diff --git a/src/components/global/generalytics/generalytics.riot b/src/components/global/generalytics/generalytics.riot
new file mode 100644
index 0000000..dec8db3
--- /dev/null
+++ b/src/components/global/generalytics/generalytics.riot
@@ -0,0 +1,3 @@
+<generalytics>
+    <p>gen</p>
+</generalytics>
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 5f7b96f..8a9b02f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,12 +1,23 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <title>Parcoursup Analytic's</title>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.0/milligram.css">
-</head>
-<body>
-  <div id="root"></div>
-</body>
+    <head>
+        <title>Parcoursup Analytic's</title>
+        <meta charset="UTF-8"></meta>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.0/milligram.css">
+    </head>
+
+    <body>
+        <style>
+            #root {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                flex-direction: row;
+            }
+        </style>
+
+        <div id="root"></div>
+    </body>
 </html>
diff --git a/src/pages/home.riot b/src/pages/home.riot
index 0ebbd61..07ad83d 100644
--- a/src/pages/home.riot
+++ b/src/pages/home.riot
@@ -1,3 +1,42 @@
 <home>
-	<selector />
+	<style>
+		#main-container {
+			display: flex;
+			flex-direction: row;
+			justify-content: center;
+			align-items: center;
+			gap: 10%;
+		}
+
+		#main-container
+		#left
+		generalytics {
+			margin-bottom: 5%;
+		}
+
+		#main-container
+		#left
+		generalytics, etablanalytics {
+			display: flex;
+			flex-direction: column;
+			width: 525px;
+			height: 300px;
+			padding: 20px;
+			box-shadow: 0px 0px 9px 1px black;
+			background: #7A90A4;
+			border-radius: 10px;
+
+		}
+	</style>
+
+	<div id="main-container">
+		<div id="right">
+			<selector />
+		</div>
+
+		<div id="left">
+			<generalytics />
+			<etablanalytics />
+		</div>
+	</div>
 </home>