diff --git a/apps/docs/docs/footer.tsx b/apps/docs/docs/footer.tsx
index 170f033..faafad3 100644
--- a/apps/docs/docs/footer.tsx
+++ b/apps/docs/docs/footer.tsx
@@ -6,7 +6,7 @@ const Footer = () => {
 				href="https://palladians.xyz"
 				target="_blank"
 				rel="noopener noreferrer"
-				className="vocs_HomePage_packageManager underline"
+				className="vocs_HomePage_packageManager underline font-semibold"
 			>
 				Palladians
 			</a>
diff --git a/apps/docs/docs/pages/index.mdx b/apps/docs/docs/pages/index.mdx
index 7b89423..208dc31 100644
--- a/apps/docs/docs/pages/index.mdx
+++ b/apps/docs/docs/pages/index.mdx
@@ -3,26 +3,29 @@ layout: landing
 ---
 
 import { HomePage } from 'vocs/components'
+import { GithubIcon } from 'lucide-react'
 
 <div className="flex flex-col mt-16 gap-16">
   <header className="flex flex-col gap-8">
-    <img src="/logo.svg" className="w-16 lg:w-24 hidden dark:flex" />
-    <img src="/logo.svg" className="w-16 lg:w-24 flex dark:hidden" />
-    <h1 className="font-bold text-3xl lg:text-6xl leading-[3rem] lg:leading-[5rem]">The TypeScript interface for Mina Protocol.</h1>
+    <img src="/logo.svg" className="w-16 lg:w-24 invert dark:invert-0" />
+    <h1 className="font-bold text-3xl lg:text-6xl leading-[3rem] lg:leading-[5rem]">The TypeScript interface for <span className="bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-fuchsia-400 dark:from-indigo-300 dark:to-fuchsia-200">Mina Protocol</span>.</h1>
     <p className="text-lg lg:text-xl">MinaJS is the missing piece for your smooth zkApp development on Mina.</p>
     <div className="flex gap-2">
       <a href="/getting-started" className="btn lg:btn-lg btn-primary rounded-full">Get Started</a>
-      <a href="https://github.com/palladians/mina-js" target="_blank" rel="noopener noreferrer" className="btn lg:btn-lg btn-outline rounded-full">GitHub</a>
+      <a href="https://github.com/palladians/mina-js" target="_blank" rel="noopener noreferrer" className="btn lg:btn-lg btn-outline border-neutral text-neutral dark:border-primary dark:text-primary rounded-full">
+        <GithubIcon />
+        <span>GitHub</span>
+      </a>
     </div>
   </header>
   <section>
     <iframe src="https://stackblitz.com/edit/minajs?embed=1&file=index.ts&hideExplorer=1&theme=dark&view=editor" className="w-full h-[500px] border-0 rounded-lg overflow-hidden" />
   </section>
-  <section className="card bg-neutral">
+  <section className="card dark:bg-neutral bg-primary">
     <div className="card-body gap-8">
       <div className="flex justify-between items-center">
-        <h2 className="text-2xl font-semibold">Sponsors</h2>
-        <a target="_blank" href="https://github.com/sponsors/palladians" rel="noopener noreferrer" className="btn btn-outline rounded-full">Become a sponsor</a>
+        <h2 className="text-2xl font-semibold text-white">Sponsors</h2>
+        <a target="_blank" href="https://github.com/sponsors/palladians" rel="noopener noreferrer" className="btn btn-outline rounded-full border-white text-white">Become a sponsor</a>
       </div>
       <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
         <a href="https://palladians.xyz" target="_blank" rel="noopener noreferrer">
diff --git a/apps/docs/docs/public/logo-round.svg b/apps/docs/docs/public/logo-round.svg
new file mode 100644
index 0000000..b5edfd3
--- /dev/null
+++ b/apps/docs/docs/public/logo-round.svg
@@ -0,0 +1,19 @@
+<svg viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="128" cy="128" r="128" fill="#191724"/>
+<path d="M54 192.015V64.0146H78V192.015H54Z" fill="white"/>
+<path d="M128 192.015V64.0146H152V192.015H128Z" fill="url(#paint0_linear_2399_16)"/>
+<path d="M152.001 172.015L61.0005 80.9858L77.9711 64.0153L152.001 138.016L152.001 172.015Z" fill="white"/>
+<path d="M225.51 171.495L135 80.9854L151.971 64.0148L242.48 154.524L225.51 171.495Z" fill="url(#paint1_linear_2399_16)"/>
+<defs>
+<linearGradient id="paint0_linear_2399_16" x1="140" y1="64.0146" x2="140" y2="192.015" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.165" stop-color="white"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2399_16" x1="143.485" y1="72.5001" x2="233.995" y2="163.01" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.205" stop-color="white"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 31eb14c..58d4877 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -9,6 +9,7 @@
 	},
 	"dependencies": {
 		"@types/react": "latest",
+		"lucide-react": "^0.438.0",
 		"react": "latest",
 		"react-dom": "latest",
 		"typescript": "latest",
diff --git a/apps/docs/tailwind.config.cjs b/apps/docs/tailwind.config.cjs
index f9847a8..b0b1400 100644
--- a/apps/docs/tailwind.config.cjs
+++ b/apps/docs/tailwind.config.cjs
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-	darkMode: ["class"],
+	darkMode: ["selector", "html.dark"],
 	daisyui: {
 		themes: [
 			{
diff --git a/apps/docs/vocs.config.ts b/apps/docs/vocs.config.ts
index e584a10..cb8ced9 100644
--- a/apps/docs/vocs.config.ts
+++ b/apps/docs/vocs.config.ts
@@ -3,7 +3,10 @@ import { defineConfig } from "vocs";
 export default defineConfig({
 	title: "MinaJS",
 	description: "The TypeScript interface for Mina Protocol.",
-	logoUrl: "/logo.svg",
+	logoUrl: {
+		light: "/logo-inverted.svg",
+		dark: "/logo.svg",
+	},
 	font: {
 		google: "DM Sans",
 	},
diff --git a/bun.lockb b/bun.lockb
index 24f7667..f0e2435 100755
Binary files a/bun.lockb and b/bun.lockb differ