diff --git a/editor.html b/editor.html
index 9fa3eb27..6781ad92 100644
--- a/editor.html
+++ b/editor.html
@@ -8,6 +8,9 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" xintegrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <!-- Bootstrap Icons CDN for checkmark -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <!-- Prism.js CSS for syntax highlighting -->
+    <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
+
     <style>
         /* Custom CSS Variables for the new theme */
         :root {
@@ -163,13 +166,13 @@ <h3 class="h5 mt-4 text-primary">Example:</h3>
         <!-- Center Panel: Code Editor -->
         <div id="center-panel" class="panel m-2 pb-5">
             <h2 class="h4 mb-3 text-code-heading">Code Editor</h2>
-            <textarea id="code-editor" class="form-control flex-grow-1 p-3 rounded resize-none"
-                      placeholder="Write your code here...">
+            <pre id="code-editor" class="bg-dark p-3 rounded flex-grow-1 overflow-auto"><code class="language-javascript" contenteditable="true">
 function reverseString(str) {
-  // Implement your solution here
-  return str.split('').reverse().join('');
+// Your code here
+return str.split('').reverse().join('');
 }
-            </textarea>
+            </code></pre>
+
             <button class="btn btn-custom-blue mt-4 px-4 py-2 rounded shadow">
                 Run Code
             </button>
@@ -280,5 +283,10 @@ <h2 class="h4 mb-3 text-output-heading">Output / Test Results</h2>
 
     <!-- Router Script -->
     <script type="module" src="scripts/app.js"></script>
+    <!-- Prism.js -->
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
+    <!-- Language support (e.g., JavaScript) -->
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-javascript.min.js"></script>
+
 </body>
 </html>
diff --git a/index.html b/index.html
index 0e56a1e2..cf193fa8 100644
--- a/index.html
+++ b/index.html
@@ -588,7 +588,6 @@ <h4>Community</h4>
       .search-input {
         width: 100%;
       }
-
       .challenges-list {
         grid-template-columns: 1fr;
       }
diff --git a/styles/challenges.css b/styles/challenges.css
index c52dc5b0..608fb5be 100644
--- a/styles/challenges.css
+++ b/styles/challenges.css
@@ -192,4 +192,13 @@ body {
   color: var(--text-color);
   border: 1px solid var(--border-color);
   border-radius: 50%;
-}
\ No newline at end of file
+}
+/* Hamburger CSS */
+.hamburger {
+  display: block;
+  width: 25px;
+  height: 3px;
+  background: var(--text-color);
+  margin: 4px 0;
+  transition: 0.4s;
+}
diff --git a/styles/main.css b/styles/main.css
deleted file mode 100644
index 3e7fd5ba..00000000
--- a/styles/main.css
+++ /dev/null
@@ -1,89 +0,0 @@
-
-      html,body{
-        background-color: #242124;
-        margin: 0;
-        padding: 1% 5%;
-        box-sizing: border-box;
-        font-family: system-ui, "Segoe UI","Helvetica Neue", Arial, sans-serif;
-        font-size: 16px;
-        min-height: 100vh;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        color: ivory;
-      }
-      #navbar{
-        height: 10%;
-        width: 100%;
-        /* background-color: red; */
-      }
-      #hero-section{
-        height: 70%;
-        width: 100%;
-        /* background-color: yellow; */
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        position: relative;
-        z-index: 1;
-      }
-      .bars-container {
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 100%;
-        display: flex;
-        justify-content: center;
-        gap: 2rem;
-        z-index: 0;
-        overflow: hidden;
-      }
-
-      .bar {
-        width: 100px;
-        height: 100px;
-        border-radius: 50%;
-        animation: bounceY 1.2s ease-in-out infinite alternate;
-        opacity: 0.8;
-        z-index: 2;
-      }
-
-      .bar.red { background-color: red; animation-delay: 0s; }
-      .bar.green { background-color: yellow; animation-delay: 0.7s; }
-      .bar.yellow { background-color: green; animation-delay: 1.4s; }
-      .bar.blue { background-color: rgb(22, 22, 240); animation-delay: 2.1s; }
-
-      @keyframes bounceY {
-        from {
-          transform: translateY(200px);
-        }
-        to {
-          transform: translateY(-60px);
-        }
-      }
-
-      /* On hover over hero-section, speed up bars */
-      #hero-section:hover .bar {
-        animation-duration: 0.9s;
-      }
-
-      #hero-section h1{
-        font-size: 5rem;
-        font-family: 'Bitcount';
-        margin-bottom: 2%;
-        z-index: 10;
-      }
-      #hero-section h3{
-        font-family: 'Oooh Baby';
-        font-size: 2rem;
-        color: #EFEFFE;
-        /* text-decoration: underline wavy; */
-      }
-      #footer{
-        height: 20%;
-        width: 100%;
-        margin-top: 0;
-        /* background-color: green; */
-      }
\ No newline at end of file
diff --git a/styles/themes.css b/styles/themes.css
index ef70bc4f..a771ee33 100644
--- a/styles/themes.css
+++ b/styles/themes.css
@@ -40,4 +40,41 @@
     background-color: var(--text-color);
     color: var(--bg-color);
   }
+  /* --- NAVIGATION --- */
+
+/* Mobile-first: hide nav list */
+.nav__list {
+  display: none;
+  flex-direction: column;
+  gap: 1rem;
+  position: absolute;
+  top: 60px; /* adjust if needed */
+  right: 20px;
+  background-color: var(--card-bg);
+  padding: 1rem;
+  border-radius: 8px;
+  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
+  z-index: 10;
+}
+
+/* Show when open */
+.nav__list.open {
+  display: flex;
+}
+
+/* Desktop view */
+@media (min-width: 768px) {
+  .nav__list {
+    display: flex !important;
+    position: static;
+    flex-direction: row;
+    background: none;
+    box-shadow: none;
+  }
+
+  #navToggle {
+    display: none;
+  }
+}
+
   
\ No newline at end of file