diff --git a/packages/admin-ui/src/pages/Machines/Machines.jsx b/packages/admin-ui/src/pages/Machines/Machines.jsx
index 25a242a3..79c01d88 100644
--- a/packages/admin-ui/src/pages/Machines/Machines.jsx
+++ b/packages/admin-ui/src/pages/Machines/Machines.jsx
@@ -3,7 +3,7 @@ import Breadcrumbs from '@mui/material/Breadcrumbs'
 import NavigateNextIcon from '@mui/icons-material/NavigateNext'
 import * as R from 'ramda'
 import React, { useState } from 'react'
-import { Link, useLocation } from 'wouter'
+import { Link, useLocation, useParams } from 'wouter'
 import { TL1, TL2, Label3 } from '../../components/typography'
 
 import Cassettes from './MachineComponents/Cassettes'
@@ -58,13 +58,11 @@ const GET_INFO = gql`
   }
 `
 
-const getMachineID = path => path.slice(path.lastIndexOf('/') + 1)
-
 const MachineRoute = () => {
   const [location, navigate] = useLocation()
   const [loading, setLoading] = useState(true)
+  const { id: deviceId } = useParams()
 
-  const id = getMachineID(location)
   const { data, refetch } = useQuery(GET_INFO, {
     onCompleted: data => {
       if (data.machine === null) return navigate('/maintenance/machine-status')
@@ -72,9 +70,9 @@ const MachineRoute = () => {
       setLoading(false)
     },
     variables: {
-      deviceId: id,
+      deviceId,
       billFilters: {
-        deviceId: id,
+        deviceId,
         batch: 'none',
       },
     },
diff --git a/packages/admin-ui/src/routing/routes.jsx b/packages/admin-ui/src/routing/routes.jsx
index 78395005..7492ed9b 100644
--- a/packages/admin-ui/src/routing/routes.jsx
+++ b/packages/admin-ui/src/routing/routes.jsx
@@ -93,7 +93,7 @@ const Routes = () => {
           </div>
         </Transition>
       </PrivateRoute>
-      <PrivateRoute path="/machines">
+      <PrivateRoute path="/machines/:id">
         <Machines />
       </PrivateRoute>
       <PublicRoute path="/register" component={Register} />