diff --git a/GanjooRazor/Areas/User/Pages/DeleteAccount.cshtml b/GanjooRazor/Areas/User/Pages/DeleteAccount.cshtml
index afc2dc5c..6d384251 100644
--- a/GanjooRazor/Areas/User/Pages/DeleteAccount.cshtml
+++ b/GanjooRazor/Areas/User/Pages/DeleteAccount.cshtml
@@ -1,4 +1,4 @@
-@page
+@page
 @model GanjooRazor.Areas.User.Pages.DeleteAccountModel
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
 @{
@@ -6,79 +6,61 @@
     ViewData["Title"] = "حذف حساب کاربری";
     await GanjooRazor.Utils.GanjoorSessionChecker.ApplyPermissionsToViewData(Request, Response, ViewData);
 }
-<h1>@ViewData["Title"]</h1>
-
+<div class="up-page-header">
+    <h1>@ViewData["Title"]</h1>
+</div>
 
 @if (Model.Step1)
 {
-<form method="post" asp-page-handler="SendEmail">
-    <table style="width:100%" class="noborder">
-        <tr>
-            <td colspan="2">
-                <p>
-                    برای حذف حساب کاربری باید گذرواژهٔ خود را در کادر زیر وارد کنید.
-                </p>
-                <p>
-                    پس از ورود گذرواژه یک رمز به ایمیلتان ارسال می‌شود که با ورود رمز دریافتی حساب کاربریتان حذف خواهد شد.
-                </p>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <span class="inputlabel">گذرواژه: </span>
-            </td>
-            <td>
-                <input type="password" style="width:100%;direction:ltr" asp-for="DeleteViewModel.Password" />
-            </td>
-        </tr>
+    <div class="up-card up-danger-zone">
+        <h2 class="up-card__title">این عملیات غیرقابل بازگشت است</h2>
+        <div class="up-alert up-alert--warning">
+            در صورتی که کاربری تصمیم بگیرد حساب کاربری خود را در گنجور حذف کند تمام حاشیه‌ها و خوانش‌های منتشر شده‌اش در گنجور نیز حذف خواهد شد. علاوه بر آن رکوردهای بخش‌هایی از مشارکت کاربر که در گنجور اثر غیرقابل حذف گذاشته است (مثل ویرایش متن اشعار یا پیشنهاد تصاویر مرتبط با اشعار) به حساب کاربری سیستمی گنجور منتقل می‌شود. عملیات حذف کاربر غیرقابل برگشت است و در صورتی که کاربر با ایمیلی که پیشتر در گنجور حساب کاربری داشته و آن را حذف کرده مجدداً نام‌نویسی کند هیچ‌کدام از اطلاعات پیشتر واردشده‌اش بازنخواهد گشت.
+        </div>
+        <div class="up-alert up-alert--danger">
+            <strong>تبصره:</strong> گنجور ممکن است فهرست کاربران بدرفتار (کاربرانی که به ارسال مداوم حاشیه‌های نامناسب یا خرابکاری در سایت می‌پردازند) را به همراه گزارشی از فعالیت‌های نامناسب آنها نگهداری کند تا برخی یا همهٔ فعالیت‌های آنها محدود شود. ایمیل کاربر در این فهرست با حذف حساب کاربری حذف نمی‌شود و در صورت ثبت‌نام مجدد این اطلاعات مجدداً مورد مراجعه قرار خواهد گرفت.
+        </div>
 
-        <tr>
-            <td colspan="2">
-                <button type="submit" name="approve" id="approve" style="width:100%;color:white;background-color:green">بررسی گذرواژه و ارسال ایمیل تأیید</button>
-            </td>
-        </tr>
+        <form method="post" asp-page-handler="SendEmail" class="up-form">
+            <p class="up-hint">برای حذف حساب کاربری باید گذرواژهٔ خود را در کادر زیر وارد کنید. پس از ورود گذرواژه یک رمز به ایمیلتان ارسال می‌شود که با ورود رمز دریافتی حساب کاربریتان حذف خواهد شد.</p>
 
-        <tr>
-            <td colspan="2">
-                <p>
-                    در صورتی که کاربری تصمیم بگیرد حساب کاربری خود را در گنجور حذف کند تمام حاشیه‌ها و خوانش‌های منتشر شده‌اش در گنجور نیز حذف خواهد شد. علاوه بر آن رکوردهای بخشهایی از مشارکت کاربر که در گنجور اثر غیر قابل حذف گذاشته است (مثل ویرایش متن اشعار یا پیشنهاد تصاویر مرتبط با اشعار) به حساب کاربری سیستمی گنجور منتقل می‌شود. عملیات حذف کاربر غیرقابل برگشت است و در صورتی که کاربر با ایمیلی که پیشتر در گنجور حساب کاربری داشته و آن را حذف کرده مجدداً نام‌نویسی کند هیچکدام از اطلاعات پیشتر وارد شده‌اش بر نخواهد گشت.
-                </p>
-                <p>
-                    <span style="color:red">تبصره:</span> گنجور ممکن است فهرست کاربران بدرفتار (کاربرانی که به ارسال مداوم حاشیه‌های نامناسب یا خرابکاری در سایت می‌پردازند) را به همراه گزارشی از فعالیتهای نامناسب آنها نگهداری کند تا برخی یا همهٔ فعالیتهای آنها محدود شود. ایمیل کاربر در این فهرست با حذف حساب کاربری حذف نمی‌شود و در صورت ثبت‌نام مجدد این اطلاعات مجدداً مورد مراجعه قرار خواهد گرفت.
-                </p>
-            </td>
-        </tr>
+            <div class="up-field">
+                <label asp-for="DeleteViewModel.Password">گذرواژه</label>
+                <input type="password" asp-for="DeleteViewModel.Password" />
+            </div>
 
-    </table>
-    <div><p style="color:red">@Model.FatalError</p></div>
-</form>
+            @if (!string.IsNullOrEmpty(Model.FatalError))
+            {
+                <div class="up-alert up-alert--danger">@Model.FatalError</div>
+            }
+
+            <div class="up-form-actions">
+                <button type="submit" name="approve" id="approve" class="up-btn up-btn--danger">بررسی گذرواژه و ارسال ایمیل تأیید</button>
+            </div>
+        </form>
+    </div>
 }
 else
 {
-    <form method="post" asp-page-handler="FinalizeDelete">
-        <table style="width:100%" class="noborder">
-            <tr>
-                <td colspan="2">
-                    <p>لطفا پست الکترونیکی خود را بررسی کنید. در صورتی که نشانی پست الکترونیکی خود را درست وارد کرده باشید نامه‌ای از گنجور دریافت کرده‌اید که حاوی یک رمز است. </p>
-                    <p>رمز دریافتی را در کادر زیر وارد کرده، روی دکمهٔ «ادامه» کلیک کنید</p>
-                    <p style="color:red">تذکر: ممکن است نامه به پوشه اسپم منتقل شده باشد</p>
-                </td>
-            </tr>
+    <div class="up-card up-danger-zone">
+        <h2 class="up-card__title">تأیید نهایی</h2>
+        <p class="up-hint">لطفاً پست الکترونیکی خود را بررسی کنید. در صورتی که نشانی پست الکترونیکی خود را درست وارد کرده باشید نامه‌ای از گنجور دریافت کرده‌اید که حاوی یک رمز است. رمز دریافتی را در کادر زیر وارد کرده و روی دکمهٔ «حذف نهایی حساب کاربری» کلیک کنید.</p>
+        <p class="up-hint up-hint--danger">تذکر: ممکن است نامه به پوشهٔ اسپم منتقل شده باشد.</p>
 
-            <tr>
-                <td>
-                    <span class="inputlabel">رمز دریافتی:</span>
-                </td>
-                <td>
-                    <input asp-for="Secret" placeholder="رمز دریافتی" />
-                </td>
-            </tr>
-            <tr >
-                <td colspan="2"><input type="submit" name="submit" id="submit" style="width:100%;background-color:red;color:white;text-align:center;cursor:pointer;border-color:white;font-size:2.0em" value="حذف نهایی حساب کاربری" /></td>
-            </tr>
-        </table>
-        <div><p style="color:red">@Model.FatalError</p></div>
-    </form>
+        <form method="post" asp-page-handler="FinalizeDelete" class="up-form">
+            <div class="up-field up-field--ltr">
+                <label asp-for="Secret">رمز دریافتی</label>
+                <input asp-for="Secret" placeholder="رمز دریافتی" />
+            </div>
+
+            @if (!string.IsNullOrEmpty(Model.FatalError))
+            {
+                <div class="up-alert up-alert--danger">@Model.FatalError</div>
+            }
+
+            <div class="up-form-actions">
+                <button type="submit" name="submit" id="submit" class="up-btn up-btn--danger">حذف نهایی حساب کاربری</button>
+            </div>
+        </form>
+    </div>
 }
-
-
diff --git a/GanjooRazor/Areas/User/Pages/Index.cshtml b/GanjooRazor/Areas/User/Pages/Index.cshtml
index 6fb1fec4..7aad3f0d 100644
--- a/GanjooRazor/Areas/User/Pages/Index.cshtml
+++ b/GanjooRazor/Areas/User/Pages/Index.cshtml
@@ -1,4 +1,4 @@
-@page
+@page
 @model GanjooRazor.Areas.Panel.Pages.IndexModel
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
 @{
@@ -50,137 +50,81 @@ else
     </div>
 
     <div class="up-card">
-    <form method="post" asp-page-handler="SetMyPass">
-        <table style="width:100%" class="noborder">
-            <tr>
-                <td colspan="2">
-                    <h2>تغییر گذرواژه</h2>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span class="inputlabel">گذرواژهٔ کنونی: </span>
-                </td>
-                <td>
-                    <input type="password" style="width:100%" asp-for="ChangePasswordModel.OldPassword" /><br />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span class="inputlabel">گذرواژهٔ جدید: </span>
-                </td>
-                <td>
-                    <input type="password" style="width:100%" asp-for="ChangePasswordModel.NewPassword" /><br />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span class="inputlabel">تکرار گذرواژهٔ جدید: </span>
-                </td>
-                <td>
-                    <input type="password" style="width:100%" asp-for="ChangePasswordModel.NewPasswordRepeat" /><br />
-                </td>
-            </tr>
-            
-            <tr>
-                <td>
-                    @Model.PasswordChanged
-                </td>
-                <td>
-                    <button type="submit" name="approve" id="approve" class="up-btn up-btn--success up-btn--block">تغییر گذرواژه</button>
-                </td>
-            </tr>
-
-        </table>
-    </form>
+        <h2 class="up-card__title">تغییر گذرواژه</h2>
+        <form method="post" asp-page-handler="SetMyPass" class="up-form">
+            @if (!string.IsNullOrEmpty(Model.PasswordChanged))
+            {
+                <div class="up-alert up-alert--success">@Model.PasswordChanged</div>
+            }
+            <div class="up-field">
+                <label asp-for="ChangePasswordModel.OldPassword">گذرواژهٔ کنونی</label>
+                <input type="password" asp-for="ChangePasswordModel.OldPassword" />
+            </div>
+            <div class="up-field">
+                <label asp-for="ChangePasswordModel.NewPassword">گذرواژهٔ جدید</label>
+                <input type="password" asp-for="ChangePasswordModel.NewPassword" />
+            </div>
+            <div class="up-field">
+                <label asp-for="ChangePasswordModel.NewPasswordRepeat">تکرار گذرواژهٔ جدید</label>
+                <input type="password" asp-for="ChangePasswordModel.NewPasswordRepeat" />
+            </div>
+            <div class="up-form-actions">
+                <button type="submit" name="approve" id="approve" class="up-btn up-btn--success">تغییر گذرواژه</button>
+            </div>
+        </form>
     </div>
+
     <div class="up-card">
-    <form method="post" asp-page-handler="SetMyInfo">
-        <table style="width:100%" class="noborder">
-            <tr>
-                <td colspan="2">
-                    <h2>مشخصات من</h2>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span class="inputlabel">پست الکترونیکی: </span>
-                </td>
-                <td>
-                    <span class="inputlabel lft">@Model.UserInfo.Email</span>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span class="inputlabel">نام: </span>
-                </td>
-                <td>
-                    <input style="width:100%" asp-for="UserInfo.FirstName" /><br />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span class="inputlabel">نام خانوادگی: </span>
-                </td>
-                <td>
-                    <input style="width:100%" asp-for="UserInfo.SurName" /><br />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span class="inputlabel">نام مستعار (نمایش در حاشیه‌ها، لطفاً از درج عناوین شغلی در نام مستعار خودداری کنید): </span>
-                </td>
-                <td>
-                    <input style="width:100%" asp-for="UserInfo.NickName" /><br />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span class="inputlabel"><a target="_blank" href="@Html.Raw(Model.UserInfo.Website)">وبگاه:</a></span>
-                </td>
-                <td>
-                    <input style="width:100%;text-align:left;direction:ltr;" asp-for="UserInfo.Website" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span class="inputlabel">دربارهٔ من: </span>
-                </td>
-                <td>
-                    <textarea asp-for="UserInfo.Bio" class="editor"></textarea>
-                    <span class="inputlabel"><strong>تذکر مهم:</strong> استفاده از این متن برای مخابرهٔ پیام‌های نامناسب (توهین، فحاشی و ...) منجر به حذف حساب کاربر بدون اخطار قبلی خواهد شد.</span>
-                    <br />
-                    <span class="inputlabel">در صورتی که از این متن، وبگاه و از نام مستعار برای تبلیغ کسب و کار غیرادبی خود استفاده کنید به گونه‌ای که نمایهٔ شما به نمایه‌ای تبلیغاتی شباهت پیدا کند حساب کاربری شما بدون اخطار قبلی حذف خواهد شد.</span>
-                    <span class="inputlabel red-color"><strong>لطفاً از درج تلفن و اطلاعات خصوصی در نام و مشخصات یا متن دربارهٔ من خودداری کنید.</strong></span><span> انتشار اطلاعات شخصی به صورت عمومی ممکن است باعث سوء استفادهٔ کلاهبرداران بشود لذا از انتشار چنین اطلاعاتی خودداری فرمایید.</span>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input type="hidden" asp-for="UserInfo.Id" />
-                    <input type="hidden" asp-for="UserInfo.Email" />
-                    <input type="hidden" asp-for="UserInfo.Username" />
-                    <input type="hidden" asp-for="UserInfo.Password" />
-                    <input type="hidden" asp-for="UserInfo.PhoneNumber" />
-                    <input type="hidden" asp-for="UserInfo.Status" />
-                    <input type="hidden" asp-for="UserInfo.RImageId" />
-                </td>
-                <td>
-                    <button type="submit" name="approve" id="approveProfile" class="up-btn up-btn--success up-btn--block">ذخیره</button>
-                </td>
-            </tr>
-            <tr>
-                <td colspan="2">
-                    <a href="/hashieha/?userid=@Model.UserInfo.Id" target="_blank">نمایهٔ عمومی من</a>
-                </td>
-            </tr>
+        <h2 class="up-card__title">مشخصات من</h2>
+        <form method="post" asp-page-handler="SetMyInfo" class="up-form">
+            <div class="up-field up-field--ltr">
+                <label>پست الکترونیکی</label>
+                <div class="up-field-static">@Model.UserInfo.Email</div>
+            </div>
+            <div class="up-field">
+                <label asp-for="UserInfo.FirstName">نام</label>
+                <input asp-for="UserInfo.FirstName" />
+            </div>
+            <div class="up-field">
+                <label asp-for="UserInfo.SurName">نام خانوادگی</label>
+                <input asp-for="UserInfo.SurName" />
+            </div>
+            <div class="up-field">
+                <label asp-for="UserInfo.NickName">نام مستعار</label>
+                <input asp-for="UserInfo.NickName" />
+                <span class="up-hint">نمایش در حاشیه‌ها؛ لطفاً از درج عناوین شغلی در نام مستعار خودداری کنید.</span>
+            </div>
+            <div class="up-field up-field--ltr">
+                <label>
+                    وبگاه
+                    @if (!string.IsNullOrWhiteSpace(Model.UserInfo.Website))
+                    {
+                        <a target="_blank" href="@Html.Raw(Model.UserInfo.Website)">(مشاهده)</a>
+                    }
+                </label>
+                <input asp-for="UserInfo.Website" />
+            </div>
+            <div class="up-field">
+                <label asp-for="UserInfo.Bio">دربارهٔ من</label>
+                <textarea asp-for="UserInfo.Bio" class="editor"></textarea>
+                <span class="up-hint"><strong>تذکر مهم:</strong> استفاده از این متن برای مخابرهٔ پیام‌های نامناسب (توهین، فحاشی و ...) منجر به حذف حساب کاربر بدون اخطار قبلی خواهد شد.</span>
+                <span class="up-hint">در صورتی که از این متن، وبگاه و از نام مستعار برای تبلیغ کسب و کار غیرادبی خود استفاده کنید به گونه‌ای که نمایهٔ شما به نمایه‌ای تبلیغاتی شباهت پیدا کند حساب کاربری شما بدون اخطار قبلی حذف خواهد شد.</span>
+                <span class="up-hint up-hint--danger"><strong>لطفاً از درج تلفن و اطلاعات خصوصی در نام و مشخصات یا متن دربارهٔ من خودداری کنید.</strong> انتشار اطلاعات شخصی به صورت عمومی ممکن است باعث سوء استفادهٔ کلاهبرداران بشود لذا از انتشار چنین اطلاعاتی خودداری فرمایید.</span>
+            </div>
 
-            <tr>
-                <td colspan="2">
-                    <a role="button" class="up-btn up-btn--danger up-btn--block" href="/User/DeleteAccount">حذف حساب کاربری</a>
-                </td>
-            </tr>
+            <input type="hidden" asp-for="UserInfo.Id" />
+            <input type="hidden" asp-for="UserInfo.Email" />
+            <input type="hidden" asp-for="UserInfo.Username" />
+            <input type="hidden" asp-for="UserInfo.Password" />
+            <input type="hidden" asp-for="UserInfo.PhoneNumber" />
+            <input type="hidden" asp-for="UserInfo.Status" />
+            <input type="hidden" asp-for="UserInfo.RImageId" />
 
-        </table>
-    </form>
+            <div class="up-form-actions">
+                <button type="submit" name="approve" id="approveProfile" class="up-btn up-btn--success">ذخیره</button>
+                <a href="/hashieha/?userid=@Model.UserInfo.Id" target="_blank" class="up-btn up-btn--ghost">نمایهٔ عمومی من</a>
+                <a role="button" class="up-btn up-btn--danger" href="/User/DeleteAccount">حذف حساب کاربری</a>
+            </div>
+        </form>
     </div>
-}
\ No newline at end of file
+}
diff --git a/GanjooRazor/wwwroot/css/user-panel.css b/GanjooRazor/wwwroot/css/user-panel.css
index 87ea19f9..83d941d0 100644
--- a/GanjooRazor/wwwroot/css/user-panel.css
+++ b/GanjooRazor/wwwroot/css/user-panel.css
@@ -475,6 +475,98 @@ body.up-modal-open {
 .up-text-muted { color: var(--up-text-muted); }
 .up-text-center { text-align: center; }
 
+/* ---------- forms ---------- */
+
+.up-form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--up-space-3);
+}
+
+.up-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--up-space-1);
+}
+
+.up-field > label {
+    font-size: 0.85rem;
+    color: var(--up-text-muted);
+}
+
+.up-field input[type="text"],
+.up-field input[type="password"],
+.up-field input[type="email"],
+.up-field input:not([type]),
+.up-field textarea {
+    width: 100%;
+    padding: 9px 12px;
+    border: 1px solid var(--up-border);
+    border-radius: var(--up-radius-sm);
+    background: var(--up-surface);
+    color: var(--up-text);
+    font-family: var(--up-font);
+    font-size: 0.9rem;
+}
+
+.up-field textarea {
+    min-height: 120px;
+    resize: vertical;
+}
+
+.up-field input:focus,
+.up-field textarea:focus {
+    outline: none;
+    border-color: var(--up-primary);
+    box-shadow: 0 0 0 3px rgba(51, 0, 0, 0.12);
+}
+
+@media (prefers-color-scheme: dark) {
+    .up-field input:focus,
+    .up-field textarea:focus {
+        box-shadow: 0 0 0 3px rgba(165, 74, 74, 0.25);
+    }
+}
+
+.up-field--ltr input,
+.up-field--ltr .up-field-static {
+    direction: ltr;
+    text-align: left;
+}
+
+.up-field-static {
+    padding: 9px 0;
+    color: var(--up-text-muted);
+    font-size: 0.9rem;
+}
+
+.up-hint {
+    font-size: 0.78rem;
+    color: var(--up-text-muted);
+    line-height: 1.6;
+}
+
+.up-hint--danger {
+    color: var(--up-danger-dark);
+}
+
+.up-form-actions {
+    display: flex;
+    gap: var(--up-space-2);
+    flex-wrap: wrap;
+}
+
+/* ---------- danger zone (destructive account actions) ---------- */
+
+.up-danger-zone {
+    border-color: var(--up-danger-dark);
+}
+
+.up-danger-zone .up-card__title {
+    color: var(--up-danger-dark);
+    border-bottom-color: var(--up-danger-dark);
+}
+
 /* ---------- navbar dropdowns ---------- */
 /* Bootstrap 4's default (non-RTL) build anchors dropdown-menu to the left
    and left-aligns text, which reads wrong on this RTL page. */