diff --git a/src/Redux/proxy.js b/src/Redux/proxy.js
index 848c53c..f5edec1 100644
--- a/src/Redux/proxy.js
+++ b/src/Redux/proxy.js
@@ -31,7 +31,7 @@ class Proxy {
         if (await this.refresh()) return this.result(url, (await fetch()).data.data);
         break;
       default:
-        toast(response.data.message);
+        toast.error(response.data.message);
     }
     return false;
   };
diff --git a/src/views/Auth/Auth.js b/src/views/Auth/Auth.js
index 124d1b9..e3e9c70 100644
--- a/src/views/Auth/Auth.js
+++ b/src/views/Auth/Auth.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-
+import {ToastContainer} from 'react-toastify';
 import Logo from './Logo/Logo';
 import Bio from './Bio/Bio';
 import Login from './Login/Login';
diff --git a/src/views/Auth/Login/Code/Code.js b/src/views/Auth/Login/Code/Code.js
index b7796e9..dd19579 100644
--- a/src/views/Auth/Login/Code/Code.js
+++ b/src/views/Auth/Login/Code/Code.js
@@ -6,10 +6,6 @@ export default class Code extends Component {
     super(props);
 
     this.state = {
-      auth_code1: '',
-      auth_code2: '',
-      auth_code3: '',
-      auth_code4: '',
       flag: false,
       resendStatus: false,
     };
@@ -23,19 +19,21 @@ export default class Code extends Component {
 
   changeValue = (e) => {
     if (e.target.value.match('^[0-9]{1}$')) {
-      this.setState({
-        [e.target.name]: e.target.value,
-      });
-      if (e.target.name === 'auth_code1') {
-        this.setState({ o1: e.target.value });
+      if (e.target.name === 'o1') {
+        if(typeof this.state.o1 === Number){
+          console.log(e.target.value);
+        }else{
+          this.setState({ o1 : e.target.value });
+        }
         this.inputRef2.focus();
-      } else if (e.target.name === 'auth_code2') {
+      } else if (e.target.name === 'o2') {
         this.setState({ o2: e.target.value });
         this.inputRef3.focus();
-      } else if (e.target.name === 'auth_code3') {
+      } else if (e.target.name === 'o3') {
         this.setState({ o3: e.target.value });
         this.inputRef4.focus();
-      } else if (e.target.name === 'auth_code4') {
+      } else if (e.target.name === 'o4') {
+        this.setState({ o4: e.target.value });
         const o4 = e.target.value;
         const { o1, o2, o3 } = this.state;
         this.props.parent.setState({ otp: `${o1}${o2}${o3}${o4}` });
@@ -51,15 +49,15 @@ export default class Code extends Component {
       this.setState({
         [e.target.name]: '',
       });
-      if (e.target.name === 'auth_code1') {
+      if (e.target.name === 'o1') {
         return;
-      } else if (e.target.name === 'auth_code2') {
+      } else if (e.target.name === 'o2') {
         this.inputRef1.focus();
         return;
-      } else if (e.target.name === 'auth_code3') {
+      } else if (e.target.name === 'o3') {
         this.inputRef2.focus();
         return;
-      } else if (e.target.name === 'auth_code4') {
+      } else if (e.target.name === 'o4') {
         this.inputRef3.focus();
         return;
       }
@@ -70,6 +68,17 @@ export default class Code extends Component {
     this.inputRef1.focus();
   }
 
+  onInput= (e) => {
+    e.target.value = e.target.value
+      .replace(/[\u0660-\u0669\u06f0-\u06f9]/g, function (c) {
+        return c.charCodeAt(0) & 0xf;
+      })
+      .replace(/[^\d]/, '')
+      .slice(-1);
+    
+    
+  }
+
   render() {
     return (
       <>
@@ -79,55 +88,63 @@ export default class Code extends Component {
         </div>
         <div className="login-code__bottom d-flex">
           <input
-            name="auth_code1"
-            type="number"
+            name="o1"
+            type="text"
             onChange={(e) => this.changeValue(e)}
-            maxLength="1"
+            maxLength="2"
+            inputMode="numeric"
             ref={(input) => {
               this.inputRef1 = input;
             }}
             autoComplete="false"
-            value={this.state.auth_code1}
+            value={this.state.o1}
             onKeyDown={(e) => this.keyboardEvent(e)}
+            onInput={this.onInput}
           />
           <input
-            name="auth_code2"
-            type="number"
+            name="o2"
+            type="text"
             onChange={(e) => this.changeValue(e)}
-            maxLength="1"
+            maxLength="2"
+            inputMode="numeric"
             ref={(input) => {
               this.inputRef2 = input;
             }}
             autoComplete="false"
-            value={this.state.auth_code2}
+            value={this.state.o2}
             onKeyDown={(e) => this.keyboardEvent(e)}
+            onInput={this.onInput}
           />
           <input
-            name="auth_code3"
-            type="number"
+            name="o3"
+            type="text"
             onChange={(e) => this.changeValue(e)}
-            maxLength="1"
+            maxLength="2"
+            inputMode="numeric"
             ref={(input) => {
               this.inputRef3 = input;
             }}
             autoComplete="false"
-            value={this.state.auth_code3}
+            value={this.state.o3}
             onKeyDown={(e) => this.keyboardEvent(e)}
+            onInput={this.onInput}
           />
           <input
-            name="auth_code4"
-            type="number"
+            name="o4"
+            type="text"
             onChange={(e) => this.changeValue(e)}
-            maxLength="1"
+            maxLength="2"
+            inputMode="numeric"
             ref={(input) => {
               this.inputRef4 = input;
             }}
             autoComplete="false"
-            value={this.state.auth_code4}
+            value={this.state.o4}
             onKeyDown={(e) => this.keyboardEvent(e)}
+            onInput={this.onInput}
           />
           {!this.state.resendStatus ? (
-            <Timer seconds={119} parent={this} />
+            <Timer seconds={5} parent={this} />
           ) : (
             <span
               style={{ top: 150, color: 'blue', textDecoration: 'underline' }}
diff --git a/src/views/Auth/Login/Login.js b/src/views/Auth/Login/Login.js
index ca73f60..8be6db4 100644
--- a/src/views/Auth/Login/Login.js
+++ b/src/views/Auth/Login/Login.js
@@ -15,6 +15,11 @@ class Login extends Component {
   }
   async componentDidUpdate() {
     const { cellphone, otp, section } = this.state;
+    // if(cellphone.length === 9 && !otp){
+    //   this.setState({section: 1});
+    //   this.props.otp({cellphone});
+      
+    // }
     if (cellphone && !otp) this.props.otp({ cellphone });
     if (section && cellphone && otp) this.props.login({ cellphone, otp });
   }
diff --git a/src/views/Auth/Login/Mobile/Mobile.js b/src/views/Auth/Login/Mobile/Mobile.js
index f4eb30f..ffa2009 100644
--- a/src/views/Auth/Login/Mobile/Mobile.js
+++ b/src/views/Auth/Login/Mobile/Mobile.js
@@ -3,6 +3,7 @@ import phonenumber from '../../../../assets/icons/phonenumber.png';
 
 export default class Mobile extends Component {
   render() {
+   
     return (
       <>
         <div className="login-mobile__top d-flex">
@@ -11,20 +12,24 @@ export default class Mobile extends Component {
           <img src={phonenumber} alt="" />
         </div>
         <div className="login-mobile__input d-flex">
-          <input
-            type="text"
-            maxLength={9}
-            inputMode="numeric"
-            onChange={(e) => this.setState({ cellphone: e.target.value })}
-            onInput={(e) =>
-              (e.target.value = e.target.value
-                .replace(/[\u0660-\u0669\u06f0-\u06f9]/g, function (c) {
-                  return c.charCodeAt(0) & 0xf;
-                })
-                .replace(/[^\d]/, ''))
-            }
-          />
-          <div>09</div>
+          <form onSubmit={() => this.props.parent.setState({ section: 1, cellphone: '09' + this.state.cellphone })} >
+            <input
+              type="text"
+              maxLength={9}
+              inputMode="numeric"
+              onChange={(e) => this.setState({ cellphone: e.target.value })}
+              onInput={(e) =>
+                (e.target.value = e.target.value
+                  .replace(/[\u0660-\u0669\u06f0-\u06f9]/g, function (c) {
+                    return c.charCodeAt(0) & 0xf;
+                  })
+                  .replace(/[^\d]/, ''))
+              }
+              // onAction={}
+            />
+       
+            <div>09</div>  
+          </form>
         </div>
         <button
           onClick={() =>
diff --git a/src/views/ChatRoom/Body/Body.js b/src/views/ChatRoom/Body/Body.js
index a586dcd..4f66640 100644
--- a/src/views/ChatRoom/Body/Body.js
+++ b/src/views/ChatRoom/Body/Body.js
@@ -5,7 +5,7 @@ import ChatSuggest from './ChatSuggest/ChatSuggest';
 import { RecordState } from 'audio-react-recorder';
 import ReactPlayer from 'react-player';
 import ReactAudioPlayer from 'react-audio-player';
-
+import { ToastContainer } from 'react-toastify';
 import photo from '../../../assets/images/reza.png';
 import photo1 from '../../../assets/images/user2.png';
 import './Body.scss';
@@ -419,6 +419,17 @@ class Body extends Component {
           ) : null}
           {this.state.footer === 'suggest' ? <ChatSuggest suggest={this.state.suggest} /> : null}
         </div>
+        <ToastContainer
+          position="bottom-right"
+          autoClose={1500}
+          hideProgressBar={true}
+          newestOnTop={true}
+          closeOnClick
+          rtl={true}
+          pauseOnFocusLoss
+          draggable
+          pauseOnHover
+        />
       </div>
     );
   }
diff --git a/src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.scss b/src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.scss
index d30b707..11de6d7 100644
--- a/src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.scss
+++ b/src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.scss
@@ -6,16 +6,20 @@
     // height : 40px;
     padding: 2px 0px 0px;
     align-items: flex-end;
-    &__item {
-      padding: 8px 6px;
-      background-color: white;
-      border-radius: 5px;
-      margin: 5px;
-      width: 100% !important;
-      justify-content: center;
-      color: black;
-      min-height: 60px;
+    &__row{
+      width: 100%;
+      &--item {
+        padding: 8px 6px;
+        background-color: white;
+        border-radius: 5px;
+        margin: 5px;
+        width: 100% !important;
+        justify-content: center;
+        color: black;
+        min-height: 60px;
+      }
     }
+    
   }
 }
 
diff --git a/src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js b/src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js
index acc4095..24408be 100644
--- a/src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js
+++ b/src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js
@@ -3,15 +3,19 @@ import { SortableContainer, SortableElement } from 'react-sortable-hoc';
 import arrayMove from 'array-move';
 import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
 
-const SortableItem = SortableElement(({ value }) => (
-  <div className="message-2d__options--draggable d-flex">{value}</div>
+const SortableItem = SortableElement(({ row }) => (
+  <div className="message-2d__options--row d-flex">
+    {row.map((item) => (
+      <div>{item.text}</div>
+    ))}
+  </div>
 ));
 
 const SortableList = SortableContainer(({ items }) => {
   return (
     <div className="message-2d__options d-flex flex-column">
-      {items.map((value, index) => (
-        <SortableItem key={`item-${value}`} index={index} value={value} />
+      {items.map((row, index) => (
+        <SortableItem key={`item-${index}`} index={index} value={row} />
       ))}
     </div>
   );
diff --git a/src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js b/src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js
index cdca83d..f38745d 100644
--- a/src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js
+++ b/src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js
@@ -38,19 +38,8 @@ export default class RadioMessage extends Component {
           ) : null}
         </div>
         <div className="message-2d__options d-flex flex-wrap justify-content-center">
-          {message.options.map((item, i) => (
-            <div
-              key={i}
-              onClick={() => this.handleRadioChange(item.name)}
-              className="message-2d__options--radio"
-              style={{
-                backgroundColor:
-                  item.name === this.state.value ? '#0000cc' : 'rgba(153, 153, 153, 0.87)',
-                color: item.name === this.state.value ? 'white' : 'black',
-              }}
-            >
-              {item.name}
-            </div>
+          {message.options.map((row, i) => (
+            <Row row={row} key={i} />
           ))}
         </div>
         <button className="message-2d__submit">
@@ -61,3 +50,25 @@ export default class RadioMessage extends Component {
     );
   }
 }
+
+const Row = (row) => {
+  return (
+    <div
+      key={i}
+      onClick={() => this.handleRadioChange(item.name)}
+      className="message-2d__options--row d-flex"
+      style={{
+        backgroundColor: item.name === this.state.value ? '#0000cc' : 'rgba(153, 153, 153, 0.87)',
+        color: item.name === this.state.value ? 'white' : 'black',
+      }}
+    >
+      {row.map((item) => (
+        <Item item={item} />
+      ))}
+    </div>
+  );
+};
+
+const Item = (item) => {
+  return <div>{item.name}</div>;
+};