diff --git a/blog/src/App.css b/blog/src/App.css
index bbaf920..684c762 100644
--- a/blog/src/App.css
+++ b/blog/src/App.css
@@ -20,11 +20,12 @@
 }
 
 
-.active {
+.active span {
   color: #595959;
   background-color: rgba(141, 141, 141, 0.234);
   border-radius: 20px;
 }
+
 .noDark {
   isolation: isolate;
 }
diff --git a/blog/src/component/Header.jsx b/blog/src/component/Header.jsx
index 6529da0..c739f69 100644
--- a/blog/src/component/Header.jsx
+++ b/blog/src/component/Header.jsx
@@ -23,40 +23,42 @@ function Header() {
             <span className="navbar-toggler-icon"></span>
           </button>
           <div
-            className="collapse navbar-collapse ms-5 justify-content-center"
+            className="collapse navbar-collapse  justify-content-center"
             id="navbarCollapse"
           >
-            <div className="navbar-nav">
-              <IntlProvider locale={data} messages={nav[data]}>
-                <NavLink
-                  activeclassname="active"
-                  to="/"
-                  className="nav-link  fw-bold"
-                >
-                  <FormattedMessage id="home" />
-                </NavLink>
-                <NavLink
-                  activeclassname="active"
-                  to="about"
-                  className="nav-link  fw-bold"
-                >
-                  <FormattedMessage id="about" />
-                </NavLink>
-                <NavLink
-                  activeclassname="active"
-                  to="/projects"
-                  className="nav-link  fw-bold"
-                >
-                  <FormattedMessage id="projects" />
-                </NavLink>
-                <NavLink
-                  activeclassname="active"
-                  to="/contact"
-                  className="nav-link  fw-bold"
-                >
-                  <FormattedMessage id="contact" />
-                </NavLink>
-              </IntlProvider>
+            <div className="">
+              <div className="navbar-nav">
+                <IntlProvider locale={data} messages={nav[data]}>
+                  <NavLink
+                    activeclassname="active"
+                    to="/"
+                    className="nav-link fw-bold"
+                  >
+                    <span className="px-3 py-2"><FormattedMessage id="home" /></span>
+                  </NavLink>
+                  <NavLink
+                    activeclassname="active"
+                    to="about"
+                    className="nav-link  fw-bold"
+                  >
+                    <span className="px-3 py-2"><FormattedMessage id="about" /></span>
+                  </NavLink>
+                  <NavLink
+                    activeclassname="active"
+                    to="/projects"
+                    className="nav-link  fw-bold"
+                  >
+                    <span className="px-3 py-2"><FormattedMessage id="projects" /></span>
+                  </NavLink>
+                  <NavLink
+                    activeclassname="active"
+                    to="/contact"
+                    className="nav-link  fw-bold"
+                  >
+                    <span className="px-3 py-2"><FormattedMessage id="contact" /></span>
+                  </NavLink>
+                </IntlProvider>
+              </div>
             </div>
           </div>
           {data === "en-US" ? (
@@ -64,14 +66,14 @@ function Header() {
               className="btn  lang-btn shadow-none"
               onClick={() => handleChange("tr-TR")}
             >
-            🇹🇷
+              🇹🇷
             </button>
           ) : (
             <button
               className="btn  lang-btn shadow-none"
               onClick={() => handleChange("en-US")}
             >
-             🇬🇧
+              🇬🇧
             </button>
           )}
         </div>