diff --git a/pingcap-jp/bootstrap/blocks.php b/pingcap-jp/bootstrap/blocks.php
index 337017f..c94c9cb 100644
--- a/pingcap-jp/bootstrap/blocks.php
+++ b/pingcap-jp/bootstrap/blocks.php
@@ -114,8 +114,8 @@
 	'case-study' => ['block-bg-none'],
 	'columns' => ['block-bg-none', 'bg-white', 'bg-black', 'bg-black-dark', 'bg-black-gradient', 'bg-blue', 'bg-gray', 'block-bg-image', 'bg-gradient', 'bg-color-gradient'],
 	'community-activities' => ['block-bg-none'],
-	'cta' => ['block-bg-none', 'bg-black', 'bg-black-dark', 'bg-violet', 'bg-red', 'bg-blue-dark', 'bg-green','bg-gray', 'block-bg-image'],
-	'icon-grid' => ['block-bg-none', 'bg-blue', 'bg-black', 'bg-black-dark', 'bg-gradient'],
+	'cta' => ['block-bg-none', 'bg-black', 'bg-black-dark', 'bg-violet', 'bg-red', 'bg-blue-dark', 'bg-green', 'bg-gray', 'block-bg-image'],
+	'icon-grid' => ['block-bg-none', 'bg-blue', 'bg-black', 'bg-black-dark', 'bg-black-gradient', 'bg-gradient'],
 	'leadership' => ['block-bg-none'],
 	'logos' => ['block-bg-none', 'bg-black', 'bg-black-dark'],
 	'media-content' => ['block-bg-none', 'bg-white', 'bg-black', 'bg-black-dark', 'bg-gradient'],
diff --git a/pingcap-jp/css/blocks/case.scss b/pingcap-jp/css/blocks/case.scss
index 9f19387..0da4d6d 100644
--- a/pingcap-jp/css/blocks/case.scss
+++ b/pingcap-jp/css/blocks/case.scss
@@ -78,17 +78,11 @@
 			transform: translateY(-12px);
 			box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
 			.button-link {
-				.button__arrow {
+				&:after {
 					background-color: #fff;
-					&::before {
-						border-color: #000;
-						transform: rotate(0);
-					}
-					&::after {
-						top: 0;
-						border-color: #000;
-						transform: rotate(45deg);
-					}
+					border-radius: 50%;
+					color: #000;
+					transform: rotate(45deg);
 				}
 			}
 		}
diff --git a/pingcap-jp/css/components/banners/banner-default.scss b/pingcap-jp/css/components/banners/banner-default.scss
index becc19b..bbef4d6 100644
--- a/pingcap-jp/css/components/banners/banner-default.scss
+++ b/pingcap-jp/css/components/banners/banner-default.scss
@@ -1,211 +1,215 @@
 .banner-default {
-  &.bg-black {
-    background-repeat: repeat-x;
-    background-position: top center;
-    background-image: linear-gradient(to bottom, rgba(14, 14, 14, 0.4) 0, #000000bd 100%),
-      url(https://static.pingcap.co.jp/files/2024/06/29150254/bg-hex-pattern.png);
-  }
-  &__inner {
-    /* stylelint-disable */
-    --bottom-padding-pull-up: 0;
-    --bottom-padding-use-case: 0px;
-    --bottom-padding-no-arc: 0px;
-    /* stylelint-enable */
-
-    position: relative;
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    gap: var(--grid-column-gutter);
-    align-items: center;
-
-    /* prettier-ignore */
-    padding-bottom: calc(var(--bottom-padding-pull-up) + var(--bottom-padding-use-case) + var(--bottom-padding-no-arc));
-
-    .banner-default--first-block-pull-up & {
-      --bottom-padding-pull-up: var(--block-padding-top);
-    }
-
-    @include media-min($medium) {
-      grid-template-columns: repeat(12, 1fr);
-    }
-
-    .banner-default--display-type-use-case & {
-      align-items: center;
-      @include media-min($large) {
-        --bottom-padding-use-case: 4rem;
-      }
-    }
-
-    .banner-default--side-image & {
-      /* prettier-ignore */
-      padding-bottom: calc(calc(var(--bottom-padding-pull-up) * -1) + var(--bottom-padding-use-case) + var(--bottom-padding-no-arc));
-    }
-
-    .button--secondary {
-      color: var(--color-white);
-    }
-  }
-
-  &__title {
-    margin-top: 0;
-    word-wrap: break-word;
-  }
-
-  &__text-content {
-    position: relative;
-    padding-top: 6rem;
-    padding-bottom: 4rem;
-    display: flex;
-    align-items: flex-start;
-    gap: var(--grid-column-gutter);
-
-    .long-text {
-      margin-top: 1rem;
-    }
-
-    @include media-min($medium) {
-      padding-bottom: 6rem;
-      grid-column: 1 / span 12;
-
-      .banner-default--side-image & {
-        grid-column: 1 / span 6;
-      }
-
-      .banner-default--has-side-form & {
-        grid-column: 1 / span 6;
-      }
-    }
-
-    @include media-min($large) {
-      grid-column: 1 / span 10;
-
-      .banner-default--side-image & {
-        grid-column: 1 / span 7;
-        // padding-bottom: 12rem;
-      }
-
-      .banner-default--no-gutters & {
-        grid-column: 1 / span 12;
-      }
-
-      .banner-default--side-image.banner-default--no-gutters & {
-        grid-column: 1 / span 6;
-      }
-
-      .banner-default--display-type-use-case & {
-        padding-bottom: 0;
-        align-self: center;
-
-        grid-column: 3 / span 10;
-      }
-    }
-
-    &--center {
-      text-align: center;
-      justify-content: center;
-      @include media-min($medium) {
-        grid-column: 2 / span 10;
-      }
-    }
-
-    &--medium {
-      @include media-min($large) {
-        grid-column: 2 / span 8;
-      }
-    }
-  }
-
-  &--has-side-form {
-    z-index: calc(var(--z-root) + 1);
-  }
-
-  &__form-content {
-    position: relative;
-    padding-bottom: 4rem;
-    align-self: flex-start;
-
-    @include media-min($medium) {
-      padding-top: 3.6rem;
-      grid-column: span 6;
-    }
-
-    .hs-form-container {
-      width: 100%;
-      @include media-min($medium) {
-        position: absolute;
-      }
-    }
-  }
-
-  &__meta {
-    display: flex;
-    gap: 2rem;
-    flex-wrap: wrap;
-    &-cat {
-      word-wrap: break-word;
-      color: var(--anchor-link-normal-color);
-      text-decoration: underline;
-      text-decoration-color: var(--anchor-link-normal-color);
-      text-underline-offset: 2px;
-      transition: all var(--default-transition-params);
-    }
-  }
-
-  &__image-container {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    padding-bottom: 8rem;
-    padding-top: 2rem;
-
-    @include media-min($medium) {
-      padding: 4rem 0;
-      grid-column: span 5;
-    }
-
-    @include media-min($large) {
-      &--pull-up {
-        margin-top: -5rem;
-      }
-    }
-  }
-
-  &__image,
-  &__image-video {
-    &--styled {
-      box-shadow: var(--default-box-shadow);
-      border-radius: var(--default-border-radius);
-    }
-
-    &--cover {
-      @include media-min($medium) {
-        @include image-cover-entire-container;
-
-        object-position: var(--pos-x, 50%) var(--pos-y, 50%);
-      }
-    }
-
-    @include media-min($large) {
-      max-width: var(--image-max-width, 100%);
-    }
-  }
-
-  &__button {
-    margin-top: 3.2rem;
-  }
-
-  &__product-icon-image {
-    display: inline-block;
-    width: auto;
-    max-height: 6rem;
-    vertical-align: middle;
-    margin-top: -1rem;
-  }
-
-  &--display-type-product {
-    overflow: hidden;
-    .banner-default__text-content {
-      position: relative;
+	&.bg-black {
+		background-repeat: repeat-x;
+		background-position: top center;
+		background-image: linear-gradient(to bottom, rgba(14, 14, 14, 0.4) 0, #000000bd 100%),
+			url(https://static.pingcap.co.jp/files/2024/06/29150254/bg-hex-pattern.png);
+	}
+	&__inner {
+		/* stylelint-disable */
+		--bottom-padding-pull-up: 0;
+		--bottom-padding-use-case: 0px;
+		--bottom-padding-no-arc: 0px;
+		/* stylelint-enable */
+
+		position: relative;
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+		gap: var(--grid-column-gutter);
+		align-items: center;
+
+		/* prettier-ignore */
+		padding-bottom: calc(var(--bottom-padding-pull-up) + var(--bottom-padding-use-case) + var(--bottom-padding-no-arc));
+
+		.banner-default--first-block-pull-up & {
+			--bottom-padding-pull-up: var(--block-padding-top);
+		}
+
+		@include media-min($medium) {
+			grid-template-columns: repeat(12, 1fr);
+		}
+
+		.banner-default--display-type-use-case & {
+			align-items: center;
+			@include media-min($large) {
+				--bottom-padding-use-case: 4rem;
+			}
+		}
+
+		.banner-default--side-image & {
+			/* prettier-ignore */
+			padding-bottom: calc(calc(var(--bottom-padding-pull-up) * -1) + var(--bottom-padding-use-case) + var(--bottom-padding-no-arc));
+		}
+
+		.button--secondary {
+			color: var(--color-white);
+		}
+	}
+
+	&__title {
+		margin-top: 0;
+		word-wrap: break-word;
+	}
+
+	&__text-content {
+		position: relative;
+		padding-top: 6rem;
+		padding-bottom: 4rem;
+		display: flex;
+		align-items: flex-start;
+		gap: var(--grid-column-gutter);
+
+		.long-text {
+			margin-top: 1rem;
+		}
+
+		@include media-min($medium) {
+			padding-bottom: 6rem;
+			grid-column: 1 / span 12;
+
+			.banner-default--side-image & {
+				grid-column: 1 / span 6;
+			}
+
+			.banner-default--has-side-form & {
+				grid-column: 1 / span 6;
+			}
+		}
+
+		@include media-min($large) {
+			grid-column: 1 / span 10;
+
+			.banner-default--side-image & {
+				grid-column: 1 / span 7;
+				// padding-bottom: 12rem;
+			}
+
+			.banner-default--no-gutters & {
+				grid-column: 1 / span 12;
+			}
+
+			.banner-default--side-image.banner-default--no-gutters & {
+				grid-column: 1 / span 6;
+			}
+
+			.banner-default--display-type-use-case & {
+				padding-bottom: 0;
+				align-self: center;
+
+				grid-column: 3 / span 10;
+			}
+		}
+
+		&--center {
+			text-align: center;
+			justify-content: center;
+			.button-group {
+				justify-content: center;
+			}
+			@include media-min($medium) {
+				grid-column: 2 / span 10;
+			}
+		}
+
+		&--medium {
+			@include media-min($large) {
+				grid-column: 2 / span 8;
+			}
+		}
+	}
+
+	&--has-side-form {
+		z-index: calc(var(--z-root) + 1);
+	}
+
+	&__form-content {
+		position: relative;
+		padding-bottom: 4rem;
+		align-self: flex-start;
+
+		@include media-min($medium) {
+			padding-top: 3.6rem;
+			grid-column: span 6;
+		}
+
+		.hs-form-container {
+			width: 100%;
+			@include media-min($medium) {
+				position: absolute;
+			}
+		}
+	}
+
+	&__meta {
+		display: flex;
+		gap: 2rem;
+		flex-wrap: wrap;
+		&-cat {
+			word-wrap: break-word;
+			color: var(--anchor-link-normal-color);
+			text-decoration: underline;
+			text-decoration-color: var(--anchor-link-normal-color);
+			text-underline-offset: 2px;
+			transition: all var(--default-transition-params);
+		}
+	}
+
+	&__image-container {
+		position: relative;
+		display: flex;
+		justify-content: center;
+		padding-bottom: 8rem;
+		padding-top: 2rem;
+
+		@include media-min($medium) {
+			padding: 4rem 0;
+			grid-column: span 5;
+		}
+
+		@include media-min($large) {
+			&--pull-up {
+				margin-top: -5rem;
+			}
+		}
+	}
+
+	&__image,
+	&__image-video {
+		&--styled {
+			box-shadow: var(--default-box-shadow);
+			border-radius: var(--default-border-radius);
+		}
+
+		&--cover {
+			@include media-min($medium) {
+				@include image-cover-entire-container;
+
+				object-position: var(--pos-x, 50%) var(--pos-y, 50%);
+			}
+		}
+
+		@include media-min($large) {
+			max-width: var(--image-max-width, 100%);
+		}
+	}
+
+    &__button,
+	.button-group {
+		margin-top: 3.2rem;
+	}
+
+	&__product-icon-image {
+		display: inline-block;
+		width: auto;
+		max-height: 6rem;
+		vertical-align: middle;
+		margin-top: -1rem;
+	}
+
+	&--display-type-product {
+		overflow: hidden;
+		.banner-default__text-content {
+			position: relative;
 			z-index: 1;
 			padding-top: 80px;
 			@include media-min($medium) {
@@ -216,172 +220,172 @@
 					grid-column: 1 / span 8;
 				}
 			}
-      h1 {
-        font-size: 48px;
-        font-weight: 700;
-        line-height: 56px;
-        color: #fff;
-        margin-top: 32px;
-        @include media-min($medium) {
-          font-size: 68px;
-          font-weight: 700;
-          line-height: 74px;
-        }
-      }
-      p {
-        font-size: 22px;
-        font-weight: 300;
-        line-height: 28px;
-        text-align: left;
-        color: #a2adb9;
-        margin: 3.2rem 0;
-        @include media-min(1200px) {
-          width: 80%;
-        }
-      }
-    }
-    .banner-default__image-container {
-      padding-bottom: 80px;
-      right: 0;
-      padding-top: 0;
-      text-align: center;
-      @include media-min($medium) {
-        position: absolute;
-        top: 80px;
-      }
-      @include media-min($large) {
-        right: -62px;
-      }
-      &--center {
-        @include media-min($large) {
-          right: 62PX;
-        }
-      }
-    }
-  }
-
-  &__use-case-illustration {
-    display: none;
-
-    @include media-min($large) {
-      display: block;
-      grid-column: span 2;
-
-      transition: transform 1s ease-in-out, opacity 1.25s ease-in-out;
-
-      &.banner-animate {
-        transform: translateX(-125%);
-        opacity: 0;
-        pointer-events: none;
-      }
-    }
-  }
-
-  &--has-video {
-    .banner-default__image-video {
-      display: block;
-    }
-
-    .banner-default__image {
-      display: none;
-    }
-  }
-
-  .sub_banner {
-    .icon-text {
-      border-radius: 12px;
-      padding: 3rem 6rem;
-      display: flex;
-    }
-  }
-
-  &__video {
-    @include media-min(700px) {
-      padding-top: 10rem;
-      grid-column: 8 / span 5;
-    }
-    &-container {
-      position: relative;
-      padding: 3.2rem 2.4rem;
-
-      @include media-min(700px) {
-        position: absolute;
-        right: 0;
-        top: 3.2rem;
-        bottom: 3.6rem;
-        width: 40%;
-        border-radius: 3.2rem 0 0 3.2rem;
-        padding: 4.8rem 0rem 0rem 5.2rem;
-      }
-      img {
-        height: 100%;
-      }
-    }
-    &-content {
-      position: relative;
-      max-width: 60rem;
-    }
-  }
-
-  &.tmpl-get-started,
-  &.tmpl-pricing {
-    padding-bottom: 5rem;
-    @include media-min($medium) {
-      height: 300px;
-    }
-    .banner-default__inner {
-      height: 100%;
-    }
-    .banner-default__text-content {
-      align-items: center;
-    }
-  }
-
-  &.tmpl-demo {
-    .banner-default__text-content {
-      padding-bottom: 4rem;
-    }
-  }
-
-  &.tmpl-about {
-    .banner-default__text-content {
-      @include media-min($medium) {
-        grid-column: 1 / span 6;
-        padding-right: 4.8rem;
-      }
-    }
-
-    .banner-default__video {
-      @include media-min($medium) {
-        grid-column: 7 / span 6;
-      }
-      @include media-min($large) {
-        position: absolute;
-        right: 0;
-        width: 46vw;
-        max-width: 66.6rem;
-        padding-top: 0;
-        grid-column: 7 / span 6;
-      }
-      @include media-min($xlarge) {
-        position: relative;
-        right: unset;
-        width: unset;
-        max-width: unset;
-      }
-    }
-    .banner-default__video-content {
-      max-width: 66.6rem;
-      margin-bottom: 4rem;
-      @include media-min($medium) {
-        margin-bottom: 0;
-      }
-      @include media-min($xlarge) {
-        max-width: unset;
-      }
-    }
-    .banner-default__image {
-      display: block;
-    }
-  }
+			h1 {
+				font-size: 48px;
+				font-weight: 700;
+				line-height: 56px;
+				color: #fff;
+				margin-top: 32px;
+				@include media-min($medium) {
+					font-size: 68px;
+					font-weight: 700;
+					line-height: 74px;
+				}
+			}
+			p {
+				font-size: 22px;
+				font-weight: 300;
+				line-height: 28px;
+				text-align: left;
+				color: #a2adb9;
+				margin: 3.2rem 0;
+				@include media-min(1200px) {
+					width: 80%;
+				}
+			}
+		}
+		.banner-default__image-container {
+			padding-bottom: 80px;
+			right: 0;
+			padding-top: 0;
+			text-align: center;
+			@include media-min($medium) {
+				position: absolute;
+				top: 80px;
+			}
+			@include media-min($large) {
+				right: -62px;
+			}
+			&--center {
+				@include media-min($large) {
+					right: 62px;
+				}
+			}
+		}
+	}
+
+	&__use-case-illustration {
+		display: none;
+
+		@include media-min($large) {
+			display: block;
+			grid-column: span 2;
+
+			transition: transform 1s ease-in-out, opacity 1.25s ease-in-out;
+
+			&.banner-animate {
+				transform: translateX(-125%);
+				opacity: 0;
+				pointer-events: none;
+			}
+		}
+	}
+
+	&--has-video {
+		.banner-default__image-video {
+			display: block;
+		}
+
+		.banner-default__image {
+			display: none;
+		}
+	}
+
+	.sub_banner {
+		.icon-text {
+			border-radius: 12px;
+			padding: 3rem 6rem;
+			display: flex;
+		}
+	}
+
+	&__video {
+		@include media-min(700px) {
+			padding-top: 10rem;
+			grid-column: 8 / span 5;
+		}
+		&-container {
+			position: relative;
+			padding: 3.2rem 2.4rem;
+
+			@include media-min(700px) {
+				position: absolute;
+				right: 0;
+				top: 3.2rem;
+				bottom: 3.6rem;
+				width: 40%;
+				border-radius: 3.2rem 0 0 3.2rem;
+				padding: 4.8rem 0rem 0rem 5.2rem;
+			}
+			img {
+				height: 100%;
+			}
+		}
+		&-content {
+			position: relative;
+			max-width: 60rem;
+		}
+	}
+
+	&.tmpl-get-started,
+	&.tmpl-pricing {
+		padding-bottom: 5rem;
+		@include media-min($medium) {
+			height: 300px;
+		}
+		.banner-default__inner {
+			height: 100%;
+		}
+		.banner-default__text-content {
+			align-items: center;
+		}
+	}
+
+	&.tmpl-demo {
+		.banner-default__text-content {
+			padding-bottom: 4rem;
+		}
+	}
+
+	&.tmpl-about {
+		.banner-default__text-content {
+			@include media-min($medium) {
+				grid-column: 1 / span 6;
+				padding-right: 4.8rem;
+			}
+		}
+
+		.banner-default__video {
+			@include media-min($medium) {
+				grid-column: 7 / span 6;
+			}
+			@include media-min($large) {
+				position: absolute;
+				right: 0;
+				width: 46vw;
+				max-width: 66.6rem;
+				padding-top: 0;
+				grid-column: 7 / span 6;
+			}
+			@include media-min($xlarge) {
+				position: relative;
+				right: unset;
+				width: unset;
+				max-width: unset;
+			}
+		}
+		.banner-default__video-content {
+			max-width: 66.6rem;
+			margin-bottom: 4rem;
+			@include media-min($medium) {
+				margin-bottom: 0;
+			}
+			@include media-min($xlarge) {
+				max-width: unset;
+			}
+		}
+		.banner-default__image {
+			display: block;
+		}
+	}
 }
diff --git a/pingcap-jp/css/components/cards/card-bg.scss b/pingcap-jp/css/components/cards/card-bg.scss
index aab29a3..321bc77 100644
--- a/pingcap-jp/css/components/cards/card-bg.scss
+++ b/pingcap-jp/css/components/cards/card-bg.scss
@@ -11,27 +11,29 @@
 	&:hover {
 		transform: translateY(-12px);
 		.button-link {
-			.button__arrow {
+			&:after {
 				background-color: #fff;
-				&::before {
-					border-color: #000;
-					transform: rotate(0);
-				}
-				&::after {
-					top: 0;
-					border-color: #000;
-					transform: rotate(45deg);
-				}
+				border-radius: 50%;
+				color: #000;
+				transform: rotate(45deg);
 			}
 		}
 	}
 	&__content {
 		flex: 1;
 		margin-bottom: 20px;
+		font-size: 16px;
+		font-weight: 300;
+		line-height: 26px;
+		color: #fff;
 		img {
 			width: 60px;
 			height: 80px;
 		}
+		a,
+		p {
+			color: #fff !important;
+		}
 	}
 	&__title {
 		font-size: 24px;
diff --git a/pingcap-jp/css/components/footer.scss b/pingcap-jp/css/components/footer.scss
index 484e359..27305e0 100644
--- a/pingcap-jp/css/components/footer.scss
+++ b/pingcap-jp/css/components/footer.scss
@@ -146,7 +146,7 @@
 
 	&__language-select {
 		color: #fff;
-		display: flex;
+		display: inline-flex;
 		align-items: center;
 		gap: 0.8rem;
 		padding-bottom: 1rem;
diff --git a/pingcap-jp/css/components/header.scss b/pingcap-jp/css/components/header.scss
index 3808a71..0fe8742 100644
--- a/pingcap-jp/css/components/header.scss
+++ b/pingcap-jp/css/components/header.scss
@@ -43,17 +43,11 @@ html.mobile-menu-cta-active {
 		&:hover {
 			background-color: #87120c;
 			.button-link {
-				.button__arrow {
+				&:after {
 					background-color: #fff;
-					&::before {
-						border-color: #000;
-						transform: rotate(0);
-					}
-					&::after {
-						top: 0;
-						border-color: #000;
-						transform: rotate(45deg);
-					}
+					border-radius: 50%;
+					color: #000;
+					transform: rotate(45deg);
 				}
 			}
 		}
@@ -95,14 +89,6 @@ html.mobile-menu-cta-active {
 			.button-link {
 				color: #000;
 			}
-			.button__arrow {
-				&::before {
-					border-color: #000;
-				}
-				&::after {
-					border-color: #000;
-				}
-			}
 			&:hover {
 				a,
 				.button-link {
diff --git a/pingcap-jp/css/iconfont.scss b/pingcap-jp/css/iconfont.scss
index d2007c0..d458027 100644
--- a/pingcap-jp/css/iconfont.scss
+++ b/pingcap-jp/css/iconfont.scss
@@ -1,8 +1,8 @@
 @font-face {
 	font-family: "iconfont"; /* Project id 4677496 */
-	src: local(""), url("#{$fonts-url-base}/fonts/iconfont/iconfont.woff?t=1730186159719") format("woff"),
-		url("#{$fonts-url-base}/fonts/iconfont/iconfont.woff2?t=1730186159719") format("woff2"),
-		url("#{$fonts-url-base}/fonts/iconfont/iconfont.ttf?t=1730186159719") format("truetype");
+	src: local(""), url("#{$fonts-url-base}/fonts/iconfont/iconfont.woff?t=1732527762695") format("woff"),
+		url("#{$fonts-url-base}/fonts/iconfont/iconfont.woff2?t=1732527762695") format("woff2"),
+		url("#{$fonts-url-base}/fonts/iconfont/iconfont.ttf?t=1732527762695") format("truetype");
 }
 
 [class^="icon-"],
@@ -25,6 +25,14 @@
 	-moz-osx-font-smoothing: grayscale;
 }
 
+.icon-arrow-secondary:before {
+  content: "\e64c";
+}
+
+.icon-arrow:before {
+  content: "\e64b";
+}
+
 .icon-newspaper:before {
   content: "\e64a";
 }
@@ -232,4 +240,3 @@
 .icon-globe:before {
   content: "\e617";
 }
-  
\ No newline at end of file
diff --git a/pingcap-jp/css/master.scss b/pingcap-jp/css/master.scss
index 2c8aa2c..cf648aa 100644
--- a/pingcap-jp/css/master.scss
+++ b/pingcap-jp/css/master.scss
@@ -162,4 +162,6 @@ Templates
 @import "templates/product";
 @import "templates/ai";
 @import "templates/trust";
-@import "templates/operation";
\ No newline at end of file
+@import "templates/operation";
+@import "templates/modernize";
+@import "templates/saas";
diff --git a/pingcap-jp/css/scaffold/buttons.scss b/pingcap-jp/css/scaffold/buttons.scss
index 35a1194..acd7159 100644
--- a/pingcap-jp/css/scaffold/buttons.scss
+++ b/pingcap-jp/css/scaffold/buttons.scss
@@ -176,8 +176,8 @@ input[type="submit"],
 
 	&-group {
 		display: flex;
-		flex-wrap: wrap;
 		gap: 3.2rem;
+		flex-wrap: wrap;
 		&.center {
 			justify-content: center;
 		}
@@ -199,12 +199,13 @@ input[type="submit"],
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-	width: 15.8rem;
+	padding: 0 40px 0 14px;
 	height: 4rem;
 	border: none;
 	font-size: 1.7rem;
 	line-height: 2.5rem;
 	font-weight: 500;
+	white-space: nowrap;
 	text-decoration: none;
 	background-color: #fff;
 	color: #000;
@@ -215,37 +216,42 @@ input[type="submit"],
 	cursor: pointer;
 
 	span {
-		position: relative;
-		z-index: 1;
 		color: #000;
-		transition: color 0.15s ease-in-out;
 	}
 
 	&.sm {
 		font-size: 15px;
 		line-height: 2.3rem;
-		width: 14.6rem;
-		height: 4rem;
 	}
 
 	&.lg {
-		width: 23rem;
-		height: 4rem;
+		min-width: 23rem;
 	}
 
 	&::before {
 		content: "";
 		position: absolute;
+		bottom: -100%;
 		left: 0;
 		right: 0;
-		bottom: -100%;
-		width: 34px;
-		height: 34px;
-		border-radius: 50%;
+		top: 0;
 		margin: auto;
-		background: #dc150b;
 		z-index: -1;
+		width: 30%;
+		border-radius: 99999px;
+		background: #dc150b;
 		transition: 0.5s ease-in-out;
+		transform: translateY(50%);
+	}
+	&::after {
+		content: "\e64b";
+		font-family: iconfont !important;
+		font-style: normal;
+		-webkit-font-smoothing: antialiased;
+		position: absolute;
+		right: 14px;
+		font-size: 10px;
+		line-height: 1;
 	}
 
 	&:hover {
@@ -254,14 +260,7 @@ input[type="submit"],
 			color: #fff;
 		}
 		&::before {
-			bottom: -15px;
-			transform: scale(8);
-		}
-		.button__arrow {
-			&::before,
-			&::after {
-				border-color: #fff;
-			}
+			transform: scale(6);
 		}
 	}
 }
@@ -273,99 +272,45 @@ input[type="submit"],
 	align-items: center;
 	font-size: 1.6rem;
 	font-weight: 500;
+	padding-right: 32px;
 	color: #fff;
 	line-height: 22px;
 	white-space: noWrap;
 	text-decoration: none;
 	transition: all var(--default-transition-params);
 
-	.button__arrow {
-		width: 20px;
-		height: 20px;
-		border-radius: 50%;
-		margin-left: 1rem;
+	&::after {
+		content: "\e64c";
+		font-family: iconfont !important;
+		font-style: normal;
+		-webkit-font-smoothing: antialiased;
+		position: absolute;
+		right: 0;
+		font-size: 20px;
+		padding: 1px;
+		line-height: 1;
 		background-color: transparent;
-		transition: 0.4s ease-in-out;
-		&::before {
-			border-color: #fff;
-			right: 3px;
-			width: 15px;
-			transition: 0.2s ease-in-out;
-		}
-		&::after {
-			right: 4px;
-			top: -4px;
-			border-color: #fff;
-			width: 9px;
-			height: 9px;
-			transition: 0.2s ease-in-out;
-		}
+		transition: transform var(--default-transition-params);
 	}
 
 	&.lg {
-		font-size: 2.1rem;
-		.button__arrow {
-			width: 22px;
-			height: 22px;
-			margin-left: 1.2rem;
-			&::before {
-				right: 2px;
-				width: 18px;
-			}
-			&::after {
-				width: 10px;
-				height: 10px;
-			}
+		font-size: 21px;
+		padding-right: 36px;
+		&:after {
+			font-size: 24px;
 		}
 	}
 
 	&:hover {
-		.button__arrow {
+		&:after {
 			background-color: #fff;
-			&::before {
-				border-color: #000;
-				transform: rotate(0);
-			}
-			&::after {
-				top: 0;
-				border-color: #000;
-				transform: rotate(45deg);
-			}
+			border-radius: 50%;
+			color: #000;
+			transform: rotate(45deg);
 		}
 	}
 }
 
 .button__arrow {
-	position: relative;
-	margin-left: 16px;
-	width: 8px;
-	height: 8px;
-	display: block;
-	transition: 0.2s ease-in-out;
-
-	&::before {
-		content: "";
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		right: -1px;
-		width: 10px;
-		height: 0px;
-		border-top: 1px solid #000;
-		transform: rotate(-45deg);
-		margin: auto;
-	}
-
-	&::after {
-		content: "";
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		right: 0;
-		width: 8px;
-		height: 8px;
-		border-top: 1px solid #000;
-		border-right: 1px solid #000;
-		margin: auto;
-	}
+	display: none;
 }
diff --git a/pingcap-jp/css/templates/front-page.scss b/pingcap-jp/css/templates/front-page.scss
index c4a311e..cf5b37d 100644
--- a/pingcap-jp/css/templates/front-page.scss
+++ b/pingcap-jp/css/templates/front-page.scss
@@ -1,4 +1,6 @@
 .tmpl-front-page {
+	background-color: #000;
+
 	.deploy {
 		background: linear-gradient(180deg, #06111a 55.9%, #000000 100%);
 		.contain {
@@ -122,17 +124,11 @@
 			&:hover {
 				transform: translateY(-12px);
 				.button-link {
-					.button__arrow {
+					&:after {
 						background-color: #fff;
-						&::before {
-							border-color: #000;
-							transform: rotate(0);
-						}
-						&::after {
-							top: 0;
-							border-color: #000;
-							transform: rotate(45deg);
-						}
+						border-radius: 50%;
+						color: #000;
+						transform: rotate(45deg);
 					}
 				}
 			}
@@ -220,15 +216,11 @@
 				text-decoration: none;
 				cursor: pointer;
 				&:hover {
-					.button__arrow {
-						background-color: #fff;
-						&::before {
-							border-color: #000;
-							transform: rotate(0);
-						}
-						&::after {
-							top: 0;
-							border-color: #000;
+					.button-link {
+						&:after {
+							background-color: #fff;
+							border-radius: 50%;
+							color: #000;
 							transform: rotate(45deg);
 						}
 					}
@@ -274,7 +266,7 @@
 						color: #5d6974;
 					}
 				}
-				.text-right{
+				.text-right {
 					display: block;
 				}
 			}
@@ -314,7 +306,7 @@
 			height: auto;
 		}
 		a {
-			color: #fff!important;
+			color: #fff !important;
 		}
 		.hs-button {
 			letter-spacing: 0;
diff --git a/pingcap-jp/css/templates/modernize.scss b/pingcap-jp/css/templates/modernize.scss
new file mode 100644
index 0000000..d9308bf
--- /dev/null
+++ b/pingcap-jp/css/templates/modernize.scss
@@ -0,0 +1,75 @@
+.tmpl-modernize {
+	&__scale {
+		background: linear-gradient(180deg, #06111a 0%, #000000 100%);
+		.block-columns__column {
+			@include media-min($large) {
+				display: flex;
+				gap: 50px;
+				.block-title {
+					flex: 1;
+				}
+				.cards {
+					flex: 1.5;
+				}
+			}
+		}
+		.cards {
+			display: grid;
+			grid-template-columns: repeat(2, 1fr);
+			gap: 80px 50px;
+			align-self: flex-start;
+			margin-top: 32px;
+			.card {
+				flex: 1;
+				font-size: 24px;
+				font-weight: 700;
+				line-height: 30px;
+				text-align: left;
+				color: #5d6974;
+			}
+			h3 {
+				font-size: 40px;
+				line-height: 48px;
+				font-weight: 700;
+				letter-spacing: -0.08em;
+				text-align: left;
+				color: #1aa8a8;
+                @include media-min($medium) {
+                    font-size: 64px;
+                    line-height: 70px;
+                }
+			}
+		}
+	}
+	&__proven {
+		.block-title {
+			@include media-min($large) {
+				display: flex;
+				gap: 32px;
+				.desc {
+					margin-top: 32px;
+				}
+			}
+		}
+		.cards {
+			@include media-min($medium) {
+				display: flex;
+			}
+			margin-bottom: 80px;
+		}
+		.card {
+			border: 1px solid #2f353a;
+			padding: 24px 24px 40px 24px;
+			flex: 1;
+			img {
+				margin-bottom: 24px;
+			}
+			p {
+				color: #a2adb9;
+				font-size: 16px;
+				font-weight: 300;
+				line-height: 24px;
+			}
+		}
+	}
+}
diff --git a/pingcap-jp/css/templates/saas.scss b/pingcap-jp/css/templates/saas.scss
new file mode 100644
index 0000000..31438cd
--- /dev/null
+++ b/pingcap-jp/css/templates/saas.scss
@@ -0,0 +1,245 @@
+.tmpl-saas {
+	&__banner {
+		background-color: #000;
+		background-size: contain;
+
+		@include media-min($xlarge) {
+			background-size: cover;
+		}
+		@include media-min($large) {
+			.banner-default__text-content--center {
+				padding-top: 120px;
+				padding-bottom: 200px;
+				grid-column: 3 / span 8;
+			}
+
+			h1 {
+				font-size: 72px;
+				line-height: 86px;
+			}
+		}
+		p {
+			font-weight: 300;
+			text-align: center;
+			color: #a2adb9;
+			margin-left: auto;
+			margin-right: auto;
+			@include media-min($large) {
+				font-size: 26px;
+				line-height: 34px;
+			}
+			+ p {
+				margin-top: 36px;
+			}
+		}
+	}
+	&__logo {
+		h2 {
+			font-size: clamp(30px, 3.25vw, 36px);
+		}
+		@include media-min($large) {
+			.block-logos__logo {
+				width: 74%;
+				margin: auto;
+			}
+			.block-logos__logo-grid {
+				grid-template-columns: repeat(5, 1fr);
+			}
+		}
+	}
+	&__icon-grid {
+		@include media-min($large) {
+			.block-icon-grid__item-container {
+				margin: auto;
+				width: 80%;
+			}
+		}
+		.block-icon-grid__item {
+			p {
+				color: #a2adb9;
+			}
+		}
+	}
+	&__feature {
+		.block-inner {
+			@include media-min($large) {
+				display: flex;
+				gap: 64px !important;
+			}
+			.block-section__title-container {
+				flex: 1;
+				display: block;
+				h2 {
+					font-size: 40px;
+					font-weight: 700;
+					line-height: 48px;
+					@include media-min($medium) {
+						font-size: 60px;
+						line-height: 74px;
+						text-align: left;
+					}
+				}
+			}
+			.block-section__title-desc {
+				font-size: 22px;
+				font-weight: 300;
+				line-height: 28px;
+				text-align: left;
+				color: #5d6974;
+				margin-top: 32px;
+			}
+			.block-icon-grid__item-container {
+				flex: 2;
+			}
+		}
+	}
+	&__compare {
+		.block-title {
+			@include media-min($large) {
+				display: flex;
+				gap: 64px;
+				.desc {
+					width: 100%;
+				}
+				> div,
+				h4 {
+					flex: 1;
+				}
+			}
+			h4 {
+				margin-top: 0;
+			}
+		}
+		.table {
+			overflow: hidden;
+			overflow-x: auto;
+			display: flex;
+			.row {
+				color: #fff;
+				flex: 1;
+				min-width: 140px;
+				div {
+					height: 64px;
+					display: flex;
+					align-items: center;
+					font-size: 16px;
+					font-weight: 500;
+					line-height: 22px;
+					text-align: center;
+					justify-content: center;
+					padding: 20px 5px;
+					background: #000;
+					&:nth-of-type(even) {
+						background: #07121a;
+					}
+					&:first-child {
+						height: 68px;
+					}
+				}
+				&:first-child {
+					flex: 1.8;
+					position: sticky;
+					left: 0;
+					z-index: 1;
+					div {
+						font-size: 20px;
+						font-weight: 500;
+						line-height: 22px;
+						text-align: left;
+						justify-content: flex-start;
+					}
+				}
+				&:last-child {
+					border-radius: 6px;
+					border: 2px solid transparent;
+					overflow: hidden;
+					position: relative;
+					div {
+						background: rgba(1, 84, 87);
+						&:nth-of-type(even) {
+							background: #004043;
+						}
+						&::after {
+							content: "";
+							position: absolute;
+							left: 0;
+							top: 0;
+							right: 0;
+							bottom: 2px;
+							border: 2px solid;
+							border-image: linear-gradient(180deg, #18ffc9 0%, #22a62a 100%) 1;
+						}
+					}
+				}
+				.line {
+					position: relative;
+					&:after {
+						content: "";
+						position: absolute;
+						width: 10px;
+						height: 1px;
+						background: #414b52;
+					}
+				}
+			}
+		}
+		.table-tip {
+			color: #a2adb9;
+			font-size: 16px;
+			font-weight: 300;
+			line-height: 22px;
+			text-align: right;
+			margin-top: 20px;
+			@include media-min($medium) {
+				display: none;
+			}
+		}
+	}
+	&__customers {
+		background: linear-gradient(358.26deg, #ffffff 3.54%, #dde2e6 100.25%);
+		.cards {
+			--num-cols: 1;
+
+			display: grid;
+			grid-template-columns: repeat(var(--num-cols), 1fr);
+			gap: var(--grid-column-gutter);
+
+			@include media-min($medium) {
+				--num-cols: 2;
+			}
+
+			@include media-min($large) {
+				--num-cols: 3;
+			}
+		}
+		.card {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			padding: 3rem 3.2rem 3.2rem;
+			text-decoration: none;
+			border: 1px solid var(--card-border-color);
+			border-radius: var(--card-border-radius);
+			transition: all var(--default-transition-params);
+			cursor: pointer;
+			&-content {
+				flex: 1;
+				margin-bottom: 30px;
+			}
+			img {
+				margin-bottom: 48px;
+				height: 43px;
+				width: auto;
+			}
+			p {
+				font-size: 16px;
+				font-weight: 300;
+				line-height: 24px;
+			}
+			&:hover {
+				box-shadow: var(--card-box-shadow);
+				transform: var(--card-transform);
+			}
+		}
+	}
+}
diff --git a/pingcap-jp/fonts/iconfont/iconfont.ttf b/pingcap-jp/fonts/iconfont/iconfont.ttf
index 1e8996d..b93eebf 100644
Binary files a/pingcap-jp/fonts/iconfont/iconfont.ttf and b/pingcap-jp/fonts/iconfont/iconfont.ttf differ
diff --git a/pingcap-jp/fonts/iconfont/iconfont.woff b/pingcap-jp/fonts/iconfont/iconfont.woff
index 9528830..1bdc9a8 100644
Binary files a/pingcap-jp/fonts/iconfont/iconfont.woff and b/pingcap-jp/fonts/iconfont/iconfont.woff differ
diff --git a/pingcap-jp/fonts/iconfont/iconfont.woff2 b/pingcap-jp/fonts/iconfont/iconfont.woff2
index affead5..9b63c63 100644
Binary files a/pingcap-jp/fonts/iconfont/iconfont.woff2 and b/pingcap-jp/fonts/iconfont/iconfont.woff2 differ
diff --git a/pingcap-jp/js/blocks/carousel.js b/pingcap-jp/js/blocks/carousel.js
index 77541cd..43e6cb9 100644
--- a/pingcap-jp/js/blocks/carousel.js
+++ b/pingcap-jp/js/blocks/carousel.js
@@ -1,113 +1,101 @@
-import { loadEmblaCarousel } from "../util/load-dependencies";
-import { enableNavButtons } from "../util/embla/util";
-import EmblaPagination from "../util/embla/pagination";
-import SiteEvents, { SiteEventNames } from "../util/site-events";
-import EmblaAutoplay, { stopAutoplayOnHover } from "../util/embla/autoplay";
-import ClassNames from "embla-carousel-class-names";
+import { loadEmblaCarousel } from '../util/load-dependencies';
+import { enableNavButtons } from '../util/embla/util';
+import EmblaPagination from '../util/embla/pagination';
+import SiteEvents, { SiteEventNames } from '../util/site-events';
+import EmblaAutoplay, { stopAutoplayOnHover } from '../util/embla/autoplay';
 
 class BlockCarousel {
-  constructor(el) {
-    this.el = el;
-    this.emblaInitialized = false;
-
-    this.initEmbla();
-  }
-
-  async initEmbla() {
-    // skip the initialization if the initilialized flag has already been set
-    if (this.emblaInitialized) {
-      return;
-    }
-
-    try {
-      const EmblaCarousel = await loadEmblaCarousel();
-      const emblaRootEl = this.el.querySelector(".embla-instance");
-
-      if (!emblaRootEl) {
-        return;
-      }
-
-      const emblaEl = emblaRootEl.querySelector(".embla");
-      const btnPrevEl = Array.from(
-        this.el.querySelectorAll(".embla__nav-button--prev")
-      );
-      const btnNextEl = Array.from(
-        this.el.querySelectorAll(".embla__nav-button--next")
-      );
-      const paginationEl = this.el.querySelector(".embla__pagination");
-
-      const transitionSpeed = emblaRootEl
-        ? parseInt(emblaRootEl.getAttribute("data-transition-speed") || 10, 10)
-        : 10;
-
-      const autoplayEnabled = emblaRootEl
-        ? parseInt(emblaRootEl.getAttribute("data-autoplay-enabled") || 1, 10)
-        : 1;
-
-      const autoplaySpeed = emblaRootEl
-        ? parseInt(emblaRootEl.getAttribute("data-autoplay-speed") || 4000, 10)
-        : 4000;
-
-      const instance = {
-        embla: EmblaCarousel(
-          emblaEl,
-          {
-            loop: autoplayEnabled,
-            speed: transitionSpeed,
-            containScroll: "keepSnaps",
-            draggable: false,
-          },
-          [ClassNames()]
-        ),
-        pagination: null,
-        autoplay: autoplayEnabled,
-      };
-
-      if (instance.embla) {
-        instance.embla.on("init", (a, b, c) => {
-          SiteEvents.publish(SiteEventNames.IMAGEBUDDY_TRIGGER_UPDATE);
-          this.setBackgroundColor();
-        });
-
-        instance.embla.on("select", (a, b, c) => {
-          this.setBackgroundColor();
-        });
-
-        if (btnPrevEl && btnNextEl) {
-          enableNavButtons(instance.embla, btnPrevEl, btnNextEl);
-        }
-
-        if (paginationEl) {
-          instance.pagination = new EmblaPagination(
-            instance.embla,
-            paginationEl,
-            {
-              buttonClassName: "embla__pagination-button",
-            }
-          );
-        }
-
-        if (autoplayEnabled) {
-          instance.autoplay = new EmblaAutoplay(instance.embla, autoplaySpeed);
-
-          stopAutoplayOnHover(emblaRootEl, instance.autoplay, 2000);
-        }
-      }
-
-      this.emblaInitialized = true;
-    } catch (err) {
-      console.error("Embla Carousel dynamic import failed", err);
-    }
-  }
-
-  setBackgroundColor() {
-    const color = this.el
-      .querySelector(".is-snapped")
-      .getAttribute("data-color");
-    if (color) {
-      this.el.style.backgroundColor = color;
-    }
-  }
+	constructor(el) {
+		this.el = el;
+		this.emblaInitialized = false;
+
+		this.initEmbla();
+	}
+
+	async initEmbla() {
+		// skip the initialization if the initilialized flag has already been set
+		if (this.emblaInitialized) {
+			return;
+		}
+
+		try {
+			const EmblaCarousel = await loadEmblaCarousel();
+			const emblaRootEl = this.el.querySelector('.embla-instance');
+
+			if (!emblaRootEl) {
+				return;
+			}
+
+			const emblaEl = emblaRootEl.querySelector('.embla');
+			const emblaSlideEl = Array.from(this.el.querySelectorAll('.embla__slide'));
+			const btnPrevEl = Array.from(this.el.querySelectorAll('.embla__nav-button--prev'));
+			const btnNextEl = Array.from(this.el.querySelectorAll('.embla__nav-button--next'));
+			const paginationEl = this.el.querySelector('.embla__pagination');
+
+			const transitionSpeed = emblaRootEl
+				? parseInt(emblaRootEl.getAttribute('data-transition-speed') || 10, 10)
+				: 10;
+
+			const autoplayEnabled = emblaRootEl
+				? parseInt(emblaRootEl.getAttribute('data-autoplay-enabled') || 1, 10)
+				: 1;
+
+			const autoplaySpeed = emblaRootEl
+				? parseInt(emblaRootEl.getAttribute('data-autoplay-speed') || 4000, 10)
+				: 4000;
+
+			const loop = emblaSlideEl.length > 2 ? autoplayEnabled : false;
+
+			const instance = {
+				embla: EmblaCarousel(emblaEl, {
+					loop,
+					speed: transitionSpeed,
+					containScroll: 'keepSnaps',
+					draggable: false
+				}),
+				pagination: null,
+				autoplay: autoplayEnabled
+			};
+
+			if (instance.embla) {
+				instance.embla.on('init', () => {
+					SiteEvents.publish(SiteEventNames.IMAGEBUDDY_TRIGGER_UPDATE);
+					this.setBackgroundColor();
+				});
+
+				instance.embla.on('select', () => {
+					this.setBackgroundColor();
+				});
+
+				if (btnPrevEl && btnNextEl) {
+					enableNavButtons(instance.embla, btnPrevEl, btnNextEl);
+				}
+
+				if (paginationEl) {
+					instance.pagination = new EmblaPagination(instance.embla, paginationEl, {
+						buttonClassName: 'embla__pagination-button'
+					});
+				}
+
+				if (autoplayEnabled) {
+					instance.autoplay = new EmblaAutoplay(instance.embla, autoplaySpeed);
+
+					stopAutoplayOnHover(emblaRootEl, instance.autoplay, 2000);
+				}
+			}
+
+			this.emblaInitialized = true;
+		} catch (err) {
+			console.error('Embla Carousel dynamic import failed', err);
+		}
+	}
+
+	setBackgroundColor() {
+		const color = this.el.querySelector('.is-selected').getAttribute('data-color');
+		if (color) {
+			this.el.style.backgroundColor = color;
+		}
+	}
 }
 
 export default BlockCarousel;
diff --git a/pingcap-jp/post-types/slides.php b/pingcap-jp/post-types/slides.php
index 819f5ef..9d5d02f 100644
--- a/pingcap-jp/post-types/slides.php
+++ b/pingcap-jp/post-types/slides.php
@@ -7,12 +7,12 @@
 	[
 		'label' => $plural_label,
 		'description' => '',
-		'public' => false,
+		'public' => true,
 		'publicly_queryable'  => true,
 		'show_ui' => true,
 		'show_in_menu' => true,
 		'show_in_rest' => true,
-		'capability_type' => 'page',
+		'capability_type' => 'post',
 		'map_meta_cap' => true,
 		'hierarchical' => false,
 		'rewrite' => [
diff --git a/pingcap-jp/templates/single-slides.php b/pingcap-jp/templates/single-slides.php
new file mode 100644
index 0000000..a422037
--- /dev/null
+++ b/pingcap-jp/templates/single-slides.php
@@ -0,0 +1,3 @@
+<?php
+wp_redirect(get_post_type_archive_link(PingCAP\Constants\CPT::SLIDES));
+exit;