diff --git a/app/apple-icon.png b/app/apple-icon.png
index 32bacc80..c61d9438 100644
Binary files a/app/apple-icon.png and b/app/apple-icon.png differ
diff --git a/app/components/logo.tsx b/app/components/logo.tsx
index 7d191e84..ce8f1a50 100644
--- a/app/components/logo.tsx
+++ b/app/components/logo.tsx
@@ -1,9 +1,17 @@
 import { SquareChartGanttIcon } from 'lucide-react';
+import Image from 'next/image';
 import type { FC } from 'react';
 
 export const Logo: FC = () => (
   <div className="flex items-center gap-2">
-    <SquareChartGanttIcon className="h-6 w-6" />
+    <Image
+      src="/logo.png"
+      alt="Roadmap UI"
+      width={24}
+      height={24}
+      className="dark:hidden"
+    />
+    <SquareChartGanttIcon className="hidden h-4 w-4 dark:block" />
     <span className="font-semibold">Roadmap UI</span>
   </div>
 );
diff --git a/app/icon.png b/app/icon.png
index df0a4151..8479a33b 100644
Binary files a/app/icon.png and b/app/icon.png differ
diff --git a/app/opengraph-image.png b/app/opengraph-image.png
index b8e7986b..8f8e9ddf 100644
Binary files a/app/opengraph-image.png and b/app/opengraph-image.png differ
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 00000000..d1100209
Binary files /dev/null and b/public/logo.png differ