diff --git a/prez-components/.storybook/preview.ts b/prez-components/.storybook/preview.ts
index 0f43d4b..282c609 100644
--- a/prez-components/.storybook/preview.ts
+++ b/prez-components/.storybook/preview.ts
@@ -1,7 +1,7 @@
 import { type Preview, setup } from "@storybook/vue3";
 import PrimeVue from "primevue/config";
-import "primevue/resources/themes/lara-dark-indigo/theme.css";
-// import "primevue/resources/themes/saga-blue/theme.css";
+//import "primevue/resources/themes/lara-dark-indigo/theme.css";
+import "primevue/resources/themes/saga-blue/theme.css";
 import "primeicons/primeicons.css";
 import Tooltip from 'primevue/tooltip';
 
diff --git a/prez-components/package-lock.json b/prez-components/package-lock.json
index 775be7c..8c98332 100644
--- a/prez-components/package-lock.json
+++ b/prez-components/package-lock.json
@@ -8,6 +8,8 @@
       "name": "prez-components",
       "version": "0.0.1",
       "dependencies": {
+        "@vue-leaflet/vue-leaflet": "^0.10.1",
+        "leaflet": "^1.9.4",
         "prez-lib": "file:../prez-lib",
         "primeicons": "^6.0.1",
         "primevue": "^3.41.1"
@@ -5094,6 +5096,23 @@
         "@volar/language-core": "1.8.0"
       }
     },
+    "node_modules/@vue-leaflet/vue-leaflet": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@vue-leaflet/vue-leaflet/-/vue-leaflet-0.10.1.tgz",
+      "integrity": "sha512-RNEDk8TbnwrJl8ujdbKgZRFygLCxd0aBcWLQ05q/pGv4+d0jamE3KXQgQBqGAteE1mbQsk3xoNcqqUgaIGfWVg==",
+      "dependencies": {
+        "vue": "^3.2.25"
+      },
+      "peerDependencies": {
+        "@types/leaflet": "^1.5.7",
+        "leaflet": "^1.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/leaflet": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vue/compiler-core": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz",
@@ -5193,7 +5212,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz",
       "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==",
-      "peer": true,
       "dependencies": {
         "@vue/reactivity": "3.3.4",
         "@vue/shared": "3.3.4"
@@ -5203,7 +5221,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz",
       "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==",
-      "peer": true,
       "dependencies": {
         "@vue/runtime-core": "3.3.4",
         "@vue/shared": "3.3.4",
@@ -5214,7 +5231,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.4.tgz",
       "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==",
-      "peer": true,
       "dependencies": {
         "@vue/compiler-ssr": "3.3.4",
         "@vue/shared": "3.3.4"
@@ -8819,6 +8835,11 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
+    },
     "node_modules/leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -12075,7 +12096,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz",
       "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==",
-      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.3.4",
         "@vue/compiler-sfc": "3.3.4",
@@ -15943,6 +15963,14 @@
         "@volar/language-core": "1.8.0"
       }
     },
+    "@vue-leaflet/vue-leaflet": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@vue-leaflet/vue-leaflet/-/vue-leaflet-0.10.1.tgz",
+      "integrity": "sha512-RNEDk8TbnwrJl8ujdbKgZRFygLCxd0aBcWLQ05q/pGv4+d0jamE3KXQgQBqGAteE1mbQsk3xoNcqqUgaIGfWVg==",
+      "requires": {
+        "vue": "^3.2.25"
+      }
+    },
     "@vue/compiler-core": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz",
@@ -16034,7 +16062,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz",
       "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==",
-      "peer": true,
       "requires": {
         "@vue/reactivity": "3.3.4",
         "@vue/shared": "3.3.4"
@@ -16044,7 +16071,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz",
       "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==",
-      "peer": true,
       "requires": {
         "@vue/runtime-core": "3.3.4",
         "@vue/shared": "3.3.4",
@@ -16055,7 +16081,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.4.tgz",
       "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==",
-      "peer": true,
       "requires": {
         "@vue/compiler-ssr": "3.3.4",
         "@vue/shared": "3.3.4"
@@ -18770,6 +18795,11 @@
         "dotenv-expand": "^10.0.0"
       }
     },
+    "leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
+    },
     "leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -21191,7 +21221,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz",
       "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==",
-      "peer": true,
       "requires": {
         "@vue/compiler-dom": "3.3.4",
         "@vue/compiler-sfc": "3.3.4",
diff --git a/prez-components/package.json b/prez-components/package.json
index 3618531..81137a0 100644
--- a/prez-components/package.json
+++ b/prez-components/package.json
@@ -57,6 +57,8 @@
     "vue-tsc": "^1.8.4"
   },
   "dependencies": {
+    "@vue-leaflet/vue-leaflet": "^0.10.1",
+    "leaflet": "^1.9.4",
     "prez-lib": "file:../prez-lib",
     "primeicons": "^6.0.1",
     "primevue": "^3.41.1"
diff --git a/prez-components/src/stories/Wireframe.stories.ts b/prez-components/src/stories/Wireframe.stories.ts
new file mode 100644
index 0000000..92d67ae
--- /dev/null
+++ b/prez-components/src/stories/Wireframe.stories.ts
@@ -0,0 +1,127 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { vueRouter } from "storybook-vue3-router";
+import wf from "../wireframes/PrezWireframes01.vue";
+
+import DataTable from "primevue/datatable";
+
+const meta = {
+    title: "Wireframes",
+    component: wf,
+    tags: ["autodocs"],
+    argTypes: {
+        title: { description: 'Title to use', type: 'string'},
+        sidePanel: { description: 'Show the side panel', type: 'boolean'},
+        sidePanelSearch: { description: 'Show the search box', type: 'boolean'},
+        sidePanelProfile: { description: 'Show the profile selector', type: 'boolean'},
+        pageType: { description: 'List, item or search page', type: 'string', control: 'radio', options: ['list', 'item', 'search']},
+        showMap: { description: 'Show the map component', type: 'boolean'}
+    }
+} satisfies Meta<typeof wf>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ListingPage: Story = {
+    args: {
+        title: 'Catalog collection',
+        sidePanel: false,
+        sidePanelSearch: true,
+        sidePanelProfile: true,
+        showMap: false,
+        pageType: 'list'
+    }
+}
+
+export const ListingPageWithSidePanel: Story = {
+    args: {
+        title: 'Catalog collection',
+        sidePanel: true,
+        sidePanelSearch: true,
+        sidePanelProfile: true,
+        showMap: false,
+        pageType: 'list'
+    }
+}
+
+export const ListingPageWithMap: Story = {
+    args: {
+        title: 'Catalog collection',
+        sidePanel: false,
+        sidePanelSearch: true,
+        sidePanelProfile: true,
+        showMap: true,
+        pageType: 'list'
+    }
+}
+
+export const ListingPageWithMapAndSidePanel: Story = {
+    args: {
+        title: 'Catalog collection',
+        sidePanel: true,
+        sidePanelSearch: true,
+        sidePanelProfile: true,
+        showMap: true,
+        pageType: 'list'
+    }
+}
+
+export const ItemPage: Story = {
+    args: {
+        title: 'A catalog of Building Block Vocabularies',
+        sidePanel: false,
+        sidePanelSearch: true,
+        sidePanelProfile: true,
+        showMap: false,
+        pageType: 'item'
+    }
+}
+// include hierarchy, embedded form
+
+export const ItemPageWithMap: Story = {
+    args: {
+        title: 'A catalog of Building Block Vocabularies',
+        sidePanel: false,
+        sidePanelSearch: true,
+        sidePanelProfile: true,
+        showMap: true,
+        pageType: 'item'
+    }
+}
+
+export const ItemPageWithPanelAndMap: Story = {
+    args: {
+        title: 'A catalog of Building Block Vocabularies',
+        sidePanel: true,
+        sidePanelSearch: true,
+        sidePanelProfile: true,
+        showMap: true,
+        pageType: 'item'
+    }
+}
+
+export const SearchPage: Story = {
+    args: {
+        title: 'Search page',
+        sidePanel: false,
+        sidePanelSearch: true,
+        sidePanelProfile: true,
+        showMap: false,
+        pageType: 'search'
+    }
+}
+
+export const SearchPageWithMap: Story = {
+    args: {
+        title: 'Search page',
+        sidePanel: false,
+        sidePanelSearch: true,
+        sidePanelProfile: true,
+        showMap: true,
+        pageType: 'search'
+    }
+}
+
+
+// ListingPage.decorators = [
+//     vueRouter()
+// ];
diff --git a/prez-components/src/wireframes/PrezWireframes01.vue b/prez-components/src/wireframes/PrezWireframes01.vue
new file mode 100644
index 0000000..e838037
--- /dev/null
+++ b/prez-components/src/wireframes/PrezWireframes01.vue
@@ -0,0 +1,153 @@
+<script lang="ts" setup>
+
+import "leaflet/dist/leaflet.css"
+import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet"
+
+let zoom = ref(6)
+let center = ref([38, 139.69])
+
+import DataTable from "primevue/datatable";
+import Column from "primevue/column";
+import InputGroup from "primevue/inputgroup"
+import InputText from "primevue/inputtext"
+import Button from "primevue/button"
+import Badge from "primevue/badge"
+
+import { itemProperties } from './wireframesData'
+
+import { onMounted, ref } from "vue";
+
+const props = defineProps<{
+    title: string,
+    sidePanel: boolean,
+    sidePanelSearch: boolean,
+    sidePanelProfile: boolean,
+    pageType: 'list' | 'item' | 'search',
+    showMap: boolean
+}>();
+
+const profiles = [
+    {label: 'Alternates Profile'},
+    {label: 'DCAT'}
+]
+
+const listHeaders = [
+    {field: 'id', header: 'Identifier', sortable: true},
+    {field: 'type', header: 'Type', sortable: true},
+    {field: 'label', header: 'Preferred Label', sortable: true},
+    {field: 'link', header: 'Link', sortable: true},
+]
+
+const list = [
+    {id: 'bblck-vcbs:api', type: 'Catalog', label: 'API Building Blocks', link: '/v/catalogs/bblck-ctlg:bblocks/collections/bblck-vcbs:api'},
+    {id: 'bblck-vcbs:datatype', type: 'Catalog', label: 'Datatype Building Blocks', link: '/v/catalogs/bblck-ctlg:bblocks/collections/bblck-vcbs:datatype'}
+]
+
+const itemHeaders = [
+    {field: 'predicate', header: 'Properties', sortable: false},
+    {field: 'object', header: '', sortable: false}
+]
+
+const visible = ref(true);
+
+onMounted(()=>{
+    const mapContainer = document.getElementById("map-container");
+    if (mapContainer) {
+        const width = mapContainer.clientWidth;
+        mapContainer.style.height = `${width}px`;
+    }
+})
+
+</script>
+
+<template>
+    <div class="layout">
+        <div class="content">
+            <h1>{{ title }}</h1>
+            <div class="search" v-if="pageType == 'search'">
+                <InputGroup>
+                    <InputText placeholder="Keyword" />
+                    <Button icon="pi pi-search" />
+                </InputGroup>                
+            </div>
+            <div v-if="pageType == 'list'">
+                <div class="card">
+                    <DataTable :value="list" tableStyle="min-width: 50rem">
+                        <Column v-for="col of listHeaders" body="" v-bind="col" v-bind:key="col.field" style="width: 25%">
+                            <template #body="slotProps">
+                                <span>{{ list[slotProps.index][col.field] }}</span>
+                            </template>                            
+                        </Column>
+                    </DataTable>
+                </div>                    
+            </div>
+            <div v-if="pageType == 'item'">
+                <DataTable :value="itemProperties" tableStyle="min-width: 50rem">
+                    <Column v-for="col of itemHeaders" body="" v-bind="col" v-bind:key="col.field">
+                        <template #body="slotProps">
+                            <span v-if="col.field == 'predicate'">{{ itemProperties[slotProps.index][col.field].label }}</span>
+                            <span v-if="col.field == 'object'">
+                                {{ itemProperties[slotProps.index][col.field].value }}
+                                <Button v-if="itemProperties[slotProps.index][col.field].widget == 'button'">
+                                    {{ itemProperties[slotProps.index][col.field].label }}
+                                </Button>
+                            </span>
+                        </template>                            
+                    </Column>
+                </DataTable>                
+            </div>
+            <div v-if="showMap" id="map-container">
+                <l-map ref="map" :zoom="zoom" :center="[47.41322, -1.219482]" :useGlobalLeaflet="false">
+                    <l-tile-layer
+                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                        layer-type="base"
+                        name="OpenStreetMap"
+                    ></l-tile-layer>
+                </l-map>
+            </div>
+        </div>
+        <div class="sidebar" v-if="sidePanel">
+            <template v-if="sidePanelSearch">
+                <h3>Search collection</h3>
+                <InputGroup>
+                    <InputText placeholder="Keyword" />
+                    <Button icon="pi pi-search" />
+                </InputGroup>
+            </template>
+            <template v-if="sidePanelProfile">
+                <h3>Profiles</h3>
+                <Badge v-for="profile of profiles" :value="profile.label" v-bind:key="profile.label"/>
+            </template>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.layout {
+  display: flex;
+  height: 100vh; /* Adjust this value as needed */
+}
+
+.sidebar {
+  width: 250px; /* Adjust the width of the side panel */
+  padding: 20px;
+  background-color: #f0f0f0; /* Set background color for the side panel */
+}
+
+.sidebar h3:first-child {
+    margin-top:0;
+}
+
+.sidebar .p-badge:last-child {
+    margin-left: 5px;
+}
+
+.search {
+    margin-bottom:20px;
+}
+
+.content {
+  flex: 1; /* Allow the main content to take up remaining space */
+  padding: 20px; /* Add padding for the main content */
+}
+</style>
\ No newline at end of file
diff --git a/prez-components/src/wireframes/wireframesData.ts b/prez-components/src/wireframes/wireframesData.ts
new file mode 100644
index 0000000..d1007fe
--- /dev/null
+++ b/prez-components/src/wireframes/wireframesData.ts
@@ -0,0 +1,18 @@
+export const itemProperties = [
+    {
+        predicate: {label: 'IRI', 'link': 'https://prez.dev.kurrawong.ai/profiles/iri'},
+        object: {value: 'http://www.w3.org/ns/dx/conneg/altr-ext#alt-profile'},
+    },
+    {
+        predicate: {label: 'Label', link: 'http://www.w3.org/2000/01/rdf-schema#label', tooltip: 'rdfs:label'},
+        object: {value: 'Top level catalog', dataType: 'http://www.w3.org/2001/XMLSchema#string'},
+    },
+    {
+        predicate: {label: 'Has Part', link: 'http://purl.org/dc/terms/hasPart', tooltip: 'pcterms:hasPart'},
+        object: {value: 'Lower level catalog'}
+    },
+    {
+        predicate: {label: 'Members', link: 'https://prez.dev/members', tooltip: 'prez:members'},
+        object: {widget: 'button', label: 'View Members'}
+    }
+]