diff --git a/docs/intro.mdx b/docs/index.mdx
similarity index 100%
rename from docs/intro.mdx
rename to docs/index.mdx
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index fa4c489..88f5af8 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -77,7 +77,11 @@ const config: Config = {
           position: 'left',
           label: 'Docs',
         },
-        {href: 'https://provenancewidgets.github.io/showcase/', label: 'Showcase', position: 'left'},
+        {
+          to: 'docs/showcase/', 
+          label: 'Showcase', 
+          position: 'left'
+        },
         {
           href: `https://github.com/ProvenanceWidgets/ProvenanceWidgets`,
           label: 'GitHub',
@@ -134,6 +138,14 @@ const config: Config = {
       theme: prismThemes.oneLight,
       darkTheme: prismThemes.oceanicNext
     },
+    colorMode: {
+      respectPrefersColorScheme: true,
+    },
+    announcementBar: {
+      content: '⚠️ ProvenanceWidgets is not yet fully compatible with Safari. We recommend using a chromium-based browser or Firefox for the best experience.',
+      backgroundColor: 'var(--ifm-color-danger-darker)',
+      textColor: 'white'
+    }
   } satisfies Preset.ThemeConfig,
 
   clientModules: [
diff --git a/src/pages/docs/showcase.module.css b/src/pages/docs/showcase.module.css
new file mode 100644
index 0000000..3459362
--- /dev/null
+++ b/src/pages/docs/showcase.module.css
@@ -0,0 +1,18 @@
+.linkReset {
+    color: inherit;
+}
+
+.linkReset:hover {
+    color: inherit;
+    text-decoration: none;
+    transform: scale(1.01);
+    transition: transform 0.2s ease-in-out;
+}
+
+.titleOverride {
+    color: var(--ifm-link-color);
+}
+
+.paragraphReset {
+    text-decoration: none;
+}
\ No newline at end of file
diff --git a/src/pages/docs/showcase.tsx b/src/pages/docs/showcase.tsx
new file mode 100644
index 0000000..9b9a08c
--- /dev/null
+++ b/src/pages/docs/showcase.tsx
@@ -0,0 +1,82 @@
+import Layout from "@theme/Layout"
+import Heading from '@theme/Heading';
+import Link from "@docusaurus/Link";
+import styles from './showcase.module.css'
+import clsx from "clsx";
+
+const projects = [
+    {
+        title: 'Playground',
+        description: 'A playground to test out all widgets available in the library.',
+        link: 'playground'
+    },
+    {
+        title: 'Scented Widgets',
+        description: 'A showcase to replicate Scented Widgets for facilitating navigation in information spaces.',
+        link: 'scented-widgets'
+    },
+    {
+        title: 'Phosphor Objects',
+        description: 'A showcase to replicate Phosphor objects in a web environment by limiting the provenance to the last two interactions.',
+        link: 'phosphor-objects'
+    },
+    {
+        title: 'Data Distribution',
+        description: 'A showcase to visualize the data distribution of different attributes in a dataset using different widgets in the library.',
+        link: 'data-distribution'
+    },
+    {
+        title: 'Vega Integration',
+        description: 'A showcase to demonstrate the integrability of ProvenanceWidgets with Vega signals.',
+        link: 'vega-example'
+    },
+    {
+        title: 'Dynamic Query Widgets',
+        description: 'A showcase to replicate the dynamic query widgets for the homefinder application.',
+        link: 'dynamic-query-widgets-homefinder'
+    },
+    {
+        title: 'Widgets to Visualization Interaction',
+        description: 'A showcase to demonstrate the use of ProvenanceWidgets to interact with a visualization.',
+        link: 'widgets-to-vis-one-way'
+    },
+    {
+        title: 'Visualization to Widgets Interaction',
+        description: 'A showcase to demonstrate how the widgets can be updated by interacting with a visualization.',
+        link: 'vis-to-widgets-one-way'
+    }
+]
+
+const title = 'Showcase'
+const description = 'Demonstrations of the ProvenanceWidgets library in action.'
+
+export default function Showcase() {
+    return (
+        <Layout {...{ title, description }}>
+            <div className="container padding-top--md padding-bottom--lg">
+                <Heading as="h1" className="hero__title">
+                    {title}
+                </Heading>
+                <p className="hero__subtitle">{description}</p>
+                <div className="grid">
+                    {projects.map((project, i) => (
+                        <div className="col-12 md:col-6 lg:col-3" key={i}>
+                            <Link 
+                                className={clsx('card h-full', styles.linkReset)}
+                                to={`https://provenancewidgets.github.io/showcase/#/${project.link}`}
+                            >
+                                <div className="card__image">
+                                    <img src={`/img/${project.link}.png`} alt={project.title} />
+                                </div>
+                                <div className="card__body">
+                                    <h4 className={styles.titleOverride}>{project.title}</h4>
+                                    <small className={styles.paragraphReset}>{project.description}</small>
+                                </div>
+                            </Link>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </Layout>
+    )
+}
\ No newline at end of file
diff --git a/src/pages/markdown-page.md b/src/pages/markdown-page.md
deleted file mode 100644
index 9756c5b..0000000
--- a/src/pages/markdown-page.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Markdown page example
----
-
-# Markdown page example
-
-You don't need React to write simple standalone pages.
diff --git a/static/img/data-distribution.png b/static/img/data-distribution.png
new file mode 100644
index 0000000..7d8a5e6
Binary files /dev/null and b/static/img/data-distribution.png differ
diff --git a/static/img/dynamic-query-widgets-homefinder.png b/static/img/dynamic-query-widgets-homefinder.png
new file mode 100644
index 0000000..5f59a30
Binary files /dev/null and b/static/img/dynamic-query-widgets-homefinder.png differ
diff --git a/static/img/phosphor-objects.png b/static/img/phosphor-objects.png
new file mode 100644
index 0000000..7522217
Binary files /dev/null and b/static/img/phosphor-objects.png differ
diff --git a/static/img/playground.png b/static/img/playground.png
new file mode 100644
index 0000000..f09de97
Binary files /dev/null and b/static/img/playground.png differ
diff --git a/static/img/scented-widgets.png b/static/img/scented-widgets.png
new file mode 100644
index 0000000..9edd90a
Binary files /dev/null and b/static/img/scented-widgets.png differ
diff --git a/static/img/vega-example.png b/static/img/vega-example.png
new file mode 100644
index 0000000..ada8ed3
Binary files /dev/null and b/static/img/vega-example.png differ
diff --git a/static/img/vis-to-widgets-one-way.png b/static/img/vis-to-widgets-one-way.png
new file mode 100644
index 0000000..47174c5
Binary files /dev/null and b/static/img/vis-to-widgets-one-way.png differ
diff --git a/static/img/widgets-to-vis-one-way.png b/static/img/widgets-to-vis-one-way.png
new file mode 100644
index 0000000..65b6acd
Binary files /dev/null and b/static/img/widgets-to-vis-one-way.png differ