diff --git a/src/app.tsx b/src/app.tsx
index 32aec174..cf5371d6 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -2,6 +2,7 @@ import { Router } from '@solidjs/router';
 import { FileRoutes } from '@solidjs/start/router';
 import type { Component } from 'solid-js';
 import { onMount, Suspense } from 'solid-js';
+import { DefaultTemplate } from './components/templates/DefaultTemplate.js';
 import './app.css';
 
 const App: Component = () => {
@@ -10,36 +11,14 @@ const App: Component = () => {
     initTWE({ Collapse, Ripple, Tooltip });
   });
   return (
-    <div>
-      <nav class="flex gap-2">
-        <h1>
-          <a class="flex gap-2" href=".">
-            <img src="icons/Rocket.svg" height="16" width="16" />
-            <span>Launchpad Icons</span>
-          </a>
-        </h1>
-        <ul class="flex gap-2">
-          <li>
-            <a href=".">Index</a>
-          </li>
-          <li>
-            <a href="docs">Docs</a>
-          </li>
-          <li>
-            <a href="explore">Explore</a>
-          </li>
-          <li>
-            <a href="pricing">Pricing</a>
-          </li>
-        </ul>
-      </nav>
+    <DefaultTemplate>
       <Router
         base={import.meta.env.SERVER_BASE_URL}
         root={(props) => <Suspense>{props.children}</Suspense>}
       >
         <FileRoutes />
       </Router>
-    </div>
+    </DefaultTemplate>
   );
 };
 
diff --git a/src/components/templates/DefaultTemplate.tsx b/src/components/templates/DefaultTemplate.tsx
new file mode 100644
index 00000000..b066341d
--- /dev/null
+++ b/src/components/templates/DefaultTemplate.tsx
@@ -0,0 +1,23 @@
+import type { Component, ParentProps } from 'solid-js';
+import { Footer } from '../organisms/Footer.js';
+import { Navbar } from '../organisms/Navbar.js';
+import { vccUrl, vpmUrl } from '../../constants.json';
+
+/** The URL to add to VCC. */
+const encodedVccUrl = `${vccUrl}${encodeURIComponent(vpmUrl)}`;
+
+/**
+ * The default template.
+ * @param props The component properties.
+ * @returns The component.
+ */
+export const DefaultTemplate: Component<ParentProps> = (props) => {
+  const { children } = props;
+  return (
+    <div class="bg-zinc-100 text-surface dark:bg-neutral-600 dark:text-white">
+      <Navbar addToVccLink={encodedVccUrl} />
+      <main class="min-h-[calc(100vh-40px-98px)]">{children}</main>
+      <Footer />
+    </div>
+  );
+};
diff --git a/src/entry-server.tsx b/src/entry-server.tsx
index 5ad5e1db..301b84fb 100644
--- a/src/entry-server.tsx
+++ b/src/entry-server.tsx
@@ -27,6 +27,16 @@ export default createHandler(() => (
           />
           <meta name="rating" content="General" />
           <meta name="referer" content="same-origin" />
+          <meta
+            name="theme-color"
+            content="#404040"
+            media="(prefers-color-scheme: dark)"
+          />
+          <meta
+            name="theme-color"
+            content="#FAFAFA"
+            media="(prefers-color-scheme: light)"
+          />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           <meta name="twitter:card" content="summary_large_image" />
           <meta name="twitter:creator" content="@kurone_kito" />