diff --git a/package-lock.json b/package-lock.json
index 84d26fb..7a04f4c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
 			"name": "client",
 			"version": "0.1.0",
 			"dependencies": {
+				"@radix-ui/react-accordion": "^1.1.2",
 				"@radix-ui/react-select": "^2.0.0",
 				"@tanstack/react-query": "^5.29.2",
 				"@typescript-eslint/eslint-plugin": "6.0",
@@ -2784,6 +2785,37 @@
 				"@babel/runtime": "^7.13.10"
 			}
 		},
+		"node_modules/@radix-ui/react-accordion": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.1.2.tgz",
+			"integrity": "sha512-fDG7jcoNKVjSK6yfmuAs0EnPDro0WMXIhMtXdTBWqEioVW206ku+4Lw07e+13lUkFkpoEQ2PdeMIAGpdqEAmDg==",
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/primitive": "1.0.1",
+				"@radix-ui/react-collapsible": "1.0.3",
+				"@radix-ui/react-collection": "1.0.3",
+				"@radix-ui/react-compose-refs": "1.0.1",
+				"@radix-ui/react-context": "1.0.1",
+				"@radix-ui/react-direction": "1.0.1",
+				"@radix-ui/react-id": "1.0.1",
+				"@radix-ui/react-primitive": "1.0.3",
+				"@radix-ui/react-use-controllable-state": "1.0.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0",
+				"react-dom": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-arrow": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz",
@@ -2807,6 +2839,36 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-collapsible": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz",
+			"integrity": "sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==",
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/primitive": "1.0.1",
+				"@radix-ui/react-compose-refs": "1.0.1",
+				"@radix-ui/react-context": "1.0.1",
+				"@radix-ui/react-id": "1.0.1",
+				"@radix-ui/react-presence": "1.0.1",
+				"@radix-ui/react-primitive": "1.0.3",
+				"@radix-ui/react-use-controllable-state": "1.0.1",
+				"@radix-ui/react-use-layout-effect": "1.0.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0",
+				"react-dom": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-collection": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
@@ -3026,6 +3088,30 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-presence": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz",
+			"integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==",
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/react-compose-refs": "1.0.1",
+				"@radix-ui/react-use-layout-effect": "1.0.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0",
+				"react-dom": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-primitive": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
diff --git a/package.json b/package.json
index c32157a..57a088d 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
 		"lint": "next lint"
 	},
 	"dependencies": {
+		"@radix-ui/react-accordion": "^1.1.2",
 		"@radix-ui/react-select": "^2.0.0",
 		"@tanstack/react-query": "^5.29.2",
 		"@typescript-eslint/eslint-plugin": "6.0",
diff --git a/src/components/ui/AccordionBase.tsx b/src/components/ui/AccordionBase.tsx
new file mode 100644
index 0000000..a4b1dd4
--- /dev/null
+++ b/src/components/ui/AccordionBase.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from './shadcn-ui/accordion';
+import { methodTypes } from '@/utils/methodTypes';
+
+const AccordionBase = ({ tag }: { tag: string }) => {
+	const DM = methodTypes.filter((item) => item.tag === tag)[0].methods;
+	return (
+		<Accordion className="flex flex-col gap-4" type="single" collapsible>
+			{DM.map((method, index) => (
+				<AccordionItem
+					key={method.title}
+					className="rounded-[8px] bg-Green-50  px-S-12"
+					value={`item-${index}`}
+				>
+					<AccordionTrigger className="text-Green-500 Title-Small">
+						{method.title}
+					</AccordionTrigger>
+					<AccordionContent className="text-Gray-600">
+						{method.descriptions.map((content, index) => (
+							<p
+								key={`description-${index}`}
+								className="text-Gray-600 Label-Large-Custom"
+							>
+								{content}
+							</p>
+						))}
+					</AccordionContent>
+				</AccordionItem>
+			))}
+		</Accordion>
+	);
+};
+
+export default AccordionBase;
diff --git a/src/components/ui/icons/Down.tsx b/src/components/ui/icons/Down.tsx
index 55cdc39..f107347 100644
--- a/src/components/ui/icons/Down.tsx
+++ b/src/components/ui/icons/Down.tsx
@@ -1,12 +1,12 @@
 interface Props {
 	w?: number;
 	h?: number;
-	color?: string;
 }
 
-const Down = ({ w, h, color }: Props) => {
+const Down = ({ w, h }: Props) => {
 	return (
 		<svg
+			className="shrink-0 transition-transform duration-200"
 			width={w ? w : '24'}
 			height={h ? h : '24'}
 			viewBox="0 0 24 24"
@@ -17,7 +17,7 @@ const Down = ({ w, h, color }: Props) => {
 				fill-rule="evenodd"
 				clip-rule="evenodd"
 				d="M3.50173 6.93944C3.81132 6.66425 4.28538 6.69214 4.56056 7.00173L12 15.3711L19.4395 7.00173C19.7146 6.69214 20.1887 6.66425 20.4983 6.93944C20.8079 7.21463 20.8358 7.68868 20.5606 7.99827L12.5606 16.9983C12.4182 17.1584 12.2142 17.25 12 17.25C11.7858 17.25 11.5818 17.1584 11.4395 16.9983L3.43945 7.99827C3.16426 7.68869 3.19215 7.21463 3.50173 6.93944Z"
-				fill={color ? color : '#625F5D'}
+				fill="currentColor"
 			/>
 		</svg>
 	);
diff --git a/src/components/ui/shadcn-ui/accordion.tsx b/src/components/ui/shadcn-ui/accordion.tsx
new file mode 100644
index 0000000..af24cc6
--- /dev/null
+++ b/src/components/ui/shadcn-ui/accordion.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import Down from '../icons/Down';
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+	React.ElementRef<typeof AccordionPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+	<AccordionPrimitive.Item
+		ref={ref}
+		className={cn('border-b', className)}
+		{...props}
+	/>
+));
+AccordionItem.displayName = 'AccordionItem';
+
+const AccordionTrigger = React.forwardRef<
+	React.ElementRef<typeof AccordionPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+	<AccordionPrimitive.Header className="flex">
+		<AccordionPrimitive.Trigger
+			ref={ref}
+			className={cn(
+				'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<Down />
+		</AccordionPrimitive.Trigger>
+	</AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+	React.ElementRef<typeof AccordionPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+	<AccordionPrimitive.Content
+		ref={ref}
+		className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+		{...props}
+	>
+		<div className={cn('pb-4 pt-0', className)}>{children}</div>
+	</AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/src/components/ui/sidebars/DiscardMethod.tsx b/src/components/ui/sidebars/DiscardMethod.tsx
index bcf0fdb..bf2c60d 100644
--- a/src/components/ui/sidebars/DiscardMethod.tsx
+++ b/src/components/ui/sidebars/DiscardMethod.tsx
@@ -1,7 +1,10 @@
-import { useState } from 'react';
-import Down from '../icons/Down';
-import Up from '../icons/Up';
 import { methodTypes } from '@/utils/methodTypes';
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from '../shadcn-ui/accordion';
 
 interface Props {
 	tag: string;
@@ -9,43 +12,32 @@ interface Props {
 
 export default function DiscardMethod({ tag }: Props) {
 	const DM = methodTypes.filter((item) => item.tag === tag)[0].methods;
-	const [openIndex, SetOpenIndex] = useState(-1);
 	return (
 		<section className="flex flex-col gap-S-20 bg-white p-S-24">
 			<h5 className="text-Gray-700 Title-Small">배출 방법</h5>
-			<div className="flex flex-col gap-S-14">
+			<Accordion className="flex flex-col gap-4" type="single" collapsible>
 				{DM.map((method, index) => (
-					<div
-						key={index}
-						className="flex flex-col gap-S-16 rounded-[8px] bg-Green-50 p-S-16"
+					<AccordionItem
+						key={method.title}
+						className="rounded-[8px] bg-Green-50  px-S-12"
+						value={`item-${index}`}
 					>
-						<div className="flex justify-between">
-							<p className="text-Green-500 Title-Small">{method.title}</p>
-							{openIndex !== index ? (
-								<span onClick={() => SetOpenIndex(index)}>
-									<Down color="#45995E" />
-								</span>
-							) : (
-								<span onClick={() => SetOpenIndex(-1)}>
-									<Up color="#45995E" />
-								</span>
-							)}
-						</div>
-						{openIndex === index && (
-							<div className="bg-transparent">
-								{method.descriptions.map((content, index) => (
-									<p
-										key={`description-${index}`}
-										className="text-Gray-600 Label-Large-Custom"
-									>
-										{content}
-									</p>
-								))}
-							</div>
-						)}
-					</div>
+						<AccordionTrigger className="text-Green-500 Title-Small">
+							{method.title}
+						</AccordionTrigger>
+						<AccordionContent className="text-Gray-600">
+							{method.descriptions.map((content, index) => (
+								<p
+									key={`description-${index}`}
+									className="text-Gray-600 Label-Large-Custom"
+								>
+									{content}
+								</p>
+							))}
+						</AccordionContent>
+					</AccordionItem>
 				))}
-			</div>
+			</Accordion>
 		</section>
 	);
 }