diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index a85e56e..3f4983d 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -17,12 +17,12 @@ export default function Index() {
           </h1>
           <div className="h-[144px] w-[434px]">
             <img
-              src="/logo-light.png"
+              src="/logo-light.svg"
               alt="React Router"
               className="block w-full dark:hidden"
             />
             <img
-              src="/logo-dark.png"
+              src="/logo-dark.svg"
               alt="React Router"
               className="hidden w-full dark:block"
             />
diff --git a/public/logo-dark.png b/public/logo-dark.png
deleted file mode 100644
index 5b4bdec..0000000
Binary files a/public/logo-dark.png and /dev/null differ
diff --git a/public/logo-dark.svg b/public/logo-dark.svg
new file mode 100644
index 0000000..02cfa11
--- /dev/null
+++ b/public/logo-dark.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 434 144" fill="none">
+  <!-- React Router Dark Logo -->
+  <g>
+    <!-- Router Icon -->
+    <path d="M40 30 L60 30 L60 50 L40 50 Z" fill="#64b5f6" stroke="#64b5f6" stroke-width="2"/>
+    <path d="M65 30 L85 30 L85 50 L65 50 Z" fill="#64b5f6" stroke="#64b5f6" stroke-width="2"/>
+    <path d="M40 55 L60 55 L60 75 L40 75 Z" fill="#64b5f6" stroke="#64b5f6" stroke-width="2"/>
+    <path d="M65 55 L85 55 L85 75 L65 75 Z" fill="#64b5f6" stroke="#64b5f6" stroke-width="2"/>
+    <path d="M90 40 L110 40 L110 60 L90 60 Z" fill="#90caf9" opacity="0.8"/>
+    
+    <!-- Connection lines -->
+    <path d="M62 40 L88 50" stroke="#bbb" stroke-width="2"/>
+    <path d="M62 65 L88 55" stroke="#bbb" stroke-width="2"/>
+    
+    <!-- React Router Text -->
+    <text x="130" y="45" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#fff">React Router</text>
+    <text x="130" y="70" font-family="Arial, sans-serif" font-size="14" fill="#ccc">Declarative routing for React</text>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/public/logo-light.png b/public/logo-light.png
deleted file mode 100644
index 28638d4..0000000
Binary files a/public/logo-light.png and /dev/null differ
diff --git a/public/logo-light.svg b/public/logo-light.svg
new file mode 100644
index 0000000..c424139
--- /dev/null
+++ b/public/logo-light.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 434 144" fill="none">
+  <!-- React Router Light Logo -->
+  <g>
+    <!-- Router Icon -->
+    <path d="M40 30 L60 30 L60 50 L40 50 Z" fill="#1976d2" stroke="#1976d2" stroke-width="2"/>
+    <path d="M65 30 L85 30 L85 50 L65 50 Z" fill="#1976d2" stroke="#1976d2" stroke-width="2"/>
+    <path d="M40 55 L60 55 L60 75 L40 75 Z" fill="#1976d2" stroke="#1976d2" stroke-width="2"/>
+    <path d="M65 55 L85 55 L85 75 L65 75 Z" fill="#1976d2" stroke="#1976d2" stroke-width="2"/>
+    <path d="M90 40 L110 40 L110 60 L90 60 Z" fill="#42a5f5" opacity="0.8"/>
+    
+    <!-- Connection lines -->
+    <path d="M62 40 L88 50" stroke="#666" stroke-width="2"/>
+    <path d="M62 65 L88 55" stroke="#666" stroke-width="2"/>
+    
+    <!-- React Router Text -->
+    <text x="130" y="45" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#333">React Router</text>
+    <text x="130" y="70" font-family="Arial, sans-serif" font-size="14" fill="#666">Declarative routing for React</text>
+  </g>
+</svg>
\ No newline at end of file