diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 00000000..c733e11e
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-18 - Convert interactive `div` elements to semantic `button`s in custom components
+**Learning:** In Next.js with Tailwind CSS, custom interactive UI elements built as `div`s with `cursor-pointer` lack inherent keyboard navigation (Tab-ability) and explicit ARIA roles. The use of `motion.button` and `<button>` requires specific tailwind utility classes for accessible focusing.
+**Action:** Always convert interactive `div` wrappers acting as controls into standard `button` or `motion.button` elements. Additionally, explicitly apply `focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:outline-none` classes to these buttons to ensure standard and prominent focus indicators are visible when interacting with keyboard navigation.
diff --git a/dev_server.log b/dev_server.log
new file mode 100644
index 00000000..a664b858
--- /dev/null
+++ b/dev_server.log
@@ -0,0 +1,19 @@
+
+> omni-tool-nextjs@1.0.0 dev /app
+> cross-env PORT=3000 next dev --webpack
+
+▲ Next.js 16.2.1 (webpack)
+- Local:         http://localhost:3000
+- Network:       http://192.168.0.2:3000
+✓ Ready in 585ms
+Attention: Next.js now collects completely anonymous telemetry regarding usage.
+This information is used to shape Next.js' roadmap and prioritize features.
+You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
+https://nextjs.org/telemetry
+
+- Experiments (use with caution):
+  · serverActions
+
+○ Compiling / ...
+ GET / 200 in 15.1s (next.js: 14.7s, application-code: 465ms)
+ GET / 200 in 134ms (next.js: 11ms, application-code: 123ms)
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index f4f7739c..e5d61b04 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -32,20 +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 type="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">
+            <button type="button" aria-label="System status" className="flex items-center gap-3 px-4 py-2 rounded-xl bg-emerald-500/10 border border-emerald-500/20 group cursor-pointer focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:outline-none">
               <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>
+            </button>
           </div>
         </div>
       </div>
@@ -62,12 +62,13 @@ function NavLink({ href, label }: { href: string, label: string }) {
   );
 }
 
-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}
+      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>