diff --git a/src/main.rs b/src/main.rs
index 30e56a5..606c4a3 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -209,10 +209,8 @@ async fn get_image(path: &PathBuf) -> Result<(Vec<u8>, mime::Mime), std::io::Err
 async fn rm_tag_from_topic(mut req: Request<ServerState>) -> tide::Result {
     let topic = normalize_topic(req.param("topic")?);
     let tag = req.body_json::<String>().await?;
-    let mut path = req.state().args.root_dir.clone();
-    path.push(format!("{}.json", topic));
 
-    rm_tag_for_topic(&mut path, topic, tag).await?;
+    rm_tag_for_topic(&req.state().args.root_dir, topic, tag).await?;
 
     Ok(Response::new(StatusCode::Ok))
 }
@@ -220,10 +218,8 @@ async fn rm_tag_from_topic(mut req: Request<ServerState>) -> tide::Result {
 async fn add_tag_to_topic(mut req: Request<ServerState>) -> tide::Result {
     let topic = normalize_topic(req.param("topic")?);
     let tag = req.body_json::<String>().await?;
-    let mut path = req.state().args.root_dir.clone();
-    path.push(format!("{}.json", topic));
 
-    add_tag_for_topic(&mut path, topic, tag).await?;
+    add_tag_for_topic(&req.state().args.root_dir, topic, tag).await?;
 
     Ok(Response::new(StatusCode::Ok))
 }
diff --git a/src/utils.rs b/src/utils.rs
index cafe6b4..e1f771e 100644
--- a/src/utils.rs
+++ b/src/utils.rs
@@ -134,7 +134,7 @@ pub async fn add_tag_for_topic(
     let index_paths = get_index_paths(root_dir).await?;
 
     let mut tag_path = root_dir.join("indexes");
-    tag_path.push(tag.clone());
+    tag_path.push(format!("{}.json", tag));
 
     // Read the index if it exists, otherwise create it
     let mut index = if tag_path.exists() {
@@ -154,7 +154,7 @@ pub async fn add_tag_for_topic(
     let temp_tag_path = tag_path.with_extension(format!("{}.temp.json", topic));
     let mut file = smol::fs::File::create(&temp_tag_path).await?;
     file.write_all(serde_json::to_string(&index)?.as_bytes()).await?;
-    std::fs::rename(temp_tag_path, &tag_path)?;
+    std::fs::rename(temp_tag_path, &tag_path.with_extension("json"))?;
 
     Ok(())
 }
@@ -167,7 +167,7 @@ pub async fn rm_tag_for_topic(
     let index_paths = get_index_paths(root_dir).await?;
 
     let mut tag_path = root_dir.join("indexes");
-    tag_path.push(tag.clone());
+    tag_path.push(format!("{}.json", tag));
 
     // Read the index if it exists, otherwise fail
     let mut index: Index = if tag_path.exists() {
@@ -181,11 +181,16 @@ pub async fn rm_tag_for_topic(
 
     index.topics.remove(&topic);
 
-    // Write to a temporary {topic}.temp.json and then rename
-    let temp_tag_path = tag_path.with_extension(format!("{}.temp.json", topic));
-    let mut file = smol::fs::File::create(&temp_tag_path).await?;
-    file.write_all(serde_json::to_string(&index)?.as_bytes()).await?;
-    std::fs::rename(temp_tag_path, &tag_path)?;
+    // If topics is empty remove the index file
+    if index.topics.is_empty() {
+        smol::fs::remove_file(&tag_path).await?;
+    } else {
+        // Write to a temporary {topic}.temp.json and then rename
+        let temp_tag_path = tag_path.with_extension(format!("{}.temp.json", topic));
+        let mut file = smol::fs::File::create(&temp_tag_path).await?;
+        file.write_all(serde_json::to_string(&index)?.as_bytes()).await?;
+        std::fs::rename(temp_tag_path, &tag_path.with_extension("json"))?;
+    }
 
     Ok(())
 }
diff --git a/ui/src/components/TopicSettings.svelte b/ui/src/components/TopicSettings.svelte
index ce74a98..8991450 100644
--- a/ui/src/components/TopicSettings.svelte
+++ b/ui/src/components/TopicSettings.svelte
@@ -1,18 +1,49 @@
 <script>
-    import { create_index, get_tags } from "$lib/img.ts";
+    import { create_index, get_tags, add_tag, rm_tag } from "$lib/img.ts";
     import Nav from './Nav.svelte';
     export let topic;
-    let topics;
+    let tag;
     let submit_result;
+    let tags = get_tags(topic);
 
-    function parse_topics_list(topics) {
-        return topics.split(",").map((topic) => topic.trim());
+    async function rm_tag_handler(tag) {
+        let res = await rm_tag(topic, tag);
+        if (!res.ok) {
+            submit_result = res;
+        }
+        // Reload
+        tags = await get_tags(topic);
     }
-    async function submit_index() {
-        submit_result = await create_index(topic, parse_topics_list(topics));
+    async function add_tag_handler() {
+        let res = await add_tag(topic, tag);
+        if (!res.ok) {
+            submit_result = res;
+        }
+        // Reload
+        tags = await get_tags(topic);
     }
 </script>
 
+<style>
+    .tag-list {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+    .tag {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .tag span {
+        margin-right: 0.5em;
+        padding: 0.5em;
+        border: 1px solid black;
+        border-radius: 0.3em;
+    }
+</style>
+
 <div class="vert-new-form">
     <div class="new-form">
         <h1>Add Tags</h1>
@@ -20,19 +51,30 @@
         <!-- list of tags -->
         <h3>Current Tags</h3>
         <ul>
-            {#await get_tags(topic)}
+            {#await tags}
                 <li>loading...</li>
             {:then tags}
-                {#each tags as tag}
-                    <li>{tag}</li>
-                {/each}
+                <div class="tag-list">
+                    {#each tags as tag}
+                        <div class="tag">
+                            <span>
+                                {tag}
+                                <button on:click={() => rm_tag_handler(tag)}>X</button>
+                            </span>
+                        </div>
+                    {/each}
+                </div>
             {:catch error}
                 <li>error: {error.message}</li>
             {/await}
         </ul>
 
-        <input bind:value={topics} type="text" class="nt-field nt-form" name="topics" placeholder="topic-1, topic-2, ..." />
-
-        <button class="nt-form submit-form" on:click={submit_index}>Add Tag</button>
+        <div class="add-form">
+            <input bind:value={tag} type="text" class="nt-field nt-form" name="topics" placeholder="topic-1, topic-2, ..." />
+            <button class="nt-form submit-form" on:click={() => add_tag_handler()}>Add Tag</button>
+            {#if submit_result}
+                <p>{submit_result}</p>
+            {/if}
+        </div>
     </div>
 </div>
diff --git a/ui/src/lib/img.ts b/ui/src/lib/img.ts
index f6c7990..1b68b51 100644
--- a/ui/src/lib/img.ts
+++ b/ui/src/lib/img.ts
@@ -1,12 +1,30 @@
 // Img server address
-//export const img_server: string = "http://127.0.0.1:2342";
-export const img_server: string = "https://img.smdhi.xyz:8080";
+export const img_server: string = "http://127.0.0.1:2342";
+//export const img_server: string = "https://img.smdhi.xyz:8080";
 
 interface Index {
     name: string;
     topics: string[];
 }
 
+export async function rm_tag(topic: string, tag: string): Promise<string> {
+    let response = await fetch(`${img_server}/${topic}/remove-tag`, {
+        method: 'POST',
+        body: `"${tag}"`,
+    });
+
+    return response;
+}
+
+export async function add_tag(topic: string, tag: string): Promise<string> {
+    let response = await fetch(`${img_server}/${topic}/new-tag`, {
+        method: 'POST',
+        body: `"${tag}"`,
+    });
+    
+    return response;
+}
+
 export async function get_tags(topic: string): Promise<string[]> {
     let response = await fetch(`${img_server}/${topic}/tags`);