diff --git a/public/leftarrow.svg b/public/left-arrow.svg
similarity index 80%
rename from public/leftarrow.svg
rename to public/left-arrow.svg
index 4d7cd36..1a5799e 100644
--- a/public/leftarrow.svg
+++ b/public/left-arrow.svg
@@ -1,3 +1,3 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 18 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
 <path d="M10.8938 16.0903L11.9438 15.0028C12.0187 14.9278 12.0187 14.8153 11.9438 14.7403L6.20625 9.00276L11.9438 3.26526C12.0187 3.19026 12.0187 3.07776 11.9438 3.00276L10.8938 1.95276C10.8188 1.87776 10.7063 1.87776 10.6313 1.91526L3.69375 8.89026C3.61875 8.96526 3.61875 9.07776 3.69375 9.15276L10.6313 16.0903C10.7063 16.1278 10.8188 16.1278 10.8938 16.0903Z" fill="#1A1D1F"/>
 </svg>
diff --git a/public/right-arrow.svg b/public/right-arrow.svg
new file mode 100644
index 0000000..1389029
--- /dev/null
+++ b/public/right-arrow.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 18 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.67852 16.0882L5.62852 15.0007C5.55352 14.9257 5.55352 14.8132 5.62852 14.7382L11.366 9.00068L5.62852 3.26318C5.55352 3.18818 5.55352 3.07568 5.62852 3.00068L6.67852 1.95068C6.75352 1.87568 6.86602 1.87568 6.94102 1.91318L13.8785 8.88818C13.9535 8.96318 13.9535 9.07568 13.8785 9.15068L6.94102 16.0882C6.86602 16.1257 6.75352 16.1257 6.67852 16.0882Z"/>
+</svg>
diff --git a/public/rightarrow.svg b/public/rightarrow.svg
deleted file mode 100644
index dee26e6..0000000
--- a/public/rightarrow.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.67852 15.0864L0.628516 13.9989C0.553516 13.9239 0.553516 13.8114 0.628516 13.7364L6.36601 7.99885L0.628516 2.26135C0.553516 2.18635 0.553516 2.07385 0.628516 1.99885L1.67852 0.948851C1.75352 0.873851 1.86602 0.873851 1.94102 0.911351L8.87852 7.88635C8.95352 7.96135 8.95352 8.07385 8.87852 8.14885L1.94102 15.0864C1.86602 15.1239 1.75352 15.1239 1.67852 15.0864Z" fill="#1A1D1F"/>
-</svg>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d67fc2c..9e5158e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -25,16 +25,17 @@ export default function Home() {
       <ColorPalette />
 
       <TypoSystem />
- 
+
+      {/* 공통 버튼 */}
       <ButtonTest />
-      
+
+      {/* 페이지네이션 */}
       <Pagination
         currentPage={currentPage}
         totalPages={totlepages}
         onPageChange={setCurrentPage}
         limit={limit}
       />
-
     </div>
   )
 }
diff --git a/src/components/common/button/Button.tsx b/src/components/common/button/Button.tsx
index eb67721..6556d77 100644
--- a/src/components/common/button/Button.tsx
+++ b/src/components/common/button/Button.tsx
@@ -52,4 +52,4 @@ const Button = ({
   )
 }
 
-export { Button }
+export default Button
diff --git a/src/components/common/button/TextButton.tsx b/src/components/common/button/TextButton.tsx
new file mode 100644
index 0000000..00da297
--- /dev/null
+++ b/src/components/common/button/TextButton.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'
+import LeftArrowIcon from '/public/left-arrow.svg'
+import RightArrowIcon from '/public/right-arrow.svg'
+
+// 아이콘 위치 타입 정의
+type IconPosition = 'left' | 'right'
+
+type TextButtonProps = React.ComponentProps<'button'> &
+  VariantProps<typeof textButtonVariants> & {
+    iconPosition?: IconPosition
+    asChild?: boolean
+  }
+
+const textButtonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap disabled:pointer-events-none outline-none cursor-pointer',
+  {
+    variants: {
+      size: {
+        xs: 'typo-caption2 gap-0.5',
+        sm: 'typo-caption1 gap-1',
+        md: 'typo-body3 gap-1',
+        lg: 'typo-body2 gap-2',
+        xl: 'typo-h3 gap-2',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  },
+)
+
+// 버튼 size prop에 따른 아이콘 크기 Mapping
+const IconSizeMap = {
+  xs: 'w-2.5 h-2.5',
+  sm: 'w-3 h-3',
+  md: 'w-4.5 h-4.5',
+  lg: 'w-4.5 h-4.5',
+  xl: 'w-6 h-6',
+}
+
+const TextButton = ({
+  className,
+  size = 'md',
+  iconPosition,
+  asChild = false,
+  children,
+  ...props
+}: TextButtonProps) => {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp data-slot="button" className={cn(textButtonVariants({ size, className }))} {...props}>
+      {iconPosition === 'left' && <LeftArrowIcon className={`${IconSizeMap[size!]} text-normal`} />}
+      {children}
+      {iconPosition === 'right' && (
+        <RightArrowIcon className={`${IconSizeMap[size!]} text-normal`} />
+      )}
+    </Comp>
+  )
+}
+
+export default TextButton
diff --git a/src/components/design-system/ButtonTest.tsx b/src/components/design-system/ButtonTest.tsx
index 690accf..ea622ad 100644
--- a/src/components/design-system/ButtonTest.tsx
+++ b/src/components/design-system/ButtonTest.tsx
@@ -1,17 +1,21 @@
 import React from 'react'
-import { Button } from '../common/Button/Button'
+import Button from '../common/Button/Button'
+import TextButton from '../common/Button/TextButton'
 
 const ButtonTest = () => {
-  const variants = ['primary', 'secondary', 'tertiary', 'outline']
-  const sizes = ['lg', 'md', 'sm']
+  const defaultButtonVars = ['primary', 'secondary', 'tertiary', 'outline']
+  const defaultButtonSizes = ['lg', 'md', 'sm']
+
+  const textButtonSizes = ['xl', 'lg', 'md', 'sm', 'xs']
+
   return (
     <section className="space-y-8">
       <h2 className="typo-h2 mb-4">기본 버튼</h2>
-      {variants.map((variant) => (
+      {defaultButtonVars.map((variant) => (
         <div key={variant} className="space-y-2">
           <p className="typo-h3">{variant}</p>
           <div className="grid grid-cols-6 gap-2 items-start">
-            {sizes.map((s) => (
+            {defaultButtonSizes.map((s) => (
               <>
                 <Button variant={variant} size={s}>
                   버튼입니다
@@ -24,6 +28,22 @@ const ButtonTest = () => {
           </div>
         </div>
       ))}
+
+      <h2 className="typo-h2 mb-4">텍스트 버튼</h2>
+      {textButtonSizes.map((size) => (
+        <div key={size} className="space-y-2">
+          <p className="typo-h3">{size}</p>
+          <div className="flex gap-10 justify-start">
+            <TextButton size={size}>텍스트버튼(아이콘x)</TextButton>
+            <TextButton size={size} iconPosition="left">
+              텍스트버튼(좌측아이콘)
+            </TextButton>
+            <TextButton size={size} iconPosition="right">
+              텍스트버튼(우측아이콘)
+            </TextButton>
+          </div>
+        </div>
+      ))}
     </section>
   )
 }
diff --git a/src/components/ui/pagination-container.tsx b/src/components/ui/pagination-container.tsx
index 73457e5..99d2802 100644
--- a/src/components/ui/pagination-container.tsx
+++ b/src/components/ui/pagination-container.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
-import RightArrowIcon from '../../../public/rightarrow.svg'
-import LeftArrowIcon from '../../../public/leftarrow.svg'
+import LeftArrowIcon from '/public/left-arrow.svg'
+import RightArrowIcon from '/public/right-arrow.svg'
 
 import { cn } from '@/lib/utils'
 import { Button, buttonVariants } from '@/components/ui/button'
diff --git a/src/styles/globals.css b/src/styles/globals.css
index cf716e2..d0cec73 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -157,7 +157,7 @@
   }
 
   ::-webkit-scrollbar-thumb {
-    @apply rounded-full bg-border-alter;
+    @apply rounded-full bg-alter-line;
   }
 }