diff --git a/client/src/components/LinkListItem/components/ActionButtons/DeleteLinkActionButton.tsx b/client/src/components/LinkListItem/ActionButtons/DeleteLinkActionButton.tsx
similarity index 67%
rename from client/src/components/LinkListItem/components/ActionButtons/DeleteLinkActionButton.tsx
rename to client/src/components/LinkListItem/ActionButtons/DeleteLinkActionButton.tsx
index 1c77ad0..1fe066c 100644
--- a/client/src/components/LinkListItem/components/ActionButtons/DeleteLinkActionButton.tsx
+++ b/client/src/components/LinkListItem/ActionButtons/DeleteLinkActionButton.tsx
@@ -1,9 +1,9 @@
-import Link from '../../../../models/Link.ts';
-import {useLinkStore} from '../../../../contexts/AppContext.tsx';
-import useAsyncAction from '../../../../hooks/useAsyncAction.ts';
-import Button from '../../../Button.tsx';
+import Link from '../../../models/Link.ts';
+import {useLinkStore} from '../../../contexts/AppContext.tsx';
+import useAsyncAction from '../../../hooks/useAsyncAction.ts';
+import Button from '../../Button.tsx';
 import {useState} from 'react';
-import Modal from '../../../Modal.tsx';
+import Modal from '../../Modal.tsx';
 
 const DeleteLinkActionButton = ({ id }: Pick<Link, 'id'>) => {
     const { deleteLink } = useLinkStore();
@@ -16,12 +16,10 @@ const DeleteLinkActionButton = ({ id }: Pick<Link, 'id'>) => {
     return (
         <>
             <div className="flex flex-row justify-end gap-6">
-                <Button type="button" onClick={() => setShowConfirmModal(true)} className="bg-transparent dark:hover:text-zinc-300">
-                    {/*<svg className="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
-                            <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
-                        </svg>
-                        <span className="sr-only">Delete link item</span>*/}
-                    Delete
+                <Button type="button" onClick={() => setShowConfirmModal(true)} className="bg-transparent">
+                    <svg className="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
+                        <path d="M17 4h-4V2a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v2H1a1 1 0 0 0 0 2h1v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1a1 1 0 1 0 0-2ZM7 2h4v2H7V2Zm1 14a1 1 0 1 1-2 0V8a1 1 0 0 1 2 0v8Zm4 0a1 1 0 0 1-2 0V8a1 1 0 0 1 2 0v8Z"/>
+                    </svg>
                 </Button>
             </div>
             { showConfirmModal && (
diff --git a/client/src/components/LinkListItem/components/ActionButtons/LikeLinkActionButton.tsx b/client/src/components/LinkListItem/ActionButtons/LikeLinkActionButton.tsx
similarity index 89%
rename from client/src/components/LinkListItem/components/ActionButtons/LikeLinkActionButton.tsx
rename to client/src/components/LinkListItem/ActionButtons/LikeLinkActionButton.tsx
index 148a84d..a1f77d0 100644
--- a/client/src/components/LinkListItem/components/ActionButtons/LikeLinkActionButton.tsx
+++ b/client/src/components/LinkListItem/ActionButtons/LikeLinkActionButton.tsx
@@ -1,7 +1,7 @@
-import Link from '../../../../models/Link.ts';
-import {useLinkStore} from '../../../../contexts/AppContext.tsx';
-import useAsyncAction from '../../../../hooks/useAsyncAction.ts';
-import Button from '../../../Button.tsx';
+import Link from '../../../models/Link.ts';
+import {useLinkStore} from '../../../contexts/AppContext.tsx';
+import useAsyncAction from '../../../hooks/useAsyncAction.ts';
+import Button from '../../Button.tsx';
 
 const shortLikes = (likes: number) => {
     if (likes < 1000) {
diff --git a/client/src/components/LinkListItem/components/ActionButtons/SaveLinkActionButton.tsx b/client/src/components/LinkListItem/ActionButtons/SaveLinkActionButton.tsx
similarity index 83%
rename from client/src/components/LinkListItem/components/ActionButtons/SaveLinkActionButton.tsx
rename to client/src/components/LinkListItem/ActionButtons/SaveLinkActionButton.tsx
index 6dbfc3c..b3515ee 100644
--- a/client/src/components/LinkListItem/components/ActionButtons/SaveLinkActionButton.tsx
+++ b/client/src/components/LinkListItem/ActionButtons/SaveLinkActionButton.tsx
@@ -1,7 +1,7 @@
-import Link from '../../../../models/Link.ts';
-import {useLinkStore} from '../../../../contexts/AppContext.tsx';
-import useAsyncAction from '../../../../hooks/useAsyncAction.ts';
-import Button from '../../../Button.tsx';
+import Link from '../../../models/Link.ts';
+import {useLinkStore} from '../../../contexts/AppContext.tsx';
+import useAsyncAction from '../../../hooks/useAsyncAction.ts';
+import Button from '../../Button.tsx';
 
 
 const SaveLinkActionButton = ({ isSaved, id }: Pick<Link, 'isSaved' | 'id'>) => {
diff --git a/client/src/screens/AddLink/components/AddTagButton.tsx b/client/src/components/LinkListItem/AddTagButton.tsx
similarity index 90%
rename from client/src/screens/AddLink/components/AddTagButton.tsx
rename to client/src/components/LinkListItem/AddTagButton.tsx
index 195ed59..d165f32 100644
--- a/client/src/screens/AddLink/components/AddTagButton.tsx
+++ b/client/src/components/LinkListItem/AddTagButton.tsx
@@ -1,6 +1,6 @@
 import {useState} from 'react';
-import TagSearchInput from '../../../components/TagSearchInput.tsx';
-import Button from '../../../components/Button.tsx';
+import TagSearchInput from './TagSearchInput.tsx';
+import Button from '../Button.tsx';
 
 type TagInputProps = {
     onAdd: (tag: string) => void;
diff --git a/client/src/components/LinkListItem/components/Contents/YoutubeVideoContent.tsx b/client/src/components/LinkListItem/Contents/YoutubeVideoContent.tsx
similarity index 85%
rename from client/src/components/LinkListItem/components/Contents/YoutubeVideoContent.tsx
rename to client/src/components/LinkListItem/Contents/YoutubeVideoContent.tsx
index 98a34cb..d18ba80 100644
--- a/client/src/components/LinkListItem/components/Contents/YoutubeVideoContent.tsx
+++ b/client/src/components/LinkListItem/Contents/YoutubeVideoContent.tsx
@@ -1,4 +1,4 @@
-import {YoutubeVideo} from '../../../../models/Link.ts';
+import {YoutubeVideo} from '../../../models/Link.ts';
 
 const YoutubeVideoContent = ({ videoId }: YoutubeVideo) => {
     return (
diff --git a/client/src/components/LinkListItem/LinkListItem.tsx b/client/src/components/LinkListItem/LinkListItem.tsx
index 6e45e3f..36e625c 100644
--- a/client/src/components/LinkListItem/LinkListItem.tsx
+++ b/client/src/components/LinkListItem/LinkListItem.tsx
@@ -1,20 +1,54 @@
-
-import LinkListItemContent from './components/LinkListItemContent.tsx';
-import LinkListItemTitle from './components/LinkListItemTitle.tsx';
-import LinkListItemAuthor from './components/LinkListItemAuthor.tsx';
-import LinkListItemTags from './components/LinkListItemTags.tsx';
-import LinkListItemActionButtons from './components/LinkListItemActionButtons.tsx';
+import LinkListItemContent from './LinkListItemContent.tsx';
+import LinkListItemTitle from './LinkListItemTitle.tsx';
+import LinkListItemAuthor from './LinkListItemAuthor.tsx';
+import LinkListItemTags from './LinkListItemTags.tsx';
 import Link from '../../models/Link.ts';
+import {useState} from 'react';
+import {useLinkStore} from '../../contexts/AppContext.tsx';
+import LinkListItemActionPanel from './LinkListItemActionPanel.tsx';
+import useAsyncAction from '../../hooks/useAsyncAction.ts';
 
 const LinkListItem = ({ link }: { link: Link }) => {
+    const [updating, setUpdating] = useState(false);
+    const { updateLink } = useLinkStore();
+    const [updateState, setUpdateState] = useState<Pick<Link, 'title' | 'tags'>>({ title: link.title, tags: link.tags });
+    const {loading, execute} = useAsyncAction(() => updateLink(link.id, updateState));
+
+    const handleOnEditClick = () => {
+        setUpdateState({ title: link.title, tags: link.tags });
+        setUpdating(true);
+    };
+
+    const handleOnApplyClick = async () => {
+        await execute();
+        setUpdating(false);
+    };
+
+    const handleOnRemoveTag = (tag: string) => {
+        setUpdateState((prevState) => ({ ...prevState, tags: prevState.tags.filter((t) => t !== tag) }));
+    };
+
+    const handleOnAddTag = (tag: string) => {
+        setUpdateState((prevState) => ({ ...prevState, tags: [...prevState.tags, tag] }));
+    };
+
+    const handleOnTitleUpdate = (title: string) => {
+        setUpdateState((prevState) => ({ ...prevState, title }));
+    }
+
     return (
         <>
             <LinkListItemContent {...link} />
             <div className="px-2 mb-4">
-                <LinkListItemActionButtons {...link} />
+                <LinkListItemActionPanel
+                    disabled={loading}
+                    updating={updating} link={link}
+                    onApplyClick={handleOnApplyClick}
+                    onCancelClick={() => setUpdating(false)}
+                    onEditClick={handleOnEditClick} />
             </div>
-            <LinkListItemTags tags={link.tags} />
-            <LinkListItemTitle title={link.title} />
+            <LinkListItemTags editable={updating} tags={updating ? updateState.tags : link.tags} onRemove={handleOnRemoveTag} onAdd={handleOnAddTag} />
+            <LinkListItemTitle editable={updating} title={updating ? updateState.title : link.title} onUpdate={handleOnTitleUpdate} />
             <LinkListItemAuthor {...link} />
         </>
     );
diff --git a/client/src/components/LinkListItem/LinkListItemActionPanel.tsx b/client/src/components/LinkListItem/LinkListItemActionPanel.tsx
new file mode 100644
index 0000000..20207ca
--- /dev/null
+++ b/client/src/components/LinkListItem/LinkListItemActionPanel.tsx
@@ -0,0 +1,52 @@
+import LikeLinkActionButton from './ActionButtons/LikeLinkActionButton.tsx';
+import SaveLinkActionButton from './ActionButtons/SaveLinkActionButton.tsx';
+import DeleteLinkActionButton from './ActionButtons/DeleteLinkActionButton.tsx';
+import Link from '../../models/Link.ts';
+import Button from '../Button.tsx';
+
+type LinkListItemActionPanelProps = {
+    disabled?: boolean;
+    onEditClick: () => void;
+    onCancelClick: () => void;
+    onApplyClick: () => void;
+    link: Link;
+    updating: boolean;
+};
+
+const LinkListItemActionPanel = ({ link, disabled, updating, onApplyClick, onCancelClick, onEditClick}: LinkListItemActionPanelProps) => {
+    return (
+        <div className="flex flex-row justify-between secondary-text-color">
+            <div className="flex flex-row gap-4">
+                <LikeLinkActionButton {...link} />
+                <SaveLinkActionButton {...link} />
+            </div>
+            { !updating && link.editable && (
+                <div className="flex flex-row gap-4">
+                    <Button type="button" onClick={onEditClick} className="bg-transparent">
+                        <svg className="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
+                            <path d="M12.687 14.408a3.01 3.01 0 0 1-1.533.821l-3.566.713a3 3 0 0 1-3.53-3.53l.713-3.566a3.01 3.01 0 0 1 .821-1.533L10.905 2H2.167A2.169 2.169 0 0 0 0 4.167v11.666A2.169 2.169 0 0 0 2.167 18h11.666A2.169 2.169 0 0 0 16 15.833V11.1l-3.313 3.308Zm5.53-9.065.546-.546a2.518 2.518 0 0 0 0-3.56 2.576 2.576 0 0 0-3.559 0l-.547.547 3.56 3.56Z"/>
+                            <path d="M13.243 3.2 7.359 9.081a.5.5 0 0 0-.136.256L6.51 12.9a.5.5 0 0 0 .59.59l3.566-.713a.5.5 0 0 0 .255-.136L16.8 6.757 13.243 3.2Z"/>
+                        </svg>
+                    </Button>
+                    <DeleteLinkActionButton {...link} />
+                </div>
+            )}
+            { updating && (
+                <div className="flex flex-row gap-4">
+                    <Button disabled={disabled} type="button" onClick={onCancelClick} className="bg-transparent">
+                        <svg className="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z"/>
+                        </svg>
+                    </Button>
+                    <Button disabled={disabled} type="button" onClick={onApplyClick} className="bg-transparent">
+                        <svg className="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
+                        </svg>
+                    </Button>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default LinkListItemActionPanel;
\ No newline at end of file
diff --git a/client/src/components/LinkListItem/components/LinkListItemAuthor.tsx b/client/src/components/LinkListItem/LinkListItemAuthor.tsx
similarity index 88%
rename from client/src/components/LinkListItem/components/LinkListItemAuthor.tsx
rename to client/src/components/LinkListItem/LinkListItemAuthor.tsx
index d69e8ac..bdead66 100644
--- a/client/src/components/LinkListItem/components/LinkListItemAuthor.tsx
+++ b/client/src/components/LinkListItem/LinkListItemAuthor.tsx
@@ -1,4 +1,4 @@
-import Link from '../../../models/Link.ts';
+import Link from '../../models/Link.ts';
 
 const LinkListItemAuthor = ({ user, createdAt }: Pick<Link, 'user' | 'createdAt'>) => (
     <p className="secondary-text-color text-sm italic font-light ">
diff --git a/client/src/components/LinkListItem/components/LinkListItemContent.tsx b/client/src/components/LinkListItem/LinkListItemContent.tsx
similarity index 76%
rename from client/src/components/LinkListItem/components/LinkListItemContent.tsx
rename to client/src/components/LinkListItem/LinkListItemContent.tsx
index 3828809..6cfbf69 100644
--- a/client/src/components/LinkListItem/components/LinkListItemContent.tsx
+++ b/client/src/components/LinkListItem/LinkListItemContent.tsx
@@ -1,6 +1,6 @@
 import YoutubeVideoContent from './Contents/YoutubeVideoContent.tsx';
-import Link from '../../../models/Link.ts';
-import LinkType from '../../../models/LinkType.ts';
+import Link from '../../models/Link.ts';
+import LinkType from '../../models/LinkType.ts';
 
 const LinkListItemContent = ({ type, youtube }: Pick<Link, 'type' | 'youtube'>) => {
     if (type === LinkType.Youtube) {
diff --git a/client/src/components/LinkListItem/LinkListItemTags.tsx b/client/src/components/LinkListItem/LinkListItemTags.tsx
new file mode 100644
index 0000000..a1498be
--- /dev/null
+++ b/client/src/components/LinkListItem/LinkListItemTags.tsx
@@ -0,0 +1,39 @@
+import {useStore} from '../../contexts/AppContext.tsx';
+import LinkStore from '../../stores/LinkStore.ts';
+import {observer} from 'mobx-react-lite';
+import TagBadge from '../TagBadge.tsx';
+import {MaxTags} from '../../constants/preferences.ts';
+import AddTagButton from './AddTagButton.tsx';
+
+type LinkListItemTagsProps = {
+    tags: string[];
+    editable?: boolean;
+    error?: string;
+    onAdd?: (tag: string) => void;
+    onRemove?: (tag: string) => void;
+};
+
+const LinkListItemTags = observer(({ tags, editable, error, onAdd, onRemove }: LinkListItemTagsProps) => {
+    const { toggleTagFilter } = useStore<LinkStore>(LinkStore);
+    const handleOnClick = (tag: string) => {
+        if (!editable) {
+            toggleTagFilter(tag);
+        } else if (onRemove) {
+            onRemove(tag);
+        }
+    };
+
+    return (
+        <>
+            <div className="flex flex-wrap gap-2 items-center">
+                {tags.map((tag) => (
+                    <TagBadge key={tag} onClick={() => handleOnClick(tag)} name={tag} removable={editable} active />
+                ))}
+                { editable && tags.length < MaxTags && <AddTagButton onAdd={(tag) => onAdd && onAdd(tag)} />}
+            </div>
+            { editable && error && (<span className="text-red-500 text-sm">{error}</span>) }
+        </>
+    );
+});
+
+export default LinkListItemTags;
\ No newline at end of file
diff --git a/client/src/components/LinkListItem/LinkListItemTitle.tsx b/client/src/components/LinkListItem/LinkListItemTitle.tsx
new file mode 100644
index 0000000..e03274b
--- /dev/null
+++ b/client/src/components/LinkListItem/LinkListItemTitle.tsx
@@ -0,0 +1,47 @@
+import { ChangeEvent, useState } from 'react';
+import {MaxTitleLength} from '../../constants/preferences.ts';
+
+type LinkListItemTitleProps = {
+    editable?: boolean;
+    title: string;
+    onUpdate?: (title: string) => void;
+    error?: string;
+};
+
+const LinkListItemTitle = ({ title, onUpdate, editable, error }: LinkListItemTitleProps) => {
+    const [value, setValue] = useState(title);
+
+    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+        setValue(event.target.value);
+    };
+
+    const handleEditEnd = () => {
+        if (value !== title && onUpdate) {
+            onUpdate(value);
+        }
+    };
+
+    return (
+        <>
+            { editable && (
+                <input type="text"
+                       value={value}
+                       onChange={handleInputChange}
+                       onBlur={handleEditEnd}
+                       placeholder="Set title"
+                       className="p-2 group secondary-text-color dark-border w-full bg-zinc-900 focus:outline-none font-medium rounded-lg text-sm"
+                />
+            )}
+            { !editable && (
+                <h5
+                    className="text-lg font-semibold secondary-text-color"
+                >
+                    { value.length > MaxTitleLength ? `${value.slice(0, MaxTitleLength)}` : value }
+                </h5>
+            )}
+            { error && (<span className="text-red-500 text-sm">{error}</span>) }
+        </>
+    );
+}
+
+export default LinkListItemTitle;
\ No newline at end of file
diff --git a/client/src/components/TagSearchInput.tsx b/client/src/components/LinkListItem/TagSearchInput.tsx
similarity index 93%
rename from client/src/components/TagSearchInput.tsx
rename to client/src/components/LinkListItem/TagSearchInput.tsx
index 6f40632..6b1ecd5 100644
--- a/client/src/components/TagSearchInput.tsx
+++ b/client/src/components/LinkListItem/TagSearchInput.tsx
@@ -1,10 +1,10 @@
 import React, {useEffect, useState} from 'react';
-import useClickOutsideHandler from '../hooks/useClickOutsideHandler.ts';
+import useClickOutsideHandler from '../../hooks/useClickOutsideHandler.ts';
 import {observer} from 'mobx-react-lite';
-import {useLinkStore} from '../contexts/AppContext.tsx';
-import TagBadge from '../components/TagBadge.tsx';
-import SearchIcon from '../components/SearchIcon.tsx';
-import Button from './Button.tsx';
+import {useLinkStore} from '../../contexts/AppContext.tsx';
+import TagBadge from '../TagBadge.tsx';
+import SearchIcon from '../SearchIcon.tsx';
+import Button from '../Button.tsx';
 
 type TagSearchProps = {
     showSuggestionsInitial?: boolean;
diff --git a/client/src/components/LinkListItem/components/LinkListItemActionButtons.tsx b/client/src/components/LinkListItem/components/LinkListItemActionButtons.tsx
deleted file mode 100644
index 91a702e..0000000
--- a/client/src/components/LinkListItem/components/LinkListItemActionButtons.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import LikeLinkActionButton from './ActionButtons/LikeLinkActionButton.tsx';
-import SaveLinkActionButton from './ActionButtons/SaveLinkActionButton.tsx';
-import DeleteLinkActionButton from './ActionButtons/DeleteLinkActionButton.tsx';
-import Link from '../../../models/Link.ts';
-
-const LinkListItemActionButtons = (link: Link) => {
-    return (
-        <div className="flex flex-row justify-between secondary-text-color">
-            <div className="flex flex-row gap-4">
-                <LikeLinkActionButton {...link} />
-                <SaveLinkActionButton {...link} />
-            </div>
-            { link.editable && (
-                <div className="flex flex-row gap-4">
-                    <DeleteLinkActionButton {...link} />
-                </div>
-            )}
-        </div>
-    );
-};
-
-export default LinkListItemActionButtons;
\ No newline at end of file
diff --git a/client/src/components/LinkListItem/components/LinkListItemTags.tsx b/client/src/components/LinkListItem/components/LinkListItemTags.tsx
deleted file mode 100644
index 5907778..0000000
--- a/client/src/components/LinkListItem/components/LinkListItemTags.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import {useStore} from '../../../contexts/AppContext.tsx';
-import LinkStore from '../../../stores/LinkStore.ts';
-import {observer} from 'mobx-react-lite';
-import TagBadge from '../../TagBadge.tsx';
-
-const LinkListItemTags = observer(({ tags }: { tags: string[]}) => {
-    const { toggleTagFilter } = useStore<LinkStore>(LinkStore);
-
-    return (
-        <div className="flex flex-wrap gap-2">
-            {tags.map((tag) => (
-                <TagBadge name={tag} key={tag} onClick={() => toggleTagFilter(tag)} active />
-            ))}
-        </div>
-    );
-});
-
-export default LinkListItemTags;
\ No newline at end of file
diff --git a/client/src/components/LinkListItem/components/LinkListItemTitle.tsx b/client/src/components/LinkListItem/components/LinkListItemTitle.tsx
deleted file mode 100644
index 8a43aa6..0000000
--- a/client/src/components/LinkListItem/components/LinkListItemTitle.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import {MaxTitleLength} from '../../../constants/preferences.ts';
-
-const LinkListItemTitle = ({ title }: { title: string}) => {
-    return (
-        <h5 className="text-lg font-semibold secondary-text-color
-            ">
-            { title?.length > MaxTitleLength ? `${title?.slice(0, MaxTitleLength - 3)}...` : title }
-        </h5>
-    );
-}
-
-export default LinkListItemTitle;
\ No newline at end of file
diff --git a/client/src/components/LinkListToolbar/LinkListToolbar.tsx b/client/src/components/LinkListToolbar/LinkListToolbar.tsx
index 18ea23e..3c30eea 100644
--- a/client/src/components/LinkListToolbar/LinkListToolbar.tsx
+++ b/client/src/components/LinkListToolbar/LinkListToolbar.tsx
@@ -1,14 +1,16 @@
 import TopTagsList from './components/TopTagsList.tsx';
 import SearchByTitleInput from './components/SearchByTitleInput.tsx';
-import TagSearch from './components/TagSearch.tsx';
 import UserInteractionsFilter from './components/UserInteractionsFilter.tsx';
+import {useLinkStore} from '../../contexts/AppContext.tsx';
+import TagSearchInput from '../LinkListItem/TagSearchInput.tsx';
 
 const LinkListToolbar = () => {
+    const { toggleTagFilter } = useLinkStore();
     return (
         <div className="flex flex-col gap-4 w-full md:max-w-screen-md">
             <TopTagsList />
             <div className="flex flex-row gap-2 w-full items-center justify-center">
-                <TagSearch />
+                <TagSearchInput onTagClick={toggleTagFilter} />
                 <UserInteractionsFilter />
             </div>
             <SearchByTitleInput />
diff --git a/client/src/components/LinkListToolbar/components/TagSearch.tsx b/client/src/components/LinkListToolbar/components/TagSearch.tsx
deleted file mode 100644
index 1fa6c2d..0000000
--- a/client/src/components/LinkListToolbar/components/TagSearch.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import {useLinkStore} from '../../../contexts/AppContext.tsx';
-import TagSearchInput from '../../TagSearchInput.tsx';
-
-const TagSearch = () => {
-    const { toggleTagFilter } = useLinkStore();
-    return <TagSearchInput onTagClick={toggleTagFilter} />;
-};
-
-export default TagSearch;
\ No newline at end of file
diff --git a/client/src/screens/AddLink/components/AddLinkForm.tsx b/client/src/screens/AddLink/components/AddLinkForm.tsx
index d8ec3e9..f47fd08 100644
--- a/client/src/screens/AddLink/components/AddLinkForm.tsx
+++ b/client/src/screens/AddLink/components/AddLinkForm.tsx
@@ -1,14 +1,12 @@
 import {useLinkStore} from '../../../contexts/AppContext.tsx';
-import TagBadge from '../../../components/TagBadge.tsx';
-import AddTagButton from './AddTagButton.tsx';
-import {MaxTags} from '../../../constants/preferences.ts';
-import TitleInput from './TitleInput.tsx';
 import SubmitButton from '../../../components/SubmitButton.tsx';
 import ErrorAlert from '../../../components/ErrorAlert.tsx';
 import useSimpleReducer from '../../../hooks/useSimpleReducer.ts';
 import {handleError} from '../../../utils/errors.ts';
 import PreviewLink from '../../../models/PreviewLink.ts';
-import LinkListItemContent from '../../../components/LinkListItem/components/LinkListItemContent.tsx';
+import LinkListItemContent from '../../../components/LinkListItem/LinkListItemContent.tsx';
+import LinkListItemTitle from '../../../components/LinkListItem/LinkListItemTitle.tsx';
+import LinkListItemTags from '../../../components/LinkListItem/LinkListItemTags.tsx';
 
 type LocalState = {
     isSubmitting: boolean;
@@ -78,15 +76,8 @@ const AddLinkForm = ({ onSuccess, link }: AddLinkFormProps) => {
         <div className="flex flex-col items-center justify-center gap-4">
             <div className="link-item-wrapper">
                 <LinkListItemContent {...link} />
-                <TitleInput initialTitle={link.title} onUpdate={updateTitle} />
-                { state.titleError && (<span className="text-red-500 text-sm">{state.titleError}</span>) }
-                <div className="flex flex-wrap gap-2 items-center">
-                    {link.tags.map((tag) => (
-                        <TagBadge key={tag} onClick={() => removeTag(tag)} name={tag} removable active />
-                    ))}
-                    { link.tags.length < MaxTags && <AddTagButton onAdd={addTag} />}
-                </div>
-                { state.tagsError && (<span className="text-red-500 text-sm">{state.tagsError}</span>) }
+                <LinkListItemTags editable tags={link.tags} onAdd={addTag} onRemove={removeTag} error={state.tagsError} />
+                <LinkListItemTitle editable title={link.title} onUpdate={updateTitle} error={state.titleError} />
             </div>
             <SubmitButton isLoading={state.isSubmitting} onClick={submitHandler} type="button" className="px-4 text-xl font-medium dark:text-white">
                 Submit
diff --git a/client/src/screens/AddLink/components/TitleInput.tsx b/client/src/screens/AddLink/components/TitleInput.tsx
deleted file mode 100644
index 6c798da..0000000
--- a/client/src/screens/AddLink/components/TitleInput.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { ChangeEvent, useState } from 'react';
-import {MaxTitleLength} from '../../../constants/preferences.ts';
-
-type TitleInputProps = {
-    initialTitle: string;
-    onUpdate: (title: string) => void;
-};
-
-const TitleInput = ({ initialTitle, onUpdate }: TitleInputProps) => {
-    const [isEditing, setIsEditing] = useState(false);
-    const [title, setTitle] = useState(initialTitle);
-
-    const handleEditStart = () => {
-        setIsEditing(true);
-    };
-
-    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
-        setTitle(event.target.value);
-    };
-
-    const handleEditEnd = () => {
-        setIsEditing(false);
-        if (title !== initialTitle) {
-            onUpdate(title);
-        }
-    };
-
-    return isEditing || initialTitle.length === 0 ? (
-        <input type="text"
-               autoFocus
-               value={title}
-               onChange={handleInputChange}
-               onBlur={handleEditEnd}
-               placeholder="Set title"
-               className="text-lg font-semibold secondary-text-color dark:bg-transparent p-0 m-0 border-none appearance-none focus:ring-0"
-        />
-    ) : (
-        <h5
-            className="text-lg font-semibold secondary-text-color cursor-pointer"
-            onClick={handleEditStart}
-        >
-            { title.length > MaxTitleLength ? `${title.slice(0, MaxTitleLength)}...` : title }
-        </h5>
-    );
-}
-
-export default TitleInput;
\ No newline at end of file
diff --git a/client/src/stores/LinkStore.ts b/client/src/stores/LinkStore.ts
index 2aa0b90..d89ede6 100644
--- a/client/src/stores/LinkStore.ts
+++ b/client/src/stores/LinkStore.ts
@@ -91,9 +91,7 @@ class LinkStore {
     };
 
     public loadMore = async () => {
-        console.log('loadMore')
         if (this.state.paginationState.hasNextPage) {
-            console.log('loadMore2')
             const response = await this.linkService.getList({
                 ...this.paginationParams,
                 ...this.state.filter,
@@ -212,7 +210,7 @@ class LinkStore {
         return {};
     };
 
-    public updatePreviewLink = (updates: Partial<PreviewLink>) => {
+    public updatePreviewLink = (updates: Partial<Pick<PreviewLink, 'title' | 'tags'>>) => {
         if (!this.state.preview.link) {
             throw new Error('Preview Link not found');
         }
@@ -223,6 +221,44 @@ class LinkStore {
         };
     };
 
+    public updateLink = async (linkId: string, update: Pick<Link, 'title' | 'tags'>) => {
+        await this.linkService.update({ linkId, ...update });
+
+        const linkIndex = this.state.links.findIndex(link => link.id === linkId);
+        if (linkIndex === -1) {
+            throw new Error('Link not found');
+        }
+
+        const link = this.state.links[linkIndex];
+        const removedTags = link.tags.filter(tag => !update.tags.includes(tag));
+        const addedTags = update.tags.filter(tag => !link.tags.includes(tag));
+        const updatedTags = this.state.tags.map(tag => {
+            if (removedTags.includes(tag.name)) {
+                return {
+                    ...tag,
+                    count: tag.count - 1
+                };
+            }
+
+            if (addedTags.includes(tag.name)) {
+                return {
+                    ...tag,
+                    count: tag.count + 1
+                };
+            }
+
+            return tag;
+        }).filter(x => x.count > 0);
+        runInAction(() => {
+            this.state.links[linkIndex] = {
+                ...link,
+                ...update,
+            };
+            this.state.tags = updatedTags;
+        });
+
+    }
+
     public submitLink = async (): Promise<void> => {
         if (!this.state.preview.link) {
             throw new Error('Preview Link not found');
diff --git a/client/src/utils/errors.ts b/client/src/utils/errors.ts
index bce293d..1a78618 100644
--- a/client/src/utils/errors.ts
+++ b/client/src/utils/errors.ts
@@ -3,7 +3,6 @@ import FetchHttpResponseError from '../services/HttpClient/errors/FetchHttpRespo
 import FetchHttpResponseValidationError from '../services/HttpClient/errors/FetchHttpResponseValidationError.ts';
 
 export const handleError = (error: unknown): string | undefined => {
-    console.log(error)
     if (error instanceof FetchHttpResponseBusinessError) {
         return error.message;
     }
diff --git a/server/src/ShareLink.Application/UpdateLinkHandler/UpdateLinkHandler.cs b/server/src/ShareLink.Application/UpdateLinkHandler/UpdateLinkHandler.cs
index 822291b..7d458d8 100644
--- a/server/src/ShareLink.Application/UpdateLinkHandler/UpdateLinkHandler.cs
+++ b/server/src/ShareLink.Application/UpdateLinkHandler/UpdateLinkHandler.cs
@@ -17,7 +17,9 @@ public async Task Handle(UpdateLinkRequest request, CancellationToken cancellati
             throw new UserUnauthorizedException();
         }
 
-        var link = await context.Links.SingleOrDefaultAsync(x => x.Id == request.LinkId && x.UserId == userId, cancellationToken);
+        var link = await context.Links
+            .Include(x => x.Tags)
+            .SingleOrDefaultAsync(x => x.Id == request.LinkId && x.UserId == userId, cancellationToken);
         if (link is null)
         {
             throw new BusinessException(ErrorCodes.LinkNotFound);