diff --git a/src/App.css b/src/App.css
index a936122..1495cb2 100644
--- a/src/App.css
+++ b/src/App.css
@@ -23,9 +23,9 @@ body.dark {
 }
 
 .title {
+  margin: 10px;
   text-align: center;
   color: #000000;
-  margin-bottom: 30px;
   font-size: 2.5rem;
 }
 
@@ -40,7 +40,7 @@ body.dark {
   background-color: #2a2a2a;
   padding: 20px;
   border-radius: 8px;
-  margin-bottom: 30px;
+  margin-bottom: 10px;
 }
 
 .main-input {
diff --git a/src/MainPage.tsx b/src/MainPage.tsx
index cd398e8..bc55283 100644
--- a/src/MainPage.tsx
+++ b/src/MainPage.tsx
@@ -1,10 +1,4 @@
-import React, {
-  useRef,
-  useState,
-  useEffect,
-  useCallback,
-  useContext,
-} from "react";
+import React, { useRef, useEffect, useContext } from "react";
 import {
   useParams,
   useSearchParams,
@@ -12,7 +6,6 @@ import {
   useNavigate,
 } from "react-router-dom";
 import "./App.css";
-import { PlanetApi } from "./PlanetFetch";
 import Planets from "./Planets";
 import Button from "./Button";
 import Input from "./Input";
@@ -24,23 +17,22 @@ import { useDispatch } from "react-redux";
 import { addItem, removeItem, stateItems } from "./store/selectedItemsSlice";
 import SelectedPlanets from "./SelectedPlanets/SelectedPlanets.tsx";
 import { useAppSelector } from "./hooks/hooks.ts";
+import { useGetPlanetsQuery } from "./PlanetRTKQuery";
+
 const planetsPerPage = 10;
 
 function MainPage(): React.ReactElement {
   const navigate = useNavigate();
   const { pageNumber } = useParams();
+  const currentPage = parseInt(pageNumber || "1", 10);
   const initialRender = useRef(true);
   const [searchParams] = useSearchParams();
   const searchQuery = searchParams.get("search") || "";
-  const currentPage = parseInt(pageNumber || "1", 10);
   const localStorageKey: string = "starWarsQuery";
   const [inputValue, setInputValue] = useLocalStorage(
     localStorageKey,
     searchQuery,
   );
-  const [searchPlanets, setPlanets] = useState<PlanetsListItem[]>([]);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [totalPlanets, setTotalPlanets] = useState(0);
 
   const { theme } = useContext(ThemeContext) || {};
 
@@ -48,6 +40,14 @@ function MainPage(): React.ReactElement {
 
   const selectedItems = useAppSelector(stateItems);
 
+  const {
+    data: { planets = [], total_records = 0 } = {},
+    error,
+    isLoading,
+    isFetching,
+    refetch,
+  } = useGetPlanetsQuery({ page: currentPage, search: searchQuery });
+
   const toggleItemSelection = (item: PlanetsListItem) => {
     if (selectedItems.some((selected) => selected.uid === item.uid)) {
       dispatch(removeItem(item.uid));
@@ -56,32 +56,6 @@ function MainPage(): React.ReactElement {
     }
   };
 
-  const getPlanets = useCallback(async () => {
-    let errorMessage = "Unknown error";
-    setIsLoading(true);
-    setError(null);
-    try {
-      const planets = await PlanetApi.fetchPlanets(searchQuery, currentPage);
-      const firstPlanetsIndex = (currentPage - 1) * planetsPerPage;
-      const lastPlanetsIndex = firstPlanetsIndex + planetsPerPage;
-      const currentPlanets = planets.planets.slice(
-        firstPlanetsIndex,
-        lastPlanetsIndex,
-      );
-      setTotalPlanets(planets.count);
-      setPlanets(currentPlanets);
-    } catch (error) {
-      if (error instanceof Error) {
-        errorMessage = error.message;
-      } else if (typeof error === "string") {
-        errorMessage = error;
-      }
-      setError(errorMessage);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [currentPage, searchQuery]);
-
   useEffect(() => {
     if (initialRender.current) {
       initialRender.current = false;
@@ -91,12 +65,6 @@ function MainPage(): React.ReactElement {
     }
   }, [inputValue, searchQuery, setInputValue]);
 
-  useEffect(() => {
-    getPlanets();
-  }, [getPlanets, searchQuery]);
-
-  const [error, setError] = useState<string | null>(null);
-
   function handleSearch() {
     navigate(`/list/1?search=${encodeURIComponent(inputValue)}`);
   }
@@ -108,15 +76,17 @@ function MainPage(): React.ReactElement {
   return (
     <>
       <h1 className={`title ${theme}`}>Star Wars Planets</h1>
-      {error ? <div data-testid="error-message">{error}</div> : null}
+      {error ? (
+        <div data-testid="error-message">{JSON.stringify(error)}</div>
+      ) : null}
       <div className={`search-container ${theme}`}>
         <Input value={inputValue} onChange={handleInputChange} />
         <Button onClick={handleSearch}>{"Search"}</Button>
       </div>
       <div className="main-container">
         <Planets
-          searchPlanets={searchPlanets}
-          isLoading={isLoading}
+          searchPlanets={planets}
+          isLoading={isLoading || isFetching}
           inputValue={inputValue}
           onItemSelect={toggleItemSelection}
           selectedItems={selectedItems}
@@ -126,9 +96,10 @@ function MainPage(): React.ReactElement {
       {isLoading ? null : (
         <Pagination
           planetsPerPage={planetsPerPage}
-          totalPlanets={totalPlanets}
+          totalPlanets={total_records}
           currentPage={currentPage}
           searchQuery={searchQuery}
+          refetch={refetch}
         ></Pagination>
       )}
       {!isLoading && <SelectedPlanets />}
diff --git a/src/Pagination.css b/src/Pagination.css
index 089db56..5de3264 100644
--- a/src/Pagination.css
+++ b/src/Pagination.css
@@ -1,7 +1,7 @@
 .pagination-container {
   display: flex;
   gap: 8px;
-  justify-content: center;
+  justify-content: flex-end;
   align-items: center;
   background-color: #000;
   padding: 16px;
@@ -31,3 +31,23 @@
   background-color: #a0910f;
   color: #000;
 }
+
+.pagination-container button{
+  margin-left:20%;
+  right: 0;
+  color: #a0910f;
+  background-color: transparent;
+  border: 1px solid #a0910f;
+  border-radius: 4px;
+  padding: 8px 12px;
+  cursor: pointer;
+  min-width: 36px;
+  text-decoration: none;
+  text-align: center;
+  font-weight: bold;
+}
+
+.pagination-container button:hover {
+  background-color: #a0910f;
+  color: #000;
+}
diff --git a/src/Pagination.tsx b/src/Pagination.tsx
index 7de7a52..0f91cac 100644
--- a/src/Pagination.tsx
+++ b/src/Pagination.tsx
@@ -1,12 +1,14 @@
 import { NavLink } from "react-router-dom";
 import "./Pagination.css";
 import { useParams } from "react-router-dom";
+import Button from "./Button";
 
 interface PaginationProps {
   planetsPerPage: number;
   totalPlanets: number;
   currentPage: number;
   searchQuery: string;
+  refetch: () => object;
 }
 
 export default function Pagination({
@@ -14,6 +16,7 @@ export default function Pagination({
   totalPlanets,
   currentPage,
   searchQuery,
+  refetch,
 }: PaginationProps): React.ReactElement {
   const pageNumbers = [];
   const { planetId } = useParams();
@@ -32,6 +35,7 @@ export default function Pagination({
           {number}
         </NavLink>
       ))}
+      <Button onClick={() => refetch()}>{"Refetch"}</Button>
     </div>
   );
 }
diff --git a/src/PlanetCard.tsx b/src/PlanetCard.tsx
index 85e9a30..b11cd7b 100644
--- a/src/PlanetCard.tsx
+++ b/src/PlanetCard.tsx
@@ -1,15 +1,8 @@
-import React, { useEffect, useState } from "react";
-import type { PlanetProperties } from "./types";
 import Spinner from "./Spinner";
-import { PlanetApi } from "./PlanetFetch";
 import { useParams, useNavigate } from "react-router-dom";
+import { useGetPlanetDetailsQuery } from "./PlanetRTKQuery";
 
 function PlanetCard(): React.ReactElement {
-  const [error, setError] = useState<string | null>(null);
-  const [isLoadingDetail, setIsLoadingDetail] = useState<boolean>(false);
-  const [selectedPlanet, setSelectedPlanet] = useState<PlanetProperties | null>(
-    null,
-  );
   const { planetId, pageNumber } = useParams();
   const navigate = useNavigate();
 
@@ -17,36 +10,22 @@ function PlanetCard(): React.ReactElement {
     navigate(pageNumber ? `/list/${pageNumber}` : "/");
   };
 
-  useEffect(() => {
-    const getPlanetSelect = async () => {
-      let errorMessage = "Unknown error";
-      try {
-        if (!planetId) return null;
-        setIsLoadingDetail(true);
-        const planetUrl = `https://swapi.tech/api/planets/${planetId}`;
-        const planetDetails = await PlanetApi.fetchPlanetDetail(planetUrl);
-        setSelectedPlanet(planetDetails);
-      } catch (error) {
-        if (error instanceof Error) {
-          errorMessage = error.message;
-        } else if (typeof error === "string") {
-          errorMessage = error;
-        }
-        setError(errorMessage);
-      } finally {
-        setIsLoadingDetail(false);
-      }
-    };
-    getPlanetSelect();
-  }, [planetId]);
+  const {
+    data: selectedPlanet,
+    error,
+    isLoading,
+    isFetching,
+  } = useGetPlanetDetailsQuery(planetId);
 
   return (
     <div className="planet-details">
-      {isLoadingDetail ? (
+      {isLoading || isFetching ? (
         <Spinner />
       ) : (
         <>
-          {error ? <div data-testid="error-message">{error}</div> : null}
+          {error ? (
+            <div data-testid="error-message">{JSON.stringify(error)}</div>
+          ) : null}
           {selectedPlanet && (
             <>
               <button className="close-button" onClick={handleClose}>
diff --git a/src/PlanetFetch.ts b/src/PlanetFetch.ts
deleted file mode 100644
index fd3f290..0000000
--- a/src/PlanetFetch.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import type { PlanetProperties, PlanetsListItem } from "./types";
-
-interface PlanetsListResponse {
-  results: PlanetsListItem[];
-}
-
-interface PlanetDetailsResponse {
-  result: {
-    properties: PlanetProperties;
-    uid: string;
-  };
-}
-
-interface PlanetDetailsResponseSearch {
-  result: [];
-}
-
-async function fetchData<T>(searchQuery: string): Promise<T> {
-  const response = await fetch(searchQuery);
-  if (!response.ok) {
-    throw new Error("Error in request");
-  }
-  return response.json();
-}
-const ArrayToPlanet1 = (data: {
-  uid: string;
-  name: string;
-  url: string;
-}): PlanetsListItem => {
-  return {
-    uid: data.uid,
-    name: data.name,
-    url: data.url,
-  };
-};
-
-const ArrayToPlanet2 = (data: {
-  properties: {
-    uid: string;
-    name: string;
-    url: string;
-  };
-}): PlanetsListItem => {
-  console.log(data.properties);
-  return {
-    uid: data.properties.uid,
-    name: data.properties.name,
-    url: data.properties.url,
-  };
-};
-
-const ToPlanet = (data: { properties: PlanetProperties }): PlanetProperties => {
-  return {
-    name: data.properties.name,
-    diameter: data.properties.diameter,
-    rotation_period: data.properties.rotation_period,
-    orbital_period: data.properties.orbital_period,
-    population: data.properties.population,
-    climate: data.properties.climate,
-    terrain: data.properties.terrain,
-    gravity: data.properties.gravity,
-  };
-};
-
-export const PlanetApi = {
-  fetchPlanets: async function (
-    searchQuery: string = "",
-    currentPage: number = 1,
-  ) {
-    let url: string;
-    let planets = [];
-    let count;
-    if (searchQuery) {
-      url =
-        "https://swapi.tech/api/planets" +
-        "?name=" +
-        encodeURIComponent(searchQuery.trim());
-      const listData = await fetchData<PlanetDetailsResponseSearch>(url);
-      planets = listData.result.map((planet) => ArrayToPlanet2(planet));
-      count = planets.length;
-    } else {
-      const listData = await fetchData<PlanetsListResponse>(
-        `https://swapi.tech/api/planets?page=${currentPage}&limit=NaN`,
-      );
-      planets = listData.results.map((detail) => ArrayToPlanet1(detail));
-      count = planets.length;
-    }
-    return { planets, count };
-  },
-
-  fetchPlanetDetail: async function (planet_url: string = "") {
-    const planetDetails = await fetchData<PlanetDetailsResponse>(planet_url);
-    return ToPlanet(planetDetails.result);
-  },
-};
diff --git a/src/PlanetRTKQuery.ts b/src/PlanetRTKQuery.ts
new file mode 100644
index 0000000..16e5ca5
--- /dev/null
+++ b/src/PlanetRTKQuery.ts
@@ -0,0 +1,100 @@
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import type { PlanetsListItem, PlanetProperties } from "./types";
+
+interface Response {
+  results: PlanetsListItem[];
+  total_pages: number;
+  total_records: number;
+}
+
+interface PlanetDetailsResponseSearch {
+  result: {
+    properties: PlanetProperties;
+    uid: string;
+  }[];
+}
+
+export const planetsApi = createApi({
+  reducerPath: "planetsApi",
+  baseQuery: fetchBaseQuery({ baseUrl: "https://swapi.tech/api/" }),
+  endpoints: (builder) => ({
+    getPlanets: builder.query<
+      {
+        planets: PlanetsListItem[];
+        total_pages: number;
+        total_records: number;
+      },
+      { page?: number; search?: string }
+    >({
+      query: ({ page = 1, search = "" }) => {
+        if (search) {
+          return {
+            url: `planets`,
+            params: { name: search },
+          };
+        }
+        return {
+          url: `planets`,
+          params: { page: page, limit: 10 },
+        };
+      },
+      transformResponse: (
+        response: Response | PlanetDetailsResponseSearch,
+        _meta,
+        arg,
+      ): {
+        planets: PlanetsListItem[];
+        total_pages: number;
+        total_records: number;
+      } => {
+        let allPlanets: PlanetsListItem[];
+        let total_records: number;
+        let total_pages: number;
+        if ("results" in response) {
+          allPlanets = response.results.map((planet) => ({
+            uid: planet.uid,
+            name: planet.name,
+            url: planet.url,
+          }));
+          total_records = response.total_records;
+          total_pages = response.total_pages;
+        } else {
+          allPlanets = response.result.map((item) => ({
+            uid: item.uid,
+            name: item.properties.name,
+            url: item.properties.url,
+          }));
+          total_records = allPlanets.length;
+          total_pages = Math.ceil(total_records / 10);
+        }
+        if (arg.search && arg.page) {
+          const firstPlanetsIndex = (arg.page - 1 || 0) * 10;
+          const lastPlanetsIndex = firstPlanetsIndex + 10;
+          const planets = allPlanets.slice(firstPlanetsIndex, lastPlanetsIndex);
+          return {
+            planets: planets,
+            total_pages: total_pages,
+            total_records: allPlanets.length,
+          };
+        } else {
+          return {
+            planets: allPlanets,
+            total_pages: total_pages,
+            total_records: total_records,
+          };
+        }
+      },
+    }),
+
+    getPlanetDetails: builder.query<PlanetProperties, string | undefined>({
+      query: (planetId) => `planets/${planetId}`,
+      transformResponse: (response: {
+        result: { properties: PlanetProperties };
+      }) => {
+        return response.result.properties;
+      },
+    }),
+  }),
+});
+
+export const { useGetPlanetsQuery, useGetPlanetDetailsQuery } = planetsApi;
diff --git a/src/SelectedPlanets/SelectedPlanets.css b/src/SelectedPlanets/SelectedPlanets.css
index bd93acb..675d9a0 100644
--- a/src/SelectedPlanets/SelectedPlanets.css
+++ b/src/SelectedPlanets/SelectedPlanets.css
@@ -10,7 +10,10 @@
   max-height: 50vh;
   transition: bottom 0.3s ease;
 }
-
+.selected-planets h3{
+  margin: 1px;
+  margin-bottom: 10px;
+}
 .selected-planets.visible {
   bottom: 0px;
 }
diff --git a/src/__tests__/Card.test.tsx b/src/__tests__/Card.test.tsx
deleted file mode 100644
index b4699ab..0000000
--- a/src/__tests__/Card.test.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { describe, test, expect, vi } from "vitest";
-import { render, screen, waitFor } from "@testing-library/react";
-import PlanetCard from "../PlanetCard";
-import { PlanetApi } from "../PlanetFetch";
-import { BrowserRouter as Router } from "react-router-dom";
-import { Provider } from "react-redux";
-import { store } from "../store/store";
-import type { Params } from "react-router-dom";
-
-vi.mock("../PlanetFetch", () => ({
-  PlanetApi: {
-    fetchPlanetDetail: vi.fn(),
-  },
-}));
-
-vi.mock("react-router-dom", async (importOriginal) => {
-  const original = await importOriginal<typeof import("react-router-dom")>();
-  return {
-    ...original,
-    useParams: (): Readonly<Params<string>> => ({ planetId: "2" }),
-  };
-});
-
-describe("Planet Cards Rendering", () => {
-  test("should render 1 planet cards", async () => {
-    const mockPlanetData = {
-      name: "Alderaan",
-      diameter: "12500",
-      climate: "temperate",
-      population: "2000000000",
-      rotation_period: "24",
-      orbital_period: "364",
-      gravity: "1 standard",
-      terrain: "grasslands, mountains",
-    };
-
-    vi.mocked(PlanetApi.fetchPlanetDetail).mockResolvedValue(mockPlanetData);
-    render(
-      <Provider store={store}>
-        <Router>
-          <PlanetCard />
-        </Router>
-      </Provider>,
-    );
-    await waitFor(() => {
-      expect(
-        screen.getByRole("heading", { name: /Alderaan/ }),
-      ).toBeInTheDocument();
-    });
-  });
-});
diff --git a/src/__tests__/CardList.test.tsx b/src/__tests__/CardList.test.tsx
deleted file mode 100644
index 69fb0a4..0000000
--- a/src/__tests__/CardList.test.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { describe, test, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import MainPage from "../MainPage";
-import { PlanetApi } from "../PlanetFetch";
-import { BrowserRouter as Router } from "react-router-dom";
-import type { PlanetsListItem } from "../types";
-import { Provider } from "react-redux";
-import { store } from "../store/store";
-
-vi.mock("../PlanetFetch", () => ({
-  PlanetApi: {
-    fetchPlanets: vi.fn(),
-  },
-}));
-
-interface fetchData {
-  planets: PlanetsListItem[];
-  count: number;
-}
-
-const mockPlanet: fetchData = {
-  planets: [
-    {
-      name: "Tatooine",
-      url: "",
-      uid: "1",
-    },
-  ],
-  count: 1,
-};
-
-describe("Planet Cards Rendering", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  test("should render 1 planet cards", async () => {
-    const user = userEvent.setup();
-    vi.mocked(PlanetApi.fetchPlanets).mockResolvedValue(mockPlanet);
-    render(
-      <Provider store={store}>
-        <Router>
-          <MainPage />
-        </Router>
-      </Provider>,
-    );
-
-    const inputElement = screen.getByRole("textbox");
-    await user.type(inputElement, "Tatooine");
-    const buttonElement = screen.getByRole("button", { name: /Search/ });
-    expect(inputElement).toHaveValue("Tatooine");
-    await user.click(buttonElement);
-
-    const cards = await screen.findAllByRole("article");
-    expect(cards).toHaveLength(1);
-    expect(screen.getByRole("article")).toBeInTheDocument();
-    expect(screen.getByText(mockPlanet.planets[0].name)).toBeInTheDocument();
-  });
-
-  test("should render all planet cards", async () => {
-    vi.mocked(PlanetApi.fetchPlanets).mockResolvedValue(mockPlanet);
-    render(
-      <Provider store={store}>
-        <Router>
-          <MainPage />
-        </Router>
-      </Provider>,
-    );
-    expect(await screen.findByRole("article")).toBeInTheDocument();
-    expect(screen.getByText(mockPlanet.planets[0].name)).toBeInTheDocument();
-  });
-  test("should handle fetch errors", async () => {
-    vi.mocked(PlanetApi.fetchPlanets).mockRejectedValueOnce(
-      new Error("Error in request"),
-    );
-    render(
-      <Provider store={store}>
-        <Router>
-          <MainPage />
-        </Router>
-      </Provider>,
-    );
-
-    const error = await screen.findByTestId("error-message");
-    expect(error).toBeInTheDocument();
-  });
-});
diff --git a/src/store/store.ts b/src/store/store.ts
index eb02d11..78ecac6 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -1,11 +1,16 @@
 import { configureStore } from "@reduxjs/toolkit";
 import selectedItemsReducer from "./selectedItemsSlice";
+import { planetsApi } from "../PlanetRTKQuery";
 
 export const store = configureStore({
   reducer: {
     selectedItems: selectedItemsReducer,
+    [planetsApi.reducerPath]: planetsApi.reducer,
   },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(planetsApi.middleware),
 });
+
 export type AppStore = typeof store;
 export type RootState = ReturnType<AppStore["getState"]>;
 export type AppDispatch = AppStore["dispatch"];
diff --git a/src/types.ts b/src/types.ts
index 89e5bd8..550148c 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,5 +1,5 @@
 export interface PlanetProperties {
-  name?: string;
+  name: string;
   diameter: string;
   rotation_period: string;
   orbital_period: string;
@@ -7,6 +7,7 @@ export interface PlanetProperties {
   climate: string;
   terrain: string;
   gravity: string;
+  url: string;
 }
 
 export interface Planet {