diff --git a/src/features/DefaultLayout.tsx b/src/features/DefaultLayout.tsx
index 4045fcc..5278455 100644
--- a/src/features/DefaultLayout.tsx
+++ b/src/features/DefaultLayout.tsx
@@ -7,8 +7,8 @@ type DefaultLayoutProps = {
 
 const DefaultLayout = ({ children }: DefaultLayoutProps) => {
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-[256px_repeat(3,_minmax(0,_1fr))] gap-10 h-screen">
-      <header className="col-span-1">
+    <div className="bg-cft-light-gray  dark:bg-cft-black grid grid-cols-1 lg:grid-cols-[256px_repeat(3,_minmax(0,_1fr))] gap-10 h-screen">
+      <header className="bg-cft-light-gray  dark:bg-cft-black col-span-1 ">
         <Nav />
       </header>
       <main className="col-span-1 lg:col-span-3 pt-10 container px-20">
diff --git a/src/features/Nav.tsx b/src/features/Nav.tsx
index 03c3485..4099c65 100644
--- a/src/features/Nav.tsx
+++ b/src/features/Nav.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 const Nav = () => {
   return (
     <>
-      <nav className="w-screen lg:w-64 bg-cft-black shadow flex-col justify-between">
+      <nav className="w-screen lg:w-64 bg-cft-nav-gray dark:bg-cft-black shadow flex-col justify-between">
         <div>
           <div className="flex items-center justify-center my-6 cursor-pointer">
             <Link href={'/'} passHref={true}>
diff --git a/src/styles/global.css b/src/styles/global.css
index c82b186..e03c1d3 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -3,6 +3,6 @@
 @tailwind utilities;
 
 body, html {
-  @apply bg-cft-black;
-  @apply text-white;
+  @apply bg-cft-light-gray dark:bg-cft-black;
+  @apply text-cft-black dark:text-cft-white;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 2721e20..c8b3177 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -38,6 +38,7 @@ module.exports = {
         'cft-black': '#121212',
         'cft-light-gray': '#BEBCBC',
         'cft-white': '#F9F9F9',
+        'cft-nav-gray': '#E6E6E6',
       },
     },
   },