diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 40b2f78..c09fd21 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -56,31 +56,140 @@ const Navbar = () => {
 				</div>
 			</nav>
 			<div id={styles.department_bar}>
-				<span>
-					<Link href="/department/news">News</Link>
-				</span>
-				<span>
-					<Link href="/department/features">Features</Link>
-				</span>
-				<span>
-					<Link href="/department/opinions">Opinions</Link>
-				</span>
-				<span>
+				<div className={styles.department}>
+					<span className={styles.maindepartment}>
+						<Link href="/department/news">News</Link>
+					</span>
+					<div className={styles.subdepartment}>
+						<span>
+							<Link href="/department/news/campaign-coverage">
+								Campaign Coverage
+							</Link>
+						</span>
+						<span>
+							<Link href="/department/news/israel-hamas-war">
+								Israel-Hamas War
+							</Link>
+						</span>
+					</div>
+				</div>
+				<div className={styles.department}>
+					<span className={styles.maindepartment}>
+						<Link href="/department/features">Features</Link>
+					</span>
+					<div className={styles.subdepartment}>
+						<span>
+							<Link href="/department/opinions/voices">
+								VOICES
+							</Link>
+						</span>
+						<span>
+							<Link href="/department/opinions/9-11">9/11</Link>
+						</span>
+					</div>
+				</div>
+				<div className={styles.department}>
+					<span className={styles.maindepartment}>
+						<Link href="/department/opinions">Opinions</Link>
+					</span>
+					<div className={styles.subdepartment}>
+						<span>
+							<Link href="/department/opinions/staff-editorials">
+								Staff Editorials
+							</Link>
+						</span>
+					</div>
+				</div>
+				<span className={styles.maindepartment}>
 					<Link href="/department/science">Science</Link>
 				</span>
-				<span>
-					<Link href="/department/ae">Arts & Entertainment</Link>
-				</span>
-				<span>
-					<Link href="/department/humor">Humor</Link>
-				</span>
-				<span>
-					<Link href="/department/sports">Sports</Link>
-				</span>
-				<span>
+				<div className={styles.department}>
+					<span className={styles.maindepartment}>
+						<Link href="/department/ae">Arts & Entertainment</Link>
+					</span>
+					<div className={styles.subdepartment}>
+						<span>
+							<Link href="/department/ae/fashion">Fashion</Link>
+						</span>
+						<span>
+							<Link href="/department/ae/art">Art</Link>
+						</span>
+						<span>
+							<Link href="/department/ae/culture">Culture</Link>
+						</span>
+						<span>
+							<Link href="/department/ae/film">Film</Link>
+						</span>
+						<span>
+							<Link href="/department/ae/food">Food</Link>
+						</span>
+						<span>
+							<Link href="/department/ae/literature">
+								Literature
+							</Link>
+						</span>
+						<span>
+							<Link href="/department/ae/music">Music</Link>
+						</span>
+						<span>
+							<Link href="/department/ae/television">
+								Television
+							</Link>
+						</span>
+						<span>
+							<Link href="/department/ae/theater">Theater</Link>
+						</span>
+						<span>
+							<Link href="/department/ae/thinkpiece">
+								Thinkpiece
+							</Link>
+						</span>
+						<span>
+							<Link href="/department/ae/sing!">Sing!</Link>
+						</span>
+						<span>
+							<Link href="/department/ae/stc">STC!</Link>
+						</span>
+					</div>
+				</div>
+				<div className={styles.department}>
+					<span className={styles.maindepartment}>
+						<Link href="/department/humor">Humor</Link>
+					</span>
+					<div className={styles.subdepartment}>
+						<span>
+							<Link href="/department/humor/disrespectator">
+								Disrespectator
+							</Link>
+						</span>
+						<span>
+							<Link href="/department/humor/spooktator">
+								Spooktator
+							</Link>
+						</span>
+					</div>
+				</div>
+				<div className={styles.department}>
+					<span className={styles.maindepartment}>
+						<Link href="/department/sports">Sports</Link>
+					</span>
+					<div className={styles.subdepartment}>
+						<span>
+							<Link href="/department/sports/professional-sports">
+								Professional Sports
+							</Link>
+						</span>
+						<span>
+							<Link href="/department/sports/sports-at-stuyvesant">
+								Sports At Stuy
+							</Link>
+						</span>
+					</div>
+				</div>
+				<span className={styles.maindepartment}>
 					<Link href="/department/spec-plus">Spec+</Link>
 				</span>
-				<span>
+				<span className={styles.maindepartment}>
 					<Link href="/about/recruitments">Recruitments</Link>
 				</span>
 			</div>
@@ -91,4 +200,4 @@ const Navbar = () => {
 	);
 };
 
-export default Navbar;
+export default Navbar;
\ No newline at end of file
diff --git a/styles/Navbar.module.css b/styles/Navbar.module.css
index 84f035d..212187c 100644
--- a/styles/Navbar.module.css
+++ b/styles/Navbar.module.css
@@ -34,6 +34,7 @@
 #subscribe_parent {
 	margin-left: auto;
 }
+
 #logo_container {
 	font-size: var(--large-text);
 	color: var(--primary-immutable);
@@ -41,14 +42,47 @@
 	width: 250px;
 	text-align: center;
 	position: absolute;
-	top: 32px; /* position the top  edge of the element at the middle of the parent */
-	left: 50%; /* position the left edge of the element at the middle of the parent */
+	top: 32px;
+	/* position the top  edge of the element at the middle of the parent */
+	left: 50%;
+	/* position the left edge of the element at the middle of the parent */
 
 	transform: translate(-50%, -50%);
 	cursor: pointer;
 	font-family: "Old English Text MT";
 }
 
+.subdepartment {
+	position: absolute;
+	display: none;
+	transition-delay: 1s;
+}
+
+.subdepartment span {
+	margin-top: 5px;
+	margin-bottom: 5px;
+	font-size: 1rem;
+}
+
+.department:hover .subdepartment {
+	position: absolute;
+	display: flex;
+	background-color: #3d3d3d;
+	box-shadow: 3px 3px 5px var(--secondary-nav);
+	padding: 5px 15px;
+	flex-direction: column;
+	justify-content: center;
+	transition-delay: 3s;
+}
+
+.maindepartment:hover {
+	opacity: 0.75;
+}
+
+.subdepartment span:hover {
+	opacity: 0.75;
+}
+
 #colorModeToggle {
 	grid-column-start: 4;
 	grid-column-end: 4;
@@ -65,9 +99,11 @@
 #subscribe:hover,
 #colorModeToggle:hover,
 #searchButton:hover,
+#logo_container:hover,
 .clickable_nav_element:hover {
 	opacity: 0.75;
 }
+
 #hamburgerMenu:active,
 #subscribe:active,
 #colorModeToggle:active,
@@ -81,6 +117,7 @@
 		grid-template-columns: 48px calc(100% - 188px) 56px 56px;
 		column-gap: 1.5rem;
 	}
+
 	#logo_container {
 		font-size: 2rem;
 		position: static;
@@ -93,14 +130,17 @@
 		width: 220px;
 		text-align: center;
 	}
+
 	#subscribe_parent {
 		display: none;
 	}
+
 	#colorModeToggle {
 		grid-column-start: 3;
 		grid-column-end: 3;
 		place-self: center;
 	}
+
 	#searchButton {
 		grid-column-start: 4;
 		grid-column-end: 4;
@@ -138,4 +178,4 @@
 
 .clickable_nav_element {
 	cursor: pointer;
-}
+}
\ No newline at end of file