diff --git a/SAS/TMSS/frontend/tmss_webapp/src/App.js b/SAS/TMSS/frontend/tmss_webapp/src/App.js
index 135d3e0d6a63daf5505cea7b2610e9a3fe059ea9..22a596e3782194c80134151c6ffaccf8541c39f0 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/App.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/App.js
@@ -52,6 +52,7 @@ class App extends Component {
         this.setPageTitle = this.setPageTitle.bind(this);
         this.loggedIn = this.loggedIn.bind(this);
         this.logout = this.logout.bind(this);
+        this.validateAndLogout = this.validateAndLogout.bind(this);
         this.setSearchField = this.setSearchField.bind(this);
         this.toggleEditToggle = this.toggleEditToggle.bind(this);
 
@@ -141,6 +142,18 @@ class App extends Component {
         this.setState({authenticated: false, redirect:"/"});
     }
 
+    /**
+     * Get confirmation if any of the page has unsaved data and then logout.
+     * @returns 
+     */
+    validateAndLogout() {
+        if (this.state.isEditDirty) {
+            this.toggleDirtyDialog(this.logout);
+        }   else {
+            this.logout();
+        }
+    }
+
     toggleEditToggle() {
         this.setState({ showEditDialog: !this.state.showEditDialog });
     }
@@ -240,7 +253,7 @@ class App extends Component {
                             <AppTopbar 
                                 onToggleMenu={this.onToggleMenu} 
                                 isLoggedIn={this.state.authenticated} 
-                                onLogout={this.logout} 
+                                onLogout={this.validateAndLogout} 
                                 setSearchField={this.setSearchField}
                             />
                             <Router basename={ this.state.currentPath }>