From e351803db2160da009bb7262eec135bfe4ed0fd2 Mon Sep 17 00:00:00 2001
From: DoarMihai <mihai@invata-programare.ro>
Date: Thu, 7 Aug 2025 23:01:58 +0300
Subject: [PATCH] some progress

---
 app/Http/Controllers/HomeController.php       |  13 +-
 app/Http/Controllers/ShowController.php       |  10 +
 app/Models/Comment.php                        |   6 +
 app/Models/Movie.php                          |   3 +-
 .../MovieProcessingService.php                |  12 +-
 resources/js/theme-switcher.js                |  38 ++
 resources/sass/app.scss                       | 458 +++++++++++++++++-
 resources/views/forum/topics/show.blade.php   | 104 ++--
 resources/views/home.blade.php                | 101 +++-
 resources/views/layouts/app.blade.php         |   3 +
 resources/views/layouts/header.blade.php      | 153 ++++--
 .../upcoming-movies-component.blade.php       |   2 +-
 resources/views/movie/show.blade.php          | 292 ++++++-----
 routes/web.php                                |   2 +
 14 files changed, 971 insertions(+), 226 deletions(-)
 create mode 100644 resources/js/theme-switcher.js

diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
index 01ee665..88534b7 100644
--- a/app/Http/Controllers/HomeController.php
+++ b/app/Http/Controllers/HomeController.php
@@ -3,6 +3,8 @@
 namespace App\Http\Controllers;
 
 use Illuminate\Http\Request;
+use App\Models\Movie;
+use App\Models\Comment;
 
 class HomeController extends Controller
 {
@@ -12,6 +14,15 @@ class HomeController extends Controller
 
     public function index()
     {
-        return view('home');
+        $trendingMovies = Movie::orderBy('vote_average', 'desc')
+            ->take(5)
+            ->get();
+            
+        $latestReviews = Comment::with('author')
+            ->latest()
+            ->take(5)
+            ->get();
+
+        return view('home', compact('trendingMovies', 'latestReviews'));
     }
 }
diff --git a/app/Http/Controllers/ShowController.php b/app/Http/Controllers/ShowController.php
index 0d5be97..74bec62 100644
--- a/app/Http/Controllers/ShowController.php
+++ b/app/Http/Controllers/ShowController.php
@@ -25,4 +25,14 @@ class ShowController extends Controller
 
         return view('show.show', compact('show', 'comments', 'seasons'));
     }
+
+    public function season(string $slug, int $seasonNumber)
+    {
+
+    }
+
+    public function episode(string $slug, int $seasonNumber, int $episodeNumber)
+    {
+
+    }
 }
diff --git a/app/Models/Comment.php b/app/Models/Comment.php
index 0fcbb22..03d30ed 100644
--- a/app/Models/Comment.php
+++ b/app/Models/Comment.php
@@ -22,6 +22,12 @@ class Comment extends Model
         'tmdb_url',
     ];
 
+    protected $dates = [
+        'published_at',
+        'created_at',
+        'updated_at'
+    ];
+
     public function author()
     {
         return $this->hasOne(User::class, 'id', 'user_id');
diff --git a/app/Models/Movie.php b/app/Models/Movie.php
index 9081b4c..4173db4 100644
--- a/app/Models/Movie.php
+++ b/app/Models/Movie.php
@@ -72,7 +72,8 @@ class Movie extends Model
     public function director()
     {
         return $this->belongsToMany(Person::class, 'movie_cast', 'movie_id', 'person_id')
-            ->where('movie_cast.known_for_department', 'Directing')
+            ->where('movie_cast.job', 'Director')
+            ->orWhere('movie_cast.known_for_department', 'Directing')
             ;
     }
 
diff --git a/app/Service/MediaProcessing/MovieProcessingService.php b/app/Service/MediaProcessing/MovieProcessingService.php
index 6ce0a5d..7fb973a 100644
--- a/app/Service/MediaProcessing/MovieProcessingService.php
+++ b/app/Service/MediaProcessing/MovieProcessingService.php
@@ -53,7 +53,7 @@ class MovieProcessingService implements ProcessingInterface
                 $join->on('movies.tmdb_id', '=', 'item_to_fetch_jobs.tmdb_id');
             })
                 ->whereRaw("FIND_IN_SET('".ItemToFetchJobs::JOB_DETAILS."', item_to_fetch_jobs.jobs)")
-                ->where('item_to_fetch_jobs.type', 'movies')
+                ->whereIn('item_to_fetch_jobs.type', ['movies', 'movie'])
                 ->whereNull('movies.id')
                 ->take($batch)
                 ->get();
@@ -84,6 +84,10 @@ class MovieProcessingService implements ProcessingInterface
     private function getDetails($item)
     {
         $tmdbMovie = $this->moviesApi->getMovie($item->tmdb_id);
+        if (isset($tmdbMovie['status_code']) && $tmdbMovie['status_code'] == 34) {
+            echo "[N]";
+            return;
+        }
         $tmdbMovie['tmdb_id'] = $tmdbMovie['id'];
 
         Log::channel('fetch_export_items_details')->info("Processing TmdbId ".$tmdbMovie['tmdb_id']);
@@ -629,7 +633,8 @@ class MovieProcessingService implements ProcessingInterface
                 ItemToFetchJobs::create([
                     'tmdb_id' => $tmdbRecommendation['id'],
                     'type' => ItemToFetch::TYPE_MOVIE,
-                    'remaining_jobs' => json_encode($jobs),
+                    'remaining_jobs' => implode(',', $jobs),
+                    'jobs' => implode(',', $jobs),
                 ]);
 
                 $this->getDetails($itemToFetch);
@@ -694,7 +699,8 @@ class MovieProcessingService implements ProcessingInterface
             ItemToFetchJobs::create([
                 'tmdb_id' => $tmdbSimilarMovie['id'],
                 'type' => ItemToFetch::TYPE_MOVIE,
-                'remaining_jobs' => json_encode($jobs),
+                'remaining_jobs' => implode(',', $jobs),
+                'jobs' => implode(',', $jobs),
             ]);
 
             $this->getDetails($itemToFetch);
diff --git a/resources/js/theme-switcher.js b/resources/js/theme-switcher.js
new file mode 100644
index 0000000..e381e80
--- /dev/null
+++ b/resources/js/theme-switcher.js
@@ -0,0 +1,38 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const themeSwitcher = document.getElementById('themeSwitcher');
+    const themeIcon = themeSwitcher.querySelector('.iconify');
+    const themeText = themeSwitcher.querySelector('.theme-text');
+    
+    // Check for saved theme preference or use system preference
+    const savedTheme = localStorage.getItem('theme');
+    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    
+    if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
+        document.body.classList.add('dark-mode');
+        themeIcon.setAttribute('data-icon', 'mdi-weather-night');
+        themeText.textContent = 'Dark Mode';
+    } else {
+        document.body.classList.add('light-mode');
+        themeIcon.setAttribute('data-icon', 'mdi-weather-sunny');
+        themeText.textContent = 'Light Mode';
+    }
+    
+    // Theme switcher click handler
+    themeSwitcher.addEventListener('click', function() {
+        if (document.body.classList.contains('dark-mode')) {
+            // Switch to light mode
+            document.body.classList.remove('dark-mode');
+            document.body.classList.add('light-mode');
+            themeIcon.setAttribute('data-icon', 'mdi-weather-sunny');
+            themeText.textContent = 'Light Mode';
+            localStorage.setItem('theme', 'light');
+        } else {
+            // Switch to dark mode
+            document.body.classList.remove('light-mode');
+            document.body.classList.add('dark-mode');
+            themeIcon.setAttribute('data-icon', 'mdi-weather-night');
+            themeText.textContent = 'Dark Mode';
+            localStorage.setItem('theme', 'dark');
+        }
+    });
+}); 
\ No newline at end of file
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index d0c8d42..1144a52 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -15,7 +15,290 @@ $fa-font-path:        "/fonts";
 @import "font-awesome/scss/font-awesome";
 
 .dark-mode{
+    background-color: #1a1a1a !important;
+    color: #e0e0e0;
 
+    .forums{
+        .category{
+            .title{
+                font-size: 20px;
+                line-height: 1;
+                margin-bottom: 0;
+                color: #e0e0e0;
+                small{
+                    font-size: 14px;
+                    font-weight: 500;
+                    color: #a0a0a0;
+                }
+            }
+        }
+    }
+    .medium-info-box{
+        border: 1px solid #333;
+        border-radius: 15px;
+        padding: 15px;
+        text-align: center;
+        margin-top: 45px;
+        background: #2a2a2a;
+    }
+    .profile-page{
+        background: #2a2a2a;
+        padding: 15px 0;
+        margin-top: -50px;
+        .user-avatar{
+            width: 125px;
+            border-radius: 50%;
+            border: 2px solid #333;
+            box-shadow: 2px 2px 9px #000;
+        }
+        h1{
+            display: inline-block;
+            margin-right: 15px;
+            color: #e0e0e0;
+        }
+    }
+    .profile-page-menu{
+        background: rgba(42, 42, 42, 0.3);
+        ul{
+            margin: 0;
+            li{
+                padding: 5px;
+                a{
+                    text-decoration: none;
+                    color: #e0e0e0;
+                    &:hover{
+                        color: #fff;
+                    }
+                    &.active{
+                        color: #fff;
+                        text-decoration: underline;
+                    }
+                }
+            }
+        }
+    }
+    .large-list-item{
+        margin: 15px 0;
+        border-radius: 5px;
+        background: #2a2a2a;
+        border: 1px solid #333;
+        box-shadow: 0px 0px 5px #000;
+        color: #e0e0e0;
+    }
+    header{
+        background: #2a2a2a;
+        padding-right: 1rem;
+        border-bottom: 1px solid #333;
+    }
+    .card{
+        margin-bottom: 1rem;
+        box-shadow: 0px 1px 2px -1px #000;
+        background: #2a2a2a;
+        border: 1px solid #333;
+        .card-header{
+            background: #2a2a2a;
+            border-bottom: 1px solid #333;
+            color: #e0e0e0;
+        }
+        .card-body{
+            color: #e0e0e0;
+        }
+    }
+
+    .movie-card{
+        border: 1px solid #333;
+        background: #2a2a2a;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+        
+        &:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+        }
+
+        .quick-actions{
+            background: #333;
+            border-top: 1px solid #444;
+            
+            li {
+                border-right: 1px solid #444;
+                
+                a {
+                    color: #a0a0a0;
+                    
+                    &:hover {
+                        background: #444;
+                        color: #e0e0e0;
+                    }
+                }
+            }
+        }
+    }
+
+    .user-actions{
+        padding: 5px;
+        .mark-as-seen-btn{
+            margin-top: 5px;
+            display: block;
+            border: 1px solid #903eb3;
+            padding: 7px 10px;
+            text-decoration: none;
+            color: #e0e0e0;
+            &:hover{
+                color: white;
+                transition: all .5s;
+                background: #903eb3;
+            }
+            &.seen{
+                color: white;
+                background: #903eb3;
+            }
+        }
+        .like-btn{
+            display: block;
+            margin-top: 5px;
+            padding: 7px 10px;
+            text-decoration: none;
+            border: 1px solid #16a085;
+            color: #e0e0e0;
+            &:hover{
+                color: white;
+                transition: all .5s;
+                background: #16a085;
+            }
+            &.liked{
+                color: white;
+                background: #16a085;
+            }
+        }
+        .add-to-list-btn{
+            display: block;
+            margin-top: 5px;
+            padding: 7px 10px;
+            text-decoration: none;
+            border: 1px solid #ff5f06;
+            color: #e0e0e0;
+            &:hover{
+                color: white;
+                transition: all .5s;
+                background: #ff5f06;
+            }
+            &.listed{
+                color: white;
+                background: #ff5f06;
+            }
+        }
+    }
+
+    .right-sidebar {
+        .card {
+            background: #2a2a2a;
+            border: 1px solid #333;
+            
+            .card-header {
+                background: #333;
+                color: #e0e0e0;
+                border-bottom: 1px solid #444;
+            }
+            
+            .card-body {
+                color: #e0e0e0;
+            }
+        }
+        
+        .trending-movies {
+            .movie-item {
+                border-bottom: 1px solid #444;
+                
+                .movie-info {
+                    h6 {
+                        color: #e0e0e0;
+                    }
+                    
+                    .rating {
+                        color: #a0a0a0;
+                    }
+                }
+            }
+        }
+        
+        .quick-links {
+            ul {
+                li {
+                    border-bottom: 1px solid #444;
+                    
+                    a {
+                        color: #e0e0e0;
+                        
+                        &:hover {
+                            color: #0d6efd;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .threads-page{
+        .thread-info{
+            background: #333;
+            border-radius: 15px;
+            padding: 15px;
+            color: #e0e0e0;
+        }
+        .topics-list{
+            .no-topics{
+                text-align: center;
+                padding: 15px;
+                border: 1px solid #333;
+                border-radius: 15px;
+                margin-top: 15px;
+                color: #e0e0e0;
+            }
+        }
+    }
+
+    .topic-row{
+        border-bottom: 1px dashed #444;
+    }
+
+    .navbar {
+        background: #2a2a2a;
+        border-bottom: 1px solid #333;
+        
+        .navbar-brand {
+            color: #e0e0e0;
+        }
+        
+        .nav-link {
+            color: #e0e0e0;
+            
+            &:hover {
+                color: #fff;
+            }
+        }
+    }
+
+    .form-control {
+        background: #333;
+        border: 1px solid #444;
+        color: #e0e0e0;
+        
+        &:focus {
+            background: #333;
+            border-color: #555;
+            color: #e0e0e0;
+        }
+    }
+
+    .btn-outline-primary {
+        color: #0d6efd;
+        border-color: #0d6efd;
+        
+        &:hover {
+            background: #0d6efd;
+            color: #fff;
+        }
+    }
 }
 
 body.light-mode{
@@ -126,16 +409,74 @@ body.light-mode{
     }
 
     .movie-card{
-        border: 1px solid #c3c4c5;
-        background: #d9d9d9;
-        box-shadow: 0px 0px 3px 1px #ccc;
+        border: 1px solid #e0e0e0;
+        background: white;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        border-radius: 8px;
+        overflow: hidden;
+        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+        
+        &:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+        }
+
+        img {
+            width: 100%;
+            height: auto;
+            object-fit: cover;
+            border-radius: 8px 8px 0 0;
+        }
+
         .quick-actions{
             list-style: none;
-            padding: 2px 0px 7px 0px;
-            li{
-                float: left;
-                width: 33%;
+            padding: 0;
+            margin: 0;
+            display: flex;
+            justify-content: space-between;
+            background: #f8f9fa;
+            border-top: 1px solid #e0e0e0;
+            
+            li {
+                flex: 1;
                 text-align: center;
+                border-right: 1px solid #e0e0e0;
+                
+                &:last-child {
+                    border-right: none;
+                }
+                
+                a {
+                    color: #6c757d;
+                    text-decoration: none;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    gap: 4px;
+                    padding: 8px;
+                    transition: all 0.2s ease;
+                    font-size: 0.85rem;
+                    
+                    &:hover {
+                        background: #e9ecef;
+                        color: #495057;
+                    }
+                    
+                    .iconify {
+                        font-size: 1.1rem;
+                    }
+                }
+
+                // Special styling for the rating item
+                &:last-child a {
+                    flex-direction: row;
+                    justify-content: center;
+                    gap: 4px;
+                    
+                    .iconify {
+                        margin-top: 0;
+                    }
+                }
             }
         }
     }
@@ -305,4 +646,107 @@ body.light-mode{
     .topic-row{
         border-bottom: 1px dashed #ccc;
     }
+
+    .right-sidebar {
+        .card {
+            border-radius: 8px;
+            overflow: hidden;
+            margin-bottom: 1.5rem;
+            
+            .card-header {
+                background: #f8f9fa;
+                padding: 1rem;
+                font-weight: 600;
+                border-bottom: 1px solid #e0e0e0;
+            }
+            
+            .card-body {
+                padding: 1rem;
+            }
+        }
+        
+        .trending-movies {
+            .movie-item {
+                display: flex;
+                align-items: center;
+                padding: 0.5rem 0;
+                border-bottom: 1px solid #e0e0e0;
+                
+                &:last-child {
+                    border-bottom: none;
+                }
+                
+                img {
+                    width: 50px;
+                    height: 75px;
+                    object-fit: cover;
+                    border-radius: 4px;
+                    margin-right: 1rem;
+                }
+                
+                .movie-info {
+                    flex: 1;
+                    
+                    h6 {
+                        margin: 0;
+                        font-size: 0.9rem;
+                    }
+                    
+                    .rating {
+                        font-size: 0.8rem;
+                        color: #6c757d;
+                    }
+                }
+            }
+        }
+        
+        .quick-links {
+            ul {
+                list-style: none;
+                padding: 0;
+                margin: 0;
+                
+                li {
+                    padding: 0.5rem 0;
+                    border-bottom: 1px solid #e0e0e0;
+                    
+                    &:last-child {
+                        border-bottom: none;
+                    }
+                    
+                    a {
+                        color: #495057;
+                        text-decoration: none;
+                        display: flex;
+                        align-items: center;
+                        gap: 0.5rem;
+                        
+                        &:hover {
+                            color: #0d6efd;
+                        }
+                        
+                        .iconify {
+                            font-size: 1.2rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.theme-switcher {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.5rem 1rem;
+    transition: all 0.3s ease;
+    
+    &:hover {
+        opacity: 0.8;
+    }
+    
+    .iconify {
+        font-size: 1.2rem;
+    }
 }
diff --git a/resources/views/forum/topics/show.blade.php b/resources/views/forum/topics/show.blade.php
index 53b1d05..1b3ced7 100644
--- a/resources/views/forum/topics/show.blade.php
+++ b/resources/views/forum/topics/show.blade.php
@@ -2,41 +2,52 @@
 
 @section('content')
     <div class="container-fluid threads-page">
-        <div class="row">
-            <div class="col-md-12">
-                <div class="topic-name">
-                    {{ $topic->name }}
-                </div>
-            </div>
-        </div>
         <div class="row justify-content-center">
             <div class="col-md-10 forums">
-                <div class="topic-posts">
-                    @foreach($posts as $post)
-                        <div class="post">
-                            <div class="card">
-                                <div class="card-header">
-                                    <a href="">{{ $post->author->name }}</a> | {{ $post->created_at->diffForHumans() }}
+                <div class="card category">
+                    <div class="card-header">
+                        <h1 class="title">
+                            <div class="row">
+                                <div class="col-md-12">
+                                    {{ $topic->name }} <br>
+                                    <small>Created by {{ $topic->author->name }} | {{ $topic->created_at->diffForHumans() }}</small>
                                 </div>
-                                <div class="card-body">
-                                    <div class="row">
-                                        <div class="col-md-1">
-                                            avatar <br> name <br> rank & co
-                                        </div>
-                                        <div class="col-md-11">
-                                            {{ $post->content }}
+                            </div>
+                        </h1>
+                    </div>
+                    <div class="card-body">
+                        @foreach($posts as $post)
+                            <div class="row post-row">
+                                <div class="col-md-1">
+                                    <div class="text-center">
+                                        <img src="{{ $post->author->avatar ?? 'https://ui-avatars.com/api/?name=' . urlencode($post->author->name) }}" 
+                                             alt="{{ $post->author->name }}" 
+                                             class="rounded-circle" 
+                                             width="64" 
+                                             height="64">
+                                        <div class="mt-2">
+                                            <small>{{ $post->author->name }}</small>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="card-footer">
-                                    <div class="float-end">
-                                        <a href="" class="btn btn-primary btn-sm">Reply</a>
-                                        <a href="" class="btn btn-secondary btn-sm">Like</a>
+                                <div class="col-md-11">
+                                    <div class="post-content">
+                                        {!! $post->content !!}
+                                    </div>
+                                    <div class="post-meta">
+                                        <small>Posted {{ $post->created_at->diffForHumans() }}</small>
+                                        <div class="float-end">
+                                            <a href="#" class="btn btn-primary btn-sm">Reply</a>
+                                            <a href="#" class="btn btn-secondary btn-sm">Like</a>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
-                        </div>
-                    @endforeach
+                            @if(!$loop->last)
+                                <hr>
+                            @endif
+                        @endforeach
+                    </div>
                 </div>
                 {{ $posts->links() }}
                 <hr>
@@ -54,21 +65,40 @@
             </div>
             <div class="col-md-2">
                 <div class="card">
-                    <div class="user-actions">
-                        <ul>
-                            <li>
-                                <a href=""><span class="iconify" data-icon="mdi-eye-check-outline"></span> Mark as seen</a>
+                    <div class="card-header">
+                        <h5>Forum Stats</h5>
+                    </div>
+                    <div class="card-body">
+                        <ul class="list-unstyled">
+                            <li class="mb-2">
+                                <span class="iconify me-1" data-icon="mdi-eye"></span>
+                                Views: {{ $topic->views_no }}
                             </li>
-                            <li>
-                                <a href=""><span class="iconify" data-icon="mdi-thumb-up-outline"></span> Like</a>
+                            <li class="mb-2">
+                                <span class="iconify me-1" data-icon="mdi-message-text"></span>
+                                Replies: {{ $topic->replies_no }}
                             </li>
-                            <li>
-                                <a href=""><span class="iconify" data-icon="mdi-playlist-check"></span> add to list</a>
+                            <li class="mb-2">
+                                <span class="iconify me-1" data-icon="mdi-clock-outline"></span>
+                                Created: {{ $topic->created_at->diffForHumans() }}
                             </li>
                         </ul>
-                        <hr>
-                        rate
-                        <hr>
+                    </div>
+                </div>
+                <div class="card mt-3">
+                    <div class="card-header">
+                        <h5>Similar Topics</h5>
+                    </div>
+                    <div class="card-body">
+                        <ul class="list-unstyled">
+                            @foreach($similarTopics as $similarTopic)
+                                <li class="mb-2">
+                                    <a href="{{ route('forums.thread.topics.show', [$thread->category->slug, $thread->slug, $similarTopic->slug]) }}">
+                                        {{ $similarTopic->name }}
+                                    </a>
+                                </li>
+                            @endforeach
+                        </ul>
                     </div>
                 </div>
             </div>
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index c9642e6..979b22d 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -4,42 +4,101 @@
 <div class="container-fluid">
     <div class="row justify-content-center">
         <div class="col-md-10">
-
-            <div class="card">
-                <div class="card-body">
-                    <img src="https://a.ltrbxd.com/sm/upload/zl/t8/nl/gy/yir-banner-1900-o.png?k=caf651e2bd" alt="" class="img img-fluid">
+            <div class="card mb-4">
+                <div class="card-body p-0">
+                    <img src="https://a.ltrbxd.com/sm/upload/zl/t8/nl/gy/yir-banner-1900-o.png?k=caf651e2bd" alt="" class="img-fluid w-100">
                 </div>
             </div>
 
-            <div class="card">
-                <div class="card-header">
-                    New movies
-                    <div class="float-end">
-                        <a href="">view all &rarr;</a>
-                    </div>
+            <div class="card mb-4">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <h5 class="mb-0">New Movies</h5>
+                    <a href="{{ route('movie.index') }}" class="btn btn-sm btn-outline-primary">View All &rarr;</a>
                 </div>
                 <div class="card-body">
                     @livewire(App\Livewire\Homepage\Movies\NewMoviesComponent::class)
                 </div>
             </div>
 
-            <div class="card">
-                <div class="card-header">
-                    Upcoming movies
-                    <div class="float-end">
-                        <a href="">view all &rarr;</a>
-                    </div>
+            <div class="card mb-4">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <h5 class="mb-0">Upcoming Movies</h5>
+                    <a href="{{ route('movie.index') }}" class="btn btn-sm btn-outline-primary">View All &rarr;</a>
                 </div>
                 <div class="card-body">
                     @livewire(App\Livewire\Homepage\Movies\UpcomingMoviesComponent::class)
                 </div>
             </div>
-
-            latest members
-
         </div>
-        <div class="col-md-2">
-            right
+
+        <div class="col-md-2 right-sidebar">
+            <div class="card">
+                <div class="card-header">Trending Now</div>
+                <div class="card-body trending-movies">
+                    @foreach($trendingMovies as $movie)
+                        <div class="movie-item">
+                            <img src="http://image.tmdb.org/t/p/w92/{{ $movie->poster_path }}" alt="{{ $movie->title }}">
+                            <div class="movie-info">
+                                <h6>{{ $movie->title }}</h6>
+                                <div class="rating">
+                                    <span class="iconify" data-icon="mdi-star"></span>
+                                    {{ number_format($movie->vote_average, 1) }}
+                                </div>
+                            </div>
+                        </div>
+                    @endforeach
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="card-header">Quick Links</div>
+                <div class="card-body quick-links">
+                    <ul>
+                        <li>
+                            <a href="{{ route('movie.index') }}">
+                                <span class="iconify" data-icon="mdi-movie"></span>
+                                All Movies
+                            </a>
+                        </li>
+                        <li>
+                            <a href="{{ route('show.index') }}">
+                                <span class="iconify" data-icon="mdi-television"></span>
+                                TV Shows
+                            </a>
+                        </li>
+                        <li>
+                            <a href="{{ route('celebrity.index') }}">
+                                <span class="iconify" data-icon="mdi-account-group"></span>
+                                Celebrities
+                            </a>
+                        </li>
+                        <li>
+                            <a href="{{ route('forums.index') }}">
+                                <span class="iconify" data-icon="mdi-forum"></span>
+                                Forums
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="card-header">Latest Reviews</div>
+                <div class="card-body">
+                    @foreach($latestReviews as $review)
+                        <div class="review-item mb-3">
+                            <div class="d-flex align-items-center mb-2">
+                                <img src="{{ $review->author_avatar }}" alt="{{ $review->author_name }}" class="rounded-circle me-2" width="32" height="32">
+                                <div>
+                                    <h6 class="mb-0">{{ $review->author_name }}</h6>
+                                    <small class="text-muted">{{ \Carbon\Carbon::createFromTimeString($review->published_at)->diffForHumans() }}</small>
+                                </div>
+                            </div>
+                            <p class="mb-0 text-truncate">{{ $review->content }}</p>
+                        </div>
+                    @endforeach
+                </div>
+            </div>
         </div>
     </div>
 </div>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 397daed..9ce25f6 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -37,5 +37,8 @@
     </div>
     @livewireScripts
     @bukScripts
+    <script src="{{ asset('js/app.js') }}" defer></script>
+    <script src="{{ asset('js/theme-switcher.js') }}" defer></script>
+    @stack('scripts')
 </body>
 </html>
diff --git a/resources/views/layouts/header.blade.php b/resources/views/layouts/header.blade.php
index 3118e0f..a4317d5 100644
--- a/resources/views/layouts/header.blade.php
+++ b/resources/views/layouts/header.blade.php
@@ -1,51 +1,110 @@
-<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
-    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
-        <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
-        <span class="fs-4">Simple header</span>
-    </a>
-    <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
-        <input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..." aria-label="Search">
-    </form>
-    <ul class="nav nav-pills">
-        <li class="nav-item"><a href="/" class="nav-link">Home</a></li>
-        <li class="nav-item"><a href="{{ route('movie.index') }}" class="nav-link">Movies</a></li>
-        <li class="nav-item"><a href="{{ route('show.index') }}" class="nav-link">Tv Shows</a></li>
-        <li class="nav-item"><a href="{{ route('celebrity.index') }}" class="nav-link">Celebrities</a></li>
-        <li class="nav-item"><a href="{{ route('forums.index') }}" class="nav-link">Forums</a></li>
-        <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
-        @guest
-            @if (Route::has('login'))
-                <li class="nav-item">
-                    <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
-                </li>
-            @endif
+<header class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
+    <div class="container-fluid px-4">
+        <a href="/" class="navbar-brand d-flex align-items-center">
+            <span class="fs-4 fw-bold" style="font-family: 'Lobster', cursive;">MovieAddict</span>
+        </a>
 
-            @if (Route::has('register'))
-                <li class="nav-item">
-                    <a class="nav-link active" href="{{ route('register') }}">{{ __('Register') }}</a>
-                </li>
-            @endif
-        @else
-            <li class="nav-item dropdown">
-                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
-                    {{ Auth::user()->name }}
-                </a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
 
-                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
-                    <a href="{{ route('profile.list.index', Auth::user()->slug) }}" class="dropdown-item">
-                        Lists
-                    </a>
-                    <a class="dropdown-item" href="{{ route('logout') }}"
-                       onclick="event.preventDefault();
-                                                 document.getElementById('logout-form').submit();">
-                        {{ __('Logout') }}
-                    </a>
-
-                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
-                        @csrf
-                    </form>
+        <div class="collapse navbar-collapse" id="navbarContent">
+            <form class="d-flex mx-auto my-2 my-lg-0" role="search">
+                <div class="input-group">
+                    <input type="search" class="form-control" placeholder="Search movies, shows, celebrities..." aria-label="Search">
+                    <button class="btn btn-outline-primary" type="submit">
+                        <span class="iconify" data-icon="mdi-magnify"></span>
+                    </button>
                 </div>
-            </li>
-        @endguest
-    </ul>
+            </form>
+
+            <ul class="navbar-nav ms-auto">
+                <li class="nav-item">
+                    <a href="/" class="nav-link d-flex align-items-center">
+                        <span class="iconify me-1" data-icon="mdi-home"></span>
+                        Home
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a href="{{ route('movie.index') }}" class="nav-link d-flex align-items-center">
+                        <span class="iconify me-1" data-icon="mdi-movie"></span>
+                        Movies
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a href="{{ route('show.index') }}" class="nav-link d-flex align-items-center">
+                        <span class="iconify me-1" data-icon="mdi-television"></span>
+                        TV Shows
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a href="{{ route('celebrity.index') }}" class="nav-link d-flex align-items-center">
+                        <span class="iconify me-1" data-icon="mdi-account-group"></span>
+                        Celebrities
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a href="{{ route('forums.index') }}" class="nav-link d-flex align-items-center">
+                        <span class="iconify me-1" data-icon="mdi-forum"></span>
+                        Forums
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <button id="themeSwitcher" class="nav-link d-flex align-items-center theme-switcher">
+                        <span class="iconify me-1" data-icon="mdi-weather-sunny"></span>
+                        <span class="theme-text">Light Mode</span>
+                    </button>
+                </li>
+
+                @guest
+                    @if (Route::has('login'))
+                        <li class="nav-item">
+                            <a class="nav-link d-flex align-items-center" href="{{ route('login') }}">
+                                <span class="iconify me-1" data-icon="mdi-login"></span>
+                                {{ __('Login') }}
+                            </a>
+                        </li>
+                    @endif
+
+                    @if (Route::has('register'))
+                        <li class="nav-item">
+                            <a class="btn btn-primary text-white ms-2" href="{{ route('register') }}">
+                                <span class="iconify me-1" data-icon="mdi-account-plus"></span>
+                                {{ __('Register') }}
+                            </a>
+                        </li>
+                    @endif
+                @else
+                    <li class="nav-item dropdown">
+                        <a id="navbarDropdown" class="nav-link dropdown-toggle d-flex align-items-center" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
+                            <img src="{{ Auth::user()->avatar ?? 'https://ui-avatars.com/api/?name=' . urlencode(Auth::user()->name) }}" alt="{{ Auth::user()->name }}" class="rounded-circle me-2" width="32" height="32">
+                            {{ Auth::user()->name }}
+                        </a>
+
+                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
+                            <a href="{{ route('profile.show', Auth::user()->slug) }}" class="dropdown-item d-flex align-items-center">
+                                <span class="iconify me-2" data-icon="mdi-account"></span>
+                                Profile
+                            </a>
+                            <a href="{{ route('profile.list.index', Auth::user()->slug) }}" class="dropdown-item d-flex align-items-center">
+                                <span class="iconify me-2" data-icon="mdi-playlist-check"></span>
+                                My Lists
+                            </a>
+                            <div class="dropdown-divider"></div>
+                            <a class="dropdown-item d-flex align-items-center" href="{{ route('logout') }}"
+                               onclick="event.preventDefault();
+                                             document.getElementById('logout-form').submit();">
+                                <span class="iconify me-2" data-icon="mdi-logout"></span>
+                                {{ __('Logout') }}
+                            </a>
+
+                            <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
+                                @csrf
+                            </form>
+                        </div>
+                    </li>
+                @endguest
+            </ul>
+        </div>
+    </div>
 </header>
diff --git a/resources/views/livewire/homepage/movies/upcoming-movies-component.blade.php b/resources/views/livewire/homepage/movies/upcoming-movies-component.blade.php
index 5f56fc0..e74be7c 100644
--- a/resources/views/livewire/homepage/movies/upcoming-movies-component.blade.php
+++ b/resources/views/livewire/homepage/movies/upcoming-movies-component.blade.php
@@ -11,7 +11,7 @@
                             class="img img-fluid"
                         >
                     </a>
-                    <ul>
+                    <ul class="quick-actions">
                         <li>
                             {{--                            <span class="iconify" data-icon="mdi-check-bold"></span>--}}
                             <a href=""><span class="iconify" data-icon="mdi-check-outline"></span></a>
diff --git a/resources/views/movie/show.blade.php b/resources/views/movie/show.blade.php
index 5ce8d28..fd3f697 100644
--- a/resources/views/movie/show.blade.php
+++ b/resources/views/movie/show.blade.php
@@ -1,179 +1,255 @@
 @extends('layouts.app')
 
 @section('content')
-    <div class="container-fluid movie-page">
-        <div class="row justify-content-center">
-            <div class="col-md-10">
-                <div class="card">
-                    <div class="card-header">
-                        <h1 class="movie-title">{{ $movie->title }}</h1> @if($movie->release_date)(<a href="">{{ $movie->release_date->format('Y') }}</a>)@endif
-                    </div>
+    <div class="container-fluid movie-page py-4">
+        <div class="row">
+            <!-- Main Content -->
+            <div class="col-lg-9">
+                <!-- Movie Header -->
+                <div class="card mb-4">
                     <div class="card-body">
                         <div class="row">
-                            <div class="col-md-2">
-                                <img
-                                    src="http://image.tmdb.org/t/p/w185/{{ $movie->poster_path }}"
-                                    alt="{{ $movie->title }}"
-                                    title="{{ $movie->title }} @if($movie->release_date)({{ $movie->release_date->format('Y') }})@endif"
-                                    class="img img-fluid"
-                                >
+                            <!-- Poster and Actions -->
+                            <div class="col-md-3">
+                                <div class="movie-poster mb-3">
+                                    <img src="http://image.tmdb.org/t/p/w342/{{ $movie->poster_path }}"
+                                         alt="{{ $movie->title }}"
+                                         class="img-fluid rounded shadow-sm"
+                                         title="{{ $movie->title }} @if($movie->release_date)({{ $movie->release_date->format('Y') }})@endif">
+                                </div>
 
-                                <div class="watch-provider">
-                                    @foreach($movie->watchProviders as $watchProvider)
-                                        <img src="http://image.tmdb.org/t/p/w45/{{ $watchProvider->logo_path }}" alt="{{ $watchProvider->provider_name }}" title="{{ $watchProvider->provider_name }}">
-                                    @endforeach
-                                </div>
-                                <div class="external-ids">
-                                    @if($movie->externalIds && $movie->externalIds->tmdb_id)
-                                        <a href="{{ $movie->externalIds->tmdb_id }}"><img src="{{ asset('/img/tmdb.webp') }}" alt="" width="85"></a>
-                                    @endif
-                                    @if($movie->externalIds && $movie->externalIds->imdb_id)
-                                        <a href="{{ $movie->externalIds->imdb_id }}"><img src="{{ asset('/img/imdb.png') }}" alt="" width="85"></a>
-                                    @endif
+                                <!-- Watch Providers -->
+                                @if($movie->watchProviders->isNotEmpty())
+                                    <div class="watch-providers mb-3">
+                                        <h6 class="text-muted mb-2">Available on:</h6>
+                                        <div class="d-flex flex-wrap gap-2">
+                                            @foreach($movie->watchProviders as $watchProvider)
+                                                <img src="http://image.tmdb.org/t/p/w45/{{ $watchProvider->logo_path }}"
+                                                     alt="{{ $watchProvider->provider_name }}"
+                                                     title="{{ $watchProvider->provider_name }}"
+                                                     class="rounded">
+                                            @endforeach
+                                        </div>
+                                    </div>
+                                @endif
+
+                                <!-- External Links -->
+                                <div class="external-links mb-3">
+                                    <div class="d-flex gap-2">
+                                        @if($movie->externalIds && $movie->externalIds->tmdb_id)
+                                            <a href="{{ $movie->externalIds->tmdb_id }}" class="btn btn-sm btn-outline-secondary">
+                                                <img src="{{ asset('/img/tmdb.webp') }}" alt="TMDB" height="20">
+                                            </a>
+                                        @endif
+                                        @if($movie->externalIds && $movie->externalIds->imdb_id)
+                                            <a href="{{ $movie->externalIds->imdb_id }}" class="btn btn-sm btn-outline-secondary">
+                                                <img src="{{ asset('/img/imdb.png') }}" alt="IMDB" height="20">
+                                            </a>
+                                        @endif
+                                    </div>
                                 </div>
+
+                                <!-- Trailer Button -->
                                 @if($movie->trailer->first())
-                                   <a href="https://www.youtube.com/watch?v={{ $movie->trailer->first()->key }}" data-toggle="lightbox" class="btn btn-sm btn-block btn-secondary">View trailer</a>
+                                    <a href="https://www.youtube.com/watch?v={{ $movie->trailer->first()->key }}"
+                                       data-toggle="lightbox"
+                                       class="btn btn-primary w-100 mb-3">
+                                        <span class="iconify me-1" data-icon="mdi-play"></span>
+                                        Watch Trailer
+                                    </a>
                                 @endif
                             </div>
-                            <div class="col-md-10">
-                                <span>
-                                    Directed by
+
+                            <!-- Movie Info -->
+                            <div class="col-md-9">
+                                <h1 class="movie-title mb-2">
+                                    {{ $movie->title }}
+                                    @if($movie->release_date)
+                                        <span class="text-muted">({{ $movie->release_date->format('Y') }})</span>
+                                    @endif
+                                </h1>
+
+                                @if($movie->tagline)
+                                    <p class="tagline text-muted mb-3">{{ $movie->tagline }}</p>
+                                @endif
+
+                                <div class="directors mb-3">
+                                    <span class="text-muted">Directed by</span>
                                     @foreach($movie->director as $director)
-                                        <a href="">{{ $director->name }}</a>@if(!$loop->last), @endif
+                                        <a href="#" class="text-decoration-none">{{ $director->name }}</a>@if(!$loop->last), @endif
                                     @endforeach
-                                </span>
-                                <span>
-                                    <div class="tagline">{{ $movie->tagline }}</div>
-                                    <div class="overview">{{ $movie->overview }}</div>
-                                </span>
-                                <span>
-                                    <ul class="nav nav-tabs" id="myTab" role="tablist">
+                                </div>
+
+                                <div class="overview mb-4">
+                                    <h5 class="mb-2">Overview</h5>
+                                    <p class="text-muted">{{ $movie->overview }}</p>
+                                </div>
+
+                                <!-- Tabs -->
+                                <div class="movie-tabs">
+                                    <ul class="nav nav-tabs" id="movieTabs" role="tablist">
                                         <li class="nav-item" role="presentation">
-                                            <button class="nav-link active" id="details-tab" data-bs-toggle="tab" data-bs-target="#details-tab-pane" type="button" role="tab" aria-controls="details-tab-pane" aria-selected="true">Details</button>
+                                            <button class="nav-link active" id="details-tab" data-bs-toggle="tab" data-bs-target="#details" type="button" role="tab">Details</button>
                                         </li>
                                         <li class="nav-item" role="presentation">
-                                            <button class="nav-link" id="videos-tab" data-bs-toggle="tab" data-bs-target="#videos-tab-pane" type="button" role="tab" aria-controls="videos-tab-pane" aria-selected="false">Videos</button>
+                                            <button class="nav-link" id="videos-tab" data-bs-toggle="tab" data-bs-target="#videos" type="button" role="tab">Videos</button>
                                         </li>
                                         <li class="nav-item" role="presentation">
-                                            <button class="nav-link" id="cast-tab" data-bs-toggle="tab" data-bs-target="#cast-tab-pane" type="button" role="tab" aria-controls="cast-tab-pane" aria-selected="false">Cast</button>
+                                            <button class="nav-link" id="cast-tab" data-bs-toggle="tab" data-bs-target="#cast" type="button" role="tab">Cast</button>
                                         </li>
                                         <li class="nav-item" role="presentation">
-                                            <button class="nav-link" id="crew-tab" data-bs-toggle="tab" data-bs-target="#crew-tab-pane" type="button" role="tab" aria-controls="crew-tab-pane" aria-selected="false">Crew</button>
+                                            <button class="nav-link" id="crew-tab" data-bs-toggle="tab" data-bs-target="#crew" type="button" role="tab">Crew</button>
                                         </li>
                                         <li class="nav-item" role="presentation">
-                                            <button class="nav-link" id="releases-tab" data-bs-toggle="tab" data-bs-target="#releases-tab-pane" type="button" role="tab" aria-controls="releases-tab-pane" aria-selected="false">Releases</button>
+                                            <button class="nav-link" id="releases-tab" data-bs-toggle="tab" data-bs-target="#releases" type="button" role="tab">Releases</button>
                                         </li>
                                     </ul>
-                                    <div class="tab-content" id="myTabContent">
-                                        <div class="tab-pane fade show active" id="details-tab-pane" role="tabpanel" aria-labelledby="details-tab" tabindex="0">
+                                    <div class="tab-content p-3 border border-top-0 rounded-bottom" id="movieTabsContent">
+                                        <div class="tab-pane fade show active" id="details" role="tabpanel">
                                             @livewire(App\Livewire\MoviePage\Tabs\Details::class, ['movie' => $movie])
                                         </div>
-                                        <div class="tab-pane fade show" id="videos-tab-pane" role="tabpanel" aria-labelledby="videos-tab" tabindex="0">
+                                        <div class="tab-pane fade" id="videos" role="tabpanel">
                                             @livewire(App\Livewire\MoviePage\Tabs\Videos::class, ['movie' => $movie])
                                         </div>
-                                        <div class="tab-pane fade" id="cast-tab-pane" role="tabpanel" aria-labelledby="cast-tab" tabindex="0">
+                                        <div class="tab-pane fade" id="cast" role="tabpanel">
                                             @livewire(App\Livewire\MoviePage\Tabs\Cast::class, ['movie' => $movie])
                                         </div>
-                                        <div class="tab-pane fade" id="crew-tab-pane" role="tabpanel" aria-labelledby="crew-tab" tabindex="0">
+                                        <div class="tab-pane fade" id="crew" role="tabpanel">
                                             @livewire(App\Livewire\MoviePage\Tabs\Crew::class, ['movie' => $movie])
                                         </div>
-                                        <div class="tab-pane fade" id="releases-tab-pane" role="tabpanel" aria-labelledby="releases-tab" tabindex="0">
+                                        <div class="tab-pane fade" id="releases" role="tabpanel">
                                             @livewire(App\Livewire\MoviePage\Tabs\Releases::class, ['movie' => $movie])
                                         </div>
                                     </div>
-                                </span>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div class="card">
-                    <div class="card-header">Similar</div>
+
+                <!-- Similar Movies -->
+                <div class="card mb-4">
+                    <div class="card-header bg-white">
+                        <h5 class="mb-0">Similar Movies</h5>
+                    </div>
                     <div class="card-body">
                         @livewire(App\Livewire\MoviePage\Similar::class, ['movie' => $movie])
                     </div>
                 </div>
-                <div class="card">
-                    <div class="card-header">Recommended</div>
+
+                <!-- Recommendations -->
+                <div class="card mb-4">
+                    <div class="card-header bg-white">
+                        <h5 class="mb-0">Recommended</h5>
+                    </div>
                     <div class="card-body">
                         @livewire(App\Livewire\MoviePage\Recommendations::class, ['movie' => $movie])
                     </div>
                 </div>
-                <div class="card">
-                    <div class="card-header">Write review</div>
+
+                <!-- Reviews Section -->
+                <div class="card mb-4">
+                    <div class="card-header bg-white">
+                        <h5 class="mb-0">Reviews</h5>
+                    </div>
                     <div class="card-body">
                         @if(Auth::check())
-                            <form action="{{ route('movie.comment.store', $movie->slug) }}" method="POST">
+                            <form action="{{ route('movie.comment.store', $movie->slug) }}" method="POST" class="mb-4">
                                 @csrf
                                 <div class="form-group">
-                                    <label for="">Comment</label>
-                                    <textarea name="content" id="" cols="30" rows="3" class="form-control"></textarea>
+                                    <label for="content" class="form-label">Write a Review</label>
+                                    <textarea name="content" id="content" rows="3" class="form-control" placeholder="Share your thoughts about this movie..."></textarea>
                                     @error('content')
-                                        <div class="alert alert-danger">{{ $message }}</div>
+                                        <div class="text-danger mt-1">{{ $message }}</div>
                                     @enderror
                                 </div>
-                                <div class="form-group">
-                                    <br>
-                                    <div class="float-end">
-                                        <input type="submit" class="btn btn-sm btn-success" value="Post">
-                                    </div>
+                                <div class="mt-2">
+                                    <button type="submit" class="btn btn-primary">
+                                        <span class="iconify me-1" data-icon="mdi-send"></span>
+                                        Post Review
+                                    </button>
                                 </div>
                             </form>
                         @else
                             <div class="alert alert-info">
-                                You must be authenticated to comment! Please <a href="{{ route('login') }}">login</a> or <a href="{{ route('register') }}">register</a>.
+                                <span class="iconify me-1" data-icon="mdi-information"></span>
+                                You must be <a href="{{ route('login') }}" class="alert-link">logged in</a> to write a review.
                             </div>
                         @endif
+
+                        <!-- Reviews List -->
+                        <div class="reviews-list mt-4">
+                            @foreach($comments as $comment)
+                                <div class="review-item card mb-3">
+                                    <div class="card-body">
+                                        <div class="d-flex align-items-center mb-2">
+                                            @if($comment->author_avatar)
+                                                <img src="http://image.tmdb.org/t/p/w45/{{ $comment->author_avatar }}"
+                                                     alt="{{ $comment->author_name }}"
+                                                     class="rounded-circle me-2"
+                                                     width="40"
+                                                     height="40">
+                                            @else
+                                                <div class="rounded-circle bg-secondary me-2" style="width: 40px; height: 40px;"></div>
+                                            @endif
+                                            <div>
+                                                <h6 class="mb-0">
+                                                    @if($comment->author_name)
+                                                        {{ $comment->author_name }}
+                                                    @else
+                                                        <a href="#" class="text-decoration-none">{{ $comment->author->name }}</a>
+                                                    @endif
+                                                </h6>
+                                                <small class="text-muted">
+                                                    {{ \Carbon\Carbon::createFromTimeString($comment->published_at)->diffForHumans() }}
+                                                </small>
+                                            </div>
+                                            @if($comment->tmdb_id)
+                                                <span class="badge bg-success ms-2">
+                                                    <a href="https://www.themoviedb.org/review/{{ $comment->tmdb_id }}" class="text-white text-decoration-none">TMDB</a>
+                                                </span>
+                                            @endif
+                                        </div>
+                                        <div class="review-content">
+                                            {!! $comment->content !!}
+                                        </div>
+                                    </div>
+                                </div>
+                            @endforeach
+                        </div>
                     </div>
                 </div>
-                @foreach($comments as $comment)
-                    <div class="card">
-                        <div class="card-header">
-                            @if($comment->author_avatar)
-                                <img src="http://image.tmdb.org/t/p/w45/{{ $comment->author_avatar }}" alt="" width="25">
-                            @else
-                                // user avatar
-                            @endif
-                            @if($comment->author_name)
-                                {{ $comment->author_name }}
-                            @else
-                                <a href="">{{ $comment->author->name }}</a>
-                            @endif
-
-                            @if($comment->tmdb_id)
-                                <span class="badge text-bg-success btn-tmdb"><a href="https://www.themoviedb.org/review/{{ $comment->tmdb_id }}">TMDB</a></span>
-                            @endif
-                            <span class="rating">
-                                {{ $comment->author_rating }}
-                            </span>
-                            <span class="text-muted float-end">
-                                <small>
-                                    {{ $comment->published_at }}
-                                </small>
-                            </span>
-                        </div>
-                        <div class="card-body">
-                            {!! $comment->content !!}
-                        </div>
-                    </div>
-                @endforeach
             </div>
-            <div class="col-md-2">
+
+            <!-- Sidebar -->
+            <div class="col-lg-3">
                 <div class="card">
-                    <div class="user-actions">
-                            <a href="" class="mark-as-seen-btn {{ auth()->check() ? ($movie->wasListedBy('watched', auth()->user()) ? 'seen' : '') : '' }}" data-id="{{ $movie->id }}" data-type="movie" data-list="watched">
-                                <span class="iconify" data-icon="mdi-eye-check-outline"></span> Mark as seen
+                    <div class="card-body">
+                        <div class="user-actions">
+                            <a href="#" class="d-block mb-3 text-decoration-none mark-as-seen-btn {{ auth()->check() ? ($movie->wasListedBy('watched', auth()->user()) ? 'seen' : '') : '' }}"
+                               data-id="{{ $movie->id }}"
+                               data-type="movie"
+                               data-list="watched">
+                                <span class="iconify me-1" data-icon="mdi-eye-check-outline"></span>
+                                Mark as seen
                             </a>
-                            <a href="" class="like-btn {{ auth()->check() ? ($movie->wasListedBy('liked', auth()->user()) ? 'liked' : '') : '' }}" data-id="{{ $movie->id }}" data-type="movie" data-list="liked">
-                                <span class="iconify" data-icon="mdi-thumb-up-outline"></span> Like
+                            <a href="#" class="d-block mb-3 text-decoration-none like-btn {{ auth()->check() ? ($movie->wasListedBy('liked', auth()->user()) ? 'liked' : '') : '' }}"
+                               data-id="{{ $movie->id }}"
+                               data-type="movie"
+                               data-list="liked">
+                                <span class="iconify me-1" data-icon="mdi-thumb-up-outline"></span>
+                                Like
                             </a>
-                            <a href="" class="add-to-list-btn">
-                                <span class="iconify" data-icon="mdi-playlist-check"></span> add to list
-                                <span class="arrow float-end">
-                                    &darr;
+                            <a href="#" class="d-block mb-3 text-decoration-none add-to-list-btn">
+                                <span class="iconify me-1" data-icon="mdi-playlist-check"></span>
+                                Add to list
+                                <span class="float-end">
+                                    <span class="iconify" data-icon="mdi-chevron-down"></span>
                                 </span>
                             </a>
-                        <hr>
+                            <hr>
                             @include('layouts.rating')
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/routes/web.php b/routes/web.php
index 7755a26..a80d27e 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -20,6 +20,8 @@ Route::prefix('movies')->group(function () {
 Route::prefix('shows')->group(function () {
     Route::get('/', [\App\Http\Controllers\ShowController::class, 'index'])->name('show.index');
     Route::get('/{slug}', [\App\Http\Controllers\ShowController::class, 'show'])->name('show.show');
+//    Route::get('/{slug}/season/{seasonNumber}', [\App\Http\Controllers\ShowController::class, 'show'])->name('show.show');
+//    Route::get('/{slug}/season/{seasonNumber}/episode/{episodeNumber}', [\App\Http\Controllers\ShowController::class, 'show'])->name('show.show');
 });
 
 Route::prefix('celebrities')->group(function () {