material 3 initial design

package-lock.json

···
         "@iconify-icon/react": "^3.0.1",
         "@iconify-json/material-symbols": "^1.2.42",
         "@iconify-json/mdi": "^1.2.3",
+        "@iconify/json": "^2.2.396",
         "@svgr/core": "^8.1.0",
         "@svgr/plugin-jsx": "^8.1.0",
         "@testing-library/dom": "^10.4.0",
···
       "license": "Apache-2.0",
       "dependencies": {
         "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify/json": {
+      "version": "2.2.396",
+      "resolved": "https://registry.npmjs.org/@iconify/json/-/json-2.2.396.tgz",
+      "integrity": "sha512-tijg77JFuYIt32S9N8p7La8C0zp9zKZsX6UP8ip5GVB1F6Mp3pZA5Vc5eAquTY50NoDJX58U6z4Qn3d6Wyossg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "*",
+        "pathe": "^2.0.0"
       }
     },
     "node_modules/@iconify/types": {

package.json

···
     "@iconify-icon/react": "^3.0.1",
     "@iconify-json/material-symbols": "^1.2.42",
     "@iconify-json/mdi": "^1.2.3",
+    "@iconify/json": "^2.2.396",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@testing-library/dom": "^10.4.0",

src/auto-imports.d.ts

···
 declare global {
   const IconMaterialSymbolsAccountCircle: typeof import('~icons/material-symbols/account-circle.jsx').default
   const IconMaterialSymbolsAccountCircleOutline: typeof import('~icons/material-symbols/account-circle-outline.jsx').default
+  const IconMaterialSymbolsArrowBack: typeof import('~icons/material-symbols/arrow-back.jsx').default
   const IconMaterialSymbolsHome: typeof import('~icons/material-symbols/home.jsx').default
   const IconMaterialSymbolsHomeOutline: typeof import('~icons/material-symbols/home-outline.jsx').default
   const IconMaterialSymbolsNotifications: typeof import('~icons/material-symbols/notifications.jsx').default

src/components/Header.tsx

···
+import { Link, useRouter } from "@tanstack/react-router";
+
+export function Header({
+  backButtonCallback,
+  title
+}: {
+  backButtonCallback?: () => void;
+  title?: string;
+}) {
+  const router = useRouter();
+  //const what = router.history.
+  return (
+    <div className="flex items-center gap-4 px-4 py-3 h-[52px] sticky top-0 bg-white dark:bg-gray-950 z-10 border-b border-gray-200 dark:border-gray-700">
+      {backButtonCallback ? (<Link
+        to=".."
+        //className="px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-900 font-bold text-lg"
+        className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 font-bold text-lg"
+        onClick={(e) => {
+          e.preventDefault();
+          backButtonCallback();
+        }}
+        aria-label="Go back"
+      >
+        <IconMaterialSymbolsArrowBack className="w-6 h-6" />
+      </Link>) : (<div className="w-[0px]" />)}
+      <span className="text-[21px] font-roboto">{title}</span>
+    </div>
+  );
+}

src/components/InfiniteCustomFeed.tsx

···
 import * as React from "react";
+
 //import { useInView } from "react-intersection-observer";
 import { UniversalPostRendererATURILoader } from "~/components/UniversalPostRenderer";
 import { useAuth } from "~/providers/UnifiedAuthProvider";
 import {
-  useQueryArbitrary,
-  useQueryIdentity,
   useInfiniteQueryFeedSkeleton,
+  // useQueryArbitrary,
+  // useQueryIdentity,
 } from "~/utils/useQuery";
 
 interface InfiniteCustomFeedProps {
···
       <button
         onClick={handleRefresh}
         disabled={isRefetching}
-        className="sticky lg:bottom-6 bottom-24 ml-4 w-[42px] h-[42px] z-10 bg-gray-500 hover:bg-gray-600 text-gray-50 p-[9px] rounded-full shadow-lg transition-transform duration-200 ease-in-out hover:scale-110 disabled:bg-gray-400 disabled:cursor-not-allowed"
+        className="sticky lg:bottom-4 bottom-22 ml-4 w-[42px] h-[42px] z-10 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 text-gray-50 p-[9px] rounded-full shadow-lg transition-transform duration-200 ease-in-out hover:scale-110 disabled:bg-gray-400 disabled:cursor-not-allowed"
         aria-label="Refresh feed"
       >
-        {isRefetching ? <RefreshIcon className="h-6 w-6 animate-spin" /> : <RefreshIcon className="h-6 w-6" />}
+        {isRefetching ? <RefreshIcon className="h-6 w-6 text-gray-600 dark:text-gray-400 animate-spin" /> : <RefreshIcon className="h-6 w-6 text-gray-600 dark:text-gray-400" />}
       </button>
     </>
   );

src/components/Login.tsx

···
 // src/components/Login.tsx
-import React, { useEffect, useState, useRef } from "react";
+import { Agent } from "@atproto/api";
+import React, { useEffect, useRef, useState } from "react";
+
 import { useAuth } from "~/providers/UnifiedAuthProvider";
-import { Agent } from "@atproto/api";
 
 // --- 1. The Main Component (Orchestrator with `compact` prop) ---
-export default function Login({ compact = false }: { compact?: boolean }) {
+export default function Login({
+  compact = false,
+  popup = false,
+}: {
+  compact?: boolean;
+  popup?: boolean;
+}) {
   const { status, agent, logout } = useAuth();
 
   // Loading state can be styled differently based on the prop
···
     // Large view
     if (!compact) {
       return (
-        <div className="p-6 bg-gray-100 dark:bg-gray-900 rounded-xl shadow border border-gray-200 dark:border-gray-800 mt-6 mx-4">
+        <div className="p-4 bg-gray-100 dark:bg-gray-900 rounded-xl  border-gray-200 dark:border-gray-800 mt-6 mx-4">
           <div className="flex flex-col items-center justify-center text-center">
             <p className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-100">
               You are logged in!
···
             <ProfileThing agent={agent} large />
             <button
               onClick={logout}
-              className="bg-gray-600 mt-4 hover:bg-gray-700 text-white rounded px-6 py-2 font-semibold text-base transition-colors"
+              className="bg-gray-600 mt-4 hover:bg-gray-700 text-white rounded-full px-6 py-2 font-semibold text-base transition-colors"
             >
               Log out
             </button>
···
   if (!compact) {
     // Large view renders the form directly in the card
     return (
-      <div className="p-6 bg-gray-100 dark:bg-gray-900 rounded-xl shadow border border-gray-200 dark:border-gray-800 mt-6 mx-4">
+      <div className="p-4 bg-gray-100 dark:bg-gray-900 rounded-xl  border-gray-200 dark:border-gray-800 mt-6 mx-4">
         <UnifiedLoginForm />
       </div>
     );
   }
 
   // Compact view renders a button that toggles the form in a dropdown
-  return <CompactLoginButton />;
+  return <CompactLoginButton popup={popup} />;
 }
 
 // --- 2. The Reusable, Self-Contained Login Form Component ---
···
 
   return (
     <div>
-      <div className="flex border-b border-gray-200 dark:border-gray-700 mb-4">
+      <div className="flex bg-gray-300 rounded-full dark:bg-gray-700 mb-4">
         <TabButton
           label="OAuth"
           active={mode === "oauth"}
···
 // --- 3. Helper components for layouts, forms, and UI ---
 
 // A new component to contain the logic for the compact dropdown
-const CompactLoginButton = () => {
+const CompactLoginButton = ({popup}:{popup?: boolean}) => {
   const [showForm, setShowForm] = useState(false);
   const formRef = useRef<HTMLDivElement>(null);
 
···
     <div className="relative" ref={formRef}>
       <button
         onClick={() => setShowForm(!showForm)}
-        className="text-sm bg-gray-600 hover:bg-gray-700 text-white rounded px-3 py-1 font-medium transition-colors"
+        className="text-sm bg-gray-600 hover:bg-gray-700 text-white rounded-full px-3 py-1 font-medium transition-colors"
       >
         Log in
       </button>
       {showForm && (
-        <div className="absolute top-full right-0 mt-2 w-80 bg-white dark:bg-gray-900 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 p-4 z-50">
+        <div className={`absolute ${popup ? `bottom-[calc(100%)]` :`top-full`} right-0 mt-2 w-80 bg-white dark:bg-gray-900 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 p-4 z-50`}>
           <UnifiedLoginForm />
         </div>
       )}
···
   );
 };
 
-const TabButton = ({ label, active, onClick }: { label: string; active: boolean; onClick: () => void; }) => (
+const TabButton = ({
+  label,
+  active,
+  onClick,
+}: {
+  label: string;
+  active: boolean;
+  onClick: () => void;
+}) => (
   <button
     onClick={onClick}
-    className={`px-4 py-2 text-sm font-medium transition-colors ${
+    className={`px-4 py-2 text-sm font-medium transition-colors rounded-full flex-1 ${
       active
-        ? "text-gray-600 dark:text-gray-200 border-b-2 border-gray-500"
-        : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
+        ? "text-gray-950 dark:text-gray-200 border-gray-500 bg-gray-400 dark:bg-gray-500"
+        : "text-gray-600 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200"
     }`}
   >
     {label}
···
   };
   return (
     <form onSubmit={handleSubmit} className="flex flex-col gap-3">
-      <p className="text-xs text-gray-500 dark:text-gray-400">Sign in with AT. Your password is never shared.</p>
-      <input type="text" placeholder="handle.bsky.social" value={handle} onChange={(e) => setHandle(e.target.value)} className="px-3 py-2 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-gray-500" />
-      <button type="submit" className="bg-gray-600 hover:bg-gray-700 text-white rounded px-4 py-2 font-medium text-sm transition-colors">Log in</button>
+      <p className="text-xs text-gray-500 dark:text-gray-400">
+        Sign in with AT. Your password is never shared.
+      </p>
+      <input
+        type="text"
+        placeholder="handle.bsky.social"
+        value={handle}
+        onChange={(e) => setHandle(e.target.value)}
+        className="px-3 py-2 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-gray-500"
+      />
+      <button
+        type="submit"
+        className="bg-gray-600 hover:bg-gray-700 text-white rounded-full px-4 py-2 font-medium text-sm transition-colors"
+      >
+        Log in
+      </button>
     </form>
   );
 };
···
 
   return (
     <form onSubmit={handleSubmit} className="flex flex-col gap-3">
-      <p className="text-xs text-red-500 dark:text-red-400">Warning: Less secure. Use an App Password.</p>
-      <input type="text" placeholder="handle.bsky.social" value={user} onChange={(e) => setUser(e.target.value)} className="px-3 py-2 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-gray-500" autoComplete="username" />
-      <input type="password" placeholder="App Password" value={password} onChange={(e) => setPassword(e.target.value)} className="px-3 py-2 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-gray-500" autoComplete="current-password" />
-      <input type="text" placeholder="PDS (e.g., bsky.social)" value={serviceURL} onChange={(e) => setServiceURL(e.target.value)} className="px-3 py-2 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-gray-500" />
+      <p className="text-xs text-red-500 dark:text-red-400">
+        Warning: Less secure. Use an App Password.
+      </p>
+      <input
+        type="text"
+        placeholder="handle.bsky.social"
+        value={user}
+        onChange={(e) => setUser(e.target.value)}
+        className="px-3 py-2 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-gray-500"
+        autoComplete="username"
+      />
+      <input
+        type="password"
+        placeholder="App Password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        className="px-3 py-2 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-gray-500"
+        autoComplete="current-password"
+      />
+      <input
+        type="text"
+        placeholder="PDS (e.g., bsky.social)"
+        value={serviceURL}
+        onChange={(e) => setServiceURL(e.target.value)}
+        className="px-3 py-2 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-gray-500"
+      />
       {error && <p className="text-xs text-red-500">{error}</p>}
-      <button type="submit" className="bg-gray-600 hover:bg-gray-700 text-white rounded px-4 py-2 font-medium text-sm transition-colors">Log in</button>
+      <button
+        type="submit"
+        className="bg-gray-600 hover:bg-gray-700 text-white rounded-full px-4 py-2 font-medium text-sm transition-colors"
+      >
+        Log in
+      </button>
     </form>
   );
 };
 
 // --- Profile Component (now supports a `large` prop for styling) ---
-export const ProfileThing = ({ agent, large = false }: { agent: Agent | null; large?: boolean }) => {
-    const [profile, setProfile] = useState<any>(null);
+export const ProfileThing = ({
+  agent,
+  large = false,
+}: {
+  agent: Agent | null;
+  large?: boolean;
+}) => {
+  const [profile, setProfile] = useState<any>(null);
 
-    useEffect(() => {
-        const fetchUser = async () => {
-            const did = (agent as any)?.session?.did ?? (agent as any)?.assertDid;
-            if (!did) return;
-            try {
-                const res = await agent!.getProfile({ actor: did });
-                setProfile(res.data);
-            } catch (e) { console.error("Failed to fetch profile", e); }
-        };
-        if (agent) fetchUser();
-    }, [agent]);
-
-    if (!profile) {
-        return ( // Skeleton loader
-          <div className={`flex items-center gap-2.5 animate-pulse ${large ? 'mb-1' : ''}`}>
-            <div className={`rounded-full bg-gray-300 dark:bg-gray-700 ${large ? 'w-10 h-10' : 'w-[30px] h-[30px]'}`} />
-            <div className="flex flex-col gap-2">
-              <div className={`bg-gray-300 dark:bg-gray-700 rounded ${large ? 'h-4 w-28' : 'h-3 w-20'}`} />
-              <div className={`bg-gray-300 dark:bg-gray-700 rounded ${large ? 'h-4 w-20' : 'h-3 w-16'}`} />
-            </div>
-          </div>
-        );
+  useEffect(() => {
+    const fetchUser = async () => {
+      const did = (agent as any)?.session?.did ?? (agent as any)?.assertDid;
+      if (!did) return;
+      try {
+        const res = await agent!.getProfile({ actor: did });
+        setProfile(res.data);
+      } catch (e) {
+        console.error("Failed to fetch profile", e);
       }
-    
-      return (
-        <div className={`flex flex-row items-center gap-2.5 ${large ? 'mb-1' : ''}`}>
-          <img src={profile?.avatar} alt="avatar" className={`object-cover rounded-full ${large ? 'w-10 h-10' : 'w-[30px] h-[30px]'}`} />
-          <div className="flex flex-col items-start text-left">
-            <div className={`font-medium ${large ? 'text-gray-800 dark:text-gray-100 text-md' : 'text-gray-800 dark:text-gray-100 text-sm'}`}>{profile?.displayName}</div>
-            <div className={` ${large ? 'text-gray-500 dark:text-gray-400 text-sm' : 'text-gray-500 dark:text-gray-400 text-xs'}`}>@{profile?.handle}</div>
-          </div>
+    };
+    if (agent) fetchUser();
+  }, [agent]);
+
+  if (!profile) {
+    return (
+      // Skeleton loader
+      <div
+        className={`flex items-center gap-2.5 animate-pulse ${large ? "mb-1" : ""}`}
+      >
+        <div
+          className={`rounded-full bg-gray-300 dark:bg-gray-700 ${large ? "w-10 h-10" : "w-[30px] h-[30px]"}`}
+        />
+        <div className="flex flex-col gap-2">
+          <div
+            className={`bg-gray-300 dark:bg-gray-700 rounded ${large ? "h-4 w-28" : "h-3 w-20"}`}
+          />
+          <div
+            className={`bg-gray-300 dark:bg-gray-700 rounded ${large ? "h-4 w-20" : "h-3 w-16"}`}
+          />
         </div>
-      );
-};
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`flex flex-row items-center gap-2.5 ${large ? "mb-1" : ""}`}
+    >
+      <img
+        src={profile?.avatar}
+        alt="avatar"
+        className={`object-cover rounded-full ${large ? "w-10 h-10" : "w-[30px] h-[30px]"}`}
+      />
+      <div className="flex flex-col items-start text-left">
+        <div
+          className={`font-medium ${large ? "text-gray-800 dark:text-gray-100 text-md" : "text-gray-800 dark:text-gray-100 text-sm"}`}
+        >
+          {profile?.displayName}
+        </div>
+        <div
+          className={` ${large ? "text-gray-500 dark:text-gray-400 text-sm" : "text-gray-500 dark:text-gray-400 text-xs"}`}
+        >
+          @{profile?.handle}
+        </div>
+      </div>
+    </div>
+  );
+};

src/routes/__root.tsx

···
 import type { QueryClient } from "@tanstack/react-query";
 import {
   createRootRouteWithContext,
-  Link,
+  // Link,
   // Outlet,
   Scripts,
   useLocation,
···
       )}
 
       <div className="min-h-screen flex justify-center bg-gray-50 dark:bg-gray-950">
-        <nav className="hidden lg:flex h-screen w-[250px] flex-col gap-2 p-4 dark:border-gray-800 sticky top-0 self-start">
+        <nav className="hidden lg:flex h-screen w-[250px] flex-col gap-0 p-4 dark:border-gray-800 sticky top-0 self-start">
           <div className="flex items-center gap-3 mb-4">
             <img src="/redstar.png" alt="Red Dwarf Logo" className="w-8 h-8" />
             <span className="font-extrabold text-2xl tracking-tight text-gray-900 dark:text-gray-100">
···
               </span> */}
             </span>
           </div>
-          <Link
+          <MaterialNavItem
+            InactiveIcon={
+              <IconMaterialSymbolsHomeOutline className="w-6 h-6" />
+            }
+            ActiveIcon={<IconMaterialSymbolsHome className="w-6 h-6" />}
+            active={isHome}
+            onClickCallbback={() =>
+              navigate({
+                to: "/",
+                //params: { did: agent.assertDid },
+              })
+            }
+            text="Home"
+          />
+
+          <MaterialNavItem
+            InactiveIcon={
+              <IconMaterialSymbolsNotificationsOutline className="w-6 h-6" />
+            }
+            ActiveIcon={
+              <IconMaterialSymbolsNotifications className="w-6 h-6" />
+            }
+            active={isNotifications}
+            onClickCallbback={() =>
+              navigate({
+                to: "/notifications",
+                //params: { did: agent.assertDid },
+              })
+            }
+            text="Notifications"
+          />
+          <MaterialNavItem
+            InactiveIcon={<IconMaterialSymbolsTag className="w-6 h-6" />}
+            ActiveIcon={<IconMaterialSymbolsTag className="w-6 h-6" />}
+            active={location.pathname.startsWith("/feeds")}
+            onClickCallbback={() =>
+              navigate({
+                to: "/feeds",
+                //params: { did: agent.assertDid },
+              })
+            }
+            text="Feeds"
+          />
+          <MaterialNavItem
+            InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />}
+            ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />}
+            active={location.pathname.startsWith("/search")}
+            onClickCallbback={() =>
+              navigate({
+                to: "/search",
+                //params: { did: agent.assertDid },
+              })
+            }
+            text="Search"
+          />
+          <MaterialNavItem
+            InactiveIcon={
+              <IconMaterialSymbolsAccountCircleOutline className="w-6 h-6" />
+            }
+            ActiveIcon={
+              <IconMaterialSymbolsAccountCircle className="w-6 h-6" />
+            }
+            active={isProfile ?? false}
+            onClickCallbback={() => {
+              if (authed && agent && agent.assertDid) {
+                //window.location.href = `/profile/${agent.assertDid}`;
+                navigate({
+                  to: "/profile/$did",
+                  params: { did: agent.assertDid },
+                });
+              }
+            }}
+            text="Profile"
+          />
+          <MaterialNavItem
+            InactiveIcon={
+              <IconMaterialSymbolsSettingsOutline className="w-6 h-6" />
+            }
+            ActiveIcon={<IconMaterialSymbolsSettings className="w-6 h-6" />}
+            active={location.pathname.startsWith("/settings")}
+            onClickCallbback={() =>
+              navigate({
+                to: "/settings",
+                //params: { did: agent.assertDid },
+              })
+            }
+            text="Settings"
+          />
+          <div className="flex flex-row items-center justify-center mt-3">
+            <MaterialPillButton
+              InactiveIcon={<IconMdiPencilOutline className="w-6 h-6" />}
+              ActiveIcon={<IconMdiPencilOutline className="w-6 h-6" />}
+              //active={true}
+              onClickCallbback={() => setPostOpen(true)}
+              text="Post"
+            />
+          </div>
+          {/* <Link
             to="/"
             className={
               `py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-900 text-xl flex items-center gap-3 ` +
···
               <IconMaterialSymbolsAccountCircleOutline width={28} height={28} />
             ) : (
               <IconMaterialSymbolsAccountCircle width={28} height={28} />
-            )
-              }
+            )}
             <span>Profile</span>
           </button>
           <Link
···
               <IconMaterialSymbolsSettings width={28} height={28} />
             )}
             <span>Settings</span>
-          </Link>
-          <button
+          </Link> */}
+          {/* <button
             className="mt-4 w-full flex items-center justify-center gap-3 py-3 px-0 mb-3 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100 text-xl font-bold rounded-full transition-colors shadow"
             onClick={() => setPostOpen(true)}
             type="button"
···
               className="text-gray-600 dark:text-gray-400"
             />
             <span>Post</span>
-          </button>
+          </button> */}
           <div className="flex-1"></div>
           <a
             href="https://tangled.sh/@whey.party/red-dwarf"
···
           </div>
         </nav>
 
-        <button
-          className="lg:hidden fixed bottom-20 right-6 z-50 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 text-blue-600 dark:text-blue-400 rounded-full shadow-lg w-16 h-16 flex items-center justify-center border-4 border-white dark:border-gray-950 transition-all"
-          style={{ boxShadow: "0 4px 24px 0 rgba(0,0,0,0.12)" }}
-          onClick={() => setPostOpen(true)}
-          type="button"
-          aria-label="Create Post"
-        >
-          <IconMdiPencilOutline
-            width={24}
-            height={24}
-            className="text-gray-600 dark:text-gray-400"
-          />
-        </button>
+        {agent?.did && (
+          <button
+            className="lg:hidden fixed bottom-22 right-4 z-50 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 rounded-2xl w-14 h-14 flex items-center justify-center transition-all"
+            style={{ boxShadow: "0 4px 24px 0 rgba(0,0,0,0.12)" }}
+            onClick={() => setPostOpen(true)}
+            type="button"
+            aria-label="Create Post"
+          >
+            <IconMdiPencilOutline
+              width={24}
+              height={24}
+              className="text-gray-600 dark:text-gray-400"
+            />
+          </button>
+        )}
 
         <main className="w-full max-w-[600px] lg:border-x border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-950 pb-16 lg:pb-0">
-          <div className="lg:hidden flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-950">
-            <div className="flex items-center gap-2">
-              <img
-                src="/redstar.png"
-                alt="Red Dwarf Logo"
-                className="w-6 h-6"
-              />
-              <span className="font-bold text-lg text-gray-900 dark:text-gray-100">
-                Red Dwarf{" "}
-                {/* <span className="text-gray-500 dark:text-gray-400 text-sm">
-                  lite
-                </span> */}
-              </span>
-            </div>
-            <div className="flex items-center gap-2">
-              <Login compact={true} />
-            </div>
-          </div>
-
           {children}
         </main>
 
···
         </aside>
       </div>
 
-      <nav className="lg:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-950 border-t border-gray-200 dark:border-gray-700 z-40">
-        <div className="flex justify-around items-center py-2">
-          <Link
-            to="/"
-            className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${
-              isHome
-                ? "text-gray-900 dark:text-gray-100"
-                : "text-gray-600 dark:text-gray-400"
-            }`}
-          >
-            {!isHome ? (
-              <IconMaterialSymbolsHomeOutline width={24} height={24} />
-            ) : (
-              <IconMaterialSymbolsHome width={24} height={24} />
-            )}
-            <span className="text-xs mt-1">Home</span>
-          </Link>
-          <Link
-            to="/search"
-            className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${
-              location.pathname.startsWith("/search")
-                ? "text-gray-900 dark:text-gray-100"
-                : "text-gray-600 dark:text-gray-400"
-            }`}
-          >
-            {!location.pathname.startsWith("/search") ? (
-              <IconMaterialSymbolsSearch width={24} height={24} />
-            ) : (
-              <IconMaterialSymbolsSearch width={24} height={24} />
-            )}
-            <span className="text-xs mt-1">Search</span>
-          </Link>
-          <Link
-            to="/notifications"
-            className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${
-              isNotifications
-                ? "text-gray-900 dark:text-gray-100"
-                : "text-gray-600 dark:text-gray-400"
-            }`}
-          >
-            {!isNotifications ? (
-              <IconMaterialSymbolsNotificationsOutline width={24} height={24} />
-            ) : (
-              <IconMaterialSymbolsNotifications width={24} height={24} />
-            )}
-            <span className="text-xs mt-1">Notifications</span>
-          </Link>
-          <button
-            className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${
-              isProfile
-                ? "text-gray-900 dark:text-gray-100"
-                : "text-gray-600 dark:text-gray-400"
-            }`}
-            onClick={() => {
-              if (authed && agent && agent.assertDid) {
-                //window.location.href = `/profile/${agent.assertDid}`;
+      {agent?.did ? (
+        <nav className="lg:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-950 border-t border-gray-200 dark:border-gray-700 z-40">
+          <div className="flex justify-around items-center p-2">
+            <MaterialNavItem
+              small
+              InactiveIcon={
+                <IconMaterialSymbolsHomeOutline className="w-6 h-6" />
+              }
+              ActiveIcon={<IconMaterialSymbolsHome className="w-6 h-6" />}
+              active={isHome}
+              onClickCallbback={() =>
+                navigate({
+                  to: "/",
+                  //params: { did: agent.assertDid },
+                })
+              }
+              text="Home"
+            />
+            {/* <Link
+              to="/"
+              className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${
+                isHome
+                  ? "text-gray-900 dark:text-gray-100"
+                  : "text-gray-600 dark:text-gray-400"
+              }`}
+            >
+              {!isHome ? (
+                <IconMaterialSymbolsHomeOutline width={24} height={24} />
+              ) : (
+                <IconMaterialSymbolsHome width={24} height={24} />
+              )}
+              <span className="text-xs mt-1">Home</span>
+            </Link> */}
+            <MaterialNavItem
+              small
+              InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />}
+              ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />}
+              active={location.pathname.startsWith("/search")}
+              onClickCallbback={() =>
+                navigate({
+                  to: "/search",
+                  //params: { did: agent.assertDid },
+                })
+              }
+              text="Search"
+            />
+            {/* <Link
+              to="/search"
+              className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${
+                location.pathname.startsWith("/search")
+                  ? "text-gray-900 dark:text-gray-100"
+                  : "text-gray-600 dark:text-gray-400"
+              }`}
+            >
+              {!location.pathname.startsWith("/search") ? (
+                <IconMaterialSymbolsSearch width={24} height={24} />
+              ) : (
+                <IconMaterialSymbolsSearch width={24} height={24} />
+              )}
+              <span className="text-xs mt-1">Search</span>
+            </Link> */}
+            <MaterialNavItem
+              small
+              InactiveIcon={
+                <IconMaterialSymbolsNotificationsOutline className="w-6 h-6" />
+              }
+              ActiveIcon={
+                <IconMaterialSymbolsNotifications className="w-6 h-6" />
+              }
+              active={isNotifications}
+              onClickCallbback={() =>
+                navigate({
+                  to: "/notifications",
+                  //params: { did: agent.assertDid },
+                })
+              }
+              text="Notifications"
+            />
+            {/* <Link
+              to="/notifications"
+              className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${
+                isNotifications
+                  ? "text-gray-900 dark:text-gray-100"
+                  : "text-gray-600 dark:text-gray-400"
+              }`}
+            >
+              {!isNotifications ? (
+                <IconMaterialSymbolsNotificationsOutline
+                  width={24}
+                  height={24}
+                />
+              ) : (
+                <IconMaterialSymbolsNotifications width={24} height={24} />
+              )}
+              <span className="text-xs mt-1">Notifications</span>
+            </Link> */}
+            <MaterialNavItem
+              small
+              InactiveIcon={
+                <IconMaterialSymbolsAccountCircleOutline className="w-6 h-6" />
+              }
+              ActiveIcon={
+                <IconMaterialSymbolsAccountCircle className="w-6 h-6" />
+              }
+              active={isProfile ?? false}
+              onClickCallbback={() => {
+                if (authed && agent && agent.assertDid) {
+                  //window.location.href = `/profile/${agent.assertDid}`;
+                  navigate({
+                    to: "/profile/$did",
+                    params: { did: agent.assertDid },
+                  });
+                }
+              }}
+              text="Profile"
+            />
+            {/* <button
+              className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${
+                isProfile
+                  ? "text-gray-900 dark:text-gray-100"
+                  : "text-gray-600 dark:text-gray-400"
+              }`}
+              onClick={() => {
+                if (authed && agent && agent.assertDid) {
+                  //window.location.href = `/profile/${agent.assertDid}`;
+                  navigate({
+                    to: "/profile/$did",
+                    params: { did: agent.assertDid },
+                  });
+                }
+              }}
+              type="button"
+            >
+              <IconMaterialSymbolsAccountCircleOutline width={24} height={24} />
+              <span className="text-xs mt-1">Profile</span>
+            </button> */}
+            <MaterialNavItem
+              small
+              InactiveIcon={
+                <IconMaterialSymbolsSettingsOutline className="w-6 h-6" />
+              }
+              ActiveIcon={<IconMaterialSymbolsSettings className="w-6 h-6" />}
+              active={location.pathname.startsWith("/settings")}
+              onClickCallbback={() =>
                 navigate({
-                  to: "/profile/$did",
-                  params: { did: agent.assertDid },
-                });
+                  to: "/settings",
+                  //params: { did: agent.assertDid },
+                })
               }
-            }}
-            type="button"
-          >
-            <IconMaterialSymbolsAccountCircleOutline width={24} height={24} />
-            <span className="text-xs mt-1">Profile</span>
-          </button>
-          <Link
-            to="/settings"
-            className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${
-              location.pathname.startsWith("/settings")
-                ? "text-gray-900 dark:text-gray-100"
-                : "text-gray-600 dark:text-gray-400"
-            }`}
-          >
-            {!location.pathname.startsWith("/settings") ? (
-              <IconMaterialSymbolsSettingsOutline width={24} height={24} />
-            ) : (
-              <IconMaterialSymbolsSettings width={24} height={24} />
-            )}
-            <span className="text-xs mt-1">Settings</span>
-          </Link>
+              text="Settings"
+            />
+            {/* <Link
+              to="/settings"
+              className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${
+                location.pathname.startsWith("/settings")
+                  ? "text-gray-900 dark:text-gray-100"
+                  : "text-gray-600 dark:text-gray-400"
+              }`}
+            >
+              {!location.pathname.startsWith("/settings") ? (
+                <IconMaterialSymbolsSettingsOutline width={24} height={24} />
+              ) : (
+                <IconMaterialSymbolsSettings width={24} height={24} />
+              )}
+              <span className="text-xs mt-1">Settings</span>
+            </Link> */}
+          </div>
+        </nav>
+      ) : (
+        <div className="lg:hidden flex items-center fixed bottom-0 left-0 right-0 justify-between px-4 py-3 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-950 z-10">
+          <div className="flex items-center gap-2">
+            <img src="/redstar.png" alt="Red Dwarf Logo" className="w-6 h-6" />
+            <span className="font-bold text-lg text-gray-900 dark:text-gray-100">
+              Red Dwarf{" "}
+              {/* <span className="text-gray-500 dark:text-gray-400 text-sm">
+                  lite
+                </span> */}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Login compact={true} popup={true} />
+          </div>
         </div>
-      </nav>
+      )}
 
-      <TanStackRouterDevtools position="bottom-right" />
+      <TanStackRouterDevtools position="bottom-left" />
       <Scripts />
     </>
   );
 }
+
+function MaterialNavItem({
+  InactiveIcon,
+  ActiveIcon,
+  text,
+  active,
+  onClickCallbback,
+  small,
+}: {
+  InactiveIcon: React.ReactElement;
+  ActiveIcon: React.ReactElement;
+  text: string;
+  active: boolean;
+  onClickCallbback: () => void;
+  small?: boolean;
+}) {
+  if (small)
+    return (
+      <button
+        className={`flex flex-col items-center rounded-lg transition-colors flex-1 gap-1 ${
+          active
+            ? "text-gray-900 dark:text-gray-100"
+            : "text-gray-600 dark:text-gray-400"
+        }`}
+        onClick={() => {
+          onClickCallbback();
+        }}
+      >
+        <div
+          className={`px-4 py-1 rounded-full flex items-center justify-center ${active ? " bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 hover:dark:bg-gray-700" : "hover:bg-gray-50 hover:dark:bg-gray-900"}`}
+        >
+          {active ? ActiveIcon : InactiveIcon}
+        </div>
+        <span
+          className={`text-[12.8px] text-roboto ${active ? "font-medium" : ""}`}
+        >
+          {text}
+        </span>
+      </button>
+    );
+
+  return (
+    <button
+      className={`flex flex-row h-12 min-h-12 max-h-12 px-4 py-0.5 w-full items-center rounded-full transition-colors flex-1 gap-1 ${
+        active
+          ? "text-gray-900 dark:text-gray-100 hover:bg-gray-300 dark:bg-gray-700 bg-gray-200 hover:dark:bg-gray-600"
+          : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800"
+      }`}
+      onClick={() => {
+        onClickCallbback();
+      }}
+    >
+      <div className={`mr-4 ${active ? " " : " "}`}>
+        {active ? ActiveIcon : InactiveIcon}
+      </div>
+      <span
+        className={`text-[16px] text-roboto ${active ? "font-medium" : ""}`}
+      >
+        {text}
+      </span>
+    </button>
+  );
+}
+
+function MaterialPillButton({
+  InactiveIcon,
+  ActiveIcon,
+  text,
+  //active,
+  onClickCallbback,
+  small,
+}: {
+  InactiveIcon: React.ReactElement;
+  ActiveIcon: React.ReactElement;
+  text: string;
+  //active: boolean;
+  onClickCallbback: () => void;
+  small?: boolean;
+}) {
+  const active = false;
+  return (
+    <button
+      className={`flex border border-gray-400 dark:border-gray-400 flex-row h-12 min-h-12 max-h-12 px-4 py-0.5 items-center rounded-full transition-colors gap-1 ${
+        active
+          ? "text-gray-900 dark:text-gray-100 hover:bg-gray-300 dark:bg-gray-700 bg-gray-200 hover:dark:bg-gray-600"
+          : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800"
+      }`}
+      onClick={() => {
+        onClickCallbback();
+      }}
+    >
+      <div className={`mr-2 ${active ? " " : " "}`}>
+        {active ? ActiveIcon : InactiveIcon}
+      </div>
+      <span
+        className={`text-[16px] text-roboto ${active ? "font-medium" : ""}`}
+      >
+        {text}
+      </span>
+    </button>
+  );
+}

src/routes/index.tsx

···
 import * as React from "react";
 import { useEffect, useLayoutEffect } from "react";
 
+import { Header } from "~/components/Header";
 import { InfiniteCustomFeed } from "~/components/InfiniteCustomFeed";
 import { useAuth } from "~/providers/UnifiedAuthProvider";
 import {
···
     <div
       className={`relative flex flex-col divide-y divide-gray-200 dark:divide-gray-800 ${hidden && "hidden"}`}
     >
-      <div className="flex items-center gap-2 px-4 py-2 h-[52px] sticky top-0 bg-white dark:bg-gray-950 z-10 border-b border-gray-200 dark:border-gray-700 overflow-x-auto overflow-y-hidden scroll-thin">
-        {savedFeeds.length > 0 ? (
-          savedFeeds.map((item: any, idx: number) => {
+      {savedFeeds.length > 0 ? (
+        <div className="flex items-center px-4 py-2 h-[52px] sticky top-0 bg-white dark:bg-gray-950 z-10 border-b border-gray-200 dark:border-gray-700 overflow-x-auto overflow-y-hidden scroll-thin">
+          {savedFeeds.map((item: any, idx: number) => {
             const label = item.value.split("/").pop() || item.value;
             const isActive = selectedFeed === item.value;
             return (
···
                 key={item.value || idx}
                 className={`px-3 py-1 rounded-full whitespace-nowrap font-medium transition-colors ${
                   isActive
-                    ? "bg-gray-500 text-white"
-                    : item.pinned
-                      ? "bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200"
-                      : "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-200"
+                    ? "text-gray-900 dark:text-gray-100 hover:bg-gray-300 dark:bg-gray-700 bg-gray-200 hover:dark:bg-gray-600"
+                    : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800"
+                  // ? "bg-gray-500 text-white"
+                  // : item.pinned
+                  //   ? "bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200"
+                  //   : "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-200"
                 }`}
                 onClick={() => setSelectedFeed(item.value)}
                 title={item.value}
               >
                 {label}
                 {item.pinned && (
-                  <span className="ml-1 text-xs text-gray-700 dark:text-gray-200">
+                  <span
+                    className={`ml-1 text-xs ${
+                      isActive
+                        ? "text-gray-900 dark:text-gray-100 hover:bg-gray-300 dark:bg-gray-700 bg-gray-200 hover:dark:bg-gray-600"
+                        : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800"
+                    }`}
+                  >
                     ★
                   </span>
                 )}
               </button>
             );
-          })
-        ) : (
-          <span className="text-xl font-bold ml-2">Home</span>
-        )}
-      </div>
+          })}
+        </div>
+      ) : (
+        // <span className="text-xl font-bold ml-2">Home</span>
+        <Header title="Home" />
+      )}
       {/* {isFeedLoading && <div className="p-4 text-gray-500">Loading...</div>}
       {feedError && <div className="p-4 text-red-500">{feedError.message}</div>}
       {!isFeedLoading && !feedError && feed.length === 0 && (

src/routes/profile.$did/index.tsx

···
 import { useQueryClient } from "@tanstack/react-query";
-import { createFileRoute, Link } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
 import React from "react";
 
+import { Header } from "~/components/Header";
 import { UniversalPostRendererATURILoader } from "~/components/UniversalPostRenderer";
 import { useAuth } from "~/providers/UnifiedAuthProvider";
 import { toggleFollow, useGetFollowState } from "~/utils/followState";
···
 
   return (
     <>
-      <div className="flex gap-2 px-4 py-2 h-[52px] sticky top-0 bg-white dark:bg-gray-950 z-10 border-b border-gray-200 dark:border-gray-700">
+      <Header
+        title={`Profile`}
+        backButtonCallback={() => {
+          if (window.history.length > 1) {
+            window.history.back();
+          } else {
+            window.location.assign("/");
+          }
+        }}
+      />
+      {/* <div className="flex gap-2 px-4 py-2 h-[52px] sticky top-0 bg-white dark:bg-gray-950 z-10 border-b border-gray-200 dark:border-gray-700">
         <Link
           to=".."
           className="px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-900 font-bold text-lg"
···
           ←
         </Link>
         <span className="text-xl font-bold ml-2">Profile</span>
-      </div>
+      </div> */}
 
       {/* Profile Header */}
       <div className="w-full max-w-2xl mx-auto overflow-hidden relative bg-gray-100 dark:bg-gray-900">

src/routes/profile.$did/post.$rkey.tsx

···
 import { createFileRoute } from "@tanstack/react-router";
 import React, { useLayoutEffect } from "react";
 
+import { Header } from "~/components/Header";
 import { UniversalPostRendererATURILoader } from "~/components/UniversalPostRenderer";
 //import { usePersistentStore } from '~/providers/PersistentStoreProvider';
 import {
···
 
   return (
     <>
-      <div className="flex items-center gap-2 px-4 py-2 h-[52px] sticky top-0 bg-white dark:bg-gray-950 z-10 border-b border-gray-200 dark:border-gray-700">
-        {!nopics ? (
-          <button
-            //to=".."
-            className="px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-900 font-bold text-lg"
-            onClick={(e) => {
-              e.preventDefault();
-              if (window.history.length > 1) {
-                window.history.back();
-              } else {
-                window.location.assign("/");
+      <Header
+        title={`Post`}
+        backButtonCallback={
+          nopics
+            ? nopics
+            : () => {
+                if (window.history.length > 1) {
+                  window.history.back();
+                } else {
+                  window.location.assign("/");
+                }
               }
-            }}
-            aria-label="Go back"
-          >
-            ←
-          </button>
-        ) : (
-          <button
-            //to=".."
-            className="px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-900 font-bold text-lg"
-            onClick={(e) => {
-              e.preventDefault();
-              nopics();
-            }}
-            aria-label="Go back"
-          >
-            ←
-          </button>
-        )}
-        <span className="text-xl font-bold ml-2">Post</span>
-      </div>
+        }
+      />
 
       {parentsLoading && (
         <div className="text-center text-gray-500 dark:text-gray-400 flex flex-row">

src/styles/app.css

···
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Spectral+SC:wght@500&display=swap');
 @import "tailwindcss";
 
 /* @theme {
···
     color: rgb(29, 122, 242);
     word-break: break-all;
   }
+}
+
+.font-inter {
+  font-family: "Inter", sans-serif;
+}
+.font-roboto {
+  font-family: "Roboto", sans-serif;
 }

vite.config.ts

···
         IconsResolver({
           prefix: 'Icon',
           extension: 'jsx',
+          enabledCollections: ['mdi','material-symbols'],
         }),
       ],
       dts: 'src/auto-imports.d.ts',
     }),
     Icons({
-      autoInstall: true,
+      //autoInstall: true,
       compiler: 'jsx',
       jsx: 'react'
     }),