diff --git a/src/components/Index/Hero.component.tsx b/src/components/Index/Hero.component.tsx
index 657b7908..1309347e 100644
--- a/src/components/Index/Hero.component.tsx
+++ b/src/components/Index/Hero.component.tsx
@@ -1,15 +1,17 @@
 "use client";
 
 import React, { Suspense } from "react";
+import dynamic from "next/dynamic";
+
 import Icons from "./Icons.component";
 import FadeDown from "@/components/Animations/FadeDown.component";
 import FadeUp from "@/components/Animations/FadeUp.component";
-import RotatingLoader from "../Animations/RotatingLoader.component";
-import dynamic from "next/dynamic";
+import RotatingLoader from "@/components/Animations/RotatingLoader.component";
+import MobileBackground from "./MobileBackground.component";
 
 const ReactMatrixAnimation = dynamic(
   () => import("../Animations/Matrix.component"),
-  { ssr: false },
+  { ssr: false }
 );
 
 type THero = { text: string };
@@ -24,14 +26,7 @@ const Hero = ({ content }: IContent) => (
     data-testid="main-hero"
     className="relative flex flex-col justify-center text-lg h-[26rem] md:h-[28.125rem] overflow-hidden w-full"
   >
-    <div
-      className="absolute inset-0 md:hidden bg-cover bg-center bg-no-repeat"
-      style={{
-        backgroundImage: "url('/images/mobilbg.webp')",
-        top: "-0.5rem",
-        marginBottom: "2.5rem",
-      }}
-    />
+    <MobileBackground />
     <div className="hidden md:block absolute inset-0 w-full h-full">
       <Suspense
         fallback={
diff --git a/src/components/Index/Icons.component.tsx b/src/components/Index/Icons.component.tsx
index 587aa626..4a57802a 100644
--- a/src/components/Index/Icons.component.tsx
+++ b/src/components/Index/Icons.component.tsx
@@ -10,6 +10,14 @@ interface IAnimateIcons {
   iconName: string;
 }
 
+const AnimateIcons: IAnimateIcons[] = [
+  { id: 0, Icon: FaReact, iconName: "React" },
+  { id: 1, Icon: FaVuejs, iconName: "Vue" },
+  { id: 2, Icon: SiTypescript, iconName: "Typescript" },
+  { id: 3, Icon: SiWordpress, iconName: "Wordpress" },
+  { id: 4, Icon: FaPhp, iconName: "PHP" },
+];
+
 /**
  * Renders SVG icons that are used on the front page
  * Uses Framer Motion for animations to show the SVGs
@@ -18,14 +26,6 @@ interface IAnimateIcons {
  */
 
 const Icons = () => {
-  const AnimateIcons: IAnimateIcons[] = [
-    { id: 0, Icon: FaReact, iconName: "React" },
-    { id: 1, Icon: FaVuejs, iconName: "Vue" },
-    { id: 2, Icon: SiTypescript, iconName: "Typescript" },
-    { id: 3, Icon: SiWordpress, iconName: "Wordpress" },
-    { id: 4, Icon: FaPhp, iconName: "PHP" },
-  ];
-
   return (
     <div
       data-testid="icons"
diff --git a/src/components/Index/MobileBackground.component.tsx b/src/components/Index/MobileBackground.component.tsx
new file mode 100644
index 00000000..47fdc5f4
--- /dev/null
+++ b/src/components/Index/MobileBackground.component.tsx
@@ -0,0 +1,12 @@
+const MobileBackground = () => (
+  <div
+    className="absolute inset-0 md:hidden bg-cover bg-center bg-no-repeat"
+    style={{
+      backgroundImage: "url('/images/mobilbg.webp')",
+      top: "-0.5rem",
+      marginBottom: "2.5rem",
+    }}
+  />
+);
+
+export default MobileBackground;