UI update

Seasoned.Frontend/app/assets/css/gallery.css

@@ -1,5 +1,3 @@
-/* assets/css/gallery.css */
-
 .gallery-item-card {
   background-color: #fcfaf5 !important; 
   border: 1px solid #e2d7ba !important;
@@ -8,18 +6,18 @@
 }
 
 .gallery-item-card:hover {
-  transform: translateY(-5px) rotate(1deg); /* Physical paper feel */
+  transform: translateY(-5px) rotate(1deg);
   box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
 }
 
 .recipe-thumbnail {
-  filter: sepia(0.15) contrast(1.1); /* Heirloom photo effect */
+  filter: sepia(0.15) contrast(1.1);
 }
 
 .gallery-item-title {
   font-family: 'Libre Baskerville', serif;
   font-size: 1.25rem;
-  color: #2e1e0a; /* Dark ink color */
+  color: #2e1e0a;
 }
 
 .gallery-item-date {
@@ -34,4 +32,19 @@
   font-family: 'Libre Baskerville', serif !important;
   font-style: italic;
   text-transform: none !important;
+}
+
+.back-to-home-btn {
+  background-color: #5d4037 !important; /* Rich walnut brown */
+  color: #f8f1e0 !important; /* Parchment text */
+  font-family: 'Libre Baskerville', serif !important;
+  text-transform: none !important;
+  font-size: 1.1rem !important;
+  height: 56px !important;
+  border-radius: 8px !important;
+}
+
+.back-to-home-btn:hover {
+  background-color: #4a3a2a !important;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
 }

Seasoned.Frontend/app/pages/gallery.vue

@@ -9,14 +9,20 @@
 
       <v-divider class="mb-10 separator"></v-divider>
 
-      <v-btn to="/" variant="text" class="back-link mb-8" color="#6d5e4a">
-        <v-icon icon="mdi-chevron-left" class="mr-1"></v-icon>
-        Return to Scanner
+      <v-btn 
+        to="/" 
+        class="back-to-home-btn mb-10" 
+        size="large" 
+        elevation="0"
+        block
+      >
+        <v-icon icon="mdi-arrow-left" class="mr-2"></v-icon>
+        Back to Recipe Upload
       </v-btn>
 
-      <v-row>
-        <v-col v-for="n in 6" :key="n" cols="12" sm="6" md="4">
-          <v-card class="gallery-item-card pa-4" elevation="2">
+      <v-row v-if="recipes?.length">
+        <v-col v-for="recipe in recipes" :key="recipe.id" cols="12" sm="6" md="4">
+          <v-card class="gallery-item-card pa-4">
             <v-img
               src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c"
               height="200"
@@ -30,8 +36,10 @@
               </template>
             </v-img>
 
-            <h3 class="gallery-item-title text-center">Grandma's Stew</h3>
-            <p class="gallery-item-date text-center">Added March 2026</p>
+            <h3 class="gallery-item-title text-center">{{ recipe.title }}</h3>
+            <p class="gallery-item-date text-center">
+              Added {{ new Date(recipe.createdAt).toLocaleDateString('en-US', { month: 'long', year: 'numeric' }) }}
+            </p>
             
             <v-card-actions class="justify-center">
               <v-btn variant="text" class="view-recipe-btn" color="#556b2f">
@@ -41,6 +49,39 @@
           </v-card>
         </v-col>
       </v-row>
+      
+      <v-row v-else justify="center" class="py-10 text-center">
+        <v-col cols="12">
+          <p class="brand-subtitle mb-4">Your collection is empty.</p>
+        </v-col>
+      </v-row>
+
     </v-card>
   </v-container>
-</template>
+</template>
+
+<script setup>
+import '@/assets/css/gallery.css'
+//const config = useRuntimeConfig();
+//const { data: recipes } = await useFetch(`${config.public.apiBase}api/recipe`);
+const recipes = ref([
+  {
+    id: 1,
+    title: 'Salmon Salad',
+    createdAt: '2026-03-05T12:00:00Z',
+    description: 'A fresh herb-crusted salmon over greens.'
+  },
+  {
+    id: 2,
+    title: 'Power Bowl',
+    createdAt: '2026-03-04T10:00:00Z',
+    description: 'Rich and earthy pesto with toasted walnuts.'
+  },
+  {
+    id: 3,
+    title: 'Protein Slam',
+    createdAt: '2026-03-01T08:00:00Z',
+    description: 'Crispy crust with a light, airy center.'
+  }
+]);
+</script>

Seasoned.Frontend/nuxt.config.ts

@@ -12,8 +12,8 @@ export default defineNuxtConfig({
   css: [
     'vuetify/lib/styles/main.sass',
     '@mdi/font/css/materialdesignicons.min.css',
-    '@/assets/css/app-theme.css',
-    '@/assets/css/gallery.css'
+    '~/assets/css/app-theme.css',
+    '~/assets/css/gallery.css'
   ],
 
   build: {