diff --git a/backend/app/bl/GamesManager.js b/backend/app/bl/GamesManager.js
index 0ea694b..a08b2d0 100644
--- a/backend/app/bl/GamesManager.js
+++ b/backend/app/bl/GamesManager.js
@@ -68,7 +68,7 @@ class GamesManager{
         this.list = async function(query){
             return await db.list(collection, {
                 query,
-                project: { name:1, id:1, thumb: 1}
+                project: { name:1, description:1, id:1, thumb: 1}
             });
         }
 
diff --git a/src/pages/index.vue b/src/pages/index.vue
index d27398e..da678ce 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,13 +1,13 @@
 <template>
     <v-container>
         <v-row>
-            <v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
-                <router-link :to="`/playground/game/${v.id}`">
-                    <v-img :src="`/asset/thumb/${v.thumb}.webp`"></v-img>
-                </router-link>
-                <div class="d-flex">
-                    <span class="flex-grow-1">{{ v.name }}</span>
-                </div>
+            <v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="6" md="4" xl="4">
+                <v-card :to="`/playground/game/${v.id}`" class="hover-effect">
+                    <v-img :src="`/asset/thumb/${v.thumb}.webp`" cover content-class="d-flex flex-column justify-end" gradient="to bottom, rgba(0,0,0,0), rgba(0,0,0,.5)">
+                        <v-card-title class="text-white text-h6" v-text="v.name"></v-card-title>
+                        <div class="text-white text-caption mx-4" v-text="v.description"></div>
+                    </v-img>
+                </v-card>
             </v-col>
         </v-row>
     </v-container>