diff --git a/package-lock.json b/package-lock.json
index 03bb76b..50f0024 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "axios": "^1.7.9",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "date-fns": "^4.1.0",
         "dayjs": "^1.11.13",
         "es-toolkit": "^1.32.0",
         "lenis": "^1.1.20",
@@ -1890,9 +1891,10 @@
       }
     },
     "node_modules/date-fns": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
-      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/kossnocorp"
@@ -4721,6 +4723,16 @@
         "react-dom": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc"
       }
     },
+    "node_modules/react-datepicker/node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/react-dom": {
       "version": "19.0.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",
diff --git a/package.json b/package.json
index 786d931..c6f4924 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "axios": "^1.7.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",
     "es-toolkit": "^1.32.0",
     "lenis": "^1.1.20",
diff --git a/src/app/(after-login)/form/page.tsx b/src/app/(after-login)/form/page.tsx
index bb089a7..a4df8cb 100644
--- a/src/app/(after-login)/form/page.tsx
+++ b/src/app/(after-login)/form/page.tsx
@@ -66,7 +66,7 @@ export default function FormPage() {
 
   return (
     <div className='p-10'>
-      <div className='rounded-md bg-white p-10'>
+      <div className='max-w-screen-md rounded-md bg-white p-10'>
         <div className='mb-10 grid gap-3'>
           {/* input sample : controlled */}
           <Input
diff --git a/src/assets/css/datepicker.css b/src/assets/css/datepicker.css
new file mode 100644
index 0000000..f7953ee
--- /dev/null
+++ b/src/assets/css/datepicker.css
@@ -0,0 +1,185 @@
+.react-datepicker {
+  border-color: #e5e7eb;
+  display: flex;
+  font-family: inherit;
+  box-shadow:0 0 12px rgba(0,0,0,0.08)
+}
+
+.react-datepicker__month-container {
+  float: none;
+  flex: 1;
+  padding: 4px;
+}
+
+.react-datepicker-popper .react-datepicker__triangle,
+.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
+  stroke: #e5e7eb;
+  fill: #fff;
+  color: #fff;
+}
+
+.react-datepicker__header {
+  border: none;
+  background: transparent;
+  padding: 0;
+}
+
+.react-datepicker__header--time, 
+.react-datepicker__time-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.react-datepicker__header.react-datepicker__header--time {
+  display:none;
+}
+
+.react-datepicker__time{
+  height:100%;
+  position:relative;
+}
+
+.react-datepicker__time-list{
+  width:100%;
+  height:100% !important;
+  position:absolute;
+  top:0;
+  left:0;
+
+}
+
+.react-datepicker__time-list-item {
+  border: 1px solid #e5e7eb;
+  border-radius: 5px;
+}
+.react-datepicker__time-list-item:hover{
+  border-color:#ccc;
+  transition:border 0.2s
+}
+
+.react-datepicker__time-list-item + .react-datepicker__time-list-item {
+  margin-top: 4px;
+}
+
+.react-datepicker__day--outside-month {
+  opacity: 0.2;
+}
+
+.react-datepicker .saturday:not([aria-selected="true"]) {
+  color: blue;
+}
+
+.react-datepicker .sunday:not([aria-selected="true"]) {
+  color: red;
+}
+
+
+.react-datepicker__day-name, 
+.react-datepicker__day, 
+.react-datepicker__time-name {
+  width: 28px;
+  height: 28px;
+  line-height: 28px;
+  font-size: 12px;
+}
+
+.react-datepicker__time-container {
+  padding: 4px;
+  float: none;
+  width: 80px;
+  background: #f8f9fa;
+  border-left: 1px solid #eee;
+}
+
+.react-datepicker__time-container * {
+  box-sizing: border-box !important;
+}
+
+.react-datepicker__time-container .react-datepicker__time {
+  background: transparent;
+}
+
+.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
+  width: 100%;
+  padding: 0;
+}
+
+.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
+  padding-right: 2px;
+}
+
+.react-datepicker__time-list::-webkit-scrollbar {
+  width: 2px;
+}
+
+.react-datepicker__time-list::-webkit-scrollbar-thumb {
+  background: #333;
+}
+
+.react-datepicker__time-list::-webkit-scrollbar-track {
+  background: #eee;
+}
+
+.react-datepicker__day--selected, 
+.react-datepicker__day--in-selecting-range, 
+.react-datepicker__day--in-range, 
+.react-datepicker__month-text--selected, 
+.react-datepicker__month-text--in-selecting-range, 
+.react-datepicker__month-text--in-range, 
+.react-datepicker__quarter-text--selected, 
+.react-datepicker__quarter-text--in-selecting-range, 
+.react-datepicker__quarter-text--in-range, 
+.react-datepicker__year-text--selected, 
+.react-datepicker__year-text--in-selecting-range, 
+.react-datepicker__year-text--in-range, 
+.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
+  color:#fff;
+  background: #5534da;
+}
+
+.react-datepicker__day--selected:not([aria-disabled=true]):hover, 
+.react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover, 
+.react-datepicker__day--in-range:not([aria-disabled=true]):hover, 
+.react-datepicker__month-text--selected:not([aria-disabled=true]):hover, 
+.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover, 
+.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover, 
+.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover, 
+.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover, 
+.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover, 
+.react-datepicker__year-text--selected:not([aria-disabled=true]):hover, 
+.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover, 
+.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover{
+  background: #2C0CAC;
+}
+
+.react-datepicker__day--keyboard-selected, 
+.react-datepicker__month-text--keyboard-selected, 
+.react-datepicker__quarter-text--keyboard-selected, 
+.react-datepicker__year-text--keyboard-selected{
+  background: #5534da10;
+}
+
+.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover{
+  color:#fff;
+  background: #5534da;
+}
+
+.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:not([aria-selected="true"]) {
+  height: 34px;
+  background: #fff;
+}
+
+.react-datepicker__day-names {
+  margin: 0;
+}
+
+.react-datepicker__day-name {
+  opacity: 0.5;
+  font-weight: 500;
+}
+
+.react-datepicker__month {
+  margin-top: 0;
+}
+
diff --git a/src/assets/icons/circle_arrow_left.svg b/src/assets/icons/circle_arrow_left.svg
new file mode 100644
index 0000000..2faa372
--- /dev/null
+++ b/src/assets/icons/circle_arrow_left.svg
@@ -0,0 +1 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 20 20" aria-hidden="true" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.707-10.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L9.414 11H13a1 1 0 100-2H9.414l1.293-1.293z" clip-rule="evenodd"></path></svg>
diff --git a/src/assets/icons/circle_arrow_right.svg b/src/assets/icons/circle_arrow_right.svg
new file mode 100644
index 0000000..07b3c56
--- /dev/null
+++ b/src/assets/icons/circle_arrow_right.svg
@@ -0,0 +1 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 20 20" aria-hidden="true" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd"></path></svg>
diff --git a/src/components/ui/Field/DateInput.tsx b/src/components/ui/Field/DateInput.tsx
index 24426a4..5c1e115 100644
--- a/src/components/ui/Field/DateInput.tsx
+++ b/src/components/ui/Field/DateInput.tsx
@@ -1,11 +1,21 @@
 import { InputHTMLAttributes, useId } from 'react';
 import Image from 'next/image';
-import DatePicker from 'react-datepicker';
+import dayjs from 'dayjs';
+import DatePicker, { ReactDatePickerCustomHeaderProps, registerLocale } from 'react-datepicker';
+import { ko } from 'date-fns/locale/ko';
+import { getMonth, getYear } from 'date-fns';
 import { cn } from '@/utils/helper';
 import { BaseError, baseErrorClassName, baseFieldClassName, BaseItem, BaseLabel } from './Base';
 import calendarIcon from '@/assets/icons/calendar.svg';
 import { BaseField } from './types';
+import arrowLeft from '@/assets/icons/circle_arrow_left.svg';
+import arrowRight from '@/assets/icons/circle_arrow_right.svg';
 import 'react-datepicker/dist/react-datepicker.css';
+import '@/assets/css/datepicker.css';
+
+registerLocale('ko', ko);
+
+type DayOfWeek = 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday' | 'sunday';
 
 type DateInputProps = BaseField &
   Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> & {
@@ -13,6 +23,10 @@ type DateInputProps = BaseField &
     onChange: (value: Date | null) => void;
   };
 
+const getDayClassName = (date: Date) => {
+  return dayjs(date).format('dddd').toLowerCase() as DayOfWeek;
+};
+
 export function DateInput({ label, error, value, onChange, onBlur, placeholder, required, className, disabled, readOnly }: DateInputProps) {
   const id = useId();
 
@@ -25,7 +39,6 @@ export function DateInput({ label, error, value, onChange, onBlur, placeholder,
       )}
       <div className='relative grid'>
         <Image src={calendarIcon} alt='날짜선택' className={cn('pointer-events-none absolute left-4 top-1/2 z-20 h-auto w-4 -translate-y-1/2 opacity-50', value && 'opacity-100')} />
-        {/* TODO: DatePicker 스타일링 및 locale 설정 예정 */}
         <DatePicker //
           id={id}
           selected={value}
@@ -40,9 +53,29 @@ export function DateInput({ label, error, value, onChange, onBlur, placeholder,
           placeholderText={placeholder}
           disabled={disabled}
           readOnly={readOnly}
+          locale='ko'
+          timeCaption='시간'
+          dayClassName={getDayClassName}
+          renderCustomHeader={(props) => <CustomHeader {...props} />}
         />
       </div>
       {error && <BaseError>{error}</BaseError>}
     </BaseItem>
   );
 }
+
+function CustomHeader({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }: ReactDatePickerCustomHeaderProps) {
+  return (
+    <div className='mb-2 flex h-10 items-center justify-between rounded-md border border-gray-20 px-4 py-2 shadow-[0_6px_12px_rgba(0,0,0,0.04)]'>
+      <button type='button' className='text-xs disabled:opacity-30' onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>
+        <Image src={arrowLeft} alt='이전달' className='h-5 w-5' />
+      </button>
+      <div className='text-md font-medium'>
+        {getYear(date)}년 {getMonth(date) + 1}월
+      </div>
+      <button type='button' className='text-xs disabled:opacity-30' onClick={increaseMonth} disabled={nextMonthButtonDisabled}>
+        <Image src={arrowRight} alt='다음달' className='h-5 w-5' />
+      </button>
+    </div>
+  );
+}