diff --git a/src/blogs b/src/blogs
index 3424abe0d..2c705707c 160000
--- a/src/blogs
+++ b/src/blogs
@@ -1 +1 @@
-Subproject commit 3424abe0d630af684fc7646e84fc55546e86fba3
+Subproject commit 2c705707c51981faf83f65162affed09ca50ad84
diff --git a/src/components/card/solutionCard/index.module.less b/src/components/card/solutionCard/index.module.less
index 7f527e926..aac7803f8 100644
--- a/src/components/card/solutionCard/index.module.less
+++ b/src/components/card/solutionCard/index.module.less
@@ -8,7 +8,7 @@
   width: 100%;
   height: 100%;
   border: 1px solid var(--color-card-border);
-  border-radius: 4px;
+  border-radius: 12px;
   text-decoration: none;
   color: var(--color-doc-primary);
   padding: 16px 19px;
diff --git a/src/components/icons/ArrowRightAltIcon.tsx b/src/components/icons/ArrowRightAltIcon.tsx
new file mode 100644
index 000000000..44d5ef8e1
--- /dev/null
+++ b/src/components/icons/ArrowRightAltIcon.tsx
@@ -0,0 +1,20 @@
+export const ArrowRightAltIcon = (props: { size?: number; color?: string }) => {
+  const { size = 14, color = '#00131A' } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 14 14"
+      fill="none"
+    >
+      <path
+        d="M2 7L12.7244 7M12.7244 7L7.57669 12.1477M12.7244 7L7.5767 1.85228"
+        stroke="#00131A"
+        stroke-width="1.3"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
diff --git a/src/docs b/src/docs
index d2a3a661c..b29021644 160000
--- a/src/docs
+++ b/src/docs
@@ -1 +1 @@
-Subproject commit d2a3a661c01b1e0e07ddacae15eaaf925d4373cf
+Subproject commit b290216440bb232b8c450df5e4210888042b9240
diff --git a/src/pages/community.jsx b/src/pages/community.jsx
index 55be0bc94..224468483 100644
--- a/src/pages/community.jsx
+++ b/src/pages/community.jsx
@@ -3,7 +3,7 @@ import Link from 'next/link';
 import Layout from '@/components/layout/commonLayout';
 import { useTranslation } from 'react-i18next';
 import { DISCORD_INVITE_URL } from '@/consts';
-import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt';
+import { ArrowRightAltIcon } from '@/components/icons/ArrowRightAltIcon';
 import MailOutlineIcon from '@mui/icons-material/MailOutline';
 import classes from '@/styles/community.module.less';
 import pageClasses from '@/styles/responsive.module.less';
@@ -111,91 +111,94 @@ export default function Community() {
           />
         </Head>
 
-        <section className={clsx(pageClasses.container, classes.headSection)}>
-          <h1 className="">{t('title')}</h1>
+        <div className={classes.communityPageContainer}>
+          <section className={clsx(pageClasses.container, classes.headSection)}>
+            <h1 className="">{t('title')}</h1>
 
-          <ul className={classes.mediaWrapper}>
-            {socialMediaList.map(v => (
-              <li key={v.label}>
-                <img src={v.imgUrl} alt={v.label} />
-                <p className="">{v.label}</p>
-                <Link href={v.href}>Join now</Link>
-              </li>
-            ))}
-          </ul>
+            <ul className={classes.mediaWrapper}>
+              {socialMediaList.map(v => (
+                <li key={v.label}>
+                  <img src={v.imgUrl} alt={v.label} />
+                  <p className="">{v.label}</p>
+                  <CustomButton variant="outlined" href={v.href}>
+                    Join now
+                  </CustomButton>
+                </li>
+              ))}
+            </ul>
 
-          <div className={classes.officeHoursContainer}>
-            <div className={classes.imgWrapper}>
-              <img src="/images/community/event-discord.png" alt="Discord" />
-            </div>
-            <div className={classes.contentWrapper}>
-              <h2 className={classes.title}>{t('officeHours.title')}</h2>
-              <p className={classes.desc}>{t('officeHours.content')}</p>
+            <div className={classes.officeHoursContainer}>
+              <div className={classes.imgWrapper}>
+                <img src="/images/community/event-discord.png" alt="Discord" />
+              </div>
+              <div className={classes.contentWrapper}>
+                <h2 className={classes.title}>{t('officeHours.title')}</h2>
+                <p className={classes.desc}>{t('officeHours.content')}</p>
 
-              <CustomButton
-                variant="contained"
-                className={classes.linkBtn}
-                href={OFFICE_HOUR_REGISTER_LINK}
-                target="_blank"
-              >
-                {t('officeHours.button')}
-              </CustomButton>
+                <CustomButton
+                  variant="contained"
+                  className={classes.linkBtn}
+                  href={OFFICE_HOUR_REGISTER_LINK}
+                  target="_blank"
+                >
+                  {t('officeHours.button')}
+                </CustomButton>
+              </div>
             </div>
-          </div>
-        </section>
-
-        <section
-          className={clsx(pageClasses.container, classes.contentSection)}
-        >
-          <h2>{t('community.title')}</h2>
-          <h3 className={classes.sectionDesc}>{t('community.content')}</h3>
+          </section>
 
-          <ul className={classes.featureWrapper}>
-            {featureList.map(v => (
-              <li key={v.label}>
-                <img src={v.icon} alt={v.label} />
-                <p className={classes.label}>{v.label}</p>
-                <p className={classes.desc}>{v.desc}</p>
-              </li>
-            ))}
-          </ul>
-        </section>
+          <section
+            className={clsx(pageClasses.container, classes.contentSection)}
+          >
+            <h2>{t('community.title')}</h2>
+            <h3 className={classes.sectionDesc}>{t('community.content')}</h3>
 
-        <section className={classes.resourceSection}>
-          <div className={clsx(pageClasses.container, classes.innerSection)}>
-            <h2>{t('resource')}</h2>
-            <ul className={classes.resourceList}>
-              {resourceList.map(v => (
+            <ul className={classes.featureWrapper}>
+              {featureList.map(v => (
                 <li key={v.label}>
-                  <div className={classes.topContent}>
-                    <img src={v.icon} alt={v.label} />
-                    <p className={classes.label}>{v.label}</p>
-                    <p className={classes.desc}>{v.desc}</p>
-                  </div>
-
-                  <Link href={v.href} className={classes.linkBtn}>
-                    {v.btnLabel}
-                    <ArrowRightAltIcon />
-                  </Link>
+                  <img src={v.icon} alt={v.label} />
+                  <p className={classes.label}>{v.label}</p>
+                  <p className={classes.desc}>{v.desc}</p>
                 </li>
               ))}
             </ul>
-          </div>
-        </section>
+          </section>
+
+          <section className={classes.resourceSection}>
+            <div className={clsx(pageClasses.container, classes.innerSection)}>
+              <h2>{t('resource')}</h2>
+              <ul className={classes.resourceList}>
+                {resourceList.map(v => (
+                  <li key={v.label}>
+                    <div className={classes.topContent}>
+                      <img src={v.icon} alt={v.label} />
+                      <p className={classes.label}>{v.label}</p>
+                      <p className={classes.desc}>{v.desc}</p>
+                    </div>
+
+                    <CustomButton variant="outlined" href={v.href}>
+                      {v.btnLabel} <ArrowRightAltIcon />
+                    </CustomButton>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </section>
 
-        <section
-          className={clsx(pageClasses.container, classes.mailListSection)}
-        >
-          <h2>{t('mail.title')}</h2>
-          <div className={classes.mailListWrapper}>
-            {mailList.map(v => (
-              <Link className={classes.linkBtn} href={v.href}>
-                <MailOutlineIcon />
-                <span>{v.label}</span>
-              </Link>
-            ))}
-          </div>
-        </section>
+          <section
+            className={clsx(pageClasses.container, classes.mailListSection)}
+          >
+            <h2>{t('mail.title')}</h2>
+            <div className={classes.mailListWrapper}>
+              {mailList.map(v => (
+                <Link className={classes.linkBtn} href={v.href}>
+                  <MailOutlineIcon fontSize="14" />
+                  <span>{v.label}</span>
+                </Link>
+              ))}
+            </div>
+          </section>
+        </div>
       </Layout>
     </main>
   );
diff --git a/src/parts/useCase/useCaseCard/index.module.less b/src/parts/useCase/useCaseCard/index.module.less
index ead05259e..a2ae769ec 100644
--- a/src/parts/useCase/useCaseCard/index.module.less
+++ b/src/parts/useCase/useCaseCard/index.module.less
@@ -19,23 +19,11 @@
     margin-bottom: 10px;
   }
 
-  .linkButton {
-    display: block;
-    padding: 10px 20px;
-    margin: 0;
-    outline: none;
-    border: 1px solid #00a1ea;
-    color: #00a1ea;
-    text-align: center;
-    font-family: 'Roboto Mono';
-    font-size: 14px;
+  .startLinkButton {
+    padding: 8px 28px;
+    width: 100%;
+    .paragraph4();
     font-weight: 500;
-    line-height: 18px;
-    border-radius: 19px;
-
-    &:hover {
-      border-color: #1493cc;
-      color: #1493cc;
-    }
+    justify-content: center;
   }
 }
diff --git a/src/parts/useCase/useCaseCard/index.tsx b/src/parts/useCase/useCaseCard/index.tsx
index b8262add4..3c0088cd0 100644
--- a/src/parts/useCase/useCaseCard/index.tsx
+++ b/src/parts/useCase/useCaseCard/index.tsx
@@ -1,4 +1,5 @@
 import styles from './index.module.less';
+import CustomButton from '@/components/customButton';
 
 export default function UseCaseCard({ useCase }) {
   const { name, logo, description, link, cta_label } = useCase;
@@ -8,14 +9,16 @@ export default function UseCaseCard({ useCase }) {
       <img src={logo} alt={name} />
       <p className={styles.desc}>{description}</p>
       {link && (
-        <a
+        <CustomButton
           href={link}
           target="_blank"
-          rel="noreferrer"
-          className={styles.linkButton}
+          variant="outlined"
+          classes={{
+            root: styles.startLinkButton,
+          }}
         >
           {cta_label}
-        </a>
+        </CustomButton>
       )}
     </div>
   );
diff --git a/src/styles/community.module.less b/src/styles/community.module.less
index 28e019995..38f265781 100644
--- a/src/styles/community.module.less
+++ b/src/styles/community.module.less
@@ -4,6 +4,7 @@
   margin: 0 auto;
   padding-bottom: 40px;
   font-family: 'Inter';
+  background-color: @color-white1;
 }
 
 .headSection {
@@ -38,13 +39,13 @@
       display: flex;
       flex-direction: column;
       gap: 12px;
-      border: 1px solid var(--color-grey-04);
-      border-radius: 8px;
+      border-radius: 12px;
       align-items: center;
+      background-color: @color-white;
 
       img {
         width: 50px;
-        height: 50px;
+        height: 55px;
       }
 
       p {
@@ -55,21 +56,9 @@
       }
 
       a {
-        padding: 10px 20px;
         width: 100%;
-        text-align: center;
-        font-family: Roboto Mono;
-        font-size: 14px;
-        font-weight: 500;
-        line-height: 18px;
-        border: 1px solid #00a1ea;
-        border-radius: 20px;
-        color: #00a1ea;
-
-        &:hover {
-          color: #12389a;
-          border-color: #12389a;
-        }
+        font-weight: 400;
+        justify-content: center;
       }
     }
   }
@@ -137,14 +126,12 @@
 
       .linkBtn {
         color: #fff;
-        border-color: #00dcc6;
+        border-color: #fff;
         background-color: transparent;
-        color: #00dcc6;
+        color: #fff;
 
         &:hover {
-          border-color: #2c9986;
           background-color: transparent;
-          color: #2c9986;
         }
       }
     }
@@ -152,7 +139,7 @@
 }
 
 .contentSection {
-  padding: 60px 0;
+  padding: 40px 0;
   margin: 0 auto;
 
   h2 {
@@ -177,7 +164,7 @@
 
   .featureWrapper {
     display: flex;
-    gap: 40px;
+    gap: 30px;
     list-style: none;
 
     @media @tablet {
@@ -192,7 +179,10 @@
       flex: 1;
       display: flex;
       flex-direction: column;
-      gap: 8px;
+      gap: 20px;
+      background-color: @color-white;
+      padding: 25px 22px;
+      border-radius: 12px;
 
       img {
         width: 30px;
@@ -217,7 +207,7 @@
 }
 
 .resourceSection {
-  padding: 50px 0;
+  padding: 40px 0;
   background-color: #f5f8fb;
 
   .innerSection {
@@ -235,7 +225,7 @@
 
   .resourceList {
     display: flex;
-    gap: 40px;
+    gap: 30px;
     list-style: none;
 
     @media @tablet {
@@ -251,7 +241,9 @@
       display: flex;
       flex-direction: column;
       justify-content: space-between;
-      gap: 10px;
+      gap: 20px;
+      background-color: @color-white;
+      padding: 25px 22px;
 
       .topContent {
         display: flex;
@@ -278,21 +270,8 @@
         line-height: 20px;
       }
 
-      .linkBtn {
-        display: flex;
-        align-items: center;
-        font-family: Roboto Mono;
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 500;
-        line-height: 18px;
-        gap: 4px;
-        transition: gap linear 0.2s;
-        color: #00a1ea;
-
-        &:hover {
-          gap: 8px;
-        }
+      a {
+        align-self: start;
       }
     }
   }
@@ -313,37 +292,29 @@
 
   .mailListWrapper {
     display: flex;
-    gap: 20px;
+    gap: 30px;
     justify-content: center;
     flex-wrap: wrap;
 
     .linkBtn {
-      flex: 0 0 auto;
-      padding: 10px 20px;
       display: flex;
+      padding: 14px 28px;
+      justify-content: center;
       align-items: center;
-      gap: 10px;
-
-      color: #00a1ea;
-      font-family: Roboto Mono;
+      gap: 8px;
+      flex: 1 0 0;
+      align-self: stretch;
+      border-radius: 6px;
+      background: var(--Black-100, #00131a);
+      color: #fff;
       font-size: 14px;
-      font-style: normal;
-      font-weight: 500;
-      line-height: 18px;
-      border: 1px solid #00a1ea;
-      border-radius: 20px;
+      font
 
       svg path {
-        fill: #00a1ea;
+        fill: #fff;
       }
 
       &:hover {
-        color: #12389a;
-        border-color: #12389a;
-
-        svg path {
-          fill: #12389a;
-        }
       }
     }
   }
diff --git a/src/styles/useCase.module.less b/src/styles/useCase.module.less
index 1ac8de768..6c9177ac9 100644
--- a/src/styles/useCase.module.less
+++ b/src/styles/useCase.module.less
@@ -1,7 +1,7 @@
 @import url('./global.module.less');
 
 .casePageContainer {
-  background-color: #f5f8fb;
+  background-color: @color-white1;
   min-height: 50vh;
   padding-bottom: 80px;