diff --git a/app/Filament/App/Resources/FamilyResource.php b/app/Filament/App/Resources/FamilyResource.php
index 35910a88c..78f743bf6 100644
--- a/app/Filament/App/Resources/FamilyResource.php
+++ b/app/Filament/App/Resources/FamilyResource.php
@@ -3,9 +3,12 @@
 namespace App\Filament\App\Resources;
 
 use Override;
+use Filament\Forms\Components\Section;
 use Filament\Forms\Components\Textarea;
 use Filament\Forms\Components\TextInput;
+use Filament\Forms\Components\Toggle;
 use Filament\Tables\Columns\TextColumn;
+use Filament\Tables\Columns\IconColumn;
 use Filament\Actions\EditAction;
 use Filament\Actions\BulkActionGroup;
 use Filament\Actions\DeleteBulkAction;
@@ -38,23 +41,48 @@ public static function form(Schema $schema): Schema
     {
         return $schema
             ->components([
-                Textarea::make('description')
-                ->maxLength(65535)
-                ->columnSpanFull(),
-                TextInput::make('is_active')
-                    ->numeric(),
-                TextInput::make('type_id')
-                    ->numeric(),
-                TextInput::make('husband_id')
-                    ->numeric(),
-                TextInput::make('wife_id')
-                    ->numeric(),
-                TextInput::make('chan')
-                    ->maxLength(255),
-                TextInput::make('nchi')
-                    ->maxLength(255),
-                TextInput::make('rin')
-                    ->maxLength(255),
+                Section::make('Family Members')
+                    ->description('Identify the husband and wife in this family unit')
+                    ->icon('heroicon-o-users')
+                    ->columns(2)
+                    ->schema([
+                        TextInput::make('husband_id')
+                            ->label('Husband ID')
+                            ->numeric(),
+                        TextInput::make('wife_id')
+                            ->label('Wife ID')
+                            ->numeric(),
+                        TextInput::make('nchi')
+                            ->label('Number of Children')
+                            ->maxLength(255),
+                        TextInput::make('type_id')
+                            ->label('Family Type')
+                            ->numeric(),
+                        Toggle::make('is_active')
+                            ->label('Active')
+                            ->default(true),
+                    ]),
+
+                Section::make('Notes')
+                    ->icon('heroicon-o-document-text')
+                    ->schema([
+                        Textarea::make('description')
+                            ->maxLength(65535)
+                            ->columnSpanFull(),
+                    ]),
+
+                Section::make('Record References')
+                    ->icon('heroicon-o-hashtag')
+                    ->columns(2)
+                    ->collapsed()
+                    ->schema([
+                        TextInput::make('chan')
+                            ->label('Change Date')
+                            ->maxLength(255),
+                        TextInput::make('rin')
+                            ->label('RIN')
+                            ->maxLength(255),
+                    ]),
             ]);
     }
 
@@ -63,39 +91,37 @@ public static function table(Table $table): Table
     {
         return $table
             ->columns([
-                TextColumn::make('is_active')
-                ->numeric()
-                ->sortable(),
-                TextColumn::make('type_id')
-                    ->numeric()
+                TextColumn::make('id')
+                    ->label('ID')
                     ->sortable(),
                 TextColumn::make('husband_id')
+                    ->label('Husband ID')
                     ->numeric()
                     ->sortable(),
                 TextColumn::make('wife_id')
+                    ->label('Wife ID')
                     ->numeric()
                     ->sortable(),
+                TextColumn::make('nchi')
+                    ->label('Children')
+                    ->searchable(),
+                IconColumn::make('is_active')
+                    ->label('Active')
+                    ->boolean(),
                 TextColumn::make('created_at')
-                    ->dateTime()
+                    ->label('Created')
+                    ->since()
                     ->sortable()
                     ->toggleable(isToggledHiddenByDefault: true),
                 TextColumn::make('updated_at')
-                    ->dateTime()
+                    ->label('Updated')
+                    ->since()
                     ->sortable()
                     ->toggleable(isToggledHiddenByDefault: true),
-                TextColumn::make('deleted_at')
-                    ->dateTime()
-                    ->sortable()
-                    ->toggleable(isToggledHiddenByDefault: true),
-                TextColumn::make('chan')
-                    ->searchable(),
-                TextColumn::make('nchi')
-                    ->searchable(),
-                TextColumn::make('rin')
-                    ->searchable(),
             ])
             ->filters([
-                //
+                Tables\Filters\TernaryFilter::make('is_active')
+                    ->label('Active'),
             ])
             ->recordActions([
                 EditAction::make(),
diff --git a/app/Filament/App/Resources/PersonResource.php b/app/Filament/App/Resources/PersonResource.php
index c2400b0d2..470919ed2 100644
--- a/app/Filament/App/Resources/PersonResource.php
+++ b/app/Filament/App/Resources/PersonResource.php
@@ -6,6 +6,8 @@
 use Filament\Forms\Components\TextInput;
 use Filament\Forms\Components\Select;
 use Filament\Forms\Components\DateTimePicker;
+use Filament\Forms\Components\Section;
+use Filament\Forms\Components\Grid;
 use Filament\Tables\Columns\TextColumn;
 use Filament\Actions\EditAction;
 use Filament\Actions\BulkActionGroup;
@@ -46,36 +48,65 @@ public static function form(Schema $schema): Schema
     {
         return $schema
             ->components([
-                TextInput::make('givn')->label('First Name'),
-                TextInput::make('surn')->label('Last Name'),
-                Select::make('sex')
-                    ->options([
-                        'M' => 'Male',
-                        'F' => 'Female',
-                    ])
-                    ->label('Sex'),
-                TextInput::make('child_in_family_id')->label('Child In Family ID'),
-                TextInput::make('description')->label('Description'),
-                TextInput::make('titl')->label('Title'),
-                TextInput::make('name')->label('Name'),
-                TextInput::make('appellative')->label('Appellative'),
-                TextInput::make('email')->label('Email'),
-                TextInput::make('phone')->label('Phone'),
-                DateTimePicker::make('birthday')->label('Birthday'),
-                DateTimePicker::make('deathday')->label('Deathday'),
-                FileUpload::make('photo_url')
-                    ->image()
-                    ->label('Profile Photo')
-                    ->directory('people')
-                    ->disk('public'),
-                DateTimePicker::make('burial_day')->label('Burial Day'),
-                TextInput::make('bank')->label('Bank'),
-                TextInput::make('bank_account')->label('Bank Account'),
-                TextInput::make('chan')->label('Chan'),
-                TextInput::make('rin')->label('Rin'),
-                TextInput::make('resn')->label('Resn'),
-                TextInput::make('rfn')->label('Rfn'),
-                TextInput::make('afn')->label('Afn'),
+                Section::make('Basic Information')
+                    ->description('Core identity and personal details')
+                    ->icon('heroicon-o-user')
+                    ->columns(2)
+                    ->schema([
+                        FileUpload::make('photo_url')
+                            ->image()
+                            ->label('Profile Photo')
+                            ->directory('persons')
+                            ->disk('public')
+                            ->columnSpanFull(),
+                        TextInput::make('givn')->label('First Name'),
+                        TextInput::make('surn')->label('Last Name'),
+                        TextInput::make('titl')->label('Title'),
+                        TextInput::make('appellative')->label('Appellative'),
+                        TextInput::make('name')->label('Full Name'),
+                        Select::make('sex')
+                            ->options([
+                                'M' => 'Male',
+                                'F' => 'Female',
+                            ])
+                            ->label('Sex'),
+                        TextInput::make('description')->label('Description')->columnSpanFull(),
+                    ]),
+
+                Section::make('Vital Records')
+                    ->description('Birth, death, and burial information')
+                    ->icon('heroicon-o-calendar')
+                    ->columns(2)
+                    ->schema([
+                        DateTimePicker::make('birthday')->label('Date of Birth'),
+                        DateTimePicker::make('deathday')->label('Date of Death'),
+                        DateTimePicker::make('burial_day')->label('Burial Date'),
+                        TextInput::make('child_in_family_id')->label('Child in Family ID'),
+                    ]),
+
+                Section::make('Contact Information')
+                    ->description('Email and phone details')
+                    ->icon('heroicon-o-envelope')
+                    ->columns(2)
+                    ->schema([
+                        TextInput::make('email')->label('Email')->email(),
+                        TextInput::make('phone')->label('Phone'),
+                    ]),
+
+                Section::make('Record References')
+                    ->description('Genealogy record identifiers and metadata')
+                    ->icon('heroicon-o-document-text')
+                    ->columns(3)
+                    ->collapsed()
+                    ->schema([
+                        TextInput::make('rin')->label('RIN'),
+                        TextInput::make('rfn')->label('RFN'),
+                        TextInput::make('afn')->label('AFN'),
+                        TextInput::make('resn')->label('Restriction'),
+                        TextInput::make('chan')->label('Change Date'),
+                        TextInput::make('bank')->label('Bank'),
+                        TextInput::make('bank_account')->label('Bank Account'),
+                    ]),
             ]);
     }
 
@@ -84,33 +115,27 @@ public static function table(Table $table): Table
     {
         return $table
             ->columns([
-                TextColumn::make('givn')->label('First Name'),
-                TextColumn::make('surn')->label('Last Name'),
-                TextColumn::make('sex')->label('Sex'),
-                TextColumn::make('child_in_family_id')->label('Child In Family ID'),
-                TextColumn::make('description')->label('Description'),
-                TextColumn::make('titl')->label('Title'),
-                TextColumn::make('name')->label('Name'),
-                TextColumn::make('appellative')->label('Appellative'),
-                TextColumn::make('email')->label('Email'),
-                TextColumn::make('phone')->label('Phone'),
-                TextColumn::make('birthday')->label('Birthday'),
-                TextColumn::make('deathday')->label('Deathday'),
-                ImageColumn::make('photo_url')->label('Photo')->disk('public')->height(40)->width(40),
-                TextColumn::make('burial_day')->label('Burial Day'),
-                TextColumn::make('bank')->label('Bank'),
-                TextColumn::make('bank_account')->label('Bank Account'),
-                TextColumn::make('chan')->label('Chan'),
-                TextColumn::make('rin')->label('Rin'),
-                TextColumn::make('resn')->label('Resn'),
-                TextColumn::make('rfn')->label('Rfn'),
-                TextColumn::make('afn')->label('Afn'),
-                TextColumn::make('created_at')->label('Created At')->sortable(),
-                TextColumn::make('updated_at')->label('Updated At')->sortable(),
-
+                ImageColumn::make('photo_url')->label('Photo')->disk('public')->height(40)->width(40)->circular(),
+                TextColumn::make('givn')->label('First Name')->searchable()->sortable(),
+                TextColumn::make('surn')->label('Last Name')->searchable()->sortable(),
+                TextColumn::make('sex')->label('Sex')->badge()
+                    ->color(fn (string $state): string => match ($state) {
+                        'M' => 'info',
+                        'F' => 'danger',
+                        default => 'gray',
+                    }),
+                TextColumn::make('birthday')->label('Born')->date('Y')->sortable(),
+                TextColumn::make('deathday')->label('Died')->date('Y')->sortable(),
+                TextColumn::make('email')->label('Email')->toggleable(isToggledHiddenByDefault: true),
+                TextColumn::make('phone')->label('Phone')->toggleable(isToggledHiddenByDefault: true),
+                TextColumn::make('created_at')->label('Added')->since()->sortable()->toggleable(isToggledHiddenByDefault: true),
             ])
             ->filters([
-                //
+                Tables\Filters\SelectFilter::make('sex')
+                    ->options([
+                        'M' => 'Male',
+                        'F' => 'Female',
+                    ]),
             ])
             ->recordActions([
                 EditAction::make(),
diff --git a/resources/css/site.css b/resources/css/site.css
index 323d5fff9..0dd20f8a3 100644
--- a/resources/css/site.css
+++ b/resources/css/site.css
@@ -1,177 +1,32 @@
 
-body {
-background-image: url('/build/images/main-hero.png');
-color: #FFFFFF;
-}
-
-div {
-color: #FFFFFF;
-}
-
-footer
-{
-@apply text-white bg-green-900;
+footer {
+  @apply text-white bg-green-900;
 }
 
 .navbar-nav {
-@apply text-white shadow-md;
+  @apply text-white shadow-md;
 }
 
-/* Custom styles extracted from tailwind.css */
 .btn {
   @apply px-4 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700;
 }
+
 .form-input {
   @apply border-2 border-gray-300 p-3 rounded-lg focus:outline-none focus:border-blue-500 bg-white text-gray-900;
 }
-.container {
-  @apply max-w-6xl mx-auto px-4 sm:px-6 lg:px-8;
-  @apply max-w-6xl mx-auto px-4 sm:px-6 lg:px-8;
-  @media (max-width: 768px) {
-    max-width: 100%;
-  }
-}
-    .manage-section {
-        @apply bg-green-800 text-white shadow-md overflow-hidden;
-    }
 
-
-    .card, card {
-        @apply bg-green-800 text-white rounded-lg shadow-md overflow-hidden;
-    }
-    .card-header, card-header {
-        @apply text-white font-bold py-2 px-4 bg-green-800;
-    }
-    .card-body, card-body {
-        @apply p-4 bg-green-800;
-    }
-.sm\:container {
-  @apply max-w-xl;
-}
-.md\:container {
-  @apply max-w-2xl;
-}
-.lg\:container {
-  @apply max-w-4xl;
-}
-.xl\:container {
-  @apply max-w-6xl;
-}
-  .form-input {
-    padding: 10px;
-  }
-@media (max-width: 768px) {
-  .btn {
-    font-size: 14px;
-  }
-}
-.form-input {
-  @apply border-2 border-gray-300 p-3 rounded-lg focus:outline-none focus:border-blue-500;
-}
-.container {
-  @apply max-w-6xl mx-auto px-4 sm:px-6 lg:px-8;
-}
-    .card {
-        @apply bg-green-800 text-white rounded-lg shadow-md overflow-hidden;
-    }
-    .card-header {
-        @apply bg-green-800 text-white font-bold py-2 px-4;
-    }
-    .card-body {
-        @apply p-4 bg-green-800;
-    }.sm\:container {
-  @apply max-w-xl;
-}
-.md\:container {
-  @apply max-w-2xl;
-}
-.lg\:container {
-  @apply max-w-4xl;
-}
-.xl\:container {
-  @apply max-w-6xl;
-}
-/* Responsive adjustments using Tailwind's responsive prefixes */
-.sm\:container {
-  @apply max-w-xl;
-}
-.md\:container {
-  @apply max-w-2xl;
-}
-.lg\:container {
-}
-.xl\:container {
-  @apply max-w-6xl;
-}
-.sm\:container {
-  @apply max-w-xl;
-}
-.md\:container {
-  @apply max-w-2xl;
-}
-.lg\:container {
-  @apply max-w-4xl;
-}
-.xl\:container {
-  @apply max-w-6xl;
-}
-/* Responsive adjustments using Tailwind's responsive prefixes */
-.sm\:container {
-  @apply max-w-xl;
-}
-.md\:container {
-  @apply max-w-2xl;
-}
-.lg\:container {
-  @apply max-w-4xl;
-}
-.xl\:container {
-  @apply max-w-6xl;
-}
-.card-body {
-  @apply p-4 bg-green-800 opacity-75;
-  @media (max-width: 768px) {
-    padding: 20px;
-  }
-}
-.sm\:container {
-  @apply max-w-xl;
-}
-.md\:container {
-  @apply max-w-2xl;
-}
-.lg\:container {
-  @apply max-w-4xl;
-}
-.xl\:container {
-  @apply max-w-6xl;
+.manage-section {
+  @apply bg-green-800 text-white shadow-md overflow-hidden;
 }
+
 .card {
-  @apply bg-green-800 rounded-lg shadow-md overflow-hidden;
+  @apply bg-green-800 text-white rounded-lg shadow-md overflow-hidden;
 }
+
 .card-header {
   @apply bg-green-800 text-white font-bold py-2 px-4;
 }
-@media (max-width: 768px) {
-  .card-header {
-  }
-}
-@media (max-width: 768px) {
-  .card-body {
-    
-    padding: 20px;
-  }
-}
-/* Responsive adjustments using Tailwind's responsive prefixes */
-.sm\:container {
-  @apply max-w-xl;
-}
-.md\:container {
-  @apply max-w-2xl;
-}
-.lg\:container {
-  @apply max-w-4xl;
-}
-.xl\:container {
-  @apply max-w-6xl;
+
+.card-body {
+  @apply p-4 bg-green-800;
 }
\ No newline at end of file
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 0d5aae8b9..204ad5d0e 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -1,44 +1,74 @@
 @extends('layouts.home')
 
 @section('content')
-    <div class="min-h-full flex flex-col sm:justify-center items-center pt-6 sm:pt-0">
-        <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md sm:rounded-lg">
-            <div class="mb-4 text-sm text-gray-600">
-                {{ __('Please sign in to access the admin panel.') }}
-            </div> 
+    <div class="min-h-[calc(100vh-8rem)] flex flex-col sm:justify-center items-center py-12 px-4 bg-gradient-to-br from-emerald-50 via-white to-blue-50">
+        <div class="mb-8 text-center">
+            <h1 class="text-3xl font-bold text-gray-900">Welcome back</h1>
+            <p class="mt-2 text-gray-600">Sign in to continue building your family tree</p>
+        </div>
 
-            <form method="POST" action="{{ route('login') }}">
-                @csrf 
+        <div class="w-full sm:max-w-md bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-100">
+            <div class="px-8 py-8">
+                <form method="POST" action="{{ route('login') }}">
+                    @csrf
 
-                <div>
-                    <label class="block font-medium text-sm text-gray-700" for="email">
-                        {{ __('Email') }}
-                    </label>
-                    <input class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm block mt-1 w-full bg-white text-gray-900" id="email" type="email" name="email" required="required" autofocus="autofocus">
-                </div>
+                    <div class="space-y-5">
+                        <div>
+                            <label class="block font-medium text-sm text-gray-700 mb-1.5" for="email">
+                                {{ __('Email address') }}
+                            </label>
+                            <input class="w-full border border-gray-300 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 rounded-lg px-4 py-2.5 text-gray-900 bg-white transition-colors placeholder-gray-400 text-sm"
+                                   id="email" type="email" name="email" required autofocus
+                                   placeholder="you@example.com"
+                                   value="{{ old('email') }}">
+                            @error('email')
+                                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
+                            @enderror
+                        </div>
 
-                <div class="mt-4">
-                    <label class="block font-medium text-sm text-gray-700" for="password">
-                        {{ __('Password') }}
-                    </label>
-                    <input class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm block mt-1 w-full bg-white text-gray-900" id="password" type="password" name="password" required="required" autocomplete="current-password">
-                </div>
+                        <div>
+                            <div class="flex items-center justify-between mb-1.5">
+                                <label class="block font-medium text-sm text-gray-700" for="password">
+                                    {{ __('Password') }}
+                                </label>
+                                <a href="/forgot-password" class="text-xs text-emerald-600 hover:text-emerald-700 font-medium">
+                                    Forgot password?
+                                </a>
+                            </div>
+                            <input class="w-full border border-gray-300 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 rounded-lg px-4 py-2.5 text-gray-900 bg-white transition-colors text-sm"
+                                   id="password" type="password" name="password" required
+                                   autocomplete="current-password"
+                                   placeholder="••••••••">
+                            @error('password')
+                                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
+                            @enderror
+                        </div>
 
-                <div class="block mt-4">
-                    <label for="remember_me" class="flex items-center">
-                        <input type="checkbox" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" id="remember_me" name="remember">
-                        <span class="ml-2 text-sm text-gray-600">{{ __('Remember me') }}</span>
-                    </label>
-                </div>
+                        <div class="flex items-center">
+                            <input type="checkbox"
+                                   class="w-4 h-4 rounded border-gray-300 text-emerald-600 focus:ring-emerald-500"
+                                   id="remember_me" name="remember">
+                            <label for="remember_me" class="ml-2 text-sm text-gray-600">
+                                {{ __('Remember me') }}
+                            </label>
+                        </div>
 
-                <div class="flex items-center justify-end mt-4">
-                    <button type="submit" class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring ring-gray-300 disabled:opacity-25 transition ease-in-out duration-150 ml-4">
-                        {{ __('Log in') }}
-                    </button>
-                </div>
+                        <button type="submit"
+                                class="w-full flex justify-center items-center px-6 py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-lg shadow-sm hover:shadow transition-all duration-200 text-sm">
+                            {{ __('Sign in') }}
+                        </button>
+                    </div>
+                </form>
+            </div>
 
-                <a href="/forgot-password" class="underline text-sm text-gray-600 hover:text-gray-900" >Forgot password?</a>
-            </form>
+            <div class="px-8 py-4 bg-gray-50 border-t border-gray-100 text-center">
+                <p class="text-sm text-gray-600">
+                    Don't have an account?
+                    <a href="{{ route('register') }}" class="font-medium text-emerald-600 hover:text-emerald-700">
+                        Start free today
+                    </a>
+                </p>
+            </div>
         </div>
     </div>
 @endsection
\ No newline at end of file
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index ea7b29e96..52ce9f04b 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -1,43 +1,89 @@
 @extends('layouts.home')
 
 @section('content')
-    <div class="min-h-full flex flex-col sm:justify-center items-center pt-6 sm:pt-0">
-
-        <div class="w-full sm:max-w-md mb-4 mt-6 px-6 py-4 bg-white shadow-md sm:rounded-lg">
-            <form method="POST" action="{{ route('register') }}">
-                @csrf
-                {{-- <input type="hidden" name="_token" value="{{ csrf_token() }}"> --}}
-
-                <div>
-                    <x-label for="name" value="{{ __('Name') }}" />
-                    <x-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus />
-                </div>
-
-                <div class="mt-4">
-                    <x-label for="email" value="{{ __('Email') }}" />
-                    <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required />
-                </div>
-
-                <div class="mt-4">
-                    <x-label for="password" value="{{ __('Password') }}" />
-                    <x-input id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="new-password" />
-                </div>
-
-                <div class="mt-4">
-                    <x-label for="password_confirmation" value="{{ __('Confirm Password') }}" />
-                    <x-input id="password_confirmation" class="block mt-1 w-full" type="password" name="password_confirmation" required />
-                </div>
-
-                <div class="flex items-center justify-end mt-4">
-                    <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('login') }}">
-                        {{ __('Already registered?') }}
-                    </a>
+    <div class="min-h-[calc(100vh-8rem)] flex flex-col sm:justify-center items-center py-12 px-4 bg-gradient-to-br from-emerald-50 via-white to-blue-50">
+        <div class="mb-8 text-center">
+            <h1 class="text-3xl font-bold text-gray-900">Create your account</h1>
+            <p class="mt-2 text-gray-600">Start building your family tree for free</p>
+        </div>
+
+        <div class="w-full sm:max-w-md bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-100">
+            <div class="px-8 py-8">
+                <form method="POST" action="{{ route('register') }}">
+                    @csrf
+
+                    <div class="space-y-5">
+                        <div>
+                            <label class="block font-medium text-sm text-gray-700 mb-1.5" for="name">
+                                {{ __('Full name') }}
+                            </label>
+                            <input class="w-full border border-gray-300 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 rounded-lg px-4 py-2.5 text-gray-900 bg-white transition-colors placeholder-gray-400 text-sm"
+                                   id="name" type="text" name="name"
+                                   value="{{ old('name') }}" required autofocus
+                                   placeholder="Jane Smith">
+                            @error('name')
+                                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
+                            @enderror
+                        </div>
+
+                        <div>
+                            <label class="block font-medium text-sm text-gray-700 mb-1.5" for="email">
+                                {{ __('Email address') }}
+                            </label>
+                            <input class="w-full border border-gray-300 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 rounded-lg px-4 py-2.5 text-gray-900 bg-white transition-colors placeholder-gray-400 text-sm"
+                                   id="email" type="email" name="email"
+                                   value="{{ old('email') }}" required
+                                   placeholder="you@example.com">
+                            @error('email')
+                                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
+                            @enderror
+                        </div>
 
-                    <x-button class="ml-4">
-                        {{ __('Register') }}
-                    </x-button>
-                </div>
-            </form>
+                        <div>
+                            <label class="block font-medium text-sm text-gray-700 mb-1.5" for="password">
+                                {{ __('Password') }}
+                            </label>
+                            <input class="w-full border border-gray-300 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 rounded-lg px-4 py-2.5 text-gray-900 bg-white transition-colors text-sm"
+                                   id="password" type="password" name="password" required
+                                   autocomplete="new-password"
+                                   placeholder="Min. 8 characters">
+                            @error('password')
+                                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
+                            @enderror
+                        </div>
+
+                        <div>
+                            <label class="block font-medium text-sm text-gray-700 mb-1.5" for="password_confirmation">
+                                {{ __('Confirm password') }}
+                            </label>
+                            <input class="w-full border border-gray-300 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 rounded-lg px-4 py-2.5 text-gray-900 bg-white transition-colors text-sm"
+                                   id="password_confirmation" type="password" name="password_confirmation" required
+                                   placeholder="Re-enter your password">
+                        </div>
+
+                        <button type="submit"
+                                class="w-full flex justify-center items-center px-6 py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-lg shadow-sm hover:shadow transition-all duration-200 text-sm">
+                            {{ __('Create account') }}
+                        </button>
+                    </div>
+                </form>
+            </div>
+
+            <div class="px-8 py-4 bg-gray-50 border-t border-gray-100 text-center">
+                <p class="text-sm text-gray-600">
+                    Already have an account?
+                    <a href="{{ route('login') }}" class="font-medium text-emerald-600 hover:text-emerald-700">
+                        Sign in
+                    </a>
+                </p>
+            </div>
         </div>
+
+        <p class="mt-4 text-xs text-gray-500 text-center max-w-sm">
+            By creating an account, you agree to our
+            <a href="/terms-and-conditions" class="underline hover:text-gray-700">Terms of Service</a>
+            and
+            <a href="/privacy" class="underline hover:text-gray-700">Privacy Policy</a>.
+        </p>
     </div>
 @endsection
\ No newline at end of file
diff --git a/resources/views/components/footer.blade.php b/resources/views/components/footer.blade.php
index e813920c6..5366e42a3 100644
--- a/resources/views/components/footer.blade.php
+++ b/resources/views/components/footer.blade.php
@@ -1,35 +1,26 @@
 @php
     $settings = app(\App\Settings\GeneralSettings::class);
 @endphp
-<footer class="mt-auto pb-5 pt-3">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="flex justify-between items-center flex-wrap">
-            <nav class="order-1 lg:order-2 mb-3 lg:mb-0">
-                <ul class="flex flex-wrap space-x-4">
-                    <li><a href="/about" class="hover:text-gray-300">About Us</a></li>
-                    <li><a href="/privacy" class="hover:text-gray-300">Privacy</a></li>
-                    <li><a href="/terms-and-conditions" class="hover:text-gray-300">Terms &amp; Conditions</a></li>
-                    <li>
-                        <a href="https://wa.me/441793200950" class="hover:text-gray-300 inline-flex items-center" title="Contact on WhatsApp">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
-                            </svg>
-                            <span class="sr-only">Contact on WhatsApp</span>
-                        </a>
-                    </li>
-                </ul>
-            </nav>
-            <div class="flex items-center flex-wrap w-full lg:w-auto order-2 lg:order-1 lg:pt-3">
-                <div class="mr-6">
-                    <a href="/" class="text-lg font-semibold">{{ $settings->site_name }}</a>
+<footer class="mt-auto">
+    <div class="border-t border-green-800 bg-green-900 text-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
+                <div class="flex flex-col gap-1">
+                    <a href="/" class="text-lg font-semibold text-white hover:text-emerald-300 transition-colors">
+                        {{ $settings->site_name }}
+                    </a>
+                    <p class="text-sm text-green-300">{{ $settings->footer_copyright }}</p>
                 </div>
 
-                <div>
-                    <p>{{ $settings->footer_copyright }}</p>
-                </div>
+                <nav aria-label="Footer navigation">
+                    <ul class="flex flex-wrap gap-x-6 gap-y-2 text-sm">
+                        <li><a href="/about" class="text-green-200 hover:text-white transition-colors">About Us</a></li>
+                        <li><a href="/privacy" class="text-green-200 hover:text-white transition-colors">Privacy Policy</a></li>
+                        <li><a href="/terms-and-conditions" class="text-green-200 hover:text-white transition-colors">Terms &amp; Conditions</a></li>
+                        <li><a href="/contact" class="text-green-200 hover:text-white transition-colors">Contact</a></li>
+                    </ul>
+                </nav>
             </div>
-
         </div>
-
     </div>
 </footer>
diff --git a/resources/views/components/home-navbar.blade.php b/resources/views/components/home-navbar.blade.php
index 77a0d4962..56b79c7a7 100644
--- a/resources/views/components/home-navbar.blade.php
+++ b/resources/views/components/home-navbar.blade.php
@@ -1,29 +1,69 @@
-<header class="flex flex-wrap sm:justify-start sm:flex-nowrap w-full bg-white text-sm py-3 dark:bg-neutral-800">
+@php
+    $currentPath = '/' . ltrim(request()->path(), '/');
+    $navLinkClass = fn(string $path) => 'font-medium focus:outline-none transition-colors ' .
+        ($currentPath === $path
+            ? 'text-emerald-600 border-b-2 border-emerald-600 pb-0.5'
+            : 'text-gray-600 hover:text-emerald-600');
+@endphp
+<header class="sticky top-0 z-50 flex flex-wrap sm:justify-start sm:flex-nowrap w-full bg-white/95 backdrop-blur-sm shadow-sm text-sm py-3 border-b border-gray-100">
     <nav class="max-w-[85rem] w-full mx-auto px-4 flex flex-wrap basis-full items-center justify-between">
-        <a class="sm:order-1 flex-none text-xl font-semibold dark:text-white focus:outline-none focus:opacity-80" href="#">
-        <img src="{{ asset('/build/images/logo1.svg') }}" alt="Logo" class="h-8">
+        <a class="sm:order-1 flex-none text-xl font-semibold focus:outline-none focus:opacity-80" href="/">
+            <img src="{{ asset('/build/images/logo1.svg') }}" alt="Logo" class="h-8">
         </a>
-        <div class="sm:order-3 flex items-center gap-x-2">
-        <button type="button" class="sm:hidden hs-collapse-toggle relative size-7 flex justify-center items-center gap-x-2 rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-neutral-700 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10" id="hs-navbar-alignment-collapse" aria-expanded="false" aria-controls="hs-navbar-alignment" aria-label="Toggle navigation" data-hs-collapse="#hs-navbar-alignment">
-            <svg class="hs-collapse-open:hidden shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="21" y1="12" y2="12"/><line x1="3" x2="21" y1="18" y2="18"/></svg>
-            <svg class="hs-collapse-open:block hidden shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
-            <span class="sr-only">Toggle</span>
-        </button>
-        @if(auth()->check())
-            <a class="font-medium text-gray-500 focus:outline-none" href="{{ route('filament.app.tenant')}}" aria-current="page">Dashboard</a>
-        @else
-            <a class="font-medium text-gray-500 focus:outline-none" href="/login" aria-current="page">Login</a>
-            <a class="font-medium text-gray-500 focus:outline-none" href="/register" aria-current="page">Register</a>
-        @endif
-        </div>
-        <div id="hs-navbar-alignment" class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow sm:grow-0 sm:basis-auto sm:block sm:order-2" aria-labelledby="hs-navbar-alignment-collapse">
-        <div class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:mt-0 sm:ps-5">
-            <a class="font-medium text-gray-500 hover:text-gray-700 focus:outline-none transition-colors" href="/" aria-current="page">Home</a>
-            <a class="font-medium text-gray-600 hover:text-gray-700 focus:outline-none transition-colors" href="/about">About</a>
-            <a class="font-medium text-gray-600 hover:text-gray-700 focus:outline-none transition-colors" href="/contact">Contact</a>
-            <a class="font-medium text-gray-600 hover:text-gray-700 focus:outline-none transition-colors" href="/privacy">Privacy</a>
-            <a class="font-medium text-gray-600 hover:text-gray-700 focus:outline-none transition-colors" href="/terms-and-conditions">Terms</a>
+
+        <div class="sm:order-3 flex items-center gap-x-3">
+            <button type="button"
+                    class="sm:hidden relative size-8 flex justify-center items-center rounded-lg border border-gray-200 bg-white text-gray-600 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-emerald-500 transition-colors"
+                    id="navbar-mobile-toggle"
+                    aria-expanded="false"
+                    aria-controls="navbar-mobile-menu"
+                    aria-label="Toggle navigation">
+                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+                    <line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="21" y1="12" y2="12"/><line x1="3" x2="21" y1="18" y2="18"/>
+                </svg>
+                <span class="sr-only">Toggle navigation</span>
+            </button>
+
+            @if(auth()->check())
+                <a href="{{ route('filament.app.tenant') }}"
+                   class="inline-flex items-center px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-semibold rounded-lg transition-colors duration-200 shadow-sm">
+                    <svg class="w-3.5 h-3.5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
+                    </svg>
+                    Dashboard
+                </a>
+            @else
+                <a href="/login"
+                   class="font-medium text-gray-600 hover:text-emerald-600 focus:outline-none transition-colors hidden sm:inline-block">
+                    Sign In
+                </a>
+                <a href="/register"
+                   class="inline-flex items-center px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-semibold rounded-lg transition-colors duration-200 shadow-sm">
+                    Get Started
+                </a>
+            @endif
         </div>
+
+        <div id="navbar-mobile-menu" class="hidden overflow-hidden transition-all duration-300 basis-full grow sm:grow-0 sm:basis-auto sm:block sm:order-2">
+            <div class="flex flex-col gap-1 mt-4 pb-2 sm:flex-row sm:items-center sm:gap-6 sm:mt-0 sm:pb-0 sm:ps-5">
+                <a class="{{ $navLinkClass('/') }}" href="/">Home</a>
+                <a class="{{ $navLinkClass('/about') }}" href="/about">About</a>
+                <a class="{{ $navLinkClass('/contact') }}" href="/contact">Contact</a>
+                <a class="{{ $navLinkClass('/privacy') }}" href="/privacy">Privacy</a>
+                <a class="{{ $navLinkClass('/terms-and-conditions') }}" href="/terms-and-conditions">Terms</a>
+                @if(!auth()->check())
+                    <a class="font-medium text-gray-600 hover:text-emerald-600 focus:outline-none transition-colors sm:hidden" href="/login">Sign In</a>
+                @endif
+            </div>
         </div>
     </nav>
 </header>
+
+<script>
+    document.getElementById('navbar-mobile-toggle').addEventListener('click', function () {
+        var menu = document.getElementById('navbar-mobile-menu');
+        var expanded = this.getAttribute('aria-expanded') === 'true';
+        menu.classList.toggle('hidden');
+        this.setAttribute('aria-expanded', String(!expanded));
+    });
+</script>
diff --git a/resources/views/layouts/home.blade.php b/resources/views/layouts/home.blade.php
index 2714e82e1..4e9a7cee6 100644
--- a/resources/views/layouts/home.blade.php
+++ b/resources/views/layouts/home.blade.php
@@ -1,7 +1,7 @@
 <x-app-layout>
 @include('components.home-navbar')
 
-    <main class="flex-1 pt-6">
+    <main class="flex-1">
         @yield('content')
     </main>