diff --git a/ui/dev-dist/sw.js b/ui/dev-dist/sw.js
index 30800934..3f45c2fa 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.hld5cocdcl"
+    "revision": "0.uun45k3p9s"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 84192a3d..267bc5d0 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -3742,11 +3742,10 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -4370,9 +4369,9 @@
       "dev": true
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -6171,9 +6170,9 @@
       }
     },
     "node_modules/eslint-plugin-n/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0"
@@ -6642,9 +6641,9 @@
       }
     },
     "node_modules/filelist/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0"
@@ -10421,10 +10420,9 @@
       }
     },
     "node_modules/readdir-glob/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "license": "MIT",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -11991,10 +11989,9 @@
       }
     },
     "node_modules/sucrase/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "license": "MIT",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -12825,11 +12822,10 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.4.15",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.15.tgz",
-      "integrity": "sha512-6ANcZRivqL/4WtwPGTKNaosuNJr5tWiftOC7liM7G9+rMb8+oeJeyzymDu4rTN93seySBmbjSfsS3Vzr19KNtA==",
+      "version": "5.4.19",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.19.tgz",
+      "integrity": "sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
diff --git a/ui/src/views/menu/MenuItemComponent.tsx b/ui/src/views/menu/MenuItemComponent.tsx
index 932b1817..514c9af3 100644
--- a/ui/src/views/menu/MenuItemComponent.tsx
+++ b/ui/src/views/menu/MenuItemComponent.tsx
@@ -1,9 +1,29 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { useSortable } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
 import * as Icons from 'lucide-react'
 import { MenuItem } from '@/@types/menu'
 import { useLocalization } from '@/utils/hooks/useLocalization'
+import { MenuService } from '@/services/menu.service'
+import { MenuDto } from '@/proxy/menus'
+import navigationIcon from '@/configs/navigation-icon.config'
+import { FaQuestionCircle } from 'react-icons/fa'
+import {
+  Button,
+  Dialog,
+  FormContainer,
+  FormItem,
+  Input,
+  Switcher,
+  Notification,
+  toast,
+  Select,
+} from '@/components/ui'
+import { Field, FieldProps, Form, Formik } from 'formik'
+import { SelectBoxOption } from '@/shared/types'
+import { getPermissionsList } from '@/proxy/admin/identity.service'
+import { PermissionDefinitionRecord } from '@/proxy/admin'
+import * as Yup from 'yup'
 
 interface MenuItemComponentProps {
   item: MenuItem
@@ -11,6 +31,7 @@ interface MenuItemComponentProps {
   depth: number
   children?: React.ReactNode
   isDragOverlay?: boolean
+  refetch: () => void
 }
 
 export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
@@ -19,7 +40,9 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
   depth,
   children,
   isDragOverlay = false,
+  refetch,
 }) => {
+  const [permissions, setPermissions] = useState<SelectBoxOption[]>([])
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: item.id || '',
     data: {
@@ -29,8 +52,20 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
     disabled: !isDesignMode,
   })
 
-  const { translate } = useLocalization()
+  const validationSchema = Yup.object().shape({
+    code: Yup.string().required('Code is required'),
+    displayName: Yup.string().required('Display Name is required'),
+    order: Yup.number().typeError('Order must be a number').required('Order is required'),
+    url: Yup.string().nullable(),
+    icon: Yup.string().nullable(),
+    cssClass: Yup.string().nullable(),
+    requiredPermissionName: Yup.string().nullable(),
+    target: Yup.string().nullable(),
+    elementId: Yup.string().nullable(),
+    isDisabled: Yup.boolean(),
+  })
 
+  const { translate } = useLocalization()
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
@@ -42,14 +77,59 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
     return IconComponent ? <IconComponent size={16} /> : <Icons.FileText size={16} />
   }
 
-  const [isExpanded, setIsExpanded] = React.useState(true)
+  const [isExpanded, setIsExpanded] = useState(true)
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [formData, setFormData] = useState<Partial<MenuDto>>({
+    code: '',
+    displayName: '',
+    order: (item.children?.length || 0) + 1,
+    parentCode: item.code,
+    url: '',
+    icon: '',
+    cssClass: '',
+    requiredPermissionName: '',
+    target: '',
+    isDisabled: false,
+    elementId: '',
+  })
 
   const toggleExpanded = () => {
-    if (!isDesignMode) {
-      setIsExpanded(!isExpanded)
+    if (!isDesignMode) setIsExpanded(!isExpanded)
+  }
+
+  const handleCreate = async () => {
+    const menuService = new MenuService()
+    await menuService.create(formData as MenuDto)
+    setIsModalOpen(false)
+    refetch()
+  }
+
+  const handleDelete = async () => {
+    const confirmed = window.confirm(`Delete "${item.displayName}"?`)
+    if (!confirmed) return
+    const menuService = new MenuService()
+    await menuService.delete(item.id!)
+    refetch()
+  }
+
+  const getPermissionList = async () => {
+    const response = await getPermissionsList()
+    if (response.data) {
+      setPermissions(
+        response.data.map((permission: PermissionDefinitionRecord) => ({
+          value: permission.name,
+          label: permission.name,
+        })),
+      )
     }
   }
 
+  useEffect(() => {
+    if (permissions) {
+      getPermissionList()
+    }
+  }, [permissions])
+
   return (
     <div className="select-none">
       <div
@@ -64,13 +144,26 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
         `}
         {...(isDesignMode ? { ...attributes, ...listeners } : { onClick: toggleExpanded })}
       >
+        {isDesignMode && (
+          <div className="flex gap-2 items-center mr-2">
+            <button onClick={() => setIsModalOpen(true)} title="New Item">
+              <Icons.Plus size={16} className="text-green-600 hover:text-green-800" />
+            </button>
+            <button onClick={handleDelete} title="Delete Item">
+              <Icons.Trash2 size={16} className="text-red-600 hover:text-red-800" />
+            </button>
+          </div>
+        )}
+
         <div className="flex items-center gap-3 flex-1 min-w-0">
-          <div className="flex-shrink-0 text-gray-600">{item.icon && getIcon(item.icon)}</div>
+          <div className="flex-shrink-0 text-gray-600 text-xl">
+            {navigationIcon[item.icon || ''] ?? <FaQuestionCircle className="text-gray-400" />}
+          </div>
 
           <span
             className={`
               truncate text-gray-800 leading-6 text-sm
-              ${isDesignMode ? 'font-normal' : item.children && item.children.length > 0 ? 'font-semibold' : 'font-normal'}
+              ${item.children && item.children.length > 0 ? 'font-semibold' : 'font-normal'}
             `}
           >
             {translate('::' + item.displayName)}
@@ -95,6 +188,147 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
       </div>
 
       {children && (!isDesignMode ? isExpanded : true) && <div className="mt-1">{children}</div>}
+
+      {isModalOpen && (
+        <Dialog
+          isOpen={isModalOpen}
+          onClose={() => setIsModalOpen(false)}
+          onRequestClose={() => setIsModalOpen(false)}
+          width={600}
+        >
+          <h5 className="mb-4">{translate('::New Item')}</h5>
+          <Formik
+            validationSchema={validationSchema}
+            initialValues={formData}
+            enableReinitialize
+            onSubmit={async (values, { setSubmitting }) => {
+              try {
+                const menuService = new MenuService()
+                await menuService.create(values as MenuDto)
+                toast.push(
+                  <Notification title="Başarılı" type="success">
+                    {translate('::KayitEklendi')}
+                  </Notification>,
+                  { placement: 'top-center' },
+                )
+                setIsModalOpen(false)
+                refetch()
+              } catch (error) {
+                toast.push(
+                  <Notification title="Hata" type="danger">
+                    {translate('::IslemBasarisiz')}
+                  </Notification>,
+                  { placement: 'top-center' },
+                )
+              } finally {
+                setSubmitting(false)
+              }
+            }}
+          >
+            {({ values, errors, touched, isSubmitting, handleChange }) => (
+              <Form>
+                <FormContainer>
+                  <FormItem label="Code *"  className="mb-2">
+                    <Field type="text" au name="code" component={Input} className="h-8 text-sm px-2" autoFocus />
+                  </FormItem>
+
+                  <FormItem label="Display Name *" className="mb-2">
+                    <Field
+                      type="text"
+                      name="displayName"
+                      component={Input}
+                      className="h-8 text-sm px-2"
+                    />
+                  </FormItem>
+
+                  <FormItem label="Order *" className="mb-2">
+                    <Field
+                      type="number"
+                      name="order"
+                      component={Input}
+                      className="h-8 text-sm px-2"
+                    />
+                  </FormItem>
+
+                  <FormItem label="URL" className="mb-2">
+                    <Field type="text" name="url" component={Input} className="h-8 text-sm px-2" />
+                  </FormItem>
+
+                  <FormItem label="Icon" className="mb-2">
+                    <Field type="text" name="icon" component={Input} className="h-8 text-sm px-2" />
+                  </FormItem>
+
+                  <FormItem label="Parent Code" className="mb-2">
+                    <Input disabled value={item.code} className="h-8 text-sm px-2 bg-gray-100" />
+                  </FormItem>
+
+                  <FormItem label="CSS Class" className="mb-2">
+                    <Field
+                      type="text"
+                      name="cssClass"
+                      component={Input}
+                      className="h-8 text-sm px-2"
+                    />
+                  </FormItem>
+
+                  <FormItem label="Permission Name" className="mb-2">
+                    <Field
+                      type="text"
+                      autoComplete="off"
+                      name="requiredPermissionName"
+                      className="h-8 text-sm px-2"
+                    >
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          isClearable={true}
+                          options={permissions}
+                          value={permissions?.filter(
+                            (option) => option.value === values.requiredPermissionName,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem label="Target" className="mb-2">
+                    <Field
+                      type="text"
+                      name="target"
+                      component={Input}
+                      className="h-8 text-sm px-2"
+                    />
+                  </FormItem>
+
+                  <FormItem label="Element Id" className="mb-2">
+                    <Field
+                      type="text"
+                      name="elementId"
+                      component={Input}
+                      className="h-8 text-sm px-2"
+                    />
+                  </FormItem>
+
+                  <FormItem label="Is Disabled" className="mb-2">
+                    <Field name="isDisabled" component={Switcher} />
+                  </FormItem>
+
+                  <div className="flex justify-end gap-2 mt-4">
+                    <Button variant="plain" size="sm" onClick={() => setIsModalOpen(false)}>
+                      {translate('::Cancel')}
+                    </Button>
+                    <Button type="submit" variant="solid" size="sm" loading={isSubmitting}>
+                      {translate('::Create')}
+                    </Button>
+                  </div>
+                </FormContainer>
+              </Form>
+            )}
+          </Formik>
+        </Dialog>
+      )}
     </div>
   )
 }
diff --git a/ui/src/views/menu/MenuManager.tsx b/ui/src/views/menu/MenuManager.tsx
index 30fbeedb..21500cdc 100644
--- a/ui/src/views/menu/MenuManager.tsx
+++ b/ui/src/views/menu/MenuManager.tsx
@@ -6,7 +6,7 @@ import { useMenuData } from '@/utils/hooks/useMenuData'
 
 export const MenuManager = () => {
   const { menuItems, setMenuItems, loading, error, refetch, saveMenuData } = useMenuData()
-  const [isDesignMode, setIsDesignMode] = useState(false)
+  const [isDesignMode, setIsDesignMode] = useState(true)
   const [isSaving, setIsSaving] = useState(false)
   const [saveMessage, setSaveMessage] = useState<{
     type: 'success' | 'error'
@@ -27,6 +27,7 @@ export const MenuManager = () => {
       await saveMenuData(menuItems)
       setSaveMessage({ type: 'success', text: 'Menu configuration saved successfully!' })
       setTimeout(() => setSaveMessage(null), 3000)
+      setIsDesignMode(false)
     } catch (err) {
       setSaveMessage({
         type: 'error',
@@ -75,82 +76,81 @@ export const MenuManager = () => {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="w-full h-full p-6">
-        {/* Menu Tree */}
-        <div className="bg-white rounded-lg shadow-md p-6">
-          <div className="flex items-center justify-between mb-6 flex-wrap gap-4">
-            {/* Sol kısım: Başlık */}
-            <div className="flex items-center gap-2">
-              <Icons.Menu size={20} className="text-gray-600" />
-              <h2 className="text-lg font-semibold text-gray-900">Menu Manager</h2>
-              <span className="text-sm text-gray-500">({menuItems.length} root items)</span>
-            </div>
+    <div className="w-full h-full">
+      {/* Menu Tree */}
+      <div className="bg-white rounded-lg shadow-md p-6">
+        <div className="flex items-center justify-between mb-6 flex-wrap gap-4">
+          {/* Sol kısım: Başlık */}
+          <div className="flex items-center gap-2">
+            <Icons.Menu size={20} className="text-gray-600" />
+            <h2 className="text-lg font-semibold text-gray-900">Menu Manager</h2>
+            <span className="text-sm text-gray-500">({menuItems.length} root items)</span>
+          </div>
 
-            {/* Sağ kısım: Design Mode + Save butonu */}
-            <div className="flex items-center gap-4">
-              <div className="flex items-center gap-3">
-                <span
-                  className={`text-sm font-medium ${isDesignMode ? 'text-blue-600' : 'text-gray-500'}`}
-                >
-                  Design Mode
-                </span>
-                <button
-                  onClick={handleToggleDesignMode}
-                  className={`
+          {/* Sağ kısım: Design Mode + Save butonu */}
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-3">
+              <span
+                className={`text-sm font-medium ${isDesignMode ? 'text-blue-600' : 'text-gray-500'}`}
+              >
+                Design Mode
+              </span>
+              <button
+                onClick={handleToggleDesignMode}
+                className={`
           relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
           ${isDesignMode ? 'bg-blue-600' : 'bg-gray-200'}
         `}
-                >
-                  <span
-                    className={`
+              >
+                <span
+                  className={`
             inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ease-in-out
             ${isDesignMode ? 'translate-x-6' : 'translate-x-1'}
           `}
-                  />
-                </button>
-              </div>
+                />
+              </button>
+            </div>
 
-              {
-                <button
-                  onClick={handleSave}
-                  disabled={!isDesignMode || isSaving}
-                  className={`
+            {
+              <button
+                onClick={handleSave}
+                disabled={!isDesignMode || isSaving}
+                className={`
                               flex items-center gap-2 px-4 py-2 rounded-lg transition-colors
                               ${isDesignMode ? 'bg-green-600 hover:bg-green-700 text-white' : 'bg-gray-300 text-gray-500 cursor-not-allowed'}
                               ${isSaving ? 'opacity-50' : ''}
                             `}
-                >
-                  {isSaving ? (
-                    <>
-                      <Icons.Loader2 size={16} className="animate-spin" />
-                      Saving...
-                    </>
-                  ) : (
-                    <>
-                      <Icons.Save size={16} />
-                      Save Changes
-                    </>
-                  )}
-                </button>
-              }
-            </div>
+              >
+                {isSaving ? (
+                  <>
+                    <Icons.Loader2 size={16} className="animate-spin" />
+                    Saving...
+                  </>
+                ) : (
+                  <>
+                    <Icons.Save size={16} />
+                    Save Changes
+                  </>
+                )}
+              </button>
+            }
           </div>
-
-          {menuItems.length > 0 ? (
-            <SortableMenuTree
-              items={menuItems}
-              onItemsChange={handleMenuChange}
-              isDesignMode={isDesignMode}
-            />
-          ) : (
-            <div className="text-center py-12 text-gray-500">
-              <Icons.Menu size={24} className="mx-auto mb-4 text-gray-300" />
-              <p className="text-lg">No menu items found</p>
-              <p className="text-sm">Try refreshing the page or contact your administrator</p>
-            </div>
-          )}
         </div>
+
+        {menuItems.length > 0 ? (
+          <SortableMenuTree
+            items={menuItems}
+            onItemsChange={handleMenuChange}
+            isDesignMode={isDesignMode}
+            refetch={refetch}
+          />
+        ) : (
+          <div className="text-center py-12 text-gray-500">
+            <Icons.Menu size={24} className="mx-auto mb-4 text-gray-300" />
+            <p className="text-lg">No menu items found</p>
+            <p className="text-sm">Try refreshing the page or contact your administrator</p>
+          </div>
+        )}
       </div>
     </div>
   )
diff --git a/ui/src/views/menu/SortableMenuTree.tsx b/ui/src/views/menu/SortableMenuTree.tsx
index cf1dc246..58f401e9 100644
--- a/ui/src/views/menu/SortableMenuTree.tsx
+++ b/ui/src/views/menu/SortableMenuTree.tsx
@@ -22,12 +22,14 @@ interface SortableMenuTreeProps {
   items: MenuItem[]
   onItemsChange: (items: MenuItem[]) => void
   isDesignMode: boolean
+  refetch: () => void
 }
 
 export const SortableMenuTree: React.FC<SortableMenuTreeProps> = ({
   items,
   onItemsChange,
   isDesignMode,
+  refetch,
 }) => {
   const [activeItem, setActiveItem] = React.useState<MenuItem | null>(null)
 
@@ -42,31 +44,25 @@ export const SortableMenuTree: React.FC<SortableMenuTreeProps> = ({
     }),
   )
 
-  // Flatten the tree structure to get all items with their paths
   const flattenItems = (
     items: MenuItem[],
-    parentPath: string[] = [],
+    parentPath: number[] = [],
   ): Array<{ item: MenuItem; path: number[] }> => {
-    const result: Array<{ item: MenuItem; path: number[] }> = []
+    return items.flatMap((item, index) => {
+      const path = [...parentPath, index]
+      const self = { item, path }
 
-    items.forEach((item, index) => {
-      const currentPath = [...parentPath, index]
-      result.push({ item, path: currentPath })
-
-      if (item.children && item.children.length > 0) {
-        result.push(...flattenItems(item.children, currentPath))
+      if (item.children?.length) {
+        return [self, ...flattenItems(item.children, path)]
       }
-    })
 
-    return result
+      return [self]
+    })
   }
 
-  // Find item by ID in the tree
   const findItemById = (items: MenuItem[], id: string): MenuItem | null => {
     for (const item of items) {
-      if (item.id === id) {
-        return item
-      }
+      if (item.id === id) return item
       if (item.children) {
         const found = findItemById(item.children, id)
         if (found) return found
@@ -75,12 +71,9 @@ export const SortableMenuTree: React.FC<SortableMenuTreeProps> = ({
     return null
   }
 
-  // Remove item from tree by ID
   const removeItemFromTree = (items: MenuItem[], id: string): MenuItem[] => {
     return items.reduce((acc: MenuItem[], item) => {
-      if (item.id === id) {
-        return acc // Skip this item (remove it)
-      }
+      if (item.id === id) return acc
 
       const newItem = { ...item }
       if (newItem.children && newItem.children.length > 0) {
@@ -92,7 +85,6 @@ export const SortableMenuTree: React.FC<SortableMenuTreeProps> = ({
     }, [])
   }
 
-  // Insert item at specific position
   const insertItemAtPath = (
     items: MenuItem[],
     item: MenuItem,
@@ -117,25 +109,28 @@ export const SortableMenuTree: React.FC<SortableMenuTreeProps> = ({
     return newItems
   }
 
-  // Get the path where an item should be inserted based on over item
   const getInsertionPath = (
     items: MenuItem[],
     activeId: string,
     overId: string,
   ): number[] | null => {
-    const flatItems = flattenItems(items)
-    const activeIndex = flatItems.findIndex(({ item }) => item.id === activeId)
-    const overIndex = flatItems.findIndex(({ item }) => item.id === overId)
+    const flat = flattenItems(items)
+    const activeFlat = flat.find((f) => f.item.id === activeId)
+    const overFlat = flat.find((f) => f.item.id === overId)
 
-    if (overIndex === -1) return null
+    if (!activeFlat || !overFlat) return null
 
-    const overItem = flatItems[overIndex]
-    const insertPath = [...overItem.path]
+    const isSameParent = activeFlat.path.slice(0, -1).join() === overFlat.path.slice(0, -1).join()
 
-    // Aktif item, listedeki over item'den sonra geliyorsa, yukarı taşınıyordur → over item'ın yerine ekle
-    // Aktif item, listedeki over item'den önceyse, aşağı taşınıyordur → bir SONRASINA ekle ki yeniden aynı yere düşmesin
-    if (activeIndex < overIndex) {
-      insertPath[insertPath.length - 1] += 1
+    const insertPath = [...overFlat.path]
+
+    if (isSameParent) {
+      const activeIndex = activeFlat.path[activeFlat.path.length - 2]
+      const overIndex = overFlat.path[overFlat.path.length - 1]
+
+      if (activeIndex < overIndex) {
+        insertPath[insertPath.length - 1] += 1
+      }
     }
 
     return insertPath
@@ -159,50 +154,43 @@ export const SortableMenuTree: React.FC<SortableMenuTreeProps> = ({
     const { active, over } = event
     setActiveItem(null)
 
-    if (!over || active.id === over.id || !isDesignMode) {
-      return
-    }
+    if (!over || active.id === over.id || !isDesignMode) return
 
     const activeId = active.id as string
     const overId = over.id as string
-
     const activeItem = findItemById(items, activeId)
     if (!activeItem) return
 
-    // ⛳️ Kullanılması gereken liste: `items`
     const insertionPath = getInsertionPath(items, activeId, overId)
     if (!insertionPath) return
 
-    // Şimdi aktif elemanı çıkar
     let newItems = removeItemFromTree(items, activeId)
-
-    // ve hedef konuma ekle
     newItems = insertItemAtPath(newItems, activeItem, insertionPath)
-
-    // Sıra numaralarını güncelle
     const finalItems = updateOrderNumbers(newItems)
     onItemsChange(finalItems)
   }
 
   const renderMenuItem = (item: MenuItem, depth: number = 0): React.ReactNode => {
     return (
-      <MenuItemComponent
-        key={item.id || `temp-${Math.random().toString(36).substr(2, 9)}`}
-        item={item}
-        isDesignMode={isDesignMode}
-        depth={depth}
-      >
-        {item.children && item.children.length > 0 && (
-          <div className="ml-4">
-            {item.children.map((child) => renderMenuItem(child, depth + 1))}
-          </div>
-        )}
-      </MenuItemComponent>
+      <div key={item.id}>
+        <MenuItemComponent item={item} isDesignMode={isDesignMode} depth={depth} refetch={refetch}>
+          {Array.isArray(item.children) && item.children.length > 0 && (
+            <SortableContext
+              items={item.children
+                .filter((child): child is MenuItem & { id: string } => !!child.id)
+                .map((child) => child.id)}
+              strategy={verticalListSortingStrategy}
+            >
+              <div className="ml-4">
+                {item.children.map((child) => renderMenuItem(child, depth + 1))}
+              </div>
+            </SortableContext>
+          )}
+        </MenuItemComponent>
+      </div>
     )
   }
 
-  const allItems = flattenItems(items)
-
   return (
     <DndContext
       sensors={sensors}
@@ -210,12 +198,7 @@ export const SortableMenuTree: React.FC<SortableMenuTreeProps> = ({
       onDragStart={handleDragStart}
       onDragEnd={handleDragEnd}
     >
-      <SortableContext
-        items={allItems.map(({ item }) => item.id)}
-        strategy={verticalListSortingStrategy}
-      >
-        <div className="space-y-1">{items.map((item) => renderMenuItem(item))}</div>
-      </SortableContext>
+      <div className="space-y-1">{items.map((item) => renderMenuItem(item))}</div>
 
       <DragOverlay>
         {activeItem ? (
@@ -224,6 +207,7 @@ export const SortableMenuTree: React.FC<SortableMenuTreeProps> = ({
             isDesignMode={isDesignMode}
             depth={0}
             isDragOverlay={true}
+            refetch={refetch}
           />
         ) : null}
       </DragOverlay>