diff --git a/components/dms/dialogs/CreateNewDialog.vue b/components/dms/dialogs/CreateNewDialog.vue
index 5dc291c..a725efd 100644
--- a/components/dms/dialogs/CreateNewDialog.vue
+++ b/components/dms/dialogs/CreateNewDialog.vue
@@ -163,42 +163,130 @@ const navigateToPath = (path) => {
   loadFolderContents(path);
 };
 
+// Convert flat array to tree structure
+const convertToTreeStructure = (folders) => {
+  const folderMap = new Map();
+  const tree = [];
+
+  // First pass: create folder objects and store in map
+  folders.forEach(folder => {
+    folderMap.set(folder.cb_id, {
+      id: folder.cb_id,
+      name: folder.cb_name,
+      path: '', // We'll build this in the second pass
+      type: 'folder',
+      hasChildren: false,
+      children: [],
+      lastModified: folder.modified_at,
+      itemCount: 0,
+      icon: 'mdi:folder',
+      // Store original data for API operations
+      originalData: {
+        cb_parent_id: folder.cb_parent_id,
+        cb_sector: folder.cb_sector,
+        cb_owner: folder.cb_owner,
+        dp_id: folder.dp_id,
+        userID: folder.userID
+      }
+    });
+  });
+
+  // Second pass: build hierarchy and paths
+  folders.forEach(folder => {
+    const folderNode = folderMap.get(folder.cb_id);
+    
+    if (folder.cb_parent_id === null) {
+      // Root level folder
+      folderNode.path = `/${folder.cb_name}`;
+      tree.push(folderNode);
+    } else {
+      // Has a parent
+      const parentNode = folderMap.get(folder.cb_parent_id);
+      if (parentNode) {
+        parentNode.hasChildren = true;
+        parentNode.children.push(folderNode);
+        // Build path by traversing up the tree
+        let path = `/${folder.cb_name}`;
+        let currentParent = parentNode;
+        while (currentParent) {
+          path = `/${currentParent.name}${path}`;
+          currentParent = currentParent.originalData.cb_parent_id ? 
+                         folderMap.get(currentParent.originalData.cb_parent_id) : 
+                         null;
+        }
+        folderNode.path = path;
+        parentNode.itemCount += 1;
+      } else {
+        // If parent not found, add to root level
+        folderNode.path = `/${folder.cb_name}`;
+        tree.push(folderNode);
+      }
+    }
+  });
+
+  return tree;
+};
+
+// Load all folders from API
+const loadAllFolders = async () => {
+  try {
+    const response = await fetch('/api/dms/folder');
+    const data = await response.json();
+    
+    if (data.status === 200) {
+      // Convert flat array to tree structure
+      mockFolderStructure.value = convertToTreeStructure(data.folders);
+    } else {
+      throw new Error(data.message);
+    }
+  } catch (err) {
+    error('Failed to load folder structure: ' + err.message);
+  }
+};
+
+// Modified loadFolderContents to work with the tree structure
 const loadFolderContents = async (path) => {
   isLoading.value = true;
   
   try {
-    // Simulate API call
-    await new Promise(resolve => setTimeout(resolve, 300));
+    // Find the current folder in the tree structure
+    let currentContents = [];
+    const pathParts = path.split('/').filter(Boolean);
     
-    // Mock folder contents
-    const contents = [
-      {
-        id: 'c1',
-        name: 'Annual Report 2024.pdf',
-        type: 'file',
-        size: '2.4 MB',
-        lastModified: '2024-01-15T10:30:00Z',
-        icon: 'mdi:file-pdf'
-      },
-      {
-        id: 'c2',
-        name: 'Budget Analysis',
+    if (path === '/') {
+      // Root level - show top-level folders
+      currentContents = mockFolderStructure.value.map(folder => ({
+        id: folder.id,
+        name: folder.name,
         type: 'folder',
-        itemCount: 12,
-        lastModified: '2024-01-14T15:45:00Z',
-        icon: 'mdi:folder'
-      },
-      {
-        id: 'c3',
-        name: 'Meeting Minutes.docx',
-        type: 'file',
-        size: '156 KB',
-        lastModified: '2024-01-13T09:15:00Z',
-        icon: 'mdi:file-word'
+        itemCount: folder.itemCount,
+        lastModified: folder.lastModified,
+        icon: folder.icon
+      }));
+    } else {
+      // Navigate to the correct folder in the tree
+      let currentNode = null;
+      let currentLevel = mockFolderStructure.value;
+
+      for (const part of pathParts) {
+        currentNode = currentLevel.find(f => f.name === part);
+        if (!currentNode) break;
+        currentLevel = currentNode.children;
       }
-    ];
+
+      if (currentNode) {
+        currentContents = currentNode.children.map(child => ({
+          id: child.id,
+          name: child.name,
+          type: 'folder',
+          itemCount: child.itemCount,
+          lastModified: child.lastModified,
+          icon: child.icon
+        }));
+      }
+    }
     
-    folderContents.value = contents;
+    folderContents.value = currentContents;
   } catch (err) {
     error('Failed to load folder contents');
   } finally {
@@ -223,22 +311,43 @@ const selectFolder = (folder) => {
 // Creation process
 const performCreation = async () => {
   try {
-    const newItem = {
-      name: itemName.value.trim(),
-      type: creationType.value,
-      path: selectedPath.value,
-      permissions: accessPermissions.value,
-      template: creationType.value === 'document' ? selectedTemplate.value : null
+    // Only proceed if creating a folder/subfolder
+    if (creationType.value !== 'folder' && creationType.value !== 'subfolder') {
+      return;
+    }
+
+    const folderData = {
+      cabinet_name: itemName.value.trim(),
+      cabinet_parent_id: selectedPath.value === '/' ? null : 
+                        currentFolder.value?.id || null,
+      cabinet_owner: null,
+      cabinet_sector: "ayam", // Using the same sector as example
+      dp_id: null,
+      userID: null
     };
-    
-    // Here you would implement actual creation logic
-    console.log('Creating:', newItem);
-    
-    success(`Successfully created ${creationType.value}: ${newItem.name}`);
-    emit('create-complete', newItem);
-    closeModal();
+
+    // Make API call to create folder
+    const response = await fetch('/api/dms/folder', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(folderData)
+    });
+
+    const result = await response.json();
+
+    if (result.status === 201) {
+      // Reload the entire folder structure to get the updated data
+      await loadAllFolders();
+      success(`Successfully created folder: ${folderData.cabinet_name}`);
+      emit('create-complete', result.folder);
+      closeModal();
+    } else {
+      throw new Error(result.message);
+    }
   } catch (err) {
-    error('Failed to create item: ' + err.message);
+    error('Failed to create folder: ' + err.message);
   }
 };
 
@@ -277,7 +386,8 @@ watch(() => props.visible, (visible) => {
   }
 });
 
-onMounted(() => {
+onMounted(async () => {
+  await loadAllFolders();
   if (props.visible) {
     navigateToPath(props.initialPath);
   }