diff --git a/src/frontend/src/components/images/DetailsImage.tsx b/src/frontend/src/components/images/DetailsImage.tsx
index 44f896e031..4eda7d0809 100644
--- a/src/frontend/src/components/images/DetailsImage.tsx
+++ b/src/frontend/src/components/images/DetailsImage.tsx
@@ -1,9 +1,11 @@
 import { Trans, t } from '@lingui/macro';
 import {
+  AspectRatio,
   Button,
   Group,
   Image,
   Modal,
+  Overlay,
   Paper,
   Text,
   rem,
@@ -20,6 +22,7 @@ import { InvenTreeIcon } from '../../functions/icons';
 import { useUserState } from '../../states/UserState';
 import { PartThumbTable } from '../../tables/part/PartThumbTable';
 import { ActionButton } from '../buttons/ActionButton';
+import { StylishText } from '../items/StylishText';
 import { ApiImage } from './ApiImage';
 
 /**
@@ -58,9 +61,9 @@ const backup_image = '/static/img/blank_image.png';
  */
 const removeModal = (apiPath: string, setImage: (image: string) => void) =>
   modals.openConfirmModal({
-    title: t`Remove Image`,
+    title: <StylishText size="xl">{t`Remove Image`}</StylishText>,
     children: (
-      <Text size="sm">
+      <Text>
         <Trans>Remove the associated image from this item?</Trans>
       </Text>
     ),
@@ -245,13 +248,8 @@ function ImageActionButtons({
   pk: string;
   setImage: (image: string) => void;
 }) {
-  const [opened, { open, close }] = useDisclosure(false);
-
   return (
     <>
-      <Modal opened={opened} onClose={close} title={t`Select image`} size="70%">
-        <PartThumbTable pk={pk} close={close} setImage={setImage} />
-      </Modal>
       {visible && (
         <Group
           spacing="xs"
@@ -259,24 +257,37 @@ function ImageActionButtons({
         >
           {actions.selectExisting && (
             <ActionButton
-              icon={<InvenTreeIcon icon="select_image" />}
+              icon={
+                <InvenTreeIcon
+                  icon="select_image"
+                  iconProps={{ color: 'white' }}
+                />
+              }
               tooltip={t`Select from existing images`}
               variant="outline"
               size="lg"
               tooltipAlignment="top"
-              onClick={open}
+              onClick={() => {
+                modals.open({
+                  title: <StylishText size="xl">{t`Select Image`}</StylishText>,
+                  size: 'xxl',
+                  children: <PartThumbTable pk={pk} setImage={setImage} />
+                });
+              }}
             />
           )}
           {actions.uploadFile && (
             <ActionButton
-              icon={<InvenTreeIcon icon="upload" />}
+              icon={
+                <InvenTreeIcon icon="upload" iconProps={{ color: 'white' }} />
+              }
               tooltip={t`Upload new image`}
               variant="outline"
               size="lg"
               tooltipAlignment="top"
               onClick={() => {
                 modals.open({
-                  title: t`Upload Image`,
+                  title: <StylishText size="xl">{t`Upload Image`}</StylishText>,
                   children: (
                     <UploadModal apiPath={apiPath} setImage={setImage} />
                   )
@@ -320,39 +331,33 @@ export function DetailsImage(props: DetailImageProps) {
 
   return (
     <>
-      <Paper
-        ref={ref}
-        style={{
-          position: 'relative',
-          width: `${IMAGE_DIMENSION}px`,
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center'
-        }}
-      >
-        <ApiImage
-          src={img}
-          style={{ zIndex: 1 }}
-          height={IMAGE_DIMENSION}
-          width={IMAGE_DIMENSION}
-          onClick={() => {
-            modals.open({
-              children: <ApiImage src={img} />,
-              withCloseButton: false
-            });
-          }}
-        />
-        {permissions.hasChangeRole(props.appRole) && (
-          <ImageActionButtons
-            visible={hovered}
-            actions={props.imageActions}
-            apiPath={props.apiPath}
-            hasImage={props.src ? true : false}
-            pk={props.pk}
-            setImage={setAndRefresh}
+      <AspectRatio ref={ref} maw={IMAGE_DIMENSION} ratio={1}>
+        <>
+          <ApiImage
+            src={img}
+            height={IMAGE_DIMENSION}
+            width={IMAGE_DIMENSION}
+            onClick={() => {
+              modals.open({
+                children: <ApiImage src={img} />,
+                withCloseButton: false
+              });
+            }}
           />
-        )}
-      </Paper>
+          {permissions.hasChangeRole(props.appRole) && hovered && (
+            <Overlay color="black" opacity={0.8}>
+              <ImageActionButtons
+                visible={hovered}
+                actions={props.imageActions}
+                apiPath={props.apiPath}
+                hasImage={props.src ? true : false}
+                pk={props.pk}
+                setImage={setAndRefresh}
+              />
+            </Overlay>
+          )}
+        </>
+      </AspectRatio>
     </>
   );
 }
diff --git a/src/frontend/src/tables/Details.tsx b/src/frontend/src/tables/Details.tsx
index d32dba6fbc..b062635f5f 100644
--- a/src/frontend/src/tables/Details.tsx
+++ b/src/frontend/src/tables/Details.tsx
@@ -5,6 +5,7 @@ import {
   Badge,
   CopyButton,
   Group,
+  Paper,
   Skeleton,
   Table,
   Text,
@@ -437,7 +438,7 @@ export function DetailsTable({
   partIcons?: boolean;
 }) {
   return (
-    <Group>
+    <Paper p="xs" withBorder radius="xs">
       <Table striped>
         <tbody>
           {partIcons && (
@@ -475,6 +476,6 @@ export function DetailsTable({
           })}
         </tbody>
       </Table>
-    </Group>
+    </Paper>
   );
 }
diff --git a/src/frontend/src/tables/ItemDetails.tsx b/src/frontend/src/tables/ItemDetails.tsx
index 76e08296df..1ffc49473f 100644
--- a/src/frontend/src/tables/ItemDetails.tsx
+++ b/src/frontend/src/tables/ItemDetails.tsx
@@ -1,4 +1,4 @@
-import { Paper } from '@mantine/core';
+import { Grid, Group, Paper, SimpleGrid } from '@mantine/core';
 
 import {
   DetailImageButtonProps,
@@ -50,48 +50,39 @@ export function ItemDetails({
   partModel: boolean;
 }) {
   return (
-    <Paper style={{ display: 'flex', gap: '20px', flexWrap: 'wrap' }}>
-      <Paper
-        withBorder
-        style={{ flexBasis: '49%', display: 'flex', gap: '10px' }}
-      >
-        {fields.image && (
-          <div style={{ flexGrow: '0' }}>
-            <DetailsImage
-              appRole={appRole}
-              imageActions={fields.image.imageActions}
-              src={params.image}
-              apiPath={apiPath}
-              refresh={refresh}
-              pk={params.pk}
-            />
-          </div>
-        )}
-        {fields.left && (
-          <div style={{ flexGrow: '1' }}>
-            <DetailsTable
-              item={params}
-              fields={fields.left}
-              partIcons={partModel}
-            />
-          </div>
-        )}
-      </Paper>
-      {fields.right && (
-        <Paper style={{ flexBasis: '49%' }} withBorder>
-          <DetailsTable item={params} fields={fields.right} />
-        </Paper>
-      )}
-      {fields.bottom_left && (
-        <Paper style={{ flexBasis: '49%' }} withBorder>
+    <Paper p="xs">
+      <SimpleGrid cols={2} spacing="xs" verticalSpacing="xs">
+        <Grid>
+          {fields.image && (
+            <Grid.Col span={4}>
+              <DetailsImage
+                appRole={appRole}
+                imageActions={fields.image.imageActions}
+                src={params.image}
+                apiPath={apiPath}
+                refresh={refresh}
+                pk={params.pk}
+              />
+            </Grid.Col>
+          )}
+          <Grid.Col span={8}>
+            {fields.left && (
+              <DetailsTable
+                item={params}
+                fields={fields.left}
+                partIcons={partModel}
+              />
+            )}
+          </Grid.Col>
+        </Grid>
+        {fields.right && <DetailsTable item={params} fields={fields.right} />}
+        {fields.bottom_left && (
           <DetailsTable item={params} fields={fields.bottom_left} />
-        </Paper>
-      )}
-      {fields.bottom_right && (
-        <Paper style={{ flexBasis: '49%' }} withBorder>
+        )}
+        {fields.bottom_right && (
           <DetailsTable item={params} fields={fields.bottom_right} />
-        </Paper>
-      )}
+        )}
+      </SimpleGrid>
     </Paper>
   );
 }
diff --git a/src/frontend/src/tables/part/PartThumbTable.tsx b/src/frontend/src/tables/part/PartThumbTable.tsx
index 0d18becfc9..e110250de8 100644
--- a/src/frontend/src/tables/part/PartThumbTable.tsx
+++ b/src/frontend/src/tables/part/PartThumbTable.tsx
@@ -1,6 +1,18 @@
-import { t } from '@lingui/macro';
-import { Button, Paper, Skeleton, Text, TextInput } from '@mantine/core';
+import { Trans, t } from '@lingui/macro';
+import {
+  AspectRatio,
+  Button,
+  Divider,
+  Group,
+  Paper,
+  SimpleGrid,
+  Skeleton,
+  Stack,
+  Text,
+  TextInput
+} from '@mantine/core';
 import { useHover } from '@mantine/hooks';
+import { modals } from '@mantine/modals';
 import { useQuery } from '@tanstack/react-query';
 import React, { Suspense, useEffect, useState } from 'react';
 
@@ -17,7 +29,6 @@ export type ThumbTableProps = {
   limit?: number;
   offset?: number;
   search?: string;
-  close: () => void;
   setImage: (image: string) => void;
 };
 
@@ -62,29 +73,19 @@ function PartThumbComponent({ selected, element, selectImage }: ThumbProps) {
   return (
     <Paper
       withBorder
-      style={{
-        backgroundColor: color,
-        padding: '5px',
-        display: 'flex',
-        flex: '0 1 150px',
-        flexFlow: 'column wrap',
-        placeContent: 'center space-between'
-      }}
+      style={{ backgroundColor: color }}
+      p="sm"
       ref={ref}
       onClick={() => selectImage(element.image)}
     >
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          flexGrow: 1
-        }}
-      >
-        <Thumbnail size={120} src={src} align="center"></Thumbnail>
-      </div>
-      <Text style={{ alignSelf: 'center', overflowWrap: 'anywhere' }}>
-        {element.image.split('/')[1]} ({element.count})
-      </Text>
+      <Stack justify="space-between">
+        <AspectRatio ratio={1}>
+          <Thumbnail size={120} src={src} align="center"></Thumbnail>
+        </AspectRatio>
+        <Text size="xs">
+          {element.image.split('/')[1]} ({element.count})
+        </Text>
+      </Stack>
     </Paper>
   );
 }
@@ -95,7 +96,6 @@ function PartThumbComponent({ selected, element, selectImage }: ThumbProps) {
 async function setNewImage(
   image: string | null,
   pk: string,
-  close: () => void,
   setImage: (image: string) => void
 ) {
   // No need to do anything if no image is selected
@@ -110,7 +110,7 @@ async function setNewImage(
   // Update image component and close modal if update was successful
   if (response.data.image.includes(image)) {
     setImage(response.data.image);
-    close();
+    modals.closeAll();
   }
 }
 
@@ -118,11 +118,10 @@ async function setNewImage(
  * Renders a "table" of thumbnails
  */
 export function PartThumbTable({
-  limit = 25,
+  limit = 24,
   offset = 0,
   search = '',
   pk,
-  close,
   setImage
 }: ThumbTableProps) {
   const [img, selectImage] = useState<string | null>(null);
@@ -155,61 +154,51 @@ export function PartThumbTable({
   return (
     <>
       <Suspense>
-        <Paper
-          style={{
-            display: 'flex',
-            alignItems: 'stretch',
-            placeContent: 'stretch center',
-            flexWrap: 'wrap',
-            gap: '10px'
-          }}
-        >
-          {!thumbQuery.isFetching
-            ? thumbQuery.data?.data.map((data: ImageElement, index: number) => (
-                <PartThumbComponent
-                  element={data}
-                  key={index}
-                  selected={img}
-                  selectImage={selectImage}
-                />
-              ))
-            : [...Array(limit)].map((elem, idx) => (
-                <Skeleton
-                  height={150}
-                  width={150}
-                  radius="sm"
-                  key={idx}
-                  style={{ padding: '5px' }}
-                />
-              ))}
+        <Divider />
+        <Paper p="sm">
+          <>
+            <SimpleGrid cols={8}>
+              {!thumbQuery.isFetching
+                ? thumbQuery.data?.data.map(
+                    (data: ImageElement, index: number) => (
+                      <PartThumbComponent
+                        element={data}
+                        key={index}
+                        selected={img}
+                        selectImage={selectImage}
+                      />
+                    )
+                  )
+                : [...Array(limit)].map((elem, idx) => (
+                    <Skeleton
+                      height={150}
+                      width={150}
+                      radius="sm"
+                      key={idx}
+                      style={{ padding: '5px' }}
+                    />
+                  ))}
+            </SimpleGrid>
+          </>
         </Paper>
       </Suspense>
-      <Paper
-        style={{
-          position: 'sticky',
-          bottom: 0,
-          left: 0,
-          right: 0,
-          height: '60px',
-          zIndex: 1,
-          display: 'flex',
-          alignItems: 'center',
-          flexDirection: 'row',
-          justifyContent: 'space-between'
-        }}
-      >
-        <TextInput
-          placeholder={t`Search...`}
-          onChange={(event) => {
-            setFilterInput(event.currentTarget.value);
-          }}
-        />
-        <Button
-          disabled={!img}
-          onClick={() => setNewImage(img, pk, close, setImage)}
-        >
-          Submit
-        </Button>
+
+      <Divider />
+      <Paper p="sm">
+        <Group position="apart">
+          <TextInput
+            placeholder={t`Search...`}
+            onChange={(event) => {
+              setFilterInput(event.currentTarget.value);
+            }}
+          />
+          <Button
+            disabled={!img}
+            onClick={() => setNewImage(img, pk, setImage)}
+          >
+            <Trans>Select</Trans>
+          </Button>
+        </Group>
       </Paper>
     </>
   );