diff --git a/components/sections/HeroSection.tsx b/components/sections/HeroSection.tsx
index 7b9dc30..1c6fb43 100644
--- a/components/sections/HeroSection.tsx
+++ b/components/sections/HeroSection.tsx
@@ -3,7 +3,7 @@
 /* eslint-disable @next/next/no-img-element */
 import Link from "next/link";
 import { motion } from "framer-motion";
-import { useState, useEffect } from "react";
+import { TypeAnimation } from 'react-type-animation';
 
 /* eslint-disable react/jsx-no-undef */
 interface HeroSectionProps {
@@ -12,15 +12,8 @@ interface HeroSectionProps {
 
 export default function HeroSection(props: HeroSectionProps) {
   const { isMobile } = props;
-  const [words] = useState(["a hash.", "an ip.", "a malware.", "a domain."]);
-  const [currentWordIndex, setCurrentWordIndex] = useState(0);
+  const words = ["a hash.", 2000, "an ip.", 2000, "a malware.", 2000, "a domain.", 2000];
 
-  useEffect(() => {
-    const intervalId = setInterval(() => {
-      setCurrentWordIndex((currentIndex) => (currentIndex + 1) % words.length);
-    }, 3000);
-    return () => clearInterval(intervalId);
-  }, [words]);
   return (
     <>
       {isMobile ? (
@@ -31,7 +24,16 @@ export default function HeroSection(props: HeroSectionProps) {
           <div className="bg-inherit w-full flex flex-col items-center justify-center px-5">
             <h1 className="text-white text-center text-3xl leading-snug lg:leading-snug xl:leading-snug font-SpaceGrotesk font-semibold ">
               Get Threat Intelligence data about {" "}
-              <span className="text-[#00ADEF]">{words[currentWordIndex]}</span>
+              <span className="text-[#00ADEF]">
+                <TypeAnimation
+                  sequence={words}
+                  preRenderFirstString={false}
+                  wrapper="span"
+                  speed={20}
+                  style={{ fontSize: '1em', display: 'inline-block' }}
+                  repeat={Infinity}
+                />
+              </span>
             </h1>
             <h2 className=" text-white text-center text-lg mt-8 font-SpaceGrotesk font-extralight px-4">
               From multiple sources with just a{" "}
@@ -69,7 +71,16 @@ export default function HeroSection(props: HeroSectionProps) {
           <div className="bg-inherit w-4/6 flex flex-col items-left justify-center px-16">
             <h1 className="text-white text-left text-5xl lg:text-6xl xl:text-7xl leading-snug lg:leading-snug xl:leading-snug font-SpaceGrotesk font-semibold ">
               Get Threat Intelligence data about {" "}
-              <span className="text-[#00ADEF]">{words[currentWordIndex]}</span>
+              <span className="text-[#00ADEF]">
+                <TypeAnimation
+                  sequence={words}
+                  preRenderFirstString={false}
+                  wrapper="span"
+                  speed={20}
+                  style={{ fontSize: '1em', display: 'inline-block' }}
+                  repeat={Infinity}
+                />
+              </span>
             </h1>
             <h2 className=" text-white text-left text-3xl lg:text-3xl xl:text-4xl mt-8 font-SpaceGrotesk font-extralight">
               From multiple sources with just a{" "}
diff --git a/contentlayer.config.ts b/contentlayer.config.ts
index 8343d78..e8d7f0e 100644
--- a/contentlayer.config.ts
+++ b/contentlayer.config.ts
@@ -1,4 +1,4 @@
-import { defineDocumentType, makeSource } from '@contentlayer/source-files'
+import { defineDocumentType, makeSource } from 'contentlayer/source-files'
 
 export const Post = defineDocumentType(() => ({
   name: 'Post',
diff --git a/package-lock.json b/package-lock.json
index 990088c..364d5a5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-scroll": "^1.8.9",
+        "react-type-animation": "^3.2.0",
         "swiper": "^9.3.2",
         "tailwindcss": "3.3.2",
         "typescript": "5.0.4"
@@ -6154,6 +6155,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
+    },
     "node_modules/periscopic": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
@@ -6402,6 +6408,14 @@
         }
       ]
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -6443,6 +6457,16 @@
         "react-dom": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-type-animation": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-type-animation/-/react-type-animation-3.2.0.tgz",
+      "integrity": "sha512-WXTe0i3rRNKjmggPvT5ntye1QBt0ATGbijeW6V3cQe2W0jaMABXXlPPEdtofnS9tM7wSRHchEvI9SUw+0kUohw==",
+      "peerDependencies": {
+        "prop-types": "^15.5.4",
+        "react": ">= 15.0.0",
+        "react-dom": ">= 15.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -7419,6 +7443,19 @@
         "node": ">=12.20"
       }
     },
+    "node_modules/typewriter-effect": {
+      "version": "2.21.0",
+      "resolved": "https://registry.npmjs.org/typewriter-effect/-/typewriter-effect-2.21.0.tgz",
+      "integrity": "sha512-Y3VL1fuJpUBj0gS4OTXBLzy1gnYTYaBuVuuO99tGNyTkkub5CXi+b/hsV7Og9fp6HlhogOwWJwgq7iXI5sQlEg==",
+      "dependencies": {
+        "prop-types": "^15.8.1",
+        "raf": "^3.4.1"
+      },
+      "peerDependencies": {
+        "react": "^17.x || ^18.x",
+        "react-dom": "^17.x || ^18.x"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -11920,6 +11957,11 @@
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
     },
+    "performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
+    },
     "periscopic": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
@@ -12065,6 +12107,14 @@
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
     },
+    "raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "requires": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -12096,6 +12146,12 @@
         "prop-types": "^15.7.2"
       }
     },
+    "react-type-animation": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-type-animation/-/react-type-animation-3.2.0.tgz",
+      "integrity": "sha512-WXTe0i3rRNKjmggPvT5ntye1QBt0ATGbijeW6V3cQe2W0jaMABXXlPPEdtofnS9tM7wSRHchEvI9SUw+0kUohw==",
+      "requires": {}
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -12771,6 +12827,15 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
       "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw=="
     },
+    "typewriter-effect": {
+      "version": "2.21.0",
+      "resolved": "https://registry.npmjs.org/typewriter-effect/-/typewriter-effect-2.21.0.tgz",
+      "integrity": "sha512-Y3VL1fuJpUBj0gS4OTXBLzy1gnYTYaBuVuuO99tGNyTkkub5CXi+b/hsV7Og9fp6HlhogOwWJwgq7iXI5sQlEg==",
+      "requires": {
+        "prop-types": "^15.8.1",
+        "raf": "^3.4.1"
+      }
+    },
     "unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
diff --git a/package.json b/package.json
index 8384fe9..02c52be 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-scroll": "^1.8.9",
+    "react-type-animation": "^3.2.0",
     "swiper": "^9.3.2",
     "tailwindcss": "3.3.2",
     "typescript": "5.0.4"