diff --git a/src/ActivityView.tsx b/src/ActivityView.tsx
index 0e28b60c3c..1a27a18e4e 100644
--- a/src/ActivityView.tsx
+++ b/src/ActivityView.tsx
@@ -105,7 +105,7 @@ export class ActivityView extends React.Component<ActivityViewProps, {}> {
                     }
                 })
                     return (
-                        <div>
+                    <div>
                             <FormattedText
                                 text={ activity.text }
                                 format={ activity.textFormat }
@@ -120,11 +120,17 @@ export class ActivityView extends React.Component<ActivityViewProps, {}> {
                                 size={ props.size }
                                 tiles={tiles}
                             />
-                        </div>
+                    </div>
                     );
 
             case 'typing':
-                return <div className="wc-typing"/>;
+                return <div className="ticontainer">
+                <div className="tiblock">
+                  <div className="tidot"></div>
+                  <div className="tidot"></div>
+                  <div className="tidot"></div>
+                </div>
+              </div>;
         }
     }
 }
\ No newline at end of file
diff --git a/src/App/templates/AssistantTemplate.tsx b/src/App/templates/AssistantTemplate.tsx
index 07c8e2617f..7ad17ab84d 100644
--- a/src/App/templates/AssistantTemplate.tsx
+++ b/src/App/templates/AssistantTemplate.tsx
@@ -9,6 +9,9 @@ export class AssistantTemplate extends React.Component<
     Props,
     { introMode: boolean; inputValue: string; darkMode: boolean }
 > {
+    private textareaRef: HTMLTextAreaElement | null = null;
+    private cardRef: HTMLDivElement | null = null;
+
     constructor(props: Props) {
         super(props)
         this.state = {
@@ -42,7 +45,9 @@ export class AssistantTemplate extends React.Component<
     }
 
     handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-        this.setState({ inputValue: event.target.value })
+        this.setState({ inputValue: event.target.value }, () => {
+            this.adjustTextareaHeight();
+        })
     }
 
     handleInputKeyPress = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
@@ -57,6 +62,17 @@ export class AssistantTemplate extends React.Component<
         this.setState((prevState) => ({ darkMode: !prevState.darkMode }))
     }
 
+    adjustTextareaHeight = () => {
+        const textarea = this.textareaRef;
+        const card = this.cardRef
+        if (textarea && card) {
+            textarea.style.height = 'auto';
+            card.style.height = "auto";
+            textarea.style.height = `${textarea.scrollHeight}px`;
+            card.style.height = `${textarea.scrollHeight}px`;
+        }
+    }
+
     renderIntroSection() {
         const { theme } = this.props
         const welcomeTitle = (theme && theme.template && theme.template.welcomeTitle) || 'Welcome to the chatbot!'
@@ -66,15 +82,16 @@ export class AssistantTemplate extends React.Component<
         return (
             <div className="intro-section">
                 <h1 className="intro-title">{welcomeTitle}</h1>
-                <div className="card">
+                <div className="card" ref={el => this.cardRef = el}>
                     <textarea
+                        ref={el => this.textareaRef = el}
                         id="chat-input"
                         className="chat-input"
-                        placeholder="Type your message..."
+                        placeholder={this.props.consolePlaceholder || "Type your message..."}
                         value={this.state.inputValue}
                         onChange={this.handleInputChange}
                         onKeyPress={this.handleInputKeyPress}
-                        rows={5}
+                        rows={1}
                         autoFocus
                     />
                     <button
diff --git a/src/scss/botchat.scss b/src/scss/botchat.scss
index 60a419d8d2..129ffea1e8 100644
--- a/src/scss/botchat.scss
+++ b/src/scss/botchat.scss
@@ -703,11 +703,49 @@
 
 /* animation */
 
-    .wc-typing {
-        background-image: url('data:image/gif;base64,R0lGODlhMgAZAPUAAH9/f5mZmeXl5czMzLKystXV1YaGhoODg7y8vICAgPX19fT09JaWlubm5peXl76+voWFhff394KCgufn57a2tv39/d3d3e7u7vLy8s/Pz+rq6vv7+56enr29vZiYmJWVlYeHh83NzdfX1+Tk5JycnLOzs/b29rW1tcnJyfj4+Pn5+cHBwcvLy9jY2KysrMDAwKurq52dnbS0tM7Ozpubm8rKyq2trZ+fn6qqqtbW1r+/v7e3t////wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyMDMxOUFGRTkyMjA2ODExOEMxNEVDNjFBQkVEODcyRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGN0ZBODNBNEQ1MTYxMUUyQjFFQ0IwODJDOEVFM0ZENCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGN0ZBODNBM0Q1MTYxMUUyQjFFQ0IwODJDOEVFM0ZENCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRG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');
-        background-repeat: no-repeat;
+    .tiblock {
+        align-items: center;
+        display: flex;
         height: 20px;
-        width: 64px;
+    }
+
+    .ticontainer .tidot {
+        background-color: #333;
+    }
+
+    .feedbot-wrapper.dark-mode .ticontainer .tidot {
+        background-color: white;
+    }
+
+    .tidot {
+        animation: mercuryTypingAnimation 1.5s infinite ease-in-out;
+        border-radius: 3px;
+        display: inline-block;
+        height: 5px;
+        margin-right: 2px;
+        width: 5px;
+    }
+
+    @keyframes mercuryTypingAnimation{
+        0%{
+            transform:translateY(0px)
+        }
+        28%{
+            transform:translateY(-5px)
+        }
+        44%{
+            transform:translateY(0px)
+        }
+    }
+
+    .tidot:nth-child(1){
+        animation-delay:200ms;
+    }
+    .tidot:nth-child(2){
+        animation-delay:300ms;
+    }
+    .tidot:nth-child(3){
+        animation-delay:400ms;
     }
 
     .wc-animate-scroll {
diff --git a/src/themes/AssistantTheme.tsx b/src/themes/AssistantTheme.tsx
index 0591d3ac80..c649dad222 100644
--- a/src/themes/AssistantTheme.tsx
+++ b/src/themes/AssistantTheme.tsx
@@ -102,6 +102,34 @@ export const AssistantTheme = (theme: Theme) => {
     opacity: 0.75;
   }
 
+  .feedbot-wrapper .wc-message-content {
+    border-radius: 16px !important;
+    padding: 10px 15px !important;
+  }
+
+  .feedbot-wrapper .wc-message-content p {
+    margin: 0;
+    padding: 0;
+  }
+
+  .feedbot-wrapper .wc-message-from-bot .wc-message-content {
+    background-color: #eee !important;
+  }
+
+  .feedbot-wrapper.dark-mode .wc-message-from-bot .wc-message-content {
+    background-color: #333 !important;
+    color: white !important;
+  }
+
+  .feedbot-wrapper .wc-message-from-me .wc-message-content {
+    background-color: ${theme.mainColor};
+    color: white;
+  }
+
+  svg.wc-message-callout {
+    display: none !important;
+  }
+
   .example-query:hover {
     opacity: 1;
   }
@@ -113,6 +141,7 @@ export const AssistantTheme = (theme: Theme) => {
     border-radius: 32px;
     width: 100%;
     height: 100%;
+    max-height: 130px;
     font-size: 16px;
     outline: none;
     resize: none;
@@ -125,10 +154,11 @@ export const AssistantTheme = (theme: Theme) => {
     border-color: ${secondaryColor};
   }
 
-  .card {
+  .card{
     width: 100%;
     max-width: 600px;
-    height: 60px;
+    height: 58px;
+    max-height: 130px;
     margin: 50px auto 65px auto;
     border-radius: 15px;
     position: relative;
@@ -140,7 +170,7 @@ export const AssistantTheme = (theme: Theme) => {
   inherits: false;
 }
 
-.card::after, .card::before {
+.card::after, .card::before{
   content: '';
   position: absolute;
   height: 100%;
@@ -203,6 +233,10 @@ export const AssistantTheme = (theme: Theme) => {
     color: white;
   }
 
+  .send-button svg {
+    margin-top: 2px;
+  }
+
   .send-button.active svg {
     fill: white;
     transition: fill 0.3s ease;
@@ -378,6 +412,7 @@ export const AssistantTheme = (theme: Theme) => {
 
   .feedbot-wrapper .wc-console {
     border-width: 0px;
+    display: block;
     height: 70px;
   }
 
@@ -400,20 +435,13 @@ export const AssistantTheme = (theme: Theme) => {
 
   .wc-console .wc-mic, .wc-console .wc-send {
     top: 10px !important;
+    right: 25px;
   }
 
   .wc-console input[type=text], .wc-console textarea {
     margin: 0px 15px;
   }
 
-  .wc-textbox {
-    border-radius: 13px;
-    background-color: #eceff1;
-    height: 70%;
-    margin-bottom: 0px;
-    top: 6px !important;
-  }
-
   .wc-suggested-actions .wc-hscroll > ul {
     text-align: center;
     margin-top: 10px;
@@ -502,4 +530,54 @@ export const AssistantTheme = (theme: Theme) => {
     margin: 15px auto;
   }
 }
-`}
\ No newline at end of file
+
+.wc-message-groups {
+  bottom: 120px;
+}
+
+.feedbot-wrapper .wc-console {
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  height: 100px;
+  background-color: transparent !important;
+}
+
+
+
+.wc-console .wc-textbox {
+  padding: 0 18px;
+    height: 100%;
+    border-radius: 28px;
+    position: static;
+    width: 100%;
+    display: block;
+}
+
+.wc-console .wc-textbox textarea {
+  padding: 15px;
+  border-radius: 12px;
+  margin: 0px;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.feedbot-wrapper.dark-mode .wc-console .wc-textbox textarea {
+  border : 1px solid #555;
+  background: #232323;
+  color: white;
+}
+@media (min-width: 1200px) {
+  .feedbot-wrapper .wc-console {
+    width: 1000px;
+    left: calc(50% - 500px);
+  }
+}
+
+.feedbot-wrapper.dark-mode a {
+  color: #67b0ffff !important;
+}
+`
+}