diff --git a/frontend/src/components/changelog/ChangeLog.tsx b/frontend/src/components/changelog/ChangeLog.tsx
new file mode 100644
index 0000000..98be0c4
--- /dev/null
+++ b/frontend/src/components/changelog/ChangeLog.tsx
@@ -0,0 +1,33 @@
+// src/components/Changelog.jsx
+import { marked } from "marked";
+import changelog from "../../../../CHANGELOG.md?raw"; // assuming changelog.md is in root
+
+const Changelog = () => {
+    const html: any = marked.parse(changelog);
+    const recentChanges = html.split("<h2>")[1];
+    // const [htmlContent, setHtmlContent] = useState("");
+
+    // useEffect(() => {
+    //     fetch("/changelog.md")
+    //         .then((res) => res.text())
+    //         .then((md) => {
+    //             const versionBlocks = md.split(/^##\s+/gm); // Split on headings
+    //             if (versionBlocks.length > 1) {
+    //                 const latestBlock = `## ${versionBlocks[1]}`;
+    //                 const html: any = marked.parse(latestBlock, {
+    //                     breaks: true,
+    //                     gfm: true,
+    //                 });
+    //                 setHtmlContent(html);
+    //             }
+    //         });
+    // }, []);
+    return (
+        <div
+            className="prose m-3"
+            dangerouslySetInnerHTML={{ __html: `<h2>${recentChanges}` }}
+        />
+    );
+};
+
+export default Changelog;
diff --git a/frontend/src/routeTree.gen.ts b/frontend/src/routeTree.gen.ts
index db171c7..edba538 100644
--- a/frontend/src/routeTree.gen.ts
+++ b/frontend/src/routeTree.gen.ts
@@ -12,6 +12,7 @@
 
 import { Route as rootRoute } from './routes/__root'
 import { Route as LoginImport } from './routes/login'
+import { Route as ChangelogImport } from './routes/changelog'
 import { Route as AboutImport } from './routes/about'
 import { Route as EomImport } from './routes/_eom'
 import { Route as AuthImport } from './routes/_auth'
@@ -43,6 +44,12 @@ const LoginRoute = LoginImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const ChangelogRoute = ChangelogImport.update({
+  id: '/changelog',
+  path: '/changelog',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const AboutRoute = AboutImport.update({
   id: '/about',
   path: '/about',
@@ -217,6 +224,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AboutImport
       parentRoute: typeof rootRoute
     }
+    '/changelog': {
+      id: '/changelog'
+      path: '/changelog'
+      fullPath: '/changelog'
+      preLoaderRoute: typeof ChangelogImport
+      parentRoute: typeof rootRoute
+    }
     '/login': {
       id: '/login'
       path: '/login'
@@ -394,6 +408,7 @@ export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '': typeof EomRouteWithChildren
   '/about': typeof AboutRoute
+  '/changelog': typeof ChangelogRoute
   '/login': typeof LoginRoute
   '/modules': typeof AdminModulesRoute
   '/notificationMGT': typeof AdminNotificationMGTRoute
@@ -418,6 +433,7 @@ export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '': typeof EomRouteWithChildren
   '/about': typeof AboutRoute
+  '/changelog': typeof ChangelogRoute
   '/login': typeof LoginRoute
   '/modules': typeof AdminModulesRoute
   '/notificationMGT': typeof AdminNotificationMGTRoute
@@ -445,6 +461,7 @@ export interface FileRoutesById {
   '/_auth': typeof AuthRouteWithChildren
   '/_eom': typeof EomRouteWithChildren
   '/about': typeof AboutRoute
+  '/changelog': typeof ChangelogRoute
   '/login': typeof LoginRoute
   '/_admin/modules': typeof AdminModulesRoute
   '/_admin/notificationMGT': typeof AdminNotificationMGTRoute
@@ -471,6 +488,7 @@ export interface FileRouteTypes {
     | '/'
     | ''
     | '/about'
+    | '/changelog'
     | '/login'
     | '/modules'
     | '/notificationMGT'
@@ -494,6 +512,7 @@ export interface FileRouteTypes {
     | '/'
     | ''
     | '/about'
+    | '/changelog'
     | '/login'
     | '/modules'
     | '/notificationMGT'
@@ -519,6 +538,7 @@ export interface FileRouteTypes {
     | '/_auth'
     | '/_eom'
     | '/about'
+    | '/changelog'
     | '/login'
     | '/_admin/modules'
     | '/_admin/notificationMGT'
@@ -546,6 +566,7 @@ export interface RootRouteChildren {
   AuthRoute: typeof AuthRouteWithChildren
   EomRoute: typeof EomRouteWithChildren
   AboutRoute: typeof AboutRoute
+  ChangelogRoute: typeof ChangelogRoute
   LoginRoute: typeof LoginRoute
   OcpIndexRoute: typeof OcpIndexRoute
   logisticsSiloAdjustmentsHistRoute: typeof logisticsSiloAdjustmentsHistRoute
@@ -563,6 +584,7 @@ const rootRouteChildren: RootRouteChildren = {
   AuthRoute: AuthRouteWithChildren,
   EomRoute: EomRouteWithChildren,
   AboutRoute: AboutRoute,
+  ChangelogRoute: ChangelogRoute,
   LoginRoute: LoginRoute,
   OcpIndexRoute: OcpIndexRoute,
   logisticsSiloAdjustmentsHistRoute: logisticsSiloAdjustmentsHistRoute,
@@ -592,6 +614,7 @@ export const routeTree = rootRoute
         "/_auth",
         "/_eom",
         "/about",
+        "/changelog",
         "/login",
         "/ocp/",
         "/(logistics)/siloAdjustments/$hist",
@@ -633,6 +656,9 @@ export const routeTree = rootRoute
     "/about": {
       "filePath": "about.tsx"
     },
+    "/changelog": {
+      "filePath": "changelog.tsx"
+    },
     "/login": {
       "filePath": "login.tsx"
     },
diff --git a/frontend/src/routes/changelog.tsx b/frontend/src/routes/changelog.tsx
new file mode 100644
index 0000000..d5ad034
--- /dev/null
+++ b/frontend/src/routes/changelog.tsx
@@ -0,0 +1,14 @@
+import Changelog from "@/components/changelog/ChangeLog";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/changelog")({
+    component: RouteComponent,
+});
+
+function RouteComponent() {
+    return (
+        <div>
+            <Changelog />
+        </div>
+    );
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 8181aa6..42a9318 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,16 +1,22 @@
-import {defineConfig} from "vite";
+import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import tailwindcss from "@tailwindcss/vite";
-import {TanStackRouterVite} from "@tanstack/router-plugin/vite";
+import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
 import path from "path";
 
 import dotenv from "dotenv";
-import {fileURLToPath} from "url";
-dotenv.config({path: path.resolve(path.dirname(fileURLToPath(import.meta.url)), "../.env")});
+import { fileURLToPath } from "url";
+dotenv.config({
+    path: path.resolve(path.dirname(fileURLToPath(import.meta.url)), "../.env"),
+});
 
 // https://vite.dev/config/
 export default defineConfig({
-    plugins: [react(), tailwindcss(), TanStackRouterVite({target: "react", autoCodeSplitting: true})],
+    plugins: [
+        react(),
+        tailwindcss(),
+        TanStackRouterVite({ target: "react", autoCodeSplitting: true }),
+    ],
     resolve: {
         alias: {
             "@": path.resolve(__dirname, "./src"),