diff --git a/frontend/src/components/listing/EditListingModal.tsx b/frontend/src/components/listing/EditListingModal.tsx
deleted file mode 100644
index 72bbd013..00000000
--- a/frontend/src/components/listing/EditListingModal.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import RequireAuthentication from "components/auth/RequireAuthentication";
-import { Button } from "components/ui/Button/Button";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "components/ui/dialog";
-import ErrorMessage from "components/ui/ErrorMessage";
-import { Input, TextArea } from "components/ui/Input/Input";
-import { paths } from "gen/api";
-import { useAlertQueue } from "hooks/useAlertQueue";
-import { useAuthentication } from "hooks/useAuth";
-import { useEffect, useState } from "react";
-import { SubmitHandler, useForm } from "react-hook-form";
-import { NewListingSchema, NewListingType } from "types";
-
-// const dropZoneConfig = {
-//   maxFiles: 5,
-//   maxSize: 1024 * 1024 * 4,
-//   multiple: true,
-// };
-
-interface AddOrEditProps {
-  open: boolean;
-  listingId: string;
-  onClose: () => void;
-}
-
-type ListingResponse =
-  paths["/listings/{id}"]["get"]["responses"][200]["content"]["application/json"];
-
-const EditListingModal = ({ open, onClose, listingId }: AddOrEditProps) => {
-  // const [files, setFiles] = useState<File[] | null>(null);
-  const { addAlert, addErrorAlert } = useAlertQueue();
-  const auth = useAuthentication();
-  const [listing, setListing] = useState<ListingResponse | null>(null);
-
-  const {
-    register,
-    handleSubmit,
-    setValue,
-    formState: { errors },
-  } = useForm<NewListingType>({
-    resolver: zodResolver(NewListingSchema),
-  });
-
-  useEffect(() => {
-    const fetchListing = async () => {
-      const { data, error } = await auth.client.GET("/listings/{id}", {
-        params: {
-          path: { id: listingId },
-        },
-      });
-      if (error) {
-        addErrorAlert(error);
-      } else {
-        setListing(data);
-      }
-    };
-    fetchListing();
-  }, []);
-
-  useEffect(() => {
-    if (listing) {
-      setValue("name", listing.name);
-      setValue("description", listing.description ?? "");
-    }
-  }, [listing, setValue]);
-
-  const onSubmit: SubmitHandler<NewListingType> = async ({
-    name,
-    description,
-  }: NewListingType) => {
-    const { error } = await auth.client.PUT("/listings/edit/{id}", {
-      params: {
-        path: {
-          id: listingId,
-        },
-      },
-      body: {
-        name,
-        description,
-      },
-    });
-
-    if (error) {
-      addErrorAlert(error);
-    } else {
-      addAlert("Listing added successfully", "success");
-      onClose();
-      window.location.reload();
-    }
-  };
-
-  return (
-    <RequireAuthentication>
-      <Dialog open={open} onOpenChange={onClose}>
-        <DialogContent className="bg-gray-950">
-          <DialogHeader>
-            <DialogTitle className="text-white text-center py-2">
-              Add Robo Details
-            </DialogTitle>
-          </DialogHeader>
-          <form
-            onSubmit={handleSubmit(onSubmit)}
-            className="grid grid-cols-1 space-y-6"
-          >
-            {/* Name */}
-            <div>
-              <Input
-                placeholder="Name"
-                type="text"
-                {...register("name")}
-                className="text-white"
-                disabled={listing === null}
-              />
-              {errors?.name && (
-                <ErrorMessage>{errors?.name?.message}</ErrorMessage>
-              )}
-            </div>
-
-            {/* Description */}
-            <div className="relative">
-              <TextArea
-                placeholder="Description"
-                rows={4}
-                className="block p-2.5 text-white w-full text-sm rounded-lg borde focus:ring-blue-500 focus:border-blue-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                {...register("description")}
-                disabled={listing === null}
-              />
-              {errors?.description && (
-                <ErrorMessage>{errors?.description?.message}</ErrorMessage>
-              )}
-            </div>
-
-            {/* File Uploader */}
-            {/* <div>
-                <FileUploader
-                  value={files}
-                  onValueChange={setFiles}
-                  dropzoneOptions={dropZoneConfig}
-                  className="relative bg-background rounded-lg p-2"
-                >
-                  <FileInput className="outline-dashed outline-1 outline-white">
-                    <div className="flex items-center justify-center flex-col pt-3 pb-4 w-full ">
-                      <FileSvgDraw />
-                    </div>
-                  </FileInput>
-                  <FileUploaderContent>
-                    {files &&
-                      files.length > 0 &&
-                      files.map((file, index: number) => (
-                        <FileUploaderItem key={index} index={index}>
-                          <Paperclip className="h-4 w-4 stroke-current" />
-                          <span>{file.name}</span>
-                        </FileUploaderItem>
-                      ))}
-                  </FileUploaderContent>
-                </FileUploader>
-              </div> */}
-            <DialogFooter>
-              <Button
-                variant="primary"
-                type="submit"
-                className="text-white w-full"
-              >
-                Submit
-              </Button>
-            </DialogFooter>
-          </form>
-        </DialogContent>
-      </Dialog>
-    </RequireAuthentication>
-  );
-};
-
-export default EditListingModal;
diff --git a/frontend/src/components/ui/FileUpload.tsx b/frontend/src/components/listing/FileUpload.tsx
similarity index 93%
rename from frontend/src/components/ui/FileUpload.tsx
rename to frontend/src/components/listing/FileUpload.tsx
index 32414dc0..d68a83fd 100644
--- a/frontend/src/components/ui/FileUpload.tsx
+++ b/frontend/src/components/listing/FileUpload.tsx
@@ -1,3 +1,5 @@
+import { buttonVariants } from "components/ui/Button/Button";
+import { Input } from "components/ui/Input/Input";
 import { Trash2 as RemoveIcon } from "lucide-react";
 import {
   createContext,
@@ -17,8 +19,6 @@ import {
   useDropzone,
 } from "react-dropzone";
 import { cn } from "utils";
-import { buttonVariants } from "./Button/Button";
-import { Input } from "./Input/Input";
 
 type DirectionOptions = "rtl" | "ltr" | undefined;
 
@@ -351,3 +351,27 @@ export const FileInput = forwardRef<
 });
 
 FileInput.displayName = "FileInput";
+
+export const FileSubmitButton = forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ children, className, ...props }, ref) => {
+  const { isLOF } = useFileUpload();
+  return (
+    <button
+      ref={ref}
+      type="button"
+      disabled={!isLOF}
+      className={cn(
+        buttonVariants({ variant: "primary" }),
+        "w-full",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+});
+
+FileSubmitButton.displayName = "FileSubmitButton";
diff --git a/frontend/src/components/listing/ListingArtifacts.tsx b/frontend/src/components/listing/ListingArtifacts.tsx
index 062ca98a..40544ada 100644
--- a/frontend/src/components/listing/ListingArtifacts.tsx
+++ b/frontend/src/components/listing/ListingArtifacts.tsx
@@ -1,17 +1,106 @@
-import Carousel from "components/ui/Carousel";
+import {
+  FileInput,
+  FileSubmitButton,
+  FileUploader,
+  FileUploaderContent,
+  FileUploaderItem,
+} from "components/listing/FileUpload";
+import { Button } from "components/ui/Button/Button";
+import Spinner from "components/ui/Spinner";
 import { components } from "gen/api";
 import { useAlertQueue } from "hooks/useAlertQueue";
 import { useAuthentication } from "hooks/useAuth";
-import { useEffect, useState } from "react";
+import { Paperclip } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { FaFileUpload, FaTimes } from "react-icons/fa";
+
+interface ListingUploadProps {
+  listingId: string;
+  onUpload: (artifact: components["schemas"]["UploadArtifactResponse"]) => void;
+}
+
+const ListingUpload = (props: ListingUploadProps) => {
+  const { listingId, onUpload } = props;
+
+  const { addErrorAlert } = useAlertQueue();
+  const auth = useAuthentication();
+
+  const [files, setFiles] = useState<File[] | null>(null);
+  const [uploading, setUploading] = useState(false);
+
+  const onValueChange = useCallback(() => {
+    if (files === null) {
+      return;
+    }
+
+    setUploading(true);
+    (async () => {
+      await Promise.all(
+        files.map(async (file: File) => {
+          const { data, error } = await auth.api.upload(file, {
+            artifact_type: "image",
+            listing_id: listingId,
+          });
+
+          if (error) {
+            addErrorAlert(error);
+          } else {
+            setFiles(null);
+            onUpload(data);
+          }
+        }),
+      );
+      setUploading(false);
+    })();
+  }, [files, auth, listingId, addErrorAlert]);
+
+  return uploading ? (
+    <div className="my-4 w-full flex justify-center">
+      <Spinner />
+    </div>
+  ) : (
+    <FileUploader
+      value={files}
+      onValueChange={setFiles}
+      dropzoneOptions={{
+        accept: {
+          "image/*": [".jpg", ".jpeg", ".png", ".gif"],
+        },
+        maxSize: 4 * 1024 * 1024,
+      }}
+      className="relative bg-background rounded-lg pt-4 pb-2 px-2"
+    >
+      <FileInput className="outline-dashed outline-1 outline-white">
+        <div className="flex items-center justify-center flex-col pt-3 pb-4 w-full ">
+          <FaFileUpload />
+        </div>
+      </FileInput>
+      <FileUploaderContent>
+        {files &&
+          files.length > 0 &&
+          files.map((file, index: number) => (
+            <FileUploaderItem key={index} index={index}>
+              <Paperclip className="h-4 w-4 stroke-current" />
+              <span>{file.name}</span>
+            </FileUploaderItem>
+          ))}
+      </FileUploaderContent>
+      {files && files.length > 0 && (
+        <FileSubmitButton onClick={onValueChange}>
+          <span>Upload</span>
+        </FileSubmitButton>
+      )}
+    </FileUploader>
+  );
+};
 
 interface Props {
-  listing_id: string;
-  // TODO: If can edit, allow the user to add and delete artifacts.
+  listingId: string;
   edit: boolean;
 }
 
 const ListingArtifacts = (props: Props) => {
-  const { listing_id } = props;
+  const { listingId, edit } = props;
 
   const auth = useAuthentication();
   const { addErrorAlert } = useAlertQueue();
@@ -20,11 +109,17 @@ const ListingArtifacts = (props: Props) => {
     components["schemas"]["ListArtifactsResponse"] | null
   >(null);
 
+  const [deletingIds, setDeletingIds] = useState<string[]>([]);
+
   useEffect(() => {
+    if (artifacts !== null) {
+      return;
+    }
+
     const fetchArtifacts = async () => {
       const { data, error } = await auth.client.GET("/artifacts/{listing_id}", {
         params: {
-          path: { listing_id },
+          path: { listing_id: listingId },
         },
       });
 
@@ -35,22 +130,76 @@ const ListingArtifacts = (props: Props) => {
       }
     };
     fetchArtifacts();
-  }, [listing_id]);
-
-  if (artifacts != null && artifacts.artifacts.length > 0) {
-    return (
-      <Carousel
-        items={artifacts.artifacts.map((artifact) => {
-          return {
-            url: artifact.url,
-            caption: artifact.name,
-          };
-        })}
-      />
+  }, [listingId, artifacts]);
+
+  const onDelete = async (artifactId: string) => {
+    setDeletingIds([...deletingIds, artifactId]);
+
+    const { error } = await auth.client.DELETE(
+      "/artifacts/delete/{artifact_id}",
+      {
+        params: {
+          path: { artifact_id: artifactId },
+        },
+      },
     );
-  } else {
-    return <></>;
-  }
+
+    if (error) {
+      addErrorAlert(error);
+    } else {
+      setArtifacts({
+        artifacts: artifacts!.artifacts.filter(
+          (artifact) => artifact.artifact_id !== artifactId,
+        ),
+      });
+      setDeletingIds(deletingIds.filter((id) => id !== artifactId));
+    }
+  };
+
+  return artifacts === null ? (
+    <div className="my-4 w-full flex justify-center">
+      <Spinner />
+    </div>
+  ) : (
+    <div className="my-4">
+      {artifacts.artifacts.length > 0 && (
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 gap-2 mx-auto">
+          {artifacts.artifacts.map((artifact) => (
+            <div
+              key={artifact.artifact_id}
+              className="bg-background rounded-lg p-2 relative"
+            >
+              <img
+                src={artifact.url}
+                alt={artifact.name}
+                className="rounded-lg w-full"
+              />
+              {edit && (
+                <Button
+                  onClick={() => onDelete(artifact.artifact_id)}
+                  variant="destructive"
+                  className="absolute top-5 right-5 rounded-full"
+                  disabled={deletingIds.includes(artifact.artifact_id)}
+                >
+                  <FaTimes />
+                </Button>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+      {edit && (
+        <ListingUpload
+          listingId={listingId}
+          onUpload={(artifact) => {
+            setArtifacts({
+              artifacts: [...artifacts.artifacts, artifact.artifact],
+            });
+          }}
+        />
+      )}
+    </div>
+  );
 };
 
 export default ListingArtifacts;
diff --git a/frontend/src/components/listing/ListingBody.tsx b/frontend/src/components/listing/ListingBody.tsx
index 9b90698b..e86f5c5a 100644
--- a/frontend/src/components/listing/ListingBody.tsx
+++ b/frontend/src/components/listing/ListingBody.tsx
@@ -23,7 +23,7 @@ const ListingBody = (props: ListingBodyProps) => {
         child_ids={listing.child_ids}
         edit={listing.owner_is_user}
       />
-      <ListingArtifacts listing_id={listing.id} edit={listing.owner_is_user} />
+      <ListingArtifacts listingId={listing.id} edit={listing.owner_is_user} />
     </div>
   );
 };
diff --git a/frontend/src/components/ui/Carousel.tsx b/frontend/src/components/ui/Carousel.tsx
index efe80a0a..be47fea2 100644
--- a/frontend/src/components/ui/Carousel.tsx
+++ b/frontend/src/components/ui/Carousel.tsx
@@ -7,16 +7,18 @@ interface Props {
   }[];
 }
 
-const Carousel = (props: Props) => {
-  if (props.items.length === 0) {
+const Carousel = ({ items }: Props) => {
+  if (items.length === 0) {
     return <></>;
   }
 
+  console.log("items:", items);
+
   return (
     <div className="relative w-full">
       {/* Carousel wrapper */}
       <div className="relative h-56 overflow-hidden rounded-lg md:h-96">
-        {props.items.map(({ url, caption }, key) => (
+        {items.map(({ url, caption }, key) => (
           <div
             className="hidden duration-700 ease-in-out"
             data-carousel-item
@@ -33,7 +35,7 @@ const Carousel = (props: Props) => {
 
       {/* Slider indicators */}
       <div className="absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse">
-        {props.items.map((_, key) => (
+        {items.map((_, key) => (
           <button
             type="button"
             className="w-3 h-3 rounded-full"
diff --git a/frontend/src/components/ui/FileSvgDraw.tsx b/frontend/src/components/ui/FileSvgDraw.tsx
deleted file mode 100644
index 6ab1bb06..00000000
--- a/frontend/src/components/ui/FileSvgDraw.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-export const FileSvgDraw = () => {
-  return (
-    <>
-      <svg
-        className="w-8 h-8 mb-3 text-gray-500 dark:text-gray-400"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 20 16"
-      >
-        <path
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="2"
-          d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
-        />
-      </svg>
-      <p className="mb-1 text-sm text-gray-500 dark:text-gray-400">
-        <span className="font-semibold">Click to upload</span>
-        &nbsp; or drag and drop
-      </p>
-      <p className="text-xs text-gray-500 dark:text-gray-400">
-        SVG, PNG, JPG or GIF
-      </p>
-    </>
-  );
-};
diff --git a/frontend/src/gen/api.ts b/frontend/src/gen/api.ts
index 4d3c3e7c..5b548b80 100644
--- a/frontend/src/gen/api.ts
+++ b/frontend/src/gen/api.ts
@@ -525,8 +525,7 @@ export interface components {
         };
         /** UploadArtifactResponse */
         UploadArtifactResponse: {
-            /** Artifact Id */
-            artifact_id: string;
+            artifact: components["schemas"]["ListArtifactsItem"];
         };
         /** UserInfoResponse */
         UserInfoResponse: {
diff --git a/store/app/routers/artifacts.py b/store/app/routers/artifacts.py
index 900ce465..a8c197d9 100644
--- a/store/app/routers/artifacts.py
+++ b/store/app/routers/artifacts.py
@@ -103,7 +103,7 @@ class UploadArtifactRequest(BaseModel):
 
 
 class UploadArtifactResponse(BaseModel):
-    artifact_id: str
+    artifact: ListArtifactsItem
 
 
 @artifacts_router.post("/upload", response_model=UploadArtifactResponse)
@@ -134,7 +134,16 @@ async def upload(
         artifact_type=data.artifact_type,
         description=data.description,
     )
-    return UploadArtifactResponse(artifact_id=artifact.id)
+    return UploadArtifactResponse(
+        artifact=ListArtifactsItem(
+            artifact_id=artifact.id,
+            name=artifact.name,
+            artifact_type=artifact.artifact_type,
+            description=artifact.description,
+            timestamp=artifact.timestamp,
+            url=get_artifact_url(artifact.id, artifact.artifact_type),
+        ),
+    )
 
 
 class UpdateArtifactRequest(BaseModel):
diff --git a/tests/test_images.py b/tests/test_images.py
index 2c77fa7c..6e7165a6 100644
--- a/tests/test_images.py
+++ b/tests/test_images.py
@@ -43,8 +43,9 @@ async def test_user_auth_functions(app_client: AsyncClient, tmpdir: Path) -> Non
         headers=auth_headers,
     )
     assert response.status_code == status.HTTP_200_OK, response.json()
-    assert response.json()["artifact_id"] is not None
-    image_id = response.json()["artifact_id"]
+    data = response.json()
+    assert data["artifact"] is not None
+    image_id = data["artifact"]["artifact_id"]
 
     # Gets the URLs for various sizes of images.
     response = await app_client.get(f"/artifacts/url/image/{image_id}", params={"size": "small"})
diff --git a/tests/test_listings.py b/tests/test_listings.py
index f2b96169..914358a2 100644
--- a/tests/test_listings.py
+++ b/tests/test_listings.py
@@ -43,7 +43,8 @@ async def test_listings(app_client: AsyncClient, tmpdir: Path) -> None:
         files={"file": ("test.png", open(image_path, "rb"), "image/png"), "metadata": (None, data_json)},
     )
     assert response.status_code == status.HTTP_200_OK, response.json()
-    assert response.json()["artifact_id"] is not None
+    data = response.json()
+    assert data["artifact"]["artifact_id"] is not None
 
     # Searches for listings.
     response = await app_client.get(