diff --git a/.changeset/metal-carrots-speak.md b/.changeset/metal-carrots-speak.md
new file mode 100644
index 0000000..a0bcb4f
--- /dev/null
+++ b/.changeset/metal-carrots-speak.md
@@ -0,0 +1,5 @@
+---
+"pinorama-docs": minor
+---
+
+Home page redesign
diff --git a/packages/pinorama-client/package.json b/packages/pinorama-client/package.json
index 238d7d8..55a62cd 100644
--- a/packages/pinorama-client/package.json
+++ b/packages/pinorama-client/package.json
@@ -21,9 +21,7 @@
     }
   },
   "types": "./dist/types/pinorama-client.d.ts",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "clean": "rimraf dist node_modules",
     "build": "rollup --config"
diff --git a/packages/pinorama-docs/.vitepress/config.ts b/packages/pinorama-docs/.vitepress/config.ts
deleted file mode 100644
index 27fc316..0000000
--- a/packages/pinorama-docs/.vitepress/config.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { defineConfig } from "vitepress"
-
-export default defineConfig({
-  title: "Pinorama",
-  description: "Log Search for Pino",
-  themeConfig: {
-    nav: [
-      { text: "Home", link: "/" }
-      // { text: "Examples", link: "/markdown-examples" }
-    ],
-
-    sidebar: [
-      // {
-      //   text: "Examples",
-      //   items: [
-      //     { text: "Markdown Examples", link: "/markdown-examples" },
-      //     { text: "Runtime API Examples", link: "/api-examples" }
-      //   ]
-      // }
-    ],
-
-    socialLinks: [
-      { icon: "github", link: "https://github.com/pinoramajs/pinorama" }
-    ]
-  }
-})
diff --git a/packages/pinorama-docs/.vitepress/config/en.ts b/packages/pinorama-docs/.vitepress/config/en.ts
new file mode 100644
index 0000000..b130495
--- /dev/null
+++ b/packages/pinorama-docs/.vitepress/config/en.ts
@@ -0,0 +1,55 @@
+import { defineConfig } from "vitepress"
+import { version } from "../../../pinorama-studio/package.json"
+
+export const en = defineConfig({
+  lang: "en-US",
+
+  themeConfig: {
+    nav: [
+      {
+        text: "Guide",
+        link: "/guide/getting-started/",
+        activeMatch: "/guide/getting-started/"
+      },
+      {
+        text: "Studio",
+        link: "/guide/pinorama-studio/",
+        activeMatch: "/guide/pinorama-studio/"
+      },
+      {
+        text: "Client",
+        link: "/guide/pinorama-client/",
+        activeMatch: "/guide/pinorama-client/"
+      },
+      {
+        text: "Server",
+        link: "/guide/pinorama-server/",
+        activeMatch: "/guide/pinorama-server/"
+      },
+      {
+        text: "Transport",
+        link: "/guide/pinorama-transport/",
+        activeMatch: "/guide/pinorama-transport/"
+      },
+      {
+        text: `v${version}`,
+        items: [
+          {
+            text: "Release Notes",
+            link: "https://github.com/pinoramajs/pinorama/releases"
+          }
+        ]
+      }
+    ],
+
+    footer: {
+      message: "Open Source ❤ MIT Licensed",
+      copyright: "© 2024 Francesco Pasqua & Contributors"
+    },
+
+    docFooter: {
+      prev: "Next",
+      next: "Previous"
+    }
+  }
+})
diff --git a/packages/pinorama-docs/.vitepress/config/index.ts b/packages/pinorama-docs/.vitepress/config/index.ts
new file mode 100644
index 0000000..2f29d97
--- /dev/null
+++ b/packages/pinorama-docs/.vitepress/config/index.ts
@@ -0,0 +1,28 @@
+import { defineConfig } from "vitepress"
+import { en } from "./en"
+
+export default defineConfig({
+  title: "Pinorama",
+
+  lastUpdated: true,
+  cleanUrls: true,
+  metaChunk: true,
+
+  head: [["link", { rel: "icon", href: "/pinorama-logo.webp" }]],
+
+  themeConfig: {
+    logo: "/pinorama-logo.webp",
+
+    socialLinks: [
+      { icon: "github", link: "https://github.com/pinoramajs/pinorama" }
+    ],
+
+    search: {
+      provider: "local"
+    }
+  },
+
+  locales: {
+    root: { label: "English", ...en }
+  }
+})
diff --git a/packages/pinorama-docs/.vitepress/style/vars.css b/packages/pinorama-docs/.vitepress/style/vars.css
new file mode 100644
index 0000000..e324fa3
--- /dev/null
+++ b/packages/pinorama-docs/.vitepress/style/vars.css
@@ -0,0 +1,55 @@
+/**
+ * Colors
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-brand-1: #59b9ff;
+  --vp-c-brand-2: #0a7aff;
+  --vp-c-brand-3: #0085ff;
+}
+
+.dark {
+  --vp-c-brand-1: #59b9ff;
+  --vp-c-brand-2: #0a7aff;
+  --vp-c-brand-3: #0085ff;
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+.dark {
+  --vp-button-brand-text: #ffffff;
+  --vp-button-brand-active-text: #ffffff;
+  --vp-button-brand-hover-text: #ffffff;
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+ :root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    #0085ff 30%,
+    #59b9ff
+  );
+  --vp-home-hero-image-background-image: linear-gradient(
+    -45deg,
+    #0085ff60 50%,
+    #59b9ff60 50%
+  );
+  --vp-home-hero-image-filter: blur(30px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(72px);
+  }
+}
diff --git a/packages/pinorama-docs/.vitepress/theme/index.ts b/packages/pinorama-docs/.vitepress/theme/index.ts
new file mode 100644
index 0000000..cbd1612
--- /dev/null
+++ b/packages/pinorama-docs/.vitepress/theme/index.ts
@@ -0,0 +1,7 @@
+import type { Theme } from "vitepress"
+import DefaultTheme from "vitepress/theme"
+import "../style/vars.css"
+
+export default {
+  extends: DefaultTheme
+} satisfies Theme
diff --git a/packages/pinorama-docs/api-examples.md b/packages/pinorama-docs/api-examples.md
deleted file mode 100644
index 6bd8bb5..0000000
--- a/packages/pinorama-docs/api-examples.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-outline: deep
----
-
-# Runtime API Examples
-
-This page demonstrates usage of some of the runtime APIs provided by VitePress.
-
-The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
-
-```md
-<script setup>
-import { useData } from 'vitepress'
-
-const { theme, page, frontmatter } = useData()
-</script>
-
-## Results
-
-### Theme Data
-<pre>{{ theme }}</pre>
-
-### Page Data
-<pre>{{ page }}</pre>
-
-### Page Frontmatter
-<pre>{{ frontmatter }}</pre>
-```
-
-<script setup>
-import { useData } from 'vitepress'
-
-const { site, theme, page, frontmatter } = useData()
-</script>
-
-## Results
-
-### Theme Data
-<pre>{{ theme }}</pre>
-
-### Page Data
-<pre>{{ page }}</pre>
-
-### Page Frontmatter
-<pre>{{ frontmatter }}</pre>
-
-## More
-
-Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).
diff --git a/packages/pinorama-docs/index.md b/packages/pinorama-docs/index.md
index 1d4a9c5..12e033b 100644
--- a/packages/pinorama-docs/index.md
+++ b/packages/pinorama-docs/index.md
@@ -1,25 +1,62 @@
 ---
-# https://vitepress.dev/reference/default-theme-home-page
 layout: home
 
+title: Pinorama
+titleTemplate: Explore your logs smarter and faster
+
 hero:
-  name: "Pinorama"
-  text: "Explore your pino logs with a flexible suite."
-  tagline: Supercharged by Pino, Orama, and Fastify. 
+  name: Pinorama
+  text: Explore your logs smarter and faster
+  tagline: A beautiful yet powerful Node.js log viewer
   actions:
     - theme: brand
-      text: Markdown Examples
-      link: /markdown-examples
+      text: Get Started
+      link: /guide/
+    - theme: alt
+      text: Pinorama Studio
+      link: /guide/install/
     - theme: alt
-      text: API Examples
-      link: /api-examples
+      text: View on GitHub
+      link: https://github.com/pinoramajs/pinorama
+  image:
+    src: "/pinorama-logo.webp"
+    alt: Pinorama
 
 features:
-  - title: Feature A
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature B
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature C
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  - title: Orama Powered
+    icon: 🚀
+    details: Easily filter logs by facets and perform searches with the Orama super powers.
+  - title: Fastify Integration
+    icon: 🔋
+    details: Connect your Fastify app to a Pinorama and send logs with the transport plugin.
+  - title: Piped Output
+    icon: 📡
+    details: Pipe Node.js logs from any process to Pinorama and view them in real-time.
+  - title: NDJSON Support
+    icon: 🍋
+    details: Configure Pinorama to handle NDJSON files and display them in a structured way.
+  - title: Custom Styles
+    icon: 🎨
+    details: Customize log lines with your own colors and styles to make them stand out.
+  - title: ESM Support
+    icon: 📦
+    details: Built with ESM in mind, ensuring it works with modern JS standards.
 ---
 
+<style>
+.pinorama-screenshot {
+  margin-top: 4rem;
+}
+
+@media (min-width: 960px) {
+  .pinorama-screenshot {
+    width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+</style>
+
+<img class="pinorama-screenshot" src="/pinorama-screenshot.webp" alt="Pinorama" />
+
+
diff --git a/packages/pinorama-docs/markdown-examples.md b/packages/pinorama-docs/markdown-examples.md
deleted file mode 100644
index f9258a5..0000000
--- a/packages/pinorama-docs/markdown-examples.md
+++ /dev/null
@@ -1,85 +0,0 @@
-# Markdown Extension Examples
-
-This page demonstrates some of the built-in markdown extensions provided by VitePress.
-
-## Syntax Highlighting
-
-VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
-
-**Input**
-
-````md
-```js{4}
-export default {
-  data () {
-    return {
-      msg: 'Highlighted!'
-    }
-  }
-}
-```
-````
-
-**Output**
-
-```js{4}
-export default {
-  data () {
-    return {
-      msg: 'Highlighted!'
-    }
-  }
-}
-```
-
-## Custom Containers
-
-**Input**
-
-```md
-::: info
-This is an info box.
-:::
-
-::: tip
-This is a tip.
-:::
-
-::: warning
-This is a warning.
-:::
-
-::: danger
-This is a dangerous warning.
-:::
-
-::: details
-This is a details block.
-:::
-```
-
-**Output**
-
-::: info
-This is an info box.
-:::
-
-::: tip
-This is a tip.
-:::
-
-::: warning
-This is a warning.
-:::
-
-::: danger
-This is a dangerous warning.
-:::
-
-::: details
-This is a details block.
-:::
-
-## More
-
-Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).
diff --git a/packages/pinorama-docs/public/pinorama-logo.webp b/packages/pinorama-docs/public/pinorama-logo.webp
new file mode 100644
index 0000000..4372f8b
Binary files /dev/null and b/packages/pinorama-docs/public/pinorama-logo.webp differ
diff --git a/packages/pinorama-docs/public/pinorama-screenshot.webp b/packages/pinorama-docs/public/pinorama-screenshot.webp
new file mode 100644
index 0000000..2cc171f
Binary files /dev/null and b/packages/pinorama-docs/public/pinorama-screenshot.webp differ
diff --git a/packages/pinorama-server/package.json b/packages/pinorama-server/package.json
index 380343d..4db6b90 100644
--- a/packages/pinorama-server/package.json
+++ b/packages/pinorama-server/package.json
@@ -5,9 +5,7 @@
   "type": "module",
   "types": "./dist/index.d.mts",
   "exports": "./dist/index.mjs",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "clean": "rimraf dist node_modules",
     "build": "tsc"
diff --git a/packages/pinorama-studio/package.json b/packages/pinorama-studio/package.json
index 58ae8d1..57965b8 100644
--- a/packages/pinorama-studio/package.json
+++ b/packages/pinorama-studio/package.json
@@ -6,10 +6,7 @@
   "bin": {
     "pinorama": "./cli.mjs"
   },
-  "files": [
-    "dist",
-    "cli.mjs"
-  ],
+  "files": ["dist", "cli.mjs"],
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
diff --git a/packages/pinorama-transport/package.json b/packages/pinorama-transport/package.json
index bcceb06..50382d8 100644
--- a/packages/pinorama-transport/package.json
+++ b/packages/pinorama-transport/package.json
@@ -8,9 +8,7 @@
   "bin": {
     "pino-pinorama": "./dist/cli.mjs"
   },
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "test": "vitest run",
     "test:watch": "vitest",