diff --git a/src/components/Directory/ManageBucket.jsx b/src/components/Directory/ManageBucket.jsx
new file mode 100644
index 00000000..d3a5d5c3
--- /dev/null
+++ b/src/components/Directory/ManageBucket.jsx
@@ -0,0 +1,226 @@
+import React, { useEffect, useState } from "react";
+import IconButton from "../common/IconButton";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { bucketScheam } from "./DirectorySchema";
+import showToast from "../../services/toastService";
+import Directory from "../../pages/Directory/Directory";
+import { DirectoryRepository } from "../../repositories/DirectoryRepository";
+import { cacheData, getCachedData } from "../../slices/apiDataManager";
+import { useBuckets } from "../../hooks/useDirectory";
+
+const ManageBucket = () =>
+{
+  const [bucketList, setBucketList] = useState([]);
+
+  const { buckets } = useBuckets();
+  const [action_bucket, setAction_bucket] = useState(false);
+  const [isSubmitting, setSubmitting] = useState(false);
+  const [selected_bucket, select_bucket] = useState(null);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(bucketScheam),
+    defaultValues: {
+      name: "",
+      description: "",
+    },
+  } );
+  
+ const onSubmit = async (data) => {
+  setSubmitting(true);
+  try {
+    let response;
+
+    if ( selected_bucket )
+    {
+      let payload ={...data, id:selected_bucket.id}
+      response = await DirectoryRepository.UpdateBuckets(selected_bucket.id, payload);
+      const cache_buckets = getCachedData("buckets") || [];
+      const updatedBuckets = cache_buckets.map((bucket) =>
+        bucket.id === selected_bucket.id ? response?.data : bucket
+      );
+      cacheData( "buckets", updatedBuckets );
+      setBucketList(updatedBuckets);
+      showToast("Bucket Updated Successfully", "success");
+    } else {
+      response = await DirectoryRepository.CreateBuckets(data);
+      const cache_buckets = getCachedData("buckets") || [];
+      const updatedBuckets = [...cache_buckets, response?.data];
+      cacheData( "buckets", updatedBuckets );
+      setBucketList(updatedBuckets);
+      showToast("Bucket Created Successfully", "success");
+    }
+
+    handleBack();
+  } catch (error) {
+    const message =
+      error?.response?.data?.message ||
+      error?.message ||
+      "Error occurred during API call";
+    showToast(message, "error");
+  } 
+};
+
+
+  useEffect(() => {
+    reset({
+      name: selected_bucket?.name || "",
+      description: selected_bucket?.description || "",
+    });
+  }, [ selected_bucket ] );
+
+  useEffect( () =>
+  {
+    setBucketList( buckets )
+  }, [ buckets ] )
+  
+  const handleBack = () => {
+    select_bucket(null);
+    setAction_bucket(false);
+    setSubmitting(false);
+  };
+
+
+  return (
+    <div className="container m-0 p-0" style={{ minHeight: "200px" }}>
+      <div className="d-flex justify-content-center">
+        <p className="fs-h6 fw-semibold m-0">Manage Buckets</p>
+      </div>
+      <div className="d-flex justify-content-between px-2 px-sm-0 mt-5 mt-sm-1 align-items-center">
+        <i
+          className={`fa-solid fa-arrow-left fs-5 cursor-pointer ${
+            action_bucket ? "" : "d-none"
+          }`}
+          onClick={handleBack}
+        ></i>
+        <button
+          type="button"
+          className={`btn btn-xs btn-primary ms-auto ${
+            action_bucket ? "d-none" : ""
+          }`}
+          onClick={() => setAction_bucket(true)}
+        >
+          <i className="bx bx-plus-circle me-2"></i>
+          Add Bucket
+        </button>
+      </div>
+      <div>
+        {!action_bucket ? (
+          <div className="table-responsive text-nowrap pt-1 px-2 px-sm-0">
+            <table className="table px-2">
+              <thead className="p-0">
+                <tr className="p-0">
+                  <th colSpan={2}>
+                    <div className="d-flex justify-content-start align-items-center gap-1">
+                      <IconButton
+                        size={12}
+                        iconClass="fa-solid fa-bucket"
+                        color="info"
+                      />
+                      <span>Name</span>
+                    </div>
+                  </th>
+                  <th className="text-start d-none d-sm-table-cell">
+                    <div className="d-flex align-items-center justify-content-start gap-1">
+                      <IconButton
+                        size={12}
+                        iconClass="fa-solid fa-file-lines"
+                        color="primary"
+                      />
+                      <span>Description</span>
+                    </div>
+                  </th>
+                  <th>
+                    <div className="d-flex align-items-center justify-content-center gap-1">
+                      <IconButton
+                        size={12}
+                        iconClass="fa-solid fa-gear"
+                        color="secondary"
+                      />
+                      <span>Action</span>
+                    </div>
+                  </th>
+                </tr>
+              </thead>
+
+              <tbody className="table-border-bottom-0 overflow-auto">
+                {bucketList.map((bucket) => (
+                  <tr key={bucket.id}>
+                    <td colSpan={2} className="text-start">
+                      {bucket.name}
+                    </td>
+                    <td className="text-start d-none d-sm-table-cell">
+                      {bucket.description}
+                    </td>
+                    <td className="justify-content-center">
+                      <div className="d-flex justify-content-center align-items-center gap-2">
+                        <i
+                          className="bx bx-edit bx-sm text-primary cursor-pointer"
+                          onClick={() => {
+                            select_bucket(bucket);
+                            setAction_bucket(true);
+                          }}
+                        ></i>
+                        <i className="bx bx-trash bx-sm text-danger cursor-pointer"></i>
+                      <i className="bx bx-user-plus  cursor-pointer"></i>
+                        
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit(onSubmit)} className="px-2 px-sm-0">
+            <div className="">
+              <label className="form-label">Bucket Name</label>
+              <input
+                className="form-control form-control-sm"
+                {...register("name")}
+              />
+              {errors.name && (
+                <small className="danger-text">{errors.name.message}</small>
+              )}
+            </div>
+            <div className="">
+              <label className="form-label">Bucket Discription</label>
+              <textarea
+                className="form-control form-control-sm"
+                {...register("description")}
+              />
+              {errors.description && (
+                <small className="danger-text">
+                  {errors.description.message}
+                </small>
+              )}
+            </div>
+            <div className="mt-2 d-flex justify-content-center gap-3">
+                <button
+                  type="reset"
+                className="btn btn-sm btn-secondary"
+                disabled={isSubmitting}
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="btn btn-sm btn-primary"
+                disabled={isSubmitting}
+              >
+                {isSubmitting ? "Please wait..." : "Submit"}
+              </button>
+            </div>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ManageBucket;