diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index 37b0c02..63e768e 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -1,6 +1,6 @@
 export default {
   title: 'DAO Documentation',
-  description: 'API3 technical documentation',
+  description: 'Api3 DAO Documentation',
   markdown: {
     lineNumbers: true,
     toc: ['h2', 'h3', 'h4', 'h5'],
@@ -19,7 +19,7 @@ export default {
       {
         rel: 'apple-touch-icon',
         sizes: '180x180',
-        href: '/img/small-logo.png',
+        href: '/img/android-chrome-192x192.png',
       },
     ],
     [
@@ -28,7 +28,7 @@ export default {
         rel: 'icon',
         type: 'image/png',
         sizes: '32x32',
-        href: '/img/small-logo.png',
+        href: '/img/android-chrome-192x192.png',
       },
     ],
     [
@@ -37,7 +37,7 @@ export default {
         rel: 'icon',
         type: 'image/png',
         sizes: '16x16',
-        href: '/img/small-logo.png',
+        href: '/img/android-chrome-192x192.png',
       },
     ],
   ],
@@ -67,20 +67,20 @@ export default {
     },
     externalLinkIcon: true,
     logo: {
-      light: '/img/API3-Active.png',
-      dark: '/img/api3-inactive.png',
+      light: '/img/api3-logo-light-theme.svg',
+      dark: '/img/api3-logo-dark-theme.svg',
     },
     siteTitle: 'DAO Documentation',
     socialLinks: [
       { icon: 'github', link: 'https://github.com/api3dao/dao-docs' },
       {
         icon: 'discord',
-        link: 'https://discord.com/channels/758003776174030948/765618225144266793',
+        link: 'https://discord.gg/api3dao',
       },
     ],
     footer: {
       message: 'Released under the MIT License.',
-      copyright: 'Copyright © 2019-present API3',
+      copyright: 'Copyright © 2019-present API3 Foundation',
     },
     sidebar: {
       '/': require('../sidebar.js'),
diff --git a/docs/index.md b/docs/index.md
index 9b8898b..1fcfd6c 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,16 +1,16 @@
 ---
-title: API3
+title: Api3
 pageHeader: Overview
 outline: deep
 ---
 
 <PageHeader/>
 
-# What is the API3 DAO?
+# What is the Api3 DAO?
 
-API3 delegates much of its governance to the vote of a Decentralized Autonomous
-Organization (DAO). API3 is a collaborative effort to build, manage and monetize
+Api3 delegates much of its governance to the vote of a Decentralized Autonomous
+Organization (DAO). Api3 is a collaborative effort to build, manage and monetize
 data feeds at scale. To achieve delegated governance and distribute grants in a
 fully decentralized way, the incentives and processes of the participants are
 reconciled through the governance, security, and value capture utilities of the
-API3 token and its powers in the API3 DAO.
+API3 token and its powers in the Api3 DAO.
diff --git a/docs/members/index.md b/docs/members/index.md
index 50aec28..9c029ed 100644
--- a/docs/members/index.md
+++ b/docs/members/index.md
@@ -1,5 +1,5 @@
 ---
-title: API3
+title: Api3
 pageHeader: Members
 outline: deep
 ---
@@ -9,7 +9,7 @@ outline: deep
 # Using the DAO Dashboard
 
 The [DAO Dashboard](https://dao.api3.org/) is the portal to participate in the
-API3 DAO. It is aimed at API3 members and others that want to interact with the
+Api3 DAO. It is aimed at Api3 members and others that want to interact with the
 DAO or modify/reuse any of its infrastructure. The DAO requires a web3 wallet,
 such as [MetaMask](https://metamask.io/download/), to be integrated with your
 browser. Be sure your wallet is connected to the Ethereum mainnet.
diff --git a/docs/members/proposals.md b/docs/members/proposals.md
index ac58b85..89e06cd 100644
--- a/docs/members/proposals.md
+++ b/docs/members/proposals.md
@@ -1,5 +1,5 @@
 ---
-title: API3
+title: Api3
 pageHeader: Members
 outline: deep
 ---
@@ -29,13 +29,13 @@ To view the percentage of staked tokens in the pool for an address, visit the
 
 In order for your proposal to succeed, a few steps are highly recommended.
 
-1. Promote your idea and gather feedback on the API3 forum using a
+1. Promote your idea and gather feedback on the Api3 forum using a
    [sentiment check post](https://forum.api3.org/t/sentiment-check-template/56).
    Generally, ideas receiving community engagement on the forum are more likely
    to pass once crafted as official proposals.
 2. Create an
    [official proposal](https://forum.api3.org/t/api3-dao-example-proposal-template/52)
-   post on the API3 forum. This should contain a link to the proposal
+   post on the Api3 forum. This should contain a link to the proposal
    description on IPFS.
 3. After receiving feedback from the above steps, create a formal proposal using
    the DAO dashboard as described below.
@@ -68,7 +68,7 @@ relative majority support.
    your proposal for discussion.
 
    **Why use IPFS?** Consider this use case: You posted on the
-   [API3 forum](https://forum.api3.org/) about a potential proposal. You
+   [Api3 forum](https://forum.api3.org/) about a potential proposal. You
    received positive feedback and decided to formally create a proposal using
    the DAO dashboard. In the proposal's description field you provide a link
    back to the forum so people can again see the proposal details. How does the
@@ -157,7 +157,7 @@ transfer(address,uint256)
 9. Click **Create** \
    The proposal is then added to the proposal list and can be voted on.
 10. **Return to the
-    [API3 forum](https://forum.api3.org/c/official-proposals/5)** \
+    [Api3 forum](https://forum.api3.org/c/official-proposals/5)** \
     Add a comment to your post with a link to your newly created proposal. This
     will help encourage community members to vote.
 
diff --git a/docs/members/staking.md b/docs/members/staking.md
index 249f3d1..fab3d63 100644
--- a/docs/members/staking.md
+++ b/docs/members/staking.md
@@ -1,5 +1,5 @@
 ---
-title: API3
+title: Api3
 pageHeader: Members
 outline: deep
 ---
diff --git a/docs/members/voting.md b/docs/members/voting.md
index 27dc8db..cae5d51 100644
--- a/docs/members/voting.md
+++ b/docs/members/voting.md
@@ -1,5 +1,5 @@
 ---
-title: API3
+title: Api3
 pageHeader: Members
 outline: deep
 ---
diff --git a/docs/overview/contributors.md b/docs/overview/contributors.md
index 29e1207..cc788c6 100644
--- a/docs/overview/contributors.md
+++ b/docs/overview/contributors.md
@@ -1,5 +1,5 @@
 ---
-title: API3
+title: Api3
 pageHeader: Overview
 outline: deep
 ---
@@ -10,10 +10,10 @@ outline: deep
 
 Contributors receive grants from the DAO and are often composed of hierarchical
 teams which manage, streamline, and secure the success of their deliverables to
-API3.
+Api3.
 
 A best-practice workflow is to form off-chain teams and apply for grants to
-execute one-time projects or time-defined operations that will benefit API3. The
+execute one-time projects or time-defined operations that will benefit Api3. The
 team makes the grant application with a multisig that has the team members
 assigned as owners, and the DAO permissionless-ly transfers the grant to the
 multisig if the proposal is accepted and passed by the DAO contract logic.
diff --git a/docs/overview/dao-tracker.md b/docs/overview/dao-tracker.md
index 9a3bf54..d3bee7d 100644
--- a/docs/overview/dao-tracker.md
+++ b/docs/overview/dao-tracker.md
@@ -1,5 +1,5 @@
 ---
-title: API3
+title: Api3
 pageHeader: Overview
 outline: deep
 ---
@@ -11,8 +11,8 @@ outline: deep
 The [DAO Tracker](https://tracker.api3.org/) is a community-developed tool that
 provides additional insight into the DAO beyond what is offered by the
 intentionally minimalist DAO Dashboard. The DAO Tracker covers staking and
-rewards, member wallets, proposals, and the API3 DAO treasury.
+rewards, member wallets, proposals, and the Api3 DAO treasury.
 
 Its [open source codebase](https://github.com/api3dao/api3-tracker) was
 initially developed by GitHub user EnormousCloud and is now maintained by the
-API3 team.
+Api3 team.
diff --git a/docs/overview/governance.md b/docs/overview/governance.md
index fda472d..c931cbc 100644
--- a/docs/overview/governance.md
+++ b/docs/overview/governance.md
@@ -1,5 +1,5 @@
 ---
-title: API3
+title: Api3
 pageHeader: Overview
 outline: deep
 ---
@@ -11,9 +11,9 @@ outline: deep
 The DAO votes on high-level matters such as staking incentives and
 collateralization (parameters of the DAO smart contract itself), as well as
 grant proposals that directly transfer DAO treasury assets to contributors of
-API3.
+Api3.
 
-The API3 ecosystem is a single token environment, using its native token (API3).
+The Api3 ecosystem is a single token environment, using its native token (API3).
 Check out the Medium post
 [API3 Tokenomics Update](https://medium.com/api3/api3-tokenomics-update-f032d6e49b30)
 for an in-depth overview on API3 tokenomics. To participate in governance, you
diff --git a/docs/overview/rewards.md b/docs/overview/rewards.md
index df80532..21a6c30 100644
--- a/docs/overview/rewards.md
+++ b/docs/overview/rewards.md
@@ -1,5 +1,5 @@
 ---
-title: API3
+title: Api3
 pageHeader: Overview
 outline: deep
 ---
diff --git a/docs/public/img/API3-Active.png b/docs/public/img/API3-Active.png
deleted file mode 100644
index d2d12b3..0000000
Binary files a/docs/public/img/API3-Active.png and /dev/null differ
diff --git a/docs/public/img/android-chrome-192x192.png b/docs/public/img/android-chrome-192x192.png
new file mode 100644
index 0000000..463f231
Binary files /dev/null and b/docs/public/img/android-chrome-192x192.png differ
diff --git a/docs/public/img/api3-inactive.png b/docs/public/img/api3-inactive.png
deleted file mode 100644
index 30c3be9..0000000
Binary files a/docs/public/img/api3-inactive.png and /dev/null differ
diff --git a/docs/public/img/api3-logo-dark-theme.svg b/docs/public/img/api3-logo-dark-theme.svg
new file mode 100644
index 0000000..841e3a9
--- /dev/null
+++ b/docs/public/img/api3-logo-dark-theme.svg
@@ -0,0 +1,3 @@
+<svg width="370" height="321" viewBox="0 0 370 321" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M184.971 0.858398L175.171 17.8111C174.952 18.1909 174.732 18.5704 174.513 18.9505L0 320.858H369.941L184.971 0.858398ZM123.502 152.567L39.4782 297.929C83.1804 296.884 122.482 291.8 151.822 277.027C161.178 272.316 169.442 266.656 176.497 259.858C157.835 247.118 144.393 232.456 135.643 216.06C125.148 196.396 121.847 175.073 123.459 153.142C123.473 152.95 123.487 152.759 123.502 152.567ZM160.319 298.154H330.296C307.145 260.185 282.053 226.995 253.877 207.215C245.246 201.156 236.428 196.431 227.37 193.206C225.82 217.162 219.881 237.224 209.996 253.835C198.358 273.395 181.71 287.397 162.033 297.305C161.464 297.592 160.893 297.875 160.319 298.154ZM267.547 189.085L185.102 46.4544C163.975 85.1408 148.523 121.996 146.112 154.792C145.524 162.79 145.719 170.48 146.781 177.86C167.036 168.413 186.497 164.576 205.181 165.692C227.826 167.045 248.365 175.616 266.929 188.648C267.135 188.793 267.341 188.939 267.547 189.085ZM155.687 205.374C154.748 203.614 153.879 201.831 153.08 200.026C171.69 190.735 188.509 187.43 203.837 188.346C204.19 188.367 204.543 188.39 204.895 188.416C203.889 210.905 198.685 228.348 190.62 241.998C173.765 230.754 162.629 218.382 155.687 205.374Z" fill="#F3F3F3"/>
+</svg>
diff --git a/docs/public/img/api3-logo-light-theme.svg b/docs/public/img/api3-logo-light-theme.svg
new file mode 100644
index 0000000..8355c2c
--- /dev/null
+++ b/docs/public/img/api3-logo-light-theme.svg
@@ -0,0 +1,3 @@
+<svg width="370" height="321" viewBox="0 0 370 321" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M184.971 0.608398L175.171 17.5611C174.952 17.9409 174.732 18.3204 174.513 18.7005L0 320.608H369.941L184.971 0.608398ZM123.502 152.317L39.4782 297.679C83.1804 296.634 122.482 291.55 151.822 276.777C161.178 272.066 169.442 266.406 176.497 259.608C157.835 246.868 144.393 232.206 135.643 215.81C125.148 196.146 121.847 174.823 123.459 152.892C123.473 152.7 123.487 152.509 123.502 152.317ZM160.319 297.904H330.296C307.145 259.935 282.053 226.745 253.877 206.965C245.246 200.906 236.428 196.181 227.37 192.956C225.82 216.912 219.881 236.974 209.996 253.585C198.358 273.145 181.71 287.147 162.033 297.055C161.464 297.342 160.893 297.625 160.319 297.904ZM267.547 188.835L185.102 46.2044C163.975 84.8908 148.523 121.746 146.112 154.542C145.524 162.54 145.719 170.23 146.781 177.61C167.036 168.163 186.497 164.326 205.181 165.442C227.826 166.795 248.365 175.366 266.929 188.398C267.135 188.543 267.341 188.689 267.547 188.835ZM155.687 205.124C154.748 203.364 153.879 201.581 153.08 199.776C171.69 190.485 188.509 187.18 203.837 188.096C204.19 188.117 204.543 188.14 204.895 188.166C203.889 210.655 198.685 228.098 190.62 241.748C173.765 230.504 162.629 218.132 155.687 205.124Z" fill="#1F267B"/>
+</svg>
diff --git a/docs/public/styles/api3.css b/docs/public/styles/api3.css
index 9387a9d..7b2f275 100644
--- a/docs/public/styles/api3.css
+++ b/docs/public/styles/api3.css
@@ -1,15 +1,619 @@
+
+/**
+ * Colors: Solid
+ * -------------------------------------------------------------------------- */
+
+ :root {
+  --vp-c-white: #ffffff;
+  --vp-c-black: #000000;
+
+  --vp-c-neutral: var(--vp-c-black);
+  --vp-c-neutral-inverse: var(--vp-c-white);
+}
+
+.dark {
+  --vp-c-neutral: var(--vp-c-white);
+  --vp-c-neutral-inverse: var(--vp-c-black);
+}
+
+/**
+ * Colors: Palette
+ *
+ * The primitive colors used for accent colors. These colors are referenced
+ * by functional colors such as "Text", "Background", or "Brand".
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ *
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *    It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *    top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *    or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *    on top of it.
+ *
+ *    The soft color must be semi transparent alpha channel. This is crucial
+ *    because it allows adding multiple "soft" colors on top of each other
+ *    to create a accent, such as when having inline code block inside
+ *    custom containers.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-gray-1: #c4cedf;
+  --vp-c-gray-2: #dce3ef;
+  --vp-c-gray-3: #eef2f6;
+  --vp-c-gray-soft: rgba(142, 155, 178, .1);
+
+  --vp-c-indigo-1: #2151fe;
+  --vp-c-indigo-2: #3368ff;
+  --vp-c-indigo-3: #153dd1;
+  --vp-c-indigo-soft: rgba(21, 61, 209, 0.1);
+
+  --vp-c-purple-1: #125da3;
+  --vp-c-purple-2: #1778d1;
+  --vp-c-purple-3: #1c92ff;
+  --vp-c-purple-soft: rgba(232, 244, 255, 0.6);
+
+  --vp-c-green-1: #10773f;
+  --vp-c-green-2: #159951;
+  --vp-c-green-3: #19ba63;
+  --vp-c-green-soft: rgba(232, 248, 239, 0.6);
+
+  --vp-c-yellow-1: #a37110;
+  --vp-c-yellow-2: #d19115;
+  --vp-c-yellow-3: #ffb119;
+  --vp-c-yellow-soft: rgba(255, 247, 232, 0.6);
+
+  --vp-c-red-1: #cf0a42;
+  --vp-c-red-2: #ec0e4d;
+  --vp-c-red-3: #ff1659;
+  --vp-c-red-soft: rgba(255, 219, 229, 0.6);
+
+  --vp-c-sponsor: #db2777;
+}
+
+.dark {
+  --vp-c-gray-1: #636f86;
+  --vp-c-gray-2: #455065;
+  --vp-c-gray-3: #313d52;
+  --vp-c-gray-soft: rgba(142, 155, 178, .16);
+
+  --vp-c-indigo-1: #7ea6ff;
+  --vp-c-indigo-2: #3e7aff;
+  --vp-c-indigo-3: #2151fe;
+  --vp-c-indigo-soft: rgba(21, 61, 209, 0.25);
+
+  --vp-c-purple-1: #a4d3ff;
+  --vp-c-purple-2: #82c3ff;
+  --vp-c-purple-3: #60b3ff;
+  --vp-c-purple-soft: rgba(13, 67, 117, 0.6);
+
+  --vp-c-green-1: #a3e3c1;
+  --vp-c-green-2: #81d9a9;
+  --vp-c-green-3: #5ecf92;
+  --vp-c-green-soft: rgba(12, 86, 46, 0.6);
+
+  --vp-c-yellow-1: #ffe0a3;
+  --vp-c-yellow-2: #ffd481;
+  --vp-c-yellow-3: #ffc85e;
+  --vp-c-yellow-soft: rgba(117, 81, 12, 0.6);
+
+  --vp-c-red-1: #ffb7cb;
+  --vp-c-red-2: #ff7099;
+  --vp-c-red-3: #ff477c;
+  --vp-c-red-soft: rgba(166, 0, 47, 0.6);
+}
+
+/**
+ * Colors: Background
+ *
+ * - `bg`: The bg color used for main screen.
+ *
+ * - `bg-alt`: The alternative bg color used in places such as "sidebar",
+ *   or "code block".
+ *
+ * - `bg-elv`: The elevated bg color. This is used at parts where it "floats",
+ *   such as "dialog".
+ *
+ * - `bg-soft`: The bg color to slightly distinguish some components from
+ *   the page. Used for things like "carbon ads" or "table".
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-bg: #fafafa;
+  --vp-c-bg-alt: #f2f4ff;
+  --vp-c-bg-elv: #f8fafd;
+  --vp-c-bg-soft: #f4f7fc;
+}
+
+.dark {
+  --vp-c-bg: #0c1143;
+  --vp-c-bg-alt: #090d38;
+  --vp-c-bg-elv: #0a1052;
+  --vp-c-bg-soft: #0a1052;
+}
+
+/**
+ * Colors: Borders
+ *
+ * - `divider`: This is used for separators. This is used to divide sections
+ *   within the same components, such as having separator on "h2" heading.
+ *
+ * - `border`: This is designed for borders on interactive components.
+ *   For example this should be used for a button outline.
+ *
+ * - `gutter`: This is used to divide components in the page. For example
+ *   the header and the lest of the page.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-border: #99a0e4;
+  --vp-c-divider: #d1d5fd;
+  --vp-c-gutter: #dce3ef;
+}
+
+.dark {
+  --vp-c-border: #293293;
+  --vp-c-divider: #1f267b;
+  --vp-c-gutter: #090d38;
+}
+
+/**
+ * Colors: Text
+ *
+ * - `text-1`: Used for primary text.
+ *
+ * - `text-2`: Used for muted texts, such as "inactive menu" or "info texts".
+ *
+ * - `text-3`: Used for subtle texts, such as "placeholders" or "caret icon".
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-text-1: #1f267b;
+  --vp-c-text-2: #5d66c4;
+  --vp-c-text-3: #636f86;
+}
+
+.dark {
+  --vp-c-text-1: #dce3ef;
+  --vp-c-text-2: #8e9bb2;
+  --vp-c-text-3: #636f86;
+}
+
+/**
+ * Colors: Function
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attached to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ *
+ * To understand the scaling system, refer to "Colors: Palette" section.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: var(--vp-c-indigo-1);
+  --vp-c-brand-2: var(--vp-c-indigo-2);
+  --vp-c-brand-3: var(--vp-c-indigo-3);
+  --vp-c-brand-soft: var(--vp-c-indigo-soft);
+
+  /* DEPRECATED: Use `--vp-c-brand-1` instead. */
+  --vp-c-brand: var(--vp-c-brand-1);
+
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-note-1: var(--vp-c-brand-1);
+  --vp-c-note-2: var(--vp-c-brand-2);
+  --vp-c-note-3: var(--vp-c-brand-3);
+  --vp-c-note-soft: var(--vp-c-brand-soft);
+
+  --vp-c-success-1: var(--vp-c-green-1);
+  --vp-c-success-2: var(--vp-c-green-2);
+  --vp-c-success-3: var(--vp-c-green-3);
+  --vp-c-success-soft: var(--vp-c-green-soft);
+
+  --vp-c-important-1: var(--vp-c-purple-1);
+  --vp-c-important-2: var(--vp-c-purple-2);
+  --vp-c-important-3: var(--vp-c-purple-3);
+  --vp-c-important-soft: var(--vp-c-purple-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
+
+  --vp-c-caution-1: var(--vp-c-red-1);
+  --vp-c-caution-2: var(--vp-c-red-2);
+  --vp-c-caution-3: var(--vp-c-red-3);
+  --vp-c-caution-soft: var(--vp-c-red-soft);
+}
+
+/**
+ * Typography
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-font-family-base: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+  --vp-font-family-mono: ui-monospace, 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+  font-optical-sizing: auto;
+}
+
+:root:where(:lang(zh)) {
+  --vp-font-family-base: 'Punctuation SC', 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
+/**
+ * Shadows
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --vp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
+  --vp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
+  --vp-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
+  --vp-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
+}
+
+/**
+ * Z-indexes
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-z-index-footer: 10;
+  --vp-z-index-local-nav: 20;
+  --vp-z-index-nav: 30;
+  --vp-z-index-layout-top: 40;
+  --vp-z-index-backdrop: 50;
+  --vp-z-index-sidebar: 60;
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-z-index-sidebar: 25;
+  }
+}
+
+/**
+ * Layouts
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-layout-max-width: 1440px;
+}
+
+/**
+ * Component: Header Anchor
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-header-anchor-symbol: '#';
+}
+
+/**
+ * Component: Code
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-code-line-height: 1.7;
+  --vp-code-font-size: 0.875em;
+  --vp-code-color: var(--vp-c-brand-1);
+  --vp-code-link-color: var(--vp-c-brand-1);
+  --vp-code-link-hover-color: var(--vp-c-brand-2);
+  --vp-code-bg: var(--vp-c-default-soft);
+
+  --vp-code-block-color: var(--vp-c-text-2);
+  --vp-code-block-bg: var(--vp-c-bg-alt);
+  --vp-code-block-divider-color: var(--vp-c-gutter);
+
+  --vp-code-lang-color: var(--vp-c-text-3);
+
+  --vp-code-line-highlight-color: var(--vp-c-default-soft);
+  --vp-code-line-number-color: var(--vp-c-text-3);
+
+  --vp-code-line-diff-add-color: var(--vp-c-success-soft);
+  --vp-code-line-diff-add-symbol-color: var(--vp-c-success-1);
+
+  --vp-code-line-diff-remove-color: var(--vp-c-danger-soft);
+  --vp-code-line-diff-remove-symbol-color: var(--vp-c-danger-1);
+
+  --vp-code-line-warning-color: var(--vp-c-warning-soft);
+  --vp-code-line-error-color: var(--vp-c-danger-soft);
+
+  --vp-code-copy-code-border-color: var(--vp-c-divider);
+  --vp-code-copy-code-bg: var(--vp-c-bg-soft);
+  --vp-code-copy-code-hover-border-color: var(--vp-c-divider);
+  --vp-code-copy-code-hover-bg: var(--vp-c-bg);
+  --vp-code-copy-code-active-text: var(--vp-c-text-2);
+  --vp-code-copy-copied-text-content: 'Copied';
+
+  --vp-code-tab-divider: var(--vp-code-block-divider-color);
+  --vp-code-tab-text-color: var(--vp-c-text-2);
+  --vp-code-tab-bg: var(--vp-code-block-bg);
+  --vp-code-tab-hover-text-color: var(--vp-c-text-1);
+  --vp-code-tab-active-text-color: var(--vp-c-text-1);
+  --vp-code-tab-active-bar-color: var(--vp-c-brand-1);
+}
+
+:lang(es),
+:lang(pt) {
+  --vp-code-copy-copied-text-content: 'Copiado';
+}
+:lang(fa) {
+  --vp-code-copy-copied-text-content: 'کپی شد';
+}
+:lang(ko) {
+  --vp-code-copy-copied-text-content: '복사됨';
+}
+:lang(ru) {
+  --vp-code-copy-copied-text-content: 'Скопировано';
+}
+:lang(zh) {
+  --vp-code-copy-copied-text-content: '已复制';
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+
+  --vp-button-alt-border: transparent;
+  --vp-button-alt-text: var(--vp-c-text-1);
+  --vp-button-alt-bg: var(--vp-c-default-3);
+  --vp-button-alt-hover-border: transparent;
+  --vp-button-alt-hover-text: var(--vp-c-text-1);
+  --vp-button-alt-hover-bg: var(--vp-c-default-2);
+  --vp-button-alt-active-border: transparent;
+  --vp-button-alt-active-text: var(--vp-c-text-1);
+  --vp-button-alt-active-bg: var(--vp-c-default-1);
+
+  --vp-button-sponsor-border: var(--vp-c-text-2);
+  --vp-button-sponsor-text: var(--vp-c-text-2);
+  --vp-button-sponsor-bg: transparent;
+  --vp-button-sponsor-hover-border: var(--vp-c-sponsor);
+  --vp-button-sponsor-hover-text: var(--vp-c-sponsor);
+  --vp-button-sponsor-hover-bg: transparent;
+  --vp-button-sponsor-active-border: var(--vp-c-sponsor);
+  --vp-button-sponsor-active-text: var(--vp-c-sponsor);
+  --vp-button-sponsor-active-bg: transparent;
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-custom-block-font-size: 14px;
+  --vp-custom-block-code-font-size: 13px;
+
+  --vp-custom-block-info-border: transparent;
+  --vp-custom-block-info-text: var(--vp-c-text-1);
+  --vp-custom-block-info-bg: var(--vp-c-default-soft);
+  --vp-custom-block-info-code-bg: var(--vp-c-default-soft);
+
+  --vp-custom-block-note-border: transparent;
+  --vp-custom-block-note-text: var(--vp-c-text-1);
+  --vp-custom-block-note-bg: var(--vp-c-default-soft);
+  --vp-custom-block-note-code-bg: var(--vp-c-default-soft);
+
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: var(--vp-c-text-1);
+  --vp-custom-block-tip-bg: var(--vp-c-tip-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-tip-soft);
+
+  --vp-custom-block-important-border: transparent;
+  --vp-custom-block-important-text: var(--vp-c-text-1);
+  --vp-custom-block-important-bg: var(--vp-c-important-soft);
+  --vp-custom-block-important-code-bg: var(--vp-c-important-soft);
+
+  --vp-custom-block-warning-border: transparent;
+  --vp-custom-block-warning-text: var(--vp-c-text-1);
+  --vp-custom-block-warning-bg: var(--vp-c-warning-soft);
+  --vp-custom-block-warning-code-bg: var(--vp-c-warning-soft);
+
+  --vp-custom-block-danger-border: transparent;
+  --vp-custom-block-danger-text: var(--vp-c-text-1);
+  --vp-custom-block-danger-bg: var(--vp-c-danger-soft);
+  --vp-custom-block-danger-code-bg: var(--vp-c-danger-soft);
+
+  --vp-custom-block-caution-border: transparent;
+  --vp-custom-block-caution-text: var(--vp-c-text-1);
+  --vp-custom-block-caution-bg: var(--vp-c-caution-soft);
+  --vp-custom-block-caution-code-bg: var(--vp-c-caution-soft);
+
+  --vp-custom-block-details-border: var(--vp-custom-block-info-border);
+  --vp-custom-block-details-text: var(--vp-custom-block-info-text);
+  --vp-custom-block-details-bg: var(--vp-custom-block-info-bg);
+  --vp-custom-block-details-code-bg: var(--vp-custom-block-info-code-bg);
+}
+
+/**
+ * Component: Input
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-input-border-color: var(--vp-c-border);
+  --vp-input-bg-color: var(--vp-c-bg-alt);
+
+  --vp-input-switch-bg-color: var(--vp-c-default-soft);
+}
+
+/**
+ * Component: Nav
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-nav-height: 64px;
+  --vp-nav-bg-color: var(--vp-c-bg);
+  --vp-nav-screen-bg-color: var(--vp-c-bg);
+  --vp-nav-logo-height: 24px;
+}
+
+.hide-nav {
+  --vp-nav-height: 0px;
+}
+
+.hide-nav .VPSidebar {
+  --vp-nav-height: 22px;
+}
+
+/**
+ * Component: Local Nav
+ * -------------------------------------------------------------------------- */
+
 :root {
-  --vp-home-hero-name-color: rgb(66, 184, 131);
+  --vp-local-nav-bg-color: var(--vp-c-bg);
+}
 
-  --vp-code-color: #36454f;
+/**
+ * Component: Sidebar
+ * -------------------------------------------------------------------------- */
 
-  --vp-c-brand-1: var(--vp-c-green-1);
-  --vp-c-brand-2: var(--vp-c-green-2);
-  --vp-c-brand-3: var(--vp-c-green-3);
-  --vp-c-brand-soft: var(--vp-c-green-soft);
+:root {
+  --vp-sidebar-width: 272px;
+  --vp-sidebar-bg-color: var(--vp-c-bg-alt);
 }
 
-:root.dark {
-  --vp-code-color: whitesmoke;
-  --vp-code-bg: #36454f;
+/**
+ * Colors Backdrop
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-backdrop-bg-color: rgba(0, 0, 0, 0.6);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: var(--vp-c-brand-1);
+  --vp-home-hero-name-background: transparent;
+
+  --vp-home-hero-image-background-image: none;
+  --vp-home-hero-image-filter: none;
+}
+
+/**
+ * Component: Badge
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-badge-info-border: transparent;
+  --vp-badge-info-text: var(--vp-c-text-2);
+  --vp-badge-info-bg: var(--vp-c-default-soft);
+
+  --vp-badge-tip-border: transparent;
+  --vp-badge-tip-text: var(--vp-c-tip-1);
+  --vp-badge-tip-bg: var(--vp-c-tip-soft);
+
+  --vp-badge-warning-border: transparent;
+  --vp-badge-warning-text: var(--vp-c-warning-1);
+  --vp-badge-warning-bg: var(--vp-c-warning-soft);
+
+  --vp-badge-danger-border: transparent;
+  --vp-badge-danger-text: var(--vp-c-danger-1);
+  --vp-badge-danger-bg: var(--vp-c-danger-soft);
+}
+
+/**
+ * Component: Carbon Ads
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-carbon-ads-text-color: var(--vp-c-text-1);
+  --vp-carbon-ads-poweredby-color: var(--vp-c-text-2);
+  --vp-carbon-ads-bg-color: var(--vp-c-bg-soft);
+  --vp-carbon-ads-hover-text-color: var(--vp-c-brand-1);
+  --vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1);
+}
+
+/**
+  * Component: Local Search
+  * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-local-search-bg: var(--vp-c-bg);
+  --vp-local-search-result-bg: var(--vp-c-bg);
+  --vp-local-search-result-border: var(--vp-c-divider);
+  --vp-local-search-result-selected-bg: var(--vp-c-bg);
+  --vp-local-search-result-selected-border: var(--vp-c-brand-1);
+  --vp-local-search-highlight-bg: var(--vp-c-brand-1);
+  --vp-local-search-highlight-text: var(--vp-c-neutral-inverse);
+}
+
+
+.VPHome .image-src {
+  width: 100%;
+  max-width: 400px;
+}
+
+html.dark .vp-code span[style*="--shiki-dark:#6A737D"] {
+  --shiki-dark: #757E8A !important; /* Override dark theme color for comments */
+}
+
+@media (min-width: 960px) {
+  .VPHome .image-src {
+    max-width: 272px;
+    margin-left: 64px;
+  }
+
+  .VPHero.has-image .main {
+    max-width: 352px !important;
+    margin-left: 128px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .VPHome .image-src {
+    max-width: 656px;
+    max-height: 596px;
+    margin-top: 128px;
+  }
+
+  .VPHero.has-image .main {
+    max-width: 613px !important;
+    margin-left: 0;
+    margin-top: 128px;
+  }
 }
diff --git a/docs/sidebar.js b/docs/sidebar.js
index 2c165df..2a0351e 100644
--- a/docs/sidebar.js
+++ b/docs/sidebar.js
@@ -4,7 +4,7 @@ module.exports = [
     collapsed: false,
     items: [
       {
-        text: 'What is the API3 DAO?',
+        text: 'What is the Api3 DAO?',
         link: '/',
       },
       {
diff --git a/docs/technical/dao.md b/docs/technical/dao.md
index bdb4dc7..90f654d 100644
--- a/docs/technical/dao.md
+++ b/docs/technical/dao.md
@@ -1,5 +1,5 @@
 ---
-title: API3
+title: Api3
 pageHeader: Technical
 outline: deep
 ---
@@ -8,12 +8,12 @@ outline: deep
 
 # DAO (Api3Template.sol)
 
-The API3 DAO contract is the core DAO contract serving as a coordinating and
-setup role. It holds the admin role in API3's contracts including the DAO pool,
+The Api3 DAO contract is the core DAO contract serving as a coordinating and
+setup role. It holds the admin role in Api3's contracts including the DAO pool,
 and it delegates some of this responsibility to the DAO's other contracts (its
 voting apps and [Aragon](https://aragon.org/) Agents).
 
-The base Aragon DAO template contract used by API3 DAO can be found
+The base Aragon DAO template contract used by Api3 DAO can be found
 [here](https://github.com/aragon/dao-templates/blob/master/shared/contracts/BaseTemplate.sol).
 
 See the
diff --git a/docs/technical/dashboard-attributes.md b/docs/technical/dashboard-attributes.md
index 12d1f4d..5288114 100644
--- a/docs/technical/dashboard-attributes.md
+++ b/docs/technical/dashboard-attributes.md
@@ -1,5 +1,5 @@
 ---
-title: API3
+title: Api3
 pageHeader: Technical
 outline: deep
 ---
diff --git a/docs/technical/distribution.md b/docs/technical/distribution.md
index 9dcaad4..89981c1 100644
--- a/docs/technical/distribution.md
+++ b/docs/technical/distribution.md
@@ -1,5 +1,5 @@
 ---
-title: API3
+title: Api3
 pageHeader: Technical
 outline: deep
 ---
diff --git a/docs/technical/index.md b/docs/technical/index.md
index b679f48..2e1f570 100644
--- a/docs/technical/index.md
+++ b/docs/technical/index.md
@@ -1,5 +1,5 @@
 ---
-title: API3
+title: Api3
 pageHeader: Technical
 outline: deep
 ---
diff --git a/docs/technical/pool.md b/docs/technical/pool.md
index 571f63d..ec429c4 100644
--- a/docs/technical/pool.md
+++ b/docs/technical/pool.md
@@ -1,5 +1,5 @@
 ---
-title: API3
+title: Api3
 pageHeader: Technical
 
 outline: deep
@@ -16,7 +16,7 @@ optionally delegate their voting power to another user.
 See the list of
 [pool contracts](https://github.com/api3dao/api3-dao/tree/main/packages/pool/contracts)
 and specifically the
-[API3Pool.sol](https://github.com/api3dao/api3-dao/blob/main/packages/pool/contracts/Api3Pool.sol)
+[Api3Pool.sol](https://github.com/api3dao/api3-dao/blob/main/packages/pool/contracts/Api3Pool.sol)
 contract for an understanding of the contract inheritance structure:
 
 - TimelockUtils.sol
diff --git a/docs/technical/voting.md b/docs/technical/voting.md
index 8525482..5cc4757 100644
--- a/docs/technical/voting.md
+++ b/docs/technical/voting.md
@@ -1,5 +1,5 @@
 ---
-title: API3
+title: Api3
 pageHeader: Technical
 outline: deep
 ---
@@ -8,7 +8,7 @@ outline: deep
 
 # Voting (Api3Voting.sol)
 
-API3's voting app implements a simple quorum-based voting mechanism with:
+Api3's voting app implements a simple quorum-based voting mechanism with:
 
 - a minimum required voting power to create a new proposal (defined in the Pool
   contract)
@@ -18,7 +18,7 @@ API3's voting app implements a simple quorum-based voting mechanism with:
 Proposals include an execution script, which can be executed if the proposal
 passes.
 
-The API3 DAO has installed two instances of its voting app, primary and
+The Api3 DAO has installed two instances of its voting app, primary and
 secondary versions, along with two Aragon Agents that they control. The primary
 commands a larger treasury and can update all DAO settings, while the secondary
 commands a much smaller treasury and can update some of the DAO settings.
