diff --git a/package-lock.json b/package-lock.json
index e6c6d26..8b59065 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,15 +10,19 @@
 			"dependencies": {
 				"flowbite": "^2.5.1",
 				"flowbite-svelte": "^0.46.16",
-				"flowbite-svelte-icons": "^1.6.1"
+				"flowbite-svelte-icons": "^1.6.1",
+				"motion": "^11.17.0",
+				"pocketbase": "^0.25.0"
 			},
 			"devDependencies": {
 				"@playwright/test": "^1.28.1",
 				"@sveltejs/adapter-auto": "^3.0.0",
+				"@sveltejs/adapter-node": "^5.2.11",
 				"@sveltejs/kit": "^2.5.27",
 				"@sveltejs/vite-plugin-svelte": "^4.0.0",
 				"@tailwindcss/typography": "^0.5.14",
 				"@types/eslint": "^9.6.0",
+				"@types/node": "^22.10.5",
 				"autoprefixer": "^10.4.20",
 				"eslint": "^9.0.0",
 				"eslint-config-prettier": "^9.1.0",
@@ -799,6 +803,92 @@
 				"url": "https://opencollective.com/popperjs"
 			}
 		},
+		"node_modules/@rollup/plugin-commonjs": {
+			"version": "28.0.2",
+			"resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-28.0.2.tgz",
+			"integrity": "sha512-BEFI2EDqzl+vA1rl97IDRZ61AIwGH093d9nz8+dThxJNH8oSoB7MjWvPCX3dkaK1/RCJ/1v/R1XB15FuSs0fQw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@rollup/pluginutils": "^5.0.1",
+				"commondir": "^1.0.1",
+				"estree-walker": "^2.0.2",
+				"fdir": "^6.2.0",
+				"is-reference": "1.2.1",
+				"magic-string": "^0.30.3",
+				"picomatch": "^4.0.2"
+			},
+			"engines": {
+				"node": ">=16.0.0 || 14 >= 14.17"
+			},
+			"peerDependencies": {
+				"rollup": "^2.68.0||^3.0.0||^4.0.0"
+			},
+			"peerDependenciesMeta": {
+				"rollup": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@rollup/plugin-commonjs/node_modules/fdir": {
+			"version": "6.4.2",
+			"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.2.tgz",
+			"integrity": "sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"picomatch": "^3 || ^4"
+			},
+			"peerDependenciesMeta": {
+				"picomatch": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@rollup/plugin-commonjs/node_modules/is-reference": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
+			"integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/estree": "*"
+			}
+		},
+		"node_modules/@rollup/plugin-commonjs/node_modules/picomatch": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+			"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/jonschlinkert"
+			}
+		},
+		"node_modules/@rollup/plugin-json": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-6.1.0.tgz",
+			"integrity": "sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@rollup/pluginutils": "^5.1.0"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"peerDependencies": {
+				"rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+			},
+			"peerDependenciesMeta": {
+				"rollup": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@rollup/plugin-node-resolve": {
 			"version": "15.2.3",
 			"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.3.tgz",
@@ -1083,6 +1173,47 @@
 				"@sveltejs/kit": "^2.0.0"
 			}
 		},
+		"node_modules/@sveltejs/adapter-node": {
+			"version": "5.2.11",
+			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-5.2.11.tgz",
+			"integrity": "sha512-lR7/dfUaKFf3aI408KRDy/BVDYoqUws7zNOJz2Hl4JoshlTnMgdha3brXBRFXB+cWtYvJjjPhvmq3xqpbioi4w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@rollup/plugin-commonjs": "^28.0.1",
+				"@rollup/plugin-json": "^6.1.0",
+				"@rollup/plugin-node-resolve": "^16.0.0",
+				"rollup": "^4.9.5"
+			},
+			"peerDependencies": {
+				"@sveltejs/kit": "^2.4.0"
+			}
+		},
+		"node_modules/@sveltejs/adapter-node/node_modules/@rollup/plugin-node-resolve": {
+			"version": "16.0.0",
+			"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-16.0.0.tgz",
+			"integrity": "sha512-0FPvAeVUT/zdWoO0jnb/V5BlBsUSNfkIOtFHzMO4H9MOklrmQFY6FduVHKucNb/aTFxvnGhj4MNj/T1oNdDfNg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@rollup/pluginutils": "^5.0.1",
+				"@types/resolve": "1.20.2",
+				"deepmerge": "^4.2.2",
+				"is-module": "^1.0.0",
+				"resolve": "^1.22.1"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"peerDependencies": {
+				"rollup": "^2.78.0||^3.0.0||^4.0.0"
+			},
+			"peerDependenciesMeta": {
+				"rollup": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@sveltejs/kit": {
 			"version": "2.5.28",
 			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.5.28.tgz",
@@ -1203,6 +1334,16 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@types/node": {
+			"version": "22.10.5",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.5.tgz",
+			"integrity": "sha512-F8Q+SeGimwOo86fiovQh8qiXfFEh2/ocYv7tU5pJ3EXMSSxk1Joj5wefpFK2fHTf/N6HKGSxIDBT9f3gCxXPkQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"undici-types": "~6.20.0"
+			}
+		},
 		"node_modules/@types/resolve": {
 			"version": "1.20.2",
 			"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -1996,6 +2137,13 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/commondir": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+			"integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/concat-map": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2639,6 +2787,33 @@
 				"url": "https://github.com/sponsors/rawify"
 			}
 		},
+		"node_modules/framer-motion": {
+			"version": "11.17.0",
+			"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.17.0.tgz",
+			"integrity": "sha512-uTNLH9JPMD3ad14WBt3KYRTR+If4tGPLgKTKTIIPaEBMkvazs6EkWNcmCh65qA/tyinOqIbQiuCorXX0qQsNoQ==",
+			"license": "MIT",
+			"dependencies": {
+				"motion-dom": "^11.16.4",
+				"motion-utils": "^11.16.0",
+				"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/fsevents": {
 			"version": "2.3.2",
 			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -3179,6 +3354,47 @@
 				"node": ">=16 || 14 >=14.17"
 			}
 		},
+		"node_modules/motion": {
+			"version": "11.17.0",
+			"resolved": "https://registry.npmjs.org/motion/-/motion-11.17.0.tgz",
+			"integrity": "sha512-mWZhIOWH2slNXPUWhr6cEu98bl9NMX7u9r7vdNI+Bm3/jrOEa3e44GmyUuwXr9hWR+rWII27YTnKb6CDD1vU2g==",
+			"license": "MIT",
+			"dependencies": {
+				"framer-motion": "^11.17.0",
+				"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": "11.16.4",
+			"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.16.4.tgz",
+			"integrity": "sha512-2wuCie206pCiP2K23uvwJeci4pMFfyQKpWI0Vy6HrCTDzDCer4TsYtT7IVnuGbDeoIV37UuZiUr6SZMHEc1Vww==",
+			"license": "MIT",
+			"dependencies": {
+				"motion-utils": "^11.16.0"
+			}
+		},
+		"node_modules/motion-utils": {
+			"version": "11.16.0",
+			"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.16.0.tgz",
+			"integrity": "sha512-ngdWPjg31rD4WGXFi0eZ00DQQqKKu04QExyv/ymlC+3k+WIgYVFbt6gS5JsFPbJODTF/r8XiE/X+SsoT9c0ocw==",
+			"license": "MIT"
+		},
 		"node_modules/mri": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -3481,6 +3697,12 @@
 				"node": ">=18"
 			}
 		},
+		"node_modules/pocketbase": {
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/pocketbase/-/pocketbase-0.25.0.tgz",
+			"integrity": "sha512-xbjiQG/tnh2HsjZrTW7ZEJASvl4hmGAB5PQAmNRkRU8BmrPib7zwKyXdiYJl34QN7ADpqykZD2lAMdDtrrQbuw==",
+			"license": "MIT"
+		},
 		"node_modules/postcss": {
 			"version": "8.4.47",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
@@ -4696,6 +4918,12 @@
 			"integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
 			"license": "Apache-2.0"
 		},
+		"node_modules/tslib": {
+			"version": "2.8.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+			"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+			"license": "0BSD"
+		},
 		"node_modules/type-check": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -4747,6 +4975,13 @@
 				}
 			}
 		},
+		"node_modules/undici-types": {
+			"version": "6.20.0",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+			"integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/update-browserslist-db": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
diff --git a/package.json b/package.json
index 0c62f2f..c6b9f13 100644
--- a/package.json
+++ b/package.json
@@ -17,10 +17,12 @@
 	"devDependencies": {
 		"@playwright/test": "^1.28.1",
 		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/adapter-node": "^5.2.11",
 		"@sveltejs/kit": "^2.5.27",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@tailwindcss/typography": "^0.5.14",
 		"@types/eslint": "^9.6.0",
+		"@types/node": "^22.10.5",
 		"autoprefixer": "^10.4.20",
 		"eslint": "^9.0.0",
 		"eslint-config-prettier": "^9.1.0",
@@ -41,6 +43,8 @@
 	"dependencies": {
 		"flowbite": "^2.5.1",
 		"flowbite-svelte": "^0.46.16",
-		"flowbite-svelte-icons": "^1.6.1"
+		"flowbite-svelte-icons": "^1.6.1",
+		"motion": "^11.17.0",
+		"pocketbase": "^0.25.0"
 	}
 }
diff --git a/src/app.css b/src/app.css
index a31e444..7cd6c6c 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,3 +1,10 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
+body {
+	position: relative;
+	min-height: 100svh;
+}
+html {
+	overflow-y: scroll;
+}
diff --git a/src/components/navbar.svelte b/src/components/navbar.svelte
index 5459c0d..2cc8f6b 100644
--- a/src/components/navbar.svelte
+++ b/src/components/navbar.svelte
@@ -9,34 +9,38 @@
 		Input,
 		Avatar
 	} from 'flowbite-svelte';
-	import { CartOutline, SearchOutline } from 'flowbite-svelte-icons';
+	import { CartOutline, SearchOutline, StarOutline } from 'flowbite-svelte-icons';
+	import ShoppingCart from './ShoppingCart.svelte';
 </script>
 
-<Navbar>
+<Navbar class="sticky top-0 z-50 bg-white shadow-sm">
 	<NavBrand href="/">
 		<img
-			src="https://images.unsplash.com/photo-1520763185298-1b434c919102?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-			class="me-3 h-6 sm:h-9"
+			src="https://www.edvring.info/dam/jcr:334766c1-59b9-40ed-b5fa-727d549d4e88/edvLogo.svg"
+			class="me-3 h-7 sm:h-9"
 			alt="Flowbite Logo"
 		/>
 		<span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Webshop</span>
 	</NavBrand>
 
-	<div class="relative hidden md:block">
+	<!-- <div class="relative hidden md:block">
 		<div class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3">
 			<SearchOutline class="h-4 w-4" />
 		</div>
-		<Input id="search-navbar" class="ps-10" placeholder="Search..." />
-	</div>
+		<Input id="search-navbar" class="w-96 ps-10" placeholder="Search..." />
+	</div> -->
 
 	<div class="flex">
 		<Avatar
 			href="/profile"
-			src="https://images.unsplash.com/photo-1520763185298-1b434c919102?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-			class="m-1 me-4"
+			src="https://media.istockphoto.com/id/1223671392/de/vektor/standardprofilbild-avatar-fotoplatzhalter-vektor-illustration.jpg?s=612x612&w=0&k=20&c=vtYE5RcgwgrJ1Zg6r66xN25LpXS_xsxZ8NqtvRQ9w6I="
+			class="m-1 me-4 h-10 border-2"
 		/>
-		<Button>
-			<CartOutline size="lg"></CartOutline>
-		</Button>
+		<a href="/favourites">
+			<Button class="me-2 h-12">
+				<StarOutline size="lg" />
+			</Button>
+		</a>
+		<ShoppingCart />
 	</div>
 </Navbar>
diff --git a/src/lib/session.svelte.ts b/src/lib/session.svelte.ts
index 82d7361..f20d521 100644
--- a/src/lib/session.svelte.ts
+++ b/src/lib/session.svelte.ts
@@ -1,28 +1,21 @@
-import type { User } from './types';
+const USER_KEY = 'user';
+const PASS_KEY = 'username';
 
-const key = 'user';
-const key2 = 'username';
+export const login = (user: string, password: string) => {
+	localStorage.setItem(USER_KEY, user);
+	localStorage.setItem(PASS_KEY, password);
+};
 
-function login(user: User) {
-	localStorage.setItem(key, btoa(`${user.username}:${user.password}`));
-	localStorage.setItem(key2, user.username);
-}
+export const logout = () => {
+	localStorage.removeItem(USER_KEY);
+	localStorage.removeItem(PASS_KEY);
+	window.location.reload();
+};
 
-function logout() {
-	localStorage.removeItem(key);
-	localStorage.removeItem(key2);
-}
+export const loggedIn = () => localStorage.getItem(USER_KEY) !== null;
 
-function loggedIn() {
-	return localStorage.getItem(key) !== null;
-}
+export const name = () => localStorage.getItem(PASS_KEY) ?? '';
 
-function name() {
-	return localStorage.getItem(key2) ?? '';
-}
-
-function auth() {
-	return localStorage.getItem(key);
-}
+export const auth = () => localStorage.getItem(USER_KEY);
 
 export default { login, logout, loggedIn, name, auth };
diff --git a/src/routes/(auth)/+layout.svelte b/src/routes/(auth)/+layout.svelte
index 8443462..d5812ba 100644
--- a/src/routes/(auth)/+layout.svelte
+++ b/src/routes/(auth)/+layout.svelte
@@ -1,9 +1,10 @@
 <script>
+	import Footer from '../../components/Footer.svelte';
 	import Navbar from '../../components/navbar.svelte';
 
 	let { children } = $props();
 </script>
 
 <Navbar></Navbar>
-
 {@render children?.()}
+<Footer></Footer>
diff --git a/src/routes/(auth)/main/+page.svelte b/src/routes/(auth)/main/+page.svelte
index b085fce..aa0df37 100644
--- a/src/routes/(auth)/main/+page.svelte
+++ b/src/routes/(auth)/main/+page.svelte
@@ -1,38 +1,461 @@
-<script>
-	import { Card, Button } from 'flowbite-svelte';
-	import { CartPlusOutline, StarOutline } from 'flowbite-svelte-icons';
+<script lang="ts">
+	import { addToCart } from '$lib/stores/cartStore';
+	import { removeFromFavorites, addToFavorites, appStore, favorites } from '$lib/stores/store';
+	import { Card, Button, Badge, Input, Select, Toast, Spinner } from 'flowbite-svelte';
+	import { CartPlusOutline, HeartOutline, HeartSolid, SearchOutline } from 'flowbite-svelte-icons';
+	import ImageModal from '../../../components/imageModal.svelte';
+	import { derived, writable, type Writable } from 'svelte/store';
+	import { fade, fly, scale } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
+	import { goto } from '$app/navigation';
 
-	// Create an array to loop over
-	let cards = Array(9).fill({
-		title: 'Tulpe',
-		description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit.',
-		imageUrl:
-			'https://images.unsplash.com/photo-1520763185298-1b434c919102?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
-	});
+	interface Product {
+		id: number;
+		title: string;
+		description: string;
+		imageUrl: string;
+		price: number;
+		category?: string;
+	}
+
+	// Products array and state management
+	const products: Product[] = [
+		{
+			id: 1,
+			title: 'Tulip',
+			description: 'Beautiful tulips for your garden.',
+			imageUrl:
+				'https://images.unsplash.com/photo-1520763185298-1b434c919102?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+			price: 10
+		},
+		{
+			id: 2,
+			title: 'Rose',
+			description: 'Elegant roses for special occasions.',
+			imageUrl:
+				'https://images.unsplash.com/photo-1582794543139-8ac9cb0f7b11?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+			price: 15
+		},
+		{
+			id: 3,
+			title: 'Sunflower',
+			description: 'Bright sunflowers to light up your day.',
+			imageUrl:
+				'https://images.unsplash.com/photo-1535382985264-7ea131537c07?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTQxfHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
+			price: 12
+		},
+		{
+			id: 4,
+			title: 'Orchid',
+			description: 'Exotic orchids for a touch of elegance.',
+			imageUrl:
+				'https://images.unsplash.com/photo-1531217182035-78d279dcdb7f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8T3JjaGlkfGVufDB8fDB8fHww',
+			price: 25
+		},
+		{
+			id: 5,
+			title: 'Lily',
+			description: 'Fragrant lilies for a serene atmosphere.',
+			imageUrl:
+				'https://plus.unsplash.com/premium_photo-1676654936609-e264dd7b9dab?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTM1fHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
+			price: 18
+		},
+		{
+			id: 6,
+			title: 'Daisy',
+			description: 'Cheerful daisies for a fresh look.',
+			imageUrl:
+				'https://images.unsplash.com/photo-1496098570671-efe44b569a00?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTQ4fHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
+			price: 8
+		},
+		{
+			id: 7,
+			title: 'Carnation',
+			description: 'Classic carnations for any occasion.',
+			imageUrl:
+				'https://images.unsplash.com/photo-1587316830148-c9b01df2da38?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Njl8fGZsb3dlcnxlbnwwfHwwfHx8MA%3D%3D',
+			price: 9
+		},
+		{
+			id: 8,
+			title: 'Peony',
+			description: 'Lush peonies for a luxurious feel.',
+			imageUrl:
+				'https://images.unsplash.com/photo-1579053778004-3a4d3f0fae19?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTU2fHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
+			price: 22
+		},
+		{
+			id: 9,
+			title: 'Hydrangea',
+			description: 'Stunning hydrangeas for a bold statement.',
+			imageUrl:
+				'https://images.unsplash.com/photo-1552409905-46aa1e84e2e8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTY5fHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
+			price: 20
+		},
+		{
+			id: 10,
+			title: 'Lavender',
+			description: 'Soothing lavender for relaxation.',
+			imageUrl:
+				'https://images.unsplash.com/photo-1490163212432-2c8e584dc243?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjI3fHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
+			price: 14
+		},
+		{
+			id: 11,
+			title: 'Iris',
+			description: 'Vibrant irises for a pop of color.',
+			imageUrl:
+				'https://images.unsplash.com/photo-1583693034345-b6c1d5b2ffa6?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjUwfHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
+			price: 16
+		},
+		{
+			id: 12,
+			title: 'Daffodil',
+			description: 'Bright daffodils to welcome spring.',
+			imageUrl:
+				'https://plus.unsplash.com/premium_photo-1676070094538-7663fb7c2745?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8RGFmZm9kaWx8ZW58MHx8MHx8fDA%3D',
+			price: 11
+		},
+		{
+			id: 13,
+			title: 'Poppy',
+			description: 'Vivid poppies for a bold statement.',
+			imageUrl:
+				'https://images.unsplash.com/photo-1527703137818-60612b595c72?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjIwfHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
+			price: 13
+		},
+		{
+			id: 14,
+			title: 'Marigold',
+			description: 'Golden marigolds for a festive touch.',
+			imageUrl:
+				'https://images.unsplash.com/photo-1559563362-c667ba5f5480?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjA5fHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
+			price: 7
+		},
+		{
+			id: 15,
+			title: 'Chrysanthemum',
+			description: 'Elegant chrysanthemums for autumn.',
+			imageUrl:
+				'https://images.unsplash.com/photo-1498323094960-d1a30fae4c5c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTgwfHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
+			price: 17
+		},
+		{
+			id: 16,
+			title: 'Gerbera',
+			description: 'Cheerful gerberas for a joyful vibe.',
+			imageUrl:
+				'https://images.unsplash.com/photo-1478801928079-ff8b78b1bef2?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTcyfHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
+			price: 19
+		},
+		{
+			id: 17,
+			title: 'Anemone',
+			description: 'Delicate anemones for a subtle charm.',
+			imageUrl:
+				'https://images.unsplash.com/photo-1496571330383-9b977f4a021d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OTR8fGZsb3dlcnxlbnwwfHwwfHx8MA%3D%3D',
+			price: 21
+		},
+		{
+			id: 18,
+			title: 'Ranunculus',
+			description: 'Layered ranunculus for a romantic touch.',
+			imageUrl:
+				'https://images.unsplash.com/photo-1578972497170-bfc780c65f65?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nzh8fGZsb3dlcnxlbnwwfHwwfHx8MA%3D%3D',
+			price: 23
+		},
+		{
+			id: 19,
+			title: 'Freesia',
+			description: 'Fragrant freesias for a sweet aroma.',
+			imageUrl:
+				'https://images.unsplash.com/photo-1496062031456-07b8f162a322?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fGZsb3dlcnxlbnwwfHwwfHx8MA%3D%3D',
+			price: 24
+		},
+		{
+			id: 20,
+			title: 'Amaryllis',
+			description: 'Striking amaryllis for a dramatic effect.',
+			imageUrl:
+				'https://images.unsplash.com/photo-1487139975590-b4f1dce9b035?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8Zmxvd2VyfGVufDB8fDB8fHww',
+			price: 26
+		}
+	];
+
+	const itemsPerPage = 9;
+	const currentPage: Writable<number> = writable(1);
+	const searchQuery: Writable<string> = writable('');
+	const selectedCategory: Writable<string> = writable('all');
+	const isLoading: Writable<boolean> = writable(false);
+	const showToast: Writable<boolean> = writable(false);
+	const toastMessage: Writable<string> = writable('');
+
+	// Add loading simulation
+	const simulateLoading = async () => {
+		isLoading.set(true);
+		await new Promise((resolve) => setTimeout(resolve, 800));
+		isLoading.set(false);
+	};
+
+	// Enhanced filtered products with proper typing
+	const filteredProducts = derived<[Writable<string>, Writable<string>], Product[]>(
+		[searchQuery, selectedCategory],
+		([$searchQuery, $selectedCategory], set) => {
+			simulateLoading().then(() => {
+				if (!$searchQuery && $selectedCategory === 'all') {
+					set(products);
+					return;
+				}
+
+				const searchLower = $searchQuery.toLowerCase();
+				const filtered = products.filter((product) => {
+					if ($selectedCategory !== 'all' && product.category !== $selectedCategory) return false;
+					if (!searchLower) return true;
+
+					return (
+						product.title.toLowerCase().includes(searchLower) ||
+						product.description.toLowerCase().includes(searchLower)
+					);
+				});
+				set(filtered);
+			});
+		},
+		[] as Product[]
+	);
+
+	const paginatedProducts = derived<[typeof filteredProducts, Writable<number>], Product[]>(
+		[filteredProducts, currentPage],
+		([$filteredProducts, $currentPage]) => {
+			const start = ($currentPage - 1) * itemsPerPage;
+			return $filteredProducts.slice(start, start + itemsPerPage);
+		}
+	);
+
+	const totalPages = derived<typeof filteredProducts, number>(
+		filteredProducts,
+		($filteredProducts) => Math.ceil($filteredProducts.length / itemsPerPage)
+	);
+
+	const goToPage = (page: number) => {
+		currentPage.set(page);
+		window.scrollTo({ top: 0, behavior: 'smooth' });
+	};
+
+	let searchTimeout: NodeJS.Timeout;
+	const handleSearch = (event: Event) => {
+		const target = event.target as HTMLInputElement;
+		clearTimeout(searchTimeout);
+		isLoading.set(true);
+		searchTimeout = setTimeout(() => {
+			searchQuery.set(target.value);
+			currentPage.set(1);
+		}, 300);
+	};
+
+	const handleCategoryChange = (event: Event) => {
+		const target = event.target as HTMLSelectElement;
+		selectedCategory.set(target.value);
+		currentPage.set(1);
+		simulateLoading();
+	};
+
+	const toggleFavorite = (product: Product) => {
+		const isFavorite = $favorites.some((item: Product) => item.id === product.id);
+		if (isFavorite) {
+			removeFromFavorites(product.id);
+			showToast.set(true);
+			toastMessage.set('Removed from favorites');
+		} else {
+			addToFavorites(product);
+			showToast.set(true);
+			toastMessage.set('Added to favorites');
+		}
+		setTimeout(() => showToast.set(false), 2000);
+	};
+
+	const handleAddToCart = (product: Product) => {
+		addToCart({ ...product, quantity: 1 });
+		showToast.set(true);
+		toastMessage.set('Added to cart');
+		setTimeout(() => showToast.set(false), 2000);
+	};
+
+	let modalOpen = false;
+	let selectedImage = {
+		url: '',
+		title: ''
+	};
+
+	const openImageModal = (product: Product) => {
+		selectedImage = {
+			url: product.imageUrl,
+			title: product.title
+		};
+		modalOpen = true;
+	};
+
+	const closeImageModal = () => {
+		modalOpen = false;
+	};
+
+	// Navigate to item page
+	const goToItemPage = (productId: number) => {
+		goto(`/item/${productId}`);
+	};
 </script>
 
-<div class="mx-auto my-6 grid w-fit grid-cols-3 gap-10">
-	{#each cards as card}
-		<Card img={card.imageUrl} class="">
-			<div class="holder flex">
-				<div class="left w-fit">
-					<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-						{card.title}
-					</h5>
-					<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
-						{card.description}
-					</p>
-				</div>
+<main class="container mx-auto px-4 py-8">
+	<div class="mb-8 space-y-4" in:fly={{ y: -20, duration: 800, delay: 200 }}>
+		<p class="text-lg text-gray-600 dark:text-gray-400">
+			Discover our beautiful collection of fresh flowers
+		</p>
+	</div>
 
-				<div class="right grid min-w-fit gap-4">
-					<Button>
-						<CartPlusOutline class="h-6 w-6 text-white" />
-					</Button>
-					<Button>
-						<StarOutline class=" h-6 w-6 text-white" />
-					</Button>
+	<div class="mb-6 grid gap-4 sm:grid-cols-2" in:fly={{ y: -20, duration: 600, delay: 200 }}>
+		<div class="relative">
+			<Input
+				type="text"
+				placeholder="Search products..."
+				value={$searchQuery}
+				on:input={handleSearch}
+			>
+				<SearchOutline slot="left" class="h-5 w-5" />
+			</Input>
+		</div>
+		<Select on:change={handleCategoryChange} value={$selectedCategory}>
+			<option value="all">All Categories</option>
+			<option value="bouquets">Bouquets</option>
+			<option value="single">Single Flowers</option>
+			<option value="arrangement">Arrangements</option>
+		</Select>
+	</div>
+
+	{#if $isLoading}
+		<div class="flex justify-center py-12" in:fade>
+			<Spinner size="12" />
+		</div>
+	{:else}
+		<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+			{#each $paginatedProducts as product, i (product.id)}
+				<div in:fly={{ y: 20, duration: 400, delay: i * 100 }} out:fade={{ duration: 200 }}>
+					<Card
+						padding="none"
+						class="h-fit overflow-hidden transition-shadow duration-300 hover:shadow-lg"
+					>
+						<div
+							class="relative aspect-[4/3] w-full overflow-hidden"
+							on:click={() => openImageModal(product)}
+							on:keydown={(e) => e.key === 'Enter' && openImageModal(product)}
+							role="button"
+							tabindex="0"
+						>
+							<img
+								src={product.imageUrl}
+								alt={product.title}
+								class="absolute h-full w-full object-cover transition-transform duration-300 hover:scale-110"
+								loading="lazy"
+							/>
+							<button
+								class="absolute right-2 top-2 rounded-full bg-white/80 p-2 transition-all duration-300 hover:scale-110 hover:bg-white"
+								on:click|stopPropagation={() => toggleFavorite(product)}
+							>
+								{#if $favorites.some((item: Product) => item.id === product.id)}
+									<div in:scale={{ duration: 200 }}>
+										<HeartSolid class="h-6 w-6 text-red-500" />
+									</div>
+								{:else}
+									<div in:scale={{ duration: 200 }}>
+										<HeartOutline class="h-6 w-6 text-gray-500" />
+									</div>
+								{/if}
+							</button>
+						</div>
+						<div class="flex h-full flex-col p-4">
+							<div class="flex-grow space-y-2">
+								<h5
+									on:click={() => goToItemPage(product.id)}
+									class="text-xl font-bold tracking-tight text-gray-900 dark:text-white"
+								>
+									{product.title}
+								</h5>
+								<p class="text-sm text-gray-700 dark:text-gray-400">
+									{product.description}
+								</p>
+								<div class="flex items-center justify-between">
+									<p class="text-2xl font-bold text-gray-900 dark:text-white">
+										${product.price.toFixed(2)}
+									</p>
+									{#if $favorites.some((item: Product) => item.id === product.id)}
+										<Badge color="red" class="animate-pulse">Favorite</Badge>
+									{/if}
+								</div>
+							</div>
+							<div class="mt-4">
+								<Button
+									class="w-full transition-transform duration-200 hover:scale-105"
+									on:click={() => handleAddToCart(product)}
+								>
+									<CartPlusOutline class="mr-2 h-5 w-5" />
+									Add to Cart
+								</Button>
+							</div>
+						</div>
+					</Card>
 				</div>
+			{/each}
+		</div>
+
+		{#if $filteredProducts.length === 0 && products.length === 0}
+			<div class="mt-8 text-center" in:fade>
+				<p class="text-lg text-gray-600">No products found matching your criteria.</p>
 			</div>
-		</Card>
-	{/each}
-</div>
+		{/if}
+
+		{#if $totalPages > 1}
+			<div class="mt-8 flex flex-wrap justify-center gap-2" in:fly={{ y: 20, duration: 800 }}>
+				<Button
+					color="light"
+					disabled={$currentPage === 1}
+					on:click={() => goToPage($currentPage - 1)}
+				>
+					Previous
+				</Button>
+				{#each Array($totalPages) as _, i}
+					<Button
+						color={$currentPage === i + 1 ? 'primary' : 'light'}
+						class="transition-transform duration-200 hover:scale-105"
+						on:click={() => goToPage(i + 1)}
+					>
+						{i + 1}
+					</Button>
+				{/each}
+				<Button
+					color="light"
+					disabled={$currentPage === $totalPages}
+					on:click={() => goToPage($currentPage + 1)}
+				>
+					Next
+				</Button>
+			</div>
+		{/if}
+	{/if}
+</main>
+
+{#if $showToast}
+	<div
+		class="fixed bottom-4 right-4 z-50"
+		in:fly={{ x: 20, duration: 300, easing: quintOut }}
+		out:fade
+	>
+		<Toast>
+			{$toastMessage}
+		</Toast>
+	</div>
+{/if}
+
+<ImageModal
+	bind:open={modalOpen}
+	imageUrl={selectedImage.url}
+	title={selectedImage.title}
+	onClose={closeImageModal}
+/>
diff --git a/src/routes/(auth)/profile/+page.svelte b/src/routes/(auth)/profile/+page.svelte
index d4ad1c1..55e6994 100644
--- a/src/routes/(auth)/profile/+page.svelte
+++ b/src/routes/(auth)/profile/+page.svelte
@@ -1,23 +1,115 @@
-<script>
-	import { Button, Card, Input } from 'flowbite-svelte';
+<script lang="ts">
+	import { favorites } from '$lib/stores/store';
+	import { Card, Button, Badge, Input, Textarea } from 'flowbite-svelte';
+	import { StarSolid, CheckCircleOutline, PenOutline } from 'flowbite-svelte-icons';
+
+	// Example user data
+	const user = {
+		name: 'John Doe',
+		email: 'john.doe@example.com',
+		address: '123 Main St, City, Country'
+	};
+
+	// Example order history
+	const orders = [
+		{
+			id: 1,
+			date: '2023-10-01',
+			items: ['Tulip Bouquet', 'Rose Bouquet'],
+			total: 60,
+			status: 'Delivered'
+		},
+		{
+			id: 2,
+			date: '2023-09-25',
+			items: ['Sunflower Bouquet'],
+			total: 30,
+			status: 'Shipped'
+		}
+	];
+
+	// State for editing profile
+	let isEditing = false;
+	let name = user.name;
+	let email = user.email;
+	let address = user.address;
+
+	// Handle profile update
+	const updateProfile = () => {
+		user.name = name;
+		user.email = email;
+		user.address = address;
+		isEditing = false;
+		// You could add an API call here to update the user's profile
+	};
 </script>
 
-<div class="flex h-[90svh] flex-wrap content-center">
-	<Card class="mx-auto max-h-fit">
-		<form action="">
-			<div class="formItem">
-				<label for="">Company Name:</label>
-				<Input type="text"></Input>
-			</div>
-			<div class="formItem">
-				<label for="">Email:</label>
-				<Input type="email"></Input>
-			</div>
-			<div class="formItem">
-				<label for="">GLN:</label>
-				<Input type="number"></Input>
-			</div>
-			<Button>Submit</Button>
-		</form>
-	</Card>
+<!-- Welcome Section -->
+<section class="bg-gradient-to-r from-pink-100 to-purple-100 py-12">
+	<div class="container mx-auto px-4">
+		<h1 class="text-4xl font-bold text-gray-900">Welcome, {user.name}!</h1>
+		<p class="text-lg text-gray-600">Manage your orders, favorites, and account settings here.</p>
+	</div>
+</section>
+
+<!-- Dashboard Content -->
+<div class="container mx-auto grid grid-cols-1 gap-8 px-4 py-8 lg:grid-cols-3">
+	<!-- Order History -->
+	<div class="lg:col-span-2">
+		<h2 class="mb-6 text-2xl font-bold text-gray-900">Order History</h2>
+		<div class="space-y-4">
+			{#each orders as order}
+				<Card class="p-6">
+					<div class="mb-4 flex items-center justify-between">
+						<h3 class="text-xl font-bold text-gray-900">Order #{order.id}</h3>
+						<Badge color={order.status === 'Delivered' ? 'green' : 'blue'}>
+							{order.status}
+						</Badge>
+					</div>
+					<p class="mb-2 text-gray-600">
+						<strong>Date:</strong>
+						{order.date}
+					</p>
+					<p class="mb-2 text-gray-600">
+						<strong>Items:</strong>
+						{order.items.join(', ')}
+					</p>
+					<p class="text-gray-600">
+						<strong>Total:</strong> ${order.total.toFixed(2)}
+					</p>
+				</Card>
+			{/each}
+		</div>
+	</div>
+
+	<!--  Account Settings -->
+	<div class="space-y-8">
+		<!-- Account Settings -->
+		<div>
+			<h2 class="mb-6 text-2xl font-bold text-gray-900">Account Settings</h2>
+			<Card class="p-6">
+				{#if isEditing}
+					<form on:submit|preventDefault={updateProfile} class="space-y-4">
+						<Input label="Name" bind:value={name} required />
+						<Input label="Email" type="email" bind:value={email} required />
+						<Textarea label="Address" bind:value={address} required />
+						<div class="flex justify-end space-x-4">
+							<Button color="red" on:click={() => (isEditing = false)}>Cancel</Button>
+							<Button type="submit">Save</Button>
+						</div>
+					</form>
+				{:else}
+					<div class="space-y-4">
+						<p class="text-gray-600"><strong>Name:</strong> {user.name}</p>
+						<p class="text-gray-600"><strong>Email:</strong> {user.email}</p>
+						<p class="text-gray-600"><strong>Address:</strong> {user.address}</p>
+						<Button on:click={() => (isEditing = true)}>
+							<PenOutline class="mr-2 h-5 w-5" />
+							Edit Profile
+						</Button>
+					</div>
+				{/if}
+			</Card>
+		</div>
+	</div>
 </div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a18244b..7cf4482 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,9 @@
 <script>
 	import '../app.css';
 	let { children } = $props();
+	import { fade, slide } from 'svelte/transition';
 </script>
 
-{@render children?.()}
+<div transition:slide>
+	{@render children?.()}
+</div>
diff --git a/src/routes/+page.ts b/src/routes/+page.ts
index 044672b..62bbe51 100644
--- a/src/routes/+page.ts
+++ b/src/routes/+page.ts
@@ -2,6 +2,6 @@ import session from '$lib/session.svelte';
 import { redirect } from '@sveltejs/kit';
 
 export async function load() {
-	const page = session.loggedIn() ? '/main' : '/login';
+	const page = session.loggedIn() ? '/landing' : '/login';
 	redirect(307, page);
 }
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 67e159f..a71733a 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Card, Button, Label, Input, Checkbox } from 'flowbite-svelte';
 	import { goto } from '$app/navigation';
+	import sessionSvelte from '$lib/session.svelte';
 
 	let username: string = '';
 	let password: string = '';
@@ -13,7 +14,8 @@
 		}
 
 		loading = true;
-		// success = await API.login({ username, password });
+		sessionSvelte.login(username, password);
+		success = true;
 		loading = false;
 
 		if (success) {
@@ -25,7 +27,7 @@
 <div class="flex h-[100svh] flex-wrap content-center">
 	<Card class="mx-auto max-h-fit">
 		<form class="flex flex-col space-y-6" action="/">
-			<h3 class="text-xl font-medium text-gray-900 dark:text-white">Sign in to our platform</h3>
+			<h3 class="text-xl font-medium text-gray-900 dark:text-white">Sign in</h3>
 			<Label class="space-y-2">
 				<span>Email</span>
 				<Input
@@ -48,12 +50,6 @@
 			</div>
 			<Button type="submit" class="w-full" on:click={login}>Login to your account</Button>
 			<span class="self-center text-red-500" class:invisible={success}>Login failed</span>
-
-			<div class="text-sm font-medium text-gray-500 dark:text-gray-300">
-				Not registered? <a href="/" class="text-primary-700 hover:underline dark:text-primary-500">
-					Create account
-				</a>
-			</div>
 		</form>
 	</Card>
 </div>
diff --git a/src/routes/login/+page.ts b/src/routes/login/+page.ts
index bb67d7f..8aa5721 100644
--- a/src/routes/login/+page.ts
+++ b/src/routes/login/+page.ts
@@ -3,6 +3,6 @@ import { redirect } from '@sveltejs/kit';
 
 export async function load() {
 	if (session.loggedIn()) {
-		redirect(307, '/');
+		redirect(307, '/landing');
 	}
 }
diff --git a/svelte.config.js b/svelte.config.js
index 4a82086..fffb849 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,4 +1,4 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-node';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 7ef1891..12e5310 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -13,16 +13,16 @@ export default {
 			colors: {
 				// flowbite-svelte
 				primary: {
-					50: '#FFF5F2',
-					100: '#FFF1EE',
-					200: '#FFE4DE',
-					300: '#FFD5CC',
-					400: '#FFBCAD',
-					500: '#FE795D',
-					600: '#EF562F',
-					700: '#EB4F27',
-					800: '#CC4522',
-					900: '#A5371B'
+					50: '#f2fbf2',
+					100: '#e6f7e6',
+					200: '#c0eac0',
+					300: '#99dc99',
+					400: '#66c566',
+					500: '#266d26' /* Base color */,
+					600: '#205b20',
+					700: '#1a491a',
+					800: '#143714',
+					900: '#0e260e'
 				}
 			}
 		}