diff --git a/src/components/Controls/AttachImage.vue b/src/components/Controls/AttachImage.vue
index 2adf844a..4a1f8ea7 100644
--- a/src/components/Controls/AttachImage.vue
+++ b/src/components/Controls/AttachImage.vue
@@ -50,7 +50,7 @@
       :class="[!isReadOnly ? 'group-hover:flex' : '']"
       style="background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(2px)"
     >
-      <button class="bg-gray-300 p-0.5 rounded mb-1" @click="handleClick">
+      <button class="bg-gray-100 p-0.5 rounded mb-1" @click="handleClick">
         <FeatherIcon
           :name="shouldClear ? 'x' : 'upload'"
           class="w-4 h-4 text-gray-600"
diff --git a/src/components/Controls/Attachment.vue b/src/components/Controls/Attachment.vue
index 87760201..93129b98 100644
--- a/src/components/Controls/Attachment.vue
+++ b/src/components/Controls/Attachment.vue
@@ -21,25 +21,21 @@
       />
 
       <!-- Buttons -->
-      <div class="me-2 flex gap-2">
+      <div class="me-2 flex gap-1">
         <!-- Upload Button -->
-        <button v-if="!value" class="bg-gray-300 p-0.5 rounded" @click="upload">
+        <button v-if="!value" class="p-0.5 rounded" @click="upload">
           <FeatherIcon name="upload" class="h-4 w-4 text-gray-600" />
         </button>
 
         <!-- Download Button -->
-        <button
-          v-if="value"
-          class="bg-gray-300 p-0.5 rounded"
-          @click="download"
-        >
+        <button v-if="value" class="p-0.5 rounded" @click="download">
           <FeatherIcon name="download" class="h-4 w-4 text-gray-600" />
         </button>
 
         <!-- Clear Button -->
         <button
           v-if="value && !isReadOnly"
-          class="bg-gray-300 p-0.5 rounded"
+          class="p-0.5 rounded"
           @click="clear"
         >
           <FeatherIcon name="x" class="h-4 w-4 text-gray-600" />
diff --git a/src/components/Controls/AutoComplete.vue b/src/components/Controls/AutoComplete.vue
index 58bc9e49..d5ac17c4 100644
--- a/src/components/Controls/AutoComplete.vue
+++ b/src/components/Controls/AutoComplete.vue
@@ -35,7 +35,7 @@
           @keydown.esc="toggleDropdown(false)"
         />
         <svg
-          v-if="!isReadOnly"
+          v-if="!isReadOnly && !canLink"
           class="w-3 h-3"
           style="background: inherit; margin-right: -3px"
           viewBox="0 0 5 10"
@@ -45,19 +45,27 @@
           <path
             d="M1 2.636L2.636 1l1.637 1.636M1 7.364L2.636 9l1.637-1.636"
             class="stroke-current"
-            :class="showMandatory ? 'text-red-500' : 'text-gray-500'"
+            :class="showMandatory ? 'text-red-400' : 'text-gray-400'"
             fill="none"
             fill-rule="evenodd"
             stroke-linecap="round"
             stroke-linejoin="round"
           />
         </svg>
+        <button
+          v-if="canLink"
+          class="p-0.5 rounded -me1 bg-transparent"
+          @click="routeToLinkedDoc"
+        >
+          <FeatherIcon name="chevron-right" class="w-4 h-4 text-gray-600" />
+        </button>
       </div>
     </template>
   </Dropdown>
 </template>
 <script>
 import { getOptionList } from 'fyo/utils';
+import { FieldTypeEnum } from 'schemas/types';
 import Dropdown from 'src/components/Dropdown.vue';
 import { fuzzyMatch } from 'src/utils';
 import Base from './Base.vue';
@@ -100,8 +108,51 @@ export default {
 
       return getOptionList(this.df, this.doc);
     },
+    canLink() {
+      if (!this.value || !this.df) {
+        return false;
+      }
+
+      const fieldtype = this.df?.fieldtype;
+      const isLink = fieldtype === FieldTypeEnum.Link;
+      const isDynamicLink = fieldtype === FieldTypeEnum.DynamicLink;
+
+      if (!isLink && !isDynamicLink) {
+        return false;
+      }
+
+      if (isLink && this.df.target) {
+        return true;
+      }
+
+      const references = this.df.references;
+      if (!references) {
+        return false;
+      }
+
+      if (!this.doc?.[references]) {
+        return false;
+      }
+
+      return true;
+    },
   },
   methods: {
+    routeToLinkedDoc() {
+      let schemaName = this.df?.target;
+      const name = this.value;
+
+      if (!schemaName) {
+        const references = this.df?.references ?? '';
+        schemaName = this.doc?.[references];
+      }
+
+      if (!schemaName || !name) {
+        return;
+      }
+
+      console.log(`routing to: ${schemaName}.${name}`);
+    },
     setLinkValue(value) {
       this.linkValue = value;
     },
diff --git a/src/components/Controls/Datetime.vue b/src/components/Controls/Datetime.vue
index e8bacbb1..a479771d 100644
--- a/src/components/Controls/Datetime.vue
+++ b/src/components/Controls/Datetime.vue
@@ -21,12 +21,7 @@
           {{ inputPlaceholder }}
         </p>
 
-        <button
-          v-if="!isReadOnly"
-          class="p-0.5 rounded -me-1 ms-1"
-          :class="showMandatory ? 'bg-red-300' : 'bg-gray-300'"
-          @click="togglePopover"
-        >
+        <button v-if="!isReadOnly" class="p-0.5 rounded -me-1 ms-1">
           <FeatherIcon
             name="calendar"
             class="w-4 h-4"
diff --git a/src/components/Controls/Select.vue b/src/components/Controls/Select.vue
index 67d6b5a2..aa7256d9 100644
--- a/src/components/Controls/Select.vue
+++ b/src/components/Controls/Select.vue
@@ -50,7 +50,7 @@
         <path
           d="M1 2.636L2.636 1l1.637 1.636M1 7.364L2.636 9l1.637-1.636"
           class="stroke-current"
-          :class="showMandatory ? 'text-red-500' : 'text-gray-500'"
+          :class="showMandatory ? 'text-red-400' : 'text-gray-400'"
           fill="none"
           fill-rule="evenodd"
           stroke-linecap="round"