diff --git a/css/style.css b/css/style.css
index bd698c1..21b7b36 100644
--- a/css/style.css
+++ b/css/style.css
@@ -117,6 +117,17 @@ a:visited {
   color: #01b3af;
 }
 
+.home .container #role
+{
+  color: #272341;
+}
+
+.home .container .typed-cursor
+{
+  color: #272341  ;
+}
+
+
 .home .container a.button {
   position: relative;
   display: flex;
@@ -651,4 +662,4 @@ a:visited {
   .footer{
     font-size: 12.5px;
   }
-}
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index bc4d3db..8c19a5c 100644
--- a/index.html
+++ b/index.html
@@ -4,16 +4,17 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Minifolio</title>
-    <link rel="shortcut icon" href="Minifolio.png" type="image/x-icon">
+    <link rel="shortcut icon" href="Minifolio.png" type="image/x-icon" />
     <link rel="stylesheet" href="css/style.css" />
     <script src="https://unpkg.com/ionicons@latest/dist/ionicons.js"></script>
     <link rel="stylesheet" href="css/button.css" />
+    <script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>
+    <link rel="stylesheet" href="button.css" />
   </head>
   <body>
     <div class="home">
       <div class="container">
-        Hi, my name is <span>Your Name</span> <br />I'm the Unknown Developer
-        <br />
+        Hi, my name is <span>Your Name</span> <br />I'm <span id="role"> </span>
         <a class="button" href="#about">Know more</a>
       </div>
     </div>
@@ -99,8 +100,11 @@
 
     <div class="footer">
       <!--since 'span' is an inline element so all the spans are displayed in one line one after the other, if we use 'div' then all the elements will apper in different boxes (try it out )-->
-      <span>Copyright ©<span id="copyright-year"></span> All Rights Reserved | </span>
-      <span>&nbsp;Template Developed With 
+      <span
+        >Copyright ©<span id="copyright-year"></span> All Rights Reserved |
+      </span>
+      <span
+        >&nbsp;Template Developed With
         <span class="icon-heart">❤️</span>
         By
       </span>
@@ -108,7 +112,8 @@
         <a href="https://github.com/divyanshudhruv">&nbsp;Divyanshu Dhruv</a>
       </span>
     </div>
-    <script src="/js/script.js"></script>
-    <script src="/js/copyRight.js"></script>
+    <script src="js/script.js"></script>
+    <script src="js/typingAnimation.js"></script>
+    <script src="js/copyRight.js"></script>
   </body>
 </html>
diff --git a/js/typingAnimation.js b/js/typingAnimation.js
new file mode 100644
index 0000000..808f337
--- /dev/null
+++ b/js/typingAnimation.js
@@ -0,0 +1,7 @@
+// Custom the typed strings array based on your roles
+var typed = new Typed("#role", {
+  strings: ["the Unknown Developer", "a UI/UX Designer", "a Youtuber"],
+  typeSpeed: 210,
+  backSpeed: 40,
+  loop: true,
+});
