diff --git a/.github/workflows/video-backend-ci.yml b/.github/workflows/video-backend-ci.yml
index 718856a4..0ab3e2d6 100644
--- a/.github/workflows/video-backend-ci.yml
+++ b/.github/workflows/video-backend-ci.yml
@@ -15,25 +15,33 @@ jobs:
     - name: Checkout Repository
       uses: actions/checkout@v4
 
+    - name: Setup pnpm
+      uses: pnpm/action-setup@v3
+      with:
+        version: 9
+
     - name: Setup Node.js
       uses: actions/setup-node@v4
       with:
         node-version: '20'
-        cache: 'npm'
+        cache: 'pnpm'
+        cache-dependency-path: pnpm-lock.yaml
 
     - name: Install Dependencies
-      run: npm ci
+      run: pnpm install --frozen-lockfile
 
     - name: Run Prisma Generate
-      run: npx prisma generate
+      run: pnpm exec prisma generate
+      env:
+        DATABASE_URL: 'postgresql://postgres:postgres@localhost:5432/postgres'
 
     - name: ESLint Check
-      run: npm run lint
+      run: pnpm run lint
 
     - name: Run Vitest Suite (Unit & Integration)
-      run: npm run test
+      run: pnpm run test
 
     - name: Build Next.js 15
-      run: npm run build
+      run: pnpm run build
       env:
         NEXT_TELEMETRY_DISABLED: 1
diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 00000000..156d9dc3
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,4 @@
+
+## 2024-03-23 - [Adding Keyboard Focus Rings to Custom Components]
+**Learning:** Custom components like `motion.button` and pure visual elements (like styled `div` wrappers) easily lose their keyboard navigability when stripped of native HTML button semantics. In `Navbar.tsx`, interactive icons and visually simulated buttons lacked the `focus-visible` ring.
+**Action:** When working on navigation or custom component libraries in this app, explicitly use `focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:outline-none` on interactive elements to ensure they do not become "dead ends" for keyboard users, and convert interactive `div` wrappers into native `<button>` tags so they can receive tab focus naturally.
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 07851afe..014c4115 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,3 +1,6 @@
+packages:
+  - '.'
+
 onlyBuiltDependencies:
   - '@firebase/util'
   - '@prisma/engines'
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index f4f7739c..d87048e7 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -32,17 +32,20 @@ export default function Navbar() {
         </div>
         
         <div className="flex items-center gap-8">
-          <div className="hidden md:flex items-center gap-3 px-4 py-2 rounded-full bg-white/5 border border-white/5 text-slate-400 hover:text-white hover:bg-white/10 transition-all cursor-pointer group">
+          <button
+            aria-label="Search Commands"
+            className="hidden md:flex items-center gap-3 px-4 py-2 rounded-full bg-white/5 border border-white/5 text-slate-400 hover:text-white hover:bg-white/10 transition-all cursor-pointer group focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:outline-none"
+          >
             <Search className="w-4 h-4 group-hover:scale-110 transition-transform" />
             <span className="text-xs font-bold tracking-wider">SEARCH COMMANDS</span>
             <span className="text-[10px] bg-white/10 px-1.5 py-0.5 rounded border border-white/10 font-mono">⌘K</span>
-          </div>
+          </button>
 
           <div className="flex items-center gap-4">
-            <IconButton icon={<Bell className="w-5 h-5" />} />
-            <IconButton icon={<User className="w-5 h-5" />} />
+            <IconButton icon={<Bell className="w-5 h-5" />} ariaLabel="Notifications" />
+            <IconButton icon={<User className="w-5 h-5" />} ariaLabel="User Profile" />
             <div className="h-8 w-[1px] bg-white/10 mx-2" />
-            <div className="flex items-center gap-3 px-4 py-2 rounded-xl bg-emerald-500/10 border border-emerald-500/20 group cursor-pointer">
+            <div className="flex items-center gap-3 px-4 py-2 rounded-xl bg-emerald-500/10 border border-emerald-500/20 group cursor-pointer" title="System Status: Online" aria-label="System Status: Online">
               <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse shadow-[0_0_10px_rgba(16,185,129,0.5)]" />
               <span className="text-[10px] font-black text-emerald-500 tracking-widest uppercase">System Online</span>
             </div>
@@ -55,19 +58,21 @@ export default function Navbar() {
 
 function NavLink({ href, label }: { href: string, label: string }) {
   return (
-    <Link href={href} className="text-xs font-black text-slate-400 hover:text-white tracking-widest uppercase transition-colors relative group">
+    <Link href={href} className="text-xs font-black text-slate-400 hover:text-white tracking-widest uppercase transition-colors relative group focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:outline-none focus-visible:rounded">
       {label}
       <span className="absolute -bottom-2 left-0 w-0 h-[2px] bg-indigo-500 group-hover:w-full transition-all duration-300" />
     </Link>
   );
 }
 
-function IconButton({ icon }: { icon: React.ReactNode }) {
+function IconButton({ icon, ariaLabel }: { icon: React.ReactNode, ariaLabel: string }) {
   return (
     <motion.button
       whileHover={{ scale: 1.1, y: -2 }}
       whileTap={{ scale: 0.9 }}
-      className="p-2.5 rounded-xl bg-white/5 border border-white/5 text-slate-400 hover:text-white hover:bg-white/10 transition-all"
+      aria-label={ariaLabel}
+      title={ariaLabel}
+      className="p-2.5 rounded-xl bg-white/5 border border-white/5 text-slate-400 hover:text-white hover:bg-white/10 transition-all focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:outline-none"
     >
       {icon}
     </motion.button>