diff --git a/src/components/CarItem/CarItem.jsx b/src/components/CarItem/CarItem.jsx
new file mode 100644
index 0000000..41cde26
--- /dev/null
+++ b/src/components/CarItem/CarItem.jsx
@@ -0,0 +1,20 @@
+
+
+export const CarItem = ({car}) => {
+    const { id, make, model, year, img, rentalPrice, rentalCompany, type, fudnctionalities, address } = car;
+
+    return (
+        <>
+          <li key={id}>
+                    <img src={img ?
+                        img :
+                        'https://www.braasco.com//ASSETS/IMAGES/ITEMS/ZOOM/no_image.jpeg'}
+                        alt={make} width="200" height="200" />
+                    <div>
+                        <h3>{make}</h3>
+                        <p>{model}</p>
+                    </div>
+                </li>  
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/components/CarsList/CarsList.jsx b/src/components/CarsList/CarsList.jsx
index 4b3dfc4..4ea8ef0 100644
--- a/src/components/CarsList/CarsList.jsx
+++ b/src/components/CarsList/CarsList.jsx
@@ -1,6 +1,14 @@
+import { CarItem } from "components/CarItem/CarItem";
+import { useSelector } from "react-redux";
+import { selectCars } from "redux/selectors";
+
 export const CarsList = () => {
+    const cars = useSelector(selectCars);
+console.log('cars in List', cars);
+
     return (
-        <>
-        </>
+        <ul>
+            {cars?.map((car) => <CarItem car={car} key={car.id}/>)}
+        </ul>
     )
 }
\ No newline at end of file
diff --git a/src/components/Filters/Filters.jsx b/src/components/Filters/Filters.jsx
index d37924f..3825a72 100644
--- a/src/components/Filters/Filters.jsx
+++ b/src/components/Filters/Filters.jsx
@@ -3,20 +3,26 @@ export const Filters = () => {
         <>
             <form>
                 <label>Car brand
-                    <select name="brand" >
-                        <option value="">Please choose car brand</option>
+                    <select name="brand">
+                        {/* <option value="">Please choose car brand</option> */}
+                        <option value=""
+                            defaultValue="Brand"
+                            // selected="selected"
+                            // hidden="hidden"
+                            // disabled
+                        >Please choose car brand</option>
                         <option value="xs">Extra Small</option>
                         <option value="s">Small</option>
-                        <option value="m" selected>Medium</option>
+                        <option value="m">Medium</option>
                         <option value="l">Large</option>
                     </select>
                 </label>
                 <label>Price/ 1 hour
                     <select name="price">
-                        <option value="">To   $</option>
+                        <option value="" defaultValue="Brand">To   $</option>
                         <option value="xs">Extra Small</option>
                         <option value="s">Small</option>
-                        <option value="m" selected>Medium</option>
+                        <option value="m">Medium</option>
                         <option value="l">Large</option>
                     </select>
                 </label>
diff --git a/src/pages/Catalog.jsx b/src/pages/Catalog.jsx
index 438b5aa..572c1bc 100644
--- a/src/pages/Catalog.jsx
+++ b/src/pages/Catalog.jsx
@@ -1,11 +1,31 @@
+import { Loader } from "Loader/Loader";
 import { CarsList } from "components/CarsList/CarsList";
 import { Filters } from "components/Filters/Filters";
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { getCarsThunk } from "redux/cars/fetchCar";
+import { selectCars, selectIsLoading } from "redux/selectors";
 
 const Catalog = () => {
+    const cars = useSelector(selectCars);
+    const isLoading = useSelector(selectIsLoading);
+    const dispatch = useDispatch();
+    console.log('cars', cars);
+    console.log(cars.length);
+
+    // useEffect(() => {
+    //     setLoad(false);
+    // }, [])
+
+    useEffect(() => {
+        dispatch(getCarsThunk())
+    }, [dispatch]);
+
     return (
         <>
-            <Filters/>
-            <CarsList />
+            <Filters />
+            {isLoading && <Loader/>}
+            {(cars?.length > 0) && <CarsList />}
         </>
     )
 }
diff --git a/src/redux/cars/carsSlice.js b/src/redux/cars/carsSlice.js
index 1d328d3..afbd3d5 100644
--- a/src/redux/cars/carsSlice.js
+++ b/src/redux/cars/carsSlice.js
@@ -25,7 +25,7 @@ const arrOfActs = [getCarsThunk];
 const addStatusToActs = status =>
     arrOfActs.map((el) => el[status]);
 
-export const carsSlice = createSlice({
+const carsSlice = createSlice({
     name: 'cars',
     initialState: carsInitialState,
     extraReducers: builder => {
@@ -50,3 +50,5 @@ export const carsSlice = createSlice({
             .addMatcher(isAnyOf(...addStatusToActs('rejected')), onRejected)
     }
 });
+
+export const carsReducer = carsSlice.reducer;
diff --git a/src/redux/selectors.js b/src/redux/selectors.js
index e69de29..a819b3a 100644
--- a/src/redux/selectors.js
+++ b/src/redux/selectors.js
@@ -0,0 +1,3 @@
+export const selectCars = state => state.cars.cars;
+export const selectIsLoading = state => state.cars.isLoading;
+export const selectError = state => state.cars.error;
diff --git a/src/redux/store.js b/src/redux/store.js
index 721f6c6..95dc5c5 100644
--- a/src/redux/store.js
+++ b/src/redux/store.js
@@ -1,10 +1,10 @@
 import { configureStore } from '@reduxjs/toolkit'
+import { carsReducer } from './cars/carsSlice';
 // import { filterSlice } from './filterSlice'
-// import { phoneBookSlice } from './phoneBook/phoneBookSlice'
 
 export const store = configureStore({
     reducer: {
-    //     phoneBook: phoneBookSlice.reducer,
+        cars: carsReducer,
     //     filter: filterSlice.reducer,
     },
 });
\ No newline at end of file