diff --git a/src/components/ourProjects.tsx b/src/components/ourProjects.tsx
index a06078ee..4ccc41b0 100644
--- a/src/components/ourProjects.tsx
+++ b/src/components/ourProjects.tsx
@@ -6,8 +6,7 @@ import { motion } from "framer-motion";
 import React from "react";
 import { useSafeColorMode } from "../utils/useSafeColorMode";
 // Mobile-specific overrides for very small screens (<768px and <320px)
-import "./ourProjects.mobile.css";
-// Import projects data and types
+import "./ourProjects.mobile.css";// Import projects data and types
 import projectsData from "../data/projects.json";
 import type { ProjectsData, ProjectItem } from "../data/types";
 
@@ -15,7 +14,7 @@ import type { ProjectsData, ProjectItem } from "../data/types";
  * Legacy interface for backward compatibility
  * @deprecated Use ProjectsData from types.ts instead
  */
-export interface OurProjectsData {
+export interface Data {
   tag: string;
   title: string;
   description: string;
@@ -29,12 +28,12 @@ export interface OurProjectsData {
  * Legacy props interface for backward compatibility
  * @deprecated Component now imports data directly
  */
-export interface OurProjectsProps {
-  OurProjectsData?: OurProjectsData;
+export interface Props {
+  Data?: Data;
 }
 
 /**
- * OurProjects Component
+ *  Component
  *
  * Displays a showcase of RecodeHive projects with interactive previews.
  * Now uses data-driven approach with JSON configuration for better maintainability.
@@ -48,8 +47,8 @@ export interface OurProjectsProps {
  *
  * @param props - Optional props for backward compatibility
  */
-const OurProjects: React.FC<OurProjectsProps> = ({
-  OurProjectsData: legacyData,
+const ShowcasePage: React.FC<Props> = ({
+  Data: legacyData,
 }) => {
   const { colorMode, isDark } = useSafeColorMode();
 
@@ -211,7 +210,7 @@ const SelectComponent = ({
       </div>
 
       <div
-        className={`ourprojects-embed-container relative col-span-1 min-h-[50vh] overflow-hidden p-4 md:col-span-8 md:min-h-[70vh] md:p-8`}
+        className={`-embed-container relative col-span-1 min-h-[50vh] overflow-hidden p-4 md:col-span-8 md:min-h-[70vh] md:p-8`}
       >
         {/* Animated Mesh Background */}
         <div className="absolute inset-0 bg-gradient-to-br from-purple-600/30 via-blue-600/30 via-cyan-500/30 to-emerald-500/30">
@@ -288,7 +287,7 @@ const SelectComponent = ({
           className="perspective-1000 relative z-10"
         >
           <div
-            className={`md:hover:rotateY-5 group ourprojects-embed-card h-[45vh] transform overflow-hidden rounded-2xl border-2 shadow-2xl backdrop-blur-md transition-all duration-700 hover:scale-105 sm:h-[50vh] sm:rounded-3xl md:h-[65vh] ${
+            className={`md:hover:rotateY-5 group -embed-card h-[45vh] transform overflow-hidden rounded-2xl border-2 shadow-2xl backdrop-blur-md transition-all duration-700 hover:scale-105 sm:h-[50vh] sm:rounded-3xl md:h-[65vh] ${
               isDark
                 ? "border-purple-500/50 bg-gray-900/95 shadow-purple-500/25"
                 : "border-blue-400/50 bg-white/95 shadow-blue-500/25"
@@ -398,7 +397,7 @@ const SelectComponent = ({
                       src={
                         PROJECT_URLS[items[activeItem].title] || "about:blank"
                       }
-                      className="ourprojects-iframe pointer-events-none h-[220%] w-full origin-top border-0 sm:h-[200%]"
+                      className="-iframe pointer-events-none h-[220%] w-full origin-top border-0 sm:h-[200%]"
                       initial={{ opacity: 0, y: 0 }}
                       animate={{
                         opacity: 1,
@@ -448,7 +447,7 @@ const SelectComponent = ({
 
                 {/* Dynamic Indicator */}
                 <motion.div
-                  className={`ourprojects-live-indicator absolute right-4 bottom-4 flex items-center rounded-full px-3 py-2 text-xs font-medium text-white backdrop-blur-sm ${
+                  className={`-live-indicator absolute right-4 bottom-4 flex items-center rounded-full px-3 py-2 text-xs font-medium text-white backdrop-blur-sm ${
                     items[activeItem].title === "Awesome GitHub Profile" ||
                     items[activeItem].title === "Machine Learning Repository"
                       ? "bg-green-600/90"
@@ -469,7 +468,7 @@ const SelectComponent = ({
                 </motion.div>
 
                 {/* Holographic Overlay */}
-                <div className="ourprojects-overlay pointer-events-none absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent">
+                <div className="-overlay pointer-events-none absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent">
                   <div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 via-transparent to-cyan-500/10"></div>
                 </div>
               </motion.div>
@@ -581,4 +580,4 @@ const SelectComponent = ({
   );
 };
 
-export default OurProjects;
+export default ShowcasePage;
diff --git a/src/pages/showcase/_components/ShowcaseCard/styles.module.css b/src/pages/showcase/_components/ShowcaseCard/styles.module.css
index cad43431..d2617af5 100644
--- a/src/pages/showcase/_components/ShowcaseCard/styles.module.css
+++ b/src/pages/showcase/_components/ShowcaseCard/styles.module.css
@@ -105,6 +105,7 @@
 
   position: relative;
   overflow: hidden;
+  isolation: isolate;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   border: var(--card-border);
   border-radius: 8px;
@@ -268,7 +269,6 @@
   );
   opacity: 0.5;
   transition: opacity 0.3s ease;
-  mix-blend-mode: multiply;
 }
 
 .card:hover .showcaseCardImage::after {
diff --git a/src/pages/showcase/_components/ShowcaseTagSelect/styles.module.css b/src/pages/showcase/_components/ShowcaseTagSelect/styles.module.css
index 66557816..208041ce 100644
--- a/src/pages/showcase/_components/ShowcaseTagSelect/styles.module.css
+++ b/src/pages/showcase/_components/ShowcaseTagSelect/styles.module.css
@@ -36,3 +36,16 @@ input:checked + .checkboxLabel:hover {
   opacity: 0.75;
   box-shadow: 0 0 2px 1px var(--ifm-color-primary-dark);
 }
+input[type="checkbox"] + .checkboxLabel {
+  color: var(--ifm-color-content);
+}
+
+[data-theme="dark"] input[type="checkbox"] + .checkboxLabel {
+  color: #ffffff;
+  border-color: #555555;
+}
+
+[data-theme="light"] input[type="checkbox"] + .checkboxLabel {
+  color: #000000;
+  border-color: var(--ifm-color-secondary-darkest);
+}
\ No newline at end of file
diff --git a/src/pages/showcase/index.tsx b/src/pages/showcase/index.tsx
index f2949d02..27eeb0a7 100644
--- a/src/pages/showcase/index.tsx
+++ b/src/pages/showcase/index.tsx
@@ -26,7 +26,7 @@ import {
   type TagType,
 } from "@site/src/data/users";
 import FavoriteIcon from "@site/src/components/svgIcons/FavoriteIcon";
-import { useColorMode } from "@docusaurus/theme-common";
+
 
 const TITLE =
   "recode hive: Framing all the opensource projects built by our community members";
@@ -185,11 +185,11 @@ function useSiteCountPlural() {
     );
 }
 
-function ShowcaseFilters() {
+function ShowcaseFilters({ isDark = false }: { isDark?: boolean }) {
   const filteredUsers = useFilteredUsers();
   const siteCountPlural = useSiteCountPlural();
   return (
-    <section className="margin-top--l margin-bottom--lg container">
+       <section className="margin-top--l margin-bottom--lg container">
       <div className={clsx("margin-bottom--sm", styles.filterCheckbox)}>
         <div>
           <motion.h2
@@ -456,16 +456,9 @@ export default function Showcase(): JSX.Element {
 }
 
 function ShowcaseContent() {
-  const { colorMode } = useColorMode();
-  const isDark = colorMode === "dark";
 
   return (
-    <main
-      className={clsx(
-        "",
-        isDark ? "bg-[#121212] text-white" : "bg-white text-black",
-      )}
-    >
+    <main className={styles.showcaseContainer}>
       <Head>
         <script
           async
diff --git a/src/pages/showcase/styles.module.css b/src/pages/showcase/styles.module.css
index dc44f8f4..db45320a 100644
--- a/src/pages/showcase/styles.module.css
+++ b/src/pages/showcase/styles.module.css
@@ -30,10 +30,11 @@
   font-size: 0.8rem;
   margin-top: 0.5rem;
   margin-right: 0.5rem;
+  color: var(--ifm-color-content);
 }
 
 [data-theme="dark"] .checkboxListItem {
-  color: var(--dark-text-primary);
+  color: var(--ifm-color-content);
 }
 
 .checkboxListItem:last-child {
@@ -49,6 +50,8 @@
   border-radius: 15px;
   padding: 10px;
   border: 1px solid gray;
+  color: var(--ifm-color-content);
+  background: var(--ifm-background-color);
 }
 
 [data-theme="dark"] .searchContainer input {
@@ -111,3 +114,45 @@
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+[data-theme="dark"] .filterCheckbox {
+  background-color: transparent !important;
+  color: #ffffff !important;
+}
+
+[data-theme="dark"] .checkboxList {
+  background-color: transparent !important;
+}
+
+[data-theme="dark"] .checkboxListItem {
+  color: #ffffff !important;
+  border-color: #444444 !important;
+}
+
+[data-theme="light"] .checkboxListItem {
+  color: #000000 !important;
+}
+
+[data-theme="dark"] .showcaseFavorite {
+  background-color: #1a1a1a !important;
+}
+[data-theme="dark"] .filterCheckbox {
+  background-color: transparent !important;
+  color: #ffffff !important;
+}
+
+[data-theme="dark"] .checkboxList {
+  background-color: transparent !important;
+}
+
+[data-theme="dark"] .checkboxListItem {
+  color: #ffffff !important;
+  border-color: #444444 !important;
+}
+
+[data-theme="light"] .checkboxListItem {
+  color: #000000 !important;
+}
+
+[data-theme="dark"] .showcaseFavorite {
+  background-color: #1a1a1a !important;
+}
\ No newline at end of file