diff --git a/app/(main)/[username]/[repo]/page.tsx b/app/(main)/[username]/[repo]/page.tsx
index 511a0d2..8bd89fa 100644
--- a/app/(main)/[username]/[repo]/page.tsx
+++ b/app/(main)/[username]/[repo]/page.tsx
@@ -6,6 +6,7 @@ import { CloneUrl } from "@/components/clone-url";
 import { Badge } from "@/components/ui/badge";
 import { GitBranch, Lock, Globe, FileCode } from "lucide-react";
 import Link from "next/link";
+import { getPublicServerUrl } from "@/lib/utils";
 
 export default async function RepoPage({ params }: { params: Promise<{ username: string; repo: string }> }) {
   const { username, repo: repoName } = await params;
@@ -95,7 +96,7 @@ export default async function RepoPage({ params }: { params: Promise<{ username:
 }
 
 function EmptyRepoGuide({ username, repoName }: { username: string; repoName: string }) {
-  const cloneUrl = `${process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000"}/api/git/${username}/${repoName}.git`;
+  const cloneUrl = `${getPublicServerUrl()}/api/git/${username}/${repoName}.git`;
 
   return (
     <div className="p-6 space-y-6">
diff --git a/components/clone-url.tsx b/components/clone-url.tsx
index affdf8c..eb2c979 100644
--- a/components/clone-url.tsx
+++ b/components/clone-url.tsx
@@ -4,24 +4,14 @@ import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Check, Copy, ChevronDown } from "lucide-react";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { getPublicServerUrl } from "@/lib/utils";
 
-export function CloneUrl({
-  username,
-  repoName,
-}: {
-  username: string;
-  repoName: string;
-}) {
+export function CloneUrl({ username, repoName }: { username: string; repoName: string }) {
   const [copied, setCopied] = useState(false);
   const [protocol, setProtocol] = useState<"https" | "ssh">("https");
 
-  const baseUrl = process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000";
+  const baseUrl = getPublicServerUrl();
   const httpsUrl = `${baseUrl}/api/git/${username}/${repoName}.git`;
   const sshUrl = `git@gitbruv.local:${username}/${repoName}.git`;
 
@@ -43,34 +33,16 @@ export function CloneUrl({
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent>
-          <DropdownMenuItem onClick={() => setProtocol("https")}>
-            HTTPS
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => setProtocol("ssh")}>
-            SSH
-          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => setProtocol("https")}>HTTPS</DropdownMenuItem>
+          <DropdownMenuItem onClick={() => setProtocol("ssh")}>SSH</DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
       <div className="relative flex-1 min-w-[280px]">
-        <Input
-          value={url}
-          readOnly
-          className="pr-10 font-mono text-xs bg-muted"
-        />
-        <Button
-          variant="ghost"
-          size="icon"
-          className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7"
-          onClick={copyToClipboard}
-        >
-          {copied ? (
-            <Check className="h-3.5 w-3.5 text-primary" />
-          ) : (
-            <Copy className="h-3.5 w-3.5" />
-          )}
+        <Input value={url} readOnly className="pr-10 font-mono text-xs bg-muted" />
+        <Button variant="ghost" size="icon" className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7" onClick={copyToClipboard}>
+          {copied ? <Check className="h-3.5 w-3.5 text-primary" /> : <Copy className="h-3.5 w-3.5" />}
         </Button>
       </div>
     </div>
   );
 }
-
diff --git a/lib/auth-client.ts b/lib/auth-client.ts
index 744953f..05b80e4 100644
--- a/lib/auth-client.ts
+++ b/lib/auth-client.ts
@@ -1,16 +1,12 @@
 import { createAuthClient } from "better-auth/react";
+import { getPublicServerUrl } from "./utils";
 
 export const authClient = createAuthClient({
-  baseURL: process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000",
+  baseURL: getPublicServerUrl(),
 });
 
 export const { signIn, signOut, useSession } = authClient;
 
-export async function signUpWithUsername(data: {
-  email: string;
-  password: string;
-  name: string;
-  username: string;
-}) {
+export async function signUpWithUsername(data: { email: string; password: string; name: string; username: string }) {
   return authClient.signUp.email(data as Parameters<typeof authClient.signUp.email>[0]);
 }
diff --git a/lib/utils.ts b/lib/utils.ts
index bd0c391..37488e1 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -1,6 +1,16 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
+
+export const getPublicServerUrl = () => {
+  if (process.env.NEXT_PUBLIC_VERCEL_ENV === "production") {
+    return `https://${process.env.NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL}`;
+  } else if (process.env.NEXT_PUBLIC_VERCEL_ENV === "preview") {
+    return `https://${process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL}`;
+  } else {
+    return `http://localhost:3000`;
+  }
+};