diff --git a/.env.example b/.env.example
index bf99869..5c16aff 100644
--- a/.env.example
+++ b/.env.example
@@ -6,5 +6,3 @@ NEXT_PUBLIC_GOOGLE_VERIFICATION =
 
 # POSTHOG SETTINGS
 NEXT_PUBLIC_POSTHOG_KEY =
-NEXT_PUBLIC_POSTHOG_HOST =
-NEXT_PUBLIC_POSTHOG_UI_HOST =
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 046e4ee..0181534 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,10 +3,12 @@
 ## [v2.0.0](https://github.com/brook-code-theme/official-website/releases/tag/v2.0.0) - 2024-11-29 13:37:07
 
 ## What's Changed
-* Add multiple pages by @nyomansunima in https://github.com/brook-code-theme/official-website/pull/5
+
+- Add multiple pages by @nyomansunima in https://github.com/brook-code-theme/official-website/pull/5
 
 ## New Contributors
-* @nyomansunima made their first contribution in https://github.com/brook-code-theme/official-website/pull/5
+
+- @nyomansunima made their first contribution in https://github.com/brook-code-theme/official-website/pull/5
 
 **Full Changelog**: https://github.com/brook-code-theme/official-website/compare/v1.0.0...v2.0.0
 
@@ -14,4 +16,4 @@
 
 **Full Changelog**: https://github.com/brook-code-theme/official-website/commits/v1.0.0
 
-\* *This CHANGELOG was automatically generated by [auto-generate-changelog](https://github.com/BobAnkh/auto-generate-changelog)*
+\* _This CHANGELOG was automatically generated by [auto-generate-changelog](https://github.com/BobAnkh/auto-generate-changelog)_
diff --git a/bun.lockb b/bun.lockb
index 68fc608..f78a8c5 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 4185202..f3bd02b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,5 @@
 {
   "name": "website",
-  "version": "0.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev --turbo",
@@ -14,27 +13,18 @@
   },
   "dependencies": {
     "@flaticon/flaticon-uicons": "^3.3.1",
-    "@hookform/resolvers": "^3.9.1",
     "@radix-ui/react-accordion": "^1.2.1",
-    "@radix-ui/react-alert-dialog": "^1.1.2",
-    "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.2",
     "@radix-ui/react-tooltip": "^1.1.4",
-    "@tanstack/react-query": "^5.61.3",
-    "@tanstack/react-query-devtools": "^5.61.3",
-    "date-fns": "^4.1.0",
-    "framer-motion": "^11.11.17",
+    "dayjs": "^1.11.13",
     "lenis": "^1.1.16",
+    "motion": "^11.13.3",
     "next": "15.0.4",
     "next-themes": "^0.4.3",
-    "npm": "^10.9.1",
-    "plaiceholder": "^3.0.0",
     "posthog-js": "^1.188.0",
-    "react": "19.0.0-rc-66855b96-20241106",
-    "react-dom": "19.0.0",
-    "react-hook-form": "^7.53.2",
-    "zod": "^3.23.8"
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.9",
diff --git a/src/app/(landing)/page.tsx b/src/app/(landing)/page.tsx
index 90ad880..c2cdcb0 100644
--- a/src/app/(landing)/page.tsx
+++ b/src/app/(landing)/page.tsx
@@ -8,7 +8,7 @@ import {
   PricingSection,
   TestimonialSection,
 } from '@features/landing'
-import * as defaultMetadata from '@shared/libs/shared-metadata'
+import { sharedMetadata } from '@shared/libs'
 import { Metadata } from 'next'
 import * as React from 'react'
 
@@ -17,13 +17,13 @@ export const metadata: Metadata = {
   description:
     'The best clean code editor theme that combine simplicity and clean look',
   openGraph: {
-    ...defaultMetadata.openGraph,
+    ...sharedMetadata.openGraph,
     title: 'Brook Code Theme',
     description:
       'The best clean code editor theme that combine simplicity and clean look',
   },
   twitter: {
-    ...defaultMetadata.twitter,
+    ...sharedMetadata.twitter,
     title: 'Brook Code Theme',
     description:
       'The best clean code editor theme that combine simplicity and clean look',
diff --git a/src/app/changelog/page.tsx b/src/app/changelog/page.tsx
index 28e5ad0..ea756b4 100644
--- a/src/app/changelog/page.tsx
+++ b/src/app/changelog/page.tsx
@@ -1,5 +1,5 @@
 import { ChangelogSection } from '@features/changelog'
-import * as defaultMetadata from '@shared/libs/shared-metadata'
+import { sharedMetadata } from '@shared/libs'
 import { Metadata } from 'next'
 import * as React from 'react'
 
@@ -8,13 +8,13 @@ export const metadata: Metadata = {
   description:
     "See what's new in the progress, we always ship and fix in a weeks",
   openGraph: {
-    ...defaultMetadata.openGraph,
+    ...sharedMetadata.openGraph,
     title: "What's new",
     description:
       "See what's new in the progress, we always ship and fix in a weeks",
   },
   twitter: {
-    ...defaultMetadata.twitter,
+    ...sharedMetadata.twitter,
     title: "What's new",
     description:
       "See what's new in the progress, we always ship and fix in a weeks",
diff --git a/src/app/docs/page.tsx b/src/app/docs/page.tsx
index 6ed8b50..e16c521 100644
--- a/src/app/docs/page.tsx
+++ b/src/app/docs/page.tsx
@@ -1,4 +1,4 @@
-import * as defaultMetadata from '@shared/libs/shared-metadata'
+import { sharedMetadata } from '@shared/libs'
 import { Metadata } from 'next'
 import * as React from 'react'
 
@@ -7,13 +7,13 @@ export const metadata: Metadata = {
   description:
     'Read the docs to find the tips and tricks to get started with brook code theme',
   openGraph: {
-    ...defaultMetadata.openGraph,
+    ...sharedMetadata.openGraph,
     title: 'Docs',
     description:
       'Read the docs to find the tips and tricks to get started with brook code theme',
   },
   twitter: {
-    ...defaultMetadata.twitter,
+    ...sharedMetadata.twitter,
     title: 'Docs',
     description:
       'Read the docs to find the tips and tricks to get started with brook code theme',
diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
index bb8447d..43f939b 100644
--- a/src/app/global-error.tsx
+++ b/src/app/global-error.tsx
@@ -1,9 +1,10 @@
 'use client'
+
 import * as React from 'react'
 import '@shared/styles/globals.css'
-import { Button } from '@shared/components/ui/button'
-import { ThemeProvider } from '@shared/providers/theme-provider'
-import * as fonts from '@shared/fonts'
+import { Button } from '@shared/components'
+import { ThemeProvider } from '@shared/providers'
+import { fonts } from '@shared/fonts'
 
 export default function GlobalError({
   reset,
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 389131e..3160ada 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,16 +1,14 @@
 import * as React from 'react'
 import type { Metadata } from 'next'
 import '@shared/styles/globals.css'
-import * as fonts from '@shared/fonts'
-import config from '@shared/libs/config'
-import * as defaultMetadata from '@shared/libs/shared-metadata'
-import { ThemeProvider } from '@shared/providers/theme-provider'
-import { QueryProvider } from '@shared/providers/query-provider'
-import { Sonner } from '@shared/components/ui/sonner'
-import { PosthogProvider } from '@shared/providers/posthog-provider'
-import { Header } from '@shared/components/common/header'
-import { Footer } from '@shared/components/common/footer'
-import { AnimationProvider } from '@shared/providers/animation-provider'
+import { fonts } from '@shared/fonts'
+import { config, sharedMetadata } from '@shared/libs'
+import {
+  PosthogProvider,
+  AnimationProvider,
+  ThemeProvider,
+} from '@shared/providers'
+import { Header, Sonner, Footer } from '@shared/components'
 
 interface RootLayoutProps {
   children: React.ReactNode
@@ -39,13 +37,13 @@ export const metadata: Metadata = {
   publisher: 'Nyoman Sunima',
   creator: 'Nyoman Sunima',
   openGraph: {
-    ...defaultMetadata.openGraph,
+    ...sharedMetadata.openGraph,
     title: 'Brook Code Theme',
     description:
       'The best clean code editor theme that combine simplicity and clean look',
   },
   twitter: {
-    ...defaultMetadata.twitter,
+    ...sharedMetadata.twitter,
     title: 'Brook Code Theme',
     description:
       'The best clean code editor theme that combine simplicity and clean look',
@@ -73,14 +71,10 @@ export default function RootLayout({
               defaultTheme="system"
               disableTransitionOnChange
             >
-              <QueryProvider>
-                <>
-                  <Header />
-                  {children}
-                  <Footer />
-                  <Sonner />
-                </>
-              </QueryProvider>
+              <Header />
+              {children}
+              <Footer />
+              <Sonner />
             </ThemeProvider>
           </body>
         </AnimationProvider>
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 89f5c10..0444582 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@shared/components/ui/button'
+import { Button } from '@shared/components'
 import { Metadata } from 'next'
 import Link from 'next/link'
 import * as React from 'react'
diff --git a/src/app/privacy/page.tsx b/src/app/privacy/page.tsx
index 84e0cff..9019cab 100644
--- a/src/app/privacy/page.tsx
+++ b/src/app/privacy/page.tsx
@@ -1,5 +1,5 @@
-import { ArticleContent } from '@shared/components/common/content'
-import * as defaultMetadata from '@shared/libs/shared-metadata'
+import { ArticleContent } from '@shared/components'
+import { sharedMetadata } from '@shared/libs'
 import { Metadata } from 'next'
 import Link from 'next/link'
 import * as React from 'react'
@@ -8,12 +8,12 @@ export const metadata: Metadata = {
   title: 'Privacy policy',
   description: 'Read the privacy and policy',
   openGraph: {
-    ...defaultMetadata.openGraph,
+    ...sharedMetadata.openGraph,
     title: 'Privacy policy',
     description: 'Read the privacy and policy',
   },
   twitter: {
-    ...defaultMetadata.twitter,
+    ...sharedMetadata.twitter,
     title: 'Privacy policy',
     description: 'Read the privacy and policy',
   },
diff --git a/src/app/template.tsx b/src/app/template.tsx
index 9f73115..97655dd 100644
--- a/src/app/template.tsx
+++ b/src/app/template.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { PageTransition } from '@shared/components/common/transition'
+import { PageTransition } from '@shared/components'
 
 interface RootTemplateProps {
   children: React.ReactNode
diff --git a/src/app/terms/page.tsx b/src/app/terms/page.tsx
index 519b86d..0d0d01e 100644
--- a/src/app/terms/page.tsx
+++ b/src/app/terms/page.tsx
@@ -1,5 +1,5 @@
-import { ArticleContent } from '@shared/components/common/content'
-import * as defaultMetadata from '@shared/libs/shared-metadata'
+import { ArticleContent } from '@shared/components'
+import { sharedMetadata } from '@shared/libs'
 import { Metadata } from 'next'
 import Link from 'next/link'
 import * as React from 'react'
@@ -8,12 +8,12 @@ export const metadata: Metadata = {
   title: 'Terms of use',
   description: 'Read the terms of use',
   openGraph: {
-    ...defaultMetadata.openGraph,
+    ...sharedMetadata.openGraph,
     title: 'Terms of use',
     description: 'Read the terms of use',
   },
   twitter: {
-    ...defaultMetadata.twitter,
+    ...sharedMetadata.twitter,
     title: 'Terms of use',
     description: 'Read the terms of use',
   },
diff --git a/src/features/changelog/changelog-item.tsx b/src/features/changelog/changelog-item.tsx
index cfea40c..667b9e9 100644
--- a/src/features/changelog/changelog-item.tsx
+++ b/src/features/changelog/changelog-item.tsx
@@ -1,6 +1,11 @@
+'use client'
+
 import Image from 'next/image'
 import Link from 'next/link'
 import * as React from 'react'
+import { motion } from 'motion/react'
+
+const MotionLink = motion.create(Link)
 
 export interface ChangelogData {
   title: string
@@ -20,10 +25,14 @@ export function ChangelogItem({
   const { title, date, image, description, url } = data
 
   return (
-    <Link
+    <MotionLink
+      initial={{ opacity: 0, y: 200, scale: 0.98 }}
+      whileInView={{ opacity: 1, y: 0, scale: 1 }}
+      transition={{ type: 'spring', duration: 1.2, delay: 0.2 }}
+      viewport={{ once: true, margin: '-20% 0px' }}
       href={url}
       target="_blank"
-      className="flex flex-col gap-4 bg-surface border border-border rounded-2xl p-4 transition-all duration-300 hover:-translate-y-1 group"
+      className="flex flex-col gap-4 bg-surface border border-border rounded-2xl p-4 group"
     >
       <div className="flex flex-col tablet:flex-row gap-2 tablet:items-center justify-between">
         <span className="font-medium">{title}</span>
@@ -39,6 +48,6 @@ export function ChangelogItem({
       <p className="text-sm text-foreground/80 !leading-relaxed">
         {description}
       </p>
-    </Link>
+    </MotionLink>
   )
 }
diff --git a/src/features/changelog/changelog-section.tsx b/src/features/changelog/changelog-section.tsx
index 92e6f9b..b789c39 100644
--- a/src/features/changelog/changelog-section.tsx
+++ b/src/features/changelog/changelog-section.tsx
@@ -1,4 +1,4 @@
-import { SectionLabel } from '@shared/components/common/section-label'
+import { SectionLabel } from '@shared/components'
 import * as React from 'react'
 import { ChangelogList } from './changelog-list'
 
diff --git a/src/features/landing/about/about-section.tsx b/src/features/landing/about/about-section.tsx
index 78e83ba..c299417 100644
--- a/src/features/landing/about/about-section.tsx
+++ b/src/features/landing/about/about-section.tsx
@@ -1,11 +1,20 @@
-import { SectionLabel } from '@shared/components/common/section-label'
+'use client'
+
+import { SectionLabel } from '@shared/components'
 import * as React from 'react'
 import { AboutImage } from './about-image'
+import { motion } from 'motion/react'
 
 export function AboutSection(): React.ReactElement {
   return (
     <section className="flex py-20 tablet:py-36 container mx-auto px-5 tablet:px-0">
-      <div className="flex flex-col items-center mx-auto w-full">
+      <motion.div
+        initial={{ opacity: 0, y: 200, scale: 0.98 }}
+        whileInView={{ opacity: 1, y: 0, scale: 1 }}
+        transition={{ type: 'spring', duration: 1.2, delay: 0.2 }}
+        viewport={{ once: true, margin: '-20% 0px' }}
+        className="flex flex-col items-center mx-auto w-full"
+      >
         <SectionLabel>About</SectionLabel>
 
         <h2 className="text-3xl tablet:text-5xl text-foreground font-medium !leading-tight text-balance text-center mt-8 tablet:w-7/12">
@@ -20,7 +29,7 @@ export function AboutSection(): React.ReactElement {
         <div className="flex justify-center items-center mt-20 tablet:mt-36 w-full tablet:w-9/12">
           <AboutImage />
         </div>
-      </div>
+      </motion.div>
     </section>
   )
 }
diff --git a/src/features/landing/cta/cta-section.tsx b/src/features/landing/cta/cta-section.tsx
index cacdcc4..0d46455 100644
--- a/src/features/landing/cta/cta-section.tsx
+++ b/src/features/landing/cta/cta-section.tsx
@@ -1,7 +1,9 @@
-import { SectionLabel } from '@shared/components/common/section-label'
-import { Button } from '@shared/components/ui/button'
+'use client'
+
+import { SectionLabel, Button } from '@shared/components'
 import Link from 'next/link'
 import * as React from 'react'
+import { motion } from 'motion/react'
 
 export function CTASection(): React.ReactElement {
   return (
@@ -9,7 +11,13 @@ export function CTASection(): React.ReactElement {
       className="flex py-20 tablet:py-36 container mx-auto px-5 tablet:px-0"
       id="get-started"
     >
-      <div className="flex flex-col items-center mx-auto w-full">
+      <motion.div
+        initial={{ opacity: 0, y: 200, scale: 0.98 }}
+        whileInView={{ opacity: 1, y: 0, scale: 1 }}
+        transition={{ type: 'spring', duration: 1.2, delay: 0.2 }}
+        viewport={{ once: true, margin: '-20% 0px' }}
+        className="flex flex-col items-center mx-auto w-full"
+      >
         <SectionLabel>Get Started</SectionLabel>
 
         <h2 className="text-3xl tablet:text-5xl text-foreground font-medium !leading-tight text-balance text-center mt-8 tablet:w-7/12">
@@ -53,7 +61,7 @@ export function CTASection(): React.ReactElement {
             Syntax highlight (coming soon)
           </Button>
         </div>
-      </div>
+      </motion.div>
     </section>
   )
 }
diff --git a/src/features/landing/faqs/faq-item.tsx b/src/features/landing/faqs/faq-item.tsx
index 59fcde9..54dbe54 100644
--- a/src/features/landing/faqs/faq-item.tsx
+++ b/src/features/landing/faqs/faq-item.tsx
@@ -2,7 +2,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from '@shared/components/ui/accordion'
+} from '@shared/components'
 import * as React from 'react'
 
 export interface FAQData {
diff --git a/src/features/landing/faqs/faq-section.tsx b/src/features/landing/faqs/faq-section.tsx
index ef6a508..17dcc78 100644
--- a/src/features/landing/faqs/faq-section.tsx
+++ b/src/features/landing/faqs/faq-section.tsx
@@ -1,15 +1,23 @@
-import { SectionLabel } from '@shared/components/common/section-label'
-import { Accordion } from '@shared/components/ui/accordion'
+'use client'
+
+import { SectionLabel, Accordion } from '@shared/components'
 import * as React from 'react'
 import { FAQData, FAQItem } from './faq-item'
 import jsonData from './data.json'
+import { motion } from 'motion/react'
 
 const faqs = jsonData.faqs as FAQData[]
 
 export function FAQSection(): React.ReactElement {
   return (
     <section className="flex py-12 tablet:py-36 container mx-auto px-5 tablet:px-0">
-      <div className="flex flex-col items-center mx-auto w-full">
+      <motion.div
+        initial={{ opacity: 0, y: 200, scale: 0.98 }}
+        whileInView={{ opacity: 1, y: 0, scale: 1 }}
+        transition={{ type: 'spring', duration: 1.2, delay: 0.2 }}
+        viewport={{ once: true, margin: '-20% 0px' }}
+        className="flex flex-col items-center mx-auto w-full"
+      >
         <SectionLabel>FAQs</SectionLabel>
 
         <h2 className="text-3xl tablet:text-5xl text-foreground font-medium !leading-tight text-balance text-center mt-8 tablet:w-7/12">
@@ -34,7 +42,7 @@ export function FAQSection(): React.ReactElement {
             </Accordion>
           </div>
         </div>
-      </div>
+      </motion.div>
     </section>
   )
 }
diff --git a/src/features/landing/feature/feature-section.tsx b/src/features/landing/feature/feature-section.tsx
index 7f7cc95..ce5641f 100644
--- a/src/features/landing/feature/feature-section.tsx
+++ b/src/features/landing/feature/feature-section.tsx
@@ -1,7 +1,10 @@
-import { SectionLabel } from '@shared/components/common/section-label'
+'use client'
+
+import { SectionLabel } from '@shared/components'
 import * as React from 'react'
 import { FeatureItem, FeatureItemData } from './feature-item'
 import jsonData from './data.json'
+import { motion } from 'motion/react'
 
 const featureList = jsonData.features as FeatureItemData[]
 
@@ -11,17 +14,29 @@ export function FeatureSection(): React.ReactElement {
       <div className="flex flex-col items-center mx-auto w-full">
         <SectionLabel>Built on Features</SectionLabel>
 
-        <h2 className="text-3xl tablet:text-5xl text-foreground font-medium !leading-tight text-balance text-center mt-8 tablet:w-7/12">
+        <motion.h2
+          initial={{ opacity: 0, y: 200, scale: 0.98 }}
+          whileInView={{ opacity: 1, y: 0, scale: 1 }}
+          transition={{ type: 'spring', duration: 1.2, delay: 0.2 }}
+          viewport={{ once: true, margin: '-20% 0px' }}
+          className="text-3xl tablet:text-5xl text-foreground font-medium !leading-tight text-balance text-center mt-8 tablet:w-7/12"
+        >
           Charge your coding process with ease and simplicity
-        </h2>
+        </motion.h2>
 
-        <div className="flex items-center mt-20 tablet:mt-36 tablet:w-9/12">
+        <motion.div
+          initial={{ opacity: 0, y: 200, scale: 0.98 }}
+          whileInView={{ opacity: 1, y: 0, scale: 1 }}
+          transition={{ type: 'spring', duration: 1.2, delay: 0.2 }}
+          viewport={{ once: true, margin: '-20% 0px' }}
+          className="flex items-center mt-20 tablet:mt-36 tablet:w-9/12"
+        >
           <div className="grid grid-cols-1 tablet:grid-cols-3 gap-x-7 tablet:gap-y-16 gap-y-3">
             {featureList.map((data, index) => (
               <FeatureItem data={data} key={index} />
             ))}
           </div>
-        </div>
+        </motion.div>
       </div>
     </section>
   )
diff --git a/src/features/landing/gallery/gallery-section.tsx b/src/features/landing/gallery/gallery-section.tsx
index f6c9b7c..d01ffc2 100644
--- a/src/features/landing/gallery/gallery-section.tsx
+++ b/src/features/landing/gallery/gallery-section.tsx
@@ -1,8 +1,10 @@
-import { MarqueeAnimation } from '@shared/components/animation/marquee-animation'
-import { SectionLabel } from '@shared/components/common/section-label'
+'use client'
+
+import { SectionLabel, MarqueeAnimation } from '@shared/components'
 import * as React from 'react'
 import { GalleryItem } from './gallery-item'
 import jsonData from './data.json'
+import { motion } from 'motion/react'
 
 const galleries: string[] = jsonData.galleries as string[]
 
@@ -10,7 +12,13 @@ export function GallerySection(): React.ReactElement {
   return (
     <section className="flex flex-col items-center py-20 tablet:py-36">
       <div className="flex container mx-auto">
-        <div className="flex flex-col items-center mx-auto w-full">
+        <motion.div
+          initial={{ opacity: 0, y: 200, scale: 0.98 }}
+          whileInView={{ opacity: 1, y: 0, scale: 1 }}
+          transition={{ type: 'spring', duration: 1.2, delay: 0.2 }}
+          viewport={{ once: true, margin: '-20% 0px' }}
+          className="flex flex-col items-center mx-auto w-full"
+        >
           <SectionLabel>How it’s live</SectionLabel>
 
           <h2 className="text-3xl tablet:text-5xl text-foreground font-medium !leading-tight text-balance text-center mt-8 tablet:w-7/12">
@@ -22,10 +30,16 @@ export function GallerySection(): React.ReactElement {
             forward and focus on your own code, without distractions and high
             content readability.
           </p>
-        </div>
+        </motion.div>
       </div>
 
-      <div className="flex flex-col justify-center items-center w-full relative overflow-hidden h-[200px] tablet:h-[400px] mt-20 tablet:mt-36">
+      <motion.div
+        initial={{ opacity: 0, y: 200, scale: 0.98 }}
+        whileInView={{ opacity: 1, y: 0, scale: 1 }}
+        transition={{ type: 'spring', duration: 1.2, delay: 0.2 }}
+        viewport={{ once: true, margin: '-20% 0px' }}
+        className="flex flex-col justify-center items-center w-full relative overflow-hidden h-[200px] tablet:h-[400px] mt-20 tablet:mt-36"
+      >
         <MarqueeAnimation className="h-full gap-10" pauseOnHover>
           {galleries.map((image, index) => (
             <GalleryItem image={image} key={index} />
@@ -33,7 +47,7 @@ export function GallerySection(): React.ReactElement {
         </MarqueeAnimation>
         <div className="pointer-events-none absolute inset-y-0 left-0 w-1/6 bg-gradient-to-r from-background "></div>
         <div className="pointer-events-none absolute inset-y-0 right-0 w-1/6 bg-gradient-to-l from-background"></div>
-      </div>
+      </motion.div>
     </section>
   )
 }
diff --git a/src/features/landing/hero/hero-section.tsx b/src/features/landing/hero/hero-section.tsx
index 48d8677..5653ff9 100644
--- a/src/features/landing/hero/hero-section.tsx
+++ b/src/features/landing/hero/hero-section.tsx
@@ -1,7 +1,9 @@
-import { SectionLabel } from '@shared/components/common/section-label'
-import { Button } from '@shared/components/ui/button'
+'use client'
+
+import { SectionLabel, Button } from '@shared/components'
 import * as React from 'react'
 import { ImageShot } from './image-shot'
+import { motion } from 'motion/react'
 
 export function HeroSection(): React.ReactElement {
   return (
@@ -9,22 +11,40 @@ export function HeroSection(): React.ReactElement {
       <div className="flex flex-col items-center mx-auto w-full">
         <SectionLabel>New Release: Zed Theme</SectionLabel>
 
-        <h2 className="text-3xl tablet:text-5xl text-foreground font-medium !leading-tight text-balance text-center mt-8 tablet:w-7/12">
+        <motion.h2
+          initial={{ opacity: 0, scale: 0.98 }}
+          whileInView={{ opacity: 1, scale: 1 }}
+          transition={{ type: 'spring', duration: 1.2, delay: 0.2 }}
+          viewport={{ once: true, margin: '-20% 0px' }}
+          className="text-3xl tablet:text-5xl text-foreground font-medium !leading-tight text-balance text-center mt-8 tablet:w-7/12"
+        >
           The code editor themes for simplicity & productivity
-        </h2>
+        </motion.h2>
 
-        <p className="!leading-relaxed tablet:w-5/12 text-center text-foreground/60 mt-6 text-pretty">
+        <motion.p
+          initial={{ opacity: 0, scale: 0.98 }}
+          whileInView={{ opacity: 1, scale: 1 }}
+          transition={{ type: 'spring', duration: 1.2, delay: 0.2 }}
+          viewport={{ once: true, margin: '-20% 0px' }}
+          className="!leading-relaxed tablet:w-5/12 text-center text-foreground/60 mt-6 text-pretty"
+        >
           Powering your coding productivity with simple design and elegant view
           for all of your code editor, Never miss the important things from
           color distractions.
-        </p>
+        </motion.p>
 
-        <div className="flex items-center mt-16">
+        <motion.div
+          initial={{ opacity: 0, scale: 0.98 }}
+          whileInView={{ opacity: 1, scale: 1 }}
+          transition={{ type: 'spring', duration: 1.2, delay: 0.2 }}
+          viewport={{ once: true, margin: '-20% 0px' }}
+          className="flex items-center mt-16"
+        >
           <Button className="transition-all duration-300 hover:-translate-y-1">
             Download Now
             <i className="fi fi-rr-arrow-right" />
           </Button>
-        </div>
+        </motion.div>
 
         <div className="flex items-center mt-20 tablet:mt-36 w-full">
           <ImageShot />
diff --git a/src/features/landing/hero/image-shot.tsx b/src/features/landing/hero/image-shot.tsx
index f606c65..feec94b 100644
--- a/src/features/landing/hero/image-shot.tsx
+++ b/src/features/landing/hero/image-shot.tsx
@@ -3,6 +3,7 @@
 import { useTheme } from 'next-themes'
 import Image from 'next/image'
 import * as React from 'react'
+import { motion } from 'motion/react'
 
 const lightModeImage =
   'https://cdn.hashnode.com/res/hashnode/image/upload/v1732803074247/caca6311-7556-4993-a429-e8952b2ccd40.png'
@@ -22,7 +23,13 @@ export function ImageShot(): React.ReactElement {
   }, [resolvedTheme])
 
   return (
-    <div className="flex bg-surface border border-border p-2 rounded-2xl w-full tablet:w-10/12 tablet:h-[612px] h-[200px] mx-auto">
+    <motion.div
+      initial={{ opacity: 0, y: 200, scale: 0.98 }}
+      whileInView={{ opacity: 1, y: 0, scale: 1 }}
+      transition={{ type: 'spring', duration: 1.2, delay: 0.2 }}
+      viewport={{ once: true, margin: '-30% 0px' }}
+      className="flex bg-surface border border-border p-2 rounded-2xl w-full tablet:w-10/12 tablet:h-[612px] h-[200px] mx-auto"
+    >
       <picture className="bg-surface border border-border rounded-xl relative h-full w-full overflow-hidden">
         <Image
           src={image}
@@ -32,6 +39,6 @@ export function ImageShot(): React.ReactElement {
           sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
         />
       </picture>
-    </div>
+    </motion.div>
   )
 }
diff --git a/src/features/landing/index.tsx b/src/features/landing/index.tsx
index 885cb51..79af300 100644
--- a/src/features/landing/index.tsx
+++ b/src/features/landing/index.tsx
@@ -1,4 +1,3 @@
-export * from './waitlist/waitlist-section'
 export * from './hero/hero-section'
 export * from './feature/feature-section'
 export * from './gallery/gallery-section'
@@ -7,4 +6,3 @@ export * from './testimonial/testimonial-section'
 export * from './pricing/pricing-section'
 export * from './faqs/faq-section'
 export * from './cta/cta-section'
-export * from './waitlist/waitlist-service'
diff --git a/src/features/landing/pricing/pricing-section.tsx b/src/features/landing/pricing/pricing-section.tsx
index 61fa1b9..f3553d9 100644
--- a/src/features/landing/pricing/pricing-section.tsx
+++ b/src/features/landing/pricing/pricing-section.tsx
@@ -1,12 +1,20 @@
-import { SectionLabel } from '@shared/components/common/section-label'
-import { Button } from '@shared/components/ui/button'
+'use client'
+
+import { Button, SectionLabel } from '@shared/components'
 import Link from 'next/link'
 import * as React from 'react'
+import { motion } from 'motion/react'
 
 export function PricingSection(): React.ReactElement {
   return (
     <section className="flex py-36 container mx-auto px-5 tablet:px-0">
-      <div className="flex flex-col items-center mx-auto w-full">
+      <motion.div
+        initial={{ opacity: 0, y: 200, scale: 0.98 }}
+        whileInView={{ opacity: 1, y: 0, scale: 1 }}
+        transition={{ type: 'spring', duration: 1.2, delay: 0.2 }}
+        viewport={{ once: true, margin: '-20% 0px' }}
+        className="flex flex-col items-center mx-auto w-full"
+      >
         <SectionLabel>Pricing is shit</SectionLabel>
 
         <h2 className="text-3xl tablet:text-5xl text-foreground font-medium !leading-tight text-balance text-center mt-8 tablet:w-7/12">
@@ -46,7 +54,7 @@ export function PricingSection(): React.ReactElement {
             </Link>
           </Button>
         </div>
-      </div>
+      </motion.div>
     </section>
   )
 }
diff --git a/src/features/landing/testimonial/testimonial-section.tsx b/src/features/landing/testimonial/testimonial-section.tsx
index 0ef8efe..ed4e00d 100644
--- a/src/features/landing/testimonial/testimonial-section.tsx
+++ b/src/features/landing/testimonial/testimonial-section.tsx
@@ -1,8 +1,10 @@
-import { MarqueeAnimation } from '@shared/components/animation/marquee-animation'
-import { SectionLabel } from '@shared/components/common/section-label'
+'use client'
+
+import { MarqueeAnimation, SectionLabel } from '@shared/components'
 import * as React from 'react'
 import { TestimonialData, TestimonialItem } from './testimonial-item'
 import jsonData from './data.json'
+import { motion } from 'motion/react'
 
 const testimonials = jsonData.testimonials as TestimonialData[]
 
@@ -10,7 +12,13 @@ export function TestimonialSection(): React.ReactElement {
   return (
     <section className="flex flex-col py-20 tablet:py-36 container mx-auto px-5 tablet:px-0">
       <div className="flex container mx-0">
-        <div className="flex flex-col items-center mx-auto w-full">
+        <motion.div
+          initial={{ opacity: 0, y: 200, scale: 0.98 }}
+          whileInView={{ opacity: 1, y: 0, scale: 1 }}
+          transition={{ type: 'spring', duration: 1.2, delay: 0.2 }}
+          viewport={{ once: true, margin: '-20% 0px' }}
+          className="flex flex-col items-center mx-auto w-full"
+        >
           <SectionLabel>Wall of love</SectionLabel>
 
           <h2 className="text-3xl tablet:text-5xl text-foreground font-medium !leading-tight text-balance text-center mt-8 tablet:w-7/12">
@@ -21,10 +29,16 @@ export function TestimonialSection(): React.ReactElement {
             Developers around the world loves simplicity and clean looks, they
             love us and here’s what they say about us.
           </p>
-        </div>
+        </motion.div>
       </div>
 
-      <div className="flex flex-col justify-center items-center w-full relative overflow-hidden h-[360px] mt-36">
+      <motion.div
+        initial={{ opacity: 0, y: 200, scale: 0.98 }}
+        whileInView={{ opacity: 1, y: 0, scale: 1 }}
+        transition={{ type: 'spring', duration: 1.2, delay: 0.2 }}
+        viewport={{ once: true, margin: '-20% 0px' }}
+        className="flex flex-col justify-center items-center w-full relative overflow-hidden h-[360px] mt-36"
+      >
         <MarqueeAnimation className="gap-5" pauseOnHover>
           {testimonials.map((testi, index) => (
             <TestimonialItem data={testi} key={index} />
@@ -37,7 +51,7 @@ export function TestimonialSection(): React.ReactElement {
         </MarqueeAnimation>
         <div className="pointer-events-none absolute inset-y-0 left-0 w-1/6 bg-gradient-to-r from-background "></div>
         <div className="pointer-events-none absolute inset-y-0 right-0 w-1/6 bg-gradient-to-l from-background"></div>
-      </div>
+      </motion.div>
     </section>
   )
 }
diff --git a/src/features/landing/waitlist/success-waitlist-modal.tsx b/src/features/landing/waitlist/success-waitlist-modal.tsx
deleted file mode 100644
index 3702374..0000000
--- a/src/features/landing/waitlist/success-waitlist-modal.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as React from 'react'
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogBody,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogTitle,
-} from '@shared/components/ui/alert'
-
-interface SuccessWaitlistModalProps {
-  isOpen: boolean
-  onOpenChange: (open: boolean) => void
-}
-
-export function SuccessWaitlistModal({
-  isOpen,
-  onOpenChange,
-}: SuccessWaitlistModalProps): React.ReactElement {
-  return (
-    <AlertDialog open={isOpen} onOpenChange={onOpenChange}>
-      <AlertDialogContent className="!max-w-sm">
-        <AlertDialogBody className="px-8 py-16">
-          <div className="flex justify-center items-center h-16 w-16 border border-border rounded-full mx-auto">
-            <i className="fi fi fi-sr-badge-check text-green-600 dark:text-green-500 text-3xl" />
-          </div>
-          <AlertDialogTitle className="text-center !mt-6">
-            Yo, you’re awesome
-            <br />
-            We’re still in progress
-          </AlertDialogTitle>
-          <AlertDialogDescription className="text-center !mt-4 pb-10">
-            Thanks, to join the awesome waiting list. We will notify you when
-            everything is ready, stay toon and see what’s changes.
-          </AlertDialogDescription>
-        </AlertDialogBody>
-
-        <AlertDialogFooter>
-          <AlertDialogAction>OK, I’ll Wait</AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  )
-}
diff --git a/src/features/landing/waitlist/waitlist-form.tsx b/src/features/landing/waitlist/waitlist-form.tsx
deleted file mode 100644
index e05328a..0000000
--- a/src/features/landing/waitlist/waitlist-form.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-'use client'
-
-import { zodResolver } from '@hookform/resolvers/zod'
-import * as React from 'react'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-import { Button } from '@shared/components/ui/button'
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormMessage,
-} from '@shared/components/ui/form'
-import { Input } from '@shared/components/ui/input'
-import { useMutation } from '@tanstack/react-query'
-import { showSonner } from '@shared/components/ui/sonner'
-import { SuccessWaitlistModal } from './success-waitlist-modal'
-import * as waitlistService from './waitlist-service'
-
-const formSchema = z.object({
-  fullName: z.string().min(2, 'Please enter your name').max(50),
-  email: z.string().min(2, 'Please enter your email').email({
-    message: 'Please enter a valid email address.',
-  }),
-})
-
-export function WaitListForm(): React.ReactElement {
-  const [isSuccessModalOpen, setIsSuccessModalOpen] =
-    React.useState<boolean>(false)
-
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      fullName: '',
-      email: '',
-    },
-  })
-
-  const createWaitingList = useMutation({
-    mutationFn: waitlistService.joinWaitingList,
-    onSuccess: () => {
-      setIsSuccessModalOpen(true)
-      form.reset()
-    },
-    onError: () => {
-      showSonner({
-        title: "Opps, you're unlucky",
-        description: 'Something error when tried to make you become our family',
-      })
-    },
-  })
-
-  function onSubmit(values: z.infer<typeof formSchema>) {
-    const { email, fullName } = values
-    createWaitingList.mutate({ input: { email, fullName } })
-  }
-
-  return (
-    <div className="flex w-full">
-      <Form {...form}>
-        <form
-          onSubmit={form.handleSubmit(onSubmit)}
-          className="flex flex-col w-full space-y-3"
-        >
-          <FormField
-            control={form.control}
-            name="fullName"
-            render={({ field }) => (
-              <FormItem>
-                <FormControl>
-                  <Input placeholder="Your awesome name" {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="email"
-            render={({ field }) => (
-              <FormItem>
-                <FormControl>
-                  <Input placeholder="Your email address" {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <div className="flex w-full">
-            <Button type="submit" className="mt-3 w-full">
-              Join waitlist
-              {createWaitingList.isPending ? (
-                <i className="fi fi fi-rr-spinner animate-spin absolute right-4" />
-              ) : (
-                <i className="fi fi-rr-arrow-right absolute right-4" />
-              )}
-            </Button>
-          </div>
-        </form>
-      </Form>
-
-      <SuccessWaitlistModal
-        isOpen={isSuccessModalOpen}
-        onOpenChange={setIsSuccessModalOpen}
-      />
-    </div>
-  )
-}
diff --git a/src/features/landing/waitlist/waitlist-section.tsx b/src/features/landing/waitlist/waitlist-section.tsx
deleted file mode 100644
index 7d3b2cc..0000000
--- a/src/features/landing/waitlist/waitlist-section.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import * as React from 'react'
-import { WaitListForm } from './waitlist-form'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@shared/components/ui/tooltip'
-import Link from 'next/link'
-import { Meteors } from '@shared/components/ui/meteors'
-import { DynamicLogo } from '@shared/components/common/dynamic-logo'
-import { Spotlight } from '@shared/components/ui/spotlight'
-
-export function WaitlistSection(): React.ReactElement {
-  return (
-    <section className="flex flex-col items-center mx-auto container px-5 tablet:px-0 py-20 tablet:pt-36 tablet:pb-10 relative">
-      <div className="flex flex-col items-center tablet:w-5/12 w-full relative">
-        <div className="flex">
-          <DynamicLogo />
-        </div>
-
-        <h2 className="flex flex-col items-center text-3xl tablet:text-5xl !leading-tight font-medium text-center text-balance mt-10">
-          <span>Join the waitlist for</span>
-          <span className="font-mono">{'{code_theme}'}</span>
-        </h2>
-
-        <p className="!leading-relaxed text-foreground/60 text-center w-full tablet:w-10/12 mt-6">
-          Brook code theme is new simplify and clean code editor theme for your
-          favorite code editor, join the waiting list now.
-        </p>
-
-        <div className="flex w-full tablet:w-9/12 mx-auto mt-20">
-          <WaitListForm />
-        </div>
-
-        <div className="flex flex-col mt-36">
-          <p className="text-center !leading-relaxed">
-            Design & develop by{' '}
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger>
-                  <Link
-                    href={'https://nyomansunima.one?ref=brookcode'}
-                    target="_blank"
-                    className="font-medium"
-                  >
-                    @nyomansunima
-                  </Link>
-                </TooltipTrigger>
-                <TooltipContent>
-                  The special authors for this project
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>{' '}
-            in Bali, Indonesia
-            <br />
-            Ship for global audiences.
-          </p>
-        </div>
-      </div>
-
-      <Spotlight className="-top-40 left-0 tablet:left-60 tablet:-top-20" />
-      <Meteors number={18} />
-    </section>
-  )
-}
diff --git a/src/features/landing/waitlist/waitlist-service.ts b/src/features/landing/waitlist/waitlist-service.ts
deleted file mode 100644
index c6700e6..0000000
--- a/src/features/landing/waitlist/waitlist-service.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-'use server'
-
-import { waitListClient } from '@shared/libs/connections'
-import { splitName } from '@shared/utils/helpers'
-
-interface JoinWaitListInput {
-  input: { fullName: string; email: string }
-}
-
-export async function joinWaitingList({
-  input,
-}: JoinWaitListInput): Promise<void> {
-  const { firstName, lastName } = splitName(input.fullName)
-
-  return await waitListClient('/api/v1/signup', {
-    method: 'POST',
-    body: {
-      waitlist_id: '22526',
-      email: input.email,
-      first_name: firstName,
-      last_name: lastName,
-    },
-  })
-}
diff --git a/src/shared/components/ui/meteors.tsx b/src/shared/components/animation/meteors.tsx
similarity index 100%
rename from src/shared/components/ui/meteors.tsx
rename to src/shared/components/animation/meteors.tsx
diff --git a/src/shared/components/ui/spotlight.tsx b/src/shared/components/animation/spotlight.tsx
similarity index 100%
rename from src/shared/components/ui/spotlight.tsx
rename to src/shared/components/animation/spotlight.tsx
diff --git a/src/shared/components/common/transition.tsx b/src/shared/components/animation/transition.tsx
similarity index 100%
rename from src/shared/components/common/transition.tsx
rename to src/shared/components/animation/transition.tsx
diff --git a/src/shared/components/common/header.tsx b/src/shared/components/common/header.tsx
index b23ff62..98f689f 100644
--- a/src/shared/components/common/header.tsx
+++ b/src/shared/components/common/header.tsx
@@ -1,7 +1,10 @@
+'use client'
+
 import * as React from 'react'
 import { DynamicLogo } from './dynamic-logo'
 import { NavigationItem } from './navigation-link'
 import Link from 'next/link'
+import { useMotionValueEvent, useScroll, motion } from 'motion/react'
 
 interface ProductsNavigationItemProps {
   children: React.ReactNode
@@ -89,11 +92,25 @@ function Actions(): React.ReactElement {
 }
 
 export function Header(): React.ReactElement {
+  const { scrollY } = useScroll()
+  const [scrollDirection, setScrollDirection] = React.useState<'up' | 'down'>(
+    'down',
+  )
+
+  useMotionValueEvent(scrollY, 'change', (progress) => {
+    const diff = progress - (scrollY.getPrevious() || 0)
+    setScrollDirection(diff > 0 ? 'down' : 'up')
+  })
+
   return (
-    <header className="flex fixed top-4 tablet:top-6 inset-x-3 tablet:inset-x-10 z-50 justify-between">
+    <motion.header
+      transition={{ type: 'spring', duration: 1.2 }}
+      animate={{ y: scrollDirection === 'down' ? -200 : 0 }}
+      className="flex fixed top-4 tablet:top-6 inset-x-3 tablet:inset-x-10 z-50 justify-between"
+    >
       <Brand />
       <Navigation />
       <Actions />
-    </header>
+    </motion.header>
   )
 }
diff --git a/src/shared/components/common/section-label.tsx b/src/shared/components/common/section-label.tsx
index e3aae83..e20caed 100644
--- a/src/shared/components/common/section-label.tsx
+++ b/src/shared/components/common/section-label.tsx
@@ -1,5 +1,8 @@
+'use client'
+
 import { mergeClass } from '@shared/utils/helpers'
 import * as React from 'react'
+import { motion } from 'motion/react'
 
 interface SectionLabelProps {
   className?: string
@@ -11,13 +14,17 @@ export function SectionLabel({
   className,
 }: SectionLabelProps): React.ReactElement {
   return (
-    <span
+    <motion.span
+      initial={{ opacity: 0, scale: 0.98 }}
+      whileInView={{ opacity: 1, scale: 1 }}
+      transition={{ type: 'spring', duration: 1.2, delay: 0.2 }}
+      viewport={{ once: true, margin: '-30% 0px' }}
       className={mergeClass(
-        'flex items-center h-8 px-4 text-xs text-center text-foreground/60 bg-surface border border-border rounded-xl cursor-pointer transition-all duration-300 hover:scale-95 hover:text-foreground',
+        'flex items-center h-8 px-4 text-xs text-center text-foreground/60 bg-surface border border-border rounded-xl cursor-pointer hover:scale-95 hover:text-foreground',
         className,
       )}
     >
       {children}
-    </span>
+    </motion.span>
   )
 }
diff --git a/src/shared/components/index.ts b/src/shared/components/index.ts
new file mode 100644
index 0000000..5c42ff3
--- /dev/null
+++ b/src/shared/components/index.ts
@@ -0,0 +1,17 @@
+export * from './ui/accordion'
+export * from './ui/button'
+export * from './ui/sonner'
+export * from './ui/toast'
+export * from './ui/tooltip'
+
+export * from './animation/marquee-animation'
+export * from './animation/meteors'
+export * from './animation/spotlight'
+export * from './animation/transition'
+
+export * from './common/content'
+export * from './common/dynamic-logo'
+export * from './common/footer'
+export * from './common/header'
+export * from './common/navigation-link'
+export * from './common/section-label'
diff --git a/src/shared/components/ui/alert.tsx b/src/shared/components/ui/alert.tsx
deleted file mode 100644
index fcdbe00..0000000
--- a/src/shared/components/ui/alert.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
-
-import { buttonVariants } from './button'
-import { mergeClass } from '@shared/utils/helpers'
-
-const AlertDialog = AlertDialogPrimitive.Root
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={mergeClass(
-      'fixed inset-0 z-50 bg-black/50  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={mergeClass(
-        'fixed left-[50%] top-[50%] z-50 flex flex-col w-full max-w-md translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-surface rounded-2xl p-2 shadow-lg duration-300 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
-        className,
-      )}
-      {...props}
-    >
-      <div className="flex flex-col border border-border bg-surface rounded-xl">
-        {children}
-      </div>
-    </AlertDialogPrimitive.Content>
-  </AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
-
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={mergeClass(
-      'flex flex-col space-y-2 text-center tablet:text-left',
-      className,
-    )}
-    {...props}
-  />
-)
-AlertDialogHeader.displayName = 'AlertDialogHeader'
-
-const AlertDialogBody = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={mergeClass(
-      'flex flex-col space-y-2 text-center tablet:text-left px-6 py-5',
-      className,
-    )}
-    {...props}
-  />
-)
-AlertDialogBody.displayName = 'AlertDialogBody'
-
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={mergeClass(
-      'w-full flex items-center flex-col tablet:flex-row tablet:justify-end gap-2 border-t border-border p-2',
-      className,
-    )}
-    {...props}
-  />
-)
-AlertDialogFooter.displayName = 'AlertDialogFooter'
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={mergeClass('text-lg font-medium !leading-tight', className)}
-    {...props}
-  />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={mergeClass(
-      'text-sm text-foreground/60 !leading-relaxed',
-      className,
-    )}
-    {...props}
-  />
-))
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={mergeClass(
-      buttonVariants({
-        size: 'sm',
-        variant: 'primary',
-      }),
-      className,
-    )}
-    {...props}
-  />
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={mergeClass(
-      buttonVariants({ variant: 'outline', size: 'sm' }),
-      className,
-    )}
-    {...props}
-  />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogBody,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-}
diff --git a/src/shared/components/ui/form.tsx b/src/shared/components/ui/form.tsx
deleted file mode 100644
index 834c5aa..0000000
--- a/src/shared/components/ui/form.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as LabelPrimitive from '@radix-ui/react-label'
-import { Slot } from '@radix-ui/react-slot'
-import {
-  Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
-  FormProvider,
-  useFormContext,
-} from 'react-hook-form'
-import { mergeClass } from '@shared/utils/helpers'
-import { Label } from './label'
-
-const Form = FormProvider
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  name: TName
-}
-
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue,
-)
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  )
-}
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState, formState } = useFormContext()
-
-  const fieldState = getFieldState(fieldContext.name, formState)
-
-  if (!fieldContext) {
-    throw new Error('useFormField should be used within <FormField>')
-  }
-
-  const { id } = itemContext
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  }
-}
-
-type FormItemContextValue = {
-  id: string
-}
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue,
-)
-
-const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const id = React.useId()
-
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div
-        ref={ref}
-        className={mergeClass('space-y-2', className)}
-        {...props}
-      />
-    </FormItemContext.Provider>
-  )
-})
-FormItem.displayName = 'FormItem'
-
-const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
-
-  return (
-    <Label
-      ref={ref}
-      className={mergeClass(error && 'text-foreground', className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  )
-})
-FormLabel.displayName = 'FormLabel'
-
-const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
-
-  return (
-    <Slot
-      ref={ref}
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  )
-})
-FormControl.displayName = 'FormControl'
-
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField()
-
-  return (
-    <p
-      ref={ref}
-      id={formDescriptionId}
-      className={mergeClass('text-sm text-foreground/60', className)}
-      {...props}
-    />
-  )
-})
-FormDescription.displayName = 'FormDescription'
-
-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message) : children
-
-  if (!body) {
-    return null
-  }
-
-  return (
-    <p
-      ref={ref}
-      id={formMessageId}
-      className={mergeClass('text-[13px] text-destructive ml-2', className)}
-      {...props}
-    >
-      {body}
-    </p>
-  )
-})
-FormMessage.displayName = 'FormMessage'
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-}
diff --git a/src/shared/components/ui/input.tsx b/src/shared/components/ui/input.tsx
deleted file mode 100644
index 944be33..0000000
--- a/src/shared/components/ui/input.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { mergeClass } from '@shared/utils/helpers'
-import * as React from 'react'
-
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={mergeClass(
-          'flex items-center h-11 w-full rounded-xl border border-border bg-input px-4 py-2 text-sm focus:border-border file:border-0 placeholder:text-foreground/60 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 ',
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  },
-)
-Input.displayName = 'Input'
-
-export { Input }
diff --git a/src/shared/components/ui/label.tsx b/src/shared/components/ui/label.tsx
deleted file mode 100644
index ee79483..0000000
--- a/src/shared/components/ui/label.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as LabelPrimitive from '@radix-ui/react-label'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { mergeClass } from '@shared/utils/helpers'
-
-const labelVariants = cva(
-  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
-)
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={mergeClass(labelVariants(), className)}
-    {...props}
-  />
-))
-Label.displayName = LabelPrimitive.Root.displayName
-
-export { Label }
diff --git a/src/shared/fonts/index.ts b/src/shared/fonts/index.ts
index 0d61f1f..3259cea 100644
--- a/src/shared/fonts/index.ts
+++ b/src/shared/fonts/index.ts
@@ -1,13 +1,18 @@
 import localFont from 'next/font/local'
 
-export const geistSans = localFont({
+const geistSans = localFont({
   src: './geist-sans.woff',
   variable: '--font-geist-sans',
   weight: '100 900',
 })
 
-export const geistMono = localFont({
+const geistMono = localFont({
   src: './geist-mono.woff',
   variable: '--font-geist-mono',
   weight: '100 900',
 })
+
+export const fonts = {
+  geistSans,
+  geistMono,
+}
diff --git a/src/shared/hooks/index.ts b/src/shared/hooks/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/shared/libs/config.ts b/src/shared/libs/config.ts
index 9008d7b..c0824c4 100644
--- a/src/shared/libs/config.ts
+++ b/src/shared/libs/config.ts
@@ -1,11 +1,9 @@
-export default {
+export const config = {
   app: {
     host: process.env.NEXT_PUBLIC_APP_HOST || 'http://localhost:3000',
   },
   posthog: {
     key: process.env.NEXT_PUBLIC_POSTHOG_KEY || '',
-    host: process.env.NEXT_PUBLIC_POSTHOG_HOST || '',
-    uiHost: process.env.NEXT_PUBLIC_POSTHOG_UI_HOST || '',
   },
   verification: {
     google: process.env.NEXT_PUBLIC_GOOGLE_VERIFICATION || '',
diff --git a/src/shared/libs/index.ts b/src/shared/libs/index.ts
new file mode 100644
index 0000000..ba056d5
--- /dev/null
+++ b/src/shared/libs/index.ts
@@ -0,0 +1,4 @@
+export * from './shared-metadata'
+export * from './config'
+export * from './connections'
+export * from './connection-instance'
diff --git a/src/shared/libs/shared-metadata.ts b/src/shared/libs/shared-metadata.ts
index 3be56bc..ad2e746 100644
--- a/src/shared/libs/shared-metadata.ts
+++ b/src/shared/libs/shared-metadata.ts
@@ -1,7 +1,7 @@
 import { OpenGraph } from 'next/dist/lib/metadata/types/opengraph-types'
 import { Twitter } from 'next/dist/lib/metadata/types/twitter-types'
 
-export const openGraph: OpenGraph = {
+const openGraph: OpenGraph = {
   images: [
     'https://cdn.hashnode.com/res/hashnode/image/upload/v1732187828243/cc1d78a8-387f-457e-841e-20f9528588e9.png',
   ],
@@ -10,7 +10,7 @@ export const openGraph: OpenGraph = {
   siteName: 'Brook Code Theme',
 }
 
-export const twitter: Twitter = {
+const twitter: Twitter = {
   images: [
     'https://cdn.hashnode.com/res/hashnode/image/upload/v1732187828243/cc1d78a8-387f-457e-841e-20f9528588e9.png',
   ],
@@ -18,3 +18,8 @@ export const twitter: Twitter = {
   creator: '@nyomansunima',
   site: 'Brook Code Theme',
 }
+
+export const sharedMetadata = {
+  openGraph,
+  twitter,
+}
diff --git a/src/shared/providers/index.ts b/src/shared/providers/index.ts
new file mode 100644
index 0000000..bc1aecb
--- /dev/null
+++ b/src/shared/providers/index.ts
@@ -0,0 +1,3 @@
+export * from './theme-provider'
+export * from './animation-provider'
+export * from './posthog-provider'
diff --git a/src/shared/providers/posthog-provider.tsx b/src/shared/providers/posthog-provider.tsx
index b40778e..f7e116d 100644
--- a/src/shared/providers/posthog-provider.tsx
+++ b/src/shared/providers/posthog-provider.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react'
 import posthog from 'posthog-js'
 import { PostHogProvider } from 'posthog-js/react'
-import config from '@shared/libs/config'
+import { config } from '@shared/libs'
 
 interface PostHogProviderProps {
   children: React.ReactNode
@@ -11,7 +11,7 @@ interface PostHogProviderProps {
 
 if (typeof window !== 'undefined') {
   posthog.init(config.posthog.key, {
-    api_host: config.posthog.host,
+    api_host: '/ingest',
     ui_host: 'https://us.posthog.com',
     person_profiles: 'identified_only',
   })
diff --git a/src/shared/providers/query-provider.tsx b/src/shared/providers/query-provider.tsx
deleted file mode 100644
index 0f970d0..0000000
--- a/src/shared/providers/query-provider.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import {
-  defaultShouldDehydrateQuery,
-  isServer,
-  QueryClient,
-  QueryClientProvider,
-} from '@tanstack/react-query'
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-
-interface QueryProviderProps {
-  children: React.ReactNode
-}
-
-let browserQueryClient: QueryClient | undefined = undefined
-
-export function createInitialQueryClient(): QueryClient {
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: {
-        staleTime: 60 * 1000,
-      },
-      dehydrate: {
-        shouldDehydrateQuery: (query) =>
-          defaultShouldDehydrateQuery(query) ||
-          query.state.status === 'pending',
-      },
-    },
-  })
-
-  return queryClient
-}
-
-export function initQueryClient(): QueryClient {
-  if (isServer) {
-    return createInitialQueryClient()
-  } else {
-    if (!browserQueryClient) {
-      browserQueryClient = createInitialQueryClient()
-    }
-
-    return browserQueryClient
-  }
-}
-
-export function QueryProvider({
-  children,
-}: Readonly<QueryProviderProps>): React.ReactElement {
-  const queryClient = initQueryClient()
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      {children}
-      <ReactQueryDevtools />
-    </QueryClientProvider>
-  )
-}
diff --git a/src/shared/utils/formatters.ts b/src/shared/utils/formatters.ts
deleted file mode 100644
index bc3949b..0000000
--- a/src/shared/utils/formatters.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as DateUtil from 'date-fns'
-
-export function formatReadableDate(
-  stringDate: string,
-  format?: string,
-): string {
-  const defaultFormat = 'MMMM, yyyy'
-  const date = new Date(stringDate)
-  const formattedDate = DateUtil.format(date, format ?? defaultFormat)
-
-  return formattedDate || ''
-}
diff --git a/src/shared/utils/helpers.ts b/src/shared/utils/helpers.ts
index 9cccdda..58f8c20 100644
--- a/src/shared/utils/helpers.ts
+++ b/src/shared/utils/helpers.ts
@@ -1,11 +1,12 @@
 import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
+import dayjs from 'dayjs'
 
 export function mergeClass(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
 
-export function hasValidNames(input): boolean {
+export function hasValidNames(input: string): boolean {
   const nameParts = input.trim().split(/\s+/)
   if (nameParts.length < 2) {
     return false
@@ -19,7 +20,7 @@ interface SplitName {
   lastName: string
 }
 
-export function splitName(input): SplitName {
+export function splitName(input: string): SplitName {
   const nameParts = input.trim().split(/\s+/)
   if (nameParts.length < 2) {
     return { firstName: input, lastName: '' }
@@ -29,3 +30,11 @@ export function splitName(input): SplitName {
   const lastName = nameParts[nameParts.length - 1]
   return { firstName, lastName }
 }
+
+export function formatReadableDate(
+  stringDate: string,
+  format?: string,
+): string {
+  const formattedDate = dayjs(stringDate).format(format)
+  return formattedDate
+}
diff --git a/src/shared/utils/image.ts b/src/shared/utils/image.ts
deleted file mode 100644
index c9285d3..0000000
--- a/src/shared/utils/image.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as fs from 'fs/promises'
-import { getPlaiceholder } from 'plaiceholder'
-
-interface CreateImageBlur {
-  url: string
-}
-
-export async function createImageBlur({
-  url,
-}: CreateImageBlur): Promise<string> {
-  // Check if the images is static or the dynamic images from url
-  const isDynamicImage = url.includes('https://') || url.includes('http://')
-  let blurImage
-
-  if (isDynamicImage) {
-    const buffer = await fetch(url)
-      .then((res) => res.arrayBuffer())
-      .then((res) => Buffer.from(res))
-
-    blurImage = (await getPlaiceholder(buffer)).base64
-  } else {
-    const buffer = await fs.readFile(`${process.cwd()}/public${url}`)
-    blurImage = (await getPlaiceholder(buffer)).base64
-  }
-
-  return blurImage
-}
diff --git a/src/shared/utils/index.ts b/src/shared/utils/index.ts
new file mode 100644
index 0000000..b2a4c75
--- /dev/null
+++ b/src/shared/utils/index.ts
@@ -0,0 +1 @@
+export * from './helpers'