diff --git a/src/import/create/CreateDrop.tsx b/src/import/create/CreateDrop.tsx
index 7a2fbd99..066367d3 100644
--- a/src/import/create/CreateDrop.tsx
+++ b/src/import/create/CreateDrop.tsx
@@ -1,38 +1,32 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 import { BsFillCloudArrowUpFill as CloudIcon, BsCheckCircleFill as CheckIcon } from 'react-icons/bs';
-import { ProgressBar } from '../../ui';
 import { useDropzone } from "react-dropzone";
 import { useCustomToast } from "../../utils";
 
 interface CreateDropProps {
+    files: File[],
     onDrop: (files: File[]) => void;
 }
 
-const CreateDrop: React.FC<CreateDropProps> = ({ onDrop }) => {
+const CreateDrop: React.FC<CreateDropProps> = ({ files, onDrop }) => {
 
-    const {toastError} = useCustomToast()
-    const [numberOfLoadedFiles, setNumberOfLoadedFiles] = useState(0);
-    const [numberOfProcessedFiles, setNumberOfProcessedFiles] = useState(0);
-
-    const uploadComplete = numberOfLoadedFiles > 0 && numberOfLoadedFiles === numberOfProcessedFiles;
+    const { toastError } = useCustomToast()
 
     const { getRootProps, open } = useDropzone({
         multiple: true,
-        onDrop: async (files : File[]) => {
+        onDrop: async (files: File[]) => {
             if (files && files.length > 0) {
-                setNumberOfLoadedFiles(files.length);
-                setNumberOfProcessedFiles(files.length);
                 onDrop(files);
             }
         },
-        onDropRejected : (_fileRejection :any)=>{
+        onDropRejected: (_fileRejection: any) => {
             toastError("File format rejected (accepts png, jpeg or pdf)")
         },
         accept: {
             'image/png': [],
             'image/jpeg': [],
-            'application/pdf' : []
-          }
+            'application/pdf': []
+        }
     });
 
     const handleDragOver = useCallback(
@@ -48,7 +42,7 @@ const CreateDrop: React.FC<CreateDropProps> = ({ onDrop }) => {
             {...getRootProps({ onClick: open })}
             onDragOver={handleDragOver}
         >
-            {uploadComplete ? (
+            {files.length > 0 ? (
                 <CheckIcon
                     size={40}
                     className="text-success" />
@@ -57,12 +51,8 @@ const CreateDrop: React.FC<CreateDropProps> = ({ onDrop }) => {
                     size={40}
                     className={`text-primary`} />
             )}
-            <p className="text-primary">{uploadComplete ? numberOfLoadedFiles + ' files loaded' : 'Drag and drop image files here'}</p>
+            <p className="text-primary">{files.length > 0 ? files.length + ' files loaded' : 'Drag and drop image files here'}</p>
             <input type="file" style={{ display: 'none' }} />
-            {numberOfLoadedFiles > 0 && (
-                <ProgressBar
-                    progression={Math.round((numberOfProcessedFiles / numberOfLoadedFiles) * 100)} />
-            )}
         </div>
     );
 };
diff --git a/src/import/create/CreateForm.tsx b/src/import/create/CreateForm.tsx
index 5c02fcdc..79b3d57b 100644
--- a/src/import/create/CreateForm.tsx
+++ b/src/import/create/CreateForm.tsx
@@ -7,7 +7,7 @@ import { Colors } from "../../utils/enums";
 interface TagFormProps {
   title: string;
   className?: string;
-  onAddTag: (tag: { TagName: string; Value: string }) => void;
+  onAddTag: (tag: { name: string; value: string }) => void;
 }
 
 const CreateForm = ({ title, className, onAddTag }: TagFormProps) => {
@@ -17,7 +17,7 @@ const CreateForm = ({ title, className, onAddTag }: TagFormProps) => {
 
   const handleAddTag = () => {
     if (tag && value) {
-      onAddTag({ TagName: tag, Value: value });
+      onAddTag({ name: tag, value: value });
       setTag('');
       setValue('');
     }
diff --git a/src/import/create/CreateRoot.tsx b/src/import/create/CreateRoot.tsx
index 4bdfc5f1..8081609d 100644
--- a/src/import/create/CreateRoot.tsx
+++ b/src/import/create/CreateRoot.tsx
@@ -1,104 +1,84 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState } from 'react';
 
 import { Button } from '../../ui';
-import Model from '../../model/Model';
-import CreateTableSeries from './CreateTableSeries';
-import CreateTableStudy from './CreateTableStudy';
 import CreateForm from './CreateForm';
 import CreateDrop from './CreateDrop';
 import TagTable from './TagTable';
-import { Colors } from '../../utils';
+import { Colors, useCustomMutation, useCustomToast } from '../../utils';
+import { createDicom } from '../../services/instances';
 
 const CreateRoot: React.FC = () => {
-    const refModel = useRef<Model>(new Model());
-    const [currentStudyInstanceUID, setCurrentStudyInstanceUID] = useState<string | null>(null);
-    const [studiesData, setStudiesData] = useState<any[]>([]);
-    const [seriesData, setSeriesData] = useState<any[]>([]);
-    const [tags, setTags] = useState<{ TagName: string, Value: string }[]>([]);
-
+    const { toastError, toastSuccess } = useCustomToast()
+    const [tags, setTags] = useState<{ name: string, value: string }[]>([]);
+    const [files, setFiles] = useState<File[]>([])
+
+    const { mutate } = useCustomMutation(
+        ({ content, tags }) => createDicom(content, tags),
+        [[]],
+        {
+            onSuccess: () => {
+                toastSuccess('Dicom series created')
+            },
+            onError: () => {
+                toastError('Unable to create series')
+            }
+        }
+    )
 
-    const handleFilesUploaded = () => setStudiesData(refModel.current.getStudies());
 
-    const handleStudyClick = (studyInstanceUID: string) => {
-        setCurrentStudyInstanceUID(studyInstanceUID);
-        updateSeriesData(studyInstanceUID);
+    const handleFilesUploaded = (files: File[]) => {
+        setFiles(files)
     };
 
-    const updateSeriesData = (studyInstanceUID: string) => {
-        setSeriesData(refModel.current.getStudy(studyInstanceUID).getAllseries());
-    };
-
-    useEffect(() => {
-        if (currentStudyInstanceUID) {
-            updateSeriesData(currentStudyInstanceUID);
+    const handleCreateDicoms = async () => {
+        const content: string[] = []
+        for (const file of files) {
+            const dataURI = await readFileAsDataURL(file)
+            content.push(dataURI)
         }
-    }, [currentStudyInstanceUID]);
+        const formattedtags = {}
+        tags.forEach(tag => formattedtags[tag.name] = tag.value);
+        mutate({ content: content, tags: formattedtags })
+    }
 
-    const handleAddTag = (tag: { TagName: string, Value: string }) => {
+    const handleAddTag = (tag: { name: string, value: string }) => {
         setTags(prevTags => [...prevTags, tag]);
     };
 
-    const handleTagUpdate = (tagName: string, columnId: string, value: string) => {
-        setTags(prevTags =>
-            prevTags.map(tag =>
-                tag.TagName === tagName ? { ...tag, [columnId]: value } : tag
-            )
-        );
-    };
-
-    const handleTagDelete = (tagName: string) => {
-        setTags(prevTags => prevTags.filter(tag => tag.TagName !== tagName));
+    const handleTagDelete = (name: string) => {
+        setTags(prevTags => prevTags.filter(tag => tag.name !== name));
     };
 
-    const readFileAsDataURL = (file : File) => {
-        return new Promise((resolve) => {
+    const readFileAsDataURL = (file: File) => {
+        return new Promise<string>((resolve) => {
             var reader = new FileReader()
             reader.readAsDataURL(file)
             reader.onload = () => {
-                resolve(reader.result)
+                resolve(reader.result as string)
             }
         })
     }
-    
+
     return (
         <>
-
-
             <div className="w-full space-y-3 md:flex md:space-x-3 p-6">
-                <CreateDrop onDrop={handleFilesUploaded} />
-
-                <div className="md:w-1/2 md:flex-1">
-                    {studiesData.length > 0 && (
-                        <CreateTableStudy
-                            data={studiesData}
-                            selectedStudyInstanceUID={currentStudyInstanceUID}
-                            onStudyClick={handleStudyClick}
-                        />
-                    )}
-                </div>
-                <div className="md:w-1/2 md:flex-1">
-                    {seriesData.length > 0 && (
-                        <CreateTableSeries data={seriesData} />
-                    )}
-                </div>
+                <CreateDrop files={files} onDrop={handleFilesUploaded} />
             </div>
 
             <div className="flex flex-col justify-center border-indigo-100 shadow-inner p-3 bg-light">
                 <TagTable
                     data={tags}
-                    onDataUpdate={handleTagUpdate}
                     onDeleteTag={handleTagDelete}
                 />
                 <CreateForm
                     title="Define DICOM Tags"
                     onAddTag={handleAddTag}
                 />
-
-
             </div>
             <div className="flex bg-white justify-center p-3">
                 <Button
                     color={tags.length > 0 ? Colors.primary : Colors.almond}
+                    onClick={handleCreateDicoms}
                 >
                     Create Dicoms
                 </Button>
diff --git a/src/import/create/CreateTableSeries.tsx b/src/import/create/CreateTableSeries.tsx
deleted file mode 100644
index d6b4a25b..00000000
--- a/src/import/create/CreateTableSeries.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { useMemo } from "react";
-import { Table } from "../../ui";
-import { Colors } from "../../utils/enums";
-
-interface CreateTableSeriesProps {
-    data: object[];
-}
-
-const CreateTableSeries: React.FC<CreateTableSeriesProps> = ({ data = [] }) => {
-    const rows = useMemo(() => data, [data]);
-
-    const columns = useMemo(() => {
-        return [
-            {
-                accessorKey: "seriesDescription",
-                header: "Series Description"
-            },
-            {
-                accessorKey: "modality",
-                header: "Modality"
-            },
-            {
-                accessorKey: "seriesNumber",
-                header: "Series Number"
-            },
-            {
-                accessorFn: (originalRow: any) => originalRow.instances.length,
-                header: "Number Of Instances"
-            }
-        ];
-    }, []);
-
-    const getRowClasses = (row: any) => {
-        if (row.someCondition) {
-            return 'bg-primary text-white';
-        } else {
-            return 'bg-indigo-100';
-        }
-    };
-
-    return (
-        <Table
-            columns={columns}
-            data={rows}
-            headerTextSize='xs'
-            headerColor={Colors.white}
-            className="bg-gray-100"
-            enableColumnFilters
-            enableSorting
-            getRowClasses={(row) => getRowClasses(row)}
-        />
-    );
-};
-
-export default CreateTableSeries;
diff --git a/src/import/create/CreateTableStudy.tsx b/src/import/create/CreateTableStudy.tsx
deleted file mode 100644
index 406f09cd..00000000
--- a/src/import/create/CreateTableStudy.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React, { useMemo } from "react";
-import { Table } from "../../ui";
-import { Colors } from "../../utils/enums";
-import Study from "../../model/Study";
-
-interface CreateTableStudyProps {
-    data: Study[];
-    onStudyClick: (studyInstanceUID: string) => void;
-    selectedStudyInstanceUID: string | null;
-}
-
-const CreateTableStudy: React.FC<CreateTableStudyProps> = ({ data = [], onStudyClick, selectedStudyInstanceUID }) => {
-    const rows = useMemo(() => data, [data]);
-
-    const columns = useMemo(() => {
-        return [
-            {
-                accessorKey: "patient.patientId",
-                header: "Patient ID",
-                cell: (info: { getValue: () => any; }) => <span>{info.getValue() as string}</span>
-            },
-            {
-                accessorKey: "patient.patientName",
-                header: "Patient Name",
-                cell: (info: { getValue: () => any; }) => <span>{info.getValue() as string}</span>
-            },
-            {
-                accessorKey: "studyDescription",
-                header: "Study Description",
-                cell: (info: { getValue: () => any; }) => <span>{info.getValue() as string}</span>
-            },
-            {
-                accessorKey: "studyDate",
-                header: "Study Date",
-                cell: (info: { getValue: () => any; }) => <span>{info.getValue() as string}</span>
-            },
-            {
-                accessorKey: "accessionNumber",
-                header: "Accession Number",
-                cell: (info: { getValue: () => any; }) => <span>{info.getValue() as string}</span>
-            }
-        ];
-    }, []);
-
-    const getRowClasses = (row: Study) => {
-        if (row.studyInstanceUID === selectedStudyInstanceUID) {
-            return 'bg-primary hover:cursor-pointer';
-        } else {
-            return 'hover:bg-indigo-100 hover:cursor-pointer';
-        }
-    };
-
-    const handleRowClick = (study: Study) => {
-        if (study.studyInstanceUID !== undefined) {
-            onStudyClick(study.studyInstanceUID);
-        }
-    };
-
-    return (
-        <Table
-            columns={columns}
-            data={rows}
-            headerTextSize='xs'
-            headerColor={Colors.white}
-            className="bg-gray-100"
-            enableColumnFilters
-            enableSorting
-
-            getRowClasses={getRowClasses}
-            onRowClick={handleRowClick}
-        />
-    );
-};
-
-export default CreateTableStudy;
diff --git a/src/import/create/TagTable.tsx b/src/import/create/TagTable.tsx
index 5533314c..6a819f9c 100644
--- a/src/import/create/TagTable.tsx
+++ b/src/import/create/TagTable.tsx
@@ -4,32 +4,20 @@ import { ColumnDef } from '@tanstack/react-table';
 import DeleteButton from '../../ui/DeleteButton';
 import { Colors } from '../../utils';
 type TagTableProps = {
-    data: { TagName: string, Value: string }[];
-    onDataUpdate: (tagName: string, columnId: string, value: string) => void;
+    data: { name: string, value: string }[];
     onDeleteTag: (tagName: string) => void;
 };
 
-const TagTable: React.FC<TagTableProps> = ({ data, onDataUpdate, onDeleteTag }) => {
-    const handleInputChange = (tagName: string, columnId: string, event: React.ChangeEvent<HTMLInputElement>) => {
-        onDataUpdate(tagName, columnId, event.target.value);
-    };
+const TagTable: React.FC<TagTableProps> = ({ data, onDeleteTag }) => {
 
-    const columns: ColumnDef<{ TagName: string, Value: string }>[] = [
+    const columns: ColumnDef<{ name: string, value: string }>[] = [
         {
-            accessorKey: 'TagName',
+            accessorKey: 'name',
             header: 'Tag Name',
         },
         {
-            accessorKey: 'Value',
+            accessorKey: 'value',
             header: 'Value',
-            cell: ({ row }) => (
-                <Input
-                    type="text"
-                    value={row.original.Value}
-                    onChange={(event) => handleInputChange(row.original.TagName, 'Value', event)}
-                    className="form-control"
-                />
-            )
         },
         {
             id: 'delete',
@@ -37,7 +25,7 @@ const TagTable: React.FC<TagTableProps> = ({ data, onDataUpdate, onDeleteTag })
             cell: ({ row }) => (
                 <div className='w-full flex justify-center'>
                     <DeleteButton
-                        onClick={() => onDeleteTag(row.original.TagName)}
+                        onClick={() => onDeleteTag(row.original.name)}
                     />
                 </div>