diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 0dea88a..5877c58 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 // import { Header, Image } from 'semantic-ui-react'
-import Curiologo from '../assets/images/Csmall.png'
-import './header.css';
-import { Link ,BrowserRouter as Router } from 'react-router-dom';
-import { FaGithub, FaLinkedin, FaTwitter } from 'react-icons/fa';
+import Curiologo from "../assets/images/Csmall.png";
+import "./header.css";
+import { Link, BrowserRouter as Router } from "react-router-dom";
+import { FaGithub, FaLinkedin, FaTwitter } from "react-icons/fa";
 
 const HeaderCurio = () => {
   //Used to toggle the hamburger menu
@@ -11,28 +11,51 @@ const HeaderCurio = () => {
 
   return (
     <>
-
       <div className="curio__header">
-          {/* Wrapping the Link components within the Router component */}
-      <Router>
-         {/* Logo linking to the homepage */}
-        <Link to="/" style={{ textDecoration: "none" }}>
-        <div className="gradient__text">
-          <h1>
-            <img src={Curiologo} alt="Curio" className="curio__icon" />
-            <span>URIO</span>
-          </h1>
-          <p className="curio__tag">
-            <b>Your Video Translator :)</b>
-          </p>
-        </div>
-        </Link>
+        {/* Wrapping the Link components within the Router component */}
+        <Router>
+          {/* Logo linking to the homepage */}
+          <Link to="/" style={{ textDecoration: "none" }}>
+            <div className="gradient__text">
+              <h1>
+                <img src={Curiologo} alt="Curio" className="curio__icon" />
+                <span>URIO</span>
+              </h1>
+              <p className="curio__tag">
+                <b>Your Video Translator :)</b>
+              </p>
+            </div>
+          </Link>
 
-        <div className="curio__sign">
+          <div className="curio__sign">
             {/* Social icons */}
-            <FaGithub />
-            <FaLinkedin /> 
-            <FaTwitter />
+            <a
+              href="https://github.com/Curio-org/Curio"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <div className="github_icon">
+                <FaGithub />
+              </div>
+            </a>
+            <a
+              href="https://www.linkedin.com/company/curio-cic"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <div className="linkedin_icon">
+                <FaLinkedin />
+              </div>
+            </a>
+            <a
+              href="https://twitter.com/_CURI0"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <div className="twitter_icon">
+                <FaTwitter />
+              </div>
+            </a>
           </div>
         </Router>
       </div>
@@ -40,63 +63,94 @@ const HeaderCurio = () => {
      Screen width is < 768px above is disabled and below is triggered
      Added hamburger menu and generic options for the menu
      */}
-      { }
+      {}
       <div className="curio__header-m">
-         {/* Wrapping the Link components within the Router component */}
-         <Router>
+        {/* Wrapping the Link components within the Router component */}
+        <Router>
           {/* Logo linking to the homepage */}
           <Link to="/" style={{ textDecoration: "none" }}>
-        <div className=" gradient__text  gradient__text-m">
-          <h1>
-            <img src={Curiologo} alt="Curio" className="curio__icon" />
-            <span>URIO</span>
-          </h1>
-          <p className="curio__tag">
-            <b>Your Video Translator :)</b>
-          </p>
-        </div>
-        </Link>
+            <div className=" gradient__text  gradient__text-m">
+              <h1>
+                <img src={Curiologo} alt="Curio" className="curio__icon" />
+                <span>URIO</span>
+              </h1>
+              <p className="curio__tag">
+                <b>Your Video Translator :)</b>
+              </p>
+            </div>
+          </Link>
 
-        <button onClick={() => { setTriggerMenu(!triggerMenu) }} className="hamburger-m" type="button">
-          {/*
+          <button
+            onClick={() => {
+              setTriggerMenu(!triggerMenu);
+            }}
+            className="hamburger-m"
+            type="button"
+          >
+            {/*
           This is the hamburger line icon
           First one is when it's off
           Second one is when it's on
           */}
-          <div
-            className={triggerMenu === false ? "hamburger-m" : "display-none"}
-          >
-            <div className="hamburger-lines-m"></div>
-            <div className="hamburger-lines-m"></div>
-            <div className="hamburger-lines-m"></div>
-          </div>
-          <div
-            className={triggerMenu === true ? "hamburger-m" : "display-none"}
-          >
-            <div className="lines-rotated-left-m"></div>
-
-            <div className="lines-rotated-right-m"></div>
-          </div>
-        </button>
+            <div
+              className={triggerMenu === false ? "hamburger-m" : "display-none"}
+            >
+              <div className="hamburger-lines-m"></div>
+              <div className="hamburger-lines-m"></div>
+              <div className="hamburger-lines-m"></div>
+            </div>
+            <div
+              className={triggerMenu === true ? "hamburger-m" : "display-none"}
+            >
+              <div className="lines-rotated-left-m"></div>
 
-      </Router>
+              <div className="lines-rotated-right-m"></div>
+            </div>
+          </button>
+        </Router>
       </div>
       {/*
-    The menu of the hamburger 
-    If trigger is true, display it, if not don't*/}
+        The menu of the hamburger 
+        If trigger is true, display it, if not don't*/}
       <div
         className={
-          triggerMenu === true ? "hamburger-menu-active" : "display-none"
+          triggerMenu === true
+            ? "hamburger-menu-active gradient_bg"
+            : "display-none"
         }
       >
         <div className="hamburger-menu-context">
-          <FaGithub />
+          <a
+            href="https://github.com/Curio-org/Curio"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <div className="github_icon">
+              <FaGithub />
+            </div>
+          </a>
         </div>
         <div className="hamburger-menu-context">
-          <FaLinkedin />
+          <a
+            href="https://www.linkedin.com/company/curio-cic"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <div className="linkedin_icon">
+              <FaLinkedin />
+            </div>
+          </a>
         </div>
         <div className="hamburger-menu-context">
-          <FaTwitter />
+          <a
+            href="https://twitter.com/_CURI0"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <div className="twitter_icon">
+              <FaTwitter />
+            </div>
+          </a>
         </div>
       </div>
     </>
diff --git a/src/components/Header/header.css b/src/components/Header/header.css
index fa1d6fe..8c50a3b 100644
--- a/src/components/Header/header.css
+++ b/src/components/Header/header.css
@@ -21,20 +21,23 @@
   gap: 1vw;
   background-color: rgba(0, 0, 0, 0);
   transition-duration: 0.2s;
+  margin-top: 5px;
 }
 .lines-rotated-left-m {
-  height: 1.2vw;
-  width: 8vw;
+  height: 1vw;
+  width: 6vw;
   position: absolute;
   transform: rotate(50deg);
-  background-image: linear-gradient(to right, purple, pink);
+  background: var(--gradient-text);
+  border-radius: 20%;
 }
 .lines-rotated-right-m {
-  height: 1.2vw;
-  width: 8vw;
+  height: 1vw;
+  width: 6vw;
   position: absolute;
   transform: rotate(-50deg);
-  background-image: linear-gradient(to right, purple, pink);
+  background: var(--gradient-text);
+  border-radius: 20%;
 }
 .hamburger-m:active {
   opacity: 0.6;
@@ -43,10 +46,11 @@
   opacity: 0.6;
 }
 .hamburger-lines-m {
-  height: 2vw;
-  width: 8vw;
+  height: 1vw;
+  width: 6vw;
+  border-radius: 20%;
 
-  background-image: linear-gradient(to right, purple, pink);
+  background: var(--gradient-text);
 }
 .curio__header-m {
   font-family: Manrope;
@@ -70,22 +74,52 @@
   align-items: center;
   position: absolute;
   z-index: 100;
-  background-color: #040c18;
   height: 60vw;
   width: 96vw;
-  transition-duration: 1s;
   font-size: 1.1rem;
   font-family: Manrope;
 }
 .hamburger-menu-context:active {
   opacity: 0.2;
 }
-.hamburger-menu-context:hover {
-  opacity: 0.2;
-}
 .hamburger-menu-context svg {
-  margin-right: 10px; 
-  font-size: 25px;
+  font-size: 30px;
+  color: #dfdfdf;
+}
+.gradient_bg {
+  background: -moz-radial-gradient(
+    circle at 50% 50%,
+    rgba(0, 40, 83, 1) 0%,
+    rgba(4, 12, 24, 1) 50%
+  );
+
+  /* safari 5.1+,chrome 10+ */
+  background: -webkit-radial-gradient(
+    circle at 50% 50%,
+    rgba(0, 40, 83, 1) 0%,
+    rgba(4, 12, 24, 1) 50%
+  );
+
+  /* opera 11.10+ */
+  background: -o-radial-gradient(
+    circle at 50% 50%,
+    rgba(0, 40, 83, 1) 0%,
+    rgba(4, 12, 24, 1) 50%
+  );
+
+  /* ie 10+ */
+  background: -ms-radial-gradient(
+    circle at 50% 50%,
+    rgba(0, 40, 83, 1) 0%,
+    rgba(4, 12, 24, 1) 50%
+  );
+
+  /* global 92%+ browsers support */
+  background: radial-gradient(
+    circle at 50% 50%,
+    rgba(0, 40, 83, 1) 0%,
+    rgba(4, 12, 24, 1) 50%
+  );
 }
 .gradient__text {
   background: var(--gradient-text);
@@ -121,7 +155,7 @@
 }
 
 .curio__sign svg:hover {
-  color: #1da1f2; 
+  color: #1da1f2;
 }
 
 .curio__sign p {
@@ -152,6 +186,30 @@
   border-radius: 5px;
 }
 
+.github_icon svg {
+  transition: color 0.3s;
+}
+
+.github_icon:hover svg {
+  color: #696363;
+}
+
+.linkedin_icon svg {
+  transition: color 0.3s;
+}
+
+.linkedin_icon:hover svg {
+  color: #0077b5;
+}
+
+.twitter_icon svg {
+  transition: color 0.3s;
+}
+
+.twitter_icon:hover svg {
+  color: #26a7de;
+}
+
 @media only screen and (min-width: 768px) {
   /* For mobile phones: */
   [class="curio__header"] {
diff --git a/src/components/UnderHeader/SearchBar.css b/src/components/UnderHeader/SearchBar.css
index 1ba7a21..2abe4fb 100644
--- a/src/components/UnderHeader/SearchBar.css
+++ b/src/components/UnderHeader/SearchBar.css
@@ -37,6 +37,12 @@
 
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+.search_button :hover {
+  background-color: black;
 }
 
 .curio__search__input {
diff --git a/src/components/UnderHeader/Searchbar.tsx b/src/components/UnderHeader/Searchbar.tsx
index d665bb2..936dbc7 100644
--- a/src/components/UnderHeader/Searchbar.tsx
+++ b/src/components/UnderHeader/Searchbar.tsx
@@ -29,16 +29,9 @@ const Searchbar: React.FC<SearchbarProps> = ({ handleFormSubmit }) => {
               value={term}
               name="video-search"
               type="text"
-              id="searchBar"
               placeholder="Search Video..."
             />
-            <Button
-              onClick={() => handleSubmit}
-              type="submit"
-              appearance="primary"
-              size="sm"
-              id="searchButton"
-            >
+            <Button onClick={() => handleSubmit} type="submit">
               <SearchIcon />
             </Button>
           </div>