diff --git a/src/FrontOffice.Main/Pages/Index.razor b/src/FrontOffice.Main/Pages/Index.razor
index 34e0d9d..b4651dd 100644
--- a/src/FrontOffice.Main/Pages/Index.razor
+++ b/src/FrontOffice.Main/Pages/Index.razor
@@ -163,10 +163,13 @@
                                     <MudText Typo="Typo.h5" Class="mb-3">@(p.Title)</MudText>
                                     @((MarkupString)p.Body)
                                 </MudCardContent>
-                                <MudCardActions>
-                                    <MudButton Variant="Variant.Outlined"
+                                <MudCardActions Class="ma-2">
+                                    <MudText Typo="Typo.h5"
+                                             Color="Color.Success"
+                                             Align="Align.End">@(p.Price.ToThousands().ToCurrencyUnitIRT())</MudText>
+                                    <MudSpacer />
+                                    <MudButton Variant="Variant.Filled"
                                                Color="Color.Primary"
-                                               FullWidth="true"
                                                OnClick="@(() => NavigateToPackage(p.Id))">مشاهده جزئیات</MudButton>
                                 </MudCardActions>
                             </MudCard>
diff --git a/src/FrontOffice.Main/Pages/Index.razor.cs b/src/FrontOffice.Main/Pages/Index.razor.cs
index 4b162e0..3aa4324 100644
--- a/src/FrontOffice.Main/Pages/Index.razor.cs
+++ b/src/FrontOffice.Main/Pages/Index.razor.cs
@@ -26,10 +26,11 @@ public partial class Index
             if (response?.Models?.Any() == true)
             {
                 _packs = response.Models.Select(p => new Pack(
-                    p.Id,
-                    p.Title,
-                    p.Description,
-                    Image: UrlUtility.DownloadUrl + p.ImagePath
+                    Id: p.Id,
+                    Title: p.Title,
+                    Body: p.Description,
+                    Image: UrlUtility.DownloadUrl + p.ImagePath,
+                    Price: p.Price
                 )).ToList();
             }
             else
@@ -64,7 +65,7 @@ public partial class Index
         Navigation.NavigateTo($"{RouteConstants.Package.Detail}/{packageId}");
     }
 
-    private record Pack(long Id,string Title, string Body, string Image);
+    private record Pack(long Id, string Title, string Body, string Image, long Price);
     private record Plan(string Name, string Price, bool Highlight, IEnumerable<string> Features);
     private record QA(string Q, string A);
     private readonly List<QA> _faqs = new()
diff --git a/src/FrontOffice.Main/Pages/PackageDetail.razor b/src/FrontOffice.Main/Pages/PackageDetail.razor
index 1d624fc..97b6556 100644
--- a/src/FrontOffice.Main/Pages/PackageDetail.razor
+++ b/src/FrontOffice.Main/Pages/PackageDetail.razor
@@ -30,8 +30,78 @@ else
     <!-- Package Details -->
     <MudContainer MaxWidth="MaxWidth.Large" Class="pb-8">
         <MudGrid Spacing="4">
+            <!-- Sidebar (Mobile First) -->
+            <MudItem xs="12" lg="4" Class="order-1 order-lg-2">
+                <MudPaper Elevation="2" Class="pa-6 rounded-2xl mud-theme-surface sticky-top">
+                    <MudStack Class="mb-4">
+                        <!-- Package Image -->
+                        <MudPaper Class="pa-2 rounded-xl" Style="background: radial-gradient(600px 280px at 120% 0, #daccff 0, transparent 60%), radial-gradient(600px 280px at -10% 100%, #ffe2f2 0, transparent 60%), linear-gradient(180deg, #fff, #fbfaff);">
+                            <MudImage Src="@_package.Image"
+                                      Alt="@_package.Title"
+                                      Height="250"
+                                      ObjectFit="ObjectFit.Cover"
+                                      ObjectPosition="ObjectPosition.Center"
+                                      Style="width:100%"
+                                      Class="rounded-xl" />
+                        </MudPaper>
+
+                        <MudText Typo="Typo.h4" Class="px-2">@(_package.Title)</MudText>
+                    </MudStack>
+
+
+                    <!-- Pricing -->
+                    <MudStack Spacing="3">
+                        @if (_package.Pricing.HasDiscount)
+                        {
+                            <div>
+                                <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
+                                    <MudText Typo="Typo.h5" Class="text-decoration-line-through mud-text-secondary">@_package.Pricing.OriginalPrice.ToThousands().ToCurrencyUnitIRT()</MudText>
+                                    <MudChip T="string" Color="Color.Error" Variant="Variant.Filled" Size="Size.Small">@_package.Pricing.DiscountPercent% تخفیف</MudChip>
+                                </MudStack>
+                                <MudText Typo="Typo.h4" Color="Color.Success" Class="fw-700">@_package.Pricing.FinalPrice.ToThousands().ToCurrencyUnitIRT()</MudText>
+                            </div>
+                        }
+                        else
+                        {
+                            <MudText Typo="Typo.h4" Color="Color.Primary" Class="fw-700">@_package.Pricing.FinalPrice.ToThousands().ToCurrencyUnitIRT()</MudText>
+                        }
+
+                        <!-- Purchase Button -->
+                        <MudButton Variant="Variant.Filled"
+                                   Color="Color.Primary"
+                                   FullWidth="true"
+                                   Size="Size.Large"
+                                   OnClick="PurchasePackage"
+                                   Disabled="_isPurchasing">
+                            @(_isPurchasing ? "در حال پردازش..." : "خرید پکیج")
+                        </MudButton>
+
+                        <!-- Package Features -->
+                        <div>
+                            <MudText Typo="Typo.subtitle2" Class="mb-2 fw-600">شامل:</MudText>
+                            <MudStack Spacing="1">
+                                @foreach (var feature in _package.Features)
+                                {
+                                    <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Start">
+                                        <MudIcon Icon="@Icons.Material.Filled.Check" Size="Size.Small" Color="Color.Success" Class="mt-1" />
+                                        <MudText Typo="Typo.body2">@feature</MudText>
+                                        </MudStack>
+                                }
+                            </MudStack>
+                        </div>
+
+                        <!-- Support Info -->
+                        <MudDivider Class="my-2" />
+                        <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
+                            <MudIcon Icon="@Icons.Material.Filled.Support" Size="Size.Small" Color="Color.Info" />
+                            <MudText Typo="Typo.body2">پشتیبانی ۲۴ ساعته</MudText>
+                        </MudStack>
+                    </MudStack>
+                </MudPaper>
+            </MudItem>
+
             <!-- Main Content -->
-            <MudItem xs="12" lg="8">
+            <MudItem xs="12" lg="8" Class="order-2 order-lg-1">
                 <MudPaper Elevation="2" Class="pa-6 rounded-2xl mud-theme-surface">
                     <!-- Package Header -->
                     <MudStack Spacing="4">
@@ -144,76 +214,6 @@ else
                     }
                 </MudPaper>
             </MudItem>
-
-            <!-- Sidebar -->
-            <MudItem xs="12" lg="4">
-                <MudPaper Elevation="2" Class="pa-6 rounded-2xl mud-theme-surface sticky-top">
-                    <MudStack Class="mb-4">
-                        <!-- Package Image -->
-                        <MudPaper Class="pa-2 rounded-xl" Style="background: radial-gradient(600px 280px at 120% 0, #daccff 0, transparent 60%), radial-gradient(600px 280px at -10% 100%, #ffe2f2 0, transparent 60%), linear-gradient(180deg, #fff, #fbfaff);">
-                            <MudImage Src="@_package.Image"
-                                      Alt="@_package.Title"
-                                      Height="250"
-                                      ObjectFit="ObjectFit.Cover"
-                                      ObjectPosition="ObjectPosition.Center"
-                                      Style="width:100%"
-                                      Class="rounded-xl" />
-                        </MudPaper>
-
-                        <MudText Typo="Typo.h4" Class="px-2">@(_package.Title)</MudText>
-                    </MudStack>
-
-
-                    <!-- Pricing -->
-                    <MudStack Spacing="3">
-                        @if (_package.Pricing.HasDiscount)
-                        {
-                            <div>
-                                <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
-                                    <MudText Typo="Typo.h5" Class="text-decoration-line-through mud-text-secondary">@_package.Pricing.OriginalPrice.ToString("N0") تومان</MudText>
-                                    <MudChip T="string" Color="Color.Error" Variant="Variant.Filled" Size="Size.Small">@_package.Pricing.DiscountPercent% تخفیف</MudChip>
-                                </MudStack>
-                                <MudText Typo="Typo.h4" Color="Color.Success" Class="fw-700">@_package.Pricing.FinalPrice.ToString("N0") تومان</MudText>
-                            </div>
-                        }
-                        else
-                        {
-                            <MudText Typo="Typo.h4" Color="Color.Primary" Class="fw-700">@_package.Pricing.FinalPrice.ToString("N0") تومان</MudText>
-                        }
-
-                        <!-- Purchase Button -->
-                        <MudButton Variant="Variant.Filled"
-                                   Color="Color.Primary"
-                                   FullWidth="true"
-                                   Size="Size.Large"
-                                   OnClick="PurchasePackage"
-                                   Disabled="_isPurchasing">
-                            @(_isPurchasing ? "در حال پردازش..." : "خرید پکیج")
-                        </MudButton>
-
-                        <!-- Package Features -->
-                        <div>
-                            <MudText Typo="Typo.subtitle2" Class="mb-2 fw-600">شامل:</MudText>
-                            <MudStack Spacing="1">
-                                @foreach (var feature in _package.Features)
-                                {
-                                    <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Start">
-                                        <MudIcon Icon="@Icons.Material.Filled.Check" Size="Size.Small" Color="Color.Success" Class="mt-1" />
-                                        <MudText Typo="Typo.body2">@feature</MudText>
-                                        </MudStack>
-                                }
-                            </MudStack>
-                        </div>
-
-                        <!-- Support Info -->
-                        <MudDivider Class="my-2" />
-                        <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
-                            <MudIcon Icon="@Icons.Material.Filled.Support" Size="Size.Small" Color="Color.Info" />
-                            <MudText Typo="Typo.body2">پشتیبانی ۲۴ ساعته</MudText>
-                        </MudStack>
-                    </MudStack>
-                </MudPaper>
-            </MudItem>
         </MudGrid>
     </MudContainer>