diff --git a/app/(main)/manage/categories/components/EditCategories.module.css b/app/(main)/manage/categories/components/EditCategories.module.css
new file mode 100644
index 00000000..69d3a140
--- /dev/null
+++ b/app/(main)/manage/categories/components/EditCategories.module.css
@@ -0,0 +1,70 @@
+.pageContainer {
+  padding: 0;
+}
+
+.title {
+  margin-bottom: 8px;
+}
+
+.subtitle {
+  font-size: 16px;
+  font-weight: 600;
+  color: #718096;
+
+  margin-bottom: 40px;
+}
+
+.topButtons {
+  display: flex;
+  justify-content: flex-end;
+
+  margin-bottom: 40px;
+}
+
+.categoriesContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+
+  width: 100%;
+  max-width: 640px;
+}
+
+.categoryBlock {
+  display: flex;
+  flex-direction: column;
+
+  gap: 16px;
+}
+
+.categoryRow {
+  display: flex;
+  align-items: center;
+
+  gap: 16px;
+}
+
+.subcategoryList {
+  display: flex;
+  flex-direction: column;
+
+  gap: 12px;
+
+  margin-left: 20px;
+}
+
+.subcategoryRow {
+  display: flex;
+  align-items: center;
+
+  gap: 16px;
+}
+
+.inputField {
+  width: 100%;
+  max-width: 320px;
+}
+
+.addSection {
+  margin-top: 8px;
+}
\ No newline at end of file
diff --git a/app/(main)/manage/categories/components/EditCategories.tsx b/app/(main)/manage/categories/components/EditCategories.tsx
index fe837106..8772e259 100644
--- a/app/(main)/manage/categories/components/EditCategories.tsx
+++ b/app/(main)/manage/categories/components/EditCategories.tsx
@@ -1,251 +1,245 @@
 'use client';
 
 import { useState } from 'react';
-import {
-  updateCategory,
-  updateSubcategory,
-  deleteCategory,
-  deleteSubcategory,
-  createCategory,
-  createSubcategory,
-} from '@/app/actions/inventory';
+import { Button, Form } from 'react-bootstrap';
+
+import styles from './EditCategories.module.css';
 
 type Category = {
-  category_id: number;
   name: string;
-  subcategories: {
-    subcategory_id: number;
-    name: string;
-  }[];
+  subcategories: string[];
 };
 
-export default function EditCategories({
-  categories,
-}: {
-  categories: Category[];
-}) {
+const initialCategories: Category[] = [
+  {
+    name: 'Cleaning',
+    subcategories: ['Laundry', 'Surface Cleaners'],
+  },
+  {
+    name: 'Clothing',
+    subcategories: ['Menswear', 'Womenswear'],
+  },
+  {
+    name: 'Food',
+    subcategories: ['Beverages', 'Dry goods', 'Produce'],
+  },
+  {
+    name: 'Home Goods',
+    subcategories: ['Bedding', 'Kitchenware'],
+  },
+  {
+    name: 'Hygiene',
+    subcategories: [],
+  },
+];
+
+export default function EditCategories() {
   const [editing, setEditing] = useState(false);
 
-  const [showAddCategory, setShowAddCategory] = useState(false);
-  const [newCategoryName, setNewCategoryName] = useState('');
+  const [categories, setCategories] =
+    useState<Category[]>(initialCategories);
 
-  const [addingSubcategory, setAddingSubcategory] = useState<number | null>(
-    null,
-  );
-  const [newSubcategoryName, setNewSubcategoryName] = useState('');
+  const updateCategoryName = (
+    categoryIndex: number,
+    value: string
+  ) => {
+    const updated = [...categories];
+
+    updated[categoryIndex].name = value;
+
+    setCategories(updated);
+  };
+
+  const updateSubcategoryName = (
+    categoryIndex: number,
+    subcategoryIndex: number,
+    value: string
+  ) => {
+    const updated = [...categories];
+
+    updated[categoryIndex].subcategories[subcategoryIndex] =
+      value;
+
+    setCategories(updated);
+  };
+
+  const removeCategory = (categoryIndex: number) => {
+    setCategories(
+      categories.filter((_, i) => i !== categoryIndex)
+    );
+  };
+
+  const removeSubcategory = (
+    categoryIndex: number,
+    subcategoryIndex: number
+  ) => {
+    const updated = [...categories];
 
-  const handleCreateCategory = async () => {
-    if (!newCategoryName.trim()) return;
+    updated[categoryIndex].subcategories =
+      updated[categoryIndex].subcategories.filter(
+        (_, i) => i !== subcategoryIndex
+      );
 
-    await createCategory({ name: newCategoryName });
-    setNewCategoryName('');
+    setCategories(updated);
   };
 
-  const handleCreateSubcategory = async (categoryId: number) => {
-    if (!newSubcategoryName.trim()) return;
+  const addCategory = () => {
+    setCategories([
+      ...categories,
+      {
+        name: '',
+        subcategories: [],
+      },
+    ]);
+  };
 
-    await createSubcategory({
-      name: newSubcategoryName,
-      category_id: Number(categoryId),
-    });
+  const addSubcategory = (categoryIndex: number) => {
+    const updated = [...categories];
 
-    setNewSubcategoryName('');
+    updated[categoryIndex].subcategories.push('');
+
+    setCategories(updated);
   };
 
   return (
-    <div>
-      <button onClick={() => setEditing(!editing)}>
-        {editing ? 'Done' : 'Edit'}
-      </button>
+    <div className={styles.pageContainer}>
+      <h1 className={styles.title}></h1>
 
-      {/* Add Category */}
       {editing && (
-        <div style={{ marginTop: '1rem' }}>
-          <button onClick={() => setShowAddCategory(!showAddCategory)}>
-            {showAddCategory ? 'Done' : 'Add'}
-          </button>
-
-          {showAddCategory && (
-            <div>
-              <input
-                placeholder="New category name"
-                value={newCategoryName}
-                onChange={(e) => setNewCategoryName(e.target.value)}
-              />
-
-              {newCategoryName && (
-                <>
-                  <button onClick={handleCreateCategory}>Save</button>
-
-                  <button
-                    onClick={() => {
-                      setNewCategoryName('');
-                    }}
-                  >
-                    Cancel
-                  </button>
-                </>
-              )}
-            </div>
-          )}
-        </div>
+        <p className={styles.subtitle}>
+          Manage inventory categories and subcategories
+        </p>
       )}
 
-      <ul>
-        {categories?.map((category) => (
-          <li key={category.category_id}>
+      <div className={styles.topButtons}>
+        {editing ? (
+          <Button
+            className="btn-submit"
+            onClick={() => setEditing(false)}
+          >
+            Save Changes
+          </Button>
+        ) : (
+          <Button
+            className="btn-submit"
+            onClick={() => setEditing(true)}
+          >
+            Edit
+          </Button>
+        )}
+      </div>
+
+      <div className={styles.categoriesContainer}>
+        {editing && (
+          <Button
+            className="btn-submit align-self-start"
+            onClick={addCategory}
+          >
+            Add Category
+          </Button>
+        )}
+
+        {categories.map((category, categoryIndex) => (
+          <div
+            key={categoryIndex}
+            className={styles.categoryBlock}
+          >
             {editing ? (
-              <EditableField
-                id={category.category_id}
-                name={category.name}
-                type="category"
-              />
-            ) : (
-              category.name
-            )}
-
-            {/* Add Subcategory */}
-            {editing && (
-              <button
-                onClick={() =>
-                  setAddingSubcategory(
-                    addingSubcategory === category.category_id
-                      ? null
-                      : category.category_id,
-                  )
-                }
-              >
-                {addingSubcategory === category.category_id ? 'Done' : 'Add'}
-              </button>
-            )}
+              <>
+                <div className={styles.categoryRow}>
+                  <Form.Control
+                    type="text"
+                    value={category.name}
+                    onChange={(e) =>
+                      updateCategoryName(
+                        categoryIndex,
+                        e.target.value
+                      )
+                    }
+                    className={styles.inputField}
+                  />
+
+                  <Button
+                    variant="outline-danger"
+                    className="btn-remove"
+                    onClick={() =>
+                      removeCategory(categoryIndex)
+                    }
+                  >
+                    Remove
+                  </Button>
+                </div>
+
+                <div className={styles.subcategoryList}>
+                  {category.subcategories.map(
+                    (subcategory, subcategoryIndex) => (
+                      <div
+                        key={subcategoryIndex}
+                        className={
+                          styles.subcategoryRow
+                        }
+                      >
+                        <Form.Control
+                          type="text"
+                          value={subcategory}
+                          onChange={(e) =>
+                            updateSubcategoryName(
+                              categoryIndex,
+                              subcategoryIndex,
+                              e.target.value
+                            )
+                          }
+                          className={
+                            styles.inputField
+                          }
+                        />
+
+                        <Button
+                          variant="outline-danger"
+                          className="btn-remove"
+                          onClick={() =>
+                            removeSubcategory(
+                              categoryIndex,
+                              subcategoryIndex
+                            )
+                          }
+                        >
+                          Remove
+                        </Button>
+                      </div>
+                    )
+                  )}
 
-            {editing && addingSubcategory === category.category_id && (
-              <div>
-                <input
-                  placeholder="New subcategory"
-                  value={newSubcategoryName}
-                  onChange={(e) => setNewSubcategoryName(e.target.value)}
-                />
-
-                {newSubcategoryName && (
-                  <>
-                    <button
+                  <div className={styles.addSection}>
+                    <Button
+                      className="btn-submit"
                       onClick={() =>
-                        handleCreateSubcategory(category.category_id)
+                        addSubcategory(categoryIndex)
                       }
                     >
-                      Save
-                    </button>
-
-                    <button onClick={() => setNewSubcategoryName('')}>
-                      Cancel
-                    </button>
-                  </>
-                )}
-              </div>
-            )}
-
-            <ul>
-              {category.subcategories?.map((sub) => (
-                <li key={sub.subcategory_id}>
-                  {editing ? (
-                    <EditableField
-                      id={sub.subcategory_id}
-                      name={sub.name}
-                      type="subcategory"
-                    />
-                  ) : (
-                    sub.name
+                      Add Subcategory
+                    </Button>
+                  </div>
+                </div>
+              </>
+            ) : (
+              <>
+                <h3>{category.name}</h3>
+
+                <div className={styles.subcategoryList}>
+                  {category.subcategories.map(
+                    (subcategory, subcategoryIndex) => (
+                      <p key={subcategoryIndex}>
+                        {subcategory}
+                      </p>
+                    )
                   )}
-                </li>
-              ))}
-            </ul>
-          </li>
+                </div>
+              </>
+            )}
+          </div>
         ))}
-      </ul>
-    </div>
-  );
-}
-
-function EditableField({
-  id,
-  name,
-  type,
-}: {
-  id: number;
-  name: string;
-  type: 'category' | 'subcategory';
-}) {
-  const [value, setValue] = useState(name);
-  const [isDirty, setIsDirty] = useState(false);
-  const [loading, setLoading] = useState(false);
-
-  const handleSave = async () => {
-    try {
-      setLoading(true);
-
-      if (type === 'category') {
-        await updateCategory(id, { name: value });
-      } else {
-        await updateSubcategory(id, { name: value });
-      }
-
-      setIsDirty(false);
-    } catch (err) {
-      console.error(err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleDelete = async () => {
-    try {
-      setLoading(true);
-
-      if (type === 'category') {
-        await deleteCategory(id);
-      } else {
-        await deleteSubcategory(id);
-      }
-    } catch (err) {
-      console.error(err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
-      <input
-        value={value}
-        disabled={loading}
-        onChange={(e) => {
-          setValue(e.target.value);
-          setIsDirty(e.target.value !== name);
-        }}
-      />
-
-      {isDirty && (
-        <>
-          <button onClick={handleSave} disabled={loading}>
-            {loading ? 'Saving...' : 'Save'}
-          </button>
-
-          <button
-            onClick={() => {
-              setValue(name);
-              setIsDirty(false);
-            }}
-            disabled={loading}
-          >
-            Cancel
-          </button>
-        </>
-      )}
-
-      <button onClick={handleDelete} disabled={loading}>
-        Remove
-      </button>
+      </div>
     </div>
   );
-}
+}
\ No newline at end of file