diff --git a/ui/src/app/applications/components/applications-container.tsx b/ui/src/app/applications/components/applications-container.tsx
index 37c2181bdc621..883218dbfee7c 100644
--- a/ui/src/app/applications/components/applications-container.tsx
+++ b/ui/src/app/applications/components/applications-container.tsx
@@ -7,6 +7,7 @@ import {ApplicationsList} from './applications-list/applications-list';
 export const ApplicationsContainer = (props: RouteComponentProps<any>) => (
     <Switch>
         <Route exact={true} path={`${props.match.path}`} component={ApplicationsList} />
+        <Route exact={true} path={`${props.match.path}/opsmx/creation`} component={ApplicationsList} />
         <Route exact={true} path={`${props.match.path}/:name`} component={ApplicationDetails} />
         <Route exact={true} path={`${props.match.path}/:name/opsmx/details`} component={ApplicationDetails} />
         <Route exact={true} path={`${props.match.path}/:appnamespace/:name`} component={ApplicationDetails} />
diff --git a/ui/src/app/applications/components/applications-list/applications-list.tsx b/ui/src/app/applications/components/applications-list/applications-list.tsx
index d6ddfeb343e66..8d77a69b93229 100644
--- a/ui/src/app/applications/components/applications-list/applications-list.tsx
+++ b/ui/src/app/applications/components/applications-list/applications-list.tsx
@@ -309,11 +309,22 @@ const FlexTopBar = (props: {toolbar: Toolbar | Observable<Toolbar>}) => {
     );
 };
 
+const checkUrlIncludesOpsmx = (param: string) => {
+    let urlSplit = param?.split('/')
+    if(urlSplit && urlSplit[urlSplit.length-2] == 'opsmx' && urlSplit[urlSplit.length-1] == 'creation'){
+        return true;
+    }
+        return false;
+}
+
 export const ApplicationsList = (props: RouteComponentProps<{}>) => {
     const query = new URLSearchParams(props.location.search);
     const appInput = tryJsonParse(query.get('new'));
     const syncAppsInput = tryJsonParse(query.get('syncApps'));
     const refreshAppsInput = tryJsonParse(query.get('refreshApps'));
+    const context = React.useContext(Context);
+    const locationPath = context.history.location.pathname;
+    const pathHasOpsmx = checkUrlIncludesOpsmx(locationPath);
     const [createApi, setCreateApi] = React.useState(null);
     const clusters = React.useMemo(() => services.clusters.list(), []);
     const [isAppCreatePending, setAppCreatePending] = React.useState(false);
@@ -598,7 +609,11 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                                     </ObservableQuery>
                                                     <SlidingPanel
                                                         isShown={!!appInput}
-                                                        onClose={() => ctx.navigation.goto('.', {new: null}, {replace: true})}
+                                                        onClose={() => {
+                                                            if(pathHasOpsmx){
+                                                                window.parent.postMessage({msg:'closeEvent'},'*')
+                                                            }
+                                                            ctx.navigation.goto('.', {new: null}, {replace: true})}}
                                                         header={
                                                             <div>
                                                                 <button
@@ -611,7 +626,11 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                                                 </button>{' '}
                                                                 <button
                                                                     qe-id='applications-list-button-cancel'
-                                                                    onClick={() => ctx.navigation.goto('.', {new: null}, {replace: true})}
+                                                                    onClick={() => {  
+                                                                    if(pathHasOpsmx){
+                                                                     window.parent.postMessage({msg:'closeEvent'},'*')
+                                                                    }
+                                                                    ctx.navigation.goto('.', {new: null}, {replace: true})}}
                                                                     className='argo-button argo-button--base-o'>
                                                                     Cancel
                                                                 </button>
@@ -626,6 +645,10 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                                                     setAppCreatePending(true);
                                                                     try {
                                                                         await services.applications.create(app);
+                                                                        //iframe msg alert needed
+                                                                        if(pathHasOpsmx){
+                                                                            window.parent.postMessage({msg:'saveEvent'},'*')
+                                                                        }
                                                                         ctx.navigation.goto('.', {new: null}, {replace: true});
                                                                     } catch (e) {
                                                                         ctx.notifications.show({
diff --git a/ui/src/app/shared/components/layout/layout.tsx b/ui/src/app/shared/components/layout/layout.tsx
index 096fdde68e99b..1cbaeead3e569 100644
--- a/ui/src/app/shared/components/layout/layout.tsx
+++ b/ui/src/app/shared/components/layout/layout.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {Sidebar} from '../../../sidebar/sidebar';
 import {ViewPreferences} from '../../services';
+import { Context } from '../../context';
 
 require('./layout.scss');
 
@@ -12,9 +13,21 @@ export interface LayoutProps {
     isExtension?: boolean;
 }
 
+const checkUrlIncludesOpsmx = (param: string) => {
+    let urlSplit = param?.split('/')
+    if(urlSplit && urlSplit[urlSplit.length-2] == 'opsmx' && urlSplit[urlSplit.length-1] == 'creation'){
+        return true;
+    }
+        return false;
+}
+
 const getBGColor = (theme: string): string => (theme === 'light' ? '#dee6eb' : '#100f0f');
 
 export const Layout = (props: LayoutProps) => {
+    const context = React.useContext(Context);
+    const locationPath = context.history.location.pathname;
+    const pathHasOpsmx = checkUrlIncludesOpsmx(locationPath);
+
     React.useEffect(() => {
         if (props.pref.theme) {
             document.body.style.background = getBGColor(props.pref.theme);
@@ -23,7 +36,7 @@ export const Layout = (props: LayoutProps) => {
 
     return (
         <div className={props.pref.theme ? 'theme-' + props.pref.theme : 'theme-light'}>
-            <div className={`cd-layout ${props.isExtension ? 'cd-layout--extension' : ''}`}>
+            <div className={`cd-layout ${props.isExtension ? 'cd-layout--extension' : ''} ${pathHasOpsmx ? 'opsmx_hide': ''}`}>
                 <Sidebar onVersionClick={props.onVersionClick} navItems={props.navItems} pref={props.pref} />
                 <div className={`cd-layout__content ${props.pref.hideSidebar ? 'cd-layout__content--sb-collapsed' : 'cd-layout__content--sb-expanded'} custom-styles`}>
                     {props.children}
diff --git a/ui/src/app/sidebar/sidebar.tsx b/ui/src/app/sidebar/sidebar.tsx
index 3811d1277d51e..b3a855992981e 100644
--- a/ui/src/app/sidebar/sidebar.tsx
+++ b/ui/src/app/sidebar/sidebar.tsx
@@ -30,12 +30,11 @@ export const useSidebarTarget = () => {
 };
 
 const checkUrlIncludesOpsmx = (param: string) => {
-    let urlSplit = param.split('/')
-    if(urlSplit[urlSplit.length-2] == 'opsmx' && urlSplit[urlSplit.length-1] == 'details'){
+    let urlSplit = param?.split('/')
+    if(urlSplit && urlSplit[urlSplit.length-2] == 'opsmx' && (urlSplit[urlSplit.length-1] == 'details' || urlSplit[urlSplit.length-1] == 'creation')){
         return true;
-    }else{
-        return false;
     }
+        return false;
 }
 
 export const Sidebar = (props: SidebarProps) => {
diff --git a/ui/src/assets/styles.css b/ui/src/assets/styles.css
index 8c293c817fd44..03145fc8e055a 100644
--- a/ui/src/assets/styles.css
+++ b/ui/src/assets/styles.css
@@ -171,4 +171,12 @@ input.autocomplete__input.input {
 }
 .settings-overview__redirect-panel, .user-info-overview__panel, .argo-table-list__row {
     box-shadow: 0px 0px 4px 1px rgb(0 0 0 / 10%) !important;
+}
+
+.opsmx_hide .sliding-panel__wrapper{
+    width:100% !important
+}
+
+.opsmx_hide .page__top-bar, .opsmx_hide .sidebar  {
+ display: none;
 }
\ No newline at end of file