diff --git a/src/app/investor/investments/[id]/page.tsx b/src/app/investor/investments/[id]/page.tsx
index 71e8bef..9a47fbe 100644
--- a/src/app/investor/investments/[id]/page.tsx
+++ b/src/app/investor/investments/[id]/page.tsx
@@ -104,9 +104,9 @@ export default function InvestorInvestmentDetailPage({ params }: { params: Promi
   };
 
   return (
-    <div className="min-h-screen pb-20 lg:pb-0">
+    <div className="min-h-screen lg:pt-6 pt-0">
       <InvestorNotification isMobile />
-      <div className="pt-18 lg:pt-0 p-4 lg:p-6 max-w-8xl mx-auto mb-20 lg:mb-0">
+      <div className="pt-18 lg:pt-0 p-4 lg:p-6 max-w-8xl mx-auto mb-12 lg:mb-0">
         <div className="mb-6">
           <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
             <div className="flex items-center gap-3">
@@ -114,17 +114,33 @@ export default function InvestorInvestmentDetailPage({ params }: { params: Promi
                 <ArrowLeft className="w-5 h-5 text-slate-600" />
               </button>
               <div>
-                <div className="flex items-center gap-2">
+                <div className="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
                   <h1 className="text-xl lg:text-2xl font-bold text-slate-800 flex items-center gap-2">
-                    <Target className="w-5 h-5 lg:w-6 lg:h-6 text-investor" />{investment.planName}
+                    <Target className="w-5 h-5 lg:w-6 lg:h-6 text-investor" />
+                    {investment.planName}
                   </h1>
-                  <span className={`px-2.5 py-1 rounded-full text-xs font-bold ${style.badge} capitalize`}>{investment.planType}</span>
-                  <span className={`px-2.5 py-1 rounded-full text-xs font-bold ${investment.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-slate-100 text-slate-600'} capitalize`}>{investment.status}</span>
+
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span
+                      className={`px-2.5 py-1 rounded-full text-xs font-bold ${style.badge} capitalize`}
+                    >
+                      {investment.planType}
+                    </span>
+
+                    <span
+                      className={`px-2.5 py-1 rounded-full text-xs font-bold ${investment.status === 'active'
+                        ? 'bg-green-100 text-green-700'
+                        : 'bg-slate-100 text-slate-600'
+                        } capitalize`}
+                    >
+                      {investment.status}
+                    </span>
+                  </div>
                 </div>
                 <p className="text-sm text-slate-500 mt-1">ID: #{investment.id?.toUpperCase()} • Started: {investment.startDate}</p>
               </div>
             </div>
-            <button onClick={() => toast.success('Download started')} className="px-4 py-2.5 bg-white border border-slate-200 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 flex items-center gap-2 shadow-sm">
+            <button onClick={() => toast.success('Download started')} className="px-4 py-2.5 bg-white border border-slate-200 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 flex justify-center lg:justify-start items-center gap-2 shadow-sm">
               <Download className="w-4 h-4" /> Download
             </button>
           </div>
@@ -147,7 +163,7 @@ export default function InvestorInvestmentDetailPage({ params }: { params: Promi
               </div>
               <p className="text-xs text-slate-500 font-medium">Total Return</p>
             </div>
-            <p className="text-xl lg:text-2xl font-bold text-green-600">৳{(investment.actualEarnings / 1000).toFixed(0)}k</p>
+            <p className="text-xl lg:text-2xl font-bold text-green-600">৳{investment.actualEarnings.toLocaleString()}</p>
           </div>
           <div className="bg-white rounded-xl p-4 lg:p-5 border border-amber-200 shadow-sm bg-amber-50/50">
             <div className="flex items-center gap-2 mb-2">
@@ -173,20 +189,18 @@ export default function InvestorInvestmentDetailPage({ params }: { params: Promi
         </div>
 
         <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
-          <div className="flex overflow-x-auto border-b border-slate-100">
+          <div className="flex overflow-x-auto border-b border-slate-100 justify-between sm:justify-start px-4 lg:px-0">
             {[
               { key: 'overview', label: 'Overview', icon: FileText, count: null },
               { key: 'bikes', label: 'Bikes', icon: Bike, count: demoBikes.length },
-              { key: 'payments', label: 'Payments', icon: Wallet, count: null },
               { key: 'transactions', label: 'Transactions', icon: CreditCard, count: demoTransactions.length },
               { key: 'statement', label: 'Statement', icon: Receipt, count: null },
-
             ].map((tab) => {
               const Icon = tab.icon;
               return (
                 <button key={tab.key} onClick={() => setActiveTab(tab.key)}
-                  className={`px-3 lg:px-6 py-3 text-sm font-semibold capitalize whitespace-nowrap transition-colors flex items-center gap-2 ${activeTab === tab.key ? 'text-investor bg-investor/5 border-b-2 border-investor' : 'text-slate-500 hover:text-slate-700 hover:bg-slate-50'}`}>
-                  <Icon className="w-4 h-4" />
+                  className={`px-4 lg:px-6 py-3 w-full lg:w-auto text-sm font-semibold capitalize whitespace-nowrap transition-colors flex justify-center items-center gap-2 ${activeTab === tab.key ? 'text-investor bg-investor/5 border-b-2 border-investor' : 'text-slate-500 hover:text-slate-700 hover:bg-slate-50'}`}>
+                  <Icon className="w-4 h-4 " />
                   <span className="hidden lg:inline">{tab.label}</span>
                   {tab.count !== null && <span className={`px-1.5 py-0.5 rounded text-[10px] font-bold ${activeTab === tab.key ? 'bg-investor text-white' : 'bg-slate-200 text-slate-600'}`}>{tab.count}</span>}
                 </button>
@@ -267,6 +281,41 @@ export default function InvestorInvestmentDetailPage({ params }: { params: Promi
                     </div>
                   </div>
                 </div>
+
+                <div className="bg-green-50 border border-green-200 rounded-xl p-5">
+                  <div className="flex items-center justify-between mb-4">
+                    <h4 className="font-semibold text-green-800 flex items-center gap-2">
+                      <DollarSign className="w-4 h-4 text-green-600" /> Payment History
+                    </h4>
+                    <button onClick={() => setShowPaymentModal(true)} className="px-3 py-1.5 bg-green-600 text-white text-xs font-bold rounded-lg hover:bg-green-700 transition-colors">
+                      Make Payment
+                    </button>
+                  </div>
+                  <div className="overflow-x-auto">
+                    <table className="w-full text-sm">
+                      <thead className="bg-white/50">
+                        <tr>
+                          <th className="px-3 py-2 text-left text-xs font-semibold text-slate-500">Date</th>
+                          <th className="px-3 py-2 text-left text-xs font-semibold text-slate-500">Type</th>
+                          <th className="px-3 py-2 text-left text-xs font-semibold text-slate-500">Method</th>
+                          <th className="px-3 py-2 text-right text-xs font-semibold text-slate-500">Amount</th>
+                          <th className="px-3 py-2 text-center text-xs font-semibold text-slate-500">Status</th>
+                        </tr>
+                      </thead>
+                      <tbody className="divide-y divide-green-100">
+                        {paymentHistory.map((payment) => (
+                          <tr key={payment.id} className="bg-white/50">
+                            <td className="px-3 py-2 text-slate-600">{payment.date}</td>
+                            <td className="px-3 py-2"><span className="px-2 py-0.5 rounded text-[10px] font-bold uppercase bg-slate-100 text-slate-600">{payment.type}</span></td>
+                            <td className="px-3 py-2 text-slate-600">{payment.method}</td>
+                            <td className="px-3 py-2 text-right font-bold text-green-700">৳{payment.amount.toLocaleString()}</td>
+                            <td className="px-3 py-2 text-center"><span className="px-2 py-0.5 rounded text-[10px] font-bold uppercase bg-green-100 text-green-700">{payment.status}</span></td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
               </div>
             )}