diff --git a/app/client/src/ce/api/ApplicationApi.tsx b/app/client/src/ce/api/ApplicationApi.tsx
index 777ddaee27..ef1f72ce58 100644
--- a/app/client/src/ce/api/ApplicationApi.tsx
+++ b/app/client/src/ce/api/ApplicationApi.tsx
@@ -260,6 +260,13 @@ export interface ImportPartialApplicationRequest {
   pageId: string;
 }
 
+export interface ImportBuildingBlockToApplicationRequest {
+  pageId: string;
+  applicationId: string;
+  workspaceId: string;
+  templateId: string;
+}
+
 export class ApplicationApi extends Api {
   static baseURL = "v1/applications";
   static publishURLPath = (applicationId: string) =>
@@ -479,6 +486,12 @@ export class ApplicationApi extends Api {
       },
     );
   }
+
+  static async importBuildingBlockToApplication(
+    request: ImportBuildingBlockToApplicationRequest,
+  ) {
+    return Api.post(`${ApplicationApi.baseURL}/import/partial/block`, request);
+  }
 }
 
 export default ApplicationApi;
diff --git a/app/client/src/ce/constants/ReduxActionConstants.tsx b/app/client/src/ce/constants/ReduxActionConstants.tsx
index a626d4265b..0521c7a384 100644
--- a/app/client/src/ce/constants/ReduxActionConstants.tsx
+++ b/app/client/src/ce/constants/ReduxActionConstants.tsx
@@ -698,6 +698,9 @@ const ActionTypes = {
   RESET_TEMPLATE_FILTERS: "RESET_TEMPLATE_FILTERS",
   SET_TEMPLATE_SEARCH_QUERY: "SET_TEMPLATE_SEARCH_QUERY",
   IMPORT_TEMPLATE_TO_APPLICATION_INIT: "IMPORT_TEMPLATE_TO_APPLICATION_INIT",
+  DRAG_BUILDING_BLOCK_TO_CANVAS_INIT: "DRAG_BUILDING_BLOCK_TO_CANVAS_INIT",
+  DRAG_BUILDING_BLOCK_TO_CANVAS_SUCCESS:
+    "DRAG_BUILDING_BLOCK_TO_CANVAS_SUCCESS",
   IMPORT_STARTER_BUILDING_BLOCK_TO_APPLICATION_INIT:
     "IMPORT_STARTER_BUILDING_BLOCK_TO_APPLICATION_INIT",
   IMPORT_STARTER_TEMPLATE_TO_APPLICATION_SUCCESS:
diff --git a/app/client/src/constants/WidgetConstants.tsx b/app/client/src/constants/WidgetConstants.tsx
index cbc53c3d0f..2a294be3bf 100644
--- a/app/client/src/constants/WidgetConstants.tsx
+++ b/app/client/src/constants/WidgetConstants.tsx
@@ -267,3 +267,4 @@ export const WIDGET_ID_SHOW_WALKTHROUGH = "WIDGET_ID_SHOW_WALKTHROUGH";
 
 export const DEFAULT_ROWS_FOR_EXPLORER_BUILDING_BLOCKS = 30;
 export const DEFAULT_COLUMNS_FOR_EXPLORER_BUILDING_BLOCKS = 5;
+export const BUILDING_BLOCK_EXPLORER_TYPE = "BUILDING_BLOCK";
diff --git a/app/client/src/sagas/WidgetAdditionSagas.ts b/app/client/src/sagas/WidgetAdditionSagas.ts
index fec9e8ba16..5a4ca0584a 100644
--- a/app/client/src/sagas/WidgetAdditionSagas.ts
+++ b/app/client/src/sagas/WidgetAdditionSagas.ts
@@ -6,7 +6,10 @@ import {
   ReduxActionTypes,
   WidgetReduxActionTypes,
 } from "@appsmith/constants/ReduxActionConstants";
-import { RenderModes } from "constants/WidgetConstants";
+import {
+  BUILDING_BLOCK_EXPLORER_TYPE,
+  RenderModes,
+} from "constants/WidgetConstants";
 import { ENTITY_TYPE } from "@appsmith/entities/AppsmithConsole/utils";
 import type {
   CanvasWidgetsReduxState,
@@ -17,7 +20,7 @@ import { all, call, put, select, takeEvery } from "redux-saga/effects";
 import AppsmithConsole from "utils/AppsmithConsole";
 import { getNextEntityName } from "utils/AppsmithUtils";
 import { generateWidgetProps } from "utils/WidgetPropsUtils";
-import { getWidget, getWidgets } from "./selectors";
+import { getDragDetails, getWidget, getWidgets } from "./selectors";
 import {
   buildWidgetBlueprint,
   executeWidgetBlueprintBeforeOperations,
@@ -49,6 +52,7 @@ import {
 } from "selectors/editorSelectors";
 import { getWidgetMinMaxDimensionsInPixel } from "layoutSystems/autolayout/utils/flexWidgetUtils";
 import { isFunction } from "lodash";
+import type { DragDetails } from "reducers/uiReducers/dragResizeReducer";
 
 const WidgetTypes = WidgetFactory.widgetTypes;
 
@@ -476,9 +480,40 @@ function* addNewTabChildSaga(
   yield put(updateAndSaveLayout(updatedWidgets));
 }
 
+function* addUIEntitySaga(addEntityAction: ReduxAction<WidgetAddChild>) {
+  try {
+    if (addEntityAction.payload.type === BUILDING_BLOCK_EXPLORER_TYPE) {
+      const dragDetails: DragDetails = yield select(getDragDetails);
+      const buildingblockName = dragDetails.newWidget.displayName;
+      const skeletonWidgetName = `loading_${buildingblockName
+        .toLowerCase()
+        .replace(/ /g, "_")}`;
+      const addSkeletonWidgetAction: ReduxAction<WidgetAddChild> = {
+        ...addEntityAction,
+        payload: {
+          ...addEntityAction.payload,
+          type: "SKELETON_WIDGET",
+          widgetName: skeletonWidgetName,
+        },
+      };
+      yield call(addChildSaga, addSkeletonWidgetAction);
+    } else {
+      yield call(addChildSaga, addEntityAction);
+    }
+  } catch (error) {
+    yield put({
+      type: ReduxActionErrorTypes.WIDGET_OPERATION_ERROR,
+      payload: {
+        action: WidgetReduxActionTypes.WIDGET_ADD_CHILD,
+        error,
+      },
+    });
+  }
+}
+
 export default function* widgetAdditionSagas() {
   yield all([
-    takeEvery(WidgetReduxActionTypes.WIDGET_ADD_CHILD, addChildSaga),
+    takeEvery(WidgetReduxActionTypes.WIDGET_ADD_CHILD, addUIEntitySaga),
     takeEvery(ReduxActionTypes.WIDGET_ADD_NEW_TAB_CHILD, addNewTabChildSaga),
   ]);
 }