diff --git a/edit/index.html b/edit/index.html
index fbf52d7..11a0f1f 100644
--- a/edit/index.html
+++ b/edit/index.html
@@ -15,21 +15,23 @@
     <link rel="icon" type="image/png" sizes="24x24" href="/img/icon_x24.png">
     <link rel="manifest" href="/site.webmanifest">
     <link rel="shortcut icon" href="favicon.ico">
-    <meta name="theme-color" content="#212529">
-    <!-- Twitter card -->
+    <meta name="theme-color" content="#343a40">
+    <!-- Open Graph card -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="PhotoStack" />
+    <meta property="og:description" content="Convert, resize, watermark, and crop images in a few clicks." />
+    <meta property="og:image" content="https://photostack.app/img/maskable_icon_x512.png" />
+    <meta property="og:image:width" content="512" />
+    <meta property="og:image:height" content="512" />
+    <meta name="og:image:alt" content="PhotoStack icon" />
     <meta name="twitter:card" content="summary" />
-    <meta name="twitter:creator" content="@corbindavenport" />
-    <meta name="twitter:title" content="PhotoStack" />
-    <meta name="twitter:description" content="Convert, resize, watermark, and crop images in a few clicks." />
-    <meta name="twitter:image" content="https://photostack.app/img/maskable_icon_x512.png" />
-    <meta name="twitter:image:alt" content="PhotoStack app icon" />
     <!-- Analytics -->
     <script defer data-domain="photostack.app" src="https://plausible.io/js/plausible.js"></script>
 </head>
 
 <body>
     <!-- Navbar -->
-    <nav class="navbar fixed-top navbar-expand-sm bg-dark border-bottom d-print-none">
+    <nav class="navbar fixed-top navbar-expand-sm bg-light-subtle border-bottom d-print-none">
         <div class="container-fluid">
             <a class="navbar-brand d-sm-none" href="#">PhotoStack</a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -340,7 +342,7 @@ <h5 class="modal-title" id="photostack-export-modal-label">
                     <div class="mb-3">
                         <input type="text" class="form-control" id="photostack-file-name-pattern" autocomplete="on" placeholder="Name pattern" enterkeyhint="done">
                     </div>
-                        <button type="button" id="photostack-start-export-btn" class="btn w-100 btn-primary">Start export</button>
+                    <button type="button" id="photostack-start-export-btn" class="btn w-100 btn-primary">Start export</button>
                 </div>
             </div>
             <!-- Export in progress modal -->
@@ -435,4 +437,4 @@ <h5 class="modal-title" id="photostack-export-modal-label">Export images</h5>
     <script src="/js/register-sw.js"></script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index ff85e5e..f4c6ab2 100644
--- a/index.html
+++ b/index.html
@@ -15,14 +15,16 @@
     <link rel="icon" type="image/png" sizes="24x24" href="img/icon_x24.png">
     <link rel="manifest" href="site.webmanifest">
     <link rel="shortcut icon" href="favicon.ico">
-    <meta name="theme-color" content="#212529">
-    <!-- Twitter card -->
+    <meta name="theme-color" content="#343a40">
+    <!-- Open Graph card -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="PhotoStack" />
+    <meta property="og:description" content="Convert, resize, watermark, and crop images in a few clicks." />
+    <meta property="og:image" content="https://photostack.app/img/maskable_icon_x512.png" />
+    <meta property="og:image:width" content="512" />
+    <meta property="og:image:height" content="512" />
+    <meta name="og:image:alt" content="PhotoStack icon" />
     <meta name="twitter:card" content="summary" />
-    <meta name="twitter:creator" content="@corbindavenport" />
-    <meta name="twitter:title" content="PhotoStack" />
-    <meta name="twitter:description" content="Convert, resize, watermark, and crop images in a few clicks." />
-    <meta name="twitter:image" content="https://photostack.app/img/maskable_icon_x512.png" />
-    <meta name="twitter:image:alt" content="PhotoStack app icon" />
     <!-- Analytics -->
     <script defer data-domain="photostack.app" src="https://plausible.io/js/plausible.js"></script>
 </head>
@@ -30,7 +32,7 @@
 <body style="padding-top: 40px;">
 
     <!-- Nav bar -->
-    <nav class="navbar fixed-top navbar-expand-sm bg-dark border-bottom">
+    <nav class="navbar fixed-top navbar-expand-sm bg-light-subtle border-bottom d-print-none">
         <div class="container-fluid">
             <a class="navbar-brand d-sm-none" href="#">PhotoStack</a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
diff --git a/site.webmanifest b/site.webmanifest
index 9429878..ceaeec6 100644
--- a/site.webmanifest
+++ b/site.webmanifest
@@ -26,7 +26,7 @@
             "purpose": "maskable"
         }
     ],
-    "theme_color": "#212529",
+    "theme_color": "#343a40",
     "background_color": "#212529",
     "display": "standalone",
     "start_url": "/edit?utm_source=Installed%20App&utm_medium=Home%20Screen"
diff --git a/watermarks/index.html b/watermarks/index.html
index 406871c..065ba0f 100644
--- a/watermarks/index.html
+++ b/watermarks/index.html
@@ -15,14 +15,16 @@
     <link rel="icon" type="image/png" sizes="24x24" href="/img/icon_x24.png">
     <link rel="manifest" href="/site.webmanifest">
     <link rel="shortcut icon" href="/favicon.ico">
-    <meta name="theme-color" content="#212529">
-    <!-- Twitter card -->
+    <meta name="theme-color" content="#343a40">
+    <!-- Open Graph card -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="PhotoStack" />
+    <meta property="og:description" content="Convert, resize, watermark, and crop images in a few clicks." />
+    <meta property="og:image" content="https://photostack.app/img/maskable_icon_x512.png" />
+    <meta property="og:image:width" content="512" />
+    <meta property="og:image:height" content="512" />
+    <meta name="og:image:alt" content="PhotoStack icon" />
     <meta name="twitter:card" content="summary" />
-    <meta name="twitter:creator" content="@corbindavenport" />
-    <meta name="twitter:title" content="PhotoStack" />
-    <meta name="twitter:description" content="Convert, resize, watermark, and crop images in a few clicks." />
-    <meta name="twitter:image" content="https://photostack.app/img/maskable_icon_x512.png" />
-    <meta name="twitter:image:alt" content="PhotoStack app icon" />
     <!-- Analytics -->
     <script defer data-domain="photostack.app" src="https://plausible.io/js/plausible.js"></script>
 </head>
@@ -30,7 +32,7 @@
 <body style="padding-top: 40px;">
 
     <!-- Nav bar -->
-    <nav class="navbar fixed-top navbar-expand-sm bg-dark border-bottom">
+    <nav class="navbar fixed-top navbar-expand-sm bg-light-subtle border-bottom d-print-none">
         <div class="container-fluid">
             <a class="navbar-brand d-sm-none" href="#">PhotoStack</a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
