diff --git a/pages/library.vue b/pages/library.vue
index 84f89e4..dcb0b84 100644
--- a/pages/library.vue
+++ b/pages/library.vue
@@ -33,7 +33,7 @@
         </NuxtLink>
       </ul>
     </div>
-    <div class="grow">
+    <div class="grow overflow-y-scroll">
       <NuxtPage />
     </div>
   </div>
diff --git a/pages/library/[id]/index.vue b/pages/library/[id]/index.vue
index f8109b8..2341cab 100644
--- a/pages/library/[id]/index.vue
+++ b/pages/library/[id]/index.vue
@@ -5,12 +5,22 @@
     <!-- banner image -->
     <div class="absolute flex top-0 h-fit inset-x-0 -z-[20]">
       <img :src="bannerUrl" class="w-full h-auto object-cover" />
+      <h1
+        class="absolute inset-x-0 w-full text-center top-32 -translate-y-[50%] text-4xl text-zinc-100 font-bold font-display z-50"
+      >
+        {{ game.mName }}
+      </h1>
       <div
         class="absolute inset-0 bg-gradient-to-b from-transparent to-50% to-zinc-900"
       />
     </div>
     <!-- main page -->
-    <div class="w-full min-h-screen mx-auto bg-zinc-900 px-16 py-12"></div>
+    <div class="w-full min-h-screen mx-auto bg-zinc-900 px-5 py-6">
+      <!-- game toolbar -->
+      <div>
+        <GameButton v-model="status" />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -21,8 +31,11 @@ import { invoke } from "@tauri-apps/api/core";
 const route = useRoute();
 const id = route.params.id;
 
-const rawGame = await invoke<string>("fetch_game", { id: id });
-const game: Game = JSON.parse(rawGame);
+const raw: { game: Game; status: any } = JSON.parse(
+  await invoke<string>("fetch_game", { id: id })
+);
+const game = ref(raw.game);
+const status = ref(raw.status);
 
-const bannerUrl = await useObject(game.mBannerId);
+const bannerUrl = await useObject(game.value.mBannerId);
 </script>
diff --git a/src-tauri/src/db.rs b/src-tauri/src/db.rs
index 775107b..c84e122 100644
--- a/src-tauri/src/db.rs
+++ b/src-tauri/src/db.rs
@@ -1,4 +1,5 @@
 use std::{
+    collections::HashMap,
     fs::{self, create_dir_all},
     path::PathBuf,
     sync::LazyLock,
@@ -10,7 +11,7 @@ use serde::{Deserialize, Serialize};
 use url::Url;
 
 #[derive(serde::Serialize, Clone, Deserialize)]
-#[serde(rename_all="camelCase")]
+#[serde(rename_all = "camelCase")]
 pub struct DatabaseAuth {
     pub private: String,
     pub cert: String,
@@ -18,17 +19,27 @@ pub struct DatabaseAuth {
 }
 
 #[derive(Serialize, Clone, Deserialize)]
-#[serde(rename_all="camelCase")]
-pub struct DatabaseApps {
-    pub apps_base_dir: String,
+pub enum DatabaseGameStatus {
+    Remote,
+    Downloading,
+    Installed,
+    Updating,
+    Uninstalling,
 }
 
 #[derive(Serialize, Clone, Deserialize)]
-#[serde(rename_all="camelCase")]
+#[serde(rename_all = "camelCase")]
+pub struct DatabaseGames {
+    pub games_base_dir: String,
+    pub games_statuses: HashMap<String, DatabaseGameStatus>,
+}
+
+#[derive(Serialize, Clone, Deserialize)]
+#[serde(rename_all = "camelCase")]
 pub struct Database {
     pub auth: Option<DatabaseAuth>,
     pub base_url: String,
-    pub downloads: DatabaseApps,
+    pub games: DatabaseGames,
 }
 
 pub type DatabaseInterface =
@@ -41,16 +52,17 @@ pub trait DatabaseImpls {
 impl DatabaseImpls for DatabaseInterface {
     fn set_up_database() -> DatabaseInterface {
         let db_path = DATA_ROOT_DIR.join("drop.db");
-        let apps_base_dir = DATA_ROOT_DIR.join("apps");
+        let games_base_dir = DATA_ROOT_DIR.join("games");
 
         create_dir_all(DATA_ROOT_DIR.clone()).unwrap();
-        create_dir_all(apps_base_dir.clone()).unwrap();
+        create_dir_all(games_base_dir.clone()).unwrap();
 
         let default = Database {
             auth: None,
             base_url: "".to_string(),
-            downloads: DatabaseApps {
-                apps_base_dir: apps_base_dir.to_str().unwrap().to_string(),
+            games: DatabaseGames {
+                games_base_dir: games_base_dir.to_str().unwrap().to_string(),
+                games_statuses: HashMap::new(),
             },
         };
         #[allow(clippy::let_and_return)]
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 8751662..0aefa92 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -147,8 +147,6 @@ pub fn run() {
                 .join(object_id)
                 .unwrap();
 
-            info!["{}", object_url.to_string()];
-
             let header = generate_authorization_header();
             let client: reqwest::blocking::Client = reqwest::blocking::Client::new();
             let response = client
diff --git a/src-tauri/src/library.rs b/src-tauri/src/library.rs
index 448a950..1c81870 100644
--- a/src-tauri/src/library.rs
+++ b/src-tauri/src/library.rs
@@ -6,9 +6,16 @@ use tauri::{AppHandle, Manager};
 
 use crate::{auth::generate_authorization_header, AppState, DB};
 use crate::db::DatabaseImpls;
+use crate::db::DatabaseGameStatus;
+
+#[derive(serde::Serialize)]
+struct FetchGameStruct {
+    game: Game,
+    status: DatabaseGameStatus,
+}
 
 #[derive(Serialize, Deserialize, Clone)]
-#[serde(rename_all="camelCase")]
+#[serde(rename_all = "camelCase")]
 pub struct Game {
     id: String,
     m_name: String,
@@ -16,7 +23,6 @@ pub struct Game {
     m_description: String,
     // mDevelopers
     // mPublishers
-
     m_icon_id: String,
     m_banner_id: String,
     m_cover_id: String,
@@ -50,8 +56,16 @@ pub fn fetch_library(app: AppHandle) -> Result<String, String> {
     let state = app.state::<Mutex<AppState>>();
     let mut handle = state.lock().unwrap();
 
+    let mut db_handle = DB.borrow_data_mut().unwrap();
+
     for game in games.iter() {
         handle.games.insert(game.id.clone(), game.clone());
+        if !db_handle.games.games_statuses.contains_key(&game.id) {
+            db_handle
+                .games
+                .games_statuses
+                .insert(game.id.clone(), DatabaseGameStatus::Remote);
+        }
     }
 
     drop(handle);
@@ -64,9 +78,16 @@ pub fn fetch_game(id: String, app: tauri::AppHandle) -> Result<String, String> {
     let state = app.state::<Mutex<AppState>>();
     let handle = state.lock().unwrap();
     let game = handle.games.get(&id);
-    if game.is_some() {
-        return Ok(json!(game.unwrap()).to_string());
+    if let Some(game) = game {
+        let db_handle = DB.borrow_data().unwrap();
+
+        let data = FetchGameStruct {
+            game: game.clone(),
+            status: db_handle.games.games_statuses.get(&game.id).unwrap().clone(),
+        };
+
+        return Ok(json!(data).to_string());
     }
 
-    Ok("".to_string())
+    Err("".to_string())
 }
diff --git a/types.d.ts b/types.d.ts
index 566929f..f6e5c1b 100644
--- a/types.d.ts
+++ b/types.d.ts
@@ -1,17 +1,17 @@
 import type { User } from "@prisma/client";
-import type { Component } from "vue"
+import type { Component } from "vue";
 
 export type NavigationItem = {
-    prefix: string,
-    route: string,
-    label: string,
-}
+  prefix: string;
+  route: string;
+  label: string;
+};
 
 export type QuickActionNav = {
-    icon: Component,
-    notifications?: number,
-    action: () => Promise<void>,
-}
+  icon: Component;
+  notifications?: number;
+  action: () => Promise<void>;
+};
 export type AppState = {
   status: AppStatus;
   user?: User;
@@ -22,4 +22,12 @@ export enum AppStatus {
   SignedOut = "SignedOut",
   SignedIn = "SignedIn",
   SignedInNeedsReauth = "SignedInNeedsReauth",
-}
\ No newline at end of file
+}
+
+export enum GameStatus {
+  Remote = "Remote",
+  Downloading = "Downloading",
+  Installed = "Installed",
+  Updating = "Updating",
+  Uninstalling = "Uninstalling",
+}