diff --git a/app/Filament/Admin/Resources/InternApplications/Widgets/InternGanttChartWidget.php b/app/Filament/Admin/Resources/InternApplications/Widgets/InternGanttChartWidget.php
index 8ad4b5e..9f16844 100644
--- a/app/Filament/Admin/Resources/InternApplications/Widgets/InternGanttChartWidget.php
+++ b/app/Filament/Admin/Resources/InternApplications/Widgets/InternGanttChartWidget.php
@@ -132,6 +132,22 @@ class InternGanttChartWidget extends Widget
             $paletteIndex = $intern->id % count($palettes);
             $color = $palettes[$paletteIndex];
 
+            $startMonth = (int) $start->format('n');
+            $endMonth = (int) $end->format('n');
+            $gridStart = $startMonth + 1;
+            $gridEnd = min(14, $endMonth + 2);
+
+            // Background color map based on user's examples
+            $hexColors = [
+                '#2ecaac', // Emerald Teal
+                '#54c6f9', // Sky Blue
+                '#ff6252', // Red Coral
+                '#f59e0b', // Amber
+                '#8b5cf6', // Violet
+            ];
+            $hexColor = $hexColors[$intern->id % count($hexColors)];
+            $isStripes = ($intern->id % 2 === 0);
+
             return [
                 'id' => $intern->id,
                 'name' => $intern->name,
@@ -141,6 +157,10 @@ class InternGanttChartWidget extends Widget
                 'left' => $left,
                 'width' => $width,
                 'color' => $color,
+                'grid_start' => $gridStart,
+                'grid_end' => $gridEnd,
+                'hex_color' => $hexColor,
+                'is_stripes' => $isStripes,
             ];
         });
 
diff --git a/resources/views/filament/admin/resources/intern-applications/widgets/intern-gantt-chart-widget.blade.php b/resources/views/filament/admin/resources/intern-applications/widgets/intern-gantt-chart-widget.blade.php
index 94b8c44..e933077 100644
--- a/resources/views/filament/admin/resources/intern-applications/widgets/intern-gantt-chart-widget.blade.php
+++ b/resources/views/filament/admin/resources/intern-applications/widgets/intern-gantt-chart-widget.blade.php
@@ -1,4 +1,159 @@
+@php
+$monthNames = ['Oca', 'Şub', 'Mar', 'Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl', 'Eki', 'Kas', 'Ara'];
+$currentMonth = (int) date('n');
+@endphp
+
 <x-filament-widgets::widget>
+    <style>
+        .fi-wi-intern-gantt-chart .gantt {
+            display: grid;
+            border: 0;
+            border-radius: 12px;
+            position: relative;
+            overflow: hidden;
+            box-sizing: border-box;
+            box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.15);
+            background-color: #fff;
+            margin-top: 10px;
+        }
+        .dark .fi-wi-intern-gantt-chart .gantt {
+            background-color: #1f2937;
+            box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.5);
+            border: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        .fi-wi-intern-gantt-chart .gantt__row {
+            display: grid;
+            grid-template-columns: 180px 1fr;
+            background-color: #fff;
+            position: relative;
+        }
+        .dark .fi-wi-intern-gantt-chart .gantt__row {
+            background-color: #111827;
+        }
+        .fi-wi-intern-gantt-chart .gantt__row:nth-child(even) {
+            background-color: #f9fafb;
+        }
+        .dark .fi-wi-intern-gantt-chart .gantt__row:nth-child(even) {
+            background-color: #1f2937/40;
+        }
+        .fi-wi-intern-gantt-chart .gantt__row:nth-child(even) .gantt__row-first {
+            background-color: #f9fafb;
+        }
+        .dark .fi-wi-intern-gantt-chart .gantt__row:nth-child(even) .gantt__row-first {
+            background-color: #1f2937/40;
+        }
+        .fi-wi-intern-gantt-chart .gantt__row--lines {
+            position: absolute;
+            height: 100%;
+            width: 100%;
+            background-color: transparent;
+            grid-template-columns: 180px repeat(12, 1fr);
+            pointer-events: none;
+            z-index: 1;
+        }
+        .fi-wi-intern-gantt-chart .gantt__row--lines span {
+            display: block;
+            border-right: 1px solid rgba(0, 0, 0, 0.05);
+            height: 100%;
+        }
+        .dark .fi-wi-intern-gantt-chart .gantt__row--lines span {
+            border-right: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        .fi-wi-intern-gantt-chart .gantt__row--lines span.marker {
+            background-color: rgba(10, 52, 68, 0.08);
+            z-index: 2;
+            border-left: 1px dashed rgba(239, 68, 68, 0.5);
+            border-right: 1px dashed rgba(239, 68, 68, 0.5);
+        }
+        .dark .fi-wi-intern-gantt-chart .gantt__row--lines span.marker {
+            background-color: rgba(255, 255, 255, 0.03);
+        }
+        .fi-wi-intern-gantt-chart .gantt__row--months {
+            color: #fff;
+            background-color: #0a3444 !important;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+            grid-template-columns: 180px repeat(12, 1fr);
+            z-index: 5;
+        }
+        .dark .fi-wi-intern-gantt-chart .gantt__row--months {
+            background-color: #030712 !important;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        .fi-wi-intern-gantt-chart .gantt__row--months .gantt__row-first {
+            border-top: 0 !important;
+            background-color: #0a3444 !important;
+            color: #fff;
+        }
+        .dark .fi-wi-intern-gantt-chart .gantt__row--months .gantt__row-first {
+            background-color: #030712 !important;
+        }
+        .fi-wi-intern-gantt-chart .gantt__row--months span {
+            text-align: center;
+            font-size: 13px;
+            align-self: center;
+            font-weight: bold;
+            padding: 15px 0;
+        }
+        .fi-wi-intern-gantt-chart .gantt__row-first {
+            background-color: #fff;
+            border-width: 1px 0 0 0;
+            border-color: rgba(0, 0, 0, 0.05);
+            border-style: solid;
+            padding: 15px 12px;
+            font-size: 13px;
+            font-weight: bold;
+            text-align: left;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            color: #374151;
+            z-index: 2;
+        }
+        .dark .fi-wi-intern-gantt-chart .gantt__row-first {
+            background-color: #111827;
+            border-color: rgba(255, 255, 255, 0.05);
+            color: #d1d5db;
+        }
+        .fi-wi-intern-gantt-chart .gantt__row-bars {
+            list-style: none;
+            display: grid;
+            padding: 12px 0;
+            margin: 0;
+            grid-template-columns: repeat(12, 1fr);
+            grid-gap: 8px 0;
+            border-top: 1px solid rgba(221, 221, 221, 0.4);
+            z-index: 2;
+            width: 100%;
+        }
+        .dark .fi-wi-intern-gantt-chart .gantt__row-bars {
+            border-top: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        .fi-wi-intern-gantt-chart .gantt__row-bars li {
+            font-weight: 600;
+            text-align: left;
+            font-size: 12px;
+            min-height: 28px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 4px 14px;
+            color: #fff;
+            overflow: hidden;
+            position: relative;
+            cursor: pointer;
+            border-radius: 20px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+            transition: all 0.2s ease;
+        }
+        .fi-wi-intern-gantt-chart .gantt__row-bars li:hover {
+            transform: scale(1.01);
+            filter: brightness(1.05);
+        }
+        .fi-wi-intern-gantt-chart .gantt__row-bars li.stripes {
+            background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.12) 5px, rgba(255,255,255,.12) 12px);
+        }
+    </style>
+
     <x-filament::section class="fi-wi-intern-gantt-chart">
         <x-slot name="heading">
             <div class="flex items-center justify-between">
@@ -23,112 +178,84 @@
                 </p>
             </div>
         @else
-            <div class="overflow-x-auto rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm bg-white dark:bg-gray-900">
-                <div class="min-w-[900px] flex flex-col">
-                    <!-- Header Row -->
-                    <div class="flex bg-gray-50 dark:bg-gray-800/40 border-b border-gray-200 dark:border-gray-800 text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider">
-                        <!-- Left Panel: Intern Info Title -->
-                        <div class="w-64 flex-shrink-0 p-4 border-r border-gray-200 dark:border-gray-800 flex items-center bg-gray-50 dark:bg-gray-800/50">
-                            Stajyer Bilgisi
-                        </div>
-                        <!-- Right Panel: Months Timeline (Absolute layout to prevent flexbox squishing) -->
-                        <div class="flex-1 relative h-12">
-                            @foreach($months as $month)
-                                <div style="left: {{ $month['left'] }}%; width: {{ $month['width'] }}%;" class="absolute inset-y-0 border-r border-gray-200 dark:border-gray-800 last:border-r-0 flex items-center justify-center text-xs font-semibold text-gray-600 dark:text-gray-400 px-1 truncate">
-                                    {{ $month['name'] }}
-                                </div>
-                            @endforeach
-                        </div>
+            <div class="overflow-x-auto">
+                <div class="min-w-[850px] gantt">
+                    <!-- Months Header Row -->
+                    <div class="gantt__row gantt__row--months">
+                        <div class="gantt__row-first">Stajyer Bilgisi</div>
+                        @foreach($monthNames as $name)
+                            <span>{{ $name }}</span>
+                        @endforeach
                     </div>
 
-                    <!-- Body Rows -->
-                    <div class="divide-y divide-gray-100 dark:divide-gray-800">
-                        @foreach($interns as $intern)
-                            <div class="flex hover:bg-gray-50/30 dark:hover:bg-gray-800/10 transition-colors">
-                                <!-- Left Panel: Intern Info -->
-                                <div class="w-64 flex-shrink-0 p-4 border-r border-gray-200 dark:border-gray-800 flex flex-col justify-center bg-gray-50/10 dark:bg-gray-800/5">
-                                    <span class="font-bold text-sm text-gray-900 dark:text-white truncate">
-                                        {{ $intern['name'] }}
+                    <!-- Background Grid Lines & Marker Row -->
+                    <div class="gantt__row gantt__row--lines">
+                        <span></span>
+                        @for($i = 1; $i <= 12; $i++)
+                            <span class="{{ $i === $currentMonth ? 'marker' : '' }}"></span>
+                        @endfor
+                    </div>
+
+                    <!-- Intern Data Rows -->
+                    @foreach($interns as $intern)
+                        <div class="gantt__row">
+                            <div class="gantt__row-first">
+                                <span class="font-bold text-gray-900 dark:text-white">{{ $intern['name'] }}</span>
+                                <span class="text-[10px] text-gray-400 dark:text-gray-500 font-normal mt-0.5">{{ $intern['total_days'] }} İş Günü</span>
+                            </div>
+                            <ul class="gantt__row-bars">
+                                <li 
+                                    style="grid-column: {{ $intern['grid_start'] }}/{{ $intern['grid_end'] }}; background-color: {{ $intern['hex_color'] }};" 
+                                    class="{{ $intern['is_stripes'] ? 'stripes' : '' }}"
+                                    x-data="{ open: false }"
+                                    @mouseenter="open = true"
+                                    @mouseleave="open = false"
+                                >
+                                    <span class="truncate pr-1">{{ $intern['start_date'] }}</span>
+                                    <span class="text-[10px] opacity-90 shrink-0 bg-white/20 px-1.5 py-0.5 rounded-full font-bold">
+                                        {{ $intern['end_date'] }}
                                     </span>
-                                    <span class="text-[10px] text-gray-500 dark:text-gray-400 flex items-center gap-1 mt-1">
-                                        <svg class="w-3.5 h-3.5 text-gray-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z" />
-                                        </svg>
-                                        {{ $intern['total_days'] }} Gün Staj
-                                    </span>
-                                </div>
 
-                                <!-- Right Panel: Timeline Gantt Bar Area -->
-                                <div class="flex-1 relative min-h-[72px] overflow-hidden">
-                                    <!-- Background Grid Lines -->
-                                    @foreach($months as $month)
-                                        <div style="left: {{ $month['left'] }}%; width: {{ $month['width'] }}%;" class="absolute inset-y-0 border-r border-gray-100 dark:border-gray-800/40 last:border-r-0 pointer-events-none"></div>
-                                    @endforeach
-
-                                    <!-- Today Line -->
-                                    @if($todayPercent !== null)
-                                        <div style="left: {{ $todayPercent }}%" class="absolute inset-y-0 w-px border-l border-dashed border-rose-500 z-10 pointer-events-none"></div>
-                                    @endif
-
-                                    <!-- Gantt Bar Pill -->
+                                    <!-- Interactive Glassmorphic Tooltip -->
                                     <div 
-                                        style="left: {{ $intern['left'] }}%; width: {{ $intern['width'] }}%;" 
-                                        class="absolute top-1/2 -translate-y-1/2 h-9 rounded-full shadow-sm border {{ $intern['color']['bg'] }} {{ $intern['color']['gradient'] }} bg-gradient-to-r {{ $intern['color']['text'] }} {{ $intern['color']['border'] }} flex items-center justify-between px-4 text-xs font-bold transition-all duration-200 hover:scale-[1.01] hover:shadow-md cursor-pointer z-20 group/bar"
-                                        x-data="{ open: false }"
-                                        @mouseenter="open = true"
-                                        @mouseleave="open = false"
+                                        x-show="open" 
+                                        x-transition:enter="transition ease-out duration-150"
+                                        x-transition:enter-start="opacity-0 translate-y-1"
+                                        x-transition:enter-end="opacity-100 translate-y-0"
+                                        x-transition:leave="transition ease-in duration-100"
+                                        x-transition:leave-start="opacity-100 translate-y-0"
+                                        x-transition:leave-end="opacity-0 translate-y-1"
+                                        class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-60 bg-gray-900/95 dark:bg-gray-950/95 backdrop-blur-md text-white rounded-xl p-3 shadow-xl border border-gray-800 pointer-events-none z-50 text-xs font-normal"
+                                        style="display: none;"
                                     >
-                                        <!-- Intern Name / Start Date inside the bar -->
-                                        <span class="truncate pr-1">
-                                            {{ $intern['start_date'] }}
-                                        </span>
-                                        <span class="text-[10px] opacity-95 shrink-0 bg-white/25 dark:bg-black/25 px-1.5 py-0.5 rounded-full font-semibold">
-                                            {{ $intern['end_date'] }}
-                                        </span>
-
-                                        <!-- Interactive Glassmorphic Tooltip -->
-                                        <div 
-                                            x-show="open" 
-                                            x-transition:enter="transition ease-out duration-150"
-                                            x-transition:enter-start="opacity-0 translate-y-1"
-                                            x-transition:enter-end="opacity-100 translate-y-0"
-                                            x-transition:leave="transition ease-in duration-100"
-                                            x-transition:leave-start="opacity-100 translate-y-0"
-                                            x-transition:leave-end="opacity-0 translate-y-1"
-                                            class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2.5 w-64 bg-gray-900/95 dark:bg-gray-950/95 backdrop-blur-md text-white rounded-xl p-3.5 shadow-xl border border-gray-800 pointer-events-none z-50 text-xs font-normal"
-                                            style="display: none;"
-                                        >
-                                            <div class="font-bold text-sm text-white border-b border-gray-800 pb-1.5 mb-2 flex justify-between items-center">
-                                                <span class="truncate pr-2">{{ $intern['name'] }}</span>
-                                                <span class="text-[10px] px-2 py-0.5 rounded-full bg-emerald-500/20 text-emerald-300 font-semibold border border-emerald-500/30 shrink-0">
-                                                    {{ $intern['total_days'] }} Gün
-                                                </span>
+                                        <div class="font-bold text-xs text-white border-b border-gray-800 pb-1 mb-1.5 flex justify-between items-center">
+                                            <span class="truncate pr-2">{{ $intern['name'] }}</span>
+                                            <span class="text-[9px] px-1.5 py-0.5 rounded-full bg-emerald-500/20 text-emerald-300 font-semibold border border-emerald-500/30 shrink-0">
+                                                {{ $intern['total_days'] }} Gün
+                                            </span>
+                                        </div>
+                                        <div class="space-y-1 text-gray-400">
+                                            <div class="flex justify-between">
+                                                <span>Staj Başlangıç:</span>
+                                                <span class="text-gray-200 font-semibold">{{ $intern['start_date'] }}</span>
                                             </div>
-                                            <div class="space-y-1.5 text-gray-400">
-                                                <div class="flex justify-between">
-                                                    <span>Staj Başlangıç:</span>
-                                                    <span class="text-gray-200 font-semibold">{{ $intern['start_date'] }}</span>
-                                                </div>
-                                                <div class="flex justify-between">
-                                                    <span>Staj Bitiş:</span>
-                                                    <span class="text-gray-200 font-semibold">{{ $intern['end_date'] }}</span>
-                                                </div>
+                                            <div class="flex justify-between">
+                                                <span>Staj Bitiş:</span>
+                                                <span class="text-gray-200 font-semibold">{{ $intern['end_date'] }}</span>
                                             </div>
                                         </div>
                                     </div>
-                                </div>
-                            </div>
-                        @endforeach
-                    </div>
+                                </li>
+                            </ul>
+                        </div>
+                    @endforeach
                 </div>
             </div>
             
-            @if($todayPercent !== null)
-                <div class="flex items-center gap-2 mt-3 text-xs text-rose-600 dark:text-rose-400 font-medium px-1">
-                    <span class="w-2.5 h-0.5 bg-rose-500 inline-block border-t border-dashed"></span>
-                    <span>Kesikli kırmızı çizgi bugünün tarihini göstermektedir.</span>
-                </div>
-            @endif
+            <div class="flex items-center gap-2 mt-3 text-xs text-rose-600 dark:text-rose-400 font-medium px-1">
+                <span class="w-2.5 h-0.5 bg-rose-500 inline-block border-t border-dashed"></span>
+                <span>Kırmızı kesikli dikey sütun günün ayını göstermektedir.</span>
+            </div>
         @endif
     </x-filament::section>
 </x-filament-widgets::widget>