diff --git a/Seasoned.Backend/Controllers/RecipeController.cs b/Seasoned.Backend/Controllers/RecipeController.cs
index 47bd6da..d15ad92 100644
--- a/Seasoned.Backend/Controllers/RecipeController.cs
+++ b/Seasoned.Backend/Controllers/RecipeController.cs
@@ -26,4 +26,15 @@ public class RecipeController : ControllerBase
         var result = await _recipeService.ParseRecipeImageAsync(image);
         return Ok(result);
     }
+
+    [HttpGet]
+    public async Task<IActionResult> GetRecipes()
+    {
+        // This assumes your DbContext is injected as _context
+        var recipes = await _context.Recipes
+            .OrderByDescending(r => r.CreatedAt)
+            .ToListAsync();
+            
+        return Ok(recipes);
+    }
 }
\ No newline at end of file
diff --git a/Seasoned.Frontend/app/app.vue b/Seasoned.Frontend/app/app.vue
index 5002feb..ca7edb6 100644
--- a/Seasoned.Frontend/app/app.vue
+++ b/Seasoned.Frontend/app/app.vue
@@ -1,104 +1,11 @@
 <template>
   <v-app class="recipe-bg">
     <v-main>
-      <v-container>
-        <v-card class="recipe-card pa-10 mx-auto mt-10" max-width="950" elevation="1">
-          
-          <header class="text-center mb-10">
-            <h1 class="brand-title">Seasoned</h1>
-            <p class="brand-subtitle">A Recipe Collection</p>
-          </header>
-          
-          <v-divider class="mb-10 separator"></v-divider>
-
-          <v-row justify="center" class="mb-12">
-            <v-col cols="12" md="8">
-              <v-file-input
-                v-model="files"
-                label="Upload Image"
-                variant="solo-filled"
-                flat
-                accept="image/*"
-                class="custom-input mb-4"
-              ></v-file-input>
-
-              <v-btn 
-                class="analyze-btn"
-                block 
-                size="x-large"
-                elevation="0"
-                :loading="loading"
-                @click="uploadImage"
-              >
-                Analyze Recipe
-              </v-btn>
-            </v-col>
-          </v-row>
-
-          <transition name="fade">
-            <div v-if="recipe" class="recipe-content">
-              <h2 class="recipe-title text-center mb-4">{{ recipe.title }}</h2>
-              <p class="recipe-description text-center mb-12 text-italic">{{ recipe.description }}</p>
-
-              <v-row>
-                <v-col cols="12" md="5">
-                  <div class="section-header mb-6 px-2">
-                    <v-icon icon="mdi-spoon-sugar" class="mr-2" size="small"></v-icon>
-                    <span>Ingredients</span>
-                  </div>
-                  <v-list class="ingredients-list">
-                    <v-list-item v-for="(item, i) in recipe.ingredients" :key="i" class="ingredient-item">
-                      {{ item }}
-                    </v-list-item>
-                  </v-list>
-                </v-col>
-
-                <v-col cols="12" md="7">
-                  <div class="section-header mb-6 px-2">
-                    <v-icon icon="mdi-pot-steam-outline" class="mr-2" size="small"></v-icon>
-                    <span>Instructions</span>
-                  </div>
-                  <div v-for="(step, i) in recipe.instructions" :key="i" class="instruction-step mb-8">
-                    <span class="step-number">{{ i + 1 }}.</span>
-                    <p class="step-text">{{ step }}</p>
-                  </div>
-                </v-col>
-              </v-row>
-            </div>
-          </transition>
-        </v-card>
-      </v-container>
+      <NuxtPage />
     </v-main>
   </v-app>
 </template>
 
 <script setup>
-import axios from 'axios'
-import { ref } from 'vue'
 import '@/assets/css/app-theme.css'
-const config = useRuntimeConfig()
-const files = ref([])
-const loading = ref(false)
-const recipe = ref(null)
-
-const uploadImage = async () => {
-  const fileToUpload = Array.isArray(files.value) ? files.value[0] : files.value;
-  if (!fileToUpload) return;
-
-  loading.value = true;
-  const formData = new FormData();
-  formData.append('image', fileToUpload);
-
-  try {
-    const response = await $fetch(`${config.public.apiBase}api/recipe/upload`, {
-      method: 'POST',
-      body: formData
-    });
-    recipe.value = response;
-  } catch (error) {
-    console.error("Error:", error);
-  } finally {
-    loading.value = false;
-  }
-}
 </script>
\ No newline at end of file
diff --git a/Seasoned.Frontend/app/assets/css/app-theme.css b/Seasoned.Frontend/app/assets/css/app-theme.css
index 6eda824..5e72add 100644
--- a/Seasoned.Frontend/app/assets/css/app-theme.css
+++ b/Seasoned.Frontend/app/assets/css/app-theme.css
@@ -1,17 +1,22 @@
 @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;600&display=swap');
 
 .recipe-bg {
-  background-color: #3e2a14 !important; 
-  background-image: url("https://www.transparenttextures.com/patterns/dark-wood.png") !important; /* Richer wood texture */
-  background-size: cover;
+  /* A rich, warm medium-brown walnut tone */
+  background-color: #5d4a36 !important; 
+  /* Using the wood pattern but allowing the lighter base to show through */
+  background-image: url("https://www.transparenttextures.com/patterns/tileable-wood-colored.png") !important;
+  background-size: 500px; /* Slightly larger scale makes the grain easier to see */
+  background-attachment: fixed;
 }
 
+/* Ensure the card has a natural 'sit' on this visible wood */
 .recipe-card {
   background-color: #f4e4bc !important;
-  background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png"); /* Stronger linen texture */
+  background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
   border: 1px solid #c9b996 !important;
   border-radius: 12px !important;
-  font-family: 'Inter', sans-serif;
+  /* A deeper, more spread-out shadow to account for the lighter background */
+  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.35) !important;
 }
 
 .brand-title {
@@ -69,15 +74,6 @@
   border: 2px solid #556b2f !important;
 }
 
-.analyze-btn {
-  background-color: #556b2f !important;
-  color: #ffffff !important;
-  font-family: 'Libre Baskerville', serif;
-  text-transform: none;
-  font-size: 1.1rem;
-  letter-spacing: 0.5px;
-}
-
 .ingredients-list {
   background: transparent !important;
 }
@@ -113,4 +109,102 @@
 }
 .fade-enter-from, .fade-leave-to {
   opacity: 0;
+}
+
+.custom-input .v-field__input {
+  justify-content: center !important;
+  text-align: center !important;
+}
+
+/* 2. Center the floating label specifically */
+.custom-input .v-label.v-field-label {
+  left: 50% !important;
+  transform: translateX(-50%) !important;
+  width: 100% !important;
+  justify-content: center !important;
+}
+
+/* 3. Ensure both elements are the exact same height and shape */
+.custom-input .v-field {
+  height: 56px !important;
+  min-height: 56px !important;
+  border-radius: 8px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+/* 4. Remove the prepend icon space that kicks text to the right */
+.custom-input .v-field__prepend-inner {
+  display: none !important;
+}
+
+/* 5. Typography match: ensure font weight and size are identical */
+.custom-input .v-label {
+  font-family: 'Inter', sans-serif !important;
+  font-weight: 600 !important;
+  font-size: 1rem !important;
+  letter-spacing: normal !important;
+}
+
+/* Drag and Drop Zone Styling */
+.drop-zone {
+  width: 100%;
+  height: 150px;
+  border: 2px dashed #8c857b;
+  border-radius: 12px;
+  background-color: rgba(62, 42, 20, 0.03) !important;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: #3e3a35 !important;
+  text-align: center;
+  padding: 20px;
+}
+
+.drop-zone--active {
+  background-color: rgba(85, 107, 47, 0.1) !important;
+  border-color: #556b2f;
+  transform: scale(1.02);
+}
+
+.drop-text {
+  font-family: 'Inter', sans-serif;
+  font-size: 0.95rem;
+  line-height: 1.4;
+}
+
+.selected-text {
+  font-weight: 600;
+  color: #556b2f;
+}
+
+.analyze-btn, 
+.gallery-btn,
+.analyze-btn *, 
+.gallery-btn * {
+  font-family: 'Libre Baskerville', serif !important;
+  text-transform: none !important;
+  font-size: 1.1rem !important;
+  letter-spacing: 0.5px !important;
+  font-weight: 400 !important;
+  border-radius: 8px !important;
+}
+
+.analyze-btn {
+  margin-bottom: 16px !important; 
+  background-color: #556b2f !important;
+  color: #ffffff !important;
+  height: 56px !important;
+  border-radius: 8px !important;
+}
+
+.gallery-btn {
+  background-color: #8c4a32 !important; 
+  color: #ffffff !important;
+  height: 56px !important;
+  border-radius: 8px !important;
 }
\ No newline at end of file
diff --git a/Seasoned.Frontend/app/assets/css/gallery.css b/Seasoned.Frontend/app/assets/css/gallery.css
new file mode 100644
index 0000000..95f7b04
--- /dev/null
+++ b/Seasoned.Frontend/app/assets/css/gallery.css
@@ -0,0 +1,37 @@
+/* assets/css/gallery.css */
+
+.gallery-item-card {
+  background-color: #fcfaf5 !important; 
+  border: 1px solid #e2d7ba !important;
+  border-radius: 4px !important; 
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.gallery-item-card:hover {
+  transform: translateY(-5px) rotate(1deg); /* Physical paper feel */
+  box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
+}
+
+.recipe-thumbnail {
+  filter: sepia(0.15) contrast(1.1); /* Heirloom photo effect */
+}
+
+.gallery-item-title {
+  font-family: 'Libre Baskerville', serif;
+  font-size: 1.25rem;
+  color: #2e1e0a; /* Dark ink color */
+}
+
+.gallery-item-date {
+  font-family: 'Inter', sans-serif;
+  font-size: 0.7rem;
+  color: #8c857b;
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+}
+
+.view-recipe-btn {
+  font-family: 'Libre Baskerville', serif !important;
+  font-style: italic;
+  text-transform: none !important;
+}
\ No newline at end of file
diff --git a/Seasoned.Frontend/app/pages/gallery.vue b/Seasoned.Frontend/app/pages/gallery.vue
new file mode 100644
index 0000000..95a27f2
--- /dev/null
+++ b/Seasoned.Frontend/app/pages/gallery.vue
@@ -0,0 +1,46 @@
+<template>
+  <v-container>
+    <v-card class="recipe-card pa-10 mx-auto mt-10" max-width="1200" elevation="1">
+      
+      <header class="text-center mb-10">
+        <h1 class="brand-title">The Collection</h1>
+        <p class="brand-subtitle">Hand-Picked & Seasoned</p>
+      </header>
+
+      <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>
+
+      <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-img
+              src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c"
+              height="200"
+              cover
+              class="rounded-sm mb-4 recipe-thumbnail"
+            >
+              <template v-slot:placeholder>
+                <v-row class="fill-height ma-0" align="center" justify="center">
+                  <v-progress-circular indeterminate color="#556b2f"></v-progress-circular>
+                </v-row>
+              </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>
+            
+            <v-card-actions class="justify-center">
+              <v-btn variant="text" class="view-recipe-btn" color="#556b2f">
+                Open Recipe
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-card>
+  </v-container>
+</template>
\ No newline at end of file
diff --git a/Seasoned.Frontend/app/pages/index.vue b/Seasoned.Frontend/app/pages/index.vue
new file mode 100644
index 0000000..0898310
--- /dev/null
+++ b/Seasoned.Frontend/app/pages/index.vue
@@ -0,0 +1,152 @@
+<template>
+  <v-container>
+    <v-card class="recipe-card pa-10 mx-auto mt-10" max-width="950" elevation="1">
+      
+      <header class="text-center mb-10">
+        <h1 class="brand-title">Seasoned</h1>
+        <p class="brand-subtitle">A Recipe Collection</p>
+      </header>
+      
+      <v-divider class="mb-10 separator"></v-divider>
+
+      <v-row justify="center" class="mb-12">
+        <v-col cols="12" md="8" class="d-flex flex-column align-center">
+          <div 
+            class="drop-zone mb-4"
+            :class="{ 'drop-zone--active': isDragging }"
+            @dragover.prevent="isDragging = true"
+            @dragleave.prevent="isDragging = false"
+            @drop.prevent="handleDrop"
+            @click="$refs.fileInput.click()"
+          >
+            <v-icon icon="mdi-cloud-upload-outline" size="large" class="mb-2"></v-icon>
+            <p v-if="!files || files.length === 0" class="drop-text">
+              Drag your recipe photo here or <strong>click to browse</strong>
+            </p>
+            <p v-else class="drop-text selected-text">
+              {{ Array.isArray(files) ? files[0].name : files.name }}
+            </p>
+
+            <v-file-input
+              ref="fileInput"
+              v-model="files"
+              accept="image/*"
+              class="d-none"
+              hide-details
+            ></v-file-input>
+          </div>
+
+          <v-btn 
+            class="analyze-btn w-100"
+            size="large"
+            elevation="0"
+            :loading="loading"
+            :disabled="!files || files.length === 0"
+            @click="uploadImage"
+          >
+            <v-icon icon="mdi-pot-steam" class="mr-2"></v-icon>
+            Analyze Recipe
+          </v-btn>
+
+          <v-btn
+            to="/gallery"
+            class="gallery-btn w-100"
+            size="large"
+            elevation="0"
+          >
+            <v-icon icon="mdi-book-open-variant" class="mr-2"></v-icon>
+            View Collection
+          </v-btn>
+        </v-col>
+      </v-row>
+
+      <transition name="fade">
+        <div v-if="recipe" class="recipe-content">
+          <h2 class="recipe-title text-center mb-4">{{ recipe.title }}</h2>
+          <p class="recipe-description text-center mb-12 text-italic">{{ recipe.description }}</p>
+
+          <v-row>
+            <v-col cols="12" md="5">
+              <div class="section-header mb-6 px-2">
+                <v-icon icon="mdi-spoon-sugar" class="mr-2" size="small"></v-icon>
+                <span>Ingredients</span>
+              </div>
+              <v-list class="ingredients-list">
+                <v-list-item v-for="(item, i) in recipe.ingredients" :key="i" class="ingredient-item">
+                  {{ item }}
+                </v-list-item>
+              </v-list>
+            </v-col>
+
+            <v-col cols="12" md="7">
+              <div class="section-header mb-6 px-2">
+                <v-icon icon="mdi-pot-steam-outline" class="mr-2" size="small"></v-icon>
+                <span>Instructions</span>
+              </div>
+              <div v-for="(step, i) in recipe.instructions" :key="i" class="instruction-step mb-8">
+                <span class="step-number">{{ i + 1 }}.</span>
+                <p class="step-text">{{ step }}</p>
+              </div>
+            </v-col>
+          </v-row>
+
+          <v-row justify="center" class="mt-12 pb-10">
+            <v-btn
+              class="save-recipe-btn px-12"
+              size="x-large"
+              elevation="0"
+              :loading="saving"
+              @click="saveToCollection"
+            >
+              <v-icon icon="mdi-content-save-check-outline" class="mr-2"></v-icon>
+              Save to Collection
+            </v-btn>
+          </v-row>
+
+        </div>
+      </transition>
+    </v-card>
+  </v-container>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import '@/assets/css/app-theme.css'
+const config = useRuntimeConfig()
+const files = ref([])
+const loading = ref(false)
+const recipe = ref(null)
+const isDragging = ref(false)
+const saving = ref(false)
+
+const handleDrop = (e) => {
+  isDragging.value = false
+  const droppedFiles = e.dataTransfer.files
+  if (droppedFiles.length > 0) {
+    files.value = droppedFiles[0]
+  }
+}
+
+const uploadImage = async () => {
+  const fileToUpload = Array.isArray(files.value) ? files.value[0] : files.value;
+  if (!fileToUpload) return;
+
+  loading.value = true;
+  const formData = new FormData();
+  formData.append('image', fileToUpload);
+
+  try {
+    const response = await $fetch(`${config.public.apiBase}api/recipe/upload`, {
+      method: 'POST',
+      body: formData
+    });
+    recipe.value = response;
+  } catch (error) {
+    console.error("Error:", error);
+  } finally {
+    loading.value = false;
+  }
+
+  
+}
+</script>
\ No newline at end of file
diff --git a/Seasoned.Frontend/nuxt.config.ts b/Seasoned.Frontend/nuxt.config.ts
index 708402e..28dca9a 100644
--- a/Seasoned.Frontend/nuxt.config.ts
+++ b/Seasoned.Frontend/nuxt.config.ts
@@ -12,6 +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'
   ],
 
   build: {