diff --git a/frontend/src/App.css b/frontend/src/App.css
index 4f1c714..7c9c9e9 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -5,11 +5,6 @@ body {
 input.instantUpdate {
   background-color: rgba(255, 0, 0, 0.1);
 }
-
-.numberComponentButton {
-  padding: 0.15em 6px !important;
-  font-size: 0.7rem !important;
-}
 .navbarOffset {
   padding-top: 60px !important;
 }
@@ -28,38 +23,30 @@ input.instantUpdate {
 .criticalToast {
   background-color: rgba(216, 41, 18, 0.678) !important;
 }
-.buttonComponent {
+.component {
+  position: relative;
   float: left !important;
-  margin-right: 10px !important;
-}
-.stringComponent {
-  float: left !important;
-  margin-right: 10px !important;
-}
-.numberComponent {
-  float: left !important;
-  margin-right: 10px !important;
-  width: 270px !important;
+  padding: 5px !important;
+  z-index: 1;
 }
 .dataServiceComponent {
-  position: relative;
-  z-index: 1;
+  width: 100%;
 }
 .deviceConnectionComponent {
   position: relative;
+  float: left !important;
+  width: 100%;
   z-index: 1;
 }
 .overlayContent {
   position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  background-color: rgba(128, 128, 128, 0.5);
+  inset: 5px; /* (see https://developer.mozilla.org/en-US/docs/Web/CSS/inset) */
+  background: rgba(155, 155, 155, 0.75);
   z-index: 2;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column; /* Stack children vertically */
   border-radius: var(--bs-card-inner-border-radius);
+  border: var(--bs-border-width) solid var(--bs-border-color-translucent)
 }
diff --git a/frontend/src/components/AsyncMethodComponent.tsx b/frontend/src/components/AsyncMethodComponent.tsx
index 6c21d8f..77ce61d 100644
--- a/frontend/src/components/AsyncMethodComponent.tsx
+++ b/frontend/src/components/AsyncMethodComponent.tsx
@@ -98,7 +98,7 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
   });
 
   return (
-    <div className="align-items-center asyncMethodComponent" id={id}>
+    <div className="component asyncMethodComponent" id={id}>
       {process.env.NODE_ENV === 'development' && (
         <div>Render count: {renderCount.current}</div>
       )}
diff --git a/frontend/src/components/ButtonComponent.tsx b/frontend/src/components/ButtonComponent.tsx
index 86aad75..4ae75d0 100644
--- a/frontend/src/components/ButtonComponent.tsx
+++ b/frontend/src/components/ButtonComponent.tsx
@@ -43,7 +43,7 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
   };
 
   return (
-    <div className={'buttonComponent'} id={id}>
+    <div className={'component buttonComponent'} id={id}>
       {process.env.NODE_ENV === 'development' && (
         <div>Render count: {renderCount.current}</div>
       )}
diff --git a/frontend/src/components/ColouredEnumComponent.tsx b/frontend/src/components/ColouredEnumComponent.tsx
index d26c3d6..f3e9a47 100644
--- a/frontend/src/components/ColouredEnumComponent.tsx
+++ b/frontend/src/components/ColouredEnumComponent.tsx
@@ -49,7 +49,7 @@ export const ColouredEnumComponent = React.memo((props: ColouredEnumComponentPro
   };
 
   return (
-    <div className={'enumComponent'} id={id}>
+    <div className={'component enumComponent'} id={id}>
       {process.env.NODE_ENV === 'development' && (
         <div>Render count: {renderCount.current}</div>
       )}
diff --git a/frontend/src/components/DataServiceComponent.tsx b/frontend/src/components/DataServiceComponent.tsx
index 0d53223..aede2b5 100644
--- a/frontend/src/components/DataServiceComponent.tsx
+++ b/frontend/src/components/DataServiceComponent.tsx
@@ -40,8 +40,8 @@ export const DataServiceComponent = React.memo(
     }
 
     return (
-      <div className="dataServiceComponent" id={id}>
-        <Card className="mb-3">
+      <div className="component dataServiceComponent" id={id}>
+        <Card>
           <Card.Header
             onClick={() => setOpen(!open)}
             style={{ cursor: 'pointer' }} // Change cursor style on hover
diff --git a/frontend/src/components/DeviceConnection.tsx b/frontend/src/components/DeviceConnection.tsx
index 0916ea6..7fc5144 100644
--- a/frontend/src/components/DeviceConnection.tsx
+++ b/frontend/src/components/DeviceConnection.tsx
@@ -40,10 +40,10 @@ export const DeviceConnectionComponent = React.memo(
     }
 
     return (
-      <div className={`deviceConnectionComponent ${displayName}`} id={id}>
+      <div className="deviceConnectionComponent" id={id}>
         {!availableVal && (
           <div className="overlayContent">
-            <div>This device is currently not available!</div>
+            <div>{displayName} is currently not available!</div>
             <MethodComponent
               name="connect"
               parentPath={fullAccessPath}
diff --git a/frontend/src/components/EnumComponent.tsx b/frontend/src/components/EnumComponent.tsx
index a78ca4f..a3eaaac 100644
--- a/frontend/src/components/EnumComponent.tsx
+++ b/frontend/src/components/EnumComponent.tsx
@@ -48,7 +48,7 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
   };
 
   return (
-    <div className={'enumComponent'} id={id}>
+    <div className={'component enumComponent'} id={id}>
       {process.env.NODE_ENV === 'development' && (
         <div>Render count: {renderCount.current}</div>
       )}
diff --git a/frontend/src/components/ImageComponent.tsx b/frontend/src/components/ImageComponent.tsx
index 371d910..bfd8331 100644
--- a/frontend/src/components/ImageComponent.tsx
+++ b/frontend/src/components/ImageComponent.tsx
@@ -39,7 +39,7 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
   }, [props.value]);
 
   return (
-    <div className={'imageComponent'} id={id}>
+    <div className="component imageComponent" id={id}>
       {process.env.NODE_ENV === 'development' && (
         <div>Render count: {renderCount.current}</div>
       )}
diff --git a/frontend/src/components/MethodComponent.tsx b/frontend/src/components/MethodComponent.tsx
index f7e3929..b0e8b4a 100644
--- a/frontend/src/components/MethodComponent.tsx
+++ b/frontend/src/components/MethodComponent.tsx
@@ -83,7 +83,7 @@ export const MethodComponent = React.memo((props: MethodProps) => {
   });
 
   return (
-    <div className="align-items-center methodComponent" id={id}>
+    <div className="component methodComponent" id={id}>
       {process.env.NODE_ENV === 'development' && (
         <div>Render count: {renderCount.current}</div>
       )}
diff --git a/frontend/src/components/NumberComponent.tsx b/frontend/src/components/NumberComponent.tsx
index 32e0361..37fa7cd 100644
--- a/frontend/src/components/NumberComponent.tsx
+++ b/frontend/src/components/NumberComponent.tsx
@@ -309,7 +309,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
   };
 
   return (
-    <div className="numberComponent" id={id}>
+    <div className="component numberComponent" id={id}>
       {process.env.NODE_ENV === 'development' && (
         <div>Render count: {renderCount.current}</div>
       )}
diff --git a/frontend/src/components/SliderComponent.tsx b/frontend/src/components/SliderComponent.tsx
index b19ff76..23b0862 100644
--- a/frontend/src/components/SliderComponent.tsx
+++ b/frontend/src/components/SliderComponent.tsx
@@ -100,7 +100,7 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
   const [stepSizeMagnitude, stepSizeReadOnly] = deconstructNumberDict(stepSize);
 
   return (
-    <div className="sliderComponent" id={id}>
+    <div className="component sliderComponent" id={id}>
       {process.env.NODE_ENV === 'development' && (
         <div>Render count: {renderCount.current}</div>
       )}
diff --git a/frontend/src/components/StringComponent.tsx b/frontend/src/components/StringComponent.tsx
index c916f25..7018710 100644
--- a/frontend/src/components/StringComponent.tsx
+++ b/frontend/src/components/StringComponent.tsx
@@ -66,7 +66,7 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
   };
 
   return (
-    <div className={'stringComponent'} id={id}>
+    <div className="component stringComponent" id={id}>
       {process.env.NODE_ENV === 'development' && (
         <div>Render count: {renderCount.current}</div>
       )}