diff --git a/MyApp.Client/package.json b/MyApp.Client/package.json
index 0fa62cc..b9ce3e2 100644
--- a/MyApp.Client/package.json
+++ b/MyApp.Client/package.json
@@ -18,6 +18,7 @@
   "dependencies": {
     "@servicestack/client": "^2.1.1",
     "@servicestack/vue": "^3.0.88",
+    "@unhead/vue": "^1.8.10",
     "@vueuse/core": "^10.7.2",
     "pinia": "^2.1.7",
     "vue": "^3.4.15",
@@ -31,7 +32,6 @@
     "@tsconfig/node20": "^20.1.2",
     "@types/markdown-it-container": "^2.0.9",
     "@types/node": "^20.11.10",
-    "@unhead/vue": "^1.8.10",
     "@vitejs/plugin-vue": "^5.0.3",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/tsconfig": "^0.5.1",
diff --git a/MyApp.Client/src/components/Include.vue b/MyApp.Client/src/components/Include.vue
new file mode 100644
index 0000000..ba4a98b
--- /dev/null
+++ b/MyApp.Client/src/components/Include.vue
@@ -0,0 +1,16 @@
+<template>
+    <component v-if="MarkdownComponent" :is="MarkdownComponent" :name="src" :frontmatter="{ nowrap: true }" />
+    <div v-else>Include not found: {{ src }}</div>
+</template>
+  
+<script setup lang="ts">
+const props = defineProps<{ src: string }>()
+import { inject, defineAsyncComponent, h, computed } from "vue"
+import type { VirtualPress } from "vite-plugin-press"
+
+const press: VirtualPress = inject('press')!
+const components = (press.components as any).includes || {}
+
+const factory = components[props.src]
+const MarkdownComponent = factory ? defineAsyncComponent(factory) : null
+</script>
diff --git a/MyApp.Client/src/pages/index.vue b/MyApp.Client/src/pages/index.vue
index 951d0a6..433fd2f 100644
--- a/MyApp.Client/src/pages/index.vue
+++ b/MyApp.Client/src/pages/index.vue
@@ -32,7 +32,7 @@
 
   <div class="flex justify-center my-20 py-20 bg-slate-100 dark:bg-slate-800">
     <div class="text-center">
-      <svg class="text-green-600 w-36 h-36 inline-block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m18 16l-4-3.2V16H6V8h8v3.2L18 8m2-4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Z" /></svg>
+      <Iconify icon="material-symbols:hangout-video" class="text-green-600 w-36 h-36 inline-block" />
       <h1 class="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
         Videos
       </h1>
diff --git a/MyApp.Client/src/pages/videos.vue b/MyApp.Client/src/pages/videos.vue
index 59311be..09be35a 100644
--- a/MyApp.Client/src/pages/videos.vue
+++ b/MyApp.Client/src/pages/videos.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex justify-center my-10">
     <div class="text-center">
-      <svg class="text-green-600 w-36 h-36 inline-block" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m18 16l-4-3.2V16H6V8h8v3.2L18 8m2-4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Z" /></svg>
+      <Iconify icon="material-symbols:hangout-video" class="text-green-600 w-36 h-36 inline-block" />
       <h1 class="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
         Videos
       </h1>