diff --git a/.idea/dataSources.xml b/.idea/dataSources.xml
new file mode 100644
index 0000000..6b93264
--- /dev/null
+++ b/.idea/dataSources.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DataSourceManagerImpl" format="xml" multifile-model="true">
+    <data-source source="LOCAL" name="MongoDB/Atlas/Portfolio" uuid="ad0a8bee-85e4-4d04-8660-2b3c6d31bfd1">
+      <driver-ref>mongo.4</driver-ref>
+      <synchronize>true</synchronize>
+      <jdbc-driver>com.dbschema.MongoJdbcDriver</jdbc-driver>
+      <jdbc-url>mongodb+srv://portfolio.rbvql.mongodb.net/?retryWrites=true&amp;w=majority&amp;appName=Portfolio&quot;</jdbc-url>
+      <working-dir>$ProjectFileDir$</working-dir>
+    </data-source>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml
new file mode 100644
index 0000000..d23208f
--- /dev/null
+++ b/.idea/jsLibraryMappings.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <includedPredefinedLibrary name="Node.js Core" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/app/components/Contact.tsx b/app/components/Contact.tsx
index be728b3..e2f11b2 100644
--- a/app/components/Contact.tsx
+++ b/app/components/Contact.tsx
@@ -27,7 +27,7 @@ export default function Contact() {
   };
 
   return (
-    <section id="contact" className="p-10 bg-gray-100 dark:bg-gray-800">
+    <section id="contact" className="p-10 ">
       <h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
         Contact Me
       </h2>
@@ -42,7 +42,7 @@ export default function Contact() {
           type="text"
           name="name"
           placeholder="Name"
-          className="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+          className="w-full p-2 border rounded dark:text-white"
           required
           value={form.name}
           onChange={handleChange}
@@ -51,7 +51,7 @@ export default function Contact() {
           type="email"
           name="email"
           placeholder="Email"
-          className="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+          className="w-full p-2 border rounded  dark:text-white"
           required
           value={form.email}
           onChange={handleChange}
@@ -59,7 +59,7 @@ export default function Contact() {
         <textarea
           name="message"
           placeholder="Message"
-          className="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+          className="w-full p-2 border rounded dark:text-white"
           rows={5}
           required
           value={form.message}
@@ -67,7 +67,7 @@ export default function Contact() {
         ></textarea>
         <button
           type="submit"
-          className="w-full p-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition"
+          className="w-full p-2 text-white rounded hover:bg-blue-600 transition"
         >
           Send
         </button>
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
index 7358724..a1c254b 100644
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 
 export default function Footer() {
   return (
-    <footer className="text-center p-10 bg-gray-800 text-white">
+    <footer className="text-center p-10 text-white">
       <h1 className="text-3xl font-bold">Thank You for Visiting</h1>
       <p className="mt-4 text-xl">Connect with me on social platforms:</p>
       <div className="flex justify-center space-x-4 mt-4">
@@ -15,7 +15,7 @@ export default function Footer() {
       </div>
       <p className="mt-6">© Dennis Konkol 2024</p>
       <Link href="#hero">
-        <button className="mt-6 inline-block px-6 py-2 bg-black text-white rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300 transition">
+        <button className="mt-6 inline-block px-6 py-2 text-white rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300 transition">
           Back to Top
         </button>
       </Link>
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index 830d32e..6121ce8 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -7,56 +7,39 @@ export default function Header() {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <header className="p-5 bg-gray-800 text-white fixed w-full z-10">
-      <nav className="flex justify-between items-center max-w-6xl mx-auto">
-        <h1 className="text-lg font-bold">My Portfolio</h1>
-        <button
-          className="md:hidden block focus:outline-none"
-          onClick={() => setIsOpen(!isOpen)}
-        >
-          <svg
-            className="w-6 h-6"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            {isOpen ? (
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M6 18L18 6M6 6l12 12"
-              />
-            ) : (
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M4 8h16M4 16h16"
-              />
-            )}
-          </svg>
-        </button>
-        <ul className={`flex space-x-4 ${isOpen ? "block" : "hidden"} md:flex`}>
-          <li>
-            <Link href="#about" className="hover:underline">
-              About
-            </Link>
-          </li>
-          <li>
-            <Link href="#projects" className="hover:underline">
-              Projects
-            </Link>
-          </li>
-          <li>
-            <Link href="#contact" className="hover:underline">
-              Contact
-            </Link>
-          </li>
-          {/* DarkModeToggle removed */}
-        </ul>
-      </nav>
-    </header>
+      <header className="p-5 bg-white/30 text-gray-800 fixed w-full z-10 backdrop-blur-md shadow-lg">
+        <nav className="flex justify-between items-center max-w-6xl mx-auto">
+          <h1 className="text-2xl md:text-3xl font-bold">Dennis Konkol</h1>
+          <div className="flex items-center">
+            <button
+                className="md:hidden p-2 rounded-md bg-white/30 backdrop-blur-md shadow-inner transform transition-transform hover:scale-105 active:shadow-lg active:translate-y-1 neumorphism"
+                onClick={() => setIsOpen(!isOpen)}
+            >
+              Menu
+            </button>
+            <ul
+                className={`fixed top-0 right-0 h-full w-64 bg-white p-5 flex flex-col space-y-4 transition-transform duration-300 ${
+                    isOpen ? "translate-x-0" : "translate-x-full"
+                } md:static md:flex-row md:space-y-0 md:space-x-4 md:bg-transparent md:p-0 md:translate-x-0`}
+            >
+              {["About", "Projects", "Contact"].map((item, index) => (
+                  <li
+                      key={item}
+                      className={`transition-opacity duration-500 delay-${index * 150} ${
+                          isOpen ? "opacity-100" : "opacity-0"
+                      } md:opacity-100`}
+                  >
+                    <Link
+                        href={`#${item.toLowerCase()}`}
+                        className="bg-white/30 p-2 rounded-md backdrop-blur-md shadow-inner transform transition-transform hover:scale-105 active:shadow-lg active:translate-y-1 neumorphism"
+                    >
+                      {item}
+                    </Link>
+                  </li>
+              ))}
+            </ul>
+          </div>
+        </nav>
+      </header>
   );
-}
+}
\ No newline at end of file
diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
index dca832f..54bf80d 100644
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -4,7 +4,7 @@ export default function Hero() {
   return (
     <section
       id="hero"
-      className="text-center p-20 bg-gradient-to-r from-purple-400 to-blue-500 dark:from-gray-800 dark:to-gray-900 text-white"
+      className="text-center p-20 text-white"
     >
       <h1 className="text-5xl font-bold">Hi, I am Dennis</h1>
       <p className="mt-4 text-xl">A passionate developer and student.</p>
diff --git a/app/components/Projects.tsx b/app/components/Projects.tsx
index c4c8806..370879f 100644
--- a/app/components/Projects.tsx
+++ b/app/components/Projects.tsx
@@ -21,7 +21,7 @@ export default function Projects() {
   }, []);
 
   return (
-    <section id="projects" className="p-10 bg-gray-100 dark:bg-gray-800">
+    <section id="projects" className="p-10">
       <h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
         Projects
       </h2>
@@ -29,7 +29,7 @@ export default function Projects() {
         {projects.map((project) => (
           <div
             key={project.id}
-            className="p-4 border rounded shadow-lg bg-white dark:bg-gray-700"
+            className="p-4 border rounded shadow-lg "
           >
             <h3 className="text-2xl font-bold text-gray-800 dark:text-white">
               {project.title}
diff --git a/app/globals.css b/app/globals.css
index 600f6e4..c41f7e1 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -6,3 +6,18 @@
 body {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
+
+.neumorphism {
+    background-color: #f0f0f0;
+    box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
+    transition: box-shadow 0.3s ease, transform 0.3s ease;
+}
+
+.neumorphism:hover {
+    box-shadow: inset 8px 8px 16px #dddddd, inset -8px -8px 16px #ffffff;
+}
+
+.neumorphism:active {
+    translate: 0 0.225em;
+    box-shadow: inset 8px 8px 16px #bebebe, inset -8px -8px 16px #ffffff;
+}
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index 5594fc5..5ba01a7 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,4 +1,3 @@
-// app/page.tsx
 "use client";
 
 import Header from "./components/Header";
@@ -8,15 +7,15 @@ import Contact from "./components/Contact";
 import Footer from "./components/Footer";
 
 export default function Home() {
-  return (
-    <>
-      <Header />
-      <main>
-        <Hero />
-        <Projects />
-        <Contact />
-        <Footer />
-      </main>
-    </>
-  );
-}
+    return (
+        <>
+            <Header/>
+                <main>
+                    <Hero/>
+                    <Projects/>
+                    <Contact/>
+                    <Footer/>
+                </main>
+        </>
+    );
+}
\ No newline at end of file
diff --git a/public/images/off_white_bg.jpg b/public/images/off_white_bg.jpg
new file mode 100644
index 0000000..be74f01
Binary files /dev/null and b/public/images/off_white_bg.jpg differ