diff --git a/src/components/hardware/HardwareModal.tsx b/src/components/hardware/HardwareModal.tsx
index caeaa591..9c070272 100644
--- a/src/components/hardware/HardwareModal.tsx
+++ b/src/components/hardware/HardwareModal.tsx
@@ -8,7 +8,7 @@ import {
   VictoryTheme,
 } from 'victory';
 
-import { Tab } from '@headlessui/react';
+import { Tab, Transition } from '@headlessui/react';
 import type { IDevice } from '@site/src/data/device';
 
 import { Modal } from '../Modal';
@@ -31,9 +31,9 @@ export const HardwareModal = ({
   return (
     <Modal open={open} onClose={close}>
       <div className="inline-block w-full max-w-md transform overflow-hidden rounded-2xl bg-base text-left align-middle transition-all md:max-w-2xl md:bg-primary lg:max-w-4xl xl:max-w-6xl">
-        <div className="flex flex-col md:flex-row">
+        <div className="flex aspect-[3/2] flex-col md:flex-row">
           <div
-            className={`relative flex aspect-[2/1] rounded-t-2xl bg-gradient-to-r md:rounded-l-2xl md:rounded-tr-none ${
+            className={`relative flex h-full rounded-t-2xl bg-gradient-to-r md:rounded-l-2xl md:rounded-tr-none ${
               device.misc.Gradient
             } ${hideDetails ? 'w-full' : ''}`}
           >
@@ -82,85 +82,103 @@ export const HardwareModal = ({
           >
             <FiX className="m-auto" />
           </div>
-          {hideDetails ? (
-            <div className="h-7 bg-base md:h-auto md:w-7"></div>
-          ) : (
-            <div className="w-full">
-              <div className="flex shadow-md md:pb-2">
-                <VariantSelectButton options={device.variants} />
-              </div>
-              <div className="bg-base p-2 md:p-4">
-                <Tab.Group as="div" className="rounded-2xl bg-primary p-2">
-                  <Tab.List className="flex gap-2">
-                    <Tab
-                      className={({ selected }) =>
-                        `w-1/3 truncate rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
-                          selected ? 'bg-secondary shadow-md' : ''
-                        }`
-                      }
-                    >
-                      Info
-                    </Tab>
-                    <Tab
-                      className={({ selected }) =>
-                        `w-1/3 truncate rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
-                          selected ? 'bg-secondary shadow-md' : ''
-                        }`
-                      }
-                    >
-                      Power
-                    </Tab>
-                    <Tab
-                      className={({ selected }) =>
-                        `w-1/3 truncate rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
-                          selected ? 'bg-secondary shadow-md' : ''
-                        }`
-                      }
-                    >
-                      Pinout
-                    </Tab>
-                  </Tab.List>
-                  <Tab.Panels as="div" className="">
-                    <Tab.Panel className="h-32">Content 1</Tab.Panel>
-                    <Tab.Panel className="h-96">
-                      <VictoryChart
-                        polar
-                        theme={VictoryTheme.material}
-                        domain={{ y: [0, 10] }}
+          <div
+            className={`transition-[width] duration-100 ease-linear ${
+              hideDetails ? 'h-7 bg-base md:h-auto md:w-7' : 'w-full'
+            }`}
+          >
+            <Transition
+              appear
+              as={'div'}
+              className="flex h-full flex-col"
+              show={!hideDetails}
+              enter="ease-out duration-100 delay-100"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="ease-in duration-100 delay-100"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <>
+                <div className="flex shadow-md md:pb-2">
+                  <VariantSelectButton options={device.variants} />
+                </div>
+                <div className="flex h-full bg-base p-2 md:p-4">
+                  <Tab.Group
+                    as="div"
+                    className="flex-grow rounded-2xl bg-primary p-2"
+                  >
+                    <Tab.List className="flex gap-2">
+                      <Tab
+                        className={({ selected }) =>
+                          `w-1/3 truncate rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
+                            selected ? 'bg-secondary shadow-md' : ''
+                          }`
+                        }
                       >
-                        <VictoryPolarAxis
-                          dependentAxis
-                          style={{ axis: { stroke: 'none' } }}
-                          tickFormat={() => ''}
-                        />
-                        <VictoryPolarAxis
-                          tickValues={[
-                            0,
-                            Math.PI / 2,
-                            Math.PI,
-                            (3 * Math.PI) / 2,
-                          ]}
-                          tickFormat={['2π', 'π/2', 'π', '3π/2']}
-                          labelPlacement="vertical"
-                        />
-                        {[5, 4, 3, 2, 1].map((val, i) => {
-                          return (
-                            <VictoryLine
-                              key={i}
-                              samples={100}
-                              style={{ data: { stroke: colors[i] } }}
-                              y={(d) => val * (1 - Math.cos(d.x))}
-                            />
-                          );
-                        })}
-                      </VictoryChart>
-                    </Tab.Panel>
-                    <Tab.Panel>Content 3</Tab.Panel>
-                  </Tab.Panels>
-                </Tab.Group>
-              </div>
-            </div>
-          )}
+                        Info
+                      </Tab>
+                      <Tab
+                        className={({ selected }) =>
+                          `w-1/3 truncate rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
+                            selected ? 'bg-secondary shadow-md' : ''
+                          }`
+                        }
+                      >
+                        Power
+                      </Tab>
+                      <Tab
+                        className={({ selected }) =>
+                          `w-1/3 truncate rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
+                            selected ? 'bg-secondary shadow-md' : ''
+                          }`
+                        }
+                      >
+                        Pinout
+                      </Tab>
+                    </Tab.List>
+                    <Tab.Panels as="div" className="">
+                      <Tab.Panel className="h-32">Content 1</Tab.Panel>
+                      <Tab.Panel className="h-96">
+                        <VictoryChart
+                          polar
+                          theme={VictoryTheme.material}
+                          domain={{ y: [0, 10] }}
+                        >
+                          <VictoryPolarAxis
+                            dependentAxis
+                            style={{ axis: { stroke: 'none' } }}
+                            tickFormat={() => ''}
+                          />
+                          <VictoryPolarAxis
+                            tickValues={[
+                              0,
+                              Math.PI / 2,
+                              Math.PI,
+                              (3 * Math.PI) / 2,
+                            ]}
+                            tickFormat={['2π', 'π/2', 'π', '3π/2']}
+                            labelPlacement="vertical"
+                          />
+                          {[5, 4, 3, 2, 1].map((val, i) => {
+                            return (
+                              <VictoryLine
+                                key={i}
+                                samples={100}
+                                style={{ data: { stroke: colors[i] } }}
+                                y={(d) => val * (1 - Math.cos(d.x))}
+                              />
+                            );
+                          })}
+                        </VictoryChart>
+                      </Tab.Panel>
+                      <Tab.Panel>Content 3</Tab.Panel>
+                    </Tab.Panels>
+                  </Tab.Group>
+                </div>
+              </>
+            </Transition>
+          </div>
         </div>
       </div>
     </Modal>