diff --git a/api/routes/video-lease.ts b/api/routes/video-lease.ts
index 525bd4b91..19e53ed6d 100644
--- a/api/routes/video-lease.ts
+++ b/api/routes/video-lease.ts
@@ -1,4 +1,5 @@
 import { Type } from '@sinclair/typebox'
+import moment from 'moment';
 import Schema from '@openaddresses/batch-schema';
 import Err from '@openaddresses/batch-error';
 import Auth, { AuthUserAccess } from '../lib/auth.js';
@@ -64,7 +65,8 @@ export default async function router(schema: Schema, config: Config) {
             }
 
             const lease = await config.models.VideoLease.generate({
-                ...req.body,
+                name: req.body.name,
+                expiration: moment().add(req.body.duration, 'seconds').toISOString(),
                 path: randomUUID(),
                 username: user.email
             })
diff --git a/api/web/src/components/CloudTAK/Map.vue b/api/web/src/components/CloudTAK/Map.vue
index 13005daf9..ae31ed101 100644
--- a/api/web/src/components/CloudTAK/Map.vue
+++ b/api/web/src/components/CloudTAK/Map.vue
@@ -255,7 +255,7 @@
                         class='col-12 py-1 px-2 hover-button cursor-pointer'
                         @click='startDraw("point")'
                     >
-                        <IconPoint 
+                        <IconPoint
                             :size='25'
                             :stroke='1'
                         /> Draw Point
@@ -264,7 +264,7 @@
                         class='col-12 py-1 px-2 hover-button cursor-pointer'
                         @click='startDraw("linestring")'
                     >
-                        <IconLine 
+                        <IconLine
                             :size='25'
                             :stroke='1'
                         /> Draw Line
@@ -376,9 +376,9 @@
                 />
                 <div class='modal-header text-white'>
                     <div class='d-flex align-items-center'>
-                        <IconInfoSquare 
-                            :size='28' 
-                            :stroke='1' 
+                        <IconInfoSquare
+                            :size='28'
+                            :stroke='1'
                         />
                         <span class='mx-2'>No Channels Selected</span>
                     </div>
@@ -503,7 +503,7 @@ export default {
     },
     unmounted: function() {
         cotStore.$reset();
-        mapStore.$reset();
+        mapStore.destroy();
         overlayStore.$reset();
         profileStore.$reset();
     },
diff --git a/api/web/src/components/PageFooter.vue b/api/web/src/components/PageFooter.vue
index 69dbe00d6..72c812f02 100644
--- a/api/web/src/components/PageFooter.vue
+++ b/api/web/src/components/PageFooter.vue
@@ -37,7 +37,7 @@
     </footer>
 </template>
 
-<script>
+<script lang='ts'>
 export default {
     name: 'PageFooter'
 }
diff --git a/api/web/src/components/Profile/ProfileVideos.vue b/api/web/src/components/Profile/ProfileVideos.vue
index aada0f71e..fafc60046 100644
--- a/api/web/src/components/Profile/ProfileVideos.vue
+++ b/api/web/src/components/Profile/ProfileVideos.vue
@@ -11,7 +11,7 @@
                     :size='32'
                     :stroke='1'
                     class='cursor-pointer'
-                    @click='token={}'
+                    @click='lease={}'
                 />
                 <IconRefresh
                     v-tooltip='"Refresh"'
@@ -46,7 +46,7 @@
                     <tr
                         v-for='t in list.items'
                         :key='t.id'
-                        @click='token = t'
+                        @click='lease = t'
                     >
                         <td v-text='t.name' />
                         <td><TablerEpoch :date='t.created' /></td>
@@ -56,10 +56,10 @@
             </table>
         </div>
 
-        <TokenModal
-            v-if='token'
-            :token='token'
-            @close='token = false'
+        <VideoLeaseModal
+            v-if='lease'
+            :lease='lease'
+            @close='lease = false'
             @refresh='fetch'
         />
     </div>
@@ -67,7 +67,7 @@
 
 <script>
 import { std } from '/src/std.ts';
-import TokenModal from './TokenModal.vue';
+import VideoLeaseModal from './VideoLeaseModal.vue';
 import {
     IconPlus,
     IconRefresh,
@@ -81,7 +81,7 @@ import {
 export default {
     name: 'ProfileVideos',
     components: {
-        TokenModal,
+        VideoLeaseModal,
         TablerNone,
         IconPlus,
         IconRefresh,
@@ -91,7 +91,7 @@ export default {
     data: function() {
         return {
             loading: true,
-            token: false,
+            lease: false,
             list: {
                 total: 0,
                 items: []
@@ -103,7 +103,7 @@ export default {
     },
     methods: {
         fetch: async function() {
-            this.token = false;
+            this.lease = false;
             this.loading = true;
             this.list = await std('/api/video/lease');
             this.loading = false;
diff --git a/api/web/src/components/Profile/VideoLeaseModal.vue b/api/web/src/components/Profile/VideoLeaseModal.vue
new file mode 100644
index 000000000..5172491b1
--- /dev/null
+++ b/api/web/src/components/Profile/VideoLeaseModal.vue
@@ -0,0 +1,133 @@
+<template>
+    <TablerModal>
+        <div class='modal-status bg-yellow' />
+        <button
+            type='button'
+            class='btn-close'
+            aria-label='Close'
+            @click='$emit("close")'
+        />
+        <div class='modal-header'>
+            <div
+                class='modal-title'
+                v-text='lease.id ? "Edit Lease" : "New Lease"'
+            />
+
+            <div class='ms-auto btn-list'>
+                <TablerDelete
+                    v-if='editLease.id'
+                    displaytype='icon'
+                    @delete='deleteToken'
+                />
+            </div>
+        </div>
+
+        <div class='modal-body row'>
+            <div
+                class='col-12'
+            >
+                <TablerInput
+                    v-model='editLease.name'
+                    label='Lease Name'
+                />
+
+                <TablerEnum
+                    v-model='editLease.duration'
+                    :options='["16 Hours", "12 Hours", "6 Hours", "1 Hour"]'
+                    label='Lease Duration'
+                />
+            </div>
+        </div>
+        <div class='modal-footer'>
+            <button
+                v-if='!code'
+                class='btn btn-primary'
+                @click='saveToken'
+            >
+                Save
+            </button>
+            <button
+                v-else
+                class='btn btn-primary'
+                @click='$emit("refresh")'
+            >
+                Close
+            </button>
+        </div>
+    </TablerModal>
+</template>
+
+<script>
+import { std } from '/src/std.ts';
+import {
+    TablerModal,
+    TablerInput,
+    TablerEnum,
+    TablerDelete
+} from '@tak-ps/vue-tabler'
+
+export default {
+    name: 'VideoLeaseModal',
+    components: {
+        TablerModal,
+        TablerEnum,
+        TablerInput,
+        TablerDelete
+    },
+    props: {
+        lease: {
+            type: Object,
+            required: true
+        }
+    },
+    emits: [
+        'close',
+        'refresh'
+    ],
+    data: function() {
+        if (this.lease.id) {
+            return {
+                code: false,
+                editLease: JSON.parse(JSON.stringify(this.lease))
+            }
+        } else {
+            return {
+                code: false,
+                editLease: {
+                    name: '',
+                    duration: '16 Hours'
+                }
+            }
+
+        }
+    },
+    methods: {
+        deleteToken: async function() {
+            await std(`/api/video/lease/${this.lease.id}`, {
+                method: 'DELETE',
+            });
+
+            this.$emit('refresh');
+        },
+        saveToken: async function() {
+            if (this.lease.id) {
+                await std(`/api/video/lease/${this.lease.id}`, {
+                    method: 'PATCH',
+                    body: this.editLease
+                });
+                this.$emit('refresh');
+            } else {
+                const newlease = await std('/api/video/lease', {
+                    method: 'POST',
+                    body: {
+                        name: this.editLease.name,
+                        duration: parseInt(this.editLease.duration.split(' ')[0]) * 60 * 60
+                    }
+                });
+
+                this.$emit('refresh')
+            }
+        },
+    }
+}
+</script>
diff --git a/api/web/src/stores/map.ts b/api/web/src/stores/map.ts
index fe7e0e491..58cc75ab5 100644
--- a/api/web/src/stores/map.ts
+++ b/api/web/src/stores/map.ts
@@ -90,6 +90,13 @@ export const useMapStore = defineStore('cloudtak', {
         }
     },
     actions: {
+        destroy: function() {
+            if (this.map) {
+                this.map.remove();
+                delete this.map;
+            }
+            this.$reset();
+        },
         addLayer: async function(layer: {
             id: string;
             name: string;
@@ -340,7 +347,7 @@ export const useMapStore = defineStore('cloudtak', {
                 layer.visible = true;
             }
 
-            if (this.map.getSource(layer.id)) {
+            if (this.map && this.map.getSource(layer.id)) {
                 this.map.removeSource(layer.id);
             }