diff --git a/src/App.vue b/src/App.vue
index d97b349..c8ae4fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,30 +1,64 @@
+<script setup lang="ts">
+import { PedestrianFamily, ToolBox, GameConsole, Linux } from '@vicons/carbon';
+</script>
+
 <template>
   <n-config-provider :theme="theme"
                      :theme-overrides="theme === null ? lightThemeOverrides : darkThemeOverrides">
     <main>
       <div class="wrapper">
-        <TopBarMenu @toggle-darkmode="toggleTheme()"/>
+        <TopBarMenu :toggleTheme="toggleTheme" :themex="theme"/>
         <div class="columns">
           <div id="main-column" class="column">
             <div class="top-main">
-              <div class="hook">
-                <h1>{{ months }} {{ months == 1 ? "month" : "months" }} of development.</h1>
-                <h1> {{ contributors }} experienced contributors.</h1>
-                <h1>0 days since someone asked for Bloodborne.</h1>
-              </div>
+              <Hook :time="getTime()" :contributors="contributors" />
             </div>
           
             <div class="column-content">
-                <n-card hoverable>
-                  <template #cover>
-                    <img :src="getCoverURI()">
+                <MainCard :themex="theme" />
+                <ContentCard>
+                  <template #card-icon>
+                    <PedestrianFamily />
                   </template>
-                  <template #header>
-                    <div class="card-header">RPCSX is your PlayStation 4 emulator.</div>
+                  <template #card-title>
+                    Huge community.
                   </template>
-                  <div class="body-text">Use only with lawfully obtained archival copies of PS4 games you physically own.</div>
-                </n-card>
-
+                  Everyone is here! The spirit of RPCS3 lives on.
+                </ContentCard>
+                <ContentCard>
+                  <template #card-icon>
+                    <ToolBox />
+                  </template>
+                  <template #card-title>
+                    Ongoing development.
+                  </template>
+                  Est. 2016 by DH himself.
+                </ContentCard>
+                <ContentCard>
+                  <template #card-icon>
+                    <GameConsole />
+                  </template>
+                  <template #card-title>
+                    All your favorite titles.
+                  </template>
+                  <div class="joke-wrapper">
+                    <div class="body-text">
+                      Bloodborne coming Soon™*
+                    </div>
+                    <div class="joke-footnote">
+                      * RPCSX does not provide estimates or compatibility for any title.
+                    </div>
+                  </div>
+                </ContentCard>
+                <ContentCard>
+                  <template #card-icon>
+                    <Linux />
+                  </template>
+                  <template #card-title>
+                    Currently Linux only.
+                  </template>
+                  WSL on Windows is being discussed.
+                </ContentCard>
                 <n-divider />
             </div>
           </div>
@@ -70,21 +104,19 @@
 .column-content {
   display: flex;
   flex-flow: column nowrap;
-  gap: 8px;
+  align-items: center;
+  gap: 16px;
 }
 
 #main-column {
-    flex-shrink: 0;  /* makes sure that content is not cut off in a smaller browser window */
+    /* flex-shrink: 0;  /* makes sure that content is not cut off in a smaller browser window */ /* [OCDkirby: so that was a fucking lie.] */
+    flex-shrink: 1;
     flex-grow: 4;
     align-self: center;
     align-items: center;
     gap: 16px;
 }
 
-.n-card {
-  max-width: 300px;
-}
-
 #right-column {
   flex-grow: 0;
   gap: 5px;
@@ -105,17 +137,30 @@
     display: flex;
     
 }
+
+.joke-wrapper {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  flex-shrink: 1;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.joke-footnote {
+  align-self: flex-end;
+  font-size: 8pt;
+  word-wrap: break-word;
+}
 </style>
 
-<script>
+<script lang="ts">
   import { darkTheme } from 'naive-ui'
   import { ref } from 'vue';
 
   import 'vfonts/FiraSans.css';
   import './assets/text-styles.css';
 
-  import './assets/logo-light.png';
-
   /**
    * @type import('naive-ui').GlobalThemeOverrides
    */
@@ -133,16 +178,14 @@
     // ...
   };
 
-  var repoCreation = new Date(2023, 6, 18);
-  var today = new Date();
-  const months = (today.getFullYear() - repoCreation.getFullYear()) * 12 - repoCreation.getMonth() + today.getMonth() + 1; // Months between creation and today
-
-  var contributors = null; // TODO web scraping
+  var contributors = 10; // TODO web scraping
   // const response = await fetch("https://cors-anywhere.herokuapp.com/https://github.com/RPCSX/rpcsx/");
   // contributors = await cheerio.load(response.text())('.Counter m1-1');
   // console.log("hi");
 
-  var theme = null;
+  var theme;
+
+  var coverURI;
 
 
   export default defineComponent({
@@ -156,8 +199,14 @@
       openGithub() {
         window.open('https://github.com/RPCSX/rpcsx', '_blank');
       },
-      getCoverURI() {
-        return theme === null ? './assets/logo-light.png' : './assets/logo-dark.png';
+      getTime() {
+        const divmod = (x, y) => [Math.floor(x / y), x % y]; // Utility
+
+        var developmentStart = new Date(2016, 6, 18); // Rough estimate of when DH left RPCS3
+        var today = new Date();
+        const months = (today.getFullYear() - developmentStart.getFullYear()) * 12 - developmentStart.getMonth() + today.getMonth() + 1; // Months between start and today
+        var time_result = divmod(months, 12); // [years, partial year's months]
+        return months > 12 ? (time_result[0] + Math.round(time_result[1] / 12 * 10)/10) + " years" : months + "months";
       }
     },
     setup() {
@@ -166,9 +215,9 @@
         theme: ref(null),
         lightThemeOverrides,
         darkThemeOverrides,
-        months,
         contributors
       }
     }
   })
 </script>
+
diff --git a/src/assets/logo-light.png b/src/assets/logo-light.png
deleted file mode 100644
index f19007a..0000000
Binary files a/src/assets/logo-light.png and /dev/null differ
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
deleted file mode 100644
index 7565660..0000000
--- a/src/assets/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
diff --git a/src/components/ContentCard.vue b/src/components/ContentCard.vue
new file mode 100644
index 0000000..51c853c
--- /dev/null
+++ b/src/components/ContentCard.vue
@@ -0,0 +1,55 @@
+<script setup>
+import '../assets/text-styles.css';
+</script>
+
+<template>
+    <n-card hoverable>
+        <div class="card-wrapper">
+            <div class="icon-wrapper">
+                <n-icon size="35">
+                    <slot name="card-icon" class="card-icon"/>
+                </n-icon>
+            </div>
+            <div class="content-wrapper">
+                <div class="card-header">
+                    <slot name="card-title" />
+                </div>
+                <div class="body-text" id="card-body">
+                    <slot />
+                </div>
+            </div>
+        </div>
+    </n-card>
+</template>
+
+<style scoped>
+    .n-card {
+        max-width: 400px;
+        min-width: 400px;
+    }
+
+    .card-wrapper {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+    }
+    
+    .icon-wrapper {
+        margin: 10px 20px 10px 0px;
+        border: 2px;
+        border-radius: 2px;
+        border-color: black; /* TODO fixme */
+    }
+
+    .card-icon {
+        font-size: 100px;
+    }
+
+    .content-wrapper {
+        flex-shrink: 1;
+    }
+
+    #card-body {
+        word-wrap: break-word;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/FeatureListItem.vue b/src/components/FeatureListItem.vue
deleted file mode 100644
index 6d7086a..0000000
--- a/src/components/FeatureListItem.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-  <div class="item">
-    <i>
-      <slot name="icon"></slot>
-    </i>
-    <div class="details">
-      <h3>
-        <slot name="heading"></slot>
-      </h3>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.item {
-  margin-top: 2rem;
-  display: flex;
-  position: relative;
-}
-
-.details {
-  flex: 1;
-  margin-left: 1rem;
-}
-
-i {
-  display: flex;
-  place-items: center;
-  place-content: center;
-  width: 32px;
-  height: 32px;
-
-  color: var(--color-text);
-}
-
-h3 {
-  font-size: 1.2rem;
-  font-weight: 500;
-  margin-bottom: 0.4rem;
-  color: var(--color-heading);
-}
-
-@media (min-width: 1024px) {
-  .item {
-    margin-top: 0;
-    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
-  }
-
-  i {
-    top: calc(50% - 25px);
-    left: -26px;
-    position: absolute;
-    border: 1px solid var(--color-border);
-    background: var(--color-background);
-    border-radius: 8px;
-    width: 50px;
-    height: 50px;
-  }
-
-  .item:before {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    bottom: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:after {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    top: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:first-of-type:before {
-    display: none;
-  }
-
-  .item:last-of-type:after {
-    display: none;
-  }
-}
-</style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 5fb372c..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<script setup>
-defineProps({
-  msg: {
-    type: String,
-    required: true
-  }
-})
-</script>
-
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
-      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
-    </h3>
-  </div>
-</template>
-
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  position: relative;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
-}
-</style>
diff --git a/src/components/Hook.vue b/src/components/Hook.vue
new file mode 100644
index 0000000..72da763
--- /dev/null
+++ b/src/components/Hook.vue
@@ -0,0 +1,21 @@
+<script setup>
+defineProps({
+  time: {
+    type: String,
+    required: true
+  },
+
+  contributors: {
+    type: String,
+    required: true
+  },
+})
+</script>
+
+<template>
+    <div class="hook">
+        <h1>{{ time }} of development.</h1>
+        <h1> {{ contributors }} experienced contributors.</h1>
+        <h1>0 days since someone asked for Bloodborne.</h1>
+      </div>
+</template>
\ No newline at end of file
diff --git a/src/components/MainCard.vue b/src/components/MainCard.vue
new file mode 100644
index 0000000..c111397
--- /dev/null
+++ b/src/components/MainCard.vue
@@ -0,0 +1,28 @@
+<script setup>
+import '../assets/text-styles.css';
+
+defineProps({
+  themex: {
+    type: ref,
+    required: true
+  }
+})
+</script>
+
+<style scoped>
+    .n-card {
+        max-width: 300px;
+    }
+</style>
+
+<template>
+    <n-card hoverable>
+        <template #cover>
+            <img :src="themex == null ? './assets/logo-light.png' : './assets/logo-dark.png'">
+        </template>
+        <template #header>
+            <div class="card-header">RPCSX is your PlayStation 4 emulator.</div>
+        </template>
+        <div class="body-text">Use only with lawfully obtained archival copies of PS4 games you physically own.</div>
+    </n-card>
+</template>
\ No newline at end of file
diff --git a/src/components/PitchItem.vue b/src/components/PitchItem.vue
deleted file mode 100644
index 6ad427e..0000000
--- a/src/components/PitchItem.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-    <div class="wrapper">
-        <n-icon>
-            <slot name="icon" class="pitch-item-icon" />
-        </n-icon>
-        <slot class="body-text"></slot>
-    </div>
-</template>
-
-<style scoped>
-    .pitch-item-icon {
-        font-size: 50px;
-    }
-
-    .wrapper {
-        display: inline-block;
-        
-    }
-
-</style>
-
-<script>
-import './assets/text-styles.css'
-
-
-</script>
\ No newline at end of file
diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue
deleted file mode 100644
index 33a810d..0000000
--- a/src/components/TheWelcome.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<script setup>
-  import FeatureListItem from './FeatureListItem.vue'
-</script>
-
-<template>
-  <div>
-    <FeatureListItem>
-      <template #icon>
-        <n-icon size="30">
-          <book />
-        </n-icon>
-      </template>
-      <template #heading>Documentation</template>
-
-      Vue’s
-      <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
-      provides you with all information you need to get started.
-    </FeatureListItem>
-
-    <FeatureListItem>
-      <template #icon>
-        <n-icon size="30">
-          <tool-box />
-        </n-icon>
-      </template>
-      <template #heading>Tooling</template>
-
-      This project is served and bundled with
-      <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
-      recommended IDE setup is
-      <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
-      <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
-      you need to test your components and web pages, check out
-      <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
-      <a href="https://on.cypress.io/component" target="_blank">Cypress Component Testing</a>.
-
-      <br />
-
-      More instructions are available in <code>README.md</code>.
-    </FeatureListItem>
-
-    <FeatureListItem>
-      <template #icon>
-        <n-icon size="30">
-          <category />
-        </n-icon>
-      </template>
-      <template #heading>Ecosystem</template>
-
-      Get official tools and libraries for your project:
-      <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
-      <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
-      <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
-      <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
-      you need more resources, we suggest paying
-      <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
-      a visit.
-    </FeatureListItem>
-
-    <FeatureListItem>
-      <template #icon>
-        <n-icon size="30">
-          <chat />
-        </n-icon>
-      </template>
-      <template #heading>Community</template>
-
-      Got stuck? Ask your question on
-      <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
-      Discord server, or
-      <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
-        >StackOverflow</a
-      >. You should also subscribe to
-      <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
-      the official
-      <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
-      twitter account for latest news in the Vue world.
-    </FeatureListItem>
-
-    <FeatureListItem>
-      <template #icon>
-        <n-icon size="30">
-          <currency-dollar />
-        </n-icon>
-      </template>
-      <template #heading>Support Vue</template>
-
-      As an independent project, Vue relies on community backing for its sustainability. You can help
-      us by
-      <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
-    </FeatureListItem>
-  </div>
-</template>
-
-<style>
-
-
-</style>
-
-<script>
-  import { Book, ToolBox, CurrencyDollar, Chat, Category } from "@vicons/carbon";
-</script>
\ No newline at end of file
diff --git a/src/components/TopBarMenu.vue b/src/components/TopBarMenu.vue
index 2b87f45..1522514 100644
--- a/src/components/TopBarMenu.vue
+++ b/src/components/TopBarMenu.vue
@@ -5,7 +5,22 @@ import { NIcon } from 'naive-ui'
     Book as BookIcon,
     LogoDiscord as DiscordIcon,
     Moon as MoonIcon, Sun as SunIcon
-  } from '@vicons/carbon';
+  } from '@vicons/carbon'
+
+  defineProps({
+    toggleTheme: {
+      type: Function,
+      required: true
+    },
+    coverImage: {
+      type: ref,
+      required: true
+    },
+    themex: {
+      type: ref,
+      required: true
+    },
+  })
 </script>
 
 <template>
@@ -14,7 +29,7 @@ import { NIcon } from 'naive-ui'
     quaternary
     tag="a"
     href="https://rpcsx.github.io/rpcsx-site/">
-      <img alt="Vue logo" class="logo" :src="getCoverURI()" width="32" height="32" />
+      <img alt="RPCSX logo" class="logo" :src="themex == null ? './assets/logo-light.png' : './assets/logo-dark.png'" width="32" height="32" />
     </n-button>
     <n-menu v-model:value="activeKey" mode="horizontal" :options="menuOptions" />
     <n-button circle @click="toggleTheme()" class="dark-mode-button">