diff --git a/build-docs.sh b/build-docs.sh
new file mode 100755
index 0000000..1eb4fc6
--- /dev/null
+++ b/build-docs.sh
@@ -0,0 +1,26 @@
+#!/bin/bash
+
+# Find all component demo directories.
+DEMO_DIRS=$(find src/components -type d -name "demo")
+
+# Collect every component demo directory
+# Copy it to /dist/<component>/demo
+for demo_dir in $DEMO_DIRS
+do
+  component_dirname=$(basename "$(dirname "$demo_dir")")
+  echo "DEMO Dir: $component_dirname"
+  mkdir -p "dist/$component_dirname"
+  cp -R "src/components/$component_dirname/demo/." "dist/$component_dirname/."
+
+  # Append component name to COMPONENTS_JSON
+  COMPONENTS_JSON+="\"$component_dirname\": {},"
+done
+
+# Remove trailing comma from COMPONENTS_JSON
+COMPONENTS_JSON=${COMPONENTS_JSON%,}
+
+# Create the final JSON object
+COMPONENTS_JSON="{\"components\": {$COMPONENTS_JSON}}"
+
+# Write the JSON object to manifest.json
+echo "$COMPONENTS_JSON" > "dist/manifest.json"
\ No newline at end of file
diff --git a/build.sh b/build.sh
index 09e9fd9..e45b06a 100755
--- a/build.sh
+++ b/build.sh
@@ -7,7 +7,6 @@ mkdir -p dist
 # Find all JavaScript files within src/components directory
 JS_FILES=$(find src/components -type f -name "doge-*.js")
 CSS_FILES=$(find src/components -type f -name "*initial.css")
-DEMO_DIRS==$(find src/components -type d -name "demo")
 
 # For each JS file, copy it to the root for convenient
 # consumption from fetch.dogecoin.org/<component>.js
@@ -28,22 +27,13 @@ do
    echo >> "dist/initial.css" #Adds line
 done
 
-# Collect every component demo directory
-# Copy it to /dist/<component>/demo
-for demo_dir in $DEMO_DIRS
-do
-  component_dirname=$(basename "$(dirname "$demo_dir")")
-  echo "DEMO Dir: $component_dirname"
-  mkdir -p "dist/$component_dirname"
-  cp -R "src/components/$component_dirname/demo/." "dist/$component_dirname/."
-done
-
 # Write CNAME file
 echo "fetch.dogecoin.org" > dist/CNAME
 echo "fetch.dogecoin.org" > CNAME
 
 # Copy the static files to the dist directory.
 cp src/index.html dist/index.html
+cp src/index.css dist/index.css
 cp -R src/lib dist/lib
 cp -R resources dist/
 cp -R example dist/
@@ -51,3 +41,6 @@ cp -R example dist/
 # Write some version data
 echo "Commit:$(git log -1 --pretty=format:%h)" >> dist/version.txt
 echo "UTC:$(date -u)" >> dist/version.txt
+
+# Run docs script.
+./build-docs.sh
diff --git a/package.json b/package.json
index 5b75614..a8dc8ce 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "author": "",
   "license": "ISC",
   "scripts": {
-    "dev": "web-dev-server --open / --port 8080 --node-resolve --watch",
+    "dev": "web-dev-server --open /src/index.html --port 8080 --node-resolve --watch",
     "serve": "web-dev-server --root-dir dist --port 9090 --node-resolve --watch --open /",
     "test": "web-test-runner \"src/**/test.html\" --node-resolve --playwright --browsers firefox",
     "test:watch": "web-test-runner src/**/test.html --node-resolve --watch",
diff --git a/src/components/doge-qr/demo/demo.css b/src/components/doge-qr/demo/demo.css
index 75ecb43..e2e0979 100644
--- a/src/components/doge-qr/demo/demo.css
+++ b/src/components/doge-qr/demo/demo.css
@@ -1,87 +1,3 @@
-html { font-family: sans-serif }
-* {
-  box-sizing: border-box;
-}
-h1, h2, h3, h4, h5 {
-  font-family: var(--doge-font-fancy);
-}
-.page {
-  width: 600px;
-  margin: 0px 0px;
-  padding: 20px;
-}
-header {
-  margin-bottom: 50px;
-}
-
-a.yellow {
-  color: #de9a1e;
-}
-a.yellow:hover {
-  color: #ffc107;
-}
-
-.mono {
-  font-family: monospace;
-}
-
-.small {
-  font-size: .8rem;
-}
-
-h1 {
-  margin-bottom: 20px;
-}
-.sans {
-  font-family: sans-serif;
-}
-.comic {
-  font-family: var(--doge-font-fancy);
-}
-p { line-height: 1.2 }
-.soft {
-  color: #ccc;
-}
-section {
-  margin-bottom: 4em;
-}
-hr {
-  transform: rotateZ(0.5deg);
-  border-bottom: none;
-  border-top: 1px solid #333;
-  margin-top: 1em;
-}
-table {
-  border-collapse: collapse;
-}
-table tr {
-  border-bottom: 1px solid #ccc;
-}
-table tr th {
-  font-family: var(--doge-font-fancy);
-  font-size: 1.1rem;
-  padding: 1rem 1rem;
-  text-align: left;
-}
-table tr td {
-  padding: 1rem 1rem;
-  text-align: left;
-}
-code {
-  display: inline-block;
-  margin-top: 5px;
-  margin-bottom: 5px;
-  font-size: 0.9rem;
-  background-color: #f3f3f4;
-}
-code.nowrap {
-  white-space: nowrap;
-}
-table.props-list tr td:first-child code {
-  font-family: monospace;
-  background-color: #e6e6e7;
-}
-
 span.note {
   display: block;
   font-size: 1rem;
@@ -135,12 +51,3 @@ span.note {
 #CodeContainer .code-toolbar:first-child {
   display: block;
 }
-
-footer {
-  margin: 0 auto;
-  width: 100%;
-  position: fixed;
-  bottom: 0px;
-  padding: 10px 20px;
-  text-align: center;
-}
diff --git a/src/components/doge-qr/demo/index.html b/src/components/doge-qr/demo/index.html
index 34c5063..bcefa02 100644
--- a/src/components/doge-qr/demo/index.html
+++ b/src/components/doge-qr/demo/index.html
@@ -12,6 +12,7 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>DogeWebComponents | doge-qr</title>
 
+    <link rel="stylesheet" href="../../../index.css" />
     <link rel="stylesheet" href="demo.css" />
     <link rel="stylesheet" href="../../../../resources/blocks/prism/prism.css" />
     <script type="text/javascript" src="../../../../resources/blocks/prism/prism.js"></script>
@@ -48,6 +49,7 @@
 
     <div class="page">
       <header>
+        <a href="../">← Back</a>
         <h1><span class="sans">&lt;doge-qr&gt; </span><span class="soft comic">web component</span></h1>
       </header>
 
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..d7256c4
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,92 @@
+html { font-family: sans-serif }
+* {
+  box-sizing: border-box;
+}
+h1, h2, h3, h4, h5 {
+  font-family: var(--doge-font-fancy);
+}
+.page {
+  width: 600px;
+  margin: 0px 0px;
+  padding: 20px;
+}
+header {
+  margin-bottom: 50px;
+}
+
+a.yellow {
+  color: #de9a1e;
+}
+a.yellow:hover {
+  color: #ffc107;
+}
+
+.mono {
+  font-family: monospace;
+}
+
+.small {
+  font-size: .8rem;
+}
+
+h1 {
+  margin-bottom: 20px;
+}
+.sans {
+  font-family: sans-serif;
+}
+.comic {
+  font-family: var(--doge-font-fancy);
+}
+p { line-height: 1.2 }
+.soft {
+  color: #ccc;
+}
+section {
+  margin-bottom: 4em;
+}
+hr {
+  transform: rotateZ(0.5deg);
+  border-bottom: none;
+  border-top: 1px solid #333;
+  margin-top: 1em;
+}
+table {
+  border-collapse: collapse;
+}
+table tr {
+  border-bottom: 1px solid #ccc;
+}
+table tr th {
+  font-family: var(--doge-font-fancy);
+  font-size: 1.1rem;
+  padding: 1rem 1rem;
+  text-align: left;
+}
+table tr td {
+  padding: 1rem 1rem;
+  text-align: left;
+}
+code {
+  display: inline-block;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-size: 0.9rem;
+  background-color: #f3f3f4;
+}
+code.nowrap {
+  white-space: nowrap;
+}
+table.props-list tr td:first-child code {
+  font-family: monospace;
+  background-color: #e6e6e7;
+}
+
+footer {
+  margin: 0 auto;
+  width: 100%;
+  position: fixed;
+  bottom: 0px;
+  padding: 10px 20px;
+  text-align: center;
+}
diff --git a/src/index.html b/src/index.html
index ced5608..fa6c515 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,10 +1,45 @@
 <html>
-	<head>
-		<title id="title">Doge Components</title>
-	</head>
-	<body>
-		<h1>Placeholder</h1>
-		<h3>Landing page for fetch.dogecoin.org</h3>
-		<p>The purpose of this static page is to introduce and promote the Doge Components and lead people to the docs for more info.</p>
-	</body>
+  <head>
+    <title id="title">Doge Components</title>
+    <link rel="stylesheet" href="index.css" />
+    <link rel="stylesheet" href="resources/css/doge-components.css" />
+  </head>
+  <body>
+    
+        <div class="page">
+      <header>
+        <h1><span class="sans">&lt;doge&gt; </span><span class="soft comic">components</span></h1>
+      </header>
+
+      <section>
+        <h2>Purpose</h2>
+        <hr />
+        <p>Reusable web components for Doge things.</p>
+      </section>
+      <section>
+        <h2>Components</h2>
+        <hr />
+        <ul></ul>
+      </section>
+    <script>
+      fetch('manifest.json')
+        .then(response => response.json())
+        .then(data => {
+          const components = data.components;
+          const ul = document.querySelector('ul');
+
+          for (const component in components) {
+            const li = document.createElement('li');
+            const anchor = document.createElement('a');
+            anchor.href = component;
+            anchor.innerText = component;
+            li.appendChild(anchor);
+            ul.appendChild(li);
+          }
+        })
+        .catch(error => {
+          console.error(error);
+        });
+    </script>
+  </body>
 </html>
\ No newline at end of file
diff --git a/src/manifest.json b/src/manifest.json
new file mode 100644
index 0000000..7c80444
--- /dev/null
+++ b/src/manifest.json
@@ -0,0 +1 @@
+{"components": {"doge-qr": {}}}