diff --git a/frontend/package.json b/frontend/package.json
index 5bdb3ebb..f2908885 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -91,7 +91,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged"
+      "pre-commit": "p run prettier:fix"
     }
   },
   "lint-staged": {
diff --git a/frontend/src/components/journalPreview/TransactionPreview.tsx b/frontend/src/components/journalPreview/TransactionPreview.tsx
index 1469674b..46bf04d4 100644
--- a/frontend/src/components/journalPreview/TransactionPreview.tsx
+++ b/frontend/src/components/journalPreview/TransactionPreview.tsx
@@ -138,7 +138,7 @@ export default function TransactionPreview(props: Props) {
       )}
       <Box mx={1} my={4}>
         <Section title={`${props.data.metas.filter((meta) => meta.key === 'document').length} Documents`}>
-          <SimpleGrid cols={{ base: 4, md: 3, sm: 2, xs: 1 }} spacing={{ base: 'sm', md: 'md', sm: 'sm', xs: 'sm' }}>
+          <SimpleGrid cols={{ base: 1, md: 2, lg: 4 }} spacing={{ base: 'sm', md: 'md', sm: 'sm', xs: 'sm' }}>
             {props.data.metas
               .filter((meta) => meta.key === 'document')
               .map((meta, idx) => (
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 71019e04..0e300de7 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -17,6 +17,7 @@ import '@mantine/core/styles.css';
 import '@mantine/notifications/styles.css';
 import '@mantine/dates/styles.css';
 import '@mantine/charts/styles.css';
+import '@mantine/dropzone/styles.css';
 import { TransactionEditModal } from './components/modals/TransactionEditModal';
 import { MantineEmotionProvider } from '@mantine/emotion';