From cfcca6c85f1b5266b0b387c21ca2a17a2450c1c9 Mon Sep 17 00:00:00 2001
From: ONEONUORA <monweebube44@gmail.com>
Date: Mon, 21 Jul 2025 19:39:30 -0700
Subject: [PATCH 1/3] feat: add admin dashboard, SEO and refactor the Codebase

---
 src/app/dashboard/admin/analytics/page.tsx    |  18 +
 .../admin/community-and-events/page.tsx       |  18 +
 .../admin/components/admin-sidenavbar.tsx     |  84 ++
 .../admin/content-management/page.tsx         |  18 +
 src/app/dashboard/admin/layout.tsx            |  26 +
 .../dashboard/admin/notifications/page.tsx    |  18 +
 src/app/dashboard/admin/page.tsx              |  18 +
 src/app/dashboard/admin/transactions/page.tsx |  18 +
 .../dashboard/admin/user-management/page.tsx  |  18 +
 .../readers/components/book-modal.tsx         | 248 +++++
 .../readers}/components/book-reader-modal.tsx |   0
 .../readers/components/header-reader.tsx      |  50 +
 .../readers/components/reader-side-navbar.tsx | 108 +++
 .../discussions-and-clubs/ClubCard.tsx        |   0
 .../discussions-and-clubs/[id]/page.tsx       |   0
 .../components/AddGuest.tsx                   |   0
 .../components/ClubDetails.tsx                |   0
 .../components/ClubDiscussion.tsx             |   0
 .../components/ClubToolBar.tsx                |   0
 .../components/CreateEvent.tsx                |   0
 .../components/Modal.tsx                      |   0
 .../components/ScheduleEvent.tsx              |   0
 .../components/StartEvent.tsx                 |   0
 .../components/SuccessModal.tsx               |   0
 .../readers}/discussions-and-clubs/page.tsx   |   0
 src/app/dashboard/readers/layout.tsx          |  26 +
 src/app/dashboard/readers/library/page.tsx    | 898 ++++++++++++++++++
 .../notifications/notification-detail.tsx     |  66 ++
 .../readers}/notifications/page.tsx           |   0
 src/app/dashboard/readers/page.tsx            |  18 +
 .../readers}/profile/following/page.tsx       |   0
 src/app/dashboard/readers/profile/layout.tsx  | 121 +++
 src/app/dashboard/readers/profile/page.tsx    | 264 +++++
 .../readers}/profile/preferences/page.tsx     |   0
 .../readers}/profile/privacy/page.tsx         |   0
 .../readers}/profile/sign-out/page.tsx        |   0
 .../dashboard/readers/reading-stats/page.tsx  |  22 +
 .../readers}/stats-and-achievements/page.tsx  |   0
 .../dashboard/readers/transactions/page.tsx   | 340 +++++++
 .../transactions/transaction-details.tsx      | 381 ++++++++
 src/app/dashboard/readers/wishlist/page.tsx   | 201 ++++
 src/app/dashboard/writers/analytics/page.tsx  |  32 +
 .../components/notification-detail.tsx        |   0
 .../discussions-and-clubs/ClubCard.tsx        |  99 ++
 .../discussions-and-clubs/[id]/page.tsx       | 191 ++++
 .../components/AddGuest.tsx                   |  50 +
 .../components/ClubDetails.tsx                | 129 +++
 .../components/ClubDiscussion.tsx             | 209 ++++
 .../components/ClubToolBar.tsx                |  53 ++
 .../components/CreateEvent.tsx                | 116 +++
 .../components/Modal.tsx                      |  61 ++
 .../components/ScheduleEvent.tsx              | 169 ++++
 .../components/StartEvent.tsx                 |  44 +
 .../components/SuccessModal.tsx               |  53 ++
 .../writers/discussions-and-clubs/page.tsx    | 171 ++++
 src/app/dashboard/writers/earnings/page.tsx   | 112 +++
 .../writers}/feedback/page.tsx                |   0
 .../writers}/layout.tsx                       |   0
 .../manage-content/BookContentStep.tsx        | 157 +++
 .../manage-content/BookCreationFlow.tsx       |   0
 .../manage-content/BookDetailsStep.tsx        | 323 +++++++
 .../ContributorDetailsModal.tsx               |  76 ++
 .../manage-content/ContributorTypeModal.tsx   |   0
 .../writers/manage-content/Manage-content.tsx | 520 ++++++++++
 .../writers/manage-content/PreviewModal.tsx   | 170 ++++
 .../writers/manage-content/PricingStep.tsx    | 209 ++++
 .../manage-content/ProgressStepper.tsx        |   0
 .../manage-content/PublishTypeModal.tsx       | 108 +++
 .../manage-content/PublishingNft/Pricing.tsx  | 139 +++
 .../PublishingNft/bookContent.tsx             | 206 ++++
 .../PublishingNft/bookDetail.tsx              | 130 +++
 .../manage-content/PublishingNft/genre.tsx    |   0
 .../manage-content/PublishingNft/page.tsx     |   0
 .../writers}/manage-content/StepIndicator.tsx |   0
 .../writers/manage-content/SuccessModal.tsx   |  48 +
 .../manage-content/book-preview-modal.tsx     | 206 ++++
 .../writers}/manage-content/example.tsx       |   0
 .../writers}/manage-content/loading.tsx       |   0
 .../writers}/manage-content/page.tsx          |   0
 .../notifications/notification-detail.tsx     |  66 ++
 .../writers}/notifications/page.tsx           |   0
 .../writers}/page.tsx                         |   0
 .../profile/component/ProfileForm.tsx         |   0
 .../writers}/profile/component/Social.tsx     |   0
 .../profile/component/UpdatePasswordForm.tsx  |   0
 .../writers}/profile/component/genre.tsx      |   0
 .../profile/component/profileHeader.tsx       |   0
 .../profile/component/profilesidebar.tsx      |  63 ++
 .../writers}/profile/genre/page.tsx           |   0
 .../writers}/profile/layout.tsx               |   0
 .../writers}/profile/page.tsx                 |   0
 .../writers}/profile/password/page.tsx        |   0
 .../writers}/profile/social/page.tsx          |   0
 .../components/book-modal.tsx                 |   2 +-
 .../readers/components/book-reader-modal.tsx  | 267 ++++++
 .../components/header-reader.tsx              |   0
 .../components/reader-side-navbar.tsx         |   0
 .../discussions-and-clubs/ClubCard.tsx        |  99 ++
 .../discussions-and-clubs/[id]/page.tsx       | 191 ++++
 .../components/AddGuest.tsx                   |  50 +
 .../components/ClubDetails.tsx                | 129 +++
 .../components/ClubDiscussion.tsx             | 209 ++++
 .../components/ClubToolBar.tsx                |  53 ++
 .../components/CreateEvent.tsx                | 116 +++
 .../components/Modal.tsx                      |  61 ++
 .../components/ScheduleEvent.tsx              | 169 ++++
 .../components/StartEvent.tsx                 |  44 +
 .../components/SuccessModal.tsx               |  53 ++
 .../readers/discussions-and-clubs/page.tsx    | 171 ++++
 .../{reader-dashboard => readers}/layout.tsx  |   0
 .../library/page.tsx                          |   0
 .../notifications/notification-detail.tsx     |   0
 src/app/readers/notifications/page.tsx        | 193 ++++
 .../{reader-dashboard => readers}/page.tsx    |   0
 src/app/readers/profile/following/page.tsx    | 138 +++
 .../profile/layout.tsx                        |   0
 .../profile/page.tsx                          |   0
 src/app/readers/profile/preferences/page.tsx  | 210 ++++
 src/app/readers/profile/privacy/page.tsx      |  28 +
 src/app/readers/profile/sign-out/page.tsx     |  28 +
 .../readers/stats-and-achievements/page.tsx   | 151 +++
 .../transactions/page.tsx                     |   0
 .../transactions/transaction-details.tsx      |   0
 .../wishlist/page.tsx                         |   0
 src/app/waiting-room/page.tsx                 |   2 +-
 .../analytics/page.tsx                        |   0
 .../components/notification-detail.tsx        |  83 ++
 .../earnings/page.tsx                         |  10 +-
 src/app/writers/feedback/page.tsx             |  12 +
 src/app/writers/layout.tsx                    |  18 +
 .../manage-content/BookContentStep.tsx        |   0
 .../manage-content/BookCreationFlow.tsx       | 110 +++
 .../manage-content/BookDetailsStep.tsx        |   0
 .../ContributorDetailsModal.tsx               |   0
 .../manage-content/ContributorTypeModal.tsx   |  53 ++
 .../manage-content/Manage-content.tsx         |   0
 .../manage-content/PreviewModal.tsx           |   0
 .../manage-content/PricingStep.tsx            |   0
 .../manage-content/ProgressStepper.tsx        |  59 ++
 .../manage-content/PublishTypeModal.tsx       |   0
 .../manage-content/PublishingNft/Pricing.tsx  |   0
 .../PublishingNft/bookContent.tsx             |   0
 .../PublishingNft/bookDetail.tsx              |   0
 .../manage-content/PublishingNft/genre.tsx    |  24 +
 .../manage-content/PublishingNft/page.tsx     | 118 +++
 .../writers/manage-content/StepIndicator.tsx  | 121 +++
 .../manage-content/SuccessModal.tsx           |   0
 .../manage-content/book-preview-modal.tsx     |   0
 src/app/writers/manage-content/example.tsx    |  17 +
 src/app/writers/manage-content/loading.tsx    |   3 +
 src/app/writers/manage-content/page.tsx       |  16 +
 .../notifications/notification-detail.tsx     |   0
 src/app/writers/notifications/page.tsx        | 192 ++++
 src/app/writers/page.tsx                      |  67 ++
 .../writers/profile/component/ProfileForm.tsx | 203 ++++
 src/app/writers/profile/component/Social.tsx  | 116 +++
 .../profile/component/UpdatePasswordForm.tsx  | 111 +++
 src/app/writers/profile/component/genre.tsx   |  74 ++
 .../profile/component/profileHeader.tsx       |  41 +
 .../profile/component/profilesidebar.tsx      |   0
 src/app/writers/profile/genre/page.tsx        |  12 +
 src/app/writers/profile/layout.tsx            |  20 +
 src/app/writers/profile/page.tsx              |  15 +
 src/app/writers/profile/password/page.tsx     |  11 +
 src/app/writers/profile/social/page.tsx       |  13 +
 .../Chart.tsx                                 |   0
 .../EarningSummary.tsx                        |   0
 .../FilterBar.tsx                             |   0
 .../LinkWallet.tsx                            |   0
 .../LoanRow.tsx                               |   0
 .../MobileLoanRow.tsx                         |   0
 .../MobileTable.tsx                           |   0
 .../RequestPaymentModal.tsx                   |   0
 .../RevenueBreakdown.tsx                      |   0
 .../TransactionHistory.tsx                    |   0
 .../TransactionModalButton.tsx                |   0
 .../TransactionTable.tsx                      |   0
 src/components/dashboard/sidebar.tsx          |  20 +-
 178 files changed, 10775 insertions(+), 17 deletions(-)
 create mode 100644 src/app/dashboard/admin/analytics/page.tsx
 create mode 100644 src/app/dashboard/admin/community-and-events/page.tsx
 create mode 100644 src/app/dashboard/admin/components/admin-sidenavbar.tsx
 create mode 100644 src/app/dashboard/admin/content-management/page.tsx
 create mode 100644 src/app/dashboard/admin/layout.tsx
 create mode 100644 src/app/dashboard/admin/notifications/page.tsx
 create mode 100644 src/app/dashboard/admin/page.tsx
 create mode 100644 src/app/dashboard/admin/transactions/page.tsx
 create mode 100644 src/app/dashboard/admin/user-management/page.tsx
 create mode 100644 src/app/dashboard/readers/components/book-modal.tsx
 rename src/app/{reader-dashboard => dashboard/readers}/components/book-reader-modal.tsx (100%)
 create mode 100644 src/app/dashboard/readers/components/header-reader.tsx
 create mode 100644 src/app/dashboard/readers/components/reader-side-navbar.tsx
 rename src/app/{reader-dashboard => dashboard/readers}/discussions-and-clubs/ClubCard.tsx (100%)
 rename src/app/{reader-dashboard => dashboard/readers}/discussions-and-clubs/[id]/page.tsx (100%)
 rename src/app/{reader-dashboard => dashboard/readers}/discussions-and-clubs/components/AddGuest.tsx (100%)
 rename src/app/{reader-dashboard => dashboard/readers}/discussions-and-clubs/components/ClubDetails.tsx (100%)
 rename src/app/{reader-dashboard => dashboard/readers}/discussions-and-clubs/components/ClubDiscussion.tsx (100%)
 rename src/app/{reader-dashboard => dashboard/readers}/discussions-and-clubs/components/ClubToolBar.tsx (100%)
 rename src/app/{reader-dashboard => dashboard/readers}/discussions-and-clubs/components/CreateEvent.tsx (100%)
 rename src/app/{reader-dashboard => dashboard/readers}/discussions-and-clubs/components/Modal.tsx (100%)
 rename src/app/{reader-dashboard => dashboard/readers}/discussions-and-clubs/components/ScheduleEvent.tsx (100%)
 rename src/app/{reader-dashboard => dashboard/readers}/discussions-and-clubs/components/StartEvent.tsx (100%)
 rename src/app/{reader-dashboard => dashboard/readers}/discussions-and-clubs/components/SuccessModal.tsx (100%)
 rename src/app/{reader-dashboard => dashboard/readers}/discussions-and-clubs/page.tsx (100%)
 create mode 100644 src/app/dashboard/readers/layout.tsx
 create mode 100644 src/app/dashboard/readers/library/page.tsx
 create mode 100644 src/app/dashboard/readers/notifications/notification-detail.tsx
 rename src/app/{reader-dashboard => dashboard/readers}/notifications/page.tsx (100%)
 create mode 100644 src/app/dashboard/readers/page.tsx
 rename src/app/{reader-dashboard => dashboard/readers}/profile/following/page.tsx (100%)
 create mode 100644 src/app/dashboard/readers/profile/layout.tsx
 create mode 100644 src/app/dashboard/readers/profile/page.tsx
 rename src/app/{reader-dashboard => dashboard/readers}/profile/preferences/page.tsx (100%)
 rename src/app/{reader-dashboard => dashboard/readers}/profile/privacy/page.tsx (100%)
 rename src/app/{reader-dashboard => dashboard/readers}/profile/sign-out/page.tsx (100%)
 create mode 100644 src/app/dashboard/readers/reading-stats/page.tsx
 rename src/app/{reader-dashboard => dashboard/readers}/stats-and-achievements/page.tsx (100%)
 create mode 100644 src/app/dashboard/readers/transactions/page.tsx
 create mode 100644 src/app/dashboard/readers/transactions/transaction-details.tsx
 create mode 100644 src/app/dashboard/readers/wishlist/page.tsx
 create mode 100644 src/app/dashboard/writers/analytics/page.tsx
 rename src/app/{writer-dashboard => dashboard/writers}/components/notification-detail.tsx (100%)
 create mode 100644 src/app/dashboard/writers/discussions-and-clubs/ClubCard.tsx
 create mode 100644 src/app/dashboard/writers/discussions-and-clubs/[id]/page.tsx
 create mode 100644 src/app/dashboard/writers/discussions-and-clubs/components/AddGuest.tsx
 create mode 100644 src/app/dashboard/writers/discussions-and-clubs/components/ClubDetails.tsx
 create mode 100644 src/app/dashboard/writers/discussions-and-clubs/components/ClubDiscussion.tsx
 create mode 100644 src/app/dashboard/writers/discussions-and-clubs/components/ClubToolBar.tsx
 create mode 100644 src/app/dashboard/writers/discussions-and-clubs/components/CreateEvent.tsx
 create mode 100644 src/app/dashboard/writers/discussions-and-clubs/components/Modal.tsx
 create mode 100644 src/app/dashboard/writers/discussions-and-clubs/components/ScheduleEvent.tsx
 create mode 100644 src/app/dashboard/writers/discussions-and-clubs/components/StartEvent.tsx
 create mode 100644 src/app/dashboard/writers/discussions-and-clubs/components/SuccessModal.tsx
 create mode 100644 src/app/dashboard/writers/discussions-and-clubs/page.tsx
 create mode 100644 src/app/dashboard/writers/earnings/page.tsx
 rename src/app/{writer-dashboard => dashboard/writers}/feedback/page.tsx (100%)
 rename src/app/{writer-dashboard => dashboard/writers}/layout.tsx (100%)
 create mode 100644 src/app/dashboard/writers/manage-content/BookContentStep.tsx
 rename src/app/{writer-dashboard => dashboard/writers}/manage-content/BookCreationFlow.tsx (100%)
 create mode 100644 src/app/dashboard/writers/manage-content/BookDetailsStep.tsx
 create mode 100644 src/app/dashboard/writers/manage-content/ContributorDetailsModal.tsx
 rename src/app/{writer-dashboard => dashboard/writers}/manage-content/ContributorTypeModal.tsx (100%)
 create mode 100644 src/app/dashboard/writers/manage-content/Manage-content.tsx
 create mode 100644 src/app/dashboard/writers/manage-content/PreviewModal.tsx
 create mode 100644 src/app/dashboard/writers/manage-content/PricingStep.tsx
 rename src/app/{writer-dashboard => dashboard/writers}/manage-content/ProgressStepper.tsx (100%)
 create mode 100644 src/app/dashboard/writers/manage-content/PublishTypeModal.tsx
 create mode 100644 src/app/dashboard/writers/manage-content/PublishingNft/Pricing.tsx
 create mode 100644 src/app/dashboard/writers/manage-content/PublishingNft/bookContent.tsx
 create mode 100644 src/app/dashboard/writers/manage-content/PublishingNft/bookDetail.tsx
 rename src/app/{writer-dashboard => dashboard/writers}/manage-content/PublishingNft/genre.tsx (100%)
 rename src/app/{writer-dashboard => dashboard/writers}/manage-content/PublishingNft/page.tsx (100%)
 rename src/app/{writer-dashboard => dashboard/writers}/manage-content/StepIndicator.tsx (100%)
 create mode 100644 src/app/dashboard/writers/manage-content/SuccessModal.tsx
 create mode 100644 src/app/dashboard/writers/manage-content/book-preview-modal.tsx
 rename src/app/{writer-dashboard => dashboard/writers}/manage-content/example.tsx (100%)
 rename src/app/{writer-dashboard => dashboard/writers}/manage-content/loading.tsx (100%)
 rename src/app/{writer-dashboard => dashboard/writers}/manage-content/page.tsx (100%)
 create mode 100644 src/app/dashboard/writers/notifications/notification-detail.tsx
 rename src/app/{writer-dashboard => dashboard/writers}/notifications/page.tsx (100%)
 rename src/app/{writer-dashboard => dashboard/writers}/page.tsx (100%)
 rename src/app/{writer-dashboard => dashboard/writers}/profile/component/ProfileForm.tsx (100%)
 rename src/app/{writer-dashboard => dashboard/writers}/profile/component/Social.tsx (100%)
 rename src/app/{writer-dashboard => dashboard/writers}/profile/component/UpdatePasswordForm.tsx (100%)
 rename src/app/{writer-dashboard => dashboard/writers}/profile/component/genre.tsx (100%)
 rename src/app/{writer-dashboard => dashboard/writers}/profile/component/profileHeader.tsx (100%)
 create mode 100644 src/app/dashboard/writers/profile/component/profilesidebar.tsx
 rename src/app/{writer-dashboard => dashboard/writers}/profile/genre/page.tsx (100%)
 rename src/app/{writer-dashboard => dashboard/writers}/profile/layout.tsx (100%)
 rename src/app/{writer-dashboard => dashboard/writers}/profile/page.tsx (100%)
 rename src/app/{writer-dashboard => dashboard/writers}/profile/password/page.tsx (100%)
 rename src/app/{writer-dashboard => dashboard/writers}/profile/social/page.tsx (100%)
 rename src/app/{reader-dashboard => readers}/components/book-modal.tsx (99%)
 create mode 100644 src/app/readers/components/book-reader-modal.tsx
 rename src/app/{reader-dashboard => readers}/components/header-reader.tsx (100%)
 rename src/app/{reader-dashboard => readers}/components/reader-side-navbar.tsx (100%)
 create mode 100644 src/app/readers/discussions-and-clubs/ClubCard.tsx
 create mode 100644 src/app/readers/discussions-and-clubs/[id]/page.tsx
 create mode 100644 src/app/readers/discussions-and-clubs/components/AddGuest.tsx
 create mode 100644 src/app/readers/discussions-and-clubs/components/ClubDetails.tsx
 create mode 100644 src/app/readers/discussions-and-clubs/components/ClubDiscussion.tsx
 create mode 100644 src/app/readers/discussions-and-clubs/components/ClubToolBar.tsx
 create mode 100644 src/app/readers/discussions-and-clubs/components/CreateEvent.tsx
 create mode 100644 src/app/readers/discussions-and-clubs/components/Modal.tsx
 create mode 100644 src/app/readers/discussions-and-clubs/components/ScheduleEvent.tsx
 create mode 100644 src/app/readers/discussions-and-clubs/components/StartEvent.tsx
 create mode 100644 src/app/readers/discussions-and-clubs/components/SuccessModal.tsx
 create mode 100644 src/app/readers/discussions-and-clubs/page.tsx
 rename src/app/{reader-dashboard => readers}/layout.tsx (100%)
 rename src/app/{reader-dashboard => readers}/library/page.tsx (100%)
 rename src/app/{reader-dashboard => readers}/notifications/notification-detail.tsx (100%)
 create mode 100644 src/app/readers/notifications/page.tsx
 rename src/app/{reader-dashboard => readers}/page.tsx (100%)
 create mode 100644 src/app/readers/profile/following/page.tsx
 rename src/app/{reader-dashboard => readers}/profile/layout.tsx (100%)
 rename src/app/{reader-dashboard => readers}/profile/page.tsx (100%)
 create mode 100644 src/app/readers/profile/preferences/page.tsx
 create mode 100644 src/app/readers/profile/privacy/page.tsx
 create mode 100644 src/app/readers/profile/sign-out/page.tsx
 create mode 100644 src/app/readers/stats-and-achievements/page.tsx
 rename src/app/{reader-dashboard => readers}/transactions/page.tsx (100%)
 rename src/app/{reader-dashboard => readers}/transactions/transaction-details.tsx (100%)
 rename src/app/{reader-dashboard => readers}/wishlist/page.tsx (100%)
 rename src/app/{writer-dashboard => writers}/analytics/page.tsx (100%)
 create mode 100644 src/app/writers/components/notification-detail.tsx
 rename src/app/{writer-dashboard => writers}/earnings/page.tsx (86%)
 create mode 100644 src/app/writers/feedback/page.tsx
 create mode 100644 src/app/writers/layout.tsx
 rename src/app/{writer-dashboard => writers}/manage-content/BookContentStep.tsx (100%)
 create mode 100644 src/app/writers/manage-content/BookCreationFlow.tsx
 rename src/app/{writer-dashboard => writers}/manage-content/BookDetailsStep.tsx (100%)
 rename src/app/{writer-dashboard => writers}/manage-content/ContributorDetailsModal.tsx (100%)
 create mode 100644 src/app/writers/manage-content/ContributorTypeModal.tsx
 rename src/app/{writer-dashboard => writers}/manage-content/Manage-content.tsx (100%)
 rename src/app/{writer-dashboard => writers}/manage-content/PreviewModal.tsx (100%)
 rename src/app/{writer-dashboard => writers}/manage-content/PricingStep.tsx (100%)
 create mode 100644 src/app/writers/manage-content/ProgressStepper.tsx
 rename src/app/{writer-dashboard => writers}/manage-content/PublishTypeModal.tsx (100%)
 rename src/app/{writer-dashboard => writers}/manage-content/PublishingNft/Pricing.tsx (100%)
 rename src/app/{writer-dashboard => writers}/manage-content/PublishingNft/bookContent.tsx (100%)
 rename src/app/{writer-dashboard => writers}/manage-content/PublishingNft/bookDetail.tsx (100%)
 create mode 100644 src/app/writers/manage-content/PublishingNft/genre.tsx
 create mode 100644 src/app/writers/manage-content/PublishingNft/page.tsx
 create mode 100644 src/app/writers/manage-content/StepIndicator.tsx
 rename src/app/{writer-dashboard => writers}/manage-content/SuccessModal.tsx (100%)
 rename src/app/{writer-dashboard => writers}/manage-content/book-preview-modal.tsx (100%)
 create mode 100644 src/app/writers/manage-content/example.tsx
 create mode 100644 src/app/writers/manage-content/loading.tsx
 create mode 100644 src/app/writers/manage-content/page.tsx
 rename src/app/{writer-dashboard => writers}/notifications/notification-detail.tsx (100%)
 create mode 100644 src/app/writers/notifications/page.tsx
 create mode 100644 src/app/writers/page.tsx
 create mode 100644 src/app/writers/profile/component/ProfileForm.tsx
 create mode 100644 src/app/writers/profile/component/Social.tsx
 create mode 100644 src/app/writers/profile/component/UpdatePasswordForm.tsx
 create mode 100644 src/app/writers/profile/component/genre.tsx
 create mode 100644 src/app/writers/profile/component/profileHeader.tsx
 rename src/app/{writer-dashboard => writers}/profile/component/profilesidebar.tsx (100%)
 create mode 100644 src/app/writers/profile/genre/page.tsx
 create mode 100644 src/app/writers/profile/layout.tsx
 create mode 100644 src/app/writers/profile/page.tsx
 create mode 100644 src/app/writers/profile/password/page.tsx
 create mode 100644 src/app/writers/profile/social/page.tsx
 rename src/components/{ dashboard-earnings => dashboard-earnings}/Chart.tsx (100%)
 rename src/components/{ dashboard-earnings => dashboard-earnings}/EarningSummary.tsx (100%)
 rename src/components/{ dashboard-earnings => dashboard-earnings}/FilterBar.tsx (100%)
 rename src/components/{ dashboard-earnings => dashboard-earnings}/LinkWallet.tsx (100%)
 rename src/components/{ dashboard-earnings => dashboard-earnings}/LoanRow.tsx (100%)
 rename src/components/{ dashboard-earnings => dashboard-earnings}/MobileLoanRow.tsx (100%)
 rename src/components/{ dashboard-earnings => dashboard-earnings}/MobileTable.tsx (100%)
 rename src/components/{ dashboard-earnings => dashboard-earnings}/RequestPaymentModal.tsx (100%)
 rename src/components/{ dashboard-earnings => dashboard-earnings}/RevenueBreakdown.tsx (100%)
 rename src/components/{ dashboard-earnings => dashboard-earnings}/TransactionHistory.tsx (100%)
 rename src/components/{ dashboard-earnings => dashboard-earnings}/TransactionModalButton.tsx (100%)
 rename src/components/{ dashboard-earnings => dashboard-earnings}/TransactionTable.tsx (100%)

diff --git a/src/app/dashboard/admin/analytics/page.tsx b/src/app/dashboard/admin/analytics/page.tsx
new file mode 100644
index 0000000..07b5e9e
--- /dev/null
+++ b/src/app/dashboard/admin/analytics/page.tsx
@@ -0,0 +1,18 @@
+"use-client";
+import { Header } from "@/components/dashboard/header";
+
+export default function Analytics() {
+  return (
+    <>
+      <Header title="Analytics" />
+      <div className="space-y-6">
+        <div className="flex flex-col items-center justify-center h-screen">
+          <h1 className="text-2xl font-bold text-gray-800">Analytics</h1>
+          <p className="text-gray-600 mt-2">
+            Welcome to Analytics
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/dashboard/admin/community-and-events/page.tsx b/src/app/dashboard/admin/community-and-events/page.tsx
new file mode 100644
index 0000000..d958673
--- /dev/null
+++ b/src/app/dashboard/admin/community-and-events/page.tsx
@@ -0,0 +1,18 @@
+"use-client";
+import { Header } from "@/components/dashboard/header";
+
+export default function CommunityAndEvents() {
+  return (
+    <>
+      <Header title="Community and Events" />
+      <div className="space-y-6">
+        <div className="flex flex-col items-center justify-center h-screen">
+          <h1 className="text-2xl font-bold text-gray-800">Community and events</h1>
+          <p className="text-gray-600 mt-2">
+            Welcome to Community and Events section of the admin dashboard! Here, you can manage community interactions, events, and engagement activities. This space is designed to help you foster a vibrant community around your platform, ensuring that users have a place to connect, share, and participate in events.
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/dashboard/admin/components/admin-sidenavbar.tsx b/src/app/dashboard/admin/components/admin-sidenavbar.tsx
new file mode 100644
index 0000000..cb180bf
--- /dev/null
+++ b/src/app/dashboard/admin/components/admin-sidenavbar.tsx
@@ -0,0 +1,84 @@
+"use client";
+
+import { LayoutDashboard, Users2, FileText, BarChart3, CalendarDays, Bell, MessagesSquare } from 'lucide-react';
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export function Sidebar() {
+  const pathname = usePathname();
+
+  const navItems = [
+    {
+      icon: LayoutDashboard,
+      label: "Dashboard",
+      href: "/dashboard/admin",
+    },
+    {
+      icon: Users2,
+      label: "User Management",
+      href: "/dashboard/admin/user-management", 
+    },
+    {
+      icon: FileText,
+      label: "Content Management",
+      href: "/dashboard/admin/content-management",
+    },
+    {
+      icon: BarChart3,
+      label: "Analytics",
+      href: "/dashboard/admin/analytics",
+    },
+    {
+      icon: CalendarDays,
+      label: "Trasactions",
+      href: "/dashboard/admin/transactions",
+    },
+
+    {
+      icon: Bell,
+      label: "Notification",
+      href: "/dashboard/admin/notifications",
+    },
+    {
+      icon: MessagesSquare,
+      label: "Community and Events",
+      href: "/dashboard/admin/community-and-events",
+    },
+ 
+  ];
+
+  return (
+    <div className="w-64 bg-white border-r border-[#e7e7e7] h-screen fixed left-0 top-0">
+      <div className="p-4 flex items-center gap-2 border-b border-[#e7e7e7]">
+        <div className="w-8 h-8 rounded-full bg-[#0f265c] flex items-center justify-center">
+          <span className="text-white text-sm font-bold">C</span>
+        </div>
+        <span className="font-semibold text-[#000b21]">ChainLib</span>
+      </div>
+
+      <nav className="p-4">
+        <ul className="space-y-2">
+          {navItems.map((item) => (
+            <li key={item.label}>
+              <Link
+                href={item.href}
+                className={`flex items-center gap-3 p-3 rounded-md ${
+                  pathname === item.href
+                    ? "bg-[#096CFF] text-[#edf7ff]"
+                    : "text-[#5d5d5d] hover:bg-[#f6f6f6]"
+                }`}
+              >
+                <item.icon size={18} />
+                <span className={pathname === item.href ? "font-medium" : ""}>
+                  {item.label}
+                </span>
+              </Link>
+            </li>
+          ))}
+    
+        </ul>
+      </nav>
+    </div>
+  );
+}
diff --git a/src/app/dashboard/admin/content-management/page.tsx b/src/app/dashboard/admin/content-management/page.tsx
new file mode 100644
index 0000000..82dd63d
--- /dev/null
+++ b/src/app/dashboard/admin/content-management/page.tsx
@@ -0,0 +1,18 @@
+"use-client";
+import { Header } from "@/components/dashboard/header";
+
+export default function ContentManagement() {
+  return (
+    <>
+      <Header title="Content Management" />
+      <div className="space-y-6">
+        <div className="flex flex-col items-center justify-center h-screen">
+          <h1 className="text-2xl font-bold text-gray-800">Content management</h1>
+          <p className="text-gray-600 mt-2">
+            Welcome to the Content Management section of the admin dashboard! Here, you can manage all aspects of content on your platform, including articles, blogs, and other media. This space is designed to help you maintain a rich and engaging content library for your users.
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/dashboard/admin/layout.tsx b/src/app/dashboard/admin/layout.tsx
new file mode 100644
index 0000000..bf55f54
--- /dev/null
+++ b/src/app/dashboard/admin/layout.tsx
@@ -0,0 +1,26 @@
+
+
+
+import type React from "react";
+import { Sidebar } from "./components/admin-sidenavbar";
+import "@/app/globals.css";
+
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+
+     <div className="flex min-h-screen bg-[#f6f6f6] mt-17">
+      <Sidebar />
+      <div className="ml-64 w-full relative">
+        {children}
+      </div>
+    </div>
+    </>
+   
+  );
+}
\ No newline at end of file
diff --git a/src/app/dashboard/admin/notifications/page.tsx b/src/app/dashboard/admin/notifications/page.tsx
new file mode 100644
index 0000000..f67e4f6
--- /dev/null
+++ b/src/app/dashboard/admin/notifications/page.tsx
@@ -0,0 +1,18 @@
+"use-client";
+import { Header } from "@/components/dashboard/header";
+
+export default function Notifications() {
+  return (
+    <>
+      <Header title="Notification" />
+      <div className="space-y-6">
+        <div className="flex flex-col items-center justify-center h-screen">
+          <h1 className="text-2xl font-bold text-gray-800">Notification</h1>
+          <p className="text-gray-600 mt-2">
+            Welcome to the Notification section of the admin dashboard! Here, you can manage all aspects of notifications on your platform, including user alerts, system messages, and other important communications. This space is designed to help you keep users informed and engaged with timely updates and announcements.
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/dashboard/admin/page.tsx b/src/app/dashboard/admin/page.tsx
new file mode 100644
index 0000000..65d5686
--- /dev/null
+++ b/src/app/dashboard/admin/page.tsx
@@ -0,0 +1,18 @@
+"use-client";
+import { Header } from "@/components/dashboard/header";
+
+export default function DashboardHome() {
+  return (
+    <>
+      <Header title="Dashboard" />
+      <div className="space-y-6">
+        <div className="flex flex-col items-center justify-center h-screen">
+          <h1 className="text-2xl font-bold text-gray-800">Admin Dashboard</h1>
+          <p className="text-gray-600 mt-2">
+            Welcome to your personalized admin space!
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/dashboard/admin/transactions/page.tsx b/src/app/dashboard/admin/transactions/page.tsx
new file mode 100644
index 0000000..859f205
--- /dev/null
+++ b/src/app/dashboard/admin/transactions/page.tsx
@@ -0,0 +1,18 @@
+"use-client";
+import { Header } from "@/components/dashboard/header";
+
+export default function Transactions() {
+  return (
+    <>
+      <Header title="Transactions" />
+      <div className="space-y-6">
+        <div className="flex flex-col items-center justify-center h-screen">
+          <h1 className="text-2xl font-bold text-gray-800">Transactions</h1>
+          <p className="text-gray-600 mt-2">
+            Welcome to Transactions section of the admin dashboard! Here, you can manage and monitor all transactions on your platform. This space is designed to help you ensure the integrity and security of financial activities, providing insights into transaction history, status, and details. You can also handle any issues related to transactions efficiently.
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/dashboard/admin/user-management/page.tsx b/src/app/dashboard/admin/user-management/page.tsx
new file mode 100644
index 0000000..627536d
--- /dev/null
+++ b/src/app/dashboard/admin/user-management/page.tsx
@@ -0,0 +1,18 @@
+"use-client";
+import { Header } from "@/components/dashboard/header";
+
+export default function UserManagment() {
+  return (
+    <>
+      <Header title="User Managements" />
+      <div className="space-y-6">
+        <div className="flex flex-col items-center justify-center h-screen">
+          <h1 className="text-2xl font-bold text-gray-800">User Management</h1>
+          <p className="text-gray-600 mt-2">
+            Welcome to user management section of the admin dashboard! Here, you can manage all aspects of user accounts, including registration, profiles, and permissions. This space is designed to help you maintain a secure and organized user base, ensuring that users have the appropriate access and capabilities within your platform.
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/dashboard/readers/components/book-modal.tsx b/src/app/dashboard/readers/components/book-modal.tsx
new file mode 100644
index 0000000..b83fb23
--- /dev/null
+++ b/src/app/dashboard/readers/components/book-modal.tsx
@@ -0,0 +1,248 @@
+"use client"
+
+import { ArrowLeft, MoreHorizontal, Star, X } from "lucide-react"
+import Image from "next/image"
+import { useEffect, useState } from "react"
+import { BookReaderModal } from "./book-reader-modal"
+import imgbook from "../../../../../public/Cover.png"
+import imgbook1 from "../../../../../public/user1.svg"
+interface BookModalProps {
+  book: {
+    id: string
+    title: string
+    author: string
+    rating: number
+    status: "read" | "unread" | "progress"
+    progress?: number
+    isNFT?: boolean
+    likes?: number
+    verified?: boolean
+  }
+  onClose: () => void
+}
+
+export function BookModal({ book, onClose }: BookModalProps) {
+  // Close modal on escape key
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose()
+      }
+    }
+    document.addEventListener("keydown", handleEscape)
+    return () => document.removeEventListener("keydown", handleEscape)
+  }, [onClose])
+
+  // Prevent body scroll when modal is open
+  useEffect(() => {
+    document.body.style.overflow = "hidden"
+    return () => {
+      document.body.style.overflow = "unset"
+    }
+  }, [])
+
+  const [isReaderOpen, setIsReaderOpen] = useState(false)
+
+  const openReader = () => {
+    setIsReaderOpen(true)
+  }
+
+  const closeReader = () => {
+    setIsReaderOpen(false)
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto border-4 border-dashed border-blue-500">
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-gray-200">
+          <div className="flex items-center gap-4">
+            <button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
+              <ArrowLeft className="w-5 h-5" />
+            </button>
+            <h1 className="text-lg font-semibold">Native Invisible</h1>
+          </div>
+
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2">
+              <Image
+                src={imgbook1}
+                alt="Joseph Yanum"
+                width={32}
+                height={32}
+                className="rounded-full"
+              />
+              <div className="text-sm">
+                <div className="flex items-center gap-1">
+                  <span className="font-medium">Joseph Yanum</span>
+                  <div className="w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
+                    <span className="text-white text-xs">✓</span>
+                  </div>
+                </div>
+                <div className="text-gray-500">@joeyanum</div>
+              </div>
+            </div>
+            <button className="p-2 hover:bg-gray-100 rounded-full transition-colors">
+              <MoreHorizontal className="w-5 h-5" />
+            </button>
+            <button
+              onClick={onClose}
+              className="p-2 hover:bg-gray-100 rounded-full transition-colors"
+              aria-label="Close modal"
+            >
+              <X className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+
+        {/* Main Content */}
+        <div className="p-6">
+          {/* Book Info Section */}
+          <div className="flex flex-col md:flex-row gap-8 mb-8">
+            {/* Book Cover */}
+            <div className="flex-shrink-0">
+              <Image
+                src={imgbook}
+                alt={book.title}
+                width={240}
+                height={320}
+                className="rounded-xl shadow-lg"
+              />
+            </div>
+
+            {/* Book Details */}
+            <div className="flex-1">
+              <h2 className="text-2xl font-bold mb-2">{book.title}</h2>
+              <div className="flex items-center gap-2 mb-4">
+                <span className="text-gray-600">By {book.author}</span>
+                {book.verified && (
+                  <div className="w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center">
+                    <span className="text-white text-xs">✓</span>
+                  </div>
+                )}
+              </div>
+
+              {/* Rating */}
+              <div className="flex items-center gap-2 mb-4">
+                <div className="flex items-center gap-1">
+                  <Star className="w-5 h-5 fill-yellow-400 text-yellow-400" />
+                  <span className="font-medium">{book.rating}</span>
+                </div>
+                <span className="text-gray-500">of 109 Review</span>
+              </div>
+
+              {/* Access Type */}
+              <div className="mb-4">
+                <div className="text-sm text-gray-600 mb-1">Access Type</div>
+                <div className="text-blue-600 font-medium">One-time Purchase</div>
+              </div>
+
+              {/* Reading Progress */}
+              {book.status === "progress" && book.progress && (
+                <div className="mb-6">
+                  <span className="bg-yellow-100 text-yellow-800 text-sm px-3 py-1 rounded-full font-medium">
+                    {book.progress}% Read
+                  </span>
+                </div>
+              )}
+
+              {/* Continue Reading Button */}
+              <button
+                onClick={openReader}
+                className="bg-blue-600 text-white px-8 py-3 rounded-xl font-medium hover:bg-blue-700 transition-colors"
+              >
+                Continue Reading
+              </button>
+            </div>
+          </div>
+
+          {/* Description */}
+          <div className="mb-8 border-t border-dashed border-gray-300 pt-8">
+            <h3 className="text-lg font-semibold mb-4">Description</h3>
+            <p className="text-gray-600 mb-4">
+              "Native Invisibility" delves into the complex and often insidious ways in which indigenous peoples and
+              their unique experiences are rendered unseen and unheard in the modern era.
+            </p>
+            <button className="text-blue-600 hover:text-blue-700 text-sm font-medium">Read More</button>
+          </div>
+
+          {/* Book Details Grid */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8 border-t border-dashed border-gray-300 pt-8">
+            <div>
+              <div className="text-sm text-gray-600 mb-1">Genre(s)</div>
+              <div className="text-sm">Fiction</div>
+              <div className="text-sm">Comic</div>
+            </div>
+            <div>
+              <div className="text-sm text-gray-600 mb-1">Page count</div>
+              <div className="text-sm">21 Pages</div>
+            </div>
+            <div>
+              <div className="text-sm text-gray-600 mb-1">Language</div>
+              <div className="text-sm">English</div>
+            </div>
+            <div>
+              <div className="text-sm text-gray-600 mb-1">Date published</div>
+              <div className="text-sm">12 April, 2025</div>
+            </div>
+          </div>
+
+          {/* ISBN */}
+          <div className="mb-8 border-t border-dashed border-gray-300 pt-8">
+            <div className="text-sm text-gray-600 mb-1">ISBN</div>
+            <div className="text-sm">978-3-16-148410-0</div>
+          </div>
+
+          {/* From Publisher & About Author */}
+          <div className="grid md:grid-cols-2 gap-8 border-t border-dashed border-gray-300 pt-8">
+            {/* From the Publisher */}
+            <div>
+              <h3 className="text-lg font-semibold mb-4">From the Publisher</h3>
+              <p className="text-gray-600 text-sm">
+                Native Invisibility unveils the crucial ways indigenous cultures are often unseen in our modern world.
+                This vital book fosters understanding and action for recognition and justice.
+              </p>
+            </div>
+
+            {/* About the Author */}
+            <div>
+              <h3 className="text-lg font-semibold mb-4">About the Author</h3>
+              <div className="flex items-start gap-3 mb-4">
+                <Image
+                  src={imgbook1}
+                  alt={book.author}
+                  width={48}
+                  height={48}
+                  className="rounded-full"
+                />
+                <div className="flex-1">
+                  <div className="flex items-center justify-between mb-2">
+                    <div className="flex items-center gap-2">
+                      <span className="font-medium">{book.author}</span>
+                      {book.verified && (
+                        <div className="w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
+                          <span className="text-white text-xs">✓</span>
+                        </div>
+                      )}
+                    </div>
+                    <button className="text-sm border border-gray-300 px-3 py-1 rounded-full hover:bg-gray-50 transition-colors">
+                      Follow
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <p className="text-gray-600 text-sm">
+                Darrin Collins is a dedicated researcher and writer deeply committed to exploring issues of cultural
+                visibility, marginalization, and the intersection of identity and technology. His work in Native
+                Invisibility reflects a long-standing interest in amplifying underrepresented voices and fostering a
+                more equitable understanding of diverse experiences in the contemporary world.
+              </p>
+            </div>
+          </div>
+        </div>
+        {/* Book Reader Modal */}
+        {isReaderOpen && <BookReaderModal book={book} onClose={closeReader} />}
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/reader-dashboard/components/book-reader-modal.tsx b/src/app/dashboard/readers/components/book-reader-modal.tsx
similarity index 100%
rename from src/app/reader-dashboard/components/book-reader-modal.tsx
rename to src/app/dashboard/readers/components/book-reader-modal.tsx
diff --git a/src/app/dashboard/readers/components/header-reader.tsx b/src/app/dashboard/readers/components/header-reader.tsx
new file mode 100644
index 0000000..40c0e22
--- /dev/null
+++ b/src/app/dashboard/readers/components/header-reader.tsx
@@ -0,0 +1,50 @@
+import { Bell } from "lucide-react";
+import Image from "next/image";
+import user from "../../../../../public/user1.svg";
+import check from "../../../../../public/check.svg";
+import Logo from "../../../../../public/logo.svg";
+
+export function HeaderReader() {
+  return (
+
+    <header className="bg-white px-4 py-2 z-50 fixed w-full border-b top-0 border-[#e7e7e7] flex justify-between items-center">
+      {/* Left Side - Logo */}
+      <div className="flex items-center">
+        <Image
+          src={Logo}
+          alt="Brand logo"
+          width={36}
+          height={36}
+          className="h-9 w-9 rounded-full"
+        />
+      </div>
+
+      {/* Right Side - Notification and User */}
+      <div className="flex items-center gap-2 border p-1 border-[#E7E7E7] rounded">
+        <div className="relative">
+          <Bell className="text-[#5d5d5d] cursor-pointer" size={20} />
+          <div className="absolute -top-1 -right-1 w-2 h-2 bg-[#ff5c5c] rounded-full"></div>
+        </div>
+        <div className="w-8 h-8 rounded-sm bg-[#dba736] flex items-center justify-center overflow-hidden">
+          <Image
+            src={user}
+            alt="Profile"
+            width={32}
+            height={32}
+            className="object-cover"
+          />
+        </div>
+        <div className="text-sm">
+          <div className="flex items-center gap-1">
+            <span className="font-medium">Joseph Yanum</span>
+            <Image src={check} alt="Verified" className="object-cover" />
+          </div>
+          <span className="text-[#888888] text-xs">@joeyyanum</span>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+
+
diff --git a/src/app/dashboard/readers/components/reader-side-navbar.tsx b/src/app/dashboard/readers/components/reader-side-navbar.tsx
new file mode 100644
index 0000000..aae223c
--- /dev/null
+++ b/src/app/dashboard/readers/components/reader-side-navbar.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import {
+  Bell,
+  BookOpen,
+  LayoutDashboard,
+  MessageSquare,
+  DoorClosed,
+  User,
+  ClipboardList,
+  Heart
+} from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export function Sidebar() {
+  const pathname = usePathname();
+
+  const navItems = [
+    {
+      icon: LayoutDashboard,
+      label: "Dashboard",
+      href: "/dashboard/readers",
+    },
+    {
+      icon: BookOpen,
+      label: "My Library",
+      href: "/dashboard/readers/library", 
+    },
+    {
+      icon: DoorClosed,
+      label: "Reading Stats",
+      href: "/dashboard/readers/reading-stats",
+    },
+    {
+      icon: Heart,
+      label: "Wishlist",
+      href: "/dashboard/readers/wishlist",
+      badge: 4,
+    },
+    {
+      icon: ClipboardList,
+      label: "Trasactions",
+      href: "/dashboard/readers/transactions",
+    },
+    {
+      icon: MessageSquare,
+      label: "Discussion & Clubs",
+      href: "/dashboard/readers/discussions-and-clubs",
+    },
+    {
+      icon: Bell,
+      label: "Notification",
+      href: "/dashboard/readers/notifications",
+    },
+    {
+      icon: User,
+      label: "Profile",
+      href: "/dashboard/readers/profile",
+    },
+ 
+  ];
+
+  return (
+    <div className="w-64 bg-white border-r border-[#e7e7e7] h-screen fixed left-0 top-0">
+      <div className="p-4 flex items-center gap-2 border-b border-[#e7e7e7]">
+        <div className="w-8 h-8 rounded-full bg-[#0f265c] flex items-center justify-center">
+          <span className="text-white text-sm font-bold">C</span>
+        </div>
+        <span className="font-semibold text-[#000b21]">ChainLib</span>
+      </div>
+
+      <nav className="p-4">
+        <ul className="space-y-2">
+          {navItems.map((item) => (
+            <li key={item.label}>
+              <Link
+                href={item.href}
+                className={`flex items-center gap-3 p-3 rounded-md ${
+                  pathname === item.href
+                    ? "bg-[#096CFF] text-[#edf7ff]"
+                    : "text-[#5d5d5d] hover:bg-[#f6f6f6]"
+                }`}
+              >
+                <item.icon size={18} />
+                <span className={pathname === item.href ? "font-medium" : ""}>
+                  {item.label}
+                </span>
+                {item.badge && (
+                  <div
+                    className={`ml-auto w-5 h-5 ${
+                      item.label == "Notification"
+                        ? "bg-[#ff5c5c]"
+                        : "bg-[#096CFF]"
+                    }  rounded-full flex items-center justify-center`}
+                  >
+                    <span className="text-white text-xs">{item.badge}</span>
+                  </div>
+                )}
+              </Link>
+            </li>
+          ))}
+    
+        </ul>
+      </nav>
+    </div>
+  );
+}
diff --git a/src/app/reader-dashboard/discussions-and-clubs/ClubCard.tsx b/src/app/dashboard/readers/discussions-and-clubs/ClubCard.tsx
similarity index 100%
rename from src/app/reader-dashboard/discussions-and-clubs/ClubCard.tsx
rename to src/app/dashboard/readers/discussions-and-clubs/ClubCard.tsx
diff --git a/src/app/reader-dashboard/discussions-and-clubs/[id]/page.tsx b/src/app/dashboard/readers/discussions-and-clubs/[id]/page.tsx
similarity index 100%
rename from src/app/reader-dashboard/discussions-and-clubs/[id]/page.tsx
rename to src/app/dashboard/readers/discussions-and-clubs/[id]/page.tsx
diff --git a/src/app/reader-dashboard/discussions-and-clubs/components/AddGuest.tsx b/src/app/dashboard/readers/discussions-and-clubs/components/AddGuest.tsx
similarity index 100%
rename from src/app/reader-dashboard/discussions-and-clubs/components/AddGuest.tsx
rename to src/app/dashboard/readers/discussions-and-clubs/components/AddGuest.tsx
diff --git a/src/app/reader-dashboard/discussions-and-clubs/components/ClubDetails.tsx b/src/app/dashboard/readers/discussions-and-clubs/components/ClubDetails.tsx
similarity index 100%
rename from src/app/reader-dashboard/discussions-and-clubs/components/ClubDetails.tsx
rename to src/app/dashboard/readers/discussions-and-clubs/components/ClubDetails.tsx
diff --git a/src/app/reader-dashboard/discussions-and-clubs/components/ClubDiscussion.tsx b/src/app/dashboard/readers/discussions-and-clubs/components/ClubDiscussion.tsx
similarity index 100%
rename from src/app/reader-dashboard/discussions-and-clubs/components/ClubDiscussion.tsx
rename to src/app/dashboard/readers/discussions-and-clubs/components/ClubDiscussion.tsx
diff --git a/src/app/reader-dashboard/discussions-and-clubs/components/ClubToolBar.tsx b/src/app/dashboard/readers/discussions-and-clubs/components/ClubToolBar.tsx
similarity index 100%
rename from src/app/reader-dashboard/discussions-and-clubs/components/ClubToolBar.tsx
rename to src/app/dashboard/readers/discussions-and-clubs/components/ClubToolBar.tsx
diff --git a/src/app/reader-dashboard/discussions-and-clubs/components/CreateEvent.tsx b/src/app/dashboard/readers/discussions-and-clubs/components/CreateEvent.tsx
similarity index 100%
rename from src/app/reader-dashboard/discussions-and-clubs/components/CreateEvent.tsx
rename to src/app/dashboard/readers/discussions-and-clubs/components/CreateEvent.tsx
diff --git a/src/app/reader-dashboard/discussions-and-clubs/components/Modal.tsx b/src/app/dashboard/readers/discussions-and-clubs/components/Modal.tsx
similarity index 100%
rename from src/app/reader-dashboard/discussions-and-clubs/components/Modal.tsx
rename to src/app/dashboard/readers/discussions-and-clubs/components/Modal.tsx
diff --git a/src/app/reader-dashboard/discussions-and-clubs/components/ScheduleEvent.tsx b/src/app/dashboard/readers/discussions-and-clubs/components/ScheduleEvent.tsx
similarity index 100%
rename from src/app/reader-dashboard/discussions-and-clubs/components/ScheduleEvent.tsx
rename to src/app/dashboard/readers/discussions-and-clubs/components/ScheduleEvent.tsx
diff --git a/src/app/reader-dashboard/discussions-and-clubs/components/StartEvent.tsx b/src/app/dashboard/readers/discussions-and-clubs/components/StartEvent.tsx
similarity index 100%
rename from src/app/reader-dashboard/discussions-and-clubs/components/StartEvent.tsx
rename to src/app/dashboard/readers/discussions-and-clubs/components/StartEvent.tsx
diff --git a/src/app/reader-dashboard/discussions-and-clubs/components/SuccessModal.tsx b/src/app/dashboard/readers/discussions-and-clubs/components/SuccessModal.tsx
similarity index 100%
rename from src/app/reader-dashboard/discussions-and-clubs/components/SuccessModal.tsx
rename to src/app/dashboard/readers/discussions-and-clubs/components/SuccessModal.tsx
diff --git a/src/app/reader-dashboard/discussions-and-clubs/page.tsx b/src/app/dashboard/readers/discussions-and-clubs/page.tsx
similarity index 100%
rename from src/app/reader-dashboard/discussions-and-clubs/page.tsx
rename to src/app/dashboard/readers/discussions-and-clubs/page.tsx
diff --git a/src/app/dashboard/readers/layout.tsx b/src/app/dashboard/readers/layout.tsx
new file mode 100644
index 0000000..dd5bd25
--- /dev/null
+++ b/src/app/dashboard/readers/layout.tsx
@@ -0,0 +1,26 @@
+
+
+
+import type React from "react";
+import { Sidebar } from "./components/reader-side-navbar";
+import "@/app/globals.css";
+
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+
+     <div className="flex min-h-screen bg-[#f6f6f6] mt-17">
+      <Sidebar />
+      <div className="ml-64 w-full relative">
+        {children}
+      </div>
+    </div>
+    </>
+   
+  );
+}
\ No newline at end of file
diff --git a/src/app/dashboard/readers/library/page.tsx b/src/app/dashboard/readers/library/page.tsx
new file mode 100644
index 0000000..1840361
--- /dev/null
+++ b/src/app/dashboard/readers/library/page.tsx
@@ -0,0 +1,898 @@
+"use client";
+
+import type React from "react";
+import { useState } from "react";
+import {
+  Search,
+  ChevronDown,
+  BookOpen,
+  Users,
+  Bookmark,
+  CheckCircle,
+  Clock,
+  Eye,
+} from "lucide-react";
+import Image from "next/image";
+import { BookModal } from "../components/book-modal";
+import imgbook from "../../../../../public/Cover.png";
+import { Header } from "@/components/dashboard/header";
+
+
+interface StatCard {
+  title: string;
+  value: number;
+  icon: React.ReactNode;
+  color: string;
+}
+
+interface Book {
+  id: string;
+  title: string;
+  author: string;
+  rating: number;
+  status: "read" | "unread" | "progress";
+  progress?: number;
+  isNFT?: boolean;
+  likes?: number;
+  verified?: boolean;
+}
+
+interface Collection {
+  id: string;
+  title: string;
+  rating: number;
+  likes: number;
+  owners: number;
+  books: string[];
+}
+
+const statCards: StatCard[] = [
+  {
+    title: "Total Books",
+    value: 24,
+    icon: <BookOpen className="w-5 h-5" />,
+    color: "bg-blue-100 text-blue-600",
+  },
+  {
+    title: "Regular Book",
+    value: 12,
+    icon: <BookOpen className="w-5 h-5" />,
+    color: "bg-green-100 text-green-600",
+  },
+  {
+    title: "NTF Editions",
+    value: 4,
+    icon: <Bookmark className="w-5 h-5" />,
+    color: "bg-purple-100 text-purple-600",
+  },
+  {
+    title: "Series",
+    value: 8,
+    icon: <Users className="w-5 h-5" />,
+    color: "bg-orange-100 text-orange-600",
+  },
+  {
+    title: "Collections",
+    value: 3,
+    icon: <Bookmark className="w-5 h-5" />,
+    color: "bg-indigo-100 text-indigo-600",
+  },
+  {
+    title: "Read",
+    value: 3,
+    icon: <CheckCircle className="w-5 h-5" />,
+    color: "bg-blue-100 text-blue-600",
+  },
+  {
+    title: "Progress",
+    value: 3,
+    icon: <Clock className="w-5 h-5" />,
+    color: "bg-blue-100 text-blue-600",
+  },
+  {
+    title: "Unread",
+    value: 3,
+    icon: <Eye className="w-5 h-5" />,
+    color: "bg-blue-100 text-blue-600",
+  },
+];
+
+const recentBooks: Book[] = [
+  {
+    id: "1",
+    title: "Native Invisibility",
+    author: "Darrin Collins",
+    rating: 4.5,
+    status: "progress",
+    progress: 5,
+    verified: true,
+  },
+  {
+    id: "2",
+    title: "Peace and Hate",
+    author: "Darrin Collins",
+    rating: 4.5,
+    status: "unread",
+    isNFT: true,
+    verified: true,
+  },
+  {
+    id: "3",
+    title: "Dark World",
+    author: "Darrin Collins",
+    rating: 4.5,
+    status: "unread",
+    likes: 5,
+    verified: true,
+  },
+  {
+    id: "4",
+    title: "Native Invisibility",
+    author: "Darrin Collins",
+    rating: 4.5,
+    status: "progress",
+    progress: 5,
+    verified: true,
+  },
+];
+
+const regularBooks: Book[] = [
+  {
+    id: "5",
+    title: "Native Invisibility",
+    author: "Darrin Collins",
+    rating: 4.5,
+    status: "progress",
+    progress: 5,
+    verified: true,
+  },
+  {
+    id: "6",
+    title: "Native Invisibility",
+    author: "Darrin Collins",
+    rating: 4.5,
+    status: "read",
+    verified: true,
+  },
+  {
+    id: "7",
+    title: "Native Invisibility",
+    author: "Darrin Collins",
+    rating: 4.5,
+    status: "unread",
+    verified: true,
+  },
+  {
+    id: "8",
+    title: "Native Invisibility",
+    author: "Darrin Collins",
+    rating: 4.5,
+    status: "read",
+    verified: true,
+  },
+];
+
+const nftBooks: Book[] = [
+  {
+    id: "9",
+    title: "Peace and Hate",
+    author: "Darrin Collins",
+    rating: 4.5,
+    status: "progress",
+    progress: 97,
+    isNFT: true,
+    verified: true,
+  },
+  {
+    id: "10",
+    title: "Peace and Hate",
+    author: "Darrin Collins",
+    rating: 4.5,
+    status: "read",
+    isNFT: true,
+    verified: true,
+  },
+  {
+    id: "11",
+    title: "Peace and Hate",
+    author: "Darrin Collins",
+    rating: 4.5,
+    status: "unread",
+    isNFT: true,
+    verified: true,
+  },
+  {
+    id: "12",
+    title: "Peace and Hate",
+    author: "Darrin Collins",
+    rating: 4.5,
+    status: "unread",
+    isNFT: true,
+    verified: true,
+  },
+];
+
+const seriesBooks: Book[] = [
+  {
+    id: "13",
+    title: "Love at Night",
+    author: "Darrin Collins",
+    rating: 4.5,
+    status: "read",
+    likes: 4,
+    verified: true,
+  },
+  {
+    id: "14",
+    title: "Love at Night",
+    author: "Darrin Collins",
+    rating: 4.5,
+    status: "progress",
+    progress: 46,
+    likes: 5,
+    verified: true,
+  },
+  {
+    id: "15",
+    title: "Dark World",
+    author: "Darrin Collins",
+    rating: 4.5,
+    status: "unread",
+    likes: 5,
+    verified: true,
+  },
+  {
+    id: "16",
+    title: "Peace and Hate",
+    author: "Darrin Collins",
+    rating: 4.5,
+    status: "progress",
+    progress: 79,
+    likes: 5,
+    verified: true,
+  },
+];
+
+const collections: Collection[] = [
+  {
+    id: "1",
+    title: "My Best Boook",
+    rating: 4.5,
+    likes: 5,
+    owners: 10,
+    books: ["book1", "book2", "book3"],
+  },
+  {
+    id: "2",
+    title: "My Best Boook",
+    rating: 4.5,
+    likes: 5,
+    owners: 10,
+    books: ["book1", "book2", "book3"],
+  },
+  {
+    id: "3",
+    title: "My Best Boook",
+    rating: 4.5,
+    likes: 5,
+    owners: 10,
+    books: ["book1", "book2", "book3"],
+  },
+  {
+    id: "4",
+    title: "My Best Boook",
+    rating: 4.5,
+    likes: 5,
+    owners: 10,
+    books: ["book1", "book2", "book3"],
+  },
+];
+
+export default function BookLibraryDashboard() {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [bookType, setBookType] = useState("Book Type");
+  const [genre, setGenre] = useState("Genre");
+  const [bookTypeOpen, setBookTypeOpen] = useState(false);
+  const [genreOpen, setGenreOpen] = useState(false);
+
+  const [selectedBook, setSelectedBook] = useState<Book | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const openBookModal = (book: Book) => {
+    setSelectedBook(book);
+    setIsModalOpen(true);
+  };
+
+  const closeBookModal = () => {
+    setSelectedBook(null);
+    setIsModalOpen(false);
+  };
+
+  return (
+    <>
+      <Header title="Library" />
+      <div className="min-h-screen bg-gray-50">
+        <div className="max-w-7xl mx-auto p-4 md:p-6 lg:p-8">
+          {/* Search and Filters */}
+          <div className="flex flex-col sm:flex-row gap-4 mb-8">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+              <input
+                type="text"
+                placeholder="What are we looking for"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full pl-10 h-12 bg-white border border-gray-200 rounded-xl px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+            </div>
+
+            <div className="flex gap-3">
+              {/* Book Type Dropdown */}
+              <div className="relative">
+                <button
+                  onClick={() => setBookTypeOpen(!bookTypeOpen)}
+                  className="h-12 px-4 bg-white border border-gray-200 rounded-xl flex items-center gap-2 text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                >
+                  {bookType}
+                  <ChevronDown className="h-4 w-4" />
+                </button>
+                {bookTypeOpen && (
+                  <div className="absolute top-full mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg z-10">
+                    <button
+                      onClick={() => {
+                        setBookType("All Books");
+                        setBookTypeOpen(false);
+                      }}
+                      className="w-full px-4 py-2 text-left text-sm hover:bg-gray-50 first:rounded-t-lg last:rounded-b-lg"
+                    >
+                      All Books
+                    </button>
+                    <button
+                      onClick={() => {
+                        setBookType("Regular Books");
+                        setBookTypeOpen(false);
+                      }}
+                      className="w-full px-4 py-2 text-left text-sm hover:bg-gray-50"
+                    >
+                      Regular Books
+                    </button>
+                    <button
+                      onClick={() => {
+                        setBookType("NFT Editions");
+                        setBookTypeOpen(false);
+                      }}
+                      className="w-full px-4 py-2 text-left text-sm hover:bg-gray-50 last:rounded-b-lg"
+                    >
+                      NFT Editions
+                    </button>
+                  </div>
+                )}
+              </div>
+
+              {/* Genre Dropdown */}
+              <div className="relative">
+                <button
+                  onClick={() => setGenreOpen(!genreOpen)}
+                  className="h-12 px-4 bg-white border border-gray-200 rounded-xl flex items-center gap-2 text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                >
+                  {genre}
+                  <ChevronDown className="h-4 w-4" />
+                </button>
+                {genreOpen && (
+                  <div className="absolute top-full mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg z-10">
+                    <button
+                      onClick={() => {
+                        setGenre("Fiction");
+                        setGenreOpen(false);
+                      }}
+                      className="w-full px-4 py-2 text-left text-sm hover:bg-gray-50 first:rounded-t-lg"
+                    >
+                      Fiction
+                    </button>
+                    <button
+                      onClick={() => {
+                        setGenre("Non-Fiction");
+                        setGenreOpen(false);
+                      }}
+                      className="w-full px-4 py-2 text-left text-sm hover:bg-gray-50"
+                    >
+                      Non-Fiction
+                    </button>
+                    <button
+                      onClick={() => {
+                        setGenre("Mystery");
+                        setGenreOpen(false);
+                      }}
+                      className="w-full px-4 py-2 text-left text-sm hover:bg-gray-50"
+                    >
+                      Mystery
+                    </button>
+                    <button
+                      onClick={() => {
+                        setGenre("Romance");
+                        setGenreOpen(false);
+                      }}
+                      className="w-full px-4 py-2 text-left text-sm hover:bg-gray-50 last:rounded-b-lg"
+                    >
+                      Romance
+                    </button>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Statistics Cards */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+            {statCards.map((card, index) => (
+              <div
+                key={index}
+                className="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition-shadow p-4"
+              >
+                <div className="flex items-center justify-between mb-3">
+                  <div className={`p-2 rounded-lg ${card.color}`}>
+                    {card.icon}
+                  </div>
+                </div>
+                <div className="space-y-1">
+                  <p className="text-sm text-gray-600 font-medium">
+                    {card.title}
+                  </p>
+                  <p className="text-2xl font-bold text-gray-900">
+                    {card.value}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Recently Purchased Section */}
+          <div className="mb-8">
+            <div className="flex items-center justify-between mb-6">
+              <h2 className="text-xl font-semibold text-gray-900">
+                Recently Purchased
+              </h2>
+              <button className="text-gray-500 hover:text-gray-700 text-sm font-medium border rounded-full py-3 px-5">
+                View All →
+              </button>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+              {recentBooks.map((book) => (
+                <div
+                  key={book.id}
+                  onClick={() => openBookModal(book)}
+                  className="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition-shadow overflow-hidden cursor-pointer"
+                >
+                  <div className="relative">
+                    <div className="aspect-[3/4] bg-gray-100 flex items-center justify-center">
+                      <Image
+                        src={imgbook}
+                        alt={book.title}
+                        width={180}
+                        height={240}
+                        className="object-cover rounded-t-xl"
+                      />
+                    </div>
+
+                    {/* Status Badges */}
+                    <div className="absolute top-3 left-3 flex gap-2">
+                      {book.status === "progress" && book.progress && (
+                        <span className="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full font-medium">
+                          {book.progress}% Read
+                        </span>
+                      )}
+                      {book.status === "unread" && (
+                        <span className="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full font-medium">
+                          Unread
+                        </span>
+                      )}
+                      {book.isNFT && (
+                        <span className="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full font-medium">
+                          NFT
+                        </span>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="p-4">
+                    <h3 className="font-semibold text-gray-900 mb-1 line-clamp-2">
+                      {book.title}
+                    </h3>
+                    <div className="flex items-center gap-1 mb-3">
+                      <p className="text-sm text-gray-600">By {book.author}</p>
+                      {book.verified && (
+                        <div className="w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
+                          <CheckCircle className="w-3 h-3 text-white" />
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-1">
+                        <div className="flex text-yellow-400">
+                          {Array.from(
+                            { length: Math.floor(book.rating) },
+                            (_, i) => (
+                              <span key={i}>★</span>
+                            )
+                          )}
+                        </div>
+                        <span className="text-sm text-gray-600">
+                          {book.rating}
+                        </span>
+                      </div>
+
+                      {book.likes && (
+                        <div className="flex items-center gap-1 text-gray-500">
+                          <span className="text-sm">{book.likes}</span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Regular Books Section */}
+          <div className="mb-8">
+            <div className="flex items-center justify-between mb-6">
+              <h2 className="text-xl font-semibold text-gray-900">
+                Regular Books
+              </h2>
+              <button className="text-gray-500 hover:text-gray-700 text-sm font-medium border rounded-full py-3 px-5">
+                View All →
+              </button>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+              {regularBooks.map((book) => (
+                <div
+                  key={book.id}
+                  onClick={() => openBookModal(book)}
+                  className="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition-shadow overflow-hidden cursor-pointer"
+                >
+                  <div className="relative">
+                    <div className="aspect-[3/4] bg-gray-100 flex items-center justify-center">
+                      <Image
+                        src={imgbook}
+                        alt={book.title}
+                        width={180}
+                        height={240}
+                        className="object-cover rounded-t-xl"
+                      />
+                    </div>
+
+                    {/* Status Badges */}
+                    <div className="absolute top-3 left-3 flex gap-2">
+                      {book.status === "progress" && book.progress && (
+                        <span className="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full font-medium">
+                          {book.progress}% Read
+                        </span>
+                      )}
+                      {book.status === "read" && (
+                        <span className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full font-medium">
+                          Completed
+                        </span>
+                      )}
+                      {book.status === "unread" && (
+                        <span className="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full font-medium">
+                          Unread
+                        </span>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="p-4">
+                    <h3 className="font-semibold text-gray-900 mb-1 line-clamp-2">
+                      {book.title}
+                    </h3>
+                    <div className="flex items-center gap-1 mb-3">
+                      <p className="text-sm text-gray-600">By {book.author}</p>
+                      {book.verified && (
+                        <div className="w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
+                          <CheckCircle className="w-3 h-3 text-white" />
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-1">
+                        <div className="flex text-yellow-400">
+                          {Array.from(
+                            { length: Math.floor(book.rating) },
+                            (_, i) => (
+                              <span key={i}>★</span>
+                            )
+                          )}
+                        </div>
+                        <span className="text-sm text-gray-600">
+                          {book.rating}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* NFT Edition Section */}
+          <div className="mb-8 bg-blue-900 rounded-2xl p-6">
+            <div className="flex items-center justify-between mb-6">
+              <h2 className="text-xl font-semibold text-white">NFT Edition</h2>
+              <button className="text-white border border-white/20 hover:bg-white/10 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
+                View All →
+              </button>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+              {nftBooks.map((book) => (
+                <div
+                  key={book.id}
+                  onClick={() => openBookModal(book)}
+                  className="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition-shadow overflow-hidden cursor-pointer"
+                >
+                  <div className="relative">
+                    <div className="aspect-[3/4] bg-gray-100 flex items-center justify-center">
+                      <Image
+                        src={imgbook}
+                        alt={book.title}
+                        width={180}
+                        height={240}
+                        className="object-cover rounded-t-xl"
+                      />
+                    </div>
+
+                    {/* Status Badges */}
+                    <div className="absolute top-3 left-3 flex gap-2">
+                      {book.status === "progress" && book.progress && (
+                        <span className="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full font-medium">
+                          {book.progress}% Read
+                        </span>
+                      )}
+                      {book.status === "read" && (
+                        <span className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full font-medium">
+                          Completed
+                        </span>
+                      )}
+                      {book.status === "unread" && (
+                        <span className="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full font-medium">
+                          Unread
+                        </span>
+                      )}
+                      {book.isNFT && (
+                        <span className="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full font-medium">
+                          NFT
+                        </span>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="p-4">
+                    <h3 className="font-semibold text-gray-900 mb-1 line-clamp-2">
+                      {book.title}
+                    </h3>
+                    <div className="flex items-center gap-1 mb-3">
+                      <p className="text-sm text-gray-600">By {book.author}</p>
+                      {book.verified && (
+                        <div className="w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
+                          <CheckCircle className="w-3 h-3 text-white" />
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-1">
+                        <div className="flex text-yellow-400">
+                          {Array.from(
+                            { length: Math.floor(book.rating) },
+                            (_, i) => (
+                              <span key={i}>★</span>
+                            )
+                          )}
+                        </div>
+                        <span className="text-sm text-gray-600">
+                          {book.rating}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Series Section */}
+          <div className="mb-8">
+            <div className="flex items-center justify-between mb-6">
+              <h2 className="text-xl font-semibold text-gray-900">Series</h2>
+              <button className="text-gray-500 hover:text-gray-700 text-sm font-medium border rounded-full py-3 px-5">
+                View All →
+              </button>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+              {seriesBooks.map((book) => (
+                <div
+                  key={book.id}
+                  onClick={() => openBookModal(book)}
+                  className="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition-shadow overflow-hidden cursor-pointer"
+                >
+                  <div className="relative">
+                    <div className="aspect-[3/4] bg-gray-100 flex items-center justify-center">
+                      <Image
+                        src={imgbook}
+                        alt={book.title}
+                        width={180}
+                        height={240}
+                        className="object-cover rounded-t-xl"
+                      />
+                    </div>
+
+                    {/* Status Badges */}
+                    <div className="absolute top-3 left-3 flex gap-2">
+                      {book.status === "progress" && book.progress && (
+                        <span className="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full font-medium">
+                          {book.progress}% Read
+                        </span>
+                      )}
+                      {book.status === "read" && (
+                        <span className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full font-medium">
+                          Completed
+                        </span>
+                      )}
+                      {book.status === "unread" && (
+                        <span className="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full font-medium">
+                          Unread
+                        </span>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="p-4">
+                    <h3 className="font-semibold text-gray-900 mb-1 line-clamp-2">
+                      {book.title}
+                    </h3>
+                    <div className="flex items-center gap-1 mb-3">
+                      <p className="text-sm text-gray-600">By {book.author}</p>
+                      {book.verified && (
+                        <div className="w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
+                          <CheckCircle className="w-3 h-3 text-white" />
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-1">
+                        <div className="flex text-yellow-400">
+                          {Array.from(
+                            { length: Math.floor(book.rating) },
+                            (_, i) => (
+                              <span key={i}>★</span>
+                            )
+                          )}
+                        </div>
+                        <span className="text-sm text-gray-600">
+                          {book.rating}
+                        </span>
+                      </div>
+
+                      {book.likes && (
+                        <div className="flex items-center gap-1 text-gray-500">
+                          <span className="text-sm">{book.likes}</span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Collections Section */}
+          <div className="mb-8">
+            <div className="flex items-center justify-between mb-6">
+              <h2 className="text-xl font-semibold text-gray-900">
+                Collections
+              </h2>
+              <button className="text-gray-500 hover:text-gray-700 text-sm font-medium border rounded-full py-3 px-5">
+                View All →
+              </button>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+              {collections.map((collection) => (
+                <div
+                  key={collection.id}
+                  className="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition-shadow overflow-hidden"
+                >
+                  {/* Collection Books Grid */}
+                  <div className="p-4">
+                    <div className="grid grid-cols-2 gap-2 mb-4">
+                      {/* Top row - 2 books */}
+                      <div className="aspect-[3/4] bg-gray-100 rounded-lg flex items-center justify-center">
+                        <Image
+                          src={imgbook}
+                          alt="Book cover"
+                          width={90}
+                          height={120}
+                          className="object-cover rounded-lg"
+                        />
+                      </div>
+                      <div className="aspect-[3/4] bg-gray-100 rounded-lg flex items-center justify-center">
+                        <Image
+                          src={imgbook}
+                          alt="Book cover"
+                          width={90}
+                          height={120}
+                          className="object-cover rounded-lg"
+                        />
+                      </div>
+                      {/* Bottom row - 1 book + Add More */}
+                      <div className="aspect-[3/4] bg-gray-100 rounded-lg flex items-center justify-center">
+                        <Image
+                          src={imgbook}
+                          alt="Book cover"
+                          width={90}
+                          height={120}
+                          className="object-cover rounded-lg"
+                        />
+                      </div>
+                      <div className="aspect-[3/4] bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center">
+                        <span className="text-xs text-gray-500 text-center">
+                          + Add More
+                        </span>
+                      </div>
+                    </div>
+
+                    <div className="space-y-2">
+                      <h3 className="font-semibold text-gray-900">
+                        {collection.title}
+                      </h3>
+
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-1">
+                          <div className="flex text-yellow-400">
+                            {Array.from(
+                              { length: Math.floor(collection.rating) },
+                              (_, i) => (
+                                <span key={i}>★</span>
+                              )
+                            )}
+                          </div>
+                          <span className="text-sm text-gray-600">
+                            {collection.rating}
+                          </span>
+                        </div>
+
+                        <div className="flex items-center gap-3 text-sm text-gray-500">
+                          <div className="flex items-center gap-1">
+                            <span>{collection.likes}</span>
+                          </div>
+                          <div className="flex items-center gap-1">
+                            <div className="w-4 h-4 bg-red-500 rounded-full flex items-center justify-center">
+                              <span className="text-white text-xs">
+                                {collection.owners}
+                              </span>
+                            </div>
+                            <span>Owners</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          {/* Book Modal */}
+          {isModalOpen && selectedBook && (
+            <BookModal book={selectedBook} onClose={closeBookModal} />
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/dashboard/readers/notifications/notification-detail.tsx b/src/app/dashboard/readers/notifications/notification-detail.tsx
new file mode 100644
index 0000000..7cb4454
--- /dev/null
+++ b/src/app/dashboard/readers/notifications/notification-detail.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import {  MoveLeft, Trash2 } from "lucide-react";
+import Image from "next/image";
+import soon from "../../../../../public/coming-soon.png"
+
+
+interface NotificationDetailPageProps {
+  back: () => void;
+}
+
+export function NotificationDetailPage({ back }: NotificationDetailPageProps) {
+  return (
+    <div className="flex flex-col h-full">
+      {/* Content */}
+      <div className="flex-1 p-4 lg:p-6 overflow-auto">
+        <div className="max-w-2xl mx-auto">
+          <div className="bg-white rounded-lg border border-gray-200 p-6 lg:p-8">
+            <div className="flex justify-between items-center">
+              <div
+                onClick={back}
+                className="cursor-pointer border border-[#888888] rounded-[8px] text-[#888888] p-2"
+              >
+                <MoveLeft />
+              </div>
+              <div className="cursor-pointer border border-[#888888] rounded-[8px] text-[#888888] p-2">
+                <Trash2 />
+              </div>
+            </div>
+            <div className="text-center space-y-6">
+              <h1 className="text-2xl font-bold text-gray-900">
+                New Update for Writers
+              </h1>
+              <p className="text-gray-600">
+                Step up your writing with our latest update
+              </p>
+
+             
+                       <div className="md:w-[400px] w-full mx-auto">
+                         <Image
+                           src={soon}
+                           alt="Notification Banner"
+                        //    width={100}
+                        //    height={100}
+                           className="w-full border "
+                         />
+                       </div>
+
+              <div className="space-y-4 text-gray-600">
+                <p>
+                  Compete against players worldwide, climb the global rankings,
+                  and prove your skills. Test your strategy, outmaneuver your
+                  opponents, and claim your place at the top. Glory awaits!
+                </p>
+              </div>
+
+              <div className="pt-6 border-t border-gray-200">
+                <p className="text-sm text-gray-500">Sent; Today 12:18 PM</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/reader-dashboard/notifications/page.tsx b/src/app/dashboard/readers/notifications/page.tsx
similarity index 100%
rename from src/app/reader-dashboard/notifications/page.tsx
rename to src/app/dashboard/readers/notifications/page.tsx
diff --git a/src/app/dashboard/readers/page.tsx b/src/app/dashboard/readers/page.tsx
new file mode 100644
index 0000000..83e8438
--- /dev/null
+++ b/src/app/dashboard/readers/page.tsx
@@ -0,0 +1,18 @@
+"use-client";
+import { Header } from "@/components/dashboard/header";
+
+export default function DashboardHome() {
+  return (
+    <>
+      <Header title="Dashboard" />
+      <div className="space-y-6">
+        <div className="flex flex-col items-center justify-center h-screen">
+          <h1 className="text-2xl font-bold text-gray-800">Reader Dashboard</h1>
+          <p className="text-gray-600 mt-2">
+            Welcome to your personalized reading space!
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/reader-dashboard/profile/following/page.tsx b/src/app/dashboard/readers/profile/following/page.tsx
similarity index 100%
rename from src/app/reader-dashboard/profile/following/page.tsx
rename to src/app/dashboard/readers/profile/following/page.tsx
diff --git a/src/app/dashboard/readers/profile/layout.tsx b/src/app/dashboard/readers/profile/layout.tsx
new file mode 100644
index 0000000..b62ab57
--- /dev/null
+++ b/src/app/dashboard/readers/profile/layout.tsx
@@ -0,0 +1,121 @@
+"use client";
+import React, { useState } from "react";
+import { X } from "lucide-react";
+import { usePathname, useRouter } from "next/navigation";
+import Link from "next/link";
+import { MobileMenuContext } from "@/hooks/useMobileMenu";
+import NavBar from "@/components/landingpage/NavBar";
+
+interface ReaderProfileLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function ReaderProfileLayout({
+  children,
+}: ReaderProfileLayoutProps) {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const navItems = [
+    {
+      label: "Profile Details",
+      href: "/dashboard/readers/profile",
+    },
+    {
+      label: "Following",
+      href: "/dashboard/readers/profile/following",
+    },
+    {
+      label: "Preferences",
+      href: "/dashboard/readers/profile/preferences",
+    },
+    {
+      label: "Privacy Settings",
+      href: "/dashboard/readers/profile/privacy",
+    },
+    {
+      label: "Sign Out",
+      href: "/dashboard/readers/profile/sign-out",
+    },
+  ];
+
+  return (
+    <MobileMenuContext.Provider
+      value={{ openMobileMenu: () => setIsMobileMenuOpen(true) }}
+    >
+      <div className="min-h-screen bg-gray-50">
+        <NavBar />
+        <div className="flex">
+          {/* Desktop Sidebar */}
+          <div className="hidden lg:block w-64 min-h-screen">
+            <div className="p-6">
+              <nav className="space-y-2">
+                {navItems.map((item) => (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    className={`block px-4 py-3 rounded-lg text-sm transition-colors ${
+                      pathname === item.href
+                        ? "bg-gray-200 text-gray-900 font-medium"
+                        : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
+                    }`}
+                  >
+                    {item.label}
+                  </Link>
+                ))}
+              </nav>
+            </div>
+          </div>
+
+          {/* Mobile Menu Overlay */}
+          <div
+            className={`lg:hidden fixed inset-0 z-40 transition-all duration-300 ${
+              isMobileMenuOpen
+                ? " bg-transparent pointer-events-auto"
+                : "bg-transparent pointer-events-none"
+            }`}
+            onClick={() => setIsMobileMenuOpen(false)}
+          >
+            {/* Mobile Menu Panel */}
+            <div
+              className={`absolute p-4 z-50 top-16 right-0 bottom-0 w-full max-w-full bg-gray-50 shadow-xl transform transition-transform duration-300 ease-out ${
+                isMobileMenuOpen ? "translate-x-0" : "translate-x-full"
+              }`}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className="p-4 px-4 flex items-center justify-between">
+                <h2 className="text-lg font-semibold">Profile</h2>
+                <button
+                  onClick={() => setIsMobileMenuOpen(false)}
+                  className="p-1"
+                >
+                  <X size={20} className="text-gray-600" />
+                </button>
+              </div>
+              <nav className="p-4 space-y-2 bg-white">
+                {navItems.map((item) => (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    onClick={() => setIsMobileMenuOpen(false)}
+                    className={`block px-4 py-3 rounded-lg text-sm transition-colors ${
+                      pathname === item.href
+                        ? "bg-gray-100 text-gray-900 font-medium"
+                        : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
+                    }`}
+                  >
+                    {item.label}
+                  </Link>
+                ))}
+              </nav>
+            </div>
+          </div>
+
+          {/* Main Content */}
+          <div className="flex-1">{children}</div>
+        </div>
+      </div>
+    </MobileMenuContext.Provider>
+  );
+}
diff --git a/src/app/dashboard/readers/profile/page.tsx b/src/app/dashboard/readers/profile/page.tsx
new file mode 100644
index 0000000..2ddf229
--- /dev/null
+++ b/src/app/dashboard/readers/profile/page.tsx
@@ -0,0 +1,264 @@
+"use client";
+
+import type React from "react";
+
+import { useState, useRef, type ChangeEvent } from "react";
+import Image from "next/image";
+import { ArrowLeft } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useMobileMenu } from "@/hooks/useMobileMenu";
+import { Header } from "@/components/dashboard/header";
+interface ProfileFormData {
+  firstName: string;
+  lastName: string;
+  username: string;
+  email: string;
+  bio: string;
+  profilePicture: string | null;
+}
+
+export default function ProfileDetailsPage() {
+  const router = useRouter();
+  const { openMobileMenu } = useMobileMenu();
+  const [formData, setFormData] = useState<ProfileFormData>({
+    firstName: "Faith",
+    lastName: "Haruna",
+    username: "Faith_Haruna",
+    email: "example@gmail.com",
+    bio: "",
+    profilePicture: null,
+  });
+
+  const [preview, setPreview] = useState<string | null>(
+    "/reader-profile-dummy-image.png"
+  );
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleInputChange = (
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleImageUpload = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = () => {
+      setPreview(reader.result as string);
+      setFormData((prev) => ({
+        ...prev,
+        profilePicture: reader.result as string,
+      }));
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const triggerFileInput = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Form submitted:", formData);
+  };
+
+  return (
+    <>
+      <Header title="Profile" />
+      <div className="bg-white m-4 md:m-6 rounded-xl">
+        {/* Mobile Header */}
+        <div className="lg:hidden bg-gray-50 p-4 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <button onClick={openMobileMenu} className="p-1">
+              <ArrowLeft size={20} className="text-gray-600" />
+            </button>
+            <h1 className="text-lg font-semibold text-gray-800">Profile</h1>
+          </div>
+          <button className="px-4 py-2 bg-blue-50 text-blue-600 rounded-full text-sm font-medium">
+            Edit Profile
+          </button>
+        </div>
+
+        <div className="p-6 max-w-4xl mx-auto">
+          <form onSubmit={handleSubmit} className="space-y-8">
+            {/* Profile Picture Section */}
+            <div className="flex flex-col items-center text-center ">
+              <div className="relative mb-4">
+                <div className="w-32 h-32 rounded-full overflow-hidden ">
+                  {preview ? (
+                    <Image
+                      src={preview || "/placeholder.svg"}
+                      alt="Profile Preview"
+                      width={160}
+                      height={160}
+                      className="object-cover w-full h-full"
+                    />
+                  ) : (
+                    <div className="w-full h-full flex items-center justify-center bg-pink-100">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="h-16 w-16 text-pink-300"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+                        />
+                      </svg>
+                    </div>
+                  )}
+                </div>
+                <button
+                  type="button"
+                  onClick={triggerFileInput}
+                  className="absolute bottom-0 right-0 bg-white border border-gray-300 rounded-full px-3 py-1 text-xs text-gray-600 shadow-sm"
+                >
+                  Change
+                </button>
+                <input
+                  type="file"
+                  ref={fileInputRef}
+                  onChange={handleImageUpload}
+                  accept="image/*"
+                  className="hidden"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <div className="flex gap-x-2">
+                  {" "}
+                  <h2 className="text-lg font-semibold text-gray-900">
+                    {formData.username}
+                  </h2>
+                  <div className="flex items-center justify-center gap-2 px-3 py-1 border border-blue-600 bg-blue-50 rounded-full ">
+                    <span className="bg-gray-300 rounded-full h-4 w-4"></span>
+                    <span className=" text-gray-900 text-sm font-medium">
+                      Enthusiast
+                    </span>
+                  </div>
+                </div>
+                <p className="text-xs text-gray-500">ID: CLRD00010</p>
+                <p className="text-sm text-gray-500">
+                  Following{" "}
+                  <span className="text-blue-600 font-medium">17</span>
+                </p>
+              </div>
+            </div>
+
+            {/* Form Fields */}
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+              <div>
+                <label
+                  htmlFor="firstName"
+                  className="block text-sm font-medium text-gray-600 mb-2"
+                >
+                  First Name
+                </label>
+                <input
+                  type="text"
+                  id="firstName"
+                  name="firstName"
+                  value={formData.firstName}
+                  onChange={handleInputChange}
+                  className="w-full p-3 border text-sm text-gray-400 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent placeholder:text-gray-300"
+                  placeholder="Faith"
+                />
+              </div>
+
+              <div>
+                <label
+                  htmlFor="lastName"
+                  className="block text-sm font-medium text-gray-600 mb-2"
+                >
+                  Last Name
+                </label>
+                <input
+                  type="text"
+                  id="lastName"
+                  name="lastName"
+                  value={formData.lastName}
+                  onChange={handleInputChange}
+                  className="w-full p-3 border text-sm text-gray-400 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  placeholder="Haruna"
+                />
+              </div>
+
+              <div>
+                <label
+                  htmlFor="username"
+                  className="block text-sm font-medium text-gray-600 mb-2"
+                >
+                  Username
+                </label>
+                <input
+                  type="text"
+                  id="username"
+                  name="username"
+                  value={formData.username}
+                  onChange={handleInputChange}
+                  className="w-full p-3 border text-sm text-gray-400 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  placeholder="Faith_Haruna"
+                />
+              </div>
+
+              <div>
+                <label
+                  htmlFor="email"
+                  className="block text-sm font-medium text-gray-600 mb-2"
+                >
+                  Email Address
+                </label>
+                <input
+                  type="email"
+                  id="email"
+                  name="email"
+                  value={formData.email}
+                  onChange={handleInputChange}
+                  className="w-full p-3 border text-sm text-gray-400 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  placeholder="example@gmail.com"
+                />
+              </div>
+            </div>
+
+            <div>
+              <label
+                htmlFor="bio"
+                className="block text-sm font-medium text-gray-600 mb-2"
+              >
+                Bio
+              </label>
+              <textarea
+                id="bio"
+                name="bio"
+                value={formData.bio}
+                onChange={handleInputChange}
+                className="w-full p-3 border text-sm text-gray-400 border-gray-300 rounded-lg h-32 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+                placeholder="Enter your bio"
+              />
+            </div>
+
+            {/* Desktop Edit Button */}
+            <div className="hidden lg:flex justify-start w-1/2">
+              <button
+                type="submit"
+                className="px-8 w-full py-3 bg-gradient-to-b from-[#EDF7FF] via-[#cee6f9] to-[#5f9efd] text-gray-600 rounded-lg font-medium hover:bg-blue-100 transition-colors"
+              >
+                Edit Profile
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/reader-dashboard/profile/preferences/page.tsx b/src/app/dashboard/readers/profile/preferences/page.tsx
similarity index 100%
rename from src/app/reader-dashboard/profile/preferences/page.tsx
rename to src/app/dashboard/readers/profile/preferences/page.tsx
diff --git a/src/app/reader-dashboard/profile/privacy/page.tsx b/src/app/dashboard/readers/profile/privacy/page.tsx
similarity index 100%
rename from src/app/reader-dashboard/profile/privacy/page.tsx
rename to src/app/dashboard/readers/profile/privacy/page.tsx
diff --git a/src/app/reader-dashboard/profile/sign-out/page.tsx b/src/app/dashboard/readers/profile/sign-out/page.tsx
similarity index 100%
rename from src/app/reader-dashboard/profile/sign-out/page.tsx
rename to src/app/dashboard/readers/profile/sign-out/page.tsx
diff --git a/src/app/dashboard/readers/reading-stats/page.tsx b/src/app/dashboard/readers/reading-stats/page.tsx
new file mode 100644
index 0000000..6c663f4
--- /dev/null
+++ b/src/app/dashboard/readers/reading-stats/page.tsx
@@ -0,0 +1,22 @@
+"use-client";
+import { Header } from "@/components/dashboard/header";
+
+export default function DashboardHome() {
+  return (
+    <>
+    <Header title="Reading Stats"  />
+      <div className="space-y-6">
+      <div className="flex flex-col items-center justify-center h-screen">
+        <h1 className="text-2xl font-bold text-gray-800">Reading stats</h1>
+        <p className="text-gray-600 mt-2">Welcome to your personalized reading space!</p>
+      </div>
+    </div>
+    </>
+  
+  );
+}
+
+
+
+
+
diff --git a/src/app/reader-dashboard/stats-and-achievements/page.tsx b/src/app/dashboard/readers/stats-and-achievements/page.tsx
similarity index 100%
rename from src/app/reader-dashboard/stats-and-achievements/page.tsx
rename to src/app/dashboard/readers/stats-and-achievements/page.tsx
diff --git a/src/app/dashboard/readers/transactions/page.tsx b/src/app/dashboard/readers/transactions/page.tsx
new file mode 100644
index 0000000..d0bbfb1
--- /dev/null
+++ b/src/app/dashboard/readers/transactions/page.tsx
@@ -0,0 +1,340 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react";
+import { Header } from "@/components/dashboard/header";
+import stk from "../../../../../public/image 2.svg"
+import Image from "next/image";
+import TransactionDetail from "./transaction-details";
+
+const transactionData = [
+  {
+    id: "Tran-124B",
+    type: "Monthly Subscription",
+    amount: "100.00 STRK",
+    status: "Successful",
+    date: "26 April",
+    details: {
+      title: "Monthly Subscription",
+      subtitle: "Premium Plan",
+      category: "Subscription",
+      amountPaid: "100.00 STRK",
+      platformCommission: "5.00 STRK",
+      transactionType: "Monthly Subscription",
+      status: "Successful",
+      date: "26 April, 2025",
+      time: "14:32",
+      nftId: "#0001",
+      buyer: "USER-0001",
+      transactionId: "TRANS-00110",
+      transactionHash: "0x5a3f7b...d6e7f8g",
+      confirmationStatus: "12/12",
+    },
+  },
+  {
+    id: "Tran-124B",
+    type: "Book Purchase",
+    amount: "800.45 STRK",
+    status: "Successful",
+    date: "25 April",
+    details: {
+      title: "99 Laws of Power",
+      subtitle: "NFT Edition",
+      category: "eBook",
+      amountPaid: "320.05 STRK",
+      platformCommission: "32 STRK",
+      transactionType: "Book Purchase",
+      status: "Successful",
+      date: "12 March, 2025",
+      time: "16:32",
+      nftId: "#0002",
+      buyer: "USER-0001",
+      transactionId: "TRANS-00112",
+      transactionHash: "0x5a3f7b...d6e7f8g",
+      confirmationStatus: "12/12",
+    },
+  },
+  {
+    id: "Tran-124B",
+    type: "Book Purchase",
+    amount: "56.78 STRK",
+    status: "Failed",
+    date: "20 April",
+    details: {
+      title: "Digital Marketing Guide",
+      subtitle: "Standard Edition",
+      category: "eBook",
+      amountPaid: "56.78 STRK",
+      platformCommission: "2.84 STRK",
+      transactionType: "Book Purchase",
+      status: "Failed",
+      date: "20 April, 2025",
+      time: "10:15",
+      nftId: "#0003",
+      buyer: "USER-0001",
+      transactionId: "TRANS-00113",
+      transactionHash: "0x5a3f7b...d6e7f8g",
+      confirmationStatus: "0/12",
+    },
+  },
+  {
+    id: "Tran-124B",
+    type: "NFT Purchase",
+    amount: "200.5 STRK",
+    status: "Successful",
+    date: "18 April",
+    details: {
+      title: "Crypto Art Collection",
+      subtitle: "Limited Edition",
+      category: "NFT",
+      amountPaid: "200.5 STRK",
+      platformCommission: "10.03 STRK",
+      transactionType: "NFT Purchase",
+      status: "Successful",
+      date: "18 April, 2025",
+      time: "09:45",
+      nftId: "#0004",
+      buyer: "USER-0001",
+      transactionId: "TRANS-00114",
+      transactionHash: "0x5a3f7b...d6e7f8g",
+      confirmationStatus: "12/12",
+    },
+  },
+  {
+    id: "Tran-124B",
+    type: "NFT Purchase",
+    amount: "540.569 STRK",
+    status: "Successful",
+    date: "18 April",
+    details: {
+      title: "Digital Collectible",
+      subtitle: "Rare Edition",
+      category: "NFT",
+      amountPaid: "540.569 STRK",
+      platformCommission: "27.03 STRK",
+      transactionType: "NFT Purchase",
+      status: "Successful",
+      date: "18 April, 2025",
+      time: "11:20",
+      nftId: "#0005",
+      buyer: "USER-0001",
+      transactionId: "TRANS-00115",
+      transactionHash: "0x5a3f7b...d6e7f8g",
+      confirmationStatus: "12/12",
+    },
+  },
+];
+
+export default function TransactionPage() {
+  const [activeFilter, setActiveFilter] = useState("This Week");
+  const [fromDate, setFromDate] = useState("");
+  const [toDate, setToDate] = useState("");
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [selectedTransaction, setSelectedTransaction] = useState<any>(null);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handleViewDetails = (transaction: any) => {
+    setSelectedTransaction(transaction);
+  };
+
+  const closeModal = () => {
+    setSelectedTransaction(null);
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <Header title="Transactions" />
+
+      {/* Content */}
+      <div className="flex-1 p-4 lg:p-6 overflow-auto mt-16">
+        <div className="bg-white rounded-lg border border-gray-200">
+          {/* Transaction History Header */}
+          <div className="p-4 lg:p-6 border-b border-gray-200">
+            <h2 className="text-lg font-medium text-[#B0B0B0] mb-4">
+              Transaction History
+            </h2>
+
+            {/* Filter Controls */}
+            <div className="flex flex-wrap items-center gap-3 justify-between">
+              <div className="flex items-center gap-2">
+                {["This Week", "This Month", "This Year"].map((filter) => (
+                  <Button
+                    key={filter}
+                    variant={activeFilter === filter ? "default" : "outline"}
+                    size="sm"
+                    onClick={() => setActiveFilter(filter)}
+                    className={
+                      activeFilter === filter
+                        ? "bg-[#F6F6F6] text-[#454545] hover:bg-none hover:text-white"
+                        : ""
+                    }
+                  >
+                    {filter}
+                  </Button>
+                ))}
+
+                <Input
+                  placeholder="dd/mm/yyyy"
+                  value={fromDate}
+                  onChange={(e) => setFromDate(e.target.value)}
+                  className="border border-[#E7E7E7] placeholder:text-[#D1D1D1] w-32 h-9"
+                />
+
+                <span className="text-gray-500 text-sm">to</span>
+
+                <Input
+                  placeholder="dd/mm/yyyy"
+                  value={toDate}
+                  onChange={(e) => setToDate(e.target.value)}
+                  className="w-32 h-9 border border-[#E7E7E7] placeholder:text-[#D1D1D1]"
+                />
+
+                <Button
+                  size="sm"
+                  className="bg-[#E7E7E7] text-[#5D5D5D] hover:text-white hover:bg-gray-800"
+                >
+                  Apply
+                </Button>
+              </div>
+
+              <Button variant="outline" size="sm">
+                Filter by
+              </Button>
+            </div>
+          </div>
+
+          {/* Table */}
+          <div className="overflow-x-auto">
+            <Table>
+              <TableHeader>
+                <TableRow className="bg-[#EDF7FF]">
+                  <TableHead className="font-medium text-[#5D5D5D]">
+                    Transaction ID
+                  </TableHead>
+                  <TableHead className="font-medium text-[#5D5D5D]">
+                    Transaction Type
+                  </TableHead>
+                  <TableHead className="font-medium text-[#5D5D5D]">
+                    Amount (STRK)
+                  </TableHead>
+                  <TableHead className="font-medium text-[#5D5D5D]">
+                    Status
+                  </TableHead>
+                  <TableHead className="font-medium text-[#5D5D5D]">
+                    Date
+                  </TableHead>
+                  <TableHead></TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {transactionData.map((transaction, index) => (
+                  <TableRow
+                    key={index}
+                    className="hover:bg-gray-50 text-[#5D5D5D]"
+                  >
+                    <TableCell className="font-medium">
+                      {transaction.id}
+                    </TableCell>
+                    <TableCell>{transaction.type}</TableCell>
+                    <TableCell>
+                      <div className="flex items-center gap-2">
+                        <div className="w-4 h-4 rounded-full flex items-center justify-center">
+                          <Image src={stk} alt="stk" />
+                        </div>
+                        {transaction.amount}
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <Badge
+                        variant="outline"
+                        className={
+                          transaction.status === "Successful"
+                            ? "bg-green-50 text-green-700 border-green-200"
+                            : "bg-red-50 text-red-700 border-red-200"
+                        }
+                      >
+                        {transaction.status}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-gray-600">
+                      {transaction.date}
+                    </TableCell>
+                    <TableCell>
+                      <Button
+                        variant="link"
+                        className="text-blue-600 hover:text-blue-800 p-0"
+                        onClick={() => handleViewDetails(transaction)}
+                      >
+                        View Details
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+
+          {/* Pagination */}
+          <div className="p-4 lg:p-6 border-t border-gray-200">
+            <div className="flex items-center justify-between">
+              <p className="text-sm text-gray-500">Showing 1 to 5 of 12</p>
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="w-8 h-8"
+                  disabled
+                >
+                  <ChevronLeft className="w-4 h-4 text-gray-400" />
+                </Button>
+
+                <Button variant="ghost" size="icon" className="w-8 h-8">
+                  <ChevronRight className="w-4 h-4 text-gray-400" />
+                </Button>
+
+                <span className="text-blue-600 font-medium text-base mx-2">
+                  1
+                </span>
+                <span className="text-gray-400 font-medium text-base mx-2">
+                  2
+                </span>
+                <span className="text-gray-400 font-medium text-base mx-2">
+                  3
+                </span>
+                <span className="text-gray-400 font-medium text-base mx-2">
+                  ...
+                </span>
+                <span className="text-gray-400 font-medium text-base mx-2">
+                  10
+                </span>
+                <span className="text-gray-400 font-medium text-base mx-2">
+                  11
+                </span>
+                <span className="text-gray-400 font-medium text-base mx-2">
+                  12
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Transaction Detail Modal */}
+      <TransactionDetail closeModal={closeModal} selectedTransaction={selectedTransaction} />
+    </div>
+  );
+}
diff --git a/src/app/dashboard/readers/transactions/transaction-details.tsx b/src/app/dashboard/readers/transactions/transaction-details.tsx
new file mode 100644
index 0000000..4d73f14
--- /dev/null
+++ b/src/app/dashboard/readers/transactions/transaction-details.tsx
@@ -0,0 +1,381 @@
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft, Download, X } from "lucide-react";
+import Image from "next/image";
+import stk from "../../../../../public/image 2.svg";
+
+interface TransactionDetailsProps {
+  selectedTransaction: {
+    details: {
+      title: string;
+      subtitle: string;
+      category: string;
+      amountPaid: string | number;
+      platformCommission: string | number;
+      transactionType: string;
+      nftId: string;
+      status: string;
+      buyer: string;
+      date: string;
+      transactionId: string;
+      time: string;
+      transactionHash: string;
+      confirmationStatus: string;
+    };
+  } | null;
+  closeModal: () => void;
+}
+
+export default function TransactionDetail({ selectedTransaction, closeModal }: TransactionDetailsProps) {
+    const exportPDF = () => {
+      alert("Exporting transaction as PDF...");
+    };
+  return (
+    <>
+      {/* Transaction Detail Modal */}
+      {selectedTransaction && (
+        <>
+          {/* Backdrop */}
+          <div
+            className="fixed inset-0 bg-white/50   backdrop-blur-xs bg-opacity-50 z-50"
+            onClick={closeModal}
+          />
+
+          {/* Desktop Modal */}
+          <div className="hidden lg:block fixed inset-0 z-50 flex items-center justify-center p-4  left-3 top-1/6 transform translate-y- translate-x-1/4">
+            <div className="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-auto">
+              {/* Header */}
+              <div className="flex items-center justify-center relative p-6 border-b border-gray-200">
+                <h2 className="text-xl font-medium text-gray-600">
+                  Transaction Details
+                </h2>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={closeModal}
+                  className="absolute right-6"
+                >
+                  <X className="w-5 h-5 text-gray-400" />
+                </Button>
+              </div>
+
+              {/* Content */}
+              <div className="p-6">
+                {/* Top Section - Book Info and Payment */}
+                <div className="border border-gray-200 rounded-lg p-6 mb-6">
+                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                    {/* Left Side - Book Info */}
+                    <div className="flex gap-4 border-r ">
+                      <div className="w-32 h-40 bg-gray-300 rounded-lg flex-shrink-0"></div>
+                      <div className="flex-1 flex flex-col justify-center">
+                        <h3 className="text-2xl font-medium text-gray-900 mb-3">
+                          {selectedTransaction.details.title}
+                        </h3>
+                        <p className="text-gray-600 mb-4 text-lg">
+                          {selectedTransaction.details.subtitle}
+                        </p>
+                        <p className="text-gray-500 text-lg">
+                          {selectedTransaction.details.category}
+                        </p>
+                      </div>
+                    </div>
+
+                    {/* Right Side - Payment Details */}
+                    <div className="space-y-6 flex flex-col justify-center">
+                      <div className="flex justify-between items-center">
+                        <span className="text-gray-600 text-lg">
+                          Amount Paid
+                        </span>
+                        <div className="flex items-center gap-2">
+                          <div className="w-5 h-5 bg-purple-600 rounded-full flex items-center justify-center">
+                            <div className="w-4 h-4 rounded-full flex items-center justify-center">
+                              <Image src={stk} alt="stk" />
+                            </div>
+                          </div>
+                          <span className="font-medium text-lg">
+                            {selectedTransaction.details.amountPaid}
+                          </span>
+                        </div>
+                      </div>
+                      <div className="flex justify-between items-center">
+                        <span className="text-gray-600 text-lg">
+                          Platform Commission
+                        </span>
+                        <div className="flex items-center gap-2">
+                          <div className="w-5 h-5 bg-purple-600 rounded-full flex items-center justify-center">
+                            <div className="w-4 h-4 rounded-full flex items-center justify-center">
+                              <Image src={stk} alt="stk" />
+                            </div>
+                          </div>
+                          <span className="font-medium text-lg">
+                            {selectedTransaction.details.platformCommission}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Bottom Section - Transaction Details */}
+                <div className="border border-gray-200 rounded-lg p-6 mb-8 relative">
+                  <span className="h-[80%] bg-gray-100 left-1/2 absolute w-[2px]" />
+                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-x-12 gap-y-6">
+                    <div className="flex justify-between items-center">
+                      <span className="text-gray-600 text-lg">
+                        Transaction Type
+                      </span>
+                      <span className="font-medium text-lg">
+                        {selectedTransaction.details.transactionType}
+                      </span>
+                    </div>
+
+                    <div className="flex justify-between items-center">
+                      <span className="text-gray-600 text-lg">NFT ID</span>
+                      <span className="font-medium text-lg">
+                        {selectedTransaction.details.nftId}
+                      </span>
+                    </div>
+
+                    <div className="flex justify-between items-center">
+                      <span className="text-gray-600 text-lg">Status</span>
+                      <Badge
+                        variant="outline"
+                        className={`text-base px-4 py-1 ${
+                          selectedTransaction.details.status === "Successful"
+                            ? "bg-green-50 text-green-700 border-green-300"
+                            : "bg-red-50 text-red-700 border-red-300"
+                        }`}
+                      >
+                        {selectedTransaction.details.status}
+                      </Badge>
+                    </div>
+
+                    <div className="flex justify-between items-center">
+                      <span className="text-gray-600 text-lg">Buyer</span>
+                      <span className="font-medium text-lg">
+                        {selectedTransaction.details.buyer}
+                      </span>
+                    </div>
+
+                    <div className="flex justify-between items-center">
+                      <span className="text-gray-600 text-lg">Date</span>
+                      <span className="font-medium text-lg">
+                        {selectedTransaction.details.date}
+                      </span>
+                    </div>
+
+                    <div className="flex justify-between items-center">
+                      <span className="text-gray-600 text-lg">
+                        Transaction ID
+                      </span>
+                      <span className="font-medium text-lg">
+                        {selectedTransaction.details.transactionId}
+                      </span>
+                    </div>
+
+                    <div className="flex justify-between items-center">
+                      <span className="text-gray-600 text-lg">Time</span>
+                      <span className="font-medium text-lg">
+                        {selectedTransaction.details.time}
+                      </span>
+                    </div>
+
+                    <div className="flex justify-between items-center">
+                      <span className="text-gray-600 text-lg">
+                        Transaction Hash
+                      </span>
+                      <div className="flex items-center gap-2">
+                        <Download className="w-4 h-4 text-gray-400" />
+                        <span className="font-medium text-lg">
+                          {selectedTransaction.details.transactionHash}
+                        </span>
+                      </div>
+                    </div>
+
+                    <div className="flex justify-between items-center lg:col-span-2">
+                      <span className="text-gray-600 text-lg">
+                        Confirmation Status
+                      </span>
+                      <span className="font-medium text-lg">
+                        {selectedTransaction.details.confirmationStatus}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Action Buttons */}
+                <div className="flex gap-4">
+                  <Button
+                    variant="outline"
+                    onClick={closeModal}
+                    className="flex-1 h-12 text-base border-gray-300 bg-white hover:bg-gray-50"
+                  >
+                    Back
+                  </Button>
+                  <Button
+                    onClick={exportPDF}
+                    className="flex-1 h-12 text-base from-[#EDF7FF] to-[#096CFF] bg-gradient-to-l"
+                  >
+                    Export as PDF
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Mobile Modal */}
+          <div className="lg:hidden fixed inset-0 z-50 bg-white">
+            {/* Header */}
+            <div className="flex items-center gap-4 p-4 border-b border-gray-200">
+              <Button variant="ghost" size="icon" onClick={closeModal}>
+                <ArrowLeft className="w-5 h-5" />
+              </Button>
+              <h1 className="text-lg font-semibold">Transaction</h1>
+            </div>
+
+            {/* Content */}
+            <div className="p-4 overflow-auto h-full pb-32">
+              {/* Book Card */}
+              <div className="bg-white border border-gray-200 rounded-lg p-4 mb-6">
+                <div className="flex gap-4 mb-4">
+                  <div className="w-20 h-28 bg-gray-200 rounded-lg flex-shrink-0"></div>
+                  <div className="flex-1">
+                    <h3 className="text-lg font-semibold text-gray-900 mb-1">
+                      {selectedTransaction.details.title}
+                    </h3>
+                    <p className="text-gray-600 mb-1">
+                      {selectedTransaction.details.subtitle}
+                    </p>
+                    <p className="text-gray-500 text-sm">
+                      {selectedTransaction.details.category}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="space-y-3">
+                  <div className="flex justify-between items-center">
+                    <span className="text-gray-600">Amount Paid</span>
+                    <div className="flex items-center gap-2">
+                      <div className="w-4 h-4 bg-purple-600 rounded-full flex items-center justify-center">
+                        <div className="w-4 h-4 rounded-full flex items-center justify-center">
+                          <Image src={stk} alt="stk" />
+                        </div>
+                      </div>
+                      <span className="font-semibold">
+                        {selectedTransaction.details.amountPaid}
+                      </span>
+                    </div>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-gray-600">Platform Commission</span>
+                    <div className="flex items-center gap-2">
+                      <div className="w-4 h-4 bg-purple-600 rounded-full flex items-center justify-center">
+                        <div className="w-4 h-4 rounded-full flex items-center justify-center">
+                          <Image src={stk} alt="stk" />
+                        </div>
+                      </div>
+                      <span className="font-semibold">
+                        {selectedTransaction.details.platformCommission}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Transaction Details */}
+              <div className="bg-white border border-gray-200 rounded-lg p-4 mb-6">
+                <div className="space-y-4">
+                  {[
+                    {
+                      label: "Transaction Type",
+                      value: selectedTransaction.details.transactionType,
+                    },
+                    {
+                      label: "Status",
+                      value: selectedTransaction.details.status,
+                      isBadge: true,
+                    },
+                    {
+                      label: "Date",
+                      value: selectedTransaction.details.date,
+                    },
+                    {
+                      label: "Time",
+                      value: selectedTransaction.details.time,
+                    },
+                    {
+                      label: "NFT ID",
+                      value: selectedTransaction.details.nftId,
+                    },
+                    {
+                      label: "Buyer",
+                      value: selectedTransaction.details.buyer,
+                    },
+                    {
+                      label: "Transaction ID",
+                      value: selectedTransaction.details.transactionId,
+                    },
+                    {
+                      label: "Transaction Hash",
+                      value: selectedTransaction.details.transactionHash,
+                      hasIcon: true,
+                    },
+                    {
+                      label: "Confirmation Status",
+                      value: selectedTransaction.details.confirmationStatus,
+                    },
+                  ].map((item, index) => (
+                    <div
+                      key={index}
+                      className="flex justify-between items-center py-2"
+                    >
+                      <span className="text-gray-600">{item.label}</span>
+                      <div className="flex items-center gap-2">
+                        {item.hasIcon && (
+                          <Download className="w-4 h-4 text-gray-400" />
+                        )}
+                        {item.isBadge ? (
+                          <Badge
+                            variant="outline"
+                            className={
+                              item.value === "Successful"
+                                ? "bg-green-50 text-green-700 border-green-200"
+                                : "bg-red-50 text-red-700 border-red-200"
+                            }
+                          >
+                            {item.value}
+                          </Badge>
+                        ) : (
+                          <span className="font-medium text-right">
+                            {item.value}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            {/* Fixed Bottom Buttons */}
+            <div className="fixed bottom-0 left-0 right-0 p-4 bg-white border-t border-gray-200 space-y-3">
+              <Button
+                onClick={exportPDF}
+                className="w-full from-[#EDF7FF] to-[#096CFF] bg-gradient-to-l"
+              >
+                Export as PDF
+              </Button>
+              <Button
+                variant="outline"
+                onClick={closeModal}
+                className="w-full bg-transparent"
+              >
+                Back
+              </Button>
+            </div>
+          </div>
+        </>
+      )}
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/app/dashboard/readers/wishlist/page.tsx b/src/app/dashboard/readers/wishlist/page.tsx
new file mode 100644
index 0000000..8316594
--- /dev/null
+++ b/src/app/dashboard/readers/wishlist/page.tsx
@@ -0,0 +1,201 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Card, CardContent } from "@/components/ui/card";
+import { Search, Heart, Star, Images } from "lucide-react";
+import { Header } from "@/components/dashboard/header";
+import Image from "next/image";
+import nft from "../../../../../public/Group 13.svg"
+
+const books = [
+  {
+    id: 1,
+    title: "Native Invisibility",
+    author: "Darrin Collins",
+    price: "$10",
+    rating: 4.5,
+    series: "4 Series",
+    image: "/bookCover.png",
+    isLiked: true,
+    nft: false,
+  },
+  {
+    id: 2,
+    title: "Native Invisibility",
+    author: "Darrin Collins",
+    price: "$10",
+    rating: 4.5,
+    series: "4 Series",
+    image: "/bookCover.png",
+    isLiked: true,
+    nft: false,
+  },
+  {
+    id: 3,
+    title: "Native Invisibility",
+    author: "Darrin Collins",
+    price: "$10",
+    rating: 4.5,
+    series: "",
+    image: "/bookCover.png",
+    isLiked: true,
+    nft: true,
+  },
+  {
+    id: 4,
+    title: "Native Invisibility",
+    author: "Darrin Collins",
+    price: "$10",
+    rating: 4.5,
+    series: "",
+    image: "/bookCover.png",
+    isLiked: true,
+    nft: false,
+  },
+];
+
+export default function WishlistPage() {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [bookType, setBookType] = useState("all");
+  const [genre, setGenre] = useState("all");
+  const [likedBooks, setLikedBooks] = useState<number[]>([1, 2, 3, 4]);
+
+  const toggleLike = (bookId: number) => {
+    setLikedBooks((prev) =>
+      prev.includes(bookId)
+        ? prev.filter((id) => id !== bookId)
+        : [...prev, bookId]
+    );
+  };
+
+  const buyAllBooks = () => {
+    alert(`Purchasing ${likedBooks.length} books from wishlist!`);
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <Header title="Wishlist" />
+
+      {/* Content */}
+      <div className="flex-1 mt-16 p-4 lg:p-6 overflow-auto">
+        {/* Search and Filters */}
+        <div className="py-4">
+          <div className="">
+            <div className="gap-4 flex items-center relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+              <Input
+                placeholder="What are we looking for"
+                className="pl-10 w-[400px] placeholder:text-[#B0B0B0]"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+              <div className="right-3 flex gap-2">
+                <Select value={bookType} onValueChange={setBookType}>
+                  <SelectTrigger className="w-32 text-[#888888]">
+                    <SelectValue placeholder="Book Type" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">All Types</SelectItem>
+                    <SelectItem value="ebook">E-book</SelectItem>
+                    <SelectItem value="audiobook">Audiobook</SelectItem>
+                  </SelectContent>
+                </Select>
+                <Select value={genre} onValueChange={setGenre}>
+                  <SelectTrigger className="w-32 text-[#888888]">
+                    <SelectValue placeholder="Genre" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">All Genres</SelectItem>
+                    <SelectItem value="fiction">Fiction</SelectItem>
+                    <SelectItem value="mystery">Mystery</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Books Section */}
+        <div className="bg-white rounded-lg border border-gray-200">
+          <div className="p-4 lg:p-6">
+            <div className="flex items-center justify-between mb-6">
+              <h2 className="text-lg font-medium">Books</h2>
+              <Button
+                onClick={buyAllBooks}
+                className="bg-blue-600 hover:bg-blue-700"
+              >
+                Buy All({likedBooks.length}) Now
+              </Button>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+              {books.map((book) => (
+                <Card key={book.id} className="relative group">
+                  <CardContent className="p-4">
+                    <div className="relative mb-4">
+                      <Image
+                        src={book.image || "/bookCover.png"}
+                        alt={book.title}
+                        width={50}
+                        height={50}
+                        className="w-1/2 mx-auto h-48 object-cover rounded-lg"
+                      />
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="absolute top-2 right-2 bg-white/80 hover:bg-white"
+                        onClick={() => toggleLike(book.id)}
+                      >
+                        <Heart
+                          className={`w-4 h-4 ${
+                            likedBooks.includes(book.id)
+                              ? "fill-red-500 text-red-500"
+                              : "text-gray-400"
+                          }`}
+                        />
+                      </Button>
+                    </div>
+                          <div className="space-y-2">
+                              {book.nft && <Image src={nft} alt="nft"/>}
+                      <h3 className="font-medium text-gray-900">
+                        {book.title}
+                      </h3>
+                      <div className="flex items-center gap-1">
+                        <span className="text-sm text-gray-600">
+                          By {book.author}
+                        </span>
+                        <div className="w-2 h-2 bg-blue-600 rounded-full"></div>
+                      </div>
+                      <div className="flex items-center justify-between">
+                        <span className="font-semibold">{book.price}</span>
+                        <div className="flex items-center gap-1">
+                          <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
+                          <span className="text-sm">{book.rating}</span>
+                        </div>
+                      </div>
+                      {book.series && (
+                        <div className="flex gap-1">
+                          <Images className="text-base w-4" />
+                          {book.series}
+                        </div>
+                      )}
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/dashboard/writers/analytics/page.tsx b/src/app/dashboard/writers/analytics/page.tsx
new file mode 100644
index 0000000..658a547
--- /dev/null
+++ b/src/app/dashboard/writers/analytics/page.tsx
@@ -0,0 +1,32 @@
+import AnalyticsHeader from "@/components/analytics/analytics-header";
+import AnalyticsStatsGrid from "@/components/analytics/analytics-stats-grid";
+import AnalyticsTabs from "@/components/analytics/analytics-tabs";
+import { Header } from "@/components/dashboard/header";
+
+export default function AnalyticsDashboard() {
+  return (
+
+    <>
+     <Header title="Analytics" />
+      <div className="min-h-screen bg-gray-50 p-6">
+      <div className="max-w-7xl mx-auto space-y-6">
+        {/* Header with back button */}
+        <AnalyticsHeader />
+        {/* Top Stats Grid */}
+        <AnalyticsStatsGrid />
+
+        <div className="flex flex-col bg-white rounded-lg border border-gray-200/40 p-6 gap-6">
+          {/* Book Performance Stats */}
+          <div className="bg-white p-3">
+            <h2 className="text-xl px-4 font-bold text-gray-400 mb-4">
+              Book Performance Stats
+            </h2>
+            <AnalyticsTabs />
+          </div>
+        </div>
+      </div>
+    </div>
+    </>
+  
+  );
+}
diff --git a/src/app/writer-dashboard/components/notification-detail.tsx b/src/app/dashboard/writers/components/notification-detail.tsx
similarity index 100%
rename from src/app/writer-dashboard/components/notification-detail.tsx
rename to src/app/dashboard/writers/components/notification-detail.tsx
diff --git a/src/app/dashboard/writers/discussions-and-clubs/ClubCard.tsx b/src/app/dashboard/writers/discussions-and-clubs/ClubCard.tsx
new file mode 100644
index 0000000..ffbe093
--- /dev/null
+++ b/src/app/dashboard/writers/discussions-and-clubs/ClubCard.tsx
@@ -0,0 +1,99 @@
+import React from "react";
+import { Globe, PlusIcon } from "lucide-react";
+import { ClubDetailsProps } from "@/lib/types";
+
+interface CardProps extends ClubDetailsProps {
+  onOpen: (club: ClubDetailsProps) => void;
+}
+
+export default function ClubCard({
+  id,
+  name,
+  isPublic,
+  memberCount,
+  sessionsInfo,
+  unreadNotifications,
+  authorAvatars,
+  onOpen,
+}: CardProps) {
+  return (
+    <div className="flex cursor-pointer hover:shadow-sm items-center justify-between p-4 bg-white rounded-lg transition-shadow border border-[#E7E7E7] duration-300  w-full">
+      <div
+        className="flex-shrink-0 w-30 h-30 bg-[#D9D9D9] rounded-lg"
+        aria-hidden="true"
+      ></div>
+      <div className="flex flex-col flex-grow ml-4 min-w-0">
+        <div className="flex items-center space-x-2">
+          <h2 className="text-lg font-semibold text-gray-900 truncate">
+            {name}
+          </h2>
+          {unreadNotifications > 0 && (
+            <span
+              className="flex items-center justify-center w-6 h-6 text-xs text-white bg-red-600 rounded-full"
+              aria-label="3 unread notifications"
+            >
+              {unreadNotifications}
+            </span>
+          )}
+        </div>
+        <div className="flex flex-wrap items-center text-sm space-x-3 mt-2 mb-1">
+          <div className="flex text-sm items-center space-x-1 border border-[#D1D1D1] rounded-full px-2 py-0.5">
+            <Globe className="w-4 h-4 text-[#888888] " aria-hidden="true" />
+            <span className="text-[#888888]">
+              {isPublic ? "Public" : "Private"}
+            </span>
+          </div>
+          <div className="flex text-sm items-center space-x-1 border border-[#D1D1D1] rounded-full px-2 py-0.5">
+            <PlusIcon className="text-sm w-3 h-3" />
+            <span className="text-[#888888]">{memberCount}</span>
+          </div>
+
+          <div className="flex text-sm items-center space-x-1 border border-[#D1D1D1] rounded-full px-2 py-0.5">
+            <span className="text-[#888888]">{sessionsInfo}</span>
+          </div>
+        </div>
+
+        <div className="flex items-center space-x-2 mt-2 ">
+          <div className="flex -space-x-2">
+            {authorAvatars &&
+              authorAvatars.length > 0 &&
+              authorAvatars.map((author) => (
+                <img
+                  src={
+                    author ?? "https://randomuser.me/api/portraits/men/32.jpg"
+                  }
+                  alt="Author 1"
+                  className="w-6 h-6 rounded-full border-2 border-white"
+                />
+              ))}
+          </div>
+
+          {authorAvatars && authorAvatars.length > 0 && (
+            <span className="truncate text-[#5D5D5D] ">
+              {authorAvatars.length} Authors you follow are members
+            </span>
+          )}
+        </div>
+      </div>
+      <button
+        onClick={() => {
+          onOpen({
+            id: id,
+            name,
+            isPublic,
+            memberCount,
+            sessionsInfo,
+            unreadNotifications,
+            authorAvatars,
+          });
+        }}
+        type="button"
+        className="text-[#0F265C] py-2 px-8     transition-colors duration-300 ease-in-out
+ rounded-[10px] bg-[linear-gradient(to_bottom,_#EDF7FF_100%,_#096CFF_30%)]
+ hover:bg-gray-200  "
+      >
+        Open
+      </button>
+    </div>
+  );
+}
diff --git a/src/app/dashboard/writers/discussions-and-clubs/[id]/page.tsx b/src/app/dashboard/writers/discussions-and-clubs/[id]/page.tsx
new file mode 100644
index 0000000..4747871
--- /dev/null
+++ b/src/app/dashboard/writers/discussions-and-clubs/[id]/page.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import { Header } from "@/components/dashboard/header";
+import { Camera, Mic } from "lucide-react";
+
+export default function LiveEventPage() {
+  return (
+    <div>
+      <Header title="Native Fantasy" />
+
+      <div className="flex flex-col items-start md:flex-row gap-x-10 p-4 md:max-w-[85rem] pt-20 px-10 ">
+        <div className="">
+          <div className="bg-white rounded-xl shadow overflow-hidden">
+            <div className="relative w-full h-[300px] md:h-[500px]">
+              <img
+                src="/live-event.png"
+                alt="Live Session"
+                className="object-cover w-full h-full"
+              />
+              <div className="flex">
+                <div
+                  className="  justify-end bg-[#F6F6F6] rounded-full py-1 px-1 absolute  top-2 right-2
+ flex items-center gap-1"
+                >
+                  <span className="bg-red-500 text-white text-xs font-medium px-2 py-1 rounded-full">
+                    🔴 Live
+                  </span>
+                  <span className="bg-white/80 text-gray-800 text-xs px-2 py-1 rounded-full">
+                    93
+                  </span>
+                </div>
+              </div>
+              <div className="absolute bottom-2 left-2 flex items-center gap-2 bg-white/70 px-3 py-1 rounded-full text-sm">
+                <div className="absolute bottom-3 left-3 bg-gray-100 rounded-full px-2 py-1 flex gap-2 shadow-md">
+                  <button className="w-10 h-10 flex items-center justify-center bg-white rounded-full border border-gray-300 shadow">
+                    <Camera className="w-5 h-5 text-blue-600" />
+                  </button>
+                  <button className="w-10 h-10 flex items-center justify-center bg-white rounded-full border border-gray-300 shadow">
+                    <Mic className="w-5 h-5 text-blue-600" />
+                  </button>
+                </div>
+              </div>
+              <button className="absolute bottom-2 right-2 px-4 py-1 bg-red-600/40 text-white text-sm rounded-full">
+                End Event
+              </button>
+            </div>
+
+            <div className="p-6">
+              <h2 className="text-xl font-semibold text-gray-900">
+                Native Invisibility
+              </h2>
+              <p className=" text-[#888888] mt-1">
+                By Darrin Collins <span className="text-blue-500">✔</span>
+              </p>
+              <p className=" text-[#888888] mt-4">
+                Vibrant book club dedicated to exploring the vast and magical
+                realms of fantasy literature. From epic sagas and dark fantasy
+                to urban magic and whimsical tales, we delve into all corners of
+                the genre.
+              </p>
+
+              <div className="mt-6 space-y-4">
+                <div className="flex items-center gap-4">
+                  <div className="w-10 h-10 bg-gray-200 rounded-full"></div>
+                  <div>
+                    <span className="text-xs text-gray-500">Host</span>
+                    <p className="text-sm font-medium text-gray-900">
+                      Aisha Musa
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-4">
+                  <div className="w-10 h-10 bg-gray-200 rounded-full"></div>
+                  <div>
+                    <span className="text-xs text-gray-500">Guest</span>
+                    <p className="text-sm font-medium text-gray-900">
+                      Hana Yamal
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-white rounded-xl shadow p-4 w-full  mt-6">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-md font-semibold text-gray-900">Viewers</h3>
+              <span className="text-sm bg-gray-100 px-3 py-1 rounded-full text-gray-600">
+                92 Watching
+              </span>
+            </div>
+            <ul className="divide-y divide-[#F6F6F6]">
+              {Array.from({ length: 4 }).map((_, i) => (
+                <li key={i} className="flex items-center gap-4 py-4">
+                  <div className="w-10 h-10 bg-gray-200 rounded-full" />
+                  <p className="text-sm text-gray-800">Darrin Collins</p>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl shadow p-4 w-full max-w-md">
+          <h3 className="text-md font-semibold mb-2 text-gray-800">
+            Live Chat
+          </h3>
+          <hr className="mb-4" />
+          <div className="space-y-10">
+            <div className="bg-gray-100 p-3 rounded-lg">
+              <div className="flex items-center space-x-2 mb-1">
+                <img
+                  src="https://randomuser.me/api/portraits/men/10.jpg"
+                  alt="Young John"
+                  className="w-6 h-6 rounded-full"
+                />
+                <span className="text-sm font-medium text-gray-800">
+                  Young John
+                </span>
+              </div>
+              <p className="text-sm text-gray-700">
+                I disagree with Peace. I believe Umar deserved a second chance
+                after what he did
+              </p>
+            </div>
+
+            <div className="bg-gray-100 p-3 rounded-lg w-fit">
+              <div className="flex items-center space-x-2 mb-1 ">
+                <img
+                  src="https://randomuser.me/api/portraits/men/11.jpg"
+                  alt="Ahmed Aliyu"
+                  className="w-6 h-6 rounded-full"
+                />
+                <span className="text-sm font-medium text-gray-800">
+                  Ahmed Aliyu
+                </span>
+              </div>
+              <p className="text-sm text-gray-700">Why do you feel that way?</p>
+            </div>
+
+            <div className="bg-blue-50 p-3 rounded-lg self-end ">
+              <div className="text-right text-sm font-medium text-gray-700 mb-1">
+                You
+              </div>
+              <p className="text-sm text-gray-800 text-right">
+                You're saying you don't agree with 'Peace' on this one
+              </p>
+            </div>
+
+            <div className="bg-gray-100 p-3 rounded-lg">
+              <div className="flex items-center space-x-2 mb-1">
+                <img
+                  src="https://randomuser.me/api/portraits/men/12.jpg"
+                  alt="Tony Tony"
+                  className="w-6 h-6 rounded-full"
+                />
+                <span className="text-sm font-medium text-gray-800">
+                  Tony Tony
+                </span>
+              </div>
+              <p className="text-sm text-gray-700">
+                What makes you think he deserved that second chance?
+              </p>
+            </div>
+          </div>
+
+          <form className="relative mt-6 max-w-md">
+            <input
+              type="text"
+              placeholder="Type here"
+              className="w-full pl-4 pr-12 py-3 rounded-md bg-gray-100 border text-[#B0B0B0] border-gray-200 text-sm focus:outline-none"
+            />
+            <button
+              type="submit"
+              className="absolute top-1/2 right-2 transform -translate-y-1/2 w-9 h-9 flex items-center justify-center bg-blue-600 text-white rounded-full hover:bg-blue-700"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-4 w-4"
+                fill="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
+              </svg>
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/dashboard/writers/discussions-and-clubs/components/AddGuest.tsx b/src/app/dashboard/writers/discussions-and-clubs/components/AddGuest.tsx
new file mode 100644
index 0000000..f217f5d
--- /dev/null
+++ b/src/app/dashboard/writers/discussions-and-clubs/components/AddGuest.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import React from "react";
+import Modal from "./Modal";
+import { Input } from "@/components/ui/input";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  addGuest: () => void;
+};
+
+export default function AddGuestModal({ isOpen, onClose, addGuest }: Props) {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} className="max-w-md">
+      <div className="space-y-5 px-5 py-1">
+        <p className="text-xl text-[#454545] text-center font-semibold">
+          Guest Email Address
+        </p>
+        <div className="space-y-2">
+          <p className="text-[#5D5D5D]">Guest Email Address</p>
+          <Input
+            className="h-[46px] text-[#B0B0B0]"
+            placeholder="Enter guest email address"
+          />
+        </div>
+        <div className="bg-blue-50 rounded-xl p-4 flex items-center space-x-4 w-fit">
+          <img
+            src="/authorImg2.png"
+            alt="Joseph Yanum"
+            className="w-12 h-12 rounded-full object-cover"
+          />
+          <div>
+            <p className="text-lg font-semibold">Joseph Yanum</p>
+            <p className="text-sm text-[#888888]">josephyanum75@gmail.com</p>
+          </div>
+        </div>
+        <button
+          onClick={() => {
+            onClose();
+            addGuest();
+          }}
+          className="mb-5 w-full py-3 text-white rounded-md bg-gradient-to-b from-[#2A62F3] to-[#0029B3] hover:opacity-90 transition"
+        >
+          Add
+        </button>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/app/dashboard/writers/discussions-and-clubs/components/ClubDetails.tsx b/src/app/dashboard/writers/discussions-and-clubs/components/ClubDetails.tsx
new file mode 100644
index 0000000..5343791
--- /dev/null
+++ b/src/app/dashboard/writers/discussions-and-clubs/components/ClubDetails.tsx
@@ -0,0 +1,129 @@
+import { ClubDetailsProps } from "@/lib/types";
+import { Globe, PlusIcon } from "lucide-react";
+import Modal from "./Modal";
+
+type ClubModalProps = {
+  club: ClubDetailsProps | null;
+  isOpen: boolean;
+  onClose: () => void;
+  onJoin: () => void;
+};
+
+export default function ClubModal({
+  club,
+  isOpen,
+  onClose,
+  onJoin,
+}: ClubModalProps) {
+  if (!club) return null;
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <section className="p-6 space-y-6">
+        <div className="flex flex-col justify-center items-center space-x-3">
+          <div className="w-30 h-30 bg-gray-200 rounded-md" />
+
+          <h2 className="text-xl font-semibold text-[#0F265C] truncate mt-2">
+            {club.name}
+          </h2>
+
+          <div className="flex flex-col space-y-1">
+            <div className="flex flex-wrap items-center text-sm space-x-3 mt-2 mb-1">
+              <Badge text={club.isPublic ? "Public" : "Private"} icon="globe" />
+              <Badge text={String(club.memberCount)} icon="plus" />
+              <Badge text={club.sessionsInfo} />
+            </div>
+
+            <div className="flex items-center space-x-2 mt-2">
+              <div className="flex items-center space-x-2 text-sm text-gray-600">
+                <AvatarGroup urls={club.authorAvatars} />
+              </div>
+              {club.authorAvatars?.length > 0 && (
+                <span className="truncate text-[#5D5D5D] text-sm">
+                  {club.authorAvatars.length} Authors you follow are members
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <SectionTitle title="About Club" />
+          <p className="text-[#3D3D3D] ">
+            Vibrant book club dedicated to exploring the vast and magical realms
+            of fantasy literature. From epic sagas and dark fantasy to urban
+            magic and whimsical tales, we delve into all corners of the genre.
+          </p>
+        </div>
+
+        <div>
+          <SectionTitle title="Genre Focus" />
+          <div className="flex flex-wrap gap-2">
+            <Tag text="Fiction" />
+            <Tag text="Drama" />
+          </div>
+        </div>
+      </section>
+
+      <footer className="flex justify-between gap-3 p-4 bg-gray-50">
+        <button
+          onClick={onClose}
+          className="text-[#0F265C] py-4 px-8 w-full rounded-[10px] bg-[linear-gradient(to_bottom,_#EDF7FF_100%,_#096CFF_30%)] hover:bg-gray-200 transition"
+        >
+          Cancel
+        </button>
+        <button
+          onClick={onJoin}
+          className="px-6 py-4 w-full rounded-md bg-blue-600 text-white hover:bg-blue-700 transition"
+        >
+          Join Club
+        </button>
+      </footer>
+    </Modal>
+  );
+}
+
+function Badge({ text, icon }: { text: string; icon?: "globe" | "plus" }) {
+  const icons = {
+    globe: <Globe className="w-4 h-4 text-[#888888]" />,
+    plus: <PlusIcon className="w-4 h-4 text-[#888888]" />,
+  };
+
+  return (
+    <div className="flex text-xs items-center space-x-1  border border-[#D1D1D1] rounded-full px-2 py-1">
+      {icon && icons[icon]}
+      <span className="text-[#888888]">{text}</span>
+    </div>
+  );
+}
+
+function SectionTitle({ title }: { title: string }) {
+  return (
+    <div className="rounded-full bg-[#F6F6F6] w-fit text-center px-2 py-2 mb-2">
+      <p className="text-sm">{title}</p>
+    </div>
+  );
+}
+
+function Tag({ text }: { text: string }) {
+  return (
+    <span className="text-xs border border-[#E7E7E7] rounded-full px-3 py-1">
+      {text}
+    </span>
+  );
+}
+
+function AvatarGroup({ urls }: { urls: string[] }) {
+  return (
+    <div className="flex -space-x-2">
+      {urls.map((url, i) => (
+        <img
+          key={i}
+          src={url}
+          alt={`Author ${i + 1}`}
+          className="w-6 h-6 rounded-full border-2 border-white"
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/src/app/dashboard/writers/discussions-and-clubs/components/ClubDiscussion.tsx b/src/app/dashboard/writers/discussions-and-clubs/components/ClubDiscussion.tsx
new file mode 100644
index 0000000..5335a45
--- /dev/null
+++ b/src/app/dashboard/writers/discussions-and-clubs/components/ClubDiscussion.tsx
@@ -0,0 +1,209 @@
+import { useState } from "react";
+
+interface ClubDiscussionProps {
+  startEvent: () => void;
+}
+
+export default function ClubDiscussion({ startEvent }: ClubDiscussionProps) {
+  const [activeTab, setActiveTab] = useState("discussion");
+
+  const tabs = [
+    { id: "discussion", label: "Discussion" },
+    { id: "live", label: "Live", badge: 1 },
+    { id: "about", label: "About" },
+    { id: "members", label: "Members" },
+  ];
+
+  const eventTabs = [
+    {
+      id: "discussion",
+      label: "Discussion",
+      badge: 2,
+      event: {
+        title: "Native Invisibility",
+        author: "Darrin Collins",
+        verified: true,
+        description:
+          "Delves into the complex and often insidious ways in which indigenous peoples and their unique experiences are rendered unseen and unheard in the modern era.",
+        live: false,
+        timeAgo: "2 weeks ago",
+        image: "/images/bookCover1.png",
+      },
+    },
+    {
+      id: "live",
+      label: "Live",
+      badge: null,
+      event: {
+        title: "Native Invisibility",
+        author: "Darrin Collins",
+        verified: true,
+        description:
+          "Delves into the complex and often insidious ways in which indigenous peoples and their unique experiences are rendered unseen and unheard in the modern era.",
+        live: true,
+        timeAgo: "Live now",
+        image: "/images/bookCover1.png",
+      },
+    },
+
+    {
+      id: "discussion",
+      label: "Discussion",
+      badge: null,
+      event: {
+        title: "Native Invisibility",
+        author: "Darrin Collins",
+        verified: true,
+        description:
+          "Delves into the complex and often insidious ways in which indigenous peoples and their unique experiences are rendered unseen and unheard in the modern era.",
+        live: true,
+        timeAgo: "Live now",
+        image: "/images/bookCover1.png",
+      },
+    },
+  ];
+
+  return (
+    <div className=" mx-auto p-6 rounded-xl shadow-sm">
+      <div className="flex gap-6 mb-6 bg-white px-10 py-5">
+        <div className="w-50 h-50 bg-gray-300 rounded-md flex-shrink-0"></div>
+        <div className="flex flex-col justify-center flex-grow">
+          <h1 className="text-[28px] font-semibold text-gray-900 mb-1">
+            Fantasy Enthusiasts
+          </h1>
+          <p className="text-sm text-[#888888]">
+            Vibrant book club dedicated to exploring the vast and magical realms
+            of fantasy literature. From epic sagas and dark fantasy to urban
+            magic and whimsical tales, we delve into all corners of the genre.
+          </p>
+          <div className="mt-3 flex flex-wrap items-center gap-2">
+            <Badge icon="🌐" label="Public" />
+            <Badge icon="👥" label="1.5k+ Members" />
+            <Badge icon="📅" label="2+ Session a Month" />
+          </div>
+          <div className="mt-2 flex items-center gap-2 text-sm text-gray-600">
+            <img
+              src="https://randomuser.me/api/portraits/women/44.jpg"
+              alt="Author 1"
+              className="w-6 h-6 rounded-full border border-white shadow-sm"
+            />
+            <img
+              src="https://randomuser.me/api/portraits/men/34.jpg"
+              alt="Author 2"
+              className="w-6 h-6 rounded-full border border-white shadow-sm -ml-2"
+            />
+            <span className="text-[#888888]">
+              2 Authors you follow are members
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-white py-5 px-5 rounded-xl">
+        <div className="flex items-center justify-between mb-6">
+          <nav className="flex space-x-8" aria-label="Tabs">
+            {tabs.map(({ id, label, badge }) => (
+              <button
+                key={id}
+                onClick={() => setActiveTab(id)}
+                className={`relative py-2 px-3 text-[#5D5D5D] text-sm font-medium rounded-md focus:outline-none ${
+                  activeTab === id ? "] text-[#5D5D5D] bg-[#F6F6F6]" : ""
+                }`}
+                aria-current={activeTab === id ? "page" : undefined}
+              >
+                {label}
+                {badge && (
+                  <span className="ml-1 inline-flex items-center justify-center px-2 py-0.5 rounded-full text-xs font-semibold bg-red-600 text-white">
+                    {badge}
+                  </span>
+                )}
+              </button>
+            ))}
+          </nav>
+          <button
+            type="button"
+            onClick={startEvent}
+            className="inline-flex items-center px-4 py-2 text-sm font-semibold rounded-full bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 transition"
+          >
+            Start Event
+          </button>
+        </div>
+        <div>
+       
+          {eventTabs.map(({ id, event }) =>
+            activeTab === id ? (
+              <EventCard
+                key={id}
+                author={event.author}
+                title={event.title}
+                description={event.description}
+                image={event.image}
+              />
+            ) : <div></div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Badge({ icon, label }: { icon: string; label: string }) {
+  return (
+    <span className="inline-flex items-center rounded-full border border-gray-300 px-2 py-2 text-xs text-[#888888] select-none">
+      <span className="mr-1">{icon}</span> {label}
+    </span>
+  );
+}
+
+function EventCard({
+  title,
+  author,
+  verified,
+  description,
+  live,
+  timeAgo,
+  image,
+}: {
+  title: string;
+  author: string;
+  verified?: boolean;
+  description: string;
+  live?: boolean;
+  timeAgo?: string;
+  image: string;
+}) {
+  return (
+    <div className="flex gap-4 p-4 px-6 rounded-lg border border-gray-200 shadow-sm mb-4 bg-white">
+      <img
+        src={image}
+        alt={title}
+        className="w-40 h-40 rounded-md object-cover flex-shrink-0"
+      />
+      <div className="flex flex-col justify-between flex-grow">
+        <div>
+          <div className="flex flex-col items-start gap-2">
+              <span className="text-xs font-semibold  bg-[#FF5C5C] text-white rounded-full px-2 py-0.5 select-none">
+                Live
+              </span>
+            <h2 className="text-lg font-semibold text-gray-900">{title}</h2>
+          </div>
+          <p className="text-sm text-[#5D5D5D] mb-2">
+            By {author}{" "}
+              <svg
+                className="inline-block w-4 h-4 text-blue-600"
+                fill="currentColor"
+                viewBox="0 0 24 24"
+                aria-label="Verified"
+              >
+                <path d="M22.25 12l-2.197 4.317.353 4.474-4.42-1.616L12 22.5l-4.015-3.325-4.42 1.616.353-4.474L1.75 12l2.197-4.317-.353-4.474 4.42 1.616L12 1.5l4.015 3.325 4.42-1.616-.353 4.474L22.25 12zM10.5 16.5l7.5-7.5-1.5-1.5-6 6-2.25-2.25-1.5 1.5 3.75 3.75z" />
+              </svg>
+            
+          </p>
+          <p className="mt-1 text-xs text-[#888888]">Book Description</p>
+          <p className=" text-[#888888] mt-1">{description}</p>
+        </div>
+        {timeAgo && <p className="text-xs text-gray-400 mt-4">{timeAgo}</p>}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/dashboard/writers/discussions-and-clubs/components/ClubToolBar.tsx b/src/app/dashboard/writers/discussions-and-clubs/components/ClubToolBar.tsx
new file mode 100644
index 0000000..1c5f1ca
--- /dev/null
+++ b/src/app/dashboard/writers/discussions-and-clubs/components/ClubToolBar.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import { Search, ChevronDown, PlusIcon } from "lucide-react";
+
+export default function ClubsToolbar() {
+  return (
+    <div className="w-full p-4 grid grid-cols-2 gap-4 sm:flex sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex items-center gap-x-8">
+        <div
+          className="  text-sm  col-span-2 sm:col-auto"
+
+          >
+          <p className="text-[#454545]"> Clubs You've Joined (2)</p>
+        </div>
+
+        <div>
+          <p className="text-[#454545]">Discover</p>
+        </div>
+
+        <button
+          type="button"
+          className="border border-gray-300 text-[#888888] flex items-center gap-x-1 rounded-lg px-3 py-3 text-sm font-medium  whitespace-nowrap hover:bg-gray-100 transition"
+        >
+          <span>
+            <PlusIcon className="w-5 h-5" />
+          </span>{" "}
+          Create a Club
+        </button>
+      </div>
+
+      <div className="flex items-center sm:w-4/12 gap-x-4 ">
+        <div className="relative w-full col-span-2 sm:col-auto">
+          <Search
+            className="absolute left-3 top-1/2 -translate-y-1/2 text-[#B0B0B0]"
+            size={16}
+          />
+          <input
+            type="search"
+            placeholder="Search for a Club"
+            className="w-full rounded-lg placeholder:text-[#B0B0B0]  border border-gray-300 pl-9 pr-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          />
+        </div>
+
+        <button
+          type="button"
+          className="flex items-center gap-1 border bg-[#F6F6F6] border-gray-300 rounded-full px-4 py-3 text-sm font-medium text-gray-700 whitespace-nowrap hover:bg-gray-100 transition col-span-2 sm:col-auto justify-center sm:justify-start"
+        >
+          Club Type
+          <ChevronDown size={16} />
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/dashboard/writers/discussions-and-clubs/components/CreateEvent.tsx b/src/app/dashboard/writers/discussions-and-clubs/components/CreateEvent.tsx
new file mode 100644
index 0000000..7f0faf3
--- /dev/null
+++ b/src/app/dashboard/writers/discussions-and-clubs/components/CreateEvent.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import React from "react";
+import Modal from "./Modal";
+import { Input } from "@/components/ui/input";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: () => void;
+};
+
+export default function CreateClubModal({ isOpen, onClose, onSubmit }: Props) {
+  const [name, setName] = React.useState("");
+  const [description, setDescription] = React.useState("");
+  const [genres, setGenres] = React.useState(["Fiction", "Drama"]);
+  const [clubType, setClubType] = React.useState("");
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <div className="px-6 pb-6">
+        <h2 className="text-2xl font-bold text-gray-900 mb-1">
+          Create a new Club
+        </h2>
+        <p className="text-sm text-muted-foreground mb-6">
+          Launch your book club! Gather readers, share favorites, and spark
+          discussions
+        </p>
+
+        <div className="space-y-4">
+          <div>
+            <p className="text-sm  text-[#5D5D5D]">Club Name</p>
+            <Input
+              id="name"
+              placeholder="Enter name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="mt-1 border border-gray-100 w-full h-[46px]  border-b-0 px-3"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="genre" className="text-sm text-[#5D5D5D]">
+              Genre Focus
+            </label>
+
+            <div className="mt-1 block w-full border rounded-md px-3 h-[46px] py-2 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+              <select
+                id="type"
+                value={clubType}
+                className="w-full border-none focus:outline-none focus:ring-0 focus:border-none"
+                // onChange={(e) => setGenres(e.target.value)}
+              >
+                <option value="">Select Type</option>
+                <option value="public">Fiction</option>
+                <option value="private">Drama</option>
+              </select>
+            </div>
+             <div className="flex flex-wrap gap-2 mt-4">
+                {genres.map((genre) => (
+                  <span
+                    key={genre}
+                    className="bg-[#EDF4FF] text-[#2A62F3] text-xs px-3 py-1 rounded-full"
+                  >
+                    {genre} <span className="ml-1 cursor-pointer">×</span>
+                  </span>
+                ))}
+              </div>
+          </div>
+
+          <div>
+            <label htmlFor="description" className="text-sm text-[#5D5D5D]">
+              Description
+            </label>
+            <textarea
+              id="description"
+              placeholder="Describe your club"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              className="mt-1 w-full border rounded-md px-3 py-2 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              rows={3}
+            />
+          </div>
+
+          <div>
+            <label htmlFor="type" className="text-sm  text-[#5D5D5D]">
+              Club Type
+            </label>
+            <div className="mt-1 block w-full border rounded-md px-3 h-[46px] py-2 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+              <select
+                id="type"
+                value={clubType}
+                className="w-full border-none focus:outline-none focus:ring-0 focus:border-none"
+                onChange={(e) => setClubType(e.target.value)}
+              >
+                <option value="">Select Type</option>
+                <option value="public">Public</option>
+                <option value="private">Private</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <button
+          onClick={() => {
+            onClose();
+            onSubmit();
+          }}
+          className="mt-6 w-full py-3 text-white rounded-md bg-gradient-to-b from-[#2A62F3] to-[#0029B3] hover:opacity-90 transition"
+        >
+          Create Club
+        </button>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/app/dashboard/writers/discussions-and-clubs/components/Modal.tsx b/src/app/dashboard/writers/discussions-and-clubs/components/Modal.tsx
new file mode 100644
index 0000000..3a297ae
--- /dev/null
+++ b/src/app/dashboard/writers/discussions-and-clubs/components/Modal.tsx
@@ -0,0 +1,61 @@
+import React from "react";
+import { cn } from "@/lib/utils"; 
+type ModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  className?: string;
+  hideClose?: boolean;
+};
+
+export default function Modal({
+  isOpen,
+  onClose,
+  children,
+  className,
+  hideClose = false,
+}: ModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/40 bg-opacity-10 flex items-center justify-center z-50 p-4"
+      role="dialog"
+      aria-modal="true"
+    >
+      <div
+        className={cn(
+          "bg-white rounded-xl max-w-xl w-full shadow-lg overflow-hidden",
+          className
+        )}
+      >
+        {!hideClose && (
+          <header className="flex justify-end items-center p-4">
+            <button
+              onClick={onClose}
+              aria-label="Close modal"
+              className="text-[#B0B0B0] flex items-center justify-center w-8 h-8 bg-[#F6F6F6] hover:text-gray-700 transition"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-6 w-6"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          </header>
+        )}
+
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/dashboard/writers/discussions-and-clubs/components/ScheduleEvent.tsx b/src/app/dashboard/writers/discussions-and-clubs/components/ScheduleEvent.tsx
new file mode 100644
index 0000000..3068549
--- /dev/null
+++ b/src/app/dashboard/writers/discussions-and-clubs/components/ScheduleEvent.tsx
@@ -0,0 +1,169 @@
+"use client";
+
+import React, { useState } from "react";
+import Modal from "./Modal";
+import { Input } from "@/components/ui/input";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import { Calendar, Timer, TimerIcon } from "lucide-react";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: () => void;
+};
+
+export default function ScheduleEvent({ isOpen, onClose, onSubmit }: Props) {
+  const [name, setName] = React.useState("");
+  const [description, setDescription] = React.useState("");
+  const [genres, setGenres] = React.useState(["Fiction", "Drama"]);
+  const [startDate, setStartDate] = useState(new Date());
+  const [startTime, setStartTime] = useState(new Date());
+  const [endTime, setEndTime] = useState(new Date());
+
+  const [focusBook, setFocusBook] = React.useState("");
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} className="max-w-2xl">
+      <div className="px-6 pb-6">
+        <h2 className="text-2xl font-bold text-gray-900 mb-1">
+          Schedule Event
+        </h2>
+
+        <div className="space-y-4 mt-4">
+          <div>
+            <p className="text-sm  text-[#5D5D5D]">Event Name</p>
+            <Input
+              id="name"
+              placeholder="Enter name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="mt-1 border border-gray-100 w-full h-[46px] placeholder:text-[#B0B0B0]  border-b-0 px-3"
+            />
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm  text-gray-700 mb-1">Date</label>
+              <div className="flex cursor-pointer items-center gap-x-4 border border-gray-300 rounded-md px-3 py-2">
+                <Calendar className="text-[#888888] w-5 h-5" />
+                <DatePicker
+                  selected={startDate}
+                  onChange={(date) => setStartDate(date as Date)}
+                  dateFormat="dd MMMM, yyyy"
+                  className="w-full cursor-pointer outline-none bg-transparent text-[#B0B0B0] text-sm"
+                />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-x-2">
+              <div>
+                <label className="block text-sm  text-gray-700 mb-1">
+                  Start
+                </label>
+                <div className=" flex items-center border border-gray-300 gap-x-2 rounded-md px-3 py-2">
+                  <Timer className="text-[#888888] w-5 h-5" />
+                  <DatePicker
+                    selected={startTime}
+                    onChange={(time) => setStartTime(time as Date)}
+                    showTimeSelect
+                    showTimeSelectOnly
+                    timeIntervals={15}
+                    timeCaption="Time"
+                    dateFormat="h:mm aa"
+                    className="w-full outline-none bg-transparent text-[#B0B0B0] text-sm"
+                  />
+                </div>
+              </div>
+              <div>
+                <label className="block text-sm  text-gray-700 mb-1">End</label>
+                <div className="flex  items-center border border-gray-300 rounded-md px-2 gap-x-2 py-2">
+                  <Timer className="text-[#888888] w-5 h-5" />
+
+                  <DatePicker
+                    selected={endTime}
+                    onChange={(time) => setEndTime(time as Date)}
+                    showTimeSelect
+                    showTimeSelectOnly
+                    timeIntervals={15}
+                    timeCaption="Time"
+                    dateFormat="h:mm aa"
+                    className="w-full outline-none bg-transparent text-[#B0B0B0] text-sm"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <label htmlFor="genre" className="text-sm text-[#5D5D5D]">
+              Genre Focus
+            </label>
+
+            <div className="mt-1 block w-full border rounded-md px-3 h-[46px] py-2 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+              <select
+                id="type"
+                className="w-full border-none focus:outline-none focus:ring-0 focus:border-none"
+              >
+                <option value="">Select Type</option>
+                <option value="public">Fiction</option>
+                <option value="private">Drama</option>
+              </select>
+            </div>
+            <div className="flex flex-wrap gap-2 mt-4">
+              {genres.map((genre) => (
+                <span
+                  key={genre}
+                  className="bg-[#EDF4FF] text-[#2A62F3] text-xs px-3 py-1 rounded-full"
+                >
+                  {genre} <span className="ml-1 cursor-pointer">×</span>
+                </span>
+              ))}
+            </div>
+          </div>
+
+          <div>
+            <label htmlFor="type" className="text-sm  text-[#5D5D5D]">
+              Focus Book
+            </label>
+            <div className="mt-1 block w-full border rounded-md px-3 h-[46px] py-2 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+              <select
+                id="type"
+                value={focusBook}
+                className="w-full border-none focus:outline-none focus:ring-0 focus:border-none"
+                onChange={(e) => setFocusBook(e.target.value)}
+              >
+                <option value="">Select Type</option>
+                <option value="public">Public</option>
+                <option value="private">Private</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-2">
+          <label htmlFor="description" className="text-sm text-[#5D5D5D]">
+            Description
+          </label>
+          <textarea
+            id="description"
+            placeholder="Describe your club"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            className="mt-1 w-full border rounded-md px-3 py-2 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            rows={3}
+          />
+        </div>
+
+        <button
+          onClick={() => {
+            onClose();
+            onSubmit();
+          }}
+          className="mt-6 w-full py-3 text-white rounded-md bg-gradient-to-b from-[#2A62F3] to-[#0029B3] hover:opacity-90 transition"
+        >
+          Schedule Event
+        </button>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/app/dashboard/writers/discussions-and-clubs/components/StartEvent.tsx b/src/app/dashboard/writers/discussions-and-clubs/components/StartEvent.tsx
new file mode 100644
index 0000000..7e5a6cf
--- /dev/null
+++ b/src/app/dashboard/writers/discussions-and-clubs/components/StartEvent.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import React from "react";
+import Modal from "./Modal";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  startEvent: () => void;
+  instantEvent: () => void;
+};
+
+export default function StartEventModal({
+  isOpen,
+  onClose,
+  startEvent,
+  instantEvent,
+}: Props) {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} className="max-w-md" >
+      <div className="space-y-4 px-10 py-4">
+        <button
+          onClick={() => {
+            onClose();
+            startEvent();
+          }}
+          className=" w-full py-3  rounded-[16px]  bg-[#E7E7E7] hover:opacity-90 transition"
+        >
+          Create Club
+        </button>
+
+        <button
+          onClick={() => {
+            onClose();
+            instantEvent();
+          }}
+          className=" w-full py-3  rounded-[16px]  bg-[#E7E7E7] hover:opacity-90 transition"
+        >
+          Schedule
+        </button>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/app/dashboard/writers/discussions-and-clubs/components/SuccessModal.tsx b/src/app/dashboard/writers/discussions-and-clubs/components/SuccessModal.tsx
new file mode 100644
index 0000000..3ebe40b
--- /dev/null
+++ b/src/app/dashboard/writers/discussions-and-clubs/components/SuccessModal.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import React from "react";
+import Modal from "./Modal";
+import { Button } from "@/components/ui/button";
+import { CheckIcon } from "lucide-react";
+import Link from "next/link";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: () => void;
+};
+
+export default function EventScheduleModal({
+  isOpen,
+  onClose,
+  onSubmit,
+}: Props) {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} hideClose className="max-w-md">
+      <div className="py-10">
+        <div className="flex flex-col items-center space-y-4">
+          <div className="w-30 h-30 flex items-center justify-center rounded-full bg-[#D6ECFF]">
+            <div className="w-20 h-20 flex items-center justify-center rounded-full bg-[#096CFF]">
+              <CheckIcon className="text-white w-10 h-10" />
+            </div>
+          </div>
+          <h2 className="text-lg font-semibold">
+            Event Successfully Scheduled
+          </h2>
+          <div className="bg-gray-100 w-fit rounded-full px-4 py-2 flex items-center justify-between  max-w-xs">
+            <span className="truncate text-sm text-gray-700">
+              ChLbevent1200Sh...
+            </span>
+            <button
+              onClick={() => navigator.clipboard.writeText("ChLbevent1200Sh")}
+              className="ml-3 text-sm font-medium text-blue-600 hover:underline"
+            >
+              Copy
+            </button>
+          </div>
+          <Link
+            href="/waiting-room"
+            className="w-full max-w-xs h-11 flex items-center justify-center rounded-full bg-gradient-to-r from-blue-500 to-blue-600 text-white font-semibold hover:from-blue-600 hover:to-blue-700"
+          >
+            <p>Start</p>
+          </Link>
+        </div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/app/dashboard/writers/discussions-and-clubs/page.tsx b/src/app/dashboard/writers/discussions-and-clubs/page.tsx
new file mode 100644
index 0000000..5c1245a
--- /dev/null
+++ b/src/app/dashboard/writers/discussions-and-clubs/page.tsx
@@ -0,0 +1,171 @@
+"use client";
+import { Header } from "@/components/dashboard/header";
+import React, { useState } from "react";
+import ClubsToolbar from "./components/ClubToolBar";
+import ClubCard from "./ClubCard";
+import { ClubDetailsProps } from "@/lib/types";
+import ClubModal from "./components/ClubDetails";
+import CreateClubModal from "./components/CreateEvent";
+import ClubDiscussion from "./components/ClubDiscussion";
+import StartEventModal from "./components/StartEvent";
+import ScheduleEvent from "./components/ScheduleEvent";
+import EventScheduleModal from "./components/SuccessModal";
+
+const clubCards: ClubDetailsProps[] = [
+  {
+    id: "1",
+    name: "Fantasy Enthusiasts",
+    isPublic: true,
+    memberCount: 1500,
+    sessionsInfo: "2+ Sessions a month",
+    unreadNotifications: 3,
+    authorAvatars: [
+      "https://randomuser.me/api/portraits/men/32.jpg",
+      "https://randomuser.me/api/portraits/women/44.jpg",
+      "https://randomuser.me/api/portraits/men/32.jpg"
+    ],
+  },
+  {
+    id: "2",
+    name: "Book Lovers",
+    isPublic: false,
+    memberCount: 1500,
+    sessionsInfo: "2+ Sessions in three months",
+    unreadNotifications: 2,
+    authorAvatars: [
+      "https://randomuser.me/api/portraits/men/32.jpg",
+      "https://randomuser.me/api/portraits/women/44.jpg",
+    ],
+  },
+  {
+    id: "3",
+    name: "Fantasy Enthusiasts",
+    isPublic: true,
+    memberCount: 1500,
+    sessionsInfo: "2+ Sessions a month",
+    unreadNotifications: 3,
+    authorAvatars: [
+      "https://randomuser.me/api/portraits/men/32.jpg",
+      "https://randomuser.me/api/portraits/women/44.jpg",
+            "https://randomuser.me/api/portraits/men/32.jpg"
+
+    ],
+  },
+  {
+    id: "4",
+    name: "Book Lovers",
+    isPublic: false,
+    memberCount: 1500,
+    sessionsInfo: "2+ Sessions a month",
+    unreadNotifications: 10,
+    authorAvatars: [
+      "https://randomuser.me/api/portraits/men/32.jpg",
+      "https://randomuser.me/api/portraits/women/44.jpg",
+    ],
+  },
+];
+
+export default function DiscussionDashboard() {
+  const [selectedClub, setSelectedClub] = useState<ClubDetailsProps | null>(
+    null
+  );
+  const [modalOpen, setModalOpen] = useState(false);
+  const [createEventOpen, setCreateEventOpen] = useState(false);
+  const [startEventOpen, setStartEventOpen] = useState(false);
+  const [scheduleEventOpen, setScheduleEventOpen] = useState(false);
+  const [successModal, setSuccessModal] = useState(false);
+
+  const [activePage, setActivePage] = useState<
+    "index" | "discussion" | "start"
+  >("index");
+
+  function openModal(club: ClubDetailsProps) {
+    setSelectedClub(club);
+    setModalOpen(true);
+  }
+
+  function closeModal() {
+    setModalOpen(false);
+    setSelectedClub(null);
+  }
+
+  function joinClub() {
+    setCreateEventOpen(true);
+    closeModal();
+  }
+
+  return (
+    <div>
+      <Header title="Discussions and Clubs" />
+      <div className="p-6 mt-[60px] rounded-2xl">
+        {activePage === "index" ? (
+          <div>
+            <div className="bg-white p-6 rounded space-y-8">
+              <ClubsToolbar />
+
+              {clubCards.map(
+                ({
+                  id,
+                  name,
+                  isPublic,
+                  memberCount,
+                  sessionsInfo,
+                  authorAvatars,
+                  unreadNotifications,
+                }) => (
+                  <ClubCard
+                    id={id}
+                    key={id}
+                    name={name}
+                    isPublic={isPublic}
+                    memberCount={memberCount}
+                    sessionsInfo={sessionsInfo}
+                    authorAvatars={authorAvatars}
+                    unreadNotifications={unreadNotifications}
+                    onOpen={openModal}
+                  />
+                )
+              )}
+            </div>
+          </div>
+        ) : (
+          <div>
+            <ClubDiscussion startEvent={() => setStartEventOpen(true)} />
+          </div>
+        )}
+
+        <StartEventModal
+          startEvent={() => setCreateEventOpen(true)}
+          instantEvent={() => setScheduleEventOpen(true)}
+          isOpen={startEventOpen}
+          onClose={() => setStartEventOpen(false)}
+        />
+
+        <ClubModal
+          club={selectedClub}
+          isOpen={modalOpen}
+          onClose={closeModal}
+          onJoin={joinClub}
+        />
+
+        <CreateClubModal
+          isOpen={createEventOpen}
+          onClose={() => setCreateEventOpen(false)}
+          onSubmit={() => setActivePage("discussion")}
+        />
+
+        <ScheduleEvent
+          isOpen={scheduleEventOpen}
+          onClose={() => setScheduleEventOpen(false)}
+          onSubmit={() => setSuccessModal(true)}
+        />
+
+        <EventScheduleModal
+          isOpen={successModal}
+          onClose={() => setSuccessModal(false)}
+          onSubmit={() => {}}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/dashboard/writers/earnings/page.tsx b/src/app/dashboard/writers/earnings/page.tsx
new file mode 100644
index 0000000..77a080e
--- /dev/null
+++ b/src/app/dashboard/writers/earnings/page.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import EarningsSummary from "@/components/dashboard-earnings/EarningSummary";
+import LinkWallet from "@/components/dashboard-earnings/LinkWallet";
+import RevenueBreakdown from "@/components/dashboard-earnings/RevenueBreakdown";
+import type { EarningTab } from "@/lib/interfaces/EarningTabInterface";
+import { RevenueChartInterface } from "@/lib/interfaces/RevenueChartInterface";
+import { useEffect, useState } from "react";
+import TransactionHistory from "../../../../components/dashboard-earnings/TransactionHistory";
+import RequestPaymentModal from "@/components/dashboard-earnings/RequestPaymentModal";
+import { PaymentPropInterface } from "@/lib/interfaces/PaymentPropInterface";
+import { Header } from "@/components/dashboard/header";
+
+
+const earningsSumaryDetails: EarningTab[] = [
+  { title: "Current Balance", amount: 3150.0, border: "#D6ECFF" },
+  { title: "Pending Payout", amount: 100.06, border: "#2396413D" },
+  { title: "Total Payout", amount: 2500.01, border: "#822ECB3D" },
+  { title: "Total Earned", amount: 2730.19, border: "#D6ECFF" },
+];
+
+const chartData: RevenueChartInterface[] = [
+  {
+    name: "Monthly Subcription Payment",
+    value: 121,
+    color: "#236FEA",
+    percentage: "40%",
+  },
+  {
+    name: "NFT Royalty",
+    value: 12,
+    color: "#FBBC05",
+    percentage: "10%",
+  },
+  {
+    name: "NFT",
+    value: 101,
+    color: "#822ECB",
+    percentage: "22%",
+  },
+  {
+    name: "Book Purchase",
+    value: 131,
+    color: "#34A853",
+    percentage: "28%",
+  },
+];
+
+function EarningsPage() {
+  const [openRequestModal, setOpenRequestModal] = useState(false);
+  const [walletAddress, setWalletAddress] = useState({
+    braavos: "",
+    argent: "",
+  });
+
+  const ADDRESS_KEY = "walletAddressKey";
+
+  const [paymentDetails, setPaymentDetails] = useState<PaymentPropInterface>({
+    amount: 0.0,
+    wallet: "",
+    walletAddress: "",
+  });
+
+  // This function loads saved addresses
+  useEffect(() => {
+    const savedAddresses = localStorage.getItem(ADDRESS_KEY);
+    if (savedAddresses) {
+      try {
+        const parsedAddresses = JSON.parse(savedAddresses);
+        setWalletAddress(parsedAddresses);
+      } catch (error) {
+        console.error("Failed to parse saved addresses:", error);
+      }
+    }
+  }, []);
+
+  // this function saves wallet address to local storage
+  useEffect(() => {
+    if (walletAddress.braavos || walletAddress.argent) {
+      localStorage.setItem(ADDRESS_KEY, JSON.stringify(walletAddress));
+    }
+  }, [walletAddress]);
+
+  return (
+    <>
+      <Header title="Earnings" />
+     <div className="flex flex-col gap-8 w-full px-6 py-8 mx-auto font-inter min-w-[350px] ">
+      <EarningsSummary
+        earningsSumaryDetails={earningsSumaryDetails}
+        setOpenRequestModal={setOpenRequestModal}
+      />
+      <TransactionHistory />
+      <RevenueBreakdown chartData={chartData} />
+      <LinkWallet
+        walletAddress={walletAddress}
+        setWalletAddress={setWalletAddress}
+      />
+      {openRequestModal && (
+        <RequestPaymentModal
+          paymentDetails={paymentDetails}
+          setPaymentDetails={setPaymentDetails}
+          walletAddress={walletAddress}
+          setOpenRequestModal={setOpenRequestModal}
+        />
+      )}
+    </div>
+    </>
+   
+  );
+}
+
+export default EarningsPage;
diff --git a/src/app/writer-dashboard/feedback/page.tsx b/src/app/dashboard/writers/feedback/page.tsx
similarity index 100%
rename from src/app/writer-dashboard/feedback/page.tsx
rename to src/app/dashboard/writers/feedback/page.tsx
diff --git a/src/app/writer-dashboard/layout.tsx b/src/app/dashboard/writers/layout.tsx
similarity index 100%
rename from src/app/writer-dashboard/layout.tsx
rename to src/app/dashboard/writers/layout.tsx
diff --git a/src/app/dashboard/writers/manage-content/BookContentStep.tsx b/src/app/dashboard/writers/manage-content/BookContentStep.tsx
new file mode 100644
index 0000000..bb2491b
--- /dev/null
+++ b/src/app/dashboard/writers/manage-content/BookContentStep.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+import type React from "react";
+import { ChevronDown } from "lucide-react";
+import ebook1 from "../../../../../public/ebook1.svg";
+import ebook2 from "../../../../../public/ebook2.svg";
+import Image from "next/image";
+
+interface BookContentStepProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  formData: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  setFormData: (data: any) => void;
+  onNext: () => void;
+  onBack: () => void;
+}
+
+const BookContentStep: React.FC<BookContentStepProps> = ({
+  formData,
+  setFormData,
+  onNext,
+  onBack,
+}) => {
+  return (
+    <div className="bg-[#f6f6f6] p-">
+      <div className="flex gap-8 w-full mx-auto">
+        {/* Book Cover Upload */}
+        <div className="w-80">
+          <div className="border-2 border-dashed border-[#4BB1FF] bg-[#EDF7FF] rounded-lg p-6 text-center h-[350px] flex flex-col items-center justify-center">
+            <div className=" rounded flex items-center justify-center mb-4">
+              <Image src={ebook1} alt="Create E-Book" />
+            </div>
+            <p className="text-sm text-[#5d5d5d]">Drag and drop or Click to</p>
+            <p className="text-sm text-[#5d5d5d]">choose file from device</p>
+          </div>
+          <p className="text-sm text-[#888888] mt-2">
+            Supported format: JPEG & PNG
+          </p>
+        </div>
+
+        {/* Form Fields */}
+        <div className="flex-1 bg-white rounded-md">
+          <div className="bg-white p-6 rounded-lg mb-6">
+            <h3 className="text-lg font-semibold text-[#B0B0B0] mb-6">
+              Book Content
+            </h3>
+
+            <div className="space-y-8">
+              <div>
+                <label className="block text-sm font-medium text-[#5D5D5D] mb-2">
+                  Book Title
+                </label>
+                <input
+                  type="text"
+                  placeholder="Paul Smart"
+                  className="w-full p-3 border border-[#e7e7e7] rounded-md focus:outline-none focus:ring-1 focus:ring-[#236fea]"
+                  value={formData.bookTitle}
+                  onChange={(e) =>
+                    setFormData({ ...formData, bookTitle: e.target.value })
+                  }
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-[#5d5d5d] mb-2">
+                  Sub-title
+                </label>
+                <input
+                  type="text"
+                  placeholder="Paul"
+                  className="w-full p-3 border border-[#e7e7e7] rounded-md focus:outline-none focus:ring-1 focus:ring-[#236fea]"
+                  value={formData.subtitle}
+                  onChange={(e) =>
+                    setFormData({ ...formData, subtitle: e.target.value })
+                  }
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-[#5d5d5d] mb-2">
+                  Language
+                </label>
+                <div className="relative">
+                  <select
+                    className="w-full p-3 border border-[#e7e7e7] rounded-md appearance-none focus:outline-none focus:ring-1 focus:ring-[#236fea]"
+                    value={formData.language}
+                    onChange={(e) =>
+                      setFormData({ ...formData, language: e.target.value })
+                    }
+                  >
+                    <option value="">Select Language</option>
+                    <option value="en">English</option>
+                    <option value="es">Spanish</option>
+                    <option value="fr">French</option>
+                  </select>
+                  <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+                    <ChevronDown className="h-5 w-5 text-[#888888]" />
+                  </div>
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-[#5d5d5d] mb-2">
+                  Book ISBN <span className="text-[#888888]">(Optional)</span>
+                </label>
+                <input
+                  type="text"
+                  placeholder="978-1-234-56789-7"
+                  className="w-full p-3 border border-[#e7e7e7] rounded-md focus:outline-none focus:ring-1 focus:ring-[#236fea]"
+                  value={formData.isbn}
+                  onChange={(e) =>
+                    setFormData({ ...formData, isbn: e.target.value })
+                  }
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-white p-6 rounded-lg mb-6">
+            <h3 className="text-lg font-semibold text-[#3d3d3d] mb-4">
+              Manuscript
+            </h3>
+            <div className="border-2 border-dashed border-[#4BB1FF] bg-[#EDF7FF] rounded-lg p-8 text-center  flex flex-col items-center justify-center h-[150px]">
+              <div className=" rounded flex items-center justify-center mb-4">
+                <Image src={ebook2} alt="Create E-Book" />
+              </div>
+              <p className="text-sm text-[#5d5d5d]">
+                Drag and drop or Click to
+              </p>
+              <p className="text-sm text-[#5d5d5d]">choose file from device</p>
+            </div>
+            <p className="text-xs text-[#888888] mt-2">
+              Supported format: DOCX, PDF
+            </p>
+          </div>
+
+          <div className="flex justify-between mt-8 p-6 space-x-6">
+            <button
+              onClick={onBack}
+              className="w-full py-3 cursor-pointer bg-[#edf7ff] text-[#0F265C] rounded-md hover:bg-[#d6ecff] transition-colors"
+            >
+              Back
+            </button>
+            <button
+              onClick={onNext}
+              className=" w-full py-3 cursor-pointer bg-[#096cff] text-white rounded-md hover:bg-[#236fea] transition-colors"
+            >
+              Continue to Details
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BookContentStep;
diff --git a/src/app/writer-dashboard/manage-content/BookCreationFlow.tsx b/src/app/dashboard/writers/manage-content/BookCreationFlow.tsx
similarity index 100%
rename from src/app/writer-dashboard/manage-content/BookCreationFlow.tsx
rename to src/app/dashboard/writers/manage-content/BookCreationFlow.tsx
diff --git a/src/app/dashboard/writers/manage-content/BookDetailsStep.tsx b/src/app/dashboard/writers/manage-content/BookDetailsStep.tsx
new file mode 100644
index 0000000..48128f5
--- /dev/null
+++ b/src/app/dashboard/writers/manage-content/BookDetailsStep.tsx
@@ -0,0 +1,323 @@
+"use client";
+
+import type React from "react";
+import { useState } from "react";
+import { ChevronDown, X } from "lucide-react";
+import ContributorTypeModal from "./ContributorTypeModal";
+import ContributorDetailsModal from "./ContributorDetailsModal";
+import ebook1 from "../../../../../public/ebook1.svg";
+import user from "../../../../../public/ebook2.svg";
+import Image from "next/image";
+
+interface BookDetailsStepProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  formData: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  setFormData: (data: any) => void;
+  onNext: () => void;
+  onBack: () => void;
+}
+
+const BookDetailsStep: React.FC<BookDetailsStepProps> = ({
+  formData,
+  setFormData,
+  onNext,
+  onBack,
+}) => {
+  const [showContributorTypeModal, setShowContributorTypeModal] =
+    useState(false);
+  const [showContributorDetailsModal, setShowContributorDetailsModal] =
+    useState(false);
+  const [selectedContributorType, setSelectedContributorType] = useState("");
+
+  const handleSelectContributorType = (type: string) => {
+    setSelectedContributorType(type);
+    setShowContributorTypeModal(false);
+    setShowContributorDetailsModal(true);
+  };
+
+  const handleAddContributor = (contributor: {
+    name: string;
+    email: string;
+  }) => {
+    setFormData({
+      ...formData,
+      contributors: [
+        ...formData.contributors,
+        { ...contributor, type: selectedContributorType },
+      ],
+    });
+    setShowContributorDetailsModal(false);
+  };
+
+  return (
+    <div className="bg-[#f6f6f6]  ">
+      <div className="flex gap-8 max-w-full mx-auto">
+        {/* Book Cover Preview */}
+        <div className="w-80">
+          <div className="border-2 border-dashed border-[#4BB1FF] bg-[#EDF7FF] rounded-lg p-6 text-center h-[350px] flex flex-col items-center justify-center">
+            <div className=" rounded flex items-center justify-center mb-4">
+              <Image src={ebook1} alt="Create E-Book" />
+            </div>
+            <p className="text-sm text-[#5d5d5d]">Drag and drop or Click to</p>
+            <p className="text-sm text-[#5d5d5d]">choose file from device</p>
+          </div>
+          <p className="text-sm text-[#888888] mt-2">
+            Supported format: JPEG & PNG
+          </p>
+        </div>
+
+        {/* Form Fields */}
+        <div className="flex-1 bg-white rounded-md">
+          <div className="bg-white p-6 rounded-lg mb-6">
+            <h3 className="text-lg font-semibold text-[#B0B0B0] mb-6">
+              Book Details
+            </h3>
+
+            <div className="space-y-5">
+              <div>
+                <label className="block text-sm font-medium text-[#5d5d5d] mb-2">
+                  Author Name
+                </label>
+                <input
+                  type="text"
+                  value={formData.authorName}
+                  className="w-full p-3 border border-[#e7e7e7] rounded-md focus:outline-none focus:ring-1 focus:ring-[#236fea]"
+                  readOnly
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-[#5d5d5d] mb-2">
+                  Contributing Authors
+                </label>
+                <div
+                  className="flex items-center w-full md:w-[300px] cursor-pointer  justify-between gap-2 mb-3 px-2.5 py-2 border border-[#e7e7e7] rounded-md text-sm text-[#5d5d5d] hover:border-[#d6ecff] hover:bg-[#f8fbff] transition-colors"
+                  onClick={() => setShowContributorTypeModal(true)}
+                >
+                  <button className="cursor-pointer">Add</button>
+                  <button
+                    onClick={() => setShowContributorTypeModal(true)}
+                    className="p-2 border border-[#e7e7e7] cursor-pointer rounded-md text-[#5d5d5d] hover:border-[#d6ecff] hover:bg-[#f8fbff] transition-colors"
+                  >
+                    <svg
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M12 5V19"
+                        stroke="#5d5d5d"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                      <path
+                        d="M5 12H19"
+                        stroke="#5d5d5d"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                  </button>
+                </div>
+                {formData.contributors.map(
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  (contributor: any, index: number) => (
+                    <div
+                      key={index}
+                      className="flex items-center gap-2 mb-2 bg-[#edf7ff] rounded-full px-2 py-1 w-fit"
+                    >
+                      <Image
+                        src={user}
+                        width={24}
+                        height={24}
+                        alt="avatar"
+                        className="rounded-full"
+                      />
+                      <span className="text-sm text-[#3d3d3d]">
+                        {contributor.name}
+                      </span>
+                      <button
+                        onClick={() => {
+                          const newContributors = formData.contributors.filter(
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            (_: any, i: number) => i !== index
+                          );
+                          setFormData({
+                            ...formData,
+                            contributors: newContributors,
+                          });
+                        }}
+                        className="text-[#5d5d5d] hover:text-[#3d3d3d]"
+                      >
+                        <X size={16} />
+                      </button>
+                    </div>
+                  )
+                )}
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-[#5d5d5d] mb-2">
+                  Genre
+                </label>
+                <div className="relative">
+                  <select
+                    className="w-full p-3 border border-[#e7e7e7] rounded-md appearance-none focus:outline-none focus:ring-1 focus:ring-[#236fea]"
+                    onChange={(e) => {
+                      if (
+                        e.target.value &&
+                        !formData.genres.includes(e.target.value)
+                      ) {
+                        setFormData({
+                          ...formData,
+                          genres: [...formData.genres, e.target.value],
+                        });
+                      }
+                    }}
+                  >
+                    <option value="">Genres</option>
+                    <option value="Fiction">Fiction</option>
+                    <option value="Drama">Drama</option>
+                    <option value="Horror">Horror</option>
+                    <option value="Romance">Romance</option>
+                  </select>
+                  <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+                    <ChevronDown className="h-5 w-5 text-[#888888]" />
+                  </div>
+                </div>
+                <div className="flex flex-wrap gap-2 mt-3">
+                  {formData.genres.map((genre: string, index: number) => (
+                    <span
+                      key={index}
+                      className="px-3 py-1 bg-[#edf7ff] rounded-full text-sm flex items-center gap-1 text-[#3d3d3d]"
+                    >
+                      {genre}
+                      <button
+                        onClick={() => {
+                          setFormData({
+                            ...formData,
+                            genres: formData.genres.filter(
+                              (g: string) => g !== genre
+                            ),
+                          });
+                        }}
+                        className="text-[#5d5d5d] hover:text-[#3d3d3d]"
+                      >
+                        <X size={14} />
+                      </button>
+                    </span>
+                  ))}
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-[#5d5d5d] mb-2">
+                  Tags
+                </label>
+                <div className="relative">
+                  <select
+                    className="w-full p-3 border border-[#e7e7e7] rounded-md appearance-none focus:outline-none focus:ring-1 focus:ring-[#236fea]"
+                    onChange={(e) => {
+                      if (
+                        e.target.value &&
+                        !formData.tags.includes(e.target.value)
+                      ) {
+                        setFormData({
+                          ...formData,
+                          tags: [...formData.tags, e.target.value],
+                        });
+                      }
+                    }}
+                  >
+                    <option value="">Select tag</option>
+                    <option value="Adventure">Adventure</option>
+                    <option value="Sci-fi">Sci-fi</option>
+                    <option value="Fantasy">Fantasy</option>
+                    <option value="Mystery">Mystery</option>
+                  </select>
+                  <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+                    <ChevronDown className="h-5 w-5 text-[#888888]" />
+                  </div>
+                </div>
+                <div className="flex flex-wrap gap-2 mt-3">
+                  {formData.tags.map((tag: string, index: number) => (
+                    <span
+                      key={index}
+                      className="px-3 py-1 bg-[#edf7ff] rounded-full text-sm flex items-center gap-1 text-[#3d3d3d]"
+                    >
+                      {tag}
+                      <button
+                        onClick={() => {
+                          setFormData({
+                            ...formData,
+                            tags: formData.tags.filter(
+                              (t: string) => t !== tag
+                            ),
+                          });
+                        }}
+                        className="text-[#5d5d5d] hover:text-[#3d3d3d]"
+                      >
+                        <X size={14} />
+                      </button>
+                    </span>
+                  ))}
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-[#5d5d5d] mb-2">
+                  Book Description
+                </label>
+                <textarea
+                  placeholder="Type here"
+                  className="w-full p-3 border border-[#e7e7e7] rounded-md h-32 focus:outline-none focus:ring-1 focus:ring-[#236fea]"
+                  value={formData.description}
+                  onChange={(e) =>
+                    setFormData({ ...formData, description: e.target.value })
+                  }
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="flex justify-between mt-8 p-6 space-x-6 bg-white rounded-bl-md rounded-br-md">
+            <button
+              onClick={onBack}
+              className="px-4 w-full py-3 bg-[#edf7ff] text-[#0F265C] rounded-md hover:bg-[#d6ecff] cursor-pointer transition-colors"
+            >
+              Previous Page
+            </button>
+            <button
+              onClick={onNext}
+              className="px-4 w-full py-3 bg-[#096cff] text-white rounded-md hover:bg-[#236fea] cursor-pointer transition-colors"
+            >
+              Continue
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {showContributorTypeModal && (
+        <ContributorTypeModal
+          onClose={() => setShowContributorTypeModal(false)}
+          onSelect={handleSelectContributorType}
+        />
+      )}
+
+      {showContributorDetailsModal && (
+        <ContributorDetailsModal
+          type={selectedContributorType}
+          onClose={() => setShowContributorDetailsModal(false)}
+          onAdd={handleAddContributor}
+        />
+      )}
+    </div>
+  );
+};
+
+export default BookDetailsStep;
diff --git a/src/app/dashboard/writers/manage-content/ContributorDetailsModal.tsx b/src/app/dashboard/writers/manage-content/ContributorDetailsModal.tsx
new file mode 100644
index 0000000..03459ae
--- /dev/null
+++ b/src/app/dashboard/writers/manage-content/ContributorDetailsModal.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import React, { useState } from "react";
+import { X } from "lucide-react";
+import Image from "next/image";
+import user from "../../../../../public/user1.svg";
+
+interface ContributorDetailsModalProps {
+  type: string;
+  onClose: () => void;
+  onAdd: (contributor: { name: string; email: string }) => void;
+}
+
+const ContributorDetailsModal: React.FC<ContributorDetailsModalProps> = ({
+  type,
+  onClose,
+  onAdd,
+}) => {
+  const [searchTerm, setSearchTerm] = useState("");
+
+  return (
+    <div className="fixed inset-0 bg-[#000000d7] bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white relative rounded-lg p-6 sm:w-[600px] ">
+        <div className="flex text-center justify-center items-center mb-6">
+          <h2 className="text-xl font-semibold">Enter {type} Details</h2>
+        </div>
+        <button
+          onClick={onClose}
+          className="text-gray-400 absolute top-6 bg-[#f6f6f6] p-1 rounded right-6 cursor-pointer hover:text-gray-600"
+        >
+          <X size={20} />
+        </button>
+
+        <div className="mb-6">
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            {type} name or Email Address
+          </label>
+          <input
+            type="text"
+            placeholder="Enter name or Email address"
+            className="w-full p-3 border border-gray-200 rounded-md"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+        </div>
+
+        <div className="mb-6">
+          <div className="flex items-center w-fit bg-[#EDF7FF] gap-3 p-2 border border-gray-200 rounded-md">
+            <Image
+              src={user}
+              alt="avatar"
+              className="rounded-full"
+              width={32}
+              height={32}
+            />
+            <div>
+              <p className="font-medium text-sm">Joseph Yanum</p>
+              <p className="text-xs text-gray-500">josephyanum75@gmail.com</p>
+            </div>
+          </div>
+        </div>
+
+        <button
+          onClick={() =>
+            onAdd({ name: "Joseph Yanum", email: "josephyanum75@gmail.com" })
+          }
+          className="w-full py-3 bg-[#096cff] text-white rounded-md cursor-pointer"
+        >
+          Add {type.slice(0, -1)}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ContributorDetailsModal;
diff --git a/src/app/writer-dashboard/manage-content/ContributorTypeModal.tsx b/src/app/dashboard/writers/manage-content/ContributorTypeModal.tsx
similarity index 100%
rename from src/app/writer-dashboard/manage-content/ContributorTypeModal.tsx
rename to src/app/dashboard/writers/manage-content/ContributorTypeModal.tsx
diff --git a/src/app/dashboard/writers/manage-content/Manage-content.tsx b/src/app/dashboard/writers/manage-content/Manage-content.tsx
new file mode 100644
index 0000000..d2a1766
--- /dev/null
+++ b/src/app/dashboard/writers/manage-content/Manage-content.tsx
@@ -0,0 +1,520 @@
+// import React from "react";
+// import { StatCard } from "@/components/dashboard/stat-card";
+// import publish from "../../../../public/published.svg";
+// import regular from "../../../../public/regular.svg";
+// import nft from "../../../../public/dolls.svg";
+// import series from "../../../../public/series.svg";
+// import collection from "../../../../public/collect.svg";
+// import review from "../../../../public/review.svg";
+// import draft from "../../../../public/draft.svg";
+// import { ChevronRight } from "lucide-react";
+// import Link from "next/link";
+
+// import { BookCard } from "@/components/dashboard/book-card";
+// import { CollectionCard } from "@/components/dashboard/collection-card";
+
+// const ManageContent = () => {
+//   return (
+//     <>
+//       {/* Stats Cards */}
+//       <div className="grid grid-cols-4 gap-4 mt-20 mb-8">
+//         <StatCard
+//           title="Published"
+//           value="89"
+//           icon={publish}
+//           badgeColor="#096CFF"
+//         />
+//         <StatCard
+//           title="Regular Book"
+//           value="27"
+//           icon={regular}
+//           iconColor="#239641"
+//           badgeColor="#239641"
+//           iconBgColor="#e9f7ff"
+//         />
+//         <StatCard
+//           title="NFT Editions"
+//           value="7"
+//           icon={nft}
+//           iconColor="#822ecb"
+//           badgeColor="#822ecb"
+//           iconBgColor="#f6f6f6"
+//         />
+//         <StatCard
+//           title="Series"
+//           value="12"
+//           icon={series}
+//           badgeColor="#ed8d48"
+//         />
+//       </div>
+
+//       <div className="grid grid-cols-4 gap-4 mb-8">
+//         <StatCard
+//           title="Collections"
+//           value="12"
+//           icon={collection}
+//           badgeValue="12"
+//           badgeColor="#0f3d99"
+//         />
+//         <StatCard
+//           title="Under Review"
+//           value="3"
+//           badgeValue="12"
+//           icon={review}
+//           badgeColor="#dba736"
+//         />
+//         <StatCard
+//           title="Draft"
+//           value="6"
+//           badgeValue="6"
+//           icon={draft}
+//           badgeColor="#888888"
+//         />
+//       </div>
+
+//       {/* Recent Published Books */}
+//       <div className="mb-8 mt-12 bg-white p-6 rounded-lg">
+//         <h2 className="text-lg text-[#454545] font-semibold mb-4">
+//           Your Recent Published Books
+//         </h2>
+//         <div className="grid grid-cols-4 gap-4">
+//           {[1, 2, 3, 4].map((item) => (
+//             <BookCard
+//               key={item}
+//               id={item.toString()}
+//               title="Native Invisibility"
+//               price="$10"
+//               status="Published"
+//               statusColor="#34a853"
+//             />
+//           ))}
+//         </div>
+//       </div>
+
+//       {/* NFT Edition */}
+//       <div className="bg-[#1212120A] p-6 rounded-lg mt-8 mb-8">
+//         <div className="flex items-center justify-between mb-4">
+//           <h2 className="text-lg font-semibold">NFT Edition</h2>
+//           <Link
+//             href="/nft-editions"
+//             className="flex items-center text-sm text-[#5d5d5d]"
+//           >
+//             View All
+//             <ChevronRight size={16} />
+//           </Link>
+//         </div>
+//         <div className="grid grid-cols-4 gap-4">
+//           <BookCard
+//             id="5"
+//             title="Peace and Hate"
+//             price="$10"
+//             status="Published"
+//             statusColor="#34a853"
+//             isNft
+//           />
+//           <BookCard
+//             id="6"
+//             title="Love at Night"
+//             price="$10"
+//             status="Under Review"
+//             statusColor="#dba736"
+//             isNft
+//           />
+//           <BookCard
+//             id="7"
+//             title="Dark World"
+//             price="$10"
+//             status="Draft"
+//             statusColor="#5d5d5d"
+//             isNft
+//           />
+//           <BookCard
+//             id="8"
+//             title="Peace and Hate"
+//             price="$10"
+//             status="Published"
+//             statusColor="#34a853"
+//             isNft
+//           />
+//         </div>
+//       </div>
+
+//   {/* Series */}
+//   <div className="p-6 bg-white rounded-lg mt-8 mb-8">
+//     <div className="flex items-center justify-between mb-4">
+//       <h2 className="text-lg font-semibold">Series</h2>
+//       <Link
+//         href="/series"
+//         className="flex items-center rounded-b-4xl py-2 px-4 text-sm text-[#5d5d5d]"
+//       >
+//         View All
+//         <ChevronRight size={16} />
+//       </Link>
+//     </div>
+//     <div className="grid grid-cols-4 gap-4">
+//       <BookCard
+//         id="9"
+//         title="Native Invisibility"
+//         price="$10"
+//         status="Published"
+//         statusColor="#34a853"
+//         isSeries
+//       />
+//       <BookCard
+//         id="10"
+//         title="Love at Night"
+//         price="$10"
+//         status="Under Review"
+//         statusColor="#dba736"
+//         isSeries
+//       />
+//       <BookCard
+//         id="11"
+//         title="Dark World"
+//         price="$10"
+//         status="Draft"
+//         statusColor="#5d5d5d"
+//         isSeries
+//       />
+//       <BookCard
+//         id="12"
+//         title="Peace and Hate"
+//         price="$10"
+//         status="Published"
+//         statusColor="#34a853"
+//         isSeries
+//       />
+//     </div>
+//   </div>
+
+//   {/* Collections */}
+//   <div className="bg-white p-6 rounded-lg mt-8 mb-8">
+//     <div className="flex items-center justify-between mb-4">
+//       <h2 className="text-lg font-semibold">Collections</h2>
+//       <Link
+//         href="/collections"
+//         className="flex items-center text-sm text-[#5d5d5d]"
+//       >
+//         View All
+//         <ChevronRight size={16} />
+//       </Link>
+//     </div>
+//     <div className="grid grid-cols-4 gap-4">
+//       <CollectionCard id="1" title="Top Tech Books" price="$10" />
+//       <CollectionCard id="2" title="My Best Boook" price="$10" owners={1} />
+//       <CollectionCard id="3" title="Most Read" price="$10" />
+//       <CollectionCard id="4" title="Comics" price="$10" />
+//     </div>
+//   </div>
+//     </>
+//   );
+// };
+
+// export default ManageContent;
+
+"use client";
+
+import React, { useState } from "react";
+import { ChevronRight, Link, Search } from "lucide-react";
+import { StatCard } from "@/components/dashboard/stat-card";
+import { BookCard } from "@/components/dashboard/book-card";
+import { CollectionCard } from "@/components/dashboard/collection-card";
+import publish from "../../../../../public/published.svg";
+import regular from "../../../../../public/regular.svg";
+import nft from "../../../../../public/dolls.svg";
+import series from "../../../../../public/series.svg";
+import collection from "../../../../../public/collect.svg";
+import review from "../../../../../public/review.svg";
+import draft from "../../../../../public/draft.svg";
+import PublishTypeModal from "./PublishTypeModal";
+import BookCreationFlow from "./BookCreationFlow";
+
+const ManageContent = () => {
+  const [showPublishModal, setShowPublishModal] = useState(false);
+  const [currentStep, setCurrentStep] = useState(0);
+
+  const handlePublishClick = () => {
+    setShowPublishModal(true);
+  };
+
+  const handleBookTypeSelect = (type: string) => {
+    setShowPublishModal(false);
+    if (type === "e-book") {
+      setCurrentStep(1);
+    }
+    if (type === "nft") {
+      setCurrentStep(1);
+    }
+    if (type === "series") {
+      setCurrentStep(1);
+    }
+  };
+
+  if (currentStep > 0) {
+    return (
+      <BookCreationFlow
+        currentStep={currentStep}
+        setCurrentStep={setCurrentStep}
+      />
+    );
+  }
+
+  return (
+    <>
+      {/* Search and Filters */}
+      <div className="flex items-center justify-between mb-8">
+        <div className="flex items-center space-x-20">
+          <div className="relative w-80">
+            <Search
+              className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#b0b0b0]"
+              size={18}
+            />
+            <input
+              type="text"
+              placeholder="What are we looking for"
+              className="w-full pl-10 pr-4 py-2.5 border border-[#e7e7e7] rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-[#096cff]"
+            />
+          </div>
+
+          <div className="flex items-center gap-3">
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-[#5d5d5d]">Book Type</span>
+              <button className="flex items-center gap-1 px-2 py-1.5 ">
+                <ChevronRight className="rotate-90" size={16} />
+              </button>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-[#5d5d5d]">Status</span>
+              <button className="flex items-center gap-1 px-2 py-1.5">
+                <ChevronRight className="rotate-90" size={16} />
+              </button>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-[#5d5d5d]">Genre</span>
+              <button className="flex items-center gap-1 px-2 py-1.5">
+                <ChevronRight className="rotate-90" size={16} />
+              </button>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-[#5d5d5d]">Collaborations</span>
+              <button className="flex items-center gap-1 px-2 py-1.5 ">
+                <ChevronRight className="rotate-90" size={16} />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <button
+          className="px-10 py-2.5 bg-[#096cff] cursor-pointer text-white rounded-md font-medium"
+          onClick={handlePublishClick}
+        >
+          Publish a Book
+        </button>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="grid grid-cols-4 gap-4 mt-20 mb-8">
+        <StatCard
+          title="Published"
+          value="89"
+          icon={publish}
+          badgeColor="#096CFF"
+        />
+        <StatCard
+          title="Regular Book"
+          value="27"
+          icon={regular}
+          iconColor="#239641"
+          badgeColor="#239641"
+          iconBgColor="#e9f7ff"
+        />
+        <StatCard
+          title="NFT Editions"
+          value="7"
+          icon={nft}
+          iconColor="#822ecb"
+          badgeColor="#822ecb"
+          iconBgColor="#f6f6f6"
+        />
+        <StatCard
+          title="Series"
+          value="12"
+          icon={series}
+          badgeColor="#ed8d48"
+        />
+      </div>
+
+      <div className="grid grid-cols-4 gap-4 mb-8">
+        <StatCard
+          title="Collections"
+          value="12"
+          icon={collection}
+          badgeValue="12"
+          badgeColor="#0f3d99"
+        />
+        <StatCard
+          title="Under Review"
+          value="3"
+          badgeValue="12"
+          icon={review}
+          badgeColor="#dba736"
+        />
+        <StatCard
+          title="Draft"
+          value="6"
+          badgeValue="6"
+          icon={draft}
+          badgeColor="#888888"
+        />
+      </div>
+
+      {/* Recent Published Books */}
+      <div className="mb-8 mt-12 bg-white p-6 rounded-lg">
+        <h2 className="text-lg text-[#454545] font-semibold mb-4">
+          Your Recent Published Books
+        </h2>
+        <div className="grid grid-cols-4 gap-4">
+          {[1, 2, 3, 4].map((item) => (
+            <BookCard
+              key={item}
+              id={item.toString()}
+              title="Native Invisibility"
+              price="$10"
+              status="Published"
+              statusColor="#34a853"
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* NFT Edition */}
+      <div className="bg-[#1212120A] p-6 rounded-lg mt-8 mb-8">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold">NFT Edition</h2>
+          <Link
+            href="/nft-editions"
+            className="flex items-center text-sm text-[#5d5d5d]"
+          >
+            View All
+            <ChevronRight size={16} />
+          </Link>
+        </div>
+        <div className="grid grid-cols-4 gap-4">
+          <BookCard
+            id="5"
+            title="Peace and Hate"
+            price="$10"
+            status="Published"
+            statusColor="#34a853"
+            isNft
+          />
+          <BookCard
+            id="6"
+            title="Love at Night"
+            price="$10"
+            status="Under Review"
+            statusColor="#dba736"
+            isNft
+          />
+          <BookCard
+            id="7"
+            title="Dark World"
+            price="$10"
+            status="Draft"
+            statusColor="#5d5d5d"
+            isNft
+          />
+          <BookCard
+            id="8"
+            title="Peace and Hate"
+            price="$10"
+            status="Published"
+            statusColor="#34a853"
+            isNft
+          />
+        </div>
+      </div>
+
+      {/* Series */}
+      <div className="p-6 bg-white rounded-lg mt-8 mb-8">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold">Series</h2>
+          <Link
+            href="/series"
+            className="flex items-center rounded-b-4xl py-2 px-4 text-sm text-[#5d5d5d]"
+          >
+            View All
+            <ChevronRight size={16} />
+          </Link>
+        </div>
+        <div className="grid grid-cols-4 gap-4">
+          <BookCard
+            id="9"
+            title="Native Invisibility"
+            price="$10"
+            status="Published"
+            statusColor="#34a853"
+            isSeries
+          />
+          <BookCard
+            id="10"
+            title="Love at Night"
+            price="$10"
+            status="Under Review"
+            statusColor="#dba736"
+            isSeries
+          />
+          <BookCard
+            id="11"
+            title="Dark World"
+            price="$10"
+            status="Draft"
+            statusColor="#5d5d5d"
+            isSeries
+          />
+          <BookCard
+            id="12"
+            title="Peace and Hate"
+            price="$10"
+            status="Published"
+            statusColor="#34a853"
+            isSeries
+          />
+        </div>
+      </div>
+
+      {/* Collections */}
+      <div className="bg-white p-6 rounded-lg mt-8 mb-8">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold">Collections</h2>
+          <Link
+            href="/collections"
+            className="flex items-center text-sm text-[#5d5d5d]"
+          >
+            View All
+            <ChevronRight size={16} />
+          </Link>
+        </div>
+        <div className="grid grid-cols-4 gap-4">
+          <CollectionCard id="1" title="Top Tech Books" price="$10" />
+          <CollectionCard id="2" title="My Best Boook" price="$10" owners={1} />
+          <CollectionCard id="3" title="Most Read" price="$10" />
+          <CollectionCard id="4" title="Comics" price="$10" />
+        </div>
+      </div>
+
+      {/* Publish Type Modal */}
+      {showPublishModal && (
+        <PublishTypeModal
+          onClose={() => setShowPublishModal(false)}
+          onSelect={handleBookTypeSelect}
+        />
+      )}
+    </>
+  );
+};
+
+export default ManageContent;
diff --git a/src/app/dashboard/writers/manage-content/PreviewModal.tsx b/src/app/dashboard/writers/manage-content/PreviewModal.tsx
new file mode 100644
index 0000000..0b1b418
--- /dev/null
+++ b/src/app/dashboard/writers/manage-content/PreviewModal.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import React, { useState } from "react";
+import { X } from "lucide-react";
+import ebook1 from "../../../../../public/ebook1.svg";
+import coin2 from "../../../../../public/coin2.svg";
+import play from "../../../../../public/play.svg";
+import check from "../../../../../public/check.svg";
+import Image from "next/image";
+import BookPreviewModal from "./book-preview-modal";
+
+interface PreviewModalProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  formData?: any;
+  onClose: () => void;
+  onPublish: () => void;
+}
+
+const PreviewModal: React.FC<PreviewModalProps> = ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  formData,
+  onClose,
+  onPublish,
+}) => {
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+
+  return (
+    <div className="fixed inset-0 bg-[#000000d7] bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg p-8 w-[900px] max-w-[95vw] max-h-[90vh] overflow-auto">
+        <div className="flex justify-end mb-4">
+          <button
+            onClick={onClose}
+            className="text-gray-400 bg-[#f6f6f6] p-1 rounded cursor-pointer hover:text-gray-600"
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        <div className="flex flex-col md:flex-row gap-8">
+          <div className="w-80">
+            <div className="border-2 border-dashed border-[#4BB1FF] bg-[#EDF7FF] rounded-lg p-6 text-center h-[350px] flex flex-col items-center justify-center">
+              <div className=" rounded flex items-center justify-center mb-4">
+                <Image src={ebook1} alt="Create E-Book" />
+              </div>
+              <p className="text-sm text-[#5d5d5d]">
+                Drag and drop or Click to
+              </p>
+              <p className="text-sm text-[#5d5d5d]">choose file from device</p>
+            </div>
+            <p className="text-sm text-[#888888] mt-2">
+              Supported format: JPEG & PNG
+            </p>
+
+            <button
+              onClick={() => setIsPreviewOpen(true)}
+              className="w-full flex items-center justify-center space-x-2 cursor-pointer border border-[#888888] rounded-xl p-2.5 mt-8 text-[#888888]"
+            >
+              <Image src={play} alt="Pricing" />
+              <span>Preview Book</span>
+            </button>
+          </div>
+
+          <div className="flex-1">
+            <h2 className="text-2xl font-semibold text-[#3d3d3d] mb-3">
+              Native Invisibility
+            </h2>
+
+            <div className="flex items-center gap-2 mb-6">
+              <span className="text-[#5d5d5d]">By Darrin Collins</span>
+              <span className="bg-[#edf7ff] text-[#236fea] text-xs px-2 py-0.5 rounded-full flex items-center justify-center">
+                <Image src={check} alt="Verified" className="mr-1" />
+              </span>
+            </div>
+
+            <div className="mb-6">
+              <span className="text-sm text-[#5d5d5d]">Access Type</span>
+              <p className="font-medium bg-[#EDF7FF] p-2 rounded-4xl w-fit text-xs text-[#3d3d3d]">
+                One time Purchase
+              </p>
+            </div>
+
+            <div className="mb-6 text-[#000B21] flex items-center space-x-4">
+              <div className="text-3xl font-bold mb-1">$12</div>
+              <div className="flex items-center gap-2 ">
+                <Image src={coin2} alt="Coin" />
+                <span>193 STRK</span>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+              <div className="border border-[#E7E7E7] rounded-lg p-2">
+                <span className="text-sm text-[#5d5d5d] mb-2">Genre(s)</span>
+                <div className="font-medium flex items-center text-[#3D3D3D] flex-wrap gap-1">
+                  <span className="bg-[#F6F6F6] px-3 py-1 rounded-full text-xs">
+                    Fiction
+                  </span>
+                  <span className="bg-[#F6F6F6] px-3 py-1 rounded-full text-xs">
+                    Comic
+                  </span>
+                </div>
+              </div>
+
+              <div className="border border-[#E7E7E7] rounded-lg p-2">
+                <span className="text-xs text-[#6D6D6D]">Page count</span>
+                <p className="font-medium text-sm text-[#3d3d3d]">21 Pages</p>
+              </div>
+
+              <div className="border border-[#E7E7E7] rounded-lg p-2">
+                <span className="text-xs text-[#5d5d5d]">Language</span>
+                <p className="font-medium text-sm text-[#3d3d3d]">English</p>
+              </div>
+            </div>
+
+            <div className="flex items-center space-x-6">
+              <div className="mb-6 border border-[#E7E7E7] rounded-lg px-4 p-2">
+                <span className="text-xm text-[#5d5d5d]">Date published</span>
+                <p className="font-medium text-sm text-[#3d3d3d]">
+                  12 April, 2025
+                </p>
+              </div>
+
+              <div className="mb-6 border border-[#E7E7E7] rounded-lg p-2">
+                <span className="text-xs text-[#5d5d5d]">ISBN</span>
+                <p className="font-medium text-sm text-[#3d3d3d]">
+                  978-3-16-148410-0
+                </p>
+              </div>
+            </div>
+
+            <div className="mb-6">
+              <h3 className="font-semibold text-[#3d3d3d] mb-2">Description</h3>
+              <p className="text-[#888888]">
+                &quotNative Invisibility&quot delves into the complex and often
+                insidious ways in which indigenous peoples and their unique
+                experiences are rendered unseen and unheard in the modern era.
+              </p>
+              <button className="text-[#888888] border border-[#888888] p-1.5 px-2.5 rounded-md text-sm mt-2 hover:underline">
+                Read More
+              </button>
+            </div>
+            <div className="flex justify-end space-x-6 mt-8">
+              <button
+                onClick={onClose}
+                className="px-4 w-full cursor-pointer py-3 bg-[#edf7ff] text-[#236fea] rounded-md hover:bg-[#d6ecff] transition-colors"
+              >
+                Back
+              </button>
+              <button
+                onClick={onPublish}
+                className="px-4 w-full cursor-pointer py-3 bg-[#236fea] text-white rounded-md hover:bg-[#096cff] transition-colors"
+              >
+                Publish Book
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Book Preview Modal */}
+      <BookPreviewModal
+        isOpen={isPreviewOpen}
+        onClose={() => setIsPreviewOpen(false)}
+        bookTitle={formData.bookTitle}
+        authorName={formData.authorName}
+      />
+    </div>
+  );
+};
+
+export default PreviewModal;
diff --git a/src/app/dashboard/writers/manage-content/PricingStep.tsx b/src/app/dashboard/writers/manage-content/PricingStep.tsx
new file mode 100644
index 0000000..d42dd40
--- /dev/null
+++ b/src/app/dashboard/writers/manage-content/PricingStep.tsx
@@ -0,0 +1,209 @@
+"use client";
+
+import React, { useState } from "react";
+import ebook1 from "../../../../../public/ebook1.svg";
+import pricing1 from "../../../../../public/pricing1.svg";
+import pricing2 from "../../../../../public/pricing2.svg";
+import coin1 from "../../../../../public/coin1.svg";
+import coin2 from "../../../../../public/coin2.svg";
+import play from "../../../../../public/play.svg";
+import Image from "next/image";
+import BookPreviewModal from "./book-preview-modal";
+
+interface PricingStepProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  formData: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  setFormData: (data: any) => void;
+  onNext: () => void;
+  onBack: () => void;
+}
+
+const PricingStep: React.FC<PricingStepProps> = ({
+  formData,
+  setFormData,
+  onNext,
+  onBack,
+}) => {
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+
+  return (
+    <div className="bg-[#f6f6f6]  ">
+      <div className="flex gap-8 max-w-full mx-auto">
+        {/* Book Cover Preview */}
+        <div className="w-80">
+          <div className="border-2 border-dashed border-[#4BB1FF] bg-[#EDF7FF] rounded-lg p-6 text-center h-[350px] flex flex-col items-center justify-center">
+            <div className=" rounded flex items-center justify-center mb-4">
+              <Image src={ebook1} alt="Create E-Book" />
+            </div>
+            <p className="text-sm text-[#5d5d5d]">Drag and drop or Click to</p>
+            <p className="text-sm text-[#5d5d5d]">choose file from device</p>
+          </div>
+          <p className="text-sm text-[#888888] mt-2">
+            Supported format: JPEG & PNG
+          </p>
+
+          <button
+            onClick={() => setIsPreviewOpen(true)}
+            className="w-full flex items-center justify-center space-x-2 cursor-pointer border border-[#888888] rounded-xl p-2.5 mt-8 text-[#888888]"
+          >
+            <Image src={play} alt="Pricing" />
+            <span>Preview Book</span>
+          </button>
+        </div>
+
+        {/* Pricing Options */}
+        <div className="flex-1 bg-white">
+          <div className="bg-white p-6 rounded-lg">
+            <h3 className="text-lg font-semibold text-[#B0B0B0] mb-2">
+              Pricing Options
+            </h3>
+            <p className="text-[#5d5d5d] mb-6">Select Your Preferred Option</p>
+
+            <div className="grid grid-cols-2 gap-4 mb-8">
+              <button
+                onClick={() =>
+                  setFormData({ ...formData, pricingOption: "one-time" })
+                }
+                className={`p-4 border cursor-pointer rounded-lg text-center ${
+                  formData.pricingOption === "one-time"
+                    ? "border-[#236fea] bg-[#F6F6F6]"
+                    : "border-[#e7e7e7]"
+                }`}
+              >
+                <div className="flex flex-col items-center gap-3 mb-2">
+                  <Image src={pricing1} alt="One-time Purchase my-1.5" />
+                  <span
+                    className={`font-medium text-[#3d3d3d] ${
+                      formData.pricingOption === "one-time"
+                        ? "text-[#096CFF]"
+                        : "text-[#3d3d3d]"
+                    } `}
+                  >
+                    One-time Purchase
+                  </span>
+                </div>
+                <p className="text-sm text-[#5d5d5d] ">
+                  Readers pay once to own your book forever
+                </p>
+              </button>
+
+              <button
+                onClick={() =>
+                  setFormData({ ...formData, pricingOption: "subscription" })
+                }
+                className={`p-4 border text-center cursor-pointer rounded-lg ${
+                  formData.pricingOption === "subscription"
+                    ? "border-[#236fea] bg-[#F6F6F6]"
+                    : "border-[#e7e7e7]"
+                }`}
+              >
+                <div className="flex flex-col items-center gap-3 mb-2">
+                  <Image src={pricing2} alt="Subscription Only my-1.5" />
+                  <span
+                    className={`font-medium text-[#3d3d3d] ${
+                      formData.pricingOption === "subscription"
+                        ? "text-[#096CFF]"
+                        : "text-[#3d3d3d]"
+                    } `}
+                  >
+                    Subscription Only
+                  </span>
+                </div>
+                <p className="text-sm text-[#5d5d5d]">
+                  Readers access your book as part of their active subscription
+                </p>
+              </button>
+            </div>
+
+            <div
+              className={`grid gap-6 ${
+                formData.pricingOption === "one-time"
+                  ? "grid-cols-2"
+                  : "grid-cols-1"
+              }`}
+            >
+              <div>
+                <label className="block text-sm font-semibold text-[#5D5D5D] mb-2">
+                  Set Price{" "}
+                  {formData.pricingOption === "one-time" ? "(USDC)" : ""}
+                </label>
+                <div className="relative flex items-center space-x-4">
+                  <span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#5d5d5d]">
+                    <Image src={coin1} alt="Coin1" />
+                  </span>
+                  <input
+                    type="text"
+                    value={
+                      formData.pricingOption === "one-time"
+                        ? formData.price
+                        : "No price input needed"
+                    }
+                    onChange={(e) =>
+                      setFormData({ ...formData, price: e.target.value })
+                    }
+                    className="w-full pl-10 pr-4 py-3 border border-[#e7e7e7] text-[#B0B0B0] rounded-md focus:outline-none focus:ring-1 focus:ring-[#236fea]"
+                  />
+                </div>
+              </div>
+
+              {formData.pricingOption === "one-time" && (
+                <div>
+                  <label className="block text-sm font-semibold text-[#5d5d5d] mb-2">
+                    Price in Stark (STRK)
+                  </label>
+                  <div className="relative flex items-center space-x-4">
+                    <span className="absolute left-3 top-1/2 transform -translate-y-1/2">
+                      <Image src={coin2} alt="Coin2" />
+                    </span>
+                    <input
+                      type="text"
+                      value={formData.stark}
+                      onChange={(e) =>
+                        setFormData({ ...formData, stark: e.target.value })
+                      }
+                      className="w-full pl-10 pr-4 py-3 border border-[#e7e7e7] text-[#B0B0B0] rounded-md focus:outline-none focus:ring-1 focus:ring-[#236fea]"
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <div className="mt-6 p-4 bg-[#EDF7FF] rounded-lg border border-[#096CFF]">
+              <p className="text-sm text-[#454545]">
+                You&aposll receive <span className="font-semibold">80%</span> in
+                royalties from each sale. We keep a small fee to maintain the
+                platform and ensure smooth publishing for everyone.
+              </p>
+            </div>
+          </div>
+
+          <div className="flex justify-between mt-8 p-6 space-x-6">
+            <button
+              onClick={onBack}
+              className="px-4 w-full py-3 bg-[#edf7ff] text-[#236fea] cursor-pointer rounded-md hover:bg-[#d6ecff] transition-colors"
+            >
+              Previous Page
+            </button>
+            <button
+              onClick={onNext}
+              className="px-4 w-full py-3 bg-[#236fea] text-white rounded-md cursor-pointer hover:bg-[#096cff] transition-colors"
+            >
+              Publish Book
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Book Preview Modal */}
+      <BookPreviewModal
+        isOpen={isPreviewOpen}
+        onClose={() => setIsPreviewOpen(false)}
+        bookTitle={formData.bookTitle}
+        authorName={formData.authorName}
+      />
+    </div>
+  );
+};
+
+export default PricingStep;
diff --git a/src/app/writer-dashboard/manage-content/ProgressStepper.tsx b/src/app/dashboard/writers/manage-content/ProgressStepper.tsx
similarity index 100%
rename from src/app/writer-dashboard/manage-content/ProgressStepper.tsx
rename to src/app/dashboard/writers/manage-content/ProgressStepper.tsx
diff --git a/src/app/dashboard/writers/manage-content/PublishTypeModal.tsx b/src/app/dashboard/writers/manage-content/PublishTypeModal.tsx
new file mode 100644
index 0000000..b39b15f
--- /dev/null
+++ b/src/app/dashboard/writers/manage-content/PublishTypeModal.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import type React from "react";
+import { X } from "lucide-react";
+import create1 from "../../../../../public/create1.svg";
+import create2 from "../../../../../public/create2.svg";
+import create3 from "../../../../../public/create3.svg";
+import Image from "next/image";
+
+interface PublishTypeModalProps {
+  onClose: () => void;
+  onSelect: (type: string) => void;
+}
+
+const PublishTypeModal: React.FC<PublishTypeModalProps> = ({
+  onClose,
+  onSelect,
+}) => {
+  return (
+    <div className="fixed inset-0 bg-[#000000d7] bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-xl p-8 w-[950px] max-w-[95vw]">
+        <div className="flex justify-end mb-2">
+          <button
+            onClick={onClose}
+            className="text-gray-400 border p-2 rounded-md hover:text-gray-600 cursor-pointer"
+          >
+            <X size={16} />
+          </button>
+        </div>
+
+        <div className="text-center mb-8">
+          <h2 className="text-2xl font-semibold text-[#3d3d3d] mb-2">
+            What Masterpiece Would You Like to Create
+          </h2>
+          <p className="text-[#5d5d5d]">
+            Choose the type of story you&aposre ready to bring to life
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {/* E-Book Option */}
+          <div className="flex relative flex-col border p-4 h-[380px] rounded-lg">
+            <div className="bg-[#edf7ff] rounded-lg p-6 flex flex-col items-center mb-4 h-[180px] justify-center">
+              <div className=" rounded flex items-center justify-center mb-2">
+                <Image src={create1} alt="Create E-Book" />
+              </div>
+            </div>
+            <h3 className="font-semibold text-lg mb-1">E-Book</h3>
+            <p className="text-sm text-[#5d5d5d] mb-4">
+              Publish a standalone digital book and make it instantly available
+              to readers to use.
+            </p>
+            <button
+              onClick={() => onSelect("e-book")}
+              className="bg-[#236fea] hover:bg-[#096cff] text-white w-full py-2 rounded-md cursor-pointer"
+            >
+              Create e-Book
+            </button>
+          </div>
+
+          {/* NFT Option */}
+          <div className="flex flex-col border p-4 rounded-lg">
+            <div className="bg-[#edf7ff] rounded-lg p-6 flex flex-col items-center mb-4 h-[180px] justify-center">
+              <div className="w-14 h-14 flex items-center justify-center mb-2">
+                <Image src={create2} alt="Create E-Book" />
+              </div>
+            </div>
+            <h3 className="font-semibold text-lg mb-1">
+              Exclusive NFT Edition
+            </h3>
+            <p className="text-sm text-[#5d5d5d] mb-4">
+              Start a book series and release your story in multiple parts over
+              time with chainlib.
+            </p>
+            <button
+              onClick={() => onSelect("nft")}
+              className="bg-[#236fea] hover:bg-[#096cff] text-white w-full py-2 rounded-md cursor-pointer"
+            >
+              Create Series
+            </button>
+          </div>
+
+          {/* Series Option */}
+          <div className="flex flex-col border p-4 rounded-lg">
+            <div className="bg-[#edf7ff] rounded-lg p-6 flex flex-col items-center mb-4 h-[180px] justify-center">
+              <div className="w-14 h-14 flex items-center justify-center mb-2">
+                <Image src={create3} alt="Create E-Book" />
+              </div>
+            </div>
+            <h3 className="font-semibold text-lg mb-1">Series</h3>
+            <p className="text-sm text-[#5d5d5d] mb-4">
+              Start a book series and release your story in multiple parts over
+              time with chainlib.
+            </p>
+            <button
+              onClick={() => onSelect("series")}
+              className="bg-[#236fea] hover:bg-[#096cff] text-white w-full py-2 rounded-md cursor-pointer"
+            >
+              Create Series
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PublishTypeModal;
diff --git a/src/app/dashboard/writers/manage-content/PublishingNft/Pricing.tsx b/src/app/dashboard/writers/manage-content/PublishingNft/Pricing.tsx
new file mode 100644
index 0000000..816eb9c
--- /dev/null
+++ b/src/app/dashboard/writers/manage-content/PublishingNft/Pricing.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import type React from "react";
+import Image from "next/image";
+import basildocument from "../../../../../../public/basildocument.png";
+import dollar from "../../../../../../public/dollar.svg";
+import stark from "../../../../../../public/stark.svg";
+
+
+type BookData = {
+  copiesCount: number;
+  priceUSDC: number;
+  priceSTRK: number;
+};
+
+type PricingProps = {
+  bookData: BookData;
+  updateBookData: (data: Partial<BookData>) => void;
+  prevStep: () => void;
+  publishBook: () => void;
+};
+
+function Pricing({ bookData, updateBookData, prevStep, publishBook }: PricingProps): React.ReactElement {
+  return (
+    <div className="max-w-3xl mx-auto">
+      <h1 className="text-xl font-medium mb-6">Exclusive NFT Book</h1>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+        <div>
+          <div className="border-2 border-dashed border-blue-200 rounded-md p-4 flex flex-col items-center justify-center h-64 bg-blue-50">
+            <Image
+              src={basildocument}
+              alt="document upload"
+              width={20}
+              height={10}
+              className="w-15 h-10"
+            />
+
+            <p className="text-sm text-gray-500 text-center">
+              Drag and drop or Click to<br />choose file from device
+            </p>
+          </div>
+          <p className="text-xs text-gray-500 mt-2">Supported format: JPEG & PNG</p>
+
+          <button className="w-full flex items-center justify-center bg-gray-100 text-gray-700 rounded-md py-2 mt-4">
+            <span className="mr-2">▶</span> Preview Book
+          </button>
+        </div>
+
+        <div className="md:col-span-2">
+          <div className="bg-white rounded-lg shadow p-6">
+            <h2 className="text-lg font-medium mb-4">Pricing Options</h2>
+
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Number of Copies (Limited edition)</label>
+                <input
+                  type="number"
+                  className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                  value={bookData.copiesCount}
+                  onChange={(e) => updateBookData({ copiesCount: parseInt(e.target.value, 10) })}
+                />
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">Set Price (USDC)</label>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-1 flex items-center pointer-events-none">
+
+                      <Image
+                        src={dollar}
+                        alt="document upload"
+                        width={20}
+                        height={10}
+                        className="w-5 h-5"
+                      />
+
+                    </div>
+                    <input
+                      type="number"
+                      step="0.01"
+                      min="0"
+                      className="w-full border border-gray-300 rounded-md pl-7 pr-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                      value={bookData.priceUSDC}
+                      onChange={(e) => updateBookData({ priceUSDC: parseFloat(e.target.value) })}
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">Price in Stark (STRK)</label>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-1 flex items-center pointer-events-none">
+
+                      <Image
+                        src={stark}
+                        alt="document upload"
+                        width={20}
+                        height={10}
+                        className="w-5 h-5"
+                      />
+
+                    </div>
+                    <input
+                      type="number"
+                      className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                      value={bookData.priceSTRK}
+                      readOnly
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div className="bg-blue-50 border border-blue-100 rounded-md p-4 text-sm text-blue-800">
+                You&apos;ll receive 90% in royalties from each sale. We keep a small fee to maintain the platform and ensure smooth publishing for everyone.
+              </div>
+            </div>
+
+            <div className="flex justify-between mt-8">
+              <button
+                className="px-6 py-2 bg-blue-100 text-gray-800 rounded-md font-medium hover:bg-gray-200"
+                onClick={prevStep}
+              >
+                Previous Page
+              </button>
+              <button
+                className="px-6 py-2 bg-blue-500 text-white rounded-md font-medium hover:bg-blue-600"
+                onClick={publishBook}
+              >
+                Publish Book
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+} export default Pricing;
diff --git a/src/app/dashboard/writers/manage-content/PublishingNft/bookContent.tsx b/src/app/dashboard/writers/manage-content/PublishingNft/bookContent.tsx
new file mode 100644
index 0000000..c7b757f
--- /dev/null
+++ b/src/app/dashboard/writers/manage-content/PublishingNft/bookContent.tsx
@@ -0,0 +1,206 @@
+"use client";
+
+import React, { useState, ChangeEvent } from "react";
+import Image from "next/image";
+import fluentdocument from "../../../../../../public/fluentdocument.png";
+import basildocument from "../../../../../../public/basildocument.png";
+
+type BookData = {
+    bookTitle: string;
+    subtitle: string;
+    language: string;
+    isbn?: string;
+};
+
+type BookContentProps = {
+    bookData: BookData;
+    updateBookData: (data: Partial<BookData>) => void;
+    nextStep: () => void;
+};
+
+function BookContent({ bookData, updateBookData, nextStep }: BookContentProps) {
+    const [manuscriptFile, setManuscriptFile] = useState<File | null>(null);
+    const [bonusContentFile, setBonusContentFile] = useState<File | null>(null);
+
+    const handleManuscriptUpload = (e: ChangeEvent<HTMLInputElement>) => {
+        if (e.target.files && e.target.files.length > 0) {
+            const file = e.target.files[0];
+            setManuscriptFile(file);
+        }
+    };
+
+    const handleBonusContentUpload = (e: ChangeEvent<HTMLInputElement>) => {
+        if (e.target.files && e.target.files.length > 0) {
+            const file = e.target.files[0];
+            setBonusContentFile(file);
+        }
+    };
+
+    return (
+        <div className="max-w-3xl mx-auto">
+            <h1 className="text-xl font-medium mb-6">Exclusive NFT Book</h1>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div>
+                    <div className="border-2 border-dashed border-blue-200 rounded-md p-4 flex flex-col items-center justify-center h-64 bg-blue-50">
+                        <Image
+                            src={basildocument}
+                            alt="document upload"
+                            width={20}
+                            height={10}
+                            className="w-15 h-10"
+                        />
+
+                        <p className="text-sm text-gray-500 text-center">
+                            Drag and drop or Click to<br />choose file from device
+                        </p>
+                    </div>
+                    <p className="text-xs text-gray-500 mt-2">Supported format: JPEG & PNG</p>
+                </div>
+
+
+
+
+                <div className="bg-white rounded-lg shadow md:col-span-2 p-6">
+                    <div>
+                        <div>
+                            <label className="block text-sm font-medium text-gray-700 mb-1">Book Title</label>
+                            <input
+                                type="text"
+                                placeholder="Your Book Title"
+                                className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                                value={bookData.bookTitle}
+                                onChange={(e) => updateBookData({ bookTitle: e.target.value })}
+                            />
+                        </div>
+
+                        <div>
+                            <label className="block text-sm font-medium text-gray-700 mb-1">Sub-title</label>
+                            <input
+                                type="text"
+                                placeholder="Sub-title"
+                                className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                                value={bookData.subtitle}
+                                onChange={(e) => updateBookData({ subtitle: e.target.value })}
+                            />
+                        </div>
+
+                        <div>
+                            <label className="block text-sm font-medium text-gray-700 mb-1">Language</label>
+                            <select
+                                className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                                value={bookData.language}
+                                onChange={(e) => updateBookData({ language: e.target.value })}
+                            >
+                                <option value="">Select Language</option>
+                                <option value="en">English</option>
+                                <option value="es">Spanish</option>
+                                <option value="fr">French</option>
+                                <option value="de">German</option>
+                                <option value="zh">Chinese</option>
+                            </select>
+                        </div>
+
+                        <div>
+                            <label className="block text-sm font-medium text-gray-700 mb-1">Book ISBN (Optional)</label>
+                            <input
+                                type="text"
+                                placeholder="978-1-234-56789-0"
+                                className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                                value={bookData.isbn}
+                                onChange={(e) => updateBookData({ isbn: e.target.value })}
+                            />
+                        </div>
+                    </div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">Manuscript</label>
+                    <div
+                        className="border-2 border-dashed border-blue-200 rounded-md p-4 flex flex-col items-center justify-center h-32 bg-blue-50 cursor-pointer"
+                        onClick={() => document.getElementById('manuscript-upload')?.click()}
+                    >
+                        <Image
+                            src={fluentdocument}
+                            alt="document upload"
+                            width={20}
+                            height={10}
+                            className=" w-15 h-10"
+                        />
+                        <p className="text-sm text-gray-500 text-center">
+                            Drag and drop or Click to<br />choose file from device
+                        </p>
+                        <input
+                            id="manuscript-upload"
+                            type="file"
+                            className="hidden"
+                            accept=".pdf,.doc,.docx"
+                            onChange={handleManuscriptUpload}
+                        />
+                    </div>
+                    {manuscriptFile && (
+                        <p className="text-xs text-gray-600 mt-2">{manuscriptFile.name} - {Math.round(manuscriptFile.size / 1024)} KB</p>
+                    )}
+
+                    <div className="mt-6">
+                        <div className="flex items-center justify-between">
+                            <label className="block text-sm font-medium text-gray-700">Add Bonus Content</label>
+                            <button
+                                type="button"
+                                className="flex items-center text-blue-500 text-sm font-medium"
+                                onClick={() => document.getElementById('bonus-content-upload')?.click()}
+                            >
+                                <span className="mr-1">+</span> Add
+                            </button>
+                            <input
+                                id="bonus-content-upload"
+                                type="file"
+                                className="hidden"
+                                accept=".pdf,.doc,.docx,.jpg,.png"
+                                onChange={handleBonusContentUpload}
+                            />
+                        </div>
+
+                        <div
+                            className="border-2 border-dashed border-blue-200 rounded-md p-4 flex flex-col items-center justify-center h-32 bg-blue-50 mt-2 cursor-pointer"
+                            onClick={() => document.getElementById('bonus-content-upload')?.click()}
+                        >
+                            <Image
+                                src={fluentdocument}
+                                width={20}
+                                height={10}
+                                alt="document upload"
+                                className=" w-15 h-10"
+                            />
+                            <p className="text-sm text-gray-500 text-center">
+                                Drag and drop or Click to<br />choose file from device
+                            </p>
+                        </div>
+                        {bonusContentFile && (
+                            <p className="text-xs text-gray-600 mt-2">{bonusContentFile.name} - {Math.round(bonusContentFile.size / 1024)} KB</p>
+                        )}
+                        <p className="text-xs text-gray-500 mt-1">e.g. bonus artwork, author message</p>
+                    </div>
+
+                    <div className="flex justify-between mt-8">
+                        <button
+                            className="px-6 py-2 bg-blue-100 text-gray-800 rounded-md font-medium hover:bg-gray-200"
+                            disabled
+                        >
+                            Back
+                        </button>
+                        <button
+                            className="px-6 py-2 bg-blue-500 text-white rounded-md font-medium hover:bg-blue-600"
+                            onClick={nextStep}
+                        >
+                            Continue
+                        </button>
+                    </div>
+                </div>
+
+
+            </div>
+        </div>
+    );
+}
+
+export default BookContent;
+
+
diff --git a/src/app/dashboard/writers/manage-content/PublishingNft/bookDetail.tsx b/src/app/dashboard/writers/manage-content/PublishingNft/bookDetail.tsx
new file mode 100644
index 0000000..bd9fdcc
--- /dev/null
+++ b/src/app/dashboard/writers/manage-content/PublishingNft/bookDetail.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import React, { useState } from "react";
+import GenreTag from "./genre";
+import Image from "next/image";
+import basildocument from "../../../../../../public/basildocument.png";
+
+
+const AVAILABLE_GENRES = ["Fiction", "Drama", "Science Fiction", "Fantasy", "Mystery", "Romance"];
+const AVAILABLE_TAGS = ["Adventure", "Sci-Fi", "Bestseller", "New Release", "Fantasy"];
+
+interface BookDetailsProps {
+    bookData: {
+        authorName: string;
+        genre: string[];
+        tags: string[];
+        description: string;
+    };
+    updateBookData: (data: Partial<BookDetailsProps["bookData"]>) => void;
+    nextStep: () => void;
+    prevStep: () => void;
+}
+
+export default function BookDetails({ bookData, updateBookData, nextStep, prevStep }: BookDetailsProps) {
+    const [selectedGenres, setSelectedGenres] = useState<string[]>(bookData.genre || []);
+    const [selectedTags, setSelectedTags] = useState<string[]>(bookData.tags || []);
+
+    const toggleGenre = (genre: string) => {
+        const updated = selectedGenres.includes(genre)
+            ? selectedGenres.filter(g => g !== genre)
+            : [...selectedGenres, genre];
+        setSelectedGenres(updated);
+        updateBookData({ genre: updated });
+    };
+
+    const toggleTag = (tag: string) => {
+        const updated = selectedTags.includes(tag)
+            ? selectedTags.filter(t => t !== tag)
+            : [...selectedTags, tag];
+        setSelectedTags(updated);
+        updateBookData({ tags: updated });
+    };
+
+    const renderTags = (items: string[], selected: string[], onToggle: (item: string) => void) =>
+        items.map(item => (
+            <GenreTag key={item} name={item} selected={selected.includes(item)} onClick={() => onToggle(item)} />
+        ));
+
+    return (
+        <div className="max-w-3xl mx-auto">
+            <h1 className="text-xl font-medium mb-6">Exclusive NFT Book</h1>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div>
+                    <div className="border-2 border-dashed border-blue-200 rounded-md p-4 flex flex-col items-center justify-center h-64 bg-blue-50">
+                        <Image
+                            src={basildocument}
+                            alt="document upload"
+                            width={20}
+                            height={10}
+                            className="w-15 h-10"
+                        />
+                        <p className="text-sm text-gray-500 text-center">
+                            Drag and drop or Click to<br />choose file from device
+                        </p>
+                    </div>
+                    <p className="text-xs text-gray-500 mt-2">Supported format: JPEG & PNG</p>
+                </div>
+
+                <div className="md:col-span-2">
+                    <div className="bg-white rounded-lg shadow p-6">
+                        <h2 className="text-lg font-medium mb-4">Book Details</h2>
+
+                        <div className="space-y-4">
+                            <div>
+                                <label className="block text-sm font-medium text-gray-700 mb-1">Author Name</label>
+                                <input
+                                    type="text"
+                                    placeholder="Author Name"
+                                    className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                                    value={bookData.authorName}
+                                    onChange={e => updateBookData({ authorName: e.target.value })}
+                                />
+                            </div>
+
+                            <div>
+                                <label className="block text-sm font-medium text-gray-700 mb-1">Genre</label>
+                                <div className="flex flex-wrap gap-2 mt-2">
+                                    {renderTags(AVAILABLE_GENRES, selectedGenres, toggleGenre)}
+                                </div>
+                            </div>
+
+                            <div>
+                                <label className="block text-sm font-medium text-gray-700 mb-1">Tags</label>
+                                <div className="flex flex-wrap gap-2 mt-2">
+                                    {renderTags(AVAILABLE_TAGS, selectedTags, toggleTag)}
+                                </div>
+                            </div>
+
+                            <div>
+                                <label className="block text-sm font-medium text-gray-700 mb-1">Book Description</label>
+                                <textarea
+                                    className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500 h-32"
+                                    placeholder="Type here"
+                                    value={bookData.description}
+                                    onChange={e => updateBookData({ description: e.target.value })}
+                                />
+                            </div>
+                        </div>
+
+                        <div className="flex justify-between mt-8">
+                            <button
+                                className="px-6 py-2 bg-blue-100 text-gray-800 rounded-md font-medium hover:bg-gray-200"
+                                onClick={prevStep}
+                            >
+                                Previous Page
+                            </button>
+                            <button
+                                className="px-6 py-2 bg-blue-500 text-white rounded-md font-medium hover:bg-blue-600"
+                                onClick={nextStep}
+                            >
+                                Continue
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/app/writer-dashboard/manage-content/PublishingNft/genre.tsx b/src/app/dashboard/writers/manage-content/PublishingNft/genre.tsx
similarity index 100%
rename from src/app/writer-dashboard/manage-content/PublishingNft/genre.tsx
rename to src/app/dashboard/writers/manage-content/PublishingNft/genre.tsx
diff --git a/src/app/writer-dashboard/manage-content/PublishingNft/page.tsx b/src/app/dashboard/writers/manage-content/PublishingNft/page.tsx
similarity index 100%
rename from src/app/writer-dashboard/manage-content/PublishingNft/page.tsx
rename to src/app/dashboard/writers/manage-content/PublishingNft/page.tsx
diff --git a/src/app/writer-dashboard/manage-content/StepIndicator.tsx b/src/app/dashboard/writers/manage-content/StepIndicator.tsx
similarity index 100%
rename from src/app/writer-dashboard/manage-content/StepIndicator.tsx
rename to src/app/dashboard/writers/manage-content/StepIndicator.tsx
diff --git a/src/app/dashboard/writers/manage-content/SuccessModal.tsx b/src/app/dashboard/writers/manage-content/SuccessModal.tsx
new file mode 100644
index 0000000..3f48779
--- /dev/null
+++ b/src/app/dashboard/writers/manage-content/SuccessModal.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import success_done from "../../../../../public/Done.svg";
+import { X } from "lucide-react";
+import Image from "next/image";
+
+interface SuccessModalProps {
+  onClose: () => void;
+}
+
+const SuccessModal: React.FC<SuccessModalProps> = ({ onClose }) => {
+  return (
+    <div className="fixed inset-0 bg-[#000000d7] bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg p-8 w-[500px] text-center relative">
+        <button
+          onClick={onClose}
+          className="absolute top-4 bg-[#f6f6f6] p-1 rounded cursor-pointer right-4 text-gray-400 hover:text-gray-600"
+        >
+          <X size={20} />
+        </button>
+
+        <div className=" rounded-full flex items-center justify-center mx-auto mb-6">
+          <Image
+            src={success_done}
+            alt="icon success"
+            className=" text-blue-600"
+          />
+        </div>
+
+        <h2 className="text-2xl font-semibold mb-4">
+          Book Published Successfully!
+        </h2>
+        <p className="text-gray-600 mb-8">
+          Your book is now live and ready to be discovered by readers around the
+          world.
+        </p>
+
+        <button
+          onClick={onClose}
+          className="px-8 py-3 bg-[#096cff] cursor-pointer text-white rounded-md"
+        >
+          Return to Dashboard
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default SuccessModal;
diff --git a/src/app/dashboard/writers/manage-content/book-preview-modal.tsx b/src/app/dashboard/writers/manage-content/book-preview-modal.tsx
new file mode 100644
index 0000000..b0f299e
--- /dev/null
+++ b/src/app/dashboard/writers/manage-content/book-preview-modal.tsx
@@ -0,0 +1,206 @@
+"use client";
+
+import type React from "react";
+
+import { useEffect } from "react";
+import {
+  ChevronLeft,
+  Plus,
+  Minus,
+  PenLine,
+  Layout,
+  Link2,
+  Maximize2,
+  Bell,
+} from "lucide-react";
+import Image from "next/image";
+import user from "../../../../../public/user1.svg";
+import check from "../../../../../public/check.svg";
+
+interface BookPreviewModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  bookTitle?: string;
+  authorName?: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  bookContent?: any;
+}
+
+const BookPreviewModal: React.FC<BookPreviewModalProps> = ({
+  isOpen,
+  onClose,
+  authorName = "Brianna Wiest",
+  bookContent,
+}) => {
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const sampleContent = `to be for the rest of your life. How genuinely are you going to live? How afraid are you going to be? For how many more years are you going to let your demons conquer you?
+  
+    You are only in your 20s. It is not too late to start over.
+    
+    In fact, I hope you start over all the time. Not by burning bridges or ditching town or closing yourself to what you have, but by no longer fearing what you don't. I hope you spend your free afternoons working on the skills you need to have the job you want someday. I hope you accept that you're not supposed to look the way you did in high school, or really want the same things. I hope you ask yourself: "What do I want now?" every time it occurs to you to do so. I hope you learn that there is only one way to guide your life, and it is by consistently focusing on the next right step.
+    
+    Genuinely unhappy people are never upset by their circumstances; they are upset because they have externalized their power. They put their faith in finding the right person as opposed to being able to attract and choose the right person. They put their faith in finding the right job, in the right economy, as opposed to honing their skills to the point that a company would be remiss to overlook them.
+    
+    If you want to genuinely start over, clear the slate of everything you ever thought about how to get your life together. Don't predict, project, mind-read, assume. Don't imagine a better elevator speech. Don't only think of what it makes sense to do. Think of what it feels right to do. Not what your impulses say, not what your laziness says, not what your fear says. Those things have probably gotten you where you are. But a layer beneath them is a more resolute voice, and it will tell you which way to go. You only have to get quiet, listen, and act.
+    
+    Learn to live your life more than you're inclined to sit around wondering about it. You can't reflect your way into a new existence, but you can think yourself into paralysis. If you know, at your core, that you must start over, it's not a matter of whether`;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
+      <div className="bg-[#f6f6f6] w-full h-full md:h-[90vh] md:w-[90vw] flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-[#e7e7e7] bg-white">
+          <div className="flex items-center gap-2">
+            <button
+              onClick={onClose}
+              className="flex items-center cursor-pointer gap-1 px-3 py-1.5 border border-[#e7e7e7] rounded-md hover:bg-[#f6f6f6] transition-colors"
+            >
+              <ChevronLeft className="w-4 h-4" />
+              <span>Back</span>
+            </button>
+          </div>
+          <div className="flex items-center gap-3">
+            <button className="p-1.5 border border-[#e7e7e7] rounded-md hover:bg-[#f6f6f6] transition-colors">
+              <Plus className="w-4 h-4" />
+            </button>
+            <button className="p-1.5 border border-[#e7e7e7] rounded-md hover:bg-[#f6f6f6] transition-colors">
+              <Minus className="w-4 h-4" />
+            </button>
+            <button className="p-1.5 border border-[#e7e7e7] rounded-md hover:bg-[#f6f6f6] transition-colors">
+              <PenLine className="w-4 h-4" />
+            </button>
+            <button className="p-1.5 border border-[#e7e7e7] rounded-md hover:bg-[#f6f6f6] transition-colors">
+              <Layout className="w-4 h-4" />
+            </button>
+            <button className="p-1.5 border border-[#e7e7e7] rounded-md hover:bg-[#f6f6f6] transition-colors">
+              <Link2 className="w-4 h-4" />
+            </button>
+            <button className="p-1.5 border border-[#e7e7e7] rounded-md hover:bg-[#f6f6f6] transition-colors">
+              <Maximize2 className="w-4 h-4" />
+            </button>
+            <span className="text-sm text-[#5d5d5d]">Page 1-37</span>
+          </div>
+          <div className="flex items-center gap-4 space-x-3">
+            <div className="relative">
+              <Bell className="text-[#5d5d5d] cursor-pointer" size={20} />
+              <div className="absolute -top-1 -right-1 w-2 h-2 bg-[#ff5c5c] rounded-full"></div>
+            </div>
+            <div className="flex items-center gap-2 border p-1 border-[#E7E7E7] rounded">
+              <div className="w-8 h-8 rounded-sm bg-[#dba736] flex items-center justify-center overflow-hidden">
+                <Image
+                  src={user}
+                  alt="Profile"
+                  width={32}
+                  height={32}
+                  className="object-cover"
+                />
+              </div>
+              <div className="text-sm">
+                <div className="flex items-center gap-1">
+                  <span className="font-medium">Joseph Yanum</span>
+                  <Image src={check} alt="Profile" className="object-cover" />
+                </div>
+                <span className="text-[#888888] text-xs">@joeyyanum</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Main Content */}
+        <div className="flex flex-1 overflow-hidden">
+          {/* Sidebar */}
+          <div className="w-64 bg-white border-r border-[#e7e7e7] flex flex-col overflow-hidden">
+            <div className="px-4 py-6">
+              <h1 className="text-lg font-semibold text-[#3d3d3d]">
+                Book Preview
+              </h1>
+            </div>
+
+            <div className="flex items-center justify-between px-4 py-3 border-y border-[#e7e7e7]">
+              <h2 className="text-sm font-medium text-[#3d3d3d]">
+                Table of Content
+              </h2>
+              <button className="p-1">
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M4 6H20M4 12H20M4 18H20"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </button>
+            </div>
+
+            <div className="flex-1 overflow-auto">
+              <ul className="py-2">
+                <li className="px-4 py-2 hover:bg-[#f6f6f6] cursor-pointer">
+                  Cover
+                </li>
+                <li className="px-4 py-2 hover:bg-[#f6f6f6] cursor-pointer">
+                  Praise
+                </li>
+                <li className="px-4 py-2 hover:bg-[#f6f6f6] cursor-pointer">
+                  Title
+                </li>
+                <li className="px-4 py-2 hover:bg-[#f6f6f6] cursor-pointer">
+                  Chapter 1
+                </li>
+                <li className="px-4 py-2 hover:bg-[#f6f6f6] cursor-pointer">
+                  How it Started
+                </li>
+                <li className="px-4 py-2 hover:bg-[#f6f6f6] cursor-pointer">
+                  Let Go
+                </li>
+                <li className="px-4 py-2 hover:bg-[#f6f6f6] cursor-pointer">
+                  Chapter 2
+                </li>
+                <li className="px-4 py-2 hover:bg-[#f6f6f6] cursor-pointer">
+                  How it Started
+                </li>
+                <li className="px-4 py-2 hover:bg-[#f6f6f6] cursor-pointer">
+                  Where Are We
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          {/* Book Content */}
+          <div className="flex-1 bg-white overflow-auto p-6">
+            <div className="max-w-3xl mx-auto">
+              <div className="whitespace-pre-line text-[#3d3d3d] leading-relaxed">
+                {bookContent || sampleContent}
+              </div>
+              <div className="flex items-center justify-between mt-12 text-sm text-[#5d5d5d]">
+                <span>276</span>
+                <div className="uppercase font-medium">{authorName}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BookPreviewModal;
diff --git a/src/app/writer-dashboard/manage-content/example.tsx b/src/app/dashboard/writers/manage-content/example.tsx
similarity index 100%
rename from src/app/writer-dashboard/manage-content/example.tsx
rename to src/app/dashboard/writers/manage-content/example.tsx
diff --git a/src/app/writer-dashboard/manage-content/loading.tsx b/src/app/dashboard/writers/manage-content/loading.tsx
similarity index 100%
rename from src/app/writer-dashboard/manage-content/loading.tsx
rename to src/app/dashboard/writers/manage-content/loading.tsx
diff --git a/src/app/writer-dashboard/manage-content/page.tsx b/src/app/dashboard/writers/manage-content/page.tsx
similarity index 100%
rename from src/app/writer-dashboard/manage-content/page.tsx
rename to src/app/dashboard/writers/manage-content/page.tsx
diff --git a/src/app/dashboard/writers/notifications/notification-detail.tsx b/src/app/dashboard/writers/notifications/notification-detail.tsx
new file mode 100644
index 0000000..7cb4454
--- /dev/null
+++ b/src/app/dashboard/writers/notifications/notification-detail.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import {  MoveLeft, Trash2 } from "lucide-react";
+import Image from "next/image";
+import soon from "../../../../../public/coming-soon.png"
+
+
+interface NotificationDetailPageProps {
+  back: () => void;
+}
+
+export function NotificationDetailPage({ back }: NotificationDetailPageProps) {
+  return (
+    <div className="flex flex-col h-full">
+      {/* Content */}
+      <div className="flex-1 p-4 lg:p-6 overflow-auto">
+        <div className="max-w-2xl mx-auto">
+          <div className="bg-white rounded-lg border border-gray-200 p-6 lg:p-8">
+            <div className="flex justify-between items-center">
+              <div
+                onClick={back}
+                className="cursor-pointer border border-[#888888] rounded-[8px] text-[#888888] p-2"
+              >
+                <MoveLeft />
+              </div>
+              <div className="cursor-pointer border border-[#888888] rounded-[8px] text-[#888888] p-2">
+                <Trash2 />
+              </div>
+            </div>
+            <div className="text-center space-y-6">
+              <h1 className="text-2xl font-bold text-gray-900">
+                New Update for Writers
+              </h1>
+              <p className="text-gray-600">
+                Step up your writing with our latest update
+              </p>
+
+             
+                       <div className="md:w-[400px] w-full mx-auto">
+                         <Image
+                           src={soon}
+                           alt="Notification Banner"
+                        //    width={100}
+                        //    height={100}
+                           className="w-full border "
+                         />
+                       </div>
+
+              <div className="space-y-4 text-gray-600">
+                <p>
+                  Compete against players worldwide, climb the global rankings,
+                  and prove your skills. Test your strategy, outmaneuver your
+                  opponents, and claim your place at the top. Glory awaits!
+                </p>
+              </div>
+
+              <div className="pt-6 border-t border-gray-200">
+                <p className="text-sm text-gray-500">Sent; Today 12:18 PM</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/writer-dashboard/notifications/page.tsx b/src/app/dashboard/writers/notifications/page.tsx
similarity index 100%
rename from src/app/writer-dashboard/notifications/page.tsx
rename to src/app/dashboard/writers/notifications/page.tsx
diff --git a/src/app/writer-dashboard/page.tsx b/src/app/dashboard/writers/page.tsx
similarity index 100%
rename from src/app/writer-dashboard/page.tsx
rename to src/app/dashboard/writers/page.tsx
diff --git a/src/app/writer-dashboard/profile/component/ProfileForm.tsx b/src/app/dashboard/writers/profile/component/ProfileForm.tsx
similarity index 100%
rename from src/app/writer-dashboard/profile/component/ProfileForm.tsx
rename to src/app/dashboard/writers/profile/component/ProfileForm.tsx
diff --git a/src/app/writer-dashboard/profile/component/Social.tsx b/src/app/dashboard/writers/profile/component/Social.tsx
similarity index 100%
rename from src/app/writer-dashboard/profile/component/Social.tsx
rename to src/app/dashboard/writers/profile/component/Social.tsx
diff --git a/src/app/writer-dashboard/profile/component/UpdatePasswordForm.tsx b/src/app/dashboard/writers/profile/component/UpdatePasswordForm.tsx
similarity index 100%
rename from src/app/writer-dashboard/profile/component/UpdatePasswordForm.tsx
rename to src/app/dashboard/writers/profile/component/UpdatePasswordForm.tsx
diff --git a/src/app/writer-dashboard/profile/component/genre.tsx b/src/app/dashboard/writers/profile/component/genre.tsx
similarity index 100%
rename from src/app/writer-dashboard/profile/component/genre.tsx
rename to src/app/dashboard/writers/profile/component/genre.tsx
diff --git a/src/app/writer-dashboard/profile/component/profileHeader.tsx b/src/app/dashboard/writers/profile/component/profileHeader.tsx
similarity index 100%
rename from src/app/writer-dashboard/profile/component/profileHeader.tsx
rename to src/app/dashboard/writers/profile/component/profileHeader.tsx
diff --git a/src/app/dashboard/writers/profile/component/profilesidebar.tsx b/src/app/dashboard/writers/profile/component/profilesidebar.tsx
new file mode 100644
index 0000000..256ad4b
--- /dev/null
+++ b/src/app/dashboard/writers/profile/component/profilesidebar.tsx
@@ -0,0 +1,63 @@
+
+
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export function ProfileSidebar() {
+  const pathname = usePathname();
+
+  const navItems = [
+
+    {
+ 
+      label: "Profile Details",
+      href: "/dashboard/writers/profile",
+    },
+    {
+
+      label: "Genre Specialization",
+      href: "/dashboard/writers/profile/genre",
+    },
+    {
+  
+      label: "Password",
+      href: "/dashboard/writers/profile/password",
+    },
+    {
+  
+      label: "Social",
+      href: "/dashboard/writers/profile/social",
+    },
+  ];
+
+  return (
+    <div className="w-80 bg-[#F6F6F6] border-r border-[#F6F6F6] border h-screen">
+      <div className="p-4 flex items-center">
+        <span className="font-[700] ml-3 text-[#3D3D3D] text-[22px]">Profile</span>
+      </div>
+
+      <nav className="p-4">
+        <ul className="space-y-2">
+          {navItems.map((item) => (
+            <li key={item.label}>
+              <Link
+                href={item.href}
+                className={`flex items-center gap-3 p-3 rounded-md ${
+                  pathname === item.href
+                    ? "bg-[#E7E7E7] text-[#5D5D5D]"
+                    : "text-[#5d5d5d] hover:bg-[#f6f6f6]"
+                }`}
+              >
+                <span className={pathname === item.href ? "font-medium" : ""}>
+                  {item.label}
+                </span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </div>
+  );
+}
diff --git a/src/app/writer-dashboard/profile/genre/page.tsx b/src/app/dashboard/writers/profile/genre/page.tsx
similarity index 100%
rename from src/app/writer-dashboard/profile/genre/page.tsx
rename to src/app/dashboard/writers/profile/genre/page.tsx
diff --git a/src/app/writer-dashboard/profile/layout.tsx b/src/app/dashboard/writers/profile/layout.tsx
similarity index 100%
rename from src/app/writer-dashboard/profile/layout.tsx
rename to src/app/dashboard/writers/profile/layout.tsx
diff --git a/src/app/writer-dashboard/profile/page.tsx b/src/app/dashboard/writers/profile/page.tsx
similarity index 100%
rename from src/app/writer-dashboard/profile/page.tsx
rename to src/app/dashboard/writers/profile/page.tsx
diff --git a/src/app/writer-dashboard/profile/password/page.tsx b/src/app/dashboard/writers/profile/password/page.tsx
similarity index 100%
rename from src/app/writer-dashboard/profile/password/page.tsx
rename to src/app/dashboard/writers/profile/password/page.tsx
diff --git a/src/app/writer-dashboard/profile/social/page.tsx b/src/app/dashboard/writers/profile/social/page.tsx
similarity index 100%
rename from src/app/writer-dashboard/profile/social/page.tsx
rename to src/app/dashboard/writers/profile/social/page.tsx
diff --git a/src/app/reader-dashboard/components/book-modal.tsx b/src/app/readers/components/book-modal.tsx
similarity index 99%
rename from src/app/reader-dashboard/components/book-modal.tsx
rename to src/app/readers/components/book-modal.tsx
index ba220ce..5aac84d 100644
--- a/src/app/reader-dashboard/components/book-modal.tsx
+++ b/src/app/readers/components/book-modal.tsx
@@ -3,7 +3,7 @@
 import { ArrowLeft, MoreHorizontal, Star, X } from "lucide-react"
 import Image from "next/image"
 import { useEffect, useState } from "react"
-import { BookReaderModal } from "../components/book-reader-modal"
+import { BookReaderModal } from "./book-reader-modal"
 import imgbook from "../../../../public/Cover.png"
 import imgbook1 from "../../../../public/user1.svg"
 interface BookModalProps {
diff --git a/src/app/readers/components/book-reader-modal.tsx b/src/app/readers/components/book-reader-modal.tsx
new file mode 100644
index 0000000..5798e77
--- /dev/null
+++ b/src/app/readers/components/book-reader-modal.tsx
@@ -0,0 +1,267 @@
+
+
+"use client"
+
+import { ArrowLeft, Plus, Minus, Edit, Bookmark, Highlighter, Maximize, Menu, Sun } from "lucide-react"
+import { useState, useEffect } from "react"
+
+interface BookReaderModalProps {
+  book: {
+    id: string
+    title: string
+    author: string
+    progress?: number
+  }
+  onClose: () => void
+}
+
+export function BookReaderModal({ book, onClose }: BookReaderModalProps) {
+  const [currentPage, setCurrentPage] = useState(1)
+  const [totalPages] = useState(37)
+  const [zoomLevel, setZoomLevel] = useState(100)
+  const [isLightMode, setIsLightMode] = useState(true)
+
+  // Add theme classes based on mode
+  const themeClasses = {
+    background: isLightMode ? "bg-white" : "bg-gray-900",
+    text: isLightMode ? "text-gray-900" : "text-gray-100",
+    textSecondary: isLightMode ? "text-gray-600" : "text-gray-400",
+    border: isLightMode ? "border-gray-200" : "border-gray-700",
+    sidebarBg: isLightMode ? "bg-gray-50" : "bg-gray-800",
+    hover: isLightMode ? "hover:bg-gray-100" : "hover:bg-gray-700",
+    selectedBg: isLightMode ? "bg-blue-100" : "bg-blue-900",
+    selectedText: isLightMode ? "text-blue-700" : "text-blue-300",
+  }
+  const [selectedChapter, setSelectedChapter] = useState("Chapter 1")
+
+  const tableOfContents = [
+    "Cover",
+    "Praise",
+    "Title",
+    "Chapter 1",
+    "How it Started",
+    "Let Go",
+    "Chapter 2",
+    "How it Started",
+    "Where Are We",
+  ]
+
+  // Close modal on escape key
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose()
+      }
+    }
+    document.addEventListener("keydown", handleEscape)
+    return () => document.removeEventListener("keydown", handleEscape)
+  }, [onClose])
+
+  // Prevent body scroll when modal is open
+  useEffect(() => {
+    document.body.style.overflow = "hidden"
+    return () => {
+      document.body.style.overflow = "unset"
+    }
+  }, [])
+
+  const handleZoomIn = () => {
+    setZoomLevel((prev) => Math.min(prev + 10, 200))
+  }
+
+  const handleZoomOut = () => {
+    setZoomLevel((prev) => Math.max(prev - 10, 50))
+  }
+
+  return (
+    <div className={`fixed inset-0 z-50 flex flex-col ${themeClasses.background}`}>
+      {/* Header */}
+      <div
+        className={`flex items-center justify-between px-6 py-4 border-b ${themeClasses.border} ${themeClasses.background}`}
+      >
+        <div className="flex items-center gap-4">
+          <h1 className={`text-lg font-semibold ${themeClasses.text}`}>{book.title}</h1>
+          <button
+            onClick={onClose}
+            className={`flex items-center gap-2 px-3 py-1.5 text-sm ${themeClasses.textSecondary} ${themeClasses.hover} rounded-lg transition-colors`}
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Back
+          </button>
+        </div>
+
+        {/* Reading Controls */}
+        <div className="flex items-center gap-3">
+          <button
+            onClick={handleZoomIn}
+            className={`p-2 ${themeClasses.hover} rounded-lg transition-colors`}
+            title="Zoom In"
+          >
+            <Plus className={`w-4 h-4 ${themeClasses.text}`} />
+          </button>
+          <button
+            onClick={handleZoomOut}
+            className={`p-2 ${themeClasses.hover} rounded-lg transition-colors`}
+            title="Zoom Out"
+          >
+            <Minus className={`w-4 h-4 ${themeClasses.text}`} />
+          </button>
+          <button className={`p-2 ${themeClasses.hover} rounded-lg transition-colors`} title="Edit">
+            <Edit className={`w-4 h-4 ${themeClasses.text}`} />
+          </button>
+          <button className={`p-2 ${themeClasses.hover} rounded-lg transition-colors`} title="Bookmark">
+            <Bookmark className={`w-4 h-4 ${themeClasses.text}`} />
+          </button>
+          <button className={`p-2 ${themeClasses.hover} rounded-lg transition-colors`} title="Highlight">
+            <Highlighter className={`w-4 h-4 ${themeClasses.text}`} />
+          </button>
+          <button className={`p-2 ${themeClasses.hover} rounded-lg transition-colors`} title="Fullscreen">
+            <Maximize className={`w-4 h-4 ${themeClasses.text}`} />
+          </button>
+        </div>
+
+        <div className="flex items-center gap-4">
+          <span className={`text-sm ${themeClasses.textSecondary}`}>
+            Page {currentPage}-{totalPages}
+          </span>
+          <span className="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full font-medium">
+            Progress {book.progress || 5}%
+          </span>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* Sidebar - Table of Contents */}
+        <div className={`w-80 ${themeClasses.sidebarBg} border-r ${themeClasses.border} flex flex-col`}>
+          <div className={`p-4 border-b ${themeClasses.border}`}>
+            <div className="flex items-center gap-2 mb-4">
+              <h2 className={`font-semibold ${themeClasses.text}`}>Table of Content</h2>
+              <Menu className={`w-4 h-4 ${themeClasses.textSecondary}`} />
+            </div>
+          </div>
+
+          <div className="flex-1 overflow-y-auto">
+            <nav className="p-4">
+              <ul className="space-y-2">
+                {tableOfContents.map((item, index) => (
+                  <li key={index}>
+                    <button
+                      onClick={() => setSelectedChapter(item)}
+                      className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
+                        selectedChapter === item
+                          ? `${themeClasses.selectedBg} ${themeClasses.selectedText} font-medium`
+                          : `${themeClasses.textSecondary} ${themeClasses.hover}`
+                      }`}
+                    >
+                      {item}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          </div>
+
+          {/* Light Mode Toggle */}
+          <div className={`p-4 border-t ${themeClasses.border}`}>
+            <button
+              onClick={() => setIsLightMode(!isLightMode)}
+              className={`flex items-center gap-2 text-sm ${themeClasses.textSecondary} hover:${themeClasses.text} transition-colors`}
+            >
+              <Sun className={`w-4 h-4 ${isLightMode ? "text-yellow-500" : "text-gray-400"}`} />
+              {isLightMode ? "Light Mode" : "Dark Mode"}
+            </button>
+          </div>
+        </div>
+
+        {/* Content Area */}
+        <div className={`flex-1 overflow-y-auto ${themeClasses.background}`}>
+          <div className="max-w-4xl mx-auto p-8" style={{ fontSize: `${zoomLevel}%` }}>
+            <div className={`prose max-w-none ${isLightMode ? "prose-gray" : "prose-invert"}`}>
+              <p className={`mb-6 ${themeClasses.text}`}>
+                It was slow compared to later machines but was significant for demonstrating programmability.
+              </p>
+
+              <p className={`mb-2 font-medium italic ${themeClasses.textSecondary}`}>Reference:</p>
+              <p className={`mb-6 text-sm italic ${themeClasses.textSecondary}`}>
+                Bashe, C. J., Johnson, L. R., Palmer, J. H., & Pugh, E. W. (1986). IBM's Early Computers. MIT Press.
+              </p>
+
+              <p className={`mb-4 ${themeClasses.text}`}>
+                <strong>b. ENIAC (Electronic Numerical Integrator and Computer) (1945)</strong>
+              </p>
+              <p className={`mb-4 ${themeClasses.text}`}>
+                Designed by John Presper Eckert and John Mauchly, ENIAC was the first general-purpose, fully electronic
+                digital computer.
+              </p>
+              <p className={`mb-4 ${themeClasses.text}`}>
+                It contained 18,000 vacuum tubes and could perform up to 5,000 operations per second.
+              </p>
+              <p className={`mb-6 ${themeClasses.text}`}>
+                ENIAC was used primarily for military applications, such as calculating artillery trajectories.
+              </p>
+
+              <p className={`mb-2 font-medium italic ${themeClasses.textSecondary}`}>Reference:</p>
+              <p className={`mb-6 text-sm italic ${themeClasses.textSecondary}`}>
+                Goldstine, H. H. (1972). The Computer from Pascal to von Neumann. Princeton University Press.
+              </p>
+
+              <p className={`mb-4 ${themeClasses.text}`}>
+                <strong>c. EDSAC (Electronic Delay Storage Automatic Calculator) (1949)</strong>
+              </p>
+              <p className={`mb-4 ${themeClasses.text}`}>
+                Created by Maurice Wilkes at the University of Cambridge, EDSAC was the first computer to use the
+                stored-program concept.
+              </p>
+              <p className={`mb-4 ${themeClasses.text}`}>
+                It employed mercury delay lines for memory and could execute programs stored in its memory.
+              </p>
+              <p className={`mb-6 ${themeClasses.text}`}>
+                EDSAC was used in scientific research, marking a shift toward practical computation.
+              </p>
+
+              <p className={`mb-2 font-medium italic ${themeClasses.textSecondary}`}>Reference:</p>
+              <p className={`mb-6 text-sm italic ${themeClasses.textSecondary}`}>
+                Wilkes, M. V. (1951). The Preparation of Programs for an Electronic Digital Computer. Addison-Wesley.
+              </p>
+
+              <p className={`mb-4 ${themeClasses.text}`}>
+                <strong>d. UNIVAC (Universal Automatic Computer) (1951)</strong>
+              </p>
+              <p className={`mb-4 ${themeClasses.text}`}>
+                Developed by Eckert and Mauchly, UNIVAC was the first commercially available computer.
+              </p>
+              <p className={`mb-4 ${themeClasses.text}`}>
+                It was designed for business and government use, capable of handling both text and numeric data.
+              </p>
+              <p className={`mb-6 ${themeClasses.text}`}>
+                UNIVAC's success marked the beginning of the commercial computer industry.
+              </p>
+
+              <p className={`mb-2 font-medium italic ${themeClasses.textSecondary}`}>Reference:</p>
+              <p className={`mb-8 text-sm italic ${themeClasses.textSecondary}`}>
+                Campbell-Kelly, M., & Aspray, W. (1996). Computer: A History of the Information Machine. Basic Books.
+              </p>
+
+              <p className={`mb-6 ${themeClasses.text}`}>
+                It was slow compared to later machines but was significant for demonstrating programmability.
+              </p>
+
+              <p className={`mb-2 font-medium italic ${themeClasses.textSecondary}`}>Reference:</p>
+              <p className={`mb-6 text-sm italic ${themeClasses.textSecondary}`}>
+                Bashe, C. J., Johnson, L. R., Palmer, J. H., & Pugh, E. W. (1986). IBM's Early Computers. MIT Press.
+              </p>
+
+              <p className={`mb-4 ${themeClasses.text}`}>
+                <strong>b. ENIAC (Electronic Numerical Integrator and Computer) (1945)</strong>
+              </p>
+              <p className={`mb-4 ${themeClasses.text}`}>
+                Designed by John Presper Eckert and John Mauchly, ENIAC was the first general-purpose...
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/reader-dashboard/components/header-reader.tsx b/src/app/readers/components/header-reader.tsx
similarity index 100%
rename from src/app/reader-dashboard/components/header-reader.tsx
rename to src/app/readers/components/header-reader.tsx
diff --git a/src/app/reader-dashboard/components/reader-side-navbar.tsx b/src/app/readers/components/reader-side-navbar.tsx
similarity index 100%
rename from src/app/reader-dashboard/components/reader-side-navbar.tsx
rename to src/app/readers/components/reader-side-navbar.tsx
diff --git a/src/app/readers/discussions-and-clubs/ClubCard.tsx b/src/app/readers/discussions-and-clubs/ClubCard.tsx
new file mode 100644
index 0000000..ffbe093
--- /dev/null
+++ b/src/app/readers/discussions-and-clubs/ClubCard.tsx
@@ -0,0 +1,99 @@
+import React from "react";
+import { Globe, PlusIcon } from "lucide-react";
+import { ClubDetailsProps } from "@/lib/types";
+
+interface CardProps extends ClubDetailsProps {
+  onOpen: (club: ClubDetailsProps) => void;
+}
+
+export default function ClubCard({
+  id,
+  name,
+  isPublic,
+  memberCount,
+  sessionsInfo,
+  unreadNotifications,
+  authorAvatars,
+  onOpen,
+}: CardProps) {
+  return (
+    <div className="flex cursor-pointer hover:shadow-sm items-center justify-between p-4 bg-white rounded-lg transition-shadow border border-[#E7E7E7] duration-300  w-full">
+      <div
+        className="flex-shrink-0 w-30 h-30 bg-[#D9D9D9] rounded-lg"
+        aria-hidden="true"
+      ></div>
+      <div className="flex flex-col flex-grow ml-4 min-w-0">
+        <div className="flex items-center space-x-2">
+          <h2 className="text-lg font-semibold text-gray-900 truncate">
+            {name}
+          </h2>
+          {unreadNotifications > 0 && (
+            <span
+              className="flex items-center justify-center w-6 h-6 text-xs text-white bg-red-600 rounded-full"
+              aria-label="3 unread notifications"
+            >
+              {unreadNotifications}
+            </span>
+          )}
+        </div>
+        <div className="flex flex-wrap items-center text-sm space-x-3 mt-2 mb-1">
+          <div className="flex text-sm items-center space-x-1 border border-[#D1D1D1] rounded-full px-2 py-0.5">
+            <Globe className="w-4 h-4 text-[#888888] " aria-hidden="true" />
+            <span className="text-[#888888]">
+              {isPublic ? "Public" : "Private"}
+            </span>
+          </div>
+          <div className="flex text-sm items-center space-x-1 border border-[#D1D1D1] rounded-full px-2 py-0.5">
+            <PlusIcon className="text-sm w-3 h-3" />
+            <span className="text-[#888888]">{memberCount}</span>
+          </div>
+
+          <div className="flex text-sm items-center space-x-1 border border-[#D1D1D1] rounded-full px-2 py-0.5">
+            <span className="text-[#888888]">{sessionsInfo}</span>
+          </div>
+        </div>
+
+        <div className="flex items-center space-x-2 mt-2 ">
+          <div className="flex -space-x-2">
+            {authorAvatars &&
+              authorAvatars.length > 0 &&
+              authorAvatars.map((author) => (
+                <img
+                  src={
+                    author ?? "https://randomuser.me/api/portraits/men/32.jpg"
+                  }
+                  alt="Author 1"
+                  className="w-6 h-6 rounded-full border-2 border-white"
+                />
+              ))}
+          </div>
+
+          {authorAvatars && authorAvatars.length > 0 && (
+            <span className="truncate text-[#5D5D5D] ">
+              {authorAvatars.length} Authors you follow are members
+            </span>
+          )}
+        </div>
+      </div>
+      <button
+        onClick={() => {
+          onOpen({
+            id: id,
+            name,
+            isPublic,
+            memberCount,
+            sessionsInfo,
+            unreadNotifications,
+            authorAvatars,
+          });
+        }}
+        type="button"
+        className="text-[#0F265C] py-2 px-8     transition-colors duration-300 ease-in-out
+ rounded-[10px] bg-[linear-gradient(to_bottom,_#EDF7FF_100%,_#096CFF_30%)]
+ hover:bg-gray-200  "
+      >
+        Open
+      </button>
+    </div>
+  );
+}
diff --git a/src/app/readers/discussions-and-clubs/[id]/page.tsx b/src/app/readers/discussions-and-clubs/[id]/page.tsx
new file mode 100644
index 0000000..4747871
--- /dev/null
+++ b/src/app/readers/discussions-and-clubs/[id]/page.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import { Header } from "@/components/dashboard/header";
+import { Camera, Mic } from "lucide-react";
+
+export default function LiveEventPage() {
+  return (
+    <div>
+      <Header title="Native Fantasy" />
+
+      <div className="flex flex-col items-start md:flex-row gap-x-10 p-4 md:max-w-[85rem] pt-20 px-10 ">
+        <div className="">
+          <div className="bg-white rounded-xl shadow overflow-hidden">
+            <div className="relative w-full h-[300px] md:h-[500px]">
+              <img
+                src="/live-event.png"
+                alt="Live Session"
+                className="object-cover w-full h-full"
+              />
+              <div className="flex">
+                <div
+                  className="  justify-end bg-[#F6F6F6] rounded-full py-1 px-1 absolute  top-2 right-2
+ flex items-center gap-1"
+                >
+                  <span className="bg-red-500 text-white text-xs font-medium px-2 py-1 rounded-full">
+                    🔴 Live
+                  </span>
+                  <span className="bg-white/80 text-gray-800 text-xs px-2 py-1 rounded-full">
+                    93
+                  </span>
+                </div>
+              </div>
+              <div className="absolute bottom-2 left-2 flex items-center gap-2 bg-white/70 px-3 py-1 rounded-full text-sm">
+                <div className="absolute bottom-3 left-3 bg-gray-100 rounded-full px-2 py-1 flex gap-2 shadow-md">
+                  <button className="w-10 h-10 flex items-center justify-center bg-white rounded-full border border-gray-300 shadow">
+                    <Camera className="w-5 h-5 text-blue-600" />
+                  </button>
+                  <button className="w-10 h-10 flex items-center justify-center bg-white rounded-full border border-gray-300 shadow">
+                    <Mic className="w-5 h-5 text-blue-600" />
+                  </button>
+                </div>
+              </div>
+              <button className="absolute bottom-2 right-2 px-4 py-1 bg-red-600/40 text-white text-sm rounded-full">
+                End Event
+              </button>
+            </div>
+
+            <div className="p-6">
+              <h2 className="text-xl font-semibold text-gray-900">
+                Native Invisibility
+              </h2>
+              <p className=" text-[#888888] mt-1">
+                By Darrin Collins <span className="text-blue-500">✔</span>
+              </p>
+              <p className=" text-[#888888] mt-4">
+                Vibrant book club dedicated to exploring the vast and magical
+                realms of fantasy literature. From epic sagas and dark fantasy
+                to urban magic and whimsical tales, we delve into all corners of
+                the genre.
+              </p>
+
+              <div className="mt-6 space-y-4">
+                <div className="flex items-center gap-4">
+                  <div className="w-10 h-10 bg-gray-200 rounded-full"></div>
+                  <div>
+                    <span className="text-xs text-gray-500">Host</span>
+                    <p className="text-sm font-medium text-gray-900">
+                      Aisha Musa
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-4">
+                  <div className="w-10 h-10 bg-gray-200 rounded-full"></div>
+                  <div>
+                    <span className="text-xs text-gray-500">Guest</span>
+                    <p className="text-sm font-medium text-gray-900">
+                      Hana Yamal
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-white rounded-xl shadow p-4 w-full  mt-6">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-md font-semibold text-gray-900">Viewers</h3>
+              <span className="text-sm bg-gray-100 px-3 py-1 rounded-full text-gray-600">
+                92 Watching
+              </span>
+            </div>
+            <ul className="divide-y divide-[#F6F6F6]">
+              {Array.from({ length: 4 }).map((_, i) => (
+                <li key={i} className="flex items-center gap-4 py-4">
+                  <div className="w-10 h-10 bg-gray-200 rounded-full" />
+                  <p className="text-sm text-gray-800">Darrin Collins</p>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl shadow p-4 w-full max-w-md">
+          <h3 className="text-md font-semibold mb-2 text-gray-800">
+            Live Chat
+          </h3>
+          <hr className="mb-4" />
+          <div className="space-y-10">
+            <div className="bg-gray-100 p-3 rounded-lg">
+              <div className="flex items-center space-x-2 mb-1">
+                <img
+                  src="https://randomuser.me/api/portraits/men/10.jpg"
+                  alt="Young John"
+                  className="w-6 h-6 rounded-full"
+                />
+                <span className="text-sm font-medium text-gray-800">
+                  Young John
+                </span>
+              </div>
+              <p className="text-sm text-gray-700">
+                I disagree with Peace. I believe Umar deserved a second chance
+                after what he did
+              </p>
+            </div>
+
+            <div className="bg-gray-100 p-3 rounded-lg w-fit">
+              <div className="flex items-center space-x-2 mb-1 ">
+                <img
+                  src="https://randomuser.me/api/portraits/men/11.jpg"
+                  alt="Ahmed Aliyu"
+                  className="w-6 h-6 rounded-full"
+                />
+                <span className="text-sm font-medium text-gray-800">
+                  Ahmed Aliyu
+                </span>
+              </div>
+              <p className="text-sm text-gray-700">Why do you feel that way?</p>
+            </div>
+
+            <div className="bg-blue-50 p-3 rounded-lg self-end ">
+              <div className="text-right text-sm font-medium text-gray-700 mb-1">
+                You
+              </div>
+              <p className="text-sm text-gray-800 text-right">
+                You're saying you don't agree with 'Peace' on this one
+              </p>
+            </div>
+
+            <div className="bg-gray-100 p-3 rounded-lg">
+              <div className="flex items-center space-x-2 mb-1">
+                <img
+                  src="https://randomuser.me/api/portraits/men/12.jpg"
+                  alt="Tony Tony"
+                  className="w-6 h-6 rounded-full"
+                />
+                <span className="text-sm font-medium text-gray-800">
+                  Tony Tony
+                </span>
+              </div>
+              <p className="text-sm text-gray-700">
+                What makes you think he deserved that second chance?
+              </p>
+            </div>
+          </div>
+
+          <form className="relative mt-6 max-w-md">
+            <input
+              type="text"
+              placeholder="Type here"
+              className="w-full pl-4 pr-12 py-3 rounded-md bg-gray-100 border text-[#B0B0B0] border-gray-200 text-sm focus:outline-none"
+            />
+            <button
+              type="submit"
+              className="absolute top-1/2 right-2 transform -translate-y-1/2 w-9 h-9 flex items-center justify-center bg-blue-600 text-white rounded-full hover:bg-blue-700"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-4 w-4"
+                fill="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
+              </svg>
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/readers/discussions-and-clubs/components/AddGuest.tsx b/src/app/readers/discussions-and-clubs/components/AddGuest.tsx
new file mode 100644
index 0000000..f217f5d
--- /dev/null
+++ b/src/app/readers/discussions-and-clubs/components/AddGuest.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import React from "react";
+import Modal from "./Modal";
+import { Input } from "@/components/ui/input";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  addGuest: () => void;
+};
+
+export default function AddGuestModal({ isOpen, onClose, addGuest }: Props) {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} className="max-w-md">
+      <div className="space-y-5 px-5 py-1">
+        <p className="text-xl text-[#454545] text-center font-semibold">
+          Guest Email Address
+        </p>
+        <div className="space-y-2">
+          <p className="text-[#5D5D5D]">Guest Email Address</p>
+          <Input
+            className="h-[46px] text-[#B0B0B0]"
+            placeholder="Enter guest email address"
+          />
+        </div>
+        <div className="bg-blue-50 rounded-xl p-4 flex items-center space-x-4 w-fit">
+          <img
+            src="/authorImg2.png"
+            alt="Joseph Yanum"
+            className="w-12 h-12 rounded-full object-cover"
+          />
+          <div>
+            <p className="text-lg font-semibold">Joseph Yanum</p>
+            <p className="text-sm text-[#888888]">josephyanum75@gmail.com</p>
+          </div>
+        </div>
+        <button
+          onClick={() => {
+            onClose();
+            addGuest();
+          }}
+          className="mb-5 w-full py-3 text-white rounded-md bg-gradient-to-b from-[#2A62F3] to-[#0029B3] hover:opacity-90 transition"
+        >
+          Add
+        </button>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/app/readers/discussions-and-clubs/components/ClubDetails.tsx b/src/app/readers/discussions-and-clubs/components/ClubDetails.tsx
new file mode 100644
index 0000000..5343791
--- /dev/null
+++ b/src/app/readers/discussions-and-clubs/components/ClubDetails.tsx
@@ -0,0 +1,129 @@
+import { ClubDetailsProps } from "@/lib/types";
+import { Globe, PlusIcon } from "lucide-react";
+import Modal from "./Modal";
+
+type ClubModalProps = {
+  club: ClubDetailsProps | null;
+  isOpen: boolean;
+  onClose: () => void;
+  onJoin: () => void;
+};
+
+export default function ClubModal({
+  club,
+  isOpen,
+  onClose,
+  onJoin,
+}: ClubModalProps) {
+  if (!club) return null;
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <section className="p-6 space-y-6">
+        <div className="flex flex-col justify-center items-center space-x-3">
+          <div className="w-30 h-30 bg-gray-200 rounded-md" />
+
+          <h2 className="text-xl font-semibold text-[#0F265C] truncate mt-2">
+            {club.name}
+          </h2>
+
+          <div className="flex flex-col space-y-1">
+            <div className="flex flex-wrap items-center text-sm space-x-3 mt-2 mb-1">
+              <Badge text={club.isPublic ? "Public" : "Private"} icon="globe" />
+              <Badge text={String(club.memberCount)} icon="plus" />
+              <Badge text={club.sessionsInfo} />
+            </div>
+
+            <div className="flex items-center space-x-2 mt-2">
+              <div className="flex items-center space-x-2 text-sm text-gray-600">
+                <AvatarGroup urls={club.authorAvatars} />
+              </div>
+              {club.authorAvatars?.length > 0 && (
+                <span className="truncate text-[#5D5D5D] text-sm">
+                  {club.authorAvatars.length} Authors you follow are members
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <SectionTitle title="About Club" />
+          <p className="text-[#3D3D3D] ">
+            Vibrant book club dedicated to exploring the vast and magical realms
+            of fantasy literature. From epic sagas and dark fantasy to urban
+            magic and whimsical tales, we delve into all corners of the genre.
+          </p>
+        </div>
+
+        <div>
+          <SectionTitle title="Genre Focus" />
+          <div className="flex flex-wrap gap-2">
+            <Tag text="Fiction" />
+            <Tag text="Drama" />
+          </div>
+        </div>
+      </section>
+
+      <footer className="flex justify-between gap-3 p-4 bg-gray-50">
+        <button
+          onClick={onClose}
+          className="text-[#0F265C] py-4 px-8 w-full rounded-[10px] bg-[linear-gradient(to_bottom,_#EDF7FF_100%,_#096CFF_30%)] hover:bg-gray-200 transition"
+        >
+          Cancel
+        </button>
+        <button
+          onClick={onJoin}
+          className="px-6 py-4 w-full rounded-md bg-blue-600 text-white hover:bg-blue-700 transition"
+        >
+          Join Club
+        </button>
+      </footer>
+    </Modal>
+  );
+}
+
+function Badge({ text, icon }: { text: string; icon?: "globe" | "plus" }) {
+  const icons = {
+    globe: <Globe className="w-4 h-4 text-[#888888]" />,
+    plus: <PlusIcon className="w-4 h-4 text-[#888888]" />,
+  };
+
+  return (
+    <div className="flex text-xs items-center space-x-1  border border-[#D1D1D1] rounded-full px-2 py-1">
+      {icon && icons[icon]}
+      <span className="text-[#888888]">{text}</span>
+    </div>
+  );
+}
+
+function SectionTitle({ title }: { title: string }) {
+  return (
+    <div className="rounded-full bg-[#F6F6F6] w-fit text-center px-2 py-2 mb-2">
+      <p className="text-sm">{title}</p>
+    </div>
+  );
+}
+
+function Tag({ text }: { text: string }) {
+  return (
+    <span className="text-xs border border-[#E7E7E7] rounded-full px-3 py-1">
+      {text}
+    </span>
+  );
+}
+
+function AvatarGroup({ urls }: { urls: string[] }) {
+  return (
+    <div className="flex -space-x-2">
+      {urls.map((url, i) => (
+        <img
+          key={i}
+          src={url}
+          alt={`Author ${i + 1}`}
+          className="w-6 h-6 rounded-full border-2 border-white"
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/src/app/readers/discussions-and-clubs/components/ClubDiscussion.tsx b/src/app/readers/discussions-and-clubs/components/ClubDiscussion.tsx
new file mode 100644
index 0000000..5335a45
--- /dev/null
+++ b/src/app/readers/discussions-and-clubs/components/ClubDiscussion.tsx
@@ -0,0 +1,209 @@
+import { useState } from "react";
+
+interface ClubDiscussionProps {
+  startEvent: () => void;
+}
+
+export default function ClubDiscussion({ startEvent }: ClubDiscussionProps) {
+  const [activeTab, setActiveTab] = useState("discussion");
+
+  const tabs = [
+    { id: "discussion", label: "Discussion" },
+    { id: "live", label: "Live", badge: 1 },
+    { id: "about", label: "About" },
+    { id: "members", label: "Members" },
+  ];
+
+  const eventTabs = [
+    {
+      id: "discussion",
+      label: "Discussion",
+      badge: 2,
+      event: {
+        title: "Native Invisibility",
+        author: "Darrin Collins",
+        verified: true,
+        description:
+          "Delves into the complex and often insidious ways in which indigenous peoples and their unique experiences are rendered unseen and unheard in the modern era.",
+        live: false,
+        timeAgo: "2 weeks ago",
+        image: "/images/bookCover1.png",
+      },
+    },
+    {
+      id: "live",
+      label: "Live",
+      badge: null,
+      event: {
+        title: "Native Invisibility",
+        author: "Darrin Collins",
+        verified: true,
+        description:
+          "Delves into the complex and often insidious ways in which indigenous peoples and their unique experiences are rendered unseen and unheard in the modern era.",
+        live: true,
+        timeAgo: "Live now",
+        image: "/images/bookCover1.png",
+      },
+    },
+
+    {
+      id: "discussion",
+      label: "Discussion",
+      badge: null,
+      event: {
+        title: "Native Invisibility",
+        author: "Darrin Collins",
+        verified: true,
+        description:
+          "Delves into the complex and often insidious ways in which indigenous peoples and their unique experiences are rendered unseen and unheard in the modern era.",
+        live: true,
+        timeAgo: "Live now",
+        image: "/images/bookCover1.png",
+      },
+    },
+  ];
+
+  return (
+    <div className=" mx-auto p-6 rounded-xl shadow-sm">
+      <div className="flex gap-6 mb-6 bg-white px-10 py-5">
+        <div className="w-50 h-50 bg-gray-300 rounded-md flex-shrink-0"></div>
+        <div className="flex flex-col justify-center flex-grow">
+          <h1 className="text-[28px] font-semibold text-gray-900 mb-1">
+            Fantasy Enthusiasts
+          </h1>
+          <p className="text-sm text-[#888888]">
+            Vibrant book club dedicated to exploring the vast and magical realms
+            of fantasy literature. From epic sagas and dark fantasy to urban
+            magic and whimsical tales, we delve into all corners of the genre.
+          </p>
+          <div className="mt-3 flex flex-wrap items-center gap-2">
+            <Badge icon="🌐" label="Public" />
+            <Badge icon="👥" label="1.5k+ Members" />
+            <Badge icon="📅" label="2+ Session a Month" />
+          </div>
+          <div className="mt-2 flex items-center gap-2 text-sm text-gray-600">
+            <img
+              src="https://randomuser.me/api/portraits/women/44.jpg"
+              alt="Author 1"
+              className="w-6 h-6 rounded-full border border-white shadow-sm"
+            />
+            <img
+              src="https://randomuser.me/api/portraits/men/34.jpg"
+              alt="Author 2"
+              className="w-6 h-6 rounded-full border border-white shadow-sm -ml-2"
+            />
+            <span className="text-[#888888]">
+              2 Authors you follow are members
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-white py-5 px-5 rounded-xl">
+        <div className="flex items-center justify-between mb-6">
+          <nav className="flex space-x-8" aria-label="Tabs">
+            {tabs.map(({ id, label, badge }) => (
+              <button
+                key={id}
+                onClick={() => setActiveTab(id)}
+                className={`relative py-2 px-3 text-[#5D5D5D] text-sm font-medium rounded-md focus:outline-none ${
+                  activeTab === id ? "] text-[#5D5D5D] bg-[#F6F6F6]" : ""
+                }`}
+                aria-current={activeTab === id ? "page" : undefined}
+              >
+                {label}
+                {badge && (
+                  <span className="ml-1 inline-flex items-center justify-center px-2 py-0.5 rounded-full text-xs font-semibold bg-red-600 text-white">
+                    {badge}
+                  </span>
+                )}
+              </button>
+            ))}
+          </nav>
+          <button
+            type="button"
+            onClick={startEvent}
+            className="inline-flex items-center px-4 py-2 text-sm font-semibold rounded-full bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 transition"
+          >
+            Start Event
+          </button>
+        </div>
+        <div>
+       
+          {eventTabs.map(({ id, event }) =>
+            activeTab === id ? (
+              <EventCard
+                key={id}
+                author={event.author}
+                title={event.title}
+                description={event.description}
+                image={event.image}
+              />
+            ) : <div></div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Badge({ icon, label }: { icon: string; label: string }) {
+  return (
+    <span className="inline-flex items-center rounded-full border border-gray-300 px-2 py-2 text-xs text-[#888888] select-none">
+      <span className="mr-1">{icon}</span> {label}
+    </span>
+  );
+}
+
+function EventCard({
+  title,
+  author,
+  verified,
+  description,
+  live,
+  timeAgo,
+  image,
+}: {
+  title: string;
+  author: string;
+  verified?: boolean;
+  description: string;
+  live?: boolean;
+  timeAgo?: string;
+  image: string;
+}) {
+  return (
+    <div className="flex gap-4 p-4 px-6 rounded-lg border border-gray-200 shadow-sm mb-4 bg-white">
+      <img
+        src={image}
+        alt={title}
+        className="w-40 h-40 rounded-md object-cover flex-shrink-0"
+      />
+      <div className="flex flex-col justify-between flex-grow">
+        <div>
+          <div className="flex flex-col items-start gap-2">
+              <span className="text-xs font-semibold  bg-[#FF5C5C] text-white rounded-full px-2 py-0.5 select-none">
+                Live
+              </span>
+            <h2 className="text-lg font-semibold text-gray-900">{title}</h2>
+          </div>
+          <p className="text-sm text-[#5D5D5D] mb-2">
+            By {author}{" "}
+              <svg
+                className="inline-block w-4 h-4 text-blue-600"
+                fill="currentColor"
+                viewBox="0 0 24 24"
+                aria-label="Verified"
+              >
+                <path d="M22.25 12l-2.197 4.317.353 4.474-4.42-1.616L12 22.5l-4.015-3.325-4.42 1.616.353-4.474L1.75 12l2.197-4.317-.353-4.474 4.42 1.616L12 1.5l4.015 3.325 4.42-1.616-.353 4.474L22.25 12zM10.5 16.5l7.5-7.5-1.5-1.5-6 6-2.25-2.25-1.5 1.5 3.75 3.75z" />
+              </svg>
+            
+          </p>
+          <p className="mt-1 text-xs text-[#888888]">Book Description</p>
+          <p className=" text-[#888888] mt-1">{description}</p>
+        </div>
+        {timeAgo && <p className="text-xs text-gray-400 mt-4">{timeAgo}</p>}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/readers/discussions-and-clubs/components/ClubToolBar.tsx b/src/app/readers/discussions-and-clubs/components/ClubToolBar.tsx
new file mode 100644
index 0000000..1c5f1ca
--- /dev/null
+++ b/src/app/readers/discussions-and-clubs/components/ClubToolBar.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import { Search, ChevronDown, PlusIcon } from "lucide-react";
+
+export default function ClubsToolbar() {
+  return (
+    <div className="w-full p-4 grid grid-cols-2 gap-4 sm:flex sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex items-center gap-x-8">
+        <div
+          className="  text-sm  col-span-2 sm:col-auto"
+
+          >
+          <p className="text-[#454545]"> Clubs You've Joined (2)</p>
+        </div>
+
+        <div>
+          <p className="text-[#454545]">Discover</p>
+        </div>
+
+        <button
+          type="button"
+          className="border border-gray-300 text-[#888888] flex items-center gap-x-1 rounded-lg px-3 py-3 text-sm font-medium  whitespace-nowrap hover:bg-gray-100 transition"
+        >
+          <span>
+            <PlusIcon className="w-5 h-5" />
+          </span>{" "}
+          Create a Club
+        </button>
+      </div>
+
+      <div className="flex items-center sm:w-4/12 gap-x-4 ">
+        <div className="relative w-full col-span-2 sm:col-auto">
+          <Search
+            className="absolute left-3 top-1/2 -translate-y-1/2 text-[#B0B0B0]"
+            size={16}
+          />
+          <input
+            type="search"
+            placeholder="Search for a Club"
+            className="w-full rounded-lg placeholder:text-[#B0B0B0]  border border-gray-300 pl-9 pr-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          />
+        </div>
+
+        <button
+          type="button"
+          className="flex items-center gap-1 border bg-[#F6F6F6] border-gray-300 rounded-full px-4 py-3 text-sm font-medium text-gray-700 whitespace-nowrap hover:bg-gray-100 transition col-span-2 sm:col-auto justify-center sm:justify-start"
+        >
+          Club Type
+          <ChevronDown size={16} />
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/readers/discussions-and-clubs/components/CreateEvent.tsx b/src/app/readers/discussions-and-clubs/components/CreateEvent.tsx
new file mode 100644
index 0000000..7f0faf3
--- /dev/null
+++ b/src/app/readers/discussions-and-clubs/components/CreateEvent.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import React from "react";
+import Modal from "./Modal";
+import { Input } from "@/components/ui/input";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: () => void;
+};
+
+export default function CreateClubModal({ isOpen, onClose, onSubmit }: Props) {
+  const [name, setName] = React.useState("");
+  const [description, setDescription] = React.useState("");
+  const [genres, setGenres] = React.useState(["Fiction", "Drama"]);
+  const [clubType, setClubType] = React.useState("");
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <div className="px-6 pb-6">
+        <h2 className="text-2xl font-bold text-gray-900 mb-1">
+          Create a new Club
+        </h2>
+        <p className="text-sm text-muted-foreground mb-6">
+          Launch your book club! Gather readers, share favorites, and spark
+          discussions
+        </p>
+
+        <div className="space-y-4">
+          <div>
+            <p className="text-sm  text-[#5D5D5D]">Club Name</p>
+            <Input
+              id="name"
+              placeholder="Enter name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="mt-1 border border-gray-100 w-full h-[46px]  border-b-0 px-3"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="genre" className="text-sm text-[#5D5D5D]">
+              Genre Focus
+            </label>
+
+            <div className="mt-1 block w-full border rounded-md px-3 h-[46px] py-2 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+              <select
+                id="type"
+                value={clubType}
+                className="w-full border-none focus:outline-none focus:ring-0 focus:border-none"
+                // onChange={(e) => setGenres(e.target.value)}
+              >
+                <option value="">Select Type</option>
+                <option value="public">Fiction</option>
+                <option value="private">Drama</option>
+              </select>
+            </div>
+             <div className="flex flex-wrap gap-2 mt-4">
+                {genres.map((genre) => (
+                  <span
+                    key={genre}
+                    className="bg-[#EDF4FF] text-[#2A62F3] text-xs px-3 py-1 rounded-full"
+                  >
+                    {genre} <span className="ml-1 cursor-pointer">×</span>
+                  </span>
+                ))}
+              </div>
+          </div>
+
+          <div>
+            <label htmlFor="description" className="text-sm text-[#5D5D5D]">
+              Description
+            </label>
+            <textarea
+              id="description"
+              placeholder="Describe your club"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              className="mt-1 w-full border rounded-md px-3 py-2 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              rows={3}
+            />
+          </div>
+
+          <div>
+            <label htmlFor="type" className="text-sm  text-[#5D5D5D]">
+              Club Type
+            </label>
+            <div className="mt-1 block w-full border rounded-md px-3 h-[46px] py-2 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+              <select
+                id="type"
+                value={clubType}
+                className="w-full border-none focus:outline-none focus:ring-0 focus:border-none"
+                onChange={(e) => setClubType(e.target.value)}
+              >
+                <option value="">Select Type</option>
+                <option value="public">Public</option>
+                <option value="private">Private</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <button
+          onClick={() => {
+            onClose();
+            onSubmit();
+          }}
+          className="mt-6 w-full py-3 text-white rounded-md bg-gradient-to-b from-[#2A62F3] to-[#0029B3] hover:opacity-90 transition"
+        >
+          Create Club
+        </button>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/app/readers/discussions-and-clubs/components/Modal.tsx b/src/app/readers/discussions-and-clubs/components/Modal.tsx
new file mode 100644
index 0000000..3a297ae
--- /dev/null
+++ b/src/app/readers/discussions-and-clubs/components/Modal.tsx
@@ -0,0 +1,61 @@
+import React from "react";
+import { cn } from "@/lib/utils"; 
+type ModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  className?: string;
+  hideClose?: boolean;
+};
+
+export default function Modal({
+  isOpen,
+  onClose,
+  children,
+  className,
+  hideClose = false,
+}: ModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/40 bg-opacity-10 flex items-center justify-center z-50 p-4"
+      role="dialog"
+      aria-modal="true"
+    >
+      <div
+        className={cn(
+          "bg-white rounded-xl max-w-xl w-full shadow-lg overflow-hidden",
+          className
+        )}
+      >
+        {!hideClose && (
+          <header className="flex justify-end items-center p-4">
+            <button
+              onClick={onClose}
+              aria-label="Close modal"
+              className="text-[#B0B0B0] flex items-center justify-center w-8 h-8 bg-[#F6F6F6] hover:text-gray-700 transition"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-6 w-6"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          </header>
+        )}
+
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/readers/discussions-and-clubs/components/ScheduleEvent.tsx b/src/app/readers/discussions-and-clubs/components/ScheduleEvent.tsx
new file mode 100644
index 0000000..3068549
--- /dev/null
+++ b/src/app/readers/discussions-and-clubs/components/ScheduleEvent.tsx
@@ -0,0 +1,169 @@
+"use client";
+
+import React, { useState } from "react";
+import Modal from "./Modal";
+import { Input } from "@/components/ui/input";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import { Calendar, Timer, TimerIcon } from "lucide-react";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: () => void;
+};
+
+export default function ScheduleEvent({ isOpen, onClose, onSubmit }: Props) {
+  const [name, setName] = React.useState("");
+  const [description, setDescription] = React.useState("");
+  const [genres, setGenres] = React.useState(["Fiction", "Drama"]);
+  const [startDate, setStartDate] = useState(new Date());
+  const [startTime, setStartTime] = useState(new Date());
+  const [endTime, setEndTime] = useState(new Date());
+
+  const [focusBook, setFocusBook] = React.useState("");
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} className="max-w-2xl">
+      <div className="px-6 pb-6">
+        <h2 className="text-2xl font-bold text-gray-900 mb-1">
+          Schedule Event
+        </h2>
+
+        <div className="space-y-4 mt-4">
+          <div>
+            <p className="text-sm  text-[#5D5D5D]">Event Name</p>
+            <Input
+              id="name"
+              placeholder="Enter name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="mt-1 border border-gray-100 w-full h-[46px] placeholder:text-[#B0B0B0]  border-b-0 px-3"
+            />
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm  text-gray-700 mb-1">Date</label>
+              <div className="flex cursor-pointer items-center gap-x-4 border border-gray-300 rounded-md px-3 py-2">
+                <Calendar className="text-[#888888] w-5 h-5" />
+                <DatePicker
+                  selected={startDate}
+                  onChange={(date) => setStartDate(date as Date)}
+                  dateFormat="dd MMMM, yyyy"
+                  className="w-full cursor-pointer outline-none bg-transparent text-[#B0B0B0] text-sm"
+                />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-x-2">
+              <div>
+                <label className="block text-sm  text-gray-700 mb-1">
+                  Start
+                </label>
+                <div className=" flex items-center border border-gray-300 gap-x-2 rounded-md px-3 py-2">
+                  <Timer className="text-[#888888] w-5 h-5" />
+                  <DatePicker
+                    selected={startTime}
+                    onChange={(time) => setStartTime(time as Date)}
+                    showTimeSelect
+                    showTimeSelectOnly
+                    timeIntervals={15}
+                    timeCaption="Time"
+                    dateFormat="h:mm aa"
+                    className="w-full outline-none bg-transparent text-[#B0B0B0] text-sm"
+                  />
+                </div>
+              </div>
+              <div>
+                <label className="block text-sm  text-gray-700 mb-1">End</label>
+                <div className="flex  items-center border border-gray-300 rounded-md px-2 gap-x-2 py-2">
+                  <Timer className="text-[#888888] w-5 h-5" />
+
+                  <DatePicker
+                    selected={endTime}
+                    onChange={(time) => setEndTime(time as Date)}
+                    showTimeSelect
+                    showTimeSelectOnly
+                    timeIntervals={15}
+                    timeCaption="Time"
+                    dateFormat="h:mm aa"
+                    className="w-full outline-none bg-transparent text-[#B0B0B0] text-sm"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <label htmlFor="genre" className="text-sm text-[#5D5D5D]">
+              Genre Focus
+            </label>
+
+            <div className="mt-1 block w-full border rounded-md px-3 h-[46px] py-2 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+              <select
+                id="type"
+                className="w-full border-none focus:outline-none focus:ring-0 focus:border-none"
+              >
+                <option value="">Select Type</option>
+                <option value="public">Fiction</option>
+                <option value="private">Drama</option>
+              </select>
+            </div>
+            <div className="flex flex-wrap gap-2 mt-4">
+              {genres.map((genre) => (
+                <span
+                  key={genre}
+                  className="bg-[#EDF4FF] text-[#2A62F3] text-xs px-3 py-1 rounded-full"
+                >
+                  {genre} <span className="ml-1 cursor-pointer">×</span>
+                </span>
+              ))}
+            </div>
+          </div>
+
+          <div>
+            <label htmlFor="type" className="text-sm  text-[#5D5D5D]">
+              Focus Book
+            </label>
+            <div className="mt-1 block w-full border rounded-md px-3 h-[46px] py-2 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+              <select
+                id="type"
+                value={focusBook}
+                className="w-full border-none focus:outline-none focus:ring-0 focus:border-none"
+                onChange={(e) => setFocusBook(e.target.value)}
+              >
+                <option value="">Select Type</option>
+                <option value="public">Public</option>
+                <option value="private">Private</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-2">
+          <label htmlFor="description" className="text-sm text-[#5D5D5D]">
+            Description
+          </label>
+          <textarea
+            id="description"
+            placeholder="Describe your club"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            className="mt-1 w-full border rounded-md px-3 py-2 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            rows={3}
+          />
+        </div>
+
+        <button
+          onClick={() => {
+            onClose();
+            onSubmit();
+          }}
+          className="mt-6 w-full py-3 text-white rounded-md bg-gradient-to-b from-[#2A62F3] to-[#0029B3] hover:opacity-90 transition"
+        >
+          Schedule Event
+        </button>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/app/readers/discussions-and-clubs/components/StartEvent.tsx b/src/app/readers/discussions-and-clubs/components/StartEvent.tsx
new file mode 100644
index 0000000..7e5a6cf
--- /dev/null
+++ b/src/app/readers/discussions-and-clubs/components/StartEvent.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import React from "react";
+import Modal from "./Modal";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  startEvent: () => void;
+  instantEvent: () => void;
+};
+
+export default function StartEventModal({
+  isOpen,
+  onClose,
+  startEvent,
+  instantEvent,
+}: Props) {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} className="max-w-md" >
+      <div className="space-y-4 px-10 py-4">
+        <button
+          onClick={() => {
+            onClose();
+            startEvent();
+          }}
+          className=" w-full py-3  rounded-[16px]  bg-[#E7E7E7] hover:opacity-90 transition"
+        >
+          Create Club
+        </button>
+
+        <button
+          onClick={() => {
+            onClose();
+            instantEvent();
+          }}
+          className=" w-full py-3  rounded-[16px]  bg-[#E7E7E7] hover:opacity-90 transition"
+        >
+          Schedule
+        </button>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/app/readers/discussions-and-clubs/components/SuccessModal.tsx b/src/app/readers/discussions-and-clubs/components/SuccessModal.tsx
new file mode 100644
index 0000000..3ebe40b
--- /dev/null
+++ b/src/app/readers/discussions-and-clubs/components/SuccessModal.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import React from "react";
+import Modal from "./Modal";
+import { Button } from "@/components/ui/button";
+import { CheckIcon } from "lucide-react";
+import Link from "next/link";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: () => void;
+};
+
+export default function EventScheduleModal({
+  isOpen,
+  onClose,
+  onSubmit,
+}: Props) {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} hideClose className="max-w-md">
+      <div className="py-10">
+        <div className="flex flex-col items-center space-y-4">
+          <div className="w-30 h-30 flex items-center justify-center rounded-full bg-[#D6ECFF]">
+            <div className="w-20 h-20 flex items-center justify-center rounded-full bg-[#096CFF]">
+              <CheckIcon className="text-white w-10 h-10" />
+            </div>
+          </div>
+          <h2 className="text-lg font-semibold">
+            Event Successfully Scheduled
+          </h2>
+          <div className="bg-gray-100 w-fit rounded-full px-4 py-2 flex items-center justify-between  max-w-xs">
+            <span className="truncate text-sm text-gray-700">
+              ChLbevent1200Sh...
+            </span>
+            <button
+              onClick={() => navigator.clipboard.writeText("ChLbevent1200Sh")}
+              className="ml-3 text-sm font-medium text-blue-600 hover:underline"
+            >
+              Copy
+            </button>
+          </div>
+          <Link
+            href="/waiting-room"
+            className="w-full max-w-xs h-11 flex items-center justify-center rounded-full bg-gradient-to-r from-blue-500 to-blue-600 text-white font-semibold hover:from-blue-600 hover:to-blue-700"
+          >
+            <p>Start</p>
+          </Link>
+        </div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/app/readers/discussions-and-clubs/page.tsx b/src/app/readers/discussions-and-clubs/page.tsx
new file mode 100644
index 0000000..5c1245a
--- /dev/null
+++ b/src/app/readers/discussions-and-clubs/page.tsx
@@ -0,0 +1,171 @@
+"use client";
+import { Header } from "@/components/dashboard/header";
+import React, { useState } from "react";
+import ClubsToolbar from "./components/ClubToolBar";
+import ClubCard from "./ClubCard";
+import { ClubDetailsProps } from "@/lib/types";
+import ClubModal from "./components/ClubDetails";
+import CreateClubModal from "./components/CreateEvent";
+import ClubDiscussion from "./components/ClubDiscussion";
+import StartEventModal from "./components/StartEvent";
+import ScheduleEvent from "./components/ScheduleEvent";
+import EventScheduleModal from "./components/SuccessModal";
+
+const clubCards: ClubDetailsProps[] = [
+  {
+    id: "1",
+    name: "Fantasy Enthusiasts",
+    isPublic: true,
+    memberCount: 1500,
+    sessionsInfo: "2+ Sessions a month",
+    unreadNotifications: 3,
+    authorAvatars: [
+      "https://randomuser.me/api/portraits/men/32.jpg",
+      "https://randomuser.me/api/portraits/women/44.jpg",
+      "https://randomuser.me/api/portraits/men/32.jpg"
+    ],
+  },
+  {
+    id: "2",
+    name: "Book Lovers",
+    isPublic: false,
+    memberCount: 1500,
+    sessionsInfo: "2+ Sessions in three months",
+    unreadNotifications: 2,
+    authorAvatars: [
+      "https://randomuser.me/api/portraits/men/32.jpg",
+      "https://randomuser.me/api/portraits/women/44.jpg",
+    ],
+  },
+  {
+    id: "3",
+    name: "Fantasy Enthusiasts",
+    isPublic: true,
+    memberCount: 1500,
+    sessionsInfo: "2+ Sessions a month",
+    unreadNotifications: 3,
+    authorAvatars: [
+      "https://randomuser.me/api/portraits/men/32.jpg",
+      "https://randomuser.me/api/portraits/women/44.jpg",
+            "https://randomuser.me/api/portraits/men/32.jpg"
+
+    ],
+  },
+  {
+    id: "4",
+    name: "Book Lovers",
+    isPublic: false,
+    memberCount: 1500,
+    sessionsInfo: "2+ Sessions a month",
+    unreadNotifications: 10,
+    authorAvatars: [
+      "https://randomuser.me/api/portraits/men/32.jpg",
+      "https://randomuser.me/api/portraits/women/44.jpg",
+    ],
+  },
+];
+
+export default function DiscussionDashboard() {
+  const [selectedClub, setSelectedClub] = useState<ClubDetailsProps | null>(
+    null
+  );
+  const [modalOpen, setModalOpen] = useState(false);
+  const [createEventOpen, setCreateEventOpen] = useState(false);
+  const [startEventOpen, setStartEventOpen] = useState(false);
+  const [scheduleEventOpen, setScheduleEventOpen] = useState(false);
+  const [successModal, setSuccessModal] = useState(false);
+
+  const [activePage, setActivePage] = useState<
+    "index" | "discussion" | "start"
+  >("index");
+
+  function openModal(club: ClubDetailsProps) {
+    setSelectedClub(club);
+    setModalOpen(true);
+  }
+
+  function closeModal() {
+    setModalOpen(false);
+    setSelectedClub(null);
+  }
+
+  function joinClub() {
+    setCreateEventOpen(true);
+    closeModal();
+  }
+
+  return (
+    <div>
+      <Header title="Discussions and Clubs" />
+      <div className="p-6 mt-[60px] rounded-2xl">
+        {activePage === "index" ? (
+          <div>
+            <div className="bg-white p-6 rounded space-y-8">
+              <ClubsToolbar />
+
+              {clubCards.map(
+                ({
+                  id,
+                  name,
+                  isPublic,
+                  memberCount,
+                  sessionsInfo,
+                  authorAvatars,
+                  unreadNotifications,
+                }) => (
+                  <ClubCard
+                    id={id}
+                    key={id}
+                    name={name}
+                    isPublic={isPublic}
+                    memberCount={memberCount}
+                    sessionsInfo={sessionsInfo}
+                    authorAvatars={authorAvatars}
+                    unreadNotifications={unreadNotifications}
+                    onOpen={openModal}
+                  />
+                )
+              )}
+            </div>
+          </div>
+        ) : (
+          <div>
+            <ClubDiscussion startEvent={() => setStartEventOpen(true)} />
+          </div>
+        )}
+
+        <StartEventModal
+          startEvent={() => setCreateEventOpen(true)}
+          instantEvent={() => setScheduleEventOpen(true)}
+          isOpen={startEventOpen}
+          onClose={() => setStartEventOpen(false)}
+        />
+
+        <ClubModal
+          club={selectedClub}
+          isOpen={modalOpen}
+          onClose={closeModal}
+          onJoin={joinClub}
+        />
+
+        <CreateClubModal
+          isOpen={createEventOpen}
+          onClose={() => setCreateEventOpen(false)}
+          onSubmit={() => setActivePage("discussion")}
+        />
+
+        <ScheduleEvent
+          isOpen={scheduleEventOpen}
+          onClose={() => setScheduleEventOpen(false)}
+          onSubmit={() => setSuccessModal(true)}
+        />
+
+        <EventScheduleModal
+          isOpen={successModal}
+          onClose={() => setSuccessModal(false)}
+          onSubmit={() => {}}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/reader-dashboard/layout.tsx b/src/app/readers/layout.tsx
similarity index 100%
rename from src/app/reader-dashboard/layout.tsx
rename to src/app/readers/layout.tsx
diff --git a/src/app/reader-dashboard/library/page.tsx b/src/app/readers/library/page.tsx
similarity index 100%
rename from src/app/reader-dashboard/library/page.tsx
rename to src/app/readers/library/page.tsx
diff --git a/src/app/reader-dashboard/notifications/notification-detail.tsx b/src/app/readers/notifications/notification-detail.tsx
similarity index 100%
rename from src/app/reader-dashboard/notifications/notification-detail.tsx
rename to src/app/readers/notifications/notification-detail.tsx
diff --git a/src/app/readers/notifications/page.tsx b/src/app/readers/notifications/page.tsx
new file mode 100644
index 0000000..ac03fed
--- /dev/null
+++ b/src/app/readers/notifications/page.tsx
@@ -0,0 +1,193 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { CheckCheck } from "lucide-react";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Header } from "@/components/dashboard/header";
+import { NotificationDetailPage } from "./notification-detail";
+
+const notifications = [
+  {
+    id: 1,
+    title: "New updates for Writers",
+    time: "12:18 PM",
+    date: "Today",
+    isNew: true,
+    content: "Step up your writing with our latest update",
+  },
+  {
+    id: 2,
+    title: "New updates for Writers",
+    time: "12:18 PM",
+    date: "Today",
+    isNew: true,
+    content: "Step up your writing with our latest update",
+  },
+  {
+    id: 3,
+    title: "New updates for Writers",
+    time: "12:18 PM",
+    date: "Yesterday",
+    isNew: true,
+    content: "Step up your writing with our latest update",
+  },
+  {
+    id: 4,
+    title: "New updates for Writers",
+    time: "12:18 PM",
+    date: "Yesterday",
+    isNew: true,
+    content: "Step up your writing with our latest update",
+  },
+  {
+    id: 5,
+    title: "New updates for Writers",
+    time: "12:18 PM",
+    date: "Yesterday",
+    isNew: true,
+    content: "Step up your writing with our latest update",
+  },
+  {
+    id: 6,
+    title: "New updates for Writers",
+    time: "12:18 PM",
+    date: "12 April, 2025",
+    isNew: true,
+    content: "Step up your writing with our latest update",
+  },
+];
+
+function NotificationPage() {
+  const [filter, setFilter] = useState("");
+  const [viewNotf, setViewNotf] = useState(false);
+
+  const groupedNotifications = notifications.reduce((acc, notification) => {
+    if (!acc[notification.date]) {
+      acc[notification.date] = [];
+    }
+    acc[notification.date].push(notification);
+    return acc;
+  }, {} as Record<string, typeof notifications>);
+
+  function backhandler() {
+    setViewNotf(false);
+  }
+  function viewNotificationhandler() {
+    setViewNotf(true);
+  }
+  if (viewNotf) {
+    return <NotificationDetailPage back={backhandler} />;
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <Header title="Notification" />
+
+      {/* Content */}
+      <div className="flex-1 p-4 lg:p-6 overflow-auto mt-16">
+        <div className="bg-white rounded-lg border border-gray-200">
+          {/* Header */}
+          <div className="p-4 lg:p-6 border-b border-gray-200">
+            <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-end justify-between">
+              <div className="flex flex-col gap-2">
+                <div className="flex items-center gap-2 text-[#B0B0B0]">
+                  <h2 className="text-lg font-medium">All Notifications</h2> (7)
+                </div>
+                <div className="flex items-center gap-4">
+                  <Select value={filter} onValueChange={setFilter}>
+                    <SelectTrigger className="w-32 bg-[#F6F6F6] shadow-none rounded-[8px] border-none">
+                      <SelectValue placeholder="Filter by" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="all">All</SelectItem>
+                      <SelectItem value="unread">Unread</SelectItem>
+                      <SelectItem value="read">Read</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+              <Button variant="ghost" className="text-[#5D5D5D] bg-[#F6F6F6]">
+                <CheckCheck className="w-4 h-4 mr-2" />
+                Mark all as read
+              </Button>
+            </div>
+          </div>
+
+          {/* Notifications */}
+          <div className="divide-y divide-gray-200">
+            {Object.entries(groupedNotifications).map(
+              ([date, dateNotifications]) => (
+                <div key={date}>
+                  {date !== "Today" && (
+                    <div className="px-4 lg:px-6 py-3 bg-gray-50">
+                      <p className="text-sm font-medium text-gray-600">
+                        {date}
+                      </p>
+                    </div>
+                  )}
+                  {date === "Today" && (
+                    <div className="px-4 lg:px-6 py-3">
+                      <p className="text-sm font-medium text-gray-600">
+                        {date}
+                      </p>
+                    </div>
+                  )}
+                  {dateNotifications.map((notification) => (
+                    <div
+                      key={notification.id}
+                      className="p-4 lg:p-6 hover:bg-gray-50"
+                    >
+                      <div className="flex items-start gap-4">
+                        <Avatar className="w-10 h-10 bg-gray-200">
+                          <AvatarFallback></AvatarFallback>
+                        </Avatar>
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-2 mb-1">
+                            <h3 className="font-medium text-gray-900">
+                              {notification.title}
+                            </h3>
+                            {notification.isNew && (
+                              <Badge
+                                variant="destructive"
+                                className="text-xs text-[#ED4D48] bg-[#ED4D4833]"
+                              >
+                                New
+                              </Badge>
+                            )}
+                          </div>
+                          <p className="text-sm text-gray-500">
+                            {notification.time}
+                          </p>
+                        </div>
+                        <Button
+                          variant="link"
+                          className="text-blue-600"
+                          onClick={viewNotificationhandler}
+                        >
+                          View Details
+                        </Button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default NotificationPage;
+
diff --git a/src/app/reader-dashboard/page.tsx b/src/app/readers/page.tsx
similarity index 100%
rename from src/app/reader-dashboard/page.tsx
rename to src/app/readers/page.tsx
diff --git a/src/app/readers/profile/following/page.tsx b/src/app/readers/profile/following/page.tsx
new file mode 100644
index 0000000..c1d6fff
--- /dev/null
+++ b/src/app/readers/profile/following/page.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import { useState } from "react";
+import { ArrowLeft, BadgeCheck, CheckCircle } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useMobileMenu } from "@/hooks/useMobileMenu";
+import Image from "next/image";
+
+interface FollowingUser {
+  id: string;
+  name: string;
+  username: string;
+  isVerified: boolean;
+  avatar?: string;
+}
+
+export default function FollowingPage() {
+  const router = useRouter();
+  const { openMobileMenu } = useMobileMenu();
+  const [activeTab, setActiveTab] = useState<
+    "total" | "verified" | "unverified"
+  >("total");
+
+  const followingUsers: FollowingUser[] = Array.from({ length: 9 }, (_, i) => ({
+    id: `user-${i + 1}`,
+    name: "Darrin Collins",
+    username: "@darrin_collins",
+    isVerified: i < 7, // First 7 are verified
+    avatar: "/reader-image.png?height=40&width=40",
+  }));
+
+  const totalCount = followingUsers.length;
+  const verifiedCount = followingUsers.filter((user) => user.isVerified).length;
+  const unverifiedCount = totalCount - verifiedCount;
+
+  const filteredUsers = followingUsers.filter((user) => {
+    if (activeTab === "verified") return user.isVerified;
+    if (activeTab === "unverified") return !user.isVerified;
+    return true;
+  });
+
+  const handleUnfollow = (userId: string) => {
+    console.log("Unfollow user:", userId);
+  };
+
+  return (
+    <div className="bg-white min-h-screen m-4 md:m-6">
+      {/* Mobile Header */}
+      <div className="lg:hidden bg-gray-50 p-4 flex items-center gap-3">
+        <button onClick={openMobileMenu} className="p-1">
+          <ArrowLeft size={20} className="text-gray-600" />
+        </button>
+        <h1 className="text-lg font-semibold text-gray-800">Following</h1>
+      </div>
+
+      <div className="p-6 max-w-4xl mx-auto">
+        {/* Desktop Header */}
+        <div className="hidden lg:flex items-start gap-3 mb-10">
+          <h1 className="text-xl font-semibold text-gray-800">Following</h1>
+        </div>
+
+        {/* Stats Tabs */}
+        <div className="flex gap-6 mb-6 ">
+          <button
+            onClick={() => setActiveTab("total")}
+            className={`px-3 py-1 text-sm font-medium border-[0.5px] rounded-2xl transition-colors ${
+              activeTab === "total"
+                ? "text-gray-700"
+                : "border-transparent text-gray-500 hover:text-gray-700"
+            }`}
+          >
+            Total <span className="ml-1 font-bold">{totalCount}</span>
+          </button>
+          <button
+            onClick={() => setActiveTab("verified")}
+            className={`px-3 py-1 text-sm font-medium border-[0.5px] rounded-2xl  transition-colors ${
+              activeTab === "verified"
+                ? "text-gray-700"
+                : "border-transparent text-gray-500 hover:text-gray-700"
+            }`}
+          >
+            Verified <span className="ml-1 font-bold">{verifiedCount}</span>
+          </button>
+          <button
+            onClick={() => setActiveTab("unverified")}
+            className={`px-3 py-1 text-sm font-medium border-[0.5px] rounded-2xl  transition-colors ${
+              activeTab === "unverified"
+                ? "text-gray-700"
+                : "border-transparent text-gray-500 hover:text-gray-700"
+            }`}
+          >
+            Unverified <span className="ml-1 font-bold">{unverifiedCount}</span>
+          </button>
+        </div>
+
+        {/* Following List */}
+        <div className="space-y-4 ">
+          {filteredUsers.map((user) => (
+            <div
+              key={user.id}
+              className="flex items-center justify-between p-4 hover:bg-gray-50  transition-colors border-b-[0.5px] border-gray-100"
+            >
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-full bg-gray-200 overflow-hidden">
+                  <Image
+                    src={user.avatar || "/reader-image.png"}
+                    alt={user.name}
+                    width={40}
+                    height={40}
+                    className="object-cover w-full h-full"
+                  />
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="font-medium text-gray-900">{user.name}</span>
+                  {user.isVerified && (
+                    <BadgeCheck size={16} className="text-blue-500" />
+                  )}
+                </div>
+              </div>
+              <button
+                onClick={() => handleUnfollow(user.id)}
+                className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 bg-gray-50 hover:bg-gray-100  rounded-2xl transition-colors"
+              >
+                Unfollow
+              </button>
+            </div>
+          ))}
+        </div>
+
+        {filteredUsers.length === 0 && (
+          <div className="text-center py-12">
+            <p className="text-gray-500">No users found in this category.</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/reader-dashboard/profile/layout.tsx b/src/app/readers/profile/layout.tsx
similarity index 100%
rename from src/app/reader-dashboard/profile/layout.tsx
rename to src/app/readers/profile/layout.tsx
diff --git a/src/app/reader-dashboard/profile/page.tsx b/src/app/readers/profile/page.tsx
similarity index 100%
rename from src/app/reader-dashboard/profile/page.tsx
rename to src/app/readers/profile/page.tsx
diff --git a/src/app/readers/profile/preferences/page.tsx b/src/app/readers/profile/preferences/page.tsx
new file mode 100644
index 0000000..14581a0
--- /dev/null
+++ b/src/app/readers/profile/preferences/page.tsx
@@ -0,0 +1,210 @@
+// PreferencesPage.tsx
+"use client";
+
+import { useState } from "react";
+import { ArrowLeft, ChevronDown, X } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useMobileMenu } from "@/hooks/useMobileMenu";
+
+const allGenres = [
+  "Fiction",
+  "Drama",
+  "Horror",
+  "Comedy",
+  "Sci-Fi",
+  "Fantasy",
+  "Romance",
+  "Mystery",
+  "Thriller",
+  "Non-Fiction",
+];
+const allFormats = [
+  "short stories",
+  "novels",
+  "poetry",
+  "essays",
+  "biographies",
+  "memoirs",
+];
+
+export default function PreferencesPage() {
+  const router = useRouter();
+  const { openMobileMenu } = useMobileMenu();
+  const [selectedGenres, setSelectedGenres] = useState<string[]>([
+    "Fiction",
+    "Drama",
+  ]);
+  const [selectedFormats, setSelectedFormats] = useState<string[]>([
+    "short stories",
+  ]);
+  const [isGenreDropdownOpen, setIsGenreDropdownOpen] = useState(false);
+  const [isFormatDropdownOpen, setIsFormatDropdownOpen] = useState(false);
+
+  const handleGenreSelect = (genre: string) => {
+    if (!selectedGenres.includes(genre)) {
+      setSelectedGenres([...selectedGenres, genre]);
+    }
+    setIsGenreDropdownOpen(false);
+  };
+
+  const handleFormatSelect = (format: string) => {
+    if (!selectedFormats.includes(format)) {
+      setSelectedFormats([...selectedFormats, format]);
+    }
+    setIsFormatDropdownOpen(false);
+  };
+
+  const removeGenre = (genre: string) => {
+    setSelectedGenres(selectedGenres.filter((g) => g !== genre));
+  };
+
+  const removeFormat = (format: string) => {
+    setSelectedFormats(selectedFormats.filter((f) => f !== format));
+  };
+
+  const handleSave = () => {
+    console.log("Saving preferences:", { selectedGenres, selectedFormats });
+  };
+
+  const handleCancel = () => {
+    setSelectedGenres(["Fiction", "Drama"]);
+    setSelectedFormats(["short stories"]);
+  };
+
+  return (
+    <div className="bg-white min-h-screen m-4 md:m-6 rounded-xl">
+      {/* Mobile Header */}
+      <div className="lg:hidden bg-gray-50 p-4 flex items-center gap-3">
+        <button onClick={openMobileMenu} className="p-1">
+          <ArrowLeft size={20} className="text-gray-600" />
+        </button>
+        <h1 className="text-lg font-semibold text-gray-800">Preference</h1>
+      </div>
+
+      <div className="p-6 max-w-4xl mx-auto">
+        {/* Desktop Header */}
+        <div className="hidden lg:flex items-start gap-3 mb-10">
+          <h1 className="text-xl font-semibold text-gray-800">Preferences</h1>
+        </div>
+
+        <div className="space-y-8">
+          {/* Genre Specialization */}
+          <div>
+            <label className="block text-sm font-medium text-gray-400 mb-3">
+              Genre specialization(s)
+            </label>
+
+            <div className="relative mb-4">
+              <button
+                onClick={() => setIsGenreDropdownOpen(!isGenreDropdownOpen)}
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg bg-white text-left flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              >
+                <span className="text-gray-400">Genres</span>
+                <ChevronDown size={20} className="text-gray-400" />
+              </button>
+
+              {isGenreDropdownOpen && (
+                <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-gray-300 rounded-lg shadow-lg z-10 max-h-48 overflow-y-auto">
+                  {allGenres
+                    .filter((genre) => !selectedGenres.includes(genre))
+                    .map((genre) => (
+                      <button
+                        key={genre}
+                        onClick={() => handleGenreSelect(genre)}
+                        className="w-full px-4 py-2 text-left hover:bg-gray-50 transition-colors"
+                      >
+                        {genre}
+                      </button>
+                    ))}
+                </div>
+              )}
+            </div>
+
+            <div className="flex flex-wrap gap-2 mb-6">
+              {selectedGenres.map((genre) => (
+                <span
+                  key={genre}
+                  className="bg-blue-50 text-gray-700 px-2.5 py-2 rounded-full text-sm flex items-center gap-2"
+                >
+                  {genre}
+                  <button
+                    onClick={() => removeGenre(genre)}
+                    className="text-gray-500 hover:text-gray-800"
+                  >
+                    <X size={14} />
+                  </button>
+                </span>
+              ))}
+            </div>
+          </div>
+
+          {/* Favorite Formats */}
+          <div>
+            <label className="block text-sm font-medium text-gray-400 mb-3">
+              Favorite formats
+            </label>
+
+            <div className="relative mb-4">
+              <button
+                onClick={() => setIsFormatDropdownOpen(!isFormatDropdownOpen)}
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg bg-white text-left flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              >
+                <span className="text-gray-400">Formats</span>
+                <ChevronDown size={20} className="text-gray-400" />
+              </button>
+
+              {isFormatDropdownOpen && (
+                <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-gray-300 rounded-lg shadow-lg z-10 max-h-48 overflow-y-auto">
+                  {allFormats
+                    .filter((format) => !selectedFormats.includes(format))
+                    .map((format) => (
+                      <button
+                        key={format}
+                        onClick={() => handleFormatSelect(format)}
+                        className="w-full px-2.5 py-2 text-left hover:bg-gray-50 transition-colors"
+                      >
+                        {format}
+                      </button>
+                    ))}
+                </div>
+              )}
+            </div>
+
+            <div className="flex flex-wrap gap-2 mb-8">
+              {selectedFormats.map((format) => (
+                <span
+                  key={format}
+                  className="bg-blue-50 text-gray-700 px-2.5 py-2 rounded-full text-sm flex items-center gap-2"
+                >
+                  {format}
+                  <button
+                    onClick={() => removeFormat(format)}
+                    className="text-gray-500 hover:text-gray-800"
+                  >
+                    <X size={14} />
+                  </button>
+                </span>
+              ))}
+            </div>
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex flex-col lg:flex-row gap-4">
+            <button
+              onClick={handleCancel}
+              className="flex-1 py-3 px-6 bg-gradient-to-b from-[#EDF7FF] via-[#cee6f9] to-[#5f9efd] text-blue-950 rounded-lg font-medium hover:bg-blue-100 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSave}
+              className="flex-1 py-3 px-6 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
+            >
+              Save Change
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/readers/profile/privacy/page.tsx b/src/app/readers/profile/privacy/page.tsx
new file mode 100644
index 0000000..51fd0cc
--- /dev/null
+++ b/src/app/readers/profile/privacy/page.tsx
@@ -0,0 +1,28 @@
+"use client";
+import { ArrowLeft } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useMobileMenu } from "@/hooks/useMobileMenu";
+
+export default function Privacy() {
+  const router = useRouter();
+  const { openMobileMenu } = useMobileMenu();
+
+  return (
+    <div className=" min-h-screen bg-white m-4 md:m-6 rounded-[8px]">
+      {/* Mobile Header */}
+      <div className="lg:hidden bg-gray-50 p-4 flex items-center gap-3">
+        <button onClick={openMobileMenu} className="p-1">
+          <ArrowLeft size={20} className="text-gray-600" />
+        </button>
+        <h1 className="text-lg font-semibold text-gray-800">Privacy</h1>
+      </div>
+
+      <div className="p-6 max-w-md mx-auto pt-12 bg-white text-center">
+        {/* Desktop Header */}
+        <div className="hidden lg:flex items-center justify-center gap-3 mb-10">
+          <h1 className="text-xl font-semibold text-gray-800">Privacy</h1>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/readers/profile/sign-out/page.tsx b/src/app/readers/profile/sign-out/page.tsx
new file mode 100644
index 0000000..a3c5318
--- /dev/null
+++ b/src/app/readers/profile/sign-out/page.tsx
@@ -0,0 +1,28 @@
+"use client";
+import { ArrowLeft } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useMobileMenu } from "@/hooks/useMobileMenu";
+
+export default function SignOutPage() {
+  const router = useRouter();
+  const { openMobileMenu } = useMobileMenu();
+
+  return (
+    <div className=" min-h-screen bg-white m-4 md:m-6 rounded-[8px]">
+      {/* Mobile Header */}
+      <div className="lg:hidden bg-gray-50 p-4 flex items-center gap-3">
+        <button onClick={openMobileMenu} className="p-1">
+          <ArrowLeft size={20} className="text-gray-600" />
+        </button>
+        <h1 className="text-lg font-semibold text-gray-800">Sign Out</h1>
+      </div>
+
+      <div className="p-6 max-w-md mx-auto pt-12 bg-white text-center">
+        {/* Desktop Header */}
+        <div className="hidden lg:flex items-center justify-center gap-3 mb-10">
+          <h1 className="text-xl font-semibold text-gray-800">Sign Out</h1>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/readers/stats-and-achievements/page.tsx b/src/app/readers/stats-and-achievements/page.tsx
new file mode 100644
index 0000000..f777e98
--- /dev/null
+++ b/src/app/readers/stats-and-achievements/page.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import { Header } from "@/components/dashboard/header";
+import { TimeFilter } from "@/components/stats-achievements/time-filter";
+import { StatsGrid } from "@/components/stats-achievements/stats-grid";
+import { BadgeSection } from "@/components/stats-achievements/badge-section";
+import { GoalsSection } from "@/components/stats-achievements/goals-section";
+import { AchievementsSection } from "@/components/stats-achievements/achievements-section";
+import { useState } from "react";
+
+// Mock data for different time periods
+const timeData = {
+  "This Week": {
+    hours: 16,
+    minutes: 37,
+    stats: [
+      { label: "Books Completed", value: "2", color: "#096CFF" },
+      {
+        label: "Average Session",
+        value: "45",
+        unit: "Minutes",
+        color: "#096CFF",
+      },
+      { label: "Most Read Genre", value: "Fiction", color: "#096CFF" },
+      { label: "Most Read Author", value: "J.K. Rowling", color: "#096CFF" },
+      { label: "Longest Read", value: "4", unit: "Hours", color: "#096CFF" },
+      { label: "Sessions", value: "12", color: "#096CFF" },
+      { label: "Abandoned", value: "1", color: "#096CFF" },
+    ],
+  },
+  "This Month": {
+    hours: 68,
+    minutes: 24,
+    stats: [
+      { label: "Books Completed", value: "8", color: "#096CFF" },
+      {
+        label: "Average Session",
+        value: "52",
+        unit: "Minutes",
+        color: "#096CFF",
+      },
+      { label: "Most Read Genre", value: "Mystery", color: "#096CFF" },
+      { label: "Most Read Author", value: "Agatha Christie", color: "#096CFF" },
+      { label: "Longest Read", value: "6", unit: "Hours", color: "#096CFF" },
+      { label: "Sessions", value: "45", color: "#096CFF" },
+      { label: "Abandoned", value: "3", color: "#096CFF" },
+    ],
+  },
+  "This Year": {
+    hours: 324,
+    minutes: 18,
+    stats: [
+      { label: "Books Completed", value: "42", color: "#096CFF" },
+      {
+        label: "Average Session",
+        value: "48",
+        unit: "Minutes",
+        color: "#096CFF",
+      },
+      { label: "Most Read Genre", value: "Sci-Fi", color: "#096CFF" },
+      { label: "Most Read Author", value: "Isaac Asimov", color: "#096CFF" },
+      { label: "Longest Read", value: "8", unit: "Hours", color: "#096CFF" },
+      { label: "Sessions", value: "186", color: "#096CFF" },
+      { label: "Abandoned", value: "12", color: "#096CFF" },
+    ],
+  },
+  "All Time": {
+    hours: 1247,
+    minutes: 52,
+    stats: [
+      { label: "Books Completed", value: "156", color: "#096CFF" },
+      {
+        label: "Average Session",
+        value: "51",
+        unit: "Minutes",
+        color: "#096CFF",
+      },
+      { label: "Most Read Genre", value: "Fantasy", color: "#096CFF" },
+      {
+        label: "Most Read Author",
+        value: "Brandon Sanderson",
+        color: "#096CFF",
+      },
+      { label: "Longest Read", value: "12", unit: "Hours", color: "#096CFF" },
+      { label: "Sessions", value: "743", color: "#096CFF" },
+      { label: "Abandoned", value: "28", color: "#096CFF" },
+    ],
+  },
+};
+
+export default function StatsAndAchievementsPage() {
+  const [selectedPeriod, setSelectedPeriod] = useState("This Week");
+  const currentData = timeData[selectedPeriod as keyof typeof timeData];
+
+  return (
+    <div className="min-h-screen bg-[#f8f9fa]">
+      <Header title="Stats & Achievements" />
+
+      <div className="p-4 lg:p-6 space-y-6">
+        {/* Total Hours Read Section */}
+        <div className="bg-white rounded-lg border border-[#e7e7e7] px-2 py-4 lg:p-6">
+          <div className="mb-4">
+            <h2 className="text-lg font-bold text-gray-400 mb-4">
+              Total Hours Read
+            </h2>
+            <TimeFilter
+              selectedPeriod={selectedPeriod}
+              onPeriodChange={setSelectedPeriod}
+            />
+          </div>
+
+          {/* Large Time Display */}
+          <div className="bg-[#096CFF0A] rounded-lg p-6 mb-6 border-[0.5px] border-[#4BB1FF]">
+            <div className="flex items-center justify-center gap-4">
+              <div className="flex text-center items-center gap-2">
+                <div className="text-2xl lg:text-4xl font-bold text-blue-600 transition-all duration-300">
+                  {currentData.hours}
+                </div>
+                <div className="text-sm text-blue-500 font-light mt-1 bg-[#096CFF1A] px-3 py-1 rounded-3xl">
+                  Hours
+                </div>
+              </div>
+              <span className="text-[#D6ECFF] text-3xl">:</span>
+              <div className="text-center flex items-center gap-2">
+                <div className="text-2xl lg:text-4xl font-bold text-blue-600 transition-all duration-300">
+                  {currentData.minutes}
+                </div>
+                <div className="text-sm font-light text-blue-500 mt-1 bg-[#096CFF1A] px-3 py-1 rounded-3xl">
+                  Minutes
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Stats Grid */}
+          <StatsGrid stats={currentData.stats} />
+        </div>
+        <div className="rounded-xl border border-[#e7e7e7] bg-white space-y-4">
+          {/* Badge Section */}
+          <BadgeSection />
+
+          {/* Goals Section */}
+          <GoalsSection />
+
+          {/* Achievements Section */}
+          <AchievementsSection />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/reader-dashboard/transactions/page.tsx b/src/app/readers/transactions/page.tsx
similarity index 100%
rename from src/app/reader-dashboard/transactions/page.tsx
rename to src/app/readers/transactions/page.tsx
diff --git a/src/app/reader-dashboard/transactions/transaction-details.tsx b/src/app/readers/transactions/transaction-details.tsx
similarity index 100%
rename from src/app/reader-dashboard/transactions/transaction-details.tsx
rename to src/app/readers/transactions/transaction-details.tsx
diff --git a/src/app/reader-dashboard/wishlist/page.tsx b/src/app/readers/wishlist/page.tsx
similarity index 100%
rename from src/app/reader-dashboard/wishlist/page.tsx
rename to src/app/readers/wishlist/page.tsx
diff --git a/src/app/waiting-room/page.tsx b/src/app/waiting-room/page.tsx
index cf50ba1..22182d9 100644
--- a/src/app/waiting-room/page.tsx
+++ b/src/app/waiting-room/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { Camera, Mic, PlusCircleIcon } from "lucide-react";
 import { useState } from "react";
-import AddGuestModal from "../reader-dashboard/discussions-and-clubs/components/AddGuest";
+import AddGuestModal from "../readers/discussions-and-clubs/components/AddGuest";
 import Link from "next/link";
 
 export default function WaitingRoom() {
diff --git a/src/app/writer-dashboard/analytics/page.tsx b/src/app/writers/analytics/page.tsx
similarity index 100%
rename from src/app/writer-dashboard/analytics/page.tsx
rename to src/app/writers/analytics/page.tsx
diff --git a/src/app/writers/components/notification-detail.tsx b/src/app/writers/components/notification-detail.tsx
new file mode 100644
index 0000000..dd04e4f
--- /dev/null
+++ b/src/app/writers/components/notification-detail.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { ArrowLeft, Trash2 } from "lucide-react";
+import Image from "next/image";
+
+interface NotificationDetailProps {
+  notification: {
+    id: number;
+    title: string;
+    time: string;
+    date: string;
+  };
+  onBack: () => void;
+  onDelete: (id: number) => void;
+}
+
+export default function NotificationDetail({
+  notification,
+  onBack,
+  onDelete,
+}: NotificationDetailProps) {
+  return (
+    <main className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
+      <div className="w-full md:w-[642px] mx-auto bg-[#FFFFFF] rounded-[8px] p-4 z-10">
+        <div className="flex items-center justify-between mb-6">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onBack}
+            className="h-8 w-8 p-0 hover:bg-gray-100"
+          >
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => onDelete(notification.id)}
+            className="h-8 w-8 p-0 hover:bg-gray-100"
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        </div>
+
+        <div className="space-y-4">
+          <div className="text-center space-y-2">
+            <h1 className="text-[24px] font-semibold text-[#454545]">
+              New Update for Writers
+            </h1>
+            <p className="text-sm text-[#454545] text-[16px]">
+              Step up your writing with our latest update
+            </p>
+          </div>
+
+          <div className="md:w-[300px] w-full mx-auto">
+            <Image
+              src="/coming-soon.png"
+              alt="Notification Banner"
+              width={100}
+              height={100}
+              className="w-full"
+            />
+          </div>
+
+          <div className="text-center">
+            <p className="text-sm text-[#454545] text-[16px] leading-relaxed">
+              Compete against players worldwide, climb the global rankings, and
+              prove your skills. Test your strategy, outmaneuver your opponents,
+              and claim your place at the top. Glory awaits!
+            </p>
+          </div>
+
+          <div className="text-center pt-4">
+            <p className="text-xs text-[#888888] text-[16px]">
+              Sent: {notification.date} {notification.time}
+            </p>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/src/app/writer-dashboard/earnings/page.tsx b/src/app/writers/earnings/page.tsx
similarity index 86%
rename from src/app/writer-dashboard/earnings/page.tsx
rename to src/app/writers/earnings/page.tsx
index 60cbf2a..7c30769 100644
--- a/src/app/writer-dashboard/earnings/page.tsx
+++ b/src/app/writers/earnings/page.tsx
@@ -1,14 +1,14 @@
 "use client"
 
 
-import EarningsSummary from "@/components/ dashboard-earnings/EarningSummary"
-import LinkWallet from "@/components/ dashboard-earnings/LinkWallet"
-import RevenueBreakdown from "@/components/ dashboard-earnings/RevenueBreakdown"
+import EarningsSummary from "@/components/dashboard-earnings/EarningSummary"
+import LinkWallet from "@/components/dashboard-earnings/LinkWallet"
+import RevenueBreakdown from "@/components/dashboard-earnings/RevenueBreakdown"
 import type { EarningTab } from "@/lib/interfaces/EarningTabInterface"
 import { RevenueChartInterface } from "@/lib/interfaces/RevenueChartInterface"
 import { useEffect, useState } from "react"
-import TransactionHistory from "../../../components/ dashboard-earnings/TransactionHistory"
-import RequestPaymentModal from "@/components/ dashboard-earnings/RequestPaymentModal"
+import TransactionHistory from "../../../components/dashboard-earnings/TransactionHistory"
+import RequestPaymentModal from "@/components/dashboard-earnings/RequestPaymentModal"
 import { PaymentPropInterface } from "@/lib/interfaces/PaymentPropInterface"
 
 
diff --git a/src/app/writers/feedback/page.tsx b/src/app/writers/feedback/page.tsx
new file mode 100644
index 0000000..d4225e5
--- /dev/null
+++ b/src/app/writers/feedback/page.tsx
@@ -0,0 +1,12 @@
+
+
+function FeedbackPage() {
+  return (
+    <div>
+      <h1>Feedback</h1>
+      <p>We value your feedback! Please let us know your thoughts.</p>
+      {/* Add your feedback form or component here */}
+    </div>
+  );
+}
+export default FeedbackPage;
\ No newline at end of file
diff --git a/src/app/writers/layout.tsx b/src/app/writers/layout.tsx
new file mode 100644
index 0000000..b1d5ee5
--- /dev/null
+++ b/src/app/writers/layout.tsx
@@ -0,0 +1,18 @@
+import type React from "react";
+import { Sidebar } from "@/components/dashboard/sidebar";
+import "@/app/globals.css";
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex min-h-screen bg-[#f6f6f6]">
+      <Sidebar />
+      <div className="ml-64 w-full relative">
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/writer-dashboard/manage-content/BookContentStep.tsx b/src/app/writers/manage-content/BookContentStep.tsx
similarity index 100%
rename from src/app/writer-dashboard/manage-content/BookContentStep.tsx
rename to src/app/writers/manage-content/BookContentStep.tsx
diff --git a/src/app/writers/manage-content/BookCreationFlow.tsx b/src/app/writers/manage-content/BookCreationFlow.tsx
new file mode 100644
index 0000000..e3f9918
--- /dev/null
+++ b/src/app/writers/manage-content/BookCreationFlow.tsx
@@ -0,0 +1,110 @@
+// app/manage-content/components/BookCreationFlow.tsx
+import React, { useState } from "react";
+import StepIndicator from "./StepIndicator";
+import BookContentStep from "./BookContentStep";
+import BookDetailsStep from "./BookDetailsStep";
+import PricingStep from "./PricingStep";
+import PreviewModal from "./PreviewModal";
+import SuccessModal from "./SuccessModal";
+
+interface BookCreationFlowProps {
+  currentStep: number;
+  setCurrentStep: (step: number) => void;
+}
+
+const BookCreationFlow: React.FC<BookCreationFlowProps> = ({
+  currentStep,
+  setCurrentStep,
+}) => {
+  const [showPreviewModal, setShowPreviewModal] = useState(false);
+  const [showSuccessModal, setShowSuccessModal] = useState(false);
+  const [formData, setFormData] = useState({
+    bookTitle: "",
+    subtitle: "",
+    language: "",
+    isbn: "",
+    authorName: "Joe Yanum",
+    genres: [] as string[],
+    tags: [] as string[],
+    description: "",
+    pricingOption: "one-time",
+    price: "9.89",
+    stark: "82.22",
+    contributors: [] as Array<{ name: string; type: string; email?: string }>,
+  });
+
+  const handleNext = () => {
+    if (currentStep < 3) {
+      setCurrentStep(currentStep + 1);
+    } else {
+      setShowPreviewModal(true);
+    }
+  };
+
+  const handleBack = () => {
+    if (currentStep > 1) {
+      setCurrentStep(currentStep - 1);
+    } else {
+      setCurrentStep(0);
+    }
+  };
+
+  const handlePublish = () => {
+    setShowPreviewModal(false);
+    setShowSuccessModal(true);
+  };
+
+  const handleSuccessClose = () => {
+    setShowSuccessModal(false);
+    setCurrentStep(0);
+  };
+
+  return (
+    <div className="w-full">
+      <StepIndicator currentStep={currentStep} />
+
+      <div className="mt-5">
+        <h2 className="text-2xl font-semibold mb-6">E-Book</h2>
+
+        {currentStep === 1 && (
+          <BookContentStep
+            formData={formData}
+            setFormData={setFormData}
+            onNext={handleNext}
+            onBack={handleBack}
+          />
+        )}
+
+        {currentStep === 2 && (
+          <BookDetailsStep
+            formData={formData}
+            setFormData={setFormData}
+            onNext={handleNext}
+            onBack={handleBack}
+          />
+        )}
+
+        {currentStep === 3 && (
+          <PricingStep
+            formData={formData}
+            setFormData={setFormData}
+            onNext={handleNext}
+            onBack={handleBack}
+          />
+        )}
+      </div>
+
+      {showPreviewModal && (
+        <PreviewModal
+          formData={formData}
+          onClose={() => setShowPreviewModal(false)}
+          onPublish={handlePublish}
+        />
+      )}
+
+      {showSuccessModal && <SuccessModal onClose={handleSuccessClose} />}
+    </div>
+  );
+};
+
+export default BookCreationFlow;
diff --git a/src/app/writer-dashboard/manage-content/BookDetailsStep.tsx b/src/app/writers/manage-content/BookDetailsStep.tsx
similarity index 100%
rename from src/app/writer-dashboard/manage-content/BookDetailsStep.tsx
rename to src/app/writers/manage-content/BookDetailsStep.tsx
diff --git a/src/app/writer-dashboard/manage-content/ContributorDetailsModal.tsx b/src/app/writers/manage-content/ContributorDetailsModal.tsx
similarity index 100%
rename from src/app/writer-dashboard/manage-content/ContributorDetailsModal.tsx
rename to src/app/writers/manage-content/ContributorDetailsModal.tsx
diff --git a/src/app/writers/manage-content/ContributorTypeModal.tsx b/src/app/writers/manage-content/ContributorTypeModal.tsx
new file mode 100644
index 0000000..011bed1
--- /dev/null
+++ b/src/app/writers/manage-content/ContributorTypeModal.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import { X } from "lucide-react";
+
+interface ContributorTypeModalProps {
+  onClose: () => void;
+  onSelect: (type: string) => void;
+}
+
+const ContributorTypeModal: React.FC<ContributorTypeModalProps> = ({
+  onClose,
+  onSelect,
+}) => {
+  return (
+    <div className="fixed inset-0 bg-[#000000d7] bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg p-6 w-[400px]">
+        <div className="flex justify-between items-center mb-6">
+          <h2 className="text-xl font-semibold">
+            Select the type of Contributor
+          </h2>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600 cursor-pointer"
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        <div className="space-y-2">
+          <button
+            onClick={() => onSelect("Co-authors")}
+            className="w-full text-left border-b border-[#E7E7E7] px-4 py-3 hover:bg-gray-50 rounded-md cursor-pointer"
+          >
+            Co-authors
+          </button>
+          <button
+            onClick={() => onSelect("Editors")}
+            className="w-full text-left border-b border-[#E7E7E7] px-4 py-3 hover:bg-gray-50 rounded-md cursor-pointer"
+          >
+            Editors
+          </button>
+          <button
+            onClick={() => onSelect("Illustrators")}
+            className="w-full text-left border-b border-[#E7E7E7] px-4 py-3 hover:bg-gray-50 rounded-md cursor-pointer"
+          >
+            Illustrators
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ContributorTypeModal;
diff --git a/src/app/writer-dashboard/manage-content/Manage-content.tsx b/src/app/writers/manage-content/Manage-content.tsx
similarity index 100%
rename from src/app/writer-dashboard/manage-content/Manage-content.tsx
rename to src/app/writers/manage-content/Manage-content.tsx
diff --git a/src/app/writer-dashboard/manage-content/PreviewModal.tsx b/src/app/writers/manage-content/PreviewModal.tsx
similarity index 100%
rename from src/app/writer-dashboard/manage-content/PreviewModal.tsx
rename to src/app/writers/manage-content/PreviewModal.tsx
diff --git a/src/app/writer-dashboard/manage-content/PricingStep.tsx b/src/app/writers/manage-content/PricingStep.tsx
similarity index 100%
rename from src/app/writer-dashboard/manage-content/PricingStep.tsx
rename to src/app/writers/manage-content/PricingStep.tsx
diff --git a/src/app/writers/manage-content/ProgressStepper.tsx b/src/app/writers/manage-content/ProgressStepper.tsx
new file mode 100644
index 0000000..af5ba1e
--- /dev/null
+++ b/src/app/writers/manage-content/ProgressStepper.tsx
@@ -0,0 +1,59 @@
+// components/ProgressStepper.tsx
+import React from "react";
+
+type Step = {
+  label: string;
+};
+
+interface ProgressStepperProps {
+  steps: Step[];
+  currentStep: number; // 1-based index
+}
+
+export const ProgressStepper: React.FC<ProgressStepperProps> = ({
+  steps,
+  currentStep,
+}) => {
+  return (
+    <div className="flex items-center justify-between w-full max-w-3xl mx-auto px-4 py-8 bg-gray-50">
+      {steps.map((step, index) => {
+        const stepNumber = index + 1;
+        const isCompleted = stepNumber < currentStep;
+        const isActive = stepNumber === currentStep;
+
+        return (
+          <div
+            key={step.label}
+            className="flex-1 flex flex-col items-center relative"
+          >
+            {/* Line connector */}
+            {index !== 0 && (
+              <div
+                className={`absolute top-5 left-0 w-full h-0.5 z-0 ${
+                  isCompleted ? "bg-blue-500" : "bg-gray-300"
+                }`}
+              />
+            )}
+
+            {/* Step circle */}
+            <div
+              className={`z-10 flex items-center justify-center w-8 h-8 rounded-full border-2 text-sm font-medium
+              ${
+                isCompleted
+                  ? "bg-blue-500 text-white border-blue-500"
+                  : isActive
+                  ? "bg-white text-blue-500 border-blue-500"
+                  : "bg-white text-gray-400 border-gray-300"
+              }`}
+            >
+              {stepNumber}
+            </div>
+
+            {/* Label */}
+            <div className="mt-2 text-sm text-gray-700">{step.label}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/src/app/writer-dashboard/manage-content/PublishTypeModal.tsx b/src/app/writers/manage-content/PublishTypeModal.tsx
similarity index 100%
rename from src/app/writer-dashboard/manage-content/PublishTypeModal.tsx
rename to src/app/writers/manage-content/PublishTypeModal.tsx
diff --git a/src/app/writer-dashboard/manage-content/PublishingNft/Pricing.tsx b/src/app/writers/manage-content/PublishingNft/Pricing.tsx
similarity index 100%
rename from src/app/writer-dashboard/manage-content/PublishingNft/Pricing.tsx
rename to src/app/writers/manage-content/PublishingNft/Pricing.tsx
diff --git a/src/app/writer-dashboard/manage-content/PublishingNft/bookContent.tsx b/src/app/writers/manage-content/PublishingNft/bookContent.tsx
similarity index 100%
rename from src/app/writer-dashboard/manage-content/PublishingNft/bookContent.tsx
rename to src/app/writers/manage-content/PublishingNft/bookContent.tsx
diff --git a/src/app/writer-dashboard/manage-content/PublishingNft/bookDetail.tsx b/src/app/writers/manage-content/PublishingNft/bookDetail.tsx
similarity index 100%
rename from src/app/writer-dashboard/manage-content/PublishingNft/bookDetail.tsx
rename to src/app/writers/manage-content/PublishingNft/bookDetail.tsx
diff --git a/src/app/writers/manage-content/PublishingNft/genre.tsx b/src/app/writers/manage-content/PublishingNft/genre.tsx
new file mode 100644
index 0000000..bb9f152
--- /dev/null
+++ b/src/app/writers/manage-content/PublishingNft/genre.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import type React from "react";
+
+type GenreTagProps = {
+  name: string;
+  selected: boolean;
+  onClick: () => void;
+};
+
+function GenreTag({ name, selected, onClick }: GenreTagProps): React.JSX.Element {
+  return (
+    <div
+      className={`inline-flex items-center px-3 py-1 rounded-md text-sm ${
+        selected ? "bg-blue-100 text-blue-800" : "bg-gray-100 text-gray-800"
+      } cursor-pointer`}
+      onClick={onClick}
+    >
+      {name}
+      {selected && <span className="ml-1 text-xs">×</span>}
+    </div>
+  );
+}
+export default GenreTag;
diff --git a/src/app/writers/manage-content/PublishingNft/page.tsx b/src/app/writers/manage-content/PublishingNft/page.tsx
new file mode 100644
index 0000000..0d4836d
--- /dev/null
+++ b/src/app/writers/manage-content/PublishingNft/page.tsx
@@ -0,0 +1,118 @@
+"use client";
+
+import type React from "react";
+import { useState } from "react";
+import BookContent from "./bookContent";
+import BookDetails from "./bookDetail";
+import Pricing from "./Pricing";
+
+export default function BookNFTApp() {
+  const [currentStep, setCurrentStep] = useState(1);
+  const [bookData, setBookData] = useState<BookData>({
+    coverImage: '',
+    bookTitle: '',
+    subtitle: '',
+    language: '',
+    isbn: '',
+    manuscript: '',
+    bonusContent: '',
+    authorName: '',
+    genre: [],
+    tags: [],
+    description: '',
+    copiesCount: 20,
+    priceUSDC: 0.99,
+    priceSTRK: 33.23
+  });
+  
+  const updateBookData = (data: Partial<BookData>) => {
+    setBookData({ ...bookData, ...data });
+  };
+  
+  const nextStep = () => {
+    if (currentStep < 3) {
+      setCurrentStep(currentStep + 1);
+    } else {
+      console.log('Publishing book:', bookData);
+      alert("Book published successfully!");
+    }
+  };
+
+  const prevStep = () => {
+    if (currentStep > 1) {
+      setCurrentStep(currentStep - 1);
+    }
+  };
+
+  type BookData = {
+    coverImage: string;
+    bookTitle: string;
+    subtitle: string;
+    language: string;
+    isbn: string;
+    manuscript: string;
+    bonusContent: string;
+    authorName: string;
+    genre: string[];
+    tags: string[];
+    description: string;
+    copiesCount: number;
+    priceUSDC: number;
+    priceSTRK: number;
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8 px-4">
+      <div className="flex justify-center mb-8">
+        <div className="flex items-center w-full max-w-3xl">
+          <div className={`flex flex-col items-center ${currentStep >= 1 ? 'text-blue-500' : 'text-gray-400'}`}>
+            <div className={`w-8 h-8 rounded-full flex items-center justify-center ${currentStep >= 1 ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}>
+              1
+            </div>
+            <span className="text-sm mt-1">Book Content</span>
+          </div>
+          <div className={`flex-1 h-0.5 ${currentStep >= 2 ? 'bg-blue-500' : 'bg-gray-200'}`}></div>
+          <div className={`flex flex-col items-center ${currentStep >= 2 ? 'text-blue-500' : 'text-gray-400'}`}>
+            <div className={`w-8 h-8 rounded-full flex items-center justify-center ${currentStep >= 2 ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}>
+              2
+            </div>
+            <span className="text-sm mt-1">Book Details</span>
+          </div>
+          <div className={`flex-1 h-0.5 ${currentStep >= 3 ? 'bg-blue-500' : 'bg-gray-200'}`}></div>
+          <div className={`flex flex-col items-center ${currentStep >= 3 ? 'text-blue-500' : 'text-gray-400'}`}>
+            <div className={`w-8 h-8 rounded-full flex items-center justify-center ${currentStep >= 3 ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}>
+              3
+            </div>
+            <span className="text-sm mt-1">Pricing</span>
+          </div>
+        </div>
+      </div>
+
+      {currentStep === 1 && (
+        <BookContent
+          bookData={bookData}
+          updateBookData={updateBookData}
+          nextStep={nextStep}
+        />
+      )}
+
+      {currentStep === 2 && (
+        <BookDetails
+          bookData={bookData}
+          updateBookData={updateBookData}
+          nextStep={nextStep}
+          prevStep={prevStep}
+        />
+      )}
+
+      {currentStep === 3 && (
+        <Pricing
+          bookData={bookData}
+          updateBookData={updateBookData}
+          prevStep={prevStep}
+          publishBook={nextStep}
+        />
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/writers/manage-content/StepIndicator.tsx b/src/app/writers/manage-content/StepIndicator.tsx
new file mode 100644
index 0000000..c410bb6
--- /dev/null
+++ b/src/app/writers/manage-content/StepIndicator.tsx
@@ -0,0 +1,121 @@
+import * as React from "react";
+import Box from "@mui/material/Box";
+import Stepper from "@mui/material/Stepper";
+import Step from "@mui/material/Step";
+import StepLabel from "@mui/material/StepLabel";
+import { Check } from "lucide-react";
+import { styled } from "@mui/material/styles";
+import StepConnector, {
+  stepConnectorClasses,
+} from "@mui/material/StepConnector";
+
+// Custom connector styling
+const CustomConnector = styled(StepConnector)(({ theme }) => ({
+  [`&.${stepConnectorClasses.alternativeLabel}`]: {
+    top: 20,
+    left: "calc(-50% + 20px)",
+    right: "calc(50% + 20px)",
+  },
+  [`&.${stepConnectorClasses.active}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
+      borderColor: "#096cff",
+    },
+  },
+  [`&.${stepConnectorClasses.completed}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
+      borderColor: "#096cff",
+    },
+  },
+  [`& .${stepConnectorClasses.line}`]: {
+    borderColor:
+      theme.palette.mode === "dark" ? theme.palette.grey[800] : "#eaeaf0",
+    borderTopWidth: 2,
+    borderRadius: 1,
+  },
+}));
+
+// Custom step icon
+interface CustomStepIconProps {
+  active: boolean;
+  completed: boolean;
+  icon: React.ReactNode;
+}
+
+const CustomStepIcon: React.FC<CustomStepIconProps> = ({
+  active,
+  completed,
+  icon,
+}) => {
+  return (
+    <div
+      className={`w-10 h-10 rounded-full flex items-center justify-center border-2 transition-all duration-300 ${
+        active || completed
+          ? "bg-[#096cff] text-white border-[#096cff]"
+          : "bg-white text-gray-500 border-gray-300"
+      }`}
+    >
+      {completed ? <Check size={16} /> : icon}
+    </div>
+  );
+};
+
+// Custom step label styling
+const CustomStepLabel = styled(StepLabel)(({ theme }) => ({
+  "& .MuiStepLabel-label": {
+    marginTop: 8,
+    fontSize: 14,
+    "&.Mui-active": {
+      color: theme.palette.text.primary,
+    },
+    "&.Mui-completed": {
+      color: theme.palette.text.primary,
+    },
+  },
+}));
+
+interface StepIndicatorProps {
+  currentStep: number;
+}
+
+const StepIndicator: React.FC<StepIndicatorProps> = ({ currentStep }) => {
+  const steps = [
+    { number: 1, title: "Book Content" },
+    { number: 2, title: "Book Details" },
+    { number: 3, title: "Pricing" },
+  ];
+
+  return (
+    <Box
+      sx={{
+        width: "100%",
+        margin: "0 auto",
+        padding: "0px 0",
+      }}
+    >
+      <Stepper
+        activeStep={currentStep - 1} // MUI Stepper is 0-indexed, so adjust accordingly
+        alternativeLabel
+        connector={<CustomConnector />}
+        sx={{ width: "100%" }}
+      >
+        {steps.map((step) => (
+          <Step key={step.number}>
+            <CustomStepLabel
+              StepIconComponent={(props) => (
+                <CustomStepIcon
+                  active={props.active ?? false}
+                  completed={props.completed ?? false}
+                  icon={step.number}
+                />
+              )}
+            >
+              {step.title}
+            </CustomStepLabel>
+          </Step>
+        ))}
+      </Stepper>
+    </Box>
+  );
+};
+
+export default StepIndicator;
diff --git a/src/app/writer-dashboard/manage-content/SuccessModal.tsx b/src/app/writers/manage-content/SuccessModal.tsx
similarity index 100%
rename from src/app/writer-dashboard/manage-content/SuccessModal.tsx
rename to src/app/writers/manage-content/SuccessModal.tsx
diff --git a/src/app/writer-dashboard/manage-content/book-preview-modal.tsx b/src/app/writers/manage-content/book-preview-modal.tsx
similarity index 100%
rename from src/app/writer-dashboard/manage-content/book-preview-modal.tsx
rename to src/app/writers/manage-content/book-preview-modal.tsx
diff --git a/src/app/writers/manage-content/example.tsx b/src/app/writers/manage-content/example.tsx
new file mode 100644
index 0000000..5b3f5e1
--- /dev/null
+++ b/src/app/writers/manage-content/example.tsx
@@ -0,0 +1,17 @@
+// pages/StepperExample.tsx
+import React from "react";
+import { ProgressStepper } from "./ProgressStepper";
+
+const steps = [
+  { label: "Book Content" },
+  { label: "Book Details" },
+  { label: "Pricing" },
+];
+
+export default function StepperExample() {
+  return (
+    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
+      <ProgressStepper steps={steps} currentStep={2} />
+    </div>
+  );
+}
diff --git a/src/app/writers/manage-content/loading.tsx b/src/app/writers/manage-content/loading.tsx
new file mode 100644
index 0000000..4349ac3
--- /dev/null
+++ b/src/app/writers/manage-content/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null;
+}
diff --git a/src/app/writers/manage-content/page.tsx b/src/app/writers/manage-content/page.tsx
new file mode 100644
index 0000000..76200b7
--- /dev/null
+++ b/src/app/writers/manage-content/page.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+import { Header } from "@/components/dashboard/header";
+import ManageContent from "./Manage-content";
+
+export default function Home() {
+  return (
+    <div>
+      <Header title="Manage Content" />
+
+      <div className="p-6 mt-16">
+        <ManageContent />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/writer-dashboard/notifications/notification-detail.tsx b/src/app/writers/notifications/notification-detail.tsx
similarity index 100%
rename from src/app/writer-dashboard/notifications/notification-detail.tsx
rename to src/app/writers/notifications/notification-detail.tsx
diff --git a/src/app/writers/notifications/page.tsx b/src/app/writers/notifications/page.tsx
new file mode 100644
index 0000000..6efd147
--- /dev/null
+++ b/src/app/writers/notifications/page.tsx
@@ -0,0 +1,192 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { CheckCheck } from "lucide-react";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Header } from "@/components/dashboard/header";
+import { NotificationDetailPage } from "./notification-detail";
+
+const notifications = [
+  {
+    id: 1,
+    title: "New updates for Writers",
+    time: "12:18 PM",
+    date: "Today",
+    isNew: true,
+    content: "Step up your writing with our latest update",
+  },
+  {
+    id: 2,
+    title: "New updates for Writers",
+    time: "12:18 PM",
+    date: "Today",
+    isNew: true,
+    content: "Step up your writing with our latest update",
+  },
+  {
+    id: 3,
+    title: "New updates for Writers",
+    time: "12:18 PM",
+    date: "Yesterday",
+    isNew: true,
+    content: "Step up your writing with our latest update",
+  },
+  {
+    id: 4,
+    title: "New updates for Writers",
+    time: "12:18 PM",
+    date: "Yesterday",
+    isNew: true,
+    content: "Step up your writing with our latest update",
+  },
+  {
+    id: 5,
+    title: "New updates for Writers",
+    time: "12:18 PM",
+    date: "Yesterday",
+    isNew: true,
+    content: "Step up your writing with our latest update",
+  },
+  {
+    id: 6,
+    title: "New updates for Writers",
+    time: "12:18 PM",
+    date: "12 April, 2025",
+    isNew: true,
+    content: "Step up your writing with our latest update",
+  },
+];
+
+function NotificationPage() {
+  const [filter, setFilter] = useState("");
+  const [viewNotf, setViewNotf] = useState(false);
+
+  const groupedNotifications = notifications.reduce((acc, notification) => {
+    if (!acc[notification.date]) {
+      acc[notification.date] = [];
+    }
+    acc[notification.date].push(notification);
+    return acc;
+  }, {} as Record<string, typeof notifications>);
+
+  function backhandler() {
+    setViewNotf(false);
+  }
+  function viewNotificationhandler() {
+    setViewNotf(true);
+  }
+  if (viewNotf) {
+    return <NotificationDetailPage back={backhandler} />;
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <Header title="Notification" />
+
+      {/* Content */}
+      <div className="flex-1 p-4 lg:p-6 overflow-auto mt-16">
+        <div className="bg-white rounded-lg border border-gray-200">
+          {/* Header */}
+          <div className="p-4 lg:p-6 border-b border-gray-200">
+            <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-end justify-between">
+              <div className="flex flex-col gap-2">
+                <div className="flex items-center gap-2 text-[#B0B0B0]">
+                  <h2 className="text-lg font-medium">All Notifications</h2> (7)
+                </div>
+                <div className="flex items-center gap-4">
+                  <Select value={filter} onValueChange={setFilter}>
+                    <SelectTrigger className="w-32 bg-[#F6F6F6] shadow-none rounded-[8px] border-none">
+                      <SelectValue placeholder="Filter by" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="all">All</SelectItem>
+                      <SelectItem value="unread">Unread</SelectItem>
+                      <SelectItem value="read">Read</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+              <Button variant="ghost" className="text-[#5D5D5D] bg-[#F6F6F6]">
+                <CheckCheck className="w-4 h-4 mr-2" />
+                Mark all as read
+              </Button>
+            </div>
+          </div>
+
+          {/* Notifications */}
+          <div className="divide-y divide-gray-200">
+            {Object.entries(groupedNotifications).map(
+              ([date, dateNotifications]) => (
+                <div key={date}>
+                  {date !== "Today" && (
+                    <div className="px-4 lg:px-6 py-3 bg-gray-50">
+                      <p className="text-sm font-medium text-gray-600">
+                        {date}
+                      </p>
+                    </div>
+                  )}
+                  {date === "Today" && (
+                    <div className="px-4 lg:px-6 py-3">
+                      <p className="text-sm font-medium text-gray-600">
+                        {date}
+                      </p>
+                    </div>
+                  )}
+                  {dateNotifications.map((notification) => (
+                    <div
+                      key={notification.id}
+                      className="p-4 lg:p-6 hover:bg-gray-50"
+                    >
+                      <div className="flex items-start gap-4">
+                        <Avatar className="w-10 h-10 bg-gray-200">
+                          <AvatarFallback></AvatarFallback>
+                        </Avatar>
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-2 mb-1">
+                            <h3 className="font-medium text-gray-900">
+                              {notification.title}
+                            </h3>
+                            {notification.isNew && (
+                              <Badge
+                                variant="destructive"
+                                className="text-xs text-[#ED4D48] bg-[#ED4D4833]"
+                              >
+                                New
+                              </Badge>
+                            )}
+                          </div>
+                          <p className="text-sm text-gray-500">
+                            {notification.time}
+                          </p>
+                        </div>
+                        <Button
+                          variant="link"
+                          className="text-blue-600"
+                          onClick={viewNotificationhandler}
+                        >
+                          View Details
+                        </Button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default NotificationPage;
diff --git a/src/app/writers/page.tsx b/src/app/writers/page.tsx
new file mode 100644
index 0000000..7e4322d
--- /dev/null
+++ b/src/app/writers/page.tsx
@@ -0,0 +1,67 @@
+import { BookOpen } from "lucide-react";
+import { Header } from "@/components/dashboard/header";
+
+export default function Dashboard() {
+  return (
+    <div>
+      <Header title="Dashboard" />
+      <div className="p-6 mt-16">
+        <div className="bg-white p-6 rounded-lg border border-[#e7e7e7] mb-8">
+          <h3 className="font-semibold mb-4">Monthly Sales</h3>
+          <div className="h-64 bg-[#f6f6f6] rounded-lg flex items-center justify-center">
+            <p className="text-[#5d5d5d]">
+              Sales chart would be displayed here
+            </p>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-6">
+          <div className="bg-white p-6 rounded-lg border border-[#e7e7e7]">
+            <h3 className="font-semibold mb-4">Recent Activity</h3>
+            <div className="space-y-4">
+              {[1, 2, 3, 4].map((item) => (
+                <div
+                  key={item}
+                  className="flex items-center gap-3 p-3 bg-[#f6f6f6] rounded-lg"
+                >
+                  <div className="w-10 h-10 rounded-full bg-[#edf7ff] flex items-center justify-center">
+                    <BookOpen className="text-[#096cff]" size={18} />
+                  </div>
+                  <div>
+                    <div className="font-medium">New book published</div>
+                    <div className="text-sm text-[#5d5d5d]">
+                      Native Invisibility - 2 hours ago
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="bg-white p-6 rounded-lg border border-[#e7e7e7]">
+            <h3 className="font-semibold mb-4">Top Performing Books</h3>
+            <div className="space-y-4">
+              {[1, 2, 3, 4].map((item) => (
+                <div
+                  key={item}
+                  className="flex items-center justify-between p-3 bg-[#f6f6f6] rounded-lg"
+                >
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 bg-white rounded-md"></div>
+                    <div>
+                      <div className="font-medium">Native Invisibility</div>
+                      <div className="text-sm text-[#5d5d5d]">
+                        124 sales this month
+                      </div>
+                    </div>
+                  </div>
+                  <div className="font-medium">$1,240</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/writers/profile/component/ProfileForm.tsx b/src/app/writers/profile/component/ProfileForm.tsx
new file mode 100644
index 0000000..723e893
--- /dev/null
+++ b/src/app/writers/profile/component/ProfileForm.tsx
@@ -0,0 +1,203 @@
+'use client';
+
+import { useState, useRef, ChangeEvent } from "react";
+import Image from "next/image";
+
+interface ProfileFormData {
+    firstName: string;
+    lastName: string;
+    pseudonym: string;
+    email: string;
+    bio: string;
+    profilePicture: string | null;
+  }
+
+export const ProfileForm = () => {
+
+
+  const [formData, setFormData] = useState<ProfileFormData>({
+    firstName: "Joseph",
+    lastName: "Paul",
+    pseudonym: "Joe Paul",
+    email: "example@gmail.com",
+    bio: "",
+    profilePicture: null,
+  });
+
+  const [preview, setPreview] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleInputChange = (
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleImageUpload = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = () => {
+      setPreview(reader.result as string);
+      setFormData((prev) => ({
+        ...prev,
+        profilePicture: reader.result as string,
+      }));
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const triggerFileInput = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Form submitted:", formData);
+
+  };
+
+    return (
+        <div className=" mt-5 bg-geen-200 p-5 w-full mx-auto rounded-lg shadow-sm">
+        <form onSubmit={handleSubmit} className="">
+          <div className="flex flex-col items-center mb-8">
+            <div className="relative mb-4">
+              <div className="w-32 h-32 rounded-full overflow-hidden bg-yellow-400">
+                {preview ? (
+                  <Image
+                    src={preview}
+                    alt="Profile Preview"
+                    width={128}
+                    height={128}
+                    className="object-cover w-full h-full"
+                  />
+                ) : (
+                  <div className="w-full h-full flex items-center justify-center bg-yellow-400">
+                    {/* Placeholder silhouette if no image */}
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="h-16 w-16 text-yellow-600"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+                      />
+                    </svg>
+                  </div>
+                )}
+              </div>
+              <input
+                type="file"
+                ref={fileInputRef}
+                onChange={handleImageUpload}
+                accept="image/*"
+                className="hidden"
+              />
+            </div>
+            <button
+              type="button"
+              onClick={triggerFileInput}
+              className="py-2 px-4 bg-blue-50 text-blue-600 rounded-md hover:bg-blue-100 transition-colors"
+            >
+              Upload a Profile Picture
+            </button>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div>
+              <label htmlFor="firstName" className="block text-gray-700 mb-2">
+                First Name
+              </label>
+              <input
+                type="text"
+                id="firstName"
+                name="firstName"
+                value={formData.firstName}
+                onChange={handleInputChange}
+                className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                placeholder="Enter your first name"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="lastName" className="block text-gray-700 mb-2">
+                Last Name
+              </label>
+              <input
+                type="text"
+                id="lastName"
+                name="lastName"
+                value={formData.lastName}
+                onChange={handleInputChange}
+                className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                placeholder="Enter your last name"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="pseudonym" className="block text-gray-700 mb-2">
+                Pseudonym (Optional)
+              </label>
+              <input
+                type="text"
+                id="pseudonym"
+                name="pseudonym"
+                value={formData.pseudonym}
+                onChange={handleInputChange}
+                className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                placeholder="Enter your pseudonym"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="email" className="block text-gray-700 mb-2">
+                Email Address
+              </label>
+              <input
+                type="email"
+                id="email"
+                name="email"
+                value={formData.email}
+                onChange={handleInputChange}
+                className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                placeholder="Enter your email address"
+              />
+            </div>
+          </div>
+
+          <div className="mt-6">
+            <label htmlFor="bio" className="block text-gray-700 mb-2">
+              Bio
+            </label>
+            <textarea
+              id="bio"
+              name="bio"
+              value={formData.bio}
+              onChange={handleInputChange}
+              className="w-full p-3 border border-gray-300 rounded-md h-40 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              placeholder="Enter your bio"
+            />
+          </div>
+
+          <div className="mt-8">
+            <button
+              type="submit"
+              className="w-full md:w-auto py-3 px-[5rem] bg-[#EDF7FF] text-black rounded-md hover:bg-blue-100 transition-colors"
+            >
+              Edit Profile
+            </button>
+          </div>
+        </form>
+      </div>
+    )
+}
\ No newline at end of file
diff --git a/src/app/writers/profile/component/Social.tsx b/src/app/writers/profile/component/Social.tsx
new file mode 100644
index 0000000..6500552
--- /dev/null
+++ b/src/app/writers/profile/component/Social.tsx
@@ -0,0 +1,116 @@
+
+
+import React, { useState } from 'react';
+
+export default function UpdateSocialLinks() {
+  const [socialLinks, setSocialLinks] = useState({
+    facebook: '',
+    instagram: '',
+    twitter: '',
+    linkedin: ''
+  });
+
+  const handleChange = (platform: keyof typeof socialLinks) => (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSocialLinks({ ...socialLinks, [platform]: e.target.value });
+  };
+
+  const handleSubmit = () => {
+    console.log('Updated social links:', socialLinks);
+  };
+
+  const handleCancel = () => {
+    setSocialLinks({
+      facebook: '',
+      instagram: '',
+      twitter: '',
+      linkedin: ''
+    });
+  };
+
+  return (
+    <div className="flex justify-center items-center  bg-gray-50 p-4">
+      <div className="w-full  bg-white rounded-lg shadow-md p-6">
+        <h1 className="text-2xl font-semibold text-gray-700 mb-6">Update Social Links</h1>
+        
+        <div>
+          <div className="grid grid-cols-1 md:flex md:flex-wrap md:justify-between gap-4 mb-6">
+            {/* Facebook */}
+            <div className="space-y-2 w-full md:w-[48%]">
+              <label htmlFor="facebook" className="block text-sm font-medium text-gray-700">
+                Facebook
+              </label>
+              <input
+                id="facebook"
+                type="text"
+                placeholder="Enter Profile Link"
+                value={socialLinks.facebook}
+                onChange={handleChange('facebook')}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+            
+            {/* Instagram */}
+            <div className="space-y-2 w-full md:w-[48%]">
+              <label htmlFor="instagram" className="block text-sm font-medium text-gray-700">
+                Instagram
+              </label>
+              <input
+                id="instagram"
+                type="text"
+                placeholder="Enter Profile Link"
+                value={socialLinks.instagram}
+                onChange={handleChange('instagram')}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+            
+            {/* X (Twitter) */}
+            <div className="space-y-2 w-full md:w-[48%]">
+              <label htmlFor="twitter" className="block text-sm font-medium text-gray-700">
+                X
+              </label>
+              <input
+                id="twitter"
+                type="text"
+                placeholder="Enter Profile Link"
+                value={socialLinks.twitter}
+                onChange={handleChange('twitter')}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+            
+            {/* LinkedIn */}
+            <div className="space-y-2 w-full md:w-[48%]">
+              <label htmlFor="linkedin" className="block text-sm font-medium text-gray-700">
+                Linked In
+              </label>
+              <input
+                id="linkedin"
+                type="text"
+                placeholder="Enter Profile Link"
+                value={socialLinks.linkedin}
+                onChange={handleChange('linkedin')}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+          </div>
+          
+          <div className="flex flex-col sm:flex-row gap-3 mt-8">
+            <button
+              onClick={handleCancel}
+              className="w-full sm:w-1/2 py-2 px-4 bg-gray-100 text-gray-800 font-medium rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSubmit}
+              className="w-full sm:w-1/2 py-2 px-4 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
+            >
+              Save Change
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/writers/profile/component/UpdatePasswordForm.tsx b/src/app/writers/profile/component/UpdatePasswordForm.tsx
new file mode 100644
index 0000000..49eb74c
--- /dev/null
+++ b/src/app/writers/profile/component/UpdatePasswordForm.tsx
@@ -0,0 +1,111 @@
+
+
+'use client'
+
+import { useState } from 'react'
+
+const UpdatePasswordForm = () => {
+  const [oldPassword, setOldPassword] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [errors, setErrors] = useState<{ [key: string]: string }>({})
+  const [success, setSuccess] = useState(false)
+
+  const validate = () => {
+    const newErrors: { [key: string]: string } = {}
+
+    if (!oldPassword) newErrors.oldPassword = 'Old password is required.'
+    if (!newPassword) newErrors.newPassword = 'New password is required.'
+    if (newPassword.length < 6) newErrors.newPassword = 'New password must be at least 6 characters.'
+    if (newPassword !== confirmPassword) newErrors.confirmPassword = 'Passwords do not match.'
+
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (validate()) {
+      console.log({ oldPassword, newPassword })
+      setSuccess(true)
+    } else {
+      setSuccess(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="bg-white p-6 rounded-xl shadow-sm max-w-2xl mx-auto">
+      <h2 className="text-xl font-semibold mb-4">Update Password</h2>
+
+      <div className="mb-4">
+        <label className="block text-sm font-medium text-gray-700">Old Password</label>
+        <input
+          type="password"
+          placeholder="Enter Old Password"
+          value={oldPassword}
+          onChange={(e) => setOldPassword(e.target.value)}
+          className="w-full mt-1 px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+        {errors.oldPassword && <p className="text-sm text-red-500 mt-1">{errors.oldPassword}</p>}
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+        <div>
+          <label className="block text-sm font-medium text-gray-700">New Password</label>
+          <input
+            type="password"
+            placeholder="Enter New Password"
+            value={newPassword}
+            onChange={(e) => setNewPassword(e.target.value)}
+            className="w-full mt-1 px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+          {errors.newPassword && <p className="text-sm text-red-500 mt-1">{errors.newPassword}</p>}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Confirm Password</label>
+          <input
+            type="password"
+            placeholder="Confirm Password"
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            className="w-full mt-1 px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+          {errors.confirmPassword && (
+            <p className="text-sm text-red-500 mt-1">{errors.confirmPassword}</p>
+          )}
+        </div>
+      </div>
+
+      {success && (
+        <div className="mb-4 text-green-600 font-medium">
+          Password updated successfully!
+        </div>
+      )}
+
+      <div className="flex flex-col md:flex-row gap-4">
+        <button
+          type="button"
+          onClick={() => {
+            setOldPassword('')
+            setNewPassword('')
+            setConfirmPassword('')
+            setErrors({})
+            setSuccess(false)
+          }}
+          className="flex-1 bg-blue-50 text-blue-800 py-3 rounded-md text-sm font-medium hover:bg-blue-100"
+        >
+          Cancel
+        </button>
+        <button
+          type="submit"
+          className="flex-1 bg-blue-600 text-white py-3 rounded-md text-sm font-medium hover:bg-blue-700"
+        >
+          Save Change
+        </button>
+      </div>
+    </form>
+  )
+}
+
+export default UpdatePasswordForm
diff --git a/src/app/writers/profile/component/genre.tsx b/src/app/writers/profile/component/genre.tsx
new file mode 100644
index 0000000..6a4e55e
--- /dev/null
+++ b/src/app/writers/profile/component/genre.tsx
@@ -0,0 +1,74 @@
+
+
+'use client'
+
+import { useState } from 'react'
+
+const allGenres = ['Fiction', 'Drama', 'Horror', 'Comedy', 'Sci-Fi', 'Fantasy', 'Romance']
+
+const GenreSelector = () => {
+  const [selectedGenres, setSelectedGenres] = useState<string[]>([])
+
+  const handleSelect = (genre: string) => {
+    if (!selectedGenres.includes(genre)) {
+      setSelectedGenres([...selectedGenres, genre])
+    }
+  }
+
+  const removeGenre = (genre: string) => {
+    setSelectedGenres(selectedGenres.filter((g) => g !== genre))
+  }
+
+  return (
+    <div className="bg-white p-6 rounded-xl shadow-sm max-w-2xl w-full mx-auto">
+      <label className="block text-sm font-medium text-gray-700 mb-2">
+        Genre specialization(s)
+      </label>
+
+      <div className="relative mb-4">
+        <select
+          className="w-full px-4 py-2 border border-gray-300 rounded-md appearance-none bg-white text-gray-700"
+          onChange={(e) => handleSelect(e.target.value)}
+        >
+          <option value="">Genres</option>
+          {allGenres.map((genre) => (
+            <option key={genre} value={genre}>
+              {genre}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <div className="flex flex-wrap gap-2 mb-6">
+        {selectedGenres.map((genre) => (
+          <span
+            key={genre}
+            className="bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm flex items-center gap-1"
+          >
+            {genre}
+            <button onClick={() => removeGenre(genre)} className="text-blue-500 hover:text-blue-800">
+              ×
+            </button>
+          </span>
+        ))}
+      </div>
+
+      <div className="flex flex-col md:flex-row gap-4">
+        <button
+          type="button"
+          className="flex-1 bg-blue-50 text-blue-800 py-3 rounded-md text-sm font-medium hover:bg-blue-100"
+        >
+          Cancel
+        </button>
+        <button
+          type="submit"
+          className="flex-1 bg-blue-600 text-white py-3 rounded-md text-sm font-medium hover:bg-blue-700"
+        >
+          Save Change
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default GenreSelector
diff --git a/src/app/writers/profile/component/profileHeader.tsx b/src/app/writers/profile/component/profileHeader.tsx
new file mode 100644
index 0000000..cc53047
--- /dev/null
+++ b/src/app/writers/profile/component/profileHeader.tsx
@@ -0,0 +1,41 @@
+import { Bell } from "lucide-react";
+import Image from "next/image";
+import user from "../../../../../public/user1.svg";
+import check from "../../../public/../../../public/check.svg";
+
+interface HeaderProps {
+  title: string;
+}
+
+export function ProfileHeader() {
+  return (
+    <header className="bg-[#F6F6F6] p-4 border-b border-[#F6F6F6] flex items-center justify-end overflow-hidden ">
+      
+
+      <div className="flex items-center gap-4 space-x-3">
+        <div className="relative">
+          <Bell className="text-[#5d5d5d] cursor-pointer" size={20} />
+          <div className="absolute -top-1 -right-1 w-2 h-2 bg-[#ff5c5c] rounded-full"></div>
+        </div>
+        <div className="flex items-center gap-2 border p-1 border-[#E7E7E7] rounded">
+          <div className="w-8 h-8 rounded-sm bg-[#dba736] flex items-center justify-center overflow-hidden">
+            <Image
+              src={user}
+              alt="Profile"
+              width={32}
+              height={32}
+              className="object-cover"
+            />
+          </div>
+          <div className="text-sm">
+            <div className="flex items-center gap-1">
+              <span className="font-medium">Joseph Yanum</span>
+              <Image src={check} alt="Profile" className="object-cover" />
+            </div>
+            <span className="text-[#888888] text-xs">@joeyyanum</span>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/src/app/writer-dashboard/profile/component/profilesidebar.tsx b/src/app/writers/profile/component/profilesidebar.tsx
similarity index 100%
rename from src/app/writer-dashboard/profile/component/profilesidebar.tsx
rename to src/app/writers/profile/component/profilesidebar.tsx
diff --git a/src/app/writers/profile/genre/page.tsx b/src/app/writers/profile/genre/page.tsx
new file mode 100644
index 0000000..3ae610a
--- /dev/null
+++ b/src/app/writers/profile/genre/page.tsx
@@ -0,0 +1,12 @@
+import GenreSelector from "../component/genre";
+
+
+
+function GenrePage() {
+  return (
+    <div className="flex flex-col lg:flex-row mt-20">
+  <GenreSelector />
+  </div>
+  );
+}
+export default GenrePage;
diff --git a/src/app/writers/profile/layout.tsx b/src/app/writers/profile/layout.tsx
new file mode 100644
index 0000000..aba9fef
--- /dev/null
+++ b/src/app/writers/profile/layout.tsx
@@ -0,0 +1,20 @@
+import type React from "react";
+import "@/app/globals.css";
+import { ProfileSidebar } from "./component/profilesidebar";
+import { Header } from "@/components/dashboard/header";
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <Header title="Profile" />
+      <div className="flex flex-col lg:flex-row min-h-screen mt-16">
+        <ProfileSidebar />
+        <div className=" w-full">{children}</div>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/writers/profile/page.tsx b/src/app/writers/profile/page.tsx
new file mode 100644
index 0000000..c9f6e08
--- /dev/null
+++ b/src/app/writers/profile/page.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+import { ProfileForm } from "./component/ProfileForm";
+
+function ProfilePage() {
+  return (
+    <main className="flex flex-col lg:flex-row min-h-screen ">
+
+      <div className="flex-1 p-4 lg:p-8 w-full ">
+        <ProfileForm />
+      </div>
+    </main>
+  );
+}
+export default ProfilePage;
diff --git a/src/app/writers/profile/password/page.tsx b/src/app/writers/profile/password/page.tsx
new file mode 100644
index 0000000..1b12d17
--- /dev/null
+++ b/src/app/writers/profile/password/page.tsx
@@ -0,0 +1,11 @@
+import UpdatePasswordForm from "../component/UpdatePasswordForm";
+
+
+function PasswordPage() {
+  return (
+    <div className="flex flex-col lg:flex-row  mt-20">
+     < UpdatePasswordForm />
+    </div>
+  );
+}
+ export default PasswordPage;
\ No newline at end of file
diff --git a/src/app/writers/profile/social/page.tsx b/src/app/writers/profile/social/page.tsx
new file mode 100644
index 0000000..13391aa
--- /dev/null
+++ b/src/app/writers/profile/social/page.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import UpdateSocialLinks from "../component/Social";
+
+
+function SocialPage() {
+  return (
+    <div className="flex flex-col lg:flex-row mt-10">
+   <UpdateSocialLinks />
+  </div>
+  );
+}
+export default SocialPage;
\ No newline at end of file
diff --git a/src/components/ dashboard-earnings/Chart.tsx b/src/components/dashboard-earnings/Chart.tsx
similarity index 100%
rename from src/components/ dashboard-earnings/Chart.tsx
rename to src/components/dashboard-earnings/Chart.tsx
diff --git a/src/components/ dashboard-earnings/EarningSummary.tsx b/src/components/dashboard-earnings/EarningSummary.tsx
similarity index 100%
rename from src/components/ dashboard-earnings/EarningSummary.tsx
rename to src/components/dashboard-earnings/EarningSummary.tsx
diff --git a/src/components/ dashboard-earnings/FilterBar.tsx b/src/components/dashboard-earnings/FilterBar.tsx
similarity index 100%
rename from src/components/ dashboard-earnings/FilterBar.tsx
rename to src/components/dashboard-earnings/FilterBar.tsx
diff --git a/src/components/ dashboard-earnings/LinkWallet.tsx b/src/components/dashboard-earnings/LinkWallet.tsx
similarity index 100%
rename from src/components/ dashboard-earnings/LinkWallet.tsx
rename to src/components/dashboard-earnings/LinkWallet.tsx
diff --git a/src/components/ dashboard-earnings/LoanRow.tsx b/src/components/dashboard-earnings/LoanRow.tsx
similarity index 100%
rename from src/components/ dashboard-earnings/LoanRow.tsx
rename to src/components/dashboard-earnings/LoanRow.tsx
diff --git a/src/components/ dashboard-earnings/MobileLoanRow.tsx b/src/components/dashboard-earnings/MobileLoanRow.tsx
similarity index 100%
rename from src/components/ dashboard-earnings/MobileLoanRow.tsx
rename to src/components/dashboard-earnings/MobileLoanRow.tsx
diff --git a/src/components/ dashboard-earnings/MobileTable.tsx b/src/components/dashboard-earnings/MobileTable.tsx
similarity index 100%
rename from src/components/ dashboard-earnings/MobileTable.tsx
rename to src/components/dashboard-earnings/MobileTable.tsx
diff --git a/src/components/ dashboard-earnings/RequestPaymentModal.tsx b/src/components/dashboard-earnings/RequestPaymentModal.tsx
similarity index 100%
rename from src/components/ dashboard-earnings/RequestPaymentModal.tsx
rename to src/components/dashboard-earnings/RequestPaymentModal.tsx
diff --git a/src/components/ dashboard-earnings/RevenueBreakdown.tsx b/src/components/dashboard-earnings/RevenueBreakdown.tsx
similarity index 100%
rename from src/components/ dashboard-earnings/RevenueBreakdown.tsx
rename to src/components/dashboard-earnings/RevenueBreakdown.tsx
diff --git a/src/components/ dashboard-earnings/TransactionHistory.tsx b/src/components/dashboard-earnings/TransactionHistory.tsx
similarity index 100%
rename from src/components/ dashboard-earnings/TransactionHistory.tsx
rename to src/components/dashboard-earnings/TransactionHistory.tsx
diff --git a/src/components/ dashboard-earnings/TransactionModalButton.tsx b/src/components/dashboard-earnings/TransactionModalButton.tsx
similarity index 100%
rename from src/components/ dashboard-earnings/TransactionModalButton.tsx
rename to src/components/dashboard-earnings/TransactionModalButton.tsx
diff --git a/src/components/ dashboard-earnings/TransactionTable.tsx b/src/components/dashboard-earnings/TransactionTable.tsx
similarity index 100%
rename from src/components/ dashboard-earnings/TransactionTable.tsx
rename to src/components/dashboard-earnings/TransactionTable.tsx
diff --git a/src/components/dashboard/sidebar.tsx b/src/components/dashboard/sidebar.tsx
index 5d86469..1b06621 100644
--- a/src/components/dashboard/sidebar.tsx
+++ b/src/components/dashboard/sidebar.tsx
@@ -6,7 +6,7 @@ import {
   DollarSign,
   LayoutDashboard,
   LineChart,
-  LogOut,
+  // LogOut,
   User,
   MessageCircle
 } from "lucide-react";
@@ -20,38 +20,38 @@ export function Sidebar() {
     {
       icon: LayoutDashboard,
       label: "Dashboard",
-      href: "/dashboard",
+      href: "/dashboard/writers",
     },
     {
       icon: BookOpen,
       label: "Manage Content",
-      href: "/writer-dashboard/manage-content",
+      href: "/dashboard/writers/manage-content",
     },
     {
       icon: DollarSign,
       label: "Earnings",
-      href: "/writer-dashboard/earnings",
+      href: "/dashboard/writers/earnings",
     },
     {
       icon: LineChart,
       label: "Analytics panel",
-      href: "/writer-dashboard/analytics",
+      href: "/dashboard/writers/analytics",
     },
     {
       icon: MessageCircle,
       label: "Discussions & Clubs",
-      href: "/dashboard/discussions",
+      href: "/dashboard/writers/discussions-and-clubs",
     },
     {
       icon: Bell,
       label: "Notification",
-      href: "/writer-dashboard/notifications",
+      href: "/dashboard/writers/notifications",
       badge: 1,
     },
     {
       icon: User,
       label: "Profile",
-      href: "/writer-dashboard/profile",
+      href: "/dashboard/writers/profile",
     },
   ];
 
@@ -94,7 +94,7 @@ export function Sidebar() {
               </Link>
             </li>
           ))}
-          <li className="mt-8">
+          {/* <li className="mt-8">
             <Link
               href="/logout"
               className="flex items-center gap-3 p-3 text-[#5d5d5d] hover:bg-[#f6f6f6] rounded-md"
@@ -102,7 +102,7 @@ export function Sidebar() {
               <LogOut size={18} />
               <span>Sign Out</span>
             </Link>
-          </li>
+          </li> */}
         </ul>
       </nav>
     </div>

From c160422900bb079a6a5c885bdac57025d3f74462 Mon Sep 17 00:00:00 2001
From: ONEONUORA <monweebube44@gmail.com>
Date: Mon, 21 Jul 2025 22:29:56 -0700
Subject: [PATCH 2/3] add admin dashboard, SEO and refactor the Codebase

---
 package.json                                  |   1 +
 src/app/author-profile/[authorId]/page.tsx    |   5 -
 .../[bookId]/RelatedBooks.tsx                 |   0
 src/app/{books => author}/[bookId]/page.tsx   |   0
 src/app/author/analytics/page.tsx             |  12 -
 src/app/author/earnings/page.tsx              |  11 -
 src/app/author/publications/page.tsx          |  11 -
 src/app/books/page.tsx                        | 598 +++++++++++++
 src/app/books/read/[bookId]/page.tsx          |   5 -
 src/app/community/page.tsx                    |   5 -
 src/app/reader/discover/page.tsx              |   5 -
 src/app/reader/layout.tsx                     |  21 -
 src/app/reader/library/page.tsx               |   5 -
 src/app/reader/page.tsx                       |   5 -
 src/app/reader/ranking/page.tsx               |   5 -
 src/app/reader/subscription/page.tsx          |   5 -
 src/app/readers/components/book-modal.tsx     | 248 ------
 .../readers/components/book-reader-modal.tsx  | 267 ------
 src/app/readers/components/header-reader.tsx  |  50 --
 .../readers/components/reader-side-navbar.tsx | 108 ---
 .../discussions-and-clubs/ClubCard.tsx        |  99 ---
 .../discussions-and-clubs/[id]/page.tsx       | 191 ----
 .../components/AddGuest.tsx                   |  50 --
 .../components/ClubDetails.tsx                | 129 ---
 .../components/ClubDiscussion.tsx             | 209 -----
 .../components/ClubToolBar.tsx                |  53 --
 .../components/CreateEvent.tsx                | 116 ---
 .../components/Modal.tsx                      |  61 --
 .../components/ScheduleEvent.tsx              | 169 ----
 .../components/StartEvent.tsx                 |  44 -
 .../components/SuccessModal.tsx               |  53 --
 .../readers/discussions-and-clubs/page.tsx    | 171 ----
 src/app/readers/layout.tsx                    |  26 -
 src/app/readers/library/page.tsx              | 827 ------------------
 .../notifications/notification-detail.tsx     |  66 --
 src/app/readers/notifications/page.tsx        | 193 ----
 src/app/readers/page.tsx                      |  18 -
 src/app/readers/profile/following/page.tsx    | 138 ---
 src/app/readers/profile/layout.tsx            | 121 ---
 src/app/readers/profile/page.tsx              | 260 ------
 src/app/readers/profile/preferences/page.tsx  | 210 -----
 src/app/readers/profile/privacy/page.tsx      |  28 -
 src/app/readers/profile/sign-out/page.tsx     |  28 -
 .../readers/stats-and-achievements/page.tsx   | 151 ----
 src/app/readers/transactions/page.tsx         | 340 -------
 .../transactions/transaction-details.tsx      | 381 --------
 src/app/readers/wishlist/page.tsx             | 201 -----
 src/app/settings/page.tsx                     |   5 -
 src/app/waiting-room/page.tsx                 |   2 +-
 src/app/writers/analytics/page.tsx            |  26 -
 .../components/notification-detail.tsx        |  83 --
 src/app/writers/earnings/page.tsx             | 104 ---
 src/app/writers/feedback/page.tsx             |  12 -
 src/app/writers/layout.tsx                    |  18 -
 .../manage-content/BookContentStep.tsx        | 157 ----
 .../manage-content/BookCreationFlow.tsx       | 110 ---
 .../manage-content/BookDetailsStep.tsx        | 323 -------
 .../ContributorDetailsModal.tsx               |  76 --
 .../manage-content/ContributorTypeModal.tsx   |  53 --
 .../writers/manage-content/Manage-content.tsx | 520 -----------
 .../writers/manage-content/PreviewModal.tsx   | 170 ----
 .../writers/manage-content/PricingStep.tsx    | 209 -----
 .../manage-content/ProgressStepper.tsx        |  59 --
 .../manage-content/PublishTypeModal.tsx       | 108 ---
 .../manage-content/PublishingNft/Pricing.tsx  | 139 ---
 .../PublishingNft/bookContent.tsx             | 206 -----
 .../PublishingNft/bookDetail.tsx              | 130 ---
 .../manage-content/PublishingNft/genre.tsx    |  24 -
 .../manage-content/PublishingNft/page.tsx     | 118 ---
 .../writers/manage-content/StepIndicator.tsx  | 121 ---
 .../writers/manage-content/SuccessModal.tsx   |  48 -
 .../manage-content/book-preview-modal.tsx     | 206 -----
 src/app/writers/manage-content/example.tsx    |  17 -
 src/app/writers/manage-content/loading.tsx    |   3 -
 src/app/writers/manage-content/page.tsx       |  16 -
 .../notifications/notification-detail.tsx     |  66 --
 src/app/writers/notifications/page.tsx        | 192 ----
 src/app/writers/page.tsx                      |  67 --
 .../writers/profile/component/ProfileForm.tsx | 203 -----
 src/app/writers/profile/component/Social.tsx  | 116 ---
 .../profile/component/UpdatePasswordForm.tsx  | 111 ---
 src/app/writers/profile/component/genre.tsx   |  74 --
 .../profile/component/profileHeader.tsx       |  41 -
 .../profile/component/profilesidebar.tsx      |  63 --
 src/app/writers/profile/genre/page.tsx        |  12 -
 src/app/writers/profile/layout.tsx            |  20 -
 src/app/writers/profile/page.tsx              |  15 -
 src/app/writers/profile/password/page.tsx     |  11 -
 src/app/writers/profile/social/page.tsx       |  13 -
 .../blockchain/ContractInteraction.tsx        |  11 -
 src/components/blockchain/NFTCard.tsx         |   9 -
 src/components/blockchain/TokenDisplay.tsx    |   9 -
 .../blockchain/TransactionButton.tsx          |   9 -
 src/components/common/Button.tsx              |  12 -
 src/components/common/Card.tsx                |  11 -
 src/components/common/Dropdown.tsx            |  11 -
 src/components/common/ErrorMessage.tsx        |  11 -
 src/components/common/Input.tsx               |   8 -
 src/components/common/LoadingSpinner.tsx      |  11 -
 src/components/common/PriceTag.tsx            |  10 -
 src/components/common/Rating.tsx              |  10 -
 src/components/contexts/AuthContext.tsx       |   9 -
 src/components/contexts/BookContext.tsx       |  11 -
 .../contexts/NotificationContext.tsx          |   9 -
 src/components/contexts/ThemeContext.tsx      |   9 -
 src/components/contexts/WalletContext.tsx     |   9 -
 src/components/hooks/useAuth.tsx              |   9 -
 src/components/hooks/useContract.tsx          |   9 -
 src/components/hooks/useLibrary.tsx           |   9 -
 src/components/hooks/useRankings.tsx          |   9 -
 src/components/hooks/useTokenbound.tsx        |   9 -
 src/components/hooks/useWallet.tsx            |   9 -
 src/components/landingpage/Footer.tsx         |  92 +-
 src/components/landingpage/NavBar.tsx         |   2 +-
 src/components/layout/PageContainer.tsx       |  10 -
 115 files changed, 655 insertions(+), 9439 deletions(-)
 delete mode 100644 src/app/author-profile/[authorId]/page.tsx
 rename src/app/{books => author}/[bookId]/RelatedBooks.tsx (100%)
 rename src/app/{books => author}/[bookId]/page.tsx (100%)
 delete mode 100644 src/app/author/analytics/page.tsx
 delete mode 100644 src/app/author/earnings/page.tsx
 delete mode 100644 src/app/author/publications/page.tsx
 create mode 100644 src/app/books/page.tsx
 delete mode 100644 src/app/books/read/[bookId]/page.tsx
 delete mode 100644 src/app/community/page.tsx
 delete mode 100644 src/app/reader/discover/page.tsx
 delete mode 100644 src/app/reader/layout.tsx
 delete mode 100644 src/app/reader/library/page.tsx
 delete mode 100644 src/app/reader/page.tsx
 delete mode 100644 src/app/reader/ranking/page.tsx
 delete mode 100644 src/app/reader/subscription/page.tsx
 delete mode 100644 src/app/readers/components/book-modal.tsx
 delete mode 100644 src/app/readers/components/book-reader-modal.tsx
 delete mode 100644 src/app/readers/components/header-reader.tsx
 delete mode 100644 src/app/readers/components/reader-side-navbar.tsx
 delete mode 100644 src/app/readers/discussions-and-clubs/ClubCard.tsx
 delete mode 100644 src/app/readers/discussions-and-clubs/[id]/page.tsx
 delete mode 100644 src/app/readers/discussions-and-clubs/components/AddGuest.tsx
 delete mode 100644 src/app/readers/discussions-and-clubs/components/ClubDetails.tsx
 delete mode 100644 src/app/readers/discussions-and-clubs/components/ClubDiscussion.tsx
 delete mode 100644 src/app/readers/discussions-and-clubs/components/ClubToolBar.tsx
 delete mode 100644 src/app/readers/discussions-and-clubs/components/CreateEvent.tsx
 delete mode 100644 src/app/readers/discussions-and-clubs/components/Modal.tsx
 delete mode 100644 src/app/readers/discussions-and-clubs/components/ScheduleEvent.tsx
 delete mode 100644 src/app/readers/discussions-and-clubs/components/StartEvent.tsx
 delete mode 100644 src/app/readers/discussions-and-clubs/components/SuccessModal.tsx
 delete mode 100644 src/app/readers/discussions-and-clubs/page.tsx
 delete mode 100644 src/app/readers/layout.tsx
 delete mode 100644 src/app/readers/library/page.tsx
 delete mode 100644 src/app/readers/notifications/notification-detail.tsx
 delete mode 100644 src/app/readers/notifications/page.tsx
 delete mode 100644 src/app/readers/page.tsx
 delete mode 100644 src/app/readers/profile/following/page.tsx
 delete mode 100644 src/app/readers/profile/layout.tsx
 delete mode 100644 src/app/readers/profile/page.tsx
 delete mode 100644 src/app/readers/profile/preferences/page.tsx
 delete mode 100644 src/app/readers/profile/privacy/page.tsx
 delete mode 100644 src/app/readers/profile/sign-out/page.tsx
 delete mode 100644 src/app/readers/stats-and-achievements/page.tsx
 delete mode 100644 src/app/readers/transactions/page.tsx
 delete mode 100644 src/app/readers/transactions/transaction-details.tsx
 delete mode 100644 src/app/readers/wishlist/page.tsx
 delete mode 100644 src/app/settings/page.tsx
 delete mode 100644 src/app/writers/analytics/page.tsx
 delete mode 100644 src/app/writers/components/notification-detail.tsx
 delete mode 100644 src/app/writers/earnings/page.tsx
 delete mode 100644 src/app/writers/feedback/page.tsx
 delete mode 100644 src/app/writers/layout.tsx
 delete mode 100644 src/app/writers/manage-content/BookContentStep.tsx
 delete mode 100644 src/app/writers/manage-content/BookCreationFlow.tsx
 delete mode 100644 src/app/writers/manage-content/BookDetailsStep.tsx
 delete mode 100644 src/app/writers/manage-content/ContributorDetailsModal.tsx
 delete mode 100644 src/app/writers/manage-content/ContributorTypeModal.tsx
 delete mode 100644 src/app/writers/manage-content/Manage-content.tsx
 delete mode 100644 src/app/writers/manage-content/PreviewModal.tsx
 delete mode 100644 src/app/writers/manage-content/PricingStep.tsx
 delete mode 100644 src/app/writers/manage-content/ProgressStepper.tsx
 delete mode 100644 src/app/writers/manage-content/PublishTypeModal.tsx
 delete mode 100644 src/app/writers/manage-content/PublishingNft/Pricing.tsx
 delete mode 100644 src/app/writers/manage-content/PublishingNft/bookContent.tsx
 delete mode 100644 src/app/writers/manage-content/PublishingNft/bookDetail.tsx
 delete mode 100644 src/app/writers/manage-content/PublishingNft/genre.tsx
 delete mode 100644 src/app/writers/manage-content/PublishingNft/page.tsx
 delete mode 100644 src/app/writers/manage-content/StepIndicator.tsx
 delete mode 100644 src/app/writers/manage-content/SuccessModal.tsx
 delete mode 100644 src/app/writers/manage-content/book-preview-modal.tsx
 delete mode 100644 src/app/writers/manage-content/example.tsx
 delete mode 100644 src/app/writers/manage-content/loading.tsx
 delete mode 100644 src/app/writers/manage-content/page.tsx
 delete mode 100644 src/app/writers/notifications/notification-detail.tsx
 delete mode 100644 src/app/writers/notifications/page.tsx
 delete mode 100644 src/app/writers/page.tsx
 delete mode 100644 src/app/writers/profile/component/ProfileForm.tsx
 delete mode 100644 src/app/writers/profile/component/Social.tsx
 delete mode 100644 src/app/writers/profile/component/UpdatePasswordForm.tsx
 delete mode 100644 src/app/writers/profile/component/genre.tsx
 delete mode 100644 src/app/writers/profile/component/profileHeader.tsx
 delete mode 100644 src/app/writers/profile/component/profilesidebar.tsx
 delete mode 100644 src/app/writers/profile/genre/page.tsx
 delete mode 100644 src/app/writers/profile/layout.tsx
 delete mode 100644 src/app/writers/profile/page.tsx
 delete mode 100644 src/app/writers/profile/password/page.tsx
 delete mode 100644 src/app/writers/profile/social/page.tsx
 delete mode 100644 src/components/blockchain/ContractInteraction.tsx
 delete mode 100644 src/components/blockchain/NFTCard.tsx
 delete mode 100644 src/components/blockchain/TokenDisplay.tsx
 delete mode 100644 src/components/blockchain/TransactionButton.tsx
 delete mode 100644 src/components/common/Button.tsx
 delete mode 100644 src/components/common/Card.tsx
 delete mode 100644 src/components/common/Dropdown.tsx
 delete mode 100644 src/components/common/ErrorMessage.tsx
 delete mode 100644 src/components/common/Input.tsx
 delete mode 100644 src/components/common/LoadingSpinner.tsx
 delete mode 100644 src/components/common/PriceTag.tsx
 delete mode 100644 src/components/common/Rating.tsx
 delete mode 100644 src/components/contexts/AuthContext.tsx
 delete mode 100644 src/components/contexts/BookContext.tsx
 delete mode 100644 src/components/contexts/NotificationContext.tsx
 delete mode 100644 src/components/contexts/ThemeContext.tsx
 delete mode 100644 src/components/contexts/WalletContext.tsx
 delete mode 100644 src/components/hooks/useAuth.tsx
 delete mode 100644 src/components/hooks/useContract.tsx
 delete mode 100644 src/components/hooks/useLibrary.tsx
 delete mode 100644 src/components/hooks/useRankings.tsx
 delete mode 100644 src/components/hooks/useTokenbound.tsx
 delete mode 100644 src/components/hooks/useWallet.tsx
 delete mode 100644 src/components/layout/PageContainer.tsx

diff --git a/package.json b/package.json
index 193bd39..f38a6af 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "recharts": "^2.15.3",
     "sharp": "^0.33.5",
     "starknet": "^6.23.1",
+    "starknetkit": "^2.12.1",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7"
   },
diff --git a/src/app/author-profile/[authorId]/page.tsx b/src/app/author-profile/[authorId]/page.tsx
deleted file mode 100644
index 0028268..0000000
--- a/src/app/author-profile/[authorId]/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-function Page() {
-  return <h1>Page</h1>;
-}
-
-export default Page;
diff --git a/src/app/books/[bookId]/RelatedBooks.tsx b/src/app/author/[bookId]/RelatedBooks.tsx
similarity index 100%
rename from src/app/books/[bookId]/RelatedBooks.tsx
rename to src/app/author/[bookId]/RelatedBooks.tsx
diff --git a/src/app/books/[bookId]/page.tsx b/src/app/author/[bookId]/page.tsx
similarity index 100%
rename from src/app/books/[bookId]/page.tsx
rename to src/app/author/[bookId]/page.tsx
diff --git a/src/app/author/analytics/page.tsx b/src/app/author/analytics/page.tsx
deleted file mode 100644
index 970e76d..0000000
--- a/src/app/author/analytics/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-
-function Page(){
-    return(
-        <h1>Page</h1>
-    )
-}
-
-
-
-export default Page;
\ No newline at end of file
diff --git a/src/app/author/earnings/page.tsx b/src/app/author/earnings/page.tsx
deleted file mode 100644
index fb7c9ca..0000000
--- a/src/app/author/earnings/page.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-function Page(){
-    return(
-        <h1>Page</h1>
-    )
-}
-
-
-
-export default Page;
\ No newline at end of file
diff --git a/src/app/author/publications/page.tsx b/src/app/author/publications/page.tsx
deleted file mode 100644
index fb7c9ca..0000000
--- a/src/app/author/publications/page.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-function Page(){
-    return(
-        <h1>Page</h1>
-    )
-}
-
-
-
-export default Page;
\ No newline at end of file
diff --git a/src/app/books/page.tsx b/src/app/books/page.tsx
new file mode 100644
index 0000000..c7d3e99
--- /dev/null
+++ b/src/app/books/page.tsx
@@ -0,0 +1,598 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import imgbook from "../../../public/Cover.png";
+import { Star, CheckCircle, ArrowLeft, Share, Heart } from "lucide-react";
+import author from "@/assets/images/author1.png";
+import crypto from "@/assets/icons/strk.png";
+import NavBar from "@/components/landingpage/NavBar";
+import Footer from "@/components/landingpage/Footer";
+
+interface BookCard {
+  id: string;
+  title: string;
+  author: string;
+  price: number;
+  rating: number;
+  image: string;
+  isVerified?: boolean;
+}
+
+interface BookDetails extends BookCard {
+  description: string;
+  fullDescription: string;
+  reviews: number;
+  genre: string[];
+  pageCount: number;
+  language: string;
+  datePublished: string;
+  isbn: string;
+  publisherDescription: string;
+  authorBio: string;
+  authorImage: string;
+  cryptoPrice: string;
+}
+
+const bookData: BookCard = {
+  id: "1",
+  title: "Native Invisibility",
+  author: "Darrin Collins",
+  price: 10,
+  rating: 4.5,
+  image: "/book-cover.png",
+  isVerified: true,
+};
+
+const bookDetails: BookDetails = {
+  ...bookData,
+  description:
+    '"Native Invisibility" delves into the complex and often insidious ways in which indigenous peoples and their unique experiences are rendered unseen and unheard in the modern era.',
+  fullDescription:
+    '"Native Invisibility" delves into the complex and often insidious ways in which indigenous peoples and their unique experiences are rendered unseen and unheard in the modern era. This comprehensive exploration examines the systematic marginalization of indigenous voices across various sectors of society, from media representation to political discourse, educational curricula to economic opportunities.',
+  reviews: 109,
+  genre: ["Fiction", "Comic"],
+  pageCount: 21,
+  language: "English",
+  datePublished: "12 April, 2025",
+  isbn: "978-3-16-148410-0",
+  publisherDescription:
+    "Native Invisibility unveils the crucial ways indigenous cultures are often unseen in our modern world. This vital book fosters understanding and action for recognition and justice.",
+  authorBio:
+    "Darrin Collins is a dedicated researcher and writer deeply committed to exploring issues of cultural visibility, marginalization, and the intersection of identity and technology. His work in Native Invisibility reflects a long-standing interest in amplifying underrepresented voices and fostering a more equitable understanding of diverse experiences in the contemporary world.",
+  authorImage: "/placeholder.svg?height=60&width=60",
+  cryptoPrice: "193 STRK",
+};
+
+const BookDetailsModal = ({
+  book,
+  isOpen,
+  onClose,
+}: {
+  book: BookDetails;
+  isOpen: boolean;
+  onClose: () => void;
+}) => {
+  const [showFullDescription, setShowFullDescription] = useState(false);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+      <div className="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto">
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b">
+          <button
+            onClick={onClose}
+            className="flex items-center gap-2 text-gray-600 hover:text-gray-900"
+          >
+            <ArrowLeft className="w-5 h-5" />
+            <span>Back</span>
+          </button>
+          <button className="flex items-center gap-2 text-gray-600 hover:text-gray-900">
+            <Share className="w-5 h-5" />
+            <span>Share</span>
+          </button>
+        </div>
+
+        <div className="p-6">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            {/* Left Column - Book Cover */}
+            <div className="flex justify-center">
+              <div className="w-80 aspect-[3/4] relative">
+                <Image
+                  src={imgbook || "/placeholder.svg"}
+                  alt={book.title}
+                  fill
+                  className="object-cover rounded-lg"
+                />
+              </div>
+            </div>
+
+            {/* Right Column - Book Details */}
+            <div className="space-y-6">
+              {/* Title and Author */}
+              <div>
+                <h1 className="text-3xl font-bold text-gray-900 mb-2">
+                  {book.title}
+                </h1>
+                <div className="flex items-center gap-2 mb-4">
+                  <span className="text-gray-600">By {book.author}</span>
+                  {book.isVerified && (
+                    <CheckCircle className="w-5 h-5 text-blue-500" />
+                  )}
+                </div>
+                <div className="flex items-center gap-2">
+                  <Star className="w-5 h-5 fill-yellow-400 text-yellow-400" />
+                  <span className="font-medium">
+                    {book.rating} of {book.reviews} Review
+                  </span>
+                </div>
+              </div>
+
+              {/* Description */}
+              <div>
+                <h3 className="font-semibold text-gray-900 mb-2">
+                  Description
+                </h3>
+                <p className="text-gray-600 mb-3">
+                  {showFullDescription
+                    ? book.fullDescription
+                    : book.description}
+                </p>
+                <button
+                  onClick={() => setShowFullDescription(!showFullDescription)}
+                  className="text-blue-600 hover:text-blue-700 text-sm font-medium"
+                >
+                  {showFullDescription ? "Read Less" : "Read More"}
+                </button>
+              </div>
+
+              {/* Access Type */}
+              <div>
+                <h3 className="font-semibold text-gray-900 mb-2">
+                  Access Type
+                </h3>
+                <span className="inline-block bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">
+                  One-time Purchase
+                </span>
+              </div>
+
+              {/* Price */}
+              <div className="flex items-center gap-4">
+                <span className="text-3xl font-bold text-gray-900">
+                  ${book.price}
+                </span>
+                <span className="text-gray-600">
+                  <Image
+                    src={crypto}
+                    alt="Crypto Icon"
+                    width={20}
+                    height={20}
+                    className="inline-block mr-1"
+                  />
+                  {book.cryptoPrice}
+                </span>
+              </div>
+
+              {/* Action Buttons */}
+              <div className="flex gap-3">
+                <button className="flex-1 bg-blue-600 text-white py-3 px-6 rounded-lg font-medium hover:bg-blue-700 transition-colors">
+                  Buy Now
+                </button>
+                <button className="p-3 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
+                  <Heart className="w-6 h-6 text-gray-600" />
+                </button>
+              </div>
+
+              <button className="w-full py-3 px-6 border border-gray-300 rounded-lg font-medium text-gray-700 hover:bg-gray-50 transition-colors">
+                Start Reading for Free
+              </button>
+            </div>
+          </div>
+
+          {/* Book Details Grid */}
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-6 mt-8 pt-8 border-t">
+            <div>
+              <h4 className="font-medium text-gray-900 mb-1">Genre(s)</h4>
+              <p className="text-gray-600">{book.genre.join(", ")}</p>
+            </div>
+            <div>
+              <h4 className="font-medium text-gray-900 mb-1">Page count</h4>
+              <p className="text-gray-600">{book.pageCount} Pages</p>
+            </div>
+            <div>
+              <h4 className="font-medium text-gray-900 mb-1">Language</h4>
+              <p className="text-gray-600">{book.language}</p>
+            </div>
+            <div>
+              <h4 className="font-medium text-gray-900 mb-1">Date published</h4>
+              <p className="text-gray-600">{book.datePublished}</p>
+            </div>
+            <div className="lg:col-span-2">
+              <h4 className="font-medium text-gray-900 mb-1">ISBN</h4>
+              <p className="text-gray-600">{book.isbn}</p>
+            </div>
+          </div>
+
+          {/* Publisher and Author Sections */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-8 pt-8 border-t">
+            {/* From the Publisher */}
+            <div>
+              <h3 className="text-xl font-bold text-gray-900 mb-4">
+                From the Publisher
+              </h3>
+              <p className="text-gray-600">{book.publisherDescription}</p>
+            </div>
+
+            {/* About the Author */}
+            <div>
+              <h3 className="text-xl font-bold text-gray-900 mb-4">
+                About the Author
+              </h3>
+              <div className="flex items-start gap-4 mb-4">
+                <Image
+                  src={author}
+                  alt={book.author}
+                  width={60}
+                  height={60}
+                  className="rounded-full"
+                />
+                <div className="flex-1">
+                  <div className="flex items-center gap-2 mb-2">
+                    <span className="font-medium text-gray-900">
+                      {book.author}
+                    </span>
+                    {book.isVerified && (
+                      <CheckCircle className="w-4 h-4 text-blue-500" />
+                    )}
+                  </div>
+                  <button className="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
+                    Follow
+                  </button>
+                </div>
+              </div>
+              <p className="text-gray-600 text-sm">{book.authorBio}</p>
+            </div>
+          </div>
+
+          {/* Related Books */}
+          <div className="mt-8 pt-8 border-t">
+            <div className="flex items-center justify-between mb-6">
+              <div>
+                <h3 className="text-xl font-bold text-gray-900">
+                  Related Books
+                </h3>
+                <p className="text-gray-600 mt-1">
+                  People who read this also liked
+                </p>
+              </div>
+              <button className="flex items-center gap-2 text-gray-600 hover:text-gray-900 font-medium px-4 py-2 border border-gray-300 rounded-lg transition-colors">
+                View All
+                <ArrowLeft className="w-4 h-4 rotate-180" />
+              </button>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+              {Array.from({ length: 4 }).map((_, index) => (
+                <div
+                  key={`related-${index}`}
+                  className="bg-gray-50 rounded-lg p-4"
+                >
+                  <div className="aspect-[3/4] mb-3 relative">
+                    <Image
+                      src={imgbook || "/placeholder.svg"}
+                      alt={book.title}
+                      fill
+                      className="object-cover rounded-md"
+                      sizes="(max-width: 768px) 50vw, (max-width: 1200px) 25vw, 20vw"
+                    />
+                  </div>
+                  <h4 className="font-semibold text-gray-900 mb-1 text-sm">
+                    {book.title}
+                  </h4>
+                  <div className="flex items-center gap-1 mb-2">
+                    <span className="text-xs text-gray-600">
+                      By {book.author}
+                    </span>
+                    {book.isVerified && (
+                      <CheckCircle className="w-3 h-3 text-blue-500" />
+                    )}
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="font-bold text-gray-900">
+                      ${book.price}
+                    </span>
+                    <div className="flex items-center gap-1">
+                      <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
+                      <span className="text-xs font-medium text-gray-700">
+                        {book.rating}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Books by Author */}
+          <div className="mt-8 pt-8 border-t">
+            <div className="flex items-center justify-between mb-6">
+              <div>
+                <h3 className="text-xl font-bold text-gray-900">
+                  Books by {book.author}
+                </h3>
+                <p className="text-gray-600 mt-1">
+                  Explore other books published by {book.author.split(" ")[0]}
+                </p>
+              </div>
+              <button className="flex items-center gap-2 text-gray-600 hover:text-gray-900 font-medium px-4 py-2 border border-gray-300 rounded-lg transition-colors">
+                View All
+                <ArrowLeft className="w-4 h-4 rotate-180" />
+              </button>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+              {Array.from({ length: 4 }).map((_, index) => (
+                <div
+                  key={`author-${index}`}
+                  className="bg-gray-50 rounded-lg p-4"
+                >
+                  <div className="aspect-[3/4] mb-3 relative">
+                    <Image
+                      src={imgbook || "/placeholder.svg"}
+                      alt={book.title}
+                      fill
+                      className="object-cover rounded-md"
+                      sizes="(max-width: 768px) 50vw, (max-width: 1200px) 25vw, 20vw"
+                    />
+                  </div>
+                  <h4 className="font-semibold text-gray-900 mb-1 text-sm">
+                    {book.title}
+                  </h4>
+                  <div className="flex items-center gap-1 mb-2">
+                    <span className="text-xs text-gray-600">
+                      By {book.author}
+                    </span>
+                    {book.isVerified && (
+                      <CheckCircle className="w-3 h-3 text-blue-500" />
+                    )}
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="font-bold text-gray-900">
+                      ${book.price}
+                    </span>
+                    <div className="flex items-center gap-1">
+                      <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
+                      <span className="text-xs font-medium text-gray-700">
+                        {book.rating}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const BookCardComponent = ({
+  book,
+  showNFTBadge = false,
+}: {
+  book: BookCard;
+  showNFTBadge?: boolean;
+}) => {
+  const [selectedBook, setSelectedBook] = useState<BookDetails | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleBookClick = () => {
+    setSelectedBook(bookDetails);
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+    setSelectedBook(null);
+  };
+
+  return (
+    <>
+      <div
+        className="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow cursor-pointer"
+        onClick={handleBookClick}
+      >
+        <div className="aspect-[3/4] mb-4 relative">
+          <Image
+            src={imgbook || "/placeholder.svg"}
+            alt={book.title}
+            fill
+            className="object-cover rounded-md"
+            sizes="(max-width: 768px) 50vw, (max-width: 1200px) 25vw, 20vw"
+          />
+        </div>
+
+        {showNFTBadge && (
+          <div className="mb-2">
+            <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
+              NFT
+            </span>
+          </div>
+        )}
+
+        <h3 className="font-semibold text-gray-900 mb-1">{book.title}</h3>
+
+        <div className="flex items-center gap-1 mb-2">
+          <span className="text-sm text-gray-600">By {book.author}</span>
+          {book.isVerified && <CheckCircle className="w-4 h-4 text-blue-500" />}
+        </div>
+
+        <div className="flex items-center justify-between">
+          <span className="text-lg font-bold text-gray-900">${book.price}</span>
+          <div className="flex items-center gap-1">
+            <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
+            <span className="text-sm font-medium text-gray-700">
+              {book.rating}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Book Details Modal */}
+      {selectedBook && (
+        <BookDetailsModal
+          book={selectedBook}
+          isOpen={isModalOpen}
+          onClose={closeModal}
+        />
+      )}
+    </>
+  );
+};
+
+const PaginationDots = ({
+  total = 4,
+  active = 0,
+}: {
+  total?: number;
+  active?: number;
+}) => (
+  <div className="flex justify-center gap-2 mt-6">
+    {Array.from({ length: total }).map((_, index) => (
+      <div
+        key={index}
+        className={`w-2 h-2 rounded-full transition-colors ${
+          index === active ? "bg-gray-600" : "bg-gray-300"
+        }`}
+      />
+    ))}
+  </div>
+);
+
+export default function BookMarketplace() {
+  const [activeTab, setActiveTab] = useState("New Release");
+
+  const tabs = ["New Release", "Trending", "NFT Edition", "Explore"];
+
+  return (
+    <>
+      <NavBar />
+      <div className="min-h-screen bg-white">
+        {/* Navigation Tabs */}
+        <div className="border-b border-gray-200 px-4 sm:px-6 lg:px-8">
+          <div className="flex gap-1 overflow-x-auto">
+            {tabs.map((tab) => (
+              <button
+                key={tab}
+                onClick={() => setActiveTab(tab)}
+                className={`px-4 py-3 text-sm font-medium whitespace-nowrap transition-colors ${
+                  activeTab === tab
+                    ? "bg-gray-100 text-gray-900 rounded-t-lg"
+                    : "text-gray-500 hover:text-gray-700"
+                }`}
+              >
+                {tab}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Hero Section */}
+        <div className="text-center py-12 px-4 sm:px-6 lg:px-8">
+          <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
+            Dive Into a{" "}
+            <span className="text-blue-600">Wide Range of Books</span> Across
+            Genres
+          </h1>
+        </div>
+
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12">
+          {/* New Release Section */}
+          <section className="mb-16">
+            <div className="border-l-4 border-blue-500 pl-4 mb-8">
+              <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">
+                New Release
+              </h2>
+              <p className="text-gray-600">
+                Fresh from the minds of our authors explore the latest books
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+              {Array.from({ length: 8 }).map((_, index) => (
+                <BookCardComponent key={`new-${index}`} book={bookData} />
+              ))}
+            </div>
+          </section>
+
+          {/* Trending Books Section */}
+          <section className="mb-16">
+            <div className="mb-8">
+              <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">
+                Trending Books
+              </h2>
+              <p className="text-gray-600">
+                Discover what everyone's reading right now
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+              {Array.from({ length: 4 }).map((_, index) => (
+                <BookCardComponent key={`trending-${index}`} book={bookData} />
+              ))}
+            </div>
+          </section>
+
+          {/* Exclusive NFT Edition Section */}
+          <section className="bg-gray-200 rounded-2xl p-6 sm:p-8 lg:p-12 mb-16">
+            <div className="mb-8">
+              <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">
+                Exclusive NFT Edition
+              </h2>
+              <p className="text-gray-700 max-w-3xl">
+                Own limited-edition digital books with special perks bonus
+                content, unique artwork, and collectible value.
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+              {Array.from({ length: 4 }).map((_, index) => (
+                <BookCardComponent
+                  key={`nft-${index}`}
+                  book={bookData}
+                  showNFTBadge
+                />
+              ))}
+            </div>
+
+            <PaginationDots />
+          </section>
+
+          {/* Explore Books Section */}
+          <section>
+            <div className="mb-8">
+              <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">
+                Explore Books
+              </h2>
+              <p className="text-gray-600">
+                Browse diverse genres, discover hidden gems, and find your next
+                great read.
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+              {Array.from({ length: 8 }).map((_, index) => (
+                <BookCardComponent key={`explore-${index}`} book={bookData} />
+              ))}
+            </div>
+          </section>
+        </div>
+      </div>
+
+      <Footer />
+    </>
+  );
+}
diff --git a/src/app/books/read/[bookId]/page.tsx b/src/app/books/read/[bookId]/page.tsx
deleted file mode 100644
index 0028268..0000000
--- a/src/app/books/read/[bookId]/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-function Page() {
-  return <h1>Page</h1>;
-}
-
-export default Page;
diff --git a/src/app/community/page.tsx b/src/app/community/page.tsx
deleted file mode 100644
index 0028268..0000000
--- a/src/app/community/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-function Page() {
-  return <h1>Page</h1>;
-}
-
-export default Page;
diff --git a/src/app/reader/discover/page.tsx b/src/app/reader/discover/page.tsx
deleted file mode 100644
index 0028268..0000000
--- a/src/app/reader/discover/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-function Page() {
-  return <h1>Page</h1>;
-}
-
-export default Page;
diff --git a/src/app/reader/layout.tsx b/src/app/reader/layout.tsx
deleted file mode 100644
index bf71e2a..0000000
--- a/src/app/reader/layout.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react";
-
-interface LayoutProps {
-  children: React.ReactNode;
-}
-
-const Layout: React.FC<LayoutProps> = ({ children }) => {
-  return (
-    <div style={{ margin: "0 auto", maxWidth: "1200px", padding: "20px" }}>
-      <header>
-        <h1>Review Page</h1>
-      </header>
-      <main>{children}</main>
-      <footer>
-        <p>&copy; {new Date().getFullYear()} ChainLib</p>
-      </footer>
-    </div>
-  );
-};
-
-export default Layout;
diff --git a/src/app/reader/library/page.tsx b/src/app/reader/library/page.tsx
deleted file mode 100644
index 0028268..0000000
--- a/src/app/reader/library/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-function Page() {
-  return <h1>Page</h1>;
-}
-
-export default Page;
diff --git a/src/app/reader/page.tsx b/src/app/reader/page.tsx
deleted file mode 100644
index 0028268..0000000
--- a/src/app/reader/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-function Page() {
-  return <h1>Page</h1>;
-}
-
-export default Page;
diff --git a/src/app/reader/ranking/page.tsx b/src/app/reader/ranking/page.tsx
deleted file mode 100644
index 0028268..0000000
--- a/src/app/reader/ranking/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-function Page() {
-  return <h1>Page</h1>;
-}
-
-export default Page;
diff --git a/src/app/reader/subscription/page.tsx b/src/app/reader/subscription/page.tsx
deleted file mode 100644
index 0028268..0000000
--- a/src/app/reader/subscription/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-function Page() {
-  return <h1>Page</h1>;
-}
-
-export default Page;
diff --git a/src/app/readers/components/book-modal.tsx b/src/app/readers/components/book-modal.tsx
deleted file mode 100644
index 5aac84d..0000000
--- a/src/app/readers/components/book-modal.tsx
+++ /dev/null
@@ -1,248 +0,0 @@
-"use client"
-
-import { ArrowLeft, MoreHorizontal, Star, X } from "lucide-react"
-import Image from "next/image"
-import { useEffect, useState } from "react"
-import { BookReaderModal } from "./book-reader-modal"
-import imgbook from "../../../../public/Cover.png"
-import imgbook1 from "../../../../public/user1.svg"
-interface BookModalProps {
-  book: {
-    id: string
-    title: string
-    author: string
-    rating: number
-    status: "read" | "unread" | "progress"
-    progress?: number
-    isNFT?: boolean
-    likes?: number
-    verified?: boolean
-  }
-  onClose: () => void
-}
-
-export function BookModal({ book, onClose }: BookModalProps) {
-  // Close modal on escape key
-  useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        onClose()
-      }
-    }
-    document.addEventListener("keydown", handleEscape)
-    return () => document.removeEventListener("keydown", handleEscape)
-  }, [onClose])
-
-  // Prevent body scroll when modal is open
-  useEffect(() => {
-    document.body.style.overflow = "hidden"
-    return () => {
-      document.body.style.overflow = "unset"
-    }
-  }, [])
-
-  const [isReaderOpen, setIsReaderOpen] = useState(false)
-
-  const openReader = () => {
-    setIsReaderOpen(true)
-  }
-
-  const closeReader = () => {
-    setIsReaderOpen(false)
-  }
-
-  return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-      <div className="bg-white rounded-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto border-4 border-dashed border-blue-500">
-        {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-gray-200">
-          <div className="flex items-center gap-4">
-            <button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
-              <ArrowLeft className="w-5 h-5" />
-            </button>
-            <h1 className="text-lg font-semibold">Native Invisible</h1>
-          </div>
-
-          <div className="flex items-center gap-4">
-            <div className="flex items-center gap-2">
-              <Image
-                src={imgbook1}
-                alt="Joseph Yanum"
-                width={32}
-                height={32}
-                className="rounded-full"
-              />
-              <div className="text-sm">
-                <div className="flex items-center gap-1">
-                  <span className="font-medium">Joseph Yanum</span>
-                  <div className="w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
-                    <span className="text-white text-xs">✓</span>
-                  </div>
-                </div>
-                <div className="text-gray-500">@joeyanum</div>
-              </div>
-            </div>
-            <button className="p-2 hover:bg-gray-100 rounded-full transition-colors">
-              <MoreHorizontal className="w-5 h-5" />
-            </button>
-            <button
-              onClick={onClose}
-              className="p-2 hover:bg-gray-100 rounded-full transition-colors"
-              aria-label="Close modal"
-            >
-              <X className="w-5 h-5" />
-            </button>
-          </div>
-        </div>
-
-        {/* Main Content */}
-        <div className="p-6">
-          {/* Book Info Section */}
-          <div className="flex flex-col md:flex-row gap-8 mb-8">
-            {/* Book Cover */}
-            <div className="flex-shrink-0">
-              <Image
-                src={imgbook}
-                alt={book.title}
-                width={240}
-                height={320}
-                className="rounded-xl shadow-lg"
-              />
-            </div>
-
-            {/* Book Details */}
-            <div className="flex-1">
-              <h2 className="text-2xl font-bold mb-2">{book.title}</h2>
-              <div className="flex items-center gap-2 mb-4">
-                <span className="text-gray-600">By {book.author}</span>
-                {book.verified && (
-                  <div className="w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center">
-                    <span className="text-white text-xs">✓</span>
-                  </div>
-                )}
-              </div>
-
-              {/* Rating */}
-              <div className="flex items-center gap-2 mb-4">
-                <div className="flex items-center gap-1">
-                  <Star className="w-5 h-5 fill-yellow-400 text-yellow-400" />
-                  <span className="font-medium">{book.rating}</span>
-                </div>
-                <span className="text-gray-500">of 109 Review</span>
-              </div>
-
-              {/* Access Type */}
-              <div className="mb-4">
-                <div className="text-sm text-gray-600 mb-1">Access Type</div>
-                <div className="text-blue-600 font-medium">One-time Purchase</div>
-              </div>
-
-              {/* Reading Progress */}
-              {book.status === "progress" && book.progress && (
-                <div className="mb-6">
-                  <span className="bg-yellow-100 text-yellow-800 text-sm px-3 py-1 rounded-full font-medium">
-                    {book.progress}% Read
-                  </span>
-                </div>
-              )}
-
-              {/* Continue Reading Button */}
-              <button
-                onClick={openReader}
-                className="bg-blue-600 text-white px-8 py-3 rounded-xl font-medium hover:bg-blue-700 transition-colors"
-              >
-                Continue Reading
-              </button>
-            </div>
-          </div>
-
-          {/* Description */}
-          <div className="mb-8 border-t border-dashed border-gray-300 pt-8">
-            <h3 className="text-lg font-semibold mb-4">Description</h3>
-            <p className="text-gray-600 mb-4">
-              "Native Invisibility" delves into the complex and often insidious ways in which indigenous peoples and
-              their unique experiences are rendered unseen and unheard in the modern era.
-            </p>
-            <button className="text-blue-600 hover:text-blue-700 text-sm font-medium">Read More</button>
-          </div>
-
-          {/* Book Details Grid */}
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8 border-t border-dashed border-gray-300 pt-8">
-            <div>
-              <div className="text-sm text-gray-600 mb-1">Genre(s)</div>
-              <div className="text-sm">Fiction</div>
-              <div className="text-sm">Comic</div>
-            </div>
-            <div>
-              <div className="text-sm text-gray-600 mb-1">Page count</div>
-              <div className="text-sm">21 Pages</div>
-            </div>
-            <div>
-              <div className="text-sm text-gray-600 mb-1">Language</div>
-              <div className="text-sm">English</div>
-            </div>
-            <div>
-              <div className="text-sm text-gray-600 mb-1">Date published</div>
-              <div className="text-sm">12 April, 2025</div>
-            </div>
-          </div>
-
-          {/* ISBN */}
-          <div className="mb-8 border-t border-dashed border-gray-300 pt-8">
-            <div className="text-sm text-gray-600 mb-1">ISBN</div>
-            <div className="text-sm">978-3-16-148410-0</div>
-          </div>
-
-          {/* From Publisher & About Author */}
-          <div className="grid md:grid-cols-2 gap-8 border-t border-dashed border-gray-300 pt-8">
-            {/* From the Publisher */}
-            <div>
-              <h3 className="text-lg font-semibold mb-4">From the Publisher</h3>
-              <p className="text-gray-600 text-sm">
-                Native Invisibility unveils the crucial ways indigenous cultures are often unseen in our modern world.
-                This vital book fosters understanding and action for recognition and justice.
-              </p>
-            </div>
-
-            {/* About the Author */}
-            <div>
-              <h3 className="text-lg font-semibold mb-4">About the Author</h3>
-              <div className="flex items-start gap-3 mb-4">
-                <Image
-                  src={imgbook1}
-                  alt={book.author}
-                  width={48}
-                  height={48}
-                  className="rounded-full"
-                />
-                <div className="flex-1">
-                  <div className="flex items-center justify-between mb-2">
-                    <div className="flex items-center gap-2">
-                      <span className="font-medium">{book.author}</span>
-                      {book.verified && (
-                        <div className="w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
-                          <span className="text-white text-xs">✓</span>
-                        </div>
-                      )}
-                    </div>
-                    <button className="text-sm border border-gray-300 px-3 py-1 rounded-full hover:bg-gray-50 transition-colors">
-                      Follow
-                    </button>
-                  </div>
-                </div>
-              </div>
-              <p className="text-gray-600 text-sm">
-                Darrin Collins is a dedicated researcher and writer deeply committed to exploring issues of cultural
-                visibility, marginalization, and the intersection of identity and technology. His work in Native
-                Invisibility reflects a long-standing interest in amplifying underrepresented voices and fostering a
-                more equitable understanding of diverse experiences in the contemporary world.
-              </p>
-            </div>
-          </div>
-        </div>
-        {/* Book Reader Modal */}
-        {isReaderOpen && <BookReaderModal book={book} onClose={closeReader} />}
-      </div>
-    </div>
-  )
-}
diff --git a/src/app/readers/components/book-reader-modal.tsx b/src/app/readers/components/book-reader-modal.tsx
deleted file mode 100644
index 5798e77..0000000
--- a/src/app/readers/components/book-reader-modal.tsx
+++ /dev/null
@@ -1,267 +0,0 @@
-
-
-"use client"
-
-import { ArrowLeft, Plus, Minus, Edit, Bookmark, Highlighter, Maximize, Menu, Sun } from "lucide-react"
-import { useState, useEffect } from "react"
-
-interface BookReaderModalProps {
-  book: {
-    id: string
-    title: string
-    author: string
-    progress?: number
-  }
-  onClose: () => void
-}
-
-export function BookReaderModal({ book, onClose }: BookReaderModalProps) {
-  const [currentPage, setCurrentPage] = useState(1)
-  const [totalPages] = useState(37)
-  const [zoomLevel, setZoomLevel] = useState(100)
-  const [isLightMode, setIsLightMode] = useState(true)
-
-  // Add theme classes based on mode
-  const themeClasses = {
-    background: isLightMode ? "bg-white" : "bg-gray-900",
-    text: isLightMode ? "text-gray-900" : "text-gray-100",
-    textSecondary: isLightMode ? "text-gray-600" : "text-gray-400",
-    border: isLightMode ? "border-gray-200" : "border-gray-700",
-    sidebarBg: isLightMode ? "bg-gray-50" : "bg-gray-800",
-    hover: isLightMode ? "hover:bg-gray-100" : "hover:bg-gray-700",
-    selectedBg: isLightMode ? "bg-blue-100" : "bg-blue-900",
-    selectedText: isLightMode ? "text-blue-700" : "text-blue-300",
-  }
-  const [selectedChapter, setSelectedChapter] = useState("Chapter 1")
-
-  const tableOfContents = [
-    "Cover",
-    "Praise",
-    "Title",
-    "Chapter 1",
-    "How it Started",
-    "Let Go",
-    "Chapter 2",
-    "How it Started",
-    "Where Are We",
-  ]
-
-  // Close modal on escape key
-  useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        onClose()
-      }
-    }
-    document.addEventListener("keydown", handleEscape)
-    return () => document.removeEventListener("keydown", handleEscape)
-  }, [onClose])
-
-  // Prevent body scroll when modal is open
-  useEffect(() => {
-    document.body.style.overflow = "hidden"
-    return () => {
-      document.body.style.overflow = "unset"
-    }
-  }, [])
-
-  const handleZoomIn = () => {
-    setZoomLevel((prev) => Math.min(prev + 10, 200))
-  }
-
-  const handleZoomOut = () => {
-    setZoomLevel((prev) => Math.max(prev - 10, 50))
-  }
-
-  return (
-    <div className={`fixed inset-0 z-50 flex flex-col ${themeClasses.background}`}>
-      {/* Header */}
-      <div
-        className={`flex items-center justify-between px-6 py-4 border-b ${themeClasses.border} ${themeClasses.background}`}
-      >
-        <div className="flex items-center gap-4">
-          <h1 className={`text-lg font-semibold ${themeClasses.text}`}>{book.title}</h1>
-          <button
-            onClick={onClose}
-            className={`flex items-center gap-2 px-3 py-1.5 text-sm ${themeClasses.textSecondary} ${themeClasses.hover} rounded-lg transition-colors`}
-          >
-            <ArrowLeft className="w-4 h-4" />
-            Back
-          </button>
-        </div>
-
-        {/* Reading Controls */}
-        <div className="flex items-center gap-3">
-          <button
-            onClick={handleZoomIn}
-            className={`p-2 ${themeClasses.hover} rounded-lg transition-colors`}
-            title="Zoom In"
-          >
-            <Plus className={`w-4 h-4 ${themeClasses.text}`} />
-          </button>
-          <button
-            onClick={handleZoomOut}
-            className={`p-2 ${themeClasses.hover} rounded-lg transition-colors`}
-            title="Zoom Out"
-          >
-            <Minus className={`w-4 h-4 ${themeClasses.text}`} />
-          </button>
-          <button className={`p-2 ${themeClasses.hover} rounded-lg transition-colors`} title="Edit">
-            <Edit className={`w-4 h-4 ${themeClasses.text}`} />
-          </button>
-          <button className={`p-2 ${themeClasses.hover} rounded-lg transition-colors`} title="Bookmark">
-            <Bookmark className={`w-4 h-4 ${themeClasses.text}`} />
-          </button>
-          <button className={`p-2 ${themeClasses.hover} rounded-lg transition-colors`} title="Highlight">
-            <Highlighter className={`w-4 h-4 ${themeClasses.text}`} />
-          </button>
-          <button className={`p-2 ${themeClasses.hover} rounded-lg transition-colors`} title="Fullscreen">
-            <Maximize className={`w-4 h-4 ${themeClasses.text}`} />
-          </button>
-        </div>
-
-        <div className="flex items-center gap-4">
-          <span className={`text-sm ${themeClasses.textSecondary}`}>
-            Page {currentPage}-{totalPages}
-          </span>
-          <span className="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full font-medium">
-            Progress {book.progress || 5}%
-          </span>
-        </div>
-      </div>
-
-      {/* Main Content */}
-      <div className="flex flex-1 overflow-hidden">
-        {/* Sidebar - Table of Contents */}
-        <div className={`w-80 ${themeClasses.sidebarBg} border-r ${themeClasses.border} flex flex-col`}>
-          <div className={`p-4 border-b ${themeClasses.border}`}>
-            <div className="flex items-center gap-2 mb-4">
-              <h2 className={`font-semibold ${themeClasses.text}`}>Table of Content</h2>
-              <Menu className={`w-4 h-4 ${themeClasses.textSecondary}`} />
-            </div>
-          </div>
-
-          <div className="flex-1 overflow-y-auto">
-            <nav className="p-4">
-              <ul className="space-y-2">
-                {tableOfContents.map((item, index) => (
-                  <li key={index}>
-                    <button
-                      onClick={() => setSelectedChapter(item)}
-                      className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
-                        selectedChapter === item
-                          ? `${themeClasses.selectedBg} ${themeClasses.selectedText} font-medium`
-                          : `${themeClasses.textSecondary} ${themeClasses.hover}`
-                      }`}
-                    >
-                      {item}
-                    </button>
-                  </li>
-                ))}
-              </ul>
-            </nav>
-          </div>
-
-          {/* Light Mode Toggle */}
-          <div className={`p-4 border-t ${themeClasses.border}`}>
-            <button
-              onClick={() => setIsLightMode(!isLightMode)}
-              className={`flex items-center gap-2 text-sm ${themeClasses.textSecondary} hover:${themeClasses.text} transition-colors`}
-            >
-              <Sun className={`w-4 h-4 ${isLightMode ? "text-yellow-500" : "text-gray-400"}`} />
-              {isLightMode ? "Light Mode" : "Dark Mode"}
-            </button>
-          </div>
-        </div>
-
-        {/* Content Area */}
-        <div className={`flex-1 overflow-y-auto ${themeClasses.background}`}>
-          <div className="max-w-4xl mx-auto p-8" style={{ fontSize: `${zoomLevel}%` }}>
-            <div className={`prose max-w-none ${isLightMode ? "prose-gray" : "prose-invert"}`}>
-              <p className={`mb-6 ${themeClasses.text}`}>
-                It was slow compared to later machines but was significant for demonstrating programmability.
-              </p>
-
-              <p className={`mb-2 font-medium italic ${themeClasses.textSecondary}`}>Reference:</p>
-              <p className={`mb-6 text-sm italic ${themeClasses.textSecondary}`}>
-                Bashe, C. J., Johnson, L. R., Palmer, J. H., & Pugh, E. W. (1986). IBM's Early Computers. MIT Press.
-              </p>
-
-              <p className={`mb-4 ${themeClasses.text}`}>
-                <strong>b. ENIAC (Electronic Numerical Integrator and Computer) (1945)</strong>
-              </p>
-              <p className={`mb-4 ${themeClasses.text}`}>
-                Designed by John Presper Eckert and John Mauchly, ENIAC was the first general-purpose, fully electronic
-                digital computer.
-              </p>
-              <p className={`mb-4 ${themeClasses.text}`}>
-                It contained 18,000 vacuum tubes and could perform up to 5,000 operations per second.
-              </p>
-              <p className={`mb-6 ${themeClasses.text}`}>
-                ENIAC was used primarily for military applications, such as calculating artillery trajectories.
-              </p>
-
-              <p className={`mb-2 font-medium italic ${themeClasses.textSecondary}`}>Reference:</p>
-              <p className={`mb-6 text-sm italic ${themeClasses.textSecondary}`}>
-                Goldstine, H. H. (1972). The Computer from Pascal to von Neumann. Princeton University Press.
-              </p>
-
-              <p className={`mb-4 ${themeClasses.text}`}>
-                <strong>c. EDSAC (Electronic Delay Storage Automatic Calculator) (1949)</strong>
-              </p>
-              <p className={`mb-4 ${themeClasses.text}`}>
-                Created by Maurice Wilkes at the University of Cambridge, EDSAC was the first computer to use the
-                stored-program concept.
-              </p>
-              <p className={`mb-4 ${themeClasses.text}`}>
-                It employed mercury delay lines for memory and could execute programs stored in its memory.
-              </p>
-              <p className={`mb-6 ${themeClasses.text}`}>
-                EDSAC was used in scientific research, marking a shift toward practical computation.
-              </p>
-
-              <p className={`mb-2 font-medium italic ${themeClasses.textSecondary}`}>Reference:</p>
-              <p className={`mb-6 text-sm italic ${themeClasses.textSecondary}`}>
-                Wilkes, M. V. (1951). The Preparation of Programs for an Electronic Digital Computer. Addison-Wesley.
-              </p>
-
-              <p className={`mb-4 ${themeClasses.text}`}>
-                <strong>d. UNIVAC (Universal Automatic Computer) (1951)</strong>
-              </p>
-              <p className={`mb-4 ${themeClasses.text}`}>
-                Developed by Eckert and Mauchly, UNIVAC was the first commercially available computer.
-              </p>
-              <p className={`mb-4 ${themeClasses.text}`}>
-                It was designed for business and government use, capable of handling both text and numeric data.
-              </p>
-              <p className={`mb-6 ${themeClasses.text}`}>
-                UNIVAC's success marked the beginning of the commercial computer industry.
-              </p>
-
-              <p className={`mb-2 font-medium italic ${themeClasses.textSecondary}`}>Reference:</p>
-              <p className={`mb-8 text-sm italic ${themeClasses.textSecondary}`}>
-                Campbell-Kelly, M., & Aspray, W. (1996). Computer: A History of the Information Machine. Basic Books.
-              </p>
-
-              <p className={`mb-6 ${themeClasses.text}`}>
-                It was slow compared to later machines but was significant for demonstrating programmability.
-              </p>
-
-              <p className={`mb-2 font-medium italic ${themeClasses.textSecondary}`}>Reference:</p>
-              <p className={`mb-6 text-sm italic ${themeClasses.textSecondary}`}>
-                Bashe, C. J., Johnson, L. R., Palmer, J. H., & Pugh, E. W. (1986). IBM's Early Computers. MIT Press.
-              </p>
-
-              <p className={`mb-4 ${themeClasses.text}`}>
-                <strong>b. ENIAC (Electronic Numerical Integrator and Computer) (1945)</strong>
-              </p>
-              <p className={`mb-4 ${themeClasses.text}`}>
-                Designed by John Presper Eckert and John Mauchly, ENIAC was the first general-purpose...
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/src/app/readers/components/header-reader.tsx b/src/app/readers/components/header-reader.tsx
deleted file mode 100644
index e7d2ed7..0000000
--- a/src/app/readers/components/header-reader.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Bell } from "lucide-react";
-import Image from "next/image";
-import user from "../../../../public/user1.svg";
-import check from "../../../../public/check.svg";
-import Logo from "../../../../public/logo.svg";
-
-export function HeaderReader() {
-  return (
-
-    <header className="bg-white px-4 py-2 z-50 fixed w-full border-b top-0 border-[#e7e7e7] flex justify-between items-center">
-      {/* Left Side - Logo */}
-      <div className="flex items-center">
-        <Image
-          src={Logo}
-          alt="Brand logo"
-          width={36}
-          height={36}
-          className="h-9 w-9 rounded-full"
-        />
-      </div>
-
-      {/* Right Side - Notification and User */}
-      <div className="flex items-center gap-2 border p-1 border-[#E7E7E7] rounded">
-        <div className="relative">
-          <Bell className="text-[#5d5d5d] cursor-pointer" size={20} />
-          <div className="absolute -top-1 -right-1 w-2 h-2 bg-[#ff5c5c] rounded-full"></div>
-        </div>
-        <div className="w-8 h-8 rounded-sm bg-[#dba736] flex items-center justify-center overflow-hidden">
-          <Image
-            src={user}
-            alt="Profile"
-            width={32}
-            height={32}
-            className="object-cover"
-          />
-        </div>
-        <div className="text-sm">
-          <div className="flex items-center gap-1">
-            <span className="font-medium">Joseph Yanum</span>
-            <Image src={check} alt="Verified" className="object-cover" />
-          </div>
-          <span className="text-[#888888] text-xs">@joeyyanum</span>
-        </div>
-      </div>
-    </header>
-  );
-}
-
-
-
diff --git a/src/app/readers/components/reader-side-navbar.tsx b/src/app/readers/components/reader-side-navbar.tsx
deleted file mode 100644
index 623bffb..0000000
--- a/src/app/readers/components/reader-side-navbar.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-"use client";
-
-import {
-  Bell,
-  BookOpen,
-  LayoutDashboard,
-  MessageSquare,
-  DoorClosed,
-  User,
-  ClipboardList,
-  Heart
-} from "lucide-react";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-
-export function Sidebar() {
-  const pathname = usePathname();
-
-  const navItems = [
-    {
-      icon: LayoutDashboard,
-      label: "Dashboard",
-      href: "/reader-dashboard",
-    },
-    {
-      icon: BookOpen,
-      label: "My Library",
-      href: "/reader-dashboard/library" ,
-    },
-    {
-      icon: DoorClosed,
-      label: "Reading Stats",
-      href: "/reader-dashboard/Stats-and-achievements",
-    },
-    {
-      icon: Heart,
-      label: "Wishlist",
-      href: "/reader-dashboard/wishlist",
-      badge: 4,
-    },
-    {
-      icon: ClipboardList,
-      label: "Trasactions",
-      href: "/reader-dashboard/transactions",
-    },
-    {
-      icon: MessageSquare,
-      label: "Discussion & Clubs",
-      href: "/reader-dashboard/discussions-and-clubs",
-    },
-    {
-      icon: Bell,
-      label: "Notification",
-      href: "/reader-dashboard/notifications",
-    },
-    {
-      icon: User,
-      label: "Profile",
-      href: "/reader-dashboard/profile",
-    },
- 
-  ];
-
-  return (
-    <div className="w-64 bg-white border-r border-[#e7e7e7] h-screen fixed left-0 top-0">
-      <div className="p-4 flex items-center gap-2 border-b border-[#e7e7e7]">
-        <div className="w-8 h-8 rounded-full bg-[#0f265c] flex items-center justify-center">
-          <span className="text-white text-sm font-bold">C</span>
-        </div>
-        <span className="font-semibold text-[#000b21]">ChainLib</span>
-      </div>
-
-      <nav className="p-4">
-        <ul className="space-y-2">
-          {navItems.map((item) => (
-            <li key={item.label}>
-              <Link
-                href={item.href}
-                className={`flex items-center gap-3 p-3 rounded-md ${
-                  pathname === item.href
-                    ? "bg-[#096CFF] text-[#edf7ff]"
-                    : "text-[#5d5d5d] hover:bg-[#f6f6f6]"
-                }`}
-              >
-                <item.icon size={18} />
-                <span className={pathname === item.href ? "font-medium" : ""}>
-                  {item.label}
-                </span>
-                {item.badge && (
-                  <div
-                    className={`ml-auto w-5 h-5 ${
-                      item.label == "Notification"
-                        ? "bg-[#ff5c5c]"
-                        : "bg-[#096CFF]"
-                    }  rounded-full flex items-center justify-center`}
-                  >
-                    <span className="text-white text-xs">{item.badge}</span>
-                  </div>
-                )}
-              </Link>
-            </li>
-          ))}
-    
-        </ul>
-      </nav>
-    </div>
-  );
-}
diff --git a/src/app/readers/discussions-and-clubs/ClubCard.tsx b/src/app/readers/discussions-and-clubs/ClubCard.tsx
deleted file mode 100644
index ffbe093..0000000
--- a/src/app/readers/discussions-and-clubs/ClubCard.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import React from "react";
-import { Globe, PlusIcon } from "lucide-react";
-import { ClubDetailsProps } from "@/lib/types";
-
-interface CardProps extends ClubDetailsProps {
-  onOpen: (club: ClubDetailsProps) => void;
-}
-
-export default function ClubCard({
-  id,
-  name,
-  isPublic,
-  memberCount,
-  sessionsInfo,
-  unreadNotifications,
-  authorAvatars,
-  onOpen,
-}: CardProps) {
-  return (
-    <div className="flex cursor-pointer hover:shadow-sm items-center justify-between p-4 bg-white rounded-lg transition-shadow border border-[#E7E7E7] duration-300  w-full">
-      <div
-        className="flex-shrink-0 w-30 h-30 bg-[#D9D9D9] rounded-lg"
-        aria-hidden="true"
-      ></div>
-      <div className="flex flex-col flex-grow ml-4 min-w-0">
-        <div className="flex items-center space-x-2">
-          <h2 className="text-lg font-semibold text-gray-900 truncate">
-            {name}
-          </h2>
-          {unreadNotifications > 0 && (
-            <span
-              className="flex items-center justify-center w-6 h-6 text-xs text-white bg-red-600 rounded-full"
-              aria-label="3 unread notifications"
-            >
-              {unreadNotifications}
-            </span>
-          )}
-        </div>
-        <div className="flex flex-wrap items-center text-sm space-x-3 mt-2 mb-1">
-          <div className="flex text-sm items-center space-x-1 border border-[#D1D1D1] rounded-full px-2 py-0.5">
-            <Globe className="w-4 h-4 text-[#888888] " aria-hidden="true" />
-            <span className="text-[#888888]">
-              {isPublic ? "Public" : "Private"}
-            </span>
-          </div>
-          <div className="flex text-sm items-center space-x-1 border border-[#D1D1D1] rounded-full px-2 py-0.5">
-            <PlusIcon className="text-sm w-3 h-3" />
-            <span className="text-[#888888]">{memberCount}</span>
-          </div>
-
-          <div className="flex text-sm items-center space-x-1 border border-[#D1D1D1] rounded-full px-2 py-0.5">
-            <span className="text-[#888888]">{sessionsInfo}</span>
-          </div>
-        </div>
-
-        <div className="flex items-center space-x-2 mt-2 ">
-          <div className="flex -space-x-2">
-            {authorAvatars &&
-              authorAvatars.length > 0 &&
-              authorAvatars.map((author) => (
-                <img
-                  src={
-                    author ?? "https://randomuser.me/api/portraits/men/32.jpg"
-                  }
-                  alt="Author 1"
-                  className="w-6 h-6 rounded-full border-2 border-white"
-                />
-              ))}
-          </div>
-
-          {authorAvatars && authorAvatars.length > 0 && (
-            <span className="truncate text-[#5D5D5D] ">
-              {authorAvatars.length} Authors you follow are members
-            </span>
-          )}
-        </div>
-      </div>
-      <button
-        onClick={() => {
-          onOpen({
-            id: id,
-            name,
-            isPublic,
-            memberCount,
-            sessionsInfo,
-            unreadNotifications,
-            authorAvatars,
-          });
-        }}
-        type="button"
-        className="text-[#0F265C] py-2 px-8     transition-colors duration-300 ease-in-out
- rounded-[10px] bg-[linear-gradient(to_bottom,_#EDF7FF_100%,_#096CFF_30%)]
- hover:bg-gray-200  "
-      >
-        Open
-      </button>
-    </div>
-  );
-}
diff --git a/src/app/readers/discussions-and-clubs/[id]/page.tsx b/src/app/readers/discussions-and-clubs/[id]/page.tsx
deleted file mode 100644
index 4747871..0000000
--- a/src/app/readers/discussions-and-clubs/[id]/page.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-"use client";
-
-import { Header } from "@/components/dashboard/header";
-import { Camera, Mic } from "lucide-react";
-
-export default function LiveEventPage() {
-  return (
-    <div>
-      <Header title="Native Fantasy" />
-
-      <div className="flex flex-col items-start md:flex-row gap-x-10 p-4 md:max-w-[85rem] pt-20 px-10 ">
-        <div className="">
-          <div className="bg-white rounded-xl shadow overflow-hidden">
-            <div className="relative w-full h-[300px] md:h-[500px]">
-              <img
-                src="/live-event.png"
-                alt="Live Session"
-                className="object-cover w-full h-full"
-              />
-              <div className="flex">
-                <div
-                  className="  justify-end bg-[#F6F6F6] rounded-full py-1 px-1 absolute  top-2 right-2
- flex items-center gap-1"
-                >
-                  <span className="bg-red-500 text-white text-xs font-medium px-2 py-1 rounded-full">
-                    🔴 Live
-                  </span>
-                  <span className="bg-white/80 text-gray-800 text-xs px-2 py-1 rounded-full">
-                    93
-                  </span>
-                </div>
-              </div>
-              <div className="absolute bottom-2 left-2 flex items-center gap-2 bg-white/70 px-3 py-1 rounded-full text-sm">
-                <div className="absolute bottom-3 left-3 bg-gray-100 rounded-full px-2 py-1 flex gap-2 shadow-md">
-                  <button className="w-10 h-10 flex items-center justify-center bg-white rounded-full border border-gray-300 shadow">
-                    <Camera className="w-5 h-5 text-blue-600" />
-                  </button>
-                  <button className="w-10 h-10 flex items-center justify-center bg-white rounded-full border border-gray-300 shadow">
-                    <Mic className="w-5 h-5 text-blue-600" />
-                  </button>
-                </div>
-              </div>
-              <button className="absolute bottom-2 right-2 px-4 py-1 bg-red-600/40 text-white text-sm rounded-full">
-                End Event
-              </button>
-            </div>
-
-            <div className="p-6">
-              <h2 className="text-xl font-semibold text-gray-900">
-                Native Invisibility
-              </h2>
-              <p className=" text-[#888888] mt-1">
-                By Darrin Collins <span className="text-blue-500">✔</span>
-              </p>
-              <p className=" text-[#888888] mt-4">
-                Vibrant book club dedicated to exploring the vast and magical
-                realms of fantasy literature. From epic sagas and dark fantasy
-                to urban magic and whimsical tales, we delve into all corners of
-                the genre.
-              </p>
-
-              <div className="mt-6 space-y-4">
-                <div className="flex items-center gap-4">
-                  <div className="w-10 h-10 bg-gray-200 rounded-full"></div>
-                  <div>
-                    <span className="text-xs text-gray-500">Host</span>
-                    <p className="text-sm font-medium text-gray-900">
-                      Aisha Musa
-                    </p>
-                  </div>
-                </div>
-
-                <div className="flex items-center gap-4">
-                  <div className="w-10 h-10 bg-gray-200 rounded-full"></div>
-                  <div>
-                    <span className="text-xs text-gray-500">Guest</span>
-                    <p className="text-sm font-medium text-gray-900">
-                      Hana Yamal
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="bg-white rounded-xl shadow p-4 w-full  mt-6">
-            <div className="flex items-center justify-between mb-4">
-              <h3 className="text-md font-semibold text-gray-900">Viewers</h3>
-              <span className="text-sm bg-gray-100 px-3 py-1 rounded-full text-gray-600">
-                92 Watching
-              </span>
-            </div>
-            <ul className="divide-y divide-[#F6F6F6]">
-              {Array.from({ length: 4 }).map((_, i) => (
-                <li key={i} className="flex items-center gap-4 py-4">
-                  <div className="w-10 h-10 bg-gray-200 rounded-full" />
-                  <p className="text-sm text-gray-800">Darrin Collins</p>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </div>
-
-        <div className="bg-white rounded-xl shadow p-4 w-full max-w-md">
-          <h3 className="text-md font-semibold mb-2 text-gray-800">
-            Live Chat
-          </h3>
-          <hr className="mb-4" />
-          <div className="space-y-10">
-            <div className="bg-gray-100 p-3 rounded-lg">
-              <div className="flex items-center space-x-2 mb-1">
-                <img
-                  src="https://randomuser.me/api/portraits/men/10.jpg"
-                  alt="Young John"
-                  className="w-6 h-6 rounded-full"
-                />
-                <span className="text-sm font-medium text-gray-800">
-                  Young John
-                </span>
-              </div>
-              <p className="text-sm text-gray-700">
-                I disagree with Peace. I believe Umar deserved a second chance
-                after what he did
-              </p>
-            </div>
-
-            <div className="bg-gray-100 p-3 rounded-lg w-fit">
-              <div className="flex items-center space-x-2 mb-1 ">
-                <img
-                  src="https://randomuser.me/api/portraits/men/11.jpg"
-                  alt="Ahmed Aliyu"
-                  className="w-6 h-6 rounded-full"
-                />
-                <span className="text-sm font-medium text-gray-800">
-                  Ahmed Aliyu
-                </span>
-              </div>
-              <p className="text-sm text-gray-700">Why do you feel that way?</p>
-            </div>
-
-            <div className="bg-blue-50 p-3 rounded-lg self-end ">
-              <div className="text-right text-sm font-medium text-gray-700 mb-1">
-                You
-              </div>
-              <p className="text-sm text-gray-800 text-right">
-                You're saying you don't agree with 'Peace' on this one
-              </p>
-            </div>
-
-            <div className="bg-gray-100 p-3 rounded-lg">
-              <div className="flex items-center space-x-2 mb-1">
-                <img
-                  src="https://randomuser.me/api/portraits/men/12.jpg"
-                  alt="Tony Tony"
-                  className="w-6 h-6 rounded-full"
-                />
-                <span className="text-sm font-medium text-gray-800">
-                  Tony Tony
-                </span>
-              </div>
-              <p className="text-sm text-gray-700">
-                What makes you think he deserved that second chance?
-              </p>
-            </div>
-          </div>
-
-          <form className="relative mt-6 max-w-md">
-            <input
-              type="text"
-              placeholder="Type here"
-              className="w-full pl-4 pr-12 py-3 rounded-md bg-gray-100 border text-[#B0B0B0] border-gray-200 text-sm focus:outline-none"
-            />
-            <button
-              type="submit"
-              className="absolute top-1/2 right-2 transform -translate-y-1/2 w-9 h-9 flex items-center justify-center bg-blue-600 text-white rounded-full hover:bg-blue-700"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-4 w-4"
-                fill="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
-              </svg>
-            </button>
-          </form>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/readers/discussions-and-clubs/components/AddGuest.tsx b/src/app/readers/discussions-and-clubs/components/AddGuest.tsx
deleted file mode 100644
index f217f5d..0000000
--- a/src/app/readers/discussions-and-clubs/components/AddGuest.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-"use client";
-
-import React from "react";
-import Modal from "./Modal";
-import { Input } from "@/components/ui/input";
-
-type Props = {
-  isOpen: boolean;
-  onClose: () => void;
-  addGuest: () => void;
-};
-
-export default function AddGuestModal({ isOpen, onClose, addGuest }: Props) {
-  return (
-    <Modal isOpen={isOpen} onClose={onClose} className="max-w-md">
-      <div className="space-y-5 px-5 py-1">
-        <p className="text-xl text-[#454545] text-center font-semibold">
-          Guest Email Address
-        </p>
-        <div className="space-y-2">
-          <p className="text-[#5D5D5D]">Guest Email Address</p>
-          <Input
-            className="h-[46px] text-[#B0B0B0]"
-            placeholder="Enter guest email address"
-          />
-        </div>
-        <div className="bg-blue-50 rounded-xl p-4 flex items-center space-x-4 w-fit">
-          <img
-            src="/authorImg2.png"
-            alt="Joseph Yanum"
-            className="w-12 h-12 rounded-full object-cover"
-          />
-          <div>
-            <p className="text-lg font-semibold">Joseph Yanum</p>
-            <p className="text-sm text-[#888888]">josephyanum75@gmail.com</p>
-          </div>
-        </div>
-        <button
-          onClick={() => {
-            onClose();
-            addGuest();
-          }}
-          className="mb-5 w-full py-3 text-white rounded-md bg-gradient-to-b from-[#2A62F3] to-[#0029B3] hover:opacity-90 transition"
-        >
-          Add
-        </button>
-      </div>
-    </Modal>
-  );
-}
diff --git a/src/app/readers/discussions-and-clubs/components/ClubDetails.tsx b/src/app/readers/discussions-and-clubs/components/ClubDetails.tsx
deleted file mode 100644
index 5343791..0000000
--- a/src/app/readers/discussions-and-clubs/components/ClubDetails.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { ClubDetailsProps } from "@/lib/types";
-import { Globe, PlusIcon } from "lucide-react";
-import Modal from "./Modal";
-
-type ClubModalProps = {
-  club: ClubDetailsProps | null;
-  isOpen: boolean;
-  onClose: () => void;
-  onJoin: () => void;
-};
-
-export default function ClubModal({
-  club,
-  isOpen,
-  onClose,
-  onJoin,
-}: ClubModalProps) {
-  if (!club) return null;
-
-  return (
-    <Modal isOpen={isOpen} onClose={onClose}>
-      <section className="p-6 space-y-6">
-        <div className="flex flex-col justify-center items-center space-x-3">
-          <div className="w-30 h-30 bg-gray-200 rounded-md" />
-
-          <h2 className="text-xl font-semibold text-[#0F265C] truncate mt-2">
-            {club.name}
-          </h2>
-
-          <div className="flex flex-col space-y-1">
-            <div className="flex flex-wrap items-center text-sm space-x-3 mt-2 mb-1">
-              <Badge text={club.isPublic ? "Public" : "Private"} icon="globe" />
-              <Badge text={String(club.memberCount)} icon="plus" />
-              <Badge text={club.sessionsInfo} />
-            </div>
-
-            <div className="flex items-center space-x-2 mt-2">
-              <div className="flex items-center space-x-2 text-sm text-gray-600">
-                <AvatarGroup urls={club.authorAvatars} />
-              </div>
-              {club.authorAvatars?.length > 0 && (
-                <span className="truncate text-[#5D5D5D] text-sm">
-                  {club.authorAvatars.length} Authors you follow are members
-                </span>
-              )}
-            </div>
-          </div>
-        </div>
-
-        <div>
-          <SectionTitle title="About Club" />
-          <p className="text-[#3D3D3D] ">
-            Vibrant book club dedicated to exploring the vast and magical realms
-            of fantasy literature. From epic sagas and dark fantasy to urban
-            magic and whimsical tales, we delve into all corners of the genre.
-          </p>
-        </div>
-
-        <div>
-          <SectionTitle title="Genre Focus" />
-          <div className="flex flex-wrap gap-2">
-            <Tag text="Fiction" />
-            <Tag text="Drama" />
-          </div>
-        </div>
-      </section>
-
-      <footer className="flex justify-between gap-3 p-4 bg-gray-50">
-        <button
-          onClick={onClose}
-          className="text-[#0F265C] py-4 px-8 w-full rounded-[10px] bg-[linear-gradient(to_bottom,_#EDF7FF_100%,_#096CFF_30%)] hover:bg-gray-200 transition"
-        >
-          Cancel
-        </button>
-        <button
-          onClick={onJoin}
-          className="px-6 py-4 w-full rounded-md bg-blue-600 text-white hover:bg-blue-700 transition"
-        >
-          Join Club
-        </button>
-      </footer>
-    </Modal>
-  );
-}
-
-function Badge({ text, icon }: { text: string; icon?: "globe" | "plus" }) {
-  const icons = {
-    globe: <Globe className="w-4 h-4 text-[#888888]" />,
-    plus: <PlusIcon className="w-4 h-4 text-[#888888]" />,
-  };
-
-  return (
-    <div className="flex text-xs items-center space-x-1  border border-[#D1D1D1] rounded-full px-2 py-1">
-      {icon && icons[icon]}
-      <span className="text-[#888888]">{text}</span>
-    </div>
-  );
-}
-
-function SectionTitle({ title }: { title: string }) {
-  return (
-    <div className="rounded-full bg-[#F6F6F6] w-fit text-center px-2 py-2 mb-2">
-      <p className="text-sm">{title}</p>
-    </div>
-  );
-}
-
-function Tag({ text }: { text: string }) {
-  return (
-    <span className="text-xs border border-[#E7E7E7] rounded-full px-3 py-1">
-      {text}
-    </span>
-  );
-}
-
-function AvatarGroup({ urls }: { urls: string[] }) {
-  return (
-    <div className="flex -space-x-2">
-      {urls.map((url, i) => (
-        <img
-          key={i}
-          src={url}
-          alt={`Author ${i + 1}`}
-          className="w-6 h-6 rounded-full border-2 border-white"
-        />
-      ))}
-    </div>
-  );
-}
diff --git a/src/app/readers/discussions-and-clubs/components/ClubDiscussion.tsx b/src/app/readers/discussions-and-clubs/components/ClubDiscussion.tsx
deleted file mode 100644
index 5335a45..0000000
--- a/src/app/readers/discussions-and-clubs/components/ClubDiscussion.tsx
+++ /dev/null
@@ -1,209 +0,0 @@
-import { useState } from "react";
-
-interface ClubDiscussionProps {
-  startEvent: () => void;
-}
-
-export default function ClubDiscussion({ startEvent }: ClubDiscussionProps) {
-  const [activeTab, setActiveTab] = useState("discussion");
-
-  const tabs = [
-    { id: "discussion", label: "Discussion" },
-    { id: "live", label: "Live", badge: 1 },
-    { id: "about", label: "About" },
-    { id: "members", label: "Members" },
-  ];
-
-  const eventTabs = [
-    {
-      id: "discussion",
-      label: "Discussion",
-      badge: 2,
-      event: {
-        title: "Native Invisibility",
-        author: "Darrin Collins",
-        verified: true,
-        description:
-          "Delves into the complex and often insidious ways in which indigenous peoples and their unique experiences are rendered unseen and unheard in the modern era.",
-        live: false,
-        timeAgo: "2 weeks ago",
-        image: "/images/bookCover1.png",
-      },
-    },
-    {
-      id: "live",
-      label: "Live",
-      badge: null,
-      event: {
-        title: "Native Invisibility",
-        author: "Darrin Collins",
-        verified: true,
-        description:
-          "Delves into the complex and often insidious ways in which indigenous peoples and their unique experiences are rendered unseen and unheard in the modern era.",
-        live: true,
-        timeAgo: "Live now",
-        image: "/images/bookCover1.png",
-      },
-    },
-
-    {
-      id: "discussion",
-      label: "Discussion",
-      badge: null,
-      event: {
-        title: "Native Invisibility",
-        author: "Darrin Collins",
-        verified: true,
-        description:
-          "Delves into the complex and often insidious ways in which indigenous peoples and their unique experiences are rendered unseen and unheard in the modern era.",
-        live: true,
-        timeAgo: "Live now",
-        image: "/images/bookCover1.png",
-      },
-    },
-  ];
-
-  return (
-    <div className=" mx-auto p-6 rounded-xl shadow-sm">
-      <div className="flex gap-6 mb-6 bg-white px-10 py-5">
-        <div className="w-50 h-50 bg-gray-300 rounded-md flex-shrink-0"></div>
-        <div className="flex flex-col justify-center flex-grow">
-          <h1 className="text-[28px] font-semibold text-gray-900 mb-1">
-            Fantasy Enthusiasts
-          </h1>
-          <p className="text-sm text-[#888888]">
-            Vibrant book club dedicated to exploring the vast and magical realms
-            of fantasy literature. From epic sagas and dark fantasy to urban
-            magic and whimsical tales, we delve into all corners of the genre.
-          </p>
-          <div className="mt-3 flex flex-wrap items-center gap-2">
-            <Badge icon="🌐" label="Public" />
-            <Badge icon="👥" label="1.5k+ Members" />
-            <Badge icon="📅" label="2+ Session a Month" />
-          </div>
-          <div className="mt-2 flex items-center gap-2 text-sm text-gray-600">
-            <img
-              src="https://randomuser.me/api/portraits/women/44.jpg"
-              alt="Author 1"
-              className="w-6 h-6 rounded-full border border-white shadow-sm"
-            />
-            <img
-              src="https://randomuser.me/api/portraits/men/34.jpg"
-              alt="Author 2"
-              className="w-6 h-6 rounded-full border border-white shadow-sm -ml-2"
-            />
-            <span className="text-[#888888]">
-              2 Authors you follow are members
-            </span>
-          </div>
-        </div>
-      </div>
-
-      <div className="bg-white py-5 px-5 rounded-xl">
-        <div className="flex items-center justify-between mb-6">
-          <nav className="flex space-x-8" aria-label="Tabs">
-            {tabs.map(({ id, label, badge }) => (
-              <button
-                key={id}
-                onClick={() => setActiveTab(id)}
-                className={`relative py-2 px-3 text-[#5D5D5D] text-sm font-medium rounded-md focus:outline-none ${
-                  activeTab === id ? "] text-[#5D5D5D] bg-[#F6F6F6]" : ""
-                }`}
-                aria-current={activeTab === id ? "page" : undefined}
-              >
-                {label}
-                {badge && (
-                  <span className="ml-1 inline-flex items-center justify-center px-2 py-0.5 rounded-full text-xs font-semibold bg-red-600 text-white">
-                    {badge}
-                  </span>
-                )}
-              </button>
-            ))}
-          </nav>
-          <button
-            type="button"
-            onClick={startEvent}
-            className="inline-flex items-center px-4 py-2 text-sm font-semibold rounded-full bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 transition"
-          >
-            Start Event
-          </button>
-        </div>
-        <div>
-       
-          {eventTabs.map(({ id, event }) =>
-            activeTab === id ? (
-              <EventCard
-                key={id}
-                author={event.author}
-                title={event.title}
-                description={event.description}
-                image={event.image}
-              />
-            ) : <div></div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function Badge({ icon, label }: { icon: string; label: string }) {
-  return (
-    <span className="inline-flex items-center rounded-full border border-gray-300 px-2 py-2 text-xs text-[#888888] select-none">
-      <span className="mr-1">{icon}</span> {label}
-    </span>
-  );
-}
-
-function EventCard({
-  title,
-  author,
-  verified,
-  description,
-  live,
-  timeAgo,
-  image,
-}: {
-  title: string;
-  author: string;
-  verified?: boolean;
-  description: string;
-  live?: boolean;
-  timeAgo?: string;
-  image: string;
-}) {
-  return (
-    <div className="flex gap-4 p-4 px-6 rounded-lg border border-gray-200 shadow-sm mb-4 bg-white">
-      <img
-        src={image}
-        alt={title}
-        className="w-40 h-40 rounded-md object-cover flex-shrink-0"
-      />
-      <div className="flex flex-col justify-between flex-grow">
-        <div>
-          <div className="flex flex-col items-start gap-2">
-              <span className="text-xs font-semibold  bg-[#FF5C5C] text-white rounded-full px-2 py-0.5 select-none">
-                Live
-              </span>
-            <h2 className="text-lg font-semibold text-gray-900">{title}</h2>
-          </div>
-          <p className="text-sm text-[#5D5D5D] mb-2">
-            By {author}{" "}
-              <svg
-                className="inline-block w-4 h-4 text-blue-600"
-                fill="currentColor"
-                viewBox="0 0 24 24"
-                aria-label="Verified"
-              >
-                <path d="M22.25 12l-2.197 4.317.353 4.474-4.42-1.616L12 22.5l-4.015-3.325-4.42 1.616.353-4.474L1.75 12l2.197-4.317-.353-4.474 4.42 1.616L12 1.5l4.015 3.325 4.42-1.616-.353 4.474L22.25 12zM10.5 16.5l7.5-7.5-1.5-1.5-6 6-2.25-2.25-1.5 1.5 3.75 3.75z" />
-              </svg>
-            
-          </p>
-          <p className="mt-1 text-xs text-[#888888]">Book Description</p>
-          <p className=" text-[#888888] mt-1">{description}</p>
-        </div>
-        {timeAgo && <p className="text-xs text-gray-400 mt-4">{timeAgo}</p>}
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/readers/discussions-and-clubs/components/ClubToolBar.tsx b/src/app/readers/discussions-and-clubs/components/ClubToolBar.tsx
deleted file mode 100644
index 1c5f1ca..0000000
--- a/src/app/readers/discussions-and-clubs/components/ClubToolBar.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from "react";
-import { Search, ChevronDown, PlusIcon } from "lucide-react";
-
-export default function ClubsToolbar() {
-  return (
-    <div className="w-full p-4 grid grid-cols-2 gap-4 sm:flex sm:flex-row sm:items-center sm:justify-between">
-      <div className="flex items-center gap-x-8">
-        <div
-          className="  text-sm  col-span-2 sm:col-auto"
-
-          >
-          <p className="text-[#454545]"> Clubs You've Joined (2)</p>
-        </div>
-
-        <div>
-          <p className="text-[#454545]">Discover</p>
-        </div>
-
-        <button
-          type="button"
-          className="border border-gray-300 text-[#888888] flex items-center gap-x-1 rounded-lg px-3 py-3 text-sm font-medium  whitespace-nowrap hover:bg-gray-100 transition"
-        >
-          <span>
-            <PlusIcon className="w-5 h-5" />
-          </span>{" "}
-          Create a Club
-        </button>
-      </div>
-
-      <div className="flex items-center sm:w-4/12 gap-x-4 ">
-        <div className="relative w-full col-span-2 sm:col-auto">
-          <Search
-            className="absolute left-3 top-1/2 -translate-y-1/2 text-[#B0B0B0]"
-            size={16}
-          />
-          <input
-            type="search"
-            placeholder="Search for a Club"
-            className="w-full rounded-lg placeholder:text-[#B0B0B0]  border border-gray-300 pl-9 pr-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-          />
-        </div>
-
-        <button
-          type="button"
-          className="flex items-center gap-1 border bg-[#F6F6F6] border-gray-300 rounded-full px-4 py-3 text-sm font-medium text-gray-700 whitespace-nowrap hover:bg-gray-100 transition col-span-2 sm:col-auto justify-center sm:justify-start"
-        >
-          Club Type
-          <ChevronDown size={16} />
-        </button>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/readers/discussions-and-clubs/components/CreateEvent.tsx b/src/app/readers/discussions-and-clubs/components/CreateEvent.tsx
deleted file mode 100644
index 7f0faf3..0000000
--- a/src/app/readers/discussions-and-clubs/components/CreateEvent.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-"use client";
-
-import React from "react";
-import Modal from "./Modal";
-import { Input } from "@/components/ui/input";
-
-type Props = {
-  isOpen: boolean;
-  onClose: () => void;
-  onSubmit: () => void;
-};
-
-export default function CreateClubModal({ isOpen, onClose, onSubmit }: Props) {
-  const [name, setName] = React.useState("");
-  const [description, setDescription] = React.useState("");
-  const [genres, setGenres] = React.useState(["Fiction", "Drama"]);
-  const [clubType, setClubType] = React.useState("");
-
-  return (
-    <Modal isOpen={isOpen} onClose={onClose}>
-      <div className="px-6 pb-6">
-        <h2 className="text-2xl font-bold text-gray-900 mb-1">
-          Create a new Club
-        </h2>
-        <p className="text-sm text-muted-foreground mb-6">
-          Launch your book club! Gather readers, share favorites, and spark
-          discussions
-        </p>
-
-        <div className="space-y-4">
-          <div>
-            <p className="text-sm  text-[#5D5D5D]">Club Name</p>
-            <Input
-              id="name"
-              placeholder="Enter name"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              className="mt-1 border border-gray-100 w-full h-[46px]  border-b-0 px-3"
-            />
-          </div>
-
-          <div>
-            <label htmlFor="genre" className="text-sm text-[#5D5D5D]">
-              Genre Focus
-            </label>
-
-            <div className="mt-1 block w-full border rounded-md px-3 h-[46px] py-2 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
-              <select
-                id="type"
-                value={clubType}
-                className="w-full border-none focus:outline-none focus:ring-0 focus:border-none"
-                // onChange={(e) => setGenres(e.target.value)}
-              >
-                <option value="">Select Type</option>
-                <option value="public">Fiction</option>
-                <option value="private">Drama</option>
-              </select>
-            </div>
-             <div className="flex flex-wrap gap-2 mt-4">
-                {genres.map((genre) => (
-                  <span
-                    key={genre}
-                    className="bg-[#EDF4FF] text-[#2A62F3] text-xs px-3 py-1 rounded-full"
-                  >
-                    {genre} <span className="ml-1 cursor-pointer">×</span>
-                  </span>
-                ))}
-              </div>
-          </div>
-
-          <div>
-            <label htmlFor="description" className="text-sm text-[#5D5D5D]">
-              Description
-            </label>
-            <textarea
-              id="description"
-              placeholder="Describe your club"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              className="mt-1 w-full border rounded-md px-3 py-2 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              rows={3}
-            />
-          </div>
-
-          <div>
-            <label htmlFor="type" className="text-sm  text-[#5D5D5D]">
-              Club Type
-            </label>
-            <div className="mt-1 block w-full border rounded-md px-3 h-[46px] py-2 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
-              <select
-                id="type"
-                value={clubType}
-                className="w-full border-none focus:outline-none focus:ring-0 focus:border-none"
-                onChange={(e) => setClubType(e.target.value)}
-              >
-                <option value="">Select Type</option>
-                <option value="public">Public</option>
-                <option value="private">Private</option>
-              </select>
-            </div>
-          </div>
-        </div>
-
-        <button
-          onClick={() => {
-            onClose();
-            onSubmit();
-          }}
-          className="mt-6 w-full py-3 text-white rounded-md bg-gradient-to-b from-[#2A62F3] to-[#0029B3] hover:opacity-90 transition"
-        >
-          Create Club
-        </button>
-      </div>
-    </Modal>
-  );
-}
diff --git a/src/app/readers/discussions-and-clubs/components/Modal.tsx b/src/app/readers/discussions-and-clubs/components/Modal.tsx
deleted file mode 100644
index 3a297ae..0000000
--- a/src/app/readers/discussions-and-clubs/components/Modal.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from "react";
-import { cn } from "@/lib/utils"; 
-type ModalProps = {
-  isOpen: boolean;
-  onClose: () => void;
-  children: React.ReactNode;
-  className?: string;
-  hideClose?: boolean;
-};
-
-export default function Modal({
-  isOpen,
-  onClose,
-  children,
-  className,
-  hideClose = false,
-}: ModalProps) {
-  if (!isOpen) return null;
-
-  return (
-    <div
-      className="fixed inset-0 bg-black/40 bg-opacity-10 flex items-center justify-center z-50 p-4"
-      role="dialog"
-      aria-modal="true"
-    >
-      <div
-        className={cn(
-          "bg-white rounded-xl max-w-xl w-full shadow-lg overflow-hidden",
-          className
-        )}
-      >
-        {!hideClose && (
-          <header className="flex justify-end items-center p-4">
-            <button
-              onClick={onClose}
-              aria-label="Close modal"
-              className="text-[#B0B0B0] flex items-center justify-center w-8 h-8 bg-[#F6F6F6] hover:text-gray-700 transition"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                strokeWidth={2}
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-            </button>
-          </header>
-        )}
-
-        {children}
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/readers/discussions-and-clubs/components/ScheduleEvent.tsx b/src/app/readers/discussions-and-clubs/components/ScheduleEvent.tsx
deleted file mode 100644
index 3068549..0000000
--- a/src/app/readers/discussions-and-clubs/components/ScheduleEvent.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import Modal from "./Modal";
-import { Input } from "@/components/ui/input";
-import DatePicker from "react-datepicker";
-import "react-datepicker/dist/react-datepicker.css";
-import { Calendar, Timer, TimerIcon } from "lucide-react";
-
-type Props = {
-  isOpen: boolean;
-  onClose: () => void;
-  onSubmit: () => void;
-};
-
-export default function ScheduleEvent({ isOpen, onClose, onSubmit }: Props) {
-  const [name, setName] = React.useState("");
-  const [description, setDescription] = React.useState("");
-  const [genres, setGenres] = React.useState(["Fiction", "Drama"]);
-  const [startDate, setStartDate] = useState(new Date());
-  const [startTime, setStartTime] = useState(new Date());
-  const [endTime, setEndTime] = useState(new Date());
-
-  const [focusBook, setFocusBook] = React.useState("");
-
-  return (
-    <Modal isOpen={isOpen} onClose={onClose} className="max-w-2xl">
-      <div className="px-6 pb-6">
-        <h2 className="text-2xl font-bold text-gray-900 mb-1">
-          Schedule Event
-        </h2>
-
-        <div className="space-y-4 mt-4">
-          <div>
-            <p className="text-sm  text-[#5D5D5D]">Event Name</p>
-            <Input
-              id="name"
-              placeholder="Enter name"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              className="mt-1 border border-gray-100 w-full h-[46px] placeholder:text-[#B0B0B0]  border-b-0 px-3"
-            />
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm  text-gray-700 mb-1">Date</label>
-              <div className="flex cursor-pointer items-center gap-x-4 border border-gray-300 rounded-md px-3 py-2">
-                <Calendar className="text-[#888888] w-5 h-5" />
-                <DatePicker
-                  selected={startDate}
-                  onChange={(date) => setStartDate(date as Date)}
-                  dateFormat="dd MMMM, yyyy"
-                  className="w-full cursor-pointer outline-none bg-transparent text-[#B0B0B0] text-sm"
-                />
-              </div>
-            </div>
-            <div className="grid grid-cols-2 gap-x-2">
-              <div>
-                <label className="block text-sm  text-gray-700 mb-1">
-                  Start
-                </label>
-                <div className=" flex items-center border border-gray-300 gap-x-2 rounded-md px-3 py-2">
-                  <Timer className="text-[#888888] w-5 h-5" />
-                  <DatePicker
-                    selected={startTime}
-                    onChange={(time) => setStartTime(time as Date)}
-                    showTimeSelect
-                    showTimeSelectOnly
-                    timeIntervals={15}
-                    timeCaption="Time"
-                    dateFormat="h:mm aa"
-                    className="w-full outline-none bg-transparent text-[#B0B0B0] text-sm"
-                  />
-                </div>
-              </div>
-              <div>
-                <label className="block text-sm  text-gray-700 mb-1">End</label>
-                <div className="flex  items-center border border-gray-300 rounded-md px-2 gap-x-2 py-2">
-                  <Timer className="text-[#888888] w-5 h-5" />
-
-                  <DatePicker
-                    selected={endTime}
-                    onChange={(time) => setEndTime(time as Date)}
-                    showTimeSelect
-                    showTimeSelectOnly
-                    timeIntervals={15}
-                    timeCaption="Time"
-                    dateFormat="h:mm aa"
-                    className="w-full outline-none bg-transparent text-[#B0B0B0] text-sm"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div>
-            <label htmlFor="genre" className="text-sm text-[#5D5D5D]">
-              Genre Focus
-            </label>
-
-            <div className="mt-1 block w-full border rounded-md px-3 h-[46px] py-2 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
-              <select
-                id="type"
-                className="w-full border-none focus:outline-none focus:ring-0 focus:border-none"
-              >
-                <option value="">Select Type</option>
-                <option value="public">Fiction</option>
-                <option value="private">Drama</option>
-              </select>
-            </div>
-            <div className="flex flex-wrap gap-2 mt-4">
-              {genres.map((genre) => (
-                <span
-                  key={genre}
-                  className="bg-[#EDF4FF] text-[#2A62F3] text-xs px-3 py-1 rounded-full"
-                >
-                  {genre} <span className="ml-1 cursor-pointer">×</span>
-                </span>
-              ))}
-            </div>
-          </div>
-
-          <div>
-            <label htmlFor="type" className="text-sm  text-[#5D5D5D]">
-              Focus Book
-            </label>
-            <div className="mt-1 block w-full border rounded-md px-3 h-[46px] py-2 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
-              <select
-                id="type"
-                value={focusBook}
-                className="w-full border-none focus:outline-none focus:ring-0 focus:border-none"
-                onChange={(e) => setFocusBook(e.target.value)}
-              >
-                <option value="">Select Type</option>
-                <option value="public">Public</option>
-                <option value="private">Private</option>
-              </select>
-            </div>
-          </div>
-        </div>
-
-        <div className="mt-2">
-          <label htmlFor="description" className="text-sm text-[#5D5D5D]">
-            Description
-          </label>
-          <textarea
-            id="description"
-            placeholder="Describe your club"
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-            className="mt-1 w-full border rounded-md px-3 py-2 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            rows={3}
-          />
-        </div>
-
-        <button
-          onClick={() => {
-            onClose();
-            onSubmit();
-          }}
-          className="mt-6 w-full py-3 text-white rounded-md bg-gradient-to-b from-[#2A62F3] to-[#0029B3] hover:opacity-90 transition"
-        >
-          Schedule Event
-        </button>
-      </div>
-    </Modal>
-  );
-}
diff --git a/src/app/readers/discussions-and-clubs/components/StartEvent.tsx b/src/app/readers/discussions-and-clubs/components/StartEvent.tsx
deleted file mode 100644
index 7e5a6cf..0000000
--- a/src/app/readers/discussions-and-clubs/components/StartEvent.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-"use client";
-
-import React from "react";
-import Modal from "./Modal";
-
-type Props = {
-  isOpen: boolean;
-  onClose: () => void;
-  startEvent: () => void;
-  instantEvent: () => void;
-};
-
-export default function StartEventModal({
-  isOpen,
-  onClose,
-  startEvent,
-  instantEvent,
-}: Props) {
-  return (
-    <Modal isOpen={isOpen} onClose={onClose} className="max-w-md" >
-      <div className="space-y-4 px-10 py-4">
-        <button
-          onClick={() => {
-            onClose();
-            startEvent();
-          }}
-          className=" w-full py-3  rounded-[16px]  bg-[#E7E7E7] hover:opacity-90 transition"
-        >
-          Create Club
-        </button>
-
-        <button
-          onClick={() => {
-            onClose();
-            instantEvent();
-          }}
-          className=" w-full py-3  rounded-[16px]  bg-[#E7E7E7] hover:opacity-90 transition"
-        >
-          Schedule
-        </button>
-      </div>
-    </Modal>
-  );
-}
diff --git a/src/app/readers/discussions-and-clubs/components/SuccessModal.tsx b/src/app/readers/discussions-and-clubs/components/SuccessModal.tsx
deleted file mode 100644
index 3ebe40b..0000000
--- a/src/app/readers/discussions-and-clubs/components/SuccessModal.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-"use client";
-
-import React from "react";
-import Modal from "./Modal";
-import { Button } from "@/components/ui/button";
-import { CheckIcon } from "lucide-react";
-import Link from "next/link";
-
-type Props = {
-  isOpen: boolean;
-  onClose: () => void;
-  onSubmit: () => void;
-};
-
-export default function EventScheduleModal({
-  isOpen,
-  onClose,
-  onSubmit,
-}: Props) {
-  return (
-    <Modal isOpen={isOpen} onClose={onClose} hideClose className="max-w-md">
-      <div className="py-10">
-        <div className="flex flex-col items-center space-y-4">
-          <div className="w-30 h-30 flex items-center justify-center rounded-full bg-[#D6ECFF]">
-            <div className="w-20 h-20 flex items-center justify-center rounded-full bg-[#096CFF]">
-              <CheckIcon className="text-white w-10 h-10" />
-            </div>
-          </div>
-          <h2 className="text-lg font-semibold">
-            Event Successfully Scheduled
-          </h2>
-          <div className="bg-gray-100 w-fit rounded-full px-4 py-2 flex items-center justify-between  max-w-xs">
-            <span className="truncate text-sm text-gray-700">
-              ChLbevent1200Sh...
-            </span>
-            <button
-              onClick={() => navigator.clipboard.writeText("ChLbevent1200Sh")}
-              className="ml-3 text-sm font-medium text-blue-600 hover:underline"
-            >
-              Copy
-            </button>
-          </div>
-          <Link
-            href="/waiting-room"
-            className="w-full max-w-xs h-11 flex items-center justify-center rounded-full bg-gradient-to-r from-blue-500 to-blue-600 text-white font-semibold hover:from-blue-600 hover:to-blue-700"
-          >
-            <p>Start</p>
-          </Link>
-        </div>
-      </div>
-    </Modal>
-  );
-}
diff --git a/src/app/readers/discussions-and-clubs/page.tsx b/src/app/readers/discussions-and-clubs/page.tsx
deleted file mode 100644
index 5c1245a..0000000
--- a/src/app/readers/discussions-and-clubs/page.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-"use client";
-import { Header } from "@/components/dashboard/header";
-import React, { useState } from "react";
-import ClubsToolbar from "./components/ClubToolBar";
-import ClubCard from "./ClubCard";
-import { ClubDetailsProps } from "@/lib/types";
-import ClubModal from "./components/ClubDetails";
-import CreateClubModal from "./components/CreateEvent";
-import ClubDiscussion from "./components/ClubDiscussion";
-import StartEventModal from "./components/StartEvent";
-import ScheduleEvent from "./components/ScheduleEvent";
-import EventScheduleModal from "./components/SuccessModal";
-
-const clubCards: ClubDetailsProps[] = [
-  {
-    id: "1",
-    name: "Fantasy Enthusiasts",
-    isPublic: true,
-    memberCount: 1500,
-    sessionsInfo: "2+ Sessions a month",
-    unreadNotifications: 3,
-    authorAvatars: [
-      "https://randomuser.me/api/portraits/men/32.jpg",
-      "https://randomuser.me/api/portraits/women/44.jpg",
-      "https://randomuser.me/api/portraits/men/32.jpg"
-    ],
-  },
-  {
-    id: "2",
-    name: "Book Lovers",
-    isPublic: false,
-    memberCount: 1500,
-    sessionsInfo: "2+ Sessions in three months",
-    unreadNotifications: 2,
-    authorAvatars: [
-      "https://randomuser.me/api/portraits/men/32.jpg",
-      "https://randomuser.me/api/portraits/women/44.jpg",
-    ],
-  },
-  {
-    id: "3",
-    name: "Fantasy Enthusiasts",
-    isPublic: true,
-    memberCount: 1500,
-    sessionsInfo: "2+ Sessions a month",
-    unreadNotifications: 3,
-    authorAvatars: [
-      "https://randomuser.me/api/portraits/men/32.jpg",
-      "https://randomuser.me/api/portraits/women/44.jpg",
-            "https://randomuser.me/api/portraits/men/32.jpg"
-
-    ],
-  },
-  {
-    id: "4",
-    name: "Book Lovers",
-    isPublic: false,
-    memberCount: 1500,
-    sessionsInfo: "2+ Sessions a month",
-    unreadNotifications: 10,
-    authorAvatars: [
-      "https://randomuser.me/api/portraits/men/32.jpg",
-      "https://randomuser.me/api/portraits/women/44.jpg",
-    ],
-  },
-];
-
-export default function DiscussionDashboard() {
-  const [selectedClub, setSelectedClub] = useState<ClubDetailsProps | null>(
-    null
-  );
-  const [modalOpen, setModalOpen] = useState(false);
-  const [createEventOpen, setCreateEventOpen] = useState(false);
-  const [startEventOpen, setStartEventOpen] = useState(false);
-  const [scheduleEventOpen, setScheduleEventOpen] = useState(false);
-  const [successModal, setSuccessModal] = useState(false);
-
-  const [activePage, setActivePage] = useState<
-    "index" | "discussion" | "start"
-  >("index");
-
-  function openModal(club: ClubDetailsProps) {
-    setSelectedClub(club);
-    setModalOpen(true);
-  }
-
-  function closeModal() {
-    setModalOpen(false);
-    setSelectedClub(null);
-  }
-
-  function joinClub() {
-    setCreateEventOpen(true);
-    closeModal();
-  }
-
-  return (
-    <div>
-      <Header title="Discussions and Clubs" />
-      <div className="p-6 mt-[60px] rounded-2xl">
-        {activePage === "index" ? (
-          <div>
-            <div className="bg-white p-6 rounded space-y-8">
-              <ClubsToolbar />
-
-              {clubCards.map(
-                ({
-                  id,
-                  name,
-                  isPublic,
-                  memberCount,
-                  sessionsInfo,
-                  authorAvatars,
-                  unreadNotifications,
-                }) => (
-                  <ClubCard
-                    id={id}
-                    key={id}
-                    name={name}
-                    isPublic={isPublic}
-                    memberCount={memberCount}
-                    sessionsInfo={sessionsInfo}
-                    authorAvatars={authorAvatars}
-                    unreadNotifications={unreadNotifications}
-                    onOpen={openModal}
-                  />
-                )
-              )}
-            </div>
-          </div>
-        ) : (
-          <div>
-            <ClubDiscussion startEvent={() => setStartEventOpen(true)} />
-          </div>
-        )}
-
-        <StartEventModal
-          startEvent={() => setCreateEventOpen(true)}
-          instantEvent={() => setScheduleEventOpen(true)}
-          isOpen={startEventOpen}
-          onClose={() => setStartEventOpen(false)}
-        />
-
-        <ClubModal
-          club={selectedClub}
-          isOpen={modalOpen}
-          onClose={closeModal}
-          onJoin={joinClub}
-        />
-
-        <CreateClubModal
-          isOpen={createEventOpen}
-          onClose={() => setCreateEventOpen(false)}
-          onSubmit={() => setActivePage("discussion")}
-        />
-
-        <ScheduleEvent
-          isOpen={scheduleEventOpen}
-          onClose={() => setScheduleEventOpen(false)}
-          onSubmit={() => setSuccessModal(true)}
-        />
-
-        <EventScheduleModal
-          isOpen={successModal}
-          onClose={() => setSuccessModal(false)}
-          onSubmit={() => {}}
-        />
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/readers/layout.tsx b/src/app/readers/layout.tsx
deleted file mode 100644
index 23b324b..0000000
--- a/src/app/readers/layout.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-
-
-
-import type React from "react";
-import { Sidebar } from "./components/reader-side-navbar";
-import "@/app/globals.css";
-import  {HeaderReader}  from "./components/header-reader";
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <>
-    <HeaderReader />
-     <div className="flex min-h-screen bg-[#f6f6f6] mt-17">
-      <Sidebar />
-      <div className="ml-64 w-full relative">
-        {children}
-      </div>
-    </div>
-    </>
-   
-  );
-}
\ No newline at end of file
diff --git a/src/app/readers/library/page.tsx b/src/app/readers/library/page.tsx
deleted file mode 100644
index 7abb815..0000000
--- a/src/app/readers/library/page.tsx
+++ /dev/null
@@ -1,827 +0,0 @@
-
-
-
-
-"use client"
-
-import type React from "react"
-import { useState } from "react"
-import { Search, ChevronDown, BookOpen, Users, Bookmark, CheckCircle, Clock, Eye } from "lucide-react"
-import Image from "next/image"
-import { BookModal } from "../components/book-modal"
-import imgbook from "../../../../public/Cover.png"
-
-interface StatCard {
-  title: string
-  value: number
-  icon: React.ReactNode
-  color: string
-}
-
-interface Book {
-  id: string
-  title: string
-  author: string
-  rating: number
-  status: "read" | "unread" | "progress"
-  progress?: number
-  isNFT?: boolean
-  likes?: number
-  verified?: boolean
-}
-
-interface Collection {
-  id: string
-  title: string
-  rating: number
-  likes: number
-  owners: number
-  books: string[]
-}
-
-const statCards: StatCard[] = [
-  {
-    title: "Total Books",
-    value: 24,
-    icon: <BookOpen className="w-5 h-5" />,
-    color: "bg-blue-100 text-blue-600",
-  },
-  {
-    title: "Regular Book",
-    value: 12,
-    icon: <BookOpen className="w-5 h-5" />,
-    color: "bg-green-100 text-green-600",
-  },
-  {
-    title: "NTF Editions",
-    value: 4,
-    icon: <Bookmark className="w-5 h-5" />,
-    color: "bg-purple-100 text-purple-600",
-  },
-  {
-    title: "Series",
-    value: 8,
-    icon: <Users className="w-5 h-5" />,
-    color: "bg-orange-100 text-orange-600",
-  },
-  {
-    title: "Collections",
-    value: 3,
-    icon: <Bookmark className="w-5 h-5" />,
-    color: "bg-indigo-100 text-indigo-600",
-  },
-  {
-    title: "Read",
-    value: 3,
-    icon: <CheckCircle className="w-5 h-5" />,
-    color: "bg-blue-100 text-blue-600",
-  },
-  {
-    title: "Progress",
-    value: 3,
-    icon: <Clock className="w-5 h-5" />,
-    color: "bg-blue-100 text-blue-600",
-  },
-  {
-    title: "Unread",
-    value: 3,
-    icon: <Eye className="w-5 h-5" />,
-    color: "bg-blue-100 text-blue-600",
-  },
-]
-
-const recentBooks: Book[] = [
-  {
-    id: "1",
-    title: "Native Invisibility",
-    author: "Darrin Collins",
-    rating: 4.5,
-    status: "progress",
-    progress: 5,
-    verified: true,
-  },
-  {
-    id: "2",
-    title: "Peace and Hate",
-    author: "Darrin Collins",
-    rating: 4.5,
-    status: "unread",
-    isNFT: true,
-    verified: true,
-  },
-  {
-    id: "3",
-    title: "Dark World",
-    author: "Darrin Collins",
-    rating: 4.5,
-    status: "unread",
-    likes: 5,
-    verified: true,
-  },
-  {
-    id: "4",
-    title: "Native Invisibility",
-    author: "Darrin Collins",
-    rating: 4.5,
-    status: "progress",
-    progress: 5,
-    verified: true,
-  },
-]
-
-const regularBooks: Book[] = [
-  {
-    id: "5",
-    title: "Native Invisibility",
-    author: "Darrin Collins",
-    rating: 4.5,
-    status: "progress",
-    progress: 5,
-    verified: true,
-  },
-  {
-    id: "6",
-    title: "Native Invisibility",
-    author: "Darrin Collins",
-    rating: 4.5,
-    status: "read",
-    verified: true,
-  },
-  {
-    id: "7",
-    title: "Native Invisibility",
-    author: "Darrin Collins",
-    rating: 4.5,
-    status: "unread",
-    verified: true,
-  },
-  {
-    id: "8",
-    title: "Native Invisibility",
-    author: "Darrin Collins",
-    rating: 4.5,
-    status: "read",
-    verified: true,
-  },
-]
-
-const nftBooks: Book[] = [
-  {
-    id: "9",
-    title: "Peace and Hate",
-    author: "Darrin Collins",
-    rating: 4.5,
-    status: "progress",
-    progress: 97,
-    isNFT: true,
-    verified: true,
-  },
-  {
-    id: "10",
-    title: "Peace and Hate",
-    author: "Darrin Collins",
-    rating: 4.5,
-    status: "read",
-    isNFT: true,
-    verified: true,
-  },
-  {
-    id: "11",
-    title: "Peace and Hate",
-    author: "Darrin Collins",
-    rating: 4.5,
-    status: "unread",
-    isNFT: true,
-    verified: true,
-  },
-  {
-    id: "12",
-    title: "Peace and Hate",
-    author: "Darrin Collins",
-    rating: 4.5,
-    status: "unread",
-    isNFT: true,
-    verified: true,
-  },
-]
-
-const seriesBooks: Book[] = [
-  {
-    id: "13",
-    title: "Love at Night",
-    author: "Darrin Collins",
-    rating: 4.5,
-    status: "read",
-    likes: 4,
-    verified: true,
-  },
-  {
-    id: "14",
-    title: "Love at Night",
-    author: "Darrin Collins",
-    rating: 4.5,
-    status: "progress",
-    progress: 46,
-    likes: 5,
-    verified: true,
-  },
-  {
-    id: "15",
-    title: "Dark World",
-    author: "Darrin Collins",
-    rating: 4.5,
-    status: "unread",
-    likes: 5,
-    verified: true,
-  },
-  {
-    id: "16",
-    title: "Peace and Hate",
-    author: "Darrin Collins",
-    rating: 4.5,
-    status: "progress",
-    progress: 79,
-    likes: 5,
-    verified: true,
-  },
-]
-
-const collections: Collection[] = [
-  {
-    id: "1",
-    title: "My Best Boook",
-    rating: 4.5,
-    likes: 5,
-    owners: 10,
-    books: ["book1", "book2", "book3"],
-  },
-  {
-    id: "2",
-    title: "My Best Boook",
-    rating: 4.5,
-    likes: 5,
-    owners: 10,
-    books: ["book1", "book2", "book3"],
-  },
-  {
-    id: "3",
-    title: "My Best Boook",
-    rating: 4.5,
-    likes: 5,
-    owners: 10,
-    books: ["book1", "book2", "book3"],
-  },
-  {
-    id: "4",
-    title: "My Best Boook",
-    rating: 4.5,
-    likes: 5,
-    owners: 10,
-    books: ["book1", "book2", "book3"],
-  },
-]
-
-export default function BookLibraryDashboard() {
-  const [searchQuery, setSearchQuery] = useState("")
-  const [bookType, setBookType] = useState("Book Type")
-  const [genre, setGenre] = useState("Genre")
-  const [bookTypeOpen, setBookTypeOpen] = useState(false)
-  const [genreOpen, setGenreOpen] = useState(false)
-
-  const [selectedBook, setSelectedBook] = useState<Book | null>(null)
-  const [isModalOpen, setIsModalOpen] = useState(false)
-
-  const openBookModal = (book: Book) => {
-    setSelectedBook(book)
-    setIsModalOpen(true)
-  }
-
-  const closeBookModal = () => {
-    setSelectedBook(null)
-    setIsModalOpen(false)
-  }
-
-  return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="max-w-7xl mx-auto p-4 md:p-6 lg:p-8">
-        {/* Search and Filters */}
-        <div className="flex flex-col sm:flex-row gap-4 mb-8">
-          <div className="relative flex-1">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
-            <input
-              type="text"
-              placeholder="What are we looking for"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full pl-10 h-12 bg-white border border-gray-200 rounded-xl px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            />
-          </div>
-
-          <div className="flex gap-3">
-            {/* Book Type Dropdown */}
-            <div className="relative">
-              <button
-                onClick={() => setBookTypeOpen(!bookTypeOpen)}
-                className="h-12 px-4 bg-white border border-gray-200 rounded-xl flex items-center gap-2 text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
-              >
-                {bookType}
-                <ChevronDown className="h-4 w-4" />
-              </button>
-              {bookTypeOpen && (
-                <div className="absolute top-full mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg z-10">
-                  <button
-                    onClick={() => {
-                      setBookType("All Books")
-                      setBookTypeOpen(false)
-                    }}
-                    className="w-full px-4 py-2 text-left text-sm hover:bg-gray-50 first:rounded-t-lg last:rounded-b-lg"
-                  >
-                    All Books
-                  </button>
-                  <button
-                    onClick={() => {
-                      setBookType("Regular Books")
-                      setBookTypeOpen(false)
-                    }}
-                    className="w-full px-4 py-2 text-left text-sm hover:bg-gray-50"
-                  >
-                    Regular Books
-                  </button>
-                  <button
-                    onClick={() => {
-                      setBookType("NFT Editions")
-                      setBookTypeOpen(false)
-                    }}
-                    className="w-full px-4 py-2 text-left text-sm hover:bg-gray-50 last:rounded-b-lg"
-                  >
-                    NFT Editions
-                  </button>
-                </div>
-              )}
-            </div>
-
-            {/* Genre Dropdown */}
-            <div className="relative">
-              <button
-                onClick={() => setGenreOpen(!genreOpen)}
-                className="h-12 px-4 bg-white border border-gray-200 rounded-xl flex items-center gap-2 text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
-              >
-                {genre}
-                <ChevronDown className="h-4 w-4" />
-              </button>
-              {genreOpen && (
-                <div className="absolute top-full mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg z-10">
-                  <button
-                    onClick={() => {
-                      setGenre("Fiction")
-                      setGenreOpen(false)
-                    }}
-                    className="w-full px-4 py-2 text-left text-sm hover:bg-gray-50 first:rounded-t-lg"
-                  >
-                    Fiction
-                  </button>
-                  <button
-                    onClick={() => {
-                      setGenre("Non-Fiction")
-                      setGenreOpen(false)
-                    }}
-                    className="w-full px-4 py-2 text-left text-sm hover:bg-gray-50"
-                  >
-                    Non-Fiction
-                  </button>
-                  <button
-                    onClick={() => {
-                      setGenre("Mystery")
-                      setGenreOpen(false)
-                    }}
-                    className="w-full px-4 py-2 text-left text-sm hover:bg-gray-50"
-                  >
-                    Mystery
-                  </button>
-                  <button
-                    onClick={() => {
-                      setGenre("Romance")
-                      setGenreOpen(false)
-                    }}
-                    className="w-full px-4 py-2 text-left text-sm hover:bg-gray-50 last:rounded-b-lg"
-                  >
-                    Romance
-                  </button>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* Statistics Cards */}
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-          {statCards.map((card, index) => (
-            <div
-              key={index}
-              className="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition-shadow p-4"
-            >
-              <div className="flex items-center justify-between mb-3">
-                <div className={`p-2 rounded-lg ${card.color}`}>{card.icon}</div>
-              </div>
-              <div className="space-y-1">
-                <p className="text-sm text-gray-600 font-medium">{card.title}</p>
-                <p className="text-2xl font-bold text-gray-900">{card.value}</p>
-              </div>
-            </div>
-          ))}
-        </div>
-
-        {/* Recently Purchased Section */}
-        <div className="mb-8">
-          <div className="flex items-center justify-between mb-6">
-            <h2 className="text-xl font-semibold text-gray-900">Recently Purchased</h2>
-            <button className="text-gray-500 hover:text-gray-700 text-sm font-medium border rounded-full py-3 px-5">View All →</button>
-          </div>
-
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-            {recentBooks.map((book) => (
-              <div
-                key={book.id}
-                onClick={() => openBookModal(book)}
-                className="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition-shadow overflow-hidden cursor-pointer"
-              >
-                <div className="relative">
-                  <div className="aspect-[3/4] bg-gray-100 flex items-center justify-center">
-                    <Image
-                      src={imgbook}
-                      alt={book.title}
-                      width={180}
-                      height={240}
-                      className="object-cover rounded-t-xl"
-                    />
-                  </div>
-
-                  {/* Status Badges */}
-                  <div className="absolute top-3 left-3 flex gap-2">
-                    {book.status === "progress" && book.progress && (
-                      <span className="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full font-medium">
-                        {book.progress}% Read
-                      </span>
-                    )}
-                    {book.status === "unread" && (
-                      <span className="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full font-medium">
-                        Unread
-                      </span>
-                    )}
-                    {book.isNFT && (
-                      <span className="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full font-medium">
-                        NFT
-                      </span>
-                    )}
-                  </div>
-                </div>
-
-                <div className="p-4">
-                  <h3 className="font-semibold text-gray-900 mb-1 line-clamp-2">{book.title}</h3>
-                  <div className="flex items-center gap-1 mb-3">
-                    <p className="text-sm text-gray-600">By {book.author}</p>
-                    {book.verified && (
-                      <div className="w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
-                        <CheckCircle className="w-3 h-3 text-white" />
-                      </div>
-                    )}
-                  </div>
-
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-1">
-                      <div className="flex text-yellow-400">
-                        {Array.from({ length: Math.floor(book.rating) }, (_, i) => (
-                          <span key={i}>★</span>
-                        ))}
-                      </div>
-                      <span className="text-sm text-gray-600">{book.rating}</span>
-                    </div>
-
-                    {book.likes && (
-                      <div className="flex items-center gap-1 text-gray-500">
-                        <span className="text-sm">{book.likes}</span>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* Regular Books Section */}
-        <div className="mb-8">
-          <div className="flex items-center justify-between mb-6">
-            <h2 className="text-xl font-semibold text-gray-900">Regular Books</h2>
-            <button className="text-gray-500 hover:text-gray-700 text-sm font-medium border rounded-full py-3 px-5">View All →</button>
-          </div>
-
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-            {regularBooks.map((book) => (
-              <div
-                key={book.id}
-                onClick={() => openBookModal(book)}
-                className="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition-shadow overflow-hidden cursor-pointer"
-              >
-                <div className="relative">
-                  <div className="aspect-[3/4] bg-gray-100 flex items-center justify-center">
-                    <Image
-                      src={imgbook}
-                      alt={book.title}
-                      width={180}
-                      height={240}
-                      className="object-cover rounded-t-xl"
-                    />
-                  </div>
-
-                  {/* Status Badges */}
-                  <div className="absolute top-3 left-3 flex gap-2">
-                    {book.status === "progress" && book.progress && (
-                      <span className="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full font-medium">
-                        {book.progress}% Read
-                      </span>
-                    )}
-                    {book.status === "read" && (
-                      <span className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full font-medium">
-                        Completed
-                      </span>
-                    )}
-                    {book.status === "unread" && (
-                      <span className="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full font-medium">
-                        Unread
-                      </span>
-                    )}
-                  </div>
-                </div>
-
-                <div className="p-4">
-                  <h3 className="font-semibold text-gray-900 mb-1 line-clamp-2">{book.title}</h3>
-                  <div className="flex items-center gap-1 mb-3">
-                    <p className="text-sm text-gray-600">By {book.author}</p>
-                    {book.verified && (
-                      <div className="w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
-                        <CheckCircle className="w-3 h-3 text-white" />
-                      </div>
-                    )}
-                  </div>
-
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-1">
-                      <div className="flex text-yellow-400">
-                        {Array.from({ length: Math.floor(book.rating) }, (_, i) => (
-                          <span key={i}>★</span>
-                        ))}
-                      </div>
-                      <span className="text-sm text-gray-600">{book.rating}</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* NFT Edition Section */}
-        <div className="mb-8 bg-blue-900 rounded-2xl p-6">
-          <div className="flex items-center justify-between mb-6">
-            <h2 className="text-xl font-semibold text-white">NFT Edition</h2>
-            <button className="text-white border border-white/20 hover:bg-white/10 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
-              View All →
-            </button>
-          </div>
-
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-            {nftBooks.map((book) => (
-              <div
-                key={book.id}
-                onClick={() => openBookModal(book)}
-                className="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition-shadow overflow-hidden cursor-pointer"
-              >
-                <div className="relative">
-                  <div className="aspect-[3/4] bg-gray-100 flex items-center justify-center">
-                    <Image
-                      src={imgbook}
-                      alt={book.title}
-                      width={180}
-                      height={240}
-                      className="object-cover rounded-t-xl"
-                    />
-                  </div>
-
-                  {/* Status Badges */}
-                  <div className="absolute top-3 left-3 flex gap-2">
-                    {book.status === "progress" && book.progress && (
-                      <span className="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full font-medium">
-                        {book.progress}% Read
-                      </span>
-                    )}
-                    {book.status === "read" && (
-                      <span className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full font-medium">
-                        Completed
-                      </span>
-                    )}
-                    {book.status === "unread" && (
-                      <span className="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full font-medium">
-                        Unread
-                      </span>
-                    )}
-                    {book.isNFT && (
-                      <span className="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full font-medium">
-                        NFT
-                      </span>
-                    )}
-                  </div>
-                </div>
-
-                <div className="p-4">
-                  <h3 className="font-semibold text-gray-900 mb-1 line-clamp-2">{book.title}</h3>
-                  <div className="flex items-center gap-1 mb-3">
-                    <p className="text-sm text-gray-600">By {book.author}</p>
-                    {book.verified && (
-                      <div className="w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
-                        <CheckCircle className="w-3 h-3 text-white" />
-                      </div>
-                    )}
-                  </div>
-
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-1">
-                      <div className="flex text-yellow-400">
-                        {Array.from({ length: Math.floor(book.rating) }, (_, i) => (
-                          <span key={i}>★</span>
-                        ))}
-                      </div>
-                      <span className="text-sm text-gray-600">{book.rating}</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* Series Section */}
-        <div className="mb-8">
-          <div className="flex items-center justify-between mb-6">
-            <h2 className="text-xl font-semibold text-gray-900">Series</h2>
-            <button className="text-gray-500 hover:text-gray-700 text-sm font-medium border rounded-full py-3 px-5">View All →</button>
-          </div>
-
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-            {seriesBooks.map((book) => (
-              <div
-                key={book.id}
-                onClick={() => openBookModal(book)}
-                className="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition-shadow overflow-hidden cursor-pointer"
-              >
-                <div className="relative">
-                  <div className="aspect-[3/4] bg-gray-100 flex items-center justify-center">
-                    <Image
-                      src={imgbook}
-                      alt={book.title}
-                      width={180}
-                      height={240}
-                      className="object-cover rounded-t-xl"
-                    />
-                  </div>
-
-                  {/* Status Badges */}
-                  <div className="absolute top-3 left-3 flex gap-2">
-                    {book.status === "progress" && book.progress && (
-                      <span className="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full font-medium">
-                        {book.progress}% Read
-                      </span>
-                    )}
-                    {book.status === "read" && (
-                      <span className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full font-medium">
-                        Completed
-                      </span>
-                    )}
-                    {book.status === "unread" && (
-                      <span className="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full font-medium">
-                        Unread
-                      </span>
-                    )}
-                  </div>
-                </div>
-
-                <div className="p-4">
-                  <h3 className="font-semibold text-gray-900 mb-1 line-clamp-2">{book.title}</h3>
-                  <div className="flex items-center gap-1 mb-3">
-                    <p className="text-sm text-gray-600">By {book.author}</p>
-                    {book.verified && (
-                      <div className="w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
-                        <CheckCircle className="w-3 h-3 text-white" />
-                      </div>
-                    )}
-                  </div>
-
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-1">
-                      <div className="flex text-yellow-400">
-                        {Array.from({ length: Math.floor(book.rating) }, (_, i) => (
-                          <span key={i}>★</span>
-                        ))}
-                      </div>
-                      <span className="text-sm text-gray-600">{book.rating}</span>
-                    </div>
-
-                    {book.likes && (
-                      <div className="flex items-center gap-1 text-gray-500">
-                        <span className="text-sm">{book.likes}</span>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* Collections Section */}
-        <div className="mb-8">
-          <div className="flex items-center justify-between mb-6">
-            <h2 className="text-xl font-semibold text-gray-900">Collections</h2>
-            <button className="text-gray-500 hover:text-gray-700 text-sm font-medium border rounded-full py-3 px-5">View All →</button>
-          </div>
-
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-            {collections.map((collection) => (
-              <div
-                key={collection.id}
-                className="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition-shadow overflow-hidden"
-              >
-                {/* Collection Books Grid */}
-                <div className="p-4">
-                  <div className="grid grid-cols-2 gap-2 mb-4">
-                    {/* Top row - 2 books */}
-                    <div className="aspect-[3/4] bg-gray-100 rounded-lg flex items-center justify-center">
-                      <Image
-                        src={imgbook}
-                        alt="Book cover"
-                        width={90}
-                        height={120}
-                        className="object-cover rounded-lg"
-                      />
-                    </div>
-                    <div className="aspect-[3/4] bg-gray-100 rounded-lg flex items-center justify-center">
-                      <Image
-                        src={imgbook}
-                        alt="Book cover"
-                        width={90}
-                        height={120}
-                        className="object-cover rounded-lg"
-                      />
-                    </div>
-                    {/* Bottom row - 1 book + Add More */}
-                    <div className="aspect-[3/4] bg-gray-100 rounded-lg flex items-center justify-center">
-                      <Image
-                        src={imgbook}
-                        alt="Book cover"
-                        width={90}
-                        height={120}
-                        className="object-cover rounded-lg"
-                      />
-                    </div>
-                    <div className="aspect-[3/4] bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center">
-                      <span className="text-xs text-gray-500 text-center">+ Add More</span>
-                    </div>
-                  </div>
-
-                  <div className="space-y-2">
-                    <h3 className="font-semibold text-gray-900">{collection.title}</h3>
-
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-1">
-                        <div className="flex text-yellow-400">
-                          {Array.from({ length: Math.floor(collection.rating) }, (_, i) => (
-                            <span key={i}>★</span>
-                          ))}
-                        </div>
-                        <span className="text-sm text-gray-600">{collection.rating}</span>
-                      </div>
-
-                      <div className="flex items-center gap-3 text-sm text-gray-500">
-                        <div className="flex items-center gap-1">
-                          <span>{collection.likes}</span>
-                        </div>
-                        <div className="flex items-center gap-1">
-                          <div className="w-4 h-4 bg-red-500 rounded-full flex items-center justify-center">
-                            <span className="text-white text-xs">{collection.owners}</span>
-                          </div>
-                          <span>Owners</span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-        {/* Book Modal */}
-        {isModalOpen && selectedBook && <BookModal book={selectedBook} onClose={closeBookModal} />}
-      </div>
-    </div>
-  )
-}
diff --git a/src/app/readers/notifications/notification-detail.tsx b/src/app/readers/notifications/notification-detail.tsx
deleted file mode 100644
index 07cbc2b..0000000
--- a/src/app/readers/notifications/notification-detail.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-"use client";
-
-import {  MoveLeft, Trash2 } from "lucide-react";
-import Image from "next/image";
-import soon from "../../../../public/coming-soon.png"
-
-
-interface NotificationDetailPageProps {
-  back: () => void;
-}
-
-export function NotificationDetailPage({ back }: NotificationDetailPageProps) {
-  return (
-    <div className="flex flex-col h-full">
-      {/* Content */}
-      <div className="flex-1 p-4 lg:p-6 overflow-auto">
-        <div className="max-w-2xl mx-auto">
-          <div className="bg-white rounded-lg border border-gray-200 p-6 lg:p-8">
-            <div className="flex justify-between items-center">
-              <div
-                onClick={back}
-                className="cursor-pointer border border-[#888888] rounded-[8px] text-[#888888] p-2"
-              >
-                <MoveLeft />
-              </div>
-              <div className="cursor-pointer border border-[#888888] rounded-[8px] text-[#888888] p-2">
-                <Trash2 />
-              </div>
-            </div>
-            <div className="text-center space-y-6">
-              <h1 className="text-2xl font-bold text-gray-900">
-                New Update for Writers
-              </h1>
-              <p className="text-gray-600">
-                Step up your writing with our latest update
-              </p>
-
-             
-                       <div className="md:w-[400px] w-full mx-auto">
-                         <Image
-                           src={soon}
-                           alt="Notification Banner"
-                        //    width={100}
-                        //    height={100}
-                           className="w-full border "
-                         />
-                       </div>
-
-              <div className="space-y-4 text-gray-600">
-                <p>
-                  Compete against players worldwide, climb the global rankings,
-                  and prove your skills. Test your strategy, outmaneuver your
-                  opponents, and claim your place at the top. Glory awaits!
-                </p>
-              </div>
-
-              <div className="pt-6 border-t border-gray-200">
-                <p className="text-sm text-gray-500">Sent; Today 12:18 PM</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/readers/notifications/page.tsx b/src/app/readers/notifications/page.tsx
deleted file mode 100644
index ac03fed..0000000
--- a/src/app/readers/notifications/page.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { CheckCheck } from "lucide-react";
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import { Header } from "@/components/dashboard/header";
-import { NotificationDetailPage } from "./notification-detail";
-
-const notifications = [
-  {
-    id: 1,
-    title: "New updates for Writers",
-    time: "12:18 PM",
-    date: "Today",
-    isNew: true,
-    content: "Step up your writing with our latest update",
-  },
-  {
-    id: 2,
-    title: "New updates for Writers",
-    time: "12:18 PM",
-    date: "Today",
-    isNew: true,
-    content: "Step up your writing with our latest update",
-  },
-  {
-    id: 3,
-    title: "New updates for Writers",
-    time: "12:18 PM",
-    date: "Yesterday",
-    isNew: true,
-    content: "Step up your writing with our latest update",
-  },
-  {
-    id: 4,
-    title: "New updates for Writers",
-    time: "12:18 PM",
-    date: "Yesterday",
-    isNew: true,
-    content: "Step up your writing with our latest update",
-  },
-  {
-    id: 5,
-    title: "New updates for Writers",
-    time: "12:18 PM",
-    date: "Yesterday",
-    isNew: true,
-    content: "Step up your writing with our latest update",
-  },
-  {
-    id: 6,
-    title: "New updates for Writers",
-    time: "12:18 PM",
-    date: "12 April, 2025",
-    isNew: true,
-    content: "Step up your writing with our latest update",
-  },
-];
-
-function NotificationPage() {
-  const [filter, setFilter] = useState("");
-  const [viewNotf, setViewNotf] = useState(false);
-
-  const groupedNotifications = notifications.reduce((acc, notification) => {
-    if (!acc[notification.date]) {
-      acc[notification.date] = [];
-    }
-    acc[notification.date].push(notification);
-    return acc;
-  }, {} as Record<string, typeof notifications>);
-
-  function backhandler() {
-    setViewNotf(false);
-  }
-  function viewNotificationhandler() {
-    setViewNotf(true);
-  }
-  if (viewNotf) {
-    return <NotificationDetailPage back={backhandler} />;
-  }
-
-  return (
-    <div className="flex flex-col h-full">
-      {/* Header */}
-      <Header title="Notification" />
-
-      {/* Content */}
-      <div className="flex-1 p-4 lg:p-6 overflow-auto mt-16">
-        <div className="bg-white rounded-lg border border-gray-200">
-          {/* Header */}
-          <div className="p-4 lg:p-6 border-b border-gray-200">
-            <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-end justify-between">
-              <div className="flex flex-col gap-2">
-                <div className="flex items-center gap-2 text-[#B0B0B0]">
-                  <h2 className="text-lg font-medium">All Notifications</h2> (7)
-                </div>
-                <div className="flex items-center gap-4">
-                  <Select value={filter} onValueChange={setFilter}>
-                    <SelectTrigger className="w-32 bg-[#F6F6F6] shadow-none rounded-[8px] border-none">
-                      <SelectValue placeholder="Filter by" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="all">All</SelectItem>
-                      <SelectItem value="unread">Unread</SelectItem>
-                      <SelectItem value="read">Read</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-              </div>
-              <Button variant="ghost" className="text-[#5D5D5D] bg-[#F6F6F6]">
-                <CheckCheck className="w-4 h-4 mr-2" />
-                Mark all as read
-              </Button>
-            </div>
-          </div>
-
-          {/* Notifications */}
-          <div className="divide-y divide-gray-200">
-            {Object.entries(groupedNotifications).map(
-              ([date, dateNotifications]) => (
-                <div key={date}>
-                  {date !== "Today" && (
-                    <div className="px-4 lg:px-6 py-3 bg-gray-50">
-                      <p className="text-sm font-medium text-gray-600">
-                        {date}
-                      </p>
-                    </div>
-                  )}
-                  {date === "Today" && (
-                    <div className="px-4 lg:px-6 py-3">
-                      <p className="text-sm font-medium text-gray-600">
-                        {date}
-                      </p>
-                    </div>
-                  )}
-                  {dateNotifications.map((notification) => (
-                    <div
-                      key={notification.id}
-                      className="p-4 lg:p-6 hover:bg-gray-50"
-                    >
-                      <div className="flex items-start gap-4">
-                        <Avatar className="w-10 h-10 bg-gray-200">
-                          <AvatarFallback></AvatarFallback>
-                        </Avatar>
-                        <div className="flex-1 min-w-0">
-                          <div className="flex items-center gap-2 mb-1">
-                            <h3 className="font-medium text-gray-900">
-                              {notification.title}
-                            </h3>
-                            {notification.isNew && (
-                              <Badge
-                                variant="destructive"
-                                className="text-xs text-[#ED4D48] bg-[#ED4D4833]"
-                              >
-                                New
-                              </Badge>
-                            )}
-                          </div>
-                          <p className="text-sm text-gray-500">
-                            {notification.time}
-                          </p>
-                        </div>
-                        <Button
-                          variant="link"
-                          className="text-blue-600"
-                          onClick={viewNotificationhandler}
-                        >
-                          View Details
-                        </Button>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default NotificationPage;
-
diff --git a/src/app/readers/page.tsx b/src/app/readers/page.tsx
deleted file mode 100644
index 8146b82..0000000
--- a/src/app/readers/page.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-"use-client";
-
-
-export default function DashboardHome() {
-  return (
-    <div className="space-y-6">
-      <div className="flex flex-col items-center justify-center h-screen">
-        <h1 className="text-2xl font-bold text-gray-800">Reader Dashboard</h1>
-        <p className="text-gray-600 mt-2">Welcome to your personalized reading space!</p>
-      </div>
-    </div>
-  );
-}
-
-
-
-
-
diff --git a/src/app/readers/profile/following/page.tsx b/src/app/readers/profile/following/page.tsx
deleted file mode 100644
index c1d6fff..0000000
--- a/src/app/readers/profile/following/page.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { ArrowLeft, BadgeCheck, CheckCircle } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useMobileMenu } from "@/hooks/useMobileMenu";
-import Image from "next/image";
-
-interface FollowingUser {
-  id: string;
-  name: string;
-  username: string;
-  isVerified: boolean;
-  avatar?: string;
-}
-
-export default function FollowingPage() {
-  const router = useRouter();
-  const { openMobileMenu } = useMobileMenu();
-  const [activeTab, setActiveTab] = useState<
-    "total" | "verified" | "unverified"
-  >("total");
-
-  const followingUsers: FollowingUser[] = Array.from({ length: 9 }, (_, i) => ({
-    id: `user-${i + 1}`,
-    name: "Darrin Collins",
-    username: "@darrin_collins",
-    isVerified: i < 7, // First 7 are verified
-    avatar: "/reader-image.png?height=40&width=40",
-  }));
-
-  const totalCount = followingUsers.length;
-  const verifiedCount = followingUsers.filter((user) => user.isVerified).length;
-  const unverifiedCount = totalCount - verifiedCount;
-
-  const filteredUsers = followingUsers.filter((user) => {
-    if (activeTab === "verified") return user.isVerified;
-    if (activeTab === "unverified") return !user.isVerified;
-    return true;
-  });
-
-  const handleUnfollow = (userId: string) => {
-    console.log("Unfollow user:", userId);
-  };
-
-  return (
-    <div className="bg-white min-h-screen m-4 md:m-6">
-      {/* Mobile Header */}
-      <div className="lg:hidden bg-gray-50 p-4 flex items-center gap-3">
-        <button onClick={openMobileMenu} className="p-1">
-          <ArrowLeft size={20} className="text-gray-600" />
-        </button>
-        <h1 className="text-lg font-semibold text-gray-800">Following</h1>
-      </div>
-
-      <div className="p-6 max-w-4xl mx-auto">
-        {/* Desktop Header */}
-        <div className="hidden lg:flex items-start gap-3 mb-10">
-          <h1 className="text-xl font-semibold text-gray-800">Following</h1>
-        </div>
-
-        {/* Stats Tabs */}
-        <div className="flex gap-6 mb-6 ">
-          <button
-            onClick={() => setActiveTab("total")}
-            className={`px-3 py-1 text-sm font-medium border-[0.5px] rounded-2xl transition-colors ${
-              activeTab === "total"
-                ? "text-gray-700"
-                : "border-transparent text-gray-500 hover:text-gray-700"
-            }`}
-          >
-            Total <span className="ml-1 font-bold">{totalCount}</span>
-          </button>
-          <button
-            onClick={() => setActiveTab("verified")}
-            className={`px-3 py-1 text-sm font-medium border-[0.5px] rounded-2xl  transition-colors ${
-              activeTab === "verified"
-                ? "text-gray-700"
-                : "border-transparent text-gray-500 hover:text-gray-700"
-            }`}
-          >
-            Verified <span className="ml-1 font-bold">{verifiedCount}</span>
-          </button>
-          <button
-            onClick={() => setActiveTab("unverified")}
-            className={`px-3 py-1 text-sm font-medium border-[0.5px] rounded-2xl  transition-colors ${
-              activeTab === "unverified"
-                ? "text-gray-700"
-                : "border-transparent text-gray-500 hover:text-gray-700"
-            }`}
-          >
-            Unverified <span className="ml-1 font-bold">{unverifiedCount}</span>
-          </button>
-        </div>
-
-        {/* Following List */}
-        <div className="space-y-4 ">
-          {filteredUsers.map((user) => (
-            <div
-              key={user.id}
-              className="flex items-center justify-between p-4 hover:bg-gray-50  transition-colors border-b-[0.5px] border-gray-100"
-            >
-              <div className="flex items-center gap-3">
-                <div className="w-10 h-10 rounded-full bg-gray-200 overflow-hidden">
-                  <Image
-                    src={user.avatar || "/reader-image.png"}
-                    alt={user.name}
-                    width={40}
-                    height={40}
-                    className="object-cover w-full h-full"
-                  />
-                </div>
-                <div className="flex items-center gap-2">
-                  <span className="font-medium text-gray-900">{user.name}</span>
-                  {user.isVerified && (
-                    <BadgeCheck size={16} className="text-blue-500" />
-                  )}
-                </div>
-              </div>
-              <button
-                onClick={() => handleUnfollow(user.id)}
-                className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 bg-gray-50 hover:bg-gray-100  rounded-2xl transition-colors"
-              >
-                Unfollow
-              </button>
-            </div>
-          ))}
-        </div>
-
-        {filteredUsers.length === 0 && (
-          <div className="text-center py-12">
-            <p className="text-gray-500">No users found in this category.</p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/readers/profile/layout.tsx b/src/app/readers/profile/layout.tsx
deleted file mode 100644
index 9cc9e88..0000000
--- a/src/app/readers/profile/layout.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-"use client";
-import React, { useState } from "react";
-import { X } from "lucide-react";
-import { usePathname, useRouter } from "next/navigation";
-import Link from "next/link";
-import { MobileMenuContext } from "@/hooks/useMobileMenu";
-import NavBar from "@/components/landingpage/NavBar";
-
-interface ReaderProfileLayoutProps {
-  children: React.ReactNode;
-}
-
-export default function ReaderProfileLayout({
-  children,
-}: ReaderProfileLayoutProps) {
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  const pathname = usePathname();
-  const router = useRouter();
-
-  const navItems = [
-    {
-      label: "Profile Details",
-      href: "/reader-profile",
-    },
-    {
-      label: "Following",
-      href: "/reader-profile/following",
-    },
-    {
-      label: "Preferences",
-      href: "/reader-profile/preferences",
-    },
-    {
-      label: "Privacy Settings",
-      href: "/reader-profile/privacy",
-    },
-    {
-      label: "Sign Out",
-      href: "/reader-profile/sign-out",
-    },
-  ];
-
-  return (
-    <MobileMenuContext.Provider
-      value={{ openMobileMenu: () => setIsMobileMenuOpen(true) }}
-    >
-      <div className="min-h-screen bg-gray-50">
-        <NavBar />
-        <div className="flex">
-          {/* Desktop Sidebar */}
-          <div className="hidden lg:block w-64 min-h-screen">
-            <div className="p-6">
-              <nav className="space-y-2">
-                {navItems.map((item) => (
-                  <Link
-                    key={item.href}
-                    href={item.href}
-                    className={`block px-4 py-3 rounded-lg text-sm transition-colors ${
-                      pathname === item.href
-                        ? "bg-gray-200 text-gray-900 font-medium"
-                        : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
-                    }`}
-                  >
-                    {item.label}
-                  </Link>
-                ))}
-              </nav>
-            </div>
-          </div>
-
-          {/* Mobile Menu Overlay */}
-          <div
-            className={`lg:hidden fixed inset-0 z-40 transition-all duration-300 ${
-              isMobileMenuOpen
-                ? " bg-transparent pointer-events-auto"
-                : "bg-transparent pointer-events-none"
-            }`}
-            onClick={() => setIsMobileMenuOpen(false)}
-          >
-            {/* Mobile Menu Panel */}
-            <div
-              className={`absolute p-4 z-50 top-16 right-0 bottom-0 w-full max-w-full bg-gray-50 shadow-xl transform transition-transform duration-300 ease-out ${
-                isMobileMenuOpen ? "translate-x-0" : "translate-x-full"
-              }`}
-              onClick={(e) => e.stopPropagation()}
-            >
-              <div className="p-4 px-4 flex items-center justify-between">
-                <h2 className="text-lg font-semibold">Profile</h2>
-                <button
-                  onClick={() => setIsMobileMenuOpen(false)}
-                  className="p-1"
-                >
-                  <X size={20} className="text-gray-600" />
-                </button>
-              </div>
-              <nav className="p-4 space-y-2 bg-white">
-                {navItems.map((item) => (
-                  <Link
-                    key={item.href}
-                    href={item.href}
-                    onClick={() => setIsMobileMenuOpen(false)}
-                    className={`block px-4 py-3 rounded-lg text-sm transition-colors ${
-                      pathname === item.href
-                        ? "bg-gray-100 text-gray-900 font-medium"
-                        : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
-                    }`}
-                  >
-                    {item.label}
-                  </Link>
-                ))}
-              </nav>
-            </div>
-          </div>
-
-          {/* Main Content */}
-          <div className="flex-1">{children}</div>
-        </div>
-      </div>
-    </MobileMenuContext.Provider>
-  );
-}
diff --git a/src/app/readers/profile/page.tsx b/src/app/readers/profile/page.tsx
deleted file mode 100644
index dcaf92d..0000000
--- a/src/app/readers/profile/page.tsx
+++ /dev/null
@@ -1,260 +0,0 @@
-"use client";
-
-import type React from "react";
-
-import { useState, useRef, type ChangeEvent } from "react";
-import Image from "next/image";
-import { ArrowLeft } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useMobileMenu } from "@/hooks/useMobileMenu";
-
-interface ProfileFormData {
-  firstName: string;
-  lastName: string;
-  username: string;
-  email: string;
-  bio: string;
-  profilePicture: string | null;
-}
-
-export default function ProfileDetailsPage() {
-  const router = useRouter();
-  const { openMobileMenu } = useMobileMenu();
-  const [formData, setFormData] = useState<ProfileFormData>({
-    firstName: "Faith",
-    lastName: "Haruna",
-    username: "Faith_Haruna",
-    email: "example@gmail.com",
-    bio: "",
-    profilePicture: null,
-  });
-
-  const [preview, setPreview] = useState<string | null>(
-    "/reader-profile-dummy-image.png"
-  );
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  const handleInputChange = (
-    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    const { name, value } = e.target;
-    setFormData((prev) => ({
-      ...prev,
-      [name]: value,
-    }));
-  };
-
-  const handleImageUpload = (e: ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-
-    const reader = new FileReader();
-    reader.onload = () => {
-      setPreview(reader.result as string);
-      setFormData((prev) => ({
-        ...prev,
-        profilePicture: reader.result as string,
-      }));
-    };
-    reader.readAsDataURL(file);
-  };
-
-  const triggerFileInput = () => {
-    fileInputRef.current?.click();
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    console.log("Form submitted:", formData);
-  };
-
-  return (
-    <div className="bg-white m-4 md:m-6 rounded-xl">
-      {/* Mobile Header */}
-      <div className="lg:hidden bg-gray-50 p-4 flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <button onClick={openMobileMenu} className="p-1">
-            <ArrowLeft size={20} className="text-gray-600" />
-          </button>
-          <h1 className="text-lg font-semibold text-gray-800">Profile</h1>
-        </div>
-        <button className="px-4 py-2 bg-blue-50 text-blue-600 rounded-full text-sm font-medium">
-          Edit Profile
-        </button>
-      </div>
-
-      <div className="p-6 max-w-4xl mx-auto">
-        <form onSubmit={handleSubmit} className="space-y-8">
-          {/* Profile Picture Section */}
-          <div className="flex flex-col items-center text-center ">
-            <div className="relative mb-4">
-              <div className="w-32 h-32 rounded-full overflow-hidden ">
-                {preview ? (
-                  <Image
-                    src={preview || "/placeholder.svg"}
-                    alt="Profile Preview"
-                    width={160}
-                    height={160}
-                    className="object-cover w-full h-full"
-                  />
-                ) : (
-                  <div className="w-full h-full flex items-center justify-center bg-pink-100">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      className="h-16 w-16 text-pink-300"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-                      />
-                    </svg>
-                  </div>
-                )}
-              </div>
-              <button
-                type="button"
-                onClick={triggerFileInput}
-                className="absolute bottom-0 right-0 bg-white border border-gray-300 rounded-full px-3 py-1 text-xs text-gray-600 shadow-sm"
-              >
-                Change
-              </button>
-              <input
-                type="file"
-                ref={fileInputRef}
-                onChange={handleImageUpload}
-                accept="image/*"
-                className="hidden"
-              />
-            </div>
-
-            <div className="space-y-2">
-              <div className="flex gap-x-2">
-                {" "}
-                <h2 className="text-lg font-semibold text-gray-900">
-                  {formData.username}
-                </h2>
-                <div className="flex items-center justify-center gap-2 px-3 py-1 border border-blue-600 bg-blue-50 rounded-full ">
-                  <span className="bg-gray-300 rounded-full h-4 w-4"></span>
-                  <span className=" text-gray-900 text-sm font-medium">
-                    Enthusiast
-                  </span>
-                </div>
-              </div>
-              <p className="text-xs text-gray-500">ID: CLRD00010</p>
-              <p className="text-sm text-gray-500">
-                Following <span className="text-blue-600 font-medium">17</span>
-              </p>
-            </div>
-          </div>
-
-          {/* Form Fields */}
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-            <div>
-              <label
-                htmlFor="firstName"
-                className="block text-sm font-medium text-gray-600 mb-2"
-              >
-                First Name
-              </label>
-              <input
-                type="text"
-                id="firstName"
-                name="firstName"
-                value={formData.firstName}
-                onChange={handleInputChange}
-                className="w-full p-3 border text-sm text-gray-400 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent placeholder:text-gray-300"
-                placeholder="Faith"
-              />
-            </div>
-
-            <div>
-              <label
-                htmlFor="lastName"
-                className="block text-sm font-medium text-gray-600 mb-2"
-              >
-                Last Name
-              </label>
-              <input
-                type="text"
-                id="lastName"
-                name="lastName"
-                value={formData.lastName}
-                onChange={handleInputChange}
-                className="w-full p-3 border text-sm text-gray-400 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                placeholder="Haruna"
-              />
-            </div>
-
-            <div>
-              <label
-                htmlFor="username"
-                className="block text-sm font-medium text-gray-600 mb-2"
-              >
-                Username
-              </label>
-              <input
-                type="text"
-                id="username"
-                name="username"
-                value={formData.username}
-                onChange={handleInputChange}
-                className="w-full p-3 border text-sm text-gray-400 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                placeholder="Faith_Haruna"
-              />
-            </div>
-
-            <div>
-              <label
-                htmlFor="email"
-                className="block text-sm font-medium text-gray-600 mb-2"
-              >
-                Email Address
-              </label>
-              <input
-                type="email"
-                id="email"
-                name="email"
-                value={formData.email}
-                onChange={handleInputChange}
-                className="w-full p-3 border text-sm text-gray-400 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                placeholder="example@gmail.com"
-              />
-            </div>
-          </div>
-
-          <div>
-            <label
-              htmlFor="bio"
-              className="block text-sm font-medium text-gray-600 mb-2"
-            >
-              Bio
-            </label>
-            <textarea
-              id="bio"
-              name="bio"
-              value={formData.bio}
-              onChange={handleInputChange}
-              className="w-full p-3 border text-sm text-gray-400 border-gray-300 rounded-lg h-32 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
-              placeholder="Enter your bio"
-            />
-          </div>
-
-          {/* Desktop Edit Button */}
-          <div className="hidden lg:flex justify-start w-1/2">
-            <button
-              type="submit"
-              className="px-8 w-full py-3 bg-gradient-to-b from-[#EDF7FF] via-[#cee6f9] to-[#5f9efd] text-gray-600 rounded-lg font-medium hover:bg-blue-100 transition-colors"
-            >
-              Edit Profile
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/readers/profile/preferences/page.tsx b/src/app/readers/profile/preferences/page.tsx
deleted file mode 100644
index 14581a0..0000000
--- a/src/app/readers/profile/preferences/page.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-// PreferencesPage.tsx
-"use client";
-
-import { useState } from "react";
-import { ArrowLeft, ChevronDown, X } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useMobileMenu } from "@/hooks/useMobileMenu";
-
-const allGenres = [
-  "Fiction",
-  "Drama",
-  "Horror",
-  "Comedy",
-  "Sci-Fi",
-  "Fantasy",
-  "Romance",
-  "Mystery",
-  "Thriller",
-  "Non-Fiction",
-];
-const allFormats = [
-  "short stories",
-  "novels",
-  "poetry",
-  "essays",
-  "biographies",
-  "memoirs",
-];
-
-export default function PreferencesPage() {
-  const router = useRouter();
-  const { openMobileMenu } = useMobileMenu();
-  const [selectedGenres, setSelectedGenres] = useState<string[]>([
-    "Fiction",
-    "Drama",
-  ]);
-  const [selectedFormats, setSelectedFormats] = useState<string[]>([
-    "short stories",
-  ]);
-  const [isGenreDropdownOpen, setIsGenreDropdownOpen] = useState(false);
-  const [isFormatDropdownOpen, setIsFormatDropdownOpen] = useState(false);
-
-  const handleGenreSelect = (genre: string) => {
-    if (!selectedGenres.includes(genre)) {
-      setSelectedGenres([...selectedGenres, genre]);
-    }
-    setIsGenreDropdownOpen(false);
-  };
-
-  const handleFormatSelect = (format: string) => {
-    if (!selectedFormats.includes(format)) {
-      setSelectedFormats([...selectedFormats, format]);
-    }
-    setIsFormatDropdownOpen(false);
-  };
-
-  const removeGenre = (genre: string) => {
-    setSelectedGenres(selectedGenres.filter((g) => g !== genre));
-  };
-
-  const removeFormat = (format: string) => {
-    setSelectedFormats(selectedFormats.filter((f) => f !== format));
-  };
-
-  const handleSave = () => {
-    console.log("Saving preferences:", { selectedGenres, selectedFormats });
-  };
-
-  const handleCancel = () => {
-    setSelectedGenres(["Fiction", "Drama"]);
-    setSelectedFormats(["short stories"]);
-  };
-
-  return (
-    <div className="bg-white min-h-screen m-4 md:m-6 rounded-xl">
-      {/* Mobile Header */}
-      <div className="lg:hidden bg-gray-50 p-4 flex items-center gap-3">
-        <button onClick={openMobileMenu} className="p-1">
-          <ArrowLeft size={20} className="text-gray-600" />
-        </button>
-        <h1 className="text-lg font-semibold text-gray-800">Preference</h1>
-      </div>
-
-      <div className="p-6 max-w-4xl mx-auto">
-        {/* Desktop Header */}
-        <div className="hidden lg:flex items-start gap-3 mb-10">
-          <h1 className="text-xl font-semibold text-gray-800">Preferences</h1>
-        </div>
-
-        <div className="space-y-8">
-          {/* Genre Specialization */}
-          <div>
-            <label className="block text-sm font-medium text-gray-400 mb-3">
-              Genre specialization(s)
-            </label>
-
-            <div className="relative mb-4">
-              <button
-                onClick={() => setIsGenreDropdownOpen(!isGenreDropdownOpen)}
-                className="w-full px-4 py-3 border border-gray-300 rounded-lg bg-white text-left flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              >
-                <span className="text-gray-400">Genres</span>
-                <ChevronDown size={20} className="text-gray-400" />
-              </button>
-
-              {isGenreDropdownOpen && (
-                <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-gray-300 rounded-lg shadow-lg z-10 max-h-48 overflow-y-auto">
-                  {allGenres
-                    .filter((genre) => !selectedGenres.includes(genre))
-                    .map((genre) => (
-                      <button
-                        key={genre}
-                        onClick={() => handleGenreSelect(genre)}
-                        className="w-full px-4 py-2 text-left hover:bg-gray-50 transition-colors"
-                      >
-                        {genre}
-                      </button>
-                    ))}
-                </div>
-              )}
-            </div>
-
-            <div className="flex flex-wrap gap-2 mb-6">
-              {selectedGenres.map((genre) => (
-                <span
-                  key={genre}
-                  className="bg-blue-50 text-gray-700 px-2.5 py-2 rounded-full text-sm flex items-center gap-2"
-                >
-                  {genre}
-                  <button
-                    onClick={() => removeGenre(genre)}
-                    className="text-gray-500 hover:text-gray-800"
-                  >
-                    <X size={14} />
-                  </button>
-                </span>
-              ))}
-            </div>
-          </div>
-
-          {/* Favorite Formats */}
-          <div>
-            <label className="block text-sm font-medium text-gray-400 mb-3">
-              Favorite formats
-            </label>
-
-            <div className="relative mb-4">
-              <button
-                onClick={() => setIsFormatDropdownOpen(!isFormatDropdownOpen)}
-                className="w-full px-4 py-3 border border-gray-300 rounded-lg bg-white text-left flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              >
-                <span className="text-gray-400">Formats</span>
-                <ChevronDown size={20} className="text-gray-400" />
-              </button>
-
-              {isFormatDropdownOpen && (
-                <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-gray-300 rounded-lg shadow-lg z-10 max-h-48 overflow-y-auto">
-                  {allFormats
-                    .filter((format) => !selectedFormats.includes(format))
-                    .map((format) => (
-                      <button
-                        key={format}
-                        onClick={() => handleFormatSelect(format)}
-                        className="w-full px-2.5 py-2 text-left hover:bg-gray-50 transition-colors"
-                      >
-                        {format}
-                      </button>
-                    ))}
-                </div>
-              )}
-            </div>
-
-            <div className="flex flex-wrap gap-2 mb-8">
-              {selectedFormats.map((format) => (
-                <span
-                  key={format}
-                  className="bg-blue-50 text-gray-700 px-2.5 py-2 rounded-full text-sm flex items-center gap-2"
-                >
-                  {format}
-                  <button
-                    onClick={() => removeFormat(format)}
-                    className="text-gray-500 hover:text-gray-800"
-                  >
-                    <X size={14} />
-                  </button>
-                </span>
-              ))}
-            </div>
-          </div>
-
-          {/* Action Buttons */}
-          <div className="flex flex-col lg:flex-row gap-4">
-            <button
-              onClick={handleCancel}
-              className="flex-1 py-3 px-6 bg-gradient-to-b from-[#EDF7FF] via-[#cee6f9] to-[#5f9efd] text-blue-950 rounded-lg font-medium hover:bg-blue-100 transition-colors"
-            >
-              Cancel
-            </button>
-            <button
-              onClick={handleSave}
-              className="flex-1 py-3 px-6 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
-            >
-              Save Change
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/readers/profile/privacy/page.tsx b/src/app/readers/profile/privacy/page.tsx
deleted file mode 100644
index 51fd0cc..0000000
--- a/src/app/readers/profile/privacy/page.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client";
-import { ArrowLeft } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useMobileMenu } from "@/hooks/useMobileMenu";
-
-export default function Privacy() {
-  const router = useRouter();
-  const { openMobileMenu } = useMobileMenu();
-
-  return (
-    <div className=" min-h-screen bg-white m-4 md:m-6 rounded-[8px]">
-      {/* Mobile Header */}
-      <div className="lg:hidden bg-gray-50 p-4 flex items-center gap-3">
-        <button onClick={openMobileMenu} className="p-1">
-          <ArrowLeft size={20} className="text-gray-600" />
-        </button>
-        <h1 className="text-lg font-semibold text-gray-800">Privacy</h1>
-      </div>
-
-      <div className="p-6 max-w-md mx-auto pt-12 bg-white text-center">
-        {/* Desktop Header */}
-        <div className="hidden lg:flex items-center justify-center gap-3 mb-10">
-          <h1 className="text-xl font-semibold text-gray-800">Privacy</h1>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/readers/profile/sign-out/page.tsx b/src/app/readers/profile/sign-out/page.tsx
deleted file mode 100644
index a3c5318..0000000
--- a/src/app/readers/profile/sign-out/page.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client";
-import { ArrowLeft } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useMobileMenu } from "@/hooks/useMobileMenu";
-
-export default function SignOutPage() {
-  const router = useRouter();
-  const { openMobileMenu } = useMobileMenu();
-
-  return (
-    <div className=" min-h-screen bg-white m-4 md:m-6 rounded-[8px]">
-      {/* Mobile Header */}
-      <div className="lg:hidden bg-gray-50 p-4 flex items-center gap-3">
-        <button onClick={openMobileMenu} className="p-1">
-          <ArrowLeft size={20} className="text-gray-600" />
-        </button>
-        <h1 className="text-lg font-semibold text-gray-800">Sign Out</h1>
-      </div>
-
-      <div className="p-6 max-w-md mx-auto pt-12 bg-white text-center">
-        {/* Desktop Header */}
-        <div className="hidden lg:flex items-center justify-center gap-3 mb-10">
-          <h1 className="text-xl font-semibold text-gray-800">Sign Out</h1>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/readers/stats-and-achievements/page.tsx b/src/app/readers/stats-and-achievements/page.tsx
deleted file mode 100644
index f777e98..0000000
--- a/src/app/readers/stats-and-achievements/page.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-"use client";
-
-import { Header } from "@/components/dashboard/header";
-import { TimeFilter } from "@/components/stats-achievements/time-filter";
-import { StatsGrid } from "@/components/stats-achievements/stats-grid";
-import { BadgeSection } from "@/components/stats-achievements/badge-section";
-import { GoalsSection } from "@/components/stats-achievements/goals-section";
-import { AchievementsSection } from "@/components/stats-achievements/achievements-section";
-import { useState } from "react";
-
-// Mock data for different time periods
-const timeData = {
-  "This Week": {
-    hours: 16,
-    minutes: 37,
-    stats: [
-      { label: "Books Completed", value: "2", color: "#096CFF" },
-      {
-        label: "Average Session",
-        value: "45",
-        unit: "Minutes",
-        color: "#096CFF",
-      },
-      { label: "Most Read Genre", value: "Fiction", color: "#096CFF" },
-      { label: "Most Read Author", value: "J.K. Rowling", color: "#096CFF" },
-      { label: "Longest Read", value: "4", unit: "Hours", color: "#096CFF" },
-      { label: "Sessions", value: "12", color: "#096CFF" },
-      { label: "Abandoned", value: "1", color: "#096CFF" },
-    ],
-  },
-  "This Month": {
-    hours: 68,
-    minutes: 24,
-    stats: [
-      { label: "Books Completed", value: "8", color: "#096CFF" },
-      {
-        label: "Average Session",
-        value: "52",
-        unit: "Minutes",
-        color: "#096CFF",
-      },
-      { label: "Most Read Genre", value: "Mystery", color: "#096CFF" },
-      { label: "Most Read Author", value: "Agatha Christie", color: "#096CFF" },
-      { label: "Longest Read", value: "6", unit: "Hours", color: "#096CFF" },
-      { label: "Sessions", value: "45", color: "#096CFF" },
-      { label: "Abandoned", value: "3", color: "#096CFF" },
-    ],
-  },
-  "This Year": {
-    hours: 324,
-    minutes: 18,
-    stats: [
-      { label: "Books Completed", value: "42", color: "#096CFF" },
-      {
-        label: "Average Session",
-        value: "48",
-        unit: "Minutes",
-        color: "#096CFF",
-      },
-      { label: "Most Read Genre", value: "Sci-Fi", color: "#096CFF" },
-      { label: "Most Read Author", value: "Isaac Asimov", color: "#096CFF" },
-      { label: "Longest Read", value: "8", unit: "Hours", color: "#096CFF" },
-      { label: "Sessions", value: "186", color: "#096CFF" },
-      { label: "Abandoned", value: "12", color: "#096CFF" },
-    ],
-  },
-  "All Time": {
-    hours: 1247,
-    minutes: 52,
-    stats: [
-      { label: "Books Completed", value: "156", color: "#096CFF" },
-      {
-        label: "Average Session",
-        value: "51",
-        unit: "Minutes",
-        color: "#096CFF",
-      },
-      { label: "Most Read Genre", value: "Fantasy", color: "#096CFF" },
-      {
-        label: "Most Read Author",
-        value: "Brandon Sanderson",
-        color: "#096CFF",
-      },
-      { label: "Longest Read", value: "12", unit: "Hours", color: "#096CFF" },
-      { label: "Sessions", value: "743", color: "#096CFF" },
-      { label: "Abandoned", value: "28", color: "#096CFF" },
-    ],
-  },
-};
-
-export default function StatsAndAchievementsPage() {
-  const [selectedPeriod, setSelectedPeriod] = useState("This Week");
-  const currentData = timeData[selectedPeriod as keyof typeof timeData];
-
-  return (
-    <div className="min-h-screen bg-[#f8f9fa]">
-      <Header title="Stats & Achievements" />
-
-      <div className="p-4 lg:p-6 space-y-6">
-        {/* Total Hours Read Section */}
-        <div className="bg-white rounded-lg border border-[#e7e7e7] px-2 py-4 lg:p-6">
-          <div className="mb-4">
-            <h2 className="text-lg font-bold text-gray-400 mb-4">
-              Total Hours Read
-            </h2>
-            <TimeFilter
-              selectedPeriod={selectedPeriod}
-              onPeriodChange={setSelectedPeriod}
-            />
-          </div>
-
-          {/* Large Time Display */}
-          <div className="bg-[#096CFF0A] rounded-lg p-6 mb-6 border-[0.5px] border-[#4BB1FF]">
-            <div className="flex items-center justify-center gap-4">
-              <div className="flex text-center items-center gap-2">
-                <div className="text-2xl lg:text-4xl font-bold text-blue-600 transition-all duration-300">
-                  {currentData.hours}
-                </div>
-                <div className="text-sm text-blue-500 font-light mt-1 bg-[#096CFF1A] px-3 py-1 rounded-3xl">
-                  Hours
-                </div>
-              </div>
-              <span className="text-[#D6ECFF] text-3xl">:</span>
-              <div className="text-center flex items-center gap-2">
-                <div className="text-2xl lg:text-4xl font-bold text-blue-600 transition-all duration-300">
-                  {currentData.minutes}
-                </div>
-                <div className="text-sm font-light text-blue-500 mt-1 bg-[#096CFF1A] px-3 py-1 rounded-3xl">
-                  Minutes
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Stats Grid */}
-          <StatsGrid stats={currentData.stats} />
-        </div>
-        <div className="rounded-xl border border-[#e7e7e7] bg-white space-y-4">
-          {/* Badge Section */}
-          <BadgeSection />
-
-          {/* Goals Section */}
-          <GoalsSection />
-
-          {/* Achievements Section */}
-          <AchievementsSection />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/readers/transactions/page.tsx b/src/app/readers/transactions/page.tsx
deleted file mode 100644
index 63aa5db..0000000
--- a/src/app/readers/transactions/page.tsx
+++ /dev/null
@@ -1,340 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Input } from "@/components/ui/input";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import {
-  ChevronLeft,
-  ChevronRight,
-} from "lucide-react";
-import { Header } from "@/components/dashboard/header";
-import stk from "../../../../public/image 2.svg"
-import Image from "next/image";
-import TransactionDetail from "./transaction-details";
-
-const transactionData = [
-  {
-    id: "Tran-124B",
-    type: "Monthly Subscription",
-    amount: "100.00 STRK",
-    status: "Successful",
-    date: "26 April",
-    details: {
-      title: "Monthly Subscription",
-      subtitle: "Premium Plan",
-      category: "Subscription",
-      amountPaid: "100.00 STRK",
-      platformCommission: "5.00 STRK",
-      transactionType: "Monthly Subscription",
-      status: "Successful",
-      date: "26 April, 2025",
-      time: "14:32",
-      nftId: "#0001",
-      buyer: "USER-0001",
-      transactionId: "TRANS-00110",
-      transactionHash: "0x5a3f7b...d6e7f8g",
-      confirmationStatus: "12/12",
-    },
-  },
-  {
-    id: "Tran-124B",
-    type: "Book Purchase",
-    amount: "800.45 STRK",
-    status: "Successful",
-    date: "25 April",
-    details: {
-      title: "99 Laws of Power",
-      subtitle: "NFT Edition",
-      category: "eBook",
-      amountPaid: "320.05 STRK",
-      platformCommission: "32 STRK",
-      transactionType: "Book Purchase",
-      status: "Successful",
-      date: "12 March, 2025",
-      time: "16:32",
-      nftId: "#0002",
-      buyer: "USER-0001",
-      transactionId: "TRANS-00112",
-      transactionHash: "0x5a3f7b...d6e7f8g",
-      confirmationStatus: "12/12",
-    },
-  },
-  {
-    id: "Tran-124B",
-    type: "Book Purchase",
-    amount: "56.78 STRK",
-    status: "Failed",
-    date: "20 April",
-    details: {
-      title: "Digital Marketing Guide",
-      subtitle: "Standard Edition",
-      category: "eBook",
-      amountPaid: "56.78 STRK",
-      platformCommission: "2.84 STRK",
-      transactionType: "Book Purchase",
-      status: "Failed",
-      date: "20 April, 2025",
-      time: "10:15",
-      nftId: "#0003",
-      buyer: "USER-0001",
-      transactionId: "TRANS-00113",
-      transactionHash: "0x5a3f7b...d6e7f8g",
-      confirmationStatus: "0/12",
-    },
-  },
-  {
-    id: "Tran-124B",
-    type: "NFT Purchase",
-    amount: "200.5 STRK",
-    status: "Successful",
-    date: "18 April",
-    details: {
-      title: "Crypto Art Collection",
-      subtitle: "Limited Edition",
-      category: "NFT",
-      amountPaid: "200.5 STRK",
-      platformCommission: "10.03 STRK",
-      transactionType: "NFT Purchase",
-      status: "Successful",
-      date: "18 April, 2025",
-      time: "09:45",
-      nftId: "#0004",
-      buyer: "USER-0001",
-      transactionId: "TRANS-00114",
-      transactionHash: "0x5a3f7b...d6e7f8g",
-      confirmationStatus: "12/12",
-    },
-  },
-  {
-    id: "Tran-124B",
-    type: "NFT Purchase",
-    amount: "540.569 STRK",
-    status: "Successful",
-    date: "18 April",
-    details: {
-      title: "Digital Collectible",
-      subtitle: "Rare Edition",
-      category: "NFT",
-      amountPaid: "540.569 STRK",
-      platformCommission: "27.03 STRK",
-      transactionType: "NFT Purchase",
-      status: "Successful",
-      date: "18 April, 2025",
-      time: "11:20",
-      nftId: "#0005",
-      buyer: "USER-0001",
-      transactionId: "TRANS-00115",
-      transactionHash: "0x5a3f7b...d6e7f8g",
-      confirmationStatus: "12/12",
-    },
-  },
-];
-
-export default function TransactionPage() {
-  const [activeFilter, setActiveFilter] = useState("This Week");
-  const [fromDate, setFromDate] = useState("");
-  const [toDate, setToDate] = useState("");
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [selectedTransaction, setSelectedTransaction] = useState<any>(null);
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handleViewDetails = (transaction: any) => {
-    setSelectedTransaction(transaction);
-  };
-
-  const closeModal = () => {
-    setSelectedTransaction(null);
-  };
-
-  return (
-    <div className="flex flex-col h-full">
-      <Header title="Transactions" />
-
-      {/* Content */}
-      <div className="flex-1 p-4 lg:p-6 overflow-auto mt-16">
-        <div className="bg-white rounded-lg border border-gray-200">
-          {/* Transaction History Header */}
-          <div className="p-4 lg:p-6 border-b border-gray-200">
-            <h2 className="text-lg font-medium text-[#B0B0B0] mb-4">
-              Transaction History
-            </h2>
-
-            {/* Filter Controls */}
-            <div className="flex flex-wrap items-center gap-3 justify-between">
-              <div className="flex items-center gap-2">
-                {["This Week", "This Month", "This Year"].map((filter) => (
-                  <Button
-                    key={filter}
-                    variant={activeFilter === filter ? "default" : "outline"}
-                    size="sm"
-                    onClick={() => setActiveFilter(filter)}
-                    className={
-                      activeFilter === filter
-                        ? "bg-[#F6F6F6] text-[#454545] hover:bg-none hover:text-white"
-                        : ""
-                    }
-                  >
-                    {filter}
-                  </Button>
-                ))}
-
-                <Input
-                  placeholder="dd/mm/yyyy"
-                  value={fromDate}
-                  onChange={(e) => setFromDate(e.target.value)}
-                  className="border border-[#E7E7E7] placeholder:text-[#D1D1D1] w-32 h-9"
-                />
-
-                <span className="text-gray-500 text-sm">to</span>
-
-                <Input
-                  placeholder="dd/mm/yyyy"
-                  value={toDate}
-                  onChange={(e) => setToDate(e.target.value)}
-                  className="w-32 h-9 border border-[#E7E7E7] placeholder:text-[#D1D1D1]"
-                />
-
-                <Button
-                  size="sm"
-                  className="bg-[#E7E7E7] text-[#5D5D5D] hover:text-white hover:bg-gray-800"
-                >
-                  Apply
-                </Button>
-              </div>
-
-              <Button variant="outline" size="sm">
-                Filter by
-              </Button>
-            </div>
-          </div>
-
-          {/* Table */}
-          <div className="overflow-x-auto">
-            <Table>
-              <TableHeader>
-                <TableRow className="bg-[#EDF7FF]">
-                  <TableHead className="font-medium text-[#5D5D5D]">
-                    Transaction ID
-                  </TableHead>
-                  <TableHead className="font-medium text-[#5D5D5D]">
-                    Transaction Type
-                  </TableHead>
-                  <TableHead className="font-medium text-[#5D5D5D]">
-                    Amount (STRK)
-                  </TableHead>
-                  <TableHead className="font-medium text-[#5D5D5D]">
-                    Status
-                  </TableHead>
-                  <TableHead className="font-medium text-[#5D5D5D]">
-                    Date
-                  </TableHead>
-                  <TableHead></TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {transactionData.map((transaction, index) => (
-                  <TableRow
-                    key={index}
-                    className="hover:bg-gray-50 text-[#5D5D5D]"
-                  >
-                    <TableCell className="font-medium">
-                      {transaction.id}
-                    </TableCell>
-                    <TableCell>{transaction.type}</TableCell>
-                    <TableCell>
-                      <div className="flex items-center gap-2">
-                        <div className="w-4 h-4 rounded-full flex items-center justify-center">
-                          <Image src={stk} alt="stk" />
-                        </div>
-                        {transaction.amount}
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      <Badge
-                        variant="outline"
-                        className={
-                          transaction.status === "Successful"
-                            ? "bg-green-50 text-green-700 border-green-200"
-                            : "bg-red-50 text-red-700 border-red-200"
-                        }
-                      >
-                        {transaction.status}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="text-gray-600">
-                      {transaction.date}
-                    </TableCell>
-                    <TableCell>
-                      <Button
-                        variant="link"
-                        className="text-blue-600 hover:text-blue-800 p-0"
-                        onClick={() => handleViewDetails(transaction)}
-                      >
-                        View Details
-                      </Button>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-
-          {/* Pagination */}
-          <div className="p-4 lg:p-6 border-t border-gray-200">
-            <div className="flex items-center justify-between">
-              <p className="text-sm text-gray-500">Showing 1 to 5 of 12</p>
-              <div className="flex items-center gap-2">
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="w-8 h-8"
-                  disabled
-                >
-                  <ChevronLeft className="w-4 h-4 text-gray-400" />
-                </Button>
-
-                <Button variant="ghost" size="icon" className="w-8 h-8">
-                  <ChevronRight className="w-4 h-4 text-gray-400" />
-                </Button>
-
-                <span className="text-blue-600 font-medium text-base mx-2">
-                  1
-                </span>
-                <span className="text-gray-400 font-medium text-base mx-2">
-                  2
-                </span>
-                <span className="text-gray-400 font-medium text-base mx-2">
-                  3
-                </span>
-                <span className="text-gray-400 font-medium text-base mx-2">
-                  ...
-                </span>
-                <span className="text-gray-400 font-medium text-base mx-2">
-                  10
-                </span>
-                <span className="text-gray-400 font-medium text-base mx-2">
-                  11
-                </span>
-                <span className="text-gray-400 font-medium text-base mx-2">
-                  12
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Transaction Detail Modal */}
-      <TransactionDetail closeModal={closeModal} selectedTransaction={selectedTransaction} />
-    </div>
-  );
-}
diff --git a/src/app/readers/transactions/transaction-details.tsx b/src/app/readers/transactions/transaction-details.tsx
deleted file mode 100644
index 222a61b..0000000
--- a/src/app/readers/transactions/transaction-details.tsx
+++ /dev/null
@@ -1,381 +0,0 @@
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { ArrowLeft, Download, X } from "lucide-react";
-import Image from "next/image";
-import stk from "../../../../public/image 2.svg";
-
-interface TransactionDetailsProps {
-  selectedTransaction: {
-    details: {
-      title: string;
-      subtitle: string;
-      category: string;
-      amountPaid: string | number;
-      platformCommission: string | number;
-      transactionType: string;
-      nftId: string;
-      status: string;
-      buyer: string;
-      date: string;
-      transactionId: string;
-      time: string;
-      transactionHash: string;
-      confirmationStatus: string;
-    };
-  } | null;
-  closeModal: () => void;
-}
-
-export default function TransactionDetail({ selectedTransaction, closeModal }: TransactionDetailsProps) {
-    const exportPDF = () => {
-      alert("Exporting transaction as PDF...");
-    };
-  return (
-    <>
-      {/* Transaction Detail Modal */}
-      {selectedTransaction && (
-        <>
-          {/* Backdrop */}
-          <div
-            className="fixed inset-0 bg-white/50   backdrop-blur-xs bg-opacity-50 z-50"
-            onClick={closeModal}
-          />
-
-          {/* Desktop Modal */}
-          <div className="hidden lg:block fixed inset-0 z-50 flex items-center justify-center p-4  left-3 top-1/6 transform translate-y- translate-x-1/4">
-            <div className="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-auto">
-              {/* Header */}
-              <div className="flex items-center justify-center relative p-6 border-b border-gray-200">
-                <h2 className="text-xl font-medium text-gray-600">
-                  Transaction Details
-                </h2>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={closeModal}
-                  className="absolute right-6"
-                >
-                  <X className="w-5 h-5 text-gray-400" />
-                </Button>
-              </div>
-
-              {/* Content */}
-              <div className="p-6">
-                {/* Top Section - Book Info and Payment */}
-                <div className="border border-gray-200 rounded-lg p-6 mb-6">
-                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-                    {/* Left Side - Book Info */}
-                    <div className="flex gap-4 border-r ">
-                      <div className="w-32 h-40 bg-gray-300 rounded-lg flex-shrink-0"></div>
-                      <div className="flex-1 flex flex-col justify-center">
-                        <h3 className="text-2xl font-medium text-gray-900 mb-3">
-                          {selectedTransaction.details.title}
-                        </h3>
-                        <p className="text-gray-600 mb-4 text-lg">
-                          {selectedTransaction.details.subtitle}
-                        </p>
-                        <p className="text-gray-500 text-lg">
-                          {selectedTransaction.details.category}
-                        </p>
-                      </div>
-                    </div>
-
-                    {/* Right Side - Payment Details */}
-                    <div className="space-y-6 flex flex-col justify-center">
-                      <div className="flex justify-between items-center">
-                        <span className="text-gray-600 text-lg">
-                          Amount Paid
-                        </span>
-                        <div className="flex items-center gap-2">
-                          <div className="w-5 h-5 bg-purple-600 rounded-full flex items-center justify-center">
-                            <div className="w-4 h-4 rounded-full flex items-center justify-center">
-                              <Image src={stk} alt="stk" />
-                            </div>
-                          </div>
-                          <span className="font-medium text-lg">
-                            {selectedTransaction.details.amountPaid}
-                          </span>
-                        </div>
-                      </div>
-                      <div className="flex justify-between items-center">
-                        <span className="text-gray-600 text-lg">
-                          Platform Commission
-                        </span>
-                        <div className="flex items-center gap-2">
-                          <div className="w-5 h-5 bg-purple-600 rounded-full flex items-center justify-center">
-                            <div className="w-4 h-4 rounded-full flex items-center justify-center">
-                              <Image src={stk} alt="stk" />
-                            </div>
-                          </div>
-                          <span className="font-medium text-lg">
-                            {selectedTransaction.details.platformCommission}
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                {/* Bottom Section - Transaction Details */}
-                <div className="border border-gray-200 rounded-lg p-6 mb-8 relative">
-                  <span className="h-[80%] bg-gray-100 left-1/2 absolute w-[2px]" />
-                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-x-12 gap-y-6">
-                    <div className="flex justify-between items-center">
-                      <span className="text-gray-600 text-lg">
-                        Transaction Type
-                      </span>
-                      <span className="font-medium text-lg">
-                        {selectedTransaction.details.transactionType}
-                      </span>
-                    </div>
-
-                    <div className="flex justify-between items-center">
-                      <span className="text-gray-600 text-lg">NFT ID</span>
-                      <span className="font-medium text-lg">
-                        {selectedTransaction.details.nftId}
-                      </span>
-                    </div>
-
-                    <div className="flex justify-between items-center">
-                      <span className="text-gray-600 text-lg">Status</span>
-                      <Badge
-                        variant="outline"
-                        className={`text-base px-4 py-1 ${
-                          selectedTransaction.details.status === "Successful"
-                            ? "bg-green-50 text-green-700 border-green-300"
-                            : "bg-red-50 text-red-700 border-red-300"
-                        }`}
-                      >
-                        {selectedTransaction.details.status}
-                      </Badge>
-                    </div>
-
-                    <div className="flex justify-between items-center">
-                      <span className="text-gray-600 text-lg">Buyer</span>
-                      <span className="font-medium text-lg">
-                        {selectedTransaction.details.buyer}
-                      </span>
-                    </div>
-
-                    <div className="flex justify-between items-center">
-                      <span className="text-gray-600 text-lg">Date</span>
-                      <span className="font-medium text-lg">
-                        {selectedTransaction.details.date}
-                      </span>
-                    </div>
-
-                    <div className="flex justify-between items-center">
-                      <span className="text-gray-600 text-lg">
-                        Transaction ID
-                      </span>
-                      <span className="font-medium text-lg">
-                        {selectedTransaction.details.transactionId}
-                      </span>
-                    </div>
-
-                    <div className="flex justify-between items-center">
-                      <span className="text-gray-600 text-lg">Time</span>
-                      <span className="font-medium text-lg">
-                        {selectedTransaction.details.time}
-                      </span>
-                    </div>
-
-                    <div className="flex justify-between items-center">
-                      <span className="text-gray-600 text-lg">
-                        Transaction Hash
-                      </span>
-                      <div className="flex items-center gap-2">
-                        <Download className="w-4 h-4 text-gray-400" />
-                        <span className="font-medium text-lg">
-                          {selectedTransaction.details.transactionHash}
-                        </span>
-                      </div>
-                    </div>
-
-                    <div className="flex justify-between items-center lg:col-span-2">
-                      <span className="text-gray-600 text-lg">
-                        Confirmation Status
-                      </span>
-                      <span className="font-medium text-lg">
-                        {selectedTransaction.details.confirmationStatus}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-
-                {/* Action Buttons */}
-                <div className="flex gap-4">
-                  <Button
-                    variant="outline"
-                    onClick={closeModal}
-                    className="flex-1 h-12 text-base border-gray-300 bg-white hover:bg-gray-50"
-                  >
-                    Back
-                  </Button>
-                  <Button
-                    onClick={exportPDF}
-                    className="flex-1 h-12 text-base from-[#EDF7FF] to-[#096CFF] bg-gradient-to-l"
-                  >
-                    Export as PDF
-                  </Button>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Mobile Modal */}
-          <div className="lg:hidden fixed inset-0 z-50 bg-white">
-            {/* Header */}
-            <div className="flex items-center gap-4 p-4 border-b border-gray-200">
-              <Button variant="ghost" size="icon" onClick={closeModal}>
-                <ArrowLeft className="w-5 h-5" />
-              </Button>
-              <h1 className="text-lg font-semibold">Transaction</h1>
-            </div>
-
-            {/* Content */}
-            <div className="p-4 overflow-auto h-full pb-32">
-              {/* Book Card */}
-              <div className="bg-white border border-gray-200 rounded-lg p-4 mb-6">
-                <div className="flex gap-4 mb-4">
-                  <div className="w-20 h-28 bg-gray-200 rounded-lg flex-shrink-0"></div>
-                  <div className="flex-1">
-                    <h3 className="text-lg font-semibold text-gray-900 mb-1">
-                      {selectedTransaction.details.title}
-                    </h3>
-                    <p className="text-gray-600 mb-1">
-                      {selectedTransaction.details.subtitle}
-                    </p>
-                    <p className="text-gray-500 text-sm">
-                      {selectedTransaction.details.category}
-                    </p>
-                  </div>
-                </div>
-
-                <div className="space-y-3">
-                  <div className="flex justify-between items-center">
-                    <span className="text-gray-600">Amount Paid</span>
-                    <div className="flex items-center gap-2">
-                      <div className="w-4 h-4 bg-purple-600 rounded-full flex items-center justify-center">
-                        <div className="w-4 h-4 rounded-full flex items-center justify-center">
-                          <Image src={stk} alt="stk" />
-                        </div>
-                      </div>
-                      <span className="font-semibold">
-                        {selectedTransaction.details.amountPaid}
-                      </span>
-                    </div>
-                  </div>
-                  <div className="flex justify-between items-center">
-                    <span className="text-gray-600">Platform Commission</span>
-                    <div className="flex items-center gap-2">
-                      <div className="w-4 h-4 bg-purple-600 rounded-full flex items-center justify-center">
-                        <div className="w-4 h-4 rounded-full flex items-center justify-center">
-                          <Image src={stk} alt="stk" />
-                        </div>
-                      </div>
-                      <span className="font-semibold">
-                        {selectedTransaction.details.platformCommission}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Transaction Details */}
-              <div className="bg-white border border-gray-200 rounded-lg p-4 mb-6">
-                <div className="space-y-4">
-                  {[
-                    {
-                      label: "Transaction Type",
-                      value: selectedTransaction.details.transactionType,
-                    },
-                    {
-                      label: "Status",
-                      value: selectedTransaction.details.status,
-                      isBadge: true,
-                    },
-                    {
-                      label: "Date",
-                      value: selectedTransaction.details.date,
-                    },
-                    {
-                      label: "Time",
-                      value: selectedTransaction.details.time,
-                    },
-                    {
-                      label: "NFT ID",
-                      value: selectedTransaction.details.nftId,
-                    },
-                    {
-                      label: "Buyer",
-                      value: selectedTransaction.details.buyer,
-                    },
-                    {
-                      label: "Transaction ID",
-                      value: selectedTransaction.details.transactionId,
-                    },
-                    {
-                      label: "Transaction Hash",
-                      value: selectedTransaction.details.transactionHash,
-                      hasIcon: true,
-                    },
-                    {
-                      label: "Confirmation Status",
-                      value: selectedTransaction.details.confirmationStatus,
-                    },
-                  ].map((item, index) => (
-                    <div
-                      key={index}
-                      className="flex justify-between items-center py-2"
-                    >
-                      <span className="text-gray-600">{item.label}</span>
-                      <div className="flex items-center gap-2">
-                        {item.hasIcon && (
-                          <Download className="w-4 h-4 text-gray-400" />
-                        )}
-                        {item.isBadge ? (
-                          <Badge
-                            variant="outline"
-                            className={
-                              item.value === "Successful"
-                                ? "bg-green-50 text-green-700 border-green-200"
-                                : "bg-red-50 text-red-700 border-red-200"
-                            }
-                          >
-                            {item.value}
-                          </Badge>
-                        ) : (
-                          <span className="font-medium text-right">
-                            {item.value}
-                          </span>
-                        )}
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-
-            {/* Fixed Bottom Buttons */}
-            <div className="fixed bottom-0 left-0 right-0 p-4 bg-white border-t border-gray-200 space-y-3">
-              <Button
-                onClick={exportPDF}
-                className="w-full from-[#EDF7FF] to-[#096CFF] bg-gradient-to-l"
-              >
-                Export as PDF
-              </Button>
-              <Button
-                variant="outline"
-                onClick={closeModal}
-                className="w-full bg-transparent"
-              >
-                Back
-              </Button>
-            </div>
-          </div>
-        </>
-      )}
-    </>
-  );
-}
\ No newline at end of file
diff --git a/src/app/readers/wishlist/page.tsx b/src/app/readers/wishlist/page.tsx
deleted file mode 100644
index 519fe2f..0000000
--- a/src/app/readers/wishlist/page.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Card, CardContent } from "@/components/ui/card";
-import { Search, Heart, Star, Images } from "lucide-react";
-import { Header } from "@/components/dashboard/header";
-import Image from "next/image";
-import nft from "../../../../public/Group 13.svg"
-
-const books = [
-  {
-    id: 1,
-    title: "Native Invisibility",
-    author: "Darrin Collins",
-    price: "$10",
-    rating: 4.5,
-    series: "4 Series",
-    image: "/bookCover.png",
-    isLiked: true,
-    nft: false,
-  },
-  {
-    id: 2,
-    title: "Native Invisibility",
-    author: "Darrin Collins",
-    price: "$10",
-    rating: 4.5,
-    series: "4 Series",
-    image: "/bookCover.png",
-    isLiked: true,
-    nft: false,
-  },
-  {
-    id: 3,
-    title: "Native Invisibility",
-    author: "Darrin Collins",
-    price: "$10",
-    rating: 4.5,
-    series: "",
-    image: "/bookCover.png",
-    isLiked: true,
-    nft: true,
-  },
-  {
-    id: 4,
-    title: "Native Invisibility",
-    author: "Darrin Collins",
-    price: "$10",
-    rating: 4.5,
-    series: "",
-    image: "/bookCover.png",
-    isLiked: true,
-    nft: false,
-  },
-];
-
-export default function WishlistPage() {
-  const [searchQuery, setSearchQuery] = useState("");
-  const [bookType, setBookType] = useState("all");
-  const [genre, setGenre] = useState("all");
-  const [likedBooks, setLikedBooks] = useState<number[]>([1, 2, 3, 4]);
-
-  const toggleLike = (bookId: number) => {
-    setLikedBooks((prev) =>
-      prev.includes(bookId)
-        ? prev.filter((id) => id !== bookId)
-        : [...prev, bookId]
-    );
-  };
-
-  const buyAllBooks = () => {
-    alert(`Purchasing ${likedBooks.length} books from wishlist!`);
-  };
-
-  return (
-    <div className="flex flex-col h-full">
-      <Header title="Wishlist" />
-
-      {/* Content */}
-      <div className="flex-1 mt-16 p-4 lg:p-6 overflow-auto">
-        {/* Search and Filters */}
-        <div className="py-4">
-          <div className="">
-            <div className="gap-4 flex items-center relative">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-              <Input
-                placeholder="What are we looking for"
-                className="pl-10 w-[400px] placeholder:text-[#B0B0B0]"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-              />
-              <div className="right-3 flex gap-2">
-                <Select value={bookType} onValueChange={setBookType}>
-                  <SelectTrigger className="w-32 text-[#888888]">
-                    <SelectValue placeholder="Book Type" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">All Types</SelectItem>
-                    <SelectItem value="ebook">E-book</SelectItem>
-                    <SelectItem value="audiobook">Audiobook</SelectItem>
-                  </SelectContent>
-                </Select>
-                <Select value={genre} onValueChange={setGenre}>
-                  <SelectTrigger className="w-32 text-[#888888]">
-                    <SelectValue placeholder="Genre" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">All Genres</SelectItem>
-                    <SelectItem value="fiction">Fiction</SelectItem>
-                    <SelectItem value="mystery">Mystery</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Books Section */}
-        <div className="bg-white rounded-lg border border-gray-200">
-          <div className="p-4 lg:p-6">
-            <div className="flex items-center justify-between mb-6">
-              <h2 className="text-lg font-medium">Books</h2>
-              <Button
-                onClick={buyAllBooks}
-                className="bg-blue-600 hover:bg-blue-700"
-              >
-                Buy All({likedBooks.length}) Now
-              </Button>
-            </div>
-
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-              {books.map((book) => (
-                <Card key={book.id} className="relative group">
-                  <CardContent className="p-4">
-                    <div className="relative mb-4">
-                      <Image
-                        src={book.image || "/bookCover.png"}
-                        alt={book.title}
-                        width={50}
-                        height={50}
-                        className="w-1/2 mx-auto h-48 object-cover rounded-lg"
-                      />
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="absolute top-2 right-2 bg-white/80 hover:bg-white"
-                        onClick={() => toggleLike(book.id)}
-                      >
-                        <Heart
-                          className={`w-4 h-4 ${
-                            likedBooks.includes(book.id)
-                              ? "fill-red-500 text-red-500"
-                              : "text-gray-400"
-                          }`}
-                        />
-                      </Button>
-                    </div>
-                          <div className="space-y-2">
-                              {book.nft && <Image src={nft} alt="nft"/>}
-                      <h3 className="font-medium text-gray-900">
-                        {book.title}
-                      </h3>
-                      <div className="flex items-center gap-1">
-                        <span className="text-sm text-gray-600">
-                          By {book.author}
-                        </span>
-                        <div className="w-2 h-2 bg-blue-600 rounded-full"></div>
-                      </div>
-                      <div className="flex items-center justify-between">
-                        <span className="font-semibold">{book.price}</span>
-                        <div className="flex items-center gap-1">
-                          <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
-                          <span className="text-sm">{book.rating}</span>
-                        </div>
-                      </div>
-                      {book.series && (
-                        <div className="flex gap-1">
-                          <Images className="text-base w-4" />
-                          {book.series}
-                        </div>
-                      )}
-                    </div>
-                  </CardContent>
-                </Card>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
deleted file mode 100644
index 0028268..0000000
--- a/src/app/settings/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-function Page() {
-  return <h1>Page</h1>;
-}
-
-export default Page;
diff --git a/src/app/waiting-room/page.tsx b/src/app/waiting-room/page.tsx
index 22182d9..d5dcc82 100644
--- a/src/app/waiting-room/page.tsx
+++ b/src/app/waiting-room/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { Camera, Mic, PlusCircleIcon } from "lucide-react";
 import { useState } from "react";
-import AddGuestModal from "../readers/discussions-and-clubs/components/AddGuest";
+import AddGuestModal from "../dashboard/readers/discussions-and-clubs/components/AddGuest";
 import Link from "next/link";
 
 export default function WaitingRoom() {
diff --git a/src/app/writers/analytics/page.tsx b/src/app/writers/analytics/page.tsx
deleted file mode 100644
index 0e421a2..0000000
--- a/src/app/writers/analytics/page.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import AnalyticsHeader from "@/components/analytics/analytics-header";
-import AnalyticsStatsGrid from "@/components/analytics/analytics-stats-grid";
-import AnalyticsTabs from "@/components/analytics/analytics-tabs";
-
-export default function AnalyticsDashboard() {
-  return (
-    <div className="min-h-screen bg-gray-50 p-6">
-      <div className="max-w-7xl mx-auto space-y-6">
-        {/* Header with back button */}
-        <AnalyticsHeader />
-        {/* Top Stats Grid */}
-        <AnalyticsStatsGrid />
-
-        <div className="flex flex-col bg-white rounded-lg border border-gray-200/40 p-6 gap-6">
-          {/* Book Performance Stats */}
-          <div className="bg-white p-3">
-            <h2 className="text-xl px-4 font-bold text-gray-400 mb-4">
-              Book Performance Stats
-            </h2>
-            <AnalyticsTabs />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/writers/components/notification-detail.tsx b/src/app/writers/components/notification-detail.tsx
deleted file mode 100644
index dd04e4f..0000000
--- a/src/app/writers/components/notification-detail.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import { ArrowLeft, Trash2 } from "lucide-react";
-import Image from "next/image";
-
-interface NotificationDetailProps {
-  notification: {
-    id: number;
-    title: string;
-    time: string;
-    date: string;
-  };
-  onBack: () => void;
-  onDelete: (id: number) => void;
-}
-
-export default function NotificationDetail({
-  notification,
-  onBack,
-  onDelete,
-}: NotificationDetailProps) {
-  return (
-    <main className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
-      <div className="w-full md:w-[642px] mx-auto bg-[#FFFFFF] rounded-[8px] p-4 z-10">
-        <div className="flex items-center justify-between mb-6">
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={onBack}
-            className="h-8 w-8 p-0 hover:bg-gray-100"
-          >
-            <ArrowLeft className="h-4 w-4" />
-          </Button>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => onDelete(notification.id)}
-            className="h-8 w-8 p-0 hover:bg-gray-100"
-          >
-            <Trash2 className="h-4 w-4" />
-          </Button>
-        </div>
-
-        <div className="space-y-4">
-          <div className="text-center space-y-2">
-            <h1 className="text-[24px] font-semibold text-[#454545]">
-              New Update for Writers
-            </h1>
-            <p className="text-sm text-[#454545] text-[16px]">
-              Step up your writing with our latest update
-            </p>
-          </div>
-
-          <div className="md:w-[300px] w-full mx-auto">
-            <Image
-              src="/coming-soon.png"
-              alt="Notification Banner"
-              width={100}
-              height={100}
-              className="w-full"
-            />
-          </div>
-
-          <div className="text-center">
-            <p className="text-sm text-[#454545] text-[16px] leading-relaxed">
-              Compete against players worldwide, climb the global rankings, and
-              prove your skills. Test your strategy, outmaneuver your opponents,
-              and claim your place at the top. Glory awaits!
-            </p>
-          </div>
-
-          <div className="text-center pt-4">
-            <p className="text-xs text-[#888888] text-[16px]">
-              Sent: {notification.date} {notification.time}
-            </p>
-          </div>
-        </div>
-      </div>
-    </main>
-  );
-}
diff --git a/src/app/writers/earnings/page.tsx b/src/app/writers/earnings/page.tsx
deleted file mode 100644
index 7c30769..0000000
--- a/src/app/writers/earnings/page.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-"use client"
-
-
-import EarningsSummary from "@/components/dashboard-earnings/EarningSummary"
-import LinkWallet from "@/components/dashboard-earnings/LinkWallet"
-import RevenueBreakdown from "@/components/dashboard-earnings/RevenueBreakdown"
-import type { EarningTab } from "@/lib/interfaces/EarningTabInterface"
-import { RevenueChartInterface } from "@/lib/interfaces/RevenueChartInterface"
-import { useEffect, useState } from "react"
-import TransactionHistory from "../../../components/dashboard-earnings/TransactionHistory"
-import RequestPaymentModal from "@/components/dashboard-earnings/RequestPaymentModal"
-import { PaymentPropInterface } from "@/lib/interfaces/PaymentPropInterface"
-
-
-const earningsSumaryDetails: EarningTab[] = [
-  { title: "Current Balance", amount:  3150.0 , border: "#D6ECFF" },
-  { title: "Pending Payout", amount: 100.06, border: "#2396413D" },
-  { title: "Total Payout", amount: 2500.01, border: "#822ECB3D" },
-  { title: "Total Earned", amount: 2730.19, border: "#D6ECFF" },
-]
-
-
-
-
-const chartData: RevenueChartInterface[] = [
-  {
-    name: "Monthly Subcription Payment",
-    value: 121,
-    color: "#236FEA",
-    percentage: "40%"
-  },
-  {
-    name: "NFT Royalty",
-    value: 12,
-    color: "#FBBC05",
-    percentage: "10%"
-  },
-    {
-    name: "NFT",
-    value: 101,
-    color: "#822ECB",
-    percentage: "22%"
-  },
-  {
-    name: "Book Purchase",
-    value: 131,
-    color: "#34A853",
-    percentage: "28%"
-  },
-]
-
-
-
-function EarningsPage() {
-  const [openRequestModal, setOpenRequestModal] =  useState(false)
-  const [walletAddress, setWalletAddress] = useState({
-    braavos: "",
-    argent: "",
-  })
-
-  const ADDRESS_KEY = "walletAddressKey"
-
-  const [paymentDetails, setPaymentDetails] = useState<PaymentPropInterface> ({
-  amount: 0.00,
-  wallet: "",
-  walletAddress: ""
-})
-
-
-
-  // This function loads saved addresses
-  useEffect(() => {
-    const savedAddresses = localStorage.getItem(ADDRESS_KEY)
-    if (savedAddresses) {
-      try {
-        const parsedAddresses = JSON.parse(savedAddresses)
-        setWalletAddress(parsedAddresses)
-      }
-      catch (error) {
-        console.error("Failed to parse saved addresses:", error)
-      }
-    }
-  }, [])
-
-
-  // this function saves wallet address to local storage
-  useEffect(() => {
-    if (walletAddress.braavos || walletAddress.argent) {
-      localStorage.setItem(ADDRESS_KEY, JSON.stringify(walletAddress))
-    }
-  }, [walletAddress])
-
-  return (
-    <div className="flex flex-col gap-8 w-full px-6 py-8 mx-auto font-inter min-w-[350px] ">
-      <EarningsSummary earningsSumaryDetails={earningsSumaryDetails} setOpenRequestModal={setOpenRequestModal} />
-      <TransactionHistory/>
-      <RevenueBreakdown chartData={chartData}  />
-      <LinkWallet walletAddress={walletAddress} setWalletAddress={setWalletAddress}  />
-{openRequestModal &&       <RequestPaymentModal paymentDetails={paymentDetails} setPaymentDetails={setPaymentDetails} walletAddress={walletAddress}  setOpenRequestModal={setOpenRequestModal} />}
-    </div>
-  )
-}
-
-export default EarningsPage
diff --git a/src/app/writers/feedback/page.tsx b/src/app/writers/feedback/page.tsx
deleted file mode 100644
index d4225e5..0000000
--- a/src/app/writers/feedback/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-function FeedbackPage() {
-  return (
-    <div>
-      <h1>Feedback</h1>
-      <p>We value your feedback! Please let us know your thoughts.</p>
-      {/* Add your feedback form or component here */}
-    </div>
-  );
-}
-export default FeedbackPage;
\ No newline at end of file
diff --git a/src/app/writers/layout.tsx b/src/app/writers/layout.tsx
deleted file mode 100644
index b1d5ee5..0000000
--- a/src/app/writers/layout.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import type React from "react";
-import { Sidebar } from "@/components/dashboard/sidebar";
-import "@/app/globals.css";
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <div className="flex min-h-screen bg-[#f6f6f6]">
-      <Sidebar />
-      <div className="ml-64 w-full relative">
-        {children}
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/writers/manage-content/BookContentStep.tsx b/src/app/writers/manage-content/BookContentStep.tsx
deleted file mode 100644
index 12c82c2..0000000
--- a/src/app/writers/manage-content/BookContentStep.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-"use client";
-
-import type React from "react";
-import { ChevronDown } from "lucide-react";
-import ebook1 from "../../../../public/ebook1.svg";
-import ebook2 from "../../../../public/ebook2.svg";
-import Image from "next/image";
-
-interface BookContentStepProps {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  formData: any;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  setFormData: (data: any) => void;
-  onNext: () => void;
-  onBack: () => void;
-}
-
-const BookContentStep: React.FC<BookContentStepProps> = ({
-  formData,
-  setFormData,
-  onNext,
-  onBack,
-}) => {
-  return (
-    <div className="bg-[#f6f6f6] p-">
-      <div className="flex gap-8 w-full mx-auto">
-        {/* Book Cover Upload */}
-        <div className="w-80">
-          <div className="border-2 border-dashed border-[#4BB1FF] bg-[#EDF7FF] rounded-lg p-6 text-center h-[350px] flex flex-col items-center justify-center">
-            <div className=" rounded flex items-center justify-center mb-4">
-              <Image src={ebook1} alt="Create E-Book" />
-            </div>
-            <p className="text-sm text-[#5d5d5d]">Drag and drop or Click to</p>
-            <p className="text-sm text-[#5d5d5d]">choose file from device</p>
-          </div>
-          <p className="text-sm text-[#888888] mt-2">
-            Supported format: JPEG & PNG
-          </p>
-        </div>
-
-        {/* Form Fields */}
-        <div className="flex-1 bg-white rounded-md">
-          <div className="bg-white p-6 rounded-lg mb-6">
-            <h3 className="text-lg font-semibold text-[#B0B0B0] mb-6">
-              Book Content
-            </h3>
-
-            <div className="space-y-8">
-              <div>
-                <label className="block text-sm font-medium text-[#5D5D5D] mb-2">
-                  Book Title
-                </label>
-                <input
-                  type="text"
-                  placeholder="Paul Smart"
-                  className="w-full p-3 border border-[#e7e7e7] rounded-md focus:outline-none focus:ring-1 focus:ring-[#236fea]"
-                  value={formData.bookTitle}
-                  onChange={(e) =>
-                    setFormData({ ...formData, bookTitle: e.target.value })
-                  }
-                />
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-[#5d5d5d] mb-2">
-                  Sub-title
-                </label>
-                <input
-                  type="text"
-                  placeholder="Paul"
-                  className="w-full p-3 border border-[#e7e7e7] rounded-md focus:outline-none focus:ring-1 focus:ring-[#236fea]"
-                  value={formData.subtitle}
-                  onChange={(e) =>
-                    setFormData({ ...formData, subtitle: e.target.value })
-                  }
-                />
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-[#5d5d5d] mb-2">
-                  Language
-                </label>
-                <div className="relative">
-                  <select
-                    className="w-full p-3 border border-[#e7e7e7] rounded-md appearance-none focus:outline-none focus:ring-1 focus:ring-[#236fea]"
-                    value={formData.language}
-                    onChange={(e) =>
-                      setFormData({ ...formData, language: e.target.value })
-                    }
-                  >
-                    <option value="">Select Language</option>
-                    <option value="en">English</option>
-                    <option value="es">Spanish</option>
-                    <option value="fr">French</option>
-                  </select>
-                  <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
-                    <ChevronDown className="h-5 w-5 text-[#888888]" />
-                  </div>
-                </div>
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-[#5d5d5d] mb-2">
-                  Book ISBN <span className="text-[#888888]">(Optional)</span>
-                </label>
-                <input
-                  type="text"
-                  placeholder="978-1-234-56789-7"
-                  className="w-full p-3 border border-[#e7e7e7] rounded-md focus:outline-none focus:ring-1 focus:ring-[#236fea]"
-                  value={formData.isbn}
-                  onChange={(e) =>
-                    setFormData({ ...formData, isbn: e.target.value })
-                  }
-                />
-              </div>
-            </div>
-          </div>
-
-          <div className="bg-white p-6 rounded-lg mb-6">
-            <h3 className="text-lg font-semibold text-[#3d3d3d] mb-4">
-              Manuscript
-            </h3>
-            <div className="border-2 border-dashed border-[#4BB1FF] bg-[#EDF7FF] rounded-lg p-8 text-center  flex flex-col items-center justify-center h-[150px]">
-              <div className=" rounded flex items-center justify-center mb-4">
-                <Image src={ebook2} alt="Create E-Book" />
-              </div>
-              <p className="text-sm text-[#5d5d5d]">
-                Drag and drop or Click to
-              </p>
-              <p className="text-sm text-[#5d5d5d]">choose file from device</p>
-            </div>
-            <p className="text-xs text-[#888888] mt-2">
-              Supported format: DOCX, PDF
-            </p>
-          </div>
-
-          <div className="flex justify-between mt-8 p-6 space-x-6">
-            <button
-              onClick={onBack}
-              className="w-full py-3 cursor-pointer bg-[#edf7ff] text-[#0F265C] rounded-md hover:bg-[#d6ecff] transition-colors"
-            >
-              Back
-            </button>
-            <button
-              onClick={onNext}
-              className=" w-full py-3 cursor-pointer bg-[#096cff] text-white rounded-md hover:bg-[#236fea] transition-colors"
-            >
-              Continue to Details
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default BookContentStep;
diff --git a/src/app/writers/manage-content/BookCreationFlow.tsx b/src/app/writers/manage-content/BookCreationFlow.tsx
deleted file mode 100644
index e3f9918..0000000
--- a/src/app/writers/manage-content/BookCreationFlow.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-// app/manage-content/components/BookCreationFlow.tsx
-import React, { useState } from "react";
-import StepIndicator from "./StepIndicator";
-import BookContentStep from "./BookContentStep";
-import BookDetailsStep from "./BookDetailsStep";
-import PricingStep from "./PricingStep";
-import PreviewModal from "./PreviewModal";
-import SuccessModal from "./SuccessModal";
-
-interface BookCreationFlowProps {
-  currentStep: number;
-  setCurrentStep: (step: number) => void;
-}
-
-const BookCreationFlow: React.FC<BookCreationFlowProps> = ({
-  currentStep,
-  setCurrentStep,
-}) => {
-  const [showPreviewModal, setShowPreviewModal] = useState(false);
-  const [showSuccessModal, setShowSuccessModal] = useState(false);
-  const [formData, setFormData] = useState({
-    bookTitle: "",
-    subtitle: "",
-    language: "",
-    isbn: "",
-    authorName: "Joe Yanum",
-    genres: [] as string[],
-    tags: [] as string[],
-    description: "",
-    pricingOption: "one-time",
-    price: "9.89",
-    stark: "82.22",
-    contributors: [] as Array<{ name: string; type: string; email?: string }>,
-  });
-
-  const handleNext = () => {
-    if (currentStep < 3) {
-      setCurrentStep(currentStep + 1);
-    } else {
-      setShowPreviewModal(true);
-    }
-  };
-
-  const handleBack = () => {
-    if (currentStep > 1) {
-      setCurrentStep(currentStep - 1);
-    } else {
-      setCurrentStep(0);
-    }
-  };
-
-  const handlePublish = () => {
-    setShowPreviewModal(false);
-    setShowSuccessModal(true);
-  };
-
-  const handleSuccessClose = () => {
-    setShowSuccessModal(false);
-    setCurrentStep(0);
-  };
-
-  return (
-    <div className="w-full">
-      <StepIndicator currentStep={currentStep} />
-
-      <div className="mt-5">
-        <h2 className="text-2xl font-semibold mb-6">E-Book</h2>
-
-        {currentStep === 1 && (
-          <BookContentStep
-            formData={formData}
-            setFormData={setFormData}
-            onNext={handleNext}
-            onBack={handleBack}
-          />
-        )}
-
-        {currentStep === 2 && (
-          <BookDetailsStep
-            formData={formData}
-            setFormData={setFormData}
-            onNext={handleNext}
-            onBack={handleBack}
-          />
-        )}
-
-        {currentStep === 3 && (
-          <PricingStep
-            formData={formData}
-            setFormData={setFormData}
-            onNext={handleNext}
-            onBack={handleBack}
-          />
-        )}
-      </div>
-
-      {showPreviewModal && (
-        <PreviewModal
-          formData={formData}
-          onClose={() => setShowPreviewModal(false)}
-          onPublish={handlePublish}
-        />
-      )}
-
-      {showSuccessModal && <SuccessModal onClose={handleSuccessClose} />}
-    </div>
-  );
-};
-
-export default BookCreationFlow;
diff --git a/src/app/writers/manage-content/BookDetailsStep.tsx b/src/app/writers/manage-content/BookDetailsStep.tsx
deleted file mode 100644
index 499580b..0000000
--- a/src/app/writers/manage-content/BookDetailsStep.tsx
+++ /dev/null
@@ -1,323 +0,0 @@
-"use client";
-
-import type React from "react";
-import { useState } from "react";
-import { ChevronDown, X } from "lucide-react";
-import ContributorTypeModal from "./ContributorTypeModal";
-import ContributorDetailsModal from "./ContributorDetailsModal";
-import ebook1 from "../../../../public/ebook1.svg";
-import user from "../../../../public/user1.svg";
-import Image from "next/image";
-
-interface BookDetailsStepProps {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  formData: any;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  setFormData: (data: any) => void;
-  onNext: () => void;
-  onBack: () => void;
-}
-
-const BookDetailsStep: React.FC<BookDetailsStepProps> = ({
-  formData,
-  setFormData,
-  onNext,
-  onBack,
-}) => {
-  const [showContributorTypeModal, setShowContributorTypeModal] =
-    useState(false);
-  const [showContributorDetailsModal, setShowContributorDetailsModal] =
-    useState(false);
-  const [selectedContributorType, setSelectedContributorType] = useState("");
-
-  const handleSelectContributorType = (type: string) => {
-    setSelectedContributorType(type);
-    setShowContributorTypeModal(false);
-    setShowContributorDetailsModal(true);
-  };
-
-  const handleAddContributor = (contributor: {
-    name: string;
-    email: string;
-  }) => {
-    setFormData({
-      ...formData,
-      contributors: [
-        ...formData.contributors,
-        { ...contributor, type: selectedContributorType },
-      ],
-    });
-    setShowContributorDetailsModal(false);
-  };
-
-  return (
-    <div className="bg-[#f6f6f6]  ">
-      <div className="flex gap-8 max-w-full mx-auto">
-        {/* Book Cover Preview */}
-        <div className="w-80">
-          <div className="border-2 border-dashed border-[#4BB1FF] bg-[#EDF7FF] rounded-lg p-6 text-center h-[350px] flex flex-col items-center justify-center">
-            <div className=" rounded flex items-center justify-center mb-4">
-              <Image src={ebook1} alt="Create E-Book" />
-            </div>
-            <p className="text-sm text-[#5d5d5d]">Drag and drop or Click to</p>
-            <p className="text-sm text-[#5d5d5d]">choose file from device</p>
-          </div>
-          <p className="text-sm text-[#888888] mt-2">
-            Supported format: JPEG & PNG
-          </p>
-        </div>
-
-        {/* Form Fields */}
-        <div className="flex-1 bg-white rounded-md">
-          <div className="bg-white p-6 rounded-lg mb-6">
-            <h3 className="text-lg font-semibold text-[#B0B0B0] mb-6">
-              Book Details
-            </h3>
-
-            <div className="space-y-5">
-              <div>
-                <label className="block text-sm font-medium text-[#5d5d5d] mb-2">
-                  Author Name
-                </label>
-                <input
-                  type="text"
-                  value={formData.authorName}
-                  className="w-full p-3 border border-[#e7e7e7] rounded-md focus:outline-none focus:ring-1 focus:ring-[#236fea]"
-                  readOnly
-                />
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-[#5d5d5d] mb-2">
-                  Contributing Authors
-                </label>
-                <div
-                  className="flex items-center w-full md:w-[300px] cursor-pointer  justify-between gap-2 mb-3 px-2.5 py-2 border border-[#e7e7e7] rounded-md text-sm text-[#5d5d5d] hover:border-[#d6ecff] hover:bg-[#f8fbff] transition-colors"
-                  onClick={() => setShowContributorTypeModal(true)}
-                >
-                  <button className="cursor-pointer">Add</button>
-                  <button
-                    onClick={() => setShowContributorTypeModal(true)}
-                    className="p-2 border border-[#e7e7e7] cursor-pointer rounded-md text-[#5d5d5d] hover:border-[#d6ecff] hover:bg-[#f8fbff] transition-colors"
-                  >
-                    <svg
-                      width="16"
-                      height="16"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M12 5V19"
-                        stroke="#5d5d5d"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                      <path
-                        d="M5 12H19"
-                        stroke="#5d5d5d"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                    </svg>
-                  </button>
-                </div>
-                {formData.contributors.map(
-                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  (contributor: any, index: number) => (
-                    <div
-                      key={index}
-                      className="flex items-center gap-2 mb-2 bg-[#edf7ff] rounded-full px-2 py-1 w-fit"
-                    >
-                      <Image
-                        src={user}
-                        width={24}
-                        height={24}
-                        alt="avatar"
-                        className="rounded-full"
-                      />
-                      <span className="text-sm text-[#3d3d3d]">
-                        {contributor.name}
-                      </span>
-                      <button
-                        onClick={() => {
-                          const newContributors = formData.contributors.filter(
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            (_: any, i: number) => i !== index
-                          );
-                          setFormData({
-                            ...formData,
-                            contributors: newContributors,
-                          });
-                        }}
-                        className="text-[#5d5d5d] hover:text-[#3d3d3d]"
-                      >
-                        <X size={16} />
-                      </button>
-                    </div>
-                  )
-                )}
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-[#5d5d5d] mb-2">
-                  Genre
-                </label>
-                <div className="relative">
-                  <select
-                    className="w-full p-3 border border-[#e7e7e7] rounded-md appearance-none focus:outline-none focus:ring-1 focus:ring-[#236fea]"
-                    onChange={(e) => {
-                      if (
-                        e.target.value &&
-                        !formData.genres.includes(e.target.value)
-                      ) {
-                        setFormData({
-                          ...formData,
-                          genres: [...formData.genres, e.target.value],
-                        });
-                      }
-                    }}
-                  >
-                    <option value="">Genres</option>
-                    <option value="Fiction">Fiction</option>
-                    <option value="Drama">Drama</option>
-                    <option value="Horror">Horror</option>
-                    <option value="Romance">Romance</option>
-                  </select>
-                  <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
-                    <ChevronDown className="h-5 w-5 text-[#888888]" />
-                  </div>
-                </div>
-                <div className="flex flex-wrap gap-2 mt-3">
-                  {formData.genres.map((genre: string, index: number) => (
-                    <span
-                      key={index}
-                      className="px-3 py-1 bg-[#edf7ff] rounded-full text-sm flex items-center gap-1 text-[#3d3d3d]"
-                    >
-                      {genre}
-                      <button
-                        onClick={() => {
-                          setFormData({
-                            ...formData,
-                            genres: formData.genres.filter(
-                              (g: string) => g !== genre
-                            ),
-                          });
-                        }}
-                        className="text-[#5d5d5d] hover:text-[#3d3d3d]"
-                      >
-                        <X size={14} />
-                      </button>
-                    </span>
-                  ))}
-                </div>
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-[#5d5d5d] mb-2">
-                  Tags
-                </label>
-                <div className="relative">
-                  <select
-                    className="w-full p-3 border border-[#e7e7e7] rounded-md appearance-none focus:outline-none focus:ring-1 focus:ring-[#236fea]"
-                    onChange={(e) => {
-                      if (
-                        e.target.value &&
-                        !formData.tags.includes(e.target.value)
-                      ) {
-                        setFormData({
-                          ...formData,
-                          tags: [...formData.tags, e.target.value],
-                        });
-                      }
-                    }}
-                  >
-                    <option value="">Select tag</option>
-                    <option value="Adventure">Adventure</option>
-                    <option value="Sci-fi">Sci-fi</option>
-                    <option value="Fantasy">Fantasy</option>
-                    <option value="Mystery">Mystery</option>
-                  </select>
-                  <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
-                    <ChevronDown className="h-5 w-5 text-[#888888]" />
-                  </div>
-                </div>
-                <div className="flex flex-wrap gap-2 mt-3">
-                  {formData.tags.map((tag: string, index: number) => (
-                    <span
-                      key={index}
-                      className="px-3 py-1 bg-[#edf7ff] rounded-full text-sm flex items-center gap-1 text-[#3d3d3d]"
-                    >
-                      {tag}
-                      <button
-                        onClick={() => {
-                          setFormData({
-                            ...formData,
-                            tags: formData.tags.filter(
-                              (t: string) => t !== tag
-                            ),
-                          });
-                        }}
-                        className="text-[#5d5d5d] hover:text-[#3d3d3d]"
-                      >
-                        <X size={14} />
-                      </button>
-                    </span>
-                  ))}
-                </div>
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-[#5d5d5d] mb-2">
-                  Book Description
-                </label>
-                <textarea
-                  placeholder="Type here"
-                  className="w-full p-3 border border-[#e7e7e7] rounded-md h-32 focus:outline-none focus:ring-1 focus:ring-[#236fea]"
-                  value={formData.description}
-                  onChange={(e) =>
-                    setFormData({ ...formData, description: e.target.value })
-                  }
-                />
-              </div>
-            </div>
-          </div>
-
-          <div className="flex justify-between mt-8 p-6 space-x-6 bg-white rounded-bl-md rounded-br-md">
-            <button
-              onClick={onBack}
-              className="px-4 w-full py-3 bg-[#edf7ff] text-[#0F265C] rounded-md hover:bg-[#d6ecff] cursor-pointer transition-colors"
-            >
-              Previous Page
-            </button>
-            <button
-              onClick={onNext}
-              className="px-4 w-full py-3 bg-[#096cff] text-white rounded-md hover:bg-[#236fea] cursor-pointer transition-colors"
-            >
-              Continue
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {showContributorTypeModal && (
-        <ContributorTypeModal
-          onClose={() => setShowContributorTypeModal(false)}
-          onSelect={handleSelectContributorType}
-        />
-      )}
-
-      {showContributorDetailsModal && (
-        <ContributorDetailsModal
-          type={selectedContributorType}
-          onClose={() => setShowContributorDetailsModal(false)}
-          onAdd={handleAddContributor}
-        />
-      )}
-    </div>
-  );
-};
-
-export default BookDetailsStep;
diff --git a/src/app/writers/manage-content/ContributorDetailsModal.tsx b/src/app/writers/manage-content/ContributorDetailsModal.tsx
deleted file mode 100644
index 32d0e8a..0000000
--- a/src/app/writers/manage-content/ContributorDetailsModal.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import { X } from "lucide-react";
-import Image from "next/image";
-import user from "../../../../public/user1.svg";
-
-interface ContributorDetailsModalProps {
-  type: string;
-  onClose: () => void;
-  onAdd: (contributor: { name: string; email: string }) => void;
-}
-
-const ContributorDetailsModal: React.FC<ContributorDetailsModalProps> = ({
-  type,
-  onClose,
-  onAdd,
-}) => {
-  const [searchTerm, setSearchTerm] = useState("");
-
-  return (
-    <div className="fixed inset-0 bg-[#000000d7] bg-opacity-50 flex items-center justify-center z-50">
-      <div className="bg-white relative rounded-lg p-6 sm:w-[600px] ">
-        <div className="flex text-center justify-center items-center mb-6">
-          <h2 className="text-xl font-semibold">Enter {type} Details</h2>
-        </div>
-        <button
-          onClick={onClose}
-          className="text-gray-400 absolute top-6 bg-[#f6f6f6] p-1 rounded right-6 cursor-pointer hover:text-gray-600"
-        >
-          <X size={20} />
-        </button>
-
-        <div className="mb-6">
-          <label className="block text-sm font-medium text-gray-700 mb-2">
-            {type} name or Email Address
-          </label>
-          <input
-            type="text"
-            placeholder="Enter name or Email address"
-            className="w-full p-3 border border-gray-200 rounded-md"
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-          />
-        </div>
-
-        <div className="mb-6">
-          <div className="flex items-center w-fit bg-[#EDF7FF] gap-3 p-2 border border-gray-200 rounded-md">
-            <Image
-              src={user}
-              alt="avatar"
-              className="rounded-full"
-              width={32}
-              height={32}
-            />
-            <div>
-              <p className="font-medium text-sm">Joseph Yanum</p>
-              <p className="text-xs text-gray-500">josephyanum75@gmail.com</p>
-            </div>
-          </div>
-        </div>
-
-        <button
-          onClick={() =>
-            onAdd({ name: "Joseph Yanum", email: "josephyanum75@gmail.com" })
-          }
-          className="w-full py-3 bg-[#096cff] text-white rounded-md cursor-pointer"
-        >
-          Add {type.slice(0, -1)}
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default ContributorDetailsModal;
diff --git a/src/app/writers/manage-content/ContributorTypeModal.tsx b/src/app/writers/manage-content/ContributorTypeModal.tsx
deleted file mode 100644
index 011bed1..0000000
--- a/src/app/writers/manage-content/ContributorTypeModal.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from "react";
-import { X } from "lucide-react";
-
-interface ContributorTypeModalProps {
-  onClose: () => void;
-  onSelect: (type: string) => void;
-}
-
-const ContributorTypeModal: React.FC<ContributorTypeModalProps> = ({
-  onClose,
-  onSelect,
-}) => {
-  return (
-    <div className="fixed inset-0 bg-[#000000d7] bg-opacity-50 flex items-center justify-center z-50">
-      <div className="bg-white rounded-lg p-6 w-[400px]">
-        <div className="flex justify-between items-center mb-6">
-          <h2 className="text-xl font-semibold">
-            Select the type of Contributor
-          </h2>
-          <button
-            onClick={onClose}
-            className="text-gray-400 hover:text-gray-600 cursor-pointer"
-          >
-            <X size={20} />
-          </button>
-        </div>
-
-        <div className="space-y-2">
-          <button
-            onClick={() => onSelect("Co-authors")}
-            className="w-full text-left border-b border-[#E7E7E7] px-4 py-3 hover:bg-gray-50 rounded-md cursor-pointer"
-          >
-            Co-authors
-          </button>
-          <button
-            onClick={() => onSelect("Editors")}
-            className="w-full text-left border-b border-[#E7E7E7] px-4 py-3 hover:bg-gray-50 rounded-md cursor-pointer"
-          >
-            Editors
-          </button>
-          <button
-            onClick={() => onSelect("Illustrators")}
-            className="w-full text-left border-b border-[#E7E7E7] px-4 py-3 hover:bg-gray-50 rounded-md cursor-pointer"
-          >
-            Illustrators
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ContributorTypeModal;
diff --git a/src/app/writers/manage-content/Manage-content.tsx b/src/app/writers/manage-content/Manage-content.tsx
deleted file mode 100644
index b108c64..0000000
--- a/src/app/writers/manage-content/Manage-content.tsx
+++ /dev/null
@@ -1,520 +0,0 @@
-// import React from "react";
-// import { StatCard } from "@/components/dashboard/stat-card";
-// import publish from "../../../../public/published.svg";
-// import regular from "../../../../public/regular.svg";
-// import nft from "../../../../public/dolls.svg";
-// import series from "../../../../public/series.svg";
-// import collection from "../../../../public/collect.svg";
-// import review from "../../../../public/review.svg";
-// import draft from "../../../../public/draft.svg";
-// import { ChevronRight } from "lucide-react";
-// import Link from "next/link";
-
-// import { BookCard } from "@/components/dashboard/book-card";
-// import { CollectionCard } from "@/components/dashboard/collection-card";
-
-// const ManageContent = () => {
-//   return (
-//     <>
-//       {/* Stats Cards */}
-//       <div className="grid grid-cols-4 gap-4 mt-20 mb-8">
-//         <StatCard
-//           title="Published"
-//           value="89"
-//           icon={publish}
-//           badgeColor="#096CFF"
-//         />
-//         <StatCard
-//           title="Regular Book"
-//           value="27"
-//           icon={regular}
-//           iconColor="#239641"
-//           badgeColor="#239641"
-//           iconBgColor="#e9f7ff"
-//         />
-//         <StatCard
-//           title="NFT Editions"
-//           value="7"
-//           icon={nft}
-//           iconColor="#822ecb"
-//           badgeColor="#822ecb"
-//           iconBgColor="#f6f6f6"
-//         />
-//         <StatCard
-//           title="Series"
-//           value="12"
-//           icon={series}
-//           badgeColor="#ed8d48"
-//         />
-//       </div>
-
-//       <div className="grid grid-cols-4 gap-4 mb-8">
-//         <StatCard
-//           title="Collections"
-//           value="12"
-//           icon={collection}
-//           badgeValue="12"
-//           badgeColor="#0f3d99"
-//         />
-//         <StatCard
-//           title="Under Review"
-//           value="3"
-//           badgeValue="12"
-//           icon={review}
-//           badgeColor="#dba736"
-//         />
-//         <StatCard
-//           title="Draft"
-//           value="6"
-//           badgeValue="6"
-//           icon={draft}
-//           badgeColor="#888888"
-//         />
-//       </div>
-
-//       {/* Recent Published Books */}
-//       <div className="mb-8 mt-12 bg-white p-6 rounded-lg">
-//         <h2 className="text-lg text-[#454545] font-semibold mb-4">
-//           Your Recent Published Books
-//         </h2>
-//         <div className="grid grid-cols-4 gap-4">
-//           {[1, 2, 3, 4].map((item) => (
-//             <BookCard
-//               key={item}
-//               id={item.toString()}
-//               title="Native Invisibility"
-//               price="$10"
-//               status="Published"
-//               statusColor="#34a853"
-//             />
-//           ))}
-//         </div>
-//       </div>
-
-//       {/* NFT Edition */}
-//       <div className="bg-[#1212120A] p-6 rounded-lg mt-8 mb-8">
-//         <div className="flex items-center justify-between mb-4">
-//           <h2 className="text-lg font-semibold">NFT Edition</h2>
-//           <Link
-//             href="/nft-editions"
-//             className="flex items-center text-sm text-[#5d5d5d]"
-//           >
-//             View All
-//             <ChevronRight size={16} />
-//           </Link>
-//         </div>
-//         <div className="grid grid-cols-4 gap-4">
-//           <BookCard
-//             id="5"
-//             title="Peace and Hate"
-//             price="$10"
-//             status="Published"
-//             statusColor="#34a853"
-//             isNft
-//           />
-//           <BookCard
-//             id="6"
-//             title="Love at Night"
-//             price="$10"
-//             status="Under Review"
-//             statusColor="#dba736"
-//             isNft
-//           />
-//           <BookCard
-//             id="7"
-//             title="Dark World"
-//             price="$10"
-//             status="Draft"
-//             statusColor="#5d5d5d"
-//             isNft
-//           />
-//           <BookCard
-//             id="8"
-//             title="Peace and Hate"
-//             price="$10"
-//             status="Published"
-//             statusColor="#34a853"
-//             isNft
-//           />
-//         </div>
-//       </div>
-
-//   {/* Series */}
-//   <div className="p-6 bg-white rounded-lg mt-8 mb-8">
-//     <div className="flex items-center justify-between mb-4">
-//       <h2 className="text-lg font-semibold">Series</h2>
-//       <Link
-//         href="/series"
-//         className="flex items-center rounded-b-4xl py-2 px-4 text-sm text-[#5d5d5d]"
-//       >
-//         View All
-//         <ChevronRight size={16} />
-//       </Link>
-//     </div>
-//     <div className="grid grid-cols-4 gap-4">
-//       <BookCard
-//         id="9"
-//         title="Native Invisibility"
-//         price="$10"
-//         status="Published"
-//         statusColor="#34a853"
-//         isSeries
-//       />
-//       <BookCard
-//         id="10"
-//         title="Love at Night"
-//         price="$10"
-//         status="Under Review"
-//         statusColor="#dba736"
-//         isSeries
-//       />
-//       <BookCard
-//         id="11"
-//         title="Dark World"
-//         price="$10"
-//         status="Draft"
-//         statusColor="#5d5d5d"
-//         isSeries
-//       />
-//       <BookCard
-//         id="12"
-//         title="Peace and Hate"
-//         price="$10"
-//         status="Published"
-//         statusColor="#34a853"
-//         isSeries
-//       />
-//     </div>
-//   </div>
-
-//   {/* Collections */}
-//   <div className="bg-white p-6 rounded-lg mt-8 mb-8">
-//     <div className="flex items-center justify-between mb-4">
-//       <h2 className="text-lg font-semibold">Collections</h2>
-//       <Link
-//         href="/collections"
-//         className="flex items-center text-sm text-[#5d5d5d]"
-//       >
-//         View All
-//         <ChevronRight size={16} />
-//       </Link>
-//     </div>
-//     <div className="grid grid-cols-4 gap-4">
-//       <CollectionCard id="1" title="Top Tech Books" price="$10" />
-//       <CollectionCard id="2" title="My Best Boook" price="$10" owners={1} />
-//       <CollectionCard id="3" title="Most Read" price="$10" />
-//       <CollectionCard id="4" title="Comics" price="$10" />
-//     </div>
-//   </div>
-//     </>
-//   );
-// };
-
-// export default ManageContent;
-
-"use client";
-
-import React, { useState } from "react";
-import { ChevronRight, Link, Search } from "lucide-react";
-import { StatCard } from "@/components/dashboard/stat-card";
-import { BookCard } from "@/components/dashboard/book-card";
-import { CollectionCard } from "@/components/dashboard/collection-card";
-import publish from "../../../../public/published.svg";
-import regular from "../../../../public/regular.svg";
-import nft from "../../../../public/dolls.svg";
-import series from "../../../../public/series.svg";
-import collection from "../../../../public/collect.svg";
-import review from "../../../../public/review.svg";
-import draft from "../../../../public/draft.svg";
-import PublishTypeModal from "./PublishTypeModal";
-import BookCreationFlow from "./BookCreationFlow";
-
-const ManageContent = () => {
-  const [showPublishModal, setShowPublishModal] = useState(false);
-  const [currentStep, setCurrentStep] = useState(0);
-
-  const handlePublishClick = () => {
-    setShowPublishModal(true);
-  };
-
-  const handleBookTypeSelect = (type: string) => {
-    setShowPublishModal(false);
-    if (type === "e-book") {
-      setCurrentStep(1);
-    }
-    if (type === "nft") {
-      setCurrentStep(1);
-    }
-    if (type === "series") {
-      setCurrentStep(1);
-    }
-  };
-
-  if (currentStep > 0) {
-    return (
-      <BookCreationFlow
-        currentStep={currentStep}
-        setCurrentStep={setCurrentStep}
-      />
-    );
-  }
-
-  return (
-    <>
-      {/* Search and Filters */}
-      <div className="flex items-center justify-between mb-8">
-        <div className="flex items-center space-x-20">
-          <div className="relative w-80">
-            <Search
-              className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#b0b0b0]"
-              size={18}
-            />
-            <input
-              type="text"
-              placeholder="What are we looking for"
-              className="w-full pl-10 pr-4 py-2.5 border border-[#e7e7e7] rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-[#096cff]"
-            />
-          </div>
-
-          <div className="flex items-center gap-3">
-            <div className="flex items-center gap-2">
-              <span className="text-sm text-[#5d5d5d]">Book Type</span>
-              <button className="flex items-center gap-1 px-2 py-1.5 ">
-                <ChevronRight className="rotate-90" size={16} />
-              </button>
-            </div>
-
-            <div className="flex items-center gap-2">
-              <span className="text-sm text-[#5d5d5d]">Status</span>
-              <button className="flex items-center gap-1 px-2 py-1.5">
-                <ChevronRight className="rotate-90" size={16} />
-              </button>
-            </div>
-
-            <div className="flex items-center gap-2">
-              <span className="text-sm text-[#5d5d5d]">Genre</span>
-              <button className="flex items-center gap-1 px-2 py-1.5">
-                <ChevronRight className="rotate-90" size={16} />
-              </button>
-            </div>
-
-            <div className="flex items-center gap-2">
-              <span className="text-sm text-[#5d5d5d]">Collaborations</span>
-              <button className="flex items-center gap-1 px-2 py-1.5 ">
-                <ChevronRight className="rotate-90" size={16} />
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <button
-          className="px-10 py-2.5 bg-[#096cff] cursor-pointer text-white rounded-md font-medium"
-          onClick={handlePublishClick}
-        >
-          Publish a Book
-        </button>
-      </div>
-
-      {/* Stats Cards */}
-      <div className="grid grid-cols-4 gap-4 mt-20 mb-8">
-        <StatCard
-          title="Published"
-          value="89"
-          icon={publish}
-          badgeColor="#096CFF"
-        />
-        <StatCard
-          title="Regular Book"
-          value="27"
-          icon={regular}
-          iconColor="#239641"
-          badgeColor="#239641"
-          iconBgColor="#e9f7ff"
-        />
-        <StatCard
-          title="NFT Editions"
-          value="7"
-          icon={nft}
-          iconColor="#822ecb"
-          badgeColor="#822ecb"
-          iconBgColor="#f6f6f6"
-        />
-        <StatCard
-          title="Series"
-          value="12"
-          icon={series}
-          badgeColor="#ed8d48"
-        />
-      </div>
-
-      <div className="grid grid-cols-4 gap-4 mb-8">
-        <StatCard
-          title="Collections"
-          value="12"
-          icon={collection}
-          badgeValue="12"
-          badgeColor="#0f3d99"
-        />
-        <StatCard
-          title="Under Review"
-          value="3"
-          badgeValue="12"
-          icon={review}
-          badgeColor="#dba736"
-        />
-        <StatCard
-          title="Draft"
-          value="6"
-          badgeValue="6"
-          icon={draft}
-          badgeColor="#888888"
-        />
-      </div>
-
-      {/* Recent Published Books */}
-      <div className="mb-8 mt-12 bg-white p-6 rounded-lg">
-        <h2 className="text-lg text-[#454545] font-semibold mb-4">
-          Your Recent Published Books
-        </h2>
-        <div className="grid grid-cols-4 gap-4">
-          {[1, 2, 3, 4].map((item) => (
-            <BookCard
-              key={item}
-              id={item.toString()}
-              title="Native Invisibility"
-              price="$10"
-              status="Published"
-              statusColor="#34a853"
-            />
-          ))}
-        </div>
-      </div>
-
-      {/* NFT Edition */}
-      <div className="bg-[#1212120A] p-6 rounded-lg mt-8 mb-8">
-        <div className="flex items-center justify-between mb-4">
-          <h2 className="text-lg font-semibold">NFT Edition</h2>
-          <Link
-            href="/nft-editions"
-            className="flex items-center text-sm text-[#5d5d5d]"
-          >
-            View All
-            <ChevronRight size={16} />
-          </Link>
-        </div>
-        <div className="grid grid-cols-4 gap-4">
-          <BookCard
-            id="5"
-            title="Peace and Hate"
-            price="$10"
-            status="Published"
-            statusColor="#34a853"
-            isNft
-          />
-          <BookCard
-            id="6"
-            title="Love at Night"
-            price="$10"
-            status="Under Review"
-            statusColor="#dba736"
-            isNft
-          />
-          <BookCard
-            id="7"
-            title="Dark World"
-            price="$10"
-            status="Draft"
-            statusColor="#5d5d5d"
-            isNft
-          />
-          <BookCard
-            id="8"
-            title="Peace and Hate"
-            price="$10"
-            status="Published"
-            statusColor="#34a853"
-            isNft
-          />
-        </div>
-      </div>
-
-      {/* Series */}
-      <div className="p-6 bg-white rounded-lg mt-8 mb-8">
-        <div className="flex items-center justify-between mb-4">
-          <h2 className="text-lg font-semibold">Series</h2>
-          <Link
-            href="/series"
-            className="flex items-center rounded-b-4xl py-2 px-4 text-sm text-[#5d5d5d]"
-          >
-            View All
-            <ChevronRight size={16} />
-          </Link>
-        </div>
-        <div className="grid grid-cols-4 gap-4">
-          <BookCard
-            id="9"
-            title="Native Invisibility"
-            price="$10"
-            status="Published"
-            statusColor="#34a853"
-            isSeries
-          />
-          <BookCard
-            id="10"
-            title="Love at Night"
-            price="$10"
-            status="Under Review"
-            statusColor="#dba736"
-            isSeries
-          />
-          <BookCard
-            id="11"
-            title="Dark World"
-            price="$10"
-            status="Draft"
-            statusColor="#5d5d5d"
-            isSeries
-          />
-          <BookCard
-            id="12"
-            title="Peace and Hate"
-            price="$10"
-            status="Published"
-            statusColor="#34a853"
-            isSeries
-          />
-        </div>
-      </div>
-
-      {/* Collections */}
-      <div className="bg-white p-6 rounded-lg mt-8 mb-8">
-        <div className="flex items-center justify-between mb-4">
-          <h2 className="text-lg font-semibold">Collections</h2>
-          <Link
-            href="/collections"
-            className="flex items-center text-sm text-[#5d5d5d]"
-          >
-            View All
-            <ChevronRight size={16} />
-          </Link>
-        </div>
-        <div className="grid grid-cols-4 gap-4">
-          <CollectionCard id="1" title="Top Tech Books" price="$10" />
-          <CollectionCard id="2" title="My Best Boook" price="$10" owners={1} />
-          <CollectionCard id="3" title="Most Read" price="$10" />
-          <CollectionCard id="4" title="Comics" price="$10" />
-        </div>
-      </div>
-
-      {/* Publish Type Modal */}
-      {showPublishModal && (
-        <PublishTypeModal
-          onClose={() => setShowPublishModal(false)}
-          onSelect={handleBookTypeSelect}
-        />
-      )}
-    </>
-  );
-};
-
-export default ManageContent;
diff --git a/src/app/writers/manage-content/PreviewModal.tsx b/src/app/writers/manage-content/PreviewModal.tsx
deleted file mode 100644
index 2f87d82..0000000
--- a/src/app/writers/manage-content/PreviewModal.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import { X } from "lucide-react";
-import ebook1 from "../../../../public/ebook1.svg";
-import coin2 from "../../../../public/coin2.svg";
-import play from "../../../../public/play.svg";
-import check from "../../../../public/check.svg";
-import Image from "next/image";
-import BookPreviewModal from "./book-preview-modal";
-
-interface PreviewModalProps {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  formData?: any;
-  onClose: () => void;
-  onPublish: () => void;
-}
-
-const PreviewModal: React.FC<PreviewModalProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  formData,
-  onClose,
-  onPublish,
-}) => {
-  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
-
-  return (
-    <div className="fixed inset-0 bg-[#000000d7] bg-opacity-50 flex items-center justify-center z-50">
-      <div className="bg-white rounded-lg p-8 w-[900px] max-w-[95vw] max-h-[90vh] overflow-auto">
-        <div className="flex justify-end mb-4">
-          <button
-            onClick={onClose}
-            className="text-gray-400 bg-[#f6f6f6] p-1 rounded cursor-pointer hover:text-gray-600"
-          >
-            <X size={20} />
-          </button>
-        </div>
-
-        <div className="flex flex-col md:flex-row gap-8">
-          <div className="w-80">
-            <div className="border-2 border-dashed border-[#4BB1FF] bg-[#EDF7FF] rounded-lg p-6 text-center h-[350px] flex flex-col items-center justify-center">
-              <div className=" rounded flex items-center justify-center mb-4">
-                <Image src={ebook1} alt="Create E-Book" />
-              </div>
-              <p className="text-sm text-[#5d5d5d]">
-                Drag and drop or Click to
-              </p>
-              <p className="text-sm text-[#5d5d5d]">choose file from device</p>
-            </div>
-            <p className="text-sm text-[#888888] mt-2">
-              Supported format: JPEG & PNG
-            </p>
-
-            <button
-              onClick={() => setIsPreviewOpen(true)}
-              className="w-full flex items-center justify-center space-x-2 cursor-pointer border border-[#888888] rounded-xl p-2.5 mt-8 text-[#888888]"
-            >
-              <Image src={play} alt="Pricing" />
-              <span>Preview Book</span>
-            </button>
-          </div>
-
-          <div className="flex-1">
-            <h2 className="text-2xl font-semibold text-[#3d3d3d] mb-3">
-              Native Invisibility
-            </h2>
-
-            <div className="flex items-center gap-2 mb-6">
-              <span className="text-[#5d5d5d]">By Darrin Collins</span>
-              <span className="bg-[#edf7ff] text-[#236fea] text-xs px-2 py-0.5 rounded-full flex items-center justify-center">
-                <Image src={check} alt="Verified" className="mr-1" />
-              </span>
-            </div>
-
-            <div className="mb-6">
-              <span className="text-sm text-[#5d5d5d]">Access Type</span>
-              <p className="font-medium bg-[#EDF7FF] p-2 rounded-4xl w-fit text-xs text-[#3d3d3d]">
-                One time Purchase
-              </p>
-            </div>
-
-            <div className="mb-6 text-[#000B21] flex items-center space-x-4">
-              <div className="text-3xl font-bold mb-1">$12</div>
-              <div className="flex items-center gap-2 ">
-                <Image src={coin2} alt="Coin" />
-                <span>193 STRK</span>
-              </div>
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
-              <div className="border border-[#E7E7E7] rounded-lg p-2">
-                <span className="text-sm text-[#5d5d5d] mb-2">Genre(s)</span>
-                <div className="font-medium flex items-center text-[#3D3D3D] flex-wrap gap-1">
-                  <span className="bg-[#F6F6F6] px-3 py-1 rounded-full text-xs">
-                    Fiction
-                  </span>
-                  <span className="bg-[#F6F6F6] px-3 py-1 rounded-full text-xs">
-                    Comic
-                  </span>
-                </div>
-              </div>
-
-              <div className="border border-[#E7E7E7] rounded-lg p-2">
-                <span className="text-xs text-[#6D6D6D]">Page count</span>
-                <p className="font-medium text-sm text-[#3d3d3d]">21 Pages</p>
-              </div>
-
-              <div className="border border-[#E7E7E7] rounded-lg p-2">
-                <span className="text-xs text-[#5d5d5d]">Language</span>
-                <p className="font-medium text-sm text-[#3d3d3d]">English</p>
-              </div>
-            </div>
-
-            <div className="flex items-center space-x-6">
-              <div className="mb-6 border border-[#E7E7E7] rounded-lg px-4 p-2">
-                <span className="text-xm text-[#5d5d5d]">Date published</span>
-                <p className="font-medium text-sm text-[#3d3d3d]">
-                  12 April, 2025
-                </p>
-              </div>
-
-              <div className="mb-6 border border-[#E7E7E7] rounded-lg p-2">
-                <span className="text-xs text-[#5d5d5d]">ISBN</span>
-                <p className="font-medium text-sm text-[#3d3d3d]">
-                  978-3-16-148410-0
-                </p>
-              </div>
-            </div>
-
-            <div className="mb-6">
-              <h3 className="font-semibold text-[#3d3d3d] mb-2">Description</h3>
-              <p className="text-[#888888]">
-                &quotNative Invisibility&quot delves into the complex and often
-                insidious ways in which indigenous peoples and their unique
-                experiences are rendered unseen and unheard in the modern era.
-              </p>
-              <button className="text-[#888888] border border-[#888888] p-1.5 px-2.5 rounded-md text-sm mt-2 hover:underline">
-                Read More
-              </button>
-            </div>
-            <div className="flex justify-end space-x-6 mt-8">
-              <button
-                onClick={onClose}
-                className="px-4 w-full cursor-pointer py-3 bg-[#edf7ff] text-[#236fea] rounded-md hover:bg-[#d6ecff] transition-colors"
-              >
-                Back
-              </button>
-              <button
-                onClick={onPublish}
-                className="px-4 w-full cursor-pointer py-3 bg-[#236fea] text-white rounded-md hover:bg-[#096cff] transition-colors"
-              >
-                Publish Book
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Book Preview Modal */}
-      <BookPreviewModal
-        isOpen={isPreviewOpen}
-        onClose={() => setIsPreviewOpen(false)}
-        bookTitle={formData.bookTitle}
-        authorName={formData.authorName}
-      />
-    </div>
-  );
-};
-
-export default PreviewModal;
diff --git a/src/app/writers/manage-content/PricingStep.tsx b/src/app/writers/manage-content/PricingStep.tsx
deleted file mode 100644
index d5e8584..0000000
--- a/src/app/writers/manage-content/PricingStep.tsx
+++ /dev/null
@@ -1,209 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import ebook1 from "../../../../public/ebook1.svg";
-import pricing1 from "../../../../public/pricing1.svg";
-import pricing2 from "../../../../public/pricing2.svg";
-import coin1 from "../../../../public/coin1.svg";
-import coin2 from "../../../../public/coin2.svg";
-import play from "../../../../public/play.svg";
-import Image from "next/image";
-import BookPreviewModal from "./book-preview-modal";
-
-interface PricingStepProps {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  formData: any;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  setFormData: (data: any) => void;
-  onNext: () => void;
-  onBack: () => void;
-}
-
-const PricingStep: React.FC<PricingStepProps> = ({
-  formData,
-  setFormData,
-  onNext,
-  onBack,
-}) => {
-  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
-
-  return (
-    <div className="bg-[#f6f6f6]  ">
-      <div className="flex gap-8 max-w-full mx-auto">
-        {/* Book Cover Preview */}
-        <div className="w-80">
-          <div className="border-2 border-dashed border-[#4BB1FF] bg-[#EDF7FF] rounded-lg p-6 text-center h-[350px] flex flex-col items-center justify-center">
-            <div className=" rounded flex items-center justify-center mb-4">
-              <Image src={ebook1} alt="Create E-Book" />
-            </div>
-            <p className="text-sm text-[#5d5d5d]">Drag and drop or Click to</p>
-            <p className="text-sm text-[#5d5d5d]">choose file from device</p>
-          </div>
-          <p className="text-sm text-[#888888] mt-2">
-            Supported format: JPEG & PNG
-          </p>
-
-          <button
-            onClick={() => setIsPreviewOpen(true)}
-            className="w-full flex items-center justify-center space-x-2 cursor-pointer border border-[#888888] rounded-xl p-2.5 mt-8 text-[#888888]"
-          >
-            <Image src={play} alt="Pricing" />
-            <span>Preview Book</span>
-          </button>
-        </div>
-
-        {/* Pricing Options */}
-        <div className="flex-1 bg-white">
-          <div className="bg-white p-6 rounded-lg">
-            <h3 className="text-lg font-semibold text-[#B0B0B0] mb-2">
-              Pricing Options
-            </h3>
-            <p className="text-[#5d5d5d] mb-6">Select Your Preferred Option</p>
-
-            <div className="grid grid-cols-2 gap-4 mb-8">
-              <button
-                onClick={() =>
-                  setFormData({ ...formData, pricingOption: "one-time" })
-                }
-                className={`p-4 border cursor-pointer rounded-lg text-center ${
-                  formData.pricingOption === "one-time"
-                    ? "border-[#236fea] bg-[#F6F6F6]"
-                    : "border-[#e7e7e7]"
-                }`}
-              >
-                <div className="flex flex-col items-center gap-3 mb-2">
-                  <Image src={pricing1} alt="One-time Purchase my-1.5" />
-                  <span
-                    className={`font-medium text-[#3d3d3d] ${
-                      formData.pricingOption === "one-time"
-                        ? "text-[#096CFF]"
-                        : "text-[#3d3d3d]"
-                    } `}
-                  >
-                    One-time Purchase
-                  </span>
-                </div>
-                <p className="text-sm text-[#5d5d5d] ">
-                  Readers pay once to own your book forever
-                </p>
-              </button>
-
-              <button
-                onClick={() =>
-                  setFormData({ ...formData, pricingOption: "subscription" })
-                }
-                className={`p-4 border text-center cursor-pointer rounded-lg ${
-                  formData.pricingOption === "subscription"
-                    ? "border-[#236fea] bg-[#F6F6F6]"
-                    : "border-[#e7e7e7]"
-                }`}
-              >
-                <div className="flex flex-col items-center gap-3 mb-2">
-                  <Image src={pricing2} alt="Subscription Only my-1.5" />
-                  <span
-                    className={`font-medium text-[#3d3d3d] ${
-                      formData.pricingOption === "subscription"
-                        ? "text-[#096CFF]"
-                        : "text-[#3d3d3d]"
-                    } `}
-                  >
-                    Subscription Only
-                  </span>
-                </div>
-                <p className="text-sm text-[#5d5d5d]">
-                  Readers access your book as part of their active subscription
-                </p>
-              </button>
-            </div>
-
-            <div
-              className={`grid gap-6 ${
-                formData.pricingOption === "one-time"
-                  ? "grid-cols-2"
-                  : "grid-cols-1"
-              }`}
-            >
-              <div>
-                <label className="block text-sm font-semibold text-[#5D5D5D] mb-2">
-                  Set Price{" "}
-                  {formData.pricingOption === "one-time" ? "(USDC)" : ""}
-                </label>
-                <div className="relative flex items-center space-x-4">
-                  <span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#5d5d5d]">
-                    <Image src={coin1} alt="Coin1" />
-                  </span>
-                  <input
-                    type="text"
-                    value={
-                      formData.pricingOption === "one-time"
-                        ? formData.price
-                        : "No price input needed"
-                    }
-                    onChange={(e) =>
-                      setFormData({ ...formData, price: e.target.value })
-                    }
-                    className="w-full pl-10 pr-4 py-3 border border-[#e7e7e7] text-[#B0B0B0] rounded-md focus:outline-none focus:ring-1 focus:ring-[#236fea]"
-                  />
-                </div>
-              </div>
-
-              {formData.pricingOption === "one-time" && (
-                <div>
-                  <label className="block text-sm font-semibold text-[#5d5d5d] mb-2">
-                    Price in Stark (STRK)
-                  </label>
-                  <div className="relative flex items-center space-x-4">
-                    <span className="absolute left-3 top-1/2 transform -translate-y-1/2">
-                      <Image src={coin2} alt="Coin2" />
-                    </span>
-                    <input
-                      type="text"
-                      value={formData.stark}
-                      onChange={(e) =>
-                        setFormData({ ...formData, stark: e.target.value })
-                      }
-                      className="w-full pl-10 pr-4 py-3 border border-[#e7e7e7] text-[#B0B0B0] rounded-md focus:outline-none focus:ring-1 focus:ring-[#236fea]"
-                    />
-                  </div>
-                </div>
-              )}
-            </div>
-
-            <div className="mt-6 p-4 bg-[#EDF7FF] rounded-lg border border-[#096CFF]">
-              <p className="text-sm text-[#454545]">
-                You&aposll receive <span className="font-semibold">80%</span> in
-                royalties from each sale. We keep a small fee to maintain the
-                platform and ensure smooth publishing for everyone.
-              </p>
-            </div>
-          </div>
-
-          <div className="flex justify-between mt-8 p-6 space-x-6">
-            <button
-              onClick={onBack}
-              className="px-4 w-full py-3 bg-[#edf7ff] text-[#236fea] cursor-pointer rounded-md hover:bg-[#d6ecff] transition-colors"
-            >
-              Previous Page
-            </button>
-            <button
-              onClick={onNext}
-              className="px-4 w-full py-3 bg-[#236fea] text-white rounded-md cursor-pointer hover:bg-[#096cff] transition-colors"
-            >
-              Publish Book
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {/* Book Preview Modal */}
-      <BookPreviewModal
-        isOpen={isPreviewOpen}
-        onClose={() => setIsPreviewOpen(false)}
-        bookTitle={formData.bookTitle}
-        authorName={formData.authorName}
-      />
-    </div>
-  );
-};
-
-export default PricingStep;
diff --git a/src/app/writers/manage-content/ProgressStepper.tsx b/src/app/writers/manage-content/ProgressStepper.tsx
deleted file mode 100644
index af5ba1e..0000000
--- a/src/app/writers/manage-content/ProgressStepper.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-// components/ProgressStepper.tsx
-import React from "react";
-
-type Step = {
-  label: string;
-};
-
-interface ProgressStepperProps {
-  steps: Step[];
-  currentStep: number; // 1-based index
-}
-
-export const ProgressStepper: React.FC<ProgressStepperProps> = ({
-  steps,
-  currentStep,
-}) => {
-  return (
-    <div className="flex items-center justify-between w-full max-w-3xl mx-auto px-4 py-8 bg-gray-50">
-      {steps.map((step, index) => {
-        const stepNumber = index + 1;
-        const isCompleted = stepNumber < currentStep;
-        const isActive = stepNumber === currentStep;
-
-        return (
-          <div
-            key={step.label}
-            className="flex-1 flex flex-col items-center relative"
-          >
-            {/* Line connector */}
-            {index !== 0 && (
-              <div
-                className={`absolute top-5 left-0 w-full h-0.5 z-0 ${
-                  isCompleted ? "bg-blue-500" : "bg-gray-300"
-                }`}
-              />
-            )}
-
-            {/* Step circle */}
-            <div
-              className={`z-10 flex items-center justify-center w-8 h-8 rounded-full border-2 text-sm font-medium
-              ${
-                isCompleted
-                  ? "bg-blue-500 text-white border-blue-500"
-                  : isActive
-                  ? "bg-white text-blue-500 border-blue-500"
-                  : "bg-white text-gray-400 border-gray-300"
-              }`}
-            >
-              {stepNumber}
-            </div>
-
-            {/* Label */}
-            <div className="mt-2 text-sm text-gray-700">{step.label}</div>
-          </div>
-        );
-      })}
-    </div>
-  );
-};
diff --git a/src/app/writers/manage-content/PublishTypeModal.tsx b/src/app/writers/manage-content/PublishTypeModal.tsx
deleted file mode 100644
index 8df894a..0000000
--- a/src/app/writers/manage-content/PublishTypeModal.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-"use client";
-
-import type React from "react";
-import { X } from "lucide-react";
-import create1 from "../../../../public/create1.svg";
-import create2 from "../../../../public/create2.svg";
-import create3 from "../../../../public/create3.svg";
-import Image from "next/image";
-
-interface PublishTypeModalProps {
-  onClose: () => void;
-  onSelect: (type: string) => void;
-}
-
-const PublishTypeModal: React.FC<PublishTypeModalProps> = ({
-  onClose,
-  onSelect,
-}) => {
-  return (
-    <div className="fixed inset-0 bg-[#000000d7] bg-opacity-50 flex items-center justify-center z-50">
-      <div className="bg-white rounded-xl p-8 w-[950px] max-w-[95vw]">
-        <div className="flex justify-end mb-2">
-          <button
-            onClick={onClose}
-            className="text-gray-400 border p-2 rounded-md hover:text-gray-600 cursor-pointer"
-          >
-            <X size={16} />
-          </button>
-        </div>
-
-        <div className="text-center mb-8">
-          <h2 className="text-2xl font-semibold text-[#3d3d3d] mb-2">
-            What Masterpiece Would You Like to Create
-          </h2>
-          <p className="text-[#5d5d5d]">
-            Choose the type of story you&aposre ready to bring to life
-          </p>
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {/* E-Book Option */}
-          <div className="flex relative flex-col border p-4 h-[380px] rounded-lg">
-            <div className="bg-[#edf7ff] rounded-lg p-6 flex flex-col items-center mb-4 h-[180px] justify-center">
-              <div className=" rounded flex items-center justify-center mb-2">
-                <Image src={create1} alt="Create E-Book" />
-              </div>
-            </div>
-            <h3 className="font-semibold text-lg mb-1">E-Book</h3>
-            <p className="text-sm text-[#5d5d5d] mb-4">
-              Publish a standalone digital book and make it instantly available
-              to readers to use.
-            </p>
-            <button
-              onClick={() => onSelect("e-book")}
-              className="bg-[#236fea] hover:bg-[#096cff] text-white w-full py-2 rounded-md cursor-pointer"
-            >
-              Create e-Book
-            </button>
-          </div>
-
-          {/* NFT Option */}
-          <div className="flex flex-col border p-4 rounded-lg">
-            <div className="bg-[#edf7ff] rounded-lg p-6 flex flex-col items-center mb-4 h-[180px] justify-center">
-              <div className="w-14 h-14 flex items-center justify-center mb-2">
-                <Image src={create2} alt="Create E-Book" />
-              </div>
-            </div>
-            <h3 className="font-semibold text-lg mb-1">
-              Exclusive NFT Edition
-            </h3>
-            <p className="text-sm text-[#5d5d5d] mb-4">
-              Start a book series and release your story in multiple parts over
-              time with chainlib.
-            </p>
-            <button
-              onClick={() => onSelect("nft")}
-              className="bg-[#236fea] hover:bg-[#096cff] text-white w-full py-2 rounded-md cursor-pointer"
-            >
-              Create Series
-            </button>
-          </div>
-
-          {/* Series Option */}
-          <div className="flex flex-col border p-4 rounded-lg">
-            <div className="bg-[#edf7ff] rounded-lg p-6 flex flex-col items-center mb-4 h-[180px] justify-center">
-              <div className="w-14 h-14 flex items-center justify-center mb-2">
-                <Image src={create3} alt="Create E-Book" />
-              </div>
-            </div>
-            <h3 className="font-semibold text-lg mb-1">Series</h3>
-            <p className="text-sm text-[#5d5d5d] mb-4">
-              Start a book series and release your story in multiple parts over
-              time with chainlib.
-            </p>
-            <button
-              onClick={() => onSelect("series")}
-              className="bg-[#236fea] hover:bg-[#096cff] text-white w-full py-2 rounded-md cursor-pointer"
-            >
-              Create Series
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default PublishTypeModal;
diff --git a/src/app/writers/manage-content/PublishingNft/Pricing.tsx b/src/app/writers/manage-content/PublishingNft/Pricing.tsx
deleted file mode 100644
index e57ea4f..0000000
--- a/src/app/writers/manage-content/PublishingNft/Pricing.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-"use client";
-
-import type React from "react";
-import Image from "next/image";
-import basildocument from "../../../../../public/basildocument.png";
-import dollar from "../../../../../public/dollar.svg";
-import stark from "../../../../../public/stark.svg";
-
-
-type BookData = {
-  copiesCount: number;
-  priceUSDC: number;
-  priceSTRK: number;
-};
-
-type PricingProps = {
-  bookData: BookData;
-  updateBookData: (data: Partial<BookData>) => void;
-  prevStep: () => void;
-  publishBook: () => void;
-};
-
-function Pricing({ bookData, updateBookData, prevStep, publishBook }: PricingProps): React.ReactElement {
-  return (
-    <div className="max-w-3xl mx-auto">
-      <h1 className="text-xl font-medium mb-6">Exclusive NFT Book</h1>
-
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-        <div>
-          <div className="border-2 border-dashed border-blue-200 rounded-md p-4 flex flex-col items-center justify-center h-64 bg-blue-50">
-            <Image
-              src={basildocument}
-              alt="document upload"
-              width={20}
-              height={10}
-              className="w-15 h-10"
-            />
-
-            <p className="text-sm text-gray-500 text-center">
-              Drag and drop or Click to<br />choose file from device
-            </p>
-          </div>
-          <p className="text-xs text-gray-500 mt-2">Supported format: JPEG & PNG</p>
-
-          <button className="w-full flex items-center justify-center bg-gray-100 text-gray-700 rounded-md py-2 mt-4">
-            <span className="mr-2">▶</span> Preview Book
-          </button>
-        </div>
-
-        <div className="md:col-span-2">
-          <div className="bg-white rounded-lg shadow p-6">
-            <h2 className="text-lg font-medium mb-4">Pricing Options</h2>
-
-            <div className="space-y-4">
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">Number of Copies (Limited edition)</label>
-                <input
-                  type="number"
-                  className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
-                  value={bookData.copiesCount}
-                  onChange={(e) => updateBookData({ copiesCount: parseInt(e.target.value, 10) })}
-                />
-              </div>
-
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">Set Price (USDC)</label>
-                  <div className="relative">
-                    <div className="absolute inset-y-0 left-0 pl-1 flex items-center pointer-events-none">
-
-                      <Image
-                        src={dollar}
-                        alt="document upload"
-                        width={20}
-                        height={10}
-                        className="w-5 h-5"
-                      />
-
-                    </div>
-                    <input
-                      type="number"
-                      step="0.01"
-                      min="0"
-                      className="w-full border border-gray-300 rounded-md pl-7 pr-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
-                      value={bookData.priceUSDC}
-                      onChange={(e) => updateBookData({ priceUSDC: parseFloat(e.target.value) })}
-                    />
-                  </div>
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">Price in Stark (STRK)</label>
-                  <div className="relative">
-                    <div className="absolute inset-y-0 left-0 pl-1 flex items-center pointer-events-none">
-
-                      <Image
-                        src={stark}
-                        alt="document upload"
-                        width={20}
-                        height={10}
-                        className="w-5 h-5"
-                      />
-
-                    </div>
-                    <input
-                      type="number"
-                      className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
-                      value={bookData.priceSTRK}
-                      readOnly
-                    />
-                  </div>
-                </div>
-              </div>
-
-              <div className="bg-blue-50 border border-blue-100 rounded-md p-4 text-sm text-blue-800">
-                You&apos;ll receive 90% in royalties from each sale. We keep a small fee to maintain the platform and ensure smooth publishing for everyone.
-              </div>
-            </div>
-
-            <div className="flex justify-between mt-8">
-              <button
-                className="px-6 py-2 bg-blue-100 text-gray-800 rounded-md font-medium hover:bg-gray-200"
-                onClick={prevStep}
-              >
-                Previous Page
-              </button>
-              <button
-                className="px-6 py-2 bg-blue-500 text-white rounded-md font-medium hover:bg-blue-600"
-                onClick={publishBook}
-              >
-                Publish Book
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-} export default Pricing;
diff --git a/src/app/writers/manage-content/PublishingNft/bookContent.tsx b/src/app/writers/manage-content/PublishingNft/bookContent.tsx
deleted file mode 100644
index eef2ccd..0000000
--- a/src/app/writers/manage-content/PublishingNft/bookContent.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-"use client";
-
-import React, { useState, ChangeEvent } from "react";
-import Image from "next/image";
-import fluentdocument from "../../../../../public/fluentdocument.png";
-import basildocument from "../../../../../public/basildocument.png";
-
-type BookData = {
-    bookTitle: string;
-    subtitle: string;
-    language: string;
-    isbn?: string;
-};
-
-type BookContentProps = {
-    bookData: BookData;
-    updateBookData: (data: Partial<BookData>) => void;
-    nextStep: () => void;
-};
-
-function BookContent({ bookData, updateBookData, nextStep }: BookContentProps) {
-    const [manuscriptFile, setManuscriptFile] = useState<File | null>(null);
-    const [bonusContentFile, setBonusContentFile] = useState<File | null>(null);
-
-    const handleManuscriptUpload = (e: ChangeEvent<HTMLInputElement>) => {
-        if (e.target.files && e.target.files.length > 0) {
-            const file = e.target.files[0];
-            setManuscriptFile(file);
-        }
-    };
-
-    const handleBonusContentUpload = (e: ChangeEvent<HTMLInputElement>) => {
-        if (e.target.files && e.target.files.length > 0) {
-            const file = e.target.files[0];
-            setBonusContentFile(file);
-        }
-    };
-
-    return (
-        <div className="max-w-3xl mx-auto">
-            <h1 className="text-xl font-medium mb-6">Exclusive NFT Book</h1>
-
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <div>
-                    <div className="border-2 border-dashed border-blue-200 rounded-md p-4 flex flex-col items-center justify-center h-64 bg-blue-50">
-                        <Image
-                            src={basildocument}
-                            alt="document upload"
-                            width={20}
-                            height={10}
-                            className="w-15 h-10"
-                        />
-
-                        <p className="text-sm text-gray-500 text-center">
-                            Drag and drop or Click to<br />choose file from device
-                        </p>
-                    </div>
-                    <p className="text-xs text-gray-500 mt-2">Supported format: JPEG & PNG</p>
-                </div>
-
-
-
-
-                <div className="bg-white rounded-lg shadow md:col-span-2 p-6">
-                    <div>
-                        <div>
-                            <label className="block text-sm font-medium text-gray-700 mb-1">Book Title</label>
-                            <input
-                                type="text"
-                                placeholder="Your Book Title"
-                                className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
-                                value={bookData.bookTitle}
-                                onChange={(e) => updateBookData({ bookTitle: e.target.value })}
-                            />
-                        </div>
-
-                        <div>
-                            <label className="block text-sm font-medium text-gray-700 mb-1">Sub-title</label>
-                            <input
-                                type="text"
-                                placeholder="Sub-title"
-                                className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
-                                value={bookData.subtitle}
-                                onChange={(e) => updateBookData({ subtitle: e.target.value })}
-                            />
-                        </div>
-
-                        <div>
-                            <label className="block text-sm font-medium text-gray-700 mb-1">Language</label>
-                            <select
-                                className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
-                                value={bookData.language}
-                                onChange={(e) => updateBookData({ language: e.target.value })}
-                            >
-                                <option value="">Select Language</option>
-                                <option value="en">English</option>
-                                <option value="es">Spanish</option>
-                                <option value="fr">French</option>
-                                <option value="de">German</option>
-                                <option value="zh">Chinese</option>
-                            </select>
-                        </div>
-
-                        <div>
-                            <label className="block text-sm font-medium text-gray-700 mb-1">Book ISBN (Optional)</label>
-                            <input
-                                type="text"
-                                placeholder="978-1-234-56789-0"
-                                className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
-                                value={bookData.isbn}
-                                onChange={(e) => updateBookData({ isbn: e.target.value })}
-                            />
-                        </div>
-                    </div>
-                    <label className="block text-sm font-medium text-gray-700 mb-2">Manuscript</label>
-                    <div
-                        className="border-2 border-dashed border-blue-200 rounded-md p-4 flex flex-col items-center justify-center h-32 bg-blue-50 cursor-pointer"
-                        onClick={() => document.getElementById('manuscript-upload')?.click()}
-                    >
-                        <Image
-                            src={fluentdocument}
-                            alt="document upload"
-                            width={20}
-                            height={10}
-                            className=" w-15 h-10"
-                        />
-                        <p className="text-sm text-gray-500 text-center">
-                            Drag and drop or Click to<br />choose file from device
-                        </p>
-                        <input
-                            id="manuscript-upload"
-                            type="file"
-                            className="hidden"
-                            accept=".pdf,.doc,.docx"
-                            onChange={handleManuscriptUpload}
-                        />
-                    </div>
-                    {manuscriptFile && (
-                        <p className="text-xs text-gray-600 mt-2">{manuscriptFile.name} - {Math.round(manuscriptFile.size / 1024)} KB</p>
-                    )}
-
-                    <div className="mt-6">
-                        <div className="flex items-center justify-between">
-                            <label className="block text-sm font-medium text-gray-700">Add Bonus Content</label>
-                            <button
-                                type="button"
-                                className="flex items-center text-blue-500 text-sm font-medium"
-                                onClick={() => document.getElementById('bonus-content-upload')?.click()}
-                            >
-                                <span className="mr-1">+</span> Add
-                            </button>
-                            <input
-                                id="bonus-content-upload"
-                                type="file"
-                                className="hidden"
-                                accept=".pdf,.doc,.docx,.jpg,.png"
-                                onChange={handleBonusContentUpload}
-                            />
-                        </div>
-
-                        <div
-                            className="border-2 border-dashed border-blue-200 rounded-md p-4 flex flex-col items-center justify-center h-32 bg-blue-50 mt-2 cursor-pointer"
-                            onClick={() => document.getElementById('bonus-content-upload')?.click()}
-                        >
-                            <Image
-                                src={fluentdocument}
-                                width={20}
-                                height={10}
-                                alt="document upload"
-                                className=" w-15 h-10"
-                            />
-                            <p className="text-sm text-gray-500 text-center">
-                                Drag and drop or Click to<br />choose file from device
-                            </p>
-                        </div>
-                        {bonusContentFile && (
-                            <p className="text-xs text-gray-600 mt-2">{bonusContentFile.name} - {Math.round(bonusContentFile.size / 1024)} KB</p>
-                        )}
-                        <p className="text-xs text-gray-500 mt-1">e.g. bonus artwork, author message</p>
-                    </div>
-
-                    <div className="flex justify-between mt-8">
-                        <button
-                            className="px-6 py-2 bg-blue-100 text-gray-800 rounded-md font-medium hover:bg-gray-200"
-                            disabled
-                        >
-                            Back
-                        </button>
-                        <button
-                            className="px-6 py-2 bg-blue-500 text-white rounded-md font-medium hover:bg-blue-600"
-                            onClick={nextStep}
-                        >
-                            Continue
-                        </button>
-                    </div>
-                </div>
-
-
-            </div>
-        </div>
-    );
-}
-
-export default BookContent;
-
-
diff --git a/src/app/writers/manage-content/PublishingNft/bookDetail.tsx b/src/app/writers/manage-content/PublishingNft/bookDetail.tsx
deleted file mode 100644
index 60c9b16..0000000
--- a/src/app/writers/manage-content/PublishingNft/bookDetail.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import GenreTag from "./genre";
-import Image from "next/image";
-import basildocument from "../../../../../public/basildocument.png";
-
-
-const AVAILABLE_GENRES = ["Fiction", "Drama", "Science Fiction", "Fantasy", "Mystery", "Romance"];
-const AVAILABLE_TAGS = ["Adventure", "Sci-Fi", "Bestseller", "New Release", "Fantasy"];
-
-interface BookDetailsProps {
-    bookData: {
-        authorName: string;
-        genre: string[];
-        tags: string[];
-        description: string;
-    };
-    updateBookData: (data: Partial<BookDetailsProps["bookData"]>) => void;
-    nextStep: () => void;
-    prevStep: () => void;
-}
-
-export default function BookDetails({ bookData, updateBookData, nextStep, prevStep }: BookDetailsProps) {
-    const [selectedGenres, setSelectedGenres] = useState<string[]>(bookData.genre || []);
-    const [selectedTags, setSelectedTags] = useState<string[]>(bookData.tags || []);
-
-    const toggleGenre = (genre: string) => {
-        const updated = selectedGenres.includes(genre)
-            ? selectedGenres.filter(g => g !== genre)
-            : [...selectedGenres, genre];
-        setSelectedGenres(updated);
-        updateBookData({ genre: updated });
-    };
-
-    const toggleTag = (tag: string) => {
-        const updated = selectedTags.includes(tag)
-            ? selectedTags.filter(t => t !== tag)
-            : [...selectedTags, tag];
-        setSelectedTags(updated);
-        updateBookData({ tags: updated });
-    };
-
-    const renderTags = (items: string[], selected: string[], onToggle: (item: string) => void) =>
-        items.map(item => (
-            <GenreTag key={item} name={item} selected={selected.includes(item)} onClick={() => onToggle(item)} />
-        ));
-
-    return (
-        <div className="max-w-3xl mx-auto">
-            <h1 className="text-xl font-medium mb-6">Exclusive NFT Book</h1>
-
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <div>
-                    <div className="border-2 border-dashed border-blue-200 rounded-md p-4 flex flex-col items-center justify-center h-64 bg-blue-50">
-                        <Image
-                            src={basildocument}
-                            alt="document upload"
-                            width={20}
-                            height={10}
-                            className="w-15 h-10"
-                        />
-                        <p className="text-sm text-gray-500 text-center">
-                            Drag and drop or Click to<br />choose file from device
-                        </p>
-                    </div>
-                    <p className="text-xs text-gray-500 mt-2">Supported format: JPEG & PNG</p>
-                </div>
-
-                <div className="md:col-span-2">
-                    <div className="bg-white rounded-lg shadow p-6">
-                        <h2 className="text-lg font-medium mb-4">Book Details</h2>
-
-                        <div className="space-y-4">
-                            <div>
-                                <label className="block text-sm font-medium text-gray-700 mb-1">Author Name</label>
-                                <input
-                                    type="text"
-                                    placeholder="Author Name"
-                                    className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
-                                    value={bookData.authorName}
-                                    onChange={e => updateBookData({ authorName: e.target.value })}
-                                />
-                            </div>
-
-                            <div>
-                                <label className="block text-sm font-medium text-gray-700 mb-1">Genre</label>
-                                <div className="flex flex-wrap gap-2 mt-2">
-                                    {renderTags(AVAILABLE_GENRES, selectedGenres, toggleGenre)}
-                                </div>
-                            </div>
-
-                            <div>
-                                <label className="block text-sm font-medium text-gray-700 mb-1">Tags</label>
-                                <div className="flex flex-wrap gap-2 mt-2">
-                                    {renderTags(AVAILABLE_TAGS, selectedTags, toggleTag)}
-                                </div>
-                            </div>
-
-                            <div>
-                                <label className="block text-sm font-medium text-gray-700 mb-1">Book Description</label>
-                                <textarea
-                                    className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500 h-32"
-                                    placeholder="Type here"
-                                    value={bookData.description}
-                                    onChange={e => updateBookData({ description: e.target.value })}
-                                />
-                            </div>
-                        </div>
-
-                        <div className="flex justify-between mt-8">
-                            <button
-                                className="px-6 py-2 bg-blue-100 text-gray-800 rounded-md font-medium hover:bg-gray-200"
-                                onClick={prevStep}
-                            >
-                                Previous Page
-                            </button>
-                            <button
-                                className="px-6 py-2 bg-blue-500 text-white rounded-md font-medium hover:bg-blue-600"
-                                onClick={nextStep}
-                            >
-                                Continue
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
diff --git a/src/app/writers/manage-content/PublishingNft/genre.tsx b/src/app/writers/manage-content/PublishingNft/genre.tsx
deleted file mode 100644
index bb9f152..0000000
--- a/src/app/writers/manage-content/PublishingNft/genre.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-"use client";
-
-import type React from "react";
-
-type GenreTagProps = {
-  name: string;
-  selected: boolean;
-  onClick: () => void;
-};
-
-function GenreTag({ name, selected, onClick }: GenreTagProps): React.JSX.Element {
-  return (
-    <div
-      className={`inline-flex items-center px-3 py-1 rounded-md text-sm ${
-        selected ? "bg-blue-100 text-blue-800" : "bg-gray-100 text-gray-800"
-      } cursor-pointer`}
-      onClick={onClick}
-    >
-      {name}
-      {selected && <span className="ml-1 text-xs">×</span>}
-    </div>
-  );
-}
-export default GenreTag;
diff --git a/src/app/writers/manage-content/PublishingNft/page.tsx b/src/app/writers/manage-content/PublishingNft/page.tsx
deleted file mode 100644
index 0d4836d..0000000
--- a/src/app/writers/manage-content/PublishingNft/page.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-"use client";
-
-import type React from "react";
-import { useState } from "react";
-import BookContent from "./bookContent";
-import BookDetails from "./bookDetail";
-import Pricing from "./Pricing";
-
-export default function BookNFTApp() {
-  const [currentStep, setCurrentStep] = useState(1);
-  const [bookData, setBookData] = useState<BookData>({
-    coverImage: '',
-    bookTitle: '',
-    subtitle: '',
-    language: '',
-    isbn: '',
-    manuscript: '',
-    bonusContent: '',
-    authorName: '',
-    genre: [],
-    tags: [],
-    description: '',
-    copiesCount: 20,
-    priceUSDC: 0.99,
-    priceSTRK: 33.23
-  });
-  
-  const updateBookData = (data: Partial<BookData>) => {
-    setBookData({ ...bookData, ...data });
-  };
-  
-  const nextStep = () => {
-    if (currentStep < 3) {
-      setCurrentStep(currentStep + 1);
-    } else {
-      console.log('Publishing book:', bookData);
-      alert("Book published successfully!");
-    }
-  };
-
-  const prevStep = () => {
-    if (currentStep > 1) {
-      setCurrentStep(currentStep - 1);
-    }
-  };
-
-  type BookData = {
-    coverImage: string;
-    bookTitle: string;
-    subtitle: string;
-    language: string;
-    isbn: string;
-    manuscript: string;
-    bonusContent: string;
-    authorName: string;
-    genre: string[];
-    tags: string[];
-    description: string;
-    copiesCount: number;
-    priceUSDC: number;
-    priceSTRK: number;
-  };
-
-  return (
-    <div className="min-h-screen bg-gray-50 py-8 px-4">
-      <div className="flex justify-center mb-8">
-        <div className="flex items-center w-full max-w-3xl">
-          <div className={`flex flex-col items-center ${currentStep >= 1 ? 'text-blue-500' : 'text-gray-400'}`}>
-            <div className={`w-8 h-8 rounded-full flex items-center justify-center ${currentStep >= 1 ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}>
-              1
-            </div>
-            <span className="text-sm mt-1">Book Content</span>
-          </div>
-          <div className={`flex-1 h-0.5 ${currentStep >= 2 ? 'bg-blue-500' : 'bg-gray-200'}`}></div>
-          <div className={`flex flex-col items-center ${currentStep >= 2 ? 'text-blue-500' : 'text-gray-400'}`}>
-            <div className={`w-8 h-8 rounded-full flex items-center justify-center ${currentStep >= 2 ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}>
-              2
-            </div>
-            <span className="text-sm mt-1">Book Details</span>
-          </div>
-          <div className={`flex-1 h-0.5 ${currentStep >= 3 ? 'bg-blue-500' : 'bg-gray-200'}`}></div>
-          <div className={`flex flex-col items-center ${currentStep >= 3 ? 'text-blue-500' : 'text-gray-400'}`}>
-            <div className={`w-8 h-8 rounded-full flex items-center justify-center ${currentStep >= 3 ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}>
-              3
-            </div>
-            <span className="text-sm mt-1">Pricing</span>
-          </div>
-        </div>
-      </div>
-
-      {currentStep === 1 && (
-        <BookContent
-          bookData={bookData}
-          updateBookData={updateBookData}
-          nextStep={nextStep}
-        />
-      )}
-
-      {currentStep === 2 && (
-        <BookDetails
-          bookData={bookData}
-          updateBookData={updateBookData}
-          nextStep={nextStep}
-          prevStep={prevStep}
-        />
-      )}
-
-      {currentStep === 3 && (
-        <Pricing
-          bookData={bookData}
-          updateBookData={updateBookData}
-          prevStep={prevStep}
-          publishBook={nextStep}
-        />
-      )}
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/src/app/writers/manage-content/StepIndicator.tsx b/src/app/writers/manage-content/StepIndicator.tsx
deleted file mode 100644
index c410bb6..0000000
--- a/src/app/writers/manage-content/StepIndicator.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import * as React from "react";
-import Box from "@mui/material/Box";
-import Stepper from "@mui/material/Stepper";
-import Step from "@mui/material/Step";
-import StepLabel from "@mui/material/StepLabel";
-import { Check } from "lucide-react";
-import { styled } from "@mui/material/styles";
-import StepConnector, {
-  stepConnectorClasses,
-} from "@mui/material/StepConnector";
-
-// Custom connector styling
-const CustomConnector = styled(StepConnector)(({ theme }) => ({
-  [`&.${stepConnectorClasses.alternativeLabel}`]: {
-    top: 20,
-    left: "calc(-50% + 20px)",
-    right: "calc(50% + 20px)",
-  },
-  [`&.${stepConnectorClasses.active}`]: {
-    [`& .${stepConnectorClasses.line}`]: {
-      borderColor: "#096cff",
-    },
-  },
-  [`&.${stepConnectorClasses.completed}`]: {
-    [`& .${stepConnectorClasses.line}`]: {
-      borderColor: "#096cff",
-    },
-  },
-  [`& .${stepConnectorClasses.line}`]: {
-    borderColor:
-      theme.palette.mode === "dark" ? theme.palette.grey[800] : "#eaeaf0",
-    borderTopWidth: 2,
-    borderRadius: 1,
-  },
-}));
-
-// Custom step icon
-interface CustomStepIconProps {
-  active: boolean;
-  completed: boolean;
-  icon: React.ReactNode;
-}
-
-const CustomStepIcon: React.FC<CustomStepIconProps> = ({
-  active,
-  completed,
-  icon,
-}) => {
-  return (
-    <div
-      className={`w-10 h-10 rounded-full flex items-center justify-center border-2 transition-all duration-300 ${
-        active || completed
-          ? "bg-[#096cff] text-white border-[#096cff]"
-          : "bg-white text-gray-500 border-gray-300"
-      }`}
-    >
-      {completed ? <Check size={16} /> : icon}
-    </div>
-  );
-};
-
-// Custom step label styling
-const CustomStepLabel = styled(StepLabel)(({ theme }) => ({
-  "& .MuiStepLabel-label": {
-    marginTop: 8,
-    fontSize: 14,
-    "&.Mui-active": {
-      color: theme.palette.text.primary,
-    },
-    "&.Mui-completed": {
-      color: theme.palette.text.primary,
-    },
-  },
-}));
-
-interface StepIndicatorProps {
-  currentStep: number;
-}
-
-const StepIndicator: React.FC<StepIndicatorProps> = ({ currentStep }) => {
-  const steps = [
-    { number: 1, title: "Book Content" },
-    { number: 2, title: "Book Details" },
-    { number: 3, title: "Pricing" },
-  ];
-
-  return (
-    <Box
-      sx={{
-        width: "100%",
-        margin: "0 auto",
-        padding: "0px 0",
-      }}
-    >
-      <Stepper
-        activeStep={currentStep - 1} // MUI Stepper is 0-indexed, so adjust accordingly
-        alternativeLabel
-        connector={<CustomConnector />}
-        sx={{ width: "100%" }}
-      >
-        {steps.map((step) => (
-          <Step key={step.number}>
-            <CustomStepLabel
-              StepIconComponent={(props) => (
-                <CustomStepIcon
-                  active={props.active ?? false}
-                  completed={props.completed ?? false}
-                  icon={step.number}
-                />
-              )}
-            >
-              {step.title}
-            </CustomStepLabel>
-          </Step>
-        ))}
-      </Stepper>
-    </Box>
-  );
-};
-
-export default StepIndicator;
diff --git a/src/app/writers/manage-content/SuccessModal.tsx b/src/app/writers/manage-content/SuccessModal.tsx
deleted file mode 100644
index 31df169..0000000
--- a/src/app/writers/manage-content/SuccessModal.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from "react";
-import success_done from "../../../../public/Done.svg";
-import { X } from "lucide-react";
-import Image from "next/image";
-
-interface SuccessModalProps {
-  onClose: () => void;
-}
-
-const SuccessModal: React.FC<SuccessModalProps> = ({ onClose }) => {
-  return (
-    <div className="fixed inset-0 bg-[#000000d7] bg-opacity-50 flex items-center justify-center z-50">
-      <div className="bg-white rounded-lg p-8 w-[500px] text-center relative">
-        <button
-          onClick={onClose}
-          className="absolute top-4 bg-[#f6f6f6] p-1 rounded cursor-pointer right-4 text-gray-400 hover:text-gray-600"
-        >
-          <X size={20} />
-        </button>
-
-        <div className=" rounded-full flex items-center justify-center mx-auto mb-6">
-          <Image
-            src={success_done}
-            alt="icon success"
-            className=" text-blue-600"
-          />
-        </div>
-
-        <h2 className="text-2xl font-semibold mb-4">
-          Book Published Successfully!
-        </h2>
-        <p className="text-gray-600 mb-8">
-          Your book is now live and ready to be discovered by readers around the
-          world.
-        </p>
-
-        <button
-          onClick={onClose}
-          className="px-8 py-3 bg-[#096cff] cursor-pointer text-white rounded-md"
-        >
-          Return to Dashboard
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default SuccessModal;
diff --git a/src/app/writers/manage-content/book-preview-modal.tsx b/src/app/writers/manage-content/book-preview-modal.tsx
deleted file mode 100644
index 6087c4d..0000000
--- a/src/app/writers/manage-content/book-preview-modal.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-"use client";
-
-import type React from "react";
-
-import { useEffect } from "react";
-import {
-  ChevronLeft,
-  Plus,
-  Minus,
-  PenLine,
-  Layout,
-  Link2,
-  Maximize2,
-  Bell,
-} from "lucide-react";
-import Image from "next/image";
-import user from "../../../../public/user1.svg";
-import check from "../../../../public/check.svg";
-
-interface BookPreviewModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  bookTitle?: string;
-  authorName?: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  bookContent?: any;
-}
-
-const BookPreviewModal: React.FC<BookPreviewModalProps> = ({
-  isOpen,
-  onClose,
-  authorName = "Brianna Wiest",
-  bookContent,
-}) => {
-  useEffect(() => {
-    if (isOpen) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "auto";
-    }
-
-    return () => {
-      document.body.style.overflow = "auto";
-    };
-  }, [isOpen]);
-
-  if (!isOpen) return null;
-
-  const sampleContent = `to be for the rest of your life. How genuinely are you going to live? How afraid are you going to be? For how many more years are you going to let your demons conquer you?
-  
-    You are only in your 20s. It is not too late to start over.
-    
-    In fact, I hope you start over all the time. Not by burning bridges or ditching town or closing yourself to what you have, but by no longer fearing what you don't. I hope you spend your free afternoons working on the skills you need to have the job you want someday. I hope you accept that you're not supposed to look the way you did in high school, or really want the same things. I hope you ask yourself: "What do I want now?" every time it occurs to you to do so. I hope you learn that there is only one way to guide your life, and it is by consistently focusing on the next right step.
-    
-    Genuinely unhappy people are never upset by their circumstances; they are upset because they have externalized their power. They put their faith in finding the right person as opposed to being able to attract and choose the right person. They put their faith in finding the right job, in the right economy, as opposed to honing their skills to the point that a company would be remiss to overlook them.
-    
-    If you want to genuinely start over, clear the slate of everything you ever thought about how to get your life together. Don't predict, project, mind-read, assume. Don't imagine a better elevator speech. Don't only think of what it makes sense to do. Think of what it feels right to do. Not what your impulses say, not what your laziness says, not what your fear says. Those things have probably gotten you where you are. But a layer beneath them is a more resolute voice, and it will tell you which way to go. You only have to get quiet, listen, and act.
-    
-    Learn to live your life more than you're inclined to sit around wondering about it. You can't reflect your way into a new existence, but you can think yourself into paralysis. If you know, at your core, that you must start over, it's not a matter of whether`;
-
-  return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
-      <div className="bg-[#f6f6f6] w-full h-full md:h-[90vh] md:w-[90vw] flex flex-col">
-        {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b border-[#e7e7e7] bg-white">
-          <div className="flex items-center gap-2">
-            <button
-              onClick={onClose}
-              className="flex items-center cursor-pointer gap-1 px-3 py-1.5 border border-[#e7e7e7] rounded-md hover:bg-[#f6f6f6] transition-colors"
-            >
-              <ChevronLeft className="w-4 h-4" />
-              <span>Back</span>
-            </button>
-          </div>
-          <div className="flex items-center gap-3">
-            <button className="p-1.5 border border-[#e7e7e7] rounded-md hover:bg-[#f6f6f6] transition-colors">
-              <Plus className="w-4 h-4" />
-            </button>
-            <button className="p-1.5 border border-[#e7e7e7] rounded-md hover:bg-[#f6f6f6] transition-colors">
-              <Minus className="w-4 h-4" />
-            </button>
-            <button className="p-1.5 border border-[#e7e7e7] rounded-md hover:bg-[#f6f6f6] transition-colors">
-              <PenLine className="w-4 h-4" />
-            </button>
-            <button className="p-1.5 border border-[#e7e7e7] rounded-md hover:bg-[#f6f6f6] transition-colors">
-              <Layout className="w-4 h-4" />
-            </button>
-            <button className="p-1.5 border border-[#e7e7e7] rounded-md hover:bg-[#f6f6f6] transition-colors">
-              <Link2 className="w-4 h-4" />
-            </button>
-            <button className="p-1.5 border border-[#e7e7e7] rounded-md hover:bg-[#f6f6f6] transition-colors">
-              <Maximize2 className="w-4 h-4" />
-            </button>
-            <span className="text-sm text-[#5d5d5d]">Page 1-37</span>
-          </div>
-          <div className="flex items-center gap-4 space-x-3">
-            <div className="relative">
-              <Bell className="text-[#5d5d5d] cursor-pointer" size={20} />
-              <div className="absolute -top-1 -right-1 w-2 h-2 bg-[#ff5c5c] rounded-full"></div>
-            </div>
-            <div className="flex items-center gap-2 border p-1 border-[#E7E7E7] rounded">
-              <div className="w-8 h-8 rounded-sm bg-[#dba736] flex items-center justify-center overflow-hidden">
-                <Image
-                  src={user}
-                  alt="Profile"
-                  width={32}
-                  height={32}
-                  className="object-cover"
-                />
-              </div>
-              <div className="text-sm">
-                <div className="flex items-center gap-1">
-                  <span className="font-medium">Joseph Yanum</span>
-                  <Image src={check} alt="Profile" className="object-cover" />
-                </div>
-                <span className="text-[#888888] text-xs">@joeyyanum</span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Main Content */}
-        <div className="flex flex-1 overflow-hidden">
-          {/* Sidebar */}
-          <div className="w-64 bg-white border-r border-[#e7e7e7] flex flex-col overflow-hidden">
-            <div className="px-4 py-6">
-              <h1 className="text-lg font-semibold text-[#3d3d3d]">
-                Book Preview
-              </h1>
-            </div>
-
-            <div className="flex items-center justify-between px-4 py-3 border-y border-[#e7e7e7]">
-              <h2 className="text-sm font-medium text-[#3d3d3d]">
-                Table of Content
-              </h2>
-              <button className="p-1">
-                <svg
-                  width="16"
-                  height="16"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M4 6H20M4 12H20M4 18H20"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-              </button>
-            </div>
-
-            <div className="flex-1 overflow-auto">
-              <ul className="py-2">
-                <li className="px-4 py-2 hover:bg-[#f6f6f6] cursor-pointer">
-                  Cover
-                </li>
-                <li className="px-4 py-2 hover:bg-[#f6f6f6] cursor-pointer">
-                  Praise
-                </li>
-                <li className="px-4 py-2 hover:bg-[#f6f6f6] cursor-pointer">
-                  Title
-                </li>
-                <li className="px-4 py-2 hover:bg-[#f6f6f6] cursor-pointer">
-                  Chapter 1
-                </li>
-                <li className="px-4 py-2 hover:bg-[#f6f6f6] cursor-pointer">
-                  How it Started
-                </li>
-                <li className="px-4 py-2 hover:bg-[#f6f6f6] cursor-pointer">
-                  Let Go
-                </li>
-                <li className="px-4 py-2 hover:bg-[#f6f6f6] cursor-pointer">
-                  Chapter 2
-                </li>
-                <li className="px-4 py-2 hover:bg-[#f6f6f6] cursor-pointer">
-                  How it Started
-                </li>
-                <li className="px-4 py-2 hover:bg-[#f6f6f6] cursor-pointer">
-                  Where Are We
-                </li>
-              </ul>
-            </div>
-          </div>
-
-          {/* Book Content */}
-          <div className="flex-1 bg-white overflow-auto p-6">
-            <div className="max-w-3xl mx-auto">
-              <div className="whitespace-pre-line text-[#3d3d3d] leading-relaxed">
-                {bookContent || sampleContent}
-              </div>
-              <div className="flex items-center justify-between mt-12 text-sm text-[#5d5d5d]">
-                <span>276</span>
-                <div className="uppercase font-medium">{authorName}</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default BookPreviewModal;
diff --git a/src/app/writers/manage-content/example.tsx b/src/app/writers/manage-content/example.tsx
deleted file mode 100644
index 5b3f5e1..0000000
--- a/src/app/writers/manage-content/example.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-// pages/StepperExample.tsx
-import React from "react";
-import { ProgressStepper } from "./ProgressStepper";
-
-const steps = [
-  { label: "Book Content" },
-  { label: "Book Details" },
-  { label: "Pricing" },
-];
-
-export default function StepperExample() {
-  return (
-    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
-      <ProgressStepper steps={steps} currentStep={2} />
-    </div>
-  );
-}
diff --git a/src/app/writers/manage-content/loading.tsx b/src/app/writers/manage-content/loading.tsx
deleted file mode 100644
index 4349ac3..0000000
--- a/src/app/writers/manage-content/loading.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Loading() {
-  return null;
-}
diff --git a/src/app/writers/manage-content/page.tsx b/src/app/writers/manage-content/page.tsx
deleted file mode 100644
index 76200b7..0000000
--- a/src/app/writers/manage-content/page.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-
-import { Header } from "@/components/dashboard/header";
-import ManageContent from "./Manage-content";
-
-export default function Home() {
-  return (
-    <div>
-      <Header title="Manage Content" />
-
-      <div className="p-6 mt-16">
-        <ManageContent />
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/writers/notifications/notification-detail.tsx b/src/app/writers/notifications/notification-detail.tsx
deleted file mode 100644
index 07cbc2b..0000000
--- a/src/app/writers/notifications/notification-detail.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-"use client";
-
-import {  MoveLeft, Trash2 } from "lucide-react";
-import Image from "next/image";
-import soon from "../../../../public/coming-soon.png"
-
-
-interface NotificationDetailPageProps {
-  back: () => void;
-}
-
-export function NotificationDetailPage({ back }: NotificationDetailPageProps) {
-  return (
-    <div className="flex flex-col h-full">
-      {/* Content */}
-      <div className="flex-1 p-4 lg:p-6 overflow-auto">
-        <div className="max-w-2xl mx-auto">
-          <div className="bg-white rounded-lg border border-gray-200 p-6 lg:p-8">
-            <div className="flex justify-between items-center">
-              <div
-                onClick={back}
-                className="cursor-pointer border border-[#888888] rounded-[8px] text-[#888888] p-2"
-              >
-                <MoveLeft />
-              </div>
-              <div className="cursor-pointer border border-[#888888] rounded-[8px] text-[#888888] p-2">
-                <Trash2 />
-              </div>
-            </div>
-            <div className="text-center space-y-6">
-              <h1 className="text-2xl font-bold text-gray-900">
-                New Update for Writers
-              </h1>
-              <p className="text-gray-600">
-                Step up your writing with our latest update
-              </p>
-
-             
-                       <div className="md:w-[400px] w-full mx-auto">
-                         <Image
-                           src={soon}
-                           alt="Notification Banner"
-                        //    width={100}
-                        //    height={100}
-                           className="w-full border "
-                         />
-                       </div>
-
-              <div className="space-y-4 text-gray-600">
-                <p>
-                  Compete against players worldwide, climb the global rankings,
-                  and prove your skills. Test your strategy, outmaneuver your
-                  opponents, and claim your place at the top. Glory awaits!
-                </p>
-              </div>
-
-              <div className="pt-6 border-t border-gray-200">
-                <p className="text-sm text-gray-500">Sent; Today 12:18 PM</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/writers/notifications/page.tsx b/src/app/writers/notifications/page.tsx
deleted file mode 100644
index 6efd147..0000000
--- a/src/app/writers/notifications/page.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { CheckCheck } from "lucide-react";
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import { Header } from "@/components/dashboard/header";
-import { NotificationDetailPage } from "./notification-detail";
-
-const notifications = [
-  {
-    id: 1,
-    title: "New updates for Writers",
-    time: "12:18 PM",
-    date: "Today",
-    isNew: true,
-    content: "Step up your writing with our latest update",
-  },
-  {
-    id: 2,
-    title: "New updates for Writers",
-    time: "12:18 PM",
-    date: "Today",
-    isNew: true,
-    content: "Step up your writing with our latest update",
-  },
-  {
-    id: 3,
-    title: "New updates for Writers",
-    time: "12:18 PM",
-    date: "Yesterday",
-    isNew: true,
-    content: "Step up your writing with our latest update",
-  },
-  {
-    id: 4,
-    title: "New updates for Writers",
-    time: "12:18 PM",
-    date: "Yesterday",
-    isNew: true,
-    content: "Step up your writing with our latest update",
-  },
-  {
-    id: 5,
-    title: "New updates for Writers",
-    time: "12:18 PM",
-    date: "Yesterday",
-    isNew: true,
-    content: "Step up your writing with our latest update",
-  },
-  {
-    id: 6,
-    title: "New updates for Writers",
-    time: "12:18 PM",
-    date: "12 April, 2025",
-    isNew: true,
-    content: "Step up your writing with our latest update",
-  },
-];
-
-function NotificationPage() {
-  const [filter, setFilter] = useState("");
-  const [viewNotf, setViewNotf] = useState(false);
-
-  const groupedNotifications = notifications.reduce((acc, notification) => {
-    if (!acc[notification.date]) {
-      acc[notification.date] = [];
-    }
-    acc[notification.date].push(notification);
-    return acc;
-  }, {} as Record<string, typeof notifications>);
-
-  function backhandler() {
-    setViewNotf(false);
-  }
-  function viewNotificationhandler() {
-    setViewNotf(true);
-  }
-  if (viewNotf) {
-    return <NotificationDetailPage back={backhandler} />;
-  }
-
-  return (
-    <div className="flex flex-col h-full">
-      {/* Header */}
-      <Header title="Notification" />
-
-      {/* Content */}
-      <div className="flex-1 p-4 lg:p-6 overflow-auto mt-16">
-        <div className="bg-white rounded-lg border border-gray-200">
-          {/* Header */}
-          <div className="p-4 lg:p-6 border-b border-gray-200">
-            <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-end justify-between">
-              <div className="flex flex-col gap-2">
-                <div className="flex items-center gap-2 text-[#B0B0B0]">
-                  <h2 className="text-lg font-medium">All Notifications</h2> (7)
-                </div>
-                <div className="flex items-center gap-4">
-                  <Select value={filter} onValueChange={setFilter}>
-                    <SelectTrigger className="w-32 bg-[#F6F6F6] shadow-none rounded-[8px] border-none">
-                      <SelectValue placeholder="Filter by" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="all">All</SelectItem>
-                      <SelectItem value="unread">Unread</SelectItem>
-                      <SelectItem value="read">Read</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-              </div>
-              <Button variant="ghost" className="text-[#5D5D5D] bg-[#F6F6F6]">
-                <CheckCheck className="w-4 h-4 mr-2" />
-                Mark all as read
-              </Button>
-            </div>
-          </div>
-
-          {/* Notifications */}
-          <div className="divide-y divide-gray-200">
-            {Object.entries(groupedNotifications).map(
-              ([date, dateNotifications]) => (
-                <div key={date}>
-                  {date !== "Today" && (
-                    <div className="px-4 lg:px-6 py-3 bg-gray-50">
-                      <p className="text-sm font-medium text-gray-600">
-                        {date}
-                      </p>
-                    </div>
-                  )}
-                  {date === "Today" && (
-                    <div className="px-4 lg:px-6 py-3">
-                      <p className="text-sm font-medium text-gray-600">
-                        {date}
-                      </p>
-                    </div>
-                  )}
-                  {dateNotifications.map((notification) => (
-                    <div
-                      key={notification.id}
-                      className="p-4 lg:p-6 hover:bg-gray-50"
-                    >
-                      <div className="flex items-start gap-4">
-                        <Avatar className="w-10 h-10 bg-gray-200">
-                          <AvatarFallback></AvatarFallback>
-                        </Avatar>
-                        <div className="flex-1 min-w-0">
-                          <div className="flex items-center gap-2 mb-1">
-                            <h3 className="font-medium text-gray-900">
-                              {notification.title}
-                            </h3>
-                            {notification.isNew && (
-                              <Badge
-                                variant="destructive"
-                                className="text-xs text-[#ED4D48] bg-[#ED4D4833]"
-                              >
-                                New
-                              </Badge>
-                            )}
-                          </div>
-                          <p className="text-sm text-gray-500">
-                            {notification.time}
-                          </p>
-                        </div>
-                        <Button
-                          variant="link"
-                          className="text-blue-600"
-                          onClick={viewNotificationhandler}
-                        >
-                          View Details
-                        </Button>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default NotificationPage;
diff --git a/src/app/writers/page.tsx b/src/app/writers/page.tsx
deleted file mode 100644
index 7e4322d..0000000
--- a/src/app/writers/page.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { BookOpen } from "lucide-react";
-import { Header } from "@/components/dashboard/header";
-
-export default function Dashboard() {
-  return (
-    <div>
-      <Header title="Dashboard" />
-      <div className="p-6 mt-16">
-        <div className="bg-white p-6 rounded-lg border border-[#e7e7e7] mb-8">
-          <h3 className="font-semibold mb-4">Monthly Sales</h3>
-          <div className="h-64 bg-[#f6f6f6] rounded-lg flex items-center justify-center">
-            <p className="text-[#5d5d5d]">
-              Sales chart would be displayed here
-            </p>
-          </div>
-        </div>
-
-        <div className="grid grid-cols-2 gap-6">
-          <div className="bg-white p-6 rounded-lg border border-[#e7e7e7]">
-            <h3 className="font-semibold mb-4">Recent Activity</h3>
-            <div className="space-y-4">
-              {[1, 2, 3, 4].map((item) => (
-                <div
-                  key={item}
-                  className="flex items-center gap-3 p-3 bg-[#f6f6f6] rounded-lg"
-                >
-                  <div className="w-10 h-10 rounded-full bg-[#edf7ff] flex items-center justify-center">
-                    <BookOpen className="text-[#096cff]" size={18} />
-                  </div>
-                  <div>
-                    <div className="font-medium">New book published</div>
-                    <div className="text-sm text-[#5d5d5d]">
-                      Native Invisibility - 2 hours ago
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          <div className="bg-white p-6 rounded-lg border border-[#e7e7e7]">
-            <h3 className="font-semibold mb-4">Top Performing Books</h3>
-            <div className="space-y-4">
-              {[1, 2, 3, 4].map((item) => (
-                <div
-                  key={item}
-                  className="flex items-center justify-between p-3 bg-[#f6f6f6] rounded-lg"
-                >
-                  <div className="flex items-center gap-3">
-                    <div className="w-10 h-10 bg-white rounded-md"></div>
-                    <div>
-                      <div className="font-medium">Native Invisibility</div>
-                      <div className="text-sm text-[#5d5d5d]">
-                        124 sales this month
-                      </div>
-                    </div>
-                  </div>
-                  <div className="font-medium">$1,240</div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/writers/profile/component/ProfileForm.tsx b/src/app/writers/profile/component/ProfileForm.tsx
deleted file mode 100644
index 723e893..0000000
--- a/src/app/writers/profile/component/ProfileForm.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-'use client';
-
-import { useState, useRef, ChangeEvent } from "react";
-import Image from "next/image";
-
-interface ProfileFormData {
-    firstName: string;
-    lastName: string;
-    pseudonym: string;
-    email: string;
-    bio: string;
-    profilePicture: string | null;
-  }
-
-export const ProfileForm = () => {
-
-
-  const [formData, setFormData] = useState<ProfileFormData>({
-    firstName: "Joseph",
-    lastName: "Paul",
-    pseudonym: "Joe Paul",
-    email: "example@gmail.com",
-    bio: "",
-    profilePicture: null,
-  });
-
-  const [preview, setPreview] = useState<string | null>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  const handleInputChange = (
-    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    const { name, value } = e.target;
-    setFormData((prev) => ({
-      ...prev,
-      [name]: value,
-    }));
-  };
-
-  const handleImageUpload = (e: ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-
-    const reader = new FileReader();
-    reader.onload = () => {
-      setPreview(reader.result as string);
-      setFormData((prev) => ({
-        ...prev,
-        profilePicture: reader.result as string,
-      }));
-    };
-    reader.readAsDataURL(file);
-  };
-
-  const triggerFileInput = () => {
-    fileInputRef.current?.click();
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    console.log("Form submitted:", formData);
-
-  };
-
-    return (
-        <div className=" mt-5 bg-geen-200 p-5 w-full mx-auto rounded-lg shadow-sm">
-        <form onSubmit={handleSubmit} className="">
-          <div className="flex flex-col items-center mb-8">
-            <div className="relative mb-4">
-              <div className="w-32 h-32 rounded-full overflow-hidden bg-yellow-400">
-                {preview ? (
-                  <Image
-                    src={preview}
-                    alt="Profile Preview"
-                    width={128}
-                    height={128}
-                    className="object-cover w-full h-full"
-                  />
-                ) : (
-                  <div className="w-full h-full flex items-center justify-center bg-yellow-400">
-                    {/* Placeholder silhouette if no image */}
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      className="h-16 w-16 text-yellow-600"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-                      />
-                    </svg>
-                  </div>
-                )}
-              </div>
-              <input
-                type="file"
-                ref={fileInputRef}
-                onChange={handleImageUpload}
-                accept="image/*"
-                className="hidden"
-              />
-            </div>
-            <button
-              type="button"
-              onClick={triggerFileInput}
-              className="py-2 px-4 bg-blue-50 text-blue-600 rounded-md hover:bg-blue-100 transition-colors"
-            >
-              Upload a Profile Picture
-            </button>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div>
-              <label htmlFor="firstName" className="block text-gray-700 mb-2">
-                First Name
-              </label>
-              <input
-                type="text"
-                id="firstName"
-                name="firstName"
-                value={formData.firstName}
-                onChange={handleInputChange}
-                className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                placeholder="Enter your first name"
-              />
-            </div>
-
-            <div>
-              <label htmlFor="lastName" className="block text-gray-700 mb-2">
-                Last Name
-              </label>
-              <input
-                type="text"
-                id="lastName"
-                name="lastName"
-                value={formData.lastName}
-                onChange={handleInputChange}
-                className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                placeholder="Enter your last name"
-              />
-            </div>
-
-            <div>
-              <label htmlFor="pseudonym" className="block text-gray-700 mb-2">
-                Pseudonym (Optional)
-              </label>
-              <input
-                type="text"
-                id="pseudonym"
-                name="pseudonym"
-                value={formData.pseudonym}
-                onChange={handleInputChange}
-                className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                placeholder="Enter your pseudonym"
-              />
-            </div>
-
-            <div>
-              <label htmlFor="email" className="block text-gray-700 mb-2">
-                Email Address
-              </label>
-              <input
-                type="email"
-                id="email"
-                name="email"
-                value={formData.email}
-                onChange={handleInputChange}
-                className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                placeholder="Enter your email address"
-              />
-            </div>
-          </div>
-
-          <div className="mt-6">
-            <label htmlFor="bio" className="block text-gray-700 mb-2">
-              Bio
-            </label>
-            <textarea
-              id="bio"
-              name="bio"
-              value={formData.bio}
-              onChange={handleInputChange}
-              className="w-full p-3 border border-gray-300 rounded-md h-40 focus:outline-none focus:ring-2 focus:ring-blue-500"
-              placeholder="Enter your bio"
-            />
-          </div>
-
-          <div className="mt-8">
-            <button
-              type="submit"
-              className="w-full md:w-auto py-3 px-[5rem] bg-[#EDF7FF] text-black rounded-md hover:bg-blue-100 transition-colors"
-            >
-              Edit Profile
-            </button>
-          </div>
-        </form>
-      </div>
-    )
-}
\ No newline at end of file
diff --git a/src/app/writers/profile/component/Social.tsx b/src/app/writers/profile/component/Social.tsx
deleted file mode 100644
index 6500552..0000000
--- a/src/app/writers/profile/component/Social.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-
-
-import React, { useState } from 'react';
-
-export default function UpdateSocialLinks() {
-  const [socialLinks, setSocialLinks] = useState({
-    facebook: '',
-    instagram: '',
-    twitter: '',
-    linkedin: ''
-  });
-
-  const handleChange = (platform: keyof typeof socialLinks) => (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSocialLinks({ ...socialLinks, [platform]: e.target.value });
-  };
-
-  const handleSubmit = () => {
-    console.log('Updated social links:', socialLinks);
-  };
-
-  const handleCancel = () => {
-    setSocialLinks({
-      facebook: '',
-      instagram: '',
-      twitter: '',
-      linkedin: ''
-    });
-  };
-
-  return (
-    <div className="flex justify-center items-center  bg-gray-50 p-4">
-      <div className="w-full  bg-white rounded-lg shadow-md p-6">
-        <h1 className="text-2xl font-semibold text-gray-700 mb-6">Update Social Links</h1>
-        
-        <div>
-          <div className="grid grid-cols-1 md:flex md:flex-wrap md:justify-between gap-4 mb-6">
-            {/* Facebook */}
-            <div className="space-y-2 w-full md:w-[48%]">
-              <label htmlFor="facebook" className="block text-sm font-medium text-gray-700">
-                Facebook
-              </label>
-              <input
-                id="facebook"
-                type="text"
-                placeholder="Enter Profile Link"
-                value={socialLinks.facebook}
-                onChange={handleChange('facebook')}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-              />
-            </div>
-            
-            {/* Instagram */}
-            <div className="space-y-2 w-full md:w-[48%]">
-              <label htmlFor="instagram" className="block text-sm font-medium text-gray-700">
-                Instagram
-              </label>
-              <input
-                id="instagram"
-                type="text"
-                placeholder="Enter Profile Link"
-                value={socialLinks.instagram}
-                onChange={handleChange('instagram')}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-              />
-            </div>
-            
-            {/* X (Twitter) */}
-            <div className="space-y-2 w-full md:w-[48%]">
-              <label htmlFor="twitter" className="block text-sm font-medium text-gray-700">
-                X
-              </label>
-              <input
-                id="twitter"
-                type="text"
-                placeholder="Enter Profile Link"
-                value={socialLinks.twitter}
-                onChange={handleChange('twitter')}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-              />
-            </div>
-            
-            {/* LinkedIn */}
-            <div className="space-y-2 w-full md:w-[48%]">
-              <label htmlFor="linkedin" className="block text-sm font-medium text-gray-700">
-                Linked In
-              </label>
-              <input
-                id="linkedin"
-                type="text"
-                placeholder="Enter Profile Link"
-                value={socialLinks.linkedin}
-                onChange={handleChange('linkedin')}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-              />
-            </div>
-          </div>
-          
-          <div className="flex flex-col sm:flex-row gap-3 mt-8">
-            <button
-              onClick={handleCancel}
-              className="w-full sm:w-1/2 py-2 px-4 bg-gray-100 text-gray-800 font-medium rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 transition-colors"
-            >
-              Cancel
-            </button>
-            <button
-              onClick={handleSubmit}
-              className="w-full sm:w-1/2 py-2 px-4 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
-            >
-              Save Change
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/src/app/writers/profile/component/UpdatePasswordForm.tsx b/src/app/writers/profile/component/UpdatePasswordForm.tsx
deleted file mode 100644
index 49eb74c..0000000
--- a/src/app/writers/profile/component/UpdatePasswordForm.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-
-
-'use client'
-
-import { useState } from 'react'
-
-const UpdatePasswordForm = () => {
-  const [oldPassword, setOldPassword] = useState('')
-  const [newPassword, setNewPassword] = useState('')
-  const [confirmPassword, setConfirmPassword] = useState('')
-  const [errors, setErrors] = useState<{ [key: string]: string }>({})
-  const [success, setSuccess] = useState(false)
-
-  const validate = () => {
-    const newErrors: { [key: string]: string } = {}
-
-    if (!oldPassword) newErrors.oldPassword = 'Old password is required.'
-    if (!newPassword) newErrors.newPassword = 'New password is required.'
-    if (newPassword.length < 6) newErrors.newPassword = 'New password must be at least 6 characters.'
-    if (newPassword !== confirmPassword) newErrors.confirmPassword = 'Passwords do not match.'
-
-    setErrors(newErrors)
-    return Object.keys(newErrors).length === 0
-  }
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    if (validate()) {
-      console.log({ oldPassword, newPassword })
-      setSuccess(true)
-    } else {
-      setSuccess(false)
-    }
-  }
-
-  return (
-    <form onSubmit={handleSubmit} className="bg-white p-6 rounded-xl shadow-sm max-w-2xl mx-auto">
-      <h2 className="text-xl font-semibold mb-4">Update Password</h2>
-
-      <div className="mb-4">
-        <label className="block text-sm font-medium text-gray-700">Old Password</label>
-        <input
-          type="password"
-          placeholder="Enter Old Password"
-          value={oldPassword}
-          onChange={(e) => setOldPassword(e.target.value)}
-          className="w-full mt-1 px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-        />
-        {errors.oldPassword && <p className="text-sm text-red-500 mt-1">{errors.oldPassword}</p>}
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
-        <div>
-          <label className="block text-sm font-medium text-gray-700">New Password</label>
-          <input
-            type="password"
-            placeholder="Enter New Password"
-            value={newPassword}
-            onChange={(e) => setNewPassword(e.target.value)}
-            className="w-full mt-1 px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-          />
-          {errors.newPassword && <p className="text-sm text-red-500 mt-1">{errors.newPassword}</p>}
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-gray-700">Confirm Password</label>
-          <input
-            type="password"
-            placeholder="Confirm Password"
-            value={confirmPassword}
-            onChange={(e) => setConfirmPassword(e.target.value)}
-            className="w-full mt-1 px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-          />
-          {errors.confirmPassword && (
-            <p className="text-sm text-red-500 mt-1">{errors.confirmPassword}</p>
-          )}
-        </div>
-      </div>
-
-      {success && (
-        <div className="mb-4 text-green-600 font-medium">
-          Password updated successfully!
-        </div>
-      )}
-
-      <div className="flex flex-col md:flex-row gap-4">
-        <button
-          type="button"
-          onClick={() => {
-            setOldPassword('')
-            setNewPassword('')
-            setConfirmPassword('')
-            setErrors({})
-            setSuccess(false)
-          }}
-          className="flex-1 bg-blue-50 text-blue-800 py-3 rounded-md text-sm font-medium hover:bg-blue-100"
-        >
-          Cancel
-        </button>
-        <button
-          type="submit"
-          className="flex-1 bg-blue-600 text-white py-3 rounded-md text-sm font-medium hover:bg-blue-700"
-        >
-          Save Change
-        </button>
-      </div>
-    </form>
-  )
-}
-
-export default UpdatePasswordForm
diff --git a/src/app/writers/profile/component/genre.tsx b/src/app/writers/profile/component/genre.tsx
deleted file mode 100644
index 6a4e55e..0000000
--- a/src/app/writers/profile/component/genre.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-
-
-'use client'
-
-import { useState } from 'react'
-
-const allGenres = ['Fiction', 'Drama', 'Horror', 'Comedy', 'Sci-Fi', 'Fantasy', 'Romance']
-
-const GenreSelector = () => {
-  const [selectedGenres, setSelectedGenres] = useState<string[]>([])
-
-  const handleSelect = (genre: string) => {
-    if (!selectedGenres.includes(genre)) {
-      setSelectedGenres([...selectedGenres, genre])
-    }
-  }
-
-  const removeGenre = (genre: string) => {
-    setSelectedGenres(selectedGenres.filter((g) => g !== genre))
-  }
-
-  return (
-    <div className="bg-white p-6 rounded-xl shadow-sm max-w-2xl w-full mx-auto">
-      <label className="block text-sm font-medium text-gray-700 mb-2">
-        Genre specialization(s)
-      </label>
-
-      <div className="relative mb-4">
-        <select
-          className="w-full px-4 py-2 border border-gray-300 rounded-md appearance-none bg-white text-gray-700"
-          onChange={(e) => handleSelect(e.target.value)}
-        >
-          <option value="">Genres</option>
-          {allGenres.map((genre) => (
-            <option key={genre} value={genre}>
-              {genre}
-            </option>
-          ))}
-        </select>
-      </div>
-
-      <div className="flex flex-wrap gap-2 mb-6">
-        {selectedGenres.map((genre) => (
-          <span
-            key={genre}
-            className="bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm flex items-center gap-1"
-          >
-            {genre}
-            <button onClick={() => removeGenre(genre)} className="text-blue-500 hover:text-blue-800">
-              ×
-            </button>
-          </span>
-        ))}
-      </div>
-
-      <div className="flex flex-col md:flex-row gap-4">
-        <button
-          type="button"
-          className="flex-1 bg-blue-50 text-blue-800 py-3 rounded-md text-sm font-medium hover:bg-blue-100"
-        >
-          Cancel
-        </button>
-        <button
-          type="submit"
-          className="flex-1 bg-blue-600 text-white py-3 rounded-md text-sm font-medium hover:bg-blue-700"
-        >
-          Save Change
-        </button>
-      </div>
-    </div>
-  )
-}
-
-export default GenreSelector
diff --git a/src/app/writers/profile/component/profileHeader.tsx b/src/app/writers/profile/component/profileHeader.tsx
deleted file mode 100644
index cc53047..0000000
--- a/src/app/writers/profile/component/profileHeader.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Bell } from "lucide-react";
-import Image from "next/image";
-import user from "../../../../../public/user1.svg";
-import check from "../../../public/../../../public/check.svg";
-
-interface HeaderProps {
-  title: string;
-}
-
-export function ProfileHeader() {
-  return (
-    <header className="bg-[#F6F6F6] p-4 border-b border-[#F6F6F6] flex items-center justify-end overflow-hidden ">
-      
-
-      <div className="flex items-center gap-4 space-x-3">
-        <div className="relative">
-          <Bell className="text-[#5d5d5d] cursor-pointer" size={20} />
-          <div className="absolute -top-1 -right-1 w-2 h-2 bg-[#ff5c5c] rounded-full"></div>
-        </div>
-        <div className="flex items-center gap-2 border p-1 border-[#E7E7E7] rounded">
-          <div className="w-8 h-8 rounded-sm bg-[#dba736] flex items-center justify-center overflow-hidden">
-            <Image
-              src={user}
-              alt="Profile"
-              width={32}
-              height={32}
-              className="object-cover"
-            />
-          </div>
-          <div className="text-sm">
-            <div className="flex items-center gap-1">
-              <span className="font-medium">Joseph Yanum</span>
-              <Image src={check} alt="Profile" className="object-cover" />
-            </div>
-            <span className="text-[#888888] text-xs">@joeyyanum</span>
-          </div>
-        </div>
-      </div>
-    </header>
-  );
-}
diff --git a/src/app/writers/profile/component/profilesidebar.tsx b/src/app/writers/profile/component/profilesidebar.tsx
deleted file mode 100644
index 77456ad..0000000
--- a/src/app/writers/profile/component/profilesidebar.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-
-
-"use client";
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-
-export function ProfileSidebar() {
-  const pathname = usePathname();
-
-  const navItems = [
-
-    {
- 
-      label: "Profile Details",
-      href: "/dashboard/profile",
-    },
-    {
-
-      label: "Genre Specialization",
-      href: "/dashboard/profile/genre",
-    },
-    {
-  
-      label: "Password",
-      href: "/dashboard/profile/password",
-    },
-    {
-  
-      label: "Social",
-      href: "/dashboard/profile/social",
-    },
-  ];
-
-  return (
-    <div className="w-80 bg-[#F6F6F6] border-r border-[#F6F6F6] border h-screen">
-      <div className="p-4 flex items-center">
-        <span className="font-[700] ml-3 text-[#3D3D3D] text-[22px]">Profile</span>
-      </div>
-
-      <nav className="p-4">
-        <ul className="space-y-2">
-          {navItems.map((item) => (
-            <li key={item.label}>
-              <Link
-                href={item.href}
-                className={`flex items-center gap-3 p-3 rounded-md ${
-                  pathname === item.href
-                    ? "bg-[#E7E7E7] text-[#5D5D5D]"
-                    : "text-[#5d5d5d] hover:bg-[#f6f6f6]"
-                }`}
-              >
-                <span className={pathname === item.href ? "font-medium" : ""}>
-                  {item.label}
-                </span>
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </nav>
-    </div>
-  );
-}
diff --git a/src/app/writers/profile/genre/page.tsx b/src/app/writers/profile/genre/page.tsx
deleted file mode 100644
index 3ae610a..0000000
--- a/src/app/writers/profile/genre/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import GenreSelector from "../component/genre";
-
-
-
-function GenrePage() {
-  return (
-    <div className="flex flex-col lg:flex-row mt-20">
-  <GenreSelector />
-  </div>
-  );
-}
-export default GenrePage;
diff --git a/src/app/writers/profile/layout.tsx b/src/app/writers/profile/layout.tsx
deleted file mode 100644
index aba9fef..0000000
--- a/src/app/writers/profile/layout.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type React from "react";
-import "@/app/globals.css";
-import { ProfileSidebar } from "./component/profilesidebar";
-import { Header } from "@/components/dashboard/header";
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <>
-      <Header title="Profile" />
-      <div className="flex flex-col lg:flex-row min-h-screen mt-16">
-        <ProfileSidebar />
-        <div className=" w-full">{children}</div>
-      </div>
-    </>
-  );
-}
diff --git a/src/app/writers/profile/page.tsx b/src/app/writers/profile/page.tsx
deleted file mode 100644
index c9f6e08..0000000
--- a/src/app/writers/profile/page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-"use client";
-
-import { ProfileForm } from "./component/ProfileForm";
-
-function ProfilePage() {
-  return (
-    <main className="flex flex-col lg:flex-row min-h-screen ">
-
-      <div className="flex-1 p-4 lg:p-8 w-full ">
-        <ProfileForm />
-      </div>
-    </main>
-  );
-}
-export default ProfilePage;
diff --git a/src/app/writers/profile/password/page.tsx b/src/app/writers/profile/password/page.tsx
deleted file mode 100644
index 1b12d17..0000000
--- a/src/app/writers/profile/password/page.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import UpdatePasswordForm from "../component/UpdatePasswordForm";
-
-
-function PasswordPage() {
-  return (
-    <div className="flex flex-col lg:flex-row  mt-20">
-     < UpdatePasswordForm />
-    </div>
-  );
-}
- export default PasswordPage;
\ No newline at end of file
diff --git a/src/app/writers/profile/social/page.tsx b/src/app/writers/profile/social/page.tsx
deleted file mode 100644
index 13391aa..0000000
--- a/src/app/writers/profile/social/page.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-"use client";
-
-import UpdateSocialLinks from "../component/Social";
-
-
-function SocialPage() {
-  return (
-    <div className="flex flex-col lg:flex-row mt-10">
-   <UpdateSocialLinks />
-  </div>
-  );
-}
-export default SocialPage;
\ No newline at end of file
diff --git a/src/components/blockchain/ContractInteraction.tsx b/src/components/blockchain/ContractInteraction.tsx
deleted file mode 100644
index b29a5bb..0000000
--- a/src/components/blockchain/ContractInteraction.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
-function Page(){
-    return(
-        <h1>Blockchain Component</h1>
-    )
-}
-
-
-export default Page;
\ No newline at end of file
diff --git a/src/components/blockchain/NFTCard.tsx b/src/components/blockchain/NFTCard.tsx
deleted file mode 100644
index 29044dd..0000000
--- a/src/components/blockchain/NFTCard.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-
-function Page(){
-    return(
-        <h1>Blockchain Component</h1>
-    )
-}
-
-
-export default Page;
\ No newline at end of file
diff --git a/src/components/blockchain/TokenDisplay.tsx b/src/components/blockchain/TokenDisplay.tsx
deleted file mode 100644
index 29044dd..0000000
--- a/src/components/blockchain/TokenDisplay.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-
-function Page(){
-    return(
-        <h1>Blockchain Component</h1>
-    )
-}
-
-
-export default Page;
\ No newline at end of file
diff --git a/src/components/blockchain/TransactionButton.tsx b/src/components/blockchain/TransactionButton.tsx
deleted file mode 100644
index 29044dd..0000000
--- a/src/components/blockchain/TransactionButton.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-
-function Page(){
-    return(
-        <h1>Blockchain Component</h1>
-    )
-}
-
-
-export default Page;
\ No newline at end of file
diff --git a/src/components/common/Button.tsx b/src/components/common/Button.tsx
deleted file mode 100644
index aa29f37..0000000
--- a/src/components/common/Button.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-function Button(){
-    return(
-        <h1>Buttons</h1>
-    )
-}
-
-
-
-export default Button;
-
diff --git a/src/components/common/Card.tsx b/src/components/common/Card.tsx
deleted file mode 100644
index 6cc2201..0000000
--- a/src/components/common/Card.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
-function Card(){
-    return(
-        <h1>Card</h1>
-    )
-}
-
-
-export default Card;
\ No newline at end of file
diff --git a/src/components/common/Dropdown.tsx b/src/components/common/Dropdown.tsx
deleted file mode 100644
index 5cb29aa..0000000
--- a/src/components/common/Dropdown.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
-function DropDown(){
-    return(
-        <h1>Drop down</h1>
-    )
-}
-
-
-export default DropDown;
\ No newline at end of file
diff --git a/src/components/common/ErrorMessage.tsx b/src/components/common/ErrorMessage.tsx
deleted file mode 100644
index 8a86f58..0000000
--- a/src/components/common/ErrorMessage.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
-function ErrorMessage(){
-    return(
-        <h1>ErrorMessage</h1>
-    )
-}
-
-
-export default ErrorMessage
\ No newline at end of file
diff --git a/src/components/common/Input.tsx b/src/components/common/Input.tsx
deleted file mode 100644
index 2a68c47..0000000
--- a/src/components/common/Input.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-function Input(){
-    return(
-        <h1>INput</h1>
-    )
-}
-
-
-export default Input;
\ No newline at end of file
diff --git a/src/components/common/LoadingSpinner.tsx b/src/components/common/LoadingSpinner.tsx
deleted file mode 100644
index 9346c8b..0000000
--- a/src/components/common/LoadingSpinner.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
-function LoadingSpinner(){
-    return(
-        <h1>LoadingSpinner</h1>
-    )
-}
-
-
-export default LoadingSpinner;
\ No newline at end of file
diff --git a/src/components/common/PriceTag.tsx b/src/components/common/PriceTag.tsx
deleted file mode 100644
index 45c8c62..0000000
--- a/src/components/common/PriceTag.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-function PriceTag(){
-    return(
-        <h1>Price Tag</h1>
-    )
-}
-
-
-export default PriceTag;
\ No newline at end of file
diff --git a/src/components/common/Rating.tsx b/src/components/common/Rating.tsx
deleted file mode 100644
index d8610b2..0000000
--- a/src/components/common/Rating.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-function Rating(){
-    return(
-        <h1>Rating</h1>
-    )
-}
-
-
-export default Rating;
diff --git a/src/components/contexts/AuthContext.tsx b/src/components/contexts/AuthContext.tsx
deleted file mode 100644
index 0b673fc..0000000
--- a/src/components/contexts/AuthContext.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-function AuthContext() {
-  return (
-    <div>AuthContext</div>
-  )
-}
-
-export default AuthContext
\ No newline at end of file
diff --git a/src/components/contexts/BookContext.tsx b/src/components/contexts/BookContext.tsx
deleted file mode 100644
index f2677fe..0000000
--- a/src/components/contexts/BookContext.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-import React from 'react'
-
-function BookContext() {
-  return (
-    <div>BookContext</div>
-  )
-}
-
-export default BookContext
\ No newline at end of file
diff --git a/src/components/contexts/NotificationContext.tsx b/src/components/contexts/NotificationContext.tsx
deleted file mode 100644
index 547e0ba..0000000
--- a/src/components/contexts/NotificationContext.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-function NotificationContext() {
-  return (
-    <div>NotificationContext</div>
-  )
-}
-
-export default NotificationContext
\ No newline at end of file
diff --git a/src/components/contexts/ThemeContext.tsx b/src/components/contexts/ThemeContext.tsx
deleted file mode 100644
index 0dd1c77..0000000
--- a/src/components/contexts/ThemeContext.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-function ThemeContext() {
-  return (
-    <div>ThemeContext</div>
-  )
-}
-
-export default ThemeContext
\ No newline at end of file
diff --git a/src/components/contexts/WalletContext.tsx b/src/components/contexts/WalletContext.tsx
deleted file mode 100644
index ec2e116..0000000
--- a/src/components/contexts/WalletContext.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-function WalletContext() {
-  return (
-    <div>WalletContext</div>
-  )
-}
-
-export default WalletContext
\ No newline at end of file
diff --git a/src/components/hooks/useAuth.tsx b/src/components/hooks/useAuth.tsx
deleted file mode 100644
index 94f61f5..0000000
--- a/src/components/hooks/useAuth.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-function useAuth() {
-  return (
-    <div>useAuth</div>
-  )
-}
-
-export default useAuth
\ No newline at end of file
diff --git a/src/components/hooks/useContract.tsx b/src/components/hooks/useContract.tsx
deleted file mode 100644
index 0214213..0000000
--- a/src/components/hooks/useContract.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-function useContract() {
-  return (
-    <div>useContract</div>
-  )
-}
-
-export default useContract
\ No newline at end of file
diff --git a/src/components/hooks/useLibrary.tsx b/src/components/hooks/useLibrary.tsx
deleted file mode 100644
index 0f0a605..0000000
--- a/src/components/hooks/useLibrary.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-function useLibrary() {
-  return (
-    <div>useLibrary</div>
-  )
-}
-
-export default useLibrary
\ No newline at end of file
diff --git a/src/components/hooks/useRankings.tsx b/src/components/hooks/useRankings.tsx
deleted file mode 100644
index a4b143e..0000000
--- a/src/components/hooks/useRankings.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-function useRankings() {
-  return (
-    <div>useRankings</div>
-  )
-}
-
-export default useRankings
\ No newline at end of file
diff --git a/src/components/hooks/useTokenbound.tsx b/src/components/hooks/useTokenbound.tsx
deleted file mode 100644
index 2abfb67..0000000
--- a/src/components/hooks/useTokenbound.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-function useTokenbound() {
-  return (
-    <div>useTokenbound</div>
-  )
-}
-
-export default useTokenbound
\ No newline at end of file
diff --git a/src/components/hooks/useWallet.tsx b/src/components/hooks/useWallet.tsx
deleted file mode 100644
index 49cc38d..0000000
--- a/src/components/hooks/useWallet.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-function useWallet() {
-  return (
-    <div>useWallet</div>
-  )
-}
-
-export default useWallet
\ No newline at end of file
diff --git a/src/components/landingpage/Footer.tsx b/src/components/landingpage/Footer.tsx
index 28be7ee..0f05b27 100644
--- a/src/components/landingpage/Footer.tsx
+++ b/src/components/landingpage/Footer.tsx
@@ -1,83 +1,99 @@
+import Link from "next/link";
+import Image from "next/image";
 import Linkedin from "@/app/svg/Linkedin";
 import Telegram from "@/app/svg/Telegram";
 import X from "@/app/svg/X";
-import React from "react";
-import { FaTwitter, FaTelegram } from "react-icons/fa";
 
-export default function Footer() {
+const Footer = () => {
+  const year = new Date().getFullYear();
   return (
     <footer className="py-8 bg-white mx-[60px] border-t-[#E7E7E7] border-t-[1px]">
       <div className="flex flex-col md:flex-row justify-between">
         <div>
           <div className="flex items-center mb-10">
-            <img
+            <Image
               src="/logo.svg"
+              alt="ChainLib"
+              width={120}
+              height={32}
               className="w-9 h-9 bg-blue-900 rounded-full flex items-center justify-center mr-2"
             />
             <h2 className="text-[#0F265C] text-xl font-bold">ChainLib</h2>
           </div>
           <div className="flex space-x-4">
-            <button className="w-[50px] h-[50px] rounded-full border border-[#5D5D5D] flex items-center justify-center text-[#454545]">
-              <X />
-            </button>
-            <button className="w-[50px] h-[50px] rounded-full border border-[#5D5D5D] flex items-center justify-center text-[#454545]">
-              <Telegram />
-            </button>
-            <button className="w-[50px] h-[50px] rounded-full border border-[#5D5D5D] flex items-center justify-center text-[#454545]">
-              <Linkedin />
-            </button>
+            <Link
+              href="https://github.com"
+              target="_blank"
+              className="text-[#FDFDFD] hover:text-white transition-colors"
+            >
+              <button className="w-[50px] h-[50px] rounded-full border border-[#5D5D5D] flex items-center justify-center text-[#454545]">
+                <X />
+              </button>
+            </Link>
+
+            <Link
+              href="https://x.com"
+              target="_blank"
+              className="text-[#FDFDFD] hover:text-white transition-colors"
+            >
+              <button className="w-[50px] h-[50px] rounded-full border border-[#5D5D5D] flex items-center justify-center text-[#454545]">
+                <Telegram />
+              </button>
+            </Link>
+            <Link
+              href="https://t.me"
+              target="_blank"
+              className="text-[#FDFDFD] hover:text-white transition-colors"
+            >
+              <button className="w-[50px] h-[50px] rounded-full border border-[#5D5D5D] flex items-center justify-center text-[#454545]">
+                <Linkedin />
+              </button>
+            </Link>
           </div>
           <div className="mt-7">
-            <p className="text-[#5D5D5D] text-xs">
-              © 2025 ChainLib. All rights reserved.
-            </p>
+            <div className="text-sm">&copy; Copyright Chainlib {year}</div>
           </div>
         </div>
 
         <div className="flex flex-col md:flex-row space-y-6 md:space-y-0 md:space-x-16 text-sm">
           <div>
-            <h3 className="text-gray-500 font-medium mb-4">Explore</h3>
+            <h3 className="text-gray-500 font-bold mb-4">Explore</h3>
             <ul className="space-y-3">
               <li>
-                <a href="#" className="text-gray-700 hover:text-blue-900">
+                <a href="/" className="text-gray-700 hover:text-blue-900 cursor-pointer">
                   Home
                 </a>
               </li>
               <li>
-                <a href="#" className="text-gray-700 hover:text-blue-900">
+                <a
+                  href="/books"
+                  className="text-gray-700 hover:text-blue-900 cursor-pointer"
+                >
                   Books
                 </a>
               </li>
               <li>
-                <a href="#" className="text-gray-700 hover:text-blue-900">
+                <a
+                  href="/how-it-works"
+                  className="text-gray-700 hover:text-blue-900 cursor-pointer"
+                >
                   How It Works
                 </a>
               </li>
               <li>
-                <a href="#" className="text-gray-700 hover:text-blue-900">
+                <a
+                  href="/about-us"
+                  className="text-gray-700 hover:text-blue-900 cursor-pointer"
+                >
                   About
                 </a>
               </li>
             </ul>
           </div>
-
-          <div>
-            <h3 className="text-gray-500 font-medium mb-4">Legal</h3>
-            <ul className="space-y-3">
-              <li>
-                <a href="#" className="text-gray-700 hover:text-blue-900">
-                  Privacy Policy
-                </a>
-              </li>
-              <li>
-                <a href="#" className="text-gray-700 hover:text-blue-900">
-                  Terms of Service
-                </a>
-              </li>
-            </ul>
-          </div>
         </div>
       </div>
     </footer>
   );
-}
+};
+
+export default Footer;
diff --git a/src/components/landingpage/NavBar.tsx b/src/components/landingpage/NavBar.tsx
index b73d0a3..a959031 100644
--- a/src/components/landingpage/NavBar.tsx
+++ b/src/components/landingpage/NavBar.tsx
@@ -95,7 +95,7 @@ const NavBar = () => {
           </span>
         </Link>
 
-        <nav className="hidden md:flex space-x-6 text-[#5D5D5D] text-sm">
+        <nav className="hidden md:flex space-x-6 text-[#5D5D5D] text-sm cursor-pointer">
           {navItems.map(({ label, href }) => (
             <Link
               key={href}
diff --git a/src/components/layout/PageContainer.tsx b/src/components/layout/PageContainer.tsx
deleted file mode 100644
index 2ef5b1b..0000000
--- a/src/components/layout/PageContainer.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-
-function PageContainer(){
-    return(
-        <h1>Page Container</h1>
-    )
-}
-
-export default PageContainer;
\ No newline at end of file

From 5d26a4f9ece6c31b8c5a7d4f9a69e3a6f21b27e1 Mon Sep 17 00:00:00 2001
From: ONEONUORA <monweebube44@gmail.com>
Date: Tue, 22 Jul 2025 13:50:23 -0700
Subject: [PATCH 3/3] feat: add admin dashboard structure, SEO and refactoring

---
 package.json                                  |   2 +-
 src/app/dashboard/admin/analytics/page.tsx    |   3 +
 .../admin/community-and-events/page.tsx       |   5 +-
 .../admin/content-management/page.tsx         |   1 +
 .../dashboard/admin/notifications/page.tsx    |   2 +
 src/app/dashboard/admin/page.tsx              |  28 ++-
 src/app/dashboard/admin/transactions/page.tsx |   5 +-
 .../dashboard/admin/user-management/page.tsx  |   4 +-
 .../readers/components/collection-modal.tsx   | 219 ++++++++++++++++++
 .../readers/components/header-reader.tsx      |   2 +-
 .../readers/components/series-modal.tsx       | 218 +++++++++++++++++
 .../readers/discussions-and-clubs/page.tsx    |   1 +
 src/app/dashboard/readers/library/page.tsx    |  73 +++++-
 .../dashboard/readers/notifications/page.tsx  |   4 +-
 src/app/dashboard/readers/page.tsx            |  29 ++-
 src/app/dashboard/readers/profile/page.tsx    |   3 +-
 .../dashboard/readers/reading-stats/page.tsx  |   7 +-
 .../readers/stats-and-achievements/page.tsx   |   3 +-
 .../dashboard/readers/transactions/page.tsx   |   3 +-
 src/app/dashboard/readers/wishlist/page.tsx   |   2 +
 src/app/dashboard/writers/analytics/page.tsx  |   3 +
 .../writers/discussions-and-clubs/page.tsx    |   2 +
 src/app/dashboard/writers/earnings/page.tsx   |   2 +
 src/app/dashboard/writers/feedback/page.tsx   |  12 -
 .../writers/manage-content/PreviewModal.tsx   |   2 +-
 .../manage-content/book-preview-modal.tsx     |   3 +-
 .../dashboard/writers/manage-content/page.tsx |   5 +-
 src/app/dashboard/writers/page.tsx            | 108 +++++----
 .../profile/component/profileHeader.tsx       |   2 +-
 src/app/dashboard/writers/profile/layout.tsx  |   4 +-
 src/app/layout.tsx                            | 118 ++++++++--
 src/components/blockchain/Providers.tsx       |  34 ---
 .../blockchain/StarknetProviders.tsx          |  52 +++++
 .../blockchain/Wallet-connect-modal.tsx       | 180 --------------
 .../blockchain/Wallet-disconnect-modal.tsx    |   2 +-
 .../blockchain/account-type-modal.tsx         | 210 +++++++++++++++++
 .../blockchain/client-providers.tsx           |  17 ++
 src/components/blockchain/connect-button.tsx  | 107 +++++++++
 .../blockchain/wallet-connect-context.tsx     |  79 +++++++
 src/components/dashboard/header.tsx           |  60 ++++-
 src/components/landingpage/NavBar.tsx         |  24 +-
 src/components/metadata/manifest.ts           |  26 +++
 src/components/metadata/robots.ts             |  12 +
 src/components/metadata/seo-head.tsx          |  58 +++++
 src/components/metadata/sitemap.ts            |  54 +++++
 src/components/metadata/structured-data.tsx   | 152 ++++++++++++
 46 files changed, 1579 insertions(+), 363 deletions(-)
 create mode 100644 src/app/dashboard/readers/components/collection-modal.tsx
 create mode 100644 src/app/dashboard/readers/components/series-modal.tsx
 delete mode 100644 src/app/dashboard/writers/feedback/page.tsx
 delete mode 100644 src/components/blockchain/Providers.tsx
 create mode 100644 src/components/blockchain/StarknetProviders.tsx
 delete mode 100644 src/components/blockchain/Wallet-connect-modal.tsx
 create mode 100644 src/components/blockchain/account-type-modal.tsx
 create mode 100644 src/components/blockchain/client-providers.tsx
 create mode 100644 src/components/blockchain/connect-button.tsx
 create mode 100644 src/components/blockchain/wallet-connect-context.tsx
 create mode 100644 src/components/metadata/manifest.ts
 create mode 100644 src/components/metadata/robots.ts
 create mode 100644 src/components/metadata/seo-head.tsx
 create mode 100644 src/components/metadata/sitemap.ts
 create mode 100644 src/components/metadata/structured-data.tsx

diff --git a/package.json b/package.json
index f38a6af..eb3d0fa 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "my-app",
+  "name": "chainlib",
   "type": "module",
   "version": "0.1.0",
   "private": true,
diff --git a/src/app/dashboard/admin/analytics/page.tsx b/src/app/dashboard/admin/analytics/page.tsx
index 07b5e9e..b08df33 100644
--- a/src/app/dashboard/admin/analytics/page.tsx
+++ b/src/app/dashboard/admin/analytics/page.tsx
@@ -1,7 +1,10 @@
 "use-client";
 import { Header } from "@/components/dashboard/header";
 
+
 export default function Analytics() {
+
+ 
   return (
     <>
       <Header title="Analytics" />
diff --git a/src/app/dashboard/admin/community-and-events/page.tsx b/src/app/dashboard/admin/community-and-events/page.tsx
index d958673..3f4ef37 100644
--- a/src/app/dashboard/admin/community-and-events/page.tsx
+++ b/src/app/dashboard/admin/community-and-events/page.tsx
@@ -1,10 +1,13 @@
 "use-client";
 import { Header } from "@/components/dashboard/header";
 
+
 export default function CommunityAndEvents() {
+
+
   return (
     <>
-      <Header title="Community and Events" />
+      <Header title="Community and Events"  />
       <div className="space-y-6">
         <div className="flex flex-col items-center justify-center h-screen">
           <h1 className="text-2xl font-bold text-gray-800">Community and events</h1>
diff --git a/src/app/dashboard/admin/content-management/page.tsx b/src/app/dashboard/admin/content-management/page.tsx
index 82dd63d..fb7108d 100644
--- a/src/app/dashboard/admin/content-management/page.tsx
+++ b/src/app/dashboard/admin/content-management/page.tsx
@@ -2,6 +2,7 @@
 import { Header } from "@/components/dashboard/header";
 
 export default function ContentManagement() {
+
   return (
     <>
       <Header title="Content Management" />
diff --git a/src/app/dashboard/admin/notifications/page.tsx b/src/app/dashboard/admin/notifications/page.tsx
index f67e4f6..39bd566 100644
--- a/src/app/dashboard/admin/notifications/page.tsx
+++ b/src/app/dashboard/admin/notifications/page.tsx
@@ -1,7 +1,9 @@
 "use-client";
 import { Header } from "@/components/dashboard/header";
 
+
 export default function Notifications() {
+
   return (
     <>
       <Header title="Notification" />
diff --git a/src/app/dashboard/admin/page.tsx b/src/app/dashboard/admin/page.tsx
index 65d5686..8452c0d 100644
--- a/src/app/dashboard/admin/page.tsx
+++ b/src/app/dashboard/admin/page.tsx
@@ -1,18 +1,28 @@
 "use-client";
+import StarknetProvider from "@/components/blockchain/StarknetProviders";
+import { WalletProvider } from "@/components/blockchain/wallet-connect-context";
 import { Header } from "@/components/dashboard/header";
 
+
 export default function DashboardHome() {
+  
   return (
     <>
-      <Header title="Dashboard" />
-      <div className="space-y-6">
-        <div className="flex flex-col items-center justify-center h-screen">
-          <h1 className="text-2xl font-bold text-gray-800">Admin Dashboard</h1>
-          <p className="text-gray-600 mt-2">
-            Welcome to your personalized admin space!
-          </p>
-        </div>
-      </div>
+      <StarknetProvider>
+        <WalletProvider>
+          <Header title="Dashboard" />
+          <div className="space-y-6">
+            <div className="flex flex-col items-center justify-center h-screen">
+              <h1 className="text-2xl font-bold text-gray-800">
+                Admin Dashboard
+              </h1>
+              <p className="text-gray-600 mt-2">
+                Welcome to your personalized admin space!
+              </p>
+            </div>
+          </div>
+        </WalletProvider>
+      </StarknetProvider>
     </>
   );
 }
diff --git a/src/app/dashboard/admin/transactions/page.tsx b/src/app/dashboard/admin/transactions/page.tsx
index 859f205..3698b6c 100644
--- a/src/app/dashboard/admin/transactions/page.tsx
+++ b/src/app/dashboard/admin/transactions/page.tsx
@@ -1,10 +1,13 @@
 "use-client";
 import { Header } from "@/components/dashboard/header";
 
+
 export default function Transactions() {
+
+
   return (
     <>
-      <Header title="Transactions" />
+      <Header title="Transactions"  />
       <div className="space-y-6">
         <div className="flex flex-col items-center justify-center h-screen">
           <h1 className="text-2xl font-bold text-gray-800">Transactions</h1>
diff --git a/src/app/dashboard/admin/user-management/page.tsx b/src/app/dashboard/admin/user-management/page.tsx
index 627536d..b2bd5e4 100644
--- a/src/app/dashboard/admin/user-management/page.tsx
+++ b/src/app/dashboard/admin/user-management/page.tsx
@@ -1,10 +1,12 @@
 "use-client";
 import { Header } from "@/components/dashboard/header";
 
+
 export default function UserManagment() {
+
   return (
     <>
-      <Header title="User Managements" />
+      <Header title="User Managements"  />
       <div className="space-y-6">
         <div className="flex flex-col items-center justify-center h-screen">
           <h1 className="text-2xl font-bold text-gray-800">User Management</h1>
diff --git a/src/app/dashboard/readers/components/collection-modal.tsx b/src/app/dashboard/readers/components/collection-modal.tsx
new file mode 100644
index 0000000..3fa614f
--- /dev/null
+++ b/src/app/dashboard/readers/components/collection-modal.tsx
@@ -0,0 +1,219 @@
+"use client"
+
+import { ArrowLeft, Bell, CheckCircle, Star, Plus } from "lucide-react"
+import Image from "next/image"
+import { useEffect } from "react"
+import imgbook from "../../../../../public/Cover.png";
+import imgbook1 from "../../../../../public/user1.svg"
+
+interface CollectionBook {
+  id: string
+  title: string
+  author: string
+  rating: number
+  status: "read" | "unread" | "progress"
+  progress?: number
+  verified?: boolean
+}
+
+interface CollectionModalProps {
+  collection: {
+    title: string
+    rating: number
+    totalReviews: number
+    bookCount: number
+    collaborators: string[]
+    books: CollectionBook[]
+  }
+  onClose: () => void
+  onBookClick: (book: CollectionBook) => void
+}
+
+const collectionData = {
+  title: "By Best Books",
+  rating: 4.5,
+  totalReviews: 500,
+  bookCount: 5,
+  collaborators: ["You", "Oluwa_Dami"],
+  books: [
+    {
+      id: "collection-1",
+      title: "Love at Night 1",
+      author: "Darrin Collins",
+      rating: 4.5,
+      status: "read" as const,
+      verified: true,
+    },
+    {
+      id: "collection-2",
+      title: "Seven Elements",
+      author: "Darrin Collins",
+      rating: 4.5,
+      status: "read" as const,
+      verified: true,
+    },
+    {
+      id: "collection-3",
+      title: "Figo",
+      author: "Darrin Collins",
+      rating: 4.5,
+      status: "progress" as const,
+      progress: 5,
+      verified: true,
+    },
+  ],
+}
+
+export function CollectionModal({ onClose, onBookClick }: Omit<CollectionModalProps, "collection">) {
+  // Close modal on escape key
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose()
+      }
+    }
+    document.addEventListener("keydown", handleEscape)
+    return () => document.removeEventListener("keydown", handleEscape)
+  }, [onClose])
+
+  // Prevent body scroll when modal is open
+  useEffect(() => {
+    document.body.style.overflow = "hidden"
+    return () => {
+      document.body.style.overflow = "unset"
+    }
+  }, [])
+
+  const getStatusBadge = (book: CollectionBook) => {
+    switch (book.status) {
+      case "read":
+        return <span className="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full font-medium">Completed</span>
+      case "progress":
+        return (
+          <span className="bg-yellow-100 text-yellow-800 text-xs px-3 py-1 rounded-full font-medium">
+            {book.progress}% Read
+          </span>
+        )
+      case "unread":
+        return <span className="bg-gray-100 text-gray-600 text-xs px-3 py-1 rounded-full font-medium">Unread</span>
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div className="bg-gray-50 rounded-2xl max-w-6xl w-full max-h-[90vh] overflow-y-auto">
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 bg-white rounded-t-2xl border-b border-gray-200">
+          <div className="flex items-center gap-4">
+            <button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
+              <ArrowLeft className="w-5 h-5" />
+            </button>
+            <h1 className="text-lg font-semibold">Collections</h1>
+          </div>
+
+          <div className="flex items-center gap-4">
+            <button className="p-2 hover:bg-gray-100 rounded-full transition-colors relative">
+              <Bell className="w-5 h-5" />
+              <div className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></div>
+            </button>
+            <div className="flex items-center gap-2">
+               <Image
+                src={imgbook1}
+                alt="Joseph Yanum"
+                width={32}
+                height={32}
+                className="rounded-full"
+              />
+              <div className="text-sm">
+                <div className="flex items-center gap-1">
+                  <span className="font-medium">Joseph Yanum</span>
+                  <div className="w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
+                    <CheckCircle className="w-3 h-3 text-white" />
+                  </div>
+                </div>
+                <div className="text-gray-500">@joeyanum</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Collection Info */}
+        <div className="p-6">
+          <div className="flex items-center justify-between mb-8">
+            <h2 className="text-2xl font-bold text-gray-900">{collectionData.title}</h2>
+
+            <div className="flex items-center gap-4">
+              <div className="flex items-center gap-1">
+                <Star className="w-5 h-5 fill-yellow-400 text-yellow-400" />
+                <span className="font-medium">{collectionData.rating}</span>
+                <span className="text-gray-500">of {collectionData.totalReviews} Review</span>
+              </div>
+              <div className="flex items-center gap-1 text-gray-600">
+                <span className="font-medium">{collectionData.bookCount} Books</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="flex items-center gap-1">
+                  <div className="w-6 h-6 bg-red-500 rounded-full flex items-center justify-center">
+                    <span className="text-white text-xs font-medium">2</span>
+                  </div>
+                  <span className="text-gray-600 text-sm">{collectionData.collaborators.join(" and ")}</span>
+                </div>
+              </div>
+              <button className="flex items-center gap-2 text-blue-600 hover:text-blue-700 text-sm font-medium">
+                <Plus className="w-4 h-4" />
+                Add Book
+              </button>
+            </div>
+          </div>
+
+          {/* Books Grid */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {collectionData.books.map((book) => (
+              <div
+                key={book.id}
+                onClick={() => onBookClick(book)}
+                className="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition-shadow overflow-hidden cursor-pointer"
+              >
+                <div className="relative">
+                  <div className="aspect-[3/4] bg-gray-100 flex items-center justify-center p-4">
+                    <Image
+                        src={imgbook}
+                        alt={book.title}
+                        width={180}
+                        height={240}
+                        className="object-cover rounded-t-xl"
+                      />
+                  </div>
+
+                  {/* Status Badge */}
+                  <div className="absolute top-3 left-3">{getStatusBadge(book)}</div>
+                </div>
+
+                <div className="p-4">
+                  <h3 className="font-semibold text-gray-900 mb-2">{book.title}</h3>
+                  <div className="flex items-center gap-1 mb-3">
+                    <p className="text-sm text-gray-600">By {book.author}</p>
+                    {book.verified && (
+                      <div className="w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
+                        <CheckCircle className="w-3 h-3 text-white" />
+                      </div>
+                    )}
+                  </div>
+
+                  <div className="flex items-center gap-1">
+                    <div className="flex text-yellow-400">
+                      {Array.from({ length: Math.floor(book.rating) }, (_, i) => (
+                        <Star key={i} className="w-4 h-4 fill-current" />
+                      ))}
+                    </div>
+                    <span className="text-sm text-gray-600 ml-1">{book.rating}</span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/dashboard/readers/components/header-reader.tsx b/src/app/dashboard/readers/components/header-reader.tsx
index 40c0e22..9910ee6 100644
--- a/src/app/dashboard/readers/components/header-reader.tsx
+++ b/src/app/dashboard/readers/components/header-reader.tsx
@@ -37,7 +37,7 @@ export function HeaderReader() {
         <div className="text-sm">
           <div className="flex items-center gap-1">
             <span className="font-medium">Joseph Yanum</span>
-            <Image src={check} alt="Verified" className="object-cover" />
+            <Image src={check} alt="Verified" className="object-cover" width={32} />
           </div>
           <span className="text-[#888888] text-xs">@joeyyanum</span>
         </div>
diff --git a/src/app/dashboard/readers/components/series-modal.tsx b/src/app/dashboard/readers/components/series-modal.tsx
new file mode 100644
index 0000000..bcb8e92
--- /dev/null
+++ b/src/app/dashboard/readers/components/series-modal.tsx
@@ -0,0 +1,218 @@
+"use client"
+
+import { ArrowLeft, Bell, CheckCircle, Star } from "lucide-react"
+import Image from "next/image"
+import { useEffect } from "react"
+import imgbook from "../../../../../public/Cover.png";
+import imgbook1 from "../../../../../public/user1.svg"
+
+interface SeriesBook {
+  id: string
+  title: string
+  author: string
+  rating: number
+  status: "read" | "unread" | "progress"
+  progress?: number
+  verified?: boolean
+}
+
+interface SeriesModalProps {
+  series: {
+    title: string
+    totalProgress: number
+    totalReviews: number
+    rating: number
+    bookCount: number
+    books: SeriesBook[]
+  }
+  onClose: () => void
+  onBookClick: (book: SeriesBook) => void
+}
+
+const seriesData = {
+  title: "Love at Night",
+  totalProgress: 57,
+  totalReviews: 500,
+  rating: 4.5,
+  bookCount: 4,
+  books: [
+    {
+      id: "series-1",
+      title: "Love at Night 1",
+      author: "Darrin Collins",
+      rating: 4.5,
+      status: "read" as const,
+      verified: true,
+    },
+    {
+      id: "series-2",
+      title: "Love at Night 2",
+      author: "Darrin Collins",
+      rating: 4.5,
+      status: "read" as const,
+      verified: true,
+    },
+    {
+      id: "series-3",
+      title: "Love at Night 3",
+      author: "Darrin Collins",
+      rating: 4.5,
+      status: "progress" as const,
+      progress: 5,
+      verified: true,
+    },
+    {
+      id: "series-4",
+      title: "Love at Night 4",
+      author: "Darrin Collins",
+      rating: 4.5,
+      status: "unread" as const,
+      verified: true,
+    },
+  ],
+}
+
+export function SeriesModal({ onClose, onBookClick }: Omit<SeriesModalProps, "series">) {
+  // Close modal on escape key
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose()
+      }
+    }
+    document.addEventListener("keydown", handleEscape)
+    return () => document.removeEventListener("keydown", handleEscape)
+  }, [onClose])
+
+  // Prevent body scroll when modal is open
+  useEffect(() => {
+    document.body.style.overflow = "hidden"
+    return () => {
+      document.body.style.overflow = "unset"
+    }
+  }, [])
+
+  const getStatusBadge = (book: SeriesBook) => {
+    switch (book.status) {
+      case "read":
+        return <span className="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full font-medium">Completed</span>
+      case "progress":
+        return (
+          <span className="bg-yellow-100 text-yellow-800 text-xs px-3 py-1 rounded-full font-medium">
+            {book.progress}% Read
+          </span>
+        )
+      case "unread":
+        return <span className="bg-gray-100 text-gray-600 text-xs px-3 py-1 rounded-full font-medium">Unread</span>
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-2xl max-w-6xl w-full max-h-[90vh] overflow-y-auto">
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-gray-200">
+          <div className="flex items-center gap-4">
+            <button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
+              <ArrowLeft className="w-5 h-5" />
+            </button>
+            <h1 className="text-lg font-semibold">Series</h1>
+          </div>
+
+          <div className="flex items-center gap-4">
+            <button className="p-2 hover:bg-gray-100 rounded-full transition-colors relative">
+              <Bell className="w-5 h-5" />
+              <div className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></div>
+            </button>
+            <div className="flex items-center gap-2">
+              <Image
+                src={imgbook1}
+                alt="Joseph Yanum"
+                width={32}
+                height={32}
+                className="rounded-full"
+              />
+              <div className="text-sm">
+                <div className="flex items-center gap-1">
+                  <span className="font-medium">Joseph Yanum</span>
+                  <div className="w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
+                    <CheckCircle className="w-3 h-3 text-white" />
+                  </div>
+                </div>
+                <div className="text-gray-500">@joeyanum</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Series Info */}
+        <div className="p-6">
+          <div className="flex items-center justify-between mb-8">
+            <h2 className="text-2xl font-bold">{seriesData.title}</h2>
+
+            <div className="flex items-center gap-4">
+              <span className="bg-yellow-100 text-yellow-800 text-sm px-3 py-1 rounded-full font-medium">
+                {seriesData.totalProgress}% Read
+              </span>
+              <div className="flex items-center gap-1">
+                <Star className="w-5 h-5 fill-yellow-400 text-yellow-400" />
+                <span className="font-medium">{seriesData.rating}</span>
+                <span className="text-gray-500">of {seriesData.totalReviews} Review</span>
+              </div>
+              <div className="flex items-center gap-1 text-gray-600">
+                <span className="font-medium">{seriesData.bookCount} Series</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Books Grid */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            {seriesData.books.map((book) => (
+              <div
+                key={book.id}
+                onClick={() => onBookClick(book)}
+                className="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition-shadow overflow-hidden cursor-pointer"
+              >
+                <div className="relative">
+                  <div className="aspect-[3/4] bg-gray-100 flex items-center justify-center p-4">
+                   <Image
+                        src={imgbook}
+                        alt={book.title}
+                        width={180}
+                        height={240}
+                        className="object-cover rounded-t-xl"
+                      />
+                  </div>
+
+                  {/* Status Badge */}
+                  <div className="absolute top-3 left-3">{getStatusBadge(book)}</div>
+                </div>
+
+                <div className="p-4">
+                  <h3 className="font-semibold text-gray-900 mb-2">{book.title}</h3>
+                  <div className="flex items-center gap-1 mb-3">
+                    <p className="text-sm text-gray-600">By {book.author}</p>
+                    {book.verified && (
+                      <div className="w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
+                        <CheckCircle className="w-3 h-3 text-white" />
+                      </div>
+                    )}
+                  </div>
+
+                  <div className="flex items-center gap-1">
+                    <div className="flex text-yellow-400">
+                      {Array.from({ length: Math.floor(book.rating) }, (_, i) => (
+                        <Star key={i} className="w-4 h-4 fill-current" />
+                      ))}
+                    </div>
+                    <span className="text-sm text-gray-600 ml-1">{book.rating}</span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/dashboard/readers/discussions-and-clubs/page.tsx b/src/app/dashboard/readers/discussions-and-clubs/page.tsx
index 5c1245a..6361571 100644
--- a/src/app/dashboard/readers/discussions-and-clubs/page.tsx
+++ b/src/app/dashboard/readers/discussions-and-clubs/page.tsx
@@ -94,6 +94,7 @@ export default function DiscussionDashboard() {
     closeModal();
   }
 
+
   return (
     <div>
       <Header title="Discussions and Clubs" />
diff --git a/src/app/dashboard/readers/library/page.tsx b/src/app/dashboard/readers/library/page.tsx
index 1840361..1e43f23 100644
--- a/src/app/dashboard/readers/library/page.tsx
+++ b/src/app/dashboard/readers/library/page.tsx
@@ -16,7 +16,8 @@ import Image from "next/image";
 import { BookModal } from "../components/book-modal";
 import imgbook from "../../../../../public/Cover.png";
 import { Header } from "@/components/dashboard/header";
-
+import { SeriesModal } from "../components/series-modal";
+import { CollectionModal } from "../components/collection-modal";
 
 interface StatCard {
   title: string;
@@ -294,7 +295,8 @@ export default function BookLibraryDashboard() {
   const [genre, setGenre] = useState("Genre");
   const [bookTypeOpen, setBookTypeOpen] = useState(false);
   const [genreOpen, setGenreOpen] = useState(false);
-
+  const [isSeriesModalOpen, setIsSeriesModalOpen] = useState(false);
+  const [isCollectionModalOpen, setIsCollectionModalOpen] = useState(false);
   const [selectedBook, setSelectedBook] = useState<Book | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -307,10 +309,47 @@ export default function BookLibraryDashboard() {
     setSelectedBook(null);
     setIsModalOpen(false);
   };
+  const openSeriesModal = () => {
+    setIsSeriesModalOpen(true);
+  };
+
+  const closeSeriesModal = () => {
+    setIsSeriesModalOpen(false);
+  };
+
+  const handleSeriesBookClick = (book: any) => {
+    // Convert series book to regular book format and open book modal
+    const convertedBook = {
+      ...book,
+      likes: undefined, // Series books don't have likes in the regular book format
+    };
+    setSelectedBook(convertedBook);
+    setIsSeriesModalOpen(false);
+    setIsModalOpen(true);
+  };
+
+  const openCollectionModal = () => {
+    setIsCollectionModalOpen(true);
+  };
+
+  const closeCollectionModal = () => {
+    setIsCollectionModalOpen(false);
+  };
+
+  const handleCollectionBookClick = (book: any) => {
+    // Convert collection book to regular book format and open book modal
+    const convertedBook = {
+      ...book,
+      likes: undefined, // Collection books don't have likes in the regular book format
+    };
+    setSelectedBook(convertedBook);
+    setIsCollectionModalOpen(false);
+    setIsModalOpen(true);
+  };
 
   return (
     <>
-      <Header title="Library" />
+      <Header title="Library"  />
       <div className="min-h-screen bg-gray-50">
         <div className="max-w-7xl mx-auto p-4 md:p-6 lg:p-8">
           {/* Search and Filters */}
@@ -705,10 +744,11 @@ export default function BookLibraryDashboard() {
           </div>
 
           {/* Series Section */}
+
           <div className="mb-8">
             <div className="flex items-center justify-between mb-6">
               <h2 className="text-xl font-semibold text-gray-900">Series</h2>
-              <button className="text-gray-500 hover:text-gray-700 text-sm font-medium border rounded-full py-3 px-5">
+              <button className="text-gray-500 hover:text-gray-700 text-sm font-medium">
                 View All →
               </button>
             </div>
@@ -717,7 +757,7 @@ export default function BookLibraryDashboard() {
               {seriesBooks.map((book) => (
                 <div
                   key={book.id}
-                  onClick={() => openBookModal(book)}
+                  onClick={() => openSeriesModal()}
                   className="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition-shadow overflow-hidden cursor-pointer"
                 >
                   <div className="relative">
@@ -792,12 +832,13 @@ export default function BookLibraryDashboard() {
           </div>
 
           {/* Collections Section */}
+
           <div className="mb-8">
             <div className="flex items-center justify-between mb-6">
               <h2 className="text-xl font-semibold text-gray-900">
                 Collections
               </h2>
-              <button className="text-gray-500 hover:text-gray-700 text-sm font-medium border rounded-full py-3 px-5">
+              <button className="text-gray-500 hover:text-gray-700 text-sm font-medium">
                 View All →
               </button>
             </div>
@@ -806,7 +847,8 @@ export default function BookLibraryDashboard() {
               {collections.map((collection) => (
                 <div
                   key={collection.id}
-                  className="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition-shadow overflow-hidden"
+                  onClick={() => openCollectionModal()}
+                  className="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition-shadow overflow-hidden cursor-pointer"
                 >
                   {/* Collection Books Grid */}
                   <div className="p-4">
@@ -887,10 +929,27 @@ export default function BookLibraryDashboard() {
               ))}
             </div>
           </div>
+         
           {/* Book Modal */}
           {isModalOpen && selectedBook && (
             <BookModal book={selectedBook} onClose={closeBookModal} />
           )}
+
+          {/* Series Modal */}
+          {isSeriesModalOpen && (
+            <SeriesModal
+              onClose={closeSeriesModal}
+              onBookClick={handleSeriesBookClick}
+            />
+          )}
+
+          {/* Collection Modal */}
+          {isCollectionModalOpen && (
+            <CollectionModal
+              onClose={closeCollectionModal}
+              onBookClick={handleCollectionBookClick}
+            />
+          )}
         </div>
       </div>
     </>
diff --git a/src/app/dashboard/readers/notifications/page.tsx b/src/app/dashboard/readers/notifications/page.tsx
index ac03fed..31b0307 100644
--- a/src/app/dashboard/readers/notifications/page.tsx
+++ b/src/app/dashboard/readers/notifications/page.tsx
@@ -88,10 +88,12 @@ function NotificationPage() {
     return <NotificationDetailPage back={backhandler} />;
   }
 
+
+
   return (
     <div className="flex flex-col h-full">
       {/* Header */}
-      <Header title="Notification" />
+      <Header title="Notification"  />
 
       {/* Content */}
       <div className="flex-1 p-4 lg:p-6 overflow-auto mt-16">
diff --git a/src/app/dashboard/readers/page.tsx b/src/app/dashboard/readers/page.tsx
index 83e8438..4a64db7 100644
--- a/src/app/dashboard/readers/page.tsx
+++ b/src/app/dashboard/readers/page.tsx
@@ -1,18 +1,27 @@
 "use-client";
+import StarknetProvider from "@/components/blockchain/StarknetProviders";
+import { WalletProvider } from "@/components/blockchain/wallet-connect-context";
 import { Header } from "@/components/dashboard/header";
-
+// import { useState } from "react";
 export default function DashboardHome() {
   return (
     <>
-      <Header title="Dashboard" />
-      <div className="space-y-6">
-        <div className="flex flex-col items-center justify-center h-screen">
-          <h1 className="text-2xl font-bold text-gray-800">Reader Dashboard</h1>
-          <p className="text-gray-600 mt-2">
-            Welcome to your personalized reading space!
-          </p>
-        </div>
-      </div>
+      <StarknetProvider>
+        <WalletProvider>
+         
+          <Header title="Dashboard" />
+          <div className="space-y-6">
+            <div className="flex flex-col items-center justify-center h-screen">
+              <h1 className="text-2xl font-bold text-gray-800">
+                Reader Dashboard
+              </h1>
+              <p className="text-gray-600 mt-2">
+                Welcome to your personalized reading space!
+              </p>
+            </div>
+          </div>
+        </WalletProvider>
+      </StarknetProvider>
     </>
   );
 }
diff --git a/src/app/dashboard/readers/profile/page.tsx b/src/app/dashboard/readers/profile/page.tsx
index 2ddf229..a8866e3 100644
--- a/src/app/dashboard/readers/profile/page.tsx
+++ b/src/app/dashboard/readers/profile/page.tsx
@@ -68,9 +68,10 @@ export default function ProfileDetailsPage() {
     console.log("Form submitted:", formData);
   };
 
+
   return (
     <>
-      <Header title="Profile" />
+      <Header title="Profile"  />
       <div className="bg-white m-4 md:m-6 rounded-xl">
         {/* Mobile Header */}
         <div className="lg:hidden bg-gray-50 p-4 flex items-center justify-between">
diff --git a/src/app/dashboard/readers/reading-stats/page.tsx b/src/app/dashboard/readers/reading-stats/page.tsx
index 6c663f4..a3f42c5 100644
--- a/src/app/dashboard/readers/reading-stats/page.tsx
+++ b/src/app/dashboard/readers/reading-stats/page.tsx
@@ -1,9 +1,14 @@
 "use-client";
 import { Header } from "@/components/dashboard/header";
-
+// import { useState } from "react";
 export default function DashboardHome() {
+    // const [isWalletConnected, setIsWalletConnected] = useState(true);
+    // const handleDisconnect = () => {
+    //   setIsWalletConnected(false);
+    // };
   return (
     <>
+    {/* onDisconnect={handleDisconnect} */}
     <Header title="Reading Stats"  />
       <div className="space-y-6">
       <div className="flex flex-col items-center justify-center h-screen">
diff --git a/src/app/dashboard/readers/stats-and-achievements/page.tsx b/src/app/dashboard/readers/stats-and-achievements/page.tsx
index f777e98..67084de 100644
--- a/src/app/dashboard/readers/stats-and-achievements/page.tsx
+++ b/src/app/dashboard/readers/stats-and-achievements/page.tsx
@@ -91,10 +91,11 @@ const timeData = {
 export default function StatsAndAchievementsPage() {
   const [selectedPeriod, setSelectedPeriod] = useState("This Week");
   const currentData = timeData[selectedPeriod as keyof typeof timeData];
+ 
 
   return (
     <div className="min-h-screen bg-[#f8f9fa]">
-      <Header title="Stats & Achievements" />
+      <Header title="Stats & Achievements"  />
 
       <div className="p-4 lg:p-6 space-y-6">
         {/* Total Hours Read Section */}
diff --git a/src/app/dashboard/readers/transactions/page.tsx b/src/app/dashboard/readers/transactions/page.tsx
index d0bbfb1..156ffd0 100644
--- a/src/app/dashboard/readers/transactions/page.tsx
+++ b/src/app/dashboard/readers/transactions/page.tsx
@@ -155,9 +155,10 @@ export default function TransactionPage() {
     setSelectedTransaction(null);
   };
 
+
   return (
     <div className="flex flex-col h-full">
-      <Header title="Transactions" />
+      <Header title="Transactions"  />
 
       {/* Content */}
       <div className="flex-1 p-4 lg:p-6 overflow-auto mt-16">
diff --git a/src/app/dashboard/readers/wishlist/page.tsx b/src/app/dashboard/readers/wishlist/page.tsx
index 8316594..3b2b739 100644
--- a/src/app/dashboard/readers/wishlist/page.tsx
+++ b/src/app/dashboard/readers/wishlist/page.tsx
@@ -81,6 +81,8 @@ export default function WishlistPage() {
     alert(`Purchasing ${likedBooks.length} books from wishlist!`);
   };
 
+
+
   return (
     <div className="flex flex-col h-full">
       <Header title="Wishlist" />
diff --git a/src/app/dashboard/writers/analytics/page.tsx b/src/app/dashboard/writers/analytics/page.tsx
index 658a547..7e6215e 100644
--- a/src/app/dashboard/writers/analytics/page.tsx
+++ b/src/app/dashboard/writers/analytics/page.tsx
@@ -2,8 +2,11 @@ import AnalyticsHeader from "@/components/analytics/analytics-header";
 import AnalyticsStatsGrid from "@/components/analytics/analytics-stats-grid";
 import AnalyticsTabs from "@/components/analytics/analytics-tabs";
 import { Header } from "@/components/dashboard/header";
+import { useState } from "react";
 
 export default function AnalyticsDashboard() {
+
+
   return (
 
     <>
diff --git a/src/app/dashboard/writers/discussions-and-clubs/page.tsx b/src/app/dashboard/writers/discussions-and-clubs/page.tsx
index 5c1245a..4eacd51 100644
--- a/src/app/dashboard/writers/discussions-and-clubs/page.tsx
+++ b/src/app/dashboard/writers/discussions-and-clubs/page.tsx
@@ -94,6 +94,8 @@ export default function DiscussionDashboard() {
     closeModal();
   }
 
+
+
   return (
     <div>
       <Header title="Discussions and Clubs" />
diff --git a/src/app/dashboard/writers/earnings/page.tsx b/src/app/dashboard/writers/earnings/page.tsx
index 77a080e..29a1e9b 100644
--- a/src/app/dashboard/writers/earnings/page.tsx
+++ b/src/app/dashboard/writers/earnings/page.tsx
@@ -81,6 +81,8 @@ function EarningsPage() {
     }
   }, [walletAddress]);
 
+
+
   return (
     <>
       <Header title="Earnings" />
diff --git a/src/app/dashboard/writers/feedback/page.tsx b/src/app/dashboard/writers/feedback/page.tsx
deleted file mode 100644
index d4225e5..0000000
--- a/src/app/dashboard/writers/feedback/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-function FeedbackPage() {
-  return (
-    <div>
-      <h1>Feedback</h1>
-      <p>We value your feedback! Please let us know your thoughts.</p>
-      {/* Add your feedback form or component here */}
-    </div>
-  );
-}
-export default FeedbackPage;
\ No newline at end of file
diff --git a/src/app/dashboard/writers/manage-content/PreviewModal.tsx b/src/app/dashboard/writers/manage-content/PreviewModal.tsx
index 0b1b418..53f9474 100644
--- a/src/app/dashboard/writers/manage-content/PreviewModal.tsx
+++ b/src/app/dashboard/writers/manage-content/PreviewModal.tsx
@@ -68,7 +68,7 @@ const PreviewModal: React.FC<PreviewModalProps> = ({
             <div className="flex items-center gap-2 mb-6">
               <span className="text-[#5d5d5d]">By Darrin Collins</span>
               <span className="bg-[#edf7ff] text-[#236fea] text-xs px-2 py-0.5 rounded-full flex items-center justify-center">
-                <Image src={check} alt="Verified" className="mr-1" />
+                <Image src={check} alt="Verified" className="mr-1" width={32} />
               </span>
             </div>
 
diff --git a/src/app/dashboard/writers/manage-content/book-preview-modal.tsx b/src/app/dashboard/writers/manage-content/book-preview-modal.tsx
index b0f299e..19377a1 100644
--- a/src/app/dashboard/writers/manage-content/book-preview-modal.tsx
+++ b/src/app/dashboard/writers/manage-content/book-preview-modal.tsx
@@ -111,7 +111,8 @@ const BookPreviewModal: React.FC<BookPreviewModalProps> = ({
               <div className="text-sm">
                 <div className="flex items-center gap-1">
                   <span className="font-medium">Joseph Yanum</span>
-                  <Image src={check} alt="Profile" className="object-cover" />
+                  <Image src={check} alt="Profile" className="object-cover" width={32}/>
+                  
                 </div>
                 <span className="text-[#888888] text-xs">@joeyyanum</span>
               </div>
diff --git a/src/app/dashboard/writers/manage-content/page.tsx b/src/app/dashboard/writers/manage-content/page.tsx
index 76200b7..01b8ca9 100644
--- a/src/app/dashboard/writers/manage-content/page.tsx
+++ b/src/app/dashboard/writers/manage-content/page.tsx
@@ -1,12 +1,13 @@
-import React from "react";
+import React, { useState } from "react";
 
 import { Header } from "@/components/dashboard/header";
 import ManageContent from "./Manage-content";
 
 export default function Home() {
+   
   return (
     <div>
-      <Header title="Manage Content" />
+      <Header title="Manage Content"  />
 
       <div className="p-6 mt-16">
         <ManageContent />
diff --git a/src/app/dashboard/writers/page.tsx b/src/app/dashboard/writers/page.tsx
index 7e4322d..5f1d5a0 100644
--- a/src/app/dashboard/writers/page.tsx
+++ b/src/app/dashboard/writers/page.tsx
@@ -1,67 +1,75 @@
 import { BookOpen } from "lucide-react";
 import { Header } from "@/components/dashboard/header";
+import StarknetProvider from "@/components/blockchain/StarknetProviders";
+import { WalletProvider } from "@/components/blockchain/wallet-connect-context";
+
 
 export default function Dashboard() {
+ 
   return (
-    <div>
-      <Header title="Dashboard" />
-      <div className="p-6 mt-16">
-        <div className="bg-white p-6 rounded-lg border border-[#e7e7e7] mb-8">
-          <h3 className="font-semibold mb-4">Monthly Sales</h3>
-          <div className="h-64 bg-[#f6f6f6] rounded-lg flex items-center justify-center">
-            <p className="text-[#5d5d5d]">
-              Sales chart would be displayed here
-            </p>
-          </div>
-        </div>
+    <StarknetProvider>
+      <WalletProvider>
+        <div>
+          <Header title="Dashboard" />
+          <div className="p-6 mt-16">
+            <div className="bg-white p-6 rounded-lg border border-[#e7e7e7] mb-8">
+              <h3 className="font-semibold mb-4">Monthly Sales</h3>
+              <div className="h-64 bg-[#f6f6f6] rounded-lg flex items-center justify-center">
+                <p className="text-[#5d5d5d]">
+                  Sales chart would be displayed here
+                </p>
+              </div>
+            </div>
 
-        <div className="grid grid-cols-2 gap-6">
-          <div className="bg-white p-6 rounded-lg border border-[#e7e7e7]">
-            <h3 className="font-semibold mb-4">Recent Activity</h3>
-            <div className="space-y-4">
-              {[1, 2, 3, 4].map((item) => (
-                <div
-                  key={item}
-                  className="flex items-center gap-3 p-3 bg-[#f6f6f6] rounded-lg"
-                >
-                  <div className="w-10 h-10 rounded-full bg-[#edf7ff] flex items-center justify-center">
-                    <BookOpen className="text-[#096cff]" size={18} />
-                  </div>
-                  <div>
-                    <div className="font-medium">New book published</div>
-                    <div className="text-sm text-[#5d5d5d]">
-                      Native Invisibility - 2 hours ago
+            <div className="grid grid-cols-2 gap-6">
+              <div className="bg-white p-6 rounded-lg border border-[#e7e7e7]">
+                <h3 className="font-semibold mb-4">Recent Activity</h3>
+                <div className="space-y-4">
+                  {[1, 2, 3, 4].map((item) => (
+                    <div
+                      key={item}
+                      className="flex items-center gap-3 p-3 bg-[#f6f6f6] rounded-lg"
+                    >
+                      <div className="w-10 h-10 rounded-full bg-[#edf7ff] flex items-center justify-center">
+                        <BookOpen className="text-[#096cff]" size={18} />
+                      </div>
+                      <div>
+                        <div className="font-medium">New book published</div>
+                        <div className="text-sm text-[#5d5d5d]">
+                          Native Invisibility - 2 hours ago
+                        </div>
+                      </div>
                     </div>
-                  </div>
+                  ))}
                 </div>
-              ))}
-            </div>
-          </div>
+              </div>
 
-          <div className="bg-white p-6 rounded-lg border border-[#e7e7e7]">
-            <h3 className="font-semibold mb-4">Top Performing Books</h3>
-            <div className="space-y-4">
-              {[1, 2, 3, 4].map((item) => (
-                <div
-                  key={item}
-                  className="flex items-center justify-between p-3 bg-[#f6f6f6] rounded-lg"
-                >
-                  <div className="flex items-center gap-3">
-                    <div className="w-10 h-10 bg-white rounded-md"></div>
-                    <div>
-                      <div className="font-medium">Native Invisibility</div>
-                      <div className="text-sm text-[#5d5d5d]">
-                        124 sales this month
+              <div className="bg-white p-6 rounded-lg border border-[#e7e7e7]">
+                <h3 className="font-semibold mb-4">Top Performing Books</h3>
+                <div className="space-y-4">
+                  {[1, 2, 3, 4].map((item) => (
+                    <div
+                      key={item}
+                      className="flex items-center justify-between p-3 bg-[#f6f6f6] rounded-lg"
+                    >
+                      <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 bg-white rounded-md"></div>
+                        <div>
+                          <div className="font-medium">Native Invisibility</div>
+                          <div className="text-sm text-[#5d5d5d]">
+                            124 sales this month
+                          </div>
+                        </div>
                       </div>
+                      <div className="font-medium">$1,240</div>
                     </div>
-                  </div>
-                  <div className="font-medium">$1,240</div>
+                  ))}
                 </div>
-              ))}
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </div>
+      </WalletProvider>
+    </StarknetProvider>
   );
 }
diff --git a/src/app/dashboard/writers/profile/component/profileHeader.tsx b/src/app/dashboard/writers/profile/component/profileHeader.tsx
index cc53047..96f0ff5 100644
--- a/src/app/dashboard/writers/profile/component/profileHeader.tsx
+++ b/src/app/dashboard/writers/profile/component/profileHeader.tsx
@@ -30,7 +30,7 @@ export function ProfileHeader() {
           <div className="text-sm">
             <div className="flex items-center gap-1">
               <span className="font-medium">Joseph Yanum</span>
-              <Image src={check} alt="Profile" className="object-cover" />
+              <Image src={check} alt="Profile" className="object-cover" width={32} />
             </div>
             <span className="text-[#888888] text-xs">@joeyyanum</span>
           </div>
diff --git a/src/app/dashboard/writers/profile/layout.tsx b/src/app/dashboard/writers/profile/layout.tsx
index aba9fef..eadf875 100644
--- a/src/app/dashboard/writers/profile/layout.tsx
+++ b/src/app/dashboard/writers/profile/layout.tsx
@@ -3,14 +3,16 @@ import "@/app/globals.css";
 import { ProfileSidebar } from "./component/profilesidebar";
 import { Header } from "@/components/dashboard/header";
 
+
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+
   return (
     <>
-      <Header title="Profile" />
+      <Header title="Profile"  />
       <div className="flex flex-col lg:flex-row min-h-screen mt-16">
         <ProfileSidebar />
         <div className=" w-full">{children}</div>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1cdcc95..5899eee 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,31 +1,113 @@
-import type { Metadata } from "next";
-import "./globals.css";
+
+import { Metadata } from "next";
 import { WalletProvider } from "../components/blockchain/WalletProvider";
-import { StarknetProvider } from "../components/blockchain/Providers";
-import { Inter } from "next/font/google";
+import "@/app/globals.css";
+import ClientProviders from "../components/blockchain/client-providers";
+import { StructuredData } from "@/components/metadata/structured-data";
 
 export const metadata: Metadata = {
-  title: "ChainLib",
-  description: "An E-Libray Platform",
+  title:
+    "ChainLib - Decentralized Library for the Future of Digital Publishing",
+  description:
+    "ChainLib is a revolutionary decentralized library platform leveraging blockchain technology for transparent digital publishing. Own your stories, engage readers, and earn from your content with blockchain transparency.",
+  keywords: [
+    "decentralized library",
+    "blockchain publishing",
+    "digital publishing platform",
+    "decentralized publishing",
+    "blockchain library",
+    "content ownership",
+    "digital content platform",
+    "starknet publishing",
+    "blockchain transparency",
+    "decentralized content",
+    "digital books",
+    "content creators",
+    "blockchain books",
+    "decentralized reading",
+    "digital library",
+    "blockchain content",
+    "publishing platform",
+    "content monetization",
+    "digital rights",
+    "blockchain stories",
+    "starknet",
+  ],
+  authors: [{ name: "ChainLib Team" }],
+  creator: "ChainLib",
+  publisher: "ChainLib",
+  formatDetection: {
+    email: false,
+    address: false,
+    telephone: false,
+  },
+  metadataBase: new URL("https://chainlib.com"),
+  alternates: {
+    canonical: "/",
+  },
+  openGraph: {
+    type: "website",
+    locale: "en_US",
+    url: "https://chainlib.com",
+    title:
+      "ChainLib - Decentralized Library for the Future of Digital Publishing",
+    description:
+      "Revolutionary decentralized library platform with blockchain technology. Own your stories, engage readers, and earn from your content with complete transparency.",
+    siteName: "ChainLib",
+    images: [
+      {
+        url: "/og-image.png",
+        width: 1200,
+        height: 630,
+        alt: "ChainLib - Decentralized Digital Publishing Platform",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title:
+      "ChainLib - Decentralized Library for the Future of Digital Publishing",
+    description:
+      "Experience the future of digital publishing with ChainLib's decentralized library platform. Own your stories, engage readers, and earn from your content with blockchain transparency.",
+    images: ["/twitter-image.png"],
+    creator: "@chainlib",
+    site: "@chainlib",
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      "max-video-preview": -1,
+      "max-image-preview": "large",
+      "max-snippet": -1,
+    },
+  },
+  verification: {
+    google: "your-google-verification-code",
+    yandex: "your-yandex-verification-code",
+  },
+};
+export const viewport = {
+  width: "device-width",
+  initialScale: 1,
 };
-
-const inter = Inter({
-  subsets: ["latin"],
-  display: "swap",
-  variable: "--font-inter",
-});
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
-    <html lang="en" className={inter.className}>
-      <body>
-        <StarknetProvider>
+    <html lang="en">
+      <head>
+        <StructuredData />
+      </head>
+      <body className="bg-[#00031B] text-[#EAEDE7]">
+        <ClientProviders>
           <WalletProvider>{children}</WalletProvider>
-        </StarknetProvider>
+        </ClientProviders>
       </body>
     </html>
   );
diff --git a/src/components/blockchain/Providers.tsx b/src/components/blockchain/Providers.tsx
deleted file mode 100644
index 28c52fb..0000000
--- a/src/components/blockchain/Providers.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-"use client";
-import React from "react";
-
-import { sepolia } from "@starknet-react/chains";
-import {
-  StarknetConfig,
-  argent,
-  braavos,
-  useInjectedConnectors,
-  voyager,
-  jsonRpcProvider,
-} from "@starknet-react/core";
-
-export function StarknetProvider({ children }: { children: React.ReactNode }) {
-  const { connectors } = useInjectedConnectors({
-    // Show these connectors if the user has no connector installed.
-    recommended: [argent(), braavos()],
-    // Hide recommended connectors if the user has any connector installed.
-    includeRecommended: "onlyIfNoConnectors",
-  });
-
-  return (
-    <StarknetConfig
-      chains={[sepolia]}
-      provider={jsonRpcProvider({
-        rpc: () => ({ nodeUrl: process.env.NEXT_PUBLIC_RPC_URL }),
-      })}
-      connectors={connectors}
-      explorer={voyager}
-    >
-      {children}
-    </StarknetConfig>
-  );
-}
diff --git a/src/components/blockchain/StarknetProviders.tsx b/src/components/blockchain/StarknetProviders.tsx
new file mode 100644
index 0000000..c69db8c
--- /dev/null
+++ b/src/components/blockchain/StarknetProviders.tsx
@@ -0,0 +1,52 @@
+"use client";
+import { mainnet, sepolia } from "@starknet-react/chains";
+import {
+  StarknetConfig,
+  publicProvider,
+  voyager,
+  Connector,
+} from "@starknet-react/core";
+import { InjectedConnector } from "starknetkit/injected";
+import { WebWalletConnector } from "starknetkit/webwallet";
+import { ArgentMobileConnector } from "starknetkit/argentMobile";
+
+export function StarknetProvider({ children }: { children: React.ReactNode }) {
+  const connectors = [
+    new InjectedConnector({
+      options: { id: "argentX", name: "Argent X" },
+    }),
+    new InjectedConnector({
+      options: { id: "braavos", name: "Braavos" },
+    }),
+    new InjectedConnector({
+      options: { id: "metamask", name: "MetaMask" },
+    }),
+    new InjectedConnector({
+      options: { id: "keplr", name: "Keplr" },
+    }),
+    new InjectedConnector({
+      options: { id: "okxwallet", name: "OKX" },
+    }),
+    new WebWalletConnector({ url: "https://web.argent.xyz" }),
+    ArgentMobileConnector.init({
+      options: {
+        dappName: "Chainlib",
+        url: "https://web.argent.xyz",
+      },
+    }),
+  ];
+
+  return (
+    <StarknetConfig
+      chains={[mainnet, sepolia]}
+      provider={publicProvider()}
+      connectors={connectors as Connector[]}
+      explorer={voyager}
+      autoConnect={true}
+    >
+      {children}
+    </StarknetConfig>
+  );
+}
+
+export default StarknetProvider;
\ No newline at end of file
diff --git a/src/components/blockchain/Wallet-connect-modal.tsx b/src/components/blockchain/Wallet-connect-modal.tsx
deleted file mode 100644
index 63028dd..0000000
--- a/src/components/blockchain/Wallet-connect-modal.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import { X } from "lucide-react";
-import Image from "next/image";
-import AnimationWrapper from "../motion/Animation-wrapper";
-import { useWalletContext } from "./WalletProvider";
-import { useRouter } from "next/navigation";
-
-// interface WalletOption {
-//   id: string;
-//   name: string;
-//   icon: string;
-// }
-
-interface WalletConnectModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onSelect: (wallet: string) => void;
-}
-
-export default function WalletConnectModal({
-  isOpen,
-  onClose,
-}: WalletConnectModalProps) {
-  const [selectedWallet, setSelectedWallet] = useState<number | null>(null);
-  const { connectors, connectAsync } = useWalletContext();
-  const router = useRouter();
-
-  const handleSelect = (walletId: number) => {
-    setSelectedWallet(walletId);
-  };
-
-  // ② On confirm, look up the connector object and call connectWallet
-  const handleConfirm = async () => {
-    if (!selectedWallet) return;
-
-    const connector = connectors[selectedWallet - 1];
-    if (!connector) {
-      console.error("Connector not found:", selectedWallet);
-      return;
-    }
-
-    try {
-      await connectAsync({ connector }); // ■ await the wallet prompt
-      router.push("/sign-in"); // ■ now safe to navigate
-      onClose();
-    } catch (err) {
-      console.error("Wallet connection failed:", err); // ■ handle rejections
-    }
-  };
-
-  const modalVariants = {
-    hidden: { opacity: 0, scale: 0.9 },
-    visible: {
-      opacity: 1,
-      scale: 1,
-      transition: {
-        duration: 0.2,
-        ease: "easeOut",
-      },
-    },
-    exit: {
-      opacity: 0,
-      scale: 0.9,
-      transition: {
-        duration: 0.2,
-        ease: "easeIn",
-      },
-    },
-  };
-
-  const backdropVariants = {
-    hidden: { opacity: 0 },
-    visible: { opacity: 1 },
-    exit: { opacity: 0 },
-  };
-
-  // helper to get icon source
-  function getIconSource(
-    icon: string | { dark: string; light: string }
-  ): string {
-    if (typeof icon === "string") {
-      // If it's a string, use it directly
-      return icon;
-    } else {
-      // If it's an object, use the dark variant (or light, as needed)
-      return icon.dark; // Or icon.light, depending on your theme
-    }
-  }
-
-  return (
-    <AnimatePresence>
-      {isOpen && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center">
-          <motion.div
-            className="fixed inset-0 bg-black/50 backdrop-blur-sm"
-            initial="hidden"
-            animate="visible"
-            exit="exit"
-            onClick={onClose}
-          />
-
-          <motion.div
-            className="relative w-fit px-[80px] rounded-2xl bg-white py-[60px] shadow-xl relative"
-            initial="hidden"
-            animate="visible"
-            exit="exit"
-          >
-            <button
-              onClick={onClose}
-              className="text-gray-400 absolute top-5 right-5 bg-[#F6F6F6] p-2 rounded-[8px]"
-            >
-              <X size={20} />
-            </button>
-            <h2 className="text-xl font-semibold text-[#0F265C] text-center mb-1">
-              Connect Wallet
-            </h2>
-
-            <p className="text-[#0F265C] mb-4 text-center text-sm">
-              Choose a wallet you want to connect to Chain Lib
-            </p>
-
-            <div className="space-x-8 mb-6 flex justify-center">
-              {connectors.map((wallet, index) => {
-                console.log(connectors, "connectors");
-                return (
-                  <AnimationWrapper
-                    key={wallet?.id}
-                    variant="slideRight"
-                    delay={index * 0.1}
-                  >
-                    <button
-                      style={{ boxShadow: "0px 6px 6px 0px #1212120A" }}
-                      className={`w-[200px] text-black border p-2 rounded-[10px] transition-all ease-in-out duration-200 
-                        ${
-                          selectedWallet === index + 1
-                            ? "border-[#6366F1] bg-[#F6F6F6]"
-                            : "border-[#E0E0E0] hover:border-[#6366F1] hover:bg-[#F0F2FF] bg-white"
-                        }`}
-                      onClick={() => handleSelect(index + 1)}
-                    >
-                      <div className="bg-[#E0F0FF] flex justify-center items-center mb-5 h-[120px] rounded-[8px]">
-                        <Image
-                          src={getIconSource(wallet.icon)}
-                          alt={wallet.name}
-                          width={40}
-                          height={40}
-                          className="object-contain"
-                        />
-                      </div>
-
-                      <span className={`font-medium`}>{wallet.name}</span>
-                    </button>
-                  </AnimationWrapper>
-                );
-              })}
-            </div>
-
-            {/* ③ Confirmation button */}
-            <AnimationWrapper variant="slideUp" delay={0.3}>
-              <button
-                onClick={handleConfirm}
-                disabled={!selectedWallet}
-                className={`w-full py-3 rounded-full text-white font-medium transition-colors ${
-                  selectedWallet
-                    ? "bg-blue-500 hover:bg-blue-900"
-                    : "bg-gray-700 cursor-not-allowed"
-                }`}
-              >
-                Connect
-              </button>
-            </AnimationWrapper>
-          </motion.div>
-        </div>
-      )}
-    </AnimatePresence>
-  );
-}
diff --git a/src/components/blockchain/Wallet-disconnect-modal.tsx b/src/components/blockchain/Wallet-disconnect-modal.tsx
index e331e10..8e18718 100644
--- a/src/components/blockchain/Wallet-disconnect-modal.tsx
+++ b/src/components/blockchain/Wallet-disconnect-modal.tsx
@@ -102,7 +102,7 @@ export default function WalletDisconnectModal({
               </button>
 
               <button
-                className=" py-3 w-full text-center rounded-[48px] bg-teal-500 text-white font-medium hover:bg-teal-600 transition-colors"
+                className=" py-3 w-full text-center rounded-[48px] bg-blue-500 text-white font-medium hover:bg-blue-600 transition-colors"
                 onClick={handleDisconnect}
               >
                 Disconnect Wallet
diff --git a/src/components/blockchain/account-type-modal.tsx b/src/components/blockchain/account-type-modal.tsx
new file mode 100644
index 0000000..ca90609
--- /dev/null
+++ b/src/components/blockchain/account-type-modal.tsx
@@ -0,0 +1,210 @@
+"use client";
+
+import React from "react";
+import { useRouter } from "next/navigation";
+import { motion, Variants } from "framer-motion";
+
+// --- Types ---
+type AccountType = "readers" | "writers";
+
+interface AccountTypeOption {
+  id: AccountType;
+  title: string;
+  description: string[];
+  dashboardRoute: string;
+}
+
+interface AccountTypeModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  selectedType: AccountType | null;
+  onSelectType: (type: AccountType) => void;
+  onSubmit: () => void;
+}
+
+const accountTypeOptions: AccountTypeOption[] = [
+  {
+    id: "readers",
+    title: "Reader",
+    description: [
+      "Discover a world of stories — from timeless classics to the latest bestsellers, all in one place",
+      "Read anytime, anywhere with a seamless and user-friendly online experience",
+      "Build your personal library and keep track of every book you read",
+      "Enjoy curated recommendations tailored to your interests and reading habits",
+      "Join a vibrant community of book lovers and share your thoughts, reviews, and favorite reads",
+    ],
+    dashboardRoute: "/dashboard/readers",
+  },
+  {
+    id: "writers",
+    title: "Writers",
+    description: [
+      "Share your voice with the world — publish your stories, poems, or articles and reach a global audience",
+      "Build your writer’s profile and showcase your work in a beautiful, organized space",
+      "Connect with readers and fellow writers through comments, feedback, and community support",
+      "Grow your audience with built-in tools that help your writing get discovered",
+      "Track your progress and celebrate every milestone in your writing journey",
+    ],
+    dashboardRoute: "/dashboard/writers",
+  },
+];
+
+// --- Animation Variants ---
+const pageVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.2,
+    },
+  },
+};
+
+const headerVariants: Variants = {
+  hidden: { opacity: 0, y: -20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.5, ease: "easeOut", staggerChildren: 0.15 },
+  },
+};
+
+const cardVariants: Variants = {
+  hidden: { opacity: 0, y: 30 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.6, ease: "easeOut" },
+  },
+};
+
+const listVariants: Variants = {
+  hidden: {},
+  visible: {
+    transition: { staggerChildren: 0.08, delayChildren: 0.2 },
+  },
+};
+
+const listItemVariants: Variants = {
+  hidden: { opacity: 0, x: -20 },
+  visible: {
+    opacity: 1,
+    x: 0,
+    transition: { duration: 0.4, ease: "easeOut" },
+  },
+};
+
+const buttonVariants: Variants = {
+  hidden: { opacity: 0, y: 10 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.4, delay: 0.5, ease: "easeOut" },
+  },
+};
+
+export function AccountTypeModal({
+  isOpen,
+  onClose,
+  selectedType,
+  onSelectType,
+  onSubmit,
+}: AccountTypeModalProps) {
+  const router = useRouter();
+
+  const handleSelect = (type: AccountType, route: string) => {
+    localStorage.setItem("userAccountType", type);
+    onSelectType(type);
+    router.push(route);
+  };
+
+  const handleSubmit = () => {
+    if (selectedType) {
+      onSubmit();
+      const selectedOption = accountTypeOptions.find(
+        (option) => option.id === selectedType
+      );
+      if (selectedOption) {
+        localStorage.setItem("userAccountType", selectedType);
+        window.location.href = selectedOption.dashboardRoute;
+        onClose();
+      }
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60">
+      <motion.div
+        className="bg-[#0C1327] rounded-lg max-w-4xl w-full mx-4 p-6 md:p-10 shadow-lg overflow-y-auto max-h-[90vh]"
+        variants={pageVariants}
+        initial="hidden"
+        animate="visible"
+      >
+        {/* Close Button */}
+        <div className="flex justify-end mb-4">
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-white text-lg font-bold"
+          >
+            ✕
+          </button>
+        </div>
+
+        {/* Header */}
+        <motion.div className="text-center mb-10" variants={headerVariants}>
+          <motion.h1
+            className="font-bold text-2xl uppercase text-white mb-4"
+            variants={headerVariants}
+          >
+            How do you want to use Chainlib?
+          </motion.h1>
+          <motion.p
+            className="text-base text-gray-300"
+            variants={headerVariants}
+          >
+            Choose between creating a Reader profile or a Writer profile.
+          </motion.p>
+        </motion.div>
+
+        {/* Cards */}
+        <div className="space-y-6">
+          {accountTypeOptions.map((option, index) => (
+            <motion.div
+              key={option.id}
+              className="border border-[#343B4F] rounded-xl p-6 md:p-8 bg-[#081028] cursor-pointer hover:shadow-xl transition-shadow"
+              variants={cardVariants}
+              onClick={() => handleSelect(option.id, option.dashboardRoute)}
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.98 }}
+            >
+              <motion.h2 className="text-xl font-semibold text-white mb-4">
+                {option.title}
+              </motion.h2>
+              <motion.ul
+                className="list-disc pl-6 mb-6 space-y-2"
+                variants={listVariants}
+              >
+                {option.description.map((item, i) => (
+                  <motion.li
+                    key={`desc-${index}-${i}`}
+                    className="text-sm text-gray-300 leading-relaxed"
+                    variants={listItemVariants}
+                  >
+                    {item}
+                  </motion.li>
+                ))}
+              </motion.ul>
+              <motion.div variants={buttonVariants}>
+                <div className="inline-block border border-[#0C1327] text-white hover:bg-blue-600 hover:text-white transition-colors duration-200 rounded-full px-6 py-2 text-sm font-medium">
+                  Proceed to dashboard
+                </div>
+              </motion.div>
+            </motion.div>
+          ))}
+        </div>
+      </motion.div>
+    </div>
+  );
+}
diff --git a/src/components/blockchain/client-providers.tsx b/src/components/blockchain/client-providers.tsx
new file mode 100644
index 0000000..0e87ed0
--- /dev/null
+++ b/src/components/blockchain/client-providers.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import StarknetProvider from "../blockchain/StarknetProviders";
+import { WalletProvider } from "../blockchain/wallet-connect-context";
+
+
+export default function ClientProviders({ children }: { children: React.ReactNode }) {
+  return (
+    <StarknetProvider>
+      <WalletProvider>
+
+          {children}
+
+      </WalletProvider>
+    </StarknetProvider>
+  );
+} 
diff --git a/src/components/blockchain/connect-button.tsx b/src/components/blockchain/connect-button.tsx
new file mode 100644
index 0000000..a577c19
--- /dev/null
+++ b/src/components/blockchain/connect-button.tsx
@@ -0,0 +1,107 @@
+import React, { useRef, useEffect, useState } from "react";
+import {
+  useAccount,
+  useConnect,
+  useDisconnect,
+  Connector,
+} from "@starknet-react/core";
+import { AccountTypeModal } from "./account-type-modal";
+import { StarknetkitConnector, useStarknetkitConnectModal } from "starknetkit";
+import { WebWalletConnector } from "starknetkit/webwallet";
+
+type ConnectButtonVariant = "default" | "navbar";
+
+interface ConnectButtonProps {
+  variant?: ConnectButtonVariant;
+  isOpen: boolean;
+  isClosed?: boolean;
+  setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+onSelect: (walletId: string) => void;
+}
+
+
+
+export function ConnectButton({
+  isOpen,
+  setIsModalOpen,
+
+}: ConnectButtonProps) {
+  const { connect, connectors } = useConnect();
+  const { isConnected, address } = useAccount();
+  const { disconnect } = useDisconnect();
+
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isFirstTimeUser, setIsFirstTimeUser] = useState(false);
+  const [selectedAccountType, setSelectedAccountType] = useState<
+    "readers" | "writers"  | null
+  >(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Customize WebWalletConnector with an icon
+  const customizedConnectors = connectors.map((connector) => {
+    if (connector instanceof WebWalletConnector) {
+      // Recreate the connector with the same network and new icon
+      return new WebWalletConnector({});
+    }
+    return connector;
+  });
+
+  const { starknetkitConnectModal } = useStarknetkitConnectModal({
+    connectors: customizedConnectors as StarknetkitConnector[],
+  });
+
+  const handleConnect = async () => {
+    try {
+      const { connector } = await starknetkitConnectModal();
+      if (connector) {
+        await connect({ connector: connector as Connector });
+        setIsFirstTimeUser(true); // Trigger AccountTypeModal after connection
+      }
+    } catch (error) {
+      console.error("Connection failed:", error);
+    }
+  };
+  useEffect(() => {
+    if (isOpen && !isConnected) {
+      handleConnect();
+      //to prevent retrigerring
+      setIsModalOpen(false);
+    }
+  }, [isOpen]);
+
+
+  const handleAccountCreation = () => {
+    if (selectedAccountType) {
+      console.log(`Creating ${selectedAccountType} account`);
+      setIsFirstTimeUser(false);
+    }
+  };
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsDropdownOpen(false);
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <AccountTypeModal
+        isOpen={isFirstTimeUser}
+        onClose={() => setIsFirstTimeUser(false)}
+        selectedType={selectedAccountType}
+        onSelectType={setSelectedAccountType}
+        onSubmit={handleAccountCreation}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/blockchain/wallet-connect-context.tsx b/src/components/blockchain/wallet-connect-context.tsx
new file mode 100644
index 0000000..93643c1
--- /dev/null
+++ b/src/components/blockchain/wallet-connect-context.tsx
@@ -0,0 +1,79 @@
+"use client"
+import React, { createContext, useContext, ReactNode, useState, useEffect } from "react";
+import { AccountStatus, useAccount, useConnect } from "@starknet-react/core";
+
+// Define the context type
+interface WalletContextType {
+  isConnected: boolean;
+  address: string | undefined;
+  isConnecting: boolean;
+  isWalletDetected: boolean; // Expose wallet detection state
+  error: Error | null;
+  isModalOpen: boolean;
+  openConnectModal: () => void;
+  closeConnectModal: () => void;
+}
+
+// Create the context
+const WalletContext = createContext<WalletContextType | undefined>(undefined);
+
+// Provider component
+export function WalletProvider({ children }: { children: ReactNode }) {
+  const { isConnected = false, address, status } = useAccount();
+  const { connectors } = useConnect();
+  const [isWalletDetected, setIsWalletDetected] = useState(false); // Manage wallet detection state
+  const [error, setError] = useState<Error | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  // Check if any wallet is available in the browser
+  useEffect(() => {
+    const hasWallet = connectors.some(connector => connector.available());
+    setIsWalletDetected(hasWallet);
+  }, [connectors]);
+
+  // Handle connection errors
+  useEffect(() => {
+    if (status === "error" as AccountStatus) {
+      setError(new Error("Failed to connect wallet"));
+    } else {
+      setError(null);
+    }
+  }, [status]);
+
+  // Function to open the connect modal from anywhere in the app
+  const openConnectModal = () => {
+    setIsModalOpen(true);
+  };
+
+  // Function to close the connect modal
+  const closeConnectModal = () => {
+    setIsModalOpen(false);
+  };
+
+  // Context value
+  const value = {
+    isConnected,
+    address,
+    isConnecting: status === "connecting",
+    isWalletDetected, // Expose wallet detection state
+    error,
+    isModalOpen,
+    openConnectModal,
+    closeConnectModal
+  };
+
+  return (
+    <WalletContext.Provider value={value}>
+      {children}
+    </WalletContext.Provider>
+  );
+}
+
+// Custom hook to use the wallet context
+export function useWallet() {
+  const context = useContext(WalletContext);
+  if (context === undefined) {
+    throw new Error("useWallet must be used within a WalletProvider");
+  }
+  return context;
+}
diff --git a/src/components/dashboard/header.tsx b/src/components/dashboard/header.tsx
index 94863ec..9cbce87 100644
--- a/src/components/dashboard/header.tsx
+++ b/src/components/dashboard/header.tsx
@@ -1,15 +1,54 @@
-import { Bell } from "lucide-react";
-import Image from "next/image";
+
+
+
+
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { Bell } from "lucide-react"
+import Image from "next/image"
+import WalletDisconnectModal from "../../components/blockchain/Wallet-disconnect-modal"
 import user from "../../../public/user1.svg";
-import check from "../../../public/check.svg";
+import check from "../../../public/check.svg"
 
 interface HeaderProps {
-  title: string;
+  title: string
 }
 
 export function Header({ title }: HeaderProps) {
+  const [isDisconnectModalOpen, setIsDisconnectModalOpen] = useState(false)
+  const router = useRouter()
+
+  const handleProfileClick = () => {
+    setIsDisconnectModalOpen(true)
+  }
+
+  const handleCloseModal = () => {
+    setIsDisconnectModalOpen(false)
+  }
+
+  const handleDisconnect = () => {
+    // Add your actual wallet disconnect logic here
+    // For example: disconnect from wallet provider, clear local storage, etc.
+
+    // Clear any authentication tokens or user data
+    localStorage.removeItem("walletAddress")
+    localStorage.removeItem("userToken")
+
+    // Close the modal
+    setIsDisconnectModalOpen(false)
+
+    // Navigate to home page
+    router.push("/")
+
+    console.log("User disconnected and redirected to home")
+  }
+
   return (
-    <header className="bg-white px-4 py-2 z-50 fixed w-full border-b top-0 border-[#e7e7e7] flex items-center justify-between">
+    <>
+
+       <header className="bg-white px-4 py-2 z-50 fixed w-full border-b top-0 border-[#e7e7e7] flex items-center justify-between">
       <h1 className="text-xl font-semibold text-[#000b21]">{title}</h1>
 
       <div className="flex items-center gap-4 space-x-3">
@@ -17,7 +56,7 @@ export function Header({ title }: HeaderProps) {
           <Bell className="text-[#5d5d5d] cursor-pointer" size={20} />
           <div className="absolute -top-1 -right-1 w-2 h-2 bg-[#ff5c5c] rounded-full"></div>
         </div>
-        <div className="flex items-center gap-2 border p-1 border-[#E7E7E7] rounded mr-72">
+        <div className="flex items-center gap-2 border p-1 border-[#E7E7E7] rounded mr-72 cursor-pointer" onClick={handleProfileClick}>
           <div className="w-8 h-8 rounded-sm bg-[#dba736] flex items-center justify-center overflow-hidden">
             <Image
               src={user}
@@ -37,5 +76,12 @@ export function Header({ title }: HeaderProps) {
         </div>
       </div>
     </header>
-  );
+
+      <WalletDisconnectModal
+        isOpen={isDisconnectModalOpen}
+        onClose={handleCloseModal}
+        onDisconnect={handleDisconnect}
+      />
+    </>
+  )
 }
diff --git a/src/components/landingpage/NavBar.tsx b/src/components/landingpage/NavBar.tsx
index a959031..6d063c5 100644
--- a/src/components/landingpage/NavBar.tsx
+++ b/src/components/landingpage/NavBar.tsx
@@ -4,12 +4,11 @@ import React from "react";
 import Image from "next/image";
 import Link from "next/link";
 import Image4 from "@/assets/Images/ImageLogo.png";
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, SetStateAction } from "react";
 import { MoreVertical } from "lucide-react";
 import AnimationWrapper from "@/components/motion/Animation-wrapper";
-import WalletConnectModal from "../blockchain/Wallet-connect-modal";
 import WalletDisconnectModal from "../blockchain/Wallet-disconnect-modal";
-
+import { ConnectButton } from "../../components/blockchain/connect-button";
 // starknet imports
 import { useWalletContext } from "../blockchain/WalletProvider";
 import { usePathname } from "next/navigation";
@@ -110,14 +109,6 @@ const NavBar = () => {
           ))}
         </nav>
 
-        {/* <div className="hidden md:flex items-center space-x-4">
-        <button className="bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-md text-sm font-medium">
-            Log In
-        </button>
-        <button className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">
-            Sign Up
-        </button>
-    </div> */}
 
         {/* Wallet Connection Button or Connected Wallet */}
         <div className="hidden md:block">
@@ -168,12 +159,7 @@ const NavBar = () => {
                       >
                         Disconnect
                       </button>
-                      <Link
-                        href="/sign-in"
-                        className="w-full block text-left px-4 py-2 text-sm text-gray-200 hover:bg-blue-600 transition-colors"
-                      >
-                        Sign in
-                      </Link>
+                    
                     </div>
                   </div>
                 )}
@@ -182,10 +168,10 @@ const NavBar = () => {
           </AnimationWrapper>
         </div>
       </div>
-      <WalletConnectModal
+     <ConnectButton
         isOpen={isConnectModalOpen}
-        onClose={() => setIsConnectModalOpen(false)}
         onSelect={handleWalletSelect}
+        setIsModalOpen={setIsConnectModalOpen}
       />
       <WalletDisconnectModal
         isOpen={isDisconnectModalOpen}
diff --git a/src/components/metadata/manifest.ts b/src/components/metadata/manifest.ts
new file mode 100644
index 0000000..aaf2059
--- /dev/null
+++ b/src/components/metadata/manifest.ts
@@ -0,0 +1,26 @@
+import type { MetadataRoute } from "next"
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: "ChainLib - Decentralized Library Platform",
+    short_name: "ChainLib",
+    description:
+      "ChainLib is a revolutionary decentralized library platform leveraging blockchain technology for transparent digital publishing. Own your stories, engage readers, and earn from your content with blockchain transparency.",
+    start_url: "/",
+    display: "standalone",
+    background_color: "#1e293b",
+    theme_color: "#3b82f6",
+    icons: [
+      {
+        src: "/icon-192x192.png",
+        sizes: "192x192",
+        type: "image/png",
+      },
+      {
+        src: "/icon-512x512.png",
+        sizes: "512x512",
+        type: "image/png",
+      },
+    ],
+  }
+}
\ No newline at end of file
diff --git a/src/components/metadata/robots.ts b/src/components/metadata/robots.ts
new file mode 100644
index 0000000..9c6f18c
--- /dev/null
+++ b/src/components/metadata/robots.ts
@@ -0,0 +1,12 @@
+import type { MetadataRoute } from "next"
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: "*",
+      allow: "/",
+      disallow: ["/private/", "/admin/", "/api/"],
+    },
+    sitemap: "https://chainlib.com/sitemap.xml",
+  }
+}
\ No newline at end of file
diff --git a/src/components/metadata/seo-head.tsx b/src/components/metadata/seo-head.tsx
new file mode 100644
index 0000000..366cb19
--- /dev/null
+++ b/src/components/metadata/seo-head.tsx
@@ -0,0 +1,58 @@
+import Head from "next/head"
+
+interface SEOHeadProps {
+  title?: string
+  description?: string
+  canonical?: string
+  ogImage?: string
+}
+
+export function SEOHead({
+  title = "ChainLib - Decentralized Library for the Future of Digital Publishing",
+  description = "ChainLib is a revolutionary decentralized library platform leveraging blockchain technology for transparent digital publishing. Own your stories, engage readers, and earn from your content with blockchain transparency.",
+  canonical = "https://chainlib.com",
+  ogImage = "/og-image.png",
+}: SEOHeadProps) {
+  return (
+    <Head>
+      {/* Primary Meta Tags */}
+      <title>{title}</title>
+      <meta name="title" content={title} />
+      <meta name="description" content={description} />
+      <meta
+        name="keywords"
+        content="decentralized library, blockchain publishing, digital publishing platform, decentralized publishing, blockchain library, content ownership, digital content platform, starknet publishing, blockchain transparency, decentralized content, digital books, content creators, blockchain books, decentralized reading, digital library, blockchain content, publishing platform, content monetization, digital rights, blockchain stories, starknet, web3 publishing, decentralized authors, blockchain readers, digital storytelling"
+      />
+      <meta name="robots" content="index, follow" />
+      <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
+      <meta name="language" content="English" />
+      <meta name="author" content="ChainLib Team" />
+
+      {/* Canonical URL */}
+      <link rel="canonical" href={canonical} />
+
+      {/* Open Graph / Facebook */}
+      <meta property="og:type" content="website" />
+      <meta property="og:url" content={canonical} />
+      <meta property="og:title" content={title} />
+      <meta property="og:description" content={description} />
+      <meta property="og:image" content={ogImage} />
+      <meta property="og:site_name" content="ChainLib" />
+      <meta property="og:locale" content="en_US" />
+
+      {/* Twitter */}
+      <meta property="twitter:card" content="summary_large_image" />
+      <meta property="twitter:url" content={canonical} />
+      <meta property="twitter:title" content={title} />
+      <meta property="twitter:description" content={description} />
+      <meta property="twitter:image" content={ogImage} />
+      <meta property="twitter:creator" content="@chainlib" />
+
+      {/* Additional Meta Tags */}
+      <meta name="theme-color" content="#1e293b" />
+      <meta name="msapplication-TileColor" content="#1e293b" />
+      <meta name="apple-mobile-web-app-capable" content="yes" />
+      <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    </Head>
+  )
+}
diff --git a/src/components/metadata/sitemap.ts b/src/components/metadata/sitemap.ts
new file mode 100644
index 0000000..7cebd52
--- /dev/null
+++ b/src/components/metadata/sitemap.ts
@@ -0,0 +1,54 @@
+import type { MetadataRoute } from "next"
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [
+    {
+      url: "https://chainlib.com",
+      lastModified: new Date(),
+      changeFrequency: "weekly",
+      priority: 1,
+    },
+    {
+      url: "https://chainlib.com/library",
+      lastModified: new Date(),
+      changeFrequency: "daily",
+      priority: 0.9,
+    },
+    {
+      url: "https://chainlib.com/publish",
+      lastModified: new Date(),
+      changeFrequency: "weekly",
+      priority: 0.8,
+    },
+    {
+      url: "https://chainlib.com/how-it-works",
+      lastModified: new Date(),
+      changeFrequency: "monthly",
+      priority: 0.8,
+    },
+    {
+      url: "https://chainlib.com/dashboard",
+      lastModified: new Date(),
+      changeFrequency: "weekly",
+      priority: 0.9,
+    },
+    {
+      url: "https://chainlib.com/authors",
+      lastModified: new Date(),
+      changeFrequency: "weekly",
+      priority: 0.7,
+    },
+    {
+      url: "https://chainlib.com/about",
+      lastModified: new Date(),
+      changeFrequency: "monthly",
+      priority: 0.6,
+    },
+    {
+      url: "https://chainlib.com/contact",
+      lastModified: new Date(),
+      changeFrequency: "monthly",
+      priority: 0.5,
+    },
+  ]
+}
diff --git a/src/components/metadata/structured-data.tsx b/src/components/metadata/structured-data.tsx
new file mode 100644
index 0000000..100085d
--- /dev/null
+++ b/src/components/metadata/structured-data.tsx
@@ -0,0 +1,152 @@
+export function StructuredData() {
+  const organizationSchema = {
+    "@context": "https://schema.org",
+    "@type": "Organization",
+    name: "ChainLib",
+    description:
+      "ChainLib is a revolutionary decentralized library platform leveraging blockchain technology for transparent digital publishing. Own your stories, engage readers, and earn from your content with blockchain transparency.",
+    url: "https://chainlib.com",
+    logo: "https://chainlib.com/logo.png",
+    foundingDate: "2024",
+    sameAs: [
+      "https://twitter.com/chainlib",
+      "https://github.com/chainlib/chainlib-platform",
+      "https://discord.gg/chainlib",
+    ],
+    contactPoint: {
+      "@type": "ContactPoint",
+      contactType: "customer service",
+      availableLanguage: ["English"],
+    },
+    address: {
+      "@type": "PostalAddress",
+      addressCountry: "Global",
+    },
+  }
+
+  const websiteSchema = {
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    name: "ChainLib",
+    url: "https://chainlib.com",
+    description:
+      "ChainLib is a revolutionary decentralized library platform leveraging blockchain technology for transparent digital publishing. Own your stories, engage readers, and earn from your content with blockchain transparency.",
+    publisher: {
+      "@type": "Organization",
+      name: "ChainLib",
+    },
+    potentialAction: {
+      "@type": "SearchAction",
+      target: "https://chainlib.com/search?q={search_term_string}",
+      "query-input": "required name=search_term_string",
+    },
+  }
+
+  const softwareApplicationSchema = {
+    "@context": "https://schema.org",
+    "@type": "SoftwareApplication",
+    name: "ChainLib",
+    description:
+      "Decentralized library platform leveraging blockchain technology for transparent digital publishing, content ownership, and reader engagement.",
+    url: "https://chainlib.com",
+    applicationCategory: "MultimediaApplication",
+    operatingSystem: "Web Browser",
+    offers: {
+      "@type": "Offer",
+      price: "0",
+      priceCurrency: "USD",
+    },
+    aggregateRating: {
+      "@type": "AggregateRating",
+      ratingValue: "4.9",
+      ratingCount: "850",
+    },
+    featureList: [
+      "Decentralized content publishing",
+      "Blockchain content ownership",
+      "Direct reader engagement",
+      "Content monetization",
+      "Transparent royalty distribution",
+      "Cross-platform accessibility",
+    ],
+  }
+
+  const breadcrumbSchema = {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    itemListElement: [
+      {
+        "@type": "ListItem",
+        position: 1,
+        name: "Home",
+        item: "https://chainlib.com",
+      },
+      {
+        "@type": "ListItem",
+        position: 2,
+        name: "Library",
+        item: "https://chainlib.com/library",
+      },
+      {
+        "@type": "ListItem",
+        position: 3,
+        name: "Publish",
+        item: "https://chainlib.com/publish",
+      },
+    ],
+  }
+
+  const faqSchema = {
+    "@context": "https://schema.org",
+    "@type": "FAQPage",
+    mainEntity: [
+      {
+        "@type": "Question",
+        name: "What is ChainLib?",
+        acceptedAnswer: {
+          "@type": "Answer",
+          text: "ChainLib is a decentralized library platform leveraging blockchain technology for transparent digital publishing. It enables content creators to own their stories, engage readers directly, and earn from their content with complete transparency.",
+        },
+      },
+      {
+        "@type": "Question",
+        name: "How does ChainLib work?",
+        acceptedAnswer: {
+          "@type": "Answer",
+          text: "ChainLib works in 4 simple steps: 1) Connect your wallet, 2) Browse the library or publish content, 3) Engage with readers or discover new stories, 4) Earn from your content or support your favorite authors.",
+        },
+      },
+      {
+        "@type": "Question",
+        name: "What are the fees for using ChainLib?",
+        acceptedAnswer: {
+          "@type": "Answer",
+          text: "ChainLib offers minimal fees for publishing content and transactions. Most reading is free, with optional support mechanisms for authors.",
+        },
+      },
+      {
+        "@type": "Question",
+        name: "Is ChainLib secure?",
+        acceptedAnswer: {
+          "@type": "Answer",
+          text: "Yes, ChainLib is built on StarkNet with blockchain security features. All content ownership is transparent and verifiable on the blockchain.",
+        },
+      },
+    ],
+  }
+
+  return (
+    <>
+      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(organizationSchema) }} />
+      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(websiteSchema) }} />
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify(softwareApplicationSchema),
+        }}
+      />
+      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }} />
+      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }} />
+    </>
+  )
+}