diff --git a/resources/js/pages/marketing/Packages.tsx b/resources/js/pages/marketing/Packages.tsx
index 57b0cdef..92f619d4 100644
--- a/resources/js/pages/marketing/Packages.tsx
+++ b/resources/js/pages/marketing/Packages.tsx
@@ -1219,15 +1219,15 @@ const PackageDetailGrid: React.FC<PackageDetailGridProps> = ({
         <div className="container mx-auto space-y-12">
           <Tabs defaultValue="endcustomer" className="space-y-8">
             <div className="flex justify-center">
-              <TabsList className="grid w-full max-w-md grid-cols-2 rounded-full bg-white/90 p-1 shadow-lg shadow-black/10 backdrop-blur dark:bg-gray-900/60">
+              <TabsList className="relative z-20 grid w-full max-w-xl grid-cols-2 rounded-full bg-white/90 p-1.5 shadow-lg shadow-black/10 backdrop-blur dark:bg-gray-900/60">
                 <TabsTrigger
-                  className="rounded-full text-xs font-semibold uppercase tracking-[0.2em] text-gray-600 data-[state=active]:bg-gray-900 data-[state=active]:text-white data-[state=active]:shadow-none dark:text-gray-200 dark:data-[state=active]:bg-white dark:data-[state=active]:text-gray-900"
+                  className="rounded-full px-4 py-2 text-sm font-semibold uppercase tracking-[0.2em] text-gray-600 data-[state=active]:bg-gray-900 data-[state=active]:text-white data-[state=active]:shadow-none dark:text-gray-200 dark:data-[state=active]:bg-white dark:data-[state=active]:text-gray-900"
                   value="endcustomer"
                 >
                   {t('packages.tab_endcustomer')}
                 </TabsTrigger>
                 <TabsTrigger
-                  className="rounded-full text-xs font-semibold uppercase tracking-[0.2em] text-gray-600 data-[state=active]:bg-gray-900 data-[state=active]:text-white data-[state=active]:shadow-none dark:text-gray-200 dark:data-[state=active]:bg-white dark:data-[state=active]:text-gray-900"
+                  className="rounded-full px-4 py-2 text-sm font-semibold uppercase tracking-[0.2em] text-gray-600 data-[state=active]:bg-gray-900 data-[state=active]:text-white data-[state=active]:shadow-none dark:text-gray-200 dark:data-[state=active]:bg-white dark:data-[state=active]:text-gray-900"
                   value="reseller"
                 >
                   {t('packages.tab_reseller')}
@@ -1235,7 +1235,7 @@ const PackageDetailGrid: React.FC<PackageDetailGridProps> = ({
               </TabsList>
             </div>
 
-            <TabsContent value="endcustomer" className="space-y-8">
+            <TabsContent value="endcustomer" className="space-y-8 pt-6">
               <div className="md:hidden">
                 <div className="relative">
                   <div className="pointer-events-none absolute inset-y-0 left-0 w-6 bg-gradient-to-r from-white to-transparent dark:from-gray-950" />
@@ -1296,7 +1296,7 @@ const PackageDetailGrid: React.FC<PackageDetailGridProps> = ({
               </motion.div>
             </TabsContent>
 
-            <TabsContent value="reseller" className="space-y-8">
+            <TabsContent value="reseller" className="space-y-8 pt-6">
               <motion.div variants={revealUp} initial="hidden" whileInView="visible" viewport={viewportOnce}>
                 <Card className="rounded-3xl border border-slate-900/40 bg-slate-950/70 text-white shadow-lg">
                   <CardHeader className="gap-3">