diff --git a/src/components/HeaderTitle.vue b/src/components/HeaderTitle.vue
index 6ea4be7..32c41ae 100644
--- a/src/components/HeaderTitle.vue
+++ b/src/components/HeaderTitle.vue
@@ -3,7 +3,9 @@
 	const router = useRouter()
 
 	defineProps({
-		title: { type: String, default: 'AI STYLING ASSISTANT' }
+		title: { type: String, default: 'AI STYLING ASSISTANT' },
+		light: { type: Boolean,default:false },
+		hasSetting: { type: Boolean,default:false }
 	})
 
 	defineEmits(['clickReturn'])
@@ -15,9 +17,10 @@
 </script>
 
 <template>
-	<div class="header-title">
+	<div class="header-title" :class="{ 'light': light }">
 		<div class="return" @click="handleClickReturn"><SvgIcon name="return" size="34" /></div>
 		<span class="title">{{ title }}</span>
+		<div class="setting" v-if="hasSetting"><SvgIcon name="setting" size="34" /></div>
 	</div>
 </template>
 
@@ -32,6 +35,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		
 		> .return {
 			position: absolute;
 			left: 3.2rem;
@@ -43,5 +47,16 @@
 			color: var(--header-title-color, #ffffff);
 			font-family: 'boskaRegular';
 		}
+		>.setting{
+			position: absolute;
+			right: 3.2rem;
+			display: inline-block;
+		}
+	
+		&.light {
+			--header-title-color: #000000;
+			--svg-icon-color: #000000;
+			--header-title-background: #ffffff;
+		}
 	}
 </style>