diff --git a/README.md b/README.md
index a35824aac..51dd7f729 100644
--- a/README.md
+++ b/README.md
@@ -110,22 +110,22 @@ Dagu is a powerful Cron alternative that comes with a Web UI. It allows you to d
 
   You can switch to the vertical graph with the button on the top right corner.
 
-  ![Details-TD](assets/images/ui-details2.png?raw=true)
+  ![Details-TD](assets/images/ui-details2.webp?raw=true)
 
 - **DAGs**: It shows all DAGs and the real-time status.
 
-  ![DAGs](assets/images/ui-dags.png?raw=true)
+  ![DAGs](assets/images/ui-dags.webp?raw=true)
 
 - **Search DAGs**: It greps given text across all DAGs.
-  ![History](assets/images/ui-search.png?raw=true)
+  ![History](assets/images/ui-search.webp?raw=true)
 
 - **Execution History**: It shows past execution results and logs.
 
-  ![History](assets/images/ui-history.png?raw=true)
+  ![History](assets/images/ui-history.webp?raw=true)
 
 - **DAG Execution Log**: It shows the detail log and standard output of each execution and step.
 
-  ![DAG Log](assets/images/ui-logoutput.png?raw=true)
+  ![DAG Log](assets/images/ui-logoutput.webp?raw=true)
 
 ## **Installation**
 
@@ -230,7 +230,7 @@ You can execute the example by pressing the `Start` button. You can see "Hello D
 
 This example workflow showcases a data pipeline typically implemented in DevOps and Data Engineering scenarios. It demonstrates an end-to-end data processing cycle starting from data acquisition and cleansing to transformation, loading, analysis, reporting, and ultimately, cleanup.
 
-![Details-TD](assets/images/example.png?raw=true)
+![Details-TD](assets/images/example.webp?raw=true)
 
 The YAML code below represents this workflow:
 
diff --git a/assets/images/demo.gif b/assets/images/demo.gif
index 79be012b3..d63790600 100644
Binary files a/assets/images/demo.gif and b/assets/images/demo.gif differ
diff --git a/assets/images/example.png b/assets/images/example.png
index 2e3e6b420..0cb1b4ef4 100644
Binary files a/assets/images/example.png and b/assets/images/example.png differ
diff --git a/assets/images/example.webp b/assets/images/example.webp
new file mode 100644
index 000000000..b3ddb30df
Binary files /dev/null and b/assets/images/example.webp differ
diff --git a/assets/images/ui-dags.png b/assets/images/ui-dags.png
deleted file mode 100644
index 5abd12fa7..000000000
Binary files a/assets/images/ui-dags.png and /dev/null differ
diff --git a/assets/images/ui-dags.webp b/assets/images/ui-dags.webp
new file mode 100644
index 000000000..3d7b0fced
Binary files /dev/null and b/assets/images/ui-dags.webp differ
diff --git a/assets/images/ui-dashboard.png b/assets/images/ui-dashboard.png
deleted file mode 100644
index d032cd8fe..000000000
Binary files a/assets/images/ui-dashboard.png and /dev/null differ
diff --git a/assets/images/ui-dashboard.webp b/assets/images/ui-dashboard.webp
new file mode 100644
index 000000000..8464fa38c
Binary files /dev/null and b/assets/images/ui-dashboard.webp differ
diff --git a/assets/images/ui-details.png b/assets/images/ui-details.png
deleted file mode 100644
index edc1a9ad2..000000000
Binary files a/assets/images/ui-details.png and /dev/null differ
diff --git a/assets/images/ui-details.webp b/assets/images/ui-details.webp
new file mode 100644
index 000000000..52d9cd0b8
Binary files /dev/null and b/assets/images/ui-details.webp differ
diff --git a/assets/images/ui-details2.png b/assets/images/ui-details2.png
deleted file mode 100644
index 262488324..000000000
Binary files a/assets/images/ui-details2.png and /dev/null differ
diff --git a/assets/images/ui-details2.webp b/assets/images/ui-details2.webp
new file mode 100644
index 000000000..83e3833f9
Binary files /dev/null and b/assets/images/ui-details2.webp differ
diff --git a/assets/images/ui-history.png b/assets/images/ui-history.png
deleted file mode 100644
index 059461b31..000000000
Binary files a/assets/images/ui-history.png and /dev/null differ
diff --git a/assets/images/ui-history.webp b/assets/images/ui-history.webp
new file mode 100644
index 000000000..07cc4fedc
Binary files /dev/null and b/assets/images/ui-history.webp differ
diff --git a/assets/images/ui-logoutput.png b/assets/images/ui-logoutput.png
deleted file mode 100644
index d2b16c331..000000000
Binary files a/assets/images/ui-logoutput.png and /dev/null differ
diff --git a/assets/images/ui-logoutput.webp b/assets/images/ui-logoutput.webp
new file mode 100644
index 000000000..18de214f6
Binary files /dev/null and b/assets/images/ui-logoutput.webp differ
diff --git a/assets/images/ui-params.png b/assets/images/ui-params.png
deleted file mode 100644
index d8c8d337d..000000000
Binary files a/assets/images/ui-params.png and /dev/null differ
diff --git a/assets/images/ui-params.webp b/assets/images/ui-params.webp
new file mode 100644
index 000000000..1ba7db3fb
Binary files /dev/null and b/assets/images/ui-params.webp differ
diff --git a/assets/images/ui-search.png b/assets/images/ui-search.png
deleted file mode 100644
index 476a9da4e..000000000
Binary files a/assets/images/ui-search.png and /dev/null differ
diff --git a/assets/images/ui-search.webp b/assets/images/ui-search.webp
new file mode 100644
index 000000000..695940e76
Binary files /dev/null and b/assets/images/ui-search.webp differ
diff --git a/docs/source/web_interface.rst b/docs/source/web_interface.rst
index c0049cbdf..0a65f43a0 100644
--- a/docs/source/web_interface.rst
+++ b/docs/source/web_interface.rst
@@ -9,7 +9,7 @@ DAG List
 
 It shows all DAGs and the real-time status.
 
-.. image:: https://raw.githubusercontent.com/yohamta/dagu/main/assets/images/ui-dags.png
+.. image:: https://raw.githubusercontent.com/yohamta/dagu/main/assets/images/ui-dags.webp
    :alt: DAGs
    :align: center
 
@@ -17,13 +17,13 @@ DAG Details
 ------------
 It shows the real-time status, logs, and DAG configurations. You can edit DAG configurations on a browser.
 
-.. image:: https://raw.githubusercontent.com/yohamta/dagu/main/assets/images/ui-details.png
+.. image:: https://raw.githubusercontent.com/yohamta/dagu/main/assets/images/ui-details.webp
    :alt: DAG Details
    :align: center
 
 You can switch to the vertical graph with the button on the top right corner.
 
-.. image:: https://raw.githubusercontent.com/yohamta/dagu/main/assets/images/ui-details2.png
+.. image:: https://raw.githubusercontent.com/yohamta/dagu/main/assets/images/ui-details2.webp
    :alt: DAG Details (TD)
    :align: center
 
@@ -32,7 +32,7 @@ DAG Search
 
 It searches given text across all DAGs.
 
-.. image:: https://raw.githubusercontent.com/yohamta/dagu/main/assets/images/ui-search.png
+.. image:: https://raw.githubusercontent.com/yohamta/dagu/main/assets/images/ui-search.webp
    :alt: Search DAGs
    :align: center
 
@@ -41,7 +41,7 @@ Execution History
 
 It shows past execution results and logs.
 
-.. image:: https://raw.githubusercontent.com/yohamta/dagu/main/assets/images/ui-history.png
+.. image:: https://raw.githubusercontent.com/yohamta/dagu/main/assets/images/ui-history.webp
    :alt: Execution History
    :align: center
 
@@ -50,6 +50,6 @@ DAG Execution Log
 
 It shows the detail log and standard output of each execution and step.
 
-.. image:: https://raw.githubusercontent.com/yohamta/dagu/main/assets/images/ui-logoutput.png
+.. image:: https://raw.githubusercontent.com/yohamta/dagu/main/assets/images/ui-logoutput.webp
    :alt: DAG Execution Log
    :align: center
diff --git a/ui/index.html b/ui/index.html
index 7f73ffcce..4575a5814 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>dagu</title>
+    <title>Dagu</title>
     <script>
       function getConfig() {
         return {
diff --git a/ui/package.json b/ui/package.json
index b5afd4910..65f2aa9ca 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -56,6 +56,7 @@
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
+    "@fontsource/inter": "^5.0.8",
     "@fontsource/roboto": "^4.5.7",
     "@fortawesome/fontawesome-svg-core": "^6.1.2",
     "@fortawesome/free-solid-svg-icons": "^6.1.2",
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index c3542d50f..5e458b3de 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -9,6 +9,9 @@ import { SWRConfig } from 'swr';
 import fetchJson from './lib/fetchJson';
 import Search from './pages/search';
 
+import "@fontsource/inter"
+import "@fontsource/inter/100.css"
+
 export type Config = {
   title: string;
   navbarColor: string;
@@ -40,7 +43,7 @@ function App({ config }: Props) {
           <Layout {...config}>
             <Routes>
               <Route path="/" element={<Dashboard />} />
-              <Route path="" element={<DAGs />} />
+              <Route path="/dashboard" element={<Dashboard />} />
               <Route path="/dags/" element={<DAGs />} />
               <Route path="/dags/:name/*" element={<DAGDetails />} />
               <Route path="/search/" element={<Search />} />
diff --git a/ui/src/Layout.tsx b/ui/src/Layout.tsx
index a22d40b34..1ffb6e55a 100644
--- a/ui/src/Layout.tsx
+++ b/ui/src/Layout.tsx
@@ -8,8 +8,7 @@ import Toolbar from '@mui/material/Toolbar';
 import List from '@mui/material/List';
 import Typography from '@mui/material/Typography';
 import { mainListItems } from './menu';
-import { Grid, IconButton } from '@mui/material';
-import icon from '../../assets/images/dagu.png';
+import { Grid } from '@mui/material';
 import { AppBarContext } from './contexts/AppBarContext';
 
 const drawerWidthClosed = 64;
@@ -64,13 +63,7 @@ const Drawer = styled(MuiDrawer, {
 
 const mdTheme = createTheme({
   typography: {
-    fontFamily:
-      "'SF Pro Display','SF Compact Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'",
-  },
-  palette: {
-    primary: {
-      main: '#485fc7',
-    },
+    fontFamily: 'Inter',
   },
 });
 
@@ -81,12 +74,7 @@ type DashboardContentProps = {
   children?: React.ReactElement | React.ReactElement[];
 };
 
-function Content({
-  title,
-  navbarColor,
-  version,
-  children,
-}: DashboardContentProps) {
+function Content({ title, navbarColor, children }: DashboardContentProps) {
   const [open, setOpen] = React.useState(false);
   const toggleDrawer = () => {
     setOpen(!open);
@@ -106,41 +94,7 @@ function Content({
               height: '100%',
             }}
           >
-            <Toolbar
-              sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-            >
-              <IconButton onClick={toggleDrawer}>
-                <img
-                  src={icon}
-                  alt="dagu"
-                  width={64}
-                  style={{
-                    maxWidth: '64px',
-                  }}
-                />
-              </IconButton>
-            </Toolbar>
-            <Box
-              sx={{
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                color: '#fff',
-                overflowWrap: 'break-word',
-              }}
-            >
-              {version ? `v${version}` : "dev"}
-            </Box>
-            <List
-              component="nav"
-              sx={{
-                pl: '6px',
-              }}
-            >
+            <List component="nav" sx={{ pl: '6px' }}>
               {mainListItems}
             </List>
           </Box>
@@ -162,10 +116,10 @@ function Content({
             elevation={0}
             sx={{
               width: '100%',
-              backgroundColor: 'white',
+              backgroundColor: '#F2F4F8',
               borderBottom: scrolled ? 1 : 0,
               borderColor: 'grey.300',
-              pr: 2,
+              pr: 3,
               position: 'relative',
               display: 'block',
             }}
@@ -173,7 +127,6 @@ function Content({
             <Toolbar
               sx={{
                 width: '100%',
-                backgroundColor: 'white',
                 display: 'flex',
                 direction: 'row',
                 justifyContent: 'space-between',
@@ -188,7 +141,7 @@ function Content({
                   </NavBarTitleText>
                 )}
               </AppBarContext.Consumer>
-              <NavBarTitleText>{title || 'dagu'}</NavBarTitleText>
+              <NavBarTitleText>{title || 'Dagu'}</NavBarTitleText>
             </Toolbar>
           </AppBar>
           <Grid
@@ -196,9 +149,9 @@ function Content({
             ref={containerRef}
             sx={{
               flex: 1,
-              pt: 2,
               pb: 4,
               overflow: 'auto',
+              backgroundColor: '#F2F4F8',
             }}
             onScroll={() => {
               const curr = containerRef.current;
diff --git a/ui/src/components/atoms/ActionButton.tsx b/ui/src/components/atoms/ActionButton.tsx
index 75bd4a222..01cdfc267 100644
--- a/ui/src/components/atoms/ActionButton.tsx
+++ b/ui/src/components/atoms/ActionButton.tsx
@@ -18,7 +18,7 @@ export default function ActionButton({
 }: ActionButtonProps) {
   return label ? (
     <Button
-      variant="contained"
+      variant="outlined"
       color="primary"
       size="small"
       startIcon={icon}
diff --git a/ui/src/components/atoms/BorderedBox.tsx b/ui/src/components/atoms/BorderedBox.tsx
index 85716dc50..d3d18d444 100644
--- a/ui/src/components/atoms/BorderedBox.tsx
+++ b/ui/src/components/atoms/BorderedBox.tsx
@@ -13,8 +13,8 @@ export default function BorderedBox({
     <Box
       sx={{
         border: 1,
-        borderColor: '#485fc7',
-        borderRadius: '6px',
+        borderColor: '#e0e0e0',
+        backgroundColor: '#fff',
         ...sx,
       }}
       {...props}
diff --git a/ui/src/components/atoms/StyledTableRow.tsx b/ui/src/components/atoms/StyledTableRow.tsx
index 8b4c10509..536622db7 100644
--- a/ui/src/components/atoms/StyledTableRow.tsx
+++ b/ui/src/components/atoms/StyledTableRow.tsx
@@ -2,9 +2,6 @@ import { TableRow } from '@mui/material';
 import { styled } from '@mui/system';
 
 const StyledTableRow = styled(TableRow)(({ theme }) => ({
-  '&:nth-of-type(odd)': {
-    backgroundColor: theme.palette.action.hover,
-  },
   // hide last border
   '&:last-child td, &:last-child th': {
     border: 0,
diff --git a/ui/src/components/molecules/ConfirmModal.tsx b/ui/src/components/molecules/ConfirmModal.tsx
index 773bb6cc4..b74a2f37e 100644
--- a/ui/src/components/molecules/ConfirmModal.tsx
+++ b/ui/src/components/molecules/ConfirmModal.tsx
@@ -57,10 +57,10 @@ function ConfirmModal({
           mt={2}
         >
           <Box>{children}</Box>
-          <Button variant="contained" onClick={() => onSubmit()}>
+          <Button variant="outlined" onClick={() => onSubmit()}>
             {buttonText}
           </Button>
-          <Button variant="contained" color="error" onClick={dismissModal}>
+          <Button variant="outlined" color="error" onClick={dismissModal}>
             Cancel
           </Button>
         </Stack>
diff --git a/ui/src/components/molecules/CreateDAGButton.tsx b/ui/src/components/molecules/CreateDAGButton.tsx
index 410006eca..98813dd21 100644
--- a/ui/src/components/molecules/CreateDAGButton.tsx
+++ b/ui/src/components/molecules/CreateDAGButton.tsx
@@ -4,11 +4,10 @@ import React from 'react';
 function CreateDAGButton() {
   return (
     <Button
-      variant="contained"
+      variant="outlined"
       size="small"
       sx={{
         width: '100px',
-        border: 0,
       }}
       onClick={async () => {
         const name = window.prompt('Please input the new DAG name', '');
diff --git a/ui/src/components/molecules/DAGTable.tsx b/ui/src/components/molecules/DAGTable.tsx
index fe47d0c82..a3f11a533 100644
--- a/ui/src/components/molecules/DAGTable.tsx
+++ b/ui/src/components/molecules/DAGTable.tsx
@@ -76,9 +76,7 @@ const defaultColumns = [
       return (
         <IconButton
           onClick={table.getToggleAllRowsExpandedHandler()}
-          sx={{
-            color: 'white',
-          }}
+          className="gray-90"
         >
           {table.getIsAllRowsExpanded() ? (
             <>
@@ -552,8 +550,7 @@ function DAGTable({ DAGs = [], group = '', refreshFn }: Props) {
       </Stack>
       <Box
         sx={{
-          border: '1px solid #485fc7',
-          borderRadius: '6px',
+          border: '1px solid #e0e0e0',
           mt: 2,
         }}
       >
@@ -580,6 +577,7 @@ function DAGTable({ DAGs = [], group = '', refreshFn }: Props) {
                               : 'default',
                           },
                           onClick: header.column.getToggleSortingHandler(),
+                          className: 'gray-90',
                         }}
                       >
                         <Stack direction="row" alignItems="center">
@@ -593,19 +591,19 @@ function DAGTable({ DAGs = [], group = '', refreshFn }: Props) {
                             asc: (
                               <ArrowUpward
                                 sx={{
-                                  color: 'white',
                                   fontSize: '0.95rem',
                                   ml: 1,
                                 }}
+                                className="gray-90"
                               />
                             ),
                             desc: (
                               <ArrowDownward
                                 sx={{
-                                  color: 'white',
                                   fontSize: '0.95rem',
                                   ml: 1,
                                 }}
+                                className="gray-90"
                               />
                             ),
                           }[header.column.getIsSorted() as string] ?? null}
@@ -624,7 +622,10 @@ function DAGTable({ DAGs = [], group = '', refreshFn }: Props) {
           </TableHead>
           <TableBody>
             {instance.getRowModel().rows.map((row) => (
-              <StyledTableRow key={row.id} style={{ height: '44px' }}>
+              <StyledTableRow
+                key={row.id}
+                style={{ height: '44px', backgroundColor: 'white' }}
+              >
                 {row.getVisibleCells().map((cell) => (
                   <TableCell
                     key={cell.id}
diff --git a/ui/src/components/molecules/Graph.tsx b/ui/src/components/molecules/Graph.tsx
index d50f2fe00..e9d55a18e 100644
--- a/ui/src/components/molecules/Graph.tsx
+++ b/ui/src/components/molecules/Graph.tsx
@@ -48,11 +48,11 @@ function Graph({
     const addNodeFn = (step: Step, status: NodeStatus) => {
       const id = step.Name.replace(/\s/g, '_');
       const c = graphStatusMap[status] || '';
-      dat.push(`${id}(${step.Name})${c};`);
+      dat.push(`${id}[${step.Name}]${c};`);
       if (step.Depends) {
         step.Depends.forEach((d) => {
           const depId = d.replace(/\s/g, '_');
-          dat.push(`${depId} -.-> ${id};`);
+          dat.push(`${depId} --> ${id};`);
         });
       }
       if (onClickNode) {
@@ -65,14 +65,14 @@ function Graph({
       (steps as Step[]).forEach((s) => addNodeFn(s, NodeStatus.None));
     }
     dat.push(
-      'linkStyle default stroke:#ddeeff,stroke-width:2px,fill:none,color:#404040'
+      'linkStyle default stroke:#999,stroke-width:1px,fill:none,color:#333'
     );
-    dat.push('classDef none fill:white,stroke:lightblue,stroke-width:2px');
-    dat.push('classDef running fill:white,stroke:lime,stroke-width:2px');
-    dat.push('classDef error fill:white,stroke:red,stroke-width:2px');
-    dat.push('classDef cancel fill:white,stroke:pink,stroke-width:2px');
-    dat.push('classDef done fill:white,stroke:green,stroke-width:2px');
-    dat.push('classDef skipped fill:white,stroke:gray,stroke-width:2px');
+    dat.push('classDef none color:#333,fill:white,stroke:lightblue,stroke-width:1.2px');
+    dat.push('classDef running color:#333,fill:white,stroke:lime,stroke-width:1.2px');
+    dat.push('classDef error color:#333,fill:white,stroke:red,stroke-width:1.2px');
+    dat.push('classDef cancel color:#333,fill:white,stroke:pink,stroke-width:1.2px');
+    dat.push('classDef done color:#333,fill:white,stroke:green,stroke-width:1.2px');
+    dat.push('classDef skipped color:#333,fill:white,stroke:gray,stroke-width:1.2px');
     return dat.join('\n');
   }, [steps, onClickNode, flowchart]);
   return <Mermaid style={mermaidStyle} def={graph} />;
diff --git a/ui/src/components/molecules/LiveSwitch.tsx b/ui/src/components/molecules/LiveSwitch.tsx
index 4e96294cb..3885476da 100644
--- a/ui/src/components/molecules/LiveSwitch.tsx
+++ b/ui/src/components/molecules/LiveSwitch.tsx
@@ -43,7 +43,11 @@ function LiveSwitch({ DAG, refresh, inputProps }: Props) {
     });
   }, [DAG, checked]);
   return (
-    <Switch checked={checked} onChange={onChange} inputProps={inputProps} />
+    <Switch
+      checked={checked}
+      onChange={onChange}
+      inputProps={inputProps}
+    />
   );
 }
 export default LiveSwitch;
diff --git a/ui/src/components/molecules/StartDAGModal.tsx b/ui/src/components/molecules/StartDAGModal.tsx
index 91ad5d276..92133e2c1 100644
--- a/ui/src/components/molecules/StartDAGModal.tsx
+++ b/ui/src/components/molecules/StartDAGModal.tsx
@@ -142,14 +142,14 @@ function StartDAGModal({ visible, dag, dismissModal, onSubmit }: Props) {
             }
           })}
           <Button
-            variant="contained"
+            variant="outlined"
             onClick={() => {
               onSubmit(stringifyParams(params));
             }}
           >
             Start
           </Button>
-          <Button variant="contained" color="error" onClick={dismissModal}>
+          <Button variant="outlined" color="error" onClick={dismissModal}>
             Cancel
           </Button>
         </Stack>
diff --git a/ui/src/components/molecules/StatusUpdateModal.tsx b/ui/src/components/molecules/StatusUpdateModal.tsx
index adfe78012..34c2a97e1 100644
--- a/ui/src/components/molecules/StatusUpdateModal.tsx
+++ b/ui/src/components/molecules/StatusUpdateModal.tsx
@@ -57,20 +57,20 @@ function StatusUpdateModal({ visible, dismissModal, step, onSubmit }: Props) {
             spacing={2}
           >
             <Button
-              variant="contained"
+              variant="outlined"
               onClick={() => onSubmit(step, 'mark-success')}
             >
               Mark Success
             </Button>
             <Button
-              variant="contained"
+              variant="outlined"
               onClick={() => onSubmit(step, 'mark-failed')}
             >
               Mark Failed
             </Button>
           </Stack>
           <Stack direction="row" alignContent="center" justifyContent="center">
-            <Button variant="contained" color="error" onClick={dismissModal}>
+            <Button variant="outlined" color="error" onClick={dismissModal}>
               Cancel
             </Button>
           </Stack>
diff --git a/ui/src/components/organizations/DAGSpec.tsx b/ui/src/components/organizations/DAGSpec.tsx
index 0139496eb..13e5942c7 100644
--- a/ui/src/components/organizations/DAGSpec.tsx
+++ b/ui/src/components/organizations/DAGSpec.tsx
@@ -124,7 +124,7 @@ function DAGSpec({ data }: Props) {
                       <Button
                         id="save-config"
                         color="primary"
-                        variant="contained"
+                        variant="outlined"
                         startIcon={
                           <span className="icon">
                             <FontAwesomeIcon icon={faFloppyDisk} />
@@ -155,7 +155,7 @@ function DAGSpec({ data }: Props) {
                       </Button>
                       <Button
                         color="error"
-                        variant="contained"
+                        variant="outlined"
                         onClick={() => setEditing(false)}
                         sx={{ ml: 2 }}
                         startIcon={
@@ -171,7 +171,7 @@ function DAGSpec({ data }: Props) {
                     <Stack direction="row">
                       <Button
                         id="edit-config"
-                        variant="contained"
+                        variant="outlined"
                         color="primary"
                         onClick={() => setEditing(true)}
                         startIcon={
diff --git a/ui/src/menu.tsx b/ui/src/menu.tsx
index 2a18c8200..16ec12c44 100644
--- a/ui/src/menu.tsx
+++ b/ui/src/menu.tsx
@@ -3,23 +3,43 @@ import ListItemButton from '@mui/material/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import { Link } from 'react-router-dom';
-import {
-  TimelineOutlined,
-  TocOutlined,
-  SearchOutlined,
-} from '@mui/icons-material';
 import { Typography } from '@mui/material';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faChartGantt,
+  faMagnifyingGlass,
+  faTableList,
+} from '@fortawesome/free-solid-svg-icons';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+
+function Icon({ icon }: { icon: IconProp }) {
+  return (
+    <span
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginLeft: 2,
+      }}
+    >
+      <FontAwesomeIcon
+        style={{ height: 20, width: 20 }}
+        icon={icon}
+      ></FontAwesomeIcon>
+    </span>
+  );
+}
 
 export const mainListItems = (
   <React.Fragment>
-    <Link to="/">
-      <ListItem text="Dashboard" icon={<TimelineOutlined />} />
+    <Link to="/dashboard">
+      <ListItem text="Dashboard" icon={<Icon icon={faChartGantt}></Icon>} />
     </Link>
     <Link to="/dags">
-      <ListItem text="DAGs" icon={<TocOutlined />} />
+      <ListItem text="DAGs" icon={<Icon icon={faTableList}></Icon>} />
     </Link>
     <Link to="/search">
-      <ListItem text="Search" icon={<SearchOutlined />} />
+      <ListItem text="Search" icon={<Icon icon={faMagnifyingGlass}></Icon>} />
     </Link>
   </React.Fragment>
 );
@@ -32,19 +52,13 @@ type ListItemProps = {
 function ListItem({ icon, text }: ListItemProps) {
   return (
     <ListItemButton>
-      <ListItemIcon
-        sx={{
-          color: 'white',
-        }}
-      >
-        {icon}
-      </ListItemIcon>
+      <ListItemIcon sx={{ color: 'white' }}>{icon}</ListItemIcon>
       <ListItemText
         primary={
           <Typography
             sx={{
               color: 'white',
-              fontWeight: '600',
+              fontWeight: '400',
             }}
           >
             {text}
diff --git a/ui/src/pages/search/index.tsx b/ui/src/pages/search/index.tsx
index 3ff8c1ef1..9c3444178 100644
--- a/ui/src/pages/search/index.tsx
+++ b/ui/src/pages/search/index.tsx
@@ -55,7 +55,7 @@ function Search() {
           />
           <Button
             disabled={!searchVal}
-            variant="contained"
+            variant="outlined"
             sx={{
               width: '100px',
               border: 0,
diff --git a/ui/src/styles/styles.css b/ui/src/styles/styles.css
index bfcacb060..3dc798a0a 100644
--- a/ui/src/styles/styles.css
+++ b/ui/src/styles/styles.css
@@ -16,6 +16,10 @@ a {
   box-sizing: border-box;
 }
 
+body {
+  font-family: 'Inter';
+}
+
 #nav-title {
   color: white;
   font: 20px 'Arial';
@@ -24,16 +28,47 @@ a {
 }
 
 .MuiTableRow-root th {
-  background-color: #485fc7;
-  color: #fff;
-  font-weight: 600;
+  background-color: #F2F4F8;
+  font-weight: 500;
 }
 
 .MuiTableRow-root td {
-  font-weight: 600;
+  color: #333333;
+  font-weight: 500;
 }
 
 .line-highlight {
   margin-top: 1.4em !important;
-  background-color: rgba(255,255,0,0.2) !important;
-}
\ No newline at end of file
+  background-color: rgba(255, 255, 0, 0.2) !important;
+}
+
+.gray-10 {
+  color: #f5f5f5;
+}
+.gray-20 {
+  color: #e0e0e0;
+}
+.gray-30 {
+  color: #cccccc;
+}
+.gray-40 {
+  color: #b3b3b3;
+}
+.gray-50 {
+  color: #999999;
+}
+.gray-60 {
+  color: #808080;
+}
+.gray-70 {
+  color: #666666;
+}
+.gray-80 {
+  color: #4d4d4d;
+}
+.gray-90 {
+  color: #333333;
+}
+.gray-100 {
+  color: #000000;
+}
diff --git a/ui/webpack.common.js b/ui/webpack.common.js
index 053cc4852..16131838e 100644
--- a/ui/webpack.common.js
+++ b/ui/webpack.common.js
@@ -45,10 +45,4 @@ module.exports = {
   resolve: {
     extensions: ['.tsx', '.ts', '.js'],
   },
-  output: {
-    filename: 'bundle.js',
-    path: path.resolve(__dirname, 'dist'),
-    publicPath: '/assets/js/',
-    clean: true,
-  },
 };
diff --git a/ui/webpack.dev.js b/ui/webpack.dev.js
index a948c4f85..390868ad3 100644
--- a/ui/webpack.dev.js
+++ b/ui/webpack.dev.js
@@ -44,6 +44,10 @@ module.exports = merge(common, {
     splitChunks: false,
   },
   output: {
+    filename: 'bundle.js',
     pathinfo: false,
+    path: path.resolve(__dirname, 'dist'),
+    publicPath: '/',
+    clean: true,
   },
 });
diff --git a/ui/webpack.prod.js b/ui/webpack.prod.js
index 7782b520a..a31dec0c6 100644
--- a/ui/webpack.prod.js
+++ b/ui/webpack.prod.js
@@ -18,4 +18,10 @@ module.exports = merge(common, {
       },
     ],
   },
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+    publicPath: '/assets/js/',
+    clean: true,
+  },
 });
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 0ef186b8c..447db71cc 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -529,6 +529,11 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.46.0.tgz#3f7802972e8b6fe3f88ed1aabc74ec596c456db6"
   integrity sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA==
 
+"@fontsource/inter@^5.0.8":
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/@fontsource/inter/-/inter-5.0.8.tgz#61b50cb0eb72b14ae1938d47c4a9a91546d2a50c"
+  integrity sha512-28knWH1BfOiRalfLs90U4sge5mpQ8ZH6FS0PTT+IZMKrZ7wNHDHRuKa1kQJg+uHcc6axBppnxll+HXM4c7zo/Q==
+
 "@fontsource/roboto@^4.5.7":
   version "4.5.8"
   resolved "https://registry.yarnpkg.com/@fontsource/roboto/-/roboto-4.5.8.tgz#56347764786079838faf43f0eeda22dd7328437f"