diff --git a/src/renderer/components/external-player-settings/external-player-settings.vue b/src/renderer/components/external-player-settings/external-player-settings.vue
index 59ab3880..c2298dc2 100644
--- a/src/renderer/components/external-player-settings/external-player-settings.vue
+++ b/src/renderer/components/external-player-settings/external-player-settings.vue
@@ -33,7 +33,7 @@
     >
       <ft-input
         :placeholder="$t('Settings.External Player Settings.Custom External Player Executable')"
-        :show-arrow="false"
+        :show-action-button="false"
         :show-label="true"
         :value="externalPlayerExecutable"
         :tooltip="$t('Tooltips.External Player Settings.Custom External Player Executable')"
@@ -41,7 +41,7 @@
       />
       <ft-input
         :placeholder="$t('Settings.External Player Settings.Custom External Player Arguments')"
-        :show-arrow="false"
+        :show-action-button="false"
         :show-label="true"
         :value="externalPlayerCustomArgs"
         :tooltip="$t('Tooltips.External Player Settings.Custom External Player Arguments')"
diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index 8e1d2e8d..7b69b029 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -90,10 +90,17 @@
   position: absolute;
   padding: 10px 8px;
   top: 5px;
-  right: 0px;
-  cursor: pointer;
+  right: 0;
   border-radius: 200px 200px 200px 200px;
   color: var(--primary-text-color);
+  /* this should look disabled by default */
+  opacity: 50%;
+}
+
+.inputAction.enabled {
+  opacity: 100%;
+  /* Only look respond to cursor when enabled */
+  cursor: pointer;
 }
 
 .search ::-webkit-calendar-picker-indicator {
@@ -108,7 +115,7 @@
   color: #EEEEEE;
 }
 
-.ft-input-component.showArrow .ft-input {
+.ft-input-component.showActionButton .ft-input {
   /*
   With arrow present means
   the text might get under the arrow with normal padding
@@ -116,25 +123,25 @@
   padding-right: 2em;
 }
 
-.inputAction:hover {
+.inputAction.enabled:hover {
   background-color: var(--side-nav-hover-color);
   -moz-transition: background 0.2s ease-in;
   -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 
-.forceTextColor .inputAction:hover {
+.forceTextColor .inputAction.enabled:hover {
   background-color: var(--primary-color-hover);
 }
 
-.inputAction:active {
+.inputAction.enabled:active {
   background-color: var(--tertiary-text-color);
   -moz-transition: background 0.2s ease-in;
   -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 
-.forceTextColor .inputAction:active {
+.forceTextColor .inputAction.enabled:active {
   background-color: var(--primary-color-active);
 }
 
diff --git a/src/renderer/components/ft-input/ft-input.js b/src/renderer/components/ft-input/ft-input.js
index d3b162fb..87641d6a 100644
--- a/src/renderer/components/ft-input/ft-input.js
+++ b/src/renderer/components/ft-input/ft-input.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import FtTooltip from '../ft-tooltip/ft-tooltip.vue'
+import { mapActions } from 'vuex'
 
 export default Vue.extend({
   name: 'FtInput',
@@ -15,7 +16,7 @@ export default Vue.extend({
       type: String,
       default: ''
     },
-    showArrow: {
+    showActionButton: {
       type: Boolean,
       default: true
     },
@@ -63,7 +64,9 @@ export default Vue.extend({
       },
       // This button should be invisible on app start
       // As the text input box should be empty
-      clearTextButtonVisible: false
+      clearTextButtonExisting: false,
+      clearTextButtonVisible: false,
+      actionButtonIconName: 'search'
     }
   },
   computed: {
@@ -91,12 +94,19 @@ export default Vue.extend({
       if (newVal) {
         // The button needs to be visible **immediately**
         // To allow user to see the transition
-        this.clearTextButtonVisible = true
+        this.clearTextButtonExisting = true
+        // The transition is not rendered if this property is set right after
+        // It's visible
+        setTimeout(() => {
+          this.clearTextButtonVisible = true
+        }, 0)
       } else {
-        // Hide the button after the transition
+        // Hide the button with transition
+        this.clearTextButtonVisible = false
+        // Remove the button after the transition
         // 0.2s in CSS = 200ms in JS
         setTimeout(() => {
-          this.clearTextButtonVisible = false
+          this.clearTextButtonExisting = false
         }, 200)
       }
     }
@@ -109,6 +119,9 @@ export default Vue.extend({
   },
   methods: {
     handleClick: function () {
+      // No action if no input text
+      if (!this.inputDataPresent) { return }
+
       this.searchState.showOptions = false
       this.$emit('input', this.inputData)
       this.$emit('click', this.inputData)
@@ -118,11 +131,13 @@ export default Vue.extend({
       if (this.isSearch &&
         this.searchState.selectedOption !== -1 &&
         this.inputData === this.dataList[this.searchState.selectedOption]) { return }
+      this.handleActionIconChange()
       this.$emit('input', this.inputData)
     },
 
     handleClearTextClick: function () {
       this.inputData = ''
+      this.handleActionIconChange()
       this.$emit('input', this.inputData)
 
       // Focus on input element after text is clear for better UX
@@ -130,6 +145,55 @@ export default Vue.extend({
       inputElement.focus()
     },
 
+    handleActionIconChange: function() {
+      // Only need to update icon if visible
+      if (!this.showActionButton) { return }
+
+      if (!this.inputDataPresent) {
+        // Change back to default icon if text is blank
+        this.actionButtonIconName = 'search'
+        return
+      }
+
+      // Update action button icon according to input
+      try {
+        this.getYoutubeUrlInfo(this.inputData).then((result) => {
+          let isYoutubeLink = false
+
+          switch (result.urlType) {
+            case 'video':
+            case 'playlist':
+            case 'search':
+            case 'channel':
+              isYoutubeLink = true
+              break
+            case 'hashtag':
+              // TODO: Implement a hashtag related view
+              // isYoutubeLink is already `false`
+              break
+
+            case 'invalid_url':
+            default: {
+              // isYoutubeLink is already `false`
+            }
+          }
+
+          if (isYoutubeLink) {
+            // Go to URL (i.e. Video/Playlist/Channel
+            this.actionButtonIconName = 'arrow-right'
+          } else {
+            // Search with text
+            this.actionButtonIconName = 'search'
+          }
+        })
+      } catch (ex) {
+        // On exception, consider text as invalid URL
+        this.actionButtonIconName = 'search'
+        // Rethrow exception
+        throw ex
+      }
+    },
+
     addListener: function () {
       const inputElement = document.getElementById(this.id)
 
@@ -178,6 +242,10 @@ export default Vue.extend({
       if (this.selectOnFocus) {
         e.target.select()
       }
-    }
+    },
+
+    ...mapActions([
+      'getYoutubeUrlInfo'
+    ])
   }
 })
diff --git a/src/renderer/components/ft-input/ft-input.vue b/src/renderer/components/ft-input/ft-input.vue
index 3e3cf733..bd78dceb 100644
--- a/src/renderer/components/ft-input/ft-input.vue
+++ b/src/renderer/components/ft-input/ft-input.vue
@@ -4,7 +4,7 @@
     :class="{
       search: isSearch,
       forceTextColor: forceTextColor,
-      showArrow: showArrow,
+      showActionButton: showActionButton,
       showClearTextButton: showClearTextButton
     }"
   >
@@ -21,11 +21,11 @@
       />
     </label>
     <font-awesome-icon
-      v-if="showClearTextButton && clearTextButtonVisible"
+      v-if="showClearTextButton && clearTextButtonExisting"
       icon="times-circle"
       class="clearInputTextButton"
       :class="{
-        visible: inputDataPresent
+        visible: clearTextButtonVisible
       }"
       tabindex="0"
       role="button"
@@ -49,9 +49,12 @@
       @keydown="e => handleKeyDown(e.keyCode)"
     >
     <font-awesome-icon
-      v-if="showArrow"
-      icon="arrow-right"
+      v-if="showActionButton"
+      :icon="actionButtonIconName"
       class="inputAction"
+      :class="{
+        enabled: inputDataPresent
+      }"
       @click="handleClick"
     />
 
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.vue b/src/renderer/components/ft-profile-edit/ft-profile-edit.vue
index bd2c0d5b..e6c07270 100644
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.vue
+++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.vue
@@ -7,7 +7,7 @@
           class="profileName"
           placeholder="Profile Name"
           :value="profileName"
-          :show-arrow="false"
+          :show-action-button="false"
           @input="e => profileName = e"
         />
       </ft-flex-box>
@@ -40,7 +40,7 @@
           class="profileName"
           placeholder=""
           :value="profileBgColor"
-          :show-arrow="false"
+          :show-action-button="false"
           :disabled="true"
         />
       </ft-flex-box>
diff --git a/src/renderer/components/general-settings/general-settings.vue b/src/renderer/components/general-settings/general-settings.vue
index 39af5b5b..35ab256e 100644
--- a/src/renderer/components/general-settings/general-settings.vue
+++ b/src/renderer/components/general-settings/general-settings.vue
@@ -96,7 +96,7 @@
     <ft-flex-box class="generalSettingsFlexBox">
       <ft-input
         :placeholder="$t('Settings.General Settings.Current Invidious Instance')"
-        :show-arrow="false"
+        :show-action-button="false"
         :show-label="true"
         :value="currentInvidiousInstance"
         :data-list="invidiousInstancesList"
diff --git a/src/renderer/components/proxy-settings/proxy-settings.vue b/src/renderer/components/proxy-settings/proxy-settings.vue
index 79b9b024..946f578c 100644
--- a/src/renderer/components/proxy-settings/proxy-settings.vue
+++ b/src/renderer/components/proxy-settings/proxy-settings.vue
@@ -25,14 +25,14 @@
     <ft-flex-box>
       <ft-input
         :placeholder="$t('Settings.Proxy Settings.Proxy Host')"
-        :show-arrow="false"
+        :show-action-button="false"
         :show-label="true"
         :value="proxyHostname"
         @input="handleUpdateProxyHostname"
       />
       <ft-input
         :placeholder="$t('Settings.Proxy Settings.Proxy Port Number')"
-        :show-arrow="false"
+        :show-action-button="false"
         :show-label="true"
         :value="proxyPort"
         @input="handleUpdateProxyPort"
diff --git a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue
index 06ef8541..a8e4497b 100644
--- a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue
+++ b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue
@@ -23,7 +23,7 @@
     <ft-flex-box>
       <ft-input
         :placeholder="$t('Settings.SponsorBlock Settings[\'SponsorBlock API Url (Default is https://sponsor.ajay.app)\']')"
-        :show-arrow="false"
+        :show-action-button="false"
         :show-label="true"
         :value="sponsorBlockUrl"
         @input="handleUpdateSponsorBlockUrl"