diff --git a/src/components/Organization/OrgPickerFromSPId.jsx b/src/components/Organization/OrgPickerFromSPId.jsx
index 2b6da36f..0c11fd0a 100644
--- a/src/components/Organization/OrgPickerFromSPId.jsx
+++ b/src/components/Organization/OrgPickerFromSPId.jsx
@@ -12,13 +12,12 @@ import { spridSchema } from "./OrganizationSchema";
 import { OrgCardSkeleton } from "./OrganizationSkeleton";
 import { useQueryClient } from "@tanstack/react-query";
 
-
 // Zod schema: only allow exactly 4 digits
 
 const OrgPickerFromSPId = ({ title, placeholder }) => {
-  const { onClose, startStep, flowType, onOpen, prevStep,orgData } =
+  const { onClose, startStep, flowType, onOpen, prevStep, orgData } =
     useOrganizationModal();
- const clientQuery = useQueryClient()
+  const clientQuery = useQueryClient();
   const {
     register,
     handleSubmit,
@@ -37,33 +36,42 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
   const onSubmit = (formdata) => {
     setSPRID(formdata.spridSearchText);
   };
-  
+
   const handleCrateOrg = () => {
-     clientQuery.removeQueries({queryKey:["organization"]})
-    onOpen({ startStep: 4,orgData:null })
+    clientQuery.removeQueries({ queryKey: ["organization"] });
+    onOpen({ startStep: 4, orgData: null });
   };
   const SP = watch("spridSearchText");
   return (
-    <div className="d-block">
-      <form
-        className="d-flex flex-row gap-6 text-start align-items-center"
-        onSubmit={handleSubmit(onSubmit)}
-      >
-        <div className="d-flex flex-row align-items-center gap-2">
-          <Label className="text-secondary">Search by SPRID</Label>
-          <input
-            type="search"
-            {...register("spridSearchText")}
-            className="form-control form-control-sm w-auto"
-            placeholder="Enter SPRID"
-            maxLength={4}
-          />
-        </div>
+    <div className="d-block mt-4">
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div className="row align-items-center g-2">
+          {/* Input Section */}
+          <div className="col-12 col-md-8 d-block d-md-flex align-items-center gap-2 m-0 text-start">
+            <Label className="text-nowrap mb-1 mb-md-0" required>
+              Search by SPRID
+            </Label>
+            <input
+              type="search"
+              {...register("spridSearchText")}
+              className="form-control form-control-sm flex-grow-1"
+              placeholder="Enter SPRID"
+              maxLength={4}
+            />
+          </div>
 
-        <button type="submit" className="btn btn-sm btn-primary">
-          <i className="bx bx-sm bx-search-alt-2"></i> Search
-        </button>
+          {/* Button Section */}
+          <div className="col-12 col-md-4 text-md-start text-center mt-2 mt-md-0">
+            <button
+              type="submit"
+              className="btn btn-sm btn-primary w-100 w-md-auto"
+            >
+              <i className="bx bx-sm bx-search-alt-2"></i> Search
+            </button>
+          </div>
+        </div>
       </form>
+
       <div className="text-start danger-text">
         {" "}
         {errors.spridSearchText && (
@@ -124,7 +132,7 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
           No organization found for "{SPRID}"
         </div>
       ) : null}
-      <div className="py-12 text-center text-tiny text-black">
+      <div className="py-2 text-center text-tiny text-black">
         <small className="d-block text-secondary">
           Do not have SPRID or could not find organization ?
         </small>