diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index e585dcf..fbdf8b5 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -6,11 +6,11 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
     - name: Configure Node.js
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v4
       with:
-        node-version: '14.x'
+        node-version: '20'
     - name: Install dependencies
       run: npm install
     - name: Test interface
diff --git a/background.png b/background.png
index 9192d1d..919a810 100644
Binary files a/background.png and b/background.png differ
diff --git a/download.html b/download.html
index ec94328..f9bc2f6 100644
--- a/download.html
+++ b/download.html
@@ -10,6 +10,9 @@
     <meta property="og:url" content="https://i.privittytech.com">
 
     <link rel="icon" href="identity.png" sizes="any" type="image/svg+xml">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
 
     <title>Get Privitty Chat - Privitty Chat</title>
     <style>
@@ -20,9 +23,9 @@
         }
 
         body {
-            font-family: Arial, Avant Garde, Avantgarde, Century Gothic, CenturyGothic, AppleGothic, sans-serif;
-            background-color: #f4f4f4;
-            color: #333;
+            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+            background-color: #F8F5FF;
+            color: #2d2a3a;
             display: flex;
             flex-direction: column;
             align-items: center;
@@ -31,8 +34,7 @@
 
         nav {
             width: 100%;
-            background-color: #159957;
-            background-image: linear-gradient(120deg, #051551, #854DFF);
+            background-color: #7F66C5;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -102,7 +104,7 @@
 
         .container a {
             text-decoration: none;
-            color: #007BFF;
+            color: #7F66C5;
             font-size: 16px;
         }
 
@@ -111,7 +113,8 @@
         }
 
         .download-platform {
-            background-color: #ccd6fe;
+            background-color: rgba(127, 102, 197, 0.12);
+            border: 1px solid rgba(127, 102, 197, 0.2);
             border-radius: 10px;
             padding: 10px;
             display: none;
@@ -134,9 +137,9 @@
             justify-content: center;
             height: 48px;
             padding: 5px;
-            background: #111;
+            background: #7F66C5;
             color: white;
-            border: 2px solid #444;
+            border: 2px solid #6b52b0;
             box-sizing: border-box;
             border-radius: 10px;
             text-decoration: none;
@@ -150,20 +153,21 @@
         }
 
         .download-platform-android {
-            background-color: #ccd6fe;
+            background-color: rgba(127, 102, 197, 0.12);
+            border: 1px solid rgba(127, 102, 197, 0.2);
             border-radius: 10px;
             padding: 10px;
             display: none;
         }
 
         #show-all-platforms a {
-            color: #333;
+            color: #2d2a3a;
         }
 
         #show-all-platforms a::before {
             content: "▶ ";
             margin-right: 6px;
-            color: #333;
+            color: #7F66C5;
         }
 
         #android-header {
@@ -181,7 +185,7 @@
         .coming-soon h1 {
             font-size: 2em;
             margin: 10px 0;
-            color: #007BFF;
+            color: #7F66C5;
         }
 
         .footer-links {
@@ -193,7 +197,7 @@
 
         footer {
             margin-top: auto;
-            background-color: #e3e3e3;
+            background-color: #7F66C5;
             color: white;
             text-align: center;
             padding: 10px;
@@ -201,16 +205,20 @@
         }
 
         footer p,
-        li {
-            color: #333;
+        footer li {
+            color: #F8F5FF;
         }
 
         footer .footer-links li a {
             margin: 0 10px;
-            color: #007BFF;
+            color: #F8F5FF;
             text-decoration: none;
         }
 
+        footer .footer-links li a:hover {
+            text-decoration: underline;
+        }
+
         @media only screen and (min-width: 640px) {
             .container {
                 margin: 0 auto;
diff --git a/identity.png b/identity.png
index d19e209..e50ce1d 100644
Binary files a/identity.png and b/identity.png differ
diff --git a/index.html b/index.html
index 60e3e30..9091051 100644
--- a/index.html
+++ b/index.html
@@ -17,6 +17,9 @@
     <meta property="twitter:site" content="@privitty_chat">
 
     <link rel="icon" href="identity.png" sizes="any" type="image/svg+xml">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
 
     <script src="./qr.min.js"></script>
     <script src="./i18n/i18next.min.js"></script>
@@ -28,23 +31,27 @@
     <style>
         :root {
             --pad: 8px;
-            --dc-color-1: #051551;
-            --dc-color-2: #854DFF;
-            --dc-gradient: linear-gradient(120deg, var(--dc-color-1), var(--dc-color-2));
+            --privitty-primary: #7F66C5;
+            --privitty-primary-dark: #6b52b0;
+            --privitty-foreground: #F8F5FF;
+            --privitty-gradient: linear-gradient(135deg, var(--privitty-primary) 0%, var(--privitty-primary-dark) 100%);
         }
 
         body {
             margin: 0;
 
-            font-family: Arial, Avant Garde, Avantgarde, Century Gothic, CenturyGothic, AppleGothic, sans-serif;
-            font-size: 12pt;
+            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+            font-size: 14pt;
 
-            background: url('background.png');
+            background: var(--privitty-foreground);
+            background-image: url('background.png');
             background-size: 500px;
+            background-color: var(--privitty-foreground);
+            color: #2d2a3a;
         }
 
         a {
-            color: #1e6bb8;
+            color: var(--privitty-primary);
             text-decoration: none;
         }
 
@@ -55,10 +62,10 @@
 
         header {
             padding: var(--pad);
-            font-family: Arial, 'Helvetica Neue', Helvetica;
+            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
             font-size: 18pt;
-            background: var(--dc-gradient);
-            box-shadow: 0px 0px 3px #888;
+            background: var(--privitty-primary);
+            box-shadow: 0 2px 8px rgba(127, 102, 197, 0.25);
         }
 
         header a {
@@ -85,9 +92,9 @@
 
         #box {
             border-radius: 16px;
-            background: white;
-            padding: 15px;
-            box-shadow: 0px 0px 10px #ccc;
+            background: var(--privitty-foreground);
+            padding: 24px;
+            box-shadow: 0 4px 24px rgba(127, 102, 197, 0.12);
 
             max-width: 420px;
             margin-left: auto;
@@ -113,14 +120,22 @@
         #dc-link,
         .download,
         .share-link {
-            padding: 10px;
+            padding: 12px 20px;
             border-radius: 30px;
-            font-size: 10pt;
-            font-weight: bold;
+            font-size: 11pt;
+            font-weight: 600;
             text-transform: uppercase;
+            letter-spacing: 0.5px;
             text-decoration: none;
             color: white;
-            background: var(--dc-gradient);
+            background: var(--privitty-primary);
+            transition: background 0.2s ease, transform 0.1s ease;
+        }
+
+        #dc-link:hover,
+        .download:hover,
+        .share-link:hover {
+            background: var(--privitty-primary-dark);
         }
 
         /* circle numbers for ol https://jsfiddle.net/j2gK8/  */
@@ -167,8 +182,9 @@
             top: -10px;
             border-radius: 999px;
 
-            color: var(--dc-color-2);
-            background: #f4f4f4;
+            color: var(--privitty-primary);
+            background: rgba(127, 102, 197, 0.08);
+            border: 1px solid rgba(127, 102, 197, 0.2);
             font-size: 14pt;
             text-align: center;
         }
diff --git a/ui-test-_localize.js b/ui-test-_localize.js
index 4c02abb..c6b5523 100644
--- a/ui-test-_localize.js
+++ b/ui-test-_localize.js
@@ -28,7 +28,7 @@ Object.entries(require('fs').readdirSync(require('path').join(__dirname, 'i18n')
 
     it('localizes description', () => expect(page.locator('meta[name="description"]')).toHaveAttribute('content', t('DescriptionText')));
 
-    it('localizes logo', () => expect(page.locator('.logo-text')).toHaveText('Delta Chat'));
+    it('localizes logo', () => expect(page.locator('.logo-text')).toHaveText('Privitty Chat'));
 
     context('without info', () => {