diff --git a/src/pages/showcase/_components/ShowcaseCard/index.tsx b/src/pages/showcase/_components/ShowcaseCard/index.tsx
index a7ea020c..6d56a075 100644
--- a/src/pages/showcase/_components/ShowcaseCard/index.tsx
+++ b/src/pages/showcase/_components/ShowcaseCard/index.tsx
@@ -1,4 +1,3 @@
-
 import React from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
@@ -10,40 +9,46 @@ import { Tag, TagList, Tags, TagType, User } from '@site/src/data/users';
 import { sortBy } from '@site/src/utils/jsUtils';
 import IdealImage from '@theme/IdealImage';
 
-const TagComp = React.forwardRef<HTMLLIElement, Tag>(
-  ({label, color, description}, ref) => (
-    <li ref={ref} className={styles.tag} title={description}>
-      <span className={styles.textLabel}>{label.toLowerCase()}</span>
-      <span className={styles.colorLabel} style={{backgroundColor: color}} />
-    </li>
-  ),
-);
+const TagComp = React.forwardRef<
+  HTMLLIElement,
+  Tag & {label: string}
+>(({label, color, description}, ref) => (
+  <li 
+    ref={ref} 
+    className={styles.enhancedTag}
+    style={{
+      '--tag-color': color,
+      backgroundColor: `${color}20`,
+      borderColor: `${color}40`
+    } as React.CSSProperties}
+  >
+    <span className={styles.tagDot} style={{backgroundColor: color}}></span>
+    {label.toLowerCase()}
+  </li>
+));
 
 function ShowcaseCardTag({tags}: {tags: TagType[]}) {
   const tagObjects = tags.map((tag) => ({tag, ...Tags[tag]}));
-
-  // Keep same order for all tags
   const tagObjectsSorted = sortBy(tagObjects, (tagObject) =>
     TagList.indexOf(tagObject.tag),
   );
 
   return (
-    <>
+    <ul className={styles.enhancedTagsList}>
       {tagObjectsSorted.map((tagObject, index) => {
         const id = `showcase_card_tag_${tagObject.tag}`;
-
         return (
           <Tooltip
             key={index}
             text={tagObject.description}
-            anchorEl="#__docusaurus"
+            anchorEl={`#${id}`}
             id={id}
           >
             <TagComp key={index} {...tagObject} />
           </Tooltip>
         );
       })}
-    </>
+    </ul>
   );
 }
 
@@ -54,50 +59,59 @@ function ShowcaseCard({user}: {user: User}) {
 
   const handleSourceClick = (e: React.MouseEvent) => {
     e.stopPropagation();
-    // The link will handle the navigation
   };
 
+  console.log(user.preview)
+
   return (
-    <li key={user.title} className={clsx('card shadow--md', styles.card)}>
-      <div className={styles.cardLink} onClick={handleCardClick} />
-      <div className={clsx('card__image', styles.showcaseCardImage)}>
+    <div className={styles.enhancedShowcaseCard}>
+      {/* Image Section */}
+      <div className={styles.showcaseCardImage}>
         <IdealImage img={user.preview} alt={user.title} />
+        {user.tags.includes('favorite') && (
+          <div className={styles.favoriteIcon}>
+            <FavoriteIcon svgClass={styles.svgIconFavorite} size="small" />
+          </div>
+        )}
+        {user.source && (
+          <a
+            href={user.source}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.sourceButton}
+            onClick={handleSourceClick}
+            title="View Source Code"
+          >
+            <span className={styles.sourceIcon}>💻</span>
+            <span className={styles.sourceText}>source</span>
+          </a>
+        )}
       </div>
-      <div className="card__body">
+
+      {/* Content Section */}
+      <div className={styles.showcaseCardContent}>
         <div className={styles.showcaseCardHeader}>
-          <h4 className={styles.showcaseCardTitle}>
-            <Link 
-              href={user.website} 
-              className={styles.showcaseCardLink}
-              target="_blank"
-            >
-              {user.title}
-            </Link>
-          </h4>
-          {user.tags.includes('favorite') && (
-            <FavoriteIcon svgClass={styles.svgIconFavorite} size="small" />
-          )}
-          {user.source && (
-            <Link
-              href={user.source}
-              className={clsx(
-                'button button--secondary button--sm',
-                styles.showcaseCardSrcBtn,
-              )}
-              target="_blank"
-              rel="noopener noreferrer"
-              onClick={handleSourceClick}
-            >
-              <Translate id="showcase.card.sourceLink">source</Translate>
-            </Link>
-          )}
+          <h3 className={styles.showcaseCardTitle}>{user.title}</h3>
         </div>
-        <p className={styles.showcaseCardBody}>{user.description}</p>
-      </div>
-      <ul className={clsx('card__footer', styles.cardFooter)}>
+        
+        <p className={styles.showcaseCardDescription}>{user.description}</p>
+        
+        {/* Tags */}
         <ShowcaseCardTag tags={user.tags} />
-      </ul>
-    </li>
+        
+        {/* Footer */}
+        <div className={styles.showcaseCardFooter}>
+          <button className={styles.viewButton} onClick={handleCardClick}>
+           
+            <span className={styles.viewIcon}>👁️</span>
+            View Project
+          </button>
+        </div>
+      </div>
+
+      {/* Card Effects */}
+      <div className={styles.cardGlow}></div>
+    </div>
   );
 }
 
diff --git a/src/pages/showcase/_components/ShowcaseCard/styles.module.css b/src/pages/showcase/_components/ShowcaseCard/styles.module.css
index 5cb25f0e..bcc5977f 100644
--- a/src/pages/showcase/_components/ShowcaseCard/styles.module.css
+++ b/src/pages/showcase/_components/ShowcaseCard/styles.module.css
@@ -1,336 +1,356 @@
-.showcaseCardImage {
+/* Enhanced Showcase Card Styles */
+
+@keyframes cardFloat {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-4px);
+  }
+}
+
+@keyframes tagPulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+/* Main Card */
+.enhancedShowcaseCard {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 20px;
   overflow: hidden;
-  height: 150px;
-  border-bottom: 2px solid var(--ifm-color-emphasis-200);
-  transition: transform var(--ifm-transition-fast) ease;
-}
-
-.showcaseCardHeader {
+  backdrop-filter: blur(20px);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  position: relative;
   display: flex;
-  align-items: center;
-  margin-bottom: 12px;
+  flex-direction: column;
+  height: 100%;
 }
 
-.showcaseCardTitle {
-  margin-bottom: 0;
-  flex: 1 1 auto;
+.enhancedShowcaseCard::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(102, 126, 234, 0.02) 0%, rgba(240, 147, 251, 0.02) 100%);
+  opacity: 0;
+  transition: opacity 0.4s ease;
 }
 
-.showcaseCardTitle a {
-  text-decoration: none;
-  background: linear-gradient(
-      var(--ifm-color-primary),
-      var(--ifm-color-primary)
-    )
-    0% 100% / 0% 1px no-repeat;
-  transition: all var(--ifm-transition-fast) ease;
-  position: relative;
-  z-index: 2;
+.enhancedShowcaseCard:hover::before {
+  opacity: 1;
 }
 
-.showcaseCardTitle a:not(:focus):hover {
-  background-size: 100% 1px;
-  color: var(--ifm-link-hover-color);
+.enhancedShowcaseCard:hover {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(102, 126, 234, 0.3);
+  transform: translateY(-8px) scale(1.02);
+  box-shadow: 
+    0 20px 40px rgba(0, 0, 0, 0.2),
+    0 10px 20px rgba(102, 126, 234, 0.15);
 }
 
-.showcaseCardTitle,
-.showcaseCardHeader .svgIconFavorite {
-  margin-right: 0.25rem;
+/* Image Section */
+.showcaseCardImage {
+  position: relative;
+  height: 200px;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.05);
 }
 
-.showcaseCardHeader .svgIconFavorite {
-  color: var(--site-color-svg-icon-favorite);
+.showcaseCardImage img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: all 0.3s ease;
 }
 
-.showcaseCardSrcBtn {
-  margin-left: 6px;
-  padding-left: 12px;
-  padding-right: 12px;
-  border: none;
+.enhancedShowcaseCard:hover .showcaseCardImage img {
+  transform: scale(1.05);
 }
 
-.showcaseCardSrcBtn:focus-visible {
-  background-color: var(--ifm-color-secondary-dark);
+.favoriteIcon {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  width: 32px;
+  height: 32px;
+  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
+  animation: cardFloat 3s ease-in-out infinite;
 }
 
-[data-theme='dark'] .showcaseCardSrcBtn {
-  background-color: var(--ifm-color-emphasis-200) !important;
-  color: inherit;
+.svgIconFavorite {
+  width: 16px;
+  height: 16px;
+  color: white;
 }
 
-[data-theme='dark'] .showcaseCardSrcBtn:hover {
-  background-color: var(--ifm-color-emphasis-300) !important;
+.sourceButton {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 12px;
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 20px;
+  color: white;
+  text-decoration: none;
+  font-size: 12px;
+  font-weight: 600;
+  backdrop-filter: blur(10px);
+  opacity: 0;
+  transition: all 0.3s ease;
 }
 
-.showcaseCardBody {
-  font-size: smaller;
-  line-height: 1.66;
+.enhancedShowcaseCard:hover .sourceButton {
+  opacity: 1;
+  transform: translateY(0);
 }
 
-.cardFooter {
-  display: flex;
-  flex-wrap: wrap;
-  position: relative;
-  z-index: 2;
+.sourceButton:hover {
+  background: rgba(0, 0, 0, 0.9);
+  transform: scale(1.05);
+  color: white;
+  text-decoration: none;
 }
 
-.tag {
-  font-size: 0.675rem;
-  border: 1px solid var(--ifm-color-secondary-darkest);
-  cursor: default;
-  margin-right: 6px;
-  margin-bottom: 6px !important;
-  border-radius: 12px;
-  display: inline-flex;
-  align-items: center;
+.sourceIcon {
+  font-size: 12px;
 }
 
-.tag .textLabel {
-  margin-left: 8px;
+.sourceText {
+  font-size: 11px;
 }
 
-.tag .colorLabel {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  margin-left: 6px;
-  margin-right: 6px;
+/* Content Section */
+.showcaseCardContent {
+  padding: 20px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
-/* Card Styles */
-.card {
-  --card-scale: 1;
-  --card-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
-  --card-border: 1px solid var(--ifm-color-emphasis-200);
-  
-  position: relative;
-  overflow: hidden;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  border: var(--card-border);
-  border-radius: 8px;
-  height: 100%;
+.showcaseCardHeader {
   display: flex;
-  flex-direction: column;
-  cursor: pointer;
-  background: var(--ifm-card-background-color);
-  transform: scale(var(--card-scale)) translateZ(0);
-  will-change: transform, box-shadow, border-color;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 12px;
 }
 
-.card:hover {
-  --card-scale: 1.02;
-  --card-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.15);
-  --card-border: 1px solid var(--ifm-color-primary);
-  transform: translateY(-6px) scale(var(--card-scale)) translateZ(0);
-  box-shadow: var(--card-shadow);
-  border-color: var(--ifm-color-primary);
+.showcaseCardTitle {
+  font-size: 18px;
+  font-weight: 700;
+  color: #ffffff;
+  margin: 0;
+  line-height: 1.3;
+  flex: 1;
+  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
-/* Card clickable overlay */
-.cardLink {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
+.cardActions {
+  display: flex;
+  gap: 8px;
   opacity: 0;
-  background: linear-gradient(135deg, rgba(var(--ifm-color-primary-rgb), 0.1) 0%, rgba(var(--ifm-color-primary-rgb), 0) 100%);
   transition: opacity 0.3s ease;
 }
 
-.card:hover .cardLink {
+.enhancedShowcaseCard:hover .cardActions {
   opacity: 1;
 }
 
-/* Card content */
-.card__body {
-  position: relative;
-  z-index: 2;
-  flex-grow: 1;
+.actionButton {
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-size: 12px;
   display: flex;
-  flex-direction: column;
-  pointer-events: none;
-  padding: 1.5rem 1.5rem 0.5rem;
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  align-items: center;
+  justify-content: center;
 }
 
-.card:hover .card__body {
-  transform: translateY(-4px);
+.actionButton:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: scale(1.1);
 }
 
-.card__body > * {
-  pointer-events: auto;
+.showcaseCardDescription {
+  font-size: 14px;
+  color: #94a3b8;
+  margin: 0 0 16px 0;
+  line-height: 1.5;
+  flex: 1;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
-.card__footer {
-  position: relative;
-  z-index: 2;
-  padding: 0.5rem 1.5rem 1.5rem;
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+/* Enhanced Tags */
+.enhancedTagsList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 0 0 16px 0;
+  padding: 0;
+  list-style: none;
 }
 
-.card:hover .card__footer {
-  transform: translateY(4px);
+.enhancedTag {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border: 1px solid;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
 }
 
-/* Source button */
-.showcaseCardSrcBtn {
-  position: relative;
-  z-index: 3;
-  pointer-events: auto;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  transform: translateY(2px);
-  opacity: 0.9;
-  border-radius: 20px;
-  font-weight: 500;
-  letter-spacing: 0.5px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  background: var(--ifm-color-primary);
-  color: white !important;
-  border: none;
+.enhancedTag::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.6s ease;
 }
 
-.showcaseCardSrcBtn:hover {
-  transform: translateY(-1px) scale(1.03);
-  opacity: 1;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-  background: var(--ifm-color-primary-dark);
+.enhancedTag:hover::before {
+  left: 100%;
 }
 
-.showcaseCardSrcBtn:active {
-  transform: translateY(1px) scale(0.98);
+.enhancedTag:hover {
+  transform: translateY(-2px) scale(1.05);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
 
-/* Title styles */
-.showcaseCardTitle {
-  position: relative;
-  display: inline-block;
-  margin: 0;
+.tagDot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
 }
 
-.showcaseCardTitle a {
-  position: relative;
-  z-index: 2;
-  pointer-events: auto;
-  display: inline-block;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  font-weight: 600;
-  color: var(--ifm-heading-color);
-  text-decoration: none;
-  background: linear-gradient(
-      var(--ifm-color-primary),
-      var(--ifm-color-primary)
-    )
-    0% 100% / 0% 2px no-repeat;
-  padding-bottom: 2px;
+/* Card Footer */
+.showcaseCardFooter {
+  margin-top: auto;
+  display: flex;
+  justify-content: center;
 }
 
-.showcaseCardTitle a:hover {
-  background-size: 100% 2px;
-  color: var(--ifm-color-primary);
+.viewButton {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 20px;
+  background: linear-gradient(135deg, #1DB954 0%, #1ed760 100%);
+  color: white;
+  border: none;
+  border-radius: 20px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  opacity: 0;
+  transform: translateY(10px);
+  font-size: 12px;
 }
 
-/* Image hover effect */
-.card__image,
-.showcaseCardImage {
-  position: relative;
-  z-index: 2;
-  overflow: hidden;
-  transform: translateZ(0);
+.enhancedShowcaseCard:hover .viewButton {
+  opacity: 1;
+  transform: translateY(0);
 }
 
-.showcaseCardImage img {
-  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-  transform: scale(1);
-  will-change: transform;
+.viewButton:hover {
+  background: linear-gradient(135deg, #1ed760 0%, #1DB954 100%);
+  transform: translateY(-2px) scale(1.05);
+  box-shadow: 0 8px 20px rgba(29, 185, 84, 0.4);
 }
 
-.card:hover .showcaseCardImage img {
-  transform: scale(1.05);
+.viewIcon {
+  font-size: 12px;
 }
 
-.showcaseCardImage::after {
-  content: '';
+/* Card Glow Effect */
+.cardGlow {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(
-    to bottom,
-    rgba(0, 0, 0, 0) 0%,
-    rgba(0, 0, 0, 0.2) 100%
-  );
-  opacity: 0.5;
+  border-radius: 20px;
+  opacity: 0;
   transition: opacity 0.3s ease;
-  mix-blend-mode: multiply;
-}
-
-.card:hover .showcaseCardImage::after {
-  opacity: 0.8;
-}
-
-/* Tag styles */
-.tag {
-  --tag-scale: 1;
-  --tag-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  
-  position: relative;
-  overflow: hidden;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  transform: scale(var(--tag-scale)) translateZ(0);
-  will-change: transform, box-shadow;
-  border-radius: 12px;
-  background: var(--ifm-color-emphasis-100);
-  border: 1px solid var(--ifm-color-emphasis-200);
-  box-shadow: var(--tag-shadow);
-}
-
-.tag:hover {
-  --tag-scale: 1.05;
-  --tag-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  transform: translateY(-2px) scale(var(--tag-scale)) translateZ(0);
-  z-index: 1;
-}
-
-.tag::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.2) 0%,
-    rgba(255, 255, 255, 0) 100%
-  );
-  transform: translateX(-100%) skewX(-20deg);
-  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
   pointer-events: none;
+  background: radial-gradient(circle at 50% 50%, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
 }
 
-.tag:hover::before {
-  transform: translateX(200%) skewX(-20deg);
-}
-
-/* Favorite icon animation */
-.svgIconFavorite {
-  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+.enhancedShowcaseCard:hover .cardGlow {
+  opacity: 1;
 }
 
-.card:hover .svgIconFavorite {
-  transform: scale(1.2) rotate(8deg);
-  filter: drop-shadow(0 2px 4px rgba(255, 0, 0, 0.3));
+/* Responsive Design */
+@media (max-width: 768px) {
+  .showcaseCardContent {
+    padding: 16px;
+  }
+  
+  .showcaseCardTitle {
+    font-size: 16px;
+  }
+  
+  .showcaseCardDescription {
+    font-size: 13px;
+  }
+  
+  .enhancedTag {
+    font-size: 10px;
+    padding: 3px 6px;
+  }
+  
+  .viewButton {
+    padding: 8px 16px;
+    font-size: 11px;
+  }
 }
 
-/* Card description */
-.showcaseCardBody {
-  transition: all 0.3s ease;
-  opacity: 0.9;
+/* Force consistent colors */
+[data-theme='dark'] .enhancedShowcaseCard *,
+[data-theme='light'] .enhancedShowcaseCard *,
+html[data-theme='dark'] .enhancedShowcaseCard *,
+html[data-theme='light'] .enhancedShowcaseCard * {
+  color: inherit !important;
 }
 
-.card:hover .showcaseCardBody {
-  opacity: 1;
+[data-theme='dark'] .enhancedShowcaseCard .showcaseCardTitle,
+[data-theme='light'] .enhancedShowcaseCard .showcaseCardTitle {
+  color: #ffffff !important;
 }
diff --git a/src/pages/showcase/index.tsx b/src/pages/showcase/index.tsx
index d74ba5c5..96f3d48f 100644
--- a/src/pages/showcase/index.tsx
+++ b/src/pages/showcase/index.tsx
@@ -11,18 +11,17 @@ import ShowcaseFilterToggle, {
 } from './_components/ShowcaseFilterToggle';
 import ShowcaseCard from './_components/ShowcaseCard';
 import ShowcaseTooltip from './_components/ShowcaseTooltip';
-
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import Translate, { translate } from '@docusaurus/Translate';
 import { useHistory, useLocation } from '@docusaurus/router';
 import { usePluralForm } from '@docusaurus/theme-common';
 import { motion } from "framer-motion";
-import styles from './styles.module.css';
+import './styles.css';
 import { sortedUsers,
-    Tags,
-    TagList,
-    type User,
-    type TagType,} from '@site/src/data/users';
+  Tags,
+  TagList,
+  type User,
+  type TagType,} from '@site/src/data/users';
 import FavoriteIcon from '@site/src/components/svgIcons/FavoriteIcon';
 import { useColorMode } from '@docusaurus/theme-common';
 
@@ -54,7 +53,6 @@ export function prepareUserState(): UserState | undefined {
       focusedElementId: document.activeElement?.id,
     };
   }
-
   return undefined;
 }
 
@@ -91,18 +89,16 @@ function filterUsers(
 }
 
 function useFilteredUsers() {
-  const location = useLocation<UserState>();
+  const location = useLocation();
   const [operator, setOperator] = useState<Operator>('OR');
-  // On SSR / first mount (hydration) no tag is selected
   const [selectedTags, setSelectedTags] = useState<TagType[]>([]);
   const [searchName, setSearchName] = useState<string | null>(null);
-  // Sync tags from QS to state (delayed on purpose to avoid SSR/Client
-  // hydration mismatch)
+
   useEffect(() => {
     setSelectedTags(readSearchTags(location.search));
     setOperator(readOperator(location.search));
     setSearchName(readSearchName(location.search));
-    restoreUserState(location.state);
+    // restoreUserState(location?.state);
   }, [location]);
 
   return useMemo(
@@ -113,53 +109,49 @@ function useFilteredUsers() {
 
 function ShowcaseHeader() {
   return (
-    <section className="margin-top--lg margin-bottom--lg text--center">
-      <motion.h1
-        initial={{ opacity: 0, x: -15 }}
-        whileInView={{ opacity: 1, x: 0 }}
-        viewport={{ once: true }}
-        transition={{
-          duration: 1,
-          type: "spring",
-          stiffness: 100,
-          delay: 0.2,
-        }} className={styles.TitleText}
-      >{TITLE}</motion.h1>
-      <motion.p
-        initial={{ opacity: 0, y: 15 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        viewport={{ once: true }}
-        transition={{
-          duration: 1,
-          type: "spring",
-          stiffness: 100,
-          delay: 0.3,
-        }}
-      >{DESCRIPTION}</motion.p>
+    <div className="enhanced-showcase-hero">
+      <div className="showcase-hero-content">
+        <div className="hero-badge">
+          <span className="badge-icon">🚀</span>
+          <span className="badge-text">Community Showcase</span>
+        </div>
+        <h1 className="showcase-hero-title">
+          Open Source Projects Hub
+        </h1>
+        <p className="showcase-hero-description">
+          {DESCRIPTION}
+        </p>
+        
+        {/* Stats */}
+        <div className="showcase-stats">
+          <div className="stat-item">
+            <div className="stat-number">{sortedUsers.length}+</div>
+            <div className="stat-label">Projects</div>
+          </div>
+          <div className="stat-item">
+            <div className="stat-number">1050+</div>
+            <div className="stat-label">Forks</div>
+          </div>
+          <div className="stat-item">
+            <div className="stat-number">950+</div>
+            <div className="stat-label">Stars</div>
+          </div>
+        </div>
 
-      <motion.div
-        initial={{ opacity: 0, y: 15 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        viewport={{ once: true }}
-        transition={{
-          duration: 1,
-          type: "spring",
-          stiffness: 100,
-          delay: 0.5,
-        }}
-      >
-        <a
-          className="button button--primary"
-          href={EDIT_URL}
-          target="_blank"
-          rel="noreferrer"
-        >
-          <Translate id="showcase.header.button">
-            🌟 Join the Hive Community
-          </Translate>
-        </a>
-      </motion.div>
-    </section>
+        {/* CTA Button */}
+        <div className="showcase-cta">
+          <a 
+            href="https://github.com/recodehive" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            className="primary-cta-button"
+          >
+            <span className="cta-icon">⭐</span>
+            Join the Hive Community
+          </a>
+        </div>
+      </div>
+    </div>
   );
 }
 
@@ -173,7 +165,7 @@ function useSiteCountPlural() {
           id: 'showcase.filters.resultCount',
           description:
             'Pluralized label for the number of sites found on the showcase. Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',
-          message: '1 site|{sitesCount} sites',
+          message: '1 project|{sitesCount} projects',
         },
         {sitesCount},
       ),
@@ -183,272 +175,194 @@ function useSiteCountPlural() {
 function ShowcaseFilters() {
   const filteredUsers = useFilteredUsers();
   const siteCountPlural = useSiteCountPlural();
+
   return (
-    <section className="container margin-top--l margin-bottom--lg">
-      <div className={clsx('margin-bottom--sm', styles.filterCheckbox)}>
-        <div>
-          <motion.h2
-            initial={{ opacity: 0, x: -15 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{
-              duration: 1,
-              type: "spring",
-              stiffness: 100,
-              delay: 0.2,
-            }}
-          >
-            <Translate id="showcase.filters.title">Filters</Translate>
-          </motion.h2>
-          <motion.div
-            initial={{ opacity: 0, x: -15 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{
-              duration: 1,
-              type: "spring",
-              stiffness: 100,
-              delay: 0.3,
-            }}
-          >
-            <span>{siteCountPlural(filteredUsers.length)}</span>
-          </motion.div>
+    <div className="enhanced-showcase-filters">
+      <div className="filters-header">
+        <h2 className="filters-title">
+          <span className="title-icon">🔍</span>
+          Explore Projects
+        </h2>
+        <div className="results-count">
+          {siteCountPlural(filteredUsers.length)}
         </div>
-        <ShowcaseFilterToggle />
       </div>
-      <motion.ul
-                initial={{ opacity: 0}}
-                whileInView={{ opacity: 1}}
-                viewport={{ once: true }}
-                transition={{
-                  duration: 4,
-                  type: "spring",
-                  stiffness: 100,
-                  delay: 0.5,
-                }}
-                className={clsx('clean-list', styles.checkboxList)}
-              >
-        {TagList.map((tag, i) => {
-          const {label, description, color} = Tags[tag];
-          const id = `showcase_checkbox_id_${tag}`;
+      
+      <div className="filters-content">
+        <div className="filter-toggle-section">
+          <ShowcaseFilterToggle />
+        </div>
+        
+        <div className="tags-grid">
+          {TagList.map((tag, i) => {
+            const {label, description, color} = Tags[tag];
+            const id = `showcase_checkbox_id_${tag}`;
 
-          return (
-            <li key={i} className={styles.checkboxListItem}>
+            return (
               <ShowcaseTooltip
-                id={id}
+                key={tag}
                 text={description}
-                anchorEl="#__docusaurus"
+                anchorEl={`#${id}`}
+                id={id}
               >
                 <ShowcaseTagSelect
                   tag={tag}
                   id={id}
                   label={label}
                   icon={
-                    tag === 'favorite' ? (
-                      <FavoriteIcon svgClass={styles.svgIconFavoriteXs} />
-                    ) : (
-                      <span
-                        style={{
-                          backgroundColor: color,
-                          width: 10,
-                          height: 10,
-                          borderRadius: '50%',
-                          marginLeft: 8,
-                        }}
-                      />
-                    )
+                    <span
+                      style={{
+                        backgroundColor: color,
+                        width: 10,
+                        height: 10,
+                        borderRadius: '50%',
+                        marginLeft: 6,
+                      }}
+                    />
                   }
                 />
               </ShowcaseTooltip>
-            </li>
-          );
-        })}
-      </motion.ul>
-    </section>
+            );
+          })}
+        </div>
+      </div>
+    </div>
   );
 }
 
-const favoriteUsers = sortedUsers.filter((user) =>
-  user.tags.includes('favorite'),
-);
-const otherUsers = sortedUsers.filter(
-  (user) => !user.tags.includes('favorite'),
-);
-
 function SearchBar() {
   const history = useHistory();
   const location = useLocation();
   const [value, setValue] = useState<string | null>(null);
+
   useEffect(() => {
     setValue(readSearchName(location.search));
   }, [location]);
+
   return (
-    <div className={styles.searchContainer}>
-      <input
-        id="searchbar"
-        placeholder={translate({
-          message: 'Search for site name...',
-          id: 'showcase.searchBar.placeholder',
-        })}
-        value={value ?? undefined}
-        onInput={(e) => {
-          setValue(e.currentTarget.value);
-          const newSearch = new URLSearchParams(location.search);
-          newSearch.delete(SearchNameQueryKey);
-          if (e.currentTarget.value) {
-            newSearch.set(SearchNameQueryKey, e.currentTarget.value);
-          }
-          history.push({
-            ...location,
-            search: newSearch.toString(),
-            state: prepareUserState(),
-          });
-          setTimeout(() => {
-            document.getElementById('searchbar')?.focus();
-          }, 0);
-        }}
-      />
+    <div className="enhanced-search-section">
+      <div className="search-wrapper">
+        <div className="search-icon">🔍</div>
+        <input
+          id="searchbar"
+          placeholder="Search projects..."
+          value={value ?? ''}
+          className="search-input"
+          onInput={(e) => {
+            setValue(e.currentTarget.value);
+            const newSearch = new URLSearchParams(location.search);
+            newSearch.delete(SearchNameQueryKey);
+            if (e.currentTarget.value) {
+              newSearch.set(SearchNameQueryKey, e.currentTarget.value);
+            }
+            history.push({
+              ...location,
+              search: newSearch.toString(),
+              state: prepareUserState(),
+            });
+            setTimeout(() => {
+              document.getElementById('searchbar')?.focus();
+            }, 0);
+          }}
+        />
+      </div>
     </div>
   );
 }
 
+const favoriteUsers = sortedUsers.filter((user) =>
+  user.tags.includes('favorite'),
+);
+const otherUsers = sortedUsers.filter(
+  (user) => !user.tags.includes('favorite'),
+);
+
 function ShowcaseCards() {
   const filteredUsers = useFilteredUsers();
 
   if (filteredUsers.length === 0) {
     return (
-      <section className="margin-top--lg margin-bottom--xl">
-        <div className="container padding-vert--md text--center">
-          <h2>
-            <Translate id="showcase.usersList.noResult">No result</Translate>
-          </h2>
-          <SearchBar />
-        </div>
-      </section>
+      <div className="no-results">
+        <div className="no-results-icon">🔍</div>
+        <h3>No projects found</h3>
+        <p>Try adjusting your filters or search terms</p>
+      </div>
     );
   }
 
   return (
-    <section className="margin-top--lg margin-bottom--xl">
+    <div className="showcase-content-section">
       {filteredUsers.length === sortedUsers.length ? (
         <>
-          <div className={styles.showcaseFavorite}>
-            <div className="container">
-              <div
-                className={clsx(
-                  'margin-bottom--md',
-                  styles.showcaseFavoriteHeader,
-                )}
-              >
-                <motion.h2
-                  initial={{ opacity: 0, x: -15 }}
-                  whileInView={{ opacity: 1, x: 0 }}
-                  viewport={{ once: true }}
-                  transition={{
-                    duration: 1,
-                    type: "spring",
-                    stiffness: 100,
-                    delay: 0.3,
-                  }}
-                >
-                  <Translate id="showcase.favoritesList.title">
-                    Best of the Hive
-                  </Translate>
-                </motion.h2>
-                <motion.h2
-                  initial={{ opacity: 0, x: -15 }}
-                  whileInView={{ opacity: 1, x: 0 }}
-                  viewport={{ once: true }}
-                  transition={{
-                    duration: 1,
-                    type: "spring",
-                    stiffness: 100,
-                    delay: 0.3,
-                  }}
-                >
-                  <FavoriteIcon svgClass={styles.svgIconFavorite} />
-                </motion.h2>
-                <SearchBar />
+          {favoriteUsers.length > 0 && (
+            <div className="featured-projects-section">
+              <h2 className="section-title">
+                <span className="title-icon">⭐</span>
+                Best of the Hive
+                <span className="section-count">({favoriteUsers.length})</span>
+              </h2>
+              <div className="projects-grid featured-grid">
+                {favoriteUsers.map((user, index) => (
+                  <motion.div
+                    key={user.title}
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: index * 0.1 }}
+                    className="project-wrapper"
+                  >
+                    <ShowcaseCard key={user.title} user={user} />
+                  </motion.div>
+                ))}
               </div>
-              <motion.ul
-                initial={{ opacity: 0}}
-                whileInView={{ opacity: 1}}
-                viewport={{ once: true }}
-                transition={{
-                  duration: 4,
-                  type: "spring",
-                  stiffness: 100,
-                  delay: 0.4,
-                }}
-                className={clsx('container', 'clean-list', styles.showcaseList)}
-              >
-
-                {favoriteUsers.map((user) => (
-                  <ShowcaseCard key={user.title} user={user} />
+            </div>
+          )}
+          
+          {otherUsers.length > 0 && (
+            <div className="all-projects-section">
+              <h2 className="section-title">
+                <span className="title-icon">🌟</span>
+                All Projects
+                <span className="section-count">({otherUsers.length})</span>
+              </h2>
+              <div className="projects-grid">
+                {otherUsers.map((user, index) => (
+                  <motion.div
+                    key={user.title}
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: index * 0.1 }}
+                    className="project-wrapper"
+                  >
+                    <ShowcaseCard key={user.title} user={user} />
+                  </motion.div>
                 ))}
-              </motion.ul>
+              </div>
             </div>
-          </div>
-          <div className="container margin-top--lg">
-            <motion.h2
-              initial={{ opacity: 0, x: -15 }}
-              whileInView={{ opacity: 1, x: 0 }}
-              viewport={{ once: true }}
-              transition={{
-                duration: 1,
-                type: "spring",
-                stiffness: 100,
-                delay: 0.5,
-              }}
-              className={styles.showcaseHeader}
-            >
-              <Translate id="showcase.usersList.allUsers">All sites</Translate>
-            </motion.h2>
-            <motion.ul
-              initial={{ opacity: 0}}
-              whileInView={{ opacity: 1}}
-              viewport={{ once: true }}
-              transition={{
-                duration: 4,
-                type: "spring",
-                stiffness: 100,
-                delay: 0.5,
-              }}
-              className={clsx('clean-list', styles.showcaseList)}
-            >
-              {otherUsers.map((user) => (
-                <ShowcaseCard key={user.title} user={user} />
-              ))}
-            </motion.ul>
-          </div>
+          )}
         </>
       ) : (
-        <div className="container">
-          <div
-            className={clsx('margin-bottom--md', styles.showcaseFavoriteHeader)}
-          >
-            <SearchBar />
-          </div>
-          <ul className={clsx('clean-list', styles.showcaseList)}>
-            {filteredUsers.map((user) => (
-              <ShowcaseCard key={user.title} user={user} />
+        <div className="filtered-projects-section">
+          <h2 className="section-title">
+            <span className="title-icon">🔍</span>
+            Search Results
+            <span className="section-count">({filteredUsers.length})</span>
+          </h2>
+          <div className="projects-grid">
+            {filteredUsers.map((user, index) => (
+              <motion.div
+                key={user.title}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: index * 0.1 }}
+                className="project-wrapper"
+              >
+                <ShowcaseCard key={user.title} user={user} />
+              </motion.div>
             ))}
-          </ul>
+          </div>
         </div>
       )}
-    </section>
-  );
-}
-
-export default function Showcase(): JSX.Element {
-
-  return (
-    <Layout
-      title="Showcase of CodeHarborHub"
-      description="Showcase of CodeHarborHub for CodeHarborHub Learners and users"
-    >
-      <ShowcaseContent />
-    </Layout>
+    </div>
   );
 }
 
@@ -457,23 +371,23 @@ function ShowcaseContent() {
   const isDark = colorMode === "dark";
 
   return (
-    <main
-      className={clsx(
-        "",
-        isDark ? "bg-[#121212] text-white" : "bg-white text-black"
-      )}
-    >
-      <Head>
-        <script
-          async
-          custom-element="amp-auto-ads"
-          src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"
-        />
-      </Head>
-
+    <div className="enhanced-showcase-container">
       <ShowcaseHeader />
+      <SearchBar />
       <ShowcaseFilters />
       <ShowcaseCards />
-    </main>
+    </div>
   );
-}
\ No newline at end of file
+}
+
+export default function Showcase(): JSX.Element {
+  return (
+    <Layout title={TITLE} description={DESCRIPTION}>
+      <Head>
+        <meta property="og:title" content={TITLE} />
+        <meta property="og:description" content={DESCRIPTION} />
+      </Head>
+      <ShowcaseContent />
+    </Layout>
+  );
+}
diff --git a/src/pages/showcase/styles.css b/src/pages/showcase/styles.css
new file mode 100644
index 00000000..e3c11830
--- /dev/null
+++ b/src/pages/showcase/styles.css
@@ -0,0 +1,491 @@
+/* Enhanced Showcase Styles - Matching Design System */
+
+/* Keyframe Animations */
+@keyframes showcaseFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes floatAnimation {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-6px);
+  }
+}
+
+@keyframes backgroundShift {
+  0%, 100% { transform: translateX(0px) translateY(0px) scale(1); }
+  25% { transform: translateX(30px) translateY(-20px) scale(1.02); }
+  50% { transform: translateX(-10px) translateY(30px) scale(0.98); }
+  75% { transform: translateX(-25px) translateY(-15px) scale(1.01); }
+}
+
+@keyframes cardHover {
+  from {
+    transform: translateY(0) scale(1);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  }
+  to {
+    transform: translateY(-8px) scale(1.02);
+    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.2);
+  }
+}
+
+/* Main Container */
+.enhanced-showcase-container {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
+  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%) !important;
+  color: #e2e8f0 !important;
+  min-height: 100vh;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Force theme independence */
+[data-theme='dark'] .enhanced-showcase-container,
+[data-theme='light'] .enhanced-showcase-container,
+html[data-theme='dark'] .enhanced-showcase-container,
+html[data-theme='light'] .enhanced-showcase-container {
+  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%) !important;
+  color: #e2e8f0 !important;
+}
+
+/* Background Effects */
+.enhanced-showcase-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background:
+    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.08) 0%, transparent 60%),
+    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.06) 0%, transparent 60%),
+    radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.04) 0%, transparent 60%);
+  animation: backgroundShift 25s ease-in-out infinite;
+  pointer-events: none;
+}
+
+/* Hero Section */
+.enhanced-showcase-hero {
+  padding: 80px 20px 60px;
+  text-align: center;
+  position: relative;
+  z-index: 1;
+}
+
+.showcase-hero-content {
+  max-width: 900px;
+  margin: 0 auto;
+  animation: showcaseFadeIn 0.8s ease-out;
+}
+
+.hero-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 50px;
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 24px;
+  backdrop-filter: blur(10px);
+}
+
+.badge-icon {
+  font-size: 16px;
+  animation: floatAnimation 3s ease-in-out infinite;
+}
+
+.showcase-hero-title {
+  font-size: 48px;
+  font-weight: 900;
+  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 30%, #e2e8f0 60%, #cbd5e1 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin: 0 0 24px 0;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+
+.showcase-hero-description {
+  font-size: 18px;
+  color: #cbd5e1;
+  line-height: 1.6;
+  margin: 0 0 40px 0;
+  opacity: 0.9;
+}
+
+/* Stats */
+.showcase-stats {
+  display: flex;
+  justify-content: center;
+  gap: 40px;
+  margin: 40px 0;
+  flex-wrap: wrap;
+}
+
+.stat-item {
+  text-align: center;
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  transition: all 0.3s ease;
+  min-width: 120px;
+}
+
+.stat-item:hover {
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateY(-4px);
+  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
+}
+
+.stat-number {
+  font-size: 32px;
+  font-weight: 900;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 8px;
+}
+
+.stat-label {
+  font-size: 14px;
+  color: #94a3b8;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* CTA Button */
+.showcase-cta {
+  margin-top: 40px;
+}
+
+.primary-cta-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 32px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+  border: none;
+  border-radius: 12px;
+  color: white;
+  font-weight: 700;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.4s ease;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
+  text-decoration: none;
+}
+
+.primary-cta-button:hover {
+  transform: translateY(-3px) scale(1.02);
+  box-shadow: 0 15px 35px rgba(102, 126, 234, 0.6);
+  color: white;
+  text-decoration: none;
+}
+
+.cta-icon {
+  font-size: 16px;
+}
+
+/* Search Section */
+.enhanced-search-section {
+  padding: 40px 20px;
+  position: relative;
+  z-index: 2;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.search-wrapper {
+  position: relative;
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+.search-icon {
+  position: absolute;
+  left: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 18px;
+  opacity: 0.6;
+}
+
+.search-input {
+  width: 100%;
+  padding: 16px 16px 16px 48px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 12px;
+  color: #ffffff;
+  font-size: 16px;
+  backdrop-filter: blur(10px);
+  transition: all 0.3s ease;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: #667eea;
+  background: rgba(255, 255, 255, 0.15);
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+}
+
+.search-input::placeholder {
+  color: #94a3b8;
+}
+
+/* Enhanced Filters */
+.enhanced-showcase-filters {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 24px;
+  padding: 32px;
+  margin: 40px auto;
+  max-width: 1200px;
+  backdrop-filter: blur(20px);
+  position: relative;
+  z-index: 2;
+}
+
+.filters-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 32px;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.filters-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 24px;
+  font-weight: 700;
+  color: #ffffff;
+  margin: 0;
+}
+
+.title-icon {
+  font-size: 20px;
+}
+
+.results-count {
+  padding: 8px 16px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 600;
+  color: white;
+}
+
+.filters-content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.filter-toggle-section {
+  display: flex;
+  justify-content: center;
+}
+
+.tags-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px;
+}
+
+/* Content Sections */
+.showcase-content-section {
+  padding: 40px 20px 80px;
+  position: relative;
+  z-index: 2;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 32px;
+  font-weight: 700;
+  color: #ffffff;
+  margin-bottom: 40px;
+  text-align: center;
+  justify-content: center;
+}
+
+.section-count {
+  font-size: 18px;
+  opacity: 0.7;
+  font-weight: 500;
+  margin-left: 8px;
+}
+
+.featured-projects-section,
+.all-projects-section,
+.filtered-projects-section {
+  margin-bottom: 60px;
+}
+
+/* Project Grids */
+.projects-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 24px;
+}
+
+.featured-grid {
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+}
+
+.project-wrapper {
+  animation: showcaseFadeIn 0.6s ease-out both;
+}
+
+/* No Results */
+.no-results {
+  text-align: center;
+  padding: 80px 20px;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.no-results-icon {
+  font-size: 64px;
+  margin-bottom: 24px;
+  opacity: 0.6;
+}
+
+.no-results h3 {
+  font-size: 24px;
+  font-weight: 700;
+  color: #ffffff;
+  margin-bottom: 12px;
+}
+
+.no-results p {
+  color: #94a3b8;
+  font-size: 16px;
+}
+
+/* Responsive Design */
+@media (max-width: 1200px) {
+  .projects-grid {
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 20px;
+  }
+  
+  .featured-grid {
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .enhanced-showcase-container {
+    padding: 0 16px;
+  }
+  
+  .enhanced-showcase-hero {
+    padding: 60px 20px 40px;
+  }
+  
+  .showcase-hero-title {
+    font-size: 36px;
+  }
+  
+  .showcase-stats {
+    flex-direction: column;
+    gap: 16px;
+    align-items: center;
+  }
+  
+  .stat-item {
+    min-width: 100px;
+  }
+  
+  .enhanced-showcase-filters {
+    margin: 20px 16px;
+    padding: 24px;
+  }
+  
+  .filters-header {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .tags-grid {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 10px;
+  }
+  
+  .projects-grid,
+  .featured-grid {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+}
+
+@media (max-width: 480px) {
+  .showcase-hero-title {
+    font-size: 28px;
+  }
+  
+  .section-title {
+    font-size: 24px;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  
+  .section-count {
+    font-size: 16px;
+    margin-left: 0;
+  }
+  
+  .search-input {
+    font-size: 14px;
+  }
+  
+  .primary-cta-button {
+    padding: 14px 24px;
+    font-size: 14px;
+  }
+}
+
+/* Force all text colors to be consistent */
+[data-theme='dark'] .enhanced-showcase-container *,
+[data-theme='light'] .enhanced-showcase-container *,
+html[data-theme='dark'] .enhanced-showcase-container *,
+html[data-theme='light'] .enhanced-showcase-container * {
+  color: inherit !important;
+}
+
+[data-theme='dark'] .enhanced-showcase-container h1,
+[data-theme='dark'] .enhanced-showcase-container h2,
+[data-theme='dark'] .enhanced-showcase-container h3,
+[data-theme='light'] .enhanced-showcase-container h1,
+[data-theme='light'] .enhanced-showcase-container h2,
+[data-theme='light'] .enhanced-showcase-container h3 {
+  color: #ffffff !important;
+}
diff --git a/src/pages/showcase/styles.module.css b/src/pages/showcase/styles.module.css
deleted file mode 100644
index b8c0987b..00000000
--- a/src/pages/showcase/styles.module.css
+++ /dev/null
@@ -1,113 +0,0 @@
-.filterCheckbox {
-  justify-content: space-between;
-}
-
-.filterCheckbox,
-.checkboxList {
-  display: flex;
-  align-items: center;
-}
-
-.filterCheckbox > div:first-child {
-  display: flex;
-  flex: 1 1 auto;
-  align-items: center;
-}
-
-.filterCheckbox > div > * {
-  margin-bottom: 0;
-  margin-right: 8px;
-}
-
-.checkboxList {
-  flex-wrap: wrap;
-}
-
-.checkboxListItem {
-  user-select: none;
-  white-space: nowrap;
-  height: 32px;
-  font-size: 0.8rem;
-  margin-top: 0.5rem;
-  margin-right: 0.5rem;
-}
-
-[data-theme='dark'] .checkboxListItem {
-  color: var(--dark-text-primary);
-}
-
-.checkboxListItem:last-child {
-  margin-right: 0;
-}
-
-.searchContainer {
-  margin-left: auto;
-}
-
-.searchContainer input {
-  height: 30px;
-  border-radius: 15px;
-  padding: 10px;
-  border: 1px solid gray;
-}
-
-[data-theme='dark'] .searchContainer input {
-  background: var(--dark-input-bg);
-  border-color: var(--dark-input-border);
-  color: var(--dark-text-primary);
-}
-
-[data-theme='dark'] .searchContainer input:focus {
-  border-color: var(--dark-input-focus-border);
-}
-
-.showcaseList {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 24px;
-}
-
-.showcaseFavorite {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-  background-color: var(--site-color-favorite-background);
-}
-
-.showcaseFavoriteHeader {
-  display: flex;
-  align-items: center;
-}
-
-.showcaseFavoriteHeader > h2 {
-  margin-bottom: 0;
-}
-
-.showcaseFavoriteHeader > svg {
-  width: 30px;
-  height: 30px;
-}
-
-.svgIconFavoriteXs,
-.svgIconFavorite {
-  color: var(--site-color-svg-icon-favorite);
-}
-
-.svgIconFavoriteXs {
-  margin-left: 0.625rem;
-  font-size: 1rem;
-}
-
-.svgIconFavorite {
-  margin-left: 1rem;
-}
-
-.TitleText {
-  background: linear-gradient(
-    90deg,
-    rgb(152 0 255) 0%,
-    rgb(246 41 41) 50%,
-    rgb(255 169 8) 100%
-  );
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
\ No newline at end of file