diff --git a/public/css/app.css b/public/css/app.css
index b1338d29e..1d98bee48 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -53470,6 +53470,27 @@ table thead a:hover{
   visibility: visible;
   opacity: 1;
 }
+.notifications-menu ul li a {
+        border-bottom: 1px solid;
+    }
+.avatar-attachment{
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+        background-color: #adb5bd;
+        border-radius: .375rem;
+        font-size: 1rem;
+        height: 45px;
+        width: 45px;
+}
 /* index */
 
 
diff --git a/resources/assets/js/components/AkauntingDropzoneFileUpload.vue b/resources/assets/js/components/AkauntingDropzoneFileUpload.vue
index 27128d909..3c7d6b76f 100644
--- a/resources/assets/js/components/AkauntingDropzoneFileUpload.vue
+++ b/resources/assets/js/components/AkauntingDropzoneFileUpload.vue
@@ -20,7 +20,7 @@
 
                 <div class="gap-x-1 relative">
                     <button data-dz-remove="true" class="absolute group right-0">
-                        <span class="material-icons text-base text-red px-1.5 py-1 rounded-lg group-hover:bg-gray-100">delete</span>
+                        <span class="material-icons-outlined text-base text-gray-300 px-1.5 py-1 rounded-lg group-hover:bg-gray-100">delete</span>
                     </button>
                 </div>
             </div>
@@ -45,12 +45,12 @@
                         </div>
                     </div>
 
-                    <div class="gap-x-1">
+                    <div class="flex flex-col gap-x-1">
                         <button data-dz-remove="true" class="group">
-                            <span class="material-icons text-base text-red px-1.5 py-1 rounded-lg group-hover:bg-gray-100">delete</span>
+                            <span class="material-icons-outlined text-base text-gray-300 px-1.5 py-1 rounded-lg group-hover:bg-gray-100">delete</span>
                         </button>
                         <a href="#" type="button" class="group hidden" data-dz-download>
-                            <span class="material-icons-round text-base text-red px-1.5 py-1 rounded-lg group-hover:bg-gray-100">download</span>
+                            <span class="material-icons text-base text-gray-300 px-1.5 py-1 rounded-lg group-hover:bg-gray-100">download</span>
                         </a>
                     </div>
                 </div>
diff --git a/resources/assets/sass/app.css b/resources/assets/sass/app.css
index 5951c3f43..e4afcb3c3 100644
--- a/resources/assets/sass/app.css
+++ b/resources/assets/sass/app.css
@@ -46,6 +46,19 @@
     .tabs-link:hover::before {
        @apply opacity-100 visible;
     }
+
+    .notifications-menu ul li a {
+        border-bottom: 1px solid;
+    }
+      
+    .avatar-attachment {
+        @apply text-white inline-flex items-center justify-center;
+        background-color: #adb5bd;
+        border-radius: .375rem;
+        font-size: 1rem;
+        height: 45px;
+        width: 45px;
+    }
      /* index */
 }
 
diff --git a/resources/views/components/media/file.blade.php b/resources/views/components/media/file.blade.php
index a6d9ddbde..1b66e36c9 100644
--- a/resources/views/components/media/file.blade.php
+++ b/resources/views/components/media/file.blade.php
@@ -1,37 +1,43 @@
-<div class="flex items-center justify-between border-b py-4">
-    <div class="flex items-center">
-        @if ($file->aggregate_type == 'image')
-            <span class="material-icons text-base">image</span>
-        @else
-            <span class="material-icons text-base">attach_file</span>
-        @endif  
-
-        <div class="flex flex-col text-gray-500 ltr:ml-3 rtl:mr-3 gap-y-1">
-            <span class="w-64 text-sm truncate">
-                {{ $file->basename }}
-            </span>
-
-            <span class="text-xs mb-0">
-                {{ $file->readableSize() }}
-            </span>
-        </div>
-    </div>  
-
-    <div class="flex flex-row lg:flex-col gap-x-1">
-        @can('delete-common-uploads')
-            <x-link href="javascript:void();" id="remove-{{ $column_name }}" @click="onDeleteFile('{{ $file->id }}', '{{ route('uploads.destroy', $file->id) }}', '{{ trans('general.title.delete', ['type' => $column_name]) }}', '{{ trans('general.delete_confirm', ['name' => $file->basename, 'type' => $column_name]) }} ', '{{ trans('general.cancel') }}', '{{ trans('general.delete') }}')" type="button" class="group" override="class">
-                <span class="material-icons text-base text-red px-1.5 py-1 rounded-lg group-hover:bg-gray-100">delete</span>
-            </x-link>
-
-            @if ($options)
-                <input type="hidden" name="page_{{ $file->id}}" id="file-page-{{ $file->id}}" value="{{ $options['page'] }}" />
-                <input type="hidden" name="key_{{ $file->id}}" id="file-key-{{ $file->id}}" value="{{ $options['key'] }}" />
-                <input type="hidden" name="value_{{ $file->id}}" id="file-value-{{ $file->id}}" value="{{ $file->id }}" />
+<div class="divide-y">
+    <div class="flex items-center justify-between py-4 -mb-4">
+        <div class="flex items-center">
+            @if ($file->aggregate_type == 'image')
+                <div class="avatar-attachment">
+                    <img src="{{ route('uploads.get', $file->id) }}" alt="{{ $file->basename }}" class="avatar-img h-full rounded object-cover">
+                </div>
+            @else
+                <div class="avatar-attachment">
+                    <span class="material-icons text-base">attach_file</span>
+                </div>
             @endif  
-        @endcan
 
-        <x-link href="{{ route('uploads.download', $file->id) }}" type="button" class="group" override="class">
-            <span class="material-icons text-base text-purple px-1.5 py-1 rounded-lg group-hover:bg-gray-100">download</span>
-        </x-link>
+            <div class="flex flex-col text-gray-500 ltr:ml-3 rtl:mr-3 gap-y-1">
+                <span class="w-64 text-sm truncate">
+                    {{ $file->basename }}
+                </span>
+
+                <span class="text-xs mb-0">
+                    {{ $file->readableSize() }}
+                </span>
+            </div>
+        </div>  
+
+        <div class="flex flex-row lg:flex-col gap-x-1">
+            @can('delete-common-uploads')
+                <x-link href="javascript:void();" id="remove-{{ $column_name }}" @click="onDeleteFile('{{ $file->id }}', '{{ route('uploads.destroy', $file->id) }}', '{{ trans('general.title.delete', ['type' => $column_name]) }}', '{{ trans('general.delete_confirm', ['name' => $file->basename, 'type' => $column_name]) }} ', '{{ trans('general.cancel') }}', '{{ trans('general.delete') }}')" type="button" class="group" override="class">
+                    <span class="material-icons-outlined text-base text-gray-300 px-1.5 py-1 rounded-lg group-hover:bg-gray-100">delete</span>
+                </x-link>
+
+                @if ($options)
+                    <input type="hidden" name="page_{{ $file->id}}" id="file-page-{{ $file->id}}" value="{{ $options['page'] }}" />
+                    <input type="hidden" name="key_{{ $file->id}}" id="file-key-{{ $file->id}}" value="{{ $options['key'] }}" />
+                    <input type="hidden" name="value_{{ $file->id}}" id="file-value-{{ $file->id}}" value="{{ $file->id }}" />
+                @endif  
+            @endcan
+
+            <x-link href="{{ route('uploads.download', $file->id) }}" type="button" class="group" override="class">
+                <span class="material-icons text-base text-gray-300 px-1.5 py-1 rounded-lg group-hover:bg-gray-100">download</span>
+            </x-link>
+        </div>
     </div>
 </div>