diff --git a/app/views/console/storage/index.phtml b/app/views/console/storage/index.phtml
index 654b9318ab..a141b3ffe9 100644
--- a/app/views/console/storage/index.phtml
+++ b/app/views/console/storage/index.phtml
@@ -35,7 +35,6 @@
                         <li class="margin-bottom">
                             <a data-ls-attrs="href=/console/storage/bucket?id={{bucket.$id}}&project={{router.params.project}}" class="box">
                                 <div data-ls-bind="{{bucket.name}}" class="text-one-liner margin-bottom text-bold">&nbsp;</div>
-
                                 <i class="icon-right-open"></i>
                             </a>
                         </li>
diff --git a/public/styles/comps/preview-box.less b/public/styles/comps/preview-box.less
new file mode 100644
index 0000000000..6f4851e4bc
--- /dev/null
+++ b/public/styles/comps/preview-box.less
@@ -0,0 +1,21 @@
+.preview-box {
+  display: grid;
+  place-content: center;
+  padding: 40px;
+  background: var(--config-color-background-fade);
+  border: 1px dashed var(--config-color-background-dark);
+  border-radius: 8px;
+  &-image {
+    display: grid;
+    place-content: center;
+    width: 40px;
+    height: 40px;
+    margin-inline: auto;
+    background-color: var(--config-color-background-focus);
+    border-radius: 50%;
+  }
+  &-text{
+    margin-top: 16px;
+    color: var(--config-color-fade);
+  }
+}
\ No newline at end of file
diff --git a/public/styles/default.less b/public/styles/default.less
index d2fe412eeb..1fb06deda3 100644
--- a/public/styles/default.less
+++ b/public/styles/default.less
@@ -34,6 +34,7 @@ img[src=""] {
 @import "comps/modal";
 @import "comps/scroll";
 @import "comps/tabs";
+@import "comps/preview-box";
 @import "comps/upload-box";
 @import "comps/pill";
 
@@ -57,4 +58,4 @@ ul {
     margin: 0;
     list-style: none;
   }
-}
+}
\ No newline at end of file