diff --git a/src/apps/admin/pages/components/default-value.tsx b/src/apps/admin/pages/components/default-value.tsx
index 7e07d20..8a9ec4c 100644
--- a/src/apps/admin/pages/components/default-value.tsx
+++ b/src/apps/admin/pages/components/default-value.tsx
@@ -3,6 +3,7 @@ import { Button, Card, Col, Flex, InputNumber, Modal, Row, Form } from 'antd';
 import { Fragment, useEffect, useState } from 'react';
 import axios from 'axios';
 import { notificationError } from '@pos/base';
+import { makeColorTextValue } from '../helpers';
 
 export default function DefaultValue() {
   const [loading, setLoading] = useState(false);
@@ -124,7 +125,8 @@ export default function DefaultValue() {
               <div style={{ fontSize: 12, fontWeight: 600, color: 'rgba(0,0,0,0.4)' }}>DEFAULT PERCENTAGE</div>
               <Flex gap={12}>
                 <div
-                  style={{ fontSize: 24, fontWeight: 600, color: 'rgba(0,0,0,0.6)' }}
+                  style={{ fontSize: 24, fontWeight: 600 }}
+                  className={`${makeColorTextValue(defaultPercentage)}`}
                 >{`${defaultPercentage >= 0 ? `${defaultPercentage} %` : '-'}`}</div>
                 <Button type="link" onClick={onOpenModal}>
                   Edit
@@ -141,7 +143,8 @@ export default function DefaultValue() {
             <Flex vertical gap={8} justify="space-between">
               <div style={{ fontSize: 12, fontWeight: 600, color: 'rgba(0,0,0,0.4)' }}>CURRENT PERCENTAGE</div>
               <div
-                style={{ fontSize: 24, fontWeight: 600, color: 'rgba(0,0,0,0.6)' }}
+                style={{ fontSize: 24, fontWeight: 600 }}
+                className={`${makeColorTextValue(currentPercentage)}`}
               >{`${currentPercentage >= 0 ? `${currentPercentage} %` : '-'}`}</div>
               <div style={{ fontSize: 11, fontWeight: 400, color: 'rgba(0,0,0,0.4)', fontStyle: 'italic' }}>
                 {`Value yang di terapkan hari ini ${dayjs().format('DD-MM-YYYY')}.`}
diff --git a/src/apps/admin/pages/components/scheduling-data.tsx b/src/apps/admin/pages/components/scheduling-data.tsx
index c8fb989..c032f58 100644
--- a/src/apps/admin/pages/components/scheduling-data.tsx
+++ b/src/apps/admin/pages/components/scheduling-data.tsx
@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import { makeColorStatus, STATUS_DATA } from '@pos/base';
 
 import { DeleteOutlined, EditOutlined, LockOutlined, UnlockOutlined } from '@ant-design/icons';
+import { makeColorTextValue } from '../helpers';
 
 export default function SchedulingData() {
   const { modal } = App.useApp();
@@ -73,16 +74,6 @@ export default function SchedulingData() {
       });
   };
 
-  function makeColorText(value: number) {
-    if (value <= 30) {
-      return 'text-red-500';
-    } else if (value > 30 && value <= 80) {
-      return 'text-yellow-500';
-    } else if (value > 80 && value <= 100) {
-      return 'text-green-500';
-    }
-  }
-
   useEffect(() => {
     handleGetData(1);
   }, []);
@@ -100,8 +91,8 @@ export default function SchedulingData() {
           <List.Item key={item.id} style={{ borderBlockEnd: 'none', padding: 5 }}>
             <Card style={{ width: '100%' }}>
               <Flex justify="space-between" style={{ width: '100%' }}>
-                <Row className="w-full">
-                  <Col span={12}>
+                <Row className="w-full" gutter={[4, 4]}>
+                  <Col xs={18} sm={12} span={12}>
                     <Flex align="center" className="h-full" gap={4}>
                       <div>
                         <div className="text-[#00000066]">{item.name}</div>
@@ -109,16 +100,16 @@ export default function SchedulingData() {
                       </div>
                     </Flex>
                   </Col>
-                  <Col span={12}>
+                  <Col xs={18} sm={12} span={12}>
                     <Flex align="center" className="h-full" gap={8}>
                       <div
-                        className={`text-2xl font-bold ${makeColorText(item.indexing_key)}`}
+                        className={`text-2xl font-bold ${makeColorTextValue(item.indexing_key)}`}
                       >{`${item.indexing_key} %`}</div>
                       <Tag color={makeColorStatus(item.status)}>{item.status}</Tag>
                     </Flex>
                   </Col>
                 </Row>
-                <Flex align="center" gap={12}>
+                <Flex align="center" gap={4}>
                   <Tooltip title="Edit" trigger={'hover'} placement="bottom">
                     <Button icon={<EditOutlined />} />
                   </Tooltip>
diff --git a/src/apps/admin/pages/helpers/index.ts b/src/apps/admin/pages/helpers/index.ts
new file mode 100644
index 0000000..00e3fe7
--- /dev/null
+++ b/src/apps/admin/pages/helpers/index.ts
@@ -0,0 +1,11 @@
+export function makeColorTextValue(value: number) {
+  if (value <= 30) {
+    return 'text-red-500';
+  } else if (value > 30 && value <= 80) {
+    return 'text-yellow-500';
+  } else if (value > 80 && value <= 100) {
+    return 'text-green-500';
+  } else {
+    return 'text-[#00000066]';
+  }
+}