diff --git a/index.css b/index.css
index 02b3d1b..d1ec05d 100644
--- a/index.css
+++ b/index.css
@@ -1,8 +1,70 @@
 @import "https://fonts.googleapis.com/css?family=Shrikhand";
 @import "https://fonts.googleapis.com/css?family=Sansita+One";
-@import 'https://fonts.googleapis.com/css?family=Bungee+Inline';
+/* @import 'https://fonts.googleapis.com/css?family=Bungee+Inline'; */
 @import "https://fonts.googleapis.com/css?family=Mali";
-@import "https://fonts.googleapis.com/css?family=Unica+One";
+/* @import "https://fonts.googleapis.com/css?family=Unica+One"; */
+@import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap";
+
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+/* .header {
+	border-bottom: 1px solid #E2E8F0;
+} */
+
+.navbar {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 1rem 1.5rem;
+}
+
+.hamburger {
+	display: none;
+}
+
+.bar {
+	display: block;
+	width: 25px;
+	height: 3px;
+	margin: 5px auto;
+	-webkit-transition: all 0.3s ease-in-out;
+	transition: all 0.3s ease-in-out;
+	background-color: #101010;
+}
+
+.nav-menu {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.nav-item {
+	margin-left: 5rem;
+}
+
+.nav-link {
+	font-size: 1.6rem;
+	font-weight: 400;
+	color: #475569;
+}
+
+.nav-link:hover {
+	color: #482ff7;
+}
+
+.nav-logo {
+	font-size: 2.1rem;
+	font-weight: 500;
+	color: #482ff7;
+}
+
+li {
+	list-style-type: none;
+}
 
 html {
 	font-size: large !important;
@@ -16,39 +78,47 @@ a {
 	text-decoration: none;
 	color: #466c95;
 }
+
 a:visited {
 	text-decoration: none;
 	color: #466c95;
 }
+
 a:hover {
 	text-decoration: none;
 	color: #466c95;
 	/* background-color: #f6f49d; */
 }
+
 a:focus {
 	text-decoration: none;
 	color: #466c95;
 	background-color: #f6f49d;
 }
+
 a:hover,
 a:active {
 	text-decoration: none;
 	color: #466c95;
 }
+
 .description a {
 	background-color: #fffec4;
 	padding: 2.1px;
 }
+
 header .external-links {
 	margin-top: 1em;
 	margin-left: 0.42em;
 }
+
 header .external-links li {
 	display: inline;
 	font-size: 1.35em;
 	padding: 0.21em;
-	font-family: 'Unica One';
+	font-family: 'Open Sans', sans-serif;
 }
+
 h1 {
 	font-family: 'Shrikhand';
 	font-size: 4.2em;
@@ -56,6 +126,7 @@ h1 {
 	max-width: 642px;
 	color: rgb(218, 156, 253);
 }
+
 h2 {
 	font-family: 'Sansita One';
 	font-size: 3.642em;
@@ -83,6 +154,7 @@ h3 {
 main {
 	min-height: 90vh;
 }
+
 /* 
 .headshot {
 	border-radius: 50%;
@@ -105,7 +177,10 @@ main {
 	-webkit-align-items: center;
 	-ms-flex-align: center;
 	align-items: center;
+	/* For on top of Dixie Korley, Data Analyst*/ 
+	margin-top: 7%;
 }
+
 .center-of-screen .description {
 	font-family: 'Mali';
 	font-weight: 742;
@@ -114,25 +189,91 @@ main {
 	max-width: 560px;
 	text-align: left;
 	line-height: 2em;
+	/*For under the scroll dots*/
+	margin-bottom: 5em;
 }
+
 .description .slick-dots li button:before {
 	color: rgb(218, 156, 253);
+	
 }
+
 .description .slick-dots li button {
 	color: rgb(218, 156, 253);
 }
-@media (max-width: 584px) {
+
+@media only screen and (max-width: 768px) {
 	h1 {
 		font-size: 2.5em;
 	}
+
 	h2 {
 		font-size: 2.142em;
 	}
+
 	ul {
 		margin-bottom: 25%;
 	}
+
+	.center-of-screen {
+		padding-top: 2em;
+	}
+
 	.center-of-screen .description {
+		/*For the width of the body page*/
+		/* max-width: 330px; */
 		max-width: 330px;
 	}
 
+
+
+.nav-menu {
+	position: fixed;
+	left: -100%;
+	top: 5rem;
+	flex-direction: column;
+	background-color: #fff;
+	width: 100%;
+	border-radius: 10px;
+	text-align: center;
+	transition: 0.3s;
+	box-shadow:
+	0 10px 27px rgba(0, 0, 0, 0.05);
+	/* Attempting to fix background issue*/
+	z-index: 10;
+}
+
+
+
+.nav-menu.active {
+	left: 0;
+
 }
+
+.nav-item {
+	margin: 2.5rem 0;
+}
+
+
+.hamburger {
+	display: block;
+	cursor: pointer;
+	right: 0;
+	
+}
+
+
+.hamburger.active .bar:nth-child(2) {
+	opacity: 0;
+}
+
+.hamburger.active .bar:nth-child(1) {
+	transform: translateY(8px) rotate(45deg);
+}
+
+.hamburger.active .bar:nth-child(3) {
+	transform: translateY(-8px) rotate(-45deg);
+}
+
+}
+
diff --git a/index.html b/index.html
index 9efbb75..09c35e5 100644
--- a/index.html
+++ b/index.html
@@ -14,11 +14,50 @@
 </head>
 
 <body>
-	<header>
-		<ul class="external-links">
-			<li><a target="_blank" href="https://github.com/DixieKorley"><img src="./github.png" alt="github" width="32"
-						height="32"></a></li>
-		</ul>
+	<header class="header">
+		<nav class="navbar">
+			<!--Social media icon items-->
+			<!-- <ul class="external-links">
+				<li>
+					<a target="_blank" href="https://github.com/DixieKorley"><img src="./github.png" alt="github"
+							width="32" height="32"></a>
+				</li>
+				<li>
+					<a target="_blank" href="https://github.com/DixieKorley"><img src="./github.png" alt="github"
+							width="32" height="32"></a>
+				</li>
+			</ul> -->
+			<!--Hamburger non active menu items-->
+			<a target="_blank" href="https://github.com/DixieKorley"><img src="./github.png" alt="github" width="32"
+						height="32"></a>
+			<ul class="nav-menu">
+		
+			
+					
+				<li class="nav-item">
+					<a class="nav-link" href="index.html#education">Education</a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link" href="index.html#experience">Experience</a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link" href="index.html#portfolio" >Portfolio</a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link" href="index.html#skills" >Skills</a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link" href="index.html#contact" >Contact</a>
+				</li>
+			</ul>
+			<!--Hamburger active menu items-->
+			<div class="hamburger">
+				<span class="bar"></span>
+				<span class="bar"></span>
+				<span class="bar"></span>
+			</div>
+		</nav>
+
 	</header>
 
 	<!--
@@ -32,24 +71,14 @@
 				<h1>Dixie Korley</h1>
 			</a>
 			<h2>Data Analyst</h2>
-			<br>
-			<nav>
-				<!-- <a class="nav-links" href="index.html#brief">
-					About
-				</a> -->
-				<a class="nav-links" href="index.html#skills">Skills</a>
-				<a class="nav-links" href="index.html#portfolio">Portfolio</a>
-				<a class="nav-links" href="index.html#experience">Experience</a>
-				<a class="nav-links" href="index.html#education">Education</a>
-				<a class="nav-links" href="index.html#contact">Contact</a>
-			</nav>
 			<div class="description">
 				<div id="brief">
 					<h3>Welcome</h3>
+					<br>
 					<p>I am an IT Help Desk Technician searching for a data analyst position.</p>
 					<p></p>Hello there! I'm Dixie, currently working in a help desk role and aspiring to transition into
 					the dynamic field of data analysis. I am working on getting my CompTIA Data+ certification.</p>
-					<p></p>I believe in
+					<p></p>I believe in <a href="index.html#education">Education</a>
 					continuous learning and improvement and constantly seek opportunities to enhance my skills. If you
 					have any insights, advice, or potential collaborations related to data analysis, I'd love to
 					connect.</p>
@@ -59,6 +88,7 @@ <h3>Welcome</h3>
 				</div>
 				<div id="skills">
 					<h3>Skills</h3>
+					<br>
 					<p>Languages - <em>Python</em></p>
 					<p></p>SQL</p>
 					<p>Excel</p>
@@ -72,6 +102,7 @@ <h3>Study Mode</h3>
 
 				<div id="portfolio">
 					<h3>Portfolio</h3>
+					<br>
 					<p>Here are some projects of mine, for more, check out my <a target="_blank"
 							href="https://github.com/DixieKorley">GitHub</a>:</p>
 					<ul>
@@ -80,6 +111,7 @@ <h3>Portfolio</h3>
 				</div>
 				<div id="experience">
 					<h3>Experience</h3>
+					<br>
 					<p>I'm n IT Help Desk Technician at <a target="_blank" href="https://lambdaschool.com/">Public
 							Service Enterprice Group</a>. Here is what got me there:</p>
 					<ul>
@@ -96,6 +128,7 @@ <h3>Experience</h3>
 				</div>
 				<div id="education">
 					<h3>Education</h3>
+					<br>
 					<p>I'm n IT Help Desk Technician at <a target="_blank" href="https://lambdaschool.com/">Public
 							Service Enterprice Group</a>. Here is what got me there:</p>
 					<ul>
@@ -106,24 +139,47 @@ <h3>Education</h3>
 					</ul>
 				</div>
 				<div id="contact">
+					<br>
 					<h3>Let's Chat</h3>
 					<p>Email</p>
 					<p>Social media links</p>
+					<a target="_blank" href="https://github.com/DixieKorley"><img src="./github.png" alt="github" width="32"
+						height="32"></a>
 				</div>
 			</div>
 		</center>
-		</center>
 	</main>
 	<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
 	<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
 	<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
-	<script>
+	<script defer>
 		$(document).ready(function () {
 			$('.description').slick({
 				dots: true
 			});
 		});
+
+	
+	
+
+		const hamburger = document.querySelector(".hamburger");
+		const navMenu = document.querySelector(".nav-menu");
+		const navLink = document.querySelector(".nav-link");
+
+
+	
+		//FIX A LINKS
+		// navLink.addEventListener("click",);
+	
+
+		hamburger.addEventListener("click", mobileMenu);
+		function mobileMenu() {
+			hamburger.classList.toggle("active");
+			navMenu.classList.toggle("active");
+			
+		}
+
 	</script>
 </body>
 
-</html>
+</html>
\ No newline at end of file