frontend/src/index.css

@@ -150,17 +150,18 @@ body {
       letter-spacing: normal;
     }
 
+    tbody > tr > td {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+        "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+        "Helvetica Neue", sans-serif !important;
+    }
+
     .table > :not(caption) > * > * {
       background-color: #5e6268 !important;
       color: #f2f2e8 !important;
     }
 
-    table {
+    table > thead {
-      tbody > td > div {
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-          "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-          "Helvetica Neue", sans-serif !important;
-      }
       letter-spacing: 0.25em;
     }
 

frontend/src/pages/Library/components/Pagination.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback } from "react";
 import { Pagination as BP } from "react-bootstrap";
 import { AiOutlineLeft, AiOutlineRight } from "react-icons/ai";
+import { useAuth } from "../../../shared/utils/useAuthentication";
 
 export const Pagination = ({
   currentPage,
@@ -11,6 +12,8 @@ export const Pagination = ({
   getPageCount: () => number;
   setPageIndex: (index: number) => void;
 }): React.JSX.Element => {
+  const { authenticated } = useAuth();
+
   const getPage = useCallback(
     (n: number) => (
       <BP.Item
@@ -29,7 +32,7 @@ export const Pagination = ({
       className='d-flex'
       style={{
         marginLeft: "auto",
-        marginRight: "10px",
+        marginRight: authenticated ? "10px" : "auto",
       }}
     >
       <BP.Item