diff --git a/app/dashboard/applications/[id]/page.tsx b/app/dashboard/applications/[id]/page.tsx
new file mode 100644
index 0000000..c3bd6c9
--- /dev/null
+++ b/app/dashboard/applications/[id]/page.tsx
@@ -0,0 +1,364 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { trpc } from "@/client/utils/trpc/trpc-client";
+import { toast } from "sonner";
+import {
+  LoadingSpinner,
+  LoadingPage,
+} from "@/client/components/LoadingSpinner";
+import { CopyButton } from "@/client/components/CopyButton";
+import { Modal } from "@/client/components/Modal";
+import { PageHeader } from "@/client/components/PageHeader";
+import { validateDomains } from "@/shared/validators/domains";
+
+const inputStyles =
+  "mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-base py-2.5 px-3";
+const textareaStyles = inputStyles;
+
+export default function ApplicationDetailsPage({
+  params,
+}: {
+  params: { id: string };
+}) {
+  const router = useRouter();
+  const utils = trpc.useUtils();
+  const { data: app, isLoading } = trpc.getApplication.useQuery({
+    id: params.id,
+  });
+  const [isEditing, setIsEditing] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [editForm, setEditForm] = useState({
+    name: "",
+    description: "",
+    domains: [] as string[],
+  });
+  const [newDomain, setNewDomain] = useState("");
+
+  const updateAppMutation = trpc.updateApplication.useMutation({
+    onSuccess: () => {
+      toast.success("Application updated successfully");
+      setIsEditing(false);
+      utils.getApplication.invalidate({ id: params.id });
+    },
+    onError: (error) => {
+      toast.error(error.message || "Failed to update application");
+    },
+  });
+
+  const deleteAppMutation = trpc.deleteApplication.useMutation({
+    onSuccess: () => {
+      toast.success("Application deleted successfully");
+      router.push("/dashboard?tab=applications");
+      utils.listApplications.invalidate();
+    },
+    onError: (error) => {
+      toast.error(error.message || "Failed to delete application");
+    },
+  });
+
+  if (isLoading) {
+    return <LoadingPage />;
+  }
+
+  if (!app) {
+    return (
+      <div className="min-h-screen bg-gray-50">
+        <PageHeader
+          title="Application not found"
+          backUrl="/dashboard?tab=applications"
+        />
+      </div>
+    );
+  }
+
+  const handleEdit = () => {
+    setEditForm({
+      name: app.name,
+      description: app.description || "",
+      domains: app.domains,
+    });
+    setIsEditing(true);
+  };
+
+  const handleUpdate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await updateAppMutation.mutateAsync({
+      id: app.id,
+      name: editForm.name,
+      description: editForm.description,
+      domains: editForm.domains,
+    });
+  };
+
+  const handleDelete = async () => {
+    await deleteAppMutation.mutateAsync({ id: app.id });
+  };
+
+  const handleAddDomain = () => {
+    if (newDomain && !editForm.domains.includes(newDomain)) {
+      const updatedDomains = [...editForm.domains, newDomain];
+      const validationResult = validateDomains(updatedDomains);
+
+      if (!validationResult.valid) {
+        toast.error(validationResult.error);
+        return;
+      }
+
+      setEditForm((prev) => ({
+        ...prev,
+        domains: updatedDomains,
+      }));
+      setNewDomain("");
+    }
+  };
+
+  const handleRemoveDomain = (domain: string) => {
+    setEditForm((prev) => ({
+      ...prev,
+      domains: prev.domains.filter((d) => d !== domain),
+    }));
+  };
+
+  const headerActions = (
+    <>
+      <button
+        onClick={handleEdit}
+        className="cursor-pointer px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
+      >
+        Edit
+      </button>
+      <button
+        onClick={() => setShowDeleteConfirm(true)}
+        className="cursor-pointer px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-red-600 hover:bg-red-700"
+      >
+        Delete
+      </button>
+    </>
+  );
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 mt-8">
+        <PageHeader
+          title={app.name}
+          subtitle={`Team: ${app.team.name}`}
+          actions={headerActions}
+          backUrl="/dashboard?tab=applications"
+        />
+      </div>
+
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="bg-white shadow rounded-lg">
+          <div className="px-6 py-4">
+            {/* Application Info */}
+            {!isEditing && (
+              <div className="space-y-6">
+                <div>
+                  <h3 className="text-sm font-medium text-gray-700">
+                    Application ID
+                  </h3>
+                  <div className="mt-2">
+                    <CopyButton text={app.id} label={app.id} />
+                  </div>
+                </div>
+
+                {app.description && (
+                  <div>
+                    <h3 className="text-sm font-medium text-gray-700">
+                      Description
+                    </h3>
+                    <p className="mt-1 text-gray-600">{app.description}</p>
+                  </div>
+                )}
+
+                <div>
+                  <h3 className="text-sm font-medium text-gray-700">
+                    Client ID
+                  </h3>
+                  <div className="mt-2">
+                    {app.clientId ? (
+                      <CopyButton text={app.clientId} label={app.clientId} />
+                    ) : (
+                      <span className="text-sm text-gray-500">
+                        No Client ID available
+                      </span>
+                    )}
+                  </div>
+                </div>
+
+                <div>
+                  <h3 className="text-sm font-medium text-gray-700">Domains</h3>
+                  {app.domains.length > 0 ? (
+                    <div className="mt-2 flex flex-wrap gap-2">
+                      {app.domains.map((domain) => (
+                        <span
+                          key={domain}
+                          className="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-100 text-blue-800"
+                        >
+                          {domain}
+                        </span>
+                      ))}
+                    </div>
+                  ) : (
+                    <span className="text-sm text-gray-500">
+                      No domains added
+                    </span>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* Edit Form */}
+            {isEditing && (
+              <form onSubmit={handleUpdate} className="space-y-4">
+                <div>
+                  <label
+                    htmlFor="name"
+                    className="block text-sm font-medium text-gray-700"
+                  >
+                    Application Name
+                  </label>
+                  <input
+                    type="text"
+                    id="name"
+                    value={editForm.name}
+                    onChange={(e) =>
+                      setEditForm({ ...editForm, name: e.target.value })
+                    }
+                    className={inputStyles}
+                    required
+                  />
+                </div>
+
+                <div>
+                  <label
+                    htmlFor="description"
+                    className="block text-sm font-medium text-gray-700"
+                  >
+                    Description
+                  </label>
+                  <textarea
+                    id="description"
+                    value={editForm.description}
+                    onChange={(e) =>
+                      setEditForm({ ...editForm, description: e.target.value })
+                    }
+                    rows={3}
+                    className={textareaStyles}
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700">
+                    Domains
+                  </label>
+                  <div className="mt-1 flex space-x-2">
+                    <input
+                      type="text"
+                      value={newDomain}
+                      onChange={(e) => setNewDomain(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") {
+                          e.preventDefault();
+                          handleAddDomain();
+                        }
+                      }}
+                      placeholder="example.com"
+                      className={inputStyles}
+                    />
+                    <button
+                      type="button"
+                      onClick={handleAddDomain}
+                      className="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 cursor-pointer inline-flex items-center space-x-2"
+                    >
+                      <span>Add</span>
+                    </button>
+                  </div>
+                  <div className="mt-2 flex flex-wrap gap-2">
+                    {editForm.domains.map((domain) => (
+                      <span
+                        key={domain}
+                        className="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-100 text-blue-800"
+                      >
+                        {domain}
+                        <button
+                          type="button"
+                          onClick={() => handleRemoveDomain(domain)}
+                          className="ml-2 inline-flex text-blue-600 hover:text-blue-800 cursor-pointer"
+                        >
+                          ×
+                        </button>
+                      </span>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="flex justify-end space-x-3">
+                  <button
+                    type="button"
+                    onClick={() => setIsEditing(false)}
+                    className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 cursor-pointer"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    className="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 cursor-pointer disabled:opacity-75 disabled:cursor-not-allowed inline-flex items-center space-x-2"
+                    disabled={updateAppMutation.isLoading}
+                  >
+                    {updateAppMutation.isLoading ? (
+                      <>
+                        <LoadingSpinner />
+                        <span>Saving...</span>
+                      </>
+                    ) : (
+                      "Save Changes"
+                    )}
+                  </button>
+                </div>
+              </form>
+            )}
+
+            {/* Delete Confirmation Modal */}
+            <Modal
+              isOpen={showDeleteConfirm}
+              onClose={() => setShowDeleteConfirm(false)}
+              title="Delete Application"
+            >
+              <div>
+                <p className="text-sm text-gray-500">
+                  Are you sure you want to delete this application? This action
+                  cannot be undone.
+                </p>
+                <div className="mt-4 flex justify-end space-x-3">
+                  <button
+                    onClick={() => setShowDeleteConfirm(false)}
+                    className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 cursor-pointer"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    onClick={handleDelete}
+                    className="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-red-600 hover:bg-red-700 cursor-pointer disabled:opacity-75 disabled:cursor-not-allowed inline-flex items-center space-x-2"
+                    disabled={deleteAppMutation.isLoading}
+                  >
+                    {deleteAppMutation.isLoading ? (
+                      <>
+                        <LoadingSpinner />
+                        <span>Deleting...</span>
+                      </>
+                    ) : (
+                      "Delete"
+                    )}
+                  </button>
+                </div>
+              </div>
+            </Modal>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 63f33a7..0a00f03 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -1,65 +1,625 @@
-"use client"
+"use client";
 
-import { useEffect, useState } from "react"
-import { useRouter } from "next/navigation"
-import { trpc } from "@/client/utils/trpc/trpc-client"
-import { ProtectedApiInteraction } from "../../client/components/ProtectedApiInteraction"
-import { useAuth } from "@/client/hooks/useAuth"
-import { supabase } from "@/client/utils/supabase/supabase-client-client"
+import { useState, useCallback, useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { trpc } from "@/client/utils/trpc/trpc-client";
+import { toast } from "sonner";
+import { validateDomains } from "@/shared/validators/domains";
+
+type ActiveView = "teams" | "applications";
 
 export default function DashboardPage() {
+  const params = useSearchParams();
+  const [activeView, setActiveView] = useState<ActiveView>("teams");
+  const { data: stats } = trpc.getStats.useQuery();
   const router = useRouter();
-  const { user, isLoading: isAuthLoading } = useAuth();
-  const logoutMutation = trpc.logout.useMutation();
-  const [isLoading, setIsLoading] = useState(false);
+
+  const NavIcon = ({ children }: { children: React.ReactNode }) => (
+    <div className="w-5 h-5 flex-shrink-0">{children}</div>
+  );
+
+  const SideNavItem = ({
+    view,
+    label,
+    icon,
+  }: {
+    view: ActiveView;
+    label: string;
+    icon: React.ReactNode;
+  }) => (
+    <button
+      onClick={() => setActiveView(view)}
+      className={`cursor-pointer w-full flex items-center space-x-3 px-4 py-3 text-sm font-medium rounded-md transition-colors duration-200
+        ${
+          activeView === view
+            ? "bg-blue-50 text-blue-700 border border-blue-100"
+            : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
+        }`}
+    >
+      <NavIcon>{icon}</NavIcon>
+      <span>{label}</span>
+    </button>
+  );
+
+  const renderViewHeader = () => {
+    const headers = {
+      teams: "Team Management",
+      applications: "Application Management",
+    };
+
+    return (
+      <div className="border-b border-gray-200 px-6 py-4">
+        <h1 className="text-xl font-semibold text-gray-900">
+          {headers[activeView]}
+        </h1>
+      </div>
+    );
+  };
 
   useEffect(() => {
-    if (!isAuthLoading && !user) {
-      router.push("/")
+    const viewType = params.get("tab");
+    if (viewType === "applications" || viewType === "teams") {
+      setActiveView(viewType);
     }
-  }, [isAuthLoading, user, router])
+  }, [params]);
 
-  const handleRefresh = async () => {
-    await supabase.auth.refreshSession();
-  }
+  useEffect(() => {
+    router.push(`/dashboard?tab=${activeView}`);
+  }, [activeView, router]);
 
-  const handleLogout = async () => {
-    try {
-      setIsLoading(true);
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="lg:grid lg:grid-cols-12 lg:gap-8">
+          {/* Sidebar Navigation */}
+          <aside className="lg:col-span-3">
+            <nav className="space-y-2 bg-white p-4 rounded-lg shadow-sm">
+              <SideNavItem
+                view="teams"
+                label="Teams"
+                icon={
+                  <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+                    />
+                  </svg>
+                }
+              />
+              <SideNavItem
+                view="applications"
+                label="Applications"
+                icon={
+                  <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"
+                    />
+                  </svg>
+                }
+              />
+            </nav>
 
-      await logoutMutation.mutateAsync();
-      await supabase.auth.signOut();
-    } catch (error) {
-      setIsLoading(false);
+            {/* Quick Stats */}
+            <div className="mt-6 bg-white p-4 rounded-lg shadow-sm space-y-4">
+              <h3 className="text-sm font-medium text-gray-500">Quick Stats</h3>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="p-3 bg-gray-50 rounded-md">
+                  <p className="text-xs text-gray-500">Teams</p>
+                  <p className="text-lg font-semibold text-gray-900">
+                    {stats?.teams || 0}
+                  </p>
+                </div>
+                <div className="p-3 bg-gray-50 rounded-md">
+                  <p className="text-xs text-gray-500">Applications</p>
+                  <p className="text-lg font-semibold text-gray-900">
+                    {stats?.applications || 0}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </aside>
 
-      console.error("Logout failed:", error)
-    }
-  }
+          {/* Main Content Area */}
+          <main className="mt-8 lg:mt-0 lg:col-span-9">
+            <div className="bg-white shadow rounded-lg overflow-hidden">
+              {renderViewHeader()}
+              <div className="divide-y divide-gray-200">
+                {activeView === "teams" && <TeamsView />}
+                {activeView === "applications" && <ApplicationsView />}
+              </div>
+            </div>
+          </main>
+        </div>
+      </div>
+    </div>
+  );
+}
 
-  if (isAuthLoading || !user) return <div>Loading user data...</div>;
-  if (isLoading) return <div>Signing out...</div>;
+const inputStyles =
+  "mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-base py-2.5 px-3";
+const selectStyles =
+  "mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-base py-2.5 px-3";
+const textareaStyles =
+  "mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-base py-2.5 px-3";
+
+function TeamsView() {
+  const router = useRouter();
+  const utils = trpc.useUtils();
+  const createTeamMutation = trpc.createTeam.useMutation({
+    onSuccess: () => {
+      toast.success("Team created successfully");
+      utils.listTeams.invalidate();
+    },
+    onError: (error) => {
+      toast.error(error.message || "Failed to create team");
+    },
+  });
+
+  const { data: teams, isLoading: isLoadingTeams } = trpc.listTeams.useQuery();
+  const [showCreateForm, setShowCreateForm] = useState(false);
+  const [newTeam, setNewTeam] = useState({
+    name: "",
+    slug: "",
+  });
+
+  const handleCreateTeam = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+
+      // Show loading toast
+      const loadingToast = toast.loading("Creating team...");
+
+      try {
+        const slug = newTeam.name
+          .toLowerCase()
+          .replace(/[^a-z0-9-]/g, "-")
+          .replace(/-+/g, "-")
+          .replace(/^-|-$/g, "");
+
+        await createTeamMutation.mutateAsync({
+          name: newTeam.name,
+          slug: slug,
+        });
+
+        setNewTeam({ name: "", slug: "" });
+        setShowCreateForm(false);
+      } catch {
+        //
+      } finally {
+        toast.dismiss(loadingToast);
+      }
+    },
+    [newTeam, createTeamMutation]
+  );
+
+  if (isLoadingTeams) {
+    return (
+      <div className="p-6 flex justify-center">
+        <div className="animate-pulse text-gray-500">Loading teams...</div>
+      </div>
+    );
+  }
 
   return (
-    <div className="container mx-auto px-4 py-8">
-      <div className="flex justify-between items-center mb-8">
-        <h1 className="text-3xl font-bold">Dashboard</h1>
+    <div className="p-6">
+      <div className="flex justify-between items-center mb-6">
+        <h2 className="text-xl font-semibold text-gray-900">Teams</h2>
         <button
-          onClick={handleRefresh}
-          className="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+          onClick={() => setShowCreateForm(true)}
+          className="cursor-pointer inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
         >
-          Refresh Session
+          Create Team
         </button>
+      </div>
+
+      {showCreateForm && (
+        <form
+          onSubmit={handleCreateTeam}
+          className="mb-6 p-6 bg-gray-50 rounded-lg"
+        >
+          <div className="space-y-6">
+            <div>
+              <label
+                htmlFor="teamName"
+                className="block text-sm font-medium text-gray-700 mb-1"
+              >
+                Team Name
+              </label>
+              <input
+                type="text"
+                id="teamName"
+                value={newTeam.name}
+                onChange={(e) =>
+                  setNewTeam({ ...newTeam, name: e.target.value })
+                }
+                className={inputStyles}
+                required
+                disabled={createTeamMutation.isLoading}
+                placeholder="Enter team name"
+              />
+              <p className="mt-2 text-sm text-gray-500">
+                Slug:{" "}
+                {newTeam.name
+                  ? newTeam.name.toLowerCase().replace(/[^a-z0-9-]/g, "-")
+                  : ""}
+              </p>
+            </div>
+            <div className="flex justify-end space-x-3 pt-2">
+              <button
+                type="button"
+                onClick={() => setShowCreateForm(false)}
+                className="cursor-pointer px-6 py-2.5 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
+                disabled={createTeamMutation.isLoading}
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="cursor-pointer px-6 py-2.5 border border-transparent rounded-lg text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors inline-flex items-center space-x-2"
+                disabled={createTeamMutation.isLoading}
+              >
+                {createTeamMutation.isLoading ? (
+                  <>
+                    <svg
+                      className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                    >
+                      <circle
+                        className="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        strokeWidth="4"
+                      ></circle>
+                      <path
+                        className="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      ></path>
+                    </svg>
+                    <span>Creating...</span>
+                  </>
+                ) : (
+                  "Create Team"
+                )}
+              </button>
+            </div>
+          </div>
+        </form>
+      )}
+
+      <div className="space-y-4">
+        {teams?.length === 0 ? (
+          <div className="text-center py-6 text-gray-500">
+            No teams created yet. Create your first team to get started.
+          </div>
+        ) : (
+          teams?.map((team) => (
+            <div
+              key={team.id}
+              className="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:bg-gray-50"
+            >
+              <div>
+                <h3 className="text-lg font-medium text-gray-900">
+                  {team.name}
+                </h3>
+                <p className="text-sm text-gray-500">
+                  Organization: {team.organization.name}
+                </p>
+              </div>
+              <button
+                onClick={() => router.push(`/dashboard/teams/${team.id}`)}
+                className="text-blue-600 hover:text-blue-800 cursor-pointer"
+              >
+                Manage →
+              </button>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ApplicationsView() {
+  const router = useRouter();
+  const utils = trpc.useUtils();
+  const createAppMutation = trpc.createApplication.useMutation({
+    onSuccess: () => {
+      toast.success("Application created successfully");
+      utils.listApplications.invalidate();
+    },
+    onError: (error) => {
+      toast.error(error.message || "Failed to create application");
+    },
+  });
+
+  const { data: applications, isLoading: isLoadingApps } =
+    trpc.listApplications.useQuery();
+  const { data: teams, isLoading: isLoadingTeams } = trpc.listTeams.useQuery();
+  const [showCreateForm, setShowCreateForm] = useState(false);
+  const [newApp, setNewApp] = useState({
+    name: "",
+    description: "",
+    teamId: "",
+    domains: [] as string[],
+  });
+
+  const [newDomain, setNewDomain] = useState("");
+
+  const handleAddDomain = useCallback(() => {
+    if (newDomain && !newApp.domains.includes(newDomain)) {
+      const validationResult = validateDomains([...newApp.domains, newDomain]);
+
+      if (!validationResult.valid) {
+        toast.error(validationResult.error);
+        return;
+      }
+
+      setNewApp((prev) => ({
+        ...prev,
+        domains: [...prev.domains, newDomain],
+      }));
+      setNewDomain("");
+    }
+  }, [newDomain, newApp.domains]);
+
+  const handleRemoveDomain = useCallback((domain: string) => {
+    setNewApp((prev) => ({
+      ...prev,
+      domains: prev.domains.filter((d) => d !== domain),
+    }));
+  }, []);
+
+  const handleCreateApp = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+
+      // Show loading toast
+      const loadingToast = toast.loading("Creating application...");
+
+      try {
+        await createAppMutation.mutateAsync({
+          name: newApp.name,
+          description: newApp.description || undefined,
+          teamId: newApp.teamId,
+          domains: newApp.domains,
+        });
 
+        setNewApp({ name: "", description: "", teamId: "", domains: [] });
+        setShowCreateForm(false);
+      } catch {
+        //
+      } finally {
+        toast.dismiss(loadingToast);
+      }
+    },
+    [newApp, createAppMutation]
+  );
+
+  if (isLoadingApps || isLoadingTeams) {
+    return (
+      <div className="p-6 flex justify-center">
+        <div className="animate-pulse text-gray-500">
+          Loading applications...
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      <div className="flex justify-between items-center mb-6">
+        <h2 className="text-xl font-semibold text-gray-900">Applications</h2>
         <button
-          onClick={handleLogout}
-          className="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+          onClick={() => setShowCreateForm(true)}
+          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 cursor-pointer"
         >
-          Logout
+          Create Application
         </button>
       </div>
-      <p className="mb-4">Welcome, user with ID: {user.id}</p>
-      <ProtectedApiInteraction />
+
+      {showCreateForm && (
+        <form
+          onSubmit={handleCreateApp}
+          className="mb-6 p-6 bg-gray-50 rounded-lg"
+        >
+          <div className="space-y-6">
+            <div>
+              <label
+                htmlFor="appName"
+                className="block text-sm font-medium text-gray-700 mb-1"
+              >
+                Application Name
+              </label>
+              <input
+                type="text"
+                id="appName"
+                value={newApp.name}
+                onChange={(e) => setNewApp({ ...newApp, name: e.target.value })}
+                className={inputStyles}
+                required
+                placeholder="Enter application name"
+              />
+            </div>
+
+            <div>
+              <label
+                htmlFor="description"
+                className="block text-sm font-medium text-gray-700 mb-1"
+              >
+                Description
+              </label>
+              <textarea
+                id="description"
+                value={newApp.description}
+                onChange={(e) =>
+                  setNewApp({ ...newApp, description: e.target.value })
+                }
+                rows={3}
+                className={textareaStyles}
+                placeholder="Enter application description"
+              />
+            </div>
+
+            <div>
+              <label
+                htmlFor="teamId"
+                className="block text-sm font-medium text-gray-700 mb-1"
+              >
+                Team
+              </label>
+              <select
+                id="teamId"
+                value={newApp.teamId}
+                onChange={(e) =>
+                  setNewApp({ ...newApp, teamId: e.target.value })
+                }
+                className={selectStyles}
+                required
+              >
+                <option value="">Select a team</option>
+                {teams?.map((team) => (
+                  <option key={team.id} value={team.id}>
+                    {team.name} ({team.organization.name})
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Domains
+              </label>
+              <div className="mt-1 flex space-x-2">
+                <input
+                  type="text"
+                  value={newDomain}
+                  onChange={(e) => setNewDomain(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      e.preventDefault();
+                      handleAddDomain();
+                    }
+                  }}
+                  placeholder="example.com"
+                  className={inputStyles}
+                />
+                <button
+                  type="button"
+                  onClick={handleAddDomain}
+                  className="cursor-pointer px-6 py-2.5 border border-transparent rounded-lg text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 transition-colors"
+                >
+                  Add
+                </button>
+              </div>
+              <div className="mt-3 flex flex-wrap gap-2">
+                {newApp.domains.map((domain) => (
+                  <span
+                    key={domain}
+                    className="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-100 text-blue-800"
+                  >
+                    {domain}
+                    <button
+                      type="button"
+                      onClick={() => handleRemoveDomain(domain)}
+                      className="ml-2 inline-flex text-blue-600 hover:text-blue-800 cursor-pointer"
+                    >
+                      ×
+                    </button>
+                  </span>
+                ))}
+              </div>
+            </div>
+
+            <div className="flex justify-end space-x-3 pt-2">
+              <button
+                type="button"
+                onClick={() => setShowCreateForm(false)}
+                className="cursor-pointer px-6 py-2.5 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
+                disabled={createAppMutation.isLoading}
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="cursor-pointer px-6 py-2.5 border border-transparent rounded-lg text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors inline-flex items-center space-x-2"
+                disabled={createAppMutation.isLoading}
+              >
+                {createAppMutation.isLoading ? (
+                  <>
+                    <svg
+                      className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                    >
+                      <circle
+                        className="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        strokeWidth="4"
+                      ></circle>
+                      <path
+                        className="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      ></path>
+                    </svg>
+                    <span>Creating...</span>
+                  </>
+                ) : (
+                  "Create Application"
+                )}
+              </button>
+            </div>
+          </div>
+        </form>
+      )}
+
+      <div className="space-y-4">
+        {applications?.length === 0 ? (
+          <div className="text-center py-6 text-gray-500">
+            No applications created yet. Create your first application to get
+            started.
+          </div>
+        ) : (
+          applications?.map((app) => (
+            <div
+              key={app.id}
+              className="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:bg-gray-50"
+            >
+              <div>
+                <h3 className="text-lg font-medium text-gray-900">
+                  {app.name}
+                </h3>
+                <p className="text-sm text-gray-500">Team: {app.team.name}</p>
+                {app.description && (
+                  <p className="text-sm text-gray-500 mt-1">
+                    {app.description}
+                  </p>
+                )}
+              </div>
+              <button
+                onClick={() => router.push(`/dashboard/applications/${app.id}`)}
+                className="text-blue-600 hover:text-blue-800 cursor-pointer"
+              >
+                Manage →
+              </button>
+            </div>
+          ))
+        )}
+      </div>
     </div>
-  )
+  );
 }
-
diff --git a/app/dashboard/settings/page.tsx b/app/dashboard/settings/page.tsx
new file mode 100644
index 0000000..70bb3da
--- /dev/null
+++ b/app/dashboard/settings/page.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { ProtectedApiInteraction } from "@/client/components/ProtectedApiInteraction";
+import { useAuth } from "@/client/hooks/useAuth";
+import { supabase } from "@/client/utils/supabase/supabase-client-client";
+
+export default function SettingsPage() {
+  const { user } = useAuth();
+
+  const handleRefresh = async () => {
+    await supabase.auth.refreshSession();
+  };
+
+  if (!user) return null;
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="bg-white shadow rounded-lg p-6 mb-8">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-4">
+              <div className="bg-blue-100 rounded-full p-3">
+                <svg
+                  className="w-6 h-6 text-blue-600"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+                  />
+                </svg>
+              </div>
+              <div>
+                <h2 className="text-lg font-medium text-gray-900">
+                  User Profile
+                </h2>
+                <p className="text-sm text-gray-500">ID: {user.id}</p>
+                {user.email && (
+                  <p className="text-sm text-gray-500">Email: {user.email}</p>
+                )}
+              </div>
+            </div>
+            <button
+              onClick={handleRefresh}
+              className="cursor-pointer inline-flex items-center px-3 py-1.5 border border-gray-400 text-sm font-medium rounded-md text-gray-200 bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
+            >
+              <svg
+                className="w-4 h-4 mr-2"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                />
+              </svg>
+              Refresh Session
+            </button>
+          </div>
+        </div>
+
+        <div className="bg-white shadow rounded-lg p-6">
+          <ProtectedApiInteraction />
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/app/dashboard/teams/[id]/page.tsx b/app/dashboard/teams/[id]/page.tsx
new file mode 100644
index 0000000..cac1b35
--- /dev/null
+++ b/app/dashboard/teams/[id]/page.tsx
@@ -0,0 +1,218 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { trpc } from "@/client/utils/trpc/trpc-client";
+import { toast } from "sonner";
+import {
+  LoadingSpinner,
+  LoadingPage,
+} from "@/client/components/LoadingSpinner";
+import { Modal } from "@/client/components/Modal";
+import { PageHeader } from "@/client/components/PageHeader";
+
+const inputStyles =
+  "mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-base py-2.5 px-3";
+
+export default function TeamDetailsPage({
+  params,
+}: {
+  params: { id: string };
+}) {
+  const router = useRouter();
+  const utils = trpc.useUtils();
+  const { data: team, isLoading } = trpc.getTeam.useQuery({ id: params.id });
+  const [isEditing, setIsEditing] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [editForm, setEditForm] = useState({
+    name: "",
+  });
+
+  const updateTeamMutation = trpc.updateTeam.useMutation({
+    onSuccess: () => {
+      toast.success("Team updated successfully");
+      setIsEditing(false);
+      utils.getTeam.invalidate({ id: params.id });
+    },
+    onError: (error) => {
+      toast.error(error.message || "Failed to update team");
+    },
+  });
+
+  const deleteTeamMutation = trpc.deleteTeam.useMutation({
+    onSuccess: () => {
+      toast.success("Team deleted successfully");
+      router.push("/dashboard?tab=teams");
+      utils.listTeams.invalidate();
+    },
+    onError: (error) => {
+      toast.error(error.message || "Failed to delete team");
+    },
+  });
+
+  if (isLoading) {
+    return <LoadingPage />;
+  }
+
+  if (!team) {
+    return (
+      <div className="min-h-screen bg-gray-50">
+        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 mt-8">
+          <PageHeader title="Team not found" backUrl="/dashboard?tab=teams" />
+        </div>
+      </div>
+    );
+  }
+
+  const handleEdit = () => {
+    setEditForm({ name: team.name });
+    setIsEditing(true);
+  };
+
+  const handleUpdate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await updateTeamMutation.mutateAsync({
+      id: team.id,
+      name: editForm.name,
+    });
+  };
+
+  const handleDelete = async () => {
+    await deleteTeamMutation.mutateAsync({ id: team.id });
+  };
+
+  const headerActions = (
+    <>
+      <button
+        onClick={handleEdit}
+        className="cursor-pointer px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
+      >
+        Edit
+      </button>
+      <button
+        onClick={() => setShowDeleteConfirm(true)}
+        className="cursor-pointer px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-red-600 hover:bg-red-700"
+      >
+        Delete
+      </button>
+    </>
+  );
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 mt-8">
+        <PageHeader
+          title={team.name}
+          subtitle={`Organization: ${team.organization.name}`}
+          actions={headerActions}
+          backUrl="/dashboard?tab=teams"
+        />
+      </div>
+
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="bg-white shadow rounded-lg">
+          <div className="px-6 py-4">
+            {/* Team Stats */}
+            <div className="grid grid-cols-2 gap-4 mb-6">
+              <div className="p-4 bg-gray-50 rounded-lg">
+                <p className="text-sm text-gray-500">Members</p>
+                <p className="text-2xl font-semibold text-gray-900">
+                  {team._count.memberships}
+                </p>
+              </div>
+              <div className="p-4 bg-gray-50 rounded-lg">
+                <p className="text-sm text-gray-500">Applications</p>
+                <p className="text-2xl font-semibold text-gray-900">
+                  {team._count.applications}
+                </p>
+              </div>
+            </div>
+
+            {/* Edit Form */}
+            {isEditing && (
+              <form onSubmit={handleUpdate} className="space-y-4">
+                <div>
+                  <label
+                    htmlFor="name"
+                    className="block text-sm font-medium text-gray-700"
+                  >
+                    Team Name
+                  </label>
+                  <input
+                    type="text"
+                    id="name"
+                    value={editForm.name}
+                    onChange={(e) =>
+                      setEditForm({ ...editForm, name: e.target.value })
+                    }
+                    className={inputStyles}
+                    required
+                  />
+                </div>
+                <div className="flex justify-end space-x-3">
+                  <button
+                    type="button"
+                    onClick={() => setIsEditing(false)}
+                    className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 cursor-pointer"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    className="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 cursor-pointer disabled:opacity-75 disabled:cursor-not-allowed inline-flex items-center space-x-2"
+                    disabled={updateTeamMutation.isLoading}
+                  >
+                    {updateTeamMutation.isLoading ? (
+                      <>
+                        <LoadingSpinner />
+                        <span>Saving...</span>
+                      </>
+                    ) : (
+                      "Save Changes"
+                    )}
+                  </button>
+                </div>
+              </form>
+            )}
+
+            {/* Delete Confirmation Modal */}
+            <Modal
+              isOpen={showDeleteConfirm}
+              onClose={() => setShowDeleteConfirm(false)}
+              title="Delete Team"
+            >
+              <div>
+                <p className="text-sm text-gray-500">
+                  Are you sure you want to delete this team? This action cannot
+                  be undone.
+                </p>
+                <div className="mt-4 flex justify-end space-x-3">
+                  <button
+                    onClick={() => setShowDeleteConfirm(false)}
+                    className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 cursor-pointer"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    onClick={handleDelete}
+                    className="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-red-600 hover:bg-red-700 cursor-pointer disabled:opacity-75 disabled:cursor-not-allowed inline-flex items-center space-x-2"
+                    disabled={deleteTeamMutation.isLoading}
+                  >
+                    {deleteTeamMutation.isLoading ? (
+                      <>
+                        <LoadingSpinner />
+                        <span>Deleting...</span>
+                      </>
+                    ) : (
+                      "Delete"
+                    )}
+                  </button>
+                </div>
+              </div>
+            </Modal>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/favicon.ico b/app/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/app/favicon.ico and /dev/null differ
diff --git a/app/globals.css b/app/globals.css
index ce8bf91..f3f7c18 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,3 +1,22 @@
-body {
-  font-family: Arial, Helvetica, sans-serif;
-}
\ No newline at end of file
+@import "tailwindcss";
+
+html {
+  scrollbar-gutter: stable;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #666;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 7e8db0b..da1a2f9 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,14 +1,28 @@
-"use client"
+import "./globals.css";
+import { Metadata } from "next";
+import AuthProvider from "@/client/components/AuthProvider";
+import AuthGuard from "@/client/components/AuthGuard";
 
-import { trpc } from "@/client/utils/trpc/trpc-client"
+export const metadata: Metadata = {
+  title: "Wander Embedded",
+  description: "Set up teams and apps for your embedded wallet",
+  icons: {
+    icon: "favicon.png",
+  },
+};
 
-function RootLayout({ children }: { children: React.ReactNode }) {
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body>
+        <AuthProvider>
+          <AuthGuard>{children}</AuthGuard>
+        </AuthProvider>
+      </body>
     </html>
-  )
+  );
 }
-
-export default trpc.withTRPC(RootLayout)
-
diff --git a/app/page.tsx b/app/page.tsx
index 3fce276..221a702 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,58 +1,265 @@
-"use client"
+"use client";
 
-import { useEffect, useState } from "react"
-import { useRouter } from "next/navigation"
-import { trpc } from "@/client/utils/trpc/trpc-client"
-import { useAuth } from "@/client/hooks/useAuth"
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { trpc } from "@/client/utils/trpc/trpc-client";
+import { useAuth } from "@/client/hooks/useAuth";
+import { AuthHeader } from "@/client/components/AuthHeader";
+import { FcGoogle } from "react-icons/fc";
+import { FaFacebook, FaApple, FaTwitter } from "react-icons/fa";
+import { MdEmail, MdArrowBack, MdExpandMore } from "react-icons/md";
+
+type AuthProvider = "GOOGLE" | "FACEBOOK" | "X" | "APPLE" | "EMAIL_N_PASSWORD";
+
+const initialProviders = [
+  {
+    id: "GOOGLE" as AuthProvider,
+    name: "Google",
+    icon: <FcGoogle className="w-5 h-5" />,
+  },
+];
+
+const additionalProviders = [
+  {
+    id: "FACEBOOK" as AuthProvider,
+    name: "Facebook",
+    icon: <FaFacebook className="w-5 h-5 text-[#1877F2]" />,
+  },
+  {
+    id: "X" as AuthProvider,
+    name: "X",
+    icon: <FaTwitter className="w-5 h-5" />,
+  },
+  {
+    id: "APPLE" as AuthProvider,
+    name: "Apple",
+    icon: <FaApple className="w-5 h-5" />,
+  },
+];
+
+const inputStyles =
+  "mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-base py-2.5 px-3 h-[42px]";
 
 export default function Login() {
   const router = useRouter();
   const { user, isLoading: isAuthLoading } = useAuth();
   const loginMutation = trpc.authenticate.useMutation();
   const [isLoading, setIsLoading] = useState(false);
+  const [showEmailForm, setShowEmailForm] = useState(false);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [showAllProviders, setShowAllProviders] = useState(false);
 
-  const handleGoogleSignIn = async () => {
+  const handleProviderSignIn = async (provider: AuthProvider) => {
     try {
       setIsLoading(true);
+      const { url } = await loginMutation.mutateAsync({
+        authProviderType: provider,
+      });
+      if (url) window.location.href = url;
+      else console.error("No URL returned from authenticate");
+    } catch (error) {
+      console.error(`${provider} sign-in failed:`, error);
+      setIsLoading(false);
+    }
+  };
 
-      const { url } = await loginMutation.mutateAsync({ authProviderType: "GOOGLE" });
-
-      if (url) {
-        // Redirect to Google's OAuth page
-        window.location.href = url
-      } else {
-        console.error("No URL returned from authenticate")
-      }
+  const handleEmailSignIn = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      setIsLoading(true);
+      // await loginMutation.mutateAsync({
+      //   authProviderType: "EMAIL_N_PASSWORD",
+      //   email,
+      //   password,
+      // });
     } catch (error) {
-      console.error("Google sign-in failed:", error)
+      console.error("Email sign-in failed:", error);
       setIsLoading(false);
     }
-  }
+  };
 
   useEffect(() => {
     if (user) {
-      router.push("/dashboard")
+      router.push("/dashboard");
     }
-  }, [user, router])
+  }, [user, router]);
 
-
-  if (isAuthLoading || isLoading || user) return <div>Authenticating...</div>
+  if (isAuthLoading || isLoading || user) {
+    return (
+      <>
+        <AuthHeader />
+        <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-gray-50 to-white">
+          <div className="p-8 bg-white rounded-lg shadow-md">
+            <div className="flex flex-col items-center space-y-4">
+              <div className="w-8 h-8 border-t-2 border-b-2 border-blue-500 rounded-full animate-spin"></div>
+              <p className="text-gray-600">Authenticating...</p>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
-      <h1 className="text-4xl font-bold mb-8">Welcome to Our App</h1>
+    <>
+      <AuthHeader />
+      <div className="flex min-h-screen bg-gradient-to-b from-gray-50 to-white pt-8">
+        <div className="flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8">
+          <div className="w-full max-w-md">
+            <div className="bg-white rounded-xl shadow-xl p-8">
+              <div className="text-center">
+                <h1 className="text-2xl font-bold text-gray-900 mb-2">
+                  Welcome to Wander Embedded
+                </h1>
+                <p className="text-gray-600 mb-8">
+                  Set up teams and apps for your embedded wallet
+                </p>
+              </div>
 
-      <button
-        onClick={handleGoogleSignIn}
-        disabled={loginMutation.isLoading}
-        className="bg-white text-gray-700 font-semibold py-2 px-4 border border-gray-300 rounded shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-      >
-        {loginMutation.isLoading ? "Loading..." : "Sign in with Google"}
-      </button>
+              <div className="space-y-4">
+                {!showEmailForm ? (
+                  <>
+                    {initialProviders.map((provider) => (
+                      <button
+                        key={provider.id}
+                        onClick={() => handleProviderSignIn(provider.id)}
+                        disabled={loginMutation.isLoading}
+                        className="cursor-pointer w-full flex items-center justify-center space-x-3 bg-white text-gray-700 font-medium py-3 px-4 border border-gray-300 rounded-lg shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 h-12"
+                      >
+                        {provider.icon}
+                        <span>Continue with {provider.name}</span>
+                      </button>
+                    ))}
 
-      { loginMutation.error ? (<p>{ loginMutation.error.message }</p>) : null }
+                    {!showAllProviders ? (
+                      <button
+                        onClick={() => setShowAllProviders(true)}
+                        className="cursor-pointer w-full flex items-center justify-center space-x-2 text-gray-600 hover:text-gray-800 py-2 h-10"
+                      >
+                        <span>More options</span>
+                        <MdExpandMore className="w-5 h-5" />
+                      </button>
+                    ) : (
+                      <>
+                        {additionalProviders.map((provider) => (
+                          <button
+                            key={provider.id}
+                            onClick={() => handleProviderSignIn(provider.id)}
+                            disabled={loginMutation.isLoading}
+                            className="cursor-pointer w-full flex items-center justify-center space-x-3 bg-white text-gray-700 font-medium py-3 px-4 border border-gray-300 rounded-lg shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 h-12"
+                          >
+                            {provider.icon}
+                            <span>Continue with {provider.name}</span>
+                          </button>
+                        ))}
+                      </>
+                    )}
 
-    </div>
-  )
-}
+                    <div className="relative my-6">
+                      <div className="absolute inset-0 flex items-center">
+                        <div className="w-full border-t border-gray-300" />
+                      </div>
+                      <div className="relative flex justify-center text-sm">
+                        <span className="px-2 bg-white text-gray-500">Or</span>
+                      </div>
+                    </div>
+
+                    <button
+                      onClick={() => setShowEmailForm(true)}
+                      className="cursor-pointer w-full flex items-center justify-center space-x-3 bg-gray-900 text-white font-medium py-3 px-4 rounded-lg hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-all duration-200 h-12"
+                    >
+                      <MdEmail className="w-5 h-5" />
+                      <span>Continue with Email</span>
+                    </button>
+                  </>
+                ) : (
+                  <form onSubmit={handleEmailSignIn} className="space-y-4">
+                    <div>
+                      <label
+                        htmlFor="email"
+                        className="block text-sm font-medium text-gray-700"
+                      >
+                        Email
+                      </label>
+                      <input
+                        type="email"
+                        id="email"
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        className={inputStyles}
+                        placeholder="you@example.com"
+                        required
+                      />
+                    </div>
+                    <div>
+                      <label
+                        htmlFor="password"
+                        className="block text-sm font-medium text-gray-700"
+                      >
+                        Password
+                      </label>
+                      <input
+                        type="password"
+                        id="password"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        className={inputStyles}
+                        placeholder="••••••••"
+                        required
+                      />
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <button
+                        type="button"
+                        onClick={() => setShowEmailForm(false)}
+                        className="cursor-pointer text-sm text-gray-600 hover:text-gray-800 flex items-center justify-center space-x-2 h-10"
+                      >
+                        <MdArrowBack className="w-4 h-4" />
+                        <span>Back to all options</span>
+                      </button>
+                      <button
+                        type="submit"
+                        disabled={loginMutation.isLoading}
+                        className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 h-10"
+                      >
+                        Sign In
+                      </button>
+                    </div>
+                  </form>
+                )}
 
+                {loginMutation.error && (
+                  <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
+                    <p className="text-sm text-red-600">
+                      {loginMutation.error.message}
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className="mt-6 text-center">
+              <p className="text-xs text-gray-500">
+                By continuing, you agree to our{" "}
+                <a
+                  href="#"
+                  className="text-blue-600 hover:text-blue-800 underline"
+                >
+                  Terms of Service
+                </a>{" "}
+                and{" "}
+                <a
+                  href="#"
+                  className="text-blue-600 hover:text-blue-800 underline"
+                >
+                  Privacy Policy
+                </a>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/client/components/AuthGuard.tsx b/client/components/AuthGuard.tsx
new file mode 100644
index 0000000..3516d29
--- /dev/null
+++ b/client/components/AuthGuard.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { useState } from "react";
+import { useAuth } from "../hooks/useAuth";
+import { supabase } from "../utils/supabase/supabase-client-client";
+import { trpc } from "../utils/trpc/trpc-client";
+import Header from "./Header";
+
+export default function AuthGuard({ children }: { children: React.ReactNode }) {
+  const { user, isLoading: isAuthLoading } = useAuth();
+  const logoutMutation = trpc.logout.useMutation();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleLogout = async () => {
+    try {
+      setIsLoading(true);
+      await logoutMutation.mutateAsync();
+      await supabase.auth.signOut();
+      window.location.href = "/";
+    } catch (error) {
+      console.error("Logout failed:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isAuthLoading) {
+    return <LoadingScreen message="Loading..." />;
+  }
+
+  if (isLoading) {
+    return <LoadingScreen message="Signing out..." />;
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {user && <Header user={user} onLogout={handleLogout} />}
+      {children}
+    </div>
+  );
+}
+
+function LoadingScreen({ message }: { message: string }) {
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-50">
+      <div className="p-8 bg-white rounded-lg shadow-md">
+        <div className="flex flex-col items-center space-y-4">
+          <div className="w-8 h-8 border-t-2 border-b-2 border-blue-500 rounded-full animate-spin"></div>
+          <p className="text-gray-600">{message}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/components/AuthHeader.tsx b/client/components/AuthHeader.tsx
new file mode 100644
index 0000000..ead8209
--- /dev/null
+++ b/client/components/AuthHeader.tsx
@@ -0,0 +1,28 @@
+import Image from "next/image";
+
+export function AuthHeader() {
+  return (
+    <header className="fixed top-0 left-0 right-0 bg-white shadow-sm z-10">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          <div className="flex items-center gap-2">
+            <Image src="/icon.png" alt="Wander Logo" width={40} height={40} />
+            <span className="text-xl font-bold text-gray-900">
+              Wander Embedded
+            </span>
+          </div>
+          <div>
+            <a
+              href="https://wander.app"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-gray-500 font-bold hover:text-gray-700"
+            >
+              Docs
+            </a>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/client/components/AuthProvider.tsx b/client/components/AuthProvider.tsx
new file mode 100644
index 0000000..b646423
--- /dev/null
+++ b/client/components/AuthProvider.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { setAuthToken, trpc } from "@/client/utils/trpc/trpc-client";
+import { User } from "@supabase/supabase-js";
+import { supabase } from "@/client/utils/supabase/supabase-client-client";
+import { useRouter, usePathname } from "next/navigation";
+import { AuthContext, AuthContextType } from "../hooks/useAuth";
+import { Toaster } from "sonner";
+
+type AuthProviderProps = {
+  children: React.ReactNode;
+};
+
+const AuthProvider = ({ children }: AuthProviderProps) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [token, setToken] = useState<string | null>(null);
+  const router = useRouter();
+  const pathname = usePathname();
+
+  useEffect(() => {
+    const checkSession = async () => {
+      const {
+        data: { session },
+      } = await supabase.auth.getSession();
+
+      const accessToken = session?.access_token ?? null;
+
+      setToken(accessToken);
+      setAuthToken(accessToken);
+      setIsLoading(false);
+
+      if (!session && pathname !== "/") {
+        router.replace("/");
+      }
+    };
+
+    checkSession();
+
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange((_event, session) => {
+      const accessToken = session?.access_token ?? null;
+
+      setToken(accessToken);
+      setAuthToken(accessToken);
+      setIsLoading(false);
+
+      if (!session && pathname !== "/") {
+        router.replace("/");
+      }
+    });
+
+    return () => subscription.unsubscribe();
+  }, [router, pathname]);
+
+  const {
+    data,
+    isLoading: isUserLoading,
+    error: userError,
+  } = trpc.getUser.useQuery(undefined, {
+    enabled: !!token,
+    retry: false,
+  });
+
+  const user: User | null = data?.user || null;
+
+  useEffect(() => {
+    if (!isLoading && !user && pathname !== "/") {
+      router.replace("/");
+    }
+  }, [isLoading, user, router, pathname]);
+
+  const value = token
+    ? {
+        token,
+        user,
+        isLoading: isLoading || isUserLoading,
+        error: userError,
+      }
+    : {
+        token: null,
+        user: null,
+        isLoading,
+        error: null,
+      };
+
+  return (
+    <AuthContext.Provider value={value as AuthContextType}>
+      <Toaster position="top-right" richColors />
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export default trpc.withTRPC(AuthProvider);
diff --git a/client/components/CopyButton.tsx b/client/components/CopyButton.tsx
new file mode 100644
index 0000000..c43de01
--- /dev/null
+++ b/client/components/CopyButton.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+
+export function CopyButton({ text, label }: { text: string; label?: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      toast.success("Copied to clipboard!");
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      toast.error("Failed to copy to clipboard");
+    }
+  };
+
+  return (
+    <div className="group relative inline-flex items-center gap-1 rounded-md bg-gray-50 px-3 py-2 hover:bg-gray-100">
+      <span className="text-sm text-gray-600">{label || text}</span>
+      <button
+        onClick={handleCopy}
+        className="ml-2 p-1 text-gray-500 hover:text-gray-700 cursor-pointer"
+        title="Copy to clipboard"
+      >
+        {copied ? (
+          <svg
+            className="h-4 w-4 text-green-500"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M5 13l4 4L19 7"
+            />
+          </svg>
+        ) : (
+          <svg
+            className="h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+            />
+          </svg>
+        )}
+      </button>
+    </div>
+  );
+}
diff --git a/client/components/Header.tsx b/client/components/Header.tsx
new file mode 100644
index 0000000..954f38c
--- /dev/null
+++ b/client/components/Header.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { User } from "@supabase/supabase-js";
+import { useRouter } from "next/navigation";
+import Image from "next/image";
+
+interface HeaderProps {
+  user: User;
+  onLogout: () => void;
+}
+
+export default function Header({ user, onLogout }: HeaderProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const NavLink = ({
+    href,
+    children,
+  }: {
+    href: string;
+    children: React.ReactNode;
+  }) => {
+    const isActive = pathname === href;
+    return (
+      <Link
+        href={href}
+        className={`px-3 py-2 rounded-md text-sm font-medium ${
+          isActive
+            ? "bg-gray-900 text-white"
+            : "text-gray-300 hover:bg-gray-700 hover:text-white"
+        }`}
+      >
+        {children}
+      </Link>
+    );
+  };
+
+  return (
+    <nav className="bg-gray-800">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          <div className="flex items-center gap-2">
+            <Image src="/icon.png" alt="Wander Logo" width={40} height={40} />
+            <div
+              className="flex-shrink-0 cursor-pointer"
+              onClick={() => router.push("/dashboard")}
+            >
+              <span className="text-white font-bold">Wander Embedded</span>
+            </div>
+            <div className="hidden md:block">
+              <div className="ml-10 flex items-baseline space-x-4">
+                <NavLink href="/dashboard">Dashboard</NavLink>
+                <NavLink href="/dashboard/settings">Settings</NavLink>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-center space-x-4">
+            {user.email && (
+              <div className="hidden md:block">
+                <div className="flex items-center">
+                  <span className="text-gray-300 text-sm mr-4">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            )}
+            <button
+              onClick={onLogout}
+              className="cursor-pointer inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-red-500"
+            >
+              <svg
+                className="w-4 h-4 mr-2"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+                />
+              </svg>
+              Sign Out
+            </button>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}
diff --git a/client/components/LoadingSpinner.tsx b/client/components/LoadingSpinner.tsx
new file mode 100644
index 0000000..673ac06
--- /dev/null
+++ b/client/components/LoadingSpinner.tsx
@@ -0,0 +1,43 @@
+export function LoadingSpinner({
+  className = "h-5 w-5",
+}: {
+  className?: string;
+}) {
+  return (
+    <svg
+      className={`animate-spin text-current ${className}`}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      ></circle>
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  );
+}
+
+export function LoadingPage() {
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="bg-white shadow rounded-lg p-8">
+          <div className="flex flex-col items-center justify-center">
+            <LoadingSpinner className="h-8 w-8 text-blue-600" />
+            <p className="mt-2 text-sm text-gray-500">Loading...</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/components/Modal.tsx b/client/components/Modal.tsx
new file mode 100644
index 0000000..76c0158
--- /dev/null
+++ b/client/components/Modal.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { useEffect } from "react";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+}
+
+export function Modal({ isOpen, onClose, title, children }: ModalProps) {
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50">
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 backdrop-blur-sm bg-black/30 transition-opacity"
+        onClick={onClose}
+      />
+
+      {/* Modal */}
+      <div className="fixed inset-0 flex items-center justify-center p-4">
+        <div
+          className="bg-white rounded-lg shadow-xl max-w-sm w-full transform transition-all"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className="px-6 py-4 border-b border-gray-200">
+            <h3 className="text-lg font-medium text-gray-900">{title}</h3>
+          </div>
+          <div className="px-6 py-4">{children}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/components/PageHeader.tsx b/client/components/PageHeader.tsx
new file mode 100644
index 0000000..4f869ba
--- /dev/null
+++ b/client/components/PageHeader.tsx
@@ -0,0 +1,41 @@
+import { MdArrowBack } from "react-icons/md";
+import Link from "next/link";
+
+interface PageHeaderProps {
+  title: string;
+  subtitle?: string;
+  actions?: React.ReactNode;
+  backUrl?: string;
+}
+
+export function PageHeader({
+  title,
+  subtitle,
+  actions,
+  backUrl,
+}: PageHeaderProps) {
+  return (
+    <div className="bg-white shadow">
+      <div className="px-6 py-4 border-b border-gray-200">
+        <div className="flex items-center justify-between">
+          <div>
+            {backUrl && (
+              <Link
+                href={backUrl}
+                className="text-sm text-gray-500 hover:text-gray-700 mb-2 inline-flex items-center gap-1"
+              >
+                <MdArrowBack className="w-4 h-4" />
+                Back
+              </Link>
+            )}
+            <h1 className="text-2xl font-semibold text-gray-900">{title}</h1>
+            {subtitle && (
+              <p className="mt-1 text-sm text-gray-500">{subtitle}</p>
+            )}
+          </div>
+          {actions && <div className="flex space-x-3">{actions}</div>}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/components/ProtectedApiInteraction.tsx b/client/components/ProtectedApiInteraction.tsx
index 70c9bd0..4453195 100644
--- a/client/components/ProtectedApiInteraction.tsx
+++ b/client/components/ProtectedApiInteraction.tsx
@@ -1,34 +1,133 @@
-"use client"
+"use client";
 
-import { getAuthToken, trpc } from "@/client/utils/trpc/trpc-client"
+import { getAuthToken, trpc } from "@/client/utils/trpc/trpc-client";
 import { jwtDecode } from "jwt-decode";
+import { useState } from "react";
 
 export function ProtectedApiInteraction() {
-  const { data, isLoading, error } = trpc.debugSession.useQuery()
+  const { data, isLoading, error, refetch } = trpc.debugSession.useQuery();
+  const [activeTab, setActiveTab] = useState<"jwt" | "user" | "session">("jwt");
 
   if (isLoading) {
-    return <div>Loading...</div>
+    return (
+      <div className="flex justify-center items-center p-8">
+        <div className="w-6 h-6 border-t-2 border-b-2 border-blue-500 rounded-full animate-spin" />
+      </div>
+    );
   }
 
   if (error) {
-    return <div>{ error.message }</div>
+    return (
+      <div className="bg-red-50 border border-red-200 rounded-lg p-4">
+        <div className="flex items-center">
+          <svg
+            className="w-5 h-5 text-red-400 mr-2"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+          <span className="text-red-700">{error.message}</span>
+        </div>
+      </div>
+    );
   }
 
+  const TabButton = ({
+    tab,
+    label,
+  }: {
+    tab: typeof activeTab;
+    label: string;
+  }) => (
+    <button
+      onClick={() => setActiveTab(tab)}
+      className={`cursor-pointer px-4 py-2 text-sm font-medium rounded-md transition-colors duration-200
+        ${
+          activeTab === tab
+            ? "bg-blue-100 text-blue-700"
+            : "text-gray-500 hover:text-gray-700 hover:bg-gray-100"
+        }`}
+    >
+      {label}
+    </button>
+  );
+
+  const renderContent = () => {
+    let content;
+    switch (activeTab) {
+      case "jwt":
+        content = jwtDecode(getAuthToken() || "");
+        break;
+      case "user":
+        content = data?.user;
+        break;
+      case "session":
+        content = data?.session;
+        break;
+    }
+
+    return (
+      <div className="bg-gray-50 rounded-lg p-4 font-mono text-sm overflow-x-auto">
+        <pre className="whitespace-pre-wrap break-words">
+          {JSON.stringify(content, null, 2)}
+        </pre>
+      </div>
+    );
+  };
+
   return (
-    <div className="max-w-md mx-auto mt-10">
-      {data && (
-        <div className="bg-gray-100 p-4 rounded-md">
-          <h3>JWT Token</h3>
-          <pre>{JSON.stringify(jwtDecode(getAuthToken() || ""), null, "  ")}</pre>
+    <div className="space-y-4">
+      <div className="flex justify-between items-center">
+        <div className="flex space-x-2 bg-gray-100 p-1 rounded-md">
+          <TabButton tab="jwt" label="JWT Token" />
+          <TabButton tab="user" label="User Data" />
+          <TabButton tab="session" label="Session Info" />
+        </div>
 
-          <h3>auth.users</h3>
-          <pre>{JSON.stringify(data.user, null, "  ")}</pre>
+        <button
+          onClick={() => refetch()}
+          className="cursor-pointer inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
+        >
+          <svg
+            className="w-4 h-4 mr-1.5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+            />
+          </svg>
+          Refresh
+        </button>
+      </div>
 
-          <h3>Session</h3>
-          <pre>{JSON.stringify(data.session, null, "  ")}</pre>
+      <div className="border border-gray-200 rounded-lg bg-white p-4">
+        <div className="mb-3">
+          <h3 className="text-lg font-medium text-gray-900">
+            {activeTab === "jwt" && "JWT Token Details"}
+            {activeTab === "user" && "User Information"}
+            {activeTab === "session" && "Session Details"}
+          </h3>
+          <p className="text-sm text-gray-500">
+            {activeTab === "jwt" && "Decoded JWT token content"}
+            {activeTab === "user" && "Current user data from auth.users"}
+            {activeTab === "session" && "Active session information"}
+          </p>
         </div>
-      )}
+
+        {renderContent()}
+      </div>
     </div>
-  )
+  );
 }
-
diff --git a/client/hooks/useAuth.ts b/client/hooks/useAuth.ts
index 5503ffd..0d3d319 100644
--- a/client/hooks/useAuth.ts
+++ b/client/hooks/useAuth.ts
@@ -1,65 +1,21 @@
-import { useState, useEffect } from "react"
-import { setAuthToken, trpc } from "@/client/utils/trpc/trpc-client"
-import { User } from "@supabase/supabase-js"
-import { supabase } from "@/client/utils/supabase/supabase-client-client"
-
-export function useAuth() {
-  const [isLoading, setIsLoading] = useState(true)
-  const [token, setToken] = useState<string | null>(null)
-
-  useEffect(() => {
-    const checkSession = async () => {
-      const {
-        data: { session },
-      } = await supabase.auth.getSession();
-
-      console.log("Session init =", session);
-
-      const accessToken = session?.access_token ?? null;
-
-      setToken(accessToken);
-      setAuthToken(accessToken);
-      setIsLoading(false)
-    }
-
-    checkSession()
-
-    const {
-      data: { subscription },
-    } = supabase.auth.onAuthStateChange((_event, session) => {
-      console.log("Session change =", session);
-
-      const accessToken = session?.access_token ?? null;
-
-      setToken(accessToken);
-      setAuthToken(accessToken);
-      setIsLoading(false)
-    });
-
-    return () => subscription.unsubscribe()
-  }, [])
-
-  const {
-    data,
-    isLoading: isUserLoading,
-    error: userError,
-  } = trpc.getUser.useQuery(undefined, {
-    enabled: !!token,
-    retry: false,
-  });
+import { User } from "@supabase/supabase-js";
+import { createContext, useContext } from "react";
+
+export interface AuthContextType {
+  token: string | null;
+  user: User | null;
+  isLoading: boolean;
+  error: Error | null;
+}
 
-  const user: User | null = data?.user || null;
+export const AuthContext = createContext<AuthContextType | undefined>(
+  undefined
+);
 
-  return token ? {
-    token,
-    user,
-    isLoading: isLoading || isUserLoading,
-    error: userError,
-  } : {
-    token: null,
-    user: null,
-    isLoading,
-    error: null,
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error("useAuth must be used within an AuthProvider");
   }
+  return context;
 }
-
diff --git a/client/utils/trpc/trpc-client.ts b/client/utils/trpc/trpc-client.ts
index 74854fb..2e19192 100644
--- a/client/utils/trpc/trpc-client.ts
+++ b/client/utils/trpc/trpc-client.ts
@@ -59,5 +59,5 @@ export const trpc = createTRPCNext<AppRouter>({
       ],
     };
   },
-  ssr: false,
+  ssr: true,
 });
diff --git a/package.json b/package.json
index 4c65107..ed51cf3 100644
--- a/package.json
+++ b/package.json
@@ -30,20 +30,26 @@
     "dotenv": "^16.4.7",
     "jsonwebtoken": "^9.0.2",
     "jwt-decode": "^4.0.0",
+    "nanoid": "^5.1.2",
     "next": "14.2.16",
     "react": "^18",
     "react-dom": "^18",
+    "react-icons": "^5.5.0",
+    "sonner": "^2.0.1",
     "superjson": "^2.2.2",
     "zod": "^3.24.1"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.9",
     "@types/jsonwebtoken": "^9.0.7",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "14.2.16",
+    "postcss": "^8.5.3",
     "prisma": "6.2.1",
+    "tailwindcss": "^4.0.9",
     "ts-node": "^10.9.2",
     "tsup": "^8.3.6",
     "typescript": "^5.7.3"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ee97c51..a658a31 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,6 +44,9 @@ importers:
       jwt-decode:
         specifier: ^4.0.0
         version: 4.0.0
+      nanoid:
+        specifier: ^5.1.2
+        version: 5.1.2
       next:
         specifier: 14.2.16
         version: 14.2.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -53,6 +56,12 @@ importers:
       react-dom:
         specifier: ^18
         version: 18.3.1(react@18.3.1)
+      react-icons:
+        specifier: ^5.5.0
+        version: 5.5.0(react@18.3.1)
+      sonner:
+        specifier: ^2.0.1
+        version: 2.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       superjson:
         specifier: ^2.2.2
         version: 2.2.2
@@ -60,6 +69,9 @@ importers:
         specifier: ^3.24.1
         version: 3.24.2
     devDependencies:
+      '@tailwindcss/postcss':
+        specifier: ^4.0.9
+        version: 4.0.9
       '@types/jsonwebtoken':
         specifier: ^9.0.7
         version: 9.0.9
@@ -78,21 +90,31 @@ importers:
       eslint-config-next:
         specifier: 14.2.16
         version: 14.2.16(eslint@8.57.1)(typescript@5.8.2)
+      postcss:
+        specifier: ^8.5.3
+        version: 8.5.3
       prisma:
         specifier: 6.2.1
         version: 6.2.1
+      tailwindcss:
+        specifier: ^4.0.9
+        version: 4.0.9
       ts-node:
         specifier: ^10.9.2
         version: 10.9.2(@types/node@20.17.23)(typescript@5.8.2)
       tsup:
         specifier: ^8.3.6
-        version: 8.4.0(postcss@8.4.31)(typescript@5.8.2)
+        version: 8.4.0(jiti@2.4.2)(postcss@8.5.3)(typescript@5.8.2)
       typescript:
         specifier: ^5.7.3
         version: 5.8.2
 
 packages:
 
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
   '@cspotcode/source-map-support@0.8.1':
     resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
     engines: {node: '>=12'}
@@ -541,6 +563,82 @@ packages:
   '@swc/helpers@0.5.5':
     resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==}
 
+  '@tailwindcss/node@4.0.9':
+    resolution: {integrity: sha512-tOJvdI7XfJbARYhxX+0RArAhmuDcczTC46DGCEziqxzzbIaPnfYaIyRT31n4u8lROrsO7Q6u/K9bmQHL2uL1bQ==}
+
+  '@tailwindcss/oxide-android-arm64@4.0.9':
+    resolution: {integrity: sha512-YBgy6+2flE/8dbtrdotVInhMVIxnHJPbAwa7U1gX4l2ThUIaPUp18LjB9wEH8wAGMBZUb//SzLtdXXNBHPUl6Q==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.9':
+    resolution: {integrity: sha512-pWdl4J2dIHXALgy2jVkwKBmtEb73kqIfMpYmcgESr7oPQ+lbcQ4+tlPeVXaSAmang+vglAfFpXQCOvs/aGSqlw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.0.9':
+    resolution: {integrity: sha512-4Dq3lKp0/C7vrRSkNPtBGVebEyWt9QPPlQctxJ0H3MDyiQYvzVYf8jKow7h5QkWNe8hbatEqljMj/Y0M+ERYJg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.9':
+    resolution: {integrity: sha512-k7U1RwRODta8x0uealtVt3RoWAWqA+D5FAOsvVGpYoI6ObgmnzqWW6pnVwz70tL8UZ/QXjeMyiICXyjzB6OGtQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.9':
+    resolution: {integrity: sha512-NDDjVweHz2zo4j+oS8y3KwKL5wGCZoXGA9ruJM982uVJLdsF8/1AeKvUwKRlMBpxHt1EdWJSAh8a0Mfhl28GlQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.9':
+    resolution: {integrity: sha512-jk90UZ0jzJl3Dy1BhuFfRZ2KP9wVKMXPjmCtY4U6fF2LvrjP5gWFJj5VHzfzHonJexjrGe1lMzgtjriuZkxagg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.9':
+    resolution: {integrity: sha512-3eMjyTC6HBxh9nRgOHzrc96PYh1/jWOwHZ3Kk0JN0Kl25BJ80Lj9HEvvwVDNTgPg154LdICwuFLuhfgH9DULmg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.9':
+    resolution: {integrity: sha512-v0D8WqI/c3WpWH1kq/HP0J899ATLdGZmENa2/emmNjubT0sWtEke9W9+wXeEoACuGAhF9i3PO5MeyditpDCiWQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.9':
+    resolution: {integrity: sha512-Kvp0TCkfeXyeehqLJr7otsc4hd/BUPfcIGrQiwsTVCfaMfjQZCG7DjI+9/QqPZha8YapLA9UoIcUILRYO7NE1Q==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.9':
+    resolution: {integrity: sha512-m3+60T/7YvWekajNq/eexjhV8z10rswcz4BC9bioJ7YaN+7K8W2AmLmG0B79H14m6UHE571qB0XsPus4n0QVgQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.9':
+    resolution: {integrity: sha512-dpc05mSlqkwVNOUjGu/ZXd5U1XNch1kHFJ4/cHkZFvaW1RzbHmRt24gvM8/HC6IirMxNarzVw4IXVtvrOoZtxA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.0.9':
+    resolution: {integrity: sha512-eLizHmXFqHswJONwfqi/WZjtmWZpIalpvMlNhTM99/bkHtUs6IqgI1XQ0/W5eO2HiRQcIlXUogI2ycvKhVLNcA==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/postcss@4.0.9':
+    resolution: {integrity: sha512-BT/E+pdMqulavEAVM5NCpxmGEwHiLDPpkmg/c/X25ZBW+izTe+aZ+v1gf/HXTrihRoCxrUp5U4YyHsBTzspQKQ==}
+
   '@tanstack/query-core@4.36.1':
     resolution: {integrity: sha512-DJSilV5+ytBP1FbFcEJovv4rnnm/CokuVvrBEtW/Va9DvuJ3HksbXUJEpI0aV1KtuL4ZoO9AVE6PyNLzF7tLeA==}
 
@@ -936,6 +1034,11 @@ packages:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
 
+  detect-libc@1.0.3:
+    resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+
   diff@4.0.2:
     resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
     engines: {node: '>=0.3.1'}
@@ -1426,6 +1529,10 @@ packages:
   jackspeak@3.4.3:
     resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
 
+  jiti@2.4.2:
+    resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
+    hasBin: true
+
   joycon@3.1.1:
     resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==}
     engines: {node: '>=10'}
@@ -1482,6 +1589,70 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
+  lightningcss-darwin-arm64@1.29.1:
+    resolution: {integrity: sha512-HtR5XJ5A0lvCqYAoSv2QdZZyoHNttBpa5EP9aNuzBQeKGfbyH5+UipLWvVzpP4Uml5ej4BYs5I9Lco9u1fECqw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.29.1:
+    resolution: {integrity: sha512-k33G9IzKUpHy/J/3+9MCO4e+PzaFblsgBjSGlpAaFikeBFm8B/CkO3cKU9oI4g+fjS2KlkLM/Bza9K/aw8wsNA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.29.1:
+    resolution: {integrity: sha512-0SUW22fv/8kln2LnIdOCmSuXnxgxVC276W5KLTwoehiO0hxkacBxjHOL5EtHD8BAXg2BvuhsJPmVMasvby3LiQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.29.1:
+    resolution: {integrity: sha512-sD32pFvlR0kDlqsOZmYqH/68SqUMPNj+0pucGxToXZi4XZgZmqeX/NkxNKCPsswAXU3UeYgDSpGhu05eAufjDg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.29.1:
+    resolution: {integrity: sha512-0+vClRIZ6mmJl/dxGuRsE197o1HDEeeRk6nzycSy2GofC2JsY4ifCRnvUWf/CUBQmlrvMzt6SMQNMSEu22csWQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.29.1:
+    resolution: {integrity: sha512-UKMFrG4rL/uHNgelBsDwJcBqVpzNJbzsKkbI3Ja5fg00sgQnHw/VrzUTEc4jhZ+AN2BvQYz/tkHu4vt1kLuJyw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.29.1:
+    resolution: {integrity: sha512-u1S+xdODy/eEtjADqirA774y3jLcm8RPtYztwReEXoZKdzgsHYPl0s5V52Tst+GKzqjebkULT86XMSxejzfISw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.29.1:
+    resolution: {integrity: sha512-L0Tx0DtaNUTzXv0lbGCLB/c/qEADanHbu4QdcNOXLIe1i8i22rZRpbT3gpWYsCh9aSL9zFujY/WmEXIatWvXbw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.29.1:
+    resolution: {integrity: sha512-QoOVnkIEFfbW4xPi+dpdft/zAKmgLgsRHfJalEPYuJDOWf7cLQzYg0DEh8/sn737FaeMJxHZRc1oBreiwZCjog==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.29.1:
+    resolution: {integrity: sha512-NygcbThNBe4JElP+olyTI/doBNGJvLs3bFCRPdvuCcxZCcCZ71B858IHpdm7L1btZex0FvCmM17FK98Y9MRy1Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.29.1:
+    resolution: {integrity: sha512-FmGoeD4S05ewj+AkhTY+D+myDvXI6eL27FjHIjoyUkO/uw7WZD1fBVs0QxeYWa7E17CUHJaYX/RUGISCtcrG4Q==}
+    engines: {node: '>= 12.0.0'}
+
   lilconfig@3.1.3:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
@@ -1574,6 +1745,11 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  nanoid@5.1.2:
+    resolution: {integrity: sha512-b+CiXQCNMUGe0Ri64S9SXFcP9hogjAJ2Rd6GdVxhPLRm7mhGaM7VgOvCAJ1ZshfHbqVDI3uqTI5C8/GaKuLI7g==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
@@ -1713,6 +1889,10 @@ packages:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.5.3:
+    resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
+    engines: {node: ^10 || ^12 || >=14}
+
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -1737,6 +1917,11 @@ packages:
     peerDependencies:
       react: ^18.3.1
 
+  react-icons@5.5.0:
+    resolution: {integrity: sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==}
+    peerDependencies:
+      react: '*'
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -1868,6 +2053,12 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
+  sonner@2.0.1:
+    resolution: {integrity: sha512-FRBphaehZ5tLdLcQ8g2WOIRE+Y7BCfWi5Zyd8bCvBjiW8TxxAyoWZIxS661Yz6TGPqFQ4VLzOF89WEYhfynSFQ==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -1960,6 +2151,9 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  tailwindcss@4.0.9:
+    resolution: {integrity: sha512-12laZu+fv1ONDRoNR9ipTOpUD7RN9essRVkX36sjxuRUInpN7hIiHN4lBd/SIFjbISvnXzp8h/hXzmU8SQQYhw==}
+
   tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
@@ -2163,6 +2357,8 @@ packages:
 
 snapshots:
 
+  '@alloc/quick-lru@5.2.0': {}
+
   '@cspotcode/source-map-support@0.8.1':
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
@@ -2499,6 +2695,68 @@ snapshots:
       '@swc/counter': 0.1.3
       tslib: 2.8.1
 
+  '@tailwindcss/node@4.0.9':
+    dependencies:
+      enhanced-resolve: 5.18.1
+      jiti: 2.4.2
+      tailwindcss: 4.0.9
+
+  '@tailwindcss/oxide-android-arm64@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide@4.0.9':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.0.9
+      '@tailwindcss/oxide-darwin-arm64': 4.0.9
+      '@tailwindcss/oxide-darwin-x64': 4.0.9
+      '@tailwindcss/oxide-freebsd-x64': 4.0.9
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.0.9
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.0.9
+      '@tailwindcss/oxide-linux-arm64-musl': 4.0.9
+      '@tailwindcss/oxide-linux-x64-gnu': 4.0.9
+      '@tailwindcss/oxide-linux-x64-musl': 4.0.9
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.0.9
+      '@tailwindcss/oxide-win32-x64-msvc': 4.0.9
+
+  '@tailwindcss/postcss@4.0.9':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.0.9
+      '@tailwindcss/oxide': 4.0.9
+      lightningcss: 1.29.1
+      postcss: 8.5.3
+      tailwindcss: 4.0.9
+
   '@tanstack/query-core@4.36.1': {}
 
   '@tanstack/react-query@4.36.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
@@ -2920,6 +3178,8 @@ snapshots:
       has-property-descriptors: 1.0.2
       object-keys: 1.1.1
 
+  detect-libc@1.0.3: {}
+
   diff@4.0.2: {}
 
   doctrine@2.1.0:
@@ -3089,8 +3349,8 @@ snapshots:
       '@typescript-eslint/parser': 8.26.0(eslint@8.57.1)(typescript@5.8.2)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.8.3(eslint-plugin-import@2.31.0)(eslint@8.57.1)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.8.3)(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.8.3(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.8.3(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
       eslint-plugin-react: 7.37.4(eslint@8.57.1)
       eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.57.1)
@@ -3109,7 +3369,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.8.3(eslint-plugin-import@2.31.0)(eslint@8.57.1):
+  eslint-import-resolver-typescript@3.8.3(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.0
@@ -3120,22 +3380,22 @@ snapshots:
       stable-hash: 0.0.4
       tinyglobby: 0.2.12
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.8.3)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.8.3(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.8.3)(eslint@8.57.1):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.8.3(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 8.26.0(eslint@8.57.1)(typescript@5.8.2)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.8.3(eslint-plugin-import@2.31.0)(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.8.3(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1))(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.8.3)(eslint@8.57.1):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.8.3(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -3146,7 +3406,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.8.3)(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.8.3(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -3610,6 +3870,8 @@ snapshots:
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
+  jiti@2.4.2: {}
+
   joycon@3.1.1: {}
 
   js-tokens@4.0.0: {}
@@ -3676,6 +3938,51 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  lightningcss-darwin-arm64@1.29.1:
+    optional: true
+
+  lightningcss-darwin-x64@1.29.1:
+    optional: true
+
+  lightningcss-freebsd-x64@1.29.1:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.29.1:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.29.1:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.29.1:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.29.1:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.29.1:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.29.1:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.29.1:
+    optional: true
+
+  lightningcss@1.29.1:
+    dependencies:
+      detect-libc: 1.0.3
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.29.1
+      lightningcss-darwin-x64: 1.29.1
+      lightningcss-freebsd-x64: 1.29.1
+      lightningcss-linux-arm-gnueabihf: 1.29.1
+      lightningcss-linux-arm64-gnu: 1.29.1
+      lightningcss-linux-arm64-musl: 1.29.1
+      lightningcss-linux-x64-gnu: 1.29.1
+      lightningcss-linux-x64-musl: 1.29.1
+      lightningcss-win32-arm64-msvc: 1.29.1
+      lightningcss-win32-x64-msvc: 1.29.1
+
   lilconfig@3.1.3: {}
 
   lines-and-columns@1.2.4: {}
@@ -3745,6 +4052,8 @@ snapshots:
 
   nanoid@3.3.8: {}
 
+  nanoid@5.1.2: {}
+
   natural-compare@1.4.0: {}
 
   next@14.2.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
@@ -3869,11 +4178,12 @@ snapshots:
 
   possible-typed-array-names@1.1.0: {}
 
-  postcss-load-config@6.0.1(postcss@8.4.31):
+  postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.5.3):
     dependencies:
       lilconfig: 3.1.3
     optionalDependencies:
-      postcss: 8.4.31
+      jiti: 2.4.2
+      postcss: 8.5.3
 
   postcss@8.4.31:
     dependencies:
@@ -3881,6 +4191,12 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  postcss@8.5.3:
+    dependencies:
+      nanoid: 3.3.8
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
   prelude-ls@1.2.1: {}
 
   prisma@6.2.1:
@@ -3905,6 +4221,10 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
+  react-icons@5.5.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   react-is@16.13.1: {}
 
   react-ssr-prepass@1.6.0(react@18.3.1):
@@ -4079,6 +4399,11 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
+  sonner@2.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   source-map-js@1.2.1: {}
 
   source-map@0.8.0-beta.0:
@@ -4188,6 +4513,8 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  tailwindcss@4.0.9: {}
+
   tapable@2.2.1: {}
 
   text-table@0.2.0: {}
@@ -4252,7 +4579,7 @@ snapshots:
 
   tslib@2.8.1: {}
 
-  tsup@8.4.0(postcss@8.4.31)(typescript@5.8.2):
+  tsup@8.4.0(jiti@2.4.2)(postcss@8.5.3)(typescript@5.8.2):
     dependencies:
       bundle-require: 5.1.0(esbuild@0.25.0)
       cac: 6.7.14
@@ -4262,7 +4589,7 @@ snapshots:
       esbuild: 0.25.0
       joycon: 3.1.1
       picocolors: 1.1.1
-      postcss-load-config: 6.0.1(postcss@8.4.31)
+      postcss-load-config: 6.0.1(jiti@2.4.2)(postcss@8.5.3)
       resolve-from: 5.0.0
       rollup: 4.34.9
       source-map: 0.8.0-beta.0
@@ -4271,7 +4598,7 @@ snapshots:
       tinyglobby: 0.2.12
       tree-kill: 1.2.2
     optionalDependencies:
-      postcss: 8.4.31
+      postcss: 8.5.3
       typescript: 5.8.2
     transitivePeerDependencies:
       - jiti
diff --git a/postcss.config.mjs b/postcss.config.mjs
new file mode 100644
index 0000000..7059fe9
--- /dev/null
+++ b/postcss.config.mjs
@@ -0,0 +1,6 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+export default config;
diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000..d4b51b6
Binary files /dev/null and b/public/favicon.png differ
diff --git a/public/icon.png b/public/icon.png
new file mode 100644
index 0000000..aa8b1e9
Binary files /dev/null and b/public/icon.png differ
diff --git a/server/routers/_app.ts b/server/routers/_app.ts
index 0d128a2..0b3db00 100644
--- a/server/routers/_app.ts
+++ b/server/routers/_app.ts
@@ -24,11 +24,13 @@ import { rotateAuthShare } from "@/server/routers/work-shares/rotateAuthShare";
 import { registerWalletExport } from "@/server/routers/backup/registerWalletExport";
 import { authenticateRouter } from "@/server/routers/authenticate";
 import { validationRouter } from "./validation";
+import { dashboardRouter } from "./dashboard";
 // import { supabase } from '@/utils/supabaseClient';
 
 export const appRouter = router({
   ...authenticateRouter,
   ...validationRouter,
+  ...dashboardRouter,
 
   // Wallets:
   fetchWallets,
diff --git a/server/routers/dashboard.ts b/server/routers/dashboard.ts
new file mode 100644
index 0000000..22ab46d
--- /dev/null
+++ b/server/routers/dashboard.ts
@@ -0,0 +1,482 @@
+import { protectedProcedure } from "../trpc";
+import { z } from "zod";
+import { TRPCError } from "@trpc/server";
+import { Prisma } from "@prisma/client";
+import { customAlphabet } from "nanoid";
+import { domainValidator } from "@/shared/validators/domains";
+
+// Create a custom nanoid function that uses lowercase letters and numbers
+const generateSlug = customAlphabet("abcdefghijklmnopqrstuvwxyz0123456789", 12);
+
+export const dashboardRouter = {
+  // Teams
+  createTeam: protectedProcedure
+    .input(
+      z.object({
+        name: z.string().min(1).max(100),
+        slug: z
+          .string()
+          .min(1)
+          .max(50)
+          .regex(/^[a-z0-9-]+$/),
+      })
+    )
+    .mutation(async ({ ctx, input }) => {
+      // Find or create default organization for the user
+      let org = await ctx.prisma.organization.findFirst({
+        where: {
+          memberships: {
+            some: {
+              userId: ctx.user.id,
+            },
+          },
+        },
+        select: { id: true },
+      });
+
+      if (!org) {
+        const slug = generateSlug();
+        const orgName =
+          (ctx.user?.email?.split("@")[0] || slug) + "'s Organization";
+
+        org = await ctx.prisma.organization.create({
+          data: {
+            name: orgName,
+            slug: `org-${slug}`,
+          },
+          select: { id: true },
+        });
+      }
+
+      try {
+        return await ctx.prisma.team.create({
+          data: {
+            name: input.name,
+            slug: input.slug,
+            organizationId: org.id,
+            memberships: {
+              create: {
+                userId: ctx.user.id,
+                role: "OWNER",
+                organizationId: org.id,
+              },
+            },
+          },
+          select: {
+            id: true,
+            memberships: true,
+          },
+        });
+      } catch (error) {
+        if (error instanceof Prisma.PrismaClientKnownRequestError) {
+          if (error.code === "P2002") {
+            throw new TRPCError({
+              code: "CONFLICT",
+              message: "Team with this slug already exists in the organization",
+            });
+          }
+        }
+        throw error;
+      }
+    }),
+
+  listTeams: protectedProcedure
+    .input(
+      z
+        .object({
+          organizationId: z.string().uuid().optional(),
+        })
+        .optional()
+    )
+    .query(async ({ ctx, input }) => {
+      return ctx.prisma.team.findMany({
+        where: {
+          organizationId: input?.organizationId,
+          memberships: {
+            some: {
+              userId: ctx.user.id,
+            },
+          },
+        },
+        select: {
+          id: true,
+          name: true,
+          organization: {
+            select: {
+              name: true,
+            },
+          },
+          _count: {
+            select: {
+              memberships: true,
+              applications: true,
+            },
+          },
+        },
+      });
+    }),
+
+  // Applications
+  createApplication: protectedProcedure
+    .input(
+      z.object({
+        name: z.string().min(1).max(100),
+        description: z.string().max(255).optional(),
+        teamId: z.string().uuid(),
+        domains: domainValidator,
+      })
+    )
+    .mutation(async ({ ctx, input }) => {
+      const membership = await ctx.prisma.membership.findFirst({
+        where: {
+          userId: ctx.user.id,
+          teamId: input.teamId,
+          role: {
+            in: ["OWNER", "ADMIN"],
+          },
+        },
+      });
+
+      if (!membership) {
+        throw new TRPCError({
+          code: "FORBIDDEN",
+          message:
+            "You don't have permission to create applications in this team",
+        });
+      }
+
+      return ctx.prisma.application.create({
+        data: {
+          name: input.name,
+          description: input.description,
+          domains: input.domains || [],
+          teamId: input.teamId,
+          settings: {},
+        },
+        select: {
+          id: true,
+          name: true,
+          team: {
+            select: {
+              name: true,
+            },
+          },
+        },
+      });
+    }),
+
+  listApplications: protectedProcedure
+    .input(
+      z
+        .object({
+          teamId: z.string().uuid().optional(),
+        })
+        .optional()
+    )
+    .query(async ({ ctx, input }) => {
+      return ctx.prisma.application.findMany({
+        where: {
+          teamId: input?.teamId,
+          team: {
+            memberships: {
+              some: {
+                userId: ctx.user.id,
+              },
+            },
+          },
+        },
+        select: {
+          id: true,
+          name: true,
+          description: true,
+          clientId: true,
+          team: {
+            select: {
+              name: true,
+            },
+          },
+        },
+      });
+    }),
+
+  // Stats for dashboard
+  getStats: protectedProcedure.query(async ({ ctx }) => {
+    const [teams, applications] = await Promise.all([
+      ctx.prisma.team.count({
+        where: {
+          memberships: {
+            some: {
+              userId: ctx.user.id,
+            },
+          },
+        },
+      }),
+      ctx.prisma.application.count({
+        where: {
+          team: {
+            memberships: {
+              some: {
+                userId: ctx.user.id,
+              },
+            },
+          },
+        },
+      }),
+    ]);
+
+    return {
+      teams,
+      applications,
+    };
+  }),
+
+  getTeam: protectedProcedure
+    .input(z.object({ id: z.string().uuid() }))
+    .query(async ({ ctx, input }) => {
+      const team = await ctx.prisma.team.findFirst({
+        where: {
+          id: input.id,
+          memberships: {
+            some: {
+              userId: ctx.user.id,
+            },
+          },
+        },
+        select: {
+          id: true,
+          name: true,
+          organization: {
+            select: {
+              name: true,
+            },
+          },
+          _count: {
+            select: {
+              memberships: true,
+              applications: true,
+            },
+          },
+        },
+      });
+
+      if (!team) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Team not found",
+        });
+      }
+
+      return team;
+    }),
+
+  updateTeam: protectedProcedure
+    .input(
+      z.object({
+        id: z.string().uuid(),
+        name: z.string().min(1).max(100),
+      })
+    )
+    .mutation(async ({ ctx, input }) => {
+      const team = await ctx.prisma.team.findFirst({
+        where: {
+          id: input.id,
+          memberships: {
+            some: {
+              userId: ctx.user.id,
+              role: {
+                in: ["OWNER", "ADMIN"],
+              },
+            },
+          },
+        },
+      });
+
+      if (!team) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Team not found or you don't have permission to update it",
+        });
+      }
+
+      return ctx.prisma.team.update({
+        where: { id: input.id },
+        data: {
+          name: input.name,
+        },
+      });
+    }),
+
+  deleteTeam: protectedProcedure
+    .input(z.object({ id: z.string().uuid() }))
+    .mutation(async ({ ctx, input }) => {
+      const team = await ctx.prisma.team.findFirst({
+        where: {
+          id: input.id,
+          memberships: {
+            some: {
+              userId: ctx.user.id,
+              role: "OWNER",
+            },
+          },
+        },
+        include: {
+          organization: {
+            select: {
+              name: true,
+              teams: {
+                select: {
+                  id: true,
+                },
+              },
+            },
+          },
+        },
+      });
+
+      if (!team) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Team not found or insufficient permissions",
+        });
+      }
+
+      if (team.organization.teams.length === 1) {
+        throw new TRPCError({
+          code: "FORBIDDEN",
+          message: "Cannot delete the organization's only team",
+        });
+      }
+
+      const otherMemberships = await ctx.prisma.membership.findFirst({
+        where: {
+          userId: ctx.user.id,
+          teamId: {
+            not: input.id,
+          },
+        },
+      });
+
+      if (!otherMemberships) {
+        throw new TRPCError({
+          code: "FORBIDDEN",
+          message: "Cannot delete your only team membership",
+        });
+      }
+
+      return ctx.prisma.team.delete({ where: { id: input.id } });
+    }),
+
+  getApplication: protectedProcedure
+    .input(z.object({ id: z.string().uuid() }))
+    .query(async ({ ctx, input }) => {
+      const application = await ctx.prisma.application.findFirst({
+        where: {
+          id: input.id,
+          team: {
+            memberships: {
+              some: {
+                userId: ctx.user.id,
+              },
+            },
+          },
+        },
+        select: {
+          id: true,
+          name: true,
+          description: true,
+          domains: true,
+          team: {
+            select: {
+              name: true,
+            },
+          },
+          clientId: true,
+        },
+      });
+
+      if (!application) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Application not found",
+        });
+      }
+
+      return application;
+    }),
+
+  updateApplication: protectedProcedure
+    .input(
+      z.object({
+        id: z.string().uuid(),
+        name: z.string().min(1).max(100),
+        description: z.string().max(255).optional(),
+        domains: domainValidator,
+      })
+    )
+    .mutation(async ({ ctx, input }) => {
+      const application = await ctx.prisma.application.findFirst({
+        where: {
+          id: input.id,
+          team: {
+            memberships: {
+              some: {
+                userId: ctx.user.id,
+                role: {
+                  in: ["OWNER", "ADMIN"],
+                },
+              },
+            },
+          },
+        },
+      });
+
+      if (!application) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message:
+            "Application not found or you don't have permission to update it",
+        });
+      }
+
+      return ctx.prisma.application.update({
+        where: { id: input.id },
+        data: {
+          name: input.name,
+          description: input.description,
+          domains: input.domains,
+        },
+      });
+    }),
+
+  deleteApplication: protectedProcedure
+    .input(z.object({ id: z.string().uuid() }))
+    .mutation(async ({ ctx, input }) => {
+      const application = await ctx.prisma.application.findFirst({
+        where: {
+          id: input.id,
+          team: {
+            memberships: {
+              some: {
+                userId: ctx.user.id,
+                role: {
+                  in: ["OWNER", "ADMIN"],
+                },
+              },
+            },
+          },
+        },
+      });
+
+      if (!application) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message:
+            "Application not found or you don't have permission to delete it",
+        });
+      }
+
+      return ctx.prisma.application.delete({
+        where: { id: input.id },
+      });
+    }),
+};
diff --git a/shared/validators/domains.ts b/shared/validators/domains.ts
new file mode 100644
index 0000000..3612682
--- /dev/null
+++ b/shared/validators/domains.ts
@@ -0,0 +1,71 @@
+import { z } from "zod";
+import { TRPCError } from "@trpc/server";
+
+export function getBaseDomain(url: string): string {
+  try {
+    let normalizedUrl = url;
+    if (!url.includes("://")) {
+      normalizedUrl = `http://${url}`;
+    }
+    const urlObj = new URL(normalizedUrl);
+    return urlObj.hostname;
+  } catch {
+    throw new Error(`Invalid domain format: ${url}`);
+  }
+}
+
+export function areDomainsRelated(domain1: string, domain2: string): boolean {
+  try {
+    const base1 = getBaseDomain(domain1);
+    const base2 = getBaseDomain(domain2);
+
+    if (base1 === base2) return true;
+    return base1.endsWith(`.${base2}`) || base2.endsWith(`.${base1}`);
+  } catch {
+    return false;
+  }
+}
+
+export function validateDomains(domains: string[]): {
+  valid: boolean;
+  error?: string;
+} {
+  if (domains.length === 0) return { valid: true };
+
+  try {
+    const firstDomain = domains[0];
+    const isValid = domains.every((domain) =>
+      areDomainsRelated(firstDomain, domain)
+    );
+
+    return {
+      valid: isValid,
+      error: isValid
+        ? undefined
+        : "All domains must be subdomains or ports of the same base domain",
+    };
+  } catch {
+    return {
+      valid: false,
+      error: "Invalid domain format provided",
+    };
+  }
+}
+
+// For backend TRPC validation
+export const domainValidator = z
+  .array(z.string().max(255))
+  .superRefine((domains, ctx) => {
+    const result = validateDomains(domains);
+
+    if (!result.valid) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: result.error!,
+      });
+      throw new TRPCError({
+        code: "BAD_REQUEST",
+        message: result.error!,
+      });
+    }
+  });