diff --git a/manager-ui/src/TauriApp.tsx b/manager-ui/src/TauriApp.tsx
index a9fe3f8..c553b33 100644
--- a/manager-ui/src/TauriApp.tsx
+++ b/manager-ui/src/TauriApp.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react';
 import './App.css';
 import { useTauriManagerStore } from '@stores/tauri/useTauriManagerStore';
-import { BluetoothSearchScreen } from './screens/bluetoothSearch';
-import { useAsyncBridgeEvent, useAsyncBridgeRequest } from './hooks/useAsyncBridge';
+import { BluetoothSearchLayout } from './layouts/bluetoothSearch';
+import { useAsyncBridgeEvent, useAsyncBridgeRequest } from '@hooks/useAsyncBridge';
 import { useShallow } from 'zustand/react/shallow';
-import { DeviceStateScreen } from '@screens/deviceState';
+import { DeviceStateLayout } from './layouts/deviceState';
 
 export const TauriApp: React.FC = () => {
   const [isFirstRender, setFirstRender] = React.useState(true);
@@ -12,8 +12,7 @@ export const TauriApp: React.FC = () => {
     useShallow((state) => [state.handleAsyncBridgeEvent, state.connectedAddresses])
   );
 
-  const state = useTauriManagerStore((state) => state);
-  console.log('state', state);
+  const currentState = useTauriManagerStore((state) => state.currentViewedDeviceState());
 
   // Add the event listener to the bridge, which listener is
   // provided by the store.
@@ -31,7 +30,11 @@ export const TauriApp: React.FC = () => {
 
   return (
     <React.Fragment>
-      {connectedAddresses.size !== 0 ? <DeviceStateScreen /> : <BluetoothSearchScreen />}
+      {connectedAddresses.size !== 0 && currentState ? (
+        <DeviceStateLayout state={currentState} />
+      ) : (
+        <BluetoothSearchLayout />
+      )}
     </React.Fragment>
   );
 };
diff --git a/manager-ui/src/WebApp.tsx b/manager-ui/src/WebApp.tsx
index 77e42ab..6971375 100644
--- a/manager-ui/src/WebApp.tsx
+++ b/manager-ui/src/WebApp.tsx
@@ -3,7 +3,6 @@
 import React, { useState } from 'react';
 import { generate_soundcore_service_uuids, getSoundcoreMacPrefixes } from '@wasm/manager_wasm';
 import { useWebManagerStore } from '@stores/web/useWebManagerStore';
-import { DeviceStateCard } from '@components/DeviceStateCard/deviceStateCard';
 import { BLEDeviceFactory } from './ble/bleDevice';
 import {
   Button,
@@ -17,9 +16,9 @@ import {
   NavbarItem,
   Spinner
 } from '@nextui-org/react';
-import { EqualizerCard } from '@components/EqualizerCard/equalizerCard';
 import { BlurredOverlay } from '@components/atoms/blurredOverlay';
 import { ChevronDown, Unplug } from 'lucide-react';
+import { DeviceStateLayout } from './layouts/deviceState';
 
 enum ConnectionDialogStatus {
   DIALOG_OPEN,
@@ -98,8 +97,7 @@ export const WebApp: React.FC = () => {
       <div className={'min-h-fit flex flex-col items-center justify-start p-4'}>
         {state ? (
           <div className={'flex flex-col items-stretch w-2/3 2xl:w-1/2'}>
-            <DeviceStateCard state={state} />
-            <EqualizerCard state={state} />
+            <DeviceStateLayout state={state} />
           </div>
         ) : (
           <>
diff --git a/manager-ui/src/screens/bluetoothSearch.tsx b/manager-ui/src/layouts/bluetoothSearch.tsx
similarity index 98%
rename from manager-ui/src/screens/bluetoothSearch.tsx
rename to manager-ui/src/layouts/bluetoothSearch.tsx
index 6324af6..30b45bd 100644
--- a/manager-ui/src/screens/bluetoothSearch.tsx
+++ b/manager-ui/src/layouts/bluetoothSearch.tsx
@@ -6,7 +6,7 @@ import { Button, Listbox, ListboxItem, Progress, Spinner } from '@nextui-org/rea
 import { ArrowRight, RefreshCcw } from 'lucide-react';
 import { BlurredOverlay } from '@components/atoms/blurredOverlay';
 
-export const BluetoothSearchScreen: React.FC = () => {
+export const BluetoothSearchLayout: React.FC = () => {
   const {
     isLoading: isScanLoading,
     startScan,
diff --git a/manager-ui/src/layouts/deviceState.tsx b/manager-ui/src/layouts/deviceState.tsx
new file mode 100644
index 0000000..aff48f7
--- /dev/null
+++ b/manager-ui/src/layouts/deviceState.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { DeviceStateCard } from '@components/DeviceStateCard/deviceStateCard';
+import { SoundcoreDeviceState } from '@generated-types/soundcore-lib';
+import { EqualizerCard } from '@components/EqualizerCard/equalizerCard';
+
+export const DeviceStateLayout: React.FC<{ state: SoundcoreDeviceState }> = ({ state }) => {
+  return (
+    <>
+      <DeviceStateCard state={state} />
+      <EqualizerCard state={state} />
+    </>
+  );
+};
diff --git a/manager-ui/src/screens/deviceState.tsx b/manager-ui/src/screens/deviceState.tsx
deleted file mode 100644
index 8486f5a..0000000
--- a/manager-ui/src/screens/deviceState.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { DeviceStateCard } from '@components/DeviceStateCard/deviceStateCard';
-import { useTauriManagerStore } from '@stores/tauri/useTauriManagerStore';
-import { useShallow } from 'zustand/react/shallow';
-
-export const DeviceStateScreen = (): JSX.Element => {
-  const [connectedAddresses, currentViewedDevice] = useTauriManagerStore(
-    useShallow((state) => [state.connectedAddresses, state.currentViewedDevice])
-  );
-
-  const currentState = useTauriManagerStore((state) => state.currentViewedDeviceState());
-
-  if (!currentViewedDevice || !currentState) {
-    return <h1>No device selected</h1>;
-  }
-  return (
-    <>
-      <DeviceStateCard state={currentState} />
-      {process.env.NODE_ENV === 'development' && (
-        <>
-          <h1>Connected Devices</h1>
-          <ul>
-            {connectedAddresses.values.map((addr, idx) => (
-              <li key={idx}>{addr}</li>
-            ))}
-          </ul>
-          <h1>Device State</h1>
-          <ul>{JSON.stringify(currentState)}</ul>
-        </>
-      )}
-    </>
-  );
-};