diff --git a/public/fonts/inter-tight-v7-latin-700.woff2 b/public/fonts/inter-tight-v7-latin-700.woff2
new file mode 100644
index 0000000..ba0b293
Binary files /dev/null and b/public/fonts/inter-tight-v7-latin-700.woff2 differ
diff --git a/src/components/app/app.tsx b/src/components/app/app.tsx
index 7842dcc..0658c57 100644
--- a/src/components/app/app.tsx
+++ b/src/components/app/app.tsx
@@ -9,7 +9,6 @@ import { StoreConsumer } from '@/components/store-consumer';
 import { Buttons } from '@/components/buttons';
 import { Categories } from '@/components/categories';
 import { ScrollToTop } from '@/components/scroll-to-top';
-// import { Shuffle } from '@/components/shuffle';
 import { Menu } from '@/components/menu/menu';
 import { SnackbarProvider } from '@/contexts/snackbar';
 
@@ -62,7 +61,6 @@ export function App() {
 
         <ScrollToTop />
         <Menu />
-        {/* <Shuffle /> */}
       </StoreConsumer>
     </SnackbarProvider>
   );
diff --git a/src/components/menu/buttons/button.tsx b/src/components/menu/buttons/button.tsx
new file mode 100644
index 0000000..14a491e
--- /dev/null
+++ b/src/components/menu/buttons/button.tsx
@@ -0,0 +1,14 @@
+import styles from '../menu.module.css';
+
+interface ButtonProps {
+  children: React.ReactNode;
+  onClick: () => void;
+}
+
+export function Button({ children, onClick }: ButtonProps) {
+  return (
+    <button className={styles.menuItem} onClick={onClick}>
+      {children}
+    </button>
+  );
+}
diff --git a/src/components/menu/buttons/index.ts b/src/components/menu/buttons/index.ts
new file mode 100644
index 0000000..81f5f91
--- /dev/null
+++ b/src/components/menu/buttons/index.ts
@@ -0,0 +1,2 @@
+export { ShuffleButton } from './shuffle';
+export { ShareButton } from './share';
diff --git a/src/components/menu/buttons/share.tsx b/src/components/menu/buttons/share.tsx
new file mode 100644
index 0000000..680ec5e
--- /dev/null
+++ b/src/components/menu/buttons/share.tsx
@@ -0,0 +1,23 @@
+import { useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import { Modal } from '@/components/modal';
+
+import { Button } from './button';
+
+export function ShareButton() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setIsModalOpen(true)}>Share Sounds</Button>
+
+      {createPortal(
+        <Modal show={isModalOpen} onClose={() => setIsModalOpen(false)}>
+          <h1>Share Sounds!</h1>
+        </Modal>,
+        document.body,
+      )}
+    </>
+  );
+}
diff --git a/src/components/menu/buttons/shuffle.tsx b/src/components/menu/buttons/shuffle.tsx
new file mode 100644
index 0000000..4e84f9e
--- /dev/null
+++ b/src/components/menu/buttons/shuffle.tsx
@@ -0,0 +1,9 @@
+import { useSoundStore } from '@/store';
+
+import { Button } from './button';
+
+export function ShuffleButton() {
+  const shuffle = useSoundStore(state => state.shuffle);
+
+  return <Button onClick={shuffle}>Shuffle Sounds</Button>;
+}
diff --git a/src/components/menu/menu.module.css b/src/components/menu/menu.module.css
index cfb9c76..6da48f6 100644
--- a/src/components/menu/menu.module.css
+++ b/src/components/menu/menu.module.css
@@ -24,6 +24,9 @@
   }
 
   & .menu {
+    display: flex;
+    flex-direction: column;
+    row-gap: 4px;
     width: 200px;
     padding: 4px;
     background-color: var(--color-neutral-100);
diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx
index 66a936d..c92c80e 100644
--- a/src/components/menu/menu.tsx
+++ b/src/components/menu/menu.tsx
@@ -14,7 +14,8 @@ import {
   FloatingFocusManager,
 } from '@floating-ui/react';
 
-import { useSoundStore } from '@/store';
+import { ShuffleButton, ShareButton } from './buttons';
+
 import { slideY, fade, mix } from '@/lib/motion';
 
 import styles from './menu.module.css';
@@ -22,8 +23,6 @@ import styles from './menu.module.css';
 export function Menu() {
   const [isOpen, setIsOpen] = useState(false);
 
-  const shuffle = useSoundStore(state => state.shuffle);
-
   const variants = mix(slideY(-20), fade());
 
   const { context, floatingStyles, refs } = useFloating({
@@ -71,9 +70,8 @@ export function Menu() {
                 initial="hidden"
                 variants={variants}
               >
-                <button className={styles.menuItem} onClick={shuffle}>
-                  Shuffle Sounds
-                </button>
+                <ShareButton />
+                <ShuffleButton />
               </motion.div>
             </div>
           </FloatingFocusManager>
diff --git a/src/components/modal/index.ts b/src/components/modal/index.ts
new file mode 100644
index 0000000..0a734c9
--- /dev/null
+++ b/src/components/modal/index.ts
@@ -0,0 +1 @@
+export { Modal } from './modal';
diff --git a/src/components/modal/modal.module.css b/src/components/modal/modal.module.css
new file mode 100644
index 0000000..453f469
--- /dev/null
+++ b/src/components/modal/modal.module.css
@@ -0,0 +1,29 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 10;
+  background-color: rgb(9 9 11 / 40%);
+  backdrop-filter: blur(5px);
+}
+
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 12;
+  width: 100%;
+  max-height: 100%;
+  padding: 50px 0;
+  overflow-y: auto;
+  transform: translate(-50%, -50%);
+
+  & .content {
+    position: relative;
+    width: 90%;
+    max-width: 500px;
+    padding: 20px;
+    margin: 0 auto;
+    background-color: var(--color-neutral-100);
+    border-radius: 8px;
+  }
+}
diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
new file mode 100644
index 0000000..b853edb
--- /dev/null
+++ b/src/components/modal/modal.tsx
@@ -0,0 +1,28 @@
+import { AnimatePresence } from 'framer-motion';
+
+import styles from './modal.module.css';
+
+interface ModalProps {
+  children: React.ReactNode;
+  onClose: () => void;
+  show: boolean;
+}
+
+export function Modal({ children, onClose, show }: ModalProps) {
+  return (
+    <AnimatePresence>
+      {show && (
+        <>
+          <div
+            className={styles.overlay}
+            onClick={onClose}
+            onKeyDown={onClose}
+          />
+          <div className={styles.modal}>
+            <div className={styles.content}>{children}</div>
+          </div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/src/styles/fonts.css b/src/styles/fonts.css
index 083d45a..72b5574 100644
--- a/src/styles/fonts.css
+++ b/src/styles/fonts.css
@@ -33,3 +33,12 @@
   src: url('/fonts/inter-tight-v7-latin-600.woff2') format('woff2');
   font-display: swap;
 }
+
+/* inter-tight-700 - latin */
+@font-face {
+  font-family: 'Inter Tight';
+  font-style: normal;
+  font-weight: 700;
+  src: url('/fonts/inter-tight-v7-latin-700.woff2') format('woff2');
+  font-display: swap;
+}