diff --git a/src/components/ChatApp/MessageSection/DialogSection.js b/src/components/ChatApp/MessageSection/DialogSection.js
index fe5f80661f..d3de8bdf63 100755
--- a/src/components/ChatApp/MessageSection/DialogSection.js
+++ b/src/components/ChatApp/MessageSection/DialogSection.js
@@ -8,101 +8,118 @@ import Close from 'material-ui/svg-icons/navigation/close';
 
 export default class DialogSection extends Component {
 
-  render(){
-    const closingStyle ={
-        position: 'absolute',
-        zIndex: 1200,
-        fill: '#444',
-        width: '26px',
-        height: '26px',
-        right: '10px',
-        top: '10px',
-        cursor:'pointer'
-      }
-    const customThemeBodyStyle = {
-      padding: 0,
-      textAlign: 'center',
-      backgroundColor:'#f9f9f9'
-    }
-    return(
-      <div>
-      {/* Login */}
-        <Dialog
-          className='dialogStyle'
-          modal={false}
-          open={this.props.openLogin}
-          autoScrollBodyContent={true}
-          bodyStyle={this.props.bodyStyle}
-          contentStyle={{width: '35%',minWidth: '300px'}}
-          onRequestClose={this.props.onRequestClose()}>
-          <Login {...this.props}
-          handleForgotPassword={this.props.onForgotPassword()}
-          handleSignUp={this.props.handleSignUp}/>
-          <Close style={closingStyle} onTouchTap={this.props.onRequestClose()} />
-        </Dialog>
-      {/* SignUp */}
-        <Dialog
-          className='dialogStyle'
-          modal={false}
-          open={this.props.openSignUp}
-          autoScrollBodyContent={true}
-          bodyStyle={this.props.bodyStyle}
-          contentStyle={{width: '35%',minWidth: '300px'}}
-          onRequestClose={this.props.onRequestClose()}>
-          <SignUp {...this.props}
-            onRequestClose={this.props.onRequestClose()}
-            onLoginSignUp={this.props.onLoginSignUp()} />
-            <Close style={closingStyle} onTouchTap={this.props.onRequestClose()} />
-        </Dialog>
-      {/*  Forgot Password */}
-      <Dialog
-          className='dialogStyle'
-          modal={false}
-          open={this.props.openForgotPassword}
-          autoScrollBodyContent={true}
-          contentStyle={{width: '35%',minWidth: '300px'}}
-          onRequestClose={this.props.onRequestClose()}>
-          <ForgotPassword {...this.props}
-          onLoginSignUp={this.props.onLoginSignUp()}
-          showForgotPassword={this.showForgotPassword}/>
-          <Close style={closingStyle}
-          onTouchTap={this.props.onRequestClose()}/>
-        </Dialog>
-      {/* ThemeChanger */}
-        <Dialog
-          actions={this.props.customSettingsDone}
-          modal={false}
-          open={this.props.openThemeChanger}
-          autoScrollBodyContent={true}
-          bodyStyle={customThemeBodyStyle}
-          contentStyle={{width: '35%',minWidth: '300px'}}
-          onRequestClose={this.props.onRequestClose()}>
-          <div className='settingsComponents'>
-            {this.props.ThemeChangerComponents}
-          </div>
-          <Close style={closingStyle} onTouchTap={this.props.onRequestClose()} />
-        </Dialog>
-      </div>
-    );
-  }
+	render() {
+		const closingStyle = {
+			position: 'absolute',
+			zIndex: 1200,
+			fill: '#444',
+			width: '26px',
+			height: '26px',
+			right: '10px',
+			top: '10px',
+			cursor: 'pointer'
+		}
+		const customThemeBodyStyle = {
+			padding: 0,
+			textAlign: 'center',
+			backgroundColor: '#f9f9f9'
+		}
+		return (
+			<div>
+				{/* Login */}
+				<Dialog
+					className='dialogStyle'
+					modal={false}
+					open={this.props.openLogin}
+					autoScrollBodyContent={true}
+					bodyStyle={this.props.bodyStyle}
+					contentStyle={{ width: '35%', minWidth: '300px' }}
+					onRequestClose={this.props.onRequestClose()}>
+					<Login {...this.props}
+						handleForgotPassword={this.props.onForgotPassword()}
+						handleSignUp={this.props.handleSignUp} />
+					<Close style={closingStyle} onTouchTap={this.props.onRequestClose()} />
+				</Dialog>
+				{/* SignUp */}
+				<Dialog
+					className='dialogStyle'
+					modal={false}
+					open={this.props.openSignUp}
+					autoScrollBodyContent={true}
+					bodyStyle={this.props.bodyStyle}
+					contentStyle={{ width: '35%', minWidth: '300px' }}
+					onRequestClose={this.props.onRequestClose()}>
+					<SignUp {...this.props}
+						onRequestClose={this.props.onRequestClose()}
+						onLoginSignUp={this.props.onLoginSignUp()} />
+					<Close style={closingStyle} onTouchTap={this.props.onRequestClose()} />
+				</Dialog>
+				{/*  Forgot Password */}
+				<Dialog
+					className='dialogStyle'
+					modal={false}
+					open={this.props.openForgotPassword}
+					autoScrollBodyContent={true}
+					contentStyle={{ width: '35%', minWidth: '300px' }}
+					onRequestClose={this.props.onRequestClose()}>
+					<ForgotPassword {...this.props}
+						onLoginSignUp={this.props.onLoginSignUp()}
+						showForgotPassword={this.showForgotPassword} />
+					<Close style={closingStyle}
+						onTouchTap={this.props.onRequestClose()} />
+				</Dialog>
+				{/* ThemeChanger */}
+				<Dialog
+					actions={this.props.customSettingsDone}
+					modal={false}
+					open={this.props.openThemeChanger}
+					autoScrollBodyContent={true}
+					bodyStyle={customThemeBodyStyle}
+					contentStyle={{ width: '35%', minWidth: '300px' }}
+					onRequestClose={this.props.onRequestClose()}>
+					<div className='settingsComponents'>
+						{this.props.ThemeChangerComponents}
+					</div>
+					<Close style={closingStyle} onTouchTap={this.props.onRequestClose()} />
+				</Dialog>
+				<Dialog
+					contentStyle={{ width: '610px' }}
+					title="Welcome to SUSI Web Chat"
+					open={this.props.tour}
+				>
+					<iframe
+						width="560"
+						height="315"
+						src="https://www.youtube.com/embed/9T3iMoAUKYA"
+						gesture="media"
+						allow="encrypted-media"
+						>
+					</iframe>
+					<Close style={closingStyle} onTouchTap={this.props.onRequestCloseTour()} />
+				</Dialog>
+			</div>
+		);
+	}
 }
 
 DialogSection.propTypes = {
-    openLogin: PropTypes.bool,
-    openSignUp: PropTypes.bool,
-    openForgotPassword: PropTypes.bool,
-    openHardwareChange: PropTypes.bool,
-    openThemeChanger: PropTypes.bool,
-    onLoginSignUp:PropTypes.func,
-    handleSignUp: PropTypes.func,
-    ServerChangeActions: PropTypes.array,
-    HardwareActions: PropTypes.array,
-    customSettingsDone: PropTypes.object,
-    ThemeChangerComponents: PropTypes.array,
-    actions: PropTypes.object,
-    bodyStyle: PropTypes.object,
-    onRequestClose: PropTypes.func,
-    onSaveThemeSettings: PropTypes.func,
-    onForgotPassword: PropTypes.func,
-    onSignedUp: PropTypes.func
+	openLogin: PropTypes.bool,
+	openSignUp: PropTypes.bool,
+	openForgotPassword: PropTypes.bool,
+	openHardwareChange: PropTypes.bool,
+	openThemeChanger: PropTypes.bool,
+	tour: PropTypes.bool,
+	onLoginSignUp: PropTypes.func,
+	handleSignUp: PropTypes.func,
+	ServerChangeActions: PropTypes.array,
+	HardwareActions: PropTypes.array,
+	customSettingsDone: PropTypes.object,
+	ThemeChangerComponents: PropTypes.array,
+	actions: PropTypes.object,
+	bodyStyle: PropTypes.object,
+	onRequestClose: PropTypes.func,
+	onRequestCloseTour: PropTypes.func,
+	onSaveThemeSettings: PropTypes.func,
+	onForgotPassword: PropTypes.func,
+	onSignedUp: PropTypes.func
 };
diff --git a/src/components/ChatApp/MessageSection/MessageSection.react.js b/src/components/ChatApp/MessageSection/MessageSection.react.js
index 7d219a7e0e..56e394320b 100755
--- a/src/components/ChatApp/MessageSection/MessageSection.react.js
+++ b/src/components/ChatApp/MessageSection/MessageSection.react.js
@@ -19,6 +19,10 @@ import FloatingActionButton from 'material-ui/FloatingActionButton';
 import NavigateDown from 'material-ui/svg-icons/navigation/expand-more';
 import * as Actions from '../../../actions/';
 import Translate from '../../Translate/Translate.react';
+import Cookies from 'universal-cookie';
+
+
+const cookies=new Cookies();
 
 function getStateFromStores() {
   var themeValue=[];
@@ -36,7 +40,8 @@ function getStateFromStores() {
     SnackbarOpenBackground: false,
     messages: MessageStore.getAllForCurrentThread(),
     thread: ThreadStore.getCurrent(),
-    currTheme: UserPreferencesStore.getTheme(),
+		currTheme: UserPreferencesStore.getTheme(),
+		tour:true,
     search: false,
     showLoading: MessageStore.getLoadStatus(),
     showLogin: false,
@@ -166,7 +171,7 @@ class MessageSection extends Component {
   };
 
   state = {
-    showLogin: false
+		showLogin: false
   };
 
   constructor(props) {
@@ -181,7 +186,8 @@ class MessageSection extends Component {
       'button':this.state.button.substring(1)
 
     };
-  }
+	}
+
 
   handleColorChange = (name,color) => {
     // Current Changes
@@ -331,7 +337,7 @@ class MessageSection extends Component {
       showLogin: false,
       showSignUp: false,
       showThemeChanger: false,
-      openForgotPassword: false
+			openForgotPassword: false,
     });
 
     if(prevThemeSettings && prevThemeSettings.hasOwnProperty('currTheme') && prevThemeSettings.currTheme==='custom'){
@@ -379,7 +385,17 @@ class MessageSection extends Component {
       });
     }
   }
+	handleCloseTour = ()=>{
+    this.setState({
+      showLogin: false,
+      showSignUp: false,
+      showThemeChanger: false,
+			openForgotPassword: false,
+			tour:false
+		});
+		cookies.set('visited', true, { path: '/' });
 
+	}
   // Save Custom Theme settings on server
   saveThemeSettings = () => {
     let customData='';
@@ -596,11 +612,13 @@ class MessageSection extends Component {
 
   componentWillUnmount() {
     MessageStore.removeChangeListener(this._onChange.bind(this));
-    ThreadStore.removeChangeListener(this._onChange.bind(this));
+		ThreadStore.removeChangeListener(this._onChange.bind(this));
+
   }
 
   componentWillMount() {
 
+
     if (this.props.location) {
       if (this.props.location.state) {
         if (this.props.location.state.hasOwnProperty('showLogin')) {
@@ -641,7 +659,8 @@ class MessageSection extends Component {
             // do nothing
         }
       }
-    })
+		})
+
   }
 
   invertColorTextArea =() => {
@@ -674,7 +693,7 @@ class MessageSection extends Component {
     var messagePane;
     var textArea;
     var buttonColor;
-    var textColor;
+		var textColor;
 
     switch(this.state.currTheme){
       case 'custom':{
@@ -940,10 +959,14 @@ class MessageSection extends Component {
               actions={actions}
               handleSignUp={this.handleSignUp}
               customSettingsDone={customSettingsDone}
-              onRequestClose={()=>this.handleClose}
+							onRequestClose={()=>this.handleClose}
+							onRequestCloseTour={()=>this.handleCloseTour}
               onSaveThemeSettings={()=>this.handleSaveTheme}
               onLoginSignUp={()=>this.handleOpen}
-              onForgotPassword={()=>this.forgotPasswordChanged} />
+							onForgotPassword={()=>this.forgotPasswordChanged}
+							tour={!cookies.get('visited')}
+
+							 />
             </div>)
              : (
              <div className='message-pane'>