diff --git a/src/components/Setting/FontColor/Colors/chosecolor.js b/src/components/Setting/FontColor/Colors/chosecolor.js
index 19125a4..e69de29 100644
--- a/src/components/Setting/FontColor/Colors/chosecolor.js
+++ b/src/components/Setting/FontColor/Colors/chosecolor.js
@@ -1,58 +0,0 @@
-import React from 'react';
-import '../../../style/chosecolor.scss';
-
-
-
-const Chosecolor = (props) => {
-    const {setcolor , isChecked} = props;
-    
-    const changeColorHandler = (value) => {
-        setcolor(value)
-    }
-    return (
-        <>  
-        {isChecked ?
-        <div className='dark-mood'>
-        <div className='nav-btn'>
-            <div>
-            <button onClick={() => changeColorHandler('dark-white')} id='red-btn-d' className='btn-color'>
-                الف
-            </button>
-        </div>
-        <div className='nav-btn'>
-            <button onClick={() => changeColorHandler('dark-brown')} id='green-btn-d' className='btn-color'>
-                الف
-            </button>
-        </div>
-        <div className='nav-btn'>
-            <button onClick={() => changeColorHandler('dark-blue')} id='blue-btn-d' className='btn-color'>
-                الف
-            </button>
-        </div>
-        </div>
-        </div>:
-            <div className='light-mood'>
-            <div className='nav-btn'>
-                <div>
-                    <button onClick={() => changeColorHandler('light-white')} id='red-btn-w' className='btn-color'>
-                        الف
-                    </button>
-                </div>
-                <div className='nav-btn'>
-                    <button onClick={() => changeColorHandler('light-brown')} id='green-btn-w' className='btn-color'>
-                        الف
-                    </button>
-                </div>
-                <div className='nav-btn'>
-                    <button onClick={() => changeColorHandler('light-blue')} id='blue-btn-w' className='btn-color'>
-                        الف
-                    </button>
-                </div>
-            </div>
-        </div>
-        }
-    </>
-    )
-}
-
-export default Chosecolor
diff --git a/src/components/Setting/FontColor/colors.js b/src/components/Setting/FontColor/colors.js
index 9accca0..b43a286 100644
--- a/src/components/Setting/FontColor/colors.js
+++ b/src/components/Setting/FontColor/colors.js
@@ -1,50 +1,109 @@
-import React , { useState } from 'react';
-import '../../../components/style/colorsComponents.scss';
-import PalletColorOutline from '../../image/PalletColorOutline.svg';
-import PalletColorbold from '../../image/PalletColorBold.svg';
-import Chosecolor from './Colors/chosecolor'
-import { Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap';
-
+import React, { useState } from "react";
+import "../../../components/style/colorsComponents.scss";
+import "../../../components/style/chosecolor.scss";
+import PalletColorOutline from "../../image/PalletColorOutline.svg";
+import PalletColorbold from "../../image/PalletColorBold.svg";
+import Chosecolor from "./Colors/chosecolor";
+import {
+  ButtonDropdown,
+  DropdownToggle,
+  DropdownMenu,
+  DropdownItem,
+} from "reactstrap";
 
 const Colors = (props) => {
-    const { setcolor, color} = props;
-    const [dropdownOpen, setDropdownOpen] = useState(false);
-    const toggle = () => setDropdownOpen(prevState => !prevState);
-    
+  const { setcolor, color } = props;
 
-    const [isChecked, setIsChecked] = useState(false)
+  const [dropdownOpen, setOpen] = useState(false);
+  const toggle = () => setOpen(!dropdownOpen);
+  const [isChecked, setIsChecked] = useState(false);
+  const [Icon, seticon] = useState(PalletColorOutline);
+  const changeIcone = () => {
+    seticon(Icon === PalletColorOutline ? PalletColorbold : PalletColorOutline);
+  };
 
-    const [Icon, seticon] = useState(PalletColorOutline);
-    const changeIcone = () => {
-        seticon(Icon===PalletColorOutline?PalletColorbold:PalletColorOutline);
-    };
+  const changeColorHandler = (value) => {
+    setcolor(value);
+  };
 
-    return (
-        <>
-        <nav className='main-colors-setting'>
-            <label class="switch">
-                <input type="checkbox"
-                onChange={() => setIsChecked(!isChecked)}
-                />
-                <span class="slider round"></span>
-            </label>
-            <Dropdown isOpen={dropdownOpen} toggle={toggle}>
-                <DropdownToggle id='dropdown-btn'>
-                <div onClick={()=>changeIcone()} >
-                    <img src={Icon} set="curved" className='palette-icon' alt='icon'/>
-                </div>
-                </DropdownToggle>
-                <DropdownMenu className='nav-menu'>
-                    <Chosecolor 
-                    isChecked={isChecked}
-                    setcolor={setcolor}
-                    color={color}
-                    />
-                </DropdownMenu>
-            </Dropdown>
-            </nav>
-        </>
-    )
-}
+  return (
+    <>
+      <label class="switch">
+        <input type="checkbox" onChange={() => setIsChecked(!isChecked)} />
+        <span class="slider round"></span>
+      </label>
+      <ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
+        <DropdownToggle>
+          <div onClick={() => changeIcone()}>
+            <img src={Icon} set="curved" className="palette-icon" alt="icon" />
+          </div>
+        </DropdownToggle>
+        <DropdownMenu>
+          {isChecked ? (
+            <>
+              <DropdownItem>
+                <button
+                  onClick={() => changeColorHandler("dark-white")}
+                  id="red-btn-d"
+                  className="btn-color"
+                >
+                  الف
+                </button>
+              </DropdownItem>
+              <DropdownItem>
+                <button
+                  onClick={() => changeColorHandler("dark-brown")}
+                  id="green-btn-d"
+                  className="btn-color"
+                >
+                  الف
+                </button>
+              </DropdownItem>
+              <DropdownItem>
+                <button
+                  onClick={() => changeColorHandler("dark-blue")}
+                  id="blue-btn-d"
+                  className="btn-color"
+                >
+                  الف
+                </button>
+              </DropdownItem>
+            </>
+          ) : (
+            <>
+              <DropdownItem>
+                <button
+                  onClick={() => changeColorHandler("light-white")}
+                  id="red-btn-w"
+                  className="btn-color"
+                >
+                  الف
+                </button>
+              </DropdownItem>
+              <DropdownItem>
+                <button
+                  onClick={() => changeColorHandler("light-brown")}
+                  id="green-btn-w"
+                  className="btn-color"
+                >
+                  الف
+                </button>
+              </DropdownItem>
+              <DropdownItem>
+                <button
+                  onClick={() => changeColorHandler("light-blue")}
+                  id="blue-btn-w"
+                  className="btn-color"
+                >
+                  الف
+                </button>
+              </DropdownItem>
+            </>
+          )}
+        </DropdownMenu>
+      </ButtonDropdown>
+    </>
+  );
+};
 
-export default Colors
\ No newline at end of file
+export default Colors;
diff --git a/src/components/footer/Item.tsx b/src/components/footer/Item.tsx
index 15701e0..36b3939 100644
--- a/src/components/footer/Item.tsx
+++ b/src/components/footer/Item.tsx
@@ -15,10 +15,11 @@ const Container = styled.div`
   flex-basis: 100%;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  padding-right: 5px;
 
   & > span {
     color: ${palette.white};
diff --git a/src/components/style/_btnStyle.scss b/src/components/style/_btnStyle.scss
index 3f37ea5..2de2754 100644
--- a/src/components/style/_btnStyle.scss
+++ b/src/components/style/_btnStyle.scss
@@ -1,7 +1,8 @@
 @import './colors';
 
 .btn{
-    border: $green solid 1.5px  !important;
+    background-color: #fff !important;
+    border: none !important;
     padding: 0px 3px 4px 3px !important;
     height: 1.5rem;
     color: $green !important;
@@ -15,7 +16,6 @@
 
 .btn:hover{
     color: $white !important;
-    background-color: $green !important;
 }
 .btn:focus {
     box-shadow: none !important;
diff --git a/src/components/style/colorsComponents.scss b/src/components/style/colorsComponents.scss
index 143aea1..a541e83 100644
--- a/src/components/style/colorsComponents.scss
+++ b/src/components/style/colorsComponents.scss
@@ -1,4 +1,4 @@
-@import './colors';
+@import "./colors";
 
 .switch {
   position: relative;
@@ -8,7 +8,7 @@
   margin-right: 5px;
 }
 
-.switch input { 
+.switch input {
   opacity: 0;
   width: 0;
   height: 0;
@@ -22,8 +22,8 @@
   right: 0;
   bottom: 0;
   background-color: rgb(187, 187, 187);
-  -webkit-transition: .4s;
-  transition: .4s;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
 }
 
 .slider:before {
@@ -34,10 +34,9 @@
   left: 2px;
   bottom: 3px;
   background-color: white;
-  transition: .4s;
+  transition: 0.4s;
 }
 
-
 input:checked + .slider {
   background-color: $green;
 }
@@ -46,7 +45,6 @@ input:checked + .slider:before {
   background-color: black;
 }
 
-
 input:focus + .slider {
   box-shadow: 0 0 1px $green;
 }
@@ -64,25 +62,39 @@ input:checked + .slider:before {
   border-radius: 50%;
 }
 
-.main-colors-setting{
+.main-colors-setting {
   display: flex;
   align-items: center;
 }
 
-
-
-#dropdown-btn{
+#dropdown-btn {
   background-color: white !important;
   border: none !important ;
   padding: 0px !important;
   margin: 0px !important;
 }
 
-#dropdown-btn:hover{
+#dropdown-btn:hover {
   color: $green !important;
 }
 
-.palette-icon{
+.palette-icon {
   width: 1.4rem;
   margin-top: 2px;
-}
\ No newline at end of file
+}
+
+.dropdown-menu{
+  position: absolute !important;
+  z-index: 1000 !important;
+  margin: 0;
+  text-align: center !important;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.15) !important;
+  border-radius: 0.25rem;
+  min-width: 0rem !important;
+  padding: 0.5rem !important;
+
+  .dropdown-item{
+    padding: 0 !important;
+  }
+}
diff --git a/src/components/style/setting.scss b/src/components/style/setting.scss
index 4c5ff16..13811c7 100644
--- a/src/components/style/setting.scss
+++ b/src/components/style/setting.scss
@@ -3,6 +3,7 @@
     align-items: center;
     padding: 0.25rem 1rem;
     justify-content: space-between;
+    z-index: 1000;
 
     .nav-items{
         display: flex;
diff --git a/src/containers/Header.tsx b/src/containers/Header.tsx
index fc0c877..662cebd 100644
--- a/src/containers/Header.tsx
+++ b/src/containers/Header.tsx
@@ -46,7 +46,12 @@ const Header = ({
               <nav
                 style={
                   window.innerWidth < 768
-                    ? { width: "150px", textOverflow: "ellipsis" , direction:'rtl' }
+                    ? {
+                        width: "150px",
+                        textOverflow: "ellipsis",
+                        direction: "rtl",
+                        justifyContent: "flex-start !important",
+                      }
                     : { border: "none" }
                 }
               >