diff --git a/package.json b/package.json
index 36c8a7d..c45f682 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "react-draggable": "^4.4.3",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
+    "react-table-v6": "^6.8.6",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.0",
     "web-vitals": "^0.2.4"
   },
diff --git a/src/App.js b/src/App.js
index efb2657..e10ab89 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,7 +6,6 @@ import ChartPlane from './components/ChartPlane'
 import { read_csv } from 'danfojs/src/io/reader'
 
 function App() {
-  const [file, setFile ] = useState()
   const [dataComp, setDataComp] = useState([])
   const [showSidePlane, setSidePlane] = useState(false)
   const [compIndex, setCompIndex] = useState()
@@ -14,36 +13,34 @@ function App() {
   const [dfOpsType, setDfOpsType] = useState()
   const [chartComp, setChartComp] = useState([])
 
-  const changeHandler = function(event) {
-      const content = event.target.files[0]
-      const url = URL.createObjectURL(content)
-      
-      //"http://localhost:3000/exs.csv"
-      read_csv(url, {start: 0, end: 20}).then(df => {
-          const columns = df.columns
-          const values = df.values
-          setDataComp(prev => {
-            let new_data = prev.slice()
-            let key = new_data.length +1
-            let dict = {
-              columns: columns,
-              values: values,
-              df: df,
-              keys: "df" + key
-            }
-            new_data.push(dict)
-            return new_data
-          })
-        setFile(true);
+  const changeHandler = function (event) {
+    const content = event.target.files[0]
+    const url = URL.createObjectURL(content)
+
+    read_csv(url).then(df => {
+      const columns = df.columns
+      const values = df.values
+      setDataComp(prev => {
+        let new_data = prev.slice()
+        let key = new_data.length + 1
+        let dict = {
+          columns: columns,
+          values: values,
+          df: df,
+          keys: "df" + key
+        }
+        new_data.push(dict)
+        return new_data
+      })
 
 
-      }).catch((error) => {
-            console.log(error)
-          })
+    }).catch((error) => {
+      console.log(error)
+    })
   }
 
   const charts = ["BarChart", "LineChart", "PieChart"]
-  const dataFrameOps = ["Arithemtic","Describe", "Df2df", "Query"]
+  const dataFrameOps = ["Arithemtic", "Describe", "Df2df", "Query"]
 
   const handleChart = (e) => {
     const value = e.target.innerHTML
@@ -52,14 +49,14 @@ function App() {
     setSidePlane("chart")
   }
 
-  const handleDfops = (e) =>{
+  const handleDfops = (e) => {
     const value = e.target.value
-    
+
     setDfOpsType(value)
     setSidePlane("datatable")
-    
+
   }
-  let classes=file?"bg-blue-500 p-2 text-white rounded-sm mr-2":"bg-gray-200 p-2 text-white rounded-sm mr-2"
+  let classes = dataComp.length > 0 ? "bg-blue-500 p-2 text-white rounded-sm mr-2" : "bg-gray-200 p-2 text-white rounded-sm mr-2"
   return (
     <div className="max-w-full mx-auto border-2 mt-10">
       <div className="flex flex-col">
@@ -67,14 +64,14 @@ function App() {
           <input type="file" name="file" onChange={changeHandler} />
           <div className="mr-4">
             {
-              
-              charts.map((chart, i)=>{
-                return <button disabled={file?false:true}
-                          className={classes}
-                          onClick={handleChart}
-                      >
-                        {chart}
-                      </button>
+
+              charts.map((chart, i) => {
+                return <button disabled={dataComp.length > 0 ? false : true}
+                  className={classes}
+                  onClick={handleChart}
+                >
+                  {chart}
+                </button>
               })
             }
           </div>
@@ -83,8 +80,8 @@ function App() {
             <select className="border" onChange={handleDfops}>
               <option value="None" >None</option>
               {
-                dataFrameOps.map((dfops, i)=>{
-                    return <option value={dfops} key={i}>{dfops}</option>
+                dataFrameOps.map((dfops, i) => {
+                  return <option value={dfops} key={i}>{dfops}</option>
                 })
               }
             </select>
@@ -94,53 +91,53 @@ function App() {
         <div className="flex flex-row justify-between border-2">
           <div className="border-2 w-full">
             <div>
-              { file && 
-                <DataTables 
-                    datacomp={dataComp} 
-                    setSidePlane={setSidePlane}
-                    setCompIndex={setCompIndex}
-                    setDataComp={setDataComp}
-                /> 
+              {(dataComp.length > 0) &&
+                <DataTables
+                  datacomp={dataComp}
+                  setSidePlane={setSidePlane}
+                  setCompIndex={setCompIndex}
+                  setDataComp={setDataComp}
+                />
               }
-              
-              { (chartComp.length > 0) && 
+
+              {(chartComp.length > 0) &&
                 <ChartsViz
-                    chartComp={chartComp}
-                    setChartComp={setChartComp}
-                /> 
+                  chartComp={chartComp}
+                  setChartComp={setChartComp}
+                />
               }
             </div>
-            
+
           </div>
-          {showSidePlane 
-            && 
+          {showSidePlane
+            &&
             (
-              showSidePlane === "datatable" ? 
-              <div className="border-2 w-1/3">
-                <SidePlane
-                  dataComp={dataComp[compIndex]} 
-                  dataComps={dataComp}
-                  df_index={compIndex}
-                  setDataComp={setDataComp}
-                  dfOpsType={dfOpsType}
-                />
-            </div> :
-            <div className="border-2 w-1/3">
-              <ChartPlane
-                  dataComp={dataComp[compIndex]}
-                  setChartComp={setChartComp}
-                  chartType={chartType}
-              />
-            </div>
+              showSidePlane === "datatable" ?
+                <div className="border-2 w-1/3">
+                  <SidePlane
+                    dataComp={dataComp[compIndex]}
+                    dataComps={dataComp}
+                    df_index={compIndex}
+                    setDataComp={setDataComp}
+                    dfOpsType={dfOpsType}
+                  />
+                </div> :
+                <div className="border-2 w-1/3">
+                  <ChartPlane
+                    dataComp={dataComp[compIndex]}
+                    setChartComp={setChartComp}
+                    chartType={chartType}
+                  />
+                </div>
 
             )
-            
-            
+
+
           }
         </div>
       </div>
 
-      
+
     </div>
   )
 }
diff --git a/src/App2.js b/src/App2.js
new file mode 100644
index 0000000..1b01133
--- /dev/null
+++ b/src/App2.js
@@ -0,0 +1,141 @@
+import React, { useState } from 'react';
+import { read_csv } from 'danfojs/src/io/reader'
+import DataTables from './components/DataTables';
+import { SidePlane } from './components/SidePlanes'
+import ChartsViz from './components/ChartsViz'
+import ChartPlane from './components/ChartPlane'
+
+function App2() {
+  const [file, setFile] = useState()
+  const [dataComp, setDataComp] = useState([])
+  const [compIndex, setCompIndex] = useState()
+  const [dfOpsType, setDfOpsType] = useState()
+  const [showSidePlane, setSidePlane] = useState(false)
+  const [chartType, setChartType] = useState()
+  const [chartComp, setChartComp] = useState([])
+
+  const changeHandler = function (event) {
+    const content = event.target.files[0]
+    const url = URL.createObjectURL(content)
+
+    read_csv(url).then(df => {
+      const columns = df.columns
+      const values = df.values
+      setDataComp(prev => {
+        let new_data = prev.slice()
+        let key = new_data.length + 1
+        let dict = {
+          columns: columns,
+          values: values,
+          df: df,
+          keys: "df" + key
+        }
+        new_data.push(dict)
+        return new_data
+      })
+      setFile(true);
+
+
+    }).catch((error) => {
+      console.log(error)
+    })
+  }
+  const charts = ["BarChart", "LineChart", "PieChart"]
+  const dataFrameOps = ["Arithemtic", "Describe", "Df2df", "Query"]
+
+  const handleChart = (e) => {
+    const value = e.target.innerHTML
+
+    setChartType(value)
+    setSidePlane("chart")
+  }
+
+  const handleDfops = (e) => {
+    const value = e.target.value
+
+    setDfOpsType(value)
+    setSidePlane("datatable")
+
+  }
+  let classes = dataComp.length > 0 ? "bg-blue-500 p-2 text-white rounded-sm mr-2" : "bg-gray-200 p-2 text-white rounded-sm mr-2"
+  return (
+
+    <div className="max-w-full mx-auto border-2 mt-10">
+      <div className="flex flex-col">
+        <div className="border-2 mb-10 flex flex-row">
+          {/* step 1 */}
+          <input type="file" name="file" onChange={changeHandler} />
+          <div className="mr-4">
+            {
+
+              charts.map((chart, i) => {
+                return <button disabled={dataComp.length > 0 ? false : true}
+                  className={classes}
+                  onClick={handleChart}
+                >
+                  {chart}
+                </button>
+              })
+            }
+          </div>
+          <div>
+            <span className="mr-2">DataFrame Operations</span>
+            <select className="border" onChange={handleDfops}>
+              <option value="None" >None</option>
+              {
+                dataFrameOps.map((dfops, i) => {
+                  return <option value={dfops} key={i}>{dfops}</option>
+                })
+              }
+            </select>
+          </div>
+        </div>
+        <div className="flex flex-row justify-between border-2">
+          <div className="border-2 w-full">
+            <div>
+
+              {(dataComp.length > 0) &&
+                <DataTables
+                  datacomp={dataComp}
+                  setCompIndex={setCompIndex}
+                />
+              }
+              {(chartComp.length > 0) &&
+                <ChartsViz
+                  chartComp={chartComp}
+                  setChartComp={setChartComp}
+                />
+              }
+            </div>
+          </div>
+          <div className="border-2 w-1/3">
+
+            {showSidePlane
+              &&
+              (
+                showSidePlane === "datatable" ?
+                  <div className="w-1/3">
+                    <SidePlane
+                      dataComp={dataComp[compIndex]}
+                      dataComps={dataComp}
+                      df_index={compIndex}
+                      setDataComp={setDataComp}
+                      dfOpsType={dfOpsType}
+                    />
+                  </div> :
+                  <div className="border-2 w-1/3">
+                    <ChartPlane
+                      dataComp={dataComp[compIndex]}
+                      setChartComp={setChartComp}
+                      chartType={chartType}
+                    />
+                  </div>
+              )
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+export default App2
\ No newline at end of file
diff --git a/src/components/Chart.js b/src/components/Chart.js
index e2891b4..1cc4553 100644
--- a/src/components/Chart.js
+++ b/src/components/Chart.js
@@ -1,16 +1,15 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
 import { Bar as BarChart } from 'react-chartjs-2';
 import { Line as LineChart } from "react-chartjs-2";
-import { Pie as PieChart} from "react-chartjs-2";
+import { Pie as PieChart } from "react-chartjs-2";
 import Draggable from 'react-draggable';
 
-export default function Chart({labels, dataset,type,del,remover}) {
+export default function Chart({ labels, dataset, type, del, remover }) {
   //let type= "BarChart";
   console.log(del)
   let data = {
     labels: labels,
     datasets: [{
-      label: "My First dataset",
       backgroundColor: [
         'rgba(255, 99, 132, 0.2)',
         'rgba(54, 162, 235, 0.2)',
@@ -27,7 +26,7 @@ export default function Chart({labels, dataset,type,del,remover}) {
         'rgba(153, 102, 255, 1)',
         'rgba(255, 159, 64, 1)'
       ],
-      borderWidth:1,
+      borderWidth: 1,
       data: dataset,
     }]
   };
@@ -41,48 +40,48 @@ export default function Chart({labels, dataset,type,del,remover}) {
       }]
     }
   }
-  if(type==="BarChart"){
-    return(
+  if (type === "BarChart") {
+    return (
       <Draggable>
         <div className="max-w-md">
-        <button onClick={()=> remover(del)} className="bg-red-700 text-white rounded-sm p-2">X</button>
-         <BarChart data={data} options={options} width="100" height="100" />
-      </div>
+          {/* <button onClick={() => remover(del)} className="bg-red-700 text-white rounded-sm p-2">X</button> */}
+          <BarChart data={data} options={options} width="100" height="100" />
+        </div>
       </Draggable>
-      
+
     )
   }
-  else if(type==="LineChart"){
-    return(
+  else if (type === "LineChart") {
+    return (
       <Draggable>
         <div className="max-w-md">
-        <button onClick={()=> remover(del)} className="bg-red-700 text-white rounded-sm p-2">X</button>
-        <LineChart data={data} options={options} width="100" height="100"/>
-       
-      </div>
+          {/* <button onClick={() => remover(del)} className="bg-red-700 text-white rounded-sm p-2">X</button> */}
+          <LineChart data={data} options={options} width="100" height="100" />
+
+        </div>
       </Draggable>
-      
+
     )
   }
-  
-  else if(type==="PieChart"){
-    return(
+
+  else if (type === "PieChart") {
+    return (
       <Draggable>
         <div className="max-w-md">
-        <button onClick={()=> remover(del)} className="bg-red-700 text-white rounded-sm p-2">X</button>
+          {/* <button onClick={() => remover(del)} className="bg-red-700 text-white rounded-sm p-2">X</button> */}
           <PieChart data={data} options={options} width="100" height="100" />
-       
+
         </div>
       </Draggable>
-      
+
     )
   }
-  return(
-     <>
-     <div>
+  return (
+    <>
+      <div>
         <h1>NO Chart </h1>
       </div>
-      
-     </>
-     )
+
+    </>
+  )
 }
diff --git a/src/components/ChartPlane.js b/src/components/ChartPlane.js
index c55b7ec..e3593cd 100644
--- a/src/components/ChartPlane.js
+++ b/src/components/ChartPlane.js
@@ -1,58 +1,43 @@
 import React, { useRef } from 'react'
 
-export default function ChartPlane({setChartComp, dataComp, chartType}) {
+export default function ChartPlane({ setChartComp, dataComp, chartType }) {
 
   const df = dataComp.df
 
   const compCols = dataComp.columns
   let x;
   let y;
-  if( compCols[0] === "index") {
+  if (compCols[0] === "index") {
     x = compCols
     console.log(dataComp.values[0])
     //sanity check
-    y = dataComp.values[0].map((val, index)=> {
-        if(typeof val != "string") {
-          return compCols[index]
-        }
+    y = dataComp.values[0].map((val, index) => {
+      if (typeof val != "string") {
+        return compCols[index]
+      }
     })
   } else {
     x = df.columns
     const dtypes = df.dtypes
-    y = dtypes.map((val, i)=>{
-        if(val != "string") {
-          return x[i]
-        }
+    y = dtypes.map((val, i) => {
+      if (val != "string") {
+        return x[i]
+      }
     })
   }
-  
+
 
   const xRef = useRef()
   const yRef = useRef()
 
-  const handleChart = () =>{
+  const handleChart = () => {
     const xVal = xRef.current.value
     const yVal = yRef.current.value
 
-    let labels
-    let data
-    if( compCols[0] != "index") {
-      labels = df[xVal].values
-      data = df[yVal].values
-    }
-    else {
-      const xIndex = compCols.indexOf(xVal)
-      const yIndex = compCols.indexOf(yVal)
+    const labels = xVal === "index" ? df.index : df[xVal].values
+    const data = yVal === "index" ? df.index : df[yVal].values
 
-      labels = dataComp.values.map((val)=>{
-        return val[xIndex]
-      })
-      data = dataComp.values.map((val)=>{
-        return val[yIndex]
-      })
-    }
-    
-    setChartComp((prev)=>{
+    setChartComp((prev) => {
       const newChart = prev.slice()
       const key = newChart.length + 1
       const dict = {
@@ -73,7 +58,7 @@ export default function ChartPlane({setChartComp, dataComp, chartType}) {
           <span className="mr-2">x: </span>
           <select ref={xRef} className="border">
             {
-              x.map((val, index)=> {
+              x.map((val, index) => {
                 return <option value={val} key={index} >{val}</option>
               })
             }
@@ -90,7 +75,7 @@ export default function ChartPlane({setChartComp, dataComp, chartType}) {
           </select>
         </div>
       </form>
-      <button onClick={()=>handleChart()} className="bg-blue-500 p-2 text-white rounded-sm">generate Chart</button>
+      <button onClick={() => handleChart()} className="bg-blue-500 p-2 text-white rounded-sm">generate Chart</button>
     </div>
   )
 }
diff --git a/src/components/DataTable.js b/src/components/DataTable.js
index c09e876..602e07b 100644
--- a/src/components/DataTable.js
+++ b/src/components/DataTable.js
@@ -3,10 +3,11 @@ import ReactTable from 'react-table-v6'
 import Draggable from 'react-draggable';
 import 'react-table-v6/react-table.css'
 
-function DataTable({ columns, values, setCompIndex, index, setSidePlane,remover,keys }) {
+function DataTable({ columns, values, setCompIndex, index, setSidePlane, remover, keys }) {
 
   const dataColumns = columns.map((val, index) => {
-    return { Header: val, 
+    return {
+      Header: val,
       accessor: val,
       Cell: (props) => (
         <div className={val || ''}>
@@ -20,24 +21,24 @@ function DataTable({ columns, values, setCompIndex, index, setSidePlane,remover,
     }
   });
 
-  const data = values.map(val =>{
+  const data = values.map(val => {
     let rows_data = {}
-    
+
     val.forEach((val2, index) => {
       let col = columns[index];
       rows_data[col] = val2;
     })
     return rows_data;
   })
-  
-  const handleSidePlane = ()=>{
+
+  const handleSidePlane = () => {
     setCompIndex(index)
     // setSidePlane(true)
   }
   return (
     <Draggable >
-        <div className="w-1/2" onClick={()=> handleSidePlane()}>
-        <button onClick={()=> remover(keys)} className="bg-red-700 text-white rounded-sm p-2">X</button>
+      <div className="w-1/2" onClick={() => handleSidePlane()}>
+        {/* <button onClick={()=> remover(keys)} className="bg-red-700 text-white rounded-sm p-2">X</button> */}
         <ReactTable
           data={data}
           columns={dataColumns}
@@ -50,11 +51,11 @@ function DataTable({ columns, values, setCompIndex, index, setSidePlane,remover,
           showPageSizeOptions={true}
           minRows={10}
         />
-    </div>
+      </div>
     </Draggable>
   )
-    
-    
+
+
 }
 
 export default DataTable
diff --git a/src/components/DataTables.js b/src/components/DataTables.js
index 5de25f1..d74c222 100644
--- a/src/components/DataTables.js
+++ b/src/components/DataTables.js
@@ -1,28 +1,27 @@
 import React from 'react'
 import DataTable from './DataTable'
 
-export default function DataTables({datacomp, setCompIndex, setSidePlane,setDataComp}) {
+export default function DataTables({ datacomp, setCompIndex, setSidePlane, setDataComp }) {
   const remover = (keys) => {
-    setDataComp(datacomp.filter((el) => el.keys !==keys));
+    setDataComp(datacomp.filter((el) => el.keys !== keys));
   }
   return (
     <div>
-      {datacomp.map((val,index) => {
-        return( 
-                <>
-                {/* <button onClick={()=> remover(val.keys)} className="bg-red-700 text-white rounded-sm p-2">Delete</button> */}
-                <DataTable 
-                  key={index} 
-                  columns={val.columns} 
-                  values={val.values} 
-                  setCompIndex={setCompIndex}
-                  index={index}
-                  setSidePlane={setSidePlane}
-                  remover={remover}
-                  keys={val.keys}
-                />
-                </>
-                )
+      {datacomp.map((val, index) => {
+        return (
+          <>
+            <DataTable
+              key={index}
+              columns={val.columns}
+              values={val.values}
+              setCompIndex={setCompIndex}
+              index={index}
+              setSidePlane={setSidePlane}
+              remover={remover}
+              keys={val.keys}
+            />
+          </>
+        )
       })}
     </div>
   )
diff --git a/src/components/SidePlanes/Arithemtic.js b/src/components/SidePlanes/Arithemtic.js
index b968e94..5610f47 100644
--- a/src/components/SidePlanes/Arithemtic.js
+++ b/src/components/SidePlanes/Arithemtic.js
@@ -1,11 +1,11 @@
 import React, { useRef } from 'react'
 
-export default function Arithemtic({ dataComp, setDataComp}) {
+export default function Arithemtic({ dataComp, setDataComp }) {
 
   const seriesOps = ["median", "min", "max", "std", "var", "count", "sum"]
   const dfOps = ["cumsum", "cummax", "cumprod", "cummin"]
   const all = ["median", "min", "max", "std", "var", "count", "sum",
-               "cumsum", "cummax", "cumprod", "cummin"]
+    "cumsum", "cummax", "cumprod", "cummin"]
 
   const axisRef = useRef()
   const opsRef = useRef()
@@ -15,17 +15,17 @@ export default function Arithemtic({ dataComp, setDataComp}) {
     let sOps = opsRef.current.value
     let axis = axisRef.current.value
     // let df;
-    if( seriesOps.includes(sOps)) {
+    if (seriesOps.includes(sOps)) {
       let df_comp = dataComp.df
       let df = eval(`df_comp.${sOps}(axis=${axis})`)
-      
+
       let columns = Array.isArray(df.columns) ? df.columns.slice() : [df.columns]
-      columns.splice(0,0, "index")
-      let values = df.values.map((val,index) => {
+      columns.splice(0, 0, "index")
+      let values = df.values.map((val, index) => {
 
         return [df.index[index], val]
       })
-      
+
       setDataComp(prev => {
         let new_data = prev.slice()
         let dict = {
@@ -72,14 +72,14 @@ export default function Arithemtic({ dataComp, setDataComp}) {
           <span>axis</span>
           <select ref={axisRef} className="border">
             {
-              [0,1].map((val, index) => {
+              [0, 1].map((val, index) => {
                 return <option value={val} key={index}>{val}</option>
               })
             }
           </select>
         </div>
       </form>
-      <button onClick={()=>arithemtic()} className="btn btn-default dq-btn-add">Submit</button>
+      <button onClick={() => arithemtic()} className="bg-blue-700 text-white rounded-sm p-2">Submit</button>
     </div>
   )
 }
diff --git a/src/components/SidePlanes/Describe.js b/src/components/SidePlanes/Describe.js
index 7131e51..e430799 100644
--- a/src/components/SidePlanes/Describe.js
+++ b/src/components/SidePlanes/Describe.js
@@ -1,19 +1,18 @@
 import React from 'react'
-import { DataFrame } from 'danfojs/src/core/frame'
-export default function Describe({ dataComp, setDataComp}) {
+export default function Describe({ dataComp, setDataComp }) {
+
+  const describe = () => {
 
-  const describe = ()=> {
-    
     const df = dataComp.df.describe()
     let column = df.columns.slice()
-    column.splice(0,0, "index")
+    column.splice(0, 0, "index")
     const values = df.values
     const indexes = df.index
 
-    const new_values = values.map((val, index)=> {
+    const new_values = values.map((val, index) => {
       let new_val = val.slice()
-      new_val.splice(0,0, indexes[index])
-       return new_val
+      new_val.splice(0, 0, indexes[index])
+      return new_val
     })
 
     setDataComp(prev => {
@@ -29,7 +28,8 @@ export default function Describe({ dataComp, setDataComp}) {
   }
   return (
     <div>
-      <button onClick={()=> describe()} className="bg-blue-700 text-white rounded-sm p-2">Describe</button>
+      {/* step 1 */}
+      <button onClick={() => describe()} className="bg-blue-700 text-white rounded-sm p-2">Describe</button>
     </div>
   )
 }
diff --git a/src/components/SidePlanes/Df2df.js b/src/components/SidePlanes/Df2df.js
index 70ddf7f..cddb58c 100644
--- a/src/components/SidePlanes/Df2df.js
+++ b/src/components/SidePlanes/Df2df.js
@@ -1,7 +1,7 @@
 import React, { useRef } from 'react'
 import { concat } from 'danfojs/src/core/concat'
 
-export default function Df2df({dataComp, dataComps,df_index, setDataComp}) {
+export default function Df2df({ dataComp, dataComps, df_index, setDataComp }) {
 
   const dfRef = useRef()
   const inpRef = useRef()
@@ -22,8 +22,8 @@ export default function Df2df({dataComp, dataComps,df_index, setDataComp}) {
     let axis = parseInt(axisRef.current.value)
     let ops = opsRef.current.value
 
-    
-    if( ops != "concat") {
+
+    if (ops != "concat") {
       let value = dfIndex === "None" ? inp : dataComps[dfIndex].df
       let df = dataComp.df
 
@@ -31,7 +31,7 @@ export default function Df2df({dataComp, dataComps,df_index, setDataComp}) {
 
       setDataComp(prev => {
         let new_data = prev.slice()
-        let key = new_data.length +1
+        let key = new_data.length + 1
         let dict = {
           columns: rslt.columns,
           values: rslt.values,
@@ -46,20 +46,21 @@ export default function Df2df({dataComp, dataComps,df_index, setDataComp}) {
       let df2 = dataComps[dfIndex].df
       let df1 = dataComp.df
       let df_concat = concat
-      let rslt = eval(`df_concat({df_list: [df1,df2], axis: axis})`)
+      // let rslt = eval(`df_concat({df_list: [df1,df2], axis: axis})`)
+      let rslt = concat({ df_list: [df1, df2], axis: axis })
 
       let column = rslt.columns.slice()
-      column.splice(0,0,"index")
+      column.splice(0, 0, "index")
 
       let rsltValues = rslt.values.map((val, index) => {
         let newVal = val.slice()
-        newVal.splice(0,0, rslt.index[index])
+        newVal.splice(0, 0, rslt.index[index])
         return newVal
       })
 
       setDataComp(prev => {
         let new_data = prev.slice()
-        let key = new_data.length +1
+        let key = new_data.length + 1
         let dict = {
           columns: column,
           values: rsltValues,
@@ -70,12 +71,12 @@ export default function Df2df({dataComp, dataComps,df_index, setDataComp}) {
         return new_data
       })
 
-      
+
     }
-    
 
-    
-    
+
+
+
   }
   return (
     <div>
@@ -84,7 +85,7 @@ export default function Df2df({dataComp, dataComps,df_index, setDataComp}) {
           <span className="mr-2"> Operations</span>
           <select ref={opsRef}>
             {
-              allOps.map((val,index) => {
+              allOps.map((val, index) => {
                 return <option value={val} key={index}>{val}</option>
               })
             }
@@ -95,18 +96,18 @@ export default function Df2df({dataComp, dataComps,df_index, setDataComp}) {
           <select ref={dfRef}>
             <option key={-1}>None</option>
             {
-              dataComps.map((val,index) => {
-                if( df_index != index) {
+              dataComps.map((val, index) => {
+                if (df_index != index) {
                   return <option value={index} key={index}>{`df${index}`}</option>
-                } 
+                }
               })
             }
           </select>
         </div>
-        <span className="text-red-400 text-xs">
-          don't input any value if a dataframe is chosen, 
+        {/* <span className="text-red-400 text-xs">
+          don't input any value if a dataframe is chosen,
           one of the two will be chosen by default
-        </span>
+        </span> */}
         <div>
           <span>input a value</span>
           <input ref={inpRef} className="border" />
@@ -115,14 +116,14 @@ export default function Df2df({dataComp, dataComps,df_index, setDataComp}) {
           <span>axis</span>
           <select ref={axisRef} className="border">
             {
-              [0,1].map((val, index) => {
+              [0, 1].map((val, index) => {
                 return <option value={val} key={index}>{val}</option>
               })
             }
           </select>
         </div>
       </form>
-      <button onClick={()=>df2df()} className="bg-blue-500 p-2 text-white rounded-sm">generate Dataframe</button>
+      <button onClick={() => df2df()} className="bg-blue-500 p-2 text-white rounded-sm">generate Dataframe</button>
     </div>
   )
 }
diff --git a/src/components/SidePlanes/Query.js b/src/components/SidePlanes/Query.js
index 6155216..2f62056 100644
--- a/src/components/SidePlanes/Query.js
+++ b/src/components/SidePlanes/Query.js
@@ -1,6 +1,6 @@
 import React, { useRef } from 'react'
 
-export default function Query({ dataComp, setDataComp}) {
+export default function Query({ dataComp, setDataComp }) {
 
   const columnRef = useRef()
   const logicRef = useRef()
@@ -9,13 +9,13 @@ export default function Query({ dataComp, setDataComp}) {
   const columns = dataComp.columns
   const logics = [">", "<", "<=", ">=", "==", "!="]
 
-  const query = ()=>{
+  const query = () => {
 
     const qColumn = columnRef.current.value
     const qLogic = logicRef.current.value
     const qValue = valuesRef.current.value
 
-    const  df = dataComp.df.query({column: qColumn, is: qLogic, to: qValue})
+    const df = dataComp.df.query({ column: qColumn, is: qLogic, to: qValue })
 
     setDataComp(prev => {
       let new_data = prev.slice()
@@ -34,9 +34,9 @@ export default function Query({ dataComp, setDataComp}) {
       <form>
         <div>
           <span className="mr-2">Column</span>
-           <select ref={columnRef} className="border">
+          <select ref={columnRef} className="border">
             {
-              columns.map((column, index)=> {
+              columns.map((column, index) => {
                 return <option value={column}>{column}</option>
               })
             }
@@ -44,9 +44,9 @@ export default function Query({ dataComp, setDataComp}) {
         </div>
         <div>
           <span className="mr-2">is</span>
-           <select ref={logicRef} className="border">
+          <select ref={logicRef} className="border">
             {
-              logics.map((logic, index)=> {
+              logics.map((logic, index) => {
                 return <option value={logic}>{logic}</option>
               })
             }
@@ -54,10 +54,10 @@ export default function Query({ dataComp, setDataComp}) {
         </div>
         <div>
           <span className="mr-2">to</span>
-           <input ref={valuesRef} placeholder="value" className="border"/>
+          <input ref={valuesRef} placeholder="value" className="border" />
         </div>
       </form>
-      <button onClick={()=>query()} className="btn btn-default dq-btn-add">Query</button>
+      <button onClick={() => query()} className="bg-blue-700 text-white rounded-sm p-2">Query</button>
     </div>
   )
 }
diff --git a/src/index.js b/src/index.js
index afed62d..9350769 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
-import App from "./App";
+// import App from "./App";
+import App2 from "./App2";
 
-ReactDOM.render(<App />, document.getElementById("root"));
+ReactDOM.render(<App2 />, document.getElementById("root"));

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://github.com/javascriptdata/Data-aRT/compare/master...book.diff" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://github.com/javascriptdata/Data-aRT/compare/master...book.diff" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://github.com/javascriptdata/Data-aRT/compare/master...book.diff" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://github.com/javascriptdata/Data-aRT/compare/master...book.diff" target="_blank">pFad v4 Proxy</a></p></body>
</html>