diff --git a/app/views/console/storage/index.phtml b/app/views/console/storage/index.phtml
index bc493f882d..68eb7703b0 100644
--- a/app/views/console/storage/index.phtml
+++ b/app/views/console/storage/index.phtml
@@ -138,6 +138,12 @@ $fileLimitHuman = $this->getParam('fileLimitHuman', 0);
                                                     <div class="margin-bottom-small">File Preview</div>
 
                                                     <div class="margin-bottom-small">
+                                                        <div class="preview-box">
+                                                            <div class="preview-box-image">
+                                                                <span class="IMAGE-OR-ICON">@</span>
+                                                            </div>
+                                                            <span class="preview-box-text">Preview not available</span>
+                                                        </div>
                                                         <img src="" class="file-preview" data-ls-attrs="src={{env.ENDPOINT}}/v1/storage/files/{{file.$id}}/preview?width=350&height=250&project={{router.params.project}}&mode=admin" loading="lazy" width="225" height="160" />
                                                     </div>
 
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 660895a22e..cc1f3d3eb4 100644
--- a/public/styles/default.less
+++ b/public/styles/default.less
@@ -33,6 +33,7 @@ img[src=""] {
 @import "comps/modal";
 @import "comps/scroll";
 @import "comps/tabs";
+@import "comps/preview-box";
 
 html {
   padding: 0;
@@ -54,4 +55,4 @@ ul {
     margin: 0;
     list-style: none;
   }
-}
+}
\ No newline at end of file