diff --git a/src/pages/playlist/content.jsx b/src/pages/playlist/content.jsx
index b9e9a40..b600c14 100644
--- a/src/pages/playlist/content.jsx
+++ b/src/pages/playlist/content.jsx
@@ -90,13 +90,10 @@ const Content = ({ form, playlistId }) => {
         <Draggable key={index} index={index} draggableId={index.toString()}>
             {(provided) => (
                 <Group ref={provided.innerRef} mt="xs" {...provided.draggableProps} position="center">
-                    <Center {...provided.dragHandleProps}>
-                        <IconGripVertical size="1.2rem" />
-                    </Center>
                     <Paper p="xs" radius="sm" shadow="sm" withBorder spacing="xs" style={{ width: '90%' }}>
                         <Flex direction="row" align="center" gap="lg" justify="flex-end">
-                            <Image height={100} src={'/api/file/' + form.getInputProps(`files.${index}.id`).value} />
                             <Text>{form.getInputProps(`files.${index}.name`).value}</Text>
+                            <Image width={150} src={'/api/file/' + form.getInputProps(`files.${index}.id`).value} />
                             <NumberInput
                                 required
                                 hideControls
@@ -108,13 +105,16 @@ const Content = ({ form, playlistId }) => {
                             </ActionIcon>
                         </Flex>
                     </Paper>
+                    <Center {...provided.dragHandleProps}>
+                        <IconGripVertical size="1.2rem" />
+                    </Center>
                 </Group>
             )}
         </Draggable>
     ));
 
     return (
-        <Box mx="auto">
+        <Box mx="auto" maw={1200}>
             <DragDropContext
                 onDragEnd={({ destination, source }) => {
                     form.reorderListItem('files', { from: source.index, to: destination.index });
diff --git a/src/pages/playlist/index.jsx b/src/pages/playlist/index.jsx
index a628ef9..91456b9 100644
--- a/src/pages/playlist/index.jsx
+++ b/src/pages/playlist/index.jsx
@@ -11,12 +11,12 @@ import Content from './content';
 const Playlist = (item) => {
     const id = window.location.href.split('/').slice(-1)[0];
     const [playlist, setPlaylist] = useState(null);
-    const [update, setUpdate] = useState(false);
+    const [showUpdate, setShowUpdate] = useState(false);
     const [addFile, setAddFile] = useState(false);
     const [files, setFiles] = useState([]);
     const [duration, setDuration] = useState(0);
 
-    const toggleUpdate = () => setUpdate(!update);
+    const toggleUpdate = () => setShowUpdate(!showUpdate);
 
     const form = useForm({
         initialValues: {
@@ -32,6 +32,10 @@ const Playlist = (item) => {
         setDuration(duration);
     }, [form.values]);
 
+    const updatePlaylist = (playlist) => {
+        setPlaylist(playlist);
+    };
+
     useEffect(() => {
         if (JSON.stringify(item) !== '{}') {
             setPlaylist(item);
@@ -39,7 +43,7 @@ const Playlist = (item) => {
             API.getPlaylist(id)
                 .then((res) => {
                     if (res.status === 200) {
-                        console.log(res.data)
+                        console.log(res.data);
                         setPlaylist(res.data);
                         form.setFieldValue('files', res.data.files);
                     }
@@ -78,10 +82,14 @@ const Playlist = (item) => {
                 </Button>
             </Group>
             <Paper p="xs" radius="sm" shadow="sm" withBorder my="md">
-                <Content form={form} playlistId={id}/>
+                <Content form={form} playlistId={id} />
             </Paper>
-            <Button>Save</Button>
-            <ModalUpdate open={update} handler={toggleUpdate} id={playlist?.id} />
+            <ModalUpdate
+                opened={showUpdate}
+                handler={toggleUpdate}
+                item={playlist}
+                updatePlaylist={(playlist) => updatePlaylist(playlist)}
+            />
         </>
     );
 };
diff --git a/src/pages/playlists/playlist-view-editor.jsx b/src/pages/playlists/playlist-view-editor.jsx
index 508826b..80e7764 100644
--- a/src/pages/playlists/playlist-view-editor.jsx
+++ b/src/pages/playlists/playlist-view-editor.jsx
@@ -9,7 +9,7 @@ const PlaylistViewEditor = ({ item, handler, buttonText, APICall }) => {
     };
 
     const [isLoading, setIsLoading] = useState(false);
-
+    console.log(item);
     // todo permissions
     const form = useForm({
         initialValues: {
@@ -25,14 +25,10 @@ const PlaylistViewEditor = ({ item, handler, buttonText, APICall }) => {
         if (form.validate().hasErrors) return;
         try {
             setIsLoading(true);
-           
-            if (item) {
-                form.values.id = item?.id;
-            }
-            
-            const res = await APICall(form.values);
+            const res = await APICall(item?.id, { name: form.values.name });
             setIsLoading(false);
-            handleClose(res.data);
+            item.name = form.values.name;
+            handleClose(item);
         } catch (error) {
             setIsLoading(false);
             // todo
diff --git a/src/services/api.js b/src/services/api.js
index ff319b6..3df6d9a 100644
--- a/src/services/api.js
+++ b/src/services/api.js
@@ -13,6 +13,9 @@ const API = {
     createPlaylist(data) {
         return caller().put('/playlist', data);
     },
+    updatePlaylist(playlistId, data) {
+        return caller().post(`/playlist/${playlistId}/update`, data);
+    },
     getPlaylist(id) {
         return caller().get(`/playlist/${id}`);
     },