diff --git a/app/Http/Controllers/User/ImageController.php b/app/Http/Controllers/User/ImageController.php
index 84ba5cbb..8b6776e6 100644
--- a/app/Http/Controllers/User/ImageController.php
+++ b/app/Http/Controllers/User/ImageController.php
@@ -3,6 +3,7 @@
 namespace App\Http\Controllers\User;
 
 use App\Http\Controllers\Controller;
+use App\Models\Album;
 use App\Models\Image;
 use App\Models\User;
 use Illuminate\Http\Request;
@@ -35,6 +36,12 @@ class ImageController extends Controller
 
     public function albums(Request $request): Response
     {
-        return $this->success();
+        /** @var User $user */
+        $user = Auth::user();
+        $albums = $user->albums()->latest()->paginate(40);
+        $albums->getCollection()->each(function (Album $album) {
+            $album->setVisible(['id', 'name', 'intro', 'image_num']);
+        });
+        return $this->success('success', compact('albums'));
     }
 }
diff --git a/public/css/app.css b/public/css/app.css
index 10ef84ed..07c431dc 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -380,7 +380,7 @@ Ensure the default browser behavior of the `hidden` attribute.
   display: none;
 }
 
-.scale-95, .scale-100, .transform {
+.translate-x-full, .translate-x-0, .scale-95, .scale-100, .transform {
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
@@ -391,12 +391,12 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.divide-y > *, .border, .border-2, .border-0, .border-b-2, .border-t, .border-r, .border-b {
+.divide-y > *, .border, .border-2, .border-0, .border-b-2, .border-t, .border-r, .border-b, .border-r-4, .border-b-4 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 
-.shadow-sm, .shadow-lg, .shadow, .sm\:shadow-none {
+.shadow-sm, .shadow-lg, .shadow, .shadow-xl, .sm\:shadow-none {
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
@@ -651,6 +651,10 @@ select {
   bottom: 0px;
   left: 0px;
 }
+.inset-y-0 {
+  top: 0px;
+  bottom: 0px;
+}
 .top-1 {
   top: 0.25rem;
 }
@@ -705,6 +709,9 @@ select {
 .top-12 {
   top: 3rem;
 }
+.-right-\[1000px\] {
+  right: -1000px;
+}
 .z-0 {
   z-index: 0;
 }
@@ -720,6 +727,15 @@ select {
 .z-\[1\] {
   z-index: 1;
 }
+.z-\[4\] {
+  z-index: 4;
+}
+.z-\[3\] {
+  z-index: 3;
+}
+.-z-\[1\] {
+  z-index: -1;
+}
 .m-2 {
   margin: 0.5rem;
 }
@@ -816,6 +832,9 @@ select {
 .mt-20 {
   margin-top: 5rem;
 }
+.-ml-8 {
+  margin-left: -2rem;
+}
 .block {
   display: block;
 }
@@ -912,6 +931,18 @@ select {
 .w-\[90\%\] {
   width: 90%;
 }
+.w-screen {
+  width: 100vw;
+}
+.w-40 {
+  width: 10rem;
+}
+.w-52 {
+  width: 13rem;
+}
+.w-\[70\%\] {
+  width: 70%;
+}
 .max-w-xl {
   max-width: 36rem;
 }
@@ -924,6 +955,12 @@ select {
 .max-w-\[33\.33\%\] {
   max-width: 33.33%;
 }
+.max-w-full {
+  max-width: 100%;
+}
+.max-w-md {
+  max-width: 28rem;
+}
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -948,6 +985,14 @@ select {
 .origin-top-left {
   transform-origin: top left;
 }
+.translate-x-full {
+  --tw-translate-x: 100%;
+  transform: var(--tw-transform);
+}
+.translate-x-0 {
+  --tw-translate-x: 0px;
+  transform: var(--tw-transform);
+}
 .scale-95 {
   --tw-scale-x: .95;
   --tw-scale-y: .95;
@@ -1146,9 +1191,18 @@ select {
 .border-b {
   border-bottom-width: 1px;
 }
+.border-r-4 {
+  border-right-width: 4px;
+}
+.border-b-4 {
+  border-bottom-width: 4px;
+}
 .border-solid {
   border-style: solid;
 }
+.border-dashed {
+  border-style: dashed;
+}
 .border-dotted {
   border-style: dotted;
 }
@@ -1219,9 +1273,19 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
+.bg-gray-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+}
 .bg-opacity-75 {
   --tw-bg-opacity: 0.75;
 }
+.bg-opacity-5 {
+  --tw-bg-opacity: 0.05;
+}
+.bg-opacity-50 {
+  --tw-bg-opacity: 0.5;
+}
 .bg-gradient-to-t {
   background-image: linear-gradient(to top, var(--tw-gradient-stops));
 }
@@ -1337,6 +1401,15 @@ select {
 .pb-14 {
   padding-bottom: 3.5rem;
 }
+.pl-10 {
+  padding-left: 2.5rem;
+}
+.pt-4 {
+  padding-top: 1rem;
+}
+.pr-2 {
+  padding-right: 0.5rem;
+}
 .text-center {
   text-align: center;
 }
@@ -1517,6 +1590,11 @@ select {
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-xl {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1726,6 +1804,10 @@ select {
     margin-left: 16rem;
   }
 
+  .sm\:-ml-10 {
+    margin-left: -2.5rem;
+  }
+
   .sm\:block {
     display: block;
   }
@@ -1788,11 +1870,19 @@ select {
     padding-top: 0px;
   }
 
+  .sm\:pr-4 {
+    padding-right: 1rem;
+  }
+
   .sm\:shadow-none {
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
+
+  .sm\:duration-700 {
+    transition-duration: 700ms;
+  }
 }
 @media (min-width: 768px) {
 
@@ -1841,6 +1931,14 @@ select {
     width: 9rem;
   }
 
+  .md\:w-64 {
+    width: 16rem;
+  }
+
+  .md\:w-72 {
+    width: 18rem;
+  }
+
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
diff --git a/resources/views/images.blade.php b/resources/views/images.blade.php
index c7e4b735..d2e26f1d 100644
--- a/resources/views/images.blade.php
+++ b/resources/views/images.blade.php
@@ -6,9 +6,9 @@
 @endpush
 
 <x-app-layout>
-    <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="relative flex justify-between items-center px-2 py-2 z-[3] 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>
+            <a class="text-sm py-2 px-3 hover:bg-gray-100 rounded text-gray-800" href="javascript:getAlbums()"><i class="fas fa-bars text-blue-500"></i> 相册</a>
             <div class="block md:hidden">
                 <x-dropdown direction="right">
                     <x-slot name="trigger">
@@ -49,12 +49,22 @@
         </div>
     </div>
     <div class="relative inset-0 h-full">
+        <!-- content -->
         <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>
+        <!-- right drawer -->
+        <div id="drawer-mask" class="absolute hidden inset-0 bg-gray-500 bg-opacity-50 z-[2]" onclick="drawer.close()"></div>
+        <div id="drawer" class="absolute bg-white w-52 md:w-72 top-0 -right-[1000px] bottom-0 z-[2] flex flex-col transition-all duration-300">
+            <div class="flex justify-between items-center text-md px-3 py-1 border-b">
+                <span class="text-gray-600 truncate" id="drawer-title"></span>
+                <a href="javascript:drawer.close()" class="p-2"><i class="fas fa-times text-blue-500"></i></a>
+            </div>
+            <div id="drawer-content" class="overflow-y-auto"></div>
+        </div>
     </div>
 
     <script type="text/html" id="photos-item">
@@ -76,9 +86,6 @@
         <script src="{{ asset('js/justified-gallery/jquery.justifiedGallery.min.js') }}"></script>
         <script src="{{ asset('js/viewer-js/viewer.min.js') }}"></script>
         <script>
-            const $photos = $("#photos-grid");
-            const $loading = $("#photos-loading a");
-            const viewer = new Viewer(document.getElementById('photos-grid'), {});
             let params = {
                 page: 1,
                 order: '',
@@ -90,6 +97,36 @@
                 border: 10,
                 waitThumbnailsLoad: false,
             };
+
+            const $photos = $("#photos-grid");
+            const $loading = $("#photos-loading a");
+            const $drawer = $("#drawer");
+            const $drawerMask = $('#drawer-mask');
+            const viewer = new Viewer(document.getElementById('photos-grid'), {});
+            const drawer = {
+                open(title, $content) {
+                    $drawerMask.fadeIn();
+                    $drawer.css('right', 0);
+                    $drawer.find('#drawer-title').html(title);
+                    $drawer.find('#drawer-content').html($content);
+                },
+                close() {
+                    $drawerMask.fadeOut();
+                    $drawer.css('right', '-1000px');
+                },
+                toggle(title, $content) {
+                    if ($drawerMask.is(':hidden')) {
+                        this.open(title, $content);
+                    } else {
+                        this.close();
+                    }
+                }
+            }
+
+            const getAlbums = () => {
+                drawer.toggle('我的相册');
+            }
+
             const getImages = () => {
                 if (params.page !== 1 && $loading.hasClass('cursor-not-allowed')) {
                     return;
diff --git a/routes/web.php b/routes/web.php
index 484f42ef..4f39c85f 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -23,6 +23,7 @@ Route::group(['middleware' => ['auth']], function () {
     Route::get('/upload', fn () => view('upload'))->name('upload');
     Route::get('/images', [ImageController::class, 'index'])->name('images');
     Route::get('/user/images', [ImageController::class, 'images'])->name('user.images');
+    Route::get('/user/albums', [ImageController::class, 'albums'])->name('user.albums');
 });
 
 require __DIR__.'/auth.php';