diff --git a/pages/library.vue b/pages/library.vue
new file mode 100644
index 0000000..a1838d9
--- /dev/null
+++ b/pages/library.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="flex flex-row h-full">
+    <div class="flex-none max-h-full overflow-y-auto w-64 bg-zinc-950 px-2 py-1">
+      <ul class="flex flex-col gap-y-1">
+        <NuxtLink
+          v-for="(nav, navIdx) in navigation"
+          :key="nav.route"
+          :class="[
+            'transition-all duration-200 rounded-lg flex items-center py-1.5 px-3',
+            navIdx === currentNavigationIndex 
+              ? 'bg-zinc-800 text-zinc-100' 
+              : 'bg-zinc-900/50 text-zinc-400 hover:bg-zinc-800/70 hover:text-zinc-300',
+          ]"
+          :href="nav.route"
+        >
+          <div class="flex items-center w-full gap-x-3">
+            <img
+              class="h-8 w-10 flex-none object-cover bg-zinc-900"
+              :src="icons[navIdx]"
+              alt=""
+            />
+            <p class="truncate text-sm font-display leading-6 flex-1">
+              {{ nav.label }}
+            </p>
+          </div>
+        </NuxtLink>
+      </ul>
+    </div>
+    <div class="grow overflow-y-auto">
+      <NuxtPage />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { invoke } from "@tauri-apps/api/core";
+import type { Game, NavigationItem } from "~/types";
+
+const games: Array<Game> = await invoke("fetch_library");
+const icons = await Promise.all(games.map((e) => useObject(e.mIconId)));
+
+const navigation = games.map((e) => {
+  const item: NavigationItem = {
+    label: e.mName,
+    route: `/library/${e.id}`,
+    prefix: `/library/${e.id}`,
+  };
+  return item;
+});
+
+const currentNavigationIndex = useCurrentNavigationIndex(navigation);
+</script>