diff --git a/src/App.jsx b/src/App.jsx
index 3f8a3217d..1e26baf40 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -273,7 +273,10 @@ function App() {
           </div>
         )}
       </div>
-      <Dialog open={openNewUpload} onClose={() => setOpenNewUpload(false)}>
+      <Dialog 
+      open={openNewUpload} 
+      onClose={() => setOpenNewUpload(false)}
+      >
         <DialogTitle>New Upload</DialogTitle>
         <DialogContent>
           {!loadingPosts &&
@@ -317,8 +320,7 @@ function App() {
                 onChange={(e) => setPassword(e.target.value)}
               />
               <label for="file">Choose your profile pic</label>
-              <Input type="file" id="file" onChange={handleChange} />
-
+              <Input type="file" id="file" onChange={handleChange}/>
               <AnimatedButton
                 type="submit"
                 variant="contained"
diff --git a/src/components/ImgUpload.jsx b/src/components/ImgUpload.jsx
index 0082f7368..4a265273e 100644
--- a/src/components/ImgUpload.jsx
+++ b/src/components/ImgUpload.jsx
@@ -4,6 +4,8 @@ import firebase from "firebase/compat/app";
 import AnimatedButton from "./AnimatedButton";
 import { LinearProgress, TextField } from "@mui/material";
 import { useSnackbar } from "notistack";
+import "./imgPreview.css";
+
 
 function ImgUpload(props) {
   const [image, setImage] = useState(null);
@@ -11,13 +13,21 @@ function ImgUpload(props) {
   const [progress, setProgress] = useState(0);
   const [uploadingPost, setUploadingPost] = useState(false);
   const imgInput = useRef(null);
+  const [imagePreviews, setImagePreviews] = useState([]);
 
   const handleChange = (e) => {
+    let images = [];
+
     if (e.target.files?.length) {
       setImage(Array.from(e.target.files));
+      setImagePreviews(image);
+    }
+    for (let i = 0; i < e.target.files.length; i++) {
+      images.push(URL.createObjectURL(e.target.files[i]));
     }
-  };
 
+    setImagePreviews(images);
+  };
 
   const { enqueueSnackbar } = useSnackbar();
 
@@ -121,7 +131,21 @@ function ImgUpload(props) {
           ref={imgInput}
           disabled={uploadingPost}
         />
-      )} 
+      )}
+      {imagePreviews && (
+        <div>
+          {imagePreviews.map((img, i) => {
+            return (
+              <img 
+              id="imgPreview"
+              className="preview" 
+              src={img} 
+              alt={`image-${i}`}
+              key={i} />
+            );
+          })}
+        </div>
+      )}
       <TextField
         onChange={(e) => setCaption(e.target.value)}
         value={caption}
@@ -131,7 +155,7 @@ function ImgUpload(props) {
         rows={4}
         disabled={uploadingPost}
       />
-      <AnimatedButton onClick={handleUpload} loading={uploadingPost}> 
+      <AnimatedButton onClick={handleUpload} loading={uploadingPost}>
         Upload
       </AnimatedButton>
     </div>
diff --git a/src/components/imgPreview.css b/src/components/imgPreview.css
new file mode 100644
index 000000000..d9efac437
--- /dev/null
+++ b/src/components/imgPreview.css
@@ -0,0 +1,5 @@
+.preview{
+    width: 150px;
+    height: auto; 
+    padding: 50px;
+  }
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 07d726c60..82421709f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -210,3 +210,5 @@ div#picker {
   left: -7px;
   transform: scale(0.9);
 }
+
+