diff --git a/app.vue b/app.vue
index b802e1e..84f3db8 100644
--- a/app.vue
+++ b/app.vue
@@ -2,7 +2,6 @@
   <div>
     <NuxtLayout>
       <Header/>
-      <Hero v-if="$route.name === 'index'"/>
       <NuxtPage/>
       <Footer/>
     </NuxtLayout>
diff --git a/components/cosetta.vue b/components/cosetta.vue
index a7c49df..6df6160 100644
--- a/components/cosetta.vue
+++ b/components/cosetta.vue
@@ -7,13 +7,16 @@ const { cosetta } = defineProps({
 })
 </script>
 <template>
-    <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col">
+  <div class="rounded overflow-hidden shadow-lg">
+    <img class="object-cover w-full max-h-48" :src="`src/public/${cosetta.images[0]}`" alt="Mountain">
+    <div class="px-6 py-4">
       <nuxt-link :to="`/c/${cosetta.uuid}`">
-        <img class="hover:grow hover:shadow-lg" :src="`src/public/${cosetta.images[0]}`">
-        <div class="pt-3 flex items-center justify-between">
-          <p class=" text-black font-bold uppercase" v-text='cosetta.name'></p>
-        </div>
-        <p class="pt-1 text-gray-700 text-sm" v-text='cosetta.description'></p>
+        <h2 class="text-indigo-500 card-title hover:underline uppercase mb-2" v-text='cosetta.name' />
       </nuxt-link>
+      <p class="text-gray-700 text-base" v-text='cosetta.description' />
     </div>
+    <div class="px-6 pt-4 pb-2">
+      <span v-for='tag in cosetta.tags' :key='tag' class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2" v-text='tag'/>
+    </div>
+  </div>
 </template>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 4b7803a..ac37b76 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -6,8 +6,9 @@ const cosette = await $fetch('/api/cosette')
   <section class="bg-white py-8">
     
     <Upload />
+    <Hero/>
 
-    <div class="container mx-auto flex items-center flex-wrap pt-4 pb-12">
+    <div class="container mx-auto flex items-center flex-wrap pt-4 pb-12 px-2">
       <nav id="store" class="w-full z-30 top-0 px-6 py-1">
         <div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 px-2 py-3">
           <a class="uppercase tracking-wide no-underline hover:no-underline font-bold text-yellow text-xl" href="https://it.hackmeeting.org">Hackmeeting 0x19</a>
@@ -23,7 +24,9 @@ const cosette = await $fetch('/api/cosette')
             </div>
         </div>
       </nav>
-      <Cosetta v-for='cosetta in cosette' :key='cosetta.id' :cosetta='cosetta' />
+      <div class="p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-5">
+        <Cosetta v-for='cosetta in cosette' :key='cosetta.id' :cosetta='cosetta' />
+      </div>
 
     </div>