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..764973e8106c4 100644
--- a/ui/src/app/applications/components/applications-list/applications-list.tsx
+++ b/ui/src/app/applications/components/applications-list/applications-list.tsx
@@ -390,6 +390,20 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                         {(applications: models.Application[]) => {
                                             const healthBarPrefs = pref.statusBarView || ({} as HealthStatusBarPreferences);
                                             const {filteredApps, filterResults} = filterApps(applications, pref, pref.search);
+                                            const handleCreatePanelClose = async () => {
+                                                const outsideDiv = document.querySelector('.sliding-panel__outside');
+                                                const closeButton = document.querySelector('.sliding-panel__close');
+
+                                                if (outsideDiv && closeButton && closeButton !== document.activeElement) {
+                                                    const confirmed = await ctx.popup.confirm('Close Panel', 'Closing this panel will discard all entered values. Continue?');
+                                                    if (confirmed) {
+                                                        ctx.navigation.goto('.', {new: null}, {replace: true});
+                                                    }
+                                                } else if (closeButton === document.activeElement) {
+                                                    // If the close button is focused or clicked, close without confirmation
+                                                    ctx.navigation.goto('.', {new: null}, {replace: true});
+                                                }
+                                            };
                                             return (
                                                 <React.Fragment>
                                                     <FlexTopBar
@@ -598,7 +612,7 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                                     </ObservableQuery>
                                                     <SlidingPanel
                                                         isShown={!!appInput}
-                                                        onClose={() => ctx.navigation.goto('.', {new: null}, {replace: true})}
+                                                        onClose={() => handleCreatePanelClose()} //Separate handling for outside click.
                                                         header={
                                                             <div>
                                                                 <button