diff --git a/src/components/typography/MainTitle.tsx b/src/components/typography/MainTitle.tsx
new file mode 100644
index 00000000..ad575e59
--- /dev/null
+++ b/src/components/typography/MainTitle.tsx
@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+
+import Accent from '@/components/Accent';
+import clsxm from '@/lib/clsxm';
+
+export type MainTitleProps = {
+  children?: ReactNode;
+  title: ReactNode;
+  className?: string;
+};
+
+export const MainTitle = ({ title, children, className }: MainTitleProps) => {
+  return (
+    <>
+      <div>
+        <h1
+          className={clsxm(
+            'glow inline text-4xl font-bold md:text-6xl 2xl:text-7xl',
+            className
+          )}
+        >
+          <Accent>{title}</Accent>
+          {children}
+        </h1>
+      </div>
+      <style jsx>{`
+        .glow {
+          transition: all 1s ease-in-out;
+          text-shadow: none;
+        }
+
+        .glow:hover {
+          text-shadow: 0 0 1px #eb2754, 0 0 2px #eb2754, 0 0 6px #1cb7ff,
+            0 0 8px #eb2754;
+        }
+      `}</style>
+    </>
+  );
+};
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
index ec1462a7..1a535bf1 100644
--- a/src/pages/about.tsx
+++ b/src/pages/about.tsx
@@ -1,13 +1,13 @@
 import type { NextPage } from 'next';
 import { useInView } from 'react-intersection-observer';
 
-import Accent from '@/components/Accent';
 import CloudinaryImg from '@/components/images/CloudinaryImg';
 import Layout from '@/components/layout/Layout';
 import ButtonLink from '@/components/links/ButtonLink';
 import Marker from '@/components/Marker';
 import Seo from '@/components/Seo';
 import TechStack from '@/components/TechStack';
+import { MainTitle } from '@/components/typography/MainTitle';
 import { LINK_SHORTENER_URL } from '@/constants/env';
 import clsxm from '@/lib/clsxm';
 
@@ -24,9 +24,10 @@ const AboutPage: NextPage = () => {
         <section className={clsxm('my-16 flex flex-col justify-center')}>
           <article className='layout flex flex-col gap-y-6'>
             <div className='flex items-center gap-x-3'>
-              <h1 className='text-3xl md:text-5xl 2xl:text-6xl'>
-                <Accent>Hey, I{"'"}m Aaron Christopher</Accent>
-              </h1>
+              <MainTitle
+                className='text-3xl md:text-5xl 2xl:text-6xl'
+                title="Hey, I'm Aaron Christopher"
+              />
               <CloudinaryImg
                 className='float-right w-24 md:w-24'
                 publicId={'lordronz-site/main/memoji-thonking-airpods'}
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index ef80371f..57af8d08 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -11,6 +11,7 @@ import StyledInput from '@/components/forms/StyledInput';
 import Layout from '@/components/layout/Layout';
 import Seo from '@/components/Seo';
 import SortListbox, { SortOption } from '@/components/SortListbox';
+import { MainTitle } from '@/components/typography/MainTitle';
 import useInjectContentMeta from '@/hooks/useInjectContentMeta';
 import clsxm from '@/lib/clsxm';
 import { getFromSessionStorage } from '@/lib/helper';
@@ -128,9 +129,10 @@ const IndexPage = ({
       <main>
         <section className={clsxm(isLoaded && 'fade-in-start')}>
           <div className='layout py-12'>
-            <h1 className='text-3xl md:text-5xl'>
-              <Accent>Blog {!isEnglish && 'Bahasa Indonesia'}</Accent>
-            </h1>
+            <MainTitle
+              className='text-3xl md:text-5xl'
+              title={`Blog${!isEnglish ? ' Bahasa Indonesia' : ''}`}
+            />
             <p className='mt-2 text-gray-600 dark:text-gray-300'>
               Random thoughts about my expertise and hobby. It should be
               informational for yall sussy bakas.
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 235dba29..3b33e3dd 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,12 +1,12 @@
 import type { NextPage } from 'next';
 
-import Accent from '@/components/Accent';
 import CoolButton from '@/components/buttons/CoolButton';
 import { Graphic } from '@/components/layout/Graphic';
 import Layout from '@/components/layout/Layout';
 import CustomLink from '@/components/links/CustomLink';
 import UnstyledLink from '@/components/links/UnstyledLink';
 import Seo from '@/components/Seo';
+import { MainTitle } from '@/components/typography/MainTitle';
 import Wave from '@/components/Wave';
 import clsxm from '@/lib/clsxm';
 
@@ -19,10 +19,9 @@ const Home: NextPage = () => {
           <article className='layout'>
             <div className='flex h-full flex-col items-center gap-x-4 gap-y-4 md:flex-row'>
               <div className='flex flex-col'>
-                <h1 className='text-4xl font-bold md:text-6xl 2xl:text-7xl'>
-                  <Accent>Henlo there </Accent>
+                <MainTitle title='Henlo there '>
                   <Wave title='Hello'>👋</Wave>
-                </h1>
+                </MainTitle>
                 <p
                   className={clsxm(
                     'my-4 max-w-4xl md:mt-6',
diff --git a/src/pages/projects.tsx b/src/pages/projects.tsx
index c6199d80..db18b32c 100644
--- a/src/pages/projects.tsx
+++ b/src/pages/projects.tsx
@@ -2,10 +2,10 @@ import type { NextPage } from 'next';
 import { useState } from 'react';
 import Lightbox from 'react-image-lightbox';
 
-import Accent from '@/components/Accent';
 import Layout from '@/components/layout/Layout';
 import ProjectCard, { Project } from '@/components/ProjectCard';
 import Seo from '@/components/Seo';
+import { MainTitle } from '@/components/typography/MainTitle';
 import { LINK_SHORTENER_URL } from '@/constants/env';
 import clsxm from '@/lib/clsxm';
 
@@ -107,9 +107,10 @@ const Projects: NextPage = () => {
       <main>
         <section className={clsxm('flex flex-col justify-center')}>
           <article className='layout space-y-10 py-8'>
-            <h1 className='text-3xl md:text-5xl 2xl:text-6xl'>
-              <Accent>Projects</Accent>
-            </h1>
+            <MainTitle
+              className='text-3xl md:text-5xl 2xl:text-6xl'
+              title='Projects'
+            />
             <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
               {projects.map((project) => (
                 <ProjectCard