diff --git a/frontend/src/components/SearchPage.tsx b/frontend/src/components/SearchPage.tsx
index 51f56d5e730033e970590cd22a7361b1d9e2cca5..c0742a4ece694e21a3e7b252859ca911018fc31b 100644
--- a/frontend/src/components/SearchPage.tsx
+++ b/frontend/src/components/SearchPage.tsx
@@ -1,26 +1,21 @@
-import { AudioOutlined } from "@ant-design/icons";
 import { SearchOutlined } from "@ant-design/icons";
 import {
   Button,
-  Card,
   Col,
   Divider,
   Form,
   Input,
-  List,
   Row,
   Select,
   Slider,
   Space,
   Table,
-  Typography,
 } from "antd";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import axiosConfig from "../axios-config";
-import { cardsDataExample, CategoryIO, DirectorIO, MovieIO } from "./Preview";
+import { CategoryIO, DirectorIO, MovieIO } from "./Preview";
 
-const { Search } = Input;
 const { Option } = Select;
 
 //TODO replace with result of input search and API call
@@ -162,26 +157,18 @@ export const SearchPage = () => {
       sorter: (a: MovieIO, b: MovieIO) => {
         const first = a.publishedAt.split(".").reverse();
         const second = b.publishedAt.split(".").reverse();
-        if (first[0] > second[0]) {
-          return 1;
-        }
-        if (first[0] < second[0]) {
-          return -1;
-        }
 
-        if (first[1] > second[1]) {
-          return 1;
-        }
-        if (first[1] < second[1]) {
-          return -1;
-        }
+        // year
+        if (first[0] > second[0]) {return 1;}
+        if (first[0] < second[0]) {return -1;}
 
-        if (first[2] > second[2]) {
-          return 1;
-        }
-        if (first[2] < second[2]) {
-          return -1;
-        }
+        // month
+        if (first[1] > second[1]) {return 1;}
+        if (first[1] < second[1]) {return -1;}
+
+        // day
+        if (first[2] > second[2]) {return 1;}
+        if (first[2] < second[2]) {return -1;}
         return 0;
       },
     },
@@ -194,20 +181,12 @@ export const SearchPage = () => {
       title: "Director",
       dataIndex: ["director", "surname"],
       sorter: (a: MovieIO, b: MovieIO) => {
-        //surname has higher priority
-        if (a.director.surname < b.director.surname) {
-          return -1;
-        }
-        if (a.director.surname > b.director.surname) {
-          return 1;
-        }
+        //surname has higher priority than name
+        if (a.director.surname < b.director.surname) {return -1;}
+        if (a.director.surname > b.director.surname) {return 1;}
 
-        if (a.director.name < b.director.name) {
-          return -1;
-        }
-        if (a.director.name > b.director.name) {
-          return 1;
-        }
+        if (a.director.name < b.director.name) {return -1;}
+        if (a.director.name > b.director.name) {return 1;}
         return 0;
       },
       render: (text: string, record: MovieIO) => (
@@ -273,7 +252,7 @@ export const SearchPage = () => {
               <Select
                 showSearch
                 style={{ width: "100%" }}
-                placeholder="Search to Select"
+                placeholder="Search or Select"
                 optionFilterProp="children"
                 filterOption={(input, option) =>
                   (option!.children as unknown as string).includes(input)
@@ -287,7 +266,11 @@ export const SearchPage = () => {
                 }
               >
                 {categories.map((category: CategoryIO) => {
-                  return <Option value={category.id}>{category.name}</Option>;
+                  return (
+                    <Option value={category.id}>
+                      {category.name}
+                    </Option>
+                  );
                 })}
               </Select>
               </Form.Item>
@@ -297,7 +280,7 @@ export const SearchPage = () => {
               <Select
                 showSearch
                 style={{ width: "100%" }}
-                placeholder="Search to Select"
+                placeholder="Search or Select"
                 optionFilterProp="children"
                 filterOption={(input, option) =>
                   (option!.children as unknown as string).includes(input)
@@ -313,7 +296,7 @@ export const SearchPage = () => {
                 {directors.map((director: DirectorIO) => {
                   return (
                     <Option value={director.id}>
-                      {director.name + " " + director.surname}
+                      {`${director.name} ${director.surname}`}
                     </Option>
                   );
                 })}