diff --git a/app/auth/change-password-page/page.tsx b/app/auth/change-password-page/page.tsx
index e78f5084..59002ffe 100644
--- a/app/auth/change-password-page/page.tsx
+++ b/app/auth/change-password-page/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 import Image from "next/image";
-import logo from "@/app/logo.png";
+import logo from "@/public/belinda-images/logo.png";
 import { ChangeEventHandler, FormEventHandler, useState } from "react";
 import Visibility from "@mui/icons-material/Visibility";
 import VisibilityOff from "@mui/icons-material/VisibilityOff";
diff --git a/app/auth/reset-password-page/page.tsx b/app/auth/reset-password-page/page.tsx
index 8ec10d0c..e84ebd13 100644
--- a/app/auth/reset-password-page/page.tsx
+++ b/app/auth/reset-password-page/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 import Image from "next/image";
-import logo from "@/app/logo.png";
+import logo from "@/public/belinda-images/logo.png";
 import { ChangeEventHandler, FormEventHandler, useState } from "react";
 import Visibility from "@mui/icons-material/Visibility";
 import VisibilityOff from "@mui/icons-material/VisibilityOff";
diff --git a/app/auth/sign-in/page.tsx b/app/auth/sign-in/page.tsx
index 1c80cc89..c3b338e7 100644
--- a/app/auth/sign-in/page.tsx
+++ b/app/auth/sign-in/page.tsx
@@ -3,7 +3,7 @@
 import { ChangeEventHandler, FormEventHandler, useState } from "react";
 import { useRouter } from "next/navigation";
 import Image from "next/image";
-import mascot from "../../nsc_mascot_green_cropped.png";
+import mascot from "@/public/belinda-images/nsc_mascot_green_cropped.png";
 import {
   Stack,
   Paper,
diff --git a/app/auth/sign-up/page.tsx b/app/auth/sign-up/page.tsx
index 607ab2b1..21aec499 100644
--- a/app/auth/sign-up/page.tsx
+++ b/app/auth/sign-up/page.tsx
@@ -6,7 +6,7 @@ import VisibilityOff from "@mui/icons-material/VisibilityOff";
 import { IconButton, InputAdornment, TextField } from "@mui/material";
 import { Box, Button, Paper, Typography, Stack } from "@mui/material";
 import Image from "next/image";
-import mascot from "../../nsc_mascot_green_cropped.png";
+import mascot from "@/public/belinda-images/nsc_mascot_green_cropped.png";
 import { Link as MuiLink } from "@mui/material";
 import ErrorAlert from "@/components/ErrorAlert";
 import SuccessAlert from "@/components/SuccessAlert";
diff --git a/app/category-page/[categoryId]/page.tsx b/app/category-page/[categoryId]/page.tsx
index cd3f98c6..b14d1a96 100644
--- a/app/category-page/[categoryId]/page.tsx
+++ b/app/category-page/[categoryId]/page.tsx
@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect, Dispatch, SetStateAction } from "react";
 import ProductCard from "@/components/ProductCard";
-import logo from "../../logo.png";
+import logo from "@/public/belinda-images/logo.png";
 import { Container, Grid, Typography } from "@mui/material";
 // WARNING: You won't be able to connect to local backend unless you remove the env variable below.
 const URL =
diff --git a/app/category-page/[categoryId]/products/[productId]/ProductDetailDisplay.tsx b/app/category-page/[categoryId]/products/[productId]/ProductDetailDisplay.tsx
index 43e45b59..a7a2788b 100644
--- a/app/category-page/[categoryId]/products/[productId]/ProductDetailDisplay.tsx
+++ b/app/category-page/[categoryId]/products/[productId]/ProductDetailDisplay.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Image from "next/image";
-import logo from "@/app/logo.png";
+import logo from "@/public/belinda-images/logo.png";
 import {
   Box,
   Button,
diff --git a/app/page.tsx b/app/page.tsx
index 49a49e40..3316f18d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,8 +1,8 @@
 "use client";
 import React from "react";
 import Image from "next/image";
-import logo from "./logo.png";
-import google_play from "./google_play.png";
+import logo from "@/public/belinda-images/logo.png";
+import google_play from "@/public/belinda-images/google_play.png";
 import CustomCardContent from "@/components/CustomCardContent";
 import Grid from "@mui/material/Unstable_Grid2";
 import Stack from "@mui/material/Stack";
diff --git a/components/CategoryImages.tsx b/components/CategoryImages.tsx
index 965b585d..0461e3af 100644
--- a/components/CategoryImages.tsx
+++ b/components/CategoryImages.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import { useTheme } from "@mui/material";
 
 // Categories list
 export const categories = [
@@ -23,14 +24,14 @@ export function Category({
   title: string;
   alt: string;
 }) {
+  const { palette } = useTheme();
+  const darkImagePath = `/categories-images/dark-images/${id}.png`;
+  const lightImagePath = `/categories-images/light-images/${id}.png`;
+
+  // Check the current theme mode and set the image path accordingly
+  const imagePath = palette.mode === "dark" ? lightImagePath : darkImagePath;
   return (
-    <Image
-      src={`/categories-images/${id}.png`}
-      title={title}
-      alt={alt}
-      width={100}
-      height={100}
-    />
+    <Image src={imagePath} title={title} alt={alt} width={100} height={100} />
   );
 }
 
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 8d4fb271..189d4ec6 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -3,7 +3,7 @@
 import Link from "next/link";
 import React, { useEffect, useState } from "react";
 import Image from "next/image";
-import logo from "../app/logo.png";
+import header_logo from "@/public/belinda-images/header_logo.png";
 import {
   AppBar,
   Button,
@@ -52,7 +52,7 @@ export default function Navbar() {
     <Box sx={{ textAlign: "center" }}>
       <Link href="/" passHref>
         <Button color="secondary">
-          <Image src={logo} alt="logo" width={70} height={50} />
+          <Image src={header_logo} alt="logo" width={100} height={50} />
         </Button>
       </Link>
       <Divider />
@@ -122,7 +122,7 @@ export default function Navbar() {
           <Box sx={{ flexGrow: 1 }}>
             <Link href="/" passHref>
               <Button color="secondary">
-                <Image src={logo} alt="logo" width={70} height={50}/>
+                <Image src={header_logo} alt="logo" width={100} height={50}/>
               </Button>
             </Link>
           </Box>
diff --git a/app/google_play.png b/public/belinda-images/google_play.png
similarity index 100%
rename from app/google_play.png
rename to public/belinda-images/google_play.png
diff --git a/public/belinda-images/header_logo.png b/public/belinda-images/header_logo.png
new file mode 100644
index 00000000..7674ef0e
Binary files /dev/null and b/public/belinda-images/header_logo.png differ
diff --git a/app/logo.png b/public/belinda-images/logo.png
similarity index 100%
rename from app/logo.png
rename to public/belinda-images/logo.png
diff --git a/app/nsc_mascot_green_cropped.png b/public/belinda-images/nsc_mascot_green_cropped.png
similarity index 100%
rename from app/nsc_mascot_green_cropped.png
rename to public/belinda-images/nsc_mascot_green_cropped.png
diff --git a/public/categories-images/accessories.png b/public/categories-images/dark-images/accessories.png
similarity index 100%
rename from public/categories-images/accessories.png
rename to public/categories-images/dark-images/accessories.png
diff --git a/public/categories-images/casual.png b/public/categories-images/dark-images/casual.png
similarity index 100%
rename from public/categories-images/casual.png
rename to public/categories-images/dark-images/casual.png
diff --git a/public/categories-images/dress.png b/public/categories-images/dark-images/dress.png
similarity index 100%
rename from public/categories-images/dress.png
rename to public/categories-images/dark-images/dress.png
diff --git a/public/categories-images/jacket.png b/public/categories-images/dark-images/jacket.png
similarity index 100%
rename from public/categories-images/jacket.png
rename to public/categories-images/dark-images/jacket.png
diff --git a/public/categories-images/pants.png b/public/categories-images/dark-images/pants.png
similarity index 100%
rename from public/categories-images/pants.png
rename to public/categories-images/dark-images/pants.png
diff --git a/public/categories-images/shirt.png b/public/categories-images/dark-images/shirt.png
similarity index 100%
rename from public/categories-images/shirt.png
rename to public/categories-images/dark-images/shirt.png
diff --git a/public/categories-images/shoe.png b/public/categories-images/dark-images/shoe.png
similarity index 100%
rename from public/categories-images/shoe.png
rename to public/categories-images/dark-images/shoe.png
diff --git a/public/categories-images/skirt.png b/public/categories-images/dark-images/skirt.png
similarity index 100%
rename from public/categories-images/skirt.png
rename to public/categories-images/dark-images/skirt.png
diff --git a/public/categories-images/suit.png b/public/categories-images/dark-images/suit.png
similarity index 100%
rename from public/categories-images/suit.png
rename to public/categories-images/dark-images/suit.png
diff --git a/public/categories-images/light-images/accessories.png b/public/categories-images/light-images/accessories.png
new file mode 100644
index 00000000..1a72d4ee
Binary files /dev/null and b/public/categories-images/light-images/accessories.png differ
diff --git a/public/categories-images/light-images/casual.png b/public/categories-images/light-images/casual.png
new file mode 100644
index 00000000..54142ae6
Binary files /dev/null and b/public/categories-images/light-images/casual.png differ
diff --git a/public/categories-images/light-images/dress.png b/public/categories-images/light-images/dress.png
new file mode 100644
index 00000000..76e9038a
Binary files /dev/null and b/public/categories-images/light-images/dress.png differ
diff --git a/public/categories-images/light-images/jacket.png b/public/categories-images/light-images/jacket.png
new file mode 100644
index 00000000..efffbcf2
Binary files /dev/null and b/public/categories-images/light-images/jacket.png differ
diff --git a/public/categories-images/light-images/pants.png b/public/categories-images/light-images/pants.png
new file mode 100644
index 00000000..06fe778c
Binary files /dev/null and b/public/categories-images/light-images/pants.png differ
diff --git a/public/categories-images/light-images/shirt.png b/public/categories-images/light-images/shirt.png
new file mode 100644
index 00000000..b880aa49
Binary files /dev/null and b/public/categories-images/light-images/shirt.png differ
diff --git a/public/categories-images/light-images/shoe.png b/public/categories-images/light-images/shoe.png
new file mode 100644
index 00000000..b764f001
Binary files /dev/null and b/public/categories-images/light-images/shoe.png differ
diff --git a/public/categories-images/light-images/skirt.png b/public/categories-images/light-images/skirt.png
new file mode 100644
index 00000000..8d56c69e
Binary files /dev/null and b/public/categories-images/light-images/skirt.png differ
diff --git a/public/categories-images/light-images/suit.png b/public/categories-images/light-images/suit.png
new file mode 100644
index 00000000..e6b5b450
Binary files /dev/null and b/public/categories-images/light-images/suit.png differ