diff --git a/package-lock.json b/package-lock.json
index 62ca73c6..a88c8c2b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@dagrejs/dagre": "^1.1.4",
         "@hookform/resolvers": "^4.1.3",
+        "@sap-ui/common-css": "^0.39.1",
         "@ui5/webcomponents": "^2.7.2",
         "@ui5/webcomponents-fiori": "^2.7.2",
         "@ui5/webcomponents-icons": "^2.7.2",
@@ -1679,6 +1680,21 @@
       "integrity": "sha512-Mtk011SHZhmhnRaD7B0eMVqGwPBuu1d9PaWkTpSD30MUuLZ0Uag4OMczWDT1oJwq0zGFYxGZxwtiCMwkwBxCKw==",
       "license": "Apache-2.0"
     },
+    "node_modules/@sap-ui/common-css": {
+      "version": "0.39.1",
+      "resolved": "https://registry.npmjs.org/@sap-ui/common-css/-/common-css-0.39.1.tgz",
+      "integrity": "sha512-0tCaugqcfcjP+YpQxERzaukPgsbZifjIAH9Wo79yGECBGS3XREtcaB6tE99gIsfTPpUWZC9yCpsOIjgZOwqzTg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@sap-theming/theming-base-content": "^11.27.0"
+      }
+    },
+    "node_modules/@sap-ui/common-css/node_modules/@sap-theming/theming-base-content": {
+      "version": "11.27.1",
+      "resolved": "https://registry.npmjs.org/@sap-theming/theming-base-content/-/theming-base-content-11.27.1.tgz",
+      "integrity": "sha512-PFmY7A8CcaCh7waVDLP9oziQtoi2nA6aBJK50YGaqxLQwH8ERiaS54vsRPoTwc9/aaKnzZV2VCgh84ji+br12w==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@standard-schema/utils": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
diff --git a/package.json b/package.json
index 91ad7a94..d8a743d2 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
     "@hookform/resolvers": "^4.1.3",
+    "@sap-ui/common-css": "^0.39.1",
     "@ui5/webcomponents": "^2.7.2",
     "@ui5/webcomponents-fiori": "^2.7.2",
     "@ui5/webcomponents-icons": "^2.7.2",
diff --git a/src/components/ControlPlanes/ControlPlaneCard.tsx b/src/components/ControlPlanes/ControlPlaneCard.tsx
index 3b80eeb8..1480ce61 100644
--- a/src/components/ControlPlanes/ControlPlaneCard.tsx
+++ b/src/components/ControlPlanes/ControlPlaneCard.tsx
@@ -54,9 +54,9 @@ export function ControlPlaneCard({
     <>
       <Card
         key={`${name}--${namespace}`}
-        style={{ margin: '12px 12px 12px 0' }}
+        className="sap-margin-begin-small sap-margin-end-small sap-margin-top-small"
       >
-        <div style={{ padding: '20px' }}>
+        <div className="sap-padding">
           <FlexBox direction="Column">
             <FlexBox direction="Row" justifyContent="SpaceBetween">
               <FlexBox direction="Column">
@@ -80,7 +80,7 @@ export function ControlPlaneCard({
               direction="Row"
               justifyContent="SpaceBetween"
               alignItems="Center"
-              style={{ paddingTop: '20px' }}
+              className="sap-margin-top-small"
             >
               <MCPHealthPopoverButton mcpStatus={controlPlane.status} />
               <ConnectButton
diff --git a/src/main.tsx b/src/main.tsx
index 519a54de..44b4b2ad 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -17,6 +17,7 @@ import { DarkModeSystemSwitcher } from './components/Core/DarkModeSystemSwitcher
 import '.././i18n.ts';
 import './utils/i18n/timeAgo';
 import { useTranslation } from 'react-i18next';
+import '@sap-ui/common-css/dist/common-css.css';
 
 (async () => {
   try {