diff --git a/CHANGELOG.md b/CHANGELOG.md
index 39f0ecbb..1365045e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
 ### 🎨 Enhancements
 
 - [#727](https://github.com/estruyf/vscode-front-matter/pull/727): Updated Japanese translations thanks to [mayumihara](https://github.com/mayumih387)
+- [#737](https://github.com/estruyf/vscode-front-matter/issues/737): Optimize the grid layout of the content and media dashboards
 
 ### ⚡️ Optimizations
 
diff --git a/src/dashboardWebView/components/Contents/Contents.tsx b/src/dashboardWebView/components/Contents/Contents.tsx
index ce6d7101..3ac3ada3 100644
--- a/src/dashboardWebView/components/Contents/Contents.tsx
+++ b/src/dashboardWebView/components/Contents/Contents.tsx
@@ -34,7 +34,7 @@ export const Contents: React.FunctionComponent<IContentsProps> = ({
 
   return (
     <PageLayout folders={pageFolders} totalPages={pageItems.length}>
-      <div className="w-full flex-grow max-w-full mx-auto pb-6 px-4">
+      <div className="w-full flex-grow max-w-full mx-auto pb-6">
         {loading ? <Spinner /> : <Overview pages={pageItems} settings={settings} />}
       </div>
 
diff --git a/src/dashboardWebView/components/Contents/List.tsx b/src/dashboardWebView/components/Contents/List.tsx
index 31aafc37..d862d5ac 100644
--- a/src/dashboardWebView/components/Contents/List.tsx
+++ b/src/dashboardWebView/components/Contents/List.tsx
@@ -16,7 +16,7 @@ export const List: React.FunctionComponent<IListProps> = ({
 
   let className = '';
   if (view === DashboardViewType.Grid) {
-    className = `grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4`;
+    className = `grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5 gap-4`;
   } else if (view === DashboardViewType.List) {
     className = `-mx-4`;
   }
diff --git a/src/dashboardWebView/components/Layout/PageLayout.tsx b/src/dashboardWebView/components/Layout/PageLayout.tsx
index 5c92d5bd..93d24a72 100644
--- a/src/dashboardWebView/components/Layout/PageLayout.tsx
+++ b/src/dashboardWebView/components/Layout/PageLayout.tsx
@@ -26,7 +26,7 @@ export const PageLayout: React.FunctionComponent<IPageLayoutProps> = ({
       <div
         className={
           contentClass ||
-          'w-full flex justify-between flex-col flex-grow mx-auto pt-6 px-4 max-w-full xl:max-w-[90%]'
+          'w-full flex justify-between flex-col flex-grow mx-auto pt-6 px-4 max-w-full'
         }
       >
         {children}
diff --git a/src/dashboardWebView/components/Media/List.tsx b/src/dashboardWebView/components/Media/List.tsx
index 2df77458..2b88532b 100644
--- a/src/dashboardWebView/components/Media/List.tsx
+++ b/src/dashboardWebView/components/Media/List.tsx
@@ -13,7 +13,7 @@ export const List: React.FunctionComponent<IListProps> = ({
   return (
     <ul
       role="list"
-      className={`grid gap-4 ${gapClass} grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5`}
+      className={`grid gap-4 ${gapClass} grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5`}
     >
       {children}
     </ul>
diff --git a/src/localization/localization.enum.ts b/src/localization/localization.enum.ts
index 452cd2eb..54e508de 100644
--- a/src/localization/localization.enum.ts
+++ b/src/localization/localization.enum.ts
@@ -700,7 +700,7 @@ export enum LocalizationKey {
    */
   dashboardMediaMediaFolderDefault = 'dashboard.media.media.folder.default',
   /**
-   * No media files to show. You can drag & drop new files by holding your [shift] key.
+   * No media files to show. You can drag&drop new files by holding your [shift] key.
    */
   dashboardMediaMediaPlaceholder = 'dashboard.media.media.placeholder',
   /**