diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3a2ad11e..a7410b16 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -58,6 +58,12 @@ export default function RootLayout({
       <body
         className={`${inter.className} antialiased bg-background text-foreground transition-colors duration-500`}
       >
+        <a
+          href="#main-content"
+          className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[1000] focus:bg-primary focus:text-white focus:px-4 focus:py-2 focus:rounded-md focus:shadow-lg focus:outline-none"
+        >
+          Skip to content
+        </a>
         <Providers>
           {children}
           <ScrollToTopButton />
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 78c14c57..43f35735 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -43,8 +43,12 @@ const Home = () => {
     <div className="flex flex-col min-h-screen">
       <Banner />
       <MainHeader />
-      <Intro />
-      <main className="flex-grow">
+      <main
+        id="main-content"
+        tabIndex={-1}
+        className="flex-grow outline-none focus:ring-0"
+      >
+        <Intro />
         <div className="space-y-0">
           <SkillsSection />
           <CertificationsSection />