diff --git a/package-lock.json b/package-lock.json
index 60ca864..4f6f320 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,8 @@
         "packages/*"
       ],
       "dependencies": {
+        "@mdi/js": "^7.4.47",
+        "@mdi/react": "^1.6.1",
         "i18next": "^23.16.4",
         "react-i18next": "^15.1.0"
       },
@@ -646,6 +648,21 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mdi/js": {
+      "version": "7.4.47",
+      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz",
+      "integrity": "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@mdi/react": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@mdi/react/-/react-1.6.1.tgz",
+      "integrity": "sha512-4qZeDcluDFGFTWkHs86VOlHkm6gnKaMql13/gpIcUQ8kzxHgpj31NuCkD8abECVfbULJ3shc7Yt4HJ6Wu6SN4w==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "node_modules/@mui/base": {
       "version": "5.0.0-beta.60",
       "license": "MIT",
diff --git a/package.json b/package.json
index db9ebe2..db2e463 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,8 @@
     "@rollup/rollup-linux-x64-gnu": "*"
   },
   "dependencies": {
+    "@mdi/js": "^7.4.47",
+    "@mdi/react": "^1.6.1",
     "i18next": "^23.16.4",
     "react-i18next": "^15.1.0"
   }
diff --git a/packages/front-end/src/index.tsx b/packages/front-end/src/index.tsx
index 50c4779..8791475 100644
--- a/packages/front-end/src/index.tsx
+++ b/packages/front-end/src/index.tsx
@@ -2,9 +2,11 @@ import DarkModeIcon from '@mui/icons-material/DarkMode'
 import LightModeIcon from '@mui/icons-material/LightMode'
 import {
   AppBar,
+  Avatar,
   Box,
   Button,
   CssBaseline,
+  IconButton,
   Link,
   MenuItem,
   Select,
@@ -19,6 +21,8 @@ import { LanguageCode } from '@shared/enums/languageCode'
 import { getNameByLanguageCode } from '@shared/model/language'
 import { SpeedInsights } from '@vercel/speed-insights/react'
 
+import { mdiEmail, mdiGithub, mdiTwitter } from '@mdi/js'
+import Icon from '@mdi/react'
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
 import { DefaultParameterValues } from '@shared/constants/defaultParameterValues'
 import { ALL_QUARTZ } from '@shared/constants/quartz'
@@ -294,20 +298,101 @@ const Main = () => {
             )}
           </div>
           <div>
-            <Typography variant="h5" sx={{ marginBottom: '1rem' }}>
-              {t('development_title')}
-            </Typography>
-            <div style={{ marginBottom: '0.5rem' }}>
+            <Box
+              sx={{
+                position: 'relative',
+                marginBottom: '1rem',
+              }}
+            >
+              <Typography variant="h5">{t('development_title')}</Typography>
               <Button
                 variant="outlined"
+                sx={{
+                  maxHeight: '40px',
+                  position: 'absolute',
+                  right: 0,
+                  top: 0,
+                }}
                 href="/AlvISsReimu/kiseki-orbment-assistant"
                 target="_blank"
                 endIcon={<OpenInNewIcon />}
               >
                 {t('repository')}
               </Button>
-            </div>
+            </Box>
             <div>{t('development_text')}</div>
+            <Box sx={{ display: 'flex', gap: '80px', marginTop: '4px' }}>
+              <Box sx={{ display: 'flex', gap: '8px' }}>
+                <Avatar
+                  sx={{ width: '48px', height: '48px', alignSelf: 'center' }}
+                  alt="AlvISsReimu"
+                  src="https://avatars.githubusercontent.com/u/25188552?v=4"
+                />
+                <Box
+                  sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    placeContent: 'space-between',
+                  }}
+                >
+                  <Typography sx={{ padding: '8px 8px 0' }}>
+                    AlvISs_红白
+                  </Typography>
+                  <Box
+                    sx={{
+                      display: 'flex',
+                    }}
+                  >
+                    <IconButton
+                      href="/AlvISsReimu"
+                      target="_blank"
+                    >
+                      <Icon path={mdiGithub} size={1} />
+                    </IconButton>
+                    <IconButton
+                      href="https://twitter.com/AlvISs_Reimu"
+                      target="_blank"
+                    >
+                      <Icon path={mdiTwitter} size={1} />
+                    </IconButton>
+                    <IconButton href="mailto:alvissreimu@gmail.com">
+                      <Icon path={mdiEmail} size={1} />
+                    </IconButton>
+                  </Box>
+                </Box>
+              </Box>
+              <Box sx={{ display: 'flex', gap: '8px' }}>
+                <Avatar
+                  sx={{ width: '48px', height: '48px', alignSelf: 'center' }}
+                  alt="Tapir_li"
+                  src="https://avatars.githubusercontent.com/u/5591532?v=4"
+                />
+                <Box
+                  sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    placeContent: 'space-between',
+                  }}
+                >
+                  <Typography sx={{ padding: '8px 8px 0' }}>Tapir</Typography>
+                  <Box
+                    sx={{
+                      display: 'flex',
+                    }}
+                  >
+                    <IconButton
+                      href="/linicam"
+                      target="_blank"
+                    >
+                      <Icon path={mdiGithub} size={1} />
+                    </IconButton>
+                    <IconButton href="mailto:li407017533@gmail.com">
+                      <Icon path={mdiEmail} size={1} />
+                    </IconButton>
+                  </Box>
+                </Box>
+              </Box>
+            </Box>
           </div>
         </div>