diff --git a/.env.example b/.env.example
index 418babf..d5aa43a 100644
--- a/.env.example
+++ b/.env.example
@@ -3,7 +3,7 @@ APP_ENV=local
 APP_KEY=
 APP_DEBUG=true
 APP_TIMEZONE=Asia/Taipei
-APP_URL=https://shop_12.test
+APP_URL=https://community-management.test
 
 APP_LOCALE=zh-TW
 APP_FALLBACK_LOCALE=zh-TW
diff --git a/app/Http/Controllers/Controller.php b/app/Http/Controllers/Controller.php
index 8677cd5..858c1b1 100644
--- a/app/Http/Controllers/Controller.php
+++ b/app/Http/Controllers/Controller.php
@@ -2,7 +2,12 @@
 
 namespace App\Http\Controllers;
 
-abstract class Controller
+use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
+use Illuminate\Foundation\Bus\DispatchesJobs;
+use Illuminate\Foundation\Validation\ValidatesRequests;
+use Illuminate\Routing\Controller as BaseController;
+
+class Controller extends BaseController
 {
-    //
-}
+    use AuthorizesRequests, DispatchesJobs, ValidatesRequests;
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/ProductController.php b/app/Http/Controllers/ProductController.php
index 1c8d89a..049a78c 100644
--- a/app/Http/Controllers/ProductController.php
+++ b/app/Http/Controllers/ProductController.php
@@ -2,6 +2,7 @@
     
 namespace App\Http\Controllers;
     
+use App\Http\Controllers\Controller;
 use App\Models\Product;
 use Illuminate\Http\Request;
 use Illuminate\View\View;
diff --git a/app/Http/Controllers/UserController.php b/app/Http/Controllers/UserController.php
index ef471f5..fc70f3d 100644
--- a/app/Http/Controllers/UserController.php
+++ b/app/Http/Controllers/UserController.php
@@ -50,7 +50,7 @@ class UserController extends Controller
         $this->validate($request, [
             'name' => 'required',
             'email' => 'required|email|unique:users,email',
-            'password' => 'required|same:confirm-password',
+            'password' => 'required|same:confirm_password',
             'roles' => 'required'
         ]);
     
diff --git a/resources/views/livewire/layout/navigation.blade.php b/resources/views/livewire/layout/navigation.blade.php
index 6f62113..89ee680 100644
--- a/resources/views/livewire/layout/navigation.blade.php
+++ b/resources/views/livewire/layout/navigation.blade.php
@@ -33,6 +33,15 @@ new class extends Component
                     <x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')" wire:navigate>
                         {{ __('Dashboard') }}
                     </x-nav-link>
+                    <x-nav-link :href="route('users.index')" :active="request()->routeIs('users.index')" wire:navigate>
+                        {{ __('Manage Users') }}
+                    </x-nav-link>
+                    <x-nav-link :href="route('roles.index')" :active="request()->routeIs('roles.index')" wire:navigate>
+                        {{ __('Manage Role') }}
+                    </x-nav-link>
+                    <x-nav-link :href="route('products.index')" :active="request()->routeIs('products.index')" wire:navigate>
+                        {{ __('Manage Product') }}
+                    </x-nav-link>
                 </div>
             </div>
 
diff --git a/resources/views/products/create.blade.php b/resources/views/products/create.blade.php
new file mode 100644
index 0000000..4fa787a
--- /dev/null
+++ b/resources/views/products/create.blade.php
@@ -0,0 +1,41 @@
+<x-app-layout>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            {{ __('Create New Product') }}
+        </h2>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6">
+                
+                @if ($errors->any())
+                    <div class="alert alert-danger">
+                        <strong>{{ __('Whoops!') }}</strong> {{ __('There were some problems with your input.') }}<br><br>
+                        <ul>
+                            @foreach ($errors->all() as $error)
+                                <li>{{ $error }}</li>
+                            @endforeach
+                        </ul>
+                    </div>
+                @endif
+
+                <div class="mb-4">
+                    <x-bladewind.button tag="a" href="{{ route('products.index') }}"  color="blue" icon="arrow-left" >{{__('Back')}}</x-bladewind.button>
+                </div>
+                
+                
+                <form method="POST" action="{{ route('products.store') }}">
+                    @csrf
+                    <x-bladewind::input name="name" label="{{ __('Name') }}:" placeholder="Name"  required="true" />
+                    <x-bladewind::textarea name="detail" label="{{ __('Detail') }}:" placeholder="Detail"  required="true" />
+                    
+                    
+                    <div class="mt-6 text-center">
+                        <x-bladewind.button can_submit="true" color="blue" icon="pencil-square" >{{__('Submit')}}</x-bladewind.button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</x-app-layout>
diff --git a/resources/views/products/edit.blade.php b/resources/views/products/edit.blade.php
new file mode 100644
index 0000000..d75c728
--- /dev/null
+++ b/resources/views/products/edit.blade.php
@@ -0,0 +1,40 @@
+<x-app-layout>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            {{ __('Edit Product') }}
+        </h2>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6">
+                
+                @if (count($errors) > 0)
+                    <div class="mb-4 text-red-600">
+                        <strong>Whoops!</strong> There were some problems with your input.<br><br>
+                        <ul>
+                            @foreach ($errors->all() as $error)
+                                <li>{{ $error }}</li>
+                            @endforeach
+                        </ul>
+                    </div>
+                @endif
+
+                <div class="mb-4">
+                    <x-bladewind.button tag="a" href="{{ route('products.index') }}"  color="blue" icon="arrow-left" >{{__('Back')}}</x-bladewind.button>
+                </div>
+
+
+                <form method="POST" action="{{ route('products.update',$product->id) }}">
+                    @csrf
+                    @method('PUT')
+                    <x-bladewind::input name="name" label="{{__('Name')}}:" placeholder="Name" value="{{ $product->name }}"/>
+                    <x-bladewind::textarea name="detail" label="{{__('Detail')}}:" placeholder="Detail" :selected_value="old('detail',  $product ->detail)" ></x-bladewind::textarea>
+                    <div class="mt-6 text-center">
+                        <x-bladewind.button can_submit="true" color="blue" icon="pencil-square" >{{__('Submit')}}</x-bladewind.button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</x-app-layout>
diff --git a/resources/views/products/index.blade.php b/resources/views/products/index.blade.php
new file mode 100644
index 0000000..d38ef27
--- /dev/null
+++ b/resources/views/products/index.blade.php
@@ -0,0 +1,55 @@
+<x-app-layout>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            {{ __('Products Management') }}
+        </h2>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6">
+                @if(session('message'))
+                    <x-bladewind::alert type="{{ session('type') }}">{{ session('message') }}</x-bladewind::alert>
+                @endif
+                <div class="mb-4 flex justify-between">
+                    <h2 class="text-lg font-semibold">{{__('Products List')}}</h2>
+                    @can('product-create')
+                        <x-bladewind.button tag="a" href="{{ route('products.create') }}" color="green" icon="plus-small" >{{__('Create New Product')}}</x-bladewind.button>
+                    @endcan
+                </div>
+                <x-bladewind.table divider="thin" has_shadow="true" celled="true">
+                    <x-slot name="header">
+                        <th>{{__('No')}}</th>
+                        <th>{{__('Name')}}</th>
+                        <th>{{__('Details')}}</th>
+                        <th>{{__('Action')}}</th>
+                    </x-slot>
+                    @foreach ($products as $key => $product)
+                        <tr >
+                            <td >{{ ++$i }}</td>
+                            <td >{{ $product->name }}</td>
+                            <td >{{ $product->detail }}</td>
+                            <td >
+                                <x-bladewind.button tag="a" href="{{ route('products.show',$product->id) }}" size="tiny" color="cyan" icon="list-bullet" >{{__('Show')}}</x-bladewind.button>
+                                @can('product-edit')
+                                    <x-bladewind.button tag="a" href="{{ route('products.edit',$product->id) }}" size="tiny" color="yellow" icon="pencil-square" >{{__('Edit')}}</x-bladewind.button>
+                                @endcan
+                                @can('product-delete')
+                                    <form method="POST" action="{{ route('products.destroy',$product->id) }}" class="inline" onsubmit="return confirm('Are you sure?');">
+                                        @csrf
+                                        @method('DELETE')
+                                        <x-bladewind.button can_submit="true"  size="tiny" color="red" icon="trash" >{{__('Delete')}}</x-bladewind.button>
+                                    </form>
+                                @endcan
+                            </td>
+                        </tr>
+                    @endforeach
+                </x-bladewind.table>
+
+                <div class="mt-4">
+                    {!! $products->links('pagination::tailwind') !!}
+                </div>
+            </div>
+        </div>
+    </div>
+</x-app-layout>
diff --git a/resources/views/products/show.blade.php b/resources/views/products/show.blade.php
new file mode 100644
index 0000000..99ba33b
--- /dev/null
+++ b/resources/views/products/show.blade.php
@@ -0,0 +1,33 @@
+<x-app-layout>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            {{ __('Show Product') }}
+        </h2>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6">
+                <div class="mb-4">
+                    <x-bladewind.button tag="a" href="{{ route('products.index') }}"  color="blue" icon="arrow-left" >{{__('Back')}}</x-bladewind.button>
+                </div>
+                <x-bladewind::card title="Role Details">
+                    <x-bladewind::list-view>
+                        <x-bladewind::list-item>
+                            <label class="block font-medium text-gray-700 dark:text-gray-300">{{__('Name')}}:</label>
+                            <x-bladewind::alert color="blue" show-close-icon="false">
+                            {{ $product->name }}
+                            </x-bladewind::alert>
+                        </x-bladewind::list-item>
+                        <x-bladewind::list-item>
+                            <label class="block font-medium text-gray-700 dark:text-gray-300">{{__('Details')}}:</label>
+                            <x-bladewind::alert color="blue" show-close-icon="false">
+                                {{ $product->detail }}
+                            </x-bladewind::alert>
+                        </x-bladewind::list-item>
+                    </x-bladewind::list-view>
+                </x-bladewind::card>
+            </div>
+        </div>
+    </div>
+</x-app-layout>
diff --git a/resources/views/roles/create.blade.php b/resources/views/roles/create.blade.php
new file mode 100644
index 0000000..df7c877
--- /dev/null
+++ b/resources/views/roles/create.blade.php
@@ -0,0 +1,48 @@
+<x-app-layout>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            {{ __('Create New Role') }}
+        </h2>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6">
+                
+                @if ($errors->any())
+                    <div class="alert alert-danger">
+                        <strong>{{ __('Whoops!') }}</strong> {{ __('There were some problems with your input.') }}<br><br>
+                        <ul>
+                            @foreach ($errors->all() as $error)
+                                <li>{{ $error }}</li>
+                            @endforeach
+                        </ul>
+                    </div>
+                @endif
+                <div class="mb-4">
+                    <x-bladewind.button tag="a" href="{{ route('roles.index') }}"  color="blue" icon="arrow-left" >{{__('Back')}}</x-bladewind.button>
+                </div>
+                <form method="POST" action="{{ route('roles.store') }}">
+                    @csrf
+                    <x-bladewind::input name="name" label="{{__('Name')}}:" placeholder="Name"  required="true" />
+                    
+                    <div class="mb-4">
+                        <label class="block font-medium text-sm text-gray-700 dark:text-gray-300">{{ __('Permission') }}:</label>
+                        <div class="mt-2 space-y-2">
+                            @foreach($permission as $value)
+                                <label class="inline-flex items-center">
+                                    <input type="checkbox" name="permission[{{$value->id}}]" value="{{$value->id}}" class="form-checkbox">
+                                    <span class="ml-2 text-gray-700 dark:text-gray-300">{{ $value->name }}</span>
+                                </label>
+                            @endforeach
+                        </div>
+                    </div>
+                    
+                    <div class="mt-6 text-center">
+                        <x-bladewind.button can_submit="true" color="blue" icon="pencil-square" >{{__('Submit')}}</x-bladewind.button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</x-app-layout>
diff --git a/resources/views/roles/edit.blade.php b/resources/views/roles/edit.blade.php
new file mode 100644
index 0000000..041db21
--- /dev/null
+++ b/resources/views/roles/edit.blade.php
@@ -0,0 +1,49 @@
+<x-app-layout>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            {{ __('Edit Role') }}
+        </h2>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6">
+                @if (count($errors) > 0)
+                    <div class="mb-4 text-red-600">
+                        <strong>Whoops!</strong> There were some problems with your input.<br><br>
+                        <ul>
+                            @foreach ($errors->all() as $error)
+                                <li>{{ $error }}</li>
+                            @endforeach
+                        </ul>
+                    </div>
+                @endif
+                <div class="mb-4">
+                    <x-bladewind.button tag="a" href="{{ route('roles.index') }}"  color="blue" icon="arrow-left" >{{__('Back')}}</x-bladewind.button>
+                </div>
+
+                <form method="POST" action="{{ route('roles.update', $role->id) }}">
+                    @csrf
+                    @method('PUT')
+                    <x-bladewind::input name="name" label="{{__('Name')}}:" placeholder="Name" value="{{ $role->name }}"/>
+                    
+                    <div class="mb-4">
+                        <label class="block text-gray-700 dark:text-gray-300 font-bold mb-2">{{__('Permission')}}:</label>
+                        <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
+                            @foreach($permission as $value)
+                                <label class="inline-flex items-center">
+                                    <input type="checkbox" name="permission[{{$value->id}}]" value="{{$value->id}}" class="form-checkbox text-blue-500" {{ in_array($value->id, $rolePermissions) ? 'checked' : ''}}>
+                                    <span class="ml-2 text-gray-700 dark:text-gray-300">{{ $value->name }}</span>
+                                </label>
+                            @endforeach
+                        </div>
+                    </div>
+                    
+                    <div class="mt-6 text-center">
+                        <x-bladewind.button can_submit="true" color="blue" icon="pencil-square" >{{__('Submit')}}</x-bladewind.button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</x-app-layout>
\ No newline at end of file
diff --git a/resources/views/roles/index.blade.php b/resources/views/roles/index.blade.php
new file mode 100644
index 0000000..cbee4bb
--- /dev/null
+++ b/resources/views/roles/index.blade.php
@@ -0,0 +1,54 @@
+<x-app-layout>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            {{ __('Role Management') }}
+        </h2>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6">
+                @if(session('message'))
+                    <x-bladewind::alert type="{{ session('type') }}">{{ session('message') }}</x-bladewind::alert>
+                @endif
+
+                <div class="mb-4 flex justify-between">
+                    <h2 class="text-lg font-semibold">{{__('Role List')}}</h2>
+                    @can('role-create')
+                        <x-bladewind.button tag="a" href="{{ route('roles.create') }}" color="green" icon="plus-small" >{{__('Create New Role')}}</x-bladewind.button>
+                    @endcan
+                </div>
+                <x-bladewind.table divider="thin" has_shadow="true" celled="true">
+                    <x-slot name="header">
+                        <th>{{__('No')}}</th>
+                        <th>{{__('Name')}}</th>
+                        <th>{{__('Action')}}</th>
+                    </x-slot>
+                    @foreach ($roles as $key => $role)
+                        <tr >
+                            <td >{{ ++$i }}</td>
+                            <td >{{ $role->name }}</td>
+                            <td >
+                                <x-bladewind.button tag="a" href="{{ route('roles.show',$role->id) }}" size="tiny" color="cyan" icon="list-bullet" >{{__('Show')}}</x-bladewind.button>
+                                @can('role-edit')
+                                    <x-bladewind.button tag="a" href="{{ route('roles.edit',$role->id) }}" size="tiny" color="yellow" icon="pencil-square" >{{__('Edit')}}</x-bladewind.button>
+                                @endcan
+                                @can('role-delete')
+                                    <form method="POST" action="{{ route('roles.destroy', $role->id) }}" class="inline" onsubmit="return confirm('Are you sure?');">
+                                        @csrf
+                                        @method('DELETE')
+                                        <x-bladewind.button can_submit="true"  size="tiny" color="red" icon="trash" >{{__('Delete')}}</x-bladewind.button>
+                                    </form>
+                                @endcan
+                            </td>
+                        </tr>
+                    @endforeach
+                </x-bladewind.table>
+
+                <div class="mt-4">
+                    {!! $roles->links('pagination::tailwind') !!}
+                </div>
+            </div>
+        </div>
+    </div>
+</x-app-layout>
diff --git a/resources/views/roles/show.blade.php b/resources/views/roles/show.blade.php
new file mode 100644
index 0000000..57f23a1
--- /dev/null
+++ b/resources/views/roles/show.blade.php
@@ -0,0 +1,42 @@
+<x-app-layout>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            {{ __('Show Role') }}
+        </h2>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6">
+                <div class="mb-4">
+                    <x-bladewind.button tag="a" href="{{ route('roles.index') }}"  color="blue" icon="arrow-left" >{{__('Back')}}</x-bladewind.button>
+                </div>
+                
+                <x-bladewind::card title="Role Details">
+                    <x-bladewind::list-view>
+                        <x-bladewind::list-item>
+                            <label class="block font-medium text-gray-700 dark:text-gray-300">{{__('Name')}}:</label>
+                            <x-bladewind::alert color="blue" show-close-icon="false">
+                            {{ $role->name }}
+                            </x-bladewind::alert>
+                        </x-bladewind::list-item>
+                        <x-bladewind::list-item>
+                            <label class="block font-medium text-gray-700 dark:text-gray-300">{{__('Permissions')}}:</label>
+                            <div class="flex flex-wrap gap-2 mt-1">
+                            @forelse($rolePermissions as $v)
+                                <x-bladewind::alert color="blue" show-close-icon="false">
+                                    {{ $v->name }}
+                                </x-bladewind::alert>
+                            @empty
+                                <x-bladewind::alert type="Warning" show-close-icon="false">
+                                    {{__('No permission information')}}
+                                </x-bladewind::alert>
+                            @endforelse
+                            </div>
+                        </x-bladewind::list-item>
+                    </x-bladewind::list-view>
+                </x-bladewind::card>
+            </div>
+        </div>
+    </div>
+</x-app-layout>
diff --git a/resources/views/users/create.blade.php b/resources/views/users/create.blade.php
new file mode 100644
index 0000000..b6c3a65
--- /dev/null
+++ b/resources/views/users/create.blade.php
@@ -0,0 +1,46 @@
+<x-app-layout>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            {{ __('Create New User') }}
+        </h2>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6">
+                @if ($errors->any())
+                    <div class="mb-4 p-4 bg-red-500 text-white rounded-lg">
+                        <strong>Whoops!</strong> There were some problems with your input.<br><br>
+                        <ul class="list-disc pl-5">
+                            @foreach ($errors->all() as $error)
+                                <li>{{ $error }}</li>
+                            @endforeach
+                        </ul>
+                    </div>
+                @endif
+                <div class="mb-4">
+                    <x-bladewind.button tag="a" href="{{ route('users.index') }}"  color="blue" icon="arrow-left" >{{__('Back')}}</x-bladewind.button>
+                </div>
+                <form method="POST" action="{{ route('users.store') }}">
+                    @csrf
+                    <x-bladewind::input name="name" label="{{__('Name')}}:" placeholder="Name"  required="true" />
+                    <x-bladewind::input type="email" name="email" label="{{__('Email')}}:" placeholder="Email"  required="true" />
+                    <x-bladewind::input type="password" name="password" label="{{__('Password')}}:" placeholder="Password"  required="true" />
+                    <x-bladewind::input type="password" name="confirm_password" label="{{__('Confirm Password')}}:" placeholder="Confirm Password"  required="true" />
+                    <div class="mt-4">
+                        <label class="block font-medium text-gray-700 dark:text-gray-300">{{__('Role')}}:</label>
+                        <select name="roles[]" class="w-full p-2 border border-gray-300 rounded" multiple>
+                            @foreach ($roles as $value => $label)
+                                <option value="{{ $value }}">{{ $label }}</option>
+                            @endforeach
+                        </select>
+                    </div>
+                    
+                    <div class="mt-6 text-center">
+                        <x-bladewind.button can_submit="true" color="blue" icon="pencil-square" >{{__('Submit')}}</x-bladewind.button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</x-app-layout>
diff --git a/resources/views/users/edit.blade.php b/resources/views/users/edit.blade.php
new file mode 100644
index 0000000..60c1870
--- /dev/null
+++ b/resources/views/users/edit.blade.php
@@ -0,0 +1,51 @@
+<x-app-layout>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            {{ __('Edit User') }}
+        </h2>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6">
+                @if ($errors->any())
+                    <div class="mb-4 p-4 bg-red-500 text-white rounded-lg">
+                        <strong>Whoops!</strong> There were some problems with your input.<br><br>
+                        <ul class="list-disc pl-5">
+                            @foreach ($errors->all() as $error)
+                                <li>{{ $error }}</li>
+                            @endforeach
+                        </ul>
+                    </div>
+                @endif
+                <div class="mb-4">
+                    <x-bladewind.button tag="a" href="{{ route('users.index') }}"  color="blue" icon="arrow-left" >{{__('Back')}}</x-bladewind.button>
+                </div>
+
+                <form method="POST" action="{{ route('users.update', $user->id) }}">
+                    @csrf
+                    @method('PUT')
+                    <x-bladewind::input name="name" label="{{__('Name')}}:" placeholder="Name" value="{{ $user->name }}"/>
+                    <x-bladewind::input type="email" name="email" label="{{__('Email')}}:" placeholder="Email" value="{{ $user->email }}"/>
+                    <x-bladewind::input type="password" name="password" label="{{__('Password')}}:" placeholder="Password"/>
+                    <x-bladewind::input type="password" name="confirm_password" label="{{__('Confirm Password')}}:" placeholder="Confirm Password" />
+                    
+                    <div class="mt-4">
+                        <label class="block font-medium text-gray-700 dark:text-gray-300">{{__('Role')}}:</label>
+                        <select name="roles[]" class="w-full p-2 border border-gray-300 rounded" multiple>
+                            @foreach ($roles as $value => $label)
+                                <option value="{{ $value }}" {{ in_array($value, $userRole) ? 'selected' : '' }}>
+                                    {{ $label }}
+                                </option>
+                            @endforeach
+                        </select>
+                    </div>
+
+                    <div class="mt-6 text-center">
+                        <x-bladewind.button can_submit="true" color="blue" icon="pencil-square" >{{__('Submit')}}</x-bladewind.button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</x-app-layout>
\ No newline at end of file
diff --git a/resources/views/users/index.blade.php b/resources/views/users/index.blade.php
new file mode 100644
index 0000000..4d58956
--- /dev/null
+++ b/resources/views/users/index.blade.php
@@ -0,0 +1,58 @@
+<x-app-layout>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            {{ __('Users Management') }}
+        </h2>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6">
+                @if(session('message'))
+                    <x-bladewind::alert type="{{ session('type') }}">{{ session('message') }}</x-bladewind::alert>
+                @endif
+                
+                <div class="flex justify-between mb-4">
+                    <h2 class="text-lg font-semibold">{{__('User List')}}</h2>
+                    <x-bladewind.button tag="a" href="{{ route('users.create') }}" color="green" icon="plus-small" >{{__('Create New User')}}</x-bladewind.button>
+                </div>
+
+                <x-bladewind.table divider="thin" has_shadow="true">
+                    <x-slot name="header">
+                        <th>{{__('No')}}</th>
+                        <th>{{__('Name')}}</th>
+                        <th>{{__('Email')}}</th>
+                        <th>{{__('Roles')}}</th>
+                        <th>{{__('Action')}}</th>
+                    </x-slot>
+                    @foreach ($data as $key => $user)
+                        <tr >
+                            <td >{{ ++$i }}</td>
+                            <td >{{ $user->name }}</td>
+                            <td >{{ $user->email }}</td>
+                            <td >
+                                @if(!empty($user->getRoleNames()))
+                                    @foreach($user->getRoleNames() as $v)
+                                        <span class="bg-green-500 text-white px-2 py-2 rounded">{{ $v }}</span>
+                                    @endforeach
+                                @endif
+                            </td>
+                            <td >
+                                <x-bladewind.button tag="a" href="{{ route('users.show',$user->id) }}" size="tiny" color="cyan" icon="list-bullet" >{{__('Show')}}</x-bladewind.button>
+                                <x-bladewind.button tag="a" href="{{route('users.edit',$user->id)}}" size="tiny" color="yellow" icon="pencil-square" >{{__('Edit')}}</x-bladewind.button>
+                                <form method="POST" action="{{ route('users.destroy', $user->id) }}" class="inline" onsubmit="return confirm('Are you sure?');">
+                                    @csrf
+                                    @method('DELETE')
+                                    <x-bladewind.button can_submit="true"  size="tiny" color="red" icon="trash" >{{__('Delete')}}</x-bladewind.button>
+                                </form>
+                            </td>
+                        </tr>
+                    @endforeach
+                </x-bladewind.table>
+                <div class="mt-4">
+                    {!! $data->links('pagination::tailwind') !!}
+                </div>
+            </div>
+        </div>
+    </div>
+</x-app-layout>
\ No newline at end of file
diff --git a/resources/views/users/show.blade.php b/resources/views/users/show.blade.php
new file mode 100644
index 0000000..9619c36
--- /dev/null
+++ b/resources/views/users/show.blade.php
@@ -0,0 +1,44 @@
+<x-app-layout>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            {{ __('Show User') }}
+        </h2>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6">
+                <div class="mb-4">
+                    <x-bladewind.button tag="a" href="{{ route('users.index') }}"  color="blue" icon="arrow-left" >{{__('Back')}}</x-bladewind.button>
+                </div>
+                <x-bladewind::card title="User Details">
+                    <x-bladewind::list-view>
+                        <x-bladewind::list-item>
+                            <label class="block font-medium text-gray-700 dark:text-gray-300">{{__('Name')}}:</label>
+                            <x-bladewind::alert color="blue" show-close-icon="false">
+                                {{ $user->name }}
+                            </x-bladewind::alert>
+                        </x-bladewind::list-item>
+                        <x-bladewind::list-item>
+                            <label class="block font-medium text-gray-700 dark:text-gray-300">{{__('Email')}}:</label>
+                            <x-bladewind::alert color="blue" show-close-icon="false">
+                                {{ $user->email }}
+                            </x-bladewind::alert>
+                        </x-bladewind::list-item>
+                        <x-bladewind::list-item>
+                            <label class="block font-medium text-gray-700 dark:text-gray-300">{{__('Roles')}}:</label>
+                            
+                            @if(!empty($user->getRoleNames()))
+                                @foreach($user->getRoleNames() as $v)
+                                <x-bladewind::alert color="blue" show-close-icon="false">
+                                {{ $v }}
+                                </x-bladewind::alert>
+                                @endforeach
+                            @endif
+                        </x-bladewind::list-item>
+                    </x-bladewind::list-view>
+                </x-bladewind::card>
+            </div>
+        </div>
+    </div>
+</x-app-layout>
diff --git a/routes/web.php b/routes/web.php
index e9d9868..54caa91 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,7 +1,7 @@
 <?php
 
 use Illuminate\Support\Facades\Route;
-use App\Http\Controllers\HomeController;
+//use App\Http\Controllers\HomeController;
 use App\Http\Controllers\RoleController;
 use App\Http\Controllers\UserController;
 use App\Http\Controllers\ProductController;
@@ -18,6 +18,12 @@ Route::view('profile', 'profile')
 
 require __DIR__.'/auth.php';
 
+Route::post('/logout', function () {
+    Auth::logout();
+    request()->session()->invalidate();
+    request()->session()->regenerateToken();
+    return redirect('/');
+})->name('logout');
 Route::get('/home', [HomeController::class, 'index'])->name('home');
   
 Route::group(['middleware' => ['auth']], function() {