diff --git a/messages/en.json b/messages/en.json
index 8847bb4..891f531 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -434,7 +434,7 @@
           },
           "billing": {
             "title": "Billing",
-            "description": "Manage your billing information",
+            "description": "Manage your subscription and billing details",
             "status": {
               "active": "Active",
               "trial": "Trial",
diff --git a/messages/zh.json b/messages/zh.json
index e8b7627..a34ef8b 100644
--- a/messages/zh.json
+++ b/messages/zh.json
@@ -145,7 +145,7 @@
       "signInWithGitHub": "使用 GitHub 登录",
       "showPassword": "显示密码",
       "hidePassword": "隐藏密码",
-       "or": "或"
+      "or": "或"
     },
     "register": {
       "title": "注册",
@@ -429,7 +429,7 @@
           },
           "billing": {
             "title": "账单",
-            "description": "管理您的账单信息",
+            "description": "管理您的订阅和账单信息",
             "status": {
               "active": "已激活",
               "trial": "试用中",
diff --git a/public/logo-dark.png b/public/logo-dark.png
new file mode 100644
index 0000000..38b1909
Binary files /dev/null and b/public/logo-dark.png differ
diff --git a/src/app/[locale]/(marketing)/(legal)/layout.tsx b/src/app/[locale]/(marketing)/(legal)/layout.tsx
index f37ea6b..d326d6b 100644
--- a/src/app/[locale]/(marketing)/(legal)/layout.tsx
+++ b/src/app/[locale]/(marketing)/(legal)/layout.tsx
@@ -1,4 +1,4 @@
-import Container from '@/components/container';
+import Container from '@/components/shared/container';
 import { PropsWithChildren } from 'react';
 
 import '@/styles/mdx.css';
diff --git a/src/app/[locale]/(marketing)/(pages)/layout.tsx b/src/app/[locale]/(marketing)/(pages)/layout.tsx
index daceee6..3f31ee3 100644
--- a/src/app/[locale]/(marketing)/(pages)/layout.tsx
+++ b/src/app/[locale]/(marketing)/(pages)/layout.tsx
@@ -1,4 +1,4 @@
-import Container from '@/components/container';
+import Container from '@/components/shared/container';
 import { PropsWithChildren } from 'react';
 
 export default function PageLayout({ children }: PropsWithChildren) {
diff --git a/src/app/[locale]/(marketing)/blog/(blog)/layout.tsx b/src/app/[locale]/(marketing)/blog/(blog)/layout.tsx
index 6def31a..8997fe5 100644
--- a/src/app/[locale]/(marketing)/blog/(blog)/layout.tsx
+++ b/src/app/[locale]/(marketing)/blog/(blog)/layout.tsx
@@ -1,5 +1,5 @@
 import { BlogCategoryFilter } from '@/components/blog/blog-category-filter';
-import Container from '@/components/container';
+import Container from '@/components/shared/container';
 import { HeaderSection } from '@/components/shared/header-section';
 import { PropsWithChildren } from 'react';
 import { allCategories } from 'content-collections';
diff --git a/src/app/[locale]/(marketing)/blog/[...slug]/layout.tsx b/src/app/[locale]/(marketing)/blog/[...slug]/layout.tsx
index 42d4a76..2951ba5 100644
--- a/src/app/[locale]/(marketing)/blog/[...slug]/layout.tsx
+++ b/src/app/[locale]/(marketing)/blog/[...slug]/layout.tsx
@@ -1,4 +1,4 @@
-import Container from '@/components/container';
+import Container from '@/components/shared/container';
 import { PropsWithChildren } from 'react';
 
 export default function BlogPostLayout({ children }: PropsWithChildren) {
diff --git a/src/app/[locale]/(marketing)/pricing/page.tsx b/src/app/[locale]/(marketing)/pricing/page.tsx
index 4a0493b..1e48ed4 100644
--- a/src/app/[locale]/(marketing)/pricing/page.tsx
+++ b/src/app/[locale]/(marketing)/pricing/page.tsx
@@ -1,4 +1,4 @@
-import Container from '@/components/container';
+import Container from '@/components/shared/container';
 import { PricingTable } from '@/components/payment/pricing-table';
 import { HeaderSection } from '@/components/shared/header-section';
 import { constructMetadata } from '@/lib/metadata';
diff --git a/src/app/[locale]/docs/layout.tsx b/src/app/[locale]/docs/layout.tsx
index a9fd1c4..84ac005 100644
--- a/src/app/[locale]/docs/layout.tsx
+++ b/src/app/[locale]/docs/layout.tsx
@@ -1,6 +1,6 @@
 import { XTwitterIcon } from '@/components/icons/x';
 import { ModeSwitcher } from '@/components/layout/mode-switcher';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { websiteConfig } from '@/config';
 import { LOCALE_LIST } from '@/i18n/routing';
 import { docsI18nConfig } from '@/lib/docs/i18n';
diff --git a/src/app/[locale]/not-found.tsx b/src/app/[locale]/not-found.tsx
index cbe25ac..499629a 100644
--- a/src/app/[locale]/not-found.tsx
+++ b/src/app/[locale]/not-found.tsx
@@ -1,4 +1,4 @@
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Button } from '@/components/ui/button';
 import { LocaleLink } from '@/i18n/navigation';
 import { useTranslations } from 'next-intl';
diff --git a/src/app/[locale]/preview/features/nine/page.tsx b/src/app/[locale]/preview/features/nine/page.tsx
index 17d33da..738406b 100644
--- a/src/app/[locale]/preview/features/nine/page.tsx
+++ b/src/app/[locale]/preview/features/nine/page.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Activity, Map as MapIcon, MessageCircle } from 'lucide-react';
 import DottedMap from 'dotted-map';
 import { Area, AreaChart, CartesianGrid } from 'recharts';
diff --git a/src/app/[locale]/preview/footer/five/page.tsx b/src/app/[locale]/preview/footer/five/page.tsx
index a75e6e7..323fd7c 100644
--- a/src/app/[locale]/preview/footer/five/page.tsx
+++ b/src/app/[locale]/preview/footer/five/page.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 
 const enterpriseLinks = [
   { href: '#', label: 'About' },
diff --git a/src/app/[locale]/preview/footer/one/page.tsx b/src/app/[locale]/preview/footer/one/page.tsx
index 2b5a86f..d6337dc 100644
--- a/src/app/[locale]/preview/footer/one/page.tsx
+++ b/src/app/[locale]/preview/footer/one/page.tsx
@@ -1,4 +1,4 @@
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import Link from 'next/link';
 
 const links = [
diff --git a/src/app/[locale]/preview/footer/three/page.tsx b/src/app/[locale]/preview/footer/three/page.tsx
index 35457bb..cbaaafd 100644
--- a/src/app/[locale]/preview/footer/three/page.tsx
+++ b/src/app/[locale]/preview/footer/three/page.tsx
@@ -1,4 +1,4 @@
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
diff --git a/src/app/[locale]/preview/footer/two/page.tsx b/src/app/[locale]/preview/footer/two/page.tsx
index dfff60c..ff41e48 100644
--- a/src/app/[locale]/preview/footer/two/page.tsx
+++ b/src/app/[locale]/preview/footer/two/page.tsx
@@ -1,4 +1,4 @@
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import Link from 'next/link';
 
 const links = [
diff --git a/src/app/[locale]/preview/hero-section/eight/page.tsx b/src/app/[locale]/preview/hero-section/eight/page.tsx
index edb4352..b741368 100644
--- a/src/app/[locale]/preview/hero-section/eight/page.tsx
+++ b/src/app/[locale]/preview/hero-section/eight/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
 import Link from 'next/link';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { ArrowRight, Menu, Rocket, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import Image from 'next/image';
diff --git a/src/app/[locale]/preview/hero-section/nine/page.tsx b/src/app/[locale]/preview/hero-section/nine/page.tsx
index 5705b20..87b5113 100644
--- a/src/app/[locale]/preview/hero-section/nine/page.tsx
+++ b/src/app/[locale]/preview/hero-section/nine/page.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import Link from 'next/link';
 import { useState } from 'react';
 import { Button } from '@/components/ui/button';
diff --git a/src/app/[locale]/preview/hero-section/seven/page.tsx b/src/app/[locale]/preview/hero-section/seven/page.tsx
index 834e286..df0b08b 100644
--- a/src/app/[locale]/preview/hero-section/seven/page.tsx
+++ b/src/app/[locale]/preview/hero-section/seven/page.tsx
@@ -8,7 +8,7 @@ import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import 'swiper/css/effect-coverflow';
 import Link from 'next/link';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { ArrowRight, Menu, Rocket, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 
diff --git a/src/app/[locale]/preview/hero-section/six/page.tsx b/src/app/[locale]/preview/hero-section/six/page.tsx
index 378e6dd..34e68b1 100644
--- a/src/app/[locale]/preview/hero-section/six/page.tsx
+++ b/src/app/[locale]/preview/hero-section/six/page.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Button } from '@/components/ui/button';
 import { ArrowRight, Mail, Menu, SendHorizonal, X } from 'lucide-react';
 import Image from 'next/image';
diff --git a/src/app/[locale]/preview/login/one/page.tsx b/src/app/[locale]/preview/login/one/page.tsx
index e09eb45..99dfbda 100644
--- a/src/app/[locale]/preview/login/one/page.tsx
+++ b/src/app/[locale]/preview/login/one/page.tsx
@@ -1,4 +1,4 @@
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
diff --git a/src/app/[locale]/preview/login/three/page.tsx b/src/app/[locale]/preview/login/three/page.tsx
index 7efe4c4..98b36b2 100644
--- a/src/app/[locale]/preview/login/three/page.tsx
+++ b/src/app/[locale]/preview/login/three/page.tsx
@@ -1,4 +1,4 @@
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
diff --git a/src/app/[locale]/preview/login/two/page.tsx b/src/app/[locale]/preview/login/two/page.tsx
index f12ac68..b44e6ea 100644
--- a/src/app/[locale]/preview/login/two/page.tsx
+++ b/src/app/[locale]/preview/login/two/page.tsx
@@ -1,4 +1,4 @@
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
diff --git a/src/app/[locale]/preview/sign-up/one/page.tsx b/src/app/[locale]/preview/sign-up/one/page.tsx
index dc8d7ff..c4329c7 100644
--- a/src/app/[locale]/preview/sign-up/one/page.tsx
+++ b/src/app/[locale]/preview/sign-up/one/page.tsx
@@ -1,4 +1,4 @@
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
diff --git a/src/app/[locale]/preview/sign-up/three/page.tsx b/src/app/[locale]/preview/sign-up/three/page.tsx
index e9fe751..4324046 100644
--- a/src/app/[locale]/preview/sign-up/three/page.tsx
+++ b/src/app/[locale]/preview/sign-up/three/page.tsx
@@ -1,4 +1,4 @@
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
diff --git a/src/app/[locale]/preview/sign-up/two/page.tsx b/src/app/[locale]/preview/sign-up/two/page.tsx
index 28acf28..a43cf8d 100644
--- a/src/app/[locale]/preview/sign-up/two/page.tsx
+++ b/src/app/[locale]/preview/sign-up/two/page.tsx
@@ -1,4 +1,4 @@
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
diff --git a/src/components/auth/auth-card.tsx b/src/components/auth/auth-card.tsx
index a038c00..fb24b36 100644
--- a/src/components/auth/auth-card.tsx
+++ b/src/components/auth/auth-card.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { BottomLink } from '@/components/auth/bottom-link';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import {
   Card,
   CardContent,
diff --git a/src/components/blocks/hero5-header.tsx b/src/components/blocks/hero5-header.tsx
index 8d43259..665b3f4 100644
--- a/src/components/blocks/hero5-header.tsx
+++ b/src/components/blocks/hero5-header.tsx
@@ -1,6 +1,6 @@
 'use client';
 import Link from 'next/link';
-import { Logo } from '../logo';
+import { Logo } from '../shared/logo';
 import { Menu, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import React from 'react';
diff --git a/src/components/blocks/hero6-header.tsx b/src/components/blocks/hero6-header.tsx
index 22322d9..5dfaef8 100644
--- a/src/components/blocks/hero6-header.tsx
+++ b/src/components/blocks/hero6-header.tsx
@@ -1,6 +1,6 @@
 'use client';
 import Link from 'next/link';
-import { Logo } from '../logo';
+import { Logo } from '../shared/logo';
 import { Menu, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import React from 'react';
diff --git a/src/components/blocks/hero8-header.tsx b/src/components/blocks/hero8-header.tsx
index 1f931ea..24156bd 100644
--- a/src/components/blocks/hero8-header.tsx
+++ b/src/components/blocks/hero8-header.tsx
@@ -1,6 +1,6 @@
 'use client';
 import Link from 'next/link';
-import { Logo } from '../logo';
+import { Logo } from '../shared/logo';
 import { Menu, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import React from 'react';
diff --git a/src/components/blocks/hero9-header.tsx b/src/components/blocks/hero9-header.tsx
index 329a8b5..c894bed 100644
--- a/src/components/blocks/hero9-header.tsx
+++ b/src/components/blocks/hero9-header.tsx
@@ -1,6 +1,6 @@
 'use client';
 import Link from 'next/link';
-import { Logo } from '../logo';
+import { Logo } from '../shared/logo';
 import { Menu, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import React from 'react';
diff --git a/src/components/blog/blog-category-filter.tsx b/src/components/blog/blog-category-filter.tsx
index e7ed099..e3bd066 100644
--- a/src/components/blog/blog-category-filter.tsx
+++ b/src/components/blog/blog-category-filter.tsx
@@ -1,4 +1,4 @@
-import Container from '@/components/container';
+import Container from '@/components/shared/container';
 import { Category } from 'content-collections';
 import { BlogCategoryListDesktop } from './blog-category-list-desktop';
 import { BlogCategoryListMobile } from './blog-category-list-mobile';
diff --git a/src/components/dashboard/dashboard-sidebar.tsx b/src/components/dashboard/dashboard-sidebar.tsx
index 5a59813..d4b75d6 100644
--- a/src/components/dashboard/dashboard-sidebar.tsx
+++ b/src/components/dashboard/dashboard-sidebar.tsx
@@ -16,7 +16,7 @@ import { useCurrentUser } from '@/hooks/use-current-user';
 import { LocaleLink } from '@/i18n/navigation';
 import { useTranslations } from 'next-intl';
 import * as React from 'react';
-import { Logo } from '../logo';
+import { Logo } from '../shared/logo';
 import { SidebarUpgradeCard } from './sidebar-upgrade-card';
 
 export function DashboardSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
diff --git a/src/components/error/error.tsx b/src/components/error/error.tsx
index b0e6575..76fb4ee 100644
--- a/src/components/error/error.tsx
+++ b/src/components/error/error.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Button } from '@/components/ui/button';
 import { useLocaleRouter } from '@/i18n/navigation';
 import { Loader2Icon } from 'lucide-react';
diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
index a90e9e2..8e4ee0b 100644
--- a/src/components/layout/footer.tsx
+++ b/src/components/layout/footer.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import Container from '@/components/container';
+import Container from '@/components/shared/container';
 import { ModeSwitcherHorizontal } from '@/components/layout/mode-switcher-horizontal';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import BuiltWithButton from '@/components/shared/built-with-button';
 import { getFooterLinks, getSocialLinks } from '@/config';
 import { LocaleLink } from '@/i18n/navigation';
diff --git a/src/components/layout/navbar-mobile.tsx b/src/components/layout/navbar-mobile.tsx
index 9f33181..f5acfe7 100644
--- a/src/components/layout/navbar-mobile.tsx
+++ b/src/components/layout/navbar-mobile.tsx
@@ -2,7 +2,7 @@
 
 import LocaleSelector from '@/components/layout/locale-selector';
 import { ModeSwitcherHorizontal } from '@/components/layout/mode-switcher-horizontal';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Button, buttonVariants } from '@/components/ui/button';
 import {
   Collapsible,
diff --git a/src/components/layout/navbar.tsx b/src/components/layout/navbar.tsx
index c9400af..37d2d4a 100644
--- a/src/components/layout/navbar.tsx
+++ b/src/components/layout/navbar.tsx
@@ -1,11 +1,11 @@
 'use client';
 
 import { LoginWrapper } from '@/components/auth/login-wrapper';
-import Container from '@/components/container';
+import Container from '@/components/shared/container';
 import { ModeSwitcher } from '@/components/layout/mode-switcher';
 import { NavbarMobile } from '@/components/layout/navbar-mobile';
 import { UserButton } from '@/components/layout/user-button';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Button } from '@/components/ui/button';
 import {
   NavigationMenu,
diff --git a/src/components/logo.tsx b/src/components/logo.tsx
deleted file mode 100644
index a8b0042..0000000
--- a/src/components/logo.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { cn } from '@/lib/utils';
-import Image from 'next/image';
-
-export function Logo({ className }: { className?: string }) {
-  return (
-    <Image
-      src="/logo.png"
-      alt="Logo"
-      title="Logo"
-      width={96}
-      height={96}
-      className={cn('size-8 rounded-md', className)}
-    />
-  );
-}
diff --git a/src/components/sections/features/features-9.tsx b/src/components/sections/features/features-9.tsx
index 6a53e98..3cf274a 100644
--- a/src/components/sections/features/features-9.tsx
+++ b/src/components/sections/features/features-9.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Activity, Map as MapIcon, MessageCircle } from 'lucide-react';
 import DottedMap from 'dotted-map';
 import { Area, AreaChart, CartesianGrid } from 'recharts';
diff --git a/src/components/sections/hero/hero-section-2.tsx b/src/components/sections/hero/hero-section-2.tsx
index 85a7c0e..71b1ce7 100644
--- a/src/components/sections/hero/hero-section-2.tsx
+++ b/src/components/sections/hero/hero-section-2.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { Button } from '@/components/ui/button';
 import { ArrowRight, Mail, Menu, SendHorizonal, X } from 'lucide-react';
 import Image from 'next/image';
diff --git a/src/components/sections/hero/hero-section-3.tsx b/src/components/sections/hero/hero-section-3.tsx
index 53aed8c..5bc0e64 100644
--- a/src/components/sections/hero/hero-section-3.tsx
+++ b/src/components/sections/hero/hero-section-3.tsx
@@ -8,7 +8,7 @@ import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import 'swiper/css/effect-coverflow';
 import Link from 'next/link';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import { ArrowRight, Menu, Rocket, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 
diff --git a/src/components/sections/hero/hero-section.tsx b/src/components/sections/hero/hero-section.tsx
index 421881d..d114d0e 100644
--- a/src/components/sections/hero/hero-section.tsx
+++ b/src/components/sections/hero/hero-section.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { Logo } from '@/components/logo';
+import { Logo } from '@/components/shared/logo';
 import Link from 'next/link';
 import { useState } from 'react';
 import { Button } from '@/components/ui/button';
diff --git a/src/components/settings/billing/billing-card.tsx b/src/components/settings/billing/billing-card.tsx
index ccf530b..d781219 100644
--- a/src/components/settings/billing/billing-card.tsx
+++ b/src/components/settings/billing/billing-card.tsx
@@ -11,7 +11,7 @@ import { LocaleLink } from '@/i18n/navigation';
 import { formatDate, formatPrice } from '@/lib/formatter';
 import { getAllPlans } from '@/payment';
 import { PlanIntervals, Subscription } from '@/payment/types';
-import { RefreshCwIcon, RocketIcon } from 'lucide-react';
+import { RefreshCwIcon } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useMemo, useState } from 'react';
 
diff --git a/src/components/shared/built-with-button.tsx b/src/components/shared/built-with-button.tsx
index d90696e..519daee 100644
--- a/src/components/shared/built-with-button.tsx
+++ b/src/components/shared/built-with-button.tsx
@@ -1,7 +1,7 @@
 import { buttonVariants } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import Link from 'next/link';
-import { MkSaaSLogo } from '@/components/logo-mksaas';
+import { MkSaaSLogo } from '@/components/shared/logo-mksaas';
 
 export default function BuiltWithButton() {
   return (
diff --git a/src/components/container.tsx b/src/components/shared/container.tsx
similarity index 100%
rename from src/components/container.tsx
rename to src/components/shared/container.tsx
diff --git a/src/components/logo-mksaas.tsx b/src/components/shared/logo-mksaas.tsx
similarity index 100%
rename from src/components/logo-mksaas.tsx
rename to src/components/shared/logo-mksaas.tsx
diff --git a/src/components/shared/logo.tsx b/src/components/shared/logo.tsx
new file mode 100644
index 0000000..fbad0f2
--- /dev/null
+++ b/src/components/shared/logo.tsx
@@ -0,0 +1,22 @@
+import { websiteConfig } from '@/config';
+import { cn } from '@/lib/utils';
+import { useTheme } from 'next-themes';
+import Image from 'next/image';
+
+export function Logo({ className }: { className?: string }) {
+  const theme = useTheme();
+  const logoLight = websiteConfig.logo.light ?? '/logo.png';
+  const logoDark = websiteConfig.logo.dark ?? '/logo-dark.png';
+  const logo = theme.theme === 'dark' ? logoDark : logoLight;
+
+  return (
+    <Image
+      src={logo}
+      alt="Logo"
+      title="Logo"
+      width={96}
+      height={96}
+      className={cn('size-8 rounded-md', className)}
+    />
+  );
+}
diff --git a/src/components/tailwind-indicator.tsx b/src/components/shared/tailwind-indicator.tsx
similarity index 100%
rename from src/components/tailwind-indicator.tsx
rename to src/components/shared/tailwind-indicator.tsx
diff --git a/src/config.tsx b/src/config.tsx
index 5e1d089..142a548 100644
--- a/src/config.tsx
+++ b/src/config.tsx
@@ -54,6 +54,10 @@ export const websiteConfig: WebsiteConfig = {
   metadata: {
     image: '/og.png',
   },
+  logo: {
+    light: '/logo.png',
+    dark: '/logo-dark.png',
+  },
   mail: {
     from: 'support@mksaas.com',
     to: 'support@mksaas.com',
@@ -64,9 +68,9 @@ export const websiteConfig: WebsiteConfig = {
   },
   social: {
     github: 'https://github.com/MkSaaSHQ',
-    twitter: 'https://x.com/MkSaaSHQ',
+    twitter: 'https://x.com/mksaascom',
+    youtube: 'https://www.youtube.com/@MkSaaS',
     blueSky: 'https://bsky.app/profile/mksaas.com',
-    youtube: 'https://www.youtube.com/@MkSaaSHQ',
     linkedin: 'https://linkedin.com/company/mksaas',
     facebook: 'https://facebook.com/mksaas',
     instagram: 'https://instagram.com/mksaas',
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 646d8f1..ceed716 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -8,6 +8,10 @@ export type WebsiteConfig = {
   metadata: {
     image?: string;
   };
+  logo: {
+    light?: string;
+    dark?: string;
+  };
   mail: {
     from?: string;
     to?: string;