diff --git a/frontend/src/components/CommitCard.tsx b/frontend/src/components/CommitCard.tsx
index ab2e2443..ef3dfe51 100644
--- a/frontend/src/components/CommitCard.tsx
+++ b/frontend/src/components/CommitCard.tsx
@@ -16,7 +16,7 @@ import { Card, CardProps } from "react-daisyui";
 export type ICommitCardProps = CardProps & {
     commit: ICommit;
     onActivate?: (commit: ICommit) => void;
-    onDeleteRequested?: (id: string) => void;
+    onDeleteRequested?: (section: ISection) => void;
 };
 
 export default (props: ICommitCardProps) => {
@@ -33,14 +33,17 @@ export default (props: ICommitCardProps) => {
                     onClick={(e) => {
                         e.stopPropagation();
                         if (props.onDeleteRequested)
-                            return props.onDeleteRequested(props.commit.id);
+                            return props.onDeleteRequested(
+                                props.commit.section
+                            );
                     }}
                     className="px-1"
                     icon={faTrashCan}
                 />
             </div>
             <Card.Body className="font-bold">
-                {props.commit.packages.length} packages
+                {props.commit.packages.length} package
+                {props.commit.packages.length == 1 ? "" : "s"}
             </Card.Body>
             <span className="space-x-4">
                 <FontAwesomeIcon className="px-1" icon={faCodeBranch} />
diff --git a/frontend/src/components/CommitDrawer.tsx b/frontend/src/components/CommitDrawer.tsx
new file mode 100644
index 00000000..3fb5040f
--- /dev/null
+++ b/frontend/src/components/CommitDrawer.tsx
@@ -0,0 +1,54 @@
+import { Button, Drawer, DrawerProps, Menu } from "react-daisyui";
+import CommitCard from "./CommitCard";
+
+type CommitDrawerProps = DrawerProps & {
+    isOpen: boolean;
+    commits: ICommit[];
+    onPush: (commits: ICommit[]) => void;
+    onCardActivate: (commit: ICommit) => void;
+    onCardDelete: (section: ISection) => void;
+};
+
+export default (props: CommitDrawerProps) => {
+    return (
+        <Drawer
+            {...props}
+            open={props.commits.length > 0 && props.isOpen}
+            contentClassName="fm-content h-full"
+            className="h-full"
+            side={
+                <div>
+                    <label
+                        htmlFor="my-drawer-2"
+                        className="drawer-overlay"
+                    ></label>
+                    <Menu className="h-screen p-4 w-100 space-y-4 bg-accent">
+                        <li className="text-3xl font-bold text-white">
+                            Pending commits
+                        </li>
+                        {props.commits?.map((value) => {
+                            return (
+                                <Menu.Item>
+                                    <CommitCard
+                                        onActivate={props.onCardActivate}
+                                        commit={value}
+                                        onDeleteRequested={props.onCardDelete}
+                                    />
+                                </Menu.Item>
+                            );
+                        })}
+                        <div className="grow"></div>
+                        <Button
+                            color="ghost"
+                            className="text-white"
+                            onClick={(e) => props.onPush(props.commits)}
+                        >
+                            Push commits
+                        </Button>
+                    </Menu>
+                </div>
+            }
+            end={true}
+        />
+    );
+};
diff --git a/frontend/src/components/CommitModal.tsx b/frontend/src/components/CommitModal.tsx
index 5c5f573f..9ab654a0 100644
--- a/frontend/src/components/CommitModal.tsx
+++ b/frontend/src/components/CommitModal.tsx
@@ -13,34 +13,32 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
-import * as uuid from "uuid";
 import { forwardRef, useCallback, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import SectionSelect from "./SectionSelect";
+import Dropzone from "react-dropzone";
 
 export type CommitModalProps = ModalProps & {
     isNew?: boolean;
     commit?: ICommit;
     sections?: ISection[];
     onCommitSubmit?: (commit: ICommit) => void;
-    onCommitDelete?: (id: string) => void;
+    onCommitDelete?: (section: ISection) => void;
+    onPackageDrop?: (files: File[]) => void;
 };
 
 export default forwardRef<HTMLDialogElement, CommitModalProps>(
     (props: CommitModalProps, ref) => {
         const [commit, setCommit] = useState<ICommit>(
-            props.commit || { id: uuid.v4(), section: {}, packages: [] }
+            props.commit || { section: {}, packages: [] }
         );
 
         useEffect(
-            () =>
-                setCommit(
-                    props.commit || { id: uuid.v4(), section: {}, packages: [] }
-                ),
+            () => setCommit(props.commit || { section: {}, packages: [] }),
             [props.commit]
         );
 
-        const { id, section, packages } = commit;
+        const { section, packages } = commit;
 
         const { branch, repository, architecture } = section;
 
@@ -55,57 +53,66 @@ export default forwardRef<HTMLDialogElement, CommitModalProps>(
                 <Modal.Header className="text-3xl font-bold">
                     Commit
                 </Modal.Header>
-                <Modal.Body>
-                    <Form>
-                        <Form.Label title="Section" />
-                        <SectionSelect
-                            sections={props.sections || []}
-                            selectedSection={section}
-                            className="w-full"
-                            onSelected={(section) => {
-                                setCommit({ ...commit, section: section });
-                            }}
-                        />
-                        <Form.Label title="Packages" />
+                <Dropzone noClick={true} onDrop={props.onPackageDrop}>
+                    {({ getRootProps, getInputProps }) => (
+                        <Modal.Body {...getRootProps()}>
+                            <input {...getInputProps()} />
+                            <Form>
+                                <Form.Label title="Section" />
+                                <SectionSelect
+                                    sections={props.sections || []}
+                                    selectedSection={section}
+                                    className="w-full"
+                                    onSelected={(section) => {
+                                        setCommit({
+                                            ...commit,
+                                            section: section
+                                        });
+                                    }}
+                                />
+                                <Form.Label title="Packages" />
 
-                        <Table
-                            zebra={true}
-                            size="xs"
-                            className="overflow-x-auto"
-                        >
-                            <Table.Head>
-                                <span>Name</span>
-                                <span />
-                            </Table.Head>
-                            <Table.Body>
-                                {props.commit?.packages.map((value) => {
-                                    return (
-                                        <Table.Row>
-                                            <span className="flex items-center">
-                                                <FontAwesomeIcon
-                                                    icon={faCube}
-                                                    className="px-2 max-h-6"
-                                                />
-                                                {value.signatureFile !==
-                                                    undefined && (
-                                                    <FontAwesomeIcon
-                                                        icon={faSignature}
-                                                        color="green"
-                                                        className="px-2 max-h-6"
-                                                    />
-                                                )}
-
-                                                {value.name}
-                                            </span>
-                                            <span></span>
-                                        </Table.Row>
-                                    );
-                                })}
-                            </Table.Body>
-                        </Table>
-                    </Form>
-                </Modal.Body>
+                                <Table
+                                    zebra={true}
+                                    size="xs"
+                                    className="overflow-x-auto"
+                                >
+                                    <Table.Head>
+                                        <span>Name</span>
+                                        <span />
+                                    </Table.Head>
+                                    <Table.Body>
+                                        {props.commit?.packages.map((value) => {
+                                            return (
+                                                <Table.Row>
+                                                    <span className="flex items-center">
+                                                        <FontAwesomeIcon
+                                                            icon={faCube}
+                                                            className="px-2 max-h-6"
+                                                        />
+                                                        {value.signatureFile !==
+                                                            undefined && (
+                                                            <FontAwesomeIcon
+                                                                icon={
+                                                                    faSignature
+                                                                }
+                                                                color="green"
+                                                                className="px-2 max-h-6"
+                                                            />
+                                                        )}
 
+                                                        {value.name}
+                                                    </span>
+                                                    <span></span>
+                                                </Table.Row>
+                                            );
+                                        })}
+                                    </Table.Body>
+                                </Table>
+                            </Form>
+                        </Modal.Body>
+                    )}
+                </Dropzone>
                 <Form className="mt-6">
                     <span className="flex space-x-4 justify-end">
                         {props.isNew && (
@@ -118,7 +125,7 @@ export default forwardRef<HTMLDialogElement, CommitModalProps>(
                                 }
                                 onClick={(e) => {
                                     if (props.onCommitDelete)
-                                        props.onCommitDelete(commit.id);
+                                        props.onCommitDelete(commit.section);
                                 }}
                                 type="button"
                                 color="error"
diff --git a/frontend/src/definitions/commit.d.ts b/frontend/src/definitions/commit.d.ts
index 3a39c60d..395f8b40 100644
--- a/frontend/src/definitions/commit.d.ts
+++ b/frontend/src/definitions/commit.d.ts
@@ -5,7 +5,6 @@
  *
  */
 interface ICommit {
-    id: string;
     section: ISection;
     packages: IPackageUpload[];
 }
diff --git a/frontend/src/pages/FileViewPage.tsx b/frontend/src/pages/FileViewPage.tsx
index fa2cf302..59f1968e 100644
--- a/frontend/src/pages/FileViewPage.tsx
+++ b/frontend/src/pages/FileViewPage.tsx
@@ -11,8 +11,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { usePushCommitsHandler, useSections } from "../hooks/BxtHooks";
 import Dropzone from "react-dropzone";
 import CommitModal from "../components/CommitModal";
-import { Button, Drawer, Menu } from "react-daisyui";
-import CommitCard from "../components/CommitCard";
+import { Button } from "react-daisyui";
 import { useFilesFromSections } from "../hooks/BxtFsHooks";
 import { toast } from "react-toastify";
 import SnapshotModal, {
@@ -21,6 +20,9 @@ import SnapshotModal, {
 import { SnapshotAction, SnapToAction } from "../components/SnapshotAction";
 import PackageModal, { PackageModalProps } from "../components/PackageModal";
 import _ from "lodash";
+import CommitDrawer from "../components/CommitDrawer";
+import { faCodeCommit } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
     useFileActionHandler,
     useFolderChainForPath
@@ -43,6 +45,18 @@ export default (props: any) => {
     useEffect(() => updateFiles(sections, path), [sections, path]);
 
     const [modalCommit, setModalCommit] = useState<ICommit>();
+
+    const appendModalCommit = useCallback(
+        (commit: ICommit) => {
+            if (modalCommit) {
+                setModalCommit({
+                    ...modalCommit,
+                    packages: [...modalCommit?.packages, ...commit.packages]
+                });
+            }
+        },
+        [modalCommit, setModalCommit]
+    );
     const commitModalRef = useRef<HTMLDialogElement>(null);
 
     const [commits, setCommits] = useState<ICommit[]>([]);
@@ -53,6 +67,8 @@ export default (props: any) => {
     const snapshotModalRef = useRef<HTMLDialogElement>(null);
     const packageModalRef = useRef<HTMLDialogElement>(null);
 
+    const [drawerOpened, setDrawerOpened] = useState<boolean>(false);
+
     const [snapshotModalProps, setSnapshotModalProps] =
         useState<ISnapshotModalProps>({
             sections: sections
@@ -79,15 +95,42 @@ export default (props: any) => {
     const openModalWithCommitHandler = (isNew: boolean) => {
         return (commit: ICommit) => {
             setIsCommitInModalNew(isNew);
+
+            const currentCommit = commits.find((value) =>
+                _.isEqual(value.section, commit.section)
+            );
+            if (currentCommit) {
+                commit.packages = [
+                    ...currentCommit.packages,
+                    ...commit.packages
+                ];
+            }
             setModalCommit(commit);
             commitModalRef.current?.showModal();
         };
     };
 
-    const deleteCommitById = (id: string) => {
+    const deleteCommitBySection = (section: ISection) => {
+        setCommits(
+            commits.filter((value) => _.isEqual(value.section, section))
+        );
+        commitModalRef.current?.close();
         toast.success("Deleted!");
-        setCommits(commits.filter((value) => value.id != id));
+    };
+
+    const appendCommit = (commit: ICommit) => {
+        const currentCommit = commits.find((value) =>
+            _.isEqual(value.section, commit.section)
+        );
+        const currentCommits = commits.filter(
+            (value) => !_.isEqual(value.section, commit.section)
+        );
+        if (currentCommit) {
+            commit.packages = [...currentCommit.packages, ...commit.packages];
+        }
+        setCommits([...currentCommits, commit]);
         commitModalRef.current?.close();
+        toast.success("Committed!");
     };
 
     const openSnapshotModalWithBranchHandler = useCallback(
@@ -139,9 +182,18 @@ export default (props: any) => {
                 commit={modalCommit}
                 onCommitSubmit={(commit) => {
                     commitModalRef.current?.close();
-                    setCommits([...commits, commit]);
+                    appendCommit(commit);
                 }}
-                onCommitDelete={deleteCommitById}
+                onCommitDelete={deleteCommitBySection}
+                onPackageDrop={usePackageDropHandler(
+                    [
+                        "root",
+                        modalCommit?.section?.branch!,
+                        modalCommit?.section?.repository!,
+                        modalCommit?.section?.architecture!
+                    ],
+                    appendModalCommit
+                )}
             />
             <SnapshotModal
                 ref={snapshotModalRef}
@@ -154,47 +206,17 @@ export default (props: any) => {
                 backdrop={true}
             />
 
-            <Drawer
-                open={commits.length > 0}
-                contentClassName="fm-content h-full"
-                className="h-full"
-                side={
-                    <div>
-                        <label
-                            htmlFor="my-drawer-2"
-                            className="drawer-overlay"
-                        ></label>
-                        <Menu className="h-screen p-4 w-100 space-y-4 bg-sky-700">
-                            <li className="text-3xl font-bold text-white">
-                                Pending commits
-                            </li>
-                            {commits?.map((value) => {
-                                return (
-                                    <Menu.Item>
-                                        <CommitCard
-                                            onActivate={openModalWithCommitHandler(
-                                                true
-                                            )}
-                                            commit={value}
-                                            onDeleteRequested={deleteCommitById}
-                                        />
-                                    </Menu.Item>
-                                );
-                            })}
-                            <div className="grow"></div>
-                            <Button
-                                color="ghost"
-                                onClick={usePushCommitsHandler(commits, () => {
-                                    setCommits([]);
-                                    updateSections();
-                                })}
-                            >
-                                Push commits
-                            </Button>
-                        </Menu>
-                    </div>
-                }
-                end={true}
+            <CommitDrawer
+                isOpen={drawerOpened}
+                commits={commits}
+                onPush={usePushCommitsHandler(commits, () => {
+                    setCommits([]);
+                    updateSections();
+                })}
+                onCardActivate={openModalWithCommitHandler(true)}
+                onCardDelete={deleteCommitBySection}
+                side={true}
+                onClickOverlay={() => setDrawerOpened(false)}
             >
                 <Dropzone
                     noClick={true}
@@ -220,7 +242,18 @@ export default (props: any) => {
                         </div>
                     )}
                 </Dropzone>
-            </Drawer>
+                {commits.length > 0 && (
+                    <Button
+                        color="accent"
+                        className="fixed bottom-6 right-6"
+                        onClick={() => setDrawerOpened(true)}
+                    >
+                        <FontAwesomeIcon icon={faCodeCommit} />
+                        {commits.length} commit{commits.length == 1 ? "" : "s"}{" "}
+                        pending
+                    </Button>
+                )}
+            </CommitDrawer>
         </div>
     );
 };