diff --git a/src/lib/components/Breadcrumb.svelte b/src/lib/components/Breadcrumb.svelte
new file mode 100644
index 0000000..3c9b074
--- /dev/null
+++ b/src/lib/components/Breadcrumb.svelte
@@ -0,0 +1,66 @@
+<script>
+	import { Home, Popcorn } from 'lucide-svelte';
+
+	export let title;
+</script>
+
+<ol class="container ml-8 flex w-fit whitespace-nowrap" aria-label="Breadcrumb">
+	<li class="inline-flex items-center">
+		<a
+			class="flex items-center text-sm text-gray-500 hover:text-blue-600 focus:text-blue-600 focus:outline-none dark:focus:text-blue-500"
+			href="/"
+		>
+			<Home size={16} strokeWidth={2} class="mr-2" />
+
+			Home
+		</a>
+		<svg
+			class="mx-2 h-4 w-4 flex-shrink-0 overflow-visible text-gray-400 dark:text-neutral-600 dark:text-neutral-600"
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg
+		>
+	</li>
+	<li class="inline-flex items-center">
+		<a
+			class="flex items-center text-sm text-gray-500 hover:text-blue-600 focus:text-blue-600 focus:outline-none dark:focus:text-blue-500"
+			href="/movies"
+		>
+			<Popcorn size={16} strokeWidth={2} class="mr-2" />
+			Movies
+			<svg
+				class="mx-2 h-4 w-4 flex-shrink-0 overflow-visible text-gray-400 dark:text-neutral-600 dark:text-neutral-600"
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg
+			>
+		</a>
+	</li>
+	<li
+		class="inline-flex items-center truncate text-sm font-semibold text-gray-800 dark:text-gray-200"
+		aria-current="page"
+	>
+		{title}
+	</li>
+</ol>
+
+<style>
+	.container {
+		background: rgb(255 255 255 / 25%);
+		border-radius: 10px;
+		border: 1px solid rgba(255, 255, 255, 0.18);
+		padding: 1rem;
+	}
+</style>
diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
index e52a598..75acb9b 100644
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@@ -9,7 +9,7 @@
 	style="background: rgb(255 255 255 / 25%);
 	border-radius: 10px;
 	border: 1px solid rgba(255, 255, 255, 0.18);"
-	class="card sm:w-2/2 w-full p-0 md:w-1/3 lg:w-1/3 xl:w-3/12"
+	class="card sm:w-2/2 flex w-full flex-col p-0 md:w-1/3 lg:w-1/3 xl:w-3/12"
 >
 	<img
 		src={`https://image.tmdb.org/t/p/original/${poster_path}`}
@@ -27,9 +27,10 @@
 		</div>
 	</Card.Header>
 	<!-- <Card.Content class="px-4 ">
-		<Card.Description>{desc}</Card.Description>
+	  <Card.Description>{desc}</Card.Description>
 	</Card.Content> -->
-	<Card.Footer class="flex justify-evenly px-4 font-bold text-gray-800">
+	<div class="flex-grow"></div>
+	<Card.Footer class=" flex justify-evenly px-4 font-bold text-gray-800">
 		<a href="/movies/{id}">View</a>
 		<Separator orientation="vertical" class="h-4" />
 		<a href="/home">Watch</a>
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index e8e764e..b5af950 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -1,6 +1,36 @@
-<footer class=" flex w-8/12 justify-center bg-slate-500 p-1 px-6 align-middle text-zinc-200">
-	<h1>Footer</h1>
-</footer>
+<script>
+	import { FacebookIcon, InstagramIcon, MountainIcon, TwitterIcon } from 'lucide-svelte';
+</script>
 
-<style>
-</style>
+<footer class="w-8/12 rounded-t-sm bg-gray-800 py-2">
+	<div class="container px-4 md:px-6">
+		<div
+			class="flex flex-col items-center justify-between space-y-4 sm:flex-row sm:space-x-8 sm:space-y-0"
+		>
+			<div class="flex items-center space-x-2">
+				<img src="/logo-white.svg" alt="" class="w-20" />
+			</div>
+			<nav class="gap-6 sm:flex">
+				<a class="text-xs font-medium text-gray-300 hover:text-white" href="#"> Home </a>
+				<a class="text-xs font-medium text-gray-300 hover:text-white" href="#"> Movies </a>
+				<a class="text-xs font-medium text-gray-300 hover:text-white" href="#"> TV Shows </a>
+				<a class="text-xs font-medium text-gray-300 hover:text-white" href="#"> About </a>
+				<a class="text-xs font-medium text-gray-300 hover:text-white" href="#"> Contact </a>
+			</nav>
+			<div class="flex space-x-4">
+				<a href="#">
+					<FacebookIcon size={22} strokeWidth={1} class="text-white" />
+				</a>
+				<a href="#">
+					<TwitterIcon size={22} strokeWidth={1} class=" text-white" />
+				</a>
+				<a href="#">
+					<InstagramIcon size={22} strokeWidth={1} class=" text-white" />
+				</a>
+			</div>
+		</div>
+		<p class="mt-1 select-none text-center text-[10px] text-gray-500">
+			© 2024 WATCH Website. All rights reserved.
+		</p>
+	</div>
+</footer>
diff --git a/src/lib/components/MovieCard.svelte b/src/lib/components/MovieCard.svelte
index 2b1cfe1..458f4eb 100644
--- a/src/lib/components/MovieCard.svelte
+++ b/src/lib/components/MovieCard.svelte
@@ -4,13 +4,13 @@
 	export let poster_path, title, overview, release_date, genre, name, runtime;
 </script>
 
-<main class="container mx-auto my-8 grid h-full grid-cols-1 gap-2 md:grid-cols-1 lg:grid-cols-3">
+<main class="container mx-auto my-8 grid grid-cols-1 gap-2 md:grid-cols-1 lg:grid-cols-3">
 	<!-- Movie Poster -->
 	<div class="md:col-span-1 lg:col-span-1">
 		<img
 			src="https://image.tmdb.org/t/p/original/{poster_path}"
 			alt="Movie Poster"
-			class="h-full w-full rounded-md object-cover shadow-lg"
+			class="h-full w-full rounded-md bg-auto bg-center bg-no-repeat object-cover shadow-lg"
 		/>
 	</div>
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 31a2e31..15c76f9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -7,7 +7,7 @@
 
 <Header />
 
-<main class="align my-8 flex w-8/12 rounded-sm px-6 py-8 align-middle">
+<main class="align flex w-8/12 rounded-sm px-6 py-8 align-middle">
 	<slot />
 </main>
 
diff --git a/src/routes/movies/[movieId=integer]/+page.svelte b/src/routes/movies/[movieId=integer]/+page.svelte
index cf60d53..ff1b9a9 100644
--- a/src/routes/movies/[movieId=integer]/+page.svelte
+++ b/src/routes/movies/[movieId=integer]/+page.svelte
@@ -1,5 +1,6 @@
 <script>
 	import { page } from '$app/stores';
+	import Breadcrumb from '$lib/components/Breadcrumb.svelte';
 	import MovieCard from '$lib/components/MovieCard.svelte';
 	const movieId = $page.params.movieId;
 
@@ -9,12 +10,16 @@
 	console.log(data.movie);
 </script>
 
-<MovieCard
-	{poster_path}
-	{title}
-	{overview}
-	{release_date}
-	genre={genres[0].name}
-	name={production_companies[0].name}
-	{runtime}
-/>
+<main class="column flex-col">
+	<Breadcrumb {title} />
+
+	<MovieCard
+		{poster_path}
+		{title}
+		{overview}
+		{release_date}
+		genre={genres[0].name}
+		name={production_companies[0].name}
+		{runtime}
+	/>
+</main>
diff --git a/static/logo-white.svg b/static/logo-white.svg
new file mode 100644
index 0000000..330e876
--- /dev/null
+++ b/static/logo-white.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="645" height="119" fill="none" viewBox="0 0 645 119">
+  <path fill="#ffffff" d="M612 102.555c0-2.266.398-4.422 1.194-6.469.868-2.046 2.026-3.8 3.474-5.262 1.519-1.462 3.292-2.631 5.319-3.508 2.026-.877 4.197-1.316 6.513-1.316 2.244 0 4.378.439 6.405 1.316 2.026.877 3.763 2.046 5.21 3.508 1.52 1.462 2.714 3.216 3.583 5.262a16.396 16.396 0 0 1 1.302 6.469c0 2.339-.434 4.531-1.302 6.578a16.047 16.047 0 0 1-3.583 5.153c-1.447 1.462-3.184 2.594-5.21 3.398A15.957 15.957 0 0 1 628.5 119c-2.316 0-4.487-.439-6.513-1.316-2.027-.804-3.8-1.936-5.319-3.398-1.448-1.462-2.606-3.18-3.474-5.153-.796-2.047-1.194-4.239-1.194-6.578ZM150.69 2.43l-37.587 85.166.002.003-13.782 31.232-.001-.004-.001.004-13.782-31.232.002-.003L75.482 64.79 65.404 87.599l-13.78 31.232-13.782-31.232L.253 2.43h27.563l23.807 53.953L61.701 33.56 75.43 2.431h.085l13.73 31.128 10.076 22.822 23.806-53.95h27.562Zm118.072 116.557h-29.2l-34.556-62.205-34.54 62.205h-31.008l50.043-90.112L204.11 2.587l15.503 27.907 49.149 88.493ZM318.421 2.431h34.104v22.396h-34.104v94.004H292.58V24.827h-34.104V2.43h59.945Zm154.12 73.604c-7.436 23.606-29.528 40.774-55.547 40.774-.79 0-1.574-.028-2.357-.059-31-1.244-55.851-26.849-55.851-58.149 0-32.106 26.119-58.208 58.208-58.208 25.22 0 46.764 16.137 54.815 38.628h-27.948c-6.056-8.284-15.837-13.674-26.867-13.674-18.332 0-33.254 14.922-33.254 33.254 0 18.333 14.922 33.255 33.254 33.255 11.945 0 22.442-6.338 28.297-15.82h27.25Zm99.448-28.83v22.396h-50.858v49.23h-25.842V2.431h25.842v44.774h50.858Zm25.842 71.626H571.99V2.431h25.841v116.4Z"/>
+  <path fill="url(#a)" d="M521.13 69.6V47.206h50.859v22.396H521.13Z" opacity=".57"/>
+  <defs>
+    <linearGradient id="a" x1="521.13" x2="571.989" y1="58.403" y2="58.403" gradientUnits="userSpaceOnUse">
+      <stop stop-opacity="0"/>
+      <stop offset=".325" stop-opacity=".293"/>
+      <stop offset=".722" stop-opacity=".65"/>
+      <stop offset="1" stop-opacity=".9"/>
+    </linearGradient>
+  </defs>
+</svg>