diff --git a/src/app/globals.css b/src/app/globals.css
index 2ab32f5..363cdbc 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -11,3 +11,6 @@
   }
 }
 
+html {
+  scroll-behavior: smooth;
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4b70da4..2cc5ada 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -13,6 +13,7 @@ export default function Home() {
     <Container>
       <Hero />
       <SectionTitle
+        sectionId="section-one"
         preTitle="Nextly Benefits"
         title=" Why should you use this landing page"
       >
@@ -25,6 +26,7 @@ export default function Home() {
       <Benefits imgPos="right" data={benefitTwo} />
 
       <SectionTitle
+        sectionId="section-two"
         preTitle="Watch a video"
         title="Learn how to fullfil your needs"
       >
@@ -36,6 +38,7 @@ export default function Home() {
       <Video videoId="fZ0D0cnR88E" />
 
       <SectionTitle
+        sectionId="section-three"
         preTitle="Testimonials"
         title="Here's what our customers said"
       >
@@ -45,7 +48,11 @@ export default function Home() {
 
       <Testimonials />
 
-      <SectionTitle preTitle="FAQ" title="Frequently Asked Questions">
+      <SectionTitle
+        sectionId="section-four"
+        preTitle="FAQ"
+        title="Frequently Asked Questions"
+      >
         Answer your customers possible questions here, it will increase the
         conversion rate as well as support or chat requests.
       </SectionTitle>
diff --git a/src/components/Container.tsx b/src/components/Container.tsx
index bd24198..288ca4b 100644
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@@ -2,12 +2,14 @@ import React from "react";
 
 interface ContainerProps {
   children: React.ReactNode;
+  idName?: string;
   className?: string;
 }
 
 export function Container(props: Readonly<ContainerProps>) {
   return (
     <div
+      id={props.idName || undefined}
       className={`container p-8 mx-auto xl:px-0 ${
         props.className ? props.className : ""
       }`}>
diff --git a/src/components/SectionTitle.tsx b/src/components/SectionTitle.tsx
index 858147a..fc4d5e5 100644
--- a/src/components/SectionTitle.tsx
+++ b/src/components/SectionTitle.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { Container } from "@/components/Container";
 
 interface SectionTitleProps {
+  sectionId?: string;
   preTitle?: string;
   title?: string;
   align?: "left" | "center";
@@ -11,6 +12,7 @@ interface SectionTitleProps {
 export const SectionTitle = (props: Readonly<SectionTitleProps>) => {
   return (
     <Container
+      idName={`${props.sectionId}`}
       className={`flex w-full flex-col mt-4 ${
         props.align === "left" ? "" : "items-center justify-center text-center"
       }`}>