diff --git a/src/vue-poc/components/vp-favorite.vue b/src/vue-poc/components/vp-favorite.vue
new file mode 100644
index 0000000..13daa7c
--- /dev/null
+++ b/src/vue-poc/components/vp-favorite.vue
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!-- 
+display button that invokes a  save favorite form
+ -->
+<template id="vp-favorite">
+  <v-menu
+      offset-x
+      :close-on-content-click="false"
+      :nudge-width="200"
+      v-model="frmfav"
+    >
+      <v-btn slot="activator" @click="set(!frmfav)" icon flat title="Bookmark this page">
+       <v-icon>star_border</v-icon>
+       </v-btn>
+
+       <v-card style="width:400px;">
+            <v-toolbar class="green"> 
+        <v-card-title>
+            Bookmark this page
+          </v-card-title>
+          </v-toolbar>
+          
+         <v-card-text>
+            <h6>{{$route.meta.title}}</h6>
+            <v-select
+              v-model="tags"
+              label="tags"
+              chips
+              tags
+              :items="taglist"
+            ></v-select>
+         </v-card-text>
+         
+         <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn color="primary" flat @click.stop="set(false)">Cancel</v-btn>
+            <v-btn color="primary" flat @click.stop="favorite(); set(false)">Save</v-btn>
+          </v-card-actions>
+        </v-card>
+   </v-menu></template>
+<script>{ 
+  props: { 
+    frmfav: Boolean
+  },
+  data(){
+    return {
+      tags: [],
+      taglist: [
+        'todo',
+        'find',
+        'some',
+        'good',
+        'tags'
+      ],
+    }
+  },
+  methods:{
+    set(v){
+      this.$emit('update:frmfav', v)
+    },
+    
+    favorite(){
+      alert("save");
+    }
+  }
+}</script>
diff --git a/src/vue-poc/components/vp-notifications.vue b/src/vue-poc/components/vp-notifications.vue
new file mode 100644
index 0000000..9c16812
--- /dev/null
+++ b/src/vue-poc/components/vp-notifications.vue
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- 
+ show notifications
+ -->
+<template id="vp-notifications">
+   <v-card>
+         <v-toolbar class="amber white--text">
+                <v-toolbar-title >Notifications </v-toolbar-title>
+                {{ $notification.nextId }}
+                 <v-btn  @click="refresh" icon><v-icon>refresh</v-icon></v-btn>
+          <v-spacer></v-spacer>
+          <v-btn  @click="set(false)" icon><v-icon>close</v-icon></v-btn>
+          </v-toolbar>
+          <v-card-text>
+        <v-list three-line>
+          <template v-for="msg in $notification.messages" >
+           <v-list-tile avatar  v-bind:key="msg.index" @click="">
+              <v-list-tile-avatar>
+                   <v-icon color="red">swap_horiz</v-icon>
+              </v-list-tile-avatar>
+              <v-list-tile-content>
+              <v-tooltip>
+                <v-list-tile-title  slot="activator">{{ msg.created | fromNow("from") }}</v-list-tile-title>
+                <span v-text="msg.created"></span>
+                </v-tooltip>
+                <v-list-tile-sub-title v-html="msg.text"></v-list-tile-sub-title>
+              </v-list-tile-content>
+              <v-list-tile-action>
+               <v-list-tile-action-text>{{ msg.index }}</v-list-tile-action-text>
+              </v-list-tile-action>
+            </v-list-tile>
+           </template>
+         </v-list>
+      </v-card-text>
+
+      </v-card>
+</template>
+
+<script>{
+  props: { 
+    showNotifications: Boolean
+  },
+  methods:{
+    set(v){
+      this.$emit('update:showNotifications', v)
+    },
+    refresh(){
+      this.$forceUpdate();
+    }
+  }
+}</script>
