diff --git a/apps/backoffice/src/app/page.tsx b/apps/backoffice/src/app/page.tsx
index 1cc55a0..b92bf58 100644
--- a/apps/backoffice/src/app/page.tsx
+++ b/apps/backoffice/src/app/page.tsx
@@ -1,8 +1,11 @@
 import { FC, ReactElement } from 'react';
+import { useNavigate } from 'react-router';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { InputForm } from '@imphnen-frontend-service/ui/molecules';
 
 export const Components: FC = (): ReactElement => {
+  const navigate = useNavigate();
+
   return (
     <div className="flex justify-center items-center min-h-screen">
       <div className="bg-white border border-primary-200 shadow-lg p-[60px] text-center flex flex-col justify-items-stretch gap-8 rounded-2xl">
@@ -15,14 +18,16 @@ export const Components: FC = (): ReactElement => {
           placeholder="Masukkan Email"
           type="email"
           size="lg"
+          className="w-full"
         />
         <InputForm
           label="Password"
           placeholder="Masukkan password"
           type="password"
           size="lg"
+          className="w-full"
         />
-        <Button>Login</Button>
+        <Button onClick={() => navigate('/dashboard')}>Login</Button>
       </div>
     </div>
   );
diff --git a/apps/backoffice/src/app/transactions/page.tsx b/apps/backoffice/src/app/transactions/page.tsx
index 65b05e3..dd8c82e 100644
--- a/apps/backoffice/src/app/transactions/page.tsx
+++ b/apps/backoffice/src/app/transactions/page.tsx
@@ -3,6 +3,7 @@ import {
   FilterOutlined,
   SearchOutlined,
   FileTextOutlined,
+  AuditOutlined,
 } from '@ant-design/icons';
 import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
 import { Pagination } from '@imphnen-frontend-service/ui/molecules';
@@ -139,9 +140,9 @@ export const Components: FC = (): ReactElement => {
                     e.stopPropagation();
                     handleValidate(item.id);
                   }}
-                  className="flex items-center gap-2"
+                  className="flex items-center gap-2 w-full"
                 >
-                  <FileTextOutlined /> Validate
+                  <AuditOutlined className="text-[16px]" /> Validate
                 </Button>
               ),
             },
diff --git a/apps/backoffice/src/index.css b/apps/backoffice/src/index.css
index e9bf12a..b92b6ea 100644
--- a/apps/backoffice/src/index.css
+++ b/apps/backoffice/src/index.css
@@ -27,49 +27,45 @@
   --color-neutral-900: #2f2f2f;
   --color-neutral-950: #2b2b2b;
 
-  --color-success-50: #e7f2ee;
-  --color-success-100: #cde6dd;
-  --color-success-200: #9bccbc;
-  --color-success-300: #78bdab;
-  --color-success-400: #4ca88f;
-  --color-success-500: #349078;
-  --color-success-600: #2f7c66;
-  --color-success-700: #26624f;
-  --color-success-800: #1e4a3b;
-  --color-success-900: #1b513b;
+  --color-success-100: #e0fbd8;
+  --color-success-200: #bcf8b0;
+  --color-success-300: #8eea85;
+  --color-success-400: #63d564;
+  --color-success-500: #35ba43;
+  --color-success-600: #269f3e;
+  --color-success-700: #1a8439;
+  --color-success-800: #106b32;
+  --color-success-900: #0b592f;
 
-  --color-info-50: #e7f4f5;
-  --color-info-100: #cce9ea;
-  --color-info-200: #99d3d5;
-  --color-info-300: #78c4c7;
-  --color-info-400: #3aa9ad;
-  --color-info-500: #279599;
-  --color-info-600: #207d82;
-  --color-info-700: #1a666b;
-  --color-info-800: #124c52;
-  --color-info-900: #093d43;
+  --color-info-100: #ccfcfe;
+  --color-info-200: #9bf3fd;
+  --color-info-300: #67e3fb;
+  --color-info-400: #42cdf8;
+  --color-info-500: #04acf3;
+  --color-info-600: #0185d0;
+  --color-info-700: #0264af;
+  --color-info-800: #01478d;
+  --color-info-900: #003375;
 
-  --color-warning-50: #fffce6;
-  --color-warning-100: #fff8cc;
-  --color-warning-200: #fef39b;
-  --color-warning-300: #fde967;
-  --color-warning-400: #fbd93d;
-  --color-warning-500: #f3c215;
-  --color-warning-600: #d7a20f;
-  --color-warning-700: #aa7e0c;
-  --color-warning-800: #805c07;
-  --color-warning-900: #665c00;
+  --color-warning-100: #fffcd3;
+  --color-warning-200: #fffaa9;
+  --color-warning-300: #fff67d;
+  --color-warning-400: #fff25d;
+  --color-warning-500: #ffed27;
+  --color-warning-600: #dbc91d;
+  --color-warning-700: #b7a714;
+  --color-warning-800: #93850b;
+  --color-warning-900: #7a6d07;
 
-  --color-danger-50: #ffe7e7;
-  --color-danger-100: #ffcece;
-  --color-danger-200: #ff9f9f;
-  --color-danger-300: #ff6e6e;
-  --color-danger-400: #fa4646;
-  --color-danger-500: #ef1f1f;
-  --color-danger-600: #d11515;
-  --color-danger-700: #a51111;
-  --color-danger-800: #7f0c0c;
-  --color-danger-900: #5d2d2d;
+  --color-danger-100: #ffe8da;
+  --color-danger-200: #ffcbb3;
+  --color-danger-300: #ffaa8d;
+  --color-danger-400: #ff8870;
+  --color-danger-500: #ff5242;
+  --color-danger-600: #da3030;
+  --color-danger-700: #b7212d;
+  --color-danger-800: #93152a;
+  --color-danger-900: #7a0c27;
 
   --radius-none: 0px;
   --radius-sm: 2px;
@@ -137,4 +133,4 @@
     font-size: 12px;
     line-height: 1.2;
   }
-}
+}
\ No newline at end of file
diff --git a/apps/gacha/src/index.css b/apps/gacha/src/index.css
index e9bf12a..b92b6ea 100644
--- a/apps/gacha/src/index.css
+++ b/apps/gacha/src/index.css
@@ -27,49 +27,45 @@
   --color-neutral-900: #2f2f2f;
   --color-neutral-950: #2b2b2b;
 
-  --color-success-50: #e7f2ee;
-  --color-success-100: #cde6dd;
-  --color-success-200: #9bccbc;
-  --color-success-300: #78bdab;
-  --color-success-400: #4ca88f;
-  --color-success-500: #349078;
-  --color-success-600: #2f7c66;
-  --color-success-700: #26624f;
-  --color-success-800: #1e4a3b;
-  --color-success-900: #1b513b;
+  --color-success-100: #e0fbd8;
+  --color-success-200: #bcf8b0;
+  --color-success-300: #8eea85;
+  --color-success-400: #63d564;
+  --color-success-500: #35ba43;
+  --color-success-600: #269f3e;
+  --color-success-700: #1a8439;
+  --color-success-800: #106b32;
+  --color-success-900: #0b592f;
 
-  --color-info-50: #e7f4f5;
-  --color-info-100: #cce9ea;
-  --color-info-200: #99d3d5;
-  --color-info-300: #78c4c7;
-  --color-info-400: #3aa9ad;
-  --color-info-500: #279599;
-  --color-info-600: #207d82;
-  --color-info-700: #1a666b;
-  --color-info-800: #124c52;
-  --color-info-900: #093d43;
+  --color-info-100: #ccfcfe;
+  --color-info-200: #9bf3fd;
+  --color-info-300: #67e3fb;
+  --color-info-400: #42cdf8;
+  --color-info-500: #04acf3;
+  --color-info-600: #0185d0;
+  --color-info-700: #0264af;
+  --color-info-800: #01478d;
+  --color-info-900: #003375;
 
-  --color-warning-50: #fffce6;
-  --color-warning-100: #fff8cc;
-  --color-warning-200: #fef39b;
-  --color-warning-300: #fde967;
-  --color-warning-400: #fbd93d;
-  --color-warning-500: #f3c215;
-  --color-warning-600: #d7a20f;
-  --color-warning-700: #aa7e0c;
-  --color-warning-800: #805c07;
-  --color-warning-900: #665c00;
+  --color-warning-100: #fffcd3;
+  --color-warning-200: #fffaa9;
+  --color-warning-300: #fff67d;
+  --color-warning-400: #fff25d;
+  --color-warning-500: #ffed27;
+  --color-warning-600: #dbc91d;
+  --color-warning-700: #b7a714;
+  --color-warning-800: #93850b;
+  --color-warning-900: #7a6d07;
 
-  --color-danger-50: #ffe7e7;
-  --color-danger-100: #ffcece;
-  --color-danger-200: #ff9f9f;
-  --color-danger-300: #ff6e6e;
-  --color-danger-400: #fa4646;
-  --color-danger-500: #ef1f1f;
-  --color-danger-600: #d11515;
-  --color-danger-700: #a51111;
-  --color-danger-800: #7f0c0c;
-  --color-danger-900: #5d2d2d;
+  --color-danger-100: #ffe8da;
+  --color-danger-200: #ffcbb3;
+  --color-danger-300: #ffaa8d;
+  --color-danger-400: #ff8870;
+  --color-danger-500: #ff5242;
+  --color-danger-600: #da3030;
+  --color-danger-700: #b7212d;
+  --color-danger-800: #93152a;
+  --color-danger-900: #7a0c27;
 
   --radius-none: 0px;
   --radius-sm: 2px;
@@ -137,4 +133,4 @@
     font-size: 12px;
     line-height: 1.2;
   }
-}
+}
\ No newline at end of file
diff --git a/libs/ui/src/index.css b/libs/ui/src/index.css
index e9bf12a..b92b6ea 100644
--- a/libs/ui/src/index.css
+++ b/libs/ui/src/index.css
@@ -27,49 +27,45 @@
   --color-neutral-900: #2f2f2f;
   --color-neutral-950: #2b2b2b;
 
-  --color-success-50: #e7f2ee;
-  --color-success-100: #cde6dd;
-  --color-success-200: #9bccbc;
-  --color-success-300: #78bdab;
-  --color-success-400: #4ca88f;
-  --color-success-500: #349078;
-  --color-success-600: #2f7c66;
-  --color-success-700: #26624f;
-  --color-success-800: #1e4a3b;
-  --color-success-900: #1b513b;
+  --color-success-100: #e0fbd8;
+  --color-success-200: #bcf8b0;
+  --color-success-300: #8eea85;
+  --color-success-400: #63d564;
+  --color-success-500: #35ba43;
+  --color-success-600: #269f3e;
+  --color-success-700: #1a8439;
+  --color-success-800: #106b32;
+  --color-success-900: #0b592f;
 
-  --color-info-50: #e7f4f5;
-  --color-info-100: #cce9ea;
-  --color-info-200: #99d3d5;
-  --color-info-300: #78c4c7;
-  --color-info-400: #3aa9ad;
-  --color-info-500: #279599;
-  --color-info-600: #207d82;
-  --color-info-700: #1a666b;
-  --color-info-800: #124c52;
-  --color-info-900: #093d43;
+  --color-info-100: #ccfcfe;
+  --color-info-200: #9bf3fd;
+  --color-info-300: #67e3fb;
+  --color-info-400: #42cdf8;
+  --color-info-500: #04acf3;
+  --color-info-600: #0185d0;
+  --color-info-700: #0264af;
+  --color-info-800: #01478d;
+  --color-info-900: #003375;
 
-  --color-warning-50: #fffce6;
-  --color-warning-100: #fff8cc;
-  --color-warning-200: #fef39b;
-  --color-warning-300: #fde967;
-  --color-warning-400: #fbd93d;
-  --color-warning-500: #f3c215;
-  --color-warning-600: #d7a20f;
-  --color-warning-700: #aa7e0c;
-  --color-warning-800: #805c07;
-  --color-warning-900: #665c00;
+  --color-warning-100: #fffcd3;
+  --color-warning-200: #fffaa9;
+  --color-warning-300: #fff67d;
+  --color-warning-400: #fff25d;
+  --color-warning-500: #ffed27;
+  --color-warning-600: #dbc91d;
+  --color-warning-700: #b7a714;
+  --color-warning-800: #93850b;
+  --color-warning-900: #7a6d07;
 
-  --color-danger-50: #ffe7e7;
-  --color-danger-100: #ffcece;
-  --color-danger-200: #ff9f9f;
-  --color-danger-300: #ff6e6e;
-  --color-danger-400: #fa4646;
-  --color-danger-500: #ef1f1f;
-  --color-danger-600: #d11515;
-  --color-danger-700: #a51111;
-  --color-danger-800: #7f0c0c;
-  --color-danger-900: #5d2d2d;
+  --color-danger-100: #ffe8da;
+  --color-danger-200: #ffcbb3;
+  --color-danger-300: #ffaa8d;
+  --color-danger-400: #ff8870;
+  --color-danger-500: #ff5242;
+  --color-danger-600: #da3030;
+  --color-danger-700: #b7212d;
+  --color-danger-800: #93152a;
+  --color-danger-900: #7a0c27;
 
   --radius-none: 0px;
   --radius-sm: 2px;
@@ -137,4 +133,4 @@
     font-size: 12px;
     line-height: 1.2;
   }
-}
+}
\ No newline at end of file
diff --git a/libs/ui/src/molecules/pagination/pagination.tsx b/libs/ui/src/molecules/pagination/pagination.tsx
index ffff09a..3d75120 100644
--- a/libs/ui/src/molecules/pagination/pagination.tsx
+++ b/libs/ui/src/molecules/pagination/pagination.tsx
@@ -64,7 +64,7 @@ export const Pagination: FC<PaginationProps> = ({
               className={`size-[30px] py-[8px] flex items-center justify-center rounded-md cursor-pointer ${
                 currentPage === page
                   ? 'bg-primary-500 text-white'
-                  : 'border border-gray-200 hover:bg-gray-50'
+                  : 'bg-primary-100 hover:bg-primary-200'
               }`}
             >
               {page}
diff --git a/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx b/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
index 86317c0..4824a66 100644
--- a/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
+++ b/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
@@ -6,10 +6,11 @@ import {
 } from '@ant-design/icons';
 import { Button } from '../../atoms';
 import { FC, ReactElement } from 'react';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
 
 export const BackofficeSidebar: FC = (): ReactElement => {
   const location = useLocation();
+  const navigate = useNavigate();
   const isActive = (path: string) => location.pathname.includes(path);
 
   return (
@@ -61,7 +62,11 @@ export const BackofficeSidebar: FC = (): ReactElement => {
       {/* Log Out Button */}
       <div className="w-full">
         <hr className="mb-5 border-primary-200" />
+
         <Button
+          onClick={() => {
+            navigate('/');
+          }}
           variant="text"
           className="items-start justify-start gap-3 px-[8px] py-[10px] text-gray-700 hover:text-red-500 transition-colors w-full"
         >