diff --git a/frontend/src/components/SearchPage.tsx b/frontend/src/components/SearchPage.tsx
index f95dc3d88042e35c361b525c1bf161adcb0e5905..dd869d9dc4b9d55a21e6ff90bcb58454f52bbcef 100644
--- a/frontend/src/components/SearchPage.tsx
+++ b/frontend/src/components/SearchPage.tsx
@@ -15,8 +15,9 @@ import {
   Table,
   Typography,
 } from "antd";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
+import axiosConfig from "../axios-config";
 import { cardsDataExample, CategoryIO, DirectorIO, MovieIO } from "./Preview";
 
 const { Search } = Input;
@@ -58,50 +59,6 @@ const resultsExample: MovieIO[] = [
   },
 ];
 
-//replace with api call only once
-const categoriesList: CategoryIO[] = [
-  {
-    id: "123",
-    name: "Horror",
-    movies: [],
-  },
-  {
-    id: "1231",
-    name: "Comedy",
-    movies: [],
-  },
-  {
-    id: "1232",
-    name: "Drama",
-    movies: [],
-  },
-  {
-    id: "1234",
-    name: "Romcom",
-    movies: [],
-  },
-  {
-    id: "1235",
-    name: "Western",
-    movies: [],
-  },
-  {
-    id: "1236",
-    name: "Documentary",
-    movies: [],
-  },
-  {
-    id: "1237",
-    name: "Adam Sandler",
-    movies: [],
-  },
-  {
-    id: "1238",
-    name: "Czech",
-    movies: [],
-  },
-];
-
 //replace with api call only once
 const directorsList: DirectorIO[] = [
   {
@@ -172,6 +129,21 @@ export const SearchPage = () => {
 
   const [form] = Form.useForm();
 
+  const [categories, setCategories] = useState<CategoryIO[]>([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await axiosConfig.get<CategoryIO[]>('/categories');
+        setCategories([ ...response.data ]);
+      } catch {
+
+      }
+    };
+
+    void fetchData();
+  }, []);
+
   // here will be API call for search on BE, everything needed is in values
   const onSubmit = (values: any) => {
     alert(JSON.stringify(values));
@@ -350,8 +322,8 @@ export const SearchPage = () => {
                     )
                 }
               >
-                {categoriesList.map((cat: CategoryIO) => {
-                  return <Option value={cat.id}>{cat.name}</Option>;
+                {categories.map((category: CategoryIO) => {
+                  return <Option value={category.id}>{category.name}</Option>;
                 })}
               </Select>
               </Form.Item>