diff --git a/src/components/Connection.tsx b/src/components/Connection.tsx
index 66a6294d..76cd6b18 100644
--- a/src/components/Connection.tsx
+++ b/src/components/Connection.tsx
@@ -98,7 +98,7 @@ export const Connection = (): JSX.Element => {
           </div>
         </div>
         <div className="md:w-1/2">
-          <div className="h-96 overflow-y-auto rounded-md border border-gray-300 bg-gray-200 p-2 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400">
+          <div className="h-96 overflow-y-auto rounded-md border border-gray-300 bg-gray-200 p-2 shadow-md dark:border-gray-600 dark:bg-primaryDark dark:text-gray-400">
             {meshtasticState.logs.length === 0 && (
               <div className="flex h-full w-full">
                 <m.img
diff --git a/src/components/generic/Card.tsx b/src/components/generic/Card.tsx
index c5b01352..2d32ddce 100644
--- a/src/components/generic/Card.tsx
+++ b/src/components/generic/Card.tsx
@@ -41,8 +41,8 @@ export const Card = ({
         )}
 
         <m.div
-          className={`flex flex-grow select-none flex-col gap-4  p-4  ${
-            title || actions ? 'rounded-b-md backdrop-blur-xl' : 'rounded-md'
+          className={`flex flex-grow select-none flex-col gap-4 bg-white p-4 dark:bg-secondaryDark  ${
+            title || actions ? 'rounded-b-md' : 'rounded-md'
           } ${draggable ? '' : 'bg-white dark:bg-primaryDark'}`}
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
diff --git a/src/components/generic/Modal.tsx b/src/components/generic/Modal.tsx
index 5e5962b6..6c305d6c 100644
--- a/src/components/generic/Modal.tsx
+++ b/src/components/generic/Modal.tsx
@@ -62,7 +62,7 @@ export const Modal = ({
                     />
                   </div>
                 }
-                className="relative flex-col gap-4"
+                className="relative flex-col"
                 {...props}
               />
             </div>