diff --git a/venue-reservation/package-lock.json b/venue-reservation/package-lock.json
index 0396ae58..51a5c94f 100644
--- a/venue-reservation/package-lock.json
+++ b/venue-reservation/package-lock.json
@@ -8,19 +8,23 @@
       "name": "venue-reservation",
       "version": "0.1.0",
       "dependencies": {
+        "chart.js": "^4.4.6",
         "next": "14.2.15",
         "react": "^18",
+        "react-big-calendar": "^1.15.0",
+        "react-chartjs-2": "^5.2.0",
         "react-dom": "^18"
       },
       "devDependencies": {
-        "@types/node": "^20",
+        "@types/node": "20.17.2",
         "@types/react": "^18",
+        "@types/react-big-calendar": "^1.8.12",
         "@types/react-dom": "^18",
         "eslint": "^8",
         "eslint-config-next": "14.2.15",
         "postcss": "^8",
         "tailwindcss": "^3.4.1",
-        "typescript": "^5"
+        "typescript": "5.6.3"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -36,6 +40,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
+      "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -234,6 +250,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==",
+      "license": "MIT"
+    },
     "node_modules/@next/env": {
       "version": "14.2.15",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.15.tgz",
@@ -453,6 +475,28 @@
         "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==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.16",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
+      "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -483,6 +527,13 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/date-arithmetic": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@types/date-arithmetic/-/date-arithmetic-4.1.4.tgz",
+      "integrity": "sha512-p9eZ2X9B80iKiTW4ukVj8B4K6q9/+xFtQ5MGYA5HWToY9nL4EkhV9+6ftT2VHpVMEZb5Tv00Iel516bVdO+yRw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -491,9 +542,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "20.16.11",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.11.tgz",
-      "integrity": "sha512-y+cTCACu92FyA5fgQSAI8A1H429g7aSK2HsO7K4XYUWc4dY5IUz55JSDIYT6/VsOLfGy8vmvQYC2hfb0iF16Uw==",
+      "version": "20.17.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.2.tgz",
+      "integrity": "sha512-OOHK4sjXqkL7yQ7VEEHcf6+0jSvKjWqwnaCtY7AKD/VLEvRHMsxxu7eI8ErnjxHS8VwmekD4PeVCpu4qZEZSxg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -504,20 +555,30 @@
       "version": "15.7.13",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
       "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "18.3.11",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.11.tgz",
       "integrity": "sha512-r6QZ069rFTjrEYgFdOck1gK7FLVsgJE7tTz0pQBczlBNUhBNk0MQH4UbnFSwjpQLMkLzgqvBBa+qGpLje16eTQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-big-calendar": {
+      "version": "1.8.12",
+      "resolved": "https://registry.npmjs.org/@types/react-big-calendar/-/react-big-calendar-1.8.12.tgz",
+      "integrity": "sha512-dN9kPm2cLgPKDVc8q7RdXMehZxQea+LlcWPB8sU3ES7S3WF/ff8e87NfhJREfzHWEeEJBx2TqRKQRkdHA9vNFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/date-arithmetic": "*",
+        "@types/prop-types": "*",
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
@@ -528,6 +589,12 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/warning": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz",
+      "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.9.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.9.0.tgz",
@@ -1195,6 +1262,18 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.6.tgz",
+      "integrity": "sha512-8Y406zevUPbbIBA/HRk33khEmQPk5+cxeflWE/2rx1NJsjVWMPw/9mSP9rxHP5eqi6LNoPBVMfZHxbwLSgldYA==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -1239,6 +1318,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1308,7 +1396,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
@@ -1372,6 +1459,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-arithmetic": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-arithmetic/-/date-arithmetic-4.1.0.tgz",
+      "integrity": "sha512-QWxYLR5P/6GStZcdem+V1xoto6DMadYWpMXU82ES3/RfR3Wdwr3D0+be7mgOJ+Ov0G9D5Dmb9T17sNLQYj9XOg==",
+      "license": "MIT"
+    },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
@@ -1466,6 +1565,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -1493,6 +1601,16 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -2498,6 +2616,11 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/globalize": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/globalize/-/globalize-0.1.1.tgz",
+      "integrity": "sha512-5e01v8eLGfuQSOvx2MsDMOWS0GFtCx1wPzQSmcHw4hkxFzrQDBO3Xwg/m8Hr/7qXMrHeOIE29qWVzyv06u1TZA=="
+    },
     "node_modules/globals": {
       "version": "13.24.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
@@ -2716,6 +2839,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/is-arguments": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
@@ -3347,6 +3479,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3373,6 +3517,21 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/luxon": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.5.0.tgz",
+      "integrity": "sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
+      "license": "MIT"
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3430,6 +3589,27 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/moment-timezone": {
+      "version": "0.5.46",
+      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.46.tgz",
+      "integrity": "sha512-ZXm9b36esbe7OmdABqIWJuBBiLLwAjrN7CE+7sYdCCx82Nabt1wHDj8TVseS59QIlfFPbOoiBPm6ca9BioG4hw==",
+      "license": "MIT",
+      "dependencies": {
+        "moment": "^2.29.4"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -3566,7 +3746,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -4061,7 +4240,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -4112,6 +4290,44 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-big-calendar": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/react-big-calendar/-/react-big-calendar-1.15.0.tgz",
+      "integrity": "sha512-RNiPH1Vh/fpJpNIValpl6lHvuEroWkDvS8z3YW2QpmGUuAk6a0Q1uEujlQTd/gQrpKAaBA4Gyc1mzCdNIQ7DZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.7",
+        "clsx": "^1.2.1",
+        "date-arithmetic": "^4.1.0",
+        "dayjs": "^1.11.7",
+        "dom-helpers": "^5.2.1",
+        "globalize": "^0.1.1",
+        "invariant": "^2.2.4",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "luxon": "^3.2.1",
+        "memoize-one": "^6.0.0",
+        "moment": "^2.29.4",
+        "moment-timezone": "^0.5.40",
+        "prop-types": "^15.8.1",
+        "react-overlays": "^5.2.1",
+        "uncontrollable": "^7.2.1"
+      },
+      "peerDependencies": {
+        "react": "^16.14.0 || ^17 || ^18",
+        "react-dom": "^16.14.0 || ^17 || ^18"
+      }
+    },
+    "node_modules/react-chartjs-2": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz",
+      "integrity": "sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -4129,9 +4345,34 @@
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
+      "license": "MIT"
+    },
+    "node_modules/react-overlays": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-5.2.1.tgz",
+      "integrity": "sha512-GLLSOLWr21CqtJn8geSwQfoJufdt3mfdsnIiQswouuQ2MMPns+ihZklxvsTDKD3cR2tF8ELbi5xUsvqVhR6WvA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.8",
+        "@popperjs/core": "^2.11.6",
+        "@restart/hooks": "^0.4.7",
+        "@types/warning": "^3.0.0",
+        "dom-helpers": "^5.2.0",
+        "prop-types": "^15.7.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0",
+        "react-dom": ">=16.3.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -4177,6 +4418,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "license": "MIT"
+    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.3.tgz",
@@ -5046,6 +5293,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
     "node_modules/undici-types": {
       "version": "6.19.8",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
@@ -5070,6 +5332,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/venue-reservation/package.json b/venue-reservation/package.json
index 2f464f8c..b65cabc4 100644
--- a/venue-reservation/package.json
+++ b/venue-reservation/package.json
@@ -9,18 +9,22 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "chart.js": "^4.4.6",
+    "next": "14.2.15",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.15"
+    "react-big-calendar": "^1.15.0",
+    "react-chartjs-2": "^5.2.0",
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
-    "@types/node": "^20",
+    "@types/node": "20.17.2",
     "@types/react": "^18",
+    "@types/react-big-calendar": "^1.8.12",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.15",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.15"
+    "typescript": "5.6.3"
   }
 }
diff --git a/venue-reservation/src/app/admin/page.tsx b/venue-reservation/src/app/admin/page.tsx
new file mode 100644
index 00000000..3237103c
--- /dev/null
+++ b/venue-reservation/src/app/admin/page.tsx
@@ -0,0 +1,81 @@
+"use client"
+import { useState } from "react";
+import Chart from "@/components/chart"
+
+function AdminDashboard() {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+  const toggleSidebar = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
+
+  const labels = ['V1', 'V2', 'V3', 'V4', 'V5', 'V6'];
+  const data = [65, 59, 80, 81, 56, 55];
+
+  return (
+    <div className="flex min-h-screen bg-gray-100">
+      {/* Sidebar */}
+      <div
+        className={`fixed inset-y-0 left-0 transform ${
+          isSidebarOpen ? "translate-x-0" : "-translate-x-full"
+        } lg:translate-x-0 lg:static lg:inset-0 bg-gray-100 w-64 transition-transform duration-300 ease-in-out`}
+      >
+        <div className="flex items-center justify-between p-4 bg-gray-800">
+          <h2 className="text-white text-lg font-bold">Admin Dashboard</h2>
+          <button
+            onClick={toggleSidebar}
+            className="text-white lg:hidden focus:outline-none"
+          >
+            ✕
+          </button>
+        </div>
+        <nav className="mt-5">
+          <ul>
+            <li className=" text-blackpy-2 px-4 hover:bg-gray-700">
+              Dashboard
+            </li>
+            <li className="text-black py-2 px-4 hover:bg-gray-700">
+                Reservation Request
+            </li>
+            <li className="text-black py-2 px-4 hover:bg-gray-700">
+                Calender
+            </li>
+            <li className="text-black py-2 px-4 hover:bg-gray-700">
+              Venue Details
+            </li>
+            <li className="text-black py-2 px-4 hover:bg-gray-700">
+              Calendar
+            </li>
+            <li className="text-black py-2 px-4 hover:bg-gray-700">
+              Payments
+            </li>
+          </ul>
+        </nav>
+      </div>
+
+      {/* Main Content */}
+      <div className="flex flex-col flex-1 lg:ml-64">
+        <header className="flex items-center justify-between p-4 bg-white shadow-md">
+          <button
+            onClick={toggleSidebar}
+            className="lg:hidden text-blue-900 focus:outline-none"
+          >
+            ☰
+          </button>
+          <h1 className="text-xl font-semibold">Welcome to the Dashboard</h1>
+          <div className="text-blue-900">Admin</div>
+        </header>
+
+        <main className="p-6">
+          <h2 className="text-2xl font-semibold mb-4">Dashboard Overview</h2>
+          <div className="bg-gray-100 border w-800">
+                <Chart labels={labels} data={data} />
+        </div>
+        </main>
+        
+      </div>
+    </div>
+  );
+}
+
+export default AdminDashboard;
diff --git a/venue-reservation/src/app/reservations/page.tsx b/venue-reservation/src/app/reservations/page.tsx
index 9fc25854..1973ba8b 100644
--- a/venue-reservation/src/app/reservations/page.tsx
+++ b/venue-reservation/src/app/reservations/page.tsx
@@ -1,5 +1,112 @@
-export default function Reservations() {
-    return (
-        <div>Reservations page</div>
-    );
-}
\ No newline at end of file
+'use client';
+import { useState } from 'react';
+import Calendar from '@/components/calendar';
+
+const ReservationPage = () => {
+  const [showModal, setShowModal] = useState(false);
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
+  const [availability, setAvailability] = useState({
+    morning: false,
+    evening: false,
+    lateEvening: false,
+    earlyMorning: false,
+  });
+
+  const handleSelectDate = (date: Date) => {
+    setSelectedDate(date);
+    setAvailability({
+      morning: false,
+      evening: false,
+      lateEvening: false,
+      earlyMorning: false,
+    });
+    setShowModal(true);
+  };
+
+  const handleCheckboxChange = (timeSlot: keyof typeof availability) => {
+    setAvailability((prev) => ({ ...prev, [timeSlot]: !prev[timeSlot] }));
+  };
+
+  const closeModal = () => {
+    setShowModal(false);
+    setSelectedDate(null);
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-100 flex flex-col justify-between">
+      {/* Main Content */}
+      <main className="flex-grow p-8">
+        <Calendar onSelectDate={handleSelectDate} />
+      </main>
+
+      {showModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+          <div className="bg-white p-6 rounded-lg shadow-lg w-full max-w-md">
+            <h2 className="text-xl font-semibold mb-4">Select Availability</h2>
+            <p className="text-gray-700 mb-6">Select availability for {selectedDate?.toLocaleDateString()}</p>
+
+ <div className="mb-4">  <label className="flex items-center mb-2">
+                <input
+                  type="checkbox"
+                  checked={availability.morning}
+                  onChange={() => handleCheckboxChange('morning')}
+                  className="form-checkbox text-blue-500 mr-2"
+                />
+                Morning (8AM - 12PM)
+              </label>
+
+              <label className="flex items-center mb-2">
+                <input
+                  type="checkbox"
+                  checked={availability.evening}
+                  onChange={() => handleCheckboxChange('evening')}
+                  className="form-checkbox text-blue-500 mr-2"
+                />
+                Evening (12PM - 8PM)
+              </label>
+
+              <label className="flex items-center mb-2">
+                <input
+                  type="checkbox"
+                  checked={availability.lateEvening}
+                  onChange={() => handleCheckboxChange('lateEvening')}
+                  className="form-checkbox text-blue-500 mr-2"
+                />
+                Late Evening (8PM - 12AM)
+              </label>
+
+              <label className="flex items-center mb-2">
+                <input
+                  type="checkbox"
+                  checked={availability.earlyMorning}
+                  onChange={() => handleCheckboxChange('earlyMorning')}
+                  className="form-checkbox text-blue-500 mr-2"
+                />
+                Early Morning (12AM - 8AM)
+              </label>
+            </div>
+
+            <div className="flex justify-end">
+              <button
+                type="button"
+                className="mr-2 bg-gray-300 text-gray-700 px-4 py-2 rounded-lg"
+                onClick={closeModal}
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600"
+                onClick={closeModal}
+              >
+                Choose Availability
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ReservationPage;
diff --git a/venue-reservation/src/components/calendar.tsx b/venue-reservation/src/components/calendar.tsx
new file mode 100644
index 00000000..3cfaf423
--- /dev/null
+++ b/venue-reservation/src/components/calendar.tsx
@@ -0,0 +1,146 @@
+import React, { useState } from 'react';
+import { Calendar, momentLocalizer } from 'react-big-calendar';
+import moment from 'moment';
+import 'react-big-calendar/lib/css/react-big-calendar.css';
+
+const localizer = momentLocalizer(moment);
+
+// Define a type for the event
+interface CalendarEvent {
+  start: Date;
+  end: Date;
+  allDay?: boolean;
+  color?: string;
+}
+
+const CalendarComponent = ({ onSelectDate }: { onSelectDate: (date: Date) => void }) => {
+  const [currentDate, setCurrentDate] = useState(new Date());
+
+  const events: CalendarEvent[] = [
+    {
+      start: new Date(2024, 9, 14),
+      end: new Date(2024, 9, 14, 23, 59, 59),
+      allDay: true,
+      color: 'orange',
+    },
+    {
+      start: new Date(2024, 9, 25),
+      end: new Date(2024, 9, 25, 23, 59, 59),
+      allDay: true,
+      color: 'green',
+    },
+    {
+      start: new Date(2024, 9, 6),
+      end: new Date(2024, 9, 6, 23, 59, 59),
+      allDay: true,
+      color: 'blue',
+    },
+    {
+      start: new Date(2024, 9, 16),
+      end: new Date(2024, 9, 16, 23, 59, 59),
+      allDay: true,
+      color: 'red',
+    },
+    {
+      start: new Date(2024, 9, 17),
+      end: new Date(2024, 9, 17, 23, 59, 59),
+      allDay: true,
+      color: 'red',
+    },
+  ];
+
+  const eventStyleGetter = (event: CalendarEvent) => {
+    const backgroundColor = event.color || 'blue';
+    const style = {
+      backgroundColor,
+      borderRadius: '15px',
+      opacity: 0.3,
+      color: 'white',
+      border: '0px',
+      display: 'block',
+      height: '110px',
+      marginTop: "-22px",
+      width: "115px",
+      marginLeft: "1px",
+    };
+    return { style };
+  };
+
+  const handleSelectEvent = (event: CalendarEvent) => {
+    onSelectDate(event.start); 
+  };
+
+  const currentYear = moment().year();
+
+  const handleYearChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newYear = Number(e.target.value);
+    setCurrentDate(moment(currentDate).year(newYear).toDate());
+  };
+
+  const handleMonthChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newMonth = Number(e.target.value);
+    setCurrentDate(moment(currentDate).month(newMonth).toDate());
+  };
+
+  const goToPreviousMonth = () => {
+    setCurrentDate(moment(currentDate).subtract(1, 'months').toDate());
+  };
+
+  const goToNextMonth = () => {
+    setCurrentDate(moment(currentDate).add(1, 'months').toDate());
+  };
+
+  return (
+    <div className="h-500 bg-white p-8 rounded-xl">
+      <div className="flex justify-between items-center mb-4">
+        <button onClick={goToPreviousMonth} className="text-blue-500 font-semibold">
+          &lt; Previous
+        </button>
+        <div className="flex items-center">
+          <select
+            className="mr-2 w-28 h-8 font-bold shadow-lg text-center"
+            onChange={handleMonthChange}
+            value={moment(currentDate).month()}
+          >
+            {moment.months().map((month, index) => (
+              <option key={index} value={index}>
+                {month}
+              </option>
+            ))}
+          </select>
+          <select
+            className="mr-2 w-28 h-8 font-bold shadow-lg text-center"
+            onChange={handleYearChange}
+            value={moment(currentDate).year()}
+          >
+            {Array.from({ length: 10 }, (_, index) => currentYear + index).map((year) => (
+              <option key={year} value={year}>
+                {year}
+              </option>
+            ))}
+          </select>
+        </div>
+        <button onClick={goToNextMonth} className="text-blue-500 font-semibold">
+          Next &gt;
+        </button>
+      </div>
+
+      <Calendar
+        localizer={localizer}
+        events={events}
+        startAccessor="start"
+        endAccessor="end"
+        selectable
+        onSelectEvent={handleSelectEvent}
+        date={currentDate}
+        toolbar={false}
+        views={['month']}
+        style={{ height: 600 }}
+        className="text-gray-900"
+        eventPropGetter={eventStyleGetter}
+      />
+    </div>
+  );
+};
+
+export default CalendarComponent;
diff --git a/venue-reservation/src/components/chart.tsx b/venue-reservation/src/components/chart.tsx
new file mode 100644
index 00000000..79dae06d
--- /dev/null
+++ b/venue-reservation/src/components/chart.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+} from 'chart.js';
+import { Bar } from 'react-chartjs-2';
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
+
+type UtilizationChartProps = {
+  labels: string[];
+  data: number[];
+};
+
+const UtilizationChart: React.FC<UtilizationChartProps> = ({ labels, data }) => {
+  const chartData = {
+    labels,
+    datasets: [
+      {
+        label: 'Utilization (%)',
+        data,
+        backgroundColor: '#DFC788',
+        borderColor: '#DFC788',
+        borderWidth: 1,
+        borderRadius:10
+      },
+    ],
+  };
+
+  const options = {
+    responsive: true,
+    plugins: {
+      legend: {
+        display: true,
+        position: 'top' as const,
+      },
+      title: {
+        display: true,
+        text: 'Utilization Chart',
+      },
+    },
+    scales: {
+      y: {
+        beginAtZero: true,
+        max: 100,
+        title: {
+          display: true,
+          text: 'Utilization (%)',
+        },
+      },
+      x: {
+        title: {
+          display: true,
+          text: 'Venue',
+        },
+      },
+    },
+  };
+
+  return <Bar data={chartData} options={options} />;
+};
+
+export default UtilizationChart;
+ 
\ No newline at end of file
diff --git a/venue-reservation/src/components/venue_card/user_venue_card.tsx b/venue-reservation/src/components/venue_card/user_venue_card.tsx
index d5b5de60..7822ae12 100644
--- a/venue-reservation/src/components/venue_card/user_venue_card.tsx
+++ b/venue-reservation/src/components/venue_card/user_venue_card.tsx
@@ -1,4 +1,6 @@
+"use client"
 import Carousel from '../carousel';
+import { useRouter } from 'next/navigation'; 
 
 const VenueCard = () => {
   const images = [
@@ -7,6 +9,14 @@ const VenueCard = () => {
     '/images/image3.jpg'
   ];
 
+  const router = useRouter();
+
+  const handleCardClick = () => {
+    // Navigate to the reservation page
+    router.push('/reservations');
+  };
+
+
   return (
     <div className="container mx-auto mt-6 p-4 border border-gray-300 rounded-xl shadow-lg flex flex-col md:flex-row">
       {/* Image Section */}
@@ -24,7 +34,7 @@ const VenueCard = () => {
 
 
       {/* Details Section */}
-      <div className="w-full md:w-3/5 p-4 flex flex-col justify-between">
+      <div className="w-full md:w-3/5 p-4 flex flex-col justify-between" onClick={handleCardClick}>
         <div>
           <h1 className="text-3xl md:text-4xl font-bold font-blue-500">Trace Auditorium</h1>
           <p>Bay 6, Trace Expert City, Maradana, Colombo, Western Province</p>