diff --git a/src/Components/LoggedIn/Content/Tariffs/DataGridElement/index.tsx b/src/Components/LoggedIn/Content/Tariffs/DataGridElement/index.tsx
index f597035..0000b44 100644
--- a/src/Components/LoggedIn/Content/Tariffs/DataGridElement/index.tsx
+++ b/src/Components/LoggedIn/Content/Tariffs/DataGridElement/index.tsx
@@ -1,9 +1,17 @@
 import * as React from "react";
-import { Box, Button } from "@mui/material";
+import { Box, Button, Typography } from "@mui/material";
 import { DataGrid, GridColDef, GridSelectionModel, GridToolbar } from "@mui/x-data-grid";
 import { useDemoData } from "@mui/x-data-grid-generator";
 import useStore, { StoreState } from "../../../../../store";
 import { ArrayProps } from "../types";
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import Avatar from '@mui/material/Avatar';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import ListItemText from '@mui/material/ListItemText';
+import IconButton from '@mui/material/IconButton';
+import DeleteIcon from '@mui/icons-material/Delete';
 import theme from "../../../../../theme";
 
 
@@ -70,6 +78,9 @@ const rows = [
 //localStorage.setItem("tariffs", JSON.stringify(rows));
 
 const DataGridElement: React.FC<MWProps> = ({ openModal }) =>  {
+  let price = 0;
+  let prices = 0;
+
   const { data } = useDemoData({
     dataSet: "Commodity",
     rowLength: 10,
@@ -95,7 +106,9 @@ const DataGridElement: React.FC<MWProps> = ({ openModal }) =>  {
     }
   } );
 
-  let { selectedRowsData, selectedRowsDataSet } = useStore<StoreState>((state) => state);
+  localStorage.setItem("tariffs", JSON.stringify(tariffsArray));
+
+  const { selectedRowsData, selectedRowsDataSet } = useStore<StoreState>((state) => state);
   const onRowsSelectionHandler = ( ids:GridSelectionModel ) => {
     const result:Array<ArrayProps> = [];
     ids.forEach((id) => tariffsArray.forEach( (row) => { 
@@ -105,6 +118,16 @@ const DataGridElement: React.FC<MWProps> = ({ openModal }) =>  {
     selectedRowsDataSet( result );
   };
 
+  const { cartRowsData, cartRowsDataSet } = useStore<StoreState>((state) => state);
+  const handleToBasket = () => {
+    cartRowsDataSet( selectedRowsData );
+  }
+
+  const handleRemoveBasket = ( id:number ) => {
+    const cartFiltered = cartRowsData.filter( (row) => row.id != id );
+    cartRowsDataSet( cartFiltered );
+  }
+
   return (
     <Box style={{ width: "100%" }}>
       <Box style={{ height: 400 }}>
@@ -153,14 +176,123 @@ const DataGridElement: React.FC<MWProps> = ({ openModal }) =>  {
               height: "42px",
               fontWeight: "normal",
               fontSize: "17px",
-              marginTop: "25px",
-              marginBottom: "25px",
+              marginTop: "45px",
+              marginBottom: "15px",
               "&:hover": {
                 backgroundColor: theme.palette.grayMedium.main
               }
             }}>
               Пакетизировать
           </Button>
+
+          <Button 
+            variant = "contained"
+            onClick={ () => handleToBasket() }
+            sx={{
+              backgroundColor: theme.palette.menu.main,
+              width: "320px",
+              height: "42px",
+              fontWeight: "normal",
+              fontSize: "17px",
+              marginBottom: "45px",
+              "&:hover": {
+                backgroundColor: theme.palette.grayMedium.main
+              }
+            }}>
+              Сложить в корзину
+          </Button>
+        </Box>
+
+        <Box sx={{ 
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          paddingBottom: "45px"
+        }}>
+          <Typography id="transition-modal-title" variant="caption">
+            Корзина
+          </Typography>
+          
+          <List sx={{
+            width: "50%",
+            marginTop: "15px",
+            border: "1px solid",
+            borderColor: theme.palette.secondary.main
+          }}>
+            <ListItem>
+              <ListItemAvatar>
+                <Avatar sx={{ backgroundColor: theme.palette.content.main }}>
+                  <ShoppingCartIcon sx={{ 
+                    color: theme.palette.content.main,
+                    display: "none"
+                  }} />
+                </Avatar>
+              </ListItemAvatar>
+              <ListItemText
+                primary="Название тарифа"
+              />
+              <ListItemText
+                primary="Цена ( ₽ )"
+              />
+              <IconButton edge="end" aria-label="delete">
+                <DeleteIcon sx={{ 
+                  color: theme.palette.grayDisabled.main,
+                  display: "none"
+                }} />
+              </IconButton>
+            </ListItem>
+
+            { cartRowsData.map( (item) => {
+              if( item.type == "package" )  {
+                price = 0;
+
+                if( item.tariffs ) {
+                  item.tariffs.forEach( (tariff) => {
+                    price += tariff.price;
+                  } );
+                }
+              } else {
+                price = item.price;
+              }
+
+              prices += price;
+
+              return(
+                <ListItem key={ item.id }>
+                  <ListItemAvatar>
+                    <Avatar sx={{ backgroundColor: theme.palette.secondary.main }}>
+                      <ShoppingCartIcon sx={{ 
+                        color: theme.palette.content.main,
+                      }} />
+                    </Avatar>
+                  </ListItemAvatar>
+                  <ListItemText
+                    primary={ item.name }
+                  />
+                  <ListItemText
+                    primary={ price }
+                    sx={{ textAlign: "center" }}
+                  />
+                  <IconButton edge="end" aria-label="delete" onClick={ () => handleRemoveBasket( item.id ) }>
+                    <DeleteIcon sx={{ 
+                      color: theme.palette.secondary.main,
+                    }} />
+                  </IconButton>
+                </ListItem>
+              )
+            } ) }
+
+            <Typography id="transition-modal-title" variant="h6" sx={{ 
+              fontWeight: "normal",
+              textAlign: "center",
+              marginTop: "10px"
+            }}>
+              ИТОГО: &ensp; { prices } ₽
+            </Typography>
+
+            </List>
+
         </Box>
 
       </Box>
diff --git a/src/Components/LoggedIn/Content/Tariffs/index.tsx b/src/Components/LoggedIn/Content/Tariffs/index.tsx
index b608b00..35c46b0 100644
--- a/src/Components/LoggedIn/Content/Tariffs/index.tsx
+++ b/src/Components/LoggedIn/Content/Tariffs/index.tsx
@@ -7,7 +7,7 @@ import DataGridElement from "./DataGridElement";
 import ModalMini from "./ModalMini";
 import ModalPackage from "./ModalPackage";
 import { ArrayProps, Tariff } from "./types";
-import useStore from "../../../../store";
+import useStore, { StoreState } from "../../../../store";
 import theme from "../../../../theme";
 
 
diff --git a/src/store.ts b/src/store.ts
index 5d5902c..3e4ff16 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -7,7 +7,10 @@ const useStore = create<StoreState>((set) => ({
   tariffsArraySet: (array) => set({ tariffsArray: array }),
 
   selectedRowsData: [],
-  selectedRowsDataSet: (array) => set({ selectedRowsData: array })
+  selectedRowsDataSet: (array) => set({ selectedRowsData: array }),
+
+  cartRowsData: [],
+  cartRowsDataSet: (array) => set({ cartRowsData: array })
 }))
 
 export interface StoreState {
@@ -15,7 +18,10 @@ export interface StoreState {
   tariffsArraySet: (array:Array<ArrayProps>) => void,
 
   selectedRowsData: Array<ArrayProps>,
-  selectedRowsDataSet: (array:Array<ArrayProps>) => void
+  selectedRowsDataSet: (array:Array<ArrayProps>) => void,
+
+  cartRowsData: Array<ArrayProps>,
+  cartRowsDataSet: (array:Array<ArrayProps>) => void
 }