diff --git a/samples/react-bot-framework/assets/bot-framework-webpart-preview.png b/samples/react-bot-framework/assets/bot-framework-webpart-preview.png
new file mode 100644
index 000000000..b6841fc80
Binary files /dev/null and b/samples/react-bot-framework/assets/bot-framework-webpart-preview.png differ
diff --git a/samples/react-bot-framework/package.json b/samples/react-bot-framework/package.json
index dd26f8fbf..8195f76a8 100644
--- a/samples/react-bot-framework/package.json
+++ b/samples/react-bot-framework/package.json
@@ -6,16 +6,17 @@
     "node": ">=0.10.0"
   },
   "dependencies": {
-    "@microsoft/sp-client-base": "~0.3.0",
-    "@microsoft/sp-client-preview": "~0.4.0",
+    "@microsoft/sp-client-base": "~0.4.0",
+    "@microsoft/sp-client-preview": "~0.5.0",
     "office-ui-fabric-react": "0.36.0",
     "react": "0.14.8",
-    "react-dom": "0.14.8"
+    "react-dom": "0.14.8",
+    "swagger-client": "^2.1.23"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "~0.6.0",
-    "@microsoft/sp-module-interfaces": "~0.3.0",
-    "@microsoft/sp-webpart-workbench": "~0.4.0",
+    "@microsoft/sp-build-web": "~0.7.0",
+    "@microsoft/sp-module-interfaces": "~0.4.0",
+    "@microsoft/sp-webpart-workbench": "~0.5.0",
     "gulp": "~3.9.1"
   },
   "scripts": {
diff --git a/samples/react-bot-framework/screenshot.png b/samples/react-bot-framework/screenshot.png
deleted file mode 100644
index d1c55bd76..000000000
Binary files a/samples/react-bot-framework/screenshot.png and /dev/null differ
diff --git a/samples/react-bot-framework/src/webparts/botFrameworkChat/BotFrameworkChat.module.scss b/samples/react-bot-framework/src/webparts/botFrameworkChat/BotFrameworkChat.module.scss
index 268860e64..eceabfd1d 100644
--- a/samples/react-bot-framework/src/webparts/botFrameworkChat/BotFrameworkChat.module.scss
+++ b/samples/react-bot-framework/src/webparts/botFrameworkChat/BotFrameworkChat.module.scss
@@ -7,8 +7,7 @@
   .chatHeader {
     padding:10px;
     background-color: #c7e0f4;
-    color: #000;
-    font-weight: bold;
+    color: #fff;
   }
 
   .messagesRow {
diff --git a/samples/react-bot-framework/src/webparts/botFrameworkChat/BotFrameworkChatWebPart.manifest.json b/samples/react-bot-framework/src/webparts/botFrameworkChat/BotFrameworkChatWebPart.manifest.json
index c6589a046..a456e77cd 100644
--- a/samples/react-bot-framework/src/webparts/botFrameworkChat/BotFrameworkChatWebPart.manifest.json
+++ b/samples/react-bot-framework/src/webparts/botFrameworkChat/BotFrameworkChatWebPart.manifest.json
@@ -17,8 +17,8 @@
       "placeholderText": "Your message",
       "title": "Chat",
       "directLineSecret": "",
-      "titleBarBackgroundColor": "c7e0f4",
-      "botMessagesBackgroundColor": "c8c8c8",
+      "titleBarBackgroundColor": "3C3C3C",
+      "botMessagesBackgroundColor": "f4f4f4",
       "botMessagesForegroundColor": "000000",
       "userMessagesBackgroundColor": "c7e0f4",
       "userMessagesForegroundColor": "000000"
diff --git a/samples/react-bot-framework/src/webparts/botFrameworkChat/components/BotFrameworkChat.tsx b/samples/react-bot-framework/src/webparts/botFrameworkChat/components/BotFrameworkChat.tsx
index f18ff17e5..c90addbfc 100644
--- a/samples/react-bot-framework/src/webparts/botFrameworkChat/components/BotFrameworkChat.tsx
+++ b/samples/react-bot-framework/src/webparts/botFrameworkChat/components/BotFrameworkChat.tsx
@@ -21,52 +21,54 @@ export default class BotFrameworkChat extends React.Component<IBotFrameworkChatP
     return (
       <div className={styles.botFrameworkChat}>
         <div className={styles.container}>
-          <div className={css('ms-Grid-row ms-font-xl', styles.chatHeader) } style={{ backgroundColor: '#' + this.props.titleBarBackgroundColor }} >
-            { this.props.title }
+          <div className={css('ms-Grid-row ms-font-xl', styles.chatHeader)} style={{ backgroundColor: '#' + this.props.titleBarBackgroundColor }} >
+            {this.props.title}
           </div>
-          <div className={css('ms-Grid-row', styles.messagesRow) } >
+          <div className={css('ms-Grid-row', styles.messagesRow)} >
             <div className='ms-Grid-col ms-u-sm12' ref='messageHistoryDiv' dangerouslySetInnerHTML={{ __html: this.getMessagesHtml() }}>
             </div>
           </div>
-          <div className={css('ms-Grid-row') }>
-            <TextField id='MessageBox' onKeyUp={ (e) => this.tbKeyUp(e) } onKeyDown={ (e) => this.tbKeyDown(e) }
-              value={this.currentMessageText} placeholder={ this.props.placeholderText } className={ css('ms-fontSize-m', styles.messageBox) } />
+          <div className={css('ms-Grid-row')}>
+            <TextField id='MessageBox' onKeyUp={(e) => this.tbKeyUp(e)} onKeyDown={(e) => this.tbKeyDown(e)}
+              value={this.currentMessageText} placeholder={this.props.placeholderText} className={css('ms-fontSize-m', styles.messageBox)} />
           </div>
         </div>
       </div>
     );
   }
 
-  public componentDidMount(): void {
-    if (this.props.directLineSecret) {
-      var Swagger = require('swagger-client');
-      var directLineSpec = require('./directline-swagger.json');
+  public componentDidUpdate(prevProps: IBotFrameworkChatWebPartProps, prevState: {}, prevContext: any): void {
+    if (this.props.directLineSecret !== prevProps.directLineSecret) {
+      if (this.props.directLineSecret) {
+        var Swagger = require('swagger-client');
+        var directLineSpec = require('./directline-swagger.json');
 
-      this.directLineClientSwagger = new Swagger(
-        {
-          spec: directLineSpec,
-          usePromise: true,
-        }).then((client) => {
-          client.clientAuthorizations.add('AuthorizationBotConnector', new Swagger.ApiKeyAuthorization('Authorization', 'BotConnector ' + this.props.directLineSecret, 'header'));
-          console.log('DirectLine client generated');
-          return client;
-        }).catch((err) =>
-          console.error('Error initializing DirectLine client', err));
+        this.directLineClientSwagger = new Swagger(
+          {
+            spec: directLineSpec,
+            usePromise: true,
+          }).then((client) => {
+            client.clientAuthorizations.add('AuthorizationBotConnector', new Swagger.ApiKeyAuthorization('Authorization', 'BotConnector ' + this.props.directLineSecret, 'header'));
+            console.log('DirectLine client generated');
+            return client;
+          }).catch((err) =>
+            console.error('Error initializing DirectLine client', err));
 
-      this.directLineClientSwagger.then((client) => {
-        client.Conversations.Conversations_NewConversation()
-          .then((response) => response.obj.conversationId)
-          .then((conversationId) => {
+        this.directLineClientSwagger.then((client) => {
+          client.Conversations.Conversations_NewConversation()
+            .then((response) => response.obj.conversationId)
+            .then((conversationId) => {
 
-            this.conversationId = conversationId;
-            this.pollMessages(client, conversationId);
-            this.directLineClient = client;
-          });
-      });
+              this.conversationId = conversationId;
+              this.pollMessages(client, conversationId);
+              this.directLineClient = client;
+            });
+        });
 
-      this.sendAsUserName = this.props.context.pageContext.user.loginName;
+        this.sendAsUserName = this.props.context.pageContext.user.loginName;
 
-      this.printMessage = this.printMessage.bind(this);
+        this.printMessage = this.printMessage.bind(this);
+      }
     }
   }