diff --git a/app/Http/Livewire/Admin/Menu.php b/app/Http/Livewire/Admin/Menu.php
deleted file mode 100644
index 18c9b94..0000000
--- a/app/Http/Livewire/Admin/Menu.php
+++ /dev/null
@@ -1,14 +0,0 @@
-<?php
-
-namespace App\Http\Livewire\Admin;
-
-use Livewire\Component;
-
-class Menu extends Component
-{
-    public string $pageHeader='Menu';
-    public function render()
-    {
-        return view('livewire.admin.menu',['pageHeader'=>$this->pageHeader]);
-    }
-}
diff --git a/app/Http/Livewire/Admin/Menu/Level.php b/app/Http/Livewire/Admin/Menu/Level.php
index a05e799..e7e526f 100644
--- a/app/Http/Livewire/Admin/Menu/Level.php
+++ b/app/Http/Livewire/Admin/Menu/Level.php
@@ -13,21 +13,24 @@ class Level extends Component
 
     public string $pageHeader = 'Menu Level';
     public array $menuLevel;
+    public ?int $rowID = null;
 
-    public $editMenuRecord = null;
+    public $menuLevelRecord = null;
+
+    protected $listeners = ['createMenuLevel', 'editMenuLevel', 'deleteMenuLevel'];
 
-    protected $listeners = ['editMenuLevel'];
 
     public function mount()
     {
-        $this->formInfo('create', 'Create', 'Create', 'Create Menu Levels');
-        $this->formType = "create";
-        $this->resetInput();
+//        $this->modelInfo('create', 'Create', 'Create', 'Create Menu Levels');
+//        $this->formType = "create";
+        $this->resetForm();
     }
 
     public function resetForm()
     {
         $this->resetErrorBag();
+        $this->resetInput();
     }
 
     protected $messages = [
@@ -39,7 +42,7 @@ public function resetForm()
     protected function rules()
     {
         return [
-            'menuLevel.name' => 'required|min:4|unique:menu_levels,name'
+            'menuLevel.name' => 'required|min:4|unique:menu_levels,name,' . $this->rowID
         ];
     }
 
@@ -55,47 +58,85 @@ public function resetInput()
         $this->menuLevel = ['name' => ''];
     }
 
+    protected function getRecord($row)
+    {
+        $this->rowID = $row['id'];
+        $this->menuLevelRecord = MenuLevel::find($row)->first();
+    }
+
+
+    public function createMenuLevel()
+    {
+        $this->resetForm();
+        $this->modelInfo('create', 'Menu Level');
+        $this->dispatchBrowserEvent('FirstModel', ['show' => true]);
+    }
+
     public function editMenuLevel($row)
     {
-        $this->editMenuRecord = MenuLevel::find($row)->first();
-        $this->menuLevel['name'] = $this->editMenuRecord->name;
-        $this->formInfo('update', 'Update', 'Update ' . $this->menuLevel['name'], 'Update ' . $this->menuLevel['name']);
+        $this->getRecord($row);
+        $this->modelInfo('update', $this->menuLevelRecord->name);
+        $this->menuLevel['name'] = $this->menuLevelRecord->name;
+        $this->dispatchBrowserEvent('FirstModel', ['show' => true]);
+    }
+
+    public function deleteMenuLevel($row)
+    {
+        $this->getRecord($row);
+        $this->modelInfo('delete', $this->menuLevelRecord->name);
+        $this->menuLevel['name'] = $this->menuLevelRecord->name;
         $this->dispatchBrowserEvent('FirstModel', ['show' => true]);
     }
 
+    protected function afterSave($formType){
+        $this->emit('refreshDatatable');
+        $this->resetForm();
+        $this->dispatchBrowserEvent('FirstModel', ['show' => false]);
+
+        switch($formType){
+            case 'create':
+                $this->dispatchBrowserEvent('Toast', ['show' => true, 'type' => 'success', 'message' => "'" . $this->menuLevelRecord->name . "'" . ' was added to Menu Level!']);
+                break;
+
+            case 'update':
+                $this->dispatchBrowserEvent('Toast', ['show' => true, 'type' => 'success', 'message' => "'" . $this->menuLevelRecord->name . "'" . ' was updated!']);
+                break;
+
+            case 'delete':
+                $this->dispatchBrowserEvent('Toast', ['show' => true, 'type' => 'success', 'message' => "'" . $this->menuLevelRecord->name . "'" . ' was deleted!']);
+                break;
+        }
+    }
+
 
     public function submit()
     {
-        $this->validate();
+
 
         switch ($this->formType) {
 
             case 'create':
-                $level = new MenuLevel();
-                $level->name = $this->menuLevel['name'];
-                $level->save();
-
+                $this->validate();
+                $this->menuLevelRecord = new MenuLevel();
+                $this->menuLevelRecord->name = $this->menuLevel['name'];
+                $this->menuLevelRecord->save();
+                $this->afterSave($this->formType);
                 break;
 
             case 'update':
-                $this->editMenuRecord->name = $this->menuLevel['name'];
-                $this->editMenuRecord->save();
+                $this->validate();
+                $this->menuLevelRecord->name = $this->menuLevel['name'];
+                $this->menuLevelRecord->save();
+                $this->afterSave($this->formType);
                 break;
-        }
-        if ($this->formType === 'create' || $this->formType === 'update') {
-            $this->emit('refreshDatatable');
-            $this->resetForm();
-            $this->resetInput();
-            $this->dispatchBrowserEvent('FirstModel', ['show' => false]);
-
-            if($this->formType === 'update'){
-                $this->dispatchBrowserEvent('Toast', ['show' => true, 'type' => 'success', 'message' => "'" . $this->editMenuRecord->name . "'" . ' was updated!']);
-            }else{
-                $this->dispatchBrowserEvent('Toast', ['show' => true, 'type' => 'success', 'message' => "'" . $level->name . "'" . ' was added to Menu Level!']);
-            }
 
+            case 'delete':
+                $this->menuLevelRecord->delete();
+                $this->afterSave($this->formType);
+                break;
         }
 
+
     }
 
     public function render()
diff --git a/app/Http/Livewire/Admin/Menu/MenuLevelDatatable.php b/app/Http/Livewire/Admin/Menu/MenuLevelDatatable.php
new file mode 100644
index 0000000..b62a326
--- /dev/null
+++ b/app/Http/Livewire/Admin/Menu/MenuLevelDatatable.php
@@ -0,0 +1,116 @@
+<?php
+
+namespace App\Http\Livewire\Admin\Menu;
+
+use Rappasoft\LaravelLivewireTables\DataTableComponent;
+use Rappasoft\LaravelLivewireTables\Views\Column;
+use App\Models\MenuLevel;
+use Rappasoft\LaravelLivewireTables\Views\Columns\LinkColumn;
+
+class MenuLevelDatatable extends DataTableComponent
+{
+    protected $model = MenuLevel::class;
+
+
+    public string $tableName = 'level-menus';
+
+    public $columnSearch = [
+        'names' => null,
+    ];
+
+
+    public function configure(): void
+    {
+        $this->setPrimaryKey('id')
+            ->setPerPageAccepted([10, 25, 50, 100])
+            ->setPerPage(10)
+            ->setSortingStatus(true)
+            ->setSortingPillsStatus(false)
+            ->setPageName('menu-levels')
+            ->setPaginationVisibilityStatus(true)
+            ->setPaginationStatus(true)
+            ->setDefaultSort('id', 'desc')
+            ->setQueryStringStatus(false)
+            ->setThAttributes(function (Column $column) {
+                if ($column->isField('id')) {
+                    return [
+                        'class' => '!w-[5%]',
+                    ];
+                } elseif ($column->isField('name')) {
+                    return [
+                        'class' => '!w-[60%]',
+                    ];
+                } elseif ($column->isField('created_at')) {
+                    return [
+                        'class' => '!w-[15%]',
+                    ];
+                } elseif ($column->isField('updated_at')) {
+                    return [
+                        'class' => '!w-[15%]',
+                    ];
+                } elseif ($column->getTitle() === 'Action') {
+                    return [
+                        'class' => '!w-[5%] text-center',
+                    ];
+                }
+
+                return [];
+            })
+            ->setThSortButtonAttributes(function (Column $column) {
+                if ($column->isField('created_at')) {
+                    return [
+                        'class' => 'mx-auto',
+                    ];
+                } elseif ($column->isField('updated_at')) {
+                    return [
+                        'class' => 'mx-auto',
+                    ];
+                }
+
+                return [];
+            })
+            ->setTdAttributes(function (Column $column, $row, $columnIndex, $rowIndex) {
+                if ($columnIndex === 2 || $columnIndex === 3) {
+                    return [
+                        'class' => 'text-center',
+                    ];
+                }
+
+                return [];
+            })
+            ->setUseHeaderAsFooterEnabled();
+    }
+
+
+    public function columns(): array
+    {
+        return [
+            Column::make("Id", "id")
+                ->searchable()
+                ->sortable(),
+            Column::make("Name", "name")
+                ->searchable()
+                ->sortable(),
+            Column::make("Created at", "created_at")
+                ->format(fn($value, $row, Column $column) => $row->created_at->diffForHumans())
+                ->sortable(),
+            Column::make("Updated at", "updated_at")
+                ->format(fn($value, $row, Column $column) => $row->created_at->diffForHumans())
+                ->sortable(),
+
+            Column::make('Action', 'ID')
+                ->format(
+                    fn($value, $row, Column $column) => '<div class="flex flex-row space-x-2"><span class="flex w-full"><svg wire:click.prevent="$emit(`editMenuLevel`,' . $row . ')" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="cursor-pointer mx-auto w-5 h-5">
+                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
+                                                        </svg></span>
+                                                        <span class="flex w-full"><svg  wire:click.prevent="$emit(`deleteMenuLevel`,' . $row . ')" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="cursor-pointer mx-auto text-red-500 w-5 h-5">
+                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+                                                        </svg></span>
+                                                        </div>
+                                                        '
+                )
+                ->html(),
+
+        ];
+    }
+}
diff --git a/app/Http/Livewire/Admin/Menu/MenuLevelTable.php b/app/Http/Livewire/Admin/Menu/MenuLevelTable.php
deleted file mode 100644
index 823d470..0000000
--- a/app/Http/Livewire/Admin/Menu/MenuLevelTable.php
+++ /dev/null
@@ -1,72 +0,0 @@
-<?php
-
-namespace App\Http\Livewire\Admin\Menu;
-
-use Rappasoft\LaravelLivewireTables\DataTableComponent;
-use Rappasoft\LaravelLivewireTables\Views\Column;
-use App\Models\MenuLevel;
-use Rappasoft\LaravelLivewireTables\Views\Columns\LinkColumn;
-
-class MenuLevelTable extends DataTableComponent
-{
-    protected $model = MenuLevel::class;
-
-
-
-    public string $tableName = 'level-menus';
-
-    public $columnSearch = [
-        'names' => null,
-    ];
-
-
-
-
-    public function configure(): void
-    {
-        $this->setPrimaryKey('id')
-             ->setPerPageAccepted([10, 25, 50, 100])
-           ->setPerPage(10)
-            ->setSortingStatus(true)
-            ->setSortingPillsStatus(false)
-            ->setPageName('menu-levels')
-            ->setPaginationVisibilityStatus(true)
-            ->setPaginationStatus(true)
-            ->setDefaultSort('id', 'desc')
-            ->setQueryStringStatus(false)
-        -> setUseHeaderAsFooterEnabled();
-    }
-
-
-
-
-    public function columns(): array
-    {
-        return [
-            Column::make("Id", "id")
-                ->searchable(),
-            Column::make("Name", "name")
-                ->searchable()
-                ->sortable(),
-            Column::make("Created at", "created_at")
-                ->sortable(),
-            Column::make("Updated at", "updated_at")
-                ->sortable(),
-            Column::make('Edit')
-                ->label(
-                    fn($row, Column $column) => 'Edit'
-                ),
-            LinkColumn::make('Action')
-                ->title(fn($row) => 'Edit')
-                ->location(fn($row) => route('admin.menu', $row)),
-            Column::make('Name')
-                ->format(
-                    fn($value, $row, Column $column) => '<svg wire:click.prevent="$emit(`editMenuLevel`,'.$row.')" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="cursor-pointer w-5 h-5">
-                                                          <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
-                                                        </svg>'
-                )
-                ->html(),
-
-        ];
-    }
-}
diff --git a/app/Http/Livewire/Admin/Menu/MenuParent.php b/app/Http/Livewire/Admin/Menu/MenuParent.php
new file mode 100644
index 0000000..ef2a70a
--- /dev/null
+++ b/app/Http/Livewire/Admin/Menu/MenuParent.php
@@ -0,0 +1,146 @@
+<?php
+
+namespace App\Http\Livewire\Admin\Menu;
+
+use App\Models\Menu;
+use App\Traits\General;
+use Illuminate\Database\Eloquent\Model;
+use Livewire\Component;
+
+class MenuParent extends Component
+{
+    use General;
+
+    public string $pageHeader = 'Menu';
+    public array $menu;
+    public ?int $rowID = null;
+
+    public $menuRecord = null;
+
+    protected $listeners = ['createMenu', 'editMenu', 'deleteMenu'];
+
+
+    public function mount()
+    {
+//        $this->modelInfo('create', 'Create', 'Create', 'Create Menu Levels');
+//        $this->formType = "create";
+        $this->resetForm();
+    }
+
+    public function resetForm()
+    {
+        $this->resetErrorBag();
+        $this->resetInput();
+    }
+
+    protected $messages = [
+        'menu.name.required' => 'Menu name is required.',
+        'menu.name.min' => 'Menu must be at-least 4 letters long.',
+        'menu.name.unique' => ':attribute menu already exists!.',
+    ];
+
+    protected function rules()
+    {
+        return [
+            'menu.name' => 'required|min:4|unique:menus,name,' . $this->rowID
+        ];
+    }
+
+    protected function validationAttributes()
+    {
+        return [
+            'menu.name' => $this->menu['name'],
+        ];
+    }
+
+    public function resetInput()
+    {
+        $this->menu = ['name' => ''];
+    }
+
+    protected function getRecord($row)
+    {
+        $this->rowID = $row['id'];
+        $this->menuRecord = Menu::find($row)->first();
+    }
+
+
+    public function createMenu()
+    {
+        $this->resetForm();
+        $this->modelInfo('create', 'Menu');
+        $this->dispatchBrowserEvent('FirstModel', ['show' => true]);
+    }
+
+    public function editMenu($row)
+    {
+        $this->getRecord($row);
+        $this->modelInfo('update', $this->menuRecord->name);
+        $this->menu['name'] = $this->menuRecord->name;
+        $this->dispatchBrowserEvent('FirstModel', ['show' => true]);
+    }
+
+    public function deleteMenu($row)
+    {
+        $this->getRecord($row);
+        $this->modelInfo('delete', $this->menuRecord->name);
+        $this->menu['name'] = $this->menuRecord->name;
+        $this->dispatchBrowserEvent('FirstModel', ['show' => true]);
+    }
+
+    protected function afterSave($formType){
+        $this->emit('refreshDatatable');
+        $this->resetForm();
+        $this->dispatchBrowserEvent('FirstModel', ['show' => false]);
+
+        switch($formType){
+            case 'create':
+                $this->dispatchBrowserEvent('Toast', ['show' => true, 'type' => 'success', 'message' => "'" . $this->menuRecord->name . "'" . ' was added to Menu Level!']);
+                break;
+
+            case 'update':
+                $this->dispatchBrowserEvent('Toast', ['show' => true, 'type' => 'success', 'message' => "'" . $this->menuRecord->name . "'" . ' was updated!']);
+                break;
+
+            case 'delete':
+                $this->dispatchBrowserEvent('Toast', ['show' => true, 'type' => 'success', 'message' => "'" . $this->menuRecord->name . "'" . ' was deleted!']);
+                break;
+        }
+    }
+
+
+    public function submit()
+    {
+
+
+        switch ($this->formType) {
+
+            case 'create':
+                $this->validate();
+                $this->menuRecord = new Menu();
+                $this->menuRecord->name = $this->menu['name'];
+                $this->menuRecord->save();
+                $this->afterSave($this->formType);
+                break;
+
+            case 'update':
+                $this->validate();
+                $this->menuRecord->name = $this->menu['name'];
+                $this->menuRecord->save();
+                $this->afterSave($this->formType);
+                break;
+
+            case 'delete':
+                $this->menuRecord->delete();
+                $this->afterSave($this->formType);
+                break;
+        }
+
+
+    }
+
+    public function render()
+    {
+        return view('livewire.admin.menu.menu-parent');
+    }
+}
diff --git a/app/Http/Livewire/Admin/Menu/MenuParentDatatable.php b/app/Http/Livewire/Admin/Menu/MenuParentDatatable.php
new file mode 100644
index 0000000..59e9be1
--- /dev/null
+++ b/app/Http/Livewire/Admin/Menu/MenuParentDatatable.php
@@ -0,0 +1,116 @@
+<?php
+
+namespace App\Http\Livewire\Admin\Menu;
+
+use App\Models\Menu;
+use Rappasoft\LaravelLivewireTables\DataTableComponent;
+use Rappasoft\LaravelLivewireTables\Views\Column;
+use Rappasoft\LaravelLivewireTables\Views\Columns\LinkColumn;
+
+class MenuParentDatatable extends DataTableComponent
+{
+    protected $model = Menu::class;
+
+
+    public string $tableName = 'menus';
+
+    public $columnSearch = [
+        'names' => null,
+    ];
+
+
+    public function configure(): void
+    {
+        $this->setPrimaryKey('id')
+            ->setPerPageAccepted([10, 25, 50, 100])
+            ->setPerPage(10)
+            ->setSortingStatus(true)
+            ->setSortingPillsStatus(false)
+            ->setPageName('menu-levels')
+            ->setPaginationVisibilityStatus(true)
+            ->setPaginationStatus(true)
+            ->setDefaultSort('id', 'desc')
+            ->setQueryStringStatus(false)
+            ->setThAttributes(function (Column $column) {
+                if ($column->isField('id')) {
+                    return [
+                        'class' => '!w-[5%]',
+                    ];
+                } elseif ($column->isField('name')) {
+                    return [
+                        'class' => '!w-[60%]',
+                    ];
+                } elseif ($column->isField('created_at')) {
+                    return [
+                        'class' => '!w-[15%]',
+                    ];
+                } elseif ($column->isField('updated_at')) {
+                    return [
+                        'class' => '!w-[15%]',
+                    ];
+                } elseif ($column->getTitle() === 'Action') {
+                    return [
+                        'class' => '!w-[5%] text-center',
+                    ];
+                }
+
+                return [];
+            })
+            ->setThSortButtonAttributes(function (Column $column) {
+                if ($column->isField('created_at')) {
+                    return [
+                        'class' => 'mx-auto',
+                    ];
+                } elseif ($column->isField('updated_at')) {
+                    return [
+                        'class' => 'mx-auto',
+                    ];
+                }
+
+                return [];
+            })
+            ->setTdAttributes(function (Column $column, $row, $columnIndex, $rowIndex) {
+                if ($columnIndex === 2 || $columnIndex === 3) {
+                    return [
+                        'class' => 'text-center',
+                    ];
+                }
+
+                return [];
+            })
+            ->setUseHeaderAsFooterEnabled();
+    }
+
+
+    public function columns(): array
+    {
+        return [
+            Column::make("Id", "id")
+                ->searchable()
+                ->sortable(),
+            Column::make("Name", "name")
+                ->searchable()
+                ->sortable(),
+            Column::make("Created at", "created_at")
+                ->format(fn($value, $row, Column $column) => $row->created_at->diffForHumans())
+                ->sortable(),
+            Column::make("Updated at", "updated_at")
+                ->format(fn($value, $row, Column $column) => $row->created_at->diffForHumans())
+                ->sortable(),
+
+            Column::make('Action', 'ID')
+                ->format(
+                    fn($value, $row, Column $column) => '<div class="flex flex-row space-x-2"><span class="flex w-full"><svg wire:click.prevent="$emit(`editMenu`,' . $row . ')" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="cursor-pointer mx-auto w-5 h-5">
+                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
+                                                        </svg></span>
+                                                        <span class="flex w-full"><svg  wire:click.prevent="$emit(`deleteMenu`,' . $row . ')" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="cursor-pointer mx-auto text-red-500 w-5 h-5">
+                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+                                                        </svg></span>
+                                                        </div>
+                                                        '
+                )
+                ->html(),
+
+        ];
+    }
+}
diff --git a/app/Http/Livewire/Layout/Footer.php b/app/Http/Livewire/Layout/Footer.php
new file mode 100644
index 0000000..8a8d0e4
--- /dev/null
+++ b/app/Http/Livewire/Layout/Footer.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Http\Livewire\Layout;
+
+use Livewire\Component;
+
+class Footer extends Component
+{
+    public function render()
+    {
+        return view('livewire.layout.footer');
+    }
+}
diff --git a/app/Traits/General.php b/app/Traits/General.php
index 403ce7b..e8724ca 100644
--- a/app/Traits/General.php
+++ b/app/Traits/General.php
@@ -6,17 +6,26 @@ trait General
 {
     public string $formType = 'create';
     public string $buttonName = 'Create';
+    public string $submitName = 'Create';
     public string $modalHeader = 'Create';
 
-    public function formInfo($formType, $buttonName, $submitName, $modalHeader)
+    public function modelInfo($formType, $name, $submitName='', $modalHeader='')
     {
         switch ($formType) {
             case 'create':
+                $this->formType = $formType;
+                ($submitName==='') ? $this->submitName = "let`s Create" :  $this->submitName = $submitName;
+                ($modalHeader==='') ? $this->modalHeader = "New ".$name :  $this->modalHeader = $modalHeader;
+                break;
             case 'update':
                 $this->formType = $formType;
-                $this->buttonName = $buttonName;
-                $this->submitName = $submitName;
-                $this->modalHeader = $modalHeader;
+                ($submitName==='') ? $this->submitName = "Yes, Update" :  $this->submitName = $submitName;
+                ($modalHeader==='') ? $this->modalHeader = "Update ".$name :  $this->modalHeader = $modalHeader;
+                break;
+            case 'delete':
+                $this->formType = $formType;
+                ($submitName==='') ? $this->submitName = "Yes, Delete" :  $this->submitName = $submitName;
+                ($modalHeader==='') ? $this->modalHeader = "Delete ".$name :  $this->modalHeader = $modalHeader;
                 break;
         }
     }
diff --git a/app/View/Components/Layout/Main.php b/app/View/Components/Layout/Main.php
new file mode 100644
index 0000000..152fbb1
--- /dev/null
+++ b/app/View/Components/Layout/Main.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Layout;
+
+use Illuminate\View\Component;
+
+class Main extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.layout.main');
+    }
+}
diff --git a/app/View/Components/Svg/Trash.php b/app/View/Components/Svg/Trash.php
new file mode 100644
index 0000000..0dfe769
--- /dev/null
+++ b/app/View/Components/Svg/Trash.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Svg;
+
+use Illuminate\View\Component;
+
+class Trash extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.svg.trash');
+    }
+}
diff --git a/database/migrations/2022_11_10_005851_create_menu_levels_table.php b/database/migrations/2022_11_01_005851_create_menu_levels_table.php
similarity index 100%
rename from database/migrations/2022_11_10_005851_create_menu_levels_table.php
rename to database/migrations/2022_11_01_005851_create_menu_levels_table.php
diff --git a/database/migrations/2022_11_09_085026_create_menus_table.php b/database/migrations/2022_11_09_085026_create_menus_table.php
index d374a72..d96ec9d 100644
--- a/database/migrations/2022_11_09_085026_create_menus_table.php
+++ b/database/migrations/2022_11_09_085026_create_menus_table.php
@@ -17,7 +17,11 @@ public function up()
             $table->id();
             $table->string('name')->unique();
             $table->string('svg')->unique()->nullable();
+            $table->unsignedBigInteger('menu_levels_id');
             $table->timestamps();
+
+            //FOREIGN KEYS
+            $table->foreign('menu_levels_id','menus_fk0')->on('menu_levels')->references('id')->onUpdate('cascade')->onDelete('cascade');
         });
     }
 
@@ -28,6 +32,9 @@ public function up()
      */
     public function down()
     {
+        Schema::table('menu_items', function (Blueprint $table) {
+            $table->dropForeign('menus_fk0');
+        });
         Schema::dropIfExists('menus');
     }
 };
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index 58a4f3a..7bde4f0 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -22,7 +22,8 @@ public function run()
          ]);
 
         \App\Models\User::factory(10)->create();
-
         \App\Models\Admin::factory()->create();
+
+        $this->call(MenuLevelSeeder::class);
     }
 }
diff --git a/database/seeders/MenuLevelSeeder.php b/database/seeders/MenuLevelSeeder.php
new file mode 100644
index 0000000..741c791
--- /dev/null
+++ b/database/seeders/MenuLevelSeeder.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\MenuLevel;
+use Illuminate\Database\Seeder;
+
+class MenuLevelSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     *
+     * @return void
+     */
+    public function run()
+    {
+        MenuLevel::create([ 'name' => 'Parent']);
+        MenuLevel::create([ 'name' => 'Child 1']);
+        MenuLevel::create([ 'name' => 'Child 2']);
+    }
+}
diff --git a/resources/js/app.js b/resources/js/app.js
index d7f8819..90fe2d0 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -4,12 +4,14 @@ import('preline');
 import Alpine from 'alpinejs';
 import persist from '@alpinejs/persist'
 Alpine.plugin(persist)
-import Main  from './components/main';
+import {Main}  from './components/main';
+import {Wire} from "./components/wire";
 
 
 
 
 Alpine.data('Main', Main)
+Alpine.data('Wire', Wire)
 
 
 window.Alpine = Alpine;
diff --git a/resources/js/components/main.js b/resources/js/components/main.js
index d58005e..bc20903 100644
--- a/resources/js/components/main.js
+++ b/resources/js/components/main.js
@@ -1,10 +1,3 @@
-// document.addEventListener('alpine:init', function () {
-//     Alpine.data('Main', ($wire, data) => ({
-//         darkMode: data.darkMode
-//     }));
-//
-// });
-
 export function Main(data) {
     return {
         darkMode: data.darkMode,
@@ -12,11 +5,11 @@ export function Main(data) {
         toast:{'show':false,'type':'normal','message':'Some message!'},
         isFirstModelButtonClicked: false,
 
+
         init() {
             this.darkMode = true;
             this.eventToListen();
             Alpine.effect(() => {
-                console.log(this.isFirstModelButtonClicked);
             });
         },
 
diff --git a/resources/js/components/wire.js b/resources/js/components/wire.js
new file mode 100644
index 0000000..702ede6
--- /dev/null
+++ b/resources/js/components/wire.js
@@ -0,0 +1,13 @@
+export function Wire($wire, data) {
+    return {
+        formType: $wire.entangle('formType'),
+        init() {
+            Alpine.effect(() => {
+            });
+        },
+    }
+}
+
+export default Wire
+
+
diff --git a/resources/views/components/item/button.blade.php b/resources/views/components/item/button.blade.php
index 56c226e..c78270f 100644
--- a/resources/views/components/item/button.blade.php
+++ b/resources/views/components/item/button.blade.php
@@ -1,46 +1,78 @@
 @props([
 'size'=>'medium',
 'type'=>'button',
+'formType'=>'default',
 'defaultBg'=>'transition-all duration-300 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-oblue-100 dark:hover:bg-oblue-100 dark:border-olblue-800/[0.5] dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-oblue-100',
-'primaryBg'=>'transition-all duration-300 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-blue-600 text-gray-100 shadow-sm align-middle hover:bg-blue-700 border-blue-700 dark:border-blue-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-300 transition-all text-sm '
+'primaryBg'=>'transition-all duration-300 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-blue-600 text-gray-100 shadow-sm align-middle hover:bg-blue-700 border-blue-700 dark:border-blue-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-300 transition-all text-sm dark:bg-blue-700 dark:hover:bg-blue-800 dark:border-blue-600/[0.5] dark:text-blue-200 dark:hover:text-white dark:focus:ring-offset-blue-100',
+'successBg'=>'transition-all duration-300 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-green-600 text-gray-100 shadow-sm align-middle hover:bg-green-700 border-green-700 dark:border-green-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-green-300 transition-all text-sm dark:bg-green-700 dark:hover:bg-green-800 dark:border-green-600/[0.5] dark:text-green-200 dark:hover:text-white dark:focus:ring-offset-oblue-100',
+'dangerBg'=>'transition-all duration-300 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-red-600 text-gray-100 shadow-sm align-middle hover:bg-red-700 border-red-700 dark:border-red-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-red-300 transition-all text-sm dark:bg-red-700 dark:hover:bg-red-800 dark:border-red-600/[0.5] dark:text-red-200 dark:hover:text-white dark:focus:ring-offset-red-100'
 ])
+<div class="flex">
 @switch($size)
     @case('small')
-        @if($type==='submit')
-            <button type={{$type}} {{ $attributes->merge(['class' =>'py-2 px-3 '. $primaryBg]) }} >
-                <span class="flex justify-center items-center">  {{$slot}} </span>
-            </button>
-        @else
-            <button type={{$type}} {{ $attributes->merge(['class' =>'py-2 px-3 '. $defaultBg]) }} >
-                <span class="flex justify-center items-center">  {{$slot}} </span>
-            </button>
-        @endif
+
+    @if($formType==='create')
+        <button type={{$type}} {{ $attributes->merge(['class' =>'py-2 px-3 '. $successBg]) }} >
+            <span class="flex justify-center items-center">  {{$slot}} </span>
+        </button>
+    @elseif($formType==='update')
+        <button type={{$type}} {{ $attributes->merge(['class' =>'py-2 px-3 '. $primaryBg]) }} >
+            <span class="flex justify-center items-center">  {{$slot}} </span>
+        </button>
+    @elseif($formType==='delete')
+        <button type={{$type}} {{ $attributes->merge(['class' =>'py-2 px-3 '. $dangerBg]) }} >
+            <span class="flex justify-center items-center">  {{$slot}} </span>
+        </button>
+    @else
+        <button type={{$type}} {{ $attributes->merge(['class' =>'py-2 px-3 '. $defaultBg]) }} >
+            <span class="flex justify-center items-center">  {{$slot}} </span>
+        </button>
+    @endif
+
     @break
 
     @case('medium')
-        @if($type==='submit')
-            <button type={{$type}} {{ $attributes->merge(['class' =>'py-3 px-4 '. $primaryBg]) }} >
-                <span class="flex justify-center items-center">  {{$slot}} </span>
-            </button>
-        @else
-            <button type={{$type}} {{ $attributes->merge(['class' =>'py-3 px-4 '. $defaultBg]) }} >
-                <span class="flex justify-center items-center">  {{$slot}} </span>
-            </button>
-        @endif
+
+    @if($formType==='create')
+        <button type={{$type}} {{ $attributes->merge(['class' =>'py-3 px-4 '. $successBg]) }} >
+            <span class="flex justify-center items-center">  {{$slot}} </span>
+        </button>
+    @elseif($formType==='update')
+        <button type={{$type}} {{ $attributes->merge(['class' =>'py-3 px-4 '. $primaryBg]) }} >
+            <span class="flex justify-center items-center">  {{$slot}} </span>
+        </button>
+    @elseif($formType==='delete')
+        <button type={{$type}} {{ $attributes->merge(['class' =>'py-3 px-4 '. $dangerBg]) }} >
+            <span class="flex justify-center items-center">  {{$slot}} </span>
+        </button>
+    @else
+        <button type={{$type}} {{ $attributes->merge(['class' =>'py-3 px-4 '. $defaultBg]) }} >
+            <span class="flex justify-center items-center">  {{$slot}} </span>
+        </button>
+    @endif
+
     @break
 
     @case('large')
-        @if($type==='submit')
-            <button type={{$type}} {{ $attributes->merge(['class' =>'py-3 px-4 '. $primaryBg]) }} >
-                <span class="flex justify-center items-center">  {{$slot}} </span>
-            </button>
-        @else
-            <button type={{$type}} {{ $attributes->merge(['class' =>'py-3 px-4 '. $defaultBg]) }} >
-                <span class="flex justify-center items-center">  {{$slot}} </span>
-            </button>
-        @endif
+    @if($formType==='create')
+        <button type={{$type}} {{ $attributes->merge(['class' =>'py-3 px-4 '. $successBg]) }} >
+            <span class="flex justify-center items-center">  {{$slot}} </span>
+        </button>
+    @elseif($formType==='update')
+        <button type={{$type}} {{ $attributes->merge(['class' =>'py-3 px-4 '. $primaryBg]) }} >
+            <span class="flex justify-center items-center">  {{$slot}} </span>
+        </button>
+    @elseif($formType==='delete')
+        <button type={{$type}} {{ $attributes->merge(['class' =>'py-3 px-4 '. $dangerBg]) }} >
+            <span class="flex justify-center items-center">  {{$slot}} </span>
+        </button>
+    @else
+        <button type={{$type}} {{ $attributes->merge(['class' =>'py-3 px-4 '. $defaultBg]) }} >
+            <span class="flex justify-center items-center">  {{$slot}} </span>
+        </button>
+    @endif
     @break
 @endswitch
-
+</div>
 
 
diff --git a/resources/views/components/item/form-submit.blade.php b/resources/views/components/item/form-submit.blade.php
index 47f1e59..5a00136 100644
--- a/resources/views/components/item/form-submit.blade.php
+++ b/resources/views/components/item/form-submit.blade.php
@@ -1,10 +1,10 @@
-@props(['name'])
+@props(['formType'=>'none','name'])
 <div class="flex justify-end mt-4 pt-4 items-center gap-x-2 py-3 px-0 pb-0 p border-t dark:border-olblue-800/[0.5]">
     <x-item.button @click.prevent="isFirstModelButtonClicked = false" size="small">
         Close
     </x-item.button>
 
-    <x-item.button type="submit" size="small">
+    <x-item.button formType={{$formType}} type="submit" size="small">
         {{$name}}
     </x-item.button>
 </div>
diff --git a/resources/views/components/item/modal.blade.php b/resources/views/components/item/modal.blade.php
index 5d277b1..c68f75a 100644
--- a/resources/views/components/item/modal.blade.php
+++ b/resources/views/components/item/modal.blade.php
@@ -1,34 +1,17 @@
 @props([
 'type',
 'size'=>'small',
-'buttonName'=>'Give some name',
 'modalHeader'=>'Give a header',
 'smallModal'=>'sm:max-w-lg sm:w-full ',
 'mediumModal'=>'md:max-w-2xl md:w-full ',
 'largeModal'=>'lg:max-w-4xl lg:w-full ',
 ])
 
-<x-item.button @click.prevent="isFirstModelButtonClicked = true; $wire.resetForm()" size="small">
-    @switch($type)
-        @case('create')
-        <x-svg.add class="flex w-4 h-4"></x-svg.add>
-        @break
-
-        @case('update')
-        <x-svg.edit class="flex w-4 h-4"></x-svg.edit>
-        @break
 
-        @case('delete')
-        <x-svg.add class="flex w-4 h-4"></x-svg.add>
-        @break
-    @endswitch
-
-    <span class="flex ml-1">{{__($buttonName)}}</span>
-</x-item.button>
 
 
 <div id="hs-vertically-centered-scrollable-modal"
-     class="hs-overlay  transition-all duration-300 opacity-0 w-full h-full fixed top-0 left-0 z-[80] overflow-x-hidden overflow-y-auto ustify-center items-center"
+     class="hs-overlay  transition-all duration-300 opacity-0 w-full h-full fixed top-0 left-0 z-[80] overflow-x-hidden overflow-y-auto justify-center items-center"
      :class="{ 'block opacity-100 transition-all duration-300 ': isFirstModelButtonClicked === true, ' opacity-0 transition-all duration-300 hidden': isFirstModelButtonClicked===false  }"
 >
     <div
@@ -50,21 +33,21 @@ class="hs-overlay  transition-all duration-300 opacity-0 w-full h-full fixed top
 
         :class="{ '!flex transition-all duration-300 opacity-100 ': isFirstModelButtonClicked===true }"
     >
-        <div
+        <div x-data="{formType: $wire.entangle('formType')}"
             class="max-h-full !min-w-full overflow-hidden flex flex-col bg-white border shadow-sm rounded-xl dark:bg-oblue-300 dark:border-oblue-100 dark:shadow-olblue-900/[.5]">
-            <div class="flex justify-between items-center py-3 px-4 border-b dark:border-olblue-800/[0.5]">
+            <div  class="flex justify-between items-center py-3 px-4 border-b dark:border-olblue-800/[0.5]">
                 <h3 class="flex justify-start items-center font-bold text-gray-800 dark:text-white">
                     @switch($type)
                         @case('create')
-                        <x-svg.add class="flex w-5 h-5"></x-svg.add>
+                        <x-svg.add class="flex w-4 h-4"></x-svg.add>
                         @break
 
                         @case('update')
-                        <x-svg.add class="flex w-5 h-5"></x-svg.add>
+                        <x-svg.edit class="flex w-4 h-4"></x-svg.edit>
                         @break
 
                         @case('delete')
-                        <x-svg.add class="flex w-5 h-5"></x-svg.add>
+                        <x-svg.trash class="flex w-4 h-4"></x-svg.trash>
                         @break
                     @endswitch
 
@@ -72,8 +55,10 @@ class="max-h-full !min-w-full overflow-hidden flex flex-col bg-white border shad
 
                 </h3>
 
-                <x-item.button @click.prevent="isFirstModelButtonClicked = false" size="small"
-                               class="border-0 !bg-transparent ">
+                <x-item.button @click.prevent="isFirstModelButtonClicked = false" formType="default" size="small"
+                               class="border-0 !bg-transparent"
+
+                >
                     <span class="sr-only">Close</span>
                     <x-svg.close></x-svg.close>
                 </x-item.button>
diff --git a/resources/views/components/item/toast.blade.php b/resources/views/components/item/toast.blade.php
index 32e188b..bd788cb 100644
--- a/resources/views/components/item/toast.blade.php
+++ b/resources/views/components/item/toast.blade.php
@@ -11,7 +11,7 @@
     {{--    Normal Message  --}}
     <template x-if="toast.type==='normal'">
 
-        <div x-show="toast.type==='normal'" class="max-w-xs bg-white border rounded-md shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
+        <div x-show="toast.type==='normal'" class="max-w-xs min-w-[300px] bg-white border rounded-md shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
             <div class="flex p-4">
                 <div class="flex-shrink-0">
                     <x-svg.information class="h-4 w-4 text-blue-500 mt-0.5"></x-svg.information>
@@ -25,7 +25,7 @@
 
     {{--    Success Message  --}}
     <template x-if="toast.type==='success'">
-        <div x-show="toast.type==='success'" class="max-w-xs bg-white border rounded-md shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
+        <div x-show="toast.type==='success'" class="max-w-xs min-w-[300px] bg-white border rounded-md shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
             <div class="flex p-4">
                 <div class="flex-shrink-0">
                     <x-svg.checked-circle class="h-4 w-4 text-green-500 mt-0.5"></x-svg.checked-circle>
@@ -39,7 +39,7 @@
 
     {{--    Error Message  --}}
     <template x-if="toast.type==='error'">
-        <div x-show="toast.type==='error'" class="max-w-xs bg-white border rounded-md shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
+        <div x-show="toast.type==='error'" class="max-w-xs min-w-[300px] bg-white border rounded-md shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
             <div class="flex p-4">
                 <div class="flex-shrink-0">
                     <x-svg.cross-circle class="h-4 w-4 text-red-500 mt-0.5"></x-svg.cross-circle>
@@ -53,7 +53,7 @@
 
         {{--    Warning Message  --}}
     <template x-if="toast.type==='warning'">
-        <div x-show="toast.type==='warning'" class="max-w-xs bg-white border rounded-md shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
+        <div x-show="toast.type==='warning'" class="max-w-xs min-w-[300px] bg-white border rounded-md shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
             <div class="flex p-4">
                 <div class="flex-shrink-0">
                     <x-svg.cross-circle class="h-4 w-4 text-orange-500 mt-0.5"></x-svg.cross-circle>
diff --git a/resources/views/components/layout/content.blade.php b/resources/views/components/layout/content.blade.php
index ad5eb57..5796e9d 100644
--- a/resources/views/components/layout/content.blade.php
+++ b/resources/views/components/layout/content.blade.php
@@ -1,3 +1,3 @@
-<main class="w-full pt-10 px-4 sm:px-6 md:px-8 lg:pl-72 h-full">
+<main class="flex flex-col w-full py-10 px-4 sm:px-6 md:px-8 lg:pl-72 h-full">
     {{$slot}}
 </main>
diff --git a/resources/views/components/layout/main.blade.php b/resources/views/components/layout/main.blade.php
new file mode 100644
index 0000000..e642a1c
--- /dev/null
+++ b/resources/views/components/layout/main.blade.php
@@ -0,0 +1,9 @@
+@props(['pageHeader'])
+<div x-data=" Wire($wire,{ }) " class="flex flex-col min-h-screen">
+    @livewire('layout.navigation')
+    @livewire('layout.toggle')
+    @livewire('layout.sidebar')
+    @livewire('layout.header',['header'=>$pageHeader])
+    {{$slot}}
+    @livewire('layout.footer')
+</div>
diff --git a/resources/views/components/svg/trash.blade.php b/resources/views/components/svg/trash.blade.php
new file mode 100644
index 0000000..ebac718
--- /dev/null
+++ b/resources/views/components/svg/trash.blade.php
@@ -0,0 +1,3 @@
+<svg {{ $attributes->merge(['class' => 'flex-none']) }} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
+    <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+</svg>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 2a2aceb..2ea6f42 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -26,10 +26,8 @@
 <body class="font-sans antialiased">
 <x-jet-banner/>
 
-<div class="flex flex-col min-h-screen bg-gray-white dark:bg-oblue-600 transition-all duration-300 ">
+<div class="flex flex-col min-h-screen  bg-gray-white dark:bg-oblue-600 transition-all duration-300 ">
     {{$slot}}
-
-
 </div>
 
 @stack('modals')
diff --git a/resources/views/livewire/admin/dashboard.blade.php b/resources/views/livewire/admin/dashboard.blade.php
deleted file mode 100644
index 382abdc..0000000
--- a/resources/views/livewire/admin/dashboard.blade.php
+++ /dev/null
@@ -1,14 +0,0 @@
-<div>
-    @livewire('layout.navigation')
-    @livewire('layout.toggle')
-    @livewire('layout.sidebar')
-    @livewire('layout.header',['header'=>$pageHeader])
-
-    <!-- Page Content -->
-    <x-layout.content>
-        <div class="flex flex-col bg-white border shadow-sm rounded-xl p-4 md:p-5 dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-900/[.9] dark:text-gray-400">
-            Some quick example text to build on the card title and make up the bulk of the card's content.
-        </div>
-    </x-layout.content>
-
-</div>
diff --git a/resources/views/livewire/admin/menu.blade.php b/resources/views/livewire/admin/menu.blade.php
deleted file mode 100644
index 4ee3fcf..0000000
--- a/resources/views/livewire/admin/menu.blade.php
+++ /dev/null
@@ -1,23 +0,0 @@
-<div>
-    @livewire('layout.navigation')
-    @livewire('layout.toggle')
-    @livewire('layout.sidebar')
-    @livewire('layout.header',['header'=>$pageHeader])
-
-    <!-- PAGE CONTENT -->
-    <x-layout.content>
-        <!-- Menu create -->
-        <x-item.modal buttonName="Create" size="small" type="add" modalHeader="Create Menu Level">
-            <x-item.form method="POST">
-
-                <div class="grid grid-cols-1 gap-4">
-
-
-                  <x-item.elements.input wireName="menu.name" name="menu-name" label="Name" placeholder="Enter a name for menu item" ></x-item.elements.input>
-                </div>
-
-                <x-item.form-submit name="Add"></x-item.form-submit>
-            </x-item.form>
-        </x-item.modal>
-    </x-layout.content>
-</div>
diff --git a/resources/views/livewire/admin/menu/level.blade.php b/resources/views/livewire/admin/menu/level.blade.php
index cbfe4d3..4ca51e3 100644
--- a/resources/views/livewire/admin/menu/level.blade.php
+++ b/resources/views/livewire/admin/menu/level.blade.php
@@ -1,19 +1,28 @@
-<div>
-    @livewire('layout.navigation')
-    @livewire('layout.toggle')
-    @livewire('layout.sidebar')
-    @livewire('layout.header',['header'=>$pageHeader])
+<x-layout.main pageHeader="{{$pageHeader}}">
 
     <!-- PAGE CONTENT -->
     <x-layout.content>
         <!-- Menu create -->
-        <x-item.modal buttonName="{{$buttonName}}" size="small" type="{{$formType}}" modalHeader="{{$modalHeader}}">
+
+        <x-item.button wire:click.prevent="createMenuLevel" size="small" class="!block w-auto">
+                <x-svg.add class="flex w-4 h-4"></x-svg.add> <span class="flex ml-1">{{__('Create')}}</span>
+        </x-item.button>
+
+        <x-item.modal size="small" type="{{$formType}}" modalHeader="{{$modalHeader}}">
             <x-item.form method="POST">
-                <div class="grid grid-cols-1 gap-4">
-                    <x-item.elements.input wireName="menuLevel.name" updating="defer" name="menu-name" label="Name"
-                                           placeholder="Enter a name for menu Level"></x-item.elements.input>
-                </div>
-                <x-item.form-submit name="{{$submitName}}"></x-item.form-submit>
+                @if($formType === 'create' || $formType === 'update')
+                    <div class="grid grid-cols-1 gap-4">
+                        <x-item.elements.input wireName="menuLevel.name" updating="defer" name="menu-name" label="Name"
+                                               placeholder="Enter a name for menu Level"></x-item.elements.input>
+                    </div>
+                @endif
+
+                    @if($formType === 'delete' )
+                        <div class="grid grid-cols-1 gap-4">
+                         <p class="text-gray-900 dark:text-white"> Are you sure you want to delete <span class="font-bold text-red-600">{{$menuLevelRecord->name}}</span> ?</p>
+                        </div>
+                    @endif
+                <x-item.form-submit formType="{{$formType}}" type="submit" name="{{$submitName}}"></x-item.form-submit>
             </x-item.form>
         </x-item.modal>
 
@@ -23,5 +32,4 @@
         </div>
     </x-layout.content>
 
-
-</div>
+</x-layout.main>
diff --git a/resources/views/livewire/admin/menu/menu-parent.blade.php b/resources/views/livewire/admin/menu/menu-parent.blade.php
new file mode 100644
index 0000000..d302796
--- /dev/null
+++ b/resources/views/livewire/admin/menu/menu-parent.blade.php
@@ -0,0 +1,35 @@
+<x-layout.main pageHeader="{{$pageHeader}}">
+
+    <!-- PAGE CONTENT -->
+    <x-layout.content>
+        <!-- Menu create -->
+
+        <x-item.button wire:click.prevent="createMenu" size="small" class="!block w-auto">
+                <x-svg.add class="flex w-4 h-4"></x-svg.add> <span class="flex ml-1">{{__('Create')}}</span>
+        </x-item.button>
+
+        <x-item.modal size="small" type="{{$formType}}" modalHeader="{{$modalHeader}}">
+            <x-item.form method="POST">
+                @if($formType === 'create' || $formType === 'update')
+                    <div class="grid grid-cols-1 gap-4">
+                        <x-item.elements.input wireName="menu.name" updating="defer" name="menu-name" label="Name"
+                                               placeholder="Enter a name for menu "></x-item.elements.input>
+                    </div>
+                @endif
+
+                    @if($formType === 'delete' )
+                        <div class="grid grid-cols-1 gap-4">
+                         <p class="text-gray-900 dark:text-white"> Are you sure you want to delete <span class="font-bold text-red-600">{{$menuRecord->name}}</span> ?</p>
+                        </div>
+                    @endif
+                <x-item.form-submit formType="{{$formType}}" type="submit" name="{{$submitName}}"></x-item.form-submit>
+            </x-item.form>
+        </x-item.modal>
+
+        <!-- Menu datatable -->
+        <div class="mt-3">
+            <livewire:admin.menu.menu-parent-datatable/>
+        </div>
+    </x-layout.content>
+
+</x-layout.main>
diff --git a/resources/views/livewire/layout/footer.blade.php b/resources/views/livewire/layout/footer.blade.php
new file mode 100644
index 0000000..021dafc
--- /dev/null
+++ b/resources/views/livewire/layout/footer.blade.php
@@ -0,0 +1,6 @@
+<footer class="transition-all duration-300 flex bg-white mt-auto flex flex-col w-full dark:bg-oblue-600   sm:px-6 md:px-8 lg:pl-72 border-t border-gray-100 dark:border-oblue-100 text-center lg:text-left ">
+    <div class="flex justify-center items-center w-full dark:bg-oblue-600 text-gray-700 dark:text-olblue-800 text-center p-4 text-sm" >
+        © 2022 Copyright:
+        <a class="text-gray-800 text-sm dark:text-olblue-800" href="https://omj-task.com/"> &nbsp OMJ Task Manager</a>
+    </div>
+</footer>
diff --git a/resources/views/livewire/layout/header.blade.php b/resources/views/livewire/layout/header.blade.php
index 07e9826..8dd9af9 100644
--- a/resources/views/livewire/layout/header.blade.php
+++ b/resources/views/livewire/layout/header.blade.php
@@ -1,4 +1,4 @@
-    <header class="xs:hidden lg:block  !h-[76px] text-oblue-100 dark:text-yellow-500 text-lg font-semibold shadow  sm:px-6 md:px-8 lg:pl-64 border-b border-t dark:border-oblue-100 shadow-none">
+    <header class="transition-all duration-300 flex xs:hidden lg:block  !h-[76px] text-oblue-100 dark:text-yellow-500 text-lg font-semibold shadow  sm:px-6 md:px-8 lg:pl-64 border-b border-t dark:border-oblue-100 shadow-none">
         <div class="max-w-7xl mx-0 py-6 px-4 sm:px-6 lg:px-8">
             {{ $header }}
         </div>
diff --git a/resources/views/vendor/livewire-tables/components/table/th.blade.php b/resources/views/vendor/livewire-tables/components/table/th.blade.php
index 570a617..7320079 100644
--- a/resources/views/vendor/livewire-tables/components/table/th.blade.php
+++ b/resources/views/vendor/livewire-tables/components/table/th.blade.php
@@ -12,7 +12,7 @@
 @if ($theme === 'tailwind')
     <th scope="col" {{
         $attributes->merge($customAttributes)
-            ->class(['px-6 py-3 text-left text-xs font-medium whitespace-nowrap text-gray-500 uppercase tracking-wider bg-gray-100  dark:bg-oblue-500 dark:text-olblue-600' => $customAttributes['default'] ?? true])
+            ->class(['transition-all duration-300  px-6 py-3 text-left text-xs font-medium whitespace-nowrap text-gray-500 uppercase tracking-wider bg-gray-100  dark:bg-oblue-500 dark:text-olblue-600' => $customAttributes['default'] ?? true])
             ->class(['hidden sm:table-cell' => $column->shouldCollapseOnMobile()])
             ->class(['hidden md:table-cell' => $column->shouldCollapseOnTablet()])
             ->except('default')
diff --git a/resources/views/vendor/livewire-tables/components/table/tr.blade.php b/resources/views/vendor/livewire-tables/components/table/tr.blade.php
index 19253de..d72b334 100644
--- a/resources/views/vendor/livewire-tables/components/table/tr.blade.php
+++ b/resources/views/vendor/livewire-tables/components/table/tr.blade.php
@@ -17,8 +17,8 @@
 
         {{
             $attributes->merge($customAttributes)
-                ->class(['bg-white dark:bg-oblue-400 dark:text-white' => ($customAttributes['default'] ?? true) && $rowIndex % 2 === 0])
-                ->class(['bg-gray-50 dark:bg-oblue-500 dark:text-white' => ($customAttributes['default'] ?? true) && $rowIndex % 2 !== 0])
+                ->class(['transition-all duration-300 bg-white dark:bg-oblue-400 dark:text-white' => ($customAttributes['default'] ?? true) && $rowIndex % 2 === 0])
+                ->class(['transition-all duration-300 bg-gray-50 dark:bg-oblue-500 dark:text-white' => ($customAttributes['default'] ?? true) && $rowIndex % 2 !== 0])
                 ->class(['cursor-pointer' => $component->hasTableRowUrl()])
                 ->except('default')
         }}
diff --git a/routes/admin.php b/routes/admin.php
index efb86f7..921107e 100644
--- a/routes/admin.php
+++ b/routes/admin.php
@@ -59,7 +59,7 @@
         Route::get('/profile', \App\Http\Livewire\Admin\Profile::class)->name('profile.show');
 
         //  Menu
-        Route::get('/menu', \App\Http\Livewire\Admin\Menu::class)->name('menu');
+        Route::get('/menu', \App\Http\Livewire\Admin\Menu\MenuParent::class)->name('menu');
         Route::get('/menu-levels', \App\Http\Livewire\Admin\Menu\Level::class)->name('menu-level');
 
         Route::put('/profile-information', [\App\Actions\Fortify\Controllers\ProfileInformationController::class, 'update'])->name('user-profile-information.update');
diff --git a/tailwind.config.js b/tailwind.config.js
index 657e868..cd6e69d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,6 +10,7 @@ module.exports = {
         './resources/views/**/*.blade.php',
         './node_modules/preline/dist/*.js',
         './vendor/rappasoft/laravel-livewire-tables/resources/views/**/*.blade.php',
+        './app/Http/Livewire/**/*.php',
     ],
 
     tailwindConfig: './styles/tailwind.config.js',