ui styles added

src/components/table/index.jsx

@@ -7,7 +7,7 @@ function Table({headers, data, isView}) {
         <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
           <tr>
             {headers.map((item) => (
-              <th scope="col" class="px-6 py-3">
+              <th scope="col" class="px-6 py-3 font-bold">
                 {item.title}
               </th>
             ))}

src/pages/home/index.jsx

@@ -10,8 +10,10 @@ function Home() {
   };
 
   return (
-    <div className="container py-10 px-10 mx-0 min-w-full h-screen flex items-center justify-center">
-      <div className="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 ">
+    <div className="container py-10 px-10 mx-0 min-w-full h-screen flex items-center justify-center bg-blue-100 ">
+      <div class="">
+      <h1 class="mb-4 text-4xl font-extrabold leading-none tracking-tight   md:text-5xl lg:text-6xl text-purple-900 mb-10 ">SCORE  CARD</h1>
+      <div className="max-w-sm p-10 bg-white border border-gray-400 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 ">
         <label
           for="email"
           className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
@@ -27,13 +29,14 @@ function Home() {
           onChange={(e) => setId(e.target.value)}
         />
         <button
-          className="bg-purple-900 text-white hover:bg-blue-400 font-bold py-2 px-4 mt-3 rounded"
+          className="bg-purple-900 text-white disabled:bg-purple-900 hover:bg-blue-400 font-bold py-2 px-4 mt-6  rounded text-center ml-15"
           onClick={handleNavigate}
           disabled={!id}
         >
-          Score Card
+          Submit
         </button>
       </div>
+      </div>
     </div>
   );
 }