diff --git a/src/assets/svg/ToggleOffIcon.tsx b/src/assets/svg/ToggleOffIcon.tsx
deleted file mode 100644
index 71232374..00000000
--- a/src/assets/svg/ToggleOffIcon.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { SVGProps } from 'react';
-const SvgToggleOffIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 31 16" {...props}>
-    <rect width={31} height={16} fill="#D6D6DE" rx={8} />
-    <circle cx={8} cy={8} r={7} fill="#fff" />
-  </svg>
-);
-export default SvgToggleOffIcon;
diff --git a/src/assets/svg/ToggleOnIcon.tsx b/src/assets/svg/ToggleOnIcon.tsx
deleted file mode 100644
index daab4825..00000000
--- a/src/assets/svg/ToggleOnIcon.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { SVGProps } from 'react';
-const SvgToggleOnIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 35 16" {...props}>
-    <rect width={34.263} height={16} fill="#844AFF" rx={8} />
-    <ellipse cx={25.421} cy={8} fill="#fff" rx={7.737} ry={7} />
-  </svg>
-);
-export default SvgToggleOnIcon;
diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts
index d2ed5fed..8758eb10 100644
--- a/src/assets/svg/index.ts
+++ b/src/assets/svg/index.ts
@@ -58,8 +58,6 @@ export { default as SettingIcon } from './SettingIcon';
 export { default as SettingIconSelected } from './SettingIconSelected';
 export { default as ShareIcon } from './ShareIcon';
 export { default as SixDotsIcon } from './SixDotsIcon';
-export { default as ToggleOffIcon } from './ToggleOffIcon';
-export { default as ToggleOnIcon } from './ToggleOnIcon';
 export { default as UncheckedIcon } from './UncheckedIcon';
 export { default as UncheckedIcon2 } from './UncheckedIcon2';
 export { default as UnlinkedIcon } from './UnlinkedIcon';
diff --git a/src/components/ShiftBadge/index.tsx b/src/components/ShiftBadge/index.tsx
index 82de04d5..41f9a7eb 100644
--- a/src/components/ShiftBadge/index.tsx
+++ b/src/components/ShiftBadge/index.tsx
@@ -1,3 +1,4 @@
+import useUIConfig from '@hooks/useUIConfig';
 import { Ref } from 'react';
 import { twMerge } from 'tailwind-merge';
 
@@ -9,6 +10,10 @@ interface Props
 }
 
 function ShiftBadge({ shiftType, className, forwardRef, isOnlyRequest, ...props }: Props) {
+  const {
+    state: { shiftTypeColorStyle },
+  } = useUIConfig();
+
   return (
     <div
       className={twMerge(
@@ -17,9 +22,17 @@ function ShiftBadge({ shiftType, className, forwardRef, isOnlyRequest, ...props
         className
       )}
       ref={forwardRef}
-      style={{
-        backgroundColor: shiftType ? shiftType.color : '#D6D6DE',
-      }}
+      style={
+        shiftTypeColorStyle === 'background'
+          ? {
+              backgroundColor: shiftType ? shiftType.color : '#D6D6DE',
+            }
+          : {
+              border: '.0625rem solid #E7E7EF',
+              backgroundColor: 'white',
+              color: shiftType ? shiftType.color : 'black',
+            }
+      }
       {...props}
     >
       {shiftType ? shiftType.shortName : '-'}
diff --git a/src/components/Toggle/index.tsx b/src/components/Toggle/index.tsx
new file mode 100644
index 00000000..0aaa8d46
--- /dev/null
+++ b/src/components/Toggle/index.tsx
@@ -0,0 +1,27 @@
+interface ToggleProps {
+  isOn: boolean;
+  setIsOn: (isOn: boolean) => void;
+}
+
+const Toggle = ({ isOn, setIsOn }: ToggleProps) => {
+  const handleToggle = () => {
+    setIsOn(!isOn);
+  };
+
+  return (
+    <div
+      onClick={handleToggle}
+      className={`relative h-[1rem] w-[1.875rem] cursor-pointer rounded-[1rem] transition-[0.8s] ${
+        isOn ? 'bg-main-1' : 'bg-sub-4'
+      }`}
+    >
+      <div
+        className={`absolute top-0 h-[1rem] w-[1rem] rounded-[1rem] border-[.0625rem] bg-white transition-[0.8s] ${
+          isOn ? 'left-[100%] translate-x-[-100%] border-main-1' : 'left-0 border-sub-4'
+        }`}
+      />
+    </div>
+  );
+};
+
+export default Toggle;
diff --git a/src/hooks/shift/useEditShift/index.ts b/src/hooks/shift/useEditShift/index.ts
index 7e04d10d..62ef82ce 100644
--- a/src/hooks/shift/useEditShift/index.ts
+++ b/src/hooks/shift/useEditShift/index.ts
@@ -107,6 +107,7 @@ const useEditShift = (activeEffect = false) => {
         if (data === null) return;
 
         if (
+          !foldedLevels ||
           !oldCurrentShiftTeamId ||
           (oldCurrentShiftTeamId && oldCurrentShiftTeamId !== currentShiftTeam?.shiftTeamId)
         ) {
diff --git a/src/hooks/useUIConfig/index.ts b/src/hooks/useUIConfig/index.ts
new file mode 100644
index 00000000..9e5c4186
--- /dev/null
+++ b/src/hooks/useUIConfig/index.ts
@@ -0,0 +1,30 @@
+import { shallow } from 'zustand/shallow';
+import { useUIConfigStore } from './store';
+
+const useUIConfig = () => {
+  const [separateWeekendColor, shiftTypeColorStyle, setState] = useUIConfigStore(
+    (state) => [state.separateWeekendColor, state.shiftTypeColorStyle, state.setState],
+    shallow
+  );
+
+  const handleChangeSeparateWeekendColor = (value: boolean) => {
+    setState('separateWeekendColor', value);
+  };
+
+  const handleShiftTypeColorStyle = (value: typeof shiftTypeColorStyle) => {
+    setState('shiftTypeColorStyle', value);
+  };
+
+  return {
+    state: {
+      separateWeekendColor,
+      shiftTypeColorStyle,
+    },
+    actions: {
+      handleChangeSeparateWeekendColor,
+      handleShiftTypeColorStyle,
+    },
+  };
+};
+
+export default useUIConfig;
diff --git a/src/hooks/useUIConfig/store.ts b/src/hooks/useUIConfig/store.ts
new file mode 100644
index 00000000..dad3c2e8
--- /dev/null
+++ b/src/hooks/useUIConfig/store.ts
@@ -0,0 +1,43 @@
+import { create } from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+import { produce } from 'immer';
+
+interface State {
+  separateWeekendColor: boolean;
+  shiftTypeColorStyle: 'background' | 'text';
+}
+
+interface Store extends State {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  setState: (key: keyof State, value: any) => void;
+  initState: () => void;
+}
+
+const initialState: State = {
+  separateWeekendColor: false,
+  shiftTypeColorStyle: 'background',
+};
+
+export const useUIConfigStore = create<Store>()(
+  devtools(
+    persist(
+      (set, get) => ({
+        ...initialState,
+        setState: (state, value) =>
+          set(
+            produce(get(), (draft) => {
+              draft[state] = value as never;
+            })
+          ),
+        initState: () => set(initialState),
+      }),
+      {
+        name: 'useUIConfigStore',
+        partialize: ({ separateWeekendColor, shiftTypeColorStyle }: Store) => ({
+          separateWeekendColor,
+          shiftTypeColorStyle,
+        }),
+      }
+    )
+  )
+);
diff --git a/src/libs/api/shiftType.ts b/src/libs/api/shiftType.ts
index 681ae265..996fa42c 100644
--- a/src/libs/api/shiftType.ts
+++ b/src/libs/api/shiftType.ts
@@ -5,7 +5,7 @@ const getShiftTypes = async (wardId: number) =>
 
 export type CreateShiftTypeDTO = Pick<
   WardShiftType,
-  'name' | 'shortName' | 'color' | 'startTime' | 'endTime' | 'isOff' | 'isDefault'
+  'name' | 'shortName' | 'color' | 'startTime' | 'endTime' | 'isOff' | 'isDefault' | 'isCounted'
 >;
 const createShiftType = async (wardId: number, createShiftTypeDTO: CreateShiftTypeDTO) =>
   (await axiosInstance.post<WardShiftType>(`/wards/${wardId}/shift-types`, createShiftTypeDTO))
diff --git a/src/main.tsx b/src/main.tsx
index d19fa786..3e46bdd0 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -8,7 +8,15 @@ import { Toaster } from 'react-hot-toast';
 import App from 'App';
 import './index.css';
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      refetchOnMount: 'always',
+      staleTime: 1000 * 10,
+    },
+  },
+});
 
 const container = document.getElementById('root') as HTMLElement;
 const element = (
diff --git a/src/pages/MakeShiftPage/components/CountDutyByDay.tsx b/src/pages/MakeShiftPage/components/CountDutyByDay.tsx
index 1cc6a2c8..52ab4f6c 100644
--- a/src/pages/MakeShiftPage/components/CountDutyByDay.tsx
+++ b/src/pages/MakeShiftPage/components/CountDutyByDay.tsx
@@ -1,49 +1,59 @@
 import useEditShift from '@hooks/shift/useEditShift';
+import useUIConfig from '@hooks/useUIConfig';
 
 function CountDutyByDay() {
   const {
     state: { focus, shift },
   } = useEditShift();
+  const {
+    state: { shiftTypeColorStyle },
+  } = useUIConfig();
 
   return (
     shift && (
       <div className="rounded-[1.25rem] shadow-[0rem_-0.25rem_2.125rem_0rem_#EDE9F5]">
-        {shift.wardShiftTypes.map((wardShiftType, index) => (
-          <div
-            key={index}
-            className="flex h-[2.5rem] items-center justify-center gap-[1.25rem] border-b-[.0625rem] border-[#E0E0E0] last:border-none"
-          >
+        {shift.wardShiftTypes
+          .filter((x) => x.isCounted)
+          .map((wardShiftType, index) => (
             <div
-              className={`flex h-full w-[3.125rem] items-center justify-center font-poppins text-[1.5rem] 
+              key={index}
+              className="flex h-[2.5rem] items-center justify-center gap-[1.25rem] border-b-[.0625rem] border-[#E0E0E0] last:border-none"
+            >
+              <div
+                className={`flex h-full w-[3.125rem] items-center justify-center font-poppins text-[1.5rem] 
             ${index === 0 && 'rounded-tl-[1.25rem]'} 
-            ${index === shift.wardShiftTypes.length - 1 && 'rounded-bl-[1.25rem]'}
+            ${
+              index === shift.wardShiftTypes.filter((x) => x.isCounted).length - 1 &&
+              'rounded-bl-[1.25rem]'
+            }
             `}
-              style={{
-                backgroundColor: wardShiftType.color,
-                color: 'white',
-              }}
-            >
-              {wardShiftType.shortName}
-            </div>
-            <div className="flex h-full px-[1rem] text-center">
-              {shift.days.map((_date, i) => (
-                <p
-                  key={i}
-                  className={`flex w-[2.25rem] flex-1 items-center justify-center font-poppins text-[1.25rem] text-sub-2 ${
-                    focus?.day === i && 'bg-main-4'
-                  }`}
-                >
-                  {
-                    shift.divisionShiftNurses
-                      .flatMap((rows) => rows)
-                      .filter((row) => row.wardShiftList[i] === wardShiftType.wardShiftTypeId)
-                      .length
-                  }
-                </p>
-              ))}
+                style={
+                  shiftTypeColorStyle === 'background'
+                    ? { backgroundColor: wardShiftType.color, color: 'white' }
+                    : { color: wardShiftType.color, backgroundColor: 'white' }
+                }
+              >
+                {wardShiftType.shortName}
+              </div>
+              <div className="flex h-full px-[1rem] text-center">
+                {shift.days.map((_date, i) => (
+                  <p
+                    key={i}
+                    className={`flex w-[2.25rem] flex-1 items-center justify-center font-poppins text-[1.25rem] text-sub-2 ${
+                      focus?.day === i && 'bg-main-4'
+                    }`}
+                  >
+                    {
+                      shift.divisionShiftNurses
+                        .flatMap((rows) => rows)
+                        .filter((row) => row.wardShiftList[i] === wardShiftType.wardShiftTypeId)
+                        .length
+                    }
+                  </p>
+                ))}
+              </div>
             </div>
-          </div>
-        ))}
+          ))}
       </div>
     )
   );
diff --git a/src/pages/MakeShiftPage/components/Panel.tsx b/src/pages/MakeShiftPage/components/Panel.tsx
index d9d117ef..98e190d1 100644
--- a/src/pages/MakeShiftPage/components/Panel.tsx
+++ b/src/pages/MakeShiftPage/components/Panel.tsx
@@ -20,7 +20,7 @@ function Panel() {
         open && 'absolute bottom-[1.25rem] right-[1.25rem] h-[300%] max-h-[50vh]'
       )}
       style={{
-        width: `${(shift.wardShiftTypes.length + 1) * 2 + 1.25}rem`,
+        width: `${(shift.wardShiftTypes.filter((x) => x.isCounted).length + 1) * 2 + 1.25}rem`,
       }}
     >
       <div className="flex h-[2.5rem] w-full border-b-[.0313rem] border-sub-4 font-apple text-base font-medium">
diff --git a/src/pages/MakeShiftPage/components/ShiftCalendar.tsx b/src/pages/MakeShiftPage/components/ShiftCalendar.tsx
index f3dabb0e..2223a749 100644
--- a/src/pages/MakeShiftPage/components/ShiftCalendar.tsx
+++ b/src/pages/MakeShiftPage/components/ShiftCalendar.tsx
@@ -9,6 +9,7 @@ import { event, sendEvent } from 'analytics';
 import useEditShift from '@hooks/shift/useEditShift';
 import useEditShiftTeam from '@hooks/ward/useEditShiftTeam';
 import { DragDropContext, DropResult, Droppable, Draggable } from 'react-beautiful-dnd';
+import useUIConfig from '@hooks/useUIConfig';
 
 export default function ShiftCalendar() {
   const {
@@ -30,6 +31,9 @@ export default function ShiftCalendar() {
     state: { shiftTeams },
     actions: { selectNurse, moveNurseOrder, editDivision },
   } = useEditShiftTeam();
+  const {
+    state: { separateWeekendColor, shiftTypeColorStyle },
+  } = useUIConfig();
 
   const focusedCellRef = useRef<HTMLElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -113,6 +117,10 @@ export default function ShiftCalendar() {
     }
   }, [focus]);
 
+  useEffect(() => {
+    console.log(shift, foldedLevels, wardShiftTypeMap, currentShiftTeam);
+  }, [shift, foldedLevels, wardShiftTypeMap, currentShiftTeam]);
+
   return shift && foldedLevels && wardShiftTypeMap && currentShiftTeam ? (
     <div ref={clickAwayRef} className="flex w-full flex-col">
       <div className="z-20 my-[.75rem] flex h-[1.875rem] items-center gap-[1.25rem] bg-[#FDFCFE]">
@@ -133,19 +141,23 @@ export default function ShiftCalendar() {
             {shift.days.map((item, j) => (
               <p
                 key={j}
-                className={`w-[2.25rem] flex-1 text-center font-poppins text-[1rem]
+                className={`w-[2.25rem] flex-1 rounded-full text-center font-poppins text-[1rem]
                   ${
                     item.dayType === 'saturday'
                       ? j === focus?.day
-                        ? 'rounded-full bg-red text-white'
+                        ? separateWeekendColor
+                          ? 'bg-blue text-white'
+                          : 'bg-red text-white'
+                        : separateWeekendColor
+                        ? 'text-blue'
                         : 'text-red'
                       : item.dayType === 'sunday' || item.dayType === 'holiday'
                       ? j === focus?.day
-                        ? 'rounded-full bg-red text-white'
+                        ? 'bg-red text-white'
                         : 'text-red'
                       : item.dayType === 'workday'
                       ? j === focus?.day
-                        ? 'rounded-full bg-main-1 text-white'
+                        ? 'bg-main-1 text-white'
                         : 'text-sub-2.5'
                       : ''
                   }
@@ -157,21 +169,34 @@ export default function ShiftCalendar() {
           </div>
         </div>
         <div className="flex shrink-0 items-center gap-2 px-[1.5625rem] text-center">
-          {shift.wardShiftTypes.map((shiftType, index) => (
-            <div
-              key={index}
-              className="flex h-[1.5rem] w-[1.5rem] items-center justify-center rounded-[.375rem] p-2 font-poppins text-[1.25rem]"
-              style={{ backgroundColor: shiftType.color, color: 'white' }}
-            >
-              {shiftType.shortName}
-            </div>
-          ))}
+          {shift.wardShiftTypes
+            .filter((x) => x.isCounted)
+            .map((shiftType, index) => (
+              <div
+                key={index}
+                className="flex h-[1.5rem] w-[1.5rem] items-center justify-center rounded-[.375rem] p-2 font-poppins text-[1.25rem]"
+                style={
+                  shiftTypeColorStyle === 'background'
+                    ? { backgroundColor: shiftType.color, color: 'white' }
+                    : { color: shiftType.color, backgroundColor: 'white' }
+                }
+              >
+                {shiftType.shortName}
+              </div>
+            ))}
           <div
             className="flex h-[1.5rem] w-[1.5rem] items-center justify-center rounded-[.375rem] bg-red p-2 font-poppins text-[0.8rem] text-white"
-            style={{
-              backgroundColor: shift.wardShiftTypes.find((x) => x.name === '오프')?.color,
-              color: 'white',
-            }}
+            style={
+              shiftTypeColorStyle === 'background'
+                ? {
+                    backgroundColor: shift.wardShiftTypes.find((x) => x.name === '오프')?.color,
+                    color: 'white',
+                  }
+                : {
+                    color: shift.wardShiftTypes.find((x) => x.name === '오프')?.color,
+                    backgroundColor: 'white',
+                  }
+            }
           >
             WO
           </div>
@@ -315,7 +340,15 @@ export default function ShiftCalendar() {
                                         <div
                                           key={j}
                                           className={`group relative flex h-full w-[2.25rem] flex-1 items-center justify-center px-[.25rem] 
-                              ${isSunday ? 'bg-[#FFE1E680]' : isSaturday ? 'bg-[#FFE1E680]' : ''} 
+                              ${
+                                isSunday
+                                  ? 'bg-[#FFE1E680]'
+                                  : isSaturday
+                                  ? separateWeekendColor
+                                    ? 'bg-[#E1E5FF80]'
+                                    : 'bg-[#FFE1E680]'
+                                  : ''
+                              } 
                               ${j === focus?.day && 'bg-main-4'}`}
                                         >
                                           {!readonly && showLayer.fault && fault && (
@@ -368,18 +401,20 @@ export default function ShiftCalendar() {
                                     className="relative flex shrink-0 items-center gap-2 px-[1.5625rem] text-center"
                                     key={rowIndex}
                                   >
-                                    {shift?.wardShiftTypes.map((wardShiftType, index) => (
-                                      <div
-                                        key={index}
-                                        className="w-[1.5rem] text-center font-poppins text-[1.25rem] text-sub-2"
-                                      >
-                                        {
-                                          row.wardShiftList.filter(
-                                            (current) => current === wardShiftType.wardShiftTypeId
-                                          ).length
-                                        }
-                                      </div>
-                                    ))}
+                                    {shift?.wardShiftTypes
+                                      .filter((x) => x.isCounted)
+                                      .map((wardShiftType, index) => (
+                                        <div
+                                          key={index}
+                                          className="w-[1.5rem] text-center font-poppins text-[1.25rem] text-sub-2"
+                                        >
+                                          {
+                                            row.wardShiftList.filter(
+                                              (current) => current === wardShiftType.wardShiftTypeId
+                                            ).length
+                                          }
+                                        </div>
+                                      ))}
                                     <div className="w-[1.5rem] text-center font-poppins text-[1.25rem] text-sub-2">
                                       {
                                         row.wardShiftList.filter(
@@ -417,7 +452,7 @@ export default function ShiftCalendar() {
                                     : level !== shift.divisionShiftNurses.length - 1 &&
                                       !readonly && (
                                         <div
-                                          className="absolute bottom-0 w-full"
+                                          className="absolute bottom-0 h-[.0625rem] w-full bg-red opacity-0 hover:opacity-100"
                                           onClick={(e) => {
                                             e.stopPropagation();
                                             editDivision(
diff --git a/src/pages/MakeShiftPage/components/Toolbar.tsx b/src/pages/MakeShiftPage/components/Toolbar.tsx
index cca06b2e..57995da0 100644
--- a/src/pages/MakeShiftPage/components/Toolbar.tsx
+++ b/src/pages/MakeShiftPage/components/Toolbar.tsx
@@ -25,6 +25,7 @@ import SetConstraint from './editWard/SetConstraint';
 import SetShiftType from './editWard/SetShiftType';
 import Select from '@components/Select';
 import { createPortal } from 'react-dom';
+import SetDesignTheme from './editWard/SetDesignTheme';
 
 function Toolbar() {
   const {
@@ -40,7 +41,9 @@ function Toolbar() {
   } = useEditShift();
 
   const [openInfo, setOpenInfo] = useState(false);
-  const [currentSetup, setCurrentSetup] = useState<'constraint' | 'shiftType' | null>(null);
+  const [currentSetup, setCurrentSetup] = useState<
+    'constraint' | 'shiftType' | 'designTheme' | null
+  >(null);
 
   return (
     <div className="sticky top-0 z-30 flex h-[6.125rem] w-full items-center bg-[#FDFCFE] pb-[.75rem] pl-[1.25rem] pt-[1.875rem]">
@@ -83,7 +86,7 @@ function Toolbar() {
       {currentSetup !== null &&
         createPortal(
           <Draggable onStop={() => sendEvent(event.move_edit_modal)}>
-            <div className="absolute left-[17.625rem] top-[5.5rem] z-[1001] flex w-[38.75rem] flex-col rounded-[1.25rem] bg-white shadow-shadow-3">
+            <div className="absolute left-[17.625rem] top-[5.5rem] z-[1001] flex flex-col rounded-[1.25rem] bg-white shadow-shadow-3">
               <div className="flex h-[2.75rem] cursor-move items-center rounded-t-[1.25rem] bg-sub-5">
                 <div
                   className={`flex h-full w-[9.375rem] cursor-pointer items-center justify-center rounded-t-[1.25rem] font-apple text-base 
@@ -93,10 +96,6 @@ function Toolbar() {
                 >
                   제약 조건
                 </div>
-                <CancelIcon
-                  className="absolute right-[.5rem] h-[1.5rem] w-[1.5rem] cursor-pointer"
-                  onClick={() => setCurrentSetup(null)}
-                />
                 <div
                   className={`flex h-full w-[9.375rem] cursor-pointer items-center justify-center rounded-t-[1.25rem] font-apple text-base 
                   ${currentSetup === 'shiftType' ? 'bg-white text-main-1' : 'text-sub-3'}
@@ -105,9 +104,22 @@ function Toolbar() {
                 >
                   근무 형태
                 </div>
+                <div
+                  className={`flex h-full w-[9.375rem] cursor-pointer items-center justify-center rounded-t-[1.25rem] font-apple text-base 
+                  ${currentSetup === 'designTheme' ? 'bg-white text-main-1' : 'text-sub-3'}
+                `}
+                  onClick={() => setCurrentSetup('designTheme')}
+                >
+                  디자인 테마
+                </div>
+                <CancelIcon
+                  className="absolute right-[.5rem] h-[1.5rem] w-[1.5rem] cursor-pointer"
+                  onClick={() => setCurrentSetup(null)}
+                />
               </div>
               {currentSetup === 'constraint' && <SetConstraint />}
               {currentSetup === 'shiftType' && <SetShiftType />}
+              {currentSetup === 'designTheme' && <SetDesignTheme />}
             </div>
           </Draggable>,
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
diff --git a/src/pages/MakeShiftPage/components/editWard/CreateShiftModal.tsx b/src/pages/MakeShiftPage/components/editWard/CreateShiftModal.tsx
index 6d8a1223..d25687cc 100644
--- a/src/pages/MakeShiftPage/components/editWard/CreateShiftModal.tsx
+++ b/src/pages/MakeShiftPage/components/editWard/CreateShiftModal.tsx
@@ -23,6 +23,7 @@ function CreateShiftModal({ open, shiftType, close, onSubmit, onDelete }: Props)
     isOff: false,
     isDefault: false,
     shortName: '',
+    isCounted: true,
   };
   const [writeShift, setWriteShift] = useState(initialValue);
 
diff --git a/src/pages/MakeShiftPage/components/editWard/SetConstraint.tsx b/src/pages/MakeShiftPage/components/editWard/SetConstraint.tsx
index 4a759e26..f7d38a51 100644
--- a/src/pages/MakeShiftPage/components/editWard/SetConstraint.tsx
+++ b/src/pages/MakeShiftPage/components/editWard/SetConstraint.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { ArrowDownIcon, ToggleOffIcon, ToggleOnIcon } from '@assets/svg';
+import { ArrowDownIcon } from '@assets/svg';
+import Toggle from '@components/Toggle';
 import useEditShift from '@hooks/shift/useEditShift';
 import { event, sendEvent } from 'analytics';
 import { match } from 'ts-pattern';
@@ -36,7 +37,7 @@ const SetConstraint = () => {
   return (
     checkFaultOptions &&
     wardConstraint && (
-      <div className="flex w-full flex-col font-apple">
+      <div className="flex w-[36.25rem] flex-col font-apple">
         {Object.entries(checkFaultOptions).map(([key, { label, value, isActive }]) => (
           <div
             key={key}
@@ -138,35 +139,23 @@ const SetConstraint = () => {
                 </div>
               ))
               .otherwise(() => null)}
-            {isActive ? (
-              <div
-                className="ml-auto flex w-[7.5625rem] cursor-pointer items-center justify-between"
-                onClick={() => {
+            <div className="ml-auto flex w-[7.5625rem] cursor-pointer items-center justify-between">
+              <Toggle
+                isOn={isActive}
+                setIsOn={() => {
                   updateConstraint({
                     ...wardConstraint,
-                    [key]: false,
+                    [key]: isActive ? false : true,
                   });
-                  sendEvent(event.inactive_constraint);
+                  sendEvent(isActive ? event.inactive_constraint : event.active_constraint);
                 }}
-              >
-                <ToggleOnIcon className="h-[1rem] w-[1.875rem]" />
+              />
+              {isActive ? (
                 <p className="flex-1 text-center text-[.75rem] text-sub-3">근무표 적용</p>
-              </div>
-            ) : (
-              <div
-                className="ml-auto flex w-[7.5625rem] cursor-pointer items-center justify-between"
-                onClick={() => {
-                  updateConstraint({
-                    ...wardConstraint,
-                    [key]: true,
-                  });
-                  sendEvent(event.active_constraint);
-                }}
-              >
-                <ToggleOffIcon className="h-[1rem] w-[1.875rem]" />
+              ) : (
                 <p className="flex-1 text-center text-[.75rem] text-sub-3">근무표 미적용</p>
-              </div>
-            )}
+              )}
+            </div>
           </div>
         ))}
       </div>
diff --git a/src/pages/MakeShiftPage/components/editWard/SetDesignTheme.tsx b/src/pages/MakeShiftPage/components/editWard/SetDesignTheme.tsx
new file mode 100644
index 00000000..1b478e09
--- /dev/null
+++ b/src/pages/MakeShiftPage/components/editWard/SetDesignTheme.tsx
@@ -0,0 +1,57 @@
+import Toggle from '@components/Toggle';
+import useUIConfig from '@hooks/useUIConfig';
+
+const SetDesignTheme = () => {
+  const {
+    state: { separateWeekendColor, shiftTypeColorStyle },
+    actions: { handleChangeSeparateWeekendColor, handleShiftTypeColorStyle },
+  } = useUIConfig();
+
+  return (
+    <div className="flex w-[36.25rem] flex-col">
+      <div className="flex h-[4.625rem] items-center border-b-[.0313rem] border-sub-4.5 px-[2.5rem] last:border-none">
+        <p className="font-apple text-[1.25rem] text-sub-1">토/일 배경색 구분</p>
+        <div className="ml-auto flex w-[7.5625rem] cursor-pointer items-center justify-between">
+          <Toggle
+            isOn={separateWeekendColor}
+            setIsOn={() => {
+              handleChangeSeparateWeekendColor(separateWeekendColor ? false : true);
+            }}
+          />
+          {separateWeekendColor ? (
+            <p className="flex-1 text-center text-[.75rem] text-sub-3">근무표 적용</p>
+          ) : (
+            <p className="flex-1 text-center text-[.75rem] text-sub-3">근무표 미적용</p>
+          )}
+        </div>
+      </div>
+      <div className="border-bg flex h-[4.625rem] items-center border-b-[.0313rem] px-[2.5rem] last:border-none">
+        <p className="font-apple text-[1.25rem] text-sub-1">토/일 배경색 구분</p>
+        <div className="bg-bg ml-auto flex h-[2.75rem] w-[8rem] cursor-pointer justify-between gap-[.25rem] rounded-[.3125rem] border-[.0625rem] border-main-4 p-[.25rem]">
+          <div
+            className={`flex flex-1 items-center justify-center rounded-[.3125rem] font-apple text-[1.25rem] font-medium ${
+              shiftTypeColorStyle === 'background'
+                ? 'bg-sub-3 text-white'
+                : 'border-[.0625rem] border-sub-4.5 bg-white text-sub-3'
+            }`}
+            onClick={() => handleShiftTypeColorStyle('background')}
+          >
+            배경
+          </div>
+          <div
+            className={`flex flex-1 items-center justify-center rounded-[.3125rem] font-apple text-[1.25rem] font-medium ${
+              shiftTypeColorStyle === 'text'
+                ? 'bg-sub-3 text-white'
+                : 'border-[.0625rem] border-sub-4.5 bg-white text-sub-3'
+            }`}
+            onClick={() => handleShiftTypeColorStyle('text')}
+          >
+            글자
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SetDesignTheme;
diff --git a/src/pages/MakeShiftPage/components/editWard/SetShiftType.tsx b/src/pages/MakeShiftPage/components/editWard/SetShiftType.tsx
index 85753194..8343d1fa 100644
--- a/src/pages/MakeShiftPage/components/editWard/SetShiftType.tsx
+++ b/src/pages/MakeShiftPage/components/editWard/SetShiftType.tsx
@@ -29,13 +29,14 @@ function SetShiftType() {
   };
 
   return (
-    <div className="relative h-fit rounded-[1.25rem]">
+    <div className="relative h-fit w-[44.8125rem] rounded-[1.25rem]">
       <div className="mt-[1.25rem] flex items-center text-center font-apple text-[.875rem] text-sub-2.5">
         <p className="flex-[2]">근무 명</p>
         <p className="flex-1">약자</p>
         <p className="flex-[3]">근무 시간</p>
         <p className="flex-1">색상</p>
         <p className="flex-1">유형</p>
+        <p className="flex-1">카운트</p>
         <p className="flex-1">수정</p>
       </div>
       {ward?.wardShiftTypes.map((shiftType, index) => (
@@ -107,6 +108,19 @@ function SetShiftType() {
               {shiftType.isOff ? '휴가' : '근무'}
             </div>
           </div>
+          <div className="flex flex-1 justify-center">
+            <div
+              className="cursor-pointer rounded-[1.25rem] border-[.0313rem] border-main-2 px-[.75rem] py-[.3125rem] font-apple text-[.875rem] text-main-2"
+              onClick={() => {
+                editShiftType(shiftType.wardShiftTypeId, {
+                  ...shiftType,
+                  isCounted: !shiftType.isCounted,
+                });
+              }}
+            >
+              {shiftType.isCounted ? 'On' : 'Off'}
+            </div>
+          </div>
           <div className="flex flex-1 justify-center">
             <PenIcon
               className="h-[2.25rem] w-[2.25rem] cursor-pointer"
diff --git a/src/pages/MakeShiftPage/index.tsx b/src/pages/MakeShiftPage/index.tsx
index af9368fd..f7495a13 100644
--- a/src/pages/MakeShiftPage/index.tsx
+++ b/src/pages/MakeShiftPage/index.tsx
@@ -16,7 +16,9 @@ const MakeShiftPage = () => {
       <div
         className="sticky bottom-0 z-20 flex items-stretch gap-[1.25rem] bg-main-bg py-[1.25rem] pl-[15.9375rem]"
         style={{
-          height: shift ? `${shift.wardShiftTypes.length * 2.5 + 2.5}rem` : '0',
+          height: shift
+            ? `${shift.wardShiftTypes.filter((x) => x.isCounted).length * 2.5 + 2.5}rem`
+            : '0',
         }}
       >
         <CountDutyByDay />