diff --git a/src/app/club/page.tsx b/src/app/club/page.tsx
index 09efa1e..865c40e 100644
--- a/src/app/club/page.tsx
+++ b/src/app/club/page.tsx
@@ -4,10 +4,7 @@ import Link from 'next/link'
 import clsx from 'clsx'
 
 import { Container } from '@/components/Container'
-import {
-  InstagramIcon,
-  TwitterIcon,
-} from '@/components/SocialIcons'
+import { UserPlusIcon, GiftIcon, EnvelopeIcon } from '@heroicons/react/24/solid'
 import portraitImage from '@/images/portrait.jpg'
 
 function SocialLink({
@@ -34,17 +31,6 @@ function SocialLink({
   )
 }
 
-function MailIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
-      <path
-        fillRule="evenodd"
-        d="M6 5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3H6Zm.245 2.187a.75.75 0 0 0-.99 1.126l6.25 5.5a.75.75 0 0 0 .99 0l6.25-5.5a.75.75 0 0 0-.99-1.126L12 12.251 6.245 7.187Z"
-      />
-    </svg>
-  )
-}
-
 export const metadata: Metadata = {
   title: 'History',
   description:
@@ -80,15 +66,15 @@ export default function Club() {
         </div>
         <div className="lg:pl-20">
           <ul role="list">
-            <SocialLink href="#" icon={TwitterIcon}>
+            <SocialLink href="#" icon={UserPlusIcon}>
               Membership Form
             </SocialLink>
-            <SocialLink href="#" icon={InstagramIcon} className="mt-4">
+            <SocialLink href="#" icon={GiftIcon} className="mt-4">
               Donations
             </SocialLink>
             <SocialLink
               href="mailto:contact@westsoundhall.org"
-              icon={MailIcon}
+              icon={EnvelopeIcon}
               className="mt-8 border-t border-zinc-100 pt-8 dark:border-zinc-700/40"
             >
               contact@westsoundhall.org
diff --git a/src/app/hall-history/page.tsx b/src/app/hall-history/page.tsx
index cf47a6b..e061fd2 100644
--- a/src/app/hall-history/page.tsx
+++ b/src/app/hall-history/page.tsx
@@ -5,13 +5,8 @@ import clsx from 'clsx'
 import { Card } from '@/components/Card'
 
 import { Container } from '@/components/Container'
-import {
-  GitHubIcon,
-  InstagramIcon,
-  LinkedInIcon,
-  TwitterIcon,
-} from '@/components/SocialIcons'
 import portraitImage from '@/images/portrait.jpg'
+import { EnvelopeIcon } from '@heroicons/react/24/solid'
 
 function SocialLink({
   className,
@@ -37,17 +32,6 @@ function SocialLink({
   )
 }
 
-function MailIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
-      <path
-        fillRule="evenodd"
-        d="M6 5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3H6Zm.245 2.187a.75.75 0 0 0-.99 1.126l6.25 5.5a.75.75 0 0 0 .99 0l6.25-5.5a.75.75 0 0 0-.99-1.126L12 12.251 6.245 7.187Z"
-      />
-    </svg>
-  )
-}
-
 function TimelineEntry({
   title,
   description,
@@ -274,22 +258,9 @@ export default function About() {
         </div>
         <div className="lg:pl-20">
           <ul role="list">
-            <SocialLink href="#" icon={TwitterIcon}>
-              Follow on Twitter
-            </SocialLink>
-            <SocialLink href="#" icon={InstagramIcon} className="mt-4">
-              Follow on Instagram
-            </SocialLink>
-            <SocialLink href="#" icon={GitHubIcon} className="mt-4">
-              Follow on GitHub
-            </SocialLink>
-            <SocialLink href="#" icon={LinkedInIcon} className="mt-4">
-              Follow on LinkedIn
-            </SocialLink>
             <SocialLink
               href="mailto:contact@westsoundhall.org"
-              icon={MailIcon}
-              className="mt-8 border-t border-zinc-100 pt-8 dark:border-zinc-700/40"
+              icon={EnvelopeIcon}
             >
               contact@westsoundhall.org
             </SocialLink>
diff --git a/src/app/rental/page.tsx b/src/app/rental/page.tsx
index 1dfd405..07687e0 100644
--- a/src/app/rental/page.tsx
+++ b/src/app/rental/page.tsx
@@ -4,13 +4,8 @@ import Link from 'next/link'
 import clsx from 'clsx'
 
 import { Container } from '@/components/Container'
-import {
-  GitHubIcon,
-  InstagramIcon,
-  LinkedInIcon,
-  TwitterIcon,
-} from '@/components/SocialIcons'
 import portraitImage from '@/images/portrait.jpg'
+import { EnvelopeIcon, HomeIcon, QuestionMarkCircleIcon } from '@heroicons/react/24/solid'
 
 function SocialLink({
   className,
@@ -36,17 +31,6 @@ function SocialLink({
   )
 }
 
-function MailIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
-      <path
-        fillRule="evenodd"
-        d="M6 5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3H6Zm.245 2.187a.75.75 0 0 0-.99 1.126l6.25 5.5a.75.75 0 0 0 .99 0l6.25-5.5a.75.75 0 0 0-.99-1.126L12 12.251 6.245 7.187Z"
-      />
-    </svg>
-  )
-}
-
 export const metadata: Metadata = {
   title: 'History',
   description:
@@ -98,15 +82,15 @@ export default function Rental() {
         </div>
         <div className="lg:pl-20">
           <ul role="list">
-            <SocialLink href="#" icon={TwitterIcon}>
+            <SocialLink href="#" icon={HomeIcon}>
               Rental Application Form
             </SocialLink>
-            <SocialLink href="#" icon={InstagramIcon} className="mt-4">
+            <SocialLink href="#" icon={QuestionMarkCircleIcon} className="mt-4">
               Rental Q&A
             </SocialLink>
             <SocialLink
               href="mailto:contact@westsoundhall.org"
-              icon={MailIcon}
+              icon={EnvelopeIcon}
               className="mt-8 border-t border-zinc-100 pt-8 dark:border-zinc-700/40"
             >
               contact@westsoundhall.org
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index def56b6..49b9dde 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -7,39 +7,11 @@ import { usePathname } from 'next/navigation'
 import { useTheme } from 'next-themes'
 import { Popover, Transition } from '@headlessui/react'
 import clsx from 'clsx'
+import { XMarkIcon, ChevronDownIcon } from '@heroicons/react/24/solid'
 
 import { Container } from '@/components/Container'
 import avatarImage from '@/images/avatar.jpg'
 
-function CloseIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
-      <path
-        d="m17.25 6.75-10.5 10.5M6.75 6.75l10.5 10.5"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}
-
-function ChevronDownIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 8 6" aria-hidden="true" {...props}>
-      <path
-        d="M1.75 1.75 4 4.25l2.25-2.5"
-        fill="none"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}
-
 function SunIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
   return (
     <svg
@@ -124,7 +96,7 @@ function MobileNavigation(
           >
             <div className="flex flex-row-reverse items-center justify-between">
               <Popover.Button aria-label="Close menu" className="-m-1 p-1">
-                <CloseIcon className="h-6 w-6 text-zinc-500 dark:text-zinc-400" />
+                <XMarkIcon className="h-6 w-6 text-zinc-500 dark:text-zinc-400" />
               </Popover.Button>
               <h2 className="text-sm font-medium text-zinc-600 dark:text-zinc-400">
                 Navigation