diff --git a/.vscode/launch.json b/.vscode/launch.json
index 9a3ac80d..86085257 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "Next.js: debug client-side",
-      "type": "pwa-msedge",
+      "type": "msedge",
       "request": "launch",
       "url": "http://localhost:3000",
       "cwd": "${workspaceFolder}/client"
@@ -21,7 +21,18 @@
       "request": "launch",
       "command": "yarn start",
       "cwd": "${workspaceFolder}/client",
-      "console": "integratedTerminal",
+      "serverReadyAction": {
+        "pattern": "started server on .+, url: (https?://.+)",
+        "uriFormat": "%s",
+        "action": "debugWithEdge"
+      }
+    },
+    {
+      "name": "Next.js: debug production stack",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "yarn start:prod",
+      "cwd": "${workspaceFolder}/client",
       "serverReadyAction": {
         "pattern": "started server on .+, url: (https?://.+)",
         "uriFormat": "%s",
diff --git a/client/env/.env.sample b/client/env/.env.sample
index bdad6248..b8f03963 100644
--- a/client/env/.env.sample
+++ b/client/env/.env.sample
@@ -5,6 +5,7 @@ PORT=3000
 # ----- ----- APOLLO GRAPHQL ----- -----
 
 NEXT_PUBLIC_SERVER_ADDRESS=some-server-url
+SERVER_ACCESS_API_KEY=some-api-key
 
 # ----- ----- IMAGEKIT ----- -----
 
diff --git a/client/src/assets/placeholder/onboarding.js b/client/src/assets/placeholder/onboarding.js
index 93a7f959..774bcc5f 100644
--- a/client/src/assets/placeholder/onboarding.js
+++ b/client/src/assets/placeholder/onboarding.js
@@ -18,8 +18,8 @@ export const ONBOARDING = Object.freeze({
     EMAIL_PLACEHOLDER: 'instituteID@nitrkl.ac.in',
     BUTTON: {
       PRIMARY: 'Get Verification Link',
-      SECONDARY: 'Check again and continue',
-      MOBILE: 'Next',
+      SECONDARY: 'Open webmail',
+      FINALLY: 'Confirm Verification',
     },
     NOTE: 'Note: This only works if you’re a current student/ employee of \n NIT Rourkela with a valid institute email id.',
   },
@@ -28,27 +28,26 @@ export const ONBOARDING = Object.freeze({
       TITLE: 'Interested Topics',
       CONTENT:
         "Select the topics you're interested in, and get smarter article suggestions on the MM website!",
+      LOADING_CONTENT:
+        "Give us a moment while we save your choices. Wouldn't want to mix them up.",
     },
     TOPICS: [
-      'Witsdom',
-      'Campus Buzz',
-      'Alumni Affairs',
-      'Student Activities',
-      'Halls',
-      'Interviews',
-      'SAC Speaks',
-      'Dean Speaks',
-      'Videos',
-      'Guest Interviews',
-      "Director's Desk",
-      "Chief Warden's Column",
-      'Comics',
-      'Alumnus Speaks',
-      'Editorial',
-      'Placements',
-      'Internships',
-      'Higher Education',
-      'Photostories',
+      ['Campus Buzz', 12],
+      ['Alumni Affairs', 52],
+      ['Student Activities', 14],
+      ['Halls', 15],
+      ['Interviews', 21],
+      ['SAC Speaks', 22],
+      ['Guest Interviews', 24],
+      ["Director's Desk", 31],
+      ["Chief Warden's Column", 32],
+      ['Alumnus Speaks', 51],
+      ['Editorial', 66],
+      ['Placements', 41],
+      ['Internships', 42],
+      ['Higher Education', 43],
+      ['Photostories', 62],
+      ['Witsdom', 61],
     ],
   },
   NEWSLETTER: {
diff --git a/client/src/components/admin/Sidebar/menulist/NavCollapse.jsx b/client/src/components/admin/Sidebar/menulist/NavCollapse.jsx
index a8ed85cf..84bc4586 100644
--- a/client/src/components/admin/Sidebar/menulist/NavCollapse.jsx
+++ b/client/src/components/admin/Sidebar/menulist/NavCollapse.jsx
@@ -9,11 +9,9 @@ import {
   ListItemText,
   Typography,
 } from '@mui/material';
-import {
-  FiberManualRecord,
-  KeyboardArrowDown,
-  KeyboardArrowUp,
-} from '@mui/icons-material';
+import FiberManualRecord from '@mui/icons-material/FiberManualRecord';
+import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUp';
 
 // components
 import NavItem from './NavItem';
diff --git a/client/src/components/admin/Sidebar/menulist/NavItem.jsx b/client/src/components/admin/Sidebar/menulist/NavItem.jsx
index 13f26c4d..bfdadace 100644
--- a/client/src/components/admin/Sidebar/menulist/NavItem.jsx
+++ b/client/src/components/admin/Sidebar/menulist/NavItem.jsx
@@ -11,7 +11,7 @@ import {
 } from '@mui/material';
 
 // context
-import { SidebarContext } from '../../../../context/SidebarContext';
+import { SidebarContext } from '../../../../context/SidebarContextProvider';
 
 const NavItem = ({ item, level }) => {
   const theme = useTheme();
diff --git a/client/src/components/homepage/SocialMedia.js b/client/src/components/homepage/SocialMedia.js
index 0e3cebc6..261a113c 100644
--- a/client/src/components/homepage/SocialMedia.js
+++ b/client/src/components/homepage/SocialMedia.js
@@ -15,7 +15,8 @@ import insta4 from '../../assets/images/instagram/insta4.jpeg';
 import insta5 from '../../assets/images/instagram/insta5.jpeg';
 import insta6 from '../../assets/images/instagram/insta6.jpeg';
 import Image from 'next/image';
-import { YouTube, Instagram } from '@mui/icons-material';
+import YouTube from '@mui/icons-material/YouTube';
+import Instagram from '@mui/icons-material/Instagram';
 
 const INSTA_LINKS = [insta1, insta2, insta3, insta4, insta5, insta6];
 
diff --git a/client/src/components/marginals/DesktopNavbar.js b/client/src/components/marginals/DesktopNavbar.js
index a49711f5..878c927b 100644
--- a/client/src/components/marginals/DesktopNavbar.js
+++ b/client/src/components/marginals/DesktopNavbar.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useContext } from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
@@ -7,13 +7,20 @@ import { useRouter } from 'next/router';
 import InputAdornment from '@mui/material/InputAdornment';
 import SearchIcon from '@mui/icons-material/Search';
 import makeStyles from '@mui/styles/makeStyles';
-import { Container, Typography, TextField, Fade } from '@mui/material';
+import {
+  Container,
+  Typography,
+  TextField,
+  ButtonBase,
+  Fade,
+} from '@mui/material';
 // import TrendingUpSharpIcon from '@mui/icons-material/TrendingUpSharp';
 
 // Utils
 import ROUTES from '../../utils/getRoutes';
 import NewTabLink from '../shared/links/NewTabLink';
 import getArticleLink from '../../utils/getArticleLink';
+import { authContext } from '../../context/AuthContextProvider';
 
 // Assets
 import logoFullBlack from '../../assets/images/logos/logo_full_black.png';
@@ -21,13 +28,16 @@ import logoFullBlack from '../../assets/images/logos/logo_full_black.png';
 //hooks
 import useAutoComplete from '../../hooks/useAutoComplete';
 
+//components
+import UserAvatar from '../widgets/UserAvatar';
+
 const DesktopNavbar = () => {
   const router = useRouter();
   const [search, setSearch] = useState('');
   const [isSearchActive, setIsSearchActive] = useState(false);
   const inputRef = useRef(null);
   const classes = useStyles({ isSearchActive });
-
+  const { user } = useContext(authContext);
   const autoCompleteData = useAutoComplete(search, 10);
 
   useEffect(() => {
@@ -120,21 +130,38 @@ const DesktopNavbar = () => {
                 objectFit='cover'
               />
             </div>
-
-            <TextField
-              variant='standard'
-              label='Search for articles'
-              placeholder='Enter related words'
-              onClick={searchActive}
-              disabled={true}
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position='start'>
-                    <SearchIcon />
-                  </InputAdornment>
-                ),
-              }}
-            />
+            <div className={classes.searchAndSign}>
+              <TextField
+                variant='standard'
+                label='Search for articles'
+                placeholder='Enter related words'
+                onClick={searchActive}
+                disabled={true}
+                InputProps={{
+                  endAdornment: (
+                    <InputAdornment position='start'>
+                      <SearchIcon />
+                    </InputAdornment>
+                  ),
+                }}
+              />
+              <div className={classes.signIn}>
+                {user ? (
+                  <div className={classes.avatar}>
+                    <UserAvatar
+                      picture={user.photoURL}
+                      name={user.displayName}
+                    />
+                  </div>
+                ) : (
+                  <Link href='/onboarding' passHref>
+                    <ButtonBase type='button' className={classes.button}>
+                      <span className={classes.label}> Sign In </span>
+                    </ButtonBase>
+                  </Link>
+                )}
+              </div>
+            </div>
           </div>
 
           <ul aria-label='Navbar' className={classes.menuContainer}>
@@ -166,16 +193,32 @@ const useStyles = makeStyles((theme) => ({
     width: '100%',
     marginTop: '10px',
   },
-
   detailsContainer: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
-
     paddingTop: '10px',
     paddingBottom: '25px',
     borderBottom: `3px solid ${theme.palette.secondary.neutral50}`,
   },
+  button: {
+    textAlign: 'center',
+    borderRadius: '4px',
+    border: 'solid black 0.5px',
+    margin: '8px 8px 0px 0px',
+    padding: '10px 20px',
+  },
+  avatar: {
+    marginRight: '20px',
+  },
+  label: {
+    fontFamily: 'Source Sans Pro',
+    fontSize: '20px',
+    fontWeight: '400',
+    lineHeight: '1.2rem',
+    textDecoration: 'none',
+    color: theme.palette.secondary.main,
+  },
   imgContainer: {
     width: '33%',
     height: 'auto',
@@ -188,6 +231,13 @@ const useStyles = makeStyles((theme) => ({
     width: 'auto !important',
     height: 'auto !important',
   },
+  searchAndSign: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  signIn: {
+    paddingLeft: '30px',
+  },
   menuContainer: {
     width: '100%',
     marginTop: '20px',
diff --git a/client/src/components/marginals/Footer.js b/client/src/components/marginals/Footer.js
index 690f1e8e..0cca6806 100644
--- a/client/src/components/marginals/Footer.js
+++ b/client/src/components/marginals/Footer.js
@@ -209,8 +209,9 @@ const Footer = () => {
                       name='month'
                       className={classes.archivesSelect}
                       onChange={(e) => setMonth(e.target.value)}
+                      defaultValue={''}
                     >
-                      <option value='' selected disabled hidden>
+                      <option value='' disabled hidden>
                         <Typography variant='body1'>Month</Typography>
                       </option>
                       {ARCHIVES.months.map((month, key) => (
@@ -223,8 +224,9 @@ const Footer = () => {
                       name='year'
                       className={classes.archivesSelect}
                       onChange={(e) => setYear(e.target.value)}
+                      defaultValue={''}
                     >
-                      <option value='' selected disabled hidden>
+                      <option value='' disabled hidden>
                         <Typography variant='body1'>Year</Typography>
                       </option>
                       {ARCHIVES.years.map((year, key) => (
diff --git a/client/src/components/marginals/TopBar.js b/client/src/components/marginals/TopBar.js
index e17cf430..a2f6afce 100644
--- a/client/src/components/marginals/TopBar.js
+++ b/client/src/components/marginals/TopBar.js
@@ -1,31 +1,56 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import Link from 'next/link';
 
 import makeStyles from '@mui/styles/makeStyles';
-import { Container } from '@mui/material';
+import { Container, useMediaQuery } from '@mui/material';
+import theme from '../../config/themes/light';
+
+import { authContext } from '../../context/AuthContextProvider';
 
 const TopBar = () => {
   const classes = useStyles();
+  const isMobileOrTablet = useMediaQuery(theme.breakpoints.down('md'));
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+  const { user, logout } = useContext(authContext);
+
   return (
     <div className={classes.topBar}>
       <Container>
         <div className={classes.container}>
           <ul className={classes.navList}>
-            <li className={classes.navItem}>
-              <Link href='/about' className={classes.navLink} passHref>
-                <span className={classes.navLink}>About</span>
-              </Link>
-            </li>
-            <li className={classes.navItem}>
-              <Link href='/guide' className={classes.navLink} passHref>
-                <span className={classes.navLink}>Guide</span>
-              </Link>
-            </li>
-            <li className={classes.navItem}>
-              <Link href='/contact' className={classes.navLink} passHref>
-                <span className={classes.navLink}>Contact Us</span>
-              </Link>
-            </li>
+            {!isMobile && (
+              <>
+                <li className={classes.navItem}>
+                  <Link href='/about' className={classes.navLink} passHref>
+                    <span className={classes.navLink}>About</span>
+                  </Link>
+                </li>
+                <li className={classes.navItem}>
+                  <Link href='/guide' className={classes.navLink} passHref>
+                    <span className={classes.navLink}>Guide</span>
+                  </Link>
+                </li>
+                <li className={classes.navItem}>
+                  <Link href='/contact' className={classes.navLink} passHref>
+                    <span className={classes.navLink}>Contact Us</span>
+                  </Link>
+                </li>
+              </>
+            )}
+            {isMobileOrTablet && (
+              <li className={classes.navItem}>
+                {user ? (
+                  <span onClick={logout} className={classes.signInButton}>
+                    Sign Out
+                  </span>
+                ) : (
+                  <Link href='/onboarding' passHref>
+                    <span className={classes.signInButton}>Sign In</span>
+                  </Link>
+                )}
+              </li>
+            )}
           </ul>
         </div>
       </Container>
@@ -35,6 +60,16 @@ const TopBar = () => {
 export default TopBar;
 
 const useStyles = makeStyles((theme) => ({
+  signInButton: {
+    color: '#ffffff',
+    backgroundColor: '#00368D',
+    alignItems: 'center',
+    padding: '4px 6px',
+    borderRadius: '0.3em',
+    fontFamily: 'IBM Plex Sans',
+    fontSize: '14px',
+    fontWeight: '400',
+  },
   topBar: {
     marginTop: '0',
     backgroundColor: theme.palette.primary.blue50,
@@ -49,6 +84,9 @@ const useStyles = makeStyles((theme) => ({
     paddingRight: '16px',
     marginLeft: 'auto',
     marginRight: 'auto',
+    [theme.breakpoints.down('sm')]: {
+      padding: '0px',
+    },
   },
   navList: {
     margin: '0',
@@ -64,6 +102,7 @@ const useStyles = makeStyles((theme) => ({
       marginLeft: '20px',
       fontSize: '1rem',
     },
+    cursor: 'pointer',
   },
   navLink: {
     fontFamily: 'IBM Plex Sans',
diff --git a/client/src/components/onboarding/Pagination.js b/client/src/components/onboarding/Pagination.js
index d3cdc611..831eb406 100644
--- a/client/src/components/onboarding/Pagination.js
+++ b/client/src/components/onboarding/Pagination.js
@@ -42,7 +42,6 @@ function Pagination({ stages, active }) {
     </Stepper>
   );
 }
-
 export default Pagination;
 
 const useStyles = makeStyles((theme) => ({
diff --git a/client/src/components/onboarding/stages/NewsletterSignup.js b/client/src/components/onboarding/stages/NewsletterSignup.js
index a57bc69e..d91cf2aa 100644
--- a/client/src/components/onboarding/stages/NewsletterSignup.js
+++ b/client/src/components/onboarding/stages/NewsletterSignup.js
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { useRouter } from 'next/router';
+import React, { useState, useContext } from 'react';
+// import { useRouter } from 'next/router';
 import Image from 'next/image';
 
 // Library
@@ -11,25 +11,40 @@ import makeStyles from '@mui/styles/makeStyles';
 
 // Components
 import Button from '../../shared/button/Regular';
-import Input from '../../shared/input/Regular';
 
 // Assets
 import newsletter from '../../../assets/images/onboarding/newsletter.png';
 import { ONBOARDING } from '../../../assets/placeholder/onboarding';
 
-function VerifyEmail(props) {
+//graphql
+import newsLetterSubscription from '../../../graphql/mutations/user/newsLetterSubscription';
+
+//context
+import { authContext } from '../../../context/AuthContextProvider';
+import { apolloContext } from '../../../context/ApolloContextProvider';
+
+function NewsletterSignup({ onComplete, onSkip, tabletMatches }) {
   const classes = useStyles();
-  const router = useRouter();
+  // const router = useRouter();
+  const graphClient = useContext(apolloContext);
+
   // Local States
   const [isSigned, setIsSigned] = useState(false);
 
-  // Props
-  const { email, setEmail, signupNewsletter, onNext, onBack, tabletMatches } =
-    props;
+  const {
+    user: { mid },
+  } = useContext(authContext);
 
-  const onSignup = () => {
+  const onSignup = async () => {
     setIsSigned(true);
-    signupNewsletter();
+
+    await graphClient.mutate({
+      mutation: newsLetterSubscription,
+      variables: {
+        userId: mid,
+        flag: true,
+      },
+    });
   };
 
   return (
@@ -66,15 +81,6 @@ function VerifyEmail(props) {
                 />
               </Grid>
             )}
-            <Typography className={classes.emailTitle} variant='h3'>
-              {ONBOARDING.NEWSLETTER.SECONDARY.TITLE}
-            </Typography>
-            <Input
-              className={classes.emailInput}
-              value={email}
-              onChange={setEmail}
-              placeholder={ONBOARDING.NEWSLETTER.EMAIL_PLACEHOLDER}
-            />
           </>
         )}
 
@@ -95,14 +101,7 @@ function VerifyEmail(props) {
             <Typography
               className={classes.back}
               variant='body1'
-              onClick={onBack}
-            >
-              Back
-            </Typography>
-            <Typography
-              className={classes.skip}
-              variant='body1'
-              onClick={onNext}
+              onClick={onSkip}
             >
               Skip
             </Typography>
@@ -116,7 +115,7 @@ function VerifyEmail(props) {
               ? ONBOARDING.NEWSLETTER.BUTTON.MOBILE
               : ONBOARDING.NEWSLETTER.BUTTON.PRIMARY
           }
-          onClick={isSigned ? onNext : onSignup}
+          onClick={isSigned ? onComplete : onSignup}
           containerStyles={classes.button}
         />
       </Grid>
@@ -124,7 +123,7 @@ function VerifyEmail(props) {
   );
 }
 
-export default VerifyEmail;
+export default NewsletterSignup;
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -162,14 +161,6 @@ const useStyles = makeStyles((theme) => ({
       fontSize: '14px',
     },
   },
-  emailInput: {
-    width: '85%',
-    borderRadius: '20px',
-    paddingLeft: '20px',
-    [theme.breakpoints.down('md')]: {
-      width: '100%',
-    },
-  },
   buttonContainer: {
     display: 'flex',
     alignItems: 'center',
@@ -205,10 +196,6 @@ const useStyles = makeStyles((theme) => ({
   icon: {
     color: theme.palette.accent.green,
   },
-  skip: {
-    cursor: 'pointer',
-    color: theme.palette.secondary.neutral50,
-  },
   back: {
     marginRight: 'auto',
     cursor: 'pointer',
diff --git a/client/src/components/onboarding/stages/SelectTopics.js b/client/src/components/onboarding/stages/SelectTopics.js
index 68100234..50b2fbe6 100644
--- a/client/src/components/onboarding/stages/SelectTopics.js
+++ b/client/src/components/onboarding/stages/SelectTopics.js
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useContext, useState } from 'react';
+import { authContext } from '../../../context/AuthContextProvider';
 
 // Hooks
 import useToggle from '../../../hooks/useToggle';
@@ -13,15 +14,27 @@ import Button from '../../shared/button/Regular';
 // Constants
 import { ONBOARDING } from '../../../assets/placeholder/onboarding';
 
-const Topic = (props) => {
+//graphql
+import updateUserTopics from '../../../graphql/mutations/user/updateUserTopics';
+import { apolloContext } from '../../../context/ApolloContextProvider';
+
+function Topic({
+  topic,
+  addSelectedTopic,
+  removeSelectedTopic,
+  tabletMatches,
+  setSnackbarData,
+}) {
   const [selected, toggleSelected] = useToggle(false);
   const classes = useStyles(selected);
-  // Props
-  const { topic, addSelectedTopic, removeSelectedTopic, tabletMatches } = props;
 
   const onClick = () => {
-    selected ? removeSelectedTopic(topic) : addSelectedTopic(topic);
+    selected ? removeSelectedTopic(topic[1]) : addSelectedTopic(topic[1]);
     toggleSelected();
+    setSnackbarData({
+      message: '',
+      severity: 'success',
+    });
   };
 
   return (
@@ -30,22 +43,60 @@ const Topic = (props) => {
       className={classes.topicName}
       variant={tabletMatches ? 'body2' : 'body1'}
     >
-      {topic}
+      {topic[0]}
     </Typography>
   );
-};
+}
 
-function SelectTopics(props) {
+function SelectTopics({ onComplete, onSkip, tabletMatches, setSnackbarData }) {
   const classes = useStyles();
 
-  // props
-  const {
-    selectedTopics,
-    addSelectedTopic,
-    removeSelectedTopic,
-    onNext,
-    tabletMatches,
-  } = props;
+  const [selectedTopics, setSelectedTopics] = useState([]);
+
+  const addSelectedTopic = (newTopic) =>
+    setSelectedTopics((current) => [...current, newTopic]);
+
+  const removeSelectedTopic = (topic) =>
+    setSelectedTopics((selected) => {
+      return selected.filter((selectedTopic) => {
+        if (selectedTopic !== topic) return selectedTopic;
+      });
+    });
+
+  const { user } = useContext(authContext);
+  const graphClient = useContext(apolloContext);
+
+  const updateInterestedTopics = async (topics) => {
+    try {
+      if (!user) {
+        setSnackbarData({
+          message: 'Please sign up to continue.',
+          severity: 'warning',
+        });
+        return;
+      }
+      if (topics.length === 0) {
+        onSkip();
+        return;
+      }
+      console.log(user);
+
+      await graphClient.mutate({
+        mutation: updateUserTopics,
+        variables: {
+          id: user.mid,
+          interestedTopics: topics,
+        },
+      });
+
+      onComplete();
+    } catch (error) {
+      setSnackbarData({
+        message: 'Something went wrong. Please try again.',
+        severity: 'error',
+      });
+    }
+  };
 
   return (
     <div className={classes.container}>
@@ -66,6 +117,7 @@ function SelectTopics(props) {
             addSelectedTopic={addSelectedTopic}
             removeSelectedTopic={removeSelectedTopic}
             tabletMatches={tabletMatches}
+            setSnackbarData={setSnackbarData}
           />
         ))}
       </div>
@@ -73,8 +125,7 @@ function SelectTopics(props) {
       <Button
         text='Next'
         onClick={() => {
-          onNext();
-          console.log('Following are the selected Topics: ', selectedTopics);
+          updateInterestedTopics(selectedTopics);
         }}
         containerStyles={classes.nextButton}
       />
diff --git a/client/src/components/onboarding/stages/VerifyEmail.js b/client/src/components/onboarding/stages/VerifyEmail.js
index c52f23b7..7dd941a8 100644
--- a/client/src/components/onboarding/stages/VerifyEmail.js
+++ b/client/src/components/onboarding/stages/VerifyEmail.js
@@ -1,34 +1,97 @@
-import React from 'react';
+import React, { useContext, useEffect, useState } from 'react';
+
 import Image from 'next/image';
 
+// import { useRouter } from 'next/router';
 // Library
-import { Typography, Grid } from '@mui/material';
+import { Grid, Typography } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 
 // Assets
 import verifyEmailImg from '../../../assets/images/onboarding/verifyEmail.png';
-
+// Constants
+import { ONBOARDING } from '../../../assets/placeholder/onboarding';
+import { authContext } from '../../../context/AuthContextProvider';
 // Components
 import Button from '../../shared/button/Regular';
 import Input from '../../shared/input/Regular';
 
-// Constants
-import { ONBOARDING } from '../../../assets/placeholder/onboarding';
-
-function VerifyEmail(props) {
+function VerifyEmail({
+  onComplete,
+  onSkip,
+  onBack,
+  email,
+  setEmail,
+  isEmailVerified,
+  toggleIsEmailVerified,
+  tabletMatches,
+  setSnackbarData,
+  isLoading,
+  setLoading,
+}) {
   const classes = useStyles();
 
-  // props
   const {
-    email,
-    setEmail,
-    isEmailVerified,
-    toggleIsEmailVerified,
-    verifyEmail,
-    onNext,
-    onBack,
-    tabletMatches,
-  } = props;
+    sendEmailLink,
+    isSignInWithEmailLink,
+    attachNITREmail,
+    checkNITREmail,
+  } = useContext(authContext);
+
+  const [isEmailLinkPage, setIsEmailLinkPage] = useState(false);
+
+  const checkInstitueEmail = () => {
+    if (!email) {
+      setSnackbarData({
+        message: 'Please enter your NITR email address',
+        severity: 'error',
+      });
+      return false;
+    }
+    if (!RegExp(/\@nitrkl\.ac\.in$/).test(email)) {
+      setSnackbarData({
+        message: 'Please enter a valid NITR email address',
+        severity: 'error',
+      });
+      return false;
+    }
+    return true;
+  };
+
+  const verifyInstituteEmail = async () => {
+    if (!checkInstitueEmail()) return;
+    setLoading(true);
+    const _res = await attachNITREmail(email, window.location.href);
+    console.log('attachNITREmail', _res);
+    onComplete();
+    setLoading(false);
+  };
+
+  const sendVerificationEmail = async () => {
+    if (!checkInstitueEmail()) return;
+    setLoading(true);
+    const { checkNITRMail } = await checkNITREmail(email);
+    if (checkNITRMail) {
+      setSnackbarData({
+        severity: 'error',
+        message:
+          'This email is already registered with us. Please login with different mail.',
+      });
+      setEmail('');
+      setLoading(false);
+      return;
+    }
+
+    await sendEmailLink(email);
+    toggleIsEmailVerified(true);
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    if (isEmailVerified && isSignInWithEmailLink(window.location.href)) {
+      setIsEmailLinkPage(true);
+    }
+  }, []);
 
   return (
     <Grid
@@ -41,48 +104,57 @@ function VerifyEmail(props) {
           {ONBOARDING.VERIFY_EMAIL.PRIMARY.TITLE}
         </Typography>
 
-        <Typography className={classes.verifyContent} variant='body1'>
-          {!isEmailVerified
-            ? ONBOARDING.VERIFY_EMAIL.PRIMARY.CONTENT
-            : `We have sent an email to ${email}`}
-        </Typography>
-
-        {tabletMatches && (
-          <Grid className={classes.mobileImgContainer} item xs={12}>
-            <Image
-              className={classes.img}
-              src={verifyEmailImg}
-              alt='Verify Email'
-            />
-          </Grid>
-        )}
-
-        {isEmailVerified ? (
-          <Typography className={classes.verifyContent} variant='body1'>
-            {ONBOARDING.VERIFY_EMAIL.SECONDARY.CONTENT}
-          </Typography>
-        ) : (
+        {!isLoading && (
           <>
-            <Typography className={classes.emailTitle} variant='h3'>
-              {ONBOARDING.VERIFY_EMAIL.SECONDARY.TITLE}
+            <Typography className={classes.verifyContent} variant='body1'>
+              {!isEmailVerified ? (
+                ONBOARDING.VERIFY_EMAIL.PRIMARY.CONTENT
+              ) : (
+                <>
+                  We have sent an email to
+                  <div className={classes.email}>{email}</div>
+                </>
+              )}
             </Typography>
-            <Input
-              className={classes.emailInput}
-              value={email}
-              onChange={setEmail}
-              placeholder={ONBOARDING.VERIFY_EMAIL.EMAIL_PLACEHOLDER}
-            />
-          </>
-        )}
 
-        {!isEmailVerified && (
-          <Typography className={classes.note} variant='body2'>
-            {ONBOARDING.VERIFY_EMAIL.NOTE}
-          </Typography>
+            {tabletMatches && (
+              <Grid className={classes.mobileImgContainer} item xs={12}>
+                <Image
+                  className={classes.img}
+                  src={verifyEmailImg}
+                  alt='Verify Email'
+                />
+              </Grid>
+            )}
+
+            {isEmailVerified ? (
+              <Typography className={classes.verifyContent} variant='body1'>
+                {ONBOARDING.VERIFY_EMAIL.SECONDARY.CONTENT}
+              </Typography>
+            ) : (
+              <>
+                <Typography className={classes.emailTitle} variant='h3'>
+                  {ONBOARDING.VERIFY_EMAIL.SECONDARY.TITLE}
+                </Typography>
+                <Input
+                  className={classes.emailInput}
+                  value={email}
+                  onChange={setEmail}
+                  placeholder={ONBOARDING.VERIFY_EMAIL.EMAIL_PLACEHOLDER}
+                />
+              </>
+            )}
+
+            {!isEmailVerified && (
+              <Typography className={classes.note} variant='body2'>
+                {ONBOARDING.VERIFY_EMAIL.NOTE}
+              </Typography>
+            )}
+          </>
         )}
       </Grid>
 
-      {!tabletMatches && (
+      {!tabletMatches && !isLoading && (
         <Grid className={classes.imgContainer} item xs={12} md={5}>
           <Image
             className={classes.img}
@@ -92,32 +164,39 @@ function VerifyEmail(props) {
         </Grid>
       )}
 
-      <Grid className={classes.buttonContainer} item xs={12}>
-        <Typography className={classes.back} variant='body1' onClick={onBack}>
-          Back
-        </Typography>
-        <Typography className={classes.skip} variant='body1' onClick={onNext}>
-          {isEmailVerified ? 'Resend Verification mail' : 'Skip'}
-        </Typography>
-        <Button
-          containerStyles={classes.button}
-          text={
-            tabletMatches
-              ? ONBOARDING.VERIFY_EMAIL.BUTTON.MOBILE
-              : isEmailVerified
-              ? ONBOARDING.VERIFY_EMAIL.BUTTON.SECONDARY
-              : ONBOARDING.VERIFY_EMAIL.BUTTON.PRIMARY
-          }
-          onClick={
-            !isEmailVerified
-              ? () => {
-                  verifyEmail();
-                  toggleIsEmailVerified();
-                }
-              : onNext
-          }
-        />
-      </Grid>
+      {!isLoading && (
+        <Grid className={classes.buttonContainer} item xs={12}>
+          <Typography className={classes.back} variant='body1' onClick={onBack}>
+            Back
+          </Typography>
+          <Typography
+            className={classes.skip}
+            variant='body1'
+            onClick={isEmailVerified ? sendVerificationEmail : onSkip}
+          >
+            {isEmailVerified ? 'Resend Verification mail' : 'Skip'}
+          </Typography>
+          <Button
+            containerStyles={classes.button}
+            text={
+              !isEmailVerified
+                ? ONBOARDING.VERIFY_EMAIL.BUTTON.PRIMARY
+                : isEmailLinkPage
+                ? ONBOARDING.VERIFY_EMAIL.BUTTON.FINALLY
+                : ONBOARDING.VERIFY_EMAIL.BUTTON.SECONDARY
+            }
+            onClick={
+              !isEmailVerified
+                ? sendVerificationEmail
+                : isEmailLinkPage
+                ? verifyInstituteEmail
+                : () => {
+                    window.open('https://mail.nitrkl.ac.in', '_blank');
+                  }
+            }
+          />
+        </Grid>
+      )}
     </Grid>
   );
 }
@@ -127,7 +206,8 @@ export default VerifyEmail;
 const useStyles = makeStyles((theme) => ({
   container: {
     width: '100%',
-    height: '100%',
+    minHeight: '40%',
+    maxHeight: '100%',
     backgroundColor: theme.palette.background.default,
     padding: 10,
     paddingLeft: 40,
@@ -168,6 +248,9 @@ const useStyles = makeStyles((theme) => ({
       width: '100%',
     },
   },
+  email: {
+    fontWeight: '700',
+  },
   buttonContainer: {
     display: 'flex',
     alignItems: 'center',
diff --git a/client/src/components/onboarding/stages/Welcome.js b/client/src/components/onboarding/stages/Welcome.js
index 37de0966..78ebb6aa 100644
--- a/client/src/components/onboarding/stages/Welcome.js
+++ b/client/src/components/onboarding/stages/Welcome.js
@@ -1,39 +1,80 @@
-import React, { useEffect, useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
+
 import Image from 'next/image';
+import { useRouter } from 'next/router';
 
-import makeStyles from '@mui/styles/makeStyles';
 import { Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 // Assets
 import logo from '../../../assets/images/logo.png';
-
 // Constants
 import { ONBOARDING } from '../../../assets/placeholder/onboarding';
-
 //Context
-import authContext from '../../../context/auth/AuthContext';
+import { authContext } from '../../../context/AuthContextProvider';
 
-function Welcome({ onNext, onLogin, tabletMatches }) {
+function Welcome({
+  onSignIn,
+  onSignUp,
+  tabletMatches,
+  setSnackbarData,
+  isLoading,
+  setLoading,
+}) {
   const classes = useStyles();
+  const { push } = useRouter();
 
   const { loginWithToken } = useContext(authContext);
   useEffect(() => {
-    function handleCredentialResponse(response) {
-      loginWithToken(response.credential);
-      // onNext();
+    async function handleCredentialResponse(response) {
+      setLoading(true);
+
+      const _loginResponse = await loginWithToken(response.credential);
+      if (!_loginResponse) {
+        setSnackbarData({
+          message: 'Something went wrong. Please try again.',
+          severity: 'error',
+        });
+        setLoading(false);
+        return;
+      }
+      if (_loginResponse.error) {
+        console.error(_loginResponse.error);
+        setSnackbarData({
+          message: `Oops! Your sign ${
+            _loginResponse.isNewUser ? 'up' : 'in'
+          } failed. Please try again.`,
+          severity: 'error',
+        });
+        setLoading(false);
+        return;
+      }
+      if (_loginResponse.isNewUser && !_loginResponse.isMigratedUser) {
+        onSignUp();
+      } else {
+        onSignIn();
+      }
     }
-    function gis() {
+
+    function gsi() {
       google.accounts.id.initialize({
         client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
         callback: handleCredentialResponse,
       });
-      google.accounts.id.renderButton(document.getElementById('buttonDiv'), {
-        theme: 'outline',
-        size: 'large',
-      });
+      google.accounts.id.renderButton(
+        document.getElementById('googleAccountSignInDiv'),
+        {
+          theme: 'outline',
+          size: 'large',
+        },
+      );
       google.accounts.id.prompt();
     }
-    gis();
+    const script = document.createElement('script');
+    script.src = 'https://accounts.google.com/gsi/client';
+    script.strategy = 'beforeInteractive';
+    script.onload = gsi;
+    document.head.appendChild(script);
   }, []);
 
   return (
@@ -50,13 +91,21 @@ function Welcome({ onNext, onLogin, tabletMatches }) {
         {ONBOARDING.WELCOME.CONTENT}
       </Typography>
 
-      <div id='buttonDiv'></div>
-      <Typography className={classes.skip} variant='body1' onClick={onNext}>
-        Skip
-      </Typography>
-      <Typography className={classes.terms} variant='body2'>
-        {ONBOARDING.WELCOME.TERMS}
-      </Typography>
+      {!isLoading && (
+        <>
+          <div id='googleAccountSignInDiv'></div>
+          <Typography
+            className={classes.skip}
+            variant='body1'
+            onClick={() => push('/')}
+          >
+            Skip
+          </Typography>
+          <Typography className={classes.terms} variant='body2'>
+            {ONBOARDING.WELCOME.TERMS}
+          </Typography>
+        </>
+      )}
     </div>
   );
 }
@@ -66,7 +115,8 @@ export default Welcome;
 const useStyles = makeStyles((theme) => ({
   container: {
     width: '100%',
-    height: '100%',
+    minHeight: '60%',
+    maxHeight: '100%',
     padding: '32px 12px',
     display: 'flex',
     flexDirection: 'column',
diff --git a/client/src/components/shared/button/ScrollToTopButton.js b/client/src/components/shared/button/ScrollToTopButton.js
index 0971c26f..62e6f947 100644
--- a/client/src/components/shared/button/ScrollToTopButton.js
+++ b/client/src/components/shared/button/ScrollToTopButton.js
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 
 import makeStyles from '@mui/styles/makeStyles';
 import { Fab } from '@mui/material';
-import { KeyboardArrowUp } from '@mui/icons-material';
+import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUp';
 
 const ScrollToTopButton = () => {
   const classes = useStyles();
@@ -26,6 +26,7 @@ const ScrollToTopButton = () => {
 
   useEffect(() => {
     window.addEventListener('scroll', toggleVisible);
+    return () => window.removeEventListener('scroll', toggleVisible);
   }, []);
 
   return (
diff --git a/client/src/components/widgets/HomeCarousel.js b/client/src/components/widgets/HomeCarousel.js
index 4d20bfe3..f8aad5b3 100644
--- a/client/src/components/widgets/HomeCarousel.js
+++ b/client/src/components/widgets/HomeCarousel.js
@@ -2,7 +2,8 @@ import React, { useState, useEffect } from 'react';
 
 import makeStyles from '@mui/styles/makeStyles';
 import { useSwipeable } from 'react-swipeable';
-import { ArrowBack, ArrowForward } from '@mui/icons-material';
+import ArrowBack from '@mui/icons-material/ArrowBack';
+import ArrowForward from '@mui/icons-material/ArrowForward';
 
 const HomeCarousel = ({ links }) => {
   const classes = useStyles();
diff --git a/client/src/components/widgets/PostHolder.js b/client/src/components/widgets/PostHolder.js
index ea6f4c60..fb6cbef2 100644
--- a/client/src/components/widgets/PostHolder.js
+++ b/client/src/components/widgets/PostHolder.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { PhoneOutlined } from '@mui/icons-material';
+import PhoneOutlined from '@mui/icons-material/PhoneOutlined';
 import { Grid, Typography } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 
diff --git a/client/src/components/widgets/SocietyCards.js b/client/src/components/widgets/SocietyCards.js
index 31ae15e5..9083b114 100644
--- a/client/src/components/widgets/SocietyCards.js
+++ b/client/src/components/widgets/SocietyCards.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import clsx from 'clsx';
 
-import { ExpandMore } from '@mui/icons-material';
+import ExpandMore from '@mui/icons-material/ExpandMore';
 import {
   Card,
   CardActions,
diff --git a/client/src/components/widgets/Squiggles.js b/client/src/components/widgets/Squiggles.js
index 019918df..eab4f7c6 100644
--- a/client/src/components/widgets/Squiggles.js
+++ b/client/src/components/widgets/Squiggles.js
@@ -22,11 +22,11 @@ function Squiggles({ data }) {
             </Button>
           </div>
           <div className={classes.squigglesTextWrapper}>
-            <p className={classes.squigglesText}>
+            <div className={classes.squigglesText}>
               <MarkdownWrapper variant='body1' styles={classes.squigglesText}>
                 {data.content}
               </MarkdownWrapper>
-            </p>
+            </div>
           </div>
         </div>
       </CardContent>
diff --git a/client/src/components/widgets/UserAvatar.js b/client/src/components/widgets/UserAvatar.js
new file mode 100644
index 00000000..ef7e719a
--- /dev/null
+++ b/client/src/components/widgets/UserAvatar.js
@@ -0,0 +1,68 @@
+import React, { useState, useContext } from 'react';
+
+import Avatar from '@mui/material/Avatar';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Logout from '@mui/icons-material/Logout';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import makeStyles from '@mui/styles/makeStyles';
+
+import { authContext } from '../../context/AuthContextProvider';
+
+const UserAvatar = ({ picture, name }) => {
+  const classes = useStyles();
+
+  const [anchorEl, setAnchorEl] = useState(null);
+  const { logout } = useContext(authContext);
+
+  const handleMenuOpen = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleLogOut = () => {
+    logout();
+    handleMenuClose();
+  };
+
+  return (
+    <div className={classes.avatarContainer}>
+      <Avatar
+        alt={name}
+        src={picture}
+        onClick={handleMenuOpen}
+        className={classes.avatar}
+      />
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleMenuClose}
+        getContentAnchorEl={null}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'center' }}
+      >
+        <MenuItem onClick={handleLogOut}>
+          <ListItemIcon>
+            <Logout fontSize='small' />
+          </ListItemIcon>
+          Logout
+        </MenuItem>
+      </Menu>
+    </div>
+  );
+};
+
+export default UserAvatar;
+
+const useStyles = makeStyles(() => ({
+  avatarContainer: {
+    position: 'relative',
+    display: 'inline-block',
+  },
+  avatar: {
+    cursor: 'pointer',
+  },
+}));
diff --git a/client/src/config/ApolloClient.js b/client/src/config/ApolloClient.js
deleted file mode 100644
index 9db0d17a..00000000
--- a/client/src/config/ApolloClient.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/* eslint-disable no-console */
-import React from 'react';
-import {
-  ApolloClient,
-  InMemoryCache,
-  ApolloProvider,
-  HttpLink,
-  from,
-} from '@apollo/client';
-import { setContext } from '@apollo/client/link/context';
-import { onError } from '@apollo/client/link/error';
-import { parseCookies } from 'nookies';
-
-const cache = new InMemoryCache();
-
-const errorLink = onError(({ graphQLErrors, networkError }) => {
-  if (graphQLErrors) {
-    graphQLErrors.map(({ message, location, path }) =>
-      // console.log(new Error({ message, location, path })),
-      console.error({ message, location, path }),
-    );
-  } else if (networkError) {
-    const { message, name, respose, result, bodyText, stack, statusCode } =
-      networkError;
-    console.log(
-      new Error({
-        message,
-        name,
-        respose,
-        result,
-        bodyText,
-        stack,
-        statusCode,
-      }),
-    );
-  }
-});
-
-const link = from([
-  errorLink,
-  new HttpLink({
-    uri: `${process.env.NEXT_PUBLIC_SERVER_ADDRESS}/v1/graph`,
-  }),
-]);
-
-const getApolloLink = (token) => {
-  const cookies = parseCookies();
-  const authLink = setContext((_, { headers }) => ({
-    headers: {
-      ...headers,
-      Authorization: token || cookies.firebaseToken || '',
-    },
-  }));
-  return authLink.concat(link);
-};
-
-const client = new ApolloClient({
-  cache,
-  link: getApolloLink(),
-  name: 'monday-morning-client',
-  version: '1.3',
-  queryDeduplication: false,
-  defaultOptions: {
-    watchQuery: {
-      fetchPolicy: 'cache-and-network',
-      errorPolicy: 'ignore',
-    },
-    query: {
-      fetchPolicy: 'network-only',
-      errorPolicy: 'all',
-    },
-    mutate: {
-      errorPolicy: 'all',
-    },
-  },
-});
-
-const ProviderWrapper = ({ children }) => {
-  return <ApolloProvider client={client}>{children}</ApolloProvider>;
-};
-
-export { client as GraphClient, getApolloLink };
-
-export default ProviderWrapper;
diff --git a/client/src/config/Root.js b/client/src/config/Root.js
deleted file mode 100644
index 609be105..00000000
--- a/client/src/config/Root.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { createStore, applyMiddleware, compose } from 'redux';
-import { Provider } from 'react-redux';
-import thunk from 'redux-thunk';
-
-import reducers from '../store/reducers';
-
-export default ({ initialState = {}, children }) => {
-  const composeEnhancers =
-    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-
-  const store = createStore(
-    reducers,
-    initialState,
-    composeEnhancers(applyMiddleware(thunk)),
-  );
-
-  return <Provider store={store}>{children}</Provider>;
-};
diff --git a/client/src/config/imagekit.js b/client/src/config/imagekit.js
new file mode 100644
index 00000000..7d21050b
--- /dev/null
+++ b/client/src/config/imagekit.js
@@ -0,0 +1,9 @@
+import ImageKit from 'imagekit-javascript';
+
+const imagekit = new ImageKit({
+  publicKey: process.env.NEXT_PUBLIC_IMAGEKIT_PUBLIC_KEY,
+  urlEndpoint: process.env.NEXT_PUBLIC_IMAGEKIT_URLENDPOINT,
+  authenticationEndpoint: `${process.env.NEXT_PUBLIC_SERVER_ADDRESS}${process.env.NEXT_PUBLIC_IMAGEKIT_AUTHENTICATION_ENDPOINT}`,
+});
+
+export default imagekit;
diff --git a/client/src/context/ApolloContextProvider.js b/client/src/context/ApolloContextProvider.js
new file mode 100644
index 00000000..55c6187d
--- /dev/null
+++ b/client/src/context/ApolloContextProvider.js
@@ -0,0 +1,130 @@
+import {
+  ApolloClient,
+  ApolloProvider,
+  HttpLink,
+  InMemoryCache,
+  from,
+  getApolloContext,
+} from '@apollo/client';
+import { setContext } from '@apollo/client/link/context';
+import { onError } from '@apollo/client/link/error';
+import { parseCookies, setCookie, destroyCookie } from 'nookies';
+import React, { useContext, useEffect } from 'react';
+import { authContext } from './AuthContextProvider';
+
+export const apolloContext = getApolloContext();
+
+const cache = new InMemoryCache();
+
+const errorLink = onError(({ graphQLErrors, networkError }) => {
+  if (graphQLErrors) {
+    graphQLErrors.map(({ message, location, path }) =>
+      console.error({ message, location, path }),
+    );
+  } else if (networkError) {
+    const { message, name, respose, result, bodyText, stack, statusCode } =
+      networkError;
+    console.log(
+      new Error({
+        message,
+        name,
+        respose,
+        result,
+        bodyText,
+        stack,
+        statusCode,
+      }),
+    );
+  }
+});
+
+const link = from([
+  errorLink,
+  new HttpLink({
+    uri: `${process.env.NEXT_PUBLIC_SERVER_ADDRESS}/v1/graph`,
+    credentials: 'include',
+  }),
+]);
+
+const getApolloLink = (useApiKey = false, token) => {
+  const cookies = parseCookies();
+
+  const authLink = setContext((_, { headers }) =>
+    useApiKey
+      ? {
+          headers: {
+            ...headers,
+            'x-api-key': process.env.SERVER_ACCESS_API_KEY,
+          },
+        }
+      : {
+          headers: {
+            ...headers,
+            Authorization: token || cookies?.firebaseToken || '',
+          },
+        },
+  );
+  return authLink.concat(link);
+};
+
+const getGraphClient = (useApiKey = false, token) => {
+  return new ApolloClient({
+    cache,
+    link: getApolloLink(useApiKey, token),
+    name: 'monday-morning-client',
+    version: '1.3',
+    queryDeduplication: false,
+    defaultOptions: {
+      watchQuery: {
+        fetchPolicy: 'cache-and-network',
+        errorPolicy: 'ignore',
+      },
+      query: {
+        fetchPolicy: 'network-only',
+        errorPolicy: 'all',
+      },
+      mutate: {
+        errorPolicy: 'all',
+      },
+    },
+  });
+};
+
+export { getApolloLink, getGraphClient };
+
+const ApolloContextProvider = ({ children }) => {
+  const { user } = useContext(authContext);
+
+  const client = getGraphClient(false, user?.firebaseToken);
+
+  useEffect(() => {
+    console.log('apolloClient', user?.firebaseToken);
+
+    client.setLink(
+      getApolloLink(false, user?.firebaseToken ?? user?.accessToken),
+    );
+
+    if (user?.firebaseToken || user?.accessToken) {
+      setCookie(
+        null,
+        'firebaseToken',
+        user?.firebaseToken ?? user?.accessToken,
+        {
+          secure: true,
+          sameSite: true,
+          maxAge: 3600,
+        },
+      );
+    } else {
+      destroyCookie(null, 'firebaseToken');
+    }
+  }, [user]);
+
+  return (
+    <apolloContext.Provider value={client} client={client}>
+      {children}
+    </apolloContext.Provider>
+  );
+};
+
+export default ApolloContextProvider;
diff --git a/client/src/context/AuthContextProvider.js b/client/src/context/AuthContextProvider.js
new file mode 100644
index 00000000..ae2719b1
--- /dev/null
+++ b/client/src/context/AuthContextProvider.js
@@ -0,0 +1,290 @@
+import React, { createContext, useEffect, useState } from 'react';
+
+import { getAnalytics, isSupported } from 'firebase/analytics';
+import {
+  EmailAuthProvider,
+  GoogleAuthProvider,
+  getAdditionalUserInfo,
+  getIdToken,
+  isSignInWithEmailLink,
+  linkWithCredential,
+  onIdTokenChanged,
+  sendSignInLinkToEmail,
+  signInWithCredential,
+} from 'firebase/auth';
+import { destroyCookie, setCookie } from 'nookies';
+import checkNITRMail from '../graphql/queries/user/checkNITRMail';
+import { auth, firebaseApp } from '../config/firebase';
+import imagekit from '../config/imagekit';
+import addNITRMail from '../graphql/mutations/user/addNITRMail';
+import registerUser from '../graphql/mutations/user/registerUser';
+import updateUserProfilePicture from '../graphql/mutations/user/updateUserProfilePicture';
+import getFirebaseUserByEmail from '../graphql/queries/user/getFirebaseUserByEmail';
+import { getApolloLink, getGraphClient } from './ApolloContextProvider';
+
+export const authContext = createContext();
+
+const AuthContextProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+
+  const graphClient = getGraphClient(false, user?.firebaseToken);
+
+  useEffect(() => {
+    if (isSupported() && process.env.NODE_ENV === 'production') {
+      getAnalytics(firebaseApp);
+    }
+    if (auth) {
+      onIdTokenChanged(auth, async (_user) => {
+        console.log('onIdTokenChanged', _user);
+
+        if (!_user) {
+          setUser(null);
+          return;
+        }
+
+        const firebaseToken = await getIdToken(_user, false);
+
+        setUser((_u) => ({
+          ...(user ?? {}),
+          ...(_u ?? {}),
+          ..._user,
+          firebaseToken,
+        }));
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    console.log('user', user);
+
+    graphClient.setLink(
+      getApolloLink(false, user?.firebaseToken ?? user?.accessToken),
+    );
+
+    if (user?.firebaseToken || user?.accessToken) {
+      setCookie(
+        null,
+        'firebaseToken',
+        user?.firebaseToken ?? user?.accessToken,
+        {
+          secure: true,
+          sameSite: true,
+          maxAge: 3600,
+        },
+      );
+    } else {
+      destroyCookie(null, 'firebaseToken');
+    }
+  }, [user]);
+
+  const loginWithToken = async (_token) => {
+    try {
+      const _credential = GoogleAuthProvider.credential(_token);
+
+      const res = await signInWithCredential(auth, _credential);
+
+      const { user: _user } = res;
+
+      const _firebaseToken = await getIdToken(_user, false);
+      graphClient.setLink(getApolloLink(false, _firebaseToken));
+
+      setUser((_u) => ({
+        ..._user,
+        firebaseToken: _firebaseToken,
+        refreshToken: _user.refreshToken,
+      }));
+
+      if (!getAdditionalUserInfo(res).isNewUser) {
+        const {
+          data: { getFirebaseUserByEmail: _fbUser },
+        } = await graphClient.query({
+          query: getFirebaseUserByEmail,
+          variables: {
+            email: _user.email,
+          },
+        });
+
+        setUser((_u) => ({
+          ..._user,
+          firebaseToken: _firebaseToken,
+          refreshToken: _user.refreshToken,
+          mid: _fbUser?.customClaims?.mid,
+          roles: _fbUser?.customClaims?.roles,
+        }));
+
+        return {
+          isNewUser: false,
+          user: {
+            ..._user,
+            firebaseToken: _firebaseToken,
+            refreshToken: _user.refreshToken,
+            mid: _fbUser?.customClaims?.mid,
+            roles: _fbUser?.customClaims?.roles,
+          },
+        };
+      }
+
+      const _newAccount = await graphClient.mutate({
+        mutation: registerUser,
+        variables: {
+          fullName: _user.displayName,
+          email: _user.email,
+        },
+      });
+
+      if (!_newAccount?.data?.registerUser) {
+        throw new Error('Error Registering User');
+      }
+
+      const _refreshedFirebaseToken = await getIdToken(_user, true);
+      graphClient.setLink(getApolloLink(false, _refreshedFirebaseToken));
+
+      setUser((_u) => ({
+        ..._user,
+        ...(_u ?? {}),
+        firebaseToken: _firebaseToken,
+        refreshToken: _user.refreshToken,
+        mid: _newAccount.data.registerUser.id,
+      }));
+
+      if (_newAccount.data.registerUser.accountType === 2) {
+        return {
+          isNewUser: true,
+          isMigratedUser: true,
+          user: user,
+          newAccount: { ..._newAccount },
+        };
+      }
+
+      let _imageUpload = {
+        filePath: '/user/default.png',
+      };
+
+      try {
+        const _userPicture = await (await fetch(_user.photoURL)).blob();
+
+        if (!['image/png', 'image/jpeg'].includes(_userPicture.type)) {
+          throw new Error('Invalid Image Type');
+        }
+
+        _imageUpload = await imagekit
+          .upload({
+            file: _user.photoURL,
+            useUniqueFileName: false,
+            folder: '/user',
+            fileName: `${_newAccount.data.registerUser.id}.${
+              _userPicture.type.toString().split('/')[1]
+            }`,
+            tags: [_user.uid, 'user', 'profilePicture'],
+          })
+          .then((result) => {
+            return result;
+          });
+      } catch (error) {
+        console.log(error);
+      }
+
+      const _imageUpdateResponse = await graphClient.mutate({
+        mutation: updateUserProfilePicture,
+        variables: {
+          id: _newAccount.data.registerUser.id,
+          storePath: _imageUpload.filePath,
+        },
+      });
+
+      return {
+        isNewUser: true,
+        user: user,
+        newAccount: { ..._newAccount, ..._imageUpdateResponse },
+      };
+    } catch (error) {
+      return {
+        isNewUser: user?.isNewUser ?? false,
+        error,
+      };
+    }
+  };
+
+  const sendEmailLink = async (email) => {
+    try {
+      const _actionCodeSettings = {
+        url: `${
+          process.env.NODE_ENV === 'production'
+            ? 'https://mondaymorning.nitrkl.ac.in'
+            : window.location.origin
+        }/onboarding?stage=VERIFY_EMAIL&email=${email}&isEmailLink=true`,
+        handleCodeInApp: true,
+      };
+      await sendSignInLinkToEmail(auth, email, _actionCodeSettings);
+      return true;
+    } catch (error) {
+      console.error(error);
+      return { error };
+    }
+  };
+
+  const _isSignInWithEmailLink = (href) => isSignInWithEmailLink(auth, href);
+
+  const attachNITREmail = async (nitrMail, href) => {
+    try {
+      const _credential = EmailAuthProvider.credentialWithLink(nitrMail, href);
+      const _userCredential = await linkWithCredential(
+        auth.currentUser,
+        _credential,
+      );
+
+      const _user = await graphClient.mutate({
+        mutation: addNITRMail,
+        variables: {
+          email: user.email,
+          nitrMail,
+        },
+      });
+
+      // await getIdToken(auth.currentUser, true);
+
+      return { userCredential: _userCredential, user: _user };
+    } catch (error) {
+      console.error(error);
+      return { error };
+    }
+  };
+
+  const checkNITREmail = async (email) => {
+    try {
+      const { data } = await graphClient.query({
+        query: checkNITRMail,
+        variables: {
+          nitrMail: email,
+        },
+      });
+
+      return data;
+    } catch (error) {
+      console.error(error);
+      return { error };
+    }
+  };
+
+  const logout = () => {
+    auth.signOut();
+  };
+
+  return (
+    <authContext.Provider
+      value={{
+        loginWithToken,
+        sendEmailLink,
+        isSignInWithEmailLink: _isSignInWithEmailLink,
+        attachNITREmail,
+        checkNITREmail,
+        logout,
+        user,
+      }}
+    >
+      {children}
+    </authContext.Provider>
+  );
+};
+
+export default AuthContextProvider;
diff --git a/client/src/context/SidebarContext.jsx b/client/src/context/SidebarContextProvider.jsx
similarity index 100%
rename from client/src/context/SidebarContext.jsx
rename to client/src/context/SidebarContextProvider.jsx
diff --git a/client/src/context/auth/AuthContext.js b/client/src/context/auth/AuthContext.js
deleted file mode 100644
index 2a48c242..00000000
--- a/client/src/context/auth/AuthContext.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { createContext } from 'react';
-
-const authContext = createContext();
-
-export default authContext;
diff --git a/client/src/context/auth/AuthState.js b/client/src/context/auth/AuthState.js
deleted file mode 100644
index 2beaacbe..00000000
--- a/client/src/context/auth/AuthState.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-//context
-import authContext from './AuthContext';
-
-//firebase
-import {
-  GoogleAuthProvider,
-  signInWithCredential,
-  getIdToken,
-  onAuthStateChanged,
-  getAdditionalUserInfo,
-} from 'firebase/auth';
-import { getAnalytics, isSupported } from 'firebase/analytics';
-import { auth, firebaseApp } from '../../config/firebase';
-
-//graphql
-import { getApolloLink, GraphClient } from '../../config/ApolloClient';
-import registerUser from '../../graphql/mutations/user/registerUser';
-
-import ImageKit from 'imagekit-javascript';
-import { setCookie } from 'nookies';
-
-const AuthState = ({ children }) => {
-  const [refreshToken, setRefreshToken] = useState('');
-  const [user, setUser] = useState(null);
-  const [firebaseToken, setFirebaseToken] = useState('');
-
-  useEffect(() => {
-    if (isSupported() && process.env.NODE_ENV === 'production') {
-      getAnalytics(firebaseApp);
-    }
-    if (auth) {
-      onAuthStateChanged(auth, async (_user) => {
-        setUser(_user);
-        if (_user) setFirebaseToken(await getIdToken(_user, false));
-      });
-    }
-  }, []);
-
-  useEffect(() => {
-    GraphClient.setLink(getApolloLink(firebaseToken));
-    setCookie(null, 'firebaseToken', firebaseToken, {
-      secure: true,
-      sameSite: true,
-      maxAge: 3600,
-    });
-  }, [user, firebaseToken, refreshToken]);
-
-  const loginWithToken = async (_token) => {
-    const credential = GoogleAuthProvider.credential(_token);
-
-    const res = await signInWithCredential(auth, credential);
-
-    const { user, _tokenResponse } = res;
-
-    GraphClient.setLink(getApolloLink(user.accessToken));
-    setFirebaseToken(user.accessToken);
-    setRefreshToken(user.refreshToken);
-    setUser(user);
-
-    if (getAdditionalUserInfo(res).isNewUser) {
-      try {
-        const imagekit = new ImageKit({
-          publicKey: process.env.NEXT_PUBLIC_IMAGEKIT_PUBLIC_KEY,
-          urlEndpoint: process.env.NEXT_PUBLIC_IMAGEKIT_URLENDPOINT,
-          authenticationEndpoint: `${process.env.NEXT_PUBLIC_SERVER_ADDRESS}${process.env.NEXT_PUBLIC_IMAGEKIT_AUTHENTICATION_ENDPOINT}`,
-        });
-
-        const newAccount = await GraphClient.mutate({
-          mutation: registerUser,
-          variables: {
-            fullName: user.displayName,
-            email: user.email,
-          },
-        });
-        console.log('Account Created ', newAccount);
-
-        const userPicture = await (await fetch(user.photoURL)).blob();
-
-        if (!['image/png', 'image/jpeg'].includes(userPicture.type)) {
-          // throw error
-        }
-
-        const imageUpload = await imagekit
-          .upload({
-            file: user.photoURL,
-            folder: '/user',
-            fileName: `${newAccount.data.registerUser.id}.${
-              userPicture.type.toString().split('/')[1]
-            }`,
-            tags: [user.uid, 'user', 'profilePicture'],
-          })
-          .then((result) => {
-            console.log('Upload Success', result);
-          });
-      } catch (err) {
-        console.log(err);
-      }
-    }
-  };
-
-  const logout = () => {
-    auth.signOut();
-  };
-
-  return (
-    <authContext.Provider
-      value={{ loginWithToken, logout, user, firebaseToken, refreshToken }}
-    >
-      {children}
-    </authContext.Provider>
-  );
-};
-
-export default AuthState;
diff --git a/client/src/graphql/mutations/user/addNITRMail.js b/client/src/graphql/mutations/user/addNITRMail.js
new file mode 100644
index 00000000..30b90424
--- /dev/null
+++ b/client/src/graphql/mutations/user/addNITRMail.js
@@ -0,0 +1,15 @@
+import { gql } from '@apollo/client';
+
+const addNITRMail = gql`
+  mutation addNITREmail($email: String!, $nitrMail: String!) {
+    addNITRMail(email: $email, nitrMail: $nitrMail) {
+      id
+      fullName
+      accountType
+      email
+      nitrMail
+    }
+  }
+`;
+
+export default addNITRMail;
diff --git a/client/src/graphql/mutations/user/newsLetterSubscription.js b/client/src/graphql/mutations/user/newsLetterSubscription.js
new file mode 100644
index 00000000..2a815b23
--- /dev/null
+++ b/client/src/graphql/mutations/user/newsLetterSubscription.js
@@ -0,0 +1,12 @@
+import { gql } from '@apollo/client';
+
+const newsLetterSubscription = gql`
+  mutation ($userId: ID!, $flag: Boolean!) {
+    newsletterSubscription(id: $userId, flag: $flag) {
+      id
+      isNewsletterSubscribed
+    }
+  }
+`;
+
+export default newsLetterSubscription;
diff --git a/client/src/graphql/mutations/user/registerUser.js b/client/src/graphql/mutations/user/registerUser.js
index 45548a97..1ad0d79c 100644
--- a/client/src/graphql/mutations/user/registerUser.js
+++ b/client/src/graphql/mutations/user/registerUser.js
@@ -6,6 +6,7 @@ export default gql`
       id
       fullName
       email
+      accountType
     }
   }
 `;
diff --git a/client/src/graphql/mutations/user/updateUserProfilePicture.js b/client/src/graphql/mutations/user/updateUserProfilePicture.js
new file mode 100644
index 00000000..8e71250f
--- /dev/null
+++ b/client/src/graphql/mutations/user/updateUserProfilePicture.js
@@ -0,0 +1,26 @@
+import { gql } from '@apollo/client';
+
+const updateUserProfilePicture = gql`
+  mutation UpdateUserProfilePicture(
+    $id: ID!
+    $store: Int
+    $storePath: String!
+    $blurhash: String
+  ) {
+    updateUserProfilePicture(
+      id: $id
+      store: $store
+      storePath: $storePath
+      blurhash: $blurhash
+    ) {
+      id
+      picture {
+        store
+        storePath
+        blurhash
+      }
+    }
+  }
+`;
+
+export default updateUserProfilePicture;
diff --git a/client/src/graphql/mutations/user/updateUserTopics.js b/client/src/graphql/mutations/user/updateUserTopics.js
new file mode 100644
index 00000000..f7fc2819
--- /dev/null
+++ b/client/src/graphql/mutations/user/updateUserTopics.js
@@ -0,0 +1,12 @@
+import { gql } from '@apollo/client';
+
+const updateUserTopics = gql`
+  mutation UpdateUserTopics($id: ID!, $interestedTopics: [Int]!) {
+    updateUserTopics(id: $id, interestedTopics: $interestedTopics) {
+      id
+      interestedTopics
+    }
+  }
+`;
+
+export default updateUserTopics;
diff --git a/client/src/graphql/queries/user/checkNITRMail.js b/client/src/graphql/queries/user/checkNITRMail.js
new file mode 100644
index 00000000..6b066e3b
--- /dev/null
+++ b/client/src/graphql/queries/user/checkNITRMail.js
@@ -0,0 +1,10 @@
+import { gql } from '@apollo/client';
+
+const checkNITRMail = gql`
+  query CheckNITRMail($nitrMail: String!) {
+    checkNITRMail(nitrMail: $nitrMail) {
+      nitrMail
+    }
+  }
+`;
+export default checkNITRMail;
diff --git a/client/src/graphql/queries/user/getFirebaseUserByEmail.js b/client/src/graphql/queries/user/getFirebaseUserByEmail.js
new file mode 100644
index 00000000..d3b8354a
--- /dev/null
+++ b/client/src/graphql/queries/user/getFirebaseUserByEmail.js
@@ -0,0 +1,15 @@
+import { gql } from '@apollo/client';
+
+const getFirebaseUserByEmail = gql`
+  query GetFirebaseUserByEmail($email: String!) {
+    getFirebaseUserByEmail(email: $email) {
+      email
+      customClaims {
+        mid
+        roles
+      }
+    }
+  }
+`;
+
+export default getFirebaseUserByEmail;
diff --git a/client/src/hooks/useAutoComplete.js b/client/src/hooks/useAutoComplete.js
index 8b3598af..eb902285 100644
--- a/client/src/hooks/useAutoComplete.js
+++ b/client/src/hooks/useAutoComplete.js
@@ -1,10 +1,11 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useContext } from 'react';
 
 //gql
-import { GraphClient } from '../config/ApolloClient';
 import getAutoComplete from '../graphql/queries/article/getAutoComplete';
+import { apolloContext } from '../context/ApolloContextProvider';
 
 const useAutoComplete = (searchText, limit) => {
+  const graphClient = useContext(apolloContext);
   const [searchKeyword, setSearchKeyword] = useState(searchText);
   const [searchResult, setSearchResult] = useState([]);
 
@@ -27,7 +28,7 @@ const useAutoComplete = (searchText, limit) => {
     (async () => {
       const {
         data: { getAutoComplete: autoCompleteResult },
-      } = await GraphClient.query({
+      } = await graphClient.query({
         query: getAutoComplete,
         variables: { keywords: searchKeyword, limit: limit },
       });
diff --git a/client/src/middleware.js b/client/src/middleware.js
new file mode 100644
index 00000000..e143ec12
--- /dev/null
+++ b/client/src/middleware.js
@@ -0,0 +1,55 @@
+import { NextResponse } from 'next/server';
+
+export async function middleware(request) {
+  try {
+    const [, , articleId] = request.nextUrl.pathname.split('/');
+
+    if (!articleId) {
+      const url = request.nextUrl.clone();
+      url.pathname = '/500';
+      return NextResponse.rewrite(url);
+    }
+
+    const cookies = {
+      firebaseToken: request.cookies?.get('firebaseToken'),
+    };
+
+    const queryString = `query getArticleByID { getArticleByID(id: "${articleId}") { id articleType title createdAt updatedAt }}`;
+
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_SERVER_ADDRESS}/v1/graph?query=${queryString}`,
+      {
+        headers: cookies.firebaseToken
+          ? {
+              Authorization: cookies.firebaseToken,
+              'Content-Type': 'application/json',
+            }
+          : {
+              'Content-Type': 'application/json',
+            },
+      },
+    ).then((res) => {
+      return res.json();
+    });
+
+    if (
+      response?.errors?.some((error) =>
+        ['FORBIDDEN', 'NOT_FOUND'].includes(error?.message),
+      )
+    ) {
+      const url = request.nextUrl.clone();
+      url.pathname = '/404';
+      return NextResponse.rewrite(url);
+    }
+
+    return NextResponse.next();
+  } catch (error) {
+    const url = request.nextUrl.clone();
+    url.pathname = '/500';
+    return NextResponse.rewrite(url);
+  }
+}
+
+export const config = {
+  matcher: '/article/:articleId/:articleSlug?',
+};
diff --git a/client/src/pages/404.jsx b/client/src/pages/404.jsx
index 67b95471..7cb5e634 100644
--- a/client/src/pages/404.jsx
+++ b/client/src/pages/404.jsx
@@ -5,7 +5,7 @@ import Image from 'next/image';
 
 import { Grid, Typography } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
-import { ArrowForward } from '@mui/icons-material';
+import ArrowForward from '@mui/icons-material/ArrowForward';
 
 import logo from '../assets/images/logo_mm.png';
 import LINKS from '../utils/getLinks';
diff --git a/client/src/pages/500.jsx b/client/src/pages/500.jsx
index b7794ca9..94a0496c 100644
--- a/client/src/pages/500.jsx
+++ b/client/src/pages/500.jsx
@@ -5,7 +5,7 @@ import Image from 'next/image';
 
 import { Grid, Typography } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
-import { ArrowForward } from '@mui/icons-material';
+import ArrowForward from '@mui/icons-material/ArrowForward';
 
 import logo from '../assets/images/logo_mm.png';
 import LINKS from '../utils/getLinks';
diff --git a/client/src/pages/[category]/[...subCategory].jsx b/client/src/pages/[category]/[...subCategory].jsx
index 2f788465..bb4959c5 100644
--- a/client/src/pages/[category]/[...subCategory].jsx
+++ b/client/src/pages/[category]/[...subCategory].jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import Head from 'next/head';
 
-import { GraphClient } from '../../config/ApolloClient';
+import { getGraphClient } from '../../context/ApolloContextProvider';
 
 // Components
 import ActivityIndicator from '../../components/shared/ActivityIndicator';
@@ -209,6 +209,8 @@ export async function getStaticProps({
   preview,
 }) {
   try {
+    const graphClient = getGraphClient(true);
+
     const department = subCategory.length === 3 ? subCategory[1] : false;
     const pageNumber =
       subCategory.length === 3 ? subCategory[2] : subCategory[1];
@@ -238,11 +240,11 @@ export async function getStaticProps({
 
     const {
       data: { getArticlesByCategories: articleList },
-    } = await GraphClient.query({
+    } = await graphClient.query({
       query: getArticlesByCategories,
       variables: {
         categoryNumbers: [
-          departmentDetails?.idNumber || subCategoryDetails?.idNumber,
+          departmentDetails?.idNumber || subCategoryDetails.idNumber,
         ],
         limit: 7,
         offset: 7 * (parseInt(pageNumber) - 1),
@@ -251,11 +253,11 @@ export async function getStaticProps({
 
     const {
       data: { countOfArticlesBySubCategory: countOfArticles },
-    } = await GraphClient.query({
+    } = await graphClient.query({
       query: countOfArticlesBySubCategory,
       variables: {
         categoryNumber:
-          departmentDetails?.idNumber || subCategoryDetails?.idNumber,
+          departmentDetails?.idNumber || subCategoryDetails.idNumber,
       },
     });
 
@@ -290,8 +292,8 @@ export async function getStaticPaths() {
     params: {
       category: path?.split('/')[1],
       subCategory: path?.split('/')[3]
-        ? [(path?.split('/')[2], path?.split('/')[3], '1')]
-        : [(path?.split('/')[2], '1')],
+        ? [path?.split('/')[2], path?.split('/')[3], '1']
+        : [path?.split('/')[2], '1'],
     },
   }));
   return { paths, fallback: true };
diff --git a/client/src/pages/[category]/index.jsx b/client/src/pages/[category]/index.jsx
index f279bd9a..201e2d2b 100644
--- a/client/src/pages/[category]/index.jsx
+++ b/client/src/pages/[category]/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useRouter } from 'next/router';
 import Head from 'next/head';
 
-import { GraphClient } from '../../config/ApolloClient';
+import { getGraphClient } from '../../context/ApolloContextProvider';
 
 // Components
 import ActivityIndicator from '../../components/shared/ActivityIndicator';
@@ -175,13 +175,15 @@ export async function getStaticProps({
   preview,
 }) {
   try {
+    const graphClient = getGraphClient(true);
+
     const category = ROUTES.CATEGORIES.filter(
       ({ asyncRoutePath }) => asyncRoutePath === './Category',
     ).filter(({ shortName }) => shortName === categoryShortName)[0];
 
     const {
       data: { getArticlesByCategories: articleList },
-    } = await GraphClient.query({
+    } = await graphClient.query({
       query: getArticlesByCategories,
       variables: {
         categoryNumbers: [category?.idNumber, ...category?.subCategoryIds],
diff --git a/client/src/pages/_app.jsx b/client/src/pages/_app.jsx
index 2d9119b0..b0934ed7 100644
--- a/client/src/pages/_app.jsx
+++ b/client/src/pages/_app.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import Head from 'next/head';
-import Router from 'next/router';
+// import Router from 'next/router';
 
 // Styles
 import '../../public/index.css';
@@ -10,19 +10,17 @@ import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
 import { CssBaseline } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 
-// Providers
-import ApolloClient from '../config/ApolloClient';
-import AuthState from '../context/auth/AuthState';
-
 // Components
 // import ScrollToTopOnMount from '../components/shared/ScrollToTopOnMount';
 import ScrollToTopButton from '../components/shared/button/ScrollToTopButton';
 import ActivityIndicator from '../components/shared/ActivityIndicator';
-import SidebarContextProvider from '../context/SidebarContext';
+import SidebarContextProvider from '../context/SidebarContextProvider';
 // Theme
 import lightTheme from '../config/themes/light';
 import { useRouter } from 'next/router';
-import { BrowserRouter } from 'react-router-dom';
+// import { BrowserRouter } from 'react-router-dom';
+import ApolloContextProvider from '../context/ApolloContextProvider';
+import AuthContextProvider from '../context/AuthContextProvider';
 
 function TahitiApp({ Component, pageProps }) {
   const classes = useStyles();
@@ -48,8 +46,8 @@ function TahitiApp({ Component, pageProps }) {
   }, []);
 
   return (
-    <AuthState>
-      <ApolloClient>
+    <AuthContextProvider>
+      <ApolloContextProvider>
         <SidebarContextProvider>
           <Head>
             {/* <!-- =============== Standard Meta Tags =============== --> */}
@@ -76,8 +74,8 @@ function TahitiApp({ Component, pageProps }) {
             </ThemeProvider>
           </StyledEngineProvider>
         </SidebarContextProvider>
-      </ApolloClient>
-    </AuthState>
+      </ApolloContextProvider>
+    </AuthContextProvider>
   );
 }
 
diff --git a/client/src/pages/archive/[...yearAndMonth].jsx b/client/src/pages/archive/[...yearAndMonth].jsx
index 99a5998d..65b80304 100644
--- a/client/src/pages/archive/[...yearAndMonth].jsx
+++ b/client/src/pages/archive/[...yearAndMonth].jsx
@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
 import Head from 'next/head';
 
 //liberaries
-import { GraphClient } from '../../config/ApolloClient';
+import { getGraphClient } from '../../context/ApolloContextProvider';
 
 //components
 import Archive from '../../screens/Archive';
@@ -171,9 +171,11 @@ export async function getStaticProps({
   },
 }) {
   try {
+    const graphClient = getGraphClient(true);
+
     const {
       data: { listArticlesByYearAndMonth: archiveArticles },
-    } = await GraphClient.query({
+    } = await graphClient.query({
       query: listArticlesByYearAndMonth,
       variables: {
         onlyPublished: true,
diff --git a/client/src/pages/article/[...article].jsx b/client/src/pages/article/[...article].jsx
index e5a4b1d1..0bac74ab 100644
--- a/client/src/pages/article/[...article].jsx
+++ b/client/src/pages/article/[...article].jsx
@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
 import Head from 'next/head';
 
 // Libraries
-import { GraphClient } from '../../config/ApolloClient';
+import { getGraphClient } from '../../context/ApolloContextProvider';
 import STORES from '../../utils/getStores';
 
 // Components
@@ -199,10 +199,12 @@ export async function getStaticProps({
   preview,
 }) {
   try {
+    const graphClient = getGraphClient(true);
+
     if (oldArticleLink) {
       const {
         data: { getArticleByOldID: article },
-      } = await GraphClient.query({
+      } = await graphClient.query({
         query: getArticleByOldID,
         variables: { id: parseInt(oldArticleLink.split('-')[0]) },
       });
@@ -223,7 +225,7 @@ export async function getStaticProps({
 
     const {
       data: { getArticleByID: article },
-    } = await GraphClient.query({
+    } = await graphClient.query({
       query: getArticleByID,
       variables: { id: articleId },
     });
diff --git a/client/src/pages/comingSoon.jsx b/client/src/pages/comingSoon.jsx
index 809e87fb..b5f9a2d3 100644
--- a/client/src/pages/comingSoon.jsx
+++ b/client/src/pages/comingSoon.jsx
@@ -5,7 +5,7 @@ import Image from 'next/image';
 
 import { Grid, Typography } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
-import { ArrowForward } from '@mui/icons-material';
+import ArrowForward from '@mui/icons-material/ArrowForward';
 
 import logo from '../assets/images/logo_mm.png';
 import LINKS from '../utils/getLinks';
diff --git a/client/src/pages/expressions/[...subCategory].jsx b/client/src/pages/expressions/[...subCategory].jsx
index 53f64519..86978284 100644
--- a/client/src/pages/expressions/[...subCategory].jsx
+++ b/client/src/pages/expressions/[...subCategory].jsx
@@ -7,7 +7,7 @@ import ActivityIndicator from '../../components/shared/ActivityIndicator';
 import SubCategory from '../../screens/SubCategory';
 import Marginals from '../../components/marginals/Marginals';
 
-import { GraphClient } from '../../config/ApolloClient';
+import { getGraphClient } from '../../context/ApolloContextProvider';
 
 // Utils
 import ROUTES from '../../utils/getRoutes';
@@ -208,13 +208,15 @@ export async function getStaticProps({
   preview,
 }) {
   try {
+    const graphClient = getGraphClient(true);
+
     let subCategoryDetails = ROUTES.SUB_CATEGORIES.OBJECT.EXPRESSIONS.filter(
       ({ shortName }) => shortName === subCategory,
     )[0];
 
     const {
       data: { getArticlesByCategories: articleList },
-    } = await GraphClient.query({
+    } = await graphClient.query({
       query: getArticlesByCategories,
       variables: {
         categoryNumbers: [subCategoryDetails?.idNumber],
@@ -225,7 +227,7 @@ export async function getStaticProps({
 
     const {
       data: { countOfArticlesBySubCategory: countOfArticles },
-    } = await GraphClient.query({
+    } = await graphClient.query({
       query: countOfArticlesBySubCategory,
       variables: {
         categoryNumber: subCategoryDetails?.idNumber,
diff --git a/client/src/pages/expressions/index.jsx b/client/src/pages/expressions/index.jsx
index 9a9490b3..9c34ac03 100644
--- a/client/src/pages/expressions/index.jsx
+++ b/client/src/pages/expressions/index.jsx
@@ -4,7 +4,7 @@ import Head from 'next/head';
 // Components
 import Marginals from '../../components/marginals/Marginals';
 import Expressions from '../../screens/Expressions';
-import { GraphClient } from '../../config/ApolloClient';
+import { getGraphClient } from '../../context/ApolloContextProvider';
 import getArticlesByCategories from '../../graphql/queries/category/getArticlesByCategories';
 import Custom500 from '../500';
 
@@ -170,16 +170,18 @@ const ExpressionsPage = ({
 
 export async function getStaticProps() {
   try {
+    const graphClient = getGraphClient(true);
+
     const {
       data: { getArticlesByCategories: witsdom },
-    } = await GraphClient.query({
+    } = await graphClient.query({
       query: getArticlesByCategories,
       variables: { categoryNumbers: 61, limit: 3 },
     });
 
     const {
       data: { getArticlesByCategories: photostory },
-    } = await GraphClient.query({
+    } = await graphClient.query({
       query: getArticlesByCategories,
       variables: { categoryNumbers: 62, limit: 5 },
     });
@@ -188,7 +190,7 @@ export async function getStaticProps() {
       data: {
         getArticlesByCategories: [editorial],
       },
-    } = await GraphClient.query({
+    } = await graphClient.query({
       query: getArticlesByCategories,
       variables: { categoryNumbers: 66, limit: 3 },
     });
@@ -197,7 +199,7 @@ export async function getStaticProps() {
       data: {
         getArticlesByCategories: [miscellaneous],
       },
-    } = await GraphClient.query({
+    } = await graphClient.query({
       query: getArticlesByCategories,
       variables: { categoryNumbers: 67, limit: 3 },
     });
diff --git a/client/src/pages/guide.jsx b/client/src/pages/guide.jsx
index b5c91ecc..385dfd6a 100644
--- a/client/src/pages/guide.jsx
+++ b/client/src/pages/guide.jsx
@@ -1,9 +1,6 @@
 import React from 'react';
 import Head from 'next/head';
 
-// // libraries
-// import { GraphClient } from '../config/ApolloClient';
-
 // // Queries
 // import getLatestIssues from '../graphql/queries/homepage/getLatestIssues';
 // import getLatestSquiggle from '../graphql/queries/homepage/getLatestSquiggle';
diff --git a/client/src/pages/index.jsx b/client/src/pages/index.jsx
index 90e39325..7df7c1b9 100644
--- a/client/src/pages/index.jsx
+++ b/client/src/pages/index.jsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { useRouter } from 'next/router';
 import Head from 'next/head';
 
 // libraries
-import { GraphClient } from '../config/ApolloClient';
+import { getGraphClient } from '../context/ApolloContextProvider';
 
 // Components
 import Marginals from '../components/marginals/Marginals';
@@ -180,9 +180,11 @@ function HomePage({
 
 export async function getStaticProps({ preview }) {
   try {
+    const graphClient = getGraphClient(true);
+
     const {
       data: { getLatestIssues: issues },
-    } = await GraphClient.query({
+    } = await graphClient.query({
       query: getLatestIssues,
       variables: { limit: 4 },
     });
@@ -198,7 +200,7 @@ export async function getStaticProps({ preview }) {
 
     const {
       data: { getLatestSquiggle: squiggles },
-    } = await GraphClient.query({
+    } = await graphClient.query({
       query: getLatestSquiggle,
     });
 
@@ -206,7 +208,7 @@ export async function getStaticProps({ preview }) {
       data: {
         getArticlesByCategories: [witsdom],
       },
-    } = await GraphClient.query({
+    } = await graphClient.query({
       query: getArticlesByCategories,
       variables: { categoryNumbers: 61, limit: 1 },
     });
@@ -215,7 +217,7 @@ export async function getStaticProps({ preview }) {
       data: {
         getArticlesByCategories: [photostory],
       },
-    } = await GraphClient.query({
+    } = await graphClient.query({
       query: getArticlesByCategories,
       variables: { categoryNumbers: 62, limit: 1 },
     });
diff --git a/client/src/pages/onboarding.jsx b/client/src/pages/onboarding.jsx
index 20fc4564..d5de9398 100644
--- a/client/src/pages/onboarding.jsx
+++ b/client/src/pages/onboarding.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import Head from 'next/head';
-import Script from 'next/script';
 
 //Components
 import Onboarding from '../screens/Onboarding';
@@ -66,10 +65,6 @@ const OnBoardingPage = () => {
           content='Monday Morning is the Media Body of National Institute Of Technology Rourkela. Monday Morning covers all the events, issues and activities going on inside the campus. Monday morning also serves as a link between the administration and the students.'
         />
       </Head>
-      <Script
-        src='https://accounts.google.com/gsi/client'
-        strategy='beforeInteractive'
-      ></Script>
       <Onboarding />
     </>
   );
diff --git a/client/src/pages/photostory/[...photostory].jsx b/client/src/pages/photostory/[...photostory].jsx
index c3f0c353..8494a711 100644
--- a/client/src/pages/photostory/[...photostory].jsx
+++ b/client/src/pages/photostory/[...photostory].jsx
@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
 import Head from 'next/head';
 
 // Libraries
-import { GraphClient } from '../../config/ApolloClient';
+import { getGraphClient } from '../../context/ApolloContextProvider';
 import STORES from '../../utils/getStores';
 
 // Components
@@ -177,9 +177,11 @@ export async function getStaticProps({
   preview,
 }) {
   try {
+    const graphClient = getGraphClient(true);
+
     const {
       data: { getArticleByID: photostory },
-    } = await GraphClient.query({
+    } = await graphClient.query({
       query: getArticleByID,
       variables: { id: photostoryId },
     });
diff --git a/client/src/pages/portfolio/[...userId].jsx b/client/src/pages/portfolio/[...userId].jsx
index 79fb10af..f6f2a793 100644
--- a/client/src/pages/portfolio/[...userId].jsx
+++ b/client/src/pages/portfolio/[...userId].jsx
@@ -5,7 +5,7 @@ import Portfolio from '../../screens/Portfolio';
 import Marginals from '../../components/marginals/Marginals';
 
 //Graphql
-import { GraphClient } from '../../config/ApolloClient';
+import { getGraphClient } from '../../context/ApolloContextProvider';
 import getUserByOldUserName from '../../graphql/queries/user/getUserByOldUserName';
 import getUserById from '../../graphql/queries/user/getUserById';
 import getListOfArticles from '../../graphql/queries/article/getListOfArticles';
@@ -181,13 +181,6 @@ const PortfolioPage = ({
 
 export default PortfolioPage;
 
-export async function getStaticPaths() {
-  return {
-    paths: [],
-    fallback: 'blocking',
-  };
-}
-
 export async function getStaticProps({
   params: {
     userId: [portfolioId, userSlug],
@@ -196,13 +189,15 @@ export async function getStaticProps({
   /**** to bring the portfolio URL in correct format - start ****/
 
   try {
+    const graphClient = getGraphClient(true);
+
     if (!userSlug && !portfolioId.match(/^[0-9a-f]{24}$/g)) {
       try {
         const {
           data: {
             getUserByOldUserName: { id, fullName },
           },
-        } = await GraphClient.query({
+        } = await graphClient.query({
           query: getUserByOldUserName,
           variables: {
             oldUserName: portfolioId,
@@ -226,7 +221,7 @@ export async function getStaticProps({
 
     const {
       data: { getUserByID: user },
-    } = await GraphClient.query({
+    } = await graphClient.query({
       query: getUserById,
       variables: {
         getUserById: portfolioId,
@@ -276,7 +271,7 @@ export async function getStaticProps({
     if (articleIdList.length > 0) {
       const {
         data: { getListOfArticles: articleList },
-      } = await GraphClient.query({
+      } = await graphClient.query({
         query: getListOfArticles,
         variables: {
           ids: articleIdList,
@@ -319,3 +314,10 @@ export async function getStaticProps({
     };
   }
 }
+
+export async function getStaticPaths() {
+  return {
+    paths: [],
+    fallback: 'blocking',
+  };
+}
diff --git a/client/src/pages/search.jsx b/client/src/pages/search.jsx
index 4c37e96f..2f52cb4d 100644
--- a/client/src/pages/search.jsx
+++ b/client/src/pages/search.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 
 // Libraries
 import { Container } from '@mui/material';
@@ -6,16 +6,17 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 
 // Components
-import { GraphClient } from '../config/ApolloClient';
 import ActivityIndicator from '../components/shared/ActivityIndicator';
 import SearchPage from '../screens/SearchPage';
 import Marginals from '../components/marginals/Marginals';
 
 // Queries
 import searchArticles from '../graphql/queries/article/searchArticles';
+import { apolloContext } from '../context/ApolloContextProvider';
 
 const Search = () => {
   const router = useRouter();
+  const graphClient = useContext(apolloContext);
   const [articles, setArticles] = useState([]);
   const [loading, setLoading] = useState(false);
 
@@ -24,7 +25,7 @@ const Search = () => {
     (async () => {
       const {
         data: { searchArticles: articleList },
-      } = await GraphClient.query({
+      } = await graphClient.query({
         query: searchArticles,
         variables: {
           keywords: router.query.keyword,
diff --git a/client/src/screens/404.js b/client/src/screens/404.js
index 138afecc..2e3d1ab5 100644
--- a/client/src/screens/404.js
+++ b/client/src/screens/404.js
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 
 import { Grid, Typography } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
-import { ArrowForward } from '@mui/icons-material';
+import ArrowForward from '@mui/icons-material/ArrowForward';
 
 import logo from '../assets/images/logo_mm.png';
 import LINKS from '../utils/getLinks';
diff --git a/client/src/screens/Archive.jsx b/client/src/screens/Archive.jsx
index 675896ad..03c224fe 100644
--- a/client/src/screens/Archive.jsx
+++ b/client/src/screens/Archive.jsx
@@ -1,8 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import { useRouter } from 'next/router';
 
 // libraries
-import { GraphClient } from '../config/ApolloClient';
 import { Container, Typography } from '@mui/material';
 import Button from '@mui/material/Button';
 import makeStyles from '@mui/styles/makeStyles';
@@ -17,9 +16,11 @@ import { ARCHIVES } from '../assets/placeholder/guide';
 
 //gql
 import listArticlesByYearAndMonth from '../graphql/queries/article/listArticleByYearAndMonth';
+import { apolloContext } from '../context/ApolloContextProvider';
 
 function Archive({ archiveArticles, year, month }) {
   const classes = useStyles();
+  const graphClient = useContext(apolloContext);
 
   const { push } = useRouter();
 
@@ -54,7 +55,7 @@ function Archive({ archiveArticles, year, month }) {
       try {
         const {
           data: { listArticlesByYearAndMonth: archiveArticles },
-        } = await GraphClient.query({
+        } = await graphClient.query({
           query: listArticlesByYearAndMonth,
           variables: {
             onlyPublished: true,
diff --git a/client/src/screens/Live.js b/client/src/screens/Live.js
index 69572af9..7353134b 100644
--- a/client/src/screens/Live.js
+++ b/client/src/screens/Live.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 
 // libraries
 import { Typography, Container, useMediaQuery } from '@mui/material';
@@ -19,8 +19,8 @@ import theme from '../config/themes/light';
 // placeholder
 import { LIVE } from '../assets/placeholder/live';
 import getLiveByYearAndSemester from '../graphql/queries/live/getLiveByYearAndSemester';
-import { GraphClient } from '../config/ApolloClient';
 import ActivityIndicator from '../components/shared/ActivityIndicator';
+import { apolloContext } from '../context/ApolloContextProvider';
 
 function Live() {
   const classes = useStyles();
@@ -34,6 +34,8 @@ function Live() {
 
   const [isLoading, setLoading] = useState(true);
 
+  const graphClient = useContext(apolloContext);
+
   const selectSessions = (season) => {
     setSession(season);
   };
@@ -53,10 +55,11 @@ function Live() {
   useEffect(() => {
     setLoading(true);
     const [semester, year] = activeSession.split(' ');
-    GraphClient.query({
-      query: getLiveByYearAndSemester,
-      variables: { year: parseInt(year), semester: semester.toUpperCase() },
-    })
+    graphClient
+      .query({
+        query: getLiveByYearAndSemester,
+        variables: { year: parseInt(year), semester: semester.toUpperCase() },
+      })
       .then((res) => {
         setLiveData(res.data.getLiveByYearAndSemester);
         setLoading(false);
diff --git a/client/src/screens/Onboarding.js b/client/src/screens/Onboarding.js
index 096b6f2e..9f002366 100644
--- a/client/src/screens/Onboarding.js
+++ b/client/src/screens/Onboarding.js
@@ -1,115 +1,179 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+
+import { Alert, Snackbar, useMediaQuery } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
-import { Typography, useMediaQuery } from '@mui/material';
-import theme from '../config/themes/light';
 
+//assets
+import logo from '../assets/images/logo_mm.png';
+// import useToggle from '../hooks/useToggle';
+import Pagination from '../components/onboarding/Pagination';
+import NewsletterSignup from '../components/onboarding/stages/NewsletterSignup';
+import SelectTopics from '../components/onboarding/stages/SelectTopics';
+import VerifyEmail from '../components/onboarding/stages/VerifyEmail';
 // Components
 import Welcome from '../components/onboarding/stages/Welcome';
-import VerifyEmail from '../components/onboarding/stages/VerifyEmail';
-import SelectTopics from '../components/onboarding/stages/SelectTopics';
-import NewsletterSignup from '../components/onboarding/stages/NewsletterSignup';
-
+import ActivityIndicator from '../components/shared/ActivityIndicator';
+import theme from '../config/themes/light';
 // Hooks
 import useInput from '../hooks/useInput';
-import useToggle from '../hooks/useToggle';
-import Pagination from '../components/onboarding/Pagination';
 
 const STAGES = {
-  WELCOME: ['welcome-stage', 0],
-  INTERESTED_TOPICS: ['interested-topics', 1],
-  NEWSLETTER: ['newsletter-signup', 2],
-  VERIFY_EMAIL: ['verify-email', 3],
+  WELCOME: 0,
+  INTERESTED_TOPICS: 1,
+  NEWSLETTER: 2,
+  VERIFY_EMAIL: 3,
 };
 
 function Onboarding() {
   const classes = useStyles();
   const tabletMatches = useMediaQuery(theme.breakpoints.down('md'));
+  const { push, reload } = useRouter();
 
   // Local States
-  const [stage, setStage] = useState(STAGES.WELCOME);
+  const [stage, setStage] = useState(-1);
   const [email, setEmail] = useInput('');
-  const [isEmailVerified, toggleIsEmailVerified] = useToggle(false);
-  const [selectedTopics, setSelectedTopics] = useState([]);
-  const [newsletterEmail, setNewsletterEmail] = useInput('');
+  const [isEmailVerified, toggleIsEmailVerified] = useState(false);
+  const [isLoading, setLoading] = useState(false);
+  const [snackbarData, setSnackbarData] = useState({
+    message: '',
+    severity: 'success',
+  });
 
   // Stage Change functions
-  // eslint-disable-next-line
-  const setStageToWelcome = () => setStage(STAGES.WELCOME);
-  const setStageToVerifyEmail = () => setStage(STAGES.VERIFY_EMAIL);
+  // const setStageToWelcome = () => setStage(STAGES.WELCOME);
   const setStageToInterestedTopics = () => setStage(STAGES.INTERESTED_TOPICS);
   const setStageToNewsletter = () => setStage(STAGES.NEWSLETTER);
+  const setStageToVerifyEmail = () => setStage(STAGES.VERIFY_EMAIL);
 
   // Local Helper Functions
-  const onLogin = () => console.log('Login Function Executed');
-  const verifyEmail = () => console.log('Email Verify Function Executed');
-  const signupNewsletter = () => console.log('Signed up for Newsletter');
-
-  const addSelectedTopic = (newTopic) =>
-    setSelectedTopics((current) => [...current, newTopic]);
-
-  const removeSelectedTopic = (topic) =>
-    setSelectedTopics((selected) => {
-      return selected.filter((selectedTopic) => {
-        if (selectedTopic !== topic) return selectedTopic;
-      });
-    });
+  const onSignIn = () => {
+    setLoading(false);
+    if (window.location.pathname.includes('/onboarding')) {
+      push('/');
+    } else {
+      reload();
+    }
+  };
+  const onSignUp = () => {
+    setLoading(false);
+    setStageToInterestedTopics();
+  };
+  const onSignUpNewsletter = () => {
+    console.log('Signed up for Newsletter');
+    setLoading(false);
+    setStageToVerifyEmail();
+  };
+  const onVerifyEmail = () => {
+    console.log('Email Verify Function Executed');
+    setLoading(false);
+    push('/');
+  };
 
   const renderStages = () => {
-    switch (stage[0]) {
-      case STAGES.WELCOME[0]:
+    switch (stage) {
+      case STAGES.WELCOME:
         return (
           <Welcome
-            onNext={setStageToInterestedTopics}
-            onLogin={onLogin}
+            onSignIn={onSignIn}
+            onSignUp={onSignUp}
             tabletMatches={tabletMatches}
+            setSnackbarData={setSnackbarData}
+            isLoading={isLoading}
+            setLoading={setLoading}
           />
         );
-      case STAGES.INTERESTED_TOPICS[0]:
+      case STAGES.INTERESTED_TOPICS:
         return (
           <SelectTopics
-            selectedTopics={selectedTopics}
-            addSelectedTopic={addSelectedTopic}
-            removeSelectedTopic={removeSelectedTopic}
-            onNext={setStageToNewsletter}
-            onBack={setStageToWelcome}
+            onComplete={setStageToNewsletter}
+            onSkip={setStageToVerifyEmail}
             tabletMatches={tabletMatches}
+            setSnackbarData={setSnackbarData}
           />
         );
-      case STAGES.NEWSLETTER[0]:
+      case STAGES.NEWSLETTER:
         return (
           <NewsletterSignup
-            email={newsletterEmail}
-            setEmail={setNewsletterEmail}
-            signupNewsletter={signupNewsletter}
-            onNext={setStageToVerifyEmail}
-            onBack={setStageToInterestedTopics}
+            onComplete={onSignUpNewsletter}
+            onSkip={setStageToVerifyEmail}
             tabletMatches={tabletMatches}
+            setSnackbarData={setSnackbarData}
           />
         );
-      case STAGES.VERIFY_EMAIL[0]:
+      case STAGES.VERIFY_EMAIL:
         return (
           <VerifyEmail
+            onComplete={onVerifyEmail}
+            onSkip={onSignIn}
+            onBack={setStageToNewsletter}
             email={email}
             setEmail={setEmail}
             isEmailVerified={isEmailVerified}
             toggleIsEmailVerified={toggleIsEmailVerified}
-            verifyEmail={verifyEmail}
-            onBack={setStageToNewsletter}
             tabletMatches={tabletMatches}
+            snackbarData={snackbarData}
+            setSnackbarData={setSnackbarData}
+            isLoading={isLoading}
+            setLoading={setLoading}
           />
         );
       default:
-        return <Typography variant='body1'>Loading....</Typography>;
+        return <ActivityIndicator loading={true} />;
     }
   };
 
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+
+    if (params.has('stage')) {
+      setStage(STAGES[params.get('stage')?.toUpperCase()]);
+    } else {
+      setStage(STAGES.WELCOME);
+    }
+    if (params.has('email')) {
+      setEmail(params.get('email'));
+    }
+    if (params.has('isEmailLink')) {
+      toggleIsEmailVerified(true);
+    }
+  }, []);
+
   return (
     <div className={classes.screen}>
-      <div className={classes.box}>{renderStages()}</div>
+      <div className={classes.box}>
+        {renderStages()}
+        {isLoading && (
+          <div className={classes.loading}>
+            <Image src={logo} alt='MM Logo' width={`100px`} height={`100px`} />
+          </div>
+        )}
+      </div>
       <div className={classes.pagination}>
-        <Pagination active={stage[1]} stages={Object.keys(STAGES)} />
+        <Pagination active={stage} stages={Object.keys(STAGES)} />
       </div>
+
+      <Snackbar
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center',
+        }}
+        ClickAwayListenerProps={{ mouseEvent: false, touchEvent: false }}
+        autoHideDuration={5000}
+        open={snackbarData.message !== ''}
+        onClose={() => setSnackbarData({ message: '', severity: 'success' })}
+        key={`Snack: ${snackbarData.message} ${Date.now()} ${Math.random()}`}
+      >
+        <Alert
+          onClose={() => setSnackbarData({ message: '', severity: 'success' })}
+          severity={snackbarData.severity}
+          variant='filled'
+        >
+          {snackbarData.message}
+        </Alert>
+      </Snackbar>
     </div>
   );
 }
@@ -139,4 +203,10 @@ const useStyles = makeStyles((theme) => ({
       width: '80%',
     },
   },
+  loading: {
+    margin: 'auto',
+    height: 'fit-content',
+    width: 'fit-content',
+    animation: 'rotation 2s linear infinite',
+  },
 }));
diff --git a/client/src/screens/admin/Admin.js b/client/src/screens/admin/Admin.js
index 09859033..a76abb4a 100644
--- a/client/src/screens/admin/Admin.js
+++ b/client/src/screens/admin/Admin.js
@@ -11,7 +11,7 @@ import {
 } from '@mui/material';
 
 // context
-import { SidebarContext } from '../../context/SidebarContext';
+import { SidebarContext } from '../../context/SidebarContextProvider';
 
 // components
 import Header from '../../components/admin/Header';
diff --git a/client/src/screens/admin/Browse.js b/client/src/screens/admin/Browse.js
index 0addf17a..231c7a16 100644
--- a/client/src/screens/admin/Browse.js
+++ b/client/src/screens/admin/Browse.js
@@ -20,15 +20,13 @@ import {
   IconButton,
   Tooltip,
 } from '@mui/material';
-import {
-  Delete,
-  FilterList,
-  Edit,
-  Publish,
-  Archive,
-  Comment,
-  CircleSharp,
-} from '@mui/icons-material';
+import Delete from '@mui/icons-material/Delete';
+import FilterList from '@mui/icons-material/FilterList';
+import Edit from '@mui/icons-material/Edit';
+import Publish from '@mui/icons-material/Publish';
+import Archive from '@mui/icons-material/Archive';
+import Comment from '@mui/icons-material/Comment';
+import CircleSharp from '@mui/icons-material/CircleSharp';
 import { visuallyHidden } from '@mui/utils';
 
 function createData(name, calories, fat, carbs, protein, status) {
diff --git a/client/src/store/actions/index.js b/client/src/store/actions/index.js
deleted file mode 100644
index 1c50bda1..00000000
--- a/client/src/store/actions/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// For demo purposes the types are imported here.
-// For actual project, create different action files with the format
-// action_name.action.js.
-// Import all actions in this folder and export them from here itself.
-import { DEMO } from './types';
diff --git a/client/src/store/actions/types.js b/client/src/store/actions/types.js
deleted file mode 100644
index a1f73a5b..00000000
--- a/client/src/store/actions/types.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// Create all actions types in the form a nested object
-
-export const DEMO = {
-  TYPE1: 'TYPE1',
-};
diff --git a/client/src/store/reducers/index.js b/client/src/store/reducers/index.js
deleted file mode 100644
index 2d1ec238..00000000
--- a/client/src/store/reducers/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default () => {};
diff --git a/client/src/utils/getAccess.js b/client/src/utils/getAccess.js
index 7d7ebecd..112793c0 100644
--- a/client/src/utils/getAccess.js
+++ b/client/src/utils/getAccess.js
@@ -11,7 +11,7 @@ export default async function getAccess(ctx, permissions) {
         mode: 'cors',
         cache: 'no-cache',
         headers: {
-          authorization: cookies.firebaseToken,
+          authorization: cookies?.firebaseToken,
         },
       },
     );
diff --git a/client/src/utils/getAdminRoutes.js b/client/src/utils/getAdminRoutes.js
index 3fc0d4f6..624b7d7a 100644
--- a/client/src/utils/getAdminRoutes.js
+++ b/client/src/utils/getAdminRoutes.js
@@ -1,5 +1,5 @@
 // library
-import { Create } from '@mui/icons-material';
+import Create from '@mui/icons-material/Create';
 
 const admin = {
   id: 'admin',
diff --git a/client/yarn.lock b/client/yarn.lock
index 1bf2e46b..b2aadaf7 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -6809,11 +6809,6 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-rifm@^0.12.1:
-  version "0.12.1"
-  resolved "https://registry.yarnpkg.com/rifm/-/rifm-0.12.1.tgz#8fa77f45b7f1cda2a0068787ac821f0593967ac4"
-  integrity sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==
-
 rimraf@^3.0.0, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"