diff --git a/config/plugins/automagic-images.yaml b/config/plugins/automagic-images.yaml
new file mode 100644
index 0000000..bc11441
--- /dev/null
+++ b/config/plugins/automagic-images.yaml
@@ -0,0 +1 @@
+enabled: false
diff --git a/themes/natascha/css/custom.css b/themes/natascha/css/custom.css
index 5133f1c..c5bafb7 100644
--- a/themes/natascha/css/custom.css
+++ b/themes/natascha/css/custom.css
@@ -10,19 +10,24 @@
     font-display: swap;
 }
 
+:root {
+    --color-brand: #0081c4;
+    --color-text: #293236;
+    --color-text-light: #909090;
+}
+
 .funky-font {
     font-family: 'Hobo Std', Helvetica, Verdana, Arial;
 }
 
-.text-color-blue  { color: #0081c4; }
-.text-color-white { color: #ffffff; }
-.text-color-dark-grey  { color: #293236; }
-.text-color-light-grey { color: #909090; }
+.text-color-blue       { color: var(--color-brand); }
+.text-color-white      { color: #ffffff; }
+.text-color-dark-grey  { color: var(--color-text); }
+.text-color-light-grey { color: var(--color-text-light); }
 
 html, body {
     font-family: Helvetica, Verdana, Arial;
-    color: #293236;
-    font-weight: bold;
+    color: var(--color-text);
     min-height: 100%;
 }
 
@@ -41,7 +46,7 @@ body {
 }
 
 #main-menu {
-    background-color: #0081c4;
+    background-color: var(--color-brand);
     padding-left: 8px;
     padding-right: 8px;
 }
@@ -66,7 +71,7 @@ body {
 
 #main-menu a.active,
 #main-menu a:hover {
-    color: #293236;
+    color: var(--color-text);
 }
 
 #main-menu .navbar-toggler {
@@ -88,7 +93,7 @@ body {
 }
 
 #main-menu .dropdown-menu {
-    background-color: #0081c4;
+    background-color: var(--color-brand);
     border-color: #fff;
     min-width: 0;
 }
@@ -98,8 +103,8 @@ body {
 }
 
 #main-menu .dropdown-menu .dropdown-item:hover {
-    background-color: #0081c4;
-    color: #293236;
+    background-color: var(--color-brand);
+    color: var(--color-text);
 }
 
 img.social-icon {
@@ -112,10 +117,10 @@ a:hover img.social-icon {
 }
 
 #main-outline {
-    border: 8px solid #0081c4;
+    border: 8px solid var(--color-brand);
     border-top: none;
     min-height: 50vh;
-    background-color: rgba(255, 255, 255, 0.6);
+    background-color: rgba(255, 255, 255, 0.88);
     margin-left: 0;
     margin-right: 0;
 }
@@ -134,7 +139,7 @@ a:hover img.social-icon {
 
 .main-header {
     font-size: 1.8em;
-    color: #0081c4;
+    color: var(--color-brand);
 }
 
 @media (min-width: 768px) {
@@ -151,7 +156,7 @@ a:hover img.social-icon {
 
 footer {
     text-align: center;
-    text-shadow: 1px 1px #293236;
+    text-shadow: 1px 1px var(--color-text);
 }
 
 .gallery-item {
diff --git a/themes/natascha/templates/cv.html.twig b/themes/natascha/templates/cv.html.twig
index 22ec858..702a4c0 100644
--- a/themes/natascha/templates/cv.html.twig
+++ b/themes/natascha/templates/cv.html.twig
@@ -11,6 +11,6 @@
 </div>
 <div class="col-12 col-md-3 p-3 text-center">
     {% set img_logo = page.header.image_logo ? page.media[page.header.image_logo].url : url('theme://images/logo-blauw.png') %}
-    <img src="{{ img_logo }}" class="img-fluid mb-3" alt="Logo Galerie Groot Welsden">
+    <img src="{{ img_logo }}" class="img-fluid mb-3" loading="lazy" alt="Logo Galerie Groot Welsden">
 </div>
 {% endblock %}
diff --git a/themes/natascha/templates/galerie.html.twig b/themes/natascha/templates/galerie.html.twig
index 93e6276..a341fc6 100644
--- a/themes/natascha/templates/galerie.html.twig
+++ b/themes/natascha/templates/galerie.html.twig
@@ -3,7 +3,7 @@
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">
 {% endblock %}
 {% block extra_js %}
-<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js" defer></script>
 {% endblock %}
 {% block content %}
 <div class="row mb-3">
@@ -16,7 +16,7 @@
     {% for i in 1..12 %}
     <div class="col-6 col-md-4 col-lg-3">
         <a href="https://picsum.photos/seed/kunst{{ i }}/800/800" class="glightbox gallery-item" data-gallery="galerie" data-description="Werk {{ i }}">
-            <div class="gallery-thumb"><img src="https://picsum.photos/seed/kunst{{ i }}/350/350" alt="Werk {{ i }}"></div>
+            <div class="gallery-thumb"><img src="https://picsum.photos/seed/kunst{{ i }}/350/350" loading="lazy" alt="Werk {{ i }}"></div>
         </a>
     </div>
     {% endfor %}
diff --git a/themes/natascha/templates/home.html.twig b/themes/natascha/templates/home.html.twig
index 5fd5357..f2ca48e 100644
--- a/themes/natascha/templates/home.html.twig
+++ b/themes/natascha/templates/home.html.twig
@@ -5,7 +5,7 @@
     {% set img_main = page.header.image_main ? page.media[page.header.image_main].url : url('theme://images/portret-2.jpg') %}
     {% set img_secondary = page.header.image_secondary ? page.media[page.header.image_secondary].url : url('theme://images/portret-1.jpg') %}
     <img src="{{ img_main }}" class="img-fluid mb-3" alt="Portret Natascha Rieter">
-    <img src="{{ img_secondary }}" class="img-fluid d-none d-md-block" alt="Portret Natascha Rieter">
+    <img src="{{ img_secondary }}" class="img-fluid d-none d-md-block" loading="lazy" alt="Portret Natascha Rieter">
 </div>
 <div class="col-12 col-md-6 col-lg-6 p-3 text-start">
     <h1 class="funky-font main-header text-center">{{ page.title }}</h1>
@@ -13,6 +13,6 @@
 </div>
 <div class="col-12 col-md-6 col-lg-3 p-3 text-center">
     {% set img_logo = page.header.image_logo ? page.media[page.header.image_logo].url : url('theme://images/logo-blauw.png') %}
-    <img src="{{ img_logo }}" class="img-fluid mb-3" alt="Logo Galerie Groot Welsden">
+    <img src="{{ img_logo }}" class="img-fluid mb-3" loading="lazy" alt="Logo Galerie Groot Welsden">
 </div>
 {% endblock %}
diff --git a/themes/natascha/templates/partials/base.html.twig b/themes/natascha/templates/partials/base.html.twig
index beb43f1..82f9f12 100644
--- a/themes/natascha/templates/partials/base.html.twig
+++ b/themes/natascha/templates/partials/base.html.twig
@@ -1,13 +1,22 @@
 <!doctype html>
-<html lang="nl">
+<html lang="{{ grav.language.active ?? 'nl' }}">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{% if page.title %}{{ page.title }} – {% endif %}Natascha Rieter</title>
     <meta name="description" content="{{ page.header.description ?? 'Keramieke Galerie Groot Welsden – Natascha Rieter' }}">
+    <meta property="og:title" content="{% if page.title %}{{ page.title }} – {% endif %}Natascha Rieter">
+    <meta property="og:description" content="{{ page.header.description ?? 'Keramieke Galerie Groot Welsden – Natascha Rieter' }}">
+    <meta property="og:image" content="{{ url('theme://images/logo-blauw.png', true) }}">
+    <meta property="og:url" content="{{ page.permalink }}">
+    <meta property="og:type" content="website">
+    <link rel="icon" type="image/png" href="{{ url('theme://images/logo-vignet-blauw.png') }}">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
     {% block extra_css %}{% endblock %}
     <link rel="stylesheet" href="{{ url('theme://css/custom.css') }}">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" defer></script>
+    <script src="{{ url('theme://js/main.js') }}" defer></script>
+    {% block extra_js %}{% endblock %}
 </head>
 <body>
 
@@ -25,8 +34,5 @@
     </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-{% block extra_js %}{% endblock %}
-<script src="{{ url('theme://js/main.js') }}"></script>
 </body>
 </html>
diff --git a/themes/natascha/templates/werk-in-detail.html.twig b/themes/natascha/templates/werk-in-detail.html.twig
index d2eb43b..e90970d 100644
--- a/themes/natascha/templates/werk-in-detail.html.twig
+++ b/themes/natascha/templates/werk-in-detail.html.twig
@@ -3,7 +3,7 @@
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">
 {% endblock %}
 {% block extra_js %}
-<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js" defer></script>
 {% endblock %}
 {% block content %}
 <div class="row mb-3">
@@ -13,7 +13,7 @@
     {% for i in 1..8 %}
     <div class="col-6 col-md-4 col-lg-3">
         <a href="https://picsum.photos/seed/detail{{ i }}/800/800" class="glightbox gallery-item" data-gallery="detail" data-description="Werk {{ i }}">
-            <div class="gallery-thumb"><img src="https://picsum.photos/seed/detail{{ i }}/350/350" alt="Werk {{ i }}"></div>
+            <div class="gallery-thumb"><img src="https://picsum.photos/seed/detail{{ i }}/350/350" loading="lazy" alt="Werk {{ i }}"></div>
         </a>
     </div>
     {% endfor %}