diff --git a/.github/workflows/build-commit-subfolder.yaml b/.github/workflows/build-commit-subfolder.yaml
index 22b63d64..fceaaf75 100644
--- a/.github/workflows/build-commit-subfolder.yaml
+++ b/.github/workflows/build-commit-subfolder.yaml
@@ -72,6 +72,9 @@ jobs:
     # add 'social' to mkdocs.yml file under plugins
     - run: pip install cffi pillow cairosvg
 
+    # Material extension now part of mkdocs
+    - run: pip install mkdocs-material-extensions
+
     # add mkdocs-redirects
     # zoom images
     - name: Install mkdocs-redirects
diff --git a/.github/workflows/sync-build-deploy.yaml b/.github/workflows/sync-build-deploy.yaml
index 6bccec99..3397657a 100644
--- a/.github/workflows/sync-build-deploy.yaml
+++ b/.github/workflows/sync-build-deploy.yaml
@@ -58,6 +58,9 @@ jobs:
       # add 'social' to mkdocs.yml file under plugins
       - run: pip install cffi pillow cairosvg
 
+      # Material extension now part of mkdocs
+      - run: pip install mkdocs-material-extensions
+
       # add mkdocs-redirects
       # zoom images
       - name: Install mkdocs-redirects
diff --git a/docs/platform/changes.md b/docs/platform/changes.md
index 36f20056..3b497cd8 100644
--- a/docs/platform/changes.md
+++ b/docs/platform/changes.md
@@ -1,3 +1,7 @@
+---
+title: Recent changes
+---
+
 # Recent changes to Quix
 
 The Quix Platform has recently undergone some substantial changes. These changes introduce some new terminology, and may also impact the way you currently work. This page provides an overview of the main changes.
diff --git a/docs/platform/quickstart.md b/docs/platform/quickstart.md
index 23cd0803..1ece52a5 100644
--- a/docs/platform/quickstart.md
+++ b/docs/platform/quickstart.md
@@ -1,3 +1,8 @@
+---
+title: Quickstart
+description: Get started in under 10 minutes
+---
+
 # Quickstart
 
 This Quickstart is designed to show you how to get your data into Quix and display it, in **less than 10 minutes**.
diff --git a/layouts/custom.yml b/layouts/custom.yml
deleted file mode 100644
index 69f49bf7..00000000
--- a/layouts/custom.yml
+++ /dev/null
@@ -1,53 +0,0 @@
-size: { width: 1200, height: 630 }
-layers:
-#Set background image
-  - background:
-      image: layouts/background.jpg
-
-#Docs URL text
-  - size: { width: 150, height: 30 }
-    offset: { x: 144, y: 64 }
-    typography:
-      content: quix.io/docs
-      align: start
-      color: "#FFFFFF66"
-      font:
-        family: Inter
-        style: SemiBold
-
-#Page title text
-  - size: { width: 768, height: 336 }
-    offset: { x: 144, y: 126 }
-    typography:
-      content: "{{ page.title }}"
-      overflow: shrink
-      align: start
-      color: white
-      line:
-        amount: 3
-        height: 1.2
-      font:
-        family: Inter
-        style: SemiBold
-
-## TODO try to get page description on the social card too
-# #Page title text
-#   - size: { width: 768, height: 336 }
-#     offset: { x: 144, y: 235 }
-#     typography:
-#       content: >-
-#         {%- if layout.description -%}
-#           {{ layout.description }}
-#         {%- else -%}
-#           No page desc
-#         {%- endif -%}
-        
-#       overflow: shrink
-#       align: start
-#       color: lightgrey
-#       line:
-#         amount: 3
-#         height: 2
-#       font:
-#         family: Inter
-#         style: SemiBold
diff --git a/layouts/quix.yml b/layouts/quix.yml
new file mode 100644
index 00000000..aa57da20
--- /dev/null
+++ b/layouts/quix.yml
@@ -0,0 +1,78 @@
+definitions:
+- &page_title >-
+    {{ page.meta.get("title") or page.title }}
+  
+- &page_description >-
+    {{ page.meta.get("description") or "" }}
+
+- &page_title_with_site_name >-
+  {%- if not page.is_homepage -%}
+    {{ page.meta.get("title", page.title) }} - {{ config.site_name }}
+  {%- else -%}
+    {{ page.meta.get("title", page.title) }}
+  {%- endif -%}
+ 
+tags:
+
+  og:type: website
+  og:title: *page_title_with_site_name
+  og:description: *page_description
+  og:image: "{{ image.url }}"
+  og:image:type: "{{ image.type }}"
+  og:image:width: "{{ image.width }}"
+  og:image:height: "{{ image.height }}"
+  og:url: "{{ page.canonical_url }}"
+
+  twitter:card: summary_large_image
+  twitter:title: *page_title_with_site_name
+  twitter:description: *page_description
+  twitter:image: "{{ image.url }}"
+
+
+size: { width: 1200, height: 630 }
+layers:
+#Set background image
+  - background:
+      image: layouts/background.jpg
+
+#Docs URL text
+  - size: { width: 150, height: 30 }
+    offset: { x: 144, y: 64 }
+    typography:
+      content: quix.io/docs
+      align: start
+      color: "#FFFFFF66"
+      font:
+        family: Inter
+        style: SemiBold
+
+#Page title text
+  - size: { width: 768, height: 336 }
+    offset: { x: 144, y: 126 }
+    typography:
+      content: *page_title
+      overflow: shrink
+      align: start
+      color: white
+      line:
+        amount: 3
+        height: 1.2
+      font:
+        family: Inter
+        style: SemiBold
+
+# TODO try to get page description on the social card too
+#Page title text
+  - size: { width: 768, height: 336 }
+    offset: { x: 144, y: 235 }
+    typography:
+      content: *page_description
+      overflow: shrink
+      align: start
+      color: lightgrey
+      line:
+        amount: 5
+        height: 2.5
+      font:
+        family: Inter
+        style: Normal
\ No newline at end of file
diff --git a/mkdocs.yml b/mkdocs.yml
index d0322ad0..ef93fdf5 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -139,7 +139,7 @@ plugins:
       separator: '[\s\-\.]' 
   - social:
       cards_layout_dir: layouts
-      cards_layout: custom
+      cards_layout: quix
   - glightbox
   - redirects:
       redirect_maps:
@@ -280,8 +280,8 @@ markdown_extensions:
   - pymdownx.mark
   - pymdownx.tilde
   - pymdownx.emoji:
-      emoji_index: !!python/name:materialx.emoji.twemoji
-      emoji_generator: !!python/name:materialx.emoji.to_svg
+      emoji_index: !!python/name:material.extensions.emoji.twemoji
+      emoji_generator: !!python/name:material.extensions.emoji.to_svg
   - pymdownx.details:
   - pymdownx.highlight:
       anchor_linenums: true