diff --git a/public/grid-dark.svg b/public/grid-dark.svg
new file mode 100644
index 0000000..3a554fb
--- /dev/null
+++ b/public/grid-dark.svg
@@ -0,0 +1,11 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1594_9)">
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M96 95H100V96H96V100H95V96H86V100H85V96H76V100H75V96H66V100H65V96H56V100H55V96H46V100H45V96H36V100H35V96H26V100H25V96H16V100H15V96H0V95H15V86H0V85H15V76H0V75H15V66H0V65H15V56H0V55H15V46H0V45H15V36H0V35H15V26H0V25H15V16H0V15H15V0H16V15H25V0H26V15H35V0H36V15H45V0H46V15H55V0H56V15H65V0H66V15H75V0H76V15H85V0H86V15H95V0H96V15H100V16H96V25H100V26H96V35H100V36H96V45H100V46H96V55H100V56H96V65H100V66H96V75H100V76H96V85H100V86H96V95ZM95 95V86H86V95H95ZM85 95V86H76V95H85ZM75 95V86H66V95H75ZM65 95V86H56V95H65ZM55 95V86H46V95H55ZM45 95V86H36V95H45ZM35 95V86H26V95H35ZM25 95V86H16V95H25ZM16 85H25V76H16V85ZM26 85H35V76H26V85ZM36 85H45V76H36V85ZM46 85H55V76H46V85ZM56 85H65V76H56V85ZM66 85H75V76H66V85ZM76 85H85V76H76V85ZM86 85H95V76H86V85ZM95 75V66H86V75H95ZM85 75V66H76V75H85ZM75 75V66H66V75H75ZM65 75V66H56V75H65ZM55 75V66H46V75H55ZM45 75V66H36V75H45ZM35 75V66H26V75H35ZM25 75V66H16V75H25ZM16 65H25V56H16V65ZM26 65H35V56H26V65ZM36 65H45V56H36V65ZM46 65H55V56H46V65ZM56 65H65V56H56V65ZM66 65H75V56H66V65ZM76 65H85V56H76V65ZM86 65H95V56H86V65ZM95 55V46H86V55H95ZM85 55V46H76V55H85ZM75 55V46H66V55H75ZM65 55V46H56V55H65ZM55 55V46H46V55H55ZM45 55V46H36V55H45ZM35 55V46H26V55H35ZM25 55V46H16V55H25ZM16 45H25V36H16V45ZM26 45H35V36H26V45ZM36 45H45V36H36V45ZM46 45H55V36H46V45ZM56 45H65V36H56V45ZM66 45H75V36H66V45ZM76 45H85V36H76V45ZM86 45H95V36H86V45ZM95 35V26H86V35H95ZM85 35V26H76V35H85ZM75 35V26H66V35H75ZM65 35V26H56V35H65ZM55 35V26H46V35H55ZM45 35V26H36V35H45ZM35 35V26H26V35H35ZM25 35V26H16V35H25ZM16 25H25V16H16V25ZM26 25H35V16H26V25ZM36 25H45V16H36V25ZM46 25H55V16H46V25ZM56 25H65V16H56V25ZM66 25H75V16H66V25ZM76 25H85V16H76V25ZM86 25H95V16H86V25Z" fill="black" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 5V0H5V5H0V6H5V100H6V6H100V5H6Z" fill="black" fill-opacity="0.2"/>
+</g>
+<defs>
+<clipPath id="clip0_1594_9">
+<rect width="100" height="100" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/CustomLayout.tsx b/src/components/CustomLayout.tsx
index 2b551c2..d9610f6 100644
--- a/src/components/CustomLayout.tsx
+++ b/src/components/CustomLayout.tsx
@@ -10,12 +10,11 @@ type Props = {
 const CustomLayout = ({ children, withMenu }: Props) => {
     return (
         <>
-            <div className='fixed top-0 left-0 bottom-0 right-0 bg-[url("/grid.svg")] opacity-30 z-0'></div>
-            <div className='w-full text-white m-auto min-h-screen flex flex-col bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-gray-700 via-gray-900 to-black'>
+            <div className='fixed top-0 left-0 bottom-0 right-0 bg-[url("/grid-dark.svg")] visible dark:hidden opacity-30 dark:z-0 '></div>
+            <div className='fixed top-0 left-0 bottom-0 right-0 bg-[url("/grid.svg")] hidden dark:visible opacity-30 z-0'></div>
+            <div className='w-full text-black dark:text-white m-auto min-h-screen flex flex-col bg-white dark:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] dark:from-gray-700 dark:via-gray-900 dark:to-black'>
                 <div className='relative'>
-                    {/* Corrected the class name for "md:hidden" */}
                     <div className='md:hidden'><MenuMobile /></div>
-                    {/* Corrected the class name for "md:visible" */}
                     <div className='hidden md:block'><Menu /></div>
                 </div>
                 <div className='w-5/6 md:w-2/3 m-auto relative h-full '>
@@ -23,6 +22,7 @@ const CustomLayout = ({ children, withMenu }: Props) => {
                 </div>
             </div>
         </>
+
     );
 };
 
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index bec3a7e..8ff6056 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -1,54 +1,54 @@
-import { neonBlanc, neonPurple } from '@/components/neonStyles'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import React from 'react'
+import { neonBlanc, neonPurple, neonBlack, neonBlue } from '@/components/neonStyles';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import React from 'react';
 
-type Props = {}
+type Props = {};
 
 export default function Menu({ }: Props) {
     const router = useRouter();
     return (
-        <div className=' w-2/3 m-auto flex py-8'>
+        <div className='w-2/3 m-auto flex py-8 text-white'>
             <Link href='/about' legacyBehavior passHref>
                 <a
-                    className={`text-xl font-bold text-white relative m-auto ${router.pathname === '/' ? 'text-purple-300' : ''}`}
-                    style={router.pathname === '/about' ? neonPurple : neonBlanc}
+                    className={`text-xl font-bold relative m-auto ${router.pathname === '/about' ? 'neon-blue' : 'neon-black'} dark:neon-white`}
+                    style={router.pathname === '/about' ? neonBlue : {}}
                 >
                     About
                 </a>
             </Link>
             <Link href='/posters' legacyBehavior passHref>
                 <a
-                    className={`text-xl font-bold text-white relative m-auto ${router.pathname === '/' ? 'text-purple-300' : ''}`}
-                    style={router.pathname === '/posters' ? neonPurple : neonBlanc}
+                    className={`text-xl font-bold relative m-auto ${router.pathname === '/posters' ? 'neon-purple' : 'neon-black'} dark:neon-white`}
+                    style={router.pathname === '/posters' ? neonPurple : {}}
                 >
                     Posters
                 </a>
             </Link>
             <Link href='/' legacyBehavior passHref>
                 <a
-                    className={`text-3xl font-bold text-white relative m-auto ${router.pathname === '/' ? 'text-purple-300' : ''}`}
-                    style={router.pathname === '/' ? neonPurple : neonBlanc}
+                    className={`text-3xl font-bold relative m-auto ${router.pathname === '/' ? 'neon-purple' : 'neon-black'} dark:neon-white`}
+                    style={router.pathname === '/' ? neonPurple : {}}
                 >
                     Matthys.Dev
                 </a>
             </Link>
             <Link href='/video' legacyBehavior passHref>
                 <a
-                    className={`text-xl font-bold text-white relative m-auto ${router.pathname === '/' ? 'text-purple-300' : ''}`}
-                    style={router.pathname === '/video' ? neonPurple : neonBlanc}
+                    className={`text-xl font-bold relative m-auto ${router.pathname === '/video' ? 'neon-purple' : 'neon-black'} dark:neon-white`}
+                    style={router.pathname === '/video' ? neonPurple : {}}
                 >
                     Video
                 </a>
             </Link>
             <Link href='/contact' legacyBehavior passHref>
                 <a
-                    className={`text-xl font-bold text-white relative m-auto ${router.pathname === '/' ? 'text-purple-300' : ''}`}
-                    style={router.pathname === '/contact' ? neonPurple : neonBlanc}
+                    className={`text-xl font-bold relative m-auto ${router.pathname === '/contact' ? 'neon-purple' : 'neon-black'} dark:neon-white`}
+                    style={router.pathname === '/contact' ? neonPurple : {}}
                 >
                     Contact
                 </a>
             </Link>
         </div>
-    )
-}
\ No newline at end of file
+    );
+}
diff --git a/src/components/neonStyles.ts b/src/components/neonStyles.ts
index e1c3c4b..53cb418 100644
--- a/src/components/neonStyles.ts
+++ b/src/components/neonStyles.ts
@@ -7,6 +7,9 @@ export const neonBlue = {
 export const neonPurple = {
   textShadow: '1px 1px 2px purple, 0 0 1em purple, 0 0 0.2em purple',
 };
+export const neonBlack = {
+  textShadow: '1px 1px 2px black, 0 0 1em black, 0 0 0.2em black',
+};
 
 export const neonBlanc = {
   textShadow: '0.3px 0.3px 0.3px white, 0 0 0.3em white, 0 0 0.05em white',
diff --git a/src/pages/posters.tsx b/src/pages/posters.tsx
index 4d074dd..025442c 100644
--- a/src/pages/posters.tsx
+++ b/src/pages/posters.tsx
@@ -16,12 +16,12 @@ export default function posters({ }: Props) {
     return (
         <CustomLayout withMenu>
             <Head>
-                <title>Matthys.dev | Posters</title> {/* Setting the title metadata */}
+                <title>Matthys.dev | Posters</title>
             </Head>
             <main className="relative flex flex-col items-center p-0 md:p-12 md:my-8">
                 <div className='w-screen my-auto'>
                     <div className='flex flex-col md:flex-row w-5/6 md:w-3/4 m-auto '>
-                        <div className='w-5/6 md:w-2/5 text-left mx-0 md:mx-24'>
+                        <div className='w-5/6 md:w-2/5 text-left mx-0 md:mx-24 text-black dark:text-white'>
                             <h1 className="text-4xl font-bold m-auto my-12">
                                 <div style={neonBlanc}>Human animals collection</div>
                             </h1>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 1af3b8f..a8923fa 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -10,11 +10,25 @@ const config: Config = {
     extend: {
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
+      // Optionally extend other theme properties here
     },
   },
-  plugins: [],
+  plugins: [
+    // Define a custom plugin for the neonBlack text shadow
+    function ({ addUtilities }: any) {
+      const newUtilities = {
+        '.neon-black': {
+          textShadow: '1px 1px 1px black, 0 0 1em black, 0 0 0.1em black',
+        },
+        '.neon-white': {
+          textShadow: '0.3px 0.3px 0.3px white, 0 0 0.3em white, 0 0 0.05em white',
+        }
+      };
+      addUtilities(newUtilities, ['responsive', 'hover']);
+    },
+  ],
 }
+
 export default config