diff --git a/web/index.html b/web/index.html
index 2643ee0..8269cca 100644
--- a/web/index.html
+++ b/web/index.html
@@ -1,3 +1,13 @@
+  <picture id="splash">
+    <source srcset="splash/img/light-1x.png 1x, splash/img/light-2x.png 2x, splash/img/light-3x.png 3x" media="(prefers-color-scheme: light) or (prefers-color-scheme: no-preference)">
+    <source srcset="splash/img/dark-1x.png 1x, splash/img/dark-2x.png 2x, splash/img/dark-3x.png 3x" media="(prefers-color-scheme: dark)">
+    <img class="center" src="splash/img/light-1x.png" />
+  </picture>
+  <picture id="splash">
+    <source srcset="splash/img/light-1x.png 1x, splash/img/light-2x.png 2x, splash/img/light-3x.png 3x" media="(prefers-color-scheme: light) or (prefers-color-scheme: no-preference)">
+    <source srcset="splash/img/dark-1x.png 1x, splash/img/dark-2x.png 2x, splash/img/dark-3x.png 3x" media="(prefers-color-scheme: dark)">
+    <img class="center" src="splash/img/light-1x.png" />
+  </picture>
 <!DOCTYPE html>
 <html>
 <head>
@@ -25,6 +35,7 @@
 
   <title>ozgurkon_app</title>
   <link rel="manifest" href="manifest.json">
+  <link rel="stylesheet" type="text/css" href="splash/style.css">
 </head>
 <body>
   <!-- This script installs service_worker.js to provide PWA functionality to
@@ -95,4 +106,4 @@
     }
   </script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/web/splash/img/dark-1x.png b/web/splash/img/dark-1x.png
new file mode 100644
index 0000000..cbc243f
Binary files /dev/null and b/web/splash/img/dark-1x.png differ
diff --git a/web/splash/img/dark-2x.png b/web/splash/img/dark-2x.png
new file mode 100644
index 0000000..4e53c49
Binary files /dev/null and b/web/splash/img/dark-2x.png differ
diff --git a/web/splash/img/dark-3x.png b/web/splash/img/dark-3x.png
new file mode 100644
index 0000000..b0eb9be
Binary files /dev/null and b/web/splash/img/dark-3x.png differ
diff --git a/web/splash/img/light-1x.png b/web/splash/img/light-1x.png
new file mode 100644
index 0000000..cbc243f
Binary files /dev/null and b/web/splash/img/light-1x.png differ
diff --git a/web/splash/img/light-2x.png b/web/splash/img/light-2x.png
new file mode 100644
index 0000000..4e53c49
Binary files /dev/null and b/web/splash/img/light-2x.png differ
diff --git a/web/splash/img/light-3x.png b/web/splash/img/light-3x.png
new file mode 100644
index 0000000..b0eb9be
Binary files /dev/null and b/web/splash/img/light-3x.png differ
diff --git a/web/splash/style.css b/web/splash/style.css
new file mode 100644
index 0000000..8a2de2e
--- /dev/null
+++ b/web/splash/style.css
@@ -0,0 +1,43 @@
+body, html {
+  margin:0;
+  height:100%;
+  background: #c03e24;
+  background-image: url("img/light-background.png");
+  background-size: 100% 100%;
+}
+
+.center {
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.contain {
+  display:block;
+  width:100%; height:100%;
+  object-fit: contain;
+}
+
+.stretch {
+  display:block;
+  width:100%; height:100%;
+}
+
+.cover {
+  display:block;
+  width:100%; height:100%;
+  object-fit: cover;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    margin:0;
+    height:100%;
+    background: #c03e24;
+    background-image: url("img/dark-background.png");
+    background-size: 100% 100%;
+  }
+}
