diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..88ea186
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1 @@
+src/api/graphql/autogen
diff --git a/src/comps/shared/AwaitFetch.module.scss b/src/comps/shared/AwaitFetch.module.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/comps/shared/AwaitFetch.tsx b/src/comps/shared/AwaitFetch.tsx
index 93da5ec..f6405c2 100644
--- a/src/comps/shared/AwaitFetch.tsx
+++ b/src/comps/shared/AwaitFetch.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 
-import styles from "./AwaitFetch.module.scss";
 import { Emoji } from "./Emoji";
 
 export type AwaitFetchProps<T> = {
diff --git a/src/pages/about/atoms/Contact.module.scss b/src/pages/about/atoms/Contact.module.scss
new file mode 100644
index 0000000..46c709a
--- /dev/null
+++ b/src/pages/about/atoms/Contact.module.scss
@@ -0,0 +1,3 @@
+.contact {
+  font-weight: 700;
+}
diff --git a/src/pages/about/atoms/Contact.tsx b/src/pages/about/atoms/Contact.tsx
new file mode 100644
index 0000000..b2e2db5
--- /dev/null
+++ b/src/pages/about/atoms/Contact.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import styles from "./Contact.module.scss";
+
+export type ContactProps = {
+  service: string;
+  url: string;
+  identifier: string;
+};
+export const Contact: React.VFC<ContactProps> = (props) => (
+  <a
+    href={props.url}
+    target="_blank"
+    rel="noreferrer"
+    className={styles.contact}
+  >
+    {props.service}
+  </a>
+);
diff --git a/src/pages/about/controller.ts b/src/pages/about/controller.ts
index a21f4c4..4d8c287 100644
--- a/src/pages/about/controller.ts
+++ b/src/pages/about/controller.ts
@@ -1,5 +1,5 @@
-import { gql, useQuery } from "@apollo/client";
-import { Basic } from "~/api/graphql/autogen/scheme";
+import { gql, QueryResult, useQuery } from "@apollo/client";
+import { Basic, Contact } from "~/api/graphql/autogen/scheme";
 
 const fetchBasic = gql`
   query FetchBasic {
@@ -15,9 +15,14 @@ const fetchBasic = gql`
       }
       age
     }
+    contacts {
+      service
+      identifier
+      url
+    }
   }
 `;
-type FetchIntroductionResponse = { basic: Basic };
+type FetchIntroductionResponse = { basic: Basic; contacts: Contact[] };
 
-export const useBasicAPI = () =>
+export const useBasicAPI = (): QueryResult<FetchIntroductionResponse> =>
   useQuery<FetchIntroductionResponse>(fetchBasic);
diff --git a/src/pages/about/organisms/Introduction.module.scss b/src/pages/about/organisms/Introduction.module.scss
index d1b426c..f84f991 100644
--- a/src/pages/about/organisms/Introduction.module.scss
+++ b/src/pages/about/organisms/Introduction.module.scss
@@ -32,3 +32,7 @@
   gap: 0.5em;
 }
 
+.contacts {
+  display: flex;
+  gap: 0.5em;
+}
diff --git a/src/pages/about/organisms/Introduction.tsx b/src/pages/about/organisms/Introduction.tsx
index e6681d5..1e5822c 100644
--- a/src/pages/about/organisms/Introduction.tsx
+++ b/src/pages/about/organisms/Introduction.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { AwaitFetch } from "~/comps/shared/AwaitFetch";
 import { Affiliation } from "../atoms/Affiriation";
+import { Contact } from "../atoms/Contact";
 import { useBasicAPI } from "../controller";
 
 import styles from "./Introduction.module.scss";
@@ -18,6 +19,11 @@ export const Introduction = () => {
               {data.basic.name.aka.join(" / ")}
             </span>
           </div>
+          <div className={styles.contacts}>
+            {data.contacts.map((c, i) => (
+              <Contact {...c} key={i} />
+            ))}
+          </div>
           <div className={styles.affiriation}>
             {data.basic.affiliation.map((a, key) => (
               <Affiliation {...a} key={key} />
diff --git a/src/pages/skills/atoms/Skill.tsx b/src/pages/skills/atoms/Skill.tsx
index d96bc0a..e39fb13 100644
--- a/src/pages/skills/atoms/Skill.tsx
+++ b/src/pages/skills/atoms/Skill.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { SkilledLevel } from "~/api/graphql/autogen/scheme";
 import { Emoji } from "~/comps/shared/Emoji";
-import { combineClassName } from "~/utils/combineClassName";
 
 import styles from "./Skill.module.scss";
 
diff --git a/src/pages/works/atoms/Work.tsx b/src/pages/works/atoms/Work.tsx
index 721c65b..072adfc 100644
--- a/src/pages/works/atoms/Work.tsx
+++ b/src/pages/works/atoms/Work.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { Link } from "react-router-dom";
 import { Status, Work as WorkEntity } from "~/api/graphql/autogen/scheme";
 
 import styles from "./Work.module.scss";