diff --git a/.env.example b/.env.example
index 1f41ba5..7f6281d 100644
--- a/.env.example
+++ b/.env.example
@@ -1,4 +1,6 @@
 APPWRITE_FUNCTION_API_KEY=
 # IMPORTANT If you're running the website inside docker and your Appwrite instance runs on localhost host,
 # use host.docker.internal instead of localhost
-APPWRITE_HOST=http://appwrite/v1
\ No newline at end of file
+APPWRITE_HOST=http://host.docker.internal/v1
+# Must be the same as in the _APP_STORAGE_LIMIT in the Appwrite env file
+NEXT_PUBLIC_MAX_FILE_SIZE=300000000
\ No newline at end of file
diff --git a/README.md b/README.md
index 863c2da..6523ae3 100644
--- a/README.md
+++ b/README.md
@@ -37,6 +37,7 @@ To set up the frontend of Pingvin Share follow these steps.
 2.  Rename the `.env.example` file to `.env`
 3.  Paste the key in the `.env` file
 4.  Change `APPWRITE_HOST` in the `.env` file to the host where your Appwrite instance runs
+5.  Change `NEXT_PUBLIC_MAX_FILE_SIZE` in the `.env` file to the max file size limit you want
 
 Start the frontend:
 
diff --git a/src/components/upload/Dropzone.tsx b/src/components/upload/Dropzone.tsx
index 69a1a65..8dafd91 100644
--- a/src/components/upload/Dropzone.tsx
+++ b/src/components/upload/Dropzone.tsx
@@ -10,6 +10,7 @@ import {
 import { Dropzone as MantineDropzone, DropzoneStatus } from "@mantine/dropzone";
 import React, { Dispatch, ForwardedRef, SetStateAction, useRef } from "react";
 import { CloudUpload, Upload } from "tabler-icons-react";
+import toast from "../../utils/toast.util";
 
 const useStyles = createStyles((theme) => ({
   wrapper: {
@@ -57,6 +58,10 @@ const Dropzone = ({
   return (
     <div className={classes.wrapper}>
       <MantineDropzone
+        maxSize={parseInt(process.env["NEXT_PUBLIC_MAX_FILE_SIZE"] as string)}
+        onReject={(e) => {
+          toast.error(e[0].errors[0].message);
+        }}
         disabled={isUploading}
         openRef={openRef as ForwardedRef<() => void>}
         onDrop={(files) => {