diff --git a/frontend/actions/user.ts b/frontend/actions/user.ts
index 119f86409..d76fe40fe 100644
--- a/frontend/actions/user.ts
+++ b/frontend/actions/user.ts
@@ -1,6 +1,6 @@
 import qs from 'querystring'
 import useSWR from 'swr'
-import { EntityObject } from 'types/v2/types'
+import { EntityObject, ModelInterface, TokenActionsKeys, TokenInterface, TokenScopeKeys, User } from 'types/v2/types'
 
 import { ErrorInfo, fetcher } from '../utils/fetcher'
 
@@ -28,13 +28,11 @@ export function useListUsers(q: string) {
 }
 
 interface UserResponse {
-  user: {
-    dn: string
-  }
+  user: User
 }
 
 export function useGetCurrentUser() {
-  const { data, error, mutate } = useSWR<UserResponse, ErrorInfo>(`/api/v2/entities/me`, fetcher)
+  const { data, error, mutate } = useSWR<UserResponse, ErrorInfo>('/api/v2/entities/me', fetcher)
 
   return {
     mutateCurrentUser: mutate,
@@ -43,3 +41,37 @@ export function useGetCurrentUser() {
     isCurrentUserError: error,
   }
 }
+
+interface GetUserTokensResponse {
+  tokens: TokenInterface[]
+}
+
+export function useGetUserTokens() {
+  const { data, error, mutate } = useSWR<GetUserTokensResponse, ErrorInfo>('/api/v2/user/tokens', fetcher)
+
+  return {
+    mutateTokens: mutate,
+    tokens: data?.tokens || [],
+    isTokensLoading: !error && !data,
+    isTokensError: error,
+  }
+}
+
+export function postUserToken(
+  description: string,
+  scope: TokenScopeKeys,
+  modelIds: ModelInterface['id'][],
+  actions: TokenActionsKeys[],
+) {
+  return fetch('/api/v2/user/tokens', {
+    method: 'post',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ description, scope, modelIds, actions }),
+  })
+}
+
+export function deleteUserToken(accessKey: TokenInterface['accessKey']) {
+  return fetch(`/api/v2/user/token/${accessKey}`, {
+    method: 'delete',
+  })
+}
diff --git a/frontend/cypress/e2e/beta/push-image-registry.cy.ts b/frontend/cypress/e2e/beta/push-image-registry.cy.ts
index 1d05832ac..7520ab6ed 100644
--- a/frontend/cypress/e2e/beta/push-image-registry.cy.ts
+++ b/frontend/cypress/e2e/beta/push-image-registry.cy.ts
@@ -39,7 +39,7 @@ describe('Make and approve an access request', () => {
     cy.contains('Pushing an Image for this Model')
 
     cy.log('Fetching the docker login password and running all the docker commands to push an image')
-    cy.get('[data-test=showTokenButton]').click()
+    cy.get('[data-test=regenerateTokenButton]').click()
     cy.get('[data-test=dockerPassword]').should('not.contain.text', 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx')
     cy.get('[data-test=dockerPassword]')
       .invoke('text')
diff --git a/frontend/pages/beta/schemas/new.tsx b/frontend/pages/beta/schemas/new.tsx
index 602a0bc6e..33c794a21 100644
--- a/frontend/pages/beta/schemas/new.tsx
+++ b/frontend/pages/beta/schemas/new.tsx
@@ -2,6 +2,7 @@ import { ArrowBack, Schema } from '@mui/icons-material'
 import { LoadingButton } from '@mui/lab'
 import { Box, Button, Container, MenuItem, Paper, Select, Stack, TextField, Typography } from '@mui/material'
 import { styled } from '@mui/material/styles'
+import { useTheme } from '@mui/material/styles'
 import { postSchema, SchemaKind } from 'actions/schema'
 import { useRouter } from 'next/router'
 import { ChangeEvent, FormEvent, useState } from 'react'
@@ -34,6 +35,7 @@ export default function NewSchema() {
   const [loading, setLoading] = useState(false)
 
   const router = useRouter()
+  const theme = useTheme()
 
   const handleUploadChange = (event: ChangeEvent<HTMLInputElement>) => {
     const fileReader = new FileReader()
@@ -106,7 +108,7 @@ export default function NewSchema() {
             <Stack spacing={2} sx={{ mt: 2 }}>
               <Stack>
                 <Typography fontWeight='bold'>
-                  Id <span style={{ color: 'red' }}>*</span>
+                  Id <span style={{ color: theme.palette.error.main }}>*</span>
                 </Typography>
                 <TextField
                   fullWidth
@@ -120,7 +122,7 @@ export default function NewSchema() {
               </Stack>
               <Stack>
                 <Typography fontWeight='bold'>
-                  Name <span style={{ color: 'red' }}>*</span>
+                  Name <span style={{ color: theme.palette.error.main }}>*</span>
                 </Typography>
                 <TextField
                   fullWidth
@@ -134,7 +136,7 @@ export default function NewSchema() {
               </Stack>
               <Stack>
                 <Typography fontWeight='bold'>
-                  Description <span style={{ color: 'red' }}>*</span>
+                  Description <span style={{ color: theme.palette.error.main }}>*</span>
                 </Typography>
                 <RichTextEditor
                   value={schemaDescription}
@@ -145,7 +147,7 @@ export default function NewSchema() {
               </Stack>
               <Stack>
                 <Typography fontWeight='bold'>
-                  Schema Type <span style={{ color: 'red' }}>*</span>
+                  Schema Type <span style={{ color: theme.palette.error.main }}>*</span>
                 </Typography>
                 <Select
                   size='small'
diff --git a/frontend/pages/beta/settings/index.tsx b/frontend/pages/beta/settings/index.tsx
new file mode 100644
index 000000000..e740ba259
--- /dev/null
+++ b/frontend/pages/beta/settings/index.tsx
@@ -0,0 +1,35 @@
+import { useGetCurrentUser } from 'actions/user'
+import { useMemo } from 'react'
+import Loading from 'src/common/Loading'
+import PageWithTabs from 'src/common/PageWithTabs'
+import MultipleErrorWrapper from 'src/errors/MultipleErrorWrapper'
+import AuthenticationTab from 'src/settings/beta/authentication/AuthenticationTab'
+import ProfileTab from 'src/settings/beta/ProfileTab'
+import Wrapper from 'src/Wrapper.beta'
+
+export default function Settings() {
+  const { currentUser, isCurrentUserLoading, isCurrentUserError } = useGetCurrentUser()
+
+  const tabs = useMemo(
+    () =>
+      currentUser
+        ? [
+            { title: 'Profile', path: 'profile', view: <ProfileTab user={currentUser} /> },
+            { title: 'Authentication', path: 'authentication', view: <AuthenticationTab /> },
+          ]
+        : [],
+    [currentUser],
+  )
+
+  const error = MultipleErrorWrapper(`Unable to load settings page`, {
+    isCurrentUserError,
+  })
+  if (error) return error
+
+  return (
+    <Wrapper fullWidth title='Settings' page='settings'>
+      {isCurrentUserLoading && <Loading />}
+      <PageWithTabs title='Settings' tabs={tabs} />
+    </Wrapper>
+  )
+}
diff --git a/frontend/pages/beta/settings/personal-access-tokens/new.tsx b/frontend/pages/beta/settings/personal-access-tokens/new.tsx
new file mode 100644
index 000000000..c369e4080
--- /dev/null
+++ b/frontend/pages/beta/settings/personal-access-tokens/new.tsx
@@ -0,0 +1,213 @@
+import { ArrowBack } from '@mui/icons-material'
+import { LoadingButton } from '@mui/lab'
+import {
+  Button,
+  Card,
+  Checkbox,
+  Container,
+  FormControl,
+  FormControlLabel,
+  Grid,
+  Stack,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { useTheme } from '@mui/material/styles'
+import { useListModels } from 'actions/model'
+import { postUserToken } from 'actions/user'
+import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react'
+import Loading from 'src/common/Loading'
+import Link from 'src/Link'
+import MessageAlert from 'src/MessageAlert'
+import TokenDialog from 'src/settings/beta/authentication/TokenDialog'
+import Wrapper from 'src/Wrapper.beta'
+import { TokenActions, TokenActionsKeys, TokenInterface, TokenScope } from 'types/v2/types'
+import { getErrorMessage } from 'utils/fetcher'
+
+export default function NewToken() {
+  const theme = useTheme()
+  const [description, setDescription] = useState('')
+  const [isAllModels, setIsAllModels] = useState(false)
+  const [selectedModels, setSelectedModels] = useState<string[]>([])
+  const [selectedActions, setSelectedActions] = useState<TokenActionsKeys[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+  const [errorMessage, setErrorMessage] = useState('')
+  const [token, setToken] = useState<TokenInterface | undefined>()
+
+  const { models, isModelsLoading, isModelsError } = useListModels([])
+
+  useEffect(() => {
+    const areAllModelsSelected = selectedModels.length === models.length
+    if (!isAllModels && areAllModelsSelected) {
+      setIsAllModels(true)
+    } else if (isAllModels && !areAllModelsSelected) {
+      setIsAllModels(false)
+    }
+  }, [isAllModels, models.length, selectedModels.length])
+
+  const handleSelectedModelsChange = useCallback(
+    (modelId: string, checked: boolean) => {
+      if (checked) {
+        setSelectedModels([...selectedModels, modelId])
+      } else {
+        const foundIndex = selectedModels.findIndex((selectedModel) => selectedModel === modelId)
+        if (foundIndex >= 0) {
+          const updatedSelectedModels = [...selectedModels]
+          updatedSelectedModels.splice(foundIndex, 1)
+          setSelectedModels(updatedSelectedModels)
+        }
+      }
+    },
+    [selectedModels],
+  )
+
+  const modelCheckboxes = useMemo(
+    () =>
+      models.map((model) => (
+        <Grid item xs={6} key={model.id}>
+          <FormControl>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  name={model.name}
+                  checked={selectedModels.includes(model.id)}
+                  onChange={(_event, checked) => handleSelectedModelsChange(model.id, checked)}
+                />
+              }
+              label={model.name}
+            />
+          </FormControl>
+        </Grid>
+      )),
+    [handleSelectedModelsChange, models, selectedModels],
+  )
+
+  const handleSelectedActionsChange = useCallback(
+    (action: TokenActionsKeys, checked: boolean) => {
+      if (checked) {
+        setSelectedActions([...selectedActions, action])
+      } else {
+        const foundIndex = selectedActions.findIndex((selectedRepository) => selectedRepository === action)
+        if (foundIndex >= 0) {
+          const updatedSelectedActions = [...selectedActions]
+          updatedSelectedActions.splice(foundIndex, 1)
+          setSelectedActions(updatedSelectedActions)
+        }
+      }
+    },
+    [selectedActions],
+  )
+
+  const actionCheckboxes = useMemo(
+    () =>
+      Object.values(TokenActions).map((action) => (
+        <Grid item xs={6} key={action}>
+          <FormControl>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  name={action}
+                  checked={selectedActions.includes(action)}
+                  onChange={(_event, checked) => handleSelectedActionsChange(action, checked)}
+                />
+              }
+              label={action}
+            />
+          </FormControl>
+        </Grid>
+      )),
+    [handleSelectedActionsChange, selectedActions],
+  )
+
+  const handleDescriptionChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    setDescription(event.target.value)
+  }
+
+  const handleAllSelectedModelsChange = (_event: ChangeEvent<HTMLInputElement>, checked: boolean) => {
+    setIsAllModels(checked)
+    setSelectedModels(checked ? models.map((model) => model.id) : [])
+  }
+
+  const handleSubmit = async () => {
+    setIsLoading(true)
+    const scope = isAllModels ? TokenScope.All : TokenScope.Models
+    const modelIds = isAllModels ? [] : selectedModels
+    const response = await postUserToken(description, scope, modelIds, selectedActions)
+
+    if (!response.ok) {
+      setErrorMessage(await getErrorMessage(response))
+    } else {
+      const { token } = await response.json()
+      setToken(token)
+    }
+
+    setIsLoading(false)
+  }
+
+  return (
+    <Wrapper title='Personal Access Token' page='Token'>
+      <Container maxWidth='md'>
+        <Card sx={{ my: 4, p: 4 }}>
+          <Stack spacing={2}>
+            <Link href={'/beta/settings?tab=authentication&category=personal'}>
+              <Button startIcon={<ArrowBack />}>Back to settings</Button>
+            </Link>
+            <Stack spacing={2}>
+              <Stack>
+                <Typography fontWeight='bold'>
+                  Description <span style={{ color: theme.palette.error.main }}>*</span>
+                </Typography>
+                <TextField
+                  required
+                  multiline
+                  size='small'
+                  value={description}
+                  maxRows={8}
+                  onChange={handleDescriptionChange}
+                  inputProps={{ 'data-test': 'tokenDescriptionTextField' }}
+                />
+              </Stack>
+              <Stack>
+                <Typography fontWeight='bold'>
+                  Models <span style={{ color: theme.palette.error.main }}>*</span>
+                </Typography>
+                {isModelsLoading ? (
+                  <Loading />
+                ) : (
+                  <>
+                    <FormControl>
+                      <FormControlLabel
+                        control={<Checkbox name='All' checked={isAllModels} onChange={handleAllSelectedModelsChange} />}
+                        label='All'
+                      />
+                    </FormControl>
+                    <Grid container>{modelCheckboxes}</Grid>
+                  </>
+                )}
+              </Stack>
+              <Stack>
+                <Typography fontWeight='bold'>
+                  Actions <span style={{ color: theme.palette.error.main }}>*</span>
+                </Typography>
+                <Grid container>{actionCheckboxes}</Grid>
+              </Stack>
+              <Stack alignItems='flex-end'>
+                <LoadingButton
+                  variant='contained'
+                  loading={isLoading}
+                  disabled={!description || !selectedModels.length || !selectedActions.length}
+                  onClick={handleSubmit}
+                  data-test='generatePersonalAccessTokenButton'
+                >
+                  Generate Token
+                </LoadingButton>
+                <MessageAlert message={isModelsError?.info.message || errorMessage} severity='error' />
+              </Stack>
+            </Stack>
+          </Stack>
+        </Card>
+      </Container>
+      <TokenDialog token={token} />
+    </Wrapper>
+  )
+}
diff --git a/frontend/src/Form/beta/EditableFormHeading.tsx b/frontend/src/Form/beta/EditableFormHeading.tsx
index 0ae025218..4b1850e71 100644
--- a/frontend/src/Form/beta/EditableFormHeading.tsx
+++ b/frontend/src/Form/beta/EditableFormHeading.tsx
@@ -27,8 +27,8 @@ export default function EditableFormHeading({
   return (
     <Stack sx={{ pb: 2 }}>
       <Stack
-        direction={{ sx: 'column', sm: 'row' }}
-        justifyContent={{ sx: 'center', sm: 'space-between' }}
+        direction={{ xs: 'column', sm: 'row' }}
+        justifyContent={{ xs: 'center', sm: 'space-between' }}
         alignItems='center'
         spacing={2}
       >
diff --git a/frontend/src/MuiForms/RichTextInput.tsx b/frontend/src/MuiForms/RichTextInput.tsx
index 6509c579a..7f0b97843 100644
--- a/frontend/src/MuiForms/RichTextInput.tsx
+++ b/frontend/src/MuiForms/RichTextInput.tsx
@@ -53,7 +53,7 @@ export default function RichTextInput({
       label={
         <Typography fontWeight='bold'>
           {label}
-          {required && <span style={{ color: 'red' }}>{' *'}</span>}
+          {required && <span style={{ color: theme.palette.error.main }}>{' *'}</span>}
         </Typography>
       }
       key={label}
diff --git a/frontend/src/common/PageWithTabs.tsx b/frontend/src/common/PageWithTabs.tsx
index 23a855138..b9b2e4d99 100644
--- a/frontend/src/common/PageWithTabs.tsx
+++ b/frontend/src/common/PageWithTabs.tsx
@@ -3,7 +3,7 @@ import { grey } from '@mui/material/colors/'
 import { useTheme } from '@mui/material/styles'
 import { useRouter } from 'next/router'
 import { ParsedUrlQuery } from 'querystring'
-import { ReactElement, SyntheticEvent, useContext, useState } from 'react'
+import { ReactElement, SyntheticEvent, useContext, useEffect, useState } from 'react'
 import UnsavedChangesContext from 'src/contexts/unsavedChangesContext'
 
 export interface PageTab {
@@ -31,7 +31,13 @@ export default function PageWithTabs({
 }) {
   const router = useRouter()
   const { tab } = router.query
-  const [currentTab, setCurrentTab] = useState(tabs.find((pageTab) => pageTab.path === tab) ? `${tab}` : tabs[0].path)
+
+  const [currentTab, setCurrentTab] = useState('')
+
+  useEffect(() => {
+    if (!tabs.length) return
+    setCurrentTab(tabs.find((pageTab) => pageTab.path === tab) ? `${tab}` : tabs[0].path)
+  }, [tab, tabs])
 
   const { unsavedChanges, setUnsavedChanges, sendWarning } = useContext(UnsavedChangesContext)
 
diff --git a/frontend/src/model/beta/AccessRequests.tsx b/frontend/src/model/beta/AccessRequests.tsx
index 6255e96a1..06a25460a 100644
--- a/frontend/src/model/beta/AccessRequests.tsx
+++ b/frontend/src/model/beta/AccessRequests.tsx
@@ -36,7 +36,7 @@ export default function AccessRequests({ model }: AccessRequestsProps) {
   }
 
   return (
-    <Box sx={{ maxWidth: '900px', mx: 'auto', my: 4 }}>
+    <Box sx={{ maxWidth: 'md', mx: 'auto', my: 4 }}>
       <Stack spacing={4}>
         <Box sx={{ textAlign: 'right' }}>
           <Link href={`/beta/model/${model.id}/access-request/schema`}>
diff --git a/frontend/src/model/beta/ModelImages.tsx b/frontend/src/model/beta/ModelImages.tsx
index d6b31aee7..1f948aa96 100644
--- a/frontend/src/model/beta/ModelImages.tsx
+++ b/frontend/src/model/beta/ModelImages.tsx
@@ -48,7 +48,7 @@ export default function ModelImages({ model }: AccessRequestsProps) {
   return (
     <>
       {isModelImagesLoading && <Loading />}
-      <Box sx={{ maxWidth: '900px', mx: 'auto', my: 4 }}>
+      <Box sx={{ maxWidth: 'md', mx: 'auto', my: 4 }}>
         <Stack spacing={4}>
           <Box sx={{ textAlign: 'right' }}>
             <Button
diff --git a/frontend/src/model/beta/Releases.tsx b/frontend/src/model/beta/Releases.tsx
index 9927fabc4..b72e2a4a0 100644
--- a/frontend/src/model/beta/Releases.tsx
+++ b/frontend/src/model/beta/Releases.tsx
@@ -38,7 +38,7 @@ export default function Releases({ model }: { model: ModelInterface }) {
   }
 
   return (
-    <Box sx={{ maxWidth: '900px', mx: 'auto', my: 4 }}>
+    <Box sx={{ maxWidth: 'md', mx: 'auto', my: 4 }}>
       <Stack spacing={4}>
         <Box sx={{ textAlign: 'right' }}>
           <Button
diff --git a/frontend/src/model/beta/common/ValidationErrorIcon.tsx b/frontend/src/model/beta/common/ValidationErrorIcon.tsx
index 280141a10..e654b8335 100644
--- a/frontend/src/model/beta/common/ValidationErrorIcon.tsx
+++ b/frontend/src/model/beta/common/ValidationErrorIcon.tsx
@@ -1,5 +1,6 @@
 import ErrorIcon from '@mui/icons-material/ErrorOutline'
 import { Tooltip } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
 
 import { StepNoRender } from '../../../../types/interfaces'
 
@@ -7,9 +8,11 @@ interface ValidationErrorIconProps {
   step: StepNoRender
 }
 export default function ValidationErrorIcon({ step }: ValidationErrorIconProps) {
+  const theme = useTheme()
+
   return !step.isComplete(step) ? (
     <Tooltip title='This step is unfinished'>
-      <ErrorIcon sx={{ color: 'red' }} />
+      <ErrorIcon sx={{ color: theme.palette.error.main }} />
     </Tooltip>
   ) : (
     <></>
diff --git a/frontend/src/model/beta/overview/FormEditPage.tsx b/frontend/src/model/beta/overview/FormEditPage.tsx
index 181336998..275f7cefc 100644
--- a/frontend/src/model/beta/overview/FormEditPage.tsx
+++ b/frontend/src/model/beta/overview/FormEditPage.tsx
@@ -88,8 +88,8 @@ export default function FormEditPage({ model }: FormEditPageProps) {
       {isSchemaLoading && <Loading />}
       <Box sx={{ py: 1 }}>
         <Stack
-          direction={{ sx: 'column', sm: 'row' }}
-          justifyContent={{ sx: 'center', sm: 'space-between' }}
+          direction={{ xs: 'column', sm: 'row' }}
+          justifyContent={{ xs: 'center', sm: 'space-between' }}
           alignItems='center'
           sx={{ pb: 2 }}
         >
diff --git a/frontend/src/model/beta/overview/TemplatePage.tsx b/frontend/src/model/beta/overview/TemplatePage.tsx
index 00bbd8587..dfbd9598b 100644
--- a/frontend/src/model/beta/overview/TemplatePage.tsx
+++ b/frontend/src/model/beta/overview/TemplatePage.tsx
@@ -10,7 +10,7 @@ type TemplatePageProps = {
 
 export default function TemplatePage({ model }: TemplatePageProps) {
   return (
-    <Box sx={{ maxWidth: '900px', mx: 'auto', my: 4 }}>
+    <Box sx={{ maxWidth: 'md', mx: 'auto', my: 4 }}>
       <Stack spacing={4} justifyContent='center' alignItems='center'>
         <Typography component='h2' variant='h6' color='primary' data-test='createModelCardOverview'>
           Create a model card
diff --git a/frontend/src/model/beta/registry/UploadNewImageDialog.tsx b/frontend/src/model/beta/registry/UploadNewImageDialog.tsx
index c84e510a6..b1ffe2e88 100644
--- a/frontend/src/model/beta/registry/UploadNewImageDialog.tsx
+++ b/frontend/src/model/beta/registry/UploadNewImageDialog.tsx
@@ -55,7 +55,7 @@ export default function UploadModelImageDialog({ open, handleClose, model }: Upl
       const body = await res.json()
       token = body.token
     } catch (error) {
-      setTokenErrorText('Recieved invalid response from server.')
+      setTokenErrorText('Received invalid response from server.')
     }
 
     return token
@@ -94,7 +94,7 @@ export default function UploadModelImageDialog({ open, handleClose, model }: Upl
               <Typography fontWeight='bold'>User authentication token</Typography>
               <Typography>Use the token below to authenticate when you try and run the docker login command</Typography>
               <Stack direction='row'>
-                <Button sx={{ mr: 2 }} variant='outlined' onClick={showToken} data-test='showTokenButton'>
+                <Button sx={{ mr: 2 }} variant='outlined' onClick={showToken} data-test='regenerateTokenButton'>
                   Regenerate Token
                 </Button>
                 <Box
diff --git a/frontend/src/model/beta/releases/ReleaseForm.tsx b/frontend/src/model/beta/releases/ReleaseForm.tsx
index 9dc27e9ab..e28de7bb8 100644
--- a/frontend/src/model/beta/releases/ReleaseForm.tsx
+++ b/frontend/src/model/beta/releases/ReleaseForm.tsx
@@ -1,4 +1,5 @@
 import { Checkbox, FormControl, FormControlLabel, Grid, Stack, TextField, Tooltip, Typography } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
 import { useGetReleasesForModelId } from 'actions/release'
 import prettyBytes from 'pretty-bytes'
 import { ChangeEvent, useMemo } from 'react'
@@ -57,6 +58,8 @@ export default function ReleaseForm({
   editable = false,
   isEdit = false,
 }: ReleaseFormProps) {
+  const theme = useTheme()
+
   const isReadOnly = useMemo(() => editable && !isEdit, [editable, isEdit])
 
   const { releases, isReleasesLoading, isReleasesError } = useGetReleasesForModelId(model.id)
@@ -81,7 +84,7 @@ export default function ReleaseForm({
 
   const releaseNotesLabel = (
     <Typography component='label' fontWeight='bold' htmlFor={'new-model-description'}>
-      Release Notes {!isReadOnly && <span style={{ color: 'red' }}>*</span>}
+      Release Notes {!isReadOnly && <span style={{ color: theme.palette.error.main }}>*</span>}
     </Typography>
   )
 
@@ -110,7 +113,7 @@ export default function ReleaseForm({
       </Stack>
       <Stack>
         <Typography fontWeight='bold'>
-          Semantic version {!editable && <span style={{ color: 'red' }}>*</span>}
+          Semantic version {!editable && <span style={{ color: theme.palette.error.main }}>*</span>}
         </Typography>
         {isReadOnly || isEdit ? (
           <ReadOnlyAnswer value={formData.semver} />
diff --git a/frontend/src/settings/beta/ProfileTab.tsx b/frontend/src/settings/beta/ProfileTab.tsx
new file mode 100644
index 000000000..e32533d55
--- /dev/null
+++ b/frontend/src/settings/beta/ProfileTab.tsx
@@ -0,0 +1,16 @@
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import { User } from 'types/v2/types'
+
+type ProfileTabProps = {
+  user: User
+}
+
+export default function ProfileTab({ user }: ProfileTabProps) {
+  return (
+    <Box sx={{ px: 2, py: 4 }}>
+      <Typography fontWeight='bold'>Name</Typography>
+      <Typography>{user.dn}</Typography>
+    </Box>
+  )
+}
diff --git a/frontend/src/settings/beta/authentication/AuthenticationTab.tsx b/frontend/src/settings/beta/authentication/AuthenticationTab.tsx
new file mode 100644
index 000000000..e1df69f8c
--- /dev/null
+++ b/frontend/src/settings/beta/authentication/AuthenticationTab.tsx
@@ -0,0 +1,49 @@
+import { List, ListItem, ListItemButton } from '@mui/material'
+import Box from '@mui/material/Box'
+import Divider from '@mui/material/Divider'
+import Stack from '@mui/material/Stack'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+import DockerAuthentication from 'src/settings/beta/authentication/DockerAuthentication'
+import PersonalAuthentication from 'src/settings/beta/authentication/PersonalAuthentication'
+
+type AuthenticationCategory = 'personal' | 'docker'
+
+export default function AuthenticationTab() {
+  const router = useRouter()
+  const [selectedCategory, setSelectedCategory] = useState<AuthenticationCategory>(
+    router.query.category === 'personal' || router.query.category === 'docker' ? router.query.category : 'personal',
+  )
+
+  const handleListItemClick = (category: AuthenticationCategory) => {
+    setSelectedCategory(category)
+    router.replace({
+      query: { ...router.query, category },
+    })
+  }
+
+  return (
+    <Stack
+      direction={{ xs: 'column', sm: 'row' }}
+      spacing={{ sm: 2 }}
+      divider={<Divider orientation='vertical' flexItem />}
+    >
+      <List>
+        <ListItem disablePadding>
+          <ListItemButton selected={selectedCategory === 'personal'} onClick={() => handleListItemClick('personal')}>
+            Personal
+          </ListItemButton>
+        </ListItem>
+        <ListItem disablePadding>
+          <ListItemButton selected={selectedCategory === 'docker'} onClick={() => handleListItemClick('docker')}>
+            Docker
+          </ListItemButton>
+        </ListItem>
+      </List>
+      <Box sx={{ width: '100%' }}>
+        {selectedCategory === 'personal' && <PersonalAuthentication />}
+        {selectedCategory === 'docker' && <DockerAuthentication />}
+      </Box>
+    </Stack>
+  )
+}
diff --git a/frontend/src/settings/beta/authentication/DockerAuthentication.tsx b/frontend/src/settings/beta/authentication/DockerAuthentication.tsx
new file mode 100644
index 000000000..7fb8ea19a
--- /dev/null
+++ b/frontend/src/settings/beta/authentication/DockerAuthentication.tsx
@@ -0,0 +1,80 @@
+import ContentCopy from '@mui/icons-material/ContentCopy'
+import { Box, Button, IconButton, Stack, Tooltip, Typography } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
+import { useState } from 'react'
+import MessageAlert from 'src/MessageAlert'
+import { getErrorMessage } from 'utils/fetcher'
+
+export default function DockerAuthentication() {
+  const theme = useTheme()
+  const [showToken, setShowToken] = useState(false)
+  const [token, setToken] = useState('')
+  const [errorMessage, setErrorMessage] = useState('')
+
+  const regenerateToken = async () => {
+    const res = await fetch('/api/v1/user/token', {
+      method: 'POST',
+    })
+
+    if (!res.ok) {
+      setErrorMessage(await getErrorMessage(res))
+      return ''
+    }
+
+    let newToken = ''
+
+    try {
+      const body = await res.json()
+      newToken = body.token
+    } catch (error) {
+      setErrorMessage('Received invalid response from server.')
+    }
+
+    return newToken
+  }
+
+  const handleRegenerateToken = async () => {
+    const newToken = await regenerateToken()
+    if (newToken) {
+      setToken(newToken)
+      setShowToken(true)
+    }
+  }
+
+  const handleRegenerateAndCopy = async () => {
+    const newToken = await regenerateToken()
+    if (newToken) {
+      setToken(newToken)
+      navigator.clipboard.writeText(newToken)
+    }
+  }
+
+  return (
+    <Box sx={{ p: 2 }}>
+      <Typography fontWeight='bold' mb={1}>
+        Docker user authentication token
+      </Typography>
+      <Stack direction='row' spacing={1}>
+        <Button variant='outlined' onClick={handleRegenerateToken} data-test='regenerateTokenButton'>
+          Regenerate Token
+        </Button>
+        <Typography
+          sx={{
+            backgroundColor: theme.palette.container.main,
+            px: 2,
+            py: 1,
+          }}
+          data-test='dockerPassword'
+        >
+          {showToken ? token : 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx'}
+        </Typography>
+        <Tooltip title='Regenerate & copy to clipboard'>
+          <IconButton onClick={handleRegenerateAndCopy} aria-label='regenerate and copy to clipboard'>
+            <ContentCopy />
+          </IconButton>
+        </Tooltip>
+      </Stack>
+      <MessageAlert message={errorMessage} severity='error' />
+    </Box>
+  )
+}
diff --git a/frontend/src/settings/beta/authentication/PersonalAuthentication.tsx b/frontend/src/settings/beta/authentication/PersonalAuthentication.tsx
new file mode 100644
index 000000000..a01443e36
--- /dev/null
+++ b/frontend/src/settings/beta/authentication/PersonalAuthentication.tsx
@@ -0,0 +1,79 @@
+import { Delete } from '@mui/icons-material'
+import { LoadingButton } from '@mui/lab'
+import { Box, IconButton, Stack, Tooltip, Typography } from '@mui/material'
+import { deleteUserToken, useGetUserTokens } from 'actions/user'
+import { useRouter } from 'next/router'
+import { Fragment, useCallback, useMemo, useState } from 'react'
+import Loading from 'src/common/Loading'
+import MessageAlert from 'src/MessageAlert'
+import { TokenInterface } from 'types/v2/types'
+import { getErrorMessage } from 'utils/fetcher'
+
+export default function PersonalAuthentication() {
+  const router = useRouter()
+  const [isLoading, setIsLoading] = useState(false)
+  const [errorMessage, setErrorMessage] = useState('')
+
+  const { tokens, isTokensLoading, isTokensError, mutateTokens } = useGetUserTokens()
+
+  const handleDeleteToken = useCallback(
+    async (accessKey: TokenInterface['accessKey']) => {
+      const response = await deleteUserToken(accessKey)
+
+      if (!response.ok) {
+        setErrorMessage(await getErrorMessage(response))
+      } else {
+        mutateTokens()
+      }
+    },
+    [mutateTokens],
+  )
+
+  const tokenList = useMemo(
+    () =>
+      tokens.map((token, index) => (
+        <Fragment key={token.accessKey}>
+          <Stack direction='row' alignItems='center' justifyContent='space-between'>
+            <Typography>{token.description}</Typography>
+            <Tooltip title='Delete token'>
+              <IconButton
+                color='primary'
+                onClick={() => handleDeleteToken(token.accessKey)}
+                aria-label='delete access key'
+              >
+                <Delete />
+              </IconButton>
+            </Tooltip>
+          </Stack>
+          {index !== tokens.length - 1 && <Box sx={{ borderBottom: 1, borderColor: 'divider', my: 2 }} />}
+        </Fragment>
+      )),
+    [handleDeleteToken, tokens],
+  )
+
+  const handleAddToken = () => {
+    setIsLoading(true)
+    router.push('/beta/settings/personal-access-tokens/new')
+  }
+
+  return (
+    <Box sx={{ p: 2 }}>
+      <Stack
+        direction={{ xs: 'column', sm: 'row' }}
+        justifyContent={{ xs: 'center', sm: 'space-between' }}
+        alignItems='center'
+        sx={{ pb: 2 }}
+      >
+        <Typography fontWeight='bold' mb={1}>
+          Personal Access Tokens
+        </Typography>
+        <LoadingButton variant='outlined' loading={isLoading} onClick={handleAddToken}>
+          Add token
+        </LoadingButton>
+      </Stack>
+      <MessageAlert message={isTokensError?.info.message || errorMessage} severity='error' />
+      {isTokensLoading && <Loading />}
+      {tokenList}
+    </Box>
+  )
+}
diff --git a/frontend/src/settings/beta/authentication/TokenDialog.tsx b/frontend/src/settings/beta/authentication/TokenDialog.tsx
new file mode 100644
index 000000000..10b7c5589
--- /dev/null
+++ b/frontend/src/settings/beta/authentication/TokenDialog.tsx
@@ -0,0 +1,139 @@
+import { ContentCopy, Visibility, VisibilityOff } from '@mui/icons-material'
+import { LoadingButton } from '@mui/lab'
+import {
+  Box,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  IconButton,
+  Tooltip,
+  Typography,
+} from '@mui/material'
+import { useTheme } from '@mui/material/styles'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import MessageAlert from 'src/MessageAlert'
+import { TokenInterface } from 'types/v2/types'
+
+type TokenDialogProps = {
+  token?: TokenInterface
+}
+
+export default function TokenDialog({ token }: TokenDialogProps) {
+  const theme = useTheme()
+  const router = useRouter()
+  const [open, setOpen] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const [showAccessKey, setShowAccessKey] = useState(false)
+  const [showSecretKey, setShowSecretKey] = useState(false)
+
+  useEffect(() => {
+    if (token) setOpen(true)
+  }, [token])
+
+  const handleClose = () => {
+    setIsLoading(true)
+    router.push('/beta/settings?tab=authentication&category=personal')
+  }
+
+  const handleCopyAccessKey = () => {
+    if (token) navigator.clipboard.writeText(token.accessKey)
+  }
+
+  const handleCopySecretKey = () => {
+    if (token?.secretKey) navigator.clipboard.writeText(token.secretKey)
+  }
+
+  const handleToggleAccessKeyVisibility = () => {
+    setShowAccessKey(!showAccessKey)
+  }
+
+  const handleToggleSecretKeyVisibility = () => {
+    setShowSecretKey(!showSecretKey)
+  }
+
+  return (
+    <Dialog open={open} onClose={handleClose}>
+      <DialogTitle>Token Created</DialogTitle>
+      <DialogContent>
+        <MessageAlert
+          message='You will never be able to access this token again. Make sure to copy it to a safe place.'
+          severity='warning'
+        />
+        <Grid container spacing={1} alignItems='center'>
+          <Grid item xs={2}>
+            <Typography>Access Key</Typography>
+          </Grid>
+          <Grid item xs={8}>
+            <Box
+              sx={{
+                backgroundColor: theme.palette.container.main,
+                px: 2,
+                py: 1,
+                display: 'flex',
+              }}
+            >
+              <Typography sx={{ mx: 'auto' }}>
+                {showAccessKey ? token?.accessKey || '' : 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx'}
+              </Typography>
+            </Box>
+          </Grid>
+          <Grid item xs={2}>
+            <Tooltip title='Copy to clipboard' placement='top'>
+              <IconButton onClick={handleCopyAccessKey} aria-label='copy access key to clipboard'>
+                <ContentCopy />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title={`${showAccessKey ? 'Hide' : 'Show'} access key`} placement='top'>
+              <IconButton
+                onClick={handleToggleAccessKeyVisibility}
+                aria-label={`${showAccessKey ? 'Hide' : 'Show'} access key`}
+              >
+                {showAccessKey ? <VisibilityOff /> : <Visibility />}
+              </IconButton>
+            </Tooltip>
+          </Grid>
+          <Grid item xs={2}>
+            <Typography>Secret Key</Typography>
+          </Grid>
+          <Grid item xs={8}>
+            <Box
+              sx={{
+                backgroundColor: theme.palette.container.main,
+                px: 2,
+                py: 1,
+                display: 'flex',
+              }}
+            >
+              <Typography sx={{ mx: 'auto' }}>
+                {showSecretKey ? token?.secretKey || '' : 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx'}
+              </Typography>
+            </Box>
+          </Grid>
+          <Grid item xs={2}>
+            <Tooltip title='Copy to clipboard'>
+              <IconButton onClick={handleCopySecretKey} aria-label='copy secret key to clipboard'>
+                <ContentCopy />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title={`${showSecretKey ? 'Hide' : 'Show'} secret key`}>
+              <IconButton
+                onClick={handleToggleSecretKeyVisibility}
+                aria-label={`${showSecretKey ? 'Hide' : 'Show'} secret key`}
+              >
+                {showSecretKey ? <VisibilityOff /> : <Visibility />}
+              </IconButton>
+            </Tooltip>
+          </Grid>
+        </Grid>
+      </DialogContent>
+      <DialogActions>
+        <LoadingButton variant='contained' loading={isLoading} onClick={handleClose}>
+          Continue
+        </LoadingButton>
+      </DialogActions>
+    </Dialog>
+  )
+}
diff --git a/frontend/src/wrapper/TopNavigation.tsx b/frontend/src/wrapper/TopNavigation.tsx
index 6a7e03b6a..742380961 100644
--- a/frontend/src/wrapper/TopNavigation.tsx
+++ b/frontend/src/wrapper/TopNavigation.tsx
@@ -1,4 +1,4 @@
-import { Add } from '@mui/icons-material'
+import { Add, Settings } from '@mui/icons-material'
 import DarkModeIcon from '@mui/icons-material/DarkMode'
 import LogoutIcon from '@mui/icons-material/Logout'
 import MenuIcon from '@mui/icons-material/Menu'
@@ -162,6 +162,14 @@ export default function TopNavigation({
                       </MenuItem>
                     </span>
                   </Tooltip>
+                  <Link href='/beta/settings' color='inherit' underline='none'>
+                    <MenuItem data-test='settingsLink'>
+                      <ListItemIcon>
+                        <Settings fontSize='small' />
+                      </ListItemIcon>
+                      <ListItemText>Settings</ListItemText>
+                    </MenuItem>
+                  </Link>
                   <Link href='/api/logout' color='inherit' underline='none'>
                     <MenuItem data-test='logoutLink'>
                       <ListItemIcon>
diff --git a/frontend/types/v2/types.ts b/frontend/types/v2/types.ts
index 5bf32532f..8182b4ccf 100644
--- a/frontend/types/v2/types.ts
+++ b/frontend/types/v2/types.ts
@@ -94,3 +94,31 @@ export interface EntityObject {
   kind: string
   id: string
 }
+
+export const TokenScope = {
+  All: 'all',
+  Models: 'models',
+} as const
+
+export type TokenScopeKeys = (typeof TokenScope)[keyof typeof TokenScope]
+
+export const TokenActions = {
+  ImageRead: 'image:read',
+  FileRead: 'file:read',
+} as const
+
+export type TokenActionsKeys = (typeof TokenActions)[keyof typeof TokenActions]
+
+export interface TokenInterface {
+  user: string
+  description: string
+  scope: TokenScopeKeys
+  modelIds: Array<string>
+  actions: Array<TokenActionsKeys>
+  accessKey: string
+  secretKey?: string
+  deleted: boolean
+  createdAt: Date
+  updatedAt: Date
+  compareToken: (candidateToken: string) => Promise<boolean>
+}