diff --git a/.vscode/settings.json b/.vscode/settings.json
index 843828d..31cb34b 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -14,4 +14,7 @@
     "[html]": {
         "editor.formatOnSave": true
     },
+    "tailwindCSS.experimental.classRegex": [
+        "class:\\s*?[\"'`]([^\"'`]*).*?,"
+    ]
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index d7d260c..39ded47 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,18 @@
         "@radix-ui/react-tabs": "^1.0.4",
         "@radix-ui/react-toast": "^1.1.5",
         "@radix-ui/react-tooltip": "^1.0.7",
+        "@tailwindcss/typography": "^0.5.15",
+        "@tiptap/extension-bubble-menu": "^2.8.0",
+        "@tiptap/extension-bullet-list": "^2.8.0",
+        "@tiptap/extension-code-block-lowlight": "^2.8.0",
+        "@tiptap/extension-heading": "^2.8.0",
+        "@tiptap/extension-highlight": "^2.8.0",
+        "@tiptap/extension-list-item": "^2.8.0",
+        "@tiptap/extension-ordered-list": "^2.8.0",
+        "@tiptap/extension-underline": "^2.8.0",
+        "@tiptap/pm": "^2.8.0",
+        "@tiptap/react": "^2.8.0",
+        "@tiptap/starter-kit": "^2.8.0",
         "axios": "^1.6.7",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
@@ -38,6 +50,7 @@
         "react": "^18",
         "react-day-picker": "^8.10.0",
         "react-dom": "^18",
+        "sass": "^1.79.4",
         "tailwind-merge": "^2.2.0",
         "tailwindcss-animate": "^1.0.7",
         "ts-luxon": "^4.5.2",
@@ -51,6 +64,7 @@
         "eslint": "^8",
         "eslint-config-next": "14.1.0",
         "postcss": "^8",
+        "postcss-import": "^16.1.0",
         "tailwindcss": "^3.3.0",
         "typescript": "^5"
       }
@@ -483,6 +497,16 @@
         "node": ">=14"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@radix-ui/number": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz",
@@ -1602,6 +1626,12 @@
         "@babel/runtime": "^7.13.10"
       }
     },
+    "node_modules/@remirror/core-constants": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-3.0.0.tgz",
+      "integrity": "sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==",
+      "license": "MIT"
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.2.tgz",
@@ -1622,12 +1652,513 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.15.tgz",
+      "integrity": "sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20"
+      }
+    },
+    "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@tiptap/core": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.8.0.tgz",
+      "integrity": "sha512-xsqDI4BNzYRWRtBq7+/38ThhqEr7uG9Njip1x+9/wgR3vWPBFnBkYJTz6jSxS35NRE6BSnERm4/B/vrLuY1Hdw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-blockquote": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-blockquote/-/extension-blockquote-2.8.0.tgz",
+      "integrity": "sha512-m3CKrOIvV7fY1Ak2gYf5LkKiz6AHxHpg6wxfVaJvdBqXgLyVtHo552N+A4oSHOSRbB4AG9EBQ2NeBM8cdEQ4MA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-bold": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bold/-/extension-bold-2.8.0.tgz",
+      "integrity": "sha512-U1YkZBxDkSLNvPNiqxB5g42IeJHr27C7zDb/yGQN2xL4UBeg4O9xVhCFfe32f6tLwivSL0dar4ScElpaCJuqow==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-bubble-menu": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.8.0.tgz",
+      "integrity": "sha512-swg+myJPN60LduQvLMF4hVBqP5LOIN01INZBzBI8egz8QufqtSyRCgXl7Xcma0RT5xIXnZSG9XOqNFf2rtkjKA==",
+      "license": "MIT",
+      "dependencies": {
+        "tippy.js": "^6.3.7"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-bullet-list": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-2.8.0.tgz",
+      "integrity": "sha512-H4O2X0ozbc/ce9/XF1H98sqWVUdtt7jzy7hMBunwmY8ZxI4dHtcRkeg81CZbpKTqOqRrMCLWjE3M2tgiDXrDkA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/extension-list-item": "^2.7.0",
+        "@tiptap/extension-text-style": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-code": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-2.8.0.tgz",
+      "integrity": "sha512-VSFn3sFF6qPpOGkXFhik8oYRH5iByVJpFEFd/duIEftmS0MdPzkbSItOpN3mc9xsJ5dCX80LYaResSj5hr5zkA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-code-block": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-2.8.0.tgz",
+      "integrity": "sha512-POuA5Igx+Dto0DTazoBFAQTj/M/FCdkqRVD9Uhsxhv49swPyANTJRr05vgbgtHB+NDDsZfCawVh7pI0IAD/O0w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-code-block-lowlight": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code-block-lowlight/-/extension-code-block-lowlight-2.8.0.tgz",
+      "integrity": "sha512-6RRGtzmRXlUrxJXz6cuTIpGTeMe+0Mz3XBQaZ0t7Y7PgbBDFj9tw9+LeO4eHLS/SraX4Y+P73HzKe03AdfQ95A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/extension-code-block": "^2.7.0",
+        "@tiptap/pm": "^2.7.0",
+        "highlight.js": "^11",
+        "lowlight": "^2 || ^3"
+      }
+    },
+    "node_modules/@tiptap/extension-document": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-2.8.0.tgz",
+      "integrity": "sha512-mp7Isx1sVc/ifeW4uW/PexGQ9exN3NRUOebSpnLfqXeWYk4y1RS1PA/3+IHkOPVetbnapgPjFx/DswlCP3XLjA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-dropcursor": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-dropcursor/-/extension-dropcursor-2.8.0.tgz",
+      "integrity": "sha512-rAFvx44YuT6dtS1c+ALw0ROAGI16l5L1HxquL4hR1gtxDcTieST5xhw5bkshXlmrlfotZXPrhokzqA7qjhZtJw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-floating-menu": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-floating-menu/-/extension-floating-menu-2.8.0.tgz",
+      "integrity": "sha512-H4QT61CrkLqisnGGC7zgiYmsl2jXPHl89yQCbdlkQN7aw11H7PltcJS2PJguL0OrRVJS/Mv/VTTUiMslmsEV5g==",
+      "license": "MIT",
+      "dependencies": {
+        "tippy.js": "^6.3.7"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-gapcursor": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-2.8.0.tgz",
+      "integrity": "sha512-Be1LWCmvteQInOnNVN+HTqc1XWsj1bCl+Q7et8qqNjtGtTaCbdCp8ppcH1SKJxNTM/RLUtPyJ8FDgOTj51ixCA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-hard-break": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-hard-break/-/extension-hard-break-2.8.0.tgz",
+      "integrity": "sha512-vqiIfviNiCmy/pJTHuDSCAGL2O4QDEdDmAvGJu8oRmElUrnlg8DbJUfKvn6DWQHNSQwRb+LDrwWlzAYj1K9u6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-heading": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-heading/-/extension-heading-2.8.0.tgz",
+      "integrity": "sha512-4inWgrTPiqlivPmEHFOM5ck2UsmOsbKKPtqga6bALvWPmCv24S6/EBwFp8Jz4YABabXDnkviihmGu0LpP9D69w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-highlight": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-highlight/-/extension-highlight-2.8.0.tgz",
+      "integrity": "sha512-vyqX7D449nuARhI0AyRqtIZReFg3sfc/U/q1p3JOjtUoW6z2jmDTzshiKRrSg+Jf7Hhzj1pqwU+6+CpelPPDpA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-history": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-history/-/extension-history-2.8.0.tgz",
+      "integrity": "sha512-u5YS0J5Egsxt8TUWMMAC3QhPZaak+IzQeyHch4gtqxftx96tprItY7AD/A3pGDF2uCSnN+SZrk6yVexm6EncDw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-horizontal-rule": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.8.0.tgz",
+      "integrity": "sha512-Sn/MI8WVFBoIYSIHA9NJryJIyCEzZdRysau8pC5TFnfifre0QV1ksPz2bgF+DyCD69ozQiRdBBHDEwKe47ZbfQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-italic": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-2.8.0.tgz",
+      "integrity": "sha512-PwwSE2LTYiHI47NJnsfhBmPiLE8IXZYqaSoNPU6flPrk1KxEzqvRI1joKZBmD9wuqzmHJ93VFIeZcC+kfwi8ZA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-list-item": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-2.8.0.tgz",
+      "integrity": "sha512-o7OGymGxB0B9x3x2prp3KBDYFuBYGc5sW69O672jk8G52DqhzzndgPnkk0qUn8nXAUKuDGbJmpmHVA2kagqnRg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-ordered-list": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-ordered-list/-/extension-ordered-list-2.8.0.tgz",
+      "integrity": "sha512-sCvNbcTS1+5QTTXwUPFa10vf5I1pr8sGcOTIh0G+a5ZkS5+6FxT12k7VLzPt39QyNbOi+77U2o4Xr4XyaEkfSg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/extension-list-item": "^2.7.0",
+        "@tiptap/extension-text-style": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-paragraph": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-paragraph/-/extension-paragraph-2.8.0.tgz",
+      "integrity": "sha512-XgxxNNbuBF48rAGwv7/s6as92/xjm/lTZIGTq9aG13ClUKFtgdel7C33SpUCcxg3cO2WkEyllXVyKUiauFZw/A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-strike": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-2.8.0.tgz",
+      "integrity": "sha512-ezkDiXxQ3ME/dDMMM7tAMkKRi6UWw7tIu+Mx7Os0z8HCGpVBk1gFhLlhEd8I5rJaPZr4tK1wtSehMA9bscFGQw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-text": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-2.8.0.tgz",
+      "integrity": "sha512-EDAdFFzWOvQfVy7j3qkKhBpOeE5thkJaBemSWfXI93/gMVc0ZCdLi24mDvNNgUHlT+RjlIoQq908jZaaxLKN2A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-text-style": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text-style/-/extension-text-style-2.8.0.tgz",
+      "integrity": "sha512-jJp0vcZ2Ty7RvIL0VU6dm1y+fTfXq1lN2GwtYzYM0ueFuESa+Qo8ticYOImyWZ3wGJGVrjn7OV9r0ReW0/NYkQ==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-underline": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-2.8.0.tgz",
+      "integrity": "sha512-1ouuHwZJphT8OosAmp6x8e+Wly3cUd1pNWBiOutJX+6QRGBXJnIKFCzn8YOTlWhg1YQigisG7dNF3YdlyuRNHw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/pm": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.8.0.tgz",
+      "integrity": "sha512-eMGpRooUMvKz/vOpnKKppApMSoNM325HxTdAJvTlVAmuHp5bOY5kyY1kfUlePRiVx1t1UlFcXs3kecFwkkBD3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-changeset": "^2.2.1",
+        "prosemirror-collab": "^1.3.1",
+        "prosemirror-commands": "^1.6.0",
+        "prosemirror-dropcursor": "^1.8.1",
+        "prosemirror-gapcursor": "^1.3.2",
+        "prosemirror-history": "^1.4.1",
+        "prosemirror-inputrules": "^1.4.0",
+        "prosemirror-keymap": "^1.2.2",
+        "prosemirror-markdown": "^1.13.0",
+        "prosemirror-menu": "^1.2.4",
+        "prosemirror-model": "^1.22.3",
+        "prosemirror-schema-basic": "^1.2.3",
+        "prosemirror-schema-list": "^1.4.1",
+        "prosemirror-state": "^1.4.3",
+        "prosemirror-tables": "^1.4.0",
+        "prosemirror-trailing-node": "^3.0.0",
+        "prosemirror-transform": "^1.10.0",
+        "prosemirror-view": "^1.33.10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      }
+    },
+    "node_modules/@tiptap/react": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/react/-/react-2.8.0.tgz",
+      "integrity": "sha512-o/aSCjO5Nu4MsNpTF+N1SzYzVQvvBiclmTOZX2E6usZ8jre5zmKfXHDSZnjGSRTK6z6kw5KW8wpjRQha03f9mg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tiptap/extension-bubble-menu": "^2.8.0",
+        "@tiptap/extension-floating-menu": "^2.8.0",
+        "@types/use-sync-external-store": "^0.0.6",
+        "fast-deep-equal": "^3",
+        "use-sync-external-store": "^1.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@tiptap/react/node_modules/use-sync-external-store": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
+      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@tiptap/starter-kit": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/starter-kit/-/starter-kit-2.8.0.tgz",
+      "integrity": "sha512-r7UwaTrECkQoheWVZKFDqtL5tBx07x7IFT+prfgnsVlYFutGWskVVqzCDvD3BDmrg5PzeCWYZrQGlPaLib7tjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tiptap/core": "^2.8.0",
+        "@tiptap/extension-blockquote": "^2.8.0",
+        "@tiptap/extension-bold": "^2.8.0",
+        "@tiptap/extension-bullet-list": "^2.8.0",
+        "@tiptap/extension-code": "^2.8.0",
+        "@tiptap/extension-code-block": "^2.8.0",
+        "@tiptap/extension-document": "^2.8.0",
+        "@tiptap/extension-dropcursor": "^2.8.0",
+        "@tiptap/extension-gapcursor": "^2.8.0",
+        "@tiptap/extension-hard-break": "^2.8.0",
+        "@tiptap/extension-heading": "^2.8.0",
+        "@tiptap/extension-history": "^2.8.0",
+        "@tiptap/extension-horizontal-rule": "^2.8.0",
+        "@tiptap/extension-italic": "^2.8.0",
+        "@tiptap/extension-list-item": "^2.8.0",
+        "@tiptap/extension-ordered-list": "^2.8.0",
+        "@tiptap/extension-paragraph": "^2.8.0",
+        "@tiptap/extension-strike": "^2.8.0",
+        "@tiptap/extension-text": "^2.8.0",
+        "@tiptap/pm": "^2.8.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      }
+    },
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
+      "license": "MIT"
+    },
+    "node_modules/@types/markdown-it": {
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
+      "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/linkify-it": "^5",
+        "@types/mdurl": "^2"
+      }
+    },
+    "node_modules/@types/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "20.12.7",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.7.tgz",
@@ -1662,6 +2193,19 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/parser": {
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.21.0.tgz",
@@ -1879,8 +2423,7 @@
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
     "node_modules/aria-hidden": {
       "version": "1.2.4",
@@ -2278,9 +2821,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001612",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001612.tgz",
-      "integrity": "sha512-lFgnZ07UhaCcsSZgWW0K5j4e69dK1u/ltrL9lTUiFOwNHs12S3UMIEYgBV0Z6C6hRDev7iRnMzzYmKabYdXF9g==",
+      "version": "1.0.30001668",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001668.tgz",
+      "integrity": "sha512-nWLrdxqCdblixUO+27JtGJJE/txpJlyUy5YN1u53wLZkP0emYCo5zgS6QYft7VUYR42LGgi/S5hdLZTrnyIddw==",
       "funding": [
         {
           "type": "opencollective",
@@ -2294,7 +2837,8 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ]
+      ],
+      "license": "CC-BY-4.0"
     },
     "node_modules/chalk": {
       "version": "4.1.2",
@@ -2664,6 +3208,12 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -2831,7 +3381,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -2841,6 +3390,20 @@
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
     },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2904,6 +3467,18 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.23.3",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
@@ -3075,7 +3650,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -3498,8 +4072,7 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-glob": {
       "version": "3.3.2",
@@ -3992,6 +4565,16 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "11.10.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz",
+      "integrity": "sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -4001,6 +4584,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+      "license": "MIT"
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -4589,6 +5178,15 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
+    "node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "license": "MIT",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -4604,11 +5202,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-      "dev": true
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
     },
     "node_modules/loose-envify": {
       "version": "1.4.0",
@@ -4621,6 +5230,32 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lowlight": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-3.1.0.tgz",
+      "integrity": "sha512-CEbNVoSikAxwDMDPjXlqlFYiZLkDJHwyGu/MfOsJnF3d7f3tds5J3z8s/l9TMXhzfsJCCJEAsD78842mwmg0PQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "devlop": "^1.0.0",
+        "highlight.js": "~11.9.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/lowlight/node_modules/highlight.js": {
+      "version": "11.9.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz",
+      "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "10.2.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz",
@@ -4637,6 +5272,29 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/markdown-it": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
+      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
+      "license": "MIT"
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -5011,6 +5669,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/orderedmap": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-2.1.1.tgz",
+      "integrity": "sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==",
+      "license": "MIT"
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -5177,16 +5841,18 @@
       }
     },
     "node_modules/postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "version": "16.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-16.1.0.tgz",
+      "integrity": "sha512-7hsAZ4xGXl4MW+OKEWCnF6T5jqBw80/EE9aXg1r2yyn1RsVEU8EtKXbijEODa+rg7iih4bKf7vlvTGYR4CnPNg==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
         "read-cache": "^1.0.0",
         "resolve": "^1.1.7"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=18.0.0"
       },
       "peerDependencies": {
         "postcss": "^8.0.0"
@@ -5310,6 +5976,201 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/prosemirror-changeset": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-changeset/-/prosemirror-changeset-2.2.1.tgz",
+      "integrity": "sha512-J7msc6wbxB4ekDFj+n9gTW/jav/p53kdlivvuppHsrZXCaQdVgRghoZbSS3kwrRyAstRVQ4/+u5k7YfLgkkQvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-collab": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-collab/-/prosemirror-collab-1.3.1.tgz",
+      "integrity": "sha512-4SnynYR9TTYaQVXd/ieUvsVV4PDMBzrq2xPUWutHivDuOshZXqQ5rGbZM84HEaXKbLdItse7weMGOUdDVcLKEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-commands": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.6.0.tgz",
+      "integrity": "sha512-xn1U/g36OqXn2tn5nGmvnnimAj/g1pUx2ypJJIe8WkVX83WyJVC5LTARaxZa2AtQRwntu9Jc5zXs9gL9svp/mg==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-dropcursor": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.1.tgz",
+      "integrity": "sha512-M30WJdJZLyXHi3N8vxN6Zh5O8ZBbQCz0gURTfPmTIBNQ5pxrdU7A58QkNqfa98YEjSAL1HUyyU34f6Pm5xBSGw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0",
+        "prosemirror-view": "^1.1.0"
+      }
+    },
+    "node_modules/prosemirror-gapcursor": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.3.2.tgz",
+      "integrity": "sha512-wtjswVBd2vaQRrnYZaBCbyDqr232Ed4p2QPtRIUK5FuqHYKGWkEwl08oQM4Tw7DOR0FsasARV5uJFvMZWxdNxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-keymap": "^1.0.0",
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-view": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-history": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.4.1.tgz",
+      "integrity": "sha512-2JZD8z2JviJrboD9cPuX/Sv/1ChFng+xh2tChQ2X4bB2HeK+rra/bmJ3xGntCcjhOqIzSDG6Id7e8RJ9QPXLEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.2.2",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.31.0",
+        "rope-sequence": "^1.3.0"
+      }
+    },
+    "node_modules/prosemirror-inputrules": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.4.0.tgz",
+      "integrity": "sha512-6ygpPRuTJ2lcOXs9JkefieMst63wVJBgHZGl5QOytN7oSZs3Co/BYbc3Yx9zm9H37Bxw8kVzCnDsihsVsL4yEg==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-keymap": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.2.2.tgz",
+      "integrity": "sha512-EAlXoksqC6Vbocqc0GtzCruZEzYgrn+iiGnNjsJsH4mrnIGex4qbLdWWNza3AW5W36ZRrlBID0eM6bdKH4OStQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "w3c-keyname": "^2.2.0"
+      }
+    },
+    "node_modules/prosemirror-markdown": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.13.1.tgz",
+      "integrity": "sha512-Sl+oMfMtAjWtlcZoj/5L/Q39MpEnVZ840Xo330WJWUvgyhNmLBLN7MsHn07s53nG/KImevWHSE6fEj4q/GihHw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/markdown-it": "^14.0.0",
+        "markdown-it": "^14.0.0",
+        "prosemirror-model": "^1.20.0"
+      }
+    },
+    "node_modules/prosemirror-menu": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-menu/-/prosemirror-menu-1.2.4.tgz",
+      "integrity": "sha512-S/bXlc0ODQup6aiBbWVsX/eM+xJgCTAfMq/nLqaO5ID/am4wS0tTCIkzwytmao7ypEtjj39i7YbJjAgO20mIqA==",
+      "license": "MIT",
+      "dependencies": {
+        "crelt": "^1.0.0",
+        "prosemirror-commands": "^1.0.0",
+        "prosemirror-history": "^1.0.0",
+        "prosemirror-state": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-model": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.23.0.tgz",
+      "integrity": "sha512-Q/fgsgl/dlOAW9ILu4OOhYWQbc7TQd4BwKH/RwmUjyVf8682Be4zj3rOYdLnYEcGzyg8LL9Q5IWYKD8tdToreQ==",
+      "license": "MIT",
+      "dependencies": {
+        "orderedmap": "^2.0.0"
+      }
+    },
+    "node_modules/prosemirror-schema-basic": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.3.tgz",
+      "integrity": "sha512-h+H0OQwZVqMon1PNn0AG9cTfx513zgIG2DY00eJ00Yvgb3UD+GQ/VlWW5rcaxacpCGT1Yx8nuhwXk4+QbXUfJA==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.19.0"
+      }
+    },
+    "node_modules/prosemirror-schema-list": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.4.1.tgz",
+      "integrity": "sha512-jbDyaP/6AFfDfu70VzySsD75Om2t3sXTOdl5+31Wlxlg62td1haUpty/ybajSfJ1pkGadlOfwQq9kgW5IMo1Rg==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.7.3"
+      }
+    },
+    "node_modules/prosemirror-state": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.3.tgz",
+      "integrity": "sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.27.0"
+      }
+    },
+    "node_modules/prosemirror-tables": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.5.0.tgz",
+      "integrity": "sha512-VMx4zlYWm7aBlZ5xtfJHpqa3Xgu3b7srV54fXYnXgsAcIGRqKSrhiK3f89omzzgaAgAtDOV4ImXnLKhVfheVNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-keymap": "^1.1.2",
+        "prosemirror-model": "^1.8.1",
+        "prosemirror-state": "^1.3.1",
+        "prosemirror-transform": "^1.2.1",
+        "prosemirror-view": "^1.13.3"
+      }
+    },
+    "node_modules/prosemirror-trailing-node": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-3.0.0.tgz",
+      "integrity": "sha512-xiun5/3q0w5eRnGYfNlW1uU9W6x5MoFKWwq/0TIRgt09lv7Hcser2QYV8t4muXbEr+Fwo0geYn79Xs4GKywrRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remirror/core-constants": "3.0.0",
+        "escape-string-regexp": "^4.0.0"
+      },
+      "peerDependencies": {
+        "prosemirror-model": "^1.22.1",
+        "prosemirror-state": "^1.4.2",
+        "prosemirror-view": "^1.33.8"
+      }
+    },
+    "node_modules/prosemirror-transform": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.10.1.tgz",
+      "integrity": "sha512-jANxn50pNsBT7042mM4pxKpGyzgJWen/GrfCEQOPtHa5gLrQ2+0OgDtuQu2noG1X0+2cQ5uPsWqCRy7w7J+obw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.21.0"
+      }
+    },
+    "node_modules/prosemirror-view": {
+      "version": "1.34.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.34.3.tgz",
+      "integrity": "sha512-mKZ54PrX19sSaQye+sef+YjBbNu2voNwLS1ivb6aD2IRmxRGW64HU9B644+7OfJStGLyxvOreKqEgfvXa91WIA==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.20.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -5324,6 +6185,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -5593,6 +6463,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/rope-sequence": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz",
+      "integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==",
+      "license": "MIT"
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -5650,6 +6526,51 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sass": {
+      "version": "1.79.4",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.79.4.tgz",
+      "integrity": "sha512-K0QDSNPXgyqO4GZq2HO5Q70TLxTH6cIT59RdoCHMivrC8rqzaTw5ab9prjz9KUN1El4FLXrBXJhik61JR4HcGg==",
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass/node_modules/chokidar": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
+      "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/sass/node_modules/readdirp": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
+      "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
@@ -6091,6 +7012,23 @@
         "tailwindcss": ">=3.0.0 || insiders"
       }
     },
+    "node_modules/tailwindcss/node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -6125,6 +7063,15 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tippy.js": {
+      "version": "6.3.7",
+      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+      "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@popperjs/core": "^2.9.0"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -6288,6 +7235,12 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+      "license": "MIT"
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -6402,6 +7355,12 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index c539ea3..824da6b 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,18 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "@tailwindcss/typography": "^0.5.15",
+    "@tiptap/extension-bubble-menu": "^2.8.0",
+    "@tiptap/extension-bullet-list": "^2.8.0",
+    "@tiptap/extension-code-block-lowlight": "^2.8.0",
+    "@tiptap/extension-heading": "^2.8.0",
+    "@tiptap/extension-highlight": "^2.8.0",
+    "@tiptap/extension-list-item": "^2.8.0",
+    "@tiptap/extension-ordered-list": "^2.8.0",
+    "@tiptap/extension-underline": "^2.8.0",
+    "@tiptap/pm": "^2.8.0",
+    "@tiptap/react": "^2.8.0",
+    "@tiptap/starter-kit": "^2.8.0",
     "axios": "^1.6.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
@@ -39,6 +51,7 @@
     "react": "^18",
     "react-day-picker": "^8.10.0",
     "react-dom": "^18",
+    "sass": "^1.79.4",
     "tailwind-merge": "^2.2.0",
     "tailwindcss-animate": "^1.0.7",
     "ts-luxon": "^4.5.2",
@@ -52,6 +65,7 @@
     "eslint": "^8",
     "eslint-config-next": "14.1.0",
     "postcss": "^8",
+    "postcss-import": "^16.1.0",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   }
diff --git a/postcss.config.js b/postcss.config.js
index 12a703d..32bebda 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,8 @@
 module.exports = {
   plugins: {
+    'postcss-import': {},
     tailwindcss: {},
+    'postcss-nested': {},
     autoprefixer: {},
   },
 };
diff --git a/src/app/coaching-sessions/[id]/page.tsx b/src/app/coaching-sessions/[id]/page.tsx
index 3fdfaf5..85b6c8d 100644
--- a/src/app/coaching-sessions/[id]/page.tsx
+++ b/src/app/coaching-sessions/[id]/page.tsx
@@ -12,19 +12,18 @@ import { PresetActions } from "@/components/ui/preset-actions";
 import { PresetSelector } from "@/components/ui/preset-selector";
 import { current, future, past } from "@/data/presets";
 import { useAppStateStore } from "@/lib/providers/app-state-store-provider";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   createNote,
   fetchNotesByCoachingSessionId,
   updateNote,
 } from "@/lib/api/notes";
-import { noteToString } from "@/types/note";
+import { defaultNote, Note, noteToString } from "@/types/note";
 import { useAuthStore } from "@/lib/providers/auth-store-provider";
 
 import { siteConfig } from "@/site.config";
 import { CoachingSessionTitle } from "@/components/ui/coaching-sessions/coaching-session-title";
 import { OverarchingGoalContainer } from "@/components/ui/coaching-sessions/overarching-goal-container";
-import { Id } from "@/types/general";
 import {
   HoverCard,
   HoverCardContent,
@@ -33,6 +32,10 @@ import {
 import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
 import { LockClosedIcon, SymbolIcon } from "@radix-ui/react-icons";
+import {
+  CoachingNotes,
+  EditorRef,
+} from "@/components/ui/coaching-sessions/coaching-notes";
 
 // export const metadata: Metadata = {
 //   title: "Coaching Session",
@@ -40,13 +43,12 @@ import { LockClosedIcon, SymbolIcon } from "@radix-ui/react-icons";
 // };
 
 export default function CoachingSessionsPage() {
-  const [noteId, setNoteId] = useState<Id>("");
-  const [note, setNote] = useState<string>("");
+  const [note, setNote] = useState<Note>(defaultNote());
   const [syncStatus, setSyncStatus] = useState<string>("");
   const { userId } = useAuthStore((state) => ({ userId: state.userId }));
-  const { coachingSession, coachingRelationship } = useAppStateStore(
-    (state) => state
-  );
+  const { coachingSession } = useAppStateStore((state) => state);
+  const [isLoading, setIsLoading] = useState(false);
+  const editorRef = useRef<EditorRef>(null);
 
   async function fetchNote() {
     if (!coachingSession.id) {
@@ -55,48 +57,79 @@ export default function CoachingSessionsPage() {
       );
       return;
     }
+    if (isLoading) {
+      console.debug(
+        "Not issuing a new Note fetch because a previous fetch is still in progress."
+      );
+    }
+
+    setIsLoading(true);
 
     await fetchNotesByCoachingSessionId(coachingSession.id)
       .then((notes) => {
         const note = notes[0];
         if (notes.length > 0) {
-          console.trace("note: " + noteToString(note));
-          setNoteId(note.id);
-          setNote(note.body);
+          console.trace("Fetched note: " + noteToString(note));
+          setEditorContent(note.body);
+          setNote(note);
           setSyncStatus("Notes refreshed");
+          setEditorFocussed();
         } else {
-          console.trace("No Notes associated with this coachingSession.id");
+          console.trace(
+            "No Notes associated with this coachingSession.id: " +
+              coachingSession.id
+          );
         }
       })
       .catch((err) => {
         console.error(
-          "Failed to fetch Note for current coaching session: " + err
+          "Failed to fetch Note for current coaching session id: " +
+            coachingSession.id +
+            ". Error: " +
+            err
         );
       });
+
+    setIsLoading(false);
   }
 
   useEffect(() => {
     fetchNote();
-  }, [coachingSession.id, noteId]);
+  }, [coachingSession.id, isLoading]);
+
+  const setEditorContent = (content: string) => {
+    editorRef.current?.setContent(`${content}`);
+  };
 
-  const handleInputChange = (value: string) => {
-    setNote(value);
+  const setEditorFocussed = () => {
+    editorRef.current?.setFocussed();
+  };
 
-    if (noteId && coachingSession.id && userId) {
-      updateNote(noteId, coachingSession.id, userId, value)
-        .then((note) => {
-          console.trace("Updated Note: " + noteToString(note));
+  const handleOnChange = (value: string) => {
+    console.debug("isLoading (before update/create): " + isLoading);
+    console.debug(
+      "coachingSession.id (before update/create): " + coachingSession.id
+    );
+    console.debug("userId (before update/create): " + userId);
+    console.debug("value (before update/create): " + value);
+    console.debug("--------------------------------");
+
+    if (!isLoading && note.id && coachingSession.id && userId) {
+      updateNote(note.id, coachingSession.id, userId, value)
+        .then((updatedNote) => {
+          setNote(updatedNote);
+          console.trace("Updated Note: " + noteToString(updatedNote));
           setSyncStatus("All changes saved");
         })
         .catch((err) => {
           setSyncStatus("Failed to save changes");
           console.error("Failed to update Note: " + err);
         });
-    } else if (!noteId && coachingSession.id && userId) {
+    } else if (!isLoading && !note.id && coachingSession.id && userId) {
       createNote(coachingSession.id, userId, value)
-        .then((note) => {
-          console.trace("Newly created Note: " + noteToString(note));
-          setNoteId(note.id);
+        .then((createdNote) => {
+          setNote(createdNote);
+          console.trace("Newly created Note: " + noteToString(createdNote));
           setSyncStatus("All changes saved");
         })
         .catch((err) => {
@@ -120,7 +153,7 @@ export default function CoachingSessionsPage() {
 
   return (
     <>
-      <div className="h-full flex-col md:flex">
+      <div className="flex-col h-full md:flex">
         <div className="flex flex-col items-start justify-between space-y-2 py-4 px-4 sm:flex-row sm:items-center sm:space-y-0 md:h-16">
           <CoachingSessionTitle
             locale={siteConfig.locale}
@@ -144,10 +177,12 @@ export default function CoachingSessionsPage() {
       <div className="row-span-1 h-full py-4 px-4">
         <div className="grid h-full items-stretch gap-6 md:grid-cols-[1fr_200px]">
           <div className="flex-col space-y-4 sm:flex md:order-1">
-            <Tabs defaultValue="notes" className="flex-1">
-              <TabsList className="grid flex w-128 grid-cols-2 justify-start">
+            <Tabs defaultValue="notes">
+              <TabsList className="flex w-128 grid-cols-2 justify-start">
                 <TabsTrigger value="notes">Notes</TabsTrigger>
-                <TabsTrigger value="console">Console</TabsTrigger>
+                <TabsTrigger value="console" className="hidden">
+                  Console
+                </TabsTrigger>
                 <TabsTrigger value="coachs_notes" className="hidden">
                   <div className="flex gap-2 items-start">
                     <LockClosedIcon className="mt-1" />
@@ -156,10 +191,11 @@ export default function CoachingSessionsPage() {
                 </TabsTrigger>
               </TabsList>
               <TabsContent value="notes">
-                <div className="flex h-full flex-col space-y-4">
+                <div className="flex-col h-full space-y-4">
                   <CoachingNotes
-                    value={note}
-                    onChange={handleInputChange}
+                    ref={editorRef}
+                    value={note.body}
+                    onChange={handleOnChange}
                     onKeyDown={handleKeyDown}
                   ></CoachingNotes>
                   <p className="text-sm text-muted-foreground">{syncStatus}</p>
@@ -210,60 +246,3 @@ export default function CoachingSessionsPage() {
     </>
   );
 }
-
-// A debounced input CoachingNotes textarea component
-// TODO: move this into the components dir
-const CoachingNotes: React.FC<{
-  value: string;
-  onChange: (value: string) => void;
-  onKeyDown: () => void;
-}> = ({ value, onChange, onKeyDown }) => {
-  const WAIT_INTERVAL = 1000;
-  const [timer, setTimer] = useState<number | undefined>(undefined);
-  const [note, setNote] = useState<string>(value);
-
-  // Make sure the internal value prop updates when the component interface's
-  // value prop changes.
-  useEffect(() => {
-    setNote(value);
-  }, [value]);
-
-  const handleSessionNoteChange = (
-    e: React.ChangeEvent<HTMLTextAreaElement>
-  ) => {
-    const newValue = e.target.value;
-    setNote(newValue);
-
-    if (timer) {
-      clearTimeout(timer);
-    }
-
-    const newTimer = window.setTimeout(() => {
-      onChange(newValue);
-    }, WAIT_INTERVAL);
-
-    setTimer(newTimer);
-  };
-
-  const handleOnKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    onKeyDown();
-  };
-
-  useEffect(() => {
-    return () => {
-      if (timer) {
-        clearTimeout(timer);
-      }
-    };
-  }, [timer]);
-
-  return (
-    <Textarea
-      placeholder="Session notes"
-      value={note}
-      className="p-4 min-h-[400px] md:min-h-[630px] lg:min-h-[630px]"
-      onChange={handleSessionNoteChange}
-      onKeyDown={handleOnKeyDown}
-    />
-  );
-};
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 6c9a881..d15fd3c 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -6,10 +6,11 @@ import { cn } from "@/lib/utils";
 import { buttonVariants } from "@/components/ui/button";
 import { UserAuthForm } from "@/components/user-auth-form";
 import { siteConfig } from "@/site.config";
+import { Icons } from "@/components/ui/icons";
 
 export const metadata: Metadata = {
-  title: "Authentication",
-  description: "Authentication forms built using the components.",
+  title: "Welcome to Refactor Coaching",
+  description: siteConfig.description,
 };
 
 export default function AuthenticationPage() {
@@ -44,18 +45,22 @@ export default function AuthenticationPage() {
         <div className="relative hidden h-full flex-col bg-muted p-10 text-white lg:flex dark:border-r">
           <div className="absolute inset-0 bg-zinc-900" />
           <div className="relative z-20 flex items-center text-lg font-medium">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="mr-2 h-6 w-6"
+            <Link
+              href="https://www.refactorcoach.com"
+              className="mr-2 flex items-center space-x-2"
             >
-              <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
-            </svg>
+              <div
+                className={cn(
+                  buttonVariants({
+                    variant: "ghost",
+                  }),
+                  "w-9 px-0"
+                )}
+              >
+                <Icons.refactor_logo className="h-7 w-7" />
+                <span className="sr-only">Refactor</span>
+              </div>
+            </Link>
             {siteConfig.name}
           </div>
           <div className="relative z-20 mt-auto">
diff --git a/src/components/ui/coaching-sessions/coaching-notes.tsx b/src/components/ui/coaching-sessions/coaching-notes.tsx
new file mode 100644
index 0000000..b270bf9
--- /dev/null
+++ b/src/components/ui/coaching-sessions/coaching-notes.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { TipTapEditor } from "@/components/ui/coaching-sessions/tiptap-editor";
+
+export interface EditorRef {
+  setContent: (content: string) => void;
+  setFocussed: () => void;
+}
+
+interface CoachingNotesProps {
+  value: string;
+  onChange: (content: string) => void;
+  onKeyDown: () => void;
+}
+
+const CoachingNotes = forwardRef<EditorRef, CoachingNotesProps>(
+  ({ value, onChange, onKeyDown }, ref) => {
+    const WAIT_INTERVAL = 1000;
+    const timerRef = useRef<number | undefined>(undefined);
+    const [note, setNote] = useState<string>(value);
+
+    useEffect(() => {
+      setNote(value);
+    }, [value]);
+
+    const handleSessionNoteChange = useCallback(
+      (newValue: string) => {
+        onKeyDown();
+        setNote(newValue);
+
+        if (timerRef.current) {
+          clearTimeout(timerRef.current);
+        }
+
+        timerRef.current = window.setTimeout(() => {
+          console.debug(
+            "Calling onChange() from CoachingNotes::handleSessionNoteChange() timer"
+          );
+          onChange(newValue);
+        }, WAIT_INTERVAL);
+      },
+      [onKeyDown, onChange, WAIT_INTERVAL]
+    );
+
+    useEffect(() => {
+      return () => {
+        if (timerRef.current) {
+          clearTimeout(timerRef.current);
+        }
+      };
+    }, []);
+
+    return (
+      <TipTapEditor
+        ref={ref}
+        editorContent={note}
+        onChange={handleSessionNoteChange}
+      />
+    );
+  }
+);
+
+CoachingNotes.displayName = "CoachingNotes";
+
+export { CoachingNotes };
diff --git a/src/components/ui/coaching-sessions/coaching-session-title.tsx b/src/components/ui/coaching-sessions/coaching-session-title.tsx
index c88f11b..d6b3e4a 100644
--- a/src/components/ui/coaching-sessions/coaching-session-title.tsx
+++ b/src/components/ui/coaching-sessions/coaching-session-title.tsx
@@ -7,14 +7,7 @@ import {
   SessionTitle,
   SessionTitleStyle,
 } from "@/types/session-title";
-import {
-  CoachingRelationshipWithUserNames,
-  coachingRelationshipWithUserNamesToString,
-} from "@/types/coaching_relationship_with_user_names";
-import {
-  CoachingSession,
-  coachingSessionToString,
-} from "@/types/coaching-session";
+import { CoachingRelationshipWithUserNames } from "@/types/coaching_relationship_with_user_names";
 import { useAppStateStore } from "@/lib/providers/app-state-store-provider";
 
 const CoachingSessionTitle: React.FC<{
diff --git a/src/components/ui/coaching-sessions/code-block.tsx b/src/components/ui/coaching-sessions/code-block.tsx
new file mode 100644
index 0000000..8e532b6
--- /dev/null
+++ b/src/components/ui/coaching-sessions/code-block.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { NodeViewProps, NodeViewWrapper, NodeViewContent } from "@tiptap/react";
+import { ProgrammingLanguageSelector } from "./programming-language-selector";
+
+import "@/styles/code-block.scss";
+
+const CodeBlock: React.FC<NodeViewProps> = ({
+  node,
+  updateAttributes,
+  extension,
+}) => {
+  const language = node.attrs.language || "auto";
+
+  return (
+    <NodeViewWrapper className="code-block">
+      <ProgrammingLanguageSelector
+        languages={extension.options.lowlight
+          .listLanguages()
+          .map((lang: string, index: number) => lang)}
+        placeholder={language}
+        onSelect={(languageTitle: string) => {
+          updateAttributes({ language: languageTitle });
+        }}
+      ></ProgrammingLanguageSelector>
+      <pre>
+        <NodeViewContent as="code" />
+      </pre>
+    </NodeViewWrapper>
+  );
+};
+
+export default CodeBlock;
diff --git a/src/components/ui/coaching-sessions/overarching-goal-container.tsx b/src/components/ui/coaching-sessions/overarching-goal-container.tsx
index 767456f..4d6f712 100644
--- a/src/components/ui/coaching-sessions/overarching-goal-container.tsx
+++ b/src/components/ui/coaching-sessions/overarching-goal-container.tsx
@@ -215,10 +215,12 @@ const OverarchingGoalContainer: React.FC<{
               <div className="grid flex-1 items-start gap-4 sm:py-0 md:gap-8">
                 <Tabs defaultValue="agreements">
                   <div className="flex items-center">
-                    <TabsList className="grid grid-cols-3">
+                    <TabsList className="grid grid-cols-2">
                       <TabsTrigger value="agreements">Agreements</TabsTrigger>
                       <TabsTrigger value="actions">Actions</TabsTrigger>
-                      <TabsTrigger value="program">Program</TabsTrigger>
+                      <TabsTrigger value="program" className="hidden">
+                        Program
+                      </TabsTrigger>
                     </TabsList>
                   </div>
                   <TabsContent value="agreements">
diff --git a/src/components/ui/coaching-sessions/programming-language-selector.tsx b/src/components/ui/coaching-sessions/programming-language-selector.tsx
new file mode 100644
index 0000000..52bed72
--- /dev/null
+++ b/src/components/ui/coaching-sessions/programming-language-selector.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import * as React from "react";
+import { PopoverProps } from "@radix-ui/react-popover";
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+import "@/styles/code-block.scss";
+
+interface ProgrammingLanguageSelectorProps extends PopoverProps {
+  languages: string[];
+  placeholder: string;
+  onSelect: (language: string) => void;
+}
+
+export function ProgrammingLanguageSelector({
+  languages,
+  placeholder,
+  onSelect,
+  ...props
+}: ProgrammingLanguageSelectorProps) {
+  const [selectedLanguage, setSelectedLanguage] =
+    React.useState<string>(placeholder);
+
+  return (
+    <Select
+      onValueChange={(language) => {
+        setSelectedLanguage(language);
+        onSelect(language);
+      }}
+    >
+      <SelectTrigger>
+        <SelectValue placeholder={selectedLanguage}>
+          {selectedLanguage}
+        </SelectValue>
+      </SelectTrigger>
+      <SelectContent>
+        {languages.map((language, index) => (
+          <SelectItem key={index.toString()} value={language}>
+            {language}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
diff --git a/src/components/ui/coaching-sessions/tiptap-editor.tsx b/src/components/ui/coaching-sessions/tiptap-editor.tsx
new file mode 100644
index 0000000..700a785
--- /dev/null
+++ b/src/components/ui/coaching-sessions/tiptap-editor.tsx
@@ -0,0 +1,265 @@
+"use client";
+
+import { useEditor, EditorContent, ReactNodeViewRenderer } from "@tiptap/react";
+
+import Bold from "@tiptap/extension-bold";
+import BulletList from "@tiptap/extension-bullet-list";
+import Document from "@tiptap/extension-document";
+import Heading from "@tiptap/extension-heading";
+import Highlight from "@tiptap/extension-highlight";
+import Italic from "@tiptap/extension-italic";
+import ListItem from "@tiptap/extension-list-item";
+import OrderedList from "@tiptap/extension-ordered-list";
+import Paragraph from "@tiptap/extension-paragraph";
+import Strike from "@tiptap/extension-strike";
+import Text from "@tiptap/extension-text";
+import Underline from "@tiptap/extension-underline";
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+import {
+  Bold as BoldIcon,
+  Heading1,
+  Heading2,
+  Heading3,
+  Highlighter,
+  Italic as ItalicIcon,
+  Underline as UnderlineIcon,
+  List,
+  ListOrdered,
+  Strikethrough,
+  Braces,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { forwardRef, useImperativeHandle } from "react";
+
+import { EditorRef } from "./coaching-notes";
+
+import css from "highlight.js/lib/languages/css";
+import js from "highlight.js/lib/languages/javascript";
+import ts from "highlight.js/lib/languages/typescript";
+import html from "highlight.js/lib/languages/xml";
+// Load all languages with "all" or common languages with "common"
+import { all, createLowlight } from "lowlight";
+
+// eslint-disable-next-line
+import CodeBlock from "@/components/ui/coaching-sessions/code-block";
+
+import "@/styles/styles.scss";
+
+const lowlight = createLowlight(all);
+
+lowlight.register("html", html);
+lowlight.register("css", css);
+lowlight.register("js", js);
+lowlight.register("ts", ts);
+
+interface TipTapProps {
+  editorContent: string;
+  onChange: (content: string) => void;
+}
+
+const TipTapEditor = forwardRef<EditorRef, TipTapProps>(
+  ({ editorContent, onChange }, ref) => {
+    const editor = useEditor(
+      {
+        extensions: [
+          BulletList,
+          CodeBlockLowlight.extend({
+            addNodeView() {
+              return ReactNodeViewRenderer(CodeBlock);
+            },
+          }).configure({ lowlight }),
+          Bold,
+          Document,
+          Heading,
+          Highlight,
+          Italic,
+          ListItem,
+          OrderedList,
+          Paragraph,
+          Strike,
+          Text,
+          Underline,
+        ],
+
+        autofocus: false,
+        immediatelyRender: false,
+
+        editorProps: {
+          attributes: {
+            class:
+              "tiptap ProseMirror shadow appearance-none lg:min-h-[440px] sm:min-h-[200px] md:min-h-[350px] rounded w-full py-2 px-3 bg-inherit text-black dark:text-white text-sm mt-0 md:mt-3 leading-tight focus:outline-none focus:shadow-outline",
+          },
+        },
+
+        content: editorContent,
+        onUpdate: ({ editor }) => {
+          onChange(JSON.stringify(editor.getJSON()));
+        },
+      },
+      []
+    );
+
+    useImperativeHandle(ref, () => ({
+      setContent: (content: string) => {
+        editor?.commands.setContent(JSON.parse(content));
+      },
+
+      setFocussed: () => {
+        editor?.chain().focus().run();
+      },
+    }));
+
+    if (!editor) {
+      return null;
+    }
+
+    return (
+      <div className="border rounded">
+        {/* Toolbar style */}
+        <div className="flex items-center gap-0 mt-1 mx-1 mb-0">
+          {/* Bold Button */}
+          <Button
+            variant="ghost"
+            onClick={() => editor.chain().focus().toggleBold().run()}
+            className={`p-2 rounded ${
+              editor.isActive("bold") ? "bg-gray-200" : ""
+            }`}
+            title="Bold (Ctrl+B)"
+          >
+            <BoldIcon className="h-4 w-4" />
+          </Button>
+
+          {/* Italic Button */}
+          <Button
+            variant="ghost"
+            onClick={() => editor.chain().focus().toggleItalic().run()}
+            className={`p-2 rounded ${
+              editor.isActive("italic") ? "bg-gray-200" : ""
+            }`}
+            title="Italic (Ctrl+I)"
+          >
+            <ItalicIcon className="h-4 w-4" />
+          </Button>
+
+          {/* Underline Button */}
+          <Button
+            variant="ghost"
+            onClick={() => editor.chain().focus().toggleUnderline().run()}
+            className={`p-2 rounded ${
+              editor.isActive("underline") ? "bg-gray-200" : ""
+            }`}
+            title="Underline (Ctrl+U)"
+          >
+            <UnderlineIcon className="h-4 w-4" />
+          </Button>
+
+          {/* Strikethrough Button */}
+          <Button
+            variant="ghost"
+            onClick={() => editor.chain().focus().toggleStrike().run()}
+            className={`p-2 rounded ${
+              editor.isActive("strike") ? "bg-gray-200" : ""
+            }`}
+            title="Strike Through"
+          >
+            <Strikethrough className="h-4 w-4" />
+          </Button>
+
+          {/* Highlight Button */}
+          <Button
+            variant="ghost"
+            onClick={() => editor.chain().focus().toggleHighlight().run()}
+            className={`p-2 rounded ${
+              editor.isActive("highlight") ? "bg-gray-200" : ""
+            }`}
+            title="Highlight Text"
+          >
+            <Highlighter className="h-4 w-4" />
+          </Button>
+
+          {/* Heading 1 */}
+          <Button
+            variant="ghost"
+            onClick={() =>
+              editor.chain().focus().toggleHeading({ level: 1 }).run()
+            }
+            className={`p-2 rounded ${
+              editor.isActive("heading", { level: 1 }) ? "bg-gray-200" : ""
+            }`}
+            title="Heading1"
+          >
+            <Heading1 className="h-4 w-4" />
+          </Button>
+
+          {/* Heading */}
+          <Button
+            variant="ghost"
+            onClick={() =>
+              editor.chain().focus().toggleHeading({ level: 2 }).run()
+            }
+            className={`p-2 rounded ${
+              editor.isActive("heading", { level: 2 }) ? "bg-gray-200" : ""
+            }`}
+            title="Heading2"
+          >
+            <Heading2 className="h-4 w-4" />
+          </Button>
+
+          {/* Heading 3 */}
+          <Button
+            variant="ghost"
+            onClick={() =>
+              editor.chain().focus().toggleHeading({ level: 3 }).run()
+            }
+            className={`p-2 rounded ${
+              editor.isActive("heading", { level: 3 }) ? "bg-gray-200" : ""
+            }`}
+            title="Heading3"
+          >
+            <Heading3 className="h-4 w-4" />
+          </Button>
+
+          {/* Bullet List Button */}
+          <Button
+            variant="ghost"
+            onClick={() => editor.chain().focus().toggleBulletList().run()}
+            className={`p-2 rounded ${
+              editor.isActive("bulletList") ? "bg-gray-200" : ""
+            }`}
+            title="Bullet List"
+          >
+            <List className="h-4 w-4" />
+          </Button>
+
+          {/* Ordered List Button */}
+          <Button
+            variant="ghost"
+            onClick={() => editor.chain().focus().toggleOrderedList().run()}
+            className={`p-2 rounded ${
+              editor.isActive("orderedList") ? "bg-gray-200" : ""
+            }`}
+            title="Ordered List"
+          >
+            <ListOrdered className="h-4 w-4" />
+          </Button>
+
+          <Button
+            variant="ghost"
+            onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+            className={`p-2 rounded ${
+              editor.isActive("codeBlock") ? "is-active" : ""
+            }`}
+          >
+            <Braces className="h-4 w-4" />
+          </Button>
+        </div>
+        {/* Editor Content */}
+        <EditorContent editor={editor} />
+      </div>
+    );
+  }
+);
+
+TipTapEditor.displayName = "TipTapEditor";
+
+export { TipTapEditor };
diff --git a/src/components/ui/site-header.tsx b/src/components/ui/site-header.tsx
index 1e97c57..102e50a 100644
--- a/src/components/ui/site-header.tsx
+++ b/src/components/ui/site-header.tsx
@@ -19,7 +19,7 @@ export function SiteHeader() {
 
   return (
     <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="flex h-14 pl-4 max-w-screen-2xl items-start">
+      <div className="flex h-14 pl-4 pt-2 max-w-screen-2xl items-start">
         <MainNav />
         <MobileNav />
         <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
diff --git a/src/components/ui/user-nav.tsx b/src/components/ui/user-nav.tsx
index bf42dfa..1998df3 100644
--- a/src/components/ui/user-nav.tsx
+++ b/src/components/ui/user-nav.tsx
@@ -50,7 +50,7 @@ export function UserNav() {
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" className="relative mx-2 h-8 w-8 rounded-full">
           <Avatar className="h-9 w-9">
-            <AvatarImage src="/avatars/03.png" alt="@jhodapp" />
+            {/* <AvatarImage src="/avatars/03.png" alt="@jhodapp" /> */}
             <AvatarFallback>
               {userFirstLastLettersToString(
                 userSession.first_name,
diff --git a/src/lib/api/notes.ts b/src/lib/api/notes.ts
index 2254d19..9f1eeb7 100644
--- a/src/lib/api/notes.ts
+++ b/src/lib/api/notes.ts
@@ -1,171 +1,171 @@
 // Interacts with the note endpoints
 
 import { Id } from "@/types/general";
-import { defaultNote, isNote, isNoteArray, Note, noteToString, parseNote } from "@/types/note";
+import {
+  defaultNote,
+  isNote,
+  isNoteArray,
+  Note,
+  parseNote,
+} from "@/types/note";
 import { AxiosError, AxiosResponse } from "axios";
 
 export const fetchNotesByCoachingSessionId = async (
-    coachingSessionId: Id
-  ): Promise<Note[]> => {
-    const axios = require("axios");
-  
-    var notes: Note[] = [];
-    var err: string = "";
-  
-    const data = await axios
-      .get(`http://localhost:4000/notes`, {
-        params: {
-          coaching_session_id: coachingSessionId,
-        },
-        withCredentials: true,
-        setTimeout: 5000, // 5 seconds before timing out trying to log in with the backend
-        headers: {
-          "X-Version": "0.0.1",
-        },
-      })
-      .then(function (response: AxiosResponse) {
-        // handle success
-        var notes_data = response.data.data;
-        if (isNoteArray(notes_data)) {
-            notes_data.forEach((note_data: any) => {
-                notes.push(parseNote(note_data))
-            });
-        }
-      })
-      .catch(function (error: AxiosError) {
-        // handle error
-        console.error(error.response?.status);
-        if (error.response?.status == 401) {
-          console.error("Retrieval of Note failed: unauthorized.");
-          err = "Retrieval of Note failed: unauthorized.";
-        } else if (error.response?.status == 404) {
-          console.error("Retrieval of Note failed: Note by coaching session Id (" + coachingSessionId + ") not found.");
-          err = "Retrieval of Note failed: Note by coaching session Id (" + coachingSessionId + ") not found.";
-        } else {
-          console.log(error);
-          console.error(
-            `Retrieval of Note by coaching session Id (` + coachingSessionId + `) failed.`
-          );
-          err =
-            `Retrieval of Note by coaching session Id (` + coachingSessionId + `) failed.`;
-        }
-      });
-
-    if (err)
-      throw err;
-  
-    return notes;
-  };
+  coachingSessionId: Id
+): Promise<Note[]> => {
+  const axios = require("axios");
 
-export const createNote = async (
-    coaching_session_id: Id,
-    user_id: Id,
-    body: string
-  ): Promise<Note> => {
-    const axios = require("axios");
-  
-    const newNoteJson = {
-        coaching_session_id: coaching_session_id,
-        user_id: user_id,
-        body: body
-    };
-    console.debug("newNoteJson: " + JSON.stringify(newNoteJson));
-    // A full real note to be returned from the backend with the same body
-    var createdNote: Note = defaultNote();
-    var err: string = "";
-  
-    //var strNote: string = noteToString(note);
-    const data = await axios
-      .post(`http://localhost:4000/notes`, newNoteJson, {
-        withCredentials: true,
-        setTimeout: 5000, // 5 seconds before timing out trying to log in with the backend
-        headers: {
-          "X-Version": "0.0.1",
-          "Content-Type": "application/json",
-        },
-      })
-      .then(function (response: AxiosResponse) {
-        // handle success
-        const noteStr = response.data.data;
-        if (isNote(noteStr)) {
-          createdNote = parseNote(noteStr);
-        }
-      })
-      .catch(function (error: AxiosError) {
-        // handle error
-        console.error(error.response?.status);
-        if (error.response?.status == 401) {
-          console.error("Creation of Note failed: unauthorized.");
-          err = "Creation of Note failed: unauthorized.";
-        } else if (error.response?.status == 500) {
-          console.error(
-            "Creation of Note failed: internal server error."
-          );
-          err = "Creation of Note failed: internal server error.";
-        } else {
-          console.log(error);
-          console.error(`Creation of new Note failed.`);
-          err = `Creation of new Note failed.`;
-        }
+  var notes: Note[] = [];
+  var err: string = "";
+
+  const data = await axios
+    .get(`http://localhost:4000/notes`, {
+      params: {
+        coaching_session_id: coachingSessionId,
+      },
+      withCredentials: true,
+      setTimeout: 5000, // 5 seconds before timing out trying to log in with the backend
+      headers: {
+        "X-Version": "0.0.1",
+      },
+    })
+    .then(function (response: AxiosResponse) {
+      // handle success
+      var notes_data = response.data.data;
+      if (isNoteArray(notes_data)) {
+        notes_data.forEach((note_data: any) => {
+          notes.push(parseNote(note_data));
+        });
       }
-    );
-    
-    if (err)
-      throw err;
-  
-    return createdNote;
+    })
+    .catch(function (error: AxiosError) {
+      // handle error
+      console.error(error.response?.status);
+      if (error.response?.status == 401) {
+        err = "Retrieval of Note failed: unauthorized.";
+      } else if (error.response?.status == 404) {
+        err =
+          "Retrieval of Note failed: Note by coaching session Id (" +
+          coachingSessionId +
+          ") not found.";
+      } else {
+        err =
+          `Retrieval of Note by coaching session Id (` +
+          coachingSessionId +
+          `) failed.`;
+      }
+    });
+
+  if (err) {
+    console.log(err);
+    throw err;
+  }
+
+  return notes;
+};
+
+export const createNote = async (
+  coaching_session_id: Id,
+  user_id: Id,
+  body: string
+): Promise<Note> => {
+  const axios = require("axios");
+
+  const newNoteJson = {
+    coaching_session_id: coaching_session_id,
+    user_id: user_id,
+    body: body,
   };
+  console.debug("newNoteJson: " + JSON.stringify(newNoteJson));
+  // A full real note to be returned from the backend with the same body
+  var createdNote: Note = defaultNote();
+  var err: string = "";
 
-  export const updateNote = async (
-    id: Id,
-    user_id: Id,
-    coaching_session_id: Id,
-    body: string,
-  ): Promise<Note> => {
-    const axios = require("axios");
-  
-    var updatedNote: Note = defaultNote();
-    var err: string = "";
-  
-    const newNoteJson = {
-        coaching_session_id: coaching_session_id,
-        user_id: user_id,
-        body: body
-    };
-
-    const data = await axios
-      .put(`http://localhost:4000/notes/${id}`, newNoteJson, {
-        withCredentials: true,
-        setTimeout: 5000, // 5 seconds before timing out trying to log in with the backend
-        headers: {
-          "X-Version": "0.0.1",
-          "Content-Type": "application/json",
-        },
-      })
-      .then(function (response: AxiosResponse) {
-        // handle success
-        if (isNote(response.data.data)) {
-          updatedNote = response.data.data;
-        }
-      })
-      .catch(function (error: AxiosError) {
-        // handle error
-        console.error(error.response?.status);
-        if (error.response?.status == 401) {
-          console.error("Update of Note failed: unauthorized.");
-          err = "Update of Organization failed: unauthorized.";
-        } else if (error.response?.status == 500) {
-          console.error("Update of Organization failed: internal server error.");
-          err = "Update of Organization failed: internal server error.";
-        } else {
-          console.log(error);
-          console.error(`Update of new Organization failed.`);
-          err = `Update of new Organization failed.`;
-        }
-      });
-
-    if (err)
-      throw err;
-  
-    return updatedNote;
+  const data = await axios
+    .post(`http://localhost:4000/notes`, newNoteJson, {
+      withCredentials: true,
+      setTimeout: 5000, // 5 seconds before timing out trying to log in with the backend
+      headers: {
+        "X-Version": "0.0.1",
+        "Content-Type": "application/json",
+      },
+    })
+    .then(function (response: AxiosResponse) {
+      // handle success
+      const noteStr = response.data.data;
+      if (isNote(noteStr)) {
+        createdNote = parseNote(noteStr);
+      }
+    })
+    .catch(function (error: AxiosError) {
+      // handle error
+      console.error(error.response?.status);
+      if (error.response?.status == 401) {
+        err = "Creation of Note failed: unauthorized.";
+      } else if (error.response?.status == 500) {
+        err = "Creation of Note failed: internal server error.";
+      } else {
+        err = `Creation of new Note failed: ${error}`;
+      }
+    });
+
+  if (err) {
+    console.log(err);
+    throw err;
+  }
+
+  return createdNote;
+};
+
+export const updateNote = async (
+  id: Id,
+  user_id: Id,
+  coaching_session_id: Id,
+  body: string
+): Promise<Note> => {
+  const axios = require("axios");
+
+  var updatedNote: Note = defaultNote();
+  var err: string = "";
+
+  const newNoteJson = {
+    id: id,
+    coaching_session_id: coaching_session_id,
+    user_id: user_id,
+    body: body,
   };
+
+  const data = await axios
+    .put(`http://localhost:4000/notes/${id}`, newNoteJson, {
+      withCredentials: true,
+      setTimeout: 5000, // 5 seconds before timing out trying to log in with the backend
+      headers: {
+        "X-Version": "0.0.1",
+        "Content-Type": "application/json",
+      },
+    })
+    .then(function (response: AxiosResponse) {
+      // handle success
+      if (isNote(response.data.data)) {
+        updatedNote = response.data.data;
+      }
+    })
+    .catch(function (error: AxiosError) {
+      // handle error
+      console.error(error.response?.status);
+      if (error.response?.status == 401) {
+        err = "Update of Note failed: unauthorized.";
+      } else if (error.response?.status == 500) {
+        err = "Update of Note failed: internal server error.";
+      } else {
+        err = `Update of new Note failed: ${error}`;
+      }
+    });
+
+  if (err) {
+    console.log(err);
+    throw err;
+  }
+
+  return updatedNote;
+};
diff --git a/src/styles/code-block.scss b/src/styles/code-block.scss
new file mode 100644
index 0000000..b54c566
--- /dev/null
+++ b/src/styles/code-block.scss
@@ -0,0 +1,28 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+.tiptap {
+  .code-block {
+    position: relative;
+
+    button {
+      // Only show on code-block hover
+      @apply invisible;
+      position: absolute;
+      @apply text-black dark:text-white;
+      @apply bg-white dark:bg-black;
+      height: 1.3rem;
+      width: 8rem;
+      right: 0.5rem;
+      top: 0.5rem;
+    }
+
+    &:hover {
+      button {
+        // Show the button on code-block hover
+        @apply visible;
+      }
+    }
+  }
+}
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
new file mode 100644
index 0000000..02601e4
--- /dev/null
+++ b/src/styles/styles.scss
@@ -0,0 +1,148 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+// Your custom SCSS styles here
+
+/* Basic TipTap editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 0.5rem 1rem 0.5rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  pre {
+    background: rgb(46, 43, 41);
+    border-radius: 0.5rem;
+    color: white;
+    font-family: "JetBrainsMono", monospace;
+    margin: 1.0rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+
+    /* Code styling */
+    .hljs-comment,
+    .hljs-quote {
+      color: #616161;
+    }
+
+    .hljs-variable,
+    .hljs-template-variable,
+    .hljs-attribute,
+    .hljs-tag,
+    .hljs-name,
+    .hljs-regexp,
+    .hljs-link,
+    .hljs-name,
+    .hljs-selector-id,
+    .hljs-selector-class {
+      color: #f98181;
+    }
+
+    .hljs-number,
+    .hljs-meta,
+    .hljs-built_in,
+    .hljs-builtin-name,
+    .hljs-literal,
+    .hljs-type,
+    .hljs-params {
+      color: #fbbc88;
+    }
+
+    .hljs-string,
+    .hljs-symbol,
+    .hljs-bullet {
+      color: #b9f18d;
+    }
+
+    .hljs-title,
+    .hljs-section {
+      color: #faf594;
+    }
+
+    .hljs-keyword,
+    .hljs-selector-tag {
+      color: #70cff8;
+    }
+
+    .hljs-emphasis {
+      font-style: italic;
+    }
+
+    .hljs-strong {
+      font-weight: 700;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+}
diff --git a/src/types/general.ts b/src/types/general.ts
index 96ed079..85b93f1 100644
--- a/src/types/general.ts
+++ b/src/types/general.ts
@@ -47,12 +47,5 @@ export function actionStatusToString(actionStatus: ItemStatus): string {
 /// return a valid DateTime object instance.
 export function getDateTimeFromString(dateTime: string): DateTime {
   const dt = dateTime.trim();
-  if (dt.length == 0) {
-    console.warn(
-      "Return DateTime.now() since input dateTime string was empty."
-    );
-    return DateTime.now();
-  }
-
-  return DateTime.fromISO(dt);
+  return dt.trim().length > 0 ? DateTime.fromISO(dt) : DateTime.now();
 }