diff --git a/src/App.vue b/src/App.vue
index 70debde..e78e9da 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -115,19 +115,34 @@ const darkThemeOverrides: GlobalThemeOverrides = {
 </script>
 
 <template>
-  <n-config-provider :theme="theme" :themeOverrides="theme === null ? lightThemeOverrides : darkThemeOverrides">
+  <n-config-provider
+    :theme="theme"
+    :theme-overrides="theme === null ? lightThemeOverrides : darkThemeOverrides"
+  >
     <n-layout>
       <div class="wrapper">
         <div class="top-portion-wrapper">
           <Suspense>
-            <TopBarMenu :themex="theme" :toggle="toggleTheme" />
+            <TopBarMenu
+              :themex="theme"
+              :toggle="toggleTheme"
+            />
           </Suspense>
-          <n-alert title="Important" type="warning" closable>
-            <n-text class="alert-text">This is the only official RPCSX site. others such as rpcsx.com are not affiliated
-              with RPCSX.</n-text>
+          <n-alert
+            title="Important"
+            type="warning"
+            closable
+          >
+            <n-text class="alert-text">
+              This is the only official RPCSX site. others such as rpcsx.com are not affiliated
+              with RPCSX.
+            </n-text>
           </n-alert>
           <div class="columns">
-            <div id="main-column" class="column">
+            <div
+              id="main-column"
+              class="column"
+            >
               <div class="top-main">
                 <Suspense>
                   <Hook :themex="theme" />
@@ -137,7 +152,10 @@ const darkThemeOverrides: GlobalThemeOverrides = {
               <!-- todo put something here if necessary -->
               <div class="column-content" />
             </div>
-            <div id="right-column" class="column">
+            <div
+              id="right-column"
+              class="column"
+            >
               <div class="top-right">
                 <MainCard :themex="theme" />
               </div>
@@ -149,20 +167,55 @@ const darkThemeOverrides: GlobalThemeOverrides = {
         </div>
         <n-divider />
         <div class="bottom-portion-wrapper">
-          <n-carousel autoplay direction="horizontal" dot-type="line">
-            <img class="carousel-img" src="/assets/sonicmania.png" alt="Sonic Mania running on RPCSX">
-            <img class="carousel-img" src="/assets/we-are-doomed.png" alt="We Are Doomed running on RPCSX">
-            <img class="carousel-img" src="/assets/sample-1.png" alt="Development sample running on RPCSX">
-            <img class="carousel-img" src="/assets/steamydeck.jpg" alt="RPCSX crashing on Steam Deck">
+          <n-carousel
+            autoplay
+            direction="horizontal"
+            dot-type="line"
+          >
+            <img
+              class="carousel-img"
+              src="/assets/sonicmania.png"
+              alt="Sonic Mania running on RPCSX"
+            >
+            <img
+              class="carousel-img"
+              src="/assets/we-are-doomed.png"
+              alt="We Are Doomed running on RPCSX"
+            >
+            <img
+              class="carousel-img"
+              src="/assets/sample-1.png"
+              alt="Development sample running on RPCSX"
+            >
+            <img
+              class="carousel-img"
+              src="/assets/steamydeck.jpg"
+              alt="RPCSX crashing on Steam Deck"
+            >
           </n-carousel>
           <n-divider />
-          <n-text class="copyright-text">© {{ new Date().getFullYear() }} - RPCSX (the real one)</n-text>
+          <n-text class="copyright-text">
+            © {{ new Date().getFullYear() }} - RPCSX (the real one)
+          </n-text>
         </div>
       </div>
     </n-layout>
   </n-config-provider>
 </template>
 
+<script lang="ts">
+var theme = ref<BuiltInGlobalTheme | null>(darkTheme);
+
+export default defineComponent({
+  props: ['theme'],
+  methods: {
+    toggleTheme() {
+      theme.value = theme.value == null ? darkTheme : null;
+    }
+  }
+})
+</script>
+
 <style scoped>
 .n-layout {
   background-size: cover;
@@ -290,16 +343,3 @@ const darkThemeOverrides: GlobalThemeOverrides = {
   padding-top: 15%;
 }
 </style>
-
-<script lang="ts">
-var theme = ref<BuiltInGlobalTheme | null>(darkTheme);
-
-export default defineComponent({
-  methods: {
-    toggleTheme() {
-      theme.value = theme.value == null ? darkTheme : null;
-    }
-  },
-  props: ['theme']
-})
-</script>
diff --git a/src/components/ContentCard.vue b/src/components/ContentCard.vue
index 6c43375..f4e3da9 100644
--- a/src/components/ContentCard.vue
+++ b/src/components/ContentCard.vue
@@ -1,21 +1,27 @@
 <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">
-                <n-h3 class="card-header">
-                    <slot name="card-title" />
-                </n-h3>
-                <n-text class="body-text" id="card-body">
-                    <slot />
-                </n-text>
-            </div>
-        </div>
-    </n-card>
+  <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">
+        <n-h3 class="card-header">
+          <slot name="card-title" />
+        </n-h3>
+        <n-text
+          id="card-body"
+          class="body-text"
+        >
+          <slot />
+        </n-text>
+      </div>
+    </div>
+  </n-card>
 </template>
 
 <style scoped>
diff --git a/src/components/Hook.vue b/src/components/Hook.vue
index 32e8ea5..4146be0 100644
--- a/src/components/Hook.vue
+++ b/src/components/Hook.vue
@@ -16,6 +16,35 @@ const headers = response.headers
 var contributors = headers.get('link')?.match(/&page=(\d+)>; rel="last"/)[1]
 </script>
 
+<template>
+  <div class="hook">
+    <div class="hook-item">
+      <n-gradient-text
+        id="emu-name"
+        type="info"
+      >
+        RPCSX
+      </n-gradient-text>
+      <n-gradient-text type="info">
+        {{ getTime() }}
+      </n-gradient-text>
+      <n-text>of development.</n-text>
+    </div>
+    <div class="hook-item">
+      <n-gradient-text type="info">
+        {{ contributors }}
+      </n-gradient-text>
+      <n-text>experienced contributors.</n-text>
+    </div>
+    <div class="hook-item">
+      <n-gradient-text type="info">
+        0
+      </n-gradient-text>
+      <n-text>days since someone asked for Bloodborne.</n-text>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .hook {
   display: flex;
@@ -48,21 +77,3 @@ var contributors = headers.get('link')?.match(/&page=(\d+)>; rel="last"/)[1]
   src: url('/fonts/The_Rave_Is_In_Your_Pants.otf');
 }
 </style>
-
-<template>
-  <div class="hook">
-    <div class="hook-item">
-      <n-gradient-text type="info" id="emu-name">RPCSX</n-gradient-text>
-      <n-gradient-text type="info">{{ getTime() }}</n-gradient-text>
-      <n-text>of development.</n-text>
-    </div>
-    <div class="hook-item">
-      <n-gradient-text type="info">{{ contributors }}</n-gradient-text>
-      <n-text>experienced contributors.</n-text>
-    </div>
-    <div class="hook-item">
-      <n-gradient-text type="info">0</n-gradient-text>
-      <n-text>days since someone asked for Bloodborne.</n-text>
-    </div>
-  </div>
-</template>
diff --git a/src/components/MainCard.vue b/src/components/MainCard.vue
index aa29ef9..4a08754 100644
--- a/src/components/MainCard.vue
+++ b/src/components/MainCard.vue
@@ -12,18 +12,24 @@ const cardOverrides : Partial<CardThemeVars> = {
 
 </script>
 
+<template>
+  <n-card
+    hoverable
+    size="small"
+    :theme-overrides="cardOverrides"
+  >
+    <template #header>
+      RPCSX is your PlayStation™ 4 emulator.
+    </template>
+    <div class="body-text">
+      Use only with lawfully obtained archival copies of PS4 games you physically own. <strong>RPCSX is non-commercial and is not affiliated with Sony or PlayStation.</strong>
+    </div>
+  </n-card>
+</template>
+
 <style scoped>
   .n-card {
     max-width: 600px;
     line-height: 2.8em;
   }
-</style>
-
-<template>
-  <n-card hoverable size="small" :theme-overrides="cardOverrides">
-      <template #header>
-        RPCSX is your PlayStation™ 4 emulator.
-      </template>
-      <div class="body-text">Use only with lawfully obtained archival copies of PS4 games you physically own. <strong>RPCSX is non-commercial and is not affiliated with Sony or PlayStation.</strong></div>
-  </n-card>
-</template>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/components/TopBarMenu.vue b/src/components/TopBarMenu.vue
index 9fe2ff8..345a37c 100644
--- a/src/components/TopBarMenu.vue
+++ b/src/components/TopBarMenu.vue
@@ -91,31 +91,39 @@ const menuOptions: MenuOption[] = [
 
 <template>
   <div class="bar-wrapper">
-    <n-button quaternary tag="a" href="https://rpcsx.github.io/rpcsx-site/">
-      <img alt="RPCSX logo" class="logo" src="/assets/logo-dark.png" width="32" height="32" />
+    <n-button
+      quaternary
+      tag="a"
+      href="https://rpcsx.github.io/rpcsx-site/"
+    >
+      <img
+        alt="RPCSX logo"
+        class="logo"
+        src="/assets/logo-dark.png"
+        width="32"
+        height="32"
+      >
     </n-button>
-    <n-menu v-model:value="activeKey" mode="horizontal" :options="menuOptions" />
-    <n-button circle @click="toggle" class="dark-mode-button">
+    <n-menu
+      v-model:value="activeKey"
+      mode="horizontal"
+      :options="menuOptions"
+    />
+    <n-button
+      circle
+      class="dark-mode-button"
+      @click="toggle"
+    >
       <template #icon>
         <n-icon>
           <MoonIcon v-if="themex == null" />
           <SunIcon v-else />
         </n-icon>
       </template>
-
     </n-button>
   </div>
 </template>
 
-<style scoped>
-.bar-wrapper {
-  display: inline-block;
-  flex-flow: row nowrap;
-  text-align: center;
-  margin: 8px;
-}
-</style>
-
 <script lang="ts">
 export default defineComponent({
   methods: {
@@ -125,3 +133,12 @@ export default defineComponent({
   }
 })
 </script>
+
+<style scoped>
+.bar-wrapper {
+  display: inline-block;
+  flex-flow: row nowrap;
+  text-align: center;
+  margin: 8px;
+}
+</style>