diff --git a/package-lock.json b/package-lock.json
index d676a84..c89c93f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "react-helmet": "^6.1.0",
         "react-helmet-async": "^1.3.0",
         "react-hot-toast": "^2.4.0",
+        "react-icons": "^4.9.0",
         "react-loader-spinner": "^5.3.4",
         "react-private-route": "^1.1.2",
         "react-redux": "^8.0.5",
@@ -12014,6 +12015,14 @@
         "react-dom": ">=16"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.9.0.tgz",
+      "integrity": "sha512-ijUnFr//ycebOqujtqtV9PFS7JjhWg0QU6ykURVHuL4cbofvRCf3f6GMn9+fBktEFQOIVZnuAYLZdiyadRQRFg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -23629,6 +23638,12 @@
         "goober": "^2.1.10"
       }
     },
+    "react-icons": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.9.0.tgz",
+      "integrity": "sha512-ijUnFr//ycebOqujtqtV9PFS7JjhWg0QU6ykURVHuL4cbofvRCf3f6GMn9+fBktEFQOIVZnuAYLZdiyadRQRFg==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index 16c078e..258ef39 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "react-helmet": "^6.1.0",
     "react-helmet-async": "^1.3.0",
     "react-hot-toast": "^2.4.0",
+    "react-icons": "^4.9.0",
     "react-loader-spinner": "^5.3.4",
     "react-private-route": "^1.1.2",
     "react-redux": "^8.0.5",
diff --git a/src/components/PrivateRoute.js b/src/components/PrivateRoute.js
index 1a748cc..8a950d8 100644
--- a/src/components/PrivateRoute.js
+++ b/src/components/PrivateRoute.js
@@ -1,10 +1,8 @@
 import { Navigate } from 'react-router-dom';
 import { useAuth } from 'hooks/useAuth';
 
-/**
- * - If the route is private and the user is logged in, render the component
- * - Otherwise render <Navigate> to redirectTo
- */
+//  - If the route is private and the user is logged in, render the component
+//  - Otherwise render <Navigate> to redirectTo
 
 export const PrivateRoute = ({ component: Component, redirectTo = '/' }) => {
   const { isLoggedIn, isRefreshing } = useAuth();
diff --git a/src/components/RestrictedRoute.js b/src/components/RestrictedRoute.js
index b9315ed..0ebbb9d 100644
--- a/src/components/RestrictedRoute.js
+++ b/src/components/RestrictedRoute.js
@@ -1,10 +1,8 @@
 import { useAuth } from 'hooks/useAuth';
 import { Navigate } from 'react-router-dom';
 
-/**
- * - If the route is restricted and the user is logged in, render a <Navigate> to redirectTo
- * - Otherwise render the component
- */
+// - If the route is restricted and the user is logged in, render a <Navigate> to redirectTo
+// - Otherwise render the component
 
 export const RestrictedRoute = ({ component: Component, redirectTo = '/' }) => {
   const { isLoggedIn } = useAuth();
diff --git a/src/components/authNav/AuthNav.styled.jsx b/src/components/authNav/AuthNav.styled.jsx
index 982123c..ff8063c 100644
--- a/src/components/authNav/AuthNav.styled.jsx
+++ b/src/components/authNav/AuthNav.styled.jsx
@@ -6,9 +6,14 @@ export const NavLink = styled(Link)`
   text-decoration: none;
   padding: 12px;
   font-weight: 700;
-  color: #2a363b;
+  color: ${props => `${props.theme.colors.primary}`};
 
   &.active {
-    color: #ea8d6b;
+    color: ${props => `${props.theme.colors.hover}`};
+  }
+
+  :hover,
+  :focus {
+    color: ${props => `${props.theme.colors.hover}`};
   }
 `;
diff --git a/src/components/constants/Theme.js b/src/components/constants/Theme.js
index 90f0a46..4f7cb92 100644
--- a/src/components/constants/Theme.js
+++ b/src/components/constants/Theme.js
@@ -1,10 +1,11 @@
 export const theme = {
   colors: {
     bg: 'rgba(196, 186, 186, 0.12)',
-    bd: '#f6c6a7',
+    bd: 'rgb(246, 218, 167)',
     font: 'rgb(126, 124, 124)',
-    green: 'rgb(169, 251, 46)',
-    red: 'rgb(241, 14, 14)',
+    hover: 'rgb(158, 47, 9)',
+    primary: 'rgb(237, 155, 107)',
+    btnText: 'rgb(68, 68, 68)',
     white: '#ffffff',
   },
 };
diff --git a/src/components/contactForm/ContactForm.js b/src/components/contactForm/ContactForm.js
index 307194e..5ad7c77 100644
--- a/src/components/contactForm/ContactForm.js
+++ b/src/components/contactForm/ContactForm.js
@@ -82,7 +82,7 @@ export const ContactForm = () => {
           />
           <ErrorMessage name="number" component="span" />
         </FormLabel>
-        <ButtonSubmit type="submit">Add contact</ButtonSubmit>
+        <ButtonSubmit type="submit">Add</ButtonSubmit>
         <Toaster position="top-left" toastOptions={{ duration: 3000 }} />
       </Form>
     </Formik>
diff --git a/src/components/contactForm/ContactForm.styled.jsx b/src/components/contactForm/ContactForm.styled.jsx
index 7014371..c9d6565 100644
--- a/src/components/contactForm/ContactForm.styled.jsx
+++ b/src/components/contactForm/ContactForm.styled.jsx
@@ -39,7 +39,8 @@ export const ButtonSubmit = styled.button`
   font-family: arial, sans-serif;
   font-size: 15px;
   font-weight: bold;
-  color: rgb(68, 68, 68);
+  color: ${props => `${props.theme.colors.btnText}`};
+
   text-transform: capitalize;
   text-decoration: none;
   user-select: none;
@@ -51,7 +52,7 @@ export const ButtonSubmit = styled.button`
   transition: all 0.218s ease 0s;
   :hover,
   :focus {
-    color: rgb(24, 24, 24);
+    color: ${props => `${props.theme.colors.hover}`};
     border: 1px solid rgb(198, 198, 198);
     background: #f7f7f7 linear-gradient(#f7f7f7, #f1f1f1);
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
diff --git a/src/components/contactItem/ContactItem.styled.jsx b/src/components/contactItem/ContactItem.styled.jsx
index 7bf3bd7..0403f30 100644
--- a/src/components/contactItem/ContactItem.styled.jsx
+++ b/src/components/contactItem/ContactItem.styled.jsx
@@ -36,12 +36,9 @@ export const FirstLetterBox = styled.div`
 
 export const Name = styled.div`
   width: 200px;
-  /* border: 1px solid red; */
   margin-left: 25px;
 `;
 
 export const Number = styled.div`
   width: 200px;
-  /* border: 1px solid blue; */
-  /* margin-left: 10px; */
 `;
diff --git a/src/components/deleteContactWarning/DeleteContactWarning.styled.jsx b/src/components/deleteContactWarning/DeleteContactWarning.styled.jsx
index a4d7a8e..34b297c 100644
--- a/src/components/deleteContactWarning/DeleteContactWarning.styled.jsx
+++ b/src/components/deleteContactWarning/DeleteContactWarning.styled.jsx
@@ -19,7 +19,6 @@ export const DeleteModal = styled.div`
 
 export const Text = styled.div`
   font-weight: bold;
-  /* margin-right: 10px; */
 `;
 
 export const ButtonWrapper = styled.div`
diff --git a/src/components/loader/Loader.js b/src/components/loader/Loader.js
index 40193d4..5eaf4d0 100644
--- a/src/components/loader/Loader.js
+++ b/src/components/loader/Loader.js
@@ -6,7 +6,7 @@ export const Loader = ({ width }) => {
   return (
     <LoaderBox>
       <RotatingLines
-        strokeColor={theme.colors.bd}
+        strokeColor={theme.colors.hover}
         strokeWidth="5"
         animationDuration="0.75"
         width={width}
diff --git a/src/components/navigation/Navigation.styled.jsx b/src/components/navigation/Navigation.styled.jsx
index 982123c..ff8063c 100644
--- a/src/components/navigation/Navigation.styled.jsx
+++ b/src/components/navigation/Navigation.styled.jsx
@@ -6,9 +6,14 @@ export const NavLink = styled(Link)`
   text-decoration: none;
   padding: 12px;
   font-weight: 700;
-  color: #2a363b;
+  color: ${props => `${props.theme.colors.primary}`};
 
   &.active {
-    color: #ea8d6b;
+    color: ${props => `${props.theme.colors.hover}`};
+  }
+
+  :hover,
+  :focus {
+    color: ${props => `${props.theme.colors.hover}`};
   }
 `;
diff --git a/src/components/userMenu/UserMenu.js b/src/components/userMenu/UserMenu.js
index 0e65d54..da501ae 100644
--- a/src/components/userMenu/UserMenu.js
+++ b/src/components/userMenu/UserMenu.js
@@ -1,7 +1,7 @@
 import { useDispatch } from 'react-redux';
 import { logOut } from 'redux/auth/operations';
 import { useAuth } from 'hooks/useAuth';
-import { Wrapper, Username, Button } from './UserMenu.styled';
+import { Wrapper, Username, Button, UserIcon } from './UserMenu.styled';
 
 export const UserMenu = () => {
   const dispatch = useDispatch();
@@ -9,6 +9,7 @@ export const UserMenu = () => {
 
   return (
     <Wrapper>
+      <UserIcon />
       <Username>{user.name}</Username>
       <Button type="button" onClick={() => dispatch(logOut())}>
         Logout
diff --git a/src/components/userMenu/UserMenu.styled.jsx b/src/components/userMenu/UserMenu.styled.jsx
index 7684118..84ffa18 100644
--- a/src/components/userMenu/UserMenu.styled.jsx
+++ b/src/components/userMenu/UserMenu.styled.jsx
@@ -1,5 +1,10 @@
 import styled from 'styled-components';
 import { ButtonSubmit } from 'components/contactForm/ContactForm.styled';
+import { FaUserAlt } from 'react-icons/fa';
+
+export const UserIcon = styled(FaUserAlt)`
+  fill: ${props => `${props.theme.colors.primary}`};
+`;
 
 export const Wrapper = styled.div`
   display: flex;
@@ -9,6 +14,7 @@ export const Wrapper = styled.div`
 
 export const Username = styled.p`
   font-weight: 700;
+  color: ${props => `${props.theme.colors.hover}`};
 `;
 
 export const Button = styled(ButtonSubmit)`
diff --git a/src/pages/contacts/ContactsPage.js b/src/pages/contacts/ContactsPage.js
index 7f18529..37f335f 100644
--- a/src/pages/contacts/ContactsPage.js
+++ b/src/pages/contacts/ContactsPage.js
@@ -19,6 +19,8 @@ import { ContactList } from 'components/contactList/ContactList';
 import { Filter } from 'components/filter/Filter';
 import {
   ButtonAdd,
+  ShowIcon,
+  HideIcon,
   Phonebook,
   SecondTitle,
   UpperBox,
@@ -56,14 +58,14 @@ const ContactsPage = () => {
           <SecondTitle>Contacts</SecondTitle>
           {isLoading && !error && <Loader width={96} />}
           <ButtonAdd type="button" onClick={handleOpenAddForm}>
-            +
+            {!isAddFormOpen ? <ShowIcon /> : <HideIcon />}
           </ButtonAdd>
         </UpperBox>
         {isAddFormOpen && <ContactForm />}
         <Headers>
           <Total>Total: {contacts?.length}</Total>
-          <Name>Name</Name>
-          <Number>Number</Number>
+          <Name>Name:</Name>
+          <Number>Number:</Number>
           <Filter />
         </Headers>
         <div>
diff --git a/src/pages/contacts/ContactsPage.styled.jsx b/src/pages/contacts/ContactsPage.styled.jsx
index 128be82..accbc6b 100644
--- a/src/pages/contacts/ContactsPage.styled.jsx
+++ b/src/pages/contacts/ContactsPage.styled.jsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { ButtonSubmit } from 'components/contactForm/ContactForm.styled';
+import { MdExpandMore, MdExpandLess } from 'react-icons/md';
 
 export const Phonebook = styled.div`
   margin-left: auto;
@@ -11,6 +11,7 @@ export const Phonebook = styled.div`
 
 export const SecondTitle = styled.h2`
   display: inline;
+  color: ${props => `${props.theme.colors.hover}`};
 `;
 
 export const UpperBox = styled.div`
@@ -18,17 +19,49 @@ export const UpperBox = styled.div`
   display: flex;
   align-items: center;
   border-bottom: ${props => `1px solid ${props.theme.colors.bd}`};
-  
 `;
 
-export const ButtonAdd = styled(ButtonSubmit)`
-  margin: 0;
-  margin-left: 15px;
-  padding: 0.2em 0.6em;
+export const ButtonAdd = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 8px;
+  cursor: pointer;
+`;
+
+export const ShowIcon = styled(MdExpandMore)`
+  width: 34px;
+  height: 34px;
+  fill: ${props => `${props.theme.colors.primary}`};
+  border-radius: 2px;
+  border: 1px solid rgba(0, 0, 0, 0);
+  transition: all 0.218s ease 0s;
+
+  :hover,
+  :focus {
+    fill: ${props => `${props.theme.colors.hover}`};
+    border: 1px solid rgb(198, 198, 198);
+    background: #f7f7f7 linear-gradient(#f7f7f7, #f1f1f1);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
+`;
+
+export const HideIcon = styled(MdExpandLess)`
+  width: 34px;
+  height: 34px;
+  fill: ${props => `${props.theme.colors.primary}`};
+  border-radius: 2px;
+  border: 1px solid rgba(0, 0, 0, 0);
+
+  transition: all 0.218s ease 0s;
 
-  background: #ed8e6b;
-  color: rgb(247, 239, 239);
-  font-size: 18px;
+  :hover,
+  :focus {
+    fill: ${props => `${props.theme.colors.hover}`};
+    border: 1px solid rgb(198, 198, 198);
+    background: #f7f7f7 linear-gradient(#f7f7f7, #f1f1f1);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
 `;
 
 export const Headers = styled.div`
diff --git a/src/pages/home/HomePage.js b/src/pages/home/HomePage.js
index 8e80b95..a91d558 100644
--- a/src/pages/home/HomePage.js
+++ b/src/pages/home/HomePage.js
@@ -1,6 +1,5 @@
 import { Wrapper, HomePageImage } from 'pages/home/HomePage.styled';
 import { NavLink } from 'components/navigation/Navigation.styled';
-// import Animate, { Pulse } from 'animate-css-styled-components';
 
 const HomePage = () => {
   return (
diff --git a/src/redux/contacts/contactsSlice.js b/src/redux/contacts/contactsSlice.js
index a717a18..1cfef7a 100644
--- a/src/redux/contacts/contactsSlice.js
+++ b/src/redux/contacts/contactsSlice.js
@@ -2,11 +2,6 @@ import { createSlice, isAnyOf } from '@reduxjs/toolkit';
 import { addContact, deleteContact, fetchContacts } from './operations';
 import { logOut } from 'redux/auth/operations';
 
-// const handleRejected = (state, action) => {
-//   state.isLoading = false;
-//   state.error = action.payload;
-// };
-
 const contactsSlice = createSlice({
   name: 'contacts',
   initialState: {
diff --git a/src/services.js b/src/services.js
deleted file mode 100644
index 8b13789..0000000
--- a/src/services.js
+++ /dev/null
@@ -1 +0,0 @@
-