diff --git a/frontend/src/components/Icons/HelpIcon.vue b/frontend/src/components/Icons/HelpIcon.vue
new file mode 100644
index 00000000..97c09698
--- /dev/null
+++ b/frontend/src/components/Icons/HelpIcon.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M14.25 8C14.25 11.4518 11.4518 14.25 8 14.25C4.54822 14.25 1.75 11.4518 1.75 8C1.75 4.54822 4.54822 1.75 8 1.75C11.4518 1.75 14.25 4.54822 14.25 8ZM15.25 8C15.25 12.0041 12.0041 15.25 8 15.25C3.99594 15.25 0.75 12.0041 0.75 8C0.75 3.99594 3.99594 0.75 8 0.75C12.0041 0.75 15.25 3.99594 15.25 8ZM7.37988 9.37695V9.44531H8.39062V9.37695C8.39062 9.10352 8.41992 8.88542 8.47852 8.72266C8.53711 8.55664 8.62826 8.41504 8.75195 8.29785C8.87891 8.18066 9.04329 8.06185 9.24512 7.94141C9.56087 7.74609 9.8099 7.51009 9.99219 7.2334C10.1745 6.95345 10.2656 6.61328 10.2656 6.21289C10.2656 5.82878 10.1745 5.49186 9.99219 5.20215C9.81315 4.91244 9.56087 4.6862 9.23535 4.52344C8.90983 4.36068 8.52734 4.2793 8.08789 4.2793C7.69401 4.2793 7.33268 4.35579 7.00391 4.50879C6.67513 4.65853 6.41146 4.88151 6.21289 5.17773C6.01432 5.4707 5.90853 5.82878 5.89551 6.25195H6.96973C6.986 6.0013 7.04948 5.79785 7.16016 5.6416C7.27083 5.4821 7.40755 5.36491 7.57031 5.29004C7.73633 5.21517 7.90885 5.17773 8.08789 5.17773C8.28971 5.17773 8.47363 5.22005 8.63965 5.30469C8.80892 5.38932 8.94075 5.50814 9.03516 5.66113C9.13281 5.81413 9.18164 5.99479 9.18164 6.20312C9.18164 6.47005 9.11003 6.69954 8.9668 6.8916C8.82357 7.0804 8.64453 7.23828 8.42969 7.36523C8.21159 7.50195 8.02279 7.64193 7.86328 7.78516C7.70703 7.92513 7.58659 8.11556 7.50195 8.35645C7.42057 8.59408 7.37988 8.93425 7.37988 9.37695ZM7.37988 11.5205C7.51986 11.654 7.69076 11.7207 7.89258 11.7207C8.09766 11.7207 8.26855 11.654 8.40527 11.5205C8.54525 11.3838 8.61523 11.2161 8.61523 11.0176C8.61523 10.8158 8.54525 10.6481 8.40527 10.5146C8.26855 10.3779 8.09766 10.3096 7.89258 10.3096C7.69076 10.3096 7.51986 10.3779 7.37988 10.5146C7.24316 10.6481 7.1748 10.8158 7.1748 11.0176C7.1748 11.2161 7.24316 11.3838 7.37988 11.5205Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index cf9ea854..360c5a9a 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -74,6 +74,15 @@
     <div class="m-2 flex flex-col gap-1">
       <SignupBanner :isSidebarCollapsed="isSidebarCollapsed" />
       <TrialBanner v-if="isFCSite" />
+      <SidebarLink
+        :label="__('Help')"
+        :isCollapsed="isSidebarCollapsed"
+        @click="showHelpModal = !showHelpModal"
+      >
+        <template #icon>
+          <HelpIcon class="h-4 w-4" />
+        </template>
+      </SidebarLink>
       <SidebarLink
         :label="isSidebarCollapsed ? __('Expand') : __('Collapse')"
         :isCollapsed="isSidebarCollapsed"
@@ -81,9 +90,9 @@
         class=""
       >
         <template #icon>
-          <span class="grid h-4.5 w-4.5 flex-shrink-0 place-items-center">
+          <span class="grid h-4 w-4 flex-shrink-0 place-items-center">
             <CollapseSidebar
-              class="h-4.5 w-4.5 text-ink-gray-7 duration-300 ease-in-out"
+              class="h-4 w-4 text-ink-gray-7 duration-300 ease-in-out"
               :class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }"
             />
           </span>
@@ -92,6 +101,7 @@
     </div>
     <Notifications />
     <Settings />
+    <HelpModal v-if="showHelpModal" v-model="showHelpModal" />
   </div>
 </template>
 
@@ -109,10 +119,12 @@ import TaskIcon from '@/components/Icons/TaskIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
 import NotificationsIcon from '@/components/Icons/NotificationsIcon.vue'
+import HelpIcon from '@/components/Icons/HelpIcon.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
 import Notifications from '@/components/Notifications.vue'
 import Settings from '@/components/Settings/Settings.vue'
 import SignupBanner from '@/components/SignupBanner.vue'
+import HelpModal from '@/components/Modals/HelpModal.vue'
 import { viewsStore } from '@/stores/views'
 import {
   unreadNotificationsCount,
@@ -233,4 +245,6 @@ function getIcon(routeName, icon) {
       return PinIcon
   }
 }
+
+const showHelpModal = ref(false)
 </script>
diff --git a/frontend/src/components/Modals/HelpModal.vue b/frontend/src/components/Modals/HelpModal.vue
new file mode 100644
index 00000000..21eddbe6
--- /dev/null
+++ b/frontend/src/components/Modals/HelpModal.vue
@@ -0,0 +1,29 @@
+<template>
+  <div
+    v-show="show"
+    class="fixed z-20 w-80 h-[calc(100%_-_80px)] text-ink-gray-9 m-5 mt-[62px] p-3 flex gap-2 flex-col rounded-lg bg-surface-modal shadow-2xl"
+    :class="[minimize ? 'right-0 top-[calc(100%_-_110px)]' : 'right-0']"
+    @click.stop
+  >
+    <div class="flex justify-between">
+      <div></div>
+      <div>
+        <Button @click="minimize = !minimize" variant="ghost">
+          <MaximizeIcon v-if="minimize" class="h-3.5 w-3.5" />
+          <MinimizeIcon v-else class="h-3.5 w-3.5" />
+        </Button>
+        <Button variant="ghost" @click="show = false">
+          <FeatherIcon name="x" class="h-3.5" />
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import MinimizeIcon from '@/components/Icons/MinimizeIcon.vue'
+import MaximizeIcon from '@/components/Icons/MaximizeIcon.vue'
+import { ref } from 'vue'
+
+const show = defineModel()
+const minimize = ref(false)
+</script>