diff --git a/components/PageHeader.vue b/components/PageHeader.vue
index fff29f1..96107c4 100644
--- a/components/PageHeader.vue
+++ b/components/PageHeader.vue
@@ -8,6 +8,7 @@ defineProps<{
 <template>
   <h2
     text-2xl
+    fw-bold
     md-text-3xl
     mb4
     mt-0
diff --git a/components/PersonInfo.vue b/components/PersonInfo.vue
index 4150251..34ddc9c 100644
--- a/components/PersonInfo.vue
+++ b/components/PersonInfo.vue
@@ -10,10 +10,10 @@ const { data: user } = await useFetch('/api/user')
     <section>
       <p>
         I'm <strong text-primary>{{ user?.name }}</strong>,
-        <code text-p-r font-dank v-text="`<Front-End Developer />`" />
+        <code text-p-r italic font-dank v-text="`<Front-End Developer />`" />
         <span text-p-r animate-count-infinite animate-duration-2000 animate-flash> | </span>
         🧑🏻‍💻 &
-        <code text-sm rd-sm font-dank b="~ dashed orange/60" p-1 text-p-r>Open Source Enthusiast</code>
+        <code italic text-sm rd-sm font-dank b="~ dashed orange/60" p-1 text-p-r>Open Source Enthusiast</code>
       </p>
       <p italic font-dank mt-2>
         「 {{ user?.bio }} 」
diff --git a/components/repo/RepoCard.vue b/components/repo/RepoCard.vue
index 917e421..2146b4c 100644
--- a/components/repo/RepoCard.vue
+++ b/components/repo/RepoCard.vue
@@ -23,10 +23,13 @@ defineProps<{
         <i i-ri:git-repository-line />
         <span>{{ repo.name }}</span>
         <span
-          fw-normal
           inline-block
-          important-rounded-full
-          :class="repo.is_template ? 'bg-yellow bg-blue' : 'dark-bg-teal bg-red'"
+          rounded-full
+          text-xs p="x1 y0.25"
+          :class="repo.is_template
+            ? 'dark:bg-yellow/20 dark:text-yellow/80 bg-blue/20 text-blue/80'
+            : 'dark:bg-purple/20 dark:text-purple/80 bg-red/20 text-red/80'
+          "
         >
           {{ repo.private ? 'Private' : 'Public' }}
           {{ repo.is_template ? 'Template' : '' }}
diff --git a/pages/projects.vue b/pages/projects.vue
index cfe30d1..92c7ac6 100644
--- a/pages/projects.vue
+++ b/pages/projects.vue
@@ -1,8 +1,6 @@
 <script lang='ts' setup>
 import { useTitle } from '@vueuse/core'
 
-const { data: repoGroup } = await useFetch('/api/repos')
-
 useTitle('Projects | Chris')
 useHead({
   title: 'Projects | Chris',
@@ -19,18 +17,22 @@ useHead({
     },
   ],
 })
+
+const { data } = await useFetch('/api/repos')
 </script>
 
 <template>
   <div ma max-w-65ch>
     <PageHeader title="Projects" description="List of projects that I am proud of." />
-    <template v-for="(repos, key) in repoGroup" :key="key">
-      <h4>
-        {{ key }}
-      </h4>
-      <div grid="~ cols-1 md:cols-2 gap-4">
-        <RepoCard v-for="repo in repos" :key="repo.id" :repo="repo" />
+    <div mt-8 space-y-8>
+      <div v-for="(repos, key) in data" :key="key">
+        <h4 mb-2>
+          {{ key }}
+        </h4>
+        <div grid="~ cols-1 md:cols-2 gap-4">
+          <RepoCard v-for="repo in repos" :key="repo.id" :repo="repo" />
+        </div>
       </div>
-    </template>
+    </div>
   </div>
 </template>
diff --git a/styles/main.css b/styles/main.css
index 045d05a..9e215d4 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -5,7 +5,7 @@ body,
 }
 
 body {
-  --uno: text text-op-64 bg font-dm;
+  --uno: text text-op-64 bg;
 }
 
 body::-webkit-scrollbar {
@@ -13,7 +13,7 @@ body::-webkit-scrollbar {
 }
 
 #__nuxt{
-  --uno: min-h-screen flex flex-col;
+  --uno: min-h-screen flex flex-col font-dm;
 }
 
 ::selection {
diff --git a/uno.config.ts b/uno.config.ts
index 38e9e0f..dbae886 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -157,7 +157,7 @@ export default defineConfig({
       typography: { cssExtend: typographyCssExtend },
       webFonts: {
         fonts: {
-          dm: ['DM Sans', 'DM Sans:400,700'],
+          dm: ['DM Sans:400,700'],
         },
       },
       compileClass: true,