diff --git a/config-ui/src/components/block/index.tsx b/config-ui/src/components/block/index.tsx
index 068c6493513..2df5368798f 100644
--- a/config-ui/src/components/block/index.tsx
+++ b/config-ui/src/components/block/index.tsx
@@ -42,7 +42,7 @@ interface Props {
   title?: React.ReactNode;
   description?: React.ReactNode;
   required?: boolean;
-  children: React.ReactNode;
+  children?: React.ReactNode;
 }
 
 export const Block = ({ style, title, description, required, children }: Props) => {
diff --git a/config-ui/src/routes/project/detail/settings-panel.tsx b/config-ui/src/routes/project/detail/settings-panel.tsx
index 535c824ec5f..0cd2f006ee8 100644
--- a/config-ui/src/routes/project/detail/settings-panel.tsx
+++ b/config-ui/src/routes/project/detail/settings-panel.tsx
@@ -22,7 +22,7 @@ import { WarningOutlined } from '@ant-design/icons';
 import { Flex, Space, Card, Modal, Input, Checkbox, Button, message } from 'antd';
 
 import API from '@/api';
-import { Block } from '@/components';
+import { Block, HelpTooltip } from '@/components';
 import { PATHS } from '@/config';
 import { IProject } from '@/types';
 import { operator } from '@/utils';
@@ -39,6 +39,8 @@ interface Props {
 export const SettingsPanel = ({ project, onRefresh }: Props) => {
   const [name, setName] = useState('');
   const [enableDora, setEnableDora] = useState(false);
+  const [associatePrWithIssues, setAssociatePrWithIssues] = useState(false);
+  const [regexPrIssue, setRegexPrIssue] = useState('');
   const [operating, setOperating] = useState(false);
   const [open, setOpen] = useState(false);
 
@@ -65,9 +67,16 @@ export const SettingsPanel = ({ project, onRefresh }: Props) => {
           metrics: [
             {
               pluginName: 'dora',
-              pluginOption: '',
+              pluginOption: {},
               enable: enableDora,
             },
+            {
+              pluginName: 'linker',
+              pluginOption: {
+                prToIssueRegexp: regexPrIssue,
+              },
+              enable: associatePrWithIssues,
+            },
           ],
         }),
       {
@@ -107,10 +116,38 @@ export const SettingsPanel = ({ project, onRefresh }: Props) => {
           <Block title="Project Name" description="Edit your project name with letters, numbers, -, _ or /" required>
             <Input style={{ width: 386 }} value={name} onChange={(e) => setName(e.target.value)} />
           </Block>
-          <Block description="DORA metrics are four widely-adopted metrics for measuring software delivery performance.">
-            <Checkbox checked={enableDora} onChange={(e) => setEnableDora(e.target.checked)}>
-              Enable DORA Metrics
-            </Checkbox>
+          <Block
+            title={
+              <Checkbox checked={enableDora} onChange={(e) => setEnableDora(e.target.checked)}>
+                Enable DORA Metrics
+              </Checkbox>
+            }
+            description="DORA metrics are four widely-adopted metrics for measuring software delivery performance."
+          />
+          <Block
+            title={
+              <Checkbox checked={associatePrWithIssues} onChange={(e) => setAssociatePrWithIssues(e.target.checked)}>
+                Associate pull requests with issues
+              </Checkbox>
+            }
+            description={
+              <span>
+                Parse the issue key with the regex from the title and description of the pull requests in this project.
+                <HelpTooltip
+                  content={
+                    <span>
+                      The default regex will parse the issue key from the table.pull_requests where the description
+                      contains "fix/close/.../resolved {'{'}issue_key{'}'}". The relationship between pull requests and
+                      issues will be stored in the table.pull_request_issues
+                    </span>
+                  }
+                />
+              </span>
+            }
+          >
+            {associatePrWithIssues && (
+              <Input style={{ width: 600 }} value={regexPrIssue} onChange={(e) => setRegexPrIssue(e.target.value)} />
+            )}
           </Block>
           <Block>
             <Button type="primary" loading={operating} disabled={!name} onClick={handleUpdate}>
diff --git a/config-ui/src/types/project.ts b/config-ui/src/types/project.ts
index eea0d761d8d..20a51854370 100644
--- a/config-ui/src/types/project.ts
+++ b/config-ui/src/types/project.ts
@@ -23,7 +23,7 @@ export interface IProject {
   name: string;
   description: string;
   blueprint: IBlueprint;
-  metrics: Array<{ pluginName: string; pluginOption: string; enable: boolean }>;
+  metrics: Array<{ pluginName: string; pluginOption: any; enable: boolean }>;
   createdAt?: string;
   lastPipeline?: IPipeline;
 }