Made the interface smarter then its look

package-lock.json

@@ -8,6 +8,7 @@
       "name": "hooknest",
       "version": "0.1.0",
       "dependencies": {
+        "@next/font": "^14.2.15",
         "lucide-react": "^0.544.0",
         "next": "15.5.4",
         "react": "19.1.0",
@@ -730,6 +731,14 @@
         "fast-glob": "3.3.1"
       }
     },
+    "node_modules/@next/font": {
+      "version": "14.2.15",
+      "resolved": "https://registry.npmjs.org/@next/font/-/font-14.2.15.tgz",
+      "integrity": "sha512-QopYhBmCDDrNDynbi+ZD1hDZXmQXVFo7TmAFp4DQgO/kogz1OLbQ92hPigJbj572eZ3GaaVxNIyYVn3/eAsehg==",
+      "peerDependencies": {
+        "next": "*"
+      }
+    },
     "node_modules/@next/swc-darwin-arm64": {
       "version": "15.5.4",
       "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.4.tgz",

package.json

@@ -9,6 +9,7 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@next/font": "^14.2.15",
     "lucide-react": "^0.544.0",
     "next": "15.5.4",
     "react": "19.1.0",

src/app/components/BrokerManagement.jsx

@@ -12,8 +12,10 @@ export default function BrokerManagementApp() {
     const [form, setForm] = useState({ name: '', broker: '', apiKey: '', secretKey: '', balance: '' });
     const [brokers, setBrokers] = useState([
         { id: 1, name: 'MarketAxess', apiId: '88234', broker: 'Meta5', date: 'Feb 14, 2025', status: 'active', balance: '$150.25', on: true },
-    { id: 2, name: 
+        {
-      'Tradeweb Market', apiId: '89245', broker: 'Angel One', date: 'Mar 01, 2025', status: 'inactive', balance: '$175.50', on: true },
+            id: 2, name:
+                'Tradeweb Market', apiId: '89245', broker: 'Angel One', date: 'Mar 01, 2025', status: 'inactive', balance: '$175.50', on: true
+        },
         { id: 3, name: 'MarketAxess', apiId: '88234', broker: 'Meta5', date: 'Feb 14, 2025', status: 'active', balance: '$150.25', on: false },
         { id: 4, name: 'Tradeweb Markets', apiId: '89245', broker: 'Zerodha', date: 'Mar 01, 2025', status: 'warning', balance: '$175.50', on: true },
         { id: 5, name: 'MarketAxess', apiId: '88234', broker: 'Dhan', date: 'Feb 14, 2025', status: 'active', balance: '$150.25', on: true },
@@ -225,7 +227,7 @@ export default function BrokerManagementApp() {
             </main>
 
             <div className={`fixed inset-0 z-50 transition-opacity duration-300 ${modal.show ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}>
-        <div className="absolute inset-0 bg-black bg-opacity-50" onClick={() => setModal({ show: false, mode: 'add', data: null })}></div>
+                <div className="absolute inset-0 bg-gray-300 opacity-40" onClick={() => setModal({ show: false, mode: 'add', data: null })}></div>
                 <div className={`absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-xl transform transition-transform duration-300 ${modal.show ? 'translate-x-0' : 'translate-x-full'}`}>
                     <div className="h-full flex flex-col">
                         <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
@@ -237,7 +239,6 @@ export default function BrokerManagementApp() {
                                 <X className="w-5 h-5 text-gray-400" />
                             </button>
                         </div>
-
                         <div className="flex-1 overflow-y-auto px-6 py-6 space-y-6 ">
                             <div className="space-y-4">
                                 <h4 className="font-semibold text-gray-900">Broker Details</h4>
@@ -269,7 +270,7 @@ export default function BrokerManagementApp() {
                                     )}
                                 </div>
                                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1.5">API Key</label>
+                                    <label className="block text-sm font-medium text-gray-700 mb-1.5">API ID</label>
                                     <div className="relative">
                                         <input type="text" name="apiKey" value={form.apiKey} onChange={handleChange} placeholder="api_key_1234567890abcdefABCDE"
                                             className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 ${errors.apiKey ? 'border-red-500' : 'border-gray-200'}`}

src/app/layout.js

@@ -1,14 +1,10 @@
-import { Geist, Geist_Mono } from "next/font/google";
+import { Be_Vietnam_Pro} from "@next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
+const BeVietnamPro = Be_Vietnam_Pro({
-  variable: "--font-geist-sans",
+  variable: "--font-be-vietnam-pro",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
   subsets: ["latin"],
+  weight: ['100','200','300','400','500','600','700','800','900'],
 });
 
 export const metadata = {
@@ -18,9 +14,9 @@ export const metadata = {
 
 export default function RootLayout({ children }) {
   return (
-    <html lang="en">
+    <html lang="en" className={BeVietnamPro.variable}>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      
       >
         {children}
       </body>