diff --git a/ditto/public/images/banner.png b/ditto/public/images/banner.png
new file mode 100644
index 0000000..d3e93b5
Binary files /dev/null and b/ditto/public/images/banner.png differ
diff --git a/ditto/public/images/banner2.png b/ditto/public/images/banner2.png
new file mode 100644
index 0000000..462517c
Binary files /dev/null and b/ditto/public/images/banner2.png differ
diff --git a/ditto/public/images/banner3.png b/ditto/public/images/banner3.png
new file mode 100644
index 0000000..c31b98d
Binary files /dev/null and b/ditto/public/images/banner3.png differ
diff --git a/ditto/public/images/home-banner2.png b/ditto/public/images/home-banner2.png
new file mode 100644
index 0000000..cafe6fd
Binary files /dev/null and b/ditto/public/images/home-banner2.png differ
diff --git a/ditto/src/pages/index.tsx b/ditto/src/pages/index.tsx
index 640cd55..a203b34 100644
--- a/ditto/src/pages/index.tsx
+++ b/ditto/src/pages/index.tsx
@@ -85,65 +85,67 @@ export default function Home() {
   return (
     <div className="home font-sans">
       <title>harbour</title>
-      <div className="header-wrapper">
-        <div className="header text-primary">
-          <h1 className="font-title font-thin">harbour</h1>
-        </div>
-      </div>
-      
-      <div className="main-bar-wrapper">
-        <div className="main-bar font-bold">
-          
-          <span className="text-gray-300 font-serif">Take me to a </span>
-
-          <form className="prompt-select">
-            <DropdownMenu
-              name={"setting"}
-              options={lessons.map((item) => item.setting)}
-              value={prompt}
-              disabled={true}
-              onSelect={setPrompt}
-            />
-            <div className="regenPrompt bg-primary" onClick={regenHandle}></div>
-          </form>
-
-          <span className="text-gray-300 font-serif">to practice</span>
-
-          <DropdownMenu
-            name={"difficulty"}
-            options={difficulties}
-            value={difficulty}
-            onSelect={setDifficulty}
-          />
-          <DropdownMenu
-            name={"language"}
-            options={languages}
-            value={language}
-            onSelect={setLanguage}
-          />
-        </div>
-
-        {/* Fake form button that uses state to update url */}
-          
-        {selectedModuleName && 
-          <Link href={`/lessons/${selectedModuleName}?lang=${natLangToCode.get(language)}`}>
-            <div className="text-white bg-primary flex flex-row gap-2 px-4 py-3 rounded text-xl items-center justify-center">
-              <p> Ahoy! </p>
-              <FontAwesomeIcon
-                icon={faSailboat}
-                className="text-lg text-white cursor-pointer"
+      <div className="header text-primary flex flex-col justify-end">
+
+          {/* <h1 className="font-title font-thin">harbour</h1> */}
+        
+        <div className="main-bar-wrapper  ">
+          <div className="bg-[rgba(0,0,0,0.8)] py-6 px-10 rounded-3xl">
+            <div className="main-bar font-bold ">
+              
+              <span className="text-gray-300 font-serif">Take me to the </span>
+
+              <form className="prompt-select">
+                <DropdownMenu
+                  name={"setting"}
+                  options={lessons.map((item) => item.setting)}
+                  value={prompt}
+                  disabled={true}
+                  onSelect={setPrompt}
+                />
+                <div className="regenPrompt bg-primary" onClick={regenHandle}></div>
+              </form>
+
+              <span className="text-gray-300 font-serif">to practice</span>
+
+              <DropdownMenu
+                name={"difficulty"}
+                options={difficulties}
+                value={difficulty}
+                onSelect={setDifficulty}
+              />
+              <DropdownMenu
+                name={"language"}
+                options={languages}
+                value={language}
+                onSelect={setLanguage}
               />
             </div>
-          </Link>
-        }
-      </div>
-      <div className="footer-wrapper">
-        <div className="footer">
-          <span className="text-gray-600">Made with ♡ during Hackthe6ix 2023 by Justin, Kenneth, Nicole & Roseanna</span>
-          {/* <FontAwesomeIcon
-            icon={faGithub}
-            className="text-lg text-accent group-hover:text-[rgba(255,255,255,.25)] "
-          /> */}
+            {/* Fake form button that uses state to update url */}
+            {selectedModuleName && 
+            <Link href={`/lessons/${selectedModuleName}?lang=${natLangToCode.get(language)}`}>
+              <div className="text-white bg-primary flex flex-row gap-2 px-4 py-3 rounded text-xl items-center justify-center">
+                <p> Ahoy! </p>
+                <FontAwesomeIcon
+                  icon={faSailboat}
+                  className="text-lg text-white cursor-pointer"
+                />
+              </div>
+            </Link>
+            }
+          </div>
+        </div>
+          
+        
+
+        <div className="footer-wrapper">
+          <div className="footer">
+            <span className="text-gray-600">Made with ♡ during Hackthe6ix 2023 by Justin, Kenneth, Nicole & Roseanna</span>
+            {/* <FontAwesomeIcon
+              icon={faGithub}
+              className="text-lg text-accent group-hover:text-[rgba(255,255,255,.25)] "
+            /> */}
+          </div>
         </div>
       </div>
     </div>
diff --git a/ditto/src/styles/main_menu.scss b/ditto/src/styles/main_menu.scss
index 6949183..86f85f8 100644
--- a/ditto/src/styles/main_menu.scss
+++ b/ditto/src/styles/main_menu.scss
@@ -28,16 +28,16 @@ background: linear-gradient(189deg, rgba(27,52,64,1) 20%, rgba(10,18,27,1) 100%)
   }
 
   .header {
-    background-image: url("/images/home-banner.png");
-    background-position:center;
+    background-image: url("/images/banner3.png");
+    background-position: center;
     width: 100%;
     height: 100%;
     background-size: cover;
     color: white;
     text-align: center;
-    z-index: 999;
-    display: block;
-    position: relative;
+    // z-index: 999;
+    // display: block;
+    position: absolute;
 
   }
 
@@ -88,11 +88,12 @@ background: linear-gradient(189deg, rgba(27,52,64,1) 20%, rgba(10,18,27,1) 100%)
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    height: 27.5%;
+    margin-bottom: 100px;
+    height: 20%;
   }
 
   .main-bar{
-    width: 100%;
+    // width: 100%;
     display: flex;
     flex-direction: row;
     padding: 20px;