diff --git a/.gitignore b/.gitignore
index d32cc78..5d4a153 100644
--- a/.gitignore
+++ b/.gitignore
@@ -38,3 +38,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+*.idea
\ No newline at end of file
diff --git a/package.json b/package.json
index f38b46f..2ba0f33 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,10 @@
     "*.{ts,tsx,js,jsx}": "eslint"
   },
   "dependencies": {
+    "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-slot": "^1.1.2",
     "@tanstack/react-query": "^5.52.2",
     "@tanstack/react-query-devtools": "^5.52.2",
     "@testing-library/react": "^16.0.1",
diff --git a/src/app/desktop/payer-inquiry/_components/TableComponent/index.tsx b/src/app/desktop/payer-inquiry/_components/TableComponent/index.tsx
index 6823571..69265a5 100644
--- a/src/app/desktop/payer-inquiry/_components/TableComponent/index.tsx
+++ b/src/app/desktop/payer-inquiry/_components/TableComponent/index.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Table,
   TableBody,
@@ -6,42 +7,125 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
 
 interface Invoice {
   name: string;
   student_id: string;
-  admin: boolean;
+  admin?: boolean;
 }
 
 interface TableComponentProps {
   data: Invoice[];
+  showCheckboxes?: boolean; // 고민이에요... ESLint: propType "handleDelete" is not required, but has no corresponding defaultProps declaration 에러가 뜸
+  headers?: string[];
+  selected: string[];
+  setSelected: (selectedIds: (prev: string[]) => string[]) => void;
+  handleDelete?: (selectedIds: string[]) => void; // 22
 }
 
-export default function TableComponent({ data }: TableComponentProps) {
+export default function TableComponent({
+  data,
+  showCheckboxes = true,
+  headers = ['이름', '학번', '관리자 여부'], // 기본값을 설정
+  selected,
+  setSelected,
+  handleDelete = () => {}, // 기본값으로 빈 함수 설정
+}: TableComponentProps) {
+  const [currentPage, setCurrentPage] = useState(1);
+  const rowsPerPage = 10;
+
+  const handleSelect = (student_id: string) => {
+    setSelected((prev: string[]) =>
+      prev.includes(student_id)
+        ? prev.filter((id) => id !== student_id)
+        : [...prev, student_id],
+    );
+  };
+
+  const paginatedData = data.slice(
+    (currentPage - 1) * rowsPerPage,
+    currentPage * rowsPerPage,
+  );
+
+  const handleSelectAll = () => {
+    const visibleIds = paginatedData.map((item) => item.student_id);
+    setSelected((prev: string[]) =>
+      prev.length === visibleIds.length ? [] : visibleIds,
+    );
+  };
+
   return (
-    <div className="flex justify-between p-10">
+    <div className="flex w-full flex-col p-10">
       <Table>
         <TableHeader>
           <TableRow>
-            <TableHead className="w-30 text-center">이름</TableHead>
-            <TableHead className="w-30 text-center">학번</TableHead>
-            <TableHead className="w-30 text-center">관리자 여부</TableHead>
+            {showCheckboxes && (
+              <TableHead className="w-10 text-center">
+                <Checkbox
+                  checked={selected.length === paginatedData.length}
+                  onCheckedChange={handleSelectAll}
+                />
+              </TableHead>
+            )}
+            {headers.map((header) => (
+              <TableHead key={header} className="w-30 text-center">
+                {header}
+              </TableHead>
+            ))}
           </TableRow>
         </TableHeader>
         <TableBody>
-          {data.map((item, index) => (
-            <TableRow key={index}>
+          {paginatedData.map((item) => (
+            <TableRow key={item.student_id}>
+              {showCheckboxes && (
+                <TableCell className="w-10 text-center">
+                  <Checkbox
+                    checked={selected.includes(item.student_id)}
+                    onCheckedChange={() => handleSelect(item.student_id)}
+                  />
+                </TableCell>
+              )}
               <TableCell className="w-30 text-center">{item.name}</TableCell>
               <TableCell className="w-30 text-center">
                 {item.student_id}
               </TableCell>
-              <TableCell className="w-30 text-center">
-                {item.admin ? '⭕' : '❌'}
-              </TableCell>
+              {headers.includes('관리자 여부') && (
+                <TableCell className="w-30 text-center">
+                  {item.admin !== undefined && (item.admin ? 'o' : 'x')}
+                </TableCell>
+              )}
             </TableRow>
           ))}
         </TableBody>
       </Table>
+      <div className="flex items-center justify-center pt-4">
+        <Button
+          className="bg-transparent shadow-transparent hover:bg-transparent"
+          disabled={currentPage === 1}
+          onClick={() => setCurrentPage((prev) => prev - 1)}
+        >
+          <ChevronLeftIcon className="h-10 w-10 cursor-pointer text-black-primary" />
+        </Button>
+        <span>
+          {currentPage} / {Math.ceil(data.length / rowsPerPage)}
+        </span>
+        <Button
+          className="bg-transparent shadow-transparent hover:bg-transparent"
+          size="chevron"
+          disabled={currentPage === Math.ceil(data.length / rowsPerPage)}
+          onClick={() => setCurrentPage((prev) => prev + 1)}
+        >
+          <ChevronRightIcon className="h-6 w-6 cursor-pointer text-black-primary" />
+        </Button>
+      </div>
     </div>
   );
 }
+
+// defaultProps를 사용하여 headers에 기본값 설정
+TableComponent.defaultProps = {
+  headers: ['이름', '학번', '관리자 여부'],
+};
diff --git a/src/app/desktop/payer-inquiry/page.tsx b/src/app/desktop/payer-inquiry/page.tsx
index d52ba72..3370367 100644
--- a/src/app/desktop/payer-inquiry/page.tsx
+++ b/src/app/desktop/payer-inquiry/page.tsx
@@ -1,30 +1,193 @@
-import Sidebar from '@/components/desktop/SideBar';
+'use client';
+
+import Sidebar from 'src/components/desktop/Sidebar';
 import Search from '@/components/desktop/Search';
+import { useState } from 'react';
+import AddStudentId from '@/components/desktop/AddStudentId';
+import { Button } from '@/components/ui/button';
 import TableComponent from './_components/TableComponent';
+import AddInput from '../../../components/desktop/AddInput';
 
 const dummyData = [
   { name: '조다운', student_id: '20223139', admin: true },
-  { name: '조다운', student_id: '20223139', admin: true },
-  { name: '조다운', student_id: '20223139', admin: false },
+  { name: '이정욱', student_id: '20223888', admin: true },
+  { name: '윤신지', student_id: '20223122', admin: false },
+  { name: '황수민', student_id: '20223130', admin: true },
+];
+
+const dummyData2 = [
+  { name: '조다운', student_id: '20223139' },
+  { name: '황현진', student_id: '20223158' },
 ];
 
 export default function PayerInquiryPage() {
+  const [data, setData] = useState(dummyData); // 기존 데이터
+  const [addedData, setAddedData] = useState(dummyData2); // 추가된 데이터
+  const [isDeleteModeOriginal, setIsDeleteModeOriginal] = useState(false); // 기존 데이터 삭제 모드
+  const [isDeleteModeAdded, setIsDeleteModeAdded] = useState(false); // 추가된 데이터 삭제 모드
+  const [selectedOriginal, setSelectedOriginal] = useState<string[]>([]); // 기존 데이터에서 선택된 항목
+  const [selectedAdded, setSelectedAdded] = useState<string[]>([]); // 추가된 데이터에서 선택된 항목
+
+  const [newStudentId, setNewStudentId] = useState('');
+  const [newStudentName, setNewStudentName] = useState('');
+
+  // 학번 입력 핸들러
+  const handleStudentIdChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setNewStudentId(e.target.value);
+  };
+
+  // 이름 입력 핸들러
+  const handleStudentNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setNewStudentName(e.target.value);
+  };
+
+  // 추가 버튼 클릭 시 실행될 함수
+  const handleAddStudent = () => {
+    if (!newStudentId || !newStudentName) {
+      alert('이름과 학번을 입력해주세요.');
+      return;
+    }
+
+    // 학번이 8자리 숫자인지 검증
+    const studentIdPattern = /^\d{8}$/;
+    if (!studentIdPattern.test(newStudentId)) {
+      alert('학번은 8자리 숫자로 입력해야 합니다.');
+      return;
+    }
+
+    const newEntry = { name: newStudentName, student_id: newStudentId };
+    setAddedData([...addedData, newEntry]); // 추가된 데이터 업데이트
+    setNewStudentId('');
+    setNewStudentName('');
+  };
+
+  // 기존 데이터 삭제
+  const handleDeleteOriginal = () => {
+    const updatedData = data.filter(
+      (item) => !selectedOriginal.includes(item.student_id),
+    );
+    setData(updatedData);
+    setIsDeleteModeOriginal(false);
+    setSelectedOriginal([]);
+  };
+
+  // 추가된 데이터 삭제
+  const handleDeleteAdded = () => {
+    const updatedData = addedData.filter(
+      (item) => !selectedAdded.includes(item.student_id),
+    );
+    setAddedData(updatedData);
+    setIsDeleteModeAdded(false);
+    setSelectedAdded([]);
+  };
+
+  // 기존 데이터 삭제 모드 토글
+  const toggleDeleteModeOriginal = () => {
+    setIsDeleteModeOriginal((prev) => !prev);
+    setSelectedOriginal([]);
+  };
+
+  // 추가된 데이터 삭제 모드 토글
+  const toggleDeleteModeAdded = () => {
+    setIsDeleteModeAdded((prev) => !prev);
+    setSelectedAdded([]);
+  };
+
+  const api = () => {
+    console.log('api 적용할 곳입니다.');
+  };
+
   return (
-    <div className="flex flex-col justify-center gap-8 px-64">
+    <div className="flex flex-col justify-center gap-8 px-4 md:px-16 lg:px-64">
       <div className="pt-20 text-center">
         <p className="text-2xl">학생회비 납부자 조회하기</p>
       </div>
-      <div className="flex justify-center gap-4">
+      <div className="flex flex-wrap justify-center gap-2">
         <Search />
         <Sidebar
           triggerText="새로운 납부자 추가하기"
-          title="Settings"
-          description="Manage your preferences"
+          title="학생회비 납부자 추가하기"
+          description="설명"
         >
-          <p>Here you can change your account settings.</p>
+          <div className="flex w-full flex-col items-center justify-center">
+            <div className="flex items-end justify-center gap-4">
+              <AddStudentId
+                value={newStudentId}
+                onChange={handleStudentIdChange}
+              />
+              <AddInput
+                value={newStudentName}
+                onChange={handleStudentNameChange}
+                onClick={handleAddStudent}
+              />
+            </div>
+            <div className="flex w-full flex-col">
+              <TableComponent
+                data={addedData}
+                headers={['추가된 이름', '추가된 학번']}
+                showCheckboxes={isDeleteModeAdded}
+                selected={selectedAdded}
+                setSelected={setSelectedAdded}
+              />
+              <div className="flex justify-end gap-2">
+                <Button
+                  size="sm"
+                  type="button"
+                  variant="deleteSecondary"
+                  onClick={toggleDeleteModeAdded}
+                >
+                  {isDeleteModeAdded ? '취소' : '삭제'}
+                </Button>
+                {isDeleteModeAdded && (
+                  <Button
+                    size="sm"
+                    variant="deletePrimary"
+                    type="button"
+                    onClick={handleDeleteAdded}
+                  >
+                    완료
+                  </Button>
+                )}
+              </div>
+            </div>
+          </div>
+          <div className="bottom-0 flex justify-center gap-2 pt-10">
+            <Button type="button" variant="primary" onClick={api}>
+              적용하기
+            </Button>
+          </div>
         </Sidebar>
       </div>
-      <TableComponent data={dummyData} />
+      <div className="flex flex-col justify-between">
+        <TableComponent
+          data={data}
+          showCheckboxes={isDeleteModeOriginal}
+          selected={selectedOriginal}
+          setSelected={setSelectedOriginal}
+        />
+        <div className="flex justify-end gap-2">
+          <Button
+            size="sm"
+            type="button"
+            variant="deleteSecondary"
+            onClick={toggleDeleteModeOriginal}
+          >
+            {isDeleteModeOriginal ? '취소' : '삭제'}
+          </Button>
+
+          {isDeleteModeOriginal && (
+            <Button
+              type="button"
+              size="sm"
+              variant="deleteSecondary"
+              className={`btn whitespace-nowrap rounded-md px-3 py-2 text-sm text-white-primary ${isDeleteModeOriginal ? 'bg-gray-primary' : 'bg-gray-secondary'}`}
+              onClick={handleDeleteOriginal}
+            >
+              완료
+            </Button>
+          )}
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/components/desktop/AddInput/index.tsx b/src/components/desktop/AddInput/index.tsx
new file mode 100644
index 0000000..34a7fbe
--- /dev/null
+++ b/src/components/desktop/AddInput/index.tsx
@@ -0,0 +1,24 @@
+import { Input } from '@/components/ui/input';
+import { Plus } from 'lucide-react';
+
+interface AddInputProps {
+  value: string;
+  onClick: () => void;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export default function AddInput({ onClick, value, onChange }: AddInputProps) {
+  return (
+    <Input
+      Icon={
+        <Plus
+          className="h-5 w-5 cursor-pointer text-muted-foreground"
+          onClick={onClick}
+        />
+      }
+      value={value}
+      onChange={onChange}
+      placeholder="이름을 입력해주세요."
+    />
+  );
+}
diff --git a/src/components/desktop/AddStudentId/index.tsx b/src/components/desktop/AddStudentId/index.tsx
new file mode 100644
index 0000000..cd84cf5
--- /dev/null
+++ b/src/components/desktop/AddStudentId/index.tsx
@@ -0,0 +1,23 @@
+import { Input } from '../../ui/input';
+import { Label } from '../../ui/label';
+
+interface AddStudentIdProps {
+  value: string;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export default function AddStudentId({ value, onChange }: AddStudentIdProps) {
+  return (
+    <div className="grid w-60 max-w-sm items-center gap-1.5">
+      {/* <Label htmlFor="studentId">학번</Label> */}
+      <Input
+        type="text"
+        id="studentId"
+        placeholder="학번"
+        value={value}
+        onChange={onChange}
+        Icon=" "
+      />
+    </div>
+  );
+}
diff --git a/src/components/desktop/Search/index.tsx b/src/components/desktop/Search/index.tsx
index 128b6e1..f466474 100644
--- a/src/components/desktop/Search/index.tsx
+++ b/src/components/desktop/Search/index.tsx
@@ -2,10 +2,16 @@
 
 import { SearchInput } from '../../ui/search-input';
 
-export default function Search() {
+interface SearchProps {
+  placeholder?: string;
+}
+
+export default function Search({
+  placeholder = '검색어를 입력하세요.',
+}: SearchProps) {
   return (
     <SearchInput
-      placeholder="검색어 입력..."
+      placeholder={placeholder}
       onSearch={(query) => console.log(query)}
     />
   );
diff --git a/src/components/desktop/SideBar/index.tsx b/src/components/desktop/Sidebar/index.tsx
similarity index 65%
rename from src/components/desktop/SideBar/index.tsx
rename to src/components/desktop/Sidebar/index.tsx
index 35e3179..7f06a76 100644
--- a/src/components/desktop/SideBar/index.tsx
+++ b/src/components/desktop/Sidebar/index.tsx
@@ -18,18 +18,20 @@ interface SidebarProps {
 export default function Sidebar({
   children,
   title = 'Sidebar Title',
-  description = '',
+  // description = '',
   triggerText = 'Open',
 }: SidebarProps) {
   return (
     <Sheet>
-      <SheetTrigger className="rounded-md bg-gray-primary px-3 py-2 text-white-primary">
+      <SheetTrigger className="whitespace-nowrap rounded-md bg-gray-primary px-3 py-1 text-sm text-white-primary">
         {triggerText}
       </SheetTrigger>
       <SheetContent className="max-w-[40rem]! w-full">
         <SheetHeader>
-          <SheetTitle>{title}</SheetTitle>
-          {description && <SheetDescription>{description}</SheetDescription>}
+          <SheetTitle className="flex justify-center text-2xl font-medium">
+            {title}
+          </SheetTitle>
+          {/* {description && <SheetDescription>{description}</SheetDescription>} */}
         </SheetHeader>
         <div className="mt-4">{children}</div>
       </SheetContent>
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..a49fc42
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        // 우리 버튼 추가
+        primary:
+          'whitespace-nowrap rounded-md bg-gray-primary px-3 py-1 text-sm text-white-primary',
+        secondary:
+          'whitespace-nowrap rounded-md bg-gray-secondary px-3 py-1 text-sm text-white-primary',
+        deletePrimary:
+          'whitespace-nowrap rounded-md bg-gray-primary px-1 py-1 text-sm text-white-primary',
+        deleteSecondary:
+          'whitespace-nowrap rounded-md bg-gray-secondary px-1 py-1 text-sm text-white-primary',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+        chevron: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..c6fdd07
--- /dev/null
+++ b/src/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 993530e..4eacb59 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -1,9 +1,21 @@
 import * as React from 'react';
 import { cn } from '@/lib/utils';
-import { Search } from 'lucide-react';
+import { Plus } from 'lucide-react'; // 기본 아이콘은 Plus로 설정
 
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
-  ({ className, type = 'text', ...props }, ref) => {
+interface InputProps extends React.ComponentProps<'input'> {
+  Icon?: React.ReactNode; // 아이콘을 전달할 수 있는 props
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      className,
+      type = 'text',
+      Icon = <Plus className="h-5 w-5 text-muted-foreground" />,
+      ...props
+    },
+    ref,
+  ) => {
     return (
       <div className="relative w-full max-w-80">
         <input
@@ -15,7 +27,9 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
           ref={ref}
           {...props}
         />
-        <Search className="absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground" />
+        <div className="absolute right-3 top-1/2 -translate-y-1/2">
+          {Icon} {/* 전달된 아이콘을 렌더링 */}
+        </div>
       </div>
     );
   },
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 0000000..7114fb0
--- /dev/null
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const labelVariants = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index c0df655..d0c6422 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const Table = React.forwardRef<
   HTMLTableElement,
@@ -9,20 +9,20 @@ const Table = React.forwardRef<
   <div className="relative w-full overflow-auto">
     <table
       ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
+      className={cn('w-full caption-bottom text-sm', className)}
       {...props}
     />
   </div>
-))
-Table.displayName = "Table"
+));
+Table.displayName = 'Table';
 
 const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-))
-TableHeader.displayName = "TableHeader"
+  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+));
+TableHeader.displayName = 'TableHeader';
 
 const TableBody = React.forwardRef<
   HTMLTableSectionElement,
@@ -30,11 +30,11 @@ const TableBody = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tbody
     ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
+    className={cn('[&_tr:last-child]:border-0', className)}
     {...props}
   />
-))
-TableBody.displayName = "TableBody"
+));
+TableBody.displayName = 'TableBody';
 
 const TableFooter = React.forwardRef<
   HTMLTableSectionElement,
@@ -43,13 +43,13 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className
+      'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
+      className,
     )}
     {...props}
   />
-))
-TableFooter.displayName = "TableFooter"
+));
+TableFooter.displayName = 'TableFooter';
 
 const TableRow = React.forwardRef<
   HTMLTableRowElement,
@@ -58,13 +58,13 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
+      'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+      className,
     )}
     {...props}
   />
-))
-TableRow.displayName = "TableRow"
+));
+TableRow.displayName = 'TableRow';
 
 const TableHead = React.forwardRef<
   HTMLTableCellElement,
@@ -73,13 +73,13 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className
+      'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+      className,
     )}
     {...props}
   />
-))
-TableHead.displayName = "TableHead"
+));
+TableHead.displayName = 'TableHead';
 
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
@@ -88,13 +88,13 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className
+      'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+      className,
     )}
     {...props}
   />
-))
-TableCell.displayName = "TableCell"
+));
+TableCell.displayName = 'TableCell';
 
 const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
@@ -102,11 +102,11 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    className={cn('mt-4 text-sm text-muted-foreground', className)}
     {...props}
   />
-))
-TableCaption.displayName = "TableCaption"
+));
+TableCaption.displayName = 'TableCaption';
 
 export {
   Table,
@@ -117,4 +117,4 @@ export {
   TableRow,
   TableCell,
   TableCaption,
-}
+};
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 7fd69b7..aa075d7 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -13,7 +13,7 @@ export default {
         pretendard: ['Pretendard', 'sans-serif'],
       },
       maxWidth: {
-        sm: '40rem', // sm:max-w-sm 클래스를 40rem으로 설정
+        sm: '30rem', // sm:max-w-sm 클래스를 30rem으로 설정
       },
       colors: {
         foreground: 'hsl(var(--foreground))',