diff --git a/frontend/app/src/components/molecules/nav-bar/nav-bar.tsx b/frontend/app/src/components/molecules/nav-bar/nav-bar.tsx
index 3e4e6bb44..47f5729a0 100644
--- a/frontend/app/src/components/molecules/nav-bar/nav-bar.tsx
+++ b/frontend/app/src/components/molecules/nav-bar/nav-bar.tsx
@@ -8,6 +8,7 @@ import {
   DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { Version, VersionTheme } from '@/components/ui/version';
 
 import { useNavigate } from 'react-router-dom';
 import api, { User } from '@/lib/api';
@@ -64,16 +65,20 @@ export default function MainNav({ user }: MainNavProps) {
   return (
     <div className="fixed top-0 w-screen h-16 border-b">
       <div className="flex h-16 items-center pr-4 pl-4">
-        <button
-          onClick={() => toggleSidebarOpen()}
-          className="flex flex-row gap-4 items-center"
-        >
-          <img
-            src={theme == 'dark' ? hatchet : hatchetDark}
-            alt="Hatchet"
-            className="h-9 rounded"
-          />
-        </button>
+        <div className="flex items-center gap-x-4">
+          <button
+            onClick={() => toggleSidebarOpen()}
+            className="flex flex-row gap-4 items-center"
+          >
+            <img
+              src={theme == 'dark' ? hatchet : hatchetDark}
+              alt="Hatchet"
+              className="h-9 rounded"
+            />
+          </button>
+          <Version theme={VersionTheme.Dark} />
+        </div>
+
         <div className="ml-auto flex items-center">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
diff --git a/frontend/app/src/components/ui/version.tsx b/frontend/app/src/components/ui/version.tsx
new file mode 100644
index 000000000..b4218f962
--- /dev/null
+++ b/frontend/app/src/components/ui/version.tsx
@@ -0,0 +1,20 @@
+export enum VersionTheme {
+  Dark = 'dark',
+  Light = 'light',
+}
+
+export interface IVersionProps {
+  theme: VersionTheme;
+}
+
+const Version = ({ theme }: IVersionProps) => {
+  return (
+    <div
+      className={`font-mono select-none leading-5 text-[0.625rem] font-bold px-[0.25rem] rounded-sm border-[0.0625rem] border-b-[0.1875rem] border-solid ${theme === VersionTheme.Dark ? 'bg-version-background-dark border-version-border-dark text-version-dark' : 'bg-version-background border-version-border text-version'} `}
+    >
+      {import.meta.env.VITE_VERSION ?? 'v1.0.0'}
+    </div>
+  );
+};
+
+export { Version };
diff --git a/frontend/app/tailwind.config.js b/frontend/app/tailwind.config.js
index dee62e25a..8ce7bdd88 100644
--- a/frontend/app/tailwind.config.js
+++ b/frontend/app/tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: ["class"],
+  darkMode: ['class'],
   content: [
     './pages/**/*.{ts,tsx}',
     './components/**/*.{ts,tsx}',
@@ -10,9 +10,9 @@ module.exports = {
   theme: {
     container: {
       center: true,
-      padding: "2rem",
+      padding: '2rem',
       screens: {
-        "2xl": "1400px",
+        '2xl': '1400px',
       },
     },
     fontFamily: {
@@ -35,7 +35,14 @@ module.exports = {
         '"Segoe UI Symbol"',
         '"Noto Color Emoji"',
       ],
-      serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
+      serif: [
+        'ui-serif',
+        'Georgia',
+        'Cambria',
+        '"Times New Roman"',
+        'Times',
+        'serif',
+      ],
       mono: [
         'ui-monospace',
         'SFMono-Regular',
@@ -49,91 +56,102 @@ module.exports = {
     },
     extend: {
       colors: {
-        "purple": {
-          "50": "hsl(252, 82%, 95%)",
-          "100": "hsl(252, 82%, 90%)",
-          "200": "hsl(252, 82%, 80%)",
-          "300": "hsl(252, 82%, 70%)",
-          "400": "hsl(252, 82%, 60%)",
-          "500": "hsl(252, 82%, 49%)",
-          "600": "hsl(252, 82%, 40%)",
-          "700": "hsl(252, 82%, 30%)",
-          "800": "hsl(252, 82%, 20%)",
-          "900": "hsl(252, 82%, 10%)"
+        purple: {
+          50: 'hsl(252, 82%, 95%)',
+          100: 'hsl(252, 82%, 90%)',
+          200: 'hsl(252, 82%, 80%)',
+          300: 'hsl(252, 82%, 70%)',
+          400: 'hsl(252, 82%, 60%)',
+          500: 'hsl(252, 82%, 49%)',
+          600: 'hsl(252, 82%, 40%)',
+          700: 'hsl(252, 82%, 30%)',
+          800: 'hsl(252, 82%, 20%)',
+          900: 'hsl(252, 82%, 10%)',
         },
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
         primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
         },
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
         },
         muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
         },
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
         },
         popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
         },
         card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        version: {
+          DEFAULT: 'rgb(73, 80,87)',
+          dark: '#c9c9c9',
+          background: {
+            DEFAULT: 'rgb(248, 249, 250)',
+            dark: '#2e2e2e',
+          },
+          border: {
+            DEFAULT: 'rgb(140, 141, 143)',
+            dark: '#424242',
+          },
         },
       },
       borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
       },
       keyframes: {
-        "accordion-down": {
+        'accordion-down': {
           from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 'var(--radix-accordion-content-height)' },
         },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
           to: { height: 0 },
         },
-        "flip": {
+        flip: {
           to: {
-            transform: "rotate(360deg)",
+            transform: 'rotate(360deg)',
           },
         },
-        "rotate": {
+        rotate: {
           to: {
-            transform: "rotate(90deg)",
+            transform: 'rotate(90deg)',
           },
         },
-        "jiggle": {
+        jiggle: {
           '0%, 100%': { transform: 'rotate(0deg)' },
           '25%': { transform: 'rotate(5deg)' },
           '75%': { transform: 'rotate(-5deg)' },
         },
       },
       animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-        "flip": "flip 6s infinite steps(2, end)",
-        "rotate": "rotate 3s linear infinite both",
-        "jiggle": 'jiggle 0.5s ease-in-out',
-
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        flip: 'flip 6s infinite steps(2, end)',
+        rotate: 'rotate 3s linear infinite both',
+        jiggle: 'jiggle 0.5s ease-in-out',
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
-}
+  plugins: [require('tailwindcss-animate')],
+};