From 1d7aa31a11e0327a682e7df33e415998597dabd1 Mon Sep 17 00:00:00 2001
From: chloe <chloestanton117@gmail.com>
Date: Sun, 15 Mar 2026 22:51:26 +0000
Subject: [PATCH] UI updates/backend/pipeline

---
 Jenkinsfile                                   |  90 ++++
 .../Controllers/RecipeController.cs           |   1 +
 Seasoned.Backend/Data/ApplicationDbContext.cs |   3 -
 Seasoned.Frontend/app/app.vue                 |  94 ++--
 .../app/assets/css/app-theme.css              | 422 ++++++++---------
 Seasoned.Frontend/app/assets/css/login.css    |   6 +
 .../app/components/RecipeDisplay.vue          |  71 +++
 Seasoned.Frontend/app/pages/chat.vue          | 126 +++++
 Seasoned.Frontend/app/pages/gallery.vue       |  21 +-
 Seasoned.Frontend/app/pages/index.vue         | 443 +++---------------
 Seasoned.Frontend/app/pages/login.vue         |  54 +--
 Seasoned.Frontend/app/pages/uploader.vue      | 209 +++++++++
 compose.yaml                                  |   1 +
 13 files changed, 807 insertions(+), 734 deletions(-)
 create mode 100644 Jenkinsfile
 create mode 100644 Seasoned.Frontend/app/components/RecipeDisplay.vue
 create mode 100644 Seasoned.Frontend/app/pages/chat.vue
 create mode 100644 Seasoned.Frontend/app/pages/uploader.vue

diff --git a/Jenkinsfile b/Jenkinsfile
new file mode 100644
index 0000000..4adf8bc
--- /dev/null
+++ b/Jenkinsfile
@@ -0,0 +1,90 @@
+pipeline {
+    agent any
+
+    environment {
+        // Configure these in Jenkins or as pipeline parameters
+        DOCKER_REGISTRY = 'git.wrigglyt.xyz'
+        DOCKER_IMAGE = 'chloe/seasoned'  // e.g., username/repo for Docker Hub
+        DEPLOY_HOST = '10.0.11.3'
+        DEPLOY_USER = 'chloe'
+        DEPLOY_PATH = '/opt/seasoned'
+        GIT_REPO_URL = 'https://git.wrigglyt.xyz/chloe/Seasoned.git'
+    }
+
+    options {
+        buildDiscarder(logRotator(numToKeepStr: '10'))
+        timeout(time: 30, unit: 'MINUTES')
+    }
+
+    stages {
+        stage('Build Docker Image') {
+            steps {
+                script {
+                    env.IMAGE_TAG = env.BRANCH_NAME == 'main' ? 'latest' : "${env.BUILD_NUMBER}-${env.GIT_COMMIT.take(7)}"
+                    env.FULL_IMAGE = "${env.DOCKER_REGISTRY}/${env.DOCKER_IMAGE}:${env.IMAGE_TAG}"
+                }
+                echo "Building image: ${env.FULL_IMAGE}"
+                sh """
+                    docker build -t ${env.FULL_IMAGE} .
+                """
+            }
+        }
+
+        stage('Push to Registry') {
+            steps {
+                withCredentials([usernamePassword(
+                    credentialsId: 'c-gitea',
+                    usernameVariable: 'DOCKER_USER',
+                    passwordVariable: 'DOCKER_PASS'
+                )]) {
+                    sh """
+                        echo \$DOCKER_PASS | docker login -u \$DOCKER_USER --password-stdin ${env.DOCKER_REGISTRY}
+                        docker push ${env.FULL_IMAGE}
+                    """
+                }
+            }
+        }
+
+        stage('Deploy via SSH') {
+            steps {
+                script {
+                    env.DEPLOY_BRANCH = env.BRANCH_NAME ?: 'main'
+                }
+                sshagent(credentials: ['deploy-ssh-key']) {
+                    sh """
+                        ssh -o StrictHostKeyChecking=no ${env.DEPLOY_USER}@${env.DEPLOY_HOST} << 'DEPLOY_EOF'
+                            set -e
+                            cd ${env.DEPLOY_PATH} || mkdir -p ${env.DEPLOY_PATH} && cd ${env.DEPLOY_PATH}
+                            
+                            # Clone or pull the repo (contains docker-compose.yml)
+                            if [ -d .git ]; then
+                                git fetch origin
+                                git reset --hard origin/${env.DEPLOY_BRANCH}
+                            else
+                                git clone ${env.GIT_REPO_URL} .
+                            fi
+                            
+                            # Set the image tag for this deployment
+                            export IMAGE_TAG=${env.IMAGE_TAG}
+                            export DOCKER_REGISTRY=${env.DOCKER_REGISTRY}
+                            export DOCKER_IMAGE=${env.DOCKER_IMAGE}
+                            
+                            # Pull latest image and deploy
+                            docker compose pull
+                            docker compose up -d
+DEPLOY_EOF
+                    """
+                }
+            }
+        }
+    }
+
+    post {
+        success {
+            echo "Deployment successful! Image: ${env.FULL_IMAGE}"
+        }
+        failure {
+            echo "Deployment failed!"
+        }
+    }
+}
diff --git a/Seasoned.Backend/Controllers/RecipeController.cs b/Seasoned.Backend/Controllers/RecipeController.cs
index fb3108d..77db6b5 100644
--- a/Seasoned.Backend/Controllers/RecipeController.cs
+++ b/Seasoned.Backend/Controllers/RecipeController.cs
@@ -9,6 +9,7 @@ using Microsoft.EntityFrameworkCore;
 
 namespace Seasoned.Backend.Controllers;
 
+[Authorize]
 [ApiController]
 [Route("api/recipe")]
 public class RecipeController : ControllerBase
diff --git a/Seasoned.Backend/Data/ApplicationDbContext.cs b/Seasoned.Backend/Data/ApplicationDbContext.cs
index 0fc70ab..b365067 100644
--- a/Seasoned.Backend/Data/ApplicationDbContext.cs
+++ b/Seasoned.Backend/Data/ApplicationDbContext.cs
@@ -5,7 +5,6 @@ using Seasoned.Backend.Models;
 
 namespace Seasoned.Backend.Data;
 
-// Inherit from IdentityDbContext to enable User management
 public class ApplicationDbContext : IdentityDbContext<IdentityUser>
 {
     public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
@@ -15,12 +14,10 @@ public class ApplicationDbContext : IdentityDbContext<IdentityUser>
 
     protected override void OnModelCreating(ModelBuilder modelBuilder)
     {
-        // Crucial: Call the base method so Identity tables are configured
         base.OnModelCreating(modelBuilder);
 
         modelBuilder.HasPostgresExtension("vector");
 
-        // Optional: Ensure the Recipe table links to the Identity User
         modelBuilder.Entity<Recipe>()
             .HasOne<IdentityUser>()
             .WithMany()
diff --git a/Seasoned.Frontend/app/app.vue b/Seasoned.Frontend/app/app.vue
index 23485ec..e6c94ec 100644
--- a/Seasoned.Frontend/app/app.vue
+++ b/Seasoned.Frontend/app/app.vue
@@ -1,52 +1,43 @@
 <template>
-  <v-app class="recipe-bg">
-    <v-app-bar 
-      color="transparent"
-      flat
-      elevation="0"
-      class="px-4"
-      height="70"
-    >
-      <v-btn
-        to="/"
-        variant="text"
-        class="nav-home-btn ml-4"
-        elevation="0"
-      >
-        Seasoned
-      </v-btn>
-
+  <v-app :class="['recipe-bg', { 'landing-page': $route.path === '/' }]">
+    
+    <v-app-bar color="transparent" flat elevation="0" class="px-4" height="70">
+      <v-btn to="/" variant="text" class="nav-home-btn">Seasoned</v-btn>
       <v-spacer></v-spacer>
 
       <div class="nav-links d-flex align-center">
-        <v-btn 
-          to="/gallery"
-          variant="text" 
-          class="nav-auth-btn ml-4" 
-          elevation="0"
-        >
-          Collection
-        </v-btn>
+        <v-menu v-if="isLoggedIn" transition="slide-y-transition">
+          <template v-slot:activator="{ props }">
+            <v-btn 
+              v-bind="props" 
+              variant="text" 
+              class="nav-auth-btn px-4 d-flex align-center"
+            >
+              <v-icon icon="mdi-pot-steam" size="small" class="mr-2"></v-icon>
+              <span class="menu-label-text">Menu</span>
+            </v-btn>
+          </template>
 
-        <v-btn 
-          v-if="!isLoggedIn" 
-          to="/login" 
-          variant="text"
-          class="nav-auth-btn ml-4" 
-          elevation="0"
-        >
-          Sign In
-        </v-btn>
-        
-        <v-btn 
-          v-else 
-          @click="logout" 
-          variant="text"
-          class="nav-auth-btn ml-4" 
-          elevation="0"
-        >
-          Logout
-        </v-btn>
+          <v-list class="recipe-card pa-2 mt-2" elevation="4" border>
+            <v-list-item to="/uploader" prepend-icon="mdi-camera-outline">
+              <v-list-item-title class="menu-text">Recipe Uploader </v-list-item-title>
+            </v-list-item>
+            <v-list-item to="/chat" prepend-icon="mdi-chef-hat">
+              <v-list-item-title class="menu-text">Chef Consultation</v-list-item-title>
+            </v-list-item>
+            <v-list-item to="/gallery" prepend-icon="mdi-book-open-variant" class="rounded">
+              <v-list-item-title class="menu-text">My Collection</v-list-item-title>
+            </v-list-item>
+
+            <v-divider class="ma-0"></v-divider>
+
+            <v-list-item @click="logout" prepend-icon="mdi-logout" color="error" class="rounded mt-0">
+              <v-list-item-title class="menu-text">Sign Out</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+
+        <v-btn v-else to="/login" variant="text" class="nav-auth-btn">Sign In</v-btn>
       </div>
     </v-app-bar>
 
@@ -57,24 +48,19 @@
 </template>
 
 <script setup>
+import { onMounted } from 'vue'
 import '@/assets/css/app-theme.css'
+const authCookie = useCookie('.AspNetCore.Identity.Application')
 const isLoggedIn = useState('isLoggedIn', () => false)
-const tokenCookie = useCookie('seasoned_token')
 
 onMounted(() => {
-  if (tokenCookie.value) {
-    isLoggedIn.value = true
-  }
+  if (authCookie.value) isLoggedIn.value = true
 })
 
 const logout = () => {
-  tokenCookie.value = null
+  authCookie.value = null
   isLoggedIn.value = false
-  
-  if (import.meta.client) {
-    localStorage.removeItem('token')
-  }
-  
+  if (import.meta.client) localStorage.removeItem('token')
   navigateTo('/login')
 }
 </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 56961ff..6133f00 100644
--- a/Seasoned.Frontend/app/assets/css/app-theme.css
+++ b/Seasoned.Frontend/app/assets/css/app-theme.css
@@ -1,24 +1,55 @@
-.recipe-bg {
+html, body {
+  margin: 0 !important;
+  padding: 0 !important;
+  min-height: 100%;
+}
+
+.recipe-bg, .landing-page {
   background-color: #5d4a36 !important; 
   background-image: url("https://www.transparenttextures.com/patterns/tileable-wood-colored.png") !important;
   background-size: 500px;
   background-attachment: fixed;
 }
 
+.landing-wrapper {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
 .recipe-card {
   background-color: #f4e4bc !important;
   background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
-  border: 1px solid #c9b996 !important;
-  border-radius: 12px !important;
-  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.35) !important;
+  border: 1px solid #dccca7 !important;
+  border-radius: 4px !important;
+  padding: 40px !important;
+  box-shadow: 0 35px 60px rgba(0, 0, 0, 0.5) !important;
+  transition: none !important;
+}
+
+.recipe-title {
+  font-family: 'Libre Baskerville', serif;
+  font-size: 1.4rem;
+  color: #1e1408;
+}
+
+.v-app-bar {
+  background: transparent !important;
+  box-shadow: none !important;
 }
 
 .brand-title {
   font-family: 'Libre Baskerville', serif;
   font-weight: 700;
   font-size: 2.8rem;
-  color: #2e1e0a;
+  background: linear-gradient(to bottom, #8c4a32 20%, #4a2a14 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  line-height: 0.9 !important;
   letter-spacing: -1px;
+  filter: drop-shadow(1px 1px 0px rgba(255,255,255,0.1));
 }
 
 .brand-subtitle {
@@ -29,42 +60,149 @@
   letter-spacing: 3px;
 }
 
-.recipe-title {
-  font-family: 'Libre Baskerville', serif;
-  font-size: 2.4rem;
-  color: #1e1408;
-}
-
 .section-header {
   font-family: 'Libre Baskerville', serif;
   font-weight: bold;
   font-size: 1.1rem;
   border-bottom: 2px solid #dccca7;
-  color: #4a3a2a;
+  color: #2e1e0a;
   display: flex;
   align-items: center;
+  justify-content: center;
   text-transform: uppercase;
+  width: fit-content;
+  margin: 0 auto 1rem auto;
+  padding-bottom: 4px;
 }
 
-.custom-input .v-field {
-  background-color: #5d4037 !important;
-  color: #f8f1e0 !important;
+.feature-text {
+  font-family: 'Libre Baskerville', serif;
+  color: #5d4a36 !important;
+  line-height: 1.6;
+  max-width: 260px;
+  margin: 0 auto;
+}
+
+.clear-btn-solid {
+  background-color: #dccca7 !important;
+  color: #4a3a2a !important;
+  min-width: 56px !important;
+  height: 56px !important;
   border-radius: 8px !important;
-  border: 2px solid #5d4037 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
 }
 
-.custom-input .v-label {
-  color: #f8f1e0 !important;
+.drop-zone, .chat-container {
+  width: 100%;
+  background-color: rgba(62, 42, 20, 0.03) !important;
+  border: 2px dashed #8c857b;
+  border-radius: 12px;
+  padding: 40px 20px;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.drop-zone:hover {
+  border-color: #556b2f;
+  background-color: rgba(85, 107, 47, 0.05) !important;
+}
+
+.drop-text {
+  font-family: 'Libre Baskerville', serif !important;
+  color: #5d4a36 !important;
+  font-size: 1.1rem;
+  text-align: center;
+}
+
+.drop-text span {
+  color: #8c4a32;
+  font-weight: bold;
+}
+
+.analyze-btn {
+  background-color: #556b2f !important;
+  color:  #f4e4bc !important;
+  font-family: 'Libre Baskerville', serif !important;
+  height: 56px !important;
+  border-radius: 8px !important;
+  text-transform: none !important;
+}
+
+.column-button {
+  font-family: 'Libre Baskerville', serif !important;
+  font-size: 1.1rem !important;
+  background-color: #556b2f !important;
+  color:  #f4e4bc !important;
+  transition: all 0.3s ease !important;
+  text-transform: none !important;
+}
+
+.column-button:hover {
+  background-color: #2e1e0a !important;
+  
+  text-shadow: none !important;
+  border-radius: 4px;
+}
+
+.nav-auth-btn, .nav-home-btn, .nav-btn {
+  font-family: 'Libre Baskerville', serif !important;
+  font-size: 1.5rem !important;
+  color: #f4e4bc !important;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
+  transition: all 0.3s ease !important;
+  text-transform: none !important;
+}
+
+.nav-auth-btn:hover, .nav-home-btn:hover, .nav-btn:hover {
+  background-color: #f4e4bc !important;
+  color: #2e1e0a !important;
+  text-shadow: none !important;
+  border-radius: 4px;
+}
+
+.separator {
+  border-color: #dccca7 !important;
+  opacity: 1;
+}
+
+.chat-placeholder {
+  font-style: italic;
+  color: #8c7e6a;
+  text-align: center;
+}
+
+.menu-text {
+  font-family: 'Libre Baskerville', serif !important;
+  color: #2e1e0a !important;
+  font-weight: 600 !important;
+  font-size: 0.95rem !important;
+}
+
+.v-list-item__prepend .v-icon {
+  color: #2e1e0a !important;
   opacity: 1 !important;
-  font-weight: 600;
 }
 
-.custom-input .v-icon {
-  color: #f8f1e0 !important;
+.v-list-item:hover {
+  background-color: rgba(85, 107, 47, 0.1) !important;
 }
 
-.custom-input .v-field--focused {
-  border: 2px solid #556b2f !important;
+.v-list-item[color="error"] .menu-text {
+  color: #8c4a32 !important;
+}
+
+.save-recipe-btn {
+  background-color: #2e1e0a !important;
+  color: #f4e4bc !important;
+  font-family: 'Libre Baskerville', serif !important;
+  text-transform: none !important;
+  letter-spacing: 0;
+  border-radius: 8px !important;
 }
 
 .ingredients-list {
@@ -94,234 +232,60 @@
   padding-top: 16px;
 }
 
-.separator {
-  border-color: #dccca7 !important;
-  opacity: 1;
-}
-
-.fade-enter-active, .fade-leave-active {
-  transition: opacity 0.6s ease;
-}
-.fade-enter-from, .fade-leave-to {
-  opacity: 0;
-}
-
-.custom-input .v-field__input {
-  justify-content: center !important;
-  text-align: center !important;
-}
-
-.custom-input .v-label.v-field-label {
-  left: 50% !important;
-  transform: translateX(-50%) !important;
-  width: 100% !important;
-  justify-content: center !important;
-}
-
-.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;
-}
-
-.custom-input .v-field__prepend-inner {
-  display: none !important;
-}
-
-.custom-input .v-label {
-  font-family: 'Inter', sans-serif !important;
-  font-weight: 600 !important;
-  font-size: 1rem !important;
-  letter-spacing: normal !important;
-}
-
-.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;
-}
-
-.clear-btn-solid {
-  background-color: #dccca7 !important;
-  color: #4a3a2a !important;
-  min-width: 56px !important;
-  height: 56px !important;
-  border-radius: 8px !important;
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-}
-
-.d-flex .analyze-btn {
-  margin-bottom: 0 !important;
-}
-
-.v-app-bar {
-  background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, transparent 100%) !important;
-}
-
-.nav-auth-btn, .nav-btn, .nav-home-btn {
-  font-family: 'Libre Baskerville', serif !important;
-  font-size: 1.5rem !important;
-  color: #f4e4bc !important;
-  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
-  letter-spacing: 0px;
-  
-}
-
-.nav-auth-btn:hover, .nav-btn:hover, .nav-home-btn:hover {
-  background-color: #f4e4bc !important;
-  color: #2e1e0a !important;
-  text-shadow: none !important;
-}
-
-.brand-icon-container {
-  filter: sepia(0.2) contrast(1.1);
-  opacity: 0.9;
-}
-
-.brand-icon-container .v-img {
-  filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.1));
-}
-
-.auth-logo {
-  mix-blend-mode: multiply;
-  
-  filter: sepia(0.3) contrast(1.1) brightness(0.9);
-
-  opacity: 0.85;
-
-  max-width: 200px;
-  height: auto;
-  display: block;
-  margin: 0 auto;
-}
-
-.thematic-snackbar .v-snackbar__wrapper {
-  border-radius: 4px !important;
-  border: 1px solid rgba(140, 74, 50, 0.2) !important;
-}
-
-.snackbar-text {
-  font-family: 'Crimson Text', serif;
-  font-size: 1.05rem;
-  letter-spacing: 0.02em;
-}
-
-.chat-container {
-  background: rgba(244, 237, 225, 0.6);
-  border: 1px dashed #d1c7b7;
-  border-radius: 8px;
-}
-
 .chat-container {
   width: 100%;
-  background-color: rgba(62, 42, 20, 0.03) !important;
-  border: 2px dashed #8c857b;
+  background-color: rgba(244, 237, 225, 0.4) !important;
+  border: 1px solid #dccca7;
   border-radius: 12px;
   padding: 20px;
-  transition: all 0.3s ease;
   display: flex;
   flex-direction: column;
+  min-height: 500px;
 }
 
-.chat-container:focus-within {
-  background-color: rgba(85, 107, 47, 0.05) !important;
-  border-color: #556b2f;
+.chat-display {
+  flex-grow: 1;
+  overflow-y: auto;
+  margin-bottom: 20px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
 
 .chat-input .v-field__input {
-  color: #5d4037 !important;
-  font-family: 'Crimson Text', serif;
+  min-height: 56px !important;
+  padding-top: 15px !important;
+  font-family: 'Inter', sans-serif;
   font-size: 1.1rem;
 }
 
-.chat-input .v-field__input::placeholder {
-  color: #8c7e6a !important;
-  opacity: 1;
-}
-
-.chat-placeholder {
-  font-style: italic;
-  color: #8c7e6a;
-  text-align: center;
-  padding: 20px;
+.chat-input.v-field--focused {
+  background-color: #ffffff !important;
+  transition: background-color 0.3s ease;
 }
 
 .message {
-  margin-bottom: 10px;
-  padding: 8px 12px;
-  border-radius: 4px;
+  max-width: 85%;
+  padding: 12px 16px;
+  font-family: 'Inter', sans-serif;
+  font-size: 1rem;
+  line-height: 1.5;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
 }
 
 .message.user {
-  background: rgba(93, 64, 55, 0.1);
-  text-align: right;
+  background-color: #efe5e3;
   color: #5d4037;
-  font-weight: bold;
+  align-self: flex-end;
+  border-radius: 15px 15px 2px 15px;
+  border: 1px solid #e0d5d2;
 }
 
 .message.assistant {
-  background: transparent;
-  text-align: left;
-  color: #2c3e50;
-  border-left: 3px solid #556b2f;
+  background-color: #ffffff;
+  color: #2e1e0a;
+  align-self: flex-start;
+  border-radius: 15px 15px 15px 2px;
+  border: 1px solid #dccca7;
 }
\ No newline at end of file
diff --git a/Seasoned.Frontend/app/assets/css/login.css b/Seasoned.Frontend/app/assets/css/login.css
index c72a9d9..c6e43f8 100644
--- a/Seasoned.Frontend/app/assets/css/login.css
+++ b/Seasoned.Frontend/app/assets/css/login.css
@@ -9,6 +9,12 @@
     font-size: 2.2rem;
     color: #2e1e0a;
     margin-bottom: 8px;
+  background: linear-gradient(to bottom, #8c4a32 20%, #4a2a14 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  line-height: 0.9 !important;
+  letter-spacing: -1px;
+  filter: drop-shadow(1px 1px 0px rgba(255,255,255,0.1));
 }
 
 .auth-input .v-field__prepend-inner {
diff --git a/Seasoned.Frontend/app/components/RecipeDisplay.vue b/Seasoned.Frontend/app/components/RecipeDisplay.vue
new file mode 100644
index 0000000..ab64828
--- /dev/null
+++ b/Seasoned.Frontend/app/components/RecipeDisplay.vue
@@ -0,0 +1,71 @@
+<template>
+  <transition name="fade">
+    <div v-if="recipe" class="recipe-content">
+      <v-divider class="mb-10 separator"></v-divider>
+      
+      <h2 class="recipe-title text-center mb-4">{{ recipe.title }}</h2>
+      <p v-if="recipe.description" 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>
+          <div class="ingredients-container">
+            <div v-for="(item, i) in recipe.ingredients" :key="i" class="ingredient-item d-flex align-center">
+                {{ item }}
+            </div>
+          </div>
+        </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
+          v-if="!hasSaved"
+          class="save-recipe-btn px-12"
+          size="large"
+          elevation="0"
+          :loading="isSaving"
+          @click="$emit('save')"
+        >
+          <v-icon icon="mdi-content-save-check-outline" class="mr-2"></v-icon>
+          Save to Collection
+        </v-btn>
+        
+        <v-chip
+          v-else
+          color="#556b2f"
+          variant="outlined"
+          prepend-icon="mdi-check-decagram"
+          class="pa-6"
+        >
+          Saved to Archives
+        </v-chip>
+      </v-row>
+    </div>
+  </transition>
+</template>
+
+<script setup>
+defineProps({
+  recipe: { type: Object, default: null },
+  isSaving: { type: Boolean, default: false },
+  hasSaved: { type: Boolean, default: false }
+})
+
+defineEmits(['save'])
+</script>
\ No newline at end of file
diff --git a/Seasoned.Frontend/app/pages/chat.vue b/Seasoned.Frontend/app/pages/chat.vue
new file mode 100644
index 0000000..f07e281
--- /dev/null
+++ b/Seasoned.Frontend/app/pages/chat.vue
@@ -0,0 +1,126 @@
+<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">
+        <v-img 
+            src="/images/seasoned-logo.png" 
+            width="180" 
+            class="mx-auto"
+            contain
+          >
+        </v-img>
+        <p class="brand-subtitle">Kitchen Consultation</p>
+      </header>
+      
+      <v-divider class="mb-10 separator"></v-divider>
+
+      <v-row justify="center" class="mb-6">
+        <v-col cols="12" md="10">
+          <div class="chat-container">
+            <div class="section-header mb-4 d-flex align-center">
+              <v-icon icon="mdi-chef-hat" class="mr-2" size="small"></v-icon>
+              <span>Ask the Chef</span>
+              <v-spacer></v-spacer>
+              <v-btn v-if="chatMessages.length > 0" icon="mdi-delete-sweep-outline" variant="text" color="#8c7e6a" @click="chatMessages = []"></v-btn>
+            </div>
+            
+            <div class="chat-display" ref="chatDisplay">
+              <div v-if="chatMessages.length === 0" class="chat-placeholder">"What shall we create today?"</div>
+              <div v-for="(msg, i) in chatMessages" :key="i" :class="['message', msg.role]">
+                <span class="message-text">{{ msg.text }}</span>
+              </div>
+            </div>
+
+            <v-textarea
+                v-model="userQuery"
+                variant="outlined"
+                auto-grow
+                rows="1"
+                max-rows="6"
+                hide-details
+                class="chat-input"
+                @keyup.enter.exact.prevent="askChef"
+                :loading="chatLoading"
+                >
+                <template v-slot:append-inner>
+                    <v-btn 
+                    icon="mdi-send-variant" 
+                    variant="text" 
+                    size="small" 
+                    color="#8c4a32" 
+                    class="mt-1"
+                    @click="askChef"
+                    ></v-btn>
+                </template>
+            </v-textarea>
+          </div>
+        </v-col>
+      </v-row>
+
+      <RecipeDisplay 
+        :recipe="recipe" 
+        :is-saving="saving" 
+        :has-saved="hasSaved"
+        @save="saveToCollection" 
+      />
+    </v-card>
+  </v-container>
+</template>
+
+<script setup>
+import { ref, nextTick } from 'vue'
+import '@/assets/css/app-theme.css'
+
+const config = useRuntimeConfig()
+const recipe = ref(null)
+const userQuery = ref('')
+const chatLoading = ref(false)
+const chatMessages = ref([])
+const chatDisplay = ref(null)
+const saving = ref(false)
+const hasSaved = ref(false)
+
+const askChef = async () => {
+  if (!userQuery.value.trim()) return
+
+  const query = userQuery.value
+  chatMessages.value.push({ role: 'user', text: userQuery.value })
+  userQuery.value = ''
+  chatLoading.value = true
+
+  await nextTick()
+  scrollToBottom()
+
+  try {
+    const data = await $fetch(`${config.public.apiBase}api/recipe/consult`, {
+      method: 'POST',
+      body: { prompt: query }
+    })
+
+    chatMessages.value.push({ role: 'assistant', text: data.reply })
+
+    if (data.recipe && data.recipe.title) {
+      recipe.value = data.recipe
+      hasSaved.value = false
+      localStorage.removeItem('pending_recipe')
+    }
+
+    await nextTick()
+    scrollToBottom()
+
+  } catch (err) {
+    chatMessages.value.push({ 
+      role: 'assistant', 
+      text: "The kitchen is currently closed for repairs. Try again in a moment?" 
+    })
+  } finally {
+    chatLoading.value = false
+  }
+}
+
+const scrollToBottom = () => {
+  if (chatDisplay.value) {
+    chatDisplay.value.scrollTop = chatDisplay.value.scrollHeight
+  }
+}
+</script>
\ No newline at end of file
diff --git a/Seasoned.Frontend/app/pages/gallery.vue b/Seasoned.Frontend/app/pages/gallery.vue
index d47e159..81632bd 100644
--- a/Seasoned.Frontend/app/pages/gallery.vue
+++ b/Seasoned.Frontend/app/pages/gallery.vue
@@ -3,23 +3,17 @@
     <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">Your Collection</h1>
-        <p class="brand-subtitle">Hand-Picked & Seasoned</p>
+        <v-img 
+          src="/images/seasoned-logo.png" 
+          width="180" 
+          class="mx-auto"
+          contain
+        ></v-img>
+        <p class="brand-subtitle">Your Recipe Collection</p>
       </header>
 
       <v-divider class="mb-10 separator"></v-divider>
 
-      <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-if="loading" justify="center" class="py-16">
         <v-col cols="12" class="d-flex flex-column align-center">
           <v-progress-circular indeterminate color="#556b2f" size="64" width="3"></v-progress-circular>
@@ -190,6 +184,7 @@
 
 
 <script setup>
+import { ref, onMounted } from 'vue'
 import '@/assets/css/gallery.css'
 
 const recipes = ref([])
diff --git a/Seasoned.Frontend/app/pages/index.vue b/Seasoned.Frontend/app/pages/index.vue
index 698022b..14d87e7 100644
--- a/Seasoned.Frontend/app/pages/index.vue
+++ b/Seasoned.Frontend/app/pages/index.vue
@@ -1,399 +1,74 @@
 <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">
-        <div class="brand-icon-container mb-4">
-          <v-img 
-            :src="'/images/seasoned-logo.png'"
-            alt="Seasoned Logo"
-            width="120"
-            class="auth-logo mx-auto"
-            cover
-          ></v-img>
-        </div>
-        <p class="brand-subtitle">Recipe Creator and Recipe Uploader</p>
-      </header>
-      
-      <v-divider class="mb-10 separator"></v-divider>
+  <v-container fluid class="pa-0 landing-wrapper">
+    <v-row no-gutters justify="center" align="start" class="pt-6">
+      <v-col cols="12" class="text-center px-4">
+        
+        <v-card class="recipe-card pa-8 mx-auto mt-2" max-width="900">
+          
+          <header class="mb-10">
+            <div class="brand-icon-container mb-2">
+              <v-img 
+                src="/images/seasoned-logo.png" 
+                width="180" 
+                class="mx-auto"
+                contain
+              ></v-img>
+            </div>
+            <h1 class="brand-title mt-0 mb-1">Seasoned</h1>
+            <p class="brand-subtitle mb-8">A Recipe Generator and Collection Tool</p>
+          </header>
 
-      <v-row justify="center" class="mb-6">
-        <v-col cols="12" md="8">
-          <div class="chat-container">
-            <div class="section-header mb-4 d-flex align-center">
-              <v-icon icon="mdi-chef-hat" class="mr-2" size="small"></v-icon>
-              <span>Kitchen Consultation</span>
+          <v-divider class="mb-10 separator"></v-divider>
+
+          <v-row class="mb-12 px-6" justify="center">
+            <v-col cols="12" md="4" class="text-center d-flex flex-column align-center">
+              <v-icon icon="mdi-folder-text" size="large" style="color: #2e1e0a" class="mb-3"></v-icon>
+              <h3 class="section-header justify-center mb-3">Scan Archives</h3>
+              <p class="feature-text text-body-2">
+                Turn handwritten cards into searchable digital text instantly.
+              </p>
               <v-spacer></v-spacer>
-              <v-btn 
-                v-if="chatMessages.length > 0"
-                icon="mdi-delete-sweep-outline" 
-                variant="text" 
-                size="x-small" 
-                color="#8c7e6a"
-                title="Clear Conversation"
-                @click="chatMessages = []"
-              ></v-btn>
-            </div>
-            
-            <div class="chat-display mb-4" ref="chatDisplay">
-              <div v-if="chatMessages.length === 0" class="chat-placeholder">
-                "What shall we create today?"
-              </div>
-              <div v-for="(msg, i) in chatMessages" :key="i" :class="['message', msg.role]">
-                <span class="message-text">{{ msg.text }}</span>
-              </div>
-            </div>
-
-            <v-text-field
-              v-model="userQuery"
-              variant="outlined"
-              hide-details
-              class="chat-input"
-              @keyup.enter="askChef"
-              :loading="chatLoading"
-            >
-              <template v-slot:append-inner>
-                <v-btn icon="mdi-send-variant" variant="text" size="small" color="#5d4037" @click="askChef"></v-btn>
-              </template>
-            </v-text-field>
-          </div>
-        </v-col>
-      </v-row>
-
-      <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>
-
-          <div class="d-flex w-100 mt-4 align-center">
-            <v-btn 
-              class="analyze-btn flex-grow-1 mr-2"
-              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
-              class="clear-btn-solid"
-              variant="flat"
-              size="large"
-              elevation="0"
-              @click="clearAll"
-            >
-              <v-icon icon="mdi-refresh"></v-icon>
-            </v-btn>
-          </div>
-
-          <v-btn
-            class="gallery-btn w-100 mt-4"
-            size="large"
-            elevation="0"
-            @click="handleViewCollection"
-          >
-            <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-btn v-if="isLoggedIn" to="/uploader"  class="mt-12 column-button">
+                Got to Uploader
+              </v-btn>
             </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 cols="12" md="4" class="text-center d-flex flex-column align-center">
+              <v-icon icon="mdi-chef-hat" size="large" style="color: #2e1e0a" class="mb-3"></v-icon>
+              <h3 class="section-header justify-center mb-3">Consult the Chef</h3>
+              <p class="feature-text text-body-2">
+                Chat with an AI chef to scale ingredients, find substitutes, or get inspiration.
+              </p>
+              <v-spacer></v-spacer>
+              <v-btn v-if="isLoggedIn" to="/chat"  class="mt-12 column-button">
+                Talk to Chef
+              </v-btn>
+            </v-col>
+            <v-col cols="12" md="4" class="text-center d-flex flex-column align-center">
+              <v-icon icon="mdi-book-open-variant" size="large" style="color: #2e1e0a" class="mb-3"></v-icon>
+              <h3 class="section-header justify-center mb-3">Preserve History</h3>
+              <p class="feature-text text-body-2">
+                Build a private collection that keeps your family traditions alive and organized.
+              </p>
+              <v-spacer></v-spacer>
+              <v-btn v-if="isLoggedIn" to="/gallery"  class="mt-12 column-button">
+                View Collection
+              </v-btn>
             </v-col>
           </v-row>
-
-          <v-row justify="center" class="mt-12 pb-10">
-            <v-btn
-              v-if="!hasSaved"
-              class="save-recipe-btn px-12"
-              size="large"
-              elevation="0"
-              :loading="saving"
-              @click="saveToCollection"
-            >
-              <v-icon icon="mdi-content-save-check-outline" class="mr-2"></v-icon>
-              Save to Collection
+          <div v-if="!isLoggedIn" class="d-flex flex-column align-center">
+            <v-btn to="/login" class="analyze-btn px-12 py-6 mb-4" size="x-large">
+              Get Started
             </v-btn>
-          </v-row>
-
-        </div>
-      </transition>
-    </v-card>
-
-    <v-snackbar
-      v-model="snackbar.show"
-      :timeout="4000"
-      :color="snackbar.color"
-      class="thematic-snackbar"
-      location="bottom"
-    >
-      <div class="d-flex align-center">
-        <v-icon :icon="snackbar.icon" :color="snackbar.iconColor" class="mr-3"></v-icon>
-        <span class="snackbar-text" :style="{ color: snackbar.textColor }">
-          {{ snackbar.message }}
-        </span>
-      </div>
-    </v-snackbar>
-
+          </div>
+        </v-card>
+      </v-col>
+    </v-row>
   </v-container>
 </template>
 
 <script setup>
-import { ref, onMounted, nextTick } from 'vue'
-import { useRouter } from 'vue-router'
 import '@/assets/css/app-theme.css'
 
-const router = useRouter()
-const config = useRuntimeConfig()
-const files = ref([])
-const loading = ref(false)
-const recipe = ref(null)
-const isDragging = ref(false)
-const saving = ref(false)
-const hasSaved = ref(false)
-const userQuery = ref('')
-const chatLoading = ref(false)
-const chatMessages = ref([])
-const chatDisplay = ref(null)
+const isLoggedIn = useState('isLoggedIn', () => false)
 
-onMounted(() => {
-  const savedRecipe = localStorage.getItem('pending_recipe')
-  if (savedRecipe) {
-    recipe.value = JSON.parse(savedRecipe)
-    localStorage.removeItem('pending_recipe')
-    
-    snackbar.value = {
-      show: true,
-      message: 'Restored your analyzed recipe.',
-      color: '#f4ede1',
-      icon: 'mdi-history',
-      iconColor: '#556b2f',
-      textColor: '#5d4037'
-    }
-  }
-})
-
-const isAuthenticated = async () => {
- try {
-    await $fetch('/api/auth/manage/info', {
-      credentials: 'include'
-    })
-    return true
-  } catch {
-    return false
-  }
-}
-
-const handleViewCollection = () => {
-  const token = useCookie('seasoned_token').value 
-                || (import.meta.client ? localStorage.getItem('token') : null)
-  if (isAuthenticated()) {
-    router.push('/gallery')
-  } else {
-    router.push('/login')
-  }
-}
-
-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;
-  recipe.value = null;
-  hasSaved.value = false;
-
-  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;
-  }
-}
-
-const saveToCollection = async () => {
-  if (!recipe.value || hasSaved.value) return;
-
-  saving.value = true;
-
-  const isAuth = await isAuthenticated();
-
-  if (!isAuth) {
-    saving.value = false;
-    localStorage.setItem('pending_recipe', JSON.stringify(recipe.value))
-    
-    snackbar.value = {
-      show: true,
-      message: 'Please sign in to preserve this recipe in your archives.',
-      color: '#efe5e3',
-      icon: 'mdi-account-key',
-      iconColor: '#8c4a32',
-      textColor: '#5d4037'
-    };
-
-    setTimeout(() => {
-      router.push('/login')
-    }, 2000)
-    return;
-  }
-
-  try {
-    await $fetch(`${config.public.apiBase}api/recipe/save`, {
-      method: 'POST',
-      credentials: 'include',
-      body: recipe.value
-    });
-
-    hasSaved.value = true;
-    snackbar.value = {
-      show: true,
-      message: 'Recipe added to your collection.',
-      color: '#f4ede1',
-      icon: 'mdi-check-decagram',
-      iconColor: '#556b2f',
-      textColor: '#5d4037'
-    };
-  } catch (error) {
-    console.error("Save failed:", error);
-    snackbar.value = {
-      show: true,
-      message: 'Failure to save recipe.',
-      color: '#f8d7da',
-      icon: 'mdi-alert-rhombus',
-      iconColor: '#8c4a32',
-      textColor: '#5d4037'
-    };
-  } finally {
-    saving.value = false;
-  }
-}
-
-const snackbar = ref({
-  show: false,
-  message: '',
-  color: '#f4ede1',
-  icon: 'mdi-check-decagram',
-  iconColor: '#556b2f',
-  textColor: '#5d4037'
-})
-
-const clearAll = () => {
-  files.value = []
-  recipe.value = null
-  hasSaved.value = false
-  loading.value = false
-  saving.value = false
-  localStorage.removeItem('pending_recipe')
-}
-
-const askChef = async () => {
-  if (!userQuery.value.trim()) return
-
-  const query = userQuery.value
-  chatMessages.value.push({ role: 'user', text: userQuery.value })
-  userQuery.value = ''
-  chatLoading.value = true
-
-  await nextTick()
-  scrollToBottom()
-
-  try {
-    const data = await $fetch(`${config.public.apiBase}api/recipe/consult`, {
-      method: 'POST',
-      body: { prompt: query }
-    })
-
-    chatMessages.value.push({ role: 'assistant', text: data.reply })
-
-    if (data.recipe && data.recipe.title) {
-      recipe.value = data.recipe
-      hasSaved.value = false
-      files.value = []
-      localStorage.removeItem('pending_recipe')
-    }
-
-    await nextTick()
-    scrollToBottom()
-
-  } catch (err) {
-    chatMessages.value.push({ 
-      role: 'assistant', 
-      text: "The kitchen is currently closed for repairs. Try again in a moment?" 
-    })
-  } finally {
-    chatLoading.value = false
-  }
-}
-
-const scrollToBottom = () => {
-  if (chatDisplay.value) {
-    chatDisplay.value.scrollTop = chatDisplay.value.scrollHeight
-  }
-}
 </script>
\ No newline at end of file
diff --git a/Seasoned.Frontend/app/pages/login.vue b/Seasoned.Frontend/app/pages/login.vue
index 44cf736..cea66d3 100644
--- a/Seasoned.Frontend/app/pages/login.vue
+++ b/Seasoned.Frontend/app/pages/login.vue
@@ -62,25 +62,11 @@
       </v-btn>
     </v-card>
   </v-container>
-
-  <v-snackbar
-    v-model="snackbar.show"
-    :timeout="4000"
-    :color="snackbar.color"
-    class="thematic-snackbar"
-    location="bottom"
-  >
-    <div class="d-flex align-center">
-      <v-icon :icon="snackbar.icon" :color="snackbar.iconColor" class="mr-3"></v-icon>
-      <span class="snackbar-text" :style="{ color: snackbar.textColor }">
-        {{ snackbar.message }}
-      </span>
-    </div>
-  </v-snackbar>
 </template>
 
 <script setup>
 import { ref } from 'vue'
+import '@/assets/css/login.css'
 
 const isLogin = ref(true)
 const email = ref('')
@@ -88,15 +74,6 @@ const password = ref('')
 const authLoading = ref(false)
 const config = useRuntimeConfig()
 
-const snackbar = ref({
-  show: false,
-  message: '',
-  color: '#f4ede1',
-  icon: 'mdi-check-decagram',
-  iconColor: '#556b2f',
-  textColor: '#5d4037'
-})
-
 const handleAuth = async () => {
   authLoading.value = true
   const endpoint = isLogin.value ? 'api/auth/login' : 'api/auth/register'
@@ -117,39 +94,14 @@ const handleAuth = async () => {
     if (isLogin.value) {
       const isLoggedIn = useState('isLoggedIn')
       isLoggedIn.value = true
-      snackbar.value = {
-        show: true,
-        message: 'Welcome back!',
-        color: '#f4ede1',
-        icon: 'mdi-account-check',
-        iconColor: '#556b2f',
-        textColor: '#5d4037'
-      }
-    setTimeout(() => {
-        navigateTo('/')
-      }, 1200)
+      navigateTo('/')
     } else {
-      snackbar.value = {
-        show: true,
-        message: 'Account created! Try signing in.',
-        color: '#f4ede1',
-        icon: 'mdi-feather',
-        iconColor: '#556b2f',
-        textColor: '#5d4037'
-      }
       isLogin.value = true
       authLoading.value = false
     }
   } catch (err) {
     authLoading.value = false
-    snackbar.value = {
-      show: true,
-      message: 'The archives do not recognize these credentials.',
-      color: '#efe5e3',
-      icon: 'mdi-alert-rhombus',
-      iconColor: '#8c4a32',
-      textColor: '#5d4037'
-    }
+    console.error('Auth error:', err)
   }
 }
 </script>
\ No newline at end of file
diff --git a/Seasoned.Frontend/app/pages/uploader.vue b/Seasoned.Frontend/app/pages/uploader.vue
new file mode 100644
index 0000000..e848d2e
--- /dev/null
+++ b/Seasoned.Frontend/app/pages/uploader.vue
@@ -0,0 +1,209 @@
+<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">
+        <v-img 
+            src="/images/seasoned-logo.png" 
+            width="180" 
+            class="mx-auto"
+            contain
+          >
+        </v-img>
+        <p class="brand-subtitle">Recipe Uploader</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" color="#5d4a36"></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>
+
+
+          <div class="d-flex w-100 mt-4">
+            <v-btn class="analyze-btn flex-grow-1 mr-2" size="large" :loading="loading" :disabled="!files" @click="uploadImage">
+              <v-icon icon="mdi-pot-steam" class="mr-2"></v-icon>Analyze Recipe
+            </v-btn>
+            <v-btn class="clear-btn-solid" size="large" @click="clearAll"><v-icon icon="mdi-refresh"></v-icon></v-btn>
+          </div>
+        </v-col>
+      </v-row>
+
+      <RecipeDisplay 
+        :recipe="recipe" 
+        :is-saving="saving" 
+        :has-saved="hasSaved"
+        @save="saveToCollection" 
+      />
+    </v-card>
+  </v-container>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import '@/assets/css/app-theme.css'
+
+const router = useRouter()
+const config = useRuntimeConfig()
+const files = ref(null)
+const loading = ref(false)
+const recipe = ref(null)
+const isDragging = ref(false)
+const saving = ref(false)
+const hasSaved = ref(false)
+
+onMounted(() => {
+  const savedRecipe = localStorage.getItem('pending_recipe')
+  if (savedRecipe) {
+    recipe.value = JSON.parse(savedRecipe)
+    localStorage.removeItem('pending_recipe')
+      snackbar.value = {
+      show: true,
+      message: 'Restored your analyzed recipe.',
+      color: '#f4ede1',
+      icon: 'mdi-history',
+      iconColor: '#556b2f',
+      textColor: '#5d4037'
+    }
+  }
+})
+
+const isAuthenticated = async () => {
+  try {
+    await $fetch('/api/auth/manage/info', { credentials: 'include' })
+    return true
+  } catch {
+    return 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;
+  recipe.value = null;
+  hasSaved.value = false;
+
+  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;
+  }
+}
+
+const saveToCollection = async () => {
+  if (!recipe.value || hasSaved.value) return;
+
+  saving.value = true;
+
+  const isAuth = await isAuthenticated();
+
+  if (!isAuth) {
+    saving.value = false;
+    localStorage.setItem('pending_recipe', JSON.stringify(recipe.value))
+    
+    snackbar.value = {
+      show: true,
+      message: 'Please sign in to preserve this recipe in your archives.',
+      color: '#efe5e3',
+      icon: 'mdi-account-key',
+      iconColor: '#8c4a32',
+      textColor: '#5d4037'
+    };
+
+    setTimeout(() => {
+      router.push('/login')
+    }, 2000)
+    return;
+  }
+
+  try {
+    await $fetch(`${config.public.apiBase}api/recipe/save`, {
+      method: 'POST',
+      credentials: 'include',
+      body: recipe.value
+    });
+
+    hasSaved.value = true;
+    snackbar.value = {
+      show: true,
+      message: 'Recipe added to your collection.',
+      color: '#f4ede1',
+      icon: 'mdi-check-decagram',
+      iconColor: '#556b2f',
+      textColor: '#5d4037'
+    };
+  } catch (error) {
+    console.error("Save failed:", error);
+    snackbar.value = {
+      show: true,
+      message: 'Failure to save recipe.',
+      color: '#f8d7da',
+      icon: 'mdi-alert-rhombus',
+      iconColor: '#8c4a32',
+      textColor: '#5d4037'
+    };
+  } finally {
+    saving.value = false;
+  }
+}
+
+const snackbar = ref({
+  show: false,
+  message: '',
+  color: '#f4ede1',
+  icon: 'mdi-check-decagram',
+  iconColor: '#556b2f',
+  textColor: '#5d4037'
+})
+
+const clearAll = () => {
+  files.value = null
+  recipe.value = null
+  hasSaved.value = false
+  loading.value = false
+  saving.value = false
+  localStorage.removeItem('pending_recipe')
+}
+</script>
\ No newline at end of file
diff --git a/compose.yaml b/compose.yaml
index 65b55fa..71dce96 100644
--- a/compose.yaml
+++ b/compose.yaml
@@ -16,6 +16,7 @@ services:
 
   # Seasoned App: C# .NET 9 + Nuxt 4
   app:
+    image: git.wrigglyt.xyz/chloe/seasoned:latest
     build: .
     container_name: seasoned-main
     restart: always