diff --git a/components/GameCard.vue b/components/GameCard.vue
index ac43779..262e342 100644
--- a/components/GameCard.vue
+++ b/components/GameCard.vue
@@ -1,18 +1,20 @@
 <template>
-  <div class="h-128 w-64 border flex flex-col text-center">
-    <div class="mb-5 bg-transparent hover:bg-gray-200 inline-block">
-      <img 
-        :src="imgPath" 
-        alt="Game Artwork" 
-        class="transform hover:translate-x-6 hover:-translate-y-6 delay-50 duration-100 inline-block"
-      />
+  <div class="h-full w-64 border flex flex-col text-center justify-end">
+    <div class="h-full mb-5 bg-transparent hover:bg-gray-200 flex justify-center">
+      <div class="flex">
+        <img 
+          :src="imgPath" 
+          alt="Game Artwork" 
+          class="transform hover:translate-x-6 hover:-translate-y-6 delay-50 duration-100 inline-block"
+        />
+      </div>
     </div>
-    <div class="text-lg">
-      {{ game?.name }}
+    <div class="text-lg pb-3">
+      <p>{{ game?.name }}</p>
     </div>
-    <p class="text-m text-gray-500 break-words text-wrap truncate overflow-hidden px-2">
+    <!-- <p class="text-m text-gray-500 break-words text-wrap truncate overflow-hidden px-2">
       {{ game?.summary }}
-    </p>
+    </p> -->
   </div>
 </template>
 
@@ -31,4 +33,18 @@ const props = defineProps({
 const config = useRuntimeConfig();
 
 const imgPath = computed(() => props.game?.image.original_url != null ? `${config.public.imgBaseUrl}${props.game.image.original_url}` : 'https://via.placeholder.com/300x500');
-</script>
\ No newline at end of file
+</script>
+
+<style>
+img {
+    max-height: 100%;
+    max-width: 100%;
+    width: auto;
+    height: auto;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+}
+</style>
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 123f8df..bbcfe49 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,7 +1,8 @@
 export default defineNuxtConfig({
   devtools: { enabled: false },
   modules: [
-    '@nuxtjs/tailwindcss'
+    '@nuxtjs/tailwindcss',
+    '@vueuse/nuxt'
   ],
   runtimeConfig: {
     apiKey: process.env.EXTERNAL_API_KEY,
diff --git a/package-lock.json b/package-lock.json
index 94a6922..77f7190 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
       },
       "devDependencies": {
         "@nuxtjs/tailwindcss": "^6.10.4",
+        "@vueuse/nuxt": "^10.7.2",
         "nuxt": "^3.9.1",
         "vue": "^3.4.10",
         "vue-router": "^4.2.5"
@@ -2678,6 +2679,12 @@
       "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
       "dev": true
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
+      "dev": true
+    },
     "node_modules/@unhead/dom": {
       "version": "1.8.9",
       "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.8.9.tgz",
@@ -3037,6 +3044,139 @@
       "integrity": "sha512-UpH4YkS1da8sCGVi9Z+EACffRagnIvpb62NG5O5Y8tKepLl7Z8DXrQBhqybBLzQQbnuc8zKUto/mSqSydwY6SQ==",
       "dev": true
     },
+    "node_modules/@vueuse/core": {
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.7.2.tgz",
+      "integrity": "sha512-AOyAL2rK0By62Hm+iqQn6Rbu8bfmbgaIMXcE3TSr7BdQ42wnSFlwIdPjInO62onYsEMK/yDMU8C6oGfDAtZ2qQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.7.2",
+        "@vueuse/shared": "10.7.2",
+        "vue-demi": ">=0.14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.7.2.tgz",
+      "integrity": "sha512-kCWPb4J2KGrwLtn1eJwaJD742u1k5h6v/St5wFe8Quih90+k2a0JP8BS4Zp34XUuJqS2AxFYMb1wjUL8HfhWsQ==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/nuxt": {
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/nuxt/-/nuxt-10.7.2.tgz",
+      "integrity": "sha512-yv2hY4AiRoSqg9ELNpN6gOkDWxGuLiKE/bEbuTAAuUBhS5OeEDf5aB/kY0e/V6ZXj5XiU4LX3nE8YV8c+UKfmQ==",
+      "dev": true,
+      "dependencies": {
+        "@nuxt/kit": "^3.9.1",
+        "@vueuse/core": "10.7.2",
+        "@vueuse/metadata": "10.7.2",
+        "local-pkg": "^0.5.0",
+        "vue-demi": ">=0.14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "nuxt": "^3.0.0"
+      }
+    },
+    "node_modules/@vueuse/nuxt/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.7.2.tgz",
+      "integrity": "sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==",
+      "dev": true,
+      "dependencies": {
+        "vue-demi": ">=0.14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
diff --git a/package.json b/package.json
index 1005f2e..7eb03a3 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   },
   "devDependencies": {
     "@nuxtjs/tailwindcss": "^6.10.4",
+    "@vueuse/nuxt": "^10.7.2",
     "nuxt": "^3.9.1",
     "vue": "^3.4.10",
     "vue-router": "^4.2.5"
diff --git a/pages/index.vue b/pages/index.vue
index b0c3c4e..307f0a7 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,18 +1,28 @@
 <template>
   <div>
     <div class="flex flex-col py-10">
-      <div>
-        <h2 class="text-2xl font-bold text-center">Nuxt 3 Game Search</h2>
+      <div class="mb-10">
+        <h2 class="text-2xl font-bold text-center">Video Games List</h2>
       </div>
-      <div class="flex justify-center items-center h-32">
-        <input 
-          class="px-2 py-1 border border-gray-800 rounded-md min-w-64"
-          v-model="searchTerm"
-          type="text"
-          placeholder="Search..."
-        />
+      <div class="flex justify-center mb-8">
+        <div class="border rounded-md border-neutral-400">
+          <input 
+            class="px-2 py-1 border-0 min-w-64"
+            v-model="searchTerm"
+            type="text"
+            placeholder="Game Title..."
+          />
+          <div v-if="data?.results[0] && !showResults" class="px-2 pb-2">
+            <ul v-for="game in data?.results">
+              <li class="py-1">{{ game.name }}</li>
+            </ul>
+          </div>
+        </div>
+        <button @click="showResults = !showResults" class="h-9 px-4 bg-cyan-500 text-white font-semibold rounded-lg">
+          Search
+        </button>
       </div>
-      <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 self-center gap-x-10 gap-y-10 mb-10">
+      <div v-if="showResults" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 self-center gap-x-10 gap-y-10 mb-10">
         <div v-for="game in data?.results">
           <GameCard :game="game"></GameCard>
         </div>
@@ -26,12 +36,13 @@ import type { Response } from '~/types/Response';
 
 const searchTerm = ref('');
 
+const debouncedSearchTerm = refDebounced(searchTerm, 300);
+
 const url = computed(() => {
-  return `api/games/search?query=${searchTerm.value}`;
+  return `api/games/search?query=${debouncedSearchTerm.value}`;
 });
 
-
-
 const { data } = await useFetch<Response>(url);
-console.log(data);
+
+const showResults = ref(false);
 </script>
\ No newline at end of file