diff --git a/docs/_static/css/custom.css b/docs/_static/css/custom.css
new file mode 100644
index 000000000..bdb170b90
--- /dev/null
+++ b/docs/_static/css/custom.css
@@ -0,0 +1,25 @@
+@font-face {
+  font-family: 'Hanken Grotesk';
+  src: url('../fonts/HankenGrotesk-Regular.woff2') format('woff2'),
+      url('../fonts/HankenGrotesk-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+    font-family: 'Plus Jakarta Sans';
+    src: url('../fonts/PlusJakartaSans-Regular.woff2') format('woff2'),
+        url('../fonts/PlusJakartaSans-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+h1 {
+  color: var(--color-brand-content);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Plus Jakarta Sans";
+}
diff --git a/docs/_static/fonts/HankenGrotesk-Regular.woff b/docs/_static/fonts/HankenGrotesk-Regular.woff
new file mode 100644
index 000000000..3c37d1086
Binary files /dev/null and b/docs/_static/fonts/HankenGrotesk-Regular.woff differ
diff --git a/docs/_static/fonts/HankenGrotesk-Regular.woff2 b/docs/_static/fonts/HankenGrotesk-Regular.woff2
new file mode 100644
index 000000000..b590f738b
Binary files /dev/null and b/docs/_static/fonts/HankenGrotesk-Regular.woff2 differ
diff --git a/docs/_static/fonts/PlusJakartaSans-Regular.woff b/docs/_static/fonts/PlusJakartaSans-Regular.woff
new file mode 100644
index 000000000..fe04e8de5
Binary files /dev/null and b/docs/_static/fonts/PlusJakartaSans-Regular.woff differ
diff --git a/docs/_static/fonts/PlusJakartaSans-Regular.woff2 b/docs/_static/fonts/PlusJakartaSans-Regular.woff2
new file mode 100644
index 000000000..c4d6797c8
Binary files /dev/null and b/docs/_static/fonts/PlusJakartaSans-Regular.woff2 differ
diff --git a/docs/_static/img/favicon.png b/docs/_static/img/favicon.png
new file mode 100644
index 000000000..4a111130a
Binary files /dev/null and b/docs/_static/img/favicon.png differ
diff --git a/docs/_static/img/melty-apple-touch-icon.png b/docs/_static/img/melty-apple-touch-icon.png
deleted file mode 100644
index 7b64991cb..000000000
Binary files a/docs/_static/img/melty-apple-touch-icon.png and /dev/null differ
diff --git a/docs/_static/img/melty-favicon-16x16.png b/docs/_static/img/melty-favicon-16x16.png
deleted file mode 100644
index d726fe28c..000000000
Binary files a/docs/_static/img/melty-favicon-16x16.png and /dev/null differ
diff --git a/docs/_static/img/melty-favicon-32x32.png b/docs/_static/img/melty-favicon-32x32.png
deleted file mode 100644
index a480a5798..000000000
Binary files a/docs/_static/img/melty-favicon-32x32.png and /dev/null differ
diff --git a/docs/_templates/base.html b/docs/_templates/base.html
index e00171465..27af40b1f 100644
--- a/docs/_templates/base.html
+++ b/docs/_templates/base.html
@@ -1,9 +1,9 @@
 {% extends '!base.html' %}
 {% block extrahead %}
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans&amp;display=swap">
-  <link rel="apple-touch-icon" sizes="180x180" href="{{ pathto('_static/img/melty-apple-touch-icon.png', 1) }}">
-  <link rel="icon" type="image/png" sizes="32x32" href="{{ pathto('_static/img/melty-favicon-32x32.png', 1) }}">
-  <link rel="icon" type="image/png" sizes="16x16" href="{{ pathto('_static/img/melty-favicon-16x16.png', 1) }}">
+  <link rel="apple-touch-icon" sizes="180x180" href="{{ pathto('_static/img/favicon.png', 1) }}">
+  <link rel="icon" type="image/png" sizes="32x32" href="{{ pathto('_static/img/favicon.png', 1) }}">
+  <link rel="icon" type="image/png" sizes="192x192" href="{{ pathto('_static/img/favicon.png', 1) }}">
   <!-- Google tag (gtag.js) -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=GTM-WHJMBX2"></script>
   <script>
diff --git a/docs/conf.py b/docs/conf.py
index 2bd921aef..3bd711368 100644
--- a/docs/conf.py
+++ b/docs/conf.py
@@ -71,22 +71,39 @@
     "sidebar_hide_name": True,
     # branding
     "light_css_variables": {
-        "color-brand-primary": "#3438bf",
-        "color-brand-content": "#3438bf",
+        "font-stack": "Hanken Grotesk,-apple-system,Helvetica,sans-serif",
+        "color-foreground-primary": "#080216",
+        "color-background-primary": "#E9E5FB",
+        "color-link": "#f963bc",
+        "color-link-underline": "transparent",
+        "color-link--hover": "#f963bc",
+        "color-link-underline--hover": "#f963bc",
+        # brand
+        "color-brand-primary": "#311772",
+        "color-brand-content": "#311772",
         # sidebar
-        "color-sidebar-background": "#3438bf",
-        "color-sidebar-item-background--hover": "#3438bf",
+        "color-sidebar-background": "#311772",
+        "color-sidebar-search-background": "#E9E5FB",
+        "color-sidebar-item-background--hover": "#311772",
+        "color-sidebar-item-expander-background--hover": "#311772",
         "color-sidebar-brand-text": "white",
-        "color-sidebar-caption-text": "white",
+        "color-sidebar-caption-text": "rgba(255, 255, 255, 0.7)",
         "color-sidebar-link-text": "white",
         "color-sidebar-link-text--top-level": "white",
     },
     "dark_css_variables": {
-        "color-brand-primary": "#3438bf",
-        "color-brand-content": "#3438bf",
-        # siderbar
-        "color-sidebar-background": "#3438bf",
-        "color-sidebar-item-background--hover": "#3438bf",
+        "color-background-primary": "#080216",
+        "color-link": "#18c3fa",
+        "color-link-underline": "transparent",
+        "color-link--hover": "#18c3fa",
+        "color-link-underline--hover": "#18c3fa",
+        # brand
+        "color-brand-primary": "#311772",
+        "color-brand-content": "rgba(255, 255, 255, 0.7)",
+        # sidebar
+        "color-sidebar-background": "#311772",
+        "color-sidebar-search-background": "#080216",
+        "color-sidebar-item-background--hover": "#311772",
     },
 }
 
@@ -95,6 +112,10 @@
 # so a file named "default.css" will overwrite the builtin "default.css".
 html_static_path = ["_static"]
 
+html_css_files = [
+    "css/custom.css",
+]
+
 myst_heading_anchors = 3
 
 redirects = {