From 6b20cbf166949704ad8b53a9529fd982b84607dd Mon Sep 17 00:00:00 2001
From: konyogony <me@konyogony.dev>
Date: Sat, 1 Nov 2025 18:18:01 +0700
Subject: [PATCH 01/22] Add more stuff for selfhosting

---
 app/dash/page.tsx    | 40 ++++++++++++++++++++++++----------------
 components/panel.tsx |  2 +-
 lib/utils.ts         | 15 ++++++++++++---
 3 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/app/dash/page.tsx b/app/dash/page.tsx
index 2c848d7..2dc1259 100644
--- a/app/dash/page.tsx
+++ b/app/dash/page.tsx
@@ -29,7 +29,7 @@ import {
     DialogTitle,
     DialogTrigger,
 } from '@/components/ui/dialog';
-import { cn } from '@/lib/utils';
+import { cn, getPaymentInfo, ParsedPaymentInfo } from '@/lib/utils';
 import {
     AlertDialog,
     AlertDialogCancel,
@@ -363,6 +363,7 @@ const DashboardPage = () => {
     const [show2FADialog, setShow2FADialog] = useState(false);
     const [showResetPasswordDialog, setShowResetPasswordDialog] = useState(false);
     const [isManagingSubscription, setIsManagingSubscription] = useState(false);
+    const [paymentData, setPaymentData] = useState<ParsedPaymentInfo | null>(null);
 
     useEffect(() => {
         if (!isLoading && !isAuthenticated) {
@@ -371,6 +372,10 @@ const DashboardPage = () => {
     }, [isLoading, isAuthenticated, router]);
 
     useEffect(() => {
+        const fetchPaymentData = async () => {
+            const data = await getPaymentInfo();
+            setPaymentData(data);
+        };
         const fetchClips = async () => {
             if (isAuthenticated) {
                 try {
@@ -387,6 +392,7 @@ const DashboardPage = () => {
         };
 
         fetchClips();
+        fetchPaymentData();
     }, [isAuthenticated, api_url]);
 
     const handleUnlinkProvider = async (provider: string) => {
@@ -495,7 +501,8 @@ const DashboardPage = () => {
         return <LoadingScreen />;
     }
 
-    const userTierPlan = pricingPlans.find((p) => p.tierId === userData?.tier) ?? pricingPlans[0];
+    const userTierPlan =
+        paymentData?.active_tiers.find((p) => p.name === userData?.tier) ?? paymentData?.active_tiers[0];
     const storageLimitBytes = userData.storage_limit;
     const storageUsedBytes = userData.storage_used;
     const storageUsedGB = storageUsedBytes / (1024 * 1024 * 1024);
@@ -824,7 +831,8 @@ const DashboardPage = () => {
                                 <CardTitle>Your Subscription</CardTitle>
                                 <CardDescription>
                                     You are currently on the{' '}
-                                    <span className='font-semibold text-primary'>{userTierPlan.name}</span> plan.
+                                    <span className='font-semibold text-primary'>{userTierPlan?.name ?? 'Error'}</span>{' '}
+                                    plan.
                                 </CardDescription>
                             </CardHeader>
                             <CardContent>
@@ -849,34 +857,34 @@ const DashboardPage = () => {
                             <h2 className='text-xl font-semibold'>Manage Subscription</h2>
                             <p className='text-muted-foreground'>
                                 You are currently on the{' '}
-                                <span className='font-semibold text-primary'>{userTierPlan.name}</span> plan.
+                                <span className='font-semibold text-primary'>{userTierPlan?.name}</span> plan.
                             </p>
                         </header>
                     )}
                     <div className='grid gap-4 sm:grid-cols-2 lg:grid-cols-4 mb-16'>
-                        {pricingPlans.map((plan) => (
+                        {paymentData?.active_tiers.map((plan) => (
                             <Card
                                 key={plan.name}
                                 className={cn(
                                     'flex flex-col',
-                                    plan.isPopular && 'border-primary',
-                                    plan.tierId === userData.tier && 'ring-2 ring-primary',
+                                    plan.is_popular && 'border-primary',
+                                    plan.name === userData.tier && 'ring-2 ring-primary',
                                 )}
                             >
                                 <CardHeader>
                                     <div className='flex justify-between items-center'>
                                         <CardTitle>{plan.name}</CardTitle>
-                                        {plan.isPopular && <Badge>Most Popular</Badge>}
+                                        {plan.is_popular && <Badge>Most Popular</Badge>}
                                     </div>
                                     <CardDescription>{plan.description}</CardDescription>
                                 </CardHeader>
                                 <CardContent className='flex-1 space-y-4'>
                                     <div>
-                                        <span className='text-4xl font-bold'>{plan.price}</span>
-                                        <span className='text-muted-foreground'>{plan.priceFrequency}</span>
+                                        <span className='text-4xl font-bold'>{plan.display_price}</span>
+                                        <span className='text-muted-foreground'>{plan.display_frequency}</span>
                                     </div>
                                     <ul className='space-y-2 text-sm'>
-                                        {plan.features.map((feature) => (
+                                        {plan.display_features.map((feature) => (
                                             <li key={feature} className='flex items-center gap-2'>
                                                 <Check className='size-4 text-primary' />
                                                 <span className='text-muted-foreground'>{feature}</span>
@@ -889,11 +897,11 @@ const DashboardPage = () => {
                                         <Button
                                             className='w-full cursor-pointer'
                                             disabled={
-                                                plan.tierId === userData.tier || isUpgrading || plan.tierId === 'free'
+                                                plan.name === userData.tier || isUpgrading || plan.name === 'free'
                                             }
-                                            onClick={() => handleUpgrade(plan.apiId)}
+                                            onClick={() => handleUpgrade(plan.name)}
                                         >
-                                            {plan.tierId === userData.tier
+                                            {plan.name === userData.tier
                                                 ? 'Current Plan'
                                                 : isUpgrading
                                                   ? 'Processing...'
@@ -902,10 +910,10 @@ const DashboardPage = () => {
                                     ) : (
                                         <Button
                                             className='w-full cursor-pointer'
-                                            disabled={plan.tierId === userData.tier}
+                                            disabled={plan.name === userData.tier}
                                             onClick={handleManageSubscription}
                                         >
-                                            {plan.tierId === userData.tier ? 'Current Plan' : 'Manage Plan'}
+                                            {plan.name === userData.tier ? 'Current Plan' : 'Manage Plan'}
                                         </Button>
                                     )}
                                 </CardFooter>
diff --git a/components/panel.tsx b/components/panel.tsx
index 73a8f87..4ac58ec 100644
--- a/components/panel.tsx
+++ b/components/panel.tsx
@@ -21,7 +21,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { ShieldAlert, Trash2, Ban, EyeOff } from 'lucide-react';
+import { Trash2, Ban, EyeOff } from 'lucide-react';
 
 const API_URL = 'https://wayclip.com';
 
diff --git a/lib/utils.ts b/lib/utils.ts
index 5281801..d82bd9b 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -14,15 +14,24 @@ export type AppInfo = {
 };
 
 export async function getAppInfo(): Promise<AppInfo> {
-    const res = await fetch(`${process.env.BACKEND_URL || 'http://localhost:8000'}/get-app-info`);
-    if (!res.ok) throw new Error('Failed to fetch app info');
-    return res.json();
+    return {
+        backend_url: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000',
+        frontend_url: process.env.NEXT_PUBLIC_FRONTEND_URL || 'http://localhost:3003',
+        app_name: process.env.NEXT_PUBLIC_APP_NAME || 'Wayclip',
+        default_avatar_url: process.env.NEXT_PUBLIC_DEFAULT_AVATAR || '',
+        upload_limit_bytes: Number(process.env.NEXT_PUBLIC_UPLOAD_LIMIT_BYTES) || 0,
+    };
 }
 
 export type Tier = {
     name: string;
     max_storage_bytes: number;
     stripe_price_id: string | null;
+    display_price: string;
+    display_frequency: string;
+    description: string;
+    display_features: string[];
+    is_popular: boolean;
 };
 
 type RawPaymentInfo = {

From 88e56454ea3623d7ccedb115c7cde8f208a6a11f Mon Sep 17 00:00:00 2001
From: konyogony <me@konyogony.dev>
Date: Sun, 2 Nov 2025 15:17:47 +0700
Subject: [PATCH 02/22] Add selfhosting branch

---
 .github/workflows/dash.yml | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/dash.yml b/.github/workflows/dash.yml
index 51c2485..58d9ff1 100644
--- a/.github/workflows/dash.yml
+++ b/.github/workflows/dash.yml
@@ -4,6 +4,7 @@ on:
     push:
         branches:
             - main
+            - selfhosting
 
 jobs:
     build-and-push:
@@ -20,6 +21,10 @@ jobs:
                   username: ${{ secrets.DOCKERHUB_USERNAME }}
                   password: ${{ secrets.DOCKERHUB_TOKEN }}
 
+            - name: Get short SHA
+              id: vars
+              run: echo "SHORT_SHA=$(echo $GITHUB_SHA | cut -c1-7)" >> $GITHUB_ENV
+
             - name: Set up QEMU
               uses: docker/setup-qemu-action@v3
 
@@ -32,5 +37,9 @@ jobs:
                   context: .
                   file: ./Dockerfile
                   push: true
-                  tags: wayclip/dash:latest
                   platforms: linux/amd64,linux/arm64
+                  tags: |
+                      # Default tag for main branch
+                      ${{ github.ref == 'refs/heads/main' && 'wayclip/dash:latest' || '' }}
+                      # Selfhosting branch with short SHA
+                      ${{ github.ref == 'refs/heads/selfhosting' && format('wayclip/dash:selfhosting-{0}', env.SHORT_SHA) || '' }}

From 63beca7d52276fda7400f123442325e6c3e3cb9e Mon Sep 17 00:00:00 2001
From: konyogony <me@konyogony.dev>
Date: Sun, 2 Nov 2025 15:17:58 +0700
Subject: [PATCH 03/22] [DASH]


From ddc88e13530e2e28b7d4205d782523c49b6341b9 Mon Sep 17 00:00:00 2001
From: konyogony <me@konyogony.dev>
Date: Sun, 2 Nov 2025 16:09:49 +0700
Subject: [PATCH 04/22] Fix the workflow [DASH]

---
 .github/workflows/dash.yml | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/dash.yml b/.github/workflows/dash.yml
index 58d9ff1..b551053 100644
--- a/.github/workflows/dash.yml
+++ b/.github/workflows/dash.yml
@@ -23,7 +23,16 @@ jobs:
 
             - name: Get short SHA
               id: vars
-              run: echo "SHORT_SHA=$(echo $GITHUB_SHA | cut -c1-7)" >> $GITHUB_ENV
+              run: echo "SHORT_SHA=${GITHUB_SHA::7}" >> $GITHUB_ENV
+
+            - name: Determine tags
+              id: tags
+              run: |
+                  if [[ "${GITHUB_REF}" == "refs/heads/main" ]]; then
+                    echo "TAGS=wayclip/dash:latest" >> $GITHUB_ENV
+                  elif [[ "${GITHUB_REF}" == "refs/heads/selfhosting" ]]; then
+                    echo "TAGS=wayclip/dash:selfhosting-${SHORT_SHA}" >> $GITHUB_ENV
+                  fi
 
             - name: Set up QEMU
               uses: docker/setup-qemu-action@v3
@@ -38,8 +47,4 @@ jobs:
                   file: ./Dockerfile
                   push: true
                   platforms: linux/amd64,linux/arm64
-                  tags: |
-                      # Default tag for main branch
-                      ${{ github.ref == 'refs/heads/main' && 'wayclip/dash:latest' || '' }}
-                      # Selfhosting branch with short SHA
-                      ${{ github.ref == 'refs/heads/selfhosting' && format('wayclip/dash:selfhosting-{0}', env.SHORT_SHA) || '' }}
+                  tags: ${{ env.TAGS }}

From 98a4aad8c4979d5419a66d54292ad69d0c68b82e Mon Sep 17 00:00:00 2001
From: konyogony <me@konyogony.dev>
Date: Sun, 2 Nov 2025 16:36:05 +0700
Subject: [PATCH 05/22] Try hacking the env [DASH]

---
 Dockerfile    | 8 +++++++-
 entrypoint.sh | 8 ++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 entrypoint.sh

diff --git a/Dockerfile b/Dockerfile
index 1c6205e..448d883 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -8,19 +8,25 @@ RUN bun install --immutable
 
 COPY . .
 
+RUN sed -i 's|NEXT_PUBLIC_API_URL=.*|NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}|' .env
+
 RUN bun run build
 
 FROM node:20-slim AS runner
 WORKDIR /app
 
 ENV NODE_ENV=production
-ENV PORT=0330
+ENV PORT=3003
 ENV HOST=0.0.0.0
 
 COPY --from=builder /app/public ./public
 COPY --from=builder /app/.next/standalone ./
 COPY --from=builder /app/.next/static ./.next/static
 
+COPY entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
+
 EXPOSE 3003
 
+ENTRYPOINT ["/entrypoint.sh"]
 CMD ["node", "server.js"]
diff --git a/entrypoint.sh b/entrypoint.sh
new file mode 100644
index 0000000..06ba108
--- /dev/null
+++ b/entrypoint.sh
@@ -0,0 +1,8 @@
+#!/bin/sh
+set -e
+
+for var in $(env | grep '^NEXT_PUBLIC_' | cut -d= -f1); do
+  sed -i "s|\${$var}|${!var}|g" /app/.next/standalone/server.js
+done
+
+exec "$@"

From 5cdea0d42653af486382ea0230129e4cdff5081d Mon Sep 17 00:00:00 2001
From: konyogony <me@konyogony.dev>
Date: Sun, 2 Nov 2025 16:40:43 +0700
Subject: [PATCH 06/22] Fixing the env issue [DASH]

---
 .example.env | 29 +++++++++++++++++++++++++++++
 Dockerfile   |  9 ++++-----
 2 files changed, 33 insertions(+), 5 deletions(-)
 create mode 100644 .example.env

diff --git a/.example.env b/.example.env
new file mode 100644
index 0000000..f6c027e
--- /dev/null
+++ b/.example.env
@@ -0,0 +1,29 @@
+APP_DESC="An open-source instant replay tool for modern Linux desktops. Built with ❤️ for the Linux community."
+API_URL=https://wayclip.com
+NEXT_PUBLIC_FOOTER_LINKS='{
+    "Product": [
+        { "text": "Features", "href": "https://wayclip.com#Features" },
+        { "text": "Pricing", "href": "https://wayclip.com#Pricing" },
+        { "text": "Privacy Policy", "href": "https://wayclip.com/privacy" },
+        { "text": "Terms Of Service", "href": "https://wayclip.com/terms" },
+        { "text": "Return Policy", "href": "https://wayclip.com/return-policy" },
+        { "text": "Support", "href": "https://wayclip.com/support" }
+    ],
+    "Community": [
+        { "text": "GitHub", "href": "https://github.com/wayclip", "external": true },
+        { "text": "Contributing", "href": "https://wayclip.com/docs/contributing" },
+        { "text": "Discord", "href": "https://discord.gg/BrXAHknFE6", "external": true },
+        { "text": "Status", "href": "https://status.wayclip.com", "external": true },
+        { "text": "Documentation", "href": "https://wayclip.com/docs" },
+        { "text": "Download", "href": "https://wayclip.com/download" }
+    ]
+}'
+NEXT_PUBLIC_NAVBAR_LINKS='[
+    { "text": "Front Page", "href": "https://wayclip.com" },
+    { "text": "Dashboard", "href": "https://dash.wayclip.com/dash" },
+    { "text": "Download", "href": "https://wayclip.com/download" },
+    { "text": "Docs", "href": "https://wayclip.com/docs" }
+]'
+NEXT_PUBLIC_FRONTEND_URL=https://dash.wayclip.com
+NEXT_PUBLIC_APP_NAME=Wayclip
+NEXT_PUBLIC_UPLOAD_LIMIT_BYTES=2147483648
diff --git a/Dockerfile b/Dockerfile
index 448d883..f4043e4 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -8,7 +8,9 @@ RUN bun install --immutable
 
 COPY . .
 
-RUN sed -i 's|NEXT_PUBLIC_API_URL=.*|NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}|' .env
+COPY .example.env .env
+ARG NEXT_PUBLIC_API_URL=https://wayclip.com
+RUN sed -i "s|NEXT_PUBLIC_API_URL=.*|NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}|" .env
 
 RUN bun run build
 
@@ -22,11 +24,8 @@ ENV HOST=0.0.0.0
 COPY --from=builder /app/public ./public
 COPY --from=builder /app/.next/standalone ./
 COPY --from=builder /app/.next/static ./.next/static
-
-COPY entrypoint.sh /entrypoint.sh
-RUN chmod +x /entrypoint.sh
+COPY --from=builder /app/.env ./
 
 EXPOSE 3003
 
-ENTRYPOINT ["/entrypoint.sh"]
 CMD ["node", "server.js"]

From e7bc2758677a572ecad9ba5fe7fbe222e14c84ac Mon Sep 17 00:00:00 2001
From: konyogony <me@konyogony.dev>
Date: Sun, 2 Nov 2025 16:52:18 +0700
Subject: [PATCH 07/22] Some idiot switched port round [DASH]

---
 Dockerfile | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index f4043e4..20fa6b5 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -18,7 +18,7 @@ FROM node:20-slim AS runner
 WORKDIR /app
 
 ENV NODE_ENV=production
-ENV PORT=3003
+ENV PORT=0330
 ENV HOST=0.0.0.0
 
 COPY --from=builder /app/public ./public
@@ -26,6 +26,6 @@ COPY --from=builder /app/.next/standalone ./
 COPY --from=builder /app/.next/static ./.next/static
 COPY --from=builder /app/.env ./
 
-EXPOSE 3003
+EXPOSE 0330 
 
 CMD ["node", "server.js"]

From b5c556e86ebf646f822b198b84d537bdc27eae67 Mon Sep 17 00:00:00 2001
From: konyogony <me@konyogony.dev>
Date: Tue, 4 Nov 2025 22:31:37 +0700
Subject: [PATCH 08/22] Try moving from API routes to simple env's

---
 .example.env                | 15 ++++++++---
 app/dash/page.tsx           |  4 +--
 app/login/page.tsx          |  2 +-
 app/reset-password/page.tsx |  2 +-
 components/detailView.tsx   |  2 +-
 components/nav.tsx          |  2 +-
 components/payment.tsx      |  2 +-
 lib/utils.ts                | 51 +++++++++++++------------------------
 public/file.svg             |  1 -
 public/globe.svg            |  1 -
 public/next.svg             |  1 -
 public/vercel.svg           |  1 -
 public/window.svg           |  1 -
 13 files changed, 36 insertions(+), 49 deletions(-)
 delete mode 100644 public/file.svg
 delete mode 100644 public/globe.svg
 delete mode 100644 public/next.svg
 delete mode 100644 public/vercel.svg
 delete mode 100644 public/window.svg

diff --git a/.example.env b/.example.env
index f6c027e..cf9f076 100644
--- a/.example.env
+++ b/.example.env
@@ -1,5 +1,15 @@
-APP_DESC="An open-source instant replay tool for modern Linux desktops. Built with ❤️ for the Linux community."
-API_URL=https://wayclip.com
+NEXT_PUBLIC_DEFAULT_AVATAR_URL=https://avatars.githubusercontent.com/u/1024025?v=4
+NEXT_PUBLIC_UPLOAD_LIMIT_BYTES=2147483648
+NEXT_PUBLIC_GITHUB_AUTH_ENABLED=TRUE
+NEXT_PUBLIC_DISCORD_AUTH_ENABLED=TRUE
+NEXT_PUBLIC_GOOGLE_AUTH_ENABLED=TRUE
+NEXT_PUBLIC_EMAIL_AUTH_ENABLED=TRUE
+NEXT_PUBLIC_PAYMENTS_ENABLED=TRUE
+TIERS_JSON='[
+  {"name":"Free","max_storage_bytes":2147483648,"stripe_price_id":null,"display_price": "$0.00", "description": "Perfect for trying out cloud sharing", "display_features": ["2GB cloud storage", "Unlimited local recordings", "Basic sharing links"]},
+]'
+NEXT_PUBLIC_APP_DESC="An open-source instant replay tool for modern Linux desktops. Built with ❤️ for the Linux community."
+NEXT_PUBLIC_API_URL=https://wayclip.com
 NEXT_PUBLIC_FOOTER_LINKS='{
     "Product": [
         { "text": "Features", "href": "https://wayclip.com#Features" },
@@ -26,4 +36,3 @@ NEXT_PUBLIC_NAVBAR_LINKS='[
 ]'
 NEXT_PUBLIC_FRONTEND_URL=https://dash.wayclip.com
 NEXT_PUBLIC_APP_NAME=Wayclip
-NEXT_PUBLIC_UPLOAD_LIMIT_BYTES=2147483648
diff --git a/app/dash/page.tsx b/app/dash/page.tsx
index 2dc1259..7ded390 100644
--- a/app/dash/page.tsx
+++ b/app/dash/page.tsx
@@ -373,7 +373,7 @@ const DashboardPage = () => {
 
     useEffect(() => {
         const fetchPaymentData = async () => {
-            const data = await getPaymentInfo();
+            const data = getPaymentInfo();
             setPaymentData(data);
         };
         const fetchClips = async () => {
@@ -531,7 +531,7 @@ const DashboardPage = () => {
                         <h2 className='text-xl font-semibold'>Account Data</h2>
                     </header>
                     <div className='grid lg:grid-cols-3 gap-6'>
-                        <Card className='flex flex-col'>
+                        <Card className='flex flex-col col-span-3'>
                             <CardHeader>
                                 <CardTitle>Account Information</CardTitle>
                                 <CardDescription>Manage your account details and security settings.</CardDescription>
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 5c6e051..9eb8aa7 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -48,7 +48,7 @@ const LoginClientComponent = () => {
     useEffect(() => {
         const fetchAuthInfo = async () => {
             try {
-                const info = await getAuthInfo();
+                const info = getAuthInfo();
                 setAuthInfo(info);
             } catch (error) {
                 console.error('Failed to fetch auth info:', error);
diff --git a/app/reset-password/page.tsx b/app/reset-password/page.tsx
index 8176920..cd46da4 100644
--- a/app/reset-password/page.tsx
+++ b/app/reset-password/page.tsx
@@ -51,7 +51,7 @@ const ResetPasswordClientComponent = () => {
     useEffect(() => {
         const fetchAuthSettings = async () => {
             try {
-                const info = await getAuthInfo();
+                const info = getAuthInfo();
                 setAuthInfo(info);
             } catch (error) {
                 console.error('Failed to fetch auth settings:', error);
diff --git a/components/detailView.tsx b/components/detailView.tsx
index 1b4db8b..deb7951 100644
--- a/components/detailView.tsx
+++ b/components/detailView.tsx
@@ -79,7 +79,7 @@ export const UserDetailView = ({ userId, onDataChange }: { userId: string; onDat
             const response = await axios.get<FullUserDetails>(`${api_url}/admin/users/${userId}`, {
                 withCredentials: true,
             });
-            const paymentReponse = await getPaymentInfo();
+            const paymentReponse = getPaymentInfo();
             setDetails(response.data);
             setPaymentInfo(paymentReponse);
         } catch (error) {
diff --git a/components/nav.tsx b/components/nav.tsx
index 8431343..fa2e4ed 100644
--- a/components/nav.tsx
+++ b/components/nav.tsx
@@ -7,7 +7,7 @@ import { getAppInfo } from '@/lib/utils';
 import { LinkItem } from '@/app/layout';
 
 export const Navbar = async () => {
-    const appInfo = await getAppInfo();
+    const appInfo = getAppInfo();
     const navLinks: LinkItem[] = JSON.parse(process.env.NEXT_PUBLIC_NAVBAR_LINKS || '[]');
     return (
         <header
diff --git a/components/payment.tsx b/components/payment.tsx
index dbb2555..5dc8ae4 100644
--- a/components/payment.tsx
+++ b/components/payment.tsx
@@ -19,7 +19,7 @@ export const PaymentVerificationClient = () => {
 
     useEffect(() => {
         const fetchData = async () => {
-            const payment = await getPaymentInfo();
+            const payment = getPaymentInfo();
             setPaymentInfo(payment);
         };
         fetchData();
diff --git a/lib/utils.ts b/lib/utils.ts
index d82bd9b..174c8ec 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -6,17 +6,13 @@ export function cn(...inputs: ClassValue[]) {
 }
 
 export type AppInfo = {
-    backend_url: string;
-    frontend_url: string;
     app_name: string;
     default_avatar_url: string;
     upload_limit_bytes: number;
 };
 
-export async function getAppInfo(): Promise<AppInfo> {
+export function getAppInfo(): AppInfo {
     return {
-        backend_url: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000',
-        frontend_url: process.env.NEXT_PUBLIC_FRONTEND_URL || 'http://localhost:3003',
         app_name: process.env.NEXT_PUBLIC_APP_NAME || 'Wayclip',
         default_avatar_url: process.env.NEXT_PUBLIC_DEFAULT_AVATAR || '',
         upload_limit_bytes: Number(process.env.NEXT_PUBLIC_UPLOAD_LIMIT_BYTES) || 0,
@@ -34,11 +30,6 @@ export type Tier = {
     is_popular: boolean;
 };
 
-type RawPaymentInfo = {
-    payments_enabled: boolean;
-    active_tiers: string;
-};
-
 export type ParsedPaymentInfo = {
     payments_enabled: boolean;
     active_tiers: Tier[];
@@ -51,34 +42,26 @@ export type AuthInfo = {
     email_auth_enabled: boolean;
 };
 
-export async function getPaymentInfo(): Promise<ParsedPaymentInfo> {
-    const api_url = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
-    const res = await fetch(`${api_url}/get-payment-info`);
-
-    if (!res.ok) {
-        throw new Error('Failed to fetch payment info');
-    }
-
-    const rawData: RawPaymentInfo = await res.json();
+export function getPaymentInfo(): ParsedPaymentInfo {
+    const payments_enabled = process.env.NEXT_PUBLIC_PAYMENTS_ENABLED === 'true';
 
+    let active_tiers: Tier[] = [];
     try {
-        const parsedTiers: Tier[] = JSON.parse(rawData.active_tiers);
-
-        return {
-            payments_enabled: rawData.payments_enabled,
-            active_tiers: parsedTiers,
-        };
+        if (process.env.NEXT_PUBLIC_ACTIVE_TIERS) {
+            active_tiers = JSON.parse(process.env.NEXT_PUBLIC_ACTIVE_TIERS);
+        }
     } catch (error) {
-        console.error('Failed to parse active_tiers JSON:', error);
-        throw new Error('Failed to parse active_tiers from payment info');
+        console.error('Failed to parse NEXT_PUBLIC_ACTIVE_TIERS:', error);
     }
+
+    return { payments_enabled, active_tiers };
 }
 
-export async function getAuthInfo(): Promise<AuthInfo> {
-    const api_url = process.env.NEXT_PUBLIC_API_URL;
-    const res = await fetch(`${api_url}/get-auth-info`);
-    if (!res.ok) {
-        throw new Error('Failed to fetch auth info');
-    }
-    return res.json();
+export function getAuthInfo(): AuthInfo {
+    return {
+        discord_auth_enabled: process.env.NEXT_PUBLIC_DISCORD_AUTH_ENABLED === 'true',
+        github_auth_enabled: process.env.NEXT_PUBLIC_GITHUB_AUTH_ENABLED === 'true',
+        google_auth_enabled: process.env.NEXT_PUBLIC_GOOGLE_AUTH_ENABLED === 'true',
+        email_auth_enabled: process.env.NEXT_PUBLIC_EMAIL_AUTH_ENABLED === 'true',
+    };
 }
diff --git a/public/file.svg b/public/file.svg
deleted file mode 100644
index 004145c..0000000
--- a/public/file.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/public/globe.svg b/public/globe.svg
deleted file mode 100644
index 567f17b..0000000
--- a/public/globe.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/public/next.svg b/public/next.svg
deleted file mode 100644
index 5174b28..0000000
--- a/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/public/vercel.svg b/public/vercel.svg
deleted file mode 100644
index 7705396..0000000
--- a/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/public/window.svg b/public/window.svg
deleted file mode 100644
index b2b2a44..0000000
--- a/public/window.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
\ No newline at end of file

From 5436ef610a078ee843e87bac1e2f5ebc4cf5aa03 Mon Sep 17 00:00:00 2001
From: konyogony <me@konyogony.dev>
Date: Tue, 4 Nov 2025 22:33:56 +0700
Subject: [PATCH 09/22] [DASH]


From de7eca312795470b534aaf2ce6a83777fa2b6448 Mon Sep 17 00:00:00 2001
From: konyogony <me@konyogony.dev>
Date: Tue, 4 Nov 2025 22:37:38 +0700
Subject: [PATCH 10/22] Fix layout [DASH]

---
 app/layout.tsx | 41 +++++++++++++++++------------------------
 1 file changed, 17 insertions(+), 24 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index 8da36b9..6128e8d 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -13,33 +13,26 @@ const inter = Inter({
 });
 
 export async function generateMetadata(): Promise<Metadata> {
-    let appInfo: AppInfo = {
-        backend_url: '',
-        frontend_url: '',
-        app_name: 'MyApp',
-        default_avatar_url: '',
-        upload_limit_bytes: 0,
-    };
-
+    let appInfo: AppInfo;
     try {
-        appInfo = await getAppInfo();
-    } catch (e) {
-        console.error('Failed to fetch app info for metadata', e);
-    }
+        appInfo = getAppInfo();
 
-    return {
-        title: appInfo.app_name,
-        description: `Welcome to ${appInfo.app_name}`,
-        openGraph: {
-            title: appInfo.app_name,
-            url: appInfo.frontend_url,
-        },
-        twitter: {
-            card: 'summary_large_image',
+        return {
             title: appInfo.app_name,
             description: `Welcome to ${appInfo.app_name}`,
-        },
-    };
+            openGraph: {
+                title: appInfo.app_name,
+            },
+            twitter: {
+                card: 'summary_large_image',
+                title: appInfo.app_name,
+                description: `Welcome to ${appInfo.app_name}`,
+            },
+        };
+    } catch (e) {
+        console.error('Failed to fetch app info for metadata', e);
+        throw new Error('Failed to get .env');
+    }
 }
 export type LinkItem = {
     text: string;
@@ -56,7 +49,7 @@ export default async function RootLayout({
 }: Readonly<{
     children: React.ReactNode;
 }>) {
-    const appInfo = await getAppInfo();
+    const appInfo = getAppInfo();
     const app_desc = process.env.NEXT_PUBLIC_APP_DESC;
 
     const footerLinks: LinkCategories = JSON.parse(process.env.NEXT_PUBLIC_FOOTER_LINKS || '{}');

From 930d9f1af2c7e4c3001d95703c63ce4622e6c901 Mon Sep 17 00:00:00 2001
From: konyogony <me@konyogony.dev>
Date: Tue, 4 Nov 2025 22:45:41 +0700
Subject: [PATCH 11/22] fix script + Dockerfile [DASH]

---
 Dockerfile    | 49 ++++++++++++++++++++++++++++++++++++++-----------
 entrypoint.sh | 17 +++++++++++++++--
 2 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 20fa6b5..eb1c609 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,17 +1,42 @@
 FROM oven/bun:1-slim AS builder
 WORKDIR /app
 
-COPY package.json bun.lock ./
-COPY next.config.ts components.json eslint.config.mjs postcss.config.mjs tsconfig.json ./
-
-RUN bun install --immutable
+ARG NEXT_PUBLIC_DEFAULT_AVATAR_URL=__NEXT_PUBLIC_DEFAULT_AVATAR_URL__
+ARG NEXT_PUBLIC_GITHUB_AUTH_ENABLED=__NEXT_PUBLIC_GITHUB_AUTH_ENABLED__
+ARG NEXT_PUBLIC_DISCORD_AUTH_ENABLED=__NEXT_PUBLIC_DISCORD_AUTH_ENABLED__
+ARG NEXT_PUBLIC_GOOGLE_AUTH_ENABLED=__NEXT_PUBLIC_GOOGLE_AUTH_ENABLED__
+ARG NEXT_PUBLIC_EMAIL_AUTH_ENABLED=__NEXT_PUBLIC_EMAIL_AUTH_ENABLED__
+ARG NEXT_PUBLIC_PAYMENTS_ENABLED=__NEXT_PUBLIC_PAYMENTS_ENABLED__
+ARG TIERS_JSON='__TIERS_JSON__'
+ARG NEXT_PUBLIC_APP_DESC="__NEXT_PUBLIC_APP_DESC__"
+ARG NEXT_PUBLIC_API_URL=__NEXT_PUBLIC_API_URL__
+ARG NEXT_PUBLIC_FOOTER_LINKS='__NEXT_PUBLIC_FOOTER_LINKS__'
+ARG NEXT_PUBLIC_NAVBAR_LINKS='__NEXT_PUBLIC_NAVBAR_LINKS__'
+ARG NEXT_PUBLIC_FRONTEND_URL=__NEXT_PUBLIC_FRONTEND_URL__
+ARG NEXT_PUBLIC_APP_NAME=__NEXT_PUBLIC_APP_NAME__
+ARG NEXT_PUBLIC_UPLOAD_LIMIT_BYTES=__NEXT_PUBLIC_UPLOAD_LIMIT_BYTES__
+
+ENV NEXT_PUBLIC_DEFAULT_AVATAR_URL=$NEXT_PUBLIC_DEFAULT_AVATAR_URL
+ENV NEXT_PUBLIC_GITHUB_AUTH_ENABLED=$NEXT_PUBLIC_GITHUB_AUTH_ENABLED
+ENV NEXT_PUBLIC_DISCORD_AUTH_ENABLED=$NEXT_PUBLIC_DISCORD_AUTH_ENABLED
+ENV NEXT_PUBLIC_GOOGLE_AUTH_ENABLED=$NEXT_PUBLIC_GOOGLE_AUTH_ENABLED
+ENV NEXT_PUBLIC_EMAIL_AUTH_ENABLED=$NEXT_PUBLIC_EMAIL_AUTH_ENABLED
+ENV NEXT_PUBLIC_PAYMENTS_ENABLED=$NEXT_PUBLIC_PAYMENTS_ENABLED
+ENV TIERS_JSON=$TIERS_JSON
+ENV NEXT_PUBLIC_APP_DESC=$NEXT_PUBLIC_APP_DESC
+ENV NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL
+ENV NEXT_PUBLIC_FOOTER_LINKS=$NEXT_PUBLIC_FOOTER_LINKS
+ENV NEXT_PUBLIC_NAVBAR_LINKS=$NEXT_PUBLIC_NAVBAR_LINKS
+ENV NEXT_PUBLIC_FRONTEND_URL=$NEXT_PUBLIC_FRONTEND_URL
+ENV NEXT_PUBLIC_APP_NAME=$NEXT_PUBLIC_APP_NAME
+ENV NEXT_PUBLIC_UPLOAD_LIMIT_BYTES=$NEXT_PUBLIC_UPLOAD_LIMIT_BYTES
+
+COPY package.json bun.lockb ./
+RUN bun install --frozen-lockfile
 
 COPY . .
 
-COPY .example.env .env
-ARG NEXT_PUBLIC_API_URL=https://wayclip.com
-RUN sed -i "s|NEXT_PUBLIC_API_URL=.*|NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}|" .env
-
+RUN echo "Building with placeholder envs..."
 RUN bun run build
 
 FROM node:20-slim AS runner
@@ -21,11 +46,13 @@ ENV NODE_ENV=production
 ENV PORT=0330
 ENV HOST=0.0.0.0
 
-COPY --from=builder /app/public ./public
 COPY --from=builder /app/.next/standalone ./
 COPY --from=builder /app/.next/static ./.next/static
-COPY --from=builder /app/.env ./
+COPY --from=builder /app/public ./public
 
-EXPOSE 0330 
+COPY docker-entrypoint.sh /app/docker-entrypoint.sh
+RUN chmod +x /app/docker-entrypoint.sh
 
+EXPOSE 0330 
+ENTRYPOINT ["/app/docker-entrypoint.sh"]
 CMD ["node", "server.js"]
diff --git a/entrypoint.sh b/entrypoint.sh
index 06ba108..35401ff 100644
--- a/entrypoint.sh
+++ b/entrypoint.sh
@@ -1,8 +1,21 @@
 #!/bin/sh
 set -e
 
-for var in $(env | grep '^NEXT_PUBLIC_' | cut -d= -f1); do
-  sed -i "s|\${$var}|${!var}|g" /app/.next/standalone/server.js
+find ./.next -type f \( -name "*.js" -o -name "*.css" -o -name "*.html" \) -print0 | while read -r -d $'\0' file; do
+    sed -i "s|__NEXT_PUBLIC_DEFAULT_AVATAR_URL__|${NEXT_PUBLIC_DEFAULT_AVATAR_URL}|g" "$file"
+    sed -i "s|__NEXT_PUBLIC_GITHUB_AUTH_ENABLED__|${NEXT_PUBLIC_GITHUB_AUTH_ENABLED}|g" "$file"
+    sed -i "s|__NEXT_PUBLIC_DISCORD_AUTH_ENABLED__|${NEXT_PUBLIC_DISCORD_AUTH_ENABLED}|g" "$file"
+    sed -i "s|__NEXT_PUBLIC_GOOGLE_AUTH_ENABLED__|${NEXT_PUBLIC_GOOGLE_AUTH_ENABLED}|g" "$file"
+    sed -i "s|__NEXT_PUBLIC_EMAIL_AUTH_ENABLED__|${NEXT_PUBLIC_EMAIL_AUTH_ENABLED}|g" "$file"
+    sed -i "s|__NEXT_PUBLIC_PAYMENTS_ENABLED__|${NEXT_PUBLIC_PAYMENTS_ENABLED}|g" "$file"
+    sed -i "s|__TIERS_JSON__|${TIERS_JSON}|g" "$file"
+    sed -i "s|__NEXT_PUBLIC_APP_DESC__|${NEXT_PUBLIC_APP_DESC}|g" "$file"
+    sed -i "s|__NEXT_PUBLIC_API_URL__|${NEXT_PUBLIC_API_URL}|g" "$file"
+    sed -i "s|__NEXT_PUBLIC_FOOTER_LINKS__|${NEXT_PUBLIC_FOOTER_LINKS}|g" "$file"
+    sed -i "s|__NEXT_PUBLIC_NAVBAR_LINKS__|${NEXT_PUBLIC_NAVBAR_LINKS}|g" "$file"
+    sed -i "s|__NEXT_PUBLIC_FRONTEND_URL__|${NEXT_PUBLIC_FRONTEND_URL}|g" "$file"
+    sed -i "s|__NEXT_PUBLIC_APP_NAME__|${NEXT_PUBLIC_APP_NAME}|g" "$file"
+    sed -i "s|__NEXT_PUBLIC_UPLOAD_LIMIT_BYTES__|${NEXT_PUBLIC_UPLOAD_LIMIT_BYTES}|g" "$file"
 done
 
 exec "$@"

From a314abe4d975dc86b90ed023c09df57a372060b5 Mon Sep 17 00:00:00 2001
From: konyogony <me@konyogony.dev>
Date: Tue, 4 Nov 2025 22:48:13 +0700
Subject: [PATCH 12/22] Fix dockerifle [DASH]

---
 Dockerfile | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index eb1c609..3042798 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -50,9 +50,9 @@ COPY --from=builder /app/.next/standalone ./
 COPY --from=builder /app/.next/static ./.next/static
 COPY --from=builder /app/public ./public
 
-COPY docker-entrypoint.sh /app/docker-entrypoint.sh
-RUN chmod +x /app/docker-entrypoint.sh
+COPY entrypoint.sh /app/entrypoint.sh
+RUN chmod +x /app/entrypoint.sh
 
 EXPOSE 0330 
-ENTRYPOINT ["/app/docker-entrypoint.sh"]
+ENTRYPOINT ["/app/entrypoint.sh"]
 CMD ["node", "server.js"]

From 30fd14412576a5c2a51adea7bdc94090d28cc445 Mon Sep 17 00:00:00 2001
From: konyogony <me@konyogony.dev>
Date: Tue, 4 Nov 2025 22:49:52 +0700
Subject: [PATCH 13/22] Fix dockerifle x222222222 [DASH]

---
 Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Dockerfile b/Dockerfile
index 3042798..69fffa0 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -31,7 +31,7 @@ ENV NEXT_PUBLIC_FRONTEND_URL=$NEXT_PUBLIC_FRONTEND_URL
 ENV NEXT_PUBLIC_APP_NAME=$NEXT_PUBLIC_APP_NAME
 ENV NEXT_PUBLIC_UPLOAD_LIMIT_BYTES=$NEXT_PUBLIC_UPLOAD_LIMIT_BYTES
 
-COPY package.json bun.lockb ./
+COPY package.json bun.lock ./
 RUN bun install --frozen-lockfile
 
 COPY . .

From cf4923fea8d0f204514fe3276392babb38a26a9e Mon Sep 17 00:00:00 2001
From: konyogony <me@konyogony.dev>
Date: Wed, 5 Nov 2025 20:05:53 +0700
Subject: [PATCH 14/22] Another try at dockerising a nextjs app [DASH]

---
 Dockerfile    |  8 ++++----
 entrypoint.sh | 10 +++++++---
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 69fffa0..1e96312 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -7,11 +7,11 @@ ARG NEXT_PUBLIC_DISCORD_AUTH_ENABLED=__NEXT_PUBLIC_DISCORD_AUTH_ENABLED__
 ARG NEXT_PUBLIC_GOOGLE_AUTH_ENABLED=__NEXT_PUBLIC_GOOGLE_AUTH_ENABLED__
 ARG NEXT_PUBLIC_EMAIL_AUTH_ENABLED=__NEXT_PUBLIC_EMAIL_AUTH_ENABLED__
 ARG NEXT_PUBLIC_PAYMENTS_ENABLED=__NEXT_PUBLIC_PAYMENTS_ENABLED__
-ARG TIERS_JSON='__TIERS_JSON__'
+ARG TIERS_JSON='"__TIERS_JSON__"'
 ARG NEXT_PUBLIC_APP_DESC="__NEXT_PUBLIC_APP_DESC__"
 ARG NEXT_PUBLIC_API_URL=__NEXT_PUBLIC_API_URL__
-ARG NEXT_PUBLIC_FOOTER_LINKS='__NEXT_PUBLIC_FOOTER_LINKS__'
-ARG NEXT_PUBLIC_NAVBAR_LINKS='__NEXT_PUBLIC_NAVBAR_LINKS__'
+ARG NEXT_PUBLIC_FOOTER_LINKS='"__NEXT_PUBLIC_FOOTER_LINKS__"'
+ARG NEXT_PUBLIC_NAVBAR_LINKS='"__NEXT_PUBLIC_NAVBAR_LINKS__"'
 ARG NEXT_PUBLIC_FRONTEND_URL=__NEXT_PUBLIC_FRONTEND_URL__
 ARG NEXT_PUBLIC_APP_NAME=__NEXT_PUBLIC_APP_NAME__
 ARG NEXT_PUBLIC_UPLOAD_LIMIT_BYTES=__NEXT_PUBLIC_UPLOAD_LIMIT_BYTES__
@@ -53,6 +53,6 @@ COPY --from=builder /app/public ./public
 COPY entrypoint.sh /app/entrypoint.sh
 RUN chmod +x /app/entrypoint.sh
 
-EXPOSE 0330 
+EXPOSE 0330
 ENTRYPOINT ["/app/entrypoint.sh"]
 CMD ["node", "server.js"]
diff --git a/entrypoint.sh b/entrypoint.sh
index 35401ff..3557202 100644
--- a/entrypoint.sh
+++ b/entrypoint.sh
@@ -1,6 +1,10 @@
 #!/bin/sh
 set -e
 
+TIERS_JSON_SINGLE_LINE=$(echo "$TIERS_JSON" | tr -d '\r\n')
+NEXT_PUBLIC_FOOTER_LINKS_SINGLE_LINE=$(echo "$NEXT_PUBLIC_FOOTER_LINKS" | tr -d '\r\n')
+NEXT_PUBLIC_NAVBAR_LINKS_SINGLE_LINE=$(echo "$NEXT_PUBLIC_NAVBAR_LINKS" | tr -d '\r\n')
+
 find ./.next -type f \( -name "*.js" -o -name "*.css" -o -name "*.html" \) -print0 | while read -r -d $'\0' file; do
     sed -i "s|__NEXT_PUBLIC_DEFAULT_AVATAR_URL__|${NEXT_PUBLIC_DEFAULT_AVATAR_URL}|g" "$file"
     sed -i "s|__NEXT_PUBLIC_GITHUB_AUTH_ENABLED__|${NEXT_PUBLIC_GITHUB_AUTH_ENABLED}|g" "$file"
@@ -8,14 +12,14 @@ find ./.next -type f \( -name "*.js" -o -name "*.css" -o -name "*.html" \) -prin
     sed -i "s|__NEXT_PUBLIC_GOOGLE_AUTH_ENABLED__|${NEXT_PUBLIC_GOOGLE_AUTH_ENABLED}|g" "$file"
     sed -i "s|__NEXT_PUBLIC_EMAIL_AUTH_ENABLED__|${NEXT_PUBLIC_EMAIL_AUTH_ENABLED}|g" "$file"
     sed -i "s|__NEXT_PUBLIC_PAYMENTS_ENABLED__|${NEXT_PUBLIC_PAYMENTS_ENABLED}|g" "$file"
-    sed -i "s|__TIERS_JSON__|${TIERS_JSON}|g" "$file"
     sed -i "s|__NEXT_PUBLIC_APP_DESC__|${NEXT_PUBLIC_APP_DESC}|g" "$file"
     sed -i "s|__NEXT_PUBLIC_API_URL__|${NEXT_PUBLIC_API_URL}|g" "$file"
-    sed -i "s|__NEXT_PUBLIC_FOOTER_LINKS__|${NEXT_PUBLIC_FOOTER_LINKS}|g" "$file"
-    sed -i "s|__NEXT_PUBLIC_NAVBAR_LINKS__|${NEXT_PUBLIC_NAVBAR_LINKS}|g" "$file"
     sed -i "s|__NEXT_PUBLIC_FRONTEND_URL__|${NEXT_PUBLIC_FRONTEND_URL}|g" "$file"
     sed -i "s|__NEXT_PUBLIC_APP_NAME__|${NEXT_PUBLIC_APP_NAME}|g" "$file"
     sed -i "s|__NEXT_PUBLIC_UPLOAD_LIMIT_BYTES__|${NEXT_PUBLIC_UPLOAD_LIMIT_BYTES}|g" "$file"
+    sed -i "s|\"__TIERS_JSON__\"|${TIERS_JSON_SINGLE_LINE}|g" "$file"
+    sed -i "s|\"__NEXT_PUBLIC_FOOTER_LINKS__\"|${NEXT_PUBLIC_FOOTER_LINKS_SINGLE_LINE}|g" "$file"
+    sed -i "s|\"__NEXT_PUBLIC_NAVBAR_LINKS__\"|${NEXT_PUBLIC_NAVBAR_LINKS_SINGLE_LINE}|g" "$file"
 done
 
 exec "$@"

From 39e0f628b31ae76f255e3ffc50b2f1f42b7359ca Mon Sep 17 00:00:00 2001
From: konyogony <me@konyogony.dev>
Date: Wed, 5 Nov 2025 20:11:57 +0700
Subject: [PATCH 15/22] Try better placeholders [DASH]

---
 Dockerfile    | 6 +++---
 entrypoint.sh | 7 ++++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 1e96312..ea70c2d 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -7,11 +7,11 @@ ARG NEXT_PUBLIC_DISCORD_AUTH_ENABLED=__NEXT_PUBLIC_DISCORD_AUTH_ENABLED__
 ARG NEXT_PUBLIC_GOOGLE_AUTH_ENABLED=__NEXT_PUBLIC_GOOGLE_AUTH_ENABLED__
 ARG NEXT_PUBLIC_EMAIL_AUTH_ENABLED=__NEXT_PUBLIC_EMAIL_AUTH_ENABLED__
 ARG NEXT_PUBLIC_PAYMENTS_ENABLED=__NEXT_PUBLIC_PAYMENTS_ENABLED__
-ARG TIERS_JSON='"__TIERS_JSON__"'
+ARG TIERS_JSON='[]'
 ARG NEXT_PUBLIC_APP_DESC="__NEXT_PUBLIC_APP_DESC__"
 ARG NEXT_PUBLIC_API_URL=__NEXT_PUBLIC_API_URL__
-ARG NEXT_PUBLIC_FOOTER_LINKS='"__NEXT_PUBLIC_FOOTER_LINKS__"'
-ARG NEXT_PUBLIC_NAVBAR_LINKS='"__NEXT_PUBLIC_NAVBAR_LINKS__"'
+ARG NEXT_PUBLIC_FOOTER_LINKS='{}'
+ARG NEXT_PUBLIC_NAVBAR_LINKS='[]'
 ARG NEXT_PUBLIC_FRONTEND_URL=__NEXT_PUBLIC_FRONTEND_URL__
 ARG NEXT_PUBLIC_APP_NAME=__NEXT_PUBLIC_APP_NAME__
 ARG NEXT_PUBLIC_UPLOAD_LIMIT_BYTES=__NEXT_PUBLIC_UPLOAD_LIMIT_BYTES__
diff --git a/entrypoint.sh b/entrypoint.sh
index 3557202..6d7dbac 100644
--- a/entrypoint.sh
+++ b/entrypoint.sh
@@ -17,9 +17,10 @@ find ./.next -type f \( -name "*.js" -o -name "*.css" -o -name "*.html" \) -prin
     sed -i "s|__NEXT_PUBLIC_FRONTEND_URL__|${NEXT_PUBLIC_FRONTEND_URL}|g" "$file"
     sed -i "s|__NEXT_PUBLIC_APP_NAME__|${NEXT_PUBLIC_APP_NAME}|g" "$file"
     sed -i "s|__NEXT_PUBLIC_UPLOAD_LIMIT_BYTES__|${NEXT_PUBLIC_UPLOAD_LIMIT_BYTES}|g" "$file"
-    sed -i "s|\"__TIERS_JSON__\"|${TIERS_JSON_SINGLE_LINE}|g" "$file"
-    sed -i "s|\"__NEXT_PUBLIC_FOOTER_LINKS__\"|${NEXT_PUBLIC_FOOTER_LINKS_SINGLE_LINE}|g" "$file"
-    sed -i "s|\"__NEXT_PUBLIC_NAVBAR_LINKS__\"|${NEXT_PUBLIC_NAVBAR_LINKS_SINGLE_LINE}|g" "$file"
+
+    sed -i "s|\"TIERS_JSON\":\[\]|\"TIERS_JSON\":${TIERS_JSON_SINGLE_LINE}|g" "$file"
+    sed -i "s|\"NEXT_PUBLIC_FOOTER_LINKS\":\{\}|\"NEXT_PUBLIC_FOOTER_LINKS\":${NEXT_PUBLIC_FOOTER_LINKS_SINGLE_LINE}|g" "$file"
+    sed -i "s|\"NEXT_PUBLIC_NAVBAR_LINKS\":\[\]|\"NEXT_PUBLIC_NAVBAR_LINKS\":${NEXT_PUBLIC_NAVBAR_LINKS_SINGLE_LINE}|g" "$file"
 done
 
 exec "$@"

From 74ef830f06441b2cbbb57e6818adab996b6272eb Mon Sep 17 00:00:00 2001
From: konyogony <me@konyogony.dev>
Date: Wed, 5 Nov 2025 20:15:11 +0700
Subject: [PATCH 16/22] AI stupid again [DASH]

---
 Dockerfile | 1 -
 1 file changed, 1 deletion(-)

diff --git a/Dockerfile b/Dockerfile
index ea70c2d..2a80fae 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -48,7 +48,6 @@ ENV HOST=0.0.0.0
 
 COPY --from=builder /app/.next/standalone ./
 COPY --from=builder /app/.next/static ./.next/static
-COPY --from=builder /app/public ./public
 
 COPY entrypoint.sh /app/entrypoint.sh
 RUN chmod +x /app/entrypoint.sh

From c93331bc1790e6fec1eb0649c93a01d3572d5f0b Mon Sep 17 00:00:00 2001
From: konyogony <me@konyogony.dev>
Date: Wed, 5 Nov 2025 21:41:21 +0700
Subject: [PATCH 17/22] Change from dynamically replacing env variables to an
 API route by vibecoding :) [DASH]

---
 app/api/config/route.ts     |  33 +++++
 app/dash/page.tsx           | 245 ++++++++++++------------------------
 app/layout.tsx              | 113 +++++------------
 app/login/page.tsx          | 186 +++++++++------------------
 app/reset-password/page.tsx |  72 +++--------
 bun.lock                    |   5 +
 components/detailView.tsx   |  66 +++++-----
 components/footer.tsx       |  47 +++++++
 components/nav.tsx          |  23 ++--
 components/panel.tsx        |  78 +++++-------
 components/payment.tsx      |  98 +++++++--------
 contexts/authContext.tsx    |  34 +++--
 contexts/configContext.tsx  |  48 +++++++
 lib/config.ts               |  47 +++++++
 lib/utils.ts                |  68 ++--------
 package.json                |   1 +
 16 files changed, 505 insertions(+), 659 deletions(-)
 create mode 100644 app/api/config/route.ts
 create mode 100644 components/footer.tsx
 create mode 100644 contexts/configContext.tsx
 create mode 100644 lib/config.ts

diff --git a/app/api/config/route.ts b/app/api/config/route.ts
new file mode 100644
index 0000000..94b41e4
--- /dev/null
+++ b/app/api/config/route.ts
@@ -0,0 +1,33 @@
+import { NextResponse } from 'next/server';
+import { getServerConfig } from '@/lib/config';
+
+export interface Tier {
+    name: string;
+    max_storage_bytes: number;
+    stripe_price_id: string | null;
+    display_price: string;
+    display_frequency?: string;
+    description: string;
+    display_features: string[];
+    is_popular?: boolean;
+}
+
+export interface AppConfig {
+    apiUrl: string;
+    appName: string;
+    defaultAvatarUrl: string;
+    uploadLimitBytes: number;
+    paymentsEnabled: boolean;
+    activeTiers: Tier[];
+    discordAuthEnabled: boolean;
+    githubAuthEnabled: boolean;
+    googleAuthEnabled: boolean;
+    emailAuthEnabled: boolean;
+    footerLinks: Record<string, { text: string; href: string; external?: boolean }[]>;
+    navbarLinks: { text: string; href: string }[];
+}
+
+export async function GET() {
+    const config = getServerConfig();
+    return NextResponse.json(config);
+}
diff --git a/app/dash/page.tsx b/app/dash/page.tsx
index 7ded390..01a1d60 100644
--- a/app/dash/page.tsx
+++ b/app/dash/page.tsx
@@ -1,17 +1,16 @@
 'use client';
 
-import { Copy, Trash2, ExternalLink, Check, LogOut, Unplug, Shield, ShieldCheck, Key } from 'lucide-react';
+import { Copy, Trash2, ExternalLink, Check, LogOut, Unplug, Shield, ShieldCheck, Key, RefreshCcw } from 'lucide-react';
 import { InputOTP, InputOTPSlot, InputOTPGroup, InputOTPSeparator } from '@/components/ui/input-otp';
 import AdminPanel from '@/components/panel';
 import { toast } from 'sonner';
-import { FormEvent } from 'react';
-import { useEffect, useState } from 'react';
+import { FormEvent, useEffect, useState } from 'react';
 import Image from 'next/image';
-import { RefreshCcw } from 'lucide-react';
 import { Clip } from '@/contexts/authContext';
 import { useRouter } from 'next/navigation';
-import { isAxiosError } from 'axios';
+import axios, { isAxiosError } from 'axios';
 import { useAuth } from '@/contexts/authContext';
+import { useConfig } from '@/contexts/configContext';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -29,7 +28,7 @@ import {
     DialogTitle,
     DialogTrigger,
 } from '@/components/ui/dialog';
-import { cn, getPaymentInfo, ParsedPaymentInfo } from '@/lib/utils';
+import { cn, formatBytes } from '@/lib/utils';
 import {
     AlertDialog,
     AlertDialogCancel,
@@ -40,7 +39,6 @@ import {
     AlertDialogTitle,
     AlertDialogTrigger,
 } from '@/components/ui/alert-dialog';
-import axios from 'axios';
 
 const LoadingScreen = () => (
     <div className='flex h-full min-h-screen w-full items-center justify-center bg-background/40'>
@@ -55,42 +53,33 @@ const providerIcons: { [key: string]: React.ReactNode } = {
     email: <span className='text-xl font-bold'>@</span>,
 };
 
-const formatBytes = (bytes: number, decimals = 2) => {
-    if (!+bytes) return '0 Bytes';
-    const k = 1024;
-    const dm = decimals < 0 ? 0 : decimals;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
-};
-
 const ClipsTable = ({
     clips,
+    apiUrl,
     onDelete,
     onCopy,
 }: {
     clips: Clip[];
+    apiUrl: string;
     onDelete: (id: string) => void;
     onCopy: (url: string) => void;
 }) => {
-    const api_url = process.env.NEXT_PUBLIC_API_URL;
     if (!clips || clips.length === 0) {
         return <p className='text-muted-foreground'>You haven&apos;t uploaded any clips yet.</p>;
     }
-
     return (
         <Table>
             <TableHeader>
                 <TableRow>
                     <TableHead className='w-[40%]'>File Name</TableHead>
-                    {'file_size' in clips[0] && <TableHead>Size</TableHead>}
-                    {'created_at' in clips[0] && <TableHead>Uploaded</TableHead>}
+                    <TableHead>Size</TableHead>
+                    <TableHead>Uploaded</TableHead>
                     <TableHead className='text-right'>Actions</TableHead>
                 </TableRow>
             </TableHeader>
             <TableBody>
                 {clips.map((clip) => {
-                    const clipUrl = `${api_url}/clip/${clip.id}`;
+                    const clipUrl = `${apiUrl}/clip/${clip.id}`;
                     return (
                         <TableRow key={clip.id}>
                             <TableCell className='font-medium truncate max-w-xs'>
@@ -104,10 +93,8 @@ const ClipsTable = ({
                                     <ExternalLink className='size-4 text-muted-foreground flex-shrink-0' />
                                 </a>
                             </TableCell>
-                            {'file_size' in clip && <TableCell>{formatBytes(clip.file_size)}</TableCell>}
-                            {'created_at' in clip && (
-                                <TableCell>{new Date(clip.created_at).toLocaleDateString()}</TableCell>
-                            )}
+                            <TableCell>{formatBytes(clip.file_size)}</TableCell>
+                            <TableCell>{new Date(clip.created_at).toLocaleDateString()}</TableCell>
                             <TableCell className='flex justify-end gap-2'>
                                 <Button
                                     variant='outline'
@@ -161,8 +148,7 @@ const ClipsTable = ({
     );
 };
 
-const ResetPasswordDialog = ({ onFinished }: { onFinished: () => void }) => {
-    const api_url = process.env.NEXT_PUBLIC_API_URL;
+const ResetPasswordDialog = ({ apiUrl, onFinished }: { apiUrl: string; onFinished: () => void }) => {
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [email, setEmail] = useState('');
 
@@ -170,7 +156,7 @@ const ResetPasswordDialog = ({ onFinished }: { onFinished: () => void }) => {
         e.preventDefault();
         setIsSubmitting(true);
         try {
-            const response = await axios.post(`${api_url}/auth/forgot-password`, { email });
+            const response = await axios.post(`${apiUrl}/auth/forgot-password`, { email });
             toast.success(response.data.message);
             onFinished();
         } catch (error) {
@@ -204,8 +190,7 @@ const ResetPasswordDialog = ({ onFinished }: { onFinished: () => void }) => {
     );
 };
 
-const TwoFactorSetup = ({ onSuccess }: { onSuccess: () => void }) => {
-    const api_url = process.env.NEXT_PUBLIC_API_URL;
+const TwoFactorSetup = ({ apiUrl, onSuccess }: { apiUrl: string; onSuccess: () => void }) => {
     const [step, setStep] = useState<'setup' | 'verify'>('setup');
     const [secret, setSecret] = useState('');
     const [qrCodeUrl, setQrCodeUrl] = useState('');
@@ -216,13 +201,13 @@ const TwoFactorSetup = ({ onSuccess }: { onSuccess: () => void }) => {
     const initiate2FA = async () => {
         setIsLoading(true);
         try {
-            const response = await axios.post(`${api_url}/api/2fa/setup`, {}, { withCredentials: true });
+            const response = await axios.post(`${apiUrl}/api/2fa/setup`, {}, { withCredentials: true });
             setSecret(response.data.secret);
             setQrCodeUrl(response.data.qr_code_base64);
             setStep('verify');
         } catch (error) {
             toast.error('Failed to initialize 2FA setup.');
-            console.error('2FA setup failed:', error);
+            console.error(error);
         } finally {
             setIsLoading(false);
         }
@@ -232,11 +217,8 @@ const TwoFactorSetup = ({ onSuccess }: { onSuccess: () => void }) => {
         setIsLoading(true);
         try {
             const response = await axios.post(
-                `${api_url}/api/2fa/verify`,
-                {
-                    secret: secret,
-                    code: verificationCode,
-                },
+                `${apiUrl}/api/2fa/verify`,
+                { secret, code: verificationCode },
                 { withCredentials: true },
             );
             setRecoveryCodes(response.data.recovery_codes);
@@ -247,7 +229,6 @@ const TwoFactorSetup = ({ onSuccess }: { onSuccess: () => void }) => {
             } else {
                 toast.error('Invalid verification code. Please try again.');
             }
-            console.error('2FA verification failed:', error);
         } finally {
             setIsLoading(false);
         }
@@ -287,7 +268,6 @@ const TwoFactorSetup = ({ onSuccess }: { onSuccess: () => void }) => {
             </div>
         );
     }
-
     if (step === 'verify') {
         return (
             <div className='space-y-4'>
@@ -336,7 +316,6 @@ const TwoFactorSetup = ({ onSuccess }: { onSuccess: () => void }) => {
             </div>
         );
     }
-
     return (
         <div className='space-y-4'>
             <div className='text-center'>
@@ -354,8 +333,8 @@ const TwoFactorSetup = ({ onSuccess }: { onSuccess: () => void }) => {
 };
 
 const DashboardPage = () => {
-    const api_url = process.env.NEXT_PUBLIC_API_URL;
-    const { isAuthenticated, isLoading, user: userData, logout, refreshUser } = useAuth();
+    const { config, isLoading: isConfigLoading } = useConfig();
+    const { isAuthenticated, isLoading: isAuthLoading, user: userData, logout, refreshUser } = useAuth();
     const router = useRouter();
     const [clips, setClips] = useState<Clip[]>([]);
     const [clipsLoading, setClipsLoading] = useState(true);
@@ -363,41 +342,37 @@ const DashboardPage = () => {
     const [show2FADialog, setShow2FADialog] = useState(false);
     const [showResetPasswordDialog, setShowResetPasswordDialog] = useState(false);
     const [isManagingSubscription, setIsManagingSubscription] = useState(false);
-    const [paymentData, setPaymentData] = useState<ParsedPaymentInfo | null>(null);
 
     useEffect(() => {
-        if (!isLoading && !isAuthenticated) {
+        if (!isAuthLoading && !isAuthenticated) {
             router.replace('/login');
         }
-    }, [isLoading, isAuthenticated, router]);
+    }, [isAuthLoading, isAuthenticated, router]);
 
     useEffect(() => {
-        const fetchPaymentData = async () => {
-            const data = getPaymentInfo();
-            setPaymentData(data);
-        };
         const fetchClips = async () => {
-            if (isAuthenticated) {
+            if (isAuthenticated && config?.apiUrl) {
                 try {
                     setClipsLoading(true);
-                    const response = await axios.get<Clip[]>(`${api_url}/api/clips/index`, { withCredentials: true });
+                    const response = await axios.get<Clip[]>(`${config.apiUrl}/api/clips/index`, {
+                        withCredentials: true,
+                    });
                     setClips(response.data);
                 } catch (error) {
-                    console.error('Failed to fetch clips:', error);
+                    console.error(error);
                     toast.error('Could not load your clips. Please try refreshing the page.');
                 } finally {
                     setClipsLoading(false);
                 }
             }
         };
-
         fetchClips();
-        fetchPaymentData();
-    }, [isAuthenticated, api_url]);
+    }, [isAuthenticated, config?.apiUrl]);
 
     const handleUnlinkProvider = async (provider: string) => {
+        if (!config?.apiUrl) return;
         try {
-            await axios.delete(`${api_url}/api/oauth/unlink/${provider}`, { withCredentials: true });
+            await axios.delete(`${config.apiUrl}/api/oauth/unlink/${provider}`, { withCredentials: true });
             toast.success(`${provider.charAt(0).toUpperCase() + provider.slice(1)} account unlinked successfully.`);
             await refreshUser();
         } catch (error) {
@@ -406,13 +381,13 @@ const DashboardPage = () => {
             } else {
                 toast.error('An unexpected error occurred.');
             }
-            console.error(`Failed to unlink ${provider}:`, error);
         }
     };
 
     const handleDeleteAccount = async () => {
+        if (!config?.apiUrl) return;
         try {
-            const response = await axios.delete(`${api_url}/api/account`, { withCredentials: true });
+            const response = await axios.delete(`${config.apiUrl}/api/account`, { withCredentials: true });
             toast.success(response.data.message || 'Your account has been scheduled for deletion.');
             logout();
         } catch (error) {
@@ -421,35 +396,37 @@ const DashboardPage = () => {
             } else {
                 toast.error('Failed to delete account. Please try again.');
             }
-            console.error('Account deletion failed:', error);
         }
     };
 
     const handleDeleteClip = async (clipId: string) => {
+        if (!config?.apiUrl) return;
         try {
-            await axios.delete(`${api_url}/api/clip/${clipId}`, { withCredentials: true });
+            await axios.delete(`${config.apiUrl}/api/clip/${clipId}`, { withCredentials: true });
             setClips((prevClips) => prevClips.filter((clip) => clip.id !== clipId));
             toast.success('Clip deleted successfully.');
             await refreshUser();
         } catch (error) {
-            console.error('Failed to delete clip:', error);
+            console.error(error);
             toast.error('An error occurred while deleting the clip. Please try again.');
         }
     };
 
-    const handleUpgrade = async (apiId: string | null) => {
-        if (!apiId) return;
+    const handleUpgrade = async (tierName: string | null) => {
+        if (!tierName || !config?.apiUrl) return;
         setIsUpgrading(true);
         try {
-            const response = await axios.post(`${api_url}/api/checkout/${apiId}`, {}, { withCredentials: true });
+            const response = await axios.post(
+                `${config.apiUrl}/api/checkout/${tierName}`,
+                {},
+                { withCredentials: true },
+            );
             const { url } = response.data;
             if (url) {
                 window.location.href = url;
-            } else {
-                throw new Error('No checkout URL received from server.');
             }
         } catch (error) {
-            console.error('Failed to create checkout session:', error);
+            console.error(error);
             toast.error('An error occurred while setting up the payment process. Please try again.');
         } finally {
             setIsUpgrading(false);
@@ -457,18 +434,17 @@ const DashboardPage = () => {
     };
 
     const handleManageSubscription = async () => {
+        if (!config?.apiUrl) return;
         setIsManagingSubscription(true);
         try {
-            const response = await axios.post(`${api_url}/api/customer-portal`, {}, { withCredentials: true });
+            const response = await axios.post(`${config.apiUrl}/api/customer-portal`, {}, { withCredentials: true });
             const { url } = response.data;
             if (url) {
                 window.location.href = url;
-            } else {
-                throw new Error('No portal URL received from server.');
             }
         } catch (error) {
+            console.error(error);
             toast.error('Could not open the billing portal. Please try again.');
-            console.error('Failed to create customer portal session:', error);
         } finally {
             setIsManagingSubscription(false);
         }
@@ -484,31 +460,17 @@ const DashboardPage = () => {
         refreshUser();
     };
 
-    // const handleLogoutOtherDevices = async () => {
-    //     try {
-    //         const response = await axios.post(`${api_url}/api/logout-devices`, {}, { withCredentials: true });
-    //         toast.success(response.data.message || 'Successfully logged out other devices.');
-    //     } catch (error) {
-    //         if (isAxiosError(error) && error.response?.data?.message) {
-    //             toast.error(error.response.data.message);
-    //         } else {
-    //             toast.error('Failed to log out other devices.');
-    //         }
-    //     }
-    // };
-
-    if (isLoading || !isAuthenticated || !userData) {
+    if (isAuthLoading || isConfigLoading || !isAuthenticated || !userData || !config) {
         return <LoadingScreen />;
     }
 
     const userTierPlan =
-        paymentData?.active_tiers.find((p) => p.name === userData?.tier) ?? paymentData?.active_tiers[0];
-    const storageLimitBytes = userData.storage_limit;
-    const storageUsedBytes = userData.storage_used;
-    const storageUsedGB = storageUsedBytes / (1024 * 1024 * 1024);
-    const storageLimitGB = storageLimitBytes > 0 ? storageLimitBytes / (1024 * 1024 * 1024) : 0;
-    const storageUsedPercentage = storageLimitBytes > 0 ? (storageUsedBytes / storageLimitBytes) * 100 : 0;
-    const isEmailVerified = userData.email_verified_at !== null && userData.email_verified_at !== undefined;
+        config.activeTiers.find((p) => p.name.toLowerCase() === userData.tier.toLowerCase()) ?? config.activeTiers[0];
+    const storageUsedGB = userData.storage_used / (1024 * 1024 * 1024);
+    const storageLimitGB = userData.storage_limit > 0 ? userData.storage_limit / (1024 * 1024 * 1024) : 0;
+    const storageUsedPercentage =
+        userData.storage_limit > 0 ? (userData.storage_used / userData.storage_limit) * 100 : 0;
+    const isEmailVerified = !!userData.email_verified_at;
 
     return (
         <div className='flex w-full flex-col bg-background/40 pt-14 sm:pt-20'>
@@ -516,7 +478,6 @@ const DashboardPage = () => {
                 <header className='sm:py-4'>
                     <h1 className='text-2xl font-semibold'>Dashboard</h1>
                 </header>
-
                 {userData.role === 'admin' && (
                     <div className='mb-8 flex flex-col gap-2'>
                         <header>
@@ -525,7 +486,6 @@ const DashboardPage = () => {
                         <AdminPanel />
                     </div>
                 )}
-
                 <div className='flex flex-col gap-4'>
                     <header>
                         <h2 className='text-xl font-semibold'>Account Data</h2>
@@ -547,7 +507,6 @@ const DashboardPage = () => {
                                             <p className='font-semibold text-lg'>{userData.username}</p>
                                         </div>
                                     </div>
-
                                     {userData.email && (
                                         <div className='space-y-1'>
                                             <p className='text-sm font-medium'>Email</p>
@@ -559,7 +518,6 @@ const DashboardPage = () => {
                                             </div>
                                         </div>
                                     )}
-
                                     <div className='space-y-1'>
                                         <p className='text-sm font-medium'>Two-Factor Authentication</p>
                                         <div className='flex items-center gap-2'>
@@ -577,7 +535,6 @@ const DashboardPage = () => {
                                         </div>
                                     </div>
                                 </div>
-
                                 <div className='space-y-3'>
                                     <Label>Connected Accounts</Label>
                                     <p className='text-sm text-muted-foreground'>
@@ -657,7 +614,7 @@ const DashboardPage = () => {
                                                     Secure your account by requiring a second verification step.
                                                 </DialogDescription>
                                             </DialogHeader>
-                                            <TwoFactorSetup onSuccess={handle2FASuccess} />
+                                            <TwoFactorSetup apiUrl={config.apiUrl} onSuccess={handle2FASuccess} />
                                         </DialogContent>
                                     </Dialog>
                                 )}
@@ -676,7 +633,10 @@ const DashboardPage = () => {
                                                     Enter your email to receive a password reset link.
                                                 </DialogDescription>
                                             </DialogHeader>
-                                            <ResetPasswordDialog onFinished={() => setShowResetPasswordDialog(false)} />
+                                            <ResetPasswordDialog
+                                                apiUrl={config.apiUrl}
+                                                onFinished={() => setShowResetPasswordDialog(false)}
+                                            />
                                         </DialogContent>
                                     </Dialog>
                                 )}
@@ -713,61 +673,7 @@ const DashboardPage = () => {
                                 </AlertDialog>
                             </CardFooter>
                         </Card>
-                        {/*
-                        TODO: Rework to actually be useful, this is just bs
-                        <Card className='flex flex-col'>
-                            <CardHeader>
-                                <CardTitle className='flex items-center gap-2'>
-                                    <Clock className='size-5' />
-                                    Recent Activity
-                                </CardTitle>
-                                <CardDescription>Your last known login.</CardDescription>
-                            </CardHeader>
-                            <CardContent className='flex-1 flex flex-col'>
-                                {userData.last_login_at && userData.last_login_ip ? (
-                                    <div className='text-sm text-muted-foreground space-y-2 h-full'>
-                                        <div>
-                                            <p className='font-medium text-foreground'>Last Login Time</p>
-                                            <p>{new Date(userData.last_login_at).toLocaleString()}</p>
-                                        </div>
-                                        <div>
-                                            <p className='font-medium text-foreground'>IP Address</p>
-                                            <p>{userData.last_login_ip}</p>
-                                        </div>
-                                        <p className='mt-auto text-xs text-muted-foreground'>
-                                            If you don&apos;t recognize this activity, please reset your password.
-                                        </p>
-                                    </div>
-                                ) : (
-                                    <p className='text-sm text-muted-foreground'>No recent login activity to show.</p>
-                                )}
-                            </CardContent>
-                            <CardFooter className='mt-auto flex flex-wrap gap-2 border-t pt-6'>
-                                <AlertDialog>
-                                    <AlertDialogTrigger asChild>
-                                        <Button variant='outline' className='cursor-pointer'>
-                                            <LogOutIcon className='mr-2 size-4' />
-                                            Sign Out Other Devices
-                                        </Button>
-                                    </AlertDialogTrigger>
-                                    <AlertDialogContent>
-                                        <AlertDialogHeader>
-                                            <AlertDialogTitle>Sign out everywhere else?</AlertDialogTitle>
-                                            <AlertDialogDescription>
-                                                This will sign you out of all other active sessions on other browsers
-                                                and devices. Your current session will remain active.
-                                            </AlertDialogDescription>
-                                        </AlertDialogHeader>
-                                        <AlertDialogFooter>
-                                            <AlertDialogCancel>Cancel</AlertDialogCancel>
-                                            <Button onClick={handleLogoutOtherDevices}>Continue</Button>
-                                        </AlertDialogFooter>
-                                    </AlertDialogContent>
-                                </AlertDialog>
-                            </CardFooter>
-                        </Card> */}
                     </div>
-
                     <div className='flex flex-col gap-4'>
                         <div className='grid grid-cols-5 gap-6 w-full'>
                             <Card className='col-span-4 w-full'>
@@ -802,7 +708,6 @@ const DashboardPage = () => {
                                 </CardContent>
                             </Card>
                         </div>
-
                         <Card>
                             <CardHeader>
                                 <CardTitle>Your Clips</CardTitle>
@@ -814,18 +719,22 @@ const DashboardPage = () => {
                                         <div className='h-8 w-8 animate-spin rounded-full border-4 border-solid border-primary border-t-transparent' />
                                     </div>
                                 ) : (
-                                    <ClipsTable clips={clips} onDelete={handleDeleteClip} onCopy={handleCopyUrl} />
+                                    <ClipsTable
+                                        clips={clips}
+                                        apiUrl={config.apiUrl}
+                                        onDelete={handleDeleteClip}
+                                        onCopy={handleCopyUrl}
+                                    />
                                 )}
                             </CardContent>
                         </Card>
                     </div>
                 </div>
-
                 <div className='flex flex-col gap-4 mb-8 mt-4'>
                     <header>
                         <h2 className='text-xl font-semibold'>Billing & Subscriptions</h2>
                     </header>
-                    {userData.tier !== 'free' ? (
+                    {userData.tier.toLowerCase() !== 'free' ? (
                         <Card>
                             <CardHeader>
                                 <CardTitle>Your Subscription</CardTitle>
@@ -862,13 +771,13 @@ const DashboardPage = () => {
                         </header>
                     )}
                     <div className='grid gap-4 sm:grid-cols-2 lg:grid-cols-4 mb-16'>
-                        {paymentData?.active_tiers.map((plan) => (
+                        {config.activeTiers.map((plan) => (
                             <Card
                                 key={plan.name}
                                 className={cn(
                                     'flex flex-col',
                                     plan.is_popular && 'border-primary',
-                                    plan.name === userData.tier && 'ring-2 ring-primary',
+                                    plan.name.toLowerCase() === userData.tier.toLowerCase() && 'ring-2 ring-primary',
                                 )}
                             >
                                 <CardHeader>
@@ -893,27 +802,31 @@ const DashboardPage = () => {
                                     </ul>
                                 </CardContent>
                                 <CardFooter>
-                                    {userData.tier === 'free' ? (
+                                    {userData.tier.toLowerCase() === 'free' ? (
                                         <Button
                                             className='w-full cursor-pointer'
                                             disabled={
-                                                plan.name === userData.tier || isUpgrading || plan.name === 'free'
+                                                plan.name.toLowerCase() === userData.tier.toLowerCase() ||
+                                                isUpgrading ||
+                                                plan.name.toLowerCase() === 'free'
                                             }
-                                            onClick={() => handleUpgrade(plan.name)}
+                                            onClick={() => handleUpgrade(plan.stripe_price_id)}
                                         >
-                                            {plan.name === userData.tier
+                                            {plan.name.toLowerCase() === userData.tier.toLowerCase()
                                                 ? 'Current Plan'
                                                 : isUpgrading
                                                   ? 'Processing...'
-                                                  : 'Manage plan'}
+                                                  : 'Upgrade Plan'}
                                         </Button>
                                     ) : (
                                         <Button
                                             className='w-full cursor-pointer'
-                                            disabled={plan.name === userData.tier}
+                                            disabled={plan.name.toLowerCase() === userData.tier.toLowerCase()}
                                             onClick={handleManageSubscription}
                                         >
-                                            {plan.name === userData.tier ? 'Current Plan' : 'Manage Plan'}
+                                            {plan.name.toLowerCase() === userData.tier.toLowerCase()
+                                                ? 'Current Plan'
+                                                : 'Manage Plan'}
                                         </Button>
                                     )}
                                 </CardFooter>
diff --git a/app/layout.tsx b/app/layout.tsx
index 6128e8d..58401ac 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,107 +1,52 @@
 import { ThemeProvider } from '@/components/theme-provider';
 import { Metadata } from 'next';
-import { AppInfo, getAppInfo } from '@/lib/utils';
 import { AuthProvider } from '@/contexts/authContext';
+import { ConfigProvider } from '@/contexts/configContext';
 import { Toaster } from 'sonner';
-import Link from 'next/link';
 import { Inter } from 'next/font/google';
-import './globals.css';
 import { Navbar } from '@/components/nav';
+import { Footer } from '@/components/footer';
+import { getServerConfig } from '@/lib/config';
+import './globals.css';
 
 const inter = Inter({
     subsets: ['latin'],
 });
 
-export async function generateMetadata(): Promise<Metadata> {
-    let appInfo: AppInfo;
-    try {
-        appInfo = getAppInfo();
-
-        return {
-            title: appInfo.app_name,
-            description: `Welcome to ${appInfo.app_name}`,
-            openGraph: {
-                title: appInfo.app_name,
-            },
-            twitter: {
-                card: 'summary_large_image',
-                title: appInfo.app_name,
-                description: `Welcome to ${appInfo.app_name}`,
-            },
-        };
-    } catch (e) {
-        console.error('Failed to fetch app info for metadata', e);
-        throw new Error('Failed to get .env');
-    }
+export function generateMetadata(): Metadata {
+    const config = getServerConfig();
+    const appName = config?.appName || 'Wayclip';
+    const description = process.env.NEXT_PUBLIC_APP_DESC || `Welcome to ${appName}`;
+
+    return {
+        title: appName,
+        description,
+        openGraph: { title: appName, description },
+        twitter: { card: 'summary_large_image', title: appName, description },
+    };
 }
-export type LinkItem = {
-    text: string;
-    href: string;
-    external?: boolean;
-};
 
-export type LinkCategories = {
-    [key: string]: LinkItem[];
-};
-
-export default async function RootLayout({
+export default function RootLayout({
     children,
 }: Readonly<{
     children: React.ReactNode;
 }>) {
-    const appInfo = getAppInfo();
-    const app_desc = process.env.NEXT_PUBLIC_APP_DESC;
-
-    const footerLinks: LinkCategories = JSON.parse(process.env.NEXT_PUBLIC_FOOTER_LINKS || '{}');
+    const config = getServerConfig();
+    const appDesc = process.env.NEXT_PUBLIC_APP_DESC || '';
 
     return (
         <html lang='en' className={inter.className} suppressHydrationWarning>
-            <body className='flex flex-col min-h-screen'>
-                <AuthProvider>
-                    <ThemeProvider attribute='class' defaultTheme='system' enableSystem disableTransitionOnChange>
-                        <Navbar />
-                        <main className='flex-1 w-full'>{children}</main>
-
-                        <footer className='border-t py-12 px-4'>
-                            <div className='container mx-auto max-w-6xl'>
-                                <div className='grid grid-cols-1 md:grid-cols-4 gap-8 mb-8'>
-                                    <div className='md:col-span-2'>
-                                        <div className='flex items-center space-x-2 mb-4'>
-                                            <span className='font-bold text-xl'>{appInfo.app_name}</span>
-                                        </div>
-                                        <p className='text-muted-foreground mb-4 max-w-md'>{app_desc}</p>
-                                    </div>
-                                    {Object.entries(footerLinks).map(([category, links]) => (
-                                        <div key={category}>
-                                            <h4 className='font-semibold mb-4'>{category}</h4>
-                                            <ul className='space-y-2 text-sm text-muted-foreground'>
-                                                {links.map((link) => (
-                                                    <li key={link.text}>
-                                                        <Link
-                                                            href={link.href}
-                                                            target={link.external ? '_blank' : undefined}
-                                                            rel={link.external ? 'noopener noreferrer' : undefined}
-                                                            className='hover:text-foreground transition-colors'
-                                                        >
-                                                            {link.text}
-                                                        </Link>
-                                                    </li>
-                                                ))}
-                                            </ul>
-                                        </div>
-                                    ))}
-                                </div>
-                                <div className='border-t pt-8 text-center'>
-                                    <p className='text-sm text-muted-foreground'>
-                                        &copy; {new Date().getFullYear()} {appInfo.app_name}. Open source software
-                                        licensed under MIT.
-                                    </p>
-                                </div>
-                            </div>
-                        </footer>
-                        <Toaster richColors theme='system' />
-                    </ThemeProvider>
-                </AuthProvider>
+            <body>
+                <ConfigProvider>
+                    <AuthProvider>
+                        <ThemeProvider attribute='class' defaultTheme='system' enableSystem disableTransitionOnChange>
+                            <Navbar appName={config?.appName} navbarLinks={config?.navbarLinks} />
+                            <main className='flex-1 w-full'>{children}</main>
+                            <Footer appName={config?.appName} appDesc={appDesc} footerLinks={config?.footerLinks} />
+                            <Toaster richColors theme='system' />
+                        </ThemeProvider>
+                    </AuthProvider>
+                </ConfigProvider>
             </body>
         </html>
     );
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 9eb8aa7..ca372f8 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -10,10 +10,10 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useAuth } from '@/contexts/authContext';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useConfig } from '@/contexts/configContext';
+import { useRouter } from 'next/navigation';
 import axios, { isAxiosError } from 'axios';
 import { toast } from 'sonner';
-import { getAuthInfo, AuthInfo } from '@/lib/utils';
 
 const LoadingScreen = () => (
     <div className='flex h-screen w-full items-center justify-center bg-background/40'>
@@ -22,15 +22,9 @@ const LoadingScreen = () => (
 );
 
 const LoginClientComponent = () => {
-    const api_url = process.env.NEXT_PUBLIC_API_URL;
-    const { isAuthenticated, isLoading, refreshUser } = useAuth();
+    const { config, isLoading: isConfigLoading } = useConfig();
+    const { isAuthenticated, isLoading: isAuthLoading, refreshUser } = useAuth();
     const router = useRouter();
-    const searchParams = useSearchParams();
-
-    // State for auth provider settings
-    const [authInfo, setAuthInfo] = useState<AuthInfo | null>(null);
-    const [isAuthInfoLoading, setIsAuthInfoLoading] = useState(true);
-
     const [activeTab, setActiveTab] = useState('login');
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
@@ -46,101 +40,65 @@ const LoginClientComponent = () => {
     const [is2FASubmitting, setIs2FASubmitting] = useState(false);
 
     useEffect(() => {
-        const fetchAuthInfo = async () => {
-            try {
-                const info = getAuthInfo();
-                setAuthInfo(info);
-            } catch (error) {
-                console.error('Failed to fetch auth info:', error);
-                toast.error('Could not load login options. Please refresh the page.');
-                setAuthInfo({
-                    discord_auth_enabled: false,
-                    github_auth_enabled: false,
-                    google_auth_enabled: false,
-                    email_auth_enabled: false,
-                });
-            } finally {
-                setIsAuthInfoLoading(false);
-            }
-        };
-        fetchAuthInfo();
-    }, []);
-
-    useEffect(() => {
-        if (!isLoading && isAuthenticated) {
+        if (!isAuthLoading && isAuthenticated) {
             router.replace('/dash');
         }
-    }, [isLoading, isAuthenticated, router]);
+    }, [isAuthLoading, isAuthenticated, router]);
 
     useEffect(() => {
-        const verified = searchParams.get('verified');
-        if (verified === 'true') {
+        const params = new URLSearchParams(window.location.search);
+        if (params.get('verified') === 'true') {
             toast.success('Email verified successfully! You can now log in.');
             router.replace('/login');
         }
-        const reset = searchParams.get('reset_success');
-        if (reset === 'true') {
+        if (params.get('reset_success') === 'true') {
             toast.success('Password has been reset successfully. Please log in.');
             router.replace('/login');
         }
-        const error = searchParams.get('error');
+        const error = params.get('error');
         if (error) {
-            toast.error(error);
+            toast.error(decodeURIComponent(error));
             router.replace('/login');
         }
-
-        const is2FARequired = searchParams.get('2fa_required');
-        const token = searchParams.get('token');
-        if (is2FARequired === 'true' && token) {
-            setTwoFAToken(token);
+        if (params.get('2fa_required') === 'true' && params.get('token')) {
+            setTwoFAToken(params.get('token')!);
             setShow2FA(true);
             toast.info('Please enter your 2FA code to complete login.');
             router.replace('/login');
         }
-    }, [searchParams, router]);
+    }, [router]);
 
     const handleOAuthLogin = (provider: 'github' | 'google' | 'discord') => {
-        if (!api_url) {
+        if (!config?.apiUrl) {
             toast.error('Configuration error: The API URL is not set.');
             return;
         }
-        const finalRedirectUri = window.location.origin + '/dash';
-        const loginUrl = `${api_url}/auth/${provider}?redirect_uri=${encodeURIComponent(finalRedirectUri)}`;
-        window.location.href = loginUrl;
+        const finalRedirectUri = `${window.location.origin}/dash`;
+        window.location.href = `${config.apiUrl}/auth/${provider}?redirect_uri=${encodeURIComponent(finalRedirectUri)}`;
     };
 
     const handleErrorToast = (error: unknown, defaultMessage: string) => {
+        let message = defaultMessage;
         if (isAxiosError(error) && error.response?.data) {
-            const serverMessage = error.response.data;
+            const serverMessage = error.response.data.message || error.response.data;
             if (typeof serverMessage === 'string' && serverMessage.length > 0) {
-                toast.error(serverMessage);
-            } else if (
-                serverMessage.message &&
-                typeof serverMessage.message === 'string' &&
-                serverMessage.message.length > 0
-            ) {
-                toast.error(serverMessage.message);
-            } else {
-                toast.error(defaultMessage);
+                message = serverMessage;
             }
-        } else {
-            toast.error(defaultMessage);
         }
+        toast.error(message);
     };
 
     const handlePasswordLogin = async (e: FormEvent) => {
         e.preventDefault();
+        if (!config?.apiUrl) return;
         setIsSubmitting(true);
         try {
             const response = await axios.post(
-                `${api_url}/auth/login`,
+                `${config.apiUrl}/auth/login`,
                 { email, password },
-                {
-                    withCredentials: true,
-                },
+                { withCredentials: true },
             );
-
-            if (response.status === 200 && response.data.success) {
+            if (response.data.success) {
                 await refreshUser();
                 router.push('/dash');
             } else if (response.data['2fa_required']) {
@@ -151,16 +109,12 @@ const LoginClientComponent = () => {
         } catch (error) {
             if (isAxiosError(error) && error.response?.data?.error_code === 'EMAIL_NOT_VERIFIED') {
                 toast.error(error.response.data.message, {
-                    action: {
-                        label: 'Resend Email',
-                        onClick: () => handleResendVerification(email),
-                    },
+                    action: { label: 'Resend Email', onClick: () => handleResendVerification(email) },
                     duration: 10000,
                 });
             } else {
                 handleErrorToast(error, 'Login failed. Please check your credentials.');
             }
-            console.error('Password login failed:', error);
         } finally {
             setIsSubmitting(false);
         }
@@ -168,26 +122,20 @@ const LoginClientComponent = () => {
 
     const handle2FALogin = async (e: FormEvent) => {
         e.preventDefault();
+        if (!config?.apiUrl) return;
         setIs2FASubmitting(true);
         try {
             const response = await axios.post(
-                `${api_url}/auth/2fa/authenticate`,
-                {
-                    '2fa_token': twoFAToken,
-                    code: twoFACode,
-                },
-                {
-                    withCredentials: true,
-                },
+                `${config.apiUrl}/auth/2fa/authenticate`,
+                { '2fa_token': twoFAToken, code: twoFACode },
+                { withCredentials: true },
             );
-
             if (response.data.success) {
                 await refreshUser();
                 router.push('/dash');
             }
         } catch (error) {
             handleErrorToast(error, 'Invalid 2FA code. Please try again.');
-            console.error('2FA login failed:', error);
         } finally {
             setIs2FASubmitting(false);
         }
@@ -195,25 +143,22 @@ const LoginClientComponent = () => {
 
     const handleRegister = async (e: FormEvent) => {
         e.preventDefault();
-
         if (registerPassword !== registerConfirmPassword) {
             toast.error('Passwords do not match.');
             return;
         }
-
         if (registerPassword.length < 8) {
             toast.error('Password must be at least 8 characters long.');
             return;
         }
-
+        if (!config?.apiUrl) return;
         setIsRegistering(true);
         try {
-            const response = await axios.post(`${api_url}/auth/register`, {
+            const response = await axios.post(`${config.apiUrl}/auth/register`, {
                 username: registerUsername,
                 email: registerEmail,
                 password: registerPassword,
             });
-
             toast.success(
                 response.data.message || 'Registration successful! Please check your email to verify your account.',
             );
@@ -224,7 +169,6 @@ const LoginClientComponent = () => {
             setRegisterConfirmPassword('');
         } catch (error) {
             handleErrorToast(error, 'Registration failed. Please try again.');
-            console.error('Registration failed:', error);
         } finally {
             setIsRegistering(false);
         }
@@ -235,21 +179,16 @@ const LoginClientComponent = () => {
             toast.error('Please enter your email address in the login form first.');
             return;
         }
+        if (!config?.apiUrl) return;
         try {
-            const response = await axios.post(`${api_url}/auth/resend-verification`, { email });
+            const response = await axios.post(`${config.apiUrl}/auth/resend-verification`, { email });
             toast.success(response.data.message);
         } catch (error) {
             handleErrorToast(error, 'Failed to send verification email.');
-            console.error(error);
         }
     };
 
-    const handleForgotPassword = (e: FormEvent) => {
-        e.preventDefault();
-        router.push('/reset-password');
-    };
-
-    if (isLoading || isAuthenticated || isAuthInfoLoading) {
+    if (isAuthLoading || isConfigLoading || isAuthenticated) {
         return <LoadingScreen />;
     }
 
@@ -311,15 +250,14 @@ const LoginClientComponent = () => {
         );
     }
 
-    const anyOAuthEnabled =
-        authInfo?.github_auth_enabled || authInfo?.google_auth_enabled || authInfo?.discord_auth_enabled;
-    const showSeparator = anyOAuthEnabled && authInfo?.email_auth_enabled;
+    const anyOAuthEnabled = config?.githubAuthEnabled || config?.googleAuthEnabled || config?.discordAuthEnabled;
+    const showSeparator = anyOAuthEnabled && config?.emailAuthEnabled;
 
     return (
         <div className='flex items-center justify-center min-h-screen bg-background/40'>
             <Card className='w-full max-w-md'>
                 <CardHeader className='text-center'>
-                    <CardTitle className='text-2xl'>Welcome to Wayclip</CardTitle>
+                    <CardTitle className='text-2xl'>Welcome to {config?.appName || 'Wayclip'}</CardTitle>
                     <CardDescription>Sign in to your account or create a new one.</CardDescription>
                 </CardHeader>
                 <CardContent>
@@ -328,39 +266,37 @@ const LoginClientComponent = () => {
                             <TabsTrigger value='login'>Login</TabsTrigger>
                             <TabsTrigger value='register'>Register</TabsTrigger>
                         </TabsList>
-
                         <TabsContent value='login' className='space-y-4 mt-4'>
                             <div className='grid gap-4'>
-                                {authInfo?.github_auth_enabled && (
+                                {config?.githubAuthEnabled && (
                                     <Button
                                         onClick={() => handleOAuthLogin('github')}
                                         className='w-full'
-                                        disabled={isLoading}
+                                        disabled={isAuthLoading}
                                     >
                                         <BsGithub className='mr-2 h-4 w-4' /> Continue with GitHub
                                     </Button>
                                 )}
-                                {authInfo?.google_auth_enabled && (
+                                {config?.googleAuthEnabled && (
                                     <Button
                                         onClick={() => handleOAuthLogin('google')}
                                         className='w-full'
-                                        disabled={isLoading}
+                                        disabled={isAuthLoading}
                                         variant='outline'
                                     >
                                         <BsGoogle className='mr-2 h-4 w-4' /> Continue with Google
                                     </Button>
                                 )}
-                                {authInfo?.discord_auth_enabled && (
+                                {config?.discordAuthEnabled && (
                                     <Button
                                         onClick={() => handleOAuthLogin('discord')}
-                                        disabled={isLoading}
+                                        disabled={isAuthLoading}
                                         style={{ backgroundColor: '#5865F2', color: 'white' }}
                                         className='hover:bg-blue-600 w-full'
                                     >
                                         <BsDiscord className='mr-2 h-4 w-4' /> Continue with Discord
                                     </Button>
                                 )}
-
                                 {showSeparator && (
                                     <div className='relative'>
                                         <div className='absolute inset-0 flex items-center'>
@@ -371,8 +307,7 @@ const LoginClientComponent = () => {
                                         </div>
                                     </div>
                                 )}
-
-                                {authInfo?.email_auth_enabled && (
+                                {config?.emailAuthEnabled && (
                                     <form onSubmit={handlePasswordLogin} className='grid gap-4'>
                                         <div className='grid gap-2'>
                                             <Label htmlFor='email'>Email</Label>
@@ -392,7 +327,7 @@ const LoginClientComponent = () => {
                                                     type='button'
                                                     variant='link'
                                                     className='ml-auto h-auto p-0 text-sm'
-                                                    onClick={handleForgotPassword}
+                                                    onClick={() => router.push('/reset-password')}
                                                 >
                                                     Forgot password?
                                                 </Button>
@@ -412,39 +347,37 @@ const LoginClientComponent = () => {
                                 )}
                             </div>
                         </TabsContent>
-
                         <TabsContent value='register' className='space-y-4 mt-4'>
                             <div className='grid gap-4'>
-                                {authInfo?.github_auth_enabled && (
+                                {config?.githubAuthEnabled && (
                                     <Button
                                         onClick={() => handleOAuthLogin('github')}
                                         className='w-full'
-                                        disabled={isLoading}
+                                        disabled={isAuthLoading}
                                     >
                                         <BsGithub className='mr-2 h-4 w-4' /> Continue with GitHub
                                     </Button>
                                 )}
-                                {authInfo?.google_auth_enabled && (
+                                {config?.googleAuthEnabled && (
                                     <Button
                                         onClick={() => handleOAuthLogin('google')}
                                         className='w-full'
-                                        disabled={isLoading}
+                                        disabled={isAuthLoading}
                                         variant='outline'
                                     >
                                         <BsGoogle className='mr-2 h-4 w-4' /> Continue with Google
                                     </Button>
                                 )}
-                                {authInfo?.discord_auth_enabled && (
+                                {config?.discordAuthEnabled && (
                                     <Button
                                         onClick={() => handleOAuthLogin('discord')}
-                                        disabled={isLoading}
+                                        disabled={isAuthLoading}
                                         style={{ backgroundColor: '#5865F2', color: 'white' }}
                                         className='hover:bg-blue-600 w-full'
                                     >
                                         <BsDiscord className='mr-2 h-4 w-4' /> Continue with Discord
                                     </Button>
                                 )}
-
                                 {showSeparator && (
                                     <div className='relative'>
                                         <div className='absolute inset-0 flex items-center'>
@@ -455,8 +388,7 @@ const LoginClientComponent = () => {
                                         </div>
                                     </div>
                                 )}
-
-                                {authInfo?.email_auth_enabled && (
+                                {config?.emailAuthEnabled && (
                                     <form onSubmit={handleRegister} className='grid gap-4'>
                                         <div className='grid gap-2'>
                                             <Label htmlFor='register-username'>Username</Label>
@@ -517,12 +449,10 @@ const LoginClientComponent = () => {
     );
 };
 
-const LoginPage = () => {
-    return (
-        <Suspense fallback={<LoadingScreen />}>
-            <LoginClientComponent />
-        </Suspense>
-    );
-};
+const LoginPage = () => (
+    <Suspense fallback={<LoadingScreen />}>
+        <LoginClientComponent />
+    </Suspense>
+);
 
 export default LoginPage;
diff --git a/app/reset-password/page.tsx b/app/reset-password/page.tsx
index cd46da4..3af813f 100644
--- a/app/reset-password/page.tsx
+++ b/app/reset-password/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Suspense, useState, FormEvent, useEffect } from 'react';
+import { Suspense, useState, FormEvent } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
@@ -10,7 +10,7 @@ import { toast } from 'sonner';
 import axios, { isAxiosError } from 'axios';
 import { Loader2 } from 'lucide-react';
 import Link from 'next/link';
-import { getAuthInfo, AuthInfo } from '@/lib/utils';
+import { useConfig } from '@/contexts/configContext';
 
 const InfoCard = ({
     title,
@@ -37,47 +37,21 @@ const InfoCard = ({
 );
 
 const ResetPasswordClientComponent = () => {
-    const api_url = process.env.NEXT_PUBLIC_API_URL;
+    const { config, isLoading: isConfigLoading } = useConfig();
     const router = useRouter();
     const searchParams = useSearchParams();
     const token = searchParams.get('token');
-
-    const [authInfo, setAuthInfo] = useState<AuthInfo | null>(null);
-    const [isLoading, setIsLoading] = useState(true);
     const [password, setPassword] = useState('');
     const [confirmPassword, setConfirmPassword] = useState('');
     const [isSubmitting, setIsSubmitting] = useState(false);
 
-    useEffect(() => {
-        const fetchAuthSettings = async () => {
-            try {
-                const info = getAuthInfo();
-                setAuthInfo(info);
-            } catch (error) {
-                console.error('Failed to fetch auth settings:', error);
-                toast.error('Could not load page settings. Please try again later.');
-                setAuthInfo(null);
-            } finally {
-                setIsLoading(false);
-            }
-        };
-
-        fetchAuthSettings();
-    }, []);
-
     const handleErrorToast = (error: unknown, defaultMessage: string) => {
+        let message = defaultMessage;
         if (isAxiosError(error) && error.response?.data) {
-            const serverMessage = error.response.data;
-            if (typeof serverMessage === 'string' && serverMessage.length > 0) {
-                toast.error(serverMessage);
-            } else if (serverMessage.message && typeof serverMessage.message === 'string') {
-                toast.error(serverMessage.message);
-            } else {
-                toast.error(defaultMessage);
-            }
-        } else {
-            toast.error(defaultMessage);
+            const serverMessage = error.response.data.message || error.response.data;
+            if (typeof serverMessage === 'string' && serverMessage.length > 0) message = serverMessage;
         }
+        toast.error(message);
     };
 
     const handleSubmit = async (e: FormEvent) => {
@@ -90,32 +64,28 @@ const ResetPasswordClientComponent = () => {
             toast.error('Passwords do not match.');
             return;
         }
-        if (!token) {
-            toast.error('Missing password reset token.');
+        if (!token || !config?.apiUrl) {
+            toast.error('Invalid request. Please try again.');
             return;
         }
 
         setIsSubmitting(true);
         try {
-            const response = await axios.post(`${api_url}/auth/reset-password`, {
-                token,
-                password,
-            });
+            const response = await axios.post(`${config.apiUrl}/auth/reset-password`, { token, password });
             toast.success(response.data.message || 'Your password has been reset successfully.');
             router.push('/login?reset_success=true');
         } catch (err) {
             handleErrorToast(err, 'Failed to reset password. The link may have expired.');
-            console.error('Password reset failed:', err);
         } finally {
             setIsSubmitting(false);
         }
     };
 
-    if (isLoading) {
-        return null;
+    if (isConfigLoading) {
+        return <Loader2 className='h-12 w-12 animate-spin text-primary' />;
     }
 
-    if (!authInfo || !authInfo.email_auth_enabled) {
+    if (!config || !config.emailAuthEnabled) {
         return (
             <InfoCard
                 title='Feature Disabled'
@@ -177,14 +147,12 @@ const ResetPasswordClientComponent = () => {
     );
 };
 
-const ResetPasswordPage = () => {
-    return (
-        <div className='flex min-h-screen w-full items-center justify-center bg-muted/40'>
-            <Suspense fallback={<Loader2 className='h-12 w-12 animate-spin text-primary' />}>
-                <ResetPasswordClientComponent />
-            </Suspense>
-        </div>
-    );
-};
+const ResetPasswordPage = () => (
+    <div className='flex min-h-screen w-full items-center justify-center bg-muted/40'>
+        <Suspense fallback={<Loader2 className='h-12 w-12 animate-spin text-primary' />}>
+            <ResetPasswordClientComponent />
+        </Suspense>
+    </div>
+);
 
 export default ResetPasswordPage;
diff --git a/bun.lock b/bun.lock
index 71d561f..b447a15 100644
--- a/bun.lock
+++ b/bun.lock
@@ -30,6 +30,7 @@
         "react-dom": "19.1.0",
         "sonner": "^2.0.7",
         "stripe": "^18.5.0",
+        "swr": "^2.3.6",
         "tailwind-merge": "^3.3.1",
       },
       "devDependencies": {
@@ -473,6 +474,8 @@
 
     "delayed-stream": ["delayed-stream@1.0.0", "", {}, "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="],
 
+    "dequal": ["dequal@2.0.3", "", {}, "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="],
+
     "detect-libc": ["detect-libc@2.0.4", "", {}, "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA=="],
 
     "detect-node-es": ["detect-node-es@1.1.0", "", {}, "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="],
@@ -911,6 +914,8 @@
 
     "supports-preserve-symlinks-flag": ["supports-preserve-symlinks-flag@1.0.0", "", {}, "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="],
 
+    "swr": ["swr@2.3.6", "", { "dependencies": { "dequal": "^2.0.3", "use-sync-external-store": "^1.4.0" }, "peerDependencies": { "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-wfHRmHWk/isGNMwlLGlZX5Gzz/uTgo0o2IRuTMcf4CPuPFJZlq0rDaKUx+ozB5nBOReNV1kiOyzMfj+MBMikLw=="],
+
     "tabbable": ["tabbable@6.2.0", "", {}, "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="],
 
     "tailwind-merge": ["tailwind-merge@3.3.1", "", {}, "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g=="],
diff --git a/components/detailView.tsx b/components/detailView.tsx
index deb7951..eedf971 100644
--- a/components/detailView.tsx
+++ b/components/detailView.tsx
@@ -21,7 +21,8 @@ import { Badge } from '@/components/ui/badge';
 import { Label } from '@/components/ui/label';
 import { Loader2, Ban, Trash2, Video, ExternalLink, Copy } from 'lucide-react';
 import { useAuth } from '@/contexts/authContext';
-import { getPaymentInfo, ParsedPaymentInfo } from '@/lib/utils';
+import { useConfig } from '@/contexts/configContext';
+import { formatBytes } from '@/lib/utils';
 
 type UserRole = 'user' | 'admin';
 
@@ -41,7 +42,6 @@ interface FullUserDetails {
     currentPeriodEnd: string | null;
     connectedProviders: string[];
 }
-
 interface UserClip {
     id: string;
     file_name: string;
@@ -56,38 +56,29 @@ const DetailItem = ({ label, value }: { label: string; value: React.ReactNode })
     </div>
 );
 
-const formatBytes = (bytes: number, decimals = 2) => {
-    if (!+bytes) return '0 Bytes';
-    const k = 1024;
-    const dm = decimals < 0 ? 0 : decimals;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
-};
-
 export const UserDetailView = ({ userId, onDataChange }: { userId: string; onDataChange: () => void }) => {
-    const api_url = process.env.NEXT_PUBLIC_API_URL;
+    const { config } = useConfig();
     const { user: adminUser } = useAuth();
     const [details, setDetails] = useState<FullUserDetails | null>(null);
     const [isLoading, setIsLoading] = useState(true);
     const [userClips, setUserClips] = useState<UserClip[] | null>(null);
     const [clipsLoading, setClipsLoading] = useState(false);
-    const [paymentInfo, setPaymentInfo] = useState<ParsedPaymentInfo | null>(null);
 
     const fetchDetails = useCallback(async () => {
+        if (!config?.apiUrl) return;
+        setIsLoading(true);
         try {
-            const response = await axios.get<FullUserDetails>(`${api_url}/admin/users/${userId}`, {
+            const response = await axios.get<FullUserDetails>(`${config.apiUrl}/admin/users/${userId}`, {
                 withCredentials: true,
             });
-            const paymentReponse = getPaymentInfo();
             setDetails(response.data);
-            setPaymentInfo(paymentReponse);
         } catch (error) {
-            toast.error(`Failed to fetch user details, ${error}`);
+            console.error(error);
+            toast.error(`Failed to fetch user details.`);
         } finally {
             setIsLoading(false);
         }
-    }, [userId, api_url]);
+    }, [userId, config?.apiUrl]);
 
     useEffect(() => {
         fetchDetails();
@@ -111,61 +102,70 @@ export const UserDetailView = ({ userId, onDataChange }: { userId: string; onDat
             toast.error('You cannot change your own role.');
             return;
         }
+        if (!config?.apiUrl) return;
         handleAction(
-            () => axios.post(`${api_url}/admin/users/${userId}/role`, { role: role }, { withCredentials: true }),
+            () => axios.post(`${config.apiUrl}/admin/users/${userId}/role`, { role }, { withCredentials: true }),
             'User role updated.',
         );
     };
 
     const handleUpdateTier = (tier: string) => {
+        if (!config?.apiUrl) return;
         handleAction(
-            () => axios.post(`${api_url}/admin/users/${userId}/tier`, { tier }, { withCredentials: true }),
+            () => axios.post(`${config.apiUrl}/admin/users/${userId}/tier`, { tier }, { withCredentials: true }),
             'User tier manually updated.',
         );
     };
 
     const handleUnban = () => {
+        if (!config?.apiUrl) return;
         handleAction(
-            () => axios.post(`${api_url}/admin/users/${userId}/unban`, {}, { withCredentials: true }),
+            () => axios.post(`${config.apiUrl}/admin/users/${userId}/unban`, {}, { withCredentials: true }),
             'User has been unbanned.',
         );
     };
 
     const handleBanUser = () => {
+        if (!config?.apiUrl) return;
         handleAction(
-            () => axios.post(`${api_url}/admin/users/${userId}/ban`, {}, { withCredentials: true }),
+            () => axios.post(`${config.apiUrl}/admin/users/${userId}/ban`, {}, { withCredentials: true }),
             'User has been banned.',
         );
     };
 
     const handleDeleteUser = () => {
+        if (!config?.apiUrl) return;
         handleAction(
-            () => axios.delete(`${api_url}/admin/users/${userId}`, { withCredentials: true }),
+            () => axios.delete(`${config.apiUrl}/admin/users/${userId}`, { withCredentials: true }),
             'User has been permanently deleted.',
         );
     };
 
     const fetchUserClips = async () => {
+        if (!config?.apiUrl) return;
         setClipsLoading(true);
         try {
-            const response = await axios.get<UserClip[]>(`${api_url}/admin/users/${userId}/clips`, {
+            const response = await axios.get<UserClip[]>(`${config.apiUrl}/admin/users/${userId}/clips`, {
                 withCredentials: true,
             });
             setUserClips(response.data);
         } catch (error) {
-            toast.error(`Failed to fetch user clips, ${error}`);
+            console.error(error);
+            toast.error(`Failed to fetch user clips.`);
         } finally {
             setClipsLoading(false);
         }
     };
 
     const handleDeleteClip = async (clipId: string) => {
+        if (!config?.apiUrl) return;
         try {
-            await axios.delete(`${api_url}/admin/clips/${clipId}`, { withCredentials: true });
+            await axios.delete(`${config.apiUrl}/admin/clips/${clipId}`, { withCredentials: true });
             toast.success('Clip deleted successfully.');
             await fetchUserClips();
         } catch (error) {
-            toast.error(`Failed to delete clip, ${error}`);
+            console.error(error);
+            toast.error(`Failed to delete clip.`);
         }
     };
 
@@ -175,7 +175,7 @@ export const UserDetailView = ({ userId, onDataChange }: { userId: string; onDat
                 <Loader2 className='animate-spin' />
             </div>
         );
-    if (!details) return <p className='p-6 text-destructive'>Could not load user details.</p>;
+    if (!details || !config) return <p className='p-6 text-destructive'>Could not load user details.</p>;
 
     return (
         <div className='p-4 bg-muted space-y-6'>
@@ -267,7 +267,7 @@ export const UserDetailView = ({ userId, onDataChange }: { userId: string; onDat
                             <SelectValue placeholder='Select tier' />
                         </SelectTrigger>
                         <SelectContent>
-                            {paymentInfo?.active_tiers.map((v, i) => (
+                            {config.activeTiers.map((v, i) => (
                                 <SelectItem value={v.name.toLowerCase()} key={i}>
                                     {v.name}
                                 </SelectItem>
@@ -275,12 +275,10 @@ export const UserDetailView = ({ userId, onDataChange }: { userId: string; onDat
                         </SelectContent>
                     </Select>
                 </div>
-
                 <Button variant='outline' className='self-end' onClick={fetchUserClips}>
                     <Video className='mr-2 h-4 w-4' />
                     {userClips ? 'Refresh Clips' : 'View User Clips'}
                 </Button>
-
                 {details.isBanned ? (
                     <AlertDialog>
                         <AlertDialogTrigger asChild>
@@ -322,7 +320,6 @@ export const UserDetailView = ({ userId, onDataChange }: { userId: string; onDat
                         </AlertDialogContent>
                     </AlertDialog>
                 )}
-
                 <AlertDialog>
                     <AlertDialogTrigger asChild>
                         <Button variant='destructive' className='self-end' disabled={adminUser?.id === userId}>
@@ -349,7 +346,6 @@ export const UserDetailView = ({ userId, onDataChange }: { userId: string; onDat
                     </AlertDialogContent>
                 </AlertDialog>
             </div>
-
             {clipsLoading && (
                 <div className='flex justify-center items-center p-6'>
                     <Loader2 className='animate-spin' />
@@ -375,7 +371,7 @@ export const UserDetailView = ({ userId, onDataChange }: { userId: string; onDat
                                     <TableRow key={clip.id}>
                                         <TableCell className='font-medium truncate max-w-xs'>
                                             <a
-                                                href={`${api_url}/clip/${clip.id}`}
+                                                href={`${config.apiUrl}/clip/${clip.id}`}
                                                 target='_blank'
                                                 rel='noopener noreferrer'
                                                 className='hover:underline flex items-center gap-2'
@@ -391,7 +387,7 @@ export const UserDetailView = ({ userId, onDataChange }: { userId: string; onDat
                                                 size='icon'
                                                 variant='outline'
                                                 onClick={() =>
-                                                    navigator.clipboard.writeText(`${api_url}/clip/${clip.id}`)
+                                                    navigator.clipboard.writeText(`${config.apiUrl}/clip/${clip.id}`)
                                                 }
                                             >
                                                 <Copy className='h-4 w-4' />
diff --git a/components/footer.tsx b/components/footer.tsx
new file mode 100644
index 0000000..76afeba
--- /dev/null
+++ b/components/footer.tsx
@@ -0,0 +1,47 @@
+import Link from 'next/link';
+import type { AppConfig } from '@/app/api/config/route';
+
+interface FooterProps {
+    appName?: string;
+    appDesc?: string;
+    footerLinks?: AppConfig['footerLinks'];
+}
+
+export const Footer = ({ appName = 'Wayclip', appDesc = '', footerLinks = {} }: FooterProps) => {
+    return (
+        <footer className='border-t py-12 px-4'>
+            <div className='container mx-auto max-w-6xl'>
+                <div className='grid grid-cols-1 md:grid-cols-4 gap-8 mb-8'>
+                    <div className='md:col-span-2'>
+                        <span className='font-bold text-xl mb-4 block'>{appName}</span>
+                        <p className='text-muted-foreground max-w-md'>{appDesc}</p>
+                    </div>
+                    {Object.entries(footerLinks).map(([category, links]) => (
+                        <div key={category}>
+                            <h4 className='font-semibold mb-4'>{category}</h4>
+                            <ul className='space-y-2 text-sm text-muted-foreground'>
+                                {links.map((link) => (
+                                    <li key={link.text}>
+                                        <Link
+                                            href={link.href}
+                                            target={link.external ? '_blank' : undefined}
+                                            rel={link.external ? 'noopener noreferrer' : undefined}
+                                            className='hover:text-foreground transition-colors'
+                                        >
+                                            {link.text}
+                                        </Link>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    ))}
+                </div>
+                <div className='border-t pt-8 text-center'>
+                    <p className='text-sm text-muted-foreground'>
+                        &copy; {new Date().getFullYear()} {appName}. Open source software licensed under MIT.
+                    </p>
+                </div>
+            </div>
+        </footer>
+    );
+};
diff --git a/components/nav.tsx b/components/nav.tsx
index fa2e4ed..8d319f3 100644
--- a/components/nav.tsx
+++ b/components/nav.tsx
@@ -3,12 +3,14 @@ import Link from 'next/link';
 import { Button } from './ui/button';
 import { ThemeToggle } from './toggle';
 import { BsGithub } from '@vertisanpro/react-icons/bs';
-import { getAppInfo } from '@/lib/utils';
-import { LinkItem } from '@/app/layout';
+import type { AppConfig } from '@/app/api/config/route';
 
-export const Navbar = async () => {
-    const appInfo = getAppInfo();
-    const navLinks: LinkItem[] = JSON.parse(process.env.NEXT_PUBLIC_NAVBAR_LINKS || '[]');
+interface NavbarProps {
+    appName?: string;
+    navbarLinks?: AppConfig['navbarLinks'];
+}
+
+export const Navbar = ({ appName = 'Wayclip', navbarLinks = [] }: NavbarProps) => {
     return (
         <header
             className='fixed top-0 left-0 z-40 w-full h-14 backdrop-blur-lg border-b bg-secondary/20 transition-colors'
@@ -16,18 +18,18 @@ export const Navbar = async () => {
         >
             <nav className='flex items-center w-full h-full px-4 mx-auto max-w-7xl'>
                 <Link href='/' className='inline-flex items-center gap-2.5 font-semibold mr-4'>
-                    {appInfo.app_name}
+                    {appName}
                 </Link>
 
                 <ul className='items-center hidden gap-2 sm:flex'>
-                    {navLinks.map((v, i) => (
+                    {navbarLinks.map((link, i) => (
                         <li key={i}>
                             <Link
-                                href={v.href}
-                                aria-label={v.text}
+                                href={link.href}
+                                aria-label={link.text}
                                 className='p-2 text-sm text-muted-foreground transition-colors hover:text-accent-foreground'
                             >
-                                {v.text}
+                                {link.text}
                             </Link>
                         </li>
                     ))}
@@ -35,7 +37,6 @@ export const Navbar = async () => {
 
                 <div className='items-center hidden flex-1 justify-end gap-1.5 lg:flex'>
                     <ThemeToggle />
-
                     <Button size='icon' variant='ghost' asChild>
                         <a
                             href='https://github.com/wayclip'
diff --git a/components/panel.tsx b/components/panel.tsx
index 4ac58ec..685cddb 100644
--- a/components/panel.tsx
+++ b/components/panel.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import {
     AlertDialog,
     AlertDialogAction,
@@ -15,24 +15,14 @@ import {
 import axios from 'axios';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@radix-ui/react-collapsible';
 import { UserDetailView } from '@/components/detailView';
-import { ChevronsUpDown } from 'lucide-react';
+import { ChevronsUpDown, Trash2, Ban, EyeOff } from 'lucide-react';
 import { toast } from 'sonner';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { Trash2, Ban, EyeOff } from 'lucide-react';
-
-const API_URL = 'https://wayclip.com';
-
-const formatBytes = (bytes: number, decimals = 2) => {
-    if (!+bytes) return '0 Bytes';
-    const k = 1024;
-    const dm = decimals < 0 ? 0 : decimals;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
-};
+import { useConfig } from '@/contexts/configContext';
+import { formatBytes } from '@/lib/utils';
 
 interface UserAdminInfo {
     id: string;
@@ -44,14 +34,12 @@ interface UserAdminInfo {
     clip_count: number;
     data_used: number;
 }
-
 interface ReportedClipInfo {
     clip_id: string;
     file_name: string;
     uploader_username: string;
     report_token: string;
 }
-
 interface AdminDashboardData {
     users: UserAdminInfo[];
     reported_clips: ReportedClipInfo[];
@@ -59,60 +47,53 @@ interface AdminDashboardData {
 }
 
 const AdminPanel = () => {
+    const { config } = useConfig();
     const [data, setData] = useState<AdminDashboardData | null>(null);
     const [openCollapsible, setOpenCollapsible] = useState<string | null>(null);
     const [isLoading, setIsLoading] = useState(true);
 
-    const fetchData = async () => {
+    const fetchData = useCallback(async () => {
+        if (!config?.apiUrl) return;
         setIsLoading(true);
         try {
-            const response = await axios.get<AdminDashboardData>(`${API_URL}/admin/dashboard`, {
+            const response = await axios.get<AdminDashboardData>(`${config.apiUrl}/admin/dashboard`, {
                 withCredentials: true,
             });
             setData(response.data);
         } catch (error) {
-            toast.error(`Could not load admin data, ${error}`);
+            console.error(error);
+            toast.error(`Could not load admin data.`);
         } finally {
             setIsLoading(false);
         }
-    };
+    }, [config?.apiUrl]);
 
     useEffect(() => {
-        fetchData();
-    }, []);
-
-    const handleRemoveVideo = async (token: string) => {
-        try {
-            const response = await axios.get(`${API_URL}/admin/remove/${token}`, { withCredentials: true });
-            toast.success(response.data);
+        if (config) {
             fetchData();
-        } catch (error) {
-            toast.error(`Failed to remove video, ${error}`);
         }
-    };
+    }, [config, fetchData]);
 
-    const handleBanUser = async (token: string) => {
+    const handleAction = async (endpoint: string, successMessage: string, errorMessage: string) => {
+        if (!config?.apiUrl) return;
         try {
-            const response = await axios.get(`${API_URL}/admin/ban/${token}`, { withCredentials: true });
-            toast.success(response.data);
+            const response = await axios.get(`${config.apiUrl}/admin/${endpoint}`, { withCredentials: true });
+            toast.success(response.data.message || successMessage);
             fetchData();
         } catch (error) {
-            toast.error(`Failed to ban user: ${error}`);
+            console.error(error);
+            toast.error(errorMessage);
         }
     };
 
-    const handleIgnoreReport = async (token: string) => {
-        try {
-            const response = await axios.get(`${API_URL}/admin/ignore/${token}`, { withCredentials: true });
-            toast.success(response.data);
-            fetchData();
-        } catch (error) {
-            toast.error(`Failed to ignore report: ${error}`);
-        }
-    };
+    const handleRemoveVideo = (token: string) =>
+        handleAction(`remove/${token}`, 'Video removed.', 'Failed to remove video.');
+    const handleBanUser = (token: string) => handleAction(`ban/${token}`, 'User banned.', 'Failed to ban user.');
+    const handleIgnoreReport = (token: string) =>
+        handleAction(`ignore/${token}`, 'Report ignored.', 'Failed to ignore report.');
 
     if (isLoading) return <p>Loading Admin Data...</p>;
-    if (!data) return <p>Could not load admin data.</p>;
+    if (!data || !config) return <p>Could not load admin data.</p>;
 
     return (
         <div className='flex flex-col gap-4'>
@@ -154,7 +135,7 @@ const AdminPanel = () => {
                                     <TableRow key={clip.clip_id}>
                                         <TableCell>
                                             <a
-                                                href={`${API_URL}/clip/${clip.clip_id}`}
+                                                href={`${config.apiUrl}/clip/${clip.clip_id}`}
                                                 target='_blank'
                                                 rel='noopener noreferrer'
                                             >
@@ -172,9 +153,9 @@ const AdminPanel = () => {
                                                 </AlertDialogTrigger>
                                                 <AlertDialogContent>
                                                     <AlertDialogHeader>
-                                                        <AlertDialogTitle>Ban User?</AlertDialogTitle>
+                                                        <AlertDialogTitle>Ignore Report?</AlertDialogTitle>
                                                         <AlertDialogDescription>
-                                                            You are going to ignore this clip. This action is
+                                                            Are you sure you want to ignore this report? This action is
                                                             irreversible.
                                                         </AlertDialogDescription>
                                                     </AlertDialogHeader>
@@ -212,7 +193,6 @@ const AdminPanel = () => {
                                                     </AlertDialogFooter>
                                                 </AlertDialogContent>
                                             </AlertDialog>
-
                                             <AlertDialog>
                                                 <AlertDialogTrigger asChild>
                                                     <Button size='sm' className='cursor-pointer' variant='outline'>
@@ -248,7 +228,6 @@ const AdminPanel = () => {
                     )}
                 </CardContent>
             </Card>
-
             <Card>
                 <CardHeader>
                     <CardTitle>All Users</CardTitle>
@@ -319,5 +298,4 @@ const AdminPanel = () => {
         </div>
     );
 };
-
 export default AdminPanel;
diff --git a/components/payment.tsx b/components/payment.tsx
index 5dc8ae4..fe5d507 100644
--- a/components/payment.tsx
+++ b/components/payment.tsx
@@ -2,28 +2,19 @@
 
 import axios from 'axios';
 import { useAuth } from '@/contexts/authContext';
+import { useConfig } from '@/contexts/configContext';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { CheckCircle2, Loader2, XCircle } from 'lucide-react';
 import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { getPaymentInfo, ParsedPaymentInfo } from '@/lib/utils';
 
 export const PaymentVerificationClient = () => {
-    const api_url = process.env.NEXT_PUBLIC_API_URL;
+    const { config } = useConfig();
     const { user, refreshUser, isLoading } = useAuth();
     const router = useRouter();
     const searchParams = useSearchParams();
     const [status, setStatus] = useState<'verifying' | 'success' | 'error'>('verifying');
     const [initialTier, setInitialTier] = useState<string | undefined>(undefined);
-    const [paymentInfo, setPaymentInfo] = useState<ParsedPaymentInfo | null>(null);
-
-    useEffect(() => {
-        const fetchData = async () => {
-            const payment = getPaymentInfo();
-            setPaymentInfo(payment);
-        };
-        fetchData();
-    }, []);
 
     useEffect(() => {
         if (user && initialTier === undefined) {
@@ -31,70 +22,66 @@ export const PaymentVerificationClient = () => {
         }
     }, [user, initialTier]);
 
-    useEffect(() => {
-        if (isLoading || !user || initialTier === undefined) {
-            return;
-        }
-
-        const sessionId = searchParams.get('session_id');
-        if (!sessionId) {
-            setStatus('error');
-            return;
-        }
-
-        if (!paymentInfo?.payments_enabled) {
-            setStatus('error');
-            console.error('Payments are disabled');
-            return;
-        }
-
-        const verifyStripeSession = async () => {
+    const verifySession = useCallback(
+        async (sessionId: string) => {
+            if (!config?.apiUrl) return;
             try {
-                const response = await axios.get(`${api_url}/api/checkout/verify-session?session_id=${sessionId}`, {
-                    withCredentials: true,
-                });
-
+                const response = await axios.get(
+                    `${config.apiUrl}/api/checkout/verify-session?session_id=${sessionId}`,
+                    { withCredentials: true },
+                );
                 if (response.data.status === 'paid') {
                     setStatus('success');
                 } else if (response.data.status === 'open') {
-                    setTimeout(verifyStripeSession, 3000);
+                    setTimeout(() => verifySession(sessionId), 3000);
                 } else {
                     setStatus('error');
                 }
             } catch (error) {
-                console.error('Verification failed:', error);
+                console.error(error);
                 setStatus('error');
             }
-        };
-
-        verifyStripeSession();
-    }, [isLoading, user, initialTier, searchParams, api_url, paymentInfo]);
+        },
+        [config?.apiUrl],
+    );
 
     useEffect(() => {
-        if (status !== 'success' || !user || initialTier === undefined) {
+        if (isLoading || !user || initialTier === undefined || !config) return;
+
+        const sessionId = searchParams.get('session_id');
+        if (!sessionId || !config.paymentsEnabled) {
+            setStatus('error');
             return;
         }
 
-        if (user.tier !== initialTier) {
-            const redirectTimer = setTimeout(() => {
-                router.replace('/dash');
-            }, 2000);
+        verifySession(sessionId);
+    }, [isLoading, user, initialTier, config, searchParams, verifySession]);
 
-            return () => clearTimeout(redirectTimer);
-        }
+    useEffect(() => {
+        if (status !== 'success' || !user || initialTier === undefined) return;
 
-        const pollInterval = setInterval(() => {
-            refreshUser();
+        const checkUserTier = async () => {
+            await refreshUser();
+            if (user.tier !== initialTier) {
+                setTimeout(() => router.replace('/dash'), 2000);
+                return true;
+            }
+            return false;
+        };
+
+        const intervalId = setInterval(async () => {
+            const updated = await checkUserTier();
+            if (updated) clearInterval(intervalId);
         }, 2000);
 
-        const maxWaitTimer = setTimeout(() => {
-            clearInterval(pollInterval);
+        const timeoutId = setTimeout(() => {
+            clearInterval(intervalId);
             router.replace('/dash');
         }, 10000);
 
         return () => {
-            clearInterval(pollInterval);
-            clearTimeout(maxWaitTimer);
+            clearInterval(intervalId);
+            clearTimeout(timeoutId);
         };
     }, [status, user, initialTier, refreshUser, router]);
 
@@ -116,11 +103,10 @@ export const PaymentVerificationClient = () => {
                         <XCircle className='h-16 w-16 text-destructive' />
                         <CardTitle className='mt-4 text-2xl'>Verification Failed</CardTitle>
                         <CardDescription>
-                            Invalid session. Please check your account or contact support via support@wayclip.com.
+                            Invalid session. Please check your account or contact support.
                         </CardDescription>
                     </>
                 );
-            case 'verifying':
             default:
                 return (
                     <>
@@ -144,3 +130,5 @@ export const PaymentVerificationClient = () => {
         </div>
     );
 };
+
+export default PaymentVerificationClient;
diff --git a/contexts/authContext.tsx b/contexts/authContext.tsx
index ddc2de1..b5b766a 100644
--- a/contexts/authContext.tsx
+++ b/contexts/authContext.tsx
@@ -2,6 +2,7 @@
 
 import { createContext, useContext, useState, useEffect, ReactNode, useCallback } from 'react';
 import axios from 'axios';
+import { useConfig } from './configContext';
 
 type CredentialProvider = 'email' | 'github' | 'google' | 'discord';
 
@@ -42,34 +43,32 @@ export interface Clip {
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
 export const AuthProvider = ({ children }: { children: ReactNode }) => {
-    const api_url = process.env.NEXT_PUBLIC_API_URL;
+    const { config, isLoading: isConfigLoading } = useConfig();
     const [user, setUser] = useState<UserProfile | null>(null);
     const [isLoading, setIsLoading] = useState(true);
 
     const doLogout = useCallback(async () => {
-        try {
-            await axios.post(`${api_url}/api/logout`, {}, { withCredentials: true });
-        } catch (error) {
-            console.error('Logout request failed, proceeding with client-side logout:', error);
-        } finally {
-            setUser(null);
-            if (window.location.pathname !== '/login') {
-                window.location.href = '/login';
+        if (config?.apiUrl) {
+            try {
+                await axios.post(`${config.apiUrl}/api/logout`, {}, { withCredentials: true });
+            } catch (error) {
+                console.error('Logout request failed, proceeding client-side.', error);
             }
         }
-    }, [api_url]);
+        setUser(null);
+        if (window.location.pathname !== '/login') {
+            window.location.href = '/login';
+        }
+    }, [config?.apiUrl]);
 
     const fetchUser = useCallback(async () => {
-        if (!api_url) {
-            console.error('Error: NEXT_PUBLIC_API_URL is not defined. Please check your .env.local file.');
-            setIsLoading(false);
+        if (isConfigLoading || !config?.apiUrl) {
             return;
         }
         try {
-            const response = await axios.get<UserProfile>(`${api_url}/api/me`, {
+            const response = await axios.get<UserProfile>(`${config.apiUrl}/api/me`, {
                 withCredentials: true,
             });
-
             if (response.data) {
                 if (response.data.is_banned) {
                     await doLogout();
@@ -80,12 +79,11 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
                 setUser(null);
             }
         } catch (error) {
-            console.error(error);
             setUser(null);
         } finally {
             setIsLoading(false);
         }
-    }, [api_url, doLogout]);
+    }, [config?.apiUrl, doLogout, isConfigLoading]);
 
     useEffect(() => {
         fetchUser();
@@ -99,7 +97,7 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
     const value = {
         user,
         isAuthenticated: !!user,
-        isLoading,
+        isLoading: isLoading || isConfigLoading,
         logout: doLogout,
         refreshUser,
     };
diff --git a/contexts/configContext.tsx b/contexts/configContext.tsx
new file mode 100644
index 0000000..c9b63d5
--- /dev/null
+++ b/contexts/configContext.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import type { AppConfig } from '@/app/api/config/route';
+
+interface ConfigContextType {
+    config: AppConfig | null;
+    isLoading: boolean;
+}
+
+const ConfigContext = createContext<ConfigContextType | undefined>(undefined);
+
+export const ConfigProvider = ({ children }: { children: ReactNode }) => {
+    const [config, setConfig] = useState<AppConfig | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        const fetchConfig = async () => {
+            try {
+                const response = await fetch('/api/config');
+                if (!response.ok) {
+                    throw new Error('Failed to fetch application configuration.');
+                }
+                const data: AppConfig = await response.json();
+                setConfig(data);
+            } catch (err) {
+                console.error(err);
+                setConfig(null);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        fetchConfig();
+    }, []);
+
+    const value = { config, isLoading };
+
+    return <ConfigContext.Provider value={value}>{children}</ConfigContext.Provider>;
+};
+
+export const useConfig = () => {
+    const context = useContext(ConfigContext);
+    if (context === undefined) {
+        throw new Error('useConfig must be used within a ConfigProvider');
+    }
+    return context;
+};
diff --git a/lib/config.ts b/lib/config.ts
new file mode 100644
index 0000000..1c58f30
--- /dev/null
+++ b/lib/config.ts
@@ -0,0 +1,47 @@
+import type { AppConfig, Tier } from '@/app/api/config/route';
+export function getServerConfig(): AppConfig {
+    let activeTiers: Tier[] = [];
+    try {
+        if (process.env.TIERS_JSON) {
+            activeTiers = JSON.parse(process.env.TIERS_JSON);
+        }
+    } catch (error) {
+        console.error('Failed to parse TIERS_JSON:', error);
+        activeTiers = [];
+    }
+
+    let footerLinks = {};
+    try {
+        if (process.env.NEXT_PUBLIC_FOOTER_LINKS) {
+            footerLinks = JSON.parse(process.env.NEXT_PUBLIC_FOOTER_LINKS);
+        }
+    } catch (error) {
+        console.error('Failed to parse NEXT_PUBLIC_FOOTER_LINKS:', error);
+        footerLinks = {};
+    }
+
+    let navbarLinks = [];
+    try {
+        if (process.env.NEXT_PUBLIC_NAVBAR_LINKS) {
+            navbarLinks = JSON.parse(process.env.NEXT_PUBLIC_NAVBAR_LINKS);
+        }
+    } catch (error) {
+        console.error('Failed to parse NEXT_PUBLIC_NAVBAR_LINKS:', error);
+        navbarLinks = [];
+    }
+
+    return {
+        apiUrl: process.env.NEXT_PUBLIC_API_URL || '',
+        appName: process.env.NEXT_PUBLIC_APP_NAME || 'Wayclip',
+        defaultAvatarUrl: process.env.NEXT_PUBLIC_DEFAULT_AVATAR_URL || '',
+        uploadLimitBytes: Number(process.env.NEXT_PUBLIC_UPLOAD_LIMIT_BYTES) || 0,
+        paymentsEnabled: process.env.NEXT_PUBLIC_PAYMENTS_ENABLED === 'TRUE',
+        discordAuthEnabled: process.env.NEXT_PUBLIC_DISCORD_AUTH_ENABLED === 'TRUE',
+        githubAuthEnabled: process.env.NEXT_PUBLIC_GITHUB_AUTH_ENABLED === 'TRUE',
+        googleAuthEnabled: process.env.NEXT_PUBLIC_GOOGLE_AUTH_ENABLED === 'TRUE',
+        emailAuthEnabled: process.env.NEXT_PUBLIC_EMAIL_AUTH_ENABLED === 'TRUE',
+        activeTiers,
+        footerLinks,
+        navbarLinks,
+    };
+}
diff --git a/lib/utils.ts b/lib/utils.ts
index 174c8ec..8f4f283 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -1,67 +1,15 @@
-import { clsx, type ClassValue } from 'clsx';
+import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
 }
 
-export type AppInfo = {
-    app_name: string;
-    default_avatar_url: string;
-    upload_limit_bytes: number;
+export const formatBytes = (bytes: number, decimals = 2): string => {
+    if (!+bytes) return '0 Bytes';
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 };
-
-export function getAppInfo(): AppInfo {
-    return {
-        app_name: process.env.NEXT_PUBLIC_APP_NAME || 'Wayclip',
-        default_avatar_url: process.env.NEXT_PUBLIC_DEFAULT_AVATAR || '',
-        upload_limit_bytes: Number(process.env.NEXT_PUBLIC_UPLOAD_LIMIT_BYTES) || 0,
-    };
-}
-
-export type Tier = {
-    name: string;
-    max_storage_bytes: number;
-    stripe_price_id: string | null;
-    display_price: string;
-    display_frequency: string;
-    description: string;
-    display_features: string[];
-    is_popular: boolean;
-};
-
-export type ParsedPaymentInfo = {
-    payments_enabled: boolean;
-    active_tiers: Tier[];
-};
-
-export type AuthInfo = {
-    discord_auth_enabled: boolean;
-    github_auth_enabled: boolean;
-    google_auth_enabled: boolean;
-    email_auth_enabled: boolean;
-};
-
-export function getPaymentInfo(): ParsedPaymentInfo {
-    const payments_enabled = process.env.NEXT_PUBLIC_PAYMENTS_ENABLED === 'true';
-
-    let active_tiers: Tier[] = [];
-    try {
-        if (process.env.NEXT_PUBLIC_ACTIVE_TIERS) {
-            active_tiers = JSON.parse(process.env.NEXT_PUBLIC_ACTIVE_TIERS);
-        }
-    } catch (error) {
-        console.error('Failed to parse NEXT_PUBLIC_ACTIVE_TIERS:', error);
-    }
-
-    return { payments_enabled, active_tiers };
-}
-
-export function getAuthInfo(): AuthInfo {
-    return {
-        discord_auth_enabled: process.env.NEXT_PUBLIC_DISCORD_AUTH_ENABLED === 'true',
-        github_auth_enabled: process.env.NEXT_PUBLIC_GITHUB_AUTH_ENABLED === 'true',
-        google_auth_enabled: process.env.NEXT_PUBLIC_GOOGLE_AUTH_ENABLED === 'true',
-        email_auth_enabled: process.env.NEXT_PUBLIC_EMAIL_AUTH_ENABLED === 'true',
-    };
-}
diff --git a/package.json b/package.json
index 132eb45..23b0deb 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
         "react-dom": "19.1.0",
         "sonner": "^2.0.7",
         "stripe": "^18.5.0",
+        "swr": "^2.3.6",
         "tailwind-merge": "^3.3.1"
     },
     "devDependencies": {

From e192c6eb49e59c7e3da92d3c09bd2cca03fb8f99 Mon Sep 17 00:00:00 2001
From: konyogony <me@konyogony.dev>
Date: Wed, 5 Nov 2025 22:11:42 +0700
Subject: [PATCH 18/22] Fix the stupid Dockerfile [DASH]

---
 Dockerfile    | 38 +-------------------------------------
 entrypoint.sh | 26 --------------------------
 2 files changed, 1 insertion(+), 63 deletions(-)
 delete mode 100644 entrypoint.sh

diff --git a/Dockerfile b/Dockerfile
index 2a80fae..0ff1479 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,42 +1,11 @@
 FROM oven/bun:1-slim AS builder
 WORKDIR /app
 
-ARG NEXT_PUBLIC_DEFAULT_AVATAR_URL=__NEXT_PUBLIC_DEFAULT_AVATAR_URL__
-ARG NEXT_PUBLIC_GITHUB_AUTH_ENABLED=__NEXT_PUBLIC_GITHUB_AUTH_ENABLED__
-ARG NEXT_PUBLIC_DISCORD_AUTH_ENABLED=__NEXT_PUBLIC_DISCORD_AUTH_ENABLED__
-ARG NEXT_PUBLIC_GOOGLE_AUTH_ENABLED=__NEXT_PUBLIC_GOOGLE_AUTH_ENABLED__
-ARG NEXT_PUBLIC_EMAIL_AUTH_ENABLED=__NEXT_PUBLIC_EMAIL_AUTH_ENABLED__
-ARG NEXT_PUBLIC_PAYMENTS_ENABLED=__NEXT_PUBLIC_PAYMENTS_ENABLED__
-ARG TIERS_JSON='[]'
-ARG NEXT_PUBLIC_APP_DESC="__NEXT_PUBLIC_APP_DESC__"
-ARG NEXT_PUBLIC_API_URL=__NEXT_PUBLIC_API_URL__
-ARG NEXT_PUBLIC_FOOTER_LINKS='{}'
-ARG NEXT_PUBLIC_NAVBAR_LINKS='[]'
-ARG NEXT_PUBLIC_FRONTEND_URL=__NEXT_PUBLIC_FRONTEND_URL__
-ARG NEXT_PUBLIC_APP_NAME=__NEXT_PUBLIC_APP_NAME__
-ARG NEXT_PUBLIC_UPLOAD_LIMIT_BYTES=__NEXT_PUBLIC_UPLOAD_LIMIT_BYTES__
-
-ENV NEXT_PUBLIC_DEFAULT_AVATAR_URL=$NEXT_PUBLIC_DEFAULT_AVATAR_URL
-ENV NEXT_PUBLIC_GITHUB_AUTH_ENABLED=$NEXT_PUBLIC_GITHUB_AUTH_ENABLED
-ENV NEXT_PUBLIC_DISCORD_AUTH_ENABLED=$NEXT_PUBLIC_DISCORD_AUTH_ENABLED
-ENV NEXT_PUBLIC_GOOGLE_AUTH_ENABLED=$NEXT_PUBLIC_GOOGLE_AUTH_ENABLED
-ENV NEXT_PUBLIC_EMAIL_AUTH_ENABLED=$NEXT_PUBLIC_EMAIL_AUTH_ENABLED
-ENV NEXT_PUBLIC_PAYMENTS_ENABLED=$NEXT_PUBLIC_PAYMENTS_ENABLED
-ENV TIERS_JSON=$TIERS_JSON
-ENV NEXT_PUBLIC_APP_DESC=$NEXT_PUBLIC_APP_DESC
-ENV NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL
-ENV NEXT_PUBLIC_FOOTER_LINKS=$NEXT_PUBLIC_FOOTER_LINKS
-ENV NEXT_PUBLIC_NAVBAR_LINKS=$NEXT_PUBLIC_NAVBAR_LINKS
-ENV NEXT_PUBLIC_FRONTEND_URL=$NEXT_PUBLIC_FRONTEND_URL
-ENV NEXT_PUBLIC_APP_NAME=$NEXT_PUBLIC_APP_NAME
-ENV NEXT_PUBLIC_UPLOAD_LIMIT_BYTES=$NEXT_PUBLIC_UPLOAD_LIMIT_BYTES
-
-COPY package.json bun.lock ./
+COPY package.json bun.lock* ./
 RUN bun install --frozen-lockfile
 
 COPY . .
 
-RUN echo "Building with placeholder envs..."
 RUN bun run build
 
 FROM node:20-slim AS runner
@@ -45,13 +14,8 @@ WORKDIR /app
 ENV NODE_ENV=production
 ENV PORT=0330
 ENV HOST=0.0.0.0
-
 COPY --from=builder /app/.next/standalone ./
 COPY --from=builder /app/.next/static ./.next/static
 
-COPY entrypoint.sh /app/entrypoint.sh
-RUN chmod +x /app/entrypoint.sh
-
 EXPOSE 0330
-ENTRYPOINT ["/app/entrypoint.sh"]
 CMD ["node", "server.js"]
diff --git a/entrypoint.sh b/entrypoint.sh
deleted file mode 100644
index 6d7dbac..0000000
--- a/entrypoint.sh
+++ /dev/null
@@ -1,26 +0,0 @@
-#!/bin/sh
-set -e
-
-TIERS_JSON_SINGLE_LINE=$(echo "$TIERS_JSON" | tr -d '\r\n')
-NEXT_PUBLIC_FOOTER_LINKS_SINGLE_LINE=$(echo "$NEXT_PUBLIC_FOOTER_LINKS" | tr -d '\r\n')
-NEXT_PUBLIC_NAVBAR_LINKS_SINGLE_LINE=$(echo "$NEXT_PUBLIC_NAVBAR_LINKS" | tr -d '\r\n')
-
-find ./.next -type f \( -name "*.js" -o -name "*.css" -o -name "*.html" \) -print0 | while read -r -d $'\0' file; do
-    sed -i "s|__NEXT_PUBLIC_DEFAULT_AVATAR_URL__|${NEXT_PUBLIC_DEFAULT_AVATAR_URL}|g" "$file"
-    sed -i "s|__NEXT_PUBLIC_GITHUB_AUTH_ENABLED__|${NEXT_PUBLIC_GITHUB_AUTH_ENABLED}|g" "$file"
-    sed -i "s|__NEXT_PUBLIC_DISCORD_AUTH_ENABLED__|${NEXT_PUBLIC_DISCORD_AUTH_ENABLED}|g" "$file"
-    sed -i "s|__NEXT_PUBLIC_GOOGLE_AUTH_ENABLED__|${NEXT_PUBLIC_GOOGLE_AUTH_ENABLED}|g" "$file"
-    sed -i "s|__NEXT_PUBLIC_EMAIL_AUTH_ENABLED__|${NEXT_PUBLIC_EMAIL_AUTH_ENABLED}|g" "$file"
-    sed -i "s|__NEXT_PUBLIC_PAYMENTS_ENABLED__|${NEXT_PUBLIC_PAYMENTS_ENABLED}|g" "$file"
-    sed -i "s|__NEXT_PUBLIC_APP_DESC__|${NEXT_PUBLIC_APP_DESC}|g" "$file"
-    sed -i "s|__NEXT_PUBLIC_API_URL__|${NEXT_PUBLIC_API_URL}|g" "$file"
-    sed -i "s|__NEXT_PUBLIC_FRONTEND_URL__|${NEXT_PUBLIC_FRONTEND_URL}|g" "$file"
-    sed -i "s|__NEXT_PUBLIC_APP_NAME__|${NEXT_PUBLIC_APP_NAME}|g" "$file"
-    sed -i "s|__NEXT_PUBLIC_UPLOAD_LIMIT_BYTES__|${NEXT_PUBLIC_UPLOAD_LIMIT_BYTES}|g" "$file"
-
-    sed -i "s|\"TIERS_JSON\":\[\]|\"TIERS_JSON\":${TIERS_JSON_SINGLE_LINE}|g" "$file"
-    sed -i "s|\"NEXT_PUBLIC_FOOTER_LINKS\":\{\}|\"NEXT_PUBLIC_FOOTER_LINKS\":${NEXT_PUBLIC_FOOTER_LINKS_SINGLE_LINE}|g" "$file"
-    sed -i "s|\"NEXT_PUBLIC_NAVBAR_LINKS\":\[\]|\"NEXT_PUBLIC_NAVBAR_LINKS\":${NEXT_PUBLIC_NAVBAR_LINKS_SINGLE_LINE}|g" "$file"
-done
-
-exec "$@"

From 5ed9454e19a8df15f30c712941ed0467fcc763ce Mon Sep 17 00:00:00 2001
From: konyogony <me@konyogony.dev>
Date: Fri, 7 Nov 2025 21:54:18 +0700
Subject: [PATCH 19/22] Add app description into the AppConfig struct [DASH]

---
 app/api/config/route.ts | 1 +
 app/layout.tsx          | 4 ++--
 lib/config.ts           | 1 +
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/api/config/route.ts b/app/api/config/route.ts
index 94b41e4..3f6f070 100644
--- a/app/api/config/route.ts
+++ b/app/api/config/route.ts
@@ -15,6 +15,7 @@ export interface Tier {
 export interface AppConfig {
     apiUrl: string;
     appName: string;
+    appDesc: string;
     defaultAvatarUrl: string;
     uploadLimitBytes: number;
     paymentsEnabled: boolean;
diff --git a/app/layout.tsx b/app/layout.tsx
index 58401ac..226a1e6 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -16,7 +16,7 @@ const inter = Inter({
 export function generateMetadata(): Metadata {
     const config = getServerConfig();
     const appName = config?.appName || 'Wayclip';
-    const description = process.env.NEXT_PUBLIC_APP_DESC || `Welcome to ${appName}`;
+    const description = config?.appDesc || `Welcome to ${appName}`;
 
     return {
         title: appName,
@@ -32,7 +32,7 @@ export default function RootLayout({
     children: React.ReactNode;
 }>) {
     const config = getServerConfig();
-    const appDesc = process.env.NEXT_PUBLIC_APP_DESC || '';
+    const appDesc = config?.appDesc || '';
 
     return (
         <html lang='en' className={inter.className} suppressHydrationWarning>
diff --git a/lib/config.ts b/lib/config.ts
index 1c58f30..dd397cc 100644
--- a/lib/config.ts
+++ b/lib/config.ts
@@ -33,6 +33,7 @@ export function getServerConfig(): AppConfig {
     return {
         apiUrl: process.env.NEXT_PUBLIC_API_URL || '',
         appName: process.env.NEXT_PUBLIC_APP_NAME || 'Wayclip',
+        appDesc: process.env.NEXT_PUBLIC_APP_DESC || '',
         defaultAvatarUrl: process.env.NEXT_PUBLIC_DEFAULT_AVATAR_URL || '',
         uploadLimitBytes: Number(process.env.NEXT_PUBLIC_UPLOAD_LIMIT_BYTES) || 0,
         paymentsEnabled: process.env.NEXT_PUBLIC_PAYMENTS_ENABLED === 'TRUE',

From 457fd5ec2a65570959fb889ef3fcd4d18e5f885c Mon Sep 17 00:00:00 2001
From: konyogony <me@konyogony.dev>
Date: Fri, 7 Nov 2025 21:57:08 +0700
Subject: [PATCH 20/22] Add 'Dashboard' onto the navbar title

---
 app/layout.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index 226a1e6..75198d8 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -19,10 +19,10 @@ export function generateMetadata(): Metadata {
     const description = config?.appDesc || `Welcome to ${appName}`;
 
     return {
-        title: appName,
+        title: `${appName} | Dashboard`,
         description,
-        openGraph: { title: appName, description },
-        twitter: { card: 'summary_large_image', title: appName, description },
+        openGraph: { title: `${appName} | Dashboard`, description },
+        twitter: { card: 'summary_large_image', title: `${appName} | Dashboard`, description },
     };
 }
 

From 2399837db8e7f410e198b8e02c40b214bf4090f5 Mon Sep 17 00:00:00 2001
From: konyogony <me@konyogony.dev>
Date: Sat, 8 Nov 2025 13:05:24 +0700
Subject: [PATCH 21/22] Another try [DASH]

---
 app/layout.tsx          | 10 ++--------
 components/appShell.tsx | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+), 8 deletions(-)
 create mode 100644 components/appShell.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index 75198d8..a478b42 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -4,8 +4,7 @@ import { AuthProvider } from '@/contexts/authContext';
 import { ConfigProvider } from '@/contexts/configContext';
 import { Toaster } from 'sonner';
 import { Inter } from 'next/font/google';
-import { Navbar } from '@/components/nav';
-import { Footer } from '@/components/footer';
+import { AppShell } from '@/components/appShell';
 import { getServerConfig } from '@/lib/config';
 import './globals.css';
 
@@ -31,18 +30,13 @@ export default function RootLayout({
 }: Readonly<{
     children: React.ReactNode;
 }>) {
-    const config = getServerConfig();
-    const appDesc = config?.appDesc || '';
-
     return (
         <html lang='en' className={inter.className} suppressHydrationWarning>
             <body>
                 <ConfigProvider>
                     <AuthProvider>
                         <ThemeProvider attribute='class' defaultTheme='system' enableSystem disableTransitionOnChange>
-                            <Navbar appName={config?.appName} navbarLinks={config?.navbarLinks} />
-                            <main className='flex-1 w-full'>{children}</main>
-                            <Footer appName={config?.appName} appDesc={appDesc} footerLinks={config?.footerLinks} />
+                            <AppShell>{children}</AppShell>
                             <Toaster richColors theme='system' />
                         </ThemeProvider>
                     </AuthProvider>
diff --git a/components/appShell.tsx b/components/appShell.tsx
new file mode 100644
index 0000000..a13c5e1
--- /dev/null
+++ b/components/appShell.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import { useConfig } from '@/contexts/configContext';
+import { Navbar } from '@/components/nav';
+import { Footer } from '@/components/footer';
+
+export function AppShell({ children }: { children: React.ReactNode }) {
+    const { config, isLoading } = useConfig();
+    if (isLoading || !config) return null;
+
+    return (
+        <>
+            <Navbar appName={config.appName} navbarLinks={config.navbarLinks} />
+            <main className='flex-1 w-full'>{children}</main>
+            <Footer appName={config.appName} appDesc={config.appDesc} footerLinks={config.footerLinks} />
+        </>
+    );
+}

From b178ef81df761a6a9ec66b10ed53628fe9a11515 Mon Sep 17 00:00:00 2001
From: konyogony <me@konyogony.dev>
Date: Tue, 18 Nov 2025 20:25:46 +0700
Subject: [PATCH 22/22] Add sessions

---
 app/dash/page.tsx | 181 ++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 176 insertions(+), 5 deletions(-)

diff --git a/app/dash/page.tsx b/app/dash/page.tsx
index 01a1d60..af88839 100644
--- a/app/dash/page.tsx
+++ b/app/dash/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { Copy, Trash2, ExternalLink, Check, LogOut, Unplug, Shield, ShieldCheck, Key, RefreshCcw } from 'lucide-react';
+import { ShieldAlert } from 'lucide-react';
 import { InputOTP, InputOTPSlot, InputOTPGroup, InputOTPSeparator } from '@/components/ui/input-otp';
 import AdminPanel from '@/components/panel';
 import { toast } from 'sonner';
@@ -53,6 +54,76 @@ const providerIcons: { [key: string]: React.ReactNode } = {
     email: <span className='text-xl font-bold'>@</span>,
 };
 
+interface Session {
+    id: string;
+    device: string;
+    last_seen_at: string;
+    created_at: string;
+}
+
+const SessionsTable = ({ sessions, onRevoke }: { sessions: Session[]; onRevoke: (id: string) => void }) => {
+    if (!sessions || sessions.length === 0) {
+        return <p className='text-muted-foreground'>No active sessions found.</p>;
+    }
+    return (
+        <Table>
+            <TableHeader>
+                <TableRow>
+                    <TableHead>Device</TableHead>
+                    <TableHead>Last Active</TableHead>
+                    <TableHead>Signed In</TableHead>
+                    <TableHead className='text-right'>Action</TableHead>
+                </TableRow>
+            </TableHeader>
+            <TableBody>
+                {sessions.map((session) => (
+                    <TableRow key={session.id}>
+                        <TableCell className='font-medium'>{session.device}</TableCell>
+                        <TableCell>{new Date(session.last_seen_at).toLocaleString()}</TableCell>
+                        <TableCell>{new Date(session.created_at).toLocaleDateString()}</TableCell>
+                        <TableCell className='text-right'>
+                            <AlertDialog>
+                                <AlertDialogTrigger asChild>
+                                    <Button
+                                        variant='ghost'
+                                        size='sm'
+                                        className='text-xs text-destructive hover:bg-destructive/10 hover:text-destructive'
+                                    >
+                                        Revoke
+                                    </Button>
+                                </AlertDialogTrigger>
+                                <AlertDialogContent>
+                                    <AlertDialogHeader>
+                                        <AlertDialogTitle>Revoke Session?</AlertDialogTitle>
+                                        <AlertDialogDescription>
+                                            This will sign this device out of your account. You will need to log in
+                                            again on that device. Are you sure?
+                                        </AlertDialogDescription>
+                                    </AlertDialogHeader>
+                                    <AlertDialogFooter>
+                                        <AlertDialogCancel asChild>
+                                            <Button size='sm' variant='ghost' className='cursor-pointer'>
+                                                Cancel
+                                            </Button>
+                                        </AlertDialogCancel>
+                                        <Button
+                                            variant='destructive'
+                                            onClick={() => onRevoke(session.id)}
+                                            className='cursor-pointer'
+                                        >
+                                            Revoke Session
+                                        </Button>
+                                    </AlertDialogFooter>
+                                </AlertDialogContent>
+                            </AlertDialog>
+                        </TableCell>
+                    </TableRow>
+                ))}
+            </TableBody>
+        </Table>
+    );
+};
+
 const ClipsTable = ({
     clips,
     apiUrl,
@@ -342,6 +413,8 @@ const DashboardPage = () => {
     const [show2FADialog, setShow2FADialog] = useState(false);
     const [showResetPasswordDialog, setShowResetPasswordDialog] = useState(false);
     const [isManagingSubscription, setIsManagingSubscription] = useState(false);
+    const [sessions, setSessions] = useState<Session[]>([]);
+    const [sessionsLoading, setSessionsLoading] = useState(true);
 
     useEffect(() => {
         if (!isAuthLoading && !isAuthenticated) {
@@ -350,25 +423,71 @@ const DashboardPage = () => {
     }, [isAuthLoading, isAuthenticated, router]);
 
     useEffect(() => {
-        const fetchClips = async () => {
+        const fetchData = async () => {
             if (isAuthenticated && config?.apiUrl) {
                 try {
                     setClipsLoading(true);
-                    const response = await axios.get<Clip[]>(`${config.apiUrl}/api/clips/index`, {
+                    const clipsResponse = await axios.get<Clip[]>(`${config.apiUrl}/api/clips/index`, {
                         withCredentials: true,
                     });
-                    setClips(response.data);
+                    setClips(clipsResponse.data);
                 } catch (error) {
                     console.error(error);
-                    toast.error('Could not load your clips. Please try refreshing the page.');
+                    toast.error('Could not load your clips.');
                 } finally {
                     setClipsLoading(false);
                 }
+
+                try {
+                    setSessionsLoading(true);
+                    const sessionsResponse = await axios.get<Session[]>(`${config.apiUrl}/api/sessions`, {
+                        withCredentials: true,
+                    });
+                    setSessions(sessionsResponse.data);
+                } catch (error) {
+                    console.error(error);
+                    toast.error('Could not load your active sessions.');
+                } finally {
+                    setSessionsLoading(false);
+                }
             }
         };
-        fetchClips();
+        fetchData();
     }, [isAuthenticated, config?.apiUrl]);
 
+    const handleRevokeSession = async (sessionId: string) => {
+        if (!config?.apiUrl) return;
+        try {
+            await axios.delete(`${config.apiUrl}/api/sessions/${sessionId}`, { withCredentials: true });
+            setSessions((prevSessions) => prevSessions.filter((session) => session.id !== sessionId));
+            toast.success('Session has been revoked.');
+        } catch (error) {
+            if (isAxiosError(error) && error.response?.data?.message) {
+                toast.error(error.response.data.message);
+            } else {
+                toast.error('Failed to revoke the session.');
+            }
+        }
+    };
+
+    const handleLogoutAllDevices = async () => {
+        if (!config?.apiUrl) return;
+        try {
+            const response = await axios.post(`${config.apiUrl}/api/logout-devices`, {}, { withCredentials: true });
+            toast.success(response.data.message || 'All other devices have been signed out.');
+            const sessionsResponse = await axios.get<Session[]>(`${config.apiUrl}/api/sessions`, {
+                withCredentials: true,
+            });
+            setSessions(sessionsResponse.data);
+        } catch (error) {
+            if (isAxiosError(error) && error.response?.data?.message) {
+                toast.error(error.response.data.message);
+            } else {
+                toast.error('Failed to sign out other devices.');
+            }
+        }
+    };
+
     const handleUnlinkProvider = async (provider: string) => {
         if (!config?.apiUrl) return;
         try {
@@ -673,6 +792,58 @@ const DashboardPage = () => {
                                 </AlertDialog>
                             </CardFooter>
                         </Card>
+                        <Card className='lg:col-span-3'>
+                            <CardHeader>
+                                <CardTitle>Active Sessions</CardTitle>
+                                <CardDescription>
+                                    This is a list of devices that have signed into your account. Revoke any sessions
+                                    that you do not recognize.
+                                </CardDescription>
+                            </CardHeader>
+                            <CardContent>
+                                {sessionsLoading ? (
+                                    <div className='flex justify-center py-8'>
+                                        <div className='h-8 w-8 animate-spin rounded-full border-4 border-solid border-primary border-t-transparent' />
+                                    </div>
+                                ) : (
+                                    <SessionsTable sessions={sessions} onRevoke={handleRevokeSession} />
+                                )}
+                            </CardContent>
+                            <CardFooter className='flex justify-between items-center border-t pt-6'>
+                                <p className='text-sm text-muted-foreground'>Don&apos;t recognize some activity?</p>
+                                <AlertDialog>
+                                    <AlertDialogTrigger asChild>
+                                        <Button variant='outline' className='cursor-pointer'>
+                                            <ShieldAlert className='mr-2 size-4' />
+                                            Sign out of all other devices
+                                        </Button>
+                                    </AlertDialogTrigger>
+                                    <AlertDialogContent>
+                                        <AlertDialogHeader>
+                                            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+                                            <AlertDialogDescription>
+                                                This will sign you out of every other session on all of your devices,
+                                                including mobile and desktop clients. You will remain logged in here.
+                                            </AlertDialogDescription>
+                                        </AlertDialogHeader>
+                                        <AlertDialogFooter>
+                                            <AlertDialogCancel asChild>
+                                                <Button size='sm' variant='ghost' className='cursor-pointer'>
+                                                    Cancel
+                                                </Button>
+                                            </AlertDialogCancel>
+                                            <Button
+                                                variant='destructive'
+                                                onClick={handleLogoutAllDevices}
+                                                className='cursor-pointer'
+                                            >
+                                                Yes, sign out everywhere else
+                                            </Button>
+                                        </AlertDialogFooter>
+                                    </AlertDialogContent>
+                                </AlertDialog>
+                            </CardFooter>
+                        </Card>
                     </div>
                     <div className='flex flex-col gap-4'>
                         <div className='grid grid-cols-5 gap-6 w-full'>