diff --git a/src/app/[orgId]/auth/resource/[resourceId]/components/ResourceAuthPortal.tsx b/src/app/[orgId]/auth/resource/[resourceId]/components/ResourceAuthPortal.tsx
index 39311b08..761f0fb1 100644
--- a/src/app/[orgId]/auth/resource/[resourceId]/components/ResourceAuthPortal.tsx
+++ b/src/app/[orgId]/auth/resource/[resourceId]/components/ResourceAuthPortal.tsx
@@ -15,7 +15,6 @@ import {
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import {
     Form,
     FormControl,
@@ -24,7 +23,12 @@ import {
     FormLabel,
     FormMessage,
 } from "@/components/ui/form";
-import { LockIcon, KeyIcon, UserIcon, Binary, Key, User } from "lucide-react";
+import { LockIcon, UserIcon, Binary, Key, User } from "lucide-react";
+import {
+    InputOTP,
+    InputOTPGroup,
+    InputOTPSlot,
+} from "@app/components/ui/input-otp";
 
 const pinSchema = z.object({
     pin: z
@@ -34,12 +38,16 @@ const pinSchema = z.object({
 });
 
 const passwordSchema = z.object({
-    email: z.string().email({ message: "Please enter a valid email address" }),
     password: z
         .string()
         .min(8, { message: "Password must be at least 8 characters long" }),
 });
 
+const userSchema = z.object({
+    email: z.string().email(),
+    password: z.string().min(1),
+});
+
 export default function ResourceAuthPortal() {
     const [activeTab, setActiveTab] = useState("pin");
 
@@ -52,6 +60,13 @@ export default function ResourceAuthPortal() {
 
     const passwordForm = useForm<z.infer<typeof passwordSchema>>({
         resolver: zodResolver(passwordSchema),
+        defaultValues: {
+            password: "",
+        },
+    });
+
+    const userForm = useForm<z.infer<typeof userSchema>>({
+        resolver: zodResolver(userSchema),
         defaultValues: {
             email: "",
             password: "",
@@ -77,9 +92,9 @@ export default function ResourceAuthPortal() {
         <div className="w-full max-w-md mx-auto">
             <Card>
                 <CardHeader>
-                    <CardTitle>Welcome Back</CardTitle>
+                    <CardTitle>Authentication Required</CardTitle>
                     <CardDescription>
-                        Choose your preferred login method
+                        Choose your preferred method
                     </CardDescription>
                 </CardHeader>
                 <CardContent>
@@ -92,7 +107,7 @@ export default function ResourceAuthPortal() {
                                 <Key className="w-4 h-4 mr-1" /> Password
                             </TabsTrigger>
                             <TabsTrigger value="sso">
-                                <User className="w-4 h-4 mr-1" /> SSO
+                                <User className="w-4 h-4 mr-1" /> User
                             </TabsTrigger>
                         </TabsList>
                         <TabsContent value="pin">
@@ -106,20 +121,44 @@ export default function ResourceAuthPortal() {
                                         name="pin"
                                         render={({ field }) => (
                                             <FormItem>
-                                                <FormLabel>Enter PIN</FormLabel>
+                                                <FormLabel>
+                                                    Enter 6-digit PIN
+                                                </FormLabel>
                                                 <FormControl>
-                                                    <Input
-                                                        placeholder="Enter your 6-digit PIN"
-                                                        type="password"
-                                                        {...field}
-                                                    />
+                                                    <div className="flex justify-center">
+                                                        <InputOTP
+                                                            maxLength={6}
+                                                            {...field}
+                                                        >
+                                                            <InputOTPGroup className="flex">
+                                                                <InputOTPSlot
+                                                                    index={0}
+                                                                />
+                                                                <InputOTPSlot
+                                                                    index={1}
+                                                                />
+                                                                <InputOTPSlot
+                                                                    index={2}
+                                                                />
+                                                                <InputOTPSlot
+                                                                    index={3}
+                                                                />
+                                                                <InputOTPSlot
+                                                                    index={4}
+                                                                />
+                                                                <InputOTPSlot
+                                                                    index={5}
+                                                                />
+                                                            </InputOTPGroup>
+                                                        </InputOTP>
+                                                    </div>
                                                 </FormControl>
                                                 <FormMessage />
                                             </FormItem>
                                         )}
                                     />
                                     <Button type="submit" className="w-full">
-                                        <KeyIcon className="w-4 h-4 mr-2" />
+                                        <LockIcon className="w-4 h-4 mr-2" />
                                         Login with PIN
                                     </Button>
                                 </form>
@@ -129,27 +168,10 @@ export default function ResourceAuthPortal() {
                             <Form {...passwordForm}>
                                 <form
                                     onSubmit={passwordForm.handleSubmit(
-                                        onPasswordSubmit
+                                        onPasswordSubmit,
                                     )}
                                     className="space-y-4"
                                 >
-                                    <FormField
-                                        control={passwordForm.control}
-                                        name="email"
-                                        render={({ field }) => (
-                                            <FormItem>
-                                                <FormLabel>Email</FormLabel>
-                                                <FormControl>
-                                                    <Input
-                                                        placeholder="Enter your email"
-                                                        type="email"
-                                                        {...field}
-                                                    />
-                                                </FormControl>
-                                                <FormMessage />
-                                            </FormItem>
-                                        )}
-                                    />
                                     <FormField
                                         control={passwordForm.control}
                                         name="password"
@@ -158,7 +180,7 @@ export default function ResourceAuthPortal() {
                                                 <FormLabel>Password</FormLabel>
                                                 <FormControl>
                                                     <Input
-                                                        placeholder="Enter your password"
+                                                        placeholder="Enter password"
                                                         type="password"
                                                         {...field}
                                                     />
@@ -175,31 +197,73 @@ export default function ResourceAuthPortal() {
                             </Form>
                         </TabsContent>
                         <TabsContent value="sso">
-                            <div className="space-y-4">
-                                <p className="text-sm text-muted-foreground">
-                                    Click the button below to login with your
-                                    organization's SSO provider.
-                                </p>
-                                <Button
-                                    onClick={handleSSOAuth}
-                                    className="w-full"
+                            <Form {...userForm}>
+                                <form
+                                    onSubmit={userForm.handleSubmit(
+                                        (values) => {
+                                            console.log(
+                                                "User authentication",
+                                                values,
+                                            );
+                                            // Implement user authentication logic here
+                                        },
+                                    )}
+                                    className="space-y-4"
                                 >
-                                    <UserIcon className="w-4 h-4 mr-2" />
-                                    Login with SSO
-                                </Button>
-                            </div>
+                                    <FormField
+                                        control={userForm.control}
+                                        name="email"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>Email</FormLabel>
+                                                <FormControl>
+                                                    <Input
+                                                        placeholder="Enter email"
+                                                        type="email"
+                                                        {...field}
+                                                    />
+                                                </FormControl>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                    <FormField
+                                        control={userForm.control}
+                                        name="password"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>Password</FormLabel>
+                                                <FormControl>
+                                                    <Input
+                                                        placeholder="Enter password"
+                                                        type="password"
+                                                        {...field}
+                                                    />
+                                                </FormControl>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                    <Button type="submit" className="w-full">
+                                        <LockIcon className="w-4 h-4 mr-2" />
+                                        Login as User
+                                    </Button>
+                                </form>
+                            </Form>
                         </TabsContent>
                     </Tabs>
                 </CardContent>
-                <CardFooter className="flex justify-center">
+            </Card>
+            {activeTab === "sso" && (
+                <div className="flex justify-center mt-4">
                     <p className="text-sm text-muted-foreground">
                         Don't have an account?{" "}
                         <a href="#" className="underline">
                             Sign up
                         </a>
                     </p>
-                </CardFooter>
-            </Card>
+                </div>
+            )}
         </div>
     );
 }
diff --git a/src/app/[orgId]/settings/access/roles/components/CreateRoleForm.tsx b/src/app/[orgId]/settings/access/roles/components/CreateRoleForm.tsx
index 9659376e..b5188729 100644
--- a/src/app/[orgId]/settings/access/roles/components/CreateRoleForm.tsx
+++ b/src/app/[orgId]/settings/access/roles/components/CreateRoleForm.tsx
@@ -123,7 +123,7 @@ export default function CreateRoleForm({
                         <Form {...form}>
                             <form
                                 onSubmit={form.handleSubmit(onSubmit)}
-                                className="space-y-6"
+                                className="space-y-8:w"
                                 id="create-role-form"
                             >
                                 <FormField
diff --git a/src/app/[orgId]/settings/access/roles/components/DeleteRoleForm.tsx b/src/app/[orgId]/settings/access/roles/components/DeleteRoleForm.tsx
index be0e99f3..a5c6f07b 100644
--- a/src/app/[orgId]/settings/access/roles/components/DeleteRoleForm.tsx
+++ b/src/app/[orgId]/settings/access/roles/components/DeleteRoleForm.tsx
@@ -155,7 +155,7 @@ export default function DeleteRoleForm({
                         </CredenzaDescription>
                     </CredenzaHeader>
                     <CredenzaBody>
-                        <div className="space-y-6">
+                        <div className="space-y-8">
                             <div className="space-y-4">
                                 <p>
                                     You're about to delete the{" "}
@@ -170,7 +170,7 @@ export default function DeleteRoleForm({
                             <Form {...form}>
                                 <form
                                     onSubmit={form.handleSubmit(onSubmit)}
-                                    className="space-y-6"
+                                    className="space-y-8"
                                     id="remove-role-form"
                                 >
                                     <FormField
diff --git a/src/app/[orgId]/settings/access/users/[userId]/access-controls/page.tsx b/src/app/[orgId]/settings/access/users/[userId]/access-controls/page.tsx
index 71c3aac5..bcfc0b44 100644
--- a/src/app/[orgId]/settings/access/users/[userId]/access-controls/page.tsx
+++ b/src/app/[orgId]/settings/access/users/[userId]/access-controls/page.tsx
@@ -110,7 +110,7 @@ export default function AccessControlsPage() {
 
     return (
         <>
-            <div className="space-y-6">
+            <div className="space-y-8">
                 <SettingsSectionTitle
                     title="Access Controls"
                     description="Manage what this user can access and do in the organization"
@@ -120,7 +120,7 @@ export default function AccessControlsPage() {
                 <Form {...form}>
                     <form
                         onSubmit={form.handleSubmit(onSubmit)}
-                        className="space-y-6"
+                        className="space-y-8"
                     >
                         <FormField
                             control={form.control}
diff --git a/src/app/[orgId]/settings/access/users/[userId]/layout.tsx b/src/app/[orgId]/settings/access/users/[userId]/layout.tsx
index b52364b6..5568abd3 100644
--- a/src/app/[orgId]/settings/access/users/[userId]/layout.tsx
+++ b/src/app/[orgId]/settings/access/users/[userId]/layout.tsx
@@ -14,7 +14,6 @@ import {
     BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
 import Link from "next/link";
-import { ArrowLeft } from "lucide-react";
 
 interface UserLayoutProps {
     children: React.ReactNode;
@@ -30,7 +29,7 @@ export default async function UserLayoutProps(props: UserLayoutProps) {
     try {
         const res = await internal.get<AxiosResponse<GetOrgUserResponse>>(
             `/org/${params.orgId}/user/${params.userId}`,
-            await authCookieHeader()
+            await authCookieHeader(),
         );
         user = res.data.data;
     } catch {
@@ -48,15 +47,17 @@ export default async function UserLayoutProps(props: UserLayoutProps) {
         <>
             <OrgUserProvider orgUser={user}>
                 <div className="mb-4">
-                    <Link
-                        href="../../"
-                        className="text-muted-foreground hover:underline"
-                    >
-                        <div className="flex flex-row items-center gap-1">
-                            <ArrowLeft className="w-4 h-4" />{" "}
-                            <span>All Users</span>
-                        </div>
-                    </Link>
+                    <Breadcrumb>
+                        <BreadcrumbList>
+                            <BreadcrumbItem>
+                                <Link href="../../">Users</Link>
+                            </BreadcrumbItem>
+                            <BreadcrumbSeparator />
+                            <BreadcrumbItem>
+                                <BreadcrumbPage>{user.email}</BreadcrumbPage>
+                            </BreadcrumbItem>
+                        </BreadcrumbList>
+                    </Breadcrumb>
                 </div>
 
                 <div className="space-y-0.5 select-none mb-6">
diff --git a/src/app/[orgId]/settings/access/users/components/InviteUserForm.tsx b/src/app/[orgId]/settings/access/users/components/InviteUserForm.tsx
index 2f5a31dd..14969265 100644
--- a/src/app/[orgId]/settings/access/users/components/InviteUserForm.tsx
+++ b/src/app/[orgId]/settings/access/users/components/InviteUserForm.tsx
@@ -171,7 +171,7 @@ export default function InviteUserForm({ open, setOpen }: InviteUserFormProps) {
                         </CredenzaDescription>
                     </CredenzaHeader>
                     <CredenzaBody>
-                        <div className="space-y-6">
+                        <div className="space-y-8">
                             {!inviteLink && (
                                 <Form {...form}>
                                     <form
diff --git a/src/app/[orgId]/settings/components/Header.tsx b/src/app/[orgId]/settings/components/Header.tsx
index 077ef6e8..5a047214 100644
--- a/src/app/[orgId]/settings/components/Header.tsx
+++ b/src/app/[orgId]/settings/components/Header.tsx
@@ -3,6 +3,14 @@
 import api from "@app/api";
 import { Avatar, AvatarFallback } from "@app/components/ui/avatar";
 import { Button } from "@app/components/ui/button";
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from "@app/components/ui/command";
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -12,6 +20,11 @@ import {
     DropdownMenuSeparator,
     DropdownMenuTrigger,
 } from "@app/components/ui/dropdown-menu";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@app/components/ui/popover";
 import {
     Select,
     SelectContent,
@@ -21,10 +34,12 @@ import {
     SelectValue,
 } from "@app/components/ui/select";
 import { useToast } from "@app/hooks/useToast";
-import { formatAxiosError } from "@app/lib/utils";
+import { cn, formatAxiosError } from "@app/lib/utils";
 import { ListOrgsResponse } from "@server/routers/org";
+import { Check, ChevronsUpDown } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
 
 type HeaderProps = {
     name?: string;
@@ -36,6 +51,8 @@ type HeaderProps = {
 export default function Header({ email, orgName, name, orgs }: HeaderProps) {
     const { toast } = useToast();
 
+    const [open, setOpen] = useState(false);
+
     const router = useRouter();
 
     function getInitials() {
@@ -125,7 +142,68 @@ export default function Header({ email, orgName, name, orgs }: HeaderProps) {
                         </div>
                     </div>
 
-                    <Select
+                    <Popover open={open} onOpenChange={setOpen}>
+                        <PopoverTrigger asChild>
+                            <Button
+                                variant="outline"
+                                size="lg"
+                                role="combobox"
+                                aria-expanded={open}
+                                className="w-full md:w-[200px] h-12 px-3 py-4"
+                            >
+                                <div className="flex items-center justify-between w-full">
+                                    <div className="flex flex-col items-start">
+                                        <span className="font-bold text-sm">
+                                            Organization
+                                        </span>
+                                        <span className="text-sm text-muted-foreground">
+                                            {orgName
+                                                ? orgs.find(
+                                                      (org) =>
+                                                          org.name === orgName,
+                                                  )?.name
+                                                : "Select organization..."}
+                                        </span>
+                                    </div>
+                                    <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
+                                </div>
+                            </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className="[100px] md:w-[180px] p-0">
+                            <Command>
+                                <CommandInput placeholder="Search..." />
+                                <CommandEmpty>
+                                    No organization found.
+                                </CommandEmpty>
+                                <CommandGroup>
+                                    <CommandList>
+                                        {orgs.map((org) => (
+                                            <CommandItem
+                                                key={org.orgId}
+                                                onSelect={(currentValue) => {
+                                                    router.push(
+                                                        `/${org.orgId}/settings`,
+                                                    );
+                                                }}
+                                            >
+                                                <Check
+                                                    className={cn(
+                                                        "mr-2 h-4 w-4",
+                                                        orgName === org.name
+                                                            ? "opacity-100"
+                                                            : "opacity-0",
+                                                    )}
+                                                />
+                                                {org.name}
+                                            </CommandItem>
+                                        ))}
+                                    </CommandList>
+                                </CommandGroup>
+                            </Command>
+                        </PopoverContent>
+                    </Popover>
+
+                    {/* <Select
                         defaultValue={orgName}
                         onValueChange={(val) => {
                             router.push(`/${val}/settings`);
@@ -146,7 +224,7 @@ export default function Header({ email, orgName, name, orgs }: HeaderProps) {
                                 ))}
                             </SelectGroup>
                         </SelectContent>
-                    </Select>
+                    </Select> */}
                 </div>
             </div>
         </>
diff --git a/src/app/[orgId]/settings/general/page.tsx b/src/app/[orgId]/settings/general/page.tsx
index ec4fb729..d97e746e 100644
--- a/src/app/[orgId]/settings/general/page.tsx
+++ b/src/app/[orgId]/settings/general/page.tsx
@@ -46,7 +46,7 @@ export default function GeneralPage() {
                 title="Delete organization"
             />
 
-            <div className="space-y-6">
+            <div className="space-y-8">
                 {orgUser.isOwner ? (
                     <Button onClick={() => setIsDeleteModalOpen(true)}>
                         Delete Organization
diff --git a/src/app/[orgId]/settings/layout.tsx b/src/app/[orgId]/settings/layout.tsx
index 812587c2..425cbc80 100644
--- a/src/app/[orgId]/settings/layout.tsx
+++ b/src/app/[orgId]/settings/layout.tsx
@@ -22,22 +22,22 @@ const topNavItems = [
     {
         title: "Sites",
         href: "/{orgId}/settings/sites",
-        icon: <Combine className="h-5 w-5" />,
+        icon: <Combine className="h-4 w-4" />,
     },
     {
         title: "Resources",
         href: "/{orgId}/settings/resources",
-        icon: <Waypoints className="h-5 w-5" />,
+        icon: <Waypoints className="h-4 w-4" />,
     },
     {
         title: "Access",
         href: "/{orgId}/settings/access",
-        icon: <Users className="h-5 w-5" />,
+        icon: <Users className="h-4 w-4" />,
     },
     {
         title: "General",
         href: "/{orgId}/settings/general",
-        icon: <Settings className="h-5 w-5" />,
+        icon: <Settings className="h-4 w-4" />,
     },
 ];
 
diff --git a/src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx b/src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx
index feafb8ab..88c2379f 100644
--- a/src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx
+++ b/src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx
@@ -257,11 +257,11 @@ export default function ResourceAuthenticationPage() {
                 />
             )}
 
-            <div className="space-y-12 lg:max-w-2xl">
-                <section className="space-y-6">
+            <div className="space-y-12">
+                <section className="space-y-8">
                     <SettingsSectionTitle
                         title="Users & Roles"
-                        description="Configure who can visit this resource (only applicable if SSO is used)"
+                        description="Configure which users can access this resource (only applicable if SSO enabled)"
                         size="1xl"
                     />
 
@@ -275,9 +275,7 @@ export default function ResourceAuthenticationPage() {
                             <Label htmlFor="sso-toggle">Allow SSO</Label>
                         </div>
                         <span className="text-muted-foreground text-sm">
-                            Users will be able to access the resource if they're
-                            logged into the dashboard and have access to the
-                            resource. Users will only have to login once for all
+                            Existing users will only have to login once for all
                             resources that have SSO enabled.
                         </span>
                     </div>
@@ -287,7 +285,7 @@ export default function ResourceAuthenticationPage() {
                             onSubmit={usersRolesForm.handleSubmit(
                                 onSubmitUsersRoles,
                             )}
-                            className="space-y-6"
+                            className="space-y-8"
                         >
                             <FormField
                                 control={usersRolesForm.control}
@@ -336,9 +334,9 @@ export default function ResourceAuthenticationPage() {
                                             />
                                         </FormControl>
                                         <FormDescription>
-                                            Users with these roles will be able
-                                            to access this resource. Admins can
-                                            always access this resource.
+                                            These roles will be able to access
+                                            this resource. Admins can always
+                                            access this resource.
                                         </FormDescription>
                                         <FormMessage />
                                     </FormItem>
@@ -414,10 +412,10 @@ export default function ResourceAuthenticationPage() {
 
                 <Separator />
 
-                <section className="space-y-6">
+                <section className="space-y-8">
                     <SettingsSectionTitle
                         title="Authentication Methods"
-                        description="You can also allow users to access the resource via the below methods"
+                        description="You can also anyone to access the resource via the below methods"
                         size="1xl"
                     />
 
diff --git a/src/app/[orgId]/settings/resources/[resourceId]/connectivity/page.tsx b/src/app/[orgId]/settings/resources/[resourceId]/connectivity/page.tsx
index 10da3a47..99e318c1 100644
--- a/src/app/[orgId]/settings/resources/[resourceId]/connectivity/page.tsx
+++ b/src/app/[orgId]/settings/resources/[resourceId]/connectivity/page.tsx
@@ -349,7 +349,7 @@ export default function ReverseProxyTargets(props: {
     return (
         <>
             <div className="space-y-12">
-                <section className="space-y-6 lg:max-w-2xl">
+                <section className="space-y-8">
                     <SettingsSectionTitle
                         title="SSL"
                         description="Setup SSL to secure your connections with LetsEncrypt certificates"
@@ -366,23 +366,24 @@ export default function ReverseProxyTargets(props: {
                     </div>
                 </section>
 
-                <hr className="lg:max-w-2xl" />
+                <hr />
 
-                <section className="space-y-6">
+                <section className="space-y-8">
                     <SettingsSectionTitle
                         title="Targets"
                         description="Setup targets to route traffic to your services"
                         size="1xl"
                     />
 
-                    <div className="space-y-6">
+                    <div className="space-y-8">
                         <Form {...addTargetForm}>
                             <form
                                 onSubmit={addTargetForm.handleSubmit(
                                     addTarget as any,
                                 )}
+                                className="space-y-8"
                             >
-                                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                                <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                                     <FormField
                                         control={addTargetForm.control}
                                         name="ip"
diff --git a/src/app/[orgId]/settings/resources/[resourceId]/general/page.tsx b/src/app/[orgId]/settings/resources/[resourceId]/general/page.tsx
index 37090932..dbab044c 100644
--- a/src/app/[orgId]/settings/resources/[resourceId]/general/page.tsx
+++ b/src/app/[orgId]/settings/resources/[resourceId]/general/page.tsx
@@ -118,8 +118,8 @@ export default function GeneralForm() {
 
     return (
         <>
-            <div className="lg:max-w-2xl space-y-12">
-                <section className="space-y-6">
+            <div className="space-y-12 lg:max-w-2xl">
+                <section className="space-y-8">
                     <SettingsSectionTitle
                         title="General Settings"
                         description="Configure the general settings for this resource"
@@ -129,7 +129,7 @@ export default function GeneralForm() {
                     <Form {...form}>
                         <form
                             onSubmit={form.handleSubmit(onSubmit)}
-                            className="space-y-6"
+                            className="space-y-8"
                         >
                             <FormField
                                 control={form.control}
diff --git a/src/app/[orgId]/settings/resources/[resourceId]/layout.tsx b/src/app/[orgId]/settings/resources/[resourceId]/layout.tsx
index 0e2aa012..39c97d1f 100644
--- a/src/app/[orgId]/settings/resources/[resourceId]/layout.tsx
+++ b/src/app/[orgId]/settings/resources/[resourceId]/layout.tsx
@@ -8,13 +8,21 @@ import { AxiosResponse } from "axios";
 import { redirect } from "next/navigation";
 import { authCookieHeader } from "@app/api/cookies";
 import { SidebarSettings } from "@app/components/SidebarSettings";
-import Link from "next/link";
-import { ArrowLeft, Cloud, Settings, Shield } from "lucide-react";
+import {  Cloud, Settings, Shield } from "lucide-react";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { GetOrgResponse } from "@server/routers/org";
 import OrgProvider from "@app/providers/OrgProvider";
 import { cache } from "react";
 import ResourceInfoBox from "./components/ResourceInfoBox";
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+} from "@app/components/ui/breadcrumb";
+import Link from "next/link";
 
 interface ResourceLayoutProps {
     children: React.ReactNode;
@@ -31,7 +39,7 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
     try {
         const res = await internal.get<AxiosResponse<GetResourceResponse>>(
             `/resource/${params.resourceId}`,
-            await authCookieHeader()
+            await authCookieHeader(),
         );
         resource = res.data.data;
     } catch {
@@ -60,8 +68,8 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
         const getOrg = cache(async () =>
             internal.get<AxiosResponse<GetOrgResponse>>(
                 `/org/${params.orgId}`,
-                await authCookieHeader()
-            )
+                await authCookieHeader(),
+            ),
         );
         const res = await getOrg();
         org = res.data.data;
@@ -94,15 +102,17 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
     return (
         <>
             <div className="mb-4">
-                <Link
-                    href="../../"
-                    className="text-muted-foreground hover:underline"
-                >
-                    <div className="flex flex-row items-center gap-1">
-                        <ArrowLeft className="w-4 h-4" />{" "}
-                        <span>All Resources</span>
-                    </div>
-                </Link>
+                <Breadcrumb>
+                    <BreadcrumbList>
+                        <BreadcrumbItem>
+                            <Link href="../">Resources</Link>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator />
+                        <BreadcrumbItem>
+                            <BreadcrumbPage>{resource.name}</BreadcrumbPage>
+                        </BreadcrumbItem>
+                    </BreadcrumbList>
+                </Breadcrumb>
             </div>
 
             <SettingsSectionTitle
@@ -112,10 +122,7 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
 
             <OrgProvider org={org}>
                 <ResourceProvider resource={resource} authInfo={authInfo}>
-                    <SidebarSettings
-                        sidebarNavItems={sidebarNavItems}
-                        limitWidth={false}
-                    >
+                    <SidebarSettings sidebarNavItems={sidebarNavItems}>
                         <div className="mb-8 lg:max-w-2xl">
                             <ResourceInfoBox />
                         </div>
diff --git a/src/app/[orgId]/settings/sites/[niceId]/general/page.tsx b/src/app/[orgId]/settings/sites/[niceId]/general/page.tsx
index 4c6406fc..7ab0ad90 100644
--- a/src/app/[orgId]/settings/sites/[niceId]/general/page.tsx
+++ b/src/app/[orgId]/settings/sites/[niceId]/general/page.tsx
@@ -64,7 +64,7 @@ export default function GeneralPage() {
 
     return (
         <>
-            <div className="space-y-6">
+            <div className="space-y-8">
                 <SettingsSectionTitle
                     title="General Settings"
                     description="Configure the general settings for this site"
@@ -74,7 +74,7 @@ export default function GeneralPage() {
                 <Form {...form}>
                     <form
                         onSubmit={form.handleSubmit(onSubmit)}
-                        className="space-y-6"
+                        className="space-y-8"
                     >
                         <FormField
                             control={form.control}
diff --git a/src/app/[orgId]/settings/sites/[niceId]/layout.tsx b/src/app/[orgId]/settings/sites/[niceId]/layout.tsx
index 427c76e9..a3a0ea0c 100644
--- a/src/app/[orgId]/settings/sites/[niceId]/layout.tsx
+++ b/src/app/[orgId]/settings/sites/[niceId]/layout.tsx
@@ -8,6 +8,13 @@ import { SidebarSettings } from "@app/components/SidebarSettings";
 import Link from "next/link";
 import { ArrowLeft } from "lucide-react";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbList,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+} from "@app/components/ui/breadcrumb";
 
 interface SettingsLayoutProps {
     children: React.ReactNode;
@@ -23,7 +30,7 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
     try {
         const res = await internal.get<AxiosResponse<GetSiteResponse>>(
             `/org/${params.orgId}/site/${params.niceId}`,
-            await authCookieHeader()
+            await authCookieHeader(),
         );
         site = res.data.data;
     } catch {
@@ -39,15 +46,18 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
 
     return (
         <>
-            <div className="mb-4">
-                <Link
-                    href="../../"
-                    className="text-muted-foreground hover:underline"
-                >
-                    <div className="flex flex-row items-center gap-1">
-                        <ArrowLeft className="w-4 h-4" /> <span>All Sites</span>
-                    </div>
-                </Link>
+            <div className="mb-4 flex-row">
+                <Breadcrumb>
+                    <BreadcrumbList>
+                        <BreadcrumbItem>
+                            <Link href="../../">Sites</Link>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator />
+                        <BreadcrumbItem>
+                            <BreadcrumbPage>{site.name}</BreadcrumbPage>
+                        </BreadcrumbItem>
+                    </BreadcrumbList>
+                </Breadcrumb>
             </div>
 
             <SettingsSectionTitle
diff --git a/src/app/[orgId]/settings/sites/components/CreateSiteForm.tsx b/src/app/[orgId]/settings/sites/components/CreateSiteForm.tsx
index d9af58a1..08abcf5b 100644
--- a/src/app/[orgId]/settings/sites/components/CreateSiteForm.tsx
+++ b/src/app/[orgId]/settings/sites/components/CreateSiteForm.tsx
@@ -191,11 +191,11 @@ sh get-docker.sh`;
                         </CredenzaDescription>
                     </CredenzaHeader>
                     <CredenzaBody>
-                        <div className="space-y-6">
+                        <div className="space-y-8">
                             <Form {...form}>
                                 <form
                                     onSubmit={form.handleSubmit(onSubmit)}
-                                    className="space-y-6"
+                                    className="space-y-8"
                                     id="create-site-form"
                                 >
                                     <FormField
diff --git a/src/app/auth/login/LoginForm.tsx b/src/app/auth/login/LoginForm.tsx
index 7ef10ea2..f8ac7c64 100644
--- a/src/app/auth/login/LoginForm.tsx
+++ b/src/app/auth/login/LoginForm.tsx
@@ -27,6 +27,7 @@ import { api } from "@app/api";
 import { useRouter } from "next/navigation";
 import { AxiosResponse } from "axios";
 import { formatAxiosError } from "@app/lib/utils";
+import { LockIcon } from "lucide-react";
 
 type LoginFormProps = {
     redirect?: string;
@@ -108,7 +109,7 @@ export default function LoginForm({ redirect }: LoginFormProps) {
                 <Form {...form}>
                     <form
                         onSubmit={form.handleSubmit(onSubmit)}
-                        className="space-y-6"
+                        className="space-y-8"
                     >
                         <FormField
                             control={form.control}
@@ -153,6 +154,7 @@ export default function LoginForm({ redirect }: LoginFormProps) {
                             className="w-full"
                             loading={loading}
                         >
+                            <LockIcon className="w-4 h-4 mr-2" />
                             Login
                         </Button>
                     </form>
diff --git a/src/app/auth/signup/SignupForm.tsx b/src/app/auth/signup/SignupForm.tsx
index 6c720836..73003458 100644
--- a/src/app/auth/signup/SignupForm.tsx
+++ b/src/app/auth/signup/SignupForm.tsx
@@ -111,7 +111,7 @@ export default function SignupForm({ redirect }: SignupFormProps) {
                 <Form {...form}>
                     <form
                         onSubmit={form.handleSubmit(onSubmit)}
-                        className="space-y-6"
+                        className="space-y-8"
                     >
                         <FormField
                             control={form.control}
diff --git a/src/app/auth/verify-email/VerifyEmailForm.tsx b/src/app/auth/verify-email/VerifyEmailForm.tsx
index 638194a3..f2b9ed7e 100644
--- a/src/app/auth/verify-email/VerifyEmailForm.tsx
+++ b/src/app/auth/verify-email/VerifyEmailForm.tsx
@@ -134,7 +134,7 @@ export default function VerifyEmailForm({
                     <Form {...form}>
                         <form
                             onSubmit={form.handleSubmit(onSubmit)}
-                            className="space-y-6"
+                            className="space-y-8"
                         >
                             <FormField
                                 control={form.control}
diff --git a/src/app/profile/account/page.tsx b/src/app/profile/account/page.tsx
index aafd483a..2bc9ce78 100644
--- a/src/app/profile/account/page.tsx
+++ b/src/app/profile/account/page.tsx
@@ -3,7 +3,7 @@ import { AccountForm } from "./account-form"
 
 export default function SettingsAccountPage() {
   return (
-    <div className="space-y-6">
+    <div className="space-y-8">
       <div>
         <h3 className="text-lg font-medium">Account</h3>
         <p className="text-sm text-muted-foreground">
diff --git a/src/app/profile/appearance/page.tsx b/src/app/profile/appearance/page.tsx
index 6bb6eb13..1c7e6652 100644
--- a/src/app/profile/appearance/page.tsx
+++ b/src/app/profile/appearance/page.tsx
@@ -3,7 +3,7 @@ import { AppearanceForm } from "./appearance-form"
 
 export default function SettingsAppearancePage() {
   return (
-    <div className="space-y-6">
+    <div className="space-y-8">
       <div>
         <h3 className="text-lg font-medium">Appearance</h3>
         <p className="text-sm text-muted-foreground">
diff --git a/src/app/profile/display/page.tsx b/src/app/profile/display/page.tsx
index 6c1b06e5..55ac00e3 100644
--- a/src/app/profile/display/page.tsx
+++ b/src/app/profile/display/page.tsx
@@ -3,7 +3,7 @@ import { DisplayForm } from "./display-form"
 
 export default function SettingsDisplayPage() {
   return (
-    <div className="space-y-6">
+    <div className="space-y-8">
       <div>
         <h3 className="text-lg font-medium">Display</h3>
         <p className="text-sm text-muted-foreground">
diff --git a/src/app/profile/layout.tsx b/src/app/profile/layout.tsx
index d7dbc634..f7fc72d1 100644
--- a/src/app/profile/layout.tsx
+++ b/src/app/profile/layout.tsx
@@ -56,7 +56,7 @@ export default function SettingsLayout({ children }: SettingsLayoutProps) {
           className="hidden dark:block"
         />
       </div>
-      <div className="hidden space-y-6 p-10 pb-16 md:block">
+      <div className="hidden space-y-8 p-10 pb-16 md:block">
         <div className="space-y-0.5">
           <h2 className="text-2xl font-bold tracking-tight">Settings</h2>
           <p className="text-muted-foreground">
diff --git a/src/app/profile/notifications/page.tsx b/src/app/profile/notifications/page.tsx
index 75e5c96e..0917cd4f 100644
--- a/src/app/profile/notifications/page.tsx
+++ b/src/app/profile/notifications/page.tsx
@@ -3,7 +3,7 @@ import { NotificationsForm } from "./notifications-form"
 
 export default function SettingsNotificationsPage() {
   return (
-    <div className="space-y-6">
+    <div className="space-y-8">
       <div>
         <h3 className="text-lg font-medium">Notifications</h3>
         <p className="text-sm text-muted-foreground">
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 66744634..f68812c0 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -3,7 +3,7 @@ import { ProfileForm } from "@app/components/profile-form"
 
 export default function SettingsProfilePage() {
   return (
-    <div className="space-y-6">
+    <div className="space-y-8">
       <div>
         <h3 className="text-lg font-medium">Profile</h3>
         <p className="text-sm text-muted-foreground">
diff --git a/src/app/setup/page.tsx b/src/app/setup/page.tsx
index 4d33812d..fe423f9a 100644
--- a/src/app/setup/page.tsx
+++ b/src/app/setup/page.tsx
@@ -206,7 +206,7 @@ export default function StepperForm() {
                         </div>
                     )}
                     {currentStep === "site" && (
-                        <div className="space-y-6">
+                        <div className="space-y-8">
                             <div className="space-y-2">
                                 <Label htmlFor="siteName">Site Name</Label>
                                 <Input
@@ -222,7 +222,7 @@ export default function StepperForm() {
                         </div>
                     )}
                     {currentStep === "resources" && (
-                        <div className="space-y-6">
+                        <div className="space-y-8">
                             <div className="space-y-2">
                                 <Label htmlFor="resourceName">
                                     Resource Name
diff --git a/src/components/SettingsSectionTitle.tsx b/src/components/SettingsSectionTitle.tsx
index 8cd86f31..5b5e3636 100644
--- a/src/components/SettingsSectionTitle.tsx
+++ b/src/components/SettingsSectionTitle.tsx
@@ -11,7 +11,7 @@ export default function SettingsSectionTitle({
 }: SettingsSectionTitleProps) {
     return (
         <div
-            className={`space-y-0.5 select-none ${!size || size === "2xl" ? "mb-12" : ""}`}
+            className={`space-y-0.5 select-none ${!size || size === "2xl" ? "mb-6 md:mb-12" : ""}`}
         >
             <h2
                 className={`text-${
diff --git a/src/components/SidebarSettings.tsx b/src/components/SidebarSettings.tsx
index 43a72cd6..12f14edc 100644
--- a/src/components/SidebarSettings.tsx
+++ b/src/components/SidebarSettings.tsx
@@ -21,8 +21,8 @@ export function SidebarSettings({
     limitWidth,
 }: SideBarSettingsProps) {
     return (
-        <div className="space-y-6 0 pb-16k">
-            <div className="flex flex-col space-y-6 lg:flex-row lg:space-x-32 lg:space-y-0">
+        <div className="space-y-8 0 pb-16k">
+            <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-32 lg:space-y-0">
                 <aside className="-mx-4 lg:w-1/5">
                     <SidebarNav items={sidebarNavItems} disabled={disabled} />
                 </aside>