diff --git a/src/App.jsx b/src/App.jsx
index b0fbd5f..1cbda33 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -36,6 +36,7 @@ import IndexNotification from './pages/notification/IndexNotification';
 import IndexRole from './pages/role/IndexRole';
 import IndexUser from './pages/user/IndexUser';
 import IndexContact from './pages/contact/IndexContact';
+import IndexWebControl from './pages/webControl/IndexWebControl';
 import DetailNotificationTab from './pages/notificationDetail/IndexNotificationDetail';
 import IndexVerificationSparepart from './pages/verificationSparepart/IndexVerificationSparepart';
 
@@ -144,6 +145,10 @@ const App = () => {
                     <Route index element={<IndexUser />} />
                 </Route>
 
+                <Route path="/web-control" element={<ProtectedRoute />}>
+                    <Route index element={<IndexWebControl />} />
+                </Route>
+
                 <Route path="/contact" element={<ProtectedRoute />}>
                     <Route index element={<IndexContact />} />
                 </Route>
diff --git a/src/layout/LayoutMenu.jsx b/src/layout/LayoutMenu.jsx
index 607bc2f..bfbc70d 100644
--- a/src/layout/LayoutMenu.jsx
+++ b/src/layout/LayoutMenu.jsx
@@ -7,6 +7,7 @@ import {
     DatabaseOutlined,
     SettingOutlined,
     UserOutlined,
+    GlobalOutlined,
     AntDesignOutlined,
     ShoppingCartOutlined,
     ShoppingOutlined,
@@ -225,6 +226,15 @@ const allItems = [
             </Link>
         ),
     },
+    {
+        key: 'web-control',
+        icon: <GlobalOutlined style={{ fontSize: '19px' }} />,
+        label: (
+            <Link to="/web-control" className="fontMenus">
+                Web Control
+            </Link>
+        ),
+    },
     // {
     //     key: 'jadwal-shift',
     //     icon: <CalendarOutlined style={{ fontSize: '19px' }} />,
@@ -250,6 +260,7 @@ const LayoutMenu = () => {
         if (pathname === '/dashboard/home') return 'home';
         if (pathname === '/user') return 'user';
         if (pathname === '/role') return 'role';
+        if (pathname === '/web-control') return 'web-control';
         if (pathname === '/notification') return 'notification';
         if (pathname === '/jadwal-shift') return 'jadwal-shift';
         if (pathname === '/contact') return 'contact';
diff --git a/src/pages/webControl/IndexWebControl.jsx b/src/pages/webControl/IndexWebControl.jsx
new file mode 100644
index 0000000..93a72fb
--- /dev/null
+++ b/src/pages/webControl/IndexWebControl.jsx
@@ -0,0 +1,90 @@
+import React, { useState, useEffect, memo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button, Typography } from 'antd';
+import { useBreadcrumb } from '../../layout/LayoutBreadcrumb';
+
+const { Text } = Typography;
+
+const IndexWebControl = memo(function IndexWebControl() {
+    const navigate = useNavigate();
+    const { setBreadcrumbItems } = useBreadcrumb();
+
+    const [isPlaying, setIsPlaying] = useState(false);
+
+    const url = "https://117.102.231.130:9529";
+
+    const handlePlay = () => {
+        setIsPlaying(true);
+    };
+
+    const handleReset = () => {
+        setIsPlaying(false);
+    };
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+
+        if (token) {
+            setBreadcrumbItems([
+                {
+                    title: (
+                        <Text strong style={{ fontSize: '14px' }}>
+                            • Web Control Panel
+                        </Text>
+                    ),
+                },
+            ]);
+        } else {
+            navigate('/signin');
+        }
+    }, []);
+
+    return (
+        <div style={{ padding: '20px' }}>
+
+            <div style={{ marginBottom: 20 }}>
+                <Button type="primary" onClick={handlePlay} style={{ marginRight: 10 }}>
+                    ▶ Play
+                </Button>
+
+                <Button danger onClick={handleReset}>
+                    🔄 Reset
+                </Button>
+            </div>
+
+            <div
+                style={{
+                    border: '1px solid #ddd',
+                    height: '500px',
+                    background: '#fafafa',
+                }}
+            >
+                {isPlaying ? (
+                    <iframe
+                        src={url}
+                        title="Web Preview"
+                        style={{
+                            width: '100%',
+                            height: '100%',
+                            border: 'none',
+                        }}
+                    />
+                ) : (
+                    <div
+                        style={{
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            height: '100%',
+                            color: '#888',
+                        }}
+                    >
+                        Klik Play untuk menjalankan web
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+});
+
+export default IndexWebControl;
\ No newline at end of file