diff --git a/Website/app/metadata/page.tsx b/Website/app/metadata/page.tsx
index 5e5f38f9..e5b480c3 100644
--- a/Website/app/metadata/page.tsx
+++ b/Website/app/metadata/page.tsx
@@ -9,7 +9,7 @@ export default function Data() {
     <Suspense>
       <DatamodelViewProvider>
         <EntityFiltersProvider>
-          <Layout>
+          <Layout ignoreMargins>
             <DatamodelView />
           </Layout>
         </EntityFiltersProvider>
diff --git a/Website/components/datamodelview/List.tsx b/Website/components/datamodelview/List.tsx
index 9c3553a5..7c8eb1cf 100644
--- a/Website/components/datamodelview/List.tsx
+++ b/Website/components/datamodelview/List.tsx
@@ -9,7 +9,7 @@ import { updateURL } from "@/lib/url-utils";
 import { copyToClipboard, generateGroupLink } from "@/lib/clipboard-utils";
 import { useSnackbar } from "@/contexts/SnackbarContext";
 import { useEntityFilters } from "@/contexts/EntityFiltersContext";
-import { Box, CircularProgress, debounce, Tooltip } from '@mui/material';
+import { Box, CircularProgress, Container, debounce, Tooltip } from '@mui/material';
 
 interface IListProps {
     setCurrentIndex: (index: number) => void;
@@ -287,7 +287,15 @@ export const List = ({ setCurrentIndex, entityActiveTabs }: IListProps) => {
             <Box className={`absolute w-full h-full flex items-center justify-center z-[100] transition-opacity duration-300 ${loadingSection ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}>
                 <CircularProgress />
             </Box>
-            <div ref={parentRef} style={{ height: 'calc(100vh - var(--layout-header-desktop-height))', overflow: 'auto' }} className="relative no-scrollbar">
+            <div
+                ref={parentRef}
+                tabIndex={0}
+                role="region"
+                aria-label="Metadata tables"
+                style={{ height: 'calc(100vh - var(--layout-header-desktop-height))', overflow: 'auto' }}
+                className="relative no-scrollbar"
+            >
+                <Container maxWidth="xl">
 
                 {/* Show no results message when searching but no items found */}
                 {flatItems.length === 0 && search && search.length >= 3 && (
@@ -299,64 +307,65 @@ export const List = ({ setCurrentIndex, entityActiveTabs }: IListProps) => {
                     </div>
                 )}
 
-                {/* Virtualized list */}
-                <div
-                    className={`mx-6 my-6 transition-opacity duration-300 ${loadingSection ? 'opacity-0 pointer-events-none' : 'opacity-100'}`}
-                    style={{
-                        height: `${rowVirtualizer.getTotalSize()}px`,
-                        width: 'calc(100% - 48px)',
-                        position: 'relative',
-                        visibility: flatItems.length === 0 ? 'hidden' : 'visible'
-                    }}
-                >
-                    {rowVirtualizer.getVirtualItems().map((virtualItem) => {
-                        const item = flatItems[virtualItem.index];
-
-                        return (
-                            <div
-                                key={virtualItem.key}
-                                data-index={virtualItem.index}
-                                style={{
-                                    position: 'absolute',
-                                    top: 0,
-                                    left: 0,
-                                    width: '100%',
-                                    transform: `translateY(${virtualItem.start}px)`,
-                                }}
-                                ref={(el) => {
-                                    if (el) {
-                                        rowVirtualizer.measureElement(el);
-                                    }
-                                }}
-                            >
-                                {item.type === 'group' ? (
-                                    <div className="flex items-center py-6 my-4">
-                                        <div className="flex-1 h-0.5 bg-gray-200" />
-                                        <Tooltip title="Copy link to this group">
-                                            <div
-                                                className="px-4 text-md font-semibold text-gray-700 uppercase tracking-wide whitespace-nowrap cursor-pointer hover:text-blue-600 transition-colors"
-                                                onClick={() => handleCopyGroupLink(item.group.Name)}
-                                            >
-                                                {item.group.Name}
-                                            </div>
-                                        </Tooltip>
-                                        <div className="flex-1 h-0.5 bg-gray-200" />
-                                    </div>
-                                ) : (
-                                    <div className="text-sm">
-                                        <Section
-                                            entity={item.entity}
-                                            group={item.group}
-                                            search={search}
-                                            activeTab={entityActiveTabs.get(item.entity.SchemaName)}
-                                            highlightSecurityRole={selectedSecurityRoles.length > 0 && hasSecurityRoleAccess(item.entity)}
-                                        />
-                                    </div>
-                                )}
-                            </div>
-                        );
-                    })}
-                </div>
+                    {/* Virtualized list */}
+                    <div
+                        className={`mx-6 my-6 transition-opacity duration-300 ${loadingSection ? 'opacity-0 pointer-events-none' : 'opacity-100'}`}
+                        style={{
+                            height: `${rowVirtualizer.getTotalSize()}px`,
+                            width: 'calc(100% - 48px)',
+                            position: 'relative',
+                            visibility: flatItems.length === 0 ? 'hidden' : 'visible'
+                        }}
+                    >
+                        {rowVirtualizer.getVirtualItems().map((virtualItem) => {
+                            const item = flatItems[virtualItem.index];
+
+                            return (
+                                <div
+                                    key={virtualItem.key}
+                                    data-index={virtualItem.index}
+                                    style={{
+                                        position: 'absolute',
+                                        top: 0,
+                                        left: 0,
+                                        width: '100%',
+                                        transform: `translateY(${virtualItem.start}px)`,
+                                    }}
+                                    ref={(el) => {
+                                        if (el) {
+                                            rowVirtualizer.measureElement(el);
+                                        }
+                                    }}
+                                >
+                                    {item.type === 'group' ? (
+                                        <div className="flex items-center py-6 my-4">
+                                            <div className="flex-1 h-0.5 bg-gray-200" />
+                                            <Tooltip title="Copy link to this group">
+                                                <div
+                                                    className="px-4 text-md font-semibold text-gray-700 uppercase tracking-wide whitespace-nowrap cursor-pointer hover:text-blue-600 transition-colors"
+                                                    onClick={() => handleCopyGroupLink(item.group.Name)}
+                                                >
+                                                    {item.group.Name}
+                                                </div>
+                                            </Tooltip>
+                                            <div className="flex-1 h-0.5 bg-gray-200" />
+                                        </div>
+                                    ) : (
+                                        <div className="text-sm">
+                                            <Section
+                                                entity={item.entity}
+                                                group={item.group}
+                                                search={search}
+                                                activeTab={entityActiveTabs.get(item.entity.SchemaName)}
+                                                highlightSecurityRole={selectedSecurityRoles.length > 0 && hasSecurityRoleAccess(item.entity)}
+                                            />
+                                        </div>
+                                    )}
+                                </div>
+                            );
+                        })}
+                    </div>
+                </Container>
             </div>
         </>
     );