diff --git a/frontend/src/pages/devices/[...id].js b/frontend/src/pages/devices/[...id].js
new file mode 100644
index 0000000..9708a09
--- /dev/null
+++ b/frontend/src/pages/devices/[...id].js
@@ -0,0 +1,80 @@
+import Head from 'next/head';
+import { Box, Stack, Typography, Container, Unstable_Grid2 as Grid,
+Tab,
+Tabs,
+SvgIcon } from '@mui/material';
+import { Layout as DashboardLayout } from 'src/layouts/dashboard/layout';
+import { useRouter } from 'next/router';
+import { DevicesRPC } from 'src/sections/devices/devices-rpc';
+import { DevicesDiscovery } from 'src/sections/devices/devices-discovery';
+import EnvelopeIcon from '@heroicons/react/24/outline/EnvelopeIcon';
+import MagnifyingGlassIcon from '@heroicons/react/24/solid/MagnifyingGlassIcon';
+import WifiIcon from '@heroicons/react/24/solid/WifiIcon';
+import { useEffect, useState } from 'react';
+
+const Page = () => {
+ const router = useRouter()
+
+ const deviceID = router.query.id[0]
+ const section = router.query.id[1]
+
+ const sectionHandler = () => {
+ switch(section){
+ case "msg":
+ return
+ case "discovery":
+ return
+ default:
+ return Hello World
+ }
+ }
+
+ useEffect(()=>{
+ console.log("deviceid:",deviceID)
+ })
+
+ return(
+ <>
+
+
+ Oktopus | TR-369
+
+
+
+
+
+
+
+ } iconPosition={"end"} label="Wi-Fi" />
+ {router.push(`/devices/${deviceID}/discovery`)}} icon={} iconPosition={"end"} label="Discover Parameters" />
+ {router.push(`/devices/${deviceID}/msg`)}} icon={} iconPosition={"end"} label="Remote Messages" />
+
+
+
+ {
+ sectionHandler()
+ }
+
+
+
+
+ );
+};
+
+Page.getLayout = (page) => (
+
+ {page}
+
+);
+
+export default Page;
\ No newline at end of file
diff --git a/frontend/src/pages/devices/[id].js b/frontend/src/pages/devices/[id].js
deleted file mode 100644
index c3d2a74..0000000
--- a/frontend/src/pages/devices/[id].js
+++ /dev/null
@@ -1,46 +0,0 @@
-import Head from 'next/head';
-import { Box, Stack, Typography, Container, Unstable_Grid2 as Grid } from '@mui/material';
-import { Layout as DashboardLayout } from 'src/layouts/dashboard/layout';
-import { useRouter } from 'next/router';
-import { DevicesRPC } from 'src/sections/devices/devices-rpc';
-
-const Page = () => {
- const router = useRouter()
- const { id } = router.query
-
-
- return(
- <>
-
-
- Oktopus | TR-369
-
-
-
-
-
-
- RPC
-
- {/**/}
- < DevicesRPC />
-
-
-
-
- );
-};
-
-Page.getLayout = (page) => (
-
- {page}
-
-);
-
-export default Page;
\ No newline at end of file