Feature: Add Release Notes (#491)

Co-authored-by: Vijay A <vraravam@users.noreply.github.com>
Co-authored-by: Ricardo Cino <ricardo@cino.io>

29 files changed, 1124 insertions, 121 deletions

diff --git a/package-lock.json b/package-lock.json
index ae32a4ec9..e191b216b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "@krisdages/electron-process-manager": "3.0.0",
         "@mdi/js": "6.9.96",
         "@mdi/react": "1.6.0",
+        "@octokit/core": "4.0.4",
         "@superwf/mobx-react-router": "7.4.0",
         "auto-launch": "5.0.5",
         "btoa": "1.2.1",
@@ -47,6 +48,7 @@
         "languagedetect": "2.0.0",
         "lodash": "4.17.21",
         "macos-version": "5.2.1",
+        "markdown-to-jsx": "7.1.7",
         "mime-types": "2.1.35",
         "minimist": "1.2.6",
         "mobx": "6.6.1",
@@ -4354,6 +4356,118 @@
         "node": ">=10"
       }
     },
+    "node_modules/@octokit/auth-token": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-3.0.0.tgz",
+      "integrity": "sha512-MDNFUBcJIptB9At7HiV7VCvU3NcL4GnfCQaP8C5lrxWrRPMJBnemYtehaKSOlaM7AYxeRyj9etenu8LVpSpVaQ==",
+      "dependencies": {
+        "@octokit/types": "^6.0.3"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/core": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-4.0.4.tgz",
+      "integrity": "sha512-sUpR/hc4Gc7K34o60bWC7WUH6Q7T6ftZ2dUmepSyJr9PRF76/qqkWjE2SOEzCqLA5W83SaISymwKtxks+96hPQ==",
+      "dependencies": {
+        "@octokit/auth-token": "^3.0.0",
+        "@octokit/graphql": "^5.0.0",
+        "@octokit/request": "^6.0.0",
+        "@octokit/request-error": "^3.0.0",
+        "@octokit/types": "^6.0.3",
+        "before-after-hook": "^2.2.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/endpoint": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-7.0.0.tgz",
+      "integrity": "sha512-Kz/mIkOTjs9rV50hf/JK9pIDl4aGwAtT8pry6Rpy+hVXkAPhXanNQRxMoq6AeRgDCZR6t/A1zKniY2V1YhrzlQ==",
+      "dependencies": {
+        "@octokit/types": "^6.0.3",
+        "is-plain-object": "^5.0.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/endpoint/node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@octokit/graphql": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-5.0.0.tgz",
+      "integrity": "sha512-1ZZ8tX4lUEcLPvHagfIVu5S2xpHYXAmgN0+95eAOPoaVPzCfUXJtA5vASafcpWcO86ze0Pzn30TAx72aB2aguQ==",
+      "dependencies": {
+        "@octokit/request": "^6.0.0",
+        "@octokit/types": "^6.0.3",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/openapi-types": {
+      "version": "12.9.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-12.9.0.tgz",
+      "integrity": "sha512-x0wjPEnD487oMjODOSIDdVNBebyrAPE4edY0bsxp/ZX1XPPnWQWXseixbhMa5KcwpbHVdk4qbC3zzedoMdP/YQ=="
+    },
+    "node_modules/@octokit/request": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-6.2.0.tgz",
+      "integrity": "sha512-7IAmHnaezZrgUqtRShMlByJK33MT9ZDnMRgZjnRrRV9a/jzzFwKGz0vxhFU6i7VMLraYcQ1qmcAOin37Kryq+Q==",
+      "dependencies": {
+        "@octokit/endpoint": "^7.0.0",
+        "@octokit/request-error": "^3.0.0",
+        "@octokit/types": "^6.16.1",
+        "is-plain-object": "^5.0.0",
+        "node-fetch": "^2.6.7",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/request-error": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-3.0.0.tgz",
+      "integrity": "sha512-WBtpzm9lR8z4IHIMtOqr6XwfkGvMOOILNLxsWvDwtzm/n7f5AWuqJTXQXdDtOvPfTDrH4TPhEvW2qMlR4JFA2w==",
+      "dependencies": {
+        "@octokit/types": "^6.0.3",
+        "deprecation": "^2.0.0",
+        "once": "^1.4.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/request/node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@octokit/types": {
+      "version": "6.39.0",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.39.0.tgz",
+      "integrity": "sha512-Mq4N9sOAYCitTsBtDdRVrBE80lIrMBhL9Jbrw0d+j96BAzlq4V+GLHFJbHokEsVvO/9tQupQdoFdgVYhD2C8UQ==",
+      "dependencies": {
+        "@octokit/openapi-types": "^12.7.0"
+      }
+    },
     "node_modules/@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
@@ -7150,6 +7264,11 @@
       "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
       "integrity": "sha512-V/Hy/X9Vt7f3BbPJEi8BdVFMByHi+jNXrYkW3huaybV/kQ0KJg0Y6PkEMbn+zeT+i+SiKZ/HMqJGIIt4LZDqNQ=="
     },
+    "node_modules/before-after-hook": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.2.tgz",
+      "integrity": "sha512-3pZEU3NT5BFUo/AD5ERPWOgQOCZITni6iavr5AUw5AUwQjMlI0kzu5btnyD39AF0gUEsDPwJT+oY1ORBJijPjQ=="
+    },
     "node_modules/big-integer": {
       "version": "1.6.51",
       "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
@@ -9599,6 +9718,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/deprecation": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz",
+      "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ=="
+    },
     "node_modules/destroy": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
@@ -18159,6 +18283,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/markdown-to-jsx": {
+      "version": "7.1.7",
+      "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.1.7.tgz",
+      "integrity": "sha512-VI3TyyHlGkO8uFle0IOibzpO1c1iJDcXcS/zBrQrXQQvJ2tpdwVzVZ7XdKsyRz1NdRmre4dqQkMZzUHaKIG/1w==",
+      "engines": {
+        "node": ">= 10"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0"
+      }
+    },
     "node_modules/matchdep": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/matchdep/-/matchdep-2.0.0.tgz",
@@ -25483,6 +25618,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/universal-user-agent": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.0.tgz",
+      "integrity": "sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w=="
+    },
     "node_modules/universalify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
@@ -30464,6 +30604,98 @@
         }
       }
     },
+    "@octokit/auth-token": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-3.0.0.tgz",
+      "integrity": "sha512-MDNFUBcJIptB9At7HiV7VCvU3NcL4GnfCQaP8C5lrxWrRPMJBnemYtehaKSOlaM7AYxeRyj9etenu8LVpSpVaQ==",
+      "requires": {
+        "@octokit/types": "^6.0.3"
+      }
+    },
+    "@octokit/core": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-4.0.4.tgz",
+      "integrity": "sha512-sUpR/hc4Gc7K34o60bWC7WUH6Q7T6ftZ2dUmepSyJr9PRF76/qqkWjE2SOEzCqLA5W83SaISymwKtxks+96hPQ==",
+      "requires": {
+        "@octokit/auth-token": "^3.0.0",
+        "@octokit/graphql": "^5.0.0",
+        "@octokit/request": "^6.0.0",
+        "@octokit/request-error": "^3.0.0",
+        "@octokit/types": "^6.0.3",
+        "before-after-hook": "^2.2.0",
+        "universal-user-agent": "^6.0.0"
+      }
+    },
+    "@octokit/endpoint": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-7.0.0.tgz",
+      "integrity": "sha512-Kz/mIkOTjs9rV50hf/JK9pIDl4aGwAtT8pry6Rpy+hVXkAPhXanNQRxMoq6AeRgDCZR6t/A1zKniY2V1YhrzlQ==",
+      "requires": {
+        "@octokit/types": "^6.0.3",
+        "is-plain-object": "^5.0.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "dependencies": {
+        "is-plain-object": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+          "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q=="
+        }
+      }
+    },
+    "@octokit/graphql": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-5.0.0.tgz",
+      "integrity": "sha512-1ZZ8tX4lUEcLPvHagfIVu5S2xpHYXAmgN0+95eAOPoaVPzCfUXJtA5vASafcpWcO86ze0Pzn30TAx72aB2aguQ==",
+      "requires": {
+        "@octokit/request": "^6.0.0",
+        "@octokit/types": "^6.0.3",
+        "universal-user-agent": "^6.0.0"
+      }
+    },
+    "@octokit/openapi-types": {
+      "version": "12.9.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-12.9.0.tgz",
+      "integrity": "sha512-x0wjPEnD487oMjODOSIDdVNBebyrAPE4edY0bsxp/ZX1XPPnWQWXseixbhMa5KcwpbHVdk4qbC3zzedoMdP/YQ=="
+    },
+    "@octokit/request": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-6.2.0.tgz",
+      "integrity": "sha512-7IAmHnaezZrgUqtRShMlByJK33MT9ZDnMRgZjnRrRV9a/jzzFwKGz0vxhFU6i7VMLraYcQ1qmcAOin37Kryq+Q==",
+      "requires": {
+        "@octokit/endpoint": "^7.0.0",
+        "@octokit/request-error": "^3.0.0",
+        "@octokit/types": "^6.16.1",
+        "is-plain-object": "^5.0.0",
+        "node-fetch": "^2.6.7",
+        "universal-user-agent": "^6.0.0"
+      },
+      "dependencies": {
+        "is-plain-object": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+          "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q=="
+        }
+      }
+    },
+    "@octokit/request-error": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-3.0.0.tgz",
+      "integrity": "sha512-WBtpzm9lR8z4IHIMtOqr6XwfkGvMOOILNLxsWvDwtzm/n7f5AWuqJTXQXdDtOvPfTDrH4TPhEvW2qMlR4JFA2w==",
+      "requires": {
+        "@octokit/types": "^6.0.3",
+        "deprecation": "^2.0.0",
+        "once": "^1.4.0"
+      }
+    },
+    "@octokit/types": {
+      "version": "6.39.0",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.39.0.tgz",
+      "integrity": "sha512-Mq4N9sOAYCitTsBtDdRVrBE80lIrMBhL9Jbrw0d+j96BAzlq4V+GLHFJbHokEsVvO/9tQupQdoFdgVYhD2C8UQ==",
+      "requires": {
+        "@octokit/openapi-types": "^12.7.0"
+      }
+    },
     "@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
@@ -32721,6 +32953,11 @@
       "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
       "integrity": "sha512-V/Hy/X9Vt7f3BbPJEi8BdVFMByHi+jNXrYkW3huaybV/kQ0KJg0Y6PkEMbn+zeT+i+SiKZ/HMqJGIIt4LZDqNQ=="
     },
+    "before-after-hook": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.2.tgz",
+      "integrity": "sha512-3pZEU3NT5BFUo/AD5ERPWOgQOCZITni6iavr5AUw5AUwQjMlI0kzu5btnyD39AF0gUEsDPwJT+oY1ORBJijPjQ=="
+    },
     "big-integer": {
       "version": "1.6.51",
       "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
@@ -34642,6 +34879,11 @@
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
       "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ=="
     },
+    "deprecation": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz",
+      "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ=="
+    },
     "destroy": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
@@ -41317,6 +41559,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "markdown-to-jsx": {
+      "version": "7.1.7",
+      "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.1.7.tgz",
+      "integrity": "sha512-VI3TyyHlGkO8uFle0IOibzpO1c1iJDcXcS/zBrQrXQQvJ2tpdwVzVZ7XdKsyRz1NdRmre4dqQkMZzUHaKIG/1w=="
+    },
     "matchdep": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/matchdep/-/matchdep-2.0.0.tgz",
@@ -47045,6 +47292,11 @@
         "crypto-random-string": "^2.0.0"
       }
     },
+    "universal-user-agent": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.0.tgz",
+      "integrity": "sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w=="
+    },
     "universalify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
diff --git a/package.json b/package.json
index 2d2c5c6da..2ff08af3e 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
     "@krisdages/electron-process-manager": "3.0.0",
     "@mdi/js": "6.9.96",
     "@mdi/react": "1.6.0",
+    "@octokit/core": "4.0.4",
     "@superwf/mobx-react-router": "7.4.0",
     "auto-launch": "5.0.5",
     "btoa": "1.2.1",
@@ -82,6 +83,7 @@
     "languagedetect": "2.0.0",
     "lodash": "4.17.21",
     "macos-version": "5.2.1",
+    "markdown-to-jsx": "7.1.7",
     "mime-types": "2.1.35",
     "minimist": "1.2.6",
     "mobx": "6.6.1",
diff --git a/src/components/AppUpdateInfoBar.tsx b/src/components/AppUpdateInfoBar.tsx
index 48efbfb7f..3ff488b74 100644
--- a/src/components/AppUpdateInfoBar.tsx
+++ b/src/components/AppUpdateInfoBar.tsx
@@ -2,10 +2,10 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { mdiInformation } from '@mdi/js';
 import InfoBar from './ui/InfoBar';
-import { GITHUB_FERDIUM_URL } from '../config';
-import { openExternalUrl } from '../helpers/url-helpers';
 import Icon from './ui/icon';
 
+import { onAuthGoToReleaseNotes } from '../helpers/update-helpers';
+
 const messages = defineMessages({
   updateAvailable: {
     id: 'infobar.updateAvailable',
@@ -24,9 +24,14 @@ const messages = defineMessages({
 type Props = {
   onInstallUpdate: () => void;
   onHide: () => void;
+  updateVersionParsed: string;
 };
 
-const AppUpdateInfoBar = ({ onInstallUpdate, onHide }: Props) => {
+const AppUpdateInfoBar = ({
+  onInstallUpdate,
+  updateVersionParsed,
+  onHide,
+}: Props) => {
   const intl = useIntl();
 
   return (
@@ -41,12 +46,12 @@ const AppUpdateInfoBar = ({ onInstallUpdate, onHide }: Props) => {
       <button
         className="info-bar__inline-button"
         type="button"
-        onClick={() =>
-          openExternalUrl(
-            `${GITHUB_FERDIUM_URL}/ferdium-app/blob/develop/CHANGELOG.md`,
-            true,
-          )
-        }
+        onClick={() => {
+          window.location.href = onAuthGoToReleaseNotes(
+            window.location.href,
+            updateVersionParsed,
+          );
+        }}
       >
         <u>{intl.formatMessage(messages.changelog)}</u>
       </button>
diff --git a/src/components/auth/AuthLayout.jsx b/src/components/auth/AuthLayout.jsx
index 8a88cedb1..5c87c3080 100644
--- a/src/components/auth/AuthLayout.jsx
+++ b/src/components/auth/AuthLayout.jsx
@@ -14,6 +14,7 @@ import {
   oneOrManyChildElements,
   globalError as globalErrorPropType,
 } from '../../prop-types';
+import { updateVersionParse } from '../../helpers/update-helpers';
 import globalMessages from '../../i18n/globalMessages';
 
 import { isWindows } from '../../environment';
@@ -34,6 +35,7 @@ class AuthLayout extends Component {
     isFullScreen: PropTypes.bool.isRequired,
     installAppUpdate: PropTypes.func.isRequired,
     appUpdateIsDownloaded: PropTypes.bool.isRequired,
+    updateVersion: PropTypes.string.isRequired,
   };
 
   constructor() {
@@ -55,10 +57,10 @@ class AuthLayout extends Component {
       isFullScreen,
       installAppUpdate,
       appUpdateIsDownloaded,
+      updateVersion,
     } = this.props;
 
     const { intl } = this.props;
-
     let serverNameParse = serverName();
     serverNameParse =
       serverNameParse === 'Custom' ? 'your Custom Server' : serverNameParse;
@@ -81,6 +83,7 @@ class AuthLayout extends Component {
           {appUpdateIsDownloaded && this.state.shouldShowAppUpdateInfoBar && (
             <AppUpdateInfoBar
               onInstallUpdate={installAppUpdate}
+              updateVersionParsed={updateVersionParse(updateVersion)}
               onHide={() => {
                 this.setState({ shouldShowAppUpdateInfoBar: false });
               }}
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.jsx
index f7860afc6..685839c0a 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.jsx
@@ -13,6 +13,7 @@ import { Component as BasicAuth } from '../../features/basicAuth';
 import { Component as QuickSwitch } from '../../features/quickSwitch';
 import { Component as PublishDebugInfo } from '../../features/publishDebugInfo';
 import ErrorBoundary from '../util/ErrorBoundary';
+import { updateVersionParse } from '../../helpers/update-helpers';
 
 // import globalMessages from '../../i18n/globalMessages';
 
@@ -94,10 +95,14 @@ class AppLayout extends Component {
     areRequiredRequestsLoading: PropTypes.bool.isRequired,
   };
 
-  state = {
-    shouldShowAppUpdateInfoBar: true,
-    shouldShowServicesUpdatedInfoBar: true,
-  };
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      shouldShowAppUpdateInfoBar: true,
+      shouldShowServicesUpdatedInfoBar: true,
+    };
+  }
 
   render() {
     const {
@@ -115,6 +120,7 @@ class AppLayout extends Component {
       areRequiredRequestsSuccessful,
       retryRequiredRequests,
       areRequiredRequestsLoading,
+      updateVersion,
     } = this.props;
 
     const { intl } = this.props;
@@ -126,86 +132,90 @@ class AppLayout extends Component {
 
     return (
       <>
-      {isMac && !isFullScreen && (
-        <div className="window-draggable" />
-      )}
-      <ErrorBoundary>
-        <div className="app">
-          {isWindows && !isFullScreen && (
-            <TitleBar
-              menu={window['ferdium'].menu.template}
-              icon="assets/images/logo.svg"
-            />
-          )}
-          {isMac && !isFullScreen && (
-            <span
-              onDoubleClick={toggleFullScreen}
-              className={classes.titleBar}
-            />
-          )}
-          <div className={`app__content ${classes.appContent}`}>
-            {workspacesDrawer}
-            {sidebar}
-            <div className="app__service">
-              <WorkspaceSwitchingIndicator />
-              {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
-                <InfoBar
-                  type="danger"
-                  ctaLabel="Try again"
-                  ctaLoading={areRequiredRequestsLoading}
-                  sticky
-                  onClick={retryRequiredRequests}
-                >
-                  <Icon icon={mdiFlash} />
-                  {intl.formatMessage(messages.requiredRequestsFailed)}
-                </InfoBar>
-              )}
-              {authRequestFailed && (
-                <InfoBar
-                  type="danger"
-                  ctaLabel="Try again"
-                  ctaLoading={areRequiredRequestsLoading}
-                  sticky
-                  onClick={retryRequiredRequests}
-                >
-                  <Icon icon={mdiFlash} />
-                  {intl.formatMessage(messages.authRequestFailed)}
-                </InfoBar>
-              )}
-              {automaticUpdates && showServicesUpdatedInfoBar &&
-                this.state.shouldShowServicesUpdatedInfoBar && (
+        {isMac && !isFullScreen && <div className="window-draggable" />}
+        <ErrorBoundary>
+          <div className="app">
+            {isWindows && !isFullScreen && (
+              <TitleBar
+                menu={window['ferdium'].menu.template}
+                icon="assets/images/logo.svg"
+              />
+            )}
+            {isMac && !isFullScreen && (
+              <span
+                onDoubleClick={toggleFullScreen}
+                className={classes.titleBar}
+              />
+            )}
+            <div className={`app__content ${classes.appContent}`}>
+              {workspacesDrawer}
+              {sidebar}
+              <div className="app__service">
+                <WorkspaceSwitchingIndicator />
+                {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
+                  <InfoBar
+                    type="danger"
+                    ctaLabel="Try again"
+                    ctaLoading={areRequiredRequestsLoading}
+                    sticky
+                    onClick={retryRequiredRequests}
+                  >
+                    <Icon icon={mdiFlash} />
+                    {intl.formatMessage(messages.requiredRequestsFailed)}
+                  </InfoBar>
+                )}
+                {authRequestFailed && (
                   <InfoBar
-                    type="primary"
-                    ctaLabel={intl.formatMessage(messages.buttonReloadServices)}
-                    onClick={() => window.location.reload()}
-                    onHide={() => {
-                      this.setState({
-                        shouldShowServicesUpdatedInfoBar: false,
-                      });
-                    }}
+                    type="danger"
+                    ctaLabel="Try again"
+                    ctaLoading={areRequiredRequestsLoading}
+                    sticky
+                    onClick={retryRequiredRequests}
                   >
-                    <Icon icon={mdiPowerPlug} />
-                    {intl.formatMessage(messages.servicesUpdated)}
+                    <Icon icon={mdiFlash} />
+                    {intl.formatMessage(messages.authRequestFailed)}
                   </InfoBar>
                 )}
-              {automaticUpdates && appUpdateIsDownloaded && this.state.shouldShowAppUpdateInfoBar && (
-                <AppUpdateInfoBar
-                  onInstallUpdate={installAppUpdate}
-                  onHide={() => {
-                    this.setState({ shouldShowAppUpdateInfoBar: false });
-                  }}
-                />
-              )}
-              <BasicAuth />
-              <QuickSwitch />
-              <PublishDebugInfo />
-              {services}
-              <Outlet />
+                {automaticUpdates &&
+                  showServicesUpdatedInfoBar &&
+                  this.state.shouldShowServicesUpdatedInfoBar && (
+                    <InfoBar
+                      type="primary"
+                      ctaLabel={intl.formatMessage(
+                        messages.buttonReloadServices,
+                      )}
+                      onClick={() => window.location.reload()}
+                      onHide={() => {
+                        this.setState({
+                          shouldShowServicesUpdatedInfoBar: false,
+                        });
+                      }}
+                    >
+                      <Icon icon={mdiPowerPlug} />
+                      {intl.formatMessage(messages.servicesUpdated)}
+                    </InfoBar>
+                  )}
+                {automaticUpdates &&
+                  appUpdateIsDownloaded &&
+                  this.state.shouldShowAppUpdateInfoBar && (
+                    <AppUpdateInfoBar
+                      onInstallUpdate={installAppUpdate}
+                      updateVersionParsed={updateVersionParse(updateVersion)}
+                      onHide={() => {
+                        this.setState({ shouldShowAppUpdateInfoBar: false });
+                      }}
+                    />
+                  )}
+                <BasicAuth />
+                <QuickSwitch />
+                <PublishDebugInfo />
+                {services}
+                <Outlet />
+              </div>
+              <Todos />
             </div>
-            <Todos />
           </div>
-        </div>
-      </ErrorBoundary>
+        </ErrorBoundary>
       </>
     );
   }
diff --git a/src/components/settings/SettingsLayout.jsx b/src/components/settings/SettingsLayout.jsx
index dea4bb387..989c428f2 100644
--- a/src/components/settings/SettingsLayout.jsx
+++ b/src/components/settings/SettingsLayout.jsx
@@ -8,6 +8,7 @@ import { Outlet } from 'react-router-dom';
 import ErrorBoundary from '../util/ErrorBoundary';
 import Appear from '../ui/effects/Appear';
 import Icon from '../ui/icon';
+import { isEscKeyPress } from '../../jsUtils';
 
 const messages = defineMessages({
   closeSettings: {
@@ -36,8 +37,7 @@ class SettingsLayout extends Component {
   }
 
   handleKeyDown(e) {
-    if (e.keyCode === 27) {
-      // escape key
+    if (isEscKeyPress(e.keyCode)) {
       this.props.closeSettings();
     }
   }
diff --git a/src/components/settings/navigation/SettingsNavigation.jsx b/src/components/settings/navigation/SettingsNavigation.jsx
index bbbe8d888..e1242a7fe 100644
--- a/src/components/settings/navigation/SettingsNavigation.jsx
+++ b/src/components/settings/navigation/SettingsNavigation.jsx
@@ -5,7 +5,11 @@ import { inject, observer } from 'mobx-react';
 import { RouterStore } from '@superwf/mobx-react-router';
 
 import { NavLink } from 'react-router-dom';
-import { LOCAL_SERVER, LIVE_FERDIUM_API, LIVE_FRANZ_API } from '../../../config';
+import {
+  LOCAL_SERVER,
+  LIVE_FERDIUM_API,
+  LIVE_FRANZ_API,
+} from '../../../config';
 import UIStore from '../../../stores/UIStore';
 import SettingsStore from '../../../stores/SettingsStore';
 import UserStore from '../../../stores/UserStore';
@@ -32,6 +36,10 @@ const messages = defineMessages({
     id: 'settings.navigation.team',
     defaultMessage: 'Manage Team',
   },
+  releaseNotes: {
+    id: 'settings.navigation.releaseNotes',
+    defaultMessage: 'Release Notes',
+  },
   supportFerdium: {
     id: 'settings.navigation.supportFerdium',
     defaultMessage: 'About Ferdium',
@@ -165,6 +173,16 @@ class SettingsNavigation extends Component {
             )}
         </NavLink>
         <NavLink
+          to="/settings/releasenotes"
+          className={({ isActive }) =>
+            isActive
+              ? 'settings-navigation__link is-active'
+              : 'settings-navigation__link'
+          }
+        >
+          {intl.formatMessage(messages.releaseNotes)}
+        </NavLink>
+        <NavLink
           to="/settings/support"
           className={({ isActive }) =>
             isActive
@@ -190,4 +208,6 @@ class SettingsNavigation extends Component {
   }
 }
 
-export default injectIntl(inject('stores', 'actions')(observer(SettingsNavigation)));
+export default injectIntl(
+  inject('stores', 'actions')(observer(SettingsNavigation)),
+);
diff --git a/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx b/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx
new file mode 100644
index 000000000..d0be82312
--- /dev/null
+++ b/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx
@@ -0,0 +1,99 @@
+import { Component } from 'react';
+import { observer } from 'mobx-react';
+import { defineMessages, injectIntl } from 'react-intl';
+import Markdown from 'markdown-to-jsx';
+import { openExternalUrl } from '../../../helpers/url-helpers';
+import { ferdiumVersion } from '../../../environment-remote';
+import {
+  getFerdiumVersion,
+  getUpdateInfoFromGH,
+} from '../../../helpers/update-helpers';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.releasenotes.headline',
+    defaultMessage: 'Release Notes',
+  },
+  connectionError: {
+    id: 'settings.releasenotes.connectionError',
+    defaultMessage:
+      'An error occured when connecting to Github, please try again later.',
+  },
+  connectionErrorPageMissing: {
+    id: 'settings.releasenotes.connectionErrorPageMissing',
+    defaultMessage:
+      'An error occured when connecting to Github, the page you are looking for is missing.',
+  },
+});
+
+interface IProps {
+  intl: any;
+}
+
+class ReleaseNotesDashboard extends Component<IProps> {
+  state = {
+    data: '',
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = { data: '' };
+  }
+
+  async componentDidMount() {
+    const { intl } = this.props;
+
+    const data = await getUpdateInfoFromGH(
+      window.location.href,
+      ferdiumVersion,
+      intl,
+    );
+
+    this.setState({
+      data,
+    });
+
+    for (const link of document.querySelectorAll('.releasenotes__body a')) {
+      link.addEventListener('click', this.handleClick.bind(this), false);
+    }
+  }
+
+  handleClick(e) {
+    e.preventDefault();
+    openExternalUrl(e.target.href);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener(
+      'click',
+      // eslint-disable-next-line unicorn/no-invalid-remove-event-listener
+      this.handleClick.bind(this),
+      false,
+    );
+  }
+
+  render() {
+    const { intl } = this.props;
+
+    const { data } = this.state;
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <span className="settings__header-item">
+            Ferdium {getFerdiumVersion(window.location.href, ferdiumVersion)}{' '}
+            {' | '}
+          </span>
+          <span className="settings__header-item__secondary">
+            {intl.formatMessage(messages.headline)}
+          </span>
+        </div>
+        <div className="settings__body releasenotes__body">
+          <Markdown options={{ wrapper: 'article' }}>{data}</Markdown>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default injectIntl(observer(ReleaseNotesDashboard));
diff --git a/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx b/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx
new file mode 100644
index 000000000..ee0ba75a8
--- /dev/null
+++ b/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx
@@ -0,0 +1,79 @@
+import { Component } from 'react';
+import { inject, observer } from 'mobx-react';
+import { defineMessages, injectIntl } from 'react-intl';
+
+import { mdiClose } from '@mdi/js';
+import { Outlet } from 'react-router-dom';
+import { StoresProps } from '../../../@types/ferdium-components.types';
+import ErrorBoundary from '../../util/ErrorBoundary';
+import Appear from '../../ui/effects/Appear';
+import Icon from '../../ui/icon';
+import { isEscKeyPress } from '../../../jsUtils';
+
+const messages = defineMessages({
+  closeSettings: {
+    id: 'settings.app.closeSettings',
+    defaultMessage: 'Close settings',
+  },
+});
+
+interface IProps extends StoresProps {
+  intl: any;
+}
+
+class ReleaseNotesLayout extends Component<IProps> {
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown.bind(this), false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener(
+      'keydown',
+      // eslint-disable-next-line unicorn/no-invalid-remove-event-listener
+      this.handleKeyDown.bind(this),
+      false,
+    );
+  }
+
+  handleKeyDown(e) {
+    if (isEscKeyPress(e.keyCode)) {
+      this.props.actions.ui.closeSettings();
+    }
+  }
+
+  render() {
+    const { closeSettings } = this.props.actions.ui;
+
+    const { intl } = this.props;
+
+    return (
+      <Appear transitionName="fadeIn-fast">
+        <div className="settings-wrapper">
+          <ErrorBoundary>
+            <button
+              type="button"
+              className="settings-wrapper__action"
+              onClick={closeSettings}
+              aria-label={intl.formatMessage(messages.closeSettings)}
+            />
+            <div className="settings franz-form">
+              <Outlet />
+              <button
+                type="button"
+                className="settings__close"
+                onClick={closeSettings}
+                aria-label={intl.formatMessage(messages.closeSettings)}
+              >
+                <Icon icon={mdiClose} size={1.35} />
+              </button>
+            </div>
+          </ErrorBoundary>
+        </div>
+      </Appear>
+    );
+  }
+}
+
+export default injectIntl<'intl', IProps>(
+  inject('stores', 'actions')(observer(ReleaseNotesLayout)),
+);
diff --git a/src/components/settings/settings/EditSettingsForm.jsx b/src/components/settings/settings/EditSettingsForm.jsx
index cb1d261f8..a10d89570 100644
--- a/src/components/settings/settings/EditSettingsForm.jsx
+++ b/src/components/settings/settings/EditSettingsForm.jsx
@@ -15,6 +15,13 @@ import Input from '../../ui/Input';
 import ColorPickerInput from '../../ui/ColorPickerInput';
 import Infobox from '../../ui/Infobox';
 import { H1, H2, H3, H5 } from '../../ui/headline';
+import {
+  ferdiumVersion,
+  userDataPath,
+  userDataRecipesPath,
+} from '../../../environment-remote';
+
+import { updateVersionParse } from '../../../helpers/update-helpers';
 
 import {
   DEFAULT_ACCENT_COLOR,
@@ -25,11 +32,6 @@ import {
   SPLIT_COLUMNS_MIN,
 } from '../../../config';
 import { isMac, isWindows, lockFerdiumShortcutKey } from '../../../environment';
-import {
-  ferdiumVersion,
-  userDataPath,
-  userDataRecipesPath,
-} from '../../../environment-remote';
 import { openExternalUrl, openPath } from '../../../helpers/url-helpers';
 import globalMessages from '../../../i18n/globalMessages';
 import Icon from '../../ui/icon';
@@ -213,6 +215,10 @@ const messages = defineMessages({
     id: 'settings.app.buttonInstallUpdate',
     defaultMessage: 'Restart & install update',
   },
+  buttonShowChangelog: {
+    id: 'settings.app.buttonShowChangelog',
+    defaultMessage: 'Show changelog',
+  },
   updateStatusSearching: {
     id: 'settings.app.updateStatusSearching',
     defaultMessage: 'Searching for updates...',
@@ -328,6 +334,7 @@ class EditSettingsForm extends Component {
       checkForUpdates,
       installUpdate,
       form,
+      updateVersion,
       isCheckingForUpdates,
       isAdaptableDarkModeEnabled,
       isUseGrayscaleServicesEnabled,
@@ -1002,6 +1009,20 @@ class EditSettingsForm extends Component {
                             loaded={!isCheckingForUpdates || !isUpdateAvailable}
                           />
                         )}
+                        {(isUpdateAvailable || updateIsReadyToInstall) && (
+                          <Button
+                            className="settings__updates__changelog-button"
+                            label={intl.formatMessage(
+                              messages.buttonShowChangelog,
+                            )}
+                            onClick={() => {
+                              window.location.href = `#/releasenotes${updateVersionParse(
+                                updateVersion,
+                              )}`;
+                            }}
+                          />
+                        )}
+                        <br />
                         <br />
                       </div>
                       <p>
diff --git a/src/components/ui/effects/Appear.tsx b/src/components/ui/effects/Appear.tsx
index 117c02f97..228c7888a 100644
--- a/src/components/ui/effects/Appear.tsx
+++ b/src/components/ui/effects/Appear.tsx
@@ -1,10 +1,10 @@
-import { ReactChildren, useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 
 type Props = {
-  children: ReactChildren;
+  children: ReactNode;
   transitionName: string;
-  className: string;
+  className?: string;
 };
 const Appear = ({
   children,
@@ -36,4 +36,8 @@ const Appear = ({
   );
 };
 
+Appear.defaultProps = {
+  className: '',
+};
+
 export default Appear;
diff --git a/src/containers/auth/AuthLayoutContainer.tsx b/src/containers/auth/AuthLayoutContainer.tsx
index 8d31cfb48..6fc6713f1 100644
--- a/src/containers/auth/AuthLayoutContainer.tsx
+++ b/src/containers/auth/AuthLayoutContainer.tsx
@@ -49,6 +49,7 @@ class AuthLayoutContainer extends Component<AuthLayoutContainerProps> {
           appUpdateIsDownloaded={
             app.updateStatus === app.updateStatusTypes.DOWNLOADED
           }
+          updateVersion={app.updateVersion}
         >
           <Outlet />
         </AuthLayout>
diff --git a/src/containers/auth/AuthReleaseNotesScreen.tsx b/src/containers/auth/AuthReleaseNotesScreen.tsx
new file mode 100644
index 000000000..c717529fa
--- /dev/null
+++ b/src/containers/auth/AuthReleaseNotesScreen.tsx
@@ -0,0 +1,107 @@
+import { Component } from 'react';
+import { inject, observer } from 'mobx-react';
+
+import { defineMessages, injectIntl } from 'react-intl';
+import Markdown from 'markdown-to-jsx';
+import { mdiArrowLeftCircle } from '@mdi/js';
+import { openExternalUrl } from '../../helpers/url-helpers';
+import Icon from '../../components/ui/icon';
+import { ferdiumVersion } from '../../environment-remote';
+import {
+  getFerdiumVersion,
+  getUpdateInfoFromGH,
+} from '../../helpers/update-helpers';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.releasenotes.headline',
+    defaultMessage: 'Release Notes',
+  },
+});
+
+interface IProps {
+  intl: any;
+}
+
+class AuthReleaseNotesScreen extends Component<IProps> {
+  state = {
+    data: '',
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = { data: '' };
+  }
+
+  async componentDidMount() {
+    const { intl } = this.props;
+
+    const data = await getUpdateInfoFromGH(
+      window.location.href,
+      ferdiumVersion,
+      intl,
+    );
+
+    this.setState({
+      data,
+    });
+
+    for (const link of document.querySelectorAll('.releasenotes__body a')) {
+      link.addEventListener('click', this.handleClick.bind(this), false);
+    }
+  }
+
+  handleClick(e) {
+    e.preventDefault();
+    openExternalUrl(e.target.href);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener(
+      'click',
+      // eslint-disable-next-line unicorn/no-invalid-remove-event-listener
+      this.handleClick.bind(this),
+      false,
+    );
+  }
+
+  render() {
+    const { intl } = this.props;
+
+    const { data } = this.state;
+    return (
+      <div className="auth__container auth__container--releasenotes">
+        <div className="auth__main--releasenotes">
+          <div className="auth__header">
+            <span className="auth__header-item">
+              Ferdium {getFerdiumVersion(window.location.href, ferdiumVersion)}{' '}
+              {' | '}
+            </span>
+            <span className="auth__header-item__secondary">
+              {intl.formatMessage(messages.headline)}
+            </span>
+          </div>
+          <div className="auth__body releasenotes__body">
+            <Markdown options={{ wrapper: 'article' }}>{data}</Markdown>
+          </div>
+          <div className="auth__help">
+            <button
+              type="button"
+              onClick={() => {
+                // For some reason <Link> doesn't work here. So we hard code the path to take us to the Welcome Screen
+                window.location.href = '#/auth/welcome';
+              }}
+            >
+              <Icon icon={mdiArrowLeftCircle} size={1.5} />
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default injectIntl<'intl', IProps>(
+  inject('stores', 'actions')(observer(AuthReleaseNotesScreen)),
+);
diff --git a/src/containers/layout/AppLayoutContainer.tsx b/src/containers/layout/AppLayoutContainer.tsx
index a4857a426..9c03b0ba4 100644
--- a/src/containers/layout/AppLayoutContainer.tsx
+++ b/src/containers/layout/AppLayoutContainer.tsx
@@ -157,6 +157,7 @@ class AppLayoutContainer extends Component<AppLayoutContainerProps> {
           areRequiredRequestsSuccessful={requests.areRequiredRequestsSuccessful}
           retryRequiredRequests={retryRequiredRequests}
           areRequiredRequestsLoading={requests.areRequiredRequestsLoading}
+          updateVersion={app.updateVersion}
         >
           <Outlet />
         </AppLayout>
diff --git a/src/containers/settings/EditSettingsScreen.tsx b/src/containers/settings/EditSettingsScreen.tsx
index a6c4561dd..fbbed629a 100644
--- a/src/containers/settings/EditSettingsScreen.tsx
+++ b/src/containers/settings/EditSettingsScreen.tsx
@@ -853,6 +853,7 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
     const { app } = this.props.stores;
     const {
       updateStatus,
+      updateVersion,
       updateStatusTypes,
       isClearingAllCache,
       lockingFeatureEnabled,
@@ -860,13 +861,13 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
     const { checkForUpdates, installUpdate, clearAllCache } =
       this.props.actions.app;
     const form = this.prepareForm();
-
     return (
       <ErrorBoundary>
         <EditSettingsForm
           form={form}
           checkForUpdates={checkForUpdates}
           installUpdate={installUpdate}
+          updateVersion={updateVersion}
           isCheckingForUpdates={updateStatus === updateStatusTypes.CHECKING}
           isUpdateAvailable={updateStatus === updateStatusTypes.AVAILABLE}
           noUpdateAvailable={updateStatus === updateStatusTypes.NOT_AVAILABLE}
diff --git a/src/containers/settings/ReleaseNotesScreen.tsx b/src/containers/settings/ReleaseNotesScreen.tsx
new file mode 100644
index 000000000..c3014d187
--- /dev/null
+++ b/src/containers/settings/ReleaseNotesScreen.tsx
@@ -0,0 +1,16 @@
+import { Component, ReactElement } from 'react';
+
+import ReleaseNotes from '../../components/settings/releaseNotes/ReleaseNotesDashboard';
+import ErrorBoundary from '../../components/util/ErrorBoundary';
+
+class ReleaseNotesScreen extends Component {
+  render(): ReactElement {
+    return (
+      <ErrorBoundary>
+        <ReleaseNotes />
+      </ErrorBoundary>
+    );
+  }
+}
+
+export default ReleaseNotesScreen;
diff --git a/src/containers/settings/ReleaseNotesWindow.tsx b/src/containers/settings/ReleaseNotesWindow.tsx
new file mode 100644
index 000000000..3e43727d0
--- /dev/null
+++ b/src/containers/settings/ReleaseNotesWindow.tsx
@@ -0,0 +1,42 @@
+import { inject, observer } from 'mobx-react';
+import { Component, ReactPortal } from 'react';
+import ReactDOM from 'react-dom';
+import { Outlet } from 'react-router-dom';
+
+import { StoresProps } from '../../@types/ferdium-components.types';
+import Layout from '../../components/settings/releaseNotes/ReleaseNotesLayout';
+import ErrorBoundary from '../../components/util/ErrorBoundary';
+
+class SettingsContainer extends Component<StoresProps> {
+  portalRoot: any;
+
+  el: HTMLDivElement;
+
+  constructor(props: StoresProps) {
+    super(props);
+
+    this.portalRoot = document.querySelector('#portalContainer');
+    this.el = document.createElement('div');
+  }
+
+  componentDidMount(): void {
+    this.portalRoot.append(this.el);
+  }
+
+  componentWillUnmount(): void {
+    this.el.remove();
+  }
+
+  render(): ReactPortal {
+    return ReactDOM.createPortal(
+      <ErrorBoundary>
+        <Layout {...this.props}>
+          <Outlet />
+        </Layout>
+      </ErrorBoundary>,
+      this.el,
+    );
+  }
+}
+
+export default inject('stores', 'actions')(observer(SettingsContainer));
diff --git a/src/features/workspaces/components/WorkspaceItem.tsx b/src/features/workspaces/components/WorkspaceItem.tsx
index f46375c7a..eb33a0376 100644
--- a/src/features/workspaces/components/WorkspaceItem.tsx
+++ b/src/features/workspaces/components/WorkspaceItem.tsx
@@ -1,8 +1,6 @@
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
-
 import Workspace from '../models/Workspace';
 
 const styles = theme => ({
@@ -18,17 +16,11 @@ const styles = theme => ({
 
 type Props = {
   classes: any;
-  workspace: any;
+  workspace: typeof Workspace;
   onItemClick: (workspace) => void;
 };
 
 class WorkspaceItem extends Component<Props> {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    workspace: PropTypes.instanceOf(Workspace).isRequired,
-    onItemClick: PropTypes.func.isRequired,
-  };
-
   render() {
     const { classes, workspace, onItemClick } = this.props;
 
diff --git a/src/helpers/update-helpers.ts b/src/helpers/update-helpers.ts
new file mode 100644
index 000000000..daeef5413
--- /dev/null
+++ b/src/helpers/update-helpers.ts
@@ -0,0 +1,65 @@
+import { Octokit } from '@octokit/core';
+import { defineMessages, IntlShape } from 'react-intl';
+
+export function getFerdiumVersion(
+  currentLocation: string,
+  ferdiumVersion: string,
+): string {
+  const matches = currentLocation?.match(/version=([^&]*)/);
+  if (matches !== null) {
+    return `v${matches[1]}`;
+  }
+  return `v${ferdiumVersion}`;
+}
+
+export function updateVersionParse(updateVersion: string): string {
+  return updateVersion !== '' ? `?version=${updateVersion}` : '';
+}
+
+export function onAuthGoToReleaseNotes(
+  currentLocation: string,
+  updateVersionParsed: string = '',
+): string {
+  return currentLocation.includes('#/auth')
+    ? `#/auth/releasenotes${updateVersionParsed}`
+    : `#/releasenotes${updateVersionParsed}`;
+}
+
+const messages = defineMessages({
+  connectionError: {
+    id: 'settings.releasenotes.connectionError',
+    defaultMessage:
+      'An error occured when connecting to Github, please try again later.',
+  },
+  connectionErrorPageMissing: {
+    id: 'settings.releasenotes.connectionErrorPageMissing',
+    defaultMessage:
+      'An error occured when connecting to Github, the page you are looking for is missing.',
+  },
+});
+
+export async function getUpdateInfoFromGH(
+  currentLocation: string,
+  ferdiumVersion: string,
+  intl: IntlShape,
+): Promise<string> {
+  const octokit = new Octokit();
+  try {
+    const response = await octokit.request(
+      'GET /repos/{owner}/{repo}/releases/tags/{tag}',
+      {
+        owner: 'ferdium',
+        repo: 'ferdium-app',
+        tag: getFerdiumVersion(currentLocation, ferdiumVersion),
+      },
+    );
+
+    if (response.status === 200) {
+      const json = response.data.body;
+      return json || `### ${intl.formatMessage(messages.connectionError)}`;
+    }
+    return `### ${intl.formatMessage(messages.connectionError)}`;
+  } catch {
+    return `### ${intl.formatMessage(messages.connectionErrorPageMissing)}`;
+  }
+}
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 3c3beea6f..d45ab5c3c 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -194,6 +194,7 @@
   "settings.app.buttonOpenFerdiumServiceRecipesFolder": "Open Service Recipes folder",
   "settings.app.buttonOpenImportExport": "Import / Export",
   "settings.app.buttonSearchForUpdate": "Check for updates",
+  "settings.app.buttonShowChangelog": "Show changelog",
   "settings.app.cacheInfo": "Ferdium cache is currently using {size} of disk space.",
   "settings.app.cacheNotCleared": "Couldn't clear all cache",
   "settings.app.closeSettings": "Close settings",
@@ -302,6 +303,7 @@
   "settings.navigation.account": "Account",
   "settings.navigation.availableServices": "Available services",
   "settings.navigation.logout": "Logout",
+  "settings.navigation.releaseNotes": "Release Notes",
   "settings.navigation.supportFerdium": "About Ferdium",
   "settings.navigation.team": "Manage Team",
   "settings.navigation.yourServices": "Your services",
@@ -319,6 +321,9 @@
   "settings.recipes.missingService": "Missing a service?",
   "settings.recipes.nothingFound": "Sorry, but no service matched your search term - but you can still probably add it using the \"Custom Website\" option. Please note that the website might show more services that have been added to Ferdium since the version that you are currently on. To get those new services, please consider upgrading to a newer version of Ferdium.",
   "settings.recipes.servicesSuccessfulAddedInfo": "Service successfully added",
+  "settings.releasenotes.connectionError": "An error occured when connecting to Github, please try again later.",
+  "settings.releasenotes.connectionErrorPageMissing": "An error occured when connecting to Github, the page you are looking for is missing.",
+  "settings.releasenotes.headline": "Release Notes",
   "settings.searchService": "Search service",
   "settings.service.error.goBack": "Back to services",
   "settings.service.error.headline": "Error",
diff --git a/src/jsUtils.ts b/src/jsUtils.ts
index f5b39a000..36d70da25 100644
--- a/src/jsUtils.ts
+++ b/src/jsUtils.ts
@@ -20,3 +20,5 @@ export const convertToJSON = (data: string | any | undefined | null) =>
 
 export const cleanseJSObject = (data: any | undefined | null) =>
   JSON.parse(JSON.stringify(data));
+
+export const isEscKeyPress = (keyCode : Number) => keyCode === 27;
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index 8fd3e9e01..41b4aa9f7 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -32,11 +32,7 @@ import {
   nodeVersion,
   osArch,
 } from '../environment';
-import {
-  CUSTOM_WEBSITE_RECIPE_ID,
-  GITHUB_FERDIUM_URL,
-  LIVE_API_FERDIUM_WEBSITE,
-} from '../config';
+import { CUSTOM_WEBSITE_RECIPE_ID, LIVE_API_FERDIUM_WEBSITE } from '../config';
 import { ferdiumVersion } from '../environment-remote';
 import { todoActions } from '../features/todos/actions';
 import workspaceActions from '../features/workspaces/actions';
@@ -44,6 +40,7 @@ import { workspaceStore } from '../features/workspaces/index';
 import { importExportURL, serverBase, serverName } from '../api/apiBase';
 import { openExternalUrl } from '../helpers/url-helpers';
 import globalMessages from '../i18n/globalMessages';
+import { onAuthGoToReleaseNotes } from '../helpers/update-helpers';
 
 // @ts-expect-error Cannot find module '../buildInfo.json' or its corresponding type declarations.
 import * as buildInfo from '../buildInfo.json';
@@ -586,10 +583,7 @@ const _titleBarTemplateFactory = (intl, locked) => [
       {
         label: intl.formatMessage(menuItems.changelog),
         click() {
-          openExternalUrl(
-            `${GITHUB_FERDIUM_URL}/ferdium-app/releases/tag/v${ferdiumVersion}`,
-            true,
-          );
+          window.location.href = onAuthGoToReleaseNotes(window.location.href);
         },
       },
       {
diff --git a/src/routes.tsx b/src/routes.tsx
index 1f929531e..478d3dfe8 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -9,6 +9,7 @@ import {
 
 import AppLayoutContainer from './containers/layout/AppLayoutContainer';
 import SettingsWindow from './containers/settings/SettingsWindow';
+import ReleaseNotesWindow from './containers/settings/ReleaseNotesWindow';
 import RecipesScreen from './containers/settings/RecipesScreen';
 import ServicesScreen from './containers/settings/ServicesScreen';
 import EditServiceScreen from './containers/settings/EditServiceScreen';
@@ -18,8 +19,10 @@ import EditUserScreen from './containers/settings/EditUserScreen';
 import EditSettingsScreen from './containers/settings/EditSettingsScreen';
 import InviteSettingsScreen from './containers/settings/InviteScreen';
 import SupportFerdiumScreen from './containers/settings/SupportScreen';
+import ReleaseNotesScreen from './containers/settings/ReleaseNotesScreen';
 import WelcomeScreen from './containers/auth/WelcomeScreen';
 import LoginScreen from './containers/auth/LoginScreen';
+import AuthReleaseNotesScreen from './containers/auth/AuthReleaseNotesScreen';
 import PasswordScreen from './containers/auth/PasswordScreen';
 import ChangeServerScreen from './containers/auth/ChangeServerScreen';
 import SignupScreen from './containers/auth/SignupScreen';
@@ -100,10 +103,25 @@ class FerdiumRoutes extends Component<Props> {
               path="/auth/logout"
               element={<LoginScreen {...routeProps} {...errorProps} />}
             />
+            <Route
+              path="/auth/releasenotes"
+              element={
+                <AuthReleaseNotesScreen {...routeProps} {...errorProps} />
+              }
+            />
           </Route>
 
           <Route path="/" element={<AppLayoutContainer {...routeProps} />}>
             <Route
+              path="/releasenotes"
+              element={<ReleaseNotesWindow {...this.props} />}
+            >
+              <Route
+                path="/releasenotes"
+                element={<ReleaseNotesScreen {...this.props} />}
+              />
+            </Route>
+            <Route
               path="/settings"
               element={<SettingsWindow {...this.props} />}
             >
@@ -155,6 +173,10 @@ class FerdiumRoutes extends Component<Props> {
                 path="/settings/support"
                 element={<SupportFerdiumScreen {...this.props} />}
               />
+              <Route
+                path="/settings/releasenotes"
+                element={<ReleaseNotesScreen {...this.props} />}
+              />
             </Route>
           </Route>
         </Routes>
diff --git a/src/stores/AppStore.ts b/src/stores/AppStore.ts
index 116e64756..af1a0daae 100644
--- a/src/stores/AppStore.ts
+++ b/src/stores/AppStore.ts
@@ -82,6 +82,8 @@ export default class AppStore extends TypedStore {
 
   @observable updateStatus = '';
 
+  @observable updateVersion = '';
+
   @observable locale = ferdiumLocale;
 
   @observable isSystemMuteOverridden = false;
@@ -94,7 +96,8 @@ export default class AppStore extends TypedStore {
 
   @observable isFocused = true;
 
-  @observable lockingFeatureEnabled = DEFAULT_APP_SETTINGS.lockingFeatureEnabled;
+  @observable lockingFeatureEnabled =
+    DEFAULT_APP_SETTINGS.lockingFeatureEnabled;
 
   @observable launchInBackground = DEFAULT_APP_SETTINGS.autoLaunchInBackground;
 
@@ -181,6 +184,7 @@ export default class AppStore extends TypedStore {
     ipcRenderer.on('autoUpdate', (_, data) => {
       if (this.updateStatus !== this.updateStatusTypes.FAILED) {
         if (data.available) {
+          this.updateVersion = data.version;
           this.updateStatus = this.updateStatusTypes.AVAILABLE;
           if (isMac && this.stores.settings.app.automaticUpdates) {
             app.dock.bounce();
diff --git a/src/styles/auth.scss b/src/styles/auth.scss
index e60c4971c..53c03a40a 100644
--- a/src/styles/auth.scss
+++ b/src/styles/auth.scss
@@ -61,6 +61,12 @@
     width: 350px;
 
     &.auth__container--signup { width: 450px; }
+
+    &.auth__container--releasenotes {
+      width: 90%;
+      height: -webkit-fill-available;
+      max-height: 80%;
+    }
   }
 
   .auth__logo {
@@ -92,6 +98,32 @@
     }
   }
 
+  .releasenotes__body {
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+      background: none;
+      border-radius: 10px;
+      -webkit-border-radius: 10px;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+      background: $theme-gray-lighter;
+      border-radius: 10px;
+      -webkit-border-radius: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb:window-inactive {
+      background: none;
+    }
+  }
+
   .touchid__button {
     margin-bottom: 25px;
   }
@@ -135,6 +167,7 @@
     padding-top: 2%;
     padding-bottom: 2%;
     justify-content: center;
+    height: fit-content;
   }
 
   .auth__adlk {
@@ -168,3 +201,29 @@
     text-align: center;
   }
 }
+
+.auth__main--releasenotes {
+  margin: 4% 2% 0% 4%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: -webkit-fill-available;
+}
+
+.auth__header {
+  font-size: x-large;
+  display: inline-flex;
+  flex-direction: row;
+  align-content: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  height: fit-content;
+
+  &-item__secondary {
+    padding-left: 5px
+  }
+}
+
+.auth__body {
+  margin-top: 2%;
+}
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 76d167fd4..f16fc91fd 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -234,6 +234,10 @@
 
     .settings__header-item {
       @extend %headline;
+
+      &__secondary {
+        padding-left: 5px
+      }
     }
 
     .separator {
@@ -630,3 +634,94 @@
     display: inline-block;
   }
 }
+
+.settings__updates__changelog-button {
+  margin-left: 2% !important;
+}
+
+.releasenotes__body {
+  line-height: 150%;
+
+    h1 {
+      margin-top: 0;
+      font-weight: 400;
+      font-size: xx-large;
+      text-align: center;
+    }
+
+    h2 {
+      margin-top: 10%;
+      font-weight: 400;
+      font-size: x-large;
+      text-align: center;
+      margin-bottom: 2%;
+    }
+
+    h3 {
+      margin-top: 5%;
+      font-weight: 400;
+      font-size: large;
+      text-align: center;
+      margin-bottom: 2%;
+    }
+
+    h4 {
+      margin-top: 5%;
+      font-weight: 400;
+      font-size: medium;
+      text-align: center;
+      margin-bottom: 2%;
+    }
+
+    h5 {
+      margin-top: 5%;
+      font-weight: 400;
+      text-align: center;
+      margin-bottom: 2%;
+    }
+
+    p {
+      margin-top: 4%;
+      margin-bottom: 4%;
+      user-select: text;
+    }
+
+    a {
+      color: rgb(0, 102, 255) !important;
+      user-select: text;
+    }
+
+    code {
+      background: #f4f4f4;
+      border: 1px solid #ddd;
+      border-radius: 5px;
+      padding: 0.2em 0.4em;
+      font-size: 85%;
+      color: #666;
+      font-family: monospace;
+      margin-bottom: 1.6em;
+      max-width: 100%;
+      overflow: auto;
+      user-select: text;
+    }
+
+    ul {
+      padding-left: 2rem;
+    }
+
+    li {
+      margin-top: 2%;
+      list-style-type: disc;
+      user-select: text;
+    }
+
+    img {
+      max-width: 100%;
+      margin-top: 2%;
+      margin-bottom: 2%;
+      align-items: center;
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+    }
+}
diff --git a/test/helpers/update-helpers.test.ts b/test/helpers/update-helpers.test.ts
new file mode 100644
index 000000000..0494c6855
--- /dev/null
+++ b/test/helpers/update-helpers.test.ts
@@ -0,0 +1,89 @@
+import * as update_helpers from '../../src/helpers/update-helpers';
+
+describe('getFerdiumVersion', () => {
+  const baseVersion = '6.0.0-nightly.3';
+  it(`returns ${baseVersion} for empty string`, () => {
+    const result = update_helpers.getFerdiumVersion('', baseVersion);
+    expect(result).toEqual(`v${baseVersion}`);
+  });
+
+  it(`returns ${baseVersion} for ${baseVersion}`, () => {
+    const result = update_helpers.getFerdiumVersion('', baseVersion);
+    expect(result).toEqual(`v${baseVersion}`);
+  });
+
+  it(`returns v6.0.0-beta.3`, () => {
+    const result = update_helpers.getFerdiumVersion(
+      '?version=6.0.0-beta.3',
+      baseVersion,
+    );
+    expect(result).toEqual(`v6.0.0-beta.3`);
+  });
+
+  it(`returns v6.0.0`, () => {
+    const result = update_helpers.getFerdiumVersion(
+      '?version=6.0.0',
+      baseVersion,
+    );
+    expect(result).toEqual(`v6.0.0`);
+  });
+
+  it(`returns ${baseVersion}`, () => {
+    const result = update_helpers.getFerdiumVersion(
+      'http://test/=6.0.0',
+      baseVersion,
+    );
+    expect(result).toEqual(`v${baseVersion}`);
+  });
+
+  it(`returns ${baseVersion} for missing 'version='`, () => {
+    const result = update_helpers.getFerdiumVersion(
+      'http://test/',
+      baseVersion,
+    );
+    expect(result).toEqual(`v${baseVersion}`);
+  });
+});
+
+describe('updateVersionParse', () => {
+  it(`returns empty string for empty string`, () => {
+    const result = update_helpers.updateVersionParse('');
+    expect(result).toEqual('');
+  });
+  it(`returns '?version=x.x for x.x`, () => {
+    const result = update_helpers.updateVersionParse('6.0.0');
+    expect(result).toEqual('?version=6.0.0');
+  });
+});
+
+describe('onAuthGoToReleaseNotes', () => {
+  it(`returns '#/releasenotes' string for empty string`, () => {
+    const result = update_helpers.onAuthGoToReleaseNotes('', '');
+    expect(result).toEqual('#/releasenotes');
+  });
+
+  it(`returns '#/releasenotes' string for empty string`, () => {
+    const result = update_helpers.onAuthGoToReleaseNotes('', '?version=6.0.0');
+    expect(result).toEqual('#/releasenotes?version=6.0.0');
+  });
+
+  it(`returns '#/releasenotes' string for empty string`, () => {
+    const result = update_helpers.onAuthGoToReleaseNotes('');
+    expect(result).toEqual('#/releasenotes');
+  });
+
+  it(`returns '#/releasenotes' string for empty string`, () => {
+    const result = update_helpers.onAuthGoToReleaseNotes('#/auth', '');
+    expect(result).toEqual('#/auth/releasenotes');
+  });
+
+  it(`returns '#/releasenotes' string for empty string`, () => {
+    const result = update_helpers.onAuthGoToReleaseNotes('#/auth', '?version=6.0.0');
+    expect(result).toEqual('#/auth/releasenotes?version=6.0.0');
+  });
+
+  it(`returns '#/releasenotes' string for empty string`, () => {
+    const result = update_helpers.onAuthGoToReleaseNotes('#/auth');
+    expect(result).toEqual('#/auth/releasenotes');
+  });
+});
diff --git a/test/jsUtils.test.ts b/test/jsUtils.test.ts
index 8ef69b46f..406326d4b 100644
--- a/test/jsUtils.test.ts
+++ b/test/jsUtils.test.ts
@@ -110,4 +110,16 @@ describe('jsUtils', () => {
       expect(result).toEqual([{ a: 'b' }, { c: 'd' }]);
     });
   });
+
+  describe('isEscKeyPress', () => {
+    it('returns true if the key number is 27', () => {
+      const result = jsUtils.isEscKeyPress(27);
+      expect(result).toEqual(true);
+    });
+
+    it('returns false if the key number is 27', () => {
+      const result = jsUtils.isEscKeyPress(28);
+      expect(result).toEqual(false);
+    });
+  });
 });
diff --git a/tsconfig.json b/tsconfig.json
index 7a50a4a2d..d1465de86 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,7 +7,8 @@
     "target": "esnext",
     "lib": [
       "esnext",
-      "dom"
+      "dom",
+      "dom.iterable"
     ],
     "module": "CommonJS",
     "jsx": "react-jsx",