diff --git a/public/icons/svg/down-dark.svg b/public/icons/svg/down-dark.svg
new file mode 100644
index 0000000..a27e45e
--- /dev/null
+++ b/public/icons/svg/down-dark.svg
@@ -0,0 +1,8 @@
+<svg width="16.000000" height="16.000000" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs/>
+	<rect id="Icons/Chevron (Arrow Down)" width="16.000000" height="16.000000" fill="#FFFFFF" fill-opacity="0"/>
+	<path id="Vector (Stroke)" d="M12.4713 5.52863C12.7317 5.78899 12.7317 6.2111 12.4713 6.47144L8.47131 10.4714C8.21106 10.7318 7.78894 10.7318 7.52856 10.4714L3.52856 6.47144C3.26819 6.2111 3.26819 5.78899 3.52856 5.52863C3.78894 5.26829 4.21106 5.26829 4.47131 5.52863L8 9.05723L11.5286 5.52863C11.7889 5.26829 12.2111 5.26829 12.4713 5.52863Z" fill="#313237" fill-opacity="1.000000" fill-rule="evenodd"/>
+</svg>
diff --git a/src/components/AddToFavButton/AddToFavButton.scss b/src/components/AddToFavButton/AddToFavButton.scss
index 99db4f6..019b83d 100644
--- a/src/components/AddToFavButton/AddToFavButton.scss
+++ b/src/components/AddToFavButton/AddToFavButton.scss
@@ -1,18 +1,25 @@
 @import '../../styles/utils/mixins';
 
-.iconFavour {
+.add-to-fav {
   height: 40px;
   width: 40px;
-  border: 1px solid var(--color-icons);
+  border: 1px solid var(--add-to-fav-borger);
   display: flex;
   justify-content: center;
+  background: transparent;
+  background-color: var(--add-to-fav-bg);
   align-items: center;
   cursor: pointer;
 
-  @include hover(border-color, var(--color-primary));
+  @include hover(border-color, var(--add-to-fav-borger-hover));
+  @include hover(background-color, var(--add-to-fav-bg-hover));
 
   &--added {
+    background-color: transparent;
     border: 1px solid var(--color-elements);
-    filter: var(--icon-filter); //new
   }
 }
+
+.icon-fav--added{
+  filter: var(--icon-filter);
+}
diff --git a/src/components/AddToFavButton/AddToFavButton.tsx b/src/components/AddToFavButton/AddToFavButton.tsx
index 60c8752..a167a0a 100644
--- a/src/components/AddToFavButton/AddToFavButton.tsx
+++ b/src/components/AddToFavButton/AddToFavButton.tsx
@@ -27,12 +27,14 @@ export const AddToFavButton: React.FC<Props> = ({ product }) => {
   };
 
   return (
-    <div
-      className={cn('iconFavour', { 'iconFavour--added': isProductAdded })}
+    <button
+      className={cn('add-to-fav', { 'add-to-fav--added': isProductAdded })}
       title="Add to favourites"
       onClick={handleClick}
     >
-      <i className={cn('ico ico-fav', { 'ico-fav-red': isProductAdded })}></i>
-    </div>
+      <div className={cn('icon-fav', { 'icon-fav--added': isProductAdded })}>
+        <i className={cn('ico ico-fav', { 'ico-fav-red': isProductAdded })}></i>
+      </div>
+    </button>
   );
 };
diff --git a/src/components/BreadCrumbs/BreadCrumbs.tsx b/src/components/BreadCrumbs/BreadCrumbs.tsx
index 5b1133f..79b6257 100644
--- a/src/components/BreadCrumbs/BreadCrumbs.tsx
+++ b/src/components/BreadCrumbs/BreadCrumbs.tsx
@@ -8,7 +8,7 @@ export const BreadCrumbs: React.FC = () => {
 
   return (
     <div className="bread-crumbs">
-      <Link to="/">
+      <Link to="/" title='Return to the Homepage'>
         <i className="ico ico-home" />
       </Link>
       {pathnames.map((value, index) => {
diff --git a/src/components/NewHeader/DesktopHeader/DesktopHeader.tsx b/src/components/NewHeader/DesktopHeader/DesktopHeader.tsx
index 1fc1a5d..884f155 100644
--- a/src/components/NewHeader/DesktopHeader/DesktopHeader.tsx
+++ b/src/components/NewHeader/DesktopHeader/DesktopHeader.tsx
@@ -33,7 +33,7 @@ export const DesktopHeader: FC = () => {
       <nav className="nav">
         <ul className="nav__list">
           {links.map(link => (
-            <li className="nav__item" key={link.link}>
+            <li className="nav__item" key={link.title}>
               <NavLink to={link.link} className="nav__link">
                 {link.title}
               </NavLink>
diff --git a/src/components/NewHeader/MobileHeader/MobileHeader.tsx b/src/components/NewHeader/MobileHeader/MobileHeader.tsx
index f1dc9f3..c94d0fa 100644
--- a/src/components/NewHeader/MobileHeader/MobileHeader.tsx
+++ b/src/components/NewHeader/MobileHeader/MobileHeader.tsx
@@ -27,12 +27,8 @@ export const MobileHeader: FC = () => {
   return (
     <>
       <header className="header">
-        <NavLink to="/" className="header__logo-link">
-          <img
-            src={theme === 'light' ? 'icons/logo.svg' : 'icons/logo-dark.svg'}
-            alt="Nice Gadgets logo"
-            className="logo"
-          />
+        <NavLink to="/" className="header__logo-link" onClick={handleMenuClose}>
+          <img src={theme === 'light' ? 'icons/logo.svg' : 'icons/logo-dark.svg'} alt="Nice Gadgets logo" className="logo" />
         </NavLink>
 
         <div className="header__buttons">
@@ -45,7 +41,7 @@ export const MobileHeader: FC = () => {
           </div>
 
           <button className="menu-button" onClick={toggleMenuOpen}>
-            <div className={`ico ${isMenuOpen ? 'ico-close' : 'ico-menu'}`} />
+            <div className={`ico ${isMenuOpen ? 'ico-close-dark' : 'ico-menu'}`} />
           </button>
         </div>
       </header>
@@ -54,7 +50,7 @@ export const MobileHeader: FC = () => {
         <nav className="nav">
           <ul className="nav__list">
             {links.map(link => (
-              <li className="nav__item" key={link.link}>
+              <li className="nav__item" key={link.title}>
                 <NavLink
                   to={link.link}
                   className="nav__link"
diff --git a/src/pages/ProductsPage/DropDown/DropDown.scss b/src/pages/ProductsPage/DropDown/DropDown.scss
index 915a0f9..31a890e 100644
--- a/src/pages/ProductsPage/DropDown/DropDown.scss
+++ b/src/pages/ProductsPage/DropDown/DropDown.scss
@@ -21,28 +21,33 @@
     align-items: center;
     justify-content: space-between;
     height: 40px;
-    border: 1px solid #b4bdc3;
+    background-color: var(--dropdown-mainbutton-bg-color);
+    border: 1px solid var(--dropdown-mainbutton-border-color);
 
     @include buttons-text;
 
     &:hover {
-      border: 1px solid #89939a;
+      border-color: var(--dropdown-mainbutton-border-hover);
     }
 
     &--active {
-      border: 1px solid #313237;
+      border-color: var(--dropdown-mainbutton-border-focused);
+
+      &:hover {
+        border-color: var(--dropdown-mainbutton-border-focused);
+      }
     }
   }
 
   &__bottom {
     min-width: 100%;
-    background-color: #fff;
+    background-color: var(--page-bg-color);
     position: absolute;
     top: 44px;
     padding-block: 8px;
     display: flex;
     flex-direction: column;
-    border: 1px solid #e2e6e9;
+    border: 1px solid var(--dropdown-options-border-color);
     box-shadow: 0px 2px 15px 0px #0000000d;
     opacity: 0;
     transform: translateY(-5);
@@ -53,6 +58,7 @@
       transform $effect-duration;
 
     &--active {
+      z-index: 1;
       opacity: 1;
       transform: translateY(0);
       pointer-events: all;
@@ -67,8 +73,8 @@
     color: var(--color-secondary);
 
     &:hover {
-      background: #fafbfc;
-      color: var(--dropdown-hover-color);
+      background: var(--dropdown-option-hover-color);
+      color: var(--color-primary);
     }
   }
 }
diff --git a/src/pages/ProductsPage/Pagination/Pagination.scss b/src/pages/ProductsPage/Pagination/Pagination.scss
index dd7bebb..f20973b 100644
--- a/src/pages/ProductsPage/Pagination/Pagination.scss
+++ b/src/pages/ProductsPage/Pagination/Pagination.scss
@@ -36,8 +36,8 @@ $pageItem-size: 32px;
     justify-content: center;
     padding: 0;
     border: none;
-    background: none;
-    border: 1px solid var(--color-elements);
+    background-color: var( --pagin-number-bg-color);
+    border: 1px solid var(--pagin-number-border);
     box-sizing: border-box;
     height: $pageItem-size;
     width: $pageItem-size;
@@ -49,13 +49,14 @@ $pageItem-size: 32px;
     @include hover(border-color, var(--color-secondary));
 
     &--active {
-      background: var(--color-primary);
-      border-color: var(--color-primary);
-      color: #fff;
+      background: var(--pagin-number-bg-active);
+      border-color: var(--pagin-number-border-active);
+      color: var(--pagin-number-text-color-active);
     }
 
     &--arrow {
-      border: 1px solid #b4bdc3;
+      background-color: var(--pagin-button-bg);
+      border: 1px solid var(--pagin-button-border);
     }
   }
 
diff --git a/src/pages/ProductsPage/Pagination/Pagination.tsx b/src/pages/ProductsPage/Pagination/Pagination.tsx
index 4676193..e61044f 100644
--- a/src/pages/ProductsPage/Pagination/Pagination.tsx
+++ b/src/pages/ProductsPage/Pagination/Pagination.tsx
@@ -113,6 +113,7 @@ export const Pagination: FC<Props> = ({
         <button
           className="pagination__page pagination__page--arrow"
           onClick={() => onPageChange(currentPage - 1)}
+          title='Go one page back'
         >
           <i className="ico ico-left-dark" />
         </button>
@@ -150,6 +151,7 @@ export const Pagination: FC<Props> = ({
         <button
           className="pagination__page pagination__page--arrow"
           onClick={() => onPageChange(currentPage + 1)}
+          title='Go one page forward'
         >
           <i className="ico ico-right-dark" />
         </button>
diff --git a/src/styles/utils/_icons.scss b/src/styles/utils/_icons.scss
index 7efe0a0..596f9c3 100644
--- a/src/styles/utils/_icons.scss
+++ b/src/styles/utils/_icons.scss
@@ -53,7 +53,7 @@
   }
 
   &-down {
-    background-image: url('../../../public/icons/svg/down.svg');
+    background-image: url('../../../public/icons/svg/down-dark.svg');
   }
 
   &-close {
diff --git a/src/styles/utils/_theme-set.scss b/src/styles/utils/_theme-set.scss
index b71fe5a..b1d0b2d 100644
--- a/src/styles/utils/_theme-set.scss
+++ b/src/styles/utils/_theme-set.scss
@@ -33,6 +33,28 @@
   --product-card-bg-color: var(--color-white);
 
   --icon-filter: none;
+
+  --dropdown-mainbutton-bg-color: var(--page-bg-color);
+  --dropdown-mainbutton-border-color: var(--color-icons);
+  --dropdown-mainbutton-border-hover: var(--color-secondary);
+  --dropdown-mainbutton-border-focused: var(--color-primary);
+  --dropdown-options-border-color: var(--color-elements);
+  --dropdown-option-hover-color: var(--color-hover-background);
+
+  --add-to-fav-bg: var(--page-bg-color);
+  --add-to-fav-bg-hover: var(--page-bg-color);
+  --add-to-fav-borger: var(--color-icons);
+  --add-to-fav-borger-hover: var(--color-primary);
+
+  --pagin-number-bg-color: var(--page-bg-color);
+  --pagin-number-bg-active: var(--color-primary);
+  --pagin-number-border: var(--color-elements);
+  --pagin-number-border-active: var(--color-primary);
+  --pagin-number-text-color: var(--color-primary);
+  --pagin-number-text-color-active: var(--color-white);
+
+  --pagin-button-bg: var(--page-bg-color);
+  --pagin-button-border: var(--color-icons);
 }
 
 [theme='dark'] {
@@ -75,4 +97,29 @@
   --color-button-hover: #a378ff;
   --color-card-background: #161827;
   --color-element-selected: #323542;
+
+  //dropdown
+  --dropdown-mainbutton-bg-color: var(--color-element-selected);
+  --dropdown-mainbutton-border-color: var(--color-element-selected);
+  --dropdown-mainbutton-border-hover: var(--color-hover-background);
+  --dropdown-mainbutton-border-focused: var(--color-button);
+  --dropdown-options-border-color: var(--color-elements);
+  --dropdown-option-hover-color: var(--color-element-selected);
+
+  //add to fav
+  --add-to-fav-bg: var(--color-element-selected);
+  --add-to-fav-bg-hover: var(--color-hover-background);
+  --add-to-fav-borger: var(--color-element-selected);
+  --add-to-fav-borger-hover: var(--color-hover-background);
+
+  //pagination
+  --pagin-number-bg-color: var(--color-card-background);
+  --pagin-number-bg-active: var(--color-button);
+  --pagin-number-border: var(--color-card-background);
+  --pagin-number-border-active: var(--color-button);
+  --pagin-number-text-color: var(--color-primary);
+  --pagin-number-text-color-active: var(--color-primary);
+
+  --pagin-button-bg: var(--color-element-selected);
+  --pagin-button-border: var(--color-element-selected);
 }