diff --git a/app/(editor)/create/[[...paramsArr]]/_client.tsx b/app/(editor)/create/[[...paramsArr]]/_client.tsx
index 40118161..b2fad1e9 100644
--- a/app/(editor)/create/[[...paramsArr]]/_client.tsx
+++ b/app/(editor)/create/[[...paramsArr]]/_client.tsx
@@ -557,7 +557,7 @@ const Create = ({ session }: { session: Session | null }) => {
                                 type="button"
                                 className="relative flex w-full focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-offset-2 active:hover:bg-neutral-50 disabled:opacity-50"
                               >
-                                <div className="input-base flex max-w-full flex-1 overflow-hidden border text-left">
+                                <div className="block w-full max-w-full flex-1 overflow-hidden border px-2 py-2 text-left text-black shadow-sm ring-offset-1 focus:border-pink-500 focus:outline-none focus:ring-2 focus:ring-neutral-300 disabled:opacity-50 dark:border-white dark:bg-black dark:text-white sm:text-sm">
                                   {PREVIEW_URL}
                                 </div>
                                 <div className="absolute bottom-0 right-0 top-0 w-[120px] border border-neutral-300 bg-white px-4 py-2 font-medium text-neutral-600 shadow-sm">
diff --git a/app/(editor)/create/[[...paramsArr]]/navigation.tsx b/app/(editor)/create/[[...paramsArr]]/navigation.tsx
index d1b5397d..1af81912 100644
--- a/app/(editor)/create/[[...paramsArr]]/navigation.tsx
+++ b/app/(editor)/create/[[...paramsArr]]/navigation.tsx
@@ -9,6 +9,7 @@ import { Fragment } from "react";
 import { type Session } from "next-auth";
 import Logo from "@/icons/logo.svg";
 import { type PostStatus, status } from "@/utils/post";
+import Focusable from "@/components/Focusable/Focusable";
 
 type EditorNavProps = {
   session: Session | null;
@@ -83,16 +84,18 @@ const EditorNav = ({
 
             {session && (
               <>
-                <Link
-                  href="/notifications"
-                  className="focus-style relative rounded-full p-1 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-600 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-white"
-                >
-                  <span className="sr-only">View notifications</span>
-                  {hasNotifications && (
-                    <div className="absolute right-0 top-0 h-2 w-2 rounded-full bg-pink-500" />
-                  )}
-                  <BellIcon className="h-5 w-5" aria-hidden="true" />
-                </Link>
+                <Focusable>
+                  <Link
+                    href="/notifications"
+                    className="relative rounded-full p-1 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-600 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-white"
+                  >
+                    <span className="sr-only">View notifications</span>
+                    {hasNotifications && (
+                      <div className="absolute right-0 top-0 h-2 w-2 rounded-full bg-pink-500" />
+                    )}
+                    <BellIcon className="h-5 w-5" aria-hidden="true" />
+                  </Link>
+                </Focusable>
                 <Menu as="div" className="relative ml-3">
                   <div>
                     <Menu.Button className="flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2">
diff --git a/components/ArticleMenu/ArticleMenu.tsx b/components/ArticleMenu/ArticleMenu.tsx
index faa034fb..b24ff9e5 100644
--- a/components/ArticleMenu/ArticleMenu.tsx
+++ b/components/ArticleMenu/ArticleMenu.tsx
@@ -19,6 +19,7 @@ import copy from "copy-to-clipboard";
 import { type Session } from "next-auth";
 import { signIn } from "next-auth/react";
 import { ReportModal } from "../ReportModal/ReportModal";
+import Focusable from "../Focusable/Focusable";
 
 interface CopyToClipboardOption {
   label: string;
@@ -148,27 +149,28 @@ const ArticleMenu = ({
             </button>
             <span>{data?.likes || 0}</span>
           </div>
-
-          <button
-            className="focus-style-rounded rounded-full p-1 hover:bg-neutral-300 dark:hover:bg-neutral-800 lg:mx-auto"
-            aria-label="bookmark-trigger"
-            onClick={() => {
-              if (!session) {
-                signIn();
-              }
-              if (data?.currentUserBookmarked)
-                return bookmarkPost(postId, false);
-              bookmarkPost(postId);
-            }}
-          >
-            <BookmarkIcon
-              className={`w-6 h-6${
-                data?.currentUserBookmarked
-                  ? "fill-blue-400"
-                  : "fill-neutral-400 dark:fill-neutral-600"
-              }`}
-            />
-          </button>
+          <Focusable rounded={true}>
+            <button
+              className="rounded-full p-1 hover:bg-neutral-300 dark:hover:bg-neutral-800 lg:mx-auto"
+              aria-label="bookmark-trigger"
+              onClick={() => {
+                if (!session) {
+                  signIn();
+                }
+                if (data?.currentUserBookmarked)
+                  return bookmarkPost(postId, false);
+                bookmarkPost(postId);
+              }}
+            >
+              <BookmarkIcon
+                className={`w-6 h-6${
+                  data?.currentUserBookmarked
+                    ? "fill-blue-400"
+                    : "fill-neutral-400 dark:fill-neutral-600"
+                }`}
+              />
+            </button>
+          </Focusable>
 
           <Popover className="relative ml-4">
             <PopoverButton
diff --git a/components/ArticlePreview/ArticlePreview.tsx b/components/ArticlePreview/ArticlePreview.tsx
index 930a49f3..af60d19f 100644
--- a/components/ArticlePreview/ArticlePreview.tsx
+++ b/components/ArticlePreview/ArticlePreview.tsx
@@ -19,6 +19,7 @@ import {
 import { api } from "@/server/trpc/react";
 import { signIn, useSession } from "next-auth/react";
 import { toast } from "sonner";
+import Focusable from "../Focusable/Focusable";
 
 type ButtonOptions = {
   label: string;
@@ -165,29 +166,31 @@ const ArticlePreview: NextPage<Props> = ({
           </Link>
           <div className="flex gap-x-2">
             {showBookmark && (
-              <button
-                className="focus-style-rounded rounded-full p-2 hover:bg-neutral-300 dark:hover:bg-neutral-800 lg:mx-auto"
-                onClick={() => {
-                  if (!session) {
-                    return signIn();
+              <Focusable rounded={true}>
+                <button
+                  className="rounded-full p-2 hover:bg-neutral-300 dark:hover:bg-neutral-800 lg:mx-auto"
+                  onClick={() => {
+                    if (!session) {
+                      return signIn();
+                    }
+                    if (bookmarked) {
+                      return bookmarkPost(id, false);
+                    }
+                    bookmarkPost(id);
+                  }}
+                  aria-label={
+                    bookmarked ? "Remove bookmark" : "Bookmark this post"
                   }
-                  if (bookmarked) {
-                    return bookmarkPost(id, false);
-                  }
-                  bookmarkPost(id);
-                }}
-                aria-label={
-                  bookmarked ? "Remove bookmark" : "Bookmark this post"
-                }
-              >
-                <BookmarkIcon
-                  className={`w-6 h-6${
-                    bookmarked
-                      ? "fill-blue-400"
-                      : "fill-neutral-400 dark:fill-neutral-600"
-                  }`}
-                />
-              </button>
+                >
+                  <BookmarkIcon
+                    className={`w-6 h-6${
+                      bookmarked
+                        ? "fill-blue-400"
+                        : "fill-neutral-400 dark:fill-neutral-600"
+                    }`}
+                  />
+                </button>
+              </Focusable>
             )}
             {menuOptions && (
               <Menu as="div" className="relative">
diff --git a/components/Focusable/Focusable.tsx b/components/Focusable/Focusable.tsx
new file mode 100644
index 00000000..167a49a0
--- /dev/null
+++ b/components/Focusable/Focusable.tsx
@@ -0,0 +1,15 @@
+import React, { cloneElement, ReactElement } from "react";
+
+interface FocusableProps {
+  children: ReactElement;
+  rounded?: boolean;
+}
+
+const Focusable: React.FC<FocusableProps> = ({ children, rounded = false }) => {
+  return cloneElement(children, {
+    className: `${children.props.className} 
+  ${rounded ? "rounded-full" : "rounded-md"} focus:outline-none focus:ring-white focus-visible:ring-2 focus-visible:ring-pink-600 focus-visible:ring-offset-pink-600`,
+  });
+};
+
+export default Focusable;
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
index b9377929..9fc3d970 100644
--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@@ -13,27 +13,32 @@ import {
   twitterUrl,
   youtubeUrl,
 } from "../../config/site_settings";
+import Focusable from "../Focusable/Focusable";
 
 const navigation = {
   main: footerNav,
   social: [
     {
       name: "Twitter",
+      customStyle: "hover:bg-twitter focus:bg-twitter",
       href: twitterUrl,
       icon: Twitter,
     },
     {
       name: "GitHub",
+      customStyle: "hover:bg-github focus:bg-github",
       href: githubUrl,
       icon: Github,
     },
     {
       name: "Discord",
+      customStyle: "hover:bg-discord focus:bg-discord",
       href: discordInviteUrl,
       icon: Discord,
     },
     {
-      name: "Youtube",
+      name: "YouTube",
+      customStyle: "hover:bg-youtube focus:bg-youtube",
       href: youtubeUrl,
       icon: Youtube,
     },
@@ -51,37 +56,43 @@ const Footer = () => {
           {navigation.main.map((item) => (
             <div key={item.name} className="px-5 py-2">
               {item.href.includes("http") ? (
-                <a
-                  href={item.href}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="focus-style p-1 text-base text-neutral-600 hover:text-neutral-500 dark:text-neutral-500 dark:hover:text-neutral-400"
-                >
-                  {item.name}
-                </a>
+                <Focusable>
+                  <a
+                    href={item.href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="p-1 text-base text-neutral-600 hover:text-neutral-500 dark:text-neutral-500 dark:hover:text-neutral-400"
+                  >
+                    {item.name}
+                  </a>
+                </Focusable>
               ) : (
-                <Link
-                  className="focus-style p-1 text-base text-neutral-600 hover:text-neutral-500 dark:text-neutral-500 dark:hover:text-neutral-400"
-                  href={item.href}
-                >
-                  {item.name}
-                </Link>
+                <Focusable>
+                  <Link
+                    className="p-1 text-base text-neutral-600 hover:text-neutral-500 dark:text-neutral-500 dark:hover:text-neutral-400"
+                    href={item.href}
+                  >
+                    {item.name}
+                  </Link>
+                </Focusable>
               )}
             </div>
           ))}
         </nav>
         <div className="mt-8 flex justify-center space-x-8">
           {navigation.social.map((item) => (
-            <a
-              key={item.name}
-              href={item.href}
-              target="_blank"
-              rel="noopener noreferrer"
-              className={`focus-style rounded-md p-1 transition-all duration-300 hover:scale-105 hover:text-white hover:brightness-110 focus:scale-105 focus:text-white focus:brightness-110 ${item.name.toLowerCase()}`}
-            >
-              <span className="sr-only">{item.name}</span>
-              <item.icon className="h-6 w-6" aria-hidden="true" />
-            </a>
+            <Focusable>
+              <a
+                key={item.name}
+                href={item.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={`rounded-md p-1 transition-all duration-300 hover:scale-105 hover:text-white hover:brightness-110 focus:scale-105 focus:text-white focus:brightness-110 ${item.customStyle.toLowerCase()}`}
+              >
+                <span className="sr-only">{item.name}</span>
+                <item.icon className="h-6 w-6" aria-hidden="true" />
+              </a>
+            </Focusable>
           ))}
         </div>
         <p className="mt-8 text-center text-xs text-neutral-600 dark:text-neutral-500">
diff --git a/components/Nav/Nav.tsx b/components/Nav/Nav.tsx
index 8f653969..682f06d9 100644
--- a/components/Nav/Nav.tsx
+++ b/components/Nav/Nav.tsx
@@ -20,6 +20,7 @@ import AnimatedHamburger from "./AnimatedHamburger";
 import Logo from "@/icons/logo.svg";
 import MobileNav from "./MobileNav";
 import { MobileSearch, Search } from "@/components/ui/Search";
+import Focusable from "../Focusable/Focusable";
 
 type AlgoliaConfig = {
   ALGOLIA_APP_ID: string;
@@ -83,7 +84,7 @@ const Nav = ({
                           href={item.href}
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="nav-button focus-style p-4"
+                          className="nav-button p-4"
                         >
                           {item.name}
                         </a>
@@ -135,16 +136,18 @@ const Nav = ({
 
                   {session && (
                     <>
-                      <Link
-                        to="/notifications"
-                        className="focus-style relative flex-shrink-0 rounded-md p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-600 dark:text-neutral-400 dark:hover:bg-neutral-900 dark:hover:text-white"
-                      >
-                        <span className="sr-only">View notifications</span>
-                        {hasNotifications && (
-                          <div className="absolute right-2 top-2 h-2 w-2 animate-pulse rounded-full bg-pink-600" />
-                        )}
-                        <BellIcon className="h-6 w-6" aria-hidden="true" />
-                      </Link>
+                      <Focusable>
+                        <Link
+                          to="/notifications"
+                          className="relative flex-shrink-0 rounded-md p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-600 dark:text-neutral-400 dark:hover:bg-neutral-900 dark:hover:text-white"
+                        >
+                          <span className="sr-only">View notifications</span>
+                          {hasNotifications && (
+                            <div className="absolute right-2 top-2 h-2 w-2 animate-pulse rounded-full bg-pink-600" />
+                          )}
+                          <BellIcon className="h-6 w-6" aria-hidden="true" />
+                        </Link>
+                      </Focusable>
                       <Menu as="div" className="relative ml-4">
                         <div>
                           <MenuButton className="flex rounded-full bg-black text-sm ring-offset-2 focus:outline-none focus:ring-2 focus:ring-pink-600 focus:ring-offset-2 focus:ring-offset-white">
@@ -204,22 +207,26 @@ const Nav = ({
                 <MobileSearch algoliaSearchConfig={algoliaSearchConfig} />
                 <ThemeToggle />
                 {session && (
-                  <Link
-                    to="/notifications"
-                    className="focus-style relative flex-shrink-0 rounded-md p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-600 dark:text-neutral-400 dark:hover:bg-neutral-900 dark:hover:text-white"
-                  >
-                    <span className="sr-only">View notifications</span>
-                    {hasNotifications && (
-                      <div className="absolute right-1 top-1 h-2 w-2 animate-pulse rounded-full bg-pink-500" />
-                    )}
-                    <BellIcon className="h-6 w-6" aria-hidden="true" />
-                  </Link>
+                  <Focusable>
+                    <Link
+                      to="/notifications"
+                      className="relative flex-shrink-0 rounded-md p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-600 dark:text-neutral-400 dark:hover:bg-neutral-900 dark:hover:text-white"
+                    >
+                      <span className="sr-only">View notifications</span>
+                      {hasNotifications && (
+                        <div className="absolute right-1 top-1 h-2 w-2 animate-pulse rounded-full bg-pink-500" />
+                      )}
+                      <BellIcon className="h-6 w-6" aria-hidden="true" />
+                    </Link>
+                  </Focusable>
                 )}
                 {/* Mobile menu button */}
-                <DisclosureButton className="nav-button focus-style group">
-                  <span className="sr-only">Open main menu</span>
-                  <AnimatedHamburger open={open} />
-                </DisclosureButton>
+                <Focusable>
+                  <DisclosureButton className="nav-button group">
+                    <span className="sr-only">Open main menu</span>
+                    <AnimatedHamburger open={open} />
+                  </DisclosureButton>
+                </Focusable>
               </div>
             </div>
           </div>
diff --git a/components/Theme/ThemeToggle/ThemeToggle.tsx b/components/Theme/ThemeToggle/ThemeToggle.tsx
index 53b62c19..1fbaa50d 100644
--- a/components/Theme/ThemeToggle/ThemeToggle.tsx
+++ b/components/Theme/ThemeToggle/ThemeToggle.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Focusable from "@/components/Focusable/Focusable";
 import { MoonIcon, SunIcon } from "@heroicons/react/20/solid";
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
@@ -26,17 +27,19 @@ const ThemeToggle = () => {
   };
 
   return (
-    <button
-      onClick={toggleTheme}
-      aria-pressed={resolvedTheme === THEME_MODES.DARK}
-      className="nav-button focus-style group relative flex-shrink-0 p-4 focus:ring-inset"
-      type="button"
-      title="Toggle dark mode"
-    >
-      <span className="sr-only">Toggle Dark Mode</span>
-      <SunIcon className="h-6 w-6 rotate-0 scale-100 text-neutral-500 group-hover:text-yellow-500 group-focus:text-yellow-500 motion-safe:transition-all dark:-rotate-90 dark:scale-0" />
-      <MoonIcon className="absolute left-1/2 top-1/2 h-6 w-6 -translate-x-1/2 -translate-y-1/2 rotate-90 scale-0 transform text-neutral-400 group-hover:text-white motion-safe:transition-all dark:rotate-0 dark:scale-100" />
-    </button>
+    <Focusable>
+      <button
+        onClick={toggleTheme}
+        aria-pressed={resolvedTheme === THEME_MODES.DARK}
+        className="nav-button group relative flex-shrink-0 p-4 focus:ring-inset"
+        type="button"
+        title="Toggle dark mode"
+      >
+        <span className="sr-only">Toggle Dark Mode</span>
+        <SunIcon className="h-6 w-6 rotate-0 scale-100 text-neutral-500 group-hover:text-yellow-500 group-focus:text-yellow-500 motion-safe:transition-all dark:-rotate-90 dark:scale-0" />
+        <MoonIcon className="absolute left-1/2 top-1/2 h-6 w-6 -translate-x-1/2 -translate-y-1/2 rotate-90 scale-0 transform text-neutral-400 group-hover:text-white motion-safe:transition-all dark:rotate-0 dark:scale-100" />
+      </button>
+    </Focusable>
   );
 };
 
diff --git a/components/ui/Search.tsx b/components/ui/Search.tsx
index e202ed12..71ca3a88 100644
--- a/components/ui/Search.tsx
+++ b/components/ui/Search.tsx
@@ -29,6 +29,7 @@ import {
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import clsx from "clsx";
 import Image from "next/image";
+import Focusable from "../Focusable/Focusable";
 
 type Result = {
   title: string;
@@ -540,14 +541,16 @@ export function MobileSearch({
 
   return (
     <div className="contents lg:hidden">
-      <button
-        type="button"
-        className="focus-style relative flex-shrink-0 rounded-md p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-600 dark:text-neutral-400 dark:hover:bg-neutral-900 dark:hover:text-white"
-        aria-label="Search the site"
-        {...buttonProps}
-      >
-        <MagnifyingGlassIcon className="h-6 w-6 stroke-current" />
-      </button>
+      <Focusable>
+        <button
+          type="button"
+          className="relative flex-shrink-0 rounded-md p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-600 dark:text-neutral-400 dark:hover:bg-neutral-900 dark:hover:text-white"
+          aria-label="Search the site"
+          {...buttonProps}
+        >
+          <MagnifyingGlassIcon className="h-6 w-6 stroke-current" />
+        </button>
+      </Focusable>
       <Suspense fallback={null}>
         <SearchDialog
           algoliaSearchConfig={algoliaSearchConfig}
diff --git a/styles/globals.css b/styles/globals.css
index 9369387b..26030f1a 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,12 +1,5 @@
 @tailwind base;
 
-:root {
-  --discord-clr: linear-gradient(to bottom, #4b83fb, #734df8);
-  --youtube-clr: linear-gradient(to top, #6d0202 22%, #c90000 61%);
-  --github-clr: #f17f06;
-  --twitter-clr: #282828;
-}
-
 body {
   @apply bg-neutral-100 text-neutral-900 dark:bg-black dark:text-white;
 }
@@ -45,10 +38,6 @@ body {
   }
 }
 
-.input-base {
-  @apply block w-full border px-2 py-2 text-black shadow-sm ring-offset-1 focus:border-pink-500 focus:outline-none focus:ring-2 focus:ring-neutral-300 disabled:opacity-50 dark:border-white dark:bg-black dark:text-white sm:text-sm;
-}
-
 .nav-button {
   @apply focus-style rounded-md px-2 py-2 text-neutral-900 hover:bg-neutral-200 hover:text-black focus:text-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-900 dark:hover:text-white dark:focus:text-white;
 }
@@ -57,10 +46,6 @@ body {
   @apply rounded-md focus:outline-none focus:ring-white focus-visible:ring-2 focus-visible:ring-pink-600 focus-visible:ring-offset-pink-600;
 }
 
-.focus-style-rounded {
-  @apply rounded-full focus:outline-none focus:ring-white focus-visible:ring-2 focus-visible:ring-pink-600 focus-visible:ring-offset-pink-600;
-}
-
 .primary-button {
   @apply inline-flex justify-center rounded-md bg-gradient-to-r from-orange-400 to-pink-600 px-4 py-2 font-medium text-white shadow-sm hover:from-orange-300 hover:to-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-600 focus:ring-offset-2 focus-visible:ring-2 focus-visible:ring-pink-600 focus-visible:ring-offset-white disabled:border-neutral-300 disabled:from-neutral-500 disabled:to-neutral-700 disabled:text-neutral-300 disabled:hover:text-neutral-300;
 }
@@ -261,7 +246,7 @@ pre {
   scrollbar-width: none; /* Firefox */
 }
 
-.rehype-code-title {
+/* .rehype-code-title {
   @apply rounded-t-lg border border-b-0 border-neutral-200 bg-neutral-200 px-5 py-3 font-mono text-sm font-bold text-neutral-800 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200;
 }
 
@@ -271,7 +256,7 @@ pre {
 
 .highlight-line {
   @apply -mx-4 block border-l-4 border-blue-500 bg-neutral-100 px-4 dark:bg-neutral-800;
-}
+} */
 
 /* Remove Safari input shadow on mobile */
 input[type="text"],
@@ -332,21 +317,6 @@ table div {
   animation: loader-dots3 0.6s infinite;
 }
 
-/* Footer social hover effects */
-
-.twitter {
-  @apply hover:bg-twitter focus:bg-twitter;
-}
-.github {
-  @apply hover:bg-github focus:bg-github;
-}
-.discord {
-  @apply hover:bg-discord focus:bg-discord;
-}
-.youtube {
-  @apply hover:bg-youtube focus:bg-youtube;
-}
-
 /* end of plate editor styles  */
 
 @keyframes loader-dots1 {
diff --git a/tailwind.config.js b/tailwind.config.js
index 803b0f88..104b9996 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,12 +8,12 @@ module.exports = {
     extend: {
       colors: {
         black: "#040404",
-        twitter: "var(--twitter-clr)",
-        github: "var(--github-clr)",
+        twitter: "#282828",
+        github: "#f17f06",
       },
       backgroundImage: {
-        discord: "var(--discord-clr)",
-        youtube: "var(--youtube-clr)",
+        discord: "linear-gradient(to bottom, #4b83fb, #734df8)",
+        youtube: "linear-gradient(to top, #6d0202 22%, #c90000 61%)",
       },
     },
   },