diff --git a/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss
index 3f90bffbd..e4fceb2d1 100644
--- a/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss
+++ b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss
@@ -1,5 +1,7 @@
 .cartCheckoutButton {
+    display: block;
     padding: 1.6rem;
+    width: 100%;
     button {
         width: 100%;
     }
diff --git a/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx
index 0cd7d00a2..5cc8f5f6f 100644
--- a/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx
+++ b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx
@@ -1,12 +1,16 @@
 import React, { memo } from 'react';
 import { ButtonCommon } from 'src/components/common';
 import s from './CartCheckoutButton.module.scss';
+import Link from 'next/link'
+import { ROUTE } from 'src/utils/constanst.utils';
 
 const CartCheckoutButton = memo(() => {
   return (
-    <div className={s.cartCheckoutButton}>
-      <ButtonCommon size='large'>Check out - Rp 120.500</ButtonCommon>
-    </div>
+    <Link href={ROUTE.CHECKOUT}>
+      <a className={s.cartCheckoutButton}>
+        <ButtonCommon size='large'>Check out - Rp 120.500</ButtonCommon>
+      </a>
+    </Link>
   )
 })
 
diff --git a/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss
index 88664460c..1d0f95582 100644
--- a/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss
+++ b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss
@@ -2,6 +2,7 @@
 
 .cartRecommendation {
     @apply w-full bg-background-gray;
+    padding-bottom: 1.6rem;
     .top {
         @apply flex justify-between items-center;
         padding: 1.6rem;
@@ -12,7 +13,8 @@
     .productCardWarpper {
         padding-left: 1.6rem;
         :global(.customArrow) {
-            @apply bg-line;
+            @apply bg-line shadow-md;
+            opacity: .8;
             @screen lg {
                 &:global(.leftArrow) {
                     left: calc(-6.4rem - 2rem);
diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts
index 3757feb1e..bdb2665db 100644
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@@ -12,11 +12,12 @@ export const ROUTE = {
     PRODUCTS: '/products',
     PRODUCT_DETAIL: '/product',
     ABOUT: '/about',
-    BLOG_DETAIL: '/blog',
     ACCOUNT: '/account',
+    BLOG_DETAIL: '/blog',
     RECIPES: '/recipes',
     BUSSINESS: '/bussiness',
     CONTACT: '/contact',
+    CHECKOUT: '/checkout',
     FAQ: '/faq',
     CUSTOMER_SERVICE: '/customer-service',
     TERM_CONDITION: '/term-condition',