diff --git a/components/Header.js b/components/Header.js
index e123e85..8016f68 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 // material design
 import { Button } from "@material-ui/core";
@@ -6,7 +6,27 @@ import { Button } from "@material-ui/core";
 // link from next
 import Link from "next/link";
 
-const Header = ({ setOpen }) => {
+import Menu from "@material-ui/core/Menu";
+import { auth } from "../utils/firebase";
+import toast from "react-hot-toast";
+
+const Header = ({ setOpen, user, setUser }) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  const signOut = () => {
+    auth()
+      .signOut()
+      .then(() => {
+        setUser(null);
+        toast.success("Signed Out from Codehouse!");
+      })
+      .catch((error) => {
+        // An error happened.
+        console.log(error);
+      });
+    setAnchorEl(null);
+  };
+
   return (
     <div className="w-full px-4 py-3 glassmorphism flex justify-between items-center">
       <Link href="/">
@@ -35,14 +55,57 @@ const Header = ({ setOpen }) => {
             New CheetSheet
           </div>
         </Button>
-        <Button
-          className="!p-0 !w-auto !h-auto !m-auto shine !ml-2"
-          onClick={() => setOpen(true)}
-        >
-          <div className="bg-[#F5BA31] px-4 py-[6px] text-md capitalize rounded-md font-semibold flex items-center justify-center">
-            Sign In
-          </div>
-        </Button>
+        {user ? (
+          <>
+            <Button
+              className="!p-0 !w-auto !h-auto !m-auto !ml-2"
+              onClick={(e) => setAnchorEl(e.currentTarget)}
+            >
+              <div className="bg-[#F5BA31] p-[6px] text-md capitalize rounded-md font-semibold flex items-center justify-center">
+                <img
+                  src="https://avatars.githubusercontent.com/u/61895712?v=4"
+                  alt=""
+                  className="h-7 w-7 rounded-md mr-1"
+                />
+                Savio Martin
+              </div>
+            </Button>
+            <Menu
+              getContentAnchorEl={null}
+              className="!mt-1"
+              anchorOrigin={{
+                vertical: "bottom",
+                horizontal: "right",
+              }}
+              transformOrigin={{
+                vertical: "top",
+                horizontal: "right",
+              }}
+              keepMounted
+              anchorEl={anchorEl}
+              open={Boolean(anchorEl)}
+              onClose={() => setAnchorEl(null)}
+            >
+              <Button
+                className="!p-0 !w-auto !h-auto !m-auto"
+                onClick={signOut}
+              >
+                <div className="px-4 py-[6px] text-md capitalize rounded-md font-semibold flex items-center justify-center hover:text-red-500 duration-500">
+                  Sign Out
+                </div>
+              </Button>
+            </Menu>
+          </>
+        ) : (
+          <Button
+            className="!p-0 !w-auto !h-auto !m-auto shine !ml-2"
+            onClick={() => setOpen(true)}
+          >
+            <div className="bg-[#F5BA31] px-4 py-[6px] text-md capitalize rounded-md font-semibold flex items-center justify-center">
+              Sign In
+            </div>
+          </Button>
+        )}
       </div>
     </div>
   );
diff --git a/components/Hero.js b/components/Hero.js
index 0cc5eac..6fe69be 100644
--- a/components/Hero.js
+++ b/components/Hero.js
@@ -10,11 +10,11 @@ import { FiGithub } from "react-icons/fi";
 // components
 import { Header } from ".";
 
-const Hero = ({ setOpen }) => {
+const Hero = ({ setOpen, user, setUser }) => {
   //TODO: Dynamic Star Count
   return (
     <div className="h-screen bg-image w-full text-[#ECF2F5] overflow-visible">
-      <Header setOpen={setOpen} />
+      <Header setOpen={setOpen} user={user} setUser={setUser} />
       <div className="flex items-center justify-center bg-image h-[90vh] w-full">
         <div className="w-7/12 h-full flex items-start justify-center flex-col pl-10">
           <h3 className="text-lg bg-text-gradient font-bold mb-3 uppercase tracking-wider">
diff --git a/components/SignInPopup.js b/components/SignInPopup.js
index 98e6369..5234d39 100644
--- a/components/SignInPopup.js
+++ b/components/SignInPopup.js
@@ -4,8 +4,15 @@ import Backdrop from "@material-ui/core/Backdrop";
 import Fade from "@material-ui/core/Fade";
 import { Btn } from ".";
 import { FaGithub, FaGoogle } from "react-icons/fa";
+import { githubProvider, googleProvider } from "../utils/Auth/auth-methods";
+import socialMediaAuth from "../utils/Auth/auth";
 
 const SignInPopup = ({ open, setOpen }) => {
+  const handleOnClick = async (provider) => {
+    const res = await socialMediaAuth(provider);
+    await setOpen(false);
+  };
+
   return (
     <Modal
       open={open}
@@ -28,7 +35,7 @@ const SignInPopup = ({ open, setOpen }) => {
             <Btn>
               <button
                 className="bg-[#4385F4] border border-[#4385F4] text-white font-semibold py-2 px-4 rounded focus:outline-none focus:shadow-outline shine flex items-center"
-                onClick={() => setCount(count + 20)}
+                onClick={() => handleOnClick(googleProvider)}
               >
                 Sign In with Google <FaGoogle className="text-xl ml-1 -mr-1" />
               </button>
@@ -36,7 +43,7 @@ const SignInPopup = ({ open, setOpen }) => {
             <Btn className="ml-1">
               <button
                 className="bg-[#333] border border-[#333] text-white font-semibold py-2 px-4 rounded focus:outline-none focus:shadow-outline shine flex items-center"
-                onClick={() => setCount(count + 20)}
+                onClick={() => handleOnClick(githubProvider)}
               >
                 Sign In with Github
                 <FaGithub className="text-2xl ml-1 -mt-1 -mr-1" />
diff --git a/package-lock.json b/package-lock.json
index 7b8c930..3a2c10f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1285,6 +1285,11 @@
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-4.19.0.tgz",
       "integrity": "sha512-fRA+BaAWOR/yr/t7T9E9GJztHPeFjj8U35ajyAjCDtAAnTn1Rc1f6W6VGPJrO1tkQv9zWu+JRof7z6oQtiYVFQ=="
     },
+    "dotenv": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
+      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q=="
+    },
     "electron-to-chromium": {
       "version": "1.3.744",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.744.tgz",
diff --git a/package.json b/package.json
index 20396b0..6ebe286 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@material-ui/core": "^4.11.4",
     "axios": "^0.21.1",
+    "dotenv": "^10.0.0",
     "firebase": "^8.6.5",
     "next": "latest",
     "react": "^17.0.1",
diff --git a/pages/_app.js b/pages/_app.js
index 3f2906b..ed451f9 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -3,13 +3,30 @@ import { Toaster } from "react-hot-toast";
 import "tailwindcss/tailwind.css"; // tailwind jit
 import { SignInPopup } from "../components";
 import "../styles/App.css"; // custom styles
+import { auth } from "../utils/firebase";
 
 function MyApp({ Component, pageProps }) {
   const [darkMode, setDarkMode] = useState(false);
   const [listView, setListView] = useState(false);
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(false);
+  const [user, setUser] = useState([]);
 
-  const props = { darkMode, setDarkMode, listView, setListView, open, setOpen };
+  const props = {
+    darkMode,
+    setDarkMode,
+    listView,
+    setListView,
+    open,
+    setOpen,
+    user,
+    setUser,
+  };
+
+  auth().onAuthStateChanged((user) => {
+    if (user) {
+      setUser(user);
+    }
+  });
 
   return (
     <div className={`${darkMode ? "dark" : "light"} min-h-screen`}>
diff --git a/utils/Auth/auth-methods.js b/utils/Auth/auth-methods.js
index 7799c08..f2b0ee9 100644
--- a/utils/Auth/auth-methods.js
+++ b/utils/Auth/auth-methods.js
@@ -1,5 +1,5 @@
 import { auth } from "../firebase";
 
 export const googleProvider = new auth.GoogleAuthProvider();
-// export const githubProvider = new auth.GithubAuthProvider(); TODO:
+export const githubProvider = new auth.GithubAuthProvider();
 // export const facebookProvider = new auth.FacebookAuthProvider(); TODO:
diff --git a/utils/Auth/auth.js b/utils/Auth/auth.js
index 12a1c07..217d2c6 100644
--- a/utils/Auth/auth.js
+++ b/utils/Auth/auth.js
@@ -1,7 +1,7 @@
 import { auth } from "../firebase";
 
 const socialMediaAuth = (provider) => {
-  auth
+  auth()
     .signInWithPopup(provider)
     .then((res) => {
       return res.user;
diff --git a/utils/firebase.js b/utils/firebase.js
index 6a5e2f6..71fa7c1 100644
--- a/utils/firebase.js
+++ b/utils/firebase.js
@@ -1,7 +1,4 @@
 import firebase from "firebase";
-import dotenv from "dotenv";
-
-dotenv.config();
 
 const firebaseConfig = {
   apiKey: "AIzaSyBTH2-7uJKbjZ8slbPxaxny5MreXT-djhA",
@@ -13,10 +10,13 @@ const firebaseConfig = {
   measurementId: "G-X6FCVKT31X",
 };
 
-firebase.initializeApp(firebaseConfig);
+if (!firebase.apps.length) {
+  firebase.initializeApp(firebaseConfig);
+} else {
+  firebase.app(); // if already initialized, use that one
+}
 
-const auth = firebase.auth();
+const auth = firebase.auth;
 const db = firebase.firestore();
-firebase.analytics();
 
 export { db, auth };