diff --git a/client/src/assets/placeholder/live.js b/client/src/assets/placeholder/live.js
index 23c83b7a..085c8aa4 100644
--- a/client/src/assets/placeholder/live.js
+++ b/client/src/assets/placeholder/live.js
@@ -7,16 +7,22 @@ import brillio from '../images/live/Brillio.png';
 
 export const LIVE = Object.freeze({
   sessions: [
-    'Autumn 2020-21',
-    'Spring 2020-21',
-    'Autumn 2019-20',
-    'Spring 2019-20',
-    'Autumn 2018-19',
-    'Spring 2018-19',
-    'Autumn 2017-18',
-    'Spring 2017-18',
-    'Autumn 2016-17',
-    'Spring 2016-17',
+    // 'Spring 2023',
+    'Autumn 2022',
+    'Spring 2022',
+    'Autumn 2021',
+    'Spring 2021',
+    'Autumn 2020',
+    'Spring 2020',
+    'Autumn 2019',
+    'Spring 2019',
+    'Autumn 2018',
+    'Spring 2018',
+    'Autumn 2017',
+    'Spring 2017',
+    'Autumn 2016',
+    'Spring 2016',
+    'Autumn 2015',
   ],
   departments: [
     'All Departments',
diff --git a/client/src/components/live/companyBanner.js b/client/src/components/live/companyBanner.js
index 6b156920..c30aec9a 100644
--- a/client/src/components/live/companyBanner.js
+++ b/client/src/components/live/companyBanner.js
@@ -1,35 +1,55 @@
-/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 // libararies
 import { Typography } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import Image from 'next/image';
+import getStores from '../../utils/getStores';
 
 const CompanyBanner = ({ data }) => {
   const classes = useStyles();
   const [show, setShow] = useState(false);
 
+  const [placedData, setPlacedData] = useState([]);
+
+  useEffect(() => {
+    let placed = {};
+    data.studentsRecruited.forEach((student) => {
+      if (!placed[student.degree]) {
+        placed[student.degree] = {};
+      }
+      if (!placed[student.degree][student.branch]) {
+        placed[student.degree][student.branch] = [];
+      }
+      placed[student.degree][student.branch].push(student.name);
+    });
+    setPlacedData(placed);
+  }, []);
+
   return (
     <>
       <div className={classes.active}>
         <div className={classes.companyData}>
           <div>
-            <Image
-              src={data.image}
-              alt={data.name}
-              className={classes.activeImage}
-            />
+            {data.company.logo.storePath && (
+              <Image
+                src={`${getStores[data.company.logo.store]}${
+                  data.company.logo.storePath
+                }`}
+                width={180}
+                height={180}
+                alt={data.company.name}
+                className={classes.activeImage}
+              />
+            )}
             <Typography variant='body1' className={classes.companyTitle}>
-              {data.name}
+              {data.company.name}
             </Typography>
           </div>
           <div>
             <Typography variant='body2' className={classes.companysubTitle}>
               <span style={{ color: '#005299' }}>Students Recruited: </span>
-              {data.students}
+              {data.recruits}
             </Typography>
             <Typography variant='body2' className={classes.companysubTitle}>
               <span style={{ color: '#005299' }}>CTC: </span>
@@ -44,20 +64,23 @@ const CompanyBanner = ({ data }) => {
             </Typography>
           </div>
         </div>
-        {show && (
+        {show && placedData && (
           <div className={classes.student}>
-            {data.placed.map((student) => (
-              <div key={student} className={classes.studentsData}>
+            {Object.keys(placedData).map((degree) => (
+              <div key={degree} className={classes.studentsData}>
                 <Typography variant='body2' className={classes.course}>
-                  {student.course}
+                  {degree}
                 </Typography>
-                {student.branch.map((branches) => (
-                  <div key={{ ...student, ...branches }}>
+                {Object.keys(placedData[degree]).map((branch) => (
+                  <div key={`${degree}--${branch}`}>
                     <Typography variant='body2' className={classes.branch}>
-                      {branches.branchName}
+                      {branch}
                     </Typography>
-                    {branches.students.map((studentName) => (
-                      <Typography variant='body2' key={studentName}>
+                    {placedData[degree][branch].map((studentName) => (
+                      <Typography
+                        variant='body2'
+                        key={`${degree}--${branch}--${studentName}`}
+                      >
                         {studentName}
                       </Typography>
                     ))}
@@ -110,6 +133,7 @@ const useStyles = makeStyles((theme) => ({
     display: 'flex',
     justifyContent: 'flex-start',
     padding: '0px 20px 20px 20px',
+    flexDirection: 'column',
   },
   course: {
     textDecoration: 'underline',
diff --git a/client/src/components/live/courseSelector.js b/client/src/components/live/courseSelector.js
index 8470e2e3..cbe9d605 100644
--- a/client/src/components/live/courseSelector.js
+++ b/client/src/components/live/courseSelector.js
@@ -14,6 +14,17 @@ const CourseSelector = ({ degree, handleChange, setDegree }) => {
   const classes = useStyles();
   const Desktop = useMediaQuery(theme.breakpoints.up('sm'));
 
+  const degrees = [
+    'B.Tech',
+    'M.Tech',
+    'M.Tech (Research)',
+    'Dual Degree M.Tech',
+    'M.Sc',
+    'Integrated M.Sc',
+    'PhD',
+    'School Of Management',
+  ];
+
   return (
     <>
       {Desktop ? (
@@ -23,6 +34,7 @@ const CourseSelector = ({ degree, handleChange, setDegree }) => {
           </Typography>
           <div className={classes.radioWrapper}>
             <div
+              key={'All Degrees'}
               style={{
                 display: 'flex',
                 flexDirection: 'row',
@@ -32,42 +44,98 @@ const CourseSelector = ({ degree, handleChange, setDegree }) => {
               <div className={classes.radioButton}>
                 <input
                   type='radio'
-                  checked={degree === 'B.Tech'}
+                  checked={degree === 'All Degrees'}
                   onChange={handleChange}
-                  value='B.Tech'
+                  value={'All Degrees'}
                   className={classes.radio}
                 />
               </div>
               <Typography variant='body1' className={classes.radioText}>
-                B.Tech
+                {'All Degrees'}
               </Typography>
             </div>
-            <div
-              style={{
-                display: 'flex',
-                flexDirection: 'row',
-                alignItems: 'center',
-              }}
-            >
-              <div className={classes.radioButton}>
-                <input
-                  type='radio'
-                  checked={degree === 'M.Tech'}
-                  onChange={handleChange}
-                  value='M.Tech'
-                  className={classes.radio}
-                />
+            {degrees.map((deg) => (
+              <div
+                key={deg}
+                style={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                }}
+              >
+                <div className={classes.radioButton}>
+                  <input
+                    type='radio'
+                    checked={degree === deg}
+                    onChange={handleChange}
+                    value={deg}
+                    className={classes.radio}
+                    // TODO: remove after implementation
+                    disabled
+                  />
+                </div>
+                <Typography variant='body1' className={classes.radioText}>
+                  {deg}
+                </Typography>
               </div>
-              <Typography variant='body1' className={classes.radioText}>
-                M.Tech
-              </Typography>
-            </div>
+            ))}
+            {/* // <div
+            //   style={{
+            //     display: 'flex',
+            //     flexDirection: 'row',
+            //     alignItems: 'center',
+            //   }}
+            // >
+            //   <div className={classes.radioButton}>
+            //     <input
+            //       type='radio'
+            //       checked={degree === 'B.Tech'}
+            //       onChange={handleChange}
+            //       value='B.Tech'
+            //       className={classes.radio}
+            //     />
+            //   </div>
+            //   <Typography variant='body1' className={classes.radioText}>
+            //     B.Tech
+            //   </Typography>
+            // </div>
+            // <div
+            //   style={{
+            //     display: 'flex',
+            //     flexDirection: 'row',
+            //     alignItems: 'center',
+            //   }}
+            // >
+            //   <div className={classes.radioButton}>
+            //     <input
+            //       type='radio'
+            //       checked={degree === 'M.Tech'}
+            //       onChange={handleChange}
+            //       value='M.Tech'
+            //       className={classes.radio}
+            //     />
+            //   </div>
+            //   <Typography variant='body1' className={classes.radioText}>
+            //     M.Tech
+            //   </Typography>
+            // </div> */}
           </div>
         </>
       ) : (
         <>
           <div className={classes.placementWrapper}>
             <div
+              className={classes.switch}
+              onClick={() => setDegree('All')}
+              style={{
+                backgroundColor: degree === 'B.Tech' ? 'unset' : '#006DCC',
+                color: degree === 'B.Tech' ? 'black' : 'white',
+              }}
+            >
+              <Typography variant='body1'> All </Typography>
+            </div>
+            {/* TODO: implement */}
+            {/* <div
               className={classes.switch}
               onClick={() => setDegree('B.Tech')}
               style={{
@@ -86,7 +154,7 @@ const CourseSelector = ({ degree, handleChange, setDegree }) => {
               }}
             >
               <Typography variant='body1'> M.Tech </Typography>
-            </div>
+            </div> */}
           </div>
         </>
       )}
@@ -118,10 +186,13 @@ const useStyles = makeStyles(() => ({
     width: '8px',
     height: '8px',
     appearance: 'none',
+    // TODO: remove after implementation
+    backgroundColor: 'lightgrey',
     '&:checked': {
       backgroundColor: theme.palette.primary.blue50,
     },
   },
+
   radioText: {
     marginLeft: '4px',
     fontSize: '18px',
diff --git a/client/src/components/live/liveData.js b/client/src/components/live/liveData.js
index 8aaef065..457a7a23 100644
--- a/client/src/components/live/liveData.js
+++ b/client/src/components/live/liveData.js
@@ -1,7 +1,4 @@
-/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Image from 'next/image';
 
 // libararies
@@ -16,47 +13,77 @@ import theme from '../../config/themes/light';
 import CompanyBanner from './companyBanner';
 
 // placeholder
-import { LIVE } from '../../assets/placeholder/live';
+import getStores from '../../utils/getStores';
 
-const LiveData = ({ activeCompany, setCompany, data }) => {
+const LiveData = ({ live }) => {
   const classes = useStyles();
   const Desktop = useMediaQuery(theme.breakpoints.up('sm'));
 
+  const [activeCompanyData, setActiveCompanyData] = useState(live[0]);
+  const [placedData, setPlacedData] = useState({});
+
+  useEffect(() => {
+    let placed = {};
+    if (!activeCompanyData) return;
+    activeCompanyData.studentsRecruited.forEach((student) => {
+      if (!placed[student.degree]) {
+        placed[student.degree] = {};
+      }
+      if (!placed[student.degree][student.branch]) {
+        placed[student.degree][student.branch] = [];
+      }
+      placed[student.degree][student.branch].push(student.name);
+    });
+    setPlacedData(placed);
+  }, [activeCompanyData]);
+
   return (
     <>
       {Desktop ? (
         <>
           <div className={classes.active}>
-            <div className={classes.companyData}>
-              <Image
-                src={data[activeCompany].image}
-                alt={data[activeCompany].name}
-                className={classes.activeImage}
-              />
-              <Typography variant='body1' className={classes.companyTitle}>
-                {LIVE.data[activeCompany].name}
-              </Typography>
-              <Typography variant='body2' className={classes.companysubTitle}>
-                <span style={{ color: '#005299' }}>Students Recruited: </span>
-                {data[activeCompany].students}
-              </Typography>
-              <Typography variant='body2' className={classes.companysubTitle}>
-                <span style={{ color: '#005299' }}>CTC: </span>
-                {data[activeCompany].ctc}
-              </Typography>
-            </div>
-            {data[activeCompany].placed.map((student) => (
-              <div key={student} className={classes.studentsData}>
+            {activeCompanyData && (
+              <div className={classes.companyData}>
+                {activeCompanyData.company.logo.storePath && (
+                  <Image
+                    src={`${getStores[activeCompanyData.company.logo.store]}${
+                      activeCompanyData.company.logo.storePath
+                    }`}
+                    width={180}
+                    height={180}
+                    // layout='fill'
+                    alt={`${activeCompanyData.company.name} Logo`}
+                    className={classes.activeImage}
+                  />
+                )}
+                <Typography variant='body1' className={classes.companyTitle}>
+                  {activeCompanyData.company.name}
+                </Typography>
+                <Typography variant='body2' className={classes.companysubTitle}>
+                  <span style={{ color: '#005299' }}>Students Recruited: </span>
+                  {activeCompanyData.recruits}
+                </Typography>
+                <Typography variant='body2' className={classes.companysubTitle}>
+                  <span style={{ color: '#005299' }}>CTC: </span>
+                  {activeCompanyData.ctc}
+                </Typography>
+              </div>
+            )}
+            {Object.keys(placedData).map((degree) => (
+              <div key={degree} className={classes.studentsData}>
                 <Typography variant='body2' className={classes.course}>
-                  {student.course}
+                  {degree}
                 </Typography>
-                {student.branch.map((branches) => (
-                  <div key={{ ...student, ...branches }}>
+                {Object.keys(placedData[degree]).map((branch) => (
+                  <div key={`${degree}--${branch}`}>
                     <Typography variant='body2' className={classes.branch}>
-                      {branches.branchName}
+                      {branch}
                     </Typography>
-                    {branches.students.map((studentName) => (
-                      <Typography variant='body2' key={studentName}>
+                    {placedData[degree][branch].map((studentName) => (
+                      <Typography
+                        variant='body2'
+                        key={`${degree}--${branch}--${studentName}`}
+                      >
                         {studentName}
                       </Typography>
                     ))}
@@ -64,23 +91,41 @@ const LiveData = ({ activeCompany, setCompany, data }) => {
                 ))}
               </div>
             ))}
+            {!activeCompanyData && !live.length && (
+              <Typography variant='body1' className={classes.companyTitle}>
+                The data for the selected session is not available at the
+                moment.
+              </Typography>
+            )}
           </div>
           <div className={classes.imageContainer}>
-            {data.map((company, key) => (
+            {live.map((item, key) => (
               <div
                 key={key}
                 className={classes.imageWrapper}
                 style={{
-                  backgroundColor: activeCompany === key ? '#D9E9F7' : 'unset',
+                  backgroundColor:
+                    activeCompanyData?.id === item.id ? '#D9E9F7' : 'unset',
                 }}
-                onClick={() => setCompany(key)}
+                onClick={() => setActiveCompanyData(item)}
               >
-                <Image
-                  src={company.image}
-                  alt={company.name}
-                  key={company.name}
-                  className={classes.images}
-                />
+                {item.company.logo.storePath && (
+                  <Image
+                    src={`${getStores[item.company.logo.store]}${
+                      item.company.logo.storePath
+                    }`}
+                    width={180}
+                    height={180}
+                    alt={item.company.name}
+                    key={`${item.company.name}--${key}`}
+                    className={classes.images}
+                  />
+                )}
+                {!item.company.logo.storePath && (
+                  <Typography variant='body1' className={classes.companyTitle}>
+                    {item.company.name}
+                  </Typography>
+                )}
               </div>
             ))}
           </div>
@@ -88,9 +133,9 @@ const LiveData = ({ activeCompany, setCompany, data }) => {
       ) : (
         <>
           <Typography variant='body1' className={classes.companyNumber}>
-            Showing {LIVE.data.length} Companies
+            Showing {live.length} Companies
           </Typography>
-          {data.map((company) => (
+          {live.map((company) => (
             <CompanyBanner key={company} data={company} />
           ))}
         </>
diff --git a/client/src/components/live/nameFilter.js b/client/src/components/live/nameFilter.js
index 26b00eb4..81ba9480 100644
--- a/client/src/components/live/nameFilter.js
+++ b/client/src/components/live/nameFilter.js
@@ -22,6 +22,8 @@ const NameFilter = ({ filterText, handleChange }) => {
             className={classes.filterField}
             value={filterText}
             onChange={handleChange}
+            // TODO: remove after implementation
+            disabled
           />
         </div>
         <div className={!Desktop && classes.buttonWrapper}>
@@ -52,6 +54,8 @@ const useStyles = makeStyles(() => ({
   filterField: {
     width: '300px',
     fontSize: '18px',
+    // TODO: remove after implementation
+    backgroundColor: 'lightgray',
     lineHeight: '24px',
     fontFamily: 'Source Sans Pro',
     fontWeight: theme.typography.fontWeightLight,
diff --git a/client/src/graphql/queries/live/getLiveByYearAndSemester.js b/client/src/graphql/queries/live/getLiveByYearAndSemester.js
new file mode 100644
index 00000000..963df103
--- /dev/null
+++ b/client/src/graphql/queries/live/getLiveByYearAndSemester.js
@@ -0,0 +1,29 @@
+import { gql } from '@apollo/client';
+
+export default gql`
+  query getLiveByYearAndSemester($year: Int!, $semester: SemesterEnum!) {
+    getLiveByYearAndSemester(year: $year, semester: $semester) {
+      id
+      liveType
+      company {
+        id
+        name
+        logo {
+          store
+          storePath
+        }
+        location
+      }
+      recruits
+      year
+      semester
+      studentsRecruited {
+        name
+        branch
+        degree
+      }
+      ctc
+      benefits
+    }
+  }
+`;
diff --git a/client/src/pages/live.jsx b/client/src/pages/live.jsx
index 1d72d951..fa777e62 100644
--- a/client/src/pages/live.jsx
+++ b/client/src/pages/live.jsx
@@ -74,13 +74,17 @@ const LivePage = () => {
   );
 };
 
-export async function getServerSideProps() {
-  return {
-    redirect: {
-      destination: '/comingSoon',
-      permanent: false,
-    },
-  };
-}
+// export async function getServerSideProps() {
+/**
+ * For lan restriction, if ever required
+ * if (req.headers['x-forwarded-for']) {
+ *  ip = req.headers['x-forwarded-for'].split(',')[0];
+ * } else if (req.headers['x-real-ip']) {
+ *  ip = req.connection.remoteAddress;
+ * } else {
+ *  ip = req.connection.remoteAddress;
+ * }
+ */
+// }
 
 export default LivePage;
diff --git a/client/src/screens/Live.js b/client/src/screens/Live.js
index af94b99b..55b12852 100644
--- a/client/src/screens/Live.js
+++ b/client/src/screens/Live.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 // libraries
 import { Typography, Container, useMediaQuery } from '@mui/material';
@@ -18,16 +18,21 @@ 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';
 
 function Live() {
   const classes = useStyles();
   const Desktop = useMediaQuery(theme.breakpoints.up('sm'));
-  const [activeCompany, setCompany] = useState(0);
+  const [liveData, setLiveData] = useState([]);
   const [department, setDepartment] = useState(LIVE.departments[0]);
-  const [degree, setDegree] = useState('B.Tech');
+  const [degree, setDegree] = useState('All Degrees');
   const [filterText, setFilter] = useState('');
   const [activeSession, setSession] = useState(LIVE.sessions[0]);
-  const [placement, setPlacement] = useState(false);
+  const [showPlacement, setShowPlacement] = useState(true);
+
+  const [isLoading, setLoading] = useState(true);
 
   const selectSessions = (season) => {
     setSession(season);
@@ -38,12 +43,29 @@ function Live() {
   };
 
   const selectDegree = (event) => {
-    setDegree(event.target.value);
+    // setDegree(event.target.value);
   };
 
-  const selectDepartment = (branch) => {
-    setDepartment(branch);
-  };
+  // const selectDepartment = (branch) => {
+  //   setDepartment(branch);
+  // };
+
+  useEffect(() => {
+    setLoading(true);
+    const [semester, year] = activeSession.split(' ');
+    GraphClient.query({
+      query: getLiveByYearAndSemester,
+      variables: { year: parseInt(year), semester: semester.toUpperCase() },
+    })
+      .then((res) => {
+        setLiveData(res.data.getLiveByYearAndSemester);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.log(err);
+        setLoading(false);
+      });
+  }, [activeSession]);
 
   return (
     <Container>
@@ -59,7 +81,10 @@ function Live() {
               selectSessions={selectSessions}
               LIVE={LIVE}
             />
-            <TypeSelector placement={placement} setPlacement={setPlacement} />
+            <TypeSelector
+              placement={showPlacement}
+              setPlacement={setShowPlacement}
+            />
             <NameFilter filterText={filterText} handleChange={handleChange} />
           </div>
           <div
@@ -75,18 +100,25 @@ function Live() {
                 setDegree={setDegree}
                 handleChange={selectDegree}
               />
-              <BranchSelector
+              {/* <BranchSelector
                 department={department}
                 selectDepartment={selectDepartment}
                 LIVE={LIVE}
-              />
+              /> */}
             </div>
             <div style={{ width: '70%' }}>
-              <LiveData
-                activeCompany={activeCompany}
-                setCompany={setCompany}
-                data={LIVE.data}
-              />
+              {!isLoading && liveData && (
+                <LiveData
+                  live={liveData.filter((item) => {
+                    if (showPlacement) {
+                      return item.liveType !== 4;
+                    } else {
+                      return item.liveType === 4;
+                    }
+                  })}
+                />
+              )}
+              {isLoading && <ActivityIndicator size={50} />}
             </div>
           </div>{' '}
         </>
@@ -121,19 +153,29 @@ function Live() {
               margin: '0.5rem',
             }}
           >
-            <BranchSelector
+            {/* <BranchSelector
               department={department}
               selectDepartment={selectDepartment}
               LIVE={LIVE}
+            /> */}
+            <TypeSelector
+              placement={showPlacement}
+              setPlacement={setShowPlacement}
             />
-            <TypeSelector placement={placement} setPlacement={setPlacement} />
           </div>
           <NameFilter filterText={filterText} handleChange={handleChange} />
-          <LiveData
-            activeCompany={activeCompany}
-            setCompany={setCompany}
-            data={LIVE.data}
-          />
+          {!isLoading && liveData && (
+            <LiveData
+              live={liveData.filter((item) => {
+                if (showPlacement) {
+                  return item.liveType !== 4;
+                } else {
+                  return item.liveType === 4;
+                }
+              })}
+            />
+          )}
+          {isLoading && <ActivityIndicator size={50} />}
         </>
       )}
     </Container>