diff --git a/ui/components/PresetForm.vue b/ui/components/PresetForm.vue
index b155187c..558dff89 100644
--- a/ui/components/PresetForm.vue
+++ b/ui/components/PresetForm.vue
@@ -208,21 +208,21 @@ const props = defineProps({
   },
 })
 
-const toast = useToast();
-const convertInProgress = ref(false);
-const form = reactive(props.preset);
-const opts = ref('');
-const json_preset = ref('');
-const importExpanded = ref(false);
-const convertExpanded = ref(false);
+const toast = useToast()
+const convertInProgress = ref(false)
+const form = reactive( JSON.parse(JSON.stringify(props.preset)))
+const opts = ref('')
+const json_preset = ref('')
+const importExpanded = ref(false)
+const convertExpanded = ref(false)
 
 onMounted(() => {
   if (props.preset?.args && (typeof props.preset.args === 'object')) {
-    form.args = JSON.stringify(props.preset.args, null, 2);
+    form.args = JSON.stringify(props.preset.args, null, 2)
   }
 
   if (props.preset?.postprocessors && (typeof props.preset.postprocessors === 'object')) {
-    form.postprocessors = JSON.stringify(props.preset.postprocessors, null, 2);
+    form.postprocessors = JSON.stringify(props.preset.postprocessors, null, 2)
   }
 })
 
@@ -231,7 +231,7 @@ const checkInfo = async () => {
   for (const key of required) {
     if (!form[key]) {
       toast.error(`The ${key} field is required.`);
-      return;
+      return
     }
   }
 
diff --git a/ui/components/TaskForm.vue b/ui/components/TaskForm.vue
index 338dbe53..e9b7393d 100644
--- a/ui/components/TaskForm.vue
+++ b/ui/components/TaskForm.vue
@@ -1,186 +1,188 @@
 <template>
   <main class="columns mt-2">
     <div class="column">
-      <form id="taskForm" @submit.prevent="checkInfo()">
-        <div class="box">
-          <div class="columns is-multiline is-mobile">
-            <div class="column is-12">
-              <h1 class="title is-6" style="border-bottom: 1px solid #dbdbdb;">
-                <span class="icon-text">
-                  <span class="icon"><i class="fa-solid" :class="reference ? 'fa-cog' : 'fa-plus'" /></span>
-                  <span>{{ reference ? 'Edit' : 'Add' }}</span>
-                </span>
-              </h1>
-            </div>
+      <form id="taskForm" @submit.prevent="checkInfo()" class="box">
+        <div class="columns is-multiline is-mobile">
+          <div class="column is-12">
+            <h1 class="title is-6" style="border-bottom: 1px solid #dbdbdb;">
+              <span class="icon-text">
+                <span class="icon"><i class="fa-solid" :class="reference ? 'fa-cog' : 'fa-plus'" /></span>
+                <span>{{ reference ? 'Edit' : 'Add' }}</span>
+              </span>
+            </h1>
+          </div>
 
-            <div class="column is-6-tablet is-12-mobile">
-              <div class="field">
-                <label class="label is-inline" for="name">
-                  Task name
-                </label>
-                <div class="control has-icons-left">
-                  <input type="text" class="input" id="name" v-model="form.name" :disabled="addInProgress">
-                  <span class="icon is-small is-left"><i class="fa-solid fa-user" /></span>
+          <div class="column is-6-tablet is-12-mobile">
+            <div class="field">
+              <label class="label is-inline" for="name" v-text="'Name'" />
+              <div class="control has-icons-left">
+                <input type="text" class="input" id="name" v-model="form.name" :disabled="addInProgress">
+                <span class="icon is-small is-left"><i class="fa-solid fa-user" /></span>
+              </div>
+              <span class="help">
+                <span class="icon"><i class="fa-solid fa-info" /></span>
+                <span>Task name is used to identify the task in the task list and in logs.</span>
+              </span>
+            </div>
+          </div>
+
+          <div class="column is-6-tablet is-12-mobile">
+            <div class="field">
+              <label class="label is-inline" for="url" v-text="'URL'" />
+              <div class="control has-icons-left">
+                <input type="url" class="input" id="url" v-model="form.url" :disabled="addInProgress">
+                <span class="icon is-small is-left"><i class="fa-solid fa-link" /></span>
+              </div>
+              <span class="help">
+                <span class="icon"><i class="fa-solid fa-info" /></span>
+                <span>The channel or playlist URL.</span>
+              </span>
+            </div>
+          </div>
+
+          <div class="column is-6-tablet is-12-mobile">
+            <div class="field">
+              <label class="label is-inline" for="folder">
+                Download path
+              </label>
+              <div class="control has-icons-left">
+                <input type="text" class="input" id="folder" placeholder="Leave empty to use default download path"
+                  v-model="form.folder" :disabled="addInProgress" list="folders">
+                <span class="icon is-small is-left"><i class="fa-solid fa-folder" /></span>
+              </div>
+              <span class="help">
+                <span class="icon"><i class="fa-solid fa-info" /></span>
+                <span>Downloads are relative to download path, defaults to root path if not set.</span>
+              </span>
+            </div>
+          </div>
+
+          <div class="column is-6-tablet is-12-mobile">
+            <div class="field">
+              <label class="label is-inline" for="folder">
+                Preset
+              </label>
+              <div class="control has-icons-left">
+                <div class="select is-fullwidth">
+                  <select id="preset" class="is-fullwidth" v-model="form.preset"
+                    :disabled="addInProgress || hasFormatInConfig"
+                    v-tooltip.bottom="hasFormatInConfig ? 'Presets are disabled. Format key is present in the config.' : ''">
+                    <option v-for="item in config.presets" :key="item.name" :value="item.name">
+                      {{ item.name }}
+                    </option>
+                  </select>
                 </div>
-                <span class="help">
-                  <span class="icon"><i class="fa-solid fa-info" /></span>
-                  <span>Task name is used to identify the task in the task list.</span>
+                <span class="icon is-small is-left"><i class="fa-solid fa-tv" /></span>
+              </div>
+              <span class="help">
+                <span class="icon"><i class="fa-solid fa-info" /></span>
+                <span>Select the preset to use for this URL. The preset will be ignored if format key is present in
+                  config.</span>
+              </span>
+            </div>
+          </div>
+
+          <div class="column is-6-tablet is-12-mobile">
+            <div class="field">
+              <label class="label is-inline" for="timer">
+                CRON expression timer.
+              </label>
+              <div class="control has-icons-left">
+                <input type="text" class="input" id="timer" placeholder="leave empty to run once every hour."
+                  v-model="form.timer" :disabled="addInProgress">
+                <span class="icon is-small is-left"><i class="fa-solid fa-clock" /></span>
+              </div>
+              <span class="help">
+                <span class="icon"><i class="fa-solid fa-info" /></span>
+                <span>
+                  The CRON timer expression to use for this task. If not set, the task will run once an hour in a
+                  random
+                  minute. For more information on CRON expressions, see <NuxtLink to="https://crontab.guru/"
+                    target="_blank">crontab.guru</NuxtLink>.
                 </span>
-              </div>
+              </span>
             </div>
+          </div>
 
-            <div class="column is-6-tablet is-12-mobile">
-              <div class="field">
-                <label class="label is-inline" for="url">
-                  URL
-                </label>
-                <div class="control has-icons-left">
-                  <input type="url" class="input" id="url" v-model="form.url" :disabled="addInProgress">
-                  <span class="icon is-small is-left"><i class="fa-solid fa-link" /></span>
-                </div>
-                <span class="help">
-                  <span class="icon"><i class="fa-solid fa-info" /></span>
-                  <span>The channel or playlist URL.</span>
+          <div class="column is-6-tablet is-12-mobile" v-if="showAdvanced">
+            <div class="field">
+              <label class="label is-inline" for="output_template">
+                Output template
+              </label>
+              <div class="control has-icons-left">
+                <input type="text" class="input" id="output_template" placeholder="The output template to use"
+                  v-model="form.template" :disabled="addInProgress">
+                <span class="icon is-small is-left"><i class="fa-solid fa-file" /></span>
+              </div>
+              <span class="help">
+                <span class="icon"><i class="fa-solid fa-info" /></span>
+                <span>The output template to use, if not set, it will defaults to
+                  <code>{{ config.app.output_template }}</code>.
+                  For more information <NuxtLink href="https://github.com/yt-dlp/yt-dlp#output-template"
+                    target="_blank">visit this url</NuxtLink>.
                 </span>
-              </div>
+              </span>
             </div>
+          </div>
 
-            <div class="column is-6-tablet is-12-mobile">
-              <div class="field">
-                <label class="label is-inline" for="folder">
-                  Download path
-                </label>
-                <div class="control has-icons-left">
-                  <input type="text" class="input" id="folder" placeholder="Leave empty to use default download path"
-                    v-model="form.folder" :disabled="addInProgress" list="folders">
-                  <span class="icon is-small is-left"><i class="fa-solid fa-folder" /></span>
-                </div>
-                <span class="help">
-                  <span class="icon"><i class="fa-solid fa-info" /></span>
-                  <span>Downloads are relative to download path, defaults to root path if not set.</span>
-                </span>
+          <div class="column is-6-tablet is-12-mobile" v-if="showAdvanced">
+            <div class="field">
+              <label class="label is-inline" for="config" v-tooltip="'Extends current global yt-dlp config. (JSON)'">
+                JSON yt-dlp config or CLI options. <NuxtLink
+                  v-if="form.config && (typeof form.config === 'string') && !form.config.trim().startsWith('{')"
+                  @click="convertOptions()">Convert to JSON</NuxtLink>
+              </label>
+              <div class="control">
+                <textarea class="textarea" id="config" v-model="form.config" :disabled="addInProgress"
+                  placeholder="--no-embed-metadata --no-embed-thumbnail"></textarea>
               </div>
+              <span class="help">
+                <span class="icon"><i class="fa-solid fa-info" /></span>
+                <span> Extends current global yt-dlp config with given options. Some fields are ignored like
+                  <code>cookiefile</code>, <code>paths</code>, and <code>outtmpl</code> etc. Warning: Use with caution
+                  some of those options can break yt-dlp or the frontend.</span>
+              </span>
             </div>
+          </div>
 
-            <div class="column is-6-tablet is-12-mobile">
-              <div class="field">
-                <label class="label is-inline" for="folder">
-                  Preset
-                </label>
-                <div class="control has-icons-left">
-                  <div class="select is-fullwidth">
-                    <select id="preset" class="is-fullwidth" v-model="form.preset"
-                      :disabled="addInProgress || hasFormatInConfig"
-                      v-tooltip.bottom="hasFormatInConfig ? 'Presets are disabled. Format key is present in the config.' : ''">
-                      <option v-for="item in config.presets" :key="item.name" :value="item.name">
-                        {{ item.name }}
-                      </option>
-                    </select>
-                  </div>
-                  <span class="icon is-small is-left"><i class="fa-solid fa-tv" /></span>
-                </div>
-                <span class="help">
-                  <span class="icon"><i class="fa-solid fa-info" /></span>
-                  <span>Select the preset to use for this URL. The preset will be ignored if format key is present in
-                    config.</span>
-                </span>
+          <div class="column is-6-tablet is-12-mobile" v-if="showAdvanced">
+            <div class="field">
+              <label class="label is-inline" for="cookies" v-tooltip="'Netscape HTTP Cookie format.'">Cookies</label>
+              <div class="control">
+                <textarea class="textarea" id="cookies" v-model="form.cookies" :disabled="addInProgress"></textarea>
               </div>
+              <span class="help">
+                <span class="icon"><i class="fa-solid fa-info" /></span>
+                <span>Use the <NuxtLink target="_blank"
+                    to="https://github.com/yt-dlp/yt-dlp/wiki/FAQ#how-do-i-pass-cookies-to-yt-dlp">
+                    Recommended addon</NuxtLink> by yt-dlp to export cookies. The cookies MUST be in Netscape HTTP
+                  Cookie format.</span>
+              </span>
             </div>
+          </div>
 
-            <div class="column is-6-tablet is-12-mobile">
-              <div class="field">
-                <label class="label is-inline" for="timer">
-                  CRON expression timer.
-                </label>
-                <div class="control has-icons-left">
-                  <input type="text" class="input" id="timer" placeholder="leave empty to run once every hour."
-                    v-model="form.timer" :disabled="addInProgress">
-                  <span class="icon is-small is-left"><i class="fa-solid fa-clock" /></span>
-                </div>
-                <span class="help">
-                  <span class="icon"><i class="fa-solid fa-info" /></span>
-                  <span>
-                    The CRON timer expression to use for this task. If not set, the task will run once an hour in a
-                    random
-                    minute. For more information on CRON expressions, see <NuxtLink to="https://crontab.guru/"
-                      target="_blank">crontab.guru</NuxtLink>.
-                  </span>
-                </span>
-              </div>
+          <div class="column is-12">
+            <div class="field is-grouped is-grouped-right">
+              <p class="control">
+                <button class="button is-primary" :disabled="addInProgress" type="submit"
+                  :class="{ 'is-loading': addInProgress }" form="taskForm">
+                  <span class="icon"><i class="fa-solid fa-save" /></span>
+                  <span>Save</span>
+                </button>
+              </p>
+              <p class="control">
+                <button class="button is-danger" @click="emitter('cancel')" :disabled="addInProgress" type="button">
+                  <span class="icon"><i class="fa-solid fa-times" /></span>
+                  <span>Cancel</span>
+                </button>
+              </p>
+              <p class="control">
+                <button class="button is-info" type="button" @click="showAdvanced = !showAdvanced">
+                  <span class="icon"><i class="fa-solid fa-cog" /></span>
+                  <span>Opts</span>
+                </button>
+              </p>
             </div>
-
-            <div class="column is-6-tablet is-12-mobile">
-              <div class="field">
-                <label class="label is-inline" for="output_template">
-                  Output template
-                </label>
-                <div class="control has-icons-left">
-                  <input type="text" class="input" id="output_template" placeholder="The output template to use"
-                    v-model="form.template" :disabled="addInProgress">
-                  <span class="icon is-small is-left"><i class="fa-solid fa-file" /></span>
-                </div>
-                <span class="help">
-                  <span class="icon"><i class="fa-solid fa-info" /></span>
-                  <span>The output template to use, if not set, it will defaults to
-                    <code>{{ config.app.template }}</code></span>
-                </span>
-              </div>
-            </div>
-
-            <div class="column is-6-tablet is-12-mobile">
-              <div class="field">
-                <label class="label is-inline" for="config" v-tooltip="'Extends current global yt-dlp config. (JSON)'">
-                  JSON yt-dlp config or CLI options. <NuxtLink
-                    v-if="form.config && (typeof form.config === 'string') && !form.config.trim().startsWith('{')"
-                    @click="convertOptions()">Convert to JSON</NuxtLink>
-                </label>
-                <div class="control">
-                  <textarea class="textarea" id="config" v-model="form.config" :disabled="addInProgress"
-                    placeholder="--no-embed-metadata --no-embed-thumbnail"></textarea>
-                </div>
-                <span class="help">
-                  <span class="icon"><i class="fa-solid fa-info" /></span>
-                  <span> Extends current global yt-dlp config with given options. Some fields are ignored like
-                    <code>cookiefile</code>, <code>paths</code>, and <code>outtmpl</code> etc. Warning: Use with caution
-                    some of those options can break yt-dlp or the frontend.</span>
-                </span>
-              </div>
-            </div>
-
-            <div class="column is-6-tablet is-12-mobile">
-              <div class="field">
-                <label class="label is-inline" for="cookies" v-tooltip="'Netscape HTTP Cookie format.'">Cookies</label>
-                <div class="control">
-                  <textarea class="textarea" id="cookies" v-model="form.cookies" :disabled="addInProgress"></textarea>
-                </div>
-                <span class="help">
-                  <span class="icon"><i class="fa-solid fa-info" /></span>
-                  <span>Use the <NuxtLink target="_blank"
-                      to="https://github.com/yt-dlp/yt-dlp/wiki/FAQ#how-do-i-pass-cookies-to-yt-dlp">
-                      Recommended addon</NuxtLink> by yt-dlp to export cookies. The cookies MUST be in Netscape HTTP
-                    Cookie format.</span>
-                </span>
-              </div>
-            </div>
-
-            <div class="column is-12">
-              <div class="field is-grouped is-grouped-right">
-                <p class="control">
-                  <button class="button is-primary" :disabled="addInProgress" type="submit"
-                    :class="{ 'is-loading': addInProgress }" form="taskForm">
-                    <span class="icon"><i class="fa-solid fa-save" /></span>
-                    <span>Save</span>
-                  </button>
-                </p>
-                <p class="control">
-                  <button class="button is-danger" @click="emitter('cancel')" :disabled="addInProgress" type="button">
-                    <span class="icon"><i class="fa-solid fa-times" /></span>
-                    <span>Cancel</span>
-                  </button>
-                </p>
-              </div>
-            </div>
-
           </div>
         </div>
       </form>
@@ -192,6 +194,7 @@
 </template>
 
 <script setup>
+import { useStorage } from '@vueuse/core'
 import { parseExpression } from 'cron-parser'
 import { request } from '~/utils/index'
 
@@ -199,6 +202,7 @@ const emitter = defineEmits(['cancel', 'submit']);
 const toast = useToast();
 const config = useConfigStore();
 const convertInProgress = ref(false);
+const showAdvanced = useStorage('task.showAdvanced', false);
 
 const props = defineProps({
   reference: {
diff --git a/ui/pages/presets.vue b/ui/pages/presets.vue
index dc973230..6deb7ecb 100644
--- a/ui/pages/presets.vue
+++ b/ui/pages/presets.vue
@@ -53,12 +53,9 @@ div.is-centered {
           <div class="column is-6" v-for="item in presetsNoDefault" :key="item.id">
             <div class="card">
               <header class="card-header">
-                <div class="card-header-title is-text-overflow is-block">
-                  <NuxtLink target="_blank" :href="item.url">{{ item.name }}</NuxtLink>
-                </div>
+                <div class="card-header-title is-text-overflow is-block" v-text="item.name" />
                 <div class="card-header-icon">
-                  <a class="has-text-primary" v-tooltip="'Copy preset.'"
-                    @click.prevent="copyText(JSON.stringify(item))">
+                  <a class="has-text-primary" v-tooltip="'Copy preset.'" @click.prevent="copyItem(item)">
                     <span class="icon"><i class="fa-solid fa-copy" /></span>
                   </a>
                   <button @click="item.raw = !item.raw">
@@ -83,7 +80,7 @@ div.is-centered {
               <div class="card-footer">
                 <div class="card-footer-item">
                   <button class="button is-warning is-fullwidth" @click="editItem(item);">
-                    <span class="icon"><i class="fa-solid fa-trash-can" /></span>
+                    <span class="icon"><i class="fa-solid fa-cog" /></span>
                     <span>Edit</span>
                   </button>
                 </div>
@@ -252,4 +249,24 @@ const editItem = item => {
 }
 
 onMounted(async () => socket.isConnected ? await reloadContent(true) : '')
+
+const copyItem = item => {
+  let data = JSON.parse(JSON.stringify(item))
+  const keys = ['id', 'default', 'raw']
+  keys.forEach(key => {
+    if (key in data) {
+      delete data[key]
+    }
+  })
+
+  if (data.args && (typeof data.args === 'string')) {
+    data.args = JSON.parse(data.args)
+  }
+
+  if (data.postprocessors && (typeof data.postprocessors === 'string')) {
+    data.postprocessors = JSON.parse(data.postprocessors)
+  }
+
+  return copyText(JSON.stringify(data))
+}
 </script>
diff --git a/ui/pages/tasks.vue b/ui/pages/tasks.vue
index 9fa32c7e..535e1a5f 100644
--- a/ui/pages/tasks.vue
+++ b/ui/pages/tasks.vue
@@ -79,11 +79,11 @@ div.is-centered {
                   </p>
                   <p>
                     <span class="icon"><i class="fa-solid fa-folder" /></span>
-                    <span>{{ calcPath(item.folder) }}</span>
+                    <span>{{ item.folder ? calcPath(item.folder) : config.app.download_path }}</span>
                   </p>
                   <p>
                     <span class="icon"><i class="fa-solid fa-file" /></span>
-                    <span>{{ item.template ?? config.app.output_template }}</span>
+                    <span>{{ item.template ? item.template : config.app.output_template }}</span>
                   </p>
                   <p>
                     <span class="icon"><i class="fa-solid fa-tv" /></span>
@@ -99,7 +99,7 @@ div.is-centered {
               <div class="card-footer">
                 <div class="card-footer-item">
                   <button class="button is-warning is-fullwidth" @click="editItem(item);">
-                    <span class="icon"><i class="fa-solid fa-trash-can" /></span>
+                    <span class="icon"><i class="fa-solid fa-cog" /></span>
                     <span>Edit</span>
                   </button>
                 </div>
@@ -109,6 +109,12 @@ div.is-centered {
                     <span>Delete</span>
                   </button>
                 </div>
+                <div class="card-footer-item">
+                  <button class="button is-purple is-fullwidth" @click="runNow(item)">
+                    <span class="icon"><i class="fa-solid fa-microchip" /></span>
+                    <span>Run now</span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -146,6 +152,7 @@ watch(() => config.app.basic_mode, async () => {
 
 watch(() => socket.isConnected, async () => {
   if (socket.isConnected && initialLoad.value) {
+    socket.on('status', statusHandler)
     await reloadContent(true)
     initialLoad.value = false
   }
@@ -278,7 +285,13 @@ const calcPath = path => {
   return loc
 }
 
-onMounted(async () => socket.isConnected ? await reloadContent(true) : '')
+onMounted(async () => {
+  if (!socket.isConnected){
+    return;
+  }
+  socket.on('status', statusHandler)
+  await reloadContent(true)
+});
 
 const tryParse = expression => {
   try {
@@ -287,4 +300,53 @@ const tryParse = expression => {
     return "Invalid"
   }
 }
+
+const runNow = item => {
+  if (true !== confirm(`Run '${item.name}' now? it will also run at the scheduled time.`)) {
+    return
+  }
+
+  let data = {
+    url: item.url,
+    preset: item.preset,
+  }
+
+  if (item.folder) {
+    data.folder = item.folder
+  }
+
+  if (item.template) {
+    data.template = item.template
+  }
+
+  if (item.cookies) {
+    data.cookies = item.cookies
+  }
+
+  if (item.config) {
+    if (typeof item.config === 'object') {
+      data.config = JSON.stringify(item.config)
+    }
+
+    try {
+      JSON.parse(data.config)
+    } catch (e) {
+      toast.error(`Invalid JSON yt-dlp config. ${e.message}`)
+      return
+    }
+  }
+
+  socket.emit('add_url', data)
+}
+
+onUnmounted(() => socket.off('status', statusHandler))
+
+const statusHandler = async stream => {
+  const { status, msg } = JSON.parse(stream)
+
+  if ('error' === status) {
+    toast.error(msg)
+    return
+  }
+}
 </script>