diff --git a/data/blog/2023-01-13-edge-rate-limiting.mdx b/data/blog/2023-01-13-edge-rate-limiting.mdx
index b619058c..28e94d73 100644
--- a/data/blog/2023-01-13-edge-rate-limiting.mdx
+++ b/data/blog/2023-01-13-edge-rate-limiting.mdx
@@ -103,7 +103,7 @@ Refresh the page, you should be redirected to the blocked page after 3 times.
 
 ### Less Remote Call with Caching
 
-It is not efficient to make a remote call with each request. A useful feature of the @uptash/ratelimit package is that it caches data as long as the edge function is "hot". This means that data is only fetched from Redis when the function is "cold", reducing the number of remote calls. Caching can be implemented by declaring the `ratelimit` object outside the handler `function middleware`.
+It is not efficient to make a remote call with each request. A useful feature of the @upstash/ratelimit package is that it caches data as long as the edge function is "hot". This means that data is only fetched from Redis when the function is "cold", reducing the number of remote calls. Caching can be implemented by declaring the `ratelimit` object outside the handler `function middleware`.
 
 ### Rate Limiting Algorithms
 
diff --git a/next-env.d.ts b/next-env.d.ts
index 725dd6f2..40c3d680 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 17348ea2..d35c9867 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -1,13 +1,16 @@
-import Bg from "@/components/bg";
-import Container from "@/components/container";
-import * as AboutIcon from "@/components/investor/icons";
-import Investors from "@/components/investor/investors";
-import PageBodyGradient from "@/components/page-body-gradient";
-import PageHeaderDesc from "@/components/page-header-desc";
-import PageHeaderTitle from "@/components/page-header-title";
 import { Metadata } from "next";
+
 import Balancer from "react-wrap-balancer";
 
+import { Investors, InvestorsIcons } from "@/components/investor";
+import {
+  Bg,
+  Container,
+  PageBodyGradient,
+  PageHeaderDesc,
+  PageHeaderTitle,
+} from "@/components";
+
 export const metadata: Metadata = {
   title: "About",
   description: "We manage everything for you.",
@@ -86,21 +89,21 @@ const MISSIONS = [
     title: "Fast",
     desc: "We understand that every millisecond matters to you.",
     icon: (
-      <AboutIcon.Fast className="text-[60px] text-emerald-400 md:text-[70px]" />
+      <InvestorsIcons.Fast className="text-[60px] text-emerald-400 md:text-[70px]" />
     ),
   },
   {
     title: "Simple",
     desc: "Keep the things as simple as possible but not simpler.",
     icon: (
-      <AboutIcon.Simple className="text-[60px] text-emerald-400 md:text-[70px]" />
+      <InvestorsIcons.Simple className="text-[60px] text-emerald-400 md:text-[70px]" />
     ),
   },
   {
     title: "Robust",
     desc: "We aim to earn your trust with robust solutions.",
     icon: (
-      <AboutIcon.Robust className="text-[60px] text-emerald-400 md:text-[70px]" />
+      <InvestorsIcons.Robust className="text-[60px] text-emerald-400 md:text-[70px]" />
     ),
   },
 ];
diff --git a/src/app/blog/[slug]/page.tsx b/src/app/blog/[slug]/page.tsx
index ee45dfc4..085fd747 100644
--- a/src/app/blog/[slug]/page.tsx
+++ b/src/app/blog/[slug]/page.tsx
@@ -1,15 +1,17 @@
-import Bg from "@/components/bg";
-import Container from "@/components/container";
-import PageBodyGradient from "@/components/page-body-gradient";
-import Clap from "@/components/post/claps";
-import PostHeader from "@/components/post/header";
-import { Mdx } from "@/components/post/mdx";
-import OtherPostCard from "@/components/post/other-post";
-import PostTags from "@/components/post/tags";
+import { notFound } from "next/navigation";
+
 // import { generateBlogSchema } from "@/utils/structured-schema-generators";
 import type { Post } from "@content";
 import { allPosts } from "@content";
-import { notFound } from "next/navigation";
+
+import {
+  Clap,
+  Mdx,
+  OtherPostCard,
+  PostHeader,
+  PostTags,
+} from "@/components/post";
+import { Bg, Container, PageBodyGradient } from "@/components";
 
 type Props = {
   params: {
diff --git a/src/app/blog/all/page.tsx b/src/app/blog/all/page.tsx
index 62934f33..b701c97c 100644
--- a/src/app/blog/all/page.tsx
+++ b/src/app/blog/all/page.tsx
@@ -1,9 +1,8 @@
-import Bg from "@/components/bg";
-import PostListCard from "@/components/blog/list-item";
-import Container from "@/components/container";
-import PageHeaderDesc from "@/components/page-header-desc";
-import PageHeaderTitle from "@/components/page-header-title";
 import type { Post } from "@content";
+
+import { PostListCard } from "@/components/blog";
+import { Bg, Container, PageHeaderDesc, PageHeaderTitle } from "@/components";
+
 import { getData } from "../utils/helpers";
 
 export default async function BlogPage() {
diff --git a/src/app/blog/author/[author]/page.tsx b/src/app/blog/author/[author]/page.tsx
index b11c221e..bb93c366 100644
--- a/src/app/blog/author/[author]/page.tsx
+++ b/src/app/blog/author/[author]/page.tsx
@@ -1,10 +1,11 @@
-import Bg from "@/components/bg";
-import PostGridCard from "@/components/blog/grid-item";
-import Container from "@/components/container";
-import PageHeaderTitle from "@/components/page-header-title";
+import Link from "next/link";
+
 import type { Post } from "@content";
 import { uniq } from "lodash";
-import Link from "next/link";
+
+import { PostGridCard } from "@/components/blog";
+import { Bg, Container, PageHeaderTitle } from "@/components";
+
 import { getData } from "../../utils/helpers";
 
 type Props = {
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index c26d8b07..e772560f 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -1,13 +1,12 @@
-import Bg from "@/components/bg";
-import PostGridCard from "@/components/blog/grid-item";
-import PopularTag from "@/components/blog/popular-tag";
-import Container from "@/components/container";
-import PageHeaderDesc from "@/components/page-header-desc";
-import PageHeaderTitle from "@/components/page-header-title";
+import Link from "next/link";
+
 import { BANNED_TAGS } from "@/utils/const";
 import type { Post } from "@content";
 import { countBy, flatten, omit } from "lodash";
-import Link from "next/link";
+
+import { PopularTag, PostGridCard } from "@/components/blog";
+import { Bg, Container, PageHeaderDesc, PageHeaderTitle } from "@/components";
+
 import { getData } from "./utils/helpers";
 
 export default async function BlogPage() {
diff --git a/src/app/blog/tag/[tag]/page.tsx b/src/app/blog/tag/[tag]/page.tsx
index 19673375..fc58c8db 100644
--- a/src/app/blog/tag/[tag]/page.tsx
+++ b/src/app/blog/tag/[tag]/page.tsx
@@ -1,10 +1,11 @@
-import Bg from "@/components/bg";
-import PostGridCard from "@/components/blog/grid-item";
-import Container from "@/components/container";
-import PageHeaderTitle from "@/components/page-header-title";
+import Link from "next/link";
+
 import type { Post } from "@content";
 import { uniq } from "lodash";
-import Link from "next/link";
+
+import { PostGridCard } from "@/components/blog";
+import { Bg, Container, PageHeaderTitle } from "@/components";
+
 import { getData } from "../../utils/helpers";
 
 type Props = {
diff --git a/src/app/brand/page.tsx b/src/app/brand/page.tsx
index 80f6e6d9..a5631413 100644
--- a/src/app/brand/page.tsx
+++ b/src/app/brand/page.tsx
@@ -1,10 +1,9 @@
-import Bg from "@/components/bg";
-import Container from "@/components/container";
-import CopyButton from "@/components/copy-button";
-import PageHeaderTitle from "@/components/page-header-title";
-import cx from "@/utils/cx";
-import { Metadata } from "next";
 import { HTMLAttributes } from "react";
+import { Metadata } from "next";
+
+import cx from "@/utils/cx";
+
+import {Bg, Container, CopyButton, PageHeaderTitle} from "@/components";
 
 export const metadata: Metadata = {
   title: "Brand Assets",
diff --git a/src/app/careers/[slug]/page.tsx b/src/app/careers/[slug]/page.tsx
index 669a0948..9ebd351b 100644
--- a/src/app/careers/[slug]/page.tsx
+++ b/src/app/careers/[slug]/page.tsx
@@ -1,12 +1,12 @@
-import Bg from "@/components/bg";
-import CareerHeader from "@/components/career/header";
-import Container from "@/components/container";
-import PageBodyGradient from "@/components/page-body-gradient";
-import { Mdx } from "@/components/post/mdx";
+import { notFound } from "next/navigation";
+
 import { SITE_URL } from "@/utils/const";
 import { allJobs } from "@content";
 import type { Job } from "@content";
-import { notFound } from "next/navigation";
+
+import CareerHeader from "@/components/career/header";
+import { Mdx } from "@/components/post";
+import { Bg, Container, PageBodyGradient } from "@/components";
 
 type Props = {
   params: {
diff --git a/src/app/careers/page.tsx b/src/app/careers/page.tsx
index 99a0046e..71bdf033 100644
--- a/src/app/careers/page.tsx
+++ b/src/app/careers/page.tsx
@@ -1,11 +1,10 @@
-import Bg from "@/components/bg";
-import Container from "@/components/container";
-import PageHeaderDesc from "@/components/page-header-desc";
-import PageHeaderTitle from "@/components/page-header-title";
-import { allJobs } from "@content";
 import { Metadata } from "next";
 import Link from "next/link";
 
+import { allJobs } from "@content";
+
+import {Bg, Container, PageHeaderDesc, PageHeaderTitle} from "@/components";
+
 const description =
   "Help us build the cutting edge data platform for the serverless era.";
 
diff --git a/src/app/customers/[slug]/page.tsx b/src/app/customers/[slug]/page.tsx
index 668e67f0..67975982 100644
--- a/src/app/customers/[slug]/page.tsx
+++ b/src/app/customers/[slug]/page.tsx
@@ -1,11 +1,13 @@
-import Container from "@/components/container";
-import { Mdx } from "@/components/post/mdx";
-import { allCustomers } from "@content";
-import type { Customer } from "@content";
 import Image from "next/image";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 
+import { allCustomers } from "@content";
+import type { Customer } from "@content";
+
+import { Mdx } from "@/components/post";
+import { Container } from "@/components";
+
 type Props = {
   params: {
     slug: string;
diff --git a/src/app/customers/page.tsx b/src/app/customers/page.tsx
index e53a4f9f..d79d9b09 100644
--- a/src/app/customers/page.tsx
+++ b/src/app/customers/page.tsx
@@ -1,14 +1,18 @@
 "use client";
 
-import Bg from "@/components/bg";
-import Button from "@/components/button";
-import Container from "@/components/container";
-import PageHeaderDesc from "@/components/page-header-desc";
-import PageHeaderTitle from "@/components/page-header-title";
-import { allCustomers } from "@content";
 import Image from "next/image";
 import Link from "next/link";
 
+import { allCustomers } from "@content";
+
+import {
+  Bg,
+  Button,
+  Container,
+  PageHeaderDesc,
+  PageHeaderTitle,
+} from "@/components";
+
 export default function CustomerPage() {
   let customers = allCustomers.filter((o) => !o.draft);
   customers = customers.sort((a, b) => (a.order || 99) - (b.order || 99));
diff --git a/src/app/examples/[slug]/page.tsx b/src/app/examples/[slug]/page.tsx
index deb6211e..c9782747 100644
--- a/src/app/examples/[slug]/page.tsx
+++ b/src/app/examples/[slug]/page.tsx
@@ -1,14 +1,14 @@
-import Button from "@/components/button";
-import Container from "@/components/container";
-import { ICON_NAMES } from "@/components/icon";
-import IconQStash from "@/components/icon-qstash";
-import IconRedis from "@/components/icon-redis";
-import { authors } from "@/utils/authors";
-import markdownToHtml from "@/utils/markdownToHtml";
+import { HTMLProps } from "react";
 import Link from "next/link";
 import { notFound } from "next/navigation";
-import { HTMLProps } from "react";
+
+import { authors } from "@/utils/authors";
+import markdownToHtml from "@/utils/markdownToHtml";
 import Balancer from "react-wrap-balancer";
+
+import { ICON_NAMES } from "@/components/icon";
+import { Button, Container, IconQStash, IconRedis } from "@/components";
+
 import { getData, type Example } from "../get-data";
 
 type Props = {
diff --git a/src/app/examples/page.tsx b/src/app/examples/page.tsx
index bfded3bc..f568b073 100644
--- a/src/app/examples/page.tsx
+++ b/src/app/examples/page.tsx
@@ -1,9 +1,8 @@
-import Bg from "@/components/bg";
-import Container from "@/components/container";
-import { Client } from "@/components/example/client";
-import PageHeaderDesc from "@/components/page-header-desc";
-import PageHeaderTitle from "@/components/page-header-title";
 import React from "react";
+
+import { Client } from "@/components/example/client";
+import { Bg, Container, PageHeaderDesc, PageHeaderTitle } from "@/components";
+
 import { getData, type Example } from "./get-data";
 
 // TODO: set canonical url
diff --git a/src/app/fast/page.tsx b/src/app/fast/page.tsx
index a5299334..1403271d 100644
--- a/src/app/fast/page.tsx
+++ b/src/app/fast/page.tsx
@@ -1,10 +1,12 @@
-import Container from "@/components/container";
-import FastResult from "@/components/fast/result";
-import cx from "@/utils/cx";
 import { Metadata } from "next";
 import dynamic from "next/dynamic";
 import Link from "next/link";
 
+import cx from "@/utils/cx";
+
+import {Container} from "@/components";
+import FastResult from "@/components/fast/result";
+
 const Globe = dynamic(() => import("@/components/home/fast/globe2"), {
   ssr: false,
 });
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3dabac01..cbda2f8c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,17 +1,18 @@
 import "@upstash/claps/style.css";
 import "./globals.css";
-import Analytics from "@/components/Analytics";
-import Footer from "@/components/master/footer";
-import Header from "@/components/master/header";
-import HeaderMobile from "@/components/master/header-mobile";
-import { PHProvider } from "@/lib/posthog";
-import { SegmentProvider } from "@/lib/segment/provider";
-import { SITE_URL } from "@/utils/const";
-import cx from "@/utils/cx";
+
+import { ReactNode, Suspense } from "react";
 import dynamic from "next/dynamic";
 import { Inter, Inter_Tight } from "next/font/google";
-import Script from "next/script";
-import { ReactNode, Suspense } from "react";
+
+import { SITE_URL } from "@/utils/const";
+import cx from "@/utils/cx";
+
+import { PHProvider } from "@/lib/posthog";
+import { SegmentProvider } from "@/lib/segment/provider";
+
+import { Footer, Header, HeaderMobile } from "@/components/master";
+import { Analytics, ThirdPartyScripts } from "@/components";
 
 const PostHogPageView = dynamic(() => import("@/lib/posthog/page-view"), {
   ssr: false,
@@ -51,43 +52,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
             {children}
             <Footer />
           </SegmentProvider>
-
-          {process.env.NODE_ENV !== "development" && (
-            <>
-              <Script
-                id="ph_referral_track"
-                strategy="beforeInteractive"
-                dangerouslySetInnerHTML={{
-                  __html: `
-                    function removeTrailingSlash(url) {
-                        return url.endsWith('/') ? url.slice(0, -1) : url;
-                    }
-
-                    (function() {
-                      var referrer = document.referrer;
-                      if (!referrer.includes('upstash.com')) {
-                        document.cookie = 'ph_referral_track=' + removeTrailingSlash(referrer) + '; domain=.upstash.com';
-                      }
-                    })();
-                  `,
-                }}
-              />
-              <Script
-                strategy="afterInteractive"
-                src={`https://www.googletagmanager.com/gtag/js?id=G-QW5KRSTDM0`}
-              />
-              <Script
-                id="ga"
-                strategy="afterInteractive"
-                dangerouslySetInnerHTML={{
-                  __html: ` window.dataLayer = window.dataLayer || [];
-                            function gtag(){ dataLayer.push(arguments); }
-                            gtag('js', new Date());
-                            gtag('config', 'G-QW5KRSTDM0');`,
-                }}
-              />
-            </>
-          )}
+          <ThirdPartyScripts />
         </body>
       </PHProvider>
     </html>
diff --git a/src/app/pricing/layout.tsx b/src/app/pricing/layout.tsx
index 703b9daa..cd0d52e3 100644
--- a/src/app/pricing/layout.tsx
+++ b/src/app/pricing/layout.tsx
@@ -1,10 +1,9 @@
 import "./page.css";
-import Bg from "@/components/bg";
-import Container from "@/components/container";
-import PageHeaderDesc from "@/components/page-header-desc";
-import PageHeaderTitle from "@/components/page-header-title";
-import { Metadata } from "next";
+
 import { ReactNode } from "react";
+import { Metadata } from "next";
+
+import { Bg, Container, PageHeaderDesc, PageHeaderTitle } from "@/components";
 
 export const metadata: Metadata = {
   title: "Pricing",
diff --git a/src/app/pricing/qstash/page.tsx b/src/app/pricing/qstash/page.tsx
index 8f3cc1cf..3adc460c 100644
--- a/src/app/pricing/qstash/page.tsx
+++ b/src/app/pricing/qstash/page.tsx
@@ -1,16 +1,17 @@
 "use client";
 
 import QStashFaqJson from "@/../public/faq/qstash.json";
-import Container from "@/components/container";
-import PageHeaderDesc from "@/components/page-header-desc";
-import PageHeaderTitle from "@/components/page-header-title";
-import Enterprise from "@/components/pricing/qstash/enterprise";
-import ProductToggle from "@/components/pricing/product-toggle";
-import CompareTable from "@/components/pricing/qstash/compare-table";
-import FAQ from "@/components/pricing/qstash/faq";
-import PricingTable from "@/components/pricing/qstash/pricing-table";
 import { generateFaqSchema } from "@/utils/structured-schema-generators";
 
+import {
+  CompareTable,
+  Enterprise,
+  FAQ,
+  PricingTable,
+  ProductToggle,
+} from "@/components/pricing";
+import { Container, PageHeaderDesc, PageHeaderTitle } from "@/components";
+
 export default function PricingQStashPage() {
   const structuredFaqSchema = generateFaqSchema(QStashFaqJson);
 
diff --git a/src/app/pricing/redis/page.tsx b/src/app/pricing/redis/page.tsx
index 8e594131..ae7c5125 100644
--- a/src/app/pricing/redis/page.tsx
+++ b/src/app/pricing/redis/page.tsx
@@ -1,16 +1,17 @@
 "use client";
 
 import RedisFaqJson from "@/../public/faq/redis.json";
-import Container from "@/components/container";
-import PageHeaderDesc from "@/components/page-header-desc";
-import PageHeaderTitle from "@/components/page-header-title";
-import Enterprise from "@/components/pricing/enterprise";
-import ProductToggle from "@/components/pricing/product-toggle";
-import CompareTable from "@/components/pricing/redis/compare-table";
-import FAQ from "@/components/pricing/redis/faq";
-import PricingTable from "@/components/pricing/redis/pricing-table";
 import { generateFaqSchema } from "@/utils/structured-schema-generators";
 
+import {
+  CompareTable,
+  Enterprise,
+  FAQ,
+  PricingTable,
+  ProductToggle,
+} from "@/components/pricing";
+import { Container, PageHeaderDesc, PageHeaderTitle } from "@/components";
+
 export default function PricingRedisPage() {
   const structuredFaqSchema = generateFaqSchema(RedisFaqJson);
 
diff --git a/src/app/pricing/vector/page.tsx b/src/app/pricing/vector/page.tsx
index 5d598aa9..00e886f0 100644
--- a/src/app/pricing/vector/page.tsx
+++ b/src/app/pricing/vector/page.tsx
@@ -1,16 +1,17 @@
 "use client";
 
 import VectorFaqJson from "@/../public/faq/vector.json";
-import Container from "@/components/container";
-import PageHeaderDesc from "@/components/page-header-desc";
-import PageHeaderTitle from "@/components/page-header-title";
-import ProductToggle from "@/components/pricing/product-toggle";
-import CompareTable from "@/components/pricing/vector/compare-table";
-import Enterprise from "@/components/pricing/vector/enterprise";
-import FAQ from "@/components/pricing/vector/faq";
-import PricingTable from "@/components/pricing/vector/pricing-table";
 import { generateFaqSchema } from "@/utils/structured-schema-generators";
 
+import {
+  CompareTable,
+  Enterprise,
+  FAQ,
+  PricingTable,
+  ProductToggle,
+} from "@/components/pricing";
+import { Container, PageHeaderDesc, PageHeaderTitle } from "@/components";
+
 export default function PricingVectorPage() {
   const structuredFaqSchema = generateFaqSchema(VectorFaqJson);
 
diff --git a/src/components/blog/index.ts b/src/components/blog/index.ts
new file mode 100644
index 00000000..a4bd918b
--- /dev/null
+++ b/src/components/blog/index.ts
@@ -0,0 +1,3 @@
+export { default as PostGridCard } from "./grid-item";
+export { default as PopularTag } from "./popular-tag";
+export { default as PostListCard } from "./list-item";
diff --git a/src/components/career/header.tsx b/src/components/career/header.tsx
index 94fdee09..8c254e45 100644
--- a/src/components/career/header.tsx
+++ b/src/components/career/header.tsx
@@ -1,8 +1,8 @@
-import Button from "@/components/button";
-import Container from "@/components/container";
 import type { Job } from "@content";
 import Balancer from "react-wrap-balancer";
 
+import { Button, Container } from "@/components";
+
 type Props = {
   job: Job;
 };
diff --git a/src/components/example/client.tsx b/src/components/example/client.tsx
index 4c183946..23440845 100644
--- a/src/components/example/client.tsx
+++ b/src/components/example/client.tsx
@@ -1,9 +1,11 @@
 "use client";
 
+import React, { useState } from "react";
+
 import type { Example } from "@/app/examples/get-data";
-import Button from "@/components/button";
 import { authors } from "@/utils/authors";
-import React, { useState } from "react";
+
+import { Button } from "@/components";
 import { Example as Box } from "./comp";
 import ExampleFilter from "./filter";
 
diff --git a/src/components/example/comp.tsx b/src/components/example/comp.tsx
index 9cfe2c82..295e37f4 100644
--- a/src/components/example/comp.tsx
+++ b/src/components/example/comp.tsx
@@ -1,12 +1,13 @@
 "use client";
 
-import IconQStash from "@/components/icon-qstash";
-import IconRedis from "@/components/icon-redis";
-import cx from "@/utils/cx";
-import Image from "next/image";
 import { Dispatch, HTMLProps, SetStateAction } from "react";
+import Image from "next/image";
+
+import cx from "@/utils/cx";
 import Balancer from "react-wrap-balancer";
 
+import { IconQStash, IconRedis } from "@/components";
+
 export function Example({
   className,
   children,
diff --git a/src/components/example/filter.tsx b/src/components/example/filter.tsx
index 57f456b8..e313fee3 100644
--- a/src/components/example/filter.tsx
+++ b/src/components/example/filter.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import Icon, { ICON_NAMES } from "@/components/icon";
-import IconQStash from "@/components/icon-qstash";
-import IconRedis from "@/components/icon-redis";
-import cx from "@/utils/cx";
 import * as React from "react";
-import { HTMLProps } from "react";
+
+import cx from "@/utils/cx";
+
+import Icon, { ICON_NAMES } from "@/components/icon";
+import { IconQStash, IconRedis } from "@/components";
 
 export const ProductsLabel = {
   redis: "Redis",
@@ -420,7 +420,11 @@ function FormContent({
   );
 }
 
-function Child({ className, children, ...props }: HTMLProps<HTMLDivElement>) {
+function Child({
+  className,
+  children,
+  ...props
+}: React.HTMLProps<HTMLDivElement>) {
   return (
     <div className={cx("border-b border-b-white/5 pb-4", className)} {...props}>
       {children}
@@ -428,7 +432,11 @@ function Child({ className, children, ...props }: HTMLProps<HTMLDivElement>) {
   );
 }
 
-function Toc({ className, children, ...props }: HTMLProps<HTMLDetailsElement>) {
+function Toc({
+  className,
+  children,
+  ...props
+}: React.HTMLProps<HTMLDetailsElement>) {
   return (
     <details
       open={true}
@@ -447,7 +455,7 @@ Toc.Summary = function TocSummary({
   className,
   children,
   ...props
-}: HTMLProps<HTMLDetailsElement> & { count?: number }) {
+}: React.HTMLProps<HTMLDetailsElement> & { count?: number }) {
   return (
     <summary
       className={cx(
@@ -474,7 +482,7 @@ function Item({
   className,
   checked,
   onChange = () => {},
-}: HTMLProps<HTMLLabelElement> & {
+}: React.HTMLProps<HTMLLabelElement> & {
   icon?: React.ReactNode;
   value: string;
   label: string;
diff --git a/src/components/home/community/comp.tsx b/src/components/home/community/comp.tsx
index 8764621b..ab1fede1 100644
--- a/src/components/home/community/comp.tsx
+++ b/src/components/home/community/comp.tsx
@@ -1,7 +1,9 @@
-import Button from "@/components/button";
-import cx from "@/utils/cx";
 import { HTMLProps } from "react";
 
+import cx from "@/utils/cx";
+
+import {Button} from "@/components";
+
 export function CommunityBox({
   children,
   className,
diff --git a/src/components/home/community/index.tsx b/src/components/home/community/index.tsx
index 839e49dd..3fd0fb8d 100644
--- a/src/components/home/community/index.tsx
+++ b/src/components/home/community/index.tsx
@@ -1,13 +1,14 @@
-import Bg from "@/components/bg";
-import Container from "@/components/container";
+import React from "react";
+
+import { HOME_SECTIONS } from "@/utils/const";
+
 import {
   SectionHeader,
   SectionHeaderSummary,
   SectionHeaderTitle,
 } from "@/components/home/section-header";
 import Icon, { ICON_NAMES } from "@/components/icon";
-import { HOME_SECTIONS } from "@/utils/const";
-import React from "react";
+import { Bg, Container } from "@/components";
 import {
   CommunityBox,
   CommunityBoxButton,
diff --git a/src/components/home/fast/index.tsx b/src/components/home/fast/index.tsx
index 9d56f1f7..e7baefaf 100644
--- a/src/components/home/fast/index.tsx
+++ b/src/components/home/fast/index.tsx
@@ -1,10 +1,11 @@
 "use client";
 
-import Bg from "@/components/bg";
-import Statistic from "@/components/home/fast/statistic";
 import { HOME_SECTIONS } from "@/utils/const";
 import cx from "@/utils/cx";
 
+import Statistic from "@/components/home/fast/statistic";
+import { Bg } from "@/components";
+
 export default function Fast() {
   return (
     <section
diff --git a/src/components/home/fast/statistic.tsx b/src/components/home/fast/statistic.tsx
index 4fb0de56..f6be923d 100644
--- a/src/components/home/fast/statistic.tsx
+++ b/src/components/home/fast/statistic.tsx
@@ -1,12 +1,14 @@
-import Container from "@/components/container";
+import Link from "next/link";
+
+import cx from "@/utils/cx";
+
 import {
   FastCard,
   FastCardTitle,
   FastCardValue,
 } from "@/components/home/fast/card";
 import Icon, { ICON_NAMES } from "@/components/icon";
-import cx from "@/utils/cx";
-import Link from "next/link";
+import { Container } from "@/components";
 
 export default function FastStatistic() {
   return (
diff --git a/src/components/home/investor/index.tsx b/src/components/home/investor/index.tsx
index 5ab981e0..496bd036 100644
--- a/src/components/home/investor/index.tsx
+++ b/src/components/home/investor/index.tsx
@@ -1,13 +1,14 @@
-import Bg from "@/components/bg";
-import Container from "@/components/container";
+import Link from "next/link";
+
+import { HOME_SECTIONS } from "@/utils/const";
+
 import {
   SectionHeader,
   SectionHeaderSummary,
   SectionHeaderTitle,
 } from "@/components/home/section-header";
-import Investors from "@/components/investor/investors";
-import { HOME_SECTIONS } from "@/utils/const";
-import Link from "next/link";
+import { Investors } from "@/components/investor";
+import { Bg, Container } from "@/components";
 
 export default function HomeInvestors() {
   return (
diff --git a/src/components/home/open-source/index.tsx b/src/components/home/open-source/index.tsx
index 3cccdd10..93f2b005 100644
--- a/src/components/home/open-source/index.tsx
+++ b/src/components/home/open-source/index.tsx
@@ -1,5 +1,8 @@
-import Bg from "@/components/bg";
-import Container from "@/components/container";
+import { HTMLProps } from "react";
+
+import { HOME_SECTIONS } from "@/utils/const";
+import cx from "@/utils/cx";
+
 import {
   SourceBox,
   SourceDesc,
@@ -11,9 +14,7 @@ import {
   SectionHeaderSummary,
   SectionHeaderTitle,
 } from "@/components/home/section-header";
-import { HOME_SECTIONS } from "@/utils/const";
-import cx from "@/utils/cx";
-import { HTMLProps } from "react";
+import { Bg, Container } from "@/components";
 
 export interface ISectionHeader extends HTMLProps<HTMLDivElement> {}
 
diff --git a/src/components/home/price/index.tsx b/src/components/home/price/index.tsx
index dc57519c..076ab3b2 100644
--- a/src/components/home/price/index.tsx
+++ b/src/components/home/price/index.tsx
@@ -1,5 +1,5 @@
-import Bg from "@/components/bg";
-import Container from "@/components/container";
+import { HOME_SECTIONS } from "@/utils/const";
+
 import PriceQStash from "@/components/home/price/qstash";
 import PriceRedis from "@/components/home/price/redis";
 import {
@@ -8,7 +8,7 @@ import {
   SectionHeaderTitle,
 } from "@/components/home/section-header";
 import Icon, { ICON_NAMES } from "@/components/icon";
-import { HOME_SECTIONS } from "@/utils/const";
+import { Bg, Container } from "@/components";
 
 export default function HomeServerless() {
   return (
diff --git a/src/components/home/price/qstash.tsx b/src/components/home/price/qstash.tsx
index 73e0533d..0e98fa23 100644
--- a/src/components/home/price/qstash.tsx
+++ b/src/components/home/price/qstash.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { useSegment } from "@/hooks/use-segment";
+
 import {
   PriceBadge,
   PriceBox,
@@ -9,8 +11,7 @@ import {
   PriceTitle,
   PriceValue,
 } from "@/components/home/price/comp";
-import IconQStash from "@/components/icon-qstash";
-import { useSegment } from "@/hooks/use-segment";
+import { IconQStash } from "@/components";
 
 export default function PriceQStash() {
   const segment = useSegment();
diff --git a/src/components/home/price/redis.tsx b/src/components/home/price/redis.tsx
index c33975b0..a1fc5454 100644
--- a/src/components/home/price/redis.tsx
+++ b/src/components/home/price/redis.tsx
@@ -1,8 +1,10 @@
 "use client";
 
-import IconRedis from "@/components/icon-redis";
-import { useSegment } from "@/hooks/use-segment";
 import React from "react";
+
+import { useSegment } from "@/hooks/use-segment";
+
+import { IconRedis } from "@/components";
 import {
   PriceBadge,
   PriceBox,
diff --git a/src/components/home/product/index.tsx b/src/components/home/product/index.tsx
index 73fe3e26..f7e3f272 100644
--- a/src/components/home/product/index.tsx
+++ b/src/components/home/product/index.tsx
@@ -1,12 +1,14 @@
-import Bg from "@/components/bg";
-import Container from "@/components/container";
+import { HTMLProps } from "react";
+
+import { HOME_SECTIONS } from "@/utils/const";
+
 import {
   SectionHeader,
   SectionHeaderSummary,
   SectionHeaderTitle,
 } from "@/components/home/section-header";
-import { HOME_SECTIONS } from "@/utils/const";
-import { HTMLProps } from "react";
+import { Bg, Container } from "@/components";
+
 import QStash from "./qstash";
 import Redis from "./redis";
 import Vector from "./vector";
diff --git a/src/components/home/product/qstash.tsx b/src/components/home/product/qstash.tsx
index f6f9819d..078fad83 100644
--- a/src/components/home/product/qstash.tsx
+++ b/src/components/home/product/qstash.tsx
@@ -1,10 +1,12 @@
 "use client";
 
-import Button from "@/components/button";
-import IconQStash from "@/components/icon-qstash";
-import { useSegment } from "@/hooks/use-segment";
-import { Product } from "@/utils/type";
 import React from "react";
+
+import { Product } from "@/utils/type";
+
+import { useSegment } from "@/hooks/use-segment";
+
+import { Button, IconQStash } from "@/components";
 import {
   ProductBox,
   ProductFeature,
diff --git a/src/components/home/product/redis.tsx b/src/components/home/product/redis.tsx
index 8264a2ea..c9db2659 100644
--- a/src/components/home/product/redis.tsx
+++ b/src/components/home/product/redis.tsx
@@ -1,10 +1,13 @@
 "use client";
 
-import Button from "@/components/button";
-import IconRedis from "@/components/icon-redis";
-import { useSegment } from "@/hooks/use-segment";
-import { Product } from "@/utils/type";
 import React from "react";
+
+import { Product } from "@/utils/type";
+
+import { useSegment } from "@/hooks/use-segment";
+
+import { Button, IconRedis } from "@/components";
+
 import {
   ProductBox,
   ProductFeature,
diff --git a/src/components/home/product/vector.tsx b/src/components/home/product/vector.tsx
index 464c6662..c288d704 100644
--- a/src/components/home/product/vector.tsx
+++ b/src/components/home/product/vector.tsx
@@ -1,10 +1,13 @@
 "use client";
 
-import Button from "@/components/button";
-import IconVector from "@/components/icon-vector";
-import { useSegment } from "@/hooks/use-segment";
-import { Product } from "@/utils/type";
 import React from "react";
+
+import { Product } from "@/utils/type";
+
+import { useSegment } from "@/hooks/use-segment";
+
+import { Button, IconVector } from "@/components";
+
 import {
   ProductBox,
   ProductFeature,
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 00000000..f2ecee56
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,12 @@
+export { default as Container } from "./container";
+export { default as PageHeaderDesc } from "./page-header-desc";
+export { default as PageHeaderTitle } from "./page-header-title";
+export { default as Analytics } from "./Analytics";
+export { default as ThirdPartyScripts } from "./scripts";
+export { default as Bg } from "./bg";
+export { default as Button } from "./button";
+export { default as IconQStash } from "./icon-qstash";
+export { default as IconRedis } from "./icon-redis";
+export { default as IconVector } from "./icon-vector";
+export { default as PageBodyGradient } from "./page-body-gradient";
+export { default as CopyButton } from "./copy-button";
diff --git a/src/components/investor/index.ts b/src/components/investor/index.ts
new file mode 100644
index 00000000..bd3d2162
--- /dev/null
+++ b/src/components/investor/index.ts
@@ -0,0 +1,2 @@
+export { default as Investors } from "./investors";
+export * as InvestorsIcons from "./icons";
diff --git a/src/components/master/index.ts b/src/components/master/index.ts
new file mode 100644
index 00000000..49541592
--- /dev/null
+++ b/src/components/master/index.ts
@@ -0,0 +1,3 @@
+export {default as Footer} from './footer'
+export {default as Header} from './header'
+export {default as HeaderMobile} from './header-mobile'
\ No newline at end of file
diff --git a/src/components/post/index.ts b/src/components/post/index.ts
new file mode 100644
index 00000000..5b8b8eff
--- /dev/null
+++ b/src/components/post/index.ts
@@ -0,0 +1,5 @@
+export { Mdx } from "./mdx";
+export { default as Clap } from "./claps";
+export { default as PostHeader } from "./header";
+export { default as OtherPostCard } from "./other-post";
+export { default as PostTags } from "./tags";
diff --git a/src/components/pricing/index.ts b/src/components/pricing/index.ts
new file mode 100644
index 00000000..7eb66007
--- /dev/null
+++ b/src/components/pricing/index.ts
@@ -0,0 +1,5 @@
+export { default as ProductToggle } from "./product-toggle";
+export { default as CompareTable } from "./vector/compare-table";
+export { default as Enterprise } from "./vector/enterprise";
+export { default as FAQ } from "./vector/faq";
+export { default as PricingTable } from "./vector/pricing-table";
\ No newline at end of file
diff --git a/src/components/scripts.tsx b/src/components/scripts.tsx
new file mode 100644
index 00000000..e74fed46
--- /dev/null
+++ b/src/components/scripts.tsx
@@ -0,0 +1,46 @@
+import Script from "next/script";
+
+const ThirdPartyScripts = () => {
+  if (process.env.NODE_ENV == "development") {
+    return null;
+  }
+
+  return (
+    <>
+      <Script
+        id="ph_referral_track"
+        strategy="beforeInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `
+              function removeTrailingSlash(url) {
+                  return url.endsWith('/') ? url.slice(0, -1) : url;
+              }
+
+              (function() {
+                var referrer = document.referrer;
+                if (!referrer.includes('upstash.com')) {
+                  document.cookie = 'ph_referral_track=' + removeTrailingSlash(referrer) + '; domain=.upstash.com';
+                }
+              })();
+            `,
+        }}
+      />
+      <Script
+        strategy="afterInteractive"
+        src={`https://www.googletagmanager.com/gtag/js?id=G-QW5KRSTDM0`}
+      />
+      <Script
+        id="ga"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: ` window.dataLayer = window.dataLayer || [];
+                      function gtag(){ dataLayer.push(arguments); }
+                      gtag('js', new Date());
+                      gtag('config', 'G-QW5KRSTDM0');`,
+        }}
+      />
+    </>
+  );
+};
+
+export default ThirdPartyScripts;
diff --git a/src/lib/segment/provider.tsx b/src/lib/segment/provider.tsx
index 7f4de4e9..9a6bb347 100644
--- a/src/lib/segment/provider.tsx
+++ b/src/lib/segment/provider.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import React, { PropsWithChildren, useEffect, useMemo } from "react";
+import React, { PropsWithChildren, useMemo } from "react";
+
 import { Segment } from "./segment";
 
 export const SegmentContext = React.createContext<Segment | null>(null);
diff --git a/src/pages/api/claps.ts b/src/pages/api/claps.ts
deleted file mode 100644
index e7fa8703..00000000
--- a/src/pages/api/claps.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import createClapsAPI from "@upstash/claps/api";
-
-const ClapsAPI = createClapsAPI({
-  maxClaps: 10,
-});
-
-export default ClapsAPI;