diff --git a/ui/dev-dist/sw.js b/ui/dev-dist/sw.js
index f962f04f..6f4eba4f 100644
--- a/ui/dev-dist/sw.js
+++ b/ui/dev-dist/sw.js
@@ -82,7 +82,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.u7hl29mc92g"
+    "revision": "0.172lu27b4eg"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
diff --git a/ui/src/contexts/ComponentRegistryContext.tsx b/ui/src/contexts/ComponentRegistryContext.tsx
index 99c39912..1a266b91 100644
--- a/ui/src/contexts/ComponentRegistryContext.tsx
+++ b/ui/src/contexts/ComponentRegistryContext.tsx
@@ -41,6 +41,7 @@ import {
   Tooltip,
   Upload,
 } from '../components/ui'
+import axios from 'axios'
 
 interface ComponentProps {
   [key: string]: unknown
@@ -157,7 +158,7 @@ const ComponentRegistryProvider: React.FC<{ children: React.ReactNode }> = ({ ch
 
       // Create a function that returns an object with all components
       const bundledCode = `
-        (function(React, Alert, Avatar, Badge, Button, Calendar, Card, Checkbox, ConfigProvider, DatePicker, Dialog, Drawer, Dropdown, FormItem, FormContainer, Input, InputGroup, Menu, MenuItem, Notification, Pagination, Progress, Radio, RangeCalendar, ScrollBar, Segment, Select, Skeleton, Spinner, Steps, Switcher, Table, Tabs, Tag, TimeInput, Timeline, toast, Tooltip, Upload) {
+        (function(React, Alert, Avatar, Badge, Button, Calendar, Card, Checkbox, ConfigProvider, DatePicker, Dialog, Drawer, Dropdown, FormItem, FormContainer, Input, InputGroup, Menu, MenuItem, Notification, Pagination, Progress, Radio, RangeCalendar, ScrollBar, Segment, Select, Skeleton, Spinner, Steps, Switcher, Table, Tabs, Tag, TimeInput, Timeline, toast, Tooltip, Upload, axios) {
           // Global components and hooks available to all custom components
           const { useState, useEffect, useCallback, useMemo, useRef, createContext, useContext } = React;
           
@@ -202,7 +203,7 @@ const ComponentRegistryProvider: React.FC<{ children: React.ReactNode }> = ({ ch
             .join('\n')}
           
           return componentRegistry;
-        })(React, Alert, Avatar, Badge, Button, Calendar, Card, Checkbox, ConfigProvider, DatePicker, Dialog, Drawer, Dropdown, FormItem, FormContainer, Input, InputGroup, Menu, MenuItem, Notification, Pagination, Progress, Radio, RangeCalendar, ScrollBar, Segment, Select, Skeleton, Spinner, Steps, Switcher, Table, Tabs, Tag, TimeInput, Timeline, toast, Tooltip, Upload)
+        })(React, Alert, Avatar, Badge, Button, Calendar, Card, Checkbox, ConfigProvider, DatePicker, Dialog, Drawer, Dropdown, FormItem, FormContainer, Input, InputGroup, Menu, MenuItem, Notification, Pagination, Progress, Radio, RangeCalendar, ScrollBar, Segment, Select, Skeleton, Spinner, Steps, Switcher, Table, Tabs, Tag, TimeInput, Timeline, toast, Tooltip, Upload, axios)
       `
 
       // Compile the bundle
@@ -256,6 +257,7 @@ const ComponentRegistryProvider: React.FC<{ children: React.ReactNode }> = ({ ch
         'toast',
         'Tooltip',
         'Upload',
+        'axios',
         `return ${compiledBundle}`,
       )
       const compiledComponentsRegistry = componentsFactory(
@@ -298,6 +300,7 @@ const ComponentRegistryProvider: React.FC<{ children: React.ReactNode }> = ({ ch
         toast,
         Tooltip,
         Upload,
+        axios,
       )
 
       setCompiledComponents(compiledComponentsRegistry)
@@ -335,7 +338,7 @@ const ComponentRegistryProvider: React.FC<{ children: React.ReactNode }> = ({ ch
 
         // Transform code to a component factory that wraps the component to provide dynamic component access
         const transformedCode = `
-        (function createComponent(React, componentsRegistry) {
+        (function createComponent(React, componentsRegistry, axios) {
           // Define a component wrapper function that will handle component references
           function DynamicComponentRenderer(name, props) {
             // Check if the name exists in the registry
@@ -463,7 +466,7 @@ const ComponentRegistryProvider: React.FC<{ children: React.ReactNode }> = ({ ch
             React.createElement = originalCreateElement;
             throw error;
           }
-        })(React, compiledComponentsObj)
+        })(React, compiledComponentsObj, axios)
       `
 
         // Compile the code
@@ -480,6 +483,7 @@ const ComponentRegistryProvider: React.FC<{ children: React.ReactNode }> = ({ ch
         const ComponentFactory = new Function(
           'React',
           'compiledComponentsObj',
+          'axios', 
           `
         try {
           // Create a local variable to ensure it exists
@@ -521,7 +525,7 @@ const ComponentRegistryProvider: React.FC<{ children: React.ReactNode }> = ({ ch
         )
 
         // Create the component with our registry of all other components
-        const Component = ComponentFactory(React, compiledComponents)
+        const Component = ComponentFactory(React, compiledComponents, axios)
 
         if (!Component || typeof Component !== 'function') {
           throw new Error('Invalid component definition')
diff --git a/ui/src/utils/navigation.ts b/ui/src/utils/navigation.ts
index 4a5ce8dd..cd472c49 100644
--- a/ui/src/utils/navigation.ts
+++ b/ui/src/utils/navigation.ts
@@ -4,13 +4,13 @@ import {
   NAV_ITEM_TYPE_ITEM,
   NAV_ITEM_TYPE_TITLE,
 } from '@/constants/navigation.constant'
-import { MenuDto } from '@/proxy/menus'
+import { MenuDto } from '@/proxy/menus/models'
 
 export default function getChildren(menu: MenuDto[], parentCode: string | null): NavigationTree[] {
   const menus: NavigationTree[] = []
   for (const child of menu.filter((a) => a.parentCode === parentCode)) {
     const item: NavigationTree = {
-      key: child.url ?? child.code ?? '',
+      key: child.url?.length ? child.url : child.code ?? '',
       path: child.url ?? '',
       title: child.displayName ?? '',
       icon: child.icon ?? '',
@@ -19,6 +19,7 @@ export default function getChildren(menu: MenuDto[], parentCode: string | null):
       authority: [child.requiredPermissionName ?? ''],
       subMenu: [],
     }
+
     if (child.code) {
       const subMenu = getChildren(menu, child.code)
       if (subMenu.length) {
diff --git a/ui/src/views/admin/organization-unit/OrganizationUnits.tsx b/ui/src/views/admin/organization-unit/OrganizationUnits.tsx
index 918ae65c..d85a1bb1 100644
--- a/ui/src/views/admin/organization-unit/OrganizationUnits.tsx
+++ b/ui/src/views/admin/organization-unit/OrganizationUnits.tsx
@@ -56,11 +56,12 @@ import { FaFolder, FaMinusCircle, FaPlusCircle, FaTrash } from 'react-icons/fa'
 import { HiBadgeCheck, HiUser } from 'react-icons/hi'
 import {
   MdAccountTree,
+  MdAddModerator,
+  MdAdUnits,
   MdDelete,
   MdEdit,
   MdGroup,
   MdPersonAdd,
-  MdRadioButtonUnchecked,
   MdSupervisedUserCircle,
 } from 'react-icons/md'
 import { object, string } from 'yup'
@@ -459,7 +460,7 @@ const OrganizationUnits = () => {
         <Container>
           <div className="flex flex-col lg:flex-row gap-4">
             <Card
-              className="md:w-2/12 min-w-fit"
+              className="md:w-3/12 min-w-fit"
               header={translate('::Abp.Identity.OrganizationUnits')}
               headerExtra={
                 <div className="flex gap-1">
@@ -475,7 +476,7 @@ const OrganizationUnits = () => {
                       })
                     }}
                   >
-                    {activeOu ? <MdAccountTree /> : <MdRadioButtonUnchecked />}
+                    {activeOu ? <MdAccountTree /> : <MdAdUnits />}
                   </Button>
 
                   <Button
@@ -524,7 +525,7 @@ const OrganizationUnits = () => {
                 {Node}
               </Tree>
             </Card>
-            <Card className="md:w-10/12 w-full">
+            <Card className="md:w-9/12 w-full">
               <Tabs defaultValue="users">
                 <TabList>
                   <TabNav value="users" icon={<HiUser />}>