diff --git a/web/satellite/vuetify-poc/src/components/dialogs/BrowserNewFolderDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/BrowserNewFolderDialog.vue
index 74f49ec9f..445c99a73 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/BrowserNewFolderDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/BrowserNewFolderDialog.vue
@@ -9,7 +9,7 @@
         min-width="400px"
         transition="fade-transition"
     >
-        <v-card rounded="xlg">
+        <v-card ref="innerContent" rounded="xlg">
             <v-sheet>
                 <v-card-item class="pl-7 py-4">
                     <template #prepend>
@@ -32,7 +32,7 @@
 
             <v-divider />
 
-            <v-form class="pa-8 pb-3">
+            <v-form v-model="formValid" class="pa-8 pb-3">
                 <v-row>
                     <v-col
                         cols="12"
@@ -42,6 +42,7 @@
                             variant="outlined"
                             :rules="folderRules"
                             label="Enter Folder Name"
+                            :hide-details="false"
                             required
                             autofocus
                         />
@@ -57,7 +58,7 @@
                         <v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
                     </v-col>
                     <v-col>
-                        <v-btn color="primary" variant="flat" block>Create Folder</v-btn>
+                        <v-btn color="primary" variant="flat" :disabled="!formValid" block @click="createFolder">Create Folder</v-btn>
                     </v-col>
                 </v-row>
             </v-card-actions>
@@ -66,7 +67,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { Component, computed, ref, watch } from 'vue';
 import {
     VDialog,
     VCard,
@@ -82,8 +83,53 @@ import {
     VCardActions,
 } from 'vuetify/components';
 
-const dialog = ref<boolean>(false);
-const folder = ref<string>('');
+import { BrowserObject, useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
+import { useAppStore } from '@/store/modules/appStore';
+import { useNotify } from '@/utils/hooks';
+import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { useLoading } from '@/composables/useLoading';
 
-const folderRules = [(value: string) => (!!value || 'Folder name is required.')];
+const obStore = useObjectBrowserStore();
+const appStore = useAppStore();
+const notify = useNotify();
+
+const { isLoading, withLoading } = useLoading();
+
+const dialog = ref<boolean>(false);
+const formValid = ref<boolean>(false);
+const folder = ref<string>('');
+const innerContent = ref<Component | null>(null);
+
+const folderRules = [
+    (value: string) => (!!value || 'Folder name is required.'),
+    (value: string) => (value.trim().length > 0 || 'Name must not be only space.'),
+    (value: string) => (value.indexOf('/') === -1 || 'Name must not contain "/".'),
+    (value: string) => ([...value.trim()].filter(c => c === '.').length !== value.trim().length || 'Name must not be only periods.'),
+    (value: string) => (files.value.filter(f => f.Key === value.trim()).length === 0 || 'This folder already exists.'),
+];
+
+/**
+ * Retrieve all the files sorted from the store.
+ */
+const files = computed((): BrowserObject[] => {
+    return obStore.sortedFiles;
+});
+
+function createFolder(): void {
+    withLoading(async () => {
+        try {
+            await obStore.createFolder(folder.value.trim());
+        } catch (error) {
+            notify.error(error.message, AnalyticsErrorEventSource.CREATE_FOLDER_MODAL);
+        }
+        dialog.value = false;
+    });
+}
+
+watch(innerContent, comp => {
+    if (!comp) {
+        folder.value = '';
+        return;
+    }
+});
 </script>