diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..e86a6ac
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-12 - Navbar Accessibility Improvements
+**Learning:** Interactive disclosure widgets (like dropdowns and mobile menus) across the app were missing `aria-expanded` attributes and visible focus rings, hindering keyboard and screen reader accessibility.
+**Action:** Add `aria-expanded`, `aria-haspopup`, `aria-label`, and explicit focus rings (`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500`) to all such interactive elements to comply with keyboard accessibility standards.
\ No newline at end of file
diff --git a/src/components/layout/Navbar.jsx b/src/components/layout/Navbar.jsx
index de3fea5..da9bef3 100644
--- a/src/components/layout/Navbar.jsx
+++ b/src/components/layout/Navbar.jsx
@@ -21,7 +21,7 @@ const Navbar = () => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const dropdownRef = useRef(null);
   const location = useLocation();
-  const { theme, toggleTheme, isDark } = useTheme();
+  const { toggleTheme, isDark } = useTheme();
 
   // Close dropdown when clicking outside
   useEffect(() => {
@@ -95,7 +95,9 @@ const Navbar = () => {
             <div className="relative" ref={dropdownRef}>
               <button
                 onClick={toggleDropdown}
-                className={`flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ${location.pathname.startsWith('/forum')
+                aria-expanded={isDropdownOpen}
+                aria-haspopup="menu"
+                className={`flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 ${location.pathname.startsWith('/forum')
                     ? 'text-accent-500 bg-accent-50 dark:bg-navy-800'
                     : 'text-gray-700 dark:text-slate-300 hover:text-accent-500 hover:bg-gray-50 dark:hover:bg-navy-800'
                   }`}
@@ -139,7 +141,7 @@ const Navbar = () => {
             {/* Theme Toggle Button */}
             <button
               onClick={toggleTheme}
-              className="p-2 rounded-lg text-gray-600 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-navy-800 transition-all duration-300"
+              className="p-2 rounded-lg text-gray-600 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-navy-800 transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500"
               aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
             >
               <FontAwesomeIcon
@@ -161,7 +163,7 @@ const Navbar = () => {
             {/* Theme Toggle - Mobile */}
             <button
               onClick={toggleTheme}
-              className="p-2 rounded-lg text-gray-600 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-navy-800 transition-colors duration-200"
+              className="p-2 rounded-lg text-gray-600 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-navy-800 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500"
               aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
             >
               <FontAwesomeIcon
@@ -172,7 +174,9 @@ const Navbar = () => {
 
             <button
               onClick={toggleMobile}
-              className="text-gray-700 dark:text-slate-300 hover:text-accent-500 p-2"
+              aria-expanded={isOpen}
+              aria-label="Toggle mobile menu"
+              className="text-gray-700 dark:text-slate-300 hover:text-accent-500 p-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 rounded-md"
             >
               <FontAwesomeIcon icon={isOpen ? faTimes : faBars} className="text-xl" />
             </button>