diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index c6f605cb..07b6a706 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @baseapp-frontend/components
 
+## 0.0.17
+
+### Patch Changes
+
+Updated dependencies
+  - @baseapp-frontend/design-system@0.0.17
+
 ## 0.0.16
 
 ### Patch Changes
diff --git a/packages/components/package.json b/packages/components/package.json
index 5d6bc9b1..91d6dc64 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/components",
   "description": "BaseApp components modules such as comments, notifications, messages, and more.",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "main": "./index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": false,
diff --git a/packages/design-system/CHANGELOG.md b/packages/design-system/CHANGELOG.md
index 453b542c..7ef1c6c7 100644
--- a/packages/design-system/CHANGELOG.md
+++ b/packages/design-system/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @baseapp-frontend/design-system
 
+## 0.0.18
+
+### Patch Changes
+
+- Impose file size limits on Dropzones
+
 ## 0.0.17
 
 ### Patch Changes
diff --git a/packages/design-system/components/Dropzone/index.tsx b/packages/design-system/components/Dropzone/index.tsx
index 13d9f53c..4448cbfe 100644
--- a/packages/design-system/components/Dropzone/index.tsx
+++ b/packages/design-system/components/Dropzone/index.tsx
@@ -1,6 +1,6 @@
-import { FC, useState } from 'react'
+import React, { FC, useState } from 'react'
 
-import { getImageString } from '@baseapp-frontend/utils'
+import { getImageString, useNotification } from '@baseapp-frontend/utils'
 
 import { Box, Button, Card, Typography } from '@mui/material'
 import { useDropzone } from 'react-dropzone'
@@ -20,15 +20,21 @@ const Dropzone: FC<DropzoneProps> = ({
   onSelect,
   onRemove,
   actionText = 'Upload Image',
-  subTitle = 'Max. File Size: 15MB',
+  maxFileSize = 15,
+  subTitle = `Max. File Size: ${maxFileSize}MB`,
   DropzoneOptions,
 }) => {
   const [files, setFiles] = useState<string | undefined>(storedImg)
+  const { sendToast } = useNotification()
 
   const { open, getRootProps, getInputProps, isFocused, isDragAccept, isDragReject } = useDropzone({
     accept,
     onDrop: async (acceptedFiles: any) => {
       if (acceptedFiles.length === 0) return
+      if (acceptedFiles[0].size > maxFileSize * 1024 * 1024) {
+        sendToast(`This file is too large (max ${maxFileSize} MB).`, { type: 'error' })
+        return
+      }
       const imgString = await getImageString(acceptedFiles[0])
       if (!imgString) return
       setFiles(imgString)
@@ -45,20 +51,23 @@ const Dropzone: FC<DropzoneProps> = ({
   const renderContent = () => {
     if (files)
       return (
-        <Card>
-          <Box p={2} display="flex" flexDirection="column" alignItems="center">
-            <img
-              key={files}
-              src={files}
-              alt="preview"
-              style={{ maxHeight: '200px', maxWidth: '100%' }}
-            />
-          </Box>
-        </Card>
+        <>
+          <input {...getInputProps()} />
+          <Card>
+            <Box p={2} display="flex" flexDirection="column" alignItems="center">
+              <img
+                key={files}
+                src={files}
+                alt="preview"
+                style={{ maxHeight: '200px', maxWidth: '100%' }}
+              />
+            </Box>
+          </Card>
+        </>
       )
 
     return (
-      <div className="w-full container max-w-none">
+      <div className="container w-full max-w-none">
         <InputContainer {...getRootProps({ isFocused, isDragAccept, isDragReject })}>
           <input {...getInputProps()} />
           {isDragReject ? (
diff --git a/packages/design-system/components/Dropzone/types.ts b/packages/design-system/components/Dropzone/types.ts
index b46a7207..b1ed0b89 100644
--- a/packages/design-system/components/Dropzone/types.ts
+++ b/packages/design-system/components/Dropzone/types.ts
@@ -15,5 +15,6 @@ export interface DropzoneProps {
   onRemove: () => void
   actionText?: string
   subTitle?: string
+  maxFileSize?: number
   DropzoneOptions?: Partial<DropzoneOptions>
 }
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index c9b0dfaa..aa9a5dfe 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/design-system",
   "description": "Design System components and configurations.",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "./index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": false,