diff --git a/packages/console/src/pages/CustomizeJwtDetails/MainContent/ScriptSection/index.module.scss b/packages/console/src/pages/CustomizeJwtDetails/MainContent/ScriptSection/index.module.scss
index 963c6162d..84081b6dc 100644
--- a/packages/console/src/pages/CustomizeJwtDetails/MainContent/ScriptSection/index.module.scss
+++ b/packages/console/src/pages/CustomizeJwtDetails/MainContent/ScriptSection/index.module.scss
@@ -1,12 +1,10 @@
 @use '@/scss/underscore' as _;
 
 .scriptSection {
-  position: sticky;
-  top: 0;
+  position: relative;
   min-width: 50%;
 
   .fixHeightWrapper {
-    margin-bottom: _.unit(3);
     position: absolute;
     inset: 0;
     display: flex;
diff --git a/packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/InstructionTab/index.module.scss b/packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/InstructionTab/index.module.scss
index 325ceb4f2..c35187558 100644
--- a/packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/InstructionTab/index.module.scss
+++ b/packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/InstructionTab/index.module.scss
@@ -23,8 +23,3 @@
 .envVariablesField {
   margin-bottom: _.unit(4);
 }
-
-.description {
-  font: var(--font-body-2);
-  color: var(--color-text-secondary);
-}
diff --git a/packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/InstructionTab/index.tsx b/packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/InstructionTab/index.tsx
index 17d228746..feee79af6 100644
--- a/packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/InstructionTab/index.tsx
+++ b/packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/InstructionTab/index.tsx
@@ -53,7 +53,7 @@ function InstructionTab({ isActive }: Props) {
               ? accessTokenPayloadTypeDefinition
               : clientCredentialsPayloadTypeDefinition
           }
-          height="350px"
+          height="320px"
           theme="logto-dark"
           options={typeDefinitionCodeEditorOptions}
         />
@@ -70,7 +70,7 @@ function InstructionTab({ isActive }: Props) {
             language="typescript"
             className={styles.sampleCode}
             value={jwtCustomizerUserContextTypeDefinition}
-            height="700px"
+            height="400px"
             theme="logto-dark"
             options={typeDefinitionCodeEditorOptions}
           />
@@ -83,7 +83,9 @@ function InstructionTab({ isActive }: Props) {
           setExpendCard(expand ? CardType.FetchExternalData : undefined);
         }}
       >
-        <div className={styles.description}>{t('jwt_claims.fetch_external_data.description')}</div>
+        <div className={tabContentStyles.description}>
+          {t('jwt_claims.fetch_external_data.description')}
+        </div>
         <Editor
           language="typescript"
           className={styles.sampleCode}
@@ -101,7 +103,7 @@ function InstructionTab({ isActive }: Props) {
         }}
       >
         <EnvironmentVariablesField className={styles.envVariablesField} />
-        <div className={styles.description}>
+        <div className={tabContentStyles.description}>
           {t('jwt_claims.environment_variables.sample_code')}
         </div>
         <Editor
diff --git a/packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/TestTab/index.module.scss b/packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/TestTab/index.module.scss
index beb94a75e..5aba761d7 100644
--- a/packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/TestTab/index.module.scss
+++ b/packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/TestTab/index.module.scss
@@ -3,3 +3,8 @@
 .error {
   color: var(--color-error);
 }
+
+.codeEditor {
+  min-height: 400px;
+  flex-grow: 1;
+}
diff --git a/packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/TestTab/index.tsx b/packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/TestTab/index.tsx
index 1ed9a52b7..548611bdd 100644
--- a/packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/TestTab/index.tsx
+++ b/packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/TestTab/index.tsx
@@ -108,7 +108,7 @@ function TestTab({ isActive }: Props) {
           }}
           render={({ field }) => (
             <MonacoCodeEditor
-              className={tabContentStyles.flexGrow}
+              className={styles.codeEditor}
               enabledActions={['restore', 'copy']}
               models={editorModels}
               activeModelName={activeModelName}
diff --git a/packages/console/src/pages/CustomizeJwtDetails/MainContent/index.module.scss b/packages/console/src/pages/CustomizeJwtDetails/MainContent/index.module.scss
index 41785f8a3..cd752d350 100644
--- a/packages/console/src/pages/CustomizeJwtDetails/MainContent/index.module.scss
+++ b/packages/console/src/pages/CustomizeJwtDetails/MainContent/index.module.scss
@@ -4,14 +4,8 @@
 .content {
   display: flex;
   flex-direction: row;
-  flex-grow: 1;
-  overflow: auto;
-  scrollbar-width: none; /* For Firefox */
-  -ms-overflow-style: none;  /* For Internet Explorer and Edge */
-
-  &::-webkit-scrollbar {
-    display: none; /* For Chrome, Safari and Opera */
-  }
+  flex: 1;
+  margin-bottom: _.unit(3);
 
   > * {
     &:first-child {
diff --git a/packages/console/src/pages/CustomizeJwtDetails/index.module.scss b/packages/console/src/pages/CustomizeJwtDetails/index.module.scss
index 225d3c08a..2cc1bcfdf 100644
--- a/packages/console/src/pages/CustomizeJwtDetails/index.module.scss
+++ b/packages/console/src/pages/CustomizeJwtDetails/index.module.scss
@@ -1,9 +1,7 @@
 @use '@/scss/underscore' as _;
 
 .container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
+  position: relative;
 
   .header {
     flex-shrink: 0;