diff --git a/views/user-partial.html b/views/user-partial.html
index fe1d096..c2950eb 100644
--- a/views/user-partial.html
+++ b/views/user-partial.html
@@ -93,15 +93,6 @@
                     </button>
                     @endif
                 </div>
-                @if(session && session.id === user.user_id)
-                <div id="profile-desc-edit-container" style="display: none; margin-top: 10px;">
-                    <textarea id="inline-desc-input" style="width: 100%; background: #222; border: 1px solid #444; color: #fff; padding: 5px; border-radius: 4px; box-sizing: border-box; min-height: 60px;">@if(user.description){!! user.description !!}@endif</textarea>
-                    <div style="display: flex; justify-content: flex-end; gap: 5px; margin-top: 5px;">
-                        <button id="inline-desc-cancel-btn" class="btn btn-sm btn-outline-danger" style="padding: 2px 8px; font-size: 0.8em;">Cancel</button>
-                        <button id="inline-desc-save-btn" class="btn btn-sm btn-outline-success" style="padding: 2px 8px; font-size: 0.8em;">Save</button>
-                    </div>
-                </div>
-                @endif
             </div>
             @endif
         </div>
@@ -379,6 +370,19 @@
 @endif
 @endif
 
+@if(session && session.id === user.user_id)
+<div id="profile-desc-edit-container" class="modal-overlay" style="display: none;">
+    <div class="modal-content" style="max-width: 600px; width: 90%; text-align: left;">
+        <h3 style="margin-top: 0; margin-bottom: 15px;">Edit Description</h3>
+        <textarea id="inline-desc-input" style="width: 100%; background: #222; border: 1px solid #444; color: #fff; padding: 10px; border-radius: 4px; box-sizing: border-box; min-height: 120px; resize: vertical; font-family: inherit;">@if(user.description){!! user.description !!}@endif</textarea>
+        <div class="modal-actions" style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px;">
+            <button id="inline-desc-cancel-btn" class="btn btn-secondary">Cancel</button>
+            <button id="inline-desc-save-btn" class="btn btn-primary">Save</button>
+        </div>
+    </div>
+</div>
+@endif
+
 @if(session && session.id === user.user_id)
 <style>
 #live-profile-preview-box:not(.edit-mode-active) .avatar-edit-btn,
@@ -538,12 +542,12 @@
 
         if (descEditBtn && descEditContainer) {
             descEditBtn.addEventListener('click', () => {
-                descDisplay.style.display = 'none';
-                descEditContainer.style.display = 'block';
+                descEditContainer.style.display = 'flex';
+                document.body.classList.add('modal-open');
             });
             descCancelBtn.addEventListener('click', () => {
-                descDisplay.style.display = 'block';
                 descEditContainer.style.display = 'none';
+                document.body.classList.remove('modal-open');
             });
             descSaveBtn.addEventListener('click', async () => {
                 descSaveBtn.disabled = true;
@@ -558,8 +562,8 @@
                     const data = await res.json();
                     if (data.success) {
                         descSaveBtn.disabled = false;
-                        descDisplay.style.display = 'block';
                         descEditContainer.style.display = 'none';
+                        document.body.classList.remove('modal-open');
                         const descTextDiv = descDisplay.querySelector('.desc-text');
                         if (description.trim() === '') {
                             descTextDiv.innerHTML = '<em style="color:var(--text-muted);">No description</em>';