diff --git a/README.md b/README.md
index fac293c..d1198ef 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,9 @@ The test dashboard is part of the Sparc Portal and is meant to compare various v
 View the storybook of working components here
 https://nih-sparc.github.io/TestDashboard/?path=/docs/components-biolucidaviewer--docs
 
+Dev version here
+https://sparc-app-2-dev-features-2a5a06b8ea5c.herokuapp.com/apps/dashboard
+
 ## Recommended IDE Setup
 
 [VSCode](https://code.visualstudio.com/) 
@@ -50,9 +53,8 @@ Yarn run lint
 
 ## Dependency Setup
 
-If you are installing this project as a node module dependency you need the following installed in your project. 
+If you are installing this project as a node module [npm](https://www.npmjs.com/package/sparc-dashboard-beta) dependency you need the following installed in your project. 
 Vue(^3.3.4), Pinia(^2.1.7), mitt (^3.0.1), sparc-design-system-components-2 (0.0.26)
-
 ```sh
 yarn add pina
 yarn add vue
@@ -69,15 +71,13 @@ import App from './App.vue'
 import { createPinia } from 'pinia';
 import 'sparc-dashboard-beta/dist/style.css'
 import sparcDesignSystemComponents2Umd from 'sparc-design-system-components-2';
-import {default as SparcDashboard, installDashboard as install} from 'sparc-dashboard-beta/dist/index.js'
+import {default as SparcDashboard, installDashboard} from 'sparc-dashboard-beta';
 
 const app = createApp(App);
 let piniaInstance = createPinia();
 app.use(piniaInstance);
-
-installDashboard(app, piniaInstance); //call the install method and pass in the app and pinia instance
+installDashboard(app, piniaInstance);//call the install method and pass in the app and pinia instance
 app.component("SparcDashboard",SparcDashboard) // add the dashboard component to your vue app
-
 app.use(sparcDesignSystemComponents2Umd);
 app.mount('#app');
 
@@ -96,40 +96,84 @@ Clone the github repo and navigate to src/components/SampleComponent.vue
 
 Expose Your Custom Component to the Dashboard:
  - Add component tag name to the main.ts document
-	src/main.ts
+	src/main.ts or src/main.js
 ```
 const componentMap = [
-   'SubjectNav',
-   'ImageSelector',
-   'ImageViewer'
+    'ImageSelector',
+    'FlatmapViewer',
+    'BiolucidaViewer',
+    'QDBGraph'
   ] 
 ```
 
 Using the component “SampleComponent”, It would look something like this:
 ```
 const componentMap = [
-   'SubjectNav',
-   'ImageSelector',
-   'ImageViewer',
+    'ImageSelector',
+    'FlatmapViewer',
+    'BiolucidaViewer',
+    'QDBGraph',
    'SampleComponent'
     ]
 ```
 
 * component name should align with file name. SampleComponent.vue should be renamed and then that new name should be added in main.ts 
 
+### Template
 
-### PROPERTIES
-These are passed down to the your component (SampleComponent) from its wrapper via the props value
+This is your default template. Customize however you like with html and vue 3 markup. Do not delete the header which is added via the <slot> tag
+```
+<template>                 
+      <!-- slot is for header & user can add icons using childIcons-->
+      <slot :widgetName="widgetName" :childIcons="childIcons"></slot>
 
 
-**widgetName**: 
-name of component tag. Changing this will change the title of the wrapper. If you want a display name that is different from the file name. 
-Set Display name (widgetName) using emit.
-   ```
-const emit = defineEmits(['setTitle']);
-emit('setTitle','New Custom Component!'); //replace with component name you want shown
+    <div ref="instance">
+        <div class="sample-component">this is a sample component
+        <div> 
+            <p>more of the component goes here</p>
+        </div>
+        </div>
+
+    </div>
+</template>
 ```
+## Header
 
+### Set Name
+
+This line in your setup script allows you to set the header to your widget name. It does not have to match to file name. 
+```
+    const widgetName = ref('New Custom Component!');//replace with component name you want shown
+ ```
+DO NOT DELETE SLOT
+
+This is where your header is set. Do not delete or change the name
+```
+<slot :widgetName="widgetName"></slot>
+```
+
+### Set Icons
+
+There are default icons on the header. A download one and a close icon (when in edit mode). 
+You can add a custom icon to your widget's header and send it a function. 
+
+Here we are adding a graph icon that when clicked will alert the user. 
+js
+```
+    const childIcons=shallowRef([{"comp":GraphIcon,"event":testIcon}]);
+    function testIcon(){alert("test icon function")};
+```
+html
+```
+   <slot :widgetName="widgetName" :childIcons="childIcons"></slot>
+```
+A more practical case will be to open a settings window. Simply have a function that sets your settings visibility to true. See QDBGraph and it's QDBGraphSettings for a working example. 
+
+### PROPERTIES
+These are passed down to the your component (SampleComponent) from its wrapper via the props value
+
+**there are no properties available at this time
 
 
 ### CUSTOM EMITS/EVENTS:
@@ -152,81 +196,87 @@ Example:
 let payload ={}
 emit('SampleComponent-eventName',payload);
 ```
-	*see options for events you can emit that are already standard throughout the dashboard. 
-
-### OPTIONS
-
-***setTitle:*** 
-component ‘s name defaults to it’s vue tag-name. This allows you override it and add a different name
-
-Example:
-   ```
-const emit = defineEmits(['setTitle']);
-emit('setTitle','MUSE Image Viewer');
-```
-
-**other options to come. Examples might include a standard way of setting a filter that most widgets would find useful (age/sex/metadata for example)**
 
 ### EVENTS
 
-***ImageSelector-selectImage***
-- Thrown when image selector widget has selected an image
-Example:
+***ImageSelector-mbfImageSelected***
+- Thrown when image selector (ImageSelector.vue) widget has selected an image
+Example for use:
 
 ```
-emitter.on('ImageSelector-selectImage', (value) => { 
+emitter.on('ImageSelector-mbfImageSelected', (value) => { 
        //do something
    });
-   ```
-Here is an example of the SampleComponent.vue file as of 1/26/2024. See github for latest versions
-
 ```
-<template>
-   <div ref="instance">
-       <!-- all markup -->
-   </div>
-</template>
-<script setup>
-
-
-   import { ref, defineEmits, inject, watch, onMounted, onUnmounted } from 'vue';
-   import { useOpenerStore } from '../stores/opener';
-
-
-   //allows you to emit events that can be caught by other components.
-  const emitter = inject('emitter');
-   const opener = useOpenerStore();
-
-
-   const props = defineProps({
-       widgetName:{
-               type:String,
-               required:true
-       }
-   })
-  
-   const emit = defineEmits(['setTitle']);
-   emit('setTitle','New Custom Component!'); //replace with component name you want shown
-
+***FlatmapViewer-selectImage***
+- Thrown when user selects segment of Flatmap Viewer (FlatmapViewer.vue) 
+```
+    emitter.on('FlatmapViewer-selectImage', (selectedImage) => { 
+        //do something
+    });
+```
 
-   //emit and event
-   let payload ={}
-   emit('SampleComponent-eventName',payload);
+## Sample Component
 
+Here is an example of the SampleComponent.vue file as of 7/17/2024. See github for latest versions
 
-   //catch an event
-   // This catches when Image Selector throws the event when the image selector widget has an image selected
-   //see Events in documentation for all available events
-   emitter.on('ImageSelector-selectImage', (imagePath) => { 
-       //do something
-   });
+```
+<template>                 
+      <!-- slot is for header & user can add icons using childIcons-->
+      <slot :widgetName="widgetName" :childIcons="childIcons"></slot>
+
+
+    <div ref="instance">
+        <div class="sample-component">this is a sample component
+        <div> 
+            <p>more of the component goes here</p>
+        </div>
+        </div>
+        <!-- all markup -->
+    </div>
+</template>
+<script setup>
 
+    import { ref, defineEmits, inject, watch, onMounted, onUnmounted } from 'vue';
+    import GraphIcon from './icons/GraphIcon.vue';
+    //this is included so that your component does not inherit props or attributes that you do not explicitly declare 
+    defineOptions({
+        inheritAttrs: false
+    })
+
+    const widgetName = ref('New Custom Component!');//replace with component name you want shown
+    
+    //add icon to header. must import your icon as shown above ex: import GraphIcon from './icons/GraphIcon.vue'
+    //this is optional and can be deleted
+    const childIcons=shallowRef([{"comp":GraphIcon,"event":testIcon}]);
+    function testIcon(){alert("test icon function")};
+
+    //emit a custom event that you name
+    //if you create an event that you want available for other widgets/users, please document it under Events in the README.md
+    //allows you to emit events that can be caught by other components. 
+    const emitter = inject('emitter');
+    let payload ={} //can be any type
+    emitter.emit('SampleComponent-eventName',payload);
+
+    //catch an event
+    // This is an active event that gets called by the ImageSelector component when a user clicks the "open" button on an image.
+    //see Events in documentation for all available events
+    emitter.on('ImageSelector-mbfImageSelected', (value) => {  
+        //do something
+    });
 
 </script>
 <style scoped lang="scss">
-//import SPARC styles
-
-
+//import SPARC styles if you want to have access to them. 
+@import './node_modules/sparc-design-system-components-2/src/assets/_variables.scss';
+
+//example of class styles
+.sample-component{
+    height:500px;
+    width:400px;
+    border: solid purple 1px;
+    background-color: lightgray;
+}
 </style>
 ```
 
diff --git a/src/components/BiolucidaViewer.vue b/src/components/BiolucidaViewer.vue
index d50469b..b638b44 100644
--- a/src/components/BiolucidaViewer.vue
+++ b/src/components/BiolucidaViewer.vue
@@ -1,9 +1,12 @@
 <template>
-    <div class="tw-flex tw-flex-col tw-h-full">
+          
+    <slot :widgetName="widgetName"></slot>
+    
+    <div v-bind="$attrs"  class="tw-flex tw-flex-col tw-h-full">
         <div class="bv-metadata tw-text-left tw-p-1 tw-text-sm">
-            <p><span>Dataset: </span>
+            <!-- <p><span>Dataset: </span>
     Dataset Name Here </p>
-            <p><span>Metadata: </span>Metadata could go here</p>
+            <p><span>Metadata: </span>Metadata could go here</p> -->
         </div>
         <div class="tw-h-screen tw-flex tw-justify-center">
             <iframe class="tw-p-1 tw-w-screen" :src="mbfURLSrc" ></iframe>
@@ -16,7 +19,8 @@
   import {Dataset} from '../assets/Model';
   import { useOpenerStore } from "../stores/opener";
 
-  const emit = defineEmits(['setTitle','selectWidget']);
+  const widgetName = ref('MBF Image Viewer');
+  const emit = defineEmits(['selectWidget']);
 
   const props = defineProps({
     imageID:0,
@@ -32,13 +36,12 @@
   const opener = useOpenerStore();
 
   onMounted(() => {
-    emit('setTitle','MBF Image Viewer');
     opener.mbfViewerCount++;
   });
   onUnmounted(()=>{
     opener.mbfViewerCount--;
   })
-    emitter.on('mbf-image-selected',(img)=>{
+    emitter.on('ImageSelector-mbfImageSelected',(img)=>{
         if(opener.mbfViewerCount>1 && props.listening || opener.mbfViewerCount==1){
             mbfURLSrc.value=img;
         }
diff --git a/src/components/DashHeader.vue b/src/components/DashHeader.vue
new file mode 100644
index 0000000..1deeeb2
--- /dev/null
+++ b/src/components/DashHeader.vue
@@ -0,0 +1,55 @@
+<template>
+    <div class="content-header stick-to-top tw-flex tw-flex-row tw-items-center tw-justify-between tw-h-10 tw-p-1">                    
+      <div>
+        <h3>{{ widgetName }}</h3>
+      </div>
+      <div>
+        <slot></slot>
+      </div>
+    </div>
+</template>
+<script setup>
+//this component really only has one job, and it's to format the header correctly and make it easier for users to add icons to the header without much markup on their end.
+//alternative markup that would be needed on all children >
+//  <div v-bind="$attrs">                    
+//       <slot name="title" :widgetName="widgetName"></slot>
+//       <div>
+//         <GraphIcon class="tw-p-1" @click="settingsVisible=true"></GraphIcon>
+//         <slot></slot>
+//       </div>
+//     </div> 
+import { ref, inject, computed, watch, provide} from 'vue';
+const emitter = inject('emitter');
+const props = defineProps({      
+    widgetName:{
+        type:String,
+        required:true
+    }
+})
+
+</script>
+<style scoped lang="scss">
+@import './node_modules/sparc-design-system-components-2/src/assets/_variables.scss';
+
+.content-header{
+    border-bottom: 1px solid $mediumGrey;
+    
+    h3{
+        margin:10px;
+    }
+    .close-button{
+        cursor: pointer;
+        margin-right:3px;
+        width:20px;
+        height: 20px;
+        padding:8px;
+    }
+}
+
+.stick-to-top{
+position: sticky;
+top: 0;
+width: 100%;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/FlatmapViewer.vue b/src/components/FlatmapViewer.vue
index 6d2c537..86941f4 100644
--- a/src/components/FlatmapViewer.vue
+++ b/src/components/FlatmapViewer.vue
@@ -1,12 +1,13 @@
-<template>
-<div class="flatmap-viewer tw-p-0">
-    <div class="tw-text-left tw-pl-1">
-        <p><b>Current Location: </b>{{ locationLabel }}</p>
-    </div>
+<template>                  
+    <slot :widgetName="widgetName"></slot>
+    <div v-bind="$attrs" class="flatmap-viewer tw-p-0">
+        <div class="tw-text-left tw-pl-1" style="height: 50px;font-size:20px;line-height: 20px;margin: 4px 0 5px 0">
+            <p><b>Current Location: </b>{{ locationLabel }}</p>
+        </div>
 
-    <FlatmapVuer class="tw-px-2 tw-py-2" :disableUI="disableFlatmapUI" entry="UBERON:1759" v-on:resource-selected="FlatmapSelected"  v-on:ready="FlatmapReady"/>
+        <FlatmapVuer class="tw-px-2 tw-py-2" :disableUI="disableFlatmapUI" entry="UBERON:1759" v-on:resource-selected="FlatmapSelected"  v-on:ready="FlatmapReady"/>
 
-</div>
+    </div>
 
 </template>
 <script setup>
@@ -15,14 +16,22 @@
   import { useOpenerStore } from "../stores/opener";
   import { useLocationStore} from "../stores/locationSelect";
   FlatmapVuer.props.flatmapAPI.default="https://mapcore-demo.org/devel/flatmap/v4/";
+    defineOptions({
+        inheritAttrs: false
+    })
+  const props = defineProps({
+    listening:{
+            tyep:Boolean
+    }
+  })
+
   const disableFlatmapUI = true;
   let FlatmapReady = false;
 
   const locationStore = useLocationStore();
   locationStore.init()
 
-  const emit = defineEmits(['setTitle']);
-  emit('setTitle','Flatmap Selector'); 
+  const widgetName = ref('Flatmap Selector');
 
   const emitter = inject('emitter');
   
@@ -35,7 +44,7 @@ function FlatmapSelected(data){
     locationLabel.value = data.label;
     const locationMinMax = tempMapToMinMax(locationId);
     //send to image selector
-    emitter.emit("anatomical-location-selected",locationMinMax)
+    emitter.emit("FlatmapViewer-anatomicalLocationSelected",locationMinMax)
 }
 //this function is my temp work around to not having the map return anything useful
 function tempMapToMinMax(id){
diff --git a/src/components/ImageSelector.vue b/src/components/ImageSelector.vue
index 01fe824..57dd1b0 100644
--- a/src/components/ImageSelector.vue
+++ b/src/components/ImageSelector.vue
@@ -1,4 +1,7 @@
-<template>
+<template>              
+      <slot :widgetName="widgetName"></slot>
+<div  v-bind="$attrs">
+
     <div class="fill">
         <img :src=imgPath>
     </div>
@@ -14,7 +17,7 @@
                 </template> 
             </el-table-column>
      </el-table>
-
+    </div>
 
 </template>
 <script setup>
@@ -34,15 +37,14 @@
     const imageType = ref("");
     const TableData = ref();
 
-    const emit = defineEmits(['setTitle'])
-    emit('setTitle','MUSE Image Selector');
+    const widgetName = ref('MUSE Image Selector');
 
 function selectImage(index){
     let img = TableData.value[index].path;
-    emitter.emit("mbf-image-selected",img);
+    emitter.emit("ImageSelector-mbfImageSelected",img);
 }
 
-emitter.on('MBFImageArray-Update',(imageArray)=>{
+emitter.on('locationSelect-MBFImageArrayUpdate',(imageArray)=>{
     //buildDataTable
     //imageArray.value = new TableObject(imageArray);
 
@@ -77,7 +79,7 @@ function buildDataTable(tbleObj){
     imgs.forEach((img)=>{
         let column = {
             name:img.ImgName,
-            size: "...",
+            size: Math.random()*10+"mb",
             path: img.Path
         }
         _tempArr.push(column);
diff --git a/src/components/ImageViewer.vue b/src/components/ImageViewer.vue
index f923273..3df8663 100644
--- a/src/components/ImageViewer.vue
+++ b/src/components/ImageViewer.vue
@@ -1,4 +1,7 @@
 <template>
+    <div class="content-header stick-to-top tw-flex tw-flex-row tw-items-center tw-justify-between tw-h-10 tw-p-1">                    
+      <slot></slot>
+    </div>
     <div class="metadata-imgV">
 
     </div>
diff --git a/src/components/ItemWidget.vue b/src/components/ItemWidget.vue
index bb3ff71..e8ca755 100644
--- a/src/components/ItemWidget.vue
+++ b/src/components/ItemWidget.vue
@@ -1,22 +1,21 @@
 <template>
             <div ref="instance" class="grid-stack-item-content" @click="selectWidget()">
-
-                <div class="tw-flex tw-flex-row tw-items-center tw-justify-between tw-h-10 content-header stick-to-top tw-p-1">
-                    <h4>{{ widgetTitle}}</h4>
-                    <DownloadIcon></DownloadIcon>
-                    <close-icon v-if="!staticMode" background="#8300BF" color="white" class="close-button" @click="$emit('removeWidget')"></close-icon>
-                </div>
-
-                    <component class="widget-body"  @setTitle="(t)=>updateTitle(t)" :is="componentTag" :listening="highlight"></component>
-
+                <component class="widget-body" v-slot="slotProps" :is="componentTag" :listening="highlight">
+             
+                    <DashHeader :widgetName="slotProps.widgetName" :staticMode="staticMode">
+                        <component class="tw-p-1" v-for="icon in slotProps.childIcons" :is="icon.comp" @click="icon.event" ></component>
+                        <DownloadIcon></DownloadIcon>
+                        <close-icon v-if="!staticMode" background="#8300BF" color="white" class="close-button" @click="$emit('removeWidget')"></close-icon>
+                    </DashHeader>
+                </component> 
             </div>
 </template>
 <script setup>
     import CloseIcon from './icons/CloseIcon.vue';
     import DownloadIcon from './icons/DownloadIcon.vue'
-    import GraphIcon from './icons/GraphIcon.vue'
     import { ref, inject, computed, watch, provide} from 'vue';
     import { useOpenerStore } from "../stores/opener";
+    import DashHeader from "./DashHeader.vue";
 
     const emit = defineEmits(['removeWidget']);
     const opener = useOpenerStore();
@@ -36,8 +35,8 @@
                 
             }
         })
-        //this controls properties of a widget being dynamically opened from another widget (via the spacdashboard).
-        //use case for this might not be needed anymore as we use edit mode and static mode to add widgets. 
+    //this controls properties of a widget being dynamically opened from another widget (via the spacdashboard).
+    //use case for this might not be needed anymore as we use edit mode and static mode to add widgets. 
     let propName = ref("");
     let propVal = ref("");
     watch(() => props.componentProperties, (newVal, oldVal) => {
@@ -48,12 +47,6 @@
 
 //-----------------------------------------------------------------------------
     let instance = ref(null);
-
-    let widgetTitle = ref("");
-    function updateTitle(t){
-        widgetTitle.value = t;
-    }
-
     let highlight = ref(false)
     
 
@@ -69,9 +62,9 @@
 <style scoped lang="scss">
 @import './node_modules/sparc-design-system-components-2/src/assets/_variables.scss';
 
-.content-header{
+:deep(.content-header){
     border-bottom: 1px solid $mediumGrey;
-    
+    overflow: hidden;
     h3{
         margin:10px;
     }
@@ -83,7 +76,7 @@
         padding:8px;
     }
 }
-.widget-body{
+:deep(.widget-body){
   height: calc( 100% - 40px );
 }
 .grid-stack-item-content {
@@ -104,7 +97,7 @@
     width:100%;
     }
 }
-.stick-to-top{
+:deep(.stick-to-top){
     position: sticky;
     top: 0;
     width: 100%;
diff --git a/src/components/LocationNav.vue b/src/components/LocationNav.vue
index cf01efa..cda88fb 100644
--- a/src/components/LocationNav.vue
+++ b/src/components/LocationNav.vue
@@ -1,5 +1,7 @@
 <template>
-
+    <div class="content-header stick-to-top tw-flex tw-flex-row tw-items-center tw-justify-between tw-h-10 tw-p-1">                    
+      <slot></slot>
+    </div>
     <div class="fill">
 
     </div>
diff --git a/src/components/QDBGraph.vue b/src/components/QDBGraph.vue
index 2532f7f..89dacb1 100644
--- a/src/components/QDBGraph.vue
+++ b/src/components/QDBGraph.vue
@@ -1,7 +1,10 @@
 
 <template>
-    <button @click="settingsVisible=true" ><i>settings</i></button> 
-    <div class="tw-flex tw-flex-col tw-h-full">
+  <!-- slot for dynamic header -->
+  <slot :widgetName="widgetName" :childIcons="childIcons">
+  </slot>
+
+    <div v-bind="$attrs"  class="tw-flex tw-flex-col tw-h-full">
       <component
       id="my-chart-id"
       :is="visualizationComponent"
@@ -21,19 +24,23 @@
 </template>
 <script setup>
 
-  import {ref, onBeforeMount, shallowRef} from "vue";
+  import {ref, onMounted, shallowRef} from "vue";
   import { Bar, Scatter, Pie, Line  } from 'vue-chartjs'
   import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale,PointElement, LineElement } from 'chart.js'
   ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, PointElement, LineElement)
   import {GraphSettingsObject, VisualizationMap} from "../devComponents/QDBGraph/GraphModel.js"
   import GraphSettings from '../devComponents/QDBGraph/QDBGraphSettings.vue'
+  import GraphIcon from "./icons/GraphIcon.vue";
+
   defineOptions({
   inheritAttrs: false
   })
-  const emit = defineEmits(['setTitle']);
-  emit('setTitle','QDB Graph')
 
+  const widgetName = ref("QDB Graph");
   const settingsVisible=ref(false);
+  function openSettings(){settingsVisible.value=true}
+  //add icon to header
+  const childIcons=shallowRef([{"comp":GraphIcon,"event":openSettings}])
 
   //retrieve saved settings if exist
   let graphSettingsObject = getSavedGraphSettings();
@@ -63,6 +70,7 @@ function getSavedGraphSettings(){
    }else{
     return new GraphSettingsObject();
    }
+   
 }
 
 </script>
diff --git a/src/components/SampleComponent.vue b/src/components/SampleComponent.vue
index 00e27ee..4c4cad9 100644
--- a/src/components/SampleComponent.vue
+++ b/src/components/SampleComponent.vue
@@ -1,4 +1,8 @@
-<template>
+<template>                 
+      <!-- slot is for header & user can add icons using childIcons-->
+      <slot :widgetName="widgetName" :childIcons="childIcons"></slot>
+
+
     <div ref="instance">
         <div class="sample-component">this is a sample component
         <div> 
@@ -11,42 +15,39 @@
 <script setup>
 
     import { ref, defineEmits, inject, watch, onMounted, onUnmounted } from 'vue';
-    import { useOpenerStore } from '../stores/opener';
+    import GraphIcon from './icons/GraphIcon.vue';
     //this is included so that your component does not inherit props or attributes that you do not explicitly declare 
     defineOptions({
         inheritAttrs: false
     })
 
-    //allows you to emit events that can be caught by other components. 
-    const emitter = inject('emitter');
-    const opener = useOpenerStore();
-
-    const props = defineProps({
-        widgetName:{
-                type:String,
-                required:true
-        }
-    })
+    const widgetName = ref('New Custom Component!');//replace with component name you want shown
     
-    const emit = defineEmits(['setTitle']);
-    emit('setTitle','New Custom Component!'); //replace with component name you want shown
+    //add icon to header. must import your icon as shown above ex: import GraphIcon from './icons/GraphIcon.vue'
+    //this is optional and can be deleted
+    const childIcons=shallowRef([{"comp":GraphIcon,"event":testIcon}]);
+    function testIcon(){alert("test icon function")};
 
-    //emit and event
-    let payload ={}
-    emit('SampleComponent-eventName',payload);
+    //emit a custom event that you name
+    //if you create an event that you want available for other widgets/users, please document it under Events in the README.md
+    //allows you to emit events that can be caught by other components. 
+    const emitter = inject('emitter');
+    let payload ={} //can be any type
+    emitter.emit('SampleComponent-eventName',payload);
 
     //catch an event
-    // This catches when a new widget is added to the sparc dashboard main component
+    // This is an active event that gets called by the ImageSelector component when a user clicks the "open" button on an image.
     //see Events in documentation for all available events
-    emitter.on('SparcDashboard-addNewWidget', (value) => {  
+    emitter.on('ImageSelector-mbfImageSelected', (value) => {  
         //do something
     });
 
 </script>
 <style scoped lang="scss">
-//import SPARC styles
+//import SPARC styles if you want to have access to them. 
 @import './node_modules/sparc-design-system-components-2/src/assets/_variables.scss';
 
+//example of class styles
 .sample-component{
     height:500px;
     width:400px;
diff --git a/src/components/SparcDashboard.vue b/src/components/SparcDashboard.vue
index 8478e97..4154155 100644
--- a/src/components/SparcDashboard.vue
+++ b/src/components/SparcDashboard.vue
@@ -52,9 +52,9 @@ let NewComponent = {};
 let NextId = DashboardItems.value.length;
 
 const dBItems = debug ? [{ id: "ODBGraph-1", x: 0, y: 0, h: 4, w:3, componentName:"Flatmap Viewer",component:"QDBGraph" }] : 
-[{ id: "FlatmapViewer-1", x: 0, y: 0, h: 8, w:2, componentName:"Flatmap Viewer",component:"FlatmapViewer" },
-    { id: "ImageSelector-2", x: 2, y: 0, h: 8, w:3, componentName:"Image Selector", component:"ImageSelector"},
-    { id: "BiolucidaViewer-3", x: 5, y: 0,h: 10, w:5, componentName:"MBF Viewer", component:"BiolucidaViewer"}]
+[{ id: "FlatmapViewer-1", x: 0, y: 0, h: 8, w:2, componentName:"Flatmap Viewer",component:"FlatmapViewer" },]
+    // { id: "ImageSelector-2", x: 2, y: 0, h: 8, w:3, componentName:"Image Selector", component:"ImageSelector"},
+    // { id: "BiolucidaViewer-3", x: 5, y: 0,h: 10, w:5, componentName:"MBF Viewer", component:"BiolucidaViewer"}]
 
 
 onBeforeMount(() => {
diff --git a/src/components/SubjectNav.vue b/src/components/SubjectNav.vue
index 6c8c7ca..99b7982 100644
--- a/src/components/SubjectNav.vue
+++ b/src/components/SubjectNav.vue
@@ -1,5 +1,7 @@
 <template>
-    <slot ></slot>
+    <div class="content-header stick-to-top tw-flex tw-flex-row tw-items-center tw-justify-between tw-h-10 tw-p-1">                    
+      <slot></slot>
+    </div>
     <div class="fill">
         <img :src=imgPath>
     </div>
diff --git a/src/devComponents/ImageSelector/ImageModel.js b/src/devComponents/ImageSelector/ImageModel.js
index 5a33d86..5f72cb0 100644
--- a/src/devComponents/ImageSelector/ImageModel.js
+++ b/src/devComponents/ImageSelector/ImageModel.js
@@ -14,7 +14,7 @@ class MBFImageObject {
     constructor(data){
         this.id = data.image_id;
         this.name = data.image_id,
-        this.size = "...",
+        this.size = (Math.random()*10).toFixed(2)+"mb",
         this.path = data.share_link
     }
 }
@@ -30,7 +30,7 @@ export class TableObject{
         this.MBFImageObject.forEach((img)=>{
             let column = {
                 name:img.id,
-                size: "...",
+                size: (Math.random()*10).toFixed(2)+"mb",
                 path: ""
             }
             _tempArr.push(column);
@@ -42,7 +42,7 @@ export class TableObject{
         this.SparcImageArray.forEach((img)=>{
             let column = {
                 name:img.id,
-                size: "...",
+                size: (Math.random()*10).toFixed(2)+"mb",
                 path: img.path
             }
             _tempArr.push(column);
diff --git a/src/devComponents/QDBGraph/GraphModel.js b/src/devComponents/QDBGraph/GraphModel.js
index 34c81d4..d7732d3 100644
--- a/src/devComponents/QDBGraph/GraphModel.js
+++ b/src/devComponents/QDBGraph/GraphModel.js
@@ -16,14 +16,21 @@ class GraphMetric {
         this._xAspect = "";
         this._yAspect = "";
         this._aspectList=[];
-        this._metric = "";
+        this.metric = "";
+    }
+    set _metric(value){
+        if(value==="random data") this.ranomizeData();
+        this.metric =value;
+    }
+    get _metric(){
+        return this.metric;
     }
     pointDataForScatter(){
         let pointDataArray=[];
         this._x.forEach(x => {
             const yMatch = this._y.find(y => y.inst === x.inst && y.agg_type=="instance" && x.agg_type==="instance");
             if(yMatch){
-            pointDataArray.push({"x":x.value,"y":x.value});
+            pointDataArray.push({"x":x.value,"y":yMatch.value});
             }
         });
             this.data = pointDataArray;
@@ -31,7 +38,17 @@ class GraphMetric {
     pointDataForBar(){
         let pointDataArray=this._x.map(p=>p.value);
         this.data = pointDataArray;
-    }    
+    }  
+    ranomizeData(){
+        let tempArr=[];
+        let tempArr1 = [];
+        for(var i=0;i<100;i++){
+            tempArr.push({"inst":i,"agg_type":"instance","value":Math.floor(Math.random()*101)});
+            tempArr1.push({"inst":i,"agg_type":"instance","value":Math.floor(Math.random()*101)});
+        }
+        this._y = tempArr;
+        this._x = tempArr1;
+    }  
     clearAllAspects(){
         this._xAspect="";
         this._yAspect="";
diff --git a/src/devComponents/QDBGraph/QDBGraphSettings.vue b/src/devComponents/QDBGraph/QDBGraphSettings.vue
index caf4f0e..5819b44 100644
--- a/src/devComponents/QDBGraph/QDBGraphSettings.vue
+++ b/src/devComponents/QDBGraph/QDBGraphSettings.vue
@@ -21,7 +21,7 @@
               <label >{{ gMList.indexOf(gm)+1+": " }}</label>
               <el-select v-model="gm._metric" placeholder="select Metric" class=" tw-w-40">
                 <el-option 
-                  v-for="m in metricList" :key="m" :label="m" :value="m" @click="selectMetric(m, gm)">
+                  v-for="m in metricList" :key="m" :label="m" :value="m" @click="selectMetric(m, gm)">{{ m }}
                 </el-option>
               </el-select>
             </div>
@@ -79,7 +79,7 @@
 </template>
 <script setup>
 
-import { ref, onMounted, watch, shallowRef, toRaw } from 'vue'
+import { ref, onMounted, watch, shallowRef, toRaw, computed } from 'vue'
 import { ElMessageBox } from 'element-plus'
 import {VisualizationMap, GraphSettingsObject} from "./GraphModel.js"
 import { Api } from "../../services";
@@ -125,7 +125,7 @@ function changeVisualization(graphName){
     selectedVisual.value = graphName ;
     newGraphData.value.visualization = graphName;
 }
-//multi metric options -----------------------------------------
+//multi metric options gMList = global metric-----------------------------------------
 const gMList = shallowRef(newGraphData.value.datasets);
 watch(()=>newGraphData.value.datasets, (newVal) => {
        gMList.value = newGraphData.value.datasets;
@@ -140,9 +140,9 @@ function removeMetric(metric){
   //   gMList.value.slice(index,1);
   // }
 }
-//metrics ------------------------------------------------------
+//metric options within gMList------------------------------------------------------
+
 const metricList = ref([]);
-//const selectedMetric = ref("");
 
 const getMetricList = async ()=>{
   let _metric_list = {};
@@ -153,7 +153,9 @@ const getMetricList = async ()=>{
         })
         if (_response.status === 200) {
           _metric_list = _response.data.result;
-          metricList.value = _metric_list.map(m=>m.label);
+          _metric_list = _metric_list.map(m=>m.label);
+          _metric_list.push("random data");
+          metricList.value = _metric_list;
         }
     }catch(e){
         console.error("couldn't fetch classes/metrics from QDB");
@@ -161,6 +163,7 @@ const getMetricList = async ()=>{
     }
   }
   function selectMetric(selectedMetric, targetMetric){
+    if(selectedMetric==="random data"){return;}
       const i = newGraphData.value.datasets.indexOf(targetMetric);
       const dataset = newGraphData.value.datasets[i];
       dataset._metric = selectedMetric;
diff --git a/src/stores/locationSelect.js b/src/stores/locationSelect.js
index 35f31b8..f54440e 100644
--- a/src/stores/locationSelect.js
+++ b/src/stores/locationSelect.js
@@ -7,7 +7,7 @@ export const useLocationStore = defineStore('locationSelected', () => {
   const emitter = inject('emitter');
     function init(){
 
-      emitter.on('anatomical-location-selected',(location)=>{
+      emitter.on('FlatmapViewer-anatomicalLocationSelected',(location)=>{
         if(location && location.min && location.max){
           getRegionMinMax(location.min,location.max);
         }
@@ -60,7 +60,7 @@ const getPackageIds = async(instances)=>{
     }
   }
   ImagesArray = ImagesArray.filter(x=>x.id_type!=="quantdb"&& x.id);
-  emitter.emit('MBFImageArray-Update',ImagesArray);
+  emitter.emit('locationSelect-MBFImageArrayUpdate',ImagesArray);
 }
 //https://services.scicrunch.io/quantdb/api/1/values/quant?aspect=distance-via-reva-ft-sample-id-normalized-v1&subject=sub-f001&value-quant-min=0.0&value-quant-max=0.1