diff --git a/src/app/[language]/page.tsx b/src/app/[language]/page.tsx
index 4793d8e6..ef6a1637 100644
--- a/src/app/[language]/page.tsx
+++ b/src/app/[language]/page.tsx
@@ -16,12 +16,6 @@ import {
   DECODED_PAYLOAD_DESCRIPTION_KEY,
   DECODED_PAYLOAD_FORMAT_KEY,
 } from "@/features/decoder/config/decoder.config";
-import {
-  JWT_INFO_STATE_KEY,
-  JWT_WARNING_STATE_KEY,
-} from "@/features/home/config/home.config";
-import { HeroModalStateValues } from "@/features/home/values/hero-modal-state.values";
-import { getSanitizedHeroModalStateValue } from "@/features/common/services/hero.utils";
 import { getSanitizedDescriptionVisibilityValue } from "@/features/common/services/decoder.utils";
 import { ClaimDescriptionVisibilityValues } from "@/features/common/values/claim-description-visibility.values";
 import { getSanitizedDebuggerModeValues } from "@/features/common/services/debugger.utils";
@@ -60,15 +54,6 @@ export default function Home({
       cookies().get(DECODED_PAYLOAD_DESCRIPTION_KEY)?.value || null,
     ) || ClaimDescriptionVisibilityValues.VISIBLE;
 
-  const jwtInfoState =
-    getSanitizedHeroModalStateValue(
-      cookies().get(JWT_INFO_STATE_KEY)?.value || null,
-    ) || HeroModalStateValues.OPEN;
-  const jwtWarningState =
-    getSanitizedHeroModalStateValue(
-      cookies().get(JWT_WARNING_STATE_KEY)?.value || null,
-    ) || HeroModalStateValues.OPEN;
-
   const debuggerInitialMode: DebuggerModeValues =
     getSanitizedDebuggerModeValues(
       cookies().get(DEBUGGER_MODE_KEY)?.value || null,
@@ -81,8 +66,6 @@ export default function Home({
       decodedPayloadInitialTabId={decodedPayloadInitialTabId}
       decodedHeaderDescriptionVisibility={decodedHeaderDescriptionVisibility}
       decodedPayloadDescriptionVisibility={decodedPayloadDescriptionVisibility}
-      jwtInfoState={jwtInfoState}
-      jwtWarningState={jwtWarningState}
       // debuggerInitialMode={debuggerInitialMode}
     />
   );
diff --git a/src/features/common/components/headers/header/header.module.scss b/src/features/common/components/headers/header/header.module.scss
index 3f27108d..8843eb04 100644
--- a/src/features/common/components/headers/header/header.module.scss
+++ b/src/features/common/components/headers/header/header.module.scss
@@ -21,6 +21,9 @@
   @media #{$breakpoint-dimension-sm} {
     display: block;
   }
+  @media #{$breakpoint-dimension-xl} {
+    max-width: $inner-content-grid-max-width;
+  }
 }
 
 .wrapper {
diff --git a/src/features/common/components/hero/hero-banner-modal.module.scss b/src/features/common/components/hero/hero-banner-modal.module.scss
deleted file mode 100644
index 3c40a783..00000000
--- a/src/features/common/components/hero/hero-banner-modal.module.scss
+++ /dev/null
@@ -1,147 +0,0 @@
-@use "@/libs/theme/styles/variables" as *;
-@use "@/libs/theme/styles/mixins" as *;
-
-.modal {
-  position: relative;
-  display: block;
-  flex-direction: column;
-  align-content: flex-start;
-  justify-content: center;
-  grid-column: span 6;
-  font-size: 0.875rem;
-  line-height: 1.375rem;
-  border-radius: 0.25rem;
-
-  letter-spacing: 0.21px;
-  padding: 0.875rem;
-  height: 100%;
-
-  & strong {
-    font-weight: 500;
-    text-decoration: underline;
-  }
-
-  &[data-state="closed"] {
-    height: fit-content;
-  }
-
-  &[data-type="info"] {
-    background-color: var(--color_bg_state_info_subtle);
-    color: var(--color_fg_on_state_info_subtle);
-
-    & strong {
-      color: var(--color_fg_on_state_info_subtle);
-    }
-
-    .modal__control {
-      color: var(--color_fg_on_state_info_subtle);
-    }
-  }
-
-  &[data-type="warning"] {
-    background: var(--color_bg_state_caution_subtle);
-    color: var(--color_fg_on_state_caution_subtle);
-
-    & strong {
-      color: var(--color_fg_on_state_caution_subtle);
-    }
-
-    .modal__control {
-      color: var(--color_fg_on_state_caution_subtle);
-    }
-  }
-}
-
-.modal__control {
-  position: absolute;
-  top: 0.25rem;
-  right: 0.375rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: transparent;
-  border: none;
-
-  font-size: 1.25rem;
-  cursor: pointer;
-
-  height: 1rem;
-  width: 1rem;
-
-  &[data-state="open"] {
-    & .modal__controlIcon {
-      display: inline-block;
-      transform: rotate(45deg);
-    }
-  }
-
-  &:focus-visible {
-    outline: solid 1px var(--color_border_focus);
-    outline-offset: 0.125rem;
-    border-radius: 0.125rem;
-  }
-}
-
-.modal__text {
-  grid-column: 1 / -1;
-  width: 100%;
-  gap: 1rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 400;
-  :global(html[lang="ja"]) & {
-    @include LocaleLineHeight("ja", 0.875rem);
-  }
-
-  & a {
-    text-decoration: underline;
-    font-weight: 500;
-
-    &:focus-visible {
-      outline: solid 1px var(--color_border_focus);
-      outline-offset: 0.125rem;
-      border-radius: 0.125rem;
-    }
-  }
-}
-
-.modal__cta {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-
-  @media #{$breakpoint-dimension-xs-plus} {
-    flex-direction: row;
-    gap: 1.5rem;
-  }
-}
-
-.modal__ctaLink {
-  display: flex;
-  padding: 0;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-  align-self: stretch;
-  border-radius: 0.375rem;
-  text-decoration: underline;
-  font-size: 0.875rem;
-  line-height: 1.375rem;
-  font-style: normal;
-  font-weight: 500;
-  letter-spacing: 0.2px;
-
-  :global(html[lang="ja"]) & {
-    @include LocaleLineHeight("ja", 1rem);
-  }
-
-  @media #{$breakpoint-dimension-sm} {
-    width: fit-content;
-  }
-
-  &:focus-visible {
-    outline: solid 1px var(--color_border_focus);
-    outline-offset: 0.125rem;
-    border-radius: 0.125rem;
-  }
-}
diff --git a/src/features/common/components/hero/hero-banner.component.tsx b/src/features/common/components/hero/hero-banner.component.tsx
deleted file mode 100644
index 12f4b7b5..00000000
--- a/src/features/common/components/hero/hero-banner.component.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React, { useRef, useState } from "react";
-import styles from "./hero-banner-modal.module.scss";
-import { HeroModalStateValues } from "@/features/home/values/hero-modal-state.values";
-import Cookies from "js-cookie";
-import { HeroModalTypeValues } from "@/features/home/values/hero-modal-type.values";
-import { useButton } from "@react-aria/button";
-
-interface HeroBannerComponentProps {
-  initialModalState: HeroModalStateValues;
-  modalType: HeroModalTypeValues;
-  modalCookieKey: string;
-  modalSummary: string;
-  modalContent: React.ReactNode;
-  modalCta: React.ReactNode | null;
-}
-
-export const HeroBannerComponent: React.FC<HeroBannerComponentProps> = ({
-  initialModalState,
-  modalType,
-  modalCookieKey,
-  modalSummary,
-  modalContent,
-  modalCta,
-}) => {
-  const buttonRef = useRef<HTMLButtonElement | null>(null);
-  const [modalState, setModalState] =
-    useState<HeroModalStateValues>(initialModalState);
-
-  const { buttonProps } = useButton(
-    {
-      elementType: "span",
-      preventFocusOnPress: true,
-    },
-    buttonRef,
-  );
-
-  const toggleVisibility = () => {
-    setModalState((prevState) => {
-      Cookies.set(
-        modalCookieKey,
-        prevState === HeroModalStateValues.OPEN
-          ? HeroModalStateValues.CLOSED
-          : HeroModalStateValues.OPEN,
-        {
-          secure: true,
-        },
-      );
-
-      return prevState === HeroModalStateValues.OPEN
-        ? HeroModalStateValues.CLOSED
-        : HeroModalStateValues.OPEN;
-    });
-  };
-
-  return (
-    <p
-      className={styles.modal}
-      aria-expanded={modalState === HeroModalStateValues.OPEN}
-      data-state={modalState}
-      data-type={modalType}
-    >
-      {modalState === HeroModalStateValues.CLOSED && (
-        <span>{modalSummary}</span>
-      )}
-      <button
-        {...buttonProps}
-        aria-label={
-          modalState === HeroModalStateValues.CLOSED ? "Expand" : "Collapse"
-        }
-        ref={buttonRef}
-        className={styles.modal__control}
-        onClick={toggleVisibility}
-        data-state={modalState}
-        data-type={modalType}
-      >
-        <span className={styles.modal__controlIcon}>+</span>
-      </button>
-      {modalState === HeroModalStateValues.OPEN && (
-        <>
-          <span className={styles.modal__text}>{modalContent}</span>
-          <span className={styles.modal__cta}>{modalCta}</span>
-        </>
-      )}
-    </p>
-  );
-};
diff --git a/src/features/common/components/hero/hero-info-banner.component.tsx b/src/features/common/components/hero/hero-info-banner.component.tsx
deleted file mode 100644
index 5e806808..00000000
--- a/src/features/common/components/hero/hero-info-banner.component.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from "react";
-import styles from "./hero-banner-modal.module.scss";
-import { HomeDictionaryModel } from "@/features/localization/models/home-dictionary.model";
-import { HeroModalStateValues } from "@/features/home/values/hero-modal-state.values";
-import { JWT_INFO_STATE_KEY } from "@/features/home/config/home.config";
-import Link from "next/link";
-import { clsx } from "clsx";
-import { createUrlPath } from "@/libs/utils/path.utils";
-import { DEFAULT_LANGUAGE_CODE } from "@/features/localization/localization.config";
-import { HeroBannerComponent } from "@/features/common/components/hero/hero-banner.component";
-import { HeroModalTypeValues } from "@/features/home/values/hero-modal-type.values";
-
-interface HeroInfoBannerComponentProps {
-  languageCode: string;
-  dictionary: HomeDictionaryModel["info"];
-  modalState: HeroModalStateValues;
-}
-
-export const HeroInfoBannerComponent: React.FC<
-  HeroInfoBannerComponentProps
-> = ({ languageCode, dictionary, modalState }) => {
-  const ctaPath = createUrlPath([
-    languageCode === DEFAULT_LANGUAGE_CODE ? "" : languageCode,
-    dictionary.ctaButton ? dictionary.ctaButton.path : "",
-  ]);
-  const secondaryCtaPath = createUrlPath([
-    languageCode === DEFAULT_LANGUAGE_CODE ? "" : languageCode,
-    dictionary.secondaryCtaButton ? dictionary.secondaryCtaButton.path : "",
-  ]);
-
-  const description = dictionary.description.split(
-    dictionary.resources.spec.name,
-  );
-
-  return (
-    <HeroBannerComponent
-      initialModalState={modalState}
-      modalType={HeroModalTypeValues.INFO}
-      modalCookieKey={JWT_INFO_STATE_KEY}
-      modalSummary={dictionary.summary}
-      modalContent={
-        <>
-          {description[0]}
-          <Link
-            target="_blank"
-            rel="noreferrer noopener"
-            href={dictionary.resources.spec.link}
-          >
-            RFC 7519
-          </Link>
-          {description[1]}
-        </>
-      }
-      modalCta={
-        <>
-          {dictionary.ctaButton && (
-            <Link className={clsx(styles.modal__ctaLink)} href={ctaPath}>
-              {dictionary.ctaButton.label}
-            </Link>
-          )}
-          {dictionary.secondaryCtaButton && (
-            <Link
-              className={clsx(
-                styles.modal__ctaLink,
-                styles.modal__ctaButton__secondary,
-              )}
-              href={secondaryCtaPath}
-            >
-              {dictionary.secondaryCtaButton.label}
-            </Link>
-          )}
-        </>
-      }
-    />
-  );
-};
diff --git a/src/features/common/components/hero/hero-warning-banner.component.tsx b/src/features/common/components/hero/hero-warning-banner.component.tsx
deleted file mode 100644
index 3bbee194..00000000
--- a/src/features/common/components/hero/hero-warning-banner.component.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react";
-import { HomeDictionaryModel } from "@/features/localization/models/home-dictionary.model";
-import { HeroModalStateValues } from "@/features/home/values/hero-modal-state.values";
-import { JWT_WARNING_STATE_KEY } from "@/features/home/config/home.config";
-import { HeroBannerComponent } from "@/features/common/components/hero/hero-banner.component";
-import { HeroModalTypeValues } from "@/features/home/values/hero-modal-type.values";
-
-type HeroWarningBannerComponentProps = {
-  dictionary: HomeDictionaryModel["warning"];
-  modalState: HeroModalStateValues;
-};
-
-export const HeroWarningBannerComponent: React.FC<
-  HeroWarningBannerComponentProps
-> = ({ dictionary, modalState }) => {
-  return (
-    <HeroBannerComponent
-      initialModalState={modalState}
-      modalType={HeroModalTypeValues.WARNING}
-      modalCookieKey={JWT_WARNING_STATE_KEY}
-      modalSummary={dictionary.summary}
-      modalContent={
-        <>
-          <strong>{dictionary.title}</strong>{" "}
-          <span>{dictionary.description}</span>
-        </>
-      }
-      modalCta={null}
-    />
-  );
-};
diff --git a/src/features/common/components/hero/hero.component.tsx b/src/features/common/components/hero/hero.component.tsx
index b3c57ba8..2f709d8c 100644
--- a/src/features/common/components/hero/hero.component.tsx
+++ b/src/features/common/components/hero/hero.component.tsx
@@ -1,60 +1,47 @@
 "use client";
 
 import React from "react";
-import { clsx } from "clsx";
 import { BoxComponent } from "@/features/common/components/box/box.component";
 import styles from "./hero.module.scss";
-import { HeroMetadataModel } from "@/features/common/models/hero-metadata.model";
-import { getLocalizedSecondaryFont } from "@/libs/theme/fonts";
-import { HeroWarningBannerComponent } from "@/features/common/components/hero/hero-warning-banner.component";
 import { HomeDictionaryModel } from "@/features/localization/models/home-dictionary.model";
-import { HeroModalStateValues } from "@/features/home/values/hero-modal-state.values";
-import { HeroInfoBannerComponent } from "@/features/common/components/hero/hero-info-banner.component";
+import Link from "next/link";
 
 interface HeroComponentProps {
   languageCode: string;
-  dictionary: HeroMetadataModel;
-  infoBanner: {
-    dictionary: HomeDictionaryModel["info"];
-    state: HeroModalStateValues;
-  };
-  warningBanner: {
-    dictionary: HomeDictionaryModel["warning"];
-    state: HeroModalStateValues;
-  };
+  dictionary: HomeDictionaryModel["info"];
 }
 
-export const HeroComponent: React.FC<HeroComponentProps> = ({
-  languageCode,
-  dictionary,
-  infoBanner,
-  warningBanner,
-}) => {
+export const HeroComponent: React.FC<HeroComponentProps> = ({ dictionary }) => {
+  const description = dictionary.description.split(
+    dictionary.resources.spec.name
+  );
+
   return (
     <BoxComponent
       containerClassName={styles.container}
       contentClassName={styles.content}
       wrapperClassName={styles.wrapper}
     >
-      <h1
-        className={clsx(
-          getLocalizedSecondaryFont(languageCode),
-          styles.hero__title,
-        )}
-      >
-        {dictionary.title}
-      </h1>
       <div className={styles.hero}>
-        <HeroInfoBannerComponent
-          languageCode={languageCode}
-          dictionary={infoBanner.dictionary}
-          modalState={infoBanner.state}
-        />
-        <HeroWarningBannerComponent
-          dictionary={warningBanner.dictionary}
-          modalState={warningBanner.state}
-        />
+        <p className={styles.modal}>
+          <span className={styles.modal__text}>
+            {
+              <>
+                {description[0]}
+                <Link
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  href={dictionary.resources.spec.link}
+                >
+                  RFC 7519
+                </Link>
+                {description[1]}
+              </>
+            }
+          </span>
+        </p>
       </div>
+      <hr className={styles.divider} />
     </BoxComponent>
   );
 };
diff --git a/src/features/common/components/hero/hero.module.scss b/src/features/common/components/hero/hero.module.scss
index 4052a4ba..69476e93 100644
--- a/src/features/common/components/hero/hero.module.scss
+++ b/src/features/common/components/hero/hero.module.scss
@@ -6,89 +6,57 @@
   position: relative;
   overflow: hidden;
 
-  @media #{$breakpoint-dimension-xxs} {
-    &:before {
-      background-size: cover;
-    }
-  }
-
   @media #{$breakpoint-dimension-md} {
-    background-color: unset;
-
-    :global(body[data-theme="light"]) & {
-      background-color: unset;
-    }
-    :global(body[data-theme="system-light"]) & {
-      background-color: unset;
-    }
-
-    &:before {
-      background: unset;
-    }
-
-    :global(body[data-theme="light"]) &:before {
-      background: unset;
-    }
-    :global(body[data-theme="system-light"]) &:before {
-      background: unset;
-    }
-
-    &:after {
-      display: none;
-      background: none;
-    }
+    margin-bottom: 2rem;
   }
 }
 
-.wrapper {
-  @include ExtendedGrid;
-  justify-content: center;
-
-  border-radius: 0;
-  overflow: hidden;
-}
-
 .content {
   @include InnerContentFlex;
+  flex-direction: column;
   justify-content: center;
+  align-items: center;
   overflow: hidden;
-  flex-direction: column;
-
-  @media #{$breakpoint-dimension-sm} {
-    @include InnerContentGrid;
-  }
 }
 
 .hero {
   z-index: 1;
-  width: 100%;
   display: flex;
-  flex-direction: column;
+  justify-content: center;
+  width: 100%;
   padding: 1.25rem 0;
-  gap: 1rem;
+  text-align: center;
 
   @media #{$breakpoint-dimension-sm} {
-    grid-column: 1 / -1;
-    display: grid;
-    grid-template-columns: subgrid;
-    gap: 1rem;
+    padding: 0.5rem 0;
   }
 }
 
-.hero__title {
-  grid-column: 1 / -1;
-  width: 100%;
-  margin: 0;
-  flex-direction: column;
-  align-items: center;
-  font-size: 1.5rem;
-  line-height: 2rem;
-  color: var(--color_fg_bold);
-  font-variant-numeric: lining-nums proportional-nums;
-  padding: 0.5rem 0;
-  text-align: center;
+.modal {
+  max-width: 608px;
+  padding: 2.5rem 0;
+}
+
+.modal__text {
+  color: var(--color_fg_default);
+  font-size: .875rem;
+  letter-spacing: .21px;
+  line-height: 1.25rem;;
 
-  :global(html[lang="ja"]) & {
-    @include LocaleLineHeight("ja", 1.5rem);
+  a {
+    text-decoration: underline;
+    font-weight: 500;
   }
 }
+
+.divider {
+  display: none;
+
+  @media #{$breakpoint-dimension-md} {
+    display: block;
+    width: 40rem;
+    height: 1px;
+    background: linear-gradient(to right, transparent, var(--color_border_default), transparent);
+    border: 0;
+  }
+}
\ No newline at end of file
diff --git a/src/features/common/components/layout/page-layout/page-layout.module.scss b/src/features/common/components/layout/page-layout/page-layout.module.scss
index 4cb6057a..bc84fdad 100644
--- a/src/features/common/components/layout/page-layout/page-layout.module.scss
+++ b/src/features/common/components/layout/page-layout/page-layout.module.scss
@@ -9,7 +9,7 @@
 
   margin-top: $main-nav-height-mobile;
 
-  @media #{$breakpoint-dimension-md} {
+  @media #{$breakpoint-dimension-sm} {
     margin-top: $main-nav-height;
   }
 }
diff --git a/src/features/common/services/hero.utils.ts b/src/features/common/services/hero.utils.ts
deleted file mode 100644
index 58c5e09e..00000000
--- a/src/features/common/services/hero.utils.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { HeroModalStateValues } from "@/features/home/values/hero-modal-state.values";
-
-export const getSanitizedHeroModalStateValue = (
-  value: string | null,
-): HeroModalStateValues | null => {
-  if (
-    value === HeroModalStateValues.CLOSED ||
-    value === HeroModalStateValues.OPEN
-  ) {
-    return value;
-  }
-
-  return null;
-};
diff --git a/src/features/home/components/home-page/home-page.component.tsx b/src/features/home/components/home-page/home-page.component.tsx
index ab9f907b..ee47837c 100644
--- a/src/features/home/components/home-page/home-page.component.tsx
+++ b/src/features/home/components/home-page/home-page.component.tsx
@@ -8,7 +8,6 @@ import {
 import { AssetsComponent } from "@/features/home/components/assets/assets.component";
 import { EbookComponent } from "@/features/common/components/ebook/ebook.component";
 import { StructuredData } from "@/features/seo/components/structured-data.component";
-import { HeroModalStateValues } from "@/features/home/values/hero-modal-state.values";
 import { ClaimDescriptionVisibilityValues } from "@/features/common/values/claim-description-visibility.values";
 import { DebuggerWidgetComponent } from "@/features/debugger/components/debugger-widget/debugger-widget.component";
 import { getAuth0Dictionary } from "@/features/localization/services/ui-language-dictionary.service";
@@ -19,8 +18,6 @@ interface HomePageComponentProps {
   decodedPayloadInitialTabId: string;
   decodedHeaderDescriptionVisibility: ClaimDescriptionVisibilityValues;
   decodedPayloadDescriptionVisibility: ClaimDescriptionVisibilityValues;
-  jwtInfoState: HeroModalStateValues;
-  jwtWarningState: HeroModalStateValues;
   // debuggerInitialMode: DebuggerModeValues;
 }
 
@@ -30,8 +27,6 @@ export const HomePageComponent: React.FC<HomePageComponentProps> = ({
   decodedPayloadInitialTabId,
   decodedHeaderDescriptionVisibility,
   decodedPayloadDescriptionVisibility,
-  jwtInfoState,
-  jwtWarningState,
   // debuggerInitialMode,
 }) => {
   const homeDictionary = getHomeDictionary(languageCode);
@@ -133,15 +128,7 @@ export const HomePageComponent: React.FC<HomePageComponentProps> = ({
       />
       <HeroComponent
         languageCode={languageCode}
-        dictionary={homeDictionary.hero}
-        infoBanner={{
-          dictionary: homeDictionary.info,
-          state: jwtInfoState,
-        }}
-        warningBanner={{
-          dictionary: homeDictionary.warning,
-          state: jwtWarningState,
-        }}
+        dictionary={homeDictionary.info}
       />
       <DebuggerWidgetComponent
         languageCode={languageCode}
diff --git a/src/features/home/config/home.config.ts b/src/features/home/config/home.config.ts
deleted file mode 100644
index 7aa5eaf4..00000000
--- a/src/features/home/config/home.config.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const JWT_INFO_STATE_KEY = "jwt-info-state";
-export const JWT_WARNING_STATE_KEY = "jwt-warning-state";
diff --git a/src/features/home/values/hero-modal-state.values.ts b/src/features/home/values/hero-modal-state.values.ts
deleted file mode 100644
index af1a0f15..00000000
--- a/src/features/home/values/hero-modal-state.values.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export enum HeroModalStateValues {
-  OPEN = "open",
-  CLOSED = "closed",
-}
diff --git a/src/features/home/values/hero-modal-type.values.ts b/src/features/home/values/hero-modal-type.values.ts
deleted file mode 100644
index 6d8a2167..00000000
--- a/src/features/home/values/hero-modal-type.values.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export enum HeroModalTypeValues {
-  INFO = "info",
-  WARNING = "warning",
-}
diff --git a/src/features/localization/dictionaries/home/en.ts b/src/features/localization/dictionaries/home/en.ts
index 8e437dbe..076f652a 100644
--- a/src/features/localization/dictionaries/home/en.ts
+++ b/src/features/localization/dictionaries/home/en.ts
@@ -54,17 +54,8 @@ export const enHomeDictionary: HomeDictionaryModel = {
     description: null,
   },
   info: {
-    summary: "What is a JWT?",
     description:
       "Decode, verify, and generate JSON Web Tokens, which are an open, industry standard RFC 7519 method for representing claims securely between two parties.",
-    ctaButton: {
-      label: "Learn more about JWT",
-      path: sitePaths.introduction,
-    },
-    secondaryCtaButton: {
-      label: "See JWT libraries",
-      path: sitePaths.libraries,
-    },
     resources: {
       spec: {
         name: "RFC 7519",
@@ -72,13 +63,6 @@ export const enHomeDictionary: HomeDictionaryModel = {
       },
     },
   },
-  warning: {
-    summary: "Warning about using JWTs",
-    title:
-      "For your protection, all JWT debugging and validation happens in the browser.",
-    description:
-      "Be careful where you paste or share JWTs as they can represent credentials that grant access to resources. This site does not store or transmit your JSON Web Tokens outside of the browser.",
-  },
   decoder: {
     title: "JWT Decoder",
     compactTitle: "Decoder",
diff --git a/src/features/localization/dictionaries/home/ja.ts b/src/features/localization/dictionaries/home/ja.ts
index d75fe505..d905a932 100644
--- a/src/features/localization/dictionaries/home/ja.ts
+++ b/src/features/localization/dictionaries/home/ja.ts
@@ -54,17 +54,8 @@ export const jaHomeDictionary: HomeDictionaryModel = {
     description: null,
   },
   info: {
-    summary: "JWTとは？",
     description:
       "JSON Web Tokenをデコード、検証、生成します。JSON Web Tokenは、2つの当事者間でクレームを安全に表現するための、オープンな業界標準（RFC 7519）です。",
-    ctaButton: {
-      label: "JWTの詳細情報",
-      path: sitePaths.introduction,
-    },
-    secondaryCtaButton: {
-      label: "JWTライブラリを見る",
-      path: sitePaths.libraries,
-    },
     resources: {
       spec: {
         name: "RFC 7519",
@@ -72,13 +63,6 @@ export const jaHomeDictionary: HomeDictionaryModel = {
       },
     },
   },
-  warning: {
-    summary: "JWTを使用する際の注意事項",
-    title:
-      "セキュリティを確保するため、すべてのJWTのデバッグと検証はブラウザ内で行われます。",
-    description:
-      "JWTはリソースへのアクセス権を示す認証情報として機能する可能性があるため、貼り付けや共有を行う際には十分注意してください。このサイトでは、JSON Web Tokenをブラウザの外部に保存したり送信したりすることはありません。",
-  },
   decoder: {
     title: "JWTデコーダー",
     compactTitle: "デコーダー",
diff --git a/src/features/localization/models/home-dictionary.model.ts b/src/features/localization/models/home-dictionary.model.ts
index 8b120ba9..37edaf74 100644
--- a/src/features/localization/models/home-dictionary.model.ts
+++ b/src/features/localization/models/home-dictionary.model.ts
@@ -2,18 +2,12 @@ import { PageMetadataModel } from "@/features/common/models/page-metadata.model"
 import { HeroMetadataModel } from "@/features/common/models/hero-metadata.model";
 import { EncoderDictionaryModel } from "@/features/localization/models/encoder-dictionary.model";
 import { DecoderDictionaryModel } from "@/features/localization/models/decoder-dictionary.model";
-import { LinkMetadataModel } from "@/features/common/models/link-metadata.model";
-import { ImageMetadataModel } from "@/features/common/models/image-metadata.model";
 
 export interface HomeDictionaryModel {
   metadata: PageMetadataModel;
   hero: HeroMetadataModel;
   info: {
-    summary: string;
     description: string;
-    ctaButton?: LinkMetadataModel;
-    secondaryCtaButton?: LinkMetadataModel;
-    image?: ImageMetadataModel;
     resources: {
       spec: {
         name: string;
@@ -21,11 +15,6 @@ export interface HomeDictionaryModel {
       };
     };
   };
-  warning: {
-    summary: string;
-    title: string;
-    description: string;
-  };
   decoder: DecoderDictionaryModel;
   encoder: EncoderDictionaryModel;
 }
diff --git a/src/libs/theme/styles/_variables.scss b/src/libs/theme/styles/_variables.scss
index ea9ad6a5..721268b4 100644
--- a/src/libs/theme/styles/_variables.scss
+++ b/src/libs/theme/styles/_variables.scss
@@ -148,8 +148,8 @@ $gradient-app-card---resting: linear-gradient(
   #3f59e4 67.69%
 );
 
-$ribbon-height: 2.5rem;
-$ribbon-height-mobile: 2.5rem;
+$ribbon-height: 1rem;
+$ribbon-height-mobile: 0rem;
 $navbar-height: 5rem;
 $navbar-height-mobile: 3rem;
 $main-nav-height: calc($ribbon-height + $navbar-height);
diff --git a/src/libs/theme/styles/globals.scss b/src/libs/theme/styles/globals.scss
index 7c779af1..3b5bae45 100644
--- a/src/libs/theme/styles/globals.scss
+++ b/src/libs/theme/styles/globals.scss
@@ -45,7 +45,7 @@
 :root {
   --color_bg_page: var(--functional-gray-950);
   --color_fg_bold: var(--functional-gray-50);
-  --color_fg_default: var(--functional-gray-500);
+  --color_fg_default: var(--functional-gray-200);
   --color_fg_link_primary: var(--cloud);
 
   --color_bg_app_bar: hsla(0,0%,7%,.04);
@@ -229,6 +229,7 @@ html[data-theme="system-light"] {
   --color_bg_disabled: var(--functional-gray-150);
 
   --color_fg_disabled: var(--functional-gray-500);
+  --color_fg_default: var(--functional-gray-500);
 
   --color_bg_input: var(--functional-gray-0);
   --color_fg_input_placeholder: var(--functional-gray-500);