diff --git a/app/Http/Controllers/User/ImageController.php b/app/Http/Controllers/User/ImageController.php
new file mode 100644
index 00000000..85fed33a
--- /dev/null
+++ b/app/Http/Controllers/User/ImageController.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Controllers\User;
+
+use App\Http\Controllers\Controller;
+use App\Models\User;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\View\View;
+
+class ImageController extends Controller
+{
+    public function index(): View
+    {
+        /** @var User $user */
+        $user = Auth::user();
+
+        return view('images');
+    }
+}
diff --git a/public/css/app.css b/public/css/app.css
index 1640ecc3..721f5ca3 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -391,7 +391,7 @@ 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-b-2, .border-l-4, .border-t, .border-r, .border-b {
+.divide-y > *, .border, .border-2, .border-b-2, .border-l-4, .border-t, .border-r, .border-b, .border-l {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
@@ -690,9 +690,6 @@ select {
 .z-\[9\] {
   z-index: 9;
 }
-.order-last {
-  order: 9999;
-}
 .m-2 {
   margin: 0.5rem;
 }
@@ -740,9 +737,6 @@ select {
 .mt-6 {
   margin-top: 1.5rem;
 }
-.mt-9 {
-  margin-top: 2.25rem;
-}
 .mb-5 {
   margin-bottom: 1.25rem;
 }
@@ -770,12 +764,15 @@ select {
 .mr-4 {
   margin-right: 1rem;
 }
-.mt-5 {
-  margin-top: 1.25rem;
+.-mr-1 {
+  margin-right: -0.25rem;
 }
 .block {
   display: block;
 }
+.inline-block {
+  display: inline-block;
+}
 .flex {
   display: flex;
 }
@@ -824,6 +821,9 @@ select {
 .h-6 {
   height: 1.5rem;
 }
+.h-12 {
+  height: 3rem;
+}
 .min-h-\[150px\] {
   min-height: 150px;
 }
@@ -863,17 +863,8 @@ select {
 .w-6 {
   width: 1.5rem;
 }
-.w-\[30\%\] {
-  width: 30%;
-}
-.w-\[40\%\] {
-  width: 40%;
-}
-.w-3 {
-  width: 0.75rem;
-}
-.w-1\/2 {
-  width: 50%;
+.w-56 {
+  width: 14rem;
 }
 .max-w-xl {
   max-width: 36rem;
@@ -890,21 +881,21 @@ select {
 .flex-shrink-0 {
   flex-shrink: 0;
 }
-.basis-1\/4 {
-  flex-basis: 25%;
-}
-.basis-1\/2 {
-  flex-basis: 50%;
-}
 .basis-1\/3 {
   flex-basis: 33.333333%;
 }
 .basis-2\/3 {
   flex-basis: 66.666667%;
 }
+.basis-1\/2 {
+  flex-basis: 50%;
+}
 .origin-top-right {
   transform-origin: top right;
 }
+.origin-top-left {
+  transform-origin: top left;
+}
 .scale-95 {
   --tw-scale-x: .95;
   --tw-scale-y: .95;
@@ -954,12 +945,6 @@ select {
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
-.flex-row {
-  flex-direction: row;
-}
-.flex-row-reverse {
-  flex-direction: row-reverse;
-}
 .flex-col {
   flex-direction: column;
 }
@@ -969,12 +954,6 @@ select {
 .flex-nowrap {
   flex-wrap: nowrap;
 }
-.content-center {
-  align-content: center;
-}
-.items-start {
-  align-items: flex-start;
-}
 .items-center {
   align-items: center;
 }
@@ -990,9 +969,6 @@ select {
 .justify-between {
   justify-content: space-between;
 }
-.justify-items-start {
-  justify-items: start;
-}
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1008,6 +984,21 @@ select {
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+.space-y-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+}
 .space-y-3 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1018,36 +1009,6 @@ select {
   margin-right: calc(0.75rem * var(--tw-space-x-reverse));
   margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
-.space-x-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(1rem * var(--tw-space-x-reverse));
-  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
-}
-.space-y-10 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
-}
-.space-y-6 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
-}
-.space-y-0 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0px * var(--tw-space-y-reverse));
-}
-.space-x-6 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
-  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-.space-y-8 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
-}
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -1056,6 +1017,10 @@ select {
 .divide-solid > :not([hidden]) ~ :not([hidden]) {
   border-style: solid;
 }
+.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-divide-opacity));
+}
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1118,6 +1083,12 @@ select {
 .border-b {
   border-bottom-width: 1px;
 }
+.border-l {
+  border-left-width: 1px;
+}
+.border-solid {
+  border-style: solid;
+}
 .border-dotted {
   border-style: dotted;
 }
@@ -1152,6 +1123,14 @@ select {
   --tw-border-opacity: 1;
   border-color: rgb(243 244 246 / var(--tw-border-opacity));
 }
+.border-black {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+.border-indigo-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(79 70 229 / var(--tw-border-opacity));
+}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1168,6 +1147,10 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -1184,25 +1167,31 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }
-.bg-gray-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-}
 .bg-slate-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(248 250 252 / var(--tw-bg-opacity));
 }
-.bg-red-500 {
+.bg-gray-700 {
   --tw-bg-opacity: 1;
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
-.bg-red-300 {
+.bg-slate-200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
+  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
 }
-.bg-red-400 {
+.bg-slate-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
+  background-color: rgb(241 245 249 / 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-50 {
+  --tw-bg-opacity: 0.5;
 }
 .fill-current {
   fill: currentColor;
@@ -1236,6 +1225,14 @@ select {
   padding-left: 2rem;
   padding-right: 2rem;
 }
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+.py-10 {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -1256,26 +1253,14 @@ select {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
-.py-3 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-}
-.py-8 {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-}
-.py-10 {
-  padding-top: 2.5rem;
-  padding-bottom: 2.5rem;
-}
 .pb-6 {
   padding-bottom: 1.5rem;
 }
 .pt-6 {
   padding-top: 1.5rem;
 }
-.pt-9 {
-  padding-top: 2.25rem;
+.pt-14 {
+  padding-top: 3.5rem;
 }
 .pl-3 {
   padding-left: 0.75rem;
@@ -1292,9 +1277,6 @@ select {
 .pl-0 {
   padding-left: 0px;
 }
-.pb-4 {
-  padding-bottom: 1rem;
-}
 .text-left {
   text-align: left;
 }
@@ -1324,6 +1306,10 @@ select {
   font-size: 0.75rem;
   line-height: 1rem;
 }
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
 .text-4xl {
   font-size: 2.25rem;
   line-height: 2.5rem;
@@ -1336,14 +1322,6 @@ select {
   font-size: 1.125rem;
   line-height: 1.75rem;
 }
-.text-5xl {
-  font-size: 3rem;
-  line-height: 1;
-}
-.text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
 .font-medium {
   font-weight: 500;
 }
@@ -1404,6 +1382,26 @@ select {
   --tw-text-opacity: 1;
   color: rgb(220 38 38 / var(--tw-text-opacity));
 }
+.text-amber-500 {
+  --tw-text-opacity: 1;
+  color: rgb(245 158 11 / var(--tw-text-opacity));
+}
+.text-emerald-500 {
+  --tw-text-opacity: 1;
+  color: rgb(16 185 129 / var(--tw-text-opacity));
+}
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+.text-green-400 {
+  --tw-text-opacity: 1;
+  color: rgb(74 222 128 / var(--tw-text-opacity));
+}
+.text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
 .text-indigo-700 {
   --tw-text-opacity: 1;
   color: rgb(67 56 202 / var(--tw-text-opacity));
@@ -1412,10 +1410,6 @@ select {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
 .text-blue-500 {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity));
@@ -1424,10 +1418,6 @@ select {
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity));
 }
-.text-gray-300 {
-  --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity));
-}
 .text-green-600 {
   --tw-text-opacity: 1;
   color: rgb(22 163 74 / var(--tw-text-opacity));
@@ -1440,21 +1430,9 @@ select {
   --tw-text-opacity: 1;
   color: rgb(71 85 105 / var(--tw-text-opacity));
 }
-.text-red-300 {
+.text-red-400 {
   --tw-text-opacity: 1;
-  color: rgb(252 165 165 / var(--tw-text-opacity));
-}
-.text-amber-500 {
-  --tw-text-opacity: 1;
-  color: rgb(245 158 11 / var(--tw-text-opacity));
-}
-.text-emerald-500 {
-  --tw-text-opacity: 1;
-  color: rgb(16 185 129 / var(--tw-text-opacity));
-}
-.text-green-400 {
-  --tw-text-opacity: 1;
-  color: rgb(74 222 128 / var(--tw-text-opacity));
+  color: rgb(248 113 113 / var(--tw-text-opacity));
 }
 .underline {
   text-decoration: underline;
@@ -1527,6 +1505,11 @@ select {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .duration-150 {
   transition-duration: 150ms;
 }
@@ -1539,6 +1522,12 @@ select {
 .duration-75 {
   transition-duration: 75ms;
 }
+.duration-100 {
+  transition-duration: 100ms;
+}
+.duration-500 {
+  transition-duration: 500ms;
+}
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -1657,6 +1646,10 @@ select {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity));
 }
+.focus\:ring-indigo-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
+}
 .focus\:ring-opacity-50:focus {
   --tw-ring-opacity: 0.5;
 }
@@ -1666,6 +1659,9 @@ select {
 .focus\:ring-offset-gray-800:focus {
   --tw-ring-offset-color: #1f2937;
 }
+.focus\:ring-offset-gray-100:focus {
+  --tw-ring-offset-color: #f3f4f6;
+}
 .active\:bg-gray-100:active {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1702,14 +1698,6 @@ select {
     margin-left: 16rem;
   }
 
-  .sm\:mt-8 {
-    margin-top: 2rem;
-  }
-
-  .sm\:mt-6 {
-    margin-top: 1.5rem;
-  }
-
   .sm\:block {
     display: block;
   }
@@ -1718,10 +1706,6 @@ select {
     display: flex;
   }
 
-  .sm\:grid {
-    display: grid;
-  }
-
   .sm\:hidden {
     display: none;
   }
@@ -1742,14 +1726,6 @@ select {
     flex: 1 1 0%;
   }
 
-  .sm\:grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-
-  .sm\:flex-col {
-    flex-direction: column;
-  }
-
   .sm\:items-center {
     align-items: center;
   }
@@ -1766,32 +1742,20 @@ select {
     justify-content: space-between;
   }
 
-  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(0px * var(--tw-space-y-reverse));
-  }
-
-  .sm\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-  }
-
   .sm\:rounded-lg {
     border-radius: 0.5rem;
   }
 
-  .sm\:px-10 {
-    padding-left: 2.5rem;
-    padding-right: 2.5rem;
-  }
-
   .sm\:px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
   }
 
+  .sm\:px-10 {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+
   .sm\:px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
@@ -1801,10 +1765,6 @@ select {
     padding-top: 0px;
   }
 
-  .sm\:pt-14 {
-    padding-top: 3.5rem;
-  }
-
   .sm\:pl-64 {
     padding-left: 16rem;
   }
@@ -1821,73 +1781,39 @@ select {
     margin-top: 2rem;
   }
 
-  .md\:mt-6 {
-    margin-top: 1.5rem;
-  }
-
   .md\:mt-0 {
     margin-top: 0px;
   }
 
+  .md\:block {
+    display: block;
+  }
+
   .md\:grid {
     display: grid;
   }
 
-  .md\:w-\[40\%\] {
-    width: 40%;
-  }
-
-  .md\:w-\[50\%\] {
-    width: 50%;
+  .md\:hidden {
+    display: none;
   }
 
   .md\:w-\[70\%\] {
     width: 70%;
   }
 
-  .md\:basis-1\/4 {
-    flex-basis: 25%;
-  }
-
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .md\:grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-
   .md\:flex-row {
     flex-direction: row;
   }
 
-  .md\:flex-col {
-    flex-direction: column;
-  }
-
-  .md\:gap-x-8 {
-    -moz-column-gap: 2rem;
-         column-gap: 2rem;
-  }
-
-  .md\:gap-y-10 {
-    row-gap: 2.5rem;
-  }
-
-  .md\:gap-x-2 {
-    -moz-column-gap: 0.5rem;
-         column-gap: 0.5rem;
-  }
-
   .md\:gap-x-4 {
     -moz-column-gap: 1rem;
          column-gap: 1rem;
   }
 
-  .md\:gap-y-8 {
-    row-gap: 2rem;
-  }
-
   .md\:gap-y-4 {
     row-gap: 1rem;
   }
@@ -1904,6 +1830,10 @@ select {
     margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
+  .md\:p-10 {
+    padding: 2.5rem;
+  }
+
   .md\:px-10 {
     padding-left: 2.5rem;
     padding-right: 2.5rem;
@@ -1936,10 +1866,6 @@ select {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
-  .xl\:flex-row {
-    flex-direction: row;
-  }
-
   .xl\:gap-x-8 {
     -moz-column-gap: 2rem;
          column-gap: 2rem;
diff --git a/resources/views/components/dropdown.blade.php b/resources/views/components/dropdown.blade.php
index 27ea3e88..1bb326ea 100644
--- a/resources/views/components/dropdown.blade.php
+++ b/resources/views/components/dropdown.blade.php
@@ -1,25 +1,24 @@
-<div class="ml-3 relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false" x-cloak>
+@props(['classes' => ['left' => 'origin-top-right right-0', 'right' => 'origin-top-left left-0'], 'direction' => 'left'])
+
+<div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false" x-cloak>
     <div @click="open = ! open">
         {{ $trigger }}
     </div>
 
-    <form method="POST" action="{{ route('logout') }}">
-        @csrf
-        <div x-show="open"
-             x-transition:enter="transition ease-out duration-200"
-             x-transition:enter-start="transform opacity-0 scale-95"
-             x-transition:enter-end="transform opacity-100 scale-100"
-             x-transition:leave="transition ease-in duration-75"
-             x-transition:leave-start="transform opacity-100 scale-100"
-             x-transition:leave-end="transform opacity-0 scale-95"
-             class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
-             role="menu"
-             aria-orientation="vertical"
-             aria-labelledby="user-menu-button"
-             tabindex="-1"
-             style="display: none"
-        >
-            {{ $content }}
-        </div>
-    </form>
+    <div x-show="open"
+         x-transition:enter="transition ease-out duration-200"
+         x-transition:enter-start="transform opacity-0 scale-95"
+         x-transition:enter-end="transform opacity-100 scale-100"
+         x-transition:leave="transition ease-in duration-75"
+         x-transition:leave-start="transform opacity-100 scale-100"
+         x-transition:leave-end="transform opacity-0 scale-95"
+         class="absolute {{ $classes[$direction] }} mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
+         role="menu"
+         aria-orientation="vertical"
+         aria-labelledby="user-menu-button"
+         tabindex="-1"
+         style="display: none"
+    >
+        {{ $content }}
+    </div>
 </div>
diff --git a/resources/views/images.blade.php b/resources/views/images.blade.php
new file mode 100644
index 00000000..0e1697b5
--- /dev/null
+++ b/resources/views/images.blade.php
@@ -0,0 +1,26 @@
+@section('title', '我的图片')
+
+<x-app-layout>
+    <div class="flex justify-between items-center bg-white h-12 border-solid border-b px-2 space-x-2">
+        <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="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>
+                </x-slot>
+
+                <x-slot name="content">
+                    <x-dropdown-link href="{{ route('/') }}">移动到相册</x-dropdown-link>
+                    <x-dropdown-link href="{{ route('/') }}">标记为不健康</x-dropdown-link>
+                    <x-dropdown-link href="{{ route('/') }}" class="text-red-500">公开</x-dropdown-link>
+                    <x-dropdown-link href="{{ route('/') }}" class="text-red-500">删除</x-dropdown-link>
+                </x-slot>
+            </x-dropdown>
+        </div>
+    </div>
+    <div>
+        <x-no-data message="这里什么都没有呢～"/>
+    </div>
+</x-app-layout>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 10309221..956d15b0 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+@props(['full' => request()->routeIs('images')])
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
     <head>
         <meta charset="utf-8">
@@ -24,18 +25,25 @@
     <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')
+            @include('layouts.header', ['full' => $full])
             <div
-                 class="z-[1] bg-black opacity-50 h-full w-full fixed left-0 right-0 bottom-0 top-0 sm:hidden"
+                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>
-            <main class="transition-all duration-300 sm:ml-64 pt-9 sm:pt-14">
-                <div class="mt-9 container mx-auto px-4 sm:px-10 md:px-10 lg:px-10 xl:px-10 2xl:px-60 w-full pb-4">
+            <main class="transition-all duration-300 sm:ml-64 pt-14">
+                <div class="w-full {{ $full ? '' : 'container mx-auto p-6 md:p-10 md:px-10 lg:px-10 xl:px-10 2xl:px-60' }}" style="min-height: calc(100vh - 3.5rem)">
                     {{ $slot }}
                 </div>
             </main>
diff --git a/resources/views/layouts/header.blade.php b/resources/views/layouts/header.blade.php
index 09be1a57..9d6b5899 100644
--- a/resources/views/layouts/header.blade.php
+++ b/resources/views/layouts/header.blade.php
@@ -1,5 +1,7 @@
+@props(['full' => false])
+
 <header class="pl-0 sm:pl-64 transition-all duration-300 w-full h-14 bg-gray-700 text-white flex justify-center fixed top-0 z-[9]">
-    <div class="container mx-auto px-5 sm:px-10 md:px-10 lg:px-10 xl:px-10 2xl:px-60 flex justify-between items-center">
+    <div class="{{ $full ? 'px-4' : 'container mx-auto px-6 md:px-10 md:px-10 lg:px-10 xl:px-10 2xl:px-60' }} w-full flex justify-between items-center">
         <div class="flex justify-start items-center max-w-[70%]">
             <a href="javascript:void(0)" @click="sidebarOpened = ! sidebarOpened" class="w-6 h-6 p-4 rounded-full sm:hidden -ml-1 mr-4 flex justify-center items-center">
                 <i class="fas fa-bars text-xl"></i>
diff --git a/resources/views/layouts/sidebar.blade.php b/resources/views/layouts/sidebar.blade.php
index 12b29aec..873f997b 100644
--- a/resources/views/layouts/sidebar.blade.php
+++ b/resources/views/layouts/sidebar.blade.php
@@ -22,9 +22,9 @@
                     <x-slot name="icon"><i class="fas fa-cloud-upload-alt text-blue-500"></i></x-slot>
                     <x-slot name="name">上传图片</x-slot>
                 </x-nav-link>
-                <x-nav-link :active="request()->routeIs('images')">
+                <x-nav-link :href="route('images')" :active="request()->routeIs('images')">
                     <x-slot name="icon"><i class="fas fa-images text-blue-500"></i></x-slot>
-                    <x-slot name="name">图片</x-slot>
+                    <x-slot name="name">我的图片</x-slot>
                 </x-nav-link>
                 <x-nav-link :active="request()->routeIs('settings')">
                     <x-slot name="icon"><i class="fas fa-user-cog text-blue-500"></i></x-slot>
@@ -44,27 +44,27 @@
             </div>
             <div class="flex flex-col space-y-2 mb-5">
                 <p class="text-gray-400 text-sm mx-4">系统</p>
-                <x-nav-link :active="request()->routeIs('admin/console')">
+                <x-nav-link :active="request()->routeIs('admin.console')">
                     <x-slot name="icon"><i class="fas fa-terminal text-blue-500"></i></x-slot>
                     <x-slot name="name">控制台</x-slot>
                 </x-nav-link>
-                <x-nav-link :active="request()->routeIs('admin/groups')">
+                <x-nav-link :active="request()->routeIs('admin.groups')">
                     <x-slot name="icon"><i class="fas fa-users text-blue-500"></i></x-slot>
                     <x-slot name="name">角色组</x-slot>
                 </x-nav-link>
-                <x-nav-link :active="request()->routeIs('/admin/users')">
+                <x-nav-link :active="request()->routeIs('admin.users')">
                     <x-slot name="icon"><i class="fas fa-users-cog text-blue-500"></i></x-slot>
                     <x-slot name="name">用户管理</x-slot>
                 </x-nav-link>
-                <x-nav-link :active="request()->routeIs('admin/images')">
+                <x-nav-link :active="request()->routeIs('admin.images')">
                     <x-slot name="icon"><i class="fas fa-images text-blue-500"></i></x-slot>
                     <x-slot name="name">图片管理</x-slot>
                 </x-nav-link>
-                <x-nav-link :active="request()->routeIs('admin/strategies')">
+                <x-nav-link :active="request()->routeIs('admin.strategies')">
                     <x-slot name="icon"><i class="fas fa-hdd text-blue-500"></i></x-slot>
                     <x-slot name="name">储存策略</x-slot>
                 </x-nav-link>
-                <x-nav-link :active="request()->routeIs('admin/settings')">
+                <x-nav-link :active="request()->routeIs('admin.settings')">
                     <x-slot name="icon"><i class="fas fa-cogs text-blue-500"></i></x-slot>
                     <x-slot name="name">系统设置</x-slot>
                 </x-nav-link>
diff --git a/routes/web.php b/routes/web.php
index 40a0cf81..658febe3 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -14,12 +14,14 @@
 use Illuminate\Support\Facades\Route;
 use App\Http\Controllers\Controller;
 use App\Http\Controllers\User\UserController;
+use App\Http\Controllers\User\ImageController;
 
 Route::get('/', fn () => view('welcome'))->name('/');
 Route::post('/upload', [Controller::class, 'upload']);
-Route::group(['middleware' => ['auth'],], function () {
+Route::group(['middleware' => ['auth']], function () {
     Route::get('/dashboard', [UserController::class, 'dashboard'])->name('dashboard');
     Route::get('/upload', fn () => view('upload'))->name('upload');
+    Route::get('/images', [ImageController::class, 'index'])->name('images');
 });
 
 require __DIR__.'/auth.php';
diff --git a/tailwind.config.js b/tailwind.config.js
index 8e7d8886..14abfa41 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -22,5 +22,5 @@ module.exports = {
         },
     },
 
-    plugins: [require('@tailwindcss/forms')],
+    plugins: [require('@tailwindcss/forms'), require('autoprefixer')],
 };