diff --git a/app/blog/page.tsx b/app/blog/page.tsx
index cc3bad88..3791e8bc 100644
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@@ -3,7 +3,7 @@ import { blogMetadata } from "../../utils/metadata/blogMetadata";
 import Header from "../components/crafts/Header";
 import Footer from "../components/global/Footer/Footer";
 import Navbar, { Position } from "../components/global/Navbar/Navbar";
-import Blog from "../components/home/Blog/Blog";
+import BlogNew from "../components/home/Blog/BlogNew";
 
 export const metadata = blogMetadata;
 
@@ -23,7 +23,7 @@ export default async function BlogPage() {
         paragraph={headerProps.paragraph}
       />
       <Navbar position={Position.Fixed} />
-      <Blog />
+      <BlogNew />
       <Footer />
       <script
         type="application/ld+json"
diff --git a/app/components/home/About/About.tsx b/app/components/home/About/AboutNew.tsx
similarity index 98%
rename from app/components/home/About/About.tsx
rename to app/components/home/About/AboutNew.tsx
index 45d6dcf5..5b37ce48 100644
--- a/app/components/home/About/About.tsx
+++ b/app/components/home/About/AboutNew.tsx
@@ -10,7 +10,7 @@ type RowElement = {
   id: string;
 };
 
-const About = () => {
+const AboutNew = () => {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const triggerRef = useRef<HTMLDivElement | null>(null);
   const dotRef = useRef<HTMLDivElement | null>(null);
@@ -150,4 +150,4 @@ const About = () => {
   );
 };
 
-export default About;
+export default AboutNew;
diff --git a/app/components/home/Blog/Blog.tsx b/app/components/home/Blog/BlogNew.tsx
similarity index 98%
rename from app/components/home/Blog/Blog.tsx
rename to app/components/home/Blog/BlogNew.tsx
index 64df4306..87b7686b 100644
--- a/app/components/home/Blog/Blog.tsx
+++ b/app/components/home/Blog/BlogNew.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 import { FC } from "react";
 import { getBlogPosts, Posts } from "../../../../utils/getPosts";
 
-const Blog: FC = () => {
+const BlogNew: FC = () => {
   const posts: Posts[] = getBlogPosts();
   return (
     <div data-testid="homeBlogSection" className="my-medium grid">
@@ -69,4 +69,4 @@ const Blog: FC = () => {
   );
 };
 
-export default Blog;
+export default BlogNew;
diff --git a/app/components/home/Expertise/Expertise.tsx b/app/components/home/Expertise/ExpertiseNew.tsx
similarity index 95%
rename from app/components/home/Expertise/Expertise.tsx
rename to app/components/home/Expertise/ExpertiseNew.tsx
index ed1bd7ad..f13746b9 100644
--- a/app/components/home/Expertise/Expertise.tsx
+++ b/app/components/home/Expertise/ExpertiseNew.tsx
@@ -6,7 +6,7 @@ import { AccordionItem, accordionItems } from "./AccordionItems";
 import useHorizontalScroll from "../../../../utils/hooks/useHorizontalScroll";
 import { bebas_neue } from "../../../../utils/fonts";
 
-const Expertise = () => {
+const ExpertiseNew = () => {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const triggerRef = useRef<HTMLDivElement | null>(null);
 
@@ -34,4 +34,4 @@ const Expertise = () => {
   );
 };
 
-export default Expertise;
+export default ExpertiseNew;
diff --git a/app/components/home/Hero/Hero.tsx b/app/components/home/Hero/HeroNew.tsx
similarity index 91%
rename from app/components/home/Hero/Hero.tsx
rename to app/components/home/Hero/HeroNew.tsx
index 12a058ec..230c3fb7 100644
--- a/app/components/home/Hero/Hero.tsx
+++ b/app/components/home/Hero/HeroNew.tsx
@@ -5,7 +5,7 @@ import NavbarWrapper from "../Navbar/NavbarWrapper";
 import Showreel from "./Showreel";
 import ShowreelMobile from "./ShowreelMobile";
 
-const Hero: FC = () => {
+const HeroNew: FC = () => {
   return (
     <>
       <div data-testid="homeHeroSection" className="flex h-[100vh] flex-col">
@@ -23,4 +23,4 @@ const Hero: FC = () => {
   );
 };
 
-export default Hero;
+export default HeroNew;
diff --git a/app/components/home/Loader/Loader.tsx b/app/components/home/Loader/LoaderNew.tsx
similarity index 97%
rename from app/components/home/Loader/Loader.tsx
rename to app/components/home/Loader/LoaderNew.tsx
index 14ee5a6f..20c1d760 100644
--- a/app/components/home/Loader/Loader.tsx
+++ b/app/components/home/Loader/LoaderNew.tsx
@@ -6,7 +6,7 @@ import { FC, useEffect, useRef } from "react";
 import { useAnimationStore, useOverlayStore } from "../../../../utils/store";
 import Header from "../Hero/Header";
 
-const Loader: FC = () => {
+const LoaderNew: FC = () => {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const faderRef = useRef<HTMLDivElement | null>(null);
   const imageRef = useRef<HTMLDivElement | null>(null);
@@ -76,4 +76,4 @@ const Loader: FC = () => {
   );
 };
 
-export default Loader;
+export default LoaderNew;
diff --git a/app/components/home/Loader/LoaderWrapper.tsx b/app/components/home/Loader/LoaderWrapperNew.tsx
similarity index 71%
rename from app/components/home/Loader/LoaderWrapper.tsx
rename to app/components/home/Loader/LoaderWrapperNew.tsx
index 50da1763..dabccca7 100644
--- a/app/components/home/Loader/LoaderWrapper.tsx
+++ b/app/components/home/Loader/LoaderWrapperNew.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import { FC, useEffect, useState } from "react";
-import Loader from "./Loader";
+import LoaderNew from "./LoaderNew";
 
-const LoaderWrapper: FC = () => {
+const LoaderWrapperNew: FC = () => {
   const [loader, setLoader] = useState<boolean>(false);
 
   useEffect(() => {
@@ -16,7 +16,7 @@ const LoaderWrapper: FC = () => {
     }
   }, []);
 
-  return <>{loader && <Loader />}</>;
+  return <>{loader && <LoaderNew />}</>;
 };
 
-export default LoaderWrapper;
+export default LoaderWrapperNew;
diff --git a/app/components/home/Loader/Overlay.tsx b/app/components/home/Loader/OverlayNew.tsx
similarity index 83%
rename from app/components/home/Loader/Overlay.tsx
rename to app/components/home/Loader/OverlayNew.tsx
index 647188ef..508d9aba 100644
--- a/app/components/home/Loader/Overlay.tsx
+++ b/app/components/home/Loader/OverlayNew.tsx
@@ -3,7 +3,7 @@
 import React, { FC } from "react";
 import { useOverlayStore } from "../../../../utils/store";
 
-const Overlay: FC = () => {
+const OverlayNew: FC = () => {
   const { isHidden } = useOverlayStore();
   return (
     <div
@@ -12,4 +12,4 @@ const Overlay: FC = () => {
   );
 };
 
-export default Overlay;
+export default OverlayNew;
diff --git a/app/page.tsx b/app/page.tsx
index 5f0af67a..0e28cb48 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,12 +4,12 @@ import { Works } from "../utils/graphql/graphqlTypes";
 import { homeMetadata } from "../utils/metadata/homeMetadata";
 import { homeSchema } from "../utils/metadata/Schemas";
 import Footer from "./components/global/Footer/Footer";
-import Hero from "./components/home/Hero/Hero";
-import Overlay from "./components/home/Loader/Overlay";
-import LoaderWrapper from "./components/home/Loader/LoaderWrapper";
-import About from "./components/home/About/About";
+import HeroNew from "./components/home/Hero/HeroNew";
+import OverlayNew from "./components/home/Loader/OverlayNew";
+import LoaderWrapperNew from "./components/home/Loader/LoaderWrapperNew";
+import AboutNew from "./components/home/About/AboutNew";
 import WorksSection from "./components/home/Works/WorksSection";
-import Expertise from "./components/home/Expertise/Expertise";
+import ExpertiseNew from "./components/home/Expertise/ExpertiseNew";
 
 export const metadata: Metadata = homeMetadata;
 
@@ -18,12 +18,12 @@ const Home = async () => {
 
   return (
     <>
-      <Hero />
-      <Overlay />
-      <LoaderWrapper />
-      <About />
+      <HeroNew />
+      <OverlayNew />
+      <LoaderWrapperNew />
+      <AboutNew />
       <WorksSection works={works} />
-      <Expertise />
+      <ExpertiseNew />
       <Footer />
       <script
         type="application/ld+json"