diff --git a/assets/css/global.css b/assets/css/global.css
index 708e8e1..f25419a 100644
--- a/assets/css/global.css
+++ b/assets/css/global.css
@@ -38,14 +38,7 @@ body {
     background-color: var(--surface-100);
     box-sizing: border-box;
 
-    height: 100vh;
+    min-height: 100vh;
 
     margin: 0;
-    padding: 8px;
-}
-
-#__nuxt {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
 }
\ No newline at end of file
diff --git a/components/Charts.vue b/components/Charts.vue
index 4ae3162..7baee74 100644
--- a/components/Charts.vue
+++ b/components/Charts.vue
@@ -25,7 +25,12 @@ let downloadData = computed(() => {
 const chartData = computed(() => {
   return {
     labels: downloadData.value.labels,
-    datasets: downloadData.value.data
+    datasets: downloadData.value.data.map((value) => {
+      return {
+        ...value,
+        borderRadius: 3
+      }
+    })
   }
 })
 
@@ -56,18 +61,21 @@ const chartOptions = ref({
   plugins: {
     legend: {
       labels: {
-        color: "#8a8a8c"
+        color: "#8a8a8c",
+        useBorderRadius: true
       }
     }
-  }
+  },
 })
 </script>
 
 <template>
-  <Bar
-      :data="chartData"
-      :options="chartOptions"
-  />
+  <div id="container">
+    <Bar
+        :data="chartData"
+        :options="chartOptions"
+    />
+  </div>
   <div id="tooltip">
     <Icon name="ph:question" size="25" style="color: var(--white)"/>
     <div id="explanation" v-html="explanation">
@@ -75,11 +83,19 @@ const chartOptions = ref({
   </div>
 </template>
 <style scoped>
+#container {
+  flex: 1;
+
+  canvas {
+    margin: 10px;
+  }
+}
+
 #tooltip {
   position: absolute;
 
   top: 0;
-  right: 0;
+  right: 10px;
 
   &:not(:hover) {
     #explanation {
diff --git a/components/navigation/DropDownLink.vue b/components/navigation/DropDownLink.vue
index 30e531d..f21de11 100644
--- a/components/navigation/DropDownLink.vue
+++ b/components/navigation/DropDownLink.vue
@@ -50,6 +50,10 @@ watch(currentUrl, (url) => {
     text-decoration: none;
     transition: 0.2s color ease-out;
 
+    &:hover {
+      color: var(--primary-600);
+    }
+
     &.router-link-active {
       color: var(--primary-100);
     }
diff --git a/layouts/default.vue b/layouts/default.vue
index 9be4a5c..071cec5 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -32,79 +32,109 @@ const modpackCountUrls = [
 </script>
 
 <template>
-  <div id="nav">
-    <NuxtLink id="header" href="/">
-      Modrinth Statistics
-    </NuxtLink>
-    <div id="links">
-      <div class="groups">
-        <DropDownLink :urls="modDownloadUrls" title="Mod Downloads"/>
-        <DropDownLink :urls="modCountUrls" title="Mod Counts"/>
-      </div>
-      <div class="groups">
-        <DropDownLink :urls="modpackDownloadUrls" title="Modpack Downloads"/>
-        <DropDownLink :urls="modpackCountUrls" title="Modpack Counts"/>
+  <div id="page">
+    <div id="nav">
+      <NuxtLink id="header" href="/">
+        Modrinth Statistics
+      </NuxtLink>
+      <div id="links">
+        <div class="groups">
+          <DropDownLink :urls="modDownloadUrls" title="Mod Downloads"/>
+          <DropDownLink :urls="modCountUrls" title="Mod Counts"/>
+        </div>
+        <div class="groups">
+          <DropDownLink :urls="modpackDownloadUrls" title="Modpack Downloads"/>
+          <DropDownLink :urls="modpackCountUrls" title="Modpack Counts"/>
+        </div>
       </div>
+      <DevOnly>
+        <button @click="onUpdateData">
+          update Data
+        </button>
+      </DevOnly>
+      <NuxtLink id="github" to="https://github.com/ToBinio/modrinth-statistics" target="_blank">
+        <Icon name="mdi:github" size="40"/>
+      </NuxtLink>
+    </div>
+    <div id="main">
+      <slot/>
     </div>
-    <DevOnly>
-      <button @click="onUpdateData">
-        update Data
-      </button>
-    </DevOnly>
-    <NuxtLink to="https://github.com/ToBinio/modrinth-statistics" target="_blank">
-      <Icon name="mdi:github" size="40"/>
-    </NuxtLink>
-  </div>
-  <div id="main">
-    <slot/>
   </div>
 </template>
 
 <style scoped>
-#nav {
-  padding: 10px;
-  margin: 10px;
+#page {
+  min-height: 100vh;
 
-  border-bottom: 2px solid var(--surface-200);
+  flex: 1;
 
   display: flex;
+  flex-direction: column;
 
-  justify-content: space-between;
-  align-items: center;
-
-  overflow: scroll;
+  #nav {
+    padding: 10px;
+    margin: 10px;
 
-  #header {
-    font-weight: bold;
-    font-size: xx-large;
-  }
+    border-bottom: 2px solid var(--surface-200);
 
-  #links {
     display: flex;
-    gap: 50px;
 
-    .groups {
+    justify-content: space-between;
+    align-items: center;
+
+    gap: 10px;
+
+    overflow: scroll;
+
+    #header {
+      font-weight: bold;
+      font-size: xx-large;
+    }
+
+    #links {
       display: flex;
-      gap: 20px;
+      gap: 50px;
+
+      .groups {
+        display: flex;
+        gap: 20px;
+      }
     }
-  }
 
-  button {
-    color: black;
-  }
+    #github {
+      transition: 0.1s scale ease-in-out;
+
+      &:hover {
+        scale: 1.05;
+      }
+    }
+
+    button {
+      color: black;
+    }
 
-  a {
-    text-decoration: none;
-    transition: 0.2s color ease-out;
+    a {
+      text-decoration: none;
+      transition: 0.2s color ease-out;
 
-    &.router-link-active {
-      color: var(--primary-100);
+      &:hover {
+        color: var(--primary-600);
+      }
+
+      &.router-link-active {
+        color: transparent;
+        background: linear-gradient(10deg, var(--primary-100) 30%, var(--primary-600) 100%);
+        background-clip: text;
+      }
     }
   }
-}
 
-#main {
-  flex: 1;
-  position: relative;
+  #main {
+    flex: 1;
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+  }
 }
 </style>
diff --git a/pages/index.vue b/pages/index.vue
index 1f391b7..37aaeb9 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -10,26 +10,122 @@ const {data} = useModrinthFetch<statistics>("/statistics");
 </script>
 
 <template>
-  <div>
-    <div>
-      Projects:
-      {{ data?.projects }}
+  <div id="page">
+    <div id="header">
+      The place for Stats all about
+      <NuxtLink to="https://modrinth.com" id="modrinth">Modrinth</NuxtLink>
+      <div id="unofficial">(unofficial)</div>
     </div>
-    <div>
-      Versions:
-      {{ data?.versions }}
-    </div>
-    <div>
-      Files:
-      {{ data?.files }}
-    </div>
-    <div>
-      Authors:
-      {{ data?.authors }}
+    <div id="values">
+      <div class="container">
+        <IconCSS name="akar-icons:game-controller" size="200"/>
+        <div class="text">
+          <div class="value">
+            {{ data?.projects.toLocaleString() }}
+          </div>
+          <div>
+            Projects
+          </div>
+        </div>
+      </div>
+      <div class="container">
+        <IconCSS name="akar-icons:attach" size="200"/>
+        <div class="text">
+          <div class="value">
+            {{ data?.versions.toLocaleString() }}
+          </div>
+          <div>
+            Versions
+          </div>
+        </div>
+      </div>
+      <div class="container">
+        <IconCSS name="akar-icons:file" size="200"/>
+        <div class="text">
+          <div class="value">
+            {{ data?.files.toLocaleString() }}
+          </div>
+          <div>
+            Files
+          </div>
+        </div>
+      </div>
+      <div class="container">
+        <IconCSS name="akar-icons:person" size="200"/>
+        <div class="text">
+          <div class="value">
+            {{ data?.authors.toLocaleString() }}
+          </div>
+          <div>
+            Authors
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped>
+#page {
+  flex: 1;
+  background: linear-gradient(180deg, var(--surface-100) 0%, black 100%);
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+
+  #header {
+    text-align: center;
+    font-size: 4rem;
+    font-weight: bold;
+
+    #modrinth {
+      display: block;
+      font-size: 5rem;
+
+      color: transparent;
+      background: linear-gradient(70deg, var(--primary-100) 30%, var(--primary-600) 70%);
+      background-clip: text;
+
+      transition: 0.2s scale ease-in-out;
+
+      &:hover {
+        scale: 1.05;
+      }
+    }
+
+    #unofficial {
+      font-size: large;
+      color: var(--surface-400);
+    }
+  }
+
+  #values {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+
+    flex-wrap: wrap;
+
+    .container {
+      display: flex;
+
+      gap: 10px;
+
+      .text {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        .value {
+          font-size: xxx-large;
+        }
+      }
 
+      span {
+        background: linear-gradient(70deg, var(--primary-100) 30%, var(--primary-600) 70%);
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file