diff --git a/components/CTASection.tsx b/components/CTASection.tsx
index b604dbb..58c712c 100644
--- a/components/CTASection.tsx
+++ b/components/CTASection.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ArrowRight, CheckCircle } from 'lucide-react';
+import { ArrowRight, CheckCircle, Slack } from 'lucide-react';
 
 const CTASection: React.FC = () => {
   const benefits = [
@@ -49,7 +49,9 @@ const CTASection: React.FC = () => {
                 target="_blank" 
                 rel="noopener noreferrer"
                 className="border-2 border-surface-50 text-surface-50 hover:bg-surface-50 hover:text-primary-600 dark:border-surface-200 dark:text-surface-200 dark:hover:bg-surface-200 dark:hover:text-primary-700 font-semibold py-4 px-8 rounded-lg transition-colors duration-200 inline-flex items-center justify-center gap-2 text-lg"
+                aria-label="Join our Slack community"
               >
+                <Slack className="h-5 w-5" aria-hidden="true" />
                 Join Community
               </a>
             </div>
diff --git a/components/HeroSection.tsx b/components/HeroSection.tsx
index 8250c19..cfad61a 100644
--- a/components/HeroSection.tsx
+++ b/components/HeroSection.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ArrowRight, Play } from 'lucide-react';
+import { ArrowRight, Play, Slack } from 'lucide-react';
 
 const HeroSection: React.FC = () => {
   return (
@@ -38,7 +38,9 @@ const HeroSection: React.FC = () => {
                 target="_blank"
                 rel="noopener noreferrer"
                 className="btn-secondary text-lg px-8 py-4 inline-flex items-center gap-2"
+                aria-label="Join our Slack community"
               >
+                <Slack className="h-5 w-5" aria-hidden="true" />
                 Join Slack Community
               </a>
             </div>
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 4bde574..8d11a78 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import Link from "next/link";
-import { Menu, X } from "lucide-react";
+import { Menu, X, Slack } from "lucide-react";
 import Logo from "./Logo";
 import ThemeToggle from "./ThemeToggle";
 import GitHubStarButton from "./GitHubStarsButton";
@@ -67,12 +67,14 @@ const Navbar: React.FC = () => {
             <GitHubStarButton />
             <Link
               href={slackLink.href}
-              className="text-surface-700 dark:text-surface-300 hover:text-primary-500 dark:hover:text-primary-400 font-medium transition-colors duration-200"
+              className="text-surface-700 dark:text-surface-300 hover:text-primary-500 dark:hover:text-primary-400 font-medium transition-colors duration-200 inline-flex items-center gap-2"
               {...(slackLink.external && {
                 target: "_blank",
                 rel: "noopener noreferrer",
               })}
+              aria-label="Join our Slack community"
             >
+              <Slack size={18} aria-hidden="true" />
               {slackLink.name}
             </Link>
              {/* Contact Us button */}