diff --git a/content/products/solarpass.md b/content/products/solarpass.md
index 9745469..5483a6a 100644
--- a/content/products/solarpass.md
+++ b/content/products/solarpass.md
@@ -1,6 +1,11 @@
 ---
+slug: "solarpass"
 icon: "https://id.solsynth.dev/favicon.svg"
 name: "Solarpass"
 code: "Hydrogen.Solarpass"
 description: "The unified identity service for Solar Network."
----
\ No newline at end of file
+link: "https://id.solsynth.dev"
+source: "https://git.solsynth.dev/Hydrogen/Identity"
+---
+
+I have nothing to say.
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index da83278..982aa07 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -22,5 +22,8 @@
 </template>
 
 <script setup lang="ts">
-const navbars = [{ label: "Home", to: "/" }];
+const navbars = [
+  { label: "Home", to: "/" },
+  { label: "Products", to: "/products" },
+];
 </script>
diff --git a/pages/products/[slug].vue b/pages/products/[slug].vue
new file mode 100644
index 0000000..1e60fb1
--- /dev/null
+++ b/pages/products/[slug].vue
@@ -0,0 +1,46 @@
+<template>
+  <v-container>
+    <div class="max-w-[720px] mx-auto">
+      <v-card class="pa-5">
+        <template #title>
+          <span class="me-2">{{ product?.name }}</span>
+          <span class="font-mono text-xs">{{ product?.code }}</span>
+        </template>
+        <template #subtitle>{{ product?.description }}</template>
+
+        <v-divider class="mx-[-20px] my-3 border-opacity-75" />
+
+        <v-card-text>
+          <content-renderer :value="product">
+            <template #empty>
+              <p>No content found.</p>
+            </template>
+          </content-renderer>
+        </v-card-text>
+
+        <v-divider class="mx-[-20px] my-3 border-opacity-75" />
+
+        <div class="mt-3 flex justify-end">
+          <nuxt-link v-if="product?.source" :to="product?.source" target="_blank">
+            <v-btn variant="text" color="info" prepend-icon="mdi-code-tags">
+              Source code
+            </v-btn>
+          </nuxt-link>
+          <nuxt-link :to="product?.link" target="_blank">
+            <v-btn variant="text" color="teal" prepend-icon="mdi-launch">
+              Launch
+            </v-btn>
+          </nuxt-link>
+        </div>
+      </v-card>
+    </div>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+const route = useRoute();
+
+const { data: product } = await useAsyncData("product", () =>
+  queryContent("products").where({ slug: route.params.slug }).findOne()
+);
+</script>
diff --git a/pages/products/index.vue b/pages/products/index.vue
new file mode 100644
index 0000000..73df6c3
--- /dev/null
+++ b/pages/products/index.vue
@@ -0,0 +1,36 @@
+<template>
+  <v-container>
+    <div class="max-w-[720px] mx-auto flex flex-col gap-2">
+      <v-card v-for="item in products">
+        <v-row class="pa-5">
+          <v-col :xs="12" :md="3">
+            <img :src="item.icon" width="128" height="128" class="mx-auto" />
+          </v-col>
+          <v-col :xs="12" :md="9">
+            <h2 class="text-xl font-medium">{{ item.name }}</h2>
+            <p class="font-mono text-sm">{{ item.code }}</p>
+            <p class="mt-3 opacity-80">{{ item.description }}</p>
+            <div class="mt-3 flex justify-end">
+              <nuxt-link :to="item.link" target="_blank">
+                <v-btn variant="text" color="teal" prepend-icon="mdi-launch">
+                  Launch
+                </v-btn>
+              </nuxt-link>
+              <nuxt-link :to="'/products/' + item.slug">
+                <v-btn variant="text" prepend-icon="mdi-page-next">
+                  Learn more
+                </v-btn>
+              </nuxt-link>
+            </div>
+          </v-col>
+        </v-row>
+      </v-card>
+    </div>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+const { data: products } = await useAsyncData("products", () =>
+  queryContent("products").find()
+);
+</script>