diff --git a/package.json b/package.json
index 6e82cf8..9b34584 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "smartims",
   "private": true,
-  "version": "0.2.7",
+  "version": "0.2.8",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/server/package.json b/server/package.json
index b69a6d5..64b0073 100644
--- a/server/package.json
+++ b/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "server",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "",
   "main": "index.js",
   "scripts": {
diff --git a/src/modules/cctv/pages/MonitoringPage.tsx b/src/modules/cctv/pages/MonitoringPage.tsx
index 2246285..385deab 100644
--- a/src/modules/cctv/pages/MonitoringPage.tsx
+++ b/src/modules/cctv/pages/MonitoringPage.tsx
@@ -236,7 +236,7 @@ export function MonitoringPage() {
                     <Video className="text-blue-600" />
                     CCTV <span className="text-xs text-slate-400 font-normal">({user?.role})</span>
                 </h1>
-                {user?.role === 'admin' && (
+                {(user?.role === 'admin' || user?.role === 'supervisor') && (
                     <button
                         onClick={() => {
                             setEditingCamera(null);
@@ -270,7 +270,7 @@ export function MonitoringPage() {
                 >
                     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
                         {cameras.map(camera => (
-                            <SortableCamera key={camera.id} camera={camera} disabled={user?.role !== 'admin'}>
+                            <SortableCamera key={camera.id} camera={camera} disabled={user?.role !== 'admin' && user?.role !== 'supervisor'}>
                                 <div className="relative aspect-video bg-black group">
                                     <JSMpegPlayer
                                         key={`${camera.id}-${streamVersions[camera.id] || 0}`}
@@ -278,7 +278,7 @@ export function MonitoringPage() {
                                         className="w-full h-full"
                                     />
                                     {/* Overlay Controls */}
-                                    {user?.role === 'admin' && (
+                                    {(user?.role === 'admin' || user?.role === 'supervisor') && (
                                         <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity flex gap-2" onPointerDown={(e) => e.stopPropagation()}>
                                             <button
                                                 onClick={() => handleToggleStatus(camera)}