diff --git a/src/components/Header.js b/src/components/Header.js
index e07a99e..c97a8dd 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -10,6 +10,8 @@ import {
   setSignOutState,
 } from "../features/user/userSlice";
 
+import Subscribe from './Subscribe';
+
 const Header = (props) => {
   const dispatch = useDispatch();
   const history = useHistory();
@@ -63,7 +65,10 @@ const Header = (props) => {
       </Logo>
 
       {!userName ? (
-        <Login onClick={handleAuth}>Login</Login>
+        <>
+         <Subscribe >Assign Now</Subscribe>
+         <Login onClick={handleAuth}>Login</Login>
+        </>
       ) : (
         <>
           <NavMenu>
diff --git a/src/components/Subscribe.js b/src/components/Subscribe.js
new file mode 100644
index 0000000..46a27bd
--- /dev/null
+++ b/src/components/Subscribe.js
@@ -0,0 +1,34 @@
+import styled from "styled-components";
+
+
+const SubscribeNow = (props) => {
+    return (
+        <Subscribe>Assign Now</Subscribe>
+    );
+  };
+
+  const Subscribe = styled.section`
+    background-color: #0063e5;
+    padding: 8px 16px;
+    text-transform: uppercase;
+    -webkit-letter-spacing: 1.5px;
+    -moz-letter-spacing: 1.5px;
+    -ms-letter-spacing: 1.5px;
+    letter-spacing: 1.5px;
+    border: 1px solid #f9f9f9;
+    border-radius: 4px;
+    -webkit-transition: all 0.2s ease 0s;
+    transition: all 0.2s ease 0s
+    font-weight: bold;
+    color: #f9f9f9;
+    letter-spacing: 1.5px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    margin-left: auto;
+    margin-right: 10px;
+    &:hover {
+      background-color: #0483ee;
+    }
+`;
+export default SubscribeNow;
+  
\ No newline at end of file