diff --git a/index.html b/index.html
index 631160a..c1a6e52 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
 <link href='https://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet'>
 <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
-  
+<script src="https://unpkg.com/typed.js@2.0.15/dist/typed.umd.js"></script>
 </head> 
 
 <body onload="loader_off()">
@@ -52,8 +52,9 @@
         <!-- leftside code -->
         <div class="hero-leftside">
             
-            <h1>The smarter, faster, greener way to get around campus.</h1>
-            <p>Zip around campus sustainably with our electric scooter service. Download our app to rent and ride hassle-free!</p>
+            <h1><span class="hero-text"></span></h1>
+            <p>Zip around campus sustainably with our electric scooter service.
+                 Download our app to rent and ride hassle-free!</p>
             <div class="button-group">
             <a href="#">
                 <img src="images/google-play.png" alt="Playstore" class="playstore">
@@ -93,19 +94,19 @@ <h2>Our Services</h2>
         <div class="section-services-task">
         <div class="task-1">
             <img src="images/2.png">
-            <h3>EV Scooter</h3>
+            <h3><span class="scooter"></span></h3>
             <p>This service provides electric scooters specifically designed for students and staff members within the university
             campus.</p>
         </div>
         <div class="task-2">
             <img src="images/1.png">
-            <h3>Goods Delivery</h3>
+            <h3><span class="goods"></span></h3>
             <p>This service focuses on transporting luggage and belongings for students, staff, and visitors within the university
             campus.</p>
         </div>
         <div class="task-3">
             <img src="images/3.png">
-            <h3>University Shuttle</h3>
+            <h3><span class="university"></span></h3>
             <p>This service provides convenient transportation for students, staff, and visitors within the university campus.</p>
         </div>
         </div>
@@ -128,6 +129,7 @@ <h2>SPOTS</h2>
         </section>
 <!-- Section for contact us -->
         <section id='contact' class="contact">
+            
             <h2 class="text-center">Contact Us</h2>
             <form method="post" action="" name="contact-form" class="form" id="contact-form">
                 <input class="form-input" type="text" name="name" id="name" placeholder="Enter your name">
diff --git a/index.js b/index.js
index c153594..46368e7 100644
--- a/index.js
+++ b/index.js
@@ -1,3 +1,45 @@
+// JS for hero section h1 
+var typed=new Typed(".hero-text",{
+  strings:["The smarter, faster, greener way to get around campus."],
+  typeSpeed:100,
+  backSpeed:100,
+  backDelay:1000,
+  loop:true
+
+
+});
+
+// JS for services section divs h3
+var typed=new Typed(".scooter",{
+  strings:["EV Scooter"],
+  typeSpeed:170,
+  backSpeed:100,
+  backDelay:1000,
+  loop:true
+
+
+});
+// JS for services section divs h3
+var typed=new Typed(".goods",{
+  strings:["Goods Delivery"],
+  typeSpeed:120,
+  backSpeed:100,
+  backDelay:1000,
+  loop:true
+
+
+});
+// JS for services section divs h3
+var typed=new Typed(".university",{
+  strings:["University Shuttle"],
+  typeSpeed:100,
+  backSpeed:100,
+  backDelay:1000,
+  loop:true
+
+
+});
+
 const mobile_nav = document.querySelector(".mobile-navbar-btn");
 const nav_header = document.querySelector(".header");
 var links=document.querySelectorAll(".header .navbar .navbar-list li")
diff --git a/style.css b/style.css
index 330c0f6..58afc74 100644
--- a/style.css
+++ b/style.css
@@ -217,7 +217,9 @@ Hero section
     }
 }
 .section-hero .hero-leftside {
+    margin-left: -2rem;
     width: 60%;
+    
     align-items: flex-start;
     display: flex;
     justify-content: flex-start;
@@ -228,10 +230,16 @@ Hero section
     animation-timing-function: ease;
     animation-fill-mode: forwards;
 }
+.hero-leftside h1{
+    
+    height: 10rem;
+
+}
 .hero-rightside img{
     width: 600px;
     height:600px;
 }
+
 @keyframes fadein {
     0%{
         opacity: 0;
@@ -265,6 +273,7 @@ Hero section
 }
 
 .section-about .right-side{
+    margin-left: 4rem;
     width: inherit;
     height: inherit;
     display: flex;
@@ -382,6 +391,8 @@ Hero section
     flex-direction: column;
 }
 
+
+
 .text-center {
     text-align: center;
     padding-top: 30px;
@@ -446,6 +457,7 @@ Hero section
 
 }
 
+
 /* ===========================================
 Responsive Codes 
 ======================================= */
