diff --git a/web/index.html b/web/index.html
index 4bd3744..c50f9f5 100644
--- a/web/index.html
+++ b/web/index.html
@@ -18,22 +18,37 @@
 
   <meta charset="UTF-8">
   <meta content="IE=Edge" http-equiv="X-UA-Compatible">
-  <meta name="description" content="A new Flutter project.">
+  <meta name="description" content="MapFlow">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="theme-color" content="#05030B">
 
   <!-- iOS meta tags & icons -->
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
-  <meta name="apple-mobile-web-app-title" content="mapflow">
+  <meta name="apple-mobile-web-app-title" content="MapFlow">
   <link rel="apple-touch-icon" href="icons/Icon-192.png">
 
   <!-- Favicon -->
   <link rel="icon" type="image/png" href="favicon.png"/>
 
-  <title>mapflow</title>
+  <title>MapFlow</title>
   <link rel="manifest" href="manifest.json">
   <script src="https://telegram.org/js/telegram-web-app.js"></script>
+  <style>
+    html,
+    body {
+      background: #05030B;
+      color: #F8EEFF;
+      height: 100%;
+      margin: 0;
+    }
+
+    body {
+      overflow: hidden;
+    }
+  </style>
 </head>
-<body>
+<body style="background: #05030B;">
   <script src="flutter_bootstrap.js" async></script>
 </body>
 </html>
diff --git a/web/index.prod.html b/web/index.prod.html
index 249a460..f2e6d6f 100644
--- a/web/index.prod.html
+++ b/web/index.prod.html
@@ -7,7 +7,7 @@
   <meta content="IE=Edge" http-equiv="X-UA-Compatible">
   <meta name="description" content="MapFlow">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="theme-color" content="#0d1b2a">
+  <meta name="theme-color" content="#05030B">
   <script src="https://telegram.org/js/telegram-web-app.js"></script>
 
   <meta name="mobile-web-app-capable" content="yes">
@@ -21,11 +21,20 @@
   <link rel="manifest" href="manifest.json">
   <style>
     #sw-loading {
-      background: #0d1b2a !important;
+      background: #05030B !important;
+      color: #F8EEFF !important;
+    }
+
+    html,
+    body {
+      background: #05030B;
+      color: #F8EEFF;
+      min-height: 100%;
+      margin: 0;
     }
   </style>
 </head>
-<body>
+<body style="background: #05030B;">
   <script>
     if ('serviceWorker' in navigator) {
       var refreshing = false;
@@ -81,7 +90,7 @@
       "logo": "icons/Icon-192.png?v={{sw_version}}",
       "title": "MapFlow",
       "theme": "dark",
-      "color": "#46d3b1",
+      "color": "#FF2D75",
       "showPercentage": true
     }'
   ></script>
diff --git a/web/manifest.json b/web/manifest.json
index 52862ce..39657be 100644
--- a/web/manifest.json
+++ b/web/manifest.json
@@ -1,11 +1,11 @@
 {
-    "name": "mapflow",
-    "short_name": "mapflow",
+    "name": "MapFlow",
+    "short_name": "MapFlow",
     "start_url": ".",
     "display": "standalone",
-    "background_color": "#0175C2",
-    "theme_color": "#0175C2",
-    "description": "A new Flutter project.",
+    "background_color": "#05030B",
+    "theme_color": "#05030B",
+    "description": "MapFlow",
     "orientation": "portrait-primary",
     "prefer_related_applications": false,
     "icons": [
