diff --git a/frontend/src/routes/(app)/projects/[id]/settings/+page.server.ts b/frontend/src/routes/(app)/projects/[id]/settings/+page.server.ts
index 057505b..c012a7b 100644
--- a/frontend/src/routes/(app)/projects/[id]/settings/+page.server.ts
+++ b/frontend/src/routes/(app)/projects/[id]/settings/+page.server.ts
@@ -105,7 +105,6 @@ export const actions: Actions = {
 		return { message: 'Custom domain enabled' }
 	},
 	disable_custom_domain: async (event) => {
-		return { message: 'Disable custom domain is not available yet' }
 		const userId = event.locals.user.id
 
 		const existingProject = await db.query.project.findFirst({
@@ -120,6 +119,14 @@ export const actions: Actions = {
 			return fail(400, { message: 'Project not found' })
 		}
 
+		const deleteOldCustomDomain = await deleteCustomDomain(
+			existingProject.custom_domain_id,
+		)
+
+		if (!deleteOldCustomDomain.success) {
+			return { message: 'Cannot delete old custom domain' }
+		}
+
 		await db
 			.update(projectTable)
 			.set({
diff --git a/frontend/src/routes/(app)/projects/[id]/settings/+page.svelte b/frontend/src/routes/(app)/projects/[id]/settings/+page.svelte
index 15302d7..483bcc7 100644
--- a/frontend/src/routes/(app)/projects/[id]/settings/+page.svelte
+++ b/frontend/src/routes/(app)/projects/[id]/settings/+page.svelte
@@ -65,7 +65,7 @@
 </script>
 
 <ScrollArea>
-	<div class="py-4 px-10 space-y-6 max-w-2xl">
+	<div class="max-w-2xl space-y-6 px-10 py-4">
 		<div>
 			<h3 class="text-lg font-medium">Custom Domain</h3>
 			<p class="text-sm text-muted-foreground">
@@ -76,14 +76,14 @@
 
 		<Card.Root>
 			<Card.Header>
-				<div class="flex gap-4 items-center">
+				<div class="flex items-center gap-4">
 					<div class="">
 						{#if data.project.domain_status === 'pending'}
-							<CircleDashedIcon class="w-8 h-8 text-warning" />
+							<CircleDashedIcon class="h-8 w-8 text-warning" />
 						{:else if data.project.domain_status === 'verified'}
-							<CircleCheckBigIcon class="w-8 h-8 text-success" />
+							<CircleCheckBigIcon class="h-8 w-8 text-success" />
 						{:else if data.project.domain_status === 'disabled'}
-							<CircleXIcon class="w-8 h-8 text-destructive" />
+							<CircleXIcon class="h-8 w-8 text-destructive" />
 						{/if}
 					</div>
 					<div class="flex-grow">
@@ -96,8 +96,8 @@
 
 							<Card.Description>
 								<Tooltip.Root>
-									<Tooltip.Trigger class="flex gap-1 items-center">
-										<InfoIcon class="w-4 h-4" />
+									<Tooltip.Trigger class="flex items-center gap-1">
+										<InfoIcon class="h-4 w-4" />
 										{#if data.project.custom_ip}
 											{data.project.custom_ip}
 										{:else if env.PUBLIC_SHORTENER_IP}
@@ -145,7 +145,7 @@
 											Are you absolutely sure?
 										</AlertDialog.Title>
 										<Alert.Root variant="destructive">
-											<TriangleAlertIcon class="w-4 h-4" />
+											<TriangleAlertIcon class="h-4 w-4" />
 											<Alert.Description>
 												Disabling custom domain is not available yet.
 											</Alert.Description>
@@ -173,38 +173,38 @@
 								</AlertDialog.Content>
 							</AlertDialog.Root>
 						{:else}
-							<!-- <AlertDialog.Root> -->
-							<!-- 	<AlertDialog.Trigger asChild let:builder> -->
-							<!-- 		<Button builders={[builder]}> -->
-							<!-- 			Disable Custom Domain -->
-							<!-- 		</Button> -->
-							<!-- 	</AlertDialog.Trigger> -->
-							<!-- 	<AlertDialog.Content> -->
-							<!-- 		<AlertDialog.Header> -->
-							<!-- 			<AlertDialog.Title> -->
-							<!-- 				Are you absolutely sure? -->
-							<!-- 			</AlertDialog.Title> -->
-							<!-- 			<AlertDialog.Description> -->
-							<!-- 				Your custom domain setting will remain. -->
-							<!-- 			</AlertDialog.Description> -->
-							<!-- 		</AlertDialog.Header> -->
-							<!-- 		<AlertDialog.Footer> -->
-							<!-- 			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel> -->
-							<!-- 			<AlertDialog.Action -->
-							<!-- 				on:click={async () => { -->
-							<!-- 					await fetch('?/disable_custom_domain', { -->
-							<!-- 						method: 'POST', -->
-							<!-- 						headers: { -->
-							<!-- 							'Content-Type': 'multipart/form-data', -->
-							<!-- 						}, -->
-							<!-- 					}) -->
-							<!-- 					await invalidateAll() -->
-							<!-- 				}}> -->
-							<!-- 				Continue -->
-							<!-- 			</AlertDialog.Action> -->
-							<!-- 		</AlertDialog.Footer> -->
-							<!-- 	</AlertDialog.Content> -->
-							<!-- </AlertDialog.Root> -->
+							<AlertDialog.Root>
+								<AlertDialog.Trigger asChild let:builder>
+									<Button builders={[builder]}>
+										Disable Custom Domain
+									</Button>
+								</AlertDialog.Trigger>
+								<AlertDialog.Content>
+									<AlertDialog.Header>
+										<AlertDialog.Title>
+											Are you absolutely sure?
+										</AlertDialog.Title>
+										<AlertDialog.Description>
+											Your custom domain setting will remain.
+										</AlertDialog.Description>
+									</AlertDialog.Header>
+									<AlertDialog.Footer>
+										<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+										<AlertDialog.Action
+											on:click={async () => {
+												await fetch('?/disable_custom_domain', {
+													method: 'POST',
+													headers: {
+														'Content-Type': 'multipart/form-data',
+													},
+												})
+												await invalidateAll()
+											}}>
+											Continue
+										</AlertDialog.Action>
+									</AlertDialog.Footer>
+								</AlertDialog.Content>
+							</AlertDialog.Root>
 						{/if}
 					</div>
 				</div>
@@ -235,10 +235,10 @@
 						</div>
 					</Form.Control>
 					<Form.Description
-						class="flex gap-2 justify-between items-center">
+						class="flex items-center justify-between gap-2">
 						<Tooltip.Root>
-							<Tooltip.Trigger class="flex gap-2 items-center">
-								<InfoIcon class="w-4 h-4" />
+							<Tooltip.Trigger class="flex items-center gap-2">
+								<InfoIcon class="h-4 w-4" />
 								Update Project Domain (leave blank to use default)
 							</Tooltip.Trigger>
 							<Tooltip.Content>
@@ -269,7 +269,7 @@
 			<h3 class="text-lg font-medium">Danger Zone</h3>
 		</div>
 		<div class="rounded-lg border border-destructive">
-			<div class="flex justify-between items-center p-4">
+			<div class="flex items-center justify-between p-4">
 				<div class="flex flex-col gap-1">
 					<span class="text-sm">Delete Project</span>
 					<span class="text-xs text-muted-foreground">
@@ -302,7 +302,7 @@
 										{...attrs}
 										bind:value={$formData.deleteShorteners}
 										type="hidden" />
-									<div class="flex gap-2 items-center">
+									<div class="flex items-center gap-2">
 										<Checkbox
 											{...attrs}
 											id="deleteShorteners"
@@ -314,7 +314,7 @@
 								</Form.Control>
 								<Form.FieldErrors />
 							</Form.Field>
-							<div class="flex gap-2 justify-end">
+							<div class="flex justify-end gap-2">
 								<Button
 									variant="outline"
 									on:click={() => (deleteDialogOpen = false)}>