diff --git a/electron_app/frontend/public/emu/PCSX.png b/electron_app/frontend/public/emu/PCSX.png
index d553da7..8d4a5f2 100644
Binary files a/electron_app/frontend/public/emu/PCSX.png and b/electron_app/frontend/public/emu/PCSX.png differ
diff --git a/electron_app/frontend/public/emu/PCSX2.png b/electron_app/frontend/public/emu/PCSX2.png
new file mode 100644
index 0000000..d553da7
Binary files /dev/null and b/electron_app/frontend/public/emu/PCSX2.png differ
diff --git a/electron_app/frontend/public/images/charizard_left.gif b/electron_app/frontend/public/images/charizard_left.gif
new file mode 100644
index 0000000..c05bb87
Binary files /dev/null and b/electron_app/frontend/public/images/charizard_left.gif differ
diff --git a/electron_app/frontend/public/images/charizard_right.gif b/electron_app/frontend/public/images/charizard_right.gif
new file mode 100644
index 0000000..cbfc418
Binary files /dev/null and b/electron_app/frontend/public/images/charizard_right.gif differ
diff --git a/electron_app/frontend/public/images/crash_left.gif b/electron_app/frontend/public/images/crash_left.gif
new file mode 100644
index 0000000..b04ef44
Binary files /dev/null and b/electron_app/frontend/public/images/crash_left.gif differ
diff --git a/electron_app/frontend/public/images/crash_right.gif b/electron_app/frontend/public/images/crash_right.gif
new file mode 100644
index 0000000..1aa31cf
Binary files /dev/null and b/electron_app/frontend/public/images/crash_right.gif differ
diff --git a/electron_app/frontend/public/images/crashidle.gif b/electron_app/frontend/public/images/crashidle.gif
new file mode 100644
index 0000000..3433e4f
Binary files /dev/null and b/electron_app/frontend/public/images/crashidle.gif differ
diff --git a/electron_app/frontend/public/images/kangidle.gif b/electron_app/frontend/public/images/kangidle.gif
new file mode 100644
index 0000000..9bcb13c
Binary files /dev/null and b/electron_app/frontend/public/images/kangidle.gif differ
diff --git a/electron_app/frontend/public/images/linkidle.gif b/electron_app/frontend/public/images/linkidle.gif
new file mode 100644
index 0000000..2718a34
Binary files /dev/null and b/electron_app/frontend/public/images/linkidle.gif differ
diff --git a/electron_app/frontend/public/images/liu_kang_left.gif b/electron_app/frontend/public/images/liu_kang_left.gif
new file mode 100644
index 0000000..b3b8446
Binary files /dev/null and b/electron_app/frontend/public/images/liu_kang_left.gif differ
diff --git a/electron_app/frontend/public/images/liu_kang_right.gif b/electron_app/frontend/public/images/liu_kang_right.gif
new file mode 100644
index 0000000..8f31ebf
Binary files /dev/null and b/electron_app/frontend/public/images/liu_kang_right.gif differ
diff --git a/electron_app/frontend/public/images/mario_y_yoshi_left.gif b/electron_app/frontend/public/images/mario_y_yoshi_left.gif
new file mode 100644
index 0000000..f022d2c
Binary files /dev/null and b/electron_app/frontend/public/images/mario_y_yoshi_left.gif differ
diff --git a/electron_app/frontend/public/images/mario_y_yoshi_right.gif b/electron_app/frontend/public/images/mario_y_yoshi_right.gif
new file mode 100644
index 0000000..38c86af
Binary files /dev/null and b/electron_app/frontend/public/images/mario_y_yoshi_right.gif differ
diff --git a/electron_app/frontend/public/images/mega_man_left.gif b/electron_app/frontend/public/images/mega_man_left.gif
new file mode 100644
index 0000000..0ccfbd5
Binary files /dev/null and b/electron_app/frontend/public/images/mega_man_left.gif differ
diff --git a/electron_app/frontend/public/images/mega_man_right.gif b/electron_app/frontend/public/images/mega_man_right.gif
new file mode 100644
index 0000000..278905f
Binary files /dev/null and b/electron_app/frontend/public/images/mega_man_right.gif differ
diff --git a/electron_app/frontend/public/images/megaidle.gif b/electron_app/frontend/public/images/megaidle.gif
new file mode 100644
index 0000000..c13aa48
Binary files /dev/null and b/electron_app/frontend/public/images/megaidle.gif differ
diff --git a/electron_app/frontend/public/images/metal-gear_left.gif b/electron_app/frontend/public/images/metal-gear_left.gif
new file mode 100644
index 0000000..4d2cd08
Binary files /dev/null and b/electron_app/frontend/public/images/metal-gear_left.gif differ
diff --git a/electron_app/frontend/public/images/metal-gear_right.gif b/electron_app/frontend/public/images/metal-gear_right.gif
new file mode 100644
index 0000000..264f97e
Binary files /dev/null and b/electron_app/frontend/public/images/metal-gear_right.gif differ
diff --git a/electron_app/frontend/public/images/mgsidle.gif b/electron_app/frontend/public/images/mgsidle.gif
new file mode 100644
index 0000000..77e4b0f
Binary files /dev/null and b/electron_app/frontend/public/images/mgsidle.gif differ
diff --git a/electron_app/frontend/public/images/shinycharidle.gif b/electron_app/frontend/public/images/shinycharidle.gif
new file mode 100644
index 0000000..ae45abb
Binary files /dev/null and b/electron_app/frontend/public/images/shinycharidle.gif differ
diff --git a/electron_app/frontend/public/images/sonicidle.gif b/electron_app/frontend/public/images/sonicidle.gif
new file mode 100644
index 0000000..0034d9c
Binary files /dev/null and b/electron_app/frontend/public/images/sonicidle.gif differ
diff --git a/electron_app/frontend/public/images/spyro_left.gif b/electron_app/frontend/public/images/spyro_left.gif
new file mode 100644
index 0000000..79af638
Binary files /dev/null and b/electron_app/frontend/public/images/spyro_left.gif differ
diff --git a/electron_app/frontend/public/images/spyro_right.gif b/electron_app/frontend/public/images/spyro_right.gif
new file mode 100644
index 0000000..8b5e47a
Binary files /dev/null and b/electron_app/frontend/public/images/spyro_right.gif differ
diff --git a/electron_app/frontend/src/Components/Details/DetailsMain.css b/electron_app/frontend/src/Components/Details/DetailsMain.css
index 4f1969b..0b0c65b 100644
--- a/electron_app/frontend/src/Components/Details/DetailsMain.css
+++ b/electron_app/frontend/src/Components/Details/DetailsMain.css
@@ -63,19 +63,21 @@
 .canvas-container {
   position: absolute;
   z-index: 1;
-  left: 10%;
-  top:30%;
+  left: 15%;
+  top:20%;
   margin-left:2%;
+  border: 2px solid white;
+  border-radius: 20px;
 
 }
 
 .emulator_summary {
   position: absolute;
   right: 13%;
-  top: 10%;
+  top: 5%;
   width: 27%;
   color: white;
-  text-align:center;
+  text-align:left;
   /* font-size: 2vw; */
   font-size: clamp(20px, 2vw, 40px);
   z-index: 1;
@@ -88,7 +90,7 @@
 .game_recommendations {
   padding: 2%;
   margin: 10px;
-  border: 2px solid white;
+  /*border: 2px solid white;*/
   /* border-radius: 20px; */
   position: absolute;
   color: white;
@@ -182,7 +184,7 @@
 } */
 
 
-.Link{
+.Gif{
   width:clamp(100px, 20vw, 250px);
   z-index: 2;
   position:absolute;
@@ -193,6 +195,8 @@
 
 
 }
+
+
 .Side1 {
   position: absolute;
   top: 45%;
diff --git a/electron_app/frontend/src/Components/Details/DetailsMain.tsx b/electron_app/frontend/src/Components/Details/DetailsMain.tsx
index 929da3c..22c09d2 100644
--- a/electron_app/frontend/src/Components/Details/DetailsMain.tsx
+++ b/electron_app/frontend/src/Components/Details/DetailsMain.tsx
@@ -1,10 +1,10 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import Rotate from "./Rotating_Image";
 import "./DetailsMain.css";
 // import pixelPanel from "/images/pixelPanel.png";
 import Mario64 from "/images/Mario64.gif";
-import Sonic_Run_Right from "/images/DreamCast_Moving_Right.gif";
-import Sonic_Run_Left from "/images/DreamCast_Moving_Left.gif";
+// import Sonic_Run_Right from "/images/DreamCast_Moving_Right.gif";
+// import Sonic_Run_Left from "/images/DreamCast_Moving_Left.gif";
 import { useNavigate } from "react-router-dom";
 import LeftBanner from "../Banners/LeftBanner";
 import RightBanner from "../Banners/RightBanner";
@@ -19,6 +19,9 @@ interface Emulator {
   description: string;
   image: string;
   games: string[];
+  gif1: string;
+  gif2: string;
+  idle: string;
 }
 
 // Define props for the DetailsMain component
@@ -42,10 +45,14 @@ const DetailsMain: React.FC<DetailsMainProps> = ({ emulatorName }) => {
   const [emulators] = useState<Emulator[]>(emuData);
   const [selectedEmulator, setSelectedEmulator] = useState<Emulator | null>(null);
 
-  const [sonicPosition, setSonicPosition] = useState(0); // Sonic's horizontal position
-  const [direction] = useState<"right" | "left">("right"); // Movement direction
-  const [sonicImage, setSonicImage] = useState(Sonic_Run_Right); // Current Sonic image
+  const [GifPosition, setGifPosition] = useState(0); // Image horizontal position
+  const [currentDirection, setCurrentDirection] = useState<"right" | "left">("right"); // Movement direction
+  const [gifImage, setGifImage] = useState(selectedEmulator?.gif1 ?? "/path/to/fallback-image.webp"); // Image
 
+  const directionRef = useRef(currentDirection);
+  directionRef.current = currentDirection;
+
+  // Update selectedEmulator when emulatorName changes
   useEffect(() => {
     if (emulatorName) {
       const emulator = emulators.find(
@@ -55,33 +62,40 @@ const DetailsMain: React.FC<DetailsMainProps> = ({ emulatorName }) => {
     }
   }, [emulatorName, emulators]);
 
+  // Update gifImage when selectedEmulator or currentDirection changes
   useEffect(() => {
-    let currentDirection = direction; // Local variable to track direction
-
-    const animateSonic = () => {
-      setSonicPosition((prev) => {
-        if (currentDirection === "right") {
+    setGifImage(
+      currentDirection === "right"
+        ? selectedEmulator?.gif1 ?? "/path/to/fallback-image.webp"
+        : selectedEmulator?.gif2 ?? "/path/to/fallback-image.webp"
+    );
+  }, [selectedEmulator, currentDirection]);
+
+  // Animation logic
+  useEffect(() => {
+    let animationId: number;
+    const animateGif = () => {
+      setGifPosition((prev) => {
+        if (directionRef.current === "right") {
           if (prev >= (window.innerWidth / 2) - 5) {
-            currentDirection = "left"; // Update direction locally
-            setSonicImage(Sonic_Run_Left);
+            setCurrentDirection("left"); // Update direction in state
             return prev - 2; // Start moving left
           }
           return prev + 2; // Move right
         } else {
           if (prev <= 2) {
-            currentDirection = "right"; // Update direction locally
-            setSonicImage(Sonic_Run_Right);
+            setCurrentDirection("right"); // Update direction in state
             return prev + 2; // Start moving right
           }
           return prev - 2; // Move left
         }
       });
-
-      requestAnimationFrame(animateSonic);
+      animationId = requestAnimationFrame(animateGif);
     };
-    const animationId = requestAnimationFrame(animateSonic);
+
+    animationId = requestAnimationFrame(animateGif);
     return () => cancelAnimationFrame(animationId); // Cleanup on unmount
-  }, []); // Empty dependency array to run only once
+  }, [currentDirection]); // Re-run effect when currentDirection changes
 
   return (
     <div className="Main_Div">
@@ -92,14 +106,14 @@ const DetailsMain: React.FC<DetailsMainProps> = ({ emulatorName }) => {
       <button className="back_button" onClick={goBack}>
         Back
       </button>
-      <img className="Mario" src={Mario64} alt="Mario 64" />
+      <img className="Mario" src={selectedEmulator?.idle ?? "/path/to/fallback-image.webp"} alt="Mario 64" />
 
-      {/* Sonic GIF */}
+      {/* GIF */}  
       <img
-        className="Link"
-        src={sonicImage}
-        alt="Sonic"
-        style={{ left: `${sonicPosition}px` }}
+        className="Gif"
+        src={gifImage}
+        alt="Gift"
+        style={{ left: `${GifPosition}px` }}
       />
 
       {/* Canvas for 3D content */}
@@ -111,6 +125,7 @@ const DetailsMain: React.FC<DetailsMainProps> = ({ emulatorName }) => {
         <Cube
           src={selectedEmulator?.image ?? "/path/to/fallback-image.webp"} // in case no img found
         />
+         <Rotate src={selectedEmulator?.image ?? "/path/to/fallback-image.webp"} />
       </Canvas> */}
       <div className="canvas-container">
         <Rotate src={selectedEmulator?.image ?? "/path/to/fallback-image.webp"} />
diff --git a/electron_app/frontend/src/Components/Emulators/Emulators.tsx b/electron_app/frontend/src/Components/Emulators/Emulators.tsx
index 69668ba..93b0a0c 100644
--- a/electron_app/frontend/src/Components/Emulators/Emulators.tsx
+++ b/electron_app/frontend/src/Components/Emulators/Emulators.tsx
@@ -210,7 +210,7 @@ const Emulators: React.FC<EmulatorsProps> = ({
                   className="buttonCircle"
                   onClick={handleEmulatorSelection}
                 >
-                  button
+                  X
                 </button>
                 <p> for </p>
               </div>
diff --git a/electron_app/frontend/src/emuData.json b/electron_app/frontend/src/emuData.json
index 56e1974..a167985 100644
--- a/electron_app/frontend/src/emuData.json
+++ b/electron_app/frontend/src/emuData.json
@@ -1,6 +1,9 @@
 [
   {
       "image": "/emu/SNES.png",
+      "gif1" : "/images/mario_y_yoshi_right.gif",
+      "gif2" : "/images/mario_y_yoshi_left.gif",
+      "idle" : "/images/Mario64.gif",
       "text": "SNES",
       "className": "box-snes",
       "description": "SNES emulators allow you to play Super Nintendo Entertainment System games on modern devices. Popular SNES emulators include bsnes, Snes9x, and ZSNES, offering high compatibility and features like save states, cheat codes, and graphical enhancements1",
@@ -14,6 +17,9 @@
   },
   {
       "image": "/emu/Desmume.png",
+      "gif1": "/images/charizard_right.gif",
+      "gif2": "/images/charizard_left.gif",
+      "idle": "/images/shinycharidle.gif",
       "text": "Desmume",
       "className": "box-desmume",
       "description": "DeSmuME is a Nintendo DS emulator that enables playing DS games on computers. It supports features like save states, cheat codes, and screen layout customization. DeSmuME is known for its high compatibility with the DS game library.",
@@ -27,6 +33,9 @@
   },
   {
       "image": "/emu/genesisPlusGX.png",
+      "gif1" : "/images/DreamCast_Moving_Right.gif",
+      "gif2" : "/images/DreamCast_Moving_Left.gif",
+      "idle": "images/sonicidle.gif",
       "text": "genesisPlusGX",
       "className": "box-genesis",
       "description": "Genesis Plus GX is a multi-system emulator that primarily focuses on Sega systems. It supports the Sega Genesis/Mega Drive, Sega CD, Master System, Game Gear, and SG-1000. The emulator offers high accuracy and various enhancement options.",
@@ -40,6 +49,9 @@
   },
   {
       "image": "/emu/Mesen.png",
+      "gif1" : "/images/mega_man_right.gif",
+      "gif2" : "/images/mega_man_left.gif",
+      "idle": "images/megaidle.gif",
       "text": "Mesen",
       "className": "box-Mesen",
       "description": "Mesen is a high-accuracy NES and Famicom emulator. It also supports other 8-bit Nintendo systems like the Game Boy and Game Boy Color. Mesen is known for its cycle-accurate emulation and extensive debugging features.",
@@ -53,6 +65,9 @@
   },
   {
       "image": "/emu/mupen64plus.png",
+      "gif1" : "/images/Link64.gif",
+      "gif2" : "/images/Link64.gif",
+      "idle": "/images/linkidle.gif",
       "text": "Mupen",
       "className": "box-Mupen",
       "description": "Mupen64Plus is an open-source Nintendo 64 emulator. It provides good compatibility with the N64 game library and supports features like high-resolution textures, save states, and various audio and video plugins.",
@@ -65,7 +80,10 @@
       ]
   },
   {
-      "image": "/emu/PCSX.png",
+      "image": "/emu/pcsx.png",
+      "gif1" : "/images/crash_right.gif",
+      "gif2" : "/images/crash_left.gif",
+      "idle": "/images/crashidle.gif",
       "text": "PCSX",
       "className": "box-PCSX",
       "description": "PCSX-ReARMed is a PlayStation 1 emulator optimized for ARM devices. It offers good compatibility and performance, making it popular for emulating PS1 games on mobile devices and single-board computers.",
@@ -77,21 +95,11 @@
       "Spyro the Dragon"
       ]
   },
-  {
-      "image": "/emu/PCSX.png",
-      "text": "PCSX2",
-      "className": "box-PCSX",
-      "description": "PCSX2 is a PlayStation 2 emulator that allows users to play PS2 games on PC. It offers features like improved graphics, save states, and cheat codes. PCSX2 has high compatibility with the PS2 game library and continues to be actively developed.",
-      "games": [
-      "Shadow of the Colossus",
-      "Final Fantasy X",
-      "Metal Gear Solid 3: Snake Eater",
-      "Kingdom Hearts II",
-      "Gran Turismo 4"
-      ]
-  },
   {
       "image": "/emu/ppsspp.png",
+      "gif1" : "/images/metal-gear_right.gif",
+      "gif2" : "/images/metal-gear_left.gif",
+      "idle":"/images/mgsidle.gif",
       "text": "PPSSPP",
       "className": "box-PPSSPP",
       "description": "PPSSPP (PlayStation Portable Simulator Suitable for Playing Portably) is a PSP emulator that runs on various platforms. It offers enhanced graphics, save states, and network play features, allowing users to enjoy PSP games with improved visuals.",
@@ -105,6 +113,9 @@
   },
   {
       "image": "/emu/redream.png",
+      "gif1" : "/images/liu_kang_right.gif",
+      "gif2" : "/images/liu_kang_left.gif",
+      "idle": "/images/kangidle.gif",
       "text": "Redream",
       "className": "box-Redream",
       "description": "Redream is a Sega Dreamcast emulator known for its ease of use and good performance. It supports high-resolution rendering, save states, and controller remapping, providing an accessible way to play Dreamcast games on modern systems.",