diff --git a/css/style.css b/css/style.css
index 5851628..d36b448 100644
--- a/css/style.css
+++ b/css/style.css
@@ -60,6 +60,7 @@ section {
 #menu-icon {
   font-size: 3.6rem;
   color: var(--text-color);
+  display: none;
 }
 
 .home {
@@ -74,6 +75,20 @@ section {
   border: 1px solid var(--main-color);
   box-shadow: 0 0 5rem var(--main-color);
 }
+.home-img img {
+  animation: floatImage 2.5s ease-in-out infinite;
+}
+@keyframes floatImage {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-2.5rem);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
 .home-content h3 {
   font-size: 3.2rem;
   font-weight: 700;
@@ -318,3 +333,110 @@ span {
 .footer-iconTop a:hover {
   box-shadow: 0 0 1rem var(--main-color);
 }
+.header.sticky {
+  border-bottom: 0.1rem solid rgba(0, 0, 0, 0.2);
+}
+
+/* Responsive Design */
+
+@media (max-width: 1200px) {
+  html {
+    font-size: 55%;
+  }
+}
+@media (max-width: 991px) {
+  .header {
+    padding: 2rem 3%;
+  }
+  section {
+    padding: 10rem 3% 2rem;
+  }
+  .services {
+    padding-bottom: 7rem;
+  }
+  .portfolio {
+    padding-bottom: 7rem;
+  }
+  .contact {
+    min-height: auto;
+  }
+  footer {
+    padding: 2rem 3%;
+  }
+}
+@media (max-width: 768px) {
+  #menu-icon {
+    display: block;
+  }
+  .navBar {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    padding: 1rem 3%;
+    background: var(--bg-color);
+    border-top: 0.1rem solid rgba(0, 0, 0, 0.2);
+    box-shadow: 0 0.5rem 1 rgba(0, 0, 0, 0.2);
+    display: none;
+  }
+  .navBar.active {
+    display: block;
+  }
+  .navBar a {
+    display: block;
+    font-size: 2rem;
+    margin: 3rem 0;
+  }
+  .home {
+    flex-direction: column;
+  }
+  .home-content h3 {
+    font-size: 2.6rem;
+  }
+  .home-content h1 {
+    font-size: 5rem;
+  }
+  .home-img img,
+  .about-img img {
+    width: 50vw;
+    margin-top: 4rem;
+  }
+  .about {
+    flex-direction: column-reverse;
+  }
+  .services h2 {
+    margin-bottom: 3rem;
+  }
+  .portfolio h2 {
+    margin-bottom: 3rem;
+  }
+  .portfolio-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 617px) {
+  .portfolio-container {
+    grid-template-columns: 1fr;
+  }
+}
+@media (max-width: 450px) {
+  html {
+    font-size: 50%;
+  }
+  .contact form .input-box input {
+    width: 100%;
+  }
+}
+@media (max-width: 365px) {
+  .home-img img,
+  .about-img img {
+    width: 90vw;
+  }
+  .footer {
+    flex-direction: column-reverse;
+  }
+  .footer p {
+    text-align: center;
+    margin-top: 2rem;
+  }
+}
diff --git a/images/IMG_0238.JPG b/images/IMG_0238.JPG
deleted file mode 100644
index 984af85..0000000
Binary files a/images/IMG_0238.JPG and /dev/null differ
diff --git a/images/me1.png b/images/me1.png
new file mode 100644
index 0000000..ae3fd9b
Binary files /dev/null and b/images/me1.png differ
diff --git a/images/me2.png b/images/me2.png
new file mode 100644
index 0000000..2d8878d
Binary files /dev/null and b/images/me2.png differ
diff --git a/images/sadasdsadasd.jpg b/images/sadasdsadasd.jpg
deleted file mode 100644
index bbfbc1c..0000000
Binary files a/images/sadasdsadasd.jpg and /dev/null differ
diff --git a/index.html b/index.html
index 65e8dd0..87ee177 100644
--- a/index.html
+++ b/index.html
@@ -34,7 +34,7 @@
       <div class="home-content">
         <h3>Hello, Its Me</h3>
         <h1>Saleh</h1>
-        <h3>And I'm a <span>Front Developer</span></h3>
+        <h3>And I'm <span class="multiple-text"></span></h3>
         <p>Athlete elementary Teacher who loves Coding...</p>
         <div class="social-media">
           <a href="#"><i class="bx bxl-telegram"></i></a>
@@ -46,14 +46,14 @@ <h3>And I'm a <span>Front Developer</span></h3>
       </div>
 
       <div class="home-img">
-        <img src="images/IMG_0238.JPG" alt="home-img" />
+        <img src="images/me1.png" alt="home-img" />
       </div>
     </section>
 
     <!-- About Section Design -->
     <section class="about" id="about">
       <div class="about-img">
-        <img src="images/sadasdsadasd.jpg" alt="about" />
+        <img src="images/me2.png" alt="about" />
       </div>
 
       <div class="about-content">
@@ -207,6 +207,9 @@ <h2 class="heading">Contact <span>Me!</span></h2>
       </div>
     </footer>
     <!-- Js -->
+    <script src="https://unpkg.com/scrollreveal"></script>
+    <script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>
+
     <script src="./js/app.js"></script>
   </body>
 </html>
diff --git a/js/app.js b/js/app.js
index e69de29..ca4017e 100644
--- a/js/app.js
+++ b/js/app.js
@@ -0,0 +1,57 @@
+const $ = document;
+let sections = $.querySelectorAll("section");
+let navLinks = $.querySelectorAll("header nav a");
+let header = $.querySelector("header");
+let menuIcon = $.querySelector("#menu-icon");
+let navBar = $.querySelector(".navBar");
+window.addEventListener("scroll", () => {
+  sections.forEach((section) => {
+    let top = window.scrollY;
+    let offset = section.offsetTop - 150;
+    let height = section.offsetHeight;
+    let id = section.getAttribute("id");
+
+    if (top >= offset && top < offset + height) {
+      navLinks.forEach((link) => {
+        link.classList.remove("active");
+        $.querySelector("header nav a[href*=" + id + " ]").classList.add(
+          "active"
+        );
+      });
+    }
+  });
+  menuIcon.classList.remove("bx-x");
+  navBar.classList.remove("active");
+});
+
+header.classList.toggle("sticky", window.scrollY > 100);
+
+menuIcon.addEventListener("click", () => {
+  menuIcon.classList.toggle("bx-x");
+  navBar.classList.toggle("active");
+});
+
+ScrollReveal({
+  reset: true,
+  distance: "80px",
+  duration: 2000,
+  delay: 200,
+});
+
+ScrollReveal().reveal(".home-content, .heading", { origin: "top" });
+ScrollReveal().reveal(
+  ".home-img, .services-container, .portfolio-box, .contact form",
+  {
+    origin: "bottom",
+  }
+);
+ScrollReveal().reveal(".home-content h1, .about-img", { origin: "left" });
+ScrollReveal().reveal(".home-content p, .about-content", { origin: "right" });
+
+const typed = new Typed(".multiple-text", {
+  strings: ["Frontend Developer", "Teacher", "Athlete"],
+  typeSpeed: 100,
+  backSpeed: 100,
+  backDelay: 1000,
+  loop: true,
+});