diff --git a/api/Dockerfile b/api/Dockerfile
index 11640129..c1b5eb59 100644
--- a/api/Dockerfile
+++ b/api/Dockerfile
@@ -20,7 +20,7 @@ ENV __BUILD_SHA=$BUILD_SHA
 
 WORKDIR /opt/app
 COPY . .
-RUN bun install --frozen-lockfile --production
+RUN bun install --frozen-lockfile
 
 WORKDIR /opt/app/api
 
diff --git a/bun.lockb b/bun.lockb
index c54005f9..59fb2a70 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/docs.json b/docs.json
index bf51c4e6..5624c6c1 100644
--- a/docs.json
+++ b/docs.json
@@ -80,6 +80,10 @@
       "group": "Components",
       "tab": "components",
       "pages": [
+        {
+          "title": "Getting Started",
+          "href": "/components"
+        },
         {
           "title": "Accordion",
           "href": "/components/accordion",
diff --git a/docs/components/index.mdx b/docs/components/index.mdx
index 20652a83..06481699 100644
--- a/docs/components/index.mdx
+++ b/docs/components/index.mdx
@@ -1,3 +1,38 @@
 ---
-redirect: /components/accordion
----
\ No newline at end of file
+title: Components
+description: Enhance your documentation with components powered by MDX.
+---
+
+Alongside regular Markdown, docs.page supports [MDX](https://mdxjs.com/), a format that allows you to use JSX components within your documentation.
+
+Components enable you to enhance your documentation, providing a more interactive and engaging experience for your readers over what is possible with standard Markdown.
+
+## Using Components
+
+To use components in your documentation, you can either use standard Markdown syntax, or the `<Component>` syntax. For example, the `<Info>` component can be used to display an informational message more visible to users:
+
+<Info>This draws attention to useful page information.</Info>
+
+```jsx
+<Info>This draws attention to useful page information.</Info>
+```
+
+Components also take "props", which are attributes that can be passed to the component to customize its behavior, for example:
+
+```jsx
+<Tweet id="1513662173796605958" />
+```
+
+## HTML Overrides
+
+Typical markdown syntax supports both markdown tags and also HTML tags. In some scenarios, docs.page will override the HTML tags to render the component instead. For example image markup in markdown (e.g. `![alt text](image.png)`) will be overridden to render the `<Image>` component instead.
+
+Please note that rendering HTML directly in your markdown will not be overridden, and will be rendered as standard HTML. For example an `<img>` tag will not be overridden to render the `<Image>` component.
+
+## Invalid Components
+
+If you attempt to use a component that does not exist, or has a required property which is missing, docs.page will render a red block with a message informing you to take action.
+For example:
+
+<ComponentWhichDoesNotExist />
+
diff --git a/website/app/components/Footer.tsx b/website/app/components/Footer.tsx
index 58bbfb54..f370b2d3 100644
--- a/website/app/components/Footer.tsx
+++ b/website/app/components/Footer.tsx
@@ -35,8 +35,8 @@ export function Footer() {
   const sorted = socials.sort(([a], [b]) => a.localeCompare(b));
 
   return (
-    <footer className="flex items-center gap-12 pb-12">
-      <div className="text-sm flex gap-1">
+    <footer className="md:flex items-center gap-12 pb-12 space-y-3 md:space-y-0">
+      <div className="text-sm flex items-center justify-center md:justify-start gap-1">
         <span>Powered by</span>
         <span>⬡</span>
         <code>
@@ -44,7 +44,7 @@ export function Footer() {
           <a href="https://docs.page">docs.page</a>
         </code>
       </div>
-      <div className="flex-1 flex flex-wrap items-center justify-end gap-5">
+      <div className="flex-1 flex flex-wrap items-center justify-center md:justify-end gap-5">
         {sorted.map(([name, url]) => (
           <div key={name}>
             <a