diff --git a/apps/web/src/components/Bookmarks/Feed.tsx b/apps/web/src/components/Bookmarks/Feed.tsx
index e148f518dd12..2595bb397044 100644
--- a/apps/web/src/components/Bookmarks/Feed.tsx
+++ b/apps/web/src/components/Bookmarks/Feed.tsx
@@ -67,7 +67,7 @@ const Feed: FC<FeedProps> = ({ focus }) => {
   if (publications?.length === 0) {
     return (
       <EmptyState
-        icon={<BookmarkIcon className="text-brand-500 size-8" />}
+        icon={<BookmarkIcon className="size-8" />}
         message="No bookmarks yet!"
       />
     );
diff --git a/apps/web/src/components/Comment/Feed.tsx b/apps/web/src/components/Comment/Feed.tsx
index db7b260da09b..7887efcf29bf 100644
--- a/apps/web/src/components/Comment/Feed.tsx
+++ b/apps/web/src/components/Comment/Feed.tsx
@@ -98,7 +98,7 @@ const Feed: FC<FeedProps> = ({ isHidden, publicationId }) => {
   if (!isHidden && totalComments === 0) {
     return (
       <EmptyState
-        icon={<ChatBubbleLeftRightIcon className="text-brand-500 size-8" />}
+        icon={<ChatBubbleLeftRightIcon className="size-8" />}
         message="Be the first one to comment!"
       />
     );
diff --git a/apps/web/src/components/Composer/Actions/Attachment.tsx b/apps/web/src/components/Composer/Actions/Attachment.tsx
index c9f94a86c5ca..831d9fc02fed 100644
--- a/apps/web/src/components/Composer/Actions/Attachment.tsx
+++ b/apps/web/src/components/Composer/Actions/Attachment.tsx
@@ -100,7 +100,7 @@ const Attachment: FC = () => {
       <Menu.Button
         aria-label="More"
         as={motion.button}
-        className="outline-brand-500 rounded-full outline-offset-8"
+        className="rounded-full outline-offset-8 outline-gray-500"
         onClick={() => setShowMenu(!showMenu)}
         whileTap={{ scale: 0.9 }}
       >
@@ -108,7 +108,7 @@ const Attachment: FC = () => {
           <Spinner size="sm" />
         ) : (
           <Tooltip content="Media" placement="top">
-            <PhotoIcon className="text-brand-500 size-5" />
+            <PhotoIcon className="size-5" />
           </Tooltip>
         )}
       </Menu.Button>
@@ -129,7 +129,7 @@ const Attachment: FC = () => {
             disabled={disableImageUpload()}
             htmlFor={`image_${id}`}
           >
-            <PhotoIcon className="text-brand-500 size-4" />
+            <PhotoIcon className="size-4" />
             <span className="text-sm">Upload image(s)</span>
             <input
               accept={ImageMimeType.join(',')}
@@ -152,7 +152,7 @@ const Attachment: FC = () => {
             disabled={Boolean(attachments.length)}
             htmlFor={`video_${id}`}
           >
-            <VideoCameraIcon className="text-brand-500 size-4" />
+            <VideoCameraIcon className="size-4" />
             <span className="text-sm">Upload video</span>
             <input
               accept={VideoMimeType.join(',')}
@@ -174,7 +174,7 @@ const Attachment: FC = () => {
             disabled={Boolean(attachments.length)}
             htmlFor={`audio_${id}`}
           >
-            <MusicalNoteIcon className="text-brand-500 size-4" />
+            <MusicalNoteIcon className="size-4" />
             <span className="text-sm">Upload audio</span>
             <input
               accept={AudioMimeType.join(',')}
diff --git a/apps/web/src/components/Composer/Actions/CollectSettings/SplitConfig.tsx b/apps/web/src/components/Composer/Actions/CollectSettings/SplitConfig.tsx
index 6a9a44317804..9d507523fe4c 100644
--- a/apps/web/src/components/Composer/Actions/CollectSettings/SplitConfig.tsx
+++ b/apps/web/src/components/Composer/Actions/CollectSettings/SplitConfig.tsx
@@ -140,7 +140,7 @@ const SplitConfig: FC<SplitConfigProps> = ({
                   }}
                   type="button"
                 >
-                  <XCircleIcon className="size-5 text-red-500" />
+                  <XCircleIcon className="size-5" />
                 </button>
               </div>
             ))}
diff --git a/apps/web/src/components/Composer/Actions/CollectSettings/index.tsx b/apps/web/src/components/Composer/Actions/CollectSettings/index.tsx
index 5d0611ab7d7a..91fdf0d6c94b 100644
--- a/apps/web/src/components/Composer/Actions/CollectSettings/index.tsx
+++ b/apps/web/src/components/Composer/Actions/CollectSettings/index.tsx
@@ -17,16 +17,16 @@ const CollectSettings: FC = () => {
       <Tooltip content="Collect" placement="top">
         <motion.button
           aria-label="Choose Collect Module"
-          className="outline-brand-500 rounded-full outline-offset-8"
+          className="rounded-full outline-offset-8 outline-gray-500"
           onClick={() => setShowModal(!showModal)}
           type="button"
           whileTap={{ scale: 0.9 }}
         >
-          <RectangleStackIcon className="text-brand-500 size-5" />
+          <RectangleStackIcon className="size-5" />
         </motion.button>
       </Tooltip>
       <Modal
-        icon={<RectangleStackIcon className="text-brand-500 size-5" />}
+        icon={<RectangleStackIcon className="size-5" />}
         onClose={() => {
           setShowModal(false);
           reset();
diff --git a/apps/web/src/components/Composer/Actions/Gif/index.tsx b/apps/web/src/components/Composer/Actions/Gif/index.tsx
index 0a4cee584e8b..ea7e14d1f249 100644
--- a/apps/web/src/components/Composer/Actions/Gif/index.tsx
+++ b/apps/web/src/components/Composer/Actions/Gif/index.tsx
@@ -30,7 +30,7 @@ const Gif: FC<GiphyProps> = ({ setGifAttachment }) => {
       <Tooltip content="GIF" placement="top">
         <motion.button
           aria-label="Choose GIFs"
-          className="outline-brand-500 rounded-full outline-offset-8"
+          className="rounded-full outline-offset-8 outline-gray-500"
           disabled={attachments.length >= 4}
           onClick={() => {
             setShowModal(!showModal);
@@ -39,11 +39,11 @@ const Gif: FC<GiphyProps> = ({ setGifAttachment }) => {
           type="button"
           whileTap={{ scale: 0.9 }}
         >
-          <GifIcon className="text-brand-500 size-5" />
+          <GifIcon className="size-5" />
         </motion.button>
       </Tooltip>
       <Modal
-        icon={<PhotoIcon className="text-brand-500 size-5" />}
+        icon={<PhotoIcon className="size-5" />}
         onClose={() => setShowModal(false)}
         show={showModal}
         title="Select GIF"
diff --git a/apps/web/src/components/Composer/Actions/LivestreamSettings/LivestreamEditor.tsx b/apps/web/src/components/Composer/Actions/LivestreamSettings/LivestreamEditor.tsx
index 9dd61b9892d1..9a02460d5eb6 100644
--- a/apps/web/src/components/Composer/Actions/LivestreamSettings/LivestreamEditor.tsx
+++ b/apps/web/src/components/Composer/Actions/LivestreamSettings/LivestreamEditor.tsx
@@ -70,7 +70,7 @@ const LivestreamEditor: FC = () => {
     <Card className="m-5 px-5 py-3" forceRounded>
       <div className="flex items-center justify-between">
         <div className="flex items-center space-x-2 text-sm">
-          <VideoCameraIcon className="text-brand-500 size-4" />
+          <VideoCameraIcon className="size-4" />
           <b>Go Live</b>
         </div>
         <div className="flex items-center space-x-3">
@@ -139,7 +139,7 @@ const LivestreamEditor: FC = () => {
             type="button"
           >
             <Wrapper>
-              <SignalIcon className="text-brand-500 size-5" />
+              <SignalIcon className="size-5" />
               <div>Create Live Stream</div>
             </Wrapper>
           </button>
@@ -151,7 +151,7 @@ const LivestreamEditor: FC = () => {
               type="button"
             >
               <Wrapper>
-                <VideoCameraIcon className="text-brand-500 size-5" />
+                <VideoCameraIcon className="size-5" />
                 <div>Record</div>
               </Wrapper>
             </button>
@@ -161,7 +161,7 @@ const LivestreamEditor: FC = () => {
               type="button"
             >
               <Wrapper>
-                <VideoCameraSlashIcon className="text-brand-500 size-5" />
+                <VideoCameraSlashIcon className="size-5" />
                 <div>Don't Record</div>
               </Wrapper>
             </button>
diff --git a/apps/web/src/components/Composer/Actions/LivestreamSettings/index.tsx b/apps/web/src/components/Composer/Actions/LivestreamSettings/index.tsx
index f276a94a926b..e691a431e4b9 100644
--- a/apps/web/src/components/Composer/Actions/LivestreamSettings/index.tsx
+++ b/apps/web/src/components/Composer/Actions/LivestreamSettings/index.tsx
@@ -17,19 +17,20 @@ const LivestreamSettings: FC = () => {
   );
 
   return (
-    <Tooltip content="Go Live" placement="top">
-      <motion.button
-        aria-label="Go Live"
-        onClick={() => {
-          resetLiveVideoConfig();
-          setShowLiveVideoEditor(!showLiveVideoEditor);
-        }}
-        type="button"
-        whileTap={{ scale: 0.9 }}
-      >
-        <VideoCameraIcon className="text-brand-500 size-5" />
-      </motion.button>
-    </Tooltip>
+    <motion.button
+      aria-label="Go Live"
+      className="rounded-full outline-offset-8 outline-gray-500"
+      onClick={() => {
+        resetLiveVideoConfig();
+        setShowLiveVideoEditor(!showLiveVideoEditor);
+      }}
+      type="button"
+      whileTap={{ scale: 0.9 }}
+    >
+      <Tooltip content="Go Live" placement="top">
+        <VideoCameraIcon className="size-5" />
+      </Tooltip>
+    </motion.button>
   );
 };
 
diff --git a/apps/web/src/components/Composer/Actions/OpenActionSettings/OpenActionItem.tsx b/apps/web/src/components/Composer/Actions/OpenActionSettings/OpenActionItem.tsx
index 62588050fb6a..d6ce0d462078 100644
--- a/apps/web/src/components/Composer/Actions/OpenActionSettings/OpenActionItem.tsx
+++ b/apps/web/src/components/Composer/Actions/OpenActionSettings/OpenActionItem.tsx
@@ -38,7 +38,7 @@ const OpenActionItem: FC<OpenActionItemProps> = ({
       onClick={() => onOpenActionSelected(type)}
     >
       <div className="flex items-center space-x-3">
-        <div className="text-brand-500">{icon}</div>
+        {icon}
         <div className="space-y-1">
           <div className="font-bold">{title}</div>
           <div className="text-sm">{description}</div>
diff --git a/apps/web/src/components/Composer/Actions/OpenActionSettings/index.tsx b/apps/web/src/components/Composer/Actions/OpenActionSettings/index.tsx
index 5ab413bed968..f928c0ddc5e8 100644
--- a/apps/web/src/components/Composer/Actions/OpenActionSettings/index.tsx
+++ b/apps/web/src/components/Composer/Actions/OpenActionSettings/index.tsx
@@ -26,19 +26,17 @@ const OpenActionSettings: FC = () => {
       <Tooltip content="Open Action" placement="top">
         <motion.button
           aria-label="Choose Open Action"
-          className="outline-brand-500 rounded-full outline-offset-8"
+          className="rounded-full outline-offset-8 outline-gray-500"
           onClick={() => setShowModal(!showModal)}
           type="button"
           whileTap={{ scale: 0.9 }}
         >
-          <SquaresPlusIcon className="text-brand-500 size-5" />
+          <SquaresPlusIcon className="size-5" />
         </motion.button>
       </Tooltip>
       <Modal
         icon={
-          screen === ScreenType.List && (
-            <SquaresPlusIcon className="text-brand-500 size-5" />
-          )
+          screen === ScreenType.List && <SquaresPlusIcon className="size-5" />
         }
         onClose={() => {
           setShowModal(false);
diff --git a/apps/web/src/components/Composer/Actions/PollSettings/PollEditor.tsx b/apps/web/src/components/Composer/Actions/PollSettings/PollEditor.tsx
index 62b4a3ee6003..c8bb4a09243f 100644
--- a/apps/web/src/components/Composer/Actions/PollSettings/PollEditor.tsx
+++ b/apps/web/src/components/Composer/Actions/PollSettings/PollEditor.tsx
@@ -22,7 +22,7 @@ const PollEditor: FC = () => {
     <Card className="m-5 px-5 py-3" forceRounded>
       <div className="flex items-center justify-between">
         <div className="flex items-center space-x-2 text-sm">
-          <Bars3BottomLeftIcon className="text-brand-500 size-4" />
+          <Bars3BottomLeftIcon className="size-4" />
           <b>Poll</b>
         </div>
         <div className="flex items-center space-x-3">
@@ -31,12 +31,11 @@ const PollEditor: FC = () => {
             onClick={() => setShowPollLengthModal(true)}
             outline
             size="sm"
-            variant="primary"
           >
             {pollConfig.length} {plur('day', pollConfig.length)}
           </Button>
           <Modal
-            icon={<ClockIcon className="text-brand-500 size-5" />}
+            icon={<ClockIcon className="size-5" />}
             onClose={() => setShowPollLengthModal(false)}
             show={showPollLengthModal}
             title="Poll length"
@@ -70,7 +69,6 @@ const PollEditor: FC = () => {
                 <Button
                   className="ml-auto"
                   onClick={() => setShowPollLengthModal(false)}
-                  variant="primary"
                 >
                   Save
                 </Button>
@@ -122,7 +120,7 @@ const PollEditor: FC = () => {
         ))}
         {pollConfig.options.length !== 10 ? (
           <button
-            className="text-brand-500 mt-2 flex items-center space-x-2 text-sm"
+            className="mt-2 flex items-center space-x-2 text-sm"
             onClick={() => {
               const newOptions = [...pollConfig.options];
               newOptions.push('');
diff --git a/apps/web/src/components/Composer/Actions/PollSettings/index.tsx b/apps/web/src/components/Composer/Actions/PollSettings/index.tsx
index 731e3d87605a..12a8a208f421 100644
--- a/apps/web/src/components/Composer/Actions/PollSettings/index.tsx
+++ b/apps/web/src/components/Composer/Actions/PollSettings/index.tsx
@@ -20,7 +20,7 @@ const PollSettings: FC = () => {
     <Tooltip content="Poll" placement="top">
       <motion.button
         aria-label="Poll"
-        className="outline-brand-500 rounded-full outline-offset-8"
+        className="rounded-full outline-offset-8 outline-gray-500"
         onClick={() => {
           resetPollConfig();
           setShowPollEditor(!showPollEditor);
@@ -28,7 +28,7 @@ const PollSettings: FC = () => {
         type="button"
         whileTap={{ scale: 0.9 }}
       >
-        <Bars3BottomLeftIcon className="text-brand-500 size-5" />
+        <Bars3BottomLeftIcon className="size-5" />
       </motion.button>
     </Tooltip>
   );
diff --git a/apps/web/src/components/Composer/Actions/ReferenceSettings/index.tsx b/apps/web/src/components/Composer/Actions/ReferenceSettings/index.tsx
index 68713f3c8dcc..81b3e36b72f4 100644
--- a/apps/web/src/components/Composer/Actions/ReferenceSettings/index.tsx
+++ b/apps/web/src/components/Composer/Actions/ReferenceSettings/index.tsx
@@ -66,10 +66,10 @@ const ReferenceSettings: FC = () => {
     >
       <div className="flex items-center justify-between space-x-2">
         <div className="flex items-center space-x-1.5">
-          <div className="text-brand-500">{icon}</div>
+          {icon}
           <div>{title}</div>
         </div>
-        {selected ? <CheckCircleIcon className="w-5 text-green-500" /> : null}
+        {selected ? <CheckCircleIcon className="w-5" /> : null}
       </div>
     </Menu.Item>
   );
@@ -98,15 +98,13 @@ const ReferenceSettings: FC = () => {
       >
         <Menu.Button
           as={motion.button}
-          className="outline-brand-500 rounded-full outline-offset-8"
+          className="rounded-full outline-offset-8 outline-gray-500"
           whileTap={{ scale: 0.9 }}
         >
-          <div className="text-brand-500">
-            {isEveryone ? <GlobeAltIcon className="w-5" /> : null}
-            {isMyFollowers ? <UsersIcon className="w-5" /> : null}
-            {isMyFollows ? <UserPlusIcon className="w-5" /> : null}
-            {isFriendsOfFriends ? <UserGroupIcon className="w-5" /> : null}
-          </div>
+          {isEveryone ? <GlobeAltIcon className="w-5" /> : null}
+          {isMyFollowers ? <UsersIcon className="w-5" /> : null}
+          {isMyFollows ? <UserPlusIcon className="w-5" /> : null}
+          {isFriendsOfFriends ? <UserGroupIcon className="w-5" /> : null}
         </Menu.Button>
       </Tooltip>
       <MenuTransition>
diff --git a/apps/web/src/components/Composer/ChooseThumbnail.tsx b/apps/web/src/components/Composer/ChooseThumbnail.tsx
index cc7bb7281590..5d535ec73bab 100644
--- a/apps/web/src/components/Composer/ChooseThumbnail.tsx
+++ b/apps/web/src/components/Composer/ChooseThumbnail.tsx
@@ -177,7 +177,7 @@ const ChooseThumbnail: FC = () => {
               />
               {ipfsUrl && isSelected && isUploaded ? (
                 <div className="absolute inset-0 grid place-items-center rounded-xl bg-gray-100/10">
-                  <CheckCircleIcon className="size-6 text-green-500" />
+                  <CheckCircleIcon className="size-6" />
                 </div>
               ) : null}
               {isUploading && isSelected && (
diff --git a/apps/web/src/components/Composer/Editor/index.tsx b/apps/web/src/components/Composer/Editor/index.tsx
index 39807fc2b302..1e661a8dec72 100644
--- a/apps/web/src/components/Composer/Editor/index.tsx
+++ b/apps/web/src/components/Composer/Editor/index.tsx
@@ -4,7 +4,6 @@ import MentionsPlugin from '@components/Shared/Lexical/Plugins/AtMentionsPlugin'
 import LexicalAutoLinkPlugin from '@components/Shared/Lexical/Plugins/AutoLinkPlugin';
 import EmojiPickerPlugin from '@components/Shared/Lexical/Plugins/EmojiPicker';
 import ImagesPlugin from '@components/Shared/Lexical/Plugins/ImagesPlugin';
-import ToolbarPlugin from '@components/Shared/Lexical/Plugins/ToolbarPlugin';
 import { Errors } from '@hey/data/errors';
 import {
   $convertToMarkdownString,
@@ -71,14 +70,13 @@ const Editor: FC = () => {
   return (
     <div className="relative">
       <EmojiPickerPlugin />
-      <ToolbarPlugin />
       <RichTextPlugin
         contentEditable={
-          <ContentEditable className="my-4 block min-h-[65px] overflow-auto px-5 leading-6 sm:leading-[26px]" />
+          <ContentEditable className="my-4 block min-h-[75px] overflow-auto px-5 leading-6 sm:leading-[26px]" />
         }
         ErrorBoundary={() => <div>{Errors.SomethingWentWrong}</div>}
         placeholder={
-          <div className="pointer-events-none absolute top-[65px] whitespace-nowrap px-5 text-gray-400">
+          <div className="pointer-events-none absolute top-[1.5px] whitespace-nowrap px-5 text-gray-400">
             {showPollEditor ? 'Ask a question...' : "What's happening?"}
           </div>
         }
diff --git a/apps/web/src/components/Composer/NewPublication.tsx b/apps/web/src/components/Composer/NewPublication.tsx
index 74f54a1920e3..34230283fc46 100644
--- a/apps/web/src/components/Composer/NewPublication.tsx
+++ b/apps/web/src/components/Composer/NewPublication.tsx
@@ -17,10 +17,6 @@ import QuotedPublication from '@components/Publication/QuotedPublication';
 import { AudioPublicationSchema } from '@components/Shared/Audio';
 import Wrapper from '@components/Shared/Embed/Wrapper';
 import withLexicalContext from '@components/Shared/Lexical/withLexicalContext';
-import {
-  ChatBubbleLeftRightIcon,
-  PencilSquareIcon
-} from '@heroicons/react/24/outline';
 import { Errors } from '@hey/data/errors';
 import { PUBLICATION } from '@hey/data/tracking';
 import { ReferenceModuleType } from '@hey/lens';
@@ -28,7 +24,7 @@ import checkDispatcherPermissions from '@hey/lib/checkDispatcherPermissions';
 import collectModuleParams from '@hey/lib/collectModuleParams';
 import getProfile from '@hey/lib/getProfile';
 import removeQuoteOn from '@hey/lib/removeQuoteOn';
-import { Button, Card, ErrorMessage, Spinner } from '@hey/ui';
+import { Button, Card, ErrorMessage } from '@hey/ui';
 import cn from '@hey/ui/cn';
 import { MetadataAttributeType } from '@lens-protocol/metadata';
 import { $convertFromMarkdownString } from '@lexical/markdown';
@@ -60,7 +56,6 @@ import { useProfileRestriction } from 'src/store/non-persisted/useProfileRestric
 import { useReferenceModuleStore } from 'src/store/non-persisted/useReferenceModuleStore';
 import useProfileStore from 'src/store/persisted/useProfileStore';
 
-import LivestreamSettings from './Actions/LivestreamSettings';
 import LivestreamEditor from './Actions/LivestreamSettings/LivestreamEditor';
 import PollEditor from './Actions/PollSettings/PollEditor';
 import Editor from './Editor';
@@ -103,6 +98,12 @@ const PollSettings = dynamic(
     loading: () => <div className="shimmer mb-1 size-5 rounded-lg" />
   }
 );
+const LivestreamSettings = dynamic(
+  () => import('@components/Composer/Actions/LivestreamSettings'),
+  {
+    loading: () => <div className="shimmer mb-1 size-5 rounded-lg" />
+  }
+);
 
 interface NewPublicationProps {
   publication: MirrorablePublication;
@@ -611,7 +612,6 @@ const NewPublication: FC<NewPublicationProps> = ({ publication }) => {
         <div className="flex items-center space-x-4">
           <Attachment />
           <EmojiPicker
-            emojiClassName="text-brand-500"
             setEmoji={(emoji) => {
               setShowEmojiPicker(false);
               editor.update(() => {
@@ -651,16 +651,8 @@ const NewPublication: FC<NewPublicationProps> = ({ publication }) => {
               isSubmitDisabledByPoll ||
               videoThumbnail.uploading
             }
-            icon={
-              isLoading ? (
-                <Spinner size="xs" />
-              ) : isComment ? (
-                <ChatBubbleLeftRightIcon className="size-4" />
-              ) : (
-                <PencilSquareIcon className="size-4" />
-              )
-            }
             onClick={createPublication}
+            rounded
           >
             {isComment ? 'Comment' : 'Post'}
           </Button>
diff --git a/apps/web/src/components/Explore/Feed.tsx b/apps/web/src/components/Explore/Feed.tsx
index f200eec83e14..74223f718067 100644
--- a/apps/web/src/components/Explore/Feed.tsx
+++ b/apps/web/src/components/Explore/Feed.tsx
@@ -74,7 +74,7 @@ const Feed: FC<FeedProps> = ({
   if (publications?.length === 0) {
     return (
       <EmptyState
-        icon={<RectangleStackIcon className="text-brand-500 size-8" />}
+        icon={<RectangleStackIcon className="size-8" />}
         message="No posts yet!"
       />
     );
diff --git a/apps/web/src/components/Explore/index.tsx b/apps/web/src/components/Explore/index.tsx
index ef320d5cfbb7..508496b3c7a7 100644
--- a/apps/web/src/components/Explore/index.tsx
+++ b/apps/web/src/components/Explore/index.tsx
@@ -53,11 +53,8 @@ const Explore: NextPage = () => {
               <Tab
                 className={({ selected }) =>
                   cn(
-                    {
-                      'border-brand-500 border-b-2 !text-black dark:!text-white':
-                        selected
-                    },
-                    'ld-text-gray-500 px-4 pb-2 text-xs font-medium outline-none sm:text-sm'
+                    { 'border-b-2 border-black dark:border-white': selected },
+                    'px-4 pb-2 text-xs font-medium outline-none sm:text-sm'
                   )
                 }
                 defaultChecked={index === 1}
diff --git a/apps/web/src/components/Home/AlgorithmicFeed.tsx b/apps/web/src/components/Home/AlgorithmicFeed.tsx
index f4b0387df82f..16d95b31cdcf 100644
--- a/apps/web/src/components/Home/AlgorithmicFeed.tsx
+++ b/apps/web/src/components/Home/AlgorithmicFeed.tsx
@@ -73,7 +73,7 @@ const AlgorithmicFeed: FC<AlgorithmicFeedProps> = ({ feedType }) => {
   if (publications?.length === 0) {
     return (
       <EmptyState
-        icon={<SparklesIcon className="text-brand-500 size-8" />}
+        icon={<SparklesIcon className="size-8" />}
         message="No posts yet!"
       />
     );
diff --git a/apps/web/src/components/Home/Algorithms/List.tsx b/apps/web/src/components/Home/Algorithms/List.tsx
index a18df1b59958..1ec89d13c9d9 100644
--- a/apps/web/src/components/Home/Algorithms/List.tsx
+++ b/apps/web/src/components/Home/Algorithms/List.tsx
@@ -41,13 +41,11 @@ const List: FC = () => {
                     }
                     placement="top"
                   >
-                    <div className="text-brand-500">
-                      {algorithm.isPersonalized ? (
-                        <UserCircleIcon className="size-4" />
-                      ) : (
-                        <GlobeAmericasIcon className="size-4" />
-                      )}
-                    </div>
+                    {algorithm.isPersonalized ? (
+                      <UserCircleIcon className="size-4" />
+                    ) : (
+                      <GlobeAmericasIcon className="size-4" />
+                    )}
                   </Tooltip>
                 </div>
                 <div className="text-sm">by {algorithm.by}</div>
diff --git a/apps/web/src/components/Home/Algorithms/index.tsx b/apps/web/src/components/Home/Algorithms/index.tsx
index 53c158b95d13..eb374f45f997 100644
--- a/apps/web/src/components/Home/Algorithms/index.tsx
+++ b/apps/web/src/components/Home/Algorithms/index.tsx
@@ -22,11 +22,11 @@ const Algorithms: FC = () => {
         type="button"
       >
         <Tooltip content="Algorithms" placement="top">
-          <SparklesIcon className="text-brand-500 size-5" />
+          <SparklesIcon className="size-5" />
         </Tooltip>
       </button>
       <Modal
-        icon={<SparklesIcon className="text-brand-500 size-5" />}
+        icon={<SparklesIcon className="size-5" />}
         onClose={() => setShowAlgorithmsModal(false)}
         show={showAlgorithmsModal}
         title="Algorithms"
diff --git a/apps/web/src/components/Home/Highlights.tsx b/apps/web/src/components/Home/Highlights.tsx
index f799b74dcf20..5356ba701561 100644
--- a/apps/web/src/components/Home/Highlights.tsx
+++ b/apps/web/src/components/Home/Highlights.tsx
@@ -63,7 +63,7 @@ const Highlights: FC = () => {
   if (publications?.length === 0) {
     return (
       <EmptyState
-        icon={<LightBulbIcon className="text-brand-500 size-8" />}
+        icon={<LightBulbIcon className="size-8" />}
         message="No posts yet!"
       />
     );
diff --git a/apps/web/src/components/Home/PaidActions/index.tsx b/apps/web/src/components/Home/PaidActions/index.tsx
index 1854ace6a4d9..4a9420e12d6f 100644
--- a/apps/web/src/components/Home/PaidActions/index.tsx
+++ b/apps/web/src/components/Home/PaidActions/index.tsx
@@ -43,7 +43,7 @@ const PaidActions: FC = () => {
   if (actions?.length === 0) {
     return (
       <EmptyState
-        icon={<CurrencyDollarIcon className="text-brand-500 size-8" />}
+        icon={<CurrencyDollarIcon className="size-8" />}
         message="No paid actions yet!"
       />
     );
diff --git a/apps/web/src/components/Home/Sidebar/EnableLensManager.tsx b/apps/web/src/components/Home/Sidebar/EnableLensManager.tsx
index 75d1da4b0183..ae4a6a345d78 100644
--- a/apps/web/src/components/Home/Sidebar/EnableLensManager.tsx
+++ b/apps/web/src/components/Home/Sidebar/EnableLensManager.tsx
@@ -17,10 +17,7 @@ const EnableLensManager: FC = () => {
   }
 
   return (
-    <Card
-      as="aside"
-      className="border-brand-400 !bg-brand-300/20 text-brand-600 mb-4 space-y-2.5 p-5"
-    >
+    <Card as="aside" className="mb-4 space-y-2.5 p-5">
       <p className="text-lg font-bold">Signless transactions</p>
       <p className="text-sm leading-[22px]">
         You can enable Lens manager to interact with {APP_NAME} without signing
diff --git a/apps/web/src/components/Home/Sidebar/HeyMembershipNft/index.tsx b/apps/web/src/components/Home/Sidebar/HeyMembershipNft/index.tsx
index ff27014da50b..71096c541212 100644
--- a/apps/web/src/components/Home/Sidebar/HeyMembershipNft/index.tsx
+++ b/apps/web/src/components/Home/Sidebar/HeyMembershipNft/index.tsx
@@ -44,23 +44,20 @@ const HeyMembershipNft: FC = () => {
   };
 
   return (
-    <Card
-      as="aside"
-      className="text-brand-500 dark:bg-brand-10/50 !border-brand-500 !bg-brand-50 mb-4"
-    >
+    <Card as="aside" className="ld-text-gray-500 mb-4">
       <img
-        alt="Gitcoin emoji"
+        alt="Hey NFT"
         className="h-48 w-full rounded-t-xl object-cover"
         src="https://ipfs.decentralized-content.com/ipfs/bafybeib6infyovvtawokys4ejjr4r3qk4soy7jqriejp2wbmttedupsy64"
       />
       <div className="p-5">
-        <div className="mb-1 font-bold">
-          Hey! Grab your special Hey NFT here.
-        </div>
-        <div className="text-brand-400 mb-4">
+        <p className="mb-1 text-lg font-bold">
+          Hey! Grab your special {APP_NAME} NFT here.
+        </p>
+        <p className="mb-4">
           New or OG, this NFT's for our epic times together. Let's keep the vibe
           alive!
-        </div>
+        </p>
         <div className="flex flex-col items-center space-y-1.5">
           <Button
             className="w-full"
@@ -70,11 +67,12 @@ const HeyMembershipNft: FC = () => {
                 from: 'mint_membership_nft'
               });
             }}
+            outline
           >
             Mint now
           </Button>
           <Modal
-            icon={<CursorArrowRaysIcon className="text-brand-500 size-5" />}
+            icon={<CursorArrowRaysIcon className="size-5" />}
             onClose={() => setShowMintModal(false)}
             show={showMintModal}
             title={`Special ${APP_NAME} NFT`}
diff --git a/apps/web/src/components/Home/Sidebar/SetProfile.tsx b/apps/web/src/components/Home/Sidebar/SetProfile.tsx
index 22b35324f05c..f29458138e5a 100644
--- a/apps/web/src/components/Home/Sidebar/SetProfile.tsx
+++ b/apps/web/src/components/Home/Sidebar/SetProfile.tsx
@@ -6,7 +6,6 @@ import { CheckCircleIcon } from '@heroicons/react/24/solid';
 import { APP_NAME } from '@hey/data/constants';
 import { ONBOARDING } from '@hey/data/tracking';
 import { Card } from '@hey/ui';
-import cn from '@hey/ui/cn';
 import { Leafwatch } from '@lib/leafwatch';
 import Link from 'next/link';
 import useProfileStore from 'src/store/persisted/useProfileStore';
@@ -19,13 +18,11 @@ interface StatusProps {
 const Status: FC<StatusProps> = ({ finished, title }) => (
   <div className="flex items-center space-x-1.5">
     {finished ? (
-      <CheckCircleIcon className="size-5 text-green-500" />
+      <CheckCircleIcon className="size-5" />
     ) : (
-      <MinusCircleIcon className="size-5 text-yellow-500" />
+      <MinusCircleIcon className="size-5" />
     )}
-    <div className={cn(finished ? 'text-green-500' : 'text-yellow-500')}>
-      {title}
-    </div>
+    <div className="ld-text-gray-500">{title}</div>
   </div>
 );
 
@@ -42,10 +39,7 @@ const SetProfile: FC = () => {
   }
 
   return (
-    <Card
-      as="aside"
-      className="mb-4 space-y-4 !border-green-600 !bg-green-50 p-5 text-green-600 dark:bg-green-900"
-    >
+    <Card as="aside" className="mb-4 space-y-4 p-5">
       <p className="text-lg font-bold">Setup your {APP_NAME} profile</p>
       <div className="space-y-1 text-sm leading-5">
         <Status
diff --git a/apps/web/src/components/Home/Sidebar/Signup.tsx b/apps/web/src/components/Home/Sidebar/Signup.tsx
index 4d0e20f263af..e8aa5fa60346 100644
--- a/apps/web/src/components/Home/Sidebar/Signup.tsx
+++ b/apps/web/src/components/Home/Sidebar/Signup.tsx
@@ -30,7 +30,6 @@ const Signup: FC = () => {
               Leafwatch.track(AUTH.OPEN_SIGNUP);
             }}
             size="lg"
-            variant="black"
           >
             Signup now
           </Button>
diff --git a/apps/web/src/components/Home/Sidebar/StaffPicks/index.tsx b/apps/web/src/components/Home/Sidebar/StaffPicks/index.tsx
index 771c45fab33d..5d22b8632372 100644
--- a/apps/web/src/components/Home/Sidebar/StaffPicks/index.tsx
+++ b/apps/web/src/components/Home/Sidebar/StaffPicks/index.tsx
@@ -47,9 +47,7 @@ const StaffPicks: FC = () => {
         <Title />
         <EmptyState
           hideCard
-          icon={
-            <CursorArrowRippleIconOutline className="text-brand-500 size-8" />
-          }
+          icon={<CursorArrowRippleIconOutline className="size-8" />}
           message="Nothing here!"
         />
       </Card>
diff --git a/apps/web/src/components/Home/Sidebar/WhoToFollow.tsx b/apps/web/src/components/Home/Sidebar/WhoToFollow.tsx
index c62cca58b383..7d1bd7982da1 100644
--- a/apps/web/src/components/Home/Sidebar/WhoToFollow.tsx
+++ b/apps/web/src/components/Home/Sidebar/WhoToFollow.tsx
@@ -92,7 +92,7 @@ const WhoToFollow: FC = () => {
         </button>
       </Card>
       <Modal
-        icon={<UsersIcon className="text-brand-500 size-5" />}
+        icon={<UsersIcon className="size-5" />}
         onClose={() => setShowSuggestedModal(false)}
         show={showSuggestedModal}
         title="Suggested for you"
diff --git a/apps/web/src/components/Home/Suggested.tsx b/apps/web/src/components/Home/Suggested.tsx
index 087aff36a0d9..593417102c79 100644
--- a/apps/web/src/components/Home/Suggested.tsx
+++ b/apps/web/src/components/Home/Suggested.tsx
@@ -18,7 +18,7 @@ const Suggested: FC<SuggestedProps> = ({ profiles }) => {
     return (
       <EmptyState
         hideCard
-        icon={<UsersIcon className="text-brand-500 size-8" />}
+        icon={<UsersIcon className="size-8" />}
         message="Nothing to suggest"
       />
     );
diff --git a/apps/web/src/components/Home/Timeline/index.tsx b/apps/web/src/components/Home/Timeline/index.tsx
index 138a0ddc0024..e173a5f91665 100644
--- a/apps/web/src/components/Home/Timeline/index.tsx
+++ b/apps/web/src/components/Home/Timeline/index.tsx
@@ -87,7 +87,7 @@ const Timeline: FC = () => {
   if (feed?.length === 0) {
     return (
       <EmptyState
-        icon={<UserGroupIcon className="text-brand-500 size-8" />}
+        icon={<UserGroupIcon className="size-8" />}
         message="No posts yet!"
       />
     );
diff --git a/apps/web/src/components/Mod/LatestFeed.tsx b/apps/web/src/components/Mod/LatestFeed.tsx
index 06fc6fbd553f..2df1225712ef 100644
--- a/apps/web/src/components/Mod/LatestFeed.tsx
+++ b/apps/web/src/components/Mod/LatestFeed.tsx
@@ -87,7 +87,7 @@ const LatestFeed: FC<LatestFeedProps> = ({
   if (publications?.length === 0) {
     return (
       <EmptyState
-        icon={<RectangleStackIcon className="text-brand-500 size-8" />}
+        icon={<RectangleStackIcon className="size-8" />}
         message="No posts yet!"
       />
     );
diff --git a/apps/web/src/components/Mod/SearchFeed.tsx b/apps/web/src/components/Mod/SearchFeed.tsx
index 43c26efc6680..cdb078f0e6d9 100644
--- a/apps/web/src/components/Mod/SearchFeed.tsx
+++ b/apps/web/src/components/Mod/SearchFeed.tsx
@@ -87,7 +87,7 @@ const SearchFeed: FC = () => {
       <div className="space-y-5">
         <Search />
         <EmptyState
-          icon={<RectangleStackIcon className="text-brand-500 size-8" />}
+          icon={<RectangleStackIcon className="size-8" />}
           message="No posts yet!"
         />
       </div>
diff --git a/apps/web/src/components/Notification/List.tsx b/apps/web/src/components/Notification/List.tsx
index 9cc8ddc9e1d6..ce05cd262c80 100644
--- a/apps/web/src/components/Notification/List.tsx
+++ b/apps/web/src/components/Notification/List.tsx
@@ -111,7 +111,7 @@ const List: FC<ListProps> = ({ feedType }) => {
   if (notifications?.length === 0) {
     return (
       <EmptyState
-        icon={<BellIcon className="text-brand-500 size-8" />}
+        icon={<BellIcon className="size-8" />}
         message="Inbox zero!"
       />
     );
diff --git a/apps/web/src/components/Notification/Profile.tsx b/apps/web/src/components/Notification/Profile.tsx
index 802336ce4c67..f456347cc5ac 100644
--- a/apps/web/src/components/Notification/Profile.tsx
+++ b/apps/web/src/components/Notification/Profile.tsx
@@ -53,7 +53,7 @@ export const NotificationProfileName: FC<NotificationProfileProps> = ({
           <CheckBadgeIcon className="text-brand-500 size-4" />
         ) : null}
         {hasMisused(profile.id) ? (
-          <ExclamationCircleIcon className="size-4 text-red-500" />
+          <ExclamationCircleIcon className="size-4" />
         ) : null}
       </Link>
     </UserPreview>
diff --git a/apps/web/src/components/Notification/Settings.tsx b/apps/web/src/components/Notification/Settings.tsx
index 62e79fe4a779..cb903c8abaf5 100644
--- a/apps/web/src/components/Notification/Settings.tsx
+++ b/apps/web/src/components/Notification/Settings.tsx
@@ -21,7 +21,7 @@ const Settings: FC = () => {
         </Tooltip>
       </button>
       <Modal
-        icon={<BellIcon className="text-brand-500 size-5" />}
+        icon={<BellIcon className="size-5" />}
         onClose={() => setShowNotificationSettings(false)}
         show={showNotificationSettings}
         title="Notification settings"
diff --git a/apps/web/src/components/Notification/Type/ActedNotification.tsx b/apps/web/src/components/Notification/Type/ActedNotification.tsx
index c03b1c8db26f..a047b2bdfccf 100644
--- a/apps/web/src/components/Notification/Type/ActedNotification.tsx
+++ b/apps/web/src/components/Notification/Type/ActedNotification.tsx
@@ -41,7 +41,7 @@ const ActedNotification: FC<ActedNotificationProps> = ({ notification }) => {
   return (
     <div className="space-y-2">
       <div className="flex items-center space-x-3">
-        <RectangleStackIcon className="text-brand-500/70 size-6" />
+        <RectangleStackIcon className="size-6" />
         <div className="flex items-center space-x-1">
           {actions.slice(0, 10).map((action) => (
             <div key={action.by.id}>
diff --git a/apps/web/src/components/Notification/Type/CommentNotification.tsx b/apps/web/src/components/Notification/Type/CommentNotification.tsx
index e9b2a78cebfd..1830ad48389a 100644
--- a/apps/web/src/components/Notification/Type/CommentNotification.tsx
+++ b/apps/web/src/components/Notification/Type/CommentNotification.tsx
@@ -27,7 +27,7 @@ const CommentNotification: FC<CommentNotificationProps> = ({
   return (
     <div className="space-y-2">
       <div className="flex items-center space-x-3">
-        <ChatBubbleLeftRightIcon className="text-brand-500/70 size-6" />
+        <ChatBubbleLeftRightIcon className="size-6" />
         <div className="flex items-center space-x-1">
           <NotificationProfileAvatar profile={firstProfile} />
         </div>
diff --git a/apps/web/src/components/Notification/Type/FollowNotification.tsx b/apps/web/src/components/Notification/Type/FollowNotification.tsx
index ea2d37bfb8d1..63ccd6e9aabb 100644
--- a/apps/web/src/components/Notification/Type/FollowNotification.tsx
+++ b/apps/web/src/components/Notification/Type/FollowNotification.tsx
@@ -28,7 +28,7 @@ const FollowNotification: FC<FollowNotificationProps> = ({ notification }) => {
   return (
     <div className="space-y-2">
       <div className="flex items-center space-x-3">
-        <UserPlusIcon className="text-brand-500/70 size-6" />
+        <UserPlusIcon className="size-6" />
         <div className="flex items-center space-x-1">
           {followers.slice(0, 10).map((follower) => (
             <div key={follower.id}>
diff --git a/apps/web/src/components/Notification/Type/MentionNotification.tsx b/apps/web/src/components/Notification/Type/MentionNotification.tsx
index 02ed02861ec4..f38c09ff5e4f 100644
--- a/apps/web/src/components/Notification/Type/MentionNotification.tsx
+++ b/apps/web/src/components/Notification/Type/MentionNotification.tsx
@@ -26,7 +26,7 @@ const MentionNotification: FC<MentionNotificationProps> = ({
   return (
     <div className="space-y-2">
       <div className="flex items-center space-x-3">
-        <AtSymbolIcon className="text-brand-500/70 size-6" />
+        <AtSymbolIcon className="size-6" />
         <div className="flex items-center space-x-1">
           <NotificationProfileAvatar profile={firstProfile} />
         </div>
diff --git a/apps/web/src/components/Notification/Type/MirrorNotification.tsx b/apps/web/src/components/Notification/Type/MirrorNotification.tsx
index 4f6c0515e85f..0a768b0d0699 100644
--- a/apps/web/src/components/Notification/Type/MirrorNotification.tsx
+++ b/apps/web/src/components/Notification/Type/MirrorNotification.tsx
@@ -36,7 +36,7 @@ const MirrorNotification: FC<MirrorNotificationProps> = ({ notification }) => {
   return (
     <div className="space-y-2">
       <div className="flex items-center space-x-3">
-        <ArrowsRightLeftIcon className="text-brand-500/70 size-6" />
+        <ArrowsRightLeftIcon className="size-6" />
         <div className="flex items-center space-x-1">
           {mirrors.slice(0, 10).map((mirror) => (
             <div key={mirror.profile.id}>
diff --git a/apps/web/src/components/Notification/Type/QuoteNotification.tsx b/apps/web/src/components/Notification/Type/QuoteNotification.tsx
index 8c689c676a56..adfe5ecd14db 100644
--- a/apps/web/src/components/Notification/Type/QuoteNotification.tsx
+++ b/apps/web/src/components/Notification/Type/QuoteNotification.tsx
@@ -30,7 +30,7 @@ const QuoteNotification: FC<QuoteNotificationProps> = ({ notification }) => {
   return (
     <div className="space-y-2">
       <div className="flex items-center space-x-3">
-        <ChatBubbleBottomCenterTextIcon className="text-brand-500/70 size-6" />
+        <ChatBubbleBottomCenterTextIcon className="size-6" />
         <div className="flex items-center space-x-1">
           <NotificationProfileAvatar profile={firstProfile} />
         </div>
diff --git a/apps/web/src/components/Notification/Type/ReactionNotification.tsx b/apps/web/src/components/Notification/Type/ReactionNotification.tsx
index 81559cae6e20..5912ba789744 100644
--- a/apps/web/src/components/Notification/Type/ReactionNotification.tsx
+++ b/apps/web/src/components/Notification/Type/ReactionNotification.tsx
@@ -38,7 +38,7 @@ const ReactionNotification: FC<ReactionNotificationProps> = ({
   return (
     <div className="space-y-2">
       <div className="flex items-center space-x-3">
-        <HeartIcon className="text-brand-500/70 size-6" />
+        <HeartIcon className="size-6" />
         <div className="flex items-center space-x-1">
           {reactions.slice(0, 10).map((reaction) => (
             <div key={reaction.profile.id}>
diff --git a/apps/web/src/components/Pages/Privacy.tsx b/apps/web/src/components/Pages/Privacy.tsx
index 842f74463ef8..2f71496b1b39 100644
--- a/apps/web/src/components/Pages/Privacy.tsx
+++ b/apps/web/src/components/Pages/Privacy.tsx
@@ -16,7 +16,7 @@ const Privacy: NextPage = () => {
 
   return (
     <>
-      <div className="bg-brand-400 flex h-48 w-full items-center justify-center">
+      <div className="flex h-48 w-full items-center justify-center bg-gray-400">
         <div className="relative text-center">
           <h1 className="text-3xl font-bold text-white md:text-4xl">
             Privacy Policy
@@ -33,9 +33,7 @@ const Privacy: NextPage = () => {
           <div className="max-w-3/4 relative mx-auto rounded-lg sm:w-2/4">
             <div className="ld-text-gray-500 max-w-none !p-8">
               {/* 1. Overview beings */}
-              <div className="mb-5 text-xl font-bold text-black dark:text-white">
-                1. Overview
-              </div>
+              <div className="mb-5 text-xl font-bold">1. Overview</div>
               <div className="space-y-5">
                 <p className="leading-7">
                   By accessing the Site, you agree to not only this Privacy
@@ -69,7 +67,7 @@ const Privacy: NextPage = () => {
               </div>
               {/* 1. Overview ends */}
               {/* 2. Information Collection beings */}
-              <div className="mb-5 mt-8 text-xl font-bold text-black dark:text-white">
+              <div className="mb-5 mt-8 text-xl font-bold">
                 2. Information Collection
               </div>
               <div className="space-y-5">
@@ -111,7 +109,7 @@ const Privacy: NextPage = () => {
               </div>
               {/* 2. Information Collection ends */}
               {/* 3. Use of Information begins */}
-              <div className="mb-5 mt-8 text-xl font-bold text-black dark:text-white">
+              <div className="mb-5 mt-8 text-xl font-bold">
                 3. Use of Information
               </div>
               <p className="leading-7">
@@ -122,7 +120,7 @@ const Privacy: NextPage = () => {
               </p>
               {/* 3. Use of Information ends */}
               {/* 4. Third-Parties begins */}
-              <div className="mb-5 mt-8 text-xl font-bold text-black dark:text-white">
+              <div className="mb-5 mt-8 text-xl font-bold">
                 4. Third-Parties
               </div>
               <p className="leading-7">
@@ -133,9 +131,7 @@ const Privacy: NextPage = () => {
               </p>
               {/* 4. Third-Parties ends */}
               {/* 5. Analytics begins */}
-              <div className="mb-5 mt-8 text-xl font-bold text-black dark:text-white">
-                5. Analytics
-              </div>
+              <div className="mb-5 mt-8 text-xl font-bold">5. Analytics</div>
               <div className="space-y-5">
                 <p className="leading-7">
                   We use <b>ClickHouse</b> to collect various events from user
@@ -153,7 +149,7 @@ const Privacy: NextPage = () => {
               </div>
               {/* 5. Analytics ends */}
               {/* 6. Your Rights and Choices begins */}
-              <div className="mb-5 mt-8 text-xl font-bold text-black dark:text-white">
+              <div className="mb-5 mt-8 text-xl font-bold">
                 6. Your Rights and Choices
               </div>
               <div className="space-y-5">
@@ -190,7 +186,7 @@ const Privacy: NextPage = () => {
               </div>
               {/* 6. Your Rights and Choices ends */}
               {/* 7. Data Security begins */}
-              <div className="mb-5 mt-8 text-xl font-bold text-black dark:text-white">
+              <div className="mb-5 mt-8 text-xl font-bold">
                 7. Data Security
               </div>
               <p className="leading-7">
@@ -203,9 +199,7 @@ const Privacy: NextPage = () => {
               </p>
               {/* 7. Data Security ends */}
               {/* 8. Children begins */}
-              <div className="mb-5 mt-8 text-xl font-bold text-black dark:text-white">
-                8. Children
-              </div>
+              <div className="mb-5 mt-8 text-xl font-bold">8. Children</div>
               <p className="leading-7">
                 The Site is intended for general audiences and are not directed
                 at children. To use the Site, you must legally be able to enter
@@ -214,7 +208,7 @@ const Privacy: NextPage = () => {
               </p>
               {/* 8. Children ends */}
               {/* 9. Changes to Policy begins */}
-              <div className="mb-5 mt-8 text-xl font-bold text-black dark:text-white">
+              <div className="mb-5 mt-8 text-xl font-bold">
                 9. Changes to Policy
               </div>
               <p className="leading-7">
@@ -226,9 +220,7 @@ const Privacy: NextPage = () => {
               </p>
               {/* 9. Changes to Policy ends */}
               {/* 10. Contact begins */}
-              <div className="mb-5 mt-8 text-xl font-bold text-black dark:text-white">
-                10. Contact
-              </div>
+              <div className="mb-5 mt-8 text-xl font-bold">10. Contact</div>
               <p className="leading-7">
                 If you have any questions or comments about this Privacy Policy,
                 our data practices, or our compliance with applicable law,
diff --git a/apps/web/src/components/Pages/Rules.tsx b/apps/web/src/components/Pages/Rules.tsx
index 0507cb6ca732..e5d265763220 100644
--- a/apps/web/src/components/Pages/Rules.tsx
+++ b/apps/web/src/components/Pages/Rules.tsx
@@ -14,7 +14,7 @@ const Rules: NextPage = () => {
 
   return (
     <>
-      <div className="bg-brand-400 flex h-48 w-full items-center justify-center">
+      <div className="flex h-48 w-full items-center justify-center bg-gray-400">
         <div className="relative text-center">
           <h1 className="text-3xl font-bold text-white md:text-4xl">Rules</h1>
         </div>
@@ -32,9 +32,7 @@ const Rules: NextPage = () => {
                 </p>
               </div>
               {/* Safety beings */}
-              <div className="mb-5 mt-8 text-xl font-bold text-black dark:text-white">
-                Safety
-              </div>
+              <div className="mb-5 mt-8 text-xl font-bold">Safety</div>
               <div className="space-y-5">
                 <p className="leading-7">
                   You are not allowed to display, share or promote any form of
@@ -52,9 +50,7 @@ const Rules: NextPage = () => {
               </div>
               {/* Safety ends */}
               {/* Nudity beings */}
-              <div className="mb-5 mt-8 text-xl font-bold text-black dark:text-white">
-                Nudity
-              </div>
+              <div className="mb-5 mt-8 text-xl font-bold">Nudity</div>
               <div className="space-y-5">
                 <p className="leading-7">
                   {APP_NAME} is not a place to display, share or promote any
@@ -71,9 +67,7 @@ const Rules: NextPage = () => {
               </div>
               {/* Nudity ends */}
               {/* Spam beings */}
-              <div className="mb-5 mt-8 text-xl font-bold text-black dark:text-white">
-                Spam
-              </div>
+              <div className="mb-5 mt-8 text-xl font-bold">Spam</div>
               <div className="space-y-5">
                 <p className="leading-7">
                   You are not allowed to use {APP_NAME} as a platform to
@@ -92,9 +86,7 @@ const Rules: NextPage = () => {
               </div>
               {/* Spam ends */}
               {/* Impersonation beings */}
-              <div className="mb-5 mt-8 text-xl font-bold text-black dark:text-white">
-                Impersonation
-              </div>
+              <div className="mb-5 mt-8 text-xl font-bold">Impersonation</div>
               <div className="space-y-5">
                 <p className="leading-7">
                   You are not allowed to impersonate other people on {APP_NAME}.
@@ -110,7 +102,7 @@ const Rules: NextPage = () => {
               </div>
               {/* Impersonation ends */}
               {/* Copyright and Trademarks beings */}
-              <div className="mb-5 mt-8 text-xl font-bold text-black dark:text-white">
+              <div className="mb-5 mt-8 text-xl font-bold">
                 Copyright and Trademarks
               </div>
               <p className="leading-7">
@@ -119,9 +111,7 @@ const Rules: NextPage = () => {
               </p>
               {/* Copyright and Trademarks ends */}
               {/* Feedback beings */}
-              <div className="mb-5 mt-8 text-xl font-bold text-black dark:text-white">
-                Feedback
-              </div>
+              <div className="mb-5 mt-8 text-xl font-bold">Feedback</div>
               <p className="linkify leading-7">
                 If you have any feedback on these rules or if you have any
                 questions, please <Link href="/support">Contact us</Link>.
diff --git a/apps/web/src/components/Pages/Terms.tsx b/apps/web/src/components/Pages/Terms.tsx
index b0f2e2e2b719..7a170419df22 100644
--- a/apps/web/src/components/Pages/Terms.tsx
+++ b/apps/web/src/components/Pages/Terms.tsx
@@ -15,7 +15,7 @@ const Terms: NextPage = () => {
 
   return (
     <>
-      <div className="bg-brand-400 flex h-48 w-full items-center justify-center">
+      <div className="flex h-48 w-full items-center justify-center bg-gray-400">
         <div className="relative text-center">
           <h1 className="text-3xl font-bold text-white md:text-4xl">
             Terms & Conditions
@@ -32,9 +32,7 @@ const Terms: NextPage = () => {
           <div className="max-w-3/4 relative mx-auto rounded-lg sm:w-2/4">
             <div className="ld-text-gray-500 max-w-none !p-8">
               {/* 1. Overview beings */}
-              <div className="mb-5 text-xl font-bold text-black dark:text-white">
-                1. Overview
-              </div>
+              <div className="mb-5 text-xl font-bold">1. Overview</div>
               <div className="space-y-5">
                 <p className="leading-7">
                   The website hey.xyz” (the “Site”) offers information, tools
@@ -71,7 +69,7 @@ const Terms: NextPage = () => {
               </div>
               {/* 1. Overview ends */}
               {/* 2. General Conditions beings */}
-              <div className="mb-5 mt-8 text-xl font-bold text-black dark:text-white">
+              <div className="mb-5 mt-8 text-xl font-bold">
                 2. General Conditions
               </div>
               <p className="leading-7">
@@ -85,9 +83,7 @@ const Terms: NextPage = () => {
               </p>
               {/* 2. General Conditions ends */}
               {/* 3. Services begins */}
-              <div className="mb-5 mt-8 text-xl font-bold text-black dark:text-white">
-                3. Services
-              </div>
+              <div className="mb-5 mt-8 text-xl font-bold">3. Services</div>
               <div className="space-y-5">
                 <p className="leading-7">
                   User Lens profile is referred as the “Profile” in the “Site”.
@@ -152,7 +148,7 @@ const Terms: NextPage = () => {
               </div>
               {/* 3. Services ends */}
               {/* 4. Accuracy, Completeness and Timeliness of information begins */}
-              <div className="mb-5 mt-8 text-xl font-bold text-black dark:text-white">
+              <div className="mb-5 mt-8 text-xl font-bold">
                 4. Accuracy, Completeness and Timeliness of information
               </div>
               <div className="space-y-5">
@@ -169,7 +165,7 @@ const Terms: NextPage = () => {
               </div>
               {/* 4. Accuracy, Completeness and Timeliness of information ends */}
               {/* 5. Modification of Services begins */}
-              <div className="mb-5 mt-8 text-xl font-bold text-black dark:text-white">
+              <div className="mb-5 mt-8 text-xl font-bold">
                 5. Modification of Services
               </div>
               <p className="leading-7">
@@ -181,7 +177,7 @@ const Terms: NextPage = () => {
               </p>
               {/* 5. Modification of Services ends */}
               {/* 6. Third-Party Services & Websites begins */}
-              <div className="mb-5 mt-8 text-xl font-bold text-black dark:text-white">
+              <div className="mb-5 mt-8 text-xl font-bold">
                 6. Third-Party Services & Websites
               </div>
               <div className="space-y-5">
@@ -203,7 +199,7 @@ const Terms: NextPage = () => {
               </div>
               {/* 6. Third-Party Services & Websites ends */}
               {/* 7. Personal Information begins */}
-              <div className="mb-5 mt-8 text-xl font-bold text-black dark:text-white">
+              <div className="mb-5 mt-8 text-xl font-bold">
                 7. Personal Information
               </div>
               <p className="linkify leading-7">
@@ -212,7 +208,7 @@ const Terms: NextPage = () => {
               </p>
               {/* 7. Personal Information ends */}
               {/* 8. Prohibited Usage begins */}
-              <div className="mb-5 mt-8 text-xl font-bold text-black dark:text-white">
+              <div className="mb-5 mt-8 text-xl font-bold">
                 8. Prohibited Usage
               </div>
               <div className="space-y-5">
@@ -267,7 +263,7 @@ const Terms: NextPage = () => {
               </div>
               {/* 8. Prohibited Usage ends */}
               {/* 9. Assumption of Risk begins */}
-              <div className="mb-5 mt-8 text-xl font-bold text-black dark:text-white">
+              <div className="mb-5 mt-8 text-xl font-bold">
                 9. Assumption of Risk
               </div>
               <p className="leading-7">
@@ -279,7 +275,7 @@ const Terms: NextPage = () => {
               </p>
               {/* 9. Assumption of Risk ends */}
               {/* 10. Refund Policy */}
-              <div className="mb-5 mt-8 text-xl font-bold text-black dark:text-white">
+              <div className="mb-5 mt-8 text-xl font-bold">
                 10. Refund Policy
               </div>
               <div className="space-y-5">
@@ -302,7 +298,7 @@ const Terms: NextPage = () => {
               </div>
               {/* 10.Refund Policy */}
               {/* 11. Disclaimer of Warranties begins */}
-              <div className="mb-5 mt-8 text-xl font-bold text-black dark:text-white">
+              <div className="mb-5 mt-8 text-xl font-bold">
                 11. Disclaimer of Warranties
               </div>
               <p className="leading-7">
@@ -314,7 +310,7 @@ const Terms: NextPage = () => {
               </p>
               {/* 11. Disclaimer of Warranties ends */}
               {/* 12. Termination and Cancellation begins */}
-              <div className="mb-5 mt-8 text-xl font-bold text-black dark:text-white">
+              <div className="mb-5 mt-8 text-xl font-bold">
                 12. Termination and Cancellation
               </div>
               <div className="space-y-5">
@@ -331,7 +327,7 @@ const Terms: NextPage = () => {
               </div>
               {/* 12. Termination and Cancellation ends */}
               {/* 13. Contact Information begins */}
-              <div className="mb-5 mt-8 text-xl font-bold text-black dark:text-white">
+              <div className="mb-5 mt-8 text-xl font-bold">
                 13. Contact Information
               </div>
               <p className="leading-7">
diff --git a/apps/web/src/components/Pages/Thanks.tsx b/apps/web/src/components/Pages/Thanks.tsx
index 52373b419d95..379ecd674143 100644
--- a/apps/web/src/components/Pages/Thanks.tsx
+++ b/apps/web/src/components/Pages/Thanks.tsx
@@ -54,7 +54,7 @@ const Brand: FC<BrandProps> = ({ children, logo, name, size, type, url }) => {
 const Thanks: NextPage = () => {
   return (
     <>
-      <div className="bg-brand-400 flex h-48 w-full items-center justify-center">
+      <div className="flex h-48 w-full items-center justify-center bg-gray-400">
         <div className="relative text-center">
           <div className="flex items-center space-x-2 text-3xl font-bold text-white md:text-4xl">
             <div>Thank you!</div>
diff --git a/apps/web/src/components/Profile/Details.tsx b/apps/web/src/components/Profile/Details.tsx
index f4aaeedb73dd..98078ad0c2ee 100644
--- a/apps/web/src/components/Profile/Details.tsx
+++ b/apps/web/src/components/Profile/Details.tsx
@@ -111,7 +111,7 @@ const Details: FC<DetailsProps> = ({ profile }) => {
           <TbaBadge address={profile.ownedBy.address} />
           {hasMisused(profile.id) ? (
             <Tooltip content={misuseDetails?.type}>
-              <ExclamationCircleIcon className="size-6 text-red-500" />
+              <ExclamationCircleIcon className="size-6" />
             </Tooltip>
           ) : null}
         </div>
@@ -151,15 +151,15 @@ const Details: FC<DetailsProps> = ({ profile }) => {
           ) : followType !== FollowModuleType.RevertFollowModule ? (
             profile.operations.isFollowedByMe.value ? (
               <>
-                <Unfollow profile={profile} showText />
+                <Unfollow profile={profile} />
                 {followType === FollowModuleType.FeeFollowModule ? (
                   <SuperFollow again profile={profile} />
                 ) : null}
               </>
             ) : followType === FollowModuleType.FeeFollowModule ? (
-              <SuperFollow profile={profile} showText />
+              <SuperFollow profile={profile} />
             ) : (
-              <Follow profile={profile} showText />
+              <Follow profile={profile} />
             )
           ) : null}
 
@@ -172,7 +172,7 @@ const Details: FC<DetailsProps> = ({ profile }) => {
               setShowMutualFollowersModal={setShowMutualFollowersModal}
             />
             <Modal
-              icon={<UsersIcon className="text-brand-500 size-5" />}
+              icon={<UsersIcon className="size-5" />}
               onClose={() => setShowMutualFollowersModal(false)}
               show={showMutualFollowersModal}
               title="Followers you know"
diff --git a/apps/web/src/components/Profile/Feed.tsx b/apps/web/src/components/Profile/Feed.tsx
index 56412133e66d..36698154f800 100644
--- a/apps/web/src/components/Profile/Feed.tsx
+++ b/apps/web/src/components/Profile/Feed.tsx
@@ -131,7 +131,7 @@ const Feed: FC<FeedProps> = ({ handle, profileId, type }) => {
 
     return (
       <EmptyState
-        icon={<RectangleStackIcon className="text-brand-500 size-8" />}
+        icon={<RectangleStackIcon className="size-8" />}
         message={
           <div>
             <span className="mr-1 font-bold">{handle}</span>
diff --git a/apps/web/src/components/Profile/Filters/MediaFilter.tsx b/apps/web/src/components/Profile/Filters/MediaFilter.tsx
index 4b24dcd190ed..03166077d384 100644
--- a/apps/web/src/components/Profile/Filters/MediaFilter.tsx
+++ b/apps/web/src/components/Profile/Filters/MediaFilter.tsx
@@ -26,7 +26,7 @@ const MediaFilter = () => {
     <Menu as="div" className="relative">
       <Menu.Button className="rounded-md hover:bg-gray-300/20">
         <Tooltip content="Filter" placement="top">
-          <AdjustmentsVerticalIcon className="text-brand-500 size-5" />
+          <AdjustmentsVerticalIcon className="size-5" />
         </Tooltip>
       </Menu.Button>
       <MenuTransition>
diff --git a/apps/web/src/components/Profile/Followerings.tsx b/apps/web/src/components/Profile/Followerings.tsx
index 5304914afad0..28870536b514 100644
--- a/apps/web/src/components/Profile/Followerings.tsx
+++ b/apps/web/src/components/Profile/Followerings.tsx
@@ -54,7 +54,7 @@ const Followerings: FC<FolloweringsProps> = ({ profile }) => {
         </div>
       </button>
       <Modal
-        icon={<UsersIcon className="text-brand-500 size-5" />}
+        icon={<UsersIcon className="size-5" />}
         onClose={() => setShowFollowingModal(false)}
         show={showFollowingModal}
         title="Following"
@@ -65,7 +65,7 @@ const Followerings: FC<FolloweringsProps> = ({ profile }) => {
         />
       </Modal>
       <Modal
-        icon={<UsersIcon className="text-brand-500 size-5" />}
+        icon={<UsersIcon className="size-5" />}
         onClose={() => setShowFollowersModal(false)}
         show={showFollowersModal}
         title="Followers"
diff --git a/apps/web/src/components/Profile/Followers.tsx b/apps/web/src/components/Profile/Followers.tsx
index 0d9652e9cbef..a7d8373adc83 100644
--- a/apps/web/src/components/Profile/Followers.tsx
+++ b/apps/web/src/components/Profile/Followers.tsx
@@ -52,7 +52,7 @@ const Followers: FC<FollowersProps> = ({ handle, profileId }) => {
     return (
       <EmptyState
         hideCard
-        icon={<UsersIcon className="text-brand-500 size-8" />}
+        icon={<UsersIcon className="size-8" />}
         message={
           <div>
             <span className="mr-1 font-bold">{handle}</span>
diff --git a/apps/web/src/components/Profile/Following.tsx b/apps/web/src/components/Profile/Following.tsx
index 08e565b3ef5c..d092fc676304 100644
--- a/apps/web/src/components/Profile/Following.tsx
+++ b/apps/web/src/components/Profile/Following.tsx
@@ -51,7 +51,7 @@ const Following: FC<FollowingProps> = ({ handle, profileId }) => {
     return (
       <EmptyState
         hideCard
-        icon={<UsersIcon className="text-brand-500 size-8" />}
+        icon={<UsersIcon className="size-8" />}
         message={
           <div>
             <span className="mr-1 font-bold">{handle}</span>
diff --git a/apps/web/src/components/Profile/MutualFollowers/List.tsx b/apps/web/src/components/Profile/MutualFollowers/List.tsx
index eb2adfb7ad1e..af5682523b5b 100644
--- a/apps/web/src/components/Profile/MutualFollowers/List.tsx
+++ b/apps/web/src/components/Profile/MutualFollowers/List.tsx
@@ -55,7 +55,7 @@ const MutualFollowersList: FC<MutualFollowersListProps> = ({
     return (
       <EmptyState
         hideCard
-        icon={<UsersIcon className="text-brand-500 size-8" />}
+        icon={<UsersIcon className="size-8" />}
         message={
           <div>
             <span className="mr-1 font-bold">{handle}</span>
diff --git a/apps/web/src/components/Publication/Metadata.tsx b/apps/web/src/components/Publication/Metadata.tsx
index 12736f39b773..f78d6d238785 100644
--- a/apps/web/src/components/Publication/Metadata.tsx
+++ b/apps/web/src/components/Publication/Metadata.tsx
@@ -31,7 +31,7 @@ const Metadata: FC<MetadataProps> = ({ metadata }) => {
       forceRounded
     >
       <div className="flex items-center space-x-2">
-        <ScaleIcon className="text-brand-500 size-4 min-w-max" />
+        <ScaleIcon className="size-4 min-w-max" />
         <div>
           Licence: <b>{license}</b>
         </div>
diff --git a/apps/web/src/components/Publication/OpenAction/CollectModule/index.tsx b/apps/web/src/components/Publication/OpenAction/CollectModule/index.tsx
index 491a6d98436d..847baacd306c 100644
--- a/apps/web/src/components/Publication/OpenAction/CollectModule/index.tsx
+++ b/apps/web/src/components/Publication/OpenAction/CollectModule/index.tsx
@@ -130,7 +130,7 @@ const CollectModule: FC<CollectModuleProps> = ({ openAction, publication }) => {
                 width={28}
               />
             ) : (
-              <CurrencyDollarIcon className="text-brand-500 size-7" />
+              <CurrencyDollarIcon className="size-7" />
             )}
             <span className="space-x-1">
               <span className="text-2xl font-bold">{amount}</span>
@@ -159,7 +159,7 @@ const CollectModule: FC<CollectModuleProps> = ({ openAction, publication }) => {
                 {plur('collector', countOpenActions)}
               </button>
               <Modal
-                icon={<RectangleStackIcon className="text-brand-500 size-5" />}
+                icon={<RectangleStackIcon className="size-5" />}
                 onClose={() => setShowCollectorsModal(false)}
                 show={showCollectorsModal}
                 title="Collected by"
diff --git a/apps/web/src/components/Publication/OpenAction/UnknownModule/Preview.tsx b/apps/web/src/components/Publication/OpenAction/UnknownModule/Preview.tsx
index 2e0c4b5ec170..381624b29d3e 100644
--- a/apps/web/src/components/Publication/OpenAction/UnknownModule/Preview.tsx
+++ b/apps/web/src/components/Publication/OpenAction/UnknownModule/Preview.tsx
@@ -24,10 +24,7 @@ const UnknownModulePreview: FC<UnknownModulePreviewProps> = ({ module }) => {
         <div className="w-full space-y-1.5 text-left">
           <div className="flex items-center justify-between space-x-2">
             <div className="flex w-full items-center space-x-2">
-              <GetOpenActionModuleIcon
-                className="text-brand-500"
-                module={module}
-              />
+              <GetOpenActionModuleIcon module={module} />
               {loading ? (
                 <div className="shimmer my-1.5 h-4 w-4/12 rounded-full" />
               ) : (
diff --git a/apps/web/src/components/Publication/OpenAction/UnknownModule/Tip/index.tsx b/apps/web/src/components/Publication/OpenAction/UnknownModule/Tip/index.tsx
index 38bd9889d823..33d14fb00e9c 100644
--- a/apps/web/src/components/Publication/OpenAction/UnknownModule/Tip/index.tsx
+++ b/apps/web/src/components/Publication/OpenAction/UnknownModule/Tip/index.tsx
@@ -61,7 +61,7 @@ const TipOpenAction: FC<TipOpenActionProps> = ({
         </motion.button>
       </div>
       <Modal
-        icon={<TipIcon className="text-brand-500 size-5" />}
+        icon={<TipIcon className="size-5" />}
         onClose={() => setShowOpenActionModal(false)}
         show={showOpenActionModal}
         title="Send a tip"
diff --git a/apps/web/src/components/Publication/OpenAction/index.tsx b/apps/web/src/components/Publication/OpenAction/index.tsx
index 1a4e1606910f..eabb332c9791 100644
--- a/apps/web/src/components/Publication/OpenAction/index.tsx
+++ b/apps/web/src/components/Publication/OpenAction/index.tsx
@@ -80,7 +80,7 @@ const OpenAction: FC<OpenActionProps> = ({ publication, showCount }) => {
         ) : null}
       </div>
       <Modal
-        icon={<RectangleStackIcon className="text-brand-500 size-5" />}
+        icon={<RectangleStackIcon className="size-5" />}
         onClose={() => setShowOpenActionModal(false)}
         show={showOpenActionModal}
         title="Open Actions"
diff --git a/apps/web/src/components/Publication/PublicationProfile.tsx b/apps/web/src/components/Publication/PublicationProfile.tsx
index 96870269dfa7..6e5d1b071a53 100644
--- a/apps/web/src/components/Publication/PublicationProfile.tsx
+++ b/apps/web/src/components/Publication/PublicationProfile.tsx
@@ -55,7 +55,7 @@ const PublicationProfile: FC<FeedUserProfileProps> = ({
         <CheckBadgeIcon className="text-brand-500 ml-1 size-4" />
       ) : null}
       {hasMisused(profile.id) ? (
-        <ExclamationCircleIcon className="ml-1 size-4 text-red-500" />
+        <ExclamationCircleIcon className="ml-1 size-4" />
       ) : null}
       {timestamp ? (
         <span className="ld-text-gray-500 truncate">
diff --git a/apps/web/src/components/Publication/PublicationStats.tsx b/apps/web/src/components/Publication/PublicationStats.tsx
index 0b8481d404a6..976b70144e6c 100644
--- a/apps/web/src/components/Publication/PublicationStats.tsx
+++ b/apps/web/src/components/Publication/PublicationStats.tsx
@@ -83,7 +83,7 @@ const PublicationStats: FC<PublicationStatsProps> = ({
               {plur('Mirror', shares)}
             </button>
             <Modal
-              icon={<ArrowsRightLeftIcon className="text-brand-500 size-5" />}
+              icon={<ArrowsRightLeftIcon className="size-5" />}
               onClose={() => setShowMirrorsModal(false)}
               show={showMirrorsModal}
               title="Mirrored by"
@@ -108,7 +108,7 @@ const PublicationStats: FC<PublicationStatsProps> = ({
               {plur('Quote', quotes)}
             </button>
             <Modal
-              icon={<ArrowsRightLeftIcon className="text-brand-500 size-5" />}
+              icon={<ArrowsRightLeftIcon className="size-5" />}
               onClose={() => setShowQuotesModal(false)}
               show={showQuotesModal}
               title="Quoted by"
@@ -135,7 +135,7 @@ const PublicationStats: FC<PublicationStatsProps> = ({
               {plur('Like', reactions)}
             </button>
             <Modal
-              icon={<HeartIcon className="text-brand-500 size-5" />}
+              icon={<HeartIcon className="size-5" />}
               onClose={() => setShowLikesModal(false)}
               show={showLikesModal}
               title="Liked by"
@@ -162,7 +162,7 @@ const PublicationStats: FC<PublicationStatsProps> = ({
               {plur('Collect', countOpenActions)}
             </button>
             <Modal
-              icon={<RectangleStackIcon className="text-brand-500 size-5" />}
+              icon={<RectangleStackIcon className="size-5" />}
               onClose={() => setShowCollectorsModal(false)}
               show={showCollectorsModal}
               title="Collected by"
diff --git a/apps/web/src/components/Search/Profiles.tsx b/apps/web/src/components/Search/Profiles.tsx
index 1f57997a761a..62eaa43c5b27 100644
--- a/apps/web/src/components/Search/Profiles.tsx
+++ b/apps/web/src/components/Search/Profiles.tsx
@@ -53,7 +53,7 @@ const Profiles: FC<ProfilesProps> = ({ query }) => {
   if (profiles?.length === 0) {
     return (
       <EmptyState
-        icon={<UsersIcon className="text-brand-500 size-8" />}
+        icon={<UsersIcon className="size-8" />}
         message={
           <span>
             No profiles for <b>&ldquo;{query}&rdquo;</b>
diff --git a/apps/web/src/components/Search/Publications.tsx b/apps/web/src/components/Search/Publications.tsx
index eaabe5f46ae7..58c016605456 100644
--- a/apps/web/src/components/Search/Publications.tsx
+++ b/apps/web/src/components/Search/Publications.tsx
@@ -52,7 +52,7 @@ const Publications: FC<PublicationsProps> = ({ query }) => {
   if (publications?.length === 0) {
     return (
       <EmptyState
-        icon={<RectangleStackIcon className="text-brand-500 size-8" />}
+        icon={<RectangleStackIcon className="size-8" />}
         message={
           <span>
             No publications for <b>&ldquo;{query}&rdquo;</b>
diff --git a/apps/web/src/components/Settings/Account/RateLimits.tsx b/apps/web/src/components/Settings/Account/RateLimits.tsx
index 9c5e3a56e1f9..386e342d4438 100644
--- a/apps/web/src/components/Settings/Account/RateLimits.tsx
+++ b/apps/web/src/components/Settings/Account/RateLimits.tsx
@@ -9,7 +9,7 @@ const ProgressBar: FC<{ max: number; value: number }> = ({ max, value }) => {
   return (
     <div className="w-full rounded-full bg-gray-200">
       <div
-        className="bg-brand-500 h-2.5 rounded-full"
+        className="h-2.5 rounded-full bg-black"
         style={{
           width: `${(value / max) * 100}%`
         }}
diff --git a/apps/web/src/components/Settings/Actions/List.tsx b/apps/web/src/components/Settings/Actions/List.tsx
index 5a1ba4082b82..f745444a8a33 100644
--- a/apps/web/src/components/Settings/Actions/List.tsx
+++ b/apps/web/src/components/Settings/Actions/List.tsx
@@ -55,7 +55,7 @@ const List: FC = () => {
     return (
       <EmptyState
         hideCard
-        icon={<QueueListIcon className="text-brand-500 size-8" />}
+        icon={<QueueListIcon className="size-8" />}
         message="You have no actions on your account!"
       />
     );
diff --git a/apps/web/src/components/Settings/Allowance/Button.tsx b/apps/web/src/components/Settings/Allowance/Button.tsx
index 55830e3e8e7d..1431890605cb 100644
--- a/apps/web/src/components/Settings/Allowance/Button.tsx
+++ b/apps/web/src/components/Settings/Allowance/Button.tsx
@@ -120,7 +120,7 @@ const AllowanceButton: FC<AllowanceButtonProps> = ({
       className={className}
       icon={
         queryLoading || transactionLoading || waitLoading ? (
-          <Spinner size="xs" variant="warning" />
+          <Spinner size="xs" />
         ) : (
           <MinusIcon className="size-4" />
         )
@@ -132,7 +132,6 @@ const AllowanceButton: FC<AllowanceButtonProps> = ({
           module.moduleName
         )
       }
-      variant="warning"
     >
       Revoke
     </Button>
@@ -142,11 +141,12 @@ const AllowanceButton: FC<AllowanceButtonProps> = ({
         className={className}
         icon={<PlusIcon className="size-4" />}
         onClick={() => setShowWarningModal(!showWarningModal)}
+        outline
       >
         {title}
       </Button>
       <Modal
-        icon={<ExclamationTriangleIcon className="size-5 text-yellow-500" />}
+        icon={<ExclamationTriangleIcon className="size-5" />}
         onClose={() => setShowWarningModal(false)}
         show={showWarningModal}
         title="Warning"
diff --git a/apps/web/src/components/Settings/Blocked/List.tsx b/apps/web/src/components/Settings/Blocked/List.tsx
index 0e3186dc21c3..c2bca87adc1a 100644
--- a/apps/web/src/components/Settings/Blocked/List.tsx
+++ b/apps/web/src/components/Settings/Blocked/List.tsx
@@ -52,7 +52,7 @@ const List: FC = () => {
     return (
       <EmptyState
         hideCard
-        icon={<NoSymbolIcon className="text-brand-500 size-8" />}
+        icon={<NoSymbolIcon className="size-8" />}
         message="You are not blocking any profiles!"
       />
     );
diff --git a/apps/web/src/components/Settings/Danger/Delete.tsx b/apps/web/src/components/Settings/Danger/Delete.tsx
index 443b1db882c3..240f44070eb2 100644
--- a/apps/web/src/components/Settings/Danger/Delete.tsx
+++ b/apps/web/src/components/Settings/Danger/Delete.tsx
@@ -127,7 +127,7 @@ const DeleteSettings: FC = () => {
         {isLoading ? 'Deleting...' : 'Delete your account'}
       </Button>
       <Modal
-        icon={<ExclamationTriangleIcon className="size-5 text-red-500" />}
+        icon={<ExclamationTriangleIcon className="size-5" />}
         onClose={() => setShowWarningModal(false)}
         show={showWarningModal}
         title="Danger zone"
diff --git a/apps/web/src/components/Settings/Danger/Guardian.tsx b/apps/web/src/components/Settings/Danger/Guardian.tsx
index 0ce82d42168b..a01c5834467c 100644
--- a/apps/web/src/components/Settings/Danger/Guardian.tsx
+++ b/apps/web/src/components/Settings/Danger/Guardian.tsx
@@ -109,7 +109,7 @@ const GuardianSettings: FC = () => {
         </Button>
       )}
       <Modal
-        icon={<ExclamationTriangleIcon className="size-5 text-red-500" />}
+        icon={<ExclamationTriangleIcon className="size-5" />}
         onClose={() => setShowWarningModal(false)}
         show={showWarningModal}
         title="Danger zone"
diff --git a/apps/web/src/components/Settings/Export/Followers.tsx b/apps/web/src/components/Settings/Export/Followers.tsx
index 79fb897f41b9..8612ffe684e8 100644
--- a/apps/web/src/components/Settings/Export/Followers.tsx
+++ b/apps/web/src/components/Settings/Export/Followers.tsx
@@ -72,9 +72,11 @@ const Followers: FC = () => {
         </div>
       ) : null}
       {fetchCompleted ? (
-        <Button onClick={download}>Download followers</Button>
+        <Button onClick={download} outline>
+          Download followers
+        </Button>
       ) : (
-        <Button disabled={exporting} onClick={handleExportClick}>
+        <Button disabled={exporting} onClick={handleExportClick} outline>
           {exporting ? 'Exporting...' : 'Export now'}
         </Button>
       )}
diff --git a/apps/web/src/components/Settings/Export/Following.tsx b/apps/web/src/components/Settings/Export/Following.tsx
index e6f0eb9905a2..5f8c736b88f9 100644
--- a/apps/web/src/components/Settings/Export/Following.tsx
+++ b/apps/web/src/components/Settings/Export/Following.tsx
@@ -74,9 +74,11 @@ const Following: FC = () => {
         </div>
       ) : null}
       {fetchCompleted ? (
-        <Button onClick={download}>Download following</Button>
+        <Button onClick={download} outline>
+          Download following
+        </Button>
       ) : (
-        <Button disabled={exporting} onClick={handleExportClick}>
+        <Button disabled={exporting} onClick={handleExportClick} outline>
           {exporting ? 'Exporting...' : 'Export now'}
         </Button>
       )}
diff --git a/apps/web/src/components/Settings/Export/Notifications.tsx b/apps/web/src/components/Settings/Export/Notifications.tsx
index 7e087b31c9fd..4f76341769c5 100644
--- a/apps/web/src/components/Settings/Export/Notifications.tsx
+++ b/apps/web/src/components/Settings/Export/Notifications.tsx
@@ -76,9 +76,11 @@ const Notifications: FC = () => {
         </div>
       ) : null}
       {fetchCompleted ? (
-        <Button onClick={download}>Download notifications</Button>
+        <Button onClick={download} outline>
+          Download notifications
+        </Button>
       ) : (
-        <Button disabled={exporting} onClick={handleExportClick}>
+        <Button disabled={exporting} onClick={handleExportClick} outline>
           {exporting ? 'Exporting...' : 'Export now'}
         </Button>
       )}
diff --git a/apps/web/src/components/Settings/Export/Profile.tsx b/apps/web/src/components/Settings/Export/Profile.tsx
index 5312a804f7cf..985a5ecaf202 100644
--- a/apps/web/src/components/Settings/Export/Profile.tsx
+++ b/apps/web/src/components/Settings/Export/Profile.tsx
@@ -48,9 +48,11 @@ const Profile: FC = () => {
       <div className="text-lg font-bold">Export profile</div>
       <div className="pb-2">Export all your profile data to a JSON file.</div>
       {fetchCompleted ? (
-        <Button onClick={download}>Download profile</Button>
+        <Button onClick={download} outline>
+          Download profile
+        </Button>
       ) : (
-        <Button disabled={exporting} onClick={handleExportClick}>
+        <Button disabled={exporting} onClick={handleExportClick} outline>
           {exporting ? 'Exporting...' : 'Export now'}
         </Button>
       )}
diff --git a/apps/web/src/components/Settings/Export/Publications.tsx b/apps/web/src/components/Settings/Export/Publications.tsx
index 09e634a27f41..806548c1a6d8 100644
--- a/apps/web/src/components/Settings/Export/Publications.tsx
+++ b/apps/web/src/components/Settings/Export/Publications.tsx
@@ -78,9 +78,11 @@ const Publications: FC = () => {
         </div>
       ) : null}
       {fetchCompleted ? (
-        <Button onClick={download}>Download publications</Button>
+        <Button onClick={download} outline>
+          Download publications
+        </Button>
       ) : (
-        <Button disabled={exporting} onClick={handleExportClick}>
+        <Button disabled={exporting} onClick={handleExportClick} outline>
           {exporting ? 'Exporting...' : 'Export now'}
         </Button>
       )}
diff --git a/apps/web/src/components/Settings/Export/Tokens.tsx b/apps/web/src/components/Settings/Export/Tokens.tsx
index 2ac383a6350e..f5a36d4a6007 100644
--- a/apps/web/src/components/Settings/Export/Tokens.tsx
+++ b/apps/web/src/components/Settings/Export/Tokens.tsx
@@ -13,29 +13,29 @@ const Tokens: FC = () => {
         <div className="pb-1 text-lg font-bold">
           Your temporary access token
         </div>
-        <div
-          className="break-words rounded-md bg-gray-300 px-1.5 py-0.5 text-sm font-bold dark:bg-gray-600"
+        <button
+          className="cursor-pointer break-all rounded-md bg-gray-300 p-2 px-3 text-left text-sm font-bold dark:bg-gray-600"
           onClick={() => {
             toast.success('Copied to clipboard');
             navigator.clipboard.writeText(accessToken as string);
           }}
         >
           {accessToken}
-        </div>
+        </button>
       </Card>
       <Card className="space-y-2 p-5">
         <div className="pb-1 text-lg font-bold">
           Your temporary refresh token
         </div>
-        <div
-          className="break-words rounded-md bg-gray-300 px-1.5 py-0.5 text-sm font-bold dark:bg-gray-600"
+        <button
+          className="cursor-pointer break-all rounded-md bg-gray-300 p-2 px-3 text-left text-sm font-bold dark:bg-gray-600"
           onClick={() => {
             toast.success('Copied to clipboard');
             navigator.clipboard.writeText(refreshToken as string);
           }}
         >
           {refreshToken}
-        </div>
+        </button>
       </Card>
     </>
   );
diff --git a/apps/web/src/components/Settings/Handles/LinkHandle.tsx b/apps/web/src/components/Settings/Handles/LinkHandle.tsx
index 5b636fa722ee..10878ec6f1ea 100644
--- a/apps/web/src/components/Settings/Handles/LinkHandle.tsx
+++ b/apps/web/src/components/Settings/Handles/LinkHandle.tsx
@@ -184,7 +184,7 @@ const LinkHandle: FC = () => {
     return (
       <EmptyState
         hideCard
-        icon={<AtSymbolIcon className="text-brand-500 size-8" />}
+        icon={<AtSymbolIcon className="size-8" />}
         message="No handles found to link!"
       />
     );
diff --git a/apps/web/src/components/Settings/Interests/Interests.tsx b/apps/web/src/components/Settings/Interests/Interests.tsx
index ab1e13cd9025..a2a4eb7ee6e6 100644
--- a/apps/web/src/components/Settings/Interests/Interests.tsx
+++ b/apps/web/src/components/Settings/Interests/Interests.tsx
@@ -98,7 +98,7 @@ const Interests: FC = () => {
                   }
                   icon={
                     selectedTopics.includes(subCategory.id) ? (
-                      <CheckCircleIcon className="text-brand-500 size-4" />
+                      <CheckCircleIcon className="size-4" />
                     ) : (
                       <PlusCircleIcon className="size-4" />
                     )
@@ -127,7 +127,7 @@ const Interests: FC = () => {
                   }
                   icon={
                     selectedTopics.includes(category.id) ? (
-                      <CheckCircleIcon className="text-brand-500 size-4" />
+                      <CheckCircleIcon className="size-4" />
                     ) : (
                       <PlusCircleIcon className="size-4" />
                     )
diff --git a/apps/web/src/components/Settings/Manager/ProfileManager/Managed/List.tsx b/apps/web/src/components/Settings/Manager/ProfileManager/Managed/List.tsx
index 2d269590d992..34287537650a 100644
--- a/apps/web/src/components/Settings/Manager/ProfileManager/Managed/List.tsx
+++ b/apps/web/src/components/Settings/Manager/ProfileManager/Managed/List.tsx
@@ -60,7 +60,7 @@ const List: FC = () => {
     return (
       <EmptyState
         hideCard
-        icon={<UsersIcon className="text-brand-500 size-8" />}
+        icon={<UsersIcon className="size-8" />}
         message="You are not managing any profiles!"
       />
     );
diff --git a/apps/web/src/components/Settings/Manager/ProfileManager/Managers/List.tsx b/apps/web/src/components/Settings/Manager/ProfileManager/Managers/List.tsx
index 32ca494bc6ae..3952d6e74f2a 100644
--- a/apps/web/src/components/Settings/Manager/ProfileManager/Managers/List.tsx
+++ b/apps/web/src/components/Settings/Manager/ProfileManager/Managers/List.tsx
@@ -184,7 +184,7 @@ const List: FC = () => {
     return (
       <EmptyState
         hideCard
-        icon={<UserCircleIcon className="text-brand-500 size-8" />}
+        icon={<UserCircleIcon className="size-8" />}
         message="No profile managers added!"
       />
     );
diff --git a/apps/web/src/components/Settings/Sessions/List.tsx b/apps/web/src/components/Settings/Sessions/List.tsx
index d77a611b1bd2..769cbdcdbdef 100644
--- a/apps/web/src/components/Settings/Sessions/List.tsx
+++ b/apps/web/src/components/Settings/Sessions/List.tsx
@@ -106,7 +106,7 @@ const List: FC = () => {
     return (
       <EmptyState
         hideCard
-        icon={<GlobeAltIcon className="text-brand-500 size-8" />}
+        icon={<GlobeAltIcon className="size-8" />}
         message="You are not logged in on any other devices!"
       />
     );
diff --git a/apps/web/src/components/Shared/Audio/index.tsx b/apps/web/src/components/Shared/Audio/index.tsx
index 682ab88e2825..81bf58c8e511 100644
--- a/apps/web/src/components/Shared/Audio/index.tsx
+++ b/apps/web/src/components/Shared/Audio/index.tsx
@@ -79,11 +79,9 @@ const Audio: FC<AudioProps> = ({
 
   return (
     <div
-      className="bg-brand-500 overflow-hidden rounded-xl border px-3.5 pt-3.5 md:p-0 dark:border-gray-700"
+      className="overflow-hidden rounded-xl border bg-gray-500 px-3.5 pt-3.5 md:p-0 dark:border-gray-700"
       onClick={stopEventPropagation}
-      style={{
-        backgroundImage: `url(${isNew ? newPreviewUri : poster})`
-      }}
+      style={{ backgroundImage: `url(${isNew ? newPreviewUri : poster})` }}
     >
       <div className="flex flex-wrap backdrop-blur-2xl backdrop-brightness-50 md:flex-nowrap md:space-x-2">
         <CoverImage
diff --git a/apps/web/src/components/Shared/Auth/Login.tsx b/apps/web/src/components/Shared/Auth/Login.tsx
index 85d76b2f7815..1f824f926dcf 100644
--- a/apps/web/src/components/Shared/Auth/Login.tsx
+++ b/apps/web/src/components/Shared/Auth/Login.tsx
@@ -128,14 +128,9 @@ const Login: FC = () => {
                   />
                   <Button
                     disabled={isLoading && loggingInProfileId === profile.id}
-                    icon={
-                      isLoading && loggingInProfileId === profile.id ? (
-                        <Spinner size="xs" />
-                      ) : (
-                        <ArrowRightCircleIcon className="size-4" />
-                      )
-                    }
                     onClick={() => handleSign(profile.id)}
+                    outline
+                    rounded
                   >
                     Login
                   </Button>
diff --git a/apps/web/src/components/Shared/CollectWarning.tsx b/apps/web/src/components/Shared/CollectWarning.tsx
index 2dad00a03c87..1b9ff1b057f4 100644
--- a/apps/web/src/components/Shared/CollectWarning.tsx
+++ b/apps/web/src/components/Shared/CollectWarning.tsx
@@ -32,7 +32,7 @@ const CollectWarning: FC<CollectWarningProps> = ({
         </>
       ) : (
         <>
-          <UsersIcon className="text-brand-500 size-4" />
+          <UsersIcon className="size-4" />
           <span>Only </span>
           <Slug slug={`${handle}'s`} />
           <span> followers can collect</span>
diff --git a/apps/web/src/components/Shared/EmojiPicker/index.tsx b/apps/web/src/components/Shared/EmojiPicker/index.tsx
index e1b644095f76..45319e496ad7 100644
--- a/apps/web/src/components/Shared/EmojiPicker/index.tsx
+++ b/apps/web/src/components/Shared/EmojiPicker/index.tsx
@@ -3,7 +3,6 @@ import type { Dispatch, FC, MutableRefObject, SetStateAction } from 'react';
 import { FaceSmileIcon } from '@heroicons/react/24/outline';
 import stopEventPropagation from '@hey/lib/stopEventPropagation';
 import { Tooltip } from '@hey/ui';
-import cn from '@hey/ui/cn';
 import { useClickAway } from '@uidotdev/usehooks';
 import { motion } from 'framer-motion';
 
@@ -11,7 +10,6 @@ import List from './List';
 
 interface EmojiPickerProps {
   emoji?: null | string;
-  emojiClassName?: string;
   setEmoji: (emoji: string) => void;
   setShowEmojiPicker: Dispatch<SetStateAction<boolean>>;
   showEmojiPicker: boolean;
@@ -19,7 +17,6 @@ interface EmojiPickerProps {
 
 const EmojiPicker: FC<EmojiPickerProps> = ({
   emoji,
-  emojiClassName,
   setEmoji,
   setShowEmojiPicker,
   showEmojiPicker
@@ -31,7 +28,7 @@ const EmojiPicker: FC<EmojiPickerProps> = ({
   return (
     <div className="relative" ref={listRef}>
       <motion.button
-        className="outline-brand-500 rounded-full outline-offset-8"
+        className="rounded-full outline-offset-8 outline-gray-500"
         onClick={(e) => {
           e.preventDefault();
           stopEventPropagation(e);
@@ -43,7 +40,7 @@ const EmojiPicker: FC<EmojiPickerProps> = ({
           <span>{emoji}</span>
         ) : (
           <Tooltip content="Emoji" placement="top">
-            <FaceSmileIcon className={cn('size-5', emojiClassName)} />
+            <FaceSmileIcon className="size-5" />
           </Tooltip>
         )}
       </motion.button>
diff --git a/apps/web/src/components/Shared/FeedFocusType.tsx b/apps/web/src/components/Shared/FeedFocusType.tsx
index b7000b9ca735..4f0a2756193a 100644
--- a/apps/web/src/components/Shared/FeedFocusType.tsx
+++ b/apps/web/src/components/Shared/FeedFocusType.tsx
@@ -22,10 +22,9 @@ const FeedFocusType: FC<FeedFocusTypeProps> = ({ focus, setFocus }) => {
     <button
       aria-label={name}
       className={cn(
-        { '!bg-brand-500 !text-white': focus === type },
-        'text-brand-500 rounded-full px-3 py-1.5 text-xs sm:px-4',
-        'border-brand-300 dark:border-brand-500 border',
-        'bg-brand-100 dark:bg-brand-300/20'
+        focus === type ? 'bg-black text-white' : 'bg-gray-100 dark:bg-gray-800',
+        'rounded-full px-3 py-1.5 text-xs sm:px-4',
+        'border border-gray-300 dark:border-gray-500'
       )}
       onClick={() => {
         setFocus(type as PublicationMetadataMainFocusType);
diff --git a/apps/web/src/components/Shared/GetOpenActionModuleIcon.tsx b/apps/web/src/components/Shared/GetOpenActionModuleIcon.tsx
index 85761ed1c949..87059bb19288 100644
--- a/apps/web/src/components/Shared/GetOpenActionModuleIcon.tsx
+++ b/apps/web/src/components/Shared/GetOpenActionModuleIcon.tsx
@@ -7,24 +7,21 @@ import {
   UserGroupIcon
 } from '@heroicons/react/24/outline';
 import { OpenActionModuleType } from '@hey/lens';
-import cn from '@hey/ui/cn';
 
 interface GetOpenActionModuleIconProps {
-  className?: string;
   module?: OpenActionModule;
 }
 
 const GetOpenActionModuleIcon: FC<GetOpenActionModuleIconProps> = ({
-  className = '',
   module
 }) => {
   switch (module?.type) {
     case OpenActionModuleType.SimpleCollectOpenActionModule:
-      return <DocumentPlusIcon className={cn('size-5', className)} />;
+      return <DocumentPlusIcon className="size-5" />;
     case OpenActionModuleType.MultirecipientFeeCollectOpenActionModule:
-      return <UserGroupIcon className={cn('size-5', className)} />;
+      return <UserGroupIcon className="size-5" />;
     default:
-      return <BriefcaseIcon className={cn('size-5', className)} />;
+      return <BriefcaseIcon className="size-5" />;
   }
 };
 
diff --git a/apps/web/src/components/Shared/GlobalBanners/Flagged.tsx b/apps/web/src/components/Shared/GlobalBanners/Flagged.tsx
index 0e4afadfafcb..01b427bbea80 100644
--- a/apps/web/src/components/Shared/GlobalBanners/Flagged.tsx
+++ b/apps/web/src/components/Shared/GlobalBanners/Flagged.tsx
@@ -14,16 +14,16 @@ const Flagged: FC = () => {
   }
 
   return (
-    <div className="border-b border-red-300 bg-red-500/20">
+    <div className="border-b border-gray-300 bg-gray-500/20">
       <GridLayout>
         <GridItemEight className="space-y-1">
-          <div className="flex items-center space-x-2 text-red-700">
+          <div className="flex items-center space-x-2 text-gray-700">
             <FlagIcon className="size-5" />
             <div className="text-base font-bold sm:text-lg">
               Your profile has been flagged by {APP_NAME}.
             </div>
           </div>
-          <div className="text-sm text-red-500">
+          <div className="text-sm text-gray-500">
             Because of that, your profile may limit your ability to interact
             with {APP_NAME} and other users.{' '}
             <Link className="underline" href="/support">
diff --git a/apps/web/src/components/Shared/GlobalBanners/ProtectProfile.tsx b/apps/web/src/components/Shared/GlobalBanners/ProtectProfile.tsx
index 88bc17343dc8..68cedce32e47 100644
--- a/apps/web/src/components/Shared/GlobalBanners/ProtectProfile.tsx
+++ b/apps/web/src/components/Shared/GlobalBanners/ProtectProfile.tsx
@@ -74,16 +74,16 @@ const ProtectProfile: FC = () => {
   };
 
   return (
-    <div className="border-b border-red-300 bg-red-500/20">
+    <div className="border-b border-gray-300 bg-gray-500/20">
       <GridLayout>
         <GridItemEight className="space-y-1">
-          <div className="flex items-center space-x-2 text-red-700">
+          <div className="flex items-center space-x-2 text-gray-700">
             <LockOpenIcon className="size-5" />
             <div className="text-base font-bold sm:text-lg">
               Attention! Your profile is currently unlocked.
             </div>
           </div>
-          <div className="text-red-500">
+          <div className="text-gray-500">
             {isCoolOffPassed ? (
               <>
                 Your profile protection disabled.
diff --git a/apps/web/src/components/Shared/GlobalBanners/Suspended.tsx b/apps/web/src/components/Shared/GlobalBanners/Suspended.tsx
index a59cd5d33549..4dda424689e3 100644
--- a/apps/web/src/components/Shared/GlobalBanners/Suspended.tsx
+++ b/apps/web/src/components/Shared/GlobalBanners/Suspended.tsx
@@ -14,16 +14,16 @@ const Suspended: FC = () => {
   }
 
   return (
-    <div className="border-b border-red-300 bg-red-500/20">
+    <div className="border-b border-gray-300 bg-gray-500/20">
       <GridLayout>
         <GridItemEight className="space-y-1">
-          <div className="flex items-center space-x-2 text-red-700">
+          <div className="flex items-center space-x-2 text-gray-700">
             <NoSymbolIcon className="size-5" />
             <div className="text-base font-bold sm:text-lg">
               Your profile has been suspended by {APP_NAME}.
             </div>
           </div>
-          <div className="text-sm text-red-500">
+          <div className="text-sm text-gray-500">
             Because of that, your profile may limit your ability to interact
             with {APP_NAME} and other users.{' '}
             <Link className="underline" href="/support">
diff --git a/apps/web/src/components/Shared/GlobalModals.tsx b/apps/web/src/components/Shared/GlobalModals.tsx
index 2b6cab447733..8a64034e6946 100644
--- a/apps/web/src/components/Shared/GlobalModals.tsx
+++ b/apps/web/src/components/Shared/GlobalModals.tsx
@@ -131,7 +131,7 @@ const GlobalModals: FC = () => {
     <>
       <GlobalModalsFromUrl />
       <Modal
-        icon={<ShieldCheckIcon className="text-brand-500 size-5" />}
+        icon={<ShieldCheckIcon className="size-5" />}
         onClose={() =>
           setShowPublicationReportModal(false, reportingPublicationId)
         }
@@ -141,7 +141,7 @@ const GlobalModals: FC = () => {
         <ReportPublication publicationId={reportingPublicationId} />
       </Modal>
       <Modal
-        icon={<ShieldCheckIcon className="text-brand-500 size-5" />}
+        icon={<ShieldCheckIcon className="size-5" />}
         onClose={() => setShowReportProfileModal(false, reportingProfile)}
         show={showReportProfileModal}
         title="Report profile"
@@ -157,7 +157,7 @@ const GlobalModals: FC = () => {
         <SwitchProfiles />
       </Modal>
       <Modal
-        icon={<ArrowRightCircleIcon className="text-brand-500 size-5" />}
+        icon={<ArrowRightCircleIcon className="size-5" />}
         onClose={() => setShowAuthModal(false, authModalType)}
         show={showAuthModal}
         title={authModalTitle}
@@ -179,7 +179,7 @@ const GlobalModals: FC = () => {
         <NewPublication />
       </Modal>
       <Modal
-        icon={<TicketIcon className="text-brand-500 size-5" />}
+        icon={<TicketIcon className="size-5" />}
         onClose={() => setShowInvitesModal(false)}
         show={showInvitesModal}
         title="Invites"
diff --git a/apps/web/src/components/Shared/Lexical/Plugins/ToolbarPlugin.tsx b/apps/web/src/components/Shared/Lexical/Plugins/ToolbarPlugin.tsx
deleted file mode 100644
index 1ae75e097fd1..000000000000
--- a/apps/web/src/components/Shared/Lexical/Plugins/ToolbarPlugin.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import type { FC } from 'react';
-
-import cn from '@hey/ui/cn';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import {
-  $getSelection,
-  $isRangeSelection,
-  COMMAND_PRIORITY_CRITICAL,
-  FORMAT_TEXT_COMMAND,
-  SELECTION_CHANGE_COMMAND
-} from 'lexical';
-import { useCallback, useEffect, useState } from 'react';
-
-const ToolbarPlugin: FC = () => {
-  const [editor] = useLexicalComposerContext();
-  const [activeEditor, setActiveEditor] = useState(editor);
-  const [isBold, setIsBold] = useState(false);
-  const [isItalic, setIsItalic] = useState(false);
-  const [isCode, setIsCode] = useState(false);
-
-  const updateToolbar = useCallback(() => {
-    const selection = $getSelection();
-    if ($isRangeSelection(selection)) {
-      setIsBold(selection.hasFormat('bold'));
-      setIsItalic(selection.hasFormat('italic'));
-      setIsCode(selection.hasFormat('code'));
-    }
-  }, []);
-
-  useEffect(() => {
-    return editor.registerCommand(
-      SELECTION_CHANGE_COMMAND,
-      (_payload, newEditor) => {
-        updateToolbar();
-        setActiveEditor(newEditor);
-        return false;
-      },
-      COMMAND_PRIORITY_CRITICAL
-    );
-  }, [editor, updateToolbar]);
-
-  return (
-    <div className="toolbar-icons divider flex items-center space-x-1 px-5 py-2">
-      <button
-        className={cn(isBold && 'bg-brand-100', 'outline-brand-500')}
-        onClick={() => {
-          activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
-        }}
-        title="Bold"
-        type="button"
-      >
-        <i className="toolbar-icon bold text-brand-500" />
-      </button>
-      <button
-        className={cn(isItalic && 'bg-brand-100', 'outline-brand-500')}
-        onClick={() => {
-          activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
-        }}
-        title="Italic"
-        type="button"
-      >
-        <i className="toolbar-icon italic" />
-      </button>
-      <button
-        className={cn(isCode && 'bg-brand-100', 'outline-brand-500')}
-        onClick={() => {
-          activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
-        }}
-        title="Code"
-        type="button"
-      >
-        <i className="toolbar-icon code" />
-      </button>
-    </div>
-  );
-};
-
-export default ToolbarPlugin;
diff --git a/apps/web/src/components/Shared/Modal/Collectors.tsx b/apps/web/src/components/Shared/Modal/Collectors.tsx
index 9ac7a03f3b46..1a98fa8b3697 100644
--- a/apps/web/src/components/Shared/Modal/Collectors.tsx
+++ b/apps/web/src/components/Shared/Modal/Collectors.tsx
@@ -50,7 +50,7 @@ const Collectors: FC<CollectorsProps> = ({ publicationId }) => {
       <div className="p-5">
         <EmptyState
           hideCard
-          icon={<RectangleStackIcon className="text-brand-500 size-8" />}
+          icon={<RectangleStackIcon className="size-8" />}
           message="No collectors."
         />
       </div>
diff --git a/apps/web/src/components/Shared/Modal/Invites/Invited.tsx b/apps/web/src/components/Shared/Modal/Invites/Invited.tsx
index 5b7a72f75a78..3da1926faf90 100644
--- a/apps/web/src/components/Shared/Modal/Invites/Invited.tsx
+++ b/apps/web/src/components/Shared/Modal/Invites/Invited.tsx
@@ -16,7 +16,7 @@ const Invited: FC<InvitedProps> = ({ invitedProfiles }) => {
     return (
       <EmptyState
         hideCard
-        icon={<TicketIcon className="text-brand-500 size-8" />}
+        icon={<TicketIcon className="size-8" />}
         message={<div>You haven't invited anyone.</div>}
       />
     );
diff --git a/apps/web/src/components/Shared/Modal/Invites/Profile.tsx b/apps/web/src/components/Shared/Modal/Invites/Profile.tsx
index 5f235e26e406..24f54742e3a8 100644
--- a/apps/web/src/components/Shared/Modal/Invites/Profile.tsx
+++ b/apps/web/src/components/Shared/Modal/Invites/Profile.tsx
@@ -15,7 +15,7 @@ interface ProfileProps {
 const Profile: FC<ProfileProps> = ({ invite }) => {
   return (
     <div className="ld-text-gray-500 flex items-center space-x-2 rounded-xl border px-3 py-2.5 text-sm">
-      <CheckCircleIcon className="text-brand-500 size-5" />
+      <CheckCircleIcon className="size-5" />
       <span>
         <b>
           {invite.profileMinted ? (
diff --git a/apps/web/src/components/Shared/Modal/Likes.tsx b/apps/web/src/components/Shared/Modal/Likes.tsx
index f88761d824f6..b279e6537e43 100644
--- a/apps/web/src/components/Shared/Modal/Likes.tsx
+++ b/apps/web/src/components/Shared/Modal/Likes.tsx
@@ -54,7 +54,7 @@ const Likes: FC<LikesProps> = ({ publicationId }) => {
       <div className="p-5">
         <EmptyState
           hideCard
-          icon={<HeartIcon className="text-brand-500 size-8" />}
+          icon={<HeartIcon className="size-8" />}
           message="No likes."
         />
       </div>
diff --git a/apps/web/src/components/Shared/Modal/Mirrors.tsx b/apps/web/src/components/Shared/Modal/Mirrors.tsx
index 2362ff22c9e0..14702e7b1c0d 100644
--- a/apps/web/src/components/Shared/Modal/Mirrors.tsx
+++ b/apps/web/src/components/Shared/Modal/Mirrors.tsx
@@ -50,7 +50,7 @@ const Mirrors: FC<MirrorsProps> = ({ publicationId }) => {
       <div className="p-5">
         <EmptyState
           hideCard
-          icon={<ArrowsRightLeftIcon className="text-brand-500 size-8" />}
+          icon={<ArrowsRightLeftIcon className="size-8" />}
           message="No mirrors."
         />
       </div>
diff --git a/apps/web/src/components/Shared/Modal/Quotes.tsx b/apps/web/src/components/Shared/Modal/Quotes.tsx
index d62b6c4fd3f9..067e94cd408b 100644
--- a/apps/web/src/components/Shared/Modal/Quotes.tsx
+++ b/apps/web/src/components/Shared/Modal/Quotes.tsx
@@ -50,7 +50,7 @@ const Quotes: FC<QuotesProps> = ({ publicationId }) => {
       <div className="p-5">
         <EmptyState
           hideCard
-          icon={<ArrowsRightLeftIcon className="text-brand-500 size-8" />}
+          icon={<ArrowsRightLeftIcon className="size-8" />}
           message="No quotes."
         />
       </div>
diff --git a/apps/web/src/components/Shared/Modal/ReportProfile/index.tsx b/apps/web/src/components/Shared/Modal/ReportProfile/index.tsx
index bcbb8541185d..8a6b5bf2652f 100644
--- a/apps/web/src/components/Shared/Modal/ReportProfile/index.tsx
+++ b/apps/web/src/components/Shared/Modal/ReportProfile/index.tsx
@@ -82,7 +82,7 @@ const ReportProfile: FC<ReportProfileProps> = ({ profile }) => {
       {submitData?.reportProfile === null ? (
         <EmptyState
           hideCard
-          icon={<CheckCircleIcon className="size-14 text-green-500" />}
+          icon={<CheckCircleIcon className="size-14" />}
           message="Profile reported successfully!"
         />
       ) : profile ? (
diff --git a/apps/web/src/components/Shared/Modal/ReportPublication/index.tsx b/apps/web/src/components/Shared/Modal/ReportPublication/index.tsx
index 9be5675f3107..091a3061267e 100644
--- a/apps/web/src/components/Shared/Modal/ReportPublication/index.tsx
+++ b/apps/web/src/components/Shared/Modal/ReportPublication/index.tsx
@@ -96,7 +96,7 @@ const ReportPublication: FC<ReportProps> = ({ publicationId }) => {
       {submitData?.reportPublication === null ? (
         <EmptyState
           hideCard
-          icon={<CheckCircleIcon className="size-14 text-green-500" />}
+          icon={<CheckCircleIcon className="size-14" />}
           message="Publication reported successfully!"
         />
       ) : publicationId ? (
diff --git a/apps/web/src/components/Shared/Navbar/BottomNavigation.tsx b/apps/web/src/components/Shared/Navbar/BottomNavigation.tsx
index 8dc88209a2f9..020cfe11c3d0 100644
--- a/apps/web/src/components/Shared/Navbar/BottomNavigation.tsx
+++ b/apps/web/src/components/Shared/Navbar/BottomNavigation.tsx
@@ -32,21 +32,21 @@ const BottomNavigation = () => {
       >
         <Link className="mx-auto my-3" href="/">
           {isActivePath('/') ? (
-            <HomeIconSolid className="text-brand-500 size-6" />
+            <HomeIconSolid className="size-6" />
           ) : (
             <HomeIcon className="size-6" />
           )}
         </Link>
         <Link className="mx-auto my-3" href="/explore">
           {isActivePath('/explore') ? (
-            <Squares2X2IconSolid className="text-brand-500 size-6" />
+            <Squares2X2IconSolid className="size-6" />
           ) : (
             <Squares2X2Icon className="size-6" />
           )}
         </Link>
         <Link className="mx-auto my-3" href="/notifications">
           {isActivePath('/notifications') ? (
-            <BellIconSolid className="text-brand-500 size-6" />
+            <BellIconSolid className="size-6" />
           ) : (
             <BellIcon className="size-6" />
           )}
diff --git a/apps/web/src/components/Shared/Navbar/SignupButton.tsx b/apps/web/src/components/Shared/Navbar/SignupButton.tsx
index 36fb63157840..45406802466b 100644
--- a/apps/web/src/components/Shared/Navbar/SignupButton.tsx
+++ b/apps/web/src/components/Shared/Navbar/SignupButton.tsx
@@ -22,7 +22,6 @@ const SignupButton: FC = () => {
       }}
       outline
       size="md"
-      variant="black"
     >
       Signup
     </Button>
diff --git a/apps/web/src/components/Shared/Profile/Follow.tsx b/apps/web/src/components/Shared/Profile/Follow.tsx
index 092b9a5769c4..ae45ade9b50c 100644
--- a/apps/web/src/components/Shared/Profile/Follow.tsx
+++ b/apps/web/src/components/Shared/Profile/Follow.tsx
@@ -1,7 +1,6 @@
 import type { FollowRequest, Profile } from '@hey/lens';
 import type { FC } from 'react';
 
-import { UserPlusIcon } from '@heroicons/react/24/outline';
 import { LensHub } from '@hey/abis';
 import { Errors } from '@hey/data';
 import { LENSHUB_PROXY } from '@hey/data/constants';
@@ -14,7 +13,7 @@ import {
 import { useApolloClient } from '@hey/lens/apollo';
 import checkDispatcherPermissions from '@hey/lib/checkDispatcherPermissions';
 import getSignature from '@hey/lib/getSignature';
-import { Button, Spinner } from '@hey/ui';
+import { Button } from '@hey/ui';
 import errorToast from '@lib/errorToast';
 import { Leafwatch } from '@lib/leafwatch';
 import { useRouter } from 'next/router';
@@ -29,10 +28,10 @@ import { useSignTypedData, useWriteContract } from 'wagmi';
 
 interface FollowProps {
   profile: Profile;
-  showText?: boolean;
+  small?: boolean;
 }
 
-const Follow: FC<FollowProps> = ({ profile, showText = false }) => {
+const Follow: FC<FollowProps> = ({ profile, small = false }) => {
   const { pathname } = useRouter();
   const currentProfile = useProfileStore((state) => state.currentProfile);
   const { isSuspended } = useProfileRestriction();
@@ -182,15 +181,13 @@ const Follow: FC<FollowProps> = ({ profile, showText = false }) => {
   return (
     <Button
       aria-label="Follow"
-      className="!px-3 !py-1.5 text-sm"
       disabled={isLoading}
-      icon={
-        isLoading ? <Spinner size="xs" /> : <UserPlusIcon className="size-4" />
-      }
       onClick={createFollow}
       outline
+      rounded={small}
+      size={small ? 'sm' : 'md'}
     >
-      {showText ? 'Follow' : null}
+      Follow
     </Button>
   );
 };
diff --git a/apps/web/src/components/Shared/Profile/P2PRecommendation.tsx b/apps/web/src/components/Shared/Profile/P2PRecommendation.tsx
index 2ada0d5ed0f8..9baa9a4aa2db 100644
--- a/apps/web/src/components/Shared/Profile/P2PRecommendation.tsx
+++ b/apps/web/src/components/Shared/Profile/P2PRecommendation.tsx
@@ -121,7 +121,6 @@ const P2PRecommendation: FC<P2PRecommendationProps> = ({
       }}
       outline={!hasRecommended}
       size="sm"
-      variant={hasRecommended ? 'black' : 'primary'}
     >
       {hasRecommended ? unrecommendTitle : recommendTitle}
     </Button>
diff --git a/apps/web/src/components/Shared/Profile/Unfollow.tsx b/apps/web/src/components/Shared/Profile/Unfollow.tsx
index a0feebafbfbe..14d251eae165 100644
--- a/apps/web/src/components/Shared/Profile/Unfollow.tsx
+++ b/apps/web/src/components/Shared/Profile/Unfollow.tsx
@@ -1,7 +1,6 @@
 import type { Profile, UnfollowRequest } from '@hey/lens';
 import type { FC } from 'react';
 
-import { UserMinusIcon } from '@heroicons/react/24/outline';
 import { LensHub } from '@hey/abis';
 import { Errors } from '@hey/data';
 import { LENSHUB_PROXY } from '@hey/data/constants';
@@ -14,7 +13,7 @@ import {
 import { useApolloClient } from '@hey/lens/apollo';
 import checkDispatcherPermissions from '@hey/lib/checkDispatcherPermissions';
 import getSignature from '@hey/lib/getSignature';
-import { Button, Spinner } from '@hey/ui';
+import { Button } from '@hey/ui';
 import errorToast from '@lib/errorToast';
 import { Leafwatch } from '@lib/leafwatch';
 import { useRouter } from 'next/router';
@@ -29,10 +28,10 @@ import { useSignTypedData, useWriteContract } from 'wagmi';
 
 interface UnfollowProps {
   profile: Profile;
-  showText?: boolean;
+  small?: boolean;
 }
 
-const Unfollow: FC<UnfollowProps> = ({ profile, showText = false }) => {
+const Unfollow: FC<UnfollowProps> = ({ profile, small = false }) => {
   const { pathname } = useRouter();
   const currentProfile = useProfileStore((state) => state.currentProfile);
   const { isSuspended } = useProfileRestriction();
@@ -170,21 +169,14 @@ const Unfollow: FC<UnfollowProps> = ({ profile, showText = false }) => {
 
   return (
     <Button
-      aria-label="Unfollow"
-      className="!px-3 !py-1.5 text-sm"
+      aria-label="Following"
       disabled={isLoading}
-      icon={
-        isLoading ? (
-          <Spinner size="xs" variant="danger" />
-        ) : (
-          <UserMinusIcon className="size-4" />
-        )
-      }
       onClick={createUnfollow}
       outline
-      variant="danger"
+      rounded={small}
+      size={small ? 'sm' : 'md'}
     >
-      {showText ? 'Following' : null}
+      Following
     </Button>
   );
 };
diff --git a/apps/web/src/components/Shared/Sidebar/SidebarTabs.tsx b/apps/web/src/components/Shared/Sidebar/SidebarTabs.tsx
index 023cb12482e8..f6644e35f99a 100644
--- a/apps/web/src/components/Shared/Sidebar/SidebarTabs.tsx
+++ b/apps/web/src/components/Shared/Sidebar/SidebarTabs.tsx
@@ -13,8 +13,10 @@ interface MenuProps {
 const Menu: FC<MenuProps> = ({ children, current, url }) => (
   <Link
     className={cn(
-      { 'bg-brand-100 dark:bg-brand-300/20 text-brand-500 font-bold': current },
-      'hover:bg-brand-100/80 hover:text-brand-400 dark:hover:bg-brand-300/30',
+      { 'font-bold text-black dark:text-white': current },
+      { 'bg-gray-300 dark:bg-gray-300/20': current },
+      'hover:bg-gray-300 dark:hover:bg-gray-300/30',
+      'hover:text-black hover:dark:text-white',
       'flex items-center space-x-2 rounded-lg px-3 py-2'
     )}
     href={url}
diff --git a/apps/web/src/components/Shared/SuperFollow/index.tsx b/apps/web/src/components/Shared/SuperFollow/index.tsx
index 9cfd45ab5010..aea3bcd084df 100644
--- a/apps/web/src/components/Shared/SuperFollow/index.tsx
+++ b/apps/web/src/components/Shared/SuperFollow/index.tsx
@@ -21,13 +21,13 @@ const FollowModule = dynamic(() => import('./FollowModule'), {
 interface SuperFollowProps {
   again?: boolean;
   profile: Profile;
-  showText?: boolean;
+  small?: boolean;
 }
 
 const SuperFollow: FC<SuperFollowProps> = ({
   again = false,
   profile,
-  showText = false
+  small = false
 }) => {
   const [showFollowModal, setShowFollowModal] = useState(false);
   const currentProfile = useProfileStore((state) => state.currentProfile);
@@ -40,7 +40,6 @@ const SuperFollow: FC<SuperFollowProps> = ({
       <Button
         aria-label="Super follow"
         className="!px-3 !py-1.5 text-sm"
-        icon={<StarIcon className="size-4" />}
         onClick={() => {
           if (!currentProfile) {
             setShowAuthModal(true);
@@ -50,11 +49,13 @@ const SuperFollow: FC<SuperFollowProps> = ({
           Leafwatch.track(PROFILE.OPEN_SUPER_FOLLOW);
         }}
         outline
+        rounded={small}
+        size={small ? 'sm' : 'md'}
       >
-        {showText ? 'Super follow' : null}
+        Super follow
       </Button>
       <Modal
-        icon={<StarIcon className="size-5 text-pink-500" />}
+        icon={<StarIcon className="size-5" />}
         onClose={() => setShowFollowModal(false)}
         show={showFollowModal}
         title={
diff --git a/apps/web/src/components/Shared/ToggleWithHelper.tsx b/apps/web/src/components/Shared/ToggleWithHelper.tsx
index 4e81ed63f2b5..5fd2cbfc0c3d 100644
--- a/apps/web/src/components/Shared/ToggleWithHelper.tsx
+++ b/apps/web/src/components/Shared/ToggleWithHelper.tsx
@@ -22,7 +22,7 @@ const ToggleWithHelper: FC<ToggleWithHelperProps> = ({
   return (
     <div className="flex items-center justify-between">
       <div className="flex items-center space-x-3 space-y-1">
-        {icon ? <span className="text-brand-500">{icon}</span> : null}
+        {icon}
         <div>
           {heading ? <b>{heading}</b> : null}
           <div className="ld-text-gray-500 text-sm">{description}</div>
diff --git a/apps/web/src/components/Shared/UserProfile.tsx b/apps/web/src/components/Shared/UserProfile.tsx
index 9cd649cde4f6..5562d4e8089f 100644
--- a/apps/web/src/components/Shared/UserProfile.tsx
+++ b/apps/web/src/components/Shared/UserProfile.tsx
@@ -150,14 +150,14 @@ const UserProfile: FC<UserProfileProps> = ({
       {showFollow ? (
         profile.operations.isFollowedByMe.value ? null : profile?.followModule
             ?.type === FollowModuleType.FeeFollowModule ? (
-          <SuperFollow profile={profile} />
+          <SuperFollow profile={profile} small />
         ) : (
-          <Follow profile={profile} />
+          <Follow profile={profile} small />
         )
       ) : null}
       {showUnfollow ? (
         profile.operations.isFollowedByMe.value ? (
-          <Unfollow profile={profile} />
+          <Unfollow profile={profile} small />
         ) : null
       ) : null}
     </div>
diff --git a/apps/web/src/components/Staff/FeatureFlags/List.tsx b/apps/web/src/components/Staff/FeatureFlags/List.tsx
index 6043077b1c5a..bb66c5ed9d51 100644
--- a/apps/web/src/components/Staff/FeatureFlags/List.tsx
+++ b/apps/web/src/components/Staff/FeatureFlags/List.tsx
@@ -104,9 +104,7 @@ const List: FC = () => {
         ) : !features.length ? (
           <EmptyState
             hideCard
-            icon={
-              <AdjustmentsHorizontalIcon className="text-brand-500 size-8" />
-            }
+            icon={<AdjustmentsHorizontalIcon className="size-8" />}
             message={<span>No feature flags found</span>}
           />
         ) : (
diff --git a/apps/web/src/components/Staff/Overview/EventsToday.tsx b/apps/web/src/components/Staff/Overview/EventsToday.tsx
index b75342a23f80..e02c3562a795 100644
--- a/apps/web/src/components/Staff/Overview/EventsToday.tsx
+++ b/apps/web/src/components/Staff/Overview/EventsToday.tsx
@@ -1,6 +1,5 @@
 import type { FC } from 'react';
 
-import { BRAND_COLOR } from '@hey/data/constants';
 import formatDate from '@hey/lib/datetime/formatDate';
 import {
   CategoryScale,
@@ -13,7 +12,9 @@ import {
   Title,
   Tooltip
 } from 'chart.js';
+import { useTheme } from 'next-themes';
 import { Line } from 'react-chartjs-2';
+import colors from 'tailwindcss/colors';
 
 import type { StatsType } from './LeafwatchStats';
 
@@ -33,6 +34,8 @@ interface EventsTodayProps {
 }
 
 const EventsToday: FC<EventsTodayProps> = ({ eventsToday }) => {
+  const { resolvedTheme } = useTheme();
+
   return (
     <>
       <div className="divider" />
@@ -43,8 +46,12 @@ const EventsToday: FC<EventsTodayProps> = ({ eventsToday }) => {
           data={{
             datasets: [
               {
-                backgroundColor: '#fff0f2',
-                borderColor: BRAND_COLOR,
+                backgroundColor:
+                  resolvedTheme === 'dark'
+                    ? colors['zinc']['900']
+                    : colors['zinc']['200'],
+                borderColor:
+                  resolvedTheme === 'dark' ? colors['white'] : colors['black'],
                 data: eventsToday.map((event) => event.count),
                 fill: true,
                 label: 'Events'
diff --git a/apps/web/src/components/Staff/Overview/ImpressionsToday.tsx b/apps/web/src/components/Staff/Overview/ImpressionsToday.tsx
index 3ac944fc87ae..2776c79c51b5 100644
--- a/apps/web/src/components/Staff/Overview/ImpressionsToday.tsx
+++ b/apps/web/src/components/Staff/Overview/ImpressionsToday.tsx
@@ -1,6 +1,5 @@
 import type { FC } from 'react';
 
-import { BRAND_COLOR } from '@hey/data/constants';
 import formatDate from '@hey/lib/datetime/formatDate';
 import {
   CategoryScale,
@@ -13,7 +12,9 @@ import {
   Title,
   Tooltip
 } from 'chart.js';
+import { useTheme } from 'next-themes';
 import { Line } from 'react-chartjs-2';
+import colors from 'tailwindcss/colors';
 
 import type { StatsType } from './LeafwatchStats';
 
@@ -33,6 +34,8 @@ interface ImpressionsTodayProps {
 }
 
 const ImpressionsToday: FC<ImpressionsTodayProps> = ({ impressionsToday }) => {
+  const { resolvedTheme } = useTheme();
+
   return (
     <>
       <div className="divider" />
@@ -43,8 +46,12 @@ const ImpressionsToday: FC<ImpressionsTodayProps> = ({ impressionsToday }) => {
           data={{
             datasets: [
               {
-                backgroundColor: '#fff0f2',
-                borderColor: BRAND_COLOR,
+                backgroundColor:
+                  resolvedTheme === 'dark'
+                    ? colors['zinc']['900']
+                    : colors['zinc']['200'],
+                borderColor:
+                  resolvedTheme === 'dark' ? colors['white'] : colors['black'],
                 data: impressionsToday.map((impression) => impression.count),
                 fill: true,
                 label: 'Impressions'
diff --git a/apps/web/src/components/Staff/Overview/Links.tsx b/apps/web/src/components/Staff/Overview/Links.tsx
index f211c898ad81..ea6c30269204 100644
--- a/apps/web/src/components/Staff/Overview/Links.tsx
+++ b/apps/web/src/components/Staff/Overview/Links.tsx
@@ -20,7 +20,7 @@ const Links: FC = () => {
     <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-2 md:gap-y-8">
       <div>
         <p className="mb-3 font-bold">Monitoring 📈</p>
-        <ul className="linkify mb-4 mt-0 list-disc space-y-1 pl-5">
+        <ul className="mb-4 mt-0 list-disc space-y-1 pl-5">
           <ListItem
             link="https://hey.metabaseapp.com/public/dashboard/3ee79f5b-07d7-43d7-9237-58c6442a1ad8#refresh=2"
             title="Leafwatch Overview"
@@ -37,7 +37,7 @@ const Links: FC = () => {
       </div>
       <div>
         <p className="mb-4 font-bold">Other helpful links 🌱</p>
-        <ul className="linkify mb-3 mt-0 list-disc space-y-1 pl-5">
+        <ul className="mb-3 mt-0 list-disc space-y-1 pl-5">
           <ListItem
             link="https://app.lemonsqueezy.com/dashboard"
             title="Lemon Squeezy"
@@ -58,7 +58,7 @@ const Links: FC = () => {
       </div>
       <div>
         <p className="mb-4 font-bold">Forms 📜</p>
-        <ul className="linkify mb-3 mt-0 list-disc space-y-1 pl-5">
+        <ul className="mb-3 mt-0 list-disc space-y-1 pl-5">
           <ListItem
             link="https://hey.xyz/-/token-request"
             title="Token Allowlist Request"
diff --git a/apps/web/src/components/Staff/SignupContract/index.tsx b/apps/web/src/components/Staff/SignupContract/index.tsx
index c4b06a97d246..9b97c86708fa 100644
--- a/apps/web/src/components/Staff/SignupContract/index.tsx
+++ b/apps/web/src/components/Staff/SignupContract/index.tsx
@@ -63,7 +63,7 @@ const SignupContract: NextPage = () => {
               href={`${POLYGONSCAN_URL}/address/${HEY_LENS_SIGNUP}`}
               target="_blank"
             >
-              <ArrowTopRightOnSquareIcon className="text-brand-500 size-4" />
+              <ArrowTopRightOnSquareIcon className="size-4" />
             </Link>
           </div>
           <div className="divider" />
diff --git a/apps/web/src/components/Staff/Tokens/List.tsx b/apps/web/src/components/Staff/Tokens/List.tsx
index 81b049dda3a9..92aefdd5bda0 100644
--- a/apps/web/src/components/Staff/Tokens/List.tsx
+++ b/apps/web/src/components/Staff/Tokens/List.tsx
@@ -61,7 +61,7 @@ const List: FC = () => {
         ) : !tokens.length ? (
           <EmptyState
             hideCard
-            icon={<CurrencyDollarIcon className="text-brand-500 size-8" />}
+            icon={<CurrencyDollarIcon className="size-8" />}
             message={<span>No tokens found</span>}
           />
         ) : (
diff --git a/apps/web/src/components/Staff/Users/List.tsx b/apps/web/src/components/Staff/Users/List.tsx
index 75fff0bc8222..4c92e4cbb98a 100644
--- a/apps/web/src/components/Staff/Users/List.tsx
+++ b/apps/web/src/components/Staff/Users/List.tsx
@@ -106,7 +106,7 @@ const List: FC = () => {
         ) : !profiles?.length ? (
           <EmptyState
             hideCard
-            icon={<UsersIcon className="text-brand-500 size-8" />}
+            icon={<UsersIcon className="size-8" />}
             message={<span>No profiles</span>}
           />
         ) : (
diff --git a/apps/web/src/components/Staff/Users/Overview/index.tsx b/apps/web/src/components/Staff/Users/Overview/index.tsx
index 76f157fa5b7c..56da622a05e6 100644
--- a/apps/web/src/components/Staff/Users/Overview/index.tsx
+++ b/apps/web/src/components/Staff/Users/Overview/index.tsx
@@ -63,7 +63,7 @@ const Overview: NextPage = () => {
           ) : !profile ? (
             <EmptyState
               hideCard
-              icon={<UserIcon className="size-8 text-yellow-600" />}
+              icon={<UserIcon className="size-8" />}
               message="No profile found"
             />
           ) : error ? (
diff --git a/apps/web/src/components/Staff/Users/ProfileFeed.tsx b/apps/web/src/components/Staff/Users/ProfileFeed.tsx
index a697f3fa51c8..3b1970ebe283 100644
--- a/apps/web/src/components/Staff/Users/ProfileFeed.tsx
+++ b/apps/web/src/components/Staff/Users/ProfileFeed.tsx
@@ -56,7 +56,7 @@ const ProfileFeed: FC<ProfileFeedProps> = ({ profileId }) => {
     return (
       <EmptyState
         hideCard
-        icon={<RectangleStackIcon className="text-brand-500 size-8" />}
+        icon={<RectangleStackIcon className="size-8" />}
         message="No posts yet!"
       />
     );
diff --git a/apps/web/src/components/Support/index.tsx b/apps/web/src/components/Support/index.tsx
index b01e09c31b13..fa3c6361016e 100644
--- a/apps/web/src/components/Support/index.tsx
+++ b/apps/web/src/components/Support/index.tsx
@@ -90,7 +90,7 @@ const Support: NextPage = () => {
           {submitted ? (
             <EmptyState
               hideCard
-              icon={<CheckCircleIcon className="size-14 text-green-500" />}
+              icon={<CheckCircleIcon className="size-14" />}
               message="We have received your message and will get back to you as soon as possible."
             />
           ) : (
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index c7d07ec2a735..922814b9d8e3 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -19,21 +19,6 @@ body {
   @apply dark:bg-gray-600;
 }
 
-progress::-webkit-progress-bar {
-  background-color: transparent;
-}
-
-progress::-webkit-progress-value {
-  @apply bg-brand-500;
-  transition: width 0.5s ease;
-}
-
-progress::-moz-progress-bar {
-  @apply rounded-bl;
-  @apply bg-brand-500;
-  transition: width 0.5s ease;
-}
-
 .menu-item {
   @apply m-2 block cursor-pointer rounded-lg px-2 py-1.5 text-sm text-gray-700 dark:text-gray-200;
 }
@@ -103,10 +88,6 @@ iframe {
   @apply !text-white;
 }
 
-.toolbar-icons button {
-  @apply hover:bg-brand-100 text-brand-500 rounded-lg p-1.5;
-}
-
 .toolbar-icon {
   @apply flex h-[20px] w-[20px] bg-contain bg-center bg-no-repeat;
 }
diff --git a/packages/ui/src/Badge.tsx b/packages/ui/src/Badge.tsx
index 42098ec55c02..3e89d23ec399 100644
--- a/packages/ui/src/Badge.tsx
+++ b/packages/ui/src/Badge.tsx
@@ -9,7 +9,7 @@ interface BadgeProps
   children?: ReactNode;
   className?: string;
   size?: 'lg' | 'md' | 'sm';
-  variant?: 'black' | 'danger' | 'primary' | 'secondary' | 'warning';
+  variant?: 'brand' | 'danger' | 'primary' | 'secondary' | 'warning';
 }
 
 export const Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(
@@ -17,8 +17,8 @@ export const Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(
   ref
 ) {
   const variantStyles = {
-    'border-black bg-black': variant === 'black',
-    'border-brand-600 bg-brand-500': variant === 'primary',
+    'border-black bg-black': variant === 'primary',
+    'border-brand-600 bg-brand-500': variant === 'brand',
     'border-gray-600 bg-gray-500': variant === 'secondary',
     'border-red-600 bg-red-500': variant === 'danger',
     'border-yellow-600 bg-yellow-500': variant === 'warning'
diff --git a/packages/ui/src/Button.tsx b/packages/ui/src/Button.tsx
index 5cd7cc9aebb3..a1291391e42b 100644
--- a/packages/ui/src/Button.tsx
+++ b/packages/ui/src/Button.tsx
@@ -13,8 +13,9 @@ interface ButtonProps
   className?: string;
   icon?: ReactNode;
   outline?: boolean;
+  rounded?: boolean;
   size?: 'lg' | 'md' | 'sm';
-  variant?: 'black' | 'danger' | 'primary' | 'secondary' | 'warning';
+  variant?: 'danger' | 'primary' | 'secondary' | 'warning';
 }
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
@@ -24,6 +25,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       className = '',
       icon,
       outline,
+      rounded = false,
       size = 'md',
       variant = 'primary',
       ...rest
@@ -31,18 +33,15 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     ref
   ) {
     const commonStyles = {
-      'border border-black focus:ring-black': variant === 'black',
+      'border border-black focus:ring-black dark:border-white':
+        variant === 'primary',
       'border border-gray-600 focus:ring-gray-400/50': variant === 'secondary',
       'border border-red-600 focus:ring-red-400/50': variant === 'danger',
-      'border border-yellow-600 focus:ring-yellow-400/50':
-        variant === 'warning',
-      'border-brand-600 focus:ring-brand-400/50 border': variant === 'primary'
+      'border border-yellow-600 focus:ring-yellow-400/50': variant === 'warning'
     };
 
     const nonOutlineStyles = {
-      'bg-black text-white hover:bg-gray-900 active:bg-black':
-        !outline && variant === 'black',
-      'bg-brand-500 hover:bg-brand-600 active:bg-brand-700 text-white':
+      'bg-black dark:bg-white text-white dark:text-black hover:bg-gray-900 active:bg-black':
         !outline && variant === 'primary',
       'bg-gray-500 text-white hover:bg-gray-600 active:bg-gray-700':
         !outline && variant === 'secondary',
@@ -53,9 +52,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     };
 
     const outlineStyles = {
-      'text-black hover:bg-gray-50 active:bg-gray-100':
-        outline && variant === 'black',
-      'text-brand-500 hover:bg-brand-50 active:bg-brand-100':
+      'text-black hover:bg-gray-50 active:bg-gray-100 dark:text-white dark:hover:bg-gray-800 dark:active:bg-gray-700':
         outline && variant === 'primary',
       'text-gray-500 hover:bg-gray-50 active:bg-gray-100':
         outline && variant === 'secondary',
@@ -65,10 +62,15 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         outline && variant === 'warning'
     };
 
+    const roundedStyles = {
+      'rounded-full': rounded,
+      'rounded-lg': !rounded
+    };
+
     const sizeStyles = {
       'px-3 py-0.5 text-sm': size === 'sm',
-      'px-3 py-1': size === 'md',
-      'px-4 py-1.5': size === 'lg'
+      'px-4 py-1': size === 'md',
+      'px-5 py-1.5': size === 'lg'
     };
 
     return (
@@ -79,9 +81,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             ...nonOutlineStyles,
             ...outlineStyles,
             ...sizeStyles,
+            ...roundedStyles,
             'inline-flex items-center space-x-1.5': icon && children
           },
-          'rounded-lg font-bold shadow-sm outline-none focus:ring-2 focus:ring-offset-1 disabled:opacity-50',
+          'font-bold shadow-sm outline-none focus:ring-2 focus:ring-offset-1 disabled:opacity-50',
           className
         )}
         ref={ref}
diff --git a/packages/ui/src/Checkbox.tsx b/packages/ui/src/Checkbox.tsx
index fc648b21d6ac..e814b687d75a 100644
--- a/packages/ui/src/Checkbox.tsx
+++ b/packages/ui/src/Checkbox.tsx
@@ -17,7 +17,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       <div className="flex items-center">
         <input
           className={cn(
-            'text-brand-500 focus:ring-brand-500 mr-2 cursor-pointer rounded border-gray-300 transition duration-200',
+            'mr-2 cursor-pointer rounded border-gray-300 text-black transition duration-200 focus:ring-gray-500 dark:text-gray-500',
             className
           )}
           id={id}
@@ -25,10 +25,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           type="checkbox"
           {...props}
         />
-        <label
-          className="inline-block whitespace-nowrap text-sm text-gray-800 dark:text-gray-200"
-          htmlFor={id}
-        >
+        <label className="inline-block whitespace-nowrap text-sm" htmlFor={id}>
           {label}
         </label>
       </div>
diff --git a/packages/ui/src/ErrorMessage.tsx b/packages/ui/src/ErrorMessage.tsx
index b6d4a1f6aed5..fb1d29d00b51 100644
--- a/packages/ui/src/ErrorMessage.tsx
+++ b/packages/ui/src/ErrorMessage.tsx
@@ -23,26 +23,20 @@ export const ErrorMessage: FC<ErrorMessageProps> = ({
   return (
     <div
       className={cn(
-        'space-y-1 rounded-xl border-2 border-red-500/50 bg-red-50 p-4 text-sm dark:bg-red-900/10',
+        'space-y-1 rounded-xl border-2 border-gray-500/50 bg-gray-50 p-4 text-sm dark:bg-gray-900/10',
         className
       )}
     >
       <div className="flex flex-wrap items-center gap-2">
-        {title ? (
-          <h3 className="font-medium text-red-800 dark:text-red-200">
-            {title}
-          </h3>
-        ) : null}
-        <div className="flex items-center space-x-1 text-xs text-red-800">
+        {title ? <h3 className="font-medium">{title}</h3> : null}
+        <div className="flex items-center space-x-1 text-xs">
           <LifebuoyIcon className="size-4" />
           <Link className="font-bold underline" href="/support">
             Contact Support
           </Link>
         </div>
       </div>
-      <div className="break-words text-red-700 dark:text-red-200">
-        {error?.message}
-      </div>
+      <div className="ld-text-gray-500 break-words">{error?.message}</div>
     </div>
   );
 };
diff --git a/packages/ui/src/Input.tsx b/packages/ui/src/Input.tsx
index f274c022f035..93ef2b1029d9 100644
--- a/packages/ui/src/Input.tsx
+++ b/packages/ui/src/Input.tsx
@@ -37,7 +37,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
   const id = useId();
 
   const iconStyles = [
-    'text-zinc-500 [&>*]:peer-focus:text-brand-500 [&>*]:h-5',
+    'text-zinc-500 [&>*]:peer-focus:text-gray-500 [&>*]:h-5',
     { '!text-red-500 [&>*]:peer-focus:!text-red-500': error }
   ];
 
@@ -62,7 +62,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
             { 'bg-gray-500/20 opacity-60': props.disabled },
             error ? '!border-red-500' : 'focus-within:ring-1',
             prefix ? 'rounded-r-xl' : 'rounded-xl',
-            'focus-within:border-brand-500 focus-within:ring-brand-400 flex w-full items-center border border-gray-300 bg-white dark:border-gray-700 dark:bg-gray-900'
+            'flex w-full items-center border border-gray-300 bg-white focus-within:border-gray-500 focus-within:ring-gray-400 dark:border-gray-700 dark:bg-gray-900'
           )}
         >
           <input
diff --git a/packages/ui/src/Radio.tsx b/packages/ui/src/Radio.tsx
index 29bc36f51eac..f1d276c7869d 100644
--- a/packages/ui/src/Radio.tsx
+++ b/packages/ui/src/Radio.tsx
@@ -19,7 +19,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
   return (
     <div className={cn('flex items-center space-x-3', className)}>
       <input
-        className="text-brand-500 dark:text-brand-500 size-4 border focus:ring-0 focus:ring-offset-0"
+        className="size-4 border text-black focus:ring-0 focus:ring-offset-0"
         id={id}
         ref={ref}
         type="radio"
diff --git a/packages/ui/src/Select.tsx b/packages/ui/src/Select.tsx
index fee6f3b20a60..48d6a3257d46 100644
--- a/packages/ui/src/Select.tsx
+++ b/packages/ui/src/Select.tsx
@@ -24,7 +24,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
         {label ? <div className="label">{label}</div> : null}
         <select
           className={cn(
-            'focus:border-brand-500 focus:ring-brand-400 w-full rounded-xl border border-gray-300 bg-white outline-none dark:border-gray-700 dark:bg-gray-800',
+            'w-full rounded-xl border border-gray-300 bg-white outline-none focus:border-gray-500 focus:ring-gray-400 dark:border-gray-700 dark:bg-gray-800',
             className
           )}
           id={id}
diff --git a/packages/ui/src/Spinner.tsx b/packages/ui/src/Spinner.tsx
index f5088df2130e..f63dbb6aee8d 100644
--- a/packages/ui/src/Spinner.tsx
+++ b/packages/ui/src/Spinner.tsx
@@ -5,7 +5,7 @@ import cn from '../cn';
 interface SpinnerProps {
   className?: string;
   size?: 'lg' | 'md' | 'sm' | 'xs';
-  variant?: 'danger' | 'primary' | 'secondary' | 'success' | 'warning';
+  variant?: 'danger' | 'primary' | 'success' | 'warning';
 }
 
 export const Spinner: FC<SpinnerProps> = ({
@@ -17,8 +17,7 @@ export const Spinner: FC<SpinnerProps> = ({
     <div
       className={cn(
         {
-          'border-brand-200 border-t-brand-600': variant === 'primary',
-          'border-gray-200 border-t-gray-600': variant === 'secondary',
+          'border-gray-200 border-t-gray-600': variant === 'primary',
           'border-green-200 border-t-green-600': variant === 'success',
           'border-red-200 border-t-red-600': variant === 'danger',
           'border-yellow-200 border-t-yellow-600': variant === 'warning',
diff --git a/packages/ui/src/TabButton.tsx b/packages/ui/src/TabButton.tsx
index add8207195cf..b071c6278127 100644
--- a/packages/ui/src/TabButton.tsx
+++ b/packages/ui/src/TabButton.tsx
@@ -31,12 +31,12 @@ const TabButton: FC<TabButtonProps> = ({
     <button
       aria-label={name}
       className={cn(
-        {
-          '!text-brand-500 dark:!text-brand-400/80 bg-brand-100 dark:bg-brand-300/20':
-            active
-        },
-        'flex items-center space-x-2 rounded-lg px-4 py-2 text-sm font-medium text-gray-500 sm:px-3 sm:py-1.5',
-        'hover:bg-brand-100/80 hover:text-brand-400 dark:hover:bg-brand-300/30 outline-brand-500 justify-center',
+        { 'text-black dark:text-white': active },
+        { 'bg-gray-300 dark:bg-gray-300/20': active },
+        'hover:bg-gray-300 dark:hover:bg-gray-300/30',
+        'hover:text-black hover:dark:text-white',
+        'outline-gray-500',
+        'flex items-center justify-center space-x-2 rounded-lg px-4 py-2 text-sm sm:px-3 sm:py-1.5',
         className
       )}
       onClick={() => {
@@ -55,7 +55,7 @@ const TabButton: FC<TabButtonProps> = ({
         <span
           className={cn(
             active
-              ? 'bg-brand-500 dark:bg-brand-500/80 text-white dark:text-white'
+              ? 'bg-gray-500 text-white dark:bg-gray-500/80 dark:text-white'
               : 'bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400',
             'ml-2 rounded-2xl px-2 py-0.5 text-xs font-bold'
           )}
diff --git a/packages/ui/src/Toggle.tsx b/packages/ui/src/Toggle.tsx
index 3ba2ba405f25..9962b19086cf 100644
--- a/packages/ui/src/Toggle.tsx
+++ b/packages/ui/src/Toggle.tsx
@@ -15,9 +15,9 @@ export const Toggle: FC<ToggleProps> = ({ disabled = false, on, setOn }) => {
     <Switch.Root
       checked={on}
       className={cn(
-        on ? 'bg-brand-500' : 'bg-gray-200 dark:bg-gray-700',
+        on ? 'bg-black dark:bg-white' : 'bg-gray-200 dark:bg-gray-500',
         disabled && 'cursor-not-allowed opacity-50',
-        'outline-brand-500 inline-flex h-[22px] w-[42.5px] min-w-[42.5px] rounded-full border-2 border-transparent outline-offset-4 transition-colors duration-200 ease-in-out'
+        'inline-flex h-[22px] w-[42.5px] min-w-[42.5px] rounded-full border-2 border-transparent outline-offset-4 outline-gray-500 transition-colors duration-200 ease-in-out'
       )}
       disabled={disabled}
       onCheckedChange={() => setOn(!on)}
@@ -25,7 +25,7 @@ export const Toggle: FC<ToggleProps> = ({ disabled = false, on, setOn }) => {
       <span
         className={cn(
           on ? 'translate-x-5' : 'translate-x-0',
-          'pointer-events-none inline-block size-[18px] rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out'
+          'pointer-events-none inline-block size-[18px] rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out dark:bg-black'
         )}
       />
     </Switch.Root>