diff --git a/app/ui/src/App.tsx b/app/ui/src/App.tsx
index c4a5db8..c12dbdd 100644
--- a/app/ui/src/App.tsx
+++ b/app/ui/src/App.tsx
@@ -1,19 +1,20 @@
 import { IPublicClientApplication } from "@azure/msal-browser";
 import { MsalAuthenticationTemplate, MsalProvider } from "@azure/msal-react";
-import { Button, makeStyles } from "@fluentui/react-components";
+import { Avatar, Button, makeStyles } from "@fluentui/react-components";
 import { ChevronLeft20Regular } from "@fluentui/react-icons";
 import { useLocation, useNavigate } from "react-router-dom";
 import logo from './assets/Azure.svg';
 import { interactionType, loginRequest } from "./authConfig";
 import { NavMenu, Pages } from "./Navigation";
 
+
 type AppProps = {
   pca: IPublicClientApplication;
 };
 
 const useStyles = makeStyles({
-  app: { backgroundColor: '#f5f5f5', color: '#fff', minHeight: '100vh' },
-  header: { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', padding: '8px' },
+  app: { backgroundColor: '#f5f5f5', color: '#fff', minHeight: '100vh', overflowX: 'hidden'},
+  header: { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', padding: '8px', width: '100%', boxSizing: 'border-box' },
   logo: {
     display: 'flex',
     alignItems: 'center',
@@ -29,6 +30,11 @@ const useStyles = makeStyles({
   },
   logoText: { textDecoration: 'none', color: '#000' },
   main: { display: 'flex', flexDirection: 'column', alignItems: 'center' },
+  rightSection: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '16px',
+  },
 });
 
 function App({ pca }: AppProps) {
@@ -49,7 +55,11 @@ function App({ pca }: AppProps) {
               <img src={logo} alt="logo" />
               <h3>AI Document Review</h3>
             </div>
-            <NavMenu />
+            <div className={classes.rightSection}>
+              <NavMenu />
+              <Avatar aria-label="User" size={32} />
+            </div>
+
           </header>
 
           <main className={classes.main}>
diff --git a/app/ui/src/Navigation.tsx b/app/ui/src/Navigation.tsx
index 9eb7c5f..349bab3 100644
--- a/app/ui/src/Navigation.tsx
+++ b/app/ui/src/Navigation.tsx
@@ -8,7 +8,6 @@ import {
   MenuGroup,
   MenuGroupHeader,
   MenuDivider,
-  Avatar,
   MenuItemLink,
 } from "@fluentui/react-components";
 import {
@@ -19,11 +18,12 @@ import {
   DocumentBulletListFilled,
 } from "@fluentui/react-icons";
 import { useNavigate, useLocation, Routes, Route } from "react-router-dom";
-import Agents from "./pages/admin/Agents";
+import AgentManager from "./pages/admin/AgentManager";
 import Files from "./pages/files/Files";
 import Review from "./pages/review/Review";
-import Settings from "./pages/admin/Settings";
-import useStyles from "./styles/useStyles";
+import SettingManager from "./pages/admin/SettingManager";
+import { DOCUMENTATION_URL } from "./constants";
+import { sharedStyles } from "./styles/sharedStyles";
 
 
 // paths
@@ -34,12 +34,11 @@ const paths = {
   settings: "/admin/settings",
 };
 
-const documentation_url = "https://github.com/Azure-Samples/ai-document-review";
 
 const NavMenu = () => {
   const navigate = useNavigate();
   const location = useLocation();
-  const classes = useStyles()
+  const sharedClasses = sharedStyles();
 
   const isSelected = (path: string) => location.pathname === path;
 
@@ -54,7 +53,7 @@ const NavMenu = () => {
           <MenuItem
             icon={<Home20Filled />}
             onClick={() => navigate(paths.home)}
-            className={isSelected(paths.home) ? classes.selected  : ""}
+            className={isSelected(paths.home) ? sharedClasses.selected  : ""}
           >
             Home
           </MenuItem>
@@ -67,27 +66,22 @@ const NavMenu = () => {
             <MenuItem
               icon={<Prompt20Filled />}
               onClick={() => navigate(paths.adminAgents)}
-              className={isSelected(paths.adminAgents) ? classes.selected : ""}
+              className={isSelected(paths.adminAgents) ? sharedClasses.selected : ""}
             >
               Agents Manager
             </MenuItem>
             <MenuItem
               icon={<Settings20Filled />}
               onClick={() => navigate(paths.settings)}
-              className={isSelected(paths.settings) ? classes.selected : ""}
+              className={isSelected(paths.settings) ? sharedClasses.selected : ""}
             >
               Settings
             </MenuItem>
           </MenuGroup>
           <MenuDivider />
-          <MenuItemLink icon={<DocumentBulletListFilled />} href={documentation_url} target="_blank" rel="noopener noreferrer">
+          <MenuItemLink icon={<DocumentBulletListFilled />} href={DOCUMENTATION_URL} target="_blank" rel="noopener noreferrer">
             Documentation
           </MenuItemLink>
-
-          {/* Account */}
-          <MenuItem>
-            <Avatar aria-label="User" size={32} />
-          </MenuItem>
         </MenuList>
       </MenuPopover>
     </Menu>
@@ -98,8 +92,8 @@ const Pages = () => (
   <Routes>
     <Route path={paths.home} element={<Files />} />
     <Route path={paths.review} element={<Review />} />
-    <Route path={paths.adminAgents} element={<Agents />} />
-    <Route path={paths.settings} element={<Settings />} />
+    <Route path={paths.adminAgents} element={<AgentManager />} />
+    <Route path={paths.settings} element={<SettingManager />} />
   </Routes>
 );
 
diff --git a/app/ui/src/components/AddCard.tsx b/app/ui/src/components/AddCard.tsx
new file mode 100644
index 0000000..0029617
--- /dev/null
+++ b/app/ui/src/components/AddCard.tsx
@@ -0,0 +1,46 @@
+import { Card, makeStyles, Text, tokens } from '@fluentui/react-components'
+import { AddRegular } from '@fluentui/react-icons'
+
+
+interface AddCardProps {
+  onClick: () => void
+  labelText: string
+}
+
+const componentSyles = makeStyles({
+  addIconText: {
+    textAlign: 'center',
+    fontWeight: tokens.fontWeightSemibold
+  },
+  disabledCard: {
+    width: '200px',
+    maxWidth: '100%',
+    height: '260px'
+  },
+  addIcon: {
+    fontSize: '72px',
+    color: tokens.colorNeutralForeground3,
+    margin: 'auto',
+    opacity: 0.5,
+    pointerEvents: 'none'
+  }
+})
+
+const AddCard: React.FC<AddCardProps> = ({ onClick, labelText }) => {
+  const componentClasses = componentSyles()
+
+  return (
+    <Card
+      aria-label={labelText}
+      role="button"
+      className={componentClasses.disabledCard}
+      appearance="filled-alternative"
+      onClick={() => onClick()}
+    >
+      <AddRegular className={componentClasses.addIcon} />
+      <Text className={componentClasses.addIconText}>{labelText}</Text>
+    </Card>
+  )
+}
+
+export default AddCard
diff --git a/app/ui/src/components/AgentCard.tsx b/app/ui/src/components/AgentCard.tsx
new file mode 100644
index 0000000..8d1690b
--- /dev/null
+++ b/app/ui/src/components/AgentCard.tsx
@@ -0,0 +1,113 @@
+import {
+  Button,
+  Caption1,
+  Card,
+  CardFooter,
+  CardHeader,
+  CardPreview,
+  Text,
+  Tooltip,
+  makeStyles
+} from '@fluentui/react-components'
+import { DeleteRegular, SquareMultipleRegular } from '@fluentui/react-icons'
+import React from 'react'
+import { sharedStyles } from '../styles/sharedStyles'
+import { PromptAgent } from '../types/prompt-agent'
+
+
+const componentSyles = makeStyles({
+  cardHeaderTitle: {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    maxWidth: '165px',
+  },
+  cardFooter: {
+    marginTop: "auto",
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: "8px"
+  },
+  cardbody: {
+    padding: '12px',
+    width: '175px',
+    textAlign: 'left',
+    display: '-webkit-box',
+    WebkitBoxOrient: 'vertical',
+    WebkitLineClamp: 3,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    wordBreak: 'break-word',
+    maxWidth: '175px',
+    maxHeight: '125px'
+  }
+})
+
+interface AgentCardProps {
+  agent: PromptAgent
+  onViewAgent: (agent: PromptAgent) => void
+  onDeleteAgent: (id: string) => void
+  onEditAgent: (id: string) => void
+  onDuplicateAgent: (id: string) => void
+}
+
+const AgentCard: React.FC<AgentCardProps> = ({
+  agent,
+  onViewAgent,
+  onDeleteAgent,
+  onDuplicateAgent
+}) => {
+  const extractDate = (dateString: string | number | Date | undefined) => {
+    const date = new Date(dateString || '')
+    return !isNaN(date.getTime()) ? date.toLocaleDateString() : 'Date not available'
+  }
+
+  const componentClasses = componentSyles()
+  const sharedClasses = sharedStyles()
+
+  return (
+    <Card onClick={() => onViewAgent(agent)} key={agent.id} className={sharedClasses.card}>
+      <CardHeader
+        header={
+          <Text weight="semibold" className={componentClasses.cardHeaderTitle}>
+            {agent.name}
+          </Text>
+        }
+        description={
+          <Caption1 className={sharedClasses.caption}>
+            {agent.updated_at_UTC
+              ? `Updated: ${extractDate(agent.updated_at_UTC)}`
+              : `Created: ${extractDate(agent.created_at_UTC)}`}
+          </Caption1>
+        }
+      />
+      <CardPreview>
+        <Text className={componentClasses.cardbody}>{agent.guideline_prompt}</Text>
+      </CardPreview>
+      <CardFooter className={componentClasses.cardFooter}>
+        <Tooltip content="Delete Agent" relationship="label">
+          <Button
+            onClick={(e) => {
+              e.stopPropagation()
+              onDeleteAgent(agent.id)
+            }}
+            icon={<DeleteRegular />}
+            aria-label="Delete Agent"
+          />
+        </Tooltip>
+        <Tooltip content="Duplicate Agent" relationship="label">
+          <Button
+            onClick={(e) => {
+              e.stopPropagation()
+              onDuplicateAgent(agent.id)
+            }}
+            icon={<SquareMultipleRegular />}
+            aria-label="Duplicate Agent"
+          />
+        </Tooltip>
+      </CardFooter>
+    </Card>
+  )
+}
+
+export default AgentCard
diff --git a/app/ui/src/components/AgentDialog.tsx b/app/ui/src/components/AgentDialog.tsx
new file mode 100644
index 0000000..7abd0ee
--- /dev/null
+++ b/app/ui/src/components/AgentDialog.tsx
@@ -0,0 +1,308 @@
+import React, { useState, useEffect } from 'react'
+import {
+  Dialog,
+  DialogSurface,
+  DialogBody,
+  DialogTitle,
+  Button,
+  DialogContent,
+  Input,
+  Textarea,
+  Divider,
+  DialogActions,
+  Field,
+  Spinner,
+  Tooltip,
+  makeStyles,
+  tokens
+} from '@fluentui/react-components'
+import { CopyRegular, DismissRegular, SaveRegular } from '@fluentui/react-icons'
+import { addAgent, updateAgent } from '../services/api'
+import ErrorMessage from './ErrorMessage'
+import {
+  PLACEHOLDER_AGENT_GUIDELINE_PROMPT,
+  PLACEHOLDER_AGENT_NAME,
+  PLACEHOLDER_AGENT_TYPE
+} from '../constants'
+import { PromptAgent } from '../types/prompt-agent'
+import { sharedStyles } from '../styles/sharedStyles'
+
+interface AgentDialogProps {
+  agentId: string
+  handleCloseDialog: () => void
+  selectedAgent: PromptAgent
+  showDialog: boolean
+  setShowDialog: (open: boolean) => void
+  mode: 'view' | 'edit' | 'add' | 'duplicate'
+  updateAgentList?: () => void
+}
+
+const componentSyles = makeStyles({
+  largeTextArea: {
+    width: '200%',
+    height: '250px',
+    padding: '8px',
+    marginTop: '2px',
+    marginBottom: '8px'
+  },
+  viewModeText: {
+    border: '1px solid #ccc',
+    borderRadius: '5px',
+    padding: '5px'
+  },
+  largeViewModeText: {
+    width: '170%',
+    whiteSpace: 'pre-wrap',
+    border: '1px solid #ccc',
+    borderRadius: '5px',
+    padding: '5px',
+    marginTop: '2px',
+    marginBottom: '8px',
+    height: '250px',
+    overflowY: 'auto'
+  },
+  bottomLeftButtonContainer: {
+    position: 'absolute',
+    bottom: '16px',
+    right: '16px'
+  },
+  dialogSurface: {
+    paddingBottom: '64px',
+    minHeight: '625px',
+    maxHeight: '90%',
+    minWidth: '50px',
+    maxWidth: '850px',
+    height: '650px',
+    width: '850px',
+    padding: '20px',
+    backgroundColor: tokens.colorNeutralBackground6
+  }
+})
+
+const AgentDialog: React.FC<AgentDialogProps> = ({
+  agentId,
+  handleCloseDialog,
+  selectedAgent,
+  showDialog,
+  setShowDialog,
+  mode,
+  updateAgentList
+}) => {
+  const [localAgent, setLocalAgent] = useState(selectedAgent)
+  const [localAgentId, setLocalAgentId] = useState(agentId)
+  const [nameInputError, setNameInputError] = useState('')
+  const [typeInputError, setTypeInputError] = useState('')
+  const [promptInputError, setPromptInputError] = useState('')
+  const [hasError, setHasError] = useState(true)
+  const [hasClientSideError, setHasClientSideError] = useState(false)
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [localMode, setLocalMode] = useState(mode)
+
+  const componentClasses = componentSyles()
+  const sharedClasses = sharedStyles()
+
+  useEffect(() => {
+    setHasError(!!nameInputError || !!typeInputError || !!promptInputError)
+    setHasClientSideError(!!nameInputError || !!typeInputError || !!promptInputError)
+  }, [nameInputError, typeInputError, promptInputError])
+
+  useEffect(() => {
+    if (showDialog) {
+      setLocalAgentId(agentId)
+      setLocalAgent(selectedAgent)
+    }
+  }, [showDialog, selectedAgent, agentId])
+
+  const dialogTitles: { [key: string]: string } = {
+    view: 'View Agent',
+    edit: 'Edit Agent',
+    duplicate: 'Duplicate Agent',
+    add: 'Add Agent'
+  }
+
+  const handleInputChange =
+    (field: 'name' | 'type' | 'guideline_prompt') =>
+      (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      if (localMode === 'view') {
+        setLocalMode ('edit')
+      }
+      const value = event.target.value
+      setLocalAgent((prev) => ({
+        ...prev,
+        [field]: value
+      }))
+
+      const error = hasErrorInInput(value, field === 'guideline_prompt' ? 5000 : 50)
+      if (field === 'name') setNameInputError(error)
+      if (field === 'type') setTypeInputError(error)
+      if (field === 'guideline_prompt') setPromptInputError(error)
+    }
+
+  const hasErrorInInput = (inputValue: string | undefined, limit: number) => {
+    if (!inputValue || !inputValue.trim()) {
+      console.log('inputValue:', inputValue)
+      return 'is required.'
+    }
+
+    if (inputValue.length > limit) {
+      return `cannot exceed ${limit} characters.`
+    }
+
+    const specialCharPattern = /[[],\\.!?:"'-()_$£]/
+
+    if (specialCharPattern.test(inputValue)) {
+      return 'cannot contain special characters.'
+    }
+
+    return ''
+  }
+
+  const callApi = async (
+    id: string,
+    agent: { name: string; guideline_prompt: string; type: string }
+  ) => {
+    if (localMode === 'add' || localMode === 'duplicate') {
+      return addAgent(agent)
+    } else {
+      return updateAgent(id, agent)
+    }
+  }
+
+  const handleSave = async () => {
+    setLoading(true)
+    setNameInputError(hasErrorInInput(localAgent.name, 50))
+    setTypeInputError(hasErrorInInput(localAgent.type, 50))
+    setPromptInputError(hasErrorInInput(localAgent.guideline_prompt, 5000))
+
+    if (
+      !hasClientSideError &&
+      !!localAgent.name &&
+      !!localAgent.type &&
+      !!localAgent.guideline_prompt
+    ) {
+      try {
+        const response = await callApi(localAgentId, localAgent)
+        if (response && updateAgentList) {
+          updateAgentList()
+          handleCloseDialog()
+          setLoading(false)
+          return
+        }
+        setError('Error while saving the agent.')
+      } catch (error) {
+        console.error('Failed to save agent:', error)
+        setError('Failed to save agent.')
+      }
+    } else {
+      setError('Data validaiton failed.')
+    }
+
+    setHasError(true)
+    setLoading(false)
+  }
+
+  const localHandleCloseDialog = () => {
+    if (!loading) {
+      handleCloseDialog()
+    }
+  }
+
+  function onErrorClose(): void {
+    setHasError(false)
+    setLoading(false)
+    setError('')
+  }
+
+  return (
+    <Dialog
+      open={showDialog}
+      onOpenChange={(_, data) => {
+        if (!loading) {
+          setShowDialog(data.open)
+        }
+      }}
+    >
+      <DialogSurface className={componentClasses.dialogSurface}>
+        <DialogBody>
+          <DialogTitle>
+            {dialogTitles[localMode] || 'Agent'}
+          </DialogTitle>
+          <Button
+            className={sharedClasses.closeButton}
+            icon={<DismissRegular />}
+            onClick={localHandleCloseDialog}
+            disabled={loading}
+          />
+          <DialogContent>
+            {hasError && error && (
+              <ErrorMessage title="Error!" message={error} onClose={onErrorClose} />
+            )}
+            <Divider className={sharedClasses.divider} />
+            <div className={sharedClasses.root}>
+              <Field required={localMode != 'view'} label="Name">
+                  <Input
+                    id="agent-name"
+                    required
+                    placeholder={PLACEHOLDER_AGENT_NAME}
+                    onChange={handleInputChange('name')}
+                    value={localAgent.name}
+                    disabled={loading}
+                  />
+                {nameInputError && <Field validationMessage={'Name ' + nameInputError}></Field>}
+              </Field>
+            </div>
+            <div className={sharedClasses.root}>
+              <Field required={localMode != 'view'} label="Type">
+                  <Input
+                    id="agent-type"
+                    placeholder={PLACEHOLDER_AGENT_TYPE}
+                    onChange={handleInputChange('type')}
+                    value={localAgent.type}
+                    disabled={loading}
+                  />
+                {typeInputError && <Field validationMessage={'Type ' + typeInputError}></Field>}
+              </Field>
+            </div>
+            <div className={sharedClasses.root}>
+              <Field required={localMode != 'view'} label="Prompt">
+                  <Textarea
+                    className={componentClasses.largeTextArea}
+                    id="agent-prompt"
+                    required
+                    placeholder={PLACEHOLDER_AGENT_GUIDELINE_PROMPT}
+                    onChange={handleInputChange('guideline_prompt')}
+                    value={localAgent.guideline_prompt}
+                    disabled={loading}
+                  />
+                {promptInputError && (
+                  <Field validationMessage={'Prompt ' + promptInputError}></Field>
+                )}
+              </Field>
+              <Tooltip content="Copy Prompt" relationship="label">
+                <Button
+                  icon={<CopyRegular />}
+                  onClick={() => navigator.clipboard.writeText(localAgent.guideline_prompt)}
+                />
+              </Tooltip>
+            </div>
+          </DialogContent>
+          <DialogActions className={componentClasses.bottomLeftButtonContainer}>
+            {localMode != 'view' && (
+              <Button
+                onClick={handleSave}
+                appearance="primary"
+                disabled={loading || hasClientSideError}
+                icon={loading ? <Spinner size="tiny" /> : <SaveRegular />}
+              >
+                {loading ? 'Saving...' : 'Apply'}
+              </Button>
+            )}
+          </DialogActions>
+        </DialogBody>
+      </DialogSurface>
+    </Dialog>
+  )
+}
+
+export default AgentDialog
diff --git a/app/ui/src/components/AgentList.tsx b/app/ui/src/components/AgentList.tsx
new file mode 100644
index 0000000..5cd227e
--- /dev/null
+++ b/app/ui/src/components/AgentList.tsx
@@ -0,0 +1,143 @@
+import { useState, useEffect } from 'react'
+import { SkeletonItem } from '@fluentui/react-components'
+import { getAgents, deleteAgent } from '../services/api'
+import AddCard from './AddCard'
+import AgentDialog from './AgentDialog'
+import ErrorMessage from './ErrorMessage'
+import CustomDialog from './CustomDialog'
+import AgentCard from './AgentCard'
+import { PromptAgent } from '../types/prompt-agent'
+import { sharedStyles } from '../styles/sharedStyles'
+
+function AgentList() {
+  const [agents, setAgents] = useState<PromptAgent[]>([])
+  const [showDialog, setShowDialog] = useState(false)
+  const [agentInFocus, setAgentInFocus] = useState<PromptAgent>({
+    id: '',
+    name: '',
+    guideline_prompt: '',
+    type: ''
+  })
+  const [agentLoadError, setAgentLoadError] = useState('')
+  const [mode, setMode] = useState<'view' | 'add' | 'edit' | 'duplicate'>('view')
+  const [agentToBeDeleted, setAgentToBeDeleted] = useState('')
+
+  const sharedClasses = sharedStyles()
+
+  async function fetchAgents() {
+    try {
+      const data = await getAgents()
+      if (data.length === 0) setAgentLoadError('No agents found.')
+      setAgents(data)
+    } catch {
+      setAgentLoadError('There was an issue retrieving agents.')
+    }
+  }
+
+  useEffect(() => {
+    fetchAgents()
+  }, [])
+
+  const updateAgentList = async () => {
+    await fetchAgents()
+  }
+
+  const handleDeleteConfirmation = async (id: string) => {
+    try {
+      await deleteAgent(id)
+      setAgents((prevAgents) => prevAgents.filter((agent) => agent.id !== id))
+      setAgentToBeDeleted('')
+    } catch (error) {
+      console.error('Error deleting agent:', error)
+    }
+  }
+
+  const handleCloseDialog = () => {
+    setAgentInFocus({ id: '', name: '', guideline_prompt: '', type: '' })
+    setShowDialog(false)
+  }
+
+  const handleAddNewAgent = () => {
+    setAgentInFocus({ id: '', name: '', guideline_prompt: '', type: '' })
+    setMode('add')
+    setShowDialog(true)
+  }
+
+  const handleViewAgent = (agent: PromptAgent) => {
+    setAgentInFocus(agent)
+    setMode('view')
+    setShowDialog(true)
+  }
+
+  const handleDeleteAgent = (id: string) => {
+    setAgentToBeDeleted(id)
+  }
+
+  const handleEditAgent = (id: string) => {
+    const agentToEdit = agents.find((a) => a.id === id)
+    if (agentToEdit) setAgentInFocus(agentToEdit)
+    setMode('edit')
+    setShowDialog(true)
+  }
+
+  const handleDuplicateAgent = (id: string) => {
+    const agentToDuplicate = agents.find((a) => a.id === id)
+    if (agentToDuplicate) {
+      const duplicatedAgent = { ...agentToDuplicate, name: `${agentToDuplicate.name} (copy)` }
+      setAgentInFocus(duplicatedAgent)
+      setMode('duplicate')
+      setShowDialog(true)
+    }
+  }
+
+  return (
+    <div>
+      <div className={sharedClasses.agentsContainer}>
+        {agentLoadError && (
+          <ErrorMessage
+            title="Error loading agents"
+            message={agentLoadError}
+            onClose={() => setAgentLoadError('')}
+          />
+        )}
+        <div className={sharedClasses.row}>
+          <AddCard onClick={handleAddNewAgent} labelText="Add new agent" />
+          {agents.length === 0
+            ? Array.from({ length: 2 }, (_, i) => <SkeletonItem key={i} className={sharedClasses.card} />)
+            : agents.map((agent) => (
+                <AgentCard
+                  key={agent.id}
+                  agent={agent}
+                  onViewAgent={handleViewAgent}
+                  onDeleteAgent={handleDeleteAgent}
+                  onEditAgent={handleEditAgent}
+                  onDuplicateAgent={handleDuplicateAgent}
+                />
+              ))}
+        </div>
+      </div>
+      {showDialog && (
+        <AgentDialog
+          agentId={agentInFocus.id}
+          handleCloseDialog={handleCloseDialog}
+          selectedAgent={agentInFocus}
+          showDialog={showDialog}
+          setShowDialog={setShowDialog}
+          mode={mode}
+          updateAgentList={updateAgentList}
+        />
+      )}
+      {agentToBeDeleted && (
+        <CustomDialog
+          isOpen={!!agentToBeDeleted}
+          title={`Delete Agent '${agents.find((a) => a.id === agentToBeDeleted)?.name}'`}
+          message="Are you sure you want to delete this agent?"
+          onConfirm={() => handleDeleteConfirmation(agentToBeDeleted)}
+          onCancel={() => setAgentToBeDeleted('')}
+        />
+      )}
+    </div>
+  )
+}
+
+export default AgentList
diff --git a/app/ui/src/components/CustomDialog.tsx b/app/ui/src/components/CustomDialog.tsx
new file mode 100644
index 0000000..5e278b6
--- /dev/null
+++ b/app/ui/src/components/CustomDialog.tsx
@@ -0,0 +1,77 @@
+import React, { useState } from 'react'
+import {
+  Dialog,
+  DialogSurface,
+  DialogTitle,
+  DialogBody,
+  DialogActions,
+  Button,
+  Spinner
+} from '@fluentui/react-components'
+
+interface CustomDialogProps {
+  isOpen: boolean
+  title: string
+  message: string
+  onConfirm: () => Promise<void>
+  onCancel: () => void
+}
+
+const CustomDialog: React.FC<CustomDialogProps> = ({
+  isOpen,
+  title,
+  message,
+  onConfirm,
+  onCancel
+}) => {
+  const [isLoading, setIsLoading] = useState(false)
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+
+  const handleConfirm = async () => {
+    setIsLoading(true)
+    setErrorMessage(null)
+    try {
+      await onConfirm()
+    } catch (error) {
+      console.error('Error during operation:', error)
+      setErrorMessage('An error occurred. Please try again.')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleCancel = () => {
+    setErrorMessage(null)
+    setIsLoading(false)
+    onCancel()
+  }
+
+  return (
+    <Dialog aria-labelledby="custom-dialog-title" open={isOpen}>
+      <DialogSurface>
+        <DialogBody>
+          <DialogTitle id="custom-dialog-title">{title}</DialogTitle>
+          <p>{message}</p>
+
+          {errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
+
+          <DialogActions>
+            <Button onClick={handleCancel} appearance="secondary" disabled={isLoading}>
+              Cancel
+            </Button>
+            <Button
+              onClick={handleConfirm}
+              appearance="primary"
+              disabled={isLoading}
+              icon={isLoading ? <Spinner size="tiny" /> : undefined}
+            >
+              {isLoading ? 'Processing...' : 'Confirm'}
+            </Button>
+          </DialogActions>
+        </DialogBody>
+      </DialogSurface>
+    </Dialog>
+  )
+}
+
+export default CustomDialog
diff --git a/app/ui/src/components/ErrorMessage.tsx b/app/ui/src/components/ErrorMessage.tsx
new file mode 100644
index 0000000..2a14d07
--- /dev/null
+++ b/app/ui/src/components/ErrorMessage.tsx
@@ -0,0 +1,47 @@
+import {
+  Button,
+  makeStyles,
+  MessageBar,
+  MessageBarBody,
+  MessageBarTitle
+} from '@fluentui/react-components'
+import { DismissRegular } from '@fluentui/react-icons'
+
+interface ErrorMessageProps {
+  title: string
+  message: string
+  onClose?: () => void
+}
+
+const componentSyles = makeStyles({
+  messageBar: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%'
+  }
+})
+
+const ErrorMessage = ({ title, message, onClose }: ErrorMessageProps) => {
+  const componentClasses = componentSyles()
+  return (
+    <MessageBar intent="error">
+      <div className={componentClasses.messageBar}>
+        <MessageBarBody style={{ flexGrow: 1 }}>
+          <MessageBarTitle>{title}</MessageBarTitle>
+          {message}
+        </MessageBarBody>
+        {onClose && (
+          <Button
+            icon={<DismissRegular />}
+            onClick={onClose}
+            appearance="subtle"
+            style={{ marginLeft: '1rem' }}
+          />
+        )}
+      </div>
+    </MessageBar>
+  )
+}
+
+export default ErrorMessage
diff --git a/app/ui/src/components/IssueCard.tsx b/app/ui/src/components/IssueCard.tsx
index cfed759..3678e9e 100644
--- a/app/ui/src/components/IssueCard.tsx
+++ b/app/ui/src/components/IssueCard.tsx
@@ -1,22 +1,45 @@
-import { Badge, Button, Caption1Strong, Card, CardFooter, CardHeader, Field, makeStyles, mergeClasses, MessageBar, MessageBarBody, MessageBarTitle, Spinner, Textarea, tokens } from "@fluentui/react-components";
-import { Checkmark16Regular, CheckmarkCircle20Filled, Circle20Filled, Dismiss16Regular, DismissCircle20Filled, PersonFeedback20Filled } from "@fluentui/react-icons";
-import { useState } from "react";
-import { callApi } from "../services/api";
-import { DismissalFeedback, Issue, IssueStatus, ModifiedFields } from "../types/issue";
+import {
+  Badge,
+  Button,
+  Caption1Strong,
+  Card,
+  CardFooter,
+  CardHeader,
+  Field,
+  makeStyles,
+  mergeClasses,
+  MessageBar,
+  MessageBarBody,
+  MessageBarTitle,
+  Spinner,
+  Textarea,
+  tokens
+} from '@fluentui/react-components'
+import {
+  Checkmark16Regular,
+  CheckmarkCircle20Filled,
+  Circle20Filled,
+  Dismiss16Regular,
+  DismissCircle20Filled,
+  PersonFeedback20Filled
+} from '@fluentui/react-icons'
+import { useState } from 'react'
+import { callApi } from '../services/api'
+import { DismissalFeedback, Issue, IssueStatus, ModifiedFields } from '../types/issue'
 
 type IssueCardProps = {
-  docId: string;
-  issue: Issue;
-  selected: boolean;
-  onSelect: (issue: Issue) => void;
-  onUpdate: (updatedIssue: Issue) => void;
-};
+  docId: string
+  issue: Issue
+  selected: boolean
+  onSelect: (issue: Issue) => void
+  onUpdate: (updatedIssue: Issue) => void
+}
 
 const useStyles = makeStyles({
   card: { margin: '5px' },
   explanation: { marginTop: '10px' },
   accepted: {
-    backgroundColor: tokens.colorPaletteGreenBackground1,
+    backgroundColor: tokens.colorPaletteGreenBackground1
   },
   dismissed: {
     backgroundColor: tokens.colorNeutralBackground2
@@ -24,33 +47,33 @@ const useStyles = makeStyles({
   header: { height: '40px', textOverflow: 'ellipsis' },
   footer: { paddingTop: '10px' },
   feedback: {
-    backgroundColor: tokens.colorPaletteYellowBackground2,
-  },
-});
+    backgroundColor: tokens.colorPaletteYellowBackground2
+  }
+})
 
 export function IssueCard({ docId, issue, selected, onSelect, onUpdate }: IssueCardProps) {
-  const classes = useStyles();
+  const classes = useStyles()
 
   function getCardClassName() {
     switch (issue.status) {
       case IssueStatus.Accepted:
-        return mergeClasses(classes.card, classes.accepted);
+        return mergeClasses(classes.card, classes.accepted)
       case IssueStatus.Dismissed:
-        return mergeClasses(classes.card, classes.dismissed);
+        return mergeClasses(classes.card, classes.dismissed)
       default:
-        return classes.card;
+        return classes.card
     }
   }
 
-  const [accepting, setAccepting] = useState<boolean>(false);
-  const [dismissing, setDismissing] = useState<boolean>(false);
-  const [submittingFeedback, setSubmittingFeedback] = useState<boolean>(false);
-  const [addFeedback, setAddFeedback] = useState<boolean>(false);
-  const [modifiedExplanation, setModifiedExplanation] = useState<string>();
-  const [modifiedSuggestedFix, setModifiedSuggestedFix] = useState<string>();
-  const [feedback, setFeedback] = useState<DismissalFeedback>();
-  const [feedbackSubmitted, setFeedbackSubmitted] = useState<boolean>(false);
-  const [error, setError] = useState<string>();
+  const [accepting, setAccepting] = useState<boolean>(false)
+  const [dismissing, setDismissing] = useState<boolean>(false)
+  const [submittingFeedback, setSubmittingFeedback] = useState<boolean>(false)
+  const [addFeedback, setAddFeedback] = useState<boolean>(false)
+  const [modifiedExplanation, setModifiedExplanation] = useState<string>()
+  const [modifiedSuggestedFix, setModifiedSuggestedFix] = useState<string>()
+  const [feedback, setFeedback] = useState<DismissalFeedback>()
+  const [feedbackSubmitted, setFeedbackSubmitted] = useState<boolean>(false)
+  const [error, setError] = useState<string>()
 
   /**
    * Accepts an issue and posts any modified fields.
@@ -59,14 +82,14 @@ export function IssueCard({ docId, issue, selected, onSelect, onUpdate }: IssueC
     // Check if fields have been modified
     const modifiedFields: ModifiedFields = {}
     if (modifiedExplanation) {
-      modifiedFields.explanation = modifiedExplanation;
+      modifiedFields.explanation = modifiedExplanation
     }
     if (modifiedSuggestedFix) {
-      modifiedFields.suggested_fix = modifiedSuggestedFix;
+      modifiedFields.suggested_fix = modifiedSuggestedFix
     }
 
     try {
-      setAccepting(true);
+      setAccepting(true)
       // Send the request
       const response = await callApi(
         `${docId}/issues/${issue.id}/accept`,
@@ -74,18 +97,18 @@ export function IssueCard({ docId, issue, selected, onSelect, onUpdate }: IssueC
         Object.keys(modifiedFields).length ? modifiedFields : undefined
       )
       // Update issue state
-      const updatedIssue = (await response.json()) as Issue;
+      const updatedIssue = (await response.json()) as Issue
       if (onUpdate) {
-        onUpdate(updatedIssue);
+        onUpdate(updatedIssue)
       }
     } catch (err) {
       if (err instanceof Error) {
-        setError(err.message);
+        setError(err.message)
       } else {
-        setError(String(err));
+        setError(String(err))
       }
     } finally {
-      setAccepting(false);
+      setAccepting(false)
     }
   }
 
@@ -94,21 +117,21 @@ export function IssueCard({ docId, issue, selected, onSelect, onUpdate }: IssueC
    */
   async function handleDismiss() {
     try {
-      setDismissing(true);
-      const response = await callApi(`${docId}/issues/${issue.id}/dismiss`, 'PATCH');
-      const updatedIssue = (await response.json()) as Issue;
+      setDismissing(true)
+      const response = await callApi(`${docId}/issues/${issue.id}/dismiss`, 'PATCH')
+      const updatedIssue = (await response.json()) as Issue
       if (onUpdate) {
-        onUpdate(updatedIssue);
+        onUpdate(updatedIssue)
       }
-      setAddFeedback(true);
+      setAddFeedback(true)
     } catch (err) {
       if (err instanceof Error) {
-        setError(err.message);
+        setError(err.message)
       } else {
-        setError(String(err));
+        setError(String(err))
       }
     } finally {
-      setDismissing(false);
+      setDismissing(false)
     }
   }
 
@@ -117,106 +140,120 @@ export function IssueCard({ docId, issue, selected, onSelect, onUpdate }: IssueC
    */
   async function handleSubmitFeedback() {
     try {
-      setSubmittingFeedback(true);
-      await callApi(`${docId}/issues/${issue.id}/feedback`, 'PATCH', feedback);
-      setFeedbackSubmitted(true);
-      setAddFeedback(false);
+      setSubmittingFeedback(true)
+      await callApi(`${docId}/issues/${issue.id}/feedback`, 'PATCH', feedback)
+      setFeedbackSubmitted(true)
+      setAddFeedback(false)
     } catch (err) {
       if (err instanceof Error) {
-        setError(err.message);
+        setError(err.message)
       } else {
-        setError(String(err));
+        setError(String(err))
       }
     } finally {
-      setSubmittingFeedback(false);
+      setSubmittingFeedback(false)
     }
   }
 
   return (
-    <Card className={getCardClassName()} selected={selected} onSelectionChange={() => onSelect(issue)} color={tokens.colorNeutralForeground2}>
-        <CardHeader
-          className={classes.header}
-          image={
-            issue.status === IssueStatus.Accepted
-              ? <CheckmarkCircle20Filled primaryFill={tokens.colorPaletteLightGreenForeground1} />
-              : issue.status === IssueStatus.Dismissed
-                ? <DismissCircle20Filled primaryFill={tokens.colorNeutralForeground2} />
-                : <Circle20Filled primaryFill={tokens.colorNeutralBackground4} />
-          }
-          header={
-            <Caption1Strong strikethrough={issue.status === IssueStatus.Dismissed}>{ issue.text }</Caption1Strong>
-          }
-        />
+    <Card
+      className={getCardClassName()}
+      selected={selected}
+      onSelectionChange={() => onSelect(issue)}
+      color={tokens.colorNeutralForeground2}
+    >
+      <CardHeader
+        className={classes.header}
+        image={
+          issue.status === IssueStatus.Accepted ? (
+            <CheckmarkCircle20Filled primaryFill={tokens.colorPaletteLightGreenForeground1} />
+          ) : issue.status === IssueStatus.Dismissed ? (
+            <DismissCircle20Filled primaryFill={tokens.colorNeutralForeground2} />
+          ) : (
+            <Circle20Filled primaryFill={tokens.colorNeutralBackground4} />
+          )
+        }
+        header={
+          <Caption1Strong strikethrough={issue.status === IssueStatus.Dismissed}>
+            {issue.text}
+          </Caption1Strong>
+        }
+      />
 
-        <Badge appearance="tint" color="informative" shape="rounded">
-          { issue.type }
-        </Badge>
+      <Badge appearance="tint" color="informative" shape="rounded">
+        {issue.type}
+      </Badge>
 
-      {
-        selected && <>
+      {selected && (
+        <>
           <Field label="Explanation" className={classes.explanation}>
             <Textarea
-              defaultValue={issue.modified_fields?.explanation ? issue.modified_fields.explanation : issue.explanation}
+              defaultValue={
+                issue.modified_fields?.explanation
+                  ? issue.modified_fields.explanation
+                  : issue.explanation
+              }
               readOnly={issue.status !== IssueStatus.NotReviewed}
               value={modifiedExplanation}
-              onChange={e => setModifiedExplanation(e.target.value)}
+              onChange={(e) => setModifiedExplanation(e.target.value)}
               required
               rows={4}
             />
           </Field>
           <Field label="Suggested fix">
             <Textarea
-              defaultValue={issue.modified_fields?.suggested_fix ? issue.modified_fields?.suggested_fix : issue.suggested_fix}
+              defaultValue={
+                issue.modified_fields?.suggested_fix
+                  ? issue.modified_fields?.suggested_fix
+                  : issue.suggested_fix
+              }
               readOnly={issue.status !== IssueStatus.NotReviewed}
               value={modifiedSuggestedFix}
-              onChange={e => setModifiedSuggestedFix(e.target.value)}
+              onChange={(e) => setModifiedSuggestedFix(e.target.value)}
               required
-              rows={4} 
+              rows={4}
             />
           </Field>
-          {
-            error && <MessageBar intent="error">
+          {error && (
+            <MessageBar intent="error">
               <MessageBarBody>
                 <MessageBarTitle>Error</MessageBarTitle>
-                { error }
+                {error}
               </MessageBarBody>
             </MessageBar>
-          }
-          { 
-            issue.status === IssueStatus.NotReviewed && <CardFooter className={classes.footer}>
+          )}
+          {issue.status === IssueStatus.NotReviewed && (
+            <CardFooter className={classes.footer}>
               <Button
                 appearance="primary"
                 disabledFocusable={accepting}
-                icon={
-                  accepting ? (
-                    <Spinner size="tiny" />
-                  ) : <Checkmark16Regular />
-                }
+                icon={accepting ? <Spinner size="tiny" /> : <Checkmark16Regular />}
                 onClick={handleAccept}
               >
                 Accept
               </Button>
               <Button
                 disabledFocusable={dismissing}
-                icon={
-                  dismissing ? (
-                    <Spinner size="tiny" />
-                  ) : <Dismiss16Regular />
-                }
+                icon={dismissing ? <Spinner size="tiny" /> : <Dismiss16Regular />}
                 onClick={handleDismiss}
               >
                 Dismiss
               </Button>
             </CardFooter>
-          }
-          {
-            addFeedback && <Card appearance="outline" className={classes.feedback}>
-              <CardHeader image={<PersonFeedback20Filled primaryFill={tokens.colorPaletteDarkOrangeForeground1} />} header="Help us improve" />
+          )}
+          {addFeedback && (
+            <Card appearance="outline" className={classes.feedback}>
+              <CardHeader
+                image={
+                  <PersonFeedback20Filled primaryFill={tokens.colorPaletteDarkOrangeForeground1} />
+                }
+                header="Help us improve"
+              />
               <Field>
                 <Textarea
                   value={feedback?.reason}
                   placeholder="Please explain why this suggestion was wrong & how it can be improved."
-                  onChange={e => setFeedback({...feedback, reason: e.target.value})}
+                  onChange={(e) => setFeedback({ ...feedback, reason: e.target.value })}
                   required
                   rows={4}
                 />
@@ -227,27 +264,23 @@ export function IssueCard({ docId, issue, selected, onSelect, onUpdate }: IssueC
                   disabled={!feedback}
                   onClick={handleSubmitFeedback}
                   disabledFocusable={submittingFeedback}
-                  icon={
-                    submittingFeedback ? (
-                      <Spinner size="tiny" />
-                    ) : undefined
-                  }
+                  icon={submittingFeedback ? <Spinner size="tiny" /> : undefined}
                 >
                   Submit
                 </Button>
               </CardFooter>
             </Card>
-          }
-          {
-            feedbackSubmitted && <MessageBar intent="success">
+          )}
+          {feedbackSubmitted && (
+            <MessageBar intent="success">
               <MessageBarBody>
                 <MessageBarTitle>Feedback submitted</MessageBarTitle>
                 Thanks for helping improve AI Document Review!
               </MessageBarBody>
             </MessageBar>
-          }
+          )}
         </>
-      }
+      )}
     </Card>
   )
 }
diff --git a/app/ui/src/components/PageHeader.tsx b/app/ui/src/components/PageHeader.tsx
index 296d035..e51c5ad 100644
--- a/app/ui/src/components/PageHeader.tsx
+++ b/app/ui/src/components/PageHeader.tsx
@@ -1,29 +1,45 @@
-import React from "react";
-import aiDocIcon from '../assets/ai-doc.png';
-import useStyles from "../styles/useStyles";
+import React from 'react'
+import aiDocIcon from '../assets/ai-doc.png'
+import { sharedStyles } from '../styles/sharedStyles'
+import { makeStyles } from '@fluentui/react-components'
 
 
 interface PageHeaderProps {
-  title: string;
-  description: string;
+  title: string
+  description: string
+  customElement?: React.ReactNode
 }
 
-const PageHeader: React.FC<PageHeaderProps> = ({ title, description }) => {
-  const classes = useStyles();
+const componentStyles = makeStyles({
+  headerContent: {
+    margin: '16px',
+    color: '#000',
+    maxWidth: '800px',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})
+
+const PageHeader: React.FC<PageHeaderProps> = ({ title, description, customElement }) => {
+  const sharedClasses = sharedStyles()
+  const componentClasses = componentStyles()
 
   return (
-    <div className={classes.container}>
-      <div className={classes.headerContent}>
-        <div className={classes.heroImage}>
+    <div className={sharedClasses.container}>
+      <div className={componentClasses.headerContent}>
+        <div className={sharedClasses.heroImage}>
           <img src={aiDocIcon} alt="AI Document Review Icon" width="150" />
         </div>
         <div>
           <h2>{title}</h2>
           <p>{description}</p>
+          {customElement && <div>{customElement}</div>}
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default PageHeader;
+export default PageHeader
diff --git a/app/ui/src/constants.ts b/app/ui/src/constants.ts
new file mode 100644
index 0000000..91ee5cb
--- /dev/null
+++ b/app/ui/src/constants.ts
@@ -0,0 +1,7 @@
+export const DOCUMENTATION_URL = "https://github.com/Azure-Samples/ai-document-review";
+export const PLACEHOLDER_AGENT_NAME = "e.g. Version 1";
+export const PLACEHOLDER_AGENT_TYPE = "e.g. Legal Review";
+export const PLACEHOLDER_AGENT_GUIDELINE_PROMPT = `e.g.
+
+You are an AI agent that reviews documents from a Legal perspective. 
+Please review the document and provide feedback...`;
diff --git a/app/ui/src/pages/admin/AgentManager.tsx b/app/ui/src/pages/admin/AgentManager.tsx
new file mode 100644
index 0000000..a8d0377
--- /dev/null
+++ b/app/ui/src/pages/admin/AgentManager.tsx
@@ -0,0 +1,28 @@
+import { Divider } from '@fluentui/react-components';
+import PageHeader from '../../components/PageHeader';
+import AgentList from '../../components/AgentList';
+import { sharedStyles } from '../../styles/sharedStyles';
+
+
+function AgentManager() {
+  const sharedClasses = sharedStyles();
+
+  return (
+    <div className={sharedClasses.container}>
+      {/* Header Section */}
+      <PageHeader
+        title="Manage Agents"
+        description="View and update the AI doc review agents by updating existing agent prompts or by adding
+            new ones to enhance your document analysis."
+      />
+      <Divider className={sharedClasses.divider} />
+
+      {/* Agents List and Add Agent */}
+      <div className={sharedClasses.agentsContainer}>
+        <AgentList/>
+      </div>
+    </div>
+  );
+}
+
+export default AgentManager;
diff --git a/app/ui/src/pages/admin/Agents.tsx b/app/ui/src/pages/admin/Agents.tsx
deleted file mode 100644
index d9b7b9b..0000000
--- a/app/ui/src/pages/admin/Agents.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Divider } from '@fluentui/react-components'
-import PageHeader from '../../components/PageHeader'
-import useStyles from '../../styles/useStyles'
-
-function Agents() {
-  const classes = useStyles()
-
-  return (
-    <div className={classes.container}>
-      <PageHeader
-        title="Manage Agents"
-        description="View and update the AI doc review agents by updating existing agent prompts or by adding
-            new ones to enhance your document analysis."
-      />
-      <Divider className={classes.divider} />
-    </div>
-  )
-}
-
-export default Agents
diff --git a/app/ui/src/pages/admin/Settings.tsx b/app/ui/src/pages/admin/SettingManager.tsx
similarity index 68%
rename from app/ui/src/pages/admin/Settings.tsx
rename to app/ui/src/pages/admin/SettingManager.tsx
index 8750603..224389c 100644
--- a/app/ui/src/pages/admin/Settings.tsx
+++ b/app/ui/src/pages/admin/SettingManager.tsx
@@ -1,18 +1,19 @@
 import { Divider } from '@fluentui/react-components'
 import PageHeader from '../../components/PageHeader'
-import useStyles from '../../styles/useStyles'
+import { sharedStyles } from '../../styles/sharedStyles'
+
 
 function Settings() {
-  const classes = useStyles()
+  const sharedClasses = sharedStyles()
 
   return (
-    <div className={classes.container}>
+    <div className={sharedClasses.container}>
       <PageHeader
         title="Manage Settings"
         description="View and update the AI doc review agent configurations by updating existing settings or by adding
             new ones to enhance your document analysis."
       />
-      <Divider className={classes.divider} />
+      <Divider className={sharedClasses.divider} />
     </div>
   )
 }
diff --git a/app/ui/src/pages/files/Files.tsx b/app/ui/src/pages/files/Files.tsx
index 0343fa9..288fd7f 100644
--- a/app/ui/src/pages/files/Files.tsx
+++ b/app/ui/src/pages/files/Files.tsx
@@ -6,6 +6,8 @@ import { useNavigate } from 'react-router-dom';
 import pdfIcon from '../../assets/pdf.svg';
 import { listBlobs, uploadBlob } from '../../services/storage';
 import PageHeader from '../../components/PageHeader';
+import { DOCUMENTATION_URL } from '../../constants';
+import ErrorMessage from '../../components/ErrorMessage';
 
 const flex = {
   gap: "16px",
@@ -106,16 +108,13 @@ function Files() {
         <PageHeader
           title="Welcome to the AI Document Review accelerator"
           description="Upload a new document to get started, or select an existing document to pick up where you left off."
-        />
+          customElement={<Button size="large" onClick={() => window.open(DOCUMENTATION_URL, "_blank")}>View documentation</Button>}
+      />
       <Divider className={classes.divider}/>
       <div className={classes.filesContainer}>
         { 
-          blobError && <MessageBar intent="error">
-            <MessageBarBody>
-              <MessageBarTitle>Error loading files</MessageBarTitle>
-              { blobError }
-            </MessageBarBody>
-          </MessageBar>
+          blobError &&
+          <ErrorMessage title="Error loading files" message={blobError} />
         }
         <div className={classes.row}>
           <input
diff --git a/app/ui/src/pages/review/Review.tsx b/app/ui/src/pages/review/Review.tsx
index da5f4d1..e04feec 100644
--- a/app/ui/src/pages/review/Review.tsx
+++ b/app/ui/src/pages/review/Review.tsx
@@ -12,6 +12,7 @@ import { getBlob } from '../../services/storage';
 import { AgentConfig } from '../../types/agent-config';
 import { APIEvent } from '../../types/api-events';
 import { Issue, IssueStatus } from '../../types/issue';
+import ErrorMessage from '../../components/ErrorMessage';
 
 // https://github.com/wojtekmaj/react-pdf?tab=readme-ov-file#configure-pdfjs-worker
 pdfjs.GlobalWorkerOptions.workerSrc = new URL(
@@ -335,12 +336,8 @@ function Review() {
       </div>
       <Card className={classes.sidebar}>
         {
-          checkError && <MessageBar intent="error" className={classes.errorMsg}>
-            <MessageBarBody>
-              <MessageBarTitle>Error running check</MessageBarTitle>
-                { checkError }
-            </MessageBarBody>
-          </MessageBar>
+          checkError && 
+          <ErrorMessage title="Error running check" message={checkError} />
         }
         {
           docId && <Button
diff --git a/app/ui/src/services/api.ts b/app/ui/src/services/api.ts
index eedac24..8dffe56 100644
--- a/app/ui/src/services/api.ts
+++ b/app/ui/src/services/api.ts
@@ -4,7 +4,8 @@ import { accessTokenRequest } from '../authConfig'
 import { msalInstance } from '../main'
 import { FatalError, RetriableError } from '../types/error'
 
-const apiBaseUrl = '/api/v1/review/'
+const apiBaseUrl = '/api/v1/'
+const agentsPath = 'admin/agents/'
 const unknownError = 'an unknown error occurred. Please try again.'
 
 class AbortedError extends Error {}
@@ -138,3 +139,62 @@ export async function streamApi(
 
   startStream()
 }
+
+export async function getAgents() {
+  try {
+    const response = await callApi(agentsPath);
+    if (!response.ok) {
+      const errorData = await response.json();
+      throw new Error(errorData.detail || 'Failed to fetch agents.');
+    }
+    return response.json();
+  } catch (error) {
+    console.error('Error fetching agents:', error);
+    throw error;
+  }
+}
+
+export async function addAgent(agent: { name: string; guideline_prompt: string; type: string; }) {
+  try {
+    const response = await callApi(agentsPath, 'POST', agent);
+    if (response.status === 201) {
+      return response.json();
+    }
+    const errorData = await response.json();
+    throw new Error(errorData.detail?.description || 'Failed to add agent.');
+  } catch (error) {
+    console.error('Error adding agent:', error);
+    throw error;
+  }
+}
+
+export async function updateAgent(
+  agentId: string,
+  agent: { name: string; guideline_prompt: string; type: string; }
+) {
+  try {
+    const response = await callApi(`${agentsPath}/${agentId}`, 'PATCH', agent);
+    if (response.ok) {
+      return response.json();
+    }
+    const errorData = await response.json();
+    throw new Error(errorData.detail?.description || 'Failed to update agent.');
+  } catch (error) {
+    console.error('Error updating agent:', error);
+    throw error;
+  }
+}
+
+export async function deleteAgent(id: string) {
+  try {
+    const response = await callApi(`${agentsPath}/${id}`, 'DELETE');
+    if (response.status === 204) {
+      return { message: 'Agent deleted successfully' };
+    }
+    const errorData = await response.json();
+    throw new Error(errorData.detail || 'Failed to delete agent.');
+  } catch (error) {
+    console.error('Error deleting agent:', error);
+    throw error;
+  }
+}
diff --git a/app/ui/src/styles/sharedStyles.ts b/app/ui/src/styles/sharedStyles.ts
new file mode 100644
index 0000000..c0191d6
--- /dev/null
+++ b/app/ui/src/styles/sharedStyles.ts
@@ -0,0 +1,66 @@
+import { makeStyles, tokens } from "@fluentui/react-components";
+
+
+const flex = {
+    gap: '16px',
+    display: 'flex'
+}
+
+export const sharedStyles = makeStyles({
+    row: {
+        ...flex,
+        flexWrap: 'wrap'
+    },
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '2px',
+        maxWidth: '400px',
+        marginTop: '16px'
+    },
+    card: {
+        width: '200px',
+        maxWidth: '100%',
+        height: '260px'
+    },
+    selected: {
+        backgroundColor: tokens.colorNeutralBackground5,
+        color: tokens.colorNeutralForeground1,
+    },
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '16px',
+        width: '100vw',
+    },
+    agentsContainer: {
+        ...flex,
+        flexDirection: 'column',
+        maxWidth: '665px',
+        margin: '16px',
+        color: '#000'
+    },
+    divider: {
+        paddingTop: '10px',
+        paddingBottom: '10px',
+        maxWidth: '800px',
+    },
+    closeButton: {
+        position: 'absolute',
+        top: '10px',
+        right: '10px',
+        background: 'transparent',
+        border: 'none',
+        padding: '5px',
+        cursor: 'pointer'
+    },
+    heroImage: {
+        margin: '16px',
+        padding: '16px',
+    },
+    caption: {
+        color: tokens.colorNeutralForeground3
+    },
+});
\ No newline at end of file
diff --git a/app/ui/src/styles/useStyles.ts b/app/ui/src/styles/useStyles.ts
deleted file mode 100644
index 16238f8..0000000
--- a/app/ui/src/styles/useStyles.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { makeStyles, tokens } from "@fluentui/react-components";
-
-// Define common styles
-const useStyles = makeStyles({
-  selected: {
-    backgroundColor: tokens.colorNeutralBackground5,
-    color: tokens.colorNeutralForeground1,
-  },
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: '16px',
-    width: '100vw',
-  },
-  divider: {
-    paddingTop: '10px',
-    paddingBottom: '10px',
-    maxWidth: '800px',
-  },
-  heroImage: {
-    margin: '16px',
-    padding: '16px',
-  },
-  headerContent: {
-    margin: '16px',
-    color: '#000',
-    maxWidth: '800px',
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export default useStyles;
diff --git a/app/ui/src/types/prompt-agent.ts b/app/ui/src/types/prompt-agent.ts
new file mode 100644
index 0000000..9cfb1bc
--- /dev/null
+++ b/app/ui/src/types/prompt-agent.ts
@@ -0,0 +1,9 @@
+  export interface PromptAgent {
+    id: string
+    name: string
+    guideline_prompt: string
+    type: string
+    created_at_UTC?: string
+    updated_at_UTC?: string
+  }
+  
\ No newline at end of file