diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index f25b6092..5abe8488 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -76,21 +76,29 @@
         </Section>
       </div>
     </div>
-    <SidebarLink
-      :label="isSidebarCollapsed ? 'Expand' : 'Collapse'"
-      :isCollapsed="isSidebarCollapsed"
-      @click="isSidebarCollapsed = !isSidebarCollapsed"
-      class="m-2"
-    >
-      <template #icon>
-        <span class="grid h-5 w-6 flex-shrink-0 place-items-center">
-          <CollapseSidebar
-            class="h-4.5 w-4.5 text-gray-700 duration-300 ease-in-out"
-            :class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }"
-          />
-        </span>
-      </template>
-    </SidebarLink>
+    <div class="m-2 flex flex-col gap-1">
+      <SidebarLink
+        label="Docs"
+        :isCollapsed="isSidebarCollapsed"
+        icon="book-open"
+        @click="() => openDocs()"
+      />
+      <SidebarLink
+        :label="isSidebarCollapsed ? 'Expand' : 'Collapse'"
+        :isCollapsed="isSidebarCollapsed"
+        @click="isSidebarCollapsed = !isSidebarCollapsed"
+        class=""
+      >
+        <template #icon>
+          <span class="grid h-5 w-6 flex-shrink-0 place-items-center">
+            <CollapseSidebar
+              class="h-4.5 w-4.5 text-gray-700 duration-300 ease-in-out"
+              :class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }"
+            />
+          </span>
+        </template>
+      </SidebarLink>
+    </div>
     <Notifications />
   </div>
 </template>
@@ -113,6 +121,7 @@ import SidebarLink from '@/components/SidebarLink.vue'
 import Notifications from '@/components/Notifications.vue'
 import { viewsStore } from '@/stores/views'
 import { notificationsStore } from '@/stores/notifications'
+import { FeatherIcon } from 'frappe-ui'
 import { useStorage } from '@vueuse/core'
 import { computed } from 'vue'
 
@@ -222,4 +231,8 @@ function getIcon(routeName) {
       return PinIcon
   }
 }
+
+function openDocs() {
+  window.open('https://docs.frappe.io/crm', '_blank')
+}
 </script>
diff --git a/frontend/src/components/SidebarLink.vue b/frontend/src/components/SidebarLink.vue
index 976371fc..f8dae913 100644
--- a/frontend/src/components/SidebarLink.vue
+++ b/frontend/src/components/SidebarLink.vue
@@ -12,7 +12,8 @@
         <Tooltip :text="label" placement="right">
           <slot name="icon">
             <span class="grid h-5 w-6 flex-shrink-0 place-items-center">
-              <component :is="icon" class="h-4 w-4 text-gray-700" />
+              <FeatherIcon v-if="typeof icon == 'string'" :name="icon" class="h-4 w-4 text-gray-700" />
+              <component v-else :is="icon" class="h-4 w-4 text-gray-700" />
             </span>
           </slot>
         </Tooltip>