diff --git a/astro.config.mjs b/astro.config.mjs
index 29d3140..80d56fb 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -12,7 +12,7 @@ export default defineConfig({
       exclude: ["**/page-react-timings/*"],
     }),
     starlight({
-      title: "Ayc0's Blog",
+      title: "Ayc0",
       lastUpdated: true,
       components: {
         Head: "./src/components/starlight/Head.astro",
diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx
new file mode 100644
index 0000000..6b478dc
--- /dev/null
+++ b/src/content/docs/index.mdx
@@ -0,0 +1,43 @@
+---
+title: Welcome
+template: splash
+description: Various personal projects, and all the blog posts I wrote
+hero:
+  title: Projects by Ayc0
+  tagline: Various personal projects (finished or not), and all the blog posts I wrote
+  # image:
+  #   file: ???
+---
+
+import { CardGrid, Card, LinkCard } from "@astrojs/starlight/components";
+
+<CardGrid stagger>
+  <a href="/posts/" style="text-decoration: none; color: initial">
+    <Card title="Blog posts">List of all the blog posts I wrote</Card>
+  </a>
+  <a href="/length-units/" style="text-decoration: none; color: initial">
+    <Card title="CSS length units">
+      Listing of all CSS length units available, with their definitions, links
+      to doc, and live visualization of their sizes
+    </Card>
+  </a>
+  <a href="/color-visualizer/" style="text-decoration: none; color: initial">
+    <Card title="Color visualizer">
+      Page to play with colors, and represent then in different color spaces
+    </Card>
+  </a>
+  <a href="/react-timings/" style="text-decoration: none; color: initial">
+    <Card title="React timings">
+      Experiment around React, life cycles, timings, and different rendering
+      modes
+    </Card>
+  </a>
+  <a
+    href="/hexagons-without-rules/"
+    style="text-decoration: none; color: initial"
+  >
+    <Card title="Hexagons">
+      Small sandbox to play with hexagons, and with React & canvas.
+    </Card>
+  </a>
+</CardGrid>
diff --git a/src/pages/index.astro b/src/pages/index.astro
deleted file mode 100644
index 3b412d2..0000000
--- a/src/pages/index.astro
+++ /dev/null
@@ -1,25 +0,0 @@
----
-import Page from '@layouts/Page.astro';
-
-const base = import.meta.env.BASE_URL;
----
-
-<Page title="Ayc0’s projects">
-    <ul>
-      <li>
-        <a href={`${base}length-units`}>CSS Length Units</a>
-      </li>
-      <li>
-        <a href={`${base}react-timings`}>React timings</a>
-      </li>
-      <li>
-        <a href={`${base}hexagons-without-rules`}>Hexagons</a>
-      </li>
-      <li>
-        <a href={`${base}color-visualizer`}>Color Visualizer</a>
-      </li>
-      <li>
-        <a href={`${base}posts`}>Blog posts</a>
-      </li>
-    </ul>
-</Page>
diff --git a/src/pages/length-units.astro b/src/pages/length-units.astro
index f70e5f4..052aba0 100644
--- a/src/pages/length-units.astro
+++ b/src/pages/length-units.astro
@@ -14,7 +14,7 @@ const backgrounds: { [category in Category]: string } = {
 };
 ---
 
-<Page title="CSS Length Units" description="Display all different CSS length units" image="css-length-units-og.png">
+<Page title="CSS length units" description="Display all different CSS length units" image="css-length-units-og.png">
     <style is:global>
       .wrapper {
         display: grid;