diff --git a/app/(application)/division/[id]/(fitur-division)/task/[detail]/add-task.tsx b/app/(application)/division/[id]/(fitur-division)/task/[detail]/add-task.tsx
index 1fb4964..54d981c 100644
--- a/app/(application)/division/[id]/(fitur-division)/task/[detail]/add-task.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/task/[detail]/add-task.tsx
@@ -206,6 +206,8 @@ export default function TaskDivisionAddTask() {
                            day_label: { color: colors.text },
                            time_label: { color: colors.text },
                            weekday_label: { color: colors.text },
+                           button_next_image: { tintColor: colors.text },
+                           button_prev_image: { tintColor: colors.text },
                         }}
                      />
                   </View>
@@ -238,7 +240,7 @@ export default function TaskDivisionAddTask() {
                      >
                         <Text style={[dsbButton ? Styles.cGray : Styles.cWhite]}>Detail</Text>
                      </Pressable> */}
-                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} />
+                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} disabled={from == "" || to == ""} />
                   </View>
                   <InputForm
                      label="Judul Tugas"
diff --git a/app/(application)/division/[id]/(fitur-division)/task/create/task.tsx b/app/(application)/division/[id]/(fitur-division)/task/create/task.tsx
index 3095cf2..b16cea8 100644
--- a/app/(application)/division/[id]/(fitur-division)/task/create/task.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/task/create/task.tsx
@@ -177,6 +177,8 @@ export default function CreateTaskAddTugas() {
                            day_label: { color: colors.text },
                            time_label: { color: colors.text },
                            weekday_label: { color: colors.text },
+                           button_next_image: { tintColor: colors.text },
+                           button_prev_image: { tintColor: colors.text },
                         }}
                      />
                   </View>
@@ -209,7 +211,7 @@ export default function CreateTaskAddTugas() {
                      >
                         <Text style={[dsbButton ? Styles.cGray : Styles.cWhite]}>Detail</Text>
                      </Pressable> */}
-                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} />
+                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} disabled={from == "" || to == ""} />
                   </View>
                   <InputForm
                      label="Judul Tugas"
diff --git a/app/(application)/division/[id]/(fitur-division)/task/update/[detail].tsx b/app/(application)/division/[id]/(fitur-division)/task/update/[detail].tsx
index 70c4132..c286574 100644
--- a/app/(application)/division/[id]/(fitur-division)/task/update/[detail].tsx
+++ b/app/(application)/division/[id]/(fitur-division)/task/update/[detail].tsx
@@ -255,6 +255,8 @@ export default function UpdateProjectTaskDivision() {
                               day_label: { color: colors.text },
                               time_label: { color: colors.text },
                               weekday_label: { color: colors.text },
+                              button_next_image: { tintColor: colors.text },
+                              button_prev_image: { tintColor: colors.text },
                            }}
                         />
                      )}
@@ -290,7 +292,7 @@ export default function UpdateProjectTaskDivision() {
                      >
                         <Text style={[dsbButton ? Styles.cGray : Styles.cWhite]}>Detail</Text>
                      </Pressable> */}
-                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} />
+                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} disabled={from == "" || to == ""} />
                   </View>
                   <InputForm
                      label="Judul Tugas"
diff --git a/app/(application)/project/[id]/add-task.tsx b/app/(application)/project/[id]/add-task.tsx
index 2672b0c..1801400 100644
--- a/app/(application)/project/[id]/add-task.tsx
+++ b/app/(application)/project/[id]/add-task.tsx
@@ -195,6 +195,8 @@ export default function ProjectAddTask() {
                            day_label: { color: colors.text },
                            time_label: { color: colors.text },
                            weekday_label: { color: colors.text },
+                           button_next_image: { tintColor: colors.text },
+                           button_prev_image: { tintColor: colors.text },
                         }}
                      />
                   </View>
@@ -227,7 +229,7 @@ export default function ProjectAddTask() {
                      >
                         <Text style={[dsbButton ? Styles.cGray : Styles.cWhite]}>Detail</Text>
                      </Pressable> */}
-                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} />
+                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} disabled={from == "" || to == ""} />
                   </View>
                   <InputForm
                      label="Judul Tugas"
diff --git a/app/(application)/project/create/task.tsx b/app/(application)/project/create/task.tsx
index 60c824d..daf09a0 100644
--- a/app/(application)/project/create/task.tsx
+++ b/app/(application)/project/create/task.tsx
@@ -179,6 +179,8 @@ export default function CreateProjectAddTask() {
                            day_label: { color: colors.text },
                            time_label: { color: colors.text },
                            weekday_label: { color: colors.text },
+                           button_next_image: { tintColor: colors.text },
+                           button_prev_image: { tintColor: colors.text },
                         }}
                      />
                   </View>
@@ -204,14 +206,7 @@ export default function CreateProjectAddTask() {
                      {
                         (error.endDate || error.startDate) && <Text style={[Styles.textInformation, Styles.mt05, { color: colors.error }]}>Tanggal tidak boleh kosong</Text>
                      }
-                     {/* <Pressable
-                        style={[Styles.btnTab, Styles.btnLainnya, dsbButton && Styles.btnDisabled]}
-                        disabled={dsbButton}
-                        onPress={() => { setModalDetail(true) }}
-                     >
-                        <Text style={[dsbButton ? Styles.cGray : Styles.cWhite]}>Detail</Text>
-                     </Pressable> */}
-                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} />
+                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} disabled={from == "" || to == ""} />
                   </View>
                   <InputForm
                      label="Judul Tugas"
diff --git a/app/(application)/project/update/[detail].tsx b/app/(application)/project/update/[detail].tsx
index fe77ee8..d71d7af 100644
--- a/app/(application)/project/update/[detail].tsx
+++ b/app/(application)/project/update/[detail].tsx
@@ -229,6 +229,8 @@ export default function UpdateProjectTask() {
                               day_label: { color: colors.text },
                               time_label: { color: colors.text },
                               weekday_label: { color: colors.text },
+                              button_next_image: { tintColor: colors.text },
+                              button_prev_image: { tintColor: colors.text },
                            }}
                         />
                      }
@@ -259,7 +261,7 @@ export default function UpdateProjectTask() {
                      >
                         <Text style={[dsbButton ? Styles.cGray : Styles.cWhite]}>Detail</Text>
                      </Pressable> */}
-                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} />
+                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} disabled={from == "" || to == ""} />
                   </View>
                   <InputForm
                      label="Judul Tugas"
diff --git a/components/buttonSelect.tsx b/components/buttonSelect.tsx
index b7c128b..61ea47d 100644
--- a/components/buttonSelect.tsx
+++ b/components/buttonSelect.tsx
@@ -10,20 +10,22 @@ type Props = {
    round?: boolean
    error?: boolean
    errorText?: string
+   disabled?: boolean
 }
 
-export default function ButtonSelect({ value, onPress, round, error, errorText }: Props) {
+export default function ButtonSelect({ value, onPress, round, error, errorText, disabled }: Props) {
    const { colors } = useTheme();
    return (
       <View style={[Styles.mv05]}>
-         <Pressable onPress={onPress}>
+         <Pressable onPress={onPress} disabled={disabled}>
             <View style={[
                Styles.inputRoundForm,
                Styles.inputRoundFormRight,
                round && Styles.round30,
                Styles.pv10,
                { borderColor: colors.icon + '20', backgroundColor: colors.input },
-               error && { borderColor: "red" }
+               error && { borderColor: "red" },
+               disabled && { opacity: 0.4 }
             ]}>
                <Feather name="arrow-right-circle" size={20} color={colors.text} />
                <Text style={[{ color: colors.text }]}>{value}</Text>
diff --git a/components/inputForm.tsx b/components/inputForm.tsx
index b09c980..c0bc45b 100644
--- a/components/inputForm.tsx
+++ b/components/inputForm.tsx
@@ -30,6 +30,10 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
    const { colors } = useTheme();
 
    if (itemLeft != undefined || itemRight != undefined) {
+      const hasBothItems = itemLeft != undefined && itemRight != undefined;
+      const baseInputWidth = width ? lebar * width / 100 : lebar * 0.78;
+      // When both icons present, shrink TextInput by right icon size to keep container width stable
+      const textInputWidth = hasBothItems ? baseInputWidth - 30 : baseInputWidth;
       return (
          <View style={[mb && Styles.mb10]}>
             {
@@ -42,7 +46,7 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
             }
             <View style={[
                Styles.inputRoundForm,
-               itemRight != undefined ? Styles.inputRoundFormRight : Styles.inputRoundFormLeft,
+               hasBothItems ? Styles.inputRoundFormLeft : itemRight != undefined ? Styles.inputRoundFormRight : Styles.inputRoundFormLeft,
                multiline && { alignItems: 'flex-end' },
                round && Styles.round30,
                {
@@ -50,12 +54,11 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
                },
                error ? { borderColor: colors.error } : { borderColor: colors.icon + '20' },
                Platform.OS == 'ios' ? { paddingVertical: 10 } : { paddingVertical: 0, minHeight: 40 },
-               { alignItems: 'center' },
                multiline
                   ? { alignItems: "flex-end" }
                   : { alignItems: "center" },
             ]}>
-               {itemRight != undefined ? itemRight : itemLeft}
+               {hasBothItems ? itemLeft : (itemRight != undefined ? itemRight : itemLeft)}
                <TextInput
                   editable={!disable}
                   value={value}
@@ -68,10 +71,11 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
                   style={[
                      Styles.mh05,
                      multiline && { height: '100%', maxHeight: 100 },
-                     { width: width ? lebar * width / 100 : lebar * 0.78, color: colors.text },
+                     { width: textInputWidth, color: colors.text },
                      Platform.OS == 'ios' ? { paddingVertical: 1, paddingTop: 4 } : { paddingVertical: 0 },
                   ]}
                />
+               {hasBothItems && itemRight}
             </View>
             {error && (<Text style={[Styles.textInformation, { color: colors.error }, Styles.mt05]}>{errorText}</Text>)}
             {info != undefined && (<Text style={[Styles.textInformation, { color: colors.dimmed }, Styles.mt05]}>{info}</Text>)}