src/app/admin/page.tsx

@@ -54,6 +54,7 @@ export default function AdminDashboardPage() {
             gridVariant="three-columns-all-equal-width"
             title="" description="" tag="" // Keeping these empty as the page has its own title/description
             className="mt-12"
+            textboxLayout="default"
           >
             <div className="p-6 border rounded-lg shadow-md bg-card group-hover:shadow-lg transition-shadow duration-300">
               <h3 className="text-xl font-semibold text-foreground mb-2">Queue Management</h3>
@@ -73,7 +74,7 @@ export default function AdminDashboardPage() {
             </div>
             <div className="p-6 border rounded-lg shadow-md bg-card group-hover:shadow-lg transition-shadow duration-300">
               <h3 className="text-xl font-semibold text-foreground mb-2">Settings & Configuration</h3>
-              <p className="text-muted-foreground">Configure global settings, service types, branch locations, and notification preferences to tailor the platform to your institution's needs.</p>
+              <p className className="text-muted-foreground">Configure global settings, service types, branch locations, and notification preferences to tailor the platform to your institution's needs.</p>
             </div>
             <div className="p-6 border rounded-lg shadow-md bg-card group-hover:shadow-lg transition-shadow duration-300">
               <h3 className="text-xl font-semibold text-foreground mb-2">Notifications Hub</h3>

src/app/appointments/page.tsx

@@ -51,8 +51,8 @@ export default function AppointmentsPage() {
             ]}
             dashboard={{
               title: "Upcoming Bookings",              stats: [
-                { title: "Today", value: [5, 5, 5], description: "Appointments today" },
-                { title: "This Week", value: [20, 20, 20], description: "Appointments this week" },
+                { title: "Today", values: [5, 5, 5], description: "Appointments today" },
+                { title: "This Week", values: [20, 20, 20], description: "Appointments this week" },
               ],
               logoIcon: Calendar,
               sidebarItems: [
@@ -66,12 +66,11 @@ export default function AppointmentsPage() {
 
         <div id="features" data-section="features">
           <FeatureCardTwentyOne
-            textboxLayout="default"
             useInvertedBackground={false}
             title="How Our Appointment System Works"
             description="Follow these simple steps to book your appointment and avoid queues."
             accordionItems={[
-              { id: "step-1", title: "1. Select Your Service & Institution", content: "Browse available services and choose the institution you need to visit (e.g., bank, hospital, government office)." },
+              { id: "step-1", title: "1. Select Your Service & Institution", content: "Browse available services and choose the institution you need to visit (e.g., bank, bank, hospital, government office)." },
               { id: "step-2", title: "2. Choose Date & Time Slot", content: "View real-time availability on our interactive calendar and select a convenient time slot that fits your schedule." },
               { id: "step-3", title: "3. Confirm Your Booking", content: "Provide your details for booking confirmation and receive an instant notification with your appointment summary." },
               { id: "step-4", title: "4. Get Notified & Arrive", content: "Receive timely SMS reminders and a notification when your turn is approaching, ensuring you arrive just in time." }
@@ -92,6 +91,7 @@ export default function AppointmentsPage() {
             inputPlaceholder="Enter your name or email"
             termsText="By confirming, you agree to our appointment terms and privacy policy."
             onSubmit={() => console.log('Appointment booked!')}
+            useInvertedBackground={false}
           />
         </div>
 

src/app/service-selection/page.tsx

@@ -143,6 +143,7 @@ export default function ServiceSelectionPage() {
               gridVariant="three-columns-all-equal-width"
               animationType="slide-up"
               useInvertedBackground={false}
+              textboxLayout="default"
               cardClassName="relative group cursor-pointer"
               cardNameClassName="text-lg font-semibold"
               cardPriceClassName="text-base text-primary-cta"