diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
index ab40710..c6d162a 100644
--- a/.github/workflows/cd.yml
+++ b/.github/workflows/cd.yml
@@ -62,5 +62,6 @@ jobs:
             unzip -o app.zip -d /home/${{ secrets.SSH_USERNAME }}/public_html/
             rm -rf app.zip
             sed -i~ '/^VERSION=/s/=.*/="${{ vars.VERSION }}"/' .env
+            php artisan migrate --force
             # sed -i~ '/^HASH_VERSION=/s/=.*/="${{ github.sha }}"/' .env
             # sed -i~ '/^HASH_VERSION=/s/=.*/="${{ vars.HASH_VERSION }}"/' .env
diff --git a/app/Filament/Resources/HeaderResource.php b/app/Filament/Resources/HeaderResource.php
new file mode 100644
index 0000000..950c1a5
--- /dev/null
+++ b/app/Filament/Resources/HeaderResource.php
@@ -0,0 +1,92 @@
+<?php
+
+namespace App\Filament\Resources;
+
+use App\Filament\Resources\HeaderResource\Pages;
+use App\Models\Header;
+use Filament\Forms\Components\Grid;
+use Filament\Forms\Components\TextInput;
+use Filament\Forms\Components\Toggle;
+use Filament\Forms\Form;
+use Filament\Resources\Resource;
+use Filament\Tables;
+use Filament\Tables\Columns\TextColumn;
+use Filament\Tables\Columns\ToggleColumn;
+use Filament\Tables\Table;
+
+class HeaderResource extends Resource
+{
+    protected static ?string $model = Header::class;
+
+    protected static ?string $navigationIcon = 'heroicon-o-rectangle-stack';
+
+    protected static ?string $navigationGroup = 'CMS';
+
+    public static function getPluralLabel(): string
+    {
+        return __('Header');
+    }
+
+    public static function getModelLabel(): string
+    {
+        return __('Header');
+    }
+
+    public static function form(Form $form): Form
+    {
+        return $form
+            ->schema([
+                Grid::make('')
+                    ->columns(2)
+                    ->schema([
+                        TextInput::make('title')
+                            ->label('Judul')
+                            ->required(),
+                        TextInput::make('url')
+                            ->label('URL')
+                            ->prefix(route('home') . '/')
+                            ->required(),
+                        TextInput::make('rank')
+                            ->label('Rank')
+                            ->integer()
+                            ->required()
+                    ]),
+                Toggle::make('is_highlight')
+                    ->label('Is Highlight')
+                    ->required(),
+            ]);
+    }
+
+    public static function table(Table $table): Table
+    {
+        return $table
+            ->columns([
+                TextColumn::make('title')->label('Judul'),
+                TextColumn::make('url')
+                    ->label('URL')
+                    ->prefix(route('home') . '/'),
+                TextColumn::make('rank')->label('Rank'),
+                ToggleColumn::make('is_highlight')->label('Is Highlight')
+            ])
+            ->defaultSort('rank', 'asc')
+            ->filters([
+                //
+            ])
+            ->actions([
+                Tables\Actions\EditAction::make(),
+                Tables\Actions\DeleteAction::make(),
+            ])
+            ->bulkActions([
+                Tables\Actions\BulkActionGroup::make([
+                    Tables\Actions\DeleteBulkAction::make(),
+                ]),
+            ]);
+    }
+
+    public static function getPages(): array
+    {
+        return [
+            'index' => Pages\ManageHeaders::route('/'),
+        ];
+    }
+}
diff --git a/app/Filament/Resources/HeaderResource/Pages/ManageHeaders.php b/app/Filament/Resources/HeaderResource/Pages/ManageHeaders.php
new file mode 100644
index 0000000..0afdd03
--- /dev/null
+++ b/app/Filament/Resources/HeaderResource/Pages/ManageHeaders.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Filament\Resources\HeaderResource\Pages;
+
+use App\Filament\Resources\HeaderResource;
+use Filament\Actions;
+use Filament\Resources\Pages\ManageRecords;
+
+class ManageHeaders extends ManageRecords
+{
+    protected static string $resource = HeaderResource::class;
+
+    protected function getHeaderActions(): array
+    {
+        return [
+            Actions\CreateAction::make(),
+        ];
+    }
+}
diff --git a/app/Models/Header.php b/app/Models/Header.php
new file mode 100644
index 0000000..909cb12
--- /dev/null
+++ b/app/Models/Header.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Header extends Model
+{
+    use HasFactory;
+
+    protected $guarded = [];
+}
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index 6e8953d..2201226 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -2,7 +2,7 @@
 
 namespace App\Providers;
 
-// use Illuminate\Support\Facades\Vite;
+use App\Models\Header;
 use Illuminate\Support\ServiceProvider;
 
 class AppServiceProvider extends ServiceProvider
@@ -21,5 +21,9 @@ public function register(): void
     public function boot(): void
     {
         // Vite::macro('image', fn (string $asset) => $this->asset("resources/images/{$asset}"));
+        view()->share(
+            'headers',
+            Header::orderBy('rank')->get() ?? []
+        );
     }
 }
diff --git a/database/migrations/2024_07_09_181621_create_headers_table.php b/database/migrations/2024_07_09_181621_create_headers_table.php
new file mode 100644
index 0000000..3ce66cf
--- /dev/null
+++ b/database/migrations/2024_07_09_181621_create_headers_table.php
@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('headers', function (Blueprint $table) {
+            $table->id();
+            $table->string('title');
+            $table->string('url')->nullable();
+            $table->boolean('is_highlight')->default(false);
+            $table->integer('rank')->default(1);
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('headers');
+    }
+};
diff --git a/database/seeders/HeaderSeeder.php b/database/seeders/HeaderSeeder.php
new file mode 100644
index 0000000..1a04703
--- /dev/null
+++ b/database/seeders/HeaderSeeder.php
@@ -0,0 +1,51 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Header;
+use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+
+class HeaderSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        $headers = [
+            [
+                'DIES NATALIS Ke - 12 PERMIKOMNAS',
+                ''
+            ],
+            [
+                'PEKAN ESPORT Vol. 2',
+                'pekanesport'
+            ],
+            [
+                'PENGURUS',
+                'structure'
+            ],
+            [
+                'PROGRAM KERJA',
+                'workplan'
+            ],
+            [
+                'ARTIKEL',
+                'article'
+            ],
+            [
+                'DOKUMENTASI',
+                'gallery'
+            ]
+        ];
+
+        foreach ($headers as $key => $value) {
+            Header::create([
+                'title' => $value[0],
+                'url' => $value[1],
+                'rank' => $key
+            ]);
+        }
+    }
+}
diff --git a/resources/css/alert.css b/resources/css/alert.css
index 9d77518..9b1c6bd 100644
--- a/resources/css/alert.css
+++ b/resources/css/alert.css
@@ -98,4 +98,3 @@ section {
     color: #fff;
     font-size: 24px;
 }
-
diff --git a/resources/css/app.css b/resources/css/app.css
index ab545f0..187f553 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -6,6 +6,7 @@
 @tailwind utilities;
 
 @layer base {
+
     html,
     body {
         font-family: "Poppins", sans-serif;
diff --git a/resources/css/columner.css b/resources/css/columner.css
index 432101f..4d75238 100644
--- a/resources/css/columner.css
+++ b/resources/css/columner.css
@@ -1,44 +1,63 @@
-.row
-{
+.row {
     display: flex;
     flex-wrap: wrap;
 }
 
-.col-2 { width: 16.666666667%; }
-.col-3 { width: 25%; }
-.col-4 { width: 33.33%; }
-.col-5 { width: 41.666666667%; }
-.col-6 { width: 50%; }
-.col-7 { width: 58.33%; }
-.col-8 { width: 66.666666667%; }
-.col-9 { width: 75%; }
-.col-12 { width: 100%; }
+.col-2 {
+    width: 16.666666667%;
+}
+
+.col-3 {
+    width: 25%;
+}
+
+.col-4 {
+    width: 33.33%;
+}
+
+.col-5 {
+    width: 41.666666667%;
+}
+
+.col-6 {
+    width: 50%;
+}
+
+.col-7 {
+    width: 58.33%;
+}
+
+.col-8 {
+    width: 66.666666667%;
+}
+
+.col-9 {
+    width: 75%;
+}
+
+.col-12 {
+    width: 100%;
+}
 
-[class*="col-"]
-{
+[class*="col-"] {
     padding-left: 20px;
     padding-right: 20px;
 }
 
-[class*="col-"]:first-child
-{
+[class*="col-"]:first-child {
     padding-left: 0px;
 }
 
-[class*="col-"]:last-child
-{
+[class*="col-"]:last-child {
     padding-right: 0px;
 }
 
-.row.no-padding>[class*="col-"]
-{
+.row.no-padding>[class*="col-"] {
     padding: 0px;
 }
 
-@media only screen and (max-width: 900px)
-{
-    [class*="col-"]
-    {
+@media only screen and (max-width: 900px) {
+    [class*="col-"] {
         width: 100%;
         padding: 0px;
     }
diff --git a/resources/css/container.css b/resources/css/container.css
index 59649c8..3e09e67 100644
--- a/resources/css/container.css
+++ b/resources/css/container.css
@@ -1,59 +1,49 @@
-.content
-{
+.content {
     margin: auto;
     width: 1000px;
     padding-top: 25px;
     padding-bottom: 25px;
 }
 
-.fullscreen
-{
+.fullscreen {
     width: 100%;
     height: 100vh;
 }
 
-.fullscreen.primary
-{
+.fullscreen.primary {
     background: rgba(42, 38, 61, 0.82);
     color: #fff;
 }
 
-.fullscreen.secondary
-{
+.fullscreen.secondary {
     background: rgba(42, 38, 61, 0.82);
-    color:  #fff;
+    color: #fff;
 }
 
-.fullscreen.tertienary
-{
+.fullscreen.tertienary {
     background: rgba(42, 38, 61, 0.82);
-    color:  #fff;
+    color: #fff;
 }
 
-.fullscreen.quartenary
-{
+.fullscreen.quartenary {
     background: var(--color-quartenary);
     color: var(--color-primary);
 }
 
-.fullscreen.secondary-light
-{
+.fullscreen.secondary-light {
     background: var(--color-quartenary-transparent);
 }
 
-.fullscreen.tertienary-light
-{
+.fullscreen.tertienary-light {
     background: var(--color-quartenary-transparent);
 }
 
-.full-image
-{
+.full-image {
     position: relative;
 }
 
 .full-image>.image,
-.full-image>.overlay
-{
+.full-image>.overlay {
     position: absolute;
     width: 100%;
     height: 100%;
@@ -61,89 +51,73 @@
     top: 0px;
 }
 
-.full-image>.image
-{
+.full-image>.image {
     z-index: 0;
 }
 
-.full-image>.image>img
-{
+.full-image>.image>img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }
 
-.full-image>.overlay
-{
+.full-image>.overlay {
     z-index: 1;
     color: rgb(177, 167, 167);
     position: relative;
     background: rgba(42, 38, 61, 0.82);
 }
 
-.full-image>.overlay.secondary
-{
+.full-image>.overlay.secondary {
     background: rgba(42, 38, 61, 0.82);
 }
 
-.full-image>.overlay.tertienary
-{
+.full-image>.overlay.tertienary {
     background: rgba(42, 38, 61, 0.82);
 }
 
-.full-image>.overlay.quartenary
-{
+.full-image>.overlay.quartenary {
     background: var(--color-quartenary-transparent);
     color: var(--color-primary);
 }
 
-.clearfix
-{
+.clearfix {
     width: 100%;
     height: 75px;
 }
 
-.first-content
-{
+.first-content {
     padding-top: 125px;
 }
 
-.content-center
-{
+.content-center {
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 
-.header-clear
-{
+.header-clear {
     width: 100%;
     height: 155px;
 }
 
-.img-box
-{
+.img-box {
     width: 100%;
     min-height: 350px;
     object-fit: cover;
     border-radius: var(--border-radius);
 }
 
-.responsive-img
-{
+.responsive-img {
     width: 250px;
 }
 
-.logo-stempel
-{
+.logo-stempel {
     background: #fff;
-    /* opacity: 0.5; */
-    /* padding: 2px; */
     border-radius: 100%;
 }
 
-.content-contact
-{
+.content-contact {
     background: #fff;
     position: absolute;
     left: calc(50% - 500px);
@@ -154,15 +128,13 @@
     color: var(--color-primary);
 }
 
-.content-shadow
-{
-    box-shadow: 0px 0px 50px -10px rgba(0,0,0,0.75);
+.content-shadow {
+    box-shadow: 0px 0px 50px -10px rgba(0, 0, 0, 0.75);
     position: relative;
     z-index: 2;
 }
 
-.initial-banner
-{
+.initial-banner {
     background: #fff;
     height: calc(100% - 225px);
     display: flex;
@@ -170,51 +142,41 @@
     justify-content: center;
 }
 
-.initial-banner>img
-{
+.initial-banner>img {
     height: 100%;
 }
 
-@media only screen and (max-width: 1025px)
-{
-    .initial-banner>img
-    {
+@media only screen and (max-width: 1025px) {
+    .initial-banner>img {
         height: auto;
         width: 100%;
     }
 }
 
-@media only screen and (max-width: 1000px)
-{
-    .content-contact
-    {
+@media only screen and (max-width: 1000px) {
+    .content-contact {
         width: 100%;
         position: static;
         border-radius: 0px;
         margin-top: 200px;
     }
 
-    .content
-    {
+    .content {
         width: 100%;
         padding: 40px;
     }
 
-    .fullscreen
-    {
+    .fullscreen {
         height: auto;
     }
 
-    .responsive-gap
-    {
+    .responsive-gap {
         margin-bottom: 75px;
     }
 }
 
-@media only screen and (max-width: 400px)
-{
-    .responsive-img
-    {
+@media only screen and (max-width: 400px) {
+    .responsive-img {
         width: 100%;
     }
 }
diff --git a/resources/css/globals.css b/resources/css/globals.css
index 2810784..2d7053e 100644
--- a/resources/css/globals.css
+++ b/resources/css/globals.css
@@ -1,12 +1,11 @@
-:root
-{
-    --color-primary: #28284F;
+:root {
+    --color-primary: #28284f;
     --color-primary-dark: rgb(25, 25, 48);
     --color-primary-transparent: hsla(240, 33%, 23%, 0.75);
 
-    --color-secondary: #CD3B36;
+    --color-secondary: #cd3b36;
     --color-secondary-dark: rgb(168, 48, 44);
-    --color-secondary-light: #F8CFC6;
+    --color-secondary-light: #f8cfc6;
     --color-secondary-light-2: rgb(255, 181, 164);
     --color-secondary-transparent: rgba(205, 59, 54, 0.75);
 
diff --git a/resources/css/loader.css b/resources/css/loader.css
index 6f72c23..962dd66 100644
--- a/resources/css/loader.css
+++ b/resources/css/loader.css
@@ -1,5 +1,4 @@
-.loading-screen
-{
+.loading-screen {
     position: fixed;
     width: 100%;
     height: 100vh;
@@ -10,32 +9,28 @@
     top: 0px;
     left: 0px;
     z-index: 9999;
-    color :#fff;
+    color: #fff;
     text-align: center;
     opacity: 0;
     pointer-events: none;
     transition: 0.15s all;
 }
 
-.loading-screen.loader-visible
-{
+.loading-screen.loader-visible {
     opacity: 1;
     pointer-events: auto;
 }
 
-.loading-screen>img
-{
+.loading-screen>img {
     width: 350px;
     height: 275px;
     align-self: center;
 }
 
-@media only screen and (max-width: 350px)
-{
-    .loading-screen>img
-    {
+@media only screen and (max-width: 350px) {
+    .loading-screen>img {
         width: 100%;
         height: auto;
         align-self: center;
     }
-}
\ No newline at end of file
+}
diff --git a/resources/css/navigation.css b/resources/css/navigation.css
index 4926d2f..5820f51 100644
--- a/resources/css/navigation.css
+++ b/resources/css/navigation.css
@@ -3,24 +3,13 @@ nav {
     position: absolute;
     z-index: 999;
     width: 10px;
-    justify-content: space-between;
     margin-top: 25px;
     align-content: center;
     height: 70px;
     width: 1000px;
-    left: calc(50% - 550px);
     transition: 0.25s all;
 }
 
-/* nav>.logo { */
-/*     width: 125px; */
-/*     padding-top: 10px; */
-/* } */
-
-/* nav>.logo.dark { */
-/*     display: none; */
-/* } */
-
 nav>.logo>a {
     display: block;
     width: 100%;
diff --git a/resources/views/detail-article.blade.php b/resources/views/detail-article.blade.php
index c12a6a6..e7d6c8e 100644
--- a/resources/views/detail-article.blade.php
+++ b/resources/views/detail-article.blade.php
@@ -40,6 +40,9 @@ class="inline-block align-middle rounded-md bg-zinc-400 px-2 py-1 text-lg font-m
                             <a href="javascript:void(0);"
                                 class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10" aria-label="Kategori artikel {{ $article->article_category->name }}">{{ $article->article_category->name }}</a>
                         </header>
+                        <div>
+                            <img class="rounded-2xl object-cover max-h-96 mb-5 bg-cover" src="{{ asset('storage/' . $article->thumbnail) }}" />
+                        </div>
                         <div>{!! $article->content !!}</div>
                         <div class="row mt-10">
                             <span class="align-text-bottom mr-2"> KATA KUNCI : </span>
diff --git a/resources/views/event-ticket-check.blade.php b/resources/views/event-ticket-check.blade.php
index 486bff6..c79a355 100644
--- a/resources/views/event-ticket-check.blade.php
+++ b/resources/views/event-ticket-check.blade.php
@@ -1,4 +1,4 @@
-@section('title', 'Cek Kehadiran Tiket')
+@section('title', 'Cek Kehadiran Peserta')
 <x-new-app-layout>
     <div class="fullscreen full-image max-h-[7em]">
         <div class="overlay content-center first-content tertienary">
diff --git a/resources/views/layouts/new/app.blade.php b/resources/views/layouts/new/app.blade.php
index 11e4ce9..7a9e61b 100644
--- a/resources/views/layouts/new/app.blade.php
+++ b/resources/views/layouts/new/app.blade.php
@@ -38,8 +38,8 @@ function gtag() {
 
 <body>
     <!-- Header -->
-    <nav class="nav-dark sm:w-3/5" x-data="{ open: false }">
-        <div class="logo dark w-40 sm:w-auto">
+    <nav class="nav-dark w-full justify-center" x-data="{ open: false }">
+        <div class="logo dark w-40 sm:w-auto mr-28">
             @if (request()->path() != '/')
             <a href="{{ route('home') }}" aria-label="Dark Logo Imakom">
                 <img src="{{ url('./images/logo_imakom.webp') }}" class="bg-white rounded-full -mt-5 w-28 h-28" alt="Logo Header Imakom" />
@@ -48,16 +48,11 @@ function gtag() {
         </div>
         <div class="menu bg-black lg:bg-inherit" :class="open ? 'open' : ''">
             <a class="menu-item" href="{{ route('home') }}" aria-label="Anchor to Beranda">BERANDA</a>
-            <a class="menu-item font-bold" href="#">
-                DIES NATALIS Ke-12
+            @foreach ($headers as $header)
+            <a class="menu-item" href="{{ route('home') .'/'. $header->url }}">
+                {{ $header->title }}
             </a>
-            <a class="menu-item" href="{{ route('pekanesport') }}">
-                PEKAN ESPORT Vol. 2
-            </a>
-            <a class="menu-item" href="{{ route('structure') }}" aria-label="Anchor to Pengurus">PENGURUS</a>
-            <a class="menu-item" href="{{ route('workplan') }}" aria-label="Anchor to Program Kerja">PROGRAM KERJA</a>
-            <a class="menu-item" href="{{ route('article') }}" aria-label="Anchor to Artikel">ARTIKEL</a>
-            <a class="menu-item" href="{{ route('gallery') }}" aria-label="Anchor to Dokumentasi">DOKUMENTASI</a>
+            @endforeach
         </div>
 
         <div class="nav-icon4" id="mobile-nav" x-on:click="open = ! open">