diff --git a/package-lock.json b/package-lock.json
index db157e120..242ca6388 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,12 +10,15 @@
       "dependencies": {
         "@astrojs/check": "^0.7.0",
         "@astrojs/solid-js": "^4.4.0",
+        "@popperjs/core": "^2.11.8",
         "@rollup/plugin-yaml": "^4.1.2",
+        "@types/bootstrap": "^5.2.10",
         "@types/globalthis": "^1.0.4",
         "@types/node": "^20.14.8",
         "@types/slug": "^5.0.8",
         "@types/tabulator-tables": "^6.2.2",
         "astro": "^4.11.0",
+        "bootstrap": "^5.3.3",
         "isomorphic-dompurify": "^2.12.0",
         "jszip": "^3.10.1",
         "marked": "^13.0.0",
@@ -26,7 +29,8 @@
       },
       "devDependencies": {
         "json-schema-to-typescript": "^14.0.5",
-        "rimraf": "^5.0.7"
+        "rimraf": "^5.0.7",
+        "sass": "^1.77.6"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -926,6 +930,15 @@
         "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==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/plugin-yaml": {
       "version": "4.1.2",
       "license": "MIT",
@@ -1029,6 +1042,14 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/bootstrap": {
+      "version": "5.2.10",
+      "resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.2.10.tgz",
+      "integrity": "sha512-F2X+cd6551tep0MvVZ6nM8v7XgGN/twpdNDjqS1TUM7YFNEtQYWk+dKAnH+T1gr6QgCoGMPl487xw/9hXooa2g==",
+      "dependencies": {
+        "@popperjs/core": "^2.9.2"
+      }
+    },
     "node_modules/@types/cookie": {
       "version": "0.6.0",
       "license": "MIT"
@@ -1481,6 +1502,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/bootstrap": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
     "node_modules/boxen": {
       "version": "7.1.1",
       "license": "MIT",
@@ -2248,16 +2287,6 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
-    "node_modules/execa/node_modules/is-stream": {
-      "version": "3.0.0",
-      "license": "MIT",
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/ext": {
       "version": "1.7.0",
       "dev": true,
@@ -2767,6 +2796,12 @@
       "version": "3.0.6",
       "license": "MIT"
     },
+    "node_modules/immutable": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",
+      "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==",
+      "devOptional": true
+    },
     "node_modules/import-meta-resolve": {
       "version": "4.1.0",
       "license": "MIT",
@@ -2924,6 +2959,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/is-stream": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-unicode-supported": {
       "version": "2.0.0",
       "license": "MIT",
@@ -3106,30 +3151,6 @@
         "setimmediate": "^1.0.5"
       }
     },
-    "node_modules/jszip/node_modules/readable-stream": {
-      "version": "2.3.8",
-      "license": "MIT",
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/jszip/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "license": "MIT"
-    },
-    "node_modules/jszip/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "license": "MIT",
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "license": "MIT",
@@ -4727,6 +4748,19 @@
       ],
       "license": "MIT"
     },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "license": "MIT",
@@ -5338,10 +5372,31 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "license": "MIT"
+    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "license": "MIT"
     },
+    "node_modules/sass": {
+      "version": "1.77.6",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.6.tgz",
+      "integrity": "sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==",
+      "devOptional": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <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/saxes": {
       "version": "6.0.0",
       "license": "ISC",
@@ -5539,6 +5594,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/string-width": {
       "version": "7.1.0",
       "license": "MIT",
diff --git a/package.json b/package.json
index 508b9a069..e0cd7476c 100644
--- a/package.json
+++ b/package.json
@@ -14,12 +14,15 @@
   "dependencies": {
     "@astrojs/check": "^0.7.0",
     "@astrojs/solid-js": "^4.4.0",
+    "@popperjs/core": "^2.11.8",
     "@rollup/plugin-yaml": "^4.1.2",
+    "@types/bootstrap": "^5.2.10",
     "@types/globalthis": "^1.0.4",
     "@types/node": "^20.14.8",
     "@types/slug": "^5.0.8",
     "@types/tabulator-tables": "^6.2.2",
     "astro": "^4.11.0",
+    "bootstrap": "^5.3.3",
     "isomorphic-dompurify": "^2.12.0",
     "jszip": "^3.10.1",
     "marked": "^13.0.0",
@@ -30,6 +33,7 @@
   },
   "devDependencies": {
     "json-schema-to-typescript": "^14.0.5",
-    "rimraf": "^5.0.7"
+    "rimraf": "^5.0.7",
+    "sass": "^1.77.6"
   }
 }
diff --git a/src/components/board/boardImage.astro b/src/components/board/boardImage.astro
index 4a4a926a7..97b3f936e 100644
--- a/src/components/board/boardImage.astro
+++ b/src/components/board/boardImage.astro
@@ -1,5 +1,7 @@
 ---
+
 import type { MapDescriptorExtended } from '~/lib/getboards';
+import { daysAgo, humanReadableDate, isoDate } from '~/lib/utils';
 interface Props {
   board: MapDescriptorExtended;
   link: boolean;
@@ -7,10 +9,9 @@ interface Props {
 }
 const { board, link, imageHeight } = Astro.props;
 ---
-<style is:global define:vars={{imageHeight}}>
+<style is:global>
 .mapCard-image-board {
   width: 100%;
-  height: var(--imageHeight);
   object-fit: scale-down;
   position: absolute;
   filter: drop-shadow(0 0 6px #000b);
@@ -19,7 +20,6 @@ const { board, link, imageHeight } = Astro.props;
 }
 .mapCard-image-background {
   width: 100%;
-  height: var(--imageHeight);
   object-fit: cover;
   position: relative;
   filter: blur(1px) grayscale(50%) contrast(50%) opacity(65%);
@@ -27,7 +27,6 @@ const { board, link, imageHeight } = Astro.props;
 }
 .btn-state-tiny {
   position: absolute;
-  padding: 12px 0px;
   line-height: 0;
   border-width: 2px;
   width: 2rem;
@@ -39,6 +38,7 @@ const { board, link, imageHeight } = Astro.props;
 .btn-state-tiny.btn-primary {
   background-color: rgba(var(--bs-secondary-bg-rgb), 0.5);
   border-color: var(--bs-secondary-border-subtle);
+  padding: 0.75rem 0.375rem;
 }
 .btn-state-tiny.btn-primary
 :checked+.btn-state-tiny {
@@ -154,19 +154,32 @@ const { board, link, imageHeight } = Astro.props;
 { link ? (
   <a class="map-state" href={`/boards/${board.slug}`}>
   {board.frbFiles.map((_frbFile, index) => (
-    <img class={`card-img-top mapCard-image-board state-${index}`} src={board.imageUrls[index]} loading="lazy" />
+    <img class={`card-img-top mapCard-image-board state-${index}`} style={`height: ${imageHeight}`} src={board.imageUrls[index]} loading="lazy" />
   ))}
   </a>
 ) : (
   <span class="map-state">
   {board.frbFiles.map((_frbFile, index) => (
-    <img class={`card-img-top mapCard-image-board state-${index}`} src={board.imageUrls[index]} loading="lazy" />
+    <img class={`card-img-top mapCard-image-board state-${index}`} style={`height: ${imageHeight}`} src={board.imageUrls[index]} loading="lazy" />
   ))}
   </span>
 )}
-<img class="card-img-top mapCard-image-background" src={`/images/backgrounds/${board.background}.webp`} loading="lazy" />
+<img class="card-img-top mapCard-image-background" style={`height: ${imageHeight}`} src={`/images/backgrounds/${board.background}.webp`} loading="lazy" />
+{ daysAgo(new Date(board.uploadDate)) < 30 && (
+  <div class="top-right-absolute">
+    <div class="badge bg-danger" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title={`Uploaded: ${(isoDate(new Date(board.uploadDate)))}`}>New</div>
+  </div>
+)}
+<div class="bottom-left-absolute">
+  <div class="badge bg-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title={(isoDate(new Date(board.lastUpdated)))}>Updated: {humanReadableDate(new Date(board.lastUpdated))}</div>
+</div>
 <div class="bottom-right-absolute">
   {board.authors?.map((author) => (
     <div class="badge bg-primary">{author.url ? (<a class="text-reset" href={ author.url }>{ author.name }</a>) : author.name}</div>
   ))}
-</div>
\ No newline at end of file
+</div>
+<script>
+  import { Tooltip } from "bootstrap";
+  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+  const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new Tooltip(tooltipTriggerEl))
+</script>
\ No newline at end of file
diff --git a/src/components/navbar.astro b/src/components/navbar.astro
index bf31cc3fd..2da0b2cde 100644
--- a/src/components/navbar.astro
+++ b/src/components/navbar.astro
@@ -1,8 +1,10 @@
 ---
 import { getPathnameWithoutExtension } from "~/lib/utils";
-
 const currentPagePath = getPathnameWithoutExtension(Astro.url);
 ---
+<script>
+  import { Dropdown } from "bootstrap";
+</script>
 
 <nav class="navbar navbar-expand-lg bg-body-tertiary">
   <div class="container-fluid">
diff --git a/src/layouts/bootstrap.scss b/src/layouts/bootstrap.scss
new file mode 100644
index 000000000..d8dc8d22a
--- /dev/null
+++ b/src/layouts/bootstrap.scss
@@ -0,0 +1 @@
+@import "bootstrap/scss/bootstrap";
\ No newline at end of file
diff --git a/src/layouts/layout.astro b/src/layouts/layout.astro
index 2e8c1e51a..95fde4a85 100644
--- a/src/layouts/layout.astro
+++ b/src/layouts/layout.astro
@@ -4,6 +4,7 @@ interface Props {
 }
 const { title } = Astro.props;
 import './layout.css';
+import './bootstrap.scss'
 import Navbar from '~/components/navbar.astro';
 ---
 
@@ -14,12 +15,6 @@ import Navbar from '~/components/navbar.astro';
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="black" />
     <meta name="color-scheme" content="light dark" />
-    <link
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
-      crossorigin="anonymous"
-    />
     <meta name="generator" content={Astro.generator} />
     <link rel="icon" href="/favicon.ico" />
     <title>Fortune Street Modding - {title}</title>
@@ -29,6 +24,5 @@ import Navbar from '~/components/navbar.astro';
     <main role="main">
       <slot />
     </main>
-    <script is:inline src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
   </body>
 </html>
diff --git a/src/lib/getboards.ts b/src/lib/getboards.ts
index 2818c6655..d4c88fdd5 100644
--- a/src/lib/getboards.ts
+++ b/src/lib/getboards.ts
@@ -5,6 +5,8 @@ import { marked } from 'marked';
 import DOMPurify from 'isomorphic-dompurify';
 import ventureCards from "~/data/venturecards.yml";
 import backgrounds, { type Background } from "~/data/backgrounds.yml";
+import { execSync } from 'child_process';
+import { getRandomDate } from './utils';
 
 export type MapDescriptorExtended = Omit<MapDescriptor1, 'music' | 'changelog' | 'frbFile1' | 'frbFile2' | 'frbFile3' | 'frbFile4' | 'frbFiles'> & {
   nameEn: string;
@@ -15,6 +17,8 @@ export type MapDescriptorExtended = Omit<MapDescriptor1, 'music' | 'changelog' |
   imageUrls: string[];
   backgroundData: Background;
   frbFiles: string[];
+  uploadDate: number;
+  lastUpdated: number;
   notesHtml?: string;
   changelog?: {
     version: number | string;
@@ -135,11 +139,37 @@ function getBoards(): MapDescriptorExtended[] {
         }
         defaultVentureCards = defaultEasyVentureCards;
       }
-      // @ts-ignore
-      board.ventureCards = defaultVentureCards;
+      board.ventureCards = defaultVentureCards as any;
     }
 
-    boards.push(board as unknown as MapDescriptorExtended);
+    // find out the board upload date and last updated date
+    if(import.meta.env.DEV) {
+      // it takes way too long in dev mode to calculate, so we just set it to 0
+      board.lastUpdated = getRandomDate().getTime();
+      board.uploadDate = getRandomDate().getTime();
+    } else {
+      // get upload date
+      try {
+        const command = `git log --follow --format=%at -- ".${path}"`
+        const output = execSync(command, { encoding: 'utf-8' });
+        const dates = output.trim().split('\n');
+        board.uploadDate = +dates[dates.length - 1];
+      } catch (error) {
+        console.error('Error:', error);
+      }
+      // get last updated date
+      try {
+        const frbPaths = board.frbFiles!.map((frbFile: string) => `"./_maps/${board.slug}/${frbFile}.frb"`);
+        const command = `git log --max-count=1 --format=%at -- ".${path}" ${frbPaths.join(' ')}`
+        const output = execSync(command, { encoding: 'utf-8' });
+        const dates = output.trim().split('\n');
+        board.lastUpdated = +dates[0];
+      } catch (error) {
+        console.error('Error:', error);
+      }
+    }
+
+    boards.push(board as any);
   }
   return boards;
 };
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index aeead653c..885f04e25 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,6 +1,99 @@
 import path from "path";
+import { exec } from 'child_process';
 
 export function getPathnameWithoutExtension(url: URL) {
   const parsedPath = path.parse(url.pathname);
   return path.join(parsedPath.dir, parsedPath.name);
+}
+
+
+export async function run(command: string): Promise<string> {
+  return new Promise((resolve, reject) => {
+    exec(command, (error, stdout, stderr) => {
+      if (error) {
+        reject(`Error: ${error.message}`);
+      } else if (stderr) {
+        reject(`Stderr: ${stderr}`);
+      } else {
+        resolve(stdout);
+      }
+    });
+  });
+}
+
+
+export function getRandomDate() {
+  // Get today's date
+  const today = new Date();
+
+  // Calculate 1 year ago from today
+  const oneYearAgo = new Date();
+  oneYearAgo.setFullYear(today.getFullYear() - 1);
+
+  // Get a random number of milliseconds between oneYearAgo and today
+  const randomMilliseconds = Math.floor(Math.random() * (today.getTime() - oneYearAgo.getTime())) + oneYearAgo.getTime();
+
+  // Create a new Date object using the random milliseconds
+  const randomDate = new Date(randomMilliseconds);
+
+  return randomDate;
+}
+
+export function daysAgo(targetDate: Date): number {
+  // Get today's date
+  const today = new Date();
+
+  // Calculate the difference in milliseconds
+  const differenceMs = today.getTime() - targetDate.getTime();
+
+  // Convert milliseconds to days
+  const differenceDays = Math.floor(differenceMs / (1000 * 60 * 60 * 24));
+
+  return differenceDays;
+}
+
+export function weeksAgo(targetDate: Date): number {
+  // Get today's date
+  const today = new Date();
+
+  // Calculate the difference in milliseconds
+  const differenceMs = today.getTime() - targetDate.getTime();
+
+  // Convert milliseconds to weeks
+  const differenceDays = Math.floor(differenceMs / (1000 * 60 * 60 * 24 * 7));
+
+  return differenceDays;
+}
+
+export function monthsAgo(targetDate: Date): number {
+  // Get today's date
+  const today = new Date();
+
+  // Calculate the difference in milliseconds
+  const differenceMs = today.getTime() - targetDate.getTime();
+
+  // Convert milliseconds to months
+  const differenceDays = Math.floor(differenceMs / (1000 * 60 * 60 * 24 * 30));
+
+  return differenceDays;
+}
+
+export function humanReadableDate(targetDate: Date): string {
+  if (daysAgo(targetDate)<1) {
+    return `today`;
+  } if (daysAgo(targetDate)<2) {
+    return `yesterday`;
+  } else if (daysAgo(targetDate)<30) {
+    return `${daysAgo(targetDate)} days ago`;
+  } else if (weeksAgo(targetDate)<10) {
+    return `${weeksAgo(targetDate)} weeks ago`;
+  } else if (monthsAgo(targetDate)<10) {
+    return `${monthsAgo(targetDate)} months ago`;
+  } else {
+    return targetDate.toISOString().split('T')[0];
+  }
+}
+
+export function isoDate(date: Date): string {
+  return date.toISOString().split('T')[0];
 }
\ No newline at end of file
diff --git a/src/pages/boards.astro b/src/pages/boards.astro
index ecc91d050..2a923e6d5 100644
--- a/src/pages/boards.astro
+++ b/src/pages/boards.astro
@@ -11,7 +11,7 @@ import BoardTags from '~/components/board/boardTags.astro';
   <div class="album">
     <div class="container">
       <div class="row">
-        {boards.map((board, boardIndex) => (
+        {boards.sort((a, b) => b.lastUpdated - a.lastUpdated).map((board, boardIndex) => (
           <>
           <div class={`col mb-4 mapCard b-${board.slug}`}>
             <div class="card h-100">
diff --git a/src/pages/table.astro b/src/pages/table.astro
index 7aeb78341..aff1a1146 100644
--- a/src/pages/table.astro
+++ b/src/pages/table.astro
@@ -3,10 +3,24 @@ import BoardsLayout from '~/layouts/boardsLayout.astro';
 import "./table.css";
 ---
 <script>
-  import {Tabulator, FormatModule, SortModule, FilterModule, EditModule} from 'tabulator-tables';
+  import {Tabulator, FormatModule, SortModule, FilterModule, EditModule, type CellComponent, type FormatterParams} from 'tabulator-tables';
 
   Tabulator.registerModule([FormatModule, SortModule, FilterModule, EditModule]);
   const data = await fetch('./boards.json').then((response) => response.json());
+
+  const dateFormatter = (cell: CellComponent, _formatterParams: FormatterParams) => {
+    return new Date(cell.getValue()).toISOString().split('T')[0];
+  }
+
+  const dateSorter = (a: Date, b: Date) => {
+    if (a < b) {
+      return 1;
+    } else if (a > b) {
+      return -1;
+    } else {
+      return 0;
+    }
+  }
   
   new Tabulator("#table", {
     columns: [
@@ -22,6 +36,8 @@ import "./table.css";
       { title: "States", field: "frbFiles.length", headerFilter: true },
       { title: "Tags", field: "tags", headerFilter: true },
       { title: "Version", field: "currentVersion", headerFilter: true },
+      { title: "Last Updated", field: "lastUpdated", headerFilter: true, sorter: dateSorter, formatter: dateFormatter},
+      { title: "Upload Date", field: "uploadDate", headerFilter: true, sorter: dateSorter, formatter: dateFormatter },
       { title: "Authors", field: "authors", headerFilter: true, formatter: function(cell, _formatterParams){
         const authors = cell.getValue();
         let html = "";