diff --git a/package.json b/package.json
index 3974e51..0260ffc 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "react-google-recaptcha-v3": "^1.10.1",
     "react-hot-toast": "^2.4.0",
     "react-lazylog": "^4.5.3",
+    "react-matrix-effect": "^1.1.0",
     "react-paginate": "^8.1.4",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.6.1",
diff --git a/packages/renderer/src/scenes/TileMap.ts b/packages/renderer/src/scenes/TileMap.ts
index d97f9ce..99f0c64 100644
--- a/packages/renderer/src/scenes/TileMap.ts
+++ b/packages/renderer/src/scenes/TileMap.ts
@@ -198,6 +198,7 @@ export class TileMap extends Phaser.Scene {
           direction,
         );
         troop.setDepth(troop.y);
+        troop.setTint(actorType === 'D' ? 0xff3333 : 0x7094db);
         actorType === 'D'
           ? this.opponent_troops.set(id, this.add.existing(troop))
           : this.troops.set(id, this.add.existing(troop));
diff --git a/public/assets/bg.jpg b/public/assets/bg.jpg
new file mode 100644
index 0000000..d2acf03
Binary files /dev/null and b/public/assets/bg.jpg differ
diff --git a/public/assets/cyborg.png b/public/assets/cyborg.png
index 9526d8b..30703c0 100644
Binary files a/public/assets/cyborg.png and b/public/assets/cyborg.png differ
diff --git a/public/assets/drone.png b/public/assets/drone.png
index 727c510..fde2507 100644
Binary files a/public/assets/drone.png and b/public/assets/drone.png differ
diff --git a/public/assets/punk.png b/public/assets/punk.png
index ae53261..e46d7ca 100644
Binary files a/public/assets/punk.png and b/public/assets/punk.png differ
diff --git a/public/assets/tower1.png b/public/assets/tower1.png
index eff7efb..6b620eb 100644
Binary files a/public/assets/tower1.png and b/public/assets/tower1.png differ
diff --git a/public/assets/tower1_thumbnail.png b/public/assets/tower1_thumbnail.png
index 6b8d79c..a8887b7 100644
Binary files a/public/assets/tower1_thumbnail.png and b/public/assets/tower1_thumbnail.png differ
diff --git a/public/assets/tower2.png b/public/assets/tower2.png
index 6431448..ffcfca7 100644
Binary files a/public/assets/tower2.png and b/public/assets/tower2.png differ
diff --git a/public/assets/tower2_thumbnail.png b/public/assets/tower2_thumbnail.png
index 2af02de..c0f1f34 100644
Binary files a/public/assets/tower2_thumbnail.png and b/public/assets/tower2_thumbnail.png differ
diff --git a/public/assets/tower3.png b/public/assets/tower3.png
index 16392a9..0114507 100644
Binary files a/public/assets/tower3.png and b/public/assets/tower3.png differ
diff --git a/public/assets/tower3_thumbnail.png b/public/assets/tower3_thumbnail.png
index e0b3743..ec72cef 100644
Binary files a/public/assets/tower3_thumbnail.png and b/public/assets/tower3_thumbnail.png differ
diff --git a/src/assets/deltaMap.png b/src/assets/deltaMap.png
index 3b364bd..2749468 100644
Binary files a/src/assets/deltaMap.png and b/src/assets/deltaMap.png differ
diff --git a/src/components/Background/BackgroundVideo.module.css b/src/components/Background/BackGroundVideo.module.css
similarity index 73%
rename from src/components/Background/BackgroundVideo.module.css
rename to src/components/Background/BackGroundVideo.module.css
index 169b957..59e9560 100644
--- a/src/components/Background/BackgroundVideo.module.css
+++ b/src/components/Background/BackGroundVideo.module.css
@@ -1,8 +1,7 @@
 .bgvideo{
-    z-index: -100;
-    position: fixed;
-    top: 0;
-    width: 100vw;
+    z-index: -99;
     height: 100vh;
+    width: 100vw;
     object-fit: cover;
-}
\ No newline at end of file
+    position: fixed;
+}
diff --git a/src/components/Background/BackGroundVideo.tsx b/src/components/Background/BackGroundVideo.tsx
new file mode 100644
index 0000000..13545fe
--- /dev/null
+++ b/src/components/Background/BackGroundVideo.tsx
@@ -0,0 +1,36 @@
+import { useRef, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import styles from './BackGroundVideo.module.css';
+import bgvideo from '../../../public/assets/bgEffect.mp4';
+
+const BackGroundVideo = () => {
+  const location = useLocation();
+  const vid = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    if (vid.current) {
+      vid.current.playbackRate = 0.5;
+    }
+  }, []);
+
+  const isNotHomePage = location.pathname !== '/';
+
+  return (
+    <>
+      {isNotHomePage ? (
+        <video
+          src={bgvideo}
+          autoPlay
+          loop
+          muted
+          className={styles.bgvideo}
+          ref={vid}
+        />
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export default BackGroundVideo;
diff --git a/src/components/Background/BackgroundImage.module.css b/src/components/Background/BackgroundImage.module.css
new file mode 100644
index 0000000..cccfb21
--- /dev/null
+++ b/src/components/Background/BackgroundImage.module.css
@@ -0,0 +1,39 @@
+.mainContainer {
+    z-index: 0;
+    position: fixed;
+    top: 0;
+}
+
+.mainContainer img {
+    width: 100vw;
+
+    @media screen and (max-width:280px) {
+        width: 5vw;
+        transform: translateX(-35%);
+    }
+
+    @media screen and (min-width:280px) and (max-width:429px) {
+        width: 344vw;
+        transform: translateX(-35%);
+    }
+
+    @media screen and (min-width:430px) and (max-width:500px) {
+        width: 340vw;
+        transform: translateX(-35%);
+    }
+    @media screen and (min-width:500px) and (max-width:768px) {
+        width: 210vw;
+        transform: translateX(-25%);
+    }
+
+
+    @media screen and (min-width:769px) and (max-width:1024px) {
+        width: 225vw;
+        transform: translateX(-28%);
+    }
+
+    @media screen and (min-width:912px) and (max-width:912px) {
+        width: 235vw;
+        transform: translateX(-29%);
+    }
+}
\ No newline at end of file
diff --git a/src/components/Background/BackgroundImage.tsx b/src/components/Background/BackgroundImage.tsx
new file mode 100644
index 0000000..6f3801c
--- /dev/null
+++ b/src/components/Background/BackgroundImage.tsx
@@ -0,0 +1,22 @@
+import styles from './BackgroundImage.module.css';
+import bg from '../../../public/assets/bg.jpg';
+import { useLocation } from 'react-router-dom';
+
+const BackgroundImage = () => {
+  const location = useLocation();
+  const isHomePage = location.pathname === '/';
+
+  return (
+    <>
+      {isHomePage ? (
+        <div className={styles.mainContainer}>
+          <img src={bg} alt="Background" />
+        </div>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export default BackgroundImage;
diff --git a/src/components/Background/BackgroundVideo.tsx b/src/components/Background/BackgroundVideo.tsx
deleted file mode 100644
index 7488b3a..0000000
--- a/src/components/Background/BackgroundVideo.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useRef, useEffect } from 'react';
-import styles from './BackgroundVideo.module.css';
-import bgvideo from '../../../public/assets/bgEffect.mp4';
-
-const Backgroundvideo = () => {
-  const vid = useRef<HTMLVideoElement>(null);
-
-  useEffect(() => {
-    if (vid.current) {
-      vid.current.playbackRate = 0.5;
-    }
-  }, []);
-
-  return (
-    <video
-      src={bgvideo}
-      autoPlay
-      loop
-      muted
-      className={styles.bgvideo}
-      ref={vid}
-    />
-  );
-};
-
-export default Backgroundvideo;
diff --git a/src/components/DashboardOptions/DashboardOptions.module.css b/src/components/DashboardOptions/DashboardOptions.module.css
index 6998801..06e51b9 100644
--- a/src/components/DashboardOptions/DashboardOptions.module.css
+++ b/src/components/DashboardOptions/DashboardOptions.module.css
@@ -1,12 +1,12 @@
 .dropdown a:active {
   background-color: #232627;
 }
-
 .menuBackground{
   background-color:#1e1e1e !important;
 }
 
 .menuText{
   color: #aaaaaa;
-  font-family: 'Poppins';
+  font-family: 'Press Start 2P', sans-serif;
+  font-size: 0.85rem;
 }
diff --git a/src/components/Home/AboutGame/AboutGame.module.css b/src/components/Home/AboutGame/AboutGame.module.css
index ea76492..19d8283 100644
--- a/src/components/Home/AboutGame/AboutGame.module.css
+++ b/src/components/Home/AboutGame/AboutGame.module.css
@@ -19,15 +19,13 @@
 
 .content {
   color: #eaeaea;
-  font-family: 'Poppins';
+  font-family: 'Press Start 2P';
   font-weight: 400;
-  font-size: 32px;
 }
 
 .col1 {
   display: flex;
   align-items: center;
-  border-right: 3px solid #4d4d4d;
   min-width: 300px;
   padding-right: 3%;
 }
@@ -86,7 +84,7 @@
 
 @media only screen and (max-height: 800px) {
   .content {
-    font-size: 20px;
+    font-size: 15px;
   }
   .about {
     margin-top: 16px;
diff --git a/src/components/Home/Footer/Footer.tsx b/src/components/Home/Footer/Footer.tsx
index 7f2a85e..8c6d93b 100644
--- a/src/components/Home/Footer/Footer.tsx
+++ b/src/components/Home/Footer/Footer.tsx
@@ -24,9 +24,15 @@ export default function Footer(): JSX.Element {
       <div className={styles.textContainer}>
         <div className={styles.container}>
           <div className={styles.heading}> Contact</div>
-          <div>Ezhil: +91 6381553859</div>
-          <div>Ram Ganesh: +91 9025517379</div>
-          <div>Vignesh: +91 6381196740</div>
+          <div>
+            Ezhil: <span className={styles.number}>+91 6381553859</span>
+          </div>
+          <div>
+            Ram Ganesh: <span className={styles.number}> +91 9025517379</span>
+          </div>
+          <div>
+            Vignesh: <span className={styles.number}> +91 6381196740 </span>
+          </div>
         </div>
         <div className={styles.container}>
           <div className={styles.heading}>Quick Links</div>
diff --git a/src/components/Home/Footer/footer.module.css b/src/components/Home/Footer/footer.module.css
index 5f8b298..82963d6 100644
--- a/src/components/Home/Footer/footer.module.css
+++ b/src/components/Home/Footer/footer.module.css
@@ -6,7 +6,7 @@
   padding: 3rem 5rem 3rem 5rem;
 }
 
-.footerContainer > div {
+.footerContainer>div {
   align-self: baseline;
 }
 
@@ -15,7 +15,8 @@
   font-size: 22px;
   margin-bottom: 30px;
   color: #eaeaea !important;
-  font-family: 'Poppins';
+  font-family: 'Press Start 2P', sans-serif;
+
 }
 
 .textContainer {
@@ -29,8 +30,9 @@
 }
 
 .container .links:hover {
-  text-decoration: underline;
   cursor: pointer;
+  color: white;
+  text-decoration: none !important;
 }
 
 .credit {
@@ -38,8 +40,12 @@
   flex-direction: column;
 }
 
+.heart {
+  color: red;
+}
+
 .title {
-  font-family: 'Roboto Mono';
+  font-family: 'Press Start 2P', sans-serif;
   font-size: 800;
   font-size: 35px;
   font-style: bold;
@@ -49,23 +55,30 @@
 
 .title:hover {
   cursor: pointer;
-  color: rgb(20, 94, 42);
+  color: green;
 }
+
 .creditText {
-  font-family: sans-serif;
+  font-family: 'Press Start 2P', sans-serif;
   color: #aaaaaa;
   font-size: 16px;
   float: left;
   vertical-align: baseline;
 }
 
-.container > div {
-  font-family: sans-serif;
-  margin: 10px;
+.container>div {
+  font-family: 'Press Start 2P', sans-serif;
+  font-size: 11px;
   color: #aaaaaa;
+  margin: 10px;
   letter-spacing: 1.5px;
 }
 
+.number {
+  font-size: 10px;
+  color:white;
+}
+
 @media screen and (max-width: 900px) {
   .footerContainer {
     padding: 10px 40px 10px 40px;
@@ -100,4 +113,4 @@
   .heading {
     font-size: 20px;
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/Home/Glitchtext/Title.module.css b/src/components/Home/Glitchtext/Title.module.css
index 4076ac1..8b12d6a 100644
--- a/src/components/Home/Glitchtext/Title.module.css
+++ b/src/components/Home/Glitchtext/Title.module.css
@@ -4,212 +4,84 @@
 }
 
 .textContainer {
+  color: #EC1865;
+  font-family: 'Press Start 2P';
+  font-weight: 900;
+  font-size: 3.5rem;
   position: relative;
+  text-transform: uppercase;
+  position: relative;
+  text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
+    0.025em 0.04em 0 #fffc00;
+  animation: glitch 725ms infinite;
 }
 
-.glitchtext {
-  text-align: center;
-  color: #fff;
-  font-size: 120px;
-  letter-spacing: 4px;
-  font-weight: 800;
-  font-family: 'Bai Jamjuree';
-  animation: glitch1 2.5s infinite;
-  width: max-content;
-  max-width: 90vw;
-  margin: auto;
-}
-
-.glitchtext:nth-child(2) {
+.textContainer span {
   position: absolute;
   top: 0;
   left: 0;
-  color: #2ee2c1;
-  animation: glitch2 2.5s infinite;
 }
 
-.glitchtext:nth-child(3) {
-  position: absolute;
-  top: 0;
-  left: 0;
-  color: #46e068;
-  animation: glitch3 2.5s infinite;
+.textContainer span:first-child {
+  animation: glitch 500ms infinite;
+  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
+  transform: translate(-0.04em, -0.03em);
+  opacity: 0.75;
 }
-/*Keyframes*/
 
-@keyframes glitch1 {
-  0% {
-    transform: none;
-    opacity: 1;
-  }
-  7% {
-    transform: skew(-0.5deg, -0.9deg);
-    opacity: 0.75;
-  }
-  10% {
-    transform: none;
-    opacity: 1;
-  }
-  27% {
-    transform: none;
-    opacity: 1;
-  }
-  30% {
-    transform: skew(0.8deg, -0.1deg);
-    opacity: 0.75;
-  }
-  35% {
-    transform: none;
-    opacity: 1;
-  }
-  52% {
-    transform: none;
-    opacity: 1;
-  }
-  55% {
-    transform: skew(-1deg, 0.2deg);
-    opacity: 0.75;
-  }
-  50% {
-    transform: none;
-    opacity: 1;
-  }
-  72% {
-    transform: none;
-    opacity: 1;
-  }
-  75% {
-    transform: skew(0.4deg, 1deg);
-    opacity: 0.75;
-  }
-  80% {
-    transform: none;
-    opacity: 1;
-  }
-  100% {
-    transform: none;
-    opacity: 1;
-  }
+.textContainer span:last-child {
+  animation: glitch 375ms infinite;
+  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
+  transform: translate(0.04em, 0.03em);
+  opacity: 0.75;
 }
 
-@keyframes glitch2 {
-  0% {
-    transform: none;
-    opacity: 0.25;
-  }
-  7% {
-    transform: translate(-2px, -3px);
-    opacity: 0.5;
-  }
-  10% {
-    transform: none;
-    opacity: 0.25;
-  }
-  27% {
-    transform: none;
-    opacity: 0.25;
-  }
-  30% {
-    transform: translate(-5px, -2px);
-    opacity: 0.5;
-  }
-  35% {
-    transform: none;
-    opacity: 0.25;
-  }
-  52% {
-    transform: none;
-    opacity: 0.25;
-  }
-  55% {
-    transform: translate(-5px, -1px);
-    opacity: 0.5;
-  }
-  50% {
-    transform: none;
-    opacity: 0.25;
-  }
-  72% {
-    transform: none;
-    opacity: 0.25;
-  }
-  75% {
-    transform: translate(-2px, -6px);
-    opacity: 0.5;
-  }
-  80% {
-    transform: none;
-    opacity: 0.25;
-  }
-  100% {
-    transform: none;
-    opacity: 0.25;
-  }
-}
 
-@keyframes glitch3 {
+@keyframes glitch {
   0% {
-    transform: none;
-    opacity: 0.25;
+    text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
+      0.025em 0.04em 0 #fffc00;
   }
-  7% {
-    transform: translate(2px, 3px);
-    opacity: 0.5;
-  }
-  10% {
-    transform: none;
-    opacity: 0.25;
-  }
-  27% {
-    transform: none;
-    opacity: 0.25;
-  }
-  30% {
-    transform: translate(5px, 2px);
-    opacity: 0.5;
-  }
-  35% {
-    transform: none;
-    opacity: 0.25;
+
+  15% {
+    text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
+      0.025em 0.04em 0 #fffc00;
   }
-  52% {
-    transform: none;
-    opacity: 0.25;
+
+  16% {
+    text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff,
+      -0.05em -0.05em 0 #fffc00;
   }
-  55% {
-    transform: translate(5px, 1px);
-    opacity: 0.5;
+
+  49% {
+    text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff,
+      -0.05em -0.05em 0 #fffc00;
   }
+
   50% {
-    transform: none;
-    opacity: 0.25;
-  }
-  72% {
-    transform: none;
-    opacity: 0.25;
-  }
-  75% {
-    transform: translate(2px, 6px);
-    opacity: 0.5;
+    text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff,
+      0 -0.04em 0 #fffc00;
   }
-  80% {
-    transform: none;
-    opacity: 0.25;
+
+  99% {
+    text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff,
+      0 -0.04em 0 #fffc00;
   }
+
   100% {
-    transform: none;
-    opacity: 0.25;
+    text-shadow: -0.05em 0 0 #00fffc, -0.025em -0.04em 0 #fc00ff,
+      -0.04em -0.025em 0 #fffc00;
   }
 }
 
 @media screen and (max-width: 900px) {
-  .glitchtext {
-    font-size: 70px;
+  .textContainer {
+    font-size: 8px;
   }
 }
 
 @media screen and (max-width: 600px) {
-  .glitchtext {
-    font-size: 50px;
+  .textContainer {
+    font-size: 20px;
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/Home/Glitchtext/Title.tsx b/src/components/Home/Glitchtext/Title.tsx
index 790bccc..b1cc531 100644
--- a/src/components/Home/Glitchtext/Title.tsx
+++ b/src/components/Home/Glitchtext/Title.tsx
@@ -1,43 +1,14 @@
 import styles from './Title.module.css';
-import { useState, useEffect, useRef } from 'react';
-export default function Glitchtext(prop: { value: string }): JSX.Element {
-  const [displayedTitle, setDisplayedTitle] = useState<string>('');
-
-  const completeTitle: string = prop.value,
-    index = useRef(0);
-
-  useEffect(() => {
-    function addLetter() {
-      setDisplayedTitle(
-        displayedTitle.substring(0, displayedTitle.length - 1) +
-          completeTitle[index.current] +
-          (displayedTitle.length == completeTitle.length ? '' : '_'),
-      );
-      index.current++;
-    }
-    if (index.current < completeTitle.length) {
-      const addChar = setInterval(addLetter, 150);
-      return () => {
-        clearInterval(addChar);
-      };
-    } else {
-      const reloop = setTimeout(() => {
-        setDisplayedTitle('');
-        index.current = 0;
-      }, 3000);
-      return () => {
-        clearTimeout(reloop);
-      };
-    }
-  }, [displayedTitle]);
-
+export default function Glitchtext({
+  className,
+}: {
+  className: string;
+}): JSX.Element {
   return (
-    <div className={styles.container}>
-      <div className={styles.textContainer}>
-        <div className={styles.glitchtext}>{displayedTitle}</div>
-        <div className={styles.glitchtext}>{displayedTitle}</div>
-        <div className={styles.glitchtext}>{displayedTitle}</div>
-      </div>
+    <div className={`${styles.textContainer} ${className}`}>
+      <span aria-hidden="true">Code Character</span>
+      Code Character
+      <span aria-hidden="true">Code Character</span>
     </div>
   );
 }
diff --git a/src/components/NavBar/NavBar.module.css b/src/components/NavBar/NavBar.module.css
index 3560abb..3d4965d 100644
--- a/src/components/NavBar/NavBar.module.css
+++ b/src/components/NavBar/NavBar.module.css
@@ -23,13 +23,13 @@
 }
 
 .navLink {
-  font-family: 'Bai Jamjuree', sans-serif;
+  font-family: 'Press Start 2P', sans-serif;
   margin: auto 80px;
   text-decoration: none;
   display: flex;
   color: white;
   align-items: center;
-  font-size: 28px;
+  font-size: 19px;
   gap: 0.9rem;
   font-weight: bolder;
 }
@@ -48,10 +48,10 @@
 }
 
 .navLogo {
-  font-family: 'Bai Jamjuree', sans-serif;
+  font-family: 'Press Start 2P', sans-serif;
   color: #ffffff;
-  font-size: 28px;
-  margin: 0.5rem 1rem;
+  font-size: 1.25rem;
+  margin: 1rem 0rem 0.5rem;
 }
 
 .logoLink {
@@ -98,6 +98,7 @@
 
 .profileName {
   font-family: 'Bai Jamjuree', sans-serif;
+  font-family: 'Press Start 2P', sans-serif;
   color: #ffffff;
   margin: 0 0.5rem;
   font-weight: 500;
@@ -174,12 +175,12 @@
 
 @media screen and (max-width:650px) {
   .navLogo {
-    font-size: 20px;
+    font-size: 10px;
   }
 
   .navLink {
     margin: auto 10px;
-    font-size: 20px;
+    font-size: 10px;
   }
 
   .navBarContainer {
diff --git a/src/global.css b/src/global.css
index a49506e..c4d1ff7 100644
--- a/src/global.css
+++ b/src/global.css
@@ -2,7 +2,6 @@
   visibility: hidden;
 }
 
-#root{
+#root {
   overflow-y: auto !important;
-}
-
+}
\ No newline at end of file
diff --git a/src/main.module.css b/src/main.module.css
index daea541..aabad2c 100644
--- a/src/main.module.css
+++ b/src/main.module.css
@@ -4,6 +4,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed');
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&family=Roboto&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
 @import 'https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css';
 
 * {
@@ -20,7 +21,7 @@
 
 .gameArea {
   /* this is needed or the background will be offset by a few pixels at the top */
-  overflow: auto;
+  /* overflow: auto; */
   position: relative;
   flex-grow: 1;
   background: rgba(30, 30, 30, 0.87);
diff --git a/src/main.tsx b/src/main.tsx
index 4285c57..8d6ec32 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -11,7 +11,8 @@ import { PersistGate } from 'redux-persist/integration/react';
 import { persistStore } from 'redux-persist';
 import Loader from './components/Loader/Loader';
 import AllRoutes from './AllRoutes';
-import Backgroundvideo from './components/Background/BackgroundVideo';
+import BackgroundImage from './components/Background/BackgroundImage';
+import BackGroundVideo from './components/Background/BackGroundVideo';
 
 const persistor = persistStore(store);
 const NavBar = lazy(() => import('./components/NavBar/NavBar'));
@@ -42,10 +43,11 @@ root.render(
             <SelfMatchModal />
             <PvPSelfMatchModal />
             <NavBar />
+            <BackgroundImage />
             <div className={styles.mainWindow}>
               <SideBarWrap />
               <div className={styles.gameArea}>
-                <Backgroundvideo />
+                <BackGroundVideo />
                 <AllRoutes />
               </div>
             </div>
diff --git a/src/pages/Home/Home.module.css b/src/pages/Home/Home.module.css
index f244a53..8136177 100644
--- a/src/pages/Home/Home.module.css
+++ b/src/pages/Home/Home.module.css
@@ -1,78 +1,92 @@
-.mainContainer {
+.main {
   max-width: 100%;
   overflow-x: hidden;
   overflow-y: auto !important;
+  height: 100%;
 }
 
-.jumbotron {
-  width: 100%;
-  height: calc(100vh - 64px);
+.titleContainer {
   display: flex;
-  flex-direction: column;
+  height: 100%;
   justify-content: center;
   align-items: center;
 }
 
-.jumbotron > div {
-  font-size: 64px;
-  color: white;
-  font-weight: bold;
-}
+.title {
+  transform: translate(20px, 60px);
 
-.delta {
-  display: flex;
+  @media screen and (max-width:280px) {
+    transform: translate(90px, 60px);
+    font-size: 1rem;
+  }
 
-}
+  @media screen and (min-width:290px) and (max-width:360px) {
+    transform: translate(-1px, 0px);
+    font-size: 1.50rem;
+  }
 
-.delta > div {
-  margin: auto;
-  color: antiquewhite;
-}
+  @media screen and (min-width:365px) and (max-width:380px) {
+    transform: translate(-1px, 55px);
+    font-size: 1.50rem;
+  }
 
-.delta > div > a{
-  color: antiquewhite;
-  text-decoration: none;
-}
+  @media screen and (min-width:385px) and (max-width:393px) {
+    transform: translate(-1px, 55px);
+    font-size: 1.50rem;
+  }
 
-.heart {
-  color: #aaaaaa;
-}
-.arrowContainer{
-  position: relative;
-  top: 30%;
-}
-.arrow{
-  justify-content: end;
-  transition-duration: 0.5s;
-}
+  @media screen and (min-width:390px) and (max-width:411px) {
+    transform: translate(-1px, -10px);
+    font-size: 1.5rem;
+  }
 
-.arrow:hover{
-  transform: scale(1.5);
-}
+  @media screen and (min-width:411px) and (max-width:420px) {
+    transform: translate(-1px, -10px);
+    font-size: 1.7rem;
+  }
 
-@media screen and (max-width: 1000px) {
-  .jumbotron > div {
-    font-size: 2px;
+  @media screen and (min-width:420px) and (max-width:430px) {
+    transform: translate(-1px, -10px);
+    font-size: 1.7rem;
   }
-  .arrowContainer{
-    top: 20%;
+
+  @media screen and (min-width:430px) and (max-width:480px) {
+    transform: translate(0px, -25px);
+    font-size: 1.7rem;
   }
-}
-@media screen and (max-width: 900px){
-  .arrowContainer{
-    top: 35%;
+
+  @media screen and (min-width:480px) and (max-width:540px) {
+    transform: translate(20px, -25px);
+    font-size: 1.9rem;
   }
-}
-@media screen and (max-width: 800px){
-  .arrowContainer{
-    top: 40%;
+
+  @media screen and (min-width:550px) and (max-width:768px) {
+    transform: translate(25px, -25px);
+    font-size: 2.8rem;
   }
-}
-@media screen and (max-width: 450px){
-  .arrowContainer{
-    top: 33%;
+
+  @media screen and (min-width:769px) and (max-width:1024px) {
+    transform: translate(15px, -25px);
+    font-size: 3.2rem;
   }
-}
 
+  @media screen and (min-width:1030px) and (max-width:1324px) {
+    transform: translate(8px, -25px);
+    font-size: 2.2rem;
+  }
 
+  @media screen and (width:1024px) and (max-height:1366px) {
+    transform: translate(15px, 0px);
+    font-size: 4.2rem;
+  }
 
+  @media screen and (min-width:912px) and (max-width:912px) {
+    transform: translate(15px, -20px);
+    font-size: 3.7rem;
+  }
+}
+
+.mainContainer {
+  backdrop-filter: blur(10px);
+  background-color: #000000a0;
+}
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index 969acd3..92195d4 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -2,30 +2,16 @@ import Footer from '../../components/Home/Footer/Footer';
 import Glitchtext from '../../components/Home/Glitchtext/Title';
 import AboutGame from '../../components/Home/AboutGame/AboutGame';
 import styles from './Home.module.css';
-import { useRef } from 'react';
-import downArrow from '../../../public/assets/DownArrow.svg';
-
 export default function Home(): JSX.Element {
-  const Contentdiv = useRef<HTMLDivElement>(null);
-
-  const handleClickArrow = () => {
-    Contentdiv.current?.scrollIntoView({ behavior: 'smooth' });
-  };
-
   return (
-    <div className={styles.mainContainer}>
-      <div className={styles.jumbotron}>
-        <Glitchtext value="Code Character" />
-        <div className={styles.arrowContainer}>
-          <img
-            onClick={handleClickArrow}
-            className={styles.arrow}
-            src={downArrow}
-          ></img>
-        </div>
+    <div className={styles.main}>
+      <div className={styles.titleContainer}>
+        <Glitchtext className={styles.title} />
       </div>
-      <div ref={Contentdiv}>
-        <AboutGame />
+      <div className={styles.mainContainer}>
+        <div className={styles.vcr}>
+          <AboutGame />
+        </div>
       </div>
       <Footer />
     </div>
diff --git a/yarn.lock b/yarn.lock
index 75c4835..6958632 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1762,6 +1762,7 @@ __metadata:
     react-google-recaptcha-v3: ^1.10.1
     react-hot-toast: ^2.4.0
     react-lazylog: ^4.5.3
+    react-matrix-effect: ^1.1.0
     react-paginate: ^8.1.4
     react-redux: ^8.0.5
     react-router-dom: ^6.6.1
@@ -15209,6 +15210,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-matrix-effect@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "react-matrix-effect@npm:1.1.0"
+  dependencies:
+    prop-types: ^15.6.2
+    react: ^16.7.0
+  checksum: ba3d42a15e941cf32a16322067ed1ffe1d42ae82413e188e8a70dc8d2d3992cbe4105987bc8b4216b6992470de632c6e7abb24eb81163e8c0e791d174588d530
+  languageName: node
+  linkType: hard
+
 "react-paginate@npm:^8.1.4":
   version: 8.1.4
   resolution: "react-paginate@npm:8.1.4"
@@ -15460,6 +15471,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react@npm:^16.7.0":
+  version: 16.14.0
+  resolution: "react@npm:16.14.0"
+  dependencies:
+    loose-envify: ^1.1.0
+    object-assign: ^4.1.1
+    prop-types: ^15.6.2
+  checksum: 8484f3ecb13414526f2a7412190575fc134da785c02695eb92bb6028c930bfe1c238d7be2a125088fec663cc7cda0a3623373c46807cf2c281f49c34b79881ac
+  languageName: node
+  linkType: hard
+
 "react@npm:^18.2.0":
   version: 18.2.0
   resolution: "react@npm:18.2.0"