5 files changed, 90 insertions, 17 deletions
diff --git a/src/components/Buttons/ButtonSubmit/ButtonSubmit.tsx b/src/components/Buttons/ButtonSubmit/ButtonSubmit.tsx
index a2e493a..4725cad 100644
--- a/src/components/Buttons/ButtonSubmit/ButtonSubmit.tsx
+++ b/src/components/Buttons/ButtonSubmit/ButtonSubmit.tsx
@@ -1,8 +1,19 @@
+import { ReactNode } from 'react';
 import styles from '../Buttons.module.scss';
 
-const ButtonSubmit: React.FunctionComponent = ({ children }) => {
+type Modifier = 'search' | 'submit';
+
+const ButtonSubmit = ({
+  children,
+  modifier = 'submit',
+}: {
+  children: ReactNode;
+  modifier?: Modifier;
+}) => {
+  const withModifier = modifier === 'search' ? styles.search : styles.primary;
+
   return (
-    <button type="submit" className={`${styles.btn} ${styles.primary}`}>
+    <button type="submit" className={`${styles.btn} ${withModifier}`}>
       {children}
     </button>
   );
diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
index ea85c9b..2973b1f 100644
--- a/src/components/Buttons/Buttons.module.scss
+++ b/src/components/Buttons/Buttons.module.scss
@@ -1,4 +1,5 @@
 @use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
 
 .btn {
   display: block;
@@ -176,8 +177,7 @@
   }
 }
 
-.toolbar,
-.theme {
+.toolbar {
   display: block;
   width: var(--btn-size);
   height: var(--btn-size);
@@ -185,6 +185,16 @@
   background: none;
   border: none;
   font-size: var(--font-size-md);
+
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      &:hover,
+      &:focus {
+        transform: rotate(360deg);
+        transition: all 0.8s ease-in-out 0s;
+      }
+    }
+  }
 }
 
 .icon {
@@ -220,8 +230,7 @@
   z-index: 10;
 }
 
-.toolbar--activated,
-.theme--opened {
+.toolbar--activated {
   .icon {
     transform: rotateY(180deg);
   }
@@ -234,3 +243,28 @@
     transform: scale(1) rotateY(180deg);
   }
 }
+
+.search {
+  background: transparent;
+  margin-left: calc(var(--btn-size) * -1);
+  z-index: 5;
+  transition: all 0.3s ease-in-out 0s;
+
+  svg {
+    transform: scale(0.85);
+    transition: all 0.3s ease-in-out 0s;
+  }
+
+  &:hover,
+  &:focus {
+    svg {
+      transform: scale(0.85) rotate(20deg) translateY(3px);
+    }
+  }
+
+  &:active {
+    svg {
+      transform: scale(0.7);
+    }
+  }
+}
diff --git a/src/components/Form/Form.module.scss b/src/components/Form/Form.module.scss
index fcf8d15..577c3c8 100644
--- a/src/components/Form/Form.module.scss
+++ b/src/components/Form/Form.module.scss
@@ -54,3 +54,17 @@
 .required {
   color: var(--color-secondary);
 }
+
+.wrapper--search {
+  > input {
+    padding-right: calc(var(--btn-size) + var(--spacing-2xs));
+
+    &:hover ~ button {
+      transform: translate(fun.convert-px(-3), fun.convert-px(-3));
+    }
+
+    &:focus ~ button {
+      transform: translate(fun.convert-px(3), fun.convert-px(3));
+    }
+  }
+}
diff --git a/src/components/SearchForm/SearchForm.module.scss b/src/components/SearchForm/SearchForm.module.scss
new file mode 100644
index 0000000..4debfbb
--- /dev/null
+++ b/src/components/SearchForm/SearchForm.module.scss
@@ -0,0 +1,6 @@
+.title {
+  margin-bottom: var(--spacing-sm);
+  color: var(--color-primary-dark);
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+}
diff --git a/src/components/SearchForm/SearchForm.tsx b/src/components/SearchForm/SearchForm.tsx
index e37ba9e..c1a7ca7 100644
--- a/src/components/SearchForm/SearchForm.tsx
+++ b/src/components/SearchForm/SearchForm.tsx
@@ -1,8 +1,10 @@
 import { ButtonSubmit } from '@components/Buttons';
 import { Form, Input } from '@components/Form';
+import { SearchIcon } from '@components/Icons';
 import { t } from '@lingui/macro';
 import { useRouter } from 'next/router';
 import { FormEvent, useEffect, useRef, useState } from 'react';
+import styles from './SearchForm.module.scss';
 
 const SearchForm = ({ isOpened }: { isOpened: boolean }) => {
   const [query, setQuery] = useState('');
@@ -24,17 +26,23 @@ const SearchForm = ({ isOpened }: { isOpened: boolean }) => {
   };
 
   return (
-    <Form submitHandler={launchSearch} modifier="search">
-      <Input
-        ref={inputRef}
-        id="search-query"
-        name="search-query"
-        type="search"
-        value={query}
-        setValue={setQuery}
-      />
-      <ButtonSubmit>{t`Search`}</ButtonSubmit>
-    </Form>
+    <>
+      <div className={styles.title}>{t`Search`}</div>
+      <Form submitHandler={launchSearch} modifier="search">
+        <Input
+          ref={inputRef}
+          id="search-query"
+          name="search-query"
+          type="search"
+          value={query}
+          setValue={setQuery}
+        />
+        <ButtonSubmit modifier="search">
+          <SearchIcon />
+          <span className="screen-reader-text">{t`Search`}</span>
+        </ButtonSubmit>
+      </Form>
+    </>
   );
 };