diff --git a/app/topics/bbdc-appointment-slots/page.tsx b/app/topics/bbdc-appointment-slots/page.tsx
index d3661eb..e2831a4 100644
--- a/app/topics/bbdc-appointment-slots/page.tsx
+++ b/app/topics/bbdc-appointment-slots/page.tsx
@@ -2,12 +2,11 @@ import { Metadata } from "next";
 import React from "react";
 import { Container } from "@/components/ui/container";
 import { Anchor } from "@/components/ui/anchor";
-import { Button } from "@/components/ui/button";
 import Heading from "@/components/ui/heading";
 import Subheading from "@/components/ui/subheading";
 import Paragraph from "@/components/ui/paragraph";
-import { Routes, TelegramChannel } from "@/lib/enums";
-import { TELEGRAM_SHORT_URL } from "@/lib/constants";
+import TelegramLinkButton from "@/components/telegram-link-button";
+import { Routes, TelegramChannel, TopicTitle } from "@/lib/enums";
 import { META_OPEN_GRAPH, META_TWITTER } from "@/app/shared-metadata";
 import BbdcLessonSlotsInfo from "./bbdc-lesson-slots-info";
 
@@ -99,12 +98,11 @@ export default function BBDCAppointmentSlots() {
         as one of the topics you want to subscribe to.
       </Paragraph>
       <div className="mt-8 text-center">
-        <Anchor
-          href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.BbdcAppointmentSlots}`}
-          isExternal
-        >
-          <Button variant="secondary">Subscribe Now</Button>
-        </Anchor>
+        <TelegramLinkButton
+          channel={TelegramChannel.BbdcAppointmentSlots}
+          linkText="Subscribe Now"
+          topicTitle={TopicTitle.BbdcAppointmentSlots}
+        />
       </div>
     </Container>
   );
diff --git a/app/topics/cdc-appointment-slots/page.tsx b/app/topics/cdc-appointment-slots/page.tsx
index 9a3aea8..ad07c5f 100644
--- a/app/topics/cdc-appointment-slots/page.tsx
+++ b/app/topics/cdc-appointment-slots/page.tsx
@@ -1,14 +1,12 @@
 import { Metadata } from "next";
-import Link from "next/link";
 import React from "react";
 import { Container } from "@/components/ui/container";
 import { Anchor } from "@/components/ui/anchor";
-import { Button } from "@/components/ui/button";
 import Heading from "@/components/ui/heading";
 import Subheading from "@/components/ui/subheading";
 import Paragraph from "@/components/ui/paragraph";
-import { Routes, TelegramChannel } from "@/lib/enums";
-import { TELEGRAM_SHORT_URL } from "@/lib/constants";
+import TelegramLinkButton from "@/components/telegram-link-button";
+import { Routes, TelegramChannel, TopicTitle } from "@/lib/enums";
 import { META_OPEN_GRAPH, META_TWITTER } from "@/app/shared-metadata";
 import { CdcSlotsTable } from "./cdc-slots-table";
 
@@ -90,39 +88,17 @@ export default function CdcAppointmentSlots() {
         To get started, simply click either of the buttons below to subscribe to
         the Telegram channel and start receiving notifications.
       </Paragraph>
-      <div className="mt-8 text-center flex flex-col gap-4">
-        <Anchor
-          href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.CdcEyesightTest}`}
-          isExternal
-        >
-          <Button variant="secondary">
-            <span>
-              <abbr
-                title="ComfortDelGro Driving Centre"
-                className="no-underline"
-              >
-                CDC
-              </abbr>{" "}
-              Appointment Slots (Eyesight Test)
-            </span>
-          </Button>
-        </Anchor>
-        <Anchor
-          href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.CdcCounterServices}`}
-          isExternal
-        >
-          <Button variant="secondary" className="!inline-block">
-            <span>
-              <abbr
-                title="ComfortDelGro Driving Centre"
-                className="no-underline"
-              >
-                CDC
-              </abbr>{" "}
-              Appointment Slots (Counter Services)
-            </span>
-          </Button>
-        </Anchor>
+      <div className="mt-8 flex flex-col items-center gap-4">
+        <TelegramLinkButton
+          channel={TelegramChannel.CdcEyesightTest}
+          linkText="Subscribe to Eyesight Test"
+          topicTitle={TopicTitle.CdcEyesightTest}
+        />
+        <TelegramLinkButton
+          channel={TelegramChannel.CdcCounterServices}
+          linkText="Subscribe to Counter Services"
+          topicTitle={TopicTitle.CdcCounterServices}
+        />
       </div>
     </Container>
   );
diff --git a/app/topics/cdc-practical-lesson-slots/page.tsx b/app/topics/cdc-practical-lesson-slots/page.tsx
index 73d05b0..cdf541c 100644
--- a/app/topics/cdc-practical-lesson-slots/page.tsx
+++ b/app/topics/cdc-practical-lesson-slots/page.tsx
@@ -1,14 +1,12 @@
 import { Metadata } from "next";
-import Link from "next/link";
 import React from "react";
 import { Container } from "@/components/ui/container";
 import { Anchor } from "@/components/ui/anchor";
-import { Button } from "@/components/ui/button";
 import Heading from "@/components/ui/heading";
 import Subheading from "@/components/ui/subheading";
 import Paragraph from "@/components/ui/paragraph";
-import { Routes, TelegramChannel } from "@/lib/enums";
-import { TELEGRAM_SHORT_URL } from "@/lib/constants";
+import TelegramLinkButton from "@/components/telegram-link-button";
+import { Routes, TelegramChannel, TopicTitle } from "@/lib/enums";
 import { META_OPEN_GRAPH, META_TWITTER } from "@/app/shared-metadata";
 import CdcLessonSlotsInfo from "./cdc-lesson-slots-info";
 
@@ -110,12 +108,11 @@ export default function CdcPracticalLessonSlots() {
         Telegram channel and start receiving notifications.
       </Paragraph>
       <div className="mt-8 text-center">
-        <Anchor
-          href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.CdcLessonsAutoCar}`}
-          isExternal
-        >
-          <Button variant="secondary">Subscribe Now</Button>
-        </Anchor>
+        <TelegramLinkButton
+          channel={TelegramChannel.CdcLessonsAutoCar}
+          linkText="Subscribe Now"
+          topicTitle={TopicTitle.CdcPracticalLessonSlots}
+        />
       </div>
     </Container>
   );
diff --git a/app/topics/coe-bidding-results/page.tsx b/app/topics/coe-bidding-results/page.tsx
index 51ec8ac..3fd138c 100644
--- a/app/topics/coe-bidding-results/page.tsx
+++ b/app/topics/coe-bidding-results/page.tsx
@@ -1,14 +1,12 @@
 import { Metadata } from "next";
-import Link from "next/link";
 import React from "react";
 import { Container } from "@/components/ui/container";
-import { Button } from "@/components/ui/button";
 import Heading from "@/components/ui/heading";
 import Subheading from "@/components/ui/subheading";
 import Paragraph from "@/components/ui/paragraph";
 import { Anchor } from "@/components/ui/anchor";
+import SubscribeLinkButton from "@/components/subscribe-link-button";
 import { Routes } from "@/lib/enums";
-import { SUBSCRIBE_FORM_ID } from "@/lib/constants";
 import { META_OPEN_GRAPH, META_TWITTER } from "@/app/shared-metadata";
 import { CoeBiddingResultsTable } from "./coe-bidding-results-table";
 
@@ -129,11 +127,10 @@ export default function CoeBiddingResults() {
         want to subscribe to.
       </Paragraph>
       <div className="mt-8 text-center">
-        <Button variant="secondary" asChild>
-          <Link href={`${Routes.DrivingCategory}#${SUBSCRIBE_FORM_ID}`}>
-            Subscribe Now
-          </Link>
-        </Button>
+        <SubscribeLinkButton
+          route={Routes.DrivingCategory}
+          linkText="Subscribe Now"
+        />
       </div>
     </Container>
   );
diff --git a/app/topics/fixed-deposit-rates/page.tsx b/app/topics/fixed-deposit-rates/page.tsx
index 7564bba..b0a02b3 100644
--- a/app/topics/fixed-deposit-rates/page.tsx
+++ b/app/topics/fixed-deposit-rates/page.tsx
@@ -1,15 +1,13 @@
 import { Metadata } from "next";
 import React from "react";
 import { Container } from "@/components/ui/container";
-import { Button } from "@/components/ui/button";
-import { Anchor } from "@/components/ui/anchor";
 import Heading from "@/components/ui/heading";
 import Subheading from "@/components/ui/subheading";
 import Paragraph from "@/components/ui/paragraph";
-import { Routes, TelegramChannel } from "@/lib/enums";
+import TelegramLinkButton from "@/components/telegram-link-button";
+import { Routes, TelegramChannel, TopicTitle } from "@/lib/enums";
 import { META_OPEN_GRAPH, META_TWITTER } from "@/app/shared-metadata";
 import { FixedDepositRatesTable } from "./fixed-deposit-rates-table";
-import { TELEGRAM_SHORT_URL } from "@/lib/constants";
 
 const title = "Fixed Deposit Rates";
 const description =
@@ -63,12 +61,11 @@ export default function FixedDepositRates() {
         Telegram channel and start receiving notifications.
       </Paragraph>
       <div className="mt-8 text-center">
-        <Anchor
-          href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.FixedDepositRates}`}
-          isExternal
-        >
-          <Button variant="secondary">Subscribe Now</Button>
-        </Anchor>
+        <TelegramLinkButton
+          channel={TelegramChannel.FixedDepositRates}
+          linkText="Subscribe Now"
+          topicTitle={TopicTitle.FixedDepositRates}
+        />
       </div>
     </Container>
   );
diff --git a/app/topics/japan-visa-appointment-slots/page.tsx b/app/topics/japan-visa-appointment-slots/page.tsx
index c70b768..8c2de39 100644
--- a/app/topics/japan-visa-appointment-slots/page.tsx
+++ b/app/topics/japan-visa-appointment-slots/page.tsx
@@ -1,14 +1,13 @@
 import { Metadata } from "next";
-import Link from "next/link";
 import React from "react";
 import { Container } from "@/components/ui/container";
 import { Anchor } from "@/components/ui/anchor";
-import { Button } from "@/components/ui/button";
 import Heading from "@/components/ui/heading";
 import Subheading from "@/components/ui/subheading";
 import Paragraph from "@/components/ui/paragraph";
-import { Routes, TelegramChannel } from "@/lib/enums";
-import { SUBSCRIBE_FORM_ID, TELEGRAM_SHORT_URL } from "@/lib/constants";
+import TelegramLinkButton from "@/components/telegram-link-button";
+import SubscribeLinkButton from "@/components/subscribe-link-button";
+import { Routes, TelegramChannel, TopicTitle } from "@/lib/enums";
 import { META_OPEN_GRAPH, META_TWITTER } from "@/app/shared-metadata";
 import { JapanVisaSlotsTable } from "./japan-visa-slots-table";
 
@@ -83,45 +82,27 @@ export default function JapanVisa() {
         notifications subscription page (for other visa applications and
         services).
       </Paragraph>
-      <div className="mt-8 text-center flex flex-col justify-center gap-4 sm:flex-row">
+      <div className="mt-8 flex flex-col justify-center gap-4 text-center sm:flex-row">
         <div>
-          <Button variant="secondary" asChild>
-            <Anchor
-              href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.JapanVisaTourism}`}
-              className="no-underline !inline-block"
-              isExternal
-            >
-              For Tourism
-            </Anchor>
-          </Button>
+          <TelegramLinkButton
+            channel={TelegramChannel.JapanVisaTourism}
+            linkText="Subscribe to Tourism"
+            topicTitle={TopicTitle.JapanVisaTourism}
+          />
         </div>
         <div>
-          <Button variant="secondary" asChild>
-            <Link href={`${Routes.JapanVisaCategory}#${SUBSCRIBE_FORM_ID}`}>
-              <span>
-                For Business/
-                <abbr
-                  title="Certificate of Eligibility"
-                  className="no-underline"
-                >
-                  COE
-                </abbr>
-                /Spouse
-              </span>
-            </Link>
-          </Button>
+          <SubscribeLinkButton
+            route={Routes.JapanVisaCategory}
+            linkText="Subscribe to For Business/COE/Spouse"
+          />
         </div>
       </div>
       <div className="mt-4 text-center">
-        <Button variant="secondary" asChild>
-          <Anchor
-            href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.JapanVisaOthers}`}
-            className="no-underline !inline-block"
-            isExternal
-          >
-            For Other Visa Applications/Services
-          </Anchor>
-        </Button>
+        <TelegramLinkButton
+          channel={TelegramChannel.JapanVisaOthers}
+          linkText="Subscribe to Other Visa Applications/Services"
+          topicTitle={TopicTitle.JapanVisaOthers}
+        />
       </div>
     </Container>
   );
diff --git a/app/topics/jetstar-flights/page.tsx b/app/topics/jetstar-flights/page.tsx
index ca16c32..6ed35d9 100644
--- a/app/topics/jetstar-flights/page.tsx
+++ b/app/topics/jetstar-flights/page.tsx
@@ -1,15 +1,19 @@
 import { Metadata } from "next";
 import React from "react";
 import { Container } from "@/components/ui/container";
-import { Button } from "@/components/ui/button";
 import { Anchor } from "@/components/ui/anchor";
 import Heading from "@/components/ui/heading";
 import Subheading from "@/components/ui/subheading";
 import Paragraph from "@/components/ui/paragraph";
-import { FlightAirline, Routes, TelegramChannel } from "@/lib/enums";
+import TelegramLinkButton from "@/components/telegram-link-button";
+import {
+  FlightAirline,
+  Routes,
+  TelegramChannel,
+  TopicTitle,
+} from "@/lib/enums";
 import { META_OPEN_GRAPH, META_TWITTER } from "@/app/shared-metadata";
 import { FlightsTable } from "@/components/flights-table";
-import { TELEGRAM_SHORT_URL } from "@/lib/constants";
 
 const title = "Jetstar Flights";
 const description =
@@ -70,12 +74,11 @@ export default function JetstarFlights() {
         Telegram channel and start receiving notifications.
       </Paragraph>
       <div className="mt-8 text-center">
-        <Anchor
-          href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.JetstarFlights}`}
-          isExternal
-        >
-          <Button variant="secondary">Subscribe Now</Button>
-        </Anchor>
+        <TelegramLinkButton
+          channel={TelegramChannel.JetstarFlights}
+          linkText="Subscribe Now"
+          topicTitle={TopicTitle.JetstarFlights}
+        />
       </div>
     </Container>
   );
diff --git a/app/topics/ktm-train-tickets/page.tsx b/app/topics/ktm-train-tickets/page.tsx
index 695b1ae..4492279 100644
--- a/app/topics/ktm-train-tickets/page.tsx
+++ b/app/topics/ktm-train-tickets/page.tsx
@@ -1,15 +1,13 @@
 import { Metadata } from "next";
-import Link from "next/link";
 import React from "react";
 import { Container } from "@/components/ui/container";
-import { Button } from "@/components/ui/button";
 import { Anchor } from "@/components/ui/anchor";
 import Heading from "@/components/ui/heading";
 import Subheading from "@/components/ui/subheading";
 import Paragraph from "@/components/ui/paragraph";
-import { Routes, TelegramChannel } from "@/lib/enums";
+import TelegramLinkButton from "@/components/telegram-link-button";
+import { Routes, TelegramChannel, TopicTitle } from "@/lib/enums";
 import { META_OPEN_GRAPH, META_TWITTER } from "@/app/shared-metadata";
-import { TELEGRAM_SHORT_URL } from "@/lib/constants";
 import { TrainTicketsTable } from "./train-tickets-table";
 import { TrainScheduleTable } from "./train-schedule-table";
 
@@ -127,12 +125,11 @@ export default function KtmTrainTickets() {
         Telegram channel and start receiving notifications.
       </Paragraph>
       <div className="mt-8 text-center">
-        <Anchor
-          href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.KtmTrainTickets}`}
-          isExternal
-        >
-          <Button variant="secondary">Subscribe Now</Button>
-        </Anchor>
+        <TelegramLinkButton
+          channel={TelegramChannel.KtmTrainTickets}
+          linkText="Subscribe Now"
+          topicTitle={TopicTitle.KtmTrainTickets}
+        />
       </div>
     </Container>
   );
diff --git a/app/topics/scoot-flights/page.tsx b/app/topics/scoot-flights/page.tsx
index 63d9551..2642583 100644
--- a/app/topics/scoot-flights/page.tsx
+++ b/app/topics/scoot-flights/page.tsx
@@ -2,13 +2,12 @@ import { Metadata } from "next";
 import React from "react";
 import { Anchor } from "@/components/ui/anchor";
 import { Container } from "@/components/ui/container";
-import { Button } from "@/components/ui/button";
 import Heading from "@/components/ui/heading";
 import Subheading from "@/components/ui/subheading";
 import Paragraph from "@/components/ui/paragraph";
-import { Routes, TelegramChannel } from "@/lib/enums";
+import TelegramLinkButton from "@/components/telegram-link-button";
+import { Routes, TelegramChannel, TopicTitle } from "@/lib/enums";
 import { META_OPEN_GRAPH, META_TWITTER } from "@/app/shared-metadata";
-import { TELEGRAM_SHORT_URL } from "@/lib/constants";
 import TravelDealsInfo from "./travel-deals-info";
 
 const title = "Scoot Flights";
@@ -71,12 +70,11 @@ export default function ScootFlights() {
         Telegram channel and start receiving notifications.
       </Paragraph>
       <div className="mt-8 text-center">
-        <Anchor
-          href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.ScootFlights}`}
-          isExternal
-        >
-          <Button variant="secondary">Subscribe Now</Button>
-        </Anchor>
+        <TelegramLinkButton
+          channel={TelegramChannel.ScootFlights}
+          linkText="Subscribe Now"
+          topicTitle={TopicTitle.ScootFlights}
+        />
       </div>
     </Container>
   );
diff --git a/app/topics/singapore-airlines-flights/page.tsx b/app/topics/singapore-airlines-flights/page.tsx
index 25d6216..fb8b16d 100644
--- a/app/topics/singapore-airlines-flights/page.tsx
+++ b/app/topics/singapore-airlines-flights/page.tsx
@@ -2,14 +2,18 @@ import { Metadata } from "next";
 import React from "react";
 import { Anchor } from "@/components/ui/anchor";
 import { Container } from "@/components/ui/container";
-import { Button } from "@/components/ui/button";
 import Heading from "@/components/ui/heading";
 import Subheading from "@/components/ui/subheading";
 import Paragraph from "@/components/ui/paragraph";
 import { FlightsTable } from "@/components/flights-table";
-import { FlightAirline, Routes, TelegramChannel } from "@/lib/enums";
+import TelegramLinkButton from "@/components/telegram-link-button";
+import {
+  FlightAirline,
+  Routes,
+  TelegramChannel,
+  TopicTitle,
+} from "@/lib/enums";
 import { META_OPEN_GRAPH, META_TWITTER } from "@/app/shared-metadata";
-import { TELEGRAM_SHORT_URL } from "@/lib/constants";
 
 const title = "Singapore Airlines Flights";
 const description =
@@ -74,12 +78,11 @@ export default function SingaporeAirlinesFlights() {
         Telegram channel and start receiving notifications.
       </Paragraph>
       <div className="mt-8 text-center">
-        <Anchor
-          href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.SingaporeAirlinesFlights}`}
-          isExternal
-        >
-          <Button variant="secondary">Subscribe Now</Button>
-        </Anchor>
+        <TelegramLinkButton
+          channel={TelegramChannel.SingaporeAirlinesFlights}
+          linkText="Subscribe Now"
+          topicTitle={TopicTitle.SingaporeAirlinesFlights}
+        />
       </div>
     </Container>
   );
diff --git a/app/topics/ssdc-appointment-slots/page.tsx b/app/topics/ssdc-appointment-slots/page.tsx
index 23cc331..b4273a8 100644
--- a/app/topics/ssdc-appointment-slots/page.tsx
+++ b/app/topics/ssdc-appointment-slots/page.tsx
@@ -1,14 +1,13 @@
 import { Metadata } from "next";
-import Link from "next/link";
 import React from "react";
 import { Container } from "@/components/ui/container";
 import { Anchor } from "@/components/ui/anchor";
-import { Button } from "@/components/ui/button";
 import Heading from "@/components/ui/heading";
 import Subheading from "@/components/ui/subheading";
 import Paragraph from "@/components/ui/paragraph";
-import { Routes, TelegramChannel } from "@/lib/enums";
-import { SUBSCRIBE_FORM_ID, TELEGRAM_SHORT_URL } from "@/lib/constants";
+import TelegramLinkButton from "@/components/telegram-link-button";
+import SubscribeLinkButton from "@/components/subscribe-link-button";
+import { Routes, TelegramChannel, TopicTitle } from "@/lib/enums";
 import { META_OPEN_GRAPH, META_TWITTER } from "@/app/shared-metadata";
 import { SsdcSlotsTable } from "./ssdc-slots-table";
 
@@ -94,36 +93,27 @@ export default function SsdcAppointmentSlots() {
         or to head over to the email notifications subscription page (for other
         appointments).
       </Paragraph>
-      <div className="mt-8 text-center flex flex-col justify-center gap-4 sm:flex-row">
+      <div className="mt-8 flex flex-col justify-center gap-4 text-center sm:flex-row">
         <div>
-          <Button variant="secondary" asChild>
-            <Anchor
-              href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.SsdcPracticalLessonBooking}`}
-              className="no-underline"
-              isExternal
-            >
-              For Practical Lesson Booking
-            </Anchor>
-          </Button>
+          <TelegramLinkButton
+            channel={TelegramChannel.SsdcPracticalLessonBooking}
+            linkText="Subscribe to Practical Lesson Booking"
+            topicTitle={TopicTitle.SsdcPracticalLessonBooking}
+          />
         </div>
         <div>
-          <Button variant="secondary" asChild>
-            <Anchor
-              href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.SsdcPrivateLearners}`}
-              className="no-underline"
-              isExternal
-            >
-              For Private Learners
-            </Anchor>
-          </Button>
+          <TelegramLinkButton
+            channel={TelegramChannel.SsdcPrivateLearners}
+            linkText="Subscribe to Private Learners"
+            topicTitle={TopicTitle.SsdcPrivateLearners}
+          />
         </div>
       </div>
       <div className="mt-4 text-center">
-        <Button variant="secondary" asChild>
-          <Link href={`${Routes.DrivingCategory}#${SUBSCRIBE_FORM_ID}`}>
-            For Other Appointment Slots
-          </Link>
-        </Button>
+        <SubscribeLinkButton
+          route={Routes.DrivingCategory}
+          linkText="Subscribe to Other Appointment Slots"
+        />
       </div>
     </Container>
   );
diff --git a/app/topics/tokyo-disneyland-attraction-updates/page.tsx b/app/topics/tokyo-disneyland-attraction-updates/page.tsx
index b90849b..dfe3c54 100644
--- a/app/topics/tokyo-disneyland-attraction-updates/page.tsx
+++ b/app/topics/tokyo-disneyland-attraction-updates/page.tsx
@@ -2,14 +2,18 @@ import { Metadata } from "next";
 import React from "react";
 import { Anchor } from "@/components/ui/anchor";
 import { Container } from "@/components/ui/container";
-import { Button } from "@/components/ui/button";
 import Heading from "@/components/ui/heading";
 import Subheading from "@/components/ui/subheading";
 import Paragraph from "@/components/ui/paragraph";
+import TelegramLinkButton from "@/components/telegram-link-button";
 import { ThemeParkFacilitiesTable } from "@/components/theme-park-facilities-table";
-import { Routes, TelegramChannel, ThemeParkService } from "@/lib/enums";
+import {
+  Routes,
+  TelegramChannel,
+  ThemeParkService,
+  TopicTitle,
+} from "@/lib/enums";
 import { META_OPEN_GRAPH, META_TWITTER } from "@/app/shared-metadata";
-import { TELEGRAM_SHORT_URL } from "@/lib/constants";
 
 const title = "Tokyo Disneyland Attraction Updates";
 const description =
@@ -85,12 +89,11 @@ export default function TokyoDisneylandAttractionUpdates() {
         Telegram channel and start receiving notifications.
       </Paragraph>
       <div className="mt-8 text-center">
-        <Anchor
-          href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.TokyoDisneylandAttractions}`}
-          isExternal
-        >
-          <Button variant="secondary">Subscribe Now</Button>
-        </Anchor>
+        <TelegramLinkButton
+          channel={TelegramChannel.TokyoDisneylandAttractions}
+          linkText="Subscribe Now"
+          topicTitle={TopicTitle.TokyoDisneylandAttractions}
+        />
       </div>
     </Container>
   );
diff --git a/app/topics/tokyo-disneysea-attraction-updates/page.tsx b/app/topics/tokyo-disneysea-attraction-updates/page.tsx
index d099dba..b336b19 100644
--- a/app/topics/tokyo-disneysea-attraction-updates/page.tsx
+++ b/app/topics/tokyo-disneysea-attraction-updates/page.tsx
@@ -2,14 +2,18 @@ import { Metadata } from "next";
 import React from "react";
 import { Anchor } from "@/components/ui/anchor";
 import { Container } from "@/components/ui/container";
-import { Button } from "@/components/ui/button";
 import Heading from "@/components/ui/heading";
 import Subheading from "@/components/ui/subheading";
 import Paragraph from "@/components/ui/paragraph";
+import TelegramLinkButton from "@/components/telegram-link-button";
 import { ThemeParkFacilitiesTable } from "@/components/theme-park-facilities-table";
-import { Routes, TelegramChannel, ThemeParkService } from "@/lib/enums";
+import {
+  Routes,
+  TelegramChannel,
+  ThemeParkService,
+  TopicTitle,
+} from "@/lib/enums";
 import { META_OPEN_GRAPH, META_TWITTER } from "@/app/shared-metadata";
-import { TELEGRAM_SHORT_URL } from "@/lib/constants";
 
 const title = "Tokyo DisneySea Attraction Updates";
 const description =
@@ -86,12 +90,11 @@ export default function TokyoDisneySeaAttractionUpdates() {
         Telegram channel and start receiving notifications.
       </Paragraph>
       <div className="mt-8 text-center">
-        <Anchor
-          href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.TokyoDisneySeaAttractions}`}
-          isExternal
-        >
-          <Button variant="secondary">Subscribe Now</Button>
-        </Anchor>
+        <TelegramLinkButton
+          channel={TelegramChannel.TokyoDisneySeaAttractions}
+          linkText="Subscribe Now"
+          topicTitle={TopicTitle.TokyoDisneySeaAttractions}
+        />
       </div>
     </Container>
   );
diff --git a/components/subscribe-link-button.tsx b/components/subscribe-link-button.tsx
new file mode 100644
index 0000000..ee23579
--- /dev/null
+++ b/components/subscribe-link-button.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { ArrowRightIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Routes } from "@/lib/enums";
+import { SUBSCRIBE_FORM_ID } from "@/lib/constants";
+
+type Props = {
+  route: Routes;
+  linkText: string;
+};
+
+export default function SubscribeLinkButton({ route, linkText }: Props) {
+  const linkUrl = `${route}#${SUBSCRIBE_FORM_ID}`;
+
+  return (
+    <Button variant="secondary" asChild>
+      <Link href={linkUrl}>
+        {linkText} <ArrowRightIcon className="ml-2 h-4 w-4" />
+      </Link>
+    </Button>
+  );
+}
diff --git a/components/telegram-link-button.tsx b/components/telegram-link-button.tsx
new file mode 100644
index 0000000..89ae486
--- /dev/null
+++ b/components/telegram-link-button.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import React from "react";
+import { ExternalLinkIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Anchor } from "@/components/ui/anchor";
+import { trackEvent } from "@/lib/google-analytics";
+import { GoogleAnalyticsEvent, TelegramChannel } from "@/lib/enums";
+import { TELEGRAM_SHORT_URL } from "@/lib/constants";
+
+type Props = {
+  channel: TelegramChannel;
+  linkText: string;
+  topicTitle: string;
+};
+
+export default function TelegramLinkButton({
+  channel,
+  linkText,
+  topicTitle,
+}: Props) {
+  const linkUrl = `${TELEGRAM_SHORT_URL}/${channel}`;
+  const onClick = () => {
+    trackEvent({
+      linkUrl,
+      topicTitle,
+      linkText,
+      event: GoogleAnalyticsEvent.TOPIC_CLICK,
+    });
+  };
+
+  return (
+    <Button variant="secondary" asChild>
+      <Anchor
+        href={linkUrl}
+        onClick={onClick}
+        className="no-underline"
+        isExternal
+      >
+        {linkText} <ExternalLinkIcon className="ml-2 h-4 w-4" />
+      </Anchor>
+    </Button>
+  );
+}
diff --git a/lib/content.tsx b/lib/content.tsx
index 41cf23c..de8d1f2 100644
--- a/lib/content.tsx
+++ b/lib/content.tsx
@@ -6,7 +6,12 @@ import {
   TelegramPublicChannel,
   TelegramPublicChannels,
 } from "./types";
-import { Routes, SubscriptionTopic, TelegramChannel } from "./enums";
+import {
+  Routes,
+  SubscriptionTopic,
+  TelegramChannel,
+  TopicTitle,
+} from "./enums";
 import { OWNER_EMAIL } from "./constants";
 
 export const MAIN_MENU_ITEMS = [
@@ -275,7 +280,7 @@ export const NEW_FEATURES_TELEGRAM_CHANNEL: TelegramPublicChannel = {
 export const CDC_TELEGRAM_CHANNELS: TelegramPublicChannels = [
   {
     id: TelegramChannel.CdcLessonsAutoCar,
-    title: "🚘 CDC Practical Lesson Slots (Class 3A Motorcar)",
+    title: TopicTitle.CdcPracticalLessonSlots,
     description: (
       <>
         Receive notifications when there are new practical lessons slot(s) for{" "}
@@ -287,7 +292,7 @@ export const CDC_TELEGRAM_CHANNELS: TelegramPublicChannels = [
   },
   {
     id: TelegramChannel.CdcEyesightTest,
-    title: "🚘 CDC Appointment Slots (Eyesight Test)",
+    title: TopicTitle.CdcEyesightTest,
     description: (
       <>
         Receive notifications when there are new appointment date(s) for the{" "}
@@ -299,7 +304,7 @@ export const CDC_TELEGRAM_CHANNELS: TelegramPublicChannels = [
   },
   {
     id: TelegramChannel.CdcCounterServices,
-    title: "🚘 CDC Appointment Slots (Counter Services)",
+    title: TopicTitle.CdcCounterServices,
     description: (
       <>
         Receive notifications when there are new appointment date(s) for{" "}
@@ -327,7 +332,7 @@ export const CDC_TELEGRAM_CHANNELS: TelegramPublicChannels = [
 export const SSDC_TELEGRAM_CHANNELS: TelegramPublicChannels = [
   {
     id: TelegramChannel.SsdcPracticalLessonBooking,
-    title: "🚘 SSDC Appointment Slots (Practical Lesson Booking)",
+    title: TopicTitle.SsdcPracticalLessonBooking,
     description: (
       <>
         Receive notifications when there are new appointment date(s) for the{" "}
@@ -341,7 +346,7 @@ export const SSDC_TELEGRAM_CHANNELS: TelegramPublicChannels = [
   },
   {
     id: TelegramChannel.SsdcPrivateLearners,
-    title: "🚘 SSDC Appointment Slots (Private Learners)",
+    title: TopicTitle.SsdcPrivateLearners,
     description: (
       <>
         Receive notifications when there are new appointment date(s) for the{" "}
@@ -369,7 +374,7 @@ export const SSDC_TELEGRAM_CHANNELS: TelegramPublicChannels = [
 export const BBDC_TELEGRAM_CHANNELS: TelegramPublicChannels = [
   {
     id: TelegramChannel.BbdcAppointmentSlots,
-    title: "🚘 BBDC Appointment Slots",
+    title: TopicTitle.BbdcAppointmentSlots,
     description: (
       <>
         Receive notifications when there are new appointment date(s) for{" "}
@@ -406,7 +411,7 @@ export const DRIVING_TELEGRAM_CHANNELS: TelegramPublicChannels = [
 export const JAPAN_VISA_TELEGRAM_CHANNELS: TelegramPublicChannels = [
   {
     id: TelegramChannel.JapanVisaTourism,
-    title: "🇯🇵 Japan Visa Appointment Slots (Tourism)",
+    title: TopicTitle.JapanVisaTourism,
     description: (
       <>
         Receive notifications when there are new visa appointment date(s) for{" "}
@@ -418,7 +423,7 @@ export const JAPAN_VISA_TELEGRAM_CHANNELS: TelegramPublicChannels = [
   },
   {
     id: TelegramChannel.JapanVisaOthers,
-    title: "🇯🇵 Japan Visa Appointment Slots (Others)",
+    title: TopicTitle.JapanVisaOthers,
     description: (
       <>
         Receive notifications when there are new visa appointment date(s) for{" "}
@@ -436,7 +441,7 @@ export const JAPAN_VISA_TELEGRAM_CHANNELS: TelegramPublicChannels = [
 export const TRAVEL_TELEGRAM_CHANNELS: TelegramPublicChannels = [
   {
     id: TelegramChannel.KtmTrainTickets,
-    title: "🚆 KTM Train Tickets",
+    title: TopicTitle.KtmTrainTickets,
     description: (
       <>
         Receive notifications when there are{" "}
@@ -453,7 +458,7 @@ export const TRAVEL_TELEGRAM_CHANNELS: TelegramPublicChannels = [
   },
   {
     id: TelegramChannel.SingaporeAirlinesFlights,
-    title: "✈️ Flight Prices (Singapore Airlines)",
+    title: TopicTitle.SingaporeAirlinesFlights,
     description: (
       <>
         Receive notifications when the flight prices goes down for{" "}
@@ -465,7 +470,7 @@ export const TRAVEL_TELEGRAM_CHANNELS: TelegramPublicChannels = [
   },
   {
     id: TelegramChannel.ScootFlights,
-    title: "✈️ Flight Prices (Scoot)",
+    title: TopicTitle.ScootFlights,
     description: (
       <>
         Receive notifications when the flight prices goes down for{" "}
@@ -477,7 +482,7 @@ export const TRAVEL_TELEGRAM_CHANNELS: TelegramPublicChannels = [
   },
   {
     id: TelegramChannel.JetstarFlights,
-    title: "✈️ Flight Prices (Jetstar)",
+    title: TopicTitle.JetstarFlights,
     description: (
       <>
         Receive notifications when the flight prices goes down for{" "}
@@ -519,7 +524,7 @@ export const TRAVEL_TELEGRAM_CHANNELS: TelegramPublicChannels = [
 export const MONEY_TELEGRAM_CHANNELS: TelegramPublicChannels = [
   {
     id: TelegramChannel.FixedDepositRates,
-    title: "💰 Fixed Deposit Rates",
+    title: TopicTitle.FixedDepositRates,
     description: (
       <>
         Receive notifications when the{" "}
@@ -563,7 +568,7 @@ export const MONEY_TELEGRAM_CHANNELS: TelegramPublicChannels = [
 export const THEME_PARK_TELEGRAM_CHANNELS: TelegramPublicChannels = [
   {
     id: TelegramChannel.TokyoDisneylandAttractions,
-    title: "🏰 Tokyo Disneyland Attraction Updates",
+    title: TopicTitle.TokyoDisneylandAttractions,
     description: (
       <>
         Receive notifications on Disney Premier Access, Standby Passes or 40th
@@ -575,7 +580,7 @@ export const THEME_PARK_TELEGRAM_CHANNELS: TelegramPublicChannels = [
   },
   {
     id: TelegramChannel.TokyoDisneySeaAttractions,
-    title: "⛰️ Tokyo DisneySea Attraction Updates",
+    title: TopicTitle.TokyoDisneySeaAttractions,
     description: (
       <>
         Receive notifications on Disney Premier Access, Standby Passes or 40th
@@ -676,7 +681,7 @@ export const DRIVING_NOTIFICATION_SETTINGS: NotificationSettings = [
 export const JAPAN_VISA_NOTIFICATION_SETTINGS: NotificationSettings = [
   {
     id: SubscriptionTopic.JapanVisaBusiness,
-    title: "🇯🇵 Japan Visa Appointment Slots (Business/COE/Spouse)",
+    title: TopicTitle.JapanVisaBusiness,
     description: (
       <>
         Receive email notifications when there are new visa appointment date(s)
diff --git a/lib/enums.ts b/lib/enums.ts
index cff42ef..2b6fa0e 100644
--- a/lib/enums.ts
+++ b/lib/enums.ts
@@ -134,6 +134,25 @@ export enum ThemeParkService {
   TokyoDisneySeaAttractions = "tokyo-disneysea-attractions",
 }
 
+export enum TopicTitle {
+  BbdcAppointmentSlots = "🚘 BBDC Appointment Slots",
+  CdcEyesightTest = "🚘 CDC Appointment Slots (Eyesight Test)",
+  CdcCounterServices = "🚘 CDC Appointment Slots (Counter Services)",
+  CdcPracticalLessonSlots = "🚘 CDC Practical Lesson Slots (Class 3A Motorcar)",
+  SsdcPracticalLessonBooking = "🚘 SSDC Appointment Slots (Practical Lesson Booking)",
+  SsdcPrivateLearners = "🚘 SSDC Appointment Slots (Private Learners)",
+  FixedDepositRates = "💰 Fixed Deposit Rates",
+  JapanVisaTourism = "🇯🇵 Japan Visa Appointment Slots (Tourism)",
+  JapanVisaOthers = "🇯🇵 Japan Visa Appointment Slots (Others)",
+  JapanVisaBusiness = "🇯🇵 Japan Visa Appointment Slots (Business/COE/Spouse)",
+  TokyoDisneylandAttractions = "🏰 Tokyo Disneyland Attraction Updates",
+  TokyoDisneySeaAttractions = "⛰️ Tokyo DisneySea Attraction Updates",
+  KtmTrainTickets = "🚆 KTM Train Tickets",
+  SingaporeAirlinesFlights = "✈️ Flight Prices (Singapore Airlines)",
+  ScootFlights = "✈️ Flight Prices (Scoot)",
+  JetstarFlights = "✈️ Flight Prices (Jetstar)",
+}
+
 export enum TelegramChannel {
   SgAlerts = "SGAlertsOfficial",
   CdcLessonsAutoCar = "SGAlertsCDCLessonsAutoCar",