diff --git a/package-lock.json b/package-lock.json
index 725667c..0719ba9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@supabase/supabase-js": "^2.76.1",
         "@tanstack/react-query": "5.69.0",
         "lucide-react": "0.484.0",
+        "motion": "^12.23.24",
         "next": "15.2.4",
         "react": "19.0.0",
         "react-dom": "19.0.0"
@@ -1268,6 +1269,7 @@
       "integrity": "sha512-MoFsEJKkAtZCrC1r6CM8U22GzhG7u2Wir8ons/aCKH6MBdD1ibV24zOSSkdZVUKqN5i396zG5VKLYZ3yaUZdLA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -1327,6 +1329,7 @@
       "integrity": "sha512-LPcw1yHD3ToaDEoljFEfQ9j2xShY367h7FZ1sq5NJT9I3yj4LHer1Xd1yRSOdYy9BpsrxU7R+eoDokChYM53lQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.28.0",
         "@typescript-eslint/types": "8.28.0",
@@ -1490,6 +1493,7 @@
       "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2310,6 +2314,7 @@
       "integrity": "sha512-jV7AbNoFPAY1EkFYpLq5bslU9NLNO8xnEeQXwErNibVryjk67wHVmddTBilc5srIttJDBrB0eMHKZBFbSIABCw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -2371,6 +2376,7 @@
       "integrity": "sha512-4EQQr6wXwS+ZJSzaR5ZCrYgLxqvUjdXctaEtBqHcbkW944B1NQyO4qpdHQbXBONfwxXdkAY81HH4+LUfrg+zPw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
       },
@@ -2768,6 +2774,33 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.23.24",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.24.tgz",
+      "integrity": "sha512-HMi5HRoRCTou+3fb3h9oTLyJGBxHfW+HnNE25tAXOvVx/IvwMHK0cx7IR4a2ZU6sh3IX1Z+4ts32PcYBOqka8w==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.23",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -3961,6 +3994,47 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/motion": {
+      "version": "12.23.24",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.23.24.tgz",
+      "integrity": "sha512-Rc5E7oe2YZ72N//S3QXGzbnXgqNrTESv8KKxABR20q2FLch9gHLo0JLyYo2hZ238bZ9Gx6cWhj9VO0IgwbMjCw==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^12.23.24",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "12.23.23",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
+      "integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -4375,6 +4449,7 @@
       "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -4525,6 +4600,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
       "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4534,6 +4610,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",
       "integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.25.0"
       },
@@ -5283,6 +5360,7 @@
       "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -5355,6 +5433,7 @@
       "integrity": "sha512-pS1hdZ+vnrpDIxuFXYQpLTILglTjSYJ9MbetZctrUawogUsPdz31DIIRZ9+rab0LhYNTsk88w4fIzVheiTbWOQ==",
       "dev": true,
       "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.0.0",
         "@typescript-eslint/types": "8.0.0",
diff --git a/package.json b/package.json
index d7139c9..e80dc53 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@supabase/supabase-js": "^2.76.1",
     "@tanstack/react-query": "5.69.0",
     "lucide-react": "0.484.0",
+    "motion": "^12.23.24",
     "next": "15.2.4",
     "react": "19.0.0",
     "react-dom": "19.0.0"
diff --git a/src/app/history/page.tsx b/src/app/history/page.tsx
index d26ce11..b509e6f 100644
--- a/src/app/history/page.tsx
+++ b/src/app/history/page.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react";
 import { getMealHistory, deleteMeal } from "@/database/api/meals";
 import { MealWithRecipe } from "@/types/database";
+import { motion } from "motion/react";
 
 const HistoryPage = () => {
   const [mealsList, setMealsList] = useState<MealWithRecipe[]>([]);
@@ -59,7 +60,13 @@ const HistoryPage = () => {
             </p>
           </div>
         ) : (
-          <div className="flex flex-col gap-4">
+          <motion.div
+            initial={{ opacity: 0, y: -10 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.5 }}
+            className="flex flex-col gap-4"
+          >
             {mealsList.map((mealItem) => {
               const mealDate = new Date(mealItem.eaten_at);
               const formattedDate = mealDate.toLocaleDateString("en-US", {
@@ -71,8 +78,11 @@ const HistoryPage = () => {
               });
 
               return (
-                <div
+                <motion.div
                   key={mealItem.id}
+                  initial={{ opacity: 0, y: 8 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.25 }}
                   className="border-cookcraft-olive bg-cookcraft-white rounded-2xl border-3 p-6"
                 >
                   <div className="flex items-start justify-between">
@@ -96,15 +106,15 @@ const HistoryPage = () => {
                     </div>
                     <button
                       onClick={() => handleDeleteMeal(mealItem.id)}
-                      className="text-cookcraft-red hover:text-cookcraft-yellow rounded-2xl border-3 px-4 py-2 font-bold transition-colors"
+                      className="text-cookcraft-red hover:text-cookcraft-yellow cursor-pointer rounded-2xl border-3 px-4 py-2 font-bold transition-colors"
                     >
                       Delete
                     </button>
                   </div>
-                </div>
+                </motion.div>
               );
             })}
-          </div>
+          </motion.div>
         )}
       </div>
     </div>
diff --git a/src/app/inventory/page.tsx b/src/app/inventory/page.tsx
index bfb27f1..5f35be0 100644
--- a/src/app/inventory/page.tsx
+++ b/src/app/inventory/page.tsx
@@ -9,6 +9,7 @@ import {
 } from "@/database/api/ingredients";
 import { Ingredient } from "@/types/database";
 import { INGREDIENT_CATEGORIES, UNITS } from "@/types/database";
+import { motion } from "motion/react";
 
 const InventoryPage = () => {
   const [ingredients, setIngredients] = useState<Ingredient[]>([]);
@@ -143,17 +144,24 @@ const InventoryPage = () => {
           </h1>
           <button
             onClick={() => setShowForm(!showForm)}
-            className="bg-cookcraft-red hover:bg-cookcraft-yellow rounded-2xl px-6 py-3 text-lg font-bold text-white transition-colors"
+            className="bg-cookcraft-red hover:bg-cookcraft-yellow cursor-pointer rounded-2xl px-6 py-3 text-lg font-bold text-white transition-colors"
           >
             {showForm ? "Cancel" : "Add Ingredient"}
           </button>
         </div>
 
         {showForm && (
-          <div className="border-cookcraft-olive bg-cookcraft-white mb-8 rounded-2xl border-3 p-6">
+          <motion.div
+            initial={{ opacity: 0, y: -10 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.5 }}
+            className="border-cookcraft-olive bg-cookcraft-white mb-8 rounded-2xl border-3 p-6"
+          >
             <h2 className="text-cookcraft-olive mb-4 text-2xl font-bold">
               {editingId ? "Edit Ingredient" : "Add Ingredient"}
             </h2>
+
             <form onSubmit={handleSubmit} className="flex flex-col gap-4">
               <div>
                 <label className="text-cookcraft-olive text-sm font-medium">
@@ -246,20 +254,20 @@ const InventoryPage = () => {
               <div className="flex gap-4">
                 <button
                   type="submit"
-                  className="bg-cookcraft-red hover:bg-cookcraft-yellow flex-1 rounded-2xl p-3 text-lg font-bold text-white transition-colors"
+                  className="bg-cookcraft-red hover:bg-cookcraft-yellow flex-1 cursor-pointer rounded-2xl p-3 text-lg font-bold text-white transition-colors"
                 >
                   {editingId ? "Update" : "Add"}
                 </button>
                 <button
                   type="button"
                   onClick={resetForm}
-                  className="border-cookcraft-olive text-cookcraft-olive hover:bg-cookcraft-white flex-1 rounded-2xl border-3 p-3 text-lg font-bold transition-colors"
+                  className="border-cookcraft-olive text-cookcraft-olive hover:bg-cookcraft-green flex-1 cursor-pointer rounded-2xl border-3 p-3 text-lg font-bold transition-colors"
                 >
                   Cancel
                 </button>
               </div>
             </form>
-          </div>
+          </motion.div>
         )}
 
         <div className="mb-6 flex gap-4">
@@ -273,7 +281,7 @@ const InventoryPage = () => {
           <select
             value={filterCategory}
             onChange={(e) => setFilterCategory(e.target.value)}
-            className="border-cookcraft-olive rounded-2xl border-3 p-3"
+            className="border-cookcraft-olive hover:border-cookcraft-red cursor-pointer rounded-2xl border-3 p-3"
           >
             <option value="">All Categories</option>
             {INGREDIENT_CATEGORIES.map((cat) => (
@@ -307,8 +315,12 @@ const InventoryPage = () => {
                   {items.map((ingredient) => {
                     const isExpanded = expandedId === ingredient.id;
                     return (
-                      <div
+                      <motion.div
                         key={ingredient.id}
+                        initial={{ opacity: 0, y: -10 }}
+                        whileInView={{ opacity: 1, y: 0 }}
+                        animate={{ opacity: 1 }}
+                        transition={{ duration: 0.5 }}
                         className="border-cookcraft-olive bg-cookcraft-white rounded-2xl border-3 p-4"
                       >
                         <div
@@ -334,13 +346,13 @@ const InventoryPage = () => {
                         <div className="mt-4 flex gap-2">
                           <button
                             onClick={() => handleQuickAdd(ingredient)}
-                            className="bg-cookcraft-green hover:bg-cookcraft-yellow flex-1 rounded-2xl p-2 text-sm font-bold text-white transition-colors"
+                            className="bg-cookcraft-green hover:bg-cookcraft-yellow flex-1 cursor-pointer rounded-2xl p-2 text-sm font-bold text-white transition-colors"
                           >
                             +1
                           </button>
                           <button
                             onClick={() => handleEdit(ingredient)}
-                            className="text-cookcraft-red hover:text-cookcraft-yellow flex-1 rounded-2xl border-3 p-2 text-sm font-bold transition-colors"
+                            className="text-cookcraft-red hover:text-cookcraft-yellow flex-1 cursor-pointer rounded-2xl border-3 p-2 text-sm font-bold transition-colors"
                           >
                             Edit
                           </button>
@@ -356,7 +368,7 @@ const InventoryPage = () => {
                             </button>
                           </div>
                         )}
-                      </div>
+                      </motion.div>
                     );
                   })}
                 </div>
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 9cb2881..df40af7 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -85,7 +85,7 @@ const LoginPage = () => {
           <button
             type="submit"
             disabled={loading}
-            className="bg-cookcraft-red hover:bg-cookcraft-yellow disabled:bg-cookcraft-green mt-2 rounded-2xl p-4 text-lg font-bold text-white transition-colors disabled:cursor-not-allowed"
+            className="bg-cookcraft-red hover:bg-cookcraft-yellow disabled:bg-cookcraft-green mt-2 cursor-pointer rounded-2xl p-4 text-lg font-bold text-white transition-colors disabled:cursor-not-allowed"
           >
             {loading ? "Sending Magic Link..." : "Send Magic Link"}
           </button>
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 965e16f..b7fa6f1 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -176,7 +176,7 @@ const ProfilePage = () => {
             {!isEditing && (
               <button
                 onClick={() => setIsEditing(true)}
-                className="text-cookcraft-red hover:text-cookcraft-yellow font-medium"
+                className="text-cookcraft-red hover:text-cookcraft-yellow cursor-pointer font-medium"
               >
                 Edit
               </button>
@@ -381,7 +381,7 @@ const ProfilePage = () => {
         <div className="border-cookcraft-olive mt-8 border-t-2 pt-6">
           <button
             onClick={handleUserSignOut}
-            className="bg-cookcraft-red hover:bg-cookcraft-yellow w-full rounded-2xl p-4 text-lg font-bold text-white transition-colors"
+            className="bg-cookcraft-red hover:bg-cookcraft-yellow w-full cursor-pointer rounded-2xl p-4 text-lg font-bold text-white transition-colors"
           >
             Sign Out
           </button>
diff --git a/src/app/recipes/[id]/page.tsx b/src/app/recipes/[id]/page.tsx
index f60298b..f129fc5 100644
--- a/src/app/recipes/[id]/page.tsx
+++ b/src/app/recipes/[id]/page.tsx
@@ -122,13 +122,13 @@ const RecipeDetailPage = () => {
             <div className="flex gap-2">
               <button
                 onClick={handleDuplicate}
-                className="text-cookcraft-red hover:text-cookcraft-yellow rounded-2xl border-3 px-4 py-2 font-bold transition-colors"
+                className="text-cookcraft-red hover:text-cookcraft-yellow cursor-pointer rounded-2xl border-3 px-4 py-2 font-bold transition-colors"
               >
                 Duplicate
               </button>
               <button
                 onClick={handleDeleteRecipe}
-                className="text-cookcraft-red hover:text-cookcraft-yellow rounded-2xl border-3 px-4 py-2 font-bold transition-colors"
+                className="text-cookcraft-red hover:text-cookcraft-yellow cursor-pointer rounded-2xl border-3 px-4 py-2 font-bold transition-colors"
               >
                 Delete
               </button>
@@ -207,7 +207,7 @@ const RecipeDetailPage = () => {
                   onClick={() => handleUpdateRating(star)}
                   onMouseEnter={() => setStarHover(star)}
                   onMouseLeave={() => setStarHover(0)}
-                  className="text-3xl transition-transform hover:scale-110"
+                  className="cursor-pointer text-3xl transition-transform hover:scale-110"
                 >
                   <span
                     className={
@@ -254,7 +254,7 @@ const RecipeDetailPage = () => {
           {recipeData.source === "duplicate" && recipeData.parent_recipe_id && (
             <div className="border-cookcraft-olive mt-6 border-t-2 pt-6">
               <p className="text-cookcraft-olive text-sm">
-                This recipe was duplicated from another recipe
+                This recipe was duplicated from another recipe!
               </p>
             </div>
           )}
@@ -262,7 +262,7 @@ const RecipeDetailPage = () => {
           {recipeData.source === "ai" && (
             <div className="border-cookcraft-olive mt-6 border-t-2 pt-6">
               <p className="text-cookcraft-olive text-sm">
-                This recipe was generated by AI
+                This recipe was generated by AI!
               </p>
             </div>
           )}
diff --git a/src/app/recipes/create/page.tsx b/src/app/recipes/create/page.tsx
index 198bf24..97c5696 100644
--- a/src/app/recipes/create/page.tsx
+++ b/src/app/recipes/create/page.tsx
@@ -195,8 +195,9 @@ const CreateRecipePage = () => {
                   className="border-cookcraft-olive mt-1 w-full rounded-2xl border-3 p-3"
                 >
                   {DIFFICULTY_LEVELS.map((level) => (
-                    <option key={level} value={level}>
-                      {level}
+                    <option key={level} value={level.toLowerCase()}>
+                      {level.charAt(0).toUpperCase() +
+                        level.slice(1).toLowerCase()}
                     </option>
                   ))}
                 </select>
@@ -266,6 +267,7 @@ const CreateRecipePage = () => {
                       })
                     }
                     step="0.01"
+                    min="0"
                     className="border-cookcraft-olive w-24 rounded-2xl border-3 p-2 text-sm"
                   />
                   <select
@@ -321,14 +323,14 @@ const CreateRecipePage = () => {
               <button
                 type="submit"
                 disabled={isSaving || ingredientsList.length === 0}
-                className="bg-cookcraft-red hover:bg-cookcraft-yellow disabled:bg-cookcraft-green flex-1 rounded-2xl p-4 text-lg font-bold text-white transition-colors disabled:cursor-not-allowed"
+                className="bg-cookcraft-red hover:bg-cookcraft-yellow disabled:bg-cookcraft-green flex-1 cursor-pointer rounded-2xl p-4 text-lg font-bold text-white transition-colors disabled:cursor-not-allowed"
               >
                 {isSaving ? "Creating..." : "Create Recipe"}
               </button>
               <button
                 type="button"
                 onClick={() => router.back()}
-                className="border-cookcraft-olive text-cookcraft-olive hover:bg-cookcraft-white flex-1 rounded-2xl border-3 p-4 text-lg font-bold transition-colors"
+                className="border-cookcraft-olive text-cookcraft-olive hover:bg-cookcraft-green flex-1 cursor-pointer rounded-2xl border-3 p-4 text-lg font-bold transition-colors"
               >
                 Cancel
               </button>
diff --git a/src/app/recipes/page.tsx b/src/app/recipes/page.tsx
index 05dbe73..f39965a 100644
--- a/src/app/recipes/page.tsx
+++ b/src/app/recipes/page.tsx
@@ -5,6 +5,7 @@ import { getRecipes, deleteRecipe } from "@/database/api/recipes";
 import { logMeal } from "@/database/api/meals";
 import { RecipeWithIngredients } from "@/types/database";
 import Link from "next/link";
+import { motion } from "motion/react";
 
 const RecipesPage = () => {
   const [recipes, setRecipes] = useState<RecipeWithIngredients[]>([]);
@@ -111,7 +112,7 @@ const RecipesPage = () => {
           <select
             value={sortBy}
             onChange={(e) => setSortBy(e.target.value as "rating" | "time")}
-            className="border-cookcraft-olive rounded-2xl border-3 p-3"
+            className="border-cookcraft-olive hover:border-cookcraft-red cursor-pointer rounded-2xl border-3 p-3"
           >
             <option value="rating">Sort by Rating</option>
             <option value="time">Sort by Time</option>
@@ -131,10 +132,17 @@ const RecipesPage = () => {
             </p>
           </div>
         ) : (
-          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          <motion.div
+            initial={{ opacity: 0, y: -10 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.5 }}
+            className="grid gap-6 md:grid-cols-2 lg:grid-cols-3"
+          >
             {filteredRecipes.map((recipe) => {
               const totalTime =
                 (recipe.prep_time || 0) + (recipe.cook_time || 0);
+
               return (
                 <div
                   key={recipe.id}
@@ -225,7 +233,7 @@ const RecipesPage = () => {
                           showMealForm === recipe.id ? null : recipe.id,
                         )
                       }
-                      className="bg-cookcraft-red hover:bg-cookcraft-yellow flex-1 rounded-2xl p-2 font-bold text-white transition-colors"
+                      className="bg-cookcraft-red hover:bg-cookcraft-yellow flex-1 cursor-pointer rounded-2xl p-2 font-bold text-white transition-colors"
                     >
                       {showMealForm === recipe.id ? "Cancel" : "Log Meal"}
                     </button>
@@ -237,7 +245,7 @@ const RecipesPage = () => {
                     </Link>
                     <button
                       onClick={() => handleDelete(recipe.id)}
-                      className="text-cookcraft-red hover:text-cookcraft-yellow rounded-2xl border-3 p-2 px-3 font-bold transition-colors"
+                      className="text-cookcraft-red hover:text-cookcraft-yellow cursor-pointer rounded-2xl border-3 p-2 px-3 font-bold transition-colors"
                     >
                       ×
                     </button>
@@ -245,7 +253,7 @@ const RecipesPage = () => {
                 </div>
               );
             })}
-          </div>
+          </motion.div>
         )}
       </div>
     </div>
diff --git a/src/components/home/ChatBot.tsx b/src/components/home/ChatBot.tsx
index 1450adf..70067a7 100644
--- a/src/components/home/ChatBot.tsx
+++ b/src/components/home/ChatBot.tsx
@@ -1,9 +1,33 @@
+"use client";
+import { useState, useEffect } from "react";
+import { motion } from "motion/react";
 import Image from "next/image";
 import logo from "@/public/home/cookCraftLogo.webp";
 const ChatBot = () => {
+  const fullText = "Welcome to CookCraft!";
+  const [displayedText, setDisplayedText] = useState<string>("");
+
+  useEffect(() => {
+    let index = 0;
+    const interval = setInterval(() => {
+      setDisplayedText(fullText.slice(0, index + 1));
+      index++;
+      if (index === fullText.length) {
+        clearInterval(interval);
+      }
+    }, 80);
+    return () => clearInterval(interval);
+  }, []);
+
   return (
     <div className="text-cookcraft-olive flex h-screen w-screen flex-col items-center justify-center text-6xl font-bold">
-      Welcome to CookCraft!
+      <motion.p
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 1 }}
+      >
+        {displayedText}
+      </motion.p>
       <Image src={logo} alt="Cook Craft Logo" className="mt-20 w-1/4" />
       <input
         type="text"