diff --git a/src/pages/collections/CollectionPage.jsx b/src/pages/collections/CollectionPage.jsx
index 5469be62..32324133 100644
--- a/src/pages/collections/CollectionPage.jsx
+++ b/src/pages/collections/CollectionPage.jsx
@@ -116,22 +116,23 @@ const CollectionPage = () => {
         />
 
         <div className="card my-3 py-2 px-sm-4 px-2">
-          <div className="row align-items-center mx-0">
-            {/* Left side: Date Picker + Show Pending (stacked on mobile) */}
-            <div className="col-12 col-md-6 d-flex flex-column flex-md-row flex-wrap align-items-start">
+          <div className="row align-items-center gap-sm-2 gap-md-0 mx-0">
+            <div className="col-12 col-md-4 d-flex flex-column flex-md-row flex-wrap align-items-start">
               <div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
                 <button
                   type="button"
-                  className={`btn px-2 py-1 rounded-0 text-tiny ${!showPending ? "btn-primary text-white" : ""
-                    }`}
+                  className={`btn px-2 py-1 rounded-0 text-tiny ${
+                    !showPending ? "btn-primary text-white" : ""
+                  }`}
                   onClick={() => setShowPending(false)}
                 >
-                 Show All
+                  Show All
                 </button>
                 <button
                   type="button"
-                  className={`btn px-2 py-1 rounded-0 text-tiny ${showPending ? "btn-primary text-white" : ""
-                    }`}
+                  className={`btn px-2 py-1 rounded-0 text-tiny ${
+                    showPending ? "btn-primary text-white" : ""
+                  }`}
                   onClick={() => setShowPending(true)}
                 >
                   Pending
@@ -139,34 +140,36 @@ const CollectionPage = () => {
               </div>
             </div>
 
-            {/* Right side: Search + Add Button */}
-            <div className="col-12 col-sm-6 d-flex justify-content-end align-items-center gap-2">
-              <FormProvider {...methods}>
-                <DateRangePicker1 howManyDay={180} startField="fromDate"
-                  endField="toDate" />
-              </FormProvider>
+            <div className="col-12 col-sm-8 d-block d-sm-flex justify-content-end ga-2  align-items-center gap-2">
               <input
                 type="search"
                 value={searchText}
                 onChange={(e) => setSearchText(e.target.value)}
                 placeholder="Search Collection"
-                className="form-control form-control-sm w-auto"
+                className="form-control form-control-sm   mt-2 mt-sm-0"
               />
+              <div className="d-flex justify-content-between justify-content-sm-between mt-2 mt-sm-0">
+                <FormProvider {...methods} className="me-3">
+                  <DateRangePicker1
+                    howManyDay={180}
+                    startField="fromDate"
+                    endField="toDate"
+                  />
+                </FormProvider>
 
-              {(canCreate || isAdmin) && (
-                <button
-                  className="btn btn-sm btn-primary"
-                  type="button"
-                  onClick={() =>
-                    setCollection({ isOpen: true, invoiceId: null })
-                  }
-                >
-                  <i className="bx bx-plus-circle me-2"></i>
-                  <span className="d-none d-md-inline-block">
-                    Add New Collection
-                  </span>
-                </button>
-              )}
+                {(canCreate || isAdmin) && (
+                  <button
+                    className="btn btn-sm btn-primary ms-sm-2"
+                    type="button"
+                    onClick={() =>
+                      setCollection({ isOpen: true, invoiceId: null })
+                    }
+                  >
+                    <i className="bx bx-plus-circle me-2"></i>
+                    <span className="d-none d-md-inline-block">Collection</span>
+                  </button>
+                )}
+              </div>
             </div>
           </div>
         </div>