diff --git a/docs/src/components/parts/SecondSection.js b/docs/src/components/parts/Demo.js
similarity index 96%
rename from docs/src/components/parts/SecondSection.js
rename to docs/src/components/parts/Demo.js
index c2c69b03a..1c33b31b9 100644
--- a/docs/src/components/parts/SecondSection.js
+++ b/docs/src/components/parts/Demo.js
@@ -1,7 +1,7 @@
 import React from "react";
 import "animate.css";
 
-export default function SecondSection() {
+export default function Demo() {
   return (
     <section className="relative flex !tracking-wide  flex-col items-center overflow-hidden">
       <div className="!container relative">
diff --git a/docs/src/components/parts/FirstSection.js b/docs/src/components/parts/Hero.js
similarity index 98%
rename from docs/src/components/parts/FirstSection.js
rename to docs/src/components/parts/Hero.js
index f06266647..037cc606b 100644
--- a/docs/src/components/parts/FirstSection.js
+++ b/docs/src/components/parts/Hero.js
@@ -1,7 +1,7 @@
 import React from "react";
 import "animate.css";
 
-export default function FirstSection() {
+export default function Hero() {
   return (
     <section className="relative !tracking-wide flex flex-col home-wrapper items-center overflow-hidden">
       <div
diff --git a/docs/src/components/parts/ThirdSection.js b/docs/src/components/parts/KeyLoveFAQ.js
similarity index 99%
rename from docs/src/components/parts/ThirdSection.js
rename to docs/src/components/parts/KeyLoveFAQ.js
index 39e22beea..9574f70e5 100644
--- a/docs/src/components/parts/ThirdSection.js
+++ b/docs/src/components/parts/KeyLoveFAQ.js
@@ -6,7 +6,7 @@ import { Icon } from "@iconify/react";
 import "animate.css";
 import "tw-elements";
 
-export default function ThirdSection() {
+export default function KeyLoveFAQ() {
   useEffect(() => {
     new WOW().init();
     feather.replace();
diff --git a/docs/src/components/parts/MainComp.js b/docs/src/components/parts/MainComp.js
index 15305af2e..d03c35f41 100644
--- a/docs/src/components/parts/MainComp.js
+++ b/docs/src/components/parts/MainComp.js
@@ -1,28 +1,22 @@
 import React from "react";
 import "animate.css";
 import loadable from "@loadable/component";
-import FirstSection from "./FirstSection";
-import SecondSection from "./SecondSection";
+import Hero from "./Hero";
+import Demo from "./Demo";
 import FourthSection from "./FourthSection";
 import Cookies from "./Cookies";
 
-const ThirdSectionComp = loadable(() => import("./ThirdSection"));
+const KeyLoveFAQComp = loadable(() => import("./KeyLoveFAQ"));
 const BackToTopComp = loadable(() => import("./BackToTop"));
 
 export function MainComp() {
   return (
     <>
-      {/* SECTION 1 */}
-      <FirstSection />
-      {/* SECTION 2 */}
-      <SecondSection />
-      {/* SECTION 3 */}
-      <ThirdSectionComp />
-      {/* SECTION 4 */}
+      <Hero />
+      <Demo />
+      <KeyLoveFAQComp />
       <FourthSection />
-      {/* BACK TO TOP */}
       <BackToTopComp />
-      {/* COOKIES  */}
       <Cookies />
     </>
   );