diff --git a/assets/css/custom.css b/assets/css/custom.css
index 267ae82..c9e8065 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -45,6 +45,16 @@
   height: 100%;
   object-fit: cover;
   z-index: 0;
+  filter: blur(10px) saturate(0.65);
+}
+
+.background-full {
+  opacity: 0;
+  transition: opacity 2s ease, filter 2s ease;
+}
+
+.background-full.loaded {
+  opacity: 1;
   filter: blur(4px) saturate(0.65);
 }
 
diff --git a/content/_index.md b/content/_index.md
index 408946a..9c2760f 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -2,7 +2,7 @@
 description: "KarstTech LLC is a company which provides Technical and Scientific Consulting and Data Science services."
 ---
 
-{{< figure src="img/karsttech_logo_vert.png" >}}
+![KarstTech Logo](img/karsttech_logo_vert.png)
 
 
 {{< lead >}}
diff --git a/content/personal-blog/matrix-synapse-docker-compose/index.md b/content/personal-blog/matrix-synapse-docker-compose/index.md
index d50273d..4c6dbea 100644
--- a/content/personal-blog/matrix-synapse-docker-compose/index.md
+++ b/content/personal-blog/matrix-synapse-docker-compose/index.md
@@ -13,7 +13,7 @@ showFeature = false
 <!--more-->
 
 <div style="width:100%; max-width:640px; aspect-ratio:16/9; position:relative; overflow:hidden;">
-  <iframe src="/matrix-synapse-docker-compose/matrix-synapse-thumbnail.html" style="border:none; width:200%; height:200%; transform:scale(0.5); transform-origin:0 0;"></iframe>
+  <iframe src="/articles-special-content/matrix-synapse-docker-compose/matrix-synapse-thumbnail.html" style="border:none; width:200%; height:200%; transform:scale(0.5); transform-origin:0 0;"></iframe>
 </div>
 
 Synapse is a great implementation of the [matrix] federated chat platform, but the [official documentation](https://matrix-org.github.io/synapse/latest/setup/installation.html) expects you to run several manual initialization steps before your server is ready to use. This gets tedious when you're just want to use a docker compose file to plug in your info and get going, especially if you are using tools like Portainer to administrate your containers.
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
new file mode 100644
index 0000000..c05de4a
--- /dev/null
+++ b/layouts/_default/_markup/render-image.html
@@ -0,0 +1,32 @@
+{{ $url := urls.Parse .Destination }}
+{{ $altText := .Text }}
+{{ $caption := .Title }}
+{{ $class := "mx-auto my-0 rounded-md" }}
+
+{{ $file := $url.Path }}
+{{ $img := .Page.Resources.GetMatch $file }}
+{{- if and (not $img) .Page.File }}
+  {{ $path := path.Join .Page.File.Dir $file }}
+  {{ $img = resources.Get $path }}
+{{ end -}}
+
+{{/* https://github.com/gohugoio/hugo/pull/10666 */}}
+{{- $params := $url.Query -}}
+{{- $x2Param := $params.Get "2x" -}}
+{{- $x2 := false -}}
+{{- if eq $x2Param "true" -}}
+  {{- $x2 = true -}}
+{{- end -}}
+
+<figure>
+  {{- with $img -}}
+    {{ $lazy := $.Page.Site.Params.enableImageLazyLoading | default true }}
+    {{ $webp := $.Page.Site.Params.enableImageWebp | default true }}
+    {{ $lqip := true }}
+    {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class "x2" $x2 "lazy" $lazy "webp" $webp "lqip" $lqip) }}
+  {{- else -}}
+    <img src="{{ .Destination | safeURL }}" alt="{{ $altText }}" class="{{ $class }}" />
+  {{- end -}}
+  {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
+</figure>
+
diff --git a/layouts/partials/background-images.html b/layouts/partials/background-images.html
index 8399530..6f0862a 100644
--- a/layouts/partials/background-images.html
+++ b/layouts/partials/background-images.html
@@ -1,15 +1,35 @@
 {{ $images := slice }}
 {{ range readDir "static/backgrounds" }}
-  {{ if in .Name ".webp" }}
+  {{ if or (in .Name ".webp") (in .Name ".jpg") }}
     {{ $images = $images | append .Name }}
   {{ end }}
 {{ end }}
 
 <div class="background-container">
-  <img id="background-image" alt="Background" class="background-image">
+  <img id="background-thumb" alt="Background" class="background-image">
+  <img id="background-full" alt="Background" class="background-image background-full" loading="lazy">
   <script>
     const images = {{ $images }};
     const randomImage = images[Math.floor(Math.random() * images.length)];
-    document.getElementById('background-image').src = `/backgrounds/${randomImage}`;
+    const thumbImg = document.getElementById('background-thumb');
+    const fullImg = document.getElementById('background-full');
+    const thumbPath = `/backgrounds/thumbs/${randomImage}`;
+    const fullPath = `/backgrounds/${randomImage}`;
+    
+    thumbImg.src = thumbPath;
+    
+    setTimeout(() => {
+      const preloadImg = new Image();
+      preloadImg.onload = () => {
+        fullImg.src = fullPath;
+        fullImg.classList.add('loaded');
+        setTimeout(() => thumbImg.remove(), 2000);
+      };
+      preloadImg.onerror = () => {
+        fullImg.src = fullPath;
+        fullImg.classList.add('loaded');
+      };
+      preloadImg.src = fullPath;
+    }, 800);
   </script>
 </div> 
\ No newline at end of file
diff --git a/layouts/partials/home/page.html b/layouts/partials/home/page.html
index c8e8772..d696c03 100644
--- a/layouts/partials/home/page.html
+++ b/layouts/partials/home/page.html
@@ -1,5 +1,29 @@
 <div class="background-container">
-  <img src="/backgrounds/Apophysis_071008-64.webp" alt="Background" class="background-image">
+  <img id="background-thumb" alt="Background" class="background-image">
+  <img id="background-full" alt="Background" class="background-image background-full" loading="lazy">
+  <script>
+    const thumbImg = document.getElementById('background-thumb');
+    const fullImg = document.getElementById('background-full');
+    const imageName = 'Apophysis_071008-64.webp';
+    const thumbPath = `/backgrounds/thumbs/${imageName}`;
+    const fullPath = `/backgrounds/${imageName}`;
+    
+    thumbImg.src = thumbPath;
+    
+    setTimeout(() => {
+      const preloadImg = new Image();
+      preloadImg.onload = () => {
+        fullImg.src = fullPath;
+        fullImg.classList.add('loaded');
+        setTimeout(() => thumbImg.remove(), 2000);
+      };
+      preloadImg.onerror = () => {
+        fullImg.src = fullPath;
+        fullImg.classList.add('loaded');
+      };
+      preloadImg.src = fullPath;
+    }, 800);
+  </script>
 </div>
 <article class="prose max-w-full dark:prose-invert glass">
   {{ with .Title }}
diff --git a/layouts/partials/logo.html b/layouts/partials/logo.html
new file mode 100644
index 0000000..77d5e11
--- /dev/null
+++ b/layouts/partials/logo.html
@@ -0,0 +1,40 @@
+{{- if .Site.Params.header.logo }}
+  {{- $logo := resources.Get .Site.Params.header.logo }}
+  {{- $logo_dark := resources.Get .Site.Params.header.logoDark }}
+  {{- if $logo }}
+    {{- $logoResized := $logo.Resize (printf "%dx" (div $logo.Width 2)) }}
+    {{- $logoDarkResized := "" }}
+    {{- if $logo_dark }}
+      {{- $logoDarkResized = $logo_dark.Resize (printf "%dx" (div $logo_dark.Width 2)) }}
+    {{- end }}
+    <a href="{{ "" | relLangURL }}" class="mr-2">
+      <!-- prettier-ignore-attribute -->
+      <img
+        src="{{ $logoResized.RelPermalink }}"
+        width="{{ $logoResized.Width }}"
+        height="{{ $logoResized.Height }}"
+        class="max-h-[10rem] max-w-[10rem] object-scale-down object-left
+        {{ if $logo_dark }}hidden dark:flex{{ end }}"
+        alt="{{ .Site.Title }}"
+      />
+      {{- if $logo_dark }}
+        <img
+          src="{{ $logoDarkResized.RelPermalink }}"
+          width="{{ $logoDarkResized.Width }}"
+          height="{{ $logoDarkResized.Height }}"
+          class="max-h-[10rem] max-w-[10rem] object-scale-down object-left dark:hidden"
+          alt="{{ .Site.Title }}"
+        />
+      {{- end }}
+    </a>
+  {{- end }}
+{{- end }}
+{{- if .Site.Params.header.showTitle | default true }}
+  <a
+    class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
+    rel="me"
+    href="{{ "" | relLangURL }}"
+    >{{ .Site.Title | markdownify | emojify }}</a
+  >
+{{- end }}
+
diff --git a/static/matrix-synapse-docker-compose/matrix-synapse-thumbnail.html b/static/articles-special-content/matrix-synapse-docker-compose/matrix-synapse-thumbnail.html
similarity index 100%
rename from static/matrix-synapse-docker-compose/matrix-synapse-thumbnail.html
rename to static/articles-special-content/matrix-synapse-docker-compose/matrix-synapse-thumbnail.html
diff --git a/static/backgrounds/thumbs/Abstract_Lobster.webp b/static/backgrounds/thumbs/Abstract_Lobster.webp
new file mode 100644
index 0000000..c7d56b6
Binary files /dev/null and b/static/backgrounds/thumbs/Abstract_Lobster.webp differ
diff --git a/static/backgrounds/thumbs/AllSeeingEye_Neon.webp b/static/backgrounds/thumbs/AllSeeingEye_Neon.webp
new file mode 100644
index 0000000..0aad15f
Binary files /dev/null and b/static/backgrounds/thumbs/AllSeeingEye_Neon.webp differ
diff --git a/static/backgrounds/thumbs/Apophysis_061231-00.webp b/static/backgrounds/thumbs/Apophysis_061231-00.webp
new file mode 100644
index 0000000..556e7c2
Binary files /dev/null and b/static/backgrounds/thumbs/Apophysis_061231-00.webp differ
diff --git a/static/backgrounds/thumbs/Apophysis_071008-64.webp b/static/backgrounds/thumbs/Apophysis_071008-64.webp
new file mode 100644
index 0000000..5b3784a
Binary files /dev/null and b/static/backgrounds/thumbs/Apophysis_071008-64.webp differ
diff --git a/static/backgrounds/thumbs/Beautiful_Poison.webp b/static/backgrounds/thumbs/Beautiful_Poison.webp
new file mode 100644
index 0000000..31644eb
Binary files /dev/null and b/static/backgrounds/thumbs/Beautiful_Poison.webp differ
diff --git a/static/backgrounds/thumbs/Blood_Rose_2_00068.webp b/static/backgrounds/thumbs/Blood_Rose_2_00068.webp
new file mode 100644
index 0000000..e36aa38
Binary files /dev/null and b/static/backgrounds/thumbs/Blood_Rose_2_00068.webp differ
diff --git a/static/backgrounds/thumbs/Containment_Background.jpg b/static/backgrounds/thumbs/Containment_Background.jpg
new file mode 100644
index 0000000..81ebc38
Binary files /dev/null and b/static/backgrounds/thumbs/Containment_Background.jpg differ
diff --git a/static/backgrounds/thumbs/Galaxy_In_Motion.webp b/static/backgrounds/thumbs/Galaxy_In_Motion.webp
new file mode 100644
index 0000000..ca1863b
Binary files /dev/null and b/static/backgrounds/thumbs/Galaxy_In_Motion.webp differ
diff --git a/static/backgrounds/thumbs/Neuron_2.webp b/static/backgrounds/thumbs/Neuron_2.webp
new file mode 100644
index 0000000..dd280a4
Binary files /dev/null and b/static/backgrounds/thumbs/Neuron_2.webp differ
diff --git a/static/backgrounds/thumbs/Neuron_Purple.webp b/static/backgrounds/thumbs/Neuron_Purple.webp
new file mode 100644
index 0000000..101b3c1
Binary files /dev/null and b/static/backgrounds/thumbs/Neuron_Purple.webp differ
diff --git a/static/backgrounds/thumbs/Plague.webp b/static/backgrounds/thumbs/Plague.webp
new file mode 100644
index 0000000..05f8954
Binary files /dev/null and b/static/backgrounds/thumbs/Plague.webp differ
diff --git a/static/backgrounds/thumbs/Poison_Rose.webp b/static/backgrounds/thumbs/Poison_Rose.webp
new file mode 100644
index 0000000..d205836
Binary files /dev/null and b/static/backgrounds/thumbs/Poison_Rose.webp differ
diff --git a/static/backgrounds/thumbs/Surgery.webp b/static/backgrounds/thumbs/Surgery.webp
new file mode 100644
index 0000000..542cc48
Binary files /dev/null and b/static/backgrounds/thumbs/Surgery.webp differ
diff --git a/static/backgrounds/thumbs/Tendrillia.webp b/static/backgrounds/thumbs/Tendrillia.webp
new file mode 100644
index 0000000..331e879
Binary files /dev/null and b/static/backgrounds/thumbs/Tendrillia.webp differ
diff --git a/static/backgrounds/thumbs/Triangly_2.webp b/static/backgrounds/thumbs/Triangly_2.webp
new file mode 100644
index 0000000..029bd09
Binary files /dev/null and b/static/backgrounds/thumbs/Triangly_2.webp differ
diff --git a/static/backgrounds/thumbs/Unending_Spiral.webp b/static/backgrounds/thumbs/Unending_Spiral.webp
new file mode 100644
index 0000000..1733a6a
Binary files /dev/null and b/static/backgrounds/thumbs/Unending_Spiral.webp differ
diff --git a/static/backgrounds/thumbs/name_me.webp b/static/backgrounds/thumbs/name_me.webp
new file mode 100644
index 0000000..742a6bc
Binary files /dev/null and b/static/backgrounds/thumbs/name_me.webp differ