diff --git a/WEB/frontend/package-lock.json b/WEB/frontend/package-lock.json
index c29eb007..55b3e095 100644
--- a/WEB/frontend/package-lock.json
+++ b/WEB/frontend/package-lock.json
@@ -3777,6 +3777,14 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.3.tgz",
       "integrity": "sha512-/lqqLAmuIPi79WYfRpy2i8z+x+vxU3zX2uAm0gs1q52qTuKwolOj1P8XbufpXcsydrpKx2yGn2wzAnxCMV86QA=="
     },
+    "axios": {
+      "version": "0.22.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.22.0.tgz",
+      "integrity": "sha512-Z0U3uhqQeg1oNcihswf4ZD57O3NrR1+ZXhxaROaWpDmsDTx7T2HNBV2ulBtie2hwJptu8UvgnJoK+BIqdzh/1w==",
+      "requires": {
+        "follow-redirects": "^1.14.4"
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -8149,6 +8157,11 @@
         "pify": "^4.0.1"
       }
     },
+    "hamt_plus": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz",
+      "integrity": "sha1-4hwlKWjH4zsg9qGwlM2FeHomVgE="
+    },
     "handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -14611,6 +14624,14 @@
         "picomatch": "^2.2.1"
       }
     },
+    "recoil": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.4.1.tgz",
+      "integrity": "sha512-vp6KPwlHOjJ4bJofmdDchmgI9ilMTCoUisK8/WYLl8dThH7e7KmtZttiLgvDb2Em99dUfTEsk8vT8L1nUMgqXQ==",
+      "requires": {
+        "hamt_plus": "1.0.2"
+      }
+    },
     "recursive-readdir": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
diff --git a/WEB/frontend/src/App.js b/WEB/frontend/src/App.js
index 86f04157..87c5009c 100644
--- a/WEB/frontend/src/App.js
+++ b/WEB/frontend/src/App.js
@@ -13,7 +13,6 @@ import LoginModal from './components/Modal/LoginModal';
 import RegisterModal from './components/Modal/RegisterModal';
 import PasswordResetModal from './components/Modal/PasswordResetModal';
 import InitInfo from './components/Modal/InitInfo';
-import FilterTable from './components/FilterTable';
 import Search from './components/Search';
 import DynamicRoutes from "./DynamicRoutes";
 
diff --git a/WEB/frontend/src/components/AutocompleteInSearch.js b/WEB/frontend/src/components/AutocompleteInSearch.js
index cb9082d4..1c1de15f 100644
--- a/WEB/frontend/src/components/AutocompleteInSearch.js
+++ b/WEB/frontend/src/components/AutocompleteInSearch.js
@@ -1,33 +1,9 @@
 import React, { useEffect, useState, useRef } from "react";
 import Autocomplete from '@mui/material/Autocomplete';
 import TextField from '@mui/material/TextField';
-import { search, shapeData, sort } from "./searchTable";
-
-export default function AutocompleteInSearch({ tableData, options }){
-  const [searchState, setSearchState] = useState({
-    isActive: false,
-    query: null
-  });
 
+export default function AutocompleteInSearch(){
   const searchInputRef = useRef(null);
-  
-  const handleSearchBtnClick = () => {
-    const searchInput = document.getElementById("search-query-input");
-    setSearchState((prevState) => {
-      return {
-        ...prevState,
-        query: searchInput.value
-      };
-    });
-
-    const formattedSearchResults = search(
-      shapeData(tableData, options.headers),
-      searchInput.value
-    );
-    setData(formattedSearchResults);
-  };
-
-  const [data, setData] = useState(shapeData(tableData, options.headers));
 
   return(    
     <Autocomplete
diff --git a/WEB/frontend/src/components/Dashboard/TrendsCard.js b/WEB/frontend/src/components/Dashboard/TrendsCard.js
index fca4c2f5..7359a040 100644
--- a/WEB/frontend/src/components/Dashboard/TrendsCard.js
+++ b/WEB/frontend/src/components/Dashboard/TrendsCard.js
@@ -14,6 +14,7 @@ import { DataGrid, useGridSlotComponentProps } from '@mui/x-data-grid';
 import moment from 'moment';
 import ProgressBar from '../Common/ProgressBar';
 import useFetch from '../../hooks/useFetch';
+import "../../css/pageStyle.css"
 
 const columns = [
   {
diff --git a/WEB/frontend/src/components/Dashboard/WordCloud.js b/WEB/frontend/src/components/Dashboard/WordCloud.js
index 8d33218d..a5d89907 100644
--- a/WEB/frontend/src/components/Dashboard/WordCloud.js
+++ b/WEB/frontend/src/components/Dashboard/WordCloud.js
@@ -17,7 +17,7 @@ const WordCloud = ({ options }) => {
   const { data, isPending, error } = useFetch(`/data/wordCloud.json`);
 
   return (
-    <Card style={{ height: '400px' }}>
+    <Card style={{ height: '400px', fontFamily: "Noto sans KR", fontSize: "2rem" }}>
       <CardHeader title="오늘의 키워드" />
       <Divider />
       {isPending ? (
diff --git a/WEB/frontend/src/components/DetectionStatus/AppliedFilter.js b/WEB/frontend/src/components/DetectionStatus/AppliedFilter.js
index fdf41d93..3d1559a7 100644
--- a/WEB/frontend/src/components/DetectionStatus/AppliedFilter.js
+++ b/WEB/frontend/src/components/DetectionStatus/AppliedFilter.js
@@ -26,7 +26,7 @@ export default function AppliedFilter() {
         <Grid item>
           <Chip
             key={id}
-            sx={{ borderRadius: '5px' }}
+            sx={{ borderRadius: '5px', fontFamily: "Noto sans KR"}}
             label={data}
             onDelete={handleDelete(data)}
           />
diff --git a/WEB/frontend/src/components/DetectionStatus/FilterBar.js b/WEB/frontend/src/components/DetectionStatus/FilterBar.js
index 4840afb3..008220a7 100644
--- a/WEB/frontend/src/components/DetectionStatus/FilterBar.js
+++ b/WEB/frontend/src/components/DetectionStatus/FilterBar.js
@@ -1,78 +1,79 @@
 import {
-  Box,
-  Button,
-  Card,
-  CardHeader,
-  CardContent,
-  Divider,
-  Stack,
-  Typography,
-} from '@mui/material';
-import FilterCheckbox from './FilterCheckbox';
-
-import { useRecoilState, useRecoilValue } from 'recoil';
-import { filterListState } from '../../atoms/filterListState';
-import { searchListState } from '../../atoms/searchListState';
-
-export default function FilterBar() {
-  const filterList = useRecoilValue(filterListState);
-  const searchList = useRecoilValue(searchListState);
-
-  return (
-    <Card
-      sx={{ right: 0, marginTop: '38px', minHeight: '100%' }}
-      elevation={1}
-      spacing={3}
-    >
-      <CardHeader
-        action={
-          <Button style={{ fontSize: '10px', marginTop: '10px' }} size="small">
-            RESET
-          </Button>
-        }
-        titleTypographyProps={{ variant: 'body1' }}
-        title="FILTER"
-      />
-      <Divider />
-
-      {Object.entries(namedEntityMap).map(([filterLabel, filterCode]) => {
-        const filterTags = Object.entries(searchList.filterTags[filterCode]);
-        return (
-          <CardContent style={{ marginBottom: '16px' }}>
-            <Box className="filter_con">
-              <Stack
-                direction="row"
-                alignItems="center"
-                justifyContent="space-between"
-              >
-                <Typography>글에서 찾은 {filterLabel}</Typography>
-                <Typography>{filterTags.length}</Typography>
-              </Stack>
-              <Box>
-                {/* <FilterCheckbox count={10} hashtag="myHashtag" key="myHashtag" onToggle={toggleFilter} /> */}
-                {filterTags
-                  .sort(([_, a], [__, b]) => (a < b ? 1 : -1))
-                  .map(([hashtag, freq], i) => (
-                    <FilterCheckbox
-                      count={freq}
-                      hashtag={hashtag}
-                      key={hashtag}
-                      checked={filterList.includes(hashtag)}
-                    />
-                  ))}
-                <Button
-                  size="small"
-                  sx={{ float: 'right', marginRight: '-15px' }}
+    Box,
+    Button,
+    Card,
+    CardHeader,
+    CardContent,
+    Divider,
+    Stack,
+    Typography,
+  } from '@mui/material';
+  import FilterCheckbox from './FilterCheckbox';
+  
+  import { useRecoilState, useRecoilValue } from 'recoil';
+  import { filterListState } from '../../atoms/filterListState';
+  import { searchListState } from '../../atoms/searchListState';
+  
+  export default function FilterBar() {
+    const filterList = useRecoilValue(filterListState);
+    const searchList = useRecoilValue(searchListState);
+  
+    return (
+      <Card
+        sx={{ right: 0, marginTop: '38px', minHeight: '100%', marginRight: '5em' }}
+        elevation={1}
+        spacing={3}
+      >
+        <CardHeader
+          action={
+            <Button style={{ fontSize: '11px', fontWeight: '800', fontFamily: 'Noto sans KR', marginTop: '-20px', marginRight: '-8px', marginBottom: '-6px' }} size="small">
+              RESET
+            </Button>
+          }
+          titleTypographyProps={{ variant: 'body1' }}
+          title="FILTER"
+          sx={{ fontFamily: "Noto sans KR", fontSize: "1.5em", fontWeight: "600"}}
+        />
+        <Divider />
+  
+        {Object.entries(namedEntityMap).map(([filterLabel, filterCode]) => {
+          const filterTags = Object.entries(searchList.filterTags[filterCode]);
+          return (
+            <CardContent style={{ marginBottom: '35px' }}>
+              <Box className="filter_con" sx={{lineHeight: "2.8"}}>
+                <Stack
+                  direction="row"
+                  alignItems="center"
+                  justifyContent="space-between"
                 >
-                  더보기
-                </Button>
+                  <Typography sx={{ fontFamily: "Noto sans KR", fontSize: "1.0rem" }}>글에서 찾은 {filterLabel}</Typography>
+                  <Typography sx={{ fontFamily: "Noto sans KR", fontSize: "1.0rem" }}>{filterTags.length}</Typography>
+                </Stack>
+                <Box>
+                  {/* <FilterCheckbox count={10} hashtag="myHashtag" key="myHashtag" onToggle={toggleFilter} /> */}
+                  {filterTags
+                    .sort(([_, a], [__, b]) => (a < b ? 1 : -1))
+                    .map(([hashtag, freq], i) => (
+                      <FilterCheckbox
+                        count={freq}
+                        hashtag={hashtag}
+                        key={hashtag}
+                        checked={filterList.includes(hashtag)}
+                      />
+                    ))}
+                  <Button
+                    size="small"
+                    sx={{ float: 'right', marginRight: '-15px', fontFamily: "Noto sans KR" }}
+                  >
+                    더보기
+                  </Button>
+                </Box>
               </Box>
-            </Box>
-          </CardContent>
-        );
-      })}
-    </Card>
-  );
-}
-
-const namedEntityMap = { 단체: 'ORG', 인물: 'CVL', 시간대: 'TIM' };
+            </CardContent>
+          );
+        })}
+      </Card>
+    );
+  }
+  
+  const namedEntityMap = { 단체: 'ORG', 인물: 'CVL', 시간대: 'TIM' };
\ No newline at end of file
diff --git a/WEB/frontend/src/components/DetectionStatus/FilterTable.js b/WEB/frontend/src/components/DetectionStatus/FilterTable.js
deleted file mode 100644
index 11458bcd..00000000
--- a/WEB/frontend/src/components/DetectionStatus/FilterTable.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import * as React from 'react';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import '../App.css';
-
-function createData(type, subject, writer) {
-  return { type, subject, writer };
-}
-
-// 테이블 내 들어갈 필터링 후 검색될 내용을 담는 변수
-const rows = [
-  createData('Frozen yoghurt', '해군 참모총장 만난 썰 푼다', '이민식'),
-  createData('Ice cream sandwich', '오진석 소위 임관 실화냐..', '김태완'),
-  createData('Eclair', '2함대 출항시간 뭐냐..', '이정빈'),
-  createData('Cupcake', '갑자기 태풍와서 피항간 썰 푼다', '오정도'),
-  createData('Gingerbread', '3함대 젓가락 살인마 썰푼다', '문자석'),
-
-  createData('Jam', '계룡에서 박보검 본 썰푼다', '손정호'),
-  createData('Cookie', 'Cert업무 강도 에바참치임..', '서명곤'),
-  createData('Eclair', '2함대 출항시간 뭐냐..', '이정빈'),
-  createData('Cupcake', '갑자기 태풍와서 피항간 썰 푼다', '오정도'),
-  createData('Gingerbread', '3함대 젓가락 살인마 썰푼다', '문자석'),
-  createData('Jam', '계룡에서 박보검 본 썰푼다', '손정호'),
-  createData('Cookie', 'Cert업무 강도 에바참치임..', '서명곤'),
-  createData('Eclair', '2함대 출항시간 뭐냐..', '이정빈'),
-  createData('Cupcake', '갑자기 태풍와서 피항간 썰 푼다', '오정도'),
-  createData('Gingerbread', '3함대 젓가락 살인마 썰푼다', '문자석'),
-  createData('Jam', '계룡에서 박보검 본 썰푼다', '손정호'),
-  createData('Cookie', 'Cert업무 강도 에바참치임..', '서명곤'),
-  createData('Eclair', '2함대 출항시간 뭐냐..', '이정빈'),
-  createData('Cupcake', '갑자기 태풍와서 피항간 썰 푼다', '오정도'),
-  createData('Gingerbread', '3함대 젓가락 살인마 썰푼다', '문자석'),
-  createData('Jam', '계룡에서 박보검 본 썰푼다', '손정호'),
-  createData('Cookie', 'Cert업무 강도 에바참치임..', '서명곤'),
-  createData('Eclair', '2함대 출항시간 뭐냐..', '이정빈'),
-  createData('Cupcake', '갑자기 태풍와서 피항간 썰 푼다', '오정도'),
-  createData('Gingerbread', '3함대 젓가락 살인마 썰푼다', '문자석'),
-  createData('Jam', '계룡에서 박보검 본 썰푼다', '손정호'),
-  createData('Cookie', 'Cert업무 강도 에바참치임..', '서명곤'),
-];
-
-export default function filterTable() {
-  return (
-    <TableContainer>
-      <Table sx={{ minWidth: 500 }} aria-label="simple table">
-        <TableHead>
-          <TableRow>
-            <TableCell align="center">유형&nbsp;(type)</TableCell>
-            <TableCell align="center">제목&nbsp;(title)</TableCell>
-            <TableCell align="center">글쓴이&nbsp;(writer)</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {rows.map((row) => (
-            <TableRow
-              key={row.type}
-              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
-            >
-              <TableCell align="center" component="th" scope="row">
-                {row.type}
-              </TableCell>
-              <TableCell align="center">{row.subject}</TableCell>
-              <TableCell align="center">{row.writer}</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  );
-}
diff --git a/WEB/frontend/src/components/DetectionStatus/SecretsTableRow.js b/WEB/frontend/src/components/DetectionStatus/SecretsTableRow.js
index ff4ee2f1..f9189881 100644
--- a/WEB/frontend/src/components/DetectionStatus/SecretsTableRow.js
+++ b/WEB/frontend/src/components/DetectionStatus/SecretsTableRow.js
@@ -38,7 +38,7 @@ export default function SecretsTableRow(props) {
         onClick={() => showDetailModal(id)}
         style={{ cursor: 'pointer' }}
       >
-        <Typography style={{ fontWeight: 'bold' }} color="textPrimary">
+        <Typography sx={{fontFamily: "Noto sans KR"}} style={{ fontWeight: 'bold'}} color="textPrimary">
           {title}
         </Typography>
         <Typography color="textSecondary" variant="body2">
diff --git a/WEB/frontend/src/components/Modal/SideNavigation.js b/WEB/frontend/src/components/Modal/SideNavigation.js
index f2645c50..a0ea4bd3 100644
--- a/WEB/frontend/src/components/Modal/SideNavigation.js
+++ b/WEB/frontend/src/components/Modal/SideNavigation.js
@@ -41,12 +41,7 @@ const DrawerHeader = styled('div')(({ theme }) => ({
   justifyContent: 'flex-end',
 }));
 
-const test = styled('.sidebarBackground')(() => ({
-  background: "gray"
-}));
-
 export default function SideNavigation(props) {
-  const [sidebarBackground, setSidebarBackground] = useState("");
   const { drawerWidth } = props;
   const theme = useTheme();
   const [open, setOpen] = useState(false);
@@ -54,17 +49,15 @@ export default function SideNavigation(props) {
 
   const handleDrawerOpen = () => {
     setOpen(true);
-    setSidebarBackground("sidebarBackground");
   };
 
   const handleDrawerClose = () => {
     setOpen(false);
-    setSidebarBackground("miniSidebarBackground");
   };
 
   return (
     <>
-      <Box sx={{ background: 'rgb(29, 28, 26)', height: '500vh'}}>
+      <Box sx={{ position:'fixed', background: 'rgb(29, 28, 26)', minHeight: '100%'}}>
         <IconButton
           color="inherit"
           aria-label="open drawer"
@@ -76,7 +69,7 @@ export default function SideNavigation(props) {
           <MenuIcon sx={{ color: '#fff', fontSize:'1.3em', position:'fixed'}} />
         </IconButton>
         <Box sx={{position: 'fixed'}}>
-          <SidebarLinkMini icon={InfoIcon} text="언론 동향" href="/presstrends" className="a" />
+          <SidebarLinkMini icon={InfoIcon} text="언론동향" href="/presstrends" className="a" />
           <SidebarLinkMini
             icon={SearchIcon}
             text="탐지현황"
@@ -104,7 +97,7 @@ export default function SideNavigation(props) {
           flexShrink: 0,
           '& .MuiDrawer-paper': {
             boxSizing: 'border-box',
-            background: 'rgb(29, 28, 26)',
+            background: 'rgb(40, 40, 40)',
             left: 0,
             top: 0,
             width: drawerWidth,
@@ -112,20 +105,20 @@ export default function SideNavigation(props) {
           },
         }}
       >
-        <DrawerHeader>
+        <Box className="closeButton">
           <Link href="/">
-            <img src={logoImage} alt="홈" className="image" />
+            <img src="https://riskout.ithosting.repl.co/images/main/logo_w.png" alt="홈" className="image" />
           </Link>
-          <IconButton onClick={handleDrawerClose}>
+          <IconButton onClick={handleDrawerClose}  >
             {theme.direction === 'ltr' ? (
-              <ChevronLeftIcon sx={{ color: 'white' }} />
+              <ChevronLeftIcon sx={{ color: 'white' }}  />
             ) : (
               <ChevronRightIcon sx={{ color: 'red' }} />
             )}
           </IconButton>
-        </DrawerHeader>
+        </Box>
         <List className="sub_menu">
-          <SidebarLink icon={InfoIcon} text="언론 동향" href="/presstrends" />
+          <SidebarLink icon={InfoIcon} text="언론동향" href="/presstrends" />
           <SidebarLink
             icon={SearchIcon}
             text="탐지현황"
diff --git a/WEB/frontend/src/components/Search.js b/WEB/frontend/src/components/Search.js
index 629694bd..b5deff84 100644
--- a/WEB/frontend/src/components/Search.js
+++ b/WEB/frontend/src/components/Search.js
@@ -17,11 +17,6 @@ export default function Search() {
     <Box>
       <form onSubmit={onSubmit} style={{display: 'flex'}}>
         <AutocompleteInSearch tableData={sampleData} options={sampleOptions} />
-        <Button
-          sx={{ width: "", height: '5.1em' }}
-          variant="contained"
-          type="submit"
-        ><SearchIcon /></Button>
       </form>
     </Box>
   );
diff --git a/WEB/frontend/src/components/searchTable.js b/WEB/frontend/src/components/searchTable.js
deleted file mode 100644
index 9f7c19b4..00000000
--- a/WEB/frontend/src/components/searchTable.js
+++ /dev/null
@@ -1,70 +0,0 @@
-// shapeData
-export function shapeData(data, headers) {
-    const bounds = headers ? headers.length : boundsFromRowData(data.rows);
-  
-    const shapedRowData = data.rows.map((row, index) => {
-      let mRow = row.slice(0, bounds);
-      // adds empty cells if no headers and bounds are greater than the row lengths
-      if (row.length < bounds) {
-        for (let i = 0; i < bounds - row.length; i++) {
-          mRow.push("");
-        }
-      }
-      return mRow;
-    });
-  
-    let shapedHeaders;
-    if (headers) shapedHeaders = headers;
-    else {
-      let hdrArr = [];
-      for (let i = 0; i < bounds; i++) {
-        hdrArr.push(i + 1);
-      }
-      shapedHeaders = hdrArr;
-    }
-  
-    return {
-      headers: shapedHeaders,
-      rows: shapedRowData,
-      bounds
-    };
-  }
-  
-  // gets the max length (column count) of all rows via reducer
-  const boundsFromRowData = (rows) =>
-    rows.map((r) => r.length).reduce((acc, cv) => (cv > acc ? cv : acc));
-  
-  // basic sorting method
-  export function sort(data, { colIndex, direction }) {
-    return data.sort((a, b) => {
-      const r = /[A-Za-z]/;
-      if (direction === "desc") {
-        return (
-          r.test(b[colIndex]) - r.test(a[colIndex]) ||
-          (a[colIndex] > b[colIndex] ? -1 : a[colIndex] < b[colIndex] ? 1 : 0)
-        );
-      } else {
-        return (
-          r.test(a[colIndex]) - r.test(b[colIndex]) ||
-          (a[colIndex] < b[colIndex] ? -1 : a[colIndex] > b[colIndex] ? 1 : 0)
-        );
-      }
-    });
-  }
-  
-  // search 함수
-  export function search(data, query) {
-    return {
-      ...data,
-      rows: data.rows.filter((d) => {
-        let match = false;
-        d.forEach((n) => {
-          if (n.toString().includes(query)) {
-            match = true;
-          }
-        });
-        return match;
-      })
-    };
-  }
-  
\ No newline at end of file
diff --git a/WEB/frontend/src/css/SideNavigation.css b/WEB/frontend/src/css/SideNavigation.css
index c1bb74ec..356057a6 100644
--- a/WEB/frontend/src/css/SideNavigation.css
+++ b/WEB/frontend/src/css/SideNavigation.css
@@ -23,7 +23,7 @@ body::-webkit-scrollbar {
 .iconMenuBox {
   padding: 3em 0em 0em;
   position: relative;
-  top: 6.1em;
+  top: 8.1em;
   left: 0.7em;
 }
 
@@ -33,25 +33,14 @@ body::-webkit-scrollbar {
   color: #3e90ff;
 }
 
-/* side bar를 열었을 때 background color */
-.sidebarBackground {
-  background: gray;
-}
-
-/* side bar를 닫았을 때 background color */
-.miniSidebarBackground {
-  background: white;
-}
-
 .sub_header .image {
+  /*로고 크기는 정해진 크기 입력*/
   position: absolute;
   top: 1em;
   left: 1.3em;
-}
-.sub_header .image {
-  /*로고 크기는 정해진 크기 입력*/
-  width: 95px;
-  height: 30px;
+  color: #fff;
+  width: 105px;
+  height: 22px;
 }
 
 .sub_header .image:hover {
@@ -65,7 +54,7 @@ body::-webkit-scrollbar {
 
 /*미니 사이드바 메뉴 버튼과 아이콘 위치*/
 .sub_header .sub_menu {
-  padding: 6em 1em 0em;
+  padding: 6.0em 1em 0em;
 }
 
 .sub_header .sub_menu .list {
@@ -83,6 +72,7 @@ body::-webkit-scrollbar {
 .sub_header .sub_menu .list .link {
   color: #fff;
   display: block;
+  font-size: 1.1em;
 }
 
 .sub_header .sub_menu .list.on *,
@@ -91,11 +81,15 @@ body::-webkit-scrollbar {
   color: #3e90ff;
 }
 
+.closeButton{
+  padding: 8px 13px 20px 200px;
+}
+
 .sub_header .sub_menu .css-cvhtoe-MuiButtonBase-root-MuiListItemButton-root {
   /*메뉴*/
   bottom: 1.1em;
   right: 0.4em;
-  padding: 2.0em 1.5em 0em;
+  padding: 2.0em 2.2em 0em;
 }
 
 .sub_header .sub_menu [class$='MuiTypography-root'] {
@@ -112,7 +106,7 @@ body::-webkit-scrollbar {
 .sub_header .copyright {
   /*Copyright position*/
   position: absolute;
-  top: 20em;
+  top: 30em;
   color: #fff;
 }
 
diff --git a/WEB/frontend/src/css/pageStyle.css b/WEB/frontend/src/css/pageStyle.css
new file mode 100644
index 00000000..ac9f8c53
--- /dev/null
+++ b/WEB/frontend/src/css/pageStyle.css
@@ -0,0 +1,7 @@
+body {
+  font-family: "Noto sans KR", sans-serif;
+}
+
+element.style {
+  font-family: "Noto sans KR";
+}
\ No newline at end of file
diff --git a/WEB/frontend/src/pages/Dashboard.js b/WEB/frontend/src/pages/Dashboard.js
index ba4c9dee..dae07e73 100644
--- a/WEB/frontend/src/pages/Dashboard.js
+++ b/WEB/frontend/src/pages/Dashboard.js
@@ -11,7 +11,7 @@ export default function Dashboard() {
   return (
     <Grid container spacing={2}>
       <Grid item xs={12} sm={12} md={12} lg={12}>
-        <h2>대시보드</h2>
+        <h2 style={{fontFamily: "Noto sans KR", fontSize: "2rem" }}>대시보드</h2>
       </Grid>
       <Grid item xs={6} sm={6} md={6} lg={4}>
         <WordCloud options={options} />
diff --git a/WEB/frontend/src/pages/DetectionStatus.js b/WEB/frontend/src/pages/DetectionStatus.js
index f28e2885..92325e92 100644
--- a/WEB/frontend/src/pages/DetectionStatus.js
+++ b/WEB/frontend/src/pages/DetectionStatus.js
@@ -57,14 +57,14 @@ export default function DetectionStatus() {
   };
 
   return (
-    <Grid container spacing={3}>
+    <Grid container spacing={3} sx={{marginLeft: "2em"}}>
       <Grid item xs={12} md={10} container spacing={3} direction="column">
         <Grid width="100%" item>
-          <Typography mt={1} variant="h5" sx={{ fontWeight: 'bold' }}>
+          <Typography mt={1} variant="h5" sx={{ fontFamily: "Noto sans KR", fontSize: "2rem", fontWeight: "600"}}>
             탐지 현황
           </Typography>
           <Search />
-          <Typography mt={3} color="primary">
+          <Typography mt={3} color="primary" sx={{ fontFamily: "Noto sans KR", fontWeight: "400"}}>
             {searchList.contentsLength}개 결과 | {filterList.length}개 필터
             적용중
           </Typography>