diff --git a/app/client/src/actions/templateActions.ts b/app/client/src/actions/templateActions.ts
index 65d27e8ff2..355126b972 100644
--- a/app/client/src/actions/templateActions.ts
+++ b/app/client/src/actions/templateActions.ts
@@ -118,3 +118,11 @@ export const setActiveLoadingTemplateId = (templateId: string) => ({
   type: ReduxActionTypes.SET_ACTIVE_LOADING_TEMPLATE_ID,
   payload: templateId,
 });
+
+export const showCreateAppFromTemplatesModal = () => ({
+  type: ReduxActionTypes.SHOW_CREATE_APP_FROM_TEMPLATES_MODAL,
+});
+
+export const hideCreateAppFromTemplatesModal = () => ({
+  type: ReduxActionTypes.HIDE_CREATE_APP_FROM_TEMPLATES_MODAL,
+});
diff --git a/app/client/src/ce/constants/ReduxActionConstants.tsx b/app/client/src/ce/constants/ReduxActionConstants.tsx
index 9cb429c4d7..677e432b2e 100644
--- a/app/client/src/ce/constants/ReduxActionConstants.tsx
+++ b/app/client/src/ce/constants/ReduxActionConstants.tsx
@@ -732,6 +732,8 @@ const ActionTypes = {
   REMOVE_FROM_RECENTLY_ADDED_WIDGET: "REMOVE_FROM_RECENTLY_ADDED_WIDGET",
   SHOW_TEMPLATES_MODAL: "SHOW_TEMPLATES_MODAL",
   HIDE_TEMPLATES_MODAL: "HIDE_TEMPLATES_MODAL",
+  SHOW_CREATE_APP_FROM_TEMPLATES_MODAL: "SHOW_CREATE_APP_FROM_TEMPLATES_MODAL",
+  HIDE_CREATE_APP_FROM_TEMPLATES_MODAL: "HIDE_CREATE_APP_FROM_TEMPLATES_MODAL",
   GET_TEMPLATE_FILTERS_INIT: "GET_TEMPLATE_FILTERS_INIT",
   GET_TEMPLATE_FILTERS_SUCCESS: "GET_TEMPLATE_FILTERS_SUCCESS",
   INIT_TRIGGER_VALUES: "INIT_TRIGGER_VALUES",
diff --git a/app/client/src/ce/pages/Applications/CreateNewAppFromTemplateModal/CreateNewAppFromTemplatesWrapper.tsx b/app/client/src/ce/pages/Applications/CreateNewAppFromTemplateModal/CreateNewAppFromTemplatesWrapper.tsx
index 6de3faaefe..3d56c966db 100644
--- a/app/client/src/ce/pages/Applications/CreateNewAppFromTemplateModal/CreateNewAppFromTemplatesWrapper.tsx
+++ b/app/client/src/ce/pages/Applications/CreateNewAppFromTemplateModal/CreateNewAppFromTemplatesWrapper.tsx
@@ -1,24 +1,27 @@
 import React from "react";
 import CreateNewAppFromTemplatesModal from ".";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
+import { useDispatch, useSelector } from "react-redux";
+import { createAppFromTemplatesModalSelector } from "selectors/templatesSelectors";
+import { hideCreateAppFromTemplatesModal } from "actions/templateActions";
 
 interface Props {
   currentWorkspaceId: string;
-  handleClose: () => void;
-  isOpen: boolean;
 }
 
-const CreateNewAppFromTemplatesWrapper = ({
-  currentWorkspaceId,
-  handleClose,
-  isOpen,
-}: Props) => {
+const CreateNewAppFromTemplatesWrapper = ({ currentWorkspaceId }: Props) => {
   const isCreateAppFromTemplatesEnabled = useFeatureFlag(
     "release_show_create_app_from_templates_enabled",
   );
+  const isOpen = useSelector(createAppFromTemplatesModalSelector);
+  const dispatch = useDispatch();
 
   if (!isCreateAppFromTemplatesEnabled) return null;
 
+  const handleClose = () => {
+    dispatch(hideCreateAppFromTemplatesModal());
+  };
+
   return (
     <CreateNewAppFromTemplatesModal
       currentWorkSpaceId={currentWorkspaceId}
diff --git a/app/client/src/ce/pages/Applications/index.tsx b/app/client/src/ce/pages/Applications/index.tsx
index e2265bc0d6..359a1379b1 100644
--- a/app/client/src/ce/pages/Applications/index.tsx
+++ b/app/client/src/ce/pages/Applications/index.tsx
@@ -129,6 +129,7 @@ import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import CreateNewAppFromTemplatesWrapper from "./CreateNewAppFromTemplateModal/CreateNewAppFromTemplatesWrapper";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import ImportModal from "pages/common/ImportModal";
+import { showCreateAppFromTemplatesModal } from "actions/templateActions";
 
 export const { cloudHosting } = getAppsmithConfigs();
 
@@ -494,14 +495,8 @@ export const WorkspaceSelectorWrapper = styled.div`
 `;
 
 export function ApplicationsSection(props: any) {
-  const {
-    activeWorkspaceId,
-    applications,
-    onStartFromTemplateClick,
-    packages,
-    workflows,
-    workspaces,
-  } = props;
+  const { activeWorkspaceId, applications, packages, workflows, workspaces } =
+    props;
   const enableImportExport = true;
   const dispatch = useDispatch();
   const theme = useContext(ThemeContext);
@@ -642,7 +637,7 @@ export function ApplicationsSection(props: any) {
 
   const onCreateNewApplicationFromTemplate = () => {
     AnalyticsUtil.logEvent("TEMPLATE_DROPDOWN_CLICK");
-    onStartFromTemplateClick();
+    dispatch(showCreateAppFromTemplatesModal());
   };
 
   function NoWorkspaceFound() {
@@ -969,7 +964,6 @@ export const ApplictionsMainPage = (props: any) => {
             <ApplicationsSection
               activeWorkspaceId={activeWorkspaceId}
               applications={fetchedApplications}
-              onStartFromTemplateClick={props.onStartFromTemplateClick}
               packages={packagesOfWorkspace}
               searchKeyword={searchKeyword}
               workflows={workflowsOfWorkspace}
@@ -1011,9 +1005,7 @@ export interface ApplicationProps {
   isReconnectModalOpen: boolean;
 }
 
-export interface ApplicationState {
-  startFromTemplate: boolean;
-}
+export interface ApplicationState {}
 
 export class Applications<
   Props extends ApplicationProps,
@@ -1021,19 +1013,6 @@ export class Applications<
 > extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
-
-    this.state = {
-      startFromTemplate: false,
-    } as State;
-  }
-
-  componentDidUpdate(prevProps: Readonly<Props>): void {
-    if (
-      prevProps.isReconnectModalOpen !== this.props.isReconnectModalOpen &&
-      this.props.isReconnectModalOpen
-    ) {
-      this.setState({ startFromTemplate: false });
-    }
   }
 
   componentDidMount() {
@@ -1057,10 +1036,6 @@ export class Applications<
     this.props.searchApplications("");
   }
 
-  handleStartFromTemplate() {
-    this.setState({ startFromTemplate: true });
-  }
-
   public render() {
     if (this.props.currentApplicationIdForCreateNewApp) {
       // FOR NEW USER
@@ -1080,16 +1055,11 @@ export class Applications<
       return (
         <>
           <ApplictionsMainPage
-            onStartFromTemplateClick={this.handleStartFromTemplate.bind(this)}
             searchApplications={this.props.searchApplications}
             searchKeyword={this.props.searchKeyword}
           />
           <CreateNewAppFromTemplatesWrapper
             currentWorkspaceId={this.props.currentWorkspaceId}
-            handleClose={() => {
-              this.setState({ startFromTemplate: false });
-            }}
-            isOpen={this.state.startFromTemplate}
           />
         </>
       );
diff --git a/app/client/src/reducers/uiReducers/templateReducer.ts b/app/client/src/reducers/uiReducers/templateReducer.ts
index 694011a8ea..691616b38f 100644
--- a/app/client/src/reducers/uiReducers/templateReducer.ts
+++ b/app/client/src/reducers/uiReducers/templateReducer.ts
@@ -30,6 +30,7 @@ const initialState: TemplatesReduxState = {
     isOpen: false,
     isOpenFromCanvas: false,
   },
+  isCreateAppFromTemplateModalOpen: false,
 };
 
 const templateReducer = createReducer(initialState, {
@@ -264,6 +265,22 @@ const templateReducer = createReducer(initialState, {
       },
     };
   },
+  [ReduxActionTypes.SHOW_CREATE_APP_FROM_TEMPLATES_MODAL]: (
+    state: TemplatesReduxState,
+  ) => {
+    return {
+      ...state,
+      isCreateAppFromTemplateModalOpen: true,
+    };
+  },
+  [ReduxActionTypes.HIDE_CREATE_APP_FROM_TEMPLATES_MODAL]: (
+    state: TemplatesReduxState,
+  ) => {
+    return {
+      ...state,
+      isCreateAppFromTemplateModalOpen: false,
+    };
+  },
   [ReduxActionTypes.GET_TEMPLATE_FILTERS_INIT]: (
     state: TemplatesReduxState,
   ) => {
@@ -313,6 +330,7 @@ export interface TemplatesReduxState {
     isOpenFromCanvas: boolean;
   };
   loadingFilters: boolean;
+  isCreateAppFromTemplateModalOpen: boolean;
 }
 
 export default templateReducer;
diff --git a/app/client/src/sagas/TemplatesSagas.ts b/app/client/src/sagas/TemplatesSagas.ts
index f753641149..7fafa8fe22 100644
--- a/app/client/src/sagas/TemplatesSagas.ts
+++ b/app/client/src/sagas/TemplatesSagas.ts
@@ -28,6 +28,7 @@ import { getDefaultPageId } from "@appsmith/sagas/ApplicationSagas";
 import { getDefaultPageId as selectDefaultPageId } from "sagas/selectors";
 import {
   getAllTemplates,
+  hideCreateAppFromTemplatesModal,
   hideTemplatesModal,
   setTemplateNotificationSeenAction,
   showStarterBuildingBlockDatasourcePrompt,
@@ -65,6 +66,7 @@ import { isAirgapped } from "@appsmith/utils/airgapHelpers";
 import { STARTER_BUILDING_BLOCKS } from "constants/TemplatesConstants";
 import urlBuilder from "@appsmith/entities/URLRedirect/URLAssembly";
 import { fetchJSLibraries } from "actions/JSLibraryActions";
+import { createAppFromTemplatesModalSelector } from "selectors/templatesSelectors";
 
 const isAirgappedInstance = isAirgapped();
 
@@ -128,6 +130,12 @@ function* importTemplateToWorkspaceSaga(
         history.push(pageURL);
       }
       yield put(getAllTemplates());
+      const isCreateAppFromTemplateModal: boolean = yield select(
+        createAppFromTemplatesModalSelector,
+      );
+      if (isCreateAppFromTemplateModal) {
+        yield put(hideCreateAppFromTemplatesModal());
+      }
     }
   } catch (error) {
     yield put({
diff --git a/app/client/src/selectors/templatesSelectors.tsx b/app/client/src/selectors/templatesSelectors.tsx
index 0f2771afff..0e954c2fb8 100644
--- a/app/client/src/selectors/templatesSelectors.tsx
+++ b/app/client/src/selectors/templatesSelectors.tsx
@@ -225,3 +225,6 @@ export const templatesCountSelector = (state: AppState) =>
 
 export const activeLoadingTemplateId = (state: AppState) =>
   state.ui.templates.activeLoadingTemplateId;
+
+export const createAppFromTemplatesModalSelector = (state: AppState) =>
+  state.ui.templates.isCreateAppFromTemplateModalOpen;