diff --git a/src/components/AddBar.jsx b/src/components/AddBar.jsx
index 363050d..fa355d7 100644
--- a/src/components/AddBar.jsx
+++ b/src/components/AddBar.jsx
@@ -1,69 +1,36 @@
 import React, { Component } from 'react';
 import List from './List';
 import { Navbar, Form, Button } from 'react-bootstrap'
-import { getState } from '../models/Prepare';
+// import { getState } from '../models/Prepare';
 
 class AddBar extends Component {
     constructor(props) {
         super(props)
         this.state = {
             chooseAll: false,
-            souraValue: this.props.currentSouraID,
-            ayaValue: null,
-            charValue: null,
-            charIndex: null,
-            systemValue: null,
         }
     }
 
 
-    componentWillReceiveProps(nextProps){
-        this.setState({
-            souraValue: nextProps.currentSouraID,
-            ayaValue: nextProps.ayaValue,
-            charValue: nextProps.charValue,
-            charIndex: nextProps.charIndex,
-            systemValue: nextProps.systemValue,
-        })
-    }
-
     onSouraChange = (value) => {
         let id = Number(value.split(':')[0].trim())
         this.setState({
             chooseAll: value.localeCompare('0 : ALl') === 0 ? true : false,
-            souraValue: id
         })
         this.props.onSouraChange(id)
     }
 
     onAyaChange = (value) => {
-        this.setState({ ayaValue: (value === 'All') ? 0 : Number(value) })
+        this.props.onAyaChange((value === 'All') ? 0 : Number(value))
     }
 
     onSystemChange = (value) => {
-        let id = Number(value.split(':')[0].trim())
-        this.setState({
-            systemValue: id,
-        })
-        this.props.onSystemChange(id)
+        this.props.onSystemChange(Number(value.split(':')[0].trim()))
     }
 
     onCharChange = (value) => {
         let [id, val] = value.split(':')
-        this.setState({ charValue: val.trim(), charIndex: Number(id.trim()) })
-    }
-
-    onAdd = () => {
-        // console.log(this.state)
-        this.props.onAdd(
-            getState(0,
-                (this.state.souraValue === 0) ? this.props.Quran : this.props.Soura,
-                this.state.souraValue,
-                this.state.ayaValue,
-                this.state.systemValue,
-                this.props.Quran.systems_info[this.state.systemValue],
-                this.state.charValue)
-        )
+        this.props.onCharChange(val.trim(), Number(id.trim()))
     }
 
     render() {
@@ -72,31 +39,31 @@ class AddBar extends Component {
                 <Navbar.Brand style={{ color: "#fff" }}> إضافه حرف</Navbar.Brand>
                 <Form inline>
                     <List title="السوره" options={this.props.Quran.swar_names}
-                        defaultIndex={this.state.souraValue}
+                        defaultIndex={this.props.data.souraID}
                         handler={this.onSouraChange}
                         disable={false}
                         withIndex={true} />
 
                     <List title="ألأيه"
-                        options={this.props.ayaList}
+                        options={this.props.data.ayaList}
                         withIndex={false}
                         handler={this.onAyaChange}
-                        defaultIndex={this.state.ayaValue}
+                        defaultIndex={this.props.data.ayaValue}
                         disable={this.state.chooseAll} />
 
                     <List title="نظام الاحرف" options={this.props.Quran.systems_info}
-                        defaultIndex={this.state.systemValue}
+                        defaultIndex={this.props.data.systemValue}
                         handler={this.onSystemChange}
                         withIndex={true}
                         disable={false} />
 
                     <List title="الحرف"
-                        options={this.props.charList}
+                        options={this.props.data.charList}
                         handler={this.onCharChange}
                         withIndex={true}
-                        defaultIndex={this.state.charIndex}
+                        defaultIndex={this.props.data.charIndex}
                         disable={false} />
-                    <Button className={"button button5"} variant="success" onClick={this.onAdd}>+</Button>
+                    <Button className={"button button5"} variant="success" onClick={this.props.onAdd}>+</Button>
                 </Form>
             </Navbar>
         );
diff --git a/src/components/AddCharBar.jsx b/src/components/AddCharBar.jsx
index 6a18b18..3a55562 100644
--- a/src/components/AddCharBar.jsx
+++ b/src/components/AddCharBar.jsx
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { getSouraInfo } from '../models/Prepare';
 import AddBar from './AddBar';
+import { getState } from '../models/Prepare';
 
 function getData(id, callback) {
     getSouraInfo(id)
@@ -10,11 +11,14 @@ function getData(id, callback) {
         .catch(err => err)
 }
 
-function getDataObject(soura, systemNum){
-    return ({Soura: soura,
-             ayaList: Object.keys(soura.ayat),
-             charList: Object.keys(soura.ayat[1].systems[systemNum].groups) 
-            })
+function getDataObject(soura, systemNum) {
+    return ({
+        Soura: soura,
+        ayaList: Object.keys(soura.ayat),
+        charList: Object.keys(soura.ayat[1].systems[systemNum].groups),
+        souraID: Number(soura.soura_num),
+        souraValue: soura.soura_name
+    })
 }
 
 
@@ -29,26 +33,56 @@ class AddCharBar extends Component {
             systemValue: 0,
             ayaValue: 1,
             charValue: '',
+            souraValue: '',
             charIndex: 0,
         }
     }
 
     onSouraChange = (id) => {
-        getData(id, (soura) => {
-            this.setState(getDataObject(soura, this.state.systemValue))
-        })
+        if (id === 0) {
+            this.setState({souraID: id})
+        }
+        else {
+            getData(id, (soura) => {
+                this.setState(getDataObject(soura, this.state.systemValue))
+            })
+        }
     }
 
     onSystemChange = (id) => {
         this.setState({
             systemValue: id,
+            charList: Object.keys(this.state.Soura.ayat[1].systems[id].groups)
         })
     }
 
+
+    onAyaChange = (id) => {
+        this.setState({ ayaValue: id })
+    }
+
+    onCharChange = (char, id) => {
+        this.setState({ charValue: char, charIndex: id })
+    }
+
+    onAdd = () => {
+        this.props.onAdd(
+            getState(0,
+                (this.state.souraID === 0) ? this.props.Quran : this.state.Soura,
+                 this.state.souraValue,
+                 this.state.ayaValue,
+                 this.state.systemValue,
+                 this.props.Quran.systems_info[this.state.systemValue],
+                 this.state.charValue)
+        )
+    }
+
+
     componentDidMount() {
         getData(this.state.souraID, (soura) => {
             let obj = getDataObject(soura, this.state.systemValue)
             obj.charValue = obj.charList[this.state.charIndex]
+            obj.souraValue = this.props.Quran.swar_names[this.state.souraID]
             this.setState(obj)
         });
     };
@@ -57,16 +91,12 @@ class AddCharBar extends Component {
         return (
             <AddBar currentSouraID={this.state.souraID}
                 Quran={this.props.Quran}
-                Soura={this.state.Soura}
-                charList={this.state.charList}
-                ayaList={this.state.ayaList}
-                ayaValue={this.state.ayaValue}
-                charValue={this.state.charValue}
-                systemValue={this.state.systemValue}
-                charIndex={this.state.charIndex}
+                data={this.state}
                 onSouraChange={this.onSouraChange}
-                onAdd={this.props.onAdd}
-                onSystemChange={this.props.onSystemChange} />
+                onAyaChange={this.onAyaChange}
+                onCharChange={this.onCharChange}
+                onAdd={this.onAdd}
+                onSystemChange={this.onSystemChange} />
         );
     }
 }
diff --git a/src/components/CharTable.jsx b/src/components/CharTable.jsx
index 6c6168e..1f36b70 100644
--- a/src/components/CharTable.jsx
+++ b/src/components/CharTable.jsx
@@ -120,7 +120,7 @@ class MuiVirtualizedTable extends React.PureComponent {
                 align="center"//{columns[columnIndex].numeric || false ? 'center' : 'center'}
             >{(label.startsWith('img:')) ?
                 <img className="taskeel-images"
-                    style={{ width: "28px", height: "48px", backgroundColor: "#343a40" }}
+                    style={{ width: "21px", height: "48px", backgroundColor: "#343a40" }}
                     alt=""
                     src={tashkeelVec[Number(label.split(":")[1]) - 1]} /> :
                 <span style={{ color: "#fff" }}> {label}</span>
diff --git a/src/models/Prepare.js b/src/models/Prepare.js
index cb9e265..a7ead69 100755
--- a/src/models/Prepare.js
+++ b/src/models/Prepare.js
@@ -147,7 +147,7 @@ export async function getSouraInfo(soura_num){
 
 
 export function getState(id, dataObj, soura_id, aya_num, system_id, system, char){
-    // console.log(id, dataObj, soura_id, aya_num, system_id, system, char)
+    console.log(id, dataObj, soura_id, aya_num, system_id, system, char)
     //check if All Quran
     if(soura_id === 0){
         return dataObj.getAllInfoForChar(id, system_id, char)