diff --git a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
index 7d2490149..c2f3c1b3b 100644
--- a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
+++ b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
@@ -42,9 +42,8 @@ function LiveSessionList(props: Props) {
     text: capitalize(i), value: i
   })).toJS();
   
-  const displayedCount = Math.min(currentPage * PER_PAGE, sessions.size);
-
-  const addPage = () => props.updateCurrentPage(props.currentPage + 1)
+  // const displayedCount = Math.min(currentPage * PER_PAGE, sessions.size);
+  // const addPage = () => props.updateCurrentPage(props.currentPage + 1)
 
   useEffect(() => {
     if (filters.size === 0) {
@@ -108,6 +107,12 @@ function LiveSessionList(props: Props) {
     }, AUTOREFRESH_INTERVAL);
   }
 
+  const sliceListPerPage = (list, page) => {
+    const start = page * PER_PAGE;
+    const end = start + PER_PAGE;
+    return list.slice(start, end);
+  }
+
   return (
     <div>
       <div className="flex mb-6 justify-between items-end">
@@ -138,8 +143,8 @@ function LiveSessionList(props: Props) {
       <div className="w-full flex items-center justify-center py-6">
         <Pagination
           page={currentPage}
-          totalPages={30}
-          onChange={(page) => null}
+          totalPages={Math.ceil(sessions.size / PER_PAGE)}
+          onPageChange={(page) => props.updateCurrentPage(page)}
         />
       </div>
       <NoContent
@@ -154,9 +159,9 @@ function LiveSessionList(props: Props) {
         show={ !loading && sessions && sessions.size === 0}
       >
         <Loader loading={ loading }>
-          {sessions && sessions.sortBy(i => i.metadata[sort.field]).update(list => {
+          {sessions && sliceListPerPage(sessions.sortBy(i => i.metadata[sort.field]).update(list => {
             return sort.order === 'desc' ? list.reverse() : list;
-          }).take(displayedCount).map(session => (
+          }), currentPage - 1).map(session => (
             <SessionItem
               key={ session.sessionId }
               session={ session }
@@ -173,11 +178,11 @@ function LiveSessionList(props: Props) {
             totalCount={sessions.size}
             onClick={addPage}
           /> */}
-          <Pagination
+          {/* <Pagination
             currentPage={1}
             totalCount={30}
             onChange={(page) => null}
-          />
+          /> */}
         </Loader>
       </NoContent>
     </div>
diff --git a/frontend/app/components/ui/Pagination/Pagination.tsx b/frontend/app/components/ui/Pagination/Pagination.tsx
index f61457bc5..11ae24c53 100644
--- a/frontend/app/components/ui/Pagination/Pagination.tsx
+++ b/frontend/app/components/ui/Pagination/Pagination.tsx
@@ -10,25 +10,41 @@ interface Props {
 }
 export default function Pagination(props: Props) {
     const { page, totalPages, onPageChange, limit = 5 } = props;
+    const [currentPage, setCurrentPage] = React.useState(page);
+    // const []
+
+    const changePage = (page: number) => {
+        if (page > 0 && page <= totalPages) {
+            onPageChange(page);
+            setCurrentPage(page);
+        }
+    }
     return (
         <div className="flex items-center">
             <button
-                className={cn("pagination-previous py-2 px-3", { "opacity-50": page === 1 })}
+                className={cn("py-2 px-3", { "opacity-50 cursor-default": page === 1 })}
                 disabled={page === 1}
-                onClick={() => onPageChange(page - 1)}
+                onClick={() => changePage(page - 1)}
             >
-                <Icon name="chevron-left" size="18" />
+                <Icon name="chevron-left" size="18" color={page === 1 ? 'gray-medium' : 'teal'} />
             </button>
             <span className="mr-2 color-gray-medium">Page</span>
-            <input type="number" className="p-1 bg-white border rounded w-16" value={page} />
+            <input
+                type="number"
+                className={cn("py-1 px-2 bg-white border rounded w-16", { "opacity-50 cursor-default": totalPages === 1 })}
+                value={currentPage}
+                min={1}
+                max={totalPages}
+                onChange={(e) => changePage(parseInt(e.target.value))}
+            />
             <span className="mx-3 color-gray-medium">of</span>
             <span >{totalPages}</span>
             <button
-                className="pagination-next py-2 px-3"
+                className={cn("py-2 px-3", { "opacity-50 cursor-default": page === totalPages })}
                 disabled={page === totalPages}
-                onClick={() => onPageChange(page + 1)}
+                onClick={() => changePage(page + 1)}
             >
-                <Icon name="chevron-right" size="18" />
+                <Icon name="chevron-right" size="18" color={page === totalPages ? 'gray-medium' : 'teal'} />
             </button>
         </div>
     )
diff --git a/frontend/app/svg/icons/chevron-double-left.svg b/frontend/app/svg/icons/chevron-double-left.svg
index 7181fd111..8f30320c6 100644
--- a/frontend/app/svg/icons/chevron-double-left.svg
+++ b/frontend/app/svg/icons/chevron-double-left.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 16 16">
   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
 </svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/chevron-left.svg b/frontend/app/svg/icons/chevron-left.svg
index 018f8b673..919d877d2 100644
--- a/frontend/app/svg/icons/chevron-left.svg
+++ b/frontend/app/svg/icons/chevron-left.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-chevron-left" viewBox="0 0 16 16">
   <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
 </svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/chevron-right.svg b/frontend/app/svg/icons/chevron-right.svg
index d621289b3..67cb89d1a 100644
--- a/frontend/app/svg/icons/chevron-right.svg
+++ b/frontend/app/svg/icons/chevron-right.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-chevron-right" viewBox="0 0 16 16">
   <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
 </svg>
\ No newline at end of file