diff --git a/app/layout.tsx b/app/layout.tsx
index bcfc88d..c059a1b 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,10 +1,9 @@
-import { GoogleAnalytics } from "@next/third-parties/google";
-
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
+import GoogleAnalytics from "@/components/GoogleAnalytics";
 import { Toaster } from "@/components/ui/toaster";
 
 const inter = Inter({ subsets: ["latin"], fallback: ["sans-serif"] });
@@ -42,7 +41,7 @@ export default function RootLayout({
             <body className={inter.className}>
                 <div className="flex flex-col place-content-center bg-background text-text">
                     <Header />
-                    <GoogleAnalytics gaId="G-PMNW29ZB3Y" />
+                    <GoogleAnalytics />
                     {children}
                     <Footer />
                     <Toaster />
diff --git a/components/GoogleAnalytics.tsx b/components/GoogleAnalytics.tsx
new file mode 100644
index 0000000..c8ec0a2
--- /dev/null
+++ b/components/GoogleAnalytics.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import Script from "next/script";
+import * as gtag from "@/lib/gtag";
+
+const GoogleAnalytics = () => {
+    return (
+        <>
+            <Script
+                strategy="afterInteractive"
+                src={`https://www.googletagmanager.com/gtag/js?id=${gtag.NEXT_PUBLIC_GA_TRACKING_ID}`}
+            />
+            <Script
+                id="gtag-init"
+                strategy="afterInteractive"
+                dangerouslySetInnerHTML={{
+                    __html: `
+                      window.dataLayer = window.dataLayer || [];
+                      function gtag(){dataLayer.push(arguments);}
+                      gtag('js', new Date());
+                      gtag('config', '${gtag.NEXT_PUBLIC_GA_TRACKING_ID}', {
+                      page_path: window.location.pathname,
+                      });
+                    `,
+                }}
+            />
+        </>
+    );
+};
+
+export default GoogleAnalytics;
diff --git a/lib/gtag.ts b/lib/gtag.ts
new file mode 100644
index 0000000..f6d014b
--- /dev/null
+++ b/lib/gtag.ts
@@ -0,0 +1,10 @@
+// https://stackoverflow.com/questions/77063977/implementing-google-analytics-in-nextjs-13-app-directory
+
+export const NEXT_PUBLIC_GA_TRACKING_ID: string | undefined =
+    process.env.NEXT_PUBLIC_GA_TRACKING_ID;
+
+export const pageview = (url: string) => {
+    (window as any).gtag("config", NEXT_PUBLIC_GA_TRACKING_ID, {
+        page_path: url,
+    });
+};
diff --git a/package-lock.json b/package-lock.json
index 410d6cc..31b14e7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,6 @@
             "name": "degree-ez-frontend",
             "version": "0.1.0",
             "dependencies": {
-                "@next/third-parties": "^14.1.4",
                 "@radix-ui/react-popover": "^1.0.7",
                 "@radix-ui/react-select": "^2.0.0",
                 "@radix-ui/react-slot": "^1.0.2",
@@ -2655,18 +2654,6 @@
                 "node": ">= 10"
             }
         },
-        "node_modules/@next/third-parties": {
-            "version": "14.1.4",
-            "resolved": "https://registry.npmjs.org/@next/third-parties/-/third-parties-14.1.4.tgz",
-            "integrity": "sha512-e/kpEFq5/ZPhHkxpJkvhMfLp3OC6KCBou0/BV8BvgjXAPgEo6sa0ZXe0l4ZEb3wcA7NIEHIpqCmjU5Z7QAHcKQ==",
-            "dependencies": {
-                "third-party-capital": "1.0.20"
-            },
-            "peerDependencies": {
-                "next": "^13.0.0 || ^14.0.0",
-                "react": "^18.2.0"
-            }
-        },
         "node_modules/@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -11237,11 +11224,6 @@
                 "node": ">=0.8"
             }
         },
-        "node_modules/third-party-capital": {
-            "version": "1.0.20",
-            "resolved": "https://registry.npmjs.org/third-party-capital/-/third-party-capital-1.0.20.tgz",
-            "integrity": "sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA=="
-        },
         "node_modules/tmpl": {
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
diff --git a/package.json b/package.json
index 3745bf1..57e5ef3 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,6 @@
         "test:watch": "jest --watch"
     },
     "dependencies": {
-        "@next/third-parties": "^14.1.4",
         "@radix-ui/react-popover": "^1.0.7",
         "@radix-ui/react-select": "^2.0.0",
         "@radix-ui/react-slot": "^1.0.2",
