diff --git a/src/components/Message.tsx b/src/components/Message.tsx
index 39ccf7e..291d09a 100644
--- a/src/components/Message.tsx
+++ b/src/components/Message.tsx
@@ -1,7 +1,7 @@
 import axios from "axios";
 import { useCallback, useEffect, useState } from "react";
 import { usePathname } from "next/navigation";
-import { XMarkIcon } from "@heroicons/react/24/outline";
+import { ArrowRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
 
 const MessageType: {
   [key in MessageType]: {
@@ -85,22 +85,7 @@ export default function Message() {
               href={message?.redirectUrl}
               className="mt-2 md:mt-0 inline-flex ml-3 items-center justify-center px-3 py-2 me-2 text-xs font-medium text-white rounded-lg bg-[#321c21] hover:bg-[#480e0c] focus:ring-4 focus:ring-red-300 dark:hover:bg-red-500 dark:bg-red-400 transition-all focus:outline-none dark:focus:ring-red-800"
             >
-              Przejdź{" "}
-              <svg
-                className="w-3 h-3 ms-2 rtl:rotate-180"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 14 10"
-              >
-                <path
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M1 5h12m0 0L9 1m4 4L9 9"
-                />
-              </svg>
+              Przejdź <ArrowRightIcon className="w-3 h-3 ms-2 rtl:rotate-180" />
             </a>
           )}
         </div>
diff --git a/src/components/Substitutions/Content.tsx b/src/components/Substitutions/Content.tsx
index e47bdc5..f946280 100644
--- a/src/components/Substitutions/Content.tsx
+++ b/src/components/Substitutions/Content.tsx
@@ -1,3 +1,9 @@
+import {
+  CheckIcon,
+  ClipboardIcon,
+  FunnelIcon,
+  XMarkIcon,
+} from "@heroicons/react/24/outline";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
@@ -71,49 +77,16 @@ function Content({ props, checkedTeachers, checkedBranches }) {
                     {(filtersTeachers?.length > 0 ||
                       filtersBranches?.length > 0) && (
                       <>
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 512 512"
-                          fill="currentColor"
-                          className="w-4 h-4"
-                        >
-                          <path d="M3.9 54.9C10.5 40.9 24.5 32 40 32H472c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9V448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6V320.9L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z" />
-                        </svg>
+                        <FunnelIcon className="w-4 h-4" />
                         <p className="mr-2">Filtry: </p>
                         <button
                           onClick={handleShare}
                           className="cursor-pointer justify-center inline-flex items-center transition-all px-2 py-1 mr-2 text-sm font-medium text-red-900 bg-red-300 rounded dark:bg-blue-300 dark:text-blue-900 "
                         >
                           {isCopied ? (
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              strokeWidth="1.5"
-                              stroke="currentColor"
-                              className="w-5 h-5"
-                            >
-                              <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                d="M4.5 12.75l6 6 9-13.5"
-                              />
-                            </svg>
+                            <CheckIcon className="w-5 h-5" />
                           ) : (
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              strokeWidth="1.5"
-                              stroke="currentColor"
-                              className="w-5 h-5"
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
-                              />
-                            </svg>
+                            <ClipboardIcon className="w-5 h-5" />
                           )}
                         </button>
 
@@ -130,20 +103,7 @@ function Content({ props, checkedTeachers, checkedBranches }) {
                           className="cursor-pointer justify-center inline-flex items-center transition-all px-2 py-1 mr-2 text-sm font-medium text-red-800 bg-red-100 rounded dark:bg-blue-100 dark:text-blue-800 "
                         >
                           Wyczyść filtry
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            strokeWidth="1.5"
-                            stroke="currentColor"
-                            className="w-4 h-4"
-                          >
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              d="M6 18L18 6M6 6l12 12"
-                            />
-                          </svg>
+                          <XMarkIcon className="w-4 h-4 ml-1" />
                         </button>
                         {Object.entries({
                           ...checkedTeachers,
diff --git a/src/components/Substitutions/DropdownBranch.tsx b/src/components/Substitutions/DropdownBranch.tsx
index 9950893..88b807a 100644
--- a/src/components/Substitutions/DropdownBranch.tsx
+++ b/src/components/Substitutions/DropdownBranch.tsx
@@ -2,6 +2,7 @@ import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import { getQueryItems } from "@/utils/getQueryItems";
 import { handleCheckboxChange } from "@/utils/handleCheckboxChange";
+import { XMarkIcon } from "@heroicons/react/24/outline";
 
 function DropdownBranch({ props, onCheckboxChangeBranch }) {
   const [searchBranch, setSearchBranch] = useState("");
@@ -33,19 +34,7 @@ function DropdownBranch({ props, onCheckboxChangeBranch }) {
       <div className="p-3">
         <div className="relative">
           <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-            <svg
-              className="w-5 h-5 text-gray-500 dark:text-gray-300"
-              aria-hidden="true"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                fillRule="evenodd"
-                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-                clipRule="evenodd"
-              ></path>
-            </svg>
+            <XMarkIcon className="w-5 h-5 text-gray-500 dark:text-gray-300" />
           </div>
           <input
             type="text"
diff --git a/src/components/Substitutions/DropdownTeachers.tsx b/src/components/Substitutions/DropdownTeachers.tsx
index 6ef8eaa..b0f1159 100644
--- a/src/components/Substitutions/DropdownTeachers.tsx
+++ b/src/components/Substitutions/DropdownTeachers.tsx
@@ -2,6 +2,7 @@ import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import { getQueryItems } from "@/utils/getQueryItems";
 import { handleCheckboxChange } from "@/utils/handleCheckboxChange";
+import { XMarkIcon } from "@heroicons/react/24/outline";
 
 function DropdownTeachers({ props, onCheckboxChange }) {
   const [searchTeachers, setSearchTeachers] = useState("");
@@ -33,19 +34,7 @@ function DropdownTeachers({ props, onCheckboxChange }) {
       <div className="p-3">
         <div className="relative">
           <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-            <svg
-              className="w-5 h-5 text-gray-500 dark:text-gray-300"
-              aria-hidden="true"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                fillRule="evenodd"
-                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-                clipRule="evenodd"
-              ></path>
-            </svg>
+            <XMarkIcon className="w-5 h-5 text-gray-500 dark:text-gray-300" />
           </div>
           <input
             type="text"
diff --git a/src/components/Substitutions/Jumbotron.tsx b/src/components/Substitutions/Jumbotron.tsx
index d89b1e9..0e633a4 100644
--- a/src/components/Substitutions/Jumbotron.tsx
+++ b/src/components/Substitutions/Jumbotron.tsx
@@ -2,6 +2,48 @@ import Image from "next/legacy/image";
 import Link from "next/link";
 import React from "react";
 import Event from "@/components/Event";
+import {
+  ChevronDownIcon,
+  UserCircleIcon,
+  UserGroupIcon,
+} from "@heroicons/react/24/outline";
+
+const buttons = [
+  {
+    id: "dropdownSearchBranch",
+    dropdownToggle: "dropdownBranch",
+    dropdownPlacement: "bottom",
+    text: "Filtruj wg. oddziałów",
+    icon: UserGroupIcon,
+  },
+  {
+    id: "dropdownSearchTeacher",
+    dropdownToggle: "dropdownTeacher",
+    dropdownPlacement: "bottom",
+    text: "Filtruj wg. nauczycieli",
+    icon: UserCircleIcon,
+  },
+];
+
+const ButtonComponent = ({
+  id,
+  dropdownToggle,
+  dropdownPlacement,
+  text,
+  icon: Icon,
+}) => (
+  <button
+    id={id}
+    data-dropdown-toggle={dropdownToggle}
+    data-dropdown-placement={dropdownPlacement}
+    className="text-[#a91712] hover:text-white hover:border-transparent bg-transparent dark:border-[2px] border-[1px] border-[#a91712] mx-2 sm:my-0 my-2 hover:bg-[#73110e] transition-all focus:ring-4 focus:outline-none focus:ring-transparent font-medium text-sm px-4 py-2.5 text-center inline-flex items-center dark:text-gray-300 hover:dark:text-white dark:bg-[#202020] dark:rounded-lg dark:border-none dark:hover:bg-[#141414] dark:outline-none"
+    type="button"
+  >
+    <Icon className="h-5 w-5 mr-2" aria-hidden="true" />
+    {text}
+    <ChevronDownIcon className="w-4 h-4 ml-2" aria-hidden="true" />
+  </button>
+);
 
 function Jumbotron({ props }) {
   return (
@@ -10,7 +52,7 @@ function Jumbotron({ props }) {
         <Link
           prefetch={false}
           href={"https://zstiojar.edu.pl"}
-          className="relative w-20 h-20 mr-4 hidden md:block"
+          className="relative w-20 h-20 mr-4 hidden md:block z-30"
         >
           <Event />
           <Image
@@ -30,84 +72,9 @@ function Jumbotron({ props }) {
       </p>
       {props?.form?.tables?.length > 0 && (
         <>
-          <button
-            id="dropdownSearchBranch"
-            data-dropdown-toggle="dropdownBranch"
-            data-dropdown-placement="bottom"
-            className="text-[#a91712] hover:text-white hover:border-transparent bg-transparent dark:border-[2px] border-[1px] border-[#a91712] mx-2 sm:my-0 my-2 hover:bg-[#73110e] transition-all focus:ring-4 focus:outline-none focus:ring-transparent font-medium text-sm px-4 py-2.5 text-center inline-flex items-center dark:text-gray-300 hover:dark:text-white dark:bg-[#202020] dark:rounded-lg dark:border-none dark:hover:bg-[#141414] dark:outline-none"
-            type="button"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              strokeWidth="1.5"
-              stroke="currentColor"
-              aria-hidden="true"
-              className="h-5 w-5 mr-2"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443m-7.007 11.55A5.981 5.981 0 006.75 15.75v-1.5"
-              ></path>
-            </svg>
-            Filtruj wg. oddziałów{" "}
-            <svg
-              className="w-4 h-4 ml-2"
-              aria-hidden="true"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M19 9l-7 7-7-7"
-              ></path>
-            </svg>
-          </button>
-          <button
-            id="dropdownSearchTeacher"
-            data-dropdown-toggle="dropdownTeacher"
-            data-dropdown-placement="bottom"
-            className="text-[#a91712] hover:text-white hover:border-transparent bg-transparent dark:border-[2px] border-[1px] border-[#a91712] mx-2 sm:my-0 my-2 hover:bg-[#73110e] transition-all focus:ring-4 focus:outline-none focus:ring-transparent font-medium text-sm px-4 py-2.5 text-center inline-flex items-center dark:text-gray-300 hover:dark:text-white dark:bg-[#202020] dark:rounded-lg dark:border-none dark:hover:bg-[#141414] dark:outline-none"
-            type="button"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              strokeWidth="1.5"
-              stroke="currentColor"
-              aria-hidden="true"
-              className="h-5 w-5 mr-2"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"
-              ></path>
-            </svg>
-            Filtruj wg. nauczycieli{" "}
-            <svg
-              className="w-4 h-4 ml-2"
-              aria-hidden="true"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M19 9l-7 7-7-7"
-              ></path>
-            </svg>
-          </button>
+          {buttons.map((button) => (
+            <ButtonComponent key={button.id} {...button} />
+          ))}
         </>
       )}
     </div>