ui fixed

apps/Frontend/src/pages/payments-page.tsx

@@ -142,17 +142,23 @@ export default function PaymentsPage() {
 
   return (
     <div className="flex h-screen overflow-hidden bg-gray-100">
-      <Sidebar isMobileOpen={isMobileMenuOpen} setIsMobileOpen={setIsMobileMenuOpen} />
-      
+      <Sidebar
+        isMobileOpen={isMobileMenuOpen}
+        setIsMobileOpen={setIsMobileMenuOpen}
+      />
+
       <div className="flex-1 flex flex-col overflow-hidden">
         <TopAppBar toggleMobileMenu={toggleMobileMenu} />
-        
+
         <main className="flex-1 overflow-y-auto p-4">
-          {/* Header */}
-          <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
-            <div>
-              <h1 className="text-2xl font-semibold text-gray-800">Payments</h1>
-              <p className="text-gray-600">Manage patient payments and outstanding balances</p>
+          <div className="container mx-auto space-y-6">
+            <div className="flex justify-between items-center">
+              <div>
+                <h1 className="text-3xl font-bold tracking-tight">Payments</h1>
+                <p className="text-muted-foreground">
+                  Manage patient payments and outstanding balances
+                </p>
+              </div>
             </div>
             
             <div className="mt-4 md:mt-0 flex items-center space-x-2">