diff --git a/app/Http/Controllers/MenuItems.php b/app/Http/Controllers/MenuItems.php
new file mode 100644
index 0000000..a0fc2fa
--- /dev/null
+++ b/app/Http/Controllers/MenuItems.php
@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class MenuItems extends Controller
+{
+    //
+}
diff --git a/app/Http/Livewire/Admin/Menu/Level.php b/app/Http/Livewire/Admin/Menu/Level.php
new file mode 100644
index 0000000..bfcc53b
--- /dev/null
+++ b/app/Http/Livewire/Admin/Menu/Level.php
@@ -0,0 +1,61 @@
+<?php
+
+namespace App\Http\Livewire\Admin\Menu;
+
+use App\Models\MenuLevel;
+use Livewire\Component;
+
+class Level extends Component
+{
+    public string $pageHeader='Menu Level';
+    public array $menuLevel;
+
+    public function mount(){
+        $this->resetInput();
+    }
+
+    public function resetForm(){
+        $this->resetErrorBag();
+    }
+
+    protected $messages = [
+        'menuLevel.name.required' => 'Menu name is required.',
+        'menuLevel.name.min' => 'Menu must be at-least 4 letters long.',
+        'menuLevel.name.unique' => ':attribute menu already exists!.',
+    ];
+
+    protected function rules()
+    {
+        return [
+            'menuLevel.name' => 'required|min:4|unique:menu_levels,name'
+        ];
+    }
+
+    protected function validationAttributes()
+    {
+        return [
+            'menuLevel.name' => $this->menuLevel['name'],
+        ];
+    }
+
+    public function resetInput(){
+        $this->menuLevel=['name'=>''];
+    }
+
+
+
+    public function submit(){
+        $this->validate();
+       $level=new MenuLevel();
+       $level->name=$this->menuLevel['name'];
+       $level->save();
+       $this->resetForm();
+        $this->resetInput();
+       $this->dispatchBrowserEvent('FirstModel',['show'=>false]);
+    }
+
+    public function render()
+    {
+        return view('livewire.admin.menu.level');
+    }
+}
diff --git a/app/Models/MenuItems.php b/app/Models/MenuItems.php
new file mode 100644
index 0000000..8be2d88
--- /dev/null
+++ b/app/Models/MenuItems.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class MenuItems extends Model
+{
+    use HasFactory;
+}
diff --git a/app/Models/MenuLevel.php b/app/Models/MenuLevel.php
new file mode 100644
index 0000000..7e5e0bc
--- /dev/null
+++ b/app/Models/MenuLevel.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class MenuLevel extends Model
+{
+    use HasFactory;
+}
diff --git a/app/View/Components/Item/Elements/Input.php b/app/View/Components/Item/Elements/Input.php
new file mode 100644
index 0000000..8dd0522
--- /dev/null
+++ b/app/View/Components/Item/Elements/Input.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Item\Elements;
+
+use Illuminate\View\Component;
+
+class Input 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.item.elements.input');
+    }
+}
diff --git a/app/View/Components/Item/Form.php b/app/View/Components/Item/Form.php
new file mode 100644
index 0000000..87dc55c
--- /dev/null
+++ b/app/View/Components/Item/Form.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Item;
+
+use Illuminate\View\Component;
+
+class Form 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.item.form');
+    }
+}
diff --git a/app/View/Components/Item/FormSubmit.php b/app/View/Components/Item/FormSubmit.php
new file mode 100644
index 0000000..110f927
--- /dev/null
+++ b/app/View/Components/Item/FormSubmit.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Item;
+
+use Illuminate\View\Component;
+
+class FormSubmit 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.item.form-submit');
+    }
+}
diff --git a/app/View/Components/Item/Input.php b/app/View/Components/Item/Input.php
new file mode 100644
index 0000000..d88a925
--- /dev/null
+++ b/app/View/Components/Item/Input.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Item;
+
+use Illuminate\View\Component;
+
+class Input 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.item.input');
+    }
+}
diff --git a/app/View/Components/Item/Label.php b/app/View/Components/Item/Label.php
new file mode 100644
index 0000000..fab3cf6
--- /dev/null
+++ b/app/View/Components/Item/Label.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Item;
+
+use Illuminate\View\Component;
+
+class Label 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.item.label');
+    }
+}
diff --git a/app/View/Components/Item/ValidationError.php b/app/View/Components/Item/ValidationError.php
new file mode 100644
index 0000000..406ec29
--- /dev/null
+++ b/app/View/Components/Item/ValidationError.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Item;
+
+use Illuminate\View\Component;
+
+class ValidationError 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.item.validation-error');
+    }
+}
diff --git a/app/View/Components/Svg/Close.php b/app/View/Components/Svg/Close.php
new file mode 100644
index 0000000..b4627be
--- /dev/null
+++ b/app/View/Components/Svg/Close.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Svg;
+
+use Illuminate\View\Component;
+
+class Close 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.close');
+    }
+}
diff --git a/app/View/Components/Svg/Exclamation.php b/app/View/Components/Svg/Exclamation.php
new file mode 100644
index 0000000..217b9b9
--- /dev/null
+++ b/app/View/Components/Svg/Exclamation.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Svg;
+
+use Illuminate\View\Component;
+
+class Exclamation 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.exclamation');
+    }
+}
diff --git a/database/migrations/2022_11_10_005851_create_menu_levels_table.php b/database/migrations/2022_11_10_005851_create_menu_levels_table.php
new file mode 100644
index 0000000..7410afe
--- /dev/null
+++ b/database/migrations/2022_11_10_005851_create_menu_levels_table.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('menu_levels', function (Blueprint $table) {
+            $table->id();
+            $table->timestamps();
+            $table->string('name');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('menu_levels');
+    }
+};
diff --git a/database/migrations/2022_11_10_105400_create_menu_items_table.php b/database/migrations/2022_11_10_105400_create_menu_items_table.php
new file mode 100644
index 0000000..44f8299
--- /dev/null
+++ b/database/migrations/2022_11_10_105400_create_menu_items_table.php
@@ -0,0 +1,41 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('menu_items', function (Blueprint $table) {
+            $table->id();
+            $table->unsignedBigInteger('menu_id');
+            $table->unsignedBigInteger('menu_level_id');
+            $table->string('name');
+            $table->timestamps();
+
+            //FOREIGN KEYS
+            $table->foreign('menu_id','menu_items_fk0')->on('menus')->references('id')->onUpdate('cascade')->onDelete('cascade');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+
+        public function down()
+    {
+        Schema::table('menu_items', function (Blueprint $table) {
+            $table->dropForeign('menu_links_fk0');
+        });
+        Schema::dropIfExists('menu_items');
+    }
+};
diff --git a/package-lock.json b/package-lock.json
index 427c8f3..d6dd618 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
                 "tailwind-scrollbar": "^2.1.0-preview.0"
             },
             "devDependencies": {
-                "@tailwindcss/forms": "^0.5.2",
+                "@tailwindcss/forms": "^0.5.3",
                 "@tailwindcss/typography": "^0.5.0",
                 "alpinejs": "^3.10.4",
                 "autoprefixer": "^10.4.13",
diff --git a/package.json b/package.json
index 955864f..452170e 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
         "build": "vite build"
     },
     "devDependencies": {
-        "@tailwindcss/forms": "^0.5.2",
+        "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/typography": "^0.5.0",
         "alpinejs": "^3.10.4",
         "autoprefixer": "^10.4.13",
diff --git a/resources/js/components/main.js b/resources/js/components/main.js
index e976e43..6f4e778 100644
--- a/resources/js/components/main.js
+++ b/resources/js/components/main.js
@@ -5,18 +5,28 @@
 //
 // });
 
-export function Main(data){
-     return{
-         darkMode:data.darkMode,
-         isSidebarOpen:false,
-         isFirstModelButtonClicked:false,
-         init() {
-             this.darkMode=true;
-             Alpine.effect(() => {
-                 console.log( this.isModelButtonClicked);
-             });
-         }
-     }
+export function Main(data) {
+    return {
+        darkMode: data.darkMode,
+        isSidebarOpen: false,
+        isFirstModelButtonClicked: false,
+
+        init() {
+            this.darkMode = true;
+            this.eventToListen();
+            Alpine.effect(() => {
+                console.log(this.isFirstModelButtonClicked);
+            });
+        },
+        eventToListen() {
+            console.log('hello');
+            window.addEventListener('FirstModel', event => {
+                if (event.detail.show === false) {
+                    this.isFirstModelButtonClicked = false
+                }
+            });
+        }
+    }
 }
 
 export default Main
diff --git a/resources/views/components/item/button.blade.php b/resources/views/components/item/button.blade.php
index ac254e5..0364d59 100644
--- a/resources/views/components/item/button.blade.php
+++ b/resources/views/components/item/button.blade.php
@@ -1,24 +1,44 @@
-@props(['size'=>'default'])
+@props([
+'size'=>'medium',
+'type'=>'button',
+'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 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 '
+])
 @switch($size)
     @case('small')
-    <button type="button" {{ $attributes->merge(['class' => 'rounded-full py-2 px-3 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white
-            hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800']) }} >
-       <span class="flex justify-center items-center">  {{$slot}} </span>
-    </button>
+        @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
     @break
 
-    @case('default')
-    <button type="button" {{ $attributes->merge(['class' => 'py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white
-        hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800']) }}>
-        {{$slot}}
-    </button>
+    @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
     @break
 
     @case('large')
-    <button type="button" {{ $attributes->merge(['class' => 'py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white
-        hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm sm:p-5 dark:focus:ring-offset-gray-800']) }}>
-        {{$slot}}
-    </button>
+        @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
     @break
 @endswitch
 
diff --git a/resources/views/components/item/elements/input.blade.php b/resources/views/components/item/elements/input.blade.php
new file mode 100644
index 0000000..5dbabb5
--- /dev/null
+++ b/resources/views/components/item/elements/input.blade.php
@@ -0,0 +1,40 @@
+@props([
+'wireName',
+'updating'=>'defer',
+'debounce'=>'500ms',
+'size'=>'small',
+'label',
+'name',
+'placeholder',
+])
+
+<div {{ $attributes->merge(['class']) }}>
+    <x-item.label for="{{$name}}" label="{{$label}}"></x-item.label>
+    <div class="relative">
+        @switch($updating)
+            @case('defer')
+                <x-item.input wire:model.defer="{{$wireName}}" name="{{$name}}" placeholder="{{$placeholder}}" size="{{$size}}"></x-item.input>
+            @break
+
+            @case('lazy')
+                <x-item.input wire:model.lazy="{{$wireName}}" name="{{$name}}" placeholder="{{$placeholder}}" size="{{$size}}"></x-item.input>
+            @break
+
+            @case('debounce')
+                <x-item.input wire:model.debounce.500ms="{{$wireName}}" name="{{$name}}" placeholder="{{$placeholder}}" size="{{$size}}"></x-item.input>
+            @break
+
+            @default
+             <x-item.input wire:model="{{$wireName}}" name="{{$name}}" placeholder="{{$placeholder}}" size="{{$size}}"></x-item.input>
+            @break
+
+            @endswitch
+
+
+        {{-- Input error svg icon        --}}
+{{--        <div class="absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3">--}}
+{{--            <x-svg.exclamation class="text-red-600"></x-svg.exclamation>--}}
+{{--        </div>--}}
+    </div>
+    <x-item.validation-error name="{{$wireName}}"></x-item.validation-error>
+</div>
diff --git a/resources/views/components/item/form-submit.blade.php b/resources/views/components/item/form-submit.blade.php
new file mode 100644
index 0000000..47f1e59
--- /dev/null
+++ b/resources/views/components/item/form-submit.blade.php
@@ -0,0 +1,10 @@
+@props(['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">
+        {{$name}}
+    </x-item.button>
+</div>
diff --git a/resources/views/components/item/form.blade.php b/resources/views/components/item/form.blade.php
new file mode 100644
index 0000000..15240b6
--- /dev/null
+++ b/resources/views/components/item/form.blade.php
@@ -0,0 +1,9 @@
+@props(['method'=>'GET','hasFiles'=>false, 'wireSubmit'=>'submit'])
+<form wire:submit.prevent="{{$wireSubmit}}" method="{{ $method !== 'GET' ? 'POST' : 'GET' }}" @isset($action) action="{{ $action }}"
+      @endisset {!! $hasFiles ? 'enctype="multipart/form-data"' : '' !!} {{ $attributes }} novalidate>
+    @csrf
+    @method($method)
+    <div class="p-5 overflow-y-auto">
+            {{ $slot }}
+    </div>
+</form>
diff --git a/resources/views/components/item/input.blade.php b/resources/views/components/item/input.blade.php
new file mode 100644
index 0000000..5f3e87e
--- /dev/null
+++ b/resources/views/components/item/input.blade.php
@@ -0,0 +1,25 @@
+@props([
+'name'=>'',
+'placeholder'=>'',
+'size'=>'small',
+'sizeSmall'=>'py-2 px-3 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-oblue-300 dark:border-olblue-800/[0.5] dark:text-gray-400',
+'sizeMedium'=>'py-2 px-3 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400',
+'sizeLarge'=>'y-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 sm:p-5',
+
+])
+<input {{ $attributes->merge() }} type="text" id="{{$name}}" placeholder="{{$placeholder}}" name="{{$name}}"
+@switch($size)
+    @case('small')
+        {{ $attributes->merge(['class' => $sizeSmall])}}
+    @break
+
+        @case('medium')
+        {{ $attributes->merge(['class' => $sizeMedium])}}
+        @break
+
+        @case('large')
+        {{ $attributes->merge(['class' => $sizeLarge])}}
+        @break
+@endswitch
+
+>
diff --git a/resources/views/components/item/label.blade.php b/resources/views/components/item/label.blade.php
new file mode 100644
index 0000000..2909f7b
--- /dev/null
+++ b/resources/views/components/item/label.blade.php
@@ -0,0 +1,2 @@
+@props(['for'=>'','label'])
+<label for="{{$for}}" class="block text-sm font-medium mb-2 text-gray-900 dark:text-olblue-300">{{$label}}</label>
diff --git a/resources/views/components/item/modal.blade.php b/resources/views/components/item/modal.blade.php
index 31e5d74..197aa8f 100644
--- a/resources/views/components/item/modal.blade.php
+++ b/resources/views/components/item/modal.blade.php
@@ -1,5 +1,14 @@
-@props(['type','buttonName'=>'Give some name', 'modalHeader'=>'Give a header'])
-<x-item.button @click.prevent="isFirstModelButtonClicked = true" size="small">
+@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('add')
         <x-svg.add class="flex w-4 h-4"></x-svg.add>
@@ -20,15 +29,30 @@
 
 <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="{ 'block opacity-100 transition-all duration-300': isFirstModelButtonClicked === true, ' opacity-0 transition-all duration-300 hidden': isFirstModelButtonClicked===false  }"
+     :class="{ 'block opacity-100 transition-all duration-300 ': isFirstModelButtonClicked === true, ' opacity-0 transition-all duration-300 hidden': isFirstModelButtonClicked===false  }"
 >
     <div
-        class=" opacity-0 sm:max-w-lg sm:w-full m-3 sm:mx-auto h-[calc(100%-3.5rem)] min-h-[calc(100%-3.5rem)] flex items-center"
+        @switch($size)
+
+        @case('small')
+        {{ $attributes->merge(['class' => $smallModal.'opacity-0  m-3 sm:mx-auto h-[calc(100%-3.5rem)] min-h-[calc(100%-3.5rem)] flex justify-center items-center' ]) }}
+        @break
+
+        @case('medium')
+        {{ $attributes->merge(['class' => $mediumModal.'opacity-0  m-3 sm:mx-auto h-[calc(100%-3.5rem)] min-h-[calc(100%-3.5rem)] flex justify-center items-center' ]) }}
+        @break
+
+        @case('large')
+        {{ $attributes->merge(['class' => $largeModal.'opacity-0  m-3 sm:mx-auto h-[calc(100%-3.5rem)] min-h-[calc(100%-3.5rem)] flex justify-center items-center' ]) }}
+        @break
+
+        @endswitch
+
         :class="{ '!flex transition-all duration-300 opacity-100 ': isFirstModelButtonClicked===true }"
     >
         <div
-            class="max-h-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">
+            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]">
                 <h3 class="flex justify-start items-center font-bold text-gray-800 dark:text-white">
                     @switch($type)
                         @case('add')
@@ -47,69 +71,14 @@ class="max-h-full overflow-hidden flex flex-col bg-white border shadow-sm rounde
                     <span class="flex ml-1">{{$modalHeader}}</span>
 
                 </h3>
-                <button @click.prevent="isFirstModelButtonClicked = false" type="button"
-                        class="inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-md text-gray-500 hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white transition-all text-sm dark:focus:ring-gray-700 dark:focus:ring-offset-gray-800">
+
+                <x-item.button @click.prevent="isFirstModelButtonClicked = false" size="small"
+                               class="border-0 !bg-transparent ">
                     <span class="sr-only">Close</span>
-                    <svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none"
-                         xmlns="http://www.w3.org/2000/svg">
-                        <path
-                            d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z"
-                            fill="currentColor"/>
-                    </svg>
-                </button>
-            </div>
-            <div class="p-4 overflow-y-auto">
-                <div class="space-y-4">
-                    <div>
-                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Be bold</h3>
-                        <p class="mt-1 text-gray-800 dark:text-gray-400">
-                            Motivate teams to do their best work. Offer best practices to get users going in the right
-                            direction. Be bold and offer just enough help to get the work started, and then get out of
-                            the way. Give accurate information so users can make educated decisions. Know your user's
-                            struggles and desired outcomes and give just enough information to let them get where they
-                            need to go.
-                        </p>
-                    </div>
-
-                    <div>
-                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Be optimistic</h3>
-                        <p class="mt-1 text-gray-800 dark:text-gray-400">
-                            Focusing on the details gives people confidence in our products. Weave a consistent story
-                            across our fabric and be diligent about vocabulary across all messaging by being brand
-                            conscious across products to create a seamless flow across all the things. Let people know
-                            that they can jump in and start working expecting to find a dependable experience across all
-                            the things. Keep teams in the loop about what is happening by informing them of relevant
-                            features, products and opportunities for success. Be on the journey with them and highlight
-                            the key points that will help them the most - right now. Be in the moment by focusing
-                            attention on the important bits first.
-                        </p>
-                    </div>
-
-                    <div>
-                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Be practical, with a wink</h3>
-                        <p class="mt-1 text-gray-800 dark:text-gray-400">
-                            Keep our own story short and give teams just enough to get moving. Get to the point and be
-                            direct. Be concise - we tell the story of how we can help, but we do it directly and with
-                            purpose. Be on the lookout for opportunities and be quick to offer a helping hand. At the
-                            same time realize that novbody likes a nosy neighbor. Give the user just enough to know that
-                            something awesome is around the corner and then get out of the way. Write clear, accurate,
-                            and concise text that makes interfaces more usable and consistent - and builds trust. We
-                            strive to write text that is understandable by anyone, anywhere, regardless of their culture
-                            or language so that everyone feels they are part of the team.
-                        </p>
-                    </div>
-                </div>
-            </div>
-            <div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t dark:border-gray-700">
-                <button @click.prevent="isFirstModelButtonClicked = false" type="button"
-                        class="py-3 px-4 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-gray-800 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800">
-                    Close
-                </button>
-                <a class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
-                   href="#">
-                    Save changes
-                </a>
+                    <x-svg.close></x-svg.close>
+                </x-item.button>
             </div>
+            {{$slot}}
         </div>
     </div>
 </div>
diff --git a/resources/views/components/item/validation-error.blade.php b/resources/views/components/item/validation-error.blade.php
new file mode 100644
index 0000000..66ba406
--- /dev/null
+++ b/resources/views/components/item/validation-error.blade.php
@@ -0,0 +1,5 @@
+@props(['name'=>''])
+@error($name)
+<p class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ $message }}</p>
+@enderror
+
diff --git a/resources/views/components/svg/close.blade.php b/resources/views/components/svg/close.blade.php
new file mode 100644
index 0000000..ca88af2
--- /dev/null
+++ b/resources/views/components/svg/close.blade.php
@@ -0,0 +1,6 @@
+<svg {{ $attributes->merge(['class' => 'flex-none w-3.5 h-3.5']) }} viewBox="0 0 8 8" fill="none"
+     xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z"
+        fill="currentColor"/>
+</svg>
diff --git a/resources/views/components/svg/exclamation.blade.php b/resources/views/components/svg/exclamation.blade.php
new file mode 100644
index 0000000..7da010e
--- /dev/null
+++ b/resources/views/components/svg/exclamation.blade.php
@@ -0,0 +1,3 @@
+<svg {{ $attributes->merge(['class' => 'flex-none w-4 h-4']) }} width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
+    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
+</svg>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 304d5ef..249a27f 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -31,7 +31,7 @@
 @livewireScripts
 
 <div  @click="isFirstModelButtonClicked = false" data-hs-overlay-backdrop-template id="modalBackdrop"
-:class="{ 'transition-all duration-300 fixed inset-0 z-[70] bg-gray-900 dark:bg-oblue-900 bg-opacity-50 dark:bg-opacity-40' : isFirstModelButtonClicked === true, ' transition-all duration-300 fixed inset-0 z-[-10] bg-gray-900 dark:bg-oblue-900 bg-opacity-0 dark:bg-opacity-0' : isFirstModelButtonClicked === false }"
+:class="{ 'transition-all duration-300 fixed inset-0 z-[70] backdrop-blur-sm bg-gray-900 dark:bg-oblue-900 bg-opacity-50 dark:bg-opacity-40' : isFirstModelButtonClicked === true, ' transition-all duration-300 fixed inset-0 z-[-10] bg-gray-900 dark:bg-oblue-900 bg-opacity-0 dark:bg-opacity-0' : isFirstModelButtonClicked === false }"
 ></div>
 </body>
 </html>
diff --git a/resources/views/livewire/admin/menu.blade.php b/resources/views/livewire/admin/menu.blade.php
index a68ae4d..4ee3fcf 100644
--- a/resources/views/livewire/admin/menu.blade.php
+++ b/resources/views/livewire/admin/menu.blade.php
@@ -4,10 +4,20 @@
     @livewire('layout.sidebar')
     @livewire('layout.header',['header'=>$pageHeader])
 
-    <!-- Page Content -->
+    <!-- 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">
 
-<x-item.modal buttonName="Create" type="add" modalHeader="Create Menu"></x-item.modal>
+                <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
new file mode 100644
index 0000000..c4ddadd
--- /dev/null
+++ b/resources/views/livewire/admin/menu/level.blade.php
@@ -0,0 +1,19 @@
+<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="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="Add"></x-item.form-submit>
+            </x-item.form>
+        </x-item.modal>
+    </x-layout.content>
+</div>
diff --git a/resources/views/livewire/layout/header.blade.php b/resources/views/livewire/layout/header.blade.php
index afd997e..07e9826 100644
--- a/resources/views/livewire/layout/header.blade.php
+++ b/resources/views/livewire/layout/header.blade.php
@@ -1,4 +1,3 @@
-<!-- Page Heading -->
     <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">
         <div class="max-w-7xl mx-0 py-6 px-4 sm:px-6 lg:px-8">
             {{ $header }}
diff --git a/resources/views/livewire/layout/navigation-toggle.blade.php b/resources/views/livewire/layout/navigation-toggle.blade.php
index 4d20ea5..25ac9aa 100644
--- a/resources/views/livewire/layout/navigation-toggle.blade.php
+++ b/resources/views/livewire/layout/navigation-toggle.blade.php
@@ -1,38 +1,3 @@
-{{--<div>--}}
-{{--    <!-- Sidebar Toggle -->--}}
-{{--    <div class="sticky top-[59px] !h-[58px] inset-x-0 z-20 bg-white border-y px-4 sm:px-6 sm:top-[71px] md:px-8 lg:hidden dark:bg-oblue-600 dark:border-oblue-100">--}}
-{{--        <div class="flex items-center py-4">--}}
-{{--            <!-- Navigation Toggle -->--}}
-{{--            <button type="button" class="text-slate-500 hover:text-slate-600" data-hs-overlay="#docs-sidebar" aria-controls="docs-sidebar" aria-label="Toggle navigation">--}}
-{{--                <span class="sr-only">Toggle Navigation</span>--}}
-{{--                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-black dark:text-gray-400">--}}
-{{--                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />--}}
-{{--                </svg>--}}
-
-{{--            </button>--}}
-{{--            <!-- End Navigation Toggle -->--}}
-
-{{--            <!-- Breadcrumb -->--}}
-{{--            <ol class="ml-3  flex items-center whitespace-nowrap min-w-0" aria-label="Breadcrumb">--}}
-{{--                <li class="flex items-center text-sm text-slate-800 dark:text-slate-400">--}}
-{{--                    OMJ--}}
-{{--                    <svg class="flex-shrink-0 mx-3 overflow-visible h-2.5 w-2.5 text-slate-400 dark:text-slate-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">--}}
-{{--                        <path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />--}}
-{{--                    </svg>--}}
-{{--                </li>--}}
-{{--                <li class="text-sm font-semibold text-slate-800 truncate dark:text-slate-400" aria-current="page">--}}
-{{--                    Dashboard--}}
-{{--                </li>--}}
-{{--            </ol>--}}
-{{--            <!-- End Breadcrumb -->--}}
-{{--        </div>--}}
-{{--    </div>--}}
-{{--    <!-- End Sidebar Toggle -->--}}
-{{--</div>--}}
-
-
-
-
 <div>
     <div  class="sticky top-[59px] !h-[58px] inset-x-0 z-20  border-y px-4 sm:px-6 sm:top-[71px] md:px-8 lg:hidden dark:border-oblue-100">
         <div class="flex items-center py-4">
@@ -61,5 +26,4 @@
         </div>
     </div>
     <!-- End Sidebar Toggle -->
-
 </div>
diff --git a/resources/views/livewire/layout/navigation.blade.php b/resources/views/livewire/layout/navigation.blade.php
index 0f234a7..643c640 100644
--- a/resources/views/livewire/layout/navigation.blade.php
+++ b/resources/views/livewire/layout/navigation.blade.php
@@ -1,3 +1,24 @@
+<header
+    class=" !h-[70px]  top-0 inset-x-0 flex flex-wrap sm:justify-start xs:flex-nowrap z-[48] w-full text-sm py-2.5 sm:py-4 lg:pl-64 dark:border-oblue-100">
+    <nav class="flex basis-full items-center w-full mx-auto px-4 sm:px-6 md:px-8" aria-label="Global">
+
+        {{--     ------- Logo on Sidebar  --------        --}}
+        <x-layout.navigation-logo-on-sidebar></x-layout.navigation-logo-on-sidebar>
+
+        <div class="w-full flex items-center justify-end ml-auto sm:justify-between sm:gap-x-3 sm:order-3">
+            <div class="flex flex-row w-full items-center justify-end gap-2">
+
+                {{--     ------- Darkmode  --------        --}}
+                <x-layout.navigation-darkmode-toggle></x-layout.navigation-darkmode-toggle>
+
+                {{--     ------- Dropdown Right  --------        --}}
+                <x-layout.navigation-dropdown-right></x-layout.navigation-dropdown-right>
+
+            </div>
+        </div>
+    </nav>
+</header>
+
 {{--<nav x-data="{ open: false }" class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-oblue-400">--}}
 {{--    <!-- Primary Navigation Menu -->--}}
 {{--    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">--}}
@@ -261,28 +282,3 @@
 {{--        </div>--}}
 {{--    </div>--}}
 {{--</nav>--}}
-
-
-
-<!-- ========== HEADER ========== -->
-<header
-    class=" !h-[70px]  top-0 inset-x-0 flex flex-wrap sm:justify-start xs:flex-nowrap z-[48] w-full text-sm py-2.5 sm:py-4 lg:pl-64 dark:border-oblue-100">
-    <nav class="flex basis-full items-center w-full mx-auto px-4 sm:px-6 md:px-8" aria-label="Global">
-
-        {{--     ------- Logo on Sidebar  --------        --}}
-        <x-layout.navigation-logo-on-sidebar></x-layout.navigation-logo-on-sidebar>
-
-        <div class="w-full flex items-center justify-end ml-auto sm:justify-between sm:gap-x-3 sm:order-3">
-            <div class="flex flex-row w-full items-center justify-end gap-2">
-
-                {{--     ------- Darkmode  --------        --}}
-                <x-layout.navigation-darkmode-toggle></x-layout.navigation-darkmode-toggle>
-
-                {{--     ------- Dropdown Right  --------        --}}
-                <x-layout.navigation-dropdown-right></x-layout.navigation-dropdown-right>
-
-            </div>
-        </div>
-    </nav>
-</header>
-<!-- ========== END HEADER ========== -->
diff --git a/resources/views/livewire/layout/sidebar.blade.php b/resources/views/livewire/layout/sidebar.blade.php
index 9475c95..2e41aa1 100644
--- a/resources/views/livewire/layout/sidebar.blade.php
+++ b/resources/views/livewire/layout/sidebar.blade.php
@@ -25,6 +25,7 @@ class="flex flex-col justify-center items-center px-6 xs:!h-[128px] lg:!h-[146px
 
             <x-layout.sidebar.child-one :name="'Dashboard'"  href="{{ (Auth::guard('admin')->check() && explode('.',Route::currentRouteName())[0] ==='admin') ? route('admin.dashboard') : route('dashboard') }}"></x-layout.sidebar.child-one>
             <x-layout.sidebar.child-one :name="'Menu'"  href="{{route('admin.menu')}}"></x-layout.sidebar.child-one>
+            <x-layout.sidebar.child-one :name="'Menu Level'"  href="{{route('admin.menu-level')}}"></x-layout.sidebar.child-one>
 
 
 
diff --git a/routes/admin.php b/routes/admin.php
index 6d14de7..efb86f7 100644
--- a/routes/admin.php
+++ b/routes/admin.php
@@ -57,7 +57,10 @@
         Route::get('/dashboard', \App\Http\Livewire\Admin\Dashboard::class)->name('dashboard');
 
         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-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');
         Route::post('/admin/two-factor-authentication', [TwoFactorAuthenticationController::class, 'store'])->name('two-factor.enable');