diff --git a/components/explore/Navbar.tsx b/components/explore/Navbar.tsx
index 44b327e..8917dc0 100644
--- a/components/explore/Navbar.tsx
+++ b/components/explore/Navbar.tsx
@@ -11,7 +11,7 @@ import { useAccount, useDisconnect } from "@starknet-react/core";
 import { useAuth } from "@/components/auth/auth-provider";
 import ConnectModal from "../connectWallet";
 import ProfileModal from "./ProfileModal";
-import Avatar from "@/public/Images/user.png";
+import { Avatar } from "@/public/Images";
 import ProfileDropdown from "../ui/profileDropdown";
 
 interface NavbarProps {
@@ -229,7 +229,9 @@ export default function Navbar({}: NavbarProps) {
   };
 
   const handleProfileDisplayModal = useCallback(async () => {
-    if (!address) {return;}
+    if (!address) {
+      return;
+    }
 
     setIsLoading(true);
     try {
@@ -330,7 +332,9 @@ export default function Navbar({}: NavbarProps) {
                 setIsSearchDropdownOpen(true);
               }}
               onFocus={() => {
-                if (searchResults.length > 0) {setIsSearchDropdownOpen(true);}
+                if (searchResults.length > 0) {
+                  setIsSearchDropdownOpen(true);
+                }
               }}
               className={`w-full bg-input rounded-xl py-2 pl-10 pr-4 text-sm outline-none focus:ring-1 focus:ring-highlight focus:outline-none`}
             />
diff --git a/components/landing-page/footer.tsx b/components/landing-page/footer.tsx
index 5f79a4b..a5f3bad 100644
--- a/components/landing-page/footer.tsx
+++ b/components/landing-page/footer.tsx
@@ -4,7 +4,7 @@ import { motion } from "framer-motion";
 import Link from "next/link";
 import Image from "next/image";
 import { Mail } from "lucide-react";
-import Logo from "@/public/Images/streamFiLogo.svg";
+import { Logo } from "@/public/Images";
 import Section from "@/components/layout/Section";
 
 export default function Footer() {
diff --git a/components/settings/profile/profile-page.tsx b/components/settings/profile/profile-page.tsx
index 0591c38..f45687a 100644
--- a/components/settings/profile/profile-page.tsx
+++ b/components/settings/profile/profile-page.tsx
@@ -1,10 +1,12 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 "use client";
 import { useEffect, useCallback, useState } from "react";
 import type React from "react";
 import { useAuth } from "@/components/auth/auth-provider";
 import { motion, AnimatePresence } from "framer-motion";
-import profileImage from "@/public/Images/profile.png";
-import Avatar from "@/public/icons/avatar.svg";
+// Remove direct image imports
+import { Avatar } from "@/public/icons";
+import { ProfileImage } from "@/public/Images";
 import VerificationPopup from "./popup";
 import AvatarSelectionModal from "./avatar-modal";
 import type {
@@ -30,7 +32,7 @@ export default function ProfileSettings() {
   const { showToast } = useToast();
 
   const [avatar, setAvatar] = useState<StaticImageData | string | File>(
-    profileImage
+    ProfileImage
   );
   const [socialLinks, setSocialLinks] = useState<SocialLink[]>([]);
 
@@ -381,7 +383,7 @@ export default function ProfileSettings() {
 
       // Prepare avatar data if it's a File/Blob
       let avatarData: string | File | undefined;
-      if (typeof avatar === "string" && avatar !== profileImage.src) {
+      if (typeof avatar === "string" && avatar !== "/Images/profile.png") {
         avatarData = avatar;
       } else if (avatar instanceof File) {
         avatarData = avatar;
diff --git a/components/ui/streamkeyModal.tsx b/components/ui/streamkeyModal.tsx
index 383e311..33b3e22 100644
--- a/components/ui/streamkeyModal.tsx
+++ b/components/ui/streamkeyModal.tsx
@@ -1,7 +1,7 @@
 "use client";
 import React, { useEffect, useState } from "react";
 import Image from "next/image";
-import Copy from "@/public/Images/copy.png";
+import { Copy } from "@/public/Images";
 import { motion, AnimatePresence } from "framer-motion";
 
 interface StreamKeyModalProps {
diff --git a/data/landing-page/community.ts b/data/landing-page/community.ts
index 828737d..0b0f2e2 100644
--- a/data/landing-page/community.ts
+++ b/data/landing-page/community.ts
@@ -1,27 +1,23 @@
 import { CardProps } from "@/types/landing-page";
-import key from "../../public/Images/key.png";
-import bulb from "../../public/Images/bulb.png";
-import podcast from "../../public/Images/podcast.png";
-import folder from "../../public/Images/folder.png";
 
 export const cards: CardProps[] = [
   {
-    icon: key,
+    icon: "/Images/key.png",
     title: "Exclusive Beta Access",
     description: "Be first to try out new features",
   },
   {
-    icon: bulb,
+    icon: "/Images/bulb.png",
     title: "Knowledge Based & Resources",
     description: "Learn everything about web3 streaming and monitization",
   },
   {
-    icon: podcast,
+    icon: "/Images/podcast.png",
     title: "Networking Opportunities",
     description: "Connect with top creators, investors and web3 pioneers",
   },
   {
-    icon: folder,
+    icon: "/Images/folder.png",
     title: "Earning Potential",
     description:
       "Unlock multiple revenue streams through decentralised streaming",
diff --git a/public/Images/index.ts b/public/Images/index.ts
new file mode 100644
index 0000000..0cb45d5
--- /dev/null
+++ b/public/Images/index.ts
@@ -0,0 +1,20 @@
+import CoinbaseLogo from "./coinbase-logo.png";
+import StripeLogo from "./stripe-logo.png";
+import YoutubeLogo from "./youtube-logo.png";
+import Discord from "./discord copy.svg";
+import Copy from "@/public/Images/copy.png";
+import Avatar from "@/public/Images/user.png";
+import AboutImage2 from './About-image (2).svg'
+import ProfileImage from './profile.png'
+import Logo from './streamFiLogo.svg'
+export {
+  CoinbaseLogo,
+  StripeLogo,
+  YoutubeLogo,
+  Discord,
+  Copy,
+  Avatar,
+  AboutImage2,
+  ProfileImage,
+  Logo
+};
diff --git a/public/Images/index.tsx b/public/Images/index.tsx
deleted file mode 100644
index ac92df8..0000000
--- a/public/Images/index.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import AboutImage from "./about-image.png";
-import StripeLogo from "./stripe-logo.png";
-import YoutubeLogo from "./youtube-logo.png";
-import CoinbaseLogo from "./coinbase-logo.png";
-import StreamHero from "./Stream-Fi.png";
-import Discord from "./discord_.png";
-import AboutImage2 from "./About-image (2).svg";
-
-export {
-  AboutImage,
-  CoinbaseLogo,
-  StripeLogo,
-  YoutubeLogo,
-  StreamHero,
-  Discord,
-  AboutImage2,
-};
diff --git a/public/icons/index.ts b/public/icons/index.ts
index f8a05e9..dfa98b9 100644
--- a/public/icons/index.ts
+++ b/public/icons/index.ts
@@ -7,6 +7,7 @@ import VerifySuccess from "./verify-success.svg";
 import Pfp1 from "./Recommend pfps.svg";
 import Pfp2 from "./Recommend pfps (1).svg";
 import Pfp3 from "./Recommend pfps (2).svg";
+import Avatar from './avatar.svg'
 export {
   CommunityIcon,
   MoneyLink,
@@ -17,4 +18,5 @@ export {
   Pfp3,
   StreamfiLogoShort,
   StreamfiLogoLight,
+  Avatar
 };
diff --git a/types/image.d.ts b/types/image.d.ts
new file mode 100644
index 0000000..80d25e0
--- /dev/null
+++ b/types/image.d.ts
@@ -0,0 +1,29 @@
+declare module "*.png" {
+    const content: string;
+    export default content;
+  }
+  
+  declare module "*.jpg" {
+    const content: string;
+    export default content;
+  }
+  
+  declare module "*.jpeg" {
+    const content: string;
+    export default content;
+  }
+  
+  declare module "*.svg" {
+    const content: string;
+    export default content;
+  }
+  
+  declare module "*.gif" {
+    const content: string;
+    export default content;
+  }
+  
+  declare module "*.webp" {
+    const content: string;
+    export default content;
+  }
\ No newline at end of file
diff --git a/types/images.d.ts b/types/images.d.ts
new file mode 100644
index 0000000..a541730
--- /dev/null
+++ b/types/images.d.ts
@@ -0,0 +1,29 @@
+declare module "*.png" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.jpg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.jpeg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.gif" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.webp" {
+  const content: string;
+  export default content;
+}