diff --git a/src/app/_layout/settings/menu-settings.config.ts b/src/app/_layout/settings/menu-settings.config.ts
index b0d2613..0f1c490 100644
--- a/src/app/_layout/settings/menu-settings.config.ts
+++ b/src/app/_layout/settings/menu-settings.config.ts
@@ -963,10 +963,27 @@ export const MenuSettingsConfig: MenuConfig = {
           ]
         }
       },
+      // {
+      //   title: 'Device',
+      //   icon: 'feather ft-life-buoy',
+      //   page: '/device'
+      // },
       {
         title: 'Device',
         icon: 'feather ft-life-buoy',
-        page: '/device'
+        page: 'null',
+        submenu: {
+          items: [
+           {
+              title: 'List Device',
+              page: '/device'
+            },
+            {
+              title: 'Control Device',
+              page: '/device/control-device'
+            }        
+          ]
+        }
       },
       {
         title: 'Cost Management',
diff --git a/src/app/content/hemat-app/device/device-control/device-control.component.html b/src/app/content/hemat-app/device/device-control/device-control.component.html
index 97ead01..0bdeda6 100644
--- a/src/app/content/hemat-app/device/device-control/device-control.component.html
+++ b/src/app/content/hemat-app/device/device-control/device-control.component.html
@@ -1 +1,38 @@
-<p>device-control works!</p>
+<div class="app-content content bg-maintenance-image">
+    <div class="content-wrapper">
+      <div class="content-body">
+        <section class="flexbox-container">
+            <div class="col-12 d-flex align-items-center justify-content-center">
+              <div class="col-md-4 col-10 box-shadow-2 p-0">
+                <div class="card border-grey border-lighten-3 px-1 py-1 box-shadow-3 m-0">
+                  <div class="card-body">
+                    <span class="card-title text-center">
+                      <img src="../../../../assets/images/logo/logo-dark-lg.png" class="img-fluid mx-auto d-block pt-2"
+                        width="250" alt="logo">
+                    </span>
+                  </div>
+                  <div class="card-body text-center">
+                    <h3>Coming Soon</h3>
+                    <p>We're sorry for the inconvenience.
+                      <br> Please check back later.</p>
+                    <div class="mt-2"><i class="la la-cog spinner font-large-2"></i></div>
+                  </div>
+                  <hr>
+                  <!-- <p class="socialIcon card-text text-center pt-2 pb-2">
+                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
+                        class="la la-facebook"></span></a>
+                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
+                        class="la la-twitter"></span></a>
+                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span
+                        class="la la-linkedin font-medium-4"></span></a>
+                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-github"><span
+                        class="la la-github font-medium-4"></span></a>
+                  </p> -->
+                </div>
+              </div>
+            </div>
+          </section>
+      </div>
+    </div>
+  </div>
+  
\ No newline at end of file
diff --git a/src/app/content/hemat-app/device/device.module.ts b/src/app/content/hemat-app/device/device.module.ts
index 254a26f..9446687 100644
--- a/src/app/content/hemat-app/device/device.module.ts
+++ b/src/app/content/hemat-app/device/device.module.ts
@@ -43,6 +43,10 @@ import { DeviceControlComponent } from './device-control/device-control.componen
         path: '',
         component: DeviceComponent
       },
+      {
+        path: 'control-device',
+        component: DeviceControlComponent,
+      },
       {
         path: 'add-row',
         component: AddEditDeviceComponent,