diff --git a/frontend/.env.example b/frontend/.env.example
index 7cdbf76..77de6e2 100644
--- a/frontend/.env.example
+++ b/frontend/.env.example
@@ -32,4 +32,13 @@ PRIVATE_GOOGLE_CLIENT_SECRET=
 # Stripe
 PRIVATE_STRIPE_SECRET_KEY=
 PRIVATE_STRIPE_WEBHOOK_SECRET=
-PRIVATE_PRO_PLAN_PRICE_ID=
\ No newline at end of file
+PRIVATE_PRO_PLAN_PRICE_ID=
+
+# Tigris/S3
+PRIVATE_AWS_WEBHOOK_TOKEN=
+PRIVATE_AWS_BUCKET_NAME=
+PRIVATE_AWS_ACCESS_KEY_ID=
+PRIVATE_AWS_SECRET_ACCESS_KEY=
+PRIVATE_AWS_ENDPOINT_URL_S3=
+PRIVATE_AWS_ENDPOINT_URL_IAM=
+PRIVATE_AWS_REGION=auto
\ No newline at end of file
diff --git a/frontend/bun.lockb b/frontend/bun.lockb
index e232ceb..b928e42 100755
Binary files a/frontend/bun.lockb and b/frontend/bun.lockb differ
diff --git a/frontend/drizzle/0028_hard_red_shift.sql b/frontend/drizzle/0028_hard_red_shift.sql
new file mode 100644
index 0000000..634e656
--- /dev/null
+++ b/frontend/drizzle/0028_hard_red_shift.sql
@@ -0,0 +1,15 @@
+CREATE TABLE IF NOT EXISTS "file" (
+	"id" text PRIMARY KEY NOT NULL,
+	"user_id" text NOT NULL,
+	"project_id" text,
+	"key" text NOT NULL,
+	"name" text NOT NULL,
+	"size" bigint DEFAULT 0 NOT NULL,
+	"etag" text NOT NULL,
+	"created_at_epoch" bigint NOT NULL,
+	"updated_at_epoch" bigint NOT NULL
+);
+--> statement-breakpoint
+ALTER TABLE "shortener" ADD COLUMN "is_file_upload" boolean DEFAULT false NOT NULL;--> statement-breakpoint
+ALTER TABLE "shortener" ADD COLUMN "file_path" text;--> statement-breakpoint
+ALTER TABLE "user" ADD COLUMN "file_storage_usage_in_byte" bigint DEFAULT 0 NOT NULL;
\ No newline at end of file
diff --git a/frontend/drizzle/meta/0028_snapshot.json b/frontend/drizzle/meta/0028_snapshot.json
new file mode 100644
index 0000000..41d70a7
--- /dev/null
+++ b/frontend/drizzle/meta/0028_snapshot.json
@@ -0,0 +1,542 @@
+{
+  "id": "ce042384-c48f-4a7b-b067-8808e73834d6",
+  "prevId": "c91acbf2-ca0a-4726-b2b2-70fd1f8bd9ff",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.email_verification_token": {
+      "name": "email_verification_token",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(255)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "public.file": {
+      "name": "file",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "project_id": {
+          "name": "project_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "key": {
+          "name": "key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "size": {
+          "name": "size",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 0
+        },
+        "etag": {
+          "name": "etag",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at_epoch": {
+          "name": "created_at_epoch",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updated_at_epoch": {
+          "name": "updated_at_epoch",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "public.project": {
+      "name": "project",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "uuid": {
+          "name": "uuid",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "gen_random_uuid()"
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "qr_background": {
+          "name": "qr_background",
+          "type": "varchar(7)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'#ffffff'"
+        },
+        "qr_foreground": {
+          "name": "qr_foreground",
+          "type": "varchar(7)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'#000000'"
+        },
+        "domain_status": {
+          "name": "domain_status",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'verified'"
+        },
+        "enable_custom_domain": {
+          "name": "enable_custom_domain",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "custom_ip": {
+          "name": "custom_ip",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "custom_domain_id": {
+          "name": "custom_domain_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "custom_domain": {
+          "name": "custom_domain",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "qr_corner_square_style": {
+          "name": "qr_corner_square_style",
+          "type": "varchar",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'square'"
+        },
+        "qr_dot_style": {
+          "name": "qr_dot_style",
+          "type": "varchar",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'square'"
+        },
+        "qr_image_base64": {
+          "name": "qr_image_base64",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "public.session": {
+      "name": "session",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(255)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "public.shortener": {
+      "name": "shortener",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "link": {
+          "name": "link",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "ios": {
+          "name": "ios",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "ios_link": {
+          "name": "ios_link",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "android": {
+          "name": "android",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "android_link": {
+          "name": "android_link",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "code": {
+          "name": "code",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "active": {
+          "name": "active",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": true
+        },
+        "project_id": {
+          "name": "project_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "is_file_upload": {
+          "name": "is_file_upload",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "file_path": {
+          "name": "file_path",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "public.user": {
+      "name": "user",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "uuid": {
+          "name": "uuid",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "gen_random_uuid()"
+        },
+        "email_verified": {
+          "name": "email_verified",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "google_id": {
+          "name": "google_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "username": {
+          "name": "username",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "password": {
+          "name": "password",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "plan": {
+          "name": "plan",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'free'"
+        },
+        "stripe_customer_id": {
+          "name": "stripe_customer_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "qr_background": {
+          "name": "qr_background",
+          "type": "varchar(7)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'#fff'"
+        },
+        "qr_foreground": {
+          "name": "qr_foreground",
+          "type": "varchar(7)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'#000'"
+        },
+        "qr_corner_square_style": {
+          "name": "qr_corner_square_style",
+          "type": "varchar",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'square'"
+        },
+        "qr_dot_style": {
+          "name": "qr_dot_style",
+          "type": "varchar",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'square'"
+        },
+        "qr_image_base64": {
+          "name": "qr_image_base64",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "file_storage_usage_in_byte": {
+          "name": "file_storage_usage_in_byte",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 0
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "user_email_unique": {
+          "name": "user_email_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "email"
+          ]
+        }
+      }
+    },
+    "public.visitor": {
+      "name": "visitor",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "shortener_id": {
+          "name": "shortener_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "country_code": {
+          "name": "country_code",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "country": {
+          "name": "country",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "city": {
+          "name": "city",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "device_type": {
+          "name": "device_type",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "''"
+        },
+        "device_vendor": {
+          "name": "device_vendor",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "''"
+        },
+        "os": {
+          "name": "os",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "''"
+        },
+        "browser": {
+          "name": "browser",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "''"
+        },
+        "referer": {
+          "name": "referer",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "''"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    }
+  },
+  "enums": {},
+  "schemas": {},
+  "sequences": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}
\ No newline at end of file
diff --git a/frontend/drizzle/meta/_journal.json b/frontend/drizzle/meta/_journal.json
index 6f3235e..c8d597b 100644
--- a/frontend/drizzle/meta/_journal.json
+++ b/frontend/drizzle/meta/_journal.json
@@ -197,6 +197,13 @@
       "when": 1726769139213,
       "tag": "0027_funny_wasp",
       "breakpoints": true
+    },
+    {
+      "idx": 28,
+      "version": "7",
+      "when": 1734847628427,
+      "tag": "0028_hard_red_shift",
+      "breakpoints": true
     }
   ]
 }
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
index f4ae8fc..3b1ab8e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -40,6 +40,8 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@aws-sdk/client-s3": "^3.705.0",
+		"@aws-sdk/s3-request-presigner": "^3.705.0",
 		"@lucia-auth/adapter-drizzle": "^1.0.7",
 		"@prgm/sveltekit-progress-bar": "^2.0.0",
 		"@stripe/stripe-js": "^4.3.0",
@@ -62,6 +64,7 @@
 		"qr-code-styling": "^1.6.0-rc.1",
 		"resend": "^3.4.0",
 		"stripe": "^16.8.0",
+		"svelte-file-dropzone": "^2.0.9",
 		"svelte-sonner": "^0.3.28",
 		"sveltekit-superforms": "^2.20.0",
 		"tailwind-merge": "^2.5.4",
diff --git a/frontend/src/lib/components/app-sidebar.svelte b/frontend/src/lib/components/app-sidebar.svelte
index ea915d2..5cf3916 100644
--- a/frontend/src/lib/components/app-sidebar.svelte
+++ b/frontend/src/lib/components/app-sidebar.svelte
@@ -99,7 +99,7 @@
 	</Sidebar.Content>
 	<Sidebar.Footer>
 		{#if sidebar.open}
-			<Button href="/dashboard-new" variant="outline">
+			<Button href="/dashboard" variant="outline">
 				<SparkleIcon class="text-brand" />
 				Try New Dashboard
 			</Button>
diff --git a/frontend/src/lib/components/nav-user.svelte b/frontend/src/lib/components/nav-user.svelte
index 591b360..3e52f51 100644
--- a/frontend/src/lib/components/nav-user.svelte
+++ b/frontend/src/lib/components/nav-user.svelte
@@ -97,7 +97,7 @@
 					<DropdownMenu.Separator />
 				{/if}
 				<DropdownMenu.Group>
-					<a href="/dashboard/settings/account">
+					<a href="/dashboard/account/settings">
 						<DropdownMenu.Item>
 							<BadgeCheck />
 							Account
diff --git a/frontend/src/lib/components/ui/input/input.svelte b/frontend/src/lib/components/ui/input/input.svelte
index 598829f..7616556 100644
--- a/frontend/src/lib/components/ui/input/input.svelte
+++ b/frontend/src/lib/components/ui/input/input.svelte
@@ -1,22 +1,35 @@
 <script lang="ts">
-	import type { HTMLInputAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLInputAttributes } from 'svelte/elements'
+	import type { WithElementRef } from 'bits-ui'
+	import { cn } from '$lib/utils'
 
 	let {
 		ref = $bindable(null),
 		value = $bindable(),
+		files = $bindable(),
 		class: className,
+		type,
 		...restProps
-	}: WithElementRef<HTMLInputAttributes> = $props();
+	}: WithElementRef<
+		HTMLInputAttributes & { files?: FileList }
+	> = $props()
+	const defaultClass =
+		'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50'
 </script>
 
-<input
-	bind:this={ref}
-	class={cn(
-		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-		className
-	)}
-	bind:value
-	{...restProps}
-/>
+{#if type === 'file'}
+	<input
+		bind:this={ref}
+		type="file"
+		class={cn(defaultClass, className)}
+		bind:value
+		bind:files
+		{...restProps} />
+{:else}
+	<input
+		bind:this={ref}
+		{type}
+		class={cn(defaultClass, className)}
+		bind:value
+		{...restProps} />
+{/if}
diff --git a/frontend/src/lib/db/schema.ts b/frontend/src/lib/db/schema.ts
index 365cd32..23bbff9 100644
--- a/frontend/src/lib/db/schema.ts
+++ b/frontend/src/lib/db/schema.ts
@@ -6,6 +6,9 @@ import {
 	uuid,
 	boolean,
 	text,
+	integer,
+	numeric,
+	bigint,
 } from 'drizzle-orm/pg-core'
 import { relations } from 'drizzle-orm'
 
@@ -40,6 +43,11 @@ export const user = pgTable('user', {
 		.notNull()
 		.default('square'),
 	qrImageBase64: text('qr_image_base64'),
+	fileStorageUsageInByte: bigint('file_storage_usage_in_byte', {
+		mode: 'number',
+	})
+		.notNull()
+		.default(0),
 })
 
 export const shortener = pgTable('shortener', {
@@ -56,6 +64,24 @@ export const shortener = pgTable('shortener', {
 	userId: text('user_id').notNull(),
 	active: boolean('active').notNull().default(true),
 	projectId: text('project_id'),
+	is_file_upload: boolean('is_file_upload').notNull().default(false),
+	file_path: text('file_path'),
+})
+
+export const file = pgTable('file', {
+	id: text('id').primaryKey(),
+	userId: text('user_id').notNull(),
+	projectId: text('project_id'),
+	key: text('key').notNull(),
+	name: text('name').notNull(),
+	size: bigint('size', {
+		mode: 'number',
+	})
+		.notNull()
+		.default(0),
+	eTag: text('etag').notNull(),
+	createdAt: bigint('created_at_epoch', { mode: 'number' }).notNull(),
+	updatedAt: bigint('updated_at_epoch', { mode: 'number' }).notNull(),
 })
 
 export const project = pgTable('project', {
@@ -180,3 +206,10 @@ export const sessionRelations = relations(session, ({ one }) => ({
 		references: [user.id],
 	}),
 }))
+
+export const fileRelations = relations(file, ({ one }) => ({
+	shortener: one(shortener, {
+		fields: [file.key],
+		references: [shortener.file_path],
+	}),
+}))
diff --git a/frontend/src/lib/server/types.ts b/frontend/src/lib/server/types.ts
index 07ae941..2561bd1 100644
--- a/frontend/src/lib/server/types.ts
+++ b/frontend/src/lib/server/types.ts
@@ -10,3 +10,19 @@ export const userCreateSchema = z.object({
 	password: z.string(),
 	password_confirm: z.string(),
 })
+
+export type TigrisNotificationPayload = {
+	events: {
+		eventVersion: string
+		eventSource: string
+		eventName: 'OBJECT_CREATED_PUT' | 'OBJECT_DELETED'
+		eventTime: string
+		bucket: string
+		object: {
+			key: string
+			size: number
+			eTag: string
+		}
+	}[]
+	sendTime: string
+}
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 6e17922..0456422 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -91,3 +91,32 @@ Number.prototype.toDecimalPoint = function (decimal: number) {
 export const isAlphanumeric = (str: string) => {
 	return str.match('^[A-Za-z0-9]+$')
 }
+
+// https://stackoverflow.com/questions/10420352/converting-file-size-in-bytes-to-human-readable-string
+export function byteToHumanReadable(
+	bytes: number,
+	si = true,
+	dp = 1,
+) {
+	const thresh = si ? 1000 : 1024
+
+	if (Math.abs(bytes) < thresh) {
+		return bytes + ' B'
+	}
+
+	const units = si
+		? ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+		: ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
+	let u = -1
+	const r = 10 ** dp
+
+	do {
+		bytes /= thresh
+		++u
+	} while (
+		Math.round(Math.abs(bytes) * r) / r >= thresh &&
+		u < units.length - 1
+	)
+
+	return bytes.toFixed(dp) + ' ' + units[u]
+}
diff --git a/frontend/src/routes/(app)/dashboard-new/+layout.server.ts b/frontend/src/routes/(app)/dashboard-new/+layout.server.ts
deleted file mode 100644
index c274829..0000000
--- a/frontend/src/routes/(app)/dashboard-new/+layout.server.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { LayoutServerLoad } from './$types'
-
-export const load = (async (event) => {
-	const user = event.locals.user
-	return { user }
-}) satisfies LayoutServerLoad
diff --git a/frontend/src/routes/(app)/dashboard-new/+page.server.ts b/frontend/src/routes/(app)/dashboard-new/+page.server.ts
deleted file mode 100644
index c97e0c9..0000000
--- a/frontend/src/routes/(app)/dashboard-new/+page.server.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { redirect } from '@sveltejs/kit'
-import type { PageServerLoad, Actions } from './$types'
-
-export const load = (async (event) => {
-	redirect(302, '/dashboard-new/project/personal')
-}) satisfies PageServerLoad
-
-export const actions = {
-	signout: async (event) => {
-		console.log('signout')
-		event.cookies.delete('token', { path: '/' })
-		redirect(303, '/login')
-	},
-} satisfies Actions
diff --git a/frontend/src/routes/(app)/dashboard-new/account/settings/+page.server.ts b/frontend/src/routes/(app)/dashboard-new/account/settings/+page.server.ts
deleted file mode 100644
index 3cddff4..0000000
--- a/frontend/src/routes/(app)/dashboard-new/account/settings/+page.server.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { redirect } from '@sveltejs/kit'
-import type { PageServerLoad } from './$types'
-
-export const load = (async () => {
-	redirect(300, '/dashboard-new/account/settings/account')
-}) satisfies PageServerLoad
diff --git a/frontend/src/routes/(app)/dashboard/+layout.server.ts b/frontend/src/routes/(app)/dashboard/+layout.server.ts
index e258a58..c274829 100644
--- a/frontend/src/routes/(app)/dashboard/+layout.server.ts
+++ b/frontend/src/routes/(app)/dashboard/+layout.server.ts
@@ -1,23 +1,6 @@
-import { env } from '$env/dynamic/public'
-import { db } from '$lib/db'
 import type { LayoutServerLoad } from './$types'
 
 export const load = (async (event) => {
 	const user = event.locals.user
-
-	const projects = await db.query.project.findMany({
-		where: (project, { eq }) => eq(project.userId, user.id),
-	})
-
-	const breadcrumbs = [{ name: 'Home', path: '/dashboard' }]
-
-	const page_title = 'Home'
-
-	return {
-		shortener_url: env.PUBLIC_SHORTENER_URL,
-		user: user,
-		breadcrumbs,
-		page_title,
-		projects,
-	}
+	return { user }
 }) satisfies LayoutServerLoad
diff --git a/frontend/src/routes/(app)/dashboard/+layout.svelte b/frontend/src/routes/(app)/dashboard/+layout.svelte
deleted file mode 100644
index dd12220..0000000
--- a/frontend/src/routes/(app)/dashboard/+layout.svelte
+++ /dev/null
@@ -1,127 +0,0 @@
-<script lang="ts">
-	import { page } from '$app/stores'
-	import ThemeToggle from '$lib/components/theme-toggle.svelte'
-	import * as Avatar from '$lib/components/ui/avatar'
-	import * as Breadcrumb from '$lib/components/ui/breadcrumb'
-	import { Button } from '$lib/components/ui/button'
-	import * as Dialog from '$lib/components/ui/dialog'
-	import * as DropdownMenu from '$lib/components/ui/dropdown-menu'
-	import * as Select from '$lib/components/ui/select/index.js'
-	import {
-		Blocks,
-		CreditCardIcon,
-		Home,
-		Link,
-		Settings,
-		UserIcon,
-	} from 'lucide-svelte'
-	import AppSidebar from '$lib/components/app-sidebar.svelte'
-	import { Separator } from '$lib/components/ui/separator/index.js'
-	import * as Sidebar from '$lib/components/ui/sidebar/index.js'
-
-	import { goto } from '$app/navigation'
-	import { Loader2, User } from 'lucide-svelte'
-	import { toast } from 'svelte-sonner'
-
-	let dialogOpen = $state(false)
-	let isLoading = $state(false)
-
-	const logout = async () => {
-		isLoading = true
-
-		await fetch('/api/logout', { method: 'post' })
-
-		isLoading = false
-		dialogOpen = false
-		toast.success('Logged Out Successfully')
-		goto('/login')
-	}
-
-	let { data, children } = $props()
-</script>
-
-<Sidebar.Provider>
-	<AppSidebar user={data.user} />
-	<Sidebar.Inset>
-		<header
-			class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
-			<Sidebar.Trigger class="-ml-1" />
-			<Separator orientation="vertical" class="mr-2 h-4" />
-			<Breadcrumb.Root>
-				<Breadcrumb.List>
-					{#if $page.data.breadcrumbs}
-						{#each $page.data.breadcrumbs as breadcrumb, index}
-							{#if index == $page.data.breadcrumbs.length - 1}
-								<Breadcrumb.Item>
-									<Breadcrumb.Page>
-										{breadcrumb.name}
-									</Breadcrumb.Page>
-								</Breadcrumb.Item>
-							{:else}
-								<Breadcrumb.Item class="hidden md:block">
-									<Breadcrumb.Link href={breadcrumb.path}>
-										{breadcrumb.name}
-									</Breadcrumb.Link>
-								</Breadcrumb.Item>
-								<Breadcrumb.Separator class="hidden md:block" />
-							{/if}
-						{/each}
-					{:else}
-						<Breadcrumb.Item>
-							<Breadcrumb.Link href={'/dashboard'}>
-								Home
-							</Breadcrumb.Link>
-						</Breadcrumb.Item>
-					{/if}
-				</Breadcrumb.List>
-			</Breadcrumb.Root>
-		</header>
-
-		<div
-			class="flex max-h-[calc(100vh-64px)] flex-grow overflow-hidden">
-			<div class="flex h-auto w-full flex-col">
-				{@render children()}
-			</div>
-		</div>
-	</Sidebar.Inset>
-</Sidebar.Provider>
-
-<Dialog.Root bind:open={dialogOpen}>
-	<Dialog.Content>
-		<Dialog.Header class="space-y-12">
-			<div
-				class="flex w-full flex-col items-center justify-center gap-6 pt-12">
-				<div class="bg-destructive/30 w-fit rounded-full p-4">
-					<UserIcon class="text-destructive" size={64} />
-				</div>
-			</div>
-			<div class="space-y-2">
-				<Dialog.Title class="text-center">Log Out?</Dialog.Title>
-				<Dialog.Description class="text-center">
-					You are about to log out of this account.
-				</Dialog.Description>
-			</div>
-			<div class="flex justify-center gap-6">
-				<Button
-					variant="outline"
-					class="w-full"
-					onclick={() => {
-						dialogOpen = false
-					}}
-					disabled={isLoading}>
-					Cancel
-				</Button>
-				<Button
-					variant="destructive"
-					onclick={logout}
-					class="flex w-full gap-2"
-					disabled={isLoading}>
-					{#if isLoading}
-						<Loader2 class="animate-spin" />
-					{/if}
-					Log Out
-				</Button>
-			</div>
-		</Dialog.Header>
-	</Dialog.Content>
-</Dialog.Root>
diff --git a/frontend/src/routes/(app)/dashboard/+page.server.ts b/frontend/src/routes/(app)/dashboard/+page.server.ts
index 74f9661..69cd2f4 100644
--- a/frontend/src/routes/(app)/dashboard/+page.server.ts
+++ b/frontend/src/routes/(app)/dashboard/+page.server.ts
@@ -1,30 +1,8 @@
 import { redirect } from '@sveltejs/kit'
 import type { PageServerLoad, Actions } from './$types'
-import { db } from '$lib/db'
-import { sql } from 'drizzle-orm'
 
 export const load = (async (event) => {
-	const user = event.locals.user
-
-	const projects = await db.query.project.findMany({
-		with: {
-			shortener: {
-				with: {
-					visitor: true,
-				},
-			},
-		},
-		where: (project, { eq }) => eq(project.userId, user.id),
-	})
-
-	const shorteners = await db.query.shortener.findMany({
-		with: {
-			visitor: true,
-		},
-		where: (shortener, { eq }) => eq(shortener.userId, user.id),
-	})
-
-	return { projects, shorteners }
+	redirect(302, '/dashboard/project/personal')
 }) satisfies PageServerLoad
 
 export const actions = {
diff --git a/frontend/src/routes/(app)/dashboard/+page.svelte b/frontend/src/routes/(app)/dashboard/+page.svelte
deleted file mode 100644
index 332698f..0000000
--- a/frontend/src/routes/(app)/dashboard/+page.svelte
+++ /dev/null
@@ -1,47 +0,0 @@
-<script lang="ts">
-	import * as Card from '$lib/components/ui/card'
-	import { Button } from '$lib/components/ui/button'
-	import { Separator } from '$lib/components/ui/separator'
-	import { BarChart, ExternalLink } from 'lucide-svelte'
-
-	let { data } = $props()
-</script>
-
-<div class="flex flex-col gap-4 px-10 py-8">
-	<h2 class="text-2xl font-bold tracking-tight">Projects</h2>
-	<Separator class="" />
-</div>
-
-<div class="flex w-full flex-wrap items-stretch gap-2 px-6">
-	{#each data.projects as project}
-		<a href={'/dashboard/projects/' + project.uuid}>
-			<Card.Root
-				class="hover:bg-secondary w-[500px] hover:cursor-pointer">
-				<Card.Header>
-					<Card.Title class="flex items-center gap-2">
-						{project.name}
-					</Card.Title>
-				</Card.Header>
-				<Card.Content>
-					<div class="flex w-full gap-4">
-						<Button
-							class="bg-secondary flex h-8 items-center justify-center gap-1 rounded text-sm">
-							<ExternalLink size={20} />
-							{project.shortener.length}
-							Shorteners
-						</Button>
-						<Button
-							class="bg-secondary flex h-8 items-center justify-center gap-1 rounded text-sm">
-							<BarChart size={20} />
-							{project.shortener.reduce(
-								(curr, shortener) => shortener.visitor.length + curr,
-								0,
-							)}
-							visits
-						</Button>
-					</div>
-				</Card.Content>
-			</Card.Root>
-		</a>
-	{/each}
-</div>
diff --git a/frontend/src/routes/(app)/dashboard-new/account/settings/(components)/sidebar-nav.svelte b/frontend/src/routes/(app)/dashboard/account/settings/(components)/sidebar-nav.svelte
similarity index 81%
rename from frontend/src/routes/(app)/dashboard-new/account/settings/(components)/sidebar-nav.svelte
rename to frontend/src/routes/(app)/dashboard/account/settings/(components)/sidebar-nav.svelte
index d2c76a0..3f86799 100644
--- a/frontend/src/routes/(app)/dashboard-new/account/settings/(components)/sidebar-nav.svelte
+++ b/frontend/src/routes/(app)/dashboard/account/settings/(components)/sidebar-nav.svelte
@@ -6,15 +6,15 @@
 	const items = [
 		{
 			title: 'Account',
-			href: '/dashboard-new/account/settings/account',
+			href: '/dashboard/account/settings/account',
 		},
 		{
 			title: 'QR',
-			href: '/dashboard-new/account/settings/qr',
+			href: '/dashboard/account/settings/qr',
 		},
 		{
 			title: 'Security',
-			href: '/dashboard-new/account/settings/security',
+			href: '/dashboard/account/settings/security',
 		},
 	] as const
 </script>
diff --git a/frontend/src/routes/(app)/dashboard-new/account/settings/+layout.server.ts b/frontend/src/routes/(app)/dashboard/account/settings/+layout.server.ts
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/account/settings/+layout.server.ts
rename to frontend/src/routes/(app)/dashboard/account/settings/+layout.server.ts
diff --git a/frontend/src/routes/(app)/dashboard-new/account/settings/+layout.svelte b/frontend/src/routes/(app)/dashboard/account/settings/+layout.svelte
similarity index 96%
rename from frontend/src/routes/(app)/dashboard-new/account/settings/+layout.svelte
rename to frontend/src/routes/(app)/dashboard/account/settings/+layout.svelte
index b75de50..7f80437 100644
--- a/frontend/src/routes/(app)/dashboard-new/account/settings/+layout.svelte
+++ b/frontend/src/routes/(app)/dashboard/account/settings/+layout.svelte
@@ -11,7 +11,7 @@
 		<Button
 			variant="outline"
 			class="h-auto px-2"
-			href="/dashboard-new/project/personal">
+			href="/dashboard/project/personal">
 			<ArrowLeftIcon />
 		</Button>
 		<div class="space-y-0.5">
diff --git a/frontend/src/routes/(app)/dashboard/settings/+page.server.ts b/frontend/src/routes/(app)/dashboard/account/settings/+page.server.ts
similarity index 73%
rename from frontend/src/routes/(app)/dashboard/settings/+page.server.ts
rename to frontend/src/routes/(app)/dashboard/account/settings/+page.server.ts
index 76567ad..d4f8048 100644
--- a/frontend/src/routes/(app)/dashboard/settings/+page.server.ts
+++ b/frontend/src/routes/(app)/dashboard/account/settings/+page.server.ts
@@ -2,5 +2,5 @@ import { redirect } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 
 export const load = (async () => {
-	redirect(300, '/dashboard/settings/account')
+	redirect(300, '/dashboard/account/settings/account')
 }) satisfies PageServerLoad
diff --git a/frontend/src/routes/(app)/dashboard-new/account/settings/account/+page.server.ts b/frontend/src/routes/(app)/dashboard/account/settings/account/+page.server.ts
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/account/settings/account/+page.server.ts
rename to frontend/src/routes/(app)/dashboard/account/settings/account/+page.server.ts
diff --git a/frontend/src/routes/(app)/dashboard-new/account/settings/account/+page.svelte b/frontend/src/routes/(app)/dashboard/account/settings/account/+page.svelte
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/account/settings/account/+page.svelte
rename to frontend/src/routes/(app)/dashboard/account/settings/account/+page.svelte
diff --git a/frontend/src/routes/(app)/dashboard-new/account/settings/account/schema.ts b/frontend/src/routes/(app)/dashboard/account/settings/account/schema.ts
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/account/settings/account/schema.ts
rename to frontend/src/routes/(app)/dashboard/account/settings/account/schema.ts
diff --git a/frontend/src/routes/(app)/dashboard-new/account/settings/qr/(components)/DemoQR.svelte b/frontend/src/routes/(app)/dashboard/account/settings/qr/(components)/DemoQR.svelte
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/account/settings/qr/(components)/DemoQR.svelte
rename to frontend/src/routes/(app)/dashboard/account/settings/qr/(components)/DemoQR.svelte
diff --git a/frontend/src/routes/(app)/dashboard-new/account/settings/qr/+page.server.ts b/frontend/src/routes/(app)/dashboard/account/settings/qr/+page.server.ts
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/account/settings/qr/+page.server.ts
rename to frontend/src/routes/(app)/dashboard/account/settings/qr/+page.server.ts
diff --git a/frontend/src/routes/(app)/dashboard-new/account/settings/qr/+page.svelte b/frontend/src/routes/(app)/dashboard/account/settings/qr/+page.svelte
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/account/settings/qr/+page.svelte
rename to frontend/src/routes/(app)/dashboard/account/settings/qr/+page.svelte
diff --git a/frontend/src/routes/(app)/dashboard-new/account/settings/qr/schema.ts b/frontend/src/routes/(app)/dashboard/account/settings/qr/schema.ts
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/account/settings/qr/schema.ts
rename to frontend/src/routes/(app)/dashboard/account/settings/qr/schema.ts
diff --git a/frontend/src/routes/(app)/dashboard-new/account/settings/security/+page.server.ts b/frontend/src/routes/(app)/dashboard/account/settings/security/+page.server.ts
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/account/settings/security/+page.server.ts
rename to frontend/src/routes/(app)/dashboard/account/settings/security/+page.server.ts
diff --git a/frontend/src/routes/(app)/dashboard-new/account/settings/security/+page.svelte b/frontend/src/routes/(app)/dashboard/account/settings/security/+page.svelte
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/account/settings/security/+page.svelte
rename to frontend/src/routes/(app)/dashboard/account/settings/security/+page.svelte
diff --git a/frontend/src/routes/(app)/dashboard-new/account/settings/security/schema.ts b/frontend/src/routes/(app)/dashboard/account/settings/security/schema.ts
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/account/settings/security/schema.ts
rename to frontend/src/routes/(app)/dashboard/account/settings/security/schema.ts
diff --git a/frontend/src/routes/(app)/dashboard/links/(components)/form.svelte b/frontend/src/routes/(app)/dashboard/links/(components)/form.svelte
deleted file mode 100644
index d5eac37..0000000
--- a/frontend/src/routes/(app)/dashboard/links/(components)/form.svelte
+++ /dev/null
@@ -1,269 +0,0 @@
-<script lang="ts">
-	import * as Form from '$lib/components/ui/form'
-	import * as Dialog from '$lib/components/ui/dialog'
-	import * as Select from '$lib/components/ui/select'
-	import { Input } from '$lib/components/ui/input'
-	import { Switch } from '$lib/components/ui/switch'
-	import { formSchema, type FormSchema } from '../schema'
-	import {
-		type SuperValidated,
-		type Infer,
-		superForm,
-	} from 'sveltekit-superforms'
-	import { zodClient } from 'sveltekit-superforms/adapters'
-	import { toast } from 'svelte-sonner'
-	import { Loader2, LoaderCircle, PlusCircle } from 'lucide-svelte'
-	import { buttonVariants } from '$lib/components/ui/button'
-	import { Checkbox } from '$lib/components/ui/checkbox'
-	import { ScrollArea } from '$lib/components/ui/scroll-area'
-	import type { Project } from '$lib/db/types'
-
-	let {
-		data,
-		projects,
-		dialogOpen = $bindable(),
-	}: {
-		data: SuperValidated<Infer<FormSchema>>
-		projects: Project[]
-		dialogOpen: boolean
-	} = $props()
-	let shortenerCategory = $state<string>('')
-	let selectedProjectName = $derived(
-		projects.find((project) => project.id == shortenerCategory)
-			?.name || 'None',
-	)
-
-	const form = superForm(data, {
-		validators: zodClient(formSchema),
-		invalidateAll: 'force',
-		resetForm: true,
-		onResult: ({ result }) => {
-			if (result.status === 200) {
-				dialogOpen = false
-				toast.success('Shortener added to project')
-			}
-		},
-		onError: ({ result }) => {
-			toast.error('Error adding shortener')
-		},
-	})
-
-	const { form: formData, enhance, submitting } = form
-
-	let inputTimer = $state<any>()
-	let previewData = $state<any>()
-	let isPreviewLoading = $state(false)
-
-	const getMetadata = async () => {
-		isPreviewLoading = true
-		clearTimeout(inputTimer)
-		const link =
-			$formData.link.startsWith('https://') ||
-			$formData.link.startsWith('http://')
-				? $formData.link
-				: 'https://' + $formData.link
-		inputTimer = setTimeout(async () => {
-			const response = await fetch(`/api/url/metadata?url=${link}`)
-			previewData = await response.json()
-			isPreviewLoading = false
-			console.log(previewData)
-		}, 1000)
-	}
-</script>
-
-<Dialog.Root bind:open={dialogOpen}>
-	<Dialog.Trigger
-		class={buttonVariants({ variant: 'default' }) + 'flex gap-2'}>
-		<PlusCircle />
-		Add Shortner
-	</Dialog.Trigger>
-	<Dialog.Content class="sm:max-w-[500px]">
-		<Dialog.Header>
-			<Dialog.Title>Add Shortener</Dialog.Title>
-			<Dialog.Description>
-				Create A New Shortener Here. Click Add To Save.
-			</Dialog.Description>
-		</Dialog.Header>
-		<ScrollArea class="max-h-[calc(100vh-200px)]">
-			<div class="grid grid-cols-4 items-center gap-4 pb-4">
-				<div class="font-bold">Preview</div>
-				<div class="col-span-4 flex flex-col justify-center border">
-					<div class="relative h-64 overflow-hidden">
-						{#if isPreviewLoading}
-							<div class="flex h-full items-center justify-center">
-								<Loader2 class="animate-spin" />
-							</div>
-						{:else if previewData}
-							<img
-								src={previewData.image}
-								alt=""
-								class="h-64 w-full object-cover" />
-							<div
-								class="bg-secondary absolute bottom-2 left-2 rounded-lg px-2">
-								{previewData.title}
-							</div>
-						{/if}
-					</div>
-				</div>
-			</div>
-			<form
-				method="POST"
-				use:enhance
-				class="flex flex-col gap-6"
-				action="?/create">
-				<Form.Field {form} name="link" class="flex flex-col gap-2">
-					<Form.Control>
-						{#snippet children({ props })}
-							<Form.Label>Link</Form.Label>
-							<Input
-								{...props}
-								bind:value={$formData.link}
-								placeholder="https://example.com"
-								oninput={getMetadata} />
-						{/snippet}
-					</Form.Control>
-					<Form.Description>Shortener link</Form.Description>
-					<Form.FieldErrors />
-				</Form.Field>
-				<Form.Field {form} name="project" class="flex flex-col gap-2">
-					<Form.Control>
-						{#snippet children({ props })}
-							<Form.Label>Project</Form.Label>
-							<Select.Root
-								bind:value={shortenerCategory}
-								type={'single'}
-								name={props.name}>
-								<Select.Trigger {...props} class="col-span-3">
-									{selectedProjectName}
-								</Select.Trigger>
-								<Select.Content>
-									<Select.Group>
-										<Select.Item value={''}>None</Select.Item>
-										<Select.Separator />
-										{#each projects as project}
-											<Select.Item value={project.id}>
-												{project.name}
-											</Select.Item>
-										{/each}
-									</Select.Group>
-								</Select.Content>
-							</Select.Root>
-						{/snippet}
-					</Form.Control>
-					<Form.Description>Shortener Project</Form.Description>
-					<Form.FieldErrors />
-				</Form.Field>
-				<Form.Field
-					{form}
-					name="custom_code_enable"
-					class="flex items-center gap-2 space-y-0">
-					<Form.Control>
-						{#snippet children({ props })}
-							<Switch
-								{...props}
-								bind:checked={$formData.custom_code_enable} />
-							<Form.Label>Custom Code</Form.Label>
-						{/snippet}
-					</Form.Control>
-				</Form.Field>
-				{#if $formData.custom_code_enable}
-					<Form.Field
-						{form}
-						name="custom_code"
-						class="flex flex-col gap-2">
-						<Form.Control>
-							{#snippet children({ props })}
-								<Input
-									{...props}
-									bind:value={$formData.custom_code}
-									placeholder="abcde" />
-							{/snippet}
-						</Form.Control>
-						<Form.Description>
-							Custom Code For The Shortener
-						</Form.Description>
-						<Form.FieldErrors />
-					</Form.Field>
-				{/if}
-				<Form.Field
-					{form}
-					name="ios"
-					class="flex items-center gap-2 space-y-0">
-					<Form.Control>
-						{#snippet children({ props })}
-							<Switch {...props} bind:checked={$formData.ios} />
-							<Form.Label>iOS Link</Form.Label>
-						{/snippet}
-					</Form.Control>
-				</Form.Field>
-				{#if $formData.ios}
-					<Form.Field
-						{form}
-						name="ios_link"
-						class="flex flex-col gap-2">
-						<Form.Control>
-							{#snippet children({ props })}
-								<Input
-									{...props}
-									bind:value={$formData.ios_link}
-									placeholder="https://example.com" />
-							{/snippet}
-						</Form.Control>
-						<Form.Description>
-							Shortener link for iOS
-						</Form.Description>
-						<Form.FieldErrors />
-					</Form.Field>
-				{/if}
-				<Form.Field
-					{form}
-					name="android"
-					class="flex items-center gap-2 space-y-0">
-					<Form.Control>
-						{#snippet children({ props })}
-							<Switch {...props} bind:checked={$formData.android} />
-							<Form.Label>Android Link</Form.Label>
-						{/snippet}
-					</Form.Control>
-				</Form.Field>
-				{#if $formData.android}
-					<Form.Field
-						{form}
-						name="android_link"
-						class="flex flex-col gap-2">
-						<Form.Control>
-							{#snippet children({ props })}
-								<Input
-									{...props}
-									bind:value={$formData.android_link}
-									placeholder="https://example.com" />
-							{/snippet}
-						</Form.Control>
-						<Form.Description>
-							Shortener link for Android
-						</Form.Description>
-						<Form.FieldErrors />
-					</Form.Field>
-				{/if}
-				<Form.Field
-					{form}
-					name="active"
-					class="flex items-center gap-2 space-y-0">
-					<Form.Control>
-						{#snippet children({ props })}
-							<Checkbox {...props} bind:checked={$formData.active} />
-							<Form.Label>Active</Form.Label>
-						{/snippet}
-					</Form.Control>
-					<Form.FieldErrors />
-				</Form.Field>
-				<Form.Button class="w-fit">
-					{#if $submitting}
-						<LoaderCircle class="animate-spin" />
-					{/if}
-					Add
-				</Form.Button>
-			</form>
-		</ScrollArea>
-	</Dialog.Content>
-</Dialog.Root>
diff --git a/frontend/src/routes/(app)/dashboard/links/+layout.server.ts b/frontend/src/routes/(app)/dashboard/links/+layout.server.ts
deleted file mode 100644
index 631f315..0000000
--- a/frontend/src/routes/(app)/dashboard/links/+layout.server.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { LayoutServerLoad } from './$types'
-
-export const load = (async (event) => {
-	const { breadcrumbs: parentBreadcrumbs } = await event.parent()
-
-	const breadcrumbs = [
-		...parentBreadcrumbs,
-		{ name: 'Links', path: '/dashboard/links' },
-	]
-
-	const page_title = 'Links'
-
-	return { breadcrumbs, page_title }
-}) satisfies LayoutServerLoad
diff --git a/frontend/src/routes/(app)/dashboard/links/+page.server.ts b/frontend/src/routes/(app)/dashboard/links/+page.server.ts
deleted file mode 100644
index 51d8729..0000000
--- a/frontend/src/routes/(app)/dashboard/links/+page.server.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-import { db } from '$lib/db'
-import type { PageServerLoad } from './$types'
-import { shortener } from '$lib/db/schema'
-import { fail, setError, superValidate } from 'sveltekit-superforms'
-import { zod } from 'sveltekit-superforms/adapters'
-import { formSchema } from './schema'
-import type { Actions } from './$types'
-import { nanoid } from 'nanoid'
-import { isAlphanumeric } from '$lib/utils'
-import { generateId } from 'lucia'
-import type { Project } from '$lib/db/types'
-
-export const load = (async (event) => {
-	const user = event.locals.user
-
-	const projects = db.query.project.findMany({
-		where: (project, { eq }) => eq(project.userId, user.id),
-	})
-
-	return {
-		projects,
-		form: await superValidate({ active: true }, zod(formSchema), {
-			errors: false,
-		}),
-	}
-}) satisfies PageServerLoad
-
-export const actions: Actions = {
-	create: async (event) => {
-		const form = await superValidate(event, zod(formSchema))
-		if (!form.valid) {
-			return fail(400, {
-				form,
-			})
-		}
-
-		const user = event.locals.user
-		let project: Project | undefined = undefined
-		const selected_project = form.data.project
-		if (selected_project) {
-			project = await db.query.project.findFirst({
-				where: (project, { eq, and }) =>
-					and(
-						eq(project.userId, user.id),
-						eq(project.uuid, selected_project),
-					),
-			})
-		}
-
-		if (form.data.custom_code_enable) {
-			if (!form.data.custom_code) {
-				return setError(
-					form,
-					'custom_code',
-					'Please Enter Custom Code',
-				)
-			}
-			if (!isAlphanumeric(form.data.custom_code)) {
-				return setError(
-					form,
-					'custom_code',
-					'Code cannot contain special characters',
-				)
-			}
-
-			const customCodeExist = await db.query.shortener.findMany({
-				where: (shortener, { eq, and, ne }) =>
-					and(eq(shortener.code, form.data.custom_code)),
-				with: {
-					project: true,
-				},
-			})
-
-			for (const shortener of customCodeExist) {
-				if (!shortener.project) {
-					if (
-						!project ||
-						(project && !project.enable_custom_domain)
-					) {
-						return setError(
-							form,
-							'custom_code',
-							'Duplicated Custom Code',
-						)
-					}
-				} else {
-					if (project) {
-						if (
-							!shortener.project.enable_custom_domain &&
-							!project.enable_custom_domain
-						) {
-							return setError(
-								form,
-								'custom_code',
-								'Duplicated Custom Code',
-							)
-						}
-
-						if (
-							shortener.project.custom_domain ===
-							project.custom_domain
-						) {
-							return setError(
-								form,
-								'custom_code',
-								'Duplicated Custom Code',
-							)
-						}
-					} else {
-						if (!shortener.project.enable_custom_domain) {
-							return setError(
-								form,
-								'custom_code',
-								'Duplicated Custom Code',
-							)
-						}
-					}
-				}
-			}
-		}
-
-		const code = form.data.custom_code_enable
-			? form.data.custom_code
-			: nanoid(8)
-		await db.insert(shortener).values({
-			id: generateId(8),
-			link: form.data.link,
-			projectId: project?.id,
-			userId: user.id,
-			code: code,
-			ios: form.data.ios,
-			ios_link: form.data.ios_link,
-			android: form.data.android,
-			android_link: form.data.android_link,
-		})
-
-		return { form }
-	},
-}
diff --git a/frontend/src/routes/(app)/dashboard/links/+page.svelte b/frontend/src/routes/(app)/dashboard/links/+page.svelte
deleted file mode 100644
index c9ddbed..0000000
--- a/frontend/src/routes/(app)/dashboard/links/+page.svelte
+++ /dev/null
@@ -1,375 +0,0 @@
-<script lang="ts">
-	import { page } from '$app/stores'
-
-	import { Button } from '$lib/components/ui/button'
-	import * as Select from '$lib/components/ui/select/index.js'
-	import * as Dialog from '$lib/components/ui/dialog'
-	import { Input } from '$lib/components/ui/input'
-	import ScrollArea from '$lib/components/ui/scroll-area/scroll-area.svelte'
-	import { Skeleton } from '$lib/components/ui/skeleton'
-	import * as Drawer from '$lib/components/ui/drawer'
-	import * as Pagination from '$lib/components/ui/pagination'
-
-	import {
-		ChevronLeft,
-		ChevronRight,
-		SortAscIcon,
-	} from 'lucide-svelte'
-
-	import ShortenerCard from '$lib/components/ShortenerCard.svelte'
-	import Form from './(components)/form.svelte'
-	import ProjectLinkQRPage from '../projects/[id]/links/[linkid]/qr/+page.svelte'
-	import LinkQRPage from './[id]/qr/+page.svelte'
-	import type { Project, Shortener } from '$lib/db/types'
-
-	let { data } = $props()
-
-	let dialogOpen = $state(false)
-
-	let search = $state<string | null>('')
-	let searchUpdateTimeout = $state<any>()
-
-	let pageNumber = $state(1)
-	let perPage = $state(12)
-	let sortBy = $state('latest')
-	let selectedProject = $state('all')
-
-	const fetchShorteners = async (
-		page: number,
-		perPage: number,
-		sortBy: string,
-		project: string,
-		search: string | null,
-	) => {
-		const searchParams = new URLSearchParams()
-
-		if (page) searchParams.set('page', page.toString())
-		if (perPage) searchParams.set('perPage', perPage.toString())
-		if (sortBy) searchParams.set('sortBy', sortBy)
-		if (project) searchParams.set('project', project)
-		if (search) searchParams.set('search', search)
-
-		const response = await fetch(
-			`/api/shortener?${searchParams.toString()}`,
-		)
-
-		const data = await response.json()
-
-		return {
-			shorteners: data.shorteners as (Shortener & {
-				visitorCount: number
-				project: Project
-			})[],
-			pagination: data.pagination as { total: number },
-		}
-	}
-</script>
-
-<div
-	class="flex flex-wrap-reverse items-center justify-start gap-4 p-4">
-	<!-- <Drawer.Root>
-		<Drawer.Trigger class="md:hidden">
-			<Button size="icon"><SortAscIcon /></Button>
-		</Drawer.Trigger>
-		<Drawer.Content>
-			<Drawer.Header>
-				<Drawer.Title>Filter</Drawer.Title>
-				<Drawer.Description>Sort & Search</Drawer.Description>
-			</Drawer.Header>
-			<Drawer.Footer class="gap-6">
-				<Select.Root
-					selected={sortBy}
-					onSelectedChange={(selected) => {
-						if (!selected) return
-						sortBy = selected
-						pageNumber = 1
-					}}>
-					<Select.Trigger>
-						<Select.Value placeholder="Sort By" />
-					</Select.Trigger>
-					<Select.Content>
-						<Select.Group>
-							<Select.Label>Sort By</Select.Label>
-							{#each [{ label: 'Latest', value: 'latest' }, { label: 'Oldest', value: 'oldest' }, { label: 'Most Visited', value: 'most_visited' }] as sortBy}
-								<Select.Item
-									value={sortBy.value}
-									label={sortBy.label}>
-									{sortBy.label}
-								</Select.Item>
-							{/each}
-						</Select.Group>
-					</Select.Content>
-					<Select.Input name="favoriteFruit" />
-				</Select.Root>
-				{#await data.projects}
-					<Skeleton class="h-[40px] w-[180px]" />
-				{:then projects}
-					<Select.Root
-						selected={selectedProject}
-						onSelectedChange={(selected) => {
-							if (!selected) return
-							selectedProject = selected
-							pageNumber = 1
-						}}>
-						<Select.Trigger>
-							<Select.Value placeholder="Sort By" />
-						</Select.Trigger>
-						<Select.Content>
-							<Select.Group>
-								<Select.Label>Project</Select.Label>
-								<Select.Separator />
-								<Select.Item value={'all'} label={'All'}>
-									All
-								</Select.Item>
-								<Select.Separator />
-								{#each projects as project}
-									<Select.Item
-										value={project.id}
-										label={project.name}>
-										{project.name}
-									</Select.Item>
-								{/each}
-							</Select.Group>
-						</Select.Content>
-						<Select.Input name="favoriteFruit" />
-					</Select.Root>
-				{/await}
-
-				<div class="flex items-center gap-4">
-					<Input
-						type="text"
-						placeholder="search"
-						autofocus
-						value={search}
-						oninput={({ target }) => {
-							clearTimeout(searchUpdateTimeout)
-							searchUpdateTimeout = setTimeout(() => {
-								search = target.value
-								pageNumber = 1
-							}, 500)
-						}} />
-					<Button disabled={!search} onclick={() => (search = '')}>
-						Clear
-					</Button>
-				</div>
-				<div></div>
-				<Drawer.Close>
-					<Button class="w-full">Close</Button>
-				</Drawer.Close>
-			</Drawer.Footer>
-		</Drawer.Content>
-	</Drawer.Root> -->
-	<div class="hidden items-center gap-4 md:flex">
-		{#await data.projects}
-			<Skeleton class="h-[40px] w-[180px]" />
-		{:then projects}
-			<Select.Root
-				name="selected_project"
-				type="single"
-				bind:value={selectedProject}>
-				<Select.Trigger class="w-[180px]">
-					{projects.find((project) => project.id == selectedProject)
-						?.name || 'All'}
-				</Select.Trigger>
-				<Select.Content>
-					<Select.Group>
-						<Select.GroupHeading>Project</Select.GroupHeading>
-						<Select.Separator />
-						<Select.Item value={'all'} label={'All'}>All</Select.Item>
-						<Select.Separator />
-						{#each projects as project}
-							<Select.Item value={project.id} label={project.name}>
-								{project.name}
-							</Select.Item>
-						{/each}
-					</Select.Group>
-				</Select.Content>
-			</Select.Root>
-		{/await}
-		<Select.Root name="sort_by" type="single" bind:value={sortBy}>
-			<Select.Trigger class="w-[180px]">
-				{sortBy}
-			</Select.Trigger>
-			<Select.Content>
-				<Select.Group>
-					<Select.GroupHeading>Sort By</Select.GroupHeading>
-					{#each [{ label: 'Latest', value: 'latest' }, { label: 'Oldest', value: 'oldest' }, { label: 'Most Visited', value: 'most_visited' }] as sortBy}
-						<Select.Item value={sortBy.value}>
-							{sortBy.label}
-						</Select.Item>
-					{/each}
-				</Select.Group>
-			</Select.Content>
-		</Select.Root>
-	</div>
-	<div class="hidden items-center gap-4 sm:flex">
-		<Input
-			type="text"
-			placeholder="search"
-			class="max-w-[250px]"
-			autofocus
-			value={search}
-			oninput={({ target }) => {
-				clearTimeout(searchUpdateTimeout)
-				searchUpdateTimeout = setTimeout(() => {
-					search = target.value
-					pageNumber = 1
-				}, 500)
-			}} />
-		<Button disabled={!search} onclick={() => (search = '')}>
-			Clear
-		</Button>
-	</div>
-	{#await data.projects then projects}
-		<Form bind:dialogOpen data={data.form} {projects} />
-	{/await}
-</div>
-
-{#await fetchShorteners(pageNumber, perPage, sortBy, selectedProject, search)}
-	<div class="flex-grow">
-		<div class="flex flex-wrap gap-4 p-4">
-			{#each [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as _}
-				<Skeleton class="h-[150px] w-[500px] rounded-lg" />
-			{/each}
-		</div>
-	</div>
-{:then result}
-	{#if result.shorteners.length > 0}
-		<ScrollArea class="flex-grow">
-			<div
-				class="grid grid-cols-1 gap-4 p-4 md:grid-cols-[repeat(auto-fit,_minmax(500px,_1fr))]">
-				{#each result.shorteners as shortener}
-					<ShortenerCard
-						{shortener}
-						project={shortener.project}
-						shortener_url={data.shortener_url} />
-				{/each}
-			</div>
-		</ScrollArea>
-		<div class="flex items-center justify-between border-t p-4">
-			<Select.Root
-				name="page_size"
-				type="single"
-				value={perPage.toString()}
-				onValueChange={(value) => {
-					perPage = parseInt(value)
-					pageNumber = 1
-				}}>
-				<Select.Trigger class="w-[180px]">
-					{perPage}
-				</Select.Trigger>
-				<Select.Content>
-					<Select.Group>
-						<Select.GroupHeading>Page Size</Select.GroupHeading>
-						{#each [12, 24, 48, 96] as pageSize}
-							<Select.Item value={pageSize.toString()}>
-								{pageSize}
-							</Select.Item>
-						{/each}
-					</Select.Group>
-				</Select.Content>
-			</Select.Root>
-			<Pagination.Root
-				class="items-end"
-				count={result.pagination.total}
-				{perPage}
-				bind:page={pageNumber}>
-				{#snippet children({ pages, currentPage })}
-					<Pagination.Content>
-						<Pagination.Item>
-							<Pagination.PrevButton>
-								<ChevronLeft class="h-4 w-4" />
-								<span class="hidden sm:block">Previous</span>
-							</Pagination.PrevButton>
-						</Pagination.Item>
-						{#each pages as page (page.key)}
-							{#if page.type === 'ellipsis'}
-								<Pagination.Item>
-									<Pagination.Ellipsis />
-								</Pagination.Item>
-							{:else}
-								<Pagination.Item>
-									<Pagination.Link
-										{page}
-										isActive={currentPage === page.value}>
-										{page.value}
-									</Pagination.Link>
-								</Pagination.Item>
-							{/if}
-						{/each}
-						<Pagination.Item>
-							<Pagination.NextButton>
-								<span class="hidden sm:block">Next</span>
-								<ChevronRight class="h-4 w-4" />
-							</Pagination.NextButton>
-						</Pagination.Item>
-					</Pagination.Content>
-				{/snippet}
-			</Pagination.Root>
-		</div>
-	{:else}
-		<div class="flex flex-grow p-4">
-			<div
-				class="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm">
-				<div
-					class="flex w-full flex-grow items-center justify-center">
-					<div class="flex flex-col items-center gap-8">
-						<div class="flex flex-col items-center gap-2">
-							<div class="text-4xl font-bold">No Shortener Found</div>
-							<p class="text-muted-foreground">Add a new shortener</p>
-						</div>
-						<Button
-							onclick={() => {
-								dialogOpen = true
-							}}
-							class="w-fit">
-							Add Shortener
-						</Button>
-					</div>
-				</div>
-			</div>
-		</div>
-	{/if}
-{/await}
-
-<Dialog.Root
-	open={!!$page.state.linkQR}
-	onOpenChange={(open) => {
-		if (!open) {
-			history.back()
-		}
-	}}>
-	<Dialog.Content class="sm:max-w-[425px]">
-		<Dialog.Header>
-			<Dialog.Title>Shortener QR</Dialog.Title>
-			<Dialog.Description>
-				Use this QR code to share the shortener.
-			</Dialog.Description>
-		</Dialog.Header>
-		<ScrollArea class="max-h-[calc(100vh-200px)]">
-			<LinkQRPage data={$page.state.linkQR} shallowRouting />
-		</ScrollArea>
-	</Dialog.Content>
-</Dialog.Root>
-
-<Dialog.Root
-	open={!!$page.state.projectLinkQR}
-	onOpenChange={(open) => {
-		if (!open) {
-			history.back()
-		}
-	}}>
-	<Dialog.Content class="sm:max-w-[425px]">
-		<Dialog.Header>
-			<Dialog.Title>Shortener QR</Dialog.Title>
-			<Dialog.Description>
-				Use this QR code to share the shortener.
-			</Dialog.Description>
-		</Dialog.Header>
-		<ScrollArea class="max-h-[calc(100vh-200px)]">
-			<ProjectLinkQRPage
-				data={$page.state.projectLinkQR}
-				shallowRouting />
-		</ScrollArea>
-	</Dialog.Content>
-</Dialog.Root>
diff --git a/frontend/src/routes/(app)/dashboard/links/[id]/edit/(components)/form.svelte b/frontend/src/routes/(app)/dashboard/links/[id]/edit/(components)/form.svelte
deleted file mode 100644
index 628a84b..0000000
--- a/frontend/src/routes/(app)/dashboard/links/[id]/edit/(components)/form.svelte
+++ /dev/null
@@ -1,204 +0,0 @@
-<script lang="ts">
-	import * as Form from '$lib/components/ui/form'
-	import { Input } from '$lib/components/ui/input'
-	import { Switch } from '$lib/components/ui/switch'
-	import { formSchema, type FormSchema } from '../schema'
-	import {
-		type SuperValidated,
-		type Infer,
-		superForm,
-	} from 'sveltekit-superforms'
-	import { zodClient } from 'sveltekit-superforms/adapters'
-	import { toast } from 'svelte-sonner'
-	import { Loader2, LoaderCircle } from 'lucide-svelte'
-	import { Checkbox } from '$lib/components/ui/checkbox'
-	import { onMount } from 'svelte'
-
-	let {
-		data,
-		code,
-	}: { data: SuperValidated<Infer<FormSchema>>; code: string } =
-		$props()
-
-	const form = superForm(data, {
-		validators: zodClient(formSchema),
-		invalidateAll: 'force',
-		resetForm: true,
-		onResult: ({ result }) => {
-			if (result.status === 200) {
-				toast.success('Project shortener updated')
-			}
-		},
-		onError: ({ result }) => {
-			toast.error('Error updating shortener')
-		},
-	})
-
-	const { form: formData, enhance, submitting } = form
-
-	let inputTimer: any = $state()
-	let previewData: any = $state()
-	let isPreviewLoading: boolean = $state(false)
-
-	const getMetadata = async () => {
-		isPreviewLoading = true
-		clearTimeout(inputTimer)
-		const link =
-			$formData.link.startsWith('https://') ||
-			$formData.link.startsWith('http://')
-				? $formData.link
-				: 'https://' + $formData.link
-		inputTimer = setTimeout(async () => {
-			const response = await fetch(`/api/url/metadata?url=${link}`)
-			previewData = await response.json()
-			isPreviewLoading = false
-			console.log(previewData)
-		}, 1000)
-	}
-
-	onMount(() => {
-		getMetadata()
-	})
-</script>
-
-<div class="grid grid-cols-4 items-center gap-4 pb-4">
-	<div class="font-bold">Preview</div>
-	<div class="col-span-4 flex flex-col justify-center border">
-		<div class="relative h-64 overflow-hidden">
-			{#if isPreviewLoading}
-				<div class="flex h-full items-center justify-center">
-					<Loader2 class="animate-spin" />
-				</div>
-			{:else if previewData}
-				<img
-					src={previewData.image}
-					alt=""
-					class="h-64 w-full object-cover" />
-				<div
-					class="bg-secondary absolute bottom-2 left-2 rounded-lg px-2">
-					{previewData.title}
-				</div>
-			{/if}
-		</div>
-	</div>
-</div>
-<form
-	method="POST"
-	use:enhance
-	class="flex flex-col gap-6"
-	action={`/dashboard/links/${code}/edit`}>
-	<Form.Field {form} name="link" class="flex flex-col gap-2">
-		<Form.Control>
-			{#snippet children({ props })}
-				<Form.Label>Link</Form.Label>
-				<Input
-					{...props}
-					bind:value={$formData.link}
-					placeholder="https://example.com"
-					oninput={getMetadata} />
-			{/snippet}
-		</Form.Control>
-		<Form.Description>Shortener link</Form.Description>
-		<Form.FieldErrors />
-	</Form.Field>
-	<Form.Field
-		{form}
-		name="custom_code_enable"
-		class="flex items-center gap-2 space-y-0">
-		<Form.Control>
-			{#snippet children({ props })}
-				<Switch
-					{...props}
-					bind:checked={$formData.custom_code_enable} />
-				<Form.Label>Custom Code</Form.Label>
-			{/snippet}
-		</Form.Control>
-	</Form.Field>
-	{#if $formData.custom_code_enable}
-		<Form.Field {form} name="custom_code" class="flex flex-col gap-2">
-			<Form.Control>
-				{#snippet children({ props })}
-					<Input
-						{...props}
-						bind:value={$formData.custom_code}
-						placeholder="abcde" />
-				{/snippet}
-			</Form.Control>
-			<Form.Description>
-				Custom Code For The Shortener
-			</Form.Description>
-			<Form.FieldErrors />
-		</Form.Field>
-	{/if}
-	<Form.Field
-		{form}
-		name="ios"
-		class="flex items-center gap-2 space-y-0">
-		<Form.Control>
-			{#snippet children({ props })}
-				<Switch {...props} bind:checked={$formData.ios} />
-				<Form.Label>iOS Link</Form.Label>
-			{/snippet}
-		</Form.Control>
-	</Form.Field>
-	{#if $formData.ios}
-		<Form.Field {form} name="ios_link" class="flex flex-col gap-2">
-			<Form.Control>
-				{#snippet children({ props })}
-					<Input
-						{...props}
-						bind:value={$formData.ios_link}
-						placeholder="https://example.com" />
-				{/snippet}
-			</Form.Control>
-			<Form.Description>Shortener link for iOS</Form.Description>
-			<Form.FieldErrors />
-		</Form.Field>
-	{/if}
-	<Form.Field
-		{form}
-		name="android"
-		class="flex items-center gap-2 space-y-0">
-		<Form.Control>
-			{#snippet children({ props })}
-				<Switch {...props} bind:checked={$formData.android} />
-				<Form.Label>Android Link</Form.Label>
-			{/snippet}
-		</Form.Control>
-	</Form.Field>
-	{#if $formData.android}
-		<Form.Field
-			{form}
-			name="android_link"
-			class="flex flex-col gap-2">
-			<Form.Control>
-				{#snippet children({ props })}
-					<Input
-						{...props}
-						bind:value={$formData.android_link}
-						placeholder="https://example.com" />
-				{/snippet}
-			</Form.Control>
-			<Form.Description>Shortener link for Android</Form.Description>
-			<Form.FieldErrors />
-		</Form.Field>
-	{/if}
-	<Form.Field
-		{form}
-		name="active"
-		class="flex items-center gap-2 space-y-0">
-		<Form.Control>
-			{#snippet children({ props })}
-				<Checkbox {...props} bind:checked={$formData.active} />
-				<Form.Label>Active</Form.Label>
-			{/snippet}
-		</Form.Control>
-		<Form.FieldErrors />
-	</Form.Field>
-	<Form.Button class="w-fit">
-		{#if $submitting}
-			<LoaderCircle class="animate-spin" />
-		{/if}
-		Save
-	</Form.Button>
-</form>
diff --git a/frontend/src/routes/(app)/dashboard/links/[id]/edit/+page.server.ts b/frontend/src/routes/(app)/dashboard/links/[id]/edit/+page.server.ts
deleted file mode 100644
index dd59952..0000000
--- a/frontend/src/routes/(app)/dashboard/links/[id]/edit/+page.server.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import type { PageServerLoad } from './$types'
-import { fail, setError, superValidate } from 'sveltekit-superforms'
-import { zod } from 'sveltekit-superforms/adapters'
-import { formSchema } from './schema'
-import type { Actions } from './$types'
-import { db } from '$lib/db'
-import { redirect } from '@sveltejs/kit'
-import { shortener } from '$lib/db/schema'
-import { eq } from 'drizzle-orm'
-import { isAlphanumeric } from '$lib/utils'
-
-export const load = (async (event) => {
-	const user = event.locals.user
-	const { id } = event.params
-
-	const shortener = await db.query.shortener.findFirst({
-		columns: {
-			id: true,
-			code: true,
-			projectId: true,
-			ios: true,
-			ios_link: true,
-			android: true,
-			android_link: true,
-			link: true,
-			active: true,
-		},
-		where: (shortener, { eq, and }) =>
-			and(eq(shortener.code, id), eq(shortener.userId, user.id)),
-	})
-
-	if (!shortener) {
-		redirect(300, `/dashboard/links`)
-	}
-
-	return {
-		shortener,
-		form: await superValidate(
-			{
-				...shortener,
-				custom_code_enable: true,
-				custom_code: shortener.code,
-			},
-			zod(formSchema),
-			{ errors: false },
-		),
-	}
-}) satisfies PageServerLoad
-
-export const actions: Actions = {
-	default: async (event) => {
-		const form = await superValidate(event, zod(formSchema))
-		if (!form.valid) {
-			return fail(400, {
-				form,
-			})
-		}
-
-		const user = event.locals.user
-
-		if (form.data.custom_code_enable) {
-			if (!form.data.custom_code) {
-				return setError(
-					form,
-					'custom_code',
-					'Please Enter Custom Code',
-				)
-			}
-			if (!isAlphanumeric(form.data.custom_code)) {
-				return setError(
-					form,
-					'custom_code',
-					'Code cannot contain special characters',
-				)
-			}
-
-			const customCodeExist = await db.query.shortener.findMany({
-				where: (shortener, { eq, and, ne }) =>
-					and(
-						eq(shortener.code, form.data.custom_code),
-						ne(shortener.id, event.params.id),
-					),
-				with: {
-					project: true,
-				},
-			})
-
-			for (const shortener of customCodeExist) {
-				if (!shortener.project) {
-					return setError(
-						form,
-						'custom_code',
-						'Duplicated Custom Code',
-					)
-				}
-			}
-		}
-
-		await db
-			.update(shortener)
-			.set({
-				link: form.data.link,
-				userId: user.id,
-				code: form.data.custom_code_enable
-					? form.data.custom_code
-					: undefined,
-				ios: form.data.ios,
-				ios_link: form.data.ios_link,
-				android: form.data.android,
-				android_link: form.data.android_link,
-			})
-			.where(eq(shortener.id, event.params.id))
-
-		return { form }
-	},
-}
diff --git a/frontend/src/routes/(app)/dashboard/links/[id]/edit/+page.svelte b/frontend/src/routes/(app)/dashboard/links/[id]/edit/+page.svelte
deleted file mode 100644
index cc5fb37..0000000
--- a/frontend/src/routes/(app)/dashboard/links/[id]/edit/+page.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { ScrollArea } from '$lib/components/ui/scroll-area'
-	import type { PageData } from './$types'
-	import Form from './(components)/form.svelte'
-
-	let {
-		data,
-		shallowRouting = $bindable(false),
-	}: { data: PageData; shallowRouting: boolean } = $props()
-</script>
-
-{#if !shallowRouting}
-	<ScrollArea>
-		<div class="max-w-2xl px-10 py-4">
-			<Form data={data.form} code={data.shortener.id} />
-		</div>
-	</ScrollArea>
-{:else}
-	<Form data={data.form} code={data.shortener.id} />
-{/if}
diff --git a/frontend/src/routes/(app)/dashboard/links/[id]/edit/schema.ts b/frontend/src/routes/(app)/dashboard/links/[id]/edit/schema.ts
deleted file mode 100644
index 3f8eb36..0000000
--- a/frontend/src/routes/(app)/dashboard/links/[id]/edit/schema.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { z } from 'zod'
-
-export const formSchema = z.object({
-	link: z.string().url(),
-	active: z.boolean(),
-	ios: z.boolean(),
-	ios_link: z
-		.union([z.literal(''), z.string().url()])
-		.optional()
-		.nullable(),
-	android: z.boolean(),
-	android_link: z
-		.union([z.literal(''), z.string().url()])
-		.optional()
-		.nullable(),
-	custom_code_enable: z.boolean(),
-	custom_code: z.string(),
-})
-
-export type FormSchema = typeof formSchema
diff --git a/frontend/src/routes/(app)/dashboard/links/[id]/qr/(components)/qr.svelte b/frontend/src/routes/(app)/dashboard/links/[id]/qr/(components)/qr.svelte
deleted file mode 100644
index 7aaceed..0000000
--- a/frontend/src/routes/(app)/dashboard/links/[id]/qr/(components)/qr.svelte
+++ /dev/null
@@ -1,116 +0,0 @@
-<script lang="ts">
-	import { Button, buttonVariants } from '$lib/components/ui/button'
-	import { toast } from 'svelte-sonner'
-	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js'
-	import { Badge } from '$lib/components/ui/badge'
-	import { browser } from '$app/environment'
-	import { cn } from '$lib/utils'
-
-	let {
-		background = '#fff',
-		color = '#000',
-		value = '',
-		code = '',
-		cornerSquareStyle = 'square',
-		dotStyle = 'square',
-		existingQrImage = null,
-	}: {
-		background: string
-		color: string
-		value: string
-		code: string
-		cornerSquareStyle: 'dot' | 'square' | 'extra-rounded'
-		dotStyle: 'square' | 'rounded'
-		existingQrImage: string | null
-	} = $props()
-
-	let image = $state('')
-
-	const copyImageToClipboard = async () => {
-		if (!image) return
-
-		const imageData = await fetch(image)
-
-		const imageBlob = await imageData.blob()
-
-		try {
-			navigator.clipboard.write([
-				new ClipboardItem({
-					'image/png': imageBlob,
-				}),
-			])
-			toast.success('Copied Image To Clipboard')
-		} catch (error) {
-			toast.error(
-				'Unable to copy item to clipboard. If you are using firefox, you can change the setting dom.events.asyncclipboard.clipboarditem in about:config to true',
-			)
-		}
-	}
-
-	async function generateQrCode() {
-		const qrcodestyling = new (
-			await import('qr-code-styling')
-		).default({
-			data: value,
-			width: 300,
-			height: 300,
-			margin: 1,
-			qrOptions: {
-				errorCorrectionLevel: 'M',
-				typeNumber: 0,
-			},
-			backgroundOptions: {
-				color: background,
-			},
-			dotsOptions: {
-				color: color,
-				type: dotStyle,
-			},
-			cornersSquareOptions: {
-				type: cornerSquareStyle,
-			},
-			image: existingQrImage || undefined,
-			imageOptions: {
-				imageSize: 0.7,
-				margin: 8,
-			},
-		})
-		const blob = await qrcodestyling.getRawData()
-		if (!blob) return
-		image = URL.createObjectURL(blob)
-	}
-
-	$effect(() => {
-		if (value && browser) {
-			generateQrCode()
-		}
-	})
-</script>
-
-<div class="flex h-full flex-col items-center gap-4">
-	<Badge variant="secondary">
-		{value}
-	</Badge>
-	<img src={image} alt={value} width={300} height={300} />
-	<div class="flex w-full gap-4">
-		<Button class="w-full" onclick={copyImageToClipboard}>
-			Copy Image
-		</Button>
-		<DropdownMenu.Root>
-			<DropdownMenu.Trigger
-				class={cn(buttonVariants({ variant: 'default' }), 'w-full')}>
-				QR Link
-			</DropdownMenu.Trigger>
-			<DropdownMenu.Content>
-				<DropdownMenu.Group>
-					<a href={`/url/${code}/qr`} target="_blank">
-						<DropdownMenu.Item>Standard</DropdownMenu.Item>
-					</a>
-					<a href={`/url/${code}/qr?color=true`} target="_blank">
-						<DropdownMenu.Item>With Style</DropdownMenu.Item>
-					</a>
-				</DropdownMenu.Group>
-			</DropdownMenu.Content>
-		</DropdownMenu.Root>
-	</div>
-</div>
diff --git a/frontend/src/routes/(app)/dashboard/links/[id]/qr/+page.server.ts b/frontend/src/routes/(app)/dashboard/links/[id]/qr/+page.server.ts
deleted file mode 100644
index 898c3e8..0000000
--- a/frontend/src/routes/(app)/dashboard/links/[id]/qr/+page.server.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { db } from '$lib/db'
-import { redirect } from '@sveltejs/kit'
-import type { PageServerLoad } from './$types'
-
-export const load = (async (event) => {
-	const user = event.locals.user
-	const { id } = event.params
-
-	const shortener = await db.query.shortener.findFirst({
-		columns: {
-			code: true,
-		},
-		where: (shortener, { eq, and, isNull }) =>
-			and(eq(shortener.code, id), isNull(shortener.projectId)),
-	})
-
-	if (!shortener) {
-		redirect(300, `/dashboard/links`)
-	}
-
-	return { shortener }
-}) satisfies PageServerLoad
diff --git a/frontend/src/routes/(app)/dashboard/links/[id]/qr/+page.svelte b/frontend/src/routes/(app)/dashboard/links/[id]/qr/+page.svelte
deleted file mode 100644
index 49ba36c..0000000
--- a/frontend/src/routes/(app)/dashboard/links/[id]/qr/+page.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script lang="ts">
-	import { ScrollArea } from '$lib/components/ui/scroll-area'
-	import type { PageData } from './$types'
-	import QR from './(components)/qr.svelte'
-
-	let {
-		data,
-		shallowRouting = $bindable(false),
-	}: { data: PageData; shallowRouting: boolean } = $props()
-</script>
-
-{#if !shallowRouting}
-	<ScrollArea>
-		<div class="max-w-2xl px-10 py-4">
-			<QR
-				value={'https://' +
-					data.shortener_url +
-					'/' +
-					data.shortener.code}
-				code={data.shortener.code}
-				background={data.user.qrBackground}
-				color={data.user.qrForeground}
-				cornerSquareStyle={data.user.qrCornerSquareStyle}
-				dotStyle={data.user.qrDotStyle}
-				existingQrImage={data.user.qrImageBase64} />
-		</div>
-	</ScrollArea>
-{:else}
-	<QR
-		value={'https://' +
-			data.shortener_url +
-			'/' +
-			data.shortener.code}
-		code={data.shortener.code}
-		background={data.user.qrBackground}
-		color={data.user.qrForeground}
-		cornerSquareStyle={data.user.qrCornerSquareStyle}
-		dotStyle={data.user.qrDotStyle}
-		existingQrImage={data.user.qrImageBase64} />
-{/if}
diff --git a/frontend/src/routes/(app)/dashboard/links/schema.ts b/frontend/src/routes/(app)/dashboard/links/schema.ts
deleted file mode 100644
index f7890dc..0000000
--- a/frontend/src/routes/(app)/dashboard/links/schema.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { z } from 'zod'
-
-export const formSchema = z.object({
-	link: z.string().url(),
-	project: z.string().optional(),
-	active: z.boolean(),
-	ios: z.boolean(),
-	ios_link: z.string().url().optional(),
-	android: z.boolean(),
-	android_link: z.string().url().optional(),
-	custom_code_enable: z.boolean(),
-	custom_code: z.string(),
-})
-
-export type FormSchema = typeof formSchema
diff --git a/frontend/src/routes/(app)/dashboard-new/project/+page.server.ts b/frontend/src/routes/(app)/dashboard/project/+page.server.ts
similarity index 94%
rename from frontend/src/routes/(app)/dashboard-new/project/+page.server.ts
rename to frontend/src/routes/(app)/dashboard/project/+page.server.ts
index 4e1faa2..86eaff4 100644
--- a/frontend/src/routes/(app)/dashboard-new/project/+page.server.ts
+++ b/frontend/src/routes/(app)/dashboard/project/+page.server.ts
@@ -8,7 +8,7 @@ import { zod } from 'sveltekit-superforms/adapters'
 import { formSchema } from './[project_id]/(components)/schema'
 
 export const load = (async (event) => {
-	redirect(302, '/dashboard-new/project/personal')
+	redirect(302, '/dashboard/project/personal')
 }) satisfies PageServerLoad
 
 export const actions: Actions = {
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/(components)/app-sidebar.svelte b/frontend/src/routes/(app)/dashboard/project/[project_id]/(components)/app-sidebar.svelte
similarity index 53%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/(components)/app-sidebar.svelte
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/(components)/app-sidebar.svelte
index e6e98b1..70fdb80 100644
--- a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/(components)/app-sidebar.svelte
+++ b/frontend/src/routes/(app)/dashboard/project/[project_id]/(components)/app-sidebar.svelte
@@ -7,7 +7,14 @@
 	import ProjectSwitcher from './project-switcher.svelte'
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js'
 	import type { ComponentProps } from 'svelte'
-	import { HomeIcon, LinkIcon, SettingsIcon } from 'lucide-svelte'
+	import {
+		CloudDownloadIcon,
+		CloudIcon,
+		FileIcon,
+		HomeIcon,
+		LinkIcon,
+		SettingsIcon,
+	} from 'lucide-svelte'
 	import { page } from '$app/stores'
 	import type { User } from 'lucia'
 	import type { Project } from '$lib/db/types'
@@ -16,6 +23,9 @@
 		type SuperValidated,
 		type Infer,
 	} from 'sveltekit-superforms'
+	import { Progress } from '$lib/components/ui/progress'
+	import { byteToHumanReadable, cn } from '$lib/utils'
+	import { Button } from '$lib/components/ui/button'
 
 	let {
 		ref = $bindable(null),
@@ -32,6 +42,8 @@
 		createProjectForm: SuperValidated<Infer<FormSchema>>
 	} = $props()
 
+	const sidebar = Sidebar.useSidebar()
+
 	let projectId = $derived(activeProject?.id || 'personal')
 
 	let data = $derived({
@@ -49,30 +61,41 @@
 		navMain: [
 			{
 				title: 'Overview',
-				url: `/dashboard-new/project/${projectId}`,
+				url: `/dashboard/project/${projectId}`,
 				icon: HomeIcon,
 				isActive:
-					$page.url.pathname ===
-					`/dashboard-new/project/${projectId}`,
+					$page.url.pathname === `/dashboard/project/${projectId}`,
+				isUnlocked: true,
 			},
 			{
 				title: 'Links',
-				url: `/dashboard-new/project/${projectId}/links`,
+				url: `/dashboard/project/${projectId}/links`,
 				icon: LinkIcon,
 				isActive: $page.url.pathname.startsWith(
-					`/dashboard-new/project/${projectId}/links`,
+					`/dashboard/project/${projectId}/links`,
+				),
+				isUnlocked: true,
+			},
+			{
+				title: 'Files',
+				url: `/dashboard/project/${projectId}/file_uploads`,
+				icon: FileIcon,
+				isActive: $page.url.pathname.startsWith(
+					`/dashboard/project/${projectId}/file_uploads`,
 				),
+				isUnlocked: user.plan !== 'free',
 			},
 			{
 				title: 'Settings',
 				url:
 					projectId === 'personal'
-						? `/dashboard-new/account/settings`
-						: `/dashboard-new/project/${projectId}/settings`,
+						? `/dashboard/account/settings`
+						: `/dashboard/project/${projectId}/settings`,
 				icon: SettingsIcon,
 				isActive: $page.url.pathname.startsWith(
-					`/dashboard-new/project/${projectId}/settings`,
+					`/dashboard/project/${projectId}/settings`,
 				),
+				isUnlocked: true,
 			},
 		],
 	})
@@ -95,12 +118,27 @@
 					<Sidebar.MenuItem>
 						<Sidebar.MenuButton isActive={item.isActive}>
 							{#snippet child({ props })}
-								<a href={item.url} {...props}>
-									{#if item.icon}
-										<item.icon class="h-8" />
-									{/if}
-									<span>{item.title}</span>
-								</a>
+								{#if item.isUnlocked}
+									<a href={item.url} {...props}>
+										{#if item.icon}
+											<item.icon class="h-8" />
+										{/if}
+										<span>{item.title}</span>
+									</a>
+								{:else}
+									<span
+										{...props}
+										class={cn(
+											props.class as string,
+											'text-muted-foreground select-none hover:cursor-pointer',
+										)}>
+										{#if item.icon}
+											<item.icon class="h-8" />
+										{/if}
+										<span>{item.title}</span>
+										<span class="text-brand">(Pro)</span>
+									</span>
+								{/if}
 							{/snippet}
 						</Sidebar.MenuButton>
 					</Sidebar.MenuItem>
@@ -109,6 +147,23 @@
 		</Sidebar.Group>
 	</Sidebar.Content>
 	<Sidebar.Footer>
+		{#if sidebar.open && user.plan !== 'free'}
+			<div class="flex flex-col gap-4 rounded-lg border p-4 text-sm">
+				<div class="flex items-center gap-4">
+					<CloudIcon />
+					<span>Storage Usage</span>
+				</div>
+				<div class="flex flex-col gap-2">
+					<span class="text-muted-foreground">
+						{byteToHumanReadable(user.fileStorageUsageInByte)}
+						/ 100 GB
+					</span>
+					<Progress
+						max={100_000_000_000}
+						value={user.fileStorageUsageInByte} />
+				</div>
+			</div>
+		{/if}
 		<NavUser user={data.user} />
 	</Sidebar.Footer>
 	<Sidebar.Rail />
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/(components)/project-switcher.svelte b/frontend/src/routes/(app)/dashboard/project/[project_id]/(components)/project-switcher.svelte
similarity index 96%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/(components)/project-switcher.svelte
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/(components)/project-switcher.svelte
index 78aa330..5e5ee15 100644
--- a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/(components)/project-switcher.svelte
+++ b/frontend/src/routes/(app)/dashboard/project/[project_id]/(components)/project-switcher.svelte
@@ -80,7 +80,7 @@
 				<DropdownMenu.Label class="text-muted-foreground text-xs">
 					Default
 				</DropdownMenu.Label>
-				<a href={`/dashboard-new/project/personal`}>
+				<a href={`/dashboard/project/personal`}>
 					<DropdownMenu.Item class="gap-2 p-2">
 						<div
 							class="size-6 flex items-center justify-center rounded-sm border">
@@ -97,7 +97,7 @@
 					Projects
 				</DropdownMenu.Label>
 				{#each projects as project, index (project.name)}
-					<a href={`/dashboard-new/project/${project.id}`}>
+					<a href={`/dashboard/project/${project.id}`}>
 						<DropdownMenu.Item class="gap-2 p-2">
 							<div
 								class="size-6 flex items-center justify-center rounded-sm border">
@@ -135,7 +135,7 @@
 				Create A New Project Here. Click Add To Create.
 			</Dialog.Description>
 		</Dialog.Header>
-		<form method="POST" use:enhance action="/dashboard-new/project">
+		<form method="POST" use:enhance action="/dashboard/project">
 			<Form.Field {form} name="name">
 				<Form.Control>
 					{#snippet children({ props })}
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/(components)/schema.ts b/frontend/src/routes/(app)/dashboard/project/[project_id]/(components)/schema.ts
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/(components)/schema.ts
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/(components)/schema.ts
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/+layout.server.ts b/frontend/src/routes/(app)/dashboard/project/[project_id]/+layout.server.ts
similarity index 93%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/+layout.server.ts
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/+layout.server.ts
index bd59672..48ac8a4 100644
--- a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/+layout.server.ts
+++ b/frontend/src/routes/(app)/dashboard/project/[project_id]/+layout.server.ts
@@ -29,8 +29,8 @@ export const load = (async (event) => {
 		{
 			name: activeProject?.name || 'Personal',
 			path: activeProject
-				? `/dashboard-new/project/${activeProject.id}`
-				: '/dashboard-new/project/personal',
+				? `/dashboard/project/${activeProject.id}`
+				: '/dashboard/project/personal',
 		},
 	]
 
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/+layout.svelte b/frontend/src/routes/(app)/dashboard/project/[project_id]/+layout.svelte
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/+layout.svelte
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/+layout.svelte
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/+page.server.ts b/frontend/src/routes/(app)/dashboard/project/[project_id]/+page.server.ts
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/+page.server.ts
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/+page.server.ts
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/+page.svelte b/frontend/src/routes/(app)/dashboard/project/[project_id]/+page.svelte
similarity index 90%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/+page.svelte
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/+page.svelte
index a2c14f4..6148678 100644
--- a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/+page.svelte
+++ b/frontend/src/routes/(app)/dashboard/project/[project_id]/+page.svelte
@@ -13,7 +13,7 @@
 				<ChartAreaIcon />
 			</div>
 			<Button
-				href={`/dashboard-new/project/${data.activeProjectId}/links`}>
+				href={`/dashboard/project/${data.activeProjectId}/links`}>
 				View Details
 			</Button>
 		</Card.Header>
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/[...catchall]/+page.svelte b/frontend/src/routes/(app)/dashboard/project/[project_id]/[...catchall]/+page.svelte
similarity index 88%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/[...catchall]/+page.svelte
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/[...catchall]/+page.svelte
index 0d2f635..29f957a 100644
--- a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/[...catchall]/+page.svelte
+++ b/frontend/src/routes/(app)/dashboard/project/[project_id]/[...catchall]/+page.svelte
@@ -11,7 +11,7 @@
 			<div class="text-4xl font-bold">Page Not Found</div>
 		</div>
 		<Button
-			href={`/dashboard-new/project/${data.activeProjectId}`}
+			href={`/dashboard/project/${data.activeProjectId}`}
 			class="w-fit">
 			Return Home
 		</Button>
diff --git a/frontend/src/routes/(app)/dashboard/project/[project_id]/file_uploads/(components)/upload-file-card.svelte b/frontend/src/routes/(app)/dashboard/project/[project_id]/file_uploads/(components)/upload-file-card.svelte
new file mode 100644
index 0000000..2354462
--- /dev/null
+++ b/frontend/src/routes/(app)/dashboard/project/[project_id]/file_uploads/(components)/upload-file-card.svelte
@@ -0,0 +1,127 @@
+<script lang="ts">
+	import { invalidateAll } from '$app/navigation'
+	import { Button } from '$lib/components/ui/button'
+	import * as Card from '$lib/components/ui/card'
+	import { Progress } from '$lib/components/ui/progress'
+	import { byteToHumanReadable, cn } from '$lib/utils'
+	import { RotateCwIcon, XIcon } from 'lucide-svelte'
+	import { onMount } from 'svelte'
+	import { toast } from 'svelte-sonner'
+
+	let {
+		file,
+		uploadUrl,
+		delete: deleteCard,
+	}: { file: File; uploadUrl: string; delete: () => void } = $props()
+
+	let uploadProgress = $state(0)
+	let uploadMax = $state(1)
+
+	let isCancelled = $state(false)
+	let isCompleted = $state(false)
+
+	const xhr = new XMLHttpRequest()
+
+	const upload = async () => {
+		// return
+		toast.info(`Uploading: ${file.name}`)
+		const response = await fetch(uploadUrl, {
+			method: 'POST',
+			body: JSON.stringify({
+				fileName: file.name,
+				fileSize: file.size,
+				fileType: file.type,
+			}),
+		})
+
+		const body = await response.json()
+
+		// https://stackoverflow.com/questions/35711724/upload-progress-indicators-for-fetch
+		const success = await new Promise((resolve) => {
+			xhr.upload.addEventListener('progress', (event) => {
+				if (event.lengthComputable) {
+					uploadProgress = event.loaded
+					uploadMax = event.total
+				}
+			})
+			xhr.addEventListener('loadend', () => {
+				resolve(xhr.readyState === 4 && xhr.status === 200)
+			})
+			xhr.open('PUT', body.link, true)
+			xhr.setRequestHeader('Content-Type', file.type)
+			xhr.send(file)
+		})
+		console.log('success:', success)
+
+		if ((success as boolean) === true) {
+			isCompleted = true
+			setTimeout(() => {
+				invalidateAll()
+			}, 3000)
+			toast.success(`File Uploaded: ${file.name}`)
+		}
+	}
+
+	$effect(() => {
+		if (isCompleted) {
+			setTimeout(() => {
+				deleteCard()
+			}, 2000)
+		}
+	})
+
+	onMount(() => {
+		upload()
+	})
+</script>
+
+<Card.Root>
+	<Card.Content class="flex items-center justify-between gap-4">
+		<div class="flex w-full flex-col gap-2">
+			<div>
+				<span>
+					{file.name}
+				</span>
+				<span class="text-muted-foreground">
+					{byteToHumanReadable(file.size)}
+				</span>
+				{#if isCancelled}
+					<span class="text-destructive">(Cancelled)</span>
+				{:else}
+					<span
+						class={cn(
+							'text-brand',
+							uploadProgress / uploadMax === 1 && 'text-success',
+						)}>
+						({((uploadProgress / uploadMax) * 100).toFixed(1)} %)
+					</span>
+				{/if}
+			</div>
+			<Progress value={uploadProgress} max={uploadMax} class="h-2" />
+		</div>
+		{#if !isCancelled || isCompleted}
+			<Button
+				variant="outline"
+				disabled={isCompleted}
+				onclick={() => {
+					xhr.abort()
+					isCancelled = true
+					toast.error(`Upload Cancelled: ${file.name}`)
+				}}
+				size="icon">
+				<XIcon />
+			</Button>
+		{:else}
+			<Button
+				variant="outline"
+				onclick={() => {
+					upload()
+					isCancelled = false
+					toast.info(`Upload Retry: ${file.name}`)
+				}}
+				size="icon">
+				<RotateCwIcon />
+			</Button>
+		{/if}
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/routes/(app)/dashboard/project/[project_id]/file_uploads/+page.server.ts b/frontend/src/routes/(app)/dashboard/project/[project_id]/file_uploads/+page.server.ts
new file mode 100644
index 0000000..75ad33b
--- /dev/null
+++ b/frontend/src/routes/(app)/dashboard/project/[project_id]/file_uploads/+page.server.ts
@@ -0,0 +1,35 @@
+import type { PageServerLoad } from './$types'
+import { db } from '$lib/db'
+
+export const load = (async (event) => {
+	const user = event.locals.user
+
+	const { activeProjectId, breadcrumbs: parentBreadcrumbs } =
+		await event.parent()
+
+	const breadcrumbs = [
+		...parentBreadcrumbs,
+		{
+			name: 'Files',
+			path: `/dashboard/project/${activeProjectId}/file_uploads`,
+		},
+	]
+
+	const files = db.query.file.findMany({
+		where: (file, { and, eq, isNull }) =>
+			and(
+				eq(file.userId, user.id),
+				activeProjectId !== 'personal'
+					? eq(file.projectId, activeProjectId)
+					: isNull(file.projectId),
+			),
+		with: {
+			shortener: true,
+		},
+	})
+
+	return {
+		files,
+		breadcrumbs,
+	}
+}) satisfies PageServerLoad
diff --git a/frontend/src/routes/(app)/dashboard/project/[project_id]/file_uploads/+page.svelte b/frontend/src/routes/(app)/dashboard/project/[project_id]/file_uploads/+page.svelte
new file mode 100644
index 0000000..e0d1dc3
--- /dev/null
+++ b/frontend/src/routes/(app)/dashboard/project/[project_id]/file_uploads/+page.svelte
@@ -0,0 +1,323 @@
+<script lang="ts">
+	import { Button, buttonVariants } from '$lib/components/ui/button'
+	import Dropzone from 'svelte-file-dropzone'
+	import type { PageData } from './$types'
+	import ScrollArea from '$lib/components/ui/scroll-area/scroll-area.svelte'
+	import * as Card from '$lib/components/ui/card/index.js'
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js'
+	import {
+		BarChartIcon,
+		EllipsisVerticalIcon,
+		ExternalLinkIcon,
+		ImageIcon,
+		Key,
+		Loader2Icon,
+		QrCodeIcon,
+		TrashIcon,
+		UploadIcon,
+		XIcon,
+	} from 'lucide-svelte'
+	import { toast } from 'svelte-sonner'
+	import {
+		goto,
+		invalidateAll,
+		preloadData,
+		pushState,
+	} from '$app/navigation'
+	import { byteToHumanReadable, cn } from '$lib/utils'
+	import UploadFileCard from './(components)/upload-file-card.svelte'
+	import { page } from '$app/stores'
+
+	import { fade, fly } from 'svelte/transition'
+	import { flip } from 'svelte/animate'
+	import { Skeleton } from '$lib/components/ui/skeleton'
+	import * as Dialog from '$lib/components/ui/dialog/index.js'
+	import ProjectLinkQRPage from '../links/[linkid]/qr/+page.svelte'
+
+	let { data }: { data: PageData } = $props()
+
+	let files = $state<{ accepted: File[]; rejected: File[] }>({
+		accepted: [],
+		rejected: [],
+	})
+
+	let deleteDialogOpen = $state(false)
+	let deleteLoading = $state(false)
+	let deleteKey = $state('')
+
+	function handleFilesSelect(e: CustomEvent<any>) {
+		const { acceptedFiles, fileRejections } = e.detail
+		files.accepted = [...files.accepted, ...acceptedFiles]
+		files.rejected = [...files.rejected, ...fileRejections]
+	}
+
+	const deleteFile = async (key: string) => {
+		deleteLoading = true
+		const response = await fetch(
+			`/api/project/${data.activeProjectId}/file/${key}`,
+			{
+				method: 'DELETE',
+			},
+		)
+
+		const body = await response.json()
+		if (body.success) {
+			invalidateAll()
+			toast.success(`File Deleted: ${key}`)
+		}
+		deleteLoading = false
+		deleteDialogOpen = false
+	}
+
+	const getFileDetails = async (key: string) => {
+		const response = await fetch(
+			`/api/project/${data.activeProjectId}/file/${key}`,
+			{
+				method: 'GET',
+			},
+		)
+
+		const body = await response.json()
+		console.log(body)
+	}
+
+	let isLoadingQrModal = $state(false)
+	const showQRModal = async (e: MouseEvent) => {
+		isLoadingQrModal = true
+		const { href } = e.currentTarget as HTMLAnchorElement
+
+		if (innerWidth < 640) goto(href)
+
+		const result = await preloadData(href)
+
+		if (result.type === 'loaded' && result.status === 200) {
+			pushState(href, { newProjectLinkQR: result.data })
+		} else {
+			goto(href)
+		}
+		isLoadingQrModal = false
+	}
+</script>
+
+<ScrollArea>
+	<div class="flex flex-col gap-8 p-4">
+		<Dropzone
+			on:drop={(event) => handleFilesSelect(event)}
+			class={'border-muted-foreground/25 hover:bg-muted/25 ring-offset-background focus-visible:ring-ring group relative grid h-52 w-full cursor-pointer place-items-center rounded-lg border-2 border-dashed px-5 py-2.5 text-center transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2'}
+			maxSize={5_000_000_000}
+			disableDefaultStyles>
+			<div
+				class="flex flex-col items-center justify-center gap-4 sm:px-5">
+				<div class="rounded-full border border-dashed p-3">
+					<UploadIcon class="size-7 text-muted-foreground" />
+				</div>
+				<div class="flex flex-col gap-px">
+					<p class="text-muted-foreground font-medium">
+						Drag 'n' drop files here, or click to select files
+					</p>
+					<p class="text-muted-foreground/70 text-sm">
+						You can upload multiple files (up to 5 GB each)
+					</p>
+				</div>
+			</div>
+		</Dropzone>
+		{#if files.accepted.length > 0}
+			<div class="flex flex-col gap-2">
+				{#each files.accepted as acceptedFile, index (acceptedFile)}
+					<div animate:flip in:fade out:fly={{ x: 100 }}>
+						<UploadFileCard
+							file={acceptedFile}
+							uploadUrl={`/api/project/${data.activeProjectId}/file`}
+							delete={() => {
+								files.accepted.splice(index, 1)
+							}} />
+					</div>
+				{/each}
+			</div>
+		{/if}
+
+		<Card.Root>
+			<Card.Header>
+				<Card.Title>Uploaded files</Card.Title>
+				<Card.Description>
+					View the uploaded files here
+				</Card.Description>
+			</Card.Header>
+			<Card.Content>
+				{#await data.files}
+					<Skeleton class="h-16" />
+				{:then files}
+					{#if files}
+						<div
+							class="grid grid-cols-[repeat(auto-fit,_minmax(350px,_1fr))] gap-3">
+							{#each files as file}
+								<Card.Root>
+									<Card.Content
+										class="flex h-full items-end justify-between gap-2">
+										<div
+											class="flex h-full flex-1 flex-col gap-4 overflow-hidden text-ellipsis">
+											<div>
+												<span>
+													{file.name}
+												</span>
+												<div class="text-muted-foreground">
+													{byteToHumanReadable(file.size)}
+												</div>
+												<div
+													class="text-muted-foreground flex items-center gap-2 text-sm">
+													<a
+														href={'https://' +
+															data.shortener_url +
+															'/' +
+															file.shortener.code}
+														target="_blank"
+														class="hover:underline">
+														{data.shortener_url +
+															'/' +
+															file.shortener.code}
+													</a>
+													<ExternalLinkIcon size={16} />
+												</div>
+											</div>
+											<div class="flex items-center justify-between">
+												<div class="flex gap-2">
+													<Button
+														href={`/dashboard/project/${data.activeProjectId}/links/${file.shortener.id}`}
+														class="bg-secondary flex h-8 items-center justify-center gap-1 rounded text-sm">
+														<BarChartIcon size={20} />
+														<div>Analytics</div>
+													</Button>
+													<a
+														class={cn(
+															buttonVariants({ variant: 'default' }),
+															'bg-secondary flex h-8 items-center justify-center gap-1 rounded text-sm',
+														)}
+														href={`/dashboard/project/${data.activeProjectId}/links/${file.shortener.id}/qr`}
+														onclick={(event) => {
+															event.preventDefault()
+															showQRModal(event)
+														}}>
+														{#if isLoadingQrModal}
+															<Loader2Icon
+																size={20}
+																class="animate-spin" />
+														{:else}
+															<QrCodeIcon size={20} />
+														{/if}
+													</a>
+												</div>
+												<DropdownMenu.Root>
+													<DropdownMenu.Trigger>
+														<EllipsisVerticalIcon />
+													</DropdownMenu.Trigger>
+													<DropdownMenu.Content>
+														<DropdownMenu.Group>
+															<DropdownMenu.Item
+																onclick={() =>
+																	getFileDetails(file.name)}>
+																Details
+															</DropdownMenu.Item>
+															<DropdownMenu.Item
+																class="text-destructive data-[highlighted]:bg-destructive flex items-center gap-2"
+																onclick={() => {
+																	deleteKey = file.name
+																	deleteDialogOpen = true
+																}}>
+																Delete
+															</DropdownMenu.Item>
+														</DropdownMenu.Group>
+													</DropdownMenu.Content>
+												</DropdownMenu.Root>
+											</div>
+										</div>
+									</Card.Content>
+								</Card.Root>
+							{/each}
+						</div>
+					{:else}
+						<div
+							class="text-card-foreground flex w-full flex-col items-center justify-center space-y-6 rounded-xl border bg-transparent p-16 shadow">
+							<div
+								class="mr-4 shrink-0 rounded-full border border-dashed p-4">
+								<ImageIcon class="size-8 text-muted-foreground" />
+							</div>
+							<div
+								class="flex flex-col items-center gap-1.5 text-center">
+								<h3 class="font-semibold leading-none tracking-tight">
+									No files uploaded
+								</h3>
+								<p class="text-muted-foreground text-sm">
+									Upload some files to see them here
+								</p>
+							</div>
+						</div>
+					{/if}
+				{/await}
+			</Card.Content>
+		</Card.Root>
+	</div>
+</ScrollArea>
+
+<Dialog.Root bind:open={deleteDialogOpen}>
+	<Dialog.Content>
+		<Dialog.Header class="space-y-12">
+			<div
+				class="flex w-full flex-col items-center justify-center gap-6 pt-12">
+				<div class="bg-destructive/30 w-fit rounded-full p-4">
+					<TrashIcon class="text-destructive" size={64} />
+				</div>
+			</div>
+			<div class="space-y-2">
+				<Dialog.Title class="text-center">
+					Delete File {deleteKey}?
+				</Dialog.Title>
+				<Dialog.Description class="text-center">
+					Files And Their Shortener Will Be Permanently Deleted
+				</Dialog.Description>
+			</div>
+			<div class="flex justify-center gap-6">
+				<Button
+					variant="outline"
+					class="w-full"
+					onclick={() => {
+						deleteDialogOpen = false
+					}}
+					disabled={deleteLoading}>
+					Cancel
+				</Button>
+				<Button
+					variant="destructive"
+					onclick={() => deleteFile(deleteKey)}
+					class="flex w-full gap-2"
+					disabled={deleteLoading}>
+					{#if deleteLoading}
+						<Loader2Icon class="animate-spin" />
+					{/if}
+					Delete File
+				</Button>
+			</div>
+		</Dialog.Header>
+	</Dialog.Content>
+</Dialog.Root>
+
+<Dialog.Root
+	open={!!$page.state.newProjectLinkQR}
+	onOpenChange={(open) => {
+		if (!open) {
+			history.back()
+		}
+	}}>
+	<Dialog.Content class="sm:max-w-[425px]">
+		<Dialog.Header>
+			<Dialog.Title>Shortener QR</Dialog.Title>
+			<Dialog.Description>
+				Use this QR code to share the shortener.
+			</Dialog.Description>
+		</Dialog.Header>
+		<ScrollArea class="max-h-[calc(100vh-200px)]">
+			<ProjectLinkQRPage
+				data={$page.state.newProjectLinkQR}
+				shallowRouting />
+		</ScrollArea>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/(components)/DeleteShortenerDialog.svelte b/frontend/src/routes/(app)/dashboard/project/[project_id]/links/(components)/DeleteShortenerDialog.svelte
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/(components)/DeleteShortenerDialog.svelte
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/links/(components)/DeleteShortenerDialog.svelte
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/(components)/ShortenerCard.svelte b/frontend/src/routes/(app)/dashboard/project/[project_id]/links/(components)/ShortenerCard.svelte
similarity index 88%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/(components)/ShortenerCard.svelte
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/links/(components)/ShortenerCard.svelte
index 39db77e..3bbcf59 100644
--- a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/(components)/ShortenerCard.svelte
+++ b/frontend/src/routes/(app)/dashboard/project/[project_id]/links/(components)/ShortenerCard.svelte
@@ -18,6 +18,8 @@
 		QrCode,
 		TrashIcon,
 		Loader2Icon,
+		FileIcon,
+		Split,
 	} from 'lucide-svelte'
 	import DeleteShortenerDialog from './DeleteShortenerDialog.svelte'
 	import ProjectEditLinkPage from '../[linkid]/edit/+page.svelte'
@@ -47,7 +49,7 @@
 	}
 
 	const getUrl = () => {
-		return `/dashboard-new/project/${activeProjectId}`
+		return `/dashboard/project/${activeProjectId}`
 	}
 
 	let editProjectLinkOpen = $state(false)
@@ -57,7 +59,7 @@
 	const showEditModal = async () => {
 		isLoadingEditProjectData = true
 		editProjectLinkOpen = true
-		const href = `/dashboard-new/project/${activeProjectId}/links/${shortener.id}/edit`
+		const href = `/dashboard/project/${activeProjectId}/links/${shortener.id}/edit`
 		const result = await preloadData(href)
 
 		if (result.type === 'loaded' && result.status === 200) {
@@ -94,16 +96,20 @@
 <Card.Root>
 	<Card.Header>
 		<Card.Title class="flex items-center justify-between gap-4">
-			<Avatar.Root class="overflow-visible">
-				<Avatar.Image
-					src={'https://www.google.com/s2/favicons?sz=128&domain_url=' +
-						shortener.link}
-					alt="favicon"
-					class="h-10 w-10" />
-				<Avatar.Fallback class="h-10 w-10 bg-opacity-0">
-					<img src="/favicon.png" alt="favicon" />
-				</Avatar.Fallback>
-			</Avatar.Root>
+			{#if shortener.is_file_upload}
+				<FileIcon class="h-10 w-10" />
+			{:else}
+				<Avatar.Root class="overflow-visible">
+					<Avatar.Image
+						src={'https://www.google.com/s2/favicons?sz=128&domain_url=' +
+							shortener.link}
+						alt="favicon"
+						class="h-10 w-10" />
+					<Avatar.Fallback class="h-10 w-10 bg-opacity-0">
+						<img src="/favicon.png" alt="favicon" />
+					</Avatar.Fallback>
+				</Avatar.Root>
+			{/if}
 
 			<div class="flex flex-grow flex-col items-start gap-2">
 				<Tooltip.Provider>
@@ -111,11 +117,17 @@
 						<Tooltip.Trigger>
 							<div
 								class="max-w-[250px] overflow-x-clip overflow-ellipsis whitespace-nowrap">
-								{shortener.link}
+								{shortener.is_file_upload
+									? shortener.file_path?.split('/').pop()
+									: shortener.link}
 							</div>
 						</Tooltip.Trigger>
 						<Tooltip.Content>
-							<p>{shortener.link}</p>
+							<p>
+								{shortener.is_file_upload
+									? shortener.file_path?.split('/').pop()
+									: shortener.link}
+							</p>
 						</Tooltip.Content>
 					</Tooltip.Root>
 				</Tooltip.Provider>
@@ -163,7 +175,7 @@
 		<div class="flex items-center justify-between">
 			<div class="flex gap-2">
 				<Button
-					href={`/dashboard/links/${shortener.id}`}
+					href={`/dashboard/project/${activeProjectId}/links/${shortener.id}`}
 					class="bg-secondary flex h-8 items-center justify-center gap-1 rounded text-sm">
 					<BarChart size={20} />
 					<div>
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/(components)/form.svelte b/frontend/src/routes/(app)/dashboard/project/[project_id]/links/(components)/form.svelte
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/(components)/form.svelte
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/links/(components)/form.svelte
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/+layout.server.ts b/frontend/src/routes/(app)/dashboard/project/[project_id]/links/+layout.server.ts
similarity index 86%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/+layout.server.ts
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/links/+layout.server.ts
index 258b305..b70633c 100644
--- a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/+layout.server.ts
+++ b/frontend/src/routes/(app)/dashboard/project/[project_id]/links/+layout.server.ts
@@ -11,7 +11,7 @@ export const load = (async (event) => {
 		...parentBreadcrumbs,
 		{
 			name: 'Links',
-			path: `/dashboard-new/project/${activeProjectId}/links`,
+			path: `/dashboard/project/${activeProjectId}/links`,
 		},
 	]
 
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/+page.server.ts b/frontend/src/routes/(app)/dashboard/project/[project_id]/links/+page.server.ts
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/+page.server.ts
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/links/+page.server.ts
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/+page.svelte b/frontend/src/routes/(app)/dashboard/project/[project_id]/links/+page.svelte
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/+page.svelte
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/links/+page.svelte
diff --git a/frontend/src/routes/(app)/dashboard/links/[id]/+page.server.ts b/frontend/src/routes/(app)/dashboard/project/[project_id]/links/[linkid]/+page.server.ts
similarity index 99%
rename from frontend/src/routes/(app)/dashboard/links/[id]/+page.server.ts
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/links/[linkid]/+page.server.ts
index 46a6a3d..3fc6456 100644
--- a/frontend/src/routes/(app)/dashboard/links/[id]/+page.server.ts
+++ b/frontend/src/routes/(app)/dashboard/project/[project_id]/links/[linkid]/+page.server.ts
@@ -6,7 +6,7 @@ import { visitor as visitorSchema } from '$lib/db/schema'
 
 export const load = (async (event) => {
 	const user = event.locals.user
-	const shortenerId = event.params.id
+	const shortenerId = event.params.linkid
 
 	const shortener = await db.query.shortener.findFirst({
 		where: (shortener, { eq, and }) =>
diff --git a/frontend/src/routes/(app)/dashboard/links/[id]/+page.svelte b/frontend/src/routes/(app)/dashboard/project/[project_id]/links/[linkid]/+page.svelte
similarity index 100%
rename from frontend/src/routes/(app)/dashboard/links/[id]/+page.svelte
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/links/[linkid]/+page.svelte
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/[linkid]/edit/(components)/form.svelte b/frontend/src/routes/(app)/dashboard/project/[project_id]/links/[linkid]/edit/(components)/form.svelte
similarity index 98%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/[linkid]/edit/(components)/form.svelte
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/links/[linkid]/edit/(components)/form.svelte
index 4b45b1e..692611f 100644
--- a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/[linkid]/edit/(components)/form.svelte
+++ b/frontend/src/routes/(app)/dashboard/project/[project_id]/links/[linkid]/edit/(components)/form.svelte
@@ -89,7 +89,7 @@
 	method="POST"
 	use:enhance
 	class="flex flex-col gap-6"
-	action={`/dashboard-new/project/${projectId}/links/${linkId}/edit`}>
+	action={`/dashboard/project/${projectId}/links/${linkId}/edit`}>
 	<Form.Field {form} name="link" class="flex flex-col gap-2">
 		<Form.Control>
 			{#snippet children({ props })}
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/[linkid]/edit/+page.server.ts b/frontend/src/routes/(app)/dashboard/project/[project_id]/links/[linkid]/edit/+page.server.ts
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/[linkid]/edit/+page.server.ts
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/links/[linkid]/edit/+page.server.ts
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/[linkid]/edit/+page.svelte b/frontend/src/routes/(app)/dashboard/project/[project_id]/links/[linkid]/edit/+page.svelte
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/[linkid]/edit/+page.svelte
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/links/[linkid]/edit/+page.svelte
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/[linkid]/edit/schema.ts b/frontend/src/routes/(app)/dashboard/project/[project_id]/links/[linkid]/edit/schema.ts
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/[linkid]/edit/schema.ts
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/links/[linkid]/edit/schema.ts
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/[linkid]/qr/(components)/qr.svelte b/frontend/src/routes/(app)/dashboard/project/[project_id]/links/[linkid]/qr/(components)/qr.svelte
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/[linkid]/qr/(components)/qr.svelte
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/links/[linkid]/qr/(components)/qr.svelte
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/[linkid]/qr/+page.server.ts b/frontend/src/routes/(app)/dashboard/project/[project_id]/links/[linkid]/qr/+page.server.ts
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/[linkid]/qr/+page.server.ts
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/links/[linkid]/qr/+page.server.ts
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/[linkid]/qr/+page.svelte b/frontend/src/routes/(app)/dashboard/project/[project_id]/links/[linkid]/qr/+page.svelte
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/[linkid]/qr/+page.svelte
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/links/[linkid]/qr/+page.svelte
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/schema.ts b/frontend/src/routes/(app)/dashboard/project/[project_id]/links/schema.ts
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/links/schema.ts
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/links/schema.ts
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/settings/(components)/DemoQR.svelte b/frontend/src/routes/(app)/dashboard/project/[project_id]/settings/(components)/DemoQR.svelte
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/settings/(components)/DemoQR.svelte
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/settings/(components)/DemoQR.svelte
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/settings/(components)/dns-info.svelte b/frontend/src/routes/(app)/dashboard/project/[project_id]/settings/(components)/dns-info.svelte
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/settings/(components)/dns-info.svelte
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/settings/(components)/dns-info.svelte
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/settings/(components)/dns-tooltip.svelte b/frontend/src/routes/(app)/dashboard/project/[project_id]/settings/(components)/dns-tooltip.svelte
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/settings/(components)/dns-tooltip.svelte
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/settings/(components)/dns-tooltip.svelte
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/settings/(components)/form.svelte b/frontend/src/routes/(app)/dashboard/project/[project_id]/settings/(components)/form.svelte
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/settings/(components)/form.svelte
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/settings/(components)/form.svelte
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/settings/+page.server.ts b/frontend/src/routes/(app)/dashboard/project/[project_id]/settings/+page.server.ts
similarity index 98%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/settings/+page.server.ts
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/settings/+page.server.ts
index 23e6dee..cdeb983 100644
--- a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/settings/+page.server.ts
+++ b/frontend/src/routes/(app)/dashboard/project/[project_id]/settings/+page.server.ts
@@ -37,13 +37,13 @@ export const load = (async (event) => {
 		activeProjectName,
 	} = await event.parent()
 
-	if (!project) redirect(302, '/dashboard-new/project')
+	if (!project) redirect(302, '/dashboard/project')
 
 	const breadcrumbs = [
 		...parentBreadcrumbs,
 		{
 			name: 'Settings',
-			path: `/dashboard-new/project/${activeProjectId}/settings`,
+			path: `/dashboard/project/${activeProjectId}/settings`,
 		},
 	]
 
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/settings/+page.svelte b/frontend/src/routes/(app)/dashboard/project/[project_id]/settings/+page.svelte
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/settings/+page.svelte
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/settings/+page.svelte
diff --git a/frontend/src/routes/(app)/dashboard-new/project/[project_id]/settings/schema.ts b/frontend/src/routes/(app)/dashboard/project/[project_id]/settings/schema.ts
similarity index 100%
rename from frontend/src/routes/(app)/dashboard-new/project/[project_id]/settings/schema.ts
rename to frontend/src/routes/(app)/dashboard/project/[project_id]/settings/schema.ts
diff --git a/frontend/src/routes/(app)/dashboard/projects/+layout.server.ts b/frontend/src/routes/(app)/dashboard/projects/+layout.server.ts
deleted file mode 100644
index cbc3f7c..0000000
--- a/frontend/src/routes/(app)/dashboard/projects/+layout.server.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { LayoutServerLoad } from './$types'
-
-export const load = (async (event) => {
-	const { breadcrumbs: parentBreadcrumbs } = await event.parent()
-	const breadcrumbs = [
-		...parentBreadcrumbs,
-		{ name: 'Projects', path: '/dashboard/projects' },
-	]
-	const page_title = 'Projects'
-	return { breadcrumbs, page_title }
-}) satisfies LayoutServerLoad
diff --git a/frontend/src/routes/(app)/dashboard/projects/+page.server.ts b/frontend/src/routes/(app)/dashboard/projects/+page.server.ts
deleted file mode 100644
index bebec6f..0000000
--- a/frontend/src/routes/(app)/dashboard/projects/+page.server.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { db } from '$lib/db'
-import { message, superValidate } from 'sveltekit-superforms'
-import type { PageServerLoad } from './$types'
-import { zod } from 'sveltekit-superforms/adapters'
-import { formSchema } from './schema'
-import { fail, type Actions } from '@sveltejs/kit'
-import { project } from '$lib/db/schema'
-import { generateId } from 'lucia'
-
-export const load = (async (event) => {
-	const user = event.locals.user
-
-	const projects = await db.query.project.findMany({
-		with: {
-			shortener: true,
-		},
-		where: (project, { eq }) => eq(project.userId, user.id),
-	})
-
-	return { projects, form: await superValidate(zod(formSchema)) }
-}) satisfies PageServerLoad
-
-export const actions: Actions = {
-	default: async (event) => {
-		const form = await superValidate(event, zod(formSchema))
-		if (!form.valid) {
-			return fail(400, {
-				form,
-			})
-		}
-
-		const user = event.locals.user
-
-		await db.insert(project).values({
-			id: generateId(8),
-			name: form.data.name,
-			userId: user.id,
-		})
-
-		return message(form, 'Project created')
-	},
-}
diff --git a/frontend/src/routes/(app)/dashboard/projects/+page.svelte b/frontend/src/routes/(app)/dashboard/projects/+page.svelte
deleted file mode 100644
index 2ac2b24..0000000
--- a/frontend/src/routes/(app)/dashboard/projects/+page.svelte
+++ /dev/null
@@ -1,117 +0,0 @@
-<script lang="ts">
-	import { Button, buttonVariants } from '$lib/components/ui/button'
-	import * as Dialog from '$lib/components/ui/dialog'
-	import * as Form from '$lib/components/ui/form'
-	import * as Card from '$lib/components/ui/card'
-	import { Input } from '$lib/components/ui/input'
-	import { ExternalLink, Loader2, PlusCircle } from 'lucide-svelte'
-
-	import { superForm } from 'sveltekit-superforms'
-	import { formSchema } from './schema'
-	import { zodClient } from 'sveltekit-superforms/adapters'
-	import { toast } from 'svelte-sonner'
-
-	let { data } = $props()
-
-	let dialogOpen = $state(false)
-
-	const form = superForm(data.form, {
-		validators: zodClient(formSchema),
-		onUpdated: ({ form }) => {
-			if (form.valid) {
-				toast.success(form.message)
-				dialogOpen = false
-			}
-		},
-	})
-
-	const { form: formData, enhance, submitting } = form
-</script>
-
-<div class="flex items-center justify-start p-4">
-	<Dialog.Root bind:open={dialogOpen}>
-		<Dialog.Trigger
-			class={buttonVariants({ variant: 'default' }) + 'flex gap-2'}>
-			<PlusCircle />
-			Add Project
-		</Dialog.Trigger>
-		<Dialog.Content class="sm:max-w-[425px]">
-			<Dialog.Header>
-				<Dialog.Title>Add Project</Dialog.Title>
-				<Dialog.Description>
-					Create A New Project Here. Click Add To Create.
-				</Dialog.Description>
-			</Dialog.Header>
-			<form method="POST" use:enhance>
-				<Form.Field {form} name="name">
-					<Form.Control>
-						{#snippet children({ props })}
-							<Form.Label>Name</Form.Label>
-							<Input {...props} bind:value={$formData.name} />
-						{/snippet}
-					</Form.Control>
-					<Form.Description>
-						Enter a name for your project.
-					</Form.Description>
-					<Form.FieldErrors />
-				</Form.Field>
-				<div class="flex justify-end gap-2">
-					<Form.Button>
-						{#if $submitting}
-							<Loader2 class="animate-spin" />
-						{/if}
-						Add
-					</Form.Button>
-				</div>
-			</form>
-		</Dialog.Content>
-	</Dialog.Root>
-</div>
-
-{#if data.projects.length > 0}
-	<div class="flex flex-wrap gap-4 overflow-scroll p-4">
-		{#each data.projects as project}
-			<a href={'/dashboard/projects/' + project.uuid}>
-				<Card.Root
-					class="hover:bg-secondary w-[500px] hover:cursor-pointer">
-					<Card.Header>
-						<Card.Title class="flex items-center gap-2">
-							{project.name}
-						</Card.Title>
-					</Card.Header>
-					<Card.Content>
-						<div class="flex w-full justify-between">
-							<Button
-								class="bg-secondary flex h-8 items-center justify-center gap-1 rounded text-sm">
-								<ExternalLink size={20} />
-								{project.shortener.length}
-								Shorteners
-							</Button>
-						</div>
-					</Card.Content>
-				</Card.Root>
-			</a>
-		{/each}
-	</div>
-{:else}
-	<div class="flex flex-grow p-4">
-		<div
-			class="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm">
-			<div class="flex w-full flex-grow items-center justify-center">
-				<div class="flex flex-col items-center gap-8">
-					<div class="flex flex-col items-center gap-2">
-						<div class="text-4xl font-bold">No Project Found</div>
-						<p class="text-muted-foreground">Add a new project</p>
-					</div>
-					<Button
-						onclick={() => {
-							dialogOpen = true
-						}}
-						class="w-fit">
-						Add Project
-					</Button>
-				</div>
-			</div>
-		</div>
-	</div>
-{/if}
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/(components)/form.svelte b/frontend/src/routes/(app)/dashboard/projects/[id]/(components)/form.svelte
deleted file mode 100644
index 3c23497..0000000
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/(components)/form.svelte
+++ /dev/null
@@ -1,232 +0,0 @@
-<script lang="ts">
-	import * as Form from '$lib/components/ui/form'
-	import * as Dialog from '$lib/components/ui/dialog'
-	import { Input } from '$lib/components/ui/input'
-	import { Switch } from '$lib/components/ui/switch'
-	import { formSchema, type FormSchema } from '../schema'
-	import {
-		type SuperValidated,
-		type Infer,
-		superForm,
-	} from 'sveltekit-superforms'
-	import { zodClient } from 'sveltekit-superforms/adapters'
-	import { toast } from 'svelte-sonner'
-	import { Loader2, LoaderCircle, PlusCircle } from 'lucide-svelte'
-	import { buttonVariants } from '$lib/components/ui/button'
-	import { Checkbox } from '$lib/components/ui/checkbox'
-	import { ScrollArea } from '$lib/components/ui/scroll-area'
-
-	let {
-		data,
-		dialogOpen = $bindable(),
-	}: {
-		data: SuperValidated<Infer<FormSchema>>
-		dialogOpen: boolean
-	} = $props()
-
-	const form = superForm(data, {
-		validators: zodClient(formSchema),
-		invalidateAll: 'force',
-		resetForm: true,
-		onResult: ({ result }) => {
-			if (result.status === 200) {
-				dialogOpen = false
-				toast.success('Shortener added to project')
-			}
-		},
-		onError: ({ result }) => {
-			toast.error('Error adding shortener')
-		},
-	})
-
-	const { form: formData, enhance, submitting } = form
-
-	let inputTimer: any = $state()
-	let previewData: any = $state()
-	let isPreviewLoading: boolean = $state(false)
-
-	const getMetadata = async () => {
-		isPreviewLoading = true
-		clearTimeout(inputTimer)
-		const link =
-			$formData.link.startsWith('https://') ||
-			$formData.link.startsWith('http://')
-				? $formData.link
-				: 'https://' + $formData.link
-		inputTimer = setTimeout(async () => {
-			const response = await fetch(`/api/url/metadata?url=${link}`)
-			previewData = await response.json()
-			isPreviewLoading = false
-			console.log(previewData)
-		}, 1000)
-	}
-</script>
-
-<Dialog.Root bind:open={dialogOpen}>
-	<Dialog.Trigger
-		class={buttonVariants({ variant: 'default' }) + 'flex gap-2'}>
-		<PlusCircle />
-		Add Shortner
-	</Dialog.Trigger>
-	<Dialog.Content class="sm:max-w-[500px]">
-		<Dialog.Header>
-			<Dialog.Title>Add Shortener</Dialog.Title>
-			<Dialog.Description>
-				Create A New Shortener Here. Click Add To Save.
-			</Dialog.Description>
-		</Dialog.Header>
-		<ScrollArea class="max-h-[calc(100vh-200px)]">
-			<div class="grid grid-cols-4 items-center gap-4 pb-4">
-				<div class="font-bold">Preview</div>
-				<div class="col-span-4 flex flex-col justify-center border">
-					<div class="relative h-64 overflow-hidden">
-						{#if isPreviewLoading}
-							<div class="flex h-full items-center justify-center">
-								<Loader2 class="animate-spin" />
-							</div>
-						{:else if previewData}
-							<img
-								src={previewData.image}
-								alt=""
-								class="h-64 w-full object-cover" />
-							<div
-								class="bg-secondary absolute bottom-2 left-2 rounded-lg px-2">
-								{previewData.title}
-							</div>
-						{/if}
-					</div>
-				</div>
-			</div>
-			<form
-				method="POST"
-				use:enhance
-				class="flex flex-col gap-6"
-				action="?/create">
-				<Form.Field {form} name="link" class="flex flex-col gap-2">
-					<Form.Control>
-						{#snippet children({ props })}
-							<Form.Label>Link</Form.Label>
-							<Input
-								{...props}
-								bind:value={$formData.link}
-								placeholder="https://example.com"
-								oninput={getMetadata} />
-						{/snippet}
-					</Form.Control>
-					<Form.Description>Shortener link</Form.Description>
-					<Form.FieldErrors />
-				</Form.Field>
-				<Form.Field
-					{form}
-					name="custom_code_enable"
-					class="flex items-center gap-2 space-y-0">
-					<Form.Control>
-						{#snippet children({ props })}
-							<Switch
-								{...props}
-								bind:checked={$formData.custom_code_enable} />
-							<Form.Label>Custom Code</Form.Label>
-						{/snippet}
-					</Form.Control>
-				</Form.Field>
-				{#if $formData.custom_code_enable}
-					<Form.Field
-						{form}
-						name="custom_code"
-						class="flex flex-col gap-2">
-						<Form.Control>
-							{#snippet children({ props })}
-								<Input
-									{...props}
-									bind:value={$formData.custom_code}
-									placeholder="abcde" />
-							{/snippet}
-						</Form.Control>
-						<Form.Description>
-							Custom Code For The Shortener
-						</Form.Description>
-						<Form.FieldErrors />
-					</Form.Field>
-				{/if}
-				<Form.Field
-					{form}
-					name="ios"
-					class="flex items-center gap-2 space-y-0">
-					<Form.Control>
-						{#snippet children({ props })}
-							<Switch {...props} bind:checked={$formData.ios} />
-							<Form.Label>iOS Link</Form.Label>
-						{/snippet}
-					</Form.Control>
-				</Form.Field>
-				{#if $formData.ios}
-					<Form.Field
-						{form}
-						name="ios_link"
-						class="flex flex-col gap-2">
-						<Form.Control>
-							{#snippet children({ props })}
-								<Input
-									{...props}
-									bind:value={$formData.ios_link}
-									placeholder="https://example.com" />
-							{/snippet}
-						</Form.Control>
-						<Form.Description>
-							Shortener link for iOS
-						</Form.Description>
-						<Form.FieldErrors />
-					</Form.Field>
-				{/if}
-				<Form.Field
-					{form}
-					name="android"
-					class="flex items-center gap-2 space-y-0">
-					<Form.Control>
-						{#snippet children({ props })}
-							<Switch {...props} bind:checked={$formData.android} />
-							<Form.Label>Android Link</Form.Label>
-						{/snippet}
-					</Form.Control>
-				</Form.Field>
-				{#if $formData.android}
-					<Form.Field
-						{form}
-						name="android_link"
-						class="flex flex-col gap-2">
-						<Form.Control>
-							{#snippet children({ props })}
-								<Input
-									{...props}
-									bind:value={$formData.android_link}
-									placeholder="https://example.com" />
-							{/snippet}
-						</Form.Control>
-						<Form.Description>
-							Shortener link for Android
-						</Form.Description>
-						<Form.FieldErrors />
-					</Form.Field>
-				{/if}
-				<Form.Field
-					{form}
-					name="active"
-					class="flex items-center gap-2 space-y-0">
-					<Form.Control>
-						{#snippet children({ props })}
-							<Checkbox {...props} bind:checked={$formData.active} />
-							<Form.Label>Active</Form.Label>
-						{/snippet}
-					</Form.Control>
-					<Form.FieldErrors />
-				</Form.Field>
-				<Form.Button class="w-fit">
-					{#if $submitting}
-						<LoaderCircle class="animate-spin" />
-					{/if}
-					Add
-				</Form.Button>
-			</form>
-		</ScrollArea>
-	</Dialog.Content>
-</Dialog.Root>
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/+layout.server.ts b/frontend/src/routes/(app)/dashboard/projects/[id]/+layout.server.ts
deleted file mode 100644
index e57912f..0000000
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/+layout.server.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { db } from '$lib/db'
-import { redirect } from '@sveltejs/kit'
-import type { LayoutServerLoad } from './$types'
-
-export const load = (async (event) => {
-	const { id } = event.params
-	try {
-		const user = event.locals.user
-		const project = await db.query.project.findFirst({
-			where: (project, { eq, and }) =>
-				and(eq(project.userId, user.id), eq(project.uuid, id)),
-		})
-
-		if (!project) {
-			redirect(300, '/dashboard/projects')
-		}
-
-		const { breadcrumbs: parentBreadcrumbs } = await event.parent()
-		const breadcrumbs = [
-			...parentBreadcrumbs,
-			{
-				name: project.name,
-				path: `/dashboard/projects/${project.uuid}`,
-			},
-		]
-		return { breadcrumbs, project }
-	} catch (e) {
-		redirect(300, '/dashboard/projects')
-	}
-}) satisfies LayoutServerLoad
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/+layout.svelte b/frontend/src/routes/(app)/dashboard/projects/[id]/+layout.svelte
deleted file mode 100644
index a6bae07..0000000
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/+layout.svelte
+++ /dev/null
@@ -1,43 +0,0 @@
-<script lang="ts">
-	import { page } from '$app/stores'
-	import { Button } from '$lib/components/ui/button'
-	import { Separator } from '$lib/components/ui/separator'
-	import { ScrollArea } from '$lib/components/ui/scroll-area'
-
-	let { data, children } = $props()
-</script>
-
-<div class="flex h-fit flex-col gap-2 px-4 pt-8 md:px-10">
-	<div class="flex items-center gap-4 pb-4">
-		<h2 class="pr-4 text-2xl font-bold tracking-tight md:pr-8">
-			{data.project.name}
-		</h2>
-		<Separator orientation="vertical" />
-		{#key $page.url.pathname}
-			<ScrollArea orientation="horizontal">
-				<div class="flex items-center gap-4">
-					<Button
-						href={`/dashboard/projects/${data.project.uuid}`}
-						variant={$page.url.pathname ===
-						`/dashboard/projects/${data.project.uuid}`
-							? 'secondary'
-							: 'ghost'}>
-						Shorteners
-					</Button>
-					<Button
-						href={`/dashboard/projects/${data.project.uuid}/settings`}
-						variant={$page.url.pathname ===
-						`/dashboard/projects/${data.project.uuid}/settings`
-							? 'secondary'
-							: 'ghost'}>
-						Settings
-					</Button>
-				</div>
-			</ScrollArea>
-		{/key}
-	</div>
-</div>
-
-<div class="flex w-full flex-grow flex-col overflow-hidden">
-	{@render children()}
-</div>
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/+page.server.ts b/frontend/src/routes/(app)/dashboard/projects/[id]/+page.server.ts
deleted file mode 100644
index dd1cd9e..0000000
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/+page.server.ts
+++ /dev/null
@@ -1,193 +0,0 @@
-import { db } from '$lib/db'
-import {
-	and,
-	asc,
-	desc,
-	eq,
-	getTableColumns,
-	ilike,
-	sql,
-} from 'drizzle-orm'
-import type { PageServerLoad } from './$types'
-import { shortener, visitor } from '$lib/db/schema'
-import { fail, setError, superValidate } from 'sveltekit-superforms'
-import { zod } from 'sveltekit-superforms/adapters'
-import { formSchema } from './schema'
-import type { Actions } from './$types'
-import { nanoid } from 'nanoid'
-import { isAlphanumeric } from '$lib/utils'
-import { generateId } from 'lucia'
-
-export const load = (async (event) => {
-	const { project: selectedProject } = await event.parent()
-
-	const user = event.locals.user
-
-	const search = event.url.searchParams.get('search')
-	let sortBy = event.url.searchParams.get('sortBy')
-	let page = parseInt(event.url.searchParams.get('page') ?? '1')
-	let perPage = parseInt(
-		event.url.searchParams.get('perPage') ?? '12',
-	)
-
-	if (isNaN(page)) {
-		page = 1
-	}
-
-	if (isNaN(perPage)) {
-		perPage = 10
-	}
-
-	if (
-		sortBy !== 'latest' &&
-		sortBy !== 'oldest' &&
-		sortBy !== 'most_visited'
-	) {
-		sortBy = 'latest'
-	}
-
-	const shortenerColumns = getTableColumns(shortener)
-	const shorteners = db
-		.select({
-			...shortenerColumns,
-			visitorCount: sql<number>`count(${visitor.id})`,
-		})
-		.from(shortener)
-		.where(
-			and(
-				eq(shortener.userId, user.id),
-				eq(shortener.projectId, selectedProject.id),
-				search
-					? ilike(shortener.link, `%${decodeURI(search)}%`)
-					: undefined,
-			),
-		)
-		.leftJoin(visitor, eq(shortener.id, visitor.shortenerId))
-		.groupBy(shortener.id)
-		.offset(perPage * (page - 1))
-		.limit(perPage)
-
-	if (sortBy === 'latest') {
-		shorteners.orderBy(desc(shortener.createdAt))
-	} else if (sortBy === 'oldest') {
-		shorteners.orderBy(asc(shortener.createdAt))
-	} else if (sortBy === 'most_visited') {
-		shorteners.orderBy(sql`count(${visitor.id}) desc`)
-	}
-
-	const pagination = db
-		.select({
-			total: sql<number>`count(*)`.as('total'),
-		})
-		.from(shortener)
-		.where(
-			and(
-				eq(shortener.userId, user.id),
-				eq(shortener.projectId, selectedProject.id),
-				search
-					? ilike(shortener.link, `%${decodeURI(search)}%`)
-					: undefined,
-			),
-		)
-
-	return {
-		selectedProject,
-		shorteners,
-		page,
-		perPage,
-		search,
-		sortBy,
-		pagination,
-		form: await superValidate({ active: true }, zod(formSchema), {
-			errors: false,
-		}),
-	}
-}) satisfies PageServerLoad
-
-export const actions: Actions = {
-	create: async (event) => {
-		const form = await superValidate(event, zod(formSchema))
-		if (!form.valid) {
-			return fail(400, {
-				form,
-			})
-		}
-
-		const { id } = event.params
-		const user = event.locals.user
-		const project = await db.query.project.findFirst({
-			where: (project, { eq, and }) =>
-				and(eq(project.userId, user.id), eq(project.uuid, id)),
-		})
-
-		if (!project) {
-			return fail(400, {
-				form,
-			})
-		}
-
-		if (form.data.custom_code_enable) {
-			if (!form.data.custom_code) {
-				return setError(
-					form,
-					'custom_code',
-					'Please Enter Custom Code',
-				)
-			}
-			if (!isAlphanumeric(form.data.custom_code)) {
-				return setError(
-					form,
-					'custom_code',
-					'Code cannot contain special characters',
-				)
-			}
-
-			const customCodeExist = await db.query.shortener.findMany({
-				where: (shortener, { eq, and, ne }) =>
-					and(eq(shortener.code, form.data.custom_code)),
-				with: {
-					project: true,
-				},
-			})
-
-			for (const shortener of customCodeExist) {
-				if (!shortener.project && !project.enable_custom_domain) {
-					return setError(
-						form,
-						'custom_code',
-						'Duplicated Custom Code',
-					)
-				}
-
-				if (!shortener.project) continue
-
-				if (
-					shortener.project.custom_domain === project.custom_domain
-				) {
-					return setError(
-						form,
-						'custom_code',
-						'Duplicated Custom Code',
-					)
-				}
-			}
-		}
-
-		const code = form.data.custom_code_enable
-			? form.data.custom_code
-			: nanoid(8)
-		await db.insert(shortener).values({
-			id: generateId(8),
-			link: form.data.link,
-			projectId: project.id,
-			userId: user.id,
-			code: code,
-			ios: form.data.ios,
-			ios_link: form.data.ios_link,
-			android: form.data.android,
-			android_link: form.data.android_link,
-		})
-
-		return { form }
-	},
-}
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/+page.svelte b/frontend/src/routes/(app)/dashboard/projects/[id]/+page.svelte
deleted file mode 100644
index 0ec2332..0000000
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/+page.svelte
+++ /dev/null
@@ -1,266 +0,0 @@
-<script lang="ts">
-	import { goto } from '$app/navigation'
-	import { browser } from '$app/environment'
-	import { page } from '$app/stores'
-
-	import ShortenerCard from '$lib/components/ShortenerCard.svelte'
-	import CustomPaginationBar from '$lib/components/Custom-Pagination-Bar.svelte'
-	import { Button } from '$lib/components/ui/button'
-	import { Skeleton } from '$lib/components/ui/skeleton'
-	import { Input } from '$lib/components/ui/input'
-	import * as Select from '$lib/components/ui/select'
-	import * as Dialog from '$lib/components/ui/dialog'
-	import * as Drawer from '$lib/components/ui/drawer'
-
-	import {
-		ChevronLeft,
-		ChevronRight,
-		SortAscIcon,
-		SortDescIcon,
-	} from 'lucide-svelte'
-
-	import { ScrollArea } from '$lib/components/ui/scroll-area'
-	import Form from './(components)/form.svelte'
-	import EditProjectLinkPage from './links/[linkid]/edit/+page.svelte'
-	import ProjectLinkQRPage from './links/[linkid]/qr/+page.svelte'
-	import type { Project, Shortener } from '$lib/db/types'
-	import * as Pagination from '$lib/components/ui/pagination'
-
-	let { data } = $props()
-
-	let dialogOpen = $state(false)
-
-	let search = $state<string | null>(data.search)
-	let searchUpdateTimeout = $state<any>()
-
-	let pageNumber = $state(1)
-	let perPage = $state(12)
-	let sortBy = $state('latest')
-	const selectedProject = data.selectedProject.id
-
-	let editProjectLinkOpen = $state(false)
-	let projectLinkQROpen = $state(false)
-
-	$effect(() => {
-		editProjectLinkOpen = !!$page.state.editProjectLink
-		projectLinkQROpen = !!$page.state.projectLinkQR
-	})
-
-	const fetchShorteners = async (
-		page: number,
-		perPage: number,
-		sortBy: string,
-		project: string,
-		search: string | null,
-	) => {
-		const searchParams = new URLSearchParams()
-
-		if (page) searchParams.set('page', page.toString())
-		if (perPage) searchParams.set('perPage', perPage.toString())
-		if (sortBy) searchParams.set('sortBy', sortBy)
-		if (project) searchParams.set('project', project)
-		if (search) searchParams.set('search', search)
-
-		const response = await fetch(
-			`/api/shortener?${searchParams.toString()}`,
-		)
-
-		const data = await response.json()
-
-		return {
-			shorteners: data.shorteners as (Shortener & {
-				visitorCount: number
-				project: Project
-			})[],
-			pagination: data.pagination as { total: number },
-		}
-	}
-</script>
-
-<div
-	class="flex flex-wrap-reverse items-center justify-start gap-4 px-4 py-4 md:px-10">
-	<div class="hidden items-center gap-4 md:flex">
-		<Select.Root bind:value={sortBy} type="single" name="sortBy">
-			<Select.Trigger class="w-[180px]">
-				{sortBy}
-			</Select.Trigger>
-			<Select.Content>
-				<Select.Group>
-					<Select.GroupHeading>Sort By</Select.GroupHeading>
-					{#each ['latest', 'oldest', 'most_visited'] as sortBy}
-						<Select.Item value={sortBy} label={sortBy}>
-							{sortBy.removeUnderscores().capitalize()}
-						</Select.Item>
-					{/each}
-				</Select.Group>
-			</Select.Content>
-		</Select.Root>
-	</div>
-	<div class="hidden items-center gap-4 sm:flex">
-		<Input
-			type="text"
-			placeholder="search"
-			class="max-w-[250px]"
-			autofocus
-			value={search}
-			oninput={({ target }) => {
-				clearTimeout(searchUpdateTimeout)
-				searchUpdateTimeout = setTimeout(() => {
-					search = target.value
-				}, 500)
-			}} />
-		<Button disabled={!search} onclick={() => (search = '')}>
-			Clear
-		</Button>
-	</div>
-	<Form bind:dialogOpen data={data.form} />
-</div>
-
-{#await fetchShorteners(pageNumber, perPage, sortBy, selectedProject, search)}
-	<div class="flex flex-wrap gap-4 px-4 py-4 md:px-10">
-		{#each [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as _}
-			<Skeleton class="h-[150px] w-[500px] rounded-lg" />
-		{/each}
-	</div>
-{:then result}
-	{#if result.shorteners.length > 0}
-		<ScrollArea class="flex-grow">
-			<div
-				class="grid grid-cols-[repeat(auto-fit,_minmax(500px,_1fr))] gap-4 px-4 py-4 md:px-10">
-				{#each result.shorteners as shortener}
-					<ShortenerCard
-						{shortener}
-						project={data.project}
-						shortener_url={data.shortener_url} />
-				{/each}
-			</div>
-		</ScrollArea>
-		<div class="flex items-center justify-between border-t p-4">
-			<Select.Root
-				name="page_size"
-				type="single"
-				value={perPage.toString()}
-				onValueChange={(value) => {
-					perPage = parseInt(value)
-					pageNumber = 1
-				}}>
-				<Select.Trigger class="w-[180px]">
-					{perPage}
-				</Select.Trigger>
-				<Select.Content>
-					<Select.Group>
-						<Select.GroupHeading>Page Size</Select.GroupHeading>
-						{#each [12, 24, 48, 96] as pageSize}
-							<Select.Item value={pageSize.toString()}>
-								{pageSize}
-							</Select.Item>
-						{/each}
-					</Select.Group>
-				</Select.Content>
-			</Select.Root>
-			<Pagination.Root
-				class="items-end"
-				count={result.pagination.total}
-				{perPage}
-				bind:page={pageNumber}>
-				{#snippet children({ pages, currentPage })}
-					<Pagination.Content>
-						<Pagination.Item>
-							<Pagination.PrevButton>
-								<ChevronLeft class="h-4 w-4" />
-								<span class="hidden sm:block">Previous</span>
-							</Pagination.PrevButton>
-						</Pagination.Item>
-						{#each pages as page (page.key)}
-							{#if page.type === 'ellipsis'}
-								<Pagination.Item>
-									<Pagination.Ellipsis />
-								</Pagination.Item>
-							{:else}
-								<Pagination.Item>
-									<Pagination.Link
-										{page}
-										isActive={currentPage === page.value}>
-										{page.value}
-									</Pagination.Link>
-								</Pagination.Item>
-							{/if}
-						{/each}
-						<Pagination.Item>
-							<Pagination.NextButton>
-								<span class="hidden sm:block">Next</span>
-								<ChevronRight class="h-4 w-4" />
-							</Pagination.NextButton>
-						</Pagination.Item>
-					</Pagination.Content>
-				{/snippet}
-			</Pagination.Root>
-		</div>
-	{:else}
-		<div class="flex flex-grow px-4 py-4 md:px-10">
-			<div
-				class="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm">
-				<div
-					class="flex w-full flex-grow items-center justify-center">
-					<div class="flex flex-col items-center gap-8">
-						<div class="flex flex-col items-center gap-2">
-							<div class="text-4xl font-bold">No Shortener Found</div>
-							<p class="text-muted-foreground">Add a new shortener</p>
-						</div>
-						<Button
-							onclick={() => {
-								dialogOpen = true
-							}}
-							class="w-fit">
-							Add Shortener
-						</Button>
-					</div>
-				</div>
-			</div>
-		</div>
-	{/if}
-{/await}
-
-<Dialog.Root
-	bind:open={editProjectLinkOpen}
-	onOpenChange={(open) => {
-		if (!open) {
-			history.back()
-		}
-	}}>
-	<Dialog.Content>
-		<Dialog.Header>
-			<Dialog.Title>Edit Shortener</Dialog.Title>
-			<Dialog.Description>
-				Edit Shortener Here. Click Save To Save.
-			</Dialog.Description>
-		</Dialog.Header>
-		<ScrollArea class="max-h-[calc(100vh-200px)]">
-			<EditProjectLinkPage
-				data={$page.state.editProjectLink}
-				shallowRouting />
-		</ScrollArea>
-	</Dialog.Content>
-</Dialog.Root>
-
-<Dialog.Root
-	bind:open={projectLinkQROpen}
-	onOpenChange={(open) => {
-		if (!open) {
-			history.back()
-		}
-	}}>
-	<Dialog.Content class="sm:max-w-[425px]">
-		<Dialog.Header>
-			<Dialog.Title>Shortener QR</Dialog.Title>
-			<Dialog.Description>
-				Use this QR code to share the shortener.
-			</Dialog.Description>
-		</Dialog.Header>
-		<ScrollArea class="max-h-[calc(100vh-200px)]">
-			<ProjectLinkQRPage
-				data={$page.state.projectLinkQR}
-				shallowRouting />
-		</ScrollArea>
-	</Dialog.Content>
-</Dialog.Root>
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/[...catchall]/+page.svelte b/frontend/src/routes/(app)/dashboard/projects/[id]/[...catchall]/+page.svelte
deleted file mode 100644
index 101da74..0000000
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/[...catchall]/+page.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="flex justify-center items-center w-full h-full">
-	<div class="flex flex-col gap-12 items-center">
-		<div class="flex flex-col gap-4 items-center">
-			<div class="text-4xl font-bold">404</div>
-			<div class="text-4xl font-bold">Page Not Found</div>
-		</div>
-	</div>
-</div>
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/edit/(components)/form.svelte b/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/edit/(components)/form.svelte
deleted file mode 100644
index 6aaa314..0000000
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/edit/(components)/form.svelte
+++ /dev/null
@@ -1,208 +0,0 @@
-<script lang="ts">
-	import * as Form from '$lib/components/ui/form'
-	import { Input } from '$lib/components/ui/input'
-	import { Switch } from '$lib/components/ui/switch'
-	import { formSchema, type FormSchema } from '../schema'
-	import {
-		type SuperValidated,
-		type Infer,
-		superForm,
-	} from 'sveltekit-superforms'
-	import { zodClient } from 'sveltekit-superforms/adapters'
-	import { toast } from 'svelte-sonner'
-	import { Loader2, LoaderCircle } from 'lucide-svelte'
-	import { Checkbox } from '$lib/components/ui/checkbox'
-	import { onMount } from 'svelte'
-
-	let {
-		data,
-		code,
-		uuid,
-	}: {
-		data: SuperValidated<Infer<FormSchema>>
-		uuid: string
-		code: string
-	} = $props()
-
-	const form = superForm(data, {
-		validators: zodClient(formSchema),
-		invalidateAll: 'force',
-		resetForm: true,
-		onResult: ({ result }) => {
-			if (result.status === 200) {
-				toast.success('Project shortener updated')
-			}
-		},
-		onError: ({ result }) => {
-			toast.error('Error updating shortener')
-		},
-	})
-
-	const { form: formData, enhance, submitting } = form
-
-	let inputTimer: any = $state()
-	let previewData: any = $state()
-	let isPreviewLoading: boolean = $state(false)
-
-	const getMetadata = async () => {
-		isPreviewLoading = true
-		clearTimeout(inputTimer)
-		const link =
-			$formData.link.startsWith('https://') ||
-			$formData.link.startsWith('http://')
-				? $formData.link
-				: 'https://' + $formData.link
-		inputTimer = setTimeout(async () => {
-			const response = await fetch(`/api/url/metadata?url=${link}`)
-			previewData = await response.json()
-			isPreviewLoading = false
-			console.log(previewData)
-		}, 1000)
-	}
-
-	onMount(() => {
-		getMetadata()
-	})
-</script>
-
-<div class="grid grid-cols-4 items-center gap-4 pb-4">
-	<div class="font-bold">Preview</div>
-	<div class="col-span-4 flex flex-col justify-center border">
-		<div class="relative h-64 overflow-hidden">
-			{#if isPreviewLoading}
-				<div class="flex h-full items-center justify-center">
-					<Loader2 class="animate-spin" />
-				</div>
-			{:else if previewData}
-				<img
-					src={previewData.image}
-					alt=""
-					class="h-64 w-full object-cover" />
-				<div
-					class="bg-secondary absolute bottom-2 left-2 rounded-lg px-2">
-					{previewData.title}
-				</div>
-			{/if}
-		</div>
-	</div>
-</div>
-<form
-	method="POST"
-	use:enhance
-	class="flex flex-col gap-6"
-	action={`/dashboard/projects/${uuid}/links/${code}/edit`}>
-	<Form.Field {form} name="link" class="flex flex-col gap-2">
-		<Form.Control>
-			{#snippet children({ props })}
-				<Form.Label>Link</Form.Label>
-				<Input
-					{...props}
-					bind:value={$formData.link}
-					placeholder="https://example.com"
-					oninput={getMetadata} />
-			{/snippet}
-		</Form.Control>
-		<Form.Description>Shortener link</Form.Description>
-		<Form.FieldErrors />
-	</Form.Field>
-	<Form.Field
-		{form}
-		name="custom_code_enable"
-		class="flex items-center gap-2 space-y-0">
-		<Form.Control>
-			{#snippet children({ props })}
-				<Switch
-					{...props}
-					bind:checked={$formData.custom_code_enable} />
-				<Form.Label>Custom Code</Form.Label>
-			{/snippet}
-		</Form.Control>
-	</Form.Field>
-	{#if $formData.custom_code_enable}
-		<Form.Field {form} name="custom_code" class="flex flex-col gap-2">
-			<Form.Control>
-				{#snippet children({ props })}
-					<Input
-						{...props}
-						bind:value={$formData.custom_code}
-						placeholder="abcde" />
-				{/snippet}
-			</Form.Control>
-			<Form.Description>
-				Custom Code For The Shortener
-			</Form.Description>
-			<Form.FieldErrors />
-		</Form.Field>
-	{/if}
-	<Form.Field
-		{form}
-		name="ios"
-		class="flex items-center gap-2 space-y-0">
-		<Form.Control>
-			{#snippet children({ props })}
-				<Switch {...props} bind:checked={$formData.ios} />
-				<Form.Label>iOS Link</Form.Label>
-			{/snippet}
-		</Form.Control>
-	</Form.Field>
-	{#if $formData.ios}
-		<Form.Field {form} name="ios_link" class="flex flex-col gap-2">
-			<Form.Control>
-				{#snippet children({ props })}
-					<Input
-						{...props}
-						bind:value={$formData.ios_link}
-						placeholder="https://example.com" />
-				{/snippet}
-			</Form.Control>
-			<Form.Description>Shortener link for iOS</Form.Description>
-			<Form.FieldErrors />
-		</Form.Field>
-	{/if}
-	<Form.Field
-		{form}
-		name="android"
-		class="flex items-center gap-2 space-y-0">
-		<Form.Control>
-			{#snippet children({ props })}
-				<Switch {...props} bind:checked={$formData.android} />
-				<Form.Label>Android Link</Form.Label>
-			{/snippet}
-		</Form.Control>
-	</Form.Field>
-	{#if $formData.android}
-		<Form.Field
-			{form}
-			name="android_link"
-			class="flex flex-col gap-2">
-			<Form.Control>
-				{#snippet children({ props })}
-					<Input
-						{...props}
-						bind:value={$formData.android_link}
-						placeholder="https://example.com" />
-				{/snippet}
-			</Form.Control>
-			<Form.Description>Shortener link for Android</Form.Description>
-			<Form.FieldErrors />
-		</Form.Field>
-	{/if}
-	<Form.Field
-		{form}
-		name="active"
-		class="flex items-center gap-2 space-y-0">
-		<Form.Control>
-			{#snippet children({ props })}
-				<Checkbox {...props} bind:checked={$formData.active} />
-				<Form.Label>Active</Form.Label>
-			{/snippet}
-		</Form.Control>
-		<Form.FieldErrors />
-	</Form.Field>
-	<Form.Button class="w-fit">
-		{#if $submitting}
-			<LoaderCircle class="animate-spin" />
-		{/if}
-		Save
-	</Form.Button>
-</form>
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/edit/+page.server.ts b/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/edit/+page.server.ts
deleted file mode 100644
index 8d29e26..0000000
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/edit/+page.server.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import type { PageServerLoad } from './$types'
-import { fail, setError, superValidate } from 'sveltekit-superforms'
-import { zod } from 'sveltekit-superforms/adapters'
-import { formSchema } from './schema'
-import type { Actions } from './$types'
-import { db } from '$lib/db'
-import { redirect } from '@sveltejs/kit'
-import { shortener } from '$lib/db/schema'
-import { eq } from 'drizzle-orm'
-import { isAlphanumeric } from '$lib/utils'
-
-export const load = (async (event) => {
-	const { project: selectedProject } = await event.parent()
-	const { linkid } = event.params
-
-	const shortener = await db.query.shortener.findFirst({
-		columns: {
-			id: true,
-			code: true,
-			ios: true,
-			ios_link: true,
-			android: true,
-			android_link: true,
-			link: true,
-			active: true,
-		},
-		where: (shortener, { eq, and }) =>
-			and(
-				eq(shortener.id, linkid),
-				eq(shortener.projectId, selectedProject.id),
-			),
-	})
-
-	if (!shortener) {
-		redirect(300, `/dashboard/projects/${selectedProject.id}`)
-	}
-
-	return {
-		shortener,
-		form: await superValidate(
-			{
-				...shortener,
-				custom_code_enable: true,
-				custom_code: shortener.code,
-			},
-			zod(formSchema),
-		),
-	}
-}) satisfies PageServerLoad
-
-export const actions: Actions = {
-	default: async (event) => {
-		const form = await superValidate(event, zod(formSchema))
-		if (!form.valid) {
-			return fail(400, {
-				form,
-			})
-		}
-
-		const { id } = event.params
-		const user = event.locals.user
-		const project = await db.query.project.findFirst({
-			where: (project, { eq, and }) =>
-				and(eq(project.userId, user.id), eq(project.uuid, id)),
-		})
-
-		if (!project) {
-			return fail(400, {
-				form,
-			})
-		}
-
-		if (form.data.custom_code_enable) {
-			if (!form.data.custom_code) {
-				return setError(
-					form,
-					'custom_code',
-					'Please Enter Custom Code',
-				)
-			}
-			if (!isAlphanumeric(form.data.custom_code)) {
-				return setError(
-					form,
-					'custom_code',
-					'Code cannot contain special characters',
-				)
-			}
-
-			const customCodeExist = await db.query.shortener.findMany({
-				where: (shortener, { eq, and, ne }) =>
-					and(
-						eq(shortener.code, form.data.custom_code),
-						ne(shortener.id, event.params.linkid),
-					),
-				with: {
-					project: true,
-				},
-			})
-
-			for (const shortener of customCodeExist) {
-				if (!shortener.project && !project.enable_custom_domain) {
-					return setError(
-						form,
-						'custom_code',
-						'Duplicated Custom Code',
-					)
-				}
-
-				if (!shortener.project) continue
-
-				if (
-					shortener.project.custom_domain === project.custom_domain
-				) {
-					return setError(
-						form,
-						'custom_code',
-						'Duplicated Custom Code',
-					)
-				}
-			}
-		}
-
-		await db
-			.update(shortener)
-			.set({
-				link: form.data.link,
-				projectId: project.id,
-				userId: user.id,
-				code: form.data.custom_code_enable
-					? form.data.custom_code
-					: undefined,
-				ios: form.data.ios,
-				ios_link: form.data.ios_link,
-				android: form.data.android,
-				android_link: form.data.android_link,
-			})
-			.where(eq(shortener.id, event.params.linkid))
-
-		return { form }
-	},
-}
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/edit/+page.svelte b/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/edit/+page.svelte
deleted file mode 100644
index dbafcfc..0000000
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/edit/+page.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-	import { ScrollArea } from '$lib/components/ui/scroll-area'
-	import type { PageData } from './$types'
-	import Form from './(components)/form.svelte'
-
-	let {
-		data,
-		shallowRouting = $bindable(false),
-	}: { data: PageData; shallowRouting: boolean } = $props()
-</script>
-
-{#if !shallowRouting}
-	<ScrollArea>
-		<div class="max-w-2xl px-10 py-4">
-			<Form
-				data={data.form}
-				uuid={data.project.uuid}
-				code={data.shortener.id} />
-		</div>
-	</ScrollArea>
-{:else}
-	<Form
-		data={data.form}
-		uuid={data.project.uuid}
-		code={data.shortener.id} />
-{/if}
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/edit/schema.ts b/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/edit/schema.ts
deleted file mode 100644
index 88634ef..0000000
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/edit/schema.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { z } from 'zod'
-
-export const formSchema = z.object({
-	link: z.string().url(),
-	project: z.string().optional(),
-	active: z.boolean(),
-	ios: z.boolean(),
-	ios_link: z
-		.union([z.literal(''), z.string().url()])
-		.optional()
-		.nullable(),
-	android: z.boolean(),
-	android_link: z
-		.union([z.literal(''), z.string().url()])
-		.optional()
-		.nullable(),
-	custom_code_enable: z.boolean(),
-	custom_code: z.string(),
-})
-
-export type FormSchema = typeof formSchema
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/qr/(components)/qr.svelte b/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/qr/(components)/qr.svelte
deleted file mode 100644
index 431761a..0000000
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/qr/(components)/qr.svelte
+++ /dev/null
@@ -1,116 +0,0 @@
-<script lang="ts">
-	import { Button, buttonVariants } from '$lib/components/ui/button'
-	import { toast } from 'svelte-sonner'
-	import * as DropdownMenu from '$lib/components/ui/dropdown-menu'
-	import { Badge } from '$lib/components/ui/badge'
-	import { browser } from '$app/environment'
-	import { cn } from '$lib/utils'
-
-	let {
-		background = '#fff',
-		color = '#000',
-		value = '',
-		code = '',
-		cornerSquareStyle = 'square',
-		dotStyle = 'square',
-		existingQrImage = null,
-	}: {
-		background: string
-		color: string
-		value: string
-		code: string
-		cornerSquareStyle: 'dot' | 'square' | 'extra-rounded'
-		dotStyle: 'square' | 'rounded'
-		existingQrImage: string | null
-	} = $props()
-
-	let image = $state('')
-
-	const copyImageToClipboard = async () => {
-		if (!image) return
-
-		const imageData = await fetch(image)
-
-		const imageBlob = await imageData.blob()
-
-		try {
-			navigator.clipboard.write([
-				new ClipboardItem({
-					'image/png': imageBlob,
-				}),
-			])
-			toast.success('Copied Image To Clipboard')
-		} catch (error) {
-			toast.error(
-				'Unable to copy item to clipboard. If you are using firefox, you can change the setting dom.events.asyncclipboard.clipboarditem in about:config to true',
-			)
-		}
-	}
-
-	async function generateQrCode() {
-		const qrcodestyling = new (
-			await import('qr-code-styling')
-		).default({
-			data: value,
-			width: 300,
-			height: 300,
-			margin: 1,
-			qrOptions: {
-				errorCorrectionLevel: 'M',
-				typeNumber: 0,
-			},
-			backgroundOptions: {
-				color: background,
-			},
-			dotsOptions: {
-				color: color,
-				type: dotStyle,
-			},
-			cornersSquareOptions: {
-				type: cornerSquareStyle,
-			},
-			image: existingQrImage || undefined,
-			imageOptions: {
-				imageSize: 0.7,
-				margin: 8,
-			},
-		})
-		const blob = await qrcodestyling.getRawData()
-		if (!blob) return
-		image = URL.createObjectURL(blob)
-	}
-
-	$effect(() => {
-		if (value && browser) {
-			generateQrCode()
-		}
-	})
-</script>
-
-<div class="flex h-full flex-col items-center gap-4">
-	<Badge variant="secondary">
-		{value}
-	</Badge>
-	<img src={image} alt={value} width={300} height={300} />
-	<div class="flex w-full gap-4">
-		<Button class="w-full" onclick={copyImageToClipboard}>
-			Copy Image
-		</Button>
-		<DropdownMenu.Root>
-			<DropdownMenu.Trigger
-				class={cn(buttonVariants({ variant: 'default' }), 'w-full')}>
-				QR Link
-			</DropdownMenu.Trigger>
-			<DropdownMenu.Content>
-				<DropdownMenu.Group>
-					<a href={`/url/${code}/qr`} target="_blank">
-						<DropdownMenu.Item>Standard</DropdownMenu.Item>
-					</a>
-					<a href={`/url/${code}/qr?color=true`} target="_blank">
-						<DropdownMenu.Item>With Style</DropdownMenu.Item>
-					</a>
-				</DropdownMenu.Group>
-			</DropdownMenu.Content>
-		</DropdownMenu.Root>
-	</div>
-</div>
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/qr/+page.server.ts b/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/qr/+page.server.ts
deleted file mode 100644
index 350b855..0000000
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/qr/+page.server.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { db } from '$lib/db'
-import { redirect } from '@sveltejs/kit'
-import type { PageServerLoad } from './$types'
-
-export const load = (async (event) => {
-	const { project: selectedProject } = await event.parent()
-	const { linkid } = event.params
-
-	const shortener = await db.query.shortener.findFirst({
-		columns: {
-			code: true,
-		},
-		where: (shortener, { eq, and }) =>
-			and(
-				eq(shortener.code, linkid),
-				eq(shortener.projectId, selectedProject.id),
-			),
-	})
-
-	if (!shortener) {
-		redirect(300, `/dashboard/projects/${selectedProject.id}`)
-	}
-
-	return { shortener, project: selectedProject }
-}) satisfies PageServerLoad
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/qr/+page.svelte b/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/qr/+page.svelte
deleted file mode 100644
index 10f0d94..0000000
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/qr/+page.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script lang="ts">
-	import { ScrollArea } from '$lib/components/ui/scroll-area'
-	import type { PageData } from './$types'
-	import QR from './(components)/qr.svelte'
-
-	let {
-		data,
-		shallowRouting,
-	}: { data: PageData; shallowRouting: boolean } = $props()
-
-	const url =
-		data.project.enable_custom_domain && data.project.custom_domain
-			? data.project.custom_domain
-			: data.shortener_url
-</script>
-
-{#if !shallowRouting}
-	<ScrollArea>
-		<div class="max-w-2xl px-10 py-4">
-			<QR
-				value={'https://' + url + '/' + data.shortener.code}
-				code={data.shortener.code}
-				background={data.project.qr_background}
-				color={data.project.qr_foreground}
-				cornerSquareStyle={data.project.qrCornerSquareStyle}
-				dotStyle={data.project.qrDotStyle}
-				existingQrImage={data.project.qrImageBase64} />
-		</div>
-	</ScrollArea>
-{:else}
-	<QR
-		value={'https://' + url + '/' + data.shortener.code}
-		code={data.shortener.code}
-		background={data.project.qr_background}
-		color={data.project.qr_foreground}
-		cornerSquareStyle={data.project.qrCornerSquareStyle}
-		dotStyle={data.project.qrDotStyle}
-		existingQrImage={data.project.qrImageBase64} />
-{/if}
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/schema.ts b/frontend/src/routes/(app)/dashboard/projects/[id]/schema.ts
deleted file mode 100644
index 1b6547a..0000000
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/schema.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { z } from 'zod'
-
-export const formSchema = z.object({
-	link: z.string().url(),
-	active: z.boolean(),
-	ios: z.boolean(),
-	ios_link: z.string().url().optional(),
-	android: z.boolean(),
-	android_link: z.string().url().optional(),
-	custom_code_enable: z.boolean(),
-	custom_code: z.string(),
-})
-
-export type FormSchema = typeof formSchema
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/DemoQR.svelte b/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/DemoQR.svelte
deleted file mode 100644
index a92721f..0000000
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/DemoQR.svelte
+++ /dev/null
@@ -1,88 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte'
-	import { browser } from '$app/environment'
-
-	let {
-		background = '#fff',
-		color = '#000',
-		value = 'example.com/abcdefgh',
-		cornerSquareStyle = 'square',
-		dotStyle = 'square',
-		existingQrImage = null,
-		qrImage = null,
-	}: {
-		background: string
-		color: string
-		value: string
-		cornerSquareStyle: 'dot' | 'square' | 'extra-rounded'
-		dotStyle: 'square' | 'rounded'
-		existingQrImage: string | null
-		qrImage: File | null
-	} = $props()
-
-	let image = $state('')
-
-	async function generateQrCode() {
-		if (!document || !window) {
-			return
-		}
-
-		try {
-			const qrImageDataUrl = qrImage
-				? URL.createObjectURL(qrImage)
-				: existingQrImage || undefined
-
-			const qrcodestyling = new (
-				await import('qr-code-styling')
-			).default({
-				data: value,
-				width: 300,
-				height: 300,
-				margin: 1,
-				qrOptions: {
-					errorCorrectionLevel: 'M',
-					typeNumber: 0,
-				},
-				backgroundOptions: {
-					color: background,
-				},
-				dotsOptions: {
-					color: color,
-					type: dotStyle,
-				},
-				cornersSquareOptions: {
-					type: cornerSquareStyle,
-				},
-				image: qrImageDataUrl,
-				imageOptions: {
-					imageSize: 0.7,
-					margin: 8,
-				},
-			})
-			const blob = await qrcodestyling.getRawData()
-			if (!blob) return
-			image = URL.createObjectURL(blob)
-		} catch (e) {
-			image = ''
-		}
-	}
-
-	$effect(() => {
-		if (
-			browser &&
-			background &&
-			color &&
-			cornerSquareStyle &&
-			dotStyle &&
-			(qrImage === null || qrImage)
-		) {
-			generateQrCode()
-		}
-	})
-
-	onMount(() => {
-		generateQrCode()
-	})
-</script>
-
-<img src={image} alt={value} width={300} height={300} />
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/dns-info.svelte b/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/dns-info.svelte
deleted file mode 100644
index 7ceff19..0000000
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/dns-info.svelte
+++ /dev/null
@@ -1,85 +0,0 @@
-<script lang="ts">
-	import * as Tabs from '$lib/components/ui/tabs/index.js'
-	import * as Card from '$lib/components/ui/card/index.js'
-
-	let {
-		host,
-		a_record,
-		aaaa_record,
-		cname_record,
-	}: {
-		host: string
-		cname_record: string
-		a_record: string
-		aaaa_record: string
-	} = $props()
-
-	const defaultValue = cname_record ? 'cname' : 'a'
-</script>
-
-<Tabs.Root value={defaultValue}>
-	<Tabs.List>
-		{#if cname_record}
-			<Tabs.Trigger value="cname">CNAME</Tabs.Trigger>
-		{/if}
-		{#if a_record || aaaa_record}
-			<Tabs.Trigger value="a">A and AAAA</Tabs.Trigger>
-		{/if}
-	</Tabs.List>
-	{#if cname_record}
-		<Tabs.Content value="cname">
-			<Card.Root>
-				<Card.Header
-					class="grid grid-cols-[80px_1fr_1fr] space-y-0 py-4">
-					<Card.Title>Type</Card.Title>
-					<Card.Title>Host</Card.Title>
-					<Card.Title>Value</Card.Title>
-				</Card.Header>
-				<Card.Footer
-					class="bg-muted grid grid-cols-[80px_1fr_1fr] py-4">
-					<Card.Description>CNAME</Card.Description>
-					<Card.Description>{host}</Card.Description>
-					<Card.Description>{cname_record}</Card.Description>
-				</Card.Footer>
-			</Card.Root>
-		</Tabs.Content>
-	{/if}
-	{#if a_record || aaaa_record}
-		<Tabs.Content value="a">
-			<div class="flex flex-col gap-4">
-				{#if a_record}
-					<Card.Root>
-						<Card.Header
-							class="grid grid-cols-[80px_1fr_1fr] space-y-0 py-4">
-							<Card.Title>Type</Card.Title>
-							<Card.Title>Host</Card.Title>
-							<Card.Title>Value</Card.Title>
-						</Card.Header>
-						<Card.Footer
-							class="bg-muted grid grid-cols-[80px_1fr_1fr] py-4">
-							<Card.Description>A</Card.Description>
-							<Card.Description>{host}</Card.Description>
-							<Card.Description>{a_record}</Card.Description>
-						</Card.Footer>
-					</Card.Root>
-				{/if}
-				{#if aaaa_record}
-					<Card.Root>
-						<Card.Header
-							class="grid grid-cols-[80px_1fr_1fr] space-y-0 py-4">
-							<Card.Title>Type</Card.Title>
-							<Card.Title>Host</Card.Title>
-							<Card.Title>Value</Card.Title>
-						</Card.Header>
-						<Card.Footer
-							class="bg-muted grid grid-cols-[80px_1fr_1fr] py-4">
-							<Card.Description>AAAA</Card.Description>
-							<Card.Description>{host}</Card.Description>
-							<Card.Description>{aaaa_record}</Card.Description>
-						</Card.Footer>
-					</Card.Root>
-				{/if}
-			</div>
-		</Tabs.Content>
-	{/if}
-</Tabs.Root>
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/dns-tooltip.svelte b/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/dns-tooltip.svelte
deleted file mode 100644
index b5d669b..0000000
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/dns-tooltip.svelte
+++ /dev/null
@@ -1,74 +0,0 @@
-<script lang="ts">
-	import * as Tooltip from '$lib/components/ui/tooltip/index.js'
-	import { InfoIcon } from 'lucide-svelte'
-
-	let {
-		a_record,
-		aaaa_record,
-		cname_record,
-		custom_ip,
-		domain,
-	}: {
-		domain: string
-		custom_ip: string | null
-		cname_record: string
-		a_record: string
-		aaaa_record: string
-	} = $props()
-</script>
-
-<Tooltip.Provider>
-	<Tooltip.Root>
-		<Tooltip.Trigger class="flex items-center gap-1">
-			<InfoIcon class="h-4 w-4" />
-			{#if custom_ip}
-				{custom_ip}
-			{:else if cname_record}
-				{cname_record}
-			{:else if a_record}
-				{a_record}
-			{:else if aaaa_record}
-				{aaaa_record}
-			{:else}
-				{'Public IP not found'}
-			{/if}
-		</Tooltip.Trigger>
-		<Tooltip.Content>
-			{#if custom_ip}
-				<div>
-					{'Create a CNAME/ALIAS record for ' +
-						domain +
-						' to ' +
-						custom_ip}
-				</div>
-			{/if}
-			{#if cname_record}
-				<div>
-					{'Create a CNAME/ALIAS record for ' +
-						domain +
-						' to ' +
-						cname_record}
-				</div>
-			{/if}
-			{#if a_record}
-				<div>
-					{'Create a A record for ' + domain + ' to ' + a_record}
-				</div>
-			{/if}
-
-			{#if aaaa_record}
-				<div>
-					{'Create a AAAA record for ' +
-						domain +
-						' to ' +
-						aaaa_record}
-				</div>
-			{/if}
-			{#if !(custom_ip || cname_record || a_record || aaaa_record)}
-				<div>
-					{'Public IP not found'}
-				</div>
-			{/if}
-		</Tooltip.Content>
-	</Tooltip.Root>
-</Tooltip.Provider>
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/form.svelte b/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/form.svelte
deleted file mode 100644
index 0ccad24..0000000
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/form.svelte
+++ /dev/null
@@ -1,250 +0,0 @@
-<script lang="ts">
-	import * as Form from '$lib/components/ui/form'
-	import { Input } from '$lib/components/ui/input'
-	import { Button } from '$lib/components/ui/button'
-	import { formSchema, type FormSchema } from '../schema'
-	import {
-		type SuperValidated,
-		type Infer,
-		superForm,
-	} from 'sveltekit-superforms'
-	import { zodClient } from 'sveltekit-superforms/adapters'
-	import { toast } from 'svelte-sonner'
-	import { LoaderCircle } from 'lucide-svelte'
-	import DemoQr from './DemoQR.svelte'
-	import { cn } from '$lib/utils'
-
-	let {
-		data,
-		qrImageBase64 = null,
-		isPro = false,
-	}: {
-		data: SuperValidated<Infer<FormSchema>>
-		qrImageBase64: string | null
-		isPro: boolean
-	} = $props()
-
-	let qrImageInput: HTMLInputElement | undefined = $state()
-
-	const form = superForm(data, {
-		validators: zodClient(formSchema),
-		invalidateAll: 'force',
-		resetForm: true,
-		onResult: ({ result }) => {
-			if (result.status === 200) {
-				toast.success('Project settings updated')
-			}
-			if (result.status === 400) {
-				toast.error('Error updating project settings')
-			}
-		},
-	})
-
-	const { form: formData, enhance, submitting } = form
-</script>
-
-<form
-	method="POST"
-	use:enhance
-	enctype="multipart/form-data"
-	class="flex flex-col gap-4"
-	action="?/update">
-	<Form.Field {form} name="name" class="flex flex-col gap-2">
-		<Form.Control>
-			{#snippet children({ props })}
-				<Form.Label>Name</Form.Label>
-				<Input {...props} bind:value={$formData.name} />
-			{/snippet}
-		</Form.Control>
-		<Form.Description>Update Project Name</Form.Description>
-		<Form.FieldErrors />
-	</Form.Field>
-	<div class="flex justify-center">
-		<DemoQr
-			background={$formData.qr_background}
-			color={$formData.qr_foreground}
-			cornerSquareStyle={$formData.qrCornerSquareStyle}
-			dotStyle={$formData.qrDotStyle}
-			existingQrImage={qrImageBase64}
-			qrImage={$formData.qrImage} />
-	</div>
-	<Form.Field {form} name="qr_background" class="flex flex-col gap-2">
-		<Form.Control>
-			{#snippet children({ props })}
-				<Form.Label>Background Color</Form.Label>
-				<Input {...props} bind:value={$formData.qr_background} />
-			{/snippet}
-		</Form.Control>
-		<Form.Description>QR Code background color</Form.Description>
-		<Form.FieldErrors />
-	</Form.Field>
-	<Form.Field {form} name="qr_foreground" class="flex flex-col gap-2">
-		<Form.Control>
-			{#snippet children({ props })}
-				<Form.Label>Foreground Color</Form.Label>
-				<Input {...props} bind:value={$formData.qr_foreground} />
-			{/snippet}
-		</Form.Control>
-		<Form.Description>QR Code foreground color</Form.Description>
-		<Form.FieldErrors />
-	</Form.Field>
-	<Form.Field {form} name="qrImage">
-		<Form.Control>
-			{#snippet children({ props })}
-				<Form.Label>
-					Image <span class="text-brand">(Pro)</span>
-				</Form.Label>
-				<div>
-					{#if !$formData.qrImage && !qrImageBase64}
-						<button
-							onclick={(e) => {
-								e.preventDefault()
-								qrImageInput.click()
-							}}>
-							<div
-								class="flex h-16 w-16 items-center justify-center rounded-lg border-4 border-dashed">
-							</div>
-						</button>
-					{:else}
-						<button
-							onclick={(e) => {
-								e.preventDefault()
-								qrImageInput.click()
-							}}>
-							<div
-								class="flex h-16 w-16 items-center justify-center rounded-lg">
-								<img
-									src={$formData.qrImage
-										? URL.createObjectURL($formData.qrImage)
-										: qrImageBase64}
-									alt={'image'}
-									width={64}
-									height={64} />
-							</div>
-						</button>
-					{/if}
-				</div>
-				<Form.Description>Click to edit</Form.Description>
-				<input
-					{...props}
-					hidden
-					bind:this={qrImageInput}
-					accept="image/png, image/jpeg"
-					type="file"
-					disabled={!isPro}
-					oninput={(e) => {
-						const file = e.currentTarget.files?.item(0)
-						if (!file) return
-
-						if (file.size > 2097152) {
-							toast.error('Too Big! Max file size is 2MB')
-							return
-						}
-						$formData.qrImage = file
-					}} />
-			{/snippet}
-		</Form.Control>
-		<Form.FieldErrors />
-	</Form.Field>
-	<Form.Field {form} name="qrCornerSquareStyle">
-		<Form.Control>
-			{#snippet children({ props })}
-				<Form.Label>
-					Corner Square Style <span class="text-brand">(Pro)</span>
-				</Form.Label>
-				<Input
-					{...props}
-					class="hidden"
-					hidden
-					aria-hidden
-					bind:value={$formData.qrCornerSquareStyle} />
-			{/snippet}
-		</Form.Control>
-		<div class="flex gap-4">
-			<Button
-				disabled={!isPro}
-				onclick={() => ($formData.qrCornerSquareStyle = 'square')}
-				class={cn(
-					'flex flex-col gap-3 border p-12',
-					$formData.qrCornerSquareStyle === 'square'
-						? 'bg-primary-foreground'
-						: 'bg-transparent',
-				)}>
-				<div class="border-brand border-4 p-4"></div>
-				Square
-			</Button>
-			<Button
-				disabled={!isPro}
-				onclick={() => ($formData.qrCornerSquareStyle = 'dot')}
-				class={cn(
-					'flex flex-col gap-3 border p-12',
-					$formData.qrCornerSquareStyle === 'dot'
-						? 'bg-primary-foreground'
-						: 'bg-transparent',
-				)}>
-				<div class="border-brand rounded-full border-4 p-4"></div>
-				Dot
-			</Button>
-			<Button
-				disabled={!isPro}
-				onclick={() =>
-					($formData.qrCornerSquareStyle = 'extra-rounded')}
-				class={cn(
-					'flex flex-col gap-3 border p-12',
-					$formData.qrCornerSquareStyle === 'extra-rounded'
-						? 'bg-primary-foreground'
-						: 'bg-transparent',
-				)}>
-				<div class="border-brand rounded-lg border-4 p-4"></div>
-				Rounded
-			</Button>
-		</div>
-	</Form.Field>
-	<Form.Field {form} name="qrDotStyle">
-		<Form.Control>
-			{#snippet children({ props })}
-				<Form.Label>
-					Dot Style <span class="text-brand">(Pro)</span>
-				</Form.Label>
-				<Input
-					{...props}
-					class="hidden"
-					hidden
-					aria-hidden
-					bind:value={$formData.qrDotStyle} />
-			{/snippet}
-		</Form.Control>
-		<div class="flex gap-4">
-			<Button
-				disabled={!isPro}
-				onclick={() => ($formData.qrDotStyle = 'square')}
-				class={cn(
-					'flex flex-col gap-3 border p-12',
-					$formData.qrDotStyle === 'square'
-						? 'bg-primary-foreground'
-						: 'bg-transparent',
-				)}>
-				<div class="border-brand border-4"></div>
-				Square
-			</Button>
-			<Button
-				disabled={!isPro}
-				onclick={() => ($formData.qrDotStyle = 'rounded')}
-				class={cn(
-					'flex flex-col gap-3 border p-12',
-					$formData.qrDotStyle === 'rounded'
-						? 'bg-primary-foreground'
-						: 'bg-transparent',
-				)}>
-				<div class="border-brand w-4 rounded-lg border-4"></div>
-				Rounded
-			</Button>
-		</div>
-	</Form.Field>
-	<Form.Button class="w-fit self-end">
-		{#if $submitting}
-			<LoaderCircle class="animate-spin" />
-		{/if}
-		Save
-	</Form.Button>
-</form>
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/settings/+page.server.ts b/frontend/src/routes/(app)/dashboard/projects/[id]/settings/+page.server.ts
deleted file mode 100644
index 7eca1a3..0000000
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/settings/+page.server.ts
+++ /dev/null
@@ -1,447 +0,0 @@
-import { db } from '$lib/db'
-import type { PageServerLoad, Actions } from './$types'
-import {
-	message,
-	setError,
-	setMessage,
-	superValidate,
-	fail,
-	withFiles,
-} from 'sveltekit-superforms'
-import {
-	formSchema,
-	deleteSchema,
-	customDomainFormSchema,
-	enableCustomDomainFormSchema,
-} from './schema'
-import { zod } from 'sveltekit-superforms/adapters'
-import {
-	project as projectTable,
-	shortener,
-	visitor,
-} from '$lib/db/schema'
-import { and, eq } from 'drizzle-orm'
-import {
-	checkDomainAvailable,
-	createCustomDomain,
-	deleteCustomDomain,
-} from '$lib/server/domain'
-import { env } from '$env/dynamic/private'
-
-export const load = (async (event) => {
-	const { project } = await event.parent()
-
-	let cnameRecord = ''
-	let aRecord = ''
-	let aaaaRecord = ''
-
-	const provider = env.PRIVATE_HOSTING_PROVIDER
-
-	if (provider === 'fly.io') {
-		cnameRecord = env.PRIVATE_FLYIO_CNAME
-		aRecord = env.PRIVATE_FLYIO_IPV4
-		aaaaRecord = env.PRIVATE_FLYIO_IPV6
-	} else if (provider === 'railway') {
-	} else {
-		aRecord = env.PUBLIC_SHORTENER_IP || ''
-	}
-
-	return {
-		form: await superValidate(
-			{
-				name: project.name,
-				qr_background: project.qr_background,
-				qr_foreground: project.qr_foreground,
-				qrCornerSquareStyle: project.qrCornerSquareStyle,
-				qrDotStyle: project.qrDotStyle,
-			},
-			zod(formSchema),
-		),
-		qrImageBase64: project.qrImageBase64,
-		enableCustomDomainForm: await superValidate(
-			{ enableDomain: project.custom_domain || '' },
-			zod(enableCustomDomainFormSchema),
-		),
-		customDomainForm: await superValidate(
-			{ domain: project.custom_domain || '' },
-			zod(customDomainFormSchema),
-		),
-		deleteForm: await superValidate(
-			{ deleteShorteners: true },
-			zod(deleteSchema),
-			{
-				id: 'deleteProject',
-			},
-		),
-		cnameRecord,
-		aRecord,
-		aaaaRecord,
-	}
-}) satisfies PageServerLoad
-
-export const actions: Actions = {
-	update: async (event) => {
-		const form = await superValidate(event, zod(formSchema))
-		if (!form.valid) {
-			return fail(
-				400,
-				withFiles({
-					form,
-				}),
-			)
-		}
-		const user = event.locals.user
-
-		const qrImage = form.data.qrImage
-
-		const qrImageType = qrImage ? qrImage.type : undefined
-		const qrImageBlob = qrImage
-			? await qrImage.arrayBuffer()
-			: undefined
-		const qrImageBase64 = qrImageBlob
-			? Buffer.from(qrImageBlob).toString('base64')
-			: undefined
-
-		await db
-			.update(projectTable)
-			.set({
-				name: form.data.name,
-				qr_background: form.data.qr_background,
-				qr_foreground: form.data.qr_foreground,
-				qrCornerSquareStyle:
-					user.plan !== 'free'
-						? form.data.qrCornerSquareStyle
-						: undefined,
-				qrDotStyle:
-					user.plan !== 'free' ? form.data.qrDotStyle : undefined,
-				qrImageBase64:
-					user.plan !== 'free'
-						? qrImage
-							? `data:${qrImageType};base64,${qrImageBase64}`
-							: undefined
-						: undefined,
-			})
-			.where(
-				and(
-					eq(projectTable.uuid, event.params.id),
-					eq(projectTable.userId, user.id),
-				),
-			)
-
-		return withFiles({
-			form,
-		})
-	},
-	enable_custom_domain: async (event) => {
-		const form = await superValidate(
-			event,
-			zod(enableCustomDomainFormSchema),
-		)
-		if (!form.valid) {
-			return fail(400, {
-				form,
-			})
-		}
-
-		if (form.data.enableDomain === '') {
-			return setError(form, 'enableDomain', 'domain cannot be empty')
-		}
-
-		const userId = event.locals.user.id
-
-		if (
-			!event.locals.user.email_verified &&
-			env.PRIVATE_MAIL_PROVIDER &&
-			env.PRIVATE_MAIL_PROVIDER !== ''
-		) {
-			return setError(
-				form,
-				'enableDomain',
-				'Please verify your email account',
-			)
-		}
-
-		if (event.locals.user.plan === 'free') {
-			return setError(
-				form,
-				'enableDomain',
-				'Please upgrade your account to pro plan to use this feature',
-			)
-		}
-
-		if (event.locals.user.plan === 'pro') {
-			const projectsWithEnabledDomains =
-				await db.query.project.findMany({
-					where: (projectTable, { eq, and }) =>
-						and(
-							eq(projectTable.userId, userId),
-							eq(projectTable.enable_custom_domain, true),
-						),
-				})
-
-			if (projectsWithEnabledDomains.length >= 5) {
-				return setError(
-					form,
-					'enableDomain',
-					'You are only allowed to use maximum 5 custom domains in pro plan',
-				)
-			}
-		}
-
-		const existingProject = await db.query.project.findFirst({
-			where: (projectTable, { eq, and }) =>
-				and(
-					eq(projectTable.uuid, event.params.id),
-					eq(projectTable.userId, userId),
-				),
-		})
-
-		if (!existingProject) {
-			return fail(400, { message: 'Project not found' })
-		}
-
-		const sameDomainDifferentProject =
-			await db.query.project.findFirst({
-				where: (projectTable, { eq, and, ne }) =>
-					and(
-						ne(projectTable.uuid, event.params.id),
-						eq(projectTable.custom_domain, form.data.enableDomain),
-					),
-			})
-
-		if (sameDomainDifferentProject) {
-			return setError(form, 'enableDomain', 'Domain already taken')
-		}
-
-		const domainAvailable = await checkDomainAvailable(
-			form.data.enableDomain,
-		)
-
-		if (!domainAvailable) {
-			return setError(form, 'enableDomain', 'Domain is not available')
-		}
-
-		const customDomain = await createCustomDomain(
-			form.data.enableDomain,
-		)
-
-		if (!customDomain.success) {
-			return setError(
-				form,
-				'enableDomain',
-				'Cannot create custom domain',
-			)
-		}
-
-		await db
-			.update(projectTable)
-			.set({
-				custom_domain: form.data.enableDomain,
-				custom_domain_id: customDomain.id,
-				custom_ip: customDomain.ip,
-				enable_custom_domain: true,
-			})
-			.where(
-				and(
-					eq(projectTable.uuid, event.params.id),
-					eq(projectTable.userId, userId),
-				),
-			)
-
-		return setMessage(form, 'Custom Domain Enabled')
-	},
-	disable_custom_domain: async (event) => {
-		return { message: 'Disabling custom domain is unavailable' }
-		const userId = event.locals.user.id
-
-		const existingProject = await db.query.project.findFirst({
-			where: (projectTable, { eq, and }) =>
-				and(
-					eq(projectTable.uuid, event.params.id),
-					eq(projectTable.userId, userId),
-				),
-		})
-
-		if (!existingProject) {
-			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({
-				enable_custom_domain: false,
-			})
-			.where(
-				and(
-					eq(projectTable.uuid, event.params.id),
-					eq(projectTable.userId, userId),
-				),
-			)
-
-		return { message: 'Custom domain disabled' }
-	},
-	update_custom_domain: async (event) => {
-		const form = await superValidate(
-			event,
-			zod(customDomainFormSchema),
-		)
-		if (!form.valid) {
-			return fail(400, {
-				form,
-			})
-		}
-
-		const userId = event.locals.user.id
-
-		const existingProject = await db.query.project.findFirst({
-			where: (projectTable, { eq, and }) =>
-				and(
-					eq(projectTable.uuid, event.params.id),
-					eq(projectTable.userId, userId),
-				),
-		})
-
-		if (!existingProject || !existingProject.enable_custom_domain) {
-			return fail(400, {
-				form,
-			})
-		}
-
-		const sameDomainDifferentProject =
-			await db.query.project.findFirst({
-				where: (projectTable, { eq, and, ne }) =>
-					and(
-						ne(projectTable.uuid, event.params.id),
-						eq(projectTable.custom_domain, form.data.domain),
-					),
-			})
-
-		if (sameDomainDifferentProject) {
-			return setError(form, 'domain', 'Domain already taken')
-		}
-
-		const sameDomainSameProject = await db.query.project.findFirst({
-			where: (projectTable, { eq, and }) =>
-				and(
-					eq(projectTable.uuid, event.params.id),
-					eq(projectTable.custom_domain, form.data.domain),
-				),
-		})
-
-		if (sameDomainSameProject) {
-			return { form }
-		}
-
-		const domainAvailable = await checkDomainAvailable(
-			form.data.domain,
-		)
-
-		if (!domainAvailable) {
-			return setError(form, 'domain', 'Domain is not available')
-		}
-
-		const customDomain = await createCustomDomain(form.data.domain)
-
-		if (!customDomain.success) {
-			return setError(form, 'domain', 'Cannot create custom domain')
-		}
-
-		const deleteOldCustomDomain = await deleteCustomDomain(
-			existingProject.custom_domain_id,
-		)
-
-		if (!deleteOldCustomDomain.success) {
-			return setError(
-				form,
-				'domain',
-				'Cannot delete old custom domain',
-			)
-		}
-
-		await db
-			.update(projectTable)
-			.set({
-				custom_domain: form.data.domain,
-				custom_domain_id: customDomain.id,
-				custom_ip: customDomain.ip,
-			})
-			.where(
-				and(
-					eq(projectTable.uuid, event.params.id),
-					eq(projectTable.userId, userId),
-				),
-			)
-
-		return {
-			form,
-		}
-	},
-	delete: async (event) => {
-		const userId = event.locals.user.id
-
-		const form = await superValidate(event, zod(deleteSchema))
-
-		if (!form.valid) {
-			return fail(400, {
-				form,
-			})
-		}
-
-		try {
-			const deletedProject = await db
-				.delete(projectTable)
-				.where(
-					and(
-						eq(projectTable.uuid, event.params.id),
-						eq(projectTable.userId, userId),
-					),
-				)
-				.returning()
-
-			await deleteCustomDomain(deletedProject[0].custom_domain_id)
-
-			if (form.data.deleteShorteners) {
-				const deletedShorteners = await db
-					.delete(shortener)
-					.where(
-						and(
-							eq(shortener.projectId, deletedProject[0].id),
-							eq(shortener.userId, userId),
-						),
-					)
-					.returning()
-				deletedShorteners.map(async (shortener) => {
-					await db
-						.delete(visitor)
-						.where(eq(visitor.shortenerId, shortener.id))
-				})
-			} else {
-				await db
-					.update(shortener)
-					.set({ projectId: null })
-					.where(
-						and(
-							eq(shortener.projectId, deletedProject[0].id),
-							eq(shortener.userId, userId),
-						),
-					)
-			}
-
-			return {
-				form,
-			}
-		} catch (error) {
-			return fail(400, {
-				form,
-			})
-		}
-	},
-}
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/settings/+page.svelte b/frontend/src/routes/(app)/dashboard/projects/[id]/settings/+page.svelte
deleted file mode 100644
index 503af33..0000000
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/settings/+page.svelte
+++ /dev/null
@@ -1,397 +0,0 @@
-<script lang="ts">
-	import { env } from '$env/dynamic/public'
-	import { Button, buttonVariants } from '$lib/components/ui/button'
-	import * as Card from '$lib/components/ui/card'
-	import { Checkbox } from '$lib/components/ui/checkbox'
-	import * as Dialog from '$lib/components/ui/dialog'
-	import * as Form from '$lib/components/ui/form'
-	import { Input } from '$lib/components/ui/input'
-	import { ScrollArea } from '$lib/components/ui/scroll-area'
-	import { Separator } from '$lib/components/ui/separator'
-	import * as Tooltip from '$lib/components/ui/tooltip'
-	import {
-		CircleCheckBigIcon,
-		CircleDashedIcon,
-		CircleXIcon,
-		InfoIcon,
-		LoaderCircle,
-	} from 'lucide-svelte'
-	import { toast } from 'svelte-sonner'
-	import { superForm } from 'sveltekit-superforms'
-	import DnsInfo from './(components)/dns-info.svelte'
-	import DnsTooltip from './(components)/dns-tooltip.svelte'
-	import EditForm from './(components)/form.svelte'
-
-	let { data } = $props()
-
-	let deleteDialogOpen = $state(false)
-
-	const form = superForm(data.deleteForm, {
-		invalidateAll: 'force',
-		resetForm: true,
-		onResult: ({ result }) => {
-			if (result.status === 200) {
-				toast.success('Project deleted')
-				deleteDialogOpen = false
-			}
-			if (result.status === 400) {
-				toast.error('Error deleting project')
-			}
-		},
-	})
-
-	const { form: formData, enhance, submitting } = form
-
-	const customDomainForm = superForm(data.customDomainForm, {
-		invalidateAll: 'force',
-		resetForm: true,
-		onResult: ({ result }) => {
-			if (result.status === 200) {
-				toast.success('Custom domain updated')
-			}
-			if (result.status === 400) {
-				toast.error('Error updating custom domain')
-			}
-		},
-	})
-
-	const {
-		form: customDomainFormData,
-		enhance: customDomainEnhance,
-		submitting: customDomainSubmitting,
-	} = customDomainForm
-
-	const enableCustomDomainForm = superForm(
-		data.enableCustomDomainForm,
-		{
-			onUpdated: ({ form }) => {
-				if (form.valid) {
-					toast.success(form.message)
-				}
-			},
-		},
-	)
-
-	const {
-		form: enableCustomDomainFormData,
-		enhance: enableCustomDomainEnchance,
-		submit: enableCustomDomainSubmit,
-		submitting: enableCustomDomainSubmitting,
-	} = enableCustomDomainForm
-</script>
-
-<ScrollArea>
-	<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-muted-foreground text-sm">
-				Update project domain.
-			</p>
-		</div>
-		<Separator />
-
-		<Card.Root>
-			<Card.Content>
-				<div class="flex items-center gap-4">
-					<div class="">
-						{#if data.project.domain_status === 'pending'}
-							<CircleDashedIcon class="text-warning h-8 w-8" />
-						{:else if data.project.domain_status === 'verified'}
-							<CircleCheckBigIcon class="text-success h-8 w-8" />
-						{:else if data.project.domain_status === 'disabled'}
-							<CircleXIcon class="text-destructive h-8 w-8" />
-						{/if}
-					</div>
-					<div class="flex-grow">
-						{#if data.project.enable_custom_domain && data.project.custom_domain}
-							<Card.Title>
-								{data.project.custom_domain}
-							</Card.Title>
-
-							<Card.Description>custom domain</Card.Description>
-
-							<Card.Description>
-								<DnsTooltip
-									domain={data.project.custom_domain}
-									custom_ip={data.project.custom_ip}
-									a_record={data.aRecord}
-									aaaa_record={data.aaaaRecord}
-									cname_record={data.cnameRecord} />
-							</Card.Description>
-						{:else}
-							<Card.Title>
-								{env.PUBLIC_SHORTENER_URL}
-							</Card.Title>
-
-							<Card.Description>default domain</Card.Description>
-						{/if}
-					</div>
-					<div>
-						{#if !data.project.enable_custom_domain}
-							<Dialog.Root>
-								<Dialog.Trigger
-									class={buttonVariants({ variant: 'default' })}>
-									Enable Custom Domain
-								</Dialog.Trigger>
-
-								<Dialog.Content>
-									<Dialog.Header>
-										<Dialog.Title>
-											Are you absolutely sure?
-										</Dialog.Title>
-										<Dialog.Description>
-											Enabling a custom domain will allow you to use
-											your project with a custom domain.
-										</Dialog.Description>
-									</Dialog.Header>
-									<form
-										method="POST"
-										action="?/enable_custom_domain"
-										class="flex flex-col gap-6"
-										use:enableCustomDomainEnchance>
-										<Form.Field
-											form={enableCustomDomainForm}
-											name="enableDomain"
-											class="flex flex-col gap-2">
-											<Form.Control>
-												{#snippet children({ props })}
-													<Form.Label>Add Custom Domain</Form.Label>
-													<div class="flex items-center space-x-2">
-														<Input
-															{...props}
-															bind:value={$enableCustomDomainFormData.enableDomain}
-															placeholder="your-custom-domain.com" />
-													</div>
-												{/snippet}
-											</Form.Control>
-											<Form.Description
-												class="flex items-center justify-between gap-2">
-												<Tooltip.Provider>
-													<Tooltip.Root>
-														<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>
-															<p>
-																Only include the domain name, not the
-																protocol.
-															</p>
-															<p>
-																Make sure the domain is pointing to
-																our server.
-															</p>
-															<p>
-																Please contact us if you need a custom
-																domain.
-															</p>
-														</Tooltip.Content>
-													</Tooltip.Root>
-												</Tooltip.Provider>
-											</Form.Description>
-											<Form.FieldErrors />
-										</Form.Field>
-									</form>
-
-									{#if data.cnameRecord || data.aRecord || data.aaaaRecord}
-										<DnsInfo
-											host={$enableCustomDomainFormData.enableDomain}
-											cname_record={data.cnameRecord}
-											a_record={data.aRecord}
-											aaaa_record={data.aaaaRecord} />
-									{/if}
-
-									<Dialog.Footer>
-										<Dialog.Close
-											class={buttonVariants({ variant: 'outline' })}>
-											Cancel
-										</Dialog.Close>
-										<Button onclick={enableCustomDomainSubmit}>
-											{#if $enableCustomDomainSubmitting}
-												<LoaderCircle class="animate-spin" />
-											{/if}
-											Enable
-										</Button>
-									</Dialog.Footer>
-								</Dialog.Content>
-							</Dialog.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
-											onclick={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>
-			</Card.Content>
-		</Card.Root>
-		{#if data.project.enable_custom_domain}
-			<form
-				method="POST"
-				action="?/update_custom_domain"
-				use:customDomainEnhance>
-				<Form.Field
-					form={customDomainForm}
-					name="domain"
-					class="flex flex-col gap-2">
-					<Form.Control>
-						{#snippet children({ props })}
-							<Form.Label>Add Custom Domain</Form.Label>
-							<div class="flex items-center space-x-2">
-								<Input
-									{...props}
-									bind:value={$customDomainFormData.domain}
-									placeholder="your-custom-domain.com" />
-								<Form.Button class="w-fit">
-									{#if $customDomainSubmitting}
-										<LoaderCircle class="animate-spin" />
-									{/if}
-									Update
-								</Form.Button>
-							</div>
-						{/snippet}
-					</Form.Control>
-					<Form.Description
-						class="flex items-center justify-between gap-2">
-						<Tooltip.Provider>
-							<Tooltip.Root>
-								<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>
-									<p>
-										Only include the domain name, not the protocol.
-									</p>
-									<p>
-										Make sure the domain is pointing to our server.
-									</p>
-									<p>
-										Please contact us if you need a custom domain.
-									</p>
-								</Tooltip.Content>
-							</Tooltip.Root>
-						</Tooltip.Provider>
-					</Form.Description>
-					<Form.FieldErrors />
-				</Form.Field>
-			</form>
-		{/if}
-
-		<div>
-			<h3 class="text-lg font-medium">Settings</h3>
-			<p class="text-muted-foreground text-sm">
-				Update project settings.
-			</p>
-		</div>
-		<Separator />
-
-		<EditForm
-			data={data.form}
-			isPro={data.user.plan !== 'free'}
-			qrImageBase64={data.qrImageBase64} />
-
-		<Separator />
-
-		<div>
-			<h3 class="text-lg font-medium">Danger Zone</h3>
-		</div>
-		<div class="border-destructive rounded-lg border">
-			<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-muted-foreground text-xs">
-						Permanently delete your project
-					</span>
-				</div>
-				<Dialog.Root
-					open={deleteDialogOpen}
-					onOpenChange={(open) => (deleteDialogOpen = open)}>
-					<Dialog.Trigger
-						class={buttonVariants({ variant: 'destructive' })}>
-						Delete Project
-					</Dialog.Trigger>
-					<Dialog.Content>
-						<Dialog.Header>
-							<Dialog.Title>
-								Are you sure absolutely sure?
-							</Dialog.Title>
-							<Dialog.Description>
-								This action cannot be undone. This will permanently
-								delete your project and all its associated data.
-							</Dialog.Description>
-						</Dialog.Header>
-						<form method="POST" action="?/delete" use:enhance>
-							<Form.Field
-								{form}
-								name="deleteShorteners"
-								class="flex flex-col gap-2">
-								<Form.Control>
-									{#snippet children({ props })}
-										<Input
-											{...props}
-											bind:value={$formData.deleteShorteners}
-											type="hidden" />
-										<div class="flex items-center gap-2">
-											<Checkbox
-												{...props}
-												id="deleteShorteners"
-												bind:checked={$formData.deleteShorteners} />
-											<Form.Label for="deleteShorteners">
-												Delete Shorteners?
-											</Form.Label>
-										</div>
-									{/snippet}
-								</Form.Control>
-								<Form.FieldErrors />
-							</Form.Field>
-							<div class="flex justify-end gap-2">
-								<Button
-									variant="outline"
-									onclick={() => (deleteDialogOpen = false)}>
-									Cancel
-								</Button>
-								<Form.Button variant="destructive" class="w-fit">
-									{#if $submitting}
-										<LoaderCircle class="animate-spin" />
-									{/if}
-									Delete
-								</Form.Button>
-							</div>
-						</form>
-					</Dialog.Content>
-				</Dialog.Root>
-			</div>
-		</div>
-	</div>
-</ScrollArea>
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/settings/schema.ts b/frontend/src/routes/(app)/dashboard/projects/[id]/settings/schema.ts
deleted file mode 100644
index c4d9e86..0000000
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/settings/schema.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { z } from 'zod'
-
-export const formSchema = z.object({
-	name: z.string().nonempty(),
-	qr_background: z
-		.string()
-		.min(1, { message: 'Background color is required' })
-		.max(7),
-	qr_foreground: z
-		.string()
-		.min(1, { message: 'Foreground color is required' })
-		.max(7),
-	qrCornerSquareStyle: z.custom<'dot' | 'square' | 'extra-rounded'>(),
-	qrDotStyle: z.custom<'square' | 'rounded'>(),
-	qrImage: z
-		.instanceof(File, { message: 'Please upload a file' })
-		.refine((file) => file.size <= 2097152, `Max image size is 2MB.`)
-		.refine(
-			(file) =>
-				file.type === 'image/jpeg' || file.type === 'image/png',
-			{
-				message: 'Only JPEG or PNG files are allowed',
-			},
-		)
-		.optional()
-		.nullable(),
-})
-
-export const enableCustomDomainFormSchema = z.object({
-	enableDomain: z.string(),
-})
-
-export const customDomainFormSchema = z.object({
-	domain: z.string(),
-})
-
-export type FormSchema = typeof formSchema
-
-export const deleteSchema = z.object({
-	deleteShorteners: z.boolean(),
-})
diff --git a/frontend/src/routes/(app)/dashboard/projects/schema.ts b/frontend/src/routes/(app)/dashboard/projects/schema.ts
deleted file mode 100644
index 01beeb3..0000000
--- a/frontend/src/routes/(app)/dashboard/projects/schema.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { z } from 'zod'
-
-export const formSchema = z.object({
-	name: z.string().min(1, { message: 'Name is required' }),
-})
-
-export type FormSchema = typeof formSchema
diff --git a/frontend/src/routes/(app)/dashboard/settings/(components)/sidebar-nav.svelte b/frontend/src/routes/(app)/dashboard/settings/(components)/sidebar-nav.svelte
deleted file mode 100644
index 1b2d9ec..0000000
--- a/frontend/src/routes/(app)/dashboard/settings/(components)/sidebar-nav.svelte
+++ /dev/null
@@ -1,47 +0,0 @@
-<script lang="ts">
-	import { cn } from '$lib/utils'
-	import { page } from '$app/stores'
-	import { Button } from '$lib/components/ui/button'
-
-	let {
-		class: className = undefined,
-	}: {
-		class: string | undefined | null
-	} = $props()
-
-	const items = [
-		{
-			title: 'Account',
-			href: '/dashboard/settings/account',
-		},
-		{
-			title: 'QR',
-			href: '/dashboard/settings/qr',
-		},
-		{
-			title: 'Security',
-			href: '/dashboard/settings/security',
-		},
-	] as const
-</script>
-
-<nav
-	class={cn(
-		'flex w-full max-w-[200px] space-x-2 xl:flex-col xl:space-x-0 xl:space-y-1',
-		className,
-	)}>
-	{#each items as item}
-		<Button
-			href={item.href}
-			variant={$page.url.pathname == item.href
-				? 'secondary'
-				: 'ghost'}
-			class={cn(
-				'hover:bg-secondary/50 text-muted-foreground justify-start',
-				$page.url.pathname == item.href &&
-					'text-secondary-foreground',
-			)}>
-			{item.title}
-		</Button>
-	{/each}
-</nav>
diff --git a/frontend/src/routes/(app)/dashboard/settings/+layout.server.ts b/frontend/src/routes/(app)/dashboard/settings/+layout.server.ts
deleted file mode 100644
index 2e331d8..0000000
--- a/frontend/src/routes/(app)/dashboard/settings/+layout.server.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { LayoutServerLoad } from './$types'
-
-export const load = (async (event) => {
-	const { breadcrumbs: parentBreadcrumbs } = await event.parent()
-
-	const breadcrumbs = [
-		...parentBreadcrumbs,
-		{ name: 'Settings', path: '/dashboard/settings' },
-	]
-
-	const page_title = 'Settings'
-
-	return { breadcrumbs, page_title }
-}) satisfies LayoutServerLoad
diff --git a/frontend/src/routes/(app)/dashboard/settings/+layout.svelte b/frontend/src/routes/(app)/dashboard/settings/+layout.svelte
deleted file mode 100644
index b107d5c..0000000
--- a/frontend/src/routes/(app)/dashboard/settings/+layout.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { ScrollArea } from '$lib/components/ui/scroll-area'
-	import { Separator } from '$lib/components/ui/separator'
-	import SidebarNav from './(components)/sidebar-nav.svelte'
-</script>
-
-<div class="flex h-auto flex-col overflow-hidden p-10">
-	<div class="space-y-0.5">
-		<h2 class="text-2xl font-bold tracking-tight">Settings</h2>
-		<p class="text-muted-foreground">Manage your account settings.</p>
-	</div>
-	<Separator class="my-4 lg:my-6" />
-	<div
-		class="grid h-auto w-full grid-cols-1 overflow-hidden xl:grid-cols-[1fr_minmax(auto,_700px)_1fr]">
-		<aside
-			class="flex w-full flex-grow border-b pb-4 xl:justify-end xl:border-none xl:pl-0">
-			<SidebarNav />
-		</aside>
-		<div class="m-0 flex h-auto w-full flex-grow overflow-hidden p-0">
-			<ScrollArea class="mt-0 w-full">
-				<div class="w-full py-6 xl:px-8 xl:py-0">
-					<slot />
-				</div>
-			</ScrollArea>
-		</div>
-		<div></div>
-	</div>
-</div>
diff --git a/frontend/src/routes/(app)/dashboard/settings/account/+page.server.ts b/frontend/src/routes/(app)/dashboard/settings/account/+page.server.ts
deleted file mode 100644
index 64f645b..0000000
--- a/frontend/src/routes/(app)/dashboard/settings/account/+page.server.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { db } from '$lib/db'
-import type { PageServerLoad, Actions } from './$types'
-import { error, fail } from '@sveltejs/kit'
-import {
-	message,
-	setError,
-	superValidate,
-} from 'sveltekit-superforms'
-import { formSchema, verifyEmailSchema } from './schema'
-import { zod } from 'sveltekit-superforms/adapters'
-import { user } from '$lib/db/schema'
-import { eq } from 'drizzle-orm'
-import { sendEmailVerification } from '$lib/server/email'
-
-export const load = (async (event) => {
-	const { username, email } = event.locals.user
-
-	return {
-		form: await superValidate(
-			{ username: username || '', email },
-			zod(formSchema),
-		),
-		verify_email_form: await superValidate(zod(verifyEmailSchema)),
-	}
-}) satisfies PageServerLoad
-
-export const actions: Actions = {
-	update: async (event) => {
-		const form = await superValidate(event, zod(formSchema))
-		if (!form.valid) {
-			return fail(400, {
-				form,
-			})
-		}
-
-		const userId = event.locals.user.id
-
-		if (form.data.username) {
-			await db
-				.update(user)
-				.set({
-					username: form.data.username,
-				})
-				.where(eq(user.id, userId))
-		}
-
-		return {
-			form,
-		}
-	},
-	verify_email: async (event) => {
-		const form = await superValidate(event, zod(verifyEmailSchema))
-		if (!form.valid) {
-			return fail(400, {
-				form,
-			})
-		}
-
-		try {
-			await sendEmailVerification({
-				userId: event.locals.user.id,
-				email: event.locals.user.email,
-			})
-		} catch (e) {
-			return message(form, 'Error sending email verification', {
-				status: 500,
-			})
-		}
-
-		return message(form, 'Email verification sent')
-	},
-}
diff --git a/frontend/src/routes/(app)/dashboard/settings/account/+page.svelte b/frontend/src/routes/(app)/dashboard/settings/account/+page.svelte
deleted file mode 100644
index 833f533..0000000
--- a/frontend/src/routes/(app)/dashboard/settings/account/+page.svelte
+++ /dev/null
@@ -1,118 +0,0 @@
-<script lang="ts">
-	import { Separator } from '$lib/components/ui/separator'
-	import * as Form from '$lib/components/ui/form'
-	import { Input } from '$lib/components/ui/input'
-	import { formSchema, verifyEmailSchema } from './schema'
-	import { superForm } from 'sveltekit-superforms'
-	import { zodClient } from 'sveltekit-superforms/adapters'
-	import { toast } from 'svelte-sonner'
-	import { LoaderCircle, CheckIcon, XIcon } from 'lucide-svelte'
-	import { Button } from '$lib/components/ui/button'
-
-	let { data } = $props()
-
-	const form = superForm(data.form, {
-		validators: zodClient(formSchema),
-		invalidateAll: 'force',
-		resetForm: true,
-		onResult: ({ result }) => {
-			if (result.status === 200) {
-				toast.success('User settings updated')
-			}
-			if (result.status === 400 || result.status === 500) {
-				toast.error('Error updating user settings')
-			}
-		},
-	})
-
-	const { form: formData, enhance, submitting } = form
-
-	let isSubmittingVerifyEmail = $state(false)
-
-	const verifyEmailForm = superForm(data.verify_email_form, {
-		validators: zodClient(verifyEmailSchema),
-		onUpdate: async ({ form }) => {
-			if (!form.valid) {
-				toast.error(form.message)
-			} else {
-				isSubmittingVerifyEmail = true
-				await fetch('?/verify_email', { method: 'POST' })
-				isSubmittingVerifyEmail = false
-			}
-		},
-		onUpdated: ({ form }) => {
-			if (form.valid) {
-				// Successful post! Do some more client-side stuff,
-				// like showing a toast notification.
-				toast.success(form.message)
-			}
-		},
-	})
-
-	const { submit: submitVerifyEmail } = verifyEmailForm
-</script>
-
-<div class="flex h-auto flex-col gap-6">
-	<div>
-		<h3 class="text-lg font-medium">Account</h3>
-		<p class="text-muted-foreground text-sm">
-			Update your account settings.
-		</p>
-	</div>
-	<Separator />
-
-	<form
-		method="POST"
-		use:enhance
-		class="flex flex-col gap-6"
-		action="?/update">
-		<Form.Field {form} name="username">
-			<Form.Control>
-				{#snippet children({ props })}
-					<Form.Label>Username</Form.Label>
-					<Input {...props} bind:value={$formData.username} />
-				{/snippet}
-			</Form.Control>
-			<Form.Description>Change Your Username</Form.Description>
-			<Form.FieldErrors />
-		</Form.Field>
-		<Form.Field {form} name="email">
-			<Form.Control>
-				{#snippet children({ props })}
-					<Form.Label class="flex items-center gap-1">
-						Email
-						<span
-							class="text-muted-foreground flex items-end gap-1 text-sm">
-							{#if data.user.email_verified}
-								(verified)<CheckIcon class="text-success" size={18} />
-							{:else}
-								(unverified)<XIcon class="text-warning" size={18} />
-							{/if}
-						</span>
-					</Form.Label>
-					<div class="flex gap-2">
-						<Input {...props} bind:value={$formData.email} disabled />
-						<Button
-							class="w-fit"
-							onclick={submitVerifyEmail}
-							disabled={isSubmittingVerifyEmail ||
-								data.user.email_verified}>
-							{#if isSubmittingVerifyEmail}
-								<LoaderCircle class="animate-spin" />
-							{/if}
-							Verify
-						</Button>
-					</div>
-				{/snippet}
-			</Form.Control>
-			<Form.Description>Change Your Email</Form.Description>
-			<Form.FieldErrors />
-		</Form.Field>
-		<Form.Button class="w-fit self-end">
-			{#if $submitting}
-				<LoaderCircle class="animate-spin" />
-			{/if}
-			Save
-		</Form.Button>
-	</form>
-</div>
diff --git a/frontend/src/routes/(app)/dashboard/settings/account/schema.ts b/frontend/src/routes/(app)/dashboard/settings/account/schema.ts
deleted file mode 100644
index 9c3c241..0000000
--- a/frontend/src/routes/(app)/dashboard/settings/account/schema.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { z } from 'zod'
-
-export const formSchema = z.object({
-	username: z.string().optional(),
-	email: z.string().email().optional(),
-})
-
-export const verifyEmailSchema = z.object({})
-
-export type FormSchema = typeof formSchema
diff --git a/frontend/src/routes/(app)/dashboard/settings/qr/(components)/DemoQR.svelte b/frontend/src/routes/(app)/dashboard/settings/qr/(components)/DemoQR.svelte
deleted file mode 100644
index aaed3e0..0000000
--- a/frontend/src/routes/(app)/dashboard/settings/qr/(components)/DemoQR.svelte
+++ /dev/null
@@ -1,88 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte'
-	import { browser } from '$app/environment'
-
-	let {
-		background = '#fff',
-		color = '#000',
-		value = 'abcdefghajskdadsj',
-		cornerSquareStyle = 'square',
-		dotStyle = 'square',
-		existingQrImage = null,
-		qrImage = null,
-	}: {
-		background: string
-		color: string
-		value: string
-		cornerSquareStyle: 'dot' | 'square' | 'extra-rounded'
-		dotStyle: 'square' | 'rounded'
-		existingQrImage: string | null
-		qrImage: File | null
-	} = $props()
-
-	let image = $state('')
-
-	async function generateQrCode() {
-		if (!document || !window) {
-			return
-		}
-
-		try {
-			const qrImageDataUrl = qrImage
-				? URL.createObjectURL(qrImage)
-				: existingQrImage || undefined
-
-			const qrcodestyling = new (
-				await import('qr-code-styling')
-			).default({
-				data: value,
-				width: 300,
-				height: 300,
-				margin: 1,
-				qrOptions: {
-					errorCorrectionLevel: 'M',
-					typeNumber: 0,
-				},
-				backgroundOptions: {
-					color: background,
-				},
-				dotsOptions: {
-					color: color,
-					type: dotStyle,
-				},
-				cornersSquareOptions: {
-					type: cornerSquareStyle,
-				},
-				image: qrImageDataUrl,
-				imageOptions: {
-					imageSize: 0.7,
-					margin: 8,
-				},
-			})
-			const blob = await qrcodestyling.getRawData()
-			if (!blob) return
-			image = URL.createObjectURL(blob)
-		} catch (e) {
-			image = ''
-		}
-	}
-
-	$effect(() => {
-		if (
-			browser &&
-			background &&
-			color &&
-			cornerSquareStyle &&
-			dotStyle &&
-			(qrImage === null || qrImage)
-		) {
-			generateQrCode()
-		}
-	})
-
-	onMount(() => {
-		generateQrCode()
-	})
-</script>
-
-<img src={image} alt={value} width={300} height={300} />
diff --git a/frontend/src/routes/(app)/dashboard/settings/qr/+page.server.ts b/frontend/src/routes/(app)/dashboard/settings/qr/+page.server.ts
deleted file mode 100644
index 9af6a54..0000000
--- a/frontend/src/routes/(app)/dashboard/settings/qr/+page.server.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { db } from '$lib/db'
-import type { PageServerLoad, Actions } from './$types'
-import { fail } from '@sveltejs/kit'
-import { superValidate, withFiles } from 'sveltekit-superforms'
-import { formSchema } from './schema'
-import { zod } from 'sveltekit-superforms/adapters'
-import { eq } from 'drizzle-orm'
-import { user as userTable } from '$lib/db/schema'
-
-export const load = (async (event) => {
-	const user = event.locals.user
-
-	const qr_background = user.qrBackground
-	const qr_foreground = user.qrForeground
-
-	return {
-		qrImageBase64: user.qrImageBase64,
-		form: await superValidate(
-			{
-				qr_background,
-				qr_foreground,
-				qrCornerSquareStyle: user.qrCornerSquareStyle,
-				qrDotStyle: user.qrDotStyle,
-			},
-			zod(formSchema),
-			{ errors: false },
-		),
-	}
-}) satisfies PageServerLoad
-
-export const actions: Actions = {
-	default: async (event) => {
-		const form = await superValidate(event, zod(formSchema))
-		if (!form.valid) {
-			return fail(
-				400,
-				withFiles({
-					form,
-				}),
-			)
-		}
-
-		const user = event.locals.user
-		const userId = event.locals.user.id
-
-		const {
-			qr_background,
-			qr_foreground,
-			qrCornerSquareStyle,
-			qrDotStyle,
-			qrImage,
-		} = form.data
-
-		const qrImageType = qrImage ? qrImage.type : undefined
-		const qrImageBlob = qrImage
-			? await qrImage.arrayBuffer()
-			: undefined
-		const qrImageBase64 = qrImageBlob
-			? Buffer.from(qrImageBlob).toString('base64')
-			: undefined
-
-		await db
-			.update(userTable)
-			.set({
-				qrBackground: qr_background,
-				qrForeground: qr_foreground,
-			})
-			.where(eq(userTable.id, userId))
-
-		if (user.plan !== 'free') {
-			await db
-				.update(userTable)
-				.set({
-					qrCornerSquareStyle,
-					qrDotStyle,
-					qrImageBase64: qrImage
-						? `data:${qrImageType};base64,${qrImageBase64}`
-						: undefined,
-				})
-				.where(eq(userTable.id, userId))
-		}
-
-		return withFiles({
-			form,
-		})
-	},
-}
diff --git a/frontend/src/routes/(app)/dashboard/settings/qr/+page.svelte b/frontend/src/routes/(app)/dashboard/settings/qr/+page.svelte
deleted file mode 100644
index c8471c7..0000000
--- a/frontend/src/routes/(app)/dashboard/settings/qr/+page.svelte
+++ /dev/null
@@ -1,237 +0,0 @@
-<script lang="ts">
-	import { Separator } from '$lib/components/ui/separator'
-	import * as Form from '$lib/components/ui/form'
-	import { Input } from '$lib/components/ui/input'
-	import { formSchema } from './schema'
-	import { superForm } from 'sveltekit-superforms'
-	import { zodClient } from 'sveltekit-superforms/adapters'
-	import { toast } from 'svelte-sonner'
-	import DemoQr from './(components)/DemoQR.svelte'
-	import { LoaderCircle } from 'lucide-svelte'
-	import { Button } from '$lib/components/ui/button'
-	import { cn } from '$lib/utils'
-
-	let { data } = $props()
-
-	let qrImageInput: HTMLInputElement
-
-	const form = superForm(data.form, {
-		validators: zodClient(formSchema),
-		invalidateAll: 'force',
-		resetForm: true,
-		onResult: ({ result }) => {
-			if (result.status === 200) {
-				toast.success('QR settings updated')
-			}
-			if (result.status === 400) {
-				toast.error('Error updating QR settings')
-			}
-		},
-	})
-
-	const { form: formData, enhance, submitting } = form
-</script>
-
-<div class="space-y-6">
-	<div>
-		<h3 class="text-lg font-medium">QR</h3>
-		<p class="text-muted-foreground text-sm">
-			Update your QR settings.
-		</p>
-	</div>
-	<Separator />
-
-	<div class="flex justify-center">
-		<DemoQr
-			background={$formData.qr_background}
-			color={$formData.qr_foreground}
-			cornerSquareStyle={$formData.qrCornerSquareStyle}
-			dotStyle={$formData.qrDotStyle}
-			existingQrImage={data.qrImageBase64}
-			qrImage={$formData.qrImage} />
-	</div>
-
-	<form
-		method="POST"
-		use:enhance
-		enctype="multipart/form-data"
-		class="flex flex-col gap-6">
-		<Form.Field {form} name="qr_background">
-			<Form.Control>
-				{#snippet children({ props })}
-					<Form.Label>Background Color</Form.Label>
-					<Input {...props} bind:value={$formData.qr_background} />
-				{/snippet}
-			</Form.Control>
-			<Form.Description>QR Code background color</Form.Description>
-			<Form.FieldErrors />
-		</Form.Field>
-		<Form.Field {form} name="qr_foreground">
-			<Form.Control>
-				{#snippet children({ props })}
-					<Form.Label>Foreground Color</Form.Label>
-					<Input {...props} bind:value={$formData.qr_foreground} />
-				{/snippet}
-			</Form.Control>
-			<Form.Description>QR Code foreground color</Form.Description>
-			<Form.FieldErrors />
-		</Form.Field>
-		<Form.Field {form} name="qrImage">
-			<Form.Control>
-				{#snippet children({ props })}
-					<Form.Label>
-						Image <span class="text-brand">(Pro)</span>
-					</Form.Label>
-					<div>
-						{#if !$formData.qrImage && !data.qrImageBase64}
-							<button
-								onclick={(e) => {
-									e.preventDefault()
-									qrImageInput.click()
-								}}>
-								<div
-									class="flex h-16 w-16 items-center justify-center rounded-lg border-4 border-dashed">
-								</div>
-							</button>
-						{:else}
-							<button
-								onclick={(e) => {
-									e.preventDefault()
-									qrImageInput.click()
-								}}>
-								<img
-									src={$formData.qrImage
-										? URL.createObjectURL($formData.qrImage)
-										: data.qrImageBase64}
-									alt={'image'}
-									width={64}
-									height={64} />
-							</button>
-						{/if}
-					</div>
-					<Form.Description>Click to edit</Form.Description>
-					<input
-						{...props}
-						hidden
-						bind:this={qrImageInput}
-						accept="image/png, image/jpeg"
-						type="file"
-						disabled={data.user.plan === 'free'}
-						oninput={(e) => {
-							const file = e.currentTarget.files?.item(0)
-							if (!file) return
-
-							if (file.size > 2097152) {
-								toast.error('Too Big! Max file size is 2MB')
-								return
-							}
-							$formData.qrImage = file
-						}} />
-				{/snippet}
-			</Form.Control>
-			<Form.FieldErrors />
-		</Form.Field>
-		<Form.Field {form} name="qrCornerSquareStyle">
-			<Form.Control>
-				{#snippet children({ props })}
-					<Form.Label>
-						Corner Square Style <span class="text-brand">(Pro)</span>
-					</Form.Label>
-					<Input
-						{...props}
-						class="hidden"
-						hidden
-						aria-hidden
-						bind:value={$formData.qrCornerSquareStyle} />
-				{/snippet}
-			</Form.Control>
-			<div class="flex gap-4">
-				<Button
-					disabled={data.user.plan === 'free'}
-					onclick={() => ($formData.qrCornerSquareStyle = 'square')}
-					class={cn(
-						'flex flex-col gap-3 border p-12',
-						$formData.qrCornerSquareStyle === 'square'
-							? 'bg-primary-foreground'
-							: 'bg-transparent',
-					)}>
-					<div class="border-brand border-4 p-4"></div>
-					Square
-				</Button>
-				<Button
-					disabled={data.user.plan === 'free'}
-					onclick={() => ($formData.qrCornerSquareStyle = 'dot')}
-					class={cn(
-						'flex flex-col gap-3 border p-12',
-						$formData.qrCornerSquareStyle === 'dot'
-							? 'bg-primary-foreground'
-							: 'bg-transparent',
-					)}>
-					<div class="border-brand rounded-full border-4 p-4"></div>
-					Dot
-				</Button>
-				<Button
-					disabled={data.user.plan === 'free'}
-					onclick={() =>
-						($formData.qrCornerSquareStyle = 'extra-rounded')}
-					class={cn(
-						'flex flex-col gap-3 border p-12',
-						$formData.qrCornerSquareStyle === 'extra-rounded'
-							? 'bg-primary-foreground'
-							: 'bg-transparent',
-					)}>
-					<div class="border-brand rounded-lg border-4 p-4"></div>
-					Rounded
-				</Button>
-			</div>
-		</Form.Field>
-		<Form.Field {form} name="qrDotStyle">
-			<Form.Control>
-				{#snippet children({ props })}
-					<Form.Label>
-						Dot Style <span class="text-brand">(Pro)</span>
-					</Form.Label>
-					<Input
-						{...props}
-						class="hidden"
-						hidden
-						aria-hidden
-						bind:value={$formData.qrDotStyle} />
-				{/snippet}
-			</Form.Control>
-			<div class="flex gap-4">
-				<Button
-					disabled={data.user.plan === 'free'}
-					onclick={() => ($formData.qrDotStyle = 'square')}
-					class={cn(
-						'flex flex-col gap-3 border p-12',
-						$formData.qrDotStyle === 'square'
-							? 'bg-primary-foreground'
-							: 'bg-transparent',
-					)}>
-					<div class="border-brand border-4"></div>
-					Square
-				</Button>
-				<Button
-					disabled={data.user.plan === 'free'}
-					onclick={() => ($formData.qrDotStyle = 'rounded')}
-					class={cn(
-						'flex flex-col gap-3 border p-12',
-						$formData.qrDotStyle === 'rounded'
-							? 'bg-primary-foreground'
-							: 'bg-transparent',
-					)}>
-					<div class="border-brand w-4 rounded-lg border-4"></div>
-					Rounded
-				</Button>
-			</div>
-		</Form.Field>
-
-		<Form.Button class="w-fit self-end">
-			{#if $submitting}
-				<LoaderCircle class="animate-spin" />
-			{/if}
-			Save
-		</Form.Button>
-	</form>
-</div>
diff --git a/frontend/src/routes/(app)/dashboard/settings/qr/schema.ts b/frontend/src/routes/(app)/dashboard/settings/qr/schema.ts
deleted file mode 100644
index ecbfd5a..0000000
--- a/frontend/src/routes/(app)/dashboard/settings/qr/schema.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { z } from 'zod'
-
-export const formSchema = z.object({
-	qr_background: z
-		.string()
-		.min(1, { message: 'Background color is required' })
-		.max(7),
-	qr_foreground: z
-		.string()
-		.min(1, { message: 'Foreground color is required' })
-		.max(7),
-	qrCornerSquareStyle: z.custom<'dot' | 'square' | 'extra-rounded'>(),
-	qrDotStyle: z.custom<'square' | 'rounded'>(),
-	qrImage: z
-		.instanceof(File, { message: 'Please upload a file' })
-		.refine((file) => file.size <= 2097152, `Max image size is 2MB.`)
-		.refine(
-			(file) =>
-				file.type === 'image/jpeg' || file.type === 'image/png',
-			{
-				message: 'Only JPEG or PNG files are allowed',
-			},
-		)
-		.optional()
-		.nullable(),
-})
diff --git a/frontend/src/routes/(app)/dashboard/settings/security/+page.server.ts b/frontend/src/routes/(app)/dashboard/settings/security/+page.server.ts
deleted file mode 100644
index f505b05..0000000
--- a/frontend/src/routes/(app)/dashboard/settings/security/+page.server.ts
+++ /dev/null
@@ -1,171 +0,0 @@
-import { db } from '$lib/db'
-import type { PageServerLoad, Actions } from './$types'
-import { fail } from '@sveltejs/kit'
-import { setError, superValidate } from 'sveltekit-superforms'
-import {
-	changePasswordFormSchema,
-	deleteAccountSchema,
-} from './schema'
-import { zod } from 'sveltekit-superforms/adapters'
-import { project, shortener, user, visitor } from '$lib/db/schema'
-import { eq, inArray } from 'drizzle-orm'
-import { lucia } from '$lib/server/auth'
-import { env } from '$env/dynamic/private'
-import * as argon2 from 'argon2'
-
-export const load = (async (event) => {
-	return {
-		form: await superValidate(zod(changePasswordFormSchema)),
-		deleteAccountForm: await superValidate(zod(deleteAccountSchema)),
-	}
-}) satisfies PageServerLoad
-
-export const actions: Actions = {
-	change_password: async (event) => {
-		const form = await superValidate(
-			event,
-			zod(changePasswordFormSchema),
-		)
-		if (!form.valid) {
-			return fail(400, {
-				form,
-			})
-		}
-
-		const userId = event.locals.user.id
-
-		if (event.locals.user.googleId) {
-			return setError(
-				form,
-				'old_password',
-				'Unable to set a password if using google login',
-			)
-		}
-
-		const userData = await db.query.user.findFirst({
-			where: (user, { eq }) => eq(user.id, userId),
-		})
-
-		if (!userData) {
-			return setError(form, 'old_password', 'User Not Found')
-		}
-
-		if (!userData.password) {
-			return setError(
-				form,
-				'old_password',
-				'User is using other login method',
-			)
-		}
-
-		const passwordMatch = await argon2.verify(
-			userData.password,
-			form.data.old_password,
-		)
-
-		if (!passwordMatch) {
-			return setError(form, 'old_password', 'Old Password Not Match')
-		}
-
-		const newPassword = await argon2.hash(form.data.new_password)
-
-		await db
-			.update(user)
-			.set({
-				password: newPassword,
-			})
-			.where(eq(user.id, userId))
-
-		await lucia.invalidateUserSessions(userId)
-
-		const session = await lucia.createSession(userId, {})
-		const sessionCookie = lucia.createSessionCookie(session.id)
-
-		event.cookies.set(sessionCookie.name, sessionCookie.value, {
-			...sessionCookie.attributes,
-			path: '/',
-			secure: env.APP_ENV === 'prod',
-		})
-
-		return {
-			form,
-		}
-	},
-	delete_account: async (event) => {
-		const form = await superValidate(event, zod(deleteAccountSchema))
-		if (!form.valid) {
-			return fail(400, {
-				form,
-			})
-		}
-
-		const userId = event.locals.user.id
-
-		const userData = await db.query.user.findFirst({
-			where: (user, { eq }) => eq(user.id, userId),
-		})
-
-		if (!userData) {
-			return setError(form, 'password', 'User Not Found')
-		}
-
-		if (userData.googleId) {
-			await lucia.invalidateUserSessions(userId)
-
-			await db.delete(user).where(eq(user.id, userId))
-
-			const shorteners = await db
-				.delete(shortener)
-				.where(eq(shortener.userId, userId))
-				.returning()
-
-			await db.delete(project).where(eq(project.userId, userId))
-
-			await db.delete(visitor).where(
-				inArray(
-					visitor.shortenerId,
-					shorteners.map((shortener) => shortener.id),
-				),
-			)
-
-			return {
-				form,
-			}
-		}
-
-		if (!userData.password) {
-			return setError(form, 'password', 'User Not Found')
-		}
-
-		const passwordMatch = await argon2.verify(
-			userData.password,
-			form.data.password,
-		)
-
-		if (!passwordMatch) {
-			return setError(form, 'password', 'Invalid Password')
-		}
-
-		await lucia.invalidateUserSessions(userId)
-
-		await db.delete(user).where(eq(user.id, userId))
-
-		const shorteners = await db
-			.delete(shortener)
-			.where(eq(shortener.userId, userId))
-			.returning()
-
-		await db.delete(project).where(eq(project.userId, userId))
-
-		await db.delete(visitor).where(
-			inArray(
-				visitor.shortenerId,
-				shorteners.map((shortener) => shortener.id),
-			),
-		)
-
-		return {
-			form,
-		}
-	},
-}
diff --git a/frontend/src/routes/(app)/dashboard/settings/security/+page.svelte b/frontend/src/routes/(app)/dashboard/settings/security/+page.svelte
deleted file mode 100644
index 34c9e6c..0000000
--- a/frontend/src/routes/(app)/dashboard/settings/security/+page.svelte
+++ /dev/null
@@ -1,190 +0,0 @@
-<script lang="ts">
-	import { Separator } from '$lib/components/ui/separator'
-	import * as Form from '$lib/components/ui/form'
-	import { Input } from '$lib/components/ui/input'
-	import { changePasswordFormSchema } from './schema'
-	import { superForm } from 'sveltekit-superforms'
-	import { zodClient } from 'sveltekit-superforms/adapters'
-	import { toast } from 'svelte-sonner'
-	import { LoaderCircle } from 'lucide-svelte'
-	import * as Dialog from '$lib/components/ui/dialog'
-	import { Button, buttonVariants } from '$lib/components/ui/button'
-
-	let { data } = $props()
-
-	const form = superForm(data.form, {
-		validators: zodClient(changePasswordFormSchema),
-		invalidateAll: 'force',
-		resetForm: true,
-		onResult: ({ result }) => {
-			if (result.status === 200) {
-				toast.success('Password Changed')
-			}
-			if (result.status === 400 || result.status === 500) {
-				toast.error('Failed to change password')
-			}
-		},
-	})
-
-	const { form: formData, enhance, submitting } = form
-
-	let deleteDialogOpen = $state(false)
-
-	const deleteAccountForm = superForm(data.deleteAccountForm, {
-		invalidateAll: 'force',
-		resetForm: true,
-		onResult: ({ result }) => {
-			if (result.status === 200) {
-				toast.success('Account deleted')
-				deleteDialogOpen = false
-			}
-			if (result.status === 400) {
-				toast.error('Failed to delete account')
-			}
-		},
-	})
-
-	const {
-		form: deleteAccountFormData,
-		enhance: deleteAccountEnhance,
-		submitting: deleteAccountSubmitting,
-	} = deleteAccountForm
-</script>
-
-<div class="flex h-auto flex-col gap-6">
-	<div>
-		<h3 class="text-lg font-medium">Password</h3>
-		<p class="text-muted-foreground text-sm">Update your password</p>
-	</div>
-	<Separator />
-
-	<form
-		method="POST"
-		use:enhance
-		class="flex flex-col gap-6"
-		action="?/change_password">
-		<Form.Field {form} name="old_password">
-			<Form.Control>
-				{#snippet children({ props })}
-					<Form.Label>Old Password</Form.Label>
-					<Input
-						{...props}
-						bind:value={$formData.old_password}
-						type="password"
-						placeholder="••••••••" />
-				{/snippet}
-			</Form.Control>
-			<Form.Description>Old Password To Confirm</Form.Description>
-			<Form.FieldErrors />
-		</Form.Field>
-		<Form.Field {form} name="new_password">
-			<Form.Control>
-				{#snippet children({ props })}
-					<Form.Label>New Password</Form.Label>
-					<Input
-						{...props}
-						bind:value={$formData.new_password}
-						type="password"
-						placeholder="••••••••" />
-				{/snippet}
-			</Form.Control>
-			<Form.Description>Update Password</Form.Description>
-			<Form.FieldErrors />
-		</Form.Field>
-		<Form.Field {form} name="confirm_password">
-			<Form.Control>
-				{#snippet children({ props })}
-					<Form.Label>Confirm Password</Form.Label>
-					<Input
-						{...props}
-						bind:value={$formData.confirm_password}
-						type="password"
-						placeholder="••••••••" />
-				{/snippet}
-			</Form.Control>
-			<Form.Description>Confirm New Password</Form.Description>
-			<Form.FieldErrors />
-		</Form.Field>
-		<Form.Button class="w-fit self-end">
-			{#if $submitting}
-				<LoaderCircle class="animate-spin" />
-			{/if}
-			Change Password
-		</Form.Button>
-	</form>
-
-	<Separator />
-
-	<div>
-		<h3 class="text-lg font-medium">Danger Zone</h3>
-		<p class="text-muted-foreground text-sm">
-			Changes here are irreversible
-		</p>
-	</div>
-	<Separator />
-
-	<div class="border-destructive rounded-lg border">
-		<div class="flex items-center justify-between p-4">
-			<div class="flex flex-col gap-1">
-				<span class="text-sm">Delete Account</span>
-				<span class="text-muted-foreground text-xs">
-					Permanently delete your account and all data
-				</span>
-			</div>
-			<Dialog.Root bind:open={deleteDialogOpen}>
-				<Dialog.Trigger
-					class={buttonVariants({ variant: 'destructive' })}>
-					Delete Account
-				</Dialog.Trigger>
-				<Dialog.Content class="max-w-xl">
-					<Dialog.Header class="flex-row items-center gap-2">
-						<div class="h-fit w-fit p-2">
-							<img src="/logo.png" alt="" class="h-8 w-8" />
-						</div>
-						<div>
-							<Dialog.Title>Delete Account</Dialog.Title>
-							<Dialog.Description>
-								This will permanently delete your account and all its
-								associated data.
-							</Dialog.Description>
-						</div>
-					</Dialog.Header>
-					<form
-						method="POST"
-						action="?/delete_account"
-						use:deleteAccountEnhance>
-						<Form.Field form={deleteAccountForm} name="password">
-							<Form.Control>
-								{#snippet children({ props })}
-									<Form.Label>Password</Form.Label>
-									<Input
-										{...props}
-										bind:value={$deleteAccountFormData.password}
-										type="password"
-										placeholder="••••••••" />
-								{/snippet}
-							</Form.Control>
-							<Form.Description>
-								Enter your password to delete account
-							</Form.Description>
-							<Form.FieldErrors />
-						</Form.Field>
-						<div class="flex justify-end gap-2">
-							<Button
-								variant="outline"
-								onclick={() => (deleteDialogOpen = false)}>
-								Cancel
-							</Button>
-							<Form.Button variant="destructive" class="w-fit">
-								{#if $deleteAccountSubmitting}
-									<LoaderCircle class="animate-spin" />
-								{/if}
-								Delete
-							</Form.Button>
-						</div>
-					</form>
-				</Dialog.Content>
-			</Dialog.Root>
-		</div>
-	</div>
-</div>
diff --git a/frontend/src/routes/(app)/dashboard/settings/security/schema.ts b/frontend/src/routes/(app)/dashboard/settings/security/schema.ts
deleted file mode 100644
index f47fed5..0000000
--- a/frontend/src/routes/(app)/dashboard/settings/security/schema.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { z } from 'zod'
-
-export const changePasswordFormSchema = z
-	.object({
-		old_password: z.string(),
-		new_password: z.string().min(8, {
-			message: 'Password must be at least 8 characters long',
-		}),
-		confirm_password: z.string().min(8, {
-			message: 'Password must be at least 8 characters long',
-		}),
-	})
-	.refine(
-		(data) => data.new_password == data.confirm_password,
-		"Passwords didn't match.",
-	)
-
-export const verifyEmailSchema = z.object({})
-
-export const deleteAccountSchema = z.object({ password: z.string() })
-
-export type FormSchema = typeof changePasswordFormSchema
diff --git a/frontend/src/routes/(public)/(landing)/+layout.svelte b/frontend/src/routes/(public)/(landing)/+layout.svelte
index b0dac76..71eeb59 100644
--- a/frontend/src/routes/(public)/(landing)/+layout.svelte
+++ b/frontend/src/routes/(public)/(landing)/+layout.svelte
@@ -21,12 +21,7 @@
 		</a>
 		<div class="grid grid-cols-4 items-center">
 			<div></div>
-			<a
-				href="#features"
-				on:click|preventDefault={scrollIntoView}
-				class="text-center">
-				Features
-			</a>
+			<a href="/features" class="text-center">Features</a>
 			<a href="/pricing" class="text-center">Pricing</a>
 			<div></div>
 		</div>
@@ -46,7 +41,7 @@
 	</header>
 	<slot />
 	<footer
-		class="flex w-full max-w-6xl flex-col items-center justify-center gap-4 px-8 pb-8 pt-64">
+		class="flex w-full max-w-6xl flex-col items-center justify-center gap-4 px-8 pb-4 pt-64">
 		<div>Kon.sh - Url Shortener</div>
 		<Separator />
 		<nav class="w-full">
diff --git a/frontend/src/routes/(public)/(landing)/+page.svelte b/frontend/src/routes/(public)/(landing)/+page.svelte
index cf2e395..a4c4c35 100644
--- a/frontend/src/routes/(public)/(landing)/+page.svelte
+++ b/frontend/src/routes/(public)/(landing)/+page.svelte
@@ -5,13 +5,8 @@
 		QrCodeIcon,
 		ChartAreaIcon,
 		ExternalLinkIcon,
-	} from 'lucide-svelte'
-
-	import {
-		Calendar,
-		TextSearch,
-		ReceiptText,
-		CodeXml,
+		FileImageIcon,
+		StarsIcon,
 	} from 'lucide-svelte'
 
 	import BentoGrid from './(components)/BentoGrid.svelte'
@@ -40,7 +35,15 @@
 			name: 'Custom Domain',
 			description: 'Use your own domain for branding purposes',
 			href: '/features/custom-domain',
-			class: 'col-span-3 lg:col-span-3',
+			class: 'col-span-3 lg:col-span-2',
+		},
+		{
+			Icon: FileImageIcon,
+			name: 'File Upload',
+			description:
+				'Upload files and we will generate a shortener for it',
+			href: '/features/file-upload',
+			class: 'col-span-3 lg:col-span-1',
 		},
 	]
 </script>
@@ -154,6 +157,10 @@
 								<Check class="text-brand" />
 								<span class="flex">Everything in free</span>
 							</li>
+							<li class="flex items-center gap-3">
+								<StarsIcon class="text-brand" />
+								<span class="flex">File Upload (100 GB)</span>
+							</li>
 							<li class="flex items-center gap-3">
 								<Check class="text-brand" />
 								<span class="flex">5 custom domains</span>
@@ -195,6 +202,10 @@
 								<Check class="text-brand" />
 								<span class="flex">Unlimited Projects</span>
 							</li>
+							<li class="flex items-center gap-3">
+								<StarsIcon class="text-brand" />
+								<span class="flex">Unlimited Upload</span>
+							</li>
 							<li class="flex items-center gap-3">
 								<Check class="text-brand" />
 								<span class="flex">Basically No Limits</span>
diff --git a/frontend/src/routes/(public)/(landing)/features/+page.svelte b/frontend/src/routes/(public)/(landing)/features/+page.svelte
new file mode 100644
index 0000000..bd72b9c
--- /dev/null
+++ b/frontend/src/routes/(public)/(landing)/features/+page.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+	import {
+		QrCodeIcon,
+		ChartAreaIcon,
+		ExternalLinkIcon,
+		FileImageIcon,
+	} from 'lucide-svelte'
+
+	import BentoGrid from '../(components)/BentoGrid.svelte'
+	import BentoCard from '../(components)/BentoCard.svelte'
+
+	let features = [
+		{
+			Icon: QrCodeIcon,
+			name: 'QR Code',
+			description:
+				'Every shortener comes automatically comes with a QR Code',
+			href: '/features/qrcode',
+			class: 'col-span-3 lg:col-span-1',
+		},
+		{
+			Icon: ChartAreaIcon,
+			name: 'Analytics',
+			description:
+				'Latest data about your shortener to help you analyse',
+			href: '/features/analytics',
+			class: 'col-span-3 lg:col-span-2',
+		},
+		{
+			Icon: ExternalLinkIcon,
+			name: 'Custom Domain',
+			description: 'Use your own domain for branding purposes',
+			href: '/features/custom-domain',
+			class: 'col-span-3 lg:col-span-2',
+		},
+		{
+			Icon: FileImageIcon,
+			name: 'File Upload',
+			description:
+				'Upload files and we will generate a shortener for it',
+			href: '/features/file-upload',
+			class: 'col-span-3 lg:col-span-1',
+		},
+	]
+</script>
+
+<main class="flex w-full flex-col items-center pt-24">
+	<div class="flex w-full max-w-6xl flex-col gap-12 p-4">
+		<div class="flex flex-col items-center gap-10 text-center">
+			<h1
+				class="from-brand-hover to-brand bg-gradient-to-r bg-clip-text text-6xl font-bold leading-normal text-transparent">
+				Features
+			</h1>
+		</div>
+		<section id="features" class="pt-12">
+			<div
+				class="flex w-full flex-col items-center gap-10 text-center">
+				<div class="flex items-center justify-center">
+					<BentoGrid>
+						{#each features as item}
+							<BentoCard {...item} />
+						{/each}
+					</BentoGrid>
+				</div>
+			</div>
+		</section>
+	</div>
+</main>
diff --git a/frontend/src/routes/(public)/(landing)/features/file-upload/+page.svelte b/frontend/src/routes/(public)/(landing)/features/file-upload/+page.svelte
new file mode 100644
index 0000000..90acc87
--- /dev/null
+++ b/frontend/src/routes/(public)/(landing)/features/file-upload/+page.svelte
@@ -0,0 +1,20 @@
+<main class="flex w-full flex-col items-center pt-24">
+	<div class="flex w-full max-w-6xl flex-col gap-12 p-4">
+		<div class="flex flex-col items-center gap-10 text-center">
+			<h1
+				class="from-brand-hover to-brand bg-gradient-to-r bg-clip-text text-6xl font-bold leading-normal text-transparent">
+				File Upload
+			</h1>
+			<h2 class="max-w-sm text-center text-xl font-semibold">
+				A Shortener Is Automatically Generated For Each File Upload To
+				Allow For Easy Sharing And Analytics
+			</h2>
+		</div>
+
+		<section id="file-upload" class="pt-12">
+			<img
+				src="/features/file-upload.png"
+				alt="analytics-file-upload" />
+		</section>
+	</div>
+</main>
diff --git a/frontend/src/routes/api/project/[project_id]/file/+server.ts b/frontend/src/routes/api/project/[project_id]/file/+server.ts
new file mode 100644
index 0000000..c838cd4
--- /dev/null
+++ b/frontend/src/routes/api/project/[project_id]/file/+server.ts
@@ -0,0 +1,107 @@
+import { z } from 'zod'
+import type { RequestHandler } from './$types'
+
+import { PutObjectCommand, S3Client, S3 } from '@aws-sdk/client-s3'
+import { env } from '$env/dynamic/private'
+import { json } from '@sveltejs/kit'
+import { db } from '$lib/db'
+import { getSignedUrl } from '@aws-sdk/s3-request-presigner'
+
+const client = new S3({
+	region: 'auto',
+	endpoint: `https://fly.storage.tigris.dev`,
+	credentials: {
+		accessKeyId: env.PRIVATE_AWS_ACCESS_KEY_ID,
+		secretAccessKey: env.PRIVATE_AWS_SECRET_ACCESS_KEY,
+	},
+})
+
+const S3_Client = new S3Client({
+	region: 'auto',
+	endpoint: `https://fly.storage.tigris.dev`,
+	credentials: {
+		accessKeyId: env.PRIVATE_AWS_ACCESS_KEY_ID,
+		secretAccessKey: env.PRIVATE_AWS_SECRET_ACCESS_KEY,
+	},
+})
+
+const uploadFileSchema = z.object({
+	fileName: z.string(),
+	fileSize: z.number(),
+	fileType: z.string(),
+})
+
+export const POST: RequestHandler = async (event) => {
+	const user = event.locals.user
+
+	if (user.plan === 'free') {
+		return json({
+			success: false,
+			message: 'User Must Be Subscribed To Pro Plan',
+		})
+	}
+
+	const body = await event.request.json()
+
+	const uploadFile = uploadFileSchema.safeParse(body)
+
+	if (!uploadFile.success) {
+		return json({ success: false, message: 'Invalid Data' })
+	}
+
+	if (uploadFile.data.fileName.includes('/')) {
+		return json({ success: false, message: 'Invalid File Name' })
+	}
+
+	if (
+		user.fileStorageUsageInByte + uploadFile.data.fileSize >
+		1_000_000_000 * 100
+	) {
+		return json({ success: false, message: 'Reached Max Uploads' })
+	}
+
+	const projectId = event.params.project_id
+
+	const project =
+		projectId !== 'personal'
+			? await db.query.project.findFirst({
+					where: (projectTable, { eq, and }) =>
+						and(
+							eq(projectTable.id, projectId),
+							eq(projectTable.userId, user.id),
+						),
+			  })
+			: undefined
+
+	const key = `${user.id}/${project?.id || 'personal'}/${
+		uploadFile.data.fileName
+	}`
+
+	const files = await client
+		.listObjectsV2({
+			Bucket: env.PRIVATE_AWS_BUCKET_NAME,
+			Prefix: `${user.id}/${projectId}/`,
+			Delimiter: '/',
+			MaxKeys: 1000,
+		})
+		.then((data) => data.Contents)
+
+	if (files && files.length >= 1000) {
+		return json({
+			success: false,
+			message: 'Reached Max Upload Files For This Project',
+		})
+	}
+
+	const link = await getSignedUrl(
+		S3_Client,
+		new PutObjectCommand({
+			Bucket: env.PRIVATE_AWS_BUCKET_NAME,
+			Key: key,
+			ContentLength: uploadFile.data.fileSize,
+			ContentType: uploadFile.data.fileType,
+		}),
+		{ expiresIn: 600 },
+	)
+	return json({ success: true, link })
+}
diff --git a/frontend/src/routes/api/project/[project_id]/file/[file_id]/+server.ts b/frontend/src/routes/api/project/[project_id]/file/[file_id]/+server.ts
new file mode 100644
index 0000000..8ec1511
--- /dev/null
+++ b/frontend/src/routes/api/project/[project_id]/file/[file_id]/+server.ts
@@ -0,0 +1,109 @@
+import {
+	DeleteObjectCommand,
+	PutObjectCommand,
+	S3,
+	S3Client,
+} from '@aws-sdk/client-s3'
+import type { RequestHandler } from './$types'
+import { env } from '$env/dynamic/private'
+import { json } from '@sveltejs/kit'
+import { z } from 'zod'
+import { db } from '$lib/db'
+import { getSignedUrl } from '@aws-sdk/s3-request-presigner'
+import { file, shortener, user as userTable } from '$lib/db/schema'
+import { and, eq, isNull } from 'drizzle-orm'
+
+const client = new S3({
+	region: 'auto',
+	endpoint: `https://fly.storage.tigris.dev`,
+	credentials: {
+		accessKeyId: env.PRIVATE_AWS_ACCESS_KEY_ID,
+		secretAccessKey: env.PRIVATE_AWS_SECRET_ACCESS_KEY,
+	},
+})
+
+export const GET: RequestHandler = async (event) => {
+	const user = event.locals.user
+	const activeProjectId = event.params.project_id
+	const filename = event.params.file_id
+
+	const file = await client.getObject({
+		Bucket: env.PRIVATE_AWS_BUCKET_NAME,
+		Key: `${user.id}/${activeProjectId}/${filename}`,
+	})
+
+	return json({
+		success: true,
+		file: {
+			eTag: file.ETag,
+			size: file.ContentLength,
+			name: filename,
+		},
+	})
+}
+
+export const DELETE: RequestHandler = async (event) => {
+	const user = event.locals.user
+
+	const deleteFile = event.params.file_id
+
+	if (deleteFile.includes('/')) {
+		return json({ success: false, message: 'Invalid File Name' })
+	}
+
+	const projectId = event.params.project_id
+
+	const project =
+		projectId !== 'personal'
+			? await db.query.project.findFirst({
+					where: (projectTable, { eq, and }) =>
+						and(
+							eq(projectTable.id, projectId),
+							eq(projectTable.userId, user.id),
+						),
+			  })
+			: undefined
+
+	const key = `${user.id}/${project?.id || 'personal'}/${deleteFile}`
+
+	try {
+		await client.send(
+			new DeleteObjectCommand({
+				Bucket: env.PRIVATE_AWS_BUCKET_NAME,
+				Key: key,
+			}),
+		)
+
+		await db
+			.delete(shortener)
+			.where(
+				and(
+					eq(shortener.userId, user.id),
+					projectId !== 'personal'
+						? eq(shortener.projectId, projectId)
+						: isNull(shortener.projectId),
+					eq(shortener.is_file_upload, true),
+					eq(shortener.file_path, key),
+				),
+			)
+
+		const deletedFile = await db
+			.delete(file)
+			.where(eq(file.key, key))
+			.returning()
+
+		if (deletedFile.length > 0) {
+			await db
+				.update(userTable)
+				.set({
+					fileStorageUsageInByte:
+						user.fileStorageUsageInByte - deletedFile[0].size,
+				})
+				.where(eq(userTable.id, user.id))
+		}
+	} catch (error) {
+		console.log(error)
+	}
+
+	return json({ success: true })
+}
diff --git a/frontend/src/routes/api/shortener/[id]/+server.ts b/frontend/src/routes/api/shortener/[id]/+server.ts
index 577a8c9..418f45c 100644
--- a/frontend/src/routes/api/shortener/[id]/+server.ts
+++ b/frontend/src/routes/api/shortener/[id]/+server.ts
@@ -83,6 +83,19 @@ export const DELETE: RequestHandler = async (event) => {
 
 	const user = event.locals.user
 
+	const shortener = await db.query.shortener.findFirst({
+		where: (shortener, { and, eq }) =>
+			and(eq(shortener.id, id.data), eq(shortener.userId, user.id)),
+	})
+
+	if (shortener?.is_file_upload) {
+		return new Response(
+			JSON.stringify({
+				success: false,
+			}),
+		)
+	}
+
 	await db
 		.delete(shortenerSchema)
 		.where(
diff --git a/frontend/src/routes/api/shortener_new/+server.ts b/frontend/src/routes/api/shortener_new/+server.ts
index a4dc884..60d1a0a 100644
--- a/frontend/src/routes/api/shortener_new/+server.ts
+++ b/frontend/src/routes/api/shortener_new/+server.ts
@@ -54,6 +54,7 @@ export const GET: RequestHandler = async (event) => {
 		.where(
 			and(
 				eq(shortener.userId, user.id),
+				eq(shortener.is_file_upload, false),
 				project_id && project_id !== 'personal'
 					? eq(shortener.projectId, project_id)
 					: isNull(shortener.projectId),
diff --git a/frontend/src/routes/api/shortener_new/[id]/+server.ts b/frontend/src/routes/api/shortener_new/[id]/+server.ts
index 577a8c9..270f90c 100644
--- a/frontend/src/routes/api/shortener_new/[id]/+server.ts
+++ b/frontend/src/routes/api/shortener_new/[id]/+server.ts
@@ -83,6 +83,19 @@ export const DELETE: RequestHandler = async (event) => {
 
 	const user = event.locals.user
 
+	const shortener = await db.query.shortener.findFirst({
+		where: (shortener, { and, eq }) =>
+			and(eq(shortener.id, id.data), eq(shortener.userId, user.id)),
+	})
+
+	if (shortener?.is_file_upload) {
+		return new Response(
+			JSON.stringify({
+				success: false,
+			}),
+		)
+	}
+
 	await db
 		.delete(shortenerSchema)
 		.where(
@@ -91,6 +104,7 @@ export const DELETE: RequestHandler = async (event) => {
 				eq(shortenerSchema.userId, user.id),
 			),
 		)
+
 	return new Response(
 		JSON.stringify({
 			success: true,
diff --git a/frontend/src/routes/webhook/s3/+server.ts b/frontend/src/routes/webhook/s3/+server.ts
new file mode 100644
index 0000000..0b0a259
--- /dev/null
+++ b/frontend/src/routes/webhook/s3/+server.ts
@@ -0,0 +1,110 @@
+import { db } from '$lib/db'
+import { shortener } from '$lib/db/schema'
+import type { RequestHandler } from './$types'
+import util from 'util'
+import { generateId } from 'lucia'
+import { nanoid } from 'nanoid'
+import { and, eq, isNull } from 'drizzle-orm'
+
+type S3WebhookStructure = {
+	Records: {
+		eventVersion: string // '2.2'
+		eventSource: string // 'aws:s3'
+		awsRegion: string // 'us-west-2'
+		eventTime: string // 'The time, in ISO-8601 format, for example, 1970-01-01T00:00:00.000Z, when Amazon S3 finished processing the request'
+		eventName: string // 'event-type' "ObjectCreated:Put"
+		userIdentity: {
+			principalId: string // 'Amazon-customer-ID-of-the-user-who-caused-the-event' "AIDAJDPLRKLG7UEXAMPLE"
+		}
+		requestParameters: {
+			sourceIPAddress: string // 'ip-address-where-request-came-from' "127.0.0.1"
+		}
+		responseElements: {
+			'x-amz-request-id': string // 'Amazon S3 generated request ID'
+			'x-amz-id-2': string // 'Amazon S3 host that processed the request'
+		}
+		s3: {
+			s3SchemaVersion: string // '1.0'
+			configurationId: string // 'ID found in the bucket notification configuration'
+			bucket: {
+				name: string // 'amzn-s3-demo-bucket'
+				ownerIdentity: {
+					principalId: string // 'Amazon-customer-ID-of-the-bucket-owner'
+				}
+				arn: string // 'bucket-ARN' "arn:aws:s3:::amzn-s3-demo-bucket"
+			}
+			object: {
+				key: string // 'object-key' "HappyFace.jpg"
+				size: number // 'object-size in bytes' 1024
+				eTag: string // 'object eTag' "d41d8cd98f00b204e9800998ecf8427e"
+				versionId: string // 'object version if bucket is versioning-enabled, otherwise null' "096fKKXTRTtl3on89fVO.nfljtsv6qko"
+				sequencer: string // 'a string representation of a hexadecimal value used to determine event sequence, only used with PUTs and DELETEs' "0055AED6DCD90281E5"
+			}
+		}
+		glacierEventData: {
+			restoreEventData: {
+				lifecycleRestorationExpiryTime: string // 'The time, in ISO-8601 format, for example, 1970-01-01T00:00:00.000Z, of Restore Expiry'
+				lifecycleRestoreStorageClass: string // 'Source storage class for restore'
+			}
+		}
+	}[]
+}
+
+export const POST: RequestHandler = async (event) => {
+	const body = (await event.request.json()) as S3WebhookStructure
+
+	const eventHandlers = body.Records.map(async (event) => {
+		console.log(
+			util.inspect(event, false, null, true /* enable colors */),
+		)
+
+		if (event.eventName === 'ObjectCreated:Put') {
+			const key = event.s3.object.key
+			const [userId, projectId, filename] = key.split('/')
+			const existingShortener = await db.query.shortener.findFirst({
+				where: (shortener, { eq, and, isNull }) =>
+					and(
+						eq(shortener.userId, userId),
+						projectId !== 'personal'
+							? eq(shortener.projectId, projectId)
+							: isNull(shortener.projectId),
+						eq(shortener.is_file_upload, true),
+						eq(shortener.file_path, key),
+					),
+			})
+
+			if (existingShortener) {
+				return
+			}
+
+			await db.insert(shortener).values({
+				id: generateId(8),
+				link: '',
+				code: nanoid(8),
+				projectId: projectId !== 'personal' ? projectId : undefined,
+				userId: userId,
+				is_file_upload: true,
+				file_path: key,
+			})
+		} else if (event.eventName === 's3:ObjectRemoved:Delete') {
+			const key = event.s3.object.key
+			const [userId, projectId, filename] = key.split('/')
+			await db
+				.delete(shortener)
+				.where(
+					and(
+						eq(shortener.userId, userId),
+						projectId !== 'personal'
+							? eq(shortener.projectId, projectId)
+							: isNull(shortener.projectId),
+						eq(shortener.is_file_upload, true),
+						eq(shortener.file_path, key),
+					),
+				)
+		}
+	})
+
+	await Promise.all(eventHandlers)
+
+	return new Response()
+}
diff --git a/frontend/src/routes/webhook/tigris/+server.ts b/frontend/src/routes/webhook/tigris/+server.ts
new file mode 100644
index 0000000..72c9c41
--- /dev/null
+++ b/frontend/src/routes/webhook/tigris/+server.ts
@@ -0,0 +1,128 @@
+import { db } from '$lib/db'
+import { file, shortener, user } from '$lib/db/schema'
+import type { TigrisNotificationPayload } from '$lib/server/types'
+import type { RequestHandler } from './$types'
+import { generateId } from 'lucia'
+import { nanoid } from 'nanoid'
+import { eq } from 'drizzle-orm'
+import { S3Client, GetObjectCommand } from '@aws-sdk/client-s3'
+import { env } from '$env/dynamic/private'
+
+const client = new S3Client({
+	region: 'auto',
+	endpoint: `https://fly.storage.tigris.dev`,
+	credentials: {
+		accessKeyId: env.PRIVATE_AWS_ACCESS_KEY_ID,
+		secretAccessKey: env.PRIVATE_AWS_SECRET_ACCESS_KEY,
+	},
+})
+
+export const POST: RequestHandler = async (event) => {
+	const authHeader = event.request.headers.get('Authorization')
+	console.log('auth header:', authHeader)
+
+	if (
+		!authHeader ||
+		(env.PRIVATE_AWS_WEBHOOK_TOKEN &&
+			authHeader !== `Bearer ${env.PRIVATE_AWS_WEBHOOK_TOKEN}`)
+	) {
+		console.log('Unauthorized')
+		return new Response('', { status: 401 })
+	}
+
+	const body =
+		(await event.request.json()) as TigrisNotificationPayload
+
+	const eventHandlers = body.events.map(async (event) => {
+		const [userId, projectId, filename] = event.object.key.split('/')
+
+		const objectOwner = await db.query.user.findFirst({
+			where: (user, { eq }) => eq(user.id, userId),
+		})
+
+		if (!objectOwner) return
+
+		if (event.eventName === 'OBJECT_CREATED_PUT') {
+			const existingShortener = await db.query.shortener.findFirst({
+				where: (shortener, { eq, and, isNull }) =>
+					and(
+						eq(shortener.userId, userId),
+						projectId !== 'personal'
+							? eq(shortener.projectId, projectId)
+							: isNull(shortener.projectId),
+						eq(shortener.is_file_upload, true),
+						eq(shortener.file_path, event.object.key),
+					),
+			})
+
+			if (!existingShortener) {
+				await db.insert(shortener).values({
+					id: generateId(8),
+					link: '',
+					code: nanoid(8),
+					projectId: projectId !== 'personal' ? projectId : undefined,
+					userId: userId,
+					is_file_upload: true,
+					file_path: event.object.key,
+				})
+			}
+
+			const object = await client.send(
+				new GetObjectCommand({
+					Bucket: env.PRIVATE_AWS_BUCKET_NAME,
+					Key: event.object.key,
+				}),
+			)
+
+			const existingFile = await db.query.file.findFirst({
+				where: (file, { eq }) => eq(file.key, event.object.key),
+			})
+
+			if (existingFile) {
+				await db
+					.update(file)
+					.set({
+						size: object.ContentLength,
+						eTag: object.ETag,
+						updatedAt: Date.now(),
+					})
+					.where(eq(file.id, existingFile.id))
+
+				await db
+					.update(user)
+					.set({
+						fileStorageUsageInByte:
+							objectOwner.fileStorageUsageInByte +
+							(object.ContentLength! - existingFile.size),
+					})
+					.where(eq(user.id, userId))
+			} else {
+				await db.insert(file).values({
+					id: generateId(8),
+					userId: userId,
+					projectId: projectId !== 'personal' ? projectId : undefined,
+					key: event.object.key,
+					name: filename,
+					size: object.ContentLength!,
+					eTag: object.ETag!,
+					createdAt: Date.now(),
+					updatedAt: Date.now(),
+				})
+
+				await db
+					.update(user)
+					.set({
+						fileStorageUsageInByte:
+							objectOwner.fileStorageUsageInByte +
+							(object.ContentLength || 0),
+					})
+					.where(eq(user.id, userId))
+			}
+		} else if (event.eventName === 'OBJECT_DELETED') {
+		}
+	})
+
+	await Promise.all(eventHandlers)
+
+	return new Response()
+}
diff --git a/frontend/static/features/file-upload.png b/frontend/static/features/file-upload.png
new file mode 100644
index 0000000..f95879b
Binary files /dev/null and b/frontend/static/features/file-upload.png differ
diff --git a/redirect/.env.example b/redirect/.env.example
index a7b22d9..1a87f7c 100644
--- a/redirect/.env.example
+++ b/redirect/.env.example
@@ -4,4 +4,11 @@ APP_URL=kon.sh
 
 # GeoLite2 License Key (auto update database)
 GEOIPUPDATE_ACCOUNT_ID= 
-GEOIPUPDATE_LICENSE_KEY=
\ No newline at end of file
+GEOIPUPDATE_LICENSE_KEY=
+
+# Tigris/S3
+AWS_BUCKET_NAME=
+AWS_ACCESS_KEY_ID=
+AWS_SECRET_ACCESS_KEY=
+AWS_ENDPOINT_URL_S3=
+AWS_REGION=auto
\ No newline at end of file
diff --git a/redirect/db/models.go b/redirect/db/models.go
index 97ce95d..9066ef8 100644
--- a/redirect/db/models.go
+++ b/redirect/db/models.go
@@ -15,6 +15,18 @@ type EmailVerificationToken struct {
 	ExpiresAt pgtype.Timestamptz
 }
 
+type File struct {
+	ID             string
+	UserID         string
+	ProjectID      pgtype.Text
+	Key            string
+	Name           string
+	Size           int64
+	Etag           string
+	CreatedAtEpoch int64
+	UpdatedAtEpoch int64
+}
+
 type Project struct {
 	ID                  string
 	Uuid                pgtype.UUID
@@ -39,35 +51,38 @@ type Session struct {
 }
 
 type Shortener struct {
-	ID          string
-	Link        string
-	Code        string
-	CreatedAt   pgtype.Timestamp
-	UserID      string
-	ProjectID   pgtype.Text
-	Active      bool
-	Ios         bool
-	IosLink     pgtype.Text
-	Android     bool
-	AndroidLink pgtype.Text
+	ID           string
+	Link         string
+	Code         string
+	CreatedAt    pgtype.Timestamp
+	UserID       string
+	ProjectID    pgtype.Text
+	Active       bool
+	Ios          bool
+	IosLink      pgtype.Text
+	Android      bool
+	AndroidLink  pgtype.Text
+	IsFileUpload bool
+	FilePath     pgtype.Text
 }
 
 type User struct {
-	ID                  string
-	Uuid                pgtype.UUID
-	Email               string
-	Username            pgtype.Text
-	Password            pgtype.Text
-	CreatedAt           pgtype.Timestamp
-	EmailVerified       bool
-	GoogleID            pgtype.Text
-	Plan                string
-	StripeCustomerID    pgtype.Text
-	QrCornerSquareStyle string
-	QrDotStyle          string
-	QrBackground        string
-	QrForeground        string
-	QrImageBase64       pgtype.Text
+	ID                     string
+	Uuid                   pgtype.UUID
+	Email                  string
+	Username               pgtype.Text
+	Password               pgtype.Text
+	CreatedAt              pgtype.Timestamp
+	EmailVerified          bool
+	GoogleID               pgtype.Text
+	Plan                   string
+	StripeCustomerID       pgtype.Text
+	QrCornerSquareStyle    string
+	QrDotStyle             string
+	QrBackground           string
+	QrForeground           string
+	QrImageBase64          pgtype.Text
+	FileStorageUsageInByte int64
 }
 
 type Visitor struct {
diff --git a/redirect/db/query.sql.go b/redirect/db/query.sql.go
index 2378c68..e428113 100644
--- a/redirect/db/query.sql.go
+++ b/redirect/db/query.sql.go
@@ -57,7 +57,7 @@ func (q *Queries) CreateVisitor(ctx context.Context, arg CreateVisitorParams) er
 }
 
 const getShortener = `-- name: GetShortener :one
-SELECT shortener.id, link, code, created_at, shortener.user_id, project_id, active, ios, ios_link, android, android_link, project.id, uuid, name, project.user_id, qr_background, qr_foreground, custom_domain, domain_status, enable_custom_domain, custom_ip, custom_domain_id, qr_corner_square_style, qr_dot_style, qr_image_base64
+SELECT shortener.id, link, code, created_at, shortener.user_id, project_id, active, ios, ios_link, android, android_link, is_file_upload, file_path, project.id, uuid, name, project.user_id, qr_background, qr_foreground, custom_domain, domain_status, enable_custom_domain, custom_ip, custom_domain_id, qr_corner_square_style, qr_dot_style, qr_image_base64
 FROM shortener
 	LEFT JOIN project ON project.id = shortener.project_id
 WHERE code = $1
@@ -80,6 +80,8 @@ type GetShortenerRow struct {
 	IosLink             pgtype.Text
 	Android             bool
 	AndroidLink         pgtype.Text
+	IsFileUpload        bool
+	FilePath            pgtype.Text
 	ID_2                pgtype.Text
 	Uuid                pgtype.UUID
 	Name                pgtype.Text
@@ -111,6 +113,8 @@ func (q *Queries) GetShortener(ctx context.Context, code string) (GetShortenerRo
 		&i.IosLink,
 		&i.Android,
 		&i.AndroidLink,
+		&i.IsFileUpload,
+		&i.FilePath,
 		&i.ID_2,
 		&i.Uuid,
 		&i.Name,
@@ -130,7 +134,7 @@ func (q *Queries) GetShortener(ctx context.Context, code string) (GetShortenerRo
 }
 
 const getShortenerWithDomain = `-- name: GetShortenerWithDomain :one
-SELECT shortener.id, shortener.link, shortener.code, shortener.created_at, shortener.user_id, shortener.project_id, shortener.active, shortener.ios, shortener.ios_link, shortener.android, shortener.android_link,
+SELECT shortener.id, shortener.link, shortener.code, shortener.created_at, shortener.user_id, shortener.project_id, shortener.active, shortener.ios, shortener.ios_link, shortener.android, shortener.android_link, shortener.is_file_upload, shortener.file_path,
 	project.custom_domain as domain
 FROM shortener
 	LEFT JOIN project ON project.id = shortener.project_id
@@ -146,18 +150,20 @@ type GetShortenerWithDomainParams struct {
 }
 
 type GetShortenerWithDomainRow struct {
-	ID          string
-	Link        string
-	Code        string
-	CreatedAt   pgtype.Timestamp
-	UserID      string
-	ProjectID   pgtype.Text
-	Active      bool
-	Ios         bool
-	IosLink     pgtype.Text
-	Android     bool
-	AndroidLink pgtype.Text
-	Domain      pgtype.Text
+	ID           string
+	Link         string
+	Code         string
+	CreatedAt    pgtype.Timestamp
+	UserID       string
+	ProjectID    pgtype.Text
+	Active       bool
+	Ios          bool
+	IosLink      pgtype.Text
+	Android      bool
+	AndroidLink  pgtype.Text
+	IsFileUpload bool
+	FilePath     pgtype.Text
+	Domain       pgtype.Text
 }
 
 func (q *Queries) GetShortenerWithDomain(ctx context.Context, arg GetShortenerWithDomainParams) (GetShortenerWithDomainRow, error) {
@@ -175,13 +181,15 @@ func (q *Queries) GetShortenerWithDomain(ctx context.Context, arg GetShortenerWi
 		&i.IosLink,
 		&i.Android,
 		&i.AndroidLink,
+		&i.IsFileUpload,
+		&i.FilePath,
 		&i.Domain,
 	)
 	return i, err
 }
 
 const listShorteners = `-- name: ListShorteners :many
-SELECT id, link, code, created_at, user_id, project_id, active, ios, ios_link, android, android_link
+SELECT id, link, code, created_at, user_id, project_id, active, ios, ios_link, android, android_link, is_file_upload, file_path
 FROM shortener
 `
 
@@ -206,6 +214,8 @@ func (q *Queries) ListShorteners(ctx context.Context) ([]Shortener, error) {
 			&i.IosLink,
 			&i.Android,
 			&i.AndroidLink,
+			&i.IsFileUpload,
+			&i.FilePath,
 		); err != nil {
 			return nil, err
 		}
diff --git a/redirect/go.mod b/redirect/go.mod
index b84d92b..27a4dda 100644
--- a/redirect/go.mod
+++ b/redirect/go.mod
@@ -15,6 +15,24 @@ require (
 
 require (
 	github.com/andybalholm/brotli v1.0.5 // indirect
+	github.com/aws/aws-sdk-go-v2 v1.32.7 // indirect
+	github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.6.7 // indirect
+	github.com/aws/aws-sdk-go-v2/config v1.28.7 // indirect
+	github.com/aws/aws-sdk-go-v2/credentials v1.17.48 // indirect
+	github.com/aws/aws-sdk-go-v2/feature/ec2/imds v1.16.22 // indirect
+	github.com/aws/aws-sdk-go-v2/internal/configsources v1.3.26 // indirect
+	github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.6.26 // indirect
+	github.com/aws/aws-sdk-go-v2/internal/ini v1.8.1 // indirect
+	github.com/aws/aws-sdk-go-v2/internal/v4a v1.3.26 // indirect
+	github.com/aws/aws-sdk-go-v2/service/internal/accept-encoding v1.12.1 // indirect
+	github.com/aws/aws-sdk-go-v2/service/internal/checksum v1.4.7 // indirect
+	github.com/aws/aws-sdk-go-v2/service/internal/presigned-url v1.12.7 // indirect
+	github.com/aws/aws-sdk-go-v2/service/internal/s3shared v1.18.7 // indirect
+	github.com/aws/aws-sdk-go-v2/service/s3 v1.71.1 // indirect
+	github.com/aws/aws-sdk-go-v2/service/sso v1.24.8 // indirect
+	github.com/aws/aws-sdk-go-v2/service/ssooidc v1.28.7 // indirect
+	github.com/aws/aws-sdk-go-v2/service/sts v1.33.3 // indirect
+	github.com/aws/smithy-go v1.22.1 // indirect
 	github.com/google/uuid v1.5.0 // indirect
 	github.com/hashicorp/golang-lru v0.5.4 // indirect
 	github.com/jackc/pgpassfile v1.0.0 // indirect
diff --git a/redirect/go.sum b/redirect/go.sum
index b1242c5..575cae9 100644
--- a/redirect/go.sum
+++ b/redirect/go.sum
@@ -1,5 +1,41 @@
 github.com/andybalholm/brotli v1.0.5 h1:8uQZIdzKmjc/iuPu7O2ioW48L81FgatrcpfFmiq/cCs=
 github.com/andybalholm/brotli v1.0.5/go.mod h1:fO7iG3H7G2nSZ7m0zPUDn85XEX2GTukHGRSepvi9Eig=
+github.com/aws/aws-sdk-go-v2 v1.32.7 h1:ky5o35oENWi0JYWUZkB7WYvVPP+bcRF5/Iq7JWSb5Rw=
+github.com/aws/aws-sdk-go-v2 v1.32.7/go.mod h1:P5WJBrYqqbWVaOxgH0X/FYYD47/nooaPOZPlQdmiN2U=
+github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.6.7 h1:lL7IfaFzngfx0ZwUGOZdsFFnQ5uLvR0hWqqhyE7Q9M8=
+github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.6.7/go.mod h1:QraP0UcVlQJsmHfioCrveWOC1nbiWUl3ej08h4mXWoc=
+github.com/aws/aws-sdk-go-v2/config v1.28.7 h1:GduUnoTXlhkgnxTD93g1nv4tVPILbdNQOzav+Wpg7AE=
+github.com/aws/aws-sdk-go-v2/config v1.28.7/go.mod h1:vZGX6GVkIE8uECSUHB6MWAUsd4ZcG2Yq/dMa4refR3M=
+github.com/aws/aws-sdk-go-v2/credentials v1.17.48 h1:IYdLD1qTJ0zanRavulofmqut4afs45mOWEI+MzZtTfQ=
+github.com/aws/aws-sdk-go-v2/credentials v1.17.48/go.mod h1:tOscxHN3CGmuX9idQ3+qbkzrjVIx32lqDSU1/0d/qXs=
+github.com/aws/aws-sdk-go-v2/feature/ec2/imds v1.16.22 h1:kqOrpojG71DxJm/KDPO+Z/y1phm1JlC8/iT+5XRmAn8=
+github.com/aws/aws-sdk-go-v2/feature/ec2/imds v1.16.22/go.mod h1:NtSFajXVVL8TA2QNngagVZmUtXciyrHOt7xgz4faS/M=
+github.com/aws/aws-sdk-go-v2/internal/configsources v1.3.26 h1:I/5wmGMffY4happ8NOCuIUEWGUvvFp5NSeQcXl9RHcI=
+github.com/aws/aws-sdk-go-v2/internal/configsources v1.3.26/go.mod h1:FR8f4turZtNy6baO0KJ5FJUmXH/cSkI9fOngs0yl6mA=
+github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.6.26 h1:zXFLuEuMMUOvEARXFUVJdfqZ4bvvSgdGRq/ATcrQxzM=
+github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.6.26/go.mod h1:3o2Wpy0bogG1kyOPrgkXA8pgIfEEv0+m19O9D5+W8y8=
+github.com/aws/aws-sdk-go-v2/internal/ini v1.8.1 h1:VaRN3TlFdd6KxX1x3ILT5ynH6HvKgqdiXoTxAF4HQcQ=
+github.com/aws/aws-sdk-go-v2/internal/ini v1.8.1/go.mod h1:FbtygfRFze9usAadmnGJNc8KsP346kEe+y2/oyhGAGc=
+github.com/aws/aws-sdk-go-v2/internal/v4a v1.3.26 h1:GeNJsIFHB+WW5ap2Tec4K6dzcVTsRbsT1Lra46Hv9ME=
+github.com/aws/aws-sdk-go-v2/internal/v4a v1.3.26/go.mod h1:zfgMpwHDXX2WGoG84xG2H+ZlPTkJUU4YUvx2svLQYWo=
+github.com/aws/aws-sdk-go-v2/service/internal/accept-encoding v1.12.1 h1:iXtILhvDxB6kPvEXgsDhGaZCSC6LQET5ZHSdJozeI0Y=
+github.com/aws/aws-sdk-go-v2/service/internal/accept-encoding v1.12.1/go.mod h1:9nu0fVANtYiAePIBh2/pFUSwtJ402hLnp854CNoDOeE=
+github.com/aws/aws-sdk-go-v2/service/internal/checksum v1.4.7 h1:tB4tNw83KcajNAzaIMhkhVI2Nt8fAZd5A5ro113FEMY=
+github.com/aws/aws-sdk-go-v2/service/internal/checksum v1.4.7/go.mod h1:lvpyBGkZ3tZ9iSsUIcC2EWp+0ywa7aK3BLT+FwZi+mQ=
+github.com/aws/aws-sdk-go-v2/service/internal/presigned-url v1.12.7 h1:8eUsivBQzZHqe/3FE+cqwfH+0p5Jo8PFM/QYQSmeZ+M=
+github.com/aws/aws-sdk-go-v2/service/internal/presigned-url v1.12.7/go.mod h1:kLPQvGUmxn/fqiCrDeohwG33bq2pQpGeY62yRO6Nrh0=
+github.com/aws/aws-sdk-go-v2/service/internal/s3shared v1.18.7 h1:Hi0KGbrnr57bEHWM0bJ1QcBzxLrL/k2DHvGYhb8+W1w=
+github.com/aws/aws-sdk-go-v2/service/internal/s3shared v1.18.7/go.mod h1:wKNgWgExdjjrm4qvfbTorkvocEstaoDl4WCvGfeCy9c=
+github.com/aws/aws-sdk-go-v2/service/s3 v1.71.1 h1:aOVVZJgWbaH+EJYPvEgkNhCEbXXvH7+oML36oaPK3zE=
+github.com/aws/aws-sdk-go-v2/service/s3 v1.71.1/go.mod h1:r+xl5yzMk9083rMR+sJ5TYj9Tihvf/l1oxzZXDgGj2Q=
+github.com/aws/aws-sdk-go-v2/service/sso v1.24.8 h1:CvuUmnXI7ebaUAhbJcDy9YQx8wHR69eZ9I7q5hszt/g=
+github.com/aws/aws-sdk-go-v2/service/sso v1.24.8/go.mod h1:XDeGv1opzwm8ubxddF0cgqkZWsyOtw4lr6dxwmb6YQg=
+github.com/aws/aws-sdk-go-v2/service/ssooidc v1.28.7 h1:F2rBfNAL5UyswqoeWv9zs74N/NanhK16ydHW1pahX6E=
+github.com/aws/aws-sdk-go-v2/service/ssooidc v1.28.7/go.mod h1:JfyQ0g2JG8+Krq0EuZNnRwX0mU0HrwY/tG6JNfcqh4k=
+github.com/aws/aws-sdk-go-v2/service/sts v1.33.3 h1:Xgv/hyNgvLda/M9l9qxXc4UFSgppnRczLxlMs5Ae/QY=
+github.com/aws/aws-sdk-go-v2/service/sts v1.33.3/go.mod h1:5Gn+d+VaaRgsjewpMvGazt0WfcFO+Md4wLOuBfGR9Bc=
+github.com/aws/smithy-go v1.22.1 h1:/HPHZQ0g7f4eUeK6HKglFz8uwVfZKgoI25rb/J+dnro=
+github.com/aws/smithy-go v1.22.1/go.mod h1:irrKGvNn1InZwb2d7fkIRNucdfwR8R+Ts3wxYa/cJHg=
 github.com/creack/pty v1.1.9/go.mod h1:oKZEueFk5CKHvIhNR5MUki03XCEU+Q6VDXinZuGJ33E=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
diff --git a/redirect/main.go b/redirect/main.go
index 1b502e3..ce0c974 100644
--- a/redirect/main.go
+++ b/redirect/main.go
@@ -14,6 +14,10 @@ import (
 
 	"math/rand"
 
+	"github.com/aws/aws-sdk-go-v2/aws"
+	v4 "github.com/aws/aws-sdk-go-v2/aws/signer/v4"
+	"github.com/aws/aws-sdk-go-v2/config"
+	"github.com/aws/aws-sdk-go-v2/service/s3"
 	"github.com/gofiber/fiber/v2"
 	"github.com/gofiber/fiber/v2/middleware/limiter"
 	"github.com/gofiber/fiber/v2/middleware/logger"
@@ -27,6 +31,31 @@ import (
 	"github.com/ua-parser/uap-go/uaparser"
 )
 
+// Client encapsulates the S3 SDK presign client and provides methods to presign requests.
+type Client struct {
+	PresignClient *s3.PresignClient
+}
+
+// GetObject makes a presigned request that can be used to get an object from a bucket.
+func (p *Client) GetObject(
+	ctx context.Context,
+	bucket string,
+	key string,
+	expiry time.Duration,
+) (*v4.PresignedHTTPRequest, error) {
+	request, err := p.PresignClient.PresignGetObject(ctx, &s3.GetObjectInput{
+		Bucket: aws.String(bucket),
+		Key:    aws.String(key),
+	}, func(opts *s3.PresignOptions) {
+		opts.Expires = expiry
+	})
+	if err != nil {
+		log.Printf("Couldn't get a presigned request to get %v:%v. Here's why: %v\n",
+			bucket, key, err)
+	}
+	return request, err
+}
+
 func main() {
 	err := godotenv.Load()
 	if err != nil {
@@ -48,6 +77,8 @@ func main() {
 		if err != nil {
 			log.Fatal(err)
 		}
+	} else {
+		fmt.Println("GeoLite2 DB Found, Skipping Download...")
 	}
 
 	geodb, err := geoip2.Open("./data/GeoLite2-City.mmdb")
@@ -69,14 +100,14 @@ func main() {
 		log.Fatal("DATABASE_URL not found")
 	}
 
-	config, err := pgxpool.ParseConfig(dbUrl)
+	pgconfig, err := pgxpool.ParseConfig(dbUrl)
 	if err != nil {
 		log.Fatal(err)
 	}
 
-	config.MinConns = 4
+	pgconfig.MinConns = 4
 
-	conn, err := pgxpool.NewWithConfig(ctx, config)
+	conn, err := pgxpool.NewWithConfig(ctx, pgconfig)
 
 	if err != nil {
 		log.Fatal(err)
@@ -85,6 +116,40 @@ func main() {
 
 	fmt.Println("Finished initializing postgres DB and cache")
 
+	fmt.Println("Initializing S3...")
+
+	awsregion := os.Getenv("AWS_REGION")
+	if len(awsregion) == 0 {
+		log.Fatal("AWS_REGION not found")
+	}
+
+	s3endpoint := os.Getenv("AWS_ENDPOINT_URL_S3")
+	if len(s3endpoint) == 0 {
+		log.Fatal("AWS_ENDPOINT_URL_S3 not found")
+	}
+
+	s3bucket := os.Getenv("AWS_BUCKET_NAME")
+	if len(s3bucket) == 0 {
+		log.Fatal("AWS_BUCKET_NAME not found")
+	}
+
+	sdkConfig, err := config.LoadDefaultConfig(context.TODO())
+	if err != nil {
+		log.Printf("Couldn't load default configuration. Here's why: %v\n", err)
+		return
+	}
+
+	svc := s3.NewFromConfig(sdkConfig, func(o *s3.Options) {
+		o.BaseEndpoint = aws.String(s3endpoint)
+		o.Region = awsregion
+	})
+
+	// Presigning a request
+	ps := s3.NewPresignClient(svc)
+	presigner := &Client{PresignClient: ps}
+
+	fmt.Println("Finished initializing S3")
+
 	cache_client := cache.New(1*time.Hour, 5*time.Minute)
 
 	app := fiber.New()
@@ -135,12 +200,23 @@ func main() {
 			shortenerId = shortener.ID
 
 			iosEnabled = shortener.Ios
-			iosRedirectUrl = shortener.IosLink.String
-
 			androidEnabled = shortener.Android
-			androidRedirectUrl = shortener.AndroidLink.String
 
-			redirecturl = shortener.Link
+			if shortener.IsFileUpload {
+				// Presigned URL to download an object from the bucket
+				presignedGetReq, err := presigner.GetObject(context.TODO(), s3bucket, shortener.FilePath.String, 65*time.Minute)
+				if err != nil {
+					log.Printf("Couldn't get a presigned request to get %s. Here's why: %v\n", shortener.FilePath.String, err)
+					return c.Redirect(invalidUrl)
+				}
+				iosRedirectUrl = presignedGetReq.URL
+				androidRedirectUrl = presignedGetReq.URL
+				redirecturl = presignedGetReq.URL
+			} else {
+				iosRedirectUrl = shortener.IosLink.String
+				androidRedirectUrl = shortener.AndroidLink.String
+				redirecturl = shortener.Link
+			}
 		} else {
 			shortener, err := queries.GetShortenerWithDomain(ctx, db.GetShortenerWithDomainParams{
 				Code:         code,
@@ -152,12 +228,23 @@ func main() {
 			shortenerId = shortener.ID
 
 			iosEnabled = shortener.Ios
-			iosRedirectUrl = shortener.IosLink.String
-
 			androidEnabled = shortener.Android
-			androidRedirectUrl = shortener.AndroidLink.String
 
-			redirecturl = shortener.Link
+			if shortener.IsFileUpload {
+				// Presigned URL to download an object from the bucket
+				presignedGetReq, err := presigner.GetObject(context.TODO(), s3bucket, shortener.FilePath.String, 10*time.Minute)
+				if err != nil {
+					log.Printf("Couldn't get a presigned request to get %s. Here's why: %v\n", shortener.FilePath.String, err)
+					return c.Redirect(invalidUrl)
+				}
+				iosRedirectUrl = presignedGetReq.URL
+				androidRedirectUrl = presignedGetReq.URL
+				redirecturl = presignedGetReq.URL
+			} else {
+				iosRedirectUrl = shortener.IosLink.String
+				androidRedirectUrl = shortener.AndroidLink.String
+				redirecturl = shortener.Link
+			}
 		}
 
 		if len(uastrings) == 0 {