diff --git a/frontend/src/components/GettingStartedBanner.vue b/frontend/src/components/GettingStartedBanner.vue
new file mode 100644
index 00000000..fd06f678
--- /dev/null
+++ b/frontend/src/components/GettingStartedBanner.vue
@@ -0,0 +1,33 @@
+<template>
+  <div
+    v-if="!isSidebarCollapsed"
+    class="m-2 flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-white text-base"
+  >
+    <div class="inline-flex gap-2">
+      <StepsIcon class="h-4 my-0.5" />
+      <div class="flex flex-col text-p-sm gap-0.5">
+        <div class="text-ink-gray-9 font-medium">
+          {{ __('Gettings started') }}
+        </div>
+        <div class="text-ink-gray-7">{{ __('4/10 steps') }}</div>
+      </div>
+    </div>
+    <Button
+      :label="__('Complete now')"
+      theme="blue"
+      @click="emit('completeNow')"
+    />
+  </div>
+</template>
+<script setup>
+import StepsIcon from '@/components/Icons/StepsIcon.vue'
+
+const props = defineProps({
+  isSidebarCollapsed: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['completeNow'])
+</script>
diff --git a/frontend/src/components/Icons/StepsIcon.vue b/frontend/src/components/Icons/StepsIcon.vue
new file mode 100644
index 00000000..94d2efab
--- /dev/null
+++ b/frontend/src/components/Icons/StepsIcon.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="M8 6.5C9.10457 6.5 10 5.60457 10 4.5C10 3.39543 9.10457 2.5 8 2.5C6.89543 2.5 6 3.39543 6 4.5C6 5.60457 6.89543 6.5 8 6.5ZM8 7.5C9.65685 7.5 11 6.15685 11 4.5C11 2.84315 9.65685 1.5 8 1.5C6.34315 1.5 5 2.84315 5 4.5C5 6.15685 6.34315 7.5 8 7.5ZM12 13.5C13.1046 13.5 14 12.6046 14 11.5C14 10.3954 13.1046 9.5 12 9.5C10.8954 9.5 10 10.3954 10 11.5C10 12.6046 10.8954 13.5 12 13.5ZM12 14.5C13.6569 14.5 15 13.1569 15 11.5C15 9.84315 13.6569 8.5 12 8.5C10.3431 8.5 9 9.84315 9 11.5C9 13.1569 10.3431 14.5 12 14.5ZM6 11.5C6 12.6046 5.10457 13.5 4 13.5C2.89543 13.5 2 12.6046 2 11.5C2 10.3954 2.89543 9.5 4 9.5C5.10457 9.5 6 10.3954 6 11.5ZM7 11.5C7 13.1569 5.65685 14.5 4 14.5C2.34315 14.5 1 13.1569 1 11.5C1 9.84315 2.34315 8.5 4 8.5C5.65685 8.5 7 9.84315 7 11.5Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index 360c5a9a..c685fd77 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -74,7 +74,13 @@
     <div class="m-2 flex flex-col gap-1">
       <SignupBanner :isSidebarCollapsed="isSidebarCollapsed" />
       <TrialBanner v-if="isFCSite" />
+      <GettingStartedBanner
+        v-if="!isOnboardingStepsCompleted"
+        :isSidebarCollapsed="isSidebarCollapsed"
+        @completeNow="showHelpModal = true"
+      />
       <SidebarLink
+        v-else
         :label="__('Help')"
         :isCollapsed="isSidebarCollapsed"
         @click="showHelpModal = !showHelpModal"
@@ -101,7 +107,11 @@
     </div>
     <Notifications />
     <Settings />
-    <HelpModal v-if="showHelpModal" v-model="showHelpModal" />
+    <HelpModal
+      v-if="showHelpModal"
+      v-model="showHelpModal"
+      :isOnboardingStepsCompleted="isOnboardingStepsCompleted"
+    />
   </div>
 </template>
 
@@ -124,6 +134,7 @@ 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 GettingStartedBanner from '@/components/GettingStartedBanner.vue'
 import HelpModal from '@/components/Modals/HelpModal.vue'
 import { viewsStore } from '@/stores/views'
 import {
@@ -246,5 +257,9 @@ function getIcon(routeName, icon) {
   }
 }
 
+const isOnboardingStepsCompleted = useStorage(
+  'isOnboardingStepsCompleted',
+  false,
+)
 const showHelpModal = ref(false)
 </script>
diff --git a/frontend/src/components/Modals/HelpModal.vue b/frontend/src/components/Modals/HelpModal.vue
index 21eddbe6..9bf0f9bb 100644
--- a/frontend/src/components/Modals/HelpModal.vue
+++ b/frontend/src/components/Modals/HelpModal.vue
@@ -24,6 +24,10 @@ import MinimizeIcon from '@/components/Icons/MinimizeIcon.vue'
 import MaximizeIcon from '@/components/Icons/MaximizeIcon.vue'
 import { ref } from 'vue'
 
+const props = defineProps({
+  isOnboardingStepsCompleted: Boolean,
+})
+
 const show = defineModel()
 const minimize = ref(false)
 </script>