diff --git a/GanjooRazor/Areas/Admin/Pages/Banners.cshtml b/GanjooRazor/Areas/Admin/Pages/Banners.cshtml
index 2b86e586..3a1ad0b3 100644
--- a/GanjooRazor/Areas/Admin/Pages/Banners.cshtml
+++ b/GanjooRazor/Areas/Admin/Pages/Banners.cshtml
@@ -7,50 +7,62 @@
     ViewData["WideShell"] = true;
 }
 
-<h1>@ViewData["Title"]</h1>
+<div class="up-page-header">
+    <h1>@ViewData["Title"]</h1>
+</div>
 
-
-<p>@Model.LastMessage</p>
-
-<form method="post" enctype="multipart/form-data">
-    <input type="file" asp-for="Upload.Image" />
-    <input asp-for="Upload.Alt" />
-    <input style="text-align:left;direction:ltr;" asp-for="Upload.Url" />
-    <input type="submit" value="بارگذاری" />
-</form>
-
-@if (Model.Banners != null)
+@if (!string.IsNullOrEmpty(Model.LastMessage))
 {
-<table>
-    
-    @foreach (var banner in Model.Banners)
-    {
-    <tr id="tr-@banner.Id">
-        <td>متن جایگزین: <input type="text" name="alt-@banner.Id" id="alt-@banner.Id" value="@banner.AlternateText" /> </td>
-        <td>نشانی مقصد:<input type="text" name="url-@banner.Id" id="url-@banner.Id" style="text-align:left;direction:ltr;" value=@banner.TargetUrl /> </td>
-        <td><img src="@($"{GanjooRazor.APIRoot.InternetUrl}/{banner.ImageUrl}")" alt="@banner.AlternateText" width="200" /></td>
-        @if (banner.Active)
-        {
-            <td>فعال <input type="checkbox" name="active-@banner.Id" id="active-@banner.Id" checked /> </td>
-        }
-        else
-        {
-            <td>فعال <input type="checkbox" name="active-@banner.Id" id="active-@banner.Id" /> </td>
-        }
-    <td>
-        <a role="button" onclick="editBanner(@banner.Id)" class="actionlink" title="ویرایش آگاهی">✎</a>
-        <a role="button" onclick="deleteBanner(@banner.Id)" class="actionlink" title="حذف آگاهی">🗑</a>
-    </td>
-    </tr>
-    }
-</table>
+    <div class="up-alert up-alert--danger">@Model.LastMessage</div>
+}
 
-<div style="visibility:hidden">
-    <form method="post" id="editbannerform">
-        <input type="text" name="id" id="id" />
-        <input type="text" name="alt" id="alt" />
-        <input type="text" name="url" id="url" />
-        <input type="checkbox" name="active" id="active" />
+<div class="up-card">
+    <h2 class="up-card__title">آگاهی جدید</h2>
+    <form method="post" enctype="multipart/form-data" class="up-form">
+        <div class="up-field">
+            <label for="Upload_Image">تصویر</label>
+            <input type="file" asp-for="Upload.Image" />
+        </div>
+        <div class="up-field">
+            <label for="Upload_Alt">متن جایگزین</label>
+            <input asp-for="Upload.Alt" />
+        </div>
+        <div class="up-field up-field--ltr">
+            <label for="Upload_Url">نشانی مقصد</label>
+            <input asp-for="Upload.Url" />
+        </div>
+        <div class="up-form-actions">
+            <input type="submit" value="بارگذاری" class="up-btn up-btn--success" />
+        </div>
     </form>
 </div>
+
+@if (Model.Banners != null && Model.Banners.Length > 0)
+{
+    <table>
+        @foreach (var banner in Model.Banners)
+        {
+            <tr id="tr-@banner.Id">
+                <td>متن جایگزین: <input type="text" name="alt-@banner.Id" id="alt-@banner.Id" value="@banner.AlternateText" /> </td>
+                <td>نشانی مقصد:<input type="text" name="url-@banner.Id" id="url-@banner.Id" style="text-align:left;direction:ltr;" value=@banner.TargetUrl /> </td>
+                <td><img src="@($"{GanjooRazor.APIRoot.InternetUrl}/{banner.ImageUrl}")" alt="@banner.AlternateText" width="200" /></td>
+                @if (banner.Active)
+                {
+                    <td>فعال <input type="checkbox" name="active-@banner.Id" id="active-@banner.Id" checked /> </td>
+                }
+                else
+                {
+                    <td>فعال <input type="checkbox" name="active-@banner.Id" id="active-@banner.Id" /> </td>
+                }
+                <td>
+                    <a role="button" onclick="editBanner(@banner.Id)" class="up-icon-btn" title="ویرایش" aria-label="ویرایش این آگاهی">✎</a>
+                    <a role="button" onclick="deleteBanner(@banner.Id)" class="up-icon-btn" title="حذف" aria-label="حذف این آگاهی">🗑</a>
+                </td>
+            </tr>
+        }
+    </table>
+}
+else
+{
+    <partial name="_EmptyState" model="@("هنوز آگاهی‌ای ثبت نشده است.")" />
 }
diff --git a/GanjooRazor/Areas/Admin/Pages/CatTrans.cshtml b/GanjooRazor/Areas/Admin/Pages/CatTrans.cshtml
index bb032e64..594bfc84 100644
--- a/GanjooRazor/Areas/Admin/Pages/CatTrans.cshtml
+++ b/GanjooRazor/Areas/Admin/Pages/CatTrans.cshtml
@@ -6,19 +6,20 @@
     ViewData["Title"] = "انتقال بخش";
 }
 
-<h1>@ViewData["Title"]</h1>
+<div class="up-page-header">
+    <h1>@ViewData["Title"]</h1>
+</div>
 
 @if (!string.IsNullOrEmpty(Model.LastMessage))
 {
-    @Html.Raw(Model.LastMessage)
+    <div class="up-alert up-alert--info">@Html.Raw(Model.LastMessage)</div>
 }
 else
 {
     <script>
-        function deleteThisOne(id) {
-            if (!confirm('آیا از حذف این مورد اطمینان دارید؟'))
-                return;
-
+        async function deleteThisOne(id) {
+            var ok = await upConfirm('آیا از حذف این مورد اطمینان دارید؟');
+            if (!ok) return;
 
             $.ajax({
                 type: "DELETE",
@@ -27,10 +28,7 @@ else
                     id: id
                 },
                 error: function(e) {
-                    if (e.responseText == null)
-                        alert(e);
-                    else
-                        alert(e.responseText);
+                    upToast(e.responseText || String(e), 'error');
                 },
                 success: function() {
                     var trBlockId = '#tr-' + id;
@@ -40,71 +38,74 @@ else
 
         }
     </script>
-    <table>
-        <tr>
-            <th>مبدأ</th>
-            <th>مصرع اول</th>
-            <th>مقصد</th>
-            <th>مصرع اول</th>
-            <th>#</th>
-        </tr>
 
-        @foreach (var poem in Model.Poems)
-        {
-            <tr id="tr-@poem.Id">
-                <td>
-                    <a href="@poem.SrcPoemFullUrl">@poem.SrcPoemFullTitle</a>
-                </td>
-                <td>
-                    @poem.FirstVerse
-                </td>
-                <td>
-                    @if (!string.IsNullOrEmpty(poem.DestPoemFullUrl))
-                    {
-                        <a href="@poem.DestPoemFullUrl">@poem.DestPoemFullTitle</a>
-                    }
-                </td>
-                <td>
-                    @if (!string.IsNullOrEmpty(poem.DestPoemFirstVerse))
-                    {
-                        @poem.DestPoemFirstVerse
-                    }
-                </td>
-                <td>
-                    <a role="button" onclick="deleteThisOne(@poem.Id)" class="actionlink" title="حذف"><i class="noindent-info-button delete-icon"></i></a>
+    @if (Model.Poems != null && Model.Poems.Length > 0)
+    {
+        <table>
+            <tr>
+                <th>مبدأ</th>
+                <th>مصرع اول</th>
+                <th>مقصد</th>
+                <th>مصرع اول</th>
+                <th>#</th>
+            </tr>
+
+            @foreach (var poem in Model.Poems)
+            {
+                <tr id="tr-@poem.Id">
+                    <td>
+                        <a href="@poem.SrcPoemFullUrl">@poem.SrcPoemFullTitle</a>
+                    </td>
+                    <td>
+                        @poem.FirstVerse
+                    </td>
+                    <td>
+                        @if (!string.IsNullOrEmpty(poem.DestPoemFullUrl))
+                        {
+                            <a href="@poem.DestPoemFullUrl">@poem.DestPoemFullTitle</a>
+                        }
+                    </td>
+                    <td>
+                        @if (!string.IsNullOrEmpty(poem.DestPoemFirstVerse))
+                        {
+                            @poem.DestPoemFirstVerse
+                        }
+                    </td>
+                    <td>
+                        <a role="button" onclick="deleteThisOne(@poem.Id)" class="up-icon-btn" title="حذف" aria-label="حذف این مورد"><i class="noindent-info-button delete-icon"></i></a>
+                    </td>
+                </tr>
+            }
+
+            <tr>
+                <td colspan="3">
+                    <a href="/Admin/CatTrans?id=@Model.CatId&empty=1">فقط بدون مقصد</a>
                 </td>
             </tr>
-        }
+        </table>
+    }
+    else
+    {
+        <partial name="_EmptyState" model="@("موردی برای انتقال یافت نشد.")" />
+    }
 
-        <tr>
-            <td colspan="3">
-                <a href="/Admin/CatTrans?id=@Model.CatId&empty=1">فقط بدون مقصد</a>
-            </td>
-        </tr>
-    </table>
+    <div class="up-card">
+        <div class="up-field">
+            <label for="DestCatId">مشابه‌یابی در بخش</label>
+            <form method="post" action="/Admin/CatTrans?Handler=FindDuplicates&id=@Model.CatId" class="up-form-actions">
+                <input asp-for="DestCatId" style="flex:1;" />
+                <input type="submit" value="شروع مشابه‌یابی" class="up-btn up-btn--ghost" />
+            </form>
+        </div>
+    </div>
 
-    <table>
-        <tr>
-            <td>مشابه‌یابی در بخش:</td>
-            <td>
-                <form method="post" action="/Admin/CatTrans?Handler=FindDuplicates&id=@Model.CatId">
-                    <input asp-for="DestCatId" />
-                    <input type="submit" value="شروع مشابه‌یابی" />
-                </form>
-            </td>
-        </tr>
-    </table>
-
-    <table>
-        <tr>
-            <td>نهایی سازی انتقال به بخش:</td>
-            <td>
-                <form method="post" action="/Admin/CatTrans?Handler=Finalize&id=@Model.CatId">
-                    <input asp-for="DestCatId" />
-                    <input type="submit" value="نهایی سازی" />
-                </form>
-            </td>
-        </tr>
-    </table>
+    <div class="up-card">
+        <div class="up-field">
+            <label for="DestCatId">نهایی‌سازی انتقال به بخش</label>
+            <form method="post" action="/Admin/CatTrans?Handler=Finalize&id=@Model.CatId" class="up-form-actions">
+                <input asp-for="DestCatId" style="flex:1;" />
+                <input type="submit" value="نهایی سازی" class="up-btn up-btn--success" />
+            </form>
+        </div>
+    </div>
 }
-
diff --git a/GanjooRazor/Areas/Admin/Pages/Donations.cshtml b/GanjooRazor/Areas/Admin/Pages/Donations.cshtml
index 62a19ef0..ea354de9 100644
--- a/GanjooRazor/Areas/Admin/Pages/Donations.cshtml
+++ b/GanjooRazor/Areas/Admin/Pages/Donations.cshtml
@@ -1,10 +1,9 @@
-@page
+@page
 @model GanjooRazor.Areas.Admin.Pages.DonationsModel
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
 @{
     Layout = "_AdminLayout";
     ViewData["Title"] = "کمک‌های مالی";
-    ViewData["WideShell"] = true;
 }
 <div class="up-page-header">
     <h1>@ViewData["Title"]</h1>
@@ -60,7 +59,7 @@
     <p class="up-hint">@Model.ShowAccountInfo</p>
 }
 
-@if (Model.Donations != null)
+@if (Model.Donations != null && Model.Donations.Length > 0)
 {
     <table>
         <tr>
@@ -84,3 +83,7 @@
         }
     </table>
 }
+else
+{
+    <partial name="_EmptyState" model="@("هنوز کمک مالی‌ای ثبت نشده است.")" />
+}
diff --git a/GanjooRazor/Areas/Admin/Pages/EditQuoted.cshtml b/GanjooRazor/Areas/Admin/Pages/EditQuoted.cshtml
index 2e34b416..9af2e8d6 100644
--- a/GanjooRazor/Areas/Admin/Pages/EditQuoted.cshtml
+++ b/GanjooRazor/Areas/Admin/Pages/EditQuoted.cshtml
@@ -7,17 +7,21 @@
     ViewData["Title"] = "پیشنهاد مشق شعر";
 }
 
-<h1>@ViewData["Title"]</h1>
+<div class="up-page-header">
+    <h1>@ViewData["Title"]</h1>
+</div>
 
-<p>@Html.Raw(Model.LastMessage)</p>
+@if (!string.IsNullOrEmpty(Model.LastMessage))
+{
+    <div class="up-alert up-alert--info">@Html.Raw(Model.LastMessage)</div>
+}
 
 @if (Model.DisplayAll)
 {
     <script>
-        function deleteUnpublished(id) {
-            if (!confirm('آیا از حذف این مورد منتشر نشده اطمینان دارید؟'))
-                return;
-
+        async function deleteUnpublished(id) {
+            var ok = await upConfirm('آیا از حذف این مورد منتشر نشده اطمینان دارید؟');
+            if (!ok) return;
 
             $.ajax({
                 type: "DELETE",
@@ -26,10 +30,7 @@
                     id: id
                 },
                 error: function (e) {
-                    if (e.responseText == null)
-                        alert(e);
-                    else
-                        alert(e.responseText);
+                    upToast(e.responseText || String(e), 'error');
                 },
                 success: function () {
 
@@ -40,75 +41,84 @@
         }
 
     </script>
-    <h1>همهٔ مشق‌های منتشر نشده</h1>
-    <table>
-        <tr>
-            <td>#</td>
-            <td>شاعر</td>
-            <td>۱</td>
-            <td>۲</td>
-            <td>۱</td>
-            <td>۲</td>
-            <td>حذف</td>
-        </tr>
-        @foreach (var q in Model.AllPoemQuoteds)
-        {
-            <tr id="tr-@q.Id">
-                <td><a href="/Admin/EditQuoted/?p=@q.PoemId&id=@q.Id">@q.PoemId-@q.RelatedPoemId</a> </td>
-                <td>@q.CachedRelatedPoemPoetName</td>
-                <td>
-                    @if (q.CoupletVerse1ShouldBeEmphasized)
-                    {
-                        <span class="red-color">@q.CoupletVerse1</span>
-                    }
-                    else
-                    {
-                        @q.CoupletVerse1
-                    }
-                </td>
-                <td>
-                    @if (q.CoupletVerse2ShouldBeEmphasized)
-                    {
-                        <span class="red-color">@q.CoupletVerse2</span>
-                    }
-                    else
-                    {
-                        @q.CoupletVerse2
-                    }
-                </td>
-                <td>
-                    @if (q.RelatedCoupletVerse1ShouldBeEmphasized)
-                    {
-                        <span class="red-color">@q.RelatedCoupletVerse1</span>
-                    }
-                    else
-                    {
-                        @q.RelatedCoupletVerse1
-                    }
-                </td>
-                <td>
-                    @if (q.RelatedCoupletVerse2ShouldBeEmphasized)
-                    {
-                        <span class="red-color">@q.RelatedCoupletVerse2</span>
-                    }
-                    else
-                    {
-                        @q.RelatedCoupletVerse2
-                    }
-                </td>
-                <td><a role="button" onclick="deleteUnpublished('@q.Id')" class="actionlink" title="حذف">حذف <i class="noindent-info-button delete-icon"></i></a></td>
-            </tr>
+    <div class="up-page-header">
+        <h2>همهٔ مشق‌های منتشر نشده</h2>
+    </div>
+    @if (Model.AllPoemQuoteds != null && Model.AllPoemQuoteds.Length > 0)
+    {
+        <table>
             <tr>
-                <td colspan="7">
-                    <hr />
-                </td>
+                <td>#</td>
+                <td>شاعر</td>
+                <td>۱</td>
+                <td>۲</td>
+                <td>۱</td>
+                <td>۲</td>
+                <td>حذف</td>
             </tr>
-        }
-    </table>
+            @foreach (var q in Model.AllPoemQuoteds)
+            {
+                <tr id="tr-@q.Id">
+                    <td><a href="/Admin/EditQuoted/?p=@q.PoemId&id=@q.Id">@q.PoemId-@q.RelatedPoemId</a> </td>
+                    <td>@q.CachedRelatedPoemPoetName</td>
+                    <td>
+                        @if (q.CoupletVerse1ShouldBeEmphasized)
+                        {
+                            <span class="red-color">@q.CoupletVerse1</span>
+                        }
+                        else
+                        {
+                            @q.CoupletVerse1
+                        }
+                    </td>
+                    <td>
+                        @if (q.CoupletVerse2ShouldBeEmphasized)
+                        {
+                            <span class="red-color">@q.CoupletVerse2</span>
+                        }
+                        else
+                        {
+                            @q.CoupletVerse2
+                        }
+                    </td>
+                    <td>
+                        @if (q.RelatedCoupletVerse1ShouldBeEmphasized)
+                        {
+                            <span class="red-color">@q.RelatedCoupletVerse1</span>
+                        }
+                        else
+                        {
+                            @q.RelatedCoupletVerse1
+                        }
+                    </td>
+                    <td>
+                        @if (q.RelatedCoupletVerse2ShouldBeEmphasized)
+                        {
+                            <span class="red-color">@q.RelatedCoupletVerse2</span>
+                        }
+                        else
+                        {
+                            @q.RelatedCoupletVerse2
+                        }
+                    </td>
+                    <td><a role="button" onclick="deleteUnpublished('@q.Id')" class="up-icon-btn" title="حذف" aria-label="حذف این مورد">🗑</a></td>
+                </tr>
+                <tr>
+                    <td colspan="7">
+                        <hr />
+                    </td>
+                </tr>
+            }
+        </table>
+    }
+    else
+    {
+        <partial name="_EmptyState" model="@("موردی منتشرنشده یافت نشد.")" />
+    }
     return;
 }
 <p>
-    <a href="?all=true">همهٔ مشق‌های منتشر نشده</a>
+    <a href="?all=true" class="up-btn up-btn--ghost">📚 همهٔ مشق‌های منتشر نشده</a>
 </p>
 
 
@@ -135,7 +145,7 @@
             fetch('@(GanjooRazor.APIRoot.InternetUrl)/api/ganjoor/page?url=' + url)
                 .then((response) => response.json())
                 .then((json) => {
-                    alert(json.poem.id);
+                    upToast(String(json.poem.id));
                     document.getElementById('GanjoorQuotedPoem_RelatedPoemId').value = json.poem.id;
                     document.getElementById('GanjoorQuotedPoem_RelatedPoetId').value = json.poem.category.poet.id;
                     document.getElementById('GanjoorQuotedPoem_CachedRelatedPoemPoetName').value = json.poem.category.poet.nickname;
@@ -176,10 +186,9 @@
 
         }
 
-        function deleteThisOne(id) {
-            if (!confirm('آیا از حذف این مورد اطمینان دارید؟'))
-                return;
-
+        async function deleteThisOne(id) {
+            var ok = await upConfirm('آیا از حذف این مورد اطمینان دارید؟');
+            if (!ok) return;
 
             $.ajax({
                 type: "DELETE",
@@ -188,23 +197,19 @@
                     id: id
                 },
                 error: function (e) {
-                    if (e.responseText == null)
-                        alert(e);
-                    else
-                        alert(e.responseText);
+                    upToast(e.responseText || String(e), 'error');
                 },
                 success: function () {
-                    alert('انجام شد.');
+                    upToast('انجام شد.');
                     location.reload(true);
                 },
             });
         }
 
-       
-        function reverseQuote(id) {
-            if (!confirm('آیا از درج معکوس این مورد اطمینان دارید؟'))
-                return;
 
+        async function reverseQuote(id) {
+            var ok = await upConfirm('آیا از درج معکوس این مورد اطمینان دارید؟');
+            if (!ok) return;
 
             $.ajax({
                 type: "POST",
@@ -213,355 +218,209 @@
                     id: id
                 },
                 error: function (e) {
-                    if (e.responseText == null)
-                        alert(e);
-                    else
-                        alert(e.responseText);
+                    upToast(e.responseText || String(e), 'error');
                 },
                 success: function (e) {
-                    alert('انجام شد.');
+                    upToast('انجام شد.');
                     location.href = e;
                 },
             });
         }
 
     </script>
-    <form method="post">
-        <table>
-            <tr>
-                <td>
-                    بیت مرجع از <a href="/?p=@Model.GanjoorQuotedPoem.PoemId">شعر</a>:
-                    <input type="hidden" asp-for="GanjoorQuotedPoem.Id" />
-                    <input type="hidden" asp-for="GanjoorQuotedPoem.PoemId" />
-                    <input type="hidden" asp-for="GanjoorQuotedPoem.PoetId" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <select asp-for="GanjoorQuotedPoem.CoupletIndex" style="width:100%">
-                        @foreach (var item in Model.Couplets)
-                        {
-                            <option value="@item.Item1">@($"{(item.Item1 + 1).ToPersianNumbers()} - {item.Item2}")</option>
-                        }
-                    </select>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    مصرع اول مهم است:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.CoupletVerse1ShouldBeEmphasized" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    مصرع دوم مهم است:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.CoupletVerse2ShouldBeEmphasized" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    شاعر مرجع:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.PoetId" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <a onclick="finalizeSelectPage()" class="pagebutton" role="button" id="finalize-select" style="display:none">انتخاب کردم</a>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <iframe id="select-poem" src="/" height="600" style="display:none;width:100%;margin:auto"></iframe>
-                </td>
-            </tr>
+    <div class="up-card">
+        <form method="post" class="up-form">
+            <p>
+                بیت مرجع از <a href="/?p=@Model.GanjoorQuotedPoem.PoemId">شعر</a>:
+                <input type="hidden" asp-for="GanjoorQuotedPoem.Id" />
+                <input type="hidden" asp-for="GanjoorQuotedPoem.PoemId" />
+                <input type="hidden" asp-for="GanjoorQuotedPoem.PoetId" />
+            </p>
 
-            <tr>
-                <td>
-                    <a onclick="selectGanjoorPage()" class="pagebutton" role="button" id="display-frame">گزینش شعر مرتبط</a>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.RelatedPoemId" />
-                </td>
-            </tr>
+            <div class="up-field">
+                <label for="GanjoorQuotedPoem_CoupletIndex">بیت</label>
+                <select asp-for="GanjoorQuotedPoem.CoupletIndex">
+                    @foreach (var item in Model.Couplets)
+                    {
+                        <option value="@item.Item1">@($"{(item.Item1 + 1).ToPersianNumbers()} - {item.Item2}")</option>
+                    }
+                </select>
+            </div>
+
+            <div class="up-check-row">
+                <input asp-for="GanjoorQuotedPoem.CoupletVerse1ShouldBeEmphasized" />
+                <label for="GanjoorQuotedPoem_CoupletVerse1ShouldBeEmphasized">مصرع اول مهم است</label>
+            </div>
+            <div class="up-check-row">
+                <input asp-for="GanjoorQuotedPoem.CoupletVerse2ShouldBeEmphasized" />
+                <label for="GanjoorQuotedPoem_CoupletVerse2ShouldBeEmphasized">مصرع دوم مهم است</label>
+            </div>
+
+            <div class="up-field">
+                <label for="GanjoorQuotedPoem_PoetId">شاعر مرجع</label>
+                <input asp-for="GanjoorQuotedPoem.PoetId" />
+            </div>
+
+            <div class="up-btn-group">
+                <a onclick="finalizeSelectPage()" class="up-btn up-btn--ghost" role="button" id="finalize-select" style="display:none">انتخاب کردم</a>
+                <a onclick="selectGanjoorPage()" class="up-btn up-btn--ghost" role="button" id="display-frame">🔎 گزینش شعر مرتبط</a>
+            </div>
+            <iframe id="select-poem" src="/" height="600" style="display:none;width:100%;margin:auto"></iframe>
+
+            <div class="up-field">
+                <label for="GanjoorQuotedPoem_RelatedPoemId">شناسهٔ شعر مرتبط</label>
+                <input asp-for="GanjoorQuotedPoem.RelatedPoemId" />
+            </div>
             @if (Model.GanjoorQuotedPoem.RelatedPoemId != null)
             {
-                <tr>
-                    <td>
-                        <a href="/?p=@Model.GanjoorQuotedPoem.RelatedPoemId">مشاهدهٔ شعر مرتبط</a>
-                    </td>
-                </tr>
+                <p><a href="/?p=@Model.GanjoorQuotedPoem.RelatedPoemId">🔗 مشاهدهٔ شعر مرتبط</a></p>
             }
 
-            <tr>
-                <td>
-                    بیت مرتبط:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <select asp-for="GanjoorQuotedPoem.RelatedCoupletIndex" style="width:100%;">
-                        @foreach (var item in Model.RelatedCouplets)
-                        {
-                            <option value="@item.Item1">@($"{(item.Item1 + 1).ToPersianNumbers()} - {item.Item2}")</option>
-                        }
-                    </select>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    مصرع اول مرتبط (خارج از گنجور):
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.RelatedCoupletVerse1" size="65" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    مصرع اول مهم است:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.RelatedCoupletVerse1ShouldBeEmphasized" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    مصرع دوم مرتبط (خارج از گنجور):
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.RelatedCoupletVerse2" size="65" />
-                </td>
-            </tr>
-
-            <tr>
-                <td>
-                    مصرع دوم مهم است:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.RelatedCoupletVerse2ShouldBeEmphasized" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    ترتیب:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.SortOrder" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    این شعر قدیمی‌تر از شعر مرتبط است:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.IsPriorToRelated" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    نمایش در فهرست اصلی:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.ChosenForMainList" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    مستقیماً ارتباط ندارد:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.IndirectQuotation" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    منتسب به هر دو شاعر:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.ClaimedByBothPoets" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    شاعر:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.RelatedPoetId" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.CachedRelatedPoemPoetName" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    سالمرگ شاعر:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.CachedRelatedPoemPoetDeathYearInLHijri" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    نشانی صفحهٔ شاعر:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.CachedRelatedPoemPoetUrl" style="direction:ltr" size="65" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    تصویر شاعر:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.CachedRelatedPoemPoetImage" style="direction:ltr" size="65" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    عنوان شعر:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.CachedRelatedPoemFullTitle" size="65" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    نشانی شعر:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.CachedRelatedPoemFullUrl" style="direction:ltr" size="65" />
-                </td>
-            </tr>
-
-            <tr>
-                <td>
-                    یادداشت:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <textarea asp-for="GanjoorQuotedPoem.Note" rows="4" cols="80" class="editor"></textarea>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    منتشر شده:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.Published" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    تعداد همسان‌ها:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.SamePoemsQuotedCount" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input type="submit" value="ذخیره" />
-                </td>
-            </tr>
-
-            <tr><td><hr /></td></tr>
-            <tr>
-                <td>
-                    @if (Model.ReverseId != null)
+            <div class="up-field">
+                <label for="GanjoorQuotedPoem_RelatedCoupletIndex">بیت مرتبط</label>
+                <select asp-for="GanjoorQuotedPoem.RelatedCoupletIndex">
+                    @foreach (var item in Model.RelatedCouplets)
                     {
-                        <a href="/Admin/EditQuoted/?p=@Model.GanjoorQuotedPoem.RelatedPoemId&id=@Model.ReverseId">نمایش معکوس</a>
-                    }
-                    else
-                    {
-                        <a role="button" onclick="reverseQuote('@Model.GanjoorQuotedPoem.Id')" class="actionlink" title="درج معکوس">درج معکوس</a>
+                        <option value="@item.Item1">@($"{(item.Item1 + 1).ToPersianNumbers()} - {item.Item2}")</option>
                     }
+                </select>
+            </div>
 
-                </td>
-            </tr>
+            <div class="up-field">
+                <label for="GanjoorQuotedPoem_RelatedCoupletVerse1">مصرع اول مرتبط (خارج از گنجور)</label>
+                <input asp-for="GanjoorQuotedPoem.RelatedCoupletVerse1" size="65" />
+            </div>
+            <div class="up-check-row">
+                <input asp-for="GanjoorQuotedPoem.RelatedCoupletVerse1ShouldBeEmphasized" />
+                <label for="GanjoorQuotedPoem_RelatedCoupletVerse1ShouldBeEmphasized">مصرع اول مهم است</label>
+            </div>
 
-            <tr><td><hr /></td></tr>
+            <div class="up-field">
+                <label for="GanjoorQuotedPoem_RelatedCoupletVerse2">مصرع دوم مرتبط (خارج از گنجور)</label>
+                <input asp-for="GanjoorQuotedPoem.RelatedCoupletVerse2" size="65" />
+            </div>
+            <div class="up-check-row">
+                <input asp-for="GanjoorQuotedPoem.RelatedCoupletVerse2ShouldBeEmphasized" />
+                <label for="GanjoorQuotedPoem_RelatedCoupletVerse2ShouldBeEmphasized">مصرع دوم مهم است</label>
+            </div>
+
+            <div class="up-field">
+                <label for="GanjoorQuotedPoem_SortOrder">ترتیب</label>
+                <input asp-for="GanjoorQuotedPoem.SortOrder" />
+            </div>
+
+            <div class="up-check-row">
+                <input asp-for="GanjoorQuotedPoem.IsPriorToRelated" />
+                <label for="GanjoorQuotedPoem_IsPriorToRelated">این شعر قدیمی‌تر از شعر مرتبط است</label>
+            </div>
+            <div class="up-check-row">
+                <input asp-for="GanjoorQuotedPoem.ChosenForMainList" />
+                <label for="GanjoorQuotedPoem_ChosenForMainList">نمایش در فهرست اصلی</label>
+            </div>
+            <div class="up-check-row">
+                <input asp-for="GanjoorQuotedPoem.IndirectQuotation" />
+                <label for="GanjoorQuotedPoem_IndirectQuotation">مستقیماً ارتباط ندارد</label>
+            </div>
+            <div class="up-check-row">
+                <input asp-for="GanjoorQuotedPoem.ClaimedByBothPoets" />
+                <label for="GanjoorQuotedPoem_ClaimedByBothPoets">منتسب به هر دو شاعر</label>
+            </div>
+
+            <div class="up-field">
+                <label for="GanjoorQuotedPoem_RelatedPoetId">شاعر</label>
+                <input asp-for="GanjoorQuotedPoem.RelatedPoetId" />
+            </div>
+            <div class="up-field">
+                <label for="GanjoorQuotedPoem_CachedRelatedPoemPoetName">نام شاعر</label>
+                <input asp-for="GanjoorQuotedPoem.CachedRelatedPoemPoetName" />
+            </div>
+            <div class="up-field">
+                <label for="GanjoorQuotedPoem_CachedRelatedPoemPoetDeathYearInLHijri">سالمرگ شاعر</label>
+                <input asp-for="GanjoorQuotedPoem.CachedRelatedPoemPoetDeathYearInLHijri" />
+            </div>
+            <div class="up-field up-field--ltr">
+                <label for="GanjoorQuotedPoem_CachedRelatedPoemPoetUrl">نشانی صفحهٔ شاعر</label>
+                <input asp-for="GanjoorQuotedPoem.CachedRelatedPoemPoetUrl" size="65" />
+            </div>
+            <div class="up-field up-field--ltr">
+                <label for="GanjoorQuotedPoem_CachedRelatedPoemPoetImage">تصویر شاعر</label>
+                <input asp-for="GanjoorQuotedPoem.CachedRelatedPoemPoetImage" size="65" />
+            </div>
+            <div class="up-field">
+                <label for="GanjoorQuotedPoem_CachedRelatedPoemFullTitle">عنوان شعر</label>
+                <input asp-for="GanjoorQuotedPoem.CachedRelatedPoemFullTitle" size="65" />
+            </div>
+            <div class="up-field up-field--ltr">
+                <label for="GanjoorQuotedPoem_CachedRelatedPoemFullUrl">نشانی شعر</label>
+                <input asp-for="GanjoorQuotedPoem.CachedRelatedPoemFullUrl" size="65" />
+            </div>
+
+            <div class="up-field">
+                <label for="GanjoorQuotedPoem_Note"><span class="up-field-icon" aria-hidden="true">🗒️</span> یادداشت</label>
+                <textarea asp-for="GanjoorQuotedPoem.Note" rows="4" cols="80" class="editor"></textarea>
+            </div>
+
+            <div class="up-check-row">
+                <input asp-for="GanjoorQuotedPoem.Published" />
+                <label for="GanjoorQuotedPoem_Published">منتشر شده</label>
+            </div>
+
+            <div class="up-field">
+                <label for="GanjoorQuotedPoem_SamePoemsQuotedCount">تعداد همسان‌ها</label>
+                <input asp-for="GanjoorQuotedPoem.SamePoemsQuotedCount" />
+            </div>
+
+            <div class="up-form-actions">
+                <input type="submit" value="ذخیره" class="up-btn up-btn--success" />
+            </div>
+
+            <hr />
+
+            <div class="up-btn-group">
+                @if (Model.ReverseId != null)
+                {
+                    <a href="/Admin/EditQuoted/?p=@Model.GanjoorQuotedPoem.RelatedPoemId&id=@Model.ReverseId" class="up-btn up-btn--ghost">🔁 نمایش معکوس</a>
+                }
+                else
+                {
+                    <a role="button" onclick="reverseQuote('@Model.GanjoorQuotedPoem.Id')" class="up-btn up-btn--ghost" title="درج معکوس">🔁 درج معکوس</a>
+                }
+                <a role="button" onclick="deleteThisOne('@Model.GanjoorQuotedPoem.Id')" class="up-btn up-btn--danger" title="حذف">🗑 حذف</a>
+            </div>
+        </form>
+    </div>
+
+    <div class="up-page-header">
+        <h2>همهٔ مشق‌های شعر</h2>
+    </div>
+    @if (Model.AllPoemQuoteds != null && Model.AllPoemQuoteds.Length > 0)
+    {
+        <table>
             <tr>
-                <td>
-                    <a role="button" onclick="deleteThisOne('@Model.GanjoorQuotedPoem.Id')" class="actionlink" title="حذف">حذف <i class="noindent-info-button delete-icon"></i></a>
-                </td>
+                <td>#</td>
+                <td>شاعر</td>
+                <td>۱</td>
+                <td>۲</td>
+                <td>۱</td>
+                <td>۲</td>
+                <td>منتشر شده</td>
             </tr>
+            @foreach (var q in Model.AllPoemQuoteds)
+            {
+                <tr>
+                    <td><a href="/Admin/EditQuoted/?p=@q.PoemId&id=@q.Id">#</a> </td>
+                    <td>@q.CachedRelatedPoemPoetName</td>
+                    <td>@q.CoupletVerse1</td>
+                    <td>@q.CoupletVerse2</td>
+                    <td>@q.RelatedCoupletVerse1</td>
+                    <td>@q.RelatedCoupletVerse2</td>
+                    <td>@q.Published</td>
+                </tr>
+            }
         </table>
-    </form>
-
-    <h1>همهٔ مشق‌های شعر</h1>
-    <table>
-        <tr>
-            <td>#</td>
-            <td>شاعر</td>
-            <td>۱</td>
-            <td>۲</td>
-            <td>۱</td>
-            <td>۲</td>
-            <td>منتشر شده</td>
-        </tr>
-        @foreach (var q in Model.AllPoemQuoteds)
-        {
-            <tr>
-                <td><a href="/Admin/EditQuoted/?p=@q.PoemId&id=@q.Id">#</a> </td>
-                <td>@q.CachedRelatedPoemPoetName</td>
-                <td>@q.CoupletVerse1</td>
-                <td>@q.CoupletVerse2</td>
-                <td>@q.RelatedCoupletVerse1</td>
-                <td>@q.RelatedCoupletVerse2</td>
-                <td>@q.Published</td>
-            </tr>
-        }
-    </table>
-
-
-}
\ No newline at end of file
+    }
+    else
+    {
+        <partial name="_EmptyState" model="@("مشقی برای این شعر ثبت نشده است.")" />
+    }
+}
diff --git a/GanjooRazor/Areas/Admin/Pages/Expenses.cshtml b/GanjooRazor/Areas/Admin/Pages/Expenses.cshtml
index a1e6e808..1e20177c 100644
--- a/GanjooRazor/Areas/Admin/Pages/Expenses.cshtml
+++ b/GanjooRazor/Areas/Admin/Pages/Expenses.cshtml
@@ -1,10 +1,9 @@
-@page
+@page
 @model GanjooRazor.Areas.Admin.Pages.ExpensesModel
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
 @{
     Layout = "_AdminLayout";
     ViewData["Title"] = "هزینه‌ها";
-    ViewData["WideShell"] = true;
 }
 <div class="up-page-header">
     <h1>@ViewData["Title"]</h1>
@@ -49,7 +48,7 @@
     <p class="up-hint">@Model.ShowAccountInfo</p>
 }
 
-@if (Model.Expenses != null)
+@if (Model.Expenses != null && Model.Expenses.Length > 0)
 {
     <table>
         <tr>
@@ -72,3 +71,7 @@
         }
     </table>
 }
+else
+{
+    <partial name="_EmptyState" model="@("هنوز هزینه‌ای ثبت نشده است.")" />
+}
diff --git a/GanjooRazor/Areas/Admin/Pages/Locations.cshtml b/GanjooRazor/Areas/Admin/Pages/Locations.cshtml
index cbcdbdb0..2a5150ca 100644
--- a/GanjooRazor/Areas/Admin/Pages/Locations.cshtml
+++ b/GanjooRazor/Areas/Admin/Pages/Locations.cshtml
@@ -6,9 +6,14 @@
     ViewData["Title"] = "خاستگاه‌ها";
 }
 
-<h1>@ViewData["Title"]</h1>
+<div class="up-page-header">
+    <h1>@ViewData["Title"]</h1>
+</div>
 
-<p>@Model.LastMessage</p>
+@if (!string.IsNullOrEmpty(Model.LastMessage))
+{
+    <div class="up-alert up-alert--info">@Model.LastMessage</div>
+}
 
 <script>
     function displayLocationOnMap() {
@@ -17,53 +22,32 @@
         link.target = "_blank"
         link.click()
     }
-    
+
 </script>
 
-<form method="post">
-    <table>
-        <tr>
-            <td>
-                نام:
-            </td>
-            <td>
-                <input asp-for="Location.Name" />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                عرض جغرافیایی (N):
-            </td>
-            <td>
-                <input asp-for="Location.Latitude" />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                طول جغرافیایی (E):
-            </td>
-            <td>
-                <input asp-for="Location.Longitude" />
-            </td>
-        </tr>
-        <tr>
-            <td colspan="2">
-                <a onclick="displayLocationOnMap()" class="pagebutton" role="button">مشاهده روی نقشه</a>
-            </td>
-        </tr>
-        <tr>
-            <td colspan="2">
-                <input type="submit" value="خاستگاه جدید" />
-            </td>
-        </tr>
-    </table>
+<div class="up-card">
+    <h2 class="up-card__title">خاستگاه جدید</h2>
+    <form method="post" class="up-form">
+        <div class="up-field">
+            <label for="Location_Name">نام</label>
+            <input asp-for="Location.Name" />
+        </div>
+        <div class="up-field">
+            <label for="Location_Latitude">عرض جغرافیایی (N)</label>
+            <input asp-for="Location.Latitude" />
+        </div>
+        <div class="up-field">
+            <label for="Location_Longitude">طول جغرافیایی (E)</label>
+            <input asp-for="Location.Longitude" />
+        </div>
+        <div class="up-form-actions">
+            <a onclick="displayLocationOnMap()" class="up-btn up-btn--ghost" role="button">🗺️ مشاهده روی نقشه</a>
+            <input type="submit" value="خاستگاه جدید" class="up-btn up-btn--success" />
+        </div>
+    </form>
+</div>
 
-
-
-
-</form>
-
-@if (Model.Locations != null)
+@if (Model.Locations != null && Model.Locations.Length > 0)
 {
     <script>
         function editLocation(itemId) {
@@ -82,23 +66,19 @@
                     longitude: $(lonInput).val(),
                 },
                 error: function(e) {
-                    if (e.responseText == null)
-                        alert(e);
-                    else
-                        alert(e.responseText);
+                    upToast(e.responseText || String(e), 'error');
                 },
                 success: function() {
-                    alert('ردیف به درستی ویرایش شد.')
+                    upToast('ردیف به درستی ویرایش شد.');
                 },
 
             });
         }
 
-        function deleteLocation(itemId) {
-
-            if (!confirm('آیا از حذف این ردیف اطمینان دارید؟'))
-                return;
+        async function deleteLocation(itemId) {
 
+            var ok = await upConfirm('آیا از حذف این ردیف اطمینان دارید؟');
+            if (!ok) return;
 
             $.ajax({
                 type: "DELETE",
@@ -107,10 +87,7 @@
                     id: itemId
                 },
                 error: function(e) {
-                    if (e.responseText == null)
-                        alert(e);
-                    else
-                        alert(e.responseText);
+                    upToast(e.responseText || String(e), 'error');
                 },
                 success: function() {
                     var itemIdBlockId = '#tr-' + itemId;
@@ -135,14 +112,15 @@
                 <td><input type="text" name="lat-@location.Id" id="lat-@location.Id" value="@location.Latitude" /></td>
                 <td><input type="text" name="lon-@location.Id" id="lon-@location.Id" value="@location.Longitude" /></td>
                 <td>
-                    <a role="button" onclick="editLocation(@location.Id)" class="actionlink" title="ویرایش">✎</a>
-                    <a role="button" onclick="deleteLocation(@location.Id)" class="actionlink" title="حذف">🗑</a>
-                    <a role="button" onclick="viewLocation('@location.Latitude', '@location.Longitude')" class="actionlink" title="مشاهده">مشاهده</a>
+                    <a role="button" onclick="editLocation(@location.Id)" class="up-icon-btn" title="ویرایش" aria-label="ویرایش این خاستگاه">✎</a>
+                    <a role="button" onclick="deleteLocation(@location.Id)" class="up-icon-btn" title="حذف" aria-label="حذف این خاستگاه">🗑</a>
+                    <a role="button" onclick="viewLocation('@location.Latitude', '@location.Longitude')" class="up-icon-btn" title="مشاهده" aria-label="مشاهدهٔ این خاستگاه روی نقشه">🗺️</a>
                 </td>
             </tr>
         }
     </table>
-
 }
-
-
+else
+{
+    <partial name="_EmptyState" model="@("هنوز خاستگاهی ثبت نشده است.")" />
+}
diff --git a/GanjooRazor/Areas/Admin/Pages/LongRunningJobs.cshtml b/GanjooRazor/Areas/Admin/Pages/LongRunningJobs.cshtml
index 4c7c52c5..88f4e441 100644
--- a/GanjooRazor/Areas/Admin/Pages/LongRunningJobs.cshtml
+++ b/GanjooRazor/Areas/Admin/Pages/LongRunningJobs.cshtml
@@ -1,10 +1,9 @@
-@page
+@page
 @model GanjooRazor.Areas.Admin.Pages.LongRunningJobsModel
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
 @{
     Layout = "_AdminLayout";
     ViewData["Title"] = "کارهای جاری";
-    ViewData["WideShell"] = true;
 }
 <div class="up-page-header">
     <h1>@ViewData["Title"]</h1>
@@ -50,7 +49,7 @@
     }
 </script>
 
-@if (Model.Jobs != null)
+@if (Model.Jobs != null && Model.Jobs.Length > 0)
 {
     <div class="up-form-actions" style="margin-bottom:var(--up-space-3);">
         <a role="button" onclick="cleanUpJobs()" class="up-btn up-btn--ghost" title="حذف کارهای قدیمی">حذف کارهای قدیمی <i class="noindent-info-button delete-icon"></i></a>
@@ -82,10 +81,11 @@
         }
     </table>
 
-    @if (Model.Jobs.Length > 0)
-    {
-        <div class="up-form-actions" style="margin-top:var(--up-space-3);">
-            <a role="button" onclick="cleanUpJobs()" class="up-btn up-btn--ghost" title="حذف کارهای قدیمی">حذف کارهای قدیمی <i class="noindent-info-button delete-icon"></i></a>
-        </div>
-    }
+    <div class="up-form-actions" style="margin-top:var(--up-space-3);">
+        <a role="button" onclick="cleanUpJobs()" class="up-btn up-btn--ghost" title="حذف کارهای قدیمی">حذف کارهای قدیمی <i class="noindent-info-button delete-icon"></i></a>
+    </div>
+}
+else if (Model.Jobs != null)
+{
+    <partial name="_EmptyState" model="@("در حال حاضر کار جاری یا اخیری وجود ندارد.")" />
 }
diff --git a/GanjooRazor/Areas/Admin/Pages/PageHistory.cshtml b/GanjooRazor/Areas/Admin/Pages/PageHistory.cshtml
index 576e6efa..b49ba401 100644
--- a/GanjooRazor/Areas/Admin/Pages/PageHistory.cshtml
+++ b/GanjooRazor/Areas/Admin/Pages/PageHistory.cshtml
@@ -7,11 +7,16 @@
     ViewData["Title"] = "سابقهٔ ویرایش";
 }
 
-<h1>@ViewData["Title"]</h1>
+<div class="up-page-header">
+    <h1>@ViewData["Title"]</h1>
+</div>
 
-<p>@Model.LastMessage</p>
+@if (!string.IsNullOrEmpty(Model.LastMessage))
+{
+    <p class="up-hint">@Model.LastMessage</p>
+}
 
-@if (Model.OlderVersions != null)
+@if (Model.OlderVersions != null && Model.OlderVersions.Length > 0)
 {
     <table>
         <tr>
@@ -34,5 +39,8 @@
             </tr>
         }
     </table>
-
-}
\ No newline at end of file
+}
+else
+{
+    <partial name="_EmptyState" model="@("سابقه‌ای برای این صفحه ثبت نشده است.")" />
+}
diff --git a/GanjooRazor/Areas/Admin/Pages/Poets.cshtml b/GanjooRazor/Areas/Admin/Pages/Poets.cshtml
index 143b4e9b..adb0f831 100644
--- a/GanjooRazor/Areas/Admin/Pages/Poets.cshtml
+++ b/GanjooRazor/Areas/Admin/Pages/Poets.cshtml
@@ -1,10 +1,9 @@
-@page
+@page
 @model GanjooRazor.Areas.Admin.Pages.PoetsModel
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
 @{
     Layout = "_AdminLayout";
     ViewData["Title"] = "مدیریت سخنوران";
-    ViewData["WideShell"] = true;
 }
 <div class="up-page-header">
     <h1>@ViewData["Title"]</h1>
@@ -72,8 +71,10 @@
         <th>چسبانی</th>
     </tr>
 
-    @foreach (var poet in Model.Poets)
+    @if (Model.Poets != null && Model.Poets.Length > 0)
     {
+        @foreach (var poet in Model.Poets)
+        {
         <tr>
             <td>
                 <a href="/Admin/Poet?id=@poet.Id">@poet.Nickname</a>
@@ -158,6 +159,15 @@
                 <a role="button" onclick="savePoetMeta(@poet.Id, '@poet.Nickname')" class="up-btn up-btn--success up-btn--sm">ذخیرهٔ @poet.Nickname</a>
             </td>
         </tr>
+        }
+    }
+    else
+    {
+        <tr>
+            <td colspan="4">
+                <partial name="_EmptyState" model="@("هنوز سخنوری ثبت نشده است.")" />
+            </td>
+        </tr>
     }
 </table>
 
diff --git a/GanjooRazor/Areas/User/Pages/AllPoemSections.cshtml b/GanjooRazor/Areas/User/Pages/AllPoemSections.cshtml
index ab2e5022..6e7a731d 100644
--- a/GanjooRazor/Areas/User/Pages/AllPoemSections.cshtml
+++ b/GanjooRazor/Areas/User/Pages/AllPoemSections.cshtml
@@ -1,129 +1,102 @@
 @page
 @model GanjooRazor.Areas.User.Pages.AllPoemSectionsModel
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
 @using DNTPersianUtils.Core
 @{
     Layout = "_UserPanelLayout";
     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 (!string.IsNullOrEmpty(Model.FatalError))
 {
-    @Html.Raw(Model.FatalError)
+    <div class="up-alert up-alert--danger">@Html.Raw(Model.FatalError)</div>
 }
 else
 {
     <script>
-        function rebuildRelatedSections(sectionId, meterId, rhyming) {
-        if (!confirm(String(meterId) + ' : ' + rhyming))
-            return;
-        $('#rebuild-related-' + String(sectionId)).hide();
+        async function rebuildRelatedSections(sectionId, meterId, rhyming) {
+            var ok = await upConfirm(String(meterId) + ' : ' + rhyming);
+            if (!ok) return;
+            $('#rebuild-related-' + String(sectionId)).hide();
 
-        var url = '?handler=RebuildRelatedSections';
+            var url = '?handler=RebuildRelatedSections';
 
-        $.ajax({
-            type: "POST",
-            url: url,
-            data: {
-                meterId: meterId,
-                rhyming: rhyming
-            },
-            success: function() {
-               alert('شروع شد.');
-            },
-            error: function(e) {
-                if (e.responseText == null)
-                    alert(e);
-                else
-                    alert(e.responseText);
-                $('#rebuild-related-' + String(sectionId)).show();
-            }
-        });
-    }
+            $.ajax({
+                type: "POST",
+                url: url,
+                data: {
+                    meterId: meterId,
+                    rhyming: rhyming
+                },
+                success: function() {
+                   upToast('شروع شد.');
+                },
+                error: function(e) {
+                    upToast(e.responseText || String(e), 'error');
+                    $('#rebuild-related-' + String(sectionId)).show();
+                }
+            });
+        }
     </script>
-    <table>
+
+    @if (Model.PoemSections != null && Model.PoemSections.Length > 0)
+    {
         @foreach (var poemSection in Model.PoemSections)
         {
-            @if (poemSection.SectionType == RMuseum.Models.Ganjoor.PoemSectionType.WholePoem)
-            {
-                <tr>
-                    <td colspan="2">
-                        <a href="/User/Section?poemId=@poemSection.PoemId&index=@poemSection.Index"  role="button" class="pagebutton">
+            <div class="up-card">
+                @if (poemSection.SectionType == RMuseum.Models.Ganjoor.PoemSectionType.WholePoem)
+                {
+                    <h2 class="up-card__title">
+                        <a href="/User/Section?poemId=@poemSection.PoemId&index=@poemSection.Index" role="button" class="up-btn up-btn--sm up-btn--ghost">
                             قطعهٔ @(poemSection.Number.ToPersianNumbers()):
                         </a>
-                    </td>
-                </tr>
-            }
+                    </h2>
+                }
 
-            <tr>
-                <td colspan="2">
-                    @Html.Raw(poemSection.HtmlText)
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    نوع
-                </td>
-                <td>
-                    @poemSection.SectionType
-                </td>
-            </tr>
+                <p>@Html.Raw(poemSection.HtmlText)</p>
 
-            <tr>
-                <td>
-                    Verse Type
-                </td>
-                <td>
-                    @poemSection.VerseType
-                </td>
-            </tr>
+                <div class="up-field-row">
+                    <div class="up-field">
+                        <label>نوع</label>
+                        <p class="up-field-static">@poemSection.SectionType</p>
+                    </div>
+                    <div class="up-field">
+                        <label>Verse Type</label>
+                        <p class="up-field-static">@poemSection.VerseType</p>
+                    </div>
+                    <div class="up-field">
+                        <label>Index</label>
+                        <p class="up-field-static">@poemSection.Index</p>
+                    </div>
+                    <div class="up-field">
+                        <label>Number</label>
+                        <p class="up-field-static">@poemSection.Number</p>
+                    </div>
+                </div>
 
-            <tr>
-                <td>
-                    Index
-                </td>
-                <td>
-                    @poemSection.Index
-                </td>
-            </tr>
+                <div class="up-field-row">
+                    <div class="up-field">
+                        <label><span class="up-field-icon" aria-hidden="true">🎵</span> وزن</label>
+                        <p class="up-field-static">@(poemSection.GanjoorMetre == null ? "تعیین نشده" : poemSection.GanjoorMetre.Rhythm)</p>
+                    </div>
+                    <div class="up-field">
+                        <label><span class="up-field-icon" aria-hidden="true">🔤</span> حروف قافیه</label>
+                        <p class="up-field-static">@poemSection.RhymeLetters</p>
+                    </div>
+                </div>
 
-            <tr>
-                <td>
-                    Number
-                </td>
-                <td>
-                    @poemSection.Number
-                </td>
-            </tr>
-
-
-            <tr>
-                <td>
-                    وزن
-                </td>
-                <td>
-                    @(poemSection.GanjoorMetre == null ? "تعیین نشده" : poemSection.GanjoorMetre.Rhythm)
-                </td>
-            </tr>
-
-            <tr>
-                <td>
-                    حروف قافیه
-                </td>
-                <td>
-                    @poemSection.RhymeLetters
-                </td>
-            </tr>
-
-            @if (poemSection.GanjoorMetre != null && !string.IsNullOrEmpty(poemSection.RhymeLetters) && Model.CanEdit)
-            {
-                <tr>
-                    <td colspan="2">
-                        <a role="button" id="rebuild-related-@poemSection.Id" style="cursor:pointer;width:100%;color:white;background-color:red;display:block" onclick="rebuildRelatedSections(@poemSection.Id, @poemSection.GanjoorMetreId, '@poemSection.RhymeLetters')">بازسازی مرتبط‌ها</a>
-                    </td>
-                </tr>
-            }
+                @if (poemSection.GanjoorMetre != null && !string.IsNullOrEmpty(poemSection.RhymeLetters) && Model.CanEdit)
+                {
+                    <a role="button" id="rebuild-related-@poemSection.Id" class="up-btn up-btn--danger up-btn--block" onclick="rebuildRelatedSections(@poemSection.Id, @poemSection.GanjoorMetreId, '@poemSection.RhymeLetters')">🔁 بازسازی مرتبط‌ها</a>
+                }
+            </div>
         }
-    </table>
-
-}
\ No newline at end of file
+    }
+    else
+    {
+        <partial name="_EmptyState" model="@("قطعه‌ای برای این شعر یافت نشد.")" />
+    }
+}
diff --git a/GanjooRazor/Areas/User/Pages/FAQItems.cshtml b/GanjooRazor/Areas/User/Pages/FAQItems.cshtml
index ed2423bc..816af0e7 100644
--- a/GanjooRazor/Areas/User/Pages/FAQItems.cshtml
+++ b/GanjooRazor/Areas/User/Pages/FAQItems.cshtml
@@ -126,7 +126,7 @@ else
     </div>
 
     <div id="catItems" class="up-list">
-        @if (Model.CategoryItems != null)
+        @if (Model.CategoryItems != null && Model.CategoryItems.Length > 0)
         {
             @foreach (var item in Model.CategoryItems)
             {
@@ -138,5 +138,9 @@ else
                 </div>
             }
         }
+        else
+        {
+            <p class="up-text-muted">پرسشی در این دسته نیست.</p>
+        }
     </div>
 }
diff --git a/GanjooRazor/Areas/User/Pages/Languages.cshtml b/GanjooRazor/Areas/User/Pages/Languages.cshtml
index 767b1709..74e7a971 100644
--- a/GanjooRazor/Areas/User/Pages/Languages.cshtml
+++ b/GanjooRazor/Areas/User/Pages/Languages.cshtml
@@ -6,78 +6,52 @@
     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 (!string.IsNullOrEmpty(Model.LastMessage))
 {
-    <p>
-        @Model.LastMessage
-    </p>
+    <div class="up-alert up-alert--info">@Model.LastMessage</div>
 }
 else
 {
-    <form method="post">
-        <table>
-            <tr>
-                <td>
-                    نام:
-                </td>
-                <td>
-                    <input asp-for="Language.Name" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    کد:
-                </td>
-                <td>
-                    <input style="direction:ltr" asp-for="Language.Code" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    نام بومی زبان:
-                </td>
-                <td>
-                    <input style="direction:ltr" asp-for="Language.NativeName" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    راست به چپ:
-                </td>
-                <td>
-                    <input type="checkbox" asp-for="Language.RightToLeft" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    شرح:
-                </td>
-                <td>
-                    <input asp-for="Language.Description" />
-                </td>
-            </tr>
+    <div class="up-card">
+        <h2 class="up-card__title">زبان جدید</h2>
+        <form method="post" class="up-form">
+            <div class="up-field">
+                <label for="Language_Name">نام</label>
+                <input asp-for="Language.Name" />
+            </div>
+            <div class="up-field up-field--ltr">
+                <label for="Language_Code">کد</label>
+                <input asp-for="Language.Code" />
+            </div>
+            <div class="up-field up-field--ltr">
+                <label for="Language_NativeName">نام بومی زبان</label>
+                <input asp-for="Language.NativeName" />
+            </div>
+            <div class="up-check-row">
+                <input type="checkbox" asp-for="Language.RightToLeft" />
+                <label for="Language_RightToLeft">راست به چپ</label>
+            </div>
+            <div class="up-field">
+                <label for="Language_Description">شرح</label>
+                <input asp-for="Language.Description" />
+            </div>
+            <div class="up-form-actions">
+                <input type="submit" value="ایجاد زبان" class="up-btn up-btn--success" />
+            </div>
+        </form>
+    </div>
 
-            <tr>
-                <td colspan="2">
-                    <input type="submit" value="ایجاد زبان" />
-                </td>
-            </tr>
-
-        </table>
-
-    </form>
-
-
-    @if (Model.Languages != null)
+    @if (Model.Languages != null && Model.Languages.Length > 0)
     {
         <script>
-            function deleteLanguage(itemId, itemName) {
-
-                if (!confirm('آیا از حذف این ' + itemName + ' اطمینان دارید؟'))
-                    return;
+            async function deleteLanguage(itemId, itemName) {
 
+                var ok = await upConfirm('آیا از حذف این ' + itemName + ' اطمینان دارید؟');
+                if (!ok) return;
 
                 $.ajax({
                     type: "DELETE",
@@ -86,7 +60,7 @@ else
                         id: itemId
                     },
                     error: function () {
-                        alert('خطا رخ داد.');
+                        upToast('خطا رخ داد.', 'error');
                     },
                     success: function () {
                         location.reload();
@@ -123,11 +97,15 @@ else
                     </td>
                     <td>@language.Description</td>
                     <td>
-                        <a role="button" href="/User/LanguageEdit?id=@language.Id" class="actionlink" title="ویرایش">✎</a>
-                        <a role="button" onclick="deleteLanguage(@language.Id, 'زبان')" class="actionlink" title="حذف">🗑</a>
+                        <a role="button" href="/User/LanguageEdit?id=@language.Id" class="up-icon-btn" title="ویرایش" aria-label="ویرایش این زبان">✎</a>
+                        <a role="button" onclick="deleteLanguage(@language.Id, 'زبان')" class="up-icon-btn" title="حذف" aria-label="حذف این زبان">🗑</a>
                     </td>
                 </tr>
             }
         </table>
     }
-}
\ No newline at end of file
+    else
+    {
+        <partial name="_EmptyState" model="@("هنوز زبانی ثبت نشده است.")" />
+    }
+}
diff --git a/GanjooRazor/Areas/User/Pages/PoemCorrectionsHistory.cshtml b/GanjooRazor/Areas/User/Pages/PoemCorrectionsHistory.cshtml
index 42ebcf9e..aa0c73cc 100644
--- a/GanjooRazor/Areas/User/Pages/PoemCorrectionsHistory.cshtml
+++ b/GanjooRazor/Areas/User/Pages/PoemCorrectionsHistory.cshtml
@@ -1,5 +1,6 @@
 @page
 @model GanjooRazor.Areas.User.Pages.PoemCorrectionsHistoryModel
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
 @using RMuseum.Models.Ganjoor
 @using RMuseum.Services.Implementation
 @using DNTPersianUtils.Core;
@@ -7,21 +8,22 @@
     Layout = "_UserPanelLayout";
     ViewData["Title"] = "سوابق ویرایش";
     await GanjooRazor.Utils.GanjoorSessionChecker.ApplyPermissionsToViewData(Request, Response, ViewData);
-    string color = "gray";
 }
 
-<h1>@ViewData["Title"]</h1>
+<div class="up-page-header">
+    <h1>@ViewData["Title"]</h1>
+</div>
 @if (Model.LastError != "")
 {
-    <h2>@Model.LastError</h2>
+    <div class="up-alert up-alert--danger">@Model.LastError</div>
 }
 else
 {
     <script>
-        function rollBackCorrection(correctionId) {
-            if (!confirm('ویرایش معکوس ایجاد شود؟')) {
-                return;
-            }
+        async function rollBackCorrection(correctionId) {
+            var ok = await upConfirm('ویرایش معکوس ایجاد شود؟');
+            if (!ok) return;
+
             $.ajax({
                 type: "POST",
                 url: '?handler=RollBackCorrection',
@@ -29,312 +31,308 @@ else
                     correctionId: correctionId,
                 },
                 success: function () {
-                    alert('انجام شد.');
-                   
+                    upToast('انجام شد.');
+
                 },
                 error: function (e) {
-                    if (e.responseText == null)
-                        alert(e);
-                    else
-                        alert(e.responseText);
-
+                    upToast(e.responseText || String(e), 'error');
                 }
 
             });
         }
     </script>
-    <p style="text-align:center">
-        @foreach (var paginationLink in Model.PaginationLinks)
-        {
-            if (!string.IsNullOrEmpty(paginationLink.Url))
-            {
-                <a href="@paginationLink.Url">@paginationLink.Name</a>
-            }
-            else
-            {
-                @paginationLink.Name
-            }
-        }
-    </p>
 
-    @foreach (var correction in Model.Corrections)
+    @if (Model.PaginationLinks != null && Model.PaginationLinks.Count > 0)
     {
-        if (color == "gray")
-            color = "lightsteelblue";
-        else
-            color = "gray";
-
-        <div style="background-color:@color" id="correction-@correction.Id">
-            <table>
-                @if(Model.CanEdit)
+        <div class="up-btn-group up-text-center" style="justify-content:center;">
+            @foreach (var paginationLink in Model.PaginationLinks)
+            {
+                if (!string.IsNullOrEmpty(paginationLink.Url))
                 {
-                    <tr>
-                        <td colspan="2"><a href="/User/Edits?UserId=@correction.UserId&AllUsers=1" target="_blank">@correction.UserId</a></td>
-                    </tr>
-
+                    <a href="@paginationLink.Url" class="up-btn up-btn--sm up-btn--ghost">@paginationLink.Name</a>
                 }
-                <tr>
-                    <td colspan="2"><a href="/?p=@correction.PoemId" target="_blank">مشاهدهٔ متن شعر یا بخش</a></td>
-                </tr>
-                <tr>
-                    <td colspan="2">@correction.ReviewDate.ToFriendlyPersianDateTextify()</td>
-                </tr>
-                <tr>
-                    <td>متن اولیه</td>
-                    <td>متن جدید</td>
-                </tr>
-
-                @if (correction.Title != null && correction.Result == CorrectionReviewResult.Approved)
+                else
                 {
-                    <tr>
-                        <td>
-                            <p style="color:red" id="title-original-@correction.Id">@correction.OriginalTitle</p>
-                        </td>
-                        <td>
-                            <p style="color:green" id="title-edited-@correction.Id">@correction.Title</p>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td colspan="2">
-                            <p id="title-compare-@correction.Id">@correction.OriginalTitle</p>
-                            <script>
-                                $(document).ready(function () {
-                                    compareCorrectionBlocks('title-original-@correction.Id', 'title-edited-@correction.Id', 'title-compare-@correction.Id');
-                                });
-                            </script>
-                        </td>
-                    </tr>
+                    <span class="up-btn up-btn--sm up-btn--ghost" aria-current="page">@paginationLink.Name</span>
                 }
-                @if (correction.PoemSummary != null && correction.SummaryReviewResult == CorrectionReviewResult.Approved)
-                {
-                    <tr>
-                        <td>
-                            خلاصه: <p style="color:red" id="summary-original-@correction.Id">@correction.OriginalPoemSummary</p>
-                        </td>
-                        <td>
-                            <p style="color:green" id="summary-edited-@correction.Id">@correction.PoemSummary</p>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td colspan="2">
-                            <p id="summary-compare-@correction.Id">@correction.OriginalPoemSummary</p>
-                            <script>
-                                $(document).ready(function () {
-                                    compareCorrectionBlocks('summary-original-@correction.Id', 'summary-edited-@correction.Id', 'summary-compare-@correction.Id');
-                                });
-                            </script>
-                        </td>
-                    </tr>
-                }
-                @if (correction.Rhythm != null && correction.RhythmResult == CorrectionReviewResult.Approved)
-                {
-                    <tr>
-                        <td>
-                            <p style="color:red">@correction.OriginalRhythm</p>
-                        </td>
-                        <td>
-                            <p style="color:green">@correction.Rhythm</p>
-                        </td>
-
-                    </tr>
-
-                }
-                @if (correction.RhymeLetters != null && correction.RhymeLettersReviewResult == CorrectionReviewResult.Approved)
-                {
-                    <tr>
-                        <td>
-                            <p style="color:red">قافیه: @correction.OriginalRhymeLetters</p>
-                        </td>
-                        <td>
-                            <p style="color:green">@correction.RhymeLetters</p>
-                        </td>
-
-                    </tr>
-
-                }
-                @if (correction.PoemFormat != null && correction.PoemFormatReviewResult == CorrectionReviewResult.Approved)
-                {
-                    <tr>
-                        <td>
-                            <p style="color:red">قالب شعری: @RMuseum.Services.Implementation.GanjoorPoemFormatConvertor.GetString(correction.OriginalPoemFormat)</p>
-                        </td>
-                        <td>
-                            <p style="color:green">@RMuseum.Services.Implementation.GanjoorPoemFormatConvertor.GetString(correction.PoemFormat)</p>
-                        </td>
-
-                    </tr>
-
-                }
-                @if (correction.VerseOrderText != null)
-                    @foreach (var verse in correction.VerseOrderText)
-                    {
-                        @if (verse.MarkForDelete)
-                        {
-                            if (verse.MarkForDeleteResult == CorrectionReviewResult.Approved)
-                            {
-                                <tr>
-                                    <td>
-                                        <p style="color:red">@verse.OriginalText</p>
-                                    </td>
-                                    <td>
-                                        <p style="color:red">حذف شد</p>
-                                    </td>
-
-                                </tr>
-                            }
-                        }
-                        else if (verse.NewVerse)
-                        {
-                            if (verse.NewVerseResult == CorrectionReviewResult.Approved)
-                            {
-                                <tr>
-                                    <td>
-                                        <p style="color:green">@verse.Text</p>
-                                    </td>
-                                    <td>
-                                        <p style="color:green">اضافه شد</p>
-                                    </td>
-
-                                </tr>
-                            }
-                        }
-                        else
-                        {
-                            if (verse.Result == CorrectionReviewResult.Approved)
-                            {
-                                <tr>
-                                    <td>
-                                        <p id="verse-original-@correction.Id-edit-@verse.VORder" style="color:red">@verse.OriginalText</p>
-                                    </td>
-                                    <td>
-                                        <p id="verse-edited-@correction.Id-edit-@verse.VORder"  style="color:green">@verse.Text</p>
-                                    </td>
-
-                                </tr>
-                                <tr>
-                                    <td colspan="2">
-                                        <p id="verse-compare-@correction.Id-edit-@verse.VORder">@verse.OriginalText</p>
-                                        <script>
-                                            $(document).ready(function () {
-                                                compareCorrectionBlocks('verse-original-@correction.Id-edit-@verse.VORder', 'verse-edited-@correction.Id-edit-@verse.VORder', 'verse-compare-@correction.Id-edit-@verse.VORder');
-                                            });
-                                        </script>
-                                    </td>
-
-                                </tr>
-                            }
-
-                            if (verse.SummaryReviewResult == CorrectionReviewResult.Approved)
-                            {
-                                <tr>
-                                    <td colspan="2">
-                                        @verse.OriginalText
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>
-                                        معنی: <p style="color:red" id="versesummary-original-@correction.Id-edit-@verse.VORder">@verse.OriginalCoupletSummary</p>
-                                    </td>
-                                    <td>
-                                        <p style="color:green" id="versesummary-edited-@correction.Id-edit-@verse.VORder">@verse.CoupletSummary</p>
-                                    </td>
-
-                                </tr>
-                                <tr>
-                                    <td colspan="2">
-                                        <p id="versesummary-compare-@correction.Id-edit-@verse.VORder">@verse.OriginalText</p>
-                                        <script>
-                                            $(document).ready(function () {
-                                                compareCorrectionBlocks('versesummary-original-@correction.Id-edit-@verse.VORder', 'versesummary-edited-@correction.Id-edit-@verse.VORder', 'versesummary-compare-@correction.Id-edit-@verse.VORder');
-                                            });
-                                        </script>
-                                    </td>
-
-                                </tr>
-                            }
-
-                            if (verse.VersePosition != null && verse.VersePositionResult == CorrectionReviewResult.Approved)
-                            {
-                                <tr>
-                                    <td colspan="2">
-                                        @verse.OriginalText
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>
-
-                                        <p style="color:red">تبدیل نوع مصرع از @RMuseum.Models.Ganjoor.VersePositionHelper.GetVersePositionString((VersePosition)verse.OriginalVersePosition)</p>
-                                    </td>
-                                    <td>
-                                        <p>@verse.Text</p>
-                                        <p style="color:green">تبدیل نوع مصرع به @RMuseum.Models.Ganjoor.VersePositionHelper.GetVersePositionString((VersePosition)verse.VersePosition)</p>
-                                    </td>
-                                </tr>
-                            }
-
-                            @if (verse.LanguageId != null && verse.LanguageReviewResult == CorrectionReviewResult.Approved)
-                            {
-                                <tr>
-                                    <td colspan="2">
-                                        @verse.OriginalText
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>
-                                        @if (verse.OriginalLanguageId != null)
-                                        {
-                                            <p>تغییر زبان از @Model.Languages.Where(l => l.Id == verse.OriginalLanguageId).Single().Name </p>
-                                        }
-                                        else
-                                        {
-                                            <p>تغییر زبان از فارسی</p>
-                                        }
-                                    </td>
-                                    <td>
-                                        @if (verse.LanguageId != null)
-                                        {
-                                            <p>به @Model.Languages.Where(l => l.Id == verse.LanguageId).Single().Name </p>
-                                        }
-                                        else
-                                        {
-                                            <p>به فارسی</p>
-                                        }
-                                    </td>
-
-                                </tr>
-                            }
-
-                            <tr><td colspan="2" style="background-color:black">&nbsp;</td></tr>
-                        }
-                    }
-
-                <tr>
-                    <td colspan="2">
-                        <a role="button" style="cursor:pointer;width:100%;color:white;background-color:orange;display:block" onclick="rollBackCorrection(@correction.Id)">برگشت به وضعیت قبل از این ویرایش</a>
-                    </td>
-                </tr>
-
-            </table>
-
+            }
         </div>
-
-
-        <hr />
     }
 
-    <p style="text-align:center">
-        @foreach (var paginationLink in Model.PaginationLinks)
+    @if (Model.Corrections != null && Model.Corrections.Count > 0)
+    {
+        @foreach (var correction in Model.Corrections)
         {
-            if (!string.IsNullOrEmpty(paginationLink.Url))
-            {
-                <a href="@paginationLink.Url">@paginationLink.Name</a>
-            }
-            else
-            {
-                @paginationLink.Name
-            }
+            <div class="up-card" id="correction-@correction.Id">
+                @if (Model.CanEdit)
+                {
+                    <p><a href="/User/Edits?UserId=@correction.UserId&AllUsers=1" target="_blank">🧑 @correction.UserId</a></p>
+                }
+                <p><a href="/?p=@correction.PoemId" target="_blank">🔗 مشاهدهٔ متن شعر یا بخش</a></p>
+                <p class="up-hint">🕘 @correction.ReviewDate.ToFriendlyPersianDateTextify()</p>
+
+                <table>
+                    <tr>
+                        <td>متن اولیه</td>
+                        <td>متن جدید</td>
+                    </tr>
+
+                    @if (correction.Title != null && correction.Result == CorrectionReviewResult.Approved)
+                    {
+                        <tr>
+                            <td colspan="2">
+                                تغییرات عنوان
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <p class="red-color" id="title-original-@correction.Id">@correction.OriginalTitle</p>
+                            </td>
+                            <td>
+                                <p class="green-color" id="title-edited-@correction.Id">@correction.Title</p>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="2">
+                                <p id="title-compare-@correction.Id">@correction.OriginalTitle</p>
+                                <script>
+                                    $(document).ready(function () {
+                                        compareCorrectionBlocks('title-original-@correction.Id', 'title-edited-@correction.Id', 'title-compare-@correction.Id');
+                                    });
+                                </script>
+                            </td>
+                        </tr>
+                    }
+                    @if (correction.PoemSummary != null && correction.SummaryReviewResult == CorrectionReviewResult.Approved)
+                    {
+                        <tr>
+                            <td colspan="2">
+                                تغییرات خلاصه
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <p class="red-color" id="summary-original-@correction.Id">@correction.OriginalPoemSummary</p>
+                            </td>
+                            <td>
+                                <p class="green-color" id="summary-edited-@correction.Id">@correction.PoemSummary</p>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="2">
+                                <p id="summary-compare-@correction.Id">@correction.OriginalPoemSummary</p>
+                                <script>
+                                    $(document).ready(function () {
+                                        compareCorrectionBlocks('summary-original-@correction.Id', 'summary-edited-@correction.Id', 'summary-compare-@correction.Id');
+                                    });
+                                </script>
+                            </td>
+                        </tr>
+                    }
+                    @if (correction.Rhythm != null && correction.RhythmResult == CorrectionReviewResult.Approved)
+                    {
+                        <tr>
+                            <td>
+                                <p class="red-color">@correction.OriginalRhythm</p>
+                            </td>
+                            <td>
+                                <p class="green-color">@correction.Rhythm</p>
+                            </td>
+
+                        </tr>
+
+                    }
+                    @if (correction.RhymeLetters != null && correction.RhymeLettersReviewResult == CorrectionReviewResult.Approved)
+                    {
+                        <tr>
+                            <td>
+                                <p class="red-color">قافیه: @correction.OriginalRhymeLetters</p>
+                            </td>
+                            <td>
+                                <p class="green-color">@correction.RhymeLetters</p>
+                            </td>
+
+                        </tr>
+
+                    }
+                    @if (correction.PoemFormat != null && correction.PoemFormatReviewResult == CorrectionReviewResult.Approved)
+                    {
+                        <tr>
+                            <td>
+                                <p class="red-color">قالب شعری: @GanjoorPoemFormatConvertor.GetString(correction.OriginalPoemFormat)</p>
+                            </td>
+                            <td>
+                                <p class="green-color">@GanjoorPoemFormatConvertor.GetString(correction.PoemFormat)</p>
+                            </td>
+
+                        </tr>
+
+                    }
+                    @if (correction.VerseOrderText != null)
+                        @foreach (var verse in correction.VerseOrderText)
+                        {
+                            @if (verse.MarkForDelete)
+                            {
+                                if (verse.MarkForDeleteResult == CorrectionReviewResult.Approved)
+                                {
+                                    <tr>
+                                        <td>
+                                            <p class="red-color">@verse.OriginalText</p>
+                                        </td>
+                                        <td>
+                                            <p class="red-color">حذف شد</p>
+                                        </td>
+
+                                    </tr>
+                                }
+                            }
+                            else if (verse.NewVerse)
+                            {
+                                if (verse.NewVerseResult == CorrectionReviewResult.Approved)
+                                {
+                                    <tr>
+                                        <td>
+                                            <p class="green-color">@verse.Text</p>
+                                        </td>
+                                        <td>
+                                            <p class="green-color">اضافه شد</p>
+                                        </td>
+
+                                    </tr>
+                                }
+                            }
+                            else
+                            {
+                                if (verse.Result == CorrectionReviewResult.Approved)
+                                {
+                                    <tr>
+                                        <td>
+                                            <p id="verse-original-@correction.Id-edit-@verse.VORder" class="red-color">@verse.OriginalText</p>
+                                        </td>
+                                        <td>
+                                            <p id="verse-edited-@correction.Id-edit-@verse.VORder" class="green-color">@verse.Text</p>
+                                        </td>
+
+                                    </tr>
+                                    <tr>
+                                        <td colspan="2">
+                                            <p id="verse-compare-@correction.Id-edit-@verse.VORder">@verse.OriginalText</p>
+                                            <script>
+                                                $(document).ready(function () {
+                                                    compareCorrectionBlocks('verse-original-@correction.Id-edit-@verse.VORder', 'verse-edited-@correction.Id-edit-@verse.VORder', 'verse-compare-@correction.Id-edit-@verse.VORder');
+                                                });
+                                            </script>
+                                        </td>
+
+                                    </tr>
+                                }
+
+                                if (verse.SummaryReviewResult == CorrectionReviewResult.Approved)
+                                {
+                                    <tr>
+                                        <td colspan="2">
+                                            @verse.OriginalText
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            معنی: <p class="red-color" id="versesummary-original-@correction.Id-edit-@verse.VORder">@verse.OriginalCoupletSummary</p>
+                                        </td>
+                                        <td>
+                                            <p class="green-color" id="versesummary-edited-@correction.Id-edit-@verse.VORder">@verse.CoupletSummary</p>
+                                        </td>
+
+                                    </tr>
+                                    <tr>
+                                        <td colspan="2">
+                                            <p id="versesummary-compare-@correction.Id-edit-@verse.VORder">@verse.OriginalText</p>
+                                            <script>
+                                                $(document).ready(function () {
+                                                    compareCorrectionBlocks('versesummary-original-@correction.Id-edit-@verse.VORder', 'versesummary-edited-@correction.Id-edit-@verse.VORder', 'versesummary-compare-@correction.Id-edit-@verse.VORder');
+                                                });
+                                            </script>
+                                        </td>
+
+                                    </tr>
+                                }
+
+                                if (verse.VersePosition != null && verse.VersePositionResult == CorrectionReviewResult.Approved)
+                                {
+                                    <tr>
+                                        <td colspan="2">
+                                            @verse.OriginalText
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+
+                                            <p class="red-color">تبدیل نوع مصرع از @VersePositionHelper.GetVersePositionString((VersePosition)verse.OriginalVersePosition)</p>
+                                        </td>
+                                        <td>
+                                            <p>@verse.Text</p>
+                                            <p class="green-color">تبدیل نوع مصرع به @VersePositionHelper.GetVersePositionString((VersePosition)verse.VersePosition)</p>
+                                        </td>
+                                    </tr>
+                                }
+
+                                @if (verse.LanguageId != null && verse.LanguageReviewResult == CorrectionReviewResult.Approved)
+                                {
+                                    <tr>
+                                        <td colspan="2">
+                                            @verse.OriginalText
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            @if (verse.OriginalLanguageId != null)
+                                            {
+                                                <p>تغییر زبان از @Model.Languages.Where(l => l.Id == verse.OriginalLanguageId).Single().Name </p>
+                                            }
+                                            else
+                                            {
+                                                <p>تغییر زبان از فارسی</p>
+                                            }
+                                        </td>
+                                        <td>
+                                            @if (verse.LanguageId != null)
+                                            {
+                                                <p>به @Model.Languages.Where(l => l.Id == verse.LanguageId).Single().Name </p>
+                                            }
+                                            else
+                                            {
+                                                <p>به فارسی</p>
+                                            }
+                                        </td>
+
+                                    </tr>
+                                }
+                            }
+                        }
+                </table>
+
+                <a role="button" class="up-btn up-btn--danger up-btn--block" onclick="rollBackCorrection(@correction.Id)">↩️ برگشت به وضعیت قبل از این ویرایش</a>
+            </div>
         }
-    </p>
-
+    }
+    else
+    {
+        <partial name="_EmptyState" model="@("سابقهٔ ویرایشی برای این شعر ثبت نشده است.")" />
+    }
 
+    @if (Model.PaginationLinks != null && Model.PaginationLinks.Count > 0)
+    {
+        <div class="up-btn-group up-text-center" style="justify-content:center;">
+            @foreach (var paginationLink in Model.PaginationLinks)
+            {
+                if (!string.IsNullOrEmpty(paginationLink.Url))
+                {
+                    <a href="@paginationLink.Url" class="up-btn up-btn--sm up-btn--ghost">@paginationLink.Name</a>
+                }
+                else
+                {
+                    <span class="up-btn up-btn--sm up-btn--ghost" aria-current="page">@paginationLink.Name</span>
+                }
+            }
+        </div>
+    }
 }
diff --git a/GanjooRazor/Areas/User/Pages/SuggestQuoted.cshtml b/GanjooRazor/Areas/User/Pages/SuggestQuoted.cshtml
index c8ed89a4..9b365271 100644
--- a/GanjooRazor/Areas/User/Pages/SuggestQuoted.cshtml
+++ b/GanjooRazor/Areas/User/Pages/SuggestQuoted.cshtml
@@ -8,9 +8,14 @@
     await GanjooRazor.Utils.GanjoorSessionChecker.ApplyPermissionsToViewData(Request, Response, ViewData);
 }
 
-<h1>@ViewData["Title"]</h1>
+<div class="up-page-header">
+    <h1>@ViewData["Title"]</h1>
+</div>
 
-<p class="red-color">@Html.Raw(Model.LastMessage)</p>
+@if (!string.IsNullOrEmpty(Model.LastMessage))
+{
+    <div class="up-alert up-alert--danger">@Html.Raw(Model.LastMessage)</div>
+}
 
 @if (Model.GanjoorQuotedPoem != null && Model.Couplets != null)
 {
@@ -95,7 +100,7 @@
 
                     if (json.poem == null) {
                         document.getElementById('loading-selection').style.display = 'none';
-                        alert('صفحه‌ای که انتخاب کرده‌اید حاوی یک شعر نیست.');
+                        upToast('صفحه‌ای که انتخاب کرده‌اید حاوی یک شعر نیست.', 'error');
                         selectGanjoorPage();
                         return;
                     }
@@ -127,305 +132,150 @@
 
                 }).catch((error) => {
                     document.getElementById('loading-selection').style.display = 'none';
-                    alert('در انتخاب صفحه خطایی رخ داد. جزئیات بیشتر: ' + error);
+                    upToast('در انتخاب صفحه خطایی رخ داد. جزئیات بیشتر: ' + error, 'error');
                     selectGanjoorPage();
                 });
 
         }
 
     </script>
-    <div class="notice">
-        <p>
-            از این طریق می‌توانید نقل قول یک شاعر از یک شاعر دیگر را در گنجور ثبت کنید. توجه داشته باشید که اقتفا (یکسانی قافیه) دلیل کافی بر نقل قول نیست. باید در شعرها حداقل یک مصرع بعینه (با تخفیف تفاوت جزئی واژگان) نقل قول شده باشد.
-        </p>
+    <div class="up-alert up-alert--info">
+        <p class="up-mt-0">از این طریق می‌توانید نقل قول یک شاعر از یک شاعر دیگر را در گنجور ثبت کنید. توجه داشته باشید که اقتفا (یکسانی قافیه) دلیل کافی بر نقل قول نیست. باید در شعرها حداقل یک مصرع بعینه (با تخفیف تفاوت جزئی واژگان) نقل قول شده باشد.</p>
     </div>
-    <form method="post">
-        <table>
-            <tr>
-                <td>
-                    <div class="notice">
-                        <p>
-                            از فهرست زیر بیتی را که نقل قول در آن رخ داده مشخص کنید.
-                        </p>
-                    </div>
+    <div class="up-card">
+        <form method="post" class="up-form">
+            <div class="up-alert up-alert--info">
+                <p class="up-mt-0">از فهرست زیر بیتی را که نقل قول در آن رخ داده مشخص کنید.</p>
+            </div>
 
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    بیت مرجع از <a href="/?p=@Model.GanjoorQuotedPoem.PoemId">شعر</a>:
-                    <input type="hidden" asp-for="GanjoorQuotedPoem.Id" />
-                    <input type="hidden" asp-for="GanjoorQuotedPoem.PoemId" />
-                    <input type="hidden" asp-for="GanjoorQuotedPoem.PoetId" />
+            <p>
+                بیت مرجع از <a href="/?p=@Model.GanjoorQuotedPoem.PoemId">شعر</a>:
+                <input type="hidden" asp-for="GanjoorQuotedPoem.Id" />
+                <input type="hidden" asp-for="GanjoorQuotedPoem.PoemId" />
+                <input type="hidden" asp-for="GanjoorQuotedPoem.PoetId" />
+            </p>
 
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <select asp-for="GanjoorQuotedPoem.CoupletIndex" style="width:100%">
-                        @foreach (var item in Model.Couplets)
-                        {
-                            <option value="@item.Item1">@($"{(item.Item1 + 1).ToPersianNumbers()} - {item.Item2}")</option>
-                        }
-                    </select>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    نقل قول در مصرع اول:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.CoupletVerse1ShouldBeEmphasized" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    نقل قول در مصرع دوم:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.CoupletVerse2ShouldBeEmphasized" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <div class="notice">
-                        <p>اگر شعر مرتبط در گنجور وجود دارد آن را با «گزینش شعر مرتبط» و پیدا کردن آن در صفحه‌ای که باز می‌شود مشخص کنید.</p>
+            <div class="up-field">
+                <label for="GanjoorQuotedPoem_CoupletIndex">بیت</label>
+                <select asp-for="GanjoorQuotedPoem.CoupletIndex">
+                    @foreach (var item in Model.Couplets)
+                    {
+                        <option value="@item.Item1">@($"{(item.Item1 + 1).ToPersianNumbers()} - {item.Item2}")</option>
+                    }
+                </select>
+            </div>
 
-                    </div>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <a onclick="finalizeSelectPage()" class="pagebutton" role="button" id="finalize-select2" style="display:none">انتخاب کردم</a>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <iframe id="select-poem" src="/" height="600" style="display:none;width:100%;margin:auto"></iframe>
-                </td>
-            </tr>
+            <div class="up-check-row">
+                <input asp-for="GanjoorQuotedPoem.CoupletVerse1ShouldBeEmphasized" />
+                <label for="GanjoorQuotedPoem_CoupletVerse1ShouldBeEmphasized">نقل قول در مصرع اول</label>
+            </div>
+            <div class="up-check-row">
+                <input asp-for="GanjoorQuotedPoem.CoupletVerse2ShouldBeEmphasized" />
+                <label for="GanjoorQuotedPoem_CoupletVerse2ShouldBeEmphasized">نقل قول در مصرع دوم</label>
+            </div>
 
-            <tr>
-                <td>
-                    <a onclick="selectGanjoorPage()" class="pagebutton" role="button" id="display-frame">گزینش شعر مرتبط</a>
-                    <input asp-for="GanjoorQuotedPoem.RelatedPoemId" type="hidden" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <a onclick="finalizeSelectPage()" class="pagebutton" role="button" id="finalize-select" style="display:none">انتخاب کردم</a>
-                    <div id="loading-selection" style="display:none"><img src="/image/loading.gif" /></div>
-                </td>
-            </tr>
+            <div class="up-alert up-alert--info">
+                <p class="up-mt-0">اگر شعر مرتبط در گنجور وجود دارد آن را با «گزینش شعر مرتبط» و پیدا کردن آن در صفحه‌ای که باز می‌شود مشخص کنید.</p>
+            </div>
 
+            <a onclick="finalizeSelectPage()" class="up-btn up-btn--ghost" role="button" id="finalize-select2" style="display:none">انتخاب کردم</a>
+            <iframe id="select-poem" src="/" height="600" style="display:none;width:100%;margin:auto"></iframe>
+
+            <div class="up-btn-group">
+                <a onclick="selectGanjoorPage()" class="up-btn up-btn--ghost" role="button" id="display-frame">🔎 گزینش شعر مرتبط</a>
+                <input asp-for="GanjoorQuotedPoem.RelatedPoemId" type="hidden" />
+                <a onclick="finalizeSelectPage()" class="up-btn up-btn--ghost" role="button" id="finalize-select" style="display:none">انتخاب کردم</a>
+                <div id="loading-selection" style="display:none"><img src="/image/loading.gif" /></div>
+            </div>
 
             @if (Model.GanjoorQuotedPoem.RelatedPoemId != null)
             {
-                <tr>
-                    <td>
-                        <a href="/?p=@Model.GanjoorQuotedPoem.RelatedPoemId">مشاهدهٔ شعر مرتبط</a>
-                    </td>
-                </tr>
+                <p><a href="/?p=@Model.GanjoorQuotedPoem.RelatedPoemId">🔗 مشاهدهٔ شعر مرتبط</a></p>
             }
 
+            <div class="up-field">
+                <label for="GanjoorQuotedPoem_RelatedCoupletIndex">بیت مرتبط</label>
+                <select asp-for="GanjoorQuotedPoem.RelatedCoupletIndex">
+                    @foreach (var item in Model.RelatedCouplets)
+                    {
+                        <option value="@item.Item1">@($"{(item.Item1 + 1).ToPersianNumbers()} - {item.Item2}")</option>
+                    }
+                </select>
+            </div>
 
-            <tr>
-                <td>
-                    بیت مرتبط:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <select asp-for="GanjoorQuotedPoem.RelatedCoupletIndex" style="width:100%;">
-                        @foreach (var item in Model.RelatedCouplets)
-                        {
-                            <option value="@item.Item1">@($"{(item.Item1 + 1).ToPersianNumbers()} - {item.Item2}")</option>
-                        }
-                    </select>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <div class="notice">
-                        اگر شعر مرتبط در گنجور وجود ندارد مصرع اول و دوم مرتبط آن را در کادرهای بعد تایپ کنید.
-                    </div>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    مصرع اول مرتبط (خارج از گنجور):
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <div class="notice">
-                        <p>
-                            اگر شعر را از طریق دکمهٔ «گزینش شعر مرتبط» انتخاب کرده‌اید کادر زیر را خالی بگذارید.
-                        </p>
-                    </div>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.RelatedCoupletVerse1" size="65" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    نقل قول در مصرع اول شعر مرتبط:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.RelatedCoupletVerse1ShouldBeEmphasized" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    مصرع دوم مرتبط (خارج از گنجور):
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <div class="notice">
-                        <p>
-                            اگر شعر را از طریق دکمهٔ «گزینش شعر مرتبط» انتخاب کرده‌اید کادر زیر را خالی بگذارید.
-                        </p>
-                    </div>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.RelatedCoupletVerse2" size="65" />
-                </td>
-            </tr>
+            <div class="up-alert up-alert--info">
+                <p class="up-mt-0">اگر شعر مرتبط در گنجور وجود ندارد مصرع اول و دوم مرتبط آن را در کادرهای بعد تایپ کنید.</p>
+            </div>
 
-            <tr>
-                <td>
-                    نقل قول در مصرع دوم شعر مرتبط:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.RelatedCoupletVerse2ShouldBeEmphasized" />
-                    <input asp-for="GanjoorQuotedPoem.SortOrder" hidden />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    این شعر قدیمی‌تر از شعر مرتبط است:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.IsPriorToRelated" />
-                    <input asp-for="GanjoorQuotedPoem.ChosenForMainList" type="hidden" />
-                    <input asp-for="GanjoorQuotedPoem.IndirectQuotation" type="hidden" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    منتسب به هر دو شاعر:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.ClaimedByBothPoets" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    شاعر:
-                </td>
-            </tr>
+            <div class="up-field">
+                <label for="GanjoorQuotedPoem_RelatedCoupletVerse1">مصرع اول مرتبط (خارج از گنجور)</label>
+                <p class="up-hint">اگر شعر را از طریق دکمهٔ «گزینش شعر مرتبط» انتخاب کرده‌اید کادر زیر را خالی بگذارید.</p>
+                <input asp-for="GanjoorQuotedPoem.RelatedCoupletVerse1" size="65" />
+            </div>
+            <div class="up-check-row">
+                <input asp-for="GanjoorQuotedPoem.RelatedCoupletVerse1ShouldBeEmphasized" />
+                <label for="GanjoorQuotedPoem_RelatedCoupletVerse1ShouldBeEmphasized">نقل قول در مصرع اول شعر مرتبط</label>
+            </div>
 
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.RelatedPoetId" hidden />
-                    <input asp-for="GanjoorQuotedPoem.CachedRelatedPoemPoetName" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    سالمرگ شاعر:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.CachedRelatedPoemPoetDeathYearInLHijri" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    نشانی صفحهٔ شاعر:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.CachedRelatedPoemPoetUrl" style="direction:ltr;text-align:left" size="65" />
-                    <input asp-for="GanjoorQuotedPoem.CachedRelatedPoemPoetImage" type="hidden" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    عنوان شعر:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.CachedRelatedPoemFullTitle" size="65" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    نشانی شعر:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <input asp-for="GanjoorQuotedPoem.CachedRelatedPoemFullUrl" style="direction:ltr;text-align:left" size="65" />
-                    <input asp-for="GanjoorQuotedPoem.Published" hidden />
-                    <input asp-for="GanjoorQuotedPoem.SamePoemsQuotedCount" hidden />
-                </td>
-            </tr>
+            <div class="up-field">
+                <label for="GanjoorQuotedPoem_RelatedCoupletVerse2">مصرع دوم مرتبط (خارج از گنجور)</label>
+                <p class="up-hint">اگر شعر را از طریق دکمهٔ «گزینش شعر مرتبط» انتخاب کرده‌اید کادر زیر را خالی بگذارید.</p>
+                <input asp-for="GanjoorQuotedPoem.RelatedCoupletVerse2" size="65" />
+            </div>
+            <div class="up-check-row">
+                <input asp-for="GanjoorQuotedPoem.RelatedCoupletVerse2ShouldBeEmphasized" />
+                <label for="GanjoorQuotedPoem_RelatedCoupletVerse2ShouldBeEmphasized">نقل قول در مصرع دوم شعر مرتبط</label>
+                <input asp-for="GanjoorQuotedPoem.SortOrder" hidden />
+            </div>
 
-            <tr>
-                <td>
-                    یادداشت:
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <textarea asp-for="GanjoorQuotedPoem.Note" rows="4" cols="80" class="editor"></textarea>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <div class="notice">
-                        <p>
-                            نیازی به پیشنهاد معکوس این نقل قول نیست. در صورت تأیید، معکوس آن هم به طور خودکار ایجاد می‌شود.
-                        </p>
-                    </div>
-                </td>
-            </tr>
+            <div class="up-check-row">
+                <input asp-for="GanjoorQuotedPoem.IsPriorToRelated" />
+                <label for="GanjoorQuotedPoem_IsPriorToRelated">این شعر قدیمی‌تر از شعر مرتبط است</label>
+                <input asp-for="GanjoorQuotedPoem.ChosenForMainList" type="hidden" />
+                <input asp-for="GanjoorQuotedPoem.IndirectQuotation" type="hidden" />
+            </div>
 
-            <tr>
-                <td>
-                    <input type="submit" class="width-100per" value="پیشنهاد" />
-                </td>
-            </tr>
+            <div class="up-check-row">
+                <input asp-for="GanjoorQuotedPoem.ClaimedByBothPoets" />
+                <label for="GanjoorQuotedPoem_ClaimedByBothPoets">منتسب به هر دو شاعر</label>
+            </div>
 
-            <tr><td><hr /></td></tr>
+            <div class="up-field">
+                <label for="GanjoorQuotedPoem_CachedRelatedPoemPoetName">شاعر</label>
+                <input asp-for="GanjoorQuotedPoem.RelatedPoetId" hidden />
+                <input asp-for="GanjoorQuotedPoem.CachedRelatedPoemPoetName" />
+            </div>
+            <div class="up-field">
+                <label for="GanjoorQuotedPoem_CachedRelatedPoemPoetDeathYearInLHijri">سالمرگ شاعر</label>
+                <input asp-for="GanjoorQuotedPoem.CachedRelatedPoemPoetDeathYearInLHijri" />
+            </div>
+            <div class="up-field up-field--ltr">
+                <label for="GanjoorQuotedPoem_CachedRelatedPoemPoetUrl">نشانی صفحهٔ شاعر</label>
+                <input asp-for="GanjoorQuotedPoem.CachedRelatedPoemPoetUrl" size="65" />
+                <input asp-for="GanjoorQuotedPoem.CachedRelatedPoemPoetImage" type="hidden" />
+            </div>
+            <div class="up-field">
+                <label for="GanjoorQuotedPoem_CachedRelatedPoemFullTitle">عنوان شعر</label>
+                <input asp-for="GanjoorQuotedPoem.CachedRelatedPoemFullTitle" size="65" />
+            </div>
+            <div class="up-field up-field--ltr">
+                <label for="GanjoorQuotedPoem_CachedRelatedPoemFullUrl">نشانی شعر</label>
+                <input asp-for="GanjoorQuotedPoem.CachedRelatedPoemFullUrl" size="65" />
+                <input asp-for="GanjoorQuotedPoem.Published" hidden />
+                <input asp-for="GanjoorQuotedPoem.SamePoemsQuotedCount" hidden />
+            </div>
 
-        </table>
-    </form>
+            <div class="up-field">
+                <label for="GanjoorQuotedPoem_Note"><span class="up-field-icon" aria-hidden="true">🗒️</span> یادداشت</label>
+                <textarea asp-for="GanjoorQuotedPoem.Note" rows="4" cols="80" class="editor"></textarea>
+            </div>
+
+            <div class="up-hint">نیازی به پیشنهاد معکوس این نقل قول نیست. در صورت تأیید، معکوس آن هم به طور خودکار ایجاد می‌شود.</div>
+
+            <div class="up-form-actions">
+                <input type="submit" value="پیشنهاد" class="up-btn up-btn--success up-btn--block" />
+            </div>
+        </form>
+    </div>
 
 }