diff --git a/README.md b/README.md
index 093683d..fb21c5a 100644
--- a/README.md
+++ b/README.md
@@ -30,22 +30,21 @@ function App() {
   const [data, setData] = useState<any[]>([
     {
       id: 1,
-      agentId: 179136,
+      agentId: 1,
       agentCreationDate: "2023-03-22T00:00:00",
-      agentName:
-        "Lorem Ipsum is simply dummy text of the printing and typesetting",
+      agentName:"Markos",
     },
     {
       id: 2,
-      agentId: 494845,
+      agentId: 2,
       agentCreationDate: "2023-03-22T00:00:00",
-      agentName: "There are many variations of passages of Lorem Ipsum available",
+      agentName: "Daniel",
     },
     {
       id: 3,
-      agentId: 494845,
+      agentId: 3,
       agentCreationDate: "2023-03-22T00:00:00",
-      agentName: "Contrary to popular belief, Lorem Ipsum is not simply random text",
+      agentName: "Mary",
     },
   ]);
 
@@ -54,159 +53,65 @@ function App() {
       id: 1,
       order: 1,
       title: "Id",
-      icon: "icon-Frame-73",
     },
     {
       id: 2,
       order: 2,
       title: "Name",
-      icon: "icon-Frame-73",
     },
     {
       id: 3,
       order: 3,
-      title: "Surename",
-      icon: "icon-Frame-73",
+      title: "Creation Date",
     },
   ]);
+
   const [columnConfig] = useState<IColumnConfig<any>[]>([
     {
       id: 1,
-      columnName: "Id",
       title: (row: any, name: string) => (
-        <div
-          className={`G-center G-table-icon`}
-          onClick={() => console.log(name)}
-        >
-          <p className="G-row-item">{row.title}</p>
-          <i className={row.icon} style={{ color: "#757575" }} />
+        <div>
+          <p>{row.title}</p>
         </div>
       ),
       setRow: (row: any) => (
-        <div className={`G-center G-table-icon`}>
-          <div className="G-row-item">{row.easywalletAgentId}</div>
+        <div>
+          <div>{row.id}</div>
         </div>
       ),
-      footer: (row: any) => (
-        <PopUp
-          open={false}
-          handleClick={() => console.log(1)}
-          handleClose={() => console.log(2)}
-          anchorEl={null}
-          modalName={
-            row.aggregate
-              ? `Total ${formatPrice(row.aggregate, row.aggregateType)}`
-              : ""
-          }
-        >
-          <ul className="G-list">
-            {listForDropdown?.map((item: any, index: any) => {
-              return <li key={item.id}>{item.title}</li>;
-            })}
-          </ul>
-        </PopUp>
-      ),
       isVisible: true,
     },
     {
       id: 2,
-      columnName: "Name",
       title: (row: IColumnHeader, name: string) => (
-        <div
-          className={`G-center G-table-icon`}
-          onClick={() => console.log(name)}
-        >
-          <p className="G-row-item">{row.title}</p>
-          <i className={row.icon} style={{ color: "#757575" }} />
+        <div>
+          <p>{row.title}</p>
         </div>
       ),
       setRow: (row: any) => (
-        <div className={`G-center G-table-icon`}>
-          <div className="G-row-item">{row.agentName}</div>
+        <div>
+          <div>{row.agentName}</div>
         </div>
       ),
-      footer: (row: any) => (
-        <PopUp
-          open={false}
-          handleClick={() => console.log(1)}
-          handleClose={() => console.log(2)}
-          anchorEl={null}
-          modalName={
-            row.aggregate
-              ? `Total ${formatPrice(row.aggregate, row.aggregateType)}`
-              : ""
-          }
-        >
-          <ul className="G-list">
-            {listForDropdown?.map((item: any, index: any) => {
-              return <li key={item.id}>{item.title}</li>;
-            })}
-          </ul>
-        </PopUp>
-      ),
       isVisible: true,
     },
     {
       id: 3,
-      columnName: "Surname",
       title: (row: IColumnHeader, name: string) => (
-        <div
-          className={`G-center G-table-icon`}
-          onClick={() => console.log(name)}
-        >
-          <p className="G-row-item">{row.title}</p>
-          <i className={row.icon} style={{ color: "#757575" }} />
+        <div>
+          <p >{row.title}</p>
         </div>
       ),
       setRow: (row: any) => (
-        <div className={`G-center G-table-icon`}>
-          <div className="G-row-item">{row.agentCreationDate}</div>
+        <div>
+          <div>{row.agentCreationDate}</div>
         </div>
       ),
-      footer: (row: any) => (
-        <PopUp
-          open={false}
-          handleClick={() => console.log(1)}
-          handleClose={() => console.log(2)}
-          anchorEl={null}
-          modalName={
-            row.aggregate
-              ? `Total ${formatPrice(row.aggregate, row.aggregateType)}`
-              : ""
-          }
-        >
-          <ul className="G-list">
-            {listForDropdown?.map((item: any, index: any) => {
-              return <li key={item.id}>{item.title}</li>;
-            })}
-          </ul>
-        </PopUp>
-      ),
       isVisible: true,
     },
   ]);
 
-  return (
-    <div style={{ width: "80%", margin: "0 auto" }}>
-      <Table
-        data={data} // TableData
-        columnsConfigStructure={columnsConfigStructure} // Structure to store in the database - pin/hide/drag-drop
-        columnsHeaderStructure={columnsHeaderStructure} // headerStructure will automatically work with configStructure
-        // ... other props ...
-      />
-    </div>
-  );
-}
-
-export default App;
-```
-
-# Table Structure
-
-We can drag/drop, hide and freeze columns vertical and horizontal.
-
-```JSX
-const [columnsConfigStructure, setColumnsConfigStructures] = useState<
+ const [columnsConfigStructure, setColumnsConfigStructures] = useState<
     IColumnConfigStructure<any>
   >({
     [StructureConfig.Main]: {
@@ -230,8 +135,52 @@ const [columnsConfigStructure, setColumnsConfigStructures] = useState<
         items: [],
       },
     });
+
+  return (
+    <div style={{ width: "80%", margin: "0 auto" }}>
+      <Table
+        data={data} // TableData
+        columnsConfigStructure={columnsConfigStructure} // Structure to store in the database - pin/hide/drag-drop
+        columnsHeaderStructure={columnsHeaderStructure} // headerStructure will automatically work with configStructure
+        // ... other props ...
+      />
+    </div>
+  );
+}
+
+export default App;
 ```
 
+# Table Structure
+
+We can drag/drop, hide and freeze columns vertical and horizontal.
+
+```JSX
+  const setColumnsConfigStructure = (option: IColumnConfigStructure<any>) => {
+    setColumnsConfigStructures(option);
+  };
+
+  const setColumnHeaderStructure = (option: IColumnHeaderStructure) => {
+    setColumnHeaderStructures(option);
+  };
+```
+
+![customizing](https://github.com/PandaTechAM/web-lib-panda-table/assets/69170986/723a5a7d-e2cc-40a6-9930-1e62630f6ae8)
+
+And if we want to get structure we have to use storeStructure function
+
+```JSX
+const storeStructure = () => {};
+```
+
+Let add some with for column lik
+
+```JSX
+columnMinWidth={120}
+```
+
+![freezed_column](https://github.com/PandaTechAM/web-lib-panda-table/assets/69170986/970cd1bc-d752-461c-9147-46a155ce337b)
+
 # Hovered Row Actions
 
 When we use isHoveredRow props, we need to make actions.
@@ -278,14 +227,12 @@ const [links] = useState<ILinksList[]>([
     {
       id: 1,
       name: "Overpayments",
-      action: (option: any) => {
-      },
+      action: (option: any) => {},
     },
     {
       id: 2,
       name: "Estate Owners",
-      action: (option: any) => {
-      },
+      action: (option: any) => {},
     },
   ]);
 ```
@@ -299,15 +246,13 @@ const [rightFreezeConfig] = useState<IColumnConfig<any>[]>([
     {
       id: 1,
       title: (row: IColumnHeader, name: string) => (
-        <div
-          className={`G-center G-table-icon`}
-        >
-          <p className="G-row-item">{row.title}</p>
+        <div>
+          <p>{row.title}</p>
         </div>
       ),
       setRow: () => (
-        <div className={`G-center G-table-icon`}>
-          <p className="G-row-item">View Details</p>
+        <div>
+          <p>View Details</p>
         </div>
       ),
       isVisible: true,
@@ -315,15 +260,13 @@ const [rightFreezeConfig] = useState<IColumnConfig<any>[]>([
     {
       id: 2,
       title: (row: IColumnHeader, name: string) => (
-        <div
-          className={`G-center G-table-icon`}
-        >
-          <p className="G-row-item">{row.title}</p>
+        <div>
+          <p>{row.title}</p>
         </div>
       ),
       setRow: () => (
-        <div className={`G-center G-table-icon`}>
-          <p className="G-row-item">View Details</p>
+        <div>
+          <p>View Details</p>
         </div>
       ),
       isVisible: true,
diff --git a/package.json b/package.json
index 940ebd9..1bfa0dc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "beautiful-react-table",
-  "version": "7.1.2",
+  "version": "7.1.3",
   "description": "My first react typescript package",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
diff --git a/src/App.tsx b/src/App.tsx
index a7a040e..88f465f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,87 +1,28 @@
 import React from 'react'
-import {
-  IColumnConfig,
-  IColumnHeader,
-  IPageSizes,
-  IrowActions,
-  IColumnConfigStructure,
-  IColumnHeaderStructure,
-  ILinksList,
-  ITotalList,
-  ItemFields,
-  IFilterDataForRequest,
-} from './Models/table.models'
+import { IColumnConfig, IColumnHeader, IColumnConfigStructure, IColumnHeaderStructure } from './Models/table.models'
 import { useState } from 'react'
 import { StructureConfig } from './Models/table.enum'
 import Table from './table'
-import tableColumns from './Example.json'
-import FiltersTypes from './panda-filter-helper.json'
-import PopUp from './components/popUp'
-import { formatPrice } from './utils'
 
 function App() {
-  const [filteredTableData, setFilteredTableData] = useState<IFilterDataForRequest>({
-    Filters: [],
-    Aggregates: [],
-  })
-  const [filterDataForRequest, setFilterDataForRequest] = useState<ItemFields[]>([])
-  const [data, setData] = useState<any[]>([])
-  const [rowActions] = useState<IrowActions[]>([
-    {
-      action: (e, item, index) => {
-        e.stopPropagation()
-        console.log(item)
-      },
-    },
-    {
-      action: (e, item, index) => {
-        e.stopPropagation()
-
-        console.log(item)
-      },
-    },
-  ])
-  const [pageSize] = useState<IPageSizes[]>([
-    { id: 1, count: 10 },
-    { id: 2, count: 25 },
-    { id: 3, count: 50 },
-    { id: 4, count: 100 },
-  ])
-  const [links] = useState<ILinksList[]>([
+  const [data] = useState<any[]>([
     {
       id: 1,
-      name: 'Overpayments',
-      action: (option: any) => {
-        console.log(option, '1')
-      },
+      agentId: 1,
+      agentCreationDate: '2023-03-22T00:00:00',
+      agentName: 'Markos',
     },
     {
       id: 2,
-      name: 'Estate Owners',
-      action: (option: any) => {
-        console.log(option, '2')
-      },
+      agentId: 2,
+      agentCreationDate: '2023-03-22T00:00:00',
+      agentName: 'Daniel',
     },
     {
       id: 3,
-      name: 'Condominium Association Fee Altering',
-      action: (option: any) => {
-        console.log(option, '3')
-      },
-    },
-    {
-      id: 4,
-      name: 'Payments',
-      action: (option: any) => {
-        console.log(option, 4)
-      },
-    },
-    {
-      id: 5,
-      name: 'Debts',
-      action: (option: any) => {
-        console.log(option, 5)
-      },
+      agentId: 3,
+      agentCreationDate: '2023-03-22T00:00:00',
+      agentName: 'Mary',
     },
   ])
   const [columnHeader] = useState<IColumnHeader[]>([
@@ -89,495 +30,63 @@ function App() {
       id: 1,
       order: 1,
       title: 'Id',
-      icon: 'icon-Frame-73',
-      aggregate: 5000,
-      aggregateType: 'AMD',
     },
     {
       id: 2,
       order: 2,
       title: 'Name',
-      icon: 'icon-Frame-73',
-      aggregate: '',
-      aggregateType: 'AMD',
     },
     {
       id: 3,
       order: 3,
-      title: 'Surename',
-      icon: 'icon-Frame-73',
-      aggregate: 35000,
-      aggregateType: 'AMD',
-    },
-    {
-      id: 4,
-      order: 4,
-      title: 'Email',
-      icon: 'icon-Frame-73',
-      aggregate: 150000,
-      aggregateType: 'AMD',
-    },
-    {
-      id: 5,
-      order: 5,
-      title: 'Age',
-      icon: 'icon-Frame-73',
-      aggregate: '',
-      aggregateType: '',
-    },
-    {
-      id: 6,
-      order: 6,
-      title: 'Address',
-      icon: 'icon-Frame-73',
-      aggregate: '',
-      aggregateType: '',
-    },
-    {
-      id: 7,
-      order: 7,
-      title: 'Phone',
-      icon: 'icon-Frame-73',
-      aggregate: 50,
-      aggregateType: 'AMD',
-    },
-    {
-      id: 8,
-      order: 8,
-      title: 'Money',
-      icon: 'icon-Frame-73',
-      aggregate: 100,
-      aggregateType: 'AMD',
-    },
-    {
-      id: 9,
-      order: 9,
-      title: 'BirthDate',
-      icon: 'icon-Frame-73',
-      aggregate: 5000000,
-      aggregateType: 'AMD',
-    },
-    {
-      id: 10,
-      order: 9,
-      title: 'isMarried',
-      icon: 'icon-Frame-73',
-      aggregate: 9960,
-      aggregateType: 'AMD',
-    },
-    {
-      id: 11,
-      order: 9,
-      title: 'isWorking',
-      icon: 'icon-Frame-73',
-      aggregate: 150000,
-      aggregateType: 'AMD',
-    },
-    {
-      id: 12,
-      order: 9,
-      title: 'isHappy',
-      icon: 'icon-Frame-73',
-      aggregate: 150000,
-      aggregateType: 'AMD',
+      title: 'Creation Date',
     },
   ])
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
-  const open = Boolean(anchorEl)
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget)
-  }
-  const handleClose = () => {
-    setAnchorEl(null)
-  }
   const [columnConfig] = useState<IColumnConfig<any>[]>([
     {
       id: 1,
-      columnName: 'Id',
       title: (row: any, name: string) => (
-        <div className={`G-center G-table-icon`} onClick={() => console.log(name)}>
-          <p className='G-row-item'>{row.title}</p>
-
-          <i className={row.icon} style={{ color: '#757575' }} />
+        <div>
+          <p>{row.title}</p>
         </div>
       ),
       setRow: (row: any) => (
-        <div className={`G-center G-table-icon`}>
-          <div className='G-row-item'>{row.counterpartyId}</div>
+        <div>
+          <div>{row.id}</div>
         </div>
       ),
-      footer: (row: any) => (
-        <PopUp
-          open={open}
-          handleClick={handleClick}
-          handleClose={handleClose}
-          anchorEl={anchorEl}
-          modalName={row.title ? `Total ${formatPrice(row.aggregate, row.aggregateType)}` : ''}
-        >
-          <ul className='G-list'>
-            {listForDropdown?.map((item: any, index: any) => {
-              return <li key={item.id}>{item.title}</li>
-            })}
-          </ul>
-        </PopUp>
-      ),
-      // customStyle: { backgroundColor: "white" },
       isVisible: true,
     },
     {
       id: 2,
-      columnName: 'Name',
       title: (row: IColumnHeader, name: string) => (
-        <div className={`G-center G-table-icon`} onClick={() => console.log(name)}>
-          <p className='G-row-item'>{row.title}</p>
-          <i className={row.icon} style={{ color: '#757575' }} />
+        <div>
+          <p>{row.title}</p>
         </div>
       ),
       setRow: (row: any) => (
-        <div className={`G-center G-table-icon`}>
-          <div className='G-row-item'>{row.firstName}</div>
+        <div>
+          <div>{row.agentName}</div>
         </div>
       ),
-      footer: (row: any) => (
-        <PopUp
-          open={open}
-          handleClick={handleClick}
-          handleClose={handleClose}
-          anchorEl={anchorEl}
-          modalName={row.aggregate ? `Total ${formatPrice(row.aggregate, row.aggregateType)}` : ''}
-        >
-          <ul className='G-list'>
-            {listForDropdown?.map((item: any, index: any) => {
-              return <li key={item.id}>{item.title}</li>
-            })}
-          </ul>
-        </PopUp>
-      ),
-      // customStyle: { backgroundColor: "white" },
       isVisible: true,
     },
     {
       id: 3,
-      columnName: 'Surname',
       title: (row: IColumnHeader, name: string) => (
-        <div className={`G-center G-table-icon`} onClick={() => console.log(name)}>
-          <p className='G-row-item'>{row.title}</p>
-          <i className={row.icon} style={{ color: '#757575' }} />
+        <div>
+          <p>{row.title}</p>
         </div>
       ),
       setRow: (row: any) => (
-        <div className={`G-center G-table-icon`}>
-          <div className='G-row-item'>{row.lastName}</div>
+        <div>
+          <div>{row.agentCreationDate}</div>
         </div>
       ),
-      footer: (row: any) => (
-        <PopUp
-          open={open}
-          handleClick={handleClick}
-          handleClose={handleClose}
-          anchorEl={anchorEl}
-          modalName={row.aggregate ? `Total ${formatPrice(row.aggregate, row.aggregateType)}` : ''}
-        >
-          <ul className='G-list'>
-            {listForDropdown?.map((item: any, index: any) => {
-              return <li key={item.id}>{item.title}</li>
-            })}
-          </ul>
-        </PopUp>
-      ),
-      // customStyle: { backgroundColor: "white" },
-      isVisible: true,
-    },
-    {
-      id: 4,
-      columnName: 'Email',
-      title: (row: IColumnHeader, name: string) => (
-        <div className={`G-center G-table-icon`} onClick={() => console.log(name)}>
-          <p className='G-row-item'>{row.title}</p>
-          <i className={row.icon} style={{ color: '#757575' }} />
-        </div>
-      ),
-      setRow: (row: any) => (
-        <div className={`G-center G-table-icon`}>
-          <div className='G-row-item'>{row.age}</div>
-        </div>
-      ),
-      footer: (row: any) => (
-        <PopUp
-          open={open}
-          handleClick={handleClick}
-          handleClose={handleClose}
-          anchorEl={anchorEl}
-          modalName={row.aggregate ? `Total ${formatPrice(row.aggregate, row.aggregateType)}` : ''}
-        >
-          <ul className='G-list'>
-            {listForDropdown?.map((item: any, index: any) => {
-              return <li key={item.id}>{item.title}</li>
-            })}
-          </ul>
-        </PopUp>
-      ),
-      // customStyle: { backgroundColor: "white" },
-      isVisible: true,
-    },
-    {
-      id: 5,
-      columnName: 'Age',
-      title: (row: IColumnHeader, name: string) => (
-        <div className={`G-center G-table-icon`} onClick={() => console.log(name)}>
-          <p className='G-row-item'>{row.title}</p>
-          <i className={row.icon} style={{ color: '#757575' }} />
-        </div>
-      ),
-      setRow: (row: any) => (
-        <div className={`G-center G-table-icon`}>
-          <div className='G-row-item'>{row.gender}</div>
-        </div>
-      ),
-      footer: (row: any) => (
-        <PopUp
-          open={open}
-          handleClick={handleClick}
-          handleClose={handleClose}
-          anchorEl={anchorEl}
-          modalName={row.aggregate ? `Total ${formatPrice(row.aggregate, row.aggregateType)}` : ''}
-        >
-          <ul className='G-list'>
-            {listForDropdown?.map((item: any, index: any) => {
-              return <li key={item.id}>{item.title}</li>
-            })}
-          </ul>
-        </PopUp>
-      ),
-      // customStyle: { backgroundColor: "white" },
-      isVisible: true,
-    },
-    {
-      id: 6,
-      columnName: 'Address',
-      title: (row: IColumnHeader, name: string) => (
-        <div className={`G-center G-table-icon`} onClick={() => console.log(name)}>
-          <p className='G-row-item'>{row.title}</p>
-          <i className={row.icon} style={{ color: '#757575' }} />
-        </div>
-      ),
-      setRow: (row: any) => (
-        <div className={`G-center G-table-icon`}>
-          <div className='G-row-item'>{row.phoneNumber}</div>
-        </div>
-      ),
-      footer: (row: any) => (
-        <PopUp
-          open={open}
-          handleClick={handleClick}
-          handleClose={handleClose}
-          anchorEl={anchorEl}
-          modalName={row.aggregate ? `Total ${formatPrice(row.aggregate, row.aggregateType)}` : ''}
-        >
-          <ul className='G-list'>
-            {listForDropdown?.map((item: any, index: any) => {
-              return <li key={item.id}>{item.title}</li>
-            })}
-          </ul>
-        </PopUp>
-      ),
-      // customStyle: { backgroundColor: "white" },
-      isVisible: true,
-    },
-    {
-      id: 7,
-      columnName: 'Phone',
-      title: (row: IColumnHeader, name: string) => (
-        <div className={`G-center G-table-icon`} onClick={() => console.log(name)}>
-          <p className='G-row-item'> {row.title}</p>
-          <i className={row.icon} style={{ color: '#757575' }} />
-        </div>
-      ),
-      setRow: (row: any) => (
-        <div className={`G-center G-table-icon`}>
-          <div className='G-row-item'>{new Date(row.registrationDate).toLocaleString()}</div>
-        </div>
-      ),
-      footer: (row: any) => (
-        <PopUp
-          open={open}
-          handleClick={handleClick}
-          handleClose={handleClose}
-          anchorEl={anchorEl}
-          modalName={row.aggregate ? `Total ${formatPrice(row.aggregate, row.aggregateType)}` : ''}
-        >
-          <ul className='G-list'>
-            {listForDropdown?.map((item: any, index: any) => {
-              return <li key={item.id}>{item.title}</li>
-            })}
-          </ul>
-        </PopUp>
-      ),
-      // customStyle: { backgroundColor: "white" },
-      isVisible: true,
-    },
-    {
-      id: 8,
-      columnName: 'Money',
-      title: (row: IColumnHeader, name: string) => (
-        <div className={`G-center G-table-icon`} onClick={() => console.log(name)}>
-          <p className='G-row-item'>{row.title}</p>
-          <i className={row.icon} style={{ color: '#757575' }} />
-        </div>
-      ),
-      setRow: (row: any) => (
-        <div className={`G-center G-table-icon`}>
-          <div className='G-row-item'>{row.email}</div>
-        </div>
-      ),
-      footer: (row: any) => (
-        <PopUp
-          open={open}
-          handleClick={handleClick}
-          handleClose={handleClose}
-          anchorEl={anchorEl}
-          modalName={row.aggregate ? `Total ${formatPrice(row.aggregate, row.aggregateType)}` : ''}
-        >
-          <ul className='G-list'>
-            {listForDropdown?.map((item: any, index: any) => {
-              return <li key={item.id}>{item.title}</li>
-            })}
-          </ul>
-        </PopUp>
-      ),
-      // customStyle: { backgroundColor: "white" },
-      isVisible: true,
-    },
-    {
-      id: 9,
-      columnName: 'birthDate',
-      title: (row: IColumnHeader, name: string) => (
-        <div className={`G-center G-table-icon`} onClick={() => console.log(name)}>
-          <p className='G-row-item'>{row.title}</p>
-          <i className={row.icon} style={{ color: '#757575' }} />
-        </div>
-      ),
-      setRow: (row: any) => (
-        <div className={`G-center G-table-icon`}>
-          <div className='G-row-item'>{row.phoneNumber}</div>
-        </div>
-      ),
-      footer: (row: any) => (
-        <PopUp
-          open={open}
-          handleClick={handleClick}
-          handleClose={handleClose}
-          anchorEl={anchorEl}
-          modalName={row.aggregate ? `Total ${formatPrice(row.aggregate, row.aggregateType)}` : ''}
-        >
-          <ul className='G-list'>
-            {listForDropdown?.map((item: any, index: any) => {
-              return <li key={item.id}>{item.title}</li>
-            })}
-          </ul>
-        </PopUp>
-      ),
-      // customStyle: { backgroundColor: "white" },
-      isVisible: true,
-    },
-    {
-      id: 10,
-      columnName: 'isMarried',
-      title: (row: IColumnHeader, name: string) => (
-        <div className={`G-center G-table-icon`} onClick={() => console.log(name)}>
-          <p className='G-row-item'>{row.title}</p>
-          <i className={row.icon} style={{ color: '#757575' }} />
-        </div>
-      ),
-      setRow: (row: any) => (
-        <div className={`G-center G-table-icon`}>
-          <div className='G-row-item'>{row.comment}</div>
-        </div>
-      ),
-      footer: (row: any) => (
-        <PopUp
-          open={open}
-          handleClick={handleClick}
-          handleClose={handleClose}
-          anchorEl={anchorEl}
-          modalName={row.aggregate ? `Total ${formatPrice(row.aggregate, row.aggregateType)}` : ''}
-        >
-          <ul className='G-list'>
-            {listForDropdown?.map((item: any, index: any) => {
-              return <li key={item.id}>{item.title}</li>
-            })}
-          </ul>
-        </PopUp>
-      ),
-      // customStyle: { backgroundColor: "white" },
-      isVisible: true,
-    },
-    {
-      id: 11,
-      columnName: 'isWorking',
-      title: (row: IColumnHeader, name: string) => (
-        <div className={`G-center G-table-icon`} onClick={() => console.log(name)}>
-          <p className='G-row-item'>{row.title}</p>
-          <i className={row.icon} style={{ color: '#757575' }} />
-        </div>
-      ),
-      setRow: (row: any) => (
-        <div className={`G-center G-table-icon`}>
-          <div className='G-row-item'>{row.isEnabled}</div>
-        </div>
-      ),
-      footer: (row: any) => (
-        <PopUp
-          open={open}
-          handleClick={handleClick}
-          handleClose={handleClose}
-          anchorEl={anchorEl}
-          modalName={row.aggregate ? `Total ${formatPrice(row.aggregate, row.aggregateType)}` : ''}
-        >
-          <ul className='G-list'>
-            {listForDropdown?.map((item: any, index: any) => {
-              return <li key={item.id}>{item.title}</li>
-            })}
-          </ul>
-        </PopUp>
-      ),
-      // customStyle: { backgroundColor: "white" },
-      isVisible: true,
-    },
-    {
-      id: 12,
-      columnName: 'isHappy',
-      title: (row: IColumnHeader, name: string) => (
-        <div className={`G-center G-table-icon`} onClick={() => console.log(name)}>
-          <p className='G-row-item'>{row.title}</p>
-          <i className={row.icon} style={{ color: '#757575' }} />
-        </div>
-      ),
-      setRow: (row: any) => (
-        <div className={`G-center G-table-icon`}>
-          <div className='G-row-item'>{row.weight}</div>
-        </div>
-      ),
-      footer: (row: any) => (
-        <PopUp
-          open={open}
-          handleClick={handleClick}
-          handleClose={handleClose}
-          anchorEl={anchorEl}
-          modalName={row.aggregate ? `Total ${formatPrice(row.aggregate, row.aggregateType)}` : ''}
-        >
-          <ul className='G-list'>
-            {listForDropdown?.map((item: any, index: any) => {
-              return <li key={item.id}>{item.title}</li>
-            })}
-          </ul>
-        </PopUp>
-      ),
-      // customStyle: { backgroundColor: "white" },
       isVisible: true,
     },
   ])
-  const [columnsConfigStructure, setColumnsConfigStructures] = useState<IColumnConfigStructure<any>>({
+  const [columnsConfigStructure] = useState<IColumnConfigStructure<any>>({
     [StructureConfig.Main]: {
       name: 'Columns',
       items: columnConfig,
@@ -587,7 +96,7 @@ function App() {
       items: [],
     },
   })
-  const [columnsHeaderStructure, setColumnHeaderStructures] = useState<IColumnHeaderStructure>({
+  const [columnsHeaderStructure] = useState<IColumnHeaderStructure>({
     [StructureConfig.Main]: {
       name: 'Columns',
       items: columnHeader,
@@ -597,132 +106,13 @@ function App() {
       items: [],
     },
   })
-  const [allDataFromDb] = useState<any[]>([
-    {
-      id: 1,
-      easywalletAgentId: 179136,
-      agentCreationDate: '2023-03-22T00:00:00',
-      agentName: 'Armen Virabyan test Armen Virabyan test Armen Virabyan test Armen Virabyan test',
-    },
-    {
-      id: 2,
-      easywalletAgentId: 494845,
-      agentCreationDate: '2023-03-22T00:00:00',
-      agentName: 'Armen Virabyan test Ar',
-    },
-  ])
-  const [listForDropdown] = useState<ITotalList[]>([
-    {
-      id: 1,
-      title: 'AVG',
-    },
-    {
-      id: 2,
-      title: 'MIN',
-    },
-    {
-      id: 3,
-      title: 'MAX',
-    },
-    {
-      id: 4,
-      title: 'SUM',
-    },
-  ])
-  const [pagePerFilterField, setPagePerFilterField] = useState<number>(1)
-  const [isLoadingFilters, setIsLoading] = useState<boolean>(false)
-  const [perColumnListForFilters, setPerColumnListForFilters] = useState<string[]>()
-
-  const handleChangePagePerFilterField = () => {
-    setIsLoading(true)
-    setPagePerFilterField((prev) => prev + 1)
-  }
-  const setColumnsConfigStructure = (option: IColumnConfigStructure<any>) => {
-    setColumnsConfigStructures(option)
-  }
-  const setColumnHeaderStructure = (option: IColumnHeaderStructure) => {
-    setColumnHeaderStructures(option)
-  }
-  const handleEdit = (option: any) => {
-    console.log(option)
-  }
-  const handleDelete = (option: any[] | string) => {
-    console.log(option)
-  }
-  const RightSideSelfAction = (option: number | string) => {
-    console.log(option)
-  }
-  const storeStructure = () => {
-    console.log(12)
-  }
-  const getRow = (row: any) => {
-    console.log(row)
-  }
-  const getPageRowsCountAndCurrentPage = (pageNumber: number, rowsCount: IPageSizes) => {
-    console.log(pageNumber, rowsCount)
-  }
-  const getFilteredData = (option: ItemFields[], ColumnName?: string) => {
-    setFilterDataForRequest(option)
-  }
-  const getFilteredDataForTable = () => {
-    setFilteredTableData((prev) => {
-      return { ...prev, Filters: filterDataForRequest }
-    })
-  }
-  const getDownloadType = (option: string, checkedRows: any[] | string) => {
-    console.log(option, checkedRows)
-  }
 
   return (
     <div style={{ width: '80%', margin: '0 auto' }}>
       <Table
         data={data} // TableData
-        allDataFromDb={allDataFromDb}
         columnsConfigStructure={columnsConfigStructure} // Structure to store in the database - pin/hide/drag-drop
         columnsHeaderStructure={columnsHeaderStructure} // headerStructure will automatically work with configStructure
-        perColumnListForFilters={perColumnListForFilters} // per column list for filters
-        // rightFreezeConfig={rightFreezeConfig} // List for multiple FreezeColumns in the right side of the table
-        columnMinWidth={200} // Column's Width / use when you need to have equal columns - ex. FreezeColumns
-        headerHeight={64}
-        footerHeight={48}
-        leftFreezedColumnWidth={72}
-        rightFreezedColumnWidth={64}
-        pageSizeStructure={pageSize} // Per page data count
-        pagesTotalCount={5000000} // Page's total count
-        currentPage={1} // Current Page
-        multipleCheck // Multiple check for delete or download
-        isStickyFirstColumn // Sticky first column
-        rowsFreezeAction={false} // is active freeze fnction for rows
-        isHoveredRow // while hover per row will be highlighted actions
-        rowActions={rowActions} // Array of actions and theyr's icons / must be active isHoveredRow
-        // FreezeIcon={FreezeSvgIcon} //freeze row action icon / must be added setDataWithPinnedRows function and activate isHoveredRow
-        // RightSideIcon={ExSvgIcon} // SVG icon for right side action
-        freezedRightSideVisible // is visible Freezed right side
-        freezedRightSide={'dropdown'} // is dropdown
-        links={links} // Array of links // have to check freezedRightSide - dropdown
-        headerColor={'#F3F6F8'} // Header color
-        footerColor={'#F3F6F8'} // Footer color
-        aggregates
-        // freezedLeftSideColor={'silver'} // freezedLeft side color
-        // freezedRightSideColor={'silver'} // freezedRight side color
-        draggableColumns //Is column's draggable
-        filterColumns={tableColumns.Columns} // filter columns
-        filtersTypes={FiltersTypes.FilteringTypes} // filter types
-        filterDataForRequest={filterDataForRequest}
-        isLoadingFilters={isLoadingFilters}
-        hasFilters={true}
-        setColumnsConfigStructure={setColumnsConfigStructure} // set changed config structure - pin/hide/drag-drop
-        setColumnHeaderStructure={setColumnHeaderStructure} // set changed header structure - pin/hide/drag-drop
-        getRow={getRow} // get row data
-        handleEdit={handleEdit} // will be visible when active multipleCheck
-        handleDelete={handleDelete} // will be visible when active multipleCheck
-        getFilteredData={getFilteredData} // get filtered data
-        getFilteredDataForTable={getFilteredDataForTable}
-        handleChangePagePerFilterField={handleChangePagePerFilterField} // activating load more data for filter fields
-        getPageRowsCountAndCurrentPage={getPageRowsCountAndCurrentPage} // page count and current page
-        storeStructure={storeStructure} // Save columns structure on DB
-        getDownloadType={getDownloadType} // get download type CSV OR XLSX
-        // RightSideSelfAction={RightSideSelfAction} // FreezedRightSideSelfAction
       />
     </div>
   )
diff --git a/src/Models/table.models.ts b/src/Models/table.models.ts
index fa5817f..20a1e1d 100644
--- a/src/Models/table.models.ts
+++ b/src/Models/table.models.ts
@@ -4,7 +4,6 @@ export interface IProps<T extends Object> {
   columnsHeaderStructure: IColumnHeaderStructure
   rightFreezeConfig?: IColumnConfig<T>[]
   perColumnListForFilters?: string[]
-  allDataFromDb?: T[]
   links?: ILinksList[]
   rowActions?: IrowActions[]
   pageSizeStructure?: IPageSizes[]
diff --git a/src/assets/readme_Images/customizing.png b/src/assets/readme_Images/customizing.png
new file mode 100644
index 0000000..bbc48c3
Binary files /dev/null and b/src/assets/readme_Images/customizing.png differ
diff --git a/src/assets/readme_Images/freezed_column.png b/src/assets/readme_Images/freezed_column.png
new file mode 100644
index 0000000..3f0dd23
Binary files /dev/null and b/src/assets/readme_Images/freezed_column.png differ
diff --git a/src/table/Layout/Footer/FreezedRight/index.tsx b/src/table/Layout/Footer/FreezedRight/index.tsx
index 28f592e..c295c0a 100644
--- a/src/table/Layout/Footer/FreezedRight/index.tsx
+++ b/src/table/Layout/Footer/FreezedRight/index.tsx
@@ -23,6 +23,7 @@ const FooterFreezedRight = <T extends Object>({
           if (i < 4)
             return (
               <li
+                key={item.id}
                 style={{
                   backgroundColor: footerColor && footerColor,
                   maxWidth: rightFreezedColumnWidth ? `${rightFreezedColumnWidth}px` : `${item.width}px`,
diff --git a/src/table/Layout/Header/freezedRigth/index.tsx b/src/table/Layout/Header/freezedRigth/index.tsx
index dc66a0b..6a3d219 100644
--- a/src/table/Layout/Header/freezedRigth/index.tsx
+++ b/src/table/Layout/Header/freezedRigth/index.tsx
@@ -23,6 +23,7 @@ const FreezedHeaderRight = <T extends Object>({
           if (i < 4)
             return (
               <li
+                key={item.id}
                 style={{
                   maxWidth: rightFreezedColumnWidth ? `${rightFreezedColumnWidth}px` : `${item.width}px`,
                   minWidth: rightFreezedColumnWidth ? `${rightFreezedColumnWidth}px` : `${item.width}px`,
diff --git a/src/table/Layout/Header/main/index.tsx b/src/table/Layout/Header/main/index.tsx
index bb39ec9..c5f5644 100644
--- a/src/table/Layout/Header/main/index.tsx
+++ b/src/table/Layout/Header/main/index.tsx
@@ -30,8 +30,8 @@ const HeaderMain = <T extends Object>({
       {isStickyFirstColumn ? null : (
         <li
           style={{
-            minWidth: `${leftFreezedColumnWidth}px`,
-            maxWidth: `${leftFreezedColumnWidth}px`,
+            minWidth: leftFreezedColumnWidth ? `${leftFreezedColumnWidth}px` : '60px',
+            maxWidth: leftFreezedColumnWidth ? `${leftFreezedColumnWidth}px` : '60px',
             backgroundColor: headerColor && headerColor,
           }}
         >
diff --git a/src/table/Layout/Rows/FreezedRigthColumns/DropDown/index.tsx b/src/table/Layout/Rows/FreezedRigthColumns/DropDown/index.tsx
index 4107182..b0bbd56 100644
--- a/src/table/Layout/Rows/FreezedRigthColumns/DropDown/index.tsx
+++ b/src/table/Layout/Rows/FreezedRigthColumns/DropDown/index.tsx
@@ -36,7 +36,7 @@ const DropDown = <T extends Object>({ checkedLink, links, item, getRowForDropdow
         handleClick={handleClick}
         handleClose={handleClose}
       >
-        <>
+        <div>
           {links &&
             links.length &&
             links.map((el, ind) => {
@@ -68,7 +68,7 @@ const DropDown = <T extends Object>({ checkedLink, links, item, getRowForDropdow
                 </li>
               )
             })}
-        </>
+        </div>
       </PopUp>
     </>
   )
diff --git a/src/table/MainHeader/index.tsx b/src/table/MainHeader/index.tsx
index 6b6bac4..8c03317 100644
--- a/src/table/MainHeader/index.tsx
+++ b/src/table/MainHeader/index.tsx
@@ -81,7 +81,7 @@ const MainHeader = <T extends Object>({
   customHeaderAction,
 }: IActionsHeader<T>) => {
   return (
-    <div className='G-center G-table-actions-header'>
+    <div className='G-justify-start G-table-actions-header'>
       {multipleCheck ? (
         <>
           <CheckRows
diff --git a/src/table/index.scss b/src/table/index.scss
index 88d3ecc..f7deb89 100644
--- a/src/table/index.scss
+++ b/src/table/index.scss
@@ -102,11 +102,11 @@
     position        : -webkit-sticky;
     position        : sticky;
     top             : 0;
-    background-color      : #CED8DD;
+    background-color      : #F3F6F8;
     text-align: center;
 
     li {
-      background-color: #CED8DD;
+      background-color: #F3F6F8;
       padding     : 14px 15px;
       width       : 100%;
       color       : var(--blue-base);
@@ -336,10 +336,10 @@
     top             : 0;
     background      : var(--grey-55);
     text-align: center;
-    background-color      : #CED8DD;
+    background-color      : #F3F6F8;
   
     li {
-      background-color: #CED8DD;
+      background-color: #F3F6F8;
       padding     : 14px 15px;
       width       : 100%;
       color       : var(--blue-base);