diff --git a/packages/frontend/public/Favicon Lightmode.ico b/packages/frontend/public/Favicon Lightmode.ico
new file mode 100644
index 0000000..1951bdc
Binary files /dev/null and b/packages/frontend/public/Favicon Lightmode.ico differ
diff --git a/packages/frontend/public/favicon darkmode.ico b/packages/frontend/public/favicon darkmode.ico
new file mode 100644
index 0000000..1cf7aa8
Binary files /dev/null and b/packages/frontend/public/favicon darkmode.ico differ
diff --git a/packages/frontend/public/index.html b/packages/frontend/public/index.html
index a9dcad2..e062220 100644
--- a/packages/frontend/public/index.html
+++ b/packages/frontend/public/index.html
@@ -2,14 +2,18 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>estimate-me.png">
+    <meta content="IE=edge" http-equiv="X-UA-Compatible">
+    <meta content="width=device-width,initial-scale=1.0" name="viewport">
+    <link href="<%= BASE_URL %>favicon-darkmode.ico?v=2" media="(prefers-color-scheme: dark)" rel="icon">
+    <link href="<%= BASE_URL %>favicon-lightmode.ico?v=2" media="(prefers-color-scheme: light)" rel="icon">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>
+        We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+        Please enable it to continue.
+      </strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
