diff --git a/app/globals.css b/app/globals.css
index fc36d43..4841524 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -53,7 +53,7 @@
     --card-foreground: 210 40% 98%; /* gray-50 */
     --popover: 222.2 84% 4.9%; /* slate-900 */
     --popover-foreground: 210 40% 98%; /* gray-50 */
-    --primary: 222.2 84% 4.9%; /* slate-900 */
+    --primary: 0 0 100%; /* slate-900 */
     --primary-foreground: 210 40% 98%; /* gray-50 */
     --secondary: 0 0% 0%; /* black */
     --secondary-foreground: 210 40% 98%; /* gray-50 */
diff --git a/components/explore/Sidebar.tsx b/components/explore/Sidebar.tsx
index d0803f4..4ee023f 100644
--- a/components/explore/Sidebar.tsx
+++ b/components/explore/Sidebar.tsx
@@ -359,7 +359,7 @@ export default function Sidebar() {
         </div>
         <motion.button
           variants={itemVariants}
-          className="w-full mt-3 text-xs bg-tag text-background hover:bg-tag/90 rounded-lg py-2.5 text-center font-medium"
+          className="w-full mt-3 text-xs bg-tag text-primary hover:bg-tag/90 rounded-lg py-2.5 text-center font-medium"
           whileHover={{ scale: 1.02, y: -1 }}
           whileTap={{ scale: 0.98 }}
           transition={{ type: "spring", stiffness: 400, damping: 25 }}
@@ -441,7 +441,7 @@ export default function Sidebar() {
         </div>
         <motion.button
           variants={itemVariants}
-          className="w-full mt-3 text-xs bg-tag text-background hover:bg-tag/90 rounded-lg py-1.5 text-center font-medium"
+          className="w-full mt-3 text-xs bg-tag text-primary hover:bg-tag/90 rounded-lg py-1.5 text-center font-medium"
           whileHover={{ scale: 1.02, y: -1 }}
           whileTap={{ scale: 0.98 }}
           transition={{ type: "spring", stiffness: 400, damping: 25 }}
diff --git a/components/explore/home/LiveStreams.tsx b/components/explore/home/LiveStreams.tsx
index e7fe7e3..f02a160 100644
--- a/components/explore/home/LiveStreams.tsx
+++ b/components/explore/home/LiveStreams.tsx
@@ -223,13 +223,13 @@ export function LiveStreams({
                     {stream.title}
                   </h3>
                   <div className="flex flex-wrap gap-2 mt-1">
-                    <span className="text-sm px-2 py-0.5 rounded bg-tag text-background">
+                    <span className="text-sm px-2 py-0.5 rounded bg-tag text-white">
                       {stream.location}
                     </span>
                     {stream.tags.map((tag, index) => (
                       <span
                         key={index}
-                        className="text-sm px-2 py-0.5 rounded bg-tag text-background"
+                        className="text-sm px-2 py-0.5 rounded bg-tag text-white"
                       >
                         {tag}
                       </span>
@@ -252,7 +252,7 @@ export function LiveStreams({
             <Button
               onClick={handleToggle}
               disabled={isTransitioning}
-              className={`flex items-center justify-center gap-2 w-full outline-none border-none focus:ring-0 transition-opacity bg-transparent hover:bg-surface-hover ${
+              className={`flex items-center justify-center text-white gap-2 w-full outline-none border-none focus:ring-0 transition-opacity bg-tag hover:bg-surface-hover ${
                 isTransitioning
                   ? "opacity-70 cursor-not-allowed"
                   : "opacity-100"
diff --git a/components/explore/home/TrendingStreams.tsx b/components/explore/home/TrendingStreams.tsx
index 2e175a6..44464a8 100644
--- a/components/explore/home/TrendingStreams.tsx
+++ b/components/explore/home/TrendingStreams.tsx
@@ -217,13 +217,13 @@ export function TrendingStreams({ title, streams }: TrendingStreamsProps) {
                     {stream.title}
                   </h3>
                   <div className="flex flex-wrap gap-2 mt-1">
-                    <span className="text-xs px-2 py-0.5 rounded bg-tag text-background">
+                    <span className="text-xs px-2 py-0.5 rounded bg-tag text-primary">
                       {stream.location}
                     </span>
                     {stream.tags.map((tag, index) => (
                       <span
                         key={index}
-                        className="text-xs px-2 py-0.5 rounded bg-tag text-background"
+                        className="text-xs px-2 py-0.5 rounded bg-tag text-primary"
                       >
                         {tag}
                       </span>
@@ -246,7 +246,7 @@ export function TrendingStreams({ title, streams }: TrendingStreamsProps) {
             <Button
               onClick={handleToggle}
               disabled={isTransitioning}
-              className={`flex items-center justify-center gap-2 w-full outline-none border-none focus:ring-0 transition-opacity bg-transparent hover:bg-surface-hover ${
+              className={`flex items-center justify-center gap-2 w-full text-white outline-none border-none focus:ring-0 transition-opacity bg-tag hover:bg-surface-hover ${
                 isTransitioning
                   ? "opacity-70 cursor-not-allowed"
                   : "opacity-100"