diff --git a/VERSION b/VERSION
index d8b698973a4918eb7d323228992b517d7c249f4a..fb2c0766b7cc222e3f7c0296bcd6cbf144995f36 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-2.12.0
+2.13.0
diff --git a/frontend/src/assets/template/avatar/overlay.png b/frontend/src/assets/template/avatar/overlay.png
deleted file mode 100644
index 1abbd4bef2ee0fb483ce7026c17ac5c3e7820ba0..0000000000000000000000000000000000000000
Binary files a/frontend/src/assets/template/avatar/overlay.png and /dev/null differ
diff --git a/frontend/src/assets/template/avatar/overlay1.png b/frontend/src/assets/template/avatar/overlay1.png
new file mode 100644
index 0000000000000000000000000000000000000000..8e1d47e177b17b340a6355c04b028dc9a88624a6
Binary files /dev/null and b/frontend/src/assets/template/avatar/overlay1.png differ
diff --git a/frontend/src/assets/template/avatar/overlay2.png b/frontend/src/assets/template/avatar/overlay2.png
new file mode 100644
index 0000000000000000000000000000000000000000..365e54a65fa83f238aaa3640791b7b3d8d83bddc
Binary files /dev/null and b/frontend/src/assets/template/avatar/overlay2.png differ
diff --git a/frontend/src/assets/template/avatar/overlay3.png b/frontend/src/assets/template/avatar/overlay3.png
new file mode 100644
index 0000000000000000000000000000000000000000..e987df1c4ae68ba11c1e9e0a76220d441b68dcb7
Binary files /dev/null and b/frontend/src/assets/template/avatar/overlay3.png differ
diff --git a/frontend/src/assets/template/avatar/overlay4.png b/frontend/src/assets/template/avatar/overlay4.png
new file mode 100644
index 0000000000000000000000000000000000000000..05f77bc89e5a0a65b726ac4078acbe5fe76620d4
Binary files /dev/null and b/frontend/src/assets/template/avatar/overlay4.png differ
diff --git a/frontend/src/assets/template/avatar/overlay5.png b/frontend/src/assets/template/avatar/overlay5.png
new file mode 100644
index 0000000000000000000000000000000000000000..c90fd5fb58ad2fefc601a7ee85f5944f08583cb4
Binary files /dev/null and b/frontend/src/assets/template/avatar/overlay5.png differ
diff --git a/frontend/src/assets/template/avatar/overlay6.png b/frontend/src/assets/template/avatar/overlay6.png
new file mode 100644
index 0000000000000000000000000000000000000000..563e91ce7dd8e07ec60c201fdb6346ba934baaa9
Binary files /dev/null and b/frontend/src/assets/template/avatar/overlay6.png differ
diff --git a/frontend/src/assets/template/avatar/overlay7.png b/frontend/src/assets/template/avatar/overlay7.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe08ad17f47a3b810654b6abbee024ca3c859361
Binary files /dev/null and b/frontend/src/assets/template/avatar/overlay7.png differ
diff --git a/frontend/src/assets/template/avatar/overlay8.png b/frontend/src/assets/template/avatar/overlay8.png
new file mode 100644
index 0000000000000000000000000000000000000000..bad59476b29e96dd12909b1b6cf750c1325e0a2a
Binary files /dev/null and b/frontend/src/assets/template/avatar/overlay8.png differ
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index 3b97c13133ce10a224cbc3627128f20f55228e6c..1863ff6e67cfdde7734b0a3081141f3adecd7c22 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -26,7 +26,7 @@ export default {
 </script>
 
 <template>
-  <nav class="bg-grey-600 py-7">
+  <nav class="bg-black py-7">
     <div
       class="container container--default flex justify-between flex-col lg:flex-row"
     >
@@ -39,16 +39,13 @@ export default {
         </RouterLink>
         <RouterLink
           to="/"
-          class="text-white pl-4 font-bold text-xl hover:no-underline lg:border-r lg:border-grey-300 lg:pr-8 flex gap-2 items-center"
+          class="text-white pl-4 font-bold text-3xl flex gap-2 items-center font-['Bebas_Neue'] hover:no-underline lg:border-r lg:border-grey-300 lg:pr-8"
         >
           Generátor grafiky
           <img :src="v2Image" class="h-5" alt="Verze 2.0" />
         </RouterLink>
 
-        <div
-          v-if="sideText"
-          class="pl-8 text-white"
-        >
+        <div v-if="sideText" class="pl-8 text-white">
           {{ sideText }}
         </div>
       </div>
diff --git a/frontend/src/components/canvas/Canvas.vue b/frontend/src/components/canvas/Canvas.vue
index 4174ce5aa7a18467d694f6f5e0f832930cde3c13..f73b1b63c75d8215b179ba5f6a52ff24242df6df 100644
--- a/frontend/src/components/canvas/Canvas.vue
+++ b/frontend/src/components/canvas/Canvas.vue
@@ -42,9 +42,11 @@ export default {
       let link = document.createElement("a");
 
       if (
-        window.fileName !== undefined && window.fileName !== null
-        && (typeof window.fileName === 'string' || window.fileName instanceof String)
-        && window.fileName.length >= 1
+        window.fileName !== undefined &&
+        window.fileName !== null &&
+        (typeof window.fileName === "string" ||
+          window.fileName instanceof String) &&
+        window.fileName.length >= 1
       ) {
         link.download = window.fileName;
       } else {
diff --git a/frontend/src/components/canvas/utils.js b/frontend/src/components/canvas/utils.js
index 333a9d63ca85435fe0330d7903e081fe8e40758c..97fb8edc76cb81866ed1d461c9c56b8e382377a4 100644
--- a/frontend/src/components/canvas/utils.js
+++ b/frontend/src/components/canvas/utils.js
@@ -170,13 +170,16 @@ const transformHighlightedText = (
 
     if (characterIsStar) {
       highlightIsActive = !highlightIsActive;
-      text = setCharAt(text, positionWithinString, (
-        (!options.invertHighlight) ?
-        // For now, just put an empty Unicode character that still registers
-        // as one. To do this properly, we would have to adjust the code so that
-        // it goes back one character. But I don't feel like doing that.
-        " " : "‎"
-      ));
+      text = setCharAt(
+        text,
+        positionWithinString,
+        !options.invertHighlight
+          ? // For now, just put an empty Unicode character that still registers
+            // as one. To do this properly, we would have to adjust the code so that
+            // it goes back one character. But I don't feel like doing that.
+            " "
+          : "‎",
+      );
     }
 
     let style = {};
diff --git a/frontend/src/templates.js b/frontend/src/templates.js
index c59610d49ac648aa1784d408b5778bc8f72af3d9..6250f02b92db669151be7469dc8c203556795133 100644
--- a/frontend/src/templates.js
+++ b/frontend/src/templates.js
@@ -169,7 +169,8 @@ const TEMPLATES = {
     name: "Cover na sociální sítě - velký text",
     image: socialCoverLargeTextImage,
     path: "/social-cover-large-text",
-    component: () => import("./views/social_cover_large_text/SocialCoverLargeText.vue"),
+    component: () =>
+      import("./views/social_cover_large_text/SocialCoverLargeText.vue"),
     meta: {
       title: "Cover na sociální sítě - velký text",
     },
diff --git a/frontend/src/views/avatar/Avatar.vue b/frontend/src/views/avatar/Avatar.vue
index 05db82db0dad50f44d468a006cb37d0fba3ac1f4..a13fa0095aa242b777538ea496304be2376cb250 100644
--- a/frontend/src/views/avatar/Avatar.vue
+++ b/frontend/src/views/avatar/Avatar.vue
@@ -9,6 +9,16 @@ import MainContainer from "../../components/MainContainer.vue";
 import ImageInput from "../../components/inputs/ImageInput.vue";
 import ReloadButton from "../../components/reload/ReloadButton.vue";
 import AutoReloadCheckbox from "../../components/reload/AutoReloadCheckbox.vue";
+import OverlaySelect from "./OverlaySelect.vue";
+
+import overlayImage1 from "../../assets/template/avatar/overlay1.png";
+import overlayImage2 from "../../assets/template/avatar/overlay2.png";
+import overlayImage3 from "../../assets/template/avatar/overlay3.png";
+import overlayImage4 from "../../assets/template/avatar/overlay4.png";
+import overlayImage5 from "../../assets/template/avatar/overlay5.png";
+import overlayImage6 from "../../assets/template/avatar/overlay6.png";
+import overlayImage7 from "../../assets/template/avatar/overlay7.png";
+import overlayImage8 from "../../assets/template/avatar/overlay8.png";
 
 import { toRawDeep } from "../../utils";
 </script>
@@ -22,7 +32,38 @@ export default {
     ImageInput,
   },
   data() {
+    const overlayOptions = {
+      overlay1: {
+        title: "Volím Piráty! (žluté pozadí)",
+        overlayImage: overlayImage1,
+      },
+      overlay8: {
+        title: "Volím Piráty! (černé pozadí)",
+        overlayImage: overlayImage8,
+      },
+      overlay7: {
+        title: "Budoucnost bez korupce (žluté pozadí)",
+        overlayImage: overlayImage7,
+      },
+      overlay2: {
+        title: "Budoucnost bez korupce (černé pozadí)",
+        overlayImage: overlayImage2,
+      },
+      overlay4: {
+        title: "Můj hlas mají Piráti! (žluté pozadí)",
+        overlayImage: overlayImage4,
+      },
+      overlay3: {
+        title: "Můj hlas mají Piráti! (černé pozadí)",
+        overlayImage: overlayImage3,
+      },
+    };
+
     return {
+      overlayOptions: overlayOptions,
+      defaultOverlay: overlayOptions.overlay1,
+      overlayImage: null,
+      overlayName: null,
       mainImage: null,
       autoRedraw: true,
     };
@@ -31,6 +72,7 @@ export default {
     async reloadCanvasProperties() {
       const canvasProperties = {
         mainImage: this.mainImage,
+        overlayImage: this.overlayImage,
       };
 
       await this.$refs.canvas.redraw(canvasProperties);
@@ -40,7 +82,7 @@ export default {
     window.fileName = "Profilovy obrazek.png";
 
     this.$watch(
-      (vm) => [vm.mainImage],
+      (vm) => [vm.mainImage, vm.overlayImage],
       async (value) => {
         if (this.autoRedraw) {
           await this.reloadCanvasProperties();
@@ -73,14 +115,23 @@ export default {
       <template v-slot:right>
         <div class="prose max-w-none mb-4">
           <ol>
-            <li>Klikněte na "vybrat soubor" a nahrajte svou profilovou fotografii.</li>
-            <li>Klikněte na "stáhnout", vyberte umístění ve svém přístroji a zvolte možnost "uložit"</li>
-            <li>Zobrazte si svůj profil na sociální síti a aktualizujte si profilovou fotku.</li>
+            <li>
+              Klikněte na "vybrat soubor" a nahrajte svou profilovou fotografii.
+            </li>
+            <li>
+              Klikněte na "stáhnout", vyberte umístění ve svém přístroji a
+              zvolte možnost "uložit"
+            </li>
+            <li>
+              Zobrazte si svůj profil na sociální síti a aktualizujte si
+              profilovou fotku.
+            </li>
           </ol>
 
           <p>
             <strong>
-              Děkujeme za podporu a nezapomeňte 7. a 8. června 2024 volit Piráty do Europarlamentu!
+              Děkujeme za podporu a nezapomeňte 20. a 21. září 2024 volit
+              Piráty!
             </strong>
           </p>
         </div>
@@ -92,6 +143,16 @@ export default {
           zIndex="10"
         />
 
+        <OverlaySelect
+          name="Šablona"
+          :defaultSelection="defaultOverlay"
+          v-model:overlayImage="overlayImage"
+          v-model:overlayName="overlayName"
+          :options="Object.values(overlayOptions)"
+          :important="true"
+          zIndex="9"
+        />
+
         <ReloadButton :parentRefs="$refs" @click="reloadCanvasProperties" />
         <AutoReloadCheckbox v-model="autoRedraw" />
       </template>
diff --git a/frontend/src/views/avatar/OverlaySelect.vue b/frontend/src/views/avatar/OverlaySelect.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7306f7631b860a60f8ebf4a72b71b621a78af06a
--- /dev/null
+++ b/frontend/src/views/avatar/OverlaySelect.vue
@@ -0,0 +1,62 @@
+<script setup>
+import VueSelect from "vue-select";
+import InputHeading from "../../components/inputs/InputHeading.vue";
+</script>
+
+<script>
+export default {
+  components: { InputHeading, VueSelect },
+  props: [
+    "name",
+    "important",
+    "zIndex",
+    "overlayImage",
+    "overlayName",
+    "defaultSelection",
+    "options",
+  ],
+  emits: ["update:overlayImage", "update:overlayName"],
+  data() {
+    return {
+      selectedOption: this.defaultSelection,
+    };
+  },
+  watch: {
+    selectedOption: {
+      async handler(value) {
+        const overlayImage = new Image();
+
+        await new Promise((resolve) => {
+          overlayImage.onload = () => {
+            resolve();
+          };
+
+          overlayImage.src = value.overlayImage;
+        });
+
+        this.$emit("update:overlayImage", overlayImage);
+        this.$emit("update:overlayName", value.title);
+      },
+      immediate: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <section
+    class="flex flex-col gap-2 bg-gray-100 p-4 drop-shadow-md"
+    :style="{ 'z-index': zIndex }"
+  >
+    <InputHeading :name="name" :important="important" icon="cog"></InputHeading>
+    <VueSelect
+      :options="options"
+      :clearable="false"
+      v-model="selectedOption"
+      label="title"
+    ></VueSelect>
+    <small class="text-gray-600">
+      <em>Obrázek se může chvíli načítat.</em>
+    </small>
+  </section>
+</template>
diff --git a/frontend/src/views/avatar/canvas.js b/frontend/src/views/avatar/canvas.js
index fdcd2bd58fa0dddd7c5ae83e3f8f5876e5b59cc0..115930a3cc215995e6fa87db9095c16c9b2aebf3 100644
--- a/frontend/src/views/avatar/canvas.js
+++ b/frontend/src/views/avatar/canvas.js
@@ -1,7 +1,5 @@
 import { sortObjects } from "../../components/canvas/utils";
 
-import overlayURL from "../../assets/template/avatar/overlay.png";
-
 let mainImage = null;
 let overlayImage = null;
 let mainImageSource = null;
@@ -74,18 +72,18 @@ const redraw = async (canvas, options) => {
 
   /* BEGIN Overlay render */
 
-  if (overlayImage === null) {
-    overlayImage = new Image();
-
-    await new Promise((resolve) => {
-      overlayImage.onload = () => {
-        resolve();
-      };
+  if (
+    options.overlayImage !== null &&
+    (overlayImage === null ||
+      options.overlayImage.src !== overlayImage._element.src)
+  ) {
+    if (overlayImage !== null) {
+      canvas.remove(overlayImage);
+    }
 
-      overlayImage.src = overlayURL;
-    });
+    overlayImage = new Image();
 
-    overlayImage = new fabric.Image(overlayImage, {
+    overlayImage = new fabric.Image(options.overlayImage, {
       selectable: false,
       zIndex: 5,
     });
diff --git a/frontend/src/views/event_poster/EventPoster.vue b/frontend/src/views/event_poster/EventPoster.vue
index 7243d2f36f340b919cf01c1ee59735f9bd766a2e..87e688d43decf1d4041d7f7c1429cdcf77ed274d 100644
--- a/frontend/src/views/event_poster/EventPoster.vue
+++ b/frontend/src/views/event_poster/EventPoster.vue
@@ -69,7 +69,7 @@ export default {
 
       eventLocation: null,
       eventDate: null,
-      
+
       firstColumn: null,
       secondColumn: null,
 
diff --git a/frontend/src/views/event_poster/canvas.js b/frontend/src/views/event_poster/canvas.js
index 9289ea4dac3ada26bdfd25a0a7468804c0b49dca..96259ebecb6e358291660e7fd5824254148bbaa4 100644
--- a/frontend/src/views/event_poster/canvas.js
+++ b/frontend/src/views/event_poster/canvas.js
@@ -163,7 +163,7 @@ const redraw = async (canvas, options) => {
 
     // Keep to a single line no matter what
     canvas.add(mainText);
-  
+
     while (mainText._textLines.length > 1) {
       mainText.set({
         fontSize: mainText.fontSize - 20,
@@ -210,7 +210,7 @@ const redraw = async (canvas, options) => {
     canvas.add(eventLocationText);
 
     eventLocationText.set({
-      left: eventLocationText.left - eventLocationText.width
+      left: eventLocationText.left - eventLocationText.width,
     });
     canvas.renderAll();
   }
diff --git a/frontend/src/views/reel/Reel.vue b/frontend/src/views/reel/Reel.vue
index 2b84d1deed2eb8a601177fb5015c1a80d0bdb868..fda243a6842d45ecccb65514bb2873bf6d3fa83b 100644
--- a/frontend/src/views/reel/Reel.vue
+++ b/frontend/src/views/reel/Reel.vue
@@ -45,7 +45,7 @@ export default {
           background: COLORS.black,
           mainText: COLORS.white,
           highlightedText: COLORS.yellow1,
-          contractedByText: COLORS.white
+          contractedByText: COLORS.white,
         },
       },
       blackText: {
@@ -54,7 +54,7 @@ export default {
           background: COLORS.white,
           mainText: COLORS.black,
           highlightedText: COLORS.yellow1,
-          contractedByText: COLORS.black
+          contractedByText: COLORS.black,
         },
       },
     };
diff --git a/frontend/src/views/reel/canvas.js b/frontend/src/views/reel/canvas.js
index 36b9e4f5605dfdc98ce5706e9e204e26e65a79b5..6aabd092cae81657b64969eb2c4fee4970c333c5 100644
--- a/frontend/src/views/reel/canvas.js
+++ b/frontend/src/views/reel/canvas.js
@@ -28,7 +28,7 @@ const redraw = async (canvas, options) => {
 
   const mainTextMarginTop = Math.ceil(canvas.height * 0.15);
   const mainTextMarginLeft = Math.ceil(canvas.width * 0.05);
-  const mainTextWidth = Math.ceil(canvas.width * 0.9); 
+  const mainTextWidth = Math.ceil(canvas.width * 0.9);
   const mainTextSize = Math.ceil(canvas.height * 0.1);
   const mainTextMaxLines = 7;
   const mainTextLineHeight = 0.85;
@@ -141,10 +141,7 @@ const redraw = async (canvas, options) => {
     logoImageSource = lightLogoImageSource;
   }
 
-  if (
-    logoImage === null
-    || previousLogoImageSource != logoImageSource
-  ) {
+  if (logoImage === null || previousLogoImageSource != logoImageSource) {
     previousLogoImageSource = logoImageSource;
 
     if (logoImage !== null) {
@@ -194,7 +191,7 @@ const redraw = async (canvas, options) => {
     canvas.add(contractedByTextbox);
 
     contractedByTextbox.set({
-      left: contractedByTextbox.left - contractedByTextbox.width
+      left: contractedByTextbox.left - contractedByTextbox.width,
     });
     canvas.renderAll();
   }
diff --git a/frontend/src/views/regional_success/canvas.js b/frontend/src/views/regional_success/canvas.js
index 47131c63197124854cb0dc44a9f05eddd8efdc04..6ffb4e91a451b6faf6209e533d6a566c96d3d19e 100644
--- a/frontend/src/views/regional_success/canvas.js
+++ b/frontend/src/views/regional_success/canvas.js
@@ -84,7 +84,7 @@ const redraw = async (canvas, options) => {
   const contractedByTextSize = Math.ceil(canvas.height * 0.013);
   const contractedByTextMaxWidth = Math.ceil(canvas.width * 0.9);
   const contractedByTextSideMargin = Math.ceil(canvas.width * 0.068);
-  const contractedByTextBottomMargin = Math.ceil(canvas.height * 0.023)
+  const contractedByTextBottomMargin = Math.ceil(canvas.height * 0.023);
 
   const rowsMaxWidth = 425;
   const rowsTextSize = 38;
diff --git a/frontend/src/views/social_cover_large_text/SocialCoverLargeText.vue b/frontend/src/views/social_cover_large_text/SocialCoverLargeText.vue
index 1a7ecc4d6b28f3374ef82fda443175761a33e227..912cff916dcba89340af911e2ee42e9fecf15760 100644
--- a/frontend/src/views/social_cover_large_text/SocialCoverLargeText.vue
+++ b/frontend/src/views/social_cover_large_text/SocialCoverLargeText.vue
@@ -43,7 +43,7 @@ export default {
           background: COLORS.black,
           mainText: COLORS.white,
           highlightedText: COLORS.yellow1,
-          contractedByText: COLORS.black
+          contractedByText: COLORS.black,
         },
       },
     };
diff --git a/frontend/src/views/social_cover_large_text/canvas.js b/frontend/src/views/social_cover_large_text/canvas.js
index 790e6872056ddf45df65f85b8b9f08a3131d3d85..cd7812ae72ac972d9ab9adcca308f812d61a7566 100644
--- a/frontend/src/views/social_cover_large_text/canvas.js
+++ b/frontend/src/views/social_cover_large_text/canvas.js
@@ -23,7 +23,7 @@ const redraw = async (canvas, options) => {
   const contractedByTextSideMargin = Math.ceil(canvas.width * 0.03);
 
   const textMarginLeft = Math.ceil(canvas.width * 0.15);
-  const textWidth = Math.ceil(canvas.width * 0.7); 
+  const textWidth = Math.ceil(canvas.width * 0.7);
   const textMarginRight = Math.ceil(canvas.width * 0.23);
 
   let mainTextMarginBottom = Math.ceil(canvas.height * 0.17);
@@ -39,7 +39,7 @@ const redraw = async (canvas, options) => {
   if (mainImage === null) {
     const image = new Image();
 
-    console.log("Loading image")
+    console.log("Loading image");
 
     const imageLoadPromise = new Promise((resolve) => {
       image.onload = () => {
@@ -48,7 +48,7 @@ const redraw = async (canvas, options) => {
 
       image.src = bgImageSource;
     });
-    
+
     await imageLoadPromise;
 
     mainImage = new fabric.Image(image, {
@@ -81,7 +81,8 @@ const redraw = async (canvas, options) => {
     if (Object.keys(highlightedData.styles).length == 2) {
       // Set the second line to yellow
       for (let i = 0; i < Object.keys(highlightedData.styles[1]).length; i++) {
-        highlightedData.styles[1][i].fill = options.colors.highlightedText.value;
+        highlightedData.styles[1][i].fill =
+          options.colors.highlightedText.value;
       }
     }
 
diff --git a/server/server/templates/index.html b/server/server/templates/index.html
index 374d18e9b4de71dfa2bda3249b259a8ee11e5fc0..8b9d4417adb266cb940bde9799c85d4098ff47a2 100644
--- a/server/server/templates/index.html
+++ b/server/server/templates/index.html
@@ -22,10 +22,9 @@
     </script>
     <title>Generátor grafiky</title>
     <script type="module" crossorigin src="/static/index-a81f7de8.js"></script>
-    <link rel="stylesheet" href="/static/index-9938619d.css">
+    <link rel="stylesheet" href="/static/index-9938619d.css" />
   </head>
   <body>
     <div id="app"></div>
-    
   </body>
 </html>