diff --git a/public/logos/logo.png b/public/logos/logo.png
new file mode 100644
index 0000000..bc1aca4
Binary files /dev/null and b/public/logos/logo.png differ
diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx
index 3316a2c..2dbd151 100644
--- a/src/components/footer/Footer.jsx
+++ b/src/components/footer/Footer.jsx
@@ -1,58 +1,67 @@
-import React, { useEffect, useRef, useState } from 'react';
-import styles from './Footer.module.css';
+import React, { useEffect, useRef, useState } from "react";
+import styles from "./Footer.module.css";
+import logo from "/logos/logo.png";
 
 function Footer() {
-  const [isVisible, setIsVisible] = useState(false);
-  const footerRef = useRef(null);
+	const [isVisible, setIsVisible] = useState(false);
+	const footerRef = useRef(null);
 
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        setIsVisible(entry.isIntersecting);
-      },
-      {
-        root: null,
-        rootMargin: "0px",
-        threshold: 0.1
-      }
-    );
+	useEffect(() => {
+		const observer = new IntersectionObserver(
+			([entry]) => {
+				setIsVisible(entry.isIntersecting);
+			},
+			{
+				root: null,
+				rootMargin: "0px",
+				threshold: 0.1,
+			}
+		);
 
-    if (footerRef.current) {
-      observer.observe(footerRef.current);
-    }
+		if (footerRef.current) {
+			observer.observe(footerRef.current);
+		}
 
-    return () => {
-      if (footerRef.current) {
-        observer.unobserve(footerRef.current);
-      }
-    };
-  }, []);
+		return () => {
+			if (footerRef.current) {
+				observer.unobserve(footerRef.current);
+			}
+		};
+	}, []);
 
-  return (
-    <footer ref={footerRef} className={`${styles.footer} ${isVisible ? styles.visible : ''}`}>
-      <div className={styles.content}>
-        <div className={styles.topSection}>
-          <div className={styles.logo}>
-            LOGO
-          </div>
-          <div className={styles.contact}>
-            <h3>Contact</h3>
-            <p>Email: your.email@example.com</p>
-            <p>Phone: (123) 456-7890</p>
-          </div>
-          <div className={styles.social}>
-            <h3>Social</h3>
-            <a href="https://linkedin.com/in/yourprofile" target="_blank" rel="noopener noreferrer">LinkedIn</a>
-            <a href="https://github.com/yourusername" target="_blank" rel="noopener noreferrer">GitHub</a>
-            <a href="https://twitter.com/yourusername" target="_blank" rel="noopener noreferrer">Twitter</a>
-          </div>
-        </div>
-        <div className={styles.bottomSection}>
-          <a href="/path-to-your-resume.pdf" target="_blank" rel="noopener noreferrer" className={styles.resumeLink}>Download Resume (PDF)</a>
-        </div>
-      </div>
-    </footer>
-  );
+	return (
+		<footer ref={footerRef} className={`${styles.footer} ${isVisible ? styles.visible : ""}`}>
+			<div className={styles.content}>
+				<div className={styles.topSection}>
+					<div className={styles.logo}>
+						<img src={logo} alt="MN logo" className={styles.logoImage} />
+					</div>
+					<div className={styles.contact}>
+						<h3>Contact</h3>
+						<p>Email: your.email@example.com</p>
+						<p>Phone: (123) 456-7890</p>
+					</div>
+					<div className={styles.social}>
+						<h3>Social</h3>
+						<a href="https://linkedin.com/in/yourprofile" target="_blank" rel="noopener noreferrer">
+							LinkedIn
+						</a>
+						<a href="https://github.com/yourusername" target="_blank" rel="noopener noreferrer">
+							GitHub
+						</a>
+						<a href="https://twitter.com/yourusername" target="_blank" rel="noopener noreferrer">
+							Twitter
+						</a>
+					</div>
+				</div>
+				<div className={styles.bottomSection}>
+					<a href="/path-to-your-resume.pdf" target="_blank" rel="noopener noreferrer" className={styles.resumeLink}>
+						Download Resume (PDF)
+					</a>
+				</div>
+			</div>
+		</footer>
+	);
 }
 
-export default Footer;
\ No newline at end of file
+export default Footer;
diff --git a/src/components/footer/Footer.module.css b/src/components/footer/Footer.module.css
index 06eaece..74e5cd1 100644
--- a/src/components/footer/Footer.module.css
+++ b/src/components/footer/Footer.module.css
@@ -1,99 +1,109 @@
 .footer {
-  background-color: #000;
-  color: #fff;
-  padding: 40px 0;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  opacity: 0;
-  transform: translateY(50px);
-  transition: opacity 0.5s ease, transform 0.5s ease;
+	background-color: #000;
+	color: #fff;
+	padding: 40px 0;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	opacity: 0;
+	transform: translateY(50px);
+	transition: opacity 0.5s ease, transform 0.5s ease;
 }
 
 .footer.visible {
-  opacity: 1;
-  transform: translateY(0);
+	opacity: 1;
+	transform: translateY(0);
 }
 
 .content {
-  width: 75%;
-  max-width: 1200px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+	width: 75%;
+	max-width: 1200px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 }
 
 .topSection {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  margin-bottom: 2rem;
+	display: flex;
+	justify-content: center;
+	width: 100%;
+	margin-bottom: 2rem;
 }
 
-.logo, .contact, .social {
-  flex: 1;
-  padding: 0 1rem;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+.logo,
+.contact,
+.social {
+	flex: 1;
+	padding: 0 1rem;
+	text-align: center;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 }
 
 .logo {
-  font-size: 1.5em;
-  font-weight: bold;
+	/* margin-right: 40px; */
 }
 
-.contact h3, .social h3 {
-  margin-bottom: 10px;
-  color: #ff6600;
+.logoImage {
+	width: 80px; /* Adjust this value to your desired logo size */
+	height: 80px; /* Adjust this value to your desired logo size */
+	object-fit: contain;
+}
+
+.contact h3,
+.social h3 {
+	margin-bottom: 10px;
+	color: #ff6600;
 }
 
 .social a {
-  display: block;
-  color: #fff;
-  text-decoration: none;
-  margin-bottom: 5px;
-  transition: color 0.3s ease;
+	display: block;
+	color: #fff;
+	text-decoration: none;
+	margin-bottom: 5px;
+	transition: color 0.3s ease;
 }
 
 .social a:hover {
-  color: #ff6600;
+	color: #ff6600;
 }
 
 .bottomSection {
-  text-align: center;
-  width: 100%;
+	text-align: center;
+	width: 100%;
 }
 
 .resumeLink {
-  color: #fff;
-  text-decoration: none;
-  padding: 10px 20px;
-  border: 1px solid #ff6600;
-  border-radius: 5px;
-  transition: background-color 0.3s ease, color 0.3s ease;
-  display: inline-block;
+	color: #fff;
+	text-decoration: none;
+	padding: 10px 20px;
+	border: 1px solid #ff6600;
+	border-radius: 5px;
+	transition: background-color 0.3s ease, color 0.3s ease;
+	display: inline-block;
 }
 
 .resumeLink:hover {
-  background-color: #ff6600;
-  color: #000;
+	background-color: #ff6600;
+	color: #000;
 }
 
 @media (max-width: 768px) {
-  .topSection {
-    flex-direction: column;
-  }
+	.topSection {
+		flex-direction: column;
+	}
 
-  .logo, .contact, .social {
-    width: 100%;
-    margin-bottom: 2rem;
-    padding: 0;
-  }
+	.logo,
+	.contact,
+	.social {
+		width: 100%;
+		margin-bottom: 2rem;
+		padding: 0;
+	}
 
-  .bottomSection {
-    margin-top: 1rem;
-  }
-}
\ No newline at end of file
+	.bottomSection {
+		margin-top: 1rem;
+	}
+}
diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
index 13aec59..5a522e1 100644
--- a/src/components/header/Header.jsx
+++ b/src/components/header/Header.jsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import styles from "./Header.module.css";
+import logo from "/logos/logo.png";
 
 function Header() {
 	const [isNavVisible, setIsNavVisible] = useState(false);
@@ -12,7 +13,7 @@ function Header() {
 		<header className={styles.header}>
 			<div className={styles.container}>
 				<div className={styles.logo}>
-					<span>LOGO</span>
+					<img src={logo} alt="MN logo" className={styles.logoImage} />
 				</div>
 				<div className={`${styles.hamburger} ${isNavVisible ? styles.active : ""}`} onClick={toggleNav}>
 					<span></span>
diff --git a/src/components/header/Header.module.css b/src/components/header/Header.module.css
index 65a2c5f..4b1c119 100644
--- a/src/components/header/Header.module.css
+++ b/src/components/header/Header.module.css
@@ -1,140 +1,156 @@
 .header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  background-color: #000;
-  color: #fff;
-  padding: 10px 0;
-  z-index: 1000;
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	background-color: #000;
+	color: #fff;
+	padding: 10px 0;
+	z-index: 1000;
 }
 
 .container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 0 20px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
 }
 
 .logo {
-  font-size: 1.5em;
-  font-weight: bold;
+	display: flex;
+	align-items: center;
+}
+
+.logoImage {
+	width: 50px; /* Adjust this value to your desired logo size */
+	height: 50px; /* Adjust this value to your desired logo size */
+	object-fit: contain;
 }
 
 .nav {
-  display: flex;
-  align-items: center;
+	display: flex;
+	align-items: center;
 }
 
 .navList {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
+	list-style-type: none;
+	padding: 0;
+	margin: 0;
+	display: flex;
 }
 
 .navList li {
-  margin-left: 20px;
+	margin-left: 20px;
 }
 
 .navList li a {
-  color: #fff;
-  text-decoration: none;
-  padding: 5px 10px;
-  transition: color 0.3s ease;
+	color: #fff;
+	text-decoration: none;
+	padding: 5px 10px;
+	transition: color 0.3s ease;
 }
 
 .navList li a:hover {
-  color: #ff6600;
+	color: #ff6600;
 }
 
 .hamburger {
-  display: none;
-  flex-direction: column;
-  justify-content: space-around;
-  width: 30px;
-  height: 25px;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  z-index: 10;
+	display: none;
+	flex-direction: column;
+	justify-content: space-around;
+	width: 30px;
+	height: 25px;
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	padding: 0;
+	z-index: 10;
 }
 
 .hamburger span {
-  width: 30px;
-  height: 3px;
-  background: #fff;
-  border-radius: 10px;
-  transition: all 0.3s linear;
-  position: relative;
-  transform-origin: 1px;
+	width: 30px;
+	height: 3px;
+	background: #fff;
+	border-radius: 10px;
+	transition: all 0.3s linear;
+	position: relative;
+	transform-origin: 1px;
 }
 
 .hamburger.active span:first-child {
-  transform: rotate(45deg);
+	transform: rotate(45deg);
 }
 
 .hamburger.active span:nth-child(2) {
-  opacity: 0;
+	opacity: 0;
 }
 
 .hamburger.active span:nth-child(3) {
-  transform: rotate(-45deg);
+	transform: rotate(-45deg);
 }
 
 @media (max-width: 768px) {
-  .hamburger {
-    display: flex;
-  }
+	.hamburger {
+		display: flex;
+	}
 
-  .nav {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.9);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.3s ease-out;
-  }
+	.nav {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.9);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity 0.3s ease-out;
+	}
 
-  .navVisible {
-    opacity: 1;
-    pointer-events: auto;
-  }
+	.navVisible {
+		opacity: 1;
+		pointer-events: auto;
+	}
 
-  .navList {
-    flex-direction: column;
-    align-items: center;
-  }
+	.navList {
+		flex-direction: column;
+		align-items: center;
+	}
 
-  .navList li {
-    margin: 15px 0;
-    opacity: 0;
-    transform: translateY(-20px);
-    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
-  }
+	.navList li {
+		margin: 15px 0;
+		opacity: 0;
+		transform: translateY(-20px);
+		transition: opacity 0.3s ease-out, transform 0.3s ease-out;
+	}
 
-  .navVisible .navList li {
-    opacity: 1;
-    transform: translateY(0);
-  }
+	.navVisible .navList li {
+		opacity: 1;
+		transform: translateY(0);
+	}
 
-  .navVisible .navList li:nth-child(1) { transition-delay: 0.1s; }
-  .navVisible .navList li:nth-child(2) { transition-delay: 0.2s; }
-  .navVisible .navList li:nth-child(3) { transition-delay: 0.3s; }
-  .navVisible .navList li:nth-child(4) { transition-delay: 0.4s; }
-  .navVisible .navList li:nth-child(5) { transition-delay: 0.5s; }
+	.navVisible .navList li:nth-child(1) {
+		transition-delay: 0.1s;
+	}
+	.navVisible .navList li:nth-child(2) {
+		transition-delay: 0.2s;
+	}
+	.navVisible .navList li:nth-child(3) {
+		transition-delay: 0.3s;
+	}
+	.navVisible .navList li:nth-child(4) {
+		transition-delay: 0.4s;
+	}
+	.navVisible .navList li:nth-child(5) {
+		transition-delay: 0.5s;
+	}
 
-  .navList li a {
-    font-size: 1.5em;
-    padding: 10px 0;
-  }
-}
\ No newline at end of file
+	.navList li a {
+		font-size: 1.5em;
+		padding: 10px 0;
+	}
+}