diff --git a/src/components/About/AboutText.tsx b/src/components/About/AboutText.tsx
deleted file mode 100644
index a5118a8d..00000000
--- a/src/components/About/AboutText.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import SubHeader from './SubHeader';
-import MarkdownRenderer from '../MarkdownRenderer';
-
-import { abouts } from '../../config/about';
-
-const { subHeader, introductions, pronouns } = abouts;
-
-const AboutText: React.FC = () => {
-
-  const renderIntroduction = () =>
-    introductions.map((item, index) => (
-      <MarkdownRenderer key={`${item}-${index}`} content={item} />
-    ));
-
-  return (
-    <section className="about-text">
-      <SubHeader text={`${subHeader} (${pronouns})`} />
-      <br />
-      {renderIntroduction()}
-    </section>
-  );
-};
-
-export default AboutText;
diff --git a/src/components/About/Clients.tsx b/src/components/About/Clients.tsx
deleted file mode 100644
index 10418f0d..00000000
--- a/src/components/About/Clients.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import chaewonImage from "../../Assets/images/idols/chaewon_01.png";
-import chaewonImage3 from "../../Assets/images/idols/chaewon_03.png";
-import yoonaImage from "../../Assets/images/idols/yoona_01.png";
-import yoonaImage2 from "../../Assets/images/idols/yoona_02.png";
-import yujinImage from "../../Assets/images/idols/yujin.png";
-
-interface Client {
-  image: string;
-  alt: string;
-}
-
-const clients: Client[] = [
-  { image: chaewonImage, alt: "ChaeWon Image" },
-  { image: yoonaImage, alt: "Yoona Image" },
-  { image: yoonaImage2, alt: "Yoona Image" },
-  { image: yujinImage, alt: "YuJin Image" },
-  { image: chaewonImage3, alt: "ChaeWon Image" }
-];
-
-
-
-const Clients: React.FC = () => {
-  return (
-
-    <section className="clients">
-
-      <p>
-        <h3><code> $ ls -al Idols</code></h3>
-      </p>
-
-      <ul className="clients-list has-scrollbar">
-        {clients.map((client, index) => (
-          <li key={index} className="clients-item">
-            <img src={client.image} alt={client.alt} loading="lazy" />
-          </li>
-        ))}
-      </ul>
-
-    </section>
-  );
-}
-
-export default Clients;
diff --git a/src/components/About/GitHubStats.tsx b/src/components/About/GitHubStats.tsx
deleted file mode 100644
index d3ac0b4c..00000000
--- a/src/components/About/GitHubStats.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React, { useEffect, useState, FC } from 'react';
-import { useSearchParams } from 'react-router-dom';
-import GitHubCalendar from 'react-github-calendar';
-import { ThemeInput } from 'react-activity-calendar';
-
-import SubHeader from './SubHeader';
-import { abouts } from '../../config/about';
-
-/* 
-* goto https://grubersjoe.github.io/react-activity-calendar/
-* to see more themes
-*/
-const yellowTheme: ThemeInput = {
-  light: ['hsl(0, 0%, 92%)', '#FFDA6B'],
-  dark: ['hsl(0, 0%, 22%)', '#FFDA6B'],
-};
-
-const { githubUsername } = abouts;
-const subHeaderText = '$ ls -al GitHub Stats';
-const MOBILE_CALENDAR_SIZE = 12;
-const LAPTOP_CALENDAR_SIZE = 12;
-const MOBILE_BREAKPOINT = 768;
-
-const GitHubStats: FC = () => {
-  const [searchParams] = useSearchParams();
-  const initialUsername = searchParams.get('user') ?? githubUsername;
-
-  const [username, setUsername] = useState(initialUsername);
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-
-  useEffect(() => {
-    const handleResize = () => {
-      setWindowWidth(window.innerWidth);
-    };
-
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-
-  useEffect(() => {
-    setUsername(initialUsername);
-  }, [initialUsername]);
-
-  const isMobile = windowWidth <= MOBILE_BREAKPOINT;
-
-  return (
-    <section className="about-text">
-      <SubHeader text={subHeaderText} />
-      <br />
-      <GitHubCalendar
-        username={username}
-        blockSize={isMobile ? MOBILE_CALENDAR_SIZE : LAPTOP_CALENDAR_SIZE}
-        blockMargin={4}
-        colorScheme="dark"
-        blockRadius={2}
-        fontSize={14}
-        style={{ fontWeight: 'bold' }}
-        theme={yellowTheme}
-      />
-    </section>
-  );
-};
-
-export default GitHubStats;
diff --git a/src/components/About/LifeStyles.tsx b/src/components/About/LifeStyles.tsx
deleted file mode 100644
index d40b4aac..00000000
--- a/src/components/About/LifeStyles.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { abouts } from '../../config/about';
-import { ILifeStyle } from '../../interface/IAbout';
-import SubHeader from './SubHeader';
-
-
-const subHeader = "$ ls -al Life Style";
-
-
-const LifeStyles: React.FC = () => {
-  const { lifestyle: lifestyles } = abouts;
-  
-  // TODO: update inheritance of p.h3
-  return (
-    <section className="service">
-      <SubHeader text={subHeader} />
-
-      <ul className="service-list">
-        {lifestyles.map((lifestyle: ILifeStyle, index: number) => (    // TODO: Do not use Array index in keys
-          <li className="service-item" key={index}>
-            <div className="service-icon-box">
-              <img src={lifestyle.icon} alt={lifestyle.title} width="30" />
-            </div>
-            <div className="service-content-box">
-              <h4 className="h4 service-item-title">{lifestyle.title}</h4>
-              <p className="service-item-text">{lifestyle.text}</p>
-            </div>
-          </li>
-        ))}
-      </ul>
-
-    </section>
-  );
-}
-
-export default LifeStyles;
diff --git a/src/components/About/SubHeader.tsx b/src/components/About/SubHeader.tsx
deleted file mode 100644
index 85765790..00000000
--- a/src/components/About/SubHeader.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-
-interface SubHeaderProps {
-  text: string;
-}
-
-const SubHeader: React.FC<SubHeaderProps> = ({ text }) => {
-  return (
-    <h3>
-      <code>{text}</code>
-    </h3>
-  );
-};
-
-export default SubHeader;
diff --git a/src/components/About/TechStack.tsx b/src/components/About/TechStack.tsx
deleted file mode 100644
index 21db0445..00000000
--- a/src/components/About/TechStack.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { abouts } from '../../config/about';
-import { ITechStack } from '../../interface/IAbout';
-import SubHeader from './SubHeader';
-
-
-const subHeader = "$ ls -al Tech Stack";
-const TechStack: React.FC = () => {
-  const { programmingLanguage, devOps } = abouts;
-
-  const renderTechStackList = (techStack: ITechStack[]) => {
-    return (
-      <ul className="techstack-list has-scrollbar">
-        {techStack.map((item: ITechStack, index: number) => (   // TODO: Do not use Array index in keys
-          <li key={index} className="techstack-item">
-            <img src={item.iconUrl} alt={item.name} />
-          </li>
-        ))}
-      </ul>
-    );
-  };
-
-  return (
-    <section className="about-text">
-      <SubHeader text={subHeader} />
-
-      {renderTechStackList(programmingLanguage)}
-      {renderTechStackList(devOps)}
-    </section>
-  );
-}
-
-export default TechStack;