chore: replace theme button with settings

I plan to add more user settings so theme options should be inside
settings.

21 files changed, 182 insertions, 252 deletions

diff --git a/src/assets/images/icon-cog.svg b/src/assets/images/icon-cog.svg
new file mode 100644
index 0000000..16f9c9e
--- /dev/null
+++ b/src/assets/images/icon-cog.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100"
+   height="100"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
+   sodipodi:docname="icon-cog.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="2.0556265"
+     inkscape:cx="-86.105136"
+     inkscape:cy="142.04915"
+     inkscape:window-width="1920"
+     inkscape:window-height="1019"
+     inkscape:window-x="0"
+     inkscape:window-y="33"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg5" />
+  <defs
+     id="defs2" />
+  <path
+     id="path2"
+     style="fill:#1d8fc9;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 71.782287,3.1230469 c -1.164356,0 -2.3107,0.076326 -3.435131,0.2227895 L 66.33766,9.1021499 C 64.651951,9.5517047 63.049493,10.204637 61.558109,11.033725 L 56.112383,8.2889128 c -1.970928,1.4609237 -3.730521,3.1910632 -5.22513,5.1351362 l 2.648234,5.494014 c -0.855644,1.477262 -1.537042,3.067161 -2.016082,4.743334 l -5.791433,1.911821 c -0.188001,1.269731 -0.286444,2.568579 -0.286444,3.890587 0,1.164355 0.07633,2.310701 0.222789,3.435131 l 5.756315,2.009497 c 0.449555,1.685708 1.102486,3.288168 1.931575,4.779551 l -2.744813,5.445725 c 1.460924,1.970927 3.191063,3.730521 5.135137,5.22513 l 5.494014,-2.648233 c 1.477261,0.85564 3.067161,1.537039 4.743334,2.016081 L 67.8917,55.51812 c 1.26973,0.188002 2.568578,0.286444 3.890587,0.286444 1.16565,0 2.313889,-0.07601 3.43952,-0.222789 l 2.008399,-5.756314 c 1.684332,-0.449523 3.285984,-1.103103 4.776259,-1.931575 l 5.445725,2.744812 c 1.970928,-1.460924 3.730521,-3.191061 5.22513,-5.135136 l -2.648233,-5.494015 c 0.85564,-1.477262 1.537039,-3.067161 2.016082,-4.743334 l 5.79253,-1.91182 c 0.187995,-1.269731 0.285346,-2.56858 0.285346,-3.890588 0,-1.16565 -0.07601,-2.313889 -0.222789,-3.439521 L 92.143942,24.015886 C 91.694419,22.331554 91.04084,20.729903 90.212367,19.239628 l 2.744812,-5.445726 C 91.496255,11.822973 89.766118,10.063381 87.822043,8.5687715 L 82.328028,11.217006 C 80.850766,10.361361 79.260867,9.6799641 77.584694,9.2009234 L 75.672874,3.4094907 C 74.403143,3.2214898 73.104295,3.1230469 71.782287,3.1230469 Z m 0,15.0520191 a 11.288679,11.288679 0 0 1 11.288739,11.288739 11.288679,11.288679 0 0 1 -11.288739,11.28874 11.288679,11.288679 0 0 1 -11.28874,-11.28874 11.288679,11.288679 0 0 1 11.28874,-11.288739 z" />
+  <path
+     id="path2-3"
+     style="fill:#1d8fc9;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 38.326115,25.84777 c -1.583642,0 -3.142788,0.103807 -4.672127,0.303016 l -2.73312,7.829173 c -2.292736,0.611441 -4.472242,1.499494 -6.500676,2.627139 L 17.01345,32.873874 c -2.680664,1.987004 -5.073889,4.340169 -7.1067095,6.984309 l 3.6018685,7.472418 c -1.163764,2.009226 -2.090533,4.171652 -2.742078,6.451418 l -7.8769382,2.60027 C 2.6338924,58.109252 2.5,59.875819 2.5,61.673885 c 0,1.583642 0.1038125,3.142788 0.3030165,4.672128 l 7.8291725,2.73312 c 0.611441,2.292734 1.499494,4.472243 2.627139,6.500673 L 9.5261037,82.98655 c 1.9870063,2.680661 4.3401703,5.07389 6.9843093,7.106709 l 7.472419,-3.601867 c 2.009226,1.16376 4.171651,2.090533 6.451418,2.742079 l 2.60027,7.876932 C 34.761483,97.366114 36.528049,97.5 38.326115,97.5 c 1.585404,0 3.147126,-0.103373 4.678099,-0.303015 l 2.731628,-7.829178 c 2.290862,-0.611397 4.469272,-1.500329 6.496197,-2.627132 l 7.406741,3.733224 c 2.680664,-1.987007 5.07389,-4.340171 7.10671,-6.984313 l -3.601866,-7.472415 c 1.163756,-2.00923 2.090529,-4.171655 2.742076,-6.45142 l 7.878431,-2.60027 c 0.255691,-1.726964 0.3881,-3.49353 0.3881,-5.291596 0,-1.585404 -0.103373,-3.147127 -0.303016,-4.678099 L 66.020041,54.264159 C 65.408645,51.973296 64.51971,49.794888 63.392903,47.767962 l 3.733224,-7.406742 c -1.987006,-2.680664 -4.340168,-5.073889 -6.984309,-7.10671 l -7.472419,3.601867 c -2.009228,-1.163762 -4.171651,-2.090533 -6.451418,-2.742076 l -2.60027,-7.876939 C 41.890748,25.981661 40.124181,25.84777 38.326115,25.84777 Z m 0,20.472278 A 15.353754,15.353754 0 0 1 53.679952,61.673885 15.353754,15.353754 0 0 1 38.326115,77.027724 15.353754,15.353754 0 0 1 22.972279,61.673885 15.353754,15.353754 0 0 1 38.326115,46.320048 Z" />
+</svg>
diff --git a/src/assets/images/icon-theme.svg b/src/assets/images/icon-theme.svg
deleted file mode 100644
index aa2510e..0000000
--- a/src/assets/images/icon-theme.svg
+++ /dev/null
@@ -1,79 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="100"
-   height="100"
-   viewBox="0 0 100 100"
-   version="1.1"
-   id="svg5"
-   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
-   sodipodi:docname="icon-theme.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview7"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:document-units="px"
-     showgrid="false"
-     inkscape:zoom="1.0444694"
-     inkscape:cx="-245.10053"
-     inkscape:cy="-202.01645"
-     inkscape:window-width="1920"
-     inkscape:window-height="1019"
-     inkscape:window-x="0"
-     inkscape:window-y="33"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg5" />
-  <defs
-     id="defs2" />
-  <path
-     id="path866"
-     style="fill:#fbfbfb;fill-opacity:1;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
-     d="m 36.966438,97.25893 c -19.863716,0 -35.96643811,-16.10281 -35.96643811,-35.966628 0,-19.86382 16.13555711,-37.108288 35.96643811,-35.966626 20.456993,1.177707 -4.177725,18.358363 2.330923,24.867041 6.508645,6.50868 33.138234,-14.015906 33.635518,16.06554 0,14.897863 -16.102724,31.000673 -35.966441,31.000673 z"
-     sodipodi:nodetypes="sssscs" />
-  <path
-     id="path2832"
-     style="fill:#1d8fc9;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round"
-     d="m 20.774887,52.836279 a 5.5648608,5.5649128 0 0 1 -5.564861,5.564912 5.5648608,5.5649128 0 0 1 -5.5648609,-5.564912 5.5648608,5.5649128 0 0 1 5.5648609,-5.564913 5.5648608,5.5649128 0 0 1 5.564861,5.564913 z" />
-  <path
-     id="path2832-3"
-     style="fill:#1d8fc9;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round"
-     d="m 25.169864,73.456953 a 5.5648608,5.5649128 0 0 1 -5.564861,5.564913 5.5648608,5.5649128 0 0 1 -5.56486,-5.564913 5.5648608,5.5649128 0 0 1 5.56486,-5.564913 5.5648608,5.5649128 0 0 1 5.564861,5.564913 z" />
-  <path
-     id="path2832-6"
-     style="fill:#1d8fc9;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round"
-     d="m 45.37022,82.982572 a 5.5648608,5.5649128 0 0 1 -5.564861,5.564913 5.5648608,5.5649128 0 0 1 -5.564861,-5.564913 5.5648608,5.5649128 0 0 1 5.564861,-5.564913 5.5648608,5.5649128 0 0 1 5.564861,5.564913 z" />
-  <path
-     id="path2832-7"
-     style="fill:#1d8fc9;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round"
-     d="m 65.337493,72.325422 a 5.5648608,5.5649128 0 0 1 -5.56486,5.564913 5.5648608,5.5649128 0 0 1 -5.564861,-5.564913 5.5648608,5.5649128 0 0 1 5.564861,-5.564913 5.5648608,5.5649128 0 0 1 5.56486,5.564913 z" />
-  <path
-     id="path2832-5"
-     style="fill:#1d8fc9;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round"
-     d="m 34.363531,35.947138 a 5.5648608,5.5649128 0 0 1 -5.564861,5.564912 5.5648608,5.5649128 0 0 1 -5.564861,-5.564912 5.5648608,5.5649128 0 0 1 5.564861,-5.564913 5.5648608,5.5649128 0 0 1 5.564861,5.564913 z" />
-  <path
-     id="rect896-3"
-     style="fill:#f6f8f8;fill-opacity:1;stroke:#000000;stroke-width:1.55101;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
-     d="m 19.832251,25.296368 1.538355,5.741247 67.390349,-18.057216 3.844973,14.349636 -28.622498,7.669394 c -6.183313,1.656814 -5.744267,1.516427 -4.200251,7.278868 l 3.80049,14.183562 5.738576,-1.537647 -3.80047,-14.183547 28.622508,-7.669383 c 5.765552,-1.544878 5.744722,-1.516352 4.200664,-7.278988 L 94.499944,11.442637 C 92.953635,5.6716712 92.982563,5.6957688 87.2226,7.2391505 Z"
-     sodipodi:nodetypes="cccccccccccccc" />
-  <path
-     id="rect896-3-5-3"
-     style="fill:#1d8fc9;stroke:#000000;stroke-width:1.55101;stroke-linejoin:round"
-     d="m 73.052595,56.920912 10.091431,37.661729 c 0.127261,0.47495 -0.133494,0.95463 -0.584655,1.07552 l -9.80712,2.627809 c -0.45116,0.12089 -0.916823,-0.164149 -1.044084,-0.639099 L 61.616737,59.985142 c -0.127263,-0.47495 0.133494,-0.954632 0.584654,-1.075519 l 9.80712,-2.62781 c 0.451161,-0.120889 0.916822,0.16415 1.044084,0.639099 z" />
-  <path
-     id="rect896-3-5-3-6"
-     style="fill:#14578a;stroke:#000000;stroke-width:1.49999;stroke-linejoin:round"
-     d="m 75.589139,56.451775 -16.995133,4.553832 c -0.906064,0.242779 -1.831036,-0.29154 -2.073928,-1.198024 -0.242892,-0.906485 0.290998,-1.831704 1.197062,-2.074484 l 16.995133,-4.553832 c 0.906064,-0.242779 1.831036,0.29154 2.073928,1.198025 0.242892,0.906484 -0.290998,1.831703 -1.197062,2.074483 z" />
-  <path
-     id="rect896-3-5-3-5"
-     style="fill:#1d8fc9;stroke:#000000;stroke-width:1.55101;stroke-linecap:round;stroke-linejoin:round"
-     d="M 25.017665,15.867638 77.477694,1.8110162 c 1.94242,-0.5204698 3.925526,0.625572 4.446426,2.5695996 L 85.458379,17.57065 c 0.520901,1.944028 -0.623498,3.928082 -2.565918,4.448552 L 30.432432,36.075824 c -1.94242,0.52047 -3.925526,-0.625572 -4.446426,-2.5696 L 22.451747,20.31619 c -0.520901,-1.944027 0.623498,-3.928082 2.565918,-4.448552 z" />
-</svg>
diff --git a/src/components/Buttons/ButtonTheme/ButtonTheme.tsx b/src/components/Buttons/ButtonTheme/ButtonTheme.tsx
deleted file mode 100644
index afbac89..0000000
--- a/src/components/Buttons/ButtonTheme/ButtonTheme.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { CloseIcon, ThemeIcon } from '@components/Icons';
-import { t } from '@lingui/macro';
-import { SetStateAction } from 'react';
-import styles from '../Buttons.module.scss';
-
-const ButtonTheme = ({
-  isActivated,
-  setIsActivated,
-}: {
-  isActivated: boolean;
-  setIsActivated: (value: SetStateAction<boolean>) => void;
-}) => {
-  const btnClasses = isActivated
-    ? `${styles.theme} ${styles['theme--opened']}`
-    : styles.theme;
-
-  return (
-    <button
-      className={btnClasses}
-      type="button"
-      onClick={() => setIsActivated(!isActivated)}
-    >
-      <span className={styles.icon}>
-        <span className={styles.front}>
-          <ThemeIcon />
-        </span>
-        <span className={styles.back}>
-          <CloseIcon />
-        </span>
-      </span>
-      {isActivated ? (
-        <span className="screen-reader-text">{t`Close theme options`}</span>
-      ) : (
-        <span className="screen-reader-text">{t`Open theme options`}</span>
-      )}
-    </button>
-  );
-};
-
-export default ButtonTheme;
diff --git a/src/components/Buttons/ButtonSearch/ButtonSearch.tsx b/src/components/Buttons/ButtonToolbar/ButtonToolbar.tsx
index be5a9bc..22da133 100644
--- a/src/components/Buttons/ButtonSearch/ButtonSearch.tsx
+++ b/src/components/Buttons/ButtonToolbar/ButtonToolbar.tsx
@@ -1,18 +1,23 @@
-import { CloseIcon, SearchIcon } from '@components/Icons';
+import { CloseIcon, CogIcon, SearchIcon } from '@components/Icons';
 import { t } from '@lingui/macro';
 import { SetStateAction } from 'react';
 import styles from '../Buttons.module.scss';
 
-const ButtonSearch = ({
+type ButtonType = 'search' | 'settings';
+
+const ButtonToolbar = ({
+  type,
   isActivated,
   setIsActivated,
 }: {
+  type: ButtonType;
   isActivated: boolean;
   setIsActivated: (value: SetStateAction<boolean>) => void;
 }) => {
+  const ButtonIcon = () => (type === 'search' ? <SearchIcon /> : <CogIcon />);
   const btnClasses = isActivated
-    ? `${styles.search} ${styles['search--opened']}`
-    : styles.search;
+    ? `${styles.toolbar} ${styles['toolbar--activated']}`
+    : styles.toolbar;
 
   return (
     <button
@@ -22,19 +27,19 @@ const ButtonSearch = ({
     >
       <span className={styles.icon}>
         <span className={styles.front}>
-          <SearchIcon />
+          <ButtonIcon />
         </span>
         <span className={styles.back}>
           <CloseIcon />
         </span>
       </span>
       {isActivated ? (
-        <span className="screen-reader-text">{t`Close search`}</span>
+        <span className="screen-reader-text">{t`Close ${type}`}</span>
       ) : (
-        <span className="screen-reader-text">{t`Open search`}</span>
+        <span className="screen-reader-text">{t`Open ${type}`}</span>
       )}
     </button>
   );
 };
 
-export default ButtonSearch;
+export default ButtonToolbar;
diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
index f46de82..1a0d73a 100644
--- a/src/components/Buttons/Buttons.module.scss
+++ b/src/components/Buttons/Buttons.module.scss
@@ -167,7 +167,7 @@
   }
 }
 
-.search,
+.toolbar,
 .theme {
   display: block;
   width: var(--btn-size);
@@ -212,7 +212,7 @@
   z-index: 10;
 }
 
-.search--opened,
+.toolbar--activated,
 .theme--opened {
   .icon {
     transform: rotateY(180deg);
diff --git a/src/components/Buttons/index.tsx b/src/components/Buttons/index.tsx
index 74060f7..5c034ad 100644
--- a/src/components/Buttons/index.tsx
+++ b/src/components/Buttons/index.tsx
@@ -1,7 +1,6 @@
 import Button from './Button/Button';
 import ButtonLink from './ButtonLink/ButtonLink';
-import ButtonSearch from './ButtonSearch/ButtonSearch';
+import ButtonToolbar from './ButtonToolbar/ButtonToolbar';
 import ButtonSubmit from './ButtonSubmit/ButtonSubmit';
-import ButtonTheme from './ButtonTheme/ButtonTheme';
 
-export { Button, ButtonLink, ButtonSearch, ButtonSubmit, ButtonTheme };
+export { Button, ButtonLink, ButtonToolbar, ButtonSubmit };
diff --git a/src/components/Form/Form.module.scss b/src/components/Form/Form.module.scss
index 25fce19..bfb009e 100644
--- a/src/components/Form/Form.module.scss
+++ b/src/components/Form/Form.module.scss
@@ -3,14 +3,11 @@
 .wrapper {
   width: 100%;
 
-  &--search {
+  &--search,
+  &--theme {
     display: flex;
     flex-flow: row nowrap;
   }
-
-  &--theme {
-    line-height: 1;
-  }
 }
 
 .item {
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
index 048219c..74a4efb 100644
--- a/src/components/Form/Form.tsx
+++ b/src/components/Form/Form.tsx
@@ -10,7 +10,7 @@ const Form = ({
   submitHandler: any;
   modifier?: string;
 }) => {
-  const withModifier = modifier ? `wrapper--${modifier}` : '';
+  const withModifier = modifier ? styles[`wrapper--${modifier}`] : '';
   const classes = `${styles.wrapper} ${withModifier}`;
 
   return (
diff --git a/src/components/Icons/Cog/Cog.module.scss b/src/components/Icons/Cog/Cog.module.scss
new file mode 100644
index 0000000..4fad00b
--- /dev/null
+++ b/src/components/Icons/Cog/Cog.module.scss
@@ -0,0 +1,10 @@
+@use "@styles/abstracts/functions" as fun;
+
+.icon {
+  display: block;
+  width: var(--icon-size, #{fun.convert-px(40)});
+  margin: auto;
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-border);
+  stroke-width: 4;
+}
diff --git a/src/components/Icons/Cog/Cog.tsx b/src/components/Icons/Cog/Cog.tsx
new file mode 100644
index 0000000..7a04d76
--- /dev/null
+++ b/src/components/Icons/Cog/Cog.tsx
@@ -0,0 +1,16 @@
+import styles from './Cog.module.scss';
+
+const CogIcon = () => {
+  return (
+    <svg
+      viewBox="0 0 100 100"
+      xmlns="http://www.w3.org/2000/svg"
+      className={styles.icon}
+    >
+      <path d="m 71.782287,3.1230469 c -1.164356,0 -2.3107,0.076326 -3.435131,0.2227895 L 66.33766,9.1021499 C 64.651951,9.5517047 63.049493,10.204637 61.558109,11.033725 L 56.112383,8.2889128 c -1.970928,1.4609237 -3.730521,3.1910632 -5.22513,5.1351362 l 2.648234,5.494014 c -0.855644,1.477262 -1.537042,3.067161 -2.016082,4.743334 l -5.791433,1.911821 c -0.188001,1.269731 -0.286444,2.568579 -0.286444,3.890587 0,1.164355 0.07633,2.310701 0.222789,3.435131 l 5.756315,2.009497 c 0.449555,1.685708 1.102486,3.288168 1.931575,4.779551 l -2.744813,5.445725 c 1.460924,1.970927 3.191063,3.730521 5.135137,5.22513 l 5.494014,-2.648233 c 1.477261,0.85564 3.067161,1.537039 4.743334,2.016081 L 67.8917,55.51812 c 1.26973,0.188002 2.568578,0.286444 3.890587,0.286444 1.16565,0 2.313889,-0.07601 3.43952,-0.222789 l 2.008399,-5.756314 c 1.684332,-0.449523 3.285984,-1.103103 4.776259,-1.931575 l 5.445725,2.744812 c 1.970928,-1.460924 3.730521,-3.191061 5.22513,-5.135136 l -2.648233,-5.494015 c 0.85564,-1.477262 1.537039,-3.067161 2.016082,-4.743334 l 5.79253,-1.91182 c 0.187995,-1.269731 0.285346,-2.56858 0.285346,-3.890588 0,-1.16565 -0.07601,-2.313889 -0.222789,-3.439521 L 92.143942,24.015886 C 91.694419,22.331554 91.04084,20.729903 90.212367,19.239628 l 2.744812,-5.445726 C 91.496255,11.822973 89.766118,10.063381 87.822043,8.5687715 L 82.328028,11.217006 C 80.850766,10.361361 79.260867,9.6799641 77.584694,9.2009234 L 75.672874,3.4094907 C 74.403143,3.2214898 73.104295,3.1230469 71.782287,3.1230469 Z m 0,15.0520191 a 11.288679,11.288679 0 0 1 11.288739,11.288739 11.288679,11.288679 0 0 1 -11.288739,11.28874 11.288679,11.288679 0 0 1 -11.28874,-11.28874 11.288679,11.288679 0 0 1 11.28874,-11.288739 z" />
+      <path d="m 38.326115,25.84777 c -1.583642,0 -3.142788,0.103807 -4.672127,0.303016 l -2.73312,7.829173 c -2.292736,0.611441 -4.472242,1.499494 -6.500676,2.627139 L 17.01345,32.873874 c -2.680664,1.987004 -5.073889,4.340169 -7.1067095,6.984309 l 3.6018685,7.472418 c -1.163764,2.009226 -2.090533,4.171652 -2.742078,6.451418 l -7.8769382,2.60027 C 2.6338924,58.109252 2.5,59.875819 2.5,61.673885 c 0,1.583642 0.1038125,3.142788 0.3030165,4.672128 l 7.8291725,2.73312 c 0.611441,2.292734 1.499494,4.472243 2.627139,6.500673 L 9.5261037,82.98655 c 1.9870063,2.680661 4.3401703,5.07389 6.9843093,7.106709 l 7.472419,-3.601867 c 2.009226,1.16376 4.171651,2.090533 6.451418,2.742079 l 2.60027,7.876932 C 34.761483,97.366114 36.528049,97.5 38.326115,97.5 c 1.585404,0 3.147126,-0.103373 4.678099,-0.303015 l 2.731628,-7.829178 c 2.290862,-0.611397 4.469272,-1.500329 6.496197,-2.627132 l 7.406741,3.733224 c 2.680664,-1.987007 5.07389,-4.340171 7.10671,-6.984313 l -3.601866,-7.472415 c 1.163756,-2.00923 2.090529,-4.171655 2.742076,-6.45142 l 7.878431,-2.60027 c 0.255691,-1.726964 0.3881,-3.49353 0.3881,-5.291596 0,-1.585404 -0.103373,-3.147127 -0.303016,-4.678099 L 66.020041,54.264159 C 65.408645,51.973296 64.51971,49.794888 63.392903,47.767962 l 3.733224,-7.406742 c -1.987006,-2.680664 -4.340168,-5.073889 -6.984309,-7.10671 l -7.472419,3.601867 c -2.009228,-1.163762 -4.171651,-2.090533 -6.451418,-2.742076 l -2.60027,-7.876939 C 41.890748,25.981661 40.124181,25.84777 38.326115,25.84777 Z m 0,20.472278 A 15.353754,15.353754 0 0 1 53.679952,61.673885 15.353754,15.353754 0 0 1 38.326115,77.027724 15.353754,15.353754 0 0 1 22.972279,61.673885 15.353754,15.353754 0 0 1 38.326115,46.320048 Z" />
+    </svg>
+  );
+};
+
+export default CogIcon;
diff --git a/src/components/Icons/Moon/Moon.tsx b/src/components/Icons/Moon/Moon.tsx
index b2e5f7b..62e7203 100644
--- a/src/components/Icons/Moon/Moon.tsx
+++ b/src/components/Icons/Moon/Moon.tsx
@@ -1,3 +1,4 @@
+import { t } from '@lingui/macro';
 import styles from './Moon.module.scss';
 
 const MoonIcon = () => {
@@ -7,6 +8,7 @@ const MoonIcon = () => {
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
     >
+      <title>{t`Dark theme`}</title>
       <path d="M 51.077315,1.9893942 A 43.319985,43.319985 0 0 1 72.840039,39.563145 43.319985,43.319985 0 0 1 29.520053,82.88313 43.319985,43.319985 0 0 1 5.4309911,75.569042 48.132997,48.132997 0 0 0 46.126047,98 48.132997,48.132997 0 0 0 94.260004,49.867002 48.132997,48.132997 0 0 0 51.077315,1.9893942 Z" />
     </svg>
   );
diff --git a/src/components/Icons/Sun/Sun.tsx b/src/components/Icons/Sun/Sun.tsx
index a4f5a11..612d3fa 100644
--- a/src/components/Icons/Sun/Sun.tsx
+++ b/src/components/Icons/Sun/Sun.tsx
@@ -1,3 +1,4 @@
+import { t } from '@lingui/macro';
 import styles from './Sun.module.scss';
 
 const SunIcon = () => {
@@ -7,6 +8,7 @@ const SunIcon = () => {
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
     >
+      <title>{t`Light theme`}</title>
       <path d="M 69.398043,50.000437 A 19.399259,19.399204 0 0 1 49.998784,69.399641 19.399259,19.399204 0 0 1 30.599525,50.000437 19.399259,19.399204 0 0 1 49.998784,30.601234 19.399259,19.399204 0 0 1 69.398043,50.000437 Z m 27.699233,1.125154 c 2.657696,0.0679 1.156196,12.061455 -1.435545,11.463959 L 80.113224,59.000697 c -2.589801,-0.597494 -1.625657,-8.345536 1.032041,-8.278609 z m -18.06653,37.251321 c 1.644087,2.091234 -9.030355,8.610337 -10.126414,6.188346 L 62.331863,80.024585 c -1.096058,-2.423931 5.197062,-6.285342 6.839209,-4.194107 z M 38.611418,97.594444 C 38.02653,100.18909 26.24148,95.916413 27.436475,93.54001 l 7.168026,-14.256474 c 1.194024,-2.376403 8.102101,0.151313 7.517214,2.744986 z M 6.1661563,71.834242 C 3.7916868,73.028262 -0.25499873,61.16274 2.3386824,60.577853 L 17.905618,57.067567 c 2.593681,-0.584886 4.894434,6.403678 2.518995,7.598668 z M 6.146757,30.055146 c -2.3764094,-1.194991 4.46571,-11.714209 6.479353,-9.97798 l 12.090589,10.414462 c 2.014613,1.736229 -1.937017,7.926514 -4.314396,6.731524 z M 38.56777,4.2639045 C 37.982883,1.6682911 50.480855,0.41801247 50.415868,3.0766733 L 50.020123,19.028638 c -0.06596,2.657691 -7.357169,3.394862 -7.943027,0.800218 z m 40.403808,9.1622435 c 1.635357,-2.098023 10.437771,6.872168 8.339742,8.506552 l -12.58818,9.805327 c -2.099,1.634383 -7.192276,-3.626682 -5.557888,-5.724706 z M 97.096306,50.69105 c 2.657696,-0.06596 1.164926,12.462047 -1.425846,11.863582 L 80.122924,58.96578 c -2.590771,-0.597496 -1.636327,-7.814 1.021371,-7.879957 z" />
     </svg>
   );
diff --git a/src/components/Icons/Theme/Theme.module.scss b/src/components/Icons/Theme/Theme.module.scss
deleted file mode 100644
index e0ea24c..0000000
--- a/src/components/Icons/Theme/Theme.module.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.icon {
-  display: block;
-  margin: auto;
-  width: var(--icon-size, #{fun.convert-px(40)});
-}
-
-.roller {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-border);
-  stroke-width: 3;
-}
-
-.guard {
-  fill: var(--color-primary);
-  stroke: var(--color-border);
-  stroke-width: 2;
-}
-
-.handle {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-border);
-  stroke-width: 3;
-}
-
-.bar {
-  fill: var(--color-bg);
-  stroke: var(--color-border);
-  stroke-width: 3;
-}
-
-.colors {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-border);
-  stroke-width: 2;
-}
-
-.palette {
-  fill: var(--color-bg);
-  stroke: var(--color-border);
-  stroke-width: 3;
-}
diff --git a/src/components/Icons/Theme/Theme.tsx b/src/components/Icons/Theme/Theme.tsx
deleted file mode 100644
index 6b6c8d0..0000000
--- a/src/components/Icons/Theme/Theme.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import styles from './Theme.module.scss';
-
-const ThemeIcon = () => {
-  return (
-    <svg
-      className={styles.icon}
-      viewBox="0 0 100 100"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        className={styles.palette}
-        d="m 36.966438,97.25893 c -19.863716,0 -35.96643811,-16.10281 -35.96643811,-35.966628 0,-19.86382 16.13555711,-37.108288 35.96643811,-35.966626 20.456993,1.177707 -4.177725,18.358363 2.330923,24.867041 6.508645,6.50868 33.138234,-14.015906 33.635518,16.06554 0,14.897863 -16.102724,31.000673 -35.966441,31.000673 z"
-      />
-      <path
-        className={`${styles.colors} ${styles.color1}`}
-        d="m 34.363531,35.947138 a 5.5648608,5.5649128 0 0 1 -5.564861,5.564912 5.5648608,5.5649128 0 0 1 -5.564861,-5.564912 5.5648608,5.5649128 0 0 1 5.564861,-5.564913 5.5648608,5.5649128 0 0 1 5.564861,5.564913 z"
-      />
-      <path
-        className={`${styles.colors} ${styles.color2}`}
-        d="m 20.774887,52.836279 a 5.5648608,5.5649128 0 0 1 -5.564861,5.564912 5.5648608,5.5649128 0 0 1 -5.5648609,-5.564912 5.5648608,5.5649128 0 0 1 5.5648609,-5.564913 5.5648608,5.5649128 0 0 1 5.564861,5.564913 z"
-      />
-      <path
-        className={`${styles.colors} ${styles.color3}`}
-        d="m 25.169864,73.456953 a 5.5648608,5.5649128 0 0 1 -5.564861,5.564913 5.5648608,5.5649128 0 0 1 -5.56486,-5.564913 5.5648608,5.5649128 0 0 1 5.56486,-5.564913 5.5648608,5.5649128 0 0 1 5.564861,5.564913 z"
-      />
-      <path
-        className={`${styles.colors} ${styles.color4}`}
-        d="m 45.37022,82.982572 a 5.5648608,5.5649128 0 0 1 -5.564861,5.564913 5.5648608,5.5649128 0 0 1 -5.564861,-5.564913 5.5648608,5.5649128 0 0 1 5.564861,-5.564913 5.5648608,5.5649128 0 0 1 5.564861,5.564913 z"
-      />
-      <path
-        className={`${styles.colors} ${styles.color5}`}
-        d="m 65.337493,72.325422 a 5.5648608,5.5649128 0 0 1 -5.56486,5.564913 5.5648608,5.5649128 0 0 1 -5.564861,-5.564913 5.5648608,5.5649128 0 0 1 5.564861,-5.564913 5.5648608,5.5649128 0 0 1 5.56486,5.564913 z"
-      />
-      <path
-        className={styles.bar}
-        d="m 19.832251,25.296368 1.538355,5.741247 67.390349,-18.057216 3.844973,14.349636 -28.622498,7.669394 c -6.183313,1.656814 -5.744267,1.516427 -4.200251,7.278868 l 3.80049,14.183562 5.738576,-1.537647 -3.80047,-14.183547 28.622508,-7.669383 c 5.765552,-1.544878 5.744722,-1.516352 4.200664,-7.278988 L 94.499944,11.442637 C 92.953635,5.6716712 92.982563,5.6957688 87.2226,7.2391505 Z"
-      />
-      <path
-        className={styles.handle}
-        d="m 73.052595,56.920912 10.091431,37.661729 c 0.127261,0.47495 -0.133494,0.95463 -0.584655,1.07552 l -9.80712,2.627809 c -0.45116,0.12089 -0.916823,-0.164149 -1.044084,-0.639099 L 61.616737,59.985142 c -0.127263,-0.47495 0.133494,-0.954632 0.584654,-1.075519 l 9.80712,-2.62781 c 0.451161,-0.120889 0.916822,0.16415 1.044084,0.639099 z"
-      />
-      <path
-        className={styles.guard}
-        d="m 75.589139,56.451775 -16.995133,4.553832 c -0.906064,0.242779 -1.831036,-0.29154 -2.073928,-1.198024 -0.242892,-0.906485 0.290998,-1.831704 1.197062,-2.074484 l 16.995133,-4.553832 c 0.906064,-0.242779 1.831036,0.29154 2.073928,1.198025 0.242892,0.906484 -0.290998,1.831703 -1.197062,2.074483 z"
-      />
-      <path
-        className={styles.roller}
-        d="M 25.017665,15.867638 77.477694,1.8110162 c 1.94242,-0.5204698 3.925526,0.625572 4.446426,2.5695996 L 85.458379,17.57065 c 0.520901,1.944028 -0.623498,3.928082 -2.565918,4.448552 L 30.432432,36.075824 c -1.94242,0.52047 -3.925526,-0.625572 -4.446426,-2.5696 L 22.451747,20.31619 c -0.520901,-1.944027 0.623498,-3.928082 2.565918,-4.448552 z"
-      />
-    </svg>
-  );
-};
-
-export default ThemeIcon;
diff --git a/src/components/Icons/index.tsx b/src/components/Icons/index.tsx
index 1594775..eae50a5 100644
--- a/src/components/Icons/index.tsx
+++ b/src/components/Icons/index.tsx
@@ -1,6 +1,7 @@
 import ArrowIcon from './Arrow/Arrow';
 import BlogIcon from './Blog/Blog';
 import CloseIcon from './Close/Close';
+import CogIcon from './Cog/Cog';
 import ContactIcon from './Contact/Contact';
 import CVIcon from './CV/CV';
 import HamburgerIcon from './Hamburger/Hamburger';
@@ -8,12 +9,12 @@ import HomeIcon from './Home/Home';
 import MoonIcon from './Moon/Moon';
 import SearchIcon from './Search/Search';
 import SunIcon from './Sun/Sun';
-import ThemeIcon from './Theme/Theme';
 
 export {
   ArrowIcon,
   BlogIcon,
   CloseIcon,
+  CogIcon,
   ContactIcon,
   CVIcon,
   HamburgerIcon,
@@ -21,5 +22,4 @@ export {
   MoonIcon,
   SearchIcon,
   SunIcon,
-  ThemeIcon,
 };
diff --git a/src/components/Settings/Settings.module.scss b/src/components/Settings/Settings.module.scss
new file mode 100644
index 0000000..fe6b17b
--- /dev/null
+++ b/src/components/Settings/Settings.module.scss
@@ -0,0 +1,17 @@
+@use "@styles/abstracts/functions" as fun;
+
+.title {
+  --icon-size: #{fun.convert-px(30)};
+
+  display: flex;
+  flex-flow: row nowrap;
+  gap: var(--spacing-2xs);
+  margin-bottom: var(--spacing-md);
+  color: var(--color-primary-dark);
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+
+  svg {
+    margin: 0;
+  }
+}
diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx
new file mode 100644
index 0000000..bfef851
--- /dev/null
+++ b/src/components/Settings/Settings.tsx
@@ -0,0 +1,17 @@
+import { CogIcon } from '@components/Icons';
+import ThemeToggle from '@components/ThemeToggle/ThemeToggle';
+import { t } from '@lingui/macro';
+import styles from './Settings.module.scss';
+
+const Settings = () => {
+  return (
+    <>
+      <div className={styles.title}>
+        <CogIcon /> {t`Settings`}
+      </div>
+      <ThemeToggle />
+    </>
+  );
+};
+
+export default Settings;
diff --git a/src/components/ThemeToggle/ThemeToggle.module.scss b/src/components/ThemeToggle/ThemeToggle.module.scss
index c780b96..36c91f7 100644
--- a/src/components/ThemeToggle/ThemeToggle.module.scss
+++ b/src/components/ThemeToggle/ThemeToggle.module.scss
@@ -9,6 +9,10 @@
   align-items: center;
 }
 
+.title {
+  margin-right: var(--spacing-xs);
+}
+
 .toggle {
   display: inline-flex;
   align-items: center;
diff --git a/src/components/ThemeToggle/ThemeToggle.tsx b/src/components/ThemeToggle/ThemeToggle.tsx
index 015201b..4b93ac9 100644
--- a/src/components/ThemeToggle/ThemeToggle.tsx
+++ b/src/components/ThemeToggle/ThemeToggle.tsx
@@ -22,7 +22,7 @@ const ThemeToggle = () => {
         onChange={() => setIsDarkTheme(!isDarkTheme)}
       />
       <label htmlFor="dark-theme" className={styles.label}>
-        <span className="screen-reader-text">{t`Activate dark theme`}</span>
+        <span className={styles.title}>{t`Theme:`}</span>
         <SunIcon />
         <span className={styles.toggle}></span>
         <MoonIcon />
diff --git a/src/components/Toolbar/Toolbar.module.scss b/src/components/Toolbar/Toolbar.module.scss
index 1814b99..45b24d8 100644
--- a/src/components/Toolbar/Toolbar.module.scss
+++ b/src/components/Toolbar/Toolbar.module.scss
@@ -15,6 +15,13 @@
   left: 0;
   z-index: 5;
   background: var(--color-bg);
+  border-top: fun.convert-px(4) solid;
+  border-image: radial-gradient(
+      ellipse at top,
+      var(--color-primary-lighter) 20%,
+      var(--color-primary) 100%
+    )
+    1;
   box-shadow: 0 fun.convert-px(-2) fun.convert-px(3) fun.convert-px(-1)
     var(--color-shadow);
 
@@ -31,6 +38,7 @@
       gap: var(--spacing-sm);
       width: auto;
       background: inherit;
+      border: none;
       box-shadow: none;
       position: relative;
       left: unset;
@@ -40,13 +48,21 @@
   }
 }
 
-.search {
+.menu {
   padding: var(--spacing-md);
   position: absolute;
   bottom: 100%;
   left: 0;
   right: 0;
   background: var(--color-bg);
+  border-top: fun.convert-px(4) solid;
+  border-bottom: fun.convert-px(4) solid;
+  border-image: radial-gradient(
+      ellipse at top,
+      var(--color-primary-lighter) 20%,
+      var(--color-primary) 100%
+    )
+    1;
   box-shadow: fun.convert-px(2) fun.convert-px(-2) fun.convert-px(3)
     fun.convert-px(-1) var(--color-shadow);
   transition: all 0.7s ease-in-out 0s;
@@ -68,7 +84,13 @@
       right: unset;
       top: 120%;
       bottom: unset;
-      background: var(--color-bg-opacity);
+      border: fun.convert-px(4) solid;
+      border-image: radial-gradient(
+          ellipse at top,
+          var(--color-primary-lighter) 20%,
+          var(--color-primary) 100%
+        )
+        1;
       box-shadow: fun.convert-px(2) fun.convert-px(2) fun.convert-px(3)
         fun.convert-px(1) var(--color-shadow);
       transform-origin: 50% -200%;
diff --git a/src/components/Toolbar/Toolbar.tsx b/src/components/Toolbar/Toolbar.tsx
index 615dfd5..771efa1 100644
--- a/src/components/Toolbar/Toolbar.tsx
+++ b/src/components/Toolbar/Toolbar.tsx
@@ -1,52 +1,62 @@
-import { ButtonSearch } from '@components/Buttons';
+import { ButtonToolbar } from '@components/Buttons';
 import MainNav from '@components/MainNav/MainNav';
 import SearchForm from '@components/SearchForm/SearchForm';
-import ThemeToggle from '@components/ThemeToggle/ThemeToggle';
+import Settings from '@components/Settings/Settings';
 import { useEffect, useState } from 'react';
 import styles from './Toolbar.module.scss';
 
 const Toolbar = () => {
   const [isNavOpened, setIsNavOpened] = useState<boolean>(false);
   const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false);
-  const [isThemeOpened, setIsThemeOpened] = useState<boolean>(false);
+  const [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(false);
 
   useEffect(() => {
     if (isNavOpened) {
       setIsSearchOpened(false);
-      setIsThemeOpened(false);
+      setIsSettingsOpened(false);
     }
   }, [isNavOpened]);
 
   useEffect(() => {
     if (isSearchOpened) {
       setIsNavOpened(false);
-      setIsThemeOpened(false);
+      setIsSettingsOpened(false);
     }
   }, [isSearchOpened]);
 
   useEffect(() => {
-    if (isThemeOpened) {
+    if (isSettingsOpened) {
       setIsNavOpened(false);
       setIsSearchOpened(false);
     }
-  }, [isThemeOpened]);
+  }, [isSettingsOpened]);
 
-  const searchClasses = `${styles.search} ${
-    isSearchOpened ? styles['search--opened'] : styles['search--closed']
+  const searchClasses = `${styles.menu} ${
+    isSearchOpened ? styles['menu--opened'] : styles['menu--closed']
+  }`;
+
+  const settingsClasses = `${styles.menu} ${
+    isSettingsOpened ? styles['menu--opened'] : styles['menu--closed']
   }`;
 
   return (
     <div className={styles.wrapper}>
       <MainNav isOpened={isNavOpened} setIsOpened={setIsNavOpened} />
-      <ButtonSearch
+      <ButtonToolbar
+        type="search"
         isActivated={isSearchOpened}
         setIsActivated={setIsSearchOpened}
       />
       <div className={searchClasses}>
         <SearchForm isOpened={isSearchOpened} />
       </div>
-      <div>
-        <ThemeToggle />
+      <ButtonToolbar
+        type="settings"
+        isActivated={isSettingsOpened}
+        setIsActivated={setIsSettingsOpened}
+      />
+      <div className={settingsClasses}>
+        <Settings />
       </div>
     </div>
   );