diff --git a/packages/react-storage/src/components/StorageBrowser/Views/LocationsView/Controls/DataTable.tsx b/packages/react-storage/src/components/StorageBrowser/Views/LocationsView/Controls/DataTable.tsx
index 89fa57cddf3..a893d3eaf8a 100644
--- a/packages/react-storage/src/components/StorageBrowser/Views/LocationsView/Controls/DataTable.tsx
+++ b/packages/react-storage/src/components/StorageBrowser/Views/LocationsView/Controls/DataTable.tsx
@@ -5,6 +5,7 @@ import { capitalize } from '@aws-amplify/ui';
 import {
   DataTable,
   TABLE_DATA_BUTTON_CLASS,
+  // TABLE_DATA_TEXT_CLASS_NAME,
   TABLE_HEADER_BUTTON_CLASS_NAME,
   TABLE_HEADER_CLASS_NAME,
 } from '../../../components/DataTable';
@@ -12,7 +13,11 @@ import { useControl } from '../../../context/controls';
 import { useLocationsData } from '../../../context/actions';
 import { LocationAccess } from '../../../context/types';
 import { compareStrings } from '../../../context/controls/Table';
-import { ButtonElement, IconElement } from '../../../context/elements';
+import {
+  ButtonElement,
+  IconElement,
+  // SpanElement,
+} from '../../../context/elements';
 
 export type SortDirection = 'ascending' | 'descending' | 'none';
 
@@ -113,8 +118,14 @@ const getLocationsData = ({
         </ButtonElement>
       ),
     },
-    { key: `td-type-${index}`, children: location.type },
-    { key: `td-permission-${index}`, children: location.permission },
+    {
+      key: `td-type-${index}`,
+      children: location.type,
+    },
+    {
+      key: `td-permission-${index}`,
+      children: location.permission,
+    },
   ]);
 
   return { columns, rows };
diff --git a/packages/react-storage/src/components/StorageBrowser/components/DataTable.tsx b/packages/react-storage/src/components/StorageBrowser/components/DataTable.tsx
index 9423c45a229..88a3ad6e014 100644
--- a/packages/react-storage/src/components/StorageBrowser/components/DataTable.tsx
+++ b/packages/react-storage/src/components/StorageBrowser/components/DataTable.tsx
@@ -16,6 +16,7 @@ export const TABLE_HEADER_CLASS_NAME = `${TABLE_CLASS_NAME}__header`;
 export const TABLE_HEADER_BUTTON_CLASS_NAME = `${TABLE_CLASS_NAME}__header__button`;
 export const TABLE_ROW_CLASS_NAME = `${TABLE_CLASS_NAME}__row`;
 export const TABLE_DATA_CLASS_NAME = `${TABLE_CLASS_NAME}__data`;
+export const TABLE_DATA_TEXT_CLASS_NAME = `${TABLE_CLASS_NAME}__data__text`;
 export const TABLE_DATA_BUTTON_CLASS = `${TABLE_CLASS_NAME}__data__button`;
 
 export interface ColumnHeaderItemProps
diff --git a/packages/react-storage/src/components/StorageBrowser/context/elements/defaults.tsx b/packages/react-storage/src/components/StorageBrowser/context/elements/defaults.tsx
index f262ecc2464..03aa3b2c23f 100644
--- a/packages/react-storage/src/components/StorageBrowser/context/elements/defaults.tsx
+++ b/packages/react-storage/src/components/StorageBrowser/context/elements/defaults.tsx
@@ -173,7 +173,7 @@ const TableHead = React.forwardRef<HTMLTableSectionElement, TableHeadProps>(
 
 const TableData = React.forwardRef<HTMLTableCellElement, TableCellProps>(
   function TableData(props, ref) {
-    return <_TableCell padding="xxxs" {...props} ref={ref} />;
+    return <_TableCell {...props} ref={ref} />;
   }
 );
 
@@ -185,7 +185,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(
 
 const TableHeader = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
   function TableHeader(props, ref) {
-    return <_TableCell padding="xxxs" as="th" {...props} ref={ref} />;
+    return <_TableCell as="th" {...props} ref={ref} />;
   }
 );
 
diff --git a/packages/react-storage/src/components/StorageBrowser/context/elements/index.ts b/packages/react-storage/src/components/StorageBrowser/context/elements/index.ts
index 914eb1716c1..6625d69283b 100644
--- a/packages/react-storage/src/components/StorageBrowser/context/elements/index.ts
+++ b/packages/react-storage/src/components/StorageBrowser/context/elements/index.ts
@@ -4,6 +4,7 @@ export {
   ButtonElementProps,
   MessageVariant,
   PaginateVariant,
+  SpanElement,
   StorageBrowserElements,
   TableBodyElement,
   TableDataElement,
diff --git a/packages/react-storage/src/styles/storage-browser.css b/packages/react-storage/src/styles/storage-browser.css
index ad7a2169b71..6d607e36dc5 100644
--- a/packages/react-storage/src/styles/storage-browser.css
+++ b/packages/react-storage/src/styles/storage-browser.css
@@ -1,5 +1,5 @@
 .storage-browser {
-  --storage-browser-gap-small: 0.375rem;
+  --storage-browser-gap-small: 0.3rem;
   --storage-browser-gap: 0.6rem;
   --storage-browser-status-error: hsl(0, 95%, 30%);
   --storage-browser-status-success: hsl(130, 33%, 37%);
@@ -161,6 +161,7 @@
 }
 
 .storage-browser__table__header {
+  padding: var(--storage-browser-gap-small);
   text-align: start;
 }
 .storage-browser__table__header__button {
@@ -169,17 +170,24 @@
   align-items: center;
 }
 
-.storage-browser__table__data__text,
+.storage-browser__table__data:not(:has(.storage-browser__table__data__button)),
 .storage-browser__table__data__button {
-  display: inline-block;
-  width: 100%;
-  padding: var(--storage-browser-gap-small);
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   text-align: start;
 }
 
+.storage-browser__table__data:not(:has(.storage-browser__table__data__button)) {
+  padding: var(--storage-browser-gap);
+}
+
+.storage-browser__table__data__button {
+  display: inline-block;
+  width: 100%;
+  padding: var(--storage-browser-gap-small);
+}
+
 .storage-browser__table__data__icon,
 .storage-browser__action-status {
   vertical-align: middle;