diff --git a/apps/web/src/views/settings/components/UpdateDisplayNameForm.tsx b/apps/web/src/views/settings/components/UpdateDisplayNameForm.tsx
index c05d1b07..a77ef2f3 100644
--- a/apps/web/src/views/settings/components/UpdateDisplayNameForm.tsx
+++ b/apps/web/src/views/settings/components/UpdateDisplayNameForm.tsx
@@ -64,19 +64,21 @@ const UpdateDisplayNameForm = ({ displayName }: { displayName: string }) => {
   };
 
   return (
-    <>
-      <div className="mb-4 flex max-w-[350px] items-center gap-2">
+    <div className="flex gap-2">
+      <div className="mb-4 flex w-full max-w-[325px] items-center gap-2">
         <Input {...register("name")} errorMessage={errors.name?.message} />
       </div>
-      <Button
-        onClick={handleSubmit(onSubmit)}
-        variant="primary"
-        disabled={!isDirty || updateDisplayName.isPending}
-        isLoading={updateDisplayName.isPending}
-      >
-        Update
-      </Button>
-    </>
+      <div>
+        <Button
+          onClick={handleSubmit(onSubmit)}
+          variant="primary"
+          disabled={!isDirty || updateDisplayName.isPending}
+          isLoading={updateDisplayName.isPending}
+        >
+          Update
+        </Button>
+      </div>
+    </div>
   );
 };
 
diff --git a/apps/web/src/views/settings/components/UpdateWorkspaceDescriptionForm.tsx b/apps/web/src/views/settings/components/UpdateWorkspaceDescriptionForm.tsx
index 2cfa46b6..48d6d6a0 100644
--- a/apps/web/src/views/settings/components/UpdateWorkspaceDescriptionForm.tsx
+++ b/apps/web/src/views/settings/components/UpdateWorkspaceDescriptionForm.tsx
@@ -71,22 +71,24 @@ const UpdateWorkspaceDescriptionForm = ({
   };
 
   return (
-    <>
-      <div className="mb-4 flex max-w-[350px] items-center gap-2">
+    <div className="flex gap-2">
+      <div className="mb-4 flex w-full max-w-[325px] items-center gap-2">
         <Input
           {...register("description")}
           errorMessage={errors.description?.message}
         />
       </div>
-      <Button
-        onClick={handleSubmit(onSubmit)}
-        variant="primary"
-        disabled={!isDirty || updateWorkspaceDescription.isPending}
-        isLoading={updateWorkspaceDescription.isPending}
-      >
-        Update
-      </Button>
-    </>
+      <div>
+        <Button
+          onClick={handleSubmit(onSubmit)}
+          variant="primary"
+          disabled={!isDirty || updateWorkspaceDescription.isPending}
+          isLoading={updateWorkspaceDescription.isPending}
+        >
+          Update
+        </Button>
+      </div>
+    </div>
   );
 };
 
diff --git a/apps/web/src/views/settings/components/UpdateWorkspaceNameForm.tsx b/apps/web/src/views/settings/components/UpdateWorkspaceNameForm.tsx
index 67bd196d..063d637c 100644
--- a/apps/web/src/views/settings/components/UpdateWorkspaceNameForm.tsx
+++ b/apps/web/src/views/settings/components/UpdateWorkspaceNameForm.tsx
@@ -67,19 +67,21 @@ const UpdateWorkspaceNameForm = ({
   };
 
   return (
-    <>
-      <div className="mb-4 flex max-w-[350px] items-center gap-2">
+    <div className="flex gap-2">
+      <div className="mb-4 flex w-full max-w-[325px] items-center gap-2">
         <Input {...register("name")} errorMessage={errors.name?.message} />
       </div>
-      <Button
-        onClick={handleSubmit(onSubmit)}
-        variant="primary"
-        disabled={!isDirty || updateWorkspaceName.isPending}
-        isLoading={updateWorkspaceName.isPending}
-      >
-        Update
-      </Button>
-    </>
+      <div>
+        <Button
+          onClick={handleSubmit(onSubmit)}
+          variant="primary"
+          disabled={!isDirty || updateWorkspaceName.isPending}
+          isLoading={updateWorkspaceName.isPending}
+        >
+          Update
+        </Button>
+      </div>
+    </div>
   );
 };
 
diff --git a/apps/web/src/views/settings/components/UpdateWorkspaceUrlForm.tsx b/apps/web/src/views/settings/components/UpdateWorkspaceUrlForm.tsx
index be52b660..309cd2c3 100644
--- a/apps/web/src/views/settings/components/UpdateWorkspaceUrlForm.tsx
+++ b/apps/web/src/views/settings/components/UpdateWorkspaceUrlForm.tsx
@@ -102,8 +102,8 @@ const UpdateWorkspaceUrlForm = ({
   };
 
   return (
-    <>
-      <div className="mb-4 flex max-w-[350px] items-center gap-2">
+    <div className="flex gap-2">
+      <div className="mb-4 flex w-full max-w-[325px] items-center gap-2">
         <Input
           {...register("slug")}
           className={`${
@@ -129,21 +129,23 @@ const UpdateWorkspaceUrlForm = ({
           }
         />
       </div>
-      <Button
-        onClick={handleSubmit(onSubmit)}
-        variant="primary"
-        disabled={
-          !isDirty ||
-          updateWorkspaceSlug.isPending ||
-          checkWorkspaceSlugAvailability.isPending ||
-          isWorkspaceSlugAvailable?.isAvailable === false ||
-          isTyping
-        }
-        isLoading={updateWorkspaceSlug.isPending}
-      >
-        Update
-      </Button>
-    </>
+      <div>
+        <Button
+          onClick={handleSubmit(onSubmit)}
+          variant="primary"
+          disabled={
+            !isDirty ||
+            updateWorkspaceSlug.isPending ||
+            checkWorkspaceSlugAvailability.isPending ||
+            isWorkspaceSlugAvailable?.isAvailable === false ||
+            isTyping
+          }
+          isLoading={updateWorkspaceSlug.isPending}
+        >
+          Update
+        </Button>
+      </div>
+    </div>
   );
 };