diff --git a/src/apis/apiClient.ts b/src/apis/apiClient.ts
index 658909e..4932675 100644
--- a/src/apis/apiClient.ts
+++ b/src/apis/apiClient.ts
@@ -45,17 +45,21 @@ apiClient.interceptors.response.use(
     const originalRequest = error.config;
 
     const isLoginRequest = originalRequest?.url?.includes("/users/login");
-    if (error.response.status === 401 && !originalRequest.__isRetryRequest && !isLoginRequest) {
+    if (
+      error.response.status === 401 &&
+      !originalRequest.__isRetryRequest &&
+      !isLoginRequest
+    ) {
       try {
         originalRequest.__isRetryRequest = true;
 
         const deviceId = localStorage.getItem("deviceId");
 
-const refreshResponse = await reissueTokenClient.get("/users/reissue", {
-  headers: {
-    "X-Device-Id": deviceId ?? "",
-  },
-});;
+        const refreshResponse = await reissueTokenClient.get("/users/reissue", {
+          headers: {
+            "X-Device-Id": deviceId ?? "",
+          },
+        });
         const newAccessToken = refreshResponse?.data?.data?.accessToken ?? null;
 
         if (!newAccessToken) {
@@ -71,7 +75,7 @@ const refreshResponse = await reissueTokenClient.get("/users/reissue", {
         return axios(originalRequest);
       } catch (refreshError) {
         sessionStorage.removeItem("_ZA");
-        toast.error("인증이 만료되었습니다. 다시 로그인하세요."); 
+        toast.error("인증이 만료되었습니다. 다시 로그인하세요.");
         window.location.replace("/sign-in");
         return Promise.reject(refreshError);
       }
diff --git a/src/components/DeleteConfirm/DeleteConfirmModal.tsx b/src/components/DeleteConfirm/DeleteConfirmModal.tsx
index 7f3f8a6..6d05bc8 100644
--- a/src/components/DeleteConfirm/DeleteConfirmModal.tsx
+++ b/src/components/DeleteConfirm/DeleteConfirmModal.tsx
@@ -1,66 +1,79 @@
 import {
-    Dialog,
-    DialogTitle,
-    DialogContent,
-    DialogActions,
-    Button,
-    IconButton,
-    Typography,
-  } from "@mui/material";
-  import CloseIcon from "@mui/icons-material/Close";
-  
-  interface DeleteConfirmModalProps {
-    open: boolean;
-    onConfirm: () => void;
-    onCancel: () => void;
-  }
-  
-  const DeleteConfirmModal = ({ open, onConfirm, onCancel }: DeleteConfirmModalProps) => {
-    return (
-        <Dialog
-        open={open}
-        onClose={onCancel}
-        PaperProps={{
-          sx: {
-            width: "400px",       // 원하는 고정 너비
-            maxWidth: "90%",      // 모바일 대응
-            borderRadius: 2,
-          },
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  IconButton,
+  Typography,
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+
+interface DeleteConfirmModalProps {
+  open: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+  category: string;
+}
+
+const DeleteConfirmModal = ({
+  open,
+  onConfirm,
+  onCancel,
+  category = "",
+}: DeleteConfirmModalProps) => {
+  return (
+    <Dialog
+      open={open}
+      onClose={onCancel}
+      PaperProps={{
+        sx: {
+          width: "400px", // 원하는 고정 너비
+          maxWidth: "90%", // 모바일 대응
+          borderRadius: 2,
+        },
+      }}
+    >
+      <DialogTitle
+        sx={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
         }}
       >
-        <DialogTitle sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-          <Typography fontWeight="bold">경고</Typography>
-          <IconButton edge="end" onClick={onCancel}>
-            <CloseIcon />
-          </IconButton>
-        </DialogTitle>
-  
-        <DialogContent>
-          <Typography textAlign="center" mt={1} mb={2}>
-            정말 삭제하시겠습니까?
-          </Typography>
-        </DialogContent>
-  
-        <DialogActions sx={{ justifyContent: "center", mb: 2 }}>
-          <Button
-            onClick={onConfirm}
-            variant="contained"
-            color="error"
-            sx={{ minWidth: 100 }}
-          >
-            삭제
-          </Button>
-          <Button
-            onClick={onCancel}
-            variant="outlined"
-            sx={{ minWidth: 100 }}
-          >
-            취소
-          </Button>
-        </DialogActions>
-      </Dialog>
-    );
-  };
-  
-  export default DeleteConfirmModal;
-  
\ No newline at end of file
+        <Typography variant="h6" fontWeight="bold">
+          {category} 삭제
+        </Typography>
+        <IconButton edge="end" onClick={onCancel}>
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+
+      <DialogContent>
+        <Typography textAlign="center" mt={1} mb={2}>
+          이 {category}을 정말 삭제할까요?
+        </Typography>
+      </DialogContent>
+
+      <DialogActions sx={{ justifyContent: "center", mb: 2 }}>
+        <Button
+          onClick={onConfirm}
+          variant="contained"
+          color="error"
+          sx={{
+            minWidth: 100,
+            boxShadow: "none",
+            "&:hover": { boxShadow: "none" },
+          }}
+        >
+          삭제
+        </Button>
+        <Button onClick={onCancel} variant="outlined" sx={{ minWidth: 100 }}>
+          취소
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default DeleteConfirmModal;
diff --git a/src/components/PageHeader/PageHeader.tsx b/src/components/PageHeader/PageHeader.tsx
index 77312c2..0857f07 100644
--- a/src/components/PageHeader/PageHeader.tsx
+++ b/src/components/PageHeader/PageHeader.tsx
@@ -11,7 +11,6 @@ import { Link, useNavigate } from "react-router-dom";
 import useUserStore from "@stores/useUserStore";
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import apiClient from "@apis/apiClient";
-import ArrowBackIcon from "@mui/icons-material/ArrowBackIos";
 
 interface PageHeaderProps {
   title: string;
@@ -36,11 +35,11 @@ const PageHeader = ({ title, userName, action }: PageHeaderProps) => {
     try {
       const accessToken = sessionStorage.getItem("_ZA");
       const deviceId = localStorage.getItem("deviceId");
-  
+
       if (!accessToken || !deviceId) {
         throw new Error("로그아웃 정보가 부족합니다.");
       }
-  
+
       await apiClient.post(
         "/users/logout",
         {},
@@ -52,12 +51,11 @@ const PageHeader = ({ title, userName, action }: PageHeaderProps) => {
           withCredentials: true,
         }
       );
-  
+
       sessionStorage.removeItem("_ZA");
       clearUser();
       navigate("/sign-in");
     } catch (error) {
-      console.error("로그아웃 실패", error);      
       sessionStorage.removeItem("_ZA");
       clearUser();
       navigate("/sign-in");
@@ -83,16 +81,6 @@ const PageHeader = ({ title, userName, action }: PageHeaderProps) => {
       }}
     >
       <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
-        {
-          <IconButton
-            onClick={() => navigate(-1)}
-            sx={{
-              color: "#222222",
-            }}
-          >
-            <ArrowBackIcon />
-          </IconButton>
-        }
         <Typography
           variant="h5"
           component="h1"
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
new file mode 100644
index 0000000..2a5fc0e
--- /dev/null
+++ b/src/components/Toast/Toast.tsx
@@ -0,0 +1,37 @@
+import { toast, ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+interface ToastProps {
+  message: string;
+  type: "success" | "error";
+}
+
+export const showToast = ({ message, type }: ToastProps) => {
+  toast[type](message, {
+    autoClose: 2000,
+    hideProgressBar: false,
+    closeOnClick: true,
+    pauseOnHover: true,
+    draggable: true,
+    style: {
+      marginTop: "6px",
+      top: "40px",
+    },
+  });
+};
+
+export const ToastProvider = () => {
+  return (
+    <ToastContainer
+      autoClose={2000}
+      hideProgressBar={false}
+      newestOnTop
+      closeOnClick
+      rtl={false}
+      pauseOnFocusLoss
+      draggable
+      pauseOnHover
+      theme="light"
+    />
+  );
+};
diff --git a/src/pages/ContractDetailPage/ContractDetailContent.tsx b/src/pages/ContractDetailPage/ContractDetailContent.tsx
index 0370470..f1ea774 100644
--- a/src/pages/ContractDetailPage/ContractDetailContent.tsx
+++ b/src/pages/ContractDetailPage/ContractDetailContent.tsx
@@ -86,7 +86,7 @@ const ContractDetailContent = ({ contract, histories }: Props) => {
     <>
       {/* 계약 기본정보, 당사자 정보 */}
       <Box display="flex" gap={3} mb={3}>
-        <Card sx={{ flex: 1 }}>
+        <Card sx={{ flex: 1, borderRadius: 2 }}>
           <CardContent>
             <Typography variant="h6" fontWeight="bold" gutterBottom>
               계약 기본 정보
@@ -143,8 +143,14 @@ const ContractDetailContent = ({ contract, histories }: Props) => {
                 );
               })()}
             />
-            <InfoRow label="계약 시작일" value={contract.contractStartDate ?? "-"} />
-            <InfoRow label="계약 종료일" value={contract.contractEndDate ?? "-"} />
+            <InfoRow
+              label="계약 시작일"
+              value={contract.contractStartDate ?? "-"}
+            />
+            <InfoRow
+              label="계약 종료일"
+              value={contract.contractEndDate ?? "-"}
+            />
             {contract.status === "CANCELLED" && (
               <InfoRow
                 label="계약 예상 종료일"
@@ -179,12 +185,15 @@ const ContractDetailContent = ({ contract, histories }: Props) => {
           </CardContent>
         </Card>
 
-        <Card sx={{ flex: 1 }}>
+        <Card sx={{ flex: 1, borderRadius: 2 }}>
           <CardContent>
             <Typography variant="h6" fontWeight="bold" gutterBottom>
               계약 당사자 정보
             </Typography>
-            <InfoRow label="임대/매도인" value={getCustomerNamesDisplay(contract.lessorOrSellerNames)} />
+            <InfoRow
+              label="임대/매도인"
+              value={getCustomerNamesDisplay(contract.lessorOrSellerNames)}
+            />
             <InfoRow
               label="임차/매수인"
               value={getCustomerNamesDisplay(contract.lesseeOrBuyerNames)}
@@ -196,7 +205,7 @@ const ContractDetailContent = ({ contract, histories }: Props) => {
 
       {/* 첨부문서, 히스토리 */}
       <Box display="flex" gap={3}>
-        <Card sx={{ flex: 1, minHeight: 200 }}>
+        <Card sx={{ flex: 1, minHeight: 200, borderRadius: 2 }}>
           <CardContent>
             <Typography variant="h6" fontWeight="bold" gutterBottom>
               첨부 문서
@@ -245,12 +254,21 @@ const ContractDetailContent = ({ contract, histories }: Props) => {
                 </Box>
               ))
             ) : (
-              <Typography color="text.secondary">첨부 문서 없음</Typography>
+              <Box
+                sx={{
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  minHeight: "200px",
+                }}
+              >
+                <Typography color="text.secondary">첨부 문서 없음</Typography>
+              </Box>
             )}
           </CardContent>
         </Card>
 
-        <Card sx={{ flex: 1.4, minHeight: 200 }}>
+        <Card sx={{ flex: 1.4, minHeight: 200, borderRadius: 2 }}>
           <CardContent>
             <Typography variant="h6" fontWeight="bold" gutterBottom>
               상태 변경 이력
@@ -268,10 +286,40 @@ const ContractDetailContent = ({ contract, histories }: Props) => {
                   {histories.map((h, idx) => (
                     <TableRow key={idx}>
                       <TableCell>
-                        {statusKoreanMap[h.prevStatus] ?? h.prevStatus}
+                        <Chip
+                          label={statusKoreanMap[h.prevStatus] ?? h.prevStatus}
+                          variant="outlined"
+                          sx={{
+                            color: CONTRACT_STATUS_TYPES.find(
+                              (item) => item.value === h.prevStatus
+                            )?.color,
+                            borderColor: CONTRACT_STATUS_TYPES.find(
+                              (item) => item.value === h.prevStatus
+                            )?.color,
+                            fontWeight: 500,
+                            fontSize: 13,
+                            height: 28,
+                          }}
+                        />
                       </TableCell>
                       <TableCell>
-                        {statusKoreanMap[h.currentStatus] ?? h.currentStatus}
+                        <Chip
+                          label={
+                            statusKoreanMap[h.currentStatus] ?? h.currentStatus
+                          }
+                          variant="outlined"
+                          sx={{
+                            color: CONTRACT_STATUS_TYPES.find(
+                              (item) => item.value === h.currentStatus
+                            )?.color,
+                            borderColor: CONTRACT_STATUS_TYPES.find(
+                              (item) => item.value === h.currentStatus
+                            )?.color,
+                            fontWeight: 500,
+                            fontSize: 13,
+                            height: 28,
+                          }}
+                        />
                       </TableCell>
                       <TableCell>{h.changedAt}</TableCell>
                     </TableRow>
@@ -279,9 +327,16 @@ const ContractDetailContent = ({ contract, histories }: Props) => {
                 </TableBody>
               </Table>
             ) : (
-              <Typography color="text.secondary" align="center">
-                히스토리 없음
-              </Typography>
+              <Box
+                sx={{
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  minHeight: "200px",
+                }}
+              >
+                <Typography color="text.secondary">히스토리 없음</Typography>
+              </Box>
             )}
           </CardContent>
         </Card>
diff --git a/src/pages/ContractDetailPage/ContractDetailPage.tsx b/src/pages/ContractDetailPage/ContractDetailPage.tsx
index 1b7f889..188667d 100644
--- a/src/pages/ContractDetailPage/ContractDetailPage.tsx
+++ b/src/pages/ContractDetailPage/ContractDetailPage.tsx
@@ -10,7 +10,8 @@ import { toast } from "react-toastify";
 import DeleteConfirmModal from "@components/DeleteConfirm/DeleteConfirmModal";
 import useUserStore from "@stores/useUserStore";
 import EditIcon from "@mui/icons-material/Edit";
-import DeleteIcon from "@mui/icons-material/DeleteOutline";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { showToast } from "@components/Toast/Toast";
 
 const ContractDetailPage = () => {
   const { contractUid } = useParams<{ contractUid: string }>();
@@ -33,12 +34,18 @@ const ContractDetailPage = () => {
     apiClient
       .delete(`/contracts/${contractUid}`)
       .then(() => {
-        toast.success("계약 삭제 성공");
+        showToast({
+          message: "계약을 삭제했습니다.",
+          type: "success",
+        });
         navigate("/contracts");
       })
       .catch((err) => {
         console.error("계약 삭제 실패", err);
-        toast.error("계약 삭제 중 오류가 발생했습니다.");
+        showToast({
+          message: "계약 삭제 중 오류가 발생했습니다.",
+          type: "error",
+        });
       })
       .finally(() => {
         setDeleteModalOpen(false);
@@ -77,9 +84,7 @@ const ContractDetailPage = () => {
 
   return (
     <div className={styles.container}>
-      <div className={styles.header}>
-        <PageHeader title="계약 상세 조회" userName={user?.name || "-"} />
-      </div>
+      <PageHeader title="계약 상세 조회" userName={user?.name || "-"} />
 
       <div className={styles.contents}>
         {editModalOpen && (
@@ -104,10 +109,11 @@ const ContractDetailPage = () => {
           open={deleteModalOpen}
           onConfirm={confirmDelete}
           onCancel={() => setDeleteModalOpen(false)}
+          category="계약"
         />
 
         <div className={styles.contents2}>
-          <Box display="flex" justifyContent="flex-end" mt={0} gap={1} mb={2}>
+          <Box display="flex" justifyContent="flex-end" mt={0} gap={2} mb={3}>
             <Button
               variant="outlined"
               color="primary"
diff --git a/src/pages/ContractListPage/ContractAddButtonList/ContractAddModal/ContractAddModal.tsx b/src/pages/ContractListPage/ContractAddButtonList/ContractAddModal/ContractAddModal.tsx
index bf672c5..7f7cbb1 100644
--- a/src/pages/ContractListPage/ContractAddButtonList/ContractAddModal/ContractAddModal.tsx
+++ b/src/pages/ContractListPage/ContractAddButtonList/ContractAddModal/ContractAddModal.tsx
@@ -6,9 +6,7 @@ import {
   MenuItem,
   TextField,
   Button as MuiButton,
-  Select,
-  Chip,
-  OutlinedInput,
+  Autocomplete,
 } from "@mui/material";
 import { Dayjs } from "dayjs";
 import { DesktopDatePicker } from "@mui/x-date-pickers";
@@ -16,7 +14,7 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import apiClient from "@apis/apiClient";
 import Button from "@components/Button";
-import { toast } from "react-toastify";
+import { showToast } from "@components/Toast/Toast";
 
 const CONTRACT_STATUS_OPTIONS = [
   { value: "LISTED", label: "매물 등록" },
@@ -190,7 +188,10 @@ const ContractAddModal = ({ open, handleClose, fetchContractData }: Props) => {
         headers: { "Content-Type": "multipart/form-data" },
       })
       .then(() => {
-        toast.success("계약 등록 성공!");
+        showToast({
+          message: "계약을 등록했습니다.",
+          type: "success",
+        });
         fetchContractData();
         handleModalClose();
       })
@@ -199,20 +200,32 @@ const ContractAddModal = ({ open, handleClose, fetchContractData }: Props) => {
         const message = err?.response?.data?.message;
 
         if (!message) {
-          toast.error("계약 등록에 실패했습니다.");
+          showToast({
+            message: "계약 등록에 실패했습니다.",
+            type: "error",
+          });
           return;
         }
 
         if (message.includes("이미 등록된 계약입니다")) {
-          toast.error("이미 등록된 계약입니다.");
+          showToast({
+            message: "이미 등록된 계약입니다.",
+            type: "error",
+          });
           return;
         }
 
         if (message.includes("해당 매물은 이미 계약 중입니다")) {
-          toast.error("해당 매물은 이미 진행 중인 계약이 있습니다.");
+          showToast({
+            message: "해당 매물은 이미 진행 중인 계약이 있습니다.",
+            type: "error",
+          });
           return;
         }
-        toast.error(message);
+        showToast({
+          message,
+          type: "error",
+        });
       });
   };
 
@@ -285,80 +298,48 @@ const ContractAddModal = ({ open, handleClose, fetchContractData }: Props) => {
           ))}
         </TextField>
 
-        <TextField
-          select
-          label="임대/매도자 선택 *"
-          value={lessorUids}
-          onChange={(e) =>
-            setLessorUids(
-              typeof e.target.value === "string"
-                ? e.target.value.split(",").map(Number)
-                : e.target.value
-            )
-          }
-          SelectProps={{
-            multiple: true,
-            displayEmpty: true,
-            renderValue: (selected) =>
-              selected.length === 0
-                ? undefined
-                : (selected as number[])
-                    .map((uid) => {
-                      const customer = customerOptions.find(
-                        (c) => c.uid === uid
-                      );
-                      return customer?.name || uid;
-                    })
-                    .join(", "),
+        <Autocomplete
+          multiple
+          options={customerOptions}
+          value={customerOptions.filter((customer) =>
+            lessorUids.includes(customer.uid)
+          )}
+          onChange={(_, newValue) => {
+            setLessorUids(newValue.map((option) => option.uid));
           }}
-          error={!!errors.lessorUids}
-          helperText={errors.lessorUids}
-          fullWidth
+          getOptionLabel={(option) => option.name}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              label="임대/매도자 선택 *"
+              error={!!errors.lessorUids}
+              helperText={errors.lessorUids}
+              fullWidth
+            />
+          )}
           sx={{ mb: 2 }}
-        >
-          {customerOptions.map((c) => (
-            <MenuItem key={c.uid} value={c.uid}>
-              {c.name}
-            </MenuItem>
-          ))}
-        </TextField>
-        <TextField
-          select
-          label="임차/매수자 선택"
-          value={lesseeUids ?? []}
-          onChange={(e) =>
-            setLesseeUids(
-              typeof e.target.value === "string"
-                ? e.target.value.split(",").map(Number)
-                : e.target.value
-            )
-          }
-          SelectProps={{
-            multiple: true,
-            displayEmpty: true,
-            renderValue: (selected) =>
-              selected.length === 0
-                ? undefined
-                : (selected as number[])
-                    .map((uid) => {
-                      const customer = customerOptions.find(
-                        (c) => c.uid === uid
-                      );
-                      return customer?.name || uid;
-                    })
-                    .join(", "),
+        />
+        <Autocomplete
+          multiple
+          options={customerOptions}
+          value={customerOptions.filter((customer) =>
+            lesseeUids.includes(customer.uid)
+          )}
+          onChange={(_, newValue) => {
+            setLesseeUids(newValue.map((option) => option.uid));
           }}
-          error={!!errors.lesseeUids}
-          helperText={errors.lesseeUids}
-          fullWidth
+          getOptionLabel={(option) => option.name}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              label="임차/매수자 선택"
+              error={!!errors.lesseeUids}
+              helperText={errors.lesseeUids}
+              fullWidth
+            />
+          )}
           sx={{ mb: 2 }}
-        >
-          {customerOptions.map((c) => (
-            <MenuItem key={c.uid} value={c.uid}>
-              {c.name}
-            </MenuItem>
-          ))}
-        </TextField>
+        />
 
         <TextField
           select
diff --git a/src/pages/ContractListPage/ContractAddButtonList/ContractEditModal/ContractEditModal.tsx b/src/pages/ContractListPage/ContractAddButtonList/ContractEditModal/ContractEditModal.tsx
index 59882f2..7a21fdd 100644
--- a/src/pages/ContractListPage/ContractAddButtonList/ContractEditModal/ContractEditModal.tsx
+++ b/src/pages/ContractListPage/ContractAddButtonList/ContractEditModal/ContractEditModal.tsx
@@ -6,6 +6,7 @@ import {
   MenuItem,
   TextField,
   Button as MuiButton,
+  Autocomplete,
 } from "@mui/material";
 import { Dayjs } from "dayjs";
 import { DesktopDatePicker } from "@mui/x-date-pickers";
@@ -20,6 +21,7 @@ import {
   ContractDetail,
   ContractDocument,
 } from "@pages/ContractDetailPage/ContractDetailPage";
+import { showToast } from "@components/Toast/Toast";
 
 const CONTRACT_STATUS_OPTIONS = [
   { value: "LISTED", label: "매물 등록" },
@@ -115,7 +117,9 @@ const ContractEditModal = ({
       setLessorUids(
         (data.lessorOrSellerNames ?? [])
           .map((name: string) => {
-            const found = allCustomers.find((c: { uid: number; name: string }) => c.name === name);
+            const found = allCustomers.find(
+              (c: { uid: number; name: string }) => c.name === name
+            );
             return found ? found.uid : null;
           })
           .filter((uid: number | null): uid is number => uid !== null)
@@ -123,19 +127,25 @@ const ContractEditModal = ({
       setLesseeUids(
         (data.lesseeOrBuyerNames ?? [])
           .map((name: string) => {
-            const found = allCustomers.find((c: { uid: number; name: string }) => c.name === name);
+            const found = allCustomers.find(
+              (c: { uid: number; name: string }) => c.name === name
+            );
             return found ? found.uid : null;
           })
           .filter((uid: number | null): uid is number => uid !== null)
       );
 
       const matchedProperty = allProperties.find(
-        (p: { address: AgentPropertyResponse }) =>
-          p.address === data.propertyAddress
+        (p: { propertyUid: string }) => p.propertyUid === data.propertyUid
       );
+      console.log(price.a);
       setPropertyUid(matchedProperty?.uid ?? null);
 
-      setCategory(data.category === "null" || data.category === undefined ? null : data.category);
+      setCategory(
+        data.category === "null" || data.category === undefined
+          ? null
+          : data.category
+      );
       setContractDate(data.contractDate ? dayjs(data.contractDate) : null);
       setContractStartDate(
         data.contractStartDate ? dayjs(data.contractStartDate) : null
@@ -206,8 +216,13 @@ const ContractEditModal = ({
       newErrors.contractStartDate = "시작일은 종료일보다 이전이어야 합니다.";
     }
 
-    if (!lessorUids.length) newErrors.lessorUid = "임대/매도자를 선택해 주세요.";
-    if (lessorUids.length > 1 && lesseeUids.length > 1 && lessorUids.some(id => lesseeUids.includes(id))) {
+    if (!lessorUids.length)
+      newErrors.lessorUid = "임대/매도자를 선택해 주세요.";
+    if (
+      lessorUids.length > 1 &&
+      lesseeUids.length > 1 &&
+      lessorUids.some((id) => lesseeUids.includes(id))
+    ) {
       newErrors.lesseeUid = "임대자와 임차자는 같을 수 없습니다.";
     }
 
@@ -275,13 +290,20 @@ const ContractEditModal = ({
         headers: { "Content-Type": "multipart/form-data" },
       })
       .then(() => {
-        toast.success("계약 수정 완료!");
+        showToast({
+          message: "계약을 수정했습니다.",
+          type: "success",
+        });
         fetchContractData();
         handleClose();
       })
-      .catch((err) => {        
-        const errorMessage = err.response?.data?.message || "계약 수정 실패";
-        toast.error(errorMessage);
+      .catch((err) => {
+        const errorMessage =
+          err.response?.data?.message || "계약 수정에 실패했습니다.";
+        showToast({
+          message: errorMessage,
+          type: "error",
+        });
       });
   };
 
@@ -325,7 +347,6 @@ const ContractEditModal = ({
             const val = e.target.value;
             setCategory(val === "" ? null : val);
           }}
-          
           error={!!errors.category}
           helperText={errors.category}
           fullWidth
@@ -353,84 +374,49 @@ const ContractEditModal = ({
           ))}
         </TextField>
 
-        <TextField
-          select
-          label="임대/매도자 선택 *"
-          value={lessorUids}
-          onChange={(e) =>
-            setLessorUids(
-              typeof e.target.value === "string"
-                ? e.target.value.split(",").map(Number)
-                : e.target.value
-            )
-          }
-          SelectProps={{
-            multiple: true,
-            displayEmpty: true,
-            renderValue: (selected: unknown) => {
-              const arr = selected as number[];
-              return arr.length === 0
-                ? undefined
-                : arr
-                    .map((uid) => {
-                      const customer = customerOptions.find(
-                        (c) => c.uid === uid
-                      );
-                      return customer?.name || uid;
-                    })
-                    .join(", ");
-            },
+        <Autocomplete
+          multiple
+          options={customerOptions}
+          getOptionLabel={(option) => option.name}
+          value={customerOptions.filter((option) =>
+            lessorUids.includes(option.uid)
+          )}
+          onChange={(_, newValue) => {
+            setLessorUids(newValue.map((option) => option.uid));
           }}
-          error={!!errors.lessorUid}
-          helperText={errors.lessorUid}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              label="임대/매도자 선택 *"
+              error={!!errors.lessorUid}
+              helperText={errors.lessorUid}
+            />
+          )}
           fullWidth
           sx={{ mb: 2 }}
-        >
-          {customerOptions.map((c) => (
-            <MenuItem key={c.uid} value={c.uid}>
-              {c.name}
-            </MenuItem>
-          ))}
-        </TextField>
-        <TextField
-          select
-          label="임차/매수자 선택"
-          value={lesseeUids}
-          onChange={(e) =>
-            setLesseeUids(
-              typeof e.target.value === "string"
-                ? e.target.value.split(",").map(Number)
-                : e.target.value
-            )
-          }
-          SelectProps={{
-            multiple: true,
-            displayEmpty: true,
-            renderValue: (selected: unknown) => {
-              const arr = selected as number[];
-              return arr.length === 0
-                ? undefined
-                : arr
-                    .map((uid) => {
-                      const customer = customerOptions.find(
-                        (c) => c.uid === uid
-                      );
-                      return customer?.name || uid;
-                    })
-                    .join(", ");
-            },
+        />
+
+        <Autocomplete
+          multiple
+          options={customerOptions}
+          getOptionLabel={(option) => option.name}
+          value={customerOptions.filter((option) =>
+            lesseeUids.includes(option.uid)
+          )}
+          onChange={(_, newValue) => {
+            setLesseeUids(newValue.map((option) => option.uid));
           }}
-          error={!!errors.lesseeUid}
-          helperText={errors.lesseeUid}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              label="임차/매수자 선택"
+              error={!!errors.lesseeUid}
+              helperText={errors.lesseeUid}
+            />
+          )}
           fullWidth
           sx={{ mb: 2 }}
-        >
-          {customerOptions.map((c) => (
-            <MenuItem key={c.uid} value={c.uid}>
-              {c.name}
-            </MenuItem>
-          ))}
-        </TextField>
+        />
 
         <TextField
           select
diff --git a/src/pages/ContractListPage/ContractListPage.tsx b/src/pages/ContractListPage/ContractListPage.tsx
index 847835f..1901034 100644
--- a/src/pages/ContractListPage/ContractListPage.tsx
+++ b/src/pages/ContractListPage/ContractListPage.tsx
@@ -14,8 +14,8 @@ import AddIcon from "@mui/icons-material/Add";
 
 export interface ContractItem {
   uid: number;
-  lessorOrSellerName: string;
-  lesseeOrBuyerName: string | null;
+  lessorOrSellerNames: string[];
+  lesseeOrBuyerNames: string[];
   category: "SALE" | "DEPOSIT" | "MONTHLY" | null;
   contractDate: string | null;
   contractStartDate: string | null;
@@ -95,7 +95,7 @@ function ContractListPage() {
           period: selectedPeriod || "",
           status: selectedStatus,
           sort: selectedSort,
-          page: page+1,
+          page: page + 1,
           size: rowsPerPage,
         },
       })
@@ -113,7 +113,14 @@ function ContractListPage() {
         setLoading(false);
         setFilterModalOpen(false);
       });
-  }, [searchKeyword, selectedPeriod, selectedStatus, selectedSort, page, rowsPerPage]);
+  }, [
+    searchKeyword,
+    selectedPeriod,
+    selectedStatus,
+    selectedSort,
+    page,
+    rowsPerPage,
+  ]);
 
   useEffect(() => {
     fetchContractData();
@@ -138,7 +145,27 @@ function ContractListPage() {
               placeholder="정렬 기준"
               classNamePrefix="custom-select"
               menuShouldScrollIntoView={false}
-              styles={{ control: (base, state) => ({ ...base, width: 140, borderRadius: 14, border: state.isFocused ? "1.5px solid #1976d2" : "1.5px solid #ccc", fontSize: 13, minHeight: 36, paddingLeft: 8, boxShadow: "none", "&:hover": { borderColor: "#1976d2" } }), menu: (base) => ({ ...base, borderRadius: 8, zIndex: 9999, maxHeight: "none" }) }}
+              styles={{
+                control: (base, state) => ({
+                  ...base,
+                  width: 140,
+                  borderRadius: 14,
+                  border: state.isFocused
+                    ? "1.5px solid #1976d2"
+                    : "1.5px solid #ccc",
+                  fontSize: 13,
+                  minHeight: 36,
+                  paddingLeft: 8,
+                  boxShadow: "none",
+                  "&:hover": { borderColor: "#1976d2" },
+                }),
+                menu: (base) => ({
+                  ...base,
+                  borderRadius: 8,
+                  zIndex: 9999,
+                  maxHeight: "none",
+                }),
+              }}
             />
 
             <div className={styles.searchInputWrapper}>
@@ -158,19 +185,46 @@ function ContractListPage() {
             <div className={styles.filterGroup}>
               <Select
                 options={statusOptions}
-                value={statusOptions.find((opt) => opt.value === selectedStatus)}
-                onChange={(selected) => setSelectedStatus(selected?.value ?? "")}
+                value={statusOptions.find(
+                  (opt) => opt.value === selectedStatus
+                )}
+                onChange={(selected) =>
+                  setSelectedStatus(selected?.value ?? "")
+                }
                 placeholder="상태 선택"
                 classNamePrefix="custom-select"
                 menuShouldScrollIntoView={false}
-                styles={{ control: (base, state) => ({ ...base, borderRadius: 14, border: state.isFocused ? "1.5px solid #1976d2" : "1.5px solid #ccc", fontSize: 13, minHeight: 36, paddingLeft: 8, boxShadow: "none", "&:hover": { borderColor: "#1976d2" } }), menu: (base) => ({ ...base, borderRadius: 8, zIndex: 9999, maxHeight: "none" }) }}
+                styles={{
+                  control: (base, state) => ({
+                    ...base,
+                    borderRadius: 14,
+                    border: state.isFocused
+                      ? "1.5px solid #1976d2"
+                      : "1.5px solid #ccc",
+                    fontSize: 13,
+                    minHeight: 36,
+                    paddingLeft: 8,
+                    boxShadow: "none",
+                    "&:hover": { borderColor: "#1976d2" },
+                  }),
+                  menu: (base) => ({
+                    ...base,
+                    borderRadius: 8,
+                    zIndex: 9999,
+                    maxHeight: "none",
+                  }),
+                }}
               />
 
               <div className={styles.filterButtons}>
                 {Object.keys(periodMapping).map((label) => (
                   <button
                     key={label}
-                    className={periodMapping[label] === selectedPeriod ? `${styles.filterButton} ${styles.filterButtonActive}` : styles.filterButton}
+                    className={
+                      periodMapping[label] === selectedPeriod
+                        ? `${styles.filterButton} ${styles.filterButtonActive}`
+                        : styles.filterButton
+                    }
                     onClick={() => handlePeriodClick(label)}
                   >
                     {label}
@@ -185,7 +239,8 @@ function ContractListPage() {
               onClick={() => setIsAddModalOpen(true)}
               sx={{
                 backgroundColor: "#164F9E",
-                "&:hover": { backgroundColor: "#0D3B7A" },
+                boxShadow: "none",
+                "&:hover": { backgroundColor: "#0D3B7A", boxShadow: "none" },
                 height: "36px",
                 fontSize: "13px",
                 padding: "0 16px",
@@ -212,7 +267,10 @@ function ContractListPage() {
         <ContractFilterModal
           open={filterModalOpen}
           onClose={() => setFilterModalOpen(false)}
-          initialFilter={{ period: selectedPeriod || "", status: selectedStatus }}
+          initialFilter={{
+            period: selectedPeriod || "",
+            status: selectedStatus,
+          }}
           onApply={({ period, status }) => {
             setSelectedPeriod(period || null);
             setSelectedStatus(status);
@@ -229,4 +287,4 @@ function ContractListPage() {
   );
 }
 
-export default ContractListPage;
\ No newline at end of file
+export default ContractListPage;
diff --git a/src/pages/ContractListPage/ContractTable/ContractTable.tsx b/src/pages/ContractListPage/ContractTable/ContractTable.tsx
index 887a637..a36555a 100644
--- a/src/pages/ContractListPage/ContractTable/ContractTable.tsx
+++ b/src/pages/ContractListPage/ContractTable/ContractTable.tsx
@@ -113,7 +113,9 @@ const ContractTable = ({
     );
   };
 
-  const getCustomerDisplay = (customer: string | string[] | null | undefined) => {
+  const getCustomerDisplay = (
+    customer: string | string[] | null | undefined
+  ) => {
     if (!customer || customer === "null") return "-";
     if (Array.isArray(customer)) {
       if (customer.length === 0) return "-";
@@ -125,7 +127,14 @@ const ContractTable = ({
 
   return (
     <Box sx={{ width: "100%", mt: "28px" }}>
-      <Paper sx={{ width: "100%", overflow: "hidden" }}>
+      <Paper
+        sx={{
+          width: "100%",
+          overflow: "hidden",
+          borderRadius: "8px",
+          boxShadow: "0 2px 6px rgba(0, 0, 0, 0.05)",
+        }}
+      >
         <TableContainer>
           <Table sx={{ minWidth: 650 }}>
             <TableHead>
diff --git a/src/pages/CounselDetailPage/CounselDetailPage.tsx b/src/pages/CounselDetailPage/CounselDetailPage.tsx
index 70e910b..08b15e2 100644
--- a/src/pages/CounselDetailPage/CounselDetailPage.tsx
+++ b/src/pages/CounselDetailPage/CounselDetailPage.tsx
@@ -1,7 +1,6 @@
 import {
   Box,
   Typography,
-  Paper,
   CircularProgress,
   Button,
   Dialog,
@@ -32,6 +31,7 @@ import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
 import { toast } from "react-toastify";
 import { AxiosError } from "axios";
 import styles from "./styles/CounselDetailPage.module.css";
+import { showToast } from "@components/Toast/Toast";
 
 const COUNSEL_TYPES = {
   PURCHASE: "매수",
@@ -147,7 +147,10 @@ function CounselDetailPage() {
         }
       } catch (error) {
         console.error("Failed to fetch counsel data:", error);
-        toast.error("상담 정보를 불러오는데 실패했습니다.");
+        showToast({
+          message: "상담 정보를 불러오는데 실패했습니다.",
+          type: "error",
+        });
       } finally {
         setIsLoading(false);
       }
@@ -188,7 +191,10 @@ function CounselDetailPage() {
       if (response.data.success) {
         setCounselData(editedData);
         setIsEditing(false);
-        toast.success("상담 내용을 수정했습니다.");
+        showToast({
+          message: "상담 내용을 수정했습니다.",
+          type: "success",
+        });
       }
     } catch (error) {
       console.error("Failed to update counsel:", error);
@@ -196,7 +202,10 @@ function CounselDetailPage() {
       const errorMessage =
         axiosError.response?.data?.message ||
         "상담 내용 수정 중 오류가 발생했습니다.";
-      toast.error(errorMessage);
+      showToast({
+        message: errorMessage,
+        type: "error",
+      });
     }
   };
 
@@ -234,7 +243,10 @@ function CounselDetailPage() {
     try {
       const response = await apiClient.delete(`/counsels/${counselUid}`);
       if (response.data.success) {
-        toast.success("상담이 성공적으로 삭제되었습니다.");
+        showToast({
+          message: "상담을 삭제했습니다.",
+          type: "success",
+        });
         navigate("/counsels", { replace: true });
       }
     } catch (error) {
@@ -243,7 +255,10 @@ function CounselDetailPage() {
       const errorMessage =
         axiosError.response?.data?.message ||
         "상담 삭제 중 오류가 발생했습니다.";
-      toast.error(errorMessage);
+      showToast({
+        message: errorMessage,
+        type: "error",
+      });
       setDeleteDialogOpen(false);
     }
   };
@@ -295,7 +310,14 @@ function CounselDetailPage() {
       <PageHeader title="상담 상세" userName={user?.name || "-"} />
 
       <Box className={styles.contentContainer}>
-        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, marginBottom: 16 }}>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "flex-end",
+            gap: 8,
+            marginBottom: 16,
+          }}
+        >
           {!isEditing ? (
             <>
               <Button
@@ -303,7 +325,7 @@ function CounselDetailPage() {
                 color="primary"
                 startIcon={<EditIcon />}
                 onClick={handleEdit}
-                sx={{ backgroundColor: 'white' }}
+                sx={{ backgroundColor: "white" }}
               >
                 수정
               </Button>
@@ -312,7 +334,7 @@ function CounselDetailPage() {
                 color="error"
                 startIcon={<DeleteOutlineIcon />}
                 onClick={handleDeleteClick}
-                sx={{ backgroundColor: 'white' }}
+                sx={{ backgroundColor: "white" }}
               >
                 삭제
               </Button>
@@ -324,7 +346,7 @@ function CounselDetailPage() {
                 color="inherit"
                 startIcon={<CloseIcon />}
                 onClick={handleCancelEdit}
-                sx={{ backgroundColor: 'white' }}
+                sx={{ backgroundColor: "white" }}
               >
                 취소
               </Button>
@@ -333,7 +355,7 @@ function CounselDetailPage() {
                 color="primary"
                 startIcon={<SaveIcon />}
                 onClick={handleSave}
-                sx={{ backgroundColor: 'white' }}
+                sx={{ backgroundColor: "white" }}
               >
                 저장
               </Button>
@@ -374,21 +396,27 @@ function CounselDetailPage() {
                   </Select>
                 </FormControl>
               ) : (
-                <Box sx={{ display: 'inline-block' }}>
+                <Box sx={{ display: "inline-block" }}>
                   <Chip
                     label={COUNSEL_TYPES[data.type]}
                     size="small"
                     sx={{
-                      backgroundColor: data.type === "PURCHASE" ? "#164F9E" :
-                                     data.type === "SALE" ? "#2E7D32" :
-                                     data.type === "LEASE" ? "#D4A72C" :
-                                     data.type === "RENT" ? "#7B1FA2" : "#666666",
+                      backgroundColor:
+                        data.type === "PURCHASE"
+                          ? "#164F9E"
+                          : data.type === "SALE"
+                          ? "#2E7D32"
+                          : data.type === "LEASE"
+                          ? "#D4A72C"
+                          : data.type === "RENT"
+                          ? "#7B1FA2"
+                          : "#666666",
                       color: "white",
                       height: "24px",
                       "& .MuiChip-label": {
                         px: 1,
-                        fontSize: "12px"
-                      }
+                        fontSize: "12px",
+                      },
                     }}
                   />
                 </Box>
@@ -400,7 +428,9 @@ function CounselDetailPage() {
                 <TextField
                   type="datetime-local"
                   value={dayjs(data.counselDate).format("YYYY-MM-DDTHH:mm")}
-                  onChange={(e) => handleInputChange("counselDate", e.target.value)}
+                  onChange={(e) =>
+                    handleInputChange("counselDate", e.target.value)
+                  }
                   fullWidth
                   size="small"
                 />
@@ -415,14 +445,18 @@ function CounselDetailPage() {
               {isEditing ? (
                 <TextField
                   type="date"
-                  value={data.dueDate ? dayjs(data.dueDate).format("YYYY-MM-DD") : ""}
+                  value={
+                    data.dueDate ? dayjs(data.dueDate).format("YYYY-MM-DD") : ""
+                  }
                   onChange={(e) => handleInputChange("dueDate", e.target.value)}
                   fullWidth
                   size="small"
                 />
               ) : (
                 <span className={styles.infoValue}>
-                  {data.dueDate ? dayjs(data.dueDate).format("YYYY-MM-DD") : "-"}
+                  {data.dueDate
+                    ? dayjs(data.dueDate).format("YYYY-MM-DD")
+                    : "-"}
                 </span>
               )}
             </div>
@@ -441,7 +475,7 @@ function CounselDetailPage() {
                   label="완료"
                 />
               ) : (
-                <Box sx={{ display: 'inline-block' }}>
+                <Box sx={{ display: "inline-block" }}>
                   <Chip
                     label={data.completed ? "완료" : "진행중"}
                     size="small"
@@ -451,8 +485,8 @@ function CounselDetailPage() {
                       height: "24px",
                       "& .MuiChip-label": {
                         px: 1,
-                        fontSize: "12px"
-                      }
+                        fontSize: "12px",
+                      },
                     }}
                   />
                 </Box>
@@ -475,44 +509,123 @@ function CounselDetailPage() {
             </div>
             <div className={styles.infoItem}>
               <span className={styles.infoLabel}>고객 유형</span>
-              <span className={styles.infoValue}>
-                {data.customer.tenant && '임차인'}
-                {data.customer.landlord && '임대인'}
-                {data.customer.buyer && '매수자'}
-                {data.customer.seller && '매도자'}
-                {!data.customer.tenant && !data.customer.landlord && !data.customer.buyer && !data.customer.seller && '-'}
-              </span>
+              <Box sx={{ display: "flex", gap: 1 }}>
+                {data.customer.tenant && (
+                  <Chip
+                    label="임차인"
+                    size="small"
+                    sx={{
+                      backgroundColor: "#FCE8D4",
+                      color: "#E67E00",
+                      height: "24px",
+                      "& .MuiChip-label": {
+                        px: 1,
+                        fontSize: "12px",
+                      },
+                    }}
+                  />
+                )}
+                {data.customer.landlord && (
+                  <Chip
+                    label="임대인"
+                    size="small"
+                    sx={{
+                      backgroundColor: "#FCDADA",
+                      color: "#D63939",
+                      height: "24px",
+                      "& .MuiChip-label": {
+                        px: 1,
+                        fontSize: "12px",
+                      },
+                    }}
+                  />
+                )}
+                {data.customer.buyer && (
+                  <Chip
+                    label="매수자"
+                    size="small"
+                    sx={{
+                      backgroundColor: "#D4EDDC",
+                      color: "#0E8A3E",
+                      height: "24px",
+                      "& .MuiChip-label": {
+                        px: 1,
+                        fontSize: "12px",
+                      },
+                    }}
+                  />
+                )}
+                {data.customer.seller && (
+                  <Chip
+                    label="매도자"
+                    size="small"
+                    sx={{
+                      backgroundColor: "#D6E6F9",
+                      color: "#1B64C2",
+                      height: "24px",
+                      "& .MuiChip-label": {
+                        px: 1,
+                        fontSize: "12px",
+                      },
+                    }}
+                  />
+                )}
+                {!data.customer.tenant &&
+                  !data.customer.landlord &&
+                  !data.customer.buyer &&
+                  !data.customer.seller && (
+                    <Chip
+                      label="없음"
+                      size="small"
+                      sx={{
+                        backgroundColor: "#F5F5F5",
+                        color: "#757575",
+                        height: "24px",
+                        "& .MuiChip-label": {
+                          px: 1,
+                          fontSize: "12px",
+                        },
+                      }}
+                    />
+                  )}
+              </Box>
             </div>
             <div className={styles.infoItem}>
               <span className={styles.infoLabel}>희망 지역</span>
               <span className={styles.infoValue}>
-                {data.customer.preferredRegion || '-'}
+                {data.customer.preferredRegion || "-"}
               </span>
             </div>
-            {data.customer.minPrice !== null && data.customer.maxPrice !== null && (
-              <div className={styles.infoItem}>
-                <span className={styles.infoLabel}>희망 매매가</span>
-                <span className={styles.infoValue}>
-                  {data.customer.minPrice.toLocaleString()} ~ {data.customer.maxPrice.toLocaleString()}원
-                </span>
-              </div>
-            )}
-            {data.customer.minDeposit !== null && data.customer.maxDeposit !== null && (
-              <div className={styles.infoItem}>
-                <span className={styles.infoLabel}>희망 보증금</span>
-                <span className={styles.infoValue}>
-                  {data.customer.minDeposit.toLocaleString()} ~ {data.customer.maxDeposit.toLocaleString()}원
-                </span>
-              </div>
-            )}
-            {data.customer.minRent !== null && data.customer.maxRent !== null && (
-              <div className={styles.infoItem}>
-                <span className={styles.infoLabel}>희망 월세</span>
-                <span className={styles.infoValue}>
-                  {data.customer.minRent.toLocaleString()} ~ {data.customer.maxRent.toLocaleString()}원
-                </span>
-              </div>
-            )}
+            {data.customer.minPrice !== null &&
+              data.customer.maxPrice !== null && (
+                <div className={styles.infoItem}>
+                  <span className={styles.infoLabel}>희망 매매가</span>
+                  <span className={styles.infoValue}>
+                    {data.customer.minPrice.toLocaleString()} ~{" "}
+                    {data.customer.maxPrice.toLocaleString()}원
+                  </span>
+                </div>
+              )}
+            {data.customer.minDeposit !== null &&
+              data.customer.maxDeposit !== null && (
+                <div className={styles.infoItem}>
+                  <span className={styles.infoLabel}>희망 보증금</span>
+                  <span className={styles.infoValue}>
+                    {data.customer.minDeposit.toLocaleString()} ~{" "}
+                    {data.customer.maxDeposit.toLocaleString()}원
+                  </span>
+                </div>
+              )}
+            {data.customer.minRent !== null &&
+              data.customer.maxRent !== null && (
+                <div className={styles.infoItem}>
+                  <span className={styles.infoLabel}>희망 월세</span>
+                  <span className={styles.infoValue}>
+                    {data.customer.minRent.toLocaleString()} ~{" "}
+                    {data.customer.maxRent.toLocaleString()}원
+                  </span>
+                </div>
+              )}
           </div>
         </div>
 
@@ -523,12 +636,16 @@ function CounselDetailPage() {
             <div className={styles.infoGrid}>
               <div className={styles.infoItem}>
                 <span className={styles.infoLabel}>주소</span>
-                <span className={styles.infoValue}>{data.property.address}</span>
+                <span className={styles.infoValue}>
+                  {data.property.address}
+                </span>
               </div>
               <div className={styles.infoItem}>
                 <span className={styles.infoLabel}>매물 유형</span>
                 <span className={styles.infoValue}>
-                  {PROPERTY_CATEGORIES[data.property.type as PropertyCategory] || data.property.type}
+                  {PROPERTY_CATEGORIES[
+                    data.property.type as PropertyCategory
+                  ] || data.property.type}
                 </span>
               </div>
               {data.property.price !== null && data.property.price !== 0 && (
@@ -539,22 +656,24 @@ function CounselDetailPage() {
                   </span>
                 </div>
               )}
-              {data.property.deposit !== null && data.property.deposit !== 0 && (
-                <div className={styles.infoItem}>
-                  <span className={styles.infoLabel}>보증금</span>
-                  <span className={styles.infoValue}>
-                    {data.property.deposit.toLocaleString()}원
-                  </span>
-                </div>
-              )}
-              {data.property.monthlyRent !== null && data.property.monthlyRent !== 0 && (
-                <div className={styles.infoItem}>
-                  <span className={styles.infoLabel}>월세</span>
-                  <span className={styles.infoValue}>
-                    {data.property.monthlyRent.toLocaleString()}원
-                  </span>
-                </div>
-              )}
+              {data.property.deposit !== null &&
+                data.property.deposit !== 0 && (
+                  <div className={styles.infoItem}>
+                    <span className={styles.infoLabel}>보증금</span>
+                    <span className={styles.infoValue}>
+                      {data.property.deposit.toLocaleString()}원
+                    </span>
+                  </div>
+                )}
+              {data.property.monthlyRent !== null &&
+                data.property.monthlyRent !== 0 && (
+                  <div className={styles.infoItem}>
+                    <span className={styles.infoLabel}>월세</span>
+                    <span className={styles.infoValue}>
+                      {data.property.monthlyRent.toLocaleString()}원
+                    </span>
+                  </div>
+                )}
               <div className={styles.infoItem}>
                 <span className={styles.infoLabel}>전용면적</span>
                 <span className={styles.infoValue}>
@@ -569,11 +688,17 @@ function CounselDetailPage() {
               </div>
               <div className={styles.infoItem}>
                 <span className={styles.infoLabel}>층수</span>
-                <span className={styles.infoValue}>{data.property.floor}층</span>
+                <span className={styles.infoValue}>
+                  {data.property.floor}층
+                </span>
               </div>
               <div className={styles.infoItem}>
                 <span className={styles.infoLabel}>준공년도</span>
-                <span className={styles.infoValue}>{data.property.constructionYear}년</span>
+                <span className={styles.infoValue}>
+                  {data.property.constructionYear
+                    ? `${data.property.constructionYear}년`
+                    : "-"}
+                </span>
               </div>
               <div className={styles.infoItem}>
                 <span className={styles.infoLabel}>특징</span>
@@ -582,7 +707,9 @@ function CounselDetailPage() {
                     <span className={styles.featureChip}>엘리베이터</span>
                   )}
                   {data.property.parkingCapacity > 0 && (
-                    <span className={styles.featureChip}>주차 {data.property.parkingCapacity}대</span>
+                    <span className={styles.featureChip}>
+                      주차 {data.property.parkingCapacity}대
+                    </span>
                   )}
                   {data.property.hasPet && (
                     <span className={styles.featureChip}>반려동물</span>
@@ -592,7 +719,9 @@ function CounselDetailPage() {
               {data.property.description && (
                 <div className={styles.infoItem}>
                   <span className={styles.infoLabel}>상세 설명</span>
-                  <span className={styles.infoValue}>{data.property.description}</span>
+                  <span className={styles.infoValue}>
+                    {data.property.description}
+                  </span>
                 </div>
               )}
             </div>
@@ -675,9 +804,7 @@ function CounselDetailPage() {
         <Dialog open={deleteDialogOpen} onClose={handleDeleteCancel}>
           <DialogTitle>상담 삭제</DialogTitle>
           <DialogContent>
-            <Typography>
-              정말로 상담을 삭제하시겠습니까?
-            </Typography>
+            <Typography>정말로 상담을 삭제하시겠습니까?</Typography>
           </DialogContent>
           <DialogActions>
             <Button onClick={handleDeleteCancel}>취소</Button>
diff --git a/src/pages/CounselDetailPage/styles/CounselDetailPage.module.css b/src/pages/CounselDetailPage/styles/CounselDetailPage.module.css
index c61ba05..fa94396 100644
--- a/src/pages/CounselDetailPage/styles/CounselDetailPage.module.css
+++ b/src/pages/CounselDetailPage/styles/CounselDetailPage.module.css
@@ -38,10 +38,13 @@
 }
 
 .cardTitle {
-  font-size: 18px;
-  font-weight: 600;
-  margin-bottom: 16px;
-  color: #333;
+  margin: 0;
+  font-size: 1.2rem !important;
+  font-weight: 700 !important;
+  padding-bottom: 8px !important;
+  line-height: 1.6;
+  letter-spacing: 0.0075em;
+  margin-bottom: 0.35em !important;
 }
 
 .infoGrid {
@@ -179,4 +182,4 @@
   border-radius: 4px;
   cursor: pointer;
   font-weight: 500;
-} 
\ No newline at end of file
+}
diff --git a/src/pages/CounselListPage/CounselListPage.tsx b/src/pages/CounselListPage/CounselListPage.tsx
index d7825c6..de202f0 100644
--- a/src/pages/CounselListPage/CounselListPage.tsx
+++ b/src/pages/CounselListPage/CounselListPage.tsx
@@ -12,6 +12,9 @@ import {
   CircularProgress,
   Button,
 } from "@mui/material";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import PageHeader from "@components/PageHeader/PageHeader";
 import useUserStore from "@stores/useUserStore";
 import { useEffect, useState } from "react";
@@ -59,7 +62,9 @@ function CounselListPage() {
   const [startDate, setStartDate] = useState<string | null>(null);
   const [endDate, setEndDate] = useState<string | null>(null);
   const [selectedType, setSelectedType] = useState<string | null>(null);
-  const [selectedCompleted, setSelectedCompleted] = useState<boolean | null>(null);
+  const [selectedCompleted, setSelectedCompleted] = useState<boolean | null>(
+    null
+  );
 
   const COUNSEL_TYPES = [
     { value: "PURCHASE", label: "매수" },
@@ -159,19 +164,92 @@ function CounselListPage() {
           </div>
 
           <div className={styles.dateFilterRow}>
-            <input
-              type="date"
-              className={styles.dateInput}
-              value={startDate ?? ""}
-              onChange={(e) => setStartDate(e.target.value)}
-            />
-            <span>~</span>
-            <input
-              type="date"
-              className={styles.dateInput}
-              value={endDate ?? ""}
-              onChange={(e) => setEndDate(e.target.value)}
-            />
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <Box
+                sx={{
+                  display: "flex",
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: 1,
+                }}
+              >
+                <Typography
+                  variant="subtitle2"
+                  sx={{
+                    color: "#333333",
+                    fontWeight: 500,
+                    mr: 1,
+                  }}
+                >
+                  상담일
+                </Typography>
+                <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <DatePicker
+                    value={startDate ? dayjs(startDate) : null}
+                    onChange={(newValue) => {
+                      setStartDate(
+                        newValue ? newValue.format("YYYY-MM-DD") : null
+                      );
+                    }}
+                    format="YYYY/MM/DD"
+                    slotProps={{
+                      textField: {
+                        size: "small",
+                        sx: {
+                          backgroundColor: "white",
+                          width: "170px",
+                          "& .MuiOutlinedInput-root": {
+                            "& fieldset": {
+                              borderColor: "#E0E0E0",
+                              borderRadius: "20px",
+                            },
+                            "&:hover fieldset": {
+                              borderColor: "#164F9E",
+                            },
+                            "&.Mui-focused fieldset": {
+                              borderColor: "#164F9E",
+                            },
+                          },
+                        },
+                      },
+                    }}
+                  />
+                  <Box component="span" sx={{ mx: 1 }}>
+                    ~
+                  </Box>
+                  <DatePicker
+                    value={endDate ? dayjs(endDate) : null}
+                    onChange={(newValue) => {
+                      setEndDate(
+                        newValue ? newValue.format("YYYY-MM-DD") : null
+                      );
+                    }}
+                    format="YYYY/MM/DD"
+                    slotProps={{
+                      textField: {
+                        size: "small",
+                        sx: {
+                          backgroundColor: "white",
+                          width: "170px",
+                          "& .MuiOutlinedInput-root": {
+                            "& fieldset": {
+                              borderColor: "#E0E0E0",
+                              borderRadius: "20px",
+                            },
+                            "&:hover fieldset": {
+                              borderColor: "#164F9E",
+                            },
+                            "&.Mui-focused fieldset": {
+                              borderColor: "#164F9E",
+                            },
+                          },
+                        },
+                      },
+                    }}
+                  />
+                </Box>
+              </Box>
+            </LocalizationProvider>
           </div>
 
           <div className={styles.filterButtons}>
@@ -226,7 +304,8 @@ function CounselListPage() {
               onClick={() => setIsModalOpen(true)}
               sx={{
                 backgroundColor: "#164F9E",
-                "&:hover": { backgroundColor: "#0D3B7A" },
+                boxShadow: "none",
+                "&:hover": { backgroundColor: "#0D3B7A", boxShadow: "none" },
                 height: "36px",
                 fontSize: "13px",
                 padding: "0 16px",
@@ -291,15 +370,23 @@ function CounselListPage() {
                         <Typography
                           variant="body2"
                           sx={{
-                            color: (!counsel.dueDate || counsel.completed) ? "#219653" : "#F2994A",
-                            backgroundColor: (!counsel.dueDate || counsel.completed) ? "#E9F7EF" : "#FEF5EB",
+                            color:
+                              !counsel.dueDate || counsel.completed
+                                ? "#219653"
+                                : "#F2994A",
+                            backgroundColor:
+                              !counsel.dueDate || counsel.completed
+                                ? "#E9F7EF"
+                                : "#FEF5EB",
                             py: 0.5,
                             px: 1,
                             borderRadius: 1,
                             display: "inline-block",
                           }}
                         >
-                          {(!counsel.dueDate || counsel.completed) ? "의뢰 마감" : "의뢰 진행중"}
+                          {!counsel.dueDate || counsel.completed
+                            ? "의뢰 마감"
+                            : "의뢰 진행중"}
                         </Typography>
                       </TableCell>
                     </TableRow>
@@ -333,4 +420,4 @@ function CounselListPage() {
   );
 }
 
-export default CounselListPage;
\ No newline at end of file
+export default CounselListPage;
diff --git a/src/pages/CustomerDetailPage/CustomerDetailPage.tsx b/src/pages/CustomerDetailPage/CustomerDetailPage.tsx
index ef2ffda..994e904 100644
--- a/src/pages/CustomerDetailPage/CustomerDetailPage.tsx
+++ b/src/pages/CustomerDetailPage/CustomerDetailPage.tsx
@@ -24,6 +24,7 @@ import { toast } from "react-toastify";
 import DeleteConfirmModal from "@components/DeleteConfirm/DeleteConfirmModal";
 import RegionSelect from "@components/RegionSelect/RegionSelect";
 import { formatPhoneNumber } from "@utils/numberUtil";
+import { showToast } from "@components/Toast/Toast";
 
 interface CustomerData {
   uid: number;
@@ -177,15 +178,24 @@ function CustomerDetailPage() {
 
     try {
       if (!editedCustomer.name) {
-        toast.error("이름을 입력해주세요.");
+        showToast({
+          message: "이름을 입력해주세요.",
+          type: "error",
+        });
         return;
       }
       if (!editedCustomer.phoneNo) {
-        toast.error("전화번호를 입력해주세요.");
+        showToast({
+          message: "전화번호를 입력해주세요.",
+          type: "error",
+        });
         return;
       }
       if (editedCustomer.birthDay && !/^\d{8}$/.test(editedCustomer.birthDay)) {
-        toast.error("생년월일을 올바르게 입력해주세요. ex)19910501");
+        showToast({
+          message: "생년월일을 올바르게 입력해주세요. ex)19910501",
+          type: "error",
+        });
         return;
       }
 
@@ -215,13 +225,20 @@ function CustomerDetailPage() {
       );
 
       if (response.status === 200) {
-        toast.success("고객 정보를 수정했습니다.");
+        showToast({
+          message: "고객 정보를 수정했습니다.",
+          type: "success",
+        });
         setIsEditing(false);
         fetchCustomerData();
       }
     } catch (error: any) {
       console.error("Failed to update customer:", error);
-      toast.error(error.response?.data?.message || "고객 정보 수정에 실패했습니다.");
+      showToast({
+        message:
+          error.response?.data?.message || "고객 정보 수정에 실패했습니다.",
+        type: "error",
+      });
     }
   };
 
@@ -237,7 +254,10 @@ function CustomerDetailPage() {
     try {
       const response = await apiClient.delete(`/customers/${customerId}`);
       if (response.status === 200) {
-        toast.success("고객이 삭제되었습니다.");
+        showToast({
+          message: "고객을 삭제했습니다.",
+          type: "success",
+        });
         navigate("/customers");
       }
     } catch (error) {
@@ -328,18 +348,16 @@ function CustomerDetailPage() {
               }}
             >
               <Button
-                variant="contained"
+                variant="outlined"
                 color="primary"
                 startIcon={<EditIcon />}
                 onClick={handleEditClick}
                 sx={{
                   mr: 1,
-                  backgroundColor: "#164F9E",
-                  boxShadow: "none",
-                  "&:hover": {
-                    backgroundColor: "#0D3B7A",
-                    boxShadow: "none",
-                  },
+                  color: "#164F9E",
+                  minHeight: "32px",
+                  marginLeft: "12px",
+                  backgroundColor: "white",
                 }}
               >
                 수정
@@ -886,6 +904,7 @@ function CustomerDetailPage() {
         open={isDeleteModalOpen}
         onConfirm={handleDeleteConfirm}
         onCancel={handleDeleteCancel}
+        category="고객"
       />
     </Box>
   );
diff --git a/src/pages/CustomerListPage/CustomerAddButtonList/CustomerAddButtonList.tsx b/src/pages/CustomerListPage/CustomerAddButtonList/CustomerAddButtonList.tsx
index 10351b5..19180a8 100644
--- a/src/pages/CustomerListPage/CustomerAddButtonList/CustomerAddButtonList.tsx
+++ b/src/pages/CustomerListPage/CustomerAddButtonList/CustomerAddButtonList.tsx
@@ -27,7 +27,8 @@ function CustomerAddButtonList({ fetchCustomerData }: Props) {
           onClick={handleOpen}
           sx={{
             backgroundColor: "#164F9E",
-            "&:hover": { backgroundColor: "#0D3B7A" },
+            boxShadow: "none",
+            "&:hover": { backgroundColor: "#0D3B7A", boxShadow: "none" },
             height: "36px",
             fontSize: "13px",
             padding: "0 16px",
diff --git a/src/pages/CustomerListPage/CustomerAddButtonList/CustomerAddModal/CustomerAddModal.tsx b/src/pages/CustomerListPage/CustomerAddButtonList/CustomerAddModal/CustomerAddModal.tsx
index 05e1969..d1b0bf9 100644
--- a/src/pages/CustomerListPage/CustomerAddButtonList/CustomerAddModal/CustomerAddModal.tsx
+++ b/src/pages/CustomerListPage/CustomerAddButtonList/CustomerAddModal/CustomerAddModal.tsx
@@ -21,7 +21,9 @@ import {
 import Button from "@components/Button";
 import TextField from "@components/TextField";
 import apiClient from "@apis/apiClient";
-import AddIcon from '@mui/icons-material/Add';
+import AddIcon from "@mui/icons-material/Add";
+
+import { showToast } from "@components/Toast/Toast";
 import { toast } from "react-toastify";
 
 const phoneRegex = /^\d{3}-\d{3,4}-\d{4}$/;
@@ -77,22 +79,22 @@ interface Label {
 }
 
 const initialFormData: CustomerFormData = {
-  name: '',
-  phoneNo: '',
-  birthDay: '',
-  telProvider: 'SKT',
-  legalDistrictCode: '',
-  trafficSource: '',
+  name: "",
+  phoneNo: "",
+  birthDay: "",
+  telProvider: "SKT",
+  legalDistrictCode: "",
+  trafficSource: "",
   seller: false,
   buyer: false,
   tenant: false,
   landlord: false,
-  minPrice: '',
-  maxPrice: '',
-  minRent: '',
-  maxRent: '',
-  minDeposit: '',
-  maxDeposit: '',
+  minPrice: "",
+  maxPrice: "",
+  minRent: "",
+  maxRent: "",
+  minDeposit: "",
+  maxDeposit: "",
   labelUids: [],
 };
 
@@ -113,45 +115,51 @@ function CustomerAddModal({
   const [labels, setLabels] = useState<Label[]>([]);
   const [selectedLabels, setSelectedLabels] = useState<Label[]>([]);
   const [isAddingLabel, setIsAddingLabel] = useState(false);
-  const [newLabelName, setNewLabelName] = useState('');
+  const [newLabelName, setNewLabelName] = useState("");
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value, type, checked } = e.target;
-    
-    if (name === 'phoneNo') {
+
+    if (name === "phoneNo") {
       // 숫자만 추출
-      const numbers = value.replace(/[^0-9]/g, '');
-      
+      const numbers = value.replace(/[^0-9]/g, "");
+
       // 전화번호 형식으로 변환
-      let formattedNumber = '';
+      let formattedNumber = "";
       if (numbers.length <= 3) {
         formattedNumber = numbers;
       } else if (numbers.length <= 7) {
         formattedNumber = `${numbers.slice(0, 3)}-${numbers.slice(3)}`;
       } else {
-        formattedNumber = `${numbers.slice(0, 3)}-${numbers.slice(3, 7)}-${numbers.slice(7, 11)}`;
+        formattedNumber = `${numbers.slice(0, 3)}-${numbers.slice(
+          3,
+          7
+        )}-${numbers.slice(7, 11)}`;
       }
-      
-      setFormData(prev => ({
+
+      setFormData((prev) => ({
         ...prev,
-        [name]: formattedNumber
+        [name]: formattedNumber,
       }));
     } else {
-      setFormData(prev => ({
+      setFormData((prev) => ({
         ...prev,
-        [name]: type === 'checkbox' ? checked : value
+        [name]: type === "checkbox" ? checked : value,
       }));
     }
   };
 
-  const handleRegionChange = (type: 'sido' | 'sigungu' | 'dong') => (event: SelectChangeEvent) => {
-    const value = Number(event.target.value);
-    const key = `selected${type.charAt(0).toUpperCase() + type.slice(1)}` as keyof RegionState;
-    setRegion(prev => ({
-      ...prev,
-      [key]: value
-    }));
-  };
+  const handleRegionChange =
+    (type: "sido" | "sigungu" | "dong") => (event: SelectChangeEvent) => {
+      const value = Number(event.target.value);
+      const key = `selected${
+        type.charAt(0).toUpperCase() + type.slice(1)
+      }` as keyof RegionState;
+      setRegion((prev) => ({
+        ...prev,
+        [key]: value,
+      }));
+    };
 
   const onClose = () => {
     handleClose();
@@ -161,25 +169,35 @@ function CustomerAddModal({
   const handleSubmit = async () => {
     try {
       if (!formData.name) {
-        toast.error("이름을 입력해주세요.");
+        showToast({
+          message: "이름을 입력해주세요.",
+          type: "error",
+        });
         return;
       }
       if (!formData.phoneNo) {
-        toast.error("전화번호를 입력해주세요.");
+        showToast({
+          message: "전화번호를 입력해주세요.",
+          type: "error",
+        });
         return;
       }
       if (formData.birthDay && !/^\d{8}$/.test(formData.birthDay)) {
-        toast.error("생년월일을 올바르게 입력해주세요. ex)19910501");
+        showToast({
+          message: "생년월일을 올바르게 입력해주세요. ex)19910501",
+          type: "error",
+        });
         return;
       }
 
       // 선택된 지역 코드 (동 > 군구 > 시도 순으로 선택)
-      const selectedRegion = region.selectedDong || region.selectedSigungu || region.selectedSido;
+      const selectedRegion =
+        region.selectedDong || region.selectedSigungu || region.selectedSido;
 
       // 쉼표가 포함된 문자열에서 숫자만 추출
       const parsePrice = (price: string) => {
         if (!price) return null;
-        return Number(price.replace(/[^0-9]/g, ''));
+        return Number(price.replace(/[^0-9]/g, ""));
       };
 
       const customerData = {
@@ -187,7 +205,7 @@ function CustomerAddModal({
         phoneNo: formData.phoneNo,
         birthDay: formData.birthDay,
         telProvider: formData.telProvider,
-        legalDistrictCode: String(selectedRegion || ''),
+        legalDistrictCode: String(selectedRegion || ""),
         trafficSource: formData.trafficSource,
         landlord: formData.landlord,
         tenant: formData.tenant,
@@ -206,23 +224,31 @@ function CustomerAddModal({
       const response = await apiClient.post("/customers", customerData);
 
       if (response.status === 201) {
-        toast.success("고객 등록에 성공했습니다.");
-        fetchCustomerList();  
-        onClose();     
+        showToast({
+          message: "고객 등록에 성공했습니다.",
+          type: "success",
+        });
+
+        fetchCustomerList();
+        onClose();
       }
     } catch (error: any) {
       console.error("Failed to register customer:", error);
-      toast.error(error.response?.data?.message || "고객 등록 실패");
+      showToast({
+        message: error.response?.data?.message || "고객 등록에 실패했습니다.",
+        type: "error",
+      });
     }
   };
 
   useEffect(() => {
     if (open) {
       // 시도 데이터 로드
-      apiClient.get("/region/0")
+      apiClient
+        .get("/region/0")
         .then((res) => {
           if (res.data?.data) {
-            setRegion(prev => ({ ...prev, sido: res.data.data }));
+            setRegion((prev) => ({ ...prev, sido: res.data.data }));
           }
         })
         .catch(console.error);
@@ -242,10 +268,11 @@ function CustomerAddModal({
   // 시도 선택 시 군구 로드
   useEffect(() => {
     if (!region.selectedSido) return;
-    apiClient.get(`/region/${region.selectedSido}`)
+    apiClient
+      .get(`/region/${region.selectedSido}`)
       .then((res) => {
         if (res.data?.data) {
-          setRegion(prev => ({
+          setRegion((prev) => ({
             ...prev,
             sigungu: res.data.data,
             selectedSigungu: null,
@@ -260,10 +287,11 @@ function CustomerAddModal({
   // 군구 선택 시 동 로드
   useEffect(() => {
     if (!region.selectedSigungu) return;
-    apiClient.get(`/region/${region.selectedSigungu}`)
+    apiClient
+      .get(`/region/${region.selectedSigungu}`)
       .then((res) => {
         if (res.data?.data) {
-          setRegion(prev => ({
+          setRegion((prev) => ({
             ...prev,
             dong: res.data.data,
             selectedDong: null,
@@ -297,7 +325,7 @@ function CustomerAddModal({
 
     try {
       await apiClient.post("/labels", { name: newLabelName });
-      setNewLabelName('');
+      setNewLabelName("");
       setIsAddingLabel(false);
       fetchLabels(); // 라벨 목록 새로고침
     } catch (error) {
@@ -307,23 +335,24 @@ function CustomerAddModal({
 
   // 라벨 선택 처리
   const handleLabelSelect = (label: Label) => {
-    const isSelected = selectedLabels.some(l => l.uid === label.uid);
+    const isSelected = selectedLabels.some((l) => l.uid === label.uid);
     let newSelectedLabels: Label[];
 
     if (isSelected) {
-      newSelectedLabels = selectedLabels.filter(l => l.uid !== label.uid);
+      newSelectedLabels = selectedLabels.filter((l) => l.uid !== label.uid);
     } else {
       newSelectedLabels = [...selectedLabels, label];
     }
 
     setSelectedLabels(newSelectedLabels);
-    setFormData(prev => ({
+    setFormData((prev) => ({
       ...prev,
-      labelUids: newSelectedLabels.map(l => l.uid)
+      labelUids: newSelectedLabels.map((l) => l.uid),
     }));
   };
 
-  const isSubmitButtonDisabled = !formData.name || !phoneRegex.test(formData.phoneNo);
+  const isSubmitButtonDisabled =
+    !formData.name || !phoneRegex.test(formData.phoneNo);
 
   return (
     <Dialog
@@ -333,19 +362,23 @@ function CustomerAddModal({
       fullWidth
       PaperProps={{
         sx: {
-          borderRadius: '8px',
-          maxHeight: '90vh'
-        }
+          borderRadius: "8px",
+          maxHeight: "90vh",
+        },
       }}
     >
-      <DialogTitle sx={{ borderBottom: '1px solid #E0E0E0', pb: 2, fontWeight: 'bold' }}>
-        기본 정보
+      <DialogTitle
+        sx={{ borderBottom: "1px solid #E0E0E0", pb: 2, fontWeight: "bold" }}
+      >
+        고객 등록
       </DialogTitle>
 
       <DialogContent sx={{ mt: 2 }}>
         <Box sx={{ mb: 4 }}>
           <Box sx={{ mb: 2 }}>
-            <Typography variant="subtitle2" sx={{ mb: 1 }}>이름</Typography>
+            <Typography variant="subtitle2" sx={{ mb: 1 }}>
+              이름
+            </Typography>
             <TextField
               name="name"
               value={formData.name}
@@ -356,7 +389,9 @@ function CustomerAddModal({
             />
           </Box>
           <Box sx={{ mb: 2 }}>
-            <Typography variant="subtitle2" sx={{ mb: 1 }}>전화번호</Typography>
+            <Typography variant="subtitle2" sx={{ mb: 1 }}>
+              전화번호
+            </Typography>
             <TextField
               name="phoneNo"
               value={formData.phoneNo}
@@ -367,7 +402,9 @@ function CustomerAddModal({
             />
           </Box>
           <Box sx={{ mb: 2 }}>
-            <Typography variant="subtitle2" sx={{ mb: 1 }}>생년월일</Typography>
+            <Typography variant="subtitle2" sx={{ mb: 1 }}>
+              생년월일
+            </Typography>
             <TextField
               name="birthDay"
               value={formData.birthDay}
@@ -382,7 +419,9 @@ function CustomerAddModal({
           </Box>
 
           <Box>
-            <Typography variant="subtitle2" sx={{ mb: 1 }}>통신사</Typography>
+            <Typography variant="subtitle2" sx={{ mb: 1 }}>
+              통신사
+            </Typography>
             <FormControl>
               <RadioGroup
                 name="telProvider"
@@ -391,17 +430,37 @@ function CustomerAddModal({
                 row
                 sx={{ gap: 4 }}
               >
-                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-                  <FormControlLabel value="SKT" control={<Radio />} label="SKT" />
-                  <FormControlLabel value="SKT 알뜰폰" control={<Radio />} label="SKT 알뜰폰" />
+                <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
+                  <FormControlLabel
+                    value="SKT"
+                    control={<Radio />}
+                    label="SKT"
+                  />
+                  <FormControlLabel
+                    value="SKT 알뜰폰"
+                    control={<Radio />}
+                    label="SKT 알뜰폰"
+                  />
                 </Box>
-                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
                   <FormControlLabel value="KT" control={<Radio />} label="KT" />
-                  <FormControlLabel value="KT 알뜰폰" control={<Radio />} label="KT 알뜰폰" />
+                  <FormControlLabel
+                    value="KT 알뜰폰"
+                    control={<Radio />}
+                    label="KT 알뜰폰"
+                  />
                 </Box>
-                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-                  <FormControlLabel value="LGU+" control={<Radio />} label="LGU+" />
-                  <FormControlLabel value="LGU+ 알뜰폰" control={<Radio />} label="LGU+ 알뜰폰" />
+                <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
+                  <FormControlLabel
+                    value="LGU+"
+                    control={<Radio />}
+                    label="LGU+"
+                  />
+                  <FormControlLabel
+                    value="LGU+ 알뜰폰"
+                    control={<Radio />}
+                    label="LGU+ 알뜰폰"
+                  />
                 </Box>
               </RadioGroup>
             </FormControl>
@@ -409,24 +468,50 @@ function CustomerAddModal({
         </Box>
 
         {/* 부가 정보 */}
-        <Typography variant="h6" sx={{ mb: 2, fontWeight: 'bold' }}>
+        <Typography variant="h6" sx={{ mb: 2, fontWeight: "bold" }}>
           부가 정보
         </Typography>
         <Box sx={{ mb: 4 }}>
           <Box sx={{ mb: 2 }}>
-            <Typography variant="subtitle2" sx={{ mb: 1 }}>관심 지역</Typography>
+            <Typography variant="subtitle2" sx={{ mb: 1 }}>
+              관심 지역
+            </Typography>
             <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
               {["sido", "sigungu", "dong"].map((type) => (
                 <FormControl fullWidth key={type} size="small">
-                  <InputLabel>{type === "sido" ? "시/도" : type === "sigungu" ? "시/군/구" : "읍/면/동"}</InputLabel>
+                  <InputLabel>
+                    {type === "sido"
+                      ? "시/도"
+                      : type === "sigungu"
+                      ? "시/군/구"
+                      : "읍/면/동"}
+                  </InputLabel>
                   <Select
-                    value={String(region[`selected${type.charAt(0).toUpperCase() + type.slice(1)}`] || '')}
+                    value={String(
+                      region[
+                        `selected${
+                          type.charAt(0).toUpperCase() + type.slice(1)
+                        }`
+                      ] || ""
+                    )}
                     onChange={handleRegionChange(type as any)}
-                    label={type === "sido" ? "시/도" : type === "sigungu" ? "시/군/구" : "읍/면/동"}
-                    disabled={type !== "sido" && !region[`selected${type === "dong" ? "Sigungu" : "Sido"}`]}
+                    label={
+                      type === "sido"
+                        ? "시/도"
+                        : type === "sigungu"
+                        ? "시/군/구"
+                        : "읍/면/동"
+                    }
+                    disabled={
+                      type !== "sido" &&
+                      !region[`selected${type === "dong" ? "Sigungu" : "Sido"}`]
+                    }
                   >
                     {(region[type] as Region[]).map((item: Region) => (
-                      <MenuItem key={item.cortarNo} value={String(item.cortarNo)}>
+                      <MenuItem
+                        key={item.cortarNo}
+                        value={String(item.cortarNo)}
+                      >
                         {item.cortarName}
                       </MenuItem>
                     ))}
@@ -436,7 +521,9 @@ function CustomerAddModal({
             </Box>
           </Box>
           <Box>
-            <Typography variant="subtitle2" sx={{ mb: 1 }}>유입경로</Typography>
+            <Typography variant="subtitle2" sx={{ mb: 1 }}>
+              유입경로
+            </Typography>
             <TextField
               name="trafficSource"
               value={formData.trafficSource}
@@ -449,10 +536,10 @@ function CustomerAddModal({
         </Box>
 
         {/* 역할 */}
-        <Typography variant="h6" sx={{ mb: 2, fontWeight: 'bold' }}>
+        <Typography variant="h6" sx={{ mb: 2, fontWeight: "bold" }}>
           역할
         </Typography>
-        <Box sx={{ mb: 4, display: 'flex', gap: 4 }}>
+        <Box sx={{ mb: 4, display: "flex", gap: 4 }}>
           <FormControlLabel
             control={
               <Checkbox
@@ -510,15 +597,19 @@ function CustomerAddModal({
                 size="small"
                 fullWidth
                 InputProps={{
-                  endAdornment: <InputAdornment position="end">원</InputAdornment>,
+                  endAdornment: (
+                    <InputAdornment position="end">원</InputAdornment>
+                  ),
                 }}
                 inputProps={{
                   type: "text",
                   pattern: "[0-9]*",
                   inputMode: "numeric",
                   onChange: (e) => {
-                    const value = e.target.value.replace(/[^0-9]/g, '');
-                    e.target.value = value ? new Intl.NumberFormat('ko-KR').format(Number(value)) : '';
+                    const value = e.target.value.replace(/[^0-9]/g, "");
+                    e.target.value = value
+                      ? new Intl.NumberFormat("ko-KR").format(Number(value))
+                      : "";
                   },
                 }}
               />
@@ -530,15 +621,19 @@ function CustomerAddModal({
                 size="small"
                 fullWidth
                 InputProps={{
-                  endAdornment: <InputAdornment position="end">원</InputAdornment>,
+                  endAdornment: (
+                    <InputAdornment position="end">원</InputAdornment>
+                  ),
                 }}
                 inputProps={{
                   type: "text",
                   pattern: "[0-9]*",
                   inputMode: "numeric",
                   onChange: (e) => {
-                    const value = e.target.value.replace(/[^0-9]/g, '');
-                    e.target.value = value ? new Intl.NumberFormat('ko-KR').format(Number(value)) : '';
+                    const value = e.target.value.replace(/[^0-9]/g, "");
+                    e.target.value = value
+                      ? new Intl.NumberFormat("ko-KR").format(Number(value))
+                      : "";
                   },
                 }}
               />
@@ -561,15 +656,19 @@ function CustomerAddModal({
                 size="small"
                 fullWidth
                 InputProps={{
-                  endAdornment: <InputAdornment position="end">원</InputAdornment>,
+                  endAdornment: (
+                    <InputAdornment position="end">원</InputAdornment>
+                  ),
                 }}
                 inputProps={{
                   type: "text",
                   pattern: "[0-9]*",
                   inputMode: "numeric",
                   onChange: (e) => {
-                    const value = e.target.value.replace(/[^0-9]/g, '');
-                    e.target.value = value ? new Intl.NumberFormat('ko-KR').format(Number(value)) : '';
+                    const value = e.target.value.replace(/[^0-9]/g, "");
+                    e.target.value = value
+                      ? new Intl.NumberFormat("ko-KR").format(Number(value))
+                      : "";
                   },
                 }}
               />
@@ -581,15 +680,19 @@ function CustomerAddModal({
                 size="small"
                 fullWidth
                 InputProps={{
-                  endAdornment: <InputAdornment position="end">원</InputAdornment>,
+                  endAdornment: (
+                    <InputAdornment position="end">원</InputAdornment>
+                  ),
                 }}
                 inputProps={{
                   type: "text",
                   pattern: "[0-9]*",
                   inputMode: "numeric",
                   onChange: (e) => {
-                    const value = e.target.value.replace(/[^0-9]/g, '');
-                    e.target.value = value ? new Intl.NumberFormat('ko-KR').format(Number(value)) : '';
+                    const value = e.target.value.replace(/[^0-9]/g, "");
+                    e.target.value = value
+                      ? new Intl.NumberFormat("ko-KR").format(Number(value))
+                      : "";
                   },
                 }}
               />
@@ -607,15 +710,19 @@ function CustomerAddModal({
                 size="small"
                 fullWidth
                 InputProps={{
-                  endAdornment: <InputAdornment position="end">원</InputAdornment>,
+                  endAdornment: (
+                    <InputAdornment position="end">원</InputAdornment>
+                  ),
                 }}
                 inputProps={{
                   type: "text",
                   pattern: "[0-9]*",
                   inputMode: "numeric",
                   onChange: (e) => {
-                    const value = e.target.value.replace(/[^0-9]/g, '');
-                    e.target.value = value ? new Intl.NumberFormat('ko-KR').format(Number(value)) : '';
+                    const value = e.target.value.replace(/[^0-9]/g, "");
+                    e.target.value = value
+                      ? new Intl.NumberFormat("ko-KR").format(Number(value))
+                      : "";
                   },
                 }}
               />
@@ -627,15 +734,19 @@ function CustomerAddModal({
                 size="small"
                 fullWidth
                 InputProps={{
-                  endAdornment: <InputAdornment position="end">원</InputAdornment>,
+                  endAdornment: (
+                    <InputAdornment position="end">원</InputAdornment>
+                  ),
                 }}
                 inputProps={{
                   type: "text",
                   pattern: "[0-9]*",
                   inputMode: "numeric",
                   onChange: (e) => {
-                    const value = e.target.value.replace(/[^0-9]/g, '');
-                    e.target.value = value ? new Intl.NumberFormat('ko-KR').format(Number(value)) : '';
+                    const value = e.target.value.replace(/[^0-9]/g, "");
+                    e.target.value = value
+                      ? new Intl.NumberFormat("ko-KR").format(Number(value))
+                      : "";
                   },
                 }}
               />
@@ -645,21 +756,28 @@ function CustomerAddModal({
 
         {/* 라벨 선택 */}
         <Box sx={{ mb: 4 }}>
-          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
-            <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
+          <Box
+            sx={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              mb: 2,
+            }}
+          >
+            <Typography variant="h6" sx={{ fontWeight: "bold" }}>
               라벨 선택
             </Typography>
             <Button
               text="라벨 추가"
               startIcon={<AddIcon />}
-              sx={{ color: '#6366F1' }}
+              sx={{ color: "#164F9E" }}
               onClick={() => setIsAddingLabel(true)}
             />
           </Box>
 
           {/* 라벨 추가 입력 필드 */}
           {isAddingLabel && (
-            <Box sx={{ display: 'flex', gap: 1, mb: 2 }}>
+            <Box sx={{ display: "flex", gap: 1, mb: 2 }}>
               <TextField
                 size="small"
                 value={newLabelName}
@@ -671,10 +789,10 @@ function CustomerAddModal({
                 text="추가"
                 onClick={handleAddLabel}
                 sx={{
-                  backgroundColor: '#6366F1',
-                  color: 'white',
-                  '&:hover': {
-                    backgroundColor: '#5457E5',
+                  backgroundColor: "#164F9E",
+                  color: "white",
+                  "&:hover": {
+                    backgroundColor: "#0D3B7A",
                   },
                 }}
               />
@@ -682,11 +800,11 @@ function CustomerAddModal({
                 text="취소"
                 onClick={() => {
                   setIsAddingLabel(false);
-                  setNewLabelName('');
+                  setNewLabelName("");
                 }}
                 sx={{
-                  color: '#6366F1',
-                  borderColor: '#6366F1',
+                  color: "#164F9E",
+                  borderColor: "#164F9E",
                 }}
                 variant="outlined"
               />
@@ -694,29 +812,33 @@ function CustomerAddModal({
           )}
 
           {/* 라벨 목록 */}
-          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 1 }}>
             {labels.map((label) => (
               <Chip
                 key={label.uid}
                 label={label.name}
                 onClick={() => handleLabelSelect(label)}
                 onDelete={
-                  selectedLabels.some(l => l.uid === label.uid)
+                  selectedLabels.some((l) => l.uid === label.uid)
                     ? () => handleLabelSelect(label)
                     : undefined
                 }
                 sx={{
-                  backgroundColor: selectedLabels.some(l => l.uid === label.uid)
-                    ? '#6366F1'
-                    : 'transparent',
-                  color: selectedLabels.some(l => l.uid === label.uid)
-                    ? 'white'
-                    : 'inherit',
-                  border: '1px solid #6366F1',
-                  '&:hover': {
-                    backgroundColor: selectedLabels.some(l => l.uid === label.uid)
-                      ? '#5457E5'
-                      : 'rgba(99, 102, 241, 0.1)',
+                  backgroundColor: selectedLabels.some(
+                    (l) => l.uid === label.uid
+                  )
+                    ? "#6366F1"
+                    : "transparent",
+                  color: selectedLabels.some((l) => l.uid === label.uid)
+                    ? "white"
+                    : "inherit",
+                  border: "1px solid #164F9E",
+                  "&:hover": {
+                    backgroundColor: selectedLabels.some(
+                      (l) => l.uid === label.uid
+                    )
+                      ? "#0D3B7A"
+                      : "rgba(99, 102, 241, 0.1)",
                   },
                 }}
               />
@@ -725,19 +847,19 @@ function CustomerAddModal({
         </Box>
       </DialogContent>
 
-      <DialogActions sx={{ p: 3, borderTop: '1px solid #E0E0E0' }}>
+      <DialogActions sx={{ p: 3, borderTop: "1px solid #E0E0E0" }}>
         <Button
           text="취소"
           onClick={onClose}
           variant="outlined"
-          sx={{ color: '#6366F1', borderColor: '#6366F1' }}
+          sx={{ color: "#164F9E", borderColor: "#164F9E" }}
         />
         <Button
-          text="고객 추가하기"
+          text="확인"
           onClick={handleSubmit}
           variant="contained"
-          sx={{ bgcolor: '#6366F1' }}
-          disabled={false}
+          sx={{ bgcolor: "#164F9E" }}
+          disabled={isSubmitButtonDisabled}
         />
       </DialogActions>
     </Dialog>
diff --git a/src/pages/CustomerListPage/CustomerAddButtonList/CustomerBulkUploadModal.tsx b/src/pages/CustomerListPage/CustomerAddButtonList/CustomerBulkUploadModal.tsx
index df1c65b..f0048ae 100644
--- a/src/pages/CustomerListPage/CustomerAddButtonList/CustomerBulkUploadModal.tsx
+++ b/src/pages/CustomerListPage/CustomerAddButtonList/CustomerBulkUploadModal.tsx
@@ -14,7 +14,7 @@ import { useDropzone } from "react-dropzone";
 import apiClient from "@apis/apiClient";
 import { toast } from "react-toastify";
 import { AxiosError } from "axios";
-
+import { showToast } from "@components/Toast/Toast";
 interface Props {
   open: boolean;
   handleClose: () => void;
@@ -68,7 +68,10 @@ function CustomerBulkUploadModal({
     try {
       setIsLoading(true);
       await apiClient.post("/customers/bulk", formData);
-      toast.success("고객 정보 업로드에 성공했습니다");
+      showToast({
+        message: "고객 정보를 업데이트 했습니다.",
+        type: "success",
+      });
       handleClose();
       fetchCustomerData();
     } catch (error) {
@@ -78,7 +81,10 @@ function CustomerBulkUploadModal({
         axiosError.response?.data?.message ||
         "파일 업로드 중 오류가 발생했습니다.";
       setError(errorMessage);
-      toast.error(errorMessage);
+      showToast({
+        message: errorMessage,
+        type: "error",
+      });
     } finally {
       setIsLoading(false);
     }
diff --git a/src/pages/CustomerListPage/CustomerListPage.tsx b/src/pages/CustomerListPage/CustomerListPage.tsx
index c1e6620..fb594d5 100644
--- a/src/pages/CustomerListPage/CustomerListPage.tsx
+++ b/src/pages/CustomerListPage/CustomerListPage.tsx
@@ -2,12 +2,14 @@ import { useState, useEffect } from "react";
 import apiClient from "@apis/apiClient";
 import CustomerAddButtonList from "./CustomerAddButtonList";
 import CustomerFilterModal from "./CustomerFilterModal/CustomerFilterModal";
-import { Box, CircularProgress, TextField, IconButton } from "@mui/material";
+import { Box, CircularProgress, TextField, Button } from "@mui/material";
 import FilterListIcon from "@mui/icons-material/FilterList";
 import useDebounce from "@hooks/useDebounce";
 import PageHeader from "@components/PageHeader/PageHeader";
 import useUserStore from "@stores/useUserStore";
 import CustomerTable from "./CustomerTable/CustomerTable";
+import { InputAdornment } from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
 
 interface Customer {
   uid: number;
@@ -253,14 +255,21 @@ const CustomerListPage = () => {
             }}
           >
             <TextField
-              placeholder="전화번호 또는 고객이름 검색"
+              placeholder="전화번호 또는 고객이름으로 검색"
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
               size="small"
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <SearchIcon />
+                  </InputAdornment>
+                ),
+              }}
               sx={{
-                width: 250,
+                minWidth: 300,
                 "& .MuiOutlinedInput-root": {
-                  borderRadius: "14px",                  
+                  borderRadius: "20px",
                   boxShadow: "0 2px 6px rgba(0, 0, 0, 0.05)",
                   "&:hover .MuiOutlinedInput-notchedOutline": {
                     borderColor: "rgba(0, 0, 0, 0.25)",
@@ -268,19 +277,23 @@ const CustomerListPage = () => {
                 },
               }}
             />
-            <IconButton
+            <Button
+              startIcon={<FilterListIcon />}
               onClick={() => setFilterModalOpen(true)}
               sx={{
-                borderRadius: "14px",
-                padding: "5px",
-                border: "1px solid rgba(0, 0, 0, 0.23)",
+                height: "40px",
+                ml: 1,
+                minWidth: "120px",
+                border: "1px solid #164F9E",
+                color: "#164F9E",
+                borderRadius: "20px",
                 "&:hover": {
-                  backgroundColor: "#F5F5F5",
+                  border: "1px solid #164F9E",
                 },
               }}
             >
-              <FilterListIcon />
-            </IconButton>
+              상세 필터
+            </Button>
           </Box>
           <Box
             sx={{
diff --git a/src/pages/CustomerListPage/CustomerTable/CustomerTable.tsx b/src/pages/CustomerListPage/CustomerTable/CustomerTable.tsx
index 4ad500f..11be608 100644
--- a/src/pages/CustomerListPage/CustomerTable/CustomerTable.tsx
+++ b/src/pages/CustomerListPage/CustomerTable/CustomerTable.tsx
@@ -20,8 +20,8 @@ import DoneIcon from "@mui/icons-material/Done";
 import CloseIcon from "@mui/icons-material/Close";
 import { useState, useEffect } from "react";
 import apiClient from "@apis/apiClient";
-import DeleteConfirmModal from "./DeleteConfirmModal";
-import { toast } from "react-toastify";
+import DeleteConfirmModal from "@components/DeleteConfirm/DeleteConfirmModal";
+import { showToast } from "@components/Toast/Toast";
 
 interface Label {
   uid: number;
@@ -119,11 +119,17 @@ const CustomerTable = ({
           setPage(newPage);
         }
         onRefresh();
-        toast.success("고객을 삭제했습니다.");
+        showToast({
+          message: "고객을 삭제했습니다.",
+          type: "success",
+        });
       }
     } catch (error) {
       console.error("Failed to delete customer:", error);
-      toast.error("고객 삭제에 실패했습니다.");
+      showToast({
+        message: "고객 삭제에 실패했습니다.",
+        type: "error",
+      });
     } finally {
       setDeleteModalOpen(false);
       setCustomerToDelete(null);
@@ -574,9 +580,9 @@ const CustomerTable = ({
       </Paper>
       <DeleteConfirmModal
         open={deleteModalOpen}
-        onClose={handleDeleteCancel}
         onConfirm={handleDeleteConfirm}
-        customerName={customerToDelete?.name || ""}
+        onCancel={handleDeleteCancel}
+        category="고객"
       />
     </Box>
   );
diff --git a/src/pages/CustomerListPage/CustomerTable/DeleteConfirmModal.tsx b/src/pages/CustomerListPage/CustomerTable/DeleteConfirmModal.tsx
deleted file mode 100644
index 8a38d46..0000000
--- a/src/pages/CustomerListPage/CustomerTable/DeleteConfirmModal.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import {
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  Button,
-  Typography,
-} from "@mui/material";
-
-interface Props {
-  open: boolean;
-  onClose: () => void;
-  onConfirm: () => void;
-  customerName: string;
-}
-
-const DeleteConfirmModal = ({
-  open,
-  onClose,
-  onConfirm,
-  customerName,
-}: Props) => {
-  return (
-    <Dialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
-      <DialogTitle>고객 삭제</DialogTitle>
-      <DialogContent>
-        <Typography>{customerName} 고객을 정말 삭제하시겠습니까?</Typography>
-        <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
-          삭제된 데이터는 복구할 수 없습니다.
-        </Typography>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={onClose} color="inherit">
-          취소
-        </Button>
-        <Button onClick={onConfirm} color="error" variant="contained">
-          삭제
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-};
-
-export default DeleteConfirmModal;
diff --git a/src/pages/DashboardPage/CompletedContractsModal.tsx b/src/pages/DashboardPage/CompletedContractsModal.tsx
index ec44f45..7c9d32d 100644
--- a/src/pages/DashboardPage/CompletedContractsModal.tsx
+++ b/src/pages/DashboardPage/CompletedContractsModal.tsx
@@ -161,20 +161,33 @@ const CompletedContractsModal = ({
           transform: "translate(-50%, -50%)",
           width: "80%",
           maxWidth: 1000,
-          bgcolor: "background.paper",
+          bgcolor: "#f5f5f5",
           boxShadow: 24,
           p: 4,
           borderRadius: 2,
           maxHeight: "80vh",
           overflow: "auto",
+          padding: "24px",
         }}
       >
-        <Typography variant="h6" component="h2" gutterBottom>
+        <Typography
+          variant="h6"
+          component="h2"
+          gutterBottom
+          sx={{ fontWeight: 700, marginBottom: "16px" }}
+        >
           완료된 계약 목록
         </Typography>
 
-        <Box sx={{ width: "100%", mt: "28px" }}>
-          <Paper sx={{ width: "100%", overflow: "hidden" }}>
+        <Box sx={{ width: "100%" }}>
+          <Paper
+            sx={{
+              width: "100%",
+              overflow: "hidden",
+              borderRadius: "8px",
+              boxShadow: "0 2px 6px rgba(0, 0, 0, 0.02)",
+            }}
+          >
             <TableContainer>
               <Table sx={{ minWidth: 650 }}>
                 <TableHead>
diff --git a/src/pages/DashboardPage/DashboardPage.tsx b/src/pages/DashboardPage/DashboardPage.tsx
index 0a44edd..825a0ec 100644
--- a/src/pages/DashboardPage/DashboardPage.tsx
+++ b/src/pages/DashboardPage/DashboardPage.tsx
@@ -18,13 +18,9 @@ import {
   DialogContent,
   DialogActions,
   Button,
-  Snackbar,
-  Alert,
   Chip,
   Tooltip,
   CircularProgress,
-  Modal,
-  TablePagination,
 } from "@mui/material";
 import "./DashboardPage.css";
 import AssignmentIcon from "@mui/icons-material/Assignment";
@@ -1806,22 +1802,6 @@ const DashboardPage = () => {
           setCompletedContractsPage(0);
         }}
       />
-      {/* Toast 메시지 */}
-      <Snackbar
-        open={toast.open}
-        autoHideDuration={2000}
-        onClose={() => setToast({ ...toast, open: false })}
-        anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
-        sx={{ bottom: "24px !important" }}
-      >
-        <Alert
-          onClose={() => setToast({ ...toast, open: false })}
-          severity={toast.severity}
-          sx={{ width: "100%", minWidth: "240px", borderRadius: "8px" }}
-        >
-          {toast.message}
-        </Alert>
-      </Snackbar>
     </Box>
   );
 };
diff --git a/src/pages/DashboardPage/OngoingContractsModal.tsx b/src/pages/DashboardPage/OngoingContractsModal.tsx
index bd00d21..42feb2e 100644
--- a/src/pages/DashboardPage/OngoingContractsModal.tsx
+++ b/src/pages/DashboardPage/OngoingContractsModal.tsx
@@ -159,22 +159,35 @@ const OngoingContractsModal = ({
           top: "50%",
           left: "50%",
           transform: "translate(-50%, -50%)",
-          width: "80%",
+          width: "100%",
           maxWidth: 1000,
-          bgcolor: "background.paper",
+          bgcolor: "#f5f5f5",
           boxShadow: 24,
           p: 4,
           borderRadius: 2,
           maxHeight: "80vh",
           overflow: "auto",
+          padding: "24px",
         }}
       >
-        <Typography variant="h6" component="h2" gutterBottom>
+        <Typography
+          variant="h6"
+          component="h2"
+          gutterBottom
+          sx={{ fontWeight: 700, marginBottom: "16px" }}
+        >
           진행중인 계약 목록
         </Typography>
 
-        <Box sx={{ width: "100%", mt: "28px" }}>
-          <Paper sx={{ width: "100%", overflow: "hidden" }}>
+        <Box sx={{ width: "100%" }}>
+          <Paper
+            sx={{
+              width: "100%",
+              overflow: "hidden",
+              borderRadius: "8px",
+              boxShadow: "0 2px 6px rgba(0, 0, 0, 0.02)",
+            }}
+          >
             <TableContainer>
               <Table sx={{ minWidth: 650 }}>
                 <TableHead>
diff --git a/src/pages/DashboardPage/RecentContractsModal.tsx b/src/pages/DashboardPage/RecentContractsModal.tsx
index da9febc..9ec5f6d 100644
--- a/src/pages/DashboardPage/RecentContractsModal.tsx
+++ b/src/pages/DashboardPage/RecentContractsModal.tsx
@@ -97,163 +97,180 @@ const RecentContractsModal = ({
           transform: "translate(-50%, -50%)",
           width: "80%",
           maxWidth: 1000,
-          bgcolor: "background.paper",
+          bgcolor: "#f5f5f5",
           boxShadow: 24,
           p: 4,
           borderRadius: 2,
           maxHeight: "80vh",
           overflow: "auto",
+          padding: "24px",
         }}
       >
-        <Typography variant="h6" component="h2" gutterBottom>
+        <Typography
+          variant="h6"
+          component="h2"
+          gutterBottom
+          sx={{ fontWeight: 700, marginBottom: "16px" }}
+        >
           최근 계약 목록
         </Typography>
-        <TableContainer component={Paper}>
-          <Table sx={{ minWidth: 650 }}>
-            <TableHead>
-              <TableRow>
-                <TableCell align="center">임대/매도인</TableCell>
-                <TableCell align="center">임차/매수인</TableCell>
-                <TableCell align="center">주소</TableCell>
-                <TableCell align="center">계약 카테고리</TableCell>
-                <TableCell align="center">계약일</TableCell>
-                <TableCell align="center">계약 시작일</TableCell>
-                <TableCell align="center">계약 종료일</TableCell>
-                <TableCell align="center">상태</TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {loading ? (
+        <Paper
+          sx={{
+            borderRadius: "8px",
+            boxShadow: "0 2px 6px rgba(0, 0, 0, 0.02)",
+            overflow: "hidden",
+          }}
+        >
+          <TableContainer>
+            <Table sx={{ minWidth: 650 }}>
+              <TableHead>
                 <TableRow>
-                  <TableCell colSpan={8} align="center">
-                    불러오는 중...
-                  </TableCell>
+                  <TableCell align="center">임대/매도인</TableCell>
+                  <TableCell align="center">임차/매수인</TableCell>
+                  <TableCell align="center">주소</TableCell>
+                  <TableCell align="center">계약 카테고리</TableCell>
+                  <TableCell align="center">계약일</TableCell>
+                  <TableCell align="center">계약 시작일</TableCell>
+                  <TableCell align="center">계약 종료일</TableCell>
+                  <TableCell align="center">상태</TableCell>
                 </TableRow>
-              ) : contracts.length === 0 ? (
-                <TableRow>
-                  <TableCell colSpan={8} align="center">
-                    계약 데이터가 없습니다
-                  </TableCell>
-                </TableRow>
-              ) : (
-                contracts.map((contract) => (
-                  <TableRow
-                    key={contract.uid}
-                    hover
-                    sx={{ cursor: "pointer" }}
-                    onClick={() => {
-                      navigate(`/contracts/${contract.uid}`);
-                      onClose();
-                    }}
-                  >
-                    <TableCell align="center">
-                      {Array.isArray(contract.lessorOrSellerNames)
-                        ? contract.lessorOrSellerNames.length === 0
-                          ? "-"
-                          : contract.lessorOrSellerNames.length === 1
-                          ? contract.lessorOrSellerNames[0]
-                          : `${contract.lessorOrSellerNames[0]} 외 ${
-                              contract.lessorOrSellerNames.length - 1
-                            }명`
-                        : "-"}
-                    </TableCell>
-                    <TableCell align="center">
-                      {Array.isArray(contract.lesseeOrBuyerNames)
-                        ? contract.lesseeOrBuyerNames.length === 0
-                          ? "-"
-                          : contract.lesseeOrBuyerNames.length === 1
-                          ? contract.lesseeOrBuyerNames[0]
-                          : `${contract.lesseeOrBuyerNames[0]} 외 ${
-                              contract.lesseeOrBuyerNames.length - 1
-                            }명`
-                        : "-"}
-                    </TableCell>
-                    <TableCell align="center">
-                      {contract.address ?? "-"}
-                    </TableCell>
-                    <TableCell align="center">
-                      {(() => {
-                        const categoryKoreanMap: Record<string, string> = {
-                          SALE: "매매",
-                          DEPOSIT: "전세",
-                          MONTHLY: "월세",
-                        };
-                        const colorMap: Record<string, string> = {
-                          SALE: "#4caf50",
-                          DEPOSIT: "#2196f3",
-                          MONTHLY: "#ff9800",
-                        };
-                        if (!contract.category) return "-";
-                        return (
-                          <Chip
-                            label={
-                              categoryKoreanMap[contract.category] ??
-                              contract.category
-                            }
-                            variant="outlined"
-                            sx={{
-                              color: colorMap[contract.category],
-                              borderColor: colorMap[contract.category],
-                              fontWeight: 500,
-                              height: 26,
-                              fontSize: 13,
-                            }}
-                          />
-                        );
-                      })()}
+              </TableHead>
+              <TableBody>
+                {loading ? (
+                  <TableRow>
+                    <TableCell colSpan={8} align="center">
+                      불러오는 중...
                     </TableCell>
-                    <TableCell align="center">
-                      {contract.contractDate ?? "-"}
-                    </TableCell>
-                    <TableCell align="center">
-                      {contract.contractStartDate ?? "-"}
-                    </TableCell>
-                    <TableCell align="center">
-                      {contract.contractEndDate ?? "-"}
-                    </TableCell>
-                    <TableCell align="center">
-                      {(() => {
-                        const statusInfo = CONTRACT_STATUS_TYPES.find(
-                          (item) => item.value === contract.status
-                        );
-                        return statusInfo ? (
-                          <Chip
-                            label={statusInfo.name}
-                            variant="outlined"
-                            sx={{
-                              color: getColor(statusInfo.color),
-                              borderColor: getColor(statusInfo.color),
-                              fontWeight: 500,
-                              height: 28,
-                              fontSize: 13,
-                            }}
-                          />
-                        ) : (
-                          contract.status
-                        );
-                      })()}
+                  </TableRow>
+                ) : contracts.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={8} align="center">
+                      계약 데이터가 없습니다
                     </TableCell>
                   </TableRow>
-                ))
-              )}
-            </TableBody>
-          </Table>
-        </TableContainer>
-        <TablePagination
-          component="div"
-          count={totalCount}
-          page={page}
-          rowsPerPage={rowsPerPage}
-          onPageChange={(event, newPage) => onPageChange(newPage)}
-          onRowsPerPageChange={(e) =>
-            onRowsPerPageChange(parseInt(e.target.value, 10))
-          }
-          rowsPerPageOptions={[10, 25, 50]}
-          labelRowsPerPage="페이지당 행 수"
-          labelDisplayedRows={({ from, to, count }) =>
-            `${count}개 중 ${from}-${to}개`
-          }
-        />
+                ) : (
+                  contracts.map((contract) => (
+                    <TableRow
+                      key={contract.uid}
+                      hover
+                      sx={{ cursor: "pointer" }}
+                      onClick={() => {
+                        navigate(`/contracts/${contract.uid}`);
+                        onClose();
+                      }}
+                    >
+                      <TableCell align="center">
+                        {Array.isArray(contract.lessorOrSellerNames)
+                          ? contract.lessorOrSellerNames.length === 0
+                            ? "-"
+                            : contract.lessorOrSellerNames.length === 1
+                            ? contract.lessorOrSellerNames[0]
+                            : `${contract.lessorOrSellerNames[0]} 외 ${
+                                contract.lessorOrSellerNames.length - 1
+                              }명`
+                          : "-"}
+                      </TableCell>
+                      <TableCell align="center">
+                        {Array.isArray(contract.lesseeOrBuyerNames)
+                          ? contract.lesseeOrBuyerNames.length === 0
+                            ? "-"
+                            : contract.lesseeOrBuyerNames.length === 1
+                            ? contract.lesseeOrBuyerNames[0]
+                            : `${contract.lesseeOrBuyerNames[0]} 외 ${
+                                contract.lesseeOrBuyerNames.length - 1
+                              }명`
+                          : "-"}
+                      </TableCell>
+                      <TableCell align="center">
+                        {contract.address ?? "-"}
+                      </TableCell>
+                      <TableCell align="center">
+                        {(() => {
+                          const categoryKoreanMap: Record<string, string> = {
+                            SALE: "매매",
+                            DEPOSIT: "전세",
+                            MONTHLY: "월세",
+                          };
+                          const colorMap: Record<string, string> = {
+                            SALE: "#4caf50",
+                            DEPOSIT: "#2196f3",
+                            MONTHLY: "#ff9800",
+                          };
+                          if (!contract.category) return "-";
+                          return (
+                            <Chip
+                              label={
+                                categoryKoreanMap[contract.category] ??
+                                contract.category
+                              }
+                              variant="outlined"
+                              sx={{
+                                color: colorMap[contract.category],
+                                borderColor: colorMap[contract.category],
+                                fontWeight: 500,
+                                height: 26,
+                                fontSize: 13,
+                              }}
+                            />
+                          );
+                        })()}
+                      </TableCell>
+                      <TableCell align="center">
+                        {contract.contractDate ?? "-"}
+                      </TableCell>
+                      <TableCell align="center">
+                        {contract.contractStartDate ?? "-"}
+                      </TableCell>
+                      <TableCell align="center">
+                        {contract.contractEndDate ?? "-"}
+                      </TableCell>
+                      <TableCell align="center">
+                        {(() => {
+                          const statusInfo = CONTRACT_STATUS_TYPES.find(
+                            (item) => item.value === contract.status
+                          );
+                          return statusInfo ? (
+                            <Chip
+                              label={statusInfo.name}
+                              variant="outlined"
+                              sx={{
+                                color: getColor(statusInfo.color),
+                                borderColor: getColor(statusInfo.color),
+                                fontWeight: 500,
+                                height: 28,
+                                fontSize: 13,
+                              }}
+                            />
+                          ) : (
+                            contract.status
+                          );
+                        })()}
+                      </TableCell>
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          </TableContainer>
+          <TablePagination
+            component="div"
+            count={totalCount}
+            page={page}
+            rowsPerPage={rowsPerPage}
+            onPageChange={(event, newPage) => onPageChange(newPage)}
+            onRowsPerPageChange={(e) =>
+              onRowsPerPageChange(parseInt(e.target.value, 10))
+            }
+            rowsPerPageOptions={[10, 25, 50]}
+            labelRowsPerPage="페이지당 행 수"
+            labelDisplayedRows={({ from, to, count }) =>
+              `${count}개 중 ${from}-${to}개`
+            }
+            sx={{
+              borderTop: "1px solid rgba(224, 224, 224, 1)",
+            }}
+          />
+        </Paper>
       </Box>
     </Modal>
   );
diff --git a/src/pages/DashboardPage/RecentCustomersModal.tsx b/src/pages/DashboardPage/RecentCustomersModal.tsx
index 8bfd398..5b0a3cf 100644
--- a/src/pages/DashboardPage/RecentCustomersModal.tsx
+++ b/src/pages/DashboardPage/RecentCustomersModal.tsx
@@ -44,6 +44,7 @@ const RecentCustomersModal = ({
       PaperProps={{
         sx: {
           borderRadius: "12px",
+          backgroundColor: "#f5f5f5",
         },
       }}
     >
@@ -53,7 +54,15 @@ const RecentCustomersModal = ({
         </Typography>
       </DialogTitle>
       <DialogContent sx={{ pt: "16px !important" }}>
-        <TableContainer sx={{ maxHeight: 480, overflow: "auto" }}>
+        <TableContainer
+          sx={{
+            maxHeight: 480,
+            overflow: "auto",
+            backgroundColor: "white",
+            borderRadius: "8px",
+            boxShadow: "0 2px 6px rgba(0, 0, 0, 0.02)",
+          }}
+        >
           <Table stickyHeader>
             <TableHead>
               <TableRow>
@@ -100,8 +109,10 @@ const RecentCustomersModal = ({
           variant="contained"
           sx={{
             backgroundColor: "#164F9E",
+            boxShadow: "none",
             "&:hover": {
               backgroundColor: "#0D3B7A",
+              boxShadow: "none",
             },
           }}
         >
diff --git a/src/pages/MessageTemplatePage/MessageTemplatePage.tsx b/src/pages/MessageTemplatePage/MessageTemplatePage.tsx
index 017e8de..64fcc52 100644
--- a/src/pages/MessageTemplatePage/MessageTemplatePage.tsx
+++ b/src/pages/MessageTemplatePage/MessageTemplatePage.tsx
@@ -16,7 +16,7 @@ import { toast } from "react-toastify";
 import PageHeader from "@components/PageHeader/PageHeader";
 import apiClient from "@apis/apiClient";
 import useUserStore from "@stores/useUserStore";
-
+import { showToast } from "@components/Toast/Toast";
 interface Template {
   uid: number;
   name: string;
@@ -75,7 +75,10 @@ const MessageTemplatePage = () => {
 
   const handleCreateTemplate = async () => {
     if (!templateTitle || !templateContent || !selectedCategory) {
-      toast.error("모든 필드를 입력해주세요.");
+      showToast({
+        message: "모든 필드를 입력해주세요.",
+        type: "error",
+      });
       return;
     }
 
@@ -90,14 +93,19 @@ const MessageTemplatePage = () => {
       if (response.data.success) {
         fetchTemplates();
         handleAddNewTemplate(); // Reset form
-        toast.success("템플릿이 성공적으로 생성되었습니다.");
+        showToast({
+          message: "템플릿을 생성했습니다.",
+          type: "success",
+        });
       }
     } catch (error: unknown) {
       const err = error as { response?: { data?: { message?: string } } };
-      toast.error(
-        err?.response?.data?.message ||
-          "템플릿 생성 중 오류가 발생했습니다. 다시 시도해주세요."
-      );
+      showToast({
+        message:
+          err?.response?.data?.message ||
+          "템플릿 생성 중 오류가 발생했습니다. 다시 시도해주세요.",
+        type: "error",
+      });
     } finally {
       setIsLoading(false);
     }
@@ -110,7 +118,10 @@ const MessageTemplatePage = () => {
       !templateContent ||
       !selectedCategory
     ) {
-      toast.error("모든 필드를 입력해주세요.");
+      showToast({
+        message: "모든 필드를 입력해주세요.",
+        type: "error",
+      });
       return;
     }
 
@@ -127,11 +138,17 @@ const MessageTemplatePage = () => {
 
       if (response.data.success) {
         fetchTemplates();
-        toast.success("템플릿을 수정했습니다.");
+        showToast({
+          message: "템플릿을 수정했습니다.",
+          type: "success",
+        });
       }
     } catch (error) {
       console.error("Error updating template:", error);
-      toast.error("템플릿 수정 중 오류가 발생했습니다. 다시 시도해주세요.");
+      showToast({
+        message: "템플릿 수정 중 오류가 발생했습니다. 다시 시도해주세요.",
+        type: "error",
+      });
     } finally {
       setIsLoading(false);
     }
diff --git a/src/pages/PrivatePropertyListPage/AgentPropertyDetailPage/AgentPropertyDetailPage.tsx b/src/pages/PrivatePropertyListPage/AgentPropertyDetailPage/AgentPropertyDetailPage.tsx
index f0831f4..876e490 100644
--- a/src/pages/PrivatePropertyListPage/AgentPropertyDetailPage/AgentPropertyDetailPage.tsx
+++ b/src/pages/PrivatePropertyListPage/AgentPropertyDetailPage/AgentPropertyDetailPage.tsx
@@ -22,6 +22,7 @@ import useUserStore from "@stores/useUserStore";
 import PropertyEditModal from "../PropertyAddButtonList/PropertyEditModal/PropertyEditModal";
 import EditIcon from "@mui/icons-material/Edit";
 import DeleteIcon from "@mui/icons-material/Delete";
+import { showToast } from "@components/Toast/Toast";
 
 interface AgentPropertyDetail {
   customer: string;
@@ -201,7 +202,10 @@ const KakaoMap = ({ lat, lng }: { lat: number; lng: number }) => {
       if (!mapRef.current) return;
       const kakao = (window as any).kakao;
       if (!kakao || !kakao.maps) {
-        toast.error("카카오맵 객체가 없습니다.");
+        showToast({
+          message: "카카오맵 객체가 없습니다.",
+          type: "error",
+        });
         return;
       }
       const map = new kakao.maps.Map(mapRef.current, {
@@ -224,7 +228,10 @@ const KakaoMap = ({ lat, lng }: { lat: number; lng: number }) => {
         (window as any).kakao.maps.load(createMap);
       };
       script.onerror = () => {
-        toast.error("카카오맵 스크립트 로드 실패");
+        showToast({
+          message: "카카오맵 스크립트 로드 실패",
+          type: "error",
+        });
       };
       document.head.appendChild(script);
     } else {
@@ -258,7 +265,10 @@ const AgentPropertyDetailPage = () => {
         setProperty(propertyRes.data.data);
       } catch (err) {
         console.error(err);
-        toast.error("매물 정보를 불러오는 데 실패했습니다.");
+        showToast({
+          message: "매물 정보를 불러오는 데 실패했습니다.",
+          type: "error",
+        });
       }
 
       try {
@@ -285,7 +295,10 @@ const AgentPropertyDetailPage = () => {
         setContractHistories(res.data.data);
       } catch (err) {
         console.error("계약 히스토리 불러오기 실패", err);
-        toast.error("계약 히스토리를 불러오는 데 실패했습니다.");
+        showToast({
+          message: "계약 히스토리를 불러오는 데 실패했습니다.",
+          type: "error",
+        });
       }
     };
 
@@ -318,12 +331,18 @@ const AgentPropertyDetailPage = () => {
     apiClient
       .delete(`/properties/${propertyUid}`)
       .then(() => {
-        toast.success("매물 삭제 성공");
+        showToast({
+          message: "매물을 삭제했습니다.",
+          type: "success",
+        });
         navigate("/properties/private");
       })
       .catch((err) => {
         console.error("매물 삭제 실패", err);
-        toast.error("매물 삭제 중 오류가 발생했습니다.");
+        showToast({
+          message: "매물 삭제 중 오류가 발생했습니다.",
+          type: "error",
+        });
       })
       .finally(() => {
         setDeleteModalOpen(false);
@@ -405,7 +424,10 @@ const AgentPropertyDetailPage = () => {
                 .then((res) => setProperty(res.data.data))
                 .catch((err) => {
                   console.error(err);
-                  toast.error("매물 정보를 불러오는 데 실패했습니다.");
+                  showToast({
+                    message: "매물 정보를 불러오는 데 실패했습니다.",
+                    type: "error",
+                  });
                 });
             }}
           />
@@ -414,6 +436,7 @@ const AgentPropertyDetailPage = () => {
           open={deleteModalOpen}
           onConfirm={confirmDelete}
           onCancel={() => setDeleteModalOpen(false)}
+          category="매물"
         />
         <DetailHeader>
           <HeaderTitle>
@@ -636,85 +659,90 @@ const AgentPropertyDetailPage = () => {
               계약 정보
             </Typography>
 
-            <Box display="flex" flexWrap="wrap" columnGap={2} rowGap={1}>
-              {/* 계약 시작일 */}
-              <Box width="calc(50% - 8px)">
-                <InfoItem>
-                  <InfoLabel>계약 시작일</InfoLabel>
-                  <InfoValue>
-                    {contractInfo?.contractStartDate
-                      ? dayjs(contractInfo.contractStartDate).format(
-                          "YYYY.MM.DD"
-                        )
-                      : "-"}
-                  </InfoValue>
-                </InfoItem>
+            {!contractInfo || contractInfo?.contractUid === null ? (
+              <Box
+                sx={{
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  minHeight: "200px",
+                }}
+              >
+                <Typography color="text.secondary">첨부 문서 없음</Typography>
               </Box>
+            ) : (
+              <Box display="flex" flexWrap="wrap" columnGap={2} rowGap={1}>
+                {/* 계약 시작일 */}
+                <Box width="calc(50% - 8px)">
+                  <InfoItem>
+                    <InfoLabel>계약 시작일</InfoLabel>
+                    <InfoValue>
+                      {contractInfo.contractStartDate
+                        ? dayjs(contractInfo.contractStartDate).format(
+                            "YYYY.MM.DD"
+                          )
+                        : "-"}
+                    </InfoValue>
+                  </InfoItem>
+                </Box>
 
-              {/* 계약 종료일 */}
-              <Box width="calc(50% - 8px)">
-                <InfoItem>
-                  <InfoLabel>계약 종료일</InfoLabel>
-                  <InfoValue>
-                    {contractInfo?.contractEndDate
-                      ? dayjs(contractInfo.contractEndDate).format("YYYY.MM.DD")
-                      : "-"}
-                  </InfoValue>
-                </InfoItem>
-              </Box>
+                {/* 계약 종료일 */}
+                <Box width="calc(50% - 8px)">
+                  <InfoItem>
+                    <InfoLabel>계약 종료일</InfoLabel>
+                    <InfoValue>
+                      {contractInfo.contractEndDate
+                        ? dayjs(contractInfo.contractEndDate).format(
+                            "YYYY.MM.DD"
+                          )
+                        : "-"}
+                    </InfoValue>
+                  </InfoItem>
+                </Box>
 
-              {/* 계약일 */}
-              <Box width="calc(50% - 8px)">
-                <InfoItem>
-                  <InfoLabel>계약일</InfoLabel>
-                  <InfoValue>
-                    {contractInfo?.contractDate
-                      ? dayjs(contractInfo.contractDate).format("YYYY.MM.DD")
-                      : "-"}
-                  </InfoValue>
-                </InfoItem>
-              </Box>
+                {/* 계약일 */}
+                <Box width="calc(50% - 8px)">
+                  <InfoItem>
+                    <InfoLabel>계약일</InfoLabel>
+                    <InfoValue>
+                      {contractInfo.contractDate
+                        ? dayjs(contractInfo.contractDate).format("YYYY.MM.DD")
+                        : "-"}
+                    </InfoValue>
+                  </InfoItem>
+                </Box>
 
-              {/* 임대인/매도인 */}
-              <Box width="calc(50% - 8px)">
-                <InfoItem>
-                  <InfoLabel>임대인/매도인</InfoLabel>
-                  <InfoValue>
-                    {contractInfo
-                      ? getCustomerNames(
-                          contractInfo.customers,
-                          "LESSOR_OR_SELLER"
-                        )
-                      : "-"}
-                  </InfoValue>
-                </InfoItem>
-              </Box>
+                {/* 임대인/매도인 */}
+                <Box width="calc(50% - 8px)">
+                  <InfoItem>
+                    <InfoLabel>임대인/매도인</InfoLabel>
+                    <InfoValue>
+                      {getCustomerNames(
+                        contractInfo.customers,
+                        "LESSOR_OR_SELLER"
+                      )}
+                    </InfoValue>
+                  </InfoItem>
+                </Box>
 
-              {/* 임차인/매수인 */}
-              <Box width="calc(50% - 8px)">
-                <InfoItem>
-                  <InfoLabel>임차인/매수인</InfoLabel>
-                  <InfoValue>
-                    {contractInfo
-                      ? getCustomerNames(
-                          contractInfo.customers,
-                          "LESSEE_OR_BUYER"
-                        )
-                      : "-"}
-                  </InfoValue>
-                </InfoItem>
+                {/* 임차인/매수인 */}
+                <Box width="calc(50% - 8px)">
+                  <InfoItem>
+                    <InfoLabel>임차인/매수인</InfoLabel>
+                    <InfoValue>
+                      {getCustomerNames(
+                        contractInfo.customers,
+                        "LESSEE_OR_BUYER"
+                      )}
+                    </InfoValue>
+                  </InfoItem>
+                </Box>
               </Box>
-            </Box>
+            )}
           </InfoCard>
         </InfoGrid>
 
-        <Box
-          display="flex"
-          gap={3}
-          mt={3}
-          alignItems="stretch"
-          sx={{ height: "fit-content", alignItems: "stretch" }}
-        >
+        <Box display="flex" gap={3} mt={3} sx={{ height: "fit-content" }}>
           {property.details && (
             <InfoCard
               sx={{
@@ -722,6 +750,7 @@ const AgentPropertyDetailPage = () => {
                 display: "flex",
                 flexDirection: "column",
                 height: "100%",
+                minHeight: "230px",
               }}
             >
               <Typography variant="h6" fontWeight="bold" gutterBottom>
@@ -740,6 +769,7 @@ const AgentPropertyDetailPage = () => {
               display: "flex",
               flexDirection: "column",
               height: "100%",
+              minHeight: "230px",
             }}
           >
             <Tabs value={tab} onChange={(_, v) => setTab(v)} sx={{ mb: 2 }}>
@@ -773,7 +803,7 @@ const AgentPropertyDetailPage = () => {
                 </Box>
                 {contractHistories.length === 0 ? (
                   <Typography color="text.secondary" align="center">
-                    히스토리 없음
+                    매물과 관련된 계약 히스토리가 없습니다.
                   </Typography>
                 ) : (
                   contractHistories.map((history, idx) => {
@@ -839,7 +869,7 @@ const AgentPropertyDetailPage = () => {
                 </Box>
                 {counselHistories.length === 0 ? (
                   <Typography color="text.secondary" align="center">
-                    히스토리 없음
+                    매물과 관련된 상담 히스토리가 없습니다.
                   </Typography>
                 ) : (
                   counselHistories.map((counsel) => (
diff --git a/src/pages/PrivatePropertyListPage/ContractDetailPage/ContractDetailContent.tsx b/src/pages/PrivatePropertyListPage/ContractDetailPage/ContractDetailContent.tsx
new file mode 100644
index 0000000..7b5783c
--- /dev/null
+++ b/src/pages/PrivatePropertyListPage/ContractDetailPage/ContractDetailContent.tsx
@@ -0,0 +1,14 @@
+            {!contractInfo || contractInfo?.contractUid === null ? (
+              <Box
+                sx={{
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  minHeight: "200px",
+                }}
+              >
+                <Typography color="text.secondary">
+                  첨부 문서 없음
+                </Typography>
+              </Box>
+            ) : ( 
\ No newline at end of file
diff --git a/src/pages/PrivatePropertyListPage/PrivatePropertyListPage.tsx b/src/pages/PrivatePropertyListPage/PrivatePropertyListPage.tsx
index 59496df..ffdd1d6 100644
--- a/src/pages/PrivatePropertyListPage/PrivatePropertyListPage.tsx
+++ b/src/pages/PrivatePropertyListPage/PrivatePropertyListPage.tsx
@@ -82,7 +82,7 @@ function PrivatePropertyListPage() {
   const { user } = useUserStore();
   const navigate = useNavigate();
   const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(10);
+  const [rowsPerPage, setRowsPerPage] = useState(50);
   const [totalElements, setTotalElements] = useState(0);
 
   const [region, setRegion] = useState({
@@ -94,10 +94,13 @@ function PrivatePropertyListPage() {
     selectedDong: "",
   });
   const updateLegalDistrictCode = (newState: typeof region) => {
-    const code = newState.selectedDong || newState.selectedSigungu || newState.selectedSido;
-  
+    const code =
+      newState.selectedDong ||
+      newState.selectedSigungu ||
+      newState.selectedSido;
+
     let prefix = "";
-  
+
     if (newState.selectedDong) {
       prefix = String(code).slice(0, 8); // 동: 앞 8자리 (정확한 법정동코드)
     } else if (newState.selectedSigungu) {
@@ -105,7 +108,7 @@ function PrivatePropertyListPage() {
     } else if (newState.selectedSido) {
       prefix = String(code).slice(0, 2); // 시/도: 앞 2자리
     }
-  
+
     setFilter((prev) => ({
       ...prev,
       legalDistrictCode: prefix || undefined,
@@ -253,7 +256,7 @@ function PrivatePropertyListPage() {
   if (loading) {
     return (
       <PageContainer>
-        <PageHeader title="내 매물 목록" userName={user?.name || "-"} />
+        <PageHeader title="개인 매물 목록" userName={user?.name || "-"} />
         <LoadingContainer>
           <CircularProgress color="primary" />
         </LoadingContainer>
@@ -263,7 +266,7 @@ function PrivatePropertyListPage() {
 
   return (
     <PageContainer sx={{ minWidth: "800px" }}>
-      <PageHeader title="내 매물 목록" userName={user?.name || "-"} />
+      <PageHeader title="개인 매물 목록" userName={user?.name || "-"} />
 
       <ContentContainer>
         {/* 상단 필터 바 */}
@@ -324,7 +327,11 @@ function PrivatePropertyListPage() {
 
           {/* 카테고리/판매유형/상세필터/등록 버튼 */}
           <FilterContainer>
-            <LeftButtonGroup>
+            <LeftButtonGroup
+              sx={{
+                gap: 1,
+              }}
+            >
               <CategoryButtonGroup>
                 <StyledSelect
                   size="small"
@@ -374,25 +381,27 @@ function PrivatePropertyListPage() {
                 </StyledSelect>
               </TypeButtonGroup>
               <FilterButtonWrapper>
-  <FilterButton
-    variant="outlined"
-    onClick={() => setFilterModalOpen(true)}
-    sx={{
-      // 기존 스타일 유지
-      border: "1px solid #164F9E",
-      color: "#164F9E",
-      minWidth: "40px",
-      padding: "5px",
-      borderRadius: "14px",
-      "&:hover": {
-        backgroundColor: "#F5F5F5",
-        border: "1px solid #164F9E",
-      },
-    }}
-  >
-    <FilterListIcon />
-  </FilterButton>
-</FilterButtonWrapper>
+                <FilterButton
+                  variant="outlined"
+                  onClick={() => setFilterModalOpen(true)}
+                  sx={{
+                    // 기존 스타일 유지
+                    border: "1px solid #164F9E",
+                    color: "#164F9E",
+                    minWidth: "40px",
+                    padding: "5px",
+                    borderRadius: "20px",
+                    width: "117px",
+                    "&:hover": {
+                      backgroundColor: "#F5F5F5",
+                      border: "1px solid #164F9E",
+                    },
+                  }}
+                >
+                  <FilterListIcon sx={{ mr: "8px" }} />
+                  상세 필터
+                </FilterButton>
+              </FilterButtonWrapper>
             </LeftButtonGroup>
             <RightButtonGroup>
               <PropertyAddButtonList fetchPropertyData={fetchPropertyData} />
diff --git a/src/pages/PrivatePropertyListPage/PropertyAddButtonList/BulkUploadModal.tsx b/src/pages/PrivatePropertyListPage/PropertyAddButtonList/BulkUploadModal.tsx
index 09a0c9a..c1108bb 100644
--- a/src/pages/PrivatePropertyListPage/PropertyAddButtonList/BulkUploadModal.tsx
+++ b/src/pages/PrivatePropertyListPage/PropertyAddButtonList/BulkUploadModal.tsx
@@ -14,6 +14,7 @@ import { useDropzone } from "react-dropzone";
 import apiClient from "@apis/apiClient";
 import { toast } from "react-toastify";
 import { AxiosError } from "axios";
+import { showToast } from "@components/Toast/Toast";
 
 interface Props {
   open: boolean;
@@ -64,7 +65,10 @@ function BulkUploadModal({ open, handleClose, fetchPropertyData }: Props) {
     try {
       setIsLoading(true);
       await apiClient.post("/properties/bulk", formData);
-      toast.success("매물 정보 업로드에 성공했습니다");
+      showToast({
+        message: "매물 정보를 업로드 했습니다.",
+        type: "success",
+      });
       handleClose();
       fetchPropertyData();
     } catch (error) {
@@ -74,7 +78,10 @@ function BulkUploadModal({ open, handleClose, fetchPropertyData }: Props) {
         axiosError.response?.data?.message ||
         "파일 업로드 중 오류가 발생했습니다.";
       setError(errorMessage);
-      toast.error(errorMessage);
+      showToast({
+        message: errorMessage,
+        type: "error",
+      });
     } finally {
       setIsLoading(false);
     }
@@ -131,7 +138,11 @@ function BulkUploadModal({ open, handleClose, fetchPropertyData }: Props) {
         )}
       </DialogContent>
       <DialogActions>
-        <Button onClick={handleClose} disabled={isLoading}>
+        <Button
+          onClick={handleClose}
+          disabled={isLoading}
+          sx={{ color: "#164F9E" }}
+        >
           취소
         </Button>
         <Button
diff --git a/src/pages/PrivatePropertyListPage/PropertyAddButtonList/PropertyAddButtonList.tsx b/src/pages/PrivatePropertyListPage/PropertyAddButtonList/PropertyAddButtonList.tsx
index 89cd389..2b9557d 100644
--- a/src/pages/PrivatePropertyListPage/PropertyAddButtonList/PropertyAddButtonList.tsx
+++ b/src/pages/PrivatePropertyListPage/PropertyAddButtonList/PropertyAddButtonList.tsx
@@ -27,10 +27,11 @@ function PropertyAddButtonList({ fetchPropertyData }: Props) {
           onClick={handleOpen}
           sx={{
             backgroundColor: "#164F9E",
-            "&:hover": { backgroundColor: "#0D3B7A" },
+            boxShadow: "none",
             height: "36px",
             fontSize: "13px",
             padding: "0 16px",
+            "&:hover": { backgroundColor: "#0D3B7A", boxShadow: "none" },
           }}
         >
           매물 등록
@@ -48,6 +49,7 @@ function PropertyAddButtonList({ fetchPropertyData }: Props) {
             "&:hover": {
               borderColor: "#0D3B7A",
               color: "#0D3B7A",
+              backgroundColor: "rgba(22, 79, 158, 0.08)",
             },
           }}
         />
diff --git a/src/pages/PrivatePropertyListPage/PropertyAddButtonList/PropertyAddModal/PropertyAddModal.tsx b/src/pages/PrivatePropertyListPage/PropertyAddButtonList/PropertyAddModal/PropertyAddModal.tsx
index 7f0a425..97ef868 100644
--- a/src/pages/PrivatePropertyListPage/PropertyAddButtonList/PropertyAddModal/PropertyAddModal.tsx
+++ b/src/pages/PrivatePropertyListPage/PropertyAddButtonList/PropertyAddModal/PropertyAddModal.tsx
@@ -20,7 +20,7 @@ import { DesktopDatePicker } from "@mui/x-date-pickers";
 import useInput from "@hooks/useInput";
 import apiClient from "@apis/apiClient";
 import DaumPost from "./DaumPost";
-import { toast } from "react-toastify";
+import { showToast } from "@components/Toast/Toast";
 
 function useNumericInput(
   initialValue: string | number | null = ""
@@ -97,9 +97,9 @@ function PropertyAddModal({
   const [price, handleChangePrice, priceError, setPriceError] =
     useNumericInput("");
   const [netArea, handleChangeNetArea, netAreaError, setNetAreaError] =
-  useRawNumericInput("");
+    useRawNumericInput("");
   const [totalArea, handleChangeTotalArea, totalAreaError, setTotalAreaError] =
-  useRawNumericInput("");
+    useRawNumericInput("");
   const [floor, handleChangeFloor, floorError, setFloorError] =
     useRawNumericInput("");
   const [
@@ -121,17 +121,24 @@ function PropertyAddModal({
   const [hasElevator, setHasElevator] = useState<boolean>(false);
 
   const handleClickSubmitButton = () => {
-    if (!customerUid) return toast.error("고객을 선택해주세요.");
-    if (!address) return toast.error("주소를 입력해주세요.");
-    if (!realCategory) return toast.error("매물 유형을 선택해주세요.");
-    if (!type) return toast.error("거래 유형을 선택해주세요.");
+    if (!customerUid)
+      return showToast({ message: "고객을 선택해주세요.", type: "error" });
+    if (!address)
+      return showToast({ message: "주소를 입력해주세요.", type: "error" });
+    if (!realCategory)
+      return showToast({ message: "매물 유형을 선택해주세요.", type: "error" });
+    if (!type)
+      return showToast({ message: "거래 유형을 선택해주세요.", type: "error" });
     if (hasElevator === null || hasElevator === undefined)
-      return toast.error("엘리베이터 유무를 선택해주세요.");
+      return showToast({
+        message: "엘리베이터 유무를 선택해주세요.",
+        type: "error",
+      });
     if (!netArea || Number(netArea) <= 0)
-      return toast.error("전용면적을 입력해주세요.");
+      return showToast({ message: "전용면적을 입력해주세요.", type: "error" });
     if (!totalArea || Number(totalArea) <= 0)
-      return toast.error("공급면적을 입력해주세요.");
-    
+      return showToast({ message: "공급면적을 입력해주세요.", type: "error" });
+
     const parseNumber = (str: string) => {
       if (!str || str.replace(/,/g, "") === "") return null;
       return Number(str.replace(/,/g, ""));
@@ -164,14 +171,18 @@ function PropertyAddModal({
       .post("/properties", propertyDataToSubmit)
       .then((res) => {
         if (res.status === 201) {
-          toast("매물 등록 성공");
-          fetchPropertyData();
           handleClose();
+          showToast({ message: "매물을 등록했습니다.", type: "success" });
+          fetchPropertyData();
         }
       })
       .catch((error) => {
         const message = error.response?.data?.message;
-        if (!message) return toast.error("등록 중 오류가 발생했습니다.");
+        if (!message)
+          return showToast({
+            message: "등록 중 오류가 발생했습니다.",
+            type: "error",
+          });
 
         const errorMap: Record<string, (msg: string) => void> = {
           보증금: (msg) => setDepositError(msg),
@@ -181,16 +192,20 @@ function PropertyAddModal({
           "공급 면적": (msg) => setTotalAreaError(msg),
           층수: (msg) => setFloorError(msg),
           건축년도: (msg) => setConstructionYearError(msg),
-          주소: (msg) => toast.error(msg),
-          고객: () => toast.error(message),
-          "이미 등록되어있는 매물입니다.": () => toast.error("이미 등록되어있는 매물입니다."),
+          주소: (msg) => showToast({ message: msg, type: "error" }),
+          고객: () => showToast({ message, type: "error" }),
+          "이미 등록되어있는 매물입니다.": () =>
+            showToast({
+              message: "이미 등록되어있는 매물입니다.",
+              type: "error",
+            }),
         };
 
         const matched = Object.entries(errorMap).find(([key]) =>
           message.includes(key)
         );
         if (matched) matched[1](message);
-        else toast.error(message);
+        else showToast({ message, type: "error" });
       });
   };
   useEffect(() => {
@@ -221,268 +236,294 @@ function PropertyAddModal({
   }, []);
 
   return (
-    <Modal open={open} onClose={handleClose}>
-      <Box
-        sx={{
-          position: "absolute",
-          top: "50%",
-          left: "50%",
-          transform: "translate(-50%, -50%)",
-          width: "50vw",
-          backgroundColor: "white",
-          boxShadow: 24,
-          borderRadius: 2,
-          p: 4,
-          maxHeight: "80vh",
-          overflowY: "auto",
-        }}
-      >
-        <Typography variant="h6">매물 등록</Typography>
-        <TextField
-          select
-          label="고객 선택"
-          value={customerUid !== null ? customerUid.toString() : ""}
-          onChange={(e) => setCustomerUid(Number(e.target.value))}
-          fullWidth
-          sx={{ mt: 2 }}
-        >
-          {customerOptions.map((customer) => (
-            <MenuItem key={customer.uid} value={customer.uid.toString()}>
-              {customer.name}
-            </MenuItem>
-          ))}
-        </TextField>
-
-        <TextField
-          label="주소"
-          value={address ?? ""}
-          variant="outlined"
-          disabled
-          fullWidth
-          sx={{ mt: 2 }}
-        />
-        <DaumPost setAddress={setAddress} />
-        <TextField
-          label="상세 주소"
-          value={extraAddress ?? ""}
-          onChange={handleChangeDetailAddress}
-          disabled={!address}
-          variant="outlined"
-          fullWidth
-          sx={{ mt: 2 }}
-        />
-
-        <FormControlLabel
-          control={
-            <Checkbox
-              checked={createContract}
-              onChange={(e) => setCreateContract(e.target.checked)}
-            />
-          }
-          label="계약 자동 생성하기"
-          sx={{ mt: 2 }}
-        />
-        {/* 거래 유형 */}
-        <Typography variant="subtitle1" sx={{ mt: 2 }}>
-          거래 유형
-        </Typography>
-        <RadioGroup
-          row
-          value={type}
-          onChange={(event) =>
-            setType(event.target.value as "SALE" | "DEPOSIT" | "MONTHLY")
-          }
+    <>
+      <Modal open={open} onClose={handleClose}>
+        <Box
+          sx={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: "50vw",
+            backgroundColor: "white",
+            boxShadow: 24,
+            borderRadius: 2,
+            p: 4,
+            maxHeight: "80vh",
+            overflowY: "auto",
+          }}
         >
-          <FormControlLabel value="SALE" control={<Radio />} label="매매" />
-          <FormControlLabel value="DEPOSIT" control={<Radio />} label="전세" />
-          <FormControlLabel value="MONTHLY" control={<Radio />} label="월세" />
-        </RadioGroup>
-        {/* 조건부 TextField 렌더링 */}
-        {type === "SALE" && (
+          <Typography
+            variant="h6"
+            sx={{ color: "#164F9E", fontWeight: "bold", mb: 1.5 }}
+          >
+            매물 등록
+          </Typography>
           <TextField
-            label="매매 가격"
-            value={price ?? ""}
-            onChange={handleChangePrice}
+            select
+            label="고객 선택"
+            value={customerUid !== null ? customerUid.toString() : ""}
+            onChange={(e) => setCustomerUid(Number(e.target.value))}
+            fullWidth
             sx={{ mt: 2 }}
+          >
+            {customerOptions.map((customer) => (
+              <MenuItem key={customer.uid} value={customer.uid.toString()}>
+                {customer.name}
+              </MenuItem>
+            ))}
+          </TextField>
+
+          <TextField
+            label="주소"
+            value={address ?? ""}
+            variant="outlined"
+            disabled
             fullWidth
-            placeholder="숫자만 입력하세요"
-            error={!!priceError}
-            helperText={priceError ?? undefined}
+            sx={{ mt: 2 }}
           />
-        )}
-        {type === "DEPOSIT" && (
+          <DaumPost setAddress={setAddress} />
           <TextField
-            label="보증금"
-            value={deposit ?? ""}
-            onChange={handleChangeDeposit}
-            sx={{ mt: 2 }}
+            label="상세 주소"
+            value={extraAddress ?? ""}
+            onChange={handleChangeDetailAddress}
+            disabled={!address}
+            variant="outlined"
             fullWidth
           />
-        )}
-        {type === "MONTHLY" && (
-          <>
+
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={createContract}
+                onChange={(e) => setCreateContract(e.target.checked)}
+              />
+            }
+            label="계약 자동 생성하기"
+            sx={{ mt: 2 }}
+          />
+          {/* 거래 유형 */}
+          <Typography variant="subtitle1" sx={{ mt: 2 }}>
+            거래 유형
+          </Typography>
+          <RadioGroup
+            row
+            value={type}
+            onChange={(event) =>
+              setType(event.target.value as "SALE" | "DEPOSIT" | "MONTHLY")
+            }
+          >
+            <FormControlLabel value="SALE" control={<Radio />} label="매매" />
+            <FormControlLabel
+              value="DEPOSIT"
+              control={<Radio />}
+              label="전세"
+            />
+            <FormControlLabel
+              value="MONTHLY"
+              control={<Radio />}
+              label="월세"
+            />
+          </RadioGroup>
+          {/* 조건부 TextField 렌더링 */}
+          {type === "SALE" && (
             <TextField
-              label="보증금"
-              value={deposit ?? ""}
-              onChange={handleChangeDeposit}
+              label="매매 가격"
+              value={price ?? ""}
+              onChange={handleChangePrice}
               sx={{ mt: 2 }}
               fullWidth
+              placeholder="숫자만 입력하세요"
+              error={!!priceError}
+              helperText={priceError ?? undefined}
             />
+          )}
+          {type === "DEPOSIT" && (
             <TextField
-              label="월세"
-              value={monthlyRent ?? ""}
-              onChange={handleChangeMonthlyRent}
+              label="보증금"
+              value={deposit ?? ""}
+              onChange={handleChangeDeposit}
               sx={{ mt: 2 }}
               fullWidth
             />
-          </>
-        )}
-        <Typography variant="subtitle1" sx={{ mt: 2 }}>
-          부동산 유형 선택
-        </Typography>
-        <RadioGroup
-          row
-          value={realCategory}
-          onChange={(event) => setRealCategory(event.target.value)}
-        >
-          <FormControlLabel value="ONE_ROOM" control={<Radio />} label="원룸" />
-          <FormControlLabel value="TWO_ROOM" control={<Radio />} label="투룸" />
-          <FormControlLabel
-            value="APARTMENT"
-            control={<Radio />}
-            label="아파트"
+          )}
+          {type === "MONTHLY" && (
+            <>
+              <TextField
+                label="보증금"
+                value={deposit ?? ""}
+                onChange={handleChangeDeposit}
+                sx={{ mt: 2 }}
+                fullWidth
+              />
+              <TextField
+                label="월세"
+                value={monthlyRent ?? ""}
+                onChange={handleChangeMonthlyRent}
+                sx={{ mt: 2 }}
+                fullWidth
+              />
+            </>
+          )}
+          <Typography variant="subtitle1" sx={{ mt: 2 }}>
+            부동산 유형 선택
+          </Typography>
+          <RadioGroup
+            row
+            value={realCategory}
+            onChange={(event) => setRealCategory(event.target.value)}
+          >
+            <FormControlLabel
+              value="ONE_ROOM"
+              control={<Radio />}
+              label="원룸"
+            />
+            <FormControlLabel
+              value="TWO_ROOM"
+              control={<Radio />}
+              label="투룸"
+            />
+            <FormControlLabel
+              value="APARTMENT"
+              control={<Radio />}
+              label="아파트"
+            />
+            <FormControlLabel value="VILLA" control={<Radio />} label="빌라" />
+            <FormControlLabel value="HOUSE" control={<Radio />} label="주택" />
+            <FormControlLabel
+              value="OFFICETEL"
+              control={<Radio />}
+              label="오피스텔"
+            />
+            <FormControlLabel
+              value="COMMERCIAL"
+              control={<Radio />}
+              label="상가"
+            />
+          </RadioGroup>
+          <TextField
+            label="공급 면적"
+            value={totalArea}
+            onChange={handleChangeTotalArea}
+            sx={{ mt: 2 }}
+            fullWidth
+            placeholder="숫자만 입력하세요"
+            error={!!totalAreaError}
+            helperText={totalAreaError ?? undefined}
           />
-          <FormControlLabel value="VILLA" control={<Radio />} label="빌라" />
-          <FormControlLabel value="HOUSE" control={<Radio />} label="주택" />
-          <FormControlLabel
-            value="OFFICETEL"
-            control={<Radio />}
-            label="오피스텔"
+          <TextField
+            label="전용 면적"
+            value={netArea ?? ""}
+            onChange={handleChangeNetArea}
+            sx={{ mt: 2 }}
+            fullWidth
+            placeholder="숫자만 입력하세요"
+            error={!!netAreaError}
+            helperText={netAreaError ?? undefined}
           />
-          <FormControlLabel
-            value="COMMERCIAL"
-            control={<Radio />}
-            label="상가"
+          <TextField
+            label="층수"
+            value={floor ?? ""}
+            onChange={handleChangeFloor}
+            sx={{ mt: 2 }}
+            fullWidth
+            placeholder="숫자만 입력하세요"
+            error={!!floorError}
+            helperText={floorError ?? undefined}
           />
-        </RadioGroup>
-        <TextField
-          label="공급 면적"
-          value={totalArea}
-          onChange={handleChangeTotalArea}
-          sx={{ mt: 2 }}
-          fullWidth
-          placeholder="숫자만 입력하세요"
-          error={!!totalAreaError}
-          helperText={totalAreaError ?? undefined}
-        />
-        <TextField
-          label="전용 면적"
-          value={netArea ?? ""}
-          onChange={handleChangeNetArea}
-          sx={{ mt: 2 }}
-          fullWidth
-          placeholder="숫자만 입력하세요"
-          error={!!netAreaError}
-          helperText={netAreaError ?? undefined}
-        />
-        <TextField
-          label="층수"
-          value={floor ?? ""}
-          onChange={handleChangeFloor}
-          sx={{ mt: 2 }}
-          fullWidth
-          placeholder="숫자만 입력하세요"
-          error={!!floorError}
-          helperText={floorError ?? undefined}
-        />
-        {/* 반려동물 여부 */}
-        <Typography variant="subtitle1" sx={{ mt: 2 }}>
-          반려동물 여부
-        </Typography>
-        <RadioGroup
-          row
-          value={petsAllowed.toString()}
-          onChange={(e) => setPetsAllowed(e.target.value === "true")}
-        >
-          <FormControlLabel value={"true"} control={<Radio />} label="허용" />
-          <FormControlLabel value={"false"} control={<Radio />} label="불가" />
-        </RadioGroup>
-
-        {/* 건물 엘리베이터 여부 */}
-        <Typography variant="subtitle1" sx={{ mt: 2 }}>
-          건물 엘리베이터 여부
-        </Typography>
-        <RadioGroup
-          row
-          value={hasElevator.toString()}
-          onChange={(e) => setHasElevator(e.target.value === "true")}
-        >
-          <FormControlLabel value="true" control={<Radio />} label="있음" />
-          <FormControlLabel value="false" control={<Radio />} label="없음" />
-        </RadioGroup>
-        
-        <LocalizationProvider dateAdapter={AdapterDayjs}>
-          <DemoContainer components={["DatePicker"]}>
-            <DesktopDatePicker
-              onChange={setMoveInDate}
-              value={moveInDate}
-              format="YYYY. MM. DD"
-              label="입주 가능일"
-              slotProps={{
-                textField: {
-                  fullWidth: true, // 추가
-                },
-              }}
+          {/* 반려동물 여부 */}
+          <Typography variant="subtitle1" sx={{ mt: 2 }}>
+            반려동물 여부
+          </Typography>
+          <RadioGroup
+            row
+            value={petsAllowed.toString()}
+            onChange={(e) => setPetsAllowed(e.target.value === "true")}
+          >
+            <FormControlLabel value={"true"} control={<Radio />} label="허용" />
+            <FormControlLabel
+              value={"false"}
+              control={<Radio />}
+              label="불가"
             />
-          </DemoContainer>
-        </LocalizationProvider>
+          </RadioGroup>
 
-        {/* 건축년도 */}
-        <TextField
-          label="건축년도"
-          value={constructionYear ?? ""}
-          onChange={handleChangeConstructionYear}
-          sx={{ mt: 2 }}
-          fullWidth
-          placeholder="숫자만 입력하세요 ex)2010"
-          error={!!constructionYearError}
-          helperText={constructionYearError ?? undefined}
-        />
-        <TextField
-          label="주차 가능 대수"
-          value={parkingCapacity}
-          onChange={handleChangeParkingCapacity}
-          sx={{ mt: 2 }}
-          fullWidth
-          placeholder="숫자만 입력하세요"
-          error={!!parkingCapacityError}
-          helperText={parkingCapacityError ?? undefined}
-        />
+          {/* 건물 엘리베이터 여부 */}
+          <Typography variant="subtitle1" sx={{ mt: 2 }}>
+            건물 엘리베이터 여부
+          </Typography>
+          <RadioGroup
+            row
+            value={hasElevator.toString()}
+            onChange={(e) => setHasElevator(e.target.value === "true")}
+          >
+            <FormControlLabel value="true" control={<Radio />} label="있음" />
+            <FormControlLabel value="false" control={<Radio />} label="없음" />
+          </RadioGroup>
 
-        {/* 특이사항 */}
-        <TextField
-          label="특이사항"
-          value={details ?? ""}
-          onChange={handleChangeDetails}
-          sx={{ mt: 2 }}
-          fullWidth
-        />
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <DemoContainer components={["DatePicker"]}>
+              <DesktopDatePicker
+                onChange={setMoveInDate}
+                value={moveInDate}
+                format="YYYY. MM. DD"
+                label="입주 가능일"
+                slotProps={{
+                  textField: {
+                    fullWidth: true, // 추가
+                  },
+                }}
+              />
+            </DemoContainer>
+          </LocalizationProvider>
 
-        <Button
-          text="등록"
-          onClick={handleClickSubmitButton}
-          sx={{
-            mt: 4,
-            color: "white !important",
-            backgroundColor: "#164F9E",
-            "&:disabled": {
-              backgroundColor: "lightgray",
-              color: "white",
-            },
-          }}
-        />
-      </Box>
-    </Modal>
+          {/* 건축년도 */}
+          <TextField
+            label="건축년도"
+            value={constructionYear ?? ""}
+            onChange={handleChangeConstructionYear}
+            sx={{ mt: 2 }}
+            fullWidth
+            placeholder="숫자만 입력하세요 ex)2010"
+            error={!!constructionYearError}
+            helperText={constructionYearError ?? undefined}
+          />
+          <TextField
+            label="주차 가능 대수"
+            value={parkingCapacity}
+            onChange={handleChangeParkingCapacity}
+            sx={{ mt: 2 }}
+            fullWidth
+            placeholder="숫자만 입력하세요"
+            error={!!parkingCapacityError}
+            helperText={parkingCapacityError ?? undefined}
+          />
+
+          {/* 특이사항 */}
+          <TextField
+            label="특이사항"
+            value={details ?? ""}
+            onChange={handleChangeDetails}
+            sx={{ mt: 2 }}
+            fullWidth
+          />
+
+          <Button
+            text="등록"
+            onClick={handleClickSubmitButton}
+            sx={{
+              mt: 4,
+              color: "white !important",
+              backgroundColor: "#164F9E",
+              "&:disabled": {
+                backgroundColor: "lightgray",
+                color: "white",
+              },
+            }}
+          />
+        </Box>
+      </Modal>
+    </>
   );
 }
 export default PropertyAddModal;
diff --git a/src/pages/PrivatePropertyListPage/PropertyAddButtonList/PropertyEditModal/PropertyEditModal.tsx b/src/pages/PrivatePropertyListPage/PropertyAddButtonList/PropertyEditModal/PropertyEditModal.tsx
index f439f6e..d8c8bbf 100644
--- a/src/pages/PrivatePropertyListPage/PropertyAddButtonList/PropertyEditModal/PropertyEditModal.tsx
+++ b/src/pages/PrivatePropertyListPage/PropertyAddButtonList/PropertyEditModal/PropertyEditModal.tsx
@@ -20,6 +20,7 @@ import apiClient from "@apis/apiClient";
 import DaumPost from "./DaumPost";
 import { toast } from "react-toastify";
 import dayjs from "dayjs";
+import { showToast } from "@components/Toast/Toast";
 
 export interface AgentPropertyDetail {
   customer: string;
@@ -131,16 +132,30 @@ function PropertyEditModal({
   const [address, setAddress] = useState("");
   const [detailAddress, setdetailAddress] = useState("");
   const [legalDistrictCode, setLegalDistrictCode] = useState("");
-  const [deposit, handleChangeDeposit, , setDepositManually] = useNumericInput("");
-  const [monthlyRent, handleChangeMonthlyRent, , setMonthlyRentManually] = useNumericInput("");
+  const [deposit, handleChangeDeposit, , setDepositManually] =
+    useNumericInput("");
+  const [monthlyRent, handleChangeMonthlyRent, , setMonthlyRentManually] =
+    useNumericInput("");
   const [price, handleChangePrice, , setPriceManually] = useNumericInput("");
-  
-  const [netArea, handleChangeNetArea, , setNetAreaManually] = useRawNumericInput("");
-  const [totalArea, handleChangeTotalArea, , setTotalAreaManually] = useRawNumericInput("");
+
+  const [netArea, handleChangeNetArea, , setNetAreaManually] =
+    useRawNumericInput("");
+  const [totalArea, handleChangeTotalArea, , setTotalAreaManually] =
+    useRawNumericInput("");
   const [floor, handleChangeFloor, , setFloorManually] = useRawNumericInput("");
-  const [constructionYear, handleChangeConstructionYear, , setConstructionYearManually] = useRawNumericInput("");
-  const [parkingCapacity, handleChangeParkingCapacity, , setParkingCapacityManually] = useRawNumericInput("");
-  
+  const [
+    constructionYear,
+    handleChangeConstructionYear,
+    ,
+    setConstructionYearManually,
+  ] = useRawNumericInput("");
+  const [
+    parkingCapacity,
+    handleChangeParkingCapacity,
+    ,
+    setParkingCapacityManually,
+  ] = useRawNumericInput("");
+
   const [details, setDetails] = useState("");
   const [type, setType] = useState("SALE");
   const [longitude, setLongitude] = useState<number | null>(null);
@@ -152,21 +167,32 @@ function PropertyEditModal({
 
   useEffect(() => {
     if (open && initialData) {
-      if (initialData.customerUid != null) setCustomerUid(initialData.customerUid);
+      if (initialData.customerUid != null)
+        setCustomerUid(initialData.customerUid);
       if (initialData.address) setAddress(initialData.address);
-      if (initialData.detailAddress) setdetailAddress(initialData.detailAddress);
-      if (initialData.legalDistrictCode) setLegalDistrictCode(initialData.legalDistrictCode);
-  
-      if (initialData.deposit != null) setDepositManually(String(initialData.deposit));
-      if (initialData.monthlyRent != null) setMonthlyRentManually(String(initialData.monthlyRent));
-      if (initialData.price != null) setPriceManually(String(initialData.price));
-  
-      if (initialData.netArea != null) setNetAreaManually(String(initialData.netArea));
-      if (initialData.totalArea != null) setTotalAreaManually(String(initialData.totalArea));
-      if (initialData.floor != null) setFloorManually(String(initialData.floor));
-      if (initialData.constructionYear != null) setConstructionYearManually(String(initialData.constructionYear));
-      if (initialData.parkingCapacity != null) setParkingCapacityManually(String(initialData.parkingCapacity));
-  
+      if (initialData.detailAddress)
+        setdetailAddress(initialData.detailAddress);
+      if (initialData.legalDistrictCode)
+        setLegalDistrictCode(initialData.legalDistrictCode);
+
+      if (initialData.deposit != null)
+        setDepositManually(String(initialData.deposit));
+      if (initialData.monthlyRent != null)
+        setMonthlyRentManually(String(initialData.monthlyRent));
+      if (initialData.price != null)
+        setPriceManually(String(initialData.price));
+
+      if (initialData.netArea != null)
+        setNetAreaManually(String(initialData.netArea));
+      if (initialData.totalArea != null)
+        setTotalAreaManually(String(initialData.totalArea));
+      if (initialData.floor != null)
+        setFloorManually(String(initialData.floor));
+      if (initialData.constructionYear != null)
+        setConstructionYearManually(String(initialData.constructionYear));
+      if (initialData.parkingCapacity != null)
+        setParkingCapacityManually(String(initialData.parkingCapacity));
+
       if (initialData.details) setDetails(initialData.details);
       if (initialData.type) setType(initialData.type);
       if (initialData.longitude !== undefined && initialData.longitude !== null)
@@ -218,21 +244,41 @@ function PropertyEditModal({
         if (result) {
           setLongitude(Number(result.x));
           setLatitude(Number(result.y));
-          setLegalDistrictCode(result.b_code);          
+          setLegalDistrictCode(result.b_code);
         }
       });
   }, [address]);
   const handleSubmit = () => {
-    if (!customerUid) return toast.error("고객을 선택해주세요.");
-    if (!address) return toast.error("주소를 입력해주세요.");
-    if (!realCategory) return toast.error("매물 유형을 선택해주세요.");
-    if (!type) return toast.error("거래 유형을 선택해주세요.");
+    if (!customerUid)
+      return showToast({
+        message: "고객을 선택해주세요.",
+        type: "error",
+      });
+    if (!address)
+      return showToast({
+        message: "주소를 입력해주세요.",
+        type: "error",
+      });
+    if (!realCategory)
+      return showToast({
+        message: "매물 유형을 선택해주세요.",
+        type: "error",
+      });
     if (hasElevator === null || hasElevator === undefined)
-      return toast.error("엘리베이터 유무를 선택해주세요.");
+      return showToast({
+        message: "엘리베이터 유무를 선택해주세요.",
+        type: "error",
+      });
     if (!netArea || Number(netArea) <= 0)
-      return toast.error("전용면적을 입력해주세요.");
+      return showToast({
+        message: "공급면적을 입력해주세요.",
+        type: "error",
+      });
     if (!totalArea || Number(totalArea) <= 0)
-      return toast.error("공급면적을 입력해주세요.");
+      return showToast({
+        message: "공급면적을 입력해주세요.",
+        type: "error",
+      });
     const parseNumber = (str: string) => Number(str.replace(/,/g, ""));
 
     const payload = {
@@ -261,12 +307,18 @@ function PropertyEditModal({
     apiClient
       .patch(`/properties/${propertyUid}`, payload)
       .then(() => {
-        toast.success("매물 수정 완료");
+        showToast({
+          message: "매물을 수정했습니다.",
+          type: "success",
+        });
         fetchPropertyData();
         handleClose();
       })
       .catch(() => {
-        toast.error("매물 수정 실패");
+        showToast({
+          message: "매물 수정 중 오류가 발생했습니다. 다시 시도해주세요.",
+          type: "error",
+        });
       });
   };
 
@@ -338,41 +390,41 @@ function PropertyEditModal({
         </RadioGroup>
         {/* 조건부 TextField 렌더링 */}
         {type === "SALE" && (
-  <TextField
-    label="매매 가격"
-    value={price}
-    onChange={handleChangePrice}
-    sx={{ mt: 2 }}
-    fullWidth
-  />
-)}
-{type === "DEPOSIT" && (
-  <TextField
-    label="보증금"
-    value={deposit}
-    onChange={handleChangeDeposit}
-    sx={{ mt: 2 }}
-    fullWidth
-  />
-)}
-{type === "MONTHLY" && (
-  <>
-    <TextField
-      label="보증금"
-      value={deposit}
-      onChange={handleChangeDeposit}
-      sx={{ mt: 2 }}
-      fullWidth
-    />
-    <TextField
-      label="월세"
-      value={monthlyRent}
-      onChange={handleChangeMonthlyRent}
-      sx={{ mt: 2 }}
-      fullWidth
-    />
-  </>
-)}
+          <TextField
+            label="매매 가격"
+            value={price}
+            onChange={handleChangePrice}
+            sx={{ mt: 2 }}
+            fullWidth
+          />
+        )}
+        {type === "DEPOSIT" && (
+          <TextField
+            label="보증금"
+            value={deposit}
+            onChange={handleChangeDeposit}
+            sx={{ mt: 2 }}
+            fullWidth
+          />
+        )}
+        {type === "MONTHLY" && (
+          <>
+            <TextField
+              label="보증금"
+              value={deposit}
+              onChange={handleChangeDeposit}
+              sx={{ mt: 2 }}
+              fullWidth
+            />
+            <TextField
+              label="월세"
+              value={monthlyRent}
+              onChange={handleChangeMonthlyRent}
+              sx={{ mt: 2 }}
+              fullWidth
+            />
+          </>
+        )}
         <Typography variant="subtitle1" sx={{ mt: 2 }}>
           부동산 유형 선택
         </Typography>
@@ -402,28 +454,28 @@ function PropertyEditModal({
           />
         </RadioGroup>
         <TextField
-  label="공급 면적"
-  value={totalArea}
-  onChange={handleChangeTotalArea}
-  sx={{ mt: 2 }}
-  fullWidth
-/>
+          label="공급 면적"
+          value={totalArea}
+          onChange={handleChangeTotalArea}
+          sx={{ mt: 2 }}
+          fullWidth
+        />
 
-<TextField
-  label="전용 면적"
-  value={netArea}
-  onChange={handleChangeNetArea}
-  sx={{ mt: 2 }}
-  fullWidth
-/>
+        <TextField
+          label="전용 면적"
+          value={netArea}
+          onChange={handleChangeNetArea}
+          sx={{ mt: 2 }}
+          fullWidth
+        />
 
-<TextField
-  label="층수"
-  value={floor}
-  onChange={handleChangeFloor}
-  sx={{ mt: 2 }}
-  fullWidth
-/>
+        <TextField
+          label="층수"
+          value={floor}
+          onChange={handleChangeFloor}
+          sx={{ mt: 2 }}
+          fullWidth
+        />
         {/* 반려동물 여부 */}
         <Typography variant="subtitle1" sx={{ mt: 2 }}>
           반려동물 여부
@@ -448,7 +500,7 @@ function PropertyEditModal({
         >
           <FormControlLabel value="true" control={<Radio />} label="있음" />
           <FormControlLabel value="false" control={<Radio />} label="없음" />
-        </RadioGroup>       
+        </RadioGroup>
 
         <LocalizationProvider dateAdapter={AdapterDayjs}>
           <DemoContainer components={["DatePicker"]}>
@@ -468,21 +520,21 @@ function PropertyEditModal({
 
         {/* 건축년도 */}
         <TextField
-  label="건축년도"
-  value={constructionYear}
-  onChange={handleChangeConstructionYear}
-  sx={{ mt: 2 }}
-  fullWidth
-  placeholder="숫자만 입력하세요 ex)2010"
-/>
+          label="건축년도"
+          value={constructionYear}
+          onChange={handleChangeConstructionYear}
+          sx={{ mt: 2 }}
+          fullWidth
+          placeholder="숫자만 입력하세요 ex)2010"
+        />
 
-<TextField
-  label="주차 가능 대수"
-  value={parkingCapacity}
-  onChange={handleChangeParkingCapacity}
-  sx={{ mt: 2 }}
-  fullWidth
-/>
+        <TextField
+          label="주차 가능 대수"
+          value={parkingCapacity}
+          onChange={handleChangeParkingCapacity}
+          sx={{ mt: 2 }}
+          fullWidth
+        />
 
         {/* 특이사항 */}
         <TextField
diff --git a/src/pages/PrivatePropertyListPage/PropertyTable/PropertyTable.tsx b/src/pages/PrivatePropertyListPage/PropertyTable/PropertyTable.tsx
index d770e43..9d4510e 100644
--- a/src/pages/PrivatePropertyListPage/PropertyTable/PropertyTable.tsx
+++ b/src/pages/PrivatePropertyListPage/PropertyTable/PropertyTable.tsx
@@ -12,7 +12,9 @@ import {
   FormControlLabel,
   Switch,
   Chip,
+  SwitchProps,
 } from "@mui/material";
+import { styled } from "@mui/material/styles";
 import { PropertyItem } from "../PrivatePropertyListPage";
 
 interface Props {
@@ -40,12 +42,12 @@ const categoryColors: Record<
 
 // 연한 파스텔톤 색상 매핑
 const colorMap: Record<string, string> = {
-  SALE: "#e8f5e9",    // 연한 초록
+  SALE: "#e8f5e9", // 연한 초록
   DEPOSIT: "#e3f2fd", // 연한 파랑
   MONTHLY: "#fff3e0", // 연한 주황
 };
 const textColorMap: Record<string, string> = {
-  SALE: "#388e3c",    // 진한 초록
+  SALE: "#388e3c", // 진한 초록
   DEPOSIT: "#1976d2", // 진한 파랑
   MONTHLY: "#f57c00", // 진한 주황
 };
@@ -62,6 +64,54 @@ const translateType = (type: string) => {
   }
 };
 
+export const IOSSwitch = styled((props: SwitchProps) => (
+  <Switch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
+))(({ theme }) => ({
+  width: 44,
+  height: 22,
+  padding: 0,
+  "& .MuiSwitch-switchBase": {
+    padding: 0,
+    margin: 2,
+    transitionDuration: "300ms",
+    "&.Mui-checked": {
+      transform: "translateX(22px)",
+      color: "#fff",
+      "& + .MuiSwitch-track": {
+        backgroundColor: "#164F9E",
+        opacity: 1,
+        border: 0,
+      },
+      "&.Mui-disabled + .MuiSwitch-track": {
+        opacity: 0.5,
+      },
+    },
+    "&.Mui-focusVisible .MuiSwitch-thumb": {
+      color: "#164F9E",
+      border: "6px solid #fff",
+    },
+    "&.Mui-disabled .MuiSwitch-thumb": {
+      color: theme.palette.grey[100],
+    },
+    "&.Mui-disabled + .MuiSwitch-track": {
+      opacity: 0.7,
+    },
+  },
+  "& .MuiSwitch-thumb": {
+    boxSizing: "border-box",
+    width: 18,
+    height: 18,
+  },
+  "& .MuiSwitch-track": {
+    borderRadius: 26 / 2,
+    backgroundColor: "#E9E9EA",
+    opacity: 1,
+    transition: theme.transitions.create(["background-color"], {
+      duration: 500,
+    }),
+  },
+}));
+
 const PropertyTable = ({
   propertyList,
   onRowClick,
@@ -90,7 +140,7 @@ const PropertyTable = ({
     <Box sx={{ width: "100%", mt: "28px" }}>
       <FormControlLabel
         control={
-          <Switch
+          <IOSSwitch
             checked={useMetric}
             onChange={handleToggleUnitChange}
             color="primary"
@@ -99,11 +149,13 @@ const PropertyTable = ({
         }
         label={useMetric ? "제곱미터(m²)" : "평(py)"}
         sx={{
-          mb: "5px",
+          mb: "12px",
           ml: "0px",
-          '& .MuiFormControlLabel-label': {
-            fontSize: '14px',
-          }
+          "& .MuiFormControlLabel-label": {
+            fontSize: "14px",
+            marginLeft: "4px",
+            fontWeight: 500,
+          },
         }}
       />
       <Paper
diff --git a/src/pages/PublicPropertyListPage/PublicPropertyListPage.tsx b/src/pages/PublicPropertyListPage/PublicPropertyListPage.tsx
index da311ea..c9704f5 100644
--- a/src/pages/PublicPropertyListPage/PublicPropertyListPage.tsx
+++ b/src/pages/PublicPropertyListPage/PublicPropertyListPage.tsx
@@ -8,7 +8,6 @@ import {
   SelectChangeEvent,
   Typography,
   FormControlLabel,
-  Switch,
   TextField,
   InputAdornment,
 } from "@mui/material";
@@ -18,6 +17,7 @@ import PublicPropertyTable from "./PublicPropertyTable";
 import PageHeader from "@components/PageHeader/PageHeader";
 import useUserStore from "@stores/useUserStore";
 import SearchIcon from "@mui/icons-material/Search";
+import { IOSSwitch } from "@pages/PrivatePropertyListPage/PropertyTable/PropertyTable";
 
 export interface KakaoAddress {
   road_address?: {
@@ -526,56 +526,72 @@ function PublicPropertyListPage() {
           <Box
             sx={{
               display: "flex",
-              justifyContent: "space-between",
-              alignItems: "flex-start",
-            }}
-          >
-            <TextField
-              size="small"
-              placeholder="주소로 검색"
-              value={searchKeyword}
-              onChange={handleSearchChange}
-              InputProps={{
-                startAdornment: (
-                  <InputAdornment position="start">
-                    <SearchIcon />
-                  </InputAdornment>
-                ),
-              }}
-              sx={{ maxWidth: "920px" }}
-            />
-            <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-              <Button
-                variant="outlined"
-                size="small"
-                onClick={handleSortReset}
-                sx={{ height: "32px" }}
-              >
-                정렬 초기화
-              </Button>
-              <Button
-                startIcon={<FilterListIcon />}
-                color={showFilterModal ? "primary" : "inherit"}
-                variant={showFilterModal ? "contained" : "outlined"}
-                onClick={() => setShowFilterModal(true)}
-                sx={{ height: "32px", ml: 1 }}
-              >
-                상세 필터
-              </Button>
-            </Box>
-          </Box>
-          {/* 두 번째 줄: 검색 결과 건수(오른쪽 끝) */}
-          <Box
-            sx={{
-              display: "flex",
-              justifyContent: "flex-end",
-              alignItems: "center",
-              mb: 1,
+              flexDirection: "column",
+              gap: 1,
             }}
           >
             <Typography variant="body2" color="text.secondary">
               공개 매물 검색 결과 : {filteredPropertyList.length}건
             </Typography>
+            <Box
+              sx={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+              }}
+            >
+              <TextField
+                size="small"
+                placeholder="주소로 검색"
+                value={searchKeyword}
+                onChange={handleSearchChange}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <SearchIcon />
+                    </InputAdornment>
+                  ),
+                  sx: {
+                    borderRadius: "20px",
+                  },
+                }}
+                sx={{
+                  maxWidth: "920px",
+                  "& .MuiOutlinedInput-root": {
+                    borderRadius: "20px",
+                  },
+                }}
+              />
+              <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+                <Button
+                  variant="outlined"
+                  size="small"
+                  onClick={handleSortReset}
+                  sx={{ height: "32px", fontSize: "14px" }}
+                >
+                  정렬 초기화
+                </Button>
+                <Button
+                  startIcon={<FilterListIcon />}
+                  color={showFilterModal ? "primary" : "inherit"}
+                  variant={showFilterModal ? "contained" : "outlined"}
+                  onClick={() => setShowFilterModal(true)}
+                  sx={{
+                    height: "32px",
+                    ml: 1,
+                    minWidth: "120px",
+                    border: "1px solid #164F9E",
+                    color: "#164F9E",
+                    "&:hover": {
+                      backgroundColor: "#F5F5F5",
+                      border: "1px solid #164F9E",
+                    },
+                  }}
+                >
+                  상세 필터
+                </Button>
+              </Box>
+            </Box>
           </Box>
         </Paper>
         {/* 단위/주소 스위치: 두 컨테이너 사이로 이동 */}
@@ -591,7 +607,7 @@ function PublicPropertyListPage() {
         >
           <FormControlLabel
             control={
-              <Switch
+              <IOSSwitch
                 checked={useMetric}
                 onChange={() => setUseMetric((prev) => !prev)}
                 color="primary"
@@ -599,11 +615,19 @@ function PublicPropertyListPage() {
               />
             }
             label={useMetric ? "제곱미터(m²)" : "평(py)"}
-            sx={{ "& .MuiFormControlLabel-label": { fontSize: "13px" } }}
+            sx={{
+              mb: "12px",
+              ml: "0px",
+              "& .MuiFormControlLabel-label": {
+                fontSize: "14px",
+                marginLeft: "4px",
+                fontWeight: 500,
+              },
+            }}
           />
           <FormControlLabel
             control={
-              <Switch
+              <IOSSwitch
                 checked={useRoadAddress}
                 onChange={() => setUseRoadAddress((prev) => !prev)}
                 color="primary"
@@ -611,7 +635,15 @@ function PublicPropertyListPage() {
               />
             }
             label={useRoadAddress ? "도로명 주소" : "지번 주소"}
-            sx={{ "& .MuiFormControlLabel-label": { fontSize: "13px" } }}
+            sx={{
+              mb: "12px",
+              ml: "0px",
+              "& .MuiFormControlLabel-label": {
+                fontSize: "14px",
+                marginLeft: "4px",
+                fontWeight: 500,
+              },
+            }}
           />
         </Box>
         {/* 매물 리스트 컨테이너 */}
diff --git a/src/pages/SchedulePage/AddScheduleModal/AddScheduleModal.tsx b/src/pages/SchedulePage/AddScheduleModal/AddScheduleModal.tsx
index 31c8b10..a2d7066 100644
--- a/src/pages/SchedulePage/AddScheduleModal/AddScheduleModal.tsx
+++ b/src/pages/SchedulePage/AddScheduleModal/AddScheduleModal.tsx
@@ -15,6 +15,7 @@ import {
   Checkbox,
   CircularProgress,
   Typography,
+  Autocomplete,
 } from "@mui/material";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
@@ -94,24 +95,28 @@ function AddScheduleModal({ open, onClose, onSubmit }: AddScheduleModalProps) {
 
   useEffect(() => {
     const fetchCustomers = async () => {
-      if (open) {
-        setLoading(true);
-        try {
-          const response = await apiClient.get("/customers");
+      setLoading(true);
+      try {
+        const response = await apiClient.get("/customers", {
+          params: {
+            page: 1,
+            size: 100,
+            sort: "name,asc",
+          },
+        });
 
-          if (response?.data?.data?.customers) {
-            setCustomers(response.data.data.customers);
-          }
-        } catch (error) {
-          console.error("Failed to fetch customers:", error);
-        } finally {
-          setLoading(false);
+        if (response?.data?.data?.customers) {
+          setCustomers(response.data.data.customers);
         }
+      } catch (error) {
+        console.error("Failed to fetch customers:", error);
+      } finally {
+        setLoading(false);
       }
     };
 
     fetchCustomers();
-  }, [open]);
+  }, []);
 
   const handleFormChange = (
     field: keyof ScheduleFormData,
@@ -228,26 +233,36 @@ function AddScheduleModal({ open, onClose, onSubmit }: AddScheduleModalProps) {
       <DialogContent sx={{ p: 3, pt: "10px !important" }}>
         <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
           <Box sx={{ width: "100%" }}>
-            <FormControl fullWidth sx={inputStyle}>
-              <InputLabel>고객</InputLabel>
-              <Select
-                value={formData.customerId}
-                label="고객"
-                onChange={(e) => handleFormChange("customerId", e.target.value)}
-                disabled={loading}
-              >
-                {loading ? (
-                  <MenuItem disabled>
-                    <CircularProgress size={20} />
-                  </MenuItem>
-                ) : (
-                  customers.map((customer) => (
-                    <MenuItem key={customer.uid} value={customer.uid}>
-                      {`${customer.name}(${customer.uid})`}
-                    </MenuItem>
-                  ))
+            <FormControl fullWidth sx={{ mb: 2, ...inputStyle }}>
+              <Autocomplete
+                options={customers}
+                getOptionLabel={(option) => option.name}
+                value={
+                  customers.find((c) => c.uid === formData.customerId) || null
+                }
+                onChange={(_, newValue) => {
+                  handleFormChange("customerId", newValue?.uid || "");
+                }}
+                loading={loading}
+                renderInput={(params) => (
+                  <TextField
+                    {...params}
+                    label="고객"
+                    helperText={!formData.customerId ? errorMessage : ""}
+                    InputProps={{
+                      ...params.InputProps,
+                      endAdornment: (
+                        <>
+                          {loading ? (
+                            <CircularProgress color="inherit" size={20} />
+                          ) : null}
+                          {params.InputProps.endAdornment}
+                        </>
+                      ),
+                    }}
+                  />
                 )}
-              </Select>
+              />
             </FormControl>
           </Box>
           <Box sx={{ width: "100%" }}>
@@ -369,7 +384,7 @@ function AddScheduleModal({ open, onClose, onSubmit }: AddScheduleModalProps) {
             {errorMessage}
           </Typography>
         )}
-        <Button onClick={handleClose} sx={{ color: "#666666" }}>
+        <Button onClick={handleClose} sx={{ color: "#164F9E" }}>
           취소
         </Button>
         <Button
@@ -377,8 +392,10 @@ function AddScheduleModal({ open, onClose, onSubmit }: AddScheduleModalProps) {
           variant="contained"
           sx={{
             backgroundColor: "#164F9E",
+            boxShadow: "none",
             "&:hover": {
               backgroundColor: "#0D3B7A",
+              boxShadow: "none",
             },
           }}
         >
diff --git a/src/pages/SchedulePage/SchedulePage.tsx b/src/pages/SchedulePage/SchedulePage.tsx
index b36cc5e..e206293 100644
--- a/src/pages/SchedulePage/SchedulePage.tsx
+++ b/src/pages/SchedulePage/SchedulePage.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Box, Paper, Button, Snackbar, Alert } from "@mui/material";
+import { Box, Paper, Button } from "@mui/material";
 import dayjs from "dayjs";
 import AddIcon from "@mui/icons-material/Add";
 import FullCalendar from "@fullcalendar/react";
@@ -13,6 +13,7 @@ import ScheduleDetailModal from "@components/ScheduleDetailModal/ScheduleDetailM
 import { Schedule } from "../../interfaces/schedule";
 import useUserStore from "@stores/useUserStore";
 import AddScheduleModal from "./AddScheduleModal";
+import { showToast } from "@components/Toast/Toast";
 
 interface ScheduleFormData {
   startDateTime: string;
@@ -30,14 +31,9 @@ const SchedulePage = () => {
   );
   const [schedules, setSchedules] = useState<Schedule[]>([]);
   const [isUpdating, setIsUpdating] = useState(false);
-  const [toast, setToast] = useState({
-    open: false,
-    message: "",
-    severity: "success" as "success" | "error",
-  });
-  const [customers] = useState<Array<{ uid: number; name: string }>>([]);
+  const [dayMaxEvents, setDayMaxEvents] = useState(4);
+
   const { user } = useUserStore();
-  const [isLoading, setIsLoading] = useState(false);
 
   const fetchSchedules = (startDate: string, endDate: string) => {
     apiClient
@@ -47,6 +43,29 @@ const SchedulePage = () => {
       });
   };
 
+  useEffect(() => {
+    const calculateDayMaxEvents = () => {
+      const width = window.innerWidth;
+      if (width < 768) {
+        // 모바일
+        setDayMaxEvents(2);
+      } else if (width < 1024) {
+        // 태블릿
+        setDayMaxEvents(3);
+      } else {
+        // 데스크톱
+        setDayMaxEvents(4);
+      }
+    };
+
+    calculateDayMaxEvents();
+    window.addEventListener("resize", calculateDayMaxEvents);
+
+    return () => {
+      window.removeEventListener("resize", calculateDayMaxEvents);
+    };
+  }, []);
+
   useEffect(() => {
     // 초기 로드 시 현재 달의 첫날과 마지막날을 기준으로 일정을 가져옴
     const startOfMonth = dayjs().startOf("month").toISOString();
@@ -88,7 +107,6 @@ const SchedulePage = () => {
 
   const handleSubmitSchedule = async (formData: ScheduleFormData) => {
     try {
-      setIsLoading(true);
       const response = await apiClient.post("/schedules", formData);
 
       if (response.data.success) {
@@ -97,15 +115,11 @@ const SchedulePage = () => {
         const endOfMonth = dayjs().endOf("month").toISOString();
         fetchSchedules(startOfMonth, endOfMonth);
 
-        setToast({
-          open: true,
-          message: "일정을 생성했습니다.",
-          severity: "success",
-        });
+        showToast({ message: "일정을 등록했습니다.", type: "success" });
         setIsAddModalOpen(false);
       }
-    } finally {
-      setIsLoading(false);
+    } catch {
+      showToast({ message: "일정 등록에 실패했습니다.", type: "error" });
     }
   };
 
@@ -144,8 +158,6 @@ const SchedulePage = () => {
     };
   });
 
-  console.log("Calendar events:", events);
-
   const handleUpdateSchedule = async (updatedSchedule: Schedule) => {
     try {
       setIsUpdating(true);
@@ -165,35 +177,29 @@ const SchedulePage = () => {
           )
         );
         handleCloseDetailModal();
-        setToast({
-          open: true,
+        showToast({
           message: "일정을 수정했습니다.",
-          severity: "success",
+          type: "success",
         });
       }
     } catch (error) {
       console.error("Failed to update schedule:", error);
-      setToast({
-        open: true,
+      showToast({
         message: "일정 수정에 실패했습니다.",
-        severity: "error",
+        type: "error",
       });
     } finally {
       setIsUpdating(false);
     }
   };
 
-  const handleCloseToast = () => {
-    setToast({ ...toast, open: false });
-  };
-
   return (
     <Box
       sx={{
         p: 0,
         pb: 3,
         minHeight: "100vh",
-        backgroundColor: "#F8F9FA",
+        backgroundColor: "#f5f5f5",
       }}
     >
       <PageHeader title="일정" userName={user?.name || "-"} />
@@ -205,8 +211,10 @@ const SchedulePage = () => {
           onClick={handleAddSchedule}
           sx={{
             backgroundColor: "#164F9E",
+            boxShadow: "none",
             "&:hover": {
               backgroundColor: "#0D3B7A",
+              boxShadow: "none",
             },
           }}
         >
@@ -220,7 +228,7 @@ const SchedulePage = () => {
           p: 3,
           mx: 3,
           mt: 3,
-          border: "1px solid #E0E0E0",
+
           borderRadius: "12px",
           backgroundColor: "#FFFFFF",
           "& .fc": {
@@ -446,7 +454,7 @@ const SchedulePage = () => {
           }}
           height="auto"
           locale={koLocale}
-          dayMaxEvents={4}
+          dayMaxEvents={dayMaxEvents}
           moreLinkContent={({ num }) => `+${num}개 더보기`}
           eventTimeFormat={{
             hour: "2-digit",
@@ -480,40 +488,8 @@ const SchedulePage = () => {
         onClose={handleCloseDetailModal}
         schedule={selectedSchedule}
         onSave={handleUpdateSchedule}
-        customers={customers}
         isUpdating={isUpdating}
       />
-
-      <Snackbar
-        open={toast.open}
-        autoHideDuration={2000}
-        onClose={handleCloseToast}
-        anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
-        sx={{
-          bottom: "24px !important",
-        }}
-      >
-        <Alert
-          onClose={handleCloseToast}
-          severity={toast.severity}
-          sx={{
-            width: "100%",
-            minWidth: "240px",
-            borderRadius: "8px",
-            backgroundColor:
-              toast.severity === "success" ? "#F6F8FF" : "#FFF5F5",
-            color: toast.severity === "success" ? "#164F9E" : "#D32F2F",
-            border: `1px solid ${
-              toast.severity === "success" ? "#164F9E" : "#D32F2F"
-            }`,
-            "& .MuiAlert-icon": {
-              color: toast.severity === "success" ? "#164F9E" : "#D32F2F",
-            },
-          }}
-        >
-          {toast.message}
-        </Alert>
-      </Snackbar>
     </Box>
   );
 };
diff --git a/src/pages/SignInPage/SignInPage.tsx b/src/pages/SignInPage/SignInPage.tsx
index 7306543..4c85d3d 100644
--- a/src/pages/SignInPage/SignInPage.tsx
+++ b/src/pages/SignInPage/SignInPage.tsx
@@ -7,8 +7,8 @@ import PasswordInput from "./PasswordInput";
 import Button from "@components/Button";
 import { Box, Typography } from "@mui/material";
 import { toast } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
 import signInImage from "@assets/sign-up.png";
+import { showToast } from "@components/Toast/Toast";
 
 const SignInPage = () => {
   const navigate = useNavigate();
@@ -23,7 +23,7 @@ const SignInPage = () => {
       deviceId = crypto.randomUUID(); // 브라우저에서 UUID 생성
       localStorage.setItem("deviceId", deviceId);
     }
-  
+
     apiClient
       .post(
         "/users/login",
@@ -42,14 +42,20 @@ const SignInPage = () => {
         const accessToken = res?.data?.data?.accessToken;
         if (res.status === 200 && accessToken) {
           sessionStorage.setItem("_ZA", accessToken);
-          toast.success("로그인에 성공했습니다.");
+          showToast({
+            message: "로그인에 성공했습니다.",
+            type: "success",
+          });
           navigate("/");
         }
       })
       .catch((error) => {
         const serverMessage =
           error.response?.data?.message || "로그인 중 오류가 발생했습니다.";
-        toast.error(serverMessage);
+        showToast({
+          message: serverMessage,
+          type: "error",
+        });
         console.log(error);
       });
   };
diff --git a/src/pages/SignUpPage/SignUpPage.tsx b/src/pages/SignUpPage/SignUpPage.tsx
index 91e5bbd..d79f3e1 100644
--- a/src/pages/SignUpPage/SignUpPage.tsx
+++ b/src/pages/SignUpPage/SignUpPage.tsx
@@ -16,10 +16,9 @@ import {
   MenuItem,
   TextField,
 } from "@mui/material";
-import { toast } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
 import signUpImage from "@assets/sign-up.png";
 import { useState } from "react";
+import { showToast } from "@components/Toast/Toast";
 
 const isValidName = (name: string) => {
   return name.length >= 2 && name.length <= 20;
@@ -64,7 +63,10 @@ const SignUpPage = () => {
   const handleBlur = (field: string, value: string) => {
     if (field === "passwordCheck") {
       if (password !== value) {
-        toast.error("비밀번호가 일치하지 않습니다.");
+        showToast({
+          message: "비밀번호가 일치하지 않습니다.",
+          type: "error",
+        });
       }
     }
   };
@@ -92,31 +94,52 @@ const SignUpPage = () => {
 
   const handleClickSignUpButton = () => {
     if (!isValidName(name)) {
-      toast.error("이름을 올바르게 입력해주세요.");
+      showToast({
+        message: "이름을 올바르게 입력해주세요.",
+        type: "error",
+      });
       return;
     }
     if (!isValidUserId(userId)) {
-      toast.error("아이디를 올바르게 입력해주세요.");
+      showToast({
+        message: "아이디를 올바르게 입력해주세요.",
+        type: "error",
+      });
       return;
     }
     if (!isValidEmail(email)) {
-      toast.error("이메일을 올바르게 입력해주세요.");
+      showToast({
+        message: "이메일을 올바르게 입력해주세요.",
+        type: "error",
+      });
       return;
     }
     if (!isValidPassword(password)) {
-      toast.error("비밀번호를 올바르게 입력해주세요.");
+      showToast({
+        message: "비밀번호를 올바르게 입력해주세요.",
+        type: "error",
+      });
       return;
     }
     if (password !== passwordCheck) {
-      toast.error("비밀번호가 일치하지 않습니다.");
+      showToast({
+        message: "비밀번호가 일치하지 않습니다.",
+        type: "error",
+      });
       return;
     }
     if (!isValidPhoneNumber(phoneNumber)) {
-      toast.error("전화번호를 올바르게 입력해주세요.");
+      showToast({
+        message: "전화번호를 올바르게 입력해주세요.",
+        type: "error",
+      });
       return;
     }
     if (!questionAnswer) {
-      toast.error("비밀번호 찾기 답변을 입력해주세요.");
+      showToast({
+        message: "비밀번호 찾기 답변을 입력해주세요.",
+        type: "error",
+      });
       return;
     }
 
@@ -133,13 +156,19 @@ const SignUpPage = () => {
       })
       .then((res) => {
         if (res.status === 201) {
-          toast.success("회원가입에 성공했습니다.");
+          showToast({
+            message: "회원가입에 성공했습니다.",
+            type: "success",
+          });
           navigate("/sign-in");
         }
       })
       .catch((error) => {
         const msg = error.response?.data?.message;
-        toast.error(msg || "회원가입 중 오류가 발생했습니다.");
+        showToast({
+          message: msg || "회원가입 중 오류가 발생했습니다.",
+          type: "error",
+        });
       });
   };
 
diff --git a/src/pages/SubmitSurveyPage/SubmitSurveyPage.tsx b/src/pages/SubmitSurveyPage/SubmitSurveyPage.tsx
index 7a6afd8..38a5628 100644
--- a/src/pages/SubmitSurveyPage/SubmitSurveyPage.tsx
+++ b/src/pages/SubmitSurveyPage/SubmitSurveyPage.tsx
@@ -12,9 +12,8 @@ import {
 } from "@mui/material";
 import { useNavigate, useParams } from "react-router-dom";
 import apiClient from "@apis/apiClient";
-import { toast, ToastContainer } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
 import { formatPhoneNumber } from "@utils/numberUtil";
+import { showToast } from "@components/Toast/Toast";
 
 interface Question {
   choices: { id: number; text: string }[];
@@ -110,7 +109,11 @@ const SubmitSurveyPage = () => {
       const maxSize = 10 * 1024 * 1024; // 10MB
 
       if (file.size > maxSize) {
-        toast.error("파일 크기는 10MB를 초과할 수 없습니다.");
+        showToast({
+          message: "파일 크기는 10MB를 초과할 수 없습니다.",
+          type: "error",
+        });
+
         // 파일 선택 초기화
         event.target.value = "";
         handleAnswerChange(questionIndex, null);
@@ -225,18 +228,6 @@ const SubmitSurveyPage = () => {
 
   return (
     <Box sx={{ p: 4 }}>
-      <ToastContainer
-        position="top-center"
-        autoClose={3000}
-        hideProgressBar={false}
-        newestOnTop
-        closeOnClick
-        rtl={false}
-        pauseOnFocusLoss
-        draggable
-        pauseOnHover
-        theme="light"
-      />
       <Typography variant="h4" sx={{ mb: 4 }}>
         설문 답변 제출
       </Typography>