diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index 046e20e..d6cdcfa 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -74,6 +74,7 @@ const config: Config = {
           label: 'Info',
         },
         { to: '/news', label: 'Latest News', position: 'left' },
+        { to: '/media-kit', label: 'Media Kit', position: 'left' },
         {
           href: ARCAO.github,
           label: 'GitHub',
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 9f71a5d..e05ec7c 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -20,4 +20,4 @@
   display: flex;
   align-items: center;
   justify-content: center;
-}
+}
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 87b3089..0a24338 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -41,4 +41,4 @@ export default function Home(): ReactNode {
       </main>
     </Layout>
   );
-}
+}
\ No newline at end of file
diff --git a/src/pages/media-kit/components/ColorPalette.module.css b/src/pages/media-kit/components/ColorPalette.module.css
new file mode 100644
index 0000000..308eee3
--- /dev/null
+++ b/src/pages/media-kit/components/ColorPalette.module.css
@@ -0,0 +1,80 @@
+.colorGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 2rem;
+}
+
+.colorCard {
+    background: rgba(128, 128, 128, 0.05);
+    border: 1px solid var(--ifm-color-emphasis-200);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+[data-theme='dark'] .colorCard {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.colorSwatch {
+    height: 120px;
+    width: 100%;
+    background-image:
+        linear-gradient(45deg, #ccc 25%, transparent 25%),
+        linear-gradient(-45deg, #ccc 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #ccc 75%),
+        linear-gradient(-45deg, transparent 75%, #ccc 75%);
+    background-color: white;
+    background-size: 16px 16px;
+    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
+}
+
+[data-theme='dark'] .colorSwatch {
+    background-image:
+        linear-gradient(45deg, #333 25%, transparent 25%),
+        linear-gradient(-45deg, #333 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #333 75%),
+        linear-gradient(-45deg, transparent 75%, #333 75%);
+    background-color: #1a1a1a;
+}
+
+.colorInfo {
+    padding: 1rem;
+}
+
+.colorInfo h3 {
+    margin: 0 0 0.5rem 0;
+    font-size: 1.2rem;
+}
+
+.hexButton {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    background: var(--ifm-color-emphasis-100);
+    border: 1px solid var(--ifm-color-emphasis-200);
+    border-radius: 4px;
+    font-family: var(--ifm-font-family-monospace);
+    font-size: 0.9rem;
+    cursor: pointer;
+    position: relative;
+    transition: background-color 0.2s;
+}
+
+.hexButton:hover {
+    background: var(--ifm-color-emphasis-200);
+}
+
+.copyIndicator {
+    position: absolute;
+    bottom: -25px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 0.8rem;
+    color: var(--ifm-color-emphasis-600);
+    white-space: nowrap;
+}
+
+.description {
+    margin: 1.5rem 0 0 0;
+    font-size: 0.9rem;
+    color: var(--ifm-color-emphasis-700);
+}
\ No newline at end of file
diff --git a/src/pages/media-kit/components/ColorPalette.tsx b/src/pages/media-kit/components/ColorPalette.tsx
new file mode 100644
index 0000000..55fc7f2
--- /dev/null
+++ b/src/pages/media-kit/components/ColorPalette.tsx
@@ -0,0 +1,92 @@
+import React, { JSX, useState } from 'react';
+import styles from './ColorPalette.module.css';
+
+interface ColorSwatch {
+    name: string;
+    hex?: string;
+    gradient?: string;
+    description?: string;
+}
+
+const brandColors: ColorSwatch[] = [
+    {
+        name: 'Black',
+        hex: '#000000',
+        description: 'Used for text and high contrast elements.'
+    },
+    {
+        name: 'White',
+        hex: '#FFFFFF',
+        description: 'Used for backgrounds and light elements.'
+    },
+    {
+        name: 'Green',
+        hex: 'rgba(34, 197, 94, 1)',
+        description: 'Represents Minting of $GAME.'
+    },
+    {
+        name: 'Purple',
+        hex: 'rgba(147, 51, 234, 1)',
+        description: 'Represents Creating Games & Content in the $GAME Ecosystem.'
+    },
+    {
+        name: 'Blue',
+        hex: 'rgba(59, 130, 246, 1)',
+        description: 'Represents Playing Games in the $GAME Ecosystem.'
+    },
+    {
+        name: 'Yellow',
+        hex: 'rgba(245, 158, 11, 1)',
+        description: 'Represents Earning in the &GAME Ecosystem.'
+    },
+    {
+        name: 'Gradient',
+        gradient: 'linear-gradient(#8e44ad, #3498db)',
+        description: 'Represents Asset Ownership in the $GAME Ecostystem.'
+    }
+];
+
+export default function ColorPalette(): JSX.Element {
+    const [copiedColor, setCopiedColor] = useState<string | null>(null);
+
+    const copyToClipboard = (hex: string) => {
+        navigator.clipboard.writeText(hex);
+        setCopiedColor(hex);
+        setTimeout(() => setCopiedColor(null), 2000);
+    };
+
+    return (
+        <div className={styles.colorGrid}>
+            {brandColors.map((color) => (
+                <div key={color.name} className={styles.colorCard}>
+                    <div className={styles.colorSwatch}>
+                        <div
+                            style={{
+                                background: color.gradient || color.hex,
+                                width: '100%',
+                                height: '100%'
+                            }}
+                        />
+                    </div>
+                    <div className={styles.colorInfo}>
+                        <h3>{color.name}</h3>
+                        {(color.hex || color.gradient) && (
+                            <button
+                                className={styles.hexButton}
+                                onClick={() => copyToClipboard(color.hex || color.gradient || '')}
+                            >
+                                {color.hex || color.gradient}
+                                <span className={styles.copyIndicator}>
+                                    {copiedColor === (color.hex || color.gradient) ? 'Copied!' : 'Click to copy'}
+                                </span>
+                            </button>
+                        )}
+                        {color.description && (
+                            <p className={styles.description}>{color.description}</p>
+                            )}
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/pages/media-kit/components/FontDisplay.module.css b/src/pages/media-kit/components/FontDisplay.module.css
new file mode 100644
index 0000000..c5bb352
--- /dev/null
+++ b/src/pages/media-kit/components/FontDisplay.module.css
@@ -0,0 +1,57 @@
+.fontContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+}
+
+.fontFamily {
+    border: 1px solid var(--ifm-color-emphasis-200);
+    border-radius: 8px;
+    padding: 2rem;
+}
+
+.fontHeader {
+    margin-bottom: 2rem;
+}
+
+.fontHeader h3 {
+    margin: 0 0 0.5rem 0;
+}
+
+.fontMeta {
+    color: var(--ifm-color-emphasis-600);
+    font-size: 0.9rem;
+}
+
+.weightExamples {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.weightExample {
+    padding: 1rem;
+    background: var(--ifm-color-emphasis-100);
+    border-radius: 4px;
+}
+
+.weightInfo {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.75rem;
+}
+
+.weightName {
+    font-weight: 500;
+}
+
+.weightValue {
+    color: var(--ifm-color-emphasis-600);
+    font-family: var(--ifm-font-family-monospace);
+}
+
+.sampleText {
+    margin: 0;
+    font-size: 1.1rem;
+    line-height: 1.5;
+}
\ No newline at end of file
diff --git a/src/pages/media-kit/components/FontDisplay.tsx b/src/pages/media-kit/components/FontDisplay.tsx
new file mode 100644
index 0000000..de8ea48
--- /dev/null
+++ b/src/pages/media-kit/components/FontDisplay.tsx
@@ -0,0 +1,74 @@
+import React, { JSX } from 'react';
+import styles from './FontDisplay.module.css';
+
+interface FontExample {
+    name: string;
+    family: string;
+    weights: {
+        weight: string;
+        name: string;
+        sample: string;
+    }[];
+}
+
+const fonts: FontExample[] = [
+    {
+        name: 'Heading Font',
+        family: 'Inter',
+        weights: [
+            {
+                weight: '400',
+                name: 'Regular',
+                sample: 'The quick brown fox jumps over the lazy dog'
+            }
+        ],
+        usage: 'Used for H1–H2 big titles.'
+    },
+    {
+        name: 'Body Font',
+        family: 'Roboto Condensed',
+        weights: [
+            {
+                weight: '300',
+                name: 'Light',
+                sample: 'The quick brown fox jumps over the lazy dog'
+            }
+        ],
+        usage: 'Used for body text and H3+ titles.'
+    }
+];
+
+export default function FontDisplay(): JSX.Element {
+    return (
+        <div className={styles.fontContainer}>
+            {fonts.map((font) => (
+                <div key={font.name} className={styles.fontFamily}>
+                    <div className={styles.fontHeader}>
+                        <h3>{font.name}</h3>
+                        <span className={styles.fontMeta}>Font Family: {font.family}</span>
+                    </div>
+
+                    <div className={styles.weightExamples}>
+                        {font.weights.map((weight) => (
+                            <div key={weight.weight} className={styles.weightExample}>
+                                <div className={styles.weightInfo}>
+                                    <span className={styles.weightName}>{weight.name}</span>
+                                    <span className={styles.weightValue}>{weight.weight}</span>
+                                </div>
+                                <p
+                                    className={styles.sampleText}
+                                    style={{
+                                        fontFamily: font.family,
+                                        fontWeight: weight.weight
+                                    }}
+                                >
+                                    {weight.sample}
+                                </p>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/pages/media-kit/components/MediaAssets.module.css b/src/pages/media-kit/components/MediaAssets.module.css
new file mode 100644
index 0000000..0672060
--- /dev/null
+++ b/src/pages/media-kit/components/MediaAssets.module.css
@@ -0,0 +1,121 @@
+.mediaGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 1rem;
+}
+
+.mediaCard {
+    position: relative;
+    border-radius: 8px;
+    overflow: hidden;
+    transition: transform 0.2s, box-shadow 0.2s;
+    cursor: pointer;
+    text-decoration: none;
+    background: var(--ifm-color-emphasis-100);
+}
+
+.mediaCard:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    text-decoration: none;
+}
+
+[data-theme='dark'] .mediaCard {
+    background: var(--ifm-color-emphasis-200);
+}
+
+[data-theme='dark'] .mediaCard:hover {
+    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
+}
+
+.previewContainer {
+    position: relative;
+    aspect-ratio: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1.5rem;
+    transition: background-color 0.2s;
+    /* background-image:
+        linear-gradient(45deg, #ccc 25%, transparent 25%),
+        linear-gradient(-45deg, #ccc 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #ccc 75%),
+        linear-gradient(-45deg, transparent 75%, #ccc 75%); */
+    background-color: #999999;
+    background-size: 24px 24px;
+    background-position: 0 0, 0 12px, 12px -12px, -12px 0;
+}
+
+[data-theme='dark'] .previewContainer {
+    /* background-image: */
+    /* linear-gradient(45deg, #ccc 25%, transparent 25%),
+        linear-gradient(-45deg, #ccc 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #ccc 75%),
+        linear-gradient(-45deg, transparent 75%, #ccc 75%); */
+    background-color: #333333;
+    background-size: 24px 24px;
+    background-position: 0 0, 0 12px, 12px -12px, -12px 0;
+}
+
+.mediaCard:hover .previewContainer {
+    opacity: 0.9;
+}
+
+[data-theme='dark'] .mediaCard:hover .previewContainer {
+    opacity: 0.9;
+}
+
+.previewImage {
+    max-width: 80%;
+    max-height: 80%;
+    object-fit: contain;
+}
+
+.mediaInfo {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    opacity: 0;
+    transition: opacity 0.2s;
+    text-align: center;
+    padding: 1rem;
+}
+
+.mediaCard:hover .mediaInfo {
+    opacity: 1;
+}
+
+.mediaInfo h3 {
+    margin: 0;
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: white;
+}
+
+.dimensions {
+    margin-top: 0.5rem;
+    font-size: 0.8rem;
+    font-family: var(--ifm-font-family-monospace);
+    color: rgba(255, 255, 255, 0.8);
+}
+
+[data-theme='dark'] .mediaInfo {
+    background: rgba(255, 255, 255, 0.9);
+}
+
+[data-theme='dark'] .mediaInfo h3 {
+    color: var(--ifm-color-emphasis-900);
+}
+
+[data-theme='dark'] .dimensions {
+    color: var(--ifm-color-emphasis-700);
+}
+
+.formatButtons {
+    display: none;
+}
\ No newline at end of file
diff --git a/src/pages/media-kit/components/MediaAssets.tsx b/src/pages/media-kit/components/MediaAssets.tsx
new file mode 100644
index 0000000..eab8f20
--- /dev/null
+++ b/src/pages/media-kit/components/MediaAssets.tsx
@@ -0,0 +1,120 @@
+import React, { JSX } from 'react';
+import styles from './MediaAssets.module.css';
+
+interface MediaAsset {
+    name: string;
+    preview: string;
+    formats: {
+        type: string;
+        url: string;
+    }[];
+    dimensions?: string;
+    background?: 'light' | 'dark';
+}
+
+const mediaAssets: MediaAsset[] = [
+    {
+        name: 'ArcAO Logo',
+        preview: '/media-kit/assets/arcao-logo.png',
+        formats: [
+            { type: 'PNG', url: '/media-kit/assets/arcao-logo.png' }
+        ],
+        dimensions: '400x400px'
+    },
+    {
+        name: 'ArcAO Logo Black Transparent',
+        preview: '/media-kit/assets/arcao-logo-black-transparent.png',
+        formats: [
+            { type: 'PNG', url: '/media-kit/assets/arcao-logo-black-transparent.png' }
+        ],
+        dimensions: '1090x1290px'
+    },
+    {
+        name: 'ArcAO Logo White Transparent',
+        preview: '/media-kit/assets/arcao-logo-white-transparent.png',
+        formats: [
+            { type: 'PNG', url: '/media-kit/assets/arcao-logo-white-transparent.png' }
+        ],
+        dimensions: '1090x1290px'
+    },
+    {
+        name: 'Pong Game',
+        preview: '/media-kit/assets/pong-game.png',
+        formats: [
+            { type: 'PNG', url: '/media-kit/assets/pong-game.png' }
+        ],
+        dimensions: '2057x2057px'
+    },
+    {
+        name: 'Brick Blitz Game',
+        preview: '/media-kit/assets/brick_blitz-game.png',
+        formats: [
+            { type: 'PNG', url: '/media-kit/assets/brick_blitz-game.png' }
+        ],
+        dimensions: '2050x2050px'
+    },
+    {
+        name: 'Maze Muncher Game',
+        preview: '/media-kit/assets/maze_muncher-game.png',
+        formats: [
+            { type: 'PNG', url: '/media-kit/assets/maze_muncher-game.png' }
+        ],
+        dimensions: '2057x2057px'
+    },
+    {
+        name: 'Feast or Famine Game',
+        preview: '/media-kit/assets/feast_or_famine-game.png',
+        formats: [
+            { type: 'PNG', url: '/media-kit/assets/feast_or_famine-game.png' }
+        ],
+        dimensions: '2029x2029px'
+    },
+    {
+        name: 'Collab Mark',
+        preview: '/media-kit/assets/collab-mark.png',
+        formats: [
+            { type: 'PNG', url: '/media-kit/assets/collab-mark.png' }
+        ],
+        dimensions: '2000x2000px'
+    },
+    {
+        name: 'Collab Background',
+        preview: '/media-kit/assets/collab-background.png',
+        formats: [
+            { type: 'PNG', url: '/media-kit/assets/collab-background.png' }
+        ],
+        dimensions: '1200x675px'
+    }
+];
+
+export default function MediaAssets(): JSX.Element {
+    return (
+        <div className={styles.mediaGrid}>
+            {mediaAssets.map((asset) => (
+                <a
+                    key={asset.name}
+                    href={asset.formats[0].url}
+                    download
+                    className={styles.mediaCard}
+                    title={`Download ${asset.name}`}
+                >
+                    <div
+                        className={`${styles.previewContainer} ${asset.background === 'dark' ? styles.darkBg : ''}`}
+                    >
+                        <img
+                            src={asset.preview}
+                            alt={`${asset.name} preview`}
+                            className={styles.previewImage}
+                        />
+                    </div>
+                    <div className={styles.mediaInfo}>
+                        <h3>{asset.name}</h3>
+                        {asset.dimensions && (
+                            <span className={styles.dimensions}>{asset.dimensions}</span>
+                        )}
+                    </div>
+                </a>
+            ))}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/pages/media-kit/index.tsx b/src/pages/media-kit/index.tsx
new file mode 100644
index 0000000..6bf8f5e
--- /dev/null
+++ b/src/pages/media-kit/index.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+import styles from './styles.module.css';
+import ColorPalette from './components/ColorPalette';
+import FontDisplay from './components/FontDisplay';
+import MediaAssets from './components/MediaAssets';
+
+export default function MediaKit(): JSX.Element {
+    return (
+        <Layout
+            title="Media Kit"
+            description="ArcAO brand assets, color palette, typography, and media resources">
+            <main className={styles.container}>
+                <aside className={styles.legend}>
+                    <div className={styles.legendTitle}>Contents</div>
+                    <ul className={styles.legendList}>
+                        <li className={styles.legendItem}>
+                            <a href="#media-assets">Logos & Media Assets</a>
+                        </li>
+                        <li className={styles.legendItem}>
+                            <a href="#color-palette">Color Palette</a>
+                        </li>
+                        <li className={styles.legendItem}>
+                            <a href="#typography">Typography</a>
+                        </li>
+                    </ul>
+                    <div className={styles.downloadSection}>
+                        <a href="/media-kit/arcao-media-kit.zip" className={styles.downloadButton}>
+                            Download Complete Kit
+                        </a>
+                    </div>
+                </aside>
+
+                <div className={styles.content}>
+                    <div className={styles.header}>
+                        <div className={styles.headerTop}>
+                            <div className={styles.headerContent}>
+                                <h1>Media Kit</h1>
+                                <p>Official brand assets and guidelines for ArcAO</p>
+                            </div>
+                            <div className={styles.downloadSection}>
+                                <a href="/media-kit/arcao-media-kit.zip" className={styles.downloadButton}>
+                                    Download Complete Kit
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <section id="media-assets" className={styles.section}>
+                        <h2>Logos & Media Assets</h2>
+                        <MediaAssets />
+                    </section>
+
+                    <section id="color-palette" className={styles.section}>
+                        <h2>Color Palette</h2>
+                        <ColorPalette />
+                    </section>
+
+                    <section id="typography" className={styles.section}>
+                        <h2>Typography</h2>
+                        <FontDisplay />
+                    </section>
+                </div>
+            </main>
+        </Layout>
+    );
+}
\ No newline at end of file
diff --git a/src/pages/media-kit/styles.module.css b/src/pages/media-kit/styles.module.css
new file mode 100644
index 0000000..a7c6f4d
--- /dev/null
+++ b/src/pages/media-kit/styles.module.css
@@ -0,0 +1,137 @@
+.container {
+    display: grid;
+    grid-template-columns: 300px 1fr;
+    gap: 2rem;
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 2rem 1rem;
+}
+
+.content {
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+}
+
+.header {
+    margin-bottom: 3rem;
+    padding-bottom: 2rem;
+    border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.headerContent h1 {
+    margin-bottom: 0.5rem;
+}
+
+.headerContent p {
+    margin: 0;
+    color: var(--ifm-color-emphasis-700);
+}
+
+.downloadSection {
+    margin-top: 2rem;
+}
+
+.headerTop {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 2rem;
+}
+
+.downloadButton {
+    display: inline-block;
+    padding: 0.75rem 1.5rem;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: white;
+    border-radius: 4px;
+    text-decoration: none;
+    transition: all 0.2s;
+    font-size: 0.9rem;
+    border: 1px solid transparent;
+}
+
+.downloadButton:hover {
+    background-color: rgba(0, 0, 0, 0.85);
+    text-decoration: none;
+    color: white;
+}
+
+[data-theme='dark'] .downloadButton {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: white;
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+[data-theme='dark'] .downloadButton:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.3);
+    color: white;
+}
+
+.legend {
+    position: sticky;
+    top: calc(var(--ifm-navbar-height) + 2rem);
+    height: fit-content;
+    padding: 1rem;
+    border-right: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.legendTitle {
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--ifm-color-emphasis-600);
+    margin-bottom: 1rem;
+}
+
+.legendList {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.legendItem {
+    margin-bottom: 0.5rem;
+    font-size: 0.9rem;
+}
+
+.legendItem a {
+    color: var(--ifm-color-emphasis-800);
+    text-decoration: none;
+    transition: color 0.2s;
+}
+
+.legendItem a:hover {
+    color: var(--ifm-color-primary);
+}
+
+@media (max-width: 996px) {
+    .container {
+        grid-template-columns: 1fr;
+    }
+
+    .legend {
+        display: none;
+    }
+}
+
+.section {
+    margin-bottom: 3rem;
+}
+
+.section h2 {
+    margin-bottom: 1.5rem;
+}
+
+@media (max-width: 768px) {
+    .header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .downloadSection {
+        margin-left: 0;
+        margin-top: 1rem;
+    }
+}
\ No newline at end of file
diff --git a/src/pages/media-kit/tsconfig.json b/src/pages/media-kit/tsconfig.json
new file mode 100644
index 0000000..b9fa2b8
--- /dev/null
+++ b/src/pages/media-kit/tsconfig.json
@@ -0,0 +1,14 @@
+{
+    "extends": "../../../tsconfig.json",
+    "compilerOptions": {
+        "jsx": "react",
+        "lib": [
+            "DOM",
+            "ESNext"
+        ]
+    },
+    "include": [
+        "**/*.ts",
+        "**/*.tsx"
+    ]
+}
\ No newline at end of file
diff --git a/static/media-kit/arcao-media-kit.zip b/static/media-kit/arcao-media-kit.zip
new file mode 100644
index 0000000..dcb412e
Binary files /dev/null and b/static/media-kit/arcao-media-kit.zip differ
diff --git a/static/media-kit/assets/arcao-logo-black-transparent.png b/static/media-kit/assets/arcao-logo-black-transparent.png
new file mode 100644
index 0000000..1800e3b
Binary files /dev/null and b/static/media-kit/assets/arcao-logo-black-transparent.png differ
diff --git a/static/media-kit/assets/arcao-logo-white-transparent.png b/static/media-kit/assets/arcao-logo-white-transparent.png
new file mode 100644
index 0000000..9c89c6a
Binary files /dev/null and b/static/media-kit/assets/arcao-logo-white-transparent.png differ
diff --git a/static/media-kit/assets/arcao-logo.png b/static/media-kit/assets/arcao-logo.png
new file mode 100644
index 0000000..403c35e
Binary files /dev/null and b/static/media-kit/assets/arcao-logo.png differ
diff --git a/static/media-kit/assets/brick_blitz-game.png b/static/media-kit/assets/brick_blitz-game.png
new file mode 100644
index 0000000..119b607
Binary files /dev/null and b/static/media-kit/assets/brick_blitz-game.png differ
diff --git a/static/media-kit/assets/collab-background.png b/static/media-kit/assets/collab-background.png
new file mode 100644
index 0000000..7ee425d
Binary files /dev/null and b/static/media-kit/assets/collab-background.png differ
diff --git a/static/media-kit/assets/collab-mark.png b/static/media-kit/assets/collab-mark.png
new file mode 100644
index 0000000..285aecc
Binary files /dev/null and b/static/media-kit/assets/collab-mark.png differ
diff --git a/static/media-kit/assets/feast_or_famine-game.png b/static/media-kit/assets/feast_or_famine-game.png
new file mode 100644
index 0000000..d7cfd84
Binary files /dev/null and b/static/media-kit/assets/feast_or_famine-game.png differ
diff --git a/static/media-kit/assets/maze_muncher-game.png b/static/media-kit/assets/maze_muncher-game.png
new file mode 100644
index 0000000..63e2762
Binary files /dev/null and b/static/media-kit/assets/maze_muncher-game.png differ
diff --git a/static/media-kit/assets/pong-game.png b/static/media-kit/assets/pong-game.png
new file mode 100644
index 0000000..0f67d04
Binary files /dev/null and b/static/media-kit/assets/pong-game.png differ