From 112cf9433e17831d81f1a7bc78b031d215dd897f Mon Sep 17 00:00:00 2001
From: w33b <w33b@hstream.moe>
Date: Sat, 23 May 2026 14:00:11 +0200
Subject: [PATCH] Make background darker

---
 .../views/auth/confirm-password.blade.php     |  2 +-
 .../views/auth/forgot-password.blade.php      |  2 +-
 resources/views/auth/login.blade.php          |  8 +-
 resources/views/auth/reset-password.blade.php |  2 +-
 resources/views/auth/verify-email.blade.php   |  2 +-
 .../views/home/partials/tabs-middle.blade.php |  8 +-
 .../views/home/partials/tabs-top.blade.php    |  6 +-
 resources/views/layouts/app.blade.php         |  2 +-
 resources/views/layouts/guest.blade.php       |  2 +-
 resources/views/livewire/comments.blade.php   | 99 +++++++++----------
 .../views/stream/partials/gallery.blade.php   |  8 +-
 .../views/stream/partials/info.blade.php      |  4 +-
 12 files changed, 72 insertions(+), 73 deletions(-)

diff --git a/resources/views/auth/confirm-password.blade.php b/resources/views/auth/confirm-password.blade.php
index f462403..f503aec 100644
--- a/resources/views/auth/confirm-password.blade.php
+++ b/resources/views/auth/confirm-password.blade.php
@@ -1,5 +1,5 @@
 <x-guest-layout>
-    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-neutral-950/50 shadow-md overflow-hidden sm:rounded-lg">
+    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-neutral-800 shadow-md overflow-hidden sm:rounded-lg">
         <div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
             {{ __('This is a secure area of the application. Please confirm your password before continuing.') }}
         </div>
diff --git a/resources/views/auth/forgot-password.blade.php b/resources/views/auth/forgot-password.blade.php
index 0ece4d3..6be61ba 100644
--- a/resources/views/auth/forgot-password.blade.php
+++ b/resources/views/auth/forgot-password.blade.php
@@ -1,5 +1,5 @@
 <x-guest-layout>
-    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-neutral-950/50 shadow-md overflow-hidden sm:rounded-lg">
+    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-neutral-800 shadow-md overflow-hidden sm:rounded-lg">
         <div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
             {{ __('Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.') }}
         </div>
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index e9c1950..fac232f 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -3,13 +3,13 @@
     <div class="w-full sm:max-w-md mt-6">
         <ul class="flex list-none flex-row flex-wrap border-b-0 pl-0 relative " role="tablist" data-te-nav-ref>
             <li role="presentation" class="flex-auto text-center">
-                <a href="#tabs-login" class="rounded-l-lg my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white/50 dark:bg-neutral-950/50 backdrop-blur-sm dark:hover:bg-neutral-800 dark:data-[te-nav-active]:text-white"
+                <a href="#tabs-login" class="rounded-l-lg my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white/50 dark:bg-neutral-800 backdrop-blur-sm dark:hover:bg-neutral-900 dark:data-[te-nav-active]:text-white"
                     data-te-toggle="pill" data-te-target="#tabs-login" data-te-nav-active role="tab" aria-controls="tabs-login" aria-selected="true">
                     {{ __('Login') }}
                 </a>
             </li>
             <li role="presentation" class="flex-auto text-center">
-                <a href="#tabs-register" class="rounded-r-lg my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white/50 dark:bg-neutral-950/50 backdrop-blur-sm dark:hover:bg-neutral-800 dark:data-[te-nav-active]:text-white"
+                <a href="#tabs-register" class="rounded-r-lg my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white/50 dark:bg-neutral-800 backdrop-blur-sm dark:hover:bg-neutral-900 dark:data-[te-nav-active]:text-white"
                     data-te-toggle="pill" data-te-target="#tabs-register" role="tab" aria-controls="tabs-register" aria-selected="false">
                     {{ __('Register') }}
                 </a>
@@ -19,7 +19,7 @@
     
     <!-- Login -->
     <div class="w-full sm:max-w-md hidden opacity-100 transition-opacity duration-150 ease-linear data-[te-tab-active]:block" id="tabs-login" role="tabpanel" aria-labelledby="tabs-login" data-te-tab-active>
-        <div class="px-6 py-4 bg-white dark:bg-neutral-950/50 shadow-md overflow-hidden sm:rounded-lg">
+        <div class="px-6 py-4 bg-white dark:bg-neutral-800 shadow-md overflow-hidden sm:rounded-lg">
             <div class="w-full text-center text-white mb-3">
                 <a href="{{ route('discord.login') }}">
                     <div
@@ -102,7 +102,7 @@
 
     <!-- Register -->
     <div class="w-full sm:max-w-md hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block" id="tabs-register" role="tabpanel" aria-labelledby="tabs-register">
-        <div class="px-6 py-4 bg-white dark:bg-neutral-950/50 shadow-md overflow-hidden sm:rounded-lg">
+        <div class="px-6 py-4 bg-white dark:bg-neutral-800 shadow-md overflow-hidden sm:rounded-lg">
             <form method="POST" action="{{ route('register') }}">
                 @csrf
 
diff --git a/resources/views/auth/reset-password.blade.php b/resources/views/auth/reset-password.blade.php
index 5ae3b8d..26b5d06 100644
--- a/resources/views/auth/reset-password.blade.php
+++ b/resources/views/auth/reset-password.blade.php
@@ -1,5 +1,5 @@
 <x-guest-layout>
-    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-neutral-950/50 shadow-md overflow-hidden sm:rounded-lg">
+    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-neutral-800 shadow-md overflow-hidden sm:rounded-lg">
         <form method="POST" action="{{ route('password.store') }}">
             @csrf
 
diff --git a/resources/views/auth/verify-email.blade.php b/resources/views/auth/verify-email.blade.php
index f0b011b..030d526 100644
--- a/resources/views/auth/verify-email.blade.php
+++ b/resources/views/auth/verify-email.blade.php
@@ -1,5 +1,5 @@
 <x-guest-layout>
-    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-neutral-950/50 shadow-md overflow-hidden sm:rounded-lg">
+    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-neutral-800 shadow-md overflow-hidden sm:rounded-lg">
         <div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
             {{ __('Thanks for signing up! Before getting started, could you verify your email address by clicking on the link we just emailed to you? If you didn\'t receive the email, we will gladly send you another.') }}
         </div>
diff --git a/resources/views/home/partials/tabs-middle.blade.php b/resources/views/home/partials/tabs-middle.blade.php
index 5444970..40603ca 100644
--- a/resources/views/home/partials/tabs-middle.blade.php
+++ b/resources/views/home/partials/tabs-middle.blade.php
@@ -2,7 +2,7 @@
 <ul class="-mb-6 flex list-none flex-row flex-wrap border-b-0 pl-0 relative z-10" role="tablist" data-te-nav-ref>
     <li role="presentation" class="flex-auto text-center">
         <a href="#tabs-most-views"
-            class="rounded-l-xl my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white dark:bg-neutral-950 dark:hover:bg-neutral-950 dark:data-[te-nav-active]:text-white"
+            class="rounded-l-xl my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:data-[te-nav-active]:text-white"
             data-te-toggle="pill" data-te-target="#tabs-most-views" data-te-nav-active role="tab"
             aria-controls="tabs-most-views" aria-selected="true">
             {{ __('home.most-views') }}
@@ -10,7 +10,7 @@
     </li>
     <li role="presentation" class="flex-auto text-center">
         <a href="#tabs-most-likes"
-            class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white dark:bg-neutral-950 dark:hover:bg-neutral-950 dark:data-[te-nav-active]:text-white"
+            class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:data-[te-nav-active]:text-white"
             data-te-toggle="pill" data-te-target="#tabs-most-likes" role="tab" aria-controls="tabs-most-likes"
             aria-selected="false">
             {{ __('home.most-likes') }}
@@ -18,7 +18,7 @@
     </li>
     <li role="presentation" class="flex-auto text-center">
         <a href="#tabs-popular-weekly"
-            class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white dark:bg-neutral-950 dark:hover:bg-neutral-950 dark:data-[te-nav-active]:text-white"
+            class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:data-[te-nav-active]:text-white"
             data-te-toggle="pill" data-te-target="#tabs-popular-weekly" role="tab"
             aria-controls="tabs-popular-weekly" aria-selected="false">
             {{ __('home.popular-weekly') }}
@@ -26,7 +26,7 @@
     </li>
     <li role="presentation" class="flex-auto text-center">
         <a href="#tabs-popular-monthly"
-            class="rounded-r-xl my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white dark:bg-neutral-950 dark:hover:bg-neutral-950 dark:data-[te-nav-active]:text-white"
+            class="rounded-r-xl my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:data-[te-nav-active]:text-white"
             data-te-toggle="pill" data-te-target="#tabs-popular-monthly" role="tab"
             aria-controls="tabs-popular-monthly" aria-selected="false">
             {{ __('home.popular-monthly') }}
diff --git a/resources/views/home/partials/tabs-top.blade.php b/resources/views/home/partials/tabs-top.blade.php
index bba7f7e..e96d677 100644
--- a/resources/views/home/partials/tabs-top.blade.php
+++ b/resources/views/home/partials/tabs-top.blade.php
@@ -1,19 +1,19 @@
 <!--Tabs navigation-->
 <ul class="-mb-6 flex list-none flex-row flex-wrap border-b-0 pl-0 relative z-10" role="tablist" data-te-nav-ref>
     <li role="presentation" class="flex-auto text-center">
-        <a href="#tabs-recently-uploaded" class="rounded-l-xl my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white/50 dark:bg-neutral-950/50 backdrop-blur-sm dark:hover:dark:hover:bg-neutral-950 dark:data-[te-nav-active]:text-white"
+        <a href="#tabs-recently-uploaded" class="rounded-l-xl my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm dark:hover:dark:hover:bg-neutral-900 dark:data-[te-nav-active]:text-white"
             data-te-toggle="pill" data-te-target="#tabs-recently-uploaded" data-te-nav-active role="tab" aria-controls="tabs-recently-uploaded" aria-selected="true">
             {{ __('home.recently-uploaded') }} ({{ Carbon\Carbon::parse($recentlyUploaded[0]->created_at)->diffForHumans([ 'parts' => 2 ]) }})
         </a>
     </li>
     <li role="presentation" class="flex-auto text-center">
-        <a href="#tabs-recently-released" class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white/50 dark:bg-neutral-950/50 backdrop-blur-sm dark:hover:bg-neutral-950 dark:data-[te-nav-active]:text-white"
+        <a href="#tabs-recently-released" class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm dark:hover:bg-neutral-900 dark:data-[te-nav-active]:text-white"
             data-te-toggle="pill" data-te-target="#tabs-recently-released" role="tab" aria-controls="tabs-recently-released" aria-selected="false">
             {{ __('home.recently-released') }}
         </a>
     </li>
     <li role="presentation" class="flex-auto text-center">
-        <a href="#tabs-trending" class="rounded-r-xl my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white/50 dark:bg-neutral-950/50 backdrop-blur-sm dark:hover:bg-neutral-950 dark:data-[te-nav-active]:text-white"
+        <a href="#tabs-trending" class="rounded-r-xl my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm dark:hover:bg-neutral-900 dark:data-[te-nav-active]:text-white"
             data-te-toggle="pill" data-te-target="#tabs-trending" role="tab" aria-controls="tabs-trending" aria-selected="false">
             {{ __('home.trending') }}
         </a>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index f376b18..e07fe0d 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -4,7 +4,7 @@
 @include('partials.head')
 
 <body class="font-sans antialiased">
-    <div class="flex flex-col min-h-screen bg-gray-100 dark:bg-neutral-900">
+    <div class="flex flex-col min-h-screen bg-gray-100 dark:bg-neutral-950">
         @include('layouts.navigation')
 
         <!-- Page Heading -->
diff --git a/resources/views/layouts/guest.blade.php b/resources/views/layouts/guest.blade.php
index c203273..69b66f9 100644
--- a/resources/views/layouts/guest.blade.php
+++ b/resources/views/layouts/guest.blade.php
@@ -4,7 +4,7 @@
     @include('partials.head')
 
     <body class="font-sans antialiased">
-        <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100 dark:bg-neutral-900">
+        <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100 dark:bg-neutral-950">
             <div>
                 <a href="/">
                     <x-application-logo class="w-24 h-24 fill-current text-gray-500" />
diff --git a/resources/views/livewire/comments.blade.php b/resources/views/livewire/comments.blade.php
index 8ba26d4..86cfb5b 100644
--- a/resources/views/livewire/comments.blade.php
+++ b/resources/views/livewire/comments.blade.php
@@ -1,60 +1,57 @@
 <section>
-    <div class="bg-white dark:bg-neutral-800 shadow sm:rounded-lg sm:overflow-hidden">
-        <div class="divide-y divide-gray-200 dark:divide-gray-400/40">
-            <div class="px-4 py-5 sm:px-6">
-                <h2 class="text-lg font-medium text-gray-900 dark:text-gray-200">Comments</h2>
-            </div>
-            <div>
-                <!-- Comment Input -->
-                <div class="bg-gray-50 dark:bg-neutral-800 px-4 py-6 sm:px-6">
-                    @auth
-                        <div class="flex">
-                        <div class="flex-shrink-0 mr-4">
-                            <img class="h-10 w-10 rounded-full" src="{{ auth()->user()->getAvatar() }}" alt="{{ auth()->user()->name }}">
-                        </div>
-                        <div class="min-w-0 flex-1">
-                            <form wire:submit.prevent="postComment">
-                                <div>
-                                    <label for="comment" class="sr-only">Comment body</label>
-                                    <textarea id="comment" name="comment" rows="3"
-                                            class="peer block min-h-[auto] w-full border-1 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear dark:placeholder:text-neutral-200 border-gray-300 dark:border-neutral-950 dark:bg-neutral-900 dark:text-gray-300 focus:border-rose-500 dark:focus:border-rose-600 focus:ring-rose-500 dark:focus:ring-rose-600 rounded-md shadow-sm
-                                                @error('newCommentState.body') border-red-500 @enderror"
-                                            placeholder="Write something" wire:model.defer="newCommentState.body"></textarea>
-                                    @error('newCommentState.body')
-                                        <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
-                                    @enderror
-                                </div>
-                                <div class="mt-3 flex items-center justify-between">
-                                    <button type="submit"
-                                            class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md shadow-sm text-white bg-rose-600 hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-rose-500">
-                                        Comment
-                                    </button>
-                                </div>
-                            </form>
-                        </div>
+    <div class="bg-white dark:bg-neutral-800 shadow sm:rounded-xl sm:overflow-hidden">
+        <div class="px-4 py-5 sm:px-6">
+            <h2 class="leading-normal font-bold text-lg text-gray-900 dark:text-gray-200">Comments</h2>
+        </div>
+        <div>
+            <!-- Comment Input -->
+            <div class="bg-gray-50 dark:bg-neutral-800 px-4 py-6 sm:px-6 border-t border-b dark:border-neutral-950 border-neutral-200">
+                @auth
+                    <div class="flex">
+                    <div class="flex-shrink-0 mr-4">
+                        <img class="h-10 w-10 rounded-full" src="{{ auth()->user()->getAvatar() }}" alt="{{ auth()->user()->name }}">
+                    </div>
+                    <div class="min-w-0 flex-1">
+                        <form wire:submit.prevent="postComment">
+                            <div>
+                                <label for="comment" class="sr-only">Comment body</label>
+                                <textarea id="comment" name="comment" rows="3"
+                                        class="peer block min-h-[auto] w-full border-1 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear dark:placeholder:text-neutral-200 border-gray-300 dark:border-neutral-950 dark:bg-neutral-900 dark:text-gray-300 focus:border-rose-500 dark:focus:border-rose-600 focus:ring-rose-500 dark:focus:ring-rose-600 rounded-md shadow-sm
+                                            @error('newCommentState.body') border-red-500 @enderror"
+                                        placeholder="Write something" wire:model.defer="newCommentState.body"></textarea>
+                                @error('newCommentState.body')
+                                    <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
+                                @enderror
+                            </div>
+                            <div class="mt-3 flex items-center justify-between">
+                                <button type="submit"
+                                        class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md shadow-sm text-white bg-rose-600 hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-rose-500">
+                                    Comment
+                                </button>
+                            </div>
+                        </form>
                     </div>
-                    @endauth
-
-                    @guest
-                        <p class="text-gray-900 dark:text-gray-200">Log in to comment.</p>
-                    @endguest
                 </div>
+                @endauth
 
-                <!-- Comments -->
-                <div class="px-4 py-6 sm:px-6">
-                    <div class="space-y-8">
-                        @if ($comments->isNotEmpty())
-                            @foreach($comments as $comment)
-                                <livewire:comment :comment="$comment" :key="$comment->id"/>
-                            @endforeach
-                            {{ $comments->links('pagination::tailwind') }}
-                        @else
-                            <p class="text-gray-900 dark:text-gray-200">No comments yet.</p>
-                        @endif
-                    </div>
+                @guest
+                    <p class="text-gray-900 dark:text-gray-200">Log in to comment.</p>
+                @endguest
+            </div>
+
+            <!-- Comments -->
+            <div class="px-4 py-6 sm:px-6">
+                <div class="space-y-8">
+                    @if ($comments->isNotEmpty())
+                        @foreach($comments as $comment)
+                            <livewire:comment :comment="$comment" :key="$comment->id"/>
+                        @endforeach
+                        {{ $comments->links('pagination::tailwind') }}
+                    @else
+                        <p class="text-gray-900 dark:text-gray-200">No comments yet.</p>
+                    @endif
                 </div>
             </div>
         </div>
-
     </div>
 </section>
\ No newline at end of file
diff --git a/resources/views/stream/partials/gallery.blade.php b/resources/views/stream/partials/gallery.blade.php
index ec4f508..a72f8be 100644
--- a/resources/views/stream/partials/gallery.blade.php
+++ b/resources/views/stream/partials/gallery.blade.php
@@ -1,7 +1,9 @@
 <div class="bg-transparent rounded-lg">
-    <p class="leading-normal font-bold text-lg text-rose-600">
-        {{ __('stream.gallery') }}
-    </p>
+    <div class="px-1 sm:px-2">
+        <p class="leading-normal font-bold text-lg text-gray-900 dark:text-gray-200">
+            {{ __('stream.gallery') }}
+        </p>
+    </div>
     @if ($gallery->count() > 5)
         <div class="grid grid-rows-1 w-30 text-left">
             <ul data-te-lightbox-init class="list-none text-center" style="overflow: hidden;">
diff --git a/resources/views/stream/partials/info.blade.php b/resources/views/stream/partials/info.blade.php
index a59d3f7..b91788a 100644
--- a/resources/views/stream/partials/info.blade.php
+++ b/resources/views/stream/partials/info.blade.php
@@ -1,8 +1,8 @@
-<div class="overflow-hidden p-5 bg-transparent bg-white rounded-lg dark:bg-neutral-800">
+<div class="overflow-hidden p-5 bg-transparent bg-white rounded-xl dark:bg-neutral-800">
     <!-- Cover -->
     <div class="w-[100px] md:w-[150px] mr-4 float-left hidden md:block">
         <img alt="{{ $episode->title }}" loading="lazy" width="150"
-            class="block relative rounded-lg object-cover object-center aspect-[11/16] z-20"
+            class="block relative rounded-xl object-cover object-center aspect-[11/16] z-20"
             src="{{ $episode->cover_url }}"></img>
     </div>