diff --git a/src/apis/dashboards/index.ts b/src/apis/dashboards/index.ts
index 9e100e2..84d1dfb 100644
--- a/src/apis/dashboards/index.ts
+++ b/src/apis/dashboards/index.ts
@@ -1,4 +1,4 @@
-import axiosHelper from '@/utils/network/axiosHelper';
+import axiosClientHelper from '@/utils/network/axiosClientHelper';
 import {
   BasePaginationParams,
   Dashboard,
@@ -14,7 +14,7 @@ import {
 
 // dashboard 목록 조회
 export const getDashboards = async ({ cursorId, page, size, navigationMethod }: GetDashboardsParams) => {
-  const response = await axiosHelper.get<DashboardsResponse>('/dashboards', {
+  const response = await axiosClientHelper.get<DashboardsResponse>('/dashboards', {
     params: {
       cursorId,
       page: page || 1,
@@ -32,7 +32,7 @@ export const getDashboards = async ({ cursorId, page, size, navigationMethod }:
 
 // dashboard 생성
 export const createDashboard = async (data: DashboardFormType) => {
-  const response = await axiosHelper.post<Dashboard>('/dashboards', data);
+  const response = await axiosClientHelper.post<Dashboard>('/dashboards', data);
 
   const result = dashboardSchema.safeParse(response.data);
   if (!result.success) {
@@ -43,7 +43,7 @@ export const createDashboard = async (data: DashboardFormType) => {
 
 // dashboard 상세 조회
 export const getDashboardDetails = async (id: number) => {
-  const response = await axiosHelper.get<Dashboard>(`/dashboards/${id}`);
+  const response = await axiosClientHelper.get<Dashboard>(`/dashboards/${id}`);
 
   const result = dashboardSchema.safeParse(response.data);
   if (!result.success) {
@@ -54,7 +54,7 @@ export const getDashboardDetails = async (id: number) => {
 
 // dashboard 수정
 export const updateDashboard = async (id: number, data: DashboardFormType) => {
-  const response = await axiosHelper.put<Dashboard>(`/dashboards/${id}`, data);
+  const response = await axiosClientHelper.put<Dashboard>(`/dashboards/${id}`, data);
 
   const result = dashboardSchema.safeParse(response.data);
   if (!result.success) {
@@ -65,14 +65,14 @@ export const updateDashboard = async (id: number, data: DashboardFormType) => {
 
 // dashboard 삭제
 export const deleteDashboard = async (id: number) => {
-  const response = await axiosHelper.delete<void>(`/dashboards/${id}`);
+  const response = await axiosClientHelper.delete<void>(`/dashboards/${id}`);
   return response.data;
 };
 
 // TODO : UserSchema 추가이후, Invitation schema가 작성되면 응답 검증 로직 추가 필요
 // dashboard 초대 불러오기
 export const getDashboardInvitations = async (id: number, { page, size }: BasePaginationParams) => {
-  const response = await axiosHelper.get<DashboardInvitation>(`/dashboards/${id}/invitations`, {
+  const response = await axiosClientHelper.get<DashboardInvitation>(`/dashboards/${id}/invitations`, {
     params: {
       page: page || 1,
       size: size || 10,
@@ -84,12 +84,12 @@ export const getDashboardInvitations = async (id: number, { page, size }: BasePa
 // TODO : UserSchema 추가이후, Invitation schema가 작성되면 응답 검증 로직 추가 필요
 // dashboard 초대
 export const inviteDashboard = async (id: number, data: InviteDashboardType) => {
-  const response = await axiosHelper.post<DashboardInvitationResponse>(`/dashboards/${id}/invitations`, data);
+  const response = await axiosClientHelper.post<DashboardInvitationResponse>(`/dashboards/${id}/invitations`, data);
   return response.data;
 };
 
 // dashboard 초대 취소
 export const cancelDashboardInvitation = async (id: number, invitationId: number) => {
-  const response = await axiosHelper.delete<void>(`/dashboards/${id}/invitations/${invitationId}`);
+  const response = await axiosClientHelper.delete<void>(`/dashboards/${id}/invitations/${invitationId}`);
   return response.data;
 };
diff --git a/src/components/dashboard/CreateDashboard.tsx b/src/components/dashboard/CreateDashboard.tsx
index 376683d..22e57f7 100644
--- a/src/components/dashboard/CreateDashboard.tsx
+++ b/src/components/dashboard/CreateDashboard.tsx
@@ -6,6 +6,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import useAlert from '@/hooks/useAlert';
 import { Modal, ModalContent, ModalFooter, ModalHandle, ModalHeader } from '@/components/ui/Modal/Modal';
 import Button from '@/components/ui/Button/Button';
+import { Input } from '@/components/ui/Field';
 import ColorPicker from '@/components/ui/Chip/ColorPicker';
 import { useDashboardMutation } from '@/apis/dashboards/queries';
 import { dashboardFormSchema, DashboardFormType } from '@/apis/dashboards/types';
@@ -52,14 +53,13 @@ const CreateDashboard = forwardRef<ModalHandle>((props, ref) => {
       <ModalContent>
         <form onSubmit={handleSubmit(onSubmit)}>
           <ModalHeader>새로운 대시보드</ModalHeader>
-          <div className='grid gap-4'>
-            {/* TODO : 공용 Field 컴포넌트 개발후 교체 필요 */}
-            <label className='grid gap-3'>
-              <span>대시보드 이름</span>
-              <input type='text' {...register('title')} className='h-10 rounded-md border px-2' />
-            </label>
-            <div>{errors.title?.message}</div>
-
+          <div className='grid gap-6 py-2'>
+            <Input //
+              label='대시보드 이름'
+              error={errors.title?.message}
+              placeholder='대시보드 이름을 입력해주세요'
+              {...register('title')}
+            />
             <Controller //
               control={control}
               name='color'