diff --git a/src/pages/documents/[id].vue b/src/pages/documents/[id].vue
new file mode 100644
index 0000000..8d9b498
--- /dev/null
+++ b/src/pages/documents/[id].vue
@@ -0,0 +1,89 @@
+<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 mx-auto">
+
+
+            </div>
+            <div v-if="fileAttached">
+                <h2>Attachments</h2>
+                <div v-for="(file, index) in files">
+
+                    {{index+1}}
+                    <a target="_blank" :href="`https://api8.siliconpin.com/assets/` + file.id+'?download' "  :download="file.filename_download">
+                        <h3> {{ file.filename_download }}</h3>
+                    </a>
+
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+    
+<script>
+export default {
+    data() {
+        return {
+            page: null,
+            fileAttached:false,
+            files: [],
+            isLoading: true
+        }
+    },
+    mounted: function () {
+        fetch('https://api8.siliconpin.com/items/scc22?filter[slug][_eq]=' + this.$route.params.id)
+        .then((response) => {
+            if (response.ok) {
+                return response.json();
+            }
+            throw new Error('Something went wrong');
+            })
+            .then(jsonPageData => {
+                this.page = jsonPageData.data
+                this.isLoading = false
+                return jsonPageData.data[0].id
+                }
+            )
+            .then((pageID) => {
+                fetch('https://api8.siliconpin.com/items/scc22_files_1?filter[scc22_id][_in]=' + pageID)
+                .then(resp => resp.json())
+                    .then(file => {
+                            let attIDs = ''
+                            let t = 0
+                            file.data.forEach(ids => {
+                                if (t == 0) attIDs = ids.directus_files_id
+                                else attIDs = attIDs + ',' + ids.directus_files_id
+                                t++
+                            });
+                            if(t>0) this.fileAttached=true
+                        return attIDs
+                    })
+                        .then((attIDs) => {
+                            fetch('https://api8.siliconpin.com/files?filter[id][_in]=' + attIDs)
+                            .then(resp => resp.json())
+                                .then(file => {
+                                    this.files = file.data
+                                })
+                        })
+            })
+            .catch((error) => {
+                console.log(error)
+                });
+    },
+    methods: {
+        // getAttachments(att) {
+
+        //     console.log(att)
+        //     // fetch('https://api8.siliconpin.com/items/ecom55?filter[slug][_eq]=' + this.$route.params.id)
+        //     //     .then(response => response.json())
+        //     //     .then(data => this.itemByCategory = data)
+        //     // console.log(this.itemByCategory)
+
+        // }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/pages/documents/index.vue b/src/pages/documents/index.vue
new file mode 100644
index 0000000..8d631ee
--- /dev/null
+++ b/src/pages/documents/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="container-fluid bg-white mx-auto mt-3  p-0">
+        <h2>All pages having Documents / file Attachments are listed below:</h2>
+        <div v-if="isLoading">
+            <h2>Loading ...</h2>
+        </div>
+        <div v-else>
+            <div  v-for="(item, index) in page" >
+                <router-link :to="'/documents/'+item.slug"> <h3> {{item.title}}</h3> </router-link>
+
+           
+                
+
+            </div>
+            <!-- <div v-html="page[0].content" class="container mx-auto">
+    
+            </div> -->
+        </div>
+    </div>
+    </template>
+    
+    <script>
+    export default {
+        data() {
+            return {
+                page: null,
+                isLoading: true
+            }
+        },
+        mounted: function () {
+            fetch('https://api8.siliconpin.com/items/scc22?filter[type][_eq]=documents&limit=-1')
+            // 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/src/pages/notice/index.vue b/src/pages/notice/index.vue
index 99569ca..2dd8044 100644
--- a/src/pages/notice/index.vue
+++ b/src/pages/notice/index.vue
@@ -32,7 +32,7 @@
                 .then(response => response.json())
                 .then(data => {
               this.page = data.data
-              console.log(data)
+            //   console.log(data)
               this.isLoading = false
             })
         }
diff --git a/typed-router.d.ts b/typed-router.d.ts
index a8345a6..1714847 100644
--- a/typed-router.d.ts
+++ b/typed-router.d.ts
@@ -39,6 +39,8 @@ declare module 'vue-router/auto/routes' {
     '/[...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>>,
+    '/documents/': RouteRecordInfo<'/documents/', '/documents', Record<never, never>, Record<never, never>>,
+    '/documents/[id]': RouteRecordInfo<'/documents/[id]', '/documents/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/gallery': RouteRecordInfo<'/gallery', '/gallery', Record<never, never>, Record<never, never>>,
     '/index2': RouteRecordInfo<'/index2', '/index2', Record<never, never>, Record<never, never>>,
     '/notice/': RouteRecordInfo<'/notice/', '/notice', Record<never, never>, Record<never, never>>,