diff --git a/app/about/page.tsx b/app/about/page.tsx
index 3c2d566..5724fec 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -14,10 +14,12 @@ export default function Resume() {
 
     return (
         <div className="min-h-screen bg-gradient-to-b from-black to-slate-950 bg-fixed flex flex-col items-center p-4 z-10">
-            <section className="w-full bg-black bg-opacity-80 pb-4">
+            <section className="w-full pb-4">
                 <h1 className="uppercase text-4xl text-rose-300 tracking-wide leading-relaxed font-light">Mikayla Dobson</h1>
                 <h2 className="text-2xl tracking-wide font-light">Software Engineer | Nashville, TN</h2>
 
+                <div className="hidden bg-slate-950"></div>
+
                 <div className="flex items-center pt-2">
                     <p className="mr-2">Download a copy for later?</p>
                     <a download href="/resume/Mikayla Resume 0623.pdf" target="_blank" referrerPolicy="no-referrer" rel="noopener" className="mr-2 cursor-pointer hover:text-sky-300 active:text-white bg-slate-800 p-1 rounded-lg">.pdf</a>
@@ -31,7 +33,7 @@ export default function Resume() {
             </section>
 
             <section className="place-self-start mt-8 w-full">
-                <button onClick={() => setSkillsVisible(!skillsVisible)} className="sticky top-[5.5rem] w-full bg-black flex items-center text-rose-300 uppercase tracking-wide list-none">
+                <button onClick={() => setSkillsVisible(!skillsVisible)} className={"sticky top-[5.5rem] w-full flex items-center text-rose-300 uppercase tracking-wide list-none" + (skillsVisible ? " bg-black" : "")}>
                     <span className="font-light text-3xl leading-relaxed">Skills</span>
                     <RxChevronDown className={`ml-2 transition ${skillsVisible ? "rotate-180" : "rotate-0"}`} />
                 </button>
@@ -47,14 +49,14 @@ export default function Resume() {
             </section>
 
             <section className="place-self-start mt-8 w-full">
-                <button onClick={() => setEducationVisible(!educationVisible)} className="sticky top-[5.5rem] w-full bg-black flex items-center text-rose-300 uppercase tracking-wide list-none">
+                <button onClick={() => setEducationVisible(!educationVisible)} className={"sticky top-[5.5rem] w-full flex items-center text-rose-300 uppercase tracking-wide list-none" + (educationVisible ? " bg-black" : "")}>
                     <h2 className="font-light text-3xl leading-relaxed">Education</h2>
                     <RxChevronDown className={`ml-2 transition ${educationVisible ? "rotate-0" : "rotate-180"}`} />
                 </button>
 
                 {
                     educationVisible ? (
-                        <article className={(educationVisible ? "h-auto my-4 opacity-100" : "h-0 opacity-0 my-0") + " transition duration-500 bg-slate-800 bg-opacity-40 shadow shadow-black p-3 rounded-lg"}>
+                        <article className={(educationVisible ? "h-auto my-4 opacity-100 bg-black" : "h-0 opacity-0 my-0") + " transition duration-500  bg-opacity-40 shadow shadow-black p-3 rounded-lg"}>
                             <h3 className="uppercase text-2xl text-rose-600">Southern Methodist University</h3>
                             <p className="font-light italic text-rose-300">Dallas, TX - B.A. Music</p>
                             <div className="h-[1px] w-full my-3 bg-rose-300" />
@@ -66,7 +68,7 @@ export default function Resume() {
             </section>
 
             <section className="place-self-start mt-8 w-full">
-                <button onClick={() => setProjectsVisible(!projectsVisible)} className="sticky top-[5.5rem] w-full flex items-center text-rose-300 uppercase tracking-wide list-none">
+                <button onClick={() => setProjectsVisible(!projectsVisible)} className={"sticky top-[5.5rem] w-full flex items-center text-rose-300 uppercase tracking-wide list-none " + (projectsVisible ? " bg-black" : "")}>
                     <h2 className="font-light text-3xl leading-relaxed">Projects</h2>
                     <RxChevronDown className={`ml-2 transition ${projectsVisible ? "rotate-180" : "rotate-0"}`} />
                 </button>
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index b5e6bcf..59b7165 100644
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -12,29 +12,31 @@ export default function ContactPage() {
     }
 
     return (
-        <div className="flex flex-col mx-24 items-center">
-            <h1 className="text-3xl my-8 place-self-start">Thanks for your interest! I&apos;m looking forward to hearing from you.</h1>
+        <div className="min-w-screen min-h-screen bg-gradient-to-b from-black to-darkPlum">
+            <div className="flex flex-col mx-24 items-center">
+                <h1 className="text-3xl my-8 place-self-start">Thanks for your interest! I&apos;m looking forward to hearing from you.</h1>
 
-            <form onSubmit={handleSubmit} className="w-full">
-                <div className="flex w-full">
-                    <div className="flex flex-col w-1/2 mr-2">
-                        <label htmlFor="name">Name</label>
-                        <input className="bg-neutral-100 px-1.5 py-1 text-black" value={name} onChange={(e) => setName(e.target.value)} type="text" name="name" id="name" />
+                <form onSubmit={handleSubmit} className="w-full">
+                    <div className="flex w-full">
+                        <div className="flex flex-col w-1/2 mr-2">
+                            <label htmlFor="name">Name</label>
+                            <input className="bg-neutral-100 px-1.5 py-1 text-black" value={name} onChange={(e) => setName(e.target.value)} type="text" name="name" id="name" />
+                        </div>
+
+                        <div className="flex flex-col w-1/2 ml-2">
+                            <label htmlFor="email">Email</label>
+                            <input className="bg-neutral-100 px-1.5 py-1 text-black" value={email} onChange={(e) => setEmail(e.target.value)} type="email" name="email" id="email" />
+                        </div>
                     </div>
 
-                    <div className="flex flex-col w-1/2 ml-2">
-                        <label htmlFor="email">Email</label>
-                        <input className="bg-neutral-100 px-1.5 py-1 text-black" value={email} onChange={(e) => setEmail(e.target.value)} type="email" name="email" id="email" />
+                    <div className="flex flex-col w-full mt-4">
+                        <label htmlFor="message">Message</label>
+                        <textarea className="bg-neutral-100 px-1.5 py-1 text-black" value={message} onChange={(e) => setMessage(e.target.value)} name="message" id="message" cols={30} rows={5}></textarea>
                     </div>
-                </div>
 
-                <div className="flex flex-col w-full mt-4">
-                    <label htmlFor="message">Message</label>
-                    <textarea className="bg-neutral-100 px-1.5 py-1 text-black" value={message} onChange={(e) => setMessage(e.target.value)} name="message" id="message" cols={30} rows={5}></textarea>
-                </div>
-
-                <button className="p-2 px-8 mt-8 rounded-lg bg-rose-300 hover:bg-rose-400 text-black" type="submit">Send!</button>
-            </form>
+                    <button className="p-2 px-8 mt-8 rounded-lg bg-rose-300 hover:bg-rose-400 text-black" type="submit">Send!</button>
+                </form>
+            </div>
         </div>
     )
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 6607a9d..32a8766 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -24,14 +24,21 @@ export const metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
   const [bg, setBg] = useState('bg-slate-900');
+  const [overlay, setOverlay] = useState(false);
+
   const [pageIsScrolled, setPageIsScrolled] = useState(false);
 
   useEffect(() => {
     switch (pathname) {
+      case '/contact':
+        setBg('bg-darkPlum');
+        setOverlay(true);
+        break;
       case '/':
       case '/about':
       default:
         setBg('bg-slate-900');
+        setOverlay(false);
         break;
     }
   }, [pathname])
@@ -60,7 +67,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <IconContext.Provider value={{}}>
           <MDXProvider components={components}>
             <main className={`${bg} min-h-screen`}>
-              <div id="navbar-spacer" className="h-[6rem] w-full" />
+              <div id="navbar-spacer" className="h-[6rem] w-full bg-black" />
               {children}
             </main>
           </MDXProvider>
diff --git a/app/page.tsx b/app/page.tsx
index a5cfc37..0f390c6 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,11 +1,11 @@
-import { ColorChangeName } from "@/components/Home";  
+import { ColorChangeName } from "@/components/Home";
 import Image from "next/image";
 import Link from "next/link";
 
 export default function Home() {
   return (
-    <>
-      <div id="hero" className="bg-gradient-to-b from-black to-slate-900 p-4 flex flex-col min-h-[50vh]">
+    <div className="flex flex-col w-full">
+      <div id="hero" className="bg-gradient-to-b from-black to-slate-900 p-4 flex flex-col items-end">
         <ColorChangeName />
 
         {/* <div className="w-full h-[10vh] object-scale-down bg-no-repeat">
@@ -13,25 +13,27 @@ export default function Home() {
         </div> */}
       </div>
 
-      <div className="flex flex-col items-center pb-24">
-        <Link passHref href="/about">
-          <Image className="rounded-full mb-4" src="/img/profile.jpeg" alt="image of Mikayla Dobson" width={125} height={125} />
-        </Link>
-        <h2 className="text-blue-300 text-2xl mb-2">Hi! My name is Mikayla.</h2>
-        <p className="px-4 sm:px-12">I build full-stack software solutions for the web, answer open-ended questions, and pet cats.</p>
+      <div className="flex flex-col items-start">
+        <div className="flex flex-col w-full sm:w-2/3 relative mt-6 sm:mt-0 sm:bottom-12 items-center text-center">
+          <Link passHref href="/about">
+            <Image className="rounded-full my-4" src="/img/profile.jpeg" alt="image of Mikayla Dobson" width={125} height={125} />
+          </Link>
+          <h2 className="text-blue-300 text-2xl mb-2">Hi! My name is Mikayla.</h2>
+          <p className="px-4 sm:px-12">I build full-stack software solutions for the web, answer open-ended questions, and pet cats.</p>
 
-        <div id="actions" className="flex justify-around mt-8">
-          <Link className="flex flex-col items-center justify-center text-center px-4 sm:px-8 border-white border-[1px] p-2 w-2/5 rounded-md" href="/contact">
-            Tell me what I can do for you
-          </Link>
-          <Link className="hidden sm:flex flex-col items-center justify-center text-center px-8 border-white border p-2 w-2/5 rounded-md" href="/projects">
-            And check out some of my work while you&apos;re at it
-          </Link>
-          <Link className="sm:hidden flex flex-col items-center justify-center px-4 border-white border p-2 w-2/5 rounded-md" href="/projects">
-            Check out my work
-          </Link>
+          <div id="actions" className="flex justify-around my-8">
+            <Link className="flex flex-col items-center justify-center text-center px-4 sm:px-8 border-white border-[1px] p-2 w-2/5 rounded-md" href="/contact">
+              Tell me what I can do for you
+            </Link>
+            <Link className="hidden sm:flex flex-col items-center justify-center text-center px-8 border-white border p-2 w-2/5 rounded-md" href="/projects">
+              And check out some of my work while you&apos;re at it
+            </Link>
+            <Link className="sm:hidden flex flex-col items-center justify-center px-4 border-white border p-2 w-2/5 rounded-md" href="/projects">
+              Check out my work
+            </Link>
+          </div>
         </div>
       </div>
-    </>
+    </div>
   )
 }
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
index b023e1b..26d1e9d 100644
--- a/app/projects/page.tsx
+++ b/app/projects/page.tsx
@@ -2,6 +2,8 @@ export default function ProjectsPage() {
     return (
         <div>
             <h1>Projects Page</h1>
+
+            <p>Contents of this page coming soon!</p>
         </div>
     )
 }
diff --git a/components/Home/index.tsx b/components/Home/index.tsx
index e966ea3..82d2edc 100644
--- a/components/Home/index.tsx
+++ b/components/Home/index.tsx
@@ -12,8 +12,8 @@ export const ColorChangeName = () => {
         </span>
         <h2 className={"px-4 uppercase text-2xl text-transparent font-bold bg-opacity-100 animate-text-gradient bg-clip-text bg-gradient-to-r " + `from-${secondColor.split('-').slice(1).join('-')} to-${thirdColor.split('-').slice(1).join('-')}`}>Software Engineer</h2>
 
-        <div id="hero-mask" className="bg-inherit bg-opacity-10 p-4 flex flex-col min-h-[50vh]">
-          <p className="mt-4 text-sky-300 tracking-wide">Pragmatic software design with style and artistry.</p>
+        <div id="hero-mask" className="bg-inherit bg-opacity-10 p-4 flex flex-col">
+          <p className="mt-4 text-right text-sky-300 tracking-wide">Pragmatic software design with style and artistry.</p>
         </div>
         </>
     )
diff --git a/components/Navbar/index.tsx b/components/Navbar/index.tsx
index eb3b908..051c876 100644
--- a/components/Navbar/index.tsx
+++ b/components/Navbar/index.tsx
@@ -76,7 +76,7 @@ export default function Navbar({ pageIsScrolled = false }) {
 
     return (
         <>
-        <div id="navbar" className={"w-full z-50 fixed flex flex-nowrap items-baseline justify-apart px-8 py-4 " + (mobileMenuOpen ? "bg-[#131313] " : pageIsScrolled ? "bg-black" : "bg-inherit ") + " text-white transition-colors duration-200"}>
+        <div id="navbar" className={"w-full z-50 fixed flex flex-nowrap items-baseline justify-apart bg-opacity-95 px-8 py-4 " + (mobileMenuOpen ? "bg-[#131313] " : pageIsScrolled ? "bg-black " : "bg-inherit ") + " text-white transition-all duration-200"}>
             <Link passHref href="/" className="w-1/4">
                 <InlineLogo customHookInstance={navbarColorShift} />
             </Link>
@@ -101,21 +101,21 @@ export default function Navbar({ pageIsScrolled = false }) {
                 </button>
             </div>
         </div>
-        <div onMouseLeave={() => setMobileMenuOpen(false)} className={`flex flex-col z-50 rounded-bl-lg justify-end md:hidden fixed top-24 w-[25vw] text-right place-self-end bg-[#131313] ${mobileMenuOpen ? 'translate-x-[75vw]' : 'translate-x-[100vw]'} transition-all duration-500`}>
+        <div onMouseLeave={() => setMobileMenuOpen(false)} className={`flex flex-col z-50 rounded-bl-lg justify-end md:hidden fixed top-24 w-[35vw] text-right place-self-end bg-[#131313] ${mobileMenuOpen ? 'translate-x-[65vw]' : 'translate-x-[100vw]'} transition-all duration-500`}>
             {/* <div className="bg-black h-48" /> */}
-            <Link onClick={() => setMobileMenuOpen(false)} passHref href="/" className="w-full">
+            <Link onClick={() => setMobileMenuOpen(false)} passHref href="/" className="w-auto px-2">
                 <p className='text-lg text-right text-white text-opacity-80 hover:text-opacity-100 uppercase p-2 border-opacity-50 hover:border-opacity-75'>Home</p>
             </Link>
 
-            <Link onClick={() => setMobileMenuOpen(false)} passHref href="/about" className="w-full">
+            <Link onClick={() => setMobileMenuOpen(false)} passHref href="/about" className="w-auto px-2">
                 <p className='text-lg text-right text-white text-opacity-80 hover:text-opacity-100 uppercase p-2 border-opacity-50 hover:border-opacity-75'>About</p>
             </Link>
 
-            <Link onClick={() => setMobileMenuOpen(false)} passHref href="/projects" className="w-full">
+            <Link onClick={() => setMobileMenuOpen(false)} passHref href="/projects" className="w-auto px-2">
                 <p className='text-lg text-right text-white text-opacity-80 hover:text-opacity-100 hover:border-opacity-75 uppercase p-2 border-opacity-50'>Projects</p>
             </Link>
 
-            <Link onClick={() => setMobileMenuOpen(false)} passHref href="/contact" className="w-full">
+            <Link onClick={() => setMobileMenuOpen(false)} passHref href="/contact" className="w-auto px-2">
                 <p className='text-lg text-right text-white text-opacity-80 hover:text-opacity-100 uppercase p-2 border-opacity-50 hover:border-opacity-75'>Contact</p>
             </Link>
         </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index f760cc4..9f3cccc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,6 +15,9 @@ module.exports = {
   ],
   theme: {
     extend: {
+      colors: {
+        'darkPlum': '#1e0631',
+      },
       transitionTimingFunction: {
         'quick-start': 'cubic-bezier(.17,.67,0,.89)',
       },