diff --git a/client/src/components/Footer.tsx b/client/src/components/Footer.tsx
index 31d4855..d2ce39d 100644
--- a/client/src/components/Footer.tsx
+++ b/client/src/components/Footer.tsx
@@ -2,7 +2,7 @@ import { IconBrandGithub } from "@tabler/icons-react";
 
 export default function Footer() {
   return (
-    <footer className="footer text-base-content mx-1 mt-4 w-auto grid-flow-col items-center justify-between p-4 md:mx-16 lg:mx-40">
+    <footer className="footer border-base-300 dark:border-neutral text-base-content mx-1 mt-4 w-auto grid-flow-col items-center justify-between border-t-2 p-4 md:mx-16 lg:mx-40">
       <div className="items-center">
         <p>
           &copy; 2023{" "}
diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
index 1d7c9dd..3b0e3a2 100644
--- a/client/src/components/Header.tsx
+++ b/client/src/components/Header.tsx
@@ -4,7 +4,7 @@ import ThemeToggle from "./ThemeToggle";
 
 export default function Header() {
   return (
-    <header className="navbar mx-1 w-auto justify-center drop-shadow-sm md:mx-16 lg:mx-40">
+    <header className="navbar border-base-300 dark:border-neutral mx-1 w-auto justify-center border-b-2 md:mx-16 lg:mx-40">
       <div className="flex flex-1 items-center gap-2">
         <Link
           href="/"