diff --git a/frontend/src/integrations/hubspot/components/hubspot-book-call.vue b/frontend/src/integrations/hubspot/components/hubspot-book-call.vue
deleted file mode 100644
index f64ae12d3b..0000000000
--- a/frontend/src/integrations/hubspot/components/hubspot-book-call.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <slot :connect="connect" />
-  <app-hacker-news-connect-drawer
-    v-model="drawerVisible"
-    :integration="integration"
-  />
-</template>
-
-<script setup>
-import {
-  computed,
-  defineProps,
-  onMounted,
-  ref,
-  watch,
-} from 'vue';
-import { useThrottleFn } from '@vueuse/core';
-import { useStore } from 'vuex';
-import Nango from '@nangohq/frontend';
-import config from '@/config';
-import AuthCurrentTenant from '@/modules/auth/auth-current-tenant';
-
-const store = useStore();
-
-defineProps({
-  integration: {
-    type: Object,
-    default: () => {},
-  },
-});
-
-const tenantId = computed(() => AuthCurrentTenant.get());
-
-const callOnboard = useThrottleFn(async () => {
-  await store.dispatch('integration/doHubspotConnect');
-}, 2000);
-
-
-const connect = async () => {
-  const nango = new Nango({ host: config.nangoUrl });
-
-  try {
-    await nango.auth(
-      'hubspot',
-      `${tenantId.value}-hubspot`,
-    );
-
-    await callOnboard();
-  } catch (e) {
-    console.error(e);
-  }
-};
-
-</script>
-
-<script>
-export default {
-  name: 'AppHubSpotBookCall',
-};
-</script>
diff --git a/frontend/src/integrations/hubspot/components/hubspot-connect.vue b/frontend/src/integrations/hubspot/components/hubspot-connect.vue
new file mode 100644
index 0000000000..dde5b7d134
--- /dev/null
+++ b/frontend/src/integrations/hubspot/components/hubspot-connect.vue
@@ -0,0 +1,50 @@
+<template>
+  <slot :connect="connect" :settings="settings" :has-settings="true" />
+  <app-hubspot-settings-drawer v-if="openSettingsDrawer" v-model="openSettingsDrawer" />
+</template>
+
+<script setup lang="ts">
+import {
+  defineProps,
+  ref,
+} from 'vue';
+import Nango from '@nangohq/frontend';
+import config from '@/config';
+import AppHubspotSettingsDrawer from '@/integrations/hubspot/components/hubspot-settings-drawer.vue';
+import { mapActions, mapGetters } from '@/shared/vuex/vuex.helpers';
+
+defineProps({
+  integration: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const { currentTenant } = mapGetters('auth');
+const { doHubspotConnect } = mapActions('integration');
+
+const openSettingsDrawer = ref<boolean>(false);
+
+const connect = () => {
+  const nango = new Nango({ host: config.nangoUrl });
+  nango.auth(
+    'hubspot',
+    `${currentTenant.value.id}-hubspot`,
+  )
+    .then(() => doHubspotConnect(null))
+    .then(() => {
+      openSettingsDrawer.value = true;
+    });
+};
+
+const settings = () => {
+  openSettingsDrawer.value = true;
+};
+
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppHubspotConnect',
+};
+</script>
diff --git a/frontend/src/integrations/hubspot/components/hubspot-property-map.vue b/frontend/src/integrations/hubspot/components/hubspot-property-map.vue
new file mode 100644
index 0000000000..9daa630fb4
--- /dev/null
+++ b/frontend/src/integrations/hubspot/components/hubspot-property-map.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="flex items-center">
+    <div class="w-1/2">
+      <div class="flex items-center">
+        <el-checkbox v-model="enabled" size="default" class="filter-checkbox" />
+        <p class="pl-1 text-2xs">
+          {{ getLabel(props.field as string) }}
+        </p>
+      </div>
+    </div>
+    <div class="w-1/2 py-2">
+      <div class="flex items-center w-full">
+        <div class="ri-arrow-left-right-line text-base text-gray-400 mr-4 h-4 flex items-center" />
+        <label v-if="props.hubspotFields.length > 0" class="w-full">
+          <select
+            v-model="mapping"
+            class="c-select"
+            :class="[
+              mapping ? 'text-gray-900' : 'text-gray-400',
+              enabled && !mapping ? 'border-brand-400' : '',
+            ]"
+          >
+            <option :value="undefined" disabled class="hidden">Select property</option>
+            <option
+              v-for="hubspotField of props.hubspotFields"
+              :key="hubspotField.name"
+              :value="hubspotField.name"
+            >
+              {{ hubspotField.label }}
+            </option>
+          </select>
+        </label>
+        <p v-else class="text-2xs leading-8">
+          No matching properties
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed,
+} from 'vue';
+import { HubspotProperty } from '@/integrations/hubspot/types/HubspotProperty';
+
+const props = defineProps<{
+  modelValue: string,
+  field: string,
+  enabled: boolean,
+  hubspotFields: HubspotProperty[]
+}>();
+
+const emit = defineEmits<{(e: 'update:modelValue', value: string): void, (e: 'update:enabled', value: boolean): void }>();
+
+const mapping = computed<string>({
+  get() {
+    return props.modelValue;
+  },
+  set(value: string) {
+    emit('update:modelValue', value);
+  },
+});
+
+const enabled = computed<boolean>({
+  get() {
+    return props.enabled;
+  },
+  set(value: boolean) {
+    emit('update:enabled', value);
+  },
+});
+
+const getLabel = (field: string) => {
+  const label = field
+    .replace('attributes.', '')
+    .replace('_', ' ')
+    .replace(/([A-Z])/g, ' $1');
+  return label.at(0).toUpperCase() + label.substring(1).toLowerCase();
+};
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppHubspotPropertyMap',
+};
+</script>
+
+<style lang="scss">
+.el-select.map-attribute{
+  .el-input {
+    @apply min-h-8 bg-gray-50;
+
+    .el-input__wrapper{
+      @apply bg-gray-50;
+    }
+
+    .el-input__suffix-inner {
+      top: 0.5rem;
+    }
+  }
+}
+
+.c-select{
+  @apply w-full h-8 bg-gray-50 border border-gray-100 rounded-md px-2 text-2xs text-gray-600;
+}
+</style>
diff --git a/frontend/src/integrations/hubspot/components/hubspot-settings-drawer.vue b/frontend/src/integrations/hubspot/components/hubspot-settings-drawer.vue
new file mode 100644
index 0000000000..a2d60e460e
--- /dev/null
+++ b/frontend/src/integrations/hubspot/components/hubspot-settings-drawer.vue
@@ -0,0 +1,429 @@
+<template>
+  <app-drawer
+    v-model="isDrawerVisible"
+    title="Discourse"
+    size="600px"
+    pre-title="Integration"
+    :show-footer="true"
+    has-border
+    @close="isDrawerVisible = false"
+  >
+    <template #beforeTitle>
+      <img
+        :src="hubspotDetails.image"
+        class="w-6 h-6 mr-2"
+        alt="Discourse logo"
+      />
+    </template>
+    <template #content>
+      <div>
+        <section class="pb-6">
+          <h4 class="text-base font-semibold pb-1">
+            Enable data syncing
+          </h4>
+          <p class="text-2xs text-gray-500">
+            Define which crowd.dev core elements can be synced to or from HubSpot.
+          </p>
+        </section>
+        <section class="pb-10 border-b border-gray-200">
+          <article class="border border-gray-200 rounded-t py-4 px-5 flex justify-between">
+            <div>
+              <h5 class="text-sm font-semibold pb-1">
+                Members
+              </h5>
+              <p class="text-2xs text-gray-500 leading-4.5">
+                <span class="font-semibold">Data-in</span>: Existing members will automatically be enriched with data
+                points
+                from HubSpot contacts every 8 hours.
+                <span class="font-semibold">Data-out</span>: To send members to HubSpot, use Automations or select
+                members manually.
+              </p>
+            </div>
+            <div>
+              <el-switch v-model="form.members" @change="syncSelected($event, 'member')" />
+            </div>
+          </article>
+          <article class="border border-gray-200 rounded-b border-t-0 py-4 px-5 flex justify-between">
+            <div>
+              <h5 class="text-sm font-semibold pb-1">
+                Organizations
+              </h5>
+              <p class="text-2xs text-gray-500 leading-4.5">
+                <span class="font-semibold">Data-in</span>: Existing organizations will automatically be enriched with
+                data points from HubSpot companies every 8 hours.
+                <span class="font-semibold">Data-out</span>: To send organizations to HubSpot, use Automations or select
+                organizations manually.
+              </p>
+            </div>
+            <div>
+              <el-switch v-model="form.organizations" @change="syncSelected($event, 'organization')" />
+            </div>
+          </article>
+        </section>
+        <section class="pt-6">
+          <h4 class="text-base font-semibold pb-2">
+            Attributes mapping
+          </h4>
+          <div class="flex justify-between pb-5">
+            <p class="text-2xs text-gray-500">
+              Select and map which attributes and properties to sync between crowd.dev and HubSpot.
+            </p>
+            <div class="pl-8">
+              <el-button
+                class="btn btn--bordered btn--sm !h-8"
+                :disabled="!form.members && !form.organizations"
+                :loading="updatingAttributes"
+                @click="updateAttributes()"
+              >
+                <span class="ri-refresh-line mr-2" />
+                Update attributes
+              </el-button>
+            </div>
+          </div>
+          <div v-if="form.members || form.organizations" class="p-2 rounded bg-blue-50 flex items-center mb-3">
+            <span class="ri-information-line text-blue-900 mr-2 text-base h-4 flex items-center" />
+            <span class="text-[11px] text-blue-900 leading-4.5">We recommend creating custom properties in Hubspot for every crowd.dev attribute.
+              <a
+                href="https://go.crowd.dev/hubspot-docs-properties"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="underline text-blue-900 font-medium"
+              >Read more</a>
+            </span>
+          </div>
+        </section>
+        <section>
+          <el-collapse v-model="activeView" accordion class="attributes">
+            <el-collapse-item name="member" :disabled="!form.members">
+              <template #title>
+                <div class="flex justify-between w-full items-center">
+                  <div class="flex items-center">
+                    <span
+                      class="ri-arrow-down-s-line text-lg text-gray-500 mr-3 h-5 flex items-center transition-all transform"
+                      :class="{ 'rotate-180': activeView === 'member' }"
+                    />
+                    <span class="text-xs font-medium">Member attributes</span>
+                  </div>
+                  <div
+                    v-if="form.members"
+                    class="h-5 px-2 rounded-full text-3xs flex items-center"
+                    :class="memberAttributesSynced > 0 ? 'text-brand-700 bg-brand-50' : 'text-gray-600 bg-gray-100'"
+                  >
+                    {{ memberAttributesSynced }} attributes synced
+                  </div>
+                </div>
+              </template>
+
+              <div v-if="activeView === 'member'">
+                <div class="flex pt-3 pb-2 border-b border-gray-100">
+                  <div class="w-1/2 pl-8 text-gray-400 font-semibold tracking-1 text-3xs">
+                    CROWD.DEV ATTRIBUTES
+                  </div>
+                  <div class="w-1/2 pl-8 text-gray-400 font-semibold tracking-1 text-3xs">
+                    HUBSPOT PROPERTIES <span class="text-brand-500">*</span>
+                  </div>
+                </div>
+                <section class="pt-1 pb-3">
+                  <app-hubspot-property-map
+                    v-for="(type, field) in memberMappableFields"
+                    :key="field"
+                    v-model="form.mapping.members[field]"
+                    v-model:enabled="form.enabled.members[field]"
+                    :field="field as string"
+                    :hubspot-fields="getHubspotMemberFields(type, form.mapping.members[field])"
+                  />
+                </section>
+              </div>
+            </el-collapse-item>
+            <el-collapse-item name="organization" :disabled="!form.organizations">
+              <template #title>
+                <div class="flex justify-between w-full items-center">
+                  <div class="flex items-center">
+                    <span
+                      class="ri-arrow-down-s-line text-lg text-gray-500 mr-3 h-5 flex items-center transition-all transform"
+                      :class="{ 'rotate-180': activeView === 'organization' }"
+                    />
+                    <span class="text-xs font-medium">Organization attributes</span>
+                  </div>
+                  <div
+                    v-if="form.organizations"
+                    class="h-5 px-2 rounded-full text-3xs flex items-center"
+                    :class="organizationAttributesSynced > 0 ? 'text-brand-700 bg-brand-50' : 'text-gray-600 bg-gray-100'"
+                  >
+                    {{ organizationAttributesSynced }} attributes synced
+                  </div>
+                </div>
+              </template>
+              <div v-if="activeView === 'organization'">
+                <div class="flex pt-3 pb-2 border-b border-gray-100">
+                  <div class="w-1/2 pl-8 text-gray-400 font-semibold tracking-1 text-3xs">
+                    CROWD.DEV ATTRIBUTES
+                  </div>
+                  <div class="w-1/2 pl-8 text-gray-400 font-semibold tracking-1 text-3xs">
+                    HUBSPOT PROPERTIES <span class="text-brand-500">*</span>
+                  </div>
+                </div>
+                <section class="pt-1 pb-3">
+                  <app-hubspot-property-map
+                    v-for="(type, field) in organizationMappableFields"
+                    :key="field"
+                    v-model="form.mapping.organizations[field]"
+                    v-model:enabled="form.enabled.organizations[field]"
+                    :field="field as string"
+                    :hubspot-fields="getHubspotOrganizationFields(type, form.mapping.organizations[field])"
+                  />
+                </section>
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </section>
+      </div>
+    </template>
+
+    <template #footer>
+      <div style="flex: auto">
+        <el-button
+          class="btn btn--md btn--bordered mr-3"
+          @click="isDrawerVisible = false"
+        >
+          Cancel
+        </el-button>
+        <el-button
+          type="primary"
+          class="btn btn--md btn--primary"
+          :disabled="!isMappingValid || loading"
+          :loading="loading"
+          @click="update()"
+        >
+          Update
+        </el-button>
+      </div>
+    </template>
+  </app-drawer>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed, onMounted, reactive, ref,
+} from 'vue';
+import { CrowdIntegrations } from '@/integrations/integrations-config';
+import { HubspotApiService } from '@/integrations/hubspot/hubspot.api.service';
+import { MappableFields } from '@/integrations/hubspot/types/MappableFields';
+import { useStore } from 'vuex';
+import { HubspotOnboard } from '@/integrations/hubspot/types/HubspotOnboard';
+import { HubspotEntity } from '@/integrations/hubspot/types/HubspotEntity';
+import { mapActions } from '@/shared/vuex/vuex.helpers';
+import AppHubspotPropertyMap from '@/integrations/hubspot/components/hubspot-property-map.vue';
+
+const props = defineProps<{
+  modelValue: boolean
+}>();
+
+const emit = defineEmits<{(e: 'update:modelValue', value: boolean): void }>();
+
+const store = useStore();
+const { doFetch } = mapActions('integration');
+
+const activeView = ref<string | null>(null);
+
+const memberMappableFields = ref<Record<string, string>>({});
+const organizationMappableFields = ref<Record<string, string>>({});
+
+const isDrawerVisible = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit('update:modelValue', val);
+  },
+});
+
+const form = reactive({
+  members: false,
+  organizations: false,
+  enabled: {
+    members: {},
+    organizations: {},
+  },
+  mapping: {
+    members: {},
+    organizations: {},
+  },
+});
+
+const loading = ref<boolean>(false);
+const updatingAttributes = ref<boolean>(false);
+
+const usedHubspotMemberFields = computed(() => Object.values(form.mapping.members));
+const usedHubspotOrganizationFields = computed(() => Object.values(form.mapping.organizations));
+
+const getHubspotProperties = ref({});
+
+const getHubspotMemberFields = (type: string, name: string) => {
+  const fields = getHubspotProperties.value.members;
+  return fields.filter((field) => {
+    if (field.name === name) {
+      return true;
+    }
+    return !(field.type !== type || usedHubspotMemberFields.value.includes(field.name));
+  });
+};
+
+const getHubspotOrganizationFields = (type: string, name: string) => {
+  const fields = getHubspotProperties.value.organizations;
+  return fields.filter((field) => {
+    if (field.name === name) {
+      return true;
+    }
+    return !(field.type !== type || usedHubspotOrganizationFields.value.includes(field.name));
+  });
+};
+
+const hubspotDetails = computed(() => CrowdIntegrations.getConfig('hubspot'));
+
+const updateAttributes = () => {
+  updatingAttributes.value = true;
+  HubspotApiService.updateAttributes()
+    .then((res) => {
+      getHubspotProperties.value = res;
+    })
+    .finally(() => {
+      updatingAttributes.value = false;
+    });
+};
+
+const syncSelected = (value: boolean, attribute: string) => {
+  if (value) {
+    activeView.value = attribute;
+  } else if (activeView.value === attribute) {
+    activeView.value = null;
+  }
+};
+
+const memberAttributesSynced = computed(() => Object.keys(form.enabled.members).filter((key) => form.enabled.members[key]).length);
+const organizationAttributesSynced = computed(() => Object.keys(form.enabled.organizations).filter((key) => form.enabled.organizations[key]).length);
+
+const isMappingValid = computed(() => {
+  const memberKeys = Object.keys(form.enabled.members).filter((key) => form.enabled.members[key]);
+  const organizationKeys = Object.keys(form.enabled.organizations).filter((key) => form.enabled.organizations[key]);
+  const memberValid = memberKeys.every((key) => form.mapping.members[key]?.length > 0);
+  const organizationValid = organizationKeys.every((key) => form.mapping.organizations[key]?.length > 0);
+  return (!form.members || (memberValid && memberKeys.length > 0))
+    && (!form.organizations || (organizationValid && organizationKeys.length > 0))
+    && (form.members || form.organizations);
+});
+
+const update = () => {
+  if (!isMappingValid.value) {
+    return;
+  }
+  const data: HubspotOnboard = {
+    enabledFor: [
+      ...(form.members ? [HubspotEntity.MEMBERS] : []),
+      ...(form.organizations ? [HubspotEntity.ORGANIZATIONS] : []),
+    ],
+    attributesMapping: {
+      members: {},
+      organizations: {},
+    },
+  };
+  if (form.members) {
+    const memberKeys = Object.keys(form.enabled.members).filter((key) => form.enabled.members[key]);
+    data.attributesMapping.members = memberKeys.reduce((a, b) => ({
+      ...a,
+      [b]: form.mapping.members[b],
+    }), {});
+  }
+  if (form.organizations) {
+    const organizationKeys = Object.keys(form.enabled.organizations).filter((key) => form.enabled.organizations[key]);
+    data.attributesMapping.organizations = organizationKeys.reduce((a, b) => ({
+      ...a,
+      [b]: form.mapping.organizations[b],
+    }), {});
+  }
+  loading.value = true;
+  HubspotApiService.finishOnboard(data)
+    .then(() => {
+      doFetch(null);
+      isDrawerVisible.value = false;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+
+const fillForm = (data: HubspotOnboard) => {
+  form.members = data.enabledFor.includes(HubspotEntity.MEMBERS);
+  form.organizations = data.enabledFor.includes(HubspotEntity.ORGANIZATIONS);
+
+  form.mapping.members = data.attributesMapping[HubspotEntity.MEMBERS];
+  form.mapping.organizations = data.attributesMapping[HubspotEntity.ORGANIZATIONS];
+
+  form.enabled.members = Object.keys(data.attributesMapping[HubspotEntity.MEMBERS]).reduce((a, b) => ({
+    ...a,
+    [b]: true,
+  }), {});
+
+  form.enabled.organizations = Object.keys(data.attributesMapping[HubspotEntity.ORGANIZATIONS]).reduce((a, b) => ({
+    ...a,
+    [b]: true,
+  }), {});
+};
+
+onMounted(() => {
+  updateAttributes();
+  HubspotApiService.getMappableFields()
+    .then((mappableData: MappableFields) => {
+      memberMappableFields.value = mappableData.members;
+      organizationMappableFields.value = mappableData.organizations;
+    });
+
+  const data = CrowdIntegrations.getMappedConfig('hubspot', store);
+  fillForm(data.settings);
+});
+
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppHubspotSettingsDrawer',
+};
+</script>
+
+<style lang="scss">
+.el-collapse.attributes {
+  @apply border-0;
+}
+
+.el-collapse-item {
+  .el-collapse-item__header {
+    @apply h-14 border-0;
+  }
+
+  &:not(:last-child){
+    @apply border-b border-gray-100;
+  }
+
+  .el-collapse-item__arrow {
+    @apply hidden;
+  }
+}
+
+.el-select.map-attribute{
+  .el-input {
+    @apply min-h-8 bg-gray-50;
+
+    .el-input__wrapper{
+      @apply bg-gray-50;
+    }
+
+    .el-input__suffix-inner {
+      top: 0.5rem;
+    }
+  }
+}
+
+.c-select{
+  @apply w-full h-8 bg-gray-50 border border-gray-100 rounded-md px-2 text-2xs text-gray-600;
+}
+</style>
diff --git a/frontend/src/integrations/hubspot/config.js b/frontend/src/integrations/hubspot/config.js
index 8aa117d438..3f24fa4aba 100644
--- a/frontend/src/integrations/hubspot/config.js
+++ b/frontend/src/integrations/hubspot/config.js
@@ -1,4 +1,4 @@
-import HubSpotBookCall from './components/hubspot-book-call.vue';
+import HubspotConnect from './components/hubspot-connect.vue';
 
 export default {
   name: 'HubSpot',
@@ -7,7 +7,7 @@ export default {
   description: 'Create a 2-way sync with HubSpot.',
   image:
     '/images/integrations/hubspot.png',
-  connectComponent: HubSpotBookCall,
+  connectComponent: HubspotConnect,
   enabled: true,
   url: (username) => null,
   chartColor: '#FF712E',
diff --git a/frontend/src/integrations/hubspot/hubspot.api.service.ts b/frontend/src/integrations/hubspot/hubspot.api.service.ts
new file mode 100644
index 0000000000..90a41ae133
--- /dev/null
+++ b/frontend/src/integrations/hubspot/hubspot.api.service.ts
@@ -0,0 +1,33 @@
+import AuthCurrentTenant from '@/modules/auth/auth-current-tenant';
+import authAxios from '@/shared/axios/auth-axios';
+import { MappableFields } from '@/integrations/hubspot/types/MappableFields';
+import { HubspotOnboard } from '@/integrations/hubspot/types/HubspotOnboard';
+
+export class HubspotApiService {
+  static getMappableFields(): Promise<MappableFields> {
+    const tenantId = AuthCurrentTenant.get();
+
+    return authAxios.get(
+      `/tenant/${tenantId}/hubspot-mappable-fields`,
+    )
+      .then((response) => response.data);
+  }
+
+  static updateAttributes(): Promise<any> {
+    const tenantId = AuthCurrentTenant.get();
+    return authAxios.post(
+      `/tenant/${tenantId}/hubspot-update-properties`,
+    )
+      .then((response) => response.data);
+  }
+
+  static finishOnboard(data: HubspotOnboard): Promise<any> {
+    const tenantId = AuthCurrentTenant.get();
+
+    return authAxios.post(
+      `/tenant/${tenantId}/hubspot-onboard`,
+      data,
+    )
+      .then((response) => response.data);
+  }
+}
diff --git a/frontend/src/integrations/hubspot/types/HubspotEntity.ts b/frontend/src/integrations/hubspot/types/HubspotEntity.ts
new file mode 100644
index 0000000000..b6539c7f38
--- /dev/null
+++ b/frontend/src/integrations/hubspot/types/HubspotEntity.ts
@@ -0,0 +1,4 @@
+export enum HubspotEntity {
+  MEMBERS= 'members',
+  ORGANIZATIONS = 'organizations'
+}
diff --git a/frontend/src/integrations/hubspot/types/HubspotOnboard.ts b/frontend/src/integrations/hubspot/types/HubspotOnboard.ts
new file mode 100644
index 0000000000..4d6da16dd2
--- /dev/null
+++ b/frontend/src/integrations/hubspot/types/HubspotOnboard.ts
@@ -0,0 +1,9 @@
+import { HubspotEntity } from '@/integrations/hubspot/types/HubspotEntity';
+
+export interface HubspotOnboard{
+  enabledFor: HubspotEntity[];
+  attributesMapping: {
+    [HubspotEntity.MEMBERS]?: Record<string, string>;
+    [HubspotEntity.ORGANIZATIONS]?: Record<string, string>;
+  };
+}
diff --git a/frontend/src/integrations/hubspot/types/HubspotProperty.ts b/frontend/src/integrations/hubspot/types/HubspotProperty.ts
new file mode 100644
index 0000000000..9c7a55347b
--- /dev/null
+++ b/frontend/src/integrations/hubspot/types/HubspotProperty.ts
@@ -0,0 +1,10 @@
+export interface HubspotProperty {
+  label: string;
+  name: string;
+  type: string;
+}
+
+export interface HubspotProperties {
+  members: HubspotProperty[];
+  organizations: HubspotProperty[];
+}
diff --git a/frontend/src/integrations/hubspot/types/MappableFields.ts b/frontend/src/integrations/hubspot/types/MappableFields.ts
new file mode 100644
index 0000000000..9b25aaa022
--- /dev/null
+++ b/frontend/src/integrations/hubspot/types/MappableFields.ts
@@ -0,0 +1,4 @@
+export interface MappableFields {
+  members: Record<string, string>,
+  organizations: Record<string, string>,
+}
diff --git a/frontend/src/modules/integration/integration-service.js b/frontend/src/modules/integration/integration-service.js
index 959fab1f15..419d5bc9b2 100644
--- a/frontend/src/modules/integration/integration-service.js
+++ b/frontend/src/modules/integration/integration-service.js
@@ -266,7 +266,7 @@ export class IntegrationService {
     return response.data;
   }
 
-  static async hubspotOnboard() {
+  static async hubspotConnect() {
     // Getting the tenant_id
     const tenantId = AuthCurrentTenant.get();
     // Calling the authenticate function in the backend.
diff --git a/frontend/src/modules/integration/integration-store.js b/frontend/src/modules/integration/integration-store.js
index cebecc7193..870b05c10a 100644
--- a/frontend/src/modules/integration/integration-store.js
+++ b/frontend/src/modules/integration/integration-store.js
@@ -471,12 +471,10 @@ export default {
     async doHubspotConnect(
       { commit },
     ) {
-      // Function to connect to StackOverflow.
-
       try {
         commit('CREATE_STARTED');
 
-        const integration = await IntegrationService.hubspotOnboard();
+        const integration = await IntegrationService.hubspotConnect();
 
         commit('CREATE_SUCCESS', integration);