diff --git a/.github/assets/example-cloze-show-answer.gif b/.github/assets/example-cloze-show-answer.gif
new file mode 100644
index 0000000..e90b96f
Binary files /dev/null and b/.github/assets/example-cloze-show-answer.gif differ
diff --git a/.github/workflows/github-actions-dev.yml b/.github/workflows/github-actions-dev.yml
index 522ae26..5cfb700 100644
--- a/.github/workflows/github-actions-dev.yml
+++ b/.github/workflows/github-actions-dev.yml
@@ -21,7 +21,7 @@ jobs:
           ls
 
       - name: Upload artifact
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         with:
           name: MDKaTeX.ankiaddon
           path: ./MDKaTeX.ankiaddon
diff --git a/MDKaTeX/HTMLandCSS.py b/MDKaTeX/HTMLandCSS.py
index 30cb571..f263365 100644
--- a/MDKaTeX/HTMLandCSS.py
+++ b/MDKaTeX/HTMLandCSS.py
@@ -1,4 +1,5 @@
 """ This file contains all the HTML / CSS strings for the different card types """
+
 import os
 
 
@@ -21,11 +22,13 @@ def read_file(path):
 
 script_base = read_file("html/script_base.html")
 script_cloze = read_file("html/script_cloze.html")
+script_cloze_show = read_file("html/script_cloze_show.html")
 
 front = read_file("html/front.html") + script_base
 back = read_file("html/back.html") + script_base
 
 front_cloze = read_file("html/front_cloze.html") + script_cloze
+front_cloze_show = read_file("html/front_cloze.html") + script_cloze_show
 back_cloze = read_file("html/back_cloze.html") + script_cloze
 
 css = read_file("css/style_import.css")
diff --git a/MDKaTeX/__init__.py b/MDKaTeX/__init__.py
index 23b6c9a..a90f808 100644
--- a/MDKaTeX/__init__.py
+++ b/MDKaTeX/__init__.py
@@ -2,7 +2,16 @@
 import shutil
 import re
 
-from .HTMLandCSS import HTMLforEditor, read_file, front, back, front_cloze, back_cloze, css
+from .HTMLandCSS import (
+    HTMLforEditor,
+    read_file,
+    front,
+    back,
+    front_cloze,
+    back_cloze,
+    front_cloze_show,
+    css,
+)
 from aqt import mw
 from anki.hooks import addHook
 import anki
@@ -20,7 +29,7 @@ def markdownPreview(editor):
         editor.web.eval(HTMLforEditor)
     else:  # removes the markdown preview
         editor.web.eval(
-        """
+            """
         var area = document.getElementById('markdown-area');
         if(area) area.remove();
         """
@@ -37,11 +46,14 @@ def create_model_if_necessacy():
     """
     model = mw.col.models.by_name(MODEL_NAME + " Basic (Color)")
     model_cloze = mw.col.models.by_name(MODEL_NAME + " Cloze (Color)")
+    model_cloze_show = mw.col.models.by_name(MODEL_NAME + " Cloze + Show Cloze (Color)")
 
     if not model:
         create_model()
     if not model_cloze:
         create_model_cloze()
+    if not model_cloze_show:
+        create_model_cloze_show()
 
     update()
 
@@ -89,10 +101,33 @@ def create_model_cloze():
     m.save(model)
 
 
+def create_model_cloze_show():
+    """Creates the Cloze Card type"""
+    m = mw.col.models
+    model = m.new(MODEL_NAME + " Cloze + Show Cloze (Color)")
+    model["type"] = anki.consts.MODEL_CLOZE
+
+    field = m.newField("Text")
+    m.addField(model, field)
+
+    field = m.newField("Back Extra")
+    m.addField(model, field)
+
+    template = m.newTemplate(MODEL_NAME + " Cloze + Show Cloze (Color)")
+    template["qfmt"] = front_cloze_show
+    template["afmt"] = back_cloze
+    model["css"] = css
+
+    m.addTemplate(model, template)
+    m.add(model)
+    m.save(model)
+
+
 def update():
     """Updates the card types the addon has a pending update"""
     model = mw.col.models.by_name(MODEL_NAME + " Basic (Color)")
     model_cloze = mw.col.models.by_name(MODEL_NAME + " Cloze (Color)")
+    model_cloze_show = mw.col.models.by_name(MODEL_NAME + " Cloze + Show Cloze (Color)")
 
     model["tmpls"][0]["qfmt"] = front
     model["tmpls"][0]["afmt"] = back
@@ -102,8 +137,13 @@ def update():
     model_cloze["tmpls"][0]["afmt"] = back_cloze
     model_cloze["css"] = css
 
+    model_cloze_show["tmpls"][0]["qfmt"] = front_cloze_show
+    model_cloze_show["tmpls"][0]["afmt"] = back_cloze
+    model_cloze_show["css"] = css
+
     mw.col.models.save(model)
     mw.col.models.save(model_cloze)
+    mw.col.models.save(model_cloze_show)
 
     if os.path.isdir(os.path.join(mw.col.media.dir(), "_katex")):
         shutil.rmtree(os.path.join(mw.col.media.dir(), "_katex"))
@@ -113,18 +153,16 @@ def update():
 
     addon_path = os.path.join(os.path.dirname(os.path.realpath(__file__)))
 
-    _write_data("_style.css", bytes(read_file("css/_style.css"), 'utf-8'))
-    _add_file(os.path.join(addon_path, "css",  "_user_style.css"), "_user_style.css")
+    _write_data("_style.css", bytes(read_file("css/_style.css"), "utf-8"))
+    _add_file(os.path.join(addon_path, "css", "_user_style.css"), "_user_style.css")
     _add_file(os.path.join(addon_path, "_katex.min.js"), "_katex.min.js")
     _add_file(os.path.join(addon_path, "_katex.css"), "_katex.css")
     _add_file(os.path.join(addon_path, "_auto-render.js"), "_auto-render.js")
-    _add_file(os.path.join(addon_path, "_markdown-it.min.js"),
-              "_markdown-it.min.js")
+    _add_file(os.path.join(addon_path, "_markdown-it.min.js"), "_markdown-it.min.js")
     _add_file(os.path.join(addon_path, "_highlight.css"), "_highlight.css")
     _add_file(os.path.join(addon_path, "_highlight.js"), "_highlight.js")
     _add_file(os.path.join(addon_path, "_mhchem.js"), "_mhchem.js")
-    _add_file(os.path.join(addon_path, "_markdown-it-mark.js"),
-              "_markdown-it-mark.js")
+    _add_file(os.path.join(addon_path, "_markdown-it-mark.js"), "_markdown-it-mark.js")
 
     for katex_font in os.listdir(os.path.join(addon_path, "fonts")):
         _add_file(os.path.join(addon_path, "fonts", katex_font), katex_font)
diff --git a/MDKaTeX/css/_style.css b/MDKaTeX/css/_style.css
index 8538b0d..919542a 100644
--- a/MDKaTeX/css/_style.css
+++ b/MDKaTeX/css/_style.css
@@ -1,17 +1,22 @@
-.card, .fields {
+.card,
+.fields {
   font-family: arial;
   font-size: 20px;
   color: black;
   background-color: white;
 }
 
-table, th, td {
-	border: 1px solid black;
-	border-collapse: collapse;
+table,
+th,
+td {
+  border: 1px solid black;
+  border-collapse: collapse;
 }
 
-#front, #back, #extra {
-	visibility: hidden;
+#front,
+#back,
+#extra {
+  visibility: hidden;
 }
 
 pre code {
@@ -22,16 +27,18 @@ pre code {
 }
 
 .cloze {
-	color: #42C0FB !important;
-  display: inline-block;
+  color: #42C0FB !important;
+  display: inline-flex;
 }
 
 .cloze-inactive {
   display: inline-block;
 }
 
-.nightMode, .night-mode, .night_mode {
-  background-color: #0f0f0f !important; 
+.nightMode,
+.night-mode,
+.night_mode {
+  background-color: #0f0f0f !important;
   color: #c0c0c0 !important;
 }
 
diff --git a/MDKaTeX/html/script_cloze.html b/MDKaTeX/html/script_cloze.html
index bfb519f..367d478 100644
--- a/MDKaTeX/html/script_cloze.html
+++ b/MDKaTeX/html/script_cloze.html
@@ -182,7 +182,6 @@
   }
 
   function restoreHTMLElementsInString(str) {
-    console.log(str);
     for (let i = 0; i < restoreElements.length; i++) {
       if (restoreElements[i].is_plaintext) {
         str = str.replaceAll(restoreElements[i].from, restoreElements[i].to);
@@ -192,4 +191,4 @@
     }
     return str;
   }
-</script>
+</script>
\ No newline at end of file
diff --git a/MDKaTeX/html/script_cloze_show.html b/MDKaTeX/html/script_cloze_show.html
new file mode 100644
index 0000000..ef74de2
--- /dev/null
+++ b/MDKaTeX/html/script_cloze_show.html
@@ -0,0 +1,232 @@
+<script>
+  var fields = [...document.querySelectorAll(".field")];
+  var getResources = [
+    getCSS("_katex.css", "https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"),
+    getCSS("_highlight.css", "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/default.min.css"),
+    getScript("_highlight.js", "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js"),
+    getScript("_katex.min.js", "https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js"),
+    getScript("_auto-render.js", "https://cdn.jsdelivr.net/gh/Jwrede/Anki-KaTeX-Markdown/auto-render-cdn.js"),
+    getScript("_markdown-it.min.js", "https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.0.4/markdown-it.min.js"),
+    getScript("_markdown-it-mark.js", "https://cdn.jsdelivr.net/gh/Jwrede/Anki-KaTeX-Markdown/_markdown-it-mark.js")
+  ];
+  Promise.all(getResources).then(() => getScript("_mhchem.js", "https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/contrib/mhchem.min.js")).then(render).catch(show);
+
+
+  function getScript(path, altURL) {
+    return new Promise((resolve, reject) => {
+      let script = document.createElement("script");
+      script.onload = resolve;
+      script.onerror = function () {
+        let script_online = document.createElement("script");
+        script_online.onload = resolve;
+        script_online.onerror = reject;
+        script_online.src = altURL;
+        document.head.appendChild(script_online);
+      };
+      script.src = path;
+      document.head.appendChild(script);
+    });
+  }
+
+  function replaceSpan(str) {
+    let tokenized = str.split(/(<span.*?>|<\/span>)/g);
+    let isCloze = false;
+    tokenized = tokenized.map((element, idx) => {
+      if (element.includes("<span class='cloze'") || element.includes('<span class="cloze"')) {
+        isCloze = true;
+        return '<span class="cloze">';
+      } else if (isCloze && element.includes("</span>")) {
+        isCloze = false;
+        return "</span>";
+      } else if (element.includes("<span")) {
+        return "";
+      } else if (element.includes("</span>")) {
+        return "";
+      } else {
+        return element;
+      }
+    });
+    return tokenized.join("");
+  }
+
+  function getCSS(path, altURL) {
+    return new Promise((resolve, reject) => {
+      var css = document.createElement("link");
+      css.setAttribute("rel", "stylesheet");
+      css.type = "text/css";
+      css.onload = resolve;
+      css.onerror = function () {
+        var css_online = document.createElement("link");
+        css_online.setAttribute("rel", "stylesheet");
+        css_online.type = "text/css";
+        css_online.onload = resolve;
+        css_online.onerror = reject;
+        css_online.href = altURL;
+        document.head.appendChild(css_online);
+      };
+      css.href = path;
+      document.head.appendChild(css);
+    });
+  }
+
+  function render() {
+    fields.forEach((element) => {
+      renderMath(element.id);
+      markdown(element.id);
+      add_show_button(element.id);
+    });
+    show();
+  }
+
+  var cloze_shown = 0;
+  function add_show_button(ID) {
+    let element = document.getElementById(ID);
+    // get all cloze spans of the form <span class="cloze" data-cloze="this is the answer" data-ordinal="2">[this is the hint]</span>
+    let clozes = [...element.getElementsByClassName("cloze")];
+    clozes = clozes.filter((cloze) => cloze.getAttribute("data-cloze") !== null);
+
+    // Add a button after each cloze span
+    clozes.forEach((cloze) => {
+      // Create the button element
+      let button = document.createElement("button");
+      button.textContent = "Show Answer"; // Text for the button
+      button.style.padding = "4px 6px";
+      button.style.margin = "1px";
+      button.addEventListener("click", () => {
+        button.remove();
+        // Replace the content of the cloze span with the answer
+        cloze.innerHTML = cloze.getAttribute("data-cloze");
+        // set cloze id to "cloze-{cloze_shown}"
+        cloze.id = `cloze-${cloze_shown}`;
+        renderMath(cloze.id);
+        markdown(cloze.id);
+
+        cloze.innerHTML = cloze.children[0].innerHTML;
+
+        cloze_shown++;
+
+        if (cloze_shown === clozes.length) {
+          // TODO : is there an option to trigger the "Show Answer" Anki button?
+        }
+      });
+      // Insert the button after the cloze span
+      cloze.insertAdjacentElement("afterend", button);
+    });
+  }
+
+
+  function show() {
+    fields.forEach((element) => {
+      document.getElementById(element.id).style.visibility = "visible";
+    });
+  }
+
+  function renderMath(ID) {
+    let text = document.getElementById(ID).innerHTML;
+    text = replaceInString(text);
+    text = text.replaceAll("\\$", "⛳");
+    text = text.replaceAll("\\:", "🉐");
+    document.getElementById(ID).innerHTML = text;
+    renderMathInElement(document.getElementById(ID), {
+      delimiters: [
+        { left: "$$", right: "$$", display: true },
+        { left: "$", right: "$", display: false },
+      ],
+      throwOnError: false,
+    });
+  }
+
+  function markdown(ID) {
+    // setup markdown
+    let md = new markdownit({
+      typographer: true, html: true, highlight: function (str, lang) {
+        if (lang && hljs.getLanguage(lang)) {
+          try {
+            return hljs.highlight(str, { language: lang }).value;
+          } catch (__) { }
+        }
+
+        return ""; // use external default escaping
+      },
+    }).use(markdownItMark);
+
+    // preprocessing
+    let element = document.getElementById(ID);
+    const clozes = [...element.getElementsByClassName("cloze")];
+    for (let i = 0; i < clozes.length; i++) {
+      clozes[i].innerHTML = md.render(clozes[i].innerHTML).
+        replace(/<p>|<\/p>/gi, "").replace(/<pre>/gi, "<pre class='cloze'>")
+      let parentNode = clozes[i].parentNode;
+      parentNode.replaceChild(document.createTextNode("REPLACE_ME_CLOZE"), clozes[i]);
+    }
+    //
+    const inactiveClozes = [...element.getElementsByClassName("cloze-inactive")];
+    for (let i = 0; i < inactiveClozes.length; i++) {
+      inactiveClozes[i].innerHTML = md.render(inactiveClozes[i].innerHTML).
+        replace(/<p>|<\/p>/gi, "")
+      let parentNode = inactiveClozes[i].parentNode;
+      parentNode.replaceChild(document.createTextNode("REPLACE_ME_INACTIVE_CLOZE"), inactiveClozes[i]);
+    }
+    // render
+    text = replaceHTMLElementsInString(document.getElementById(ID).innerHTML);
+    text = md.render(text);
+    // post processing
+    for (let i = 0; i < clozes.length; i++) {
+      text = text.replace("REPLACE_ME_CLOZE", clozes[i].outerHTML);
+    }
+    for (let i = 0; i < inactiveClozes.length; i++) {
+      text = text.replace("REPLACE_ME_INACTIVE_CLOZE", inactiveClozes[i].outerHTML);
+    }
+    text = restoreHTMLElementsInString(text);
+    text = text.replaceAll("⛳", "$");
+    text = text.replaceAll("🉐", ":");
+    document.getElementById(ID).innerHTML = text.replace(/&lt;\/span&gt;/gi, "</span>");
+  }
+
+  function replaceInString(str) {
+    str = str.replace(/<[\/]?pre[^>]*>/gi, "");
+    str = str.replace(/<br\s*[\/]?[^>]*>/gi, "\n");
+    str = str.replace(/<div[^>]*>/gi, "\n");
+    // Thanks Graham A!
+    str = str.replace(/<\/div[^>]*>/g, "\n");
+    return replaceHTMLElementsInString(str);
+  }
+
+  replacementElements = [
+    { from: "\\<", to: "➿", is_plaintext: true },
+    { from: "\\>", to: "➰", is_plaintext: true },
+    { from: "&amp;", to: "&" },
+    { from: "&nbsp;", to: " " },
+    { from: "&tab;", to: "	" },
+  ];
+
+  restoreElements = [
+    { from: "➿", to: "<", is_plaintext: true },
+    { from: "➰", to: ">", is_plaintext: true },
+    { from: "&amp;", to: "&", is_plaintext: true },
+    { from: "&amp;lt;", to: "&lt;", is_plaintext: true },
+    { from: "&amp;gt;", to: "&gt;", is_plaintext: true },
+  ];
+
+  function replaceHTMLElementsInString(str) {
+    for (let i = 0; i < replacementElements.length; i++) {
+      if (replacementElements[i].is_plaintext) {
+        str = str.replaceAll(replacementElements[i].from, replacementElements[i].to);
+      } else {
+        str = str.replace(new RegExp(replacementElements[i].from, "gi"), replacementElements[i].to);
+      }
+    }
+    return str;
+  }
+
+  function restoreHTMLElementsInString(str) {
+    for (let i = 0; i < restoreElements.length; i++) {
+      if (restoreElements[i].is_plaintext) {
+        str = str.replaceAll(restoreElements[i].from, restoreElements[i].to);
+      } else {
+        str = str.replace(new RegExp(restoreElements[i].from, "gi"), restoreElements[i].to);
+      }
+    }
+    return str;
+  }
+</script>
\ No newline at end of file
diff --git a/README.md b/README.md
index 88f915b..66a6af3 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,12 @@
 # Anki Markdown
 
+
+## Latest Release : New Card Type "Markdown and KaTeX Cloze + Show Cloze (Color)"
+
+![Latest Update](.github/assets/example-cloze-show-answer.gif)
+
+## How to use 
+
 [Download Anki Add-On](https://ankiweb.net/shared/info/1786114227)
 
 Adding support and improvements of how cards are displayed.