diff --git a/client/css/style.css b/client/css/style.css
index 3bedf74..1448ca5 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -32,33 +32,33 @@
 /* Card hover effects */
 .inventory-card {
     transition: all 0.3s ease;
-    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
-    border: 1px solid #e2e8f0;
+    background: linear-gradient(135deg, #0a0a0a 0%, #111111 100%);
+    border: 1px solid #27272a;
 }
 
 .inventory-card:hover {
     transform: translateY(-5px);
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-    border-color: #cbd5e1;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
+    border-color: #3f3f46;
 }
 
 /* Stock level indicators */
 .stock-low {
-    background-color: #fef2f2;
-    color: #991b1b;
-    border: 1px solid #fecaca;
+    background-color: #450a0a;
+    color: #fca5a5;
+    border: 1px solid #7f1d1d;
 }
 
 .stock-medium {
-    background-color: #fffbeb;
-    color: #92400e;
-    border: 1px solid #fed7aa;
+    background-color: #451a03;
+    color: #fed7aa;
+    border: 1px solid #92400e;
 }
 
 .stock-high {
-    background-color: #f0fdf4;
-    color: #166534;
-    border: 1px solid #bbf7d0;
+    background-color: #052e16;
+    color: #bbf7d0;
+    border: 1px solid #166534;
 }
 
 /* Button animations */
@@ -171,15 +171,15 @@
 }
 
 .alert-success {
-    background-color: #ecfdf5;
-    border-color: #a7f3d0;
-    color: #047857;
+    background-color: #052e16;
+    border-color: #166534;
+    color: #bbf7d0;
 }
 
 .alert-error {
-    background-color: #fef2f2;
-    border-color: #fecaca;
-    color: #dc2626;
+    background-color: #450a0a;
+    border-color: #7f1d1d;
+    color: #fca5a5;
 }
 
 /* Card content spacing */
@@ -188,13 +188,13 @@
 }
 
 .card-header {
-    border-bottom: 1px solid #e5e7eb;
+    border-bottom: 1px solid #374151;
     padding-bottom: 0.75rem;
     margin-bottom: 1rem;
 }
 
 .card-footer {
-    border-top: 1px solid #e5e7eb;
+    border-top: 1px solid #374151;
     padding-top: 0.75rem;
     margin-top: 1rem;
 }
\ No newline at end of file
diff --git a/client/index.html b/client/index.html
index 1839788..fc22929 100644
--- a/client/index.html
+++ b/client/index.html
@@ -8,25 +8,25 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ky/0.33.3/index.min.js"></script>
     <link rel="stylesheet" href="css/style.css" />
   </head>
-  <body class="bg-gray-50 min-h-screen">
+  <body class="bg-transparent min-h-screen text-white">
     <div class="container mx-auto px-4 py-8">
       <!-- Header -->
       <div class="mb-8">
-        <h1 class="text-4xl font-bold text-gray-800 mb-2">
-          Inventory Management
-        </h1>
-        <p class="text-gray-600">Manage your inventory items efficiently</p>
-        <p class="text-gray-300">Created by Syahdan & Claude Sonnet 4</p>
+        <h1 class="text-4xl font-bold text-white mb-2">Inventory Management</h1>
+        <p class="text-gray-400">Manage your inventory items efficiently</p>
+        <p class="text-gray-600">Created by Syahdan & Claude Sonnet 4</p>
       </div>
 
       <!-- Add New Item Form -->
-      <div class="bg-white rounded-lg shadow-md p-6 mb-8">
-        <h2 class="text-2xl font-semibold text-gray-800 mb-4">Add New Item</h2>
+      <div
+        class="bg-gray-950 border border-gray-800 rounded-lg shadow-md p-6 mb-8"
+      >
+        <h2 class="text-2xl font-semibold text-white mb-4">Add New Item</h2>
         <form id="addItemForm" class="grid grid-cols-1 md:grid-cols-4 gap-4">
           <div>
             <label
               for="itemName"
-              class="block text-sm font-medium text-gray-700 mb-1"
+              class="block text-sm font-medium text-gray-300 mb-1"
               >Item Name</label
             >
             <input
@@ -34,27 +34,29 @@
               id="itemName"
               name="name"
               required
-              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              class="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-md text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
             />
           </div>
           <div>
             <label
               for="itemPrice"
-              class="block text-sm font-medium text-gray-700 mb-1"
+              class="block text-sm font-medium text-gray-300 mb-1"
               >Price ($)</label
             >
             <input
               type="number"
               id="itemPrice"
               name="price"
+              step="1"
+              min="0"
               required
-              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              class="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-md text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
             />
           </div>
           <div>
             <label
               for="itemQty"
-              class="block text-sm font-medium text-gray-700 mb-1"
+              class="block text-sm font-medium text-gray-300 mb-1"
               >Quantity</label
             >
             <input
@@ -62,13 +64,13 @@
               id="itemQty"
               name="qty"
               required
-              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              class="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-md text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
             />
           </div>
           <div class="flex items-end">
             <button
               type="submit"
-              class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition duration-200"
+              class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-950 transition duration-200"
             >
               Add Item
             </button>
@@ -88,7 +90,7 @@
       <!-- Error Message -->
       <div
         id="errorMessage"
-        class="hidden bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-6"
+        class="hidden bg-red-950 border border-red-800 text-red-300 px-4 py-3 rounded mb-6"
       >
         <span id="errorText"></span>
       </div>
@@ -96,16 +98,14 @@
       <!-- Success Message -->
       <div
         id="successMessage"
-        class="hidden bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-6"
+        class="hidden bg-green-950 border border-green-800 text-green-300 px-4 py-3 rounded mb-6"
       >
         <span id="successText"></span>
       </div>
 
       <!-- Inventory Items Grid -->
       <div class="mb-6">
-        <h2 class="text-2xl font-semibold text-gray-800 mb-4">
-          Inventory Items
-        </h2>
+        <h2 class="text-2xl font-semibold text-white mb-4">Inventory Items</h2>
         <div
           id="inventoryGrid"
           class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
@@ -116,8 +116,8 @@
 
       <!-- Empty State -->
       <div id="emptyState" class="hidden text-center py-12">
-        <div class="text-gray-400 text-6xl mb-4">📦</div>
-        <h3 class="text-xl font-semibold text-gray-600 mb-2">
+        <div class="text-gray-600 text-6xl mb-4">📦</div>
+        <h3 class="text-xl font-semibold text-gray-300 mb-2">
           No items in inventory
         </h3>
         <p class="text-gray-500">Add your first item to get started!</p>
@@ -129,14 +129,16 @@
       id="editModal"
       class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"
     >
-      <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
-        <h3 class="text-lg font-semibold text-gray-800 mb-4">Edit Item</h3>
+      <div
+        class="bg-gray-950 border border-gray-800 rounded-lg shadow-xl max-w-md w-full p-6"
+      >
+        <h3 class="text-lg font-semibold text-white mb-4">Edit Item</h3>
         <form id="editItemForm">
           <input type="hidden" id="editItemId" />
           <div class="mb-4">
             <label
               for="editItemName"
-              class="block text-sm font-medium text-gray-700 mb-1"
+              class="block text-sm font-medium text-gray-300 mb-1"
               >Item Name</label
             >
             <input
@@ -144,27 +146,29 @@
               id="editItemName"
               name="name"
               required
-              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              class="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-md text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
             />
           </div>
           <div class="mb-4">
             <label
               for="editItemPrice"
-              class="block text-sm font-medium text-gray-700 mb-1"
+              class="block text-sm font-medium text-gray-300 mb-1"
               >Price ($)</label
             >
             <input
               type="number"
               id="editItemPrice"
               name="price"
+              step="1"
+              min="0"
               required
-              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              class="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-md text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
             />
           </div>
           <div class="mb-6">
             <label
               for="editItemQty"
-              class="block text-sm font-medium text-gray-700 mb-1"
+              class="block text-sm font-medium text-gray-300 mb-1"
               >Quantity</label
             >
             <input
@@ -172,20 +176,20 @@
               id="editItemQty"
               name="qty"
               required
-              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              class="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-md text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
             />
           </div>
           <div class="flex space-x-3">
             <button
               type="button"
               id="cancelEdit"
-              class="flex-1 bg-gray-300 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition duration-200"
+              class="flex-1 bg-gray-800 text-gray-300 py-2 px-4 rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-gray-950 transition duration-200"
             >
               Cancel
             </button>
             <button
               type="submit"
-              class="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition duration-200"
+              class="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-950 transition duration-200"
             >
               Save Changes
             </button>
diff --git a/client/js/script.js b/client/js/script.js
index 4a53dcf..74f4dff 100644
--- a/client/js/script.js
+++ b/client/js/script.js
@@ -61,7 +61,7 @@ class InventoryManager {
 
       const response = await this.client.get("read");
       const result = await response.json();
-      
+
       if (result.status === "success") {
         this.items = result;
         this.renderItems();
@@ -85,7 +85,7 @@ class InventoryManager {
 
     const newItem = {
       name: formData.get("name").trim(),
-      price: parseFloat(formData.get("price")),
+      price: parseInt(formData.get("price")),
       qty: parseInt(formData.get("qty")),
     };
 
@@ -104,7 +104,7 @@ class InventoryManager {
       });
 
       const result = await response.json();
-      
+
       if (result.status === "success") {
         // Add the new item with the ID returned from the API
         this.items.data.push(result.data);
@@ -132,7 +132,7 @@ class InventoryManager {
     const updatedItem = {
       id: parseInt(id),
       name: formData.get("name").trim(),
-      price: parseFloat(formData.get("price")),
+      price: parseInt(formData.get("price")),
       qty: parseInt(formData.get("qty")),
     };
 
@@ -151,9 +151,11 @@ class InventoryManager {
       });
 
       const result = await response.json();
-      
+
       if (result.status === "success") {
-        const index = this.items.data.findIndex((item) => item.id === parseInt(id));
+        const index = this.items.data.findIndex(
+          (item) => item.id === parseInt(id)
+        );
         if (index !== -1) {
           this.items.data[index] = result.data;
         }
@@ -187,9 +189,11 @@ class InventoryManager {
       });
 
       const result = await response.json();
-      
+
       if (result.status === "success") {
-        this.items.data = this.items.data.filter((item) => item.id !== parseInt(id));
+        this.items.data = this.items.data.filter(
+          (item) => item.id !== parseInt(id)
+        );
         this.renderItems();
         this.showSuccess(result.message || "Item deleted successfully!");
         this.showLoading(false);
@@ -259,14 +263,14 @@ class InventoryManager {
             <div class="inventory-card rounded-lg shadow-md overflow-hidden fade-in">
                 <div class="card-content">
                     <div class="card-header">
-                        <h3 class="text-lg font-semibold text-gray-800 truncate" title="${
+                        <h3 class="text-lg font-semibold text-white truncate" title="${
                           item.name
                         }">
                             ${item.name}
                         </h3>
                         <div class="flex items-center justify-between mt-2">
-                            <span class="text-2xl font-bold text-green-600 price-display">
-                                $${item.price.toFixed(2)}
+                            <span class="text-2xl font-bold text-green-400 price-display">
+                                $${item.price}
                             </span>
                             <span class="status-badge ${stockClass}">
                                 ${stockLevel}
@@ -276,16 +280,16 @@ class InventoryManager {
                     
                     <div class="space-y-3">
                         <div class="flex items-center justify-between">
-                            <span class="text-sm text-gray-600">Quantity:</span>
-                            <span class="text-lg font-semibold text-gray-800">
+                            <span class="text-sm text-gray-400">Quantity:</span>
+                            <span class="text-lg font-semibold text-gray-200">
                                 ${item.qty} units
                             </span>
                         </div>
                         
                         <div class="flex items-center justify-between">
-                            <span class="text-sm text-gray-600">Total Value:</span>
-                            <span class="text-lg font-semibold text-blue-600 price-display">
-                                $${(item.price * item.qty).toFixed(2)}
+                            <span class="text-sm text-gray-400">Total Value:</span>
+                            <span class="text-lg font-semibold text-blue-400 price-display">
+                                $${item.price * item.qty}
                             </span>
                         </div>
                     </div>
@@ -293,11 +297,11 @@ class InventoryManager {
                     <div class="card-footer">
                         <div class="flex space-x-2">
                             <button id="edit-${item.id}" 
-                                    class="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition duration-200 btn-primary">
+                                    class="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-black transition duration-200 btn-primary">
                                 <span class="text-sm font-medium">Edit</span>
                             </button>
                             <button id="delete-${item.id}"
-                                    class="flex-1 bg-red-600 text-white py-2 px-4 rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition duration-200 btn-danger">
+                                    class="flex-1 bg-red-600 text-white py-2 px-4 rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-black transition duration-200 btn-danger">
                                 <span class="text-sm font-medium">Delete</span>
                             </button>
                         </div>
