diff --git a/frontend/src/assets/dash-dark.png b/frontend/src/assets/dash-dark.png
new file mode 100644
index 00000000..d429f1f0
Binary files /dev/null and b/frontend/src/assets/dash-dark.png differ
diff --git a/frontend/src/assets/dash-light.png b/frontend/src/assets/dash-light.png
new file mode 100644
index 00000000..4fd4769b
Binary files /dev/null and b/frontend/src/assets/dash-light.png differ
diff --git a/frontend/src/assets/dashboard-dark.png b/frontend/src/assets/dashboard-dark.png
new file mode 100644
index 00000000..b6d927c9
Binary files /dev/null and b/frontend/src/assets/dashboard-dark.png differ
diff --git a/frontend/src/assets/dashboard-light.png b/frontend/src/assets/dashboard-light.png
new file mode 100644
index 00000000..310179fa
Binary files /dev/null and b/frontend/src/assets/dashboard-light.png differ
diff --git a/frontend/src/components/Features.jsx b/frontend/src/components/Features.jsx
index fd287a21..ffd43629 100644
--- a/frontend/src/components/Features.jsx
+++ b/frontend/src/components/Features.jsx
@@ -17,8 +17,8 @@ const items = [
     title: "AI-Powered Insights",
     description:
       "Automatically analyzes logs and CSV files, providing instant error highlights and suggested solutions.",
-    imageLight: `url("${"https://mui.com"}/static/images/templates/templates-images/dash-light.png")`,
-    imageDark: `url("${"https://mui.com"}/static/images/templates/templates-images/dash-dark.png")`,
+    imageLight: `url("../assets/dash-light.png")`,
+    imageDark: `url("../assets//dash-dark.png")`,
   },
   {
     icon: <EdgesensorHighRoundedIcon />,
diff --git a/frontend/src/components/Hero.jsx b/frontend/src/components/Hero.jsx
index 94eb598b..6aa89929 100644
--- a/frontend/src/components/Hero.jsx
+++ b/frontend/src/components/Hero.jsx
@@ -7,6 +7,8 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { styled } from "@mui/material/styles";
 import dashboardImage from "../assets/dashboard.png";
+import dashboardImageDark from "../assets/dashboard-dark.png";
+import dashboardImageLight from "../assets/dashboard-light.png";
 
 const StyledBox = styled("div")(({ theme }) => ({
   alignSelf: "center",
@@ -19,7 +21,7 @@ const StyledBox = styled("div")(({ theme }) => ({
   border: "1px solid",
   borderColor: (theme.vars || theme).palette.grey[200],
   boxShadow: "0 0 12px 8px hsla(220, 25%, 80%, 0.2)",
-  backgroundImage: `url(${dashboardImage})`,
+  backgroundImage: `url(${dashboardImageLight})`,
   backgroundSize: "cover",
   [theme.breakpoints.up("sm")]: {
     marginTop: theme.spacing(10),
@@ -27,7 +29,7 @@ const StyledBox = styled("div")(({ theme }) => ({
   },
   ...theme.applyStyles("dark", {
     boxShadow: "0 0 24px 12px hsla(210, 100%, 25%, 0.2)",
-    backgroundImage: `url(${dashboardImage})`,
+    backgroundImage: `url(${dashboardImageDark})`,
     outlineColor: "hsla(220, 20%, 42%, 0.1)",
     borderColor: (theme.vars || theme).palette.grey[700],
   }),