diff --git a/lama_cleaner/app/src/components/Settings/HDSettingBlock.tsx b/lama_cleaner/app/src/components/Settings/HDSettingBlock.tsx
index 57fed00..9c77f53 100644
--- a/lama_cleaner/app/src/components/Settings/HDSettingBlock.tsx
+++ b/lama_cleaner/app/src/components/Settings/HDSettingBlock.tsx
@@ -66,7 +66,7 @@ function HDSettingBlock() {
 
   const renderResizeOptionDesc = () => {
     return (
-      <div>
+      <>
         <div>
           Resize the longer side of the image to a specific size(keep ratio),
           then do inpainting on the resized image.
@@ -77,13 +77,13 @@ function HDSettingBlock() {
           suffix="pixel"
           onValue={onResizeLimitChange}
         />
-      </div>
+      </>
     )
   }
 
   const renderCropOptionDesc = () => {
     return (
-      <div>
+      <>
         <div>
           Crop masking area from the original image to do inpainting, and paste
           the result back. Mainly for performance and memory reasons on high
@@ -101,7 +101,7 @@ function HDSettingBlock() {
           suffix="pixel"
           onValue={onCropMarginChange}
         />
-      </div>
+      </>
     )
   }
 
diff --git a/lama_cleaner/app/src/components/Settings/ModelSettingBlock.scss b/lama_cleaner/app/src/components/Settings/ModelSettingBlock.scss
index 414f878..29ae13a 100644
--- a/lama_cleaner/app/src/components/Settings/ModelSettingBlock.scss
+++ b/lama_cleaner/app/src/components/Settings/ModelSettingBlock.scss
@@ -1,4 +1,8 @@
 .model-desc-link {
-  color: var(--text-color-gray);
+  background-color: var(--badge-background-color);
+  color: var(--badge-color);
+
+  padding: 3px 12px;
+  border-radius: 999px;
   text-decoration: none;
 }
diff --git a/lama_cleaner/app/src/components/Settings/ModelSettingBlock.tsx b/lama_cleaner/app/src/components/Settings/ModelSettingBlock.tsx
index b43ee37..79b0f49 100644
--- a/lama_cleaner/app/src/components/Settings/ModelSettingBlock.tsx
+++ b/lama_cleaner/app/src/components/Settings/ModelSettingBlock.tsx
@@ -3,6 +3,7 @@ import { useRecoilState } from 'recoil'
 import { settingState } from '../../store/Atoms'
 import Selector from '../shared/Selector'
 import { Switch, SwitchThumb } from '../shared/Switch'
+import Tooltip from '../shared/Tooltip'
 import { LDMSampler } from './HDSettingBlock'
 import NumberInputSetting from './NumberInputSetting'
 import SettingBlock from './SettingBlock'
@@ -34,39 +35,39 @@ function ModelSettingBlock() {
     githubUrl: string
   ) => {
     return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
-        <a
-          className="model-desc-link"
-          href={paperUrl}
-          target="_blank"
-          rel="noreferrer noopener"
-        >
-          Paper: {name}
-        </a>
+      <div style={{ display: 'flex', gap: '12px' }}>
+        <Tooltip content={name}>
+          <a
+            className="model-desc-link"
+            href={paperUrl}
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            Paper
+          </a>
+        </Tooltip>
 
-        <a
-          className="model-desc-link"
-          href={githubUrl}
-          target="_blank"
-          rel="noreferrer noopener"
-        >
-          Offical Repository: {githubUrl}
-        </a>
+        <Tooltip content={githubUrl}>
+          <a
+            className="model-desc-link"
+            href={githubUrl}
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            Code
+          </a>
+        </Tooltip>
       </div>
     )
   }
 
   const renderLDMModelDesc = () => {
     return (
-      <div>
-        {renderModelDesc(
-          'High-Resolution Image Synthesis with Latent Diffusion Models',
-          'https://arxiv.org/abs/2112.10752',
-          'https://github.com/CompVis/latent-diffusion'
-        )}
+      <>
         <NumberInputSetting
           title="Steps"
           value={`${setting.ldmSteps}`}
+          desc="Large steps result in better result, but more time-consuming"
           onValue={value => {
             const val = value.length === 0 ? 0 : parseInt(value, 10)
             setSettingState(old => {
@@ -87,21 +88,17 @@ function ModelSettingBlock() {
             />
           }
         />
-      </div>
+      </>
     )
   }
 
   const renderZITSModelDesc = () => {
     return (
       <div>
-        {renderModelDesc(
-          'Incremental Transformer Structure Enhanced Image Inpainting with Masking Positional Encoding',
-          'https://arxiv.org/abs/2203.00867',
-          'https://github.com/DQiaole/ZITS_inpainting'
-        )}
         <SettingBlock
           className="sub-setting-block"
           title="Wireframe"
+          desc="Enable edge and line detect"
           input={
             <Switch
               checked={setting.zitsWireframe}
@@ -122,11 +119,7 @@ function ModelSettingBlock() {
   const renderOptionDesc = (): ReactNode => {
     switch (setting.model) {
       case AIModel.LAMA:
-        return renderModelDesc(
-          'Resolution-robust Large Mask Inpainting with Fourier Convolutions',
-          'https://arxiv.org/abs/2109.07161',
-          'https://github.com/saic-mdal/lama'
-        )
+        return undefined
       case AIModel.LDM:
         return renderLDMModelDesc()
       case AIModel.ZITS:
@@ -136,10 +129,36 @@ function ModelSettingBlock() {
     }
   }
 
+  const renderPaperCodeBadge = (): ReactNode => {
+    switch (setting.model) {
+      case AIModel.LAMA:
+        return renderModelDesc(
+          'Resolution-robust Large Mask Inpainting with Fourier Convolutions',
+          'https://arxiv.org/abs/2109.07161',
+          'https://github.com/saic-mdal/lama'
+        )
+      case AIModel.LDM:
+        return renderModelDesc(
+          'High-Resolution Image Synthesis with Latent Diffusion Models',
+          'https://arxiv.org/abs/2112.10752',
+          'https://github.com/CompVis/latent-diffusion'
+        )
+      case AIModel.ZITS:
+        return renderModelDesc(
+          'Incremental Transformer Structure Enhanced Image Inpainting with Masking Positional Encoding',
+          'https://arxiv.org/abs/2203.00867',
+          'https://github.com/DQiaole/ZITS_inpainting'
+        )
+      default:
+        return <></>
+    }
+  }
+
   return (
     <SettingBlock
       className="model-setting-block"
       title="Inpainting Model"
+      titleSuffix={renderPaperCodeBadge()}
       input={
         <Selector
           width={80}
diff --git a/lama_cleaner/app/src/components/Settings/NumberInputSetting.tsx b/lama_cleaner/app/src/components/Settings/NumberInputSetting.tsx
index 543a92a..f18e17e 100644
--- a/lama_cleaner/app/src/components/Settings/NumberInputSetting.tsx
+++ b/lama_cleaner/app/src/components/Settings/NumberInputSetting.tsx
@@ -4,18 +4,20 @@ import SettingBlock from './SettingBlock'
 
 interface NumberInputSettingProps {
   title: string
+  desc?: string
   value: string
   suffix?: string
   onValue: (val: string) => void
 }
 
 function NumberInputSetting(props: NumberInputSettingProps) {
-  const { title, value, suffix, onValue } = props
+  const { title, desc, value, suffix, onValue } = props
 
   return (
     <SettingBlock
       className="sub-setting-block"
       title={title}
+      desc={desc}
       input={
         <div
           style={{
diff --git a/lama_cleaner/app/src/components/Settings/SettingBlock.scss b/lama_cleaner/app/src/components/Settings/SettingBlock.scss
index 49fa269..9dce547 100644
--- a/lama_cleaner/app/src/components/Settings/SettingBlock.scss
+++ b/lama_cleaner/app/src/components/Settings/SettingBlock.scss
@@ -8,9 +8,11 @@
     border: 1px solid var(--border-color);
     border-radius: 0.3rem;
     padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
 
     .sub-setting-block {
-      margin-top: 8px;
       color: var(--text-color);
     }
   }
diff --git a/lama_cleaner/app/src/components/Settings/SettingBlock.tsx b/lama_cleaner/app/src/components/Settings/SettingBlock.tsx
index a984183..5f3fcc0 100644
--- a/lama_cleaner/app/src/components/Settings/SettingBlock.tsx
+++ b/lama_cleaner/app/src/components/Settings/SettingBlock.tsx
@@ -4,36 +4,28 @@ import Tooltip from '../shared/Tooltip'
 interface SettingBlockProps {
   title: string
   desc?: string
+  titleSuffix?: ReactNode
   input: ReactNode
   optionDesc?: ReactNode
   className?: string
 }
 
 function SettingBlock(props: SettingBlockProps) {
-  const { title, desc, input, optionDesc, className } = props
+  const { title, titleSuffix, desc, input, optionDesc, className } = props
   return (
     <div className={`setting-block ${className}`}>
       <div className="setting-block-content">
         <div className="setting-block-content-title">
-          <span>{title}</span>
-          {desc && (
-            <Tooltip content={<div style={{ maxWidth: 400 }}>{desc}</div>}>
-              <svg
-                width="18"
-                height="18"
-                viewBox="0 0 15 15"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M0.877075 7.49972C0.877075 3.84204 3.84222 0.876892 7.49991 0.876892C11.1576 0.876892 14.1227 3.84204 14.1227 7.49972C14.1227 11.1574 11.1576 14.1226 7.49991 14.1226C3.84222 14.1226 0.877075 11.1574 0.877075 7.49972ZM7.49991 1.82689C4.36689 1.82689 1.82708 4.36671 1.82708 7.49972C1.82708 10.6327 4.36689 13.1726 7.49991 13.1726C10.6329 13.1726 13.1727 10.6327 13.1727 7.49972C13.1727 4.36671 10.6329 1.82689 7.49991 1.82689ZM8.24993 10.5C8.24993 10.9142 7.91414 11.25 7.49993 11.25C7.08571 11.25 6.74993 10.9142 6.74993 10.5C6.74993 10.0858 7.08571 9.75 7.49993 9.75C7.91414 9.75 8.24993 10.0858 8.24993 10.5ZM6.05003 6.25C6.05003 5.57211 6.63511 4.925 7.50003 4.925C8.36496 4.925 8.95003 5.57211 8.95003 6.25C8.95003 6.74118 8.68002 6.99212 8.21447 7.27494C8.16251 7.30651 8.10258 7.34131 8.03847 7.37854L8.03841 7.37858C7.85521 7.48497 7.63788 7.61119 7.47449 7.73849C7.23214 7.92732 6.95003 8.23198 6.95003 8.7C6.95004 9.00376 7.19628 9.25 7.50004 9.25C7.8024 9.25 8.04778 9.00601 8.05002 8.70417L8.05056 8.7033C8.05924 8.6896 8.08493 8.65735 8.15058 8.6062C8.25207 8.52712 8.36508 8.46163 8.51567 8.37436L8.51571 8.37433C8.59422 8.32883 8.68296 8.27741 8.78559 8.21506C9.32004 7.89038 10.05 7.35382 10.05 6.25C10.05 4.92789 8.93511 3.825 7.50003 3.825C6.06496 3.825 4.95003 4.92789 4.95003 6.25C4.95003 6.55376 5.19628 6.8 5.50003 6.8C5.80379 6.8 6.05003 6.55376 6.05003 6.25Z"
-                  fill="currentColor"
-                  fillRule="evenodd"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </Tooltip>
-          )}
+          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+            {desc ? (
+              <Tooltip content={<div style={{ maxWidth: 400 }}>{desc}</div>}>
+                <span>{title}</span>
+              </Tooltip>
+            ) : (
+              <span>{title}</span>
+            )}
+            {titleSuffix}
+          </div>
         </div>
         {input}
       </div>
diff --git a/lama_cleaner/app/src/components/shared/Modal.scss b/lama_cleaner/app/src/components/shared/Modal.scss
index 53291f0..5d17e31 100644
--- a/lama_cleaner/app/src/components/shared/Modal.scss
+++ b/lama_cleaner/app/src/components/shared/Modal.scss
@@ -30,7 +30,7 @@
   transform: translate(-50%, -50%);
   display: grid;
   grid-auto-rows: max-content;
-  row-gap: 2rem;
+  row-gap: 1rem;
   place-self: center;
   padding: 2rem;
   border-radius: 0.95rem;
diff --git a/lama_cleaner/app/src/components/shared/NumberInput.scss b/lama_cleaner/app/src/components/shared/NumberInput.scss
index 673cb98..cd44cd0 100644
--- a/lama_cleaner/app/src/components/shared/NumberInput.scss
+++ b/lama_cleaner/app/src/components/shared/NumberInput.scss
@@ -4,7 +4,7 @@
   border-radius: 0.5rem;
   padding: 0 0.8rem;
   outline: 1px solid var(--border-color);
-  height: 36px;
+  height: 32px;
 
   &:focus-visible {
     outline: 1px solid var(--yellow-accent);
diff --git a/lama_cleaner/app/src/components/shared/Selector.scss b/lama_cleaner/app/src/components/shared/Selector.scss
index ebf6d8d..a54ffd5 100644
--- a/lama_cleaner/app/src/components/shared/Selector.scss
+++ b/lama_cleaner/app/src/components/shared/Selector.scss
@@ -4,7 +4,7 @@
   align-items: center;
   justify-content: space-between;
   border-radius: 0.5rem;
-  height: 38px;
+  height: 32px;
   gap: 8px;
   padding: 0 0.8rem;
   border: 1px solid var(--border-color);
diff --git a/lama_cleaner/app/src/styles/_Colors.scss b/lama_cleaner/app/src/styles/_Colors.scss
index fe26002..704fd3f 100644
--- a/lama_cleaner/app/src/styles/_Colors.scss
+++ b/lama_cleaner/app/src/styles/_Colors.scss
@@ -47,4 +47,8 @@
 
   // tooltip
   --tooltip-bg: var(--page-bg);
+
+  // badge
+  --badge-background-color: hsl(209 13.3% 95.3%);
+  --badge-color: hsl(206 6% 43.5%);
 }
diff --git a/lama_cleaner/app/src/styles/_ColorsDark.scss b/lama_cleaner/app/src/styles/_ColorsDark.scss
index 2f12da6..c1f1ed7 100644
--- a/lama_cleaner/app/src/styles/_ColorsDark.scss
+++ b/lama_cleaner/app/src/styles/_ColorsDark.scss
@@ -45,4 +45,8 @@
 
   // tooltip
   --tooltip-bg: hsl(197 6.8% 13.6%);
+
+  // badge
+  --badge-background-color: hsl(197 6.8% 13.6%);
+  --badge-color: hsl(206 6% 63%);
 }