diff --git a/apps/nextjs/src/components/workshop/workshop-css-import-button.tsx b/apps/nextjs/src/components/workshop/workshop-css-import-button.tsx
index 89ab01c59..0c79f728f 100644
--- a/apps/nextjs/src/components/workshop/workshop-css-import-button.tsx
+++ b/apps/nextjs/src/components/workshop/workshop-css-import-button.tsx
@@ -4,6 +4,8 @@ import { useState } from "react";
 import { Button, Modal } from "@mantine/core";
 import { IconDownload } from "@tabler/icons-react";
 
+import { modalSizeSelect } from "@homarr/modals";
+
 import { WorkshopBrowser } from "./workshop-browser";
 
 export function WorkshopCssImportButton({ onImport }: { onImport(css: string): void }) {
@@ -14,7 +16,7 @@ export function WorkshopCssImportButton({ onImport }: { onImport(css: string): v
       <Button type="button" variant="light" leftSection={<IconDownload size={16} />} onClick={() => setOpened(true)}>
         Import from Workshop
       </Button>
-      <Modal opened={opened} onClose={() => setOpened(false)} title="Import Custom CSS" size="xl">
+      <Modal opened={opened} onClose={() => setOpened(false)} title="Import Custom CSS" size={modalSizeSelect}>
         <WorkshopBrowser
           type="customCss"
           onUseCss={(css) => {