diff --git a/docs/ChangeLog.mdx b/docs/ChangeLog.mdx
new file mode 100644
index 0000000..8ae3ee7
--- /dev/null
+++ b/docs/ChangeLog.mdx
@@ -0,0 +1,8 @@
+import { ChangeLog } from "./components/ChangeLog";
+import changelog from './codegen/changelog.codegen';
+
+# Check out what the latest updates are
+
+<ChangeLog tags={changelog}/>
+
+
diff --git a/docs/codegen/changelog.codegen b/docs/codegen/changelog.codegen
new file mode 100644
index 0000000..8183d23
--- /dev/null
+++ b/docs/codegen/changelog.codegen
@@ -0,0 +1,35 @@
+
+const { execSync } = require('child_process');
+const commitLog = execSync('git log --pretty="%H %aN %aE %s"').toString().trim();
+const tagLog = execSync('git log --tags --no-walk --pretty="%H %S"').toString().trim();
+
+const tags = Object.fromEntries(tagLog.split('\n').map(line => {
+	const [hash, tag] = line.split(' ');
+	return [hash, tag];
+}));
+
+const commits = commitLog.split('\n').map(line => {
+	const [hash, author, email, ...message] = line.split(' ');
+	return { hash, author, email, message: message.join(' ') };
+});
+
+const taggedCommits = [];
+
+for (let i = 0; i < commits.length;) {
+	let taggedCommit = { tag: tags[commits[i].hash], commits: []};
+
+	do {
+		taggedCommit.commits.push(commits[i]);
+	} 
+	while (++i < commits.length && !tags[commits[i].hash]);
+
+	taggedCommits.push(taggedCommit);
+}
+
+
+module.exports = function () {
+	return `
+//@ts-nocheck
+export default ${JSON.stringify(taggedCommits)};
+	`;
+};
diff --git a/docs/components/ChangeLog.tsx b/docs/components/ChangeLog.tsx
new file mode 100644
index 0000000..7647ef9
--- /dev/null
+++ b/docs/components/ChangeLog.tsx
@@ -0,0 +1,25 @@
+import { ReactElement } from "react";
+import React from "react";
+
+function TagWithCommits({ tag, commits }: { tag: string, commits: Commit[] }): ReactElement {
+	return (
+		<>
+			{tag || "Prerelease"}
+			{
+				commits.map(v => (
+					<>
+						* {v.message}<br />
+					</>
+				))
+			}
+		</>
+	)
+}
+
+export function ChangeLog({ tags }: React.PropsWithChildren<{ tags: TaggedCommits[] }>): ReactElement {
+	return (
+		<>
+			{tags.map(({ tag, commits }) => <TagWithCommits tag={tag} commits={commits} />)}
+		</>
+	)
+}
\ No newline at end of file
diff --git a/docs/index.mdx b/docs/index.mdx
index 0dff033..a165898 100644
--- a/docs/index.mdx
+++ b/docs/index.mdx
@@ -11,6 +11,8 @@ import { IoGridSharp } from "react-icons/io5";
 
 # Quick Start
 
+Here is a little checklist you can use to get you started with MicroSDeck
+
 <CheckList>
 	<CheckListItem title="Registered a Card" check={(cardsAndGames) => cardsAndGames.length > 0}>
 		To Register a MicroSD card with MicroSDeck it simply has to be formatted by Steam and inserted.
@@ -39,10 +41,10 @@ import { IoGridSharp } from "react-icons/io5";
 		Giving your MicroSD card a meaningful name is half the battle. Try and come up with a system to easily label your cards. Some examples are:
 
 		* With many different MicroSD card vendors it might be possible to just use the vendor name (e.g Sandisk, Samsung, ADATA)
-		* Using small stickers (they have to be very thin) or Using pens, Little icons can be drawn onto the SD Cards (Emoji names are supported)
-		* Some MicroSD card cases are numbered or lettered
+		* Using small stickers (they have to be very thin) or Using pens, Little icons can be applied to the SD Cards (Emoji names are supported in MicroSDeck)
+		* Some MicroSD card cases are numbered or lettered allowing you identify the cards theycontain
 
-		But you can get as creative as you want in naming the cards as you want. As long as you know which physical card belongs to which digital name.
+		But you can get as creative as you want. As long as you know which physical card belongs to which digital name.
 	</CheckListItem>
 	<CheckListItem title="Added Non Steam Game"check={(cardsAndGames) => cardsAndGames.filter(([_, games]) => games.filter(v => !v.is_steam).length > 0).length > 0}>
 		The last step is to add a Non-Steam Game. This is also achieved via the same popup menu as renaming a card.
@@ -53,8 +55,3 @@ import { IoGridSharp } from "react-icons/io5";
 
 
 
-Here is a little demo of why my 20 hour investment into this doc engine was totally worth it:
-
-> <CurrentCard/>
-
-
diff --git a/src/types.d.ts b/src/types.d.ts
index abc4fd3..c0ac300 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -20,3 +20,21 @@ declare module "*/docs.codegen" {
 	const content: DocFile[];
 	export = content;
 }
+
+type Commit = {
+	hash: string,
+	tag: string,
+	author: string,
+	email: string,
+	message: string,
+}
+
+type TaggedCommits = {
+	tag: string,
+	commits: Commit[]
+}
+
+declare module "*/changelog.codegen" {
+	const content: TaggedCommits[];
+	export = content;
+}