diff --git a/client/src/components/file-desc/Desc.css b/client/src/components/file-desc/Desc.css
index 162bab1..cf65b18 100644
--- a/client/src/components/file-desc/Desc.css
+++ b/client/src/components/file-desc/Desc.css
@@ -247,20 +247,52 @@
     cursor: pointer;
 }
 
-.toast-button{
-    width: 60px;
-    height: 30px;
-    margin-left: 10px;
-    border: none;
-    border-radius: 5px;
-    background-color: var(--secondary-color);
-    color: rgb(0, 0, 0);
-    font-family: PolySans Neutral;
-    font-size: 15px;
+.delete-prompt-body {
+  text-align: center;
+  padding-top: 16px;
+}
+.delete-prompt-body__icon {
+  font-size: 120px;
+  color: orange;
+}
+.delete-prompt-body__title {
+  font-size: 28px;
+  margin-bottom: 16px;
+}
+.delete-prompt-body__description {
+  font-size: 18px;
+  line-height: 28px;
+}
+.delete-prompt-body__description b {
+  color: var(--secondary-color)
+}
+
+.delete-prompt-action {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin: 48px 0 24px;
+}
+
+.btn-toast {
+  padding: 6px 12px;
+  border-radius: 5px;
+  font-family: PolySans Neutral;
+  font-size: 15px;
+}
+.btn-toast__secondary {
+  background-color: transparent;
+  border: 2px solid #c8c8c8;
+  color: #c8c8c8;
+}
+.btn-toast__danger {
+  background-color: #ff5151;
+  border: none;
+  color: white;
 }
 
-.toast-button:hover{
-    box-shadow: none;
+.btn-toast:hover{
+  box-shadow: none;
 }
 
 @media screen and (max-width: 450px){
diff --git a/client/src/components/file-desc/Desc.jsx b/client/src/components/file-desc/Desc.jsx
index ae6e1c9..cb82af4 100644
--- a/client/src/components/file-desc/Desc.jsx
+++ b/client/src/components/file-desc/Desc.jsx
@@ -65,17 +65,24 @@ function Desc() {
 
   function deletePrompt() {
     toast((t) => (
-      <span>
-        Deleting this file will remove it <b>permanently.</b>
-        <button className='toast-button' onClick={() => { deleteFile(t) }}>
-          Delete
-        </button>
-        <button className='toast-button' onClick={() => { toast.dismiss(t.id) }}>
-          Cancel
-        </button>
-      </span>
+      <div>
+        <div className='delete-prompt-body'>
+          <span className='delete-prompt-body__icon'>⚠️</span>
+          <h4 className='delete-prompt-body__title'>Are you sure?</h4>
+          <p className='delete-prompt-body__description'>
+            Deleting this file will remove it <b>permanently.</b>
+          </p>
+        </div>
+        <div className='delete-prompt-action'>
+          <button className='btn-toast btn-toast__secondary' onClick={() => { toast.dismiss(t.id) }}>
+            Cancel
+          </button>
+          <button className='btn-toast btn-toast__danger' onClick={() => { deleteFile(t) }}>
+            Delete File
+          </button>
+        </div>
+      </div>
     ), {
-      icon: '⚠️',
       style: {
         borderRadius: '5px',
         background: '#333',