diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 354b9027..6218d93a 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -19,7 +19,7 @@ export const Modal = ({ open, onClose, children }: ModalProps): JSX.Element => {
         open={open}
         onClose={onClose}
       >
-        <div className="min-h-screen px-4 text-center">
+        <div className="min-h-screen px-0.5 text-center md:px-4">
           <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
@@ -37,7 +37,7 @@ export const Modal = ({ open, onClose, children }: ModalProps): JSX.Element => {
           <div className="inline-block w-full transform text-left align-middle transition-all 2xl:max-w-7xl">
             <div className="group relative">
               <div className="animate-tilt absolute -inset-0.5 rotate-2 rounded-lg bg-accent shadow-md transition duration-1000 group-hover:opacity-100 group-hover:duration-200"></div>
-              <div className="relative flex aspect-[3/2] flex-col overflow-hidden rounded-2xl bg-base shadow-md md:aspect-[2/1] md:flex-row md:bg-primary">
+              <div className="relative flex flex-col overflow-hidden rounded-2xl bg-base shadow-md md:aspect-[2/1] md:flex-row md:bg-primary">
                 {children}
               </div>
             </div>
diff --git a/src/components/hardware/Badge.tsx b/src/components/hardware/Badge.tsx
index b991b09b..4ef5413f 100644
--- a/src/components/hardware/Badge.tsx
+++ b/src/components/hardware/Badge.tsx
@@ -11,8 +11,8 @@ export const Badge = ({ name, color, icon }: BadgeProps): JSX.Element => {
     <div
       className={`flex h-min cursor-pointer gap-1 rounded-md px-1 text-white shadow-md hover:opacity-80 ${color}`}
     >
-      <div className="m-auto">{icon}</div>
-      <span>{name}</span>
+      <div className="my-1">{icon}</div>
+      <span className="hidden truncate md:flex">{name}</span>
     </div>
   );
 };
diff --git a/src/components/hardware/HardwareModal.tsx b/src/components/hardware/HardwareModal.tsx
index 232d1310..6f2d8b12 100644
--- a/src/components/hardware/HardwareModal.tsx
+++ b/src/components/hardware/HardwareModal.tsx
@@ -29,7 +29,7 @@ export const HardwareModal = ({
   close,
 }: HardwareModal): JSX.Element => {
   const [hideDetails, setHideDetails] = useState(false);
-  const { breakpoint } = useBreakpoint(BREAKPOINTS);
+  const { breakpoint } = useBreakpoint(BREAKPOINTS, 'sm');
 
   return (
     <Modal open={open} onClose={close}>
@@ -112,22 +112,24 @@ export const HardwareModal = ({
                     initial={{ opacity: 0 }}
                     animate={{ opacity: 1 }}
                     exit={{ opacity: 0 }}
-                    className="absolute -bottom-3 right-0 m-auto mr-2 ml-auto flex gap-2 md:bottom-2 md:mr-14 md:mt-2"
+                    className="absolute -bottom-3 right-0 m-auto mr-2 ml-auto flex md:inset-x-1 md:bottom-4 md:mt-2"
                   >
-                    {device.features.BLE && (
-                      <Badge
-                        name="Bluetooth"
-                        color="bg-blue-500"
-                        icon={<FiBluetooth />}
-                      />
-                    )}
-                    {device.features.WiFi && (
-                      <Badge
-                        name="WiFi"
-                        color="bg-orange-500"
-                        icon={<FiWifi />}
-                      />
-                    )}
+                    <div className="m-auto flex gap-2">
+                      {device.features.BLE && (
+                        <Badge
+                          name="Bluetooth"
+                          color="bg-blue-500"
+                          icon={<FiBluetooth />}
+                        />
+                      )}
+                      {device.features.WiFi && (
+                        <Badge
+                          name="WiFi"
+                          color="bg-orange-500"
+                          icon={<FiWifi />}
+                        />
+                      )}
+                    </div>
                   </motion.div>
                 </>
               )}