diff --git a/apps/dokploy/components/dashboard/settings/git/show-git-providers.tsx b/apps/dokploy/components/dashboard/settings/git/show-git-providers.tsx
index 35d9ef0d7..05273ca2a 100644
--- a/apps/dokploy/components/dashboard/settings/git/show-git-providers.tsx
+++ b/apps/dokploy/components/dashboard/settings/git/show-git-providers.tsx
@@ -53,7 +53,7 @@ export const ShowGitProviders = () => {
 
 	return (
 		<div className="w-full">
-			<Card className="h-full bg-sidebar  p-2.5 rounded-xl  max-w-5xl mx-auto">
+			<Card className="h-full bg-sidebar p-2.5 rounded-xl max-w-5xl mx-auto">
 				<div className="rounded-xl bg-background shadow-md ">
 					<CardHeader className="">
 						<CardTitle className="text-xl flex flex-row gap-2">
@@ -73,14 +73,14 @@ export const ShowGitProviders = () => {
 						) : (
 							<>
 								{data?.length === 0 ? (
-									<div className="flex flex-col items-center gap-3  min-h-[25vh] justify-center">
+									<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
 										<GitBranch className="size-8 self-center text-muted-foreground" />
 										<span className="text-base text-muted-foreground text-center">
 											Create your first Git Provider
 										</span>
 										<div>
 											<div className="flex items-center bg-sidebar p-1 w-full rounded-lg">
-												<div className="flex items-center gap-4 p-3.5 rounded-lg bg-background border  w-full">
+												<div className="flex flex-wrap items-center gap-4 p-3.5 rounded-lg bg-background border w-full [&>button]:grow">
 													<AddGithubProvider />
 													<AddGitlabProvider />
 													<AddBitbucketProvider />
@@ -90,13 +90,13 @@ export const ShowGitProviders = () => {
 										</div>
 									</div>
 								) : (
-									<div className="flex flex-col gap-4  min-h-[25vh]">
+									<div className="flex flex-col gap-4 min-h-[25vh]">
 										<div className="flex flex-col gap-2 rounded-lg ">
 											<span className="text-base font-medium">
 												Available Providers
 											</span>
 											<div className="flex items-center bg-sidebar p-1 w-full rounded-lg">
-												<div className="flex items-center gap-4 p-3.5 rounded-lg bg-background border  w-full">
+												<div className="flex flex-wrap items-center gap-4 p-3.5 rounded-lg bg-background border w-full [&>button]:grow">
 													<AddGithubProvider />
 													<AddGitlabProvider />
 													<AddBitbucketProvider />
@@ -158,7 +158,7 @@ export const ShowGitProviders = () => {
 
 															<div className="flex flex-row gap-1">
 																{!haveGithubRequirements && isGithub && (
-																	<div className="flex flex-col  gap-1">
+																	<div className="flex flex-col gap-1">
 																		<Link
 																			href={`${gitProvider?.github?.githubAppName}/installations/new?state=gh_setup:${gitProvider?.github.githubId}`}
 																			className={buttonVariants({
@@ -171,7 +171,7 @@ export const ShowGitProviders = () => {
 																	</div>
 																)}
 																{haveGithubRequirements && isGithub && (
-																	<div className="flex flex-col  gap-1">
+																	<div className="flex flex-col gap-1">
 																		<Link
 																			href={`${gitProvider?.github?.githubAppName}`}
 																			target="_blank"
@@ -185,7 +185,7 @@ export const ShowGitProviders = () => {
 																	</div>
 																)}
 																{!haveGitlabRequirements && isGitlab && (
-																	<div className="flex flex-col  gap-1">
+																	<div className="flex flex-col gap-1">
 																		<Link
 																			href={getGitlabUrl(
 																				gitProvider.gitlab?.applicationId || "",