diff --git a/apps/web/src/components/about/github-stats.tsx b/apps/web/src/components/about/github-stats.tsx
index 09ed608d..6f5a0609 100644
--- a/apps/web/src/components/about/github-stats.tsx
+++ b/apps/web/src/components/about/github-stats.tsx
@@ -17,7 +17,9 @@ const yellowTheme: ThemeInput = {
   dark: ['hsl(0, 0%, 22%)', '#FFDA6B'],
 };
 
-const { socialMedia } = config;
+const { about } = config;
+
+const { socialMedia } = about;
 const { githubUsername } = socialMedia;
 
 const subHeaderText = '$ ls -al GitHub Stats';
diff --git a/apps/web/src/components/side-bar/avatar-box.tsx b/apps/web/src/components/side-bar/avatar-box.tsx
index 90b8f06f..3b4c9b74 100644
--- a/apps/web/src/components/side-bar/avatar-box.tsx
+++ b/apps/web/src/components/side-bar/avatar-box.tsx
@@ -12,6 +12,7 @@ const {
   firstName,
   lastName,
   middleName,
+  preferredName
 } = about;
 
 type AvatarBoxProps = {
@@ -26,7 +27,7 @@ const AvatarBox: React.FC<AvatarBoxProps> = ({ avatar }) => {
       <Image
         id="profile-img"
         src={avatar}
-        alt={`${firstName} (${middleName}) ${lastName}`}
+        alt={`${firstName} (${preferredName}) ${lastName}`}
         width={imageSize.width}
         height={imageSize.height}
         loading="lazy"
diff --git a/apps/web/src/components/side-bar/info-content.tsx b/apps/web/src/components/side-bar/info-content.tsx
index 5d7d39fb..01383111 100644
--- a/apps/web/src/components/side-bar/info-content.tsx
+++ b/apps/web/src/components/side-bar/info-content.tsx
@@ -6,15 +6,16 @@ const { about } = config;
 const {
   firstName,
   lastName,
-  middleName,
+  middleName,   // TODO: Research how to render this in the UI
+  preferredName
 } = about;
 
 const InfoContent: React.FC = () => (
   <div className="info-content">
     <h1
       className="name"
-      title={`${firstName} (${middleName}) ${lastName}`}
-    >{firstName} ({middleName}) {lastName}
+      title={`${firstName} (${preferredName}) ${lastName}`}
+    >{firstName} ({preferredName}) {lastName}
     </h1>
     <p className="title">
       <strong>{status}</strong>
diff --git a/apps/web/src/components/side-bar/social-list.tsx b/apps/web/src/components/side-bar/social-list.tsx
index 320380fb..4bedc45e 100644
--- a/apps/web/src/components/side-bar/social-list.tsx
+++ b/apps/web/src/components/side-bar/social-list.tsx
@@ -6,7 +6,9 @@ import { MdAttachment, MdOutlineSignpost } from "react-icons/md";
 
 import config from "@/config";
 
-const { socialMedia } = config;
+const { about } = config;
+
+const { socialMedia } = about;
 const { githubUsername, twitterUsername, linkedinUsername, mediumUsername } = socialMedia;
 
 const socialLinks = [
diff --git a/apps/web/src/config/index.ts b/apps/web/src/config/index.ts
index 0625375a..8ebbef31 100644
--- a/apps/web/src/config/index.ts
+++ b/apps/web/src/config/index.ts
@@ -20,19 +20,20 @@ const config: Config = {
     { path: '/blog', label: 'Blog' },
     { path: '/contact', label: 'Contact' }
   ],
-  socialMedia: {
-    "githubUsername": "1chooo",
-    "mediumUsername": "1chooo",
-    "twitterUsername": "1chooo___",
-    "linkedinUsername": "1chooo"
-  },
   about: {
     "subHeader": "$ ls -al Hugo 👨🏻‍💻",
     "firstName": 'Chun-Ho',
     "lastName": 'Lin',
-    "middleName": 'Hugo' || '',
-    "preferredName": 'Hugo' || '',
+    "middleName": "",
+    "preferredName": "Hugo",
+    "additionalName": "Hugo",
     "pronouns": 'He/Him',
+    "socialMedia": {
+      "githubUsername": "1chooo",
+      "mediumUsername": "1chooo",
+      "twitterUsername": "1chooo___",
+      "linkedinUsername": "1chooo"
+    },
     "introductions": [
       // "#### $ ls -al Hugo 👨🏻‍💻 (He/Him)",
       "I obtained my Bachelor's degree from [National Central University 🐿️](https://www.ncu.edu.tw/), driven by a *sincere passion* for **Software Engineering 💻.**",
diff --git a/apps/web/src/types/about.d.ts b/apps/web/src/types/about.d.ts
index 5756f5e1..7c34dfba 100644
--- a/apps/web/src/types/about.d.ts
+++ b/apps/web/src/types/about.d.ts
@@ -12,13 +12,28 @@ export type TechStack = {
   alt: string;
 }
 
+export type SocialMedia = {
+  githubUsername: string;
+  mediumUsername: string;
+  twitterUsername: string;
+  linkedinUsername: string;
+}
+
 /**
  * Type definition for the About component.
  *
- * @param {Readonly<Options>} options
- *   Props.
- * @returns {JSX.Element}
- *   React element.
+ * @example
+ * about: {
+ *   "subHeader": "$ ls -al Hugo 👨🏻‍💻",
+ *   "firstName": 'Chun-Ho',
+ *   "lastName": 'Lin',
+ *   "middleName": "",
+ *   "preferredName": "Hugo",
+ *   "additionalName": "Hugo",
+ *   "pronouns": 'He/Him',
+ *   ...
+ * }
+ * @returns {About} The About component.
  */
 export type About = {
   subHeader: string;
@@ -26,7 +41,9 @@ export type About = {
   lastName: string;
   middleName: string;
   preferredName: string;
+  additionalName: string;
   pronouns: string;
+  socialMedia: SocialMedia;
   introductions: string[];
   lifestyles: LifeStyle[];
   programmingLanguage: TechStack[];
diff --git a/apps/web/src/types/config.d.ts b/apps/web/src/types/config.d.ts
index 9edea45e..e25bb1cf 100644
--- a/apps/web/src/types/config.d.ts
+++ b/apps/web/src/types/config.d.ts
@@ -1,12 +1,10 @@
 import type { About } from "@/types/about";
-import type { SocialMedia } from "@/types/social-media";
 import type { Resume } from "@/types/resume";
 import type { NavItem } from "@/types/nav-bar";
 
 /**
  * Type definition for the Web app configuration.
  * 
- * @param {SocialMedia} socialMedia
  * @param {About} about
  * @param {Resume} resume
  */
@@ -19,7 +17,6 @@ export type Config = {
   keywords: string[];
   status: string;
   navItems: NavItem[];
-  socialMedia: SocialMedia;
   about: About;
   resume: Resume;
 }