diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 66bcffd..1b20e6e 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <!-- Footer.svelte -->
-<footer>
+<footer class="box-shadow">
 	<div class="footer-flex">
 		<a href="/">Home</a>
 		<nav>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 013822f..f4b9f09 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -33,6 +33,7 @@
 		flex-wrap: wrap;
 		justify-content: space-between;
 		border-radius: 0.5rem;
+		box-shadow: 2px 2px rgb(0, 180, 0);
 	}
 
 	ul {
diff --git a/src/lib/styles/style.css b/src/lib/styles/style.css
index 9894a8b..ae66673 100644
--- a/src/lib/styles/style.css
+++ b/src/lib/styles/style.css
@@ -15,6 +15,7 @@
 	--text-color: #fff;
 	--link-text-color: #afb9c4;
 	--collapsed-background-color: #414753;
+	--box-shadow-color: #111316;
 }
 
 @media (prefers-color-scheme: light) {
@@ -23,6 +24,8 @@
 		--container-background-color: #d9d6d0;
 		--text-color: #000;
 		--link-text-color: #50463b;
+		--collapsed-background-color: #c4c4c4;
+		--box-shadow-color: #aaa;
 	}
 }
 
@@ -87,6 +90,10 @@ ul {
 	display: flex;
 }
 
+.box-shadow {
+	box-shadow: 2px 2px var(--box-shadow-color);
+}
+
 .row:after {
 	content: "";
 	display: table;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f7341bd..158e22b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -6,8 +6,8 @@
 
 <Header />
 <div class="container">
-    <div class="column"><Navbar /></div>
-    <div class="column content flex_grow">
+    <div class="column box-shadow"><Navbar /></div>
+    <div class="column box-shadow content flex_grow">
         <main>
             <slot />
         </main>