diff --git a/package.json b/package.json
index 6b00f9c..8b25c55 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "vite-vue3-tailwind-starter",
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite --host",
+    "dev": "vite --host  --port 2004",
     "build": "vue-tsc --noEmit && vite build",
     "serve": "vite preview"
   },
diff --git a/src/pages/[...404].vue b/src/pages/[...404].vue
index 03cbd18..6b96c7c 100644
--- a/src/pages/[...404].vue
+++ b/src/pages/[...404].vue
@@ -7,7 +7,7 @@ useHead({
 <template>
   <header class="bg-white shadow">
     <div class="mx-auto max-w-7xl py-6 px-4 sm:px-6 lg:px-8">
-      <h1 class="text-3xl font-bold leading-tight text-gray-900">Not Found</h1>
+      <h1 class="text-3xl font-bold leading-tight text-gray-900">404 Not Found</h1>
     </div>
   </header>
 </template>
diff --git a/src/pages/[id].vue b/src/pages/[id].vue
new file mode 100644
index 0000000..ecc4cef
--- /dev/null
+++ b/src/pages/[id].vue
@@ -0,0 +1,33 @@
+<template>
+<div class="container-fluid bg-white mx-auto mt-3  p-0">
+    <div v-if="isLoading">
+        <h2>Loading ...</h2>
+    </div>
+    <div v-else>
+        <div v-html="page[0].content" class="container">
+
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            page: null,
+            isLoading: true
+        }
+    },
+    mounted: function () {
+        fetch('https://api8.siliconpin.com/items/scc22?filter[slug][_eq]=' + this.$route.params.id)
+        // fetch('https://api8.siliconpin.com/items/scc22?slug=about-us')
+            .then(response => response.json())
+            .then(data => {
+          this.page = data.data
+          console.log(data)
+          this.isLoading = false
+        })
+    }
+}
+</script>
\ No newline at end of file
diff --git a/typed-router.d.ts b/typed-router.d.ts
index a3e9581..f52f4e9 100644
--- a/typed-router.d.ts
+++ b/typed-router.d.ts
@@ -37,6 +37,7 @@ declare module 'vue-router/auto/routes' {
   export interface RouteNamedMap {
     '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
     '/[...404]': RouteRecordInfo<'/[...404]', '/:404(.*)', { 404: ParamValue<true> }, { 404: ParamValue<false> }>,
+    '/[id]': RouteRecordInfo<'/[id]', '/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/about': RouteRecordInfo<'/about', '/about', Record<never, never>, Record<never, never>>,
     '/gallery': RouteRecordInfo<'/gallery', '/gallery', Record<never, never>, Record<never, never>>,
     '/index2': RouteRecordInfo<'/index2', '/index2', Record<never, never>, Record<never, never>>,