diff --git a/package-lock.json b/package-lock.json
index e11fcd7..b1f5dc3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
     "": {
       "version": "0.1.0",
       "dependencies": {
+        "@alan-ai/alan-sdk-web": "^1.8.25",
         "@material-ui/core": "^4.11.3",
         "@material-ui/icons": "^4.11.2",
         "@testing-library/jest-dom": "^5.11.10",
@@ -19,6 +20,11 @@
         "web-vitals": "^1.1.1"
       }
     },
+    "node_modules/@alan-ai/alan-sdk-web": {
+      "version": "1.8.25",
+      "resolved": "https://registry.npmjs.org/@alan-ai/alan-sdk-web/-/alan-sdk-web-1.8.25.tgz",
+      "integrity": "sha512-IfONmCvxy/0axB8ap/tEcr4alV2b9msisOz1E/6jIvMG2A78mQ3MLJal9Z6mfN5Wnu62MYo/dRvxr+BzyFpxuw=="
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.12.13",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
@@ -21823,6 +21829,11 @@
     }
   },
   "dependencies": {
+    "@alan-ai/alan-sdk-web": {
+      "version": "1.8.25",
+      "resolved": "https://registry.npmjs.org/@alan-ai/alan-sdk-web/-/alan-sdk-web-1.8.25.tgz",
+      "integrity": "sha512-IfONmCvxy/0axB8ap/tEcr4alV2b9msisOz1E/6jIvMG2A78mQ3MLJal9Z6mfN5Wnu62MYo/dRvxr+BzyFpxuw=="
+    },
     "@babel/code-frame": {
       "version": "7.12.13",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
diff --git a/package.json b/package.json
index 4d32824..53196fd 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@alan-ai/alan-sdk-web": "^1.8.25",
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
     "@testing-library/jest-dom": "^5.11.10",
diff --git a/src/components/Header.js b/src/components/Header.js
index 8501a59..d812900 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -3,8 +3,12 @@ import SearchIcon from '@material-ui/icons/Search';
 import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import './Header.css'
+import './LoginT.css'
 import Tippy from '@tippyjs/react';
 import 'tippy.js/dist/tippy.css';
+import MoreT from './MoreT'
+import LoginT from './LoginT';
+import 'tippy.js/themes/light.css'
 
 const Header = () => {
     return (
@@ -34,13 +38,23 @@ const Header = () => {
             </div>
 
             <div className='header__third'>
-                <Tippy content="logintooltip">
+                <Tippy
+                    theme="light"
+                    content={<LoginT></LoginT>}
+                    interactive={true}
+                    offset={[5, 18]}>
                     <button>Login</button>
                 </Tippy>
             </div>
 
             <div className='header__forth'>
-                <span>More</span>
+                <Tippy
+                    theme="light"
+                    content={<MoreT></MoreT>}
+                    offset={[5, 18]}
+                    interactive={true}>
+                    <span>More</span>
+                </Tippy>
                 <ExpandMoreIcon />
             </div>
 
diff --git a/src/components/LoginT.css b/src/components/LoginT.css
new file mode 100644
index 0000000..5a8f1ce
--- /dev/null
+++ b/src/components/LoginT.css
@@ -0,0 +1,27 @@
+.logint__in,
+.moret__in {
+  display: flex;
+  align-items: center;
+  padding: 0px 7px;
+}
+.logint__in > .MuiSvgIcon-root,
+.moret__in > .MuiSvgIcon-root,
+img {
+  margin-right: 5px;
+  color: #2874f0;
+}
+.logint > hr,
+.moret > hr {
+  margin-left: -10px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  width: 108.5%;
+  height: 0.5px;
+  background-color: rgb(233, 233, 233);
+  border: none;
+}
+.logint__in:hover,
+.moret__in:hover {
+  background-color: rgb(245, 243, 243);
+  cursor: pointer;
+}
diff --git a/src/components/LoginT.js b/src/components/LoginT.js
new file mode 100644
index 0000000..85b8955
--- /dev/null
+++ b/src/components/LoginT.js
@@ -0,0 +1,51 @@
+import React from 'react'
+import AccountCircleIcon from '@material-ui/icons/AccountCircle';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import ConfirmationNumberIcon from '@material-ui/icons/ConfirmationNumber';
+import CardGiftcardIcon from '@material-ui/icons/CardGiftcard';
+import StoreIcon from '@material-ui/icons/Store';
+
+
+
+const LoginT = () => {
+  return (
+    <div className="logint">
+      <div className="logint__in">
+        <h4>New Customer?</h4>
+        <h4 style={{ color: '#2874f0' }}>Sign Up</h4>
+      </div>
+      <hr />
+      <div className="logint__in">
+        <AccountCircleIcon></AccountCircleIcon>
+        <p>My Profile</p>
+      </div>
+      <hr />
+      <div className="logint__in">
+        <img src="//img1a.flixcart.com/www/linchpin/fk-cp-zion/img/plus_aef861.png" alt="plus" />
+        <p>Flipkart Plus Zone</p>
+      </div>
+      <hr />
+      <div className="logint__in">
+        <StoreIcon></StoreIcon>
+        <p>Orders</p>
+      </div>
+      <hr />
+      <div className="logint__in">
+        <FavoriteIcon></FavoriteIcon>
+        <p>Wishlist</p>
+      </div>
+      <hr />
+      <div className="logint__in">
+        <ConfirmationNumberIcon />
+        <p>Rewards</p>
+      </div>
+      <hr />
+      <div className="logint__in">
+        <CardGiftcardIcon />
+        <p>Gift Cards</p>
+      </div>
+    </div >
+  )
+}
+
+export default LoginT
diff --git a/src/components/MoreT.js b/src/components/MoreT.js
new file mode 100644
index 0000000..e85d3db
--- /dev/null
+++ b/src/components/MoreT.js
@@ -0,0 +1,42 @@
+import React from 'react'
+import ShopIcon from '@material-ui/icons/Shop';
+import NotificationsIcon from '@material-ui/icons/Notifications';
+import BusinessCenterIcon from '@material-ui/icons/BusinessCenter';
+import GetAppIcon from '@material-ui/icons/GetApp';
+import LiveHelpIcon from '@material-ui/icons/LiveHelp';
+import TrendingUpIcon from '@material-ui/icons/TrendingUp';
+//import MonetizationOnIcon from '@material-ui/icons/MonetizationOn';
+
+
+const MoreT = () => {
+  return (
+    <div className="moret">
+      <div className="moret__in">
+        <NotificationsIcon />
+        <p>Notifications Preferences</p>
+      </div>
+      <hr />
+      <div className="moret__in">
+        <BusinessCenterIcon />
+        <p>Sell on Flipkart</p>
+      </div>
+      <hr />
+      <div className="moret__in">
+        <LiveHelpIcon />
+        <p>24*7 Customer Care</p>
+      </div>
+      <hr />
+      <div className="moret__in">
+        <TrendingUpIcon />
+        <p>Advertise</p>
+      </div>
+      <hr />
+      <div className="moret__in">
+        <GetAppIcon />
+        <p>Download app</p>
+      </div>
+    </div>
+  )
+}
+
+export default MoreT