diff --git a/Dracula.css b/Dracula.css
new file mode 100644
index 0000000..cc143b6
--- /dev/null
+++ b/Dracula.css
@@ -0,0 +1,440 @@
+/* Dracula preview theme for MacDown
+   Based on GitHub2.css layout with Dracula color palette
+   Created by Khalid Maqsudi
+   Dracula colors:
+     background:  #282a36
+     current line:#44475a
+     foreground:  #f8f8f2
+     comment:     #6272a4
+     cyan:        #8be9fd
+     green:       #50fa7b
+     orange:      #ffb86c
+     pink:        #ff79c6
+     purple:      #bd93f9
+     red:         #ff5555
+     yellow:      #f1fa8c
+*/
+
+body {
+  font-family: Helvetica, arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.6;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background-color: #282a36;
+  color: #f8f8f2;
+  padding: 30px; }
+
+body > *:first-child {
+  margin-top: 0 !important; }
+body > *:last-child {
+  margin-bottom: 0 !important; }
+
+a {
+  color: #8be9fd; }
+a.absent {
+  color: #ff5555; }
+a.anchor {
+  display: block;
+  padding-left: 30px;
+  margin-left: -30px;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0; }
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 20px 0 10px;
+  padding: 0;
+  font-weight: bold;
+  color: #bd93f9;
+  -webkit-font-smoothing: antialiased;
+  cursor: text;
+  position: relative; }
+
+h1 tt, h1 code { font-size: inherit; }
+h2 tt, h2 code { font-size: inherit; }
+h3 tt, h3 code { font-size: inherit; }
+h4 tt, h4 code { font-size: inherit; }
+h5 tt, h5 code { font-size: inherit; }
+h6 tt, h6 code { font-size: inherit; }
+
+h1 {
+  font-size: 28px; }
+
+h2 {
+  font-size: 24px;
+  border-bottom: 1px solid #44475a; }
+
+h3 {
+  font-size: 18px; }
+
+h4 {
+  font-size: 16px; }
+
+h5 {
+  font-size: 14px; }
+
+h6 {
+  font-size: 14px;
+  color: #6272a4; }
+
+p, blockquote, ul, ol, dl, li, table, pre {
+  margin: 15px 0; }
+
+hr {
+  background-color: #6272a4;
+  border: 0 none;
+  color: #6272a4;
+  height: 2px;
+  padding: 0; }
+
+body > h2:first-child { margin-top: 0; padding-top: 0; }
+body > h1:first-child { margin-top: 0; padding-top: 0; }
+body > h1:first-child + h2 { margin-top: 0; padding-top: 0; }
+body > h3:first-child,
+body > h4:first-child,
+body > h5:first-child,
+body > h6:first-child { margin-top: 0; padding-top: 0; }
+
+a:first-child h1, a:first-child h2, a:first-child h3,
+a:first-child h4, a:first-child h5, a:first-child h6 {
+  margin-top: 0;
+  padding-top: 0; }
+
+h1 p, h2 p, h3 p, h4 p, h5 p, h6 p {
+  margin-top: 0; }
+
+li p.first {
+  display: inline-block; }
+li {
+  margin: 0; }
+ul, ol {
+  padding-left: 30px; }
+
+ul :first-child, ol :first-child {
+  margin-top: 0; }
+
+/* List bullets and enumerators in pink */
+ul li::marker {
+  color: #ff79c6; }
+ol li::marker {
+  color: #ff79c6; }
+
+dl {
+  padding: 0; }
+dl dt {
+  font-size: 14px;
+  font-weight: bold;
+  font-style: italic;
+  color: #f1fa8c;
+  padding: 0;
+  margin: 15px 0 5px; }
+  dl dt:first-child { padding: 0; }
+  dl dt > :first-child { margin-top: 0; }
+  dl dt > :last-child { margin-bottom: 0; }
+dl dd {
+  margin: 0 0 15px;
+  padding: 0 15px; }
+  dl dd > :first-child { margin-top: 0; }
+  dl dd > :last-child { margin-bottom: 0; }
+
+blockquote {
+  border-left: 4px solid #6272a4;
+  padding: 0 15px;
+  color: #6272a4; }
+  blockquote > :first-child { margin-top: 0; }
+  blockquote > :last-child { margin-bottom: 0; }
+
+table {
+  padding: 0;
+  border-collapse: collapse; }
+table tr {
+  border-top: 1px solid #44475a;
+  background-color: #282a36;
+  margin: 0;
+  padding: 0; }
+table tr:nth-child(2n) {
+  background-color: #44475a; }
+table tr th {
+  font-weight: bold;
+  border: 1px solid #44475a;
+  color: #bd93f9;
+  margin: 0;
+  padding: 6px 13px; }
+table tr td {
+  border: 1px solid #44475a;
+  margin: 0;
+  padding: 6px 13px; }
+table tr th :first-child, table tr td :first-child { margin-top: 0; }
+table tr th :last-child, table tr td :last-child { margin-bottom: 0; }
+
+img {
+  max-width: 100%; }
+
+/* Inline code — green */
+code, tt {
+  margin: 0 2px;
+  padding: 0 5px;
+  white-space: nowrap;
+  border: 1px solid #44475a;
+  background-color: #44475a;
+  color: #50fa7b;
+  border-radius: 3px; }
+
+/* Code blocks */
+pre code {
+  margin: 0;
+  padding: 0;
+  white-space: pre;
+  border: none;
+  background: transparent; }
+
+.highlight pre {
+  background-color: #44475a;
+  border: 1px solid #6272a4;
+  font-size: 13px;
+  line-height: 19px;
+  overflow: auto;
+  padding: 6px 10px;
+  border-radius: 3px; }
+
+pre {
+  background-color: #44475a;
+  border: 1px solid #6272a4;
+  font-size: 13px;
+  line-height: 19px;
+  overflow: auto;
+  padding: 6px 10px;
+  border-radius: 3px; }
+pre code, pre tt {
+  background-color: transparent;
+  border: none;
+  color: #f8f8f2; }
+
+/* Strong — orange */
+strong {
+  color: #ffb86c; }
+
+/* Emphasis — yellow */
+em {
+  color: #f1fa8c; }
+
+sup {
+  font-size: 0.83em;
+  vertical-align: super;
+  line-height: 0; }
+
+kbd {
+  display: inline-block;
+  padding: 3px 5px;
+  font-size: 11px;
+  line-height: 10px;
+  color: #f8f8f2;
+  vertical-align: middle;
+  background-color: #44475a;
+  border: solid 1px #6272a4;
+  border-bottom-color: #6272a4;
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 #6272a4; }
+
+span.frame {
+  display: block;
+  overflow: hidden; }
+span.frame > span {
+  border: 1px solid #44475a;
+  display: block;
+  float: left;
+  overflow: hidden;
+  margin: 13px 0 0;
+  padding: 7px;
+  width: auto; }
+span.frame span img {
+  display: block;
+  float: left; }
+span.frame span span {
+  clear: both;
+  color: #f8f8f2;
+  display: block;
+  padding: 5px 0 0; }
+span.align-center {
+  display: block;
+  overflow: hidden;
+  clear: both; }
+span.align-center > span {
+  display: block;
+  overflow: hidden;
+  margin: 13px auto 0;
+  text-align: center; }
+span.align-center span img {
+  margin: 0 auto;
+  text-align: center; }
+span.align-right {
+  display: block;
+  overflow: hidden;
+  clear: both; }
+span.align-right > span {
+  display: block;
+  overflow: hidden;
+  margin: 13px 0 0;
+  text-align: right; }
+span.align-right span img {
+  margin: 0;
+  text-align: right; }
+span.float-left {
+  display: block;
+  margin-right: 13px;
+  overflow: hidden;
+  float: left; }
+span.float-left span {
+  margin: 13px 0 0; }
+span.float-right {
+  display: block;
+  margin-left: 13px;
+  overflow: hidden;
+  float: right; }
+span.float-right > span {
+  display: block;
+  overflow: hidden;
+  margin: 13px auto 0;
+  text-align: right; }
+
+/* ============================================================
+   YAML FRONTMATTER (Jekyll front-matter table rendered by MacDown)
+   MacDown renders the frontmatter as a top-level table. We
+   collapse it into a compact info-box rather than a sprawling
+   nested table mess.
+   ============================================================ */
+
+/* Scope only the very first table in the document, which is
+   the frontmatter table MacDown generates */
+body > table:first-of-type {
+  width: 100%;
+  font-size: 12px;
+  background-color: #21222c;
+  border: 1px solid #6272a4;
+  border-radius: 6px;
+  margin-bottom: 24px;
+  overflow: hidden; }
+
+body > table:first-of-type tr {
+  background-color: #21222c;
+  border-top: none; }
+
+body > table:first-of-type tr:nth-child(2n) {
+  background-color: #21222c; }
+
+body > table:first-of-type tr th {
+  background-color: #44475a;
+  color: #bd93f9;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 5px 10px;
+  border: 1px solid #6272a4; }
+
+body > table:first-of-type tr td {
+  color: #f8f8f2;
+  padding: 4px 10px;
+  border: 1px solid #44475a;
+  vertical-align: top; }
+
+/* Nested tables inside frontmatter (the todos array) */
+body > table:first-of-type table {
+  font-size: 11px;
+  margin: 2px 0;
+  background: transparent;
+  border: none; }
+
+body > table:first-of-type table tr {
+  border-top: none;
+  background: transparent; }
+
+body > table:first-of-type table tr:nth-child(2n) {
+  background: transparent; }
+
+body > table:first-of-type table th {
+  background-color: #383a4a;
+  color: #8be9fd;
+  font-size: 10px;
+  padding: 2px 6px;
+  border: 1px solid #44475a; }
+
+body > table:first-of-type table td {
+  color: #f8f8f2;
+  padding: 2px 6px;
+  border: 1px solid #44475a; }
+
+/* ============================================================
+   MERMAID DIAGRAMS
+   MacDown renders ```mermaid blocks as plain <pre><code> since
+   it has no Mermaid renderer. We style them as a clearly-labeled
+   "diagram source" box so they're readable and visually distinct.
+   ============================================================ */
+
+pre code.language-mermaid,
+pre > code.language-mermaid {
+  display: block; }
+
+/* Target the pre wrapping a mermaid code block */
+pre:has(code.language-mermaid) {
+  background-color: #1e1f29;
+  border: 1px dashed #6272a4;
+  border-left: 4px solid #bd93f9;
+  border-radius: 6px;
+  padding: 12px 16px;
+  position: relative; }
+
+/* "Diagram (source)" label via pseudo-element on the code block */
+pre:has(code.language-mermaid)::before {
+  content: "⬡  Mermaid diagram — not rendered";
+  display: block;
+  font-family: Helvetica, arial, sans-serif;
+  font-size: 10px;
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #bd93f9;
+  margin-bottom: 8px;
+  opacity: 0.8; }
+
+pre:has(code.language-mermaid) code {
+  color: #8be9fd;
+  background: transparent;
+  border: none;
+  font-size: 12px;
+  white-space: pre; }
+
+/* ============================================================
+   CALLOUTS / ADMONITIONS  > [!NOTE] > [!WARNING] etc.
+   Cursor AI often generates GitHub-flavored callouts.
+   MacDown renders them as blockquotes so we style by
+   first-line content using :has where possible, with
+   fallback general blockquote styling.
+   ============================================================ */
+
+blockquote:has(p strong:first-child) {
+  border-left: 4px solid #8be9fd;
+  background-color: #21222c;
+  border-radius: 0 4px 4px 0;
+  padding: 10px 15px;
+  color: #f8f8f2; }
+
+* {
+  -webkit-print-color-adjust: exact; }
+
+@media screen and (min-width: 914px) {
+  body {
+    width: 854px;
+    margin: 0 auto; } }
+
+@media print {
+  body {
+    background-color: #282a36;
+    color: #f8f8f2;
+    padding: 2cm; }
+  table, pre {
+    page-break-inside: avoid; }
+  pre {
+    word-wrap: break-word; } }
diff --git a/README.md b/README.md
index 5f6aa08..b60c7b7 100644
--- a/README.md
+++ b/README.md
@@ -2,19 +2,42 @@
 
 > A dark theme for [MacDown](https://macdown.uranusjr.com).
 
-![Screenshot](./screenshot.png)
+![Screenshot](./screenshot.gif)
 
 ## Install
 
-All instructions can be found at [draculatheme.com/macdown](https://draculatheme.com/macdown).
+### Editor theme (`Dracula.style`)
+
+1. Go to **MacDown → Preferences → Editor** and press **Reveal**
+2. Copy `Dracula.style` into the `Themes` directory
+3. Press **Reload**, then select **Dracula** from the Theme dropdown
+
+### Preview theme (`dracula.css`)
+
+1. Copy `dracula.css` into `~/Library/Application Support/MacDown/Styles/`
+2. Go to **MacDown → Preferences → Rendering** and select **dracula** from the CSS dropdown
+
+The preview theme includes improved handling for:
+- YAML frontmatter blocks (rendered as a compact info box)
+- Mermaid diagram code blocks (labeled clearly as unrendered source)
+- Callout/admonition blocks (`> [!NOTE]` style)
+- Fenced code blocks with syntax highlighting
+- Full Dracula palette for all markdown elements
+
+### Recommended Rendering Settings
+
+Enable the following in **MacDown → Preferences → Rendering**:
+
+- ✅ Detect Jekyll front-matter
+- ✅ Syntax highlighting in fenced code blocks
+- ✅ GFM task lists
+- ✅ Strikethrough
 
 ## Team
 
 This theme is maintained by the following person(s) and a bunch of [awesome contributors](https://github.com/dracula/macdown/graphs/contributors).
 
-| [![Arandi López](https://avatars3.githubusercontent.com/u/2985233?v=3&s=70)](https://github.com/JimmyMultani) |
-| ------------------------------------------------------------------------------------------------------------- |
-| [Arandi López](https://github.com/arandilopez)                                                                |
+The preview theme for dracula created and added by Khalid Maqsudi [Khalid Maqsudi](https://github.com/kmaqsudi)
 
 ## Community
 
diff --git a/screenshot-preview.html b/screenshot-preview.html
new file mode 100644
index 0000000..c99e14e
--- /dev/null
+++ b/screenshot-preview.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Dracula Theme for MacDown</title>
+  <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+  <style>
+    :root {
+      --bg:       #282a36;
+      --current:  #44475a;
+      --fg:       #f8f8f2;
+      --comment:  #6272a4;
+      --cyan:     #8be9fd;
+      --green:    #50fa7b;
+      --orange:   #ffb86c;
+      --pink:     #ff79c6;
+      --purple:   #bd93f9;
+      --red:      #ff5555;
+      --yellow:   #f1fa8c;
+      --darker:   #21222c;
+    }
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      background: var(--bg);
+      color: var(--fg);
+      font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+      font-size: 15px;
+      line-height: 1.7;
+      padding: 48px 56px;
+      max-width: 860px;
+    }
+
+    /* ── Header ── */
+    .doc-header {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      margin-bottom: 36px;
+      padding-bottom: 20px;
+      border-bottom: 1px solid var(--current);
+    }
+    .doc-header .badge {
+      background: var(--purple);
+      color: var(--darker);
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: .08em;
+      text-transform: uppercase;
+      padding: 3px 9px;
+      border-radius: 4px;
+    }
+    .doc-header h1 {
+      font-size: 22px;
+      font-weight: 700;
+      color: var(--purple);
+      flex: 1;
+    }
+    .doc-header .meta {
+      font-size: 12px;
+      color: var(--comment);
+    }
diff --git a/screenshot.gif b/screenshot.gif
new file mode 100644
index 0000000..3330886
Binary files /dev/null and b/screenshot.gif differ
diff --git a/screenshot.md b/screenshot.md
new file mode 100644
index 0000000..8f55c83
--- /dev/null
+++ b/screenshot.md
@@ -0,0 +1,126 @@
+
+# Dracula Theme for MacDown
+
+> A dark Markdown editing experience using the full **Dracula color palette** — for both the editor and preview panes.
+
+---
+
+## Features
+
+- 🟣 **Purple** headings
+- 🟢 `Green` inline and block code
+- 🟠 **Bold** text in orange
+- 🟡 *Italic* text in yellow
+- 🩷 Pink list markers
+- 🔵 Cyan hyperlinks
+
+---
+
+## Installation
+
+### Editor Theme
+
+1. Go to **MacDown → Preferences → Editor** and press **Reveal**
+2. Copy `Dracula.style` into the `Themes` directory
+3. Press **Reload** then select **Dracula** from the Theme dropdown
+
+### Preview Theme
+
+1. Copy `dracula.css` into `~/Library/Application Support/MacDown/Styles/`
+2. Go to **MacDown → Preferences → Rendering**
+3. Select **dracula** from the CSS dropdown
+
+---
+
+## Code Blocks
+
+### Bash
+
+```bash
+# Install the Dracula preview theme
+STYLES=~/Library/Application\ Support/MacDown/Styles
+cp dracula.css "$STYLES"
+echo "Theme installed — restart MacDown and select 'dracula' in Preferences > Rendering"
+```
+
+### Python
+
+```python
+def dracula_palette() -> dict:
+    """Return the full Dracula color palette."""
+    return {
+        "background": "#282a36",
+        "foreground": "#f8f8f2",
+        "purple":     "#bd93f9",
+        "cyan":       "#8be9fd",
+        "green":      "#50fa7b",
+        "orange":     "#ffb86c",
+        "pink":       "#ff79c6",
+    }
+
+for name, hex_val in dracula_palette().items():
+    print(f"{name:<12} {hex_val}")
+```
+
+### YAML
+
+```yaml
+theme:
+  name: Dracula
+  editor: Dracula.style
+  preview: dracula.css
+  colors:
+    background: "#282a36"
+    foreground: "#f8f8f2"
+    purple:     "#bd93f9"
+    cyan:       "#8be9fd"
+    green:      "#50fa7b"
+```
+
+---
+
+## Architecture Diagram
+
+```mermaid
+flowchart LR
+    MD["📝 Markdown File"] --> MacDown["MacDown 3000"]
+    MacDown --> Editor["✏️ Editor — Dracula.style"]
+    MacDown --> Preview["👁 Preview — dracula.css"]
+    Preview --> H["🟣 Purple Headings"]
+    Preview --> C["🟢 Green Code"]
+    Preview --> L["🔵 Cyan Links"]
+    Preview --> B["🟠 Orange Bold"]
+```
+
+---
+
+## Color Palette
+
+| Element      | Color   | Hex       |
+|--------------|---------|-----------|
+| Background   | Dark    | `#282a36` |
+| Headings     | Purple  | `#bd93f9` |
+| Code         | Green   | `#50fa7b` |
+| Links        | Cyan    | `#8be9fd` |
+| **Bold**     | Orange  | `#ffb86c` |
+| *Italic*     | Yellow  | `#f1fa8c` |
+| List markers | Pink    | `#ff79c6` |
+| Comments     | Muted   | `#6272a4` |
+
+---
+
+## Blockquote
+
+> *"Any fool can write code that a computer can understand.*
+> *Good programmers write code that humans can understand."*
+> — Martin Fowler
+
+---
+
+## Task List
+
+- [x] Install `Dracula.style` editor theme
+- [x] Install `dracula.css` preview theme
+- [x] Enable Jekyll front-matter detection
+- [x] Enable syntax highlighting in fenced code blocks
+- [ ] Take a screenshot for the README