diff --git a/tools/walletextension/frontend/next.config.js b/tools/walletextension/frontend/next.config.js
index f6b0385fbb..5d5086f7cb 100644
--- a/tools/walletextension/frontend/next.config.js
+++ b/tools/walletextension/frontend/next.config.js
@@ -4,6 +4,9 @@ const nextConfig = {
   output: "export",
   // distDir should be "../api/static" in production but .next in development
   distDir: process.env.NODE_ENV === "development" ? ".next" : "../api/static",
+  images: {
+    unoptimized: true,
+  },
 };
 
 module.exports = nextConfig;
diff --git a/tools/walletextension/frontend/public/assets/images/black_logotype.png b/tools/walletextension/frontend/public/assets/images/black_logotype.png
new file mode 100644
index 0000000000..f086b796a2
Binary files /dev/null and b/tools/walletextension/frontend/public/assets/images/black_logotype.png differ
diff --git a/tools/walletextension/frontend/public/assets/images/favicon.ico b/tools/walletextension/frontend/public/assets/images/favicon.ico
new file mode 100644
index 0000000000..0e8dea2f71
Binary files /dev/null and b/tools/walletextension/frontend/public/assets/images/favicon.ico differ
diff --git a/tools/walletextension/frontend/public/assets/images/white_logotype.png b/tools/walletextension/frontend/public/assets/images/white_logotype.png
new file mode 100644
index 0000000000..f3c47d13f9
Binary files /dev/null and b/tools/walletextension/frontend/public/assets/images/white_logotype.png differ
diff --git a/tools/walletextension/frontend/public/favicon.ico b/tools/walletextension/frontend/public/favicon.ico
index 1bb8f324a1..0e8dea2f71 100644
Binary files a/tools/walletextension/frontend/public/favicon.ico and b/tools/walletextension/frontend/public/favicon.ico differ
diff --git a/tools/walletextension/frontend/src/components/layouts/header.tsx b/tools/walletextension/frontend/src/components/layouts/header.tsx
index d2ddfb493d..a04de0fea8 100644
--- a/tools/walletextension/frontend/src/components/layouts/header.tsx
+++ b/tools/walletextension/frontend/src/components/layouts/header.tsx
@@ -6,13 +6,27 @@ import { HamburgerMenuIcon } from "@radix-ui/react-icons";
 import { useState } from "react";
 import { Button } from "../ui/button";
 import HealthIndicator from "../health-indicator";
+import Image from "next/image";
 
 export default function Header() {
   return (
     <div className="border-b">
       <div className="flex h-16 justify-between items-center px-4">
         <Link href="/">
-          <h1 className="text-40">TEN.</h1>
+          <Image
+            src="/assets/images/black_logotype.png"
+            alt="Logo"
+            width={150}
+            height={40}
+            className="cursor-pointer dark:hidden"
+          />
+          <Image
+            src="/assets/images/white_logotype.png"
+            alt="Logo"
+            width={150}
+            height={40}
+            className="cursor-pointer hidden dark:block"
+          />
         </Link>
         <div className="hidden md:flex items-center space-x-4">
           <MainNav className="mx-6" />
diff --git a/tools/walletextension/frontend/src/styles/fonts/CloudSoft-Bold_700.otf b/tools/walletextension/frontend/src/styles/fonts/CloudSoft-Bold_700.otf
deleted file mode 100644
index ed9d1c4014..0000000000
Binary files a/tools/walletextension/frontend/src/styles/fonts/CloudSoft-Bold_700.otf and /dev/null differ
diff --git a/tools/walletextension/frontend/src/styles/fonts/CloudSoft-Light_300.otf b/tools/walletextension/frontend/src/styles/fonts/CloudSoft-Light_300.otf
deleted file mode 100644
index 2e309e36c3..0000000000
Binary files a/tools/walletextension/frontend/src/styles/fonts/CloudSoft-Light_300.otf and /dev/null differ
diff --git a/tools/walletextension/frontend/src/styles/fonts/DMSans/DMSans-BlackItalic.ttf b/tools/walletextension/frontend/src/styles/fonts/DMSans/DMSans-BlackItalic.ttf
new file mode 100644
index 0000000000..df12ca10d2
Binary files /dev/null and b/tools/walletextension/frontend/src/styles/fonts/DMSans/DMSans-BlackItalic.ttf differ
diff --git a/tools/walletextension/frontend/src/styles/fonts/DMSans/DMSans-Bold.ttf b/tools/walletextension/frontend/src/styles/fonts/DMSans/DMSans-Bold.ttf
new file mode 100644
index 0000000000..809e9788a3
Binary files /dev/null and b/tools/walletextension/frontend/src/styles/fonts/DMSans/DMSans-Bold.ttf differ
diff --git a/tools/walletextension/frontend/src/styles/fonts/DMSans/DMSans-Light.ttf b/tools/walletextension/frontend/src/styles/fonts/DMSans/DMSans-Light.ttf
new file mode 100644
index 0000000000..1acb39b2d1
Binary files /dev/null and b/tools/walletextension/frontend/src/styles/fonts/DMSans/DMSans-Light.ttf differ
diff --git a/tools/walletextension/frontend/src/styles/fonts/DMSans/DMSans-Medium.ttf b/tools/walletextension/frontend/src/styles/fonts/DMSans/DMSans-Medium.ttf
new file mode 100644
index 0000000000..c29713e545
Binary files /dev/null and b/tools/walletextension/frontend/src/styles/fonts/DMSans/DMSans-Medium.ttf differ
diff --git a/tools/walletextension/frontend/src/styles/fonts/DMSans/DMSans-Regular.ttf b/tools/walletextension/frontend/src/styles/fonts/DMSans/DMSans-Regular.ttf
new file mode 100644
index 0000000000..28ff3c878d
Binary files /dev/null and b/tools/walletextension/frontend/src/styles/fonts/DMSans/DMSans-Regular.ttf differ
diff --git a/tools/walletextension/frontend/src/styles/fonts/DMSans/DMSans-SemiBold.ttf b/tools/walletextension/frontend/src/styles/fonts/DMSans/DMSans-SemiBold.ttf
new file mode 100644
index 0000000000..4dde30434e
Binary files /dev/null and b/tools/walletextension/frontend/src/styles/fonts/DMSans/DMSans-SemiBold.ttf differ
diff --git a/tools/walletextension/frontend/src/styles/fonts/DMSans/stylesheet.css b/tools/walletextension/frontend/src/styles/fonts/DMSans/stylesheet.css
new file mode 100644
index 0000000000..7367dcc84a
--- /dev/null
+++ b/tools/walletextension/frontend/src/styles/fonts/DMSans/stylesheet.css
@@ -0,0 +1,47 @@
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-BlackItalic.ttf") format("truetype");
+  font-weight: 900;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-Bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-Light.ttf") format("truetype");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-SemiBold.ttf") format("truetype");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
diff --git a/tools/walletextension/frontend/src/styles/fonts/Quicksand/Quicksand-Bold.ttf b/tools/walletextension/frontend/src/styles/fonts/Quicksand/Quicksand-Bold.ttf
new file mode 100644
index 0000000000..07d5127c04
Binary files /dev/null and b/tools/walletextension/frontend/src/styles/fonts/Quicksand/Quicksand-Bold.ttf differ
diff --git a/tools/walletextension/frontend/src/styles/fonts/Quicksand/Quicksand-Light.ttf b/tools/walletextension/frontend/src/styles/fonts/Quicksand/Quicksand-Light.ttf
new file mode 100644
index 0000000000..800531084f
Binary files /dev/null and b/tools/walletextension/frontend/src/styles/fonts/Quicksand/Quicksand-Light.ttf differ
diff --git a/tools/walletextension/frontend/src/styles/fonts/Quicksand/Quicksand-Medium.ttf b/tools/walletextension/frontend/src/styles/fonts/Quicksand/Quicksand-Medium.ttf
new file mode 100644
index 0000000000..f4634cd7c3
Binary files /dev/null and b/tools/walletextension/frontend/src/styles/fonts/Quicksand/Quicksand-Medium.ttf differ
diff --git a/tools/walletextension/frontend/src/styles/fonts/Quicksand/Quicksand-Regular.ttf b/tools/walletextension/frontend/src/styles/fonts/Quicksand/Quicksand-Regular.ttf
new file mode 100644
index 0000000000..60323ed6ab
Binary files /dev/null and b/tools/walletextension/frontend/src/styles/fonts/Quicksand/Quicksand-Regular.ttf differ
diff --git a/tools/walletextension/frontend/src/styles/fonts/Quicksand/Quicksand-SemiBold.ttf b/tools/walletextension/frontend/src/styles/fonts/Quicksand/Quicksand-SemiBold.ttf
new file mode 100644
index 0000000000..52059c3a3d
Binary files /dev/null and b/tools/walletextension/frontend/src/styles/fonts/Quicksand/Quicksand-SemiBold.ttf differ
diff --git a/tools/walletextension/frontend/src/styles/fonts/Quicksand/stylesheet.css b/tools/walletextension/frontend/src/styles/fonts/Quicksand/stylesheet.css
new file mode 100644
index 0000000000..4a585442d8
--- /dev/null
+++ b/tools/walletextension/frontend/src/styles/fonts/Quicksand/stylesheet.css
@@ -0,0 +1,39 @@
+@font-face {
+  font-family: "Quicksand";
+  src: url("Quicksand-Bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Quicksand";
+  src: url("Quicksand-Light.ttf") format("truetype");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Quicksand";
+  src: url("Quicksand-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Quicksand";
+  src: url("Quicksand-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Quicksand";
+  src: url("Quicksand-SemiBold.ttf") format("truetype");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
diff --git a/tools/walletextension/frontend/src/styles/globals.css b/tools/walletextension/frontend/src/styles/globals.css
index 78e53ef9e8..2906ab7bef 100644
--- a/tools/walletextension/frontend/src/styles/globals.css
+++ b/tools/walletextension/frontend/src/styles/globals.css
@@ -2,27 +2,22 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
-  @font-face {
-    font-family: "CloudSoft";
-    font-weight: 400;
-    src: url("./fonts/CloudSoft-Light_300.otf") format("opentype");
-  }
+@import "./fonts/DMSans/stylesheet.css";
+@import "./fonts/Quicksand/stylesheet.css";
 
-  @font-face {
-    font-family: "CloudSoft";
-    font-weight: 500;
-    src: url("./fonts/CloudSoft-Bold_700.otf") format("opentype");
+@layer base {
+  * {
+    @apply border-border;
   }
 
-  @font-face {
-    font-family: "CloudSoft";
-    font-weight: 700;
-    src: url("./fonts/CloudSoft-Bold_700.otf") format("opentype");
+  html {
+    font-family: "DMSans", sans-serif;
   }
 
-  html {
-    font-family: "CloudSoft", sans-serif;
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+    font-family: "DMSans", sans-serif;
   }
 
   h1,
@@ -32,6 +27,7 @@
   h5,
   h6 {
     font-weight: 500;
+    font-family: "Quicksand", sans-serif;
   }
 
   :root {
@@ -120,23 +116,6 @@
 }
 
 @layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-weight: 500;
-  }
-
   /* styles for docs */
   .prose ul {
     list-style: disc;