diff --git a/public/fonts/eunyoung.woff2 b/public/fonts/eunyoung.woff2
new file mode 100644
index 0000000..8c87701
Binary files /dev/null and b/public/fonts/eunyoung.woff2 differ
diff --git a/public/fonts/hipi.ttf b/public/fonts/hipi.ttf
new file mode 100644
index 0000000..3f1e49a
Binary files /dev/null and b/public/fonts/hipi.ttf differ
diff --git a/public/fonts/ttaerom.ttf b/public/fonts/ttaerom.ttf
new file mode 100644
index 0000000..a5e1ca9
Binary files /dev/null and b/public/fonts/ttaerom.ttf differ
diff --git a/public/images/polaroidThemas/F-0.png b/public/images/polaroidThemas/F-0.png
new file mode 100644
index 0000000..022943a
Binary files /dev/null and b/public/images/polaroidThemas/F-0.png differ
diff --git a/public/images/polaroidThemas/F-1.png b/public/images/polaroidThemas/F-1.png
new file mode 100644
index 0000000..67618c5
Binary files /dev/null and b/public/images/polaroidThemas/F-1.png differ
diff --git a/public/images/polaroidThemas/F-2.png b/public/images/polaroidThemas/F-2.png
new file mode 100644
index 0000000..cb461a8
Binary files /dev/null and b/public/images/polaroidThemas/F-2.png differ
diff --git a/public/images/polaroidThemas/F-3.png b/public/images/polaroidThemas/F-3.png
new file mode 100644
index 0000000..ce824d4
Binary files /dev/null and b/public/images/polaroidThemas/F-3.png differ
diff --git a/public/images/polaroidThemas/F-4.png b/public/images/polaroidThemas/F-4.png
new file mode 100644
index 0000000..7cd852f
Binary files /dev/null and b/public/images/polaroidThemas/F-4.png differ
diff --git a/public/images/polaroidThemas/F-5.png b/public/images/polaroidThemas/F-5.png
new file mode 100644
index 0000000..7bfd1c6
Binary files /dev/null and b/public/images/polaroidThemas/F-5.png differ
diff --git a/public/images/polaroidThemas/F-6.png b/public/images/polaroidThemas/F-6.png
new file mode 100644
index 0000000..2fc09ed
Binary files /dev/null and b/public/images/polaroidThemas/F-6.png differ
diff --git a/public/images/polaroidThemas/F-7.png b/public/images/polaroidThemas/F-7.png
new file mode 100644
index 0000000..24dbdf8
Binary files /dev/null and b/public/images/polaroidThemas/F-7.png differ
diff --git a/public/images/polaroidThemas/F-8.png b/public/images/polaroidThemas/F-8.png
new file mode 100644
index 0000000..9a1bb3b
Binary files /dev/null and b/public/images/polaroidThemas/F-8.png differ
diff --git a/src/app/board/[boardId]/_actions/uploadAction.ts b/src/app/board/[boardId]/_actions/uploadAction.ts
index 7dd11dd..fd9aa54 100644
--- a/src/app/board/[boardId]/_actions/uploadAction.ts
+++ b/src/app/board/[boardId]/_actions/uploadAction.ts
@@ -1,12 +1,15 @@
 'use server'
 
 import { getPreSignedUrl, postPolaroid, uploadImage } from '@/lib'
+import { FontKeyType, ThemaKeyType } from '@/types'
 
 export const uploadAction = async (id: string, formData: FormData) => {
   try {
     const fileInput = formData.get('fileInput')
     const oneLineMessage = formData.get('oneLineMessage')
     const nickname = formData.get('nickname')
+    const font = formData.get('font')
+    const thema = formData.get('thema')
 
     if (!fileInput || !(fileInput instanceof File)) {
       throw new Error('Invalid file input')
@@ -20,6 +23,10 @@ export const uploadAction = async (id: string, formData: FormData) => {
       imageKey,
       oneLineMessage: oneLineMessage as string,
       nickname: nickname as string,
+      options: {
+        FONT: font as FontKeyType,
+        THEMA: thema as ThemaKeyType,
+      },
     })
     return res
   } catch (error) {
diff --git a/src/app/board/[boardId]/_components/CreatePolaroidModal/ArrowBack.tsx b/src/app/board/[boardId]/_components/CreatePolaroidModal/ArrowBack.tsx
index aef9b45..af66867 100644
--- a/src/app/board/[boardId]/_components/CreatePolaroidModal/ArrowBack.tsx
+++ b/src/app/board/[boardId]/_components/CreatePolaroidModal/ArrowBack.tsx
@@ -11,7 +11,7 @@ const ArrowBack = () => {
   return (
     <>
       <CloseIcon
-        className="cursor-pointer text-gray-0"
+        className="absolute left-5 top-10 cursor-pointer text-gray-0"
         onClick={() => setShowAskBfCloseModal(true)}
       />
       <AskBfCloseModal
diff --git a/src/app/board/[boardId]/_components/CreatePolaroidModal/CreatePolaroid.tsx b/src/app/board/[boardId]/_components/CreatePolaroidModal/CreatePolaroid.tsx
new file mode 100644
index 0000000..59c52f7
--- /dev/null
+++ b/src/app/board/[boardId]/_components/CreatePolaroidModal/CreatePolaroid.tsx
@@ -0,0 +1,107 @@
+import ArrowBack from '@/app/board/[boardId]/_components/CreatePolaroidModal/ArrowBack'
+import PolaroidMaker from '@/components/Polaroid/PolaroidMaker'
+import TagButton from '@/components/TagButton'
+import { twMerge } from 'tailwind-merge'
+import FontSelect from '@/app/board/[boardId]/_components/CreatePolaroidModal/FontSelect'
+import UploadBtn from '@/app/board/[boardId]/_components/CreatePolaroidModal/UploadBtn'
+import { Dispatch, SetStateAction, useEffect, useRef } from 'react'
+import { FontKeyType, ThemaKeyType } from '@/types'
+import PolaroidIcon from 'public/icons/polaroid.svg'
+
+interface CreatePolaroidProps {
+  image: File | null
+  selectedFontKey: FontKeyType
+  selectedThemaKey: ThemaKeyType
+  message: string
+  nickname: string
+  showFontSelect: boolean
+  isValid: boolean
+  submit: () => Promise<void>
+  setImage: Dispatch<SetStateAction<File | null>>
+  setMessage: Dispatch<SetStateAction<string>>
+  setNickname: Dispatch<SetStateAction<string>>
+  setShowFontSelect: Dispatch<SetStateAction<boolean>>
+  setSelectedFontKey: Dispatch<SetStateAction<FontKeyType>>
+  setShowThemaSelect: Dispatch<SetStateAction<boolean>>
+  setIsValid: Dispatch<SetStateAction<boolean>>
+}
+
+const CreatePolaroid = ({
+  image,
+  selectedFontKey,
+  selectedThemaKey,
+  message,
+  nickname,
+  setImage,
+  setMessage,
+  setNickname,
+  showFontSelect,
+  setShowFontSelect,
+  setSelectedFontKey,
+  setShowThemaSelect,
+  submit,
+  isValid,
+  setIsValid,
+}: CreatePolaroidProps) => {
+  const fontSelectRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    setIsValid(!!image)
+  }, [image])
+
+  useEffect(() => {
+    if (fontSelectRef.current) {
+      fontSelectRef.current.scrollIntoView()
+    }
+  }, [fontSelectRef, showFontSelect])
+
+  return (
+    <div className="relative flex h-dvh w-full max-w-md touch-pan-y flex-col items-center justify-between">
+      <ArrowBack />
+      <div className="w-full overflow-y-scroll pb-5 pt-16 scrollbar-hide">
+        <div className="mx-auto w-[272px]">
+          <PolaroidMaker
+            image={image}
+            fontKey={selectedFontKey}
+            themaKey={selectedThemaKey}
+            message={message}
+            nickname={nickname}
+            setImage={setImage}
+            setMessage={setMessage}
+            setNickname={setNickname}
+          />
+          <div className="flex gap-5 py-5">
+            <TagButton
+              className={twMerge(
+                'font-hesom text-md leading-5',
+                showFontSelect ? 'border-gray-0 bg-gray-800 text-gray-0' : '',
+              )}
+              onClick={() => setShowFontSelect((prev) => !prev)}
+            >
+              폰트 고르기
+            </TagButton>
+            <TagButton
+              className="flex gap-2 p-2.5 text-sm leading-4"
+              onClick={() => setShowThemaSelect((prev) => !prev)}
+            >
+              <PolaroidIcon />
+              프레임 고르기
+            </TagButton>
+          </div>
+        </div>
+        {showFontSelect && (
+          <FontSelect
+            ref={fontSelectRef}
+            selectedFont={selectedFontKey}
+            onSelect={setSelectedFontKey}
+          />
+        )}
+      </div>
+      <div className="flex w-full justify-center pb-10">
+        <UploadBtn submitForm={submit} btnDisabled={!isValid} />
+      </div>
+    </div>
+  )
+}
+
+export default CreatePolaroid
diff --git a/src/app/board/[boardId]/_components/CreatePolaroidModal/FontSelect.tsx b/src/app/board/[boardId]/_components/CreatePolaroidModal/FontSelect.tsx
new file mode 100644
index 0000000..1de1b73
--- /dev/null
+++ b/src/app/board/[boardId]/_components/CreatePolaroidModal/FontSelect.tsx
@@ -0,0 +1,42 @@
+import { FontKeyType } from '@/types'
+import { FONTS } from '@/lib'
+import { twMerge } from 'tailwind-merge'
+import TagButton from '@/components/TagButton'
+import { forwardRef } from 'react'
+
+interface FontSelectProps {
+  selectedFont: FontKeyType
+  onSelect: (fontKey: FontKeyType) => void
+}
+
+const FontSelect = forwardRef<HTMLDivElement, FontSelectProps>(
+  ({ selectedFont, onSelect }, ref) => {
+    const selectedFontClass = 'bg-gray-0 text-gray-1000 border border-gray-900'
+    const fontClass = 'text-neutral-500 bg-gray-300 border border-gray-500 '
+    return (
+      <div className="overflow-x-scroll scrollbar-hide" ref={ref}>
+        <div className="mx-[calc((100%-272px)/2)] inline-flex items-center gap-2">
+          {Object.entries(FONTS).map(([key, font]) => (
+            <TagButton
+              className={twMerge(
+                'shrink-0',
+                FONTS[selectedFont].title === font.title
+                  ? selectedFontClass
+                  : fontClass,
+                font.className,
+              )}
+              key={key}
+              onClick={() => onSelect(key as FontKeyType)}
+            >
+              {font.title}
+            </TagButton>
+          ))}
+        </div>
+      </div>
+    )
+  },
+)
+
+FontSelect.displayName = 'FontSelect'
+
+export default FontSelect
diff --git a/src/app/board/[boardId]/_components/CreatePolaroidModal/ThemaSelect.tsx b/src/app/board/[boardId]/_components/CreatePolaroidModal/ThemaSelect.tsx
new file mode 100644
index 0000000..dc31f6d
--- /dev/null
+++ b/src/app/board/[boardId]/_components/CreatePolaroidModal/ThemaSelect.tsx
@@ -0,0 +1,89 @@
+import Image from 'next/image'
+import { twMerge } from 'tailwind-merge'
+import { ThemaKeyType } from '@/types'
+import { THEMAS } from '@/lib'
+import { useEffect, useState } from 'react'
+import Button from '@/components/Button'
+import ArrowBackIcon from 'public/icons/arrow_back_ios.svg'
+
+interface ThemaSelectItemProps {
+  themaType: ThemaKeyType
+  isCurrentThema: boolean
+  setCurrentThema: (thema: ThemaKeyType) => void
+}
+
+const ThemaSelectItem = ({
+  themaType,
+  isCurrentThema,
+  setCurrentThema,
+}: ThemaSelectItemProps) => {
+  return (
+    <div
+      className={twMerge(
+        'flex items-center justify-center rounded-lg border-2 bg-gray-700 px-7 py-[22px]',
+        isCurrentThema ? 'border-gray-100' : 'border-gray-700',
+      )}
+    >
+      <Image
+        src={`/images/polaroidThemas/${themaType}.png`}
+        alt="polabo"
+        width={100}
+        height={100}
+        onClick={() => setCurrentThema(themaType)}
+      />
+    </div>
+  )
+}
+
+interface ThemaSelectProps {
+  selectedThema: ThemaKeyType
+  setSelectedThema: (thema: ThemaKeyType) => void
+  setShowThemaSelect: (showThemaSelect: boolean) => void
+}
+
+const ThemaSelect = ({
+  selectedThema,
+  setSelectedThema,
+  setShowThemaSelect,
+}: ThemaSelectProps) => {
+  const [currentThema, setCurrentThema] = useState<ThemaKeyType>(selectedThema)
+
+  useEffect(() => {
+    setCurrentThema(selectedThema)
+  }, [selectedThema])
+
+  const onSelectThema = () => {
+    setSelectedThema(currentThema)
+    setShowThemaSelect(false)
+  }
+
+  return (
+    <div className="relative flex h-dvh w-full max-w-md touch-pan-y flex-col items-center justify-between">
+      <div className="absolute left-5 top-10">
+        <ArrowBackIcon
+          className="h-6 w-6 text-gray-0"
+          onClick={() => setShowThemaSelect(false)}
+        />
+      </div>
+      <div className="mx-12 overflow-y-scroll pb-5 pt-10 scrollbar-hide">
+        <div className="grid grid-cols-2 gap-3">
+          {Object.entries(THEMAS).map(([key]) => (
+            <ThemaSelectItem
+              key={key}
+              themaType={key as ThemaKeyType}
+              isCurrentThema={currentThema === key}
+              setCurrentThema={setCurrentThema}
+            />
+          ))}
+        </div>
+      </div>
+      <div className="flex w-full justify-center pb-10">
+        <Button size="lg" onClick={onSelectThema}>
+          선택 완료
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default ThemaSelect
diff --git a/src/app/board/[boardId]/_components/CreatePolaroidModal/UploadBtn.tsx b/src/app/board/[boardId]/_components/CreatePolaroidModal/UploadBtn.tsx
index 58ad809..50a543f 100644
--- a/src/app/board/[boardId]/_components/CreatePolaroidModal/UploadBtn.tsx
+++ b/src/app/board/[boardId]/_components/CreatePolaroidModal/UploadBtn.tsx
@@ -18,23 +18,20 @@ const UploadBtn = ({ submitForm, btnDisabled }: UploadBtnProps) => {
   }
 
   return (
-    <div>
-      <div className="px-5">
-        <Button
-          onClick={() => setShowFinalModal(true)}
-          size="lg"
-          className="w-full"
-          disabled={isPending || btnDisabled}
-        >
-          업로드하기
-        </Button>
-      </div>
+    <>
+      <Button
+        onClick={() => setShowFinalModal(true)}
+        size="lg"
+        disabled={isPending || btnDisabled}
+      >
+        업로드하기
+      </Button>
       <FinalModal
         isOpen={showFinalModal}
         onClose={() => setShowFinalModal(false)}
         onConfirm={onSubmit}
       />
-    </div>
+    </>
   )
 }
 
diff --git a/src/app/board/[boardId]/_components/CreatePolaroidModal/index.tsx b/src/app/board/[boardId]/_components/CreatePolaroidModal/index.tsx
index c6992d2..64d82fb 100644
--- a/src/app/board/[boardId]/_components/CreatePolaroidModal/index.tsx
+++ b/src/app/board/[boardId]/_components/CreatePolaroidModal/index.tsx
@@ -1,29 +1,29 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { useSession } from 'next-auth/react'
 import { getPolaroidNickname } from '@/lib/utils/polaroid'
-import PolaroidMaker from '@/components/Polaroid/PolaroidMaker'
+import { FontKeyType, ThemaKeyType } from '@/types'
+import ThemaSelect from '@/app/board/[boardId]/_components/CreatePolaroidModal/ThemaSelect'
+import CreatePolaroid from '@/app/board/[boardId]/_components/CreatePolaroidModal/CreatePolaroid'
 import { uploadAction } from '../../_actions/uploadAction'
-import ArrowBack from './ArrowBack'
 import { useModal } from './ModalContext'
-import UploadBtn from './UploadBtn'
 
 interface CreatePolaroidProps {
   id: string
 }
 
-const CreatePolaroid = ({ id }: CreatePolaroidProps) => {
+const CreatePolaroidModal = ({ id }: CreatePolaroidProps) => {
   const [isValid, setIsValid] = useState<boolean>(false)
   const [image, setImage] = useState<File | null>(null)
   const [nickname, setNickname] = useState<string>('')
   const [message, setMessage] = useState<string>('')
+  const [selectedFontKey, setSelectedFontKey] = useState<FontKeyType>('HESOM')
+  const [showFontSelect, setShowFontSelect] = useState<boolean>(false)
+  const [selectedThemaKey, setSelectedThemaKey] = useState<ThemaKeyType>('F-0')
+  const [showThemaSelect, setShowThemaSelect] = useState<boolean>(false)
   const { closeModal } = useModal()
 
-  useEffect(() => {
-    setIsValid(!!image)
-  }, [image])
-
   const { data: session } = useSession()
 
   const submit = async () => {
@@ -35,6 +35,8 @@ const CreatePolaroid = ({ id }: CreatePolaroidProps) => {
     formData.append('fileInput', image!)
     formData.append('oneLineMessage', message)
     formData.append('nickname', getPolaroidNickname(nickname, session))
+    formData.append('font', selectedFontKey)
+    formData.append('thema', selectedThemaKey)
 
     const res = await uploadAction(id, formData)
 
@@ -43,22 +45,35 @@ const CreatePolaroid = ({ id }: CreatePolaroidProps) => {
     }
   }
 
+  if (showThemaSelect) {
+    return (
+      <ThemaSelect
+        selectedThema={selectedThemaKey}
+        setSelectedThema={setSelectedThemaKey}
+        setShowThemaSelect={setShowThemaSelect}
+      />
+    )
+  }
+
   return (
-    <div className="w-md mx-auto flex h-dvh max-w-md flex-1 flex-col justify-between px-5 py-10">
-      <ArrowBack />
-      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
-        <PolaroidMaker
-          image={image}
-          message={message}
-          nickname={nickname}
-          setImage={setImage}
-          setMessage={setMessage}
-          setNickname={setNickname}
-        />
-      </div>
-      <UploadBtn submitForm={submit} btnDisabled={!isValid} />
-    </div>
+    <CreatePolaroid
+      image={image}
+      selectedFontKey={selectedFontKey}
+      selectedThemaKey={selectedThemaKey}
+      message={message}
+      nickname={nickname}
+      showFontSelect={showFontSelect}
+      isValid={isValid}
+      submit={submit}
+      setImage={setImage}
+      setMessage={setMessage}
+      setNickname={setNickname}
+      setShowFontSelect={setShowFontSelect}
+      setSelectedFontKey={setSelectedFontKey}
+      setShowThemaSelect={setShowThemaSelect}
+      setIsValid={setIsValid}
+    />
   )
 }
 
-export default CreatePolaroid
+export default CreatePolaroidModal
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 04936a0..f90583b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -21,6 +21,21 @@ const Hesom = localFont({
   variable: '--font-hesom',
 })
 
+const Eunyoung = localFont({
+  src: '../../public/fonts/eunyoung.woff2',
+  variable: '--font-eunyoung',
+})
+
+const Ttaerom = localFont({
+  src: '../../public/fonts/ttaerom.ttf',
+  variable: '--font-ttaerom',
+})
+
+const Hipi = localFont({
+  src: '../../public/fonts/hipi.ttf',
+  variable: '--font-hipi',
+})
+
 export const metadata: Metadata = {
   title: 'POLABO | 함께 꾸미는 폴라로이드 보드, 폴라보',
   description:
@@ -63,7 +78,7 @@ export default function RootLayout({
         <link rel="icon" href="/images/favicon.ico" sizes="any" />
       </head>
       <body
-        className={`${PretendVariable.variable} ${Jooree.variable} ${Hesom.variable}`}
+        className={`${PretendVariable.variable} ${Jooree.variable} ${Hesom.variable} ${Eunyoung.variable} ${Ttaerom.variable} ${Hipi.variable}`}
       >
         <AuthSession>
           <CheckNewUser />
diff --git a/src/components/Polaroid/Base/PolaroidDescription.tsx b/src/components/Polaroid/Base/PolaroidDescription.tsx
index 7e6b392..e8f30f7 100644
--- a/src/components/Polaroid/Base/PolaroidDescription.tsx
+++ b/src/components/Polaroid/Base/PolaroidDescription.tsx
@@ -1,17 +1,23 @@
 import { HTMLAttributes } from 'react'
 import { twMerge } from 'tailwind-merge'
+import { ThemaKeyType } from '@/types'
+import { THEMAS } from '@/lib'
+
+interface PolaroidDescriptionProps extends HTMLAttributes<HTMLDivElement> {
+  themaKey: ThemaKeyType
+}
 
 const PolaroidDescription = ({
   children,
   className,
+  themaKey,
   ...props
-}: HTMLAttributes<HTMLDivElement>) => {
+}: PolaroidDescriptionProps) => {
   return (
     <div
       className={`${twMerge('flex flex-col gap-0.5 px-4 pb-2', className)}`}
       style={{
-        background:
-          'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 10.71%, rgba(255, 255, 255, 0.50) 57.96%, rgba(255, 255, 255, 0.00) 100%), #EAEAEA',
+        background: THEMAS[themaKey].descriptionStyle,
       }}
       {...props}
     >
diff --git a/src/components/Polaroid/Base/PolaroidFrame.tsx b/src/components/Polaroid/Base/PolaroidFrame.tsx
index 7f74dc1..9bfa9a3 100644
--- a/src/components/Polaroid/Base/PolaroidFrame.tsx
+++ b/src/components/Polaroid/Base/PolaroidFrame.tsx
@@ -1,14 +1,23 @@
 import { HTMLAttributes } from 'react'
 import { twMerge } from 'tailwind-merge'
+import { FontKeyType, ThemaKeyType } from '@/types'
+import { FONTS, THEMAS } from '@/lib'
+
+interface PolaroidFrameProps extends HTMLAttributes<HTMLDivElement> {
+  themaKey: ThemaKeyType
+  fontKey: FontKeyType
+}
 
 const PolaroidFrame = ({
   children,
   className,
+  themaKey,
+  fontKey,
   ...props
-}: HTMLAttributes<HTMLDivElement>) => {
+}: PolaroidFrameProps) => {
   return (
     <div
-      className={`${twMerge('rounded-sm bg-[#f3f3f3] font-hesom shadow-polaroid', className)}`}
+      className={`${twMerge('rounded-sm shadow-polaroid', className, FONTS[fontKey].className, THEMAS[themaKey].className)}`}
       {...props}
     >
       {children}
diff --git a/src/components/Polaroid/PolaroidCard/index.tsx b/src/components/Polaroid/PolaroidCard/index.tsx
index 944e093..cb71631 100644
--- a/src/components/Polaroid/PolaroidCard/index.tsx
+++ b/src/components/Polaroid/PolaroidCard/index.tsx
@@ -12,11 +12,16 @@ interface PolaroidCardProps {
 
 function PolaroidCard({ polaroid, onClick = () => {} }: PolaroidCardProps) {
   return (
-    <PolaroidFrame className="cursor-pointer" onClick={onClick}>
+    <PolaroidFrame
+      className="cursor-pointer"
+      onClick={onClick}
+      themaKey={polaroid.options.THEMA}
+      fontKey={polaroid.options.FONT}
+    >
       <div className="p-2">
         <PolaroidImage imageUrl={polaroid.imageUrl} />
       </div>
-      <PolaroidDescription>
+      <PolaroidDescription themaKey={polaroid.options.THEMA}>
         <PolaroidMessage
           className="h-6 text-sm leading-5"
           message={polaroid.oneLineMessage}
diff --git a/src/components/Polaroid/PolaroidDetail/index.tsx b/src/components/Polaroid/PolaroidDetail/index.tsx
index 12403e9..c99c4b8 100644
--- a/src/components/Polaroid/PolaroidDetail/index.tsx
+++ b/src/components/Polaroid/PolaroidDetail/index.tsx
@@ -23,11 +23,15 @@ const PolaroidDetailModal = ({
 
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
-      <PolaroidFrame className="mx-auto flex w-[272px] touch-pinch-zoom flex-col overflow-y-hidden">
+      <PolaroidFrame
+        className="mx-auto flex w-[272px] touch-pinch-zoom flex-col overflow-y-hidden"
+        themaKey={polaroid.options.THEMA}
+        fontKey={polaroid.options.FONT}
+      >
         <div className="mt-5 px-3">
           <PolaroidImage imageUrl={polaroid.imageUrl} />
         </div>
-        <PolaroidDescription>
+        <PolaroidDescription themaKey={polaroid.options.THEMA}>
           <PolaroidMessage
             className="min-h-6 text-xl"
             message={polaroid.oneLineMessage}
diff --git a/src/components/Polaroid/PolaroidMaker/PolaroidNicknameInput.tsx b/src/components/Polaroid/PolaroidMaker/PolaroidNicknameInput.tsx
index be7c443..83335c3 100644
--- a/src/components/Polaroid/PolaroidMaker/PolaroidNicknameInput.tsx
+++ b/src/components/Polaroid/PolaroidMaker/PolaroidNicknameInput.tsx
@@ -26,6 +26,26 @@ const PolaroidNicknameInput = ({
 
   const ref = useRef<HTMLSpanElement>(null)
 
+  useEffect(() => {
+    const element = ref.current
+
+    const resizeObserver = new ResizeObserver(() => {
+      if (element) {
+        setWidth(element.offsetWidth)
+      }
+    })
+
+    if (element) {
+      resizeObserver.observe(element)
+    }
+
+    return () => {
+      if (element) {
+        resizeObserver.unobserve(element)
+      }
+    }
+  }, [])
+
   useEffect(() => {
     if (!ref.current) {
       return
diff --git a/src/components/Polaroid/PolaroidMaker/index.tsx b/src/components/Polaroid/PolaroidMaker/index.tsx
index ebe1042..8115c7d 100644
--- a/src/components/Polaroid/PolaroidMaker/index.tsx
+++ b/src/components/Polaroid/PolaroidMaker/index.tsx
@@ -8,6 +8,7 @@ import {
 import imageCompression from 'browser-image-compression'
 import PolaroidFrame from '@/components/Polaroid/Base/PolaroidFrame'
 import PolaroidDescription from '@/components/Polaroid/Base/PolaroidDescription'
+import { FontKeyType, ThemaKeyType } from '@/types'
 import PolaroidImageInput from './PolaroidImageInput'
 import PolaroidMessageInput from './PolaroidMessageInput'
 import PolaroidNicknameInput from './PolaroidNicknameInput'
@@ -25,18 +26,22 @@ interface PolaroidMakerProps {
   setImage: Dispatch<SetStateAction<File | null>>
   setMessage: Dispatch<SetStateAction<string>>
   setNickname: Dispatch<SetStateAction<string>>
+  fontKey: FontKeyType
+  themaKey: ThemaKeyType
 }
 
 const MAX_MESSAGE_LENGTH = 20
 const MAX_FROM_LENGTH = 10
 
 const PolaroidMaker = ({
+  themaKey,
   image,
   message,
   nickname,
   setImage,
   setMessage,
   setNickname,
+  fontKey,
 }: PolaroidMakerProps) => {
   const [previewFile, setPreviewFile] = useState<string | null>(null)
 
@@ -78,14 +83,18 @@ const PolaroidMaker = ({
   }
 
   return (
-    <PolaroidFrame className="mx-auto flex w-[272px] touch-pinch-zoom flex-col overflow-y-hidden">
+    <PolaroidFrame
+      className="mx-auto flex flex-col overflow-y-hidden"
+      fontKey={fontKey}
+      themaKey={themaKey}
+    >
       <div className="mt-5 px-3">
         <PolaroidImageInput
           imageUrl={previewFile}
           changeImage={handleImageChange}
         />
       </div>
-      <PolaroidDescription>
+      <PolaroidDescription themaKey={themaKey}>
         <PolaroidMessageInput
           message={message}
           maxLength={MAX_MESSAGE_LENGTH}
diff --git a/src/components/TagButton/index.tsx b/src/components/TagButton/index.tsx
new file mode 100644
index 0000000..b500269
--- /dev/null
+++ b/src/components/TagButton/index.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+interface TagButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+const TagButton = ({ children, className, ...props }: TagButtonProps) => {
+  return (
+    <button
+      type="button"
+      {...props}
+      className={twMerge(
+        'rounded-[36px] border border-gray-0 px-5 py-2 text-gray-0',
+        className,
+      )}
+    >
+      {children}
+    </button>
+  )
+}
+
+export default TagButton
diff --git a/src/lib/constants/polaroidConfig.ts b/src/lib/constants/polaroidConfig.ts
index 648e250..8e24871 100644
--- a/src/lib/constants/polaroidConfig.ts
+++ b/src/lib/constants/polaroidConfig.ts
@@ -1,6 +1,75 @@
+import { FontKeyType, FontType, ThemaKeyType, ThemaType } from '@/types'
+
 export const FILTERS = {
   NORMAL: 'none',
   POLAROID: 'sepia(0.2) contrast(1.0) brightness(1) saturate(1.2) blur(0px)',
   VINTAGE:
     'sepia(0.4) contrast(1.1) brightness(0.9) saturate(0.8) hue-rotate(-20deg) blur(0.6px)',
 } as const
+
+export const THEMAS: Record<ThemaKeyType, ThemaType> = {
+  'F-0': {
+    className: 'bg-[#eaeaea]',
+    descriptionStyle:
+      'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 10.71%, rgba(255, 255, 255, 0.50) 57.96%, rgba(255, 255, 255, 0.00) 100%), #eaeaea',
+  },
+  'F-1': {
+    className: 'bg-[#ede2d8]',
+    descriptionStyle:
+      'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 10.71%, rgba(255, 255, 255, 0.50) 57.96%, rgba(255, 255, 255, 0.00) 100%), #ede2d8',
+  },
+  'F-2': {
+    className: 'bg-[#ffd7e0]',
+    descriptionStyle:
+      'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 10.71%, rgba(255, 255, 255, 0.50) 57.96%, rgba(255, 255, 255, 0.00) 100%), #ffd7e0',
+  },
+  'F-3': {
+    className: 'bg-[#ffdbfb]',
+    descriptionStyle:
+      'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 10.71%, rgba(255, 255, 255, 0.50) 57.96%, rgba(255, 255, 255, 0.00) 100%), #ffdbfb',
+  },
+  'F-4': {
+    className: 'bg-[#fff7db]',
+    descriptionStyle:
+      'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 10.71%, rgba(255, 255, 255, 0.50) 57.96%, rgba(255, 255, 255, 0.00) 100%), #fff7db',
+  },
+  'F-5': {
+    className: 'bg-[#e5ffdc]',
+    descriptionStyle:
+      'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 10.71%, rgba(255, 255, 255, 0.50) 57.96%, rgba(255, 255, 255, 0.00) 100%), #e5ffdc',
+  },
+  'F-6': {
+    className: 'bg-[#c4f0e6]',
+    descriptionStyle:
+      'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 10.71%, rgba(255, 255, 255, 0.50) 57.96%, rgba(255, 255, 255, 0.00) 100%), #c4f0e6',
+  },
+  'F-7': {
+    className: 'bg-[#dbf2ff]',
+    descriptionStyle:
+      'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 10.71%, rgba(255, 255, 255, 0.50) 57.96%, rgba(255, 255, 255, 0.00) 100%), #dbf2ff',
+  },
+  'F-8': {
+    className: 'bg-[#e6daff]',
+    descriptionStyle:
+      'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 10.71%, rgba(255, 255, 255, 0.50) 57.96%, rgba(255, 255, 255, 0.00) 100%), #e6daff',
+  },
+} as const
+
+export const FONTS: Record<FontKeyType, FontType> = {
+  HESOM: {
+    title: '해솜체',
+    className: 'font-hesom',
+  },
+  EUNYOUNG: {
+    title: '은영체',
+    className: 'font-eunyoung',
+  },
+  TTAEROM: {
+    title: '때롬체',
+    className: 'font-ttaerom',
+  },
+  HIPI: {
+    title: '바른히피체',
+    className: 'font-hipi',
+  },
+}
diff --git a/src/types/polaroid.ts b/src/types/polaroid.ts
index 7a6379b..56a5cc4 100644
--- a/src/types/polaroid.ts
+++ b/src/types/polaroid.ts
@@ -1,19 +1,43 @@
-import { FILTERS } from '../lib/constants/polaroidConfig'
-
 export interface Polaroid {
   id: number
   imageUrl: string
   oneLineMessage: string
   nickname: string
+  options: {
+    FONT: FontKeyType
+    THEMA: ThemaKeyType
+  }
 }
 
 export interface CreatePolaroidPayload {
   imageKey: string
   oneLineMessage: string
   nickname: string
+  options: {
+    FONT: FontKeyType
+    THEMA: ThemaKeyType
+  }
 }
 
-export interface PolaroidImageProps {
-  imageUrl: string
-  filter?: keyof typeof FILTERS
+export type FontKeyType = 'HESOM' | 'EUNYOUNG' | 'TTAEROM' | 'HIPI'
+
+export interface FontType {
+  title: string
+  className: string
+}
+
+export type ThemaKeyType =
+  | 'F-0'
+  | 'F-1'
+  | 'F-2'
+  | 'F-3'
+  | 'F-4'
+  | 'F-5'
+  | 'F-6'
+  | 'F-7'
+  | 'F-8'
+
+export interface ThemaType {
+  className: string
+  descriptionStyle: string
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 796ff7a..d14052f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,11 +2,7 @@
 import type { Config } from 'tailwindcss'
 
 const config: Config = {
-  content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
   theme: {
     colors: {
       gray: {
@@ -72,6 +68,9 @@ const config: Config = {
         pretendard: ['var(--font-pretendard-variable)'],
         jooree: ['var(--font-jooree)'],
         hesom: ['var(--font-hesom)'],
+        eunyoung: ['var(--font-eunyoung)'],
+        ttaerom: ['var(--font-ttaerom)'],
+        hipi: ['var(--font-hipi)'],
       },
       keyframes: {
         'slide-left': {