diff --git a/src/components/Step/StepItem.tsx b/src/components/Step/StepItem.tsx
index 4fcdcbf..cb8f1c9 100644
--- a/src/components/Step/StepItem.tsx
+++ b/src/components/Step/StepItem.tsx
@@ -8,9 +8,9 @@ export interface StepItemProps {
 
 const StepItem: FC<StepItemProps> = ({ prompt, step, active = false }) => {
     return (
-        <div className={`flex flex-col gap-y-2 ${active ? "outline-teal-700" : ""} text-center`}>
+        <div className={`flex flex-col gap-y-2 text-center`}>
             <div>
-                <h5 className="inline-block w-fit p-2 rounded-full font-noto text-white text-lg bg-teal-500">
+                <h5 className={`inline-block w-fit p-2 rounded-full font-noto text-white text-lg bg-teal-500 ${active ? "outline-teal-700 outline-2 outline-offset-4 outline" : "outline-2"}`}>
                     {step}
                 </h5>
             </div>
diff --git a/src/components/Step/Steps.tsx b/src/components/Step/Steps.tsx
index 46ad048..040ae2e 100644
--- a/src/components/Step/Steps.tsx
+++ b/src/components/Step/Steps.tsx
@@ -8,7 +8,7 @@ export const Steps: FC<StepsProps> = ({ items }) => {
         <div className="flex justify-center items-center gap-x-4">
             {
                 items.map((item, index) => (
-                    <StepItem key={index} active prompt={item.prompt} step={index} />
+                    <StepItem key={index} active={item.active} prompt={item.prompt} step={index} />
                 ))
             }
         </div>
diff --git a/src/pages/expenses/1/index.tsx b/src/pages/expenses/1/index.tsx
index 0b31f72..00cd2c2 100644
--- a/src/pages/expenses/1/index.tsx
+++ b/src/pages/expenses/1/index.tsx
@@ -5,7 +5,8 @@ import { Steps, type StepsProps } from '~/components/Step/Steps'
 const steps: StepsProps["items"] = [
   {
     prompt: "กรอกข้อมูลรายได้",
-    step: 1
+    step: 1,
+    active: true
   },
   {
     prompt: "วางแผนการเงิน",