diff --git a/src/app/page.tsx b/src/app/page.tsx
index c482f1f..e682c6a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,24 +5,31 @@ export default async function Page() {
   const products = await Products();
 
   return (
-    <div className="flex w-full flex-col items-center max-w-[100vw] md:max-w-7xl ">
-      <section className="flex flex-col gap-y-24 md:pt-24">
+    <div className="flex w-full flex-col items-center max-w-[100vw] md:max-w-7xl">
+      <section
+        className="flex flex-col gap-y-24 md:pt-24"
+        aria-labelledby="hero-heading"
+      >
         <div className="flex w-full flex-col items-center gap-24 md:pb-16">
           <div className="relative z-20 flex w-full flex-col items-center gap-y-12 text-center">
             <a
               href="https://www.producthunt.com/posts/polar-5?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-polar&#0045;5"
               target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Polar on Product Hunt"
             >
               <img
                 src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=484271&theme=dark"
-                alt="Polar - An&#0032;open&#0032;source&#0032;monetization&#0032;platform&#0032;for&#0032;developers | Product Hunt"
-                style={{ width: "250px", height: "54px" }}
+                alt="Polar - An open source monetization platform for developers | Product Hunt"
                 width="250"
                 height="54"
               />
             </a>
             <div className="z-20 flex flex-col items-center gap-y-8">
-              <h1 className="text-balance text-5xl !leading-tight text-gray-950 md:text-7xl dark:text-white">
+              <h1
+                id="hero-heading"
+                className="text-balance text-5xl !leading-tight text-gray-950 md:text-7xl dark:text-white"
+              >
                 Next.js Polar starter kit
               </h1>
               <div className="flex flex-col items-center gap-y-4 xl:w-2/3">
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index d7e95cb..10d2e72 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -5,7 +5,7 @@ import { twMerge } from "tailwind-merge";
 
 const Footer = () => {
   return (
-    <div
+    <footer
       className={twMerge(
         "dark:border-polar-800 dark:bg-polar-950 border-gray-75 flex w-full flex-col items-center space-y-24 border-t bg-white py-24 md:py-32 max-w-7xl"
       )}
@@ -23,7 +23,7 @@ const Footer = () => {
             &copy; Polar Software Inc. {new Date().getFullYear()}
           </span>
         </div>
-        <div
+        <nav
           className={twMerge(
             "flex flex-col gap-y-12 md:flex-row",
             "gap-x-24 lg:gap-x-32"
@@ -87,9 +87,9 @@ const Footer = () => {
               <FooterLink href="mailto:support@polar.sh">Contact</FooterLink>
             </div>
           </div>
-        </div>
+        </nav>
       </div>
-    </div>
+    </footer>
   );
 };
 
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index a0e8dc7..164ba69 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 
 export const Header = () => {
   return (
-    <div className="w-full max-w-[100vw]  px-4  md:max-w-7xl md:px-12  dark:bg-blac py-4 md:py-8 sticky top-0 z-30 dark:bg-[#0B0C0E] bg-white flex flex-row items-center justify-between bg-transparent">
+    <header className="w-full max-w-[100vw] px-4 md:max-w-7xl md:px-12 dark:bg-blac py-4 md:py-8 sticky top-0 z-30 dark:bg-[#0B0C0E] bg-white flex flex-row items-center justify-between bg-transparent">
       <TopbarNavigation />
       <BrandingMenu
         className="mt-1 hidden md:block"
@@ -22,13 +22,16 @@ export const Header = () => {
           </button>
         </Link>
       </div>
-    </div>
+    </header>
   );
 };
 
 const TopbarNavigation = () => {
   return (
-    <nav className="absolute left-1/2 hidden -translate-x-1/2 flex-row items-center gap-x-4 text-sm md:flex">
+    <nav
+      className="absolute left-1/2 hidden -translate-x-1/2 flex-row items-center gap-x-4 text-sm md:flex"
+      aria-label="Main navigation"
+    >
       <Link
         className="dark:hover:bg-polar-800 rounded-full px-4 py-2 hover:bg-gray-100"
         href="/#pricing"
diff --git a/src/components/Pricing.tsx b/src/components/Pricing.tsx
index c1b0b09..f2f0f9e 100644
--- a/src/components/Pricing.tsx
+++ b/src/components/Pricing.tsx
@@ -7,11 +7,23 @@ export function Pricing({ products }: { products: PricingData[] }) {
   const [isAnnual, setIsAnnual] = useState(false);
 
   return (
-    <div className="container mx-auto px-4">
-      <h1 className="text-3xl font-bold text-center mb-8">Pricing</h1>
+    <section
+      className="container mx-auto px-4"
+      aria-labelledby="pricing-heading"
+    >
+      <h2 id="pricing-heading" className="text-3xl font-bold text-center mb-8">
+        Pricing
+      </h2>
       <div className="flex justify-center mb-8">
-        <div className="inline-flex rounded-md shadow-sm" role="group">
+        <fieldset
+          className="inline-flex rounded-md shadow-sm"
+          role="radiogroup"
+          aria-label="Billing frequency"
+        >
+          <legend className="sr-only">Choose billing frequency</legend>
           <button
+            role="radio"
+            aria-checked={!isAnnual}
             className={`inline-flex items-center justify-center whitespace-nowrap rounded-l-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 px-4 py-1.5 ${
               isAnnual
                 ? "bg-white text-blue-500 border border-blue-500"
@@ -22,6 +34,8 @@ export function Pricing({ products }: { products: PricingData[] }) {
             Monthly
           </button>
           <button
+            role="radio"
+            aria-checked={isAnnual}
             className={`inline-flex items-center justify-center whitespace-nowrap rounded-r-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 px-4 py-1.5 ${
               isAnnual
                 ? "bg-blue-500 text-white"
@@ -31,7 +45,7 @@ export function Pricing({ products }: { products: PricingData[] }) {
           >
             Annual
           </button>
-        </div>
+        </fieldset>
       </div>
       <div className="flex flex-col md:flex-row gap-8 w-full mx-auto">
         {products.map((plan) => (
@@ -40,7 +54,7 @@ export function Pricing({ products }: { products: PricingData[] }) {
           </div>
         ))}
       </div>
-    </div>
+    </section>
   );
 }
 
@@ -65,11 +79,8 @@ function PriceComponent({
   const currencySymbol = currency === "EUR" ? "€" : "$";
 
   return (
-    <div className="flex h-full flex-col">
-      <div
-        className="border bg-white text-gray-950 shadow-none dark:text-white dark:bg-polar-900 rounded-4xl relative flex flex-col gap-y-6 overflow-hidden border-none hover:bg-gray-50 p-8 min-h-[400px] h-full"
-        id={id}
-      >
+    <article className="flex h-full flex-col" aria-labelledby={`plan-${id}`}>
+      <div className="border bg-white text-gray-950 shadow-none dark:text-white dark:bg-polar-900 rounded-4xl relative flex flex-col gap-y-6 overflow-hidden border-none hover:bg-gray-50 p-8 min-h-[400px] h-full">
         <div className="flex flex-col space-y-1.5 grow gap-y-6 p-0">
           <div className="flex flex-col gap-y-4">
             <div className="flex flex-row items-center justify-between">
@@ -78,12 +89,21 @@ function PriceComponent({
               </span>
             </div>
             <div className="flex justify-between">
-              <h3 className="truncate font-medium text-lg">{title}</h3>
+              <h3 id={`plan-${id}`} className="truncate font-medium text-lg">
+                {title}
+              </h3>
             </div>
           </div>
           <div className="flex flex-col gap-y-8 text-[--var-fg-color] dark:text-[--var-dark-fg-color]">
-            <div className="text-5xl !font-[200]">
-              {price !== "Custom" ? `${currencySymbol}${price}` : price}
+            <div
+              className="text-5xl !font-[200]"
+              aria-label={`Price: ${
+                price !== "Custom"
+                  ? `${currencySymbol}${price}${period}`
+                  : price
+              }`}
+            >
+              {price !== "Custom" ? `${currencySymbol} ${price}` : price}
               <span className="dark:text-polar-500 ml-2 text-xl font-normal text-gray-500">
                 {price !== "Custom" ? period : ""}
               </span>
@@ -93,26 +113,25 @@ function PriceComponent({
             </div>
           </div>
         </div>
-        <div
-          data-orientation="horizontal"
-          role="none"
-          className="shrink-0 h-[1px] w-full dark:bg-polar-700 bg-gray-200"
-        ></div>
-        <div className="flex h-full grow flex-col gap-y-2 p-0">
+        <hr className="shrink-0 h-[1px] w-full dark:bg-polar-700 bg-gray-200" />
+        <ul className="flex h-full grow flex-col gap-y-2 p-0 list-none">
           {features.map((feature, index) => (
-            <div
+            <li
               key={index}
               className="flex flex-row items-start text-[--var-fg-color] dark:text-[--var-dark-fg-color]"
             >
-              <span className="flex h-6 w-6 shrink-0 flex-row items-center justify-center rounded-full bg-[--var-border-color] text-[14px] dark:bg-[--var-dark-border-color]">
+              <span
+                className="flex h-6 w-6 shrink-0 flex-row items-center justify-center rounded-full bg-[--var-border-color] text-[14px] dark:bg-[--var-dark-border-color]"
+                aria-hidden="true"
+              >
                 <CheckIcon />
               </span>
               <span className="ml-3 text-sm leading-relaxed">{feature}</span>
-            </div>
+            </li>
           ))}
-        </div>
+        </ul>
       </div>
-    </div>
+    </article>
   );
 }
 
@@ -129,6 +148,7 @@ const CheckIcon = () => {
       strokeLinecap="round"
       strokeLinejoin="round"
       className="lucide lucide-check"
+      aria-hidden="true"
     >
       <path d="M20 6 9 17l-5-5" />
     </svg>