diff --git a/frontend/src/Editor/SaveAndPreview.jsx b/frontend/src/Editor/SaveAndPreview.jsx
index f06157e2bb..021b0d5d6a 100644
--- a/frontend/src/Editor/SaveAndPreview.jsx
+++ b/frontend/src/Editor/SaveAndPreview.jsx
@@ -15,6 +15,7 @@ class SaveAndPreview extends React.Component {
       appId: props.appId,
       isLoading: true,
       showVersionForm: false,
+      newVersionName: '',
     };
   }
 
@@ -38,25 +39,34 @@ class SaveAndPreview extends React.Component {
   hideModal = () => {
     this.setState({
       showModal: false,
+      showVersionForm: false,
     });
   };
 
   createVersion = () => {
     const newVersionName = this.state.newVersionName;
     const appId = this.props.appId;
-    this.setState({ creatingVersion: true });
-
-    appVersionService.create(appId, newVersionName).then(() => {
-      this.setState({ showVersionForm: false, creatingVersion: false });
-      toast.success('Version Created', {
+    
+    if (newVersionName.trim() !== ''){
+      this.setState({ creatingVersion: true });
+      appVersionService.create(appId, newVersionName).then(() => {
+        this.setState({ showVersionForm: false, creatingVersion: false });
+        toast.success('Version Created', {
+          hideProgressBar: true,
+          position: 'top-center',
+          containerId: this.state.appId,
+        });
+        this.fetchVersions();
+        // eslint-disable-next-line no-undef
+        this.props.setAppDefinitionFromVersion(version);
+      });
+    } else {
+      toast.error(
+        'The name of version should not be empty', {
         hideProgressBar: true,
         position: 'top-center',
-        containerId: this.state.appId,
       });
-      this.fetchVersions();
-      // eslint-disable-next-line no-undef
-      this.props.setAppDefinitionFromVersion(version);
-    });
+    }
   };
 
   saveVersion = (versionId) => {