diff --git a/main/components/GamePanel.vue b/main/components/GamePanel.vue
new file mode 100644
index 00000000..a931f308
--- /dev/null
+++ b/main/components/GamePanel.vue
@@ -0,0 +1,106 @@
+<template>
+  <NuxtLink
+    :href="href"
+    :class="[
+      'group relative flex-1 min-w-42 max-w-48 h-64 rounded-lg overflow-hidden',
+      'transition-all duration-300 text-left hover:scale-[1.02] hover:shadow-lg hover:-translate-y-0.5',
+      'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900',
+      isSelected
+        ? 'ring-2 ring-blue-500 shadow-lg shadow-blue-500/20'
+        : '',
+    ]"
+  >
+    <!-- Background Image -->
+    <div
+      :class="{
+        'transition-all duration-300 group-hover:scale-110': true,
+      }"
+      class="absolute inset-0"
+    >
+      <!-- Cover Image (if available) -->
+      <img
+        v-if="coverSrc"
+        :src="coverSrc"
+        :alt="game.mName"
+        class="w-full h-full object-cover brightness-[90%] blur-[1px]"
+      />
+      <!-- Fallback to Icon -->
+      <div
+        v-else-if="iconSrc"
+        class="w-full h-full flex items-center justify-center bg-gradient-to-br from-zinc-800 to-zinc-900"
+      >
+        <img
+          class="w-2/3 h-2/3 object-contain brightness-[90%] blur-[1px]"
+          :src="iconSrc"
+          :alt="game.mName"
+        />
+      </div>
+      <!-- Placeholder -->
+      <div
+        v-else
+        class="w-full h-full bg-gradient-to-br from-zinc-800 to-zinc-900"
+      />
+      <!-- Gradient Overlay -->
+      <div
+        class="absolute inset-0 bg-gradient-to-t from-zinc-950/80 via-zinc-950/0 to-transparent"
+      />
+    </div>
+
+    <!-- Content Overlay -->
+    <div class="absolute bottom-0 left-0 w-full p-3">
+      <h1
+        :class="{
+          'group-hover:text-white transition-colors': true,
+        }"
+        class="text-zinc-100 text-sm font-bold font-display mb-1"
+      >
+        {{ game.mName }}
+      </h1>
+      <p
+        v-if="game.mShortDescription"
+        :class="{
+          'group-hover:text-zinc-300 transition-colors': true,
+        }"
+        class="text-zinc-400 text-xs line-clamp-2 mb-1.5"
+      >
+        {{ game.mShortDescription }}
+      </p>
+      <!-- Status Badge -->
+      <div v-if="statusText" class="flex items-center mt-1">
+        <span
+          :class="[
+            'inline-flex items-center px-2 py-0.5 rounded-md text-[10px] font-bold uppercase font-display',
+            statusClass,
+          ]"
+        >
+          {{ statusText }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Selected Indicator -->
+    <div
+      v-if="isSelected"
+      class="absolute top-3 right-3 z-20 w-2.5 h-2.5 rounded-full bg-blue-500 shadow-lg shadow-blue-500/50 ring-2 ring-blue-500/30"
+    />
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+import type { Game, GameStatus } from "~/types";
+
+type GameWithStatus = {
+  game: Game;
+  status: GameStatus;
+};
+
+defineProps<{
+  game: GameWithStatus;
+  href: string;
+  coverSrc?: string;
+  iconSrc?: string;
+  statusText?: string;
+  statusClass?: string;
+  isSelected?: boolean;
+}>();
+</script>
diff --git a/main/components/LibrarySearch.vue b/main/components/LibrarySearch.vue
index d4beffaf..b19288ab 100644
--- a/main/components/LibrarySearch.vue
+++ b/main/components/LibrarySearch.vue
@@ -25,6 +25,14 @@
       >
         <ArrowPathIcon class="size-4" />
       </button>
+      <button
+        @click="toggleView"
+        class="p-1.5 flex items-center justify-center transition-all duration-200 size-10 hover:scale-105 active:scale-95 rounded-lg bg-zinc-800/50 text-zinc-100 hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-950"
+        :title="libraryView === 'list' ? 'Switch to grid view' : 'Switch to list view'"
+      >
+        <Squares2X2Icon v-if="libraryView === 'list'" class="size-4" />
+        <Bars3Icon v-else class="size-4" />
+      </button>
     </div>
 
     <TransitionGroup name="list" tag="ul" class="flex flex-col gap-y-1.5">
@@ -52,7 +60,7 @@
         <DisclosurePanel as="dd" class="mt-2 flex flex-col gap-y-1.5">
           <NuxtLink
             v-for="item in nav.items"
-            :key="nav.id"
+            :key="item.id"
             :class="[
               'transition-all duration-300 rounded-lg flex items-center px-1 py-1.5 hover:scale-105 active:scale-95 hover:shadow-lg hover:shadow-zinc-950/50',
               currentNavigation == item.id
@@ -127,13 +135,11 @@ import {
   MagnifyingGlassIcon,
   MinusSmallIcon,
   PlusSmallIcon,
+  Squares2X2Icon,
+  Bars3Icon,
 } from "@heroicons/vue/20/solid";
-import { invoke } from "@tauri-apps/api/core";
 import {
   GameStatusEnum,
-  type Collection as Collection,
-  type Game,
-  type GameStatus,
 } from "~/types";
 import { TransitionGroup } from "vue";
 import { listen } from "@tauri-apps/api/event";
@@ -143,7 +149,7 @@ const gameStatusTextStyle: { [key in GameStatusEnum]: string } = {
   [GameStatusEnum.Installed]: "text-green-500",
   [GameStatusEnum.Downloading]: "text-zinc-400",
   [GameStatusEnum.Validating]: "text-blue-300",
-  [GameStatusEnum.Running]: "text-green-500",
+  [GameStatusEnum.Running]: "text-blue-500",
   [GameStatusEnum.Remote]: "text-zinc-700",
   [GameStatusEnum.Queued]: "text-zinc-400",
   [GameStatusEnum.Updating]: "text-zinc-400",
@@ -168,54 +174,9 @@ const router = useRouter();
 
 const searchQuery = ref("");
 
-const loading = ref(false);
-const games: {
-  [key: string]: { game: Game; status: Ref<GameStatus, GameStatus> };
-} = {};
-const icons: { [key: string]: string } = {};
-
-const collections: Ref<Collection[]> = ref([]);
-
-async function calculateGames(clearAll = false, forceRefresh = false) {
-  if (clearAll) {
-    collections.value = [];
-    loading.value = true;
-  }
-  // If we update immediately, the navigation gets re-rendered before we
-  // add all the necessary state, and it freaks tf out
-  const newGames = await invoke<Game[]>("fetch_library", {
-    hardRefresh: forceRefresh,
-  });
-  const otherCollections = await invoke<Collection[]>("fetch_collections", {
-    hardRefresh: forceRefresh,
-  });
-  const allGames = [
-    ...newGames,
-    ...otherCollections
-      .map((e) => e.entries)
-      .flat()
-      .map((e) => e.game),
-  ].filter((v, i, a) => a.indexOf(v) === i);
-
-  for (const game of allGames) {
-    if (games[game.id]) continue;
-    games[game.id] = await useGame(game.id);
-  }
-  for (const game of allGames) {
-    if (icons[game.id]) continue;
-    icons[game.id] = await useObject(game.mIconObjectId);
-  }
-
-  const libraryCollection = {
-    id: "library",
-    name: "Library",
-    isDefault: true,
-    entries: newGames.map((e) => ({ gameId: e.id, game: e })),
-  } satisfies Collection;
-
-  loading.value = false;
-  collections.value = [libraryCollection, ...otherCollections];
-}
+// Use library view composable
+const { libraryView, toggleView } = useLibraryView();
+const { loading, games, icons, collections, calculateGames } = useLibraryGames();
 
 // Wait up to 300 ms for the library to load, otherwise
 // show the loading state while we while
@@ -229,6 +190,16 @@ await new Promise<void>((r) => {
   setTimeout(resolveFunc, 300);
 });
 
+// Listen for library updates
+listen("update_library", async (event) => {
+  console.log("Updating library");
+  let oldNavigation = currentNavigation.value;
+  await calculateGames();
+  if (oldNavigation !== currentNavigation.value) {
+    router.push("/library");
+  }
+});
+
 const navigation = computed(() =>
   collections.value.map((collection) => {
     const items = collection.entries.map(({ game }) => {
@@ -273,15 +244,6 @@ const filteredNavigation = computed(() => {
     }))
     .filter((e) => e.items.length > 0);
 });
-
-listen("update_library", async (event) => {
-  console.log("Updating library");
-  let oldNavigation = currentNavigation.value;
-  await calculateGames();
-  if (oldNavigation !== currentNavigation.value) {
-    router.push("/library");
-  }
-});
 </script>
 
 <style scoped>
diff --git a/main/composables/library-games.ts b/main/composables/library-games.ts
new file mode 100644
index 00000000..ea4b2ecd
--- /dev/null
+++ b/main/composables/library-games.ts
@@ -0,0 +1,71 @@
+import { invoke } from "@tauri-apps/api/core";
+import {
+  GameStatusEnum,
+  type Collection,
+  type Game,
+  type GameStatus,
+} from "~/types";
+
+export const useLibraryGames = () => {
+  const loading = ref(false);
+  const games: {
+    [key: string]: { game: Game; status: Ref<GameStatus, GameStatus> };
+  } = {};
+  const icons: { [key: string]: string } = {};
+  const covers: { [key: string]: string } = {};
+  const collections: Ref<Collection[]> = ref([]);
+
+  async function calculateGames(clearAll = false, forceRefresh = false) {
+    if (clearAll) {
+      collections.value = [];
+      loading.value = true;
+    }
+    // If we update immediately, the navigation gets re-rendered before we
+    // add all the necessary state, and it freaks tf out
+    const newGames = await invoke<Game[]>("fetch_library", {
+      hardRefresh: forceRefresh,
+    });
+    const otherCollections = await invoke<Collection[]>("fetch_collections", {
+      hardRefresh: forceRefresh,
+    });
+    const allGames = [
+      ...newGames,
+      ...otherCollections
+        .map((e) => e.entries)
+        .flat()
+        .map((e) => e.game),
+    ].filter((v, i, a) => a.indexOf(v) === i);
+
+    for (const game of allGames) {
+      if (games[game.id]) continue;
+      games[game.id] = await useGame(game.id);
+    }
+    for (const game of allGames) {
+      if (icons[game.id]) continue;
+      icons[game.id] = await useObject(game.mIconObjectId);
+    }
+    for (const game of allGames) {
+      if (covers[game.id]) continue;
+      covers[game.id] = await useObject(game.mCoverObjectId);
+    }
+
+    const libraryCollection = {
+      id: "library",
+      name: "Library",
+      isDefault: true,
+      entries: newGames.map((e) => ({ gameId: e.id, game: e })),
+    } satisfies Collection;
+
+    loading.value = false;
+    collections.value = [libraryCollection, ...otherCollections];
+  }
+
+  return {
+    loading: readonly(loading),
+    games,
+    icons,
+    covers,
+    collections: readonly(collections),
+    calculateGames,
+  };
+};
diff --git a/main/composables/library-view.ts b/main/composables/library-view.ts
new file mode 100644
index 00000000..c21cd22e
--- /dev/null
+++ b/main/composables/library-view.ts
@@ -0,0 +1,39 @@
+import { invoke } from "@tauri-apps/api/core";
+import type { Settings } from "~/types";
+
+export const useLibraryView = () => {
+  const libraryView = useState<"list" | "grid">("library-view", () => "list");
+
+  // Load initial value from settings if not already loaded
+  const state = libraryView.value;
+  if (state === "list") {
+    invoke<Settings>("fetch_settings").then((settings) => {
+      if (libraryView.value === "list") {
+        libraryView.value = (settings?.libraryView as "list" | "grid") || "list";
+      }
+    });
+  }
+
+  const toggleView = async () => {
+    const newView = libraryView.value === "list" ? "grid" : "list";
+    libraryView.value = newView;
+    await invoke("update_settings", {
+      newSettings: { libraryView: newView },
+    });
+  };
+
+  const setView = async (view: "list" | "grid") => {
+    if (libraryView.value !== view) {
+      libraryView.value = view;
+      await invoke("update_settings", {
+        newSettings: { libraryView: view },
+      });
+    }
+  };
+
+  return {
+    libraryView,
+    toggleView,
+    setView,
+  };
+};
diff --git a/main/pages/library/index.vue b/main/pages/library/index.vue
index a23a7993..6d4e8daf 100644
--- a/main/pages/library/index.vue
+++ b/main/pages/library/index.vue
@@ -1,19 +1,154 @@
 <template>
-
-    <div class="h-full flex flex-col items-center justify-center">
-        <div class="text-center">
-            <div class="flex flex-col items-center gap-y-4">
-                <div class="p-4 rounded-xl bg-zinc-700/50 backdrop-blur-sm">
-                    <RocketLaunchIcon class="size-12 text-zinc-400" />
-                </div>
-                <div>
-                    <h3 class="text-xl font-display font-semibold text-zinc-100">Select a game</h3>
-                    <p class="mt-1 text-sm text-zinc-400">Choose a game from your library to view details</p>
-                </div>
-            </div>
+  <div v-if="libraryView === 'grid'" class="h-full overflow-y-auto p-6">
+    <div
+      v-if="loading"
+      class="h-full flex items-center justify-center text-zinc-100"
+    >
+      <div role="status">
+        <svg
+          aria-hidden="true"
+          class="w-6 h-6 text-transparent animate-spin fill-zinc-600"
+          viewBox="0 0 100 101"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+            fill="currentColor"
+          />
+          <path
+            d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+            fill="currentFill"
+          />
+        </svg>
+        <span class="sr-only">Loading...</span>
+      </div>
+    </div>
+    <div
+      v-else
+      class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4"
+    >
+      <template v-for="collection in filteredNavigation" :key="collection.id">
+        <GamePanel
+          v-for="item in collection.items"
+          :key="item.id"
+          :href="item.route"
+          :game="games[item.id]"
+          :cover-src="covers[item.id]"
+          :icon-src="icons[item.id]"
+          :status-text="gameStatusText[games[item.id].status.value.type]"
+          :status-class="gameStatusTextStyle[games[item.id].status.value.type]"
+          :is-selected="currentNavigation == item.id"
+        />
+      </template>
+    </div>
+  </div>
+  <div v-else class="h-full flex flex-col items-center justify-center">
+    <div class="text-center">
+      <div class="flex flex-col items-center gap-y-4">
+        <div class="p-4 rounded-xl bg-zinc-700/50 backdrop-blur-sm">
+          <RocketLaunchIcon class="size-12 text-zinc-400" />
+        </div>
+        <div>
+          <h3 class="text-xl font-display font-semibold text-zinc-100">
+            Select a game
+          </h3>
+          <p class="mt-1 text-sm text-zinc-400">
+            Choose a game from your library to view details
+          </p>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 <script setup lang="ts">
-import { RocketLaunchIcon } from '@heroicons/vue/24/outline';
+import { RocketLaunchIcon } from "@heroicons/vue/24/outline";
+import {
+  GameStatusEnum,
+} from "~/types";
+import { listen } from "@tauri-apps/api/event";
+
+const { libraryView } = useLibraryView();
+
+const route = useRoute();
+const currentNavigation = computed(() => {
+  return route.path.slice("/library/".length);
+});
+
+// Style information
+const gameStatusTextStyle: { [key in GameStatusEnum]: string } = {
+  [GameStatusEnum.Installed]: "text-green-500",
+  [GameStatusEnum.Downloading]: "text-zinc-400",
+  [GameStatusEnum.Validating]: "text-blue-300",
+  [GameStatusEnum.Running]: "text-green-500",
+  [GameStatusEnum.Remote]: "text-zinc-700",
+  [GameStatusEnum.Queued]: "text-zinc-400",
+  [GameStatusEnum.Updating]: "text-zinc-400",
+  [GameStatusEnum.Uninstalling]: "text-zinc-100",
+  [GameStatusEnum.SetupRequired]: "text-yellow-500",
+  [GameStatusEnum.PartiallyInstalled]: "text-gray-400",
+};
+const gameStatusText: { [key in GameStatusEnum]: string } = {
+  [GameStatusEnum.Remote]: "Not installed",
+  [GameStatusEnum.Queued]: "Queued",
+  [GameStatusEnum.Downloading]: "Downloading...",
+  [GameStatusEnum.Validating]: "Validating...",
+  [GameStatusEnum.Installed]: "Installed",
+  [GameStatusEnum.Updating]: "Updating...",
+  [GameStatusEnum.Uninstalling]: "Uninstalling...",
+  [GameStatusEnum.SetupRequired]: "Setup required",
+  [GameStatusEnum.Running]: "Running",
+  [GameStatusEnum.PartiallyInstalled]: "Partially installed",
+};
+
+const { loading, games, icons, covers, collections, calculateGames } = useLibraryGames();
+
+// Wait up to 300 ms for the library to load
+await new Promise<void>((r) => {
+  let hasResolved = false;
+  const resolveFunc = () => {
+    if (!hasResolved) r();
+    hasResolved = true;
+  };
+  calculateGames(true).then(resolveFunc);
+  setTimeout(resolveFunc, 300);
+});
+
+const navigation = computed(() =>
+  collections.value.map((collection) => {
+    const items = collection.entries.map(({ game }) => {
+      const status = games[game.id].status;
+
+      const isInstalled = computed(
+        () => status.value.type != GameStatusEnum.Remote
+      );
+
+      const item = {
+        label: game.mName,
+        route: `/library/${game.id}`,
+        prefix: `/library/${game.id}`,
+        isInstalled,
+        id: game.id,
+        game: game, // Include full game object for description access
+      };
+      return item;
+    });
+
+    return {
+      id: collection.id,
+      name: collection.name,
+      deft: collection.isDefault,
+      items,
+    };
+  })
+);
+
+const filteredNavigation = computed(() => {
+  return navigation.value;
+});
+
+// Listen for library updates
+listen("update_library", async () => {
+  await calculateGames();
+});
 </script>
\ No newline at end of file
diff --git a/main/pages/settings/interface.vue b/main/pages/settings/interface.vue
index 7df32e15..93a6100c 100644
--- a/main/pages/settings/interface.vue
+++ b/main/pages/settings/interface.vue
@@ -1,23 +1,49 @@
 <template>
-  <div class="grow w-full h-full flex items-center justify-center">
-    <div class="flex flex-col items-center">
-      <WrenchScrewdriverIcon
-        class="h-12 w-12 text-blue-600"
-        aria-hidden="true"
-      />
-      <div class="mt-3 text-center sm:mt-5">
-        <h1 class="text-3xl font-semibold font-display leading-6 text-zinc-100">
-          Under construction
-        </h1>
-        <div class="mt-4">
-          <p class="text-sm text-zinc-400 max-w-lg">
-            This page hasn't been implemented yet.
-          </p>
+  <div class="grow w-full h-full">
+    <div class="border-b border-zinc-700 py-5">
+      <h3 class="text-base font-semibold font-display leading-6 text-zinc-100">
+        Interface
+      </h3>
+    </div>
+
+    <div class="mt-5">
+      <div class="space-y-8">
+        <div class="flex flex-row items-center justify-between">
+          <div>
+            <h3 class="text-sm font-medium leading-6 text-zinc-100">Library View</h3>
+            <p class="mt-1 text-sm leading-6 text-zinc-400">
+              Choose how games are displayed in your library
+            </p>
+          </div>
+          <div class="flex gap-x-2">
+            <button
+              @click="() => setView('list')"
+              :class="[
+                'px-4 py-2 rounded-lg text-sm font-semibold transition-all duration-200 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900',
+                libraryView === 'list'
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-zinc-800 text-zinc-300 hover:bg-zinc-700',
+              ]"
+            >
+              List
+            </button>
+            <button
+              @click="() => setView('grid')"
+              :class="[
+                'px-4 py-2 rounded-lg text-sm font-semibold transition-all duration-200 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900',
+                libraryView === 'grid'
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-zinc-800 text-zinc-300 hover:bg-zinc-700',
+              ]"
+            >
+              Grid
+            </button>
+          </div>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { WrenchScrewdriverIcon } from "@heroicons/vue/20/solid";
+const { libraryView, setView } = useLibraryView();
 </script>
diff --git a/main/types.ts b/main/types.ts
index f63a9c57..9e05c255 100644
--- a/main/types.ts
+++ b/main/types.ts
@@ -93,4 +93,5 @@ export type Settings = {
   autostart: boolean;
   maxDownloadThreads: number;
   forceOffline: boolean;
+  libraryView: "list" | "grid";
 };
diff --git a/src-tauri/database/src/models.rs b/src-tauri/database/src/models.rs
index d05a0143..bca77bb4 100644
--- a/src-tauri/database/src/models.rs
+++ b/src-tauri/database/src/models.rs
@@ -137,7 +137,8 @@ pub mod data {
         pub struct Settings {
             pub autostart: bool,
             pub max_download_threads: usize,
-            pub force_offline: bool, // ... other settings ...
+            pub force_offline: bool,
+            pub library_view: String, // "list" or "grid"
         }
         impl Default for Settings {
             fn default() -> Self {
@@ -145,6 +146,7 @@ pub mod data {
                     autostart: false,
                     max_download_threads: 4,
                     force_offline: false,
+                    library_view: "list".to_string(),
                 }
             }
         }