diff --git a/public/css/app.css b/public/css/app.css
index 2c3b8cf0..10ef84ed 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -702,6 +702,9 @@ select {
 .left-\[50\%\] {
   left: 50%;
 }
+.top-12 {
+  top: 3rem;
+}
 .z-0 {
   z-index: 0;
 }
@@ -743,6 +746,10 @@ select {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }
+.my-6 {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
 .ml-3 {
   margin-left: 0.75rem;
 }
@@ -920,6 +927,9 @@ select {
 .flex-1 {
   flex: 1 1 0%;
 }
+.flex-auto {
+  flex: 1 1 auto;
+}
 .basis-1\/3 {
   flex-basis: 33.333333%;
 }
@@ -1077,6 +1087,12 @@ select {
 .overflow-scroll {
   overflow: scroll;
 }
+.overflow-y-auto {
+  overflow-y: auto;
+}
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
 .overscroll-contain {
   -ms-scroll-chaining: none;
       overscroll-behavior: contain;
@@ -1318,6 +1334,9 @@ select {
 .pt-8 {
   padding-top: 2rem;
 }
+.pb-14 {
+  padding-bottom: 3.5rem;
+}
 .text-center {
   text-align: center;
 }
@@ -1577,6 +1596,9 @@ select {
 .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
+.hover\:w-32:hover {
+  width: 8rem;
+}
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1619,6 +1641,9 @@ select {
 .focus\:z-10:focus {
   z-index: 10;
 }
+.focus\:w-32:focus {
+  width: 8rem;
+}
 .focus\:border-blue-300:focus {
   --tw-border-opacity: 1;
   border-color: rgb(147 197 253 / var(--tw-border-opacity));
@@ -1771,6 +1796,11 @@ select {
 }
 @media (min-width: 768px) {
 
+  .md\:my-10 {
+    margin-top: 2.5rem;
+    margin-bottom: 2.5rem;
+  }
+
   .md\:mt-8 {
     margin-top: 2rem;
   }
@@ -1787,6 +1817,10 @@ select {
     margin-top: 1.5rem;
   }
 
+  .md\:mt-10 {
+    margin-top: 2.5rem;
+  }
+
   .md\:block {
     display: block;
   }
@@ -1803,6 +1837,10 @@ select {
     width: 70%;
   }
 
+  .md\:w-36 {
+    width: 9rem;
+  }
+
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -1850,6 +1888,18 @@ select {
     padding-top: 6rem;
   }
 
+  .md\:pt-6 {
+    padding-top: 1.5rem;
+  }
+
+  .md\:pt-8 {
+    padding-top: 2rem;
+  }
+
+  .md\:pt-10 {
+    padding-top: 2.5rem;
+  }
+
   .md\:hover\:w-52:hover {
     width: 13rem;
   }
diff --git a/public/css/common.css b/public/css/common.css
index 860bd28b..3d8a5729 100644
--- a/public/css/common.css
+++ b/public/css/common.css
@@ -222,6 +222,18 @@ button.toast-close-button {
   scrollbar-width: none;
   /* Firefox */
 }
+::-webkit-scrollbar {
+  width: 6px;
+  height: 100%;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 6px;
+  background: #cad3e2;
+}
+::-webkit-scrollbar-track {
+  border-radius: 6px;
+  background: #ffffff;
+}
 progress::-webkit-progress-bar {
   background-color: #d7d7d7;
 }
diff --git a/resources/css/common.less b/resources/css/common.less
index c6b3a6b2..5604f3a0 100644
--- a/resources/css/common.less
+++ b/resources/css/common.less
@@ -9,6 +9,22 @@
     scrollbar-width: none; /* Firefox */
 }
 
+// 滚动条样式
+::-webkit-scrollbar {
+    width: 6px;
+    height: 100%;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 6px;
+    background: #cad3e2;
+}
+
+::-webkit-scrollbar-track {
+    border-radius: 6px;
+    background: rgb(255, 255, 255);
+}
+
 progress::-webkit-progress-bar {
     background-color: #d7d7d7;
 }
@@ -18,15 +34,17 @@ progress::-webkit-progress-value {
 }
 
 #toast-container {
-    &>div {
+    & > div {
         font-size: 13px;
         padding: 10px 10px 10px 50px;
         box-shadow: 0 0 12px rgba(183, 183, 183, 0.47);
+
         &:hover {
             box-shadow: 0 0 12px rgba(161, 161, 161, 0.47);
         }
     }
 }
+
 .toast-close-button {
     right: -0.15em;
 }
@@ -39,13 +57,16 @@ progress::-webkit-progress-value {
 #photos-grid {
     a:hover, a.selected {
         outline-color: #3b82f6;
+
         .photo-select {
             display: block;
         }
+
         &.selected {
             .photo-select {
                 border-color: white;
-                &>i {
+
+                & > i {
                     color: #0061ff;
                 }
             }
diff --git a/resources/views/components/container.blade.php b/resources/views/components/container.blade.php
index 09d73bb4..df14b870 100644
--- a/resources/views/components/container.blade.php
+++ b/resources/views/components/container.blade.php
@@ -1,5 +1,5 @@
 @props(['full' => request()->routeIs('images')])
 
-<div {{ $attributes->merge(['class' => $full ? 'mx-auto sm:ml-64' : 'mx-auto sm:ml-64 px-6 md:px-10 lg:px-10 xl:px-10 2xl:px-60']) }}>
+<div {{ $attributes->merge(['class' => $full ? 'h-full mx-auto sm:ml-64' : 'h-full mx-auto sm:ml-64 px-6 md:px-10 lg:px-10 xl:px-10 2xl:px-60']) }}>
     {{ $slot }}
 </div>
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
index be7ded0e..a5a23cd8 100644
--- a/resources/views/dashboard.blade.php
+++ b/resources/views/dashboard.blade.php
@@ -1,123 +1,125 @@
 @section('title', '仪表盘')
 
 <x-app-layout>
-    <div class="space-y-6 md:space-y-0 md:grid md:grid-cols-2 xl:grid-cols-4 md:gap-x-4 xl:gap-x-8 md:gap-y-4 xl:gap-y-8">
-        <div class="flex bg-white rounded p-4 space-x-4">
-            <i class="fas fa-images text-amber-500 text-5xl"></i>
-            <div class="flex flex-col">
-                <p class="text-gray-700 text-sm">图片数量</p>
-                <p class="text-gray-800 font-semibold text-xl">{{ $user->image_num }}</p>
+    <div class="my-6 md:my-10">
+        <div class="space-y-6 md:space-y-0 md:grid md:grid-cols-2 xl:grid-cols-4 md:gap-x-4 xl:gap-x-8 md:gap-y-4 xl:gap-y-8">
+            <div class="flex bg-white rounded p-4 space-x-4">
+                <i class="fas fa-images text-amber-500 text-5xl"></i>
+                <div class="flex flex-col">
+                    <p class="text-gray-700 text-sm">图片数量</p>
+                    <p class="text-gray-800 font-semibold text-xl">{{ $user->image_num }}</p>
+                </div>
+            </div>
+            <div class="flex bg-white rounded p-4 space-x-4">
+                <i class="fas fa-hdd text-red-500 text-5xl"></i>
+                <div class="flex flex-col">
+                    <p class="text-gray-700 text-sm">可用储存</p>
+                    <p class="text-gray-800 font-semibold text-xl">{{ \App\Utils::formatSize(($user->capacity - $user->images->sum('size')) * 1024) }}</p>
+                </div>
+            </div>
+            <div class="flex bg-white rounded p-4 space-x-4">
+                <i class="fas fa-hdd text-green-500 text-5xl"></i>
+                <div class="flex flex-col">
+                    <p class="text-gray-700 text-sm">使用储存</p>
+                    <p class="text-gray-800 font-semibold text-xl">{{ \App\Utils::formatSize($user->images->sum('size') * 1024) }}</p>
+                </div>
+            </div>
+            <div class="flex bg-white rounded p-4 space-x-4">
+                <i class="fas fa-hdd text-emerald-500 text-5xl"></i>
+                <div class="flex flex-col">
+                    <p class="text-gray-700 text-sm">总储存</p>
+                    <p class="text-gray-800 font-semibold text-xl">{{ \App\Utils::formatSize($user->capacity * 1024) }}</p>
+                </div>
             </div>
         </div>
-        <div class="flex bg-white rounded p-4 space-x-4">
-            <i class="fas fa-hdd text-red-500 text-5xl"></i>
-            <div class="flex flex-col">
-                <p class="text-gray-700 text-sm">可用储存</p>
-                <p class="text-gray-800 font-semibold text-xl">{{ \App\Utils::formatSize(($user->capacity - $user->images->sum('size')) * 1024) }}</p>
-            </div>
-        </div>
-        <div class="flex bg-white rounded p-4 space-x-4">
-            <i class="fas fa-hdd text-green-500 text-5xl"></i>
-            <div class="flex flex-col">
-                <p class="text-gray-700 text-sm">使用储存</p>
-                <p class="text-gray-800 font-semibold text-xl">{{ \App\Utils::formatSize($user->images->sum('size') * 1024) }}</p>
-            </div>
-        </div>
-        <div class="flex bg-white rounded p-4 space-x-4">
-            <i class="fas fa-hdd text-emerald-500 text-5xl"></i>
-            <div class="flex flex-col">
-                <p class="text-gray-700 text-sm">总储存</p>
-                <p class="text-gray-800 font-semibold text-xl">{{ \App\Utils::formatSize($user->capacity * 1024) }}</p>
-            </div>
-        </div>
-    </div>
 
-    <div class="flex md:mt-8 flex-col-reverse md:flex-row space-y-6 md:space-y-0 md:space-x-4">
-        <div class="w-full mt-4 md:mt-0">
-            <x-box>
-                <x-slot name="title">可使用的策略</x-slot>
-                <x-slot name="content">
-                    @if(! $strategies)
-                        <x-no-data message="没有可用的策略，将使用系统默认配置。" />
-                    @else
-                        <div class="divide-y divide-solid">
-                            @foreach ($strategies as $strategy)
-                                <div class="w-full px-4 py-3">
-                                    <p>{{ $strategy->name }}</p>
-                                    <span class="text-gray-700 text-sm">{{ $strategy->intro }}</span>
-                                </div>
-                            @endforeach
-                        </div>
-                    @endif
-                </x-slot>
-            </x-box>
-        </div>
-        <div class="flex flex-col md:w-[70%] xl:w-[40%] space-y-8">
-            <x-box>
-                <x-slot name="title">我的信息</x-slot>
-                <x-slot name="content">
-                    <div class="px-4 py-3 space-y-3">
-                        <div class="flex">
-                            <p class="basis-1/3">姓名</p>
-                            <p class="basis-2/3 truncate text-gray-800">{{ $user->name }}</p>
-                        </div>
-                        <div class="flex">
-                            <p class="basis-1/3">邮箱</p>
-                            <p class="basis-2/3 truncate text-gray-800">{{ $user->email }}</p>
-                        </div>
-                        <div class="flex">
-                            <p class="basis-1/3">注册时间</p>
-                            <p class="basis-2/3 truncate text-gray-800">{{ $user->created_at }}</p>
-                        </div>
-                        <div class="flex">
-                            <p class="basis-1/3">注册 IP</p>
-                            <p class="basis-2/3 truncate text-gray-800">{{ $user->registered_ip }}</p>
-                        </div>
-                        @if(! $user->email_verified_at)
-                        <p class="p-2 text-sm rounded bg-red-500 text-white">你的账号尚未激活，功能受限，请根据激活邮件指引激活账号，如果你没有收到邮件，请点击 <a href="" class="text-green-400">这里</a> 重新发送。</p>
+        <div class="flex md:mt-8 flex-col-reverse md:flex-row space-y-6 md:space-y-0 md:space-x-4">
+            <div class="w-full mt-4 md:mt-0">
+                <x-box>
+                    <x-slot name="title">可使用的策略</x-slot>
+                    <x-slot name="content">
+                        @if(! $strategies)
+                            <x-no-data message="没有可用的策略，将使用系统默认配置。" />
+                        @else
+                            <div class="divide-y divide-solid">
+                                @foreach ($strategies as $strategy)
+                                    <div class="w-full px-4 py-3">
+                                        <p>{{ $strategy->name }}</p>
+                                        <span class="text-gray-700 text-sm">{{ $strategy->intro }}</span>
+                                    </div>
+                                @endforeach
+                            </div>
                         @endif
-                    </div>
-                </x-slot>
-            </x-box>
-            <x-box>
-                <x-slot name="title">角色组信息</x-slot>
-                <x-slot name="content">
-                    <div class="px-4 py-3 space-y-3">
-                        <div class="flex">
-                            <p class="basis-1/2">组名</p>
-                            <p class="basis-1/2 truncate text-gray-800">{{ $user->group ? $user->group->name : '系统默认组' }}</p>
+                    </x-slot>
+                </x-box>
+            </div>
+            <div class="flex flex-col md:w-[70%] xl:w-[40%] space-y-8">
+                <x-box>
+                    <x-slot name="title">我的信息</x-slot>
+                    <x-slot name="content">
+                        <div class="px-4 py-3 space-y-3">
+                            <div class="flex">
+                                <p class="basis-1/3">姓名</p>
+                                <p class="basis-2/3 truncate text-gray-800">{{ $user->name }}</p>
+                            </div>
+                            <div class="flex">
+                                <p class="basis-1/3">邮箱</p>
+                                <p class="basis-2/3 truncate text-gray-800">{{ $user->email }}</p>
+                            </div>
+                            <div class="flex">
+                                <p class="basis-1/3">注册时间</p>
+                                <p class="basis-2/3 truncate text-gray-800">{{ $user->created_at }}</p>
+                            </div>
+                            <div class="flex">
+                                <p class="basis-1/3">注册 IP</p>
+                                <p class="basis-2/3 truncate text-gray-800">{{ $user->registered_ip }}</p>
+                            </div>
+                            @if(! $user->email_verified_at)
+                                <p class="p-2 text-sm rounded bg-red-500 text-white">你的账号尚未激活，功能受限，请根据激活邮件指引激活账号，如果你没有收到邮件，请点击 <a href="" class="text-green-400">这里</a> 重新发送。</p>
+                            @endif
                         </div>
-                        <div class="flex">
-                            <p class="basis-1/2">最大文件大小</p>
-                            <p class="basis-1/2 truncate text-gray-800">{{ \App\Utils::formatSize($configs->get(\App\Enums\GroupConfigKey::MaximumFileSize) * 1024) }}</p>
+                    </x-slot>
+                </x-box>
+                <x-box>
+                    <x-slot name="title">角色组信息</x-slot>
+                    <x-slot name="content">
+                        <div class="px-4 py-3 space-y-3">
+                            <div class="flex">
+                                <p class="basis-1/2">组名</p>
+                                <p class="basis-1/2 truncate text-gray-800">{{ $user->group ? $user->group->name : '系统默认组' }}</p>
+                            </div>
+                            <div class="flex">
+                                <p class="basis-1/2">最大文件大小</p>
+                                <p class="basis-1/2 truncate text-gray-800">{{ \App\Utils::formatSize($configs->get(\App\Enums\GroupConfigKey::MaximumFileSize) * 1024) }}</p>
+                            </div>
+                            <div class="flex">
+                                <p class="basis-1/2">并发上传数量</p>
+                                <p class="basis-1/2 truncate text-gray-800">{{ $configs->get(\App\Enums\GroupConfigKey::ConcurrentUploadNum) }} 张</p>
+                            </div>
+                            <div class="flex">
+                                <p class="basis-1/2">每分钟上传限制</p>
+                                <p class="basis-1/2 truncate text-gray-800">{{ $configs->get(\App\Enums\GroupConfigKey::LimitPerMinute) }} 张</p>
+                            </div>
+                            <div class="flex">
+                                <p class="basis-1/2">每小时上传限制</p>
+                                <p class="basis-1/2 truncate text-gray-800">{{ $configs->get(\App\Enums\GroupConfigKey::LimitPerHour) }} 张</p>
+                            </div>
+                            <div class="flex">
+                                <p class="basis-1/2">每天上传限制</p>
+                                <p class="basis-1/2 truncate text-gray-800">{{ $configs->get(\App\Enums\GroupConfigKey::LimitPerDay) }} 张</p>
+                            </div>
+                            <div class="flex">
+                                <p class="basis-1/2">每周上传限制</p>
+                                <p class="basis-1/2 truncate text-gray-800">{{ $configs->get(\App\Enums\GroupConfigKey::LimitPerWeek) }} 张</p>
+                            </div>
+                            <div class="flex">
+                                <p class="basis-1/2">每月上传限制</p>
+                                <p class="basis-1/2 truncate text-gray-800">{{ $configs->get(\App\Enums\GroupConfigKey::LimitPerMonth) }} 张</p>
+                            </div>
                         </div>
-                        <div class="flex">
-                            <p class="basis-1/2">并发上传数量</p>
-                            <p class="basis-1/2 truncate text-gray-800">{{ $configs->get(\App\Enums\GroupConfigKey::ConcurrentUploadNum) }} 张</p>
-                        </div>
-                        <div class="flex">
-                            <p class="basis-1/2">每分钟上传限制</p>
-                            <p class="basis-1/2 truncate text-gray-800">{{ $configs->get(\App\Enums\GroupConfigKey::LimitPerMinute) }} 张</p>
-                        </div>
-                        <div class="flex">
-                            <p class="basis-1/2">每小时上传限制</p>
-                            <p class="basis-1/2 truncate text-gray-800">{{ $configs->get(\App\Enums\GroupConfigKey::LimitPerHour) }} 张</p>
-                        </div>
-                        <div class="flex">
-                            <p class="basis-1/2">每天上传限制</p>
-                            <p class="basis-1/2 truncate text-gray-800">{{ $configs->get(\App\Enums\GroupConfigKey::LimitPerDay) }} 张</p>
-                        </div>
-                        <div class="flex">
-                            <p class="basis-1/2">每周上传限制</p>
-                            <p class="basis-1/2 truncate text-gray-800">{{ $configs->get(\App\Enums\GroupConfigKey::LimitPerWeek) }} 张</p>
-                        </div>
-                        <div class="flex">
-                            <p class="basis-1/2">每月上传限制</p>
-                            <p class="basis-1/2 truncate text-gray-800">{{ $configs->get(\App\Enums\GroupConfigKey::LimitPerMonth) }} 张</p>
-                        </div>
-                    </div>
-                </x-slot>
-            </x-box>
+                    </x-slot>
+                </x-box>
+            </div>
         </div>
     </div>
 </x-app-layout>
diff --git a/resources/views/images.blade.php b/resources/views/images.blade.php
index 1b544d6e..c7e4b735 100644
--- a/resources/views/images.blade.php
+++ b/resources/views/images.blade.php
@@ -6,15 +6,14 @@
 @endpush
 
 <x-app-layout>
-    <div class="fixed z-[2] top-14 left-0 right-0 bg-white border-solid border-b">
-        <x-container class="px-2 flex justify-between items-center h-12">
-            <div class="hidden md:block">
-                <a class="text-sm py-2 px-3 hover:bg-gray-100 rounded text-gray-800" href=""><i class="fas fa-folder-open text-blue-500"></i> 新建相册</a>
-            </div>
+    <div class="relative flex justify-between items-center px-2 py-2 z-[2] top-0 left-0 right-0 bg-white border-solid border-b">
+        <div class="space-x-2 flex justify-between items-center">
+            <a class="text-sm py-2 px-3 hover:bg-gray-100 rounded text-gray-800" href="javascript:void(0)"><i class="fas fa-bars text-blue-500"></i> 相册</a>
             <div class="block md:hidden">
                 <x-dropdown direction="right">
                     <x-slot name="trigger">
-                        <a class="text-sm py-2 px-3 hover:bg-gray-100 rounded text-gray-800" href="javascript:void(0)">选中项 <i class="fas fa-chevron-down text-blue-500"></i></a>
+                        <a class="text-sm py-2 px-3 hover:bg-gray-100 rounded text-gray-800"
+                           href="javascript:void(0)"><i class="fas fa-ellipsis-h text-blue-500"></i></a>
                     </x-slot>
 
                     <x-slot name="content">
@@ -25,26 +24,37 @@
                     </x-slot>
                 </x-dropdown>
             </div>
-            <div class="flex space-x-2 items-center">
-                <input type="text" class="px-2.5 py-1.5 border-0 outline-none rounded bg-gray-100 text-sm transition-all duration-300 w-36 md:hover:w-52 md:focus:w-52" placeholder="输入关键字搜索...">
-                <x-dropdown direction="left">
-                    <x-slot name="trigger">
-                        <a class="text-sm py-2 px-3 hover:bg-gray-100 rounded text-gray-800" href="javascript:void(0)">排序 <i class="fas fa-sort-alpha-up text-blue-500"></i></a>
-                    </x-slot>
+        </div>
+        <div class="flex space-x-2 items-center">
+            <input type="text"
+                   class="px-2.5 py-1.5 border-0 outline-none rounded bg-gray-100 text-sm transition-all duration-300 hidden md:block md:w-36 md:hover:w-52 md:focus:w-52"
+                   placeholder="输入关键字搜索...">
+            <x-dropdown direction="left">
+                <x-slot name="trigger">
+                    <a class="text-sm py-2 px-3 hover:bg-gray-100 rounded text-gray-800" href="javascript:void(0)">排序 <i
+                            class="fas fa-sort-alpha-up text-blue-500"></i></a>
+                </x-slot>
 
-                    <x-slot name="content">
-                        <x-dropdown-link href="javascript:void(0)" @click="setOrderBy('newest'); open = false">最新</x-dropdown-link>
-                        <x-dropdown-link href="javascript:void(0)" @click="setOrderBy('earliest'); open = false">最早</x-dropdown-link>
-                        <x-dropdown-link href="javascript:void(0)" @click="setOrderBy('utmost'); open = false">最大</x-dropdown-link>
-                        <x-dropdown-link href="javascript:void(0)" @click="setOrderBy('least'); open = false">最小</x-dropdown-link>
-                    </x-slot>
-                </x-dropdown>
-            </div>
-        </x-container>
+                <x-slot name="content">
+                    <x-dropdown-link href="javascript:void(0)" @click="setOrderBy('newest'); open = false">最新
+                    </x-dropdown-link>
+                    <x-dropdown-link href="javascript:void(0)" @click="setOrderBy('earliest'); open = false">最早
+                    </x-dropdown-link>
+                    <x-dropdown-link href="javascript:void(0)" @click="setOrderBy('utmost'); open = false">最大
+                    </x-dropdown-link>
+                    <x-dropdown-link href="javascript:void(0)" @click="setOrderBy('least'); open = false">最小
+                    </x-dropdown-link>
+                </x-slot>
+            </x-dropdown>
+        </div>
     </div>
-    <div id="photos-grid" class="overflow-hidden mt-6 md:mt-2"></div>
-    <div id="photos-loading" class="flex justify-center items-center pt-6 pb-6">
-        <a href="javascript:void(0)" class="flex justify-center items-center text-sm text-gray-400 text-gray-700 cursor-not-allowed">加载中...</a>
+    <div class="relative inset-0 h-full">
+        <div class="absolute inset-0 overflow-y-scroll">
+            <div id="photos-grid"></div>
+            <div id="photos-loading" class="flex justify-center items-center py-10">
+                <a href="javascript:void(0)" class="flex justify-center items-center text-sm text-gray-400 text-gray-700 cursor-not-allowed">加载中...</a>
+            </div>
+        </div>
     </div>
 
     <script type="text/html" id="photos-item">
@@ -74,7 +84,7 @@
                 order: '',
             };
             let gridConfigs = {
-                rowHeight : 180,
+                rowHeight: 180,
                 margins: 16,
                 captions: false,
                 border: 10,
@@ -91,7 +101,7 @@
                         $loading.text('加载中...').addClass('text-gray-400 cursor-not-allowed');
                     },
                     success: function (response) {
-                        if (! response.status) {
+                        if (!response.status) {
                             return toastr.error(response.message);
                         }
 
@@ -130,15 +140,14 @@
                 getImages();
             };
 
-            $('html').css('overflow-y', 'scroll')
             $photos.justifiedGallery(gridConfigs);
             $loading.click(() => getImages(params.page));
 
-            $(window).scroll(function() {
+            $(window).scroll(function () {
                 let scrollTop = $(this).scrollTop();
                 let scrollHeight = $(document).height();
                 let clientHeight = $(this).height();
-                if(scrollTop + clientHeight >= scrollHeight - 50) {
+                if (scrollTop + clientHeight >= scrollHeight - 50) {
                     getImages();
                 }
             });
@@ -149,9 +158,12 @@
                 $(this).siblings('img').trigger('click');
             })
 
-            $photos.on('click', 'a', function (e) {
+            $photos.on('click', 'a .photo-select', function (e) {
                 e.stopPropagation();
-                $(this).css('transform', 'scale(1)').toggleClass('selected');
+                $(this).closest('a').toggleClass('selected');
+            }).on('mousedown', 'a', function () {
+
+            }).on('mouseup', 'a', function () {
             });
         </script>
     @endpush
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 6f0ca3c1..d836e2db 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -1,50 +1,50 @@
 <!DOCTYPE html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-        <meta name="csrf-token" content="{{ csrf_token() }}">
-        <meta name="keywords" content="Lsky Pro"/>
-        <meta name="description" content="Lsky Pro, Your photo album on the cloud."/>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <meta name="keywords" content="Lsky Pro"/>
+    <meta name="description" content="Lsky Pro, Your photo album on the cloud."/>
 
-        <title>{{ config('app.name', 'Laravel') }}</title>
+    <title>{{ config('app.name', 'Laravel') }}</title>
 
-        <!-- Fonts -->
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
-        <link rel="stylesheet" href="{{ asset('css/fontawesome.css') }}">
-        @stack('styles')
+    <!-- Fonts -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
+    <link rel="stylesheet" href="{{ asset('css/fontawesome.css') }}">
+    @stack('styles')
 
-        <!-- Styles -->
-        <link rel="stylesheet" href="{{ asset('css/common.css') }}">
-        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
+    <!-- Styles -->
+    <link rel="stylesheet" href="{{ asset('css/common.css') }}">
+    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
 
-        <!-- Scripts -->
-        <script src="{{ asset('js/app.js') }}"></script>
-    </head>
-    <body class="font-sans antialiased">
-        <div class="min-h-screen bg-gray-100" x-data="{sidebarOpened: false}" x-cloak>
-            @include('layouts.sidebar')
-            @include('layouts.header')
-            <div
-                x-transition:enter="ease-in-out duration-500"
-                x-transition:enter-start="opacity-0"
-                x-transition:enter-end="opacity-100"
-                x-transition:leave="ease-in-out duration-500"
-                x-transition:leave-start="opacity-100"
-                x-transition:leave-end="opacity-0"
-                 class="z-[9] bg-black bg-opacity-75 transition-opacity h-full w-full fixed inset-0 sm:hidden"
-                 x-show="sidebarOpened"
-                 @click.outside="sidebarOpened = false"
-                 @close.stop="sidebarOpened = false"
-                 @click="sidebarOpened = ! sidebarOpened"
-                 style="display: none"
-            >
+    <!-- Scripts -->
+    <script src="{{ asset('js/app.js') }}"></script>
+</head>
+<body class="font-sans antialiased overflow-hidden">
+<div class="min-h-screen bg-gray-100" x-data="{sidebarOpened: false}" x-cloak>
+    @include('layouts.sidebar')
+    @include('layouts.header')
+    <div
+        x-transition:enter="ease-in-out duration-500"
+        x-transition:enter-start="opacity-0"
+        x-transition:enter-end="opacity-100"
+        x-transition:leave="ease-in-out duration-500"
+        x-transition:leave-start="opacity-100"
+        x-transition:leave-end="opacity-0"
+        class="z-[9] bg-black bg-opacity-75 transition-opacity h-full w-full fixed inset-0 sm:hidden"
+        x-show="sidebarOpened"
+        @click.outside="sidebarOpened = false"
+        @close.stop="sidebarOpened = false"
+        @click="sidebarOpened = ! sidebarOpened"
+        style="display: none"
+    >
 
-            </div>
-            <x-container class="transition-all duration-300 pt-20 md:pt-24 pb-6">
-                {{ $slot }}
-            </x-container>
-        </div>
-    </body>
-    @stack('scripts')
+    </div>
+    <x-container class="flex flex-col overflow-y-auto absolute pb-14 top-14 left-0 right-0 bottom-0 transition-all duration-300 min-h-screen h-full">
+        {{ $slot }}
+    </x-container>
+</div>
+</body>
+@stack('scripts')
 </html>
diff --git a/resources/views/upload.blade.php b/resources/views/upload.blade.php
index 9a590875..924a350f 100644
--- a/resources/views/upload.blade.php
+++ b/resources/views/upload.blade.php
@@ -1,5 +1,7 @@
 @section('title', '上传图片')
 
 <x-app-layout>
-    <x-upload/>
+    <div class="my-6 md:my-10">
+        <x-upload/>
+    </div>
 </x-app-layout>