From 47cb350fd3f63b25c90127a22eeb93f60e3cda52 Mon Sep 17 00:00:00 2001
From: Degalax <naili26.lmr@gmail.com>
Date: Thu, 5 Feb 2026 15:40:06 +0100
Subject: [PATCH 1/2] feat: improve UI styling and readability

- Add Catalogue.css with proper card layout and flexbox
- Add CertifRecipe.css with certified recipe cards styling
- Improve text contrast across all pages (#3D2E2A for readability)
- Add placehold.co fallback images for missing recipe images
- Add white backgrounds for ingredients/instructions sections
- Remove vite.svg from public folder
- Update color palette for better accessibility
---
 public/vite.svg                         |   1 -
 src/App.tsx                             |   9 +
 src/components/.gitkeep                 |   0
 src/components/Header.css               |  85 ++++++----
 src/data/.gitkeep                       |   0
 src/index.css                           |  82 ++++++---
 src/pages/Catalogue/Catalogue.css       | 202 ++++++++++++++++++++++
 src/pages/Catalogue/page.tsx            | 216 +++++++++++-------------
 src/pages/Catalogue/recipedetail.css    |  84 +++++----
 src/pages/Catalogue/recipedetail.tsx    |  10 +-
 src/pages/CertifRecipe/CertifRecipe.css | 161 ++++++++++++++++++
 src/pages/CertifRecipe/page.tsx         |  94 ++++++-----
 src/pages/CreateRecipe/CreateRecipe.css | 121 ++++++++++---
 src/pages/Login/Login.css               |  57 ++++---
 src/pages/Planning/page.tsx             |  20 ++-
 src/pages/Settings/Settings.css         |  54 +++---
 src/pages/ShoppingList/ShoppingList.css | 142 +++++++++-------
 src/pages/Signup/Signup.css             |  57 ++++---
 src/styles/.gitkeep                     |   0
 src/types/.gitkeep                      |   0
 20 files changed, 973 insertions(+), 422 deletions(-)
 delete mode 100644 public/vite.svg
 delete mode 100644 src/components/.gitkeep
 delete mode 100644 src/data/.gitkeep
 create mode 100644 src/pages/Catalogue/Catalogue.css
 create mode 100644 src/pages/CertifRecipe/CertifRecipe.css
 delete mode 100644 src/styles/.gitkeep
 delete mode 100644 src/types/.gitkeep

diff --git a/public/vite.svg b/public/vite.svg
deleted file mode 100644
index e7b8dfb..0000000
--- a/public/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 2159660..2a84ef4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,6 +13,7 @@ import CertifRecipe from "./pages/CertifRecipe/page";
 import CreateRecipe from "./pages/CreateRecipe/page";
 import Home from "./pages/Home/page";
 import Login from "./pages/Login/page";
+import Planning from "./pages/Planning/page";
 import Settings from "./pages/Settings/page";
 import ShoppingList from "./pages/ShoppingList/page";
 import Signup from "./pages/Signup/page";
@@ -53,6 +54,14 @@ const AppContent = () => {
 						</ProtectedRoute>
 					}
 				/>
+				<Route
+					path="/Planning"
+					element={
+						<ProtectedRoute>
+							<Planning />
+						</ProtectedRoute>
+					}
+				/>
 				<Route
 					path="/Catalogue"
 					element={
diff --git a/src/components/.gitkeep b/src/components/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/Header.css b/src/components/Header.css
index f119eeb..58c880c 100644
--- a/src/components/Header.css
+++ b/src/components/Header.css
@@ -2,26 +2,28 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	padding: 0.5rem 4rem;
-	background-color: #ece0d1;
-	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Ombre douce et moderne */
+	padding: 0.75rem 4rem;
+	background: linear-gradient(135deg, #EEE2DF 0%, #EED7C5 100%);
+	box-shadow: 0 4px 20px rgba(179, 106, 94, 0.15);
 	position: sticky;
 	top: 0;
-	z-index: 1000; /* Toujours au dessus */
+	z-index: 1000;
+	border-bottom: 1px solid rgba(202, 124, 92, 0.2);
 }
 
-/* Calibrage du logo */
+/* Logo */
 .logo {
 	display: flex;
 	align-items: center;
 }
 
 .logo img {
-	height: 60px; /* Taille fixe et professionnelle */
+	height: 55px;
 	width: auto;
 	object-fit: contain;
 	display: block;
 	transition: transform 0.3s ease;
+	filter: drop-shadow(0 2px 4px rgba(179, 106, 94, 0.2));
 }
 
 .logo img:hover {
@@ -31,15 +33,16 @@
 .logo h1 {
 	margin: 0;
 	font-size: 1.5rem;
-	color: #2d2d2d;
-	margin-left: 10px; /* Espace si jamais il y a du texte à côté */
+	color: #B36A5E;
+	margin-left: 10px;
+	font-weight: 700;
 }
 
-/* Navigation propre */
+/* Navigation */
 .navigation ul {
 	list-style: none;
 	display: flex;
-	gap: 32px; /* Espacement aéré */
+	gap: 2rem;
 	margin: 0;
 	padding: 0;
 	align-items: center;
@@ -47,18 +50,19 @@
 
 .navigation a {
 	text-decoration: none;
-	color: #5d4037; /* Marron foncé élégant */
+	color: #B36A5E;
 	font-weight: 600;
-	font-size: 1rem;
-	letter-spacing: 0.5px;
+	font-size: 0.95rem;
+	letter-spacing: 0.3px;
 	transition: all 0.3s ease;
 	position: relative;
-	padding: 5px 0;
+	padding: 0.5rem 0.75rem;
+	border-radius: 8px;
 }
 
-/* Effet au survol */
 .navigation a:hover {
-	color: #c67a53; /* Ta couleur terracotta */
+	color: #CA7C5C;
+	background: rgba(202, 124, 92, 0.1);
 }
 
 .navigation a::after {
@@ -67,45 +71,63 @@
 	width: 0;
 	height: 2px;
 	bottom: 0;
-	left: 0;
-	background-color: #c67a53;
+	left: 50%;
+	transform: translateX(-50%);
+	background: linear-gradient(90deg, #CA7C5C, #B36A5E);
 	transition: width 0.3s ease;
+	border-radius: 2px;
 }
 
 .navigation a:hover::after {
-	width: 100%;
+	width: 80%;
 }
 
-/* Navigation items alignment */
+/* Navigation items */
 .navigation li {
 	display: flex;
 	align-items: center;
 }
 
+/* Active link style */
+.navigation a.active {
+	color: #CA7C5C;
+	background: rgba(202, 124, 92, 0.15);
+}
+
+.navigation a.active::after {
+	width: 80%;
+}
+
 /* User icon */
 .navigation a.user-link {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-	padding: 0;
+	padding: 0.5rem;
+	background: linear-gradient(135deg, #CA7C5C 0%, #B36A5E 100%);
+	border-radius: 50%;
+	width: 38px;
+	height: 38px;
 }
 
 .navigation a.user-link::after {
 	display: none;
 }
 
+.navigation a.user-link:hover {
+	background: linear-gradient(135deg, #B36A5E 0%, #9A5A50 100%);
+	transform: scale(1.05);
+}
+
 .user-icon {
-	width: 1rem;
-	height: 1rem;
+	width: 1.1rem;
+	height: 1.1rem;
 	vertical-align: middle;
 	transition: transform 0.2s ease;
+	filter: brightness(0) invert(1);
 }
 
-.navigation a.user-link:hover .user-icon {
-	transform: scale(1.1);
-}
-
-/* Responsive pour mobile */
+/* Responsive */
 @media (max-width: 768px) {
 	.header {
 		flex-direction: column;
@@ -114,8 +136,13 @@
 	}
 
 	.navigation ul {
-		gap: 15px;
+		gap: 1rem;
 		flex-wrap: wrap;
 		justify-content: center;
 	}
+
+	.navigation a {
+		font-size: 0.85rem;
+		padding: 0.4rem 0.6rem;
+	}
 }
diff --git a/src/data/.gitkeep b/src/data/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/index.css b/src/index.css
index 746abda..ea98030 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,9 +3,19 @@
 	line-height: 1.5;
 	font-weight: 400;
 
-	color-scheme: light dark;
-	color: rgba(255, 255, 255, 0.87);
-	background-color: #242424;
+	/* Color palette - improved contrast */
+	--color-bg-light: #FAF7F5;
+	--color-bg-peach: #F5EBE6;
+	--color-rose: #C89F9C;
+	--color-terra: #CA7C5C;
+	--color-terra-dark: #A65A42;
+	--color-text: #3D2E2A;
+	--color-text-light: #6B5750;
+	--color-text-muted: #8B7B74;
+
+	color-scheme: light;
+	color: #3D2E2A;
+	background-color: #FAF7F5;
 
 	font-synthesis: none;
 	text-rendering: optimizeLegibility;
@@ -15,12 +25,12 @@
 
 a {
 	font-weight: 500;
-	color: #ca7c5c;
+	color: #A65A42;
 	text-decoration: inherit;
 }
 
 a:hover {
-	color: #b36a5e;
+	color: #8B4534;
 }
 
 body {
@@ -28,45 +38,73 @@ body {
 	display: block;
 	min-width: 320px;
 	min-height: 100vh;
+	background: #FAF7F5;
 }
 
 h1 {
-	font-size: 3.2em;
+	font-size: 2.5em;
 	line-height: 1.1;
+	color: #3D2E2A;
+}
+
+h2 {
+	color: #3D2E2A;
+}
+
+h3 {
+	color: #3D2E2A;
+}
+
+p {
+	color: #3D2E2A;
 }
 
 button {
-	border-radius: 8px;
+	border-radius: 10px;
 	border: 1px solid transparent;
 	padding: 0.6em 1.2em;
 	font-size: 1em;
 	font-weight: 500;
 	font-family: inherit;
-	background-color: #1a1a1a;
+	background-color: #fff;
+	color: #3D2E2A;
 	cursor: pointer;
-	transition: border-color 0.25s;
+	transition: all 0.25s;
 }
 
 button:hover {
-	border-color: #646cff;
+	border-color: #CA7C5C;
+	background-color: #F5EBE6;
 }
 
 button:focus,
 button:focus-visible {
-	outline: 4px auto -webkit-focus-ring-color;
+	outline: 3px solid rgba(202, 124, 92, 0.3);
+	outline-offset: 2px;
 }
 
-@media (prefers-color-scheme: light) {
-	:root {
-		color: #213547;
-		background-color: #ffffff;
-	}
+/* Scrollbar styling */
+::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+
+::-webkit-scrollbar-track {
+	background: #F5EBE6;
+	border-radius: 4px;
+}
 
-	a:hover {
-		color: #747bff;
-	}
+::-webkit-scrollbar-thumb {
+	background: #C89F9C;
+	border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background: #CA7C5C;
+}
 
-	button {
-		background-color: #f9f9f9;
-	}
+/* Selection styling */
+::selection {
+	background: rgba(202, 124, 92, 0.3);
+	color: #5d4037;
 }
diff --git a/src/pages/Catalogue/Catalogue.css b/src/pages/Catalogue/Catalogue.css
new file mode 100644
index 0000000..8bde292
--- /dev/null
+++ b/src/pages/Catalogue/Catalogue.css
@@ -0,0 +1,202 @@
+.catalogue-container {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 2rem;
+}
+
+.catalogue-container h2 {
+	color: #3D2E2A;
+	font-size: 2rem;
+	margin-bottom: 0.5rem;
+}
+
+.catalogue-container p {
+	color: #6B5750;
+	margin-bottom: 1.5rem;
+}
+
+/* Filters */
+.catalogue-filters {
+	display: flex;
+	gap: 1.5rem;
+	margin-bottom: 2rem;
+	flex-wrap: wrap;
+	align-items: center;
+	background: #fff;
+	padding: 1.25rem;
+	border-radius: 12px;
+	box-shadow: 0 2px 8px rgba(61, 46, 42, 0.08);
+}
+
+.catalogue-filter-group {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.catalogue-filter-group label {
+	color: #3D2E2A;
+	font-weight: 600;
+	font-size: 0.9rem;
+}
+
+.catalogue-filter-group select {
+	padding: 0.6rem 1rem;
+	border-radius: 8px;
+	border: 2px solid #F5EBE6;
+	background: #fff;
+	color: #3D2E2A;
+	font-size: 0.95rem;
+	min-width: 160px;
+	cursor: pointer;
+	transition: all 0.2s;
+}
+
+.catalogue-filter-group select:focus {
+	outline: none;
+	border-color: #CA7C5C;
+	box-shadow: 0 0 0 3px rgba(202, 124, 92, 0.15);
+}
+
+.catalogue-reset-btn {
+	padding: 0.6rem 1.25rem;
+	border-radius: 8px;
+	border: none;
+	background: linear-gradient(135deg, #CA7C5C 0%, #A65A42 100%);
+	color: white;
+	cursor: pointer;
+	font-weight: 600;
+	transition: all 0.2s;
+}
+
+.catalogue-reset-btn:hover {
+	transform: translateY(-2px);
+	box-shadow: 0 4px 12px rgba(166, 90, 66, 0.3);
+}
+
+/* Section titles */
+.catalogue-section-title {
+	color: #3D2E2A;
+	font-size: 1.5rem;
+	margin: 2rem 0 1rem;
+	padding-bottom: 0.5rem;
+	border-bottom: 2px solid #CA7C5C;
+	display: inline-block;
+}
+
+/* Recipe grid */
+.catalogue-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+	gap: 1.5rem;
+	margin-bottom: 2rem;
+}
+
+/* Recipe card */
+.catalogue-card {
+	background: #fff;
+	border-radius: 16px;
+	overflow: hidden;
+	text-decoration: none;
+	box-shadow: 0 4px 12px rgba(61, 46, 42, 0.08);
+	transition: all 0.3s ease;
+	border: 1px solid #F5EBE6;
+	display: flex;
+	flex-direction: column;
+}
+
+.catalogue-card:hover {
+	transform: translateY(-4px);
+	box-shadow: 0 8px 24px rgba(61, 46, 42, 0.15);
+}
+
+.catalogue-card-custom {
+	border: 2px solid #CA7C5C;
+}
+
+.catalogue-card-image {
+	width: 100%;
+	height: 180px;
+	overflow: hidden;
+	background: #F5EBE6;
+	position: relative;
+	flex-shrink: 0;
+}
+
+.catalogue-card-image img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	display: block;
+}
+
+.catalogue-card-difficulty {
+	position: absolute;
+	bottom: 8px;
+	right: 8px;
+	background: linear-gradient(135deg, #CA7C5C 0%, #A65A42 100%);
+	color: #fff;
+	font-size: 0.75rem;
+	padding: 0.25rem 0.6rem;
+	border-radius: 4px;
+	font-weight: 500;
+}
+
+.catalogue-card-content {
+	padding: 1.25rem;
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+
+.catalogue-card-title {
+	color: #3D2E2A;
+	font-size: 1.15rem;
+	margin: 0 0 0.5rem 0;
+	font-weight: 600;
+}
+
+.catalogue-card-meta {
+	color: #6B5750;
+	font-size: 0.9rem;
+	margin: 0 0 0.75rem 0;
+}
+
+.catalogue-card-footer {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	color: #6B5750;
+	font-size: 0.85rem;
+	margin-top: auto;
+	padding-top: 0.75rem;
+	border-top: 1px solid #F5EBE6;
+}
+
+.catalogue-card-time,
+.catalogue-card-servings {
+	display: flex;
+	align-items: center;
+	gap: 0.3rem;
+}
+
+.catalogue-badge {
+	background: linear-gradient(135deg, #CA7C5C 0%, #A65A42 100%);
+	color: #fff;
+	font-size: 0.75rem;
+	padding: 0.25rem 0.6rem;
+	border-radius: 4px;
+	font-weight: 500;
+	margin-right: 0.75rem;
+}
+
+/* Empty state */
+.catalogue-empty {
+	text-align: center;
+	padding: 3rem;
+	color: #8B7B74;
+	font-style: italic;
+	background: #fff;
+	border-radius: 12px;
+	border: 2px dashed #F5EBE6;
+}
diff --git a/src/pages/Catalogue/page.tsx b/src/pages/Catalogue/page.tsx
index d84d67d..0567927 100644
--- a/src/pages/Catalogue/page.tsx
+++ b/src/pages/Catalogue/page.tsx
@@ -1,11 +1,15 @@
 import { useEffect, useMemo, useState } from "react";
 import { Link } from "react-router-dom";
 import recipesData from "../../data/recipes.json";
+import "./Catalogue.css";
 
 const API_BASE_URL = import.meta.env.PROD
 	? "https://7pret-production.up.railway.app"
 	: "http://localhost:5173";
 
+const PLACEHOLDER_IMAGE =
+	"https://placehold.co/400x300/F5EBE6/CA7C5C?text=🍽️+Recette";
+
 interface RecipeProps {
 	id: number;
 	name: string;
@@ -29,6 +33,13 @@ interface CustomRecipe {
 	servings: number | null;
 }
 
+const getImageUrl = (image: string | null | undefined): string => {
+	if (!image || image === "url..." || image === "") {
+		return PLACEHOLDER_IMAGE;
+	}
+	return image;
+};
+
 const Catalogue = () => {
 	const recipes: RecipeProps[] = recipesData as unknown as RecipeProps[];
 	const [customRecipes, setCustomRecipes] = useState<CustomRecipe[]>([]);
@@ -94,33 +105,19 @@ const Catalogue = () => {
 	}, [customRecipes, filterCuisine, filterType]);
 
 	return (
-		<div>
-			<h2>Bienvenue sur le Catalogue</h2>
-			<p>Voici la liste de nos recettes :</p>
+		<div className="catalogue-container">
+			<div className="catalogue-header">
+				<h2>Catalogue de recettes</h2>
+				<p>Découvrez notre sélection de délicieuses recettes</p>
+			</div>
 
-			<div
-				style={{
-					display: "flex",
-					gap: "20px",
-					marginBottom: "20px",
-					flexWrap: "wrap",
-					alignItems: "center",
-				}}
-			>
-				<div>
-					<label htmlFor="filter-cuisine" style={{ marginRight: "8px" }}>
-						Cuisine :
-					</label>
+			<div className="catalogue-filters">
+				<div className="catalogue-filter-group">
+					<label htmlFor="filter-cuisine">Cuisine :</label>
 					<select
 						id="filter-cuisine"
 						value={filterCuisine}
 						onChange={(e) => setFilterCuisine(e.target.value)}
-						style={{
-							padding: "8px 12px",
-							borderRadius: "4px",
-							border: "1px solid #ccc",
-							minWidth: "150px",
-						}}
 					>
 						<option value="">Toutes les cuisines</option>
 						{uniqueCuisines.map((cuisine) => (
@@ -131,20 +128,12 @@ const Catalogue = () => {
 					</select>
 				</div>
 
-				<div>
-					<label htmlFor="filter-type" style={{ marginRight: "8px" }}>
-						Type :
-					</label>
+				<div className="catalogue-filter-group">
+					<label htmlFor="filter-type">Type :</label>
 					<select
 						id="filter-type"
 						value={filterType}
 						onChange={(e) => setFilterType(e.target.value)}
-						style={{
-							padding: "8px 12px",
-							borderRadius: "4px",
-							border: "1px solid #ccc",
-							minWidth: "150px",
-						}}
 					>
 						<option value="">Tous les types</option>
 						{uniqueTypes.map((type) => (
@@ -158,18 +147,11 @@ const Catalogue = () => {
 				{(filterCuisine || filterType) && (
 					<button
 						type="button"
+						className="catalogue-reset-btn"
 						onClick={() => {
 							setFilterCuisine("");
 							setFilterType("");
 						}}
-						style={{
-							padding: "8px 16px",
-							borderRadius: "4px",
-							border: "none",
-							background: "#c67a53",
-							color: "white",
-							cursor: "pointer",
-						}}
 					>
 						Réinitialiser les filtres
 					</button>
@@ -177,98 +159,94 @@ const Catalogue = () => {
 			</div>
 
 			{filteredCustomRecipes.length > 0 && (
-				<>
-					<h3>Mes recettes personnalisées</h3>
-					<div
-						style={{
-							display: "grid",
-							gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))",
-							gap: "20px",
-							marginBottom: "30px",
-						}}
-					>
+				<section className="catalogue-section">
+					<h3 className="catalogue-section-title">
+						<span className="catalogue-badge">Mes créations</span>
+						Mes recettes personnalisées
+					</h3>
+					<div className="catalogue-grid">
 						{filteredCustomRecipes.map((recipe) => (
 							<Link
 								to={`/custom-recipe/${recipe.id}`}
 								key={recipe.id}
-								style={{
-									border: "2px solid #4caf50",
-									padding: "10px",
-									borderRadius: "8px",
-									textDecoration: "none",
-									background: "#f9fff9",
-								}}
+								className="catalogue-card catalogue-card-custom"
 							>
-								<h3>{recipe.name}</h3>
-								<p>
-									{recipe.cuisine || "Non spécifié"}
-									{recipe.type && ` - ${recipe.type}`}
-								</p>
-								<p>
-									{(recipe.prepTime || 0) + (recipe.cookTime || 0)} min
-									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Pers: {recipe.servings || "?"}
-								</p>
-								{recipe.image && (
+								<div className="catalogue-card-image">
 									<img
-										src={recipe.image}
+										src={getImageUrl(recipe.image)}
 										alt={recipe.name}
-										style={{ maxWidth: "100%" }}
+										onError={(e) => {
+											e.currentTarget.src = PLACEHOLDER_IMAGE;
+										}}
 									/>
-								)}
+								</div>
+								<div className="catalogue-card-content">
+									<h3 className="catalogue-card-title">{recipe.name}</h3>
+									<p className="catalogue-card-meta">
+										{recipe.cuisine || "Non spécifié"}
+										{recipe.type && ` • ${recipe.type}`}
+									</p>
+									<div className="catalogue-card-footer">
+										<span className="catalogue-card-time">
+											⏱️ {(recipe.prepTime || 0) + (recipe.cookTime || 0)} min
+										</span>
+										<span className="catalogue-card-servings">
+											👥 {recipe.servings || "?"} pers
+										</span>
+									</div>
+								</div>
 							</Link>
 						))}
 					</div>
-				</>
+				</section>
 			)}
 
-			<h3>Recettes proposées</h3>
-			{filteredRecipes.length === 0 ? (
-				<p style={{ fontStyle: "italic", color: "#888" }}>
-					Aucune recette ne correspond aux filtres sélectionnés.
-				</p>
-			) : (
-				<div
-					style={{
-						display: "grid",
-						gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))",
-						gap: "20px",
-					}}
-				>
-					{filteredRecipes.map((recipe) => (
-						<Link
-							to={`/recipe/${recipe.id}`}
-							key={recipe.id}
-							style={{
-								border: "1px solid #ccc",
-								padding: "10px",
-								borderRadius: "8px",
-								textDecoration: "none",
-							}}
-						>
-							<h3>{recipe.name}</h3>
-							<p>
-								{recipe.cuisine}
-								{recipe.type && ` - ${recipe.type}`}
-							</p>
-							<p>
-								{recipe.Time} min
-								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Pers: {recipe.servings}
-							</p>
-							<img
-								src={recipe.image}
-								alt={`Difficulté: ${recipe.difficulty}`}
-								style={{ maxWidth: "100%" }}
-							/>
-						</Link>
-					))}
-				</div>
-			)}
+			<section className="catalogue-section">
+				<h3 className="catalogue-section-title">Recettes proposées</h3>
+				{filteredRecipes.length === 0 ? (
+					<p className="catalogue-empty">
+						Aucune recette ne correspond aux filtres sélectionnés.
+					</p>
+				) : (
+					<div className="catalogue-grid">
+						{filteredRecipes.map((recipe) => (
+							<Link
+								to={`/recipe/${recipe.id}`}
+								key={recipe.id}
+								className="catalogue-card"
+							>
+								<div className="catalogue-card-image">
+									<img
+										src={getImageUrl(recipe.image)}
+										alt={recipe.name}
+										onError={(e) => {
+											e.currentTarget.src = PLACEHOLDER_IMAGE;
+										}}
+									/>
+									<span className="catalogue-card-difficulty">
+										{recipe.difficulty}
+									</span>
+								</div>
+								<div className="catalogue-card-content">
+									<h3 className="catalogue-card-title">{recipe.name}</h3>
+									<p className="catalogue-card-meta">
+										{recipe.cuisine}
+										{recipe.type && ` • ${recipe.type}`}
+									</p>
+									<div className="catalogue-card-footer">
+										<span className="catalogue-card-time">
+											⏱️ {recipe.Time} min
+										</span>
+										<span className="catalogue-card-servings">
+											👥 {recipe.servings} pers
+										</span>
+									</div>
+								</div>
+							</Link>
+						))}
+					</div>
+				)}
+			</section>
 		</div>
 	);
 };
diff --git a/src/pages/Catalogue/recipedetail.css b/src/pages/Catalogue/recipedetail.css
index 137f546..65e896c 100644
--- a/src/pages/Catalogue/recipedetail.css
+++ b/src/pages/Catalogue/recipedetail.css
@@ -3,30 +3,36 @@
 	margin: 0 auto;
 	padding: 2rem 1rem;
 	font-family: sans-serif;
-	background-color: #1a1a1a;
-	color: #eedcca;
+	background: linear-gradient(180deg, #EEE2DF 0%, #EED7C5 100%);
+	color: #3D2E2A;
 	min-height: 100vh;
 }
 
 .back-link {
-	display: inline-block;
-	margin-bottom: 1rem;
-	color: #c67a53;
+	display: inline-flex;
+	align-items: center;
+	gap: 0.5rem;
+	margin-bottom: 1.5rem;
+	color: #B36A5E;
 	font-weight: 600;
 	text-decoration: none;
-	transition: color 0.2s;
+	transition: all 0.2s;
+	padding: 0.5rem 1rem;
+	background: #fff;
+	border-radius: 8px;
+	box-shadow: 0 2px 8px rgba(179, 106, 94, 0.1);
 }
 
 .back-link:hover {
-	color: #a76556;
-	text-decoration: underline;
+	color: #CA7C5C;
+	transform: translateX(-3px);
 }
 
 .recipe-header-title {
-	font-size: 1.875rem;
+	font-size: 2rem;
 	font-weight: bold;
 	margin-bottom: 1rem;
-	color: #a76556;
+	color: #B36A5E;
 }
 
 .recipe-content {
@@ -44,16 +50,16 @@
 .recipe-image {
 	width: 100%;
 	height: auto;
-	border-radius: 0.5rem;
-	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
-	border: 4px solid #2d2d2d;
+	border-radius: 16px;
+	box-shadow: 0 10px 30px rgba(179, 106, 94, 0.2);
+	border: 4px solid #fff;
 }
 
 .recipe-subtitle {
 	font-size: 1.5rem;
 	font-weight: 600;
 	margin-bottom: 0.5rem;
-	color: #c67a53;
+	color: #B36A5E;
 }
 
 .tags-wrapper {
@@ -71,17 +77,18 @@
 }
 
 .tag-cuisine {
-	background-color: #eedcca;
-	color: #7a483e;
+	background-color: #fff;
+	color: #B36A5E;
+	border: 1px solid #EED7C5;
 }
 
 .tag-difficulty {
-	background-color: #c59c99;
+	background-color: #C89F9C;
 	color: #fff;
 }
 
 .tag-rating {
-	background-color: #c67a53;
+	background-color: #CA7C5C;
 	color: #fff;
 }
 
@@ -94,14 +101,15 @@
 }
 
 .stat-box {
-	background-color: #2d2d2d;
+	background-color: #fff;
 	padding: 0.75rem;
-	border-radius: 0.5rem;
-	border: 1px solid #444;
+	border-radius: 12px;
+	border: 1px solid #EED7C5;
+	box-shadow: 0 2px 8px rgba(179, 106, 94, 0.08);
 }
 
 .stat-label {
-	color: #c59c99;
+	color: #C89F9C;
 	font-size: 0.875rem;
 	margin: 0;
 	text-transform: uppercase;
@@ -109,7 +117,7 @@
 }
 
 .stat-value {
-	color: #eedcca;
+	color: #B36A5E;
 	font-weight: 700;
 	font-size: 1.1rem;
 	margin: 0.25rem 0 0 0;
@@ -117,29 +125,33 @@
 
 .section-title {
 	font-size: 1.25rem;
-	font-weight: 600;
+	font-weight: 700;
 	margin-bottom: 0.75rem;
-	color: #a76556;
-	border-bottom: 2px solid #5d4037;
+	color: #3D2E2A;
+	border-bottom: 2px solid #CA7C5C;
 	padding-bottom: 0.25rem;
 	display: inline-block;
 }
 
 .ingredient-list {
 	list-style-type: none;
-	padding-left: 0;
+	padding: 1.25rem;
 	margin-bottom: 1.5rem;
+	background: #fff;
+	border-radius: 12px;
+	box-shadow: 0 2px 8px rgba(61, 46, 42, 0.08);
 }
 
 .ingredient-list .list-item {
 	position: relative;
 	padding-left: 1.5rem;
 	margin-bottom: 0.5rem;
+	color: #3D2E2A;
 }
 
 .ingredient-list .list-item::before {
 	content: "•";
-	color: #c67a53;
+	color: #CA7C5C;
 	font-size: 1.5rem;
 	position: absolute;
 	left: 0;
@@ -148,22 +160,26 @@
 
 .instruction-list {
 	list-style-type: decimal;
-	padding-left: 1.25rem;
+	padding: 1.25rem 1.25rem 1.25rem 2.5rem;
+	background: #fff;
+	border-radius: 12px;
+	box-shadow: 0 2px 8px rgba(61, 46, 42, 0.08);
 }
 
 .instruction-list .list-item::marker {
-	color: #c67a53;
+	color: #CA7C5C;
 	font-weight: bold;
 }
 
 .list-item {
-	color: #eedcca;
-	margin-bottom: 0.5rem;
-	line-height: 1.6;
+	color: #3D2E2A;
+	margin-bottom: 0.75rem;
+	line-height: 1.7;
+	font-weight: 500;
 }
 
 .empty-text {
-	color: #888;
+	color: #C89F9C;
 	font-style: italic;
 }
 
diff --git a/src/pages/Catalogue/recipedetail.tsx b/src/pages/Catalogue/recipedetail.tsx
index 267e0e9..730bfbc 100644
--- a/src/pages/Catalogue/recipedetail.tsx
+++ b/src/pages/Catalogue/recipedetail.tsx
@@ -367,9 +367,17 @@ const RecipeDetail = ({ isCustom = false }: RecipeDetailComponentProps) => {
 				<div className="recipe-content">
 					<div>
 						<img
-							src={recipe.image || "https://placehold.co/600x400?text=No+Image"}
+							src={
+								recipe.image && recipe.image !== "url..."
+									? recipe.image
+									: "https://placehold.co/600x400/F5EBE6/CA7C5C?text=🍽️+Recette"
+							}
 							alt={recipe.name}
 							className="recipe-image"
+							onError={(e) => {
+								e.currentTarget.src =
+									"https://placehold.co/600x400/F5EBE6/CA7C5C?text=🍽️+Recette";
+							}}
 						/>
 					</div>
 					<div>
diff --git a/src/pages/CertifRecipe/CertifRecipe.css b/src/pages/CertifRecipe/CertifRecipe.css
new file mode 100644
index 0000000..1421d61
--- /dev/null
+++ b/src/pages/CertifRecipe/CertifRecipe.css
@@ -0,0 +1,161 @@
+.certif-container {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 2rem;
+}
+
+.certif-header {
+	margin-bottom: 2rem;
+}
+
+.certif-header h2 {
+	color: #3D2E2A;
+	font-size: 2rem;
+	margin-bottom: 0.5rem;
+}
+
+.certif-header p {
+	color: #6B5750;
+}
+
+.certif-badge {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.5rem;
+	background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
+	color: #3D2E2A;
+	padding: 0.5rem 1rem;
+	border-radius: 20px;
+	font-weight: 600;
+	font-size: 0.9rem;
+	margin-bottom: 1rem;
+}
+
+/* Recipe grid */
+.certif-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+	gap: 1.5rem;
+}
+
+/* Recipe card */
+.certif-card {
+	background: #fff;
+	border-radius: 16px;
+	overflow: hidden;
+	text-decoration: none;
+	box-shadow: 0 4px 12px rgba(61, 46, 42, 0.08);
+	transition: all 0.3s ease;
+	border: 2px solid #FFD700;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+}
+
+.certif-card::before {
+	content: "⭐ Certifiée";
+	position: absolute;
+	top: 12px;
+	left: 12px;
+	background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
+	color: #3D2E2A;
+	padding: 0.25rem 0.75rem;
+	border-radius: 20px;
+	font-size: 0.75rem;
+	font-weight: 600;
+	z-index: 2;
+}
+
+.certif-card:hover {
+	transform: translateY(-4px);
+	box-shadow: 0 8px 24px rgba(255, 215, 0, 0.25);
+}
+
+.certif-card-image {
+	width: 100%;
+	height: 180px;
+	overflow: hidden;
+	background: #F5EBE6;
+	position: relative;
+	flex-shrink: 0;
+}
+
+.certif-card-image img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	display: block;
+}
+
+.certif-card-difficulty {
+	position: absolute;
+	bottom: 8px;
+	right: 8px;
+	background: linear-gradient(135deg, #CA7C5C 0%, #A65A42 100%);
+	color: #fff;
+	font-size: 0.75rem;
+	padding: 0.25rem 0.6rem;
+	border-radius: 4px;
+	font-weight: 500;
+}
+
+.certif-card-rating {
+	position: absolute;
+	bottom: 8px;
+	left: 8px;
+	background: rgba(255, 255, 255, 0.95);
+	color: #3D2E2A;
+	font-size: 0.8rem;
+	padding: 0.25rem 0.6rem;
+	border-radius: 4px;
+	font-weight: 600;
+}
+
+.certif-card-content {
+	padding: 1.25rem;
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+
+.certif-card-title {
+	color: #3D2E2A;
+	font-size: 1.15rem;
+	margin: 0 0 0.5rem 0;
+	font-weight: 600;
+}
+
+.certif-card-meta {
+	color: #6B5750;
+	font-size: 0.9rem;
+	margin: 0 0 0.75rem 0;
+}
+
+.certif-card-footer {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	color: #6B5750;
+	font-size: 0.85rem;
+	margin-top: auto;
+	padding-top: 0.75rem;
+	border-top: 1px solid #F5EBE6;
+}
+
+.certif-card-time,
+.certif-card-servings {
+	display: flex;
+	align-items: center;
+	gap: 0.3rem;
+}
+
+/* Empty state */
+.certif-empty {
+	text-align: center;
+	padding: 3rem;
+	color: #8B7B74;
+	font-style: italic;
+	background: #fff;
+	border-radius: 12px;
+	border: 2px dashed #F5EBE6;
+}
diff --git a/src/pages/CertifRecipe/page.tsx b/src/pages/CertifRecipe/page.tsx
index 5f18e79..60eafd1 100644
--- a/src/pages/CertifRecipe/page.tsx
+++ b/src/pages/CertifRecipe/page.tsx
@@ -1,5 +1,9 @@
 import { Link } from "react-router-dom";
 import recipesData from "../../data/recipes.json";
+import "./CertifRecipe.css";
+
+const PLACEHOLDER_IMAGE =
+	"https://placehold.co/400x300/F5EBE6/CA7C5C?text=🍽️+Recette";
 
 interface RecipeProps {
 	id: number;
@@ -12,50 +16,64 @@ interface RecipeProps {
 	rating: number;
 }
 
+const getImageUrl = (image: string | null | undefined): string => {
+	if (!image || image === "url..." || image === "") {
+		return PLACEHOLDER_IMAGE;
+	}
+	return image;
+};
+
 const CertifRecipe = () => {
 	const recipes: RecipeProps[] = recipesData as unknown as RecipeProps[];
 	const certifiedRecipes = recipes.filter((recipe) => recipe.rating >= 4.8);
 
 	return (
-		<div>
-			<h2>Bievenue sur le Catalogue</h2>
-			<p>Voici la liste de nos recettes Certifié :</p>
-
-			<div
-				style={{
-					display: "grid",
-					gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr",
-					gap: "20px",
-				}}
-			>
-				{certifiedRecipes.map((recipe) => (
-					<Link
-						to={`/recipe/${recipe.id}`}
-						key={recipe.id}
-						style={{
-							border: "1px solid #ccc",
-							padding: "10px",
-							borderRadius: "8px",
-							textDecoration: "none",
-						}}
-					>
-						<h3>{recipe.name}</h3>
-						<p>{recipe.cuisine}</p>
-						<p>
-							{recipe.Time} min
-							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Pers: {recipe.servings}
-						</p>
-						<img
-							src={recipe.image}
-							alt={`Difficulté: ${recipe.difficulty}`}
-							style={{ maxWidth: "100%" }}
-						/>
-					</Link>
-				))}
+		<div className="certif-container">
+			<div className="certif-header">
+				<span className="certif-badge">⭐ Recettes Certifiées</span>
+				<h2>Nos meilleures recettes</h2>
+				<p>
+					Découvrez notre sélection de recettes les mieux notées (4.8+ étoiles)
+				</p>
 			</div>
+
+			{certifiedRecipes.length === 0 ? (
+				<p className="certif-empty">Aucune recette certifiée pour le moment.</p>
+			) : (
+				<div className="certif-grid">
+					{certifiedRecipes.map((recipe) => (
+						<Link
+							to={`/recipe/${recipe.id}`}
+							key={recipe.id}
+							className="certif-card"
+						>
+							<div className="certif-card-image">
+								<img
+									src={getImageUrl(recipe.image)}
+									alt={recipe.name}
+									onError={(e) => {
+										e.currentTarget.src = PLACEHOLDER_IMAGE;
+									}}
+								/>
+								<span className="certif-card-difficulty">
+									{recipe.difficulty}
+								</span>
+								<span className="certif-card-rating">⭐ {recipe.rating}</span>
+							</div>
+							<div className="certif-card-content">
+								<h3 className="certif-card-title">{recipe.name}</h3>
+								<p className="certif-card-meta">{recipe.cuisine}</p>
+								<div className="certif-card-footer">
+									<span className="certif-card-time">⏱️ {recipe.Time} min</span>
+									<span className="certif-card-servings">
+										👥 {recipe.servings} pers
+									</span>
+								</div>
+							</div>
+						</Link>
+					))}
+				</div>
+			)}
 		</div>
 	);
 };
diff --git a/src/pages/CreateRecipe/CreateRecipe.css b/src/pages/CreateRecipe/CreateRecipe.css
index 445bc64..8e2cb11 100644
--- a/src/pages/CreateRecipe/CreateRecipe.css
+++ b/src/pages/CreateRecipe/CreateRecipe.css
@@ -1,43 +1,69 @@
 .create-recipe-form {
-	padding: 20px;
-	max-width: 600px;
-	margin: 0 auto;
+	padding: 2rem;
+	max-width: 700px;
+	margin: 2rem auto;
 	display: flex;
 	flex-direction: column;
-	gap: 10px;
+	gap: 1rem;
+	background: linear-gradient(180deg, #EEE2DF 0%, #EED7C5 100%);
+	border-radius: 16px;
+	box-shadow: 0 8px 30px rgba(179, 106, 94, 0.15);
+	min-height: calc(100vh - 200px);
 }
 
 .create-recipe-title {
-	margin: 0 0 10px;
+	margin: 0 0 1rem;
+	color: #B36A5E;
+	font-size: 1.75rem;
+	font-weight: 700;
 }
 
 .create-recipe-section {
-	border: 1px solid #ccc;
-	padding: 15px;
-	border-radius: 8px;
-	margin-bottom: 15px;
+	border: 1px solid #EED7C5;
+	padding: 1.25rem;
+	border-radius: 12px;
+	margin-bottom: 1rem;
+	background: #fff;
+	box-shadow: 0 2px 8px rgba(179, 106, 94, 0.08);
 }
 
 .create-recipe-section-title {
-	margin: 0 0 10px;
+	margin: 0 0 1rem;
+	color: #B36A5E;
+	font-size: 1.1rem;
+	font-weight: 600;
 }
 
 .create-recipe-label {
 	display: block;
 	margin-bottom: 8px;
+	color: #5d4037;
+	font-weight: 500;
 }
 
 .create-recipe-input {
-	padding: 8px;
+	padding: 12px;
 	margin: 5px 0;
 	width: 100%;
 	box-sizing: border-box;
+	border: 2px solid #EED7C5;
+	border-radius: 10px;
+	font-size: 1rem;
+	color: #5d4037;
+	background: #fff;
+	transition: all 0.2s;
+}
+
+.create-recipe-input:focus {
+	outline: none;
+	border-color: #CA7C5C;
+	box-shadow: 0 0 0 3px rgba(202, 124, 92, 0.15);
 }
 
 .create-recipe-row {
 	display: flex;
-	gap: 5px;
-	margin-bottom: 5px;
+	gap: 8px;
+	margin-bottom: 8px;
 	align-items: flex-start;
 }
 
@@ -52,38 +78,73 @@
 
 .create-recipe-textarea {
 	width: 100%;
-	min-height: 60px;
-	padding: 8px;
+	min-height: 80px;
+	padding: 12px;
 	box-sizing: border-box;
+	border: 2px solid #EED7C5;
+	border-radius: 10px;
+	font-size: 1rem;
+	color: #5d4037;
+	background: #fff;
+	resize: vertical;
+	transition: all 0.2s;
+}
+
+.create-recipe-textarea:focus {
+	outline: none;
+	border-color: #CA7C5C;
+	box-shadow: 0 0 0 3px rgba(202, 124, 92, 0.15);
 }
 
 .create-recipe-step-index {
 	font-weight: bold;
-	line-height: 2;
+	line-height: 2.5;
+	color: #CA7C5C;
+	min-width: 30px;
 }
 
 .create-recipe-button {
-	padding: 8px 12px;
+	padding: 10px 16px;
 	border: none;
 	cursor: pointer;
-	border-radius: 4px;
+	border-radius: 8px;
+	font-weight: 600;
+	transition: all 0.2s;
 }
 
 .create-recipe-button-primary {
-	padding: 15px;
+	padding: 16px;
 	font-size: 1.1rem;
-	background: #4caf50;
+	background: linear-gradient(135deg, #CA7C5C 0%, #B36A5E 100%);
 	color: white;
+	border-radius: 12px;
+}
+
+.create-recipe-button-primary:hover {
+	transform: translateY(-2px);
+	box-shadow: 0 4px 15px rgba(202, 124, 92, 0.4);
 }
 
 .create-recipe-button-secondary {
 	margin-top: 10px;
-	background: #e0e0e0;
+	background: #EEE2DF;
+	color: #B36A5E;
+	border: 1px solid #EED7C5;
+}
+
+.create-recipe-button-secondary:hover {
+	background: #EED7C5;
 }
 
 .create-recipe-button-danger {
-	background: red;
-	color: white;
+	background: #fff;
+	color: #B36A5E;
+	border: 1px solid #C89F9C;
+}
+
+.create-recipe-button-danger:hover {
+	background: #B36A5E;
+	color: #fff;
 }
 
 .create-recipe-button-fit {
@@ -91,14 +152,20 @@
 }
 
 .create-recipe-message {
-	margin-top: 20px;
-	padding: 10px;
+	margin-top: 1rem;
+	padding: 1rem;
+	border-radius: 10px;
+	font-weight: 500;
 }
 
 .create-recipe-message-success {
-	background: #dff0d8;
+	background: #d4edda;
+	color: #155724;
+	border: 1px solid #c3e6cb;
 }
 
 .create-recipe-message-error {
-	background: #f2dede;
+	background: #f8d7da;
+	color: #721c24;
+	border: 1px solid #f5c6cb;
 }
diff --git a/src/pages/Login/Login.css b/src/pages/Login/Login.css
index add27c9..23ccaf6 100644
--- a/src/pages/Login/Login.css
+++ b/src/pages/Login/Login.css
@@ -2,28 +2,31 @@
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	min-height: calc(100vh - 80px);
+	min-height: 100vh;
 	padding: 2rem;
+	background: linear-gradient(180deg, #EEE2DF 0%, #EED7C5 100%);
 }
 
 .login-card {
-	background-color: #ece0d1;
-	border-radius: 16px;
+	background-color: #fff;
+	border-radius: 20px;
 	padding: 2.5rem;
 	width: 100%;
-	max-width: 400px;
-	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+	max-width: 420px;
+	box-shadow: 0 8px 30px rgba(179, 106, 94, 0.15);
+	border: 1px solid #EED7C5;
 }
 
 .login-card h1 {
-	color: #5d4037;
+	color: #B36A5E;
 	font-size: 1.75rem;
 	margin: 0 0 0.5rem 0;
 	text-align: center;
+	font-weight: 700;
 }
 
 .login-subtitle {
-	color: #7d5a50;
+	color: #C89F9C;
 	text-align: center;
 	margin: 0 0 2rem 0;
 	font-size: 0.9rem;
@@ -42,31 +45,29 @@
 }
 
 .form-group label {
-	color: #5d4037;
+	color: #B36A5E;
 	font-weight: 600;
 	font-size: 0.9rem;
 }
 
 .form-group input {
-	padding: 0.75rem 1rem;
-	border: 2px solid #d4c4b5;
-	border-radius: 8px;
+	padding: 0.875rem 1rem;
+	border: 2px solid #EED7C5;
+	border-radius: 12px;
 	font-size: 1rem;
 	background-color: #fff;
-	color: #333;
-	transition:
-		border-color 0.2s ease,
-		box-shadow 0.2s ease;
+	color: #5d4037;
+	transition: all 0.2s ease;
 }
 
 .form-group input::placeholder {
-	color: #a89a8c;
+	color: #C89F9C;
 }
 
 .form-group input:focus {
 	outline: none;
-	border-color: #c67a53;
-	box-shadow: 0 0 0 3px rgba(198, 122, 83, 0.15);
+	border-color: #CA7C5C;
+	box-shadow: 0 0 0 3px rgba(202, 124, 92, 0.15);
 }
 
 .error-message {
@@ -79,28 +80,27 @@
 	background-color: #ffebee;
 	color: #c62828;
 	padding: 0.75rem 1rem;
-	border-radius: 8px;
+	border-radius: 10px;
 	font-size: 0.9rem;
 	text-align: center;
 }
 
 .login-button {
-	background-color: #c67a53;
+	background: linear-gradient(135deg, #CA7C5C 0%, #B36A5E 100%);
 	color: white;
 	border: none;
 	padding: 0.875rem 1.5rem;
 	font-size: 1rem;
 	font-weight: 600;
-	border-radius: 8px;
+	border-radius: 12px;
 	cursor: pointer;
-	transition:
-		background-color 0.2s ease,
-		transform 0.1s ease;
+	transition: all 0.2s ease;
 	margin-top: 0.5rem;
 }
 
 .login-button:hover:not(:disabled) {
-	background-color: #b36a45;
+	transform: translateY(-2px);
+	box-shadow: 0 4px 15px rgba(202, 124, 92, 0.4);
 }
 
 .login-button:active:not(:disabled) {
@@ -108,25 +108,26 @@
 }
 
 .login-button:disabled {
-	background-color: #d4c4b5;
+	background: #EED7C5;
 	cursor: not-allowed;
 }
 
 .signup-link {
 	text-align: center;
 	margin-top: 1.5rem;
-	color: #7d5a50;
+	color: #C89F9C;
 	font-size: 0.9rem;
 }
 
 .signup-link a {
-	color: #c67a53;
+	color: #CA7C5C;
 	font-weight: 600;
 	text-decoration: none;
 }
 
 .signup-link a:hover {
 	text-decoration: underline;
+	color: #B36A5E;
 }
 
 @media (max-width: 480px) {
diff --git a/src/pages/Planning/page.tsx b/src/pages/Planning/page.tsx
index dfcd172..c839c38 100644
--- a/src/pages/Planning/page.tsx
+++ b/src/pages/Planning/page.tsx
@@ -2,6 +2,15 @@ import { useCallback, useEffect, useState } from "react";
 import recipesData from "../../data/recipes.json";
 import "./Planning.css";
 
+const PLACEHOLDER_IMAGE = "https://placehold.co/100x100/F5EBE6/CA7C5C?text=🍽️";
+
+const getImageUrl = (image: string | null | undefined): string | undefined => {
+	if (!image || image === "url..." || image === "") {
+		return undefined;
+	}
+	return image;
+};
+
 // Types
 interface Ingredient {
 	name: string;
@@ -565,14 +574,11 @@ const Planning = () => {
 											<div
 												className="planning-recipe-thumb"
 												style={{
-													backgroundImage:
-														recipe.image !== "url..."
-															? `url(${recipe.image})`
-															: undefined,
+													backgroundImage: getImageUrl(recipe.image)
+														? `url(${recipe.image})`
+														: `url(${PLACEHOLDER_IMAGE})`,
 												}}
-											>
-												{recipe.image === "url..." && "🍽️"}
-											</div>
+											/>
 											<div className="planning-recipe-info">
 												<h5>{recipe.name}</h5>
 												<span>
diff --git a/src/pages/Settings/Settings.css b/src/pages/Settings/Settings.css
index f93fd47..f9cc4e1 100644
--- a/src/pages/Settings/Settings.css
+++ b/src/pages/Settings/Settings.css
@@ -4,44 +4,48 @@
 	align-items: center;
 	min-height: calc(100vh - 80px);
 	padding: 2rem;
+	background: linear-gradient(180deg, #EEE2DF 0%, #EED7C5 100%);
 }
 
 .settings-card {
-	background-color: #ece0d1;
-	border-radius: 16px;
+	background-color: #fff;
+	border-radius: 20px;
 	padding: 2.5rem;
 	width: 100%;
-	max-width: 420px;
-	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+	max-width: 450px;
+	box-shadow: 0 8px 30px rgba(179, 106, 94, 0.15);
 	text-align: center;
+	border: 1px solid #EED7C5;
 }
 
 .user-icon {
 	width: 80px;
 	height: 80px;
 	margin-bottom: 1rem;
+	filter: none;
 }
 
 .settings-card h1 {
-	color: #5d4037;
+	color: #B36A5E;
 	font-size: 1.75rem;
 	margin: 0 0 0.5rem 0;
+	font-weight: 700;
 }
 
 .settings-subtitle {
-	color: #7d5a50;
+	color: #C89F9C;
 	margin: 0 0 2rem 0;
 	font-size: 0.9rem;
 }
 
 .loading {
-	color: #7d5a50;
+	color: #C89F9C;
 	font-size: 1rem;
 }
 
 .user-info {
-	background-color: #fff;
-	border-radius: 12px;
+	background-color: #EEE2DF;
+	border-radius: 14px;
 	padding: 1.5rem;
 	margin: 1.5rem 0;
 	text-align: left;
@@ -52,7 +56,7 @@
 	justify-content: space-between;
 	align-items: center;
 	padding: 0.75rem 0;
-	border-bottom: 1px solid #ece0d1;
+	border-bottom: 1px solid #EED7C5;
 }
 
 .info-row:last-child {
@@ -60,34 +64,33 @@
 }
 
 .info-label {
-	color: #7d5a50;
+	color: #C89F9C;
 	font-size: 0.9rem;
 	font-weight: 500;
 }
 
 .info-value {
-	color: #5d4037;
+	color: #B36A5E;
 	font-size: 0.9rem;
 	font-weight: 600;
 }
 
 .primary-button {
-	background-color: #c67a53;
+	background: linear-gradient(135deg, #CA7C5C 0%, #B36A5E 100%);
 	color: white;
 	border: none;
 	padding: 0.875rem 2rem;
 	font-size: 1rem;
 	font-weight: 600;
-	border-radius: 8px;
+	border-radius: 12px;
 	cursor: pointer;
-	transition:
-		background-color 0.2s ease,
-		transform 0.1s ease;
+	transition: all 0.2s ease;
 	width: 100%;
 }
 
 .primary-button:hover {
-	background-color: #b36a45;
+	transform: translateY(-2px);
+	box-shadow: 0 4px 15px rgba(202, 124, 92, 0.4);
 }
 
 .primary-button:active {
@@ -96,23 +99,22 @@
 
 .signout-button {
 	background-color: transparent;
-	color: #c67a53;
-	border: 2px solid #c67a53;
+	color: #B36A5E;
+	border: 2px solid #CA7C5C;
 	padding: 0.875rem 2rem;
 	font-size: 1rem;
 	font-weight: 600;
-	border-radius: 8px;
+	border-radius: 12px;
 	cursor: pointer;
-	transition:
-		background-color 0.2s ease,
-		color 0.2s ease,
-		transform 0.1s ease;
+	transition: all 0.2s ease;
 	width: 100%;
+	margin-top: 0.75rem;
 }
 
 .signout-button:hover {
-	background-color: #c67a53;
+	background: linear-gradient(135deg, #CA7C5C 0%, #B36A5E 100%);
 	color: white;
+	border-color: transparent;
 }
 
 .signout-button:active {
diff --git a/src/pages/ShoppingList/ShoppingList.css b/src/pages/ShoppingList/ShoppingList.css
index ece294e..e80ce8f 100644
--- a/src/pages/ShoppingList/ShoppingList.css
+++ b/src/pages/ShoppingList/ShoppingList.css
@@ -1,19 +1,20 @@
 /* Container for the entire shopping list section */
 .shopping-list-container {
-	max-width: 600px;
+	max-width: 700px;
 	margin: 2rem auto;
 	padding: 2rem;
-	background-color: #1a1a1a;
-	color: #eedcca;
-	border-radius: 8px;
-	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+	background: linear-gradient(180deg, #EEE2DF 0%, #EED7C5 100%);
+	color: #5d4037;
+	border-radius: 16px;
+	box-shadow: 0 8px 30px rgba(179, 106, 94, 0.15);
 	font-family: sans-serif;
+	min-height: calc(100vh - 200px);
 }
 
 /* Main title */
 .shopping-list-title {
 	text-align: center;
-	color: #c67a53;
+	color: #B36A5E;
 	margin-bottom: 1.5rem;
 	font-size: 2rem;
 	font-weight: 700;
@@ -28,33 +29,39 @@
 
 .item-input {
 	flex-grow: 1;
-	padding: 10px 15px;
-	background-color: #2d2d2d;
-	color: #eedcca;
-	border: 1px solid #444;
-	border-radius: 4px;
+	padding: 12px 16px;
+	background-color: #fff;
+	color: #5d4037;
+	border: 2px solid #EED7C5;
+	border-radius: 12px;
 	font-size: 1rem;
-	transition: border-color 0.3s;
+	transition: all 0.3s;
 }
 
 .item-input:focus {
 	outline: none;
-	border-color: #c67a53;
+	border-color: #CA7C5C;
+	box-shadow: 0 0 0 3px rgba(202, 124, 92, 0.15);
+}
+
+.item-input::placeholder {
+	color: #C89F9C;
 }
 
 .add-button {
-	padding: 10px 20px;
-	background-color: #c67a53;
+	padding: 12px 24px;
+	background: linear-gradient(135deg, #CA7C5C 0%, #B36A5E 100%);
 	color: white;
 	border: none;
-	border-radius: 4px;
+	border-radius: 12px;
 	cursor: pointer;
-	font-weight: bold;
-	transition: background-color 0.3s;
+	font-weight: 600;
+	transition: all 0.3s;
 }
 
 .add-button:hover {
-	background-color: #a76556;
+	transform: translateY(-2px);
+	box-shadow: 0 4px 15px rgba(202, 124, 92, 0.4);
 }
 
 /* List Items */
@@ -68,24 +75,24 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	background-color: #2d2d2d;
-	border: 1px solid #3d3d3d;
-	color: #eedcca;
-	padding: 12px 15px;
+	background-color: #fff;
+	border: 1px solid #EED7C5;
+	color: #5d4037;
+	padding: 12px 16px;
 	margin-bottom: 8px;
-	border-radius: 4px;
-	transition:
-		transform 0.2s,
-		box-shadow 0.2s;
+	border-radius: 12px;
+	transition: all 0.2s;
+	box-shadow: 0 2px 8px rgba(179, 106, 94, 0.08);
 }
 
 .shopping-item:hover {
-	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+	transform: translateX(3px);
+	box-shadow: 0 4px 12px rgba(179, 106, 94, 0.15);
 }
 
 .shopping-item.completed span {
 	text-decoration: line-through;
-	color: #777;
+	color: #C89F9C;
 }
 
 /* Actions within a list item */
@@ -95,43 +102,50 @@
 }
 
 .delete-button {
-	background-color: #3e2020;
-	color: #ff8a80;
-	border: 1px solid #5c2b2b;
+	background-color: #fff;
+	color: #B36A5E;
+	border: 1px solid #C89F9C;
 	padding: 6px 12px;
-	border-radius: 4px;
+	border-radius: 8px;
 	cursor: pointer;
 	font-size: 0.9rem;
-	transition: background-color 0.3s;
+	transition: all 0.3s;
 }
 
 .delete-button:hover {
-	background-color: #5c2b2b;
+	background-color: #B36A5E;
+	color: #fff;
+	border-color: #B36A5E;
 }
 
 .checkbox {
 	margin-right: 12px;
 	cursor: pointer;
-	width: 18px;
-	height: 18px;
-	accent-color: #c67a53;
+	width: 20px;
+	height: 20px;
+	accent-color: #CA7C5C;
 }
 
 /* Empty state message */
 .empty-message {
 	text-align: center;
-	color: #a76556;
+	color: #C89F9C;
 	font-style: italic;
 	margin-top: 2rem;
+	padding: 2rem;
+	background: #fff;
+	border-radius: 12px;
+	border: 2px dashed #EED7C5;
 }
 
 /* Recipe Group Styles */
 .recipe-group {
 	margin-bottom: 2rem;
-	background-color: #252525;
-	border-radius: 8px;
-	padding: 1rem;
-	border: 1px solid #3d3d3d;
+	background-color: #fff;
+	border-radius: 16px;
+	padding: 1.25rem;
+	border: 1px solid #EED7C5;
+	box-shadow: 0 4px 12px rgba(179, 106, 94, 0.08);
 }
 
 .recipe-group-header {
@@ -141,74 +155,78 @@
 	gap: 1rem;
 	margin-bottom: 1rem;
 	padding-bottom: 0.75rem;
-	border-bottom: 2px solid #c67a53;
+	border-bottom: 2px solid #CA7C5C;
 	flex-wrap: wrap;
 }
 
 .recipe-group-title {
 	font-size: 1.25rem;
-	color: #c67a53;
+	color: #B36A5E;
 	margin: 0;
 	flex: 1;
+	font-weight: 600;
 }
 
 .servings-control {
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
-	background-color: #1a1a1a;
+	background-color: #EEE2DF;
 	padding: 0.25rem 0.5rem;
-	border-radius: 4px;
+	border-radius: 8px;
 }
 
 .servings-btn {
-	width: 30px;
-	height: 30px;
-	background-color: #c67a53;
+	width: 32px;
+	height: 32px;
+	background: linear-gradient(135deg, #CA7C5C 0%, #B36A5E 100%);
 	color: white;
 	border: none;
-	border-radius: 4px;
+	border-radius: 8px;
 	cursor: pointer;
 	font-size: 1.2rem;
 	font-weight: bold;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	transition: background-color 0.2s;
+	transition: all 0.2s;
 }
 
 .servings-btn:hover {
-	background-color: #a76556;
+	transform: scale(1.05);
+	box-shadow: 0 2px 8px rgba(202, 124, 92, 0.4);
 }
 
 .servings-display {
 	min-width: 60px;
 	text-align: center;
 	font-weight: bold;
-	color: #eedcca;
+	color: #B36A5E;
 }
 
 .delete-group-btn {
-	background-color: #3e2020;
-	color: #ff8a80;
-	border: 1px solid #5c2b2b;
+	background-color: #fff;
+	color: #B36A5E;
+	border: 1px solid #C89F9C;
 	padding: 8px 16px;
-	border-radius: 4px;
+	border-radius: 8px;
 	cursor: pointer;
 	font-size: 0.9rem;
-	transition: background-color 0.3s;
+	transition: all 0.3s;
 }
 
 .delete-group-btn:hover {
-	background-color: #5c2b2b;
+	background-color: #B36A5E;
+	color: #fff;
+	border-color: #B36A5E;
 }
 
 .manual-items {
-	border-color: #555;
+	border-color: #C89F9C;
 }
 
 .manual-items .recipe-group-title {
-	color: #888;
+	color: #C89F9C;
 }
 
 /* Responsive adjustments */
diff --git a/src/pages/Signup/Signup.css b/src/pages/Signup/Signup.css
index 046879a..3aa6725 100644
--- a/src/pages/Signup/Signup.css
+++ b/src/pages/Signup/Signup.css
@@ -2,28 +2,31 @@
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	min-height: calc(100vh - 80px);
+	min-height: 100vh;
 	padding: 2rem;
+	background: linear-gradient(180deg, #EEE2DF 0%, #EED7C5 100%);
 }
 
 .signup-card {
-	background-color: #ece0d1;
-	border-radius: 16px;
+	background-color: #fff;
+	border-radius: 20px;
 	padding: 2.5rem;
 	width: 100%;
-	max-width: 400px;
-	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+	max-width: 420px;
+	box-shadow: 0 8px 30px rgba(179, 106, 94, 0.15);
+	border: 1px solid #EED7C5;
 }
 
 .signup-card h1 {
-	color: #5d4037;
+	color: #B36A5E;
 	font-size: 1.75rem;
 	margin: 0 0 0.5rem 0;
 	text-align: center;
+	font-weight: 700;
 }
 
 .signup-subtitle {
-	color: #7d5a50;
+	color: #C89F9C;
 	text-align: center;
 	margin: 0 0 2rem 0;
 	font-size: 0.9rem;
@@ -42,31 +45,29 @@
 }
 
 .signup-form .form-group label {
-	color: #5d4037;
+	color: #B36A5E;
 	font-weight: 600;
 	font-size: 0.9rem;
 }
 
 .signup-form .form-group input {
-	padding: 0.75rem 1rem;
-	border: 2px solid #d4c4b5;
-	border-radius: 8px;
+	padding: 0.875rem 1rem;
+	border: 2px solid #EED7C5;
+	border-radius: 12px;
 	font-size: 1rem;
 	background-color: #fff;
-	color: #333;
-	transition:
-		border-color 0.2s ease,
-		box-shadow 0.2s ease;
+	color: #5d4037;
+	transition: all 0.2s ease;
 }
 
 .signup-form .form-group input::placeholder {
-	color: #a89a8c;
+	color: #C89F9C;
 }
 
 .signup-form .form-group input:focus {
 	outline: none;
-	border-color: #c67a53;
-	box-shadow: 0 0 0 3px rgba(198, 122, 83, 0.15);
+	border-color: #CA7C5C;
+	box-shadow: 0 0 0 3px rgba(202, 124, 92, 0.15);
 }
 
 .signup-form .error-message {
@@ -79,28 +80,27 @@
 	background-color: #ffebee;
 	color: #c62828;
 	padding: 0.75rem 1rem;
-	border-radius: 8px;
+	border-radius: 10px;
 	font-size: 0.9rem;
 	text-align: center;
 }
 
 .signup-button {
-	background-color: #c67a53;
+	background: linear-gradient(135deg, #CA7C5C 0%, #B36A5E 100%);
 	color: white;
 	border: none;
 	padding: 0.875rem 1.5rem;
 	font-size: 1rem;
 	font-weight: 600;
-	border-radius: 8px;
+	border-radius: 12px;
 	cursor: pointer;
-	transition:
-		background-color 0.2s ease,
-		transform 0.1s ease;
+	transition: all 0.2s ease;
 	margin-top: 0.5rem;
 }
 
 .signup-button:hover:not(:disabled) {
-	background-color: #b36a45;
+	transform: translateY(-2px);
+	box-shadow: 0 4px 15px rgba(202, 124, 92, 0.4);
 }
 
 .signup-button:active:not(:disabled) {
@@ -108,25 +108,26 @@
 }
 
 .signup-button:disabled {
-	background-color: #d4c4b5;
+	background: #EED7C5;
 	cursor: not-allowed;
 }
 
 .login-link {
 	text-align: center;
 	margin-top: 1.5rem;
-	color: #7d5a50;
+	color: #C89F9C;
 	font-size: 0.9rem;
 }
 
 .login-link a {
-	color: #c67a53;
+	color: #CA7C5C;
 	font-weight: 600;
 	text-decoration: none;
 }
 
 .login-link a:hover {
 	text-decoration: underline;
+	color: #B36A5E;
 }
 
 @media (max-width: 480px) {
diff --git a/src/styles/.gitkeep b/src/styles/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/types/.gitkeep b/src/types/.gitkeep
deleted file mode 100644
index e69de29..0000000

From feac2d7b5099cead119c600b49e29d97ad9b2fca Mon Sep 17 00:00:00 2001
From: Degalax <naili26.lmr@gmail.com>
Date: Thu, 5 Feb 2026 15:41:35 +0100
Subject: [PATCH 2/2] feat: standardize color codes to lowercase for
 consistency across stylesheets

---
 src/components/Header.css               | 16 ++++----
 src/index.css                           | 46 ++++++++++-----------
 src/pages/Catalogue/Catalogue.css       | 40 +++++++++---------
 src/pages/Catalogue/recipedetail.css    | 40 +++++++++---------
 src/pages/CertifRecipe/CertifRecipe.css | 32 +++++++--------
 src/pages/CreateRecipe/CreateRecipe.css | 34 ++++++++--------
 src/pages/Login/Login.css               | 26 ++++++------
 src/pages/Settings/Settings.css         | 26 ++++++------
 src/pages/ShoppingList/ShoppingList.css | 54 ++++++++++++-------------
 src/pages/Signup/Signup.css             | 26 ++++++------
 10 files changed, 170 insertions(+), 170 deletions(-)

diff --git a/src/components/Header.css b/src/components/Header.css
index 58c880c..c8bcccf 100644
--- a/src/components/Header.css
+++ b/src/components/Header.css
@@ -3,7 +3,7 @@
 	justify-content: space-between;
 	align-items: center;
 	padding: 0.75rem 4rem;
-	background: linear-gradient(135deg, #EEE2DF 0%, #EED7C5 100%);
+	background: linear-gradient(135deg, #eee2df 0%, #eed7c5 100%);
 	box-shadow: 0 4px 20px rgba(179, 106, 94, 0.15);
 	position: sticky;
 	top: 0;
@@ -33,7 +33,7 @@
 .logo h1 {
 	margin: 0;
 	font-size: 1.5rem;
-	color: #B36A5E;
+	color: #b36a5e;
 	margin-left: 10px;
 	font-weight: 700;
 }
@@ -50,7 +50,7 @@
 
 .navigation a {
 	text-decoration: none;
-	color: #B36A5E;
+	color: #b36a5e;
 	font-weight: 600;
 	font-size: 0.95rem;
 	letter-spacing: 0.3px;
@@ -61,7 +61,7 @@
 }
 
 .navigation a:hover {
-	color: #CA7C5C;
+	color: #ca7c5c;
 	background: rgba(202, 124, 92, 0.1);
 }
 
@@ -73,7 +73,7 @@
 	bottom: 0;
 	left: 50%;
 	transform: translateX(-50%);
-	background: linear-gradient(90deg, #CA7C5C, #B36A5E);
+	background: linear-gradient(90deg, #ca7c5c, #b36a5e);
 	transition: width 0.3s ease;
 	border-radius: 2px;
 }
@@ -90,7 +90,7 @@
 
 /* Active link style */
 .navigation a.active {
-	color: #CA7C5C;
+	color: #ca7c5c;
 	background: rgba(202, 124, 92, 0.15);
 }
 
@@ -104,7 +104,7 @@
 	align-items: center;
 	justify-content: center;
 	padding: 0.5rem;
-	background: linear-gradient(135deg, #CA7C5C 0%, #B36A5E 100%);
+	background: linear-gradient(135deg, #ca7c5c 0%, #b36a5e 100%);
 	border-radius: 50%;
 	width: 38px;
 	height: 38px;
@@ -115,7 +115,7 @@
 }
 
 .navigation a.user-link:hover {
-	background: linear-gradient(135deg, #B36A5E 0%, #9A5A50 100%);
+	background: linear-gradient(135deg, #b36a5e 0%, #9a5a50 100%);
 	transform: scale(1.05);
 }
 
diff --git a/src/index.css b/src/index.css
index ea98030..9470ff8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,18 +4,18 @@
 	font-weight: 400;
 
 	/* Color palette - improved contrast */
-	--color-bg-light: #FAF7F5;
-	--color-bg-peach: #F5EBE6;
-	--color-rose: #C89F9C;
-	--color-terra: #CA7C5C;
-	--color-terra-dark: #A65A42;
-	--color-text: #3D2E2A;
-	--color-text-light: #6B5750;
-	--color-text-muted: #8B7B74;
+	--color-bg-light: #faf7f5;
+	--color-bg-peach: #f5ebe6;
+	--color-rose: #c89f9c;
+	--color-terra: #ca7c5c;
+	--color-terra-dark: #a65a42;
+	--color-text: #3d2e2a;
+	--color-text-light: #6b5750;
+	--color-text-muted: #8b7b74;
 
 	color-scheme: light;
-	color: #3D2E2A;
-	background-color: #FAF7F5;
+	color: #3d2e2a;
+	background-color: #faf7f5;
 
 	font-synthesis: none;
 	text-rendering: optimizeLegibility;
@@ -25,12 +25,12 @@
 
 a {
 	font-weight: 500;
-	color: #A65A42;
+	color: #a65a42;
 	text-decoration: inherit;
 }
 
 a:hover {
-	color: #8B4534;
+	color: #8b4534;
 }
 
 body {
@@ -38,25 +38,25 @@ body {
 	display: block;
 	min-width: 320px;
 	min-height: 100vh;
-	background: #FAF7F5;
+	background: #faf7f5;
 }
 
 h1 {
 	font-size: 2.5em;
 	line-height: 1.1;
-	color: #3D2E2A;
+	color: #3d2e2a;
 }
 
 h2 {
-	color: #3D2E2A;
+	color: #3d2e2a;
 }
 
 h3 {
-	color: #3D2E2A;
+	color: #3d2e2a;
 }
 
 p {
-	color: #3D2E2A;
+	color: #3d2e2a;
 }
 
 button {
@@ -67,14 +67,14 @@ button {
 	font-weight: 500;
 	font-family: inherit;
 	background-color: #fff;
-	color: #3D2E2A;
+	color: #3d2e2a;
 	cursor: pointer;
 	transition: all 0.25s;
 }
 
 button:hover {
-	border-color: #CA7C5C;
-	background-color: #F5EBE6;
+	border-color: #ca7c5c;
+	background-color: #f5ebe6;
 }
 
 button:focus,
@@ -90,17 +90,17 @@ button:focus-visible {
 }
 
 ::-webkit-scrollbar-track {
-	background: #F5EBE6;
+	background: #f5ebe6;
 	border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb {
-	background: #C89F9C;
+	background: #c89f9c;
 	border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-	background: #CA7C5C;
+	background: #ca7c5c;
 }
 
 /* Selection styling */
diff --git a/src/pages/Catalogue/Catalogue.css b/src/pages/Catalogue/Catalogue.css
index 8bde292..a64d79a 100644
--- a/src/pages/Catalogue/Catalogue.css
+++ b/src/pages/Catalogue/Catalogue.css
@@ -5,13 +5,13 @@
 }
 
 .catalogue-container h2 {
-	color: #3D2E2A;
+	color: #3d2e2a;
 	font-size: 2rem;
 	margin-bottom: 0.5rem;
 }
 
 .catalogue-container p {
-	color: #6B5750;
+	color: #6b5750;
 	margin-bottom: 1.5rem;
 }
 
@@ -35,7 +35,7 @@
 }
 
 .catalogue-filter-group label {
-	color: #3D2E2A;
+	color: #3d2e2a;
 	font-weight: 600;
 	font-size: 0.9rem;
 }
@@ -43,9 +43,9 @@
 .catalogue-filter-group select {
 	padding: 0.6rem 1rem;
 	border-radius: 8px;
-	border: 2px solid #F5EBE6;
+	border: 2px solid #f5ebe6;
 	background: #fff;
-	color: #3D2E2A;
+	color: #3d2e2a;
 	font-size: 0.95rem;
 	min-width: 160px;
 	cursor: pointer;
@@ -54,7 +54,7 @@
 
 .catalogue-filter-group select:focus {
 	outline: none;
-	border-color: #CA7C5C;
+	border-color: #ca7c5c;
 	box-shadow: 0 0 0 3px rgba(202, 124, 92, 0.15);
 }
 
@@ -62,7 +62,7 @@
 	padding: 0.6rem 1.25rem;
 	border-radius: 8px;
 	border: none;
-	background: linear-gradient(135deg, #CA7C5C 0%, #A65A42 100%);
+	background: linear-gradient(135deg, #ca7c5c 0%, #a65a42 100%);
 	color: white;
 	cursor: pointer;
 	font-weight: 600;
@@ -76,11 +76,11 @@
 
 /* Section titles */
 .catalogue-section-title {
-	color: #3D2E2A;
+	color: #3d2e2a;
 	font-size: 1.5rem;
 	margin: 2rem 0 1rem;
 	padding-bottom: 0.5rem;
-	border-bottom: 2px solid #CA7C5C;
+	border-bottom: 2px solid #ca7c5c;
 	display: inline-block;
 }
 
@@ -100,7 +100,7 @@
 	text-decoration: none;
 	box-shadow: 0 4px 12px rgba(61, 46, 42, 0.08);
 	transition: all 0.3s ease;
-	border: 1px solid #F5EBE6;
+	border: 1px solid #f5ebe6;
 	display: flex;
 	flex-direction: column;
 }
@@ -111,14 +111,14 @@
 }
 
 .catalogue-card-custom {
-	border: 2px solid #CA7C5C;
+	border: 2px solid #ca7c5c;
 }
 
 .catalogue-card-image {
 	width: 100%;
 	height: 180px;
 	overflow: hidden;
-	background: #F5EBE6;
+	background: #f5ebe6;
 	position: relative;
 	flex-shrink: 0;
 }
@@ -134,7 +134,7 @@
 	position: absolute;
 	bottom: 8px;
 	right: 8px;
-	background: linear-gradient(135deg, #CA7C5C 0%, #A65A42 100%);
+	background: linear-gradient(135deg, #ca7c5c 0%, #a65a42 100%);
 	color: #fff;
 	font-size: 0.75rem;
 	padding: 0.25rem 0.6rem;
@@ -150,14 +150,14 @@
 }
 
 .catalogue-card-title {
-	color: #3D2E2A;
+	color: #3d2e2a;
 	font-size: 1.15rem;
 	margin: 0 0 0.5rem 0;
 	font-weight: 600;
 }
 
 .catalogue-card-meta {
-	color: #6B5750;
+	color: #6b5750;
 	font-size: 0.9rem;
 	margin: 0 0 0.75rem 0;
 }
@@ -166,11 +166,11 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	color: #6B5750;
+	color: #6b5750;
 	font-size: 0.85rem;
 	margin-top: auto;
 	padding-top: 0.75rem;
-	border-top: 1px solid #F5EBE6;
+	border-top: 1px solid #f5ebe6;
 }
 
 .catalogue-card-time,
@@ -181,7 +181,7 @@
 }
 
 .catalogue-badge {
-	background: linear-gradient(135deg, #CA7C5C 0%, #A65A42 100%);
+	background: linear-gradient(135deg, #ca7c5c 0%, #a65a42 100%);
 	color: #fff;
 	font-size: 0.75rem;
 	padding: 0.25rem 0.6rem;
@@ -194,9 +194,9 @@
 .catalogue-empty {
 	text-align: center;
 	padding: 3rem;
-	color: #8B7B74;
+	color: #8b7b74;
 	font-style: italic;
 	background: #fff;
 	border-radius: 12px;
-	border: 2px dashed #F5EBE6;
+	border: 2px dashed #f5ebe6;
 }
diff --git a/src/pages/Catalogue/recipedetail.css b/src/pages/Catalogue/recipedetail.css
index 65e896c..af5e527 100644
--- a/src/pages/Catalogue/recipedetail.css
+++ b/src/pages/Catalogue/recipedetail.css
@@ -3,8 +3,8 @@
 	margin: 0 auto;
 	padding: 2rem 1rem;
 	font-family: sans-serif;
-	background: linear-gradient(180deg, #EEE2DF 0%, #EED7C5 100%);
-	color: #3D2E2A;
+	background: linear-gradient(180deg, #eee2df 0%, #eed7c5 100%);
+	color: #3d2e2a;
 	min-height: 100vh;
 }
 
@@ -13,7 +13,7 @@
 	align-items: center;
 	gap: 0.5rem;
 	margin-bottom: 1.5rem;
-	color: #B36A5E;
+	color: #b36a5e;
 	font-weight: 600;
 	text-decoration: none;
 	transition: all 0.2s;
@@ -24,7 +24,7 @@
 }
 
 .back-link:hover {
-	color: #CA7C5C;
+	color: #ca7c5c;
 	transform: translateX(-3px);
 }
 
@@ -32,7 +32,7 @@
 	font-size: 2rem;
 	font-weight: bold;
 	margin-bottom: 1rem;
-	color: #B36A5E;
+	color: #b36a5e;
 }
 
 .recipe-content {
@@ -59,7 +59,7 @@
 	font-size: 1.5rem;
 	font-weight: 600;
 	margin-bottom: 0.5rem;
-	color: #B36A5E;
+	color: #b36a5e;
 }
 
 .tags-wrapper {
@@ -78,17 +78,17 @@
 
 .tag-cuisine {
 	background-color: #fff;
-	color: #B36A5E;
-	border: 1px solid #EED7C5;
+	color: #b36a5e;
+	border: 1px solid #eed7c5;
 }
 
 .tag-difficulty {
-	background-color: #C89F9C;
+	background-color: #c89f9c;
 	color: #fff;
 }
 
 .tag-rating {
-	background-color: #CA7C5C;
+	background-color: #ca7c5c;
 	color: #fff;
 }
 
@@ -104,12 +104,12 @@
 	background-color: #fff;
 	padding: 0.75rem;
 	border-radius: 12px;
-	border: 1px solid #EED7C5;
+	border: 1px solid #eed7c5;
 	box-shadow: 0 2px 8px rgba(179, 106, 94, 0.08);
 }
 
 .stat-label {
-	color: #C89F9C;
+	color: #c89f9c;
 	font-size: 0.875rem;
 	margin: 0;
 	text-transform: uppercase;
@@ -117,7 +117,7 @@
 }
 
 .stat-value {
-	color: #B36A5E;
+	color: #b36a5e;
 	font-weight: 700;
 	font-size: 1.1rem;
 	margin: 0.25rem 0 0 0;
@@ -127,8 +127,8 @@
 	font-size: 1.25rem;
 	font-weight: 700;
 	margin-bottom: 0.75rem;
-	color: #3D2E2A;
-	border-bottom: 2px solid #CA7C5C;
+	color: #3d2e2a;
+	border-bottom: 2px solid #ca7c5c;
 	padding-bottom: 0.25rem;
 	display: inline-block;
 }
@@ -146,12 +146,12 @@
 	position: relative;
 	padding-left: 1.5rem;
 	margin-bottom: 0.5rem;
-	color: #3D2E2A;
+	color: #3d2e2a;
 }
 
 .ingredient-list .list-item::before {
 	content: "•";
-	color: #CA7C5C;
+	color: #ca7c5c;
 	font-size: 1.5rem;
 	position: absolute;
 	left: 0;
@@ -167,19 +167,19 @@
 }
 
 .instruction-list .list-item::marker {
-	color: #CA7C5C;
+	color: #ca7c5c;
 	font-weight: bold;
 }
 
 .list-item {
-	color: #3D2E2A;
+	color: #3d2e2a;
 	margin-bottom: 0.75rem;
 	line-height: 1.7;
 	font-weight: 500;
 }
 
 .empty-text {
-	color: #C89F9C;
+	color: #c89f9c;
 	font-style: italic;
 }
 
diff --git a/src/pages/CertifRecipe/CertifRecipe.css b/src/pages/CertifRecipe/CertifRecipe.css
index 1421d61..1157f29 100644
--- a/src/pages/CertifRecipe/CertifRecipe.css
+++ b/src/pages/CertifRecipe/CertifRecipe.css
@@ -9,21 +9,21 @@
 }
 
 .certif-header h2 {
-	color: #3D2E2A;
+	color: #3d2e2a;
 	font-size: 2rem;
 	margin-bottom: 0.5rem;
 }
 
 .certif-header p {
-	color: #6B5750;
+	color: #6b5750;
 }
 
 .certif-badge {
 	display: inline-flex;
 	align-items: center;
 	gap: 0.5rem;
-	background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
-	color: #3D2E2A;
+	background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
+	color: #3d2e2a;
 	padding: 0.5rem 1rem;
 	border-radius: 20px;
 	font-weight: 600;
@@ -46,7 +46,7 @@
 	text-decoration: none;
 	box-shadow: 0 4px 12px rgba(61, 46, 42, 0.08);
 	transition: all 0.3s ease;
-	border: 2px solid #FFD700;
+	border: 2px solid #ffd700;
 	display: flex;
 	flex-direction: column;
 	position: relative;
@@ -57,8 +57,8 @@
 	position: absolute;
 	top: 12px;
 	left: 12px;
-	background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
-	color: #3D2E2A;
+	background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
+	color: #3d2e2a;
 	padding: 0.25rem 0.75rem;
 	border-radius: 20px;
 	font-size: 0.75rem;
@@ -75,7 +75,7 @@
 	width: 100%;
 	height: 180px;
 	overflow: hidden;
-	background: #F5EBE6;
+	background: #f5ebe6;
 	position: relative;
 	flex-shrink: 0;
 }
@@ -91,7 +91,7 @@
 	position: absolute;
 	bottom: 8px;
 	right: 8px;
-	background: linear-gradient(135deg, #CA7C5C 0%, #A65A42 100%);
+	background: linear-gradient(135deg, #ca7c5c 0%, #a65a42 100%);
 	color: #fff;
 	font-size: 0.75rem;
 	padding: 0.25rem 0.6rem;
@@ -104,7 +104,7 @@
 	bottom: 8px;
 	left: 8px;
 	background: rgba(255, 255, 255, 0.95);
-	color: #3D2E2A;
+	color: #3d2e2a;
 	font-size: 0.8rem;
 	padding: 0.25rem 0.6rem;
 	border-radius: 4px;
@@ -119,14 +119,14 @@
 }
 
 .certif-card-title {
-	color: #3D2E2A;
+	color: #3d2e2a;
 	font-size: 1.15rem;
 	margin: 0 0 0.5rem 0;
 	font-weight: 600;
 }
 
 .certif-card-meta {
-	color: #6B5750;
+	color: #6b5750;
 	font-size: 0.9rem;
 	margin: 0 0 0.75rem 0;
 }
@@ -135,11 +135,11 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	color: #6B5750;
+	color: #6b5750;
 	font-size: 0.85rem;
 	margin-top: auto;
 	padding-top: 0.75rem;
-	border-top: 1px solid #F5EBE6;
+	border-top: 1px solid #f5ebe6;
 }
 
 .certif-card-time,
@@ -153,9 +153,9 @@
 .certif-empty {
 	text-align: center;
 	padding: 3rem;
-	color: #8B7B74;
+	color: #8b7b74;
 	font-style: italic;
 	background: #fff;
 	border-radius: 12px;
-	border: 2px dashed #F5EBE6;
+	border: 2px dashed #f5ebe6;
 }
diff --git a/src/pages/CreateRecipe/CreateRecipe.css b/src/pages/CreateRecipe/CreateRecipe.css
index 8e2cb11..953977e 100644
--- a/src/pages/CreateRecipe/CreateRecipe.css
+++ b/src/pages/CreateRecipe/CreateRecipe.css
@@ -5,7 +5,7 @@
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
-	background: linear-gradient(180deg, #EEE2DF 0%, #EED7C5 100%);
+	background: linear-gradient(180deg, #eee2df 0%, #eed7c5 100%);
 	border-radius: 16px;
 	box-shadow: 0 8px 30px rgba(179, 106, 94, 0.15);
 	min-height: calc(100vh - 200px);
@@ -13,13 +13,13 @@
 
 .create-recipe-title {
 	margin: 0 0 1rem;
-	color: #B36A5E;
+	color: #b36a5e;
 	font-size: 1.75rem;
 	font-weight: 700;
 }
 
 .create-recipe-section {
-	border: 1px solid #EED7C5;
+	border: 1px solid #eed7c5;
 	padding: 1.25rem;
 	border-radius: 12px;
 	margin-bottom: 1rem;
@@ -29,7 +29,7 @@
 
 .create-recipe-section-title {
 	margin: 0 0 1rem;
-	color: #B36A5E;
+	color: #b36a5e;
 	font-size: 1.1rem;
 	font-weight: 600;
 }
@@ -46,7 +46,7 @@
 	margin: 5px 0;
 	width: 100%;
 	box-sizing: border-box;
-	border: 2px solid #EED7C5;
+	border: 2px solid #eed7c5;
 	border-radius: 10px;
 	font-size: 1rem;
 	color: #5d4037;
@@ -56,7 +56,7 @@
 
 .create-recipe-input:focus {
 	outline: none;
-	border-color: #CA7C5C;
+	border-color: #ca7c5c;
 	box-shadow: 0 0 0 3px rgba(202, 124, 92, 0.15);
 }
 
@@ -81,7 +81,7 @@
 	min-height: 80px;
 	padding: 12px;
 	box-sizing: border-box;
-	border: 2px solid #EED7C5;
+	border: 2px solid #eed7c5;
 	border-radius: 10px;
 	font-size: 1rem;
 	color: #5d4037;
@@ -92,14 +92,14 @@
 
 .create-recipe-textarea:focus {
 	outline: none;
-	border-color: #CA7C5C;
+	border-color: #ca7c5c;
 	box-shadow: 0 0 0 3px rgba(202, 124, 92, 0.15);
 }
 
 .create-recipe-step-index {
 	font-weight: bold;
 	line-height: 2.5;
-	color: #CA7C5C;
+	color: #ca7c5c;
 	min-width: 30px;
 }
 
@@ -115,7 +115,7 @@
 .create-recipe-button-primary {
 	padding: 16px;
 	font-size: 1.1rem;
-	background: linear-gradient(135deg, #CA7C5C 0%, #B36A5E 100%);
+	background: linear-gradient(135deg, #ca7c5c 0%, #b36a5e 100%);
 	color: white;
 	border-radius: 12px;
 }
@@ -127,23 +127,23 @@
 
 .create-recipe-button-secondary {
 	margin-top: 10px;
-	background: #EEE2DF;
-	color: #B36A5E;
-	border: 1px solid #EED7C5;
+	background: #eee2df;
+	color: #b36a5e;
+	border: 1px solid #eed7c5;
 }
 
 .create-recipe-button-secondary:hover {
-	background: #EED7C5;
+	background: #eed7c5;
 }
 
 .create-recipe-button-danger {
 	background: #fff;
-	color: #B36A5E;
-	border: 1px solid #C89F9C;
+	color: #b36a5e;
+	border: 1px solid #c89f9c;
 }
 
 .create-recipe-button-danger:hover {
-	background: #B36A5E;
+	background: #b36a5e;
 	color: #fff;
 }
 
diff --git a/src/pages/Login/Login.css b/src/pages/Login/Login.css
index 23ccaf6..432c875 100644
--- a/src/pages/Login/Login.css
+++ b/src/pages/Login/Login.css
@@ -4,7 +4,7 @@
 	align-items: center;
 	min-height: 100vh;
 	padding: 2rem;
-	background: linear-gradient(180deg, #EEE2DF 0%, #EED7C5 100%);
+	background: linear-gradient(180deg, #eee2df 0%, #eed7c5 100%);
 }
 
 .login-card {
@@ -14,11 +14,11 @@
 	width: 100%;
 	max-width: 420px;
 	box-shadow: 0 8px 30px rgba(179, 106, 94, 0.15);
-	border: 1px solid #EED7C5;
+	border: 1px solid #eed7c5;
 }
 
 .login-card h1 {
-	color: #B36A5E;
+	color: #b36a5e;
 	font-size: 1.75rem;
 	margin: 0 0 0.5rem 0;
 	text-align: center;
@@ -26,7 +26,7 @@
 }
 
 .login-subtitle {
-	color: #C89F9C;
+	color: #c89f9c;
 	text-align: center;
 	margin: 0 0 2rem 0;
 	font-size: 0.9rem;
@@ -45,14 +45,14 @@
 }
 
 .form-group label {
-	color: #B36A5E;
+	color: #b36a5e;
 	font-weight: 600;
 	font-size: 0.9rem;
 }
 
 .form-group input {
 	padding: 0.875rem 1rem;
-	border: 2px solid #EED7C5;
+	border: 2px solid #eed7c5;
 	border-radius: 12px;
 	font-size: 1rem;
 	background-color: #fff;
@@ -61,12 +61,12 @@
 }
 
 .form-group input::placeholder {
-	color: #C89F9C;
+	color: #c89f9c;
 }
 
 .form-group input:focus {
 	outline: none;
-	border-color: #CA7C5C;
+	border-color: #ca7c5c;
 	box-shadow: 0 0 0 3px rgba(202, 124, 92, 0.15);
 }
 
@@ -86,7 +86,7 @@
 }
 
 .login-button {
-	background: linear-gradient(135deg, #CA7C5C 0%, #B36A5E 100%);
+	background: linear-gradient(135deg, #ca7c5c 0%, #b36a5e 100%);
 	color: white;
 	border: none;
 	padding: 0.875rem 1.5rem;
@@ -108,26 +108,26 @@
 }
 
 .login-button:disabled {
-	background: #EED7C5;
+	background: #eed7c5;
 	cursor: not-allowed;
 }
 
 .signup-link {
 	text-align: center;
 	margin-top: 1.5rem;
-	color: #C89F9C;
+	color: #c89f9c;
 	font-size: 0.9rem;
 }
 
 .signup-link a {
-	color: #CA7C5C;
+	color: #ca7c5c;
 	font-weight: 600;
 	text-decoration: none;
 }
 
 .signup-link a:hover {
 	text-decoration: underline;
-	color: #B36A5E;
+	color: #b36a5e;
 }
 
 @media (max-width: 480px) {
diff --git a/src/pages/Settings/Settings.css b/src/pages/Settings/Settings.css
index f9cc4e1..21bf0fa 100644
--- a/src/pages/Settings/Settings.css
+++ b/src/pages/Settings/Settings.css
@@ -4,7 +4,7 @@
 	align-items: center;
 	min-height: calc(100vh - 80px);
 	padding: 2rem;
-	background: linear-gradient(180deg, #EEE2DF 0%, #EED7C5 100%);
+	background: linear-gradient(180deg, #eee2df 0%, #eed7c5 100%);
 }
 
 .settings-card {
@@ -15,7 +15,7 @@
 	max-width: 450px;
 	box-shadow: 0 8px 30px rgba(179, 106, 94, 0.15);
 	text-align: center;
-	border: 1px solid #EED7C5;
+	border: 1px solid #eed7c5;
 }
 
 .user-icon {
@@ -26,25 +26,25 @@
 }
 
 .settings-card h1 {
-	color: #B36A5E;
+	color: #b36a5e;
 	font-size: 1.75rem;
 	margin: 0 0 0.5rem 0;
 	font-weight: 700;
 }
 
 .settings-subtitle {
-	color: #C89F9C;
+	color: #c89f9c;
 	margin: 0 0 2rem 0;
 	font-size: 0.9rem;
 }
 
 .loading {
-	color: #C89F9C;
+	color: #c89f9c;
 	font-size: 1rem;
 }
 
 .user-info {
-	background-color: #EEE2DF;
+	background-color: #eee2df;
 	border-radius: 14px;
 	padding: 1.5rem;
 	margin: 1.5rem 0;
@@ -56,7 +56,7 @@
 	justify-content: space-between;
 	align-items: center;
 	padding: 0.75rem 0;
-	border-bottom: 1px solid #EED7C5;
+	border-bottom: 1px solid #eed7c5;
 }
 
 .info-row:last-child {
@@ -64,19 +64,19 @@
 }
 
 .info-label {
-	color: #C89F9C;
+	color: #c89f9c;
 	font-size: 0.9rem;
 	font-weight: 500;
 }
 
 .info-value {
-	color: #B36A5E;
+	color: #b36a5e;
 	font-size: 0.9rem;
 	font-weight: 600;
 }
 
 .primary-button {
-	background: linear-gradient(135deg, #CA7C5C 0%, #B36A5E 100%);
+	background: linear-gradient(135deg, #ca7c5c 0%, #b36a5e 100%);
 	color: white;
 	border: none;
 	padding: 0.875rem 2rem;
@@ -99,8 +99,8 @@
 
 .signout-button {
 	background-color: transparent;
-	color: #B36A5E;
-	border: 2px solid #CA7C5C;
+	color: #b36a5e;
+	border: 2px solid #ca7c5c;
 	padding: 0.875rem 2rem;
 	font-size: 1rem;
 	font-weight: 600;
@@ -112,7 +112,7 @@
 }
 
 .signout-button:hover {
-	background: linear-gradient(135deg, #CA7C5C 0%, #B36A5E 100%);
+	background: linear-gradient(135deg, #ca7c5c 0%, #b36a5e 100%);
 	color: white;
 	border-color: transparent;
 }
diff --git a/src/pages/ShoppingList/ShoppingList.css b/src/pages/ShoppingList/ShoppingList.css
index e80ce8f..b35bc1e 100644
--- a/src/pages/ShoppingList/ShoppingList.css
+++ b/src/pages/ShoppingList/ShoppingList.css
@@ -3,7 +3,7 @@
 	max-width: 700px;
 	margin: 2rem auto;
 	padding: 2rem;
-	background: linear-gradient(180deg, #EEE2DF 0%, #EED7C5 100%);
+	background: linear-gradient(180deg, #eee2df 0%, #eed7c5 100%);
 	color: #5d4037;
 	border-radius: 16px;
 	box-shadow: 0 8px 30px rgba(179, 106, 94, 0.15);
@@ -14,7 +14,7 @@
 /* Main title */
 .shopping-list-title {
 	text-align: center;
-	color: #B36A5E;
+	color: #b36a5e;
 	margin-bottom: 1.5rem;
 	font-size: 2rem;
 	font-weight: 700;
@@ -32,7 +32,7 @@
 	padding: 12px 16px;
 	background-color: #fff;
 	color: #5d4037;
-	border: 2px solid #EED7C5;
+	border: 2px solid #eed7c5;
 	border-radius: 12px;
 	font-size: 1rem;
 	transition: all 0.3s;
@@ -40,17 +40,17 @@
 
 .item-input:focus {
 	outline: none;
-	border-color: #CA7C5C;
+	border-color: #ca7c5c;
 	box-shadow: 0 0 0 3px rgba(202, 124, 92, 0.15);
 }
 
 .item-input::placeholder {
-	color: #C89F9C;
+	color: #c89f9c;
 }
 
 .add-button {
 	padding: 12px 24px;
-	background: linear-gradient(135deg, #CA7C5C 0%, #B36A5E 100%);
+	background: linear-gradient(135deg, #ca7c5c 0%, #b36a5e 100%);
 	color: white;
 	border: none;
 	border-radius: 12px;
@@ -76,7 +76,7 @@
 	align-items: center;
 	justify-content: space-between;
 	background-color: #fff;
-	border: 1px solid #EED7C5;
+	border: 1px solid #eed7c5;
 	color: #5d4037;
 	padding: 12px 16px;
 	margin-bottom: 8px;
@@ -92,7 +92,7 @@
 
 .shopping-item.completed span {
 	text-decoration: line-through;
-	color: #C89F9C;
+	color: #c89f9c;
 }
 
 /* Actions within a list item */
@@ -103,8 +103,8 @@
 
 .delete-button {
 	background-color: #fff;
-	color: #B36A5E;
-	border: 1px solid #C89F9C;
+	color: #b36a5e;
+	border: 1px solid #c89f9c;
 	padding: 6px 12px;
 	border-radius: 8px;
 	cursor: pointer;
@@ -113,9 +113,9 @@
 }
 
 .delete-button:hover {
-	background-color: #B36A5E;
+	background-color: #b36a5e;
 	color: #fff;
-	border-color: #B36A5E;
+	border-color: #b36a5e;
 }
 
 .checkbox {
@@ -123,19 +123,19 @@
 	cursor: pointer;
 	width: 20px;
 	height: 20px;
-	accent-color: #CA7C5C;
+	accent-color: #ca7c5c;
 }
 
 /* Empty state message */
 .empty-message {
 	text-align: center;
-	color: #C89F9C;
+	color: #c89f9c;
 	font-style: italic;
 	margin-top: 2rem;
 	padding: 2rem;
 	background: #fff;
 	border-radius: 12px;
-	border: 2px dashed #EED7C5;
+	border: 2px dashed #eed7c5;
 }
 
 /* Recipe Group Styles */
@@ -144,7 +144,7 @@
 	background-color: #fff;
 	border-radius: 16px;
 	padding: 1.25rem;
-	border: 1px solid #EED7C5;
+	border: 1px solid #eed7c5;
 	box-shadow: 0 4px 12px rgba(179, 106, 94, 0.08);
 }
 
@@ -155,13 +155,13 @@
 	gap: 1rem;
 	margin-bottom: 1rem;
 	padding-bottom: 0.75rem;
-	border-bottom: 2px solid #CA7C5C;
+	border-bottom: 2px solid #ca7c5c;
 	flex-wrap: wrap;
 }
 
 .recipe-group-title {
 	font-size: 1.25rem;
-	color: #B36A5E;
+	color: #b36a5e;
 	margin: 0;
 	flex: 1;
 	font-weight: 600;
@@ -171,7 +171,7 @@
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
-	background-color: #EEE2DF;
+	background-color: #eee2df;
 	padding: 0.25rem 0.5rem;
 	border-radius: 8px;
 }
@@ -179,7 +179,7 @@
 .servings-btn {
 	width: 32px;
 	height: 32px;
-	background: linear-gradient(135deg, #CA7C5C 0%, #B36A5E 100%);
+	background: linear-gradient(135deg, #ca7c5c 0%, #b36a5e 100%);
 	color: white;
 	border: none;
 	border-radius: 8px;
@@ -201,13 +201,13 @@
 	min-width: 60px;
 	text-align: center;
 	font-weight: bold;
-	color: #B36A5E;
+	color: #b36a5e;
 }
 
 .delete-group-btn {
 	background-color: #fff;
-	color: #B36A5E;
-	border: 1px solid #C89F9C;
+	color: #b36a5e;
+	border: 1px solid #c89f9c;
 	padding: 8px 16px;
 	border-radius: 8px;
 	cursor: pointer;
@@ -216,17 +216,17 @@
 }
 
 .delete-group-btn:hover {
-	background-color: #B36A5E;
+	background-color: #b36a5e;
 	color: #fff;
-	border-color: #B36A5E;
+	border-color: #b36a5e;
 }
 
 .manual-items {
-	border-color: #C89F9C;
+	border-color: #c89f9c;
 }
 
 .manual-items .recipe-group-title {
-	color: #C89F9C;
+	color: #c89f9c;
 }
 
 /* Responsive adjustments */
diff --git a/src/pages/Signup/Signup.css b/src/pages/Signup/Signup.css
index 3aa6725..7adebc2 100644
--- a/src/pages/Signup/Signup.css
+++ b/src/pages/Signup/Signup.css
@@ -4,7 +4,7 @@
 	align-items: center;
 	min-height: 100vh;
 	padding: 2rem;
-	background: linear-gradient(180deg, #EEE2DF 0%, #EED7C5 100%);
+	background: linear-gradient(180deg, #eee2df 0%, #eed7c5 100%);
 }
 
 .signup-card {
@@ -14,11 +14,11 @@
 	width: 100%;
 	max-width: 420px;
 	box-shadow: 0 8px 30px rgba(179, 106, 94, 0.15);
-	border: 1px solid #EED7C5;
+	border: 1px solid #eed7c5;
 }
 
 .signup-card h1 {
-	color: #B36A5E;
+	color: #b36a5e;
 	font-size: 1.75rem;
 	margin: 0 0 0.5rem 0;
 	text-align: center;
@@ -26,7 +26,7 @@
 }
 
 .signup-subtitle {
-	color: #C89F9C;
+	color: #c89f9c;
 	text-align: center;
 	margin: 0 0 2rem 0;
 	font-size: 0.9rem;
@@ -45,14 +45,14 @@
 }
 
 .signup-form .form-group label {
-	color: #B36A5E;
+	color: #b36a5e;
 	font-weight: 600;
 	font-size: 0.9rem;
 }
 
 .signup-form .form-group input {
 	padding: 0.875rem 1rem;
-	border: 2px solid #EED7C5;
+	border: 2px solid #eed7c5;
 	border-radius: 12px;
 	font-size: 1rem;
 	background-color: #fff;
@@ -61,12 +61,12 @@
 }
 
 .signup-form .form-group input::placeholder {
-	color: #C89F9C;
+	color: #c89f9c;
 }
 
 .signup-form .form-group input:focus {
 	outline: none;
-	border-color: #CA7C5C;
+	border-color: #ca7c5c;
 	box-shadow: 0 0 0 3px rgba(202, 124, 92, 0.15);
 }
 
@@ -86,7 +86,7 @@
 }
 
 .signup-button {
-	background: linear-gradient(135deg, #CA7C5C 0%, #B36A5E 100%);
+	background: linear-gradient(135deg, #ca7c5c 0%, #b36a5e 100%);
 	color: white;
 	border: none;
 	padding: 0.875rem 1.5rem;
@@ -108,26 +108,26 @@
 }
 
 .signup-button:disabled {
-	background: #EED7C5;
+	background: #eed7c5;
 	cursor: not-allowed;
 }
 
 .login-link {
 	text-align: center;
 	margin-top: 1.5rem;
-	color: #C89F9C;
+	color: #c89f9c;
 	font-size: 0.9rem;
 }
 
 .login-link a {
-	color: #CA7C5C;
+	color: #ca7c5c;
 	font-weight: 600;
 	text-decoration: none;
 }
 
 .login-link a:hover {
 	text-decoration: underline;
-	color: #B36A5E;
+	color: #b36a5e;
 }
 
 @media (max-width: 480px) {