diff --git a/resources/views/components/body/wrapper.blade.php b/resources/views/components/body/wrapper.blade.php
index f85e02c..ea248c8 100644
--- a/resources/views/components/body/wrapper.blade.php
+++ b/resources/views/components/body/wrapper.blade.php
@@ -1,8 +1,8 @@
 <div
-    class="flex flex-col gap-5 transition-all duration-500 ease-in opacity-0"
+    class="transition-all duration-500 ease-in opacity-0"
     x-data="{ inView: false }"
     x-intersect:enter="setTimeout(() => { inView = true }, 50)"
-    :class="{'translate-y-0 opacity-1 md:delay-500' : inView, 'translate-y-[2rem] opacity-0' : ! inView }"
+    :class="{' opacity-1 md:delay-500' : inView, 'translate-y-[2rem] opacity-0' : ! inView }"
 >
     {{ $slot }}
 </div>
diff --git a/resources/views/components/modals/register.blade.php b/resources/views/components/modals/register.blade.php
index 1ff214d..b87f0a4 100644
--- a/resources/views/components/modals/register.blade.php
+++ b/resources/views/components/modals/register.blade.php
@@ -1,6 +1,4 @@
-<div
-    class="size-full"
-    x-data="{
+<div x-data="{
         showModal: $wire.entangle('showRegisterModal'),
         openModal() {
             this.showModal = true
@@ -9,37 +7,35 @@ class="size-full"
             this.showModal = false
         }
     }"
+     x-show="showModal"
+     @click.self="closeModal()"
+     x-cloak
+     class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
 >
-    <div x-show="showModal" @click="closeModal()" x-cloak
-         class="fixed inset-0 z-50 overflow-auto">
-        <div class="flex items-center justify-center min-h-screen">
-            <div class="bg-white sm:w-1/2 p-6 rounded shadow-xl">
-                <h1 class="text-2xl font-bold mb-4">You need to register an account first!</h1>
+    <div class="bg-white sm:w-1/2 p-6 rounded shadow-xl">
+        <h1 class="text-2xl font-bold mb-4">You need to register an account first!</h1>
 
-                <p>
-                    This is an easy process and allows the comments within these blogs
-                    to be more likely to be actual people.
-                </p>
+        <p>
+            This is an easy process and allows the comments within these blogs
+            to be more likely to be actual people.
+        </p>
 
-                <div class=" mt-5 flex gap-x-4">
-                    <button @click="closeModal()"
-                            class="bg-white text-gray-600 border-2 border-transparent hover:border-gray-600 transition rounded-lg p-2">
-                        Close
-                    </button>
+        <div class="mt-5 flex gap-x-4">
+            <a href="{{ route('login') }}"
+               class="text-primary-600 border-2 border-primary-600 hover:border-transparent hover:text-white hover:bg-primary-600 transition rounded-lg p-2">
+                Login
+            </a>
+            <a href="{{ route('register') }}"
+               class="bg-primary-600 hover:bg-white text-white hover:text-primary-600 border-2 border-transparent hover:border-primary-600 transition rounded-lg p-2">
+                Register
+            </a>
 
-                    <a href="{{route('register')}}"
-                       class="bg-primary-600 hover:bg-primary-400 text-white transition rounded-lg p-2">
-                        Register
-                    </a>
+            <span class="my-auto text-gray-400"> or </span>
 
-                    <span class="my-auto text-gray-400"> or </span>
-
-                    <a href="{{route('login')}}"
-                       class="text-primary-600 border-2 border-primary-600 hover:border-transparent hover:text-primary-400 transition rounded-lg p-2">
-                        Login
-                    </a>
-                </div>
-            </div>
+            <button @click="closeModal()"
+                    class="bg-white text-gray-600 border-2 border-transparent hover:border-gray-600 transition rounded-lg p-2">
+                Close
+            </button>
         </div>
     </div>
 </div>
diff --git a/resources/views/livewire/blogs/comments/blog-comments.blade.php b/resources/views/livewire/blogs/comments/blog-comments.blade.php
index 2ac89fe..cef3dc9 100644
--- a/resources/views/livewire/blogs/comments/blog-comments.blade.php
+++ b/resources/views/livewire/blogs/comments/blog-comments.blade.php
@@ -1,4 +1,6 @@
 <div>
+    <x-modals.register/>
+    
     <h3 class="text-gray-500 text-xl"> Comments ({{ count($comments) }})</h3>
 
     <div class=" mt-4 px-2 sm:px-4 py-0.5 rounded-lg">
@@ -38,6 +40,4 @@ class="p-2 w-full rounded-xl text-gray-500"
             @error('comment') <p class="text-red-500">{{ $message }}</p> @enderror
         </form>
     </div>
-
-    <x-modals.register/>
 </div>
diff --git a/resources/views/livewire/blogs/seth/show-blog.blade.php b/resources/views/livewire/blogs/seth/show-blog.blade.php
index 7d57459..b0cedd7 100644
--- a/resources/views/livewire/blogs/seth/show-blog.blade.php
+++ b/resources/views/livewire/blogs/seth/show-blog.blade.php
@@ -14,95 +14,97 @@
     @endif
 @endpush
 
-<x-body.wrapper>
-    <div class="lg:w-4/5 mx-auto bg-white shadow-lg shadow-primary-500 rounded-lg p-8">
-        @role('admin', 'author')
-        <a href="{{ route('dashboard.blogs.edit', $this->blog) }}">
-            <x-icons.pencil-square class="size-8 text-gray-500 hover:text-gray-700"/>
-        </a>
-        @endrole
-        <div class="flex-wrap">
-            @if($collection)
-                <a href="{{ route('collections.show', $collection) }}" class="text-gray-400 font-medium text-md">
-                    {{ $collection->title }}
-                </a>
-            @endif
-
-            <h1 class="text-2xl sm:text-4xl font-extrabold"> {{ $this->blog->title }}</h1>
-
-            <h6 class="text-gray-400 font-medium text-sm mt-1">
-                @if($this->blog->published_at)
-                    {{ $this->blog->author->name  }} {{ $this->blog->published_at_for_humans }}
-                @else
-                    This blog is in a draft status
+<div>
+    <x-modals.register/>
+
+    <x-body.wrapper>
+        <div class="lg:w-4/5 mx-auto bg-white shadow-lg shadow-primary-500 rounded-lg p-8">
+            @role('admin', 'author')
+            <a href="{{ route('dashboard.blogs.edit', $this->blog) }}">
+                <x-icons.pencil-square class="size-8 text-gray-500 hover:text-gray-700"/>
+            </a>
+            @endrole
+            <div class="flex-wrap">
+                @if($collection)
+                    <a href="{{ route('collections.show', $collection) }}" class="text-gray-400 font-medium text-md">
+                        {{ $collection->title }}
+                    </a>
                 @endif
-            </h6>
-        </div>
 
-        <div class="mt-8 prose min-h-[400px] leading-loose">
-            {!! $this->blog->getContent() !!}
-        </div>
+                <h1 class="text-2xl sm:text-4xl font-extrabold"> {{ $this->blog->title }}</h1>
+
+                <h6 class="text-gray-400 font-medium text-sm mt-1">
+                    @if($this->blog->published_at)
+                        {{ $this->blog->author->name  }} {{ $this->blog->published_at_for_humans }}
+                    @else
+                        This blog is in a draft status
+                    @endif
+                </h6>
+            </div>
 
-        <div class="mt-12">
-            <div class="sm:flex">
-                <button type="button" wire:click="like"
-                        class="flex my-auto mx-4 {{ $isLiked ? 'text-red-500 hover:text-red-300' : 'text-gray-400 hover:text-red-500' }}">
-                    <x-icons.heart/>
-                    <span class="text-gray-600 font-medium"> {{ $this->blogLikes }}</span>
-                </button>
-
-                <div class="gap-4 mt-4 flex py-5 sm:py-0 sm:flex sm:mt-0 overflow-x-auto">
-                    @foreach($this->blog->tags as $tag)
-                        <span
-                            class="rounded-lg text-gray-700 h-fit border-[1px] bg-gray-100 text-sm px-2 py-1 whitespace-nowrap">
+            <div class="mt-8 prose min-h-[400px] leading-loose">
+                {!! $this->blog->getContent() !!}
+            </div>
+
+            <div class="mt-12">
+                <div class="sm:flex">
+                    <button type="button" wire:click="like"
+                            class="flex my-auto mx-4 {{ $isLiked ? 'text-red-500 hover:text-red-300' : 'text-gray-400 hover:text-red-500' }}">
+                        <x-icons.heart/>
+                        <span class="text-gray-600 font-medium"> {{ $this->blogLikes }}</span>
+                    </button>
+
+                    <div class="gap-4 mt-4 flex py-5 sm:py-0 sm:flex sm:mt-0 overflow-x-auto">
+                        @foreach($this->blog->tags as $tag)
+                            <span
+                                class="rounded-lg text-gray-700 h-fit border-[1px] bg-gray-100 text-sm px-2 py-1 whitespace-nowrap">
                         {{ $tag->name }}
                     </span>
-                    @endforeach
+                        @endforeach
+                    </div>
                 </div>
-            </div>
 
-            <div class="mt-8">
-                <livewire:blogs.comments.blog-comments :blog="$this->blog"/>
+                <div class="mt-8">
+                    <livewire:blogs.comments.blog-comments :blog="$this->blog"/>
+                </div>
             </div>
-        </div>
 
-        <div class="mx-auto grid lg:grid-cols-2 gap-6">
-            @if($prev)
-                <div
-                    class="cursor-pointer rounded-lg border border-gray-300 transition hover:border-gray-500 hover:bg-gray-50 p-2">
-                    <a href="{{ route('blogs.show', $prev) }}">
-                        <div class="flex">
-                            <span class="text-primary-600">Previous blog </span>
-                        </div>
+            <div class="mx-auto grid lg:grid-cols-2 gap-6">
+                @if($prev)
+                    <div
+                        class="cursor-pointer rounded-lg border border-gray-300 transition hover:border-gray-500 hover:bg-gray-50 p-2">
+                        <a href="{{ route('blogs.show', $prev) }}">
+                            <div class="flex">
+                                <span class="text-primary-600">Previous blog </span>
+                            </div>
+
+                            <div class="text-gray-700">{{ $prev->title }}</div>
+                        </a>
+                    </div>
+                @else
+                    <div></div>
+                @endif
 
-                        <div class="text-gray-700">{{ $prev->title }}</div>
-                    </a>
-                </div>
-            @else
-                <div></div>
-            @endif
-
-            @if($next)
-                <div
-                    class="cursor-pointer rounded-lg border border-gray-300 transition hover:border-gray-500 hover:bg-gray-50 p-2">
-                    <a href="{{ route('blogs.show', $next) }}">
-                        <div class="flex justify-end">
-                            <span class="text-primary-600">Next blog </span>
-                        </div>
-
-                        <div class="flex justify-end text-right text-gray-700">{{ $next->title }}</div>
-                    </a>
-                </div>
-            @endif
-        </div>
+                @if($next)
+                    <div
+                        class="cursor-pointer rounded-lg border border-gray-300 transition hover:border-gray-500 hover:bg-gray-50 p-2">
+                        <a href="{{ route('blogs.show', $next) }}">
+                            <div class="flex justify-end">
+                                <span class="text-primary-600">Next blog </span>
+                            </div>
+
+                            <div class="flex justify-end text-right text-gray-700">{{ $next->title }}</div>
+                        </a>
+                    </div>
+                @endif
+            </div>
 
-        <div class="grid mb-6 mt-6">
-            @if ($recentBlog)
-                <h4 class="text-xl pb-4"> Recent Blog</h4>
-                <x-blogs.card :blog="$recentBlog"/>
-            @endif
+            <div class="grid mb-6 mt-6">
+                @if ($recentBlog)
+                    <h4 class="text-xl pb-4"> Recent Blog</h4>
+                    <x-blogs.card :blog="$recentBlog"/>
+                @endif
+            </div>
         </div>
-
-        <x-modals.register/>
-    </div>
-</x-body.wrapper>
+    </x-body.wrapper>
+</div>