diff --git a/docusaurus.config.js b/docusaurus.config.js
index 68bf383621..0a399410e8 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -83,6 +83,23 @@ const config = {
   tagline: 'Documentation for Netwrix Products',
   favicon: 'img/branding/favicon.ico',
 
+  scripts: [
+    {
+      src: "https://widget.kapa.ai/kapa-widget.bundle.js",
+      "data-website-id": "c8052612-e9cf-49f8-b7a4-e717c6adc398",
+      "data-project-name": "Netwrix",
+      "data-project-color": "#F5F5F5",
+      "data-project-logo": "https://img.netwrix.com/elements/social_communities/netwrix_blog.svg",
+      "data-user-analytics-cookie-enabled": "true",
+      "data-modal-title": "Netwrix Help Center AI Assistant",
+      "data-modal-example-questions-title": "Try asking me...",
+      "data-modal-disclaimer": "This **AI assistant answers Netwrix questions** using the documentation",
+      "data-modal-example-questions": "How to reduce Audit DB size?,How to scan for sensitive data?,How to migrate NEA to new server?,How to upload archive to SQL DB?",
+      "data-button-text-color": "#E32C2D",
+      async: true,
+    },
+  ],
+
   // Set the production url of your site here
   // Use environment variable for dynamic URL configuration
   url: process.env.RENDER_EXTERNAL_URL || 'http://localhost:3000',
@@ -771,177 +788,139 @@ const config = {
         items: [
           {
             type: 'dropdown',
-            label: 'Security Admin',
+            label: 'Identity',
             position: 'left',
             items: [
               {
-                label: '1Secure',
-                to: '/docs/1secure',
-              },
-              {
-                label: 'Access Analyzer - 12.0',
-                to: '/docs/accessanalyzer/12.0',
-              },
-              {
-                label: 'Access Analyzer - 11.6',
-                to: '/docs/accessanalyzer/11.6',
-              },
-              {
-                label: 'Activity Monitor - 8.0',
-                to: '/docs/activitymonitor/8.0',
-              },
-              {
-                label: 'Activity Monitor - 7.1',
-                to: '/docs/activitymonitor/7.1',
+                label: 'Product Name',
+                to: '#',
               },
               {
-                label: 'Auditor - 10.7',
-                to: '/docs/auditor/10.7',
+                label: 'Product Name',
+                to: '#',
               },
               {
-                label: 'Auditor - 10.6',
-                to: '/docs/auditor/10.6',
+                label: 'Product Name',
+                to: '#',
               },
               {
-                label: 'Threat Manager - 3.0',
-                to: '/docs/threatmanager/3.0',
+                label: 'Product Name',
+                to: '#',
               },
             ],
           },
           {
             type: 'dropdown',
-            label: 'Identity & Access',
+            label: 'Privilege',
             position: 'left',
             items: [
               {
-                label: 'Access Information Center - 12.0',
-                to: '/docs/accessinformationcenter/12.0',
+                label: 'Product Name',
+                to: '#',
               },
               {
-                label: 'Access Information Center - 11.6',
-                to: '/docs/accessinformationcenter/11.6',
+                label: 'Product Name',
+                to: '#',
               },
               {
-                label: 'Group ID - 11.1',
-                to: '/docs/groupid/11.1',
+                label: 'Product Name',
+                to: '#',
               },
               {
-                label: 'Group ID - 11.0',
-                to: '/docs/groupid/11.0',
-              },
-              {
-                label: 'Password Policy Enforcer - 11.0',
-                to: '/docs/passwordpolicyenforcer/11.0',
-              },
-              {
-                label: 'Password Policy Enforcer - 10.2',
-                to: '/docs/passwordpolicyenforcer/10.2',
-              },
-              {
-                label: 'Password Reset - 3.3',
-                to: '/docs/passwordreset/3.3',
-              },
-              {
-                label: 'Password Reset - 3.23',
-                to: '/docs/passwordreset/3.23',
-              },
-              {
-                label: 'Password Secure - 9.2',
-                to: '/docs/passwordsecure/9.2',
-              },
-              {
-                label: 'Password Secure - 9.1',
-                to: '/docs/passwordsecure/9.1',
-              },
-              {
-                label: 'Privilege Secure - 4.2',
-                to: '/docs/privilegesecure/4.2',
-              },
-              {
-                label: 'Privilege Secure - 4.1',
-                to: '/docs/privilegesecure/4.1',
+                label: 'Product Name',
+                to: '#',
               },
             ],
           },
           {
             type: 'dropdown',
-            label: 'Compliance',
+            label: 'Directory',
             position: 'left',
             items: [
               {
-                label: 'Change Tracker - 8.1',
-                to: '/docs/changetracker/8.1',
+                label: 'Product Name',
+                to: '#',
               },
               {
-                label: 'Change Tracker - 8.0',
-                to: '/docs/changetracker/8.0',
+                label: 'Product Name',
+                to: '#',
               },
               {
-                label: 'StrongPoint for NetSuite',
-                to: '/docs/strongpointfornetsuite',
+                label: 'Product Name',
+                to: '#',
               },
               {
-                label: 'StrongPoint for Salesforce',
-                to: '/docs/strongpointforsalesforce',
-              },
-              {
-                label: 'StrongPoint NetSuite Flashlight',
-                to: '/docs/strongpointnetsuiteflashlight',
+                label: 'Product Name',
+                to: '#',
               },
+            ],
+          },
+          {
+            type: 'dropdown',
+            label: 'Endpoint',
+            position: 'left',
+            items: [
               {
-                label: 'StrongPoint Salesforce Flashlight',
-                to: '/docs/strongpointsalesforceflashlight',
+                label: 'Product Name',
+                to: '#',
               },
               {
-                label: 'Data Classification - 5.7',
-                to: '/docs/dataclassification/5.7',
+                label: 'Product Name',
+                to: '#',
               },
               {
-                label: 'Data Classification - 5.6.2',
-                to: '/docs/dataclassification/5.6.2',
+                label: 'Product Name',
+                to: '#',
               },
               {
-                label: 'Recovery for Active Directory - 2.6',
-                to: '/docs/recoveryforactivedirectory/2.6',
+                label: 'Product Name',
+                to: '#',
               },
             ],
           },
           {
             type: 'dropdown',
-            label: 'Endpoint',
+            label: 'DSPM',
             position: 'left',
             items: [
               {
-                label: 'Endpoint Protector - 5.9.4.2',
-                to: '/docs/endpointprotector/5.9.4.2',
+                label: 'Product Name',
+                to: '#',
               },
               {
-                label: 'Endpoint Protector - 5.9.4',
-                to: '/docs/endpointprotector/5.9.4',
+                label: 'Product Name',
+                to: '#',
               },
               {
-                label: 'PolicyPak',
-                to: '/docs/policypak',
+                label: 'Product Name',
+                to: '#',
               },
               {
-                label: 'Threat Prevention - 7.5',
-                to: '/docs/threatprevention/7.5',
+                label: 'Product Name',
+                to: '#',
               },
+            ],
+          },
+          {
+            type: 'dropdown',
+            label: 'ITDR',
+            position: 'left',
+            items: [
               {
-                label: 'Threat Prevention - 7.4',
-                to: '/docs/threatprevention/7.4',
+                label: 'Product Name',
+                to: '#',
               },
               {
-                label: 'UserCube - 6.2',
-                to: '/docs/usercube/6.2',
+                label: 'Product Name',
+                to: '#',
               },
               {
-                label: 'UserCube - 6.1',
-                to: '/docs/usercube/6.1',
+                label: 'Product Name',
+                to: '#',
               },
               {
-                label: 'UserCube SaaS',
-                to: '/docs/usercube_saas',
+                label: 'Product Name',
+                to: '#',
               },
             ],
           },
diff --git a/src/components/CommunityHighlights/styles.module.css b/src/components/CommunityHighlights/styles.module.css
index ecca1f84f8..f1a62b9801 100644
--- a/src/components/CommunityHighlights/styles.module.css
+++ b/src/components/CommunityHighlights/styles.module.css
@@ -42,7 +42,7 @@
 }
 
 .carouselContainer {
-  margin-bottom: 2rem;
+  margin-bottom: 3rem;
   position: relative;
 }
 
@@ -69,7 +69,8 @@
   display: flex;
   justify-content: center;
   gap: 0.5rem;
-  margin-top: 1rem;
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
 }
 
 .indicator {
diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js
index 55fb347622..65b9cd075f 100644
--- a/src/components/HomepageFeatures/index.js
+++ b/src/components/HomepageFeatures/index.js
@@ -38,191 +38,187 @@ const SECTION_TITLES = [
  */
 const ProductCategories = [
   {
-    title: 'Identity Management',
+    title: 'Identity',
     description: 'Comprehensive identity and user management solutions',
     icon: '👤',
     products: [
       {
-        name: 'UserCube',
-        description: 'User provisioning and management',
-        link: '/docs/usercube',
+        name: 'Access Analyzer',
+        description: 'Analyze and audit file system permissions',
+        link: '/docs/accessanalyzer/12.0',
+        versions: ['12.0', '11.6'],
+        displayType: 'badge'
       },
       {
-        name: 'UserCube SaaS',
-        description: 'Cloud-based user management',
-        link: '/docs/usercube_saas',
+        name: 'Access Information Center',
+        description: 'Centralized access information management',
+        link: '/docs/accessinformationcenter/12.0',
+        versions: ['12.0', '11.6'],
+        displayType: 'badge'
       },
       {
-        name: 'GroupID',
+        name: 'Group ID',
         description: 'Active Directory group management',
-        link: '/docs/groupid',
+        link: '/docs/groupid/11.1',
+        versions: ['11.1', '11.0'],
+        displayType: 'badge'
       },
       {
-        name: 'StrongPoint',
-        description: 'Platform governance and compliance',
-        link: '/docs/strongpointfornetsuite',
+        name: 'UserCube',
+        description: 'User provisioning and management',
+        link: '/docs/usercube/6.2',
+        versions: ['6.2', '6.1'],
+        displayType: 'badge'
       },
     ],
   },
   {
-    title: 'Privileged Access Management (PAM)',
+    title: 'Privilege',
     description: 'Control and monitor privileged access to critical systems',
     icon: '🔐',
     products: [
       {
-        name: 'Privilege Secure',
-        description: 'Privileged access management',
-        link: '/docs/privilegesecure',
+        name: 'Password Policy Enforcer',
+        description: 'Enforce strong password policies',
+        link: '/docs/passwordpolicyenforcer/11.0',
+        versions: ['11.0', '10.2'],
+        displayType: 'badge'
       },
       {
-        name: 'Endpoint Privilege Manager',
-        description: 'Endpoint privilege management',
-        link: '/docs/policypak',
+        name: 'Password Reset',
+        description: 'Self-service password reset solution',
+        link: '/docs/passwordreset/3.3',
+        versions: ['3.3', '3.23'],
+        displayType: 'badge'
       },
       {
         name: 'Password Secure',
         description: 'Secure password management',
-        link: '/docs/passwordsecure',
+        link: '/docs/passwordsecure/9.2',
+        versions: ['9.2', '9.1'],
+        displayType: 'badge'
+      },
+      {
+        name: 'Privilege Secure',
+        description: 'Privileged access management',
+        link: '/docs/privilegesecure/4.2',
+        versions: ['4.2', '4.1'],
+        displayType: 'badge'
       },
     ],
   },
   {
-    title: 'Directory Management',
+    title: 'Directory',
     description: 'Active Directory management and password policy enforcement',
     icon: '📁',
     products: [
+      {
+        name: 'Activity Monitor',
+        description: 'Track user activities across IT infrastructure',
+        link: '/docs/activitymonitor/8.0',
+        versions: ['8.0', '7.1'],
+        displayType: 'badge'
+      },
       {
         name: 'Auditor',
         description: 'Comprehensive IT infrastructure auditing',
-        link: '/docs/auditor',
+        link: '/docs/auditor/10.7',
+        versions: ['10.7', '10.6'],
+        displayType: 'badge'
       },
       {
-        name: 'GroupID',
-        description: 'Active Directory group management',
-        link: '/docs/groupid',
+        name: 'Recovery for Active Directory',
+        description: 'Active Directory backup and recovery',
+        link: '/docs/recoveryforactivedirectory/2.6',
       },
       {
-        name: 'Password Policy Enforcer',
-        description: 'Enforce strong password policies',
-        link: '/docs/passwordpolicyenforcer',
+        name: 'PolicyPak',
+        description: 'Group Policy management and enforcement',
+        link: '/docs/policypak',
       },
     ],
   },
   {
-    title: 'Endpoint Management',
+    title: 'Endpoint',
     description: 'Comprehensive endpoint protection and policy management',
     icon: '💻',
     products: [
       {
         name: 'Endpoint Protector',
         description: 'Comprehensive endpoint security',
-        link: '/docs/endpointprotector',
-      },
-      {
-        name: 'PolicyPak',
-        description: 'Group Policy management and enforcement',
-        link: '/docs/policypak',
+        link: '/docs/endpointprotector/5.9.4.2',
+        versions: ['5.9.4.2', '5.9.4'],
+        displayType: 'badge'
       },
       {
         name: 'Change Tracker',
         description: 'Real-time change monitoring and alerts',
-        link: '/docs/changetracker',
+        link: '/docs/changetracker/8.1',
+        versions: ['8.1', '8.0'],
+        displayType: 'badge'
+      },
+      {
+        name: 'UserCube SaaS',
+        description: 'Cloud-based user management',
+        link: '/docs/usercube_saas',
+      },
+      {
+        name: 'Product Name',
+        description: 'Product description placeholder',
+        link: '#',
       },
     ],
   },
   {
-    title: 'Data Security Posture Management (DSPM)',
+    title: 'DSPM',
     description: 'Protect and classify your organization\'s sensitive data',
     icon: '🛡️',
     products: [
       {
-        name: '1Secure',
-        description: 'Cloud-based security monitoring and compliance',
-        link: '/docs/1secure',
+        name: 'Data Classification',
+        description: 'Classify and protect sensitive data',
+        link: '/docs/dataclassification/5.7',
+        versions: ['5.7', '5.6.2'],
+        displayType: 'badge'
       },
       {
-        name: 'Auditor',
-        description: 'Comprehensive IT infrastructure auditing',
-        link: '/docs/auditor',
+        name: 'StrongPoint for NetSuite',
+        description: 'NetSuite change management and compliance',
+        link: '/docs/strongpointfornetsuite',
       },
       {
-        name: 'Access Analyzer',
-        description: 'Analyze and audit file system permissions',
-        link: '/docs/accessanalyzer',
+        name: 'StrongPoint for Salesforce',
+        description: 'Salesforce change management platform',
+        link: '/docs/strongpointforsalesforce',
       },
       {
-        name: 'Data Classification',
-        description: 'Classify and protect sensitive data',
-        link: '/docs/dataclassification',
+        name: 'StrongPoint NetSuite Flashlight',
+        description: 'Lightweight NetSuite documentation and analysis',
+        link: '/docs/strongpointnetsuiteflashlight',
       },
     ],
   },
   {
-    title: 'Identity Threat Detection & Response (ITDR)',
+    title: 'ITDR',
     description: 'Advanced threat detection and incident response capabilities',
     icon: '🚨',
     products: [
-      {
-        name: 'PingCastle',
-        description: 'Active Directory security assessment',
-        link: '/docs/pingcastle',
-      },
-      {
-        name: 'Access Analyzer',
-        description: 'Analyze and audit file system permissions',
-        link: '/docs/accessanalyzer',
-      },
-      {
-        name: 'Threat Manager',
-        description: 'Advanced threat detection and response',
-        link: '/docs/threatmanager',
-      },
       {
         name: 'Threat Prevention',
         description: 'Proactive threat prevention',
-        link: '/docs/threatprevention',
+        link: '/docs/threatprevention/7.5',
+        versions: ['7.5', '7.4'],
+        displayType: 'badge'
       },
       {
-        name: 'Recovery for Active Directory',
-        description: 'Active Directory backup and recovery',
-        link: '/docs/recoveryforactivedirectory',
-      },
-    ],
-  },
-  {
-    title: 'Other',
-    description: 'Additional security and management tools',
-    icon: '🔧',
-    products: [
-      {
-        name: 'Access Information Center',
-        description: 'Centralized access information management',
-        link: '/docs/accessinformationcenter',
-      },
-      {
-        name: 'Activity Monitor',
-        description: 'Track user activities across IT infrastructure',
-        link: '/docs/activitymonitor',
-      },
-      {
-        name: 'Password Reset',
-        description: 'Self-service password reset solution',
-        link: '/docs/passwordreset',
-      },
-      {
-        name: 'StrongPoint for NetSuite',
-        description: 'NetSuite change management and compliance',
-        link: '/docs/strongpointfornetsuite',
-      },
-      {
-        name: 'StrongPoint for Salesforce',
-        description: 'Salesforce change management platform',
-        link: '/docs/strongpointforsalesforce',
+        name: 'Threat Manager',
+        description: 'Advanced threat detection and response',
+        link: '/docs/threatmanager/3.0',
       },
       {
-        name: 'StrongPoint NetSuite Flashlight',
-        description: 'Lightweight NetSuite documentation and analysis',
-        link: '/docs/strongpointnetsuiteflashlight',
+        name: '1Secure',
+        description: 'Cloud-based security monitoring and compliance',
+        link: '/docs/1secure',
       },
       {
         name: 'StrongPoint Salesforce Flashlight',
@@ -233,6 +229,113 @@ const ProductCategories = [
   },
 ];
 
+/**
+ * Renders a product card with version display based on displayType
+ */
+function ProductCard({ product, idx }) {
+  const hasVersions = product.versions && product.versions.length > 0;
+  
+  if (!hasVersions) {
+    // Standard product card without versions
+    return (
+      <Link key={idx} to={product.link} className={styles.productCard}>
+        <h4 className={styles.productName}>{product.name}</h4>
+        <p className={styles.productDescription}>{product.description}</p>
+        <span className={styles.learnMore}>Learn more →</span>
+      </Link>
+    );
+  }
+
+  const renderVersionDisplay = () => {
+    switch (product.displayType) {
+      case 'diagonal':
+        return (
+          <div className={styles.versionDiagonal}>
+            <div className={styles.versionTop}>{product.versions[0]}</div>
+            <div className={styles.versionBottom}>{product.versions[1]}</div>
+          </div>
+        );
+      
+      case 'stacked':
+        return (
+          <div className={styles.versionStacked}>
+            {product.versions.map((version, i) => (
+              <div key={i} className={styles.versionStackedItem}>v{version}</div>
+            ))}
+          </div>
+        );
+      
+      case 'badge':
+        return (
+          <div className={styles.versionBadges}>
+            {product.versions.map((version, i) => (
+              <span key={i} className={styles.versionBadge}>v{version}</span>
+            ))}
+          </div>
+        );
+      
+      case 'badge-classic':
+        return (
+          <div className={styles.versionBadgesClassic}>
+            {product.versions.map((version, i) => (
+              <span key={i} className={styles.versionBadgeClassic}>v{version}</span>
+            ))}
+          </div>
+        );
+      
+      case 'badge-modern':
+        return (
+          <div className={styles.versionBadgesModern}>
+            {product.versions.map((version, i) => (
+              <span key={i} className={styles.versionBadgeModern}>v{version}</span>
+            ))}
+          </div>
+        );
+      
+      case 'badge-minimal':
+        return (
+          <div className={styles.versionBadgesMinimal}>
+            {product.versions.map((version, i) => (
+              <span key={i} className={styles.versionBadgeMinimal}>{version}</span>
+            ))}
+          </div>
+        );
+      
+      case 'badge-gradient':
+        return (
+          <div className={styles.versionBadgesGradient}>
+            {product.versions.map((version, i) => (
+              <span key={i} className={styles.versionBadgeGradient}>v{version}</span>
+            ))}
+          </div>
+        );
+      
+      case 'tabs':
+        return (
+          <div className={styles.versionTabs}>
+            {product.versions.map((version, i) => (
+              <div key={i} className={styles.versionTab}>v{version}</div>
+            ))}
+          </div>
+        );
+      
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Link key={idx} to={product.link} className={clsx(styles.productCard, styles[`productCard--${product.displayType}`])}>
+      {renderVersionDisplay()}
+      <div className={styles.productContent}>
+        <h4 className={styles.productName}>{product.name}</h4>
+        <p className={styles.productDescription}>{product.description}</p>
+        <span className={styles.learnMore}>Learn more →</span>
+      </div>
+    </Link>
+  );
+}
+
 /**
  * Renders a single product category with its products
  * Displays category info and a grid of product cards
@@ -251,11 +354,7 @@ function ProductCategory({ title, description, icon, products }) {
       </div>
       <div className={styles.productsGrid}>
         {products.map((product, idx) => (
-          <Link key={idx} to={product.link} className={styles.productCard}>
-            <h4 className={styles.productName}>{product.name}</h4>
-            <p className={styles.productDescription}>{product.description}</p>
-            <span className={styles.learnMore}>Learn more →</span>
-          </Link>
+          <ProductCard key={idx} product={product} idx={idx} />
         ))}
       </div>
     </div>
diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css
index 0c8f2552d7..30a54a4337 100644
--- a/src/components/HomepageFeatures/styles.module.css
+++ b/src/components/HomepageFeatures/styles.module.css
@@ -172,6 +172,283 @@
   }
 }
 
+/* Version Display Styles */
+
+/* Common styles for versioned product cards */
+.productCard--diagonal,
+.productCard--stacked,
+.productCard--badge,
+.productCard--tabs,
+.productCard--badge-classic,
+.productCard--badge-modern,
+.productCard--badge-minimal,
+.productCard--badge-gradient {
+  position: relative;
+  overflow: hidden;
+}
+
+.productContent {
+  position: relative;
+  z-index: 2;
+}
+
+/* Add spacing for version badges to prevent overlap with bottom badges */
+.productCard--badge .productContent {
+  margin-bottom: 8px;
+}
+
+/* Diagonal Split Design */
+.versionDiagonal {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 80px;
+  height: 80px;
+  overflow: hidden;
+}
+
+.versionTop {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: var(--ifm-color-primary);
+  color: white;
+  padding: 4px 8px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border-radius: 4px;
+  transform: rotate(45deg);
+  transform-origin: center;
+  white-space: nowrap;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.versionBottom {
+  position: absolute;
+  bottom: 8px;
+  left: 8px;
+  background: var(--ifm-color-secondary);
+  color: white;
+  padding: 4px 8px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border-radius: 4px;
+  transform: rotate(45deg);
+  transform-origin: center;
+  white-space: nowrap;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Stacked Design */
+.versionStacked {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.versionStackedItem {
+  background: linear-gradient(135deg, var(--ifm-color-primary), var(--ifm-color-primary-dark));
+  color: white;
+  padding: 4px 8px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border-radius: 6px;
+  text-align: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  min-width: 40px;
+}
+
+.versionStackedItem:nth-child(2) {
+  background: linear-gradient(135deg, var(--ifm-color-secondary), var(--ifm-color-secondary-dark));
+}
+
+/* Badge Design */
+.versionBadges {
+  position: absolute;
+  bottom: 12px;
+  right: 12px;
+  display: flex;
+  gap: 6px;
+  z-index: 10;
+}
+
+.versionBadge {
+  background: var(--ifm-color-primary);
+  color: white;
+  padding: 4px 8px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  border-radius: 12px;
+  border: 2px solid white;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
+
+.versionBadge:nth-child(2) {
+  background: var(--ifm-color-secondary);
+}
+
+/* Badge Classic Design - Round badges with border */
+.versionBadgesClassic {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  display: flex;
+  gap: 8px;
+}
+
+.versionBadgeClassic {
+  background: var(--ifm-color-primary);
+  color: white;
+  padding: 6px 12px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  border-radius: 20px;
+  border: 3px solid white;
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.versionBadgeClassic:nth-child(2) {
+  background: var(--ifm-color-success);
+}
+
+/* Badge Modern Design - Sleek rectangular badges */
+.versionBadgesModern {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  display: flex;
+  gap: 4px;
+}
+
+.versionBadgeModern {
+  background: rgba(var(--ifm-color-primary-rgb), 0.9);
+  color: white;
+  padding: 4px 10px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  border-radius: 6px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.versionBadgeModern:nth-child(2) {
+  background: rgba(var(--ifm-color-info-rgb), 0.9);
+}
+
+/* Badge Minimal Design - Simple text badges */
+.versionBadgesMinimal {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  display: flex;
+  gap: 6px;
+}
+
+.versionBadgeMinimal {
+  background: rgba(var(--ifm-color-emphasis-200), 0.8);
+  color: var(--ifm-color-emphasis-800);
+  padding: 3px 8px;
+  font-size: 0.65rem;
+  font-weight: 600;
+  border-radius: 4px;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  font-family: var(--ifm-font-family-monospace);
+}
+
+.versionBadgeMinimal:nth-child(2) {
+  background: rgba(var(--ifm-color-emphasis-300), 0.8);
+}
+
+/* Badge Gradient Design - Colorful gradient badges */
+.versionBadgesGradient {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  display: flex;
+  gap: 6px;
+}
+
+.versionBadgeGradient {
+  background: linear-gradient(135deg, var(--ifm-color-primary), var(--ifm-color-secondary));
+  color: white;
+  padding: 5px 10px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  border-radius: 15px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  position: relative;
+  overflow: hidden;
+}
+
+.versionBadgeGradient:nth-child(2) {
+  background: linear-gradient(135deg, var(--ifm-color-info), var(--ifm-color-success));
+}
+
+.versionBadgeGradient::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  transition: left 0.5s ease;
+}
+
+.versionBadgeGradient:hover::before {
+  left: 100%;
+}
+
+/* Tabs Design */
+.versionTabs {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+}
+
+.versionTab {
+  flex: 1;
+  background: var(--ifm-color-primary);
+  color: white;
+  padding: 8px 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-align: center;
+  border-bottom: 3px solid var(--ifm-color-primary-dark);
+}
+
+.versionTab:nth-child(2) {
+  background: var(--ifm-color-secondary);
+  border-bottom-color: var(--ifm-color-secondary-dark);
+}
+
+.versionTab:first-child {
+  border-top-left-radius: 12px;
+}
+
+.versionTab:last-child {
+  border-top-right-radius: 12px;
+}
+
+/* Adjust content padding for tabbed design */
+.productCard--tabs .productContent {
+  padding-top: 1rem;
+}
+
+/* Dark mode adjustments */
+[data-theme='dark'] .versionBadge {
+  border-color: var(--ifm-color-emphasis-300);
+}
+
 @media screen and (max-width: 768px) {
   .categoriesContainer {
     gap: 2rem;
@@ -184,4 +461,32 @@
   .sectionHeader {
     margin-bottom: 2.5rem;
   }
+
+  /* Make version displays smaller on mobile */
+  .versionDiagonal {
+    width: 60px;
+    height: 60px;
+  }
+  
+  .versionTop,
+  .versionBottom {
+    font-size: 0.65rem;
+    padding: 3px 6px;
+  }
+  
+  .versionStackedItem,
+  .versionBadge,
+  .versionTab,
+  .versionBadgeClassic,
+  .versionBadgeModern,
+  .versionBadgeMinimal,
+  .versionBadgeGradient {
+    font-size: 0.65rem;
+    padding: 3px 6px;
+  }
+  
+  .versionBadgeClassic {
+    padding: 4px 8px;
+    border-width: 2px;
+  }
 }