diff --git a/components/modals/upload-post-modal.tsx b/components/modals/upload-post-modal.tsx
index 8c0633a..f1fca38 100644
--- a/components/modals/upload-post-modal.tsx
+++ b/components/modals/upload-post-modal.tsx
@@ -2,9 +2,9 @@
 
 import Image from 'next/image'
 import { isEmpty } from 'lodash'
-import { SubmitHandler, useForm } from 'react-hook-form'
-import { ChevronLeft, MapPin } from 'lucide-react'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { SubmitHandler, useForm } from 'react-hook-form'
+import { ChevronDown, ChevronLeft, MapPin } from 'lucide-react'
 import React, { ChangeEvent, ReactNode, useState } from 'react'
 
 import { cn } from '~/lib/utils'
@@ -12,10 +12,21 @@ import { trpc } from '~/trpc/client'
 import { Tag } from '~/helpers/tag-helpers'
 import { useUpload } from '~/hooks/use-upload'
 import { Emoji } from '~/helpers/emoji-helpers'
+import { Textarea } from '~/components/ui/textarea'
 import { PostSchema, PostSchemaType } from '~/zod/schema'
 import { Dialog, DialogContent, DialogHeader } from '~/components/ui/dialog'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '~/components/ui/collapsible'
+import {
+  Form,
+  FormItem,
+  FormLabel,
+  FormField,
+  FormControl,
+  FormDescription
+} from '~/components/ui/form'
 
 import { Button } from './../ui/button'
+import { Switch } from './../ui/switch'
 import { Carousel } from './../carousel'
 import { TagInput } from './../tag-input'
 import { EmojiPicker } from './../emoji-picker'
@@ -25,24 +36,28 @@ import { UploadPhotoVideoIcon } from './../custom-icon/upload-video-icon'
 export const UploadPostModal = (): JSX.Element => {
   const upload = useUpload()
   const currentUser = trpc.user.currentUser.useQuery()
+  const hashtags = trpc.hashtag.getHashtags.useQuery()
 
   const [tags, setTags] = useState<Tag[]>([])
   const [files, setFiles] = useState<File[]>([])
   const [fileUrls, setFileUrls] = useState<string[]>([])
+  const [advanceSetting, setAdvanceSetting] = useState<boolean>(true)
 
   const isFileExist = files
 
+  const form = useForm<PostSchemaType>({
+    mode: 'onTouched',
+    resolver: zodResolver(PostSchema)
+  })
+
   const {
     reset,
     watch,
-    register,
+    control,
     setValue,
     handleSubmit,
     formState: { isSubmitting }
-  } = useForm<PostSchemaType>({
-    mode: 'onTouched',
-    resolver: zodResolver(PostSchema)
-  })
+  } = form
 
   const handleFileChange = (e: ChangeEvent<HTMLInputElement>): void => {
     const files = e.target.files
@@ -62,6 +77,8 @@ export const UploadPostModal = (): JSX.Element => {
     )
   }
 
+  const handleCollapsibleChange = (): void => setAdvanceSetting((prev) => !prev)
+
   const handleReset = (): void => {
     setFileUrls([])
     setFiles([])
@@ -82,184 +99,269 @@ export const UploadPostModal = (): JSX.Element => {
     }
   }
 
-  const handlePost: SubmitHandler<PostSchemaType> = async (data): Promise<void> => {
-    // console.log(data)
-    // console.log(tags)
-    handleReset()
+  const onPost: SubmitHandler<PostSchemaType> = async (data): Promise<void> => {
+    // console.log({
+    //   ...data,
+    //   tags
+    // })
   }
 
   return (
     <Dialog open={upload.isOpen} onOpenChange={upload.onClose}>
       <DialogContent
         className={cn(
-          'rounded-xl bg-white p-0',
+          'h-auto overflow-y-auto rounded-xl bg-white p-0',
           !isEmpty(isFileExist) ? 'max-w-[710px]' : 'max-w-xl'
         )}
       >
-        <form
-          // eslint-disable-next-line @typescript-eslint/no-misused-promises
-          onSubmit={handleSubmit(handlePost)}
-        >
-          <DialogHeader className="flex flex-row items-center justify-between border-b border-stroke-3 px-3 py-2.5">
-            {!isEmpty(isFileExist) ? (
-              <button
-                type="button"
-                disabled={isSubmitting}
-                onClick={handleReset}
-                className="rounded-full outline-primary disabled:cursor-not-allowed disabled:opacity-50"
-              >
-                <ChevronLeft />
-              </button>
-            ) : (
-              <span></span>
-            )}
-            <h2 className="text-center font-bold">Create new post</h2>
-            {!isEmpty(isFileExist) ? (
-              <button
-                type="submit"
-                className={cn(
-                  'hover:text-primary-200 p-0.5 text-sm font-semibold text-primary outline-primary',
-                  isSubmitting ? 'disabled:cursor-not-allowed disabled:opacity-50' : ''
-                )}
-              >
-                {isSubmitting ? <Spinner /> : 'Share'}
-              </button>
-            ) : (
-              <span></span>
-            )}
-          </DialogHeader>
-          {/* <hr /> */}
-          <main
-            className={cn('min-h-[500px]', isEmpty(isFileExist) && 'flex place-content-center')}
+        <Form {...form}>
+          <form
+            // eslint-disable-next-line @typescript-eslint/no-misused-promises
+            onSubmit={handleSubmit(onPost)}
           >
-            {isEmpty(isFileExist) && (
-              <section className="flex flex-col items-center justify-center">
-                <div className="flex flex-col items-center rounded-lg border border-dashed border-core-secondary-100 p-4">
-                  <input className="hidden" />
-                  <UploadPhotoVideoIcon className="h-36 w-40 text-core-secondary" />
-                  <h1 className="text-xl font-medium text-core-secondary">
-                    Drag photos and videos here
-                  </h1>
-                </div>
-                <input
-                  type="file"
-                  id="file-upload"
-                  name="file-upload"
-                  accept="image/*, video/*"
-                  style={{ display: 'none' }}
-                  onChange={handleFileChange}
-                  multiple={true}
-                />
-                <Button
+            <DialogHeader className="flex flex-row items-center justify-between border-b border-stroke-3 px-3 py-2.5">
+              {!isEmpty(isFileExist) ? (
+                <button
                   type="button"
-                  variant="primary"
-                  onClick={() => document.getElementById('file-upload')?.click()}
-                  className="mt-4 px-4 py-1 text-sm"
+                  disabled={isSubmitting}
+                  onClick={handleReset}
+                  className="rounded-full outline-primary disabled:cursor-not-allowed disabled:opacity-50"
                 >
-                  Select from computer
-                </Button>
-              </section>
-            )}
-            {!isEmpty(isFileExist) && (
-              <section className="relative flex h-full flex-col-reverse md:flex-row">
-                <div
+                  <ChevronLeft />
+                </button>
+              ) : (
+                <span></span>
+              )}
+              <h2 className="text-center font-bold">Create new post</h2>
+              {!isEmpty(isFileExist) ? (
+                <button
+                  type="submit"
                   className={cn(
-                    'flex h-full min-h-[550px] w-full justify-center rounded-bl-2xl',
-                    'max-w-sm items-center overflow-hidden bg-black'
+                    'hover:text-primary-200 p-0.5 text-sm font-semibold text-primary outline-primary',
+                    isSubmitting ? 'disabled:cursor-not-allowed disabled:opacity-50' : ''
                   )}
                 >
-                  <Carousel>
-                    {
-                      fileUrls?.map((asset, idx) => {
-                        if (asset.endsWith('.mp4')) {
-                          return (
-                            <video key={idx} src={asset} autoPlay muted loop className="w-full">
-                              Your browser does not support the video tag.
-                            </video>
-                          )
-                        } else {
-                          return (
-                            <img
-                              key={idx}
-                              src={asset}
-                              alt=""
-                              className="h-full w-full flex-1 object-fill"
-                            />
-                          )
-                        }
-                      }) as ReactNode[]
-                    }
-                  </Carousel>
-                </div>
-                <div className="w-full p-4 md:w-80">
-                  <div className="flex items-center space-x-2">
-                    <Image
-                      src={
-                        currentUser?.data?.imageUrl ??
-                        'https://www.shutterstock.com/image-vector/vector-flat-illustration-grayscale-avatar-600nw-2264922221.jpg'
+                  {isSubmitting ? <Spinner /> : 'Share'}
+                </button>
+              ) : (
+                <span></span>
+              )}
+            </DialogHeader>
+            {/* <hr /> */}
+            <main
+              className={cn('min-h-[500px]', isEmpty(isFileExist) && 'flex place-content-center')}
+            >
+              {isEmpty(isFileExist) && (
+                <section className="flex flex-col items-center justify-center">
+                  <div className="flex flex-col items-center rounded-lg border border-dashed border-core-secondary-100 p-4">
+                    <input className="hidden" />
+                    <UploadPhotoVideoIcon className="h-36 w-40 text-core-secondary" />
+                    <h1 className="text-xl font-medium text-core-secondary">
+                      Drag photos and videos here
+                    </h1>
+                  </div>
+                  <input
+                    type="file"
+                    id="file-upload"
+                    name="file-upload"
+                    accept="image/*, video/*"
+                    style={{ display: 'none' }}
+                    onChange={handleFileChange}
+                    multiple={true}
+                  />
+                  <Button
+                    type="button"
+                    variant="primary"
+                    onClick={() => document.getElementById('file-upload')?.click()}
+                    className="mt-4 px-4 py-1 text-sm"
+                  >
+                    Select from computer
+                  </Button>
+                </section>
+              )}
+              {!isEmpty(isFileExist) && (
+                <section className="relative flex h-full flex-col-reverse md:flex-row">
+                  <div
+                    className={cn(
+                      'flex h-full min-h-[550px] w-full justify-center rounded-bl-2xl',
+                      'max-w-sm items-center overflow-hidden bg-black'
+                    )}
+                  >
+                    <Carousel>
+                      {
+                        fileUrls?.map((asset, idx) => {
+                          if (asset.endsWith('.mp4')) {
+                            return (
+                              <video key={idx} src={asset} autoPlay muted loop className="w-full">
+                                Your browser does not support the video tag.
+                              </video>
+                            )
+                          } else {
+                            return (
+                              <img
+                                key={idx}
+                                src={asset}
+                                alt=""
+                                className="h-full w-full flex-1 object-fill"
+                              />
+                            )
+                          }
+                        }) as ReactNode[]
                       }
-                      width={32}
-                      height={32}
-                      className="rounded-full border-[3px] border-white shadow outline-4"
-                      alt="User Profile"
-                    />
-                    <h2 className="font-semibold">{currentUser?.data?.displayName}</h2>
+                    </Carousel>
                   </div>
-                  <section className="relative mt-2">
-                    <textarea
-                      placeholder="Write a caption"
-                      maxLength={200}
-                      {...register('captions')}
-                      className={cn(
-                        'min-h-[15vh] w-full resize-none border-0 p-0 focus:outline-none focus:ring-0',
-                        'custom-scrollbar text-sm text-core-secondary placeholder:text-core-secondary-200',
-                        'font-medium',
-                        isSubmitting ? 'disabled:cursor-not-allowed disabled:opacity-50' : ''
-                      )}
-                      disabled={isSubmitting}
-                    ></textarea>
-                    <div className="flex items-center justify-between text-core-secondary-200">
-                      <EmojiPicker
+                  <div className="w-full p-4 md:w-80">
+                    <div className="flex items-center space-x-2">
+                      <Image
+                        src={
+                          currentUser?.data?.imageUrl ??
+                          'https://www.shutterstock.com/image-vector/vector-flat-illustration-grayscale-avatar-600nw-2264922221.jpg'
+                        }
+                        width={32}
+                        height={32}
+                        className="rounded-full border-[3px] border-white shadow outline-4"
+                        alt="User Profile"
+                      />
+                      <h2 className="font-semibold">{currentUser?.data?.displayName}</h2>
+                    </div>
+                    <section className="relative mt-2">
+                      <FormField
+                        control={control}
+                        name="captions"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormControl>
+                              <Textarea
+                                placeholder="Write a caption"
+                                maxLength={200}
+                                {...field}
+                                className={cn(
+                                  'bg-none! w-full resize-none rounded-sm border-0 p-2',
+                                  'custom-scrollbar focus-visible:ring-none! text-sm text-core-secondary placeholder:text-core-secondary-200 focus-within:outline-none',
+                                  'font-medium placeholder:font-light',
+                                  isSubmitting
+                                    ? 'disabled:cursor-not-allowed disabled:opacity-50'
+                                    : ''
+                                )}
+                                disabled={isSubmitting}
+                              />
+                            </FormControl>
+                          </FormItem>
+                        )}
+                      />
+                      <div className="-ml-2 flex items-center justify-between text-core-secondary-200">
+                        <EmojiPicker
+                          {...{
+                            handleEmojiSelect,
+                            isSubmitting
+                          }}
+                        />
+                        <span className="text-xs font-normal">{`${
+                          watch('captions')?.length ?? 0
+                        }/200`}</span>
+                      </div>
+                    </section>
+                    <section className="relative z-50 mt-2">
+                      <TagInput
                         {...{
-                          handleEmojiSelect,
-                          isSubmitting
+                          state: {
+                            tags,
+                            setTags
+                          },
+                          data: hashtags?.data
                         }}
                       />
-                      <span className="text-xs font-normal">{`${
-                        watch('captions')?.length ?? 0
-                      }/200`}</span>
-                    </div>
-                  </section>
-                  <section className="relative z-50 mt-2">
-                    <TagInput
-                      {...{
-                        state: {
-                          tags,
-                          setTags
-                        },
-                        data: []
-                      }}
-                    />
-                  </section>
-                  <section className="relative mt-2 flex items-center justify-between space-x-2 text-core-secondary-200">
-                    <input
-                      type="text"
-                      placeholder="Add location"
-                      {...register('location')}
-                      className={cn(
-                        'border-1 m-0 w-full border-[#eee] py-2 text-xs focus:bottom-0 focus:outline-none focus:ring-0',
-                        'font-normal text-core-secondary placeholder:text-core-secondary-200',
-                        isSubmitting ? 'disabled:cursor-not-allowed disabled:opacity-50' : ''
-                      )}
-                      disabled={isSubmitting}
-                    />
-                    <MapPin className="absolute right-2 h-4 w-4 stroke-1 text-core-secondary-200" />
-                  </section>
-                </div>
-              </section>
-            )}
-          </main>
-        </form>
+                    </section>
+                    <section className="mt-2">
+                      <FormField
+                        control={control}
+                        name="location"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormControl>
+                              <div className="relative flex items-center justify-between space-x-2 text-core-secondary-200">
+                                <input
+                                  type="text"
+                                  placeholder="Add location"
+                                  onChange={field.onChange}
+                                  className={cn(
+                                    'border-1 m-0 w-full border-[#eee] py-2 text-xs focus:bottom-0 focus:outline-none focus:ring-0',
+                                    'font-normal text-core-secondary placeholder:text-core-secondary-200',
+                                    isSubmitting
+                                      ? 'disabled:cursor-not-allowed disabled:opacity-50'
+                                      : ''
+                                  )}
+                                  disabled={isSubmitting}
+                                />
+                                <MapPin className="absolute right-2 h-4 w-4 stroke-1 text-core-secondary-200" />
+                              </div>
+                            </FormControl>
+                          </FormItem>
+                        )}
+                      />
+                    </section>
+                    <Collapsible
+                      onOpenChange={handleCollapsibleChange}
+                      defaultOpen
+                      className="mt-2"
+                    >
+                      <CollapsibleTrigger className="inline-flex w-full justify-between py-1.5 text-sm font-bold text-core-secondary-300 outline-none">
+                        Advanced settings
+                        <ChevronDown
+                          className={cn(!advanceSetting ? '-rotate-180 transform' : '', 'h-5 w-5')}
+                        />
+                      </CollapsibleTrigger>
+                      <CollapsibleContent className="space-y-3">
+                        <FormField
+                          control={control}
+                          name="isHideLikeAndCount"
+                          render={({ field }) => (
+                            <FormItem className="flex flex-row items-start justify-between">
+                              <div className="space-y-0.5">
+                                <FormLabel className="text-sm font-normal text-core-secondary-300">
+                                  Hide like and view counts on this post
+                                </FormLabel>
+                                <FormDescription className="text-xs font-light">
+                                  Only you will see the total number of likes and views on this
+                                  post. You change this alter by going to the ... menu at the top of
+                                  the post. To hide like counts on other’s post, go to your account
+                                  settings.
+                                </FormDescription>
+                              </div>
+                              <FormControl>
+                                <Switch checked={field.value} onCheckedChange={field.onChange} />
+                              </FormControl>
+                            </FormItem>
+                          )}
+                        />
+                        <FormField
+                          control={control}
+                          name="isTurnOffComment"
+                          render={({ field }) => (
+                            <FormItem className="flex flex-row items-start justify-between">
+                              <div className="space-y-0.5">
+                                <FormLabel className="text-sm font-normal text-core-secondary-300">
+                                  Turn off commenting
+                                </FormLabel>
+                                <FormDescription className="text-xs font-light">
+                                  You can change this later by going to the ... menu at the top of
+                                  your post.
+                                </FormDescription>
+                              </div>
+                              <FormControl>
+                                <Switch checked={field.value} onCheckedChange={field.onChange} />
+                              </FormControl>
+                            </FormItem>
+                          )}
+                        />
+                      </CollapsibleContent>
+                    </Collapsible>
+                  </div>
+                </section>
+              )}
+            </main>
+          </form>
+        </Form>
       </DialogContent>
     </Dialog>
   )
diff --git a/components/tag-input.tsx b/components/tag-input.tsx
index 8ff9de9..32f7705 100644
--- a/components/tag-input.tsx
+++ b/components/tag-input.tsx
@@ -1,22 +1,25 @@
 import React from 'react'
-import dynamic from 'next/dynamic'
+import { WithContext as ReactTags } from 'react-tag-input'
 
-import { Tag, delimiters, dummyTags } from '~/helpers/tag-helpers'
-
-const ReactTags = dynamic(async () => (await import('react-tag-input')).WithContext, {
-  ssr: false
-})
+import { Tag, delimiters } from '~/helpers/tag-helpers'
 
 export type TagInputProps = {
   state: {
     tags: Tag[]
     setTags: React.Dispatch<React.SetStateAction<Tag[]>>
   }
+  data:
+    | Array<{
+        id: number
+        tag: string
+      }>
+    | undefined
 }
 
 export const TagInput = (props: TagInputProps): JSX.Element => {
   const {
-    state: { tags, setTags }
+    state: { tags, setTags },
+    data
   } = props
 
   const handleDeleteTag = (i: number): void => {
@@ -40,9 +43,9 @@ export const TagInput = (props: TagInputProps): JSX.Element => {
   return (
     <ReactTags
       tags={tags}
-      suggestions={dummyTags?.map((hashtag) => ({
+      suggestions={data?.map((hashtag) => ({
         id: hashtag.id.toString(),
-        text: hashtag.text
+        text: hashtag.tag
       }))}
       delimiters={delimiters}
       handleDelete={handleDeleteTag}
diff --git a/components/ui/form.tsx b/components/ui/form.tsx
new file mode 100644
index 0000000..2052dab
--- /dev/null
+++ b/components/ui/form.tsx
@@ -0,0 +1,169 @@
+/* eslint-disable */
+
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { Slot } from '@radix-ui/react-slot'
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext
+} from 'react-hook-form'
+
+import { cn } from '~/lib/utils'
+import { Label } from '~/components/ui/label'
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>')
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)
+
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const id = React.useId()
+
+    return (
+      <FormItemContext.Provider value={{ id }}>
+        <div ref={ref} className={cn('space-y-2', className)} {...props} />
+      </FormItemContext.Provider>
+    )
+  }
+)
+FormItem.displayName = 'FormItem'
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && 'text-destructive', className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = 'FormLabel'
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = 'FormControl'
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = 'FormDescription'
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn('text-sm font-medium text-destructive', className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = 'FormMessage'
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField
+}
diff --git a/components/ui/label.tsx b/components/ui/label.tsx
new file mode 100644
index 0000000..4b140eb
--- /dev/null
+++ b/components/ui/label.tsx
@@ -0,0 +1,21 @@
+'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/components/ui/switch.tsx b/components/ui/switch.tsx
new file mode 100644
index 0000000..b1f064c
--- /dev/null
+++ b/components/ui/switch.tsx
@@ -0,0 +1,29 @@
+'use client'
+
+import * as React from 'react'
+import * as SwitchPrimitives from '@radix-ui/react-switch'
+
+import { cn } from '~/lib/utils'
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50',
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
new file mode 100644
index 0000000..761c854
--- /dev/null
+++ b/components/ui/textarea.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react'
+
+import { cn } from '~/lib/utils'
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = 'Textarea'
+
+export { Textarea }
diff --git a/package-lock.json b/package-lock.json
index 78ad986..edd2876 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,8 +18,10 @@
         "@radix-ui/react-collapsible": "^1.0.3",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
+        "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-popover": "^1.0.7",
         "@radix-ui/react-slot": "^1.0.2",
+        "@radix-ui/react-switch": "^1.0.3",
         "@sentry/node": "^7.92.0",
         "@tanstack/react-query": "^4.36.1",
         "@trpc/client": "^10.44.1",
@@ -1671,6 +1673,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.0.2.tgz",
+      "integrity": "sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "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-menu": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.0.6.tgz",
@@ -1899,6 +1924,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.0.3.tgz",
+      "integrity": "sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==",
+      "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-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-use-size": "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-use-callback-ref": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
@@ -1969,6 +2023,23 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz",
+      "integrity": "sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-rect": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz",
diff --git a/package.json b/package.json
index b4a7b62..0690cf1 100644
--- a/package.json
+++ b/package.json
@@ -24,8 +24,10 @@
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
     "@sentry/node": "^7.92.0",
     "@tanstack/react-query": "^4.36.1",
     "@trpc/client": "^10.44.1",
diff --git a/server/api/root.ts b/server/api/root.ts
index 4965237..226b4f4 100644
--- a/server/api/root.ts
+++ b/server/api/root.ts
@@ -1,10 +1,12 @@
 import { createTRPCRouter } from './trpc'
 import { userRouter } from './routers/user'
 import { postRouter } from './routers/post'
+import { hashtagRouter } from './routers/hashtag'
 
 export const appRouter = createTRPCRouter({
   user: userRouter,
-  post: postRouter
+  post: postRouter,
+  hashtag: hashtagRouter
 })
 
 export type AppRouter = typeof appRouter
diff --git a/server/api/routers/hashtag.ts b/server/api/routers/hashtag.ts
new file mode 100644
index 0000000..229235c
--- /dev/null
+++ b/server/api/routers/hashtag.ts
@@ -0,0 +1,12 @@
+import { protectedProcedure, createTRPCRouter } from '../trpc'
+
+export const hashtagRouter = createTRPCRouter({
+  getHashtags: protectedProcedure.query(({ ctx }) => {
+    return ctx.db.hashtag.findMany({
+      select: {
+        id: true,
+        tag: true
+      }
+    })
+  })
+})
diff --git a/zod/schema.ts b/zod/schema.ts
index 90c6e66..6a72462 100644
--- a/zod/schema.ts
+++ b/zod/schema.ts
@@ -13,8 +13,8 @@ export const PostSchema = z.object({
   ),
   captions: z.string().max(200).optional(),
   location: z.string().optional(),
-  isHideLikeAndCount: z.boolean().default(false),
-  isTurnOffComment: z.boolean().default(false)
+  isHideLikeAndCount: z.boolean().optional().default(false),
+  isTurnOffComment: z.boolean().optional().default(false)
 })
 
 export type PostSchemaType = z.infer<typeof PostSchema>