diff --git a/frontend/content/compiled-locales/en.json b/frontend/content/compiled-locales/en.json
index 481bf7ecc..46ad482a1 100644
--- a/frontend/content/compiled-locales/en.json
+++ b/frontend/content/compiled-locales/en.json
@@ -276,7 +276,7 @@
   "ClassNavigation.sessionsTab": [
     {
       "type": 0,
-      "value": "Sessions"
+      "value": "Lessons"
     }
   ],
   "ClassNavigation.studentsTab": [
@@ -1080,19 +1080,19 @@
   "SessionList.columns.actions": [
     {
       "type": 0,
-      "value": "Actions"
+      "value": "Quick Action"
     }
   ],
   "SessionList.columns.finishedAt": [
     {
       "type": 0,
-      "value": "Finished at"
+      "value": "End Date"
     }
   ],
   "SessionList.columns.startedAt": [
     {
       "type": 0,
-      "value": "Started at"
+      "value": "Start Date"
     }
   ],
   "SessionList.columns.tags": [
@@ -1110,7 +1110,7 @@
   "SessionList.copySessionLink": [
     {
       "type": 0,
-      "value": "Copy Session Link"
+      "value": "Share"
     }
   ],
   "SessionList.deleteConfirmation.body": [
@@ -1985,4 +1985,4 @@
       "value": "${path} must be a valid UUID"
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/frontend/content/locales/en.json b/frontend/content/locales/en.json
index bf75781ef..757a93c27 100644
--- a/frontend/content/locales/en.json
+++ b/frontend/content/locales/en.json
@@ -135,7 +135,7 @@
     "message": "Class Details"
   },
   "ClassNavigation.sessionsTab": {
-    "message": "Sessions"
+    "message": "Lessons"
   },
   "ClassNavigation.studentsTab": {
     "message": "Students"
@@ -508,13 +508,13 @@
     "message": "Analysis - {title}"
   },
   "SessionList.columns.actions": {
-    "message": "Actions"
+    "message": "Quick Action"
   },
   "SessionList.columns.finishedAt": {
-    "message": "Finished at"
+    "message": "End Date"
   },
   "SessionList.columns.startedAt": {
-    "message": "Started at"
+    "message": "Start Date"
   },
   "SessionList.columns.tags": {
     "message": "Tags"
@@ -523,7 +523,7 @@
     "message": "Title"
   },
   "SessionList.copySessionLink": {
-    "message": "Copy Session Link"
+    "message": "Share"
   },
   "SessionList.deleteConfirmation.body": {
     "message": "Are you sure you want to delete this session?"
diff --git a/frontend/package.json b/frontend/package.json
index 3697d4f65..762f11d19 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,6 +16,7 @@
     "i18n:compile": "formatjs compile-folder --ast --format crowdin content/locales content/compiled-locales",
     "i18n:fill": "node ./scripts/fill-locales.mjs",
     "i18n:update": "yarn i18n:extract && yarn i18n:fill && yarn i18n:compile",
+    "chakra:update": "npx @chakra-ui/cli typegen ./src/components/ui/Theme.ts",
     "test": "yarn test:jest && yarn test:playwright",
     "test:cov:enable": "shx cp .babelrc.disabled .babelrc",
     "test:cov:disable": "shx rm .babelrc",
diff --git a/frontend/src/api/collimator/hooks/sessions/useAllClassSessions.ts b/frontend/src/api/collimator/hooks/sessions/useAllClassSessions.ts
index 76a9f5bf3..e7e39f664 100644
--- a/frontend/src/api/collimator/hooks/sessions/useAllClassSessions.ts
+++ b/frontend/src/api/collimator/hooks/sessions/useAllClassSessions.ts
@@ -1,11 +1,5 @@
 import useSWR from "swr";
-import { LazyTableResult, LazyTableState } from "@/components/DataTable";
-import {
-  ApiResponse,
-  fromDtos,
-  getSwrParamererizedKey,
-  transformToLazyTableResult,
-} from "../helpers";
+import { ApiResponse, fromDtos, getSwrParamererizedKey } from "../helpers";
 import {
   getSessionsControllerFindAllV0Url,
   sessionsControllerFindAllV0,
@@ -38,21 +32,3 @@ export const useAllClassSessions = (
     () => fetchByClassIdAndTransform(authOptions, classId, params),
   );
 };
-
-export const useAllClassSessionsLazyTable = (
-  classId: number,
-  _state: LazyTableState,
-): ApiResponse<LazyTableResult<GetSessionsReturnType[0]>, Error> => {
-  const authOptions = useAuthenticationOptions();
-
-  return useSWR(
-    getSwrParamererizedKey(
-      (_params?: undefined) => getSessionsControllerFindAllV0Url(classId),
-      undefined,
-    ),
-    () =>
-      fetchByClassIdAndTransform(authOptions, classId).then(
-        transformToLazyTableResult,
-      ),
-  );
-};
diff --git a/frontend/src/components/Breadcrumbs.tsx b/frontend/src/components/Breadcrumbs.tsx
index b747d3d36..85130fc59 100644
--- a/frontend/src/components/Breadcrumbs.tsx
+++ b/frontend/src/components/Breadcrumbs.tsx
@@ -1,6 +1,6 @@
 import { Breadcrumb, HStack, Icon } from "@chakra-ui/react";
 import { FormattedMessage } from "react-intl";
-import { Children, Fragment, isValidElement } from "react";
+import React from "react";
 import { LuHouse } from "react-icons/lu";
 import BreadcrumbItem from "./BreadcrumbItem";
 
@@ -16,21 +16,7 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => (
           <Icon as={LuHouse} />
           <FormattedMessage id="Breadcrumbs.home" defaultMessage="Home" />
         </BreadcrumbItem>
-
-        {Children.map(children, (child, index) => {
-          if (!isValidElement(child)) {
-            return null;
-          }
-
-          const childKey = child.key ?? `breadcrumb-${index}`;
-
-          return (
-            <Fragment key={childKey}>
-              <Breadcrumb.Separator />
-              {child}
-            </Fragment>
-          );
-        })}
+        {children}
       </HStack>
     </Breadcrumb.List>
   </Breadcrumb.Root>
diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx
index 7ae8e7472..1ef17a6a3 100644
--- a/frontend/src/components/Button.tsx
+++ b/frontend/src/components/Button.tsx
@@ -13,21 +13,11 @@ import {
   useCallback,
   useState,
   useRef,
-  useMemo,
   MouseEvent as MouseEventReact,
-  DetailedHTMLProps,
-  ButtonHTMLAttributes,
+  ComponentProps,
 } from "react";
-import { isNonNull } from "@/utilities/is-non-null";
-import { ButtonVariant } from "@/components/ui/recipes/buttons/Button.recipe";
 
-export type ButtonProps = Omit<
-  DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
-  "variant"
-> & {
-  variant?: ButtonVariant;
-  active?: boolean;
-};
+export type ButtonProps = ComponentProps<typeof ChakraButton>;
 
 const ButtonContent = chakra(HStack, {
   base: {
@@ -38,8 +28,6 @@ const ButtonContent = chakra(HStack, {
 const Button = ({
   onClick: onClickFn,
   children,
-  variant,
-  active,
   ...buttonProps
 }: ButtonProps) => {
   const [isLoading, setIsLoading] = useState(false);
@@ -84,22 +72,8 @@ const Button = ({
     [onClickFn, showPromiseResult],
   );
 
-  const className = useMemo(
-    () =>
-      [active ? "active" : null, buttonProps.className ?? null]
-        .filter(isNonNull)
-        .join(" "),
-    [buttonProps.className, active],
-  );
-
   return (
-    <ChakraButton
-      onClick={onClick}
-      loading={isLoading}
-      className={className}
-      variant={variant}
-      {...buttonProps}
-    >
+    <ChakraButton onClick={onClick} loading={isLoading} {...buttonProps}>
       <ButtonContent>
         <Box>{children}</Box>
         {isLoading && <Spinner data-testid="loading-spinner" size="sm" />}
@@ -118,5 +92,4 @@ const Button = ({
   );
 };
 
-export { ButtonVariant };
 export default Button;
diff --git a/frontend/src/components/ChakraDataTable.tsx b/frontend/src/components/ChakraDataTable.tsx
index 9bdfc954d..92860ea89 100644
--- a/frontend/src/components/ChakraDataTable.tsx
+++ b/frontend/src/components/ChakraDataTable.tsx
@@ -81,19 +81,15 @@ interface ChakraDataTableProps<T> {
   data: T[];
   columns: ColumnDef<T>[];
   isLoading?: boolean;
-  onRowClick?: (row: T) => void;
+  onRowClick?: (
+    row: T,
+    e: React.MouseEvent<HTMLTableRowElement, MouseEvent>,
+  ) => void;
   features?: DataTableFeatures;
   variant?: "outline" | "line";
   includeSearchBar?: boolean;
 }
 
-const TableWrapper = chakra("div", {
-  base: {
-    marginBottom: "lg",
-    marginTop: "4xl",
-  },
-});
-
 const InputWrapper = chakra("div", {
   base: {
     marginBottom: "lg",
@@ -101,42 +97,6 @@ const InputWrapper = chakra("div", {
   },
 });
 
-const ColumnHeader = chakra(Table.ColumnHeader, {
-  base: {
-    fontWeight: "semiBold",
-    color: "fgTertiary",
-    _hover: {
-      cursor: "pointer",
-    },
-    "&:last-child": {
-      width: "auto",
-      textAlign: "right",
-    },
-  },
-});
-
-const TableRow = chakra(Table.Row, {
-  base: {
-    _hover: {
-      cursor: "pointer",
-    },
-  },
-});
-
-const TableHeader = chakra(Table.Header, {
-  base: {
-    backgroundColor: "gray.200",
-  },
-});
-
-const TableRoot = chakra(Table.Root, {
-  base: {
-    width: "100%",
-    tableLayout: "fixed",
-    fontSize: "lg",
-  },
-});
-
 const HeaderContent = chakra("div", {
   base: {
     display: "flex",
@@ -157,25 +117,7 @@ const TableContainer = chakra("div", {
   base: {
     display: "flex",
     flexDirection: "column",
-    gap: "md",
-  },
-});
-
-const TableCell = chakra(Table.Cell, {
-  base: {
-    borderBottomWidth: "thin !important",
-    borderBottomStyle: "solid",
-    borderBottomColor: "gray.600",
-
-    "&:first-child": {
-      fontWeight: "semiBold",
-    },
-
-    "&:last-child": {
-      width: "auto",
-      textAlign: "right",
-      whiteSpace: "nowrap",
-    },
+    gap: "sm",
   },
 });
 
@@ -507,92 +449,94 @@ export const ChakraDataTable = <T extends { id: number }>({
   };
 
   return (
-    <TableWrapper>
-      <TableContainer>
-        {features?.columnFiltering && includeSearchBar && (
-          <FilterContainer>
-            <InputWrapper>
-              <Input
-                value={getFilterValueAsString(
-                  table.getColumn(filterColumn)?.getFilterValue(),
-                )}
-                onChange={(e) =>
-                  table.getColumn(filterColumn)?.setFilterValue(e.target.value)
-                }
-                placeholder={intl.formatMessage(messages.filterByPlaceholder)}
-                variety={InputVariety.Search}
-              />
-            </InputWrapper>
-
-            {features.columnFiltering.columns.length > 1 && (
-              <DropdownMenu trigger={currentColumnLabel}>
-                {features.columnFiltering.columns.map((col) => (
-                  <DropdownMenu.Item
-                    key={col.accessorKey}
-                    onClick={() => setFilterColumn(col.accessorKey)}
-                  >
-                    {col.label}
-                  </DropdownMenu.Item>
-                ))}
-              </DropdownMenu>
-            )}
-          </FilterContainer>
-        )}
-
-        <TableRoot interactive={!!onRowClick} variant={variant}>
-          <TableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header) => (
-                  <ColumnHeader
-                    key={header.id}
-                    onClick={
-                      features?.sorting && header.column.getCanSort()
-                        ? header.column.getToggleSortingHandler()
-                        : undefined
-                    }
-                  >
-                    <HeaderContent>
-                      <div>
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                              header.column.columnDef.header,
-                              header.getContext(),
-                            )}
-                      </div>
-                      {features?.sorting && header.column.getCanSort() && (
-                        <SortIcon isSorted={header.column.getIsSorted()} />
-                      )}
-                    </HeaderContent>
-                  </ColumnHeader>
-                ))}
-              </TableRow>
-            ))}
-          </TableHeader>
-
-          <Table.Body>
-            {table.getRowModel().rows.map((row) => (
-              <TableRow key={row.id} onClick={() => onRowClick?.(row.original)}>
-                {row.getVisibleCells().map((cell) => (
-                  <TableCell key={cell.id}>{cellWrapper({ cell })}</TableCell>
-                ))}
-              </TableRow>
-            ))}
-          </Table.Body>
-        </TableRoot>
-
-        {features?.pagination && table.getPageCount() > 1 && (
-          <DataTablePagination
-            pageIndex={table.getState().pagination.pageIndex}
-            pageCount={table.getPageCount()}
-            canPreviousPage={table.getCanPreviousPage()}
-            canNextPage={table.getCanNextPage()}
-            onPageChange={(pageIndex) => table.setPageIndex(pageIndex)}
-          />
-        )}
-      </TableContainer>
-    </TableWrapper>
+    <TableContainer>
+      {features?.columnFiltering && includeSearchBar && (
+        <FilterContainer>
+          <InputWrapper>
+            <Input
+              value={getFilterValueAsString(
+                table.getColumn(filterColumn)?.getFilterValue(),
+              )}
+              onChange={(e) =>
+                table.getColumn(filterColumn)?.setFilterValue(e.target.value)
+              }
+              placeholder={intl.formatMessage(messages.filterByPlaceholder)}
+              variety={InputVariety.Search}
+            />
+          </InputWrapper>
+
+          {features.columnFiltering.columns.length > 1 && (
+            <DropdownMenu trigger={currentColumnLabel}>
+              {features.columnFiltering.columns.map((col) => (
+                <DropdownMenu.Item
+                  key={col.accessorKey}
+                  onClick={() => setFilterColumn(col.accessorKey)}
+                >
+                  {col.label}
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu>
+          )}
+        </FilterContainer>
+      )}
+
+      <Table.Root interactive={!!onRowClick} variant={variant}>
+        <Table.Header>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <Table.Row key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <Table.ColumnHeader
+                  key={header.id}
+                  onClick={
+                    features?.sorting && header.column.getCanSort()
+                      ? header.column.getToggleSortingHandler()
+                      : undefined
+                  }
+                  width={`${header.getSize()}px`}
+                >
+                  <HeaderContent>
+                    <div>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )}
+                    </div>
+                    {features?.sorting && header.column.getCanSort() && (
+                      <SortIcon isSorted={header.column.getIsSorted()} />
+                    )}
+                  </HeaderContent>
+                </Table.ColumnHeader>
+              ))}
+            </Table.Row>
+          ))}
+        </Table.Header>
+
+        <Table.Body>
+          {table.getRowModel().rows.map((row) => (
+            <Table.Row
+              key={row.id}
+              onClick={(e) => onRowClick?.(row.original, e)}
+            >
+              {row.getVisibleCells().map((cell) => (
+                <Table.Cell key={cell.id}>{cellWrapper({ cell })}</Table.Cell>
+              ))}
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table.Root>
+
+      {features?.pagination && table.getPageCount() > 1 && (
+        <DataTablePagination
+          pageIndex={table.getState().pagination.pageIndex}
+          pageCount={table.getPageCount()}
+          canPreviousPage={table.getCanPreviousPage()}
+          canNextPage={table.getCanNextPage()}
+          onPageChange={(pageIndex) => table.setPageIndex(pageIndex)}
+        />
+      )}
+    </TableContainer>
   );
 };
 
diff --git a/frontend/src/components/CrtNavigation.tsx b/frontend/src/components/CrtNavigation.tsx
index d5778656c..990f6ee5b 100644
--- a/frontend/src/components/CrtNavigation.tsx
+++ b/frontend/src/components/CrtNavigation.tsx
@@ -5,7 +5,10 @@ import {
   LuListTodo,
   LuUsers,
   LuBook,
+  LuBookMarked,
 } from "react-icons/lu";
+import { Breadcrumb } from "@chakra-ui/react";
+import { Fragment } from "react";
 import { ExistingClass } from "@/api/collimator/models/classes/existing-class";
 import { ExistingUser } from "@/api/collimator/models/users/existing-user";
 import { ExistingClassExtended } from "@/api/collimator/models/classes/existing-class-extended";
@@ -87,35 +90,48 @@ const CrtNavigation = ({
       {breadcrumb && (
         <>
           {user && (
-            <BreadcrumbItem href={`/user/${user.id}`} icon={<LuUsers />}>
-              {user.name ?? user.email}
-            </BreadcrumbItem>
+            <>
+              <Breadcrumb.Separator />
+              <BreadcrumbItem href={`/user/${user.id}`} icon={<LuUsers />}>
+                {user.name ?? user.email}
+              </BreadcrumbItem>
+            </>
           )}
           {klass && (
-            <BreadcrumbItem
-              href={`/class/${klass.id}/detail`}
-              icon={<LuGraduationCap />}
-            >
-              {klass.name}
-            </BreadcrumbItem>
+            <>
+              <Breadcrumb.Separator />
+              <BreadcrumbItem
+                href={`/class/${klass.id}/detail`}
+                icon={<LuBookMarked />}
+              >
+                {klass.name}
+              </BreadcrumbItem>
+            </>
           )}
           {task && (
-            <BreadcrumbItem
-              href={`/task/${task.id}/detail`}
-              icon={<LuListTodo />}
-            >
-              {task.title}
-            </BreadcrumbItem>
+            <>
+              <Breadcrumb.Separator />
+              <BreadcrumbItem
+                href={`/task/${task.id}/detail`}
+                icon={<LuListTodo />}
+              >
+                {task.title}
+              </BreadcrumbItem>
+            </>
           )}
           {lessonId && (
-            <BreadcrumbItem href={`/lesson/${lessonId}`} icon={<LuBook />}>
-              {lessonName}
-            </BreadcrumbItem>
+            <>
+              <Breadcrumb.Separator />
+              <BreadcrumbItem href={`/lesson/${lessonId}`} icon={<LuBook />}>
+                {lessonName}
+              </BreadcrumbItem>
+            </>
           )}
           {breadcrumbItems?.map((item, index) => (
-            <BreadcrumbItem key={index} {...item}>
-              {item.children}
-            </BreadcrumbItem>
+            <Fragment key={index}>
+              <Breadcrumb.Separator />
+              <BreadcrumbItem {...item}>{item.children}</BreadcrumbItem>
+            </Fragment>
           ))}
         </>
       )}
diff --git a/frontend/src/components/Pagination.tsx b/frontend/src/components/Pagination.tsx
index 4e620e0df..880ff11fc 100644
--- a/frontend/src/components/Pagination.tsx
+++ b/frontend/src/components/Pagination.tsx
@@ -1,4 +1,4 @@
-import { ButtonGroup, IconButton, Pagination, chakra } from "@chakra-ui/react";
+import { ButtonGroup, Pagination, chakra, IconButton } from "@chakra-ui/react";
 import { LuChevronLeft, LuChevronRight } from "react-icons/lu";
 import { useIntl, defineMessages } from "react-intl";
 
@@ -19,48 +19,6 @@ const PaginationWrapper = chakra("div", {
   },
 });
 
-const PageButton = chakra(IconButton, {
-  base: {
-    borderRadius: "sm",
-    _hover: {
-      backgroundColor: "gray.300",
-    },
-  },
-  variants: {
-    state: {
-      inactive: {
-        backgroundColor: "gray.200",
-        color: "black",
-        _hover: {
-          backgroundColor: "black",
-          color: "white",
-        },
-      },
-      active: {
-        backgroundColor: "black",
-        color: "white",
-        _hover: {
-          backgroundColor: "gray.600",
-        },
-      },
-    },
-  },
-  defaultVariants: {
-    state: "inactive",
-  },
-});
-
-const NavigationButton = chakra(IconButton, {
-  base: {
-    backgroundColor: "transparent",
-    color: "gray.600",
-    _hover: {
-      color: "black",
-      backgroundColor: "transparent",
-    },
-  },
-});
-
 const messages = defineMessages({
   paginationPrevious: {
     id: "datatable.pagination.previous",
@@ -94,32 +52,31 @@ export const DataTablePagination = ({
       >
         <ButtonGroup>
           <Pagination.PrevTrigger asChild>
-            <NavigationButton
+            <IconButton
               aria-label={intl.formatMessage(messages.paginationPrevious)}
               disabled={!canPreviousPage}
+              variant="ghost"
             >
               <LuChevronLeft />
-            </NavigationButton>
+            </IconButton>
           </Pagination.PrevTrigger>
 
           <Pagination.Items
-            render={(page) => {
-              const isCurrentPage = page.value === currentPage;
-              return (
-                <PageButton state={isCurrentPage ? "active" : "inactive"}>
-                  {page.value}
-                </PageButton>
-              );
-            }}
+            render={(page) => (
+              <IconButton variant={{ base: "outline", _selected: "solid" }}>
+                {page.value}
+              </IconButton>
+            )}
           />
 
           <Pagination.NextTrigger asChild>
-            <NavigationButton
+            <IconButton
               aria-label={intl.formatMessage(messages.paginationNext)}
               disabled={!canNextPage}
+              variant="ghost"
             >
               <LuChevronRight />
-            </NavigationButton>
+            </IconButton>
           </Pagination.NextTrigger>
         </ButtonGroup>
       </Pagination.Root>
diff --git a/frontend/src/components/TabNavigation.tsx b/frontend/src/components/TabNavigation.tsx
index 163efc62b..e53929744 100644
--- a/frontend/src/components/TabNavigation.tsx
+++ b/frontend/src/components/TabNavigation.tsx
@@ -1,8 +1,8 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { Tabs } from "@chakra-ui/react";
+import { Breadcrumb, Icon, Tabs } from "@chakra-ui/react";
 import { IntlShape, useIntl } from "react-intl";
-import { ReactNode, useContext } from "react";
+import { Fragment, ReactNode, useContext } from "react";
 import styled from "@emotion/styled";
 import {
   AuthenticationContext,
@@ -70,15 +70,14 @@ const TabNavigation = <T extends unknown = undefined>({
   const activeItems = navigationTabs.filter((tab) => tab.isActive);
 
   if (breadcrumb) {
-    return (
-      <>
-        {activeItems.map((item) => (
-          <BreadcrumbItem key={item.url} href={item.url} icon={item.icon}>
-            {item.title(intl, tabTitleArguments as T)}
-          </BreadcrumbItem>
-        ))}
-      </>
-    );
+    return activeItems.map((item) => (
+      <Fragment key={item.url}>
+        <Breadcrumb.Separator />
+        <BreadcrumbItem href={item.url} icon={item.icon}>
+          {item.title(intl, tabTitleArguments as T)}
+        </BreadcrumbItem>
+      </Fragment>
+    ));
   }
 
   const activeValue = activeItems[0]?.url || "";
@@ -94,6 +93,7 @@ const TabNavigation = <T extends unknown = undefined>({
         {navigationTabs.map((tab) => (
           <Tabs.Trigger key={tab.url} value={tab.url} asChild>
             <Link href={tab.url} data-testid={tab.testId}>
+              {tab.icon && <Icon>{tab.icon}</Icon>}
               {tab.title(intl, tabTitleArguments as T)}
             </Link>
           </Tabs.Trigger>
diff --git a/frontend/src/components/class/ClassForm.tsx b/frontend/src/components/class/ClassForm.tsx
index 93c83e1cf..998cc78d7 100644
--- a/frontend/src/components/class/ClassForm.tsx
+++ b/frontend/src/components/class/ClassForm.tsx
@@ -11,7 +11,7 @@ import {
 import { useYupSchema } from "@/hooks/useYupSchema";
 import { useYupResolver } from "@/hooks/useYupResolver";
 import { useAllUsers } from "@/api/collimator/hooks/users/useAllUsers";
-import Input, { InputVariant } from "../form/Input";
+import Input from "../form/Input";
 import SwrContent from "../SwrContent";
 import FormContainer from "../form/FormContainer";
 import FormGrid from "../form/FormGrid";
@@ -107,7 +107,7 @@ const ClassForm = ({
                 label={messages.name}
                 {...register("name")}
                 data-testid="name"
-                variant={InputVariant.inputForm}
+                variant="inputForm"
                 invalid={!!errors.name}
                 errorText={errors.name?.message}
               />
diff --git a/frontend/src/components/class/ClassList.tsx b/frontend/src/components/class/ClassList.tsx
index fe867d12c..8e753fdd9 100644
--- a/frontend/src/components/class/ClassList.tsx
+++ b/frontend/src/components/class/ClassList.tsx
@@ -2,18 +2,20 @@ import { defineMessages, useIntl } from "react-intl";
 import { useRouter } from "next/router";
 import { ColumnDef } from "@tanstack/react-table";
 import { MdAdd } from "react-icons/md";
-import { Icon, HStack, chakra } from "@chakra-ui/react";
+import { Icon, HStack, chakra, Text } from "@chakra-ui/react";
 import { LuChevronRight } from "react-icons/lu";
 import { useAllClasses } from "@/api/collimator/hooks/classes/useAllClasses";
 import { ExistingClassWithTeacher } from "@/api/collimator/models/classes/existing-class-with-teacher";
 import { ColumnType } from "@/types/tanstack-types";
+import { isClickOnRow } from "@/utilities/table";
 import SwrContent from "../SwrContent";
 import { ChakraDataTable } from "../ChakraDataTable";
-import Button, { ButtonVariant } from "../Button";
+import Button from "../Button";
 
 const ClassListWrapper = chakra("div", {
   base: {
-    marginTop: "2xl",
+    marginTop: "md",
+    marginBottom: "md",
   },
 });
 
@@ -59,9 +61,14 @@ const ClassList = () => {
       accessorKey: "name",
       header: intl.formatMessage(messages.nameColumn),
       cell: (info) => (
-        <span data-testid={`class-${info.row.original.id}-name`}>
+        <Text
+          fontWeight="semibold"
+          fontSize="lg"
+          data-testid={`class-${info.row.original.id}-name`}
+          margin={0}
+        >
           {info.row.original.name}
-        </span>
+        </Text>
       ),
       meta: {
         columnType: ColumnType.text,
@@ -91,7 +98,7 @@ const ClassList = () => {
             router.push(`/class/${info.row.original.id}/detail`);
           }}
           data-testid={`class-${info.row.original.id}-details-button`}
-          variant={ButtonVariant.detail}
+          variant="detail"
         >
           <Icon>
             <LuChevronRight />
@@ -112,8 +119,10 @@ const ClassList = () => {
             data={data}
             columns={columns}
             isLoading={isLoading}
-            onRowClick={(row) => {
-              router.push(`/class/${row.id}/detail`);
+            onRowClick={(row, e) => {
+              if (isClickOnRow(e)) {
+                router.push(`/class/${row.id}/detail`);
+              }
             }}
             features={{
               sorting: true,
@@ -133,7 +142,7 @@ const ClassList = () => {
         )}
       </SwrContent>
       <Button
-        variant={ButtonVariant.primary}
+        variant="primary"
         onClick={() => router.push("class/create")}
         data-testid="class-create-button"
       >
diff --git a/frontend/src/components/class/ClassNavigation.tsx b/frontend/src/components/class/ClassNavigation.tsx
index 288bf687a..938710480 100644
--- a/frontend/src/components/class/ClassNavigation.tsx
+++ b/frontend/src/components/class/ClassNavigation.tsx
@@ -1,4 +1,5 @@
 import { defineMessages } from "react-intl";
+import { LuSettings2, LuSignpost, LuUsers } from "react-icons/lu";
 import { ExistingSession } from "@/api/collimator/models/sessions/existing-session";
 import { ExistingSessionExtended } from "@/api/collimator/models/sessions/existing-session-extended";
 import TabNavigation, { NavigationTab } from "../TabNavigation";
@@ -13,9 +14,9 @@ const messages = defineMessages({
     id: "ClassNavigation.studentsTab",
     defaultMessage: "Students",
   },
-  sesstionsTab: {
+  sessionsTab: {
     id: "ClassNavigation.sessionsTab",
-    defaultMessage: "Sessions",
+    defaultMessage: "Lessons",
   },
 });
 
@@ -23,18 +24,21 @@ const tabs: NavigationTab[] = [
   {
     url: "detail",
     title: (intl) => intl.formatMessage(messages.classTab),
+    icon: <LuSettings2 />,
     testId: "class-details-tab",
   },
+  {
+    url: "session",
+    title: (intl) => intl.formatMessage(messages.sessionsTab),
+    icon: <LuSignpost />,
+    testId: "class-sessions-tab",
+  },
   {
     url: "students",
     title: (intl) => intl.formatMessage(messages.studentsTab),
+    icon: <LuUsers />,
     testId: "class-students-tab",
   },
-  {
-    url: "session",
-    title: (intl) => intl.formatMessage(messages.sesstionsTab),
-    testId: "class-sessions-tab",
-  },
 ];
 
 const ClassNavigation = ({
diff --git a/frontend/src/components/dashboard/Analyzer.tsx b/frontend/src/components/dashboard/Analyzer.tsx
index c276e61f0..1cf2e1f3c 100644
--- a/frontend/src/components/dashboard/Analyzer.tsx
+++ b/frontend/src/components/dashboard/Analyzer.tsx
@@ -9,7 +9,7 @@ import { CurrentAnalysis } from "@/api/collimator/models/solutions/current-analy
 import MultiSwrContent from "../MultiSwrContent";
 import Select from "../form/Select";
 import Input from "../form/Input";
-import Button, { ButtonVariant } from "../Button";
+import Button from "../Button";
 import { StudentAnonymizationToggle } from "../student/StudentAnonymizationToggle";
 import { MetaCriterionType } from "./criteria/meta-criterion-type";
 import AnalyzerFilterForm from "./filter/AnalyzerFilterForm";
@@ -351,7 +351,7 @@ const Analyzer = ({ session }: { session: ExistingSessionExtended }) => {
                 });
               }
             }}
-            variant={ButtonVariant.primary}
+            variant="primary"
             data-testid="cancel-button"
           >
             {intl.formatMessage(messages.selectSolutionForComparisonLeft)}
@@ -371,7 +371,7 @@ const Analyzer = ({ session }: { session: ExistingSessionExtended }) => {
                 });
               }
             }}
-            variant={ButtonVariant.primary}
+            variant="primary"
             data-testid="cancel-button"
           >
             {intl.formatMessage(messages.selectSolutionForComparisonRight)}
diff --git a/frontend/src/components/dashboard/CodeComparison.tsx b/frontend/src/components/dashboard/CodeComparison.tsx
index c4df34661..31df540c1 100644
--- a/frontend/src/components/dashboard/CodeComparison.tsx
+++ b/frontend/src/components/dashboard/CodeComparison.tsx
@@ -494,7 +494,6 @@ const CodeComparison = ({
                 selectedRightSolutionId !== defaultSolutionIdValue ? (
                   <ButtonGroup>
                     <Button
-                      active={modalSide === "left"}
                       onClick={() => {
                         setModalSide("left");
                       }}
@@ -502,7 +501,6 @@ const CodeComparison = ({
                       {leftStudentName}
                     </Button>
                     <Button
-                      active={modalSide === "right"}
                       onClick={() => {
                         setModalSide("right");
                       }}
diff --git a/frontend/src/components/form/Input.tsx b/frontend/src/components/form/Input.tsx
index a702f1848..552849114 100644
--- a/frontend/src/components/form/Input.tsx
+++ b/frontend/src/components/form/Input.tsx
@@ -8,7 +8,6 @@ import {
   chakra,
   InputGroup,
 } from "@chakra-ui/react";
-import { InputVariant } from "../ui/recipes/form/Input.recipe";
 
 const InputWrapper = chakra("div", {
   base: {
@@ -26,7 +25,7 @@ interface Props {
   errorText?: React.ReactNode;
   invalid?: boolean;
   variety?: InputVariety;
-  variant?: InputVariant;
+  variant?: ChakraInputProps["variant"];
 }
 
 // Omit the native size, children attribute to avoid confusion with Chakra UI's size prop
@@ -75,5 +74,4 @@ const Input = forwardRef(function Input(
   );
 });
 
-export { InputVariant };
 export default Input;
diff --git a/frontend/src/components/form/SubmitFormButton.tsx b/frontend/src/components/form/SubmitFormButton.tsx
index 94730e1d4..f0ffabd20 100644
--- a/frontend/src/components/form/SubmitFormButton.tsx
+++ b/frontend/src/components/form/SubmitFormButton.tsx
@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { MessageDescriptor, useIntl } from "react-intl";
-import Input, { InputVariant } from "./Input";
+import Input from "./Input";
 
 const InputWrapper = styled.label`
   display: block;
@@ -31,7 +31,7 @@ const SubmitFormButton = (
         type="submit"
         value={intl.formatMessage(label)}
         disabled={disabled}
-        variant={InputVariant.buttonForm}
+        variant="buttonForm"
       />
       {children}
     </InputWrapper>
diff --git a/frontend/src/components/lesson/LessonList.tsx b/frontend/src/components/lesson/LessonList.tsx
index e94aabc23..0358e4065 100644
--- a/frontend/src/components/lesson/LessonList.tsx
+++ b/frontend/src/components/lesson/LessonList.tsx
@@ -17,7 +17,7 @@ import Tags from "@/components/Tags";
 import Tag from "@/components/Tag";
 import DataTable, { LazyTableState } from "@/components/DataTable";
 import { TableMessages } from "@/i18n/table-messages";
-import Button, { ButtonVariant } from "../Button";
+import Button from "../Button";
 import DropdownMenu from "../DropdownMenu";
 import { ButtonGroup } from "../ButtonGroup";
 
@@ -138,7 +138,7 @@ const LessonList = ({
       <div>
         <ButtonGroup attached>
           <Button
-            variant={ButtonVariant.primary}
+            variant="primary"
             onClick={(e) => {
               e.stopPropagation();
               router.push(`/lesson/${rowData.id}/edit`);
@@ -234,7 +234,7 @@ const LessonList = ({
             <DropdownMenu
               trigger={
                 <Button
-                  variant={ButtonVariant.secondary}
+                  variant="secondary"
                   onClick={() => router.push("lesson/create")}
                 >
                   <FontAwesomeIcon icon={faAdd} />
diff --git a/frontend/src/components/modals/ConfirmationModal.tsx b/frontend/src/components/modals/ConfirmationModal.tsx
index 320e80147..babfe104b 100644
--- a/frontend/src/components/modals/ConfirmationModal.tsx
+++ b/frontend/src/components/modals/ConfirmationModal.tsx
@@ -1,7 +1,7 @@
 import { Modal } from "react-bootstrap";
 import { MessageDescriptor, useIntl } from "react-intl";
 import { ModalMessages } from "@/i18n/modal-messages";
-import Button, { ButtonVariant } from "../Button";
+import Button from "../Button";
 
 const ConfirmationModal = ({
   isShown,
@@ -37,7 +37,7 @@ const ConfirmationModal = ({
       <Modal.Footer>
         <Button
           onClick={() => setIsShown(false)}
-          variant={ButtonVariant.secondary}
+          variant="secondary"
           data-testid="cancel-button"
         >
           {intl.formatMessage(ModalMessages.cancel)}
@@ -50,7 +50,7 @@ const ConfirmationModal = ({
 
             setIsShown(false);
           }}
-          variant={isDangerous ? ButtonVariant.danger : ButtonVariant.primary}
+          variant={isDangerous ? "danger" : "primary"}
           data-testid="confirm-button"
         >
           {intl.formatMessage(messages.confirmButton)}
diff --git a/frontend/src/components/modals/TaskModal.tsx b/frontend/src/components/modals/TaskModal.tsx
index 483b55260..2f7fb3410 100644
--- a/frontend/src/components/modals/TaskModal.tsx
+++ b/frontend/src/components/modals/TaskModal.tsx
@@ -6,7 +6,7 @@ import { Language, Submission } from "iframe-rpc-react/src";
 import { downloadBlob } from "@/utilities/download";
 import { readSingleFileFromDisk } from "@/utilities/file-from-disk";
 import ConfirmationModal from "@/components/modals/ConfirmationModal";
-import Button, { ButtonVariant } from "../Button";
+import Button from "../Button";
 import EmbeddedApp, { EmbeddedAppRef } from "../EmbeddedApp";
 import MaxScreenHeightInModal from "../layout/MaxScreenHeightInModal";
 
@@ -158,7 +158,7 @@ const TaskModal = ({
               <Button
                 disabled={!appLoaded}
                 onClick={loadAppData}
-                variant={ButtonVariant.secondary}
+                variant="secondary"
                 data-testid="reset-button"
               >
                 <FormattedMessage id="TaskModal.reset" defaultMessage="Reset" />
@@ -168,7 +168,7 @@ const TaskModal = ({
               <Button
                 disabled={!appLoaded}
                 onClick={onImportTask}
-                variant={ButtonVariant.secondary}
+                variant="secondary"
                 data-testid="import-button"
               >
                 <FormattedMessage
@@ -181,7 +181,7 @@ const TaskModal = ({
               <Button
                 disabled={!appLoaded}
                 onClick={onExportTask}
-                variant={ButtonVariant.secondary}
+                variant="secondary"
                 data-testid="export-button"
               >
                 <FormattedMessage
@@ -193,7 +193,7 @@ const TaskModal = ({
             <Button
               onClick={warnBeforeClose}
               disabled={isSaving}
-              variant={ButtonVariant.danger}
+              variant="danger"
               data-testid="cancel-button"
             >
               <FormattedMessage id="TaskModal.cancel" defaultMessage="Cancel" />
@@ -212,7 +212,7 @@ const TaskModal = ({
                     }
                   }
                 }}
-                variant={ButtonVariant.primary}
+                variant="primary"
                 data-testid="save-button"
               >
                 <FormattedMessage id="TaskModal.save" defaultMessage="Save" />
diff --git a/frontend/src/components/session/SessionList.tsx b/frontend/src/components/session/SessionList.tsx
index 3149e1d39..dc401ed55 100644
--- a/frontend/src/components/session/SessionList.tsx
+++ b/frontend/src/components/session/SessionList.tsx
@@ -1,139 +1,86 @@
-import {
-  DataTablePageEvent,
-  DataTableSortEvent,
-  DataTableFilterEvent,
-} from "primereact/datatable";
-import { Column } from "primereact/column";
-import { useCallback, useContext, useState } from "react";
+import { useCallback, useContext } from "react";
 import { defineMessages, useIntl } from "react-intl";
-import styled from "@emotion/styled";
 import { useRouter } from "next/router";
-import { Icon, IconButton } from "@chakra-ui/react";
-import { LuChevronDown } from "react-icons/lu";
+import { chakra, HStack, Icon, Text } from "@chakra-ui/react";
+import { LuChevronRight, LuSend } from "react-icons/lu";
+import { ColumnDef } from "@tanstack/react-table";
 import { MdAdd } from "react-icons/md";
-import { FaEdit } from "react-icons/fa";
-import { TableMessages } from "@/i18n/table-messages";
-import Tags from "@/components/Tags";
-import Tag from "@/components/Tag";
-import DataTable, { LazyTableState } from "@/components/DataTable";
-import { useAllClassSessionsLazyTable } from "@/api/collimator/hooks/sessions/useAllClassSessions";
+import { useAllClassSessions } from "@/api/collimator/hooks/sessions/useAllClassSessions";
 import { ExistingSession } from "@/api/collimator/models/sessions/existing-session";
-import { useDeleteClassSession } from "@/api/collimator/hooks/sessions/useDeleteClassSession";
 import { AuthenticationContext } from "@/contexts/AuthenticationContext";
 import { useClass } from "@/api/collimator/hooks/classes/useClass";
 import { isClickOnRow } from "@/utilities/table";
-import ConfirmationModal from "../modals/ConfirmationModal";
+import { ColumnType } from "@/types/tanstack-types";
 import MultiSwrContent from "../MultiSwrContent";
-import Button, { ButtonVariant } from "../Button";
-import DropdownMenu from "../DropdownMenu";
-import { ButtonGroup } from "../ButtonGroup";
+import Button from "../Button";
+import ChakraDataTable from "../ChakraDataTable";
 
-const SessionListWrapper = styled.div`
-  margin: 1rem 0;
-
-  tr {
-    cursor: pointer;
-  }
-`;
+const SessionListWrapper = chakra("div", {
+  base: {
+    marginTop: "md",
+    marginBottom: "md",
+  },
+});
 
 const messages = defineMessages({
+  idColumn: {
+    id: "SessionList.columns.id",
+    defaultMessage: "ID",
+  },
   titleColumn: {
     id: "SessionList.columns.title",
     defaultMessage: "Title",
   },
-  tagsColumn: {
-    id: "SessionList.columns.tags",
-    defaultMessage: "Tags",
-  },
   startedAtColumn: {
     id: "SessionList.columns.startedAt",
-    defaultMessage: "Started at",
+    defaultMessage: "Start Date",
   },
   finishedAtColumn: {
     id: "SessionList.columns.finishedAt",
-    defaultMessage: "Finished at",
+    defaultMessage: "End Date",
   },
-  actionsColumn: {
-    id: "SessionList.columns.actions",
-    defaultMessage: "Actions",
+  sharingTypeColumn: {
+    id: "SessionList.columns.sharingType",
+    defaultMessage: "Sharing Type",
   },
-  deleteConfirmationTitle: {
-    id: "SessionList.deleteConfirmation.title",
-    defaultMessage: "Delete Session",
+  sharingTypeColumnAnonymous: {
+    id: "SessionList.columns.sharingTypeAnonymous",
+    defaultMessage: "Anonymous",
   },
-  deleteConfirmationBody: {
-    id: "SessionList.deleteConfirmation.body",
-    defaultMessage: "Are you sure you want to delete this session?",
+  sharingTypeColumnPrivate: {
+    id: "SessionList.columns.sharingTypePrivate",
+    defaultMessage: "Private",
   },
-  deleteConfirmationConfirm: {
-    id: "SessionList.deleteConfirmation.confirm",
-    defaultMessage: "Delete Session",
+  actionsColumn: {
+    id: "SessionList.columns.actions",
+    defaultMessage: "Quick Action",
+  },
+  createSession: {
+    id: "SessionList.columns.createSession",
+    defaultMessage: "Create Session",
   },
   copySessionLink: {
     id: "SessionList.copySessionLink",
-    defaultMessage: "Copy Session Link",
+    defaultMessage: "Share",
+  },
+  canOnlyShareOwnSessions: {
+    id: "SessionList.canOnlyShareOwnSessions",
+    defaultMessage: "You can only share lessons belonging to your classes.",
   },
 });
 
-const sessionTitleTemplate = (rowData: ExistingSession) => (
-  <span data-testid={`session-${rowData.id}-title`}>{rowData.title}</span>
-);
-
 const SessionList = ({ classId }: { classId: number }) => {
   const router = useRouter();
   const intl = useIntl();
   const authenticationContext = useContext(AuthenticationContext);
 
-  const [lazyState, setLazyState] = useState<LazyTableState>({
-    first: 0,
-    rows: 10,
-    page: 1,
-    sortField: undefined,
-    sortOrder: undefined,
-    filters: {
-      name: {
-        value: "",
-        matchMode: "contains",
-      },
-    },
-  });
-
   const {
     data: klass,
     error: klassError,
     isLoading: isLoadingKlass,
   } = useClass(classId);
 
-  const { data, isLoading, error } = useAllClassSessionsLazyTable(
-    classId,
-    lazyState,
-  );
-
-  const onPage = (event: DataTablePageEvent) => {
-    setLazyState((state) => ({ ...state, ...event }));
-  };
-
-  const onSort = (event: DataTableSortEvent) => {
-    setLazyState((state) => ({ ...state, ...event }));
-  };
-
-  const onFilter = (event: DataTableFilterEvent) => {
-    setLazyState((state) => ({ ...state, ...event }));
-  };
-
-  const tagsTemplate = useCallback(
-    (_rowData: ExistingSession) => (
-      // TODO: Use tags once they're available
-      <Tags>
-        {[].map((tag, index) => (
-          <Tag key={index} id={tag}>
-            {tag}
-          </Tag>
-        ))}
-      </Tags>
-    ),
-    [],
-  );
+  const { data, isLoading, error } = useAllClassSessions(classId);
 
   const startedAtTemplate = useCallback(
     (rowData: ExistingSession) =>
@@ -147,83 +94,134 @@ const SessionList = ({ classId }: { classId: number }) => {
     [intl],
   );
 
-  const finishedAtTemplate = useCallback(
-    (rowData: ExistingSession) =>
-      // TODO: Change to finishedAt once it's available
-      rowData.createdAt && (
-        <time>
-          {intl.formatDate(rowData.createdAt)}{" "}
-          {intl.formatTime(rowData.createdAt)}
-        </time>
-      ),
-    [intl],
-  );
+  const actionsTemplate = useCallback(
+    (rowData: ExistingSession) => {
+      if (!klass) {
+        return null;
+      }
 
-  const [showDeleteConfirmationModal, setShowDeleteConfirmationModal] =
-    useState(false);
-  const [sessionIdToDelete, setSessionIdToDelete] = useState<number | null>(
-    null,
-  );
-  const deleteSession = useDeleteClassSession();
+      const canGetSessionLink =
+        "userId" in authenticationContext &&
+        klass.teacher.id === authenticationContext.userId;
 
-  const actionsTemplate = useCallback(
-    (rowData: ExistingSession) => (
-      <div>
-        <ButtonGroup>
-          <Button
-            variant={ButtonVariant.primary}
-            onClick={(e) => {
-              e.stopPropagation();
-              router.push(`/class/${classId}/session/${rowData.id}/edit`);
-            }}
-            data-testid={`session-${rowData.id}-edit-button`}
-          >
-            <Icon>
-              <FaEdit />
-            </Icon>
-          </Button>
-          <DropdownMenu
-            testId={`session-${rowData.id}-actions-dropdown-button`}
-            trigger={
-              <IconButton aria-label="More actions">
-                <LuChevronDown />
-              </IconButton>
-            }
-          >
-            <DropdownMenu.Item
-              onClick={(e) => {
-                e.stopPropagation();
-                setSessionIdToDelete(rowData.id);
-                setShowDeleteConfirmationModal(true);
-              }}
-              testId={`session-${rowData.id}-delete-button`}
-            >
-              {intl.formatMessage(TableMessages.delete)}
-            </DropdownMenu.Item>
-            {klass &&
-              "userId" in authenticationContext &&
-              klass.teacher.id === authenticationContext.userId && (
-                <DropdownMenu.Item
-                  onClick={async () => {
-                    const fingerprint =
-                      await authenticationContext.keyPair.getPublicKeyFingerprint();
+      return canGetSessionLink ? (
+        <Button
+          onClick={async () => {
+            const fingerprint =
+              await authenticationContext.keyPair.getPublicKeyFingerprint();
+
+            navigator.clipboard.writeText(
+              `${window.location.origin}/class/${klass.id}/session/${rowData.id}/join?key=${fingerprint}`,
+            );
+          }}
+          data-test-id={`session-${rowData.id}-copy-session-link-button`}
+        >
+          <Icon>
+            <LuSend />
+          </Icon>{" "}
+          {intl.formatMessage(messages.copySessionLink)}
+        </Button>
+      ) : (
+        <Button
+          disabled
+          title={intl.formatMessage(messages.canOnlyShareOwnSessions)}
+        >
+          <Icon>
+            <LuSend />
+          </Icon>{" "}
+          {intl.formatMessage(messages.copySessionLink)}
+        </Button>
+      );
+    },
+    [intl, authenticationContext, klass],
+  );
 
-                    navigator.clipboard.writeText(
-                      `${window.location.origin}/class/${classId}/session/${rowData.id}/join?key=${fingerprint}`,
-                    );
-                  }}
-                  testId={`session-${rowData.id}-copy-session-link-button`}
-                >
-                  {intl.formatMessage(messages.copySessionLink)}
-                </DropdownMenu.Item>
-              )}
-          </DropdownMenu>
-        </ButtonGroup>
-      </div>
-    ),
-    [classId, intl, router, authenticationContext, klass],
+  const sharingTypeTemplate = useCallback(
+    (rowData: ExistingSession) =>
+      rowData.isAnonymous
+        ? intl.formatMessage(messages.sharingTypeColumnAnonymous)
+        : intl.formatMessage(messages.sharingTypeColumnPrivate),
+    [intl],
   );
 
+  const columns: ColumnDef<ExistingSession>[] = [
+    {
+      accessorKey: "id",
+      header: intl.formatMessage(messages.idColumn),
+      enableSorting: false,
+      size: 32,
+    },
+    {
+      accessorKey: "title",
+      header: intl.formatMessage(messages.titleColumn),
+      cell: (info) => (
+        <Text
+          fontWeight="semibold"
+          fontSize="lg"
+          data-testid={`session-${info.row.original.id}-title`}
+          margin={0}
+        >
+          {info.row.original.title}
+        </Text>
+      ),
+      meta: {
+        columnType: ColumnType.text,
+      },
+    },
+    {
+      accessorKey: "startedAt",
+      header: intl.formatMessage(messages.startedAtColumn),
+      enableSorting: false,
+      cell: (info) => startedAtTemplate(info.row.original),
+      meta: {
+        columnType: ColumnType.text,
+      },
+    },
+    {
+      accessorKey: "isAnonymous",
+      header: intl.formatMessage(messages.sharingTypeColumn),
+      enableSorting: false,
+      cell: (info) => sharingTypeTemplate(info.row.original),
+      meta: {
+        columnType: ColumnType.text,
+      },
+    },
+    {
+      id: "actions",
+      header: intl.formatMessage(messages.actionsColumn),
+      enableSorting: false,
+      cell: (info) => actionsTemplate(info.row.original),
+      meta: {
+        columnType: ColumnType.icon,
+      },
+    },
+    {
+      id: "details",
+      header: "",
+      enableSorting: false,
+      cell: (info) => (
+        <Button
+          aria-label={intl.formatMessage(messages.actionsColumn)}
+          onClick={(e) => {
+            e.stopPropagation();
+            router.push(
+              `/class/${classId}/session/${info.row.original.id}/progress`,
+            );
+          }}
+          data-testid={`session-${info.row.original.id}-details-button`}
+          variant="detail"
+        >
+          <Icon>
+            <LuChevronRight />
+          </Icon>
+        </Button>
+      ),
+      meta: {
+        columnType: ColumnType.icon,
+      },
+    },
+  ];
+
   return (
     <SessionListWrapper data-testid="session-list">
       <MultiSwrContent
@@ -232,103 +230,46 @@ const SessionList = ({ classId }: { classId: number }) => {
         errors={[error, klassError]}
       >
         {([data]) => (
-          <DataTable
-            value={data.items}
-            lazy
-            filterDisplay="row"
-            dataKey="id"
-            paginator
-            first={lazyState.first}
-            rows={10}
-            totalRecords={data.totalCount}
-            onPage={onPage}
-            onSort={onSort}
-            sortField={lazyState.sortField}
-            sortOrder={lazyState.sortOrder}
-            onFilter={onFilter}
-            filters={lazyState.filters}
-            loading={isLoading}
-            onRowClick={(e) => {
-              if (isClickOnRow(e))
-                router.push(
-                  `/class/${classId}/session/${(e.data as ExistingSession).id}/progress`,
-                );
-            }}
-          >
-            <Column
-              field="title"
-              header={intl.formatMessage(messages.titleColumn)}
-              sortable
-              filter
-              filterPlaceholder={intl.formatMessage(
-                TableMessages.searchFilterPlaceholder,
-              )}
-              filterMatchMode="contains"
-              showFilterMenu={false}
-              body={sessionTitleTemplate}
-            />
-            <Column
-              header={intl.formatMessage(messages.tagsColumn)}
-              filter
-              filterPlaceholder={intl.formatMessage(
-                TableMessages.searchFilterPlaceholder,
-              )}
-              filterMatchMode="contains"
-              showFilterMenu={false}
-              body={tagsTemplate}
-            />
-            <Column
-              field="startedAt"
-              header={intl.formatMessage(messages.startedAtColumn)}
-              sortable
-              body={startedAtTemplate}
-            />
-            <Column
-              field="finishedAt"
-              header={intl.formatMessage(messages.finishedAtColumn)}
-              sortable
-              body={finishedAtTemplate}
-            />
-            <Column
-              header={intl.formatMessage(messages.actionsColumn)}
-              body={actionsTemplate}
-              filter
-              filterElement={
-                <DropdownMenu
-                  trigger={
-                    <Button
-                      variant={ButtonVariant.secondary}
-                      onClick={() =>
-                        router.push(`/class/${classId}/session/create`)
-                      }
-                      data-testid="session-create-button"
-                    >
-                      <Icon>
-                        <MdAdd />
-                      </Icon>
-                    </Button>
-                  }
-                />
+          <ChakraDataTable
+            data={data}
+            columns={columns}
+            isLoading={isLoading}
+            includeSearchBar={false}
+            onRowClick={(row, e) => {
+              if (isClickOnRow(e)) {
+                router.push(`/class/${classId}/session/${row.id}/progress`);
               }
-            />
-          </DataTable>
+            }}
+            features={{
+              sorting: true,
+              columnFiltering: {
+                columns: [
+                  {
+                    accessorKey: "title",
+                    label: intl.formatMessage(messages.titleColumn),
+                  },
+                ],
+              },
+              pagination: {
+                pageSize: 4,
+              },
+            }}
+          />
         )}
       </MultiSwrContent>
-      <ConfirmationModal
-        isShown={showDeleteConfirmationModal}
-        setIsShown={setShowDeleteConfirmationModal}
-        onConfirm={
-          sessionIdToDelete
-            ? () => deleteSession(classId, sessionIdToDelete)
-            : undefined
-        }
-        isDangerous
-        messages={{
-          title: messages.deleteConfirmationTitle,
-          body: messages.deleteConfirmationBody,
-          confirmButton: messages.deleteConfirmationConfirm,
-        }}
-      />
+      <Button
+        variant="primary"
+        onClick={() => router.push(`/class/${classId}/session/create`)}
+        data-testid="class-create-button"
+        marginTop="md"
+      >
+        <HStack>
+          <Icon>
+            <MdAdd />
+          </Icon>
+          {intl.formatMessage(messages.createSession)}
+        </HStack>
+      </Button>
     </SessionListWrapper>
   );
 };
diff --git a/frontend/src/components/task/TaskTable.tsx b/frontend/src/components/task/TaskTable.tsx
index ce5363985..5d42bf054 100644
--- a/frontend/src/components/task/TaskTable.tsx
+++ b/frontend/src/components/task/TaskTable.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import { ColumnDef } from "@tanstack/react-table";
 import { MdAdd } from "react-icons/md";
 import { FaRegTrashAlt } from "react-icons/fa";
-import { Icon, HStack } from "@chakra-ui/react";
+import { Icon, HStack, Text } from "@chakra-ui/react";
 import { LuChevronRight } from "react-icons/lu";
 import { ColumnType } from "@/types/tanstack-types";
 import { useAllTasks } from "@/api/collimator/hooks/tasks/useAllTasks";
@@ -15,7 +15,7 @@ import { capitalizeString } from "@/utilities/strings";
 import SwrContent from "../SwrContent";
 import ConfirmationModal from "../modals/ConfirmationModal";
 import { ChakraDataTable } from "../ChakraDataTable";
-import Button, { ButtonVariant } from "../Button";
+import Button from "../Button";
 
 const TaskTableWrapper = styled.div`
   margin: 1rem 0;
@@ -89,9 +89,14 @@ const TaskTable = () => {
       accessorKey: "title",
       header: intl.formatMessage(messages.titleColumn),
       cell: (info) => (
-        <span data-testid={`task-${info.row.original.id}-title`}>
+        <Text
+          fontWeight="semibold"
+          fontSize="lg"
+          data-testid={`task-${info.row.original.id}-title`}
+          margin={0}
+        >
           {info.row.original.title}
-        </span>
+        </Text>
       ),
       meta: {
         columnType: ColumnType.text,
@@ -124,7 +129,7 @@ const TaskTable = () => {
               setShowDeleteConfirmationModal(true);
             }}
             data-testid={`task-${info.row.original.id}-delete-button`}
-            variant={ButtonVariant.detail}
+            variant="detail"
           >
             <FaRegTrashAlt />
           </Button>
@@ -147,7 +152,7 @@ const TaskTable = () => {
               router.push(`/task/${info.row.original.id}/detail`);
             }}
             data-testid={`task-${info.row.original.id}-details-button`}
-            variant={ButtonVariant.detail}
+            variant="detail"
           >
             <Icon>
               <LuChevronRight />
@@ -201,7 +206,7 @@ const TaskTable = () => {
         }}
       />
       <Button
-        variant={ButtonVariant.primary}
+        variant="primary"
         onClick={() => router.push("task/create")}
         data-testid="task-create-button"
       >
diff --git a/frontend/src/components/ui/Theme.ts b/frontend/src/components/ui/Theme.ts
index 9d110ecb1..8c2c28edf 100644
--- a/frontend/src/components/ui/Theme.ts
+++ b/frontend/src/components/ui/Theme.ts
@@ -16,6 +16,7 @@ import { SelectRecipe } from "./recipes/Select.recipe";
 import { ContainerRecipe } from "./recipes/Container.recipe";
 import { CardRecipe } from "./recipes/Card.recipe";
 import { HStackRecipe } from "./recipes/HStack.recipe";
+import TableRootRecipe from "./recipes/table/TableRoot.recipe";
 
 const config = defineConfig({
   theme: {
@@ -25,6 +26,7 @@ const config = defineConfig({
       select: SelectRecipe,
       field: FieldRecipe,
       card: CardRecipe,
+      table: TableRootRecipe,
     },
     recipes: {
       button: ButtonRecipe,
diff --git a/frontend/src/components/ui/chakra.d.ts b/frontend/src/components/ui/chakra.d.ts
deleted file mode 100644
index 623320332..000000000
--- a/frontend/src/components/ui/chakra.d.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { ButtonVariant } from "@/components/ui/recipes/buttons/Button.recipe";
-import { InputVariant } from "@/components/ui/recipes/form/Input.recipe";
-import { CardVariant } from "@/components/ui/recipes/Card.recipe";
-
-declare module "@chakra-ui/react" {
-  // Chakra's type system does not recognize custom variant types defined via recipes and theming system.
-  // We need to override the component props to include our custom variants.
-  interface ButtonProps {
-    variant?: ButtonVariant;
-  }
-
-  interface InputProps {
-    variant?: InputVariant;
-  }
-
-  interface CardRootProps {
-    variant?: CardVariant;
-  }
-}
diff --git a/frontend/src/components/ui/recipes/Card.recipe.ts b/frontend/src/components/ui/recipes/Card.recipe.ts
index b7dbb21cc..5c7cec713 100644
--- a/frontend/src/components/ui/recipes/Card.recipe.ts
+++ b/frontend/src/components/ui/recipes/Card.recipe.ts
@@ -55,16 +55,4 @@ export const CardRecipe = defineSlotRecipe({
   },
 });
 
-export const CardVariant = {
-  full: "full",
-  large: "large",
-  medium: "medium",
-  small: "small",
-  compact: "compact",
-} as const;
-
-export type CardVariant = keyof NonNullable<
-  (typeof CardRecipe)["variants"]
->["variant"];
-
 export default CardRecipe;
diff --git a/frontend/src/components/ui/recipes/PageHeading.recipe.ts b/frontend/src/components/ui/recipes/PageHeading.recipe.ts
index 9b8dafdcb..728b6f36c 100644
--- a/frontend/src/components/ui/recipes/PageHeading.recipe.ts
+++ b/frontend/src/components/ui/recipes/PageHeading.recipe.ts
@@ -4,10 +4,10 @@ export const PageHeadingRecipe = defineRecipe({
   variants: {
     variant: {
       title: {
-        marginTop: "4xl",
-        fontSize: "4xl",
-        fontWeight: "semiBold",
-        color: "fg",
+        // We need to use !important until bootstrap is removed
+        marginTop: "lg !important",
+        marginBottom: "lg !important",
+        fontSize: "3xl",
       },
       description: {
         marginTop: "md",
diff --git a/frontend/src/components/ui/recipes/buttons/Button.recipe.ts b/frontend/src/components/ui/recipes/buttons/Button.recipe.ts
index 550b67ebf..14adb60cd 100644
--- a/frontend/src/components/ui/recipes/buttons/Button.recipe.ts
+++ b/frontend/src/components/ui/recipes/buttons/Button.recipe.ts
@@ -27,6 +27,8 @@ export const ButtonRecipe = defineRecipe({
       detail: {
         backgroundColor: "transparent",
         color: "fgSecondary",
+        width: "full",
+        justifyContent: "flex-end",
         _hover: {
           color: "accentHighlight",
           opacity: 0.8,
@@ -39,15 +41,4 @@ export const ButtonRecipe = defineRecipe({
   },
 });
 
-export const ButtonVariant = {
-  primary: "primary",
-  secondary: "secondary",
-  danger: "danger",
-  detail: "detail",
-} as const;
-
-export type ButtonVariant = keyof NonNullable<
-  (typeof ButtonRecipe)["variants"]
->["variant"];
-
 export default ButtonRecipe;
diff --git a/frontend/src/components/ui/recipes/form/Input.recipe.ts b/frontend/src/components/ui/recipes/form/Input.recipe.ts
index dfdbdef8f..bb842e5b5 100644
--- a/frontend/src/components/ui/recipes/form/Input.recipe.ts
+++ b/frontend/src/components/ui/recipes/form/Input.recipe.ts
@@ -48,13 +48,3 @@ export const FieldRecipe = defineSlotRecipe({
     },
   },
 });
-
-export const InputVariant = {
-  primary: "primary",
-  inputForm: "inputForm",
-  buttonForm: "buttonForm",
-} as const;
-
-export type InputVariant = keyof NonNullable<
-  (typeof InputRecipe)["variants"]
->["variant"];
diff --git a/frontend/src/components/ui/recipes/table/TableRoot.recipe.ts b/frontend/src/components/ui/recipes/table/TableRoot.recipe.ts
new file mode 100644
index 000000000..25557a198
--- /dev/null
+++ b/frontend/src/components/ui/recipes/table/TableRoot.recipe.ts
@@ -0,0 +1,31 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { tableAnatomy } from "@chakra-ui/react/anatomy";
+
+export const TableRootRecipe = defineSlotRecipe({
+  slots: tableAnatomy.keys(),
+  base: {
+    root: { tableLayout: "fixed" },
+    header: {
+      backgroundColor: "gray.200",
+    },
+    columnHeader: {
+      fontWeight: "semibold",
+    },
+    cell: {
+      borderBottomWidth: "thin !important",
+    },
+  },
+  variants: {
+    interactive: {
+      true: {
+        row: {
+          _hover: {
+            cursor: "pointer",
+          },
+        },
+      },
+    },
+  },
+});
+
+export default TableRootRecipe;
diff --git a/frontend/src/components/user/UserList.tsx b/frontend/src/components/user/UserList.tsx
index 879d75ef5..2893ea86b 100644
--- a/frontend/src/components/user/UserList.tsx
+++ b/frontend/src/components/user/UserList.tsx
@@ -17,7 +17,7 @@ import { useGenerateRegistrationToken } from "@/api/collimator/hooks/users/useGe
 import { isClickOnRow } from "@/utilities/table";
 import ConfirmationModal from "../modals/ConfirmationModal";
 import SwrContent from "../SwrContent";
-import Button, { ButtonVariant } from "../Button";
+import Button from "../Button";
 import DropdownMenu from "../DropdownMenu";
 import { ButtonGroup } from "../ButtonGroup";
 
@@ -87,7 +87,7 @@ const UserList = () => {
     (rowData: ExistingUser) => (
       <ButtonGroup>
         <Button
-          variant={ButtonVariant.primary}
+          variant="primary"
           onClick={(e) => {
             e.stopPropagation();
             router.push(`/user/${rowData.id}/edit`);
@@ -150,7 +150,7 @@ const UserList = () => {
             totalRecords={data.totalCount}
             loading={isLoading}
             onRowClick={(e) => {
-              if (isClickOnRow(e)) {
+              if (isClickOnRow(e.originalEvent)) {
                 router.push(`/user/${(e.data as ExistingUser).id}/detail`);
               }
             }}
@@ -186,7 +186,7 @@ const UserList = () => {
                 <DropdownMenu
                   trigger={
                     <Button
-                      variant={ButtonVariant.secondary}
+                      variant="secondary"
                       onClick={(e) => {
                         e.stopPropagation();
                         router.push("user/create");
diff --git a/frontend/src/pages/class/[classId]/session/index.tsx b/frontend/src/pages/class/[classId]/session/index.tsx
index 123074298..6ea4c11ec 100644
--- a/frontend/src/pages/class/[classId]/session/index.tsx
+++ b/frontend/src/pages/class/[classId]/session/index.tsx
@@ -1,14 +1,14 @@
 import { useRouter } from "next/router";
-import { Container } from "react-bootstrap";
 import { defineMessages } from "react-intl";
+import { Container } from "@chakra-ui/react";
 import Breadcrumbs from "@/components/Breadcrumbs";
 import ClassNavigation from "@/components/class/ClassNavigation";
 import Header from "@/components/Header";
-import PageHeader from "@/components/PageHeader";
 import SessionList from "@/components/session/SessionList";
 import CrtNavigation from "@/components/CrtNavigation";
 import { useClass } from "@/api/collimator/hooks/classes/useClass";
 import SwrContent from "@/components/SwrContent";
+import PageHeading, { PageHeadingVariant } from "@/components/PageHeading";
 
 const messages = defineMessages({
   title: {
@@ -37,11 +37,13 @@ const ClassSessionList = () => {
         <Breadcrumbs>
           <CrtNavigation breadcrumb klass={klass} />
         </Breadcrumbs>
-        <ClassNavigation classId={klass?.id} />
         <SwrContent error={error} isLoading={isLoading} data={klass}>
           {(klass) => (
             <>
-              <PageHeader>{klass.name}</PageHeader>
+              <PageHeading variant={PageHeadingVariant.title}>
+                {klass.name}
+              </PageHeading>
+              <ClassNavigation classId={klass?.id} />
               <SessionList classId={klass.id} />
             </>
           )}
diff --git a/frontend/src/utilities/table.ts b/frontend/src/utilities/table.ts
index 4bd7c5c3e..eef7def8a 100644
--- a/frontend/src/utilities/table.ts
+++ b/frontend/src/utilities/table.ts
@@ -1,11 +1,5 @@
-import { DataTableRowClickEvent } from "primereact/datatable";
-
-export const isClickOnRow = (e: DataTableRowClickEvent): boolean => {
-  if (
-    e.originalEvent.target instanceof Element &&
-    (e.originalEvent.target.tagName === "TD" ||
-      e.originalEvent.target.tagName === "SPAN")
-  ) {
+export const isClickOnRow = (e: React.MouseEvent<HTMLElement>): boolean => {
+  if (e.target instanceof Element && e.target.closest("button") === null) {
     return true;
   }
   return false;