diff --git a/apps/api/src/helpers/oembed/constructIframe.ts b/apps/api/src/helpers/oembed/constructIframe.ts
index f616a6382..35cf5b445 100644
--- a/apps/api/src/helpers/oembed/constructIframe.ts
+++ b/apps/api/src/helpers/oembed/constructIframe.ts
@@ -1,5 +1,6 @@
-import type { Document } from 'linkedom/types/interface/document';
-import { COMMON_REGEX } from './regex';
+import type { Document } from 'linkedom/types/interface/document'
+
+import { COMMON_REGEX } from './regex'
 
 const ALLOWED_EMBEDS = [
   'youtube.com',
diff --git a/apps/api/src/helpers/oembed/extractOgTags.ts b/apps/api/src/helpers/oembed/extractOgTags.ts
index 6ee21a075..c91a10674 100644
--- a/apps/api/src/helpers/oembed/extractOgTags.ts
+++ b/apps/api/src/helpers/oembed/extractOgTags.ts
@@ -1,6 +1,6 @@
-import type { Document } from 'linkedom/types/interface/document';
+import type { Document } from 'linkedom/types/interface/document'
 
-import constructIframe from './constructIframe';
+import constructIframe from './constructIframe'
 
 const extractOgTags = async (document: Document) => {
   const titleTag = document.querySelector('title')
diff --git a/apps/api/src/index.ts b/apps/api/src/index.ts
index 4a771eda2..f18fa067a 100644
--- a/apps/api/src/index.ts
+++ b/apps/api/src/index.ts
@@ -1,19 +1,19 @@
-import { Hono } from 'hono';
-import { cors } from 'hono/cors';
+import { Hono } from 'hono'
+import { cors } from 'hono/cors'
 
-import allowedTokens from './routes/allowed-tokens';
-import did from './routes/did';
-import gateway from './routes/gateway';
-import metadata from './routes/metadata';
-import oembed from './routes/oembed';
-import recommendations from './routes/recommendations';
-import signup from './routes/signup';
-import sts from './routes/sts';
-import tail from './routes/tail';
-import toggles from './routes/toggles';
-import tower from './routes/tower';
-import verified from './routes/verified';
-import views from './routes/views';
+import allowedTokens from './routes/allowed-tokens'
+import did from './routes/did'
+import gateway from './routes/gateway'
+import metadata from './routes/metadata'
+import oembed from './routes/oembed'
+import recommendations from './routes/recommendations'
+import signup from './routes/signup'
+import sts from './routes/sts'
+import tail from './routes/tail'
+import toggles from './routes/toggles'
+import tower from './routes/tower'
+import verified from './routes/verified'
+import views from './routes/views'
 
 const app = new Hono()
 
diff --git a/apps/api/src/routes/oembed.ts b/apps/api/src/routes/oembed.ts
index 1bc0c9c35..1d1d5534f 100644
--- a/apps/api/src/routes/oembed.ts
+++ b/apps/api/src/routes/oembed.ts
@@ -1,12 +1,12 @@
-import { zValidator } from '@hono/zod-validator';
-import { Hono } from 'hono';
-import { cache } from 'hono/cache';
-import { parseHTML } from 'linkedom';
-import { object, string } from 'zod';
+import { zValidator } from '@hono/zod-validator'
+import { Hono } from 'hono'
+import { cache } from 'hono/cache'
+import { parseHTML } from 'linkedom'
+import { object, string } from 'zod'
 
-import { ERROR_MESSAGE } from '@/helpers/constants';
-import extractOgTags from '@/helpers/oembed/extractOgTags';
-import { COMMON_REGEX } from '@/helpers/oembed/regex';
+import { ERROR_MESSAGE } from '@/helpers/constants'
+import extractOgTags from '@/helpers/oembed/extractOgTags'
+import { COMMON_REGEX } from '@/helpers/oembed/regex'
 
 type Bindings = {
   LIVEPEER_API_TOKEN: string
diff --git a/apps/api/src/routes/sts.ts b/apps/api/src/routes/sts.ts
index 881da72f1..56c9f1855 100644
--- a/apps/api/src/routes/sts.ts
+++ b/apps/api/src/routes/sts.ts
@@ -1,7 +1,7 @@
-import { AssumeRoleCommand, STSClient } from '@aws-sdk/client-sts';
-import { Hono } from 'hono';
+import { AssumeRoleCommand, STSClient } from '@aws-sdk/client-sts'
+import { Hono } from 'hono'
 
-import { ERROR_MESSAGE } from '@/helpers/constants';
+import { ERROR_MESSAGE } from '@/helpers/constants'
 
 type Bindings = {
   EVER_ACCESS_KEY: string
diff --git a/apps/api/src/routes/tower.ts b/apps/api/src/routes/tower.ts
index 4536ffd83..d16817e99 100644
--- a/apps/api/src/routes/tower.ts
+++ b/apps/api/src/routes/tower.ts
@@ -1,12 +1,12 @@
-import { ALL_EVENTS } from '@dragverse/generic/events';
-import { zValidator } from '@hono/zod-validator';
-import { Hono } from 'hono';
-import UAParser from 'ua-parser-js';
-import type { z } from 'zod';
-import { any, object, string } from 'zod';
-
-import { ERROR_MESSAGE } from '@/helpers/constants';
-import checkEventExistence from '@/helpers/tower/checkEventExistence';
+import { ALL_EVENTS } from '@dragverse/generic/events'
+import { zValidator } from '@hono/zod-validator'
+import { Hono } from 'hono'
+import UAParser from 'ua-parser-js'
+import type { z } from 'zod'
+import { any, object, string } from 'zod'
+
+import { ERROR_MESSAGE } from '@/helpers/constants'
+import checkEventExistence from '@/helpers/tower/checkEventExistence'
 
 type Bindings = {
   INGEST_REST_ENDPOINT: string
diff --git a/apps/embed/src/components/Audio.tsx b/apps/embed/src/components/Audio.tsx
index 6b23cfc59..b0be65cbf 100644
--- a/apps/embed/src/components/Audio.tsx
+++ b/apps/embed/src/components/Audio.tsx
@@ -1,22 +1,22 @@
-import { useAverageColor } from '@dragverse/browser';
+import { useAverageColor } from '@dragverse/browser'
 import {
   STATIC_ASSETS,
   TAPE_APP_NAME,
   TAPE_WEBSITE_URL
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import {
   EVENTS,
-  Tower,
   getPublicationData,
   getThumbnailUrl,
   imageCdn,
-  sanitizeDStorageUrl
-} from '@dragverse/generic';
-import type { PrimaryPublication } from '@dragverse/lens';
-import { AudioPlayer, PauseOutline, PlayOutline } from '@dragverse/ui';
-import Link from 'next/link';
-import type { FC } from 'react';
-import { useState } from 'react';
+  sanitizeDStorageUrl,
+  Tower
+} from '@dragverse/generic'
+import type { PrimaryPublication } from '@dragverse/lens'
+import { AudioPlayer, PauseOutline, PlayOutline } from '@dragverse/ui'
+import Link from 'next/link'
+import type { FC } from 'react'
+import { useState } from 'react'
 
 type Props = {
   audio: PrimaryPublication
diff --git a/apps/embed/src/components/Publication.tsx b/apps/embed/src/components/Publication.tsx
index d03df52ae..bdac42cee 100644
--- a/apps/embed/src/components/Publication.tsx
+++ b/apps/embed/src/components/Publication.tsx
@@ -5,15 +5,15 @@ import {
   setFingerprint,
   tapeFont,
   videoPlayerTheme
-} from '@dragverse/browser';
-import { getPublication, isListenable } from '@dragverse/generic';
-import type { AnyPublication } from '@dragverse/lens';
-import { LivepeerConfig } from '@livepeer/react';
-import type { FC } from 'react';
-import { useEffect } from 'react';
+} from '@dragverse/browser'
+import { getPublication, isListenable } from '@dragverse/generic'
+import type { AnyPublication } from '@dragverse/lens'
+import { LivepeerConfig } from '@livepeer/react'
+import type { FC } from 'react'
+import { useEffect } from 'react'
 
-import Audio from './Audio';
-import Video from './Video';
+import Audio from './Audio'
+import Video from './Video'
 
 type Props = {
   publication: AnyPublication
diff --git a/apps/embed/src/components/TopOverlay.tsx b/apps/embed/src/components/TopOverlay.tsx
index 44ca1ff4c..47ef87c5c 100644
--- a/apps/embed/src/components/TopOverlay.tsx
+++ b/apps/embed/src/components/TopOverlay.tsx
@@ -1,21 +1,21 @@
-import { useCopyToClipboard } from '@dragverse/browser';
+import { useCopyToClipboard } from '@dragverse/browser'
 import {
-    STATIC_ASSETS,
-    TAPE_APP_NAME,
-    TAPE_WEBSITE_URL
-} from '@dragverse/constants';
+  STATIC_ASSETS,
+  TAPE_APP_NAME,
+  TAPE_WEBSITE_URL
+} from '@dragverse/constants'
 import {
-    EVENTS,
-    Tower,
-    getProfile,
-    getProfilePicture,
-    getPublicationData
-} from '@dragverse/generic';
-import type { PrimaryPublication } from '@dragverse/lens';
-import { CopyOutline } from '@dragverse/ui';
-import Link from 'next/link';
-import type { FC } from 'react';
-import { useEffect, useState } from 'react';
+  EVENTS,
+  getProfile,
+  getProfilePicture,
+  getPublicationData,
+  Tower
+} from '@dragverse/generic'
+import type { PrimaryPublication } from '@dragverse/lens'
+import { CopyOutline } from '@dragverse/ui'
+import Link from 'next/link'
+import type { FC } from 'react'
+import { useEffect, useState } from 'react'
 
 type OverlayProps = {
   playerRef: HTMLMediaElement | undefined
@@ -101,7 +101,7 @@ const TopOverlay: FC<OverlayProps> = ({ playerRef, video }) => {
       </div>
       <div className="absolute bottom-2 right-0 md:bottom-4">
         <Link
-          className="flex items-center space-x-1.5 rounded-l-full bg-brand-850/50 px-3 py-1.5 text-white"
+          className="bg-brand-850/50 flex items-center space-x-1.5 rounded-l-full px-3 py-1.5 text-white"
           title={`Watch on ${TAPE_APP_NAME}`}
           href={`${TAPE_WEBSITE_URL}/watch/${video?.id}`}
           target="_blank"
diff --git a/apps/embed/src/components/Video.tsx b/apps/embed/src/components/Video.tsx
index 648ad545e..18b124c83 100644
--- a/apps/embed/src/components/Video.tsx
+++ b/apps/embed/src/components/Video.tsx
@@ -1,23 +1,23 @@
 'use client'
 
-import { tw, useAverageColor } from '@dragverse/browser';
-import { LENSTUBE_BYTES_APP_ID } from '@dragverse/constants';
+import { tw, useAverageColor } from '@dragverse/browser'
+import { LENSTUBE_BYTES_APP_ID } from '@dragverse/constants'
 import {
   EVENTS,
-  Tower,
   getPublicationMediaUrl,
   getShouldUploadVideo,
   getThumbnailUrl,
   imageCdn,
-  sanitizeDStorageUrl
-} from '@dragverse/generic';
-import type { PrimaryPublication } from '@dragverse/lens';
-import { PlayOutline, VideoPlayer } from '@dragverse/ui';
-import { useSearchParams } from 'next/navigation';
-import type { FC } from 'react';
-import { useEffect, useState } from 'react';
+  sanitizeDStorageUrl,
+  Tower
+} from '@dragverse/generic'
+import type { PrimaryPublication } from '@dragverse/lens'
+import { PlayOutline, VideoPlayer } from '@dragverse/ui'
+import { useSearchParams } from 'next/navigation'
+import type { FC } from 'react'
+import { useEffect, useState } from 'react'
 
-import TopOverlay from './TopOverlay';
+import TopOverlay from './TopOverlay'
 
 type Props = {
   video: PrimaryPublication
diff --git a/apps/og/package.json b/apps/og/package.json
index 07a787db9..d8323434c 100644
--- a/apps/og/package.json
+++ b/apps/og/package.json
@@ -9,7 +9,7 @@
     "export": "next export",
     "start": "yarn build && next start --port 4002",
     "typecheck": "tsc --pretty",
-    "lint": "eslint . --ext .js,.ts,.tsx"
+    "lint": "eslint . --ext .js,.ts,.tsx --fix"
   },
   "dependencies": {
     "next": "14.1.0",
diff --git a/apps/og/src/app/u/[handle]/page.tsx b/apps/og/src/app/u/[handle]/page.tsx
index dad1772b0..41b341852 100644
--- a/apps/og/src/app/u/[handle]/page.tsx
+++ b/apps/og/src/app/u/[handle]/page.tsx
@@ -1,8 +1,8 @@
 import {
-    LENS_NAMESPACE_PREFIX,
-    TAPE_APP_DESCRIPTION,
-    TAPE_APP_NAME,
-    TAPE_WEBSITE_URL
+  LENS_NAMESPACE_PREFIX,
+  TAPE_APP_DESCRIPTION,
+  TAPE_APP_NAME,
+  TAPE_WEBSITE_URL
 } from '@dragverse/constants'
 import { getProfile, getProfilePicture } from '@dragverse/generic'
 import type { Profile } from '@dragverse/lens'
diff --git a/apps/og/src/app/watch/[id]/page.tsx b/apps/og/src/app/watch/[id]/page.tsx
index cdf9c5ceb..6724c31f8 100644
--- a/apps/og/src/app/watch/[id]/page.tsx
+++ b/apps/og/src/app/watch/[id]/page.tsx
@@ -5,20 +5,20 @@ import {
   TAPE_WEBSITE_URL,
   TAPE_X_HANDLE,
   WORKER_OEMBED_URL
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import {
   getProfile,
   getPublication,
   getPublicationData,
   truncate
-} from '@dragverse/generic';
-import type { AnyPublication } from '@dragverse/lens';
-import { PublicationDocument } from '@dragverse/lens';
-import { apolloClient } from '@dragverse/lens/apollo';
-import type { Metadata } from 'next';
+} from '@dragverse/generic'
+import type { AnyPublication } from '@dragverse/lens'
+import { PublicationDocument } from '@dragverse/lens'
+import { apolloClient } from '@dragverse/lens/apollo'
+import type { Metadata } from 'next'
 
-import common from '@/common';
-import { getCollectModuleMetadata } from '@/other-metadata';
+import common from '@/common'
+import { getCollectModuleMetadata } from '@/other-metadata'
 
 type Props = {
   params: { id: string }
diff --git a/apps/og/src/common.ts b/apps/og/src/common.ts
index cf633c593..0335792fc 100644
--- a/apps/og/src/common.ts
+++ b/apps/og/src/common.ts
@@ -1,8 +1,8 @@
 import {
-    OG_IMAGE,
-    TAPE_APP_DESCRIPTION,
-    TAPE_APP_NAME,
-    TAPE_WEBSITE_URL
+  OG_IMAGE,
+  TAPE_APP_DESCRIPTION,
+  TAPE_APP_NAME,
+  TAPE_WEBSITE_URL
 } from '@dragverse/constants'
 import type { Metadata } from 'next'
 
diff --git a/apps/web/src/components/Bangers/Feed.tsx b/apps/web/src/components/Bangers/Feed.tsx
index 2faa29c38..4d122e7d9 100644
--- a/apps/web/src/components/Bangers/Feed.tsx
+++ b/apps/web/src/components/Bangers/Feed.tsx
@@ -1,26 +1,26 @@
-import BangersShimmer from '@components/Shimmers/BangersShimmer';
-import { NoDataFound } from '@components/UIElements/NoDataFound';
+import BangersShimmer from '@components/Shimmers/BangersShimmer'
+import { NoDataFound } from '@components/UIElements/NoDataFound'
 import {
   INFINITE_SCROLL_ROOT_MARGIN,
   LENS_CUSTOM_FILTERS,
   TAPE_APP_ID
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import type {
   ExplorePublicationRequest,
   PrimaryPublication
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import {
-  ExplorePublicationType,
   ExplorePublicationsOrderByType,
+  ExplorePublicationType,
   LimitType,
   PublicationMetadataMainFocusType,
   useExplorePublicationsQuery
-} from '@dragverse/lens';
-import { Spinner } from '@dragverse/ui';
-import { useInView } from 'react-cool-inview';
+} from '@dragverse/lens'
+import { Spinner } from '@dragverse/ui'
+import { useInView } from 'react-cool-inview'
 
-import New from './New';
-import RenderBanger from './RenderBanger';
+import New from './New'
+import RenderBanger from './RenderBanger'
 
 const Feed = () => {
   const request: ExplorePublicationRequest = {
diff --git a/apps/web/src/components/Bangers/Likes.tsx b/apps/web/src/components/Bangers/Likes.tsx
index 497db25b8..003a92e18 100644
--- a/apps/web/src/components/Bangers/Likes.tsx
+++ b/apps/web/src/components/Bangers/Likes.tsx
@@ -1,17 +1,17 @@
-import HoverableProfile from '@components/Common/HoverableProfile';
-import { BangersBubbles } from '@components/Shimmers/BangersShimmer';
-import { COMMON_REGEX } from '@dragverse/constants';
+import HoverableProfile from '@components/Common/HoverableProfile'
+import { BangersBubbles } from '@components/Shimmers/BangersShimmer'
+import { COMMON_REGEX } from '@dragverse/constants'
 import {
   getProfile,
   getProfilePicture,
   getPublicationData
-} from '@dragverse/generic';
+} from '@dragverse/generic'
 import type {
   PrimaryPublication,
   ProfileWhoReactedResult,
   WhoReactedPublicationRequest
-} from '@dragverse/lens';
-import { LimitType, useWhoReactedPublicationQuery } from '@dragverse/lens';
+} from '@dragverse/lens'
+import { LimitType, useWhoReactedPublicationQuery } from '@dragverse/lens'
 
 const Likes = ({ post }: { post: PrimaryPublication }) => {
   const parsePublicationId = () => {
diff --git a/apps/web/src/components/Bangers/New.tsx b/apps/web/src/components/Bangers/New.tsx
index 4a804bcdc..872cd9a00 100644
--- a/apps/web/src/components/Bangers/New.tsx
+++ b/apps/web/src/components/Bangers/New.tsx
@@ -1,52 +1,52 @@
-import { LENSHUB_PROXY_ABI } from '@dragverse/abis';
-import { getUserLocale } from '@dragverse/browser';
+import { LENSHUB_PROXY_ABI } from '@dragverse/abis'
+import { getUserLocale } from '@dragverse/browser'
 import {
-    COMMON_REGEX,
-    ERROR_MESSAGE,
-    FALLBACK_COVER_URL,
-    LENSHUB_PROXY_ADDRESS,
-    OG_IMAGE,
-    REQUESTING_SIGNATURE_MESSAGE,
-    SIGN_IN_REQUIRED,
-    TAPE_APP_ID,
-    TAPE_WEBSITE_URL
-} from '@dragverse/constants';
+  COMMON_REGEX,
+  ERROR_MESSAGE,
+  FALLBACK_COVER_URL,
+  LENSHUB_PROXY_ADDRESS,
+  OG_IMAGE,
+  REQUESTING_SIGNATURE_MESSAGE,
+  SIGN_IN_REQUIRED,
+  TAPE_APP_ID,
+  TAPE_WEBSITE_URL
+} from '@dragverse/constants'
 import {
-    EVENTS,
-    Tower,
-    checkLensManagerPermissions,
-    getProfile,
-    getSignature,
-    imageCdn,
-    trimify,
-    uploadToAr
-} from '@dragverse/generic';
+  checkLensManagerPermissions,
+  EVENTS,
+  getProfile,
+  getSignature,
+  imageCdn,
+  Tower,
+  trimify,
+  uploadToAr
+} from '@dragverse/generic'
 import type {
-    CreateMomokaPostEip712TypedData,
-    CreateOnchainPostEip712TypedData
-} from '@dragverse/lens';
+  CreateMomokaPostEip712TypedData,
+  CreateOnchainPostEip712TypedData
+} from '@dragverse/lens'
 import {
-    useBroadcastOnMomokaMutation,
-    useCreateMomokaPostTypedDataMutation,
-    usePostOnMomokaMutation
-} from '@dragverse/lens';
-import type { CustomErrorWithData } from '@dragverse/lens/custom-types';
-import { Button, Input, Modal } from '@dragverse/ui';
-import { zodResolver } from '@hookform/resolvers/zod';
-import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork';
-import type { MetadataAttribute } from '@lens-protocol/metadata';
-import { MetadataAttributeType, link } from '@lens-protocol/metadata';
-import useProfileStore from '@lib/store/idb/profile';
-import useNonceStore from '@lib/store/nonce';
-import Link from 'next/link';
-import type { FC } from 'react';
-import { useState } from 'react';
-import { useForm } from 'react-hook-form';
-import toast from 'react-hot-toast';
-import { v4 as uuidv4 } from 'uuid';
-import { useSignTypedData, useWriteContract } from 'wagmi';
-import type { z } from 'zod';
-import { object, string } from 'zod';
+  useBroadcastOnMomokaMutation,
+  useCreateMomokaPostTypedDataMutation,
+  usePostOnMomokaMutation
+} from '@dragverse/lens'
+import type { CustomErrorWithData } from '@dragverse/lens/custom-types'
+import { Button, Input, Modal } from '@dragverse/ui'
+import { zodResolver } from '@hookform/resolvers/zod'
+import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork'
+import type { MetadataAttribute } from '@lens-protocol/metadata'
+import { link, MetadataAttributeType } from '@lens-protocol/metadata'
+import useProfileStore from '@lib/store/idb/profile'
+import useNonceStore from '@lib/store/nonce'
+import Link from 'next/link'
+import type { FC } from 'react'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import toast from 'react-hot-toast'
+import { v4 as uuidv4 } from 'uuid'
+import { useSignTypedData, useWriteContract } from 'wagmi'
+import type { z } from 'zod'
+import { object, string } from 'zod'
 
 const VALID_URL_REGEX = new RegExp(
   `${COMMON_REGEX.YOUTUBE_WATCH.source}|${COMMON_REGEX.TAPE_WATCH.source}|${COMMON_REGEX.VIMEO_WATCH.source}`
@@ -252,7 +252,7 @@ const New: FC<Props> = ({ refetch }) => {
               title="Tape/YouTube/Vimeo links supported"
               placeholder="Paste a link to a banger"
               autoComplete="off"
-              className="bg-white dark:bg-brand-850"
+              className="dark:bg-brand-850 bg-white"
               error={errors.link?.message}
               showError={false}
               {...register('link')}
diff --git a/apps/web/src/components/Bangers/RenderBanger.tsx b/apps/web/src/components/Bangers/RenderBanger.tsx
index b3181a1d9..4e37c3219 100644
--- a/apps/web/src/components/Bangers/RenderBanger.tsx
+++ b/apps/web/src/components/Bangers/RenderBanger.tsx
@@ -1,12 +1,12 @@
-import PublicationReaction from '@components/Common/Publication/PublicationReaction';
-import { TAPE_WEBSITE_URL } from '@dragverse/constants';
-import { getPublicationData } from '@dragverse/generic';
-import type { PrimaryPublication } from '@dragverse/lens';
-import { FireOutline, Tooltip } from '@dragverse/ui';
-import { getDateString, getRelativeTime } from '@lib/formatTime';
+import PublicationReaction from '@components/Common/Publication/PublicationReaction'
+import { TAPE_WEBSITE_URL } from '@dragverse/constants'
+import { getPublicationData } from '@dragverse/generic'
+import type { PrimaryPublication } from '@dragverse/lens'
+import { FireOutline, Tooltip } from '@dragverse/ui'
+import { getDateString, getRelativeTime } from '@lib/formatTime'
 
-import Likes from './Likes';
-import RenderLink from './RenderLink';
+import Likes from './Likes'
+import RenderLink from './RenderLink'
 
 const RenderBanger = ({
   post,
diff --git a/apps/web/src/components/Bangers/index.tsx b/apps/web/src/components/Bangers/index.tsx
index 2d46c108c..c65448d78 100644
--- a/apps/web/src/components/Bangers/index.tsx
+++ b/apps/web/src/components/Bangers/index.tsx
@@ -1,11 +1,11 @@
-import MetaTags from '@components/Common/MetaTags';
-import { FEATURE_FLAGS } from '@dragverse/constants';
-import { EVENTS, getIsFeatureEnabled, Tower } from '@dragverse/generic';
-import useProfileStore from '@lib/store/idb/profile';
-import { useEffect } from 'react';
-import Custom404 from 'src/pages/404';
+import MetaTags from '@components/Common/MetaTags'
+import { FEATURE_FLAGS } from '@dragverse/constants'
+import { EVENTS, getIsFeatureEnabled, Tower } from '@dragverse/generic'
+import useProfileStore from '@lib/store/idb/profile'
+import { useEffect } from 'react'
+import Custom404 from 'src/pages/404'
 
-import Feed from './Feed';
+import Feed from './Feed'
 
 const Bangers = () => {
   const { activeProfile } = useProfileStore()
diff --git a/apps/web/src/components/Bytes/ByteActions.tsx b/apps/web/src/components/Bytes/ByteActions.tsx
index 361d7dfd3..43dff3a9d 100644
--- a/apps/web/src/components/Bytes/ByteActions.tsx
+++ b/apps/web/src/components/Bytes/ByteActions.tsx
@@ -1,18 +1,18 @@
-import MirrorPublication from '@components/Common/MirrorPublication';
-import PublicationOptions from '@components/Common/Publication/PublicationOptions';
-import PublicationReaction from '@components/Common/Publication/PublicationReaction';
-import OpenActions from '@components/Watch/OpenActions';
-import type { MirrorablePublication } from '@dragverse/lens';
+import MirrorPublication from '@components/Common/MirrorPublication'
+import PublicationOptions from '@components/Common/Publication/PublicationOptions'
+import PublicationReaction from '@components/Common/Publication/PublicationReaction'
+import OpenActions from '@components/Watch/OpenActions'
+import type { MirrorablePublication } from '@dragverse/lens'
 import {
   CollectOutline,
   CommentOutline,
   MirrorOutline,
   Modal
-} from '@dragverse/ui';
-import type { FC } from 'react';
-import { useState } from 'react';
+} from '@dragverse/ui'
+import type { FC } from 'react'
+import { useState } from 'react'
 
-import ByteComments from './ByteComments';
+import ByteComments from './ByteComments'
 
 type Props = {
   video: MirrorablePublication
diff --git a/apps/web/src/components/Bytes/ByteComments.tsx b/apps/web/src/components/Bytes/ByteComments.tsx
index c0a98e480..41c9b1acf 100644
--- a/apps/web/src/components/Bytes/ByteComments.tsx
+++ b/apps/web/src/components/Bytes/ByteComments.tsx
@@ -1,9 +1,9 @@
-import PublicationComments from '@components/Common/Publication/PublicationComments';
-import NonRelevantComments from '@components/Watch/Comments/NonRelevantComments';
-import type { MirrorablePublication } from '@dragverse/lens';
-import { CustomCommentsFilterEnum } from '@dragverse/lens/custom-types';
-import useCommentStore from '@lib/store/comment';
-import type { FC } from 'react';
+import PublicationComments from '@components/Common/Publication/PublicationComments'
+import NonRelevantComments from '@components/Watch/Comments/NonRelevantComments'
+import type { MirrorablePublication } from '@dragverse/lens'
+import { CustomCommentsFilterEnum } from '@dragverse/lens/custom-types'
+import useCommentStore from '@lib/store/comment'
+import type { FC } from 'react'
 
 type Props = {
   video: MirrorablePublication
diff --git a/apps/web/src/components/Bytes/ByteVideo.tsx b/apps/web/src/components/Bytes/ByteVideo.tsx
index b8cac838a..6e166dd6d 100644
--- a/apps/web/src/components/Bytes/ByteVideo.tsx
+++ b/apps/web/src/components/Bytes/ByteVideo.tsx
@@ -1,22 +1,22 @@
-import MetaTags from '@components/Common/MetaTags';
+import MetaTags from '@components/Common/MetaTags'
 import {
-    getPublication,
-    getPublicationData,
-    getPublicationMediaUrl,
-    getShouldUploadVideo,
-    getThumbnailUrl,
-    imageCdn,
-    sanitizeDStorageUrl
-} from '@dragverse/generic';
-import type { AnyPublication } from '@dragverse/lens';
-import { VideoPlayer } from '@dragverse/ui';
-import useProfileStore from '@lib/store/idb/profile';
-import type { FC } from 'react';
-import React, { useEffect, useRef } from 'react';
+  getPublication,
+  getPublicationData,
+  getPublicationMediaUrl,
+  getShouldUploadVideo,
+  getThumbnailUrl,
+  imageCdn,
+  sanitizeDStorageUrl
+} from '@dragverse/generic'
+import type { AnyPublication } from '@dragverse/lens'
+import { VideoPlayer } from '@dragverse/ui'
+import useProfileStore from '@lib/store/idb/profile'
+import type { FC } from 'react'
+import React, { useEffect, useRef } from 'react'
 
-import BottomOverlay from './BottomOverlay';
-import ByteActions from './ByteActions';
-import TopOverlay from './TopOverlay';
+import BottomOverlay from './BottomOverlay'
+import ByteActions from './ByteActions'
+import TopOverlay from './TopOverlay'
 
 type Props = {
   video: AnyPublication
@@ -97,7 +97,7 @@ const ByteVideo: FC<Props> = ({
     <div className="keen-slider__slide flex snap-center justify-center focus-visible:outline-none md:ml-16 md:pb-2">
       <MetaTags title={getPublicationData(targetPublication.metadata)?.title} />
       <div className="relative">
-        <div className="rounded-large ultrawide:w-[650px] flex h-full w-[calc(100vw-80px)] items-center overflow-hidden bg-brand-850 md:w-[450px]">
+        <div className="rounded-large ultrawide:w-[650px] bg-brand-850 flex h-full w-[calc(100vw-80px)] items-center overflow-hidden md:w-[450px]">
           <div
             className="absolute top-[50%]"
             ref={intersectionRef}
diff --git a/apps/web/src/components/Bytes/index.tsx b/apps/web/src/components/Bytes/index.tsx
index 95674e259..7b64f28b6 100644
--- a/apps/web/src/components/Bytes/index.tsx
+++ b/apps/web/src/components/Bytes/index.tsx
@@ -1,17 +1,17 @@
-import MetaTags from '@components/Common/MetaTags';
-import { NoDataFound } from '@components/UIElements/NoDataFound';
+import MetaTags from '@components/Common/MetaTags'
+import { NoDataFound } from '@components/UIElements/NoDataFound'
 import {
   INFINITE_SCROLL_ROOT_MARGIN,
   LENS_CUSTOM_FILTERS,
   LENSTUBE_BYTES_APP_ID,
   TAPE_APP_ID
-} from '@dragverse/constants';
-import { EVENTS, Tower } from '@dragverse/generic';
+} from '@dragverse/constants'
+import { EVENTS, Tower } from '@dragverse/generic'
 import type {
   AnyPublication,
   ExplorePublicationRequest,
   PrimaryPublication
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import {
   ExplorePublicationsOrderByType,
   ExplorePublicationType,
@@ -19,16 +19,16 @@ import {
   PublicationMetadataMainFocusType,
   useExplorePublicationsLazyQuery,
   usePublicationLazyQuery
-} from '@dragverse/lens';
-import { ChevronDownOutline, ChevronUpOutline, Spinner } from '@dragverse/ui';
-import { getUnixTimestampForDaysAgo } from '@lib/formatTime';
-import { useKeenSlider } from 'keen-slider/react';
-import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
-import { useInView } from 'react-cool-inview';
+} from '@dragverse/lens'
+import { ChevronDownOutline, ChevronUpOutline, Spinner } from '@dragverse/ui'
+import { getUnixTimestampForDaysAgo } from '@lib/formatTime'
+import { useKeenSlider } from 'keen-slider/react'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { useInView } from 'react-cool-inview'
 
-import ByteVideo from './ByteVideo';
-import { KeyboardControls, WheelControls } from './SliderPlugin';
+import ByteVideo from './ByteVideo'
+import { KeyboardControls, WheelControls } from './SliderPlugin'
 
 const since = getUnixTimestampForDaysAgo(30)
 
diff --git a/apps/web/src/components/Common/AudioCard/index.tsx b/apps/web/src/components/Common/AudioCard/index.tsx
index 400386686..7191b785c 100644
--- a/apps/web/src/components/Common/AudioCard/index.tsx
+++ b/apps/web/src/components/Common/AudioCard/index.tsx
@@ -1,10 +1,10 @@
-import { getPublicationData } from '@dragverse/generic';
-import type { PrimaryPublication } from '@dragverse/lens';
-import Link from 'next/link';
-import type { FC } from 'react';
+import { getPublicationData } from '@dragverse/generic'
+import type { PrimaryPublication } from '@dragverse/lens'
+import Link from 'next/link'
+import type { FC } from 'react'
 
-import PublicationOptions from '../Publication/PublicationOptions';
-import ThumbnailImage from '../VideoCard/ThumbnailImage';
+import PublicationOptions from '../Publication/PublicationOptions'
+import ThumbnailImage from '../VideoCard/ThumbnailImage'
 
 type Props = {
   audio: PrimaryPublication
diff --git a/apps/web/src/components/Common/Badge.tsx b/apps/web/src/components/Common/Badge.tsx
index 7de9f7535..6dd9e50d5 100644
--- a/apps/web/src/components/Common/Badge.tsx
+++ b/apps/web/src/components/Common/Badge.tsx
@@ -1,8 +1,8 @@
-import { tw } from '@dragverse/browser';
-import { MISUSED_CHANNELS } from '@dragverse/constants';
-import { InfoSolid, Tooltip, VerifiedSolid } from '@dragverse/ui';
-import useVerifiedStore from '@lib/store/idb/verified';
-import type { FC } from 'react';
+import { tw } from '@dragverse/browser'
+import { MISUSED_CHANNELS } from '@dragverse/constants'
+import { InfoSolid, Tooltip, VerifiedSolid } from '@dragverse/ui'
+import useVerifiedStore from '@lib/store/idb/verified'
+import type { FC } from 'react'
 
 type Props = {
   id: string
diff --git a/apps/web/src/components/Common/CategoryFilters.tsx b/apps/web/src/components/Common/CategoryFilters.tsx
index 090140c23..20020078f 100644
--- a/apps/web/src/components/Common/CategoryFilters.tsx
+++ b/apps/web/src/components/Common/CategoryFilters.tsx
@@ -1,10 +1,11 @@
-import { tw } from '@dragverse/browser';
-import { CREATOR_VIDEO_CATEGORIES } from '@dragverse/constants';
-import { EVENTS, Tower } from '@dragverse/generic';
-import useAppStore from '@lib/store';
-import type { FC } from 'react';
-import { useRef } from 'react';
-import HorizontalScroller from './HorizontalScroller';
+import { tw } from '@dragverse/browser'
+import { CREATOR_VIDEO_CATEGORIES } from '@dragverse/constants'
+import { EVENTS, Tower } from '@dragverse/generic'
+import useAppStore from '@lib/store'
+import type { FC } from 'react'
+import { useRef } from 'react'
+
+import HorizontalScroller from './HorizontalScroller'
 
 type Props = {
   heading?: string
@@ -20,7 +21,7 @@ const CategoryFilters: FC<Props> = ({ heading }) => {
   }
 
   return (
-    <div className="sticky top-0 z-[9] bg-white dark:bg-brand-850">
+    <div className="dark:bg-brand-850 sticky top-0 z-[9] bg-white">
       <HorizontalScroller
         sectionRef={sectionRef}
         heading={heading ?? 'Explore'}
diff --git a/apps/web/src/components/Common/CollectorsList.tsx b/apps/web/src/components/Common/CollectorsList.tsx
index 67cb1adf1..6dadc0aa9 100644
--- a/apps/web/src/components/Common/CollectorsList.tsx
+++ b/apps/web/src/components/Common/CollectorsList.tsx
@@ -1,18 +1,18 @@
-import { NoDataFound } from '@components/UIElements/NoDataFound';
-import { formatNumber, getProfile, getProfilePicture } from '@dragverse/generic';
-import type { Profile, WhoActedOnPublicationRequest } from '@dragverse/lens';
+import { NoDataFound } from '@components/UIElements/NoDataFound'
+import { formatNumber, getProfile, getProfilePicture } from '@dragverse/generic'
+import type { Profile, WhoActedOnPublicationRequest } from '@dragverse/lens'
 import {
   LimitType,
   OpenActionCategoryType,
   useWhoActedOnPublicationQuery
-} from '@dragverse/lens';
-import { Spinner, UserOutline } from '@dragverse/ui';
-import Link from 'next/link';
-import type { FC } from 'react';
-import { useInView } from 'react-cool-inview';
+} from '@dragverse/lens'
+import { Spinner, UserOutline } from '@dragverse/ui'
+import Link from 'next/link'
+import type { FC } from 'react'
+import { useInView } from 'react-cool-inview'
 
-import Badge from './Badge';
-import HoverableProfile from './HoverableProfile';
+import Badge from './Badge'
+import HoverableProfile from './HoverableProfile'
 
 type Props = {
   videoId: string
diff --git a/apps/web/src/components/Common/EmbedMedia.tsx b/apps/web/src/components/Common/EmbedMedia.tsx
index 0f3c134ba..5da5131ca 100644
--- a/apps/web/src/components/Common/EmbedMedia.tsx
+++ b/apps/web/src/components/Common/EmbedMedia.tsx
@@ -1,9 +1,9 @@
-import { tw, useCopyToClipboard } from '@dragverse/browser';
-import { TAPE_APP_NAME, TAPE_EMBED_URL } from '@dragverse/constants';
-import { EVENTS, Tower } from '@dragverse/generic';
-import { CodeOutline, CopyOutline, Modal, Tooltip } from '@dragverse/ui';
-import type { FC } from 'react';
-import { useState } from 'react';
+import { tw, useCopyToClipboard } from '@dragverse/browser'
+import { TAPE_APP_NAME, TAPE_EMBED_URL } from '@dragverse/constants'
+import { EVENTS, Tower } from '@dragverse/generic'
+import { CodeOutline, CopyOutline, Modal, Tooltip } from '@dragverse/ui'
+import type { FC } from 'react'
+import { useState } from 'react'
 
 type Props = {
   publicationId: string
diff --git a/apps/web/src/components/Common/HoverableProfile.tsx b/apps/web/src/components/Common/HoverableProfile.tsx
index bf541ff0c..9fe0dca74 100644
--- a/apps/web/src/components/Common/HoverableProfile.tsx
+++ b/apps/web/src/components/Common/HoverableProfile.tsx
@@ -1,19 +1,19 @@
-import Stats from '@components/Profile/BasicInfo/Stats';
+import Stats from '@components/Profile/BasicInfo/Stats'
 import {
-    getProfile,
-    getProfileCoverPicture,
-    getProfilePicture,
-    imageCdn,
-    sanitizeDStorageUrl
-} from '@dragverse/generic';
-import type { Profile } from '@dragverse/lens';
-import { HoverCard, HoverCardContent, HoverCardTrigger } from '@dragverse/ui';
-import useProfileStore from '@lib/store/idb/profile';
-import Link from 'next/link';
-import type { FC, ReactElement } from 'react';
+  getProfile,
+  getProfileCoverPicture,
+  getProfilePicture,
+  imageCdn,
+  sanitizeDStorageUrl
+} from '@dragverse/generic'
+import type { Profile } from '@dragverse/lens'
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@dragverse/ui'
+import useProfileStore from '@lib/store/idb/profile'
+import Link from 'next/link'
+import type { FC, ReactElement } from 'react'
 
-import Badge from './Badge';
-import FollowActions from './FollowActions';
+import Badge from './Badge'
+import FollowActions from './FollowActions'
 
 type Props = {
   profile: Profile
@@ -38,7 +38,7 @@ const HoverableProfile: FC<Props> = ({ profile, children, pfp }) => {
           </Link>
         )}
       </HoverCardTrigger>
-      <HoverCardContent className="tape-border z-10 w-80 overflow-hidden rounded-xl bg-white shadow dark:bg-brand-850">
+      <HoverCardContent className="tape-border dark:bg-brand-850 z-10 w-80 overflow-hidden rounded-xl bg-white shadow">
         <div className="inset-0">
           <div
             style={{
diff --git a/apps/web/src/components/Common/Layout.tsx b/apps/web/src/components/Common/Layout.tsx
index 936e4da4a..57d2d76b1 100644
--- a/apps/web/src/components/Common/Layout.tsx
+++ b/apps/web/src/components/Common/Layout.tsx
@@ -3,26 +3,26 @@ import {
   setFingerprint,
   tw,
   useIsMounted
-} from '@dragverse/browser';
-import { AUTH_ROUTES, OWNER_ONLY_ROUTES } from '@dragverse/constants';
-import { getIsProfileOwner, trimify } from '@dragverse/generic';
-import type { Profile } from '@dragverse/lens';
-import { useCurrentProfileQuery } from '@dragverse/lens';
-import getCurrentSession from '@lib/getCurrentSession';
-import { signOut } from '@lib/store/auth';
-import useProfileStore from '@lib/store/idb/profile';
-import useNonceStore from '@lib/store/nonce';
-import { useTheme } from 'next-themes';
-import { useRouter } from 'next/router';
-import type { FC, ReactNode } from 'react';
-import { useEffect } from 'react';
-import { Toaster } from 'react-hot-toast';
-import { useAccount } from 'wagmi';
+} from '@dragverse/browser'
+import { AUTH_ROUTES, OWNER_ONLY_ROUTES } from '@dragverse/constants'
+import { getIsProfileOwner, trimify } from '@dragverse/generic'
+import type { Profile } from '@dragverse/lens'
+import { useCurrentProfileQuery } from '@dragverse/lens'
+import getCurrentSession from '@lib/getCurrentSession'
+import { signOut } from '@lib/store/auth'
+import useProfileStore from '@lib/store/idb/profile'
+import useNonceStore from '@lib/store/nonce'
+import { useRouter } from 'next/router'
+import { useTheme } from 'next-themes'
+import type { FC, ReactNode } from 'react'
+import { useEffect } from 'react'
+import { Toaster } from 'react-hot-toast'
+import { useAccount } from 'wagmi'
 
-import FullPageLoader from './FullPageLoader';
-import MetaTags from './MetaTags';
-import MobileBottomNav from './MobileBottomNav';
-import Navbar from './Navbar';
+import FullPageLoader from './FullPageLoader'
+import MetaTags from './MetaTags'
+import MobileBottomNav from './MobileBottomNav'
+import Navbar from './Navbar'
 
 interface Props {
   children: ReactNode
diff --git a/apps/web/src/components/Common/Logo.tsx b/apps/web/src/components/Common/Logo.tsx
index d1b29547e..4aeb6979c 100644
--- a/apps/web/src/components/Common/Logo.tsx
+++ b/apps/web/src/components/Common/Logo.tsx
@@ -1,6 +1,6 @@
-import { TAPE_LOGO } from '@dragverse/constants';
-import { useTheme } from 'next-themes';
-import Link from 'next/link';
+import { TAPE_LOGO } from '@dragverse/constants'
+import Link from 'next/link'
+import { useTheme } from 'next-themes'
 
 const Logo = () => {
   const { resolvedTheme } = useTheme()
diff --git a/apps/web/src/components/Common/MirrorPublication.tsx b/apps/web/src/components/Common/MirrorPublication.tsx
index 69dd25555..9c2aea8b7 100644
--- a/apps/web/src/components/Common/MirrorPublication.tsx
+++ b/apps/web/src/components/Common/MirrorPublication.tsx
@@ -1,38 +1,38 @@
-import { LENSHUB_PROXY_ABI } from '@dragverse/abis';
+import { LENSHUB_PROXY_ABI } from '@dragverse/abis'
 import {
   ERROR_MESSAGE,
   LENSHUB_PROXY_ADDRESS,
   REQUESTING_SIGNATURE_MESSAGE,
   SIGN_IN_REQUIRED
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import {
-  EVENTS,
-  Tower,
   checkLensManagerPermissions,
-  getSignature
-} from '@dragverse/generic';
+  EVENTS,
+  getSignature,
+  Tower
+} from '@dragverse/generic'
 import type {
   CreateMomokaMirrorEip712TypedData,
   CreateOnchainMirrorEip712TypedData,
   MirrorablePublication,
   MomokaMirrorRequest
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import {
-  useBroadcastOnMomokaMutation,
   useBroadcastOnchainMutation,
+  useBroadcastOnMomokaMutation,
   useCreateMomokaMirrorTypedDataMutation,
   useCreateOnchainMirrorTypedDataMutation,
-  useMirrorOnMomokaMutation,
-  useMirrorOnchainMutation
-} from '@dragverse/lens';
-import type { CustomErrorWithData } from '@dragverse/lens/custom-types';
-import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork';
-import useProfileStore from '@lib/store/idb/profile';
-import useNonceStore from '@lib/store/nonce';
-import type { FC } from 'react';
-import React, { useState } from 'react';
-import toast from 'react-hot-toast';
-import { useSignTypedData, useWriteContract } from 'wagmi';
+  useMirrorOnchainMutation,
+  useMirrorOnMomokaMutation
+} from '@dragverse/lens'
+import type { CustomErrorWithData } from '@dragverse/lens/custom-types'
+import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork'
+import useProfileStore from '@lib/store/idb/profile'
+import useNonceStore from '@lib/store/nonce'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import toast from 'react-hot-toast'
+import { useSignTypedData, useWriteContract } from 'wagmi'
 
 type Props = {
   video: MirrorablePublication
diff --git a/apps/web/src/components/Common/MirroredList.tsx b/apps/web/src/components/Common/MirroredList.tsx
index 0838259b2..54b1dd63d 100644
--- a/apps/web/src/components/Common/MirroredList.tsx
+++ b/apps/web/src/components/Common/MirroredList.tsx
@@ -1,18 +1,18 @@
-import { NoDataFound } from '@components/UIElements/NoDataFound';
-import { getProfile, getProfilePicture } from '@dragverse/generic';
+import { NoDataFound } from '@components/UIElements/NoDataFound'
+import { getProfile, getProfilePicture } from '@dragverse/generic'
 import {
   LimitType,
-  useProfilesQuery,
   type Profile,
-  type ProfilesRequest
-} from '@dragverse/lens';
-import { Spinner, UserOutline } from '@dragverse/ui';
-import Link from 'next/link';
-import type { FC } from 'react';
-import { useInView } from 'react-cool-inview';
+  type ProfilesRequest,
+  useProfilesQuery
+} from '@dragverse/lens'
+import { Spinner, UserOutline } from '@dragverse/ui'
+import Link from 'next/link'
+import type { FC } from 'react'
+import { useInView } from 'react-cool-inview'
 
-import Badge from './Badge';
-import HoverableProfile from './HoverableProfile';
+import Badge from './Badge'
+import HoverableProfile from './HoverableProfile'
 
 type Props = {
   videoId: string
diff --git a/apps/web/src/components/Common/MobileBottomNav.tsx b/apps/web/src/components/Common/MobileBottomNav.tsx
index db8f16ebf..3029b1126 100644
--- a/apps/web/src/components/Common/MobileBottomNav.tsx
+++ b/apps/web/src/components/Common/MobileBottomNav.tsx
@@ -1,13 +1,13 @@
-import { tw } from '@dragverse/browser';
+import { tw } from '@dragverse/browser'
 import {
-    BellOutline,
-    BytesOutline,
-    FeedOutline,
-    HomeOutline,
-    PlusOutline
-} from '@dragverse/ui';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
+  BellOutline,
+  BytesOutline,
+  FeedOutline,
+  HomeOutline,
+  PlusOutline
+} from '@dragverse/ui'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
 
 const MobileBottomNav = () => {
   const router = useRouter()
@@ -15,7 +15,7 @@ const MobileBottomNav = () => {
   const isActivePath = (path: string) => router.pathname === path
 
   return (
-    <div className="pb-safe sticky inset-x-0 bottom-0 z-10 border-t-[0.5px] border-gray-300 bg-white/90 backdrop-blur-xl md:hidden dark:border-gray-700 dark:bg-brand-850/90">
+    <div className="pb-safe dark:bg-brand-850/90 sticky inset-x-0 bottom-0 z-10 border-t-[0.5px] border-gray-300 bg-white/90 backdrop-blur-xl md:hidden dark:border-gray-700">
       <div className="grid grid-cols-5 py-3">
         <Link
           href="/"
diff --git a/apps/web/src/components/Common/Navbar.tsx b/apps/web/src/components/Common/Navbar.tsx
index cda8a138e..026a9531d 100644
--- a/apps/web/src/components/Common/Navbar.tsx
+++ b/apps/web/src/components/Common/Navbar.tsx
@@ -1,21 +1,21 @@
-import { tw } from '@dragverse/browser';
-import { FEATURE_FLAGS } from '@dragverse/constants';
-import { getIsFeatureEnabled } from '@dragverse/generic';
+import { tw } from '@dragverse/browser'
+import { FEATURE_FLAGS } from '@dragverse/constants'
+import { getIsFeatureEnabled } from '@dragverse/generic'
 import {
   BellOutline,
   Button,
   ChevronDownOutline,
   DropdownMenu
-} from '@dragverse/ui';
-import useProfileStore from '@lib/store/idb/profile';
-import usePersistStore from '@lib/store/persist';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
+} from '@dragverse/ui'
+import useProfileStore from '@lib/store/idb/profile'
+import usePersistStore from '@lib/store/persist'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
 
-import Logo from './Logo';
-import GlobalSearch from './Search/GlobalSearch';
-import TapeMenu from './TapeMenu';
-import UserMenu from './UserMenu';
+import Logo from './Logo'
+import GlobalSearch from './Search/GlobalSearch'
+import TapeMenu from './TapeMenu'
+import UserMenu from './UserMenu'
 
 const Navbar = () => {
   const { pathname, asPath } = useRouter()
@@ -29,7 +29,7 @@ const Navbar = () => {
   } = usePersistStore()
 
   return (
-    <div className="ultrawide:px-8 laptop:px-6 fixed top-0 z-10 flex h-14 w-full items-center bg-white/80 px-4 backdrop-blur-2xl dark:bg-brand-850/80">
+    <div className="ultrawide:px-8 laptop:px-6 dark:bg-brand-850/80 fixed top-0 z-10 flex h-14 w-full items-center bg-white/80 px-4 backdrop-blur-2xl">
       <div className="flex w-full items-center justify-between">
         <div className="flex items-center space-x-2 md:w-1/5">
           <Logo />
diff --git a/apps/web/src/components/Common/Providers/SubscriptionProvider.tsx b/apps/web/src/components/Common/Providers/SubscriptionProvider.tsx
index 4c5801677..080eec77d 100644
--- a/apps/web/src/components/Common/Providers/SubscriptionProvider.tsx
+++ b/apps/web/src/components/Common/Providers/SubscriptionProvider.tsx
@@ -1,20 +1,19 @@
-import { LENS_API_URL } from '@dragverse/constants';
+import { LENS_API_URL } from '@dragverse/constants'
+import type { Notification, UserSigNonces } from '@dragverse/lens'
 import {
   AuthorizationRecordRevokedSubscriptionDocument,
   NewNotificationSubscriptionDocument,
-  Notification,
-  UserSigNonces,
   UserSigNoncesSubscriptionDocument
-} from '@dragverse/lens';
-import { useApolloClient } from '@dragverse/lens/apollo';
-import getCurrentSession from '@lib/getCurrentSession';
-import { signOut } from '@lib/store/auth';
-import useNonceStore from '@lib/store/nonce';
-import usePersistStore from '@lib/store/persist';
-import { useEffect } from 'react';
-import useWebSocket from 'react-use-websocket';
-import { isAddress } from 'viem';
-import { useAccount } from 'wagmi';
+} from '@dragverse/lens'
+import { useApolloClient } from '@dragverse/lens/apollo'
+import getCurrentSession from '@lib/getCurrentSession'
+import { signOut } from '@lib/store/auth'
+import useNonceStore from '@lib/store/nonce'
+import usePersistStore from '@lib/store/persist'
+import { useEffect } from 'react'
+import useWebSocket from 'react-use-websocket'
+import { isAddress } from 'viem'
+import { useAccount } from 'wagmi'
 
 const SubscriptionProvider = () => {
   const { address } = useAccount()
diff --git a/apps/web/src/components/Common/Providers/TogglesProvider.tsx b/apps/web/src/components/Common/Providers/TogglesProvider.tsx
index 3b7342d14..f19fcc4a4 100644
--- a/apps/web/src/components/Common/Providers/TogglesProvider.tsx
+++ b/apps/web/src/components/Common/Providers/TogglesProvider.tsx
@@ -1,9 +1,9 @@
 import {
-    IS_MAINNET,
-    TESTNET_ALLOWED_TOKENS,
-    WORKER_ALLOWED_TOKENS_URL,
-    WORKER_TOGGLES_URL,
-    WORKER_VERIFIED_URL
+  IS_MAINNET,
+  TESTNET_ALLOWED_TOKENS,
+  WORKER_ALLOWED_TOKENS_URL,
+  WORKER_TOGGLES_URL,
+  WORKER_VERIFIED_URL
 } from '@dragverse/constants'
 import useProfileStore from '@lib/store/idb/profile'
 import useProfileRestrictionsStore from '@lib/store/idb/restrictions'
diff --git a/apps/web/src/components/Common/Providers/Web3Provider.tsx b/apps/web/src/components/Common/Providers/Web3Provider.tsx
index 7469b84af..18dab0ca9 100644
--- a/apps/web/src/components/Common/Providers/Web3Provider.tsx
+++ b/apps/web/src/components/Common/Providers/Web3Provider.tsx
@@ -1,8 +1,8 @@
-import { TAPE_APP_NAME, WC_PROJECT_ID } from '@dragverse/constants';
-import { type FC, type ReactNode } from 'react';
-import { WagmiProvider, createConfig, http } from 'wagmi';
-import { polygon, polygonMumbai } from 'wagmi/chains';
-import { coinbaseWallet, injected, walletConnect } from 'wagmi/connectors';
+import { TAPE_APP_NAME, WC_PROJECT_ID } from '@dragverse/constants'
+import { type FC, type ReactNode } from 'react'
+import { createConfig, http, WagmiProvider } from 'wagmi'
+import { polygon, polygonMumbai } from 'wagmi/chains'
+import { coinbaseWallet, injected, walletConnect } from 'wagmi/connectors'
 
 const connectors = [
   injected(),
diff --git a/apps/web/src/components/Common/Publication/PublicationActions.tsx b/apps/web/src/components/Common/Publication/PublicationActions.tsx
index a51be5914..fc9054baf 100644
--- a/apps/web/src/components/Common/Publication/PublicationActions.tsx
+++ b/apps/web/src/components/Common/Publication/PublicationActions.tsx
@@ -1,21 +1,21 @@
-import MirrorPublication from '@components/Common/MirrorPublication';
-import PublicationOptions from '@components/Common/Publication/PublicationOptions';
-import { getProfile } from '@dragverse/generic';
-import type { MirrorablePublication } from '@dragverse/lens';
-import { TriStateValue } from '@dragverse/lens';
+import MirrorPublication from '@components/Common/MirrorPublication'
+import PublicationOptions from '@components/Common/Publication/PublicationOptions'
+import { getProfile } from '@dragverse/generic'
+import type { MirrorablePublication } from '@dragverse/lens'
+import { TriStateValue } from '@dragverse/lens'
 import {
   CollectOutline,
   MirrorOutline,
   Modal,
   ThreeDotsOutline,
   TipOutline
-} from '@dragverse/ui';
-import type { FC } from 'react';
-import { useState } from 'react';
+} from '@dragverse/ui'
+import type { FC } from 'react'
+import { useState } from 'react'
 
-import OpenActions from '../../Watch/OpenActions';
-import TipForm from '../../Watch/TipForm';
-import PublicationReaction from './PublicationReaction';
+import OpenActions from '../../Watch/OpenActions'
+import TipForm from '../../Watch/TipForm'
+import PublicationReaction from './PublicationReaction'
 
 type Props = {
   publication: MirrorablePublication
diff --git a/apps/web/src/components/Common/Publication/PublicationComments.tsx b/apps/web/src/components/Common/Publication/PublicationComments.tsx
index 86146b943..6c9681557 100644
--- a/apps/web/src/components/Common/Publication/PublicationComments.tsx
+++ b/apps/web/src/components/Common/Publication/PublicationComments.tsx
@@ -1,35 +1,35 @@
-import Alert from '@components/Common/Alert';
-import CommentsShimmer from '@components/Shimmers/CommentsShimmer';
-import { NoDataFound } from '@components/UIElements/NoDataFound';
+import Alert from '@components/Common/Alert'
+import CommentsShimmer from '@components/Shimmers/CommentsShimmer'
+import { NoDataFound } from '@components/UIElements/NoDataFound'
 import {
   INFINITE_SCROLL_ROOT_MARGIN,
   LENS_CUSTOM_FILTERS
-} from '@dragverse/constants';
-import { getProfile } from '@dragverse/generic';
+} from '@dragverse/constants'
+import { getProfile } from '@dragverse/generic'
 import type {
   AnyPublication,
   Comment,
   MirrorablePublication,
   PublicationsRequest
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import {
   CommentRankingFilterType,
   LimitType,
   TriStateValue,
   usePublicationsQuery
-} from '@dragverse/lens';
-import { CustomCommentsFilterEnum } from '@dragverse/lens/custom-types';
-import { CommentOutline, Spinner } from '@dragverse/ui';
-import useCommentStore from '@lib/store/comment';
-import useProfileStore from '@lib/store/idb/profile';
-import usePersistStore from '@lib/store/persist';
-import type { FC } from 'react';
-import { useInView } from 'react-cool-inview';
+} from '@dragverse/lens'
+import { CustomCommentsFilterEnum } from '@dragverse/lens/custom-types'
+import { CommentOutline, Spinner } from '@dragverse/ui'
+import useCommentStore from '@lib/store/comment'
+import useProfileStore from '@lib/store/idb/profile'
+import usePersistStore from '@lib/store/persist'
+import type { FC } from 'react'
+import { useInView } from 'react-cool-inview'
 
-import CommentsFilter from '../../Watch/Comments/CommentsFilter';
-import NewComment from '../../Watch/Comments/NewComment';
-import QueuedComment from '../../Watch/Comments/QueuedComment';
-import RenderComment from '../../Watch/Comments/RenderComment';
+import CommentsFilter from '../../Watch/Comments/CommentsFilter'
+import NewComment from '../../Watch/Comments/NewComment'
+import QueuedComment from '../../Watch/Comments/QueuedComment'
+import RenderComment from '../../Watch/Comments/RenderComment'
 
 type Props = {
   publication: MirrorablePublication
diff --git a/apps/web/src/components/Common/Publication/PublicationOptions.tsx b/apps/web/src/components/Common/Publication/PublicationOptions.tsx
index 998bec8a3..d90dd0441 100644
--- a/apps/web/src/components/Common/Publication/PublicationOptions.tsx
+++ b/apps/web/src/components/Common/Publication/PublicationOptions.tsx
@@ -1,17 +1,16 @@
-import ReportPublication from '@components/Report/Publication';
-import Confirm from '@components/UIElements/Confirm';
-import { LENSHUB_PROXY_ABI } from '@dragverse/abis';
+import ReportPublication from '@components/Report/Publication'
+import Confirm from '@components/UIElements/Confirm'
+import { LENSHUB_PROXY_ABI } from '@dragverse/abis'
 import {
   ERROR_MESSAGE,
   LENSHUB_PROXY_ADDRESS,
   REQUESTING_SIGNATURE_MESSAGE,
   SIGN_IN_REQUIRED,
   TAPE_APP_ID
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import {
-  EVENTS,
-  Tower,
   checkLensManagerPermissions,
+  EVENTS,
   getIsIPFSUrl,
   getMetadataCid,
   getProfileCoverPicture,
@@ -19,14 +18,15 @@ import {
   getSignature,
   getValueFromKeyInAttributes,
   logger,
+  Tower,
   trimify,
   uploadToAr
-} from '@dragverse/generic';
+} from '@dragverse/generic'
 import type {
   OnchainSetProfileMetadataRequest,
   PrimaryPublication,
   Profile
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import {
   useAddPublicationBookmarkMutation,
   useAddPublicationNotInterestedMutation,
@@ -36,9 +36,9 @@ import {
   useRemovePublicationBookmarkMutation,
   useSetProfileMetadataMutation,
   useUndoPublicationNotInterestedMutation
-} from '@dragverse/lens';
-import { useApolloClient } from '@dragverse/lens/apollo';
-import type { CustomErrorWithData } from '@dragverse/lens/custom-types';
+} from '@dragverse/lens'
+import { useApolloClient } from '@dragverse/lens/apollo'
+import type { CustomErrorWithData } from '@dragverse/lens/custom-types'
 import {
   BookmarkOutline,
   DropdownMenu,
@@ -51,20 +51,20 @@ import {
   ShareOutline,
   ThreeDotsOutline,
   TrashOutline
-} from '@dragverse/ui';
-import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork';
-import type { ProfileOptions } from '@lens-protocol/metadata';
-import { MetadataAttributeType, profile } from '@lens-protocol/metadata';
-import useProfileStore from '@lib/store/idb/profile';
-import type { FC, ReactNode } from 'react';
-import { useState } from 'react';
-import toast from 'react-hot-toast';
-import { v4 as uuidv4 } from 'uuid';
-import { useSignTypedData, useWriteContract } from 'wagmi';
-
-import ArweaveExplorerLink from '../Links/ArweaveExplorerLink';
-import IPFSLink from '../Links/IPFSLink';
-import Share from '../VideoCard/Share';
+} from '@dragverse/ui'
+import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork'
+import type { ProfileOptions } from '@lens-protocol/metadata'
+import { MetadataAttributeType, profile } from '@lens-protocol/metadata'
+import useProfileStore from '@lib/store/idb/profile'
+import type { FC, ReactNode } from 'react'
+import { useState } from 'react'
+import toast from 'react-hot-toast'
+import { v4 as uuidv4 } from 'uuid'
+import { useSignTypedData, useWriteContract } from 'wagmi'
+
+import ArweaveExplorerLink from '../Links/ArweaveExplorerLink'
+import IPFSLink from '../Links/IPFSLink'
+import Share from '../VideoCard/Share'
 
 type Props = {
   publication: PrimaryPublication
diff --git a/apps/web/src/components/Common/Publication/PublicationReaction.tsx b/apps/web/src/components/Common/Publication/PublicationReaction.tsx
index c5e646b8f..8a2e3de8c 100644
--- a/apps/web/src/components/Common/Publication/PublicationReaction.tsx
+++ b/apps/web/src/components/Common/Publication/PublicationReaction.tsx
@@ -1,17 +1,17 @@
-import { tw } from '@dragverse/browser';
-import { SIGN_IN_REQUIRED } from '@dragverse/constants';
-import { EVENTS, formatNumber, getPublication, Tower } from '@dragverse/generic';
-import type { AnyPublication } from '@dragverse/lens';
+import { tw } from '@dragverse/browser'
+import { SIGN_IN_REQUIRED } from '@dragverse/constants'
+import { EVENTS, formatNumber, getPublication, Tower } from '@dragverse/generic'
+import type { AnyPublication } from '@dragverse/lens'
 import {
   PublicationReactionType,
   useAddReactionMutation,
   useRemoveReactionMutation
-} from '@dragverse/lens';
-import { HeartFilled, HeartOutline } from '@dragverse/ui';
-import useProfileStore from '@lib/store/idb/profile';
-import type { FC } from 'react';
-import { useState } from 'react';
-import toast from 'react-hot-toast';
+} from '@dragverse/lens'
+import { HeartFilled, HeartOutline } from '@dragverse/ui'
+import useProfileStore from '@lib/store/idb/profile'
+import type { FC } from 'react'
+import { useState } from 'react'
+import toast from 'react-hot-toast'
 
 type Props = {
   publication: AnyPublication
diff --git a/apps/web/src/components/Common/Search/GlobalSearch.tsx b/apps/web/src/components/Common/Search/GlobalSearch.tsx
index 32e378f14..0077d9057 100644
--- a/apps/web/src/components/Common/Search/GlobalSearch.tsx
+++ b/apps/web/src/components/Common/Search/GlobalSearch.tsx
@@ -1,31 +1,31 @@
-import { NoDataFound } from '@components/UIElements/NoDataFound';
-import { tw, useDebounce, useOutsideClick } from '@dragverse/browser';
+import { NoDataFound } from '@components/UIElements/NoDataFound'
+import { tw, useDebounce, useOutsideClick } from '@dragverse/browser'
 import {
-    LENSTUBE_APP_ID,
-    LENSTUBE_BYTES_APP_ID,
-    LENS_CUSTOM_FILTERS,
-    TAPE_APP_ID,
-    TAPE_BYTES_APP_ID
-} from '@dragverse/constants';
-import { EVENTS, Tower } from '@dragverse/generic';
+  LENS_CUSTOM_FILTERS,
+  LENSTUBE_APP_ID,
+  LENSTUBE_BYTES_APP_ID,
+  TAPE_APP_ID,
+  TAPE_BYTES_APP_ID
+} from '@dragverse/constants'
+import { EVENTS, Tower } from '@dragverse/generic'
 import type {
-    PrimaryPublication,
-    Profile,
-    ProfileSearchRequest,
-    PublicationSearchRequest
-} from '@dragverse/lens';
+  PrimaryPublication,
+  Profile,
+  ProfileSearchRequest,
+  PublicationSearchRequest
+} from '@dragverse/lens'
 import {
-    LimitType,
-    PublicationMetadataMainFocusType,
-    SearchPublicationType,
-    useSearchProfilesLazyQuery,
-    useSearchPublicationsLazyQuery
-} from '@dragverse/lens';
-import { Input, SearchOutline, Spinner } from '@dragverse/ui';
-import { useEffect, useRef, useState } from 'react';
+  LimitType,
+  PublicationMetadataMainFocusType,
+  SearchPublicationType,
+  useSearchProfilesLazyQuery,
+  useSearchPublicationsLazyQuery
+} from '@dragverse/lens'
+import { Input, SearchOutline, Spinner } from '@dragverse/ui'
+import { useEffect, useRef, useState } from 'react'
 
-import Profiles from './Profiles';
-import Publications from './Publications';
+import Profiles from './Profiles'
+import Publications from './Publications'
 
 const GlobalSearch = () => {
   const [showSearchBar, setShowSearchBar] = useState(false)
@@ -121,7 +121,7 @@ const GlobalSearch = () => {
       />
       <div
         className={tw(
-          'rounded-medium tape-border no-scrollbar top-10 z-10 mt-1 w-full overflow-y-auto bg-white text-base shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none md:absolute dark:bg-brand-850',
+          'rounded-medium tape-border no-scrollbar dark:bg-brand-850 top-10 z-10 mt-1 w-full overflow-y-auto bg-white text-base shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none md:absolute',
           { hidden: debouncedValue.length === 0 }
         )}
         style={{ top: '100%' }} // Adjust the top position for mobile
diff --git a/apps/web/src/components/Common/Search/Profiles.tsx b/apps/web/src/components/Common/Search/Profiles.tsx
index 72c83b679..d19eee8a1 100644
--- a/apps/web/src/components/Common/Search/Profiles.tsx
+++ b/apps/web/src/components/Common/Search/Profiles.tsx
@@ -1,10 +1,10 @@
-import { formatNumber, getProfile, getProfilePicture } from '@dragverse/generic';
-import type { Profile } from '@dragverse/lens';
-import { UserOutline } from '@dragverse/ui';
-import Link from 'next/link';
-import type { FC } from 'react';
+import { formatNumber, getProfile, getProfilePicture } from '@dragverse/generic'
+import type { Profile } from '@dragverse/lens'
+import { UserOutline } from '@dragverse/ui'
+import Link from 'next/link'
+import type { FC } from 'react'
 
-import Badge from '../Badge';
+import Badge from '../Badge'
 
 interface Props {
   results: Profile[]
diff --git a/apps/web/src/components/Common/Search/Publications.tsx b/apps/web/src/components/Common/Search/Publications.tsx
index 44cada4e2..249c1b46a 100644
--- a/apps/web/src/components/Common/Search/Publications.tsx
+++ b/apps/web/src/components/Common/Search/Publications.tsx
@@ -1,19 +1,19 @@
-import { tw } from '@dragverse/browser';
+import { tw } from '@dragverse/browser'
 import {
   FALLBACK_THUMBNAIL_URL,
   LENSTUBE_BYTES_APP_ID,
   STATIC_ASSETS
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import {
   getIsSensitiveContent,
   getPublication,
   getPublicationData,
   getThumbnailUrl,
   imageCdn
-} from '@dragverse/generic';
-import type { AnyPublication } from '@dragverse/lens';
-import Link from 'next/link';
-import type { FC } from 'react';
+} from '@dragverse/generic'
+import type { AnyPublication } from '@dragverse/lens'
+import Link from 'next/link'
+import type { FC } from 'react'
 
 interface Props {
   results: AnyPublication[]
diff --git a/apps/web/src/components/Common/UserMenu.tsx b/apps/web/src/components/Common/UserMenu.tsx
index d51c2a1e4..11f1963d2 100644
--- a/apps/web/src/components/Common/UserMenu.tsx
+++ b/apps/web/src/components/Common/UserMenu.tsx
@@ -1,11 +1,16 @@
-import { ADMIN_IDS } from '@dragverse/constants';
-import { EVENTS, getProfile, getProfilePicture, Tower } from '@dragverse/generic';
-import type { Profile } from '@dragverse/lens';
+import { ADMIN_IDS } from '@dragverse/constants'
+import {
+  EVENTS,
+  getProfile,
+  getProfilePicture,
+  Tower
+} from '@dragverse/generic'
+import type { Profile } from '@dragverse/lens'
 import {
   LimitType,
   useProfilesManagedQuery,
   useRevokeAuthenticationMutation
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import {
   BookmarkOutline,
   ChevronRightOutline,
@@ -23,15 +28,15 @@ import {
   SunOutline,
   SwitchProfileOutline,
   UserOutline
-} from '@dragverse/ui';
-import getCurrentSession from '@lib/getCurrentSession';
-import { signOut } from '@lib/store/auth';
-import useProfileStore from '@lib/store/idb/profile';
-import { useTheme } from 'next-themes';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import { useMemo } from 'react';
-import { useAccount } from 'wagmi';
+} from '@dragverse/ui'
+import getCurrentSession from '@lib/getCurrentSession'
+import { signOut } from '@lib/store/auth'
+import useProfileStore from '@lib/store/idb/profile'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useTheme } from 'next-themes'
+import { useMemo } from 'react'
+import { useAccount } from 'wagmi'
 
 const UserMenu = () => {
   const { theme, setTheme } = useTheme()
diff --git a/apps/web/src/components/Common/VideoCard/QueuedVideo.tsx b/apps/web/src/components/Common/VideoCard/QueuedVideo.tsx
index fa871272e..891920cdf 100644
--- a/apps/web/src/components/Common/VideoCard/QueuedVideo.tsx
+++ b/apps/web/src/components/Common/VideoCard/QueuedVideo.tsx
@@ -1,26 +1,26 @@
-import { tw, useAverageColor } from '@dragverse/browser';
-import { STATIC_ASSETS } from '@dragverse/constants';
+import { tw, useAverageColor } from '@dragverse/browser'
+import { STATIC_ASSETS } from '@dragverse/constants'
 import {
   getProfile,
   getProfilePicture,
   imageCdn,
   sanitizeDStorageUrl
-} from '@dragverse/generic';
+} from '@dragverse/generic'
 import {
   PublicationDocument,
   usePublicationQuery,
   useTxIdToTxHashQuery
-} from '@dragverse/lens';
-import { useApolloClient } from '@dragverse/lens/apollo';
-import type { QueuedVideoType } from '@dragverse/lens/custom-types';
-import { Tooltip } from '@dragverse/ui';
-import usePendingTxn from '@hooks/usePendingTxn';
-import useAppStore, { UPLOADED_VIDEO_FORM_DEFAULTS } from '@lib/store';
-import useProfileStore from '@lib/store/idb/profile';
-import usePersistStore from '@lib/store/persist';
-import type { FC } from 'react';
+} from '@dragverse/lens'
+import { useApolloClient } from '@dragverse/lens/apollo'
+import type { QueuedVideoType } from '@dragverse/lens/custom-types'
+import { Tooltip } from '@dragverse/ui'
+import usePendingTxn from '@hooks/usePendingTxn'
+import useAppStore, { UPLOADED_VIDEO_FORM_DEFAULTS } from '@lib/store'
+import useProfileStore from '@lib/store/idb/profile'
+import usePersistStore from '@lib/store/persist'
+import type { FC } from 'react'
 
-import Badge from '../Badge';
+import Badge from '../Badge'
 
 type Props = {
   queuedVideo: QueuedVideoType
diff --git a/apps/web/src/components/Common/VideoCard/Share.tsx b/apps/web/src/components/Common/VideoCard/Share.tsx
index bc66f21af..fc04aa9c2 100644
--- a/apps/web/src/components/Common/VideoCard/Share.tsx
+++ b/apps/web/src/components/Common/VideoCard/Share.tsx
@@ -1,14 +1,19 @@
-import { useCopyToClipboard } from '@dragverse/browser';
-import { LINKEDIN_ICON_URL, STATIC_ASSETS, TAPEXYZ_LOGO, TAPE_WEBSITE_URL } from '@dragverse/constants';
-import { EVENTS, Tower, getSharableLink, imageCdn } from '@dragverse/generic';
-import type { PrimaryPublication } from '@dragverse/lens';
-import { CopyOutline, MirrorOutline, Tooltip } from '@dragverse/ui';
-import { useTheme } from 'next-themes';
-import Link from 'next/link';
-import type { FC } from 'react';
+import { useCopyToClipboard } from '@dragverse/browser'
+import {
+  LINKEDIN_ICON_URL,
+  STATIC_ASSETS,
+  TAPE_WEBSITE_URL,
+  TAPEXYZ_LOGO
+} from '@dragverse/constants'
+import { EVENTS, getSharableLink, imageCdn, Tower } from '@dragverse/generic'
+import type { PrimaryPublication } from '@dragverse/lens'
+import { CopyOutline, MirrorOutline, Tooltip } from '@dragverse/ui'
+import Link from 'next/link'
+import { useTheme } from 'next-themes'
+import type { FC } from 'react'
 
-import EmbedMedia from '../EmbedMedia';
-import MirrorPublication from '../MirrorPublication';
+import EmbedMedia from '../EmbedMedia'
+import MirrorPublication from '../MirrorPublication'
 
 type Props = {
   publication: PrimaryPublication
diff --git a/apps/web/src/components/Common/VideoCard/ThumbnailImage.tsx b/apps/web/src/components/Common/VideoCard/ThumbnailImage.tsx
index 00f5629cc..2869a031d 100644
--- a/apps/web/src/components/Common/VideoCard/ThumbnailImage.tsx
+++ b/apps/web/src/components/Common/VideoCard/ThumbnailImage.tsx
@@ -1,17 +1,17 @@
-import { tw, useAverageColor } from '@dragverse/browser';
+import { tw, useAverageColor } from '@dragverse/browser'
 import {
   FALLBACK_THUMBNAIL_URL,
   LENSTUBE_BYTES_APP_ID,
   STATIC_ASSETS
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import {
   getIsSensitiveContent,
   getPublication,
   getThumbnailUrl,
   imageCdn
-} from '@dragverse/generic';
-import type { AnyPublication } from '@dragverse/lens';
-import type { FC } from 'react';
+} from '@dragverse/generic'
+import type { AnyPublication } from '@dragverse/lens'
+import type { FC } from 'react'
 
 type Props = {
   video: AnyPublication
diff --git a/apps/web/src/components/Common/VideoCard/index.tsx b/apps/web/src/components/Common/VideoCard/index.tsx
index 9ce121736..d1095ff63 100644
--- a/apps/web/src/components/Common/VideoCard/index.tsx
+++ b/apps/web/src/components/Common/VideoCard/index.tsx
@@ -1,20 +1,20 @@
-import { LENSTUBE_BYTES_APP_ID } from '@dragverse/constants';
+import { LENSTUBE_BYTES_APP_ID } from '@dragverse/constants'
 import {
   formatNumber,
   getProfile,
   getProfilePicture,
   getPublicationData
-} from '@dragverse/generic';
-import type { PrimaryPublication, VideoMetadataV3 } from '@dragverse/lens';
-import { HeartOutline } from '@dragverse/ui';
-import { getShortHandTime } from '@lib/formatTime';
-import Link from 'next/link';
-import type { FC } from 'react';
+} from '@dragverse/generic'
+import type { PrimaryPublication, VideoMetadataV3 } from '@dragverse/lens'
+import { HeartOutline } from '@dragverse/ui'
+import { getShortHandTime } from '@lib/formatTime'
+import Link from 'next/link'
+import type { FC } from 'react'
 
-import HoverableProfile from '../HoverableProfile';
-import PublicationOptions from '../Publication/PublicationOptions';
-import ThumbnailImage from './ThumbnailImage';
-import ThumbnailOverlays from './ThumbnailOverlays';
+import HoverableProfile from '../HoverableProfile'
+import PublicationOptions from '../Publication/PublicationOptions'
+import ThumbnailImage from './ThumbnailImage'
+import ThumbnailOverlays from './ThumbnailOverlays'
 
 type Props = {
   video: PrimaryPublication
diff --git a/apps/web/src/components/Create/ChooseThumbnail.tsx b/apps/web/src/components/Create/ChooseThumbnail.tsx
index 54eecda0d..97255d134 100644
--- a/apps/web/src/components/Create/ChooseThumbnail.tsx
+++ b/apps/web/src/components/Create/ChooseThumbnail.tsx
@@ -1,10 +1,10 @@
-import ThumbnailsShimmer from '@components/Shimmers/ThumbnailsShimmer';
-import { generateVideoThumbnails, tw } from '@dragverse/browser';
-import { logger } from '@dragverse/generic';
-import { AddImageOutline, CheckOutline, Spinner } from '@dragverse/ui';
-import useAppStore from '@lib/store';
-import type { ChangeEvent, FC } from 'react';
-import { useEffect, useState } from 'react';
+import ThumbnailsShimmer from '@components/Shimmers/ThumbnailsShimmer'
+import { generateVideoThumbnails, tw } from '@dragverse/browser'
+import { logger } from '@dragverse/generic'
+import { AddImageOutline, CheckOutline, Spinner } from '@dragverse/ui'
+import useAppStore from '@lib/store'
+import type { ChangeEvent, FC } from 'react'
+import { useEffect, useState } from 'react'
 
 interface Props {
   file: File | null
diff --git a/apps/web/src/components/Create/CollectModule/ChargeQuestion.tsx b/apps/web/src/components/Create/CollectModule/ChargeQuestion.tsx
index fcc77c8a6..975eca399 100644
--- a/apps/web/src/components/Create/CollectModule/ChargeQuestion.tsx
+++ b/apps/web/src/components/Create/CollectModule/ChargeQuestion.tsx
@@ -1,8 +1,8 @@
-import { tw } from '@dragverse/browser';
-import type { CollectModuleType } from '@dragverse/lens/custom-types';
-import { Button } from '@dragverse/ui';
-import useAppStore from '@lib/store';
-import type { FC } from 'react';
+import { tw } from '@dragverse/browser'
+import type { CollectModuleType } from '@dragverse/lens/custom-types'
+import { Button } from '@dragverse/ui'
+import useAppStore from '@lib/store'
+import type { FC } from 'react'
 
 type Props = {
   setCollectType: (data: CollectModuleType) => void
diff --git a/apps/web/src/components/Create/CollectModule/CollectDuration.tsx b/apps/web/src/components/Create/CollectModule/CollectDuration.tsx
index 72dfe589d..3dcfc2eb7 100644
--- a/apps/web/src/components/Create/CollectModule/CollectDuration.tsx
+++ b/apps/web/src/components/Create/CollectModule/CollectDuration.tsx
@@ -1,10 +1,10 @@
-import { tw } from '@dragverse/browser';
-import { trimify } from '@dragverse/generic';
-import type { CollectModuleType } from '@dragverse/lens/custom-types';
-import { Button, Input } from '@dragverse/ui';
-import useAppStore from '@lib/store';
-import type { FC } from 'react';
-import { useState } from 'react';
+import { tw } from '@dragverse/browser'
+import { trimify } from '@dragverse/generic'
+import type { CollectModuleType } from '@dragverse/lens/custom-types'
+import { Button, Input } from '@dragverse/ui'
+import useAppStore from '@lib/store'
+import type { FC } from 'react'
+import { useState } from 'react'
 
 type Props = {
   setCollectType: (data: CollectModuleType) => void
diff --git a/apps/web/src/components/Create/CollectModule/EditionSize.tsx b/apps/web/src/components/Create/CollectModule/EditionSize.tsx
index aa0e750dc..46a7f0195 100644
--- a/apps/web/src/components/Create/CollectModule/EditionSize.tsx
+++ b/apps/web/src/components/Create/CollectModule/EditionSize.tsx
@@ -1,10 +1,10 @@
-import { tw } from '@dragverse/browser';
-import { trimify } from '@dragverse/generic';
-import type { CollectModuleType } from '@dragverse/lens/custom-types';
-import { Button, Input } from '@dragverse/ui';
-import useAppStore from '@lib/store';
-import type { FC } from 'react';
-import { useState } from 'react';
+import { tw } from '@dragverse/browser'
+import { trimify } from '@dragverse/generic'
+import type { CollectModuleType } from '@dragverse/lens/custom-types'
+import { Button, Input } from '@dragverse/ui'
+import useAppStore from '@lib/store'
+import type { FC } from 'react'
+import { useState } from 'react'
 
 type Props = {
   setCollectType: (data: CollectModuleType) => void
diff --git a/apps/web/src/components/Create/CollectModule/FeeCollectForm.tsx b/apps/web/src/components/Create/CollectModule/FeeCollectForm.tsx
index e373fa79c..513963dbb 100644
--- a/apps/web/src/components/Create/CollectModule/FeeCollectForm.tsx
+++ b/apps/web/src/components/Create/CollectModule/FeeCollectForm.tsx
@@ -1,18 +1,18 @@
-import { WMATIC_TOKEN_ADDRESS } from '@dragverse/constants';
-import type { CollectModuleType } from '@dragverse/lens/custom-types';
-import { Button, Input, Select, SelectItem } from '@dragverse/ui';
-import { zodResolver } from '@hookform/resolvers/zod';
-import useAppStore from '@lib/store';
-import useProfileStore from '@lib/store/idb/profile';
-import useAllowedTokensStore from '@lib/store/idb/tokens';
-import type { Dispatch, FC } from 'react';
-import { useEffect, useRef, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { isAddress } from 'viem';
-import type { z } from 'zod';
-import { number, object, string } from 'zod';
+import { WMATIC_TOKEN_ADDRESS } from '@dragverse/constants'
+import type { CollectModuleType } from '@dragverse/lens/custom-types'
+import { Button, Input, Select, SelectItem } from '@dragverse/ui'
+import { zodResolver } from '@hookform/resolvers/zod'
+import useAppStore from '@lib/store'
+import useProfileStore from '@lib/store/idb/profile'
+import useAllowedTokensStore from '@lib/store/idb/tokens'
+import type { Dispatch, FC } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { isAddress } from 'viem'
+import type { z } from 'zod'
+import { number, object, string } from 'zod'
 
-import Splits from './Splits';
+import Splits from './Splits'
 
 type Props = {
   setCollectType: (data: CollectModuleType) => void
diff --git a/apps/web/src/components/Create/CollectModule/PermissionQuestion.tsx b/apps/web/src/components/Create/CollectModule/PermissionQuestion.tsx
index 9fa0fc3e3..358aa872d 100644
--- a/apps/web/src/components/Create/CollectModule/PermissionQuestion.tsx
+++ b/apps/web/src/components/Create/CollectModule/PermissionQuestion.tsx
@@ -1,8 +1,8 @@
-import { tw } from '@dragverse/browser';
-import type { CollectModuleType } from '@dragverse/lens/custom-types';
-import { Button } from '@dragverse/ui';
-import useAppStore from '@lib/store';
-import type { FC } from 'react';
+import { tw } from '@dragverse/browser'
+import type { CollectModuleType } from '@dragverse/lens/custom-types'
+import { Button } from '@dragverse/ui'
+import useAppStore from '@lib/store'
+import type { FC } from 'react'
 
 type Props = {
   setCollectType: (data: CollectModuleType) => void
diff --git a/apps/web/src/components/Create/CollectModule/Splits.tsx b/apps/web/src/components/Create/CollectModule/Splits.tsx
index de6b1ecff..68cbeff88 100644
--- a/apps/web/src/components/Create/CollectModule/Splits.tsx
+++ b/apps/web/src/components/Create/CollectModule/Splits.tsx
@@ -1,31 +1,31 @@
-import { NoDataFound } from '@components/UIElements/NoDataFound';
-import ProfileSuggestion from '@components/UIElements/ProfileSuggestion';
-import { tw, useDebounce, useOutsideClick } from '@dragverse/browser';
+import { NoDataFound } from '@components/UIElements/NoDataFound'
+import ProfileSuggestion from '@components/UIElements/ProfileSuggestion'
+import { tw, useDebounce, useOutsideClick } from '@dragverse/browser'
 import {
-    DRAGVERSE_ADMIN_ADDRESS,
-    LENS_CUSTOM_FILTERS,
-    LENS_NAMESPACE_PREFIX,
-    TAPE_APP_NAME
-} from '@dragverse/constants';
+  DRAGVERSE_ADMIN_ADDRESS,
+  LENS_CUSTOM_FILTERS,
+  LENS_NAMESPACE_PREFIX,
+  TAPE_APP_NAME
+} from '@dragverse/constants'
 import {
-    getProfile,
-    getProfilePicture,
-    splitNumber,
-    trimify
-} from '@dragverse/generic';
-import type { Profile, RecipientDataInput } from '@dragverse/lens';
-import { LimitType, useSearchProfilesLazyQuery } from '@dragverse/lens';
+  getProfile,
+  getProfilePicture,
+  splitNumber,
+  trimify
+} from '@dragverse/generic'
+import type { Profile, RecipientDataInput } from '@dragverse/lens'
+import { LimitType, useSearchProfilesLazyQuery } from '@dragverse/lens'
 import {
-    InfoOutline,
-    Input,
-    Spinner,
-    TimesOutline,
-    Tooltip
-} from '@dragverse/ui';
-import useAppStore from '@lib/store';
-import type { FC, RefObject } from 'react';
-import { useEffect, useRef, useState } from 'react';
-import { isAddress } from 'viem';
+  InfoOutline,
+  Input,
+  Spinner,
+  TimesOutline,
+  Tooltip
+} from '@dragverse/ui'
+import useAppStore from '@lib/store'
+import type { FC, RefObject } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import { isAddress } from 'viem'
 
 type Props = {
   submitContainerRef: RefObject<HTMLDivElement>
@@ -181,7 +181,7 @@ const Splits: FC<Props> = ({ submitContainerRef }) => {
             !getIsValidAddress(splitRecipients[i].recipient) ? (
               <div
                 ref={resultsRef}
-                className="tape-border z-10 mt-1 w-full overflow-hidden rounded-md bg-white focus:outline-none md:absolute dark:bg-brand-850"
+                className="tape-border dark:bg-brand-850 z-10 mt-1 w-full overflow-hidden rounded-md bg-white focus:outline-none md:absolute"
               >
                 {profilesLoading && <Spinner className="my-4" />}
                 {!profiles?.length && !profilesLoading ? (
diff --git a/apps/web/src/components/Create/CollectModule/index.tsx b/apps/web/src/components/Create/CollectModule/index.tsx
index b094e6489..a55834c20 100644
--- a/apps/web/src/components/Create/CollectModule/index.tsx
+++ b/apps/web/src/components/Create/CollectModule/index.tsx
@@ -1,5 +1,5 @@
-import { EVENTS, Tower } from '@dragverse/generic';
-import type { CollectModuleType } from '@dragverse/lens/custom-types';
+import { EVENTS, Tower } from '@dragverse/generic'
+import type { CollectModuleType } from '@dragverse/lens/custom-types'
 import {
   Button,
   Checkbox,
@@ -7,16 +7,16 @@ import {
   Modal,
   SplitOutline,
   Tooltip
-} from '@dragverse/ui';
-import useAppStore from '@lib/store';
-import useCollectStore from '@lib/store/idb/collect';
-import { useState } from 'react';
+} from '@dragverse/ui'
+import useAppStore from '@lib/store'
+import useCollectStore from '@lib/store/idb/collect'
+import { useState } from 'react'
 
-import ChargeQuestion from './ChargeQuestion';
-import CollectDuration from './CollectDuration';
-import EditionSize from './EditionSize';
-import FeeCollectForm from './FeeCollectForm';
-import PermissionQuestion from './PermissionQuestion';
+import ChargeQuestion from './ChargeQuestion'
+import CollectDuration from './CollectDuration'
+import EditionSize from './EditionSize'
+import FeeCollectForm from './FeeCollectForm'
+import PermissionQuestion from './PermissionQuestion'
 
 const CollectModule = () => {
   const [showModal, setShowModal] = useState(false)
diff --git a/apps/web/src/components/Create/Details.tsx b/apps/web/src/components/Create/Details.tsx
index ffe926bef..c51bd2449 100644
--- a/apps/web/src/components/Create/Details.tsx
+++ b/apps/web/src/components/Create/Details.tsx
@@ -1,24 +1,24 @@
-import EmojiPicker from '@components/UIElements/EmojiPicker';
-import InputMentions from '@components/UIElements/InputMentions';
-import { getFileFromDataURL, tw, uploadToIPFS } from '@dragverse/browser';
-import { checkIsBytesVideo } from '@dragverse/generic';
-import type { IPFSUploadResult } from '@dragverse/lens/custom-types';
-import { Button, Switch, Tooltip } from '@dragverse/ui';
-import { zodResolver } from '@hookform/resolvers/zod';
-import useAppStore from '@lib/store';
-import useCollectStore from '@lib/store/idb/collect';
-import type { FC } from 'react';
-import { useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
-import type { z } from 'zod';
-import { boolean, object, string } from 'zod';
+import EmojiPicker from '@components/UIElements/EmojiPicker'
+import InputMentions from '@components/UIElements/InputMentions'
+import { getFileFromDataURL, tw, uploadToIPFS } from '@dragverse/browser'
+import { checkIsBytesVideo } from '@dragverse/generic'
+import type { IPFSUploadResult } from '@dragverse/lens/custom-types'
+import { Button, Switch, Tooltip } from '@dragverse/ui'
+import { zodResolver } from '@hookform/resolvers/zod'
+import useAppStore from '@lib/store'
+import useCollectStore from '@lib/store/idb/collect'
+import type { FC } from 'react'
+import { useForm } from 'react-hook-form'
+import { toast } from 'react-hot-toast'
+import type { z } from 'zod'
+import { boolean, object, string } from 'zod'
 
-import CollectModule from './CollectModule';
-import DropZone from './DropZone';
-import MediaCategory from './MediaCategory';
-import MediaLicense from './MediaLicense';
-import ReferenceModule from './ReferenceModule';
-import SelectedMedia from './SelectedMedia';
+import CollectModule from './CollectModule'
+import DropZone from './DropZone'
+import MediaCategory from './MediaCategory'
+import MediaLicense from './MediaLicense'
+import ReferenceModule from './ReferenceModule'
+import SelectedMedia from './SelectedMedia'
 
 const formSchema = object({
   title: string()
diff --git a/apps/web/src/components/Create/DropZone.tsx b/apps/web/src/components/Create/DropZone.tsx
index d6ffc32df..0dee1257c 100644
--- a/apps/web/src/components/Create/DropZone.tsx
+++ b/apps/web/src/components/Create/DropZone.tsx
@@ -1,17 +1,17 @@
-import { tw, useDragAndDrop } from '@dragverse/browser';
+import { tw, useDragAndDrop } from '@dragverse/browser'
 import {
   ALLOWED_AUDIO_MIME_TYPES,
   ALLOWED_UPLOAD_MIME_TYPES,
   CREATOR_VIDEO_CATEGORIES
-} from '@dragverse/constants';
-import { canUploadedToIpfs, logger } from '@dragverse/generic';
-import { Button, UploadOutline } from '@dragverse/ui';
-import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork';
-import useAppStore from '@lib/store';
-import useProfileStore from '@lib/store/idb/profile';
-import fileReaderStream from 'filereader-stream';
-import React from 'react';
-import toast from 'react-hot-toast';
+} from '@dragverse/constants'
+import { canUploadedToIpfs, logger } from '@dragverse/generic'
+import { Button, UploadOutline } from '@dragverse/ui'
+import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork'
+import useAppStore from '@lib/store'
+import useProfileStore from '@lib/store/idb/profile'
+import fileReaderStream from 'filereader-stream'
+import React from 'react'
+import toast from 'react-hot-toast'
 
 const DropZone = () => {
   const setUploadedMedia = useAppStore((state) => state.setUploadedMedia)
diff --git a/apps/web/src/components/Create/IrysInfo.tsx b/apps/web/src/components/Create/IrysInfo.tsx
index 3c9357c83..0afed2b10 100644
--- a/apps/web/src/components/Create/IrysInfo.tsx
+++ b/apps/web/src/components/Create/IrysInfo.tsx
@@ -1,6 +1,6 @@
-import { useIsMounted } from '@dragverse/browser';
-import { IRYS_CURRENCY, POLYGON_CHAIN_ID } from '@dragverse/constants';
-import { EVENTS, Tower, logger } from '@dragverse/generic';
+import { useIsMounted } from '@dragverse/browser'
+import { IRYS_CURRENCY, POLYGON_CHAIN_ID } from '@dragverse/constants'
+import { EVENTS, logger, Tower } from '@dragverse/generic'
 import {
   Button,
   Callout,
@@ -10,13 +10,13 @@ import {
   RefreshOutline,
   Tooltip,
   WarningOutline
-} from '@dragverse/ui';
-import type { WebIrys } from '@irys/sdk';
-import useAppStore from '@lib/store';
-import { useEffect, useState } from 'react';
-import toast from 'react-hot-toast';
-import { formatEther, formatGwei, formatUnits } from 'viem';
-import { useAccount, useBalance, useWalletClient } from 'wagmi';
+} from '@dragverse/ui'
+import type { WebIrys } from '@irys/sdk'
+import useAppStore from '@lib/store'
+import { useEffect, useState } from 'react'
+import toast from 'react-hot-toast'
+import { formatEther, formatGwei, formatUnits } from 'viem'
+import { useAccount, useBalance, useWalletClient } from 'wagmi'
 
 const IrysInfo = () => {
   const isMounted = useIsMounted()
diff --git a/apps/web/src/components/Create/MediaCategory.tsx b/apps/web/src/components/Create/MediaCategory.tsx
index a27b57af5..e58a92ad6 100644
--- a/apps/web/src/components/Create/MediaCategory.tsx
+++ b/apps/web/src/components/Create/MediaCategory.tsx
@@ -1,7 +1,7 @@
-import { CREATOR_VIDEO_CATEGORIES } from '@dragverse/constants';
-import { getCategoryByTag } from '@dragverse/generic';
-import { Select, SelectItem } from '@dragverse/ui';
-import useAppStore from '@lib/store';
+import { CREATOR_VIDEO_CATEGORIES } from '@dragverse/constants'
+import { getCategoryByTag } from '@dragverse/generic'
+import { Select, SelectItem } from '@dragverse/ui'
+import useAppStore from '@lib/store'
 
 const MediaCategory = () => {
   const uploadedMedia = useAppStore((state) => state.uploadedMedia)
diff --git a/apps/web/src/components/Create/MediaLicense.tsx b/apps/web/src/components/Create/MediaLicense.tsx
index 00a38c211..41d4d70a0 100644
--- a/apps/web/src/components/Create/MediaLicense.tsx
+++ b/apps/web/src/components/Create/MediaLicense.tsx
@@ -1,6 +1,6 @@
-import { Select, SelectItem } from '@dragverse/ui';
-import { MetadataLicenseType } from '@lens-protocol/metadata';
-import useAppStore from '@lib/store';
+import { Select, SelectItem } from '@dragverse/ui'
+import { MetadataLicenseType } from '@lens-protocol/metadata'
+import useAppStore from '@lib/store'
 
 const MediaLicense = () => {
   const uploadedMedia = useAppStore((state) => state.uploadedMedia)
diff --git a/apps/web/src/components/Create/ReferenceModule/index.tsx b/apps/web/src/components/Create/ReferenceModule/index.tsx
index a9a7bcce5..77e95b35e 100644
--- a/apps/web/src/components/Create/ReferenceModule/index.tsx
+++ b/apps/web/src/components/Create/ReferenceModule/index.tsx
@@ -1,6 +1,6 @@
-import type { ReferenceModuleType } from '@dragverse/lens/custom-types';
-import { Select, SelectItem } from '@dragverse/ui';
-import useAppStore from '@lib/store';
+import type { ReferenceModuleType } from '@dragverse/lens/custom-types'
+import { Select, SelectItem } from '@dragverse/ui'
+import useAppStore from '@lib/store'
 
 const ReferenceModule = () => {
   const uploadedMedia = useAppStore((state) => state.uploadedMedia)
diff --git a/apps/web/src/components/Create/SelectedMedia.tsx b/apps/web/src/components/Create/SelectedMedia.tsx
index e8c8cd251..fd795264f 100644
--- a/apps/web/src/components/Create/SelectedMedia.tsx
+++ b/apps/web/src/components/Create/SelectedMedia.tsx
@@ -1,19 +1,19 @@
-import { tw, uploadToIPFS } from '@dragverse/browser';
-import { ALLOWED_AUDIO_MIME_TYPES, FEATURE_FLAGS } from '@dragverse/constants';
+import { tw, uploadToIPFS } from '@dragverse/browser'
+import { ALLOWED_AUDIO_MIME_TYPES, FEATURE_FLAGS } from '@dragverse/constants'
 import {
-    formatBytes,
-    getIsFeatureEnabled,
-    sanitizeDStorageUrl
-} from '@dragverse/generic';
-import type { IPFSUploadResult } from '@dragverse/lens/custom-types';
-import { AddImageOutline, Badge, Input, Spinner, Tooltip } from '@dragverse/ui';
-import { getTimeFromSeconds } from '@lib/formatTime';
-import useAppStore from '@lib/store';
-import useProfileStore from '@lib/store/idb/profile';
-import { useEffect, useRef, useState } from 'react';
+  formatBytes,
+  getIsFeatureEnabled,
+  sanitizeDStorageUrl
+} from '@dragverse/generic'
+import type { IPFSUploadResult } from '@dragverse/lens/custom-types'
+import { AddImageOutline, Badge, Input, Spinner, Tooltip } from '@dragverse/ui'
+import { getTimeFromSeconds } from '@lib/formatTime'
+import useAppStore from '@lib/store'
+import useProfileStore from '@lib/store/idb/profile'
+import { useEffect, useRef, useState } from 'react'
 
-import ChooseThumbnail from './ChooseThumbnail';
-import UploadMethod from './UploadMethod';
+import ChooseThumbnail from './ChooseThumbnail'
+import UploadMethod from './UploadMethod'
 
 const SelectedMedia = () => {
   const mediaRef = useRef<HTMLVideoElement>(null)
@@ -66,7 +66,7 @@ const SelectedMedia = () => {
               <label
                 htmlFor="choosePoster"
                 className={tw(
-                  'rounded-small invisible absolute top-0 grid h-full w-full cursor-pointer place-items-center overflow-hidden bg-gray-100 bg-opacity-70 backdrop-blur-lg group-hover:visible dark:bg-brand-850',
+                  'rounded-small dark:bg-brand-850 invisible absolute top-0 grid h-full w-full cursor-pointer place-items-center overflow-hidden bg-gray-100 bg-opacity-70 backdrop-blur-lg group-hover:visible',
                   {
                     '!visible':
                       uploadedMedia.uploadingThumbnail ||
diff --git a/apps/web/src/components/Create/UploadMethod.tsx b/apps/web/src/components/Create/UploadMethod.tsx
index 52eed7a3b..dd0174a84 100644
--- a/apps/web/src/components/Create/UploadMethod.tsx
+++ b/apps/web/src/components/Create/UploadMethod.tsx
@@ -1,9 +1,9 @@
-import { canUploadedToIpfs } from '@dragverse/generic';
-import useAppStore from '@lib/store';
-import useProfileStore from '@lib/store/idb/profile';
-import { useEffect } from 'react';
+import { canUploadedToIpfs } from '@dragverse/generic'
+import useAppStore from '@lib/store'
+import useProfileStore from '@lib/store/idb/profile'
+import { useEffect } from 'react'
 
-import IrysInfo from './IrysInfo';
+import IrysInfo from './IrysInfo'
 
 const UploadMethod = () => {
   const uploadedMedia = useAppStore((state) => state.uploadedMedia)
diff --git a/apps/web/src/components/Create/index.tsx b/apps/web/src/components/Create/index.tsx
index b131dc207..ab8ac8e3a 100644
--- a/apps/web/src/components/Create/index.tsx
+++ b/apps/web/src/components/Create/index.tsx
@@ -1,6 +1,6 @@
-import MetaTags from '@components/Common/MetaTags';
-import { LENSHUB_PROXY_ABI } from '@dragverse/abis';
-import { getUserLocale, uploadToIPFS } from '@dragverse/browser';
+import MetaTags from '@components/Common/MetaTags'
+import { LENSHUB_PROXY_ABI } from '@dragverse/abis'
+import { getUserLocale, uploadToIPFS } from '@dragverse/browser'
 import {
   ERROR_MESSAGE,
   IRYS_CONNECT_MESSAGE,
@@ -9,68 +9,68 @@ import {
   TAPE_APP_ID,
   TAPE_APP_NAME,
   TAPE_WEBSITE_URL
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import {
-  EVENTS,
-  Tower,
   canUploadedToIpfs,
   checkLensManagerPermissions,
+  EVENTS,
   getProfile,
   getSignature,
   getUploadedMediaType,
   logger,
+  Tower,
   trimify,
   uploadToAr
-} from '@dragverse/generic';
+} from '@dragverse/generic'
 import type {
   CreateMomokaPostEip712TypedData,
   CreateOnchainPostEip712TypedData,
   OnchainPostRequest,
   Profile,
   ReferenceModuleInput
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import {
   ReferenceModuleType,
-  useBroadcastOnMomokaMutation,
   useBroadcastOnchainMutation,
+  useBroadcastOnMomokaMutation,
   useCreateMomokaPostTypedDataMutation,
   useCreateOnchainPostTypedDataMutation,
-  usePostOnMomokaMutation,
-  usePostOnchainMutation
-} from '@dragverse/lens';
-import type { CustomErrorWithData } from '@dragverse/lens/custom-types';
+  usePostOnchainMutation,
+  usePostOnMomokaMutation
+} from '@dragverse/lens'
+import type { CustomErrorWithData } from '@dragverse/lens/custom-types'
 import type {
   AudioOptions,
   MediaAudioMimeType,
   MediaVideoMimeType,
   MetadataAttribute,
   VideoOptions
-} from '@lens-protocol/metadata';
+} from '@lens-protocol/metadata'
 import {
+  audio,
   MetadataAttributeType,
   PublicationContentWarning,
-  audio,
   shortVideo,
   video
-} from '@lens-protocol/metadata';
-import { getCollectModuleInput } from '@lib/getCollectModuleInput';
-import useAppStore, { UPLOADED_VIDEO_FORM_DEFAULTS } from '@lib/store';
-import useProfileStore from '@lib/store/idb/profile';
-import useNonceStore from '@lib/store/nonce';
-import usePersistStore from '@lib/store/persist';
-import { useRouter } from 'next/router';
-import { useEffect } from 'react';
-import toast from 'react-hot-toast';
-import { v4 as uuidv4 } from 'uuid';
+} from '@lens-protocol/metadata'
+import { getCollectModuleInput } from '@lib/getCollectModuleInput'
+import useAppStore, { UPLOADED_VIDEO_FORM_DEFAULTS } from '@lib/store'
+import useProfileStore from '@lib/store/idb/profile'
+import useNonceStore from '@lib/store/nonce'
+import usePersistStore from '@lib/store/persist'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import toast from 'react-hot-toast'
+import { v4 as uuidv4 } from 'uuid'
 import {
   useAccount,
   useSignTypedData,
   useWalletClient,
   useWriteContract
-} from 'wagmi';
+} from 'wagmi'
 
-import type { VideoFormData } from './Details';
-import Details from './Details';
+import type { VideoFormData } from './Details'
+import Details from './Details'
 
 const CreateSteps = () => {
   const getIrysInstance = useAppStore((state) => state.getIrysInstance)
diff --git a/apps/web/src/components/Explore/Category/index.tsx b/apps/web/src/components/Explore/Category/index.tsx
index ee52e50d0..d85e48925 100644
--- a/apps/web/src/components/Explore/Category/index.tsx
+++ b/apps/web/src/components/Explore/Category/index.tsx
@@ -1,7 +1,7 @@
-import MetaTags from '@components/Common/MetaTags';
-import Timeline from '@components/Home/Timeline';
-import TimelineShimmer from '@components/Shimmers/TimelineShimmer';
-import { NoDataFound } from '@components/UIElements/NoDataFound';
+import MetaTags from '@components/Common/MetaTags'
+import Timeline from '@components/Home/Timeline'
+import TimelineShimmer from '@components/Shimmers/TimelineShimmer'
+import { NoDataFound } from '@components/UIElements/NoDataFound'
 import {
   ALLOWED_APP_IDS,
   INFINITE_SCROLL_ROOT_MARGIN,
@@ -9,24 +9,24 @@ import {
   LENS_CUSTOM_FILTERS,
   LENSTUBE_BYTES_APP_ID,
   TAPE_APP_ID
-} from '@dragverse/constants';
-import { getCategoryName } from '@dragverse/generic';
+} from '@dragverse/constants'
+import { getCategoryName } from '@dragverse/generic'
 import type {
   ExplorePublicationRequest,
   PrimaryPublication
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import {
   ExplorePublicationsOrderByType,
   ExplorePublicationType,
   LimitType,
   PublicationMetadataMainFocusType,
   useExplorePublicationsQuery
-} from '@dragverse/lens';
-import { Spinner } from '@dragverse/ui';
-import { getUnixTimestampForDaysAgo } from '@lib/formatTime';
-import { useRouter } from 'next/router';
-import { useInView } from 'react-cool-inview';
-import Custom404 from 'src/pages/404';
+} from '@dragverse/lens'
+import { Spinner } from '@dragverse/ui'
+import { getUnixTimestampForDaysAgo } from '@lib/formatTime'
+import { useRouter } from 'next/router'
+import { useInView } from 'react-cool-inview'
+import Custom404 from 'src/pages/404'
 
 const since = getUnixTimestampForDaysAgo(30)
 
diff --git a/apps/web/src/components/Explore/Feed.tsx b/apps/web/src/components/Explore/Feed.tsx
index 2bc970985..71303de1e 100644
--- a/apps/web/src/components/Explore/Feed.tsx
+++ b/apps/web/src/components/Explore/Feed.tsx
@@ -1,7 +1,7 @@
-import Timeline from '@components/Home/Timeline';
-import TimelineShimmer from '@components/Shimmers/TimelineShimmer';
-import { NoDataFound } from '@components/UIElements/NoDataFound';
-import { tw } from '@dragverse/browser';
+import Timeline from '@components/Home/Timeline'
+import TimelineShimmer from '@components/Shimmers/TimelineShimmer'
+import { NoDataFound } from '@components/UIElements/NoDataFound'
+import { tw } from '@dragverse/browser'
 import {
   ALLOWED_APP_IDS,
   INFINITE_SCROLL_ROOT_MARGIN,
@@ -9,30 +9,30 @@ import {
   LENS_CUSTOM_FILTERS,
   LENSTUBE_BYTES_APP_ID,
   TAPE_APP_ID
-} from '@dragverse/constants';
-import { EVENTS, Tower } from '@dragverse/generic';
+} from '@dragverse/constants'
+import { EVENTS, Tower } from '@dragverse/generic'
 import type {
   ExplorePublicationRequest,
   PrimaryPublication
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import {
   ExplorePublicationsOrderByType,
   ExplorePublicationType,
   LimitType,
   PublicationMetadataMainFocusType,
   useExplorePublicationsQuery
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import {
   Button,
   CommentOutline,
   FireOutline,
   MirrorOutline,
   Spinner
-} from '@dragverse/ui';
-import { getUnixTimestampForDaysAgo } from '@lib/formatTime';
-import useAppStore from '@lib/store';
-import { useState } from 'react';
-import { useInView } from 'react-cool-inview';
+} from '@dragverse/ui'
+import { getUnixTimestampForDaysAgo } from '@lib/formatTime'
+import useAppStore from '@lib/store'
+import { useState } from 'react'
+import { useInView } from 'react-cool-inview'
 
 const initialCriteria = {
   trending: true,
diff --git a/apps/web/src/components/Explore/Hashtag/index.tsx b/apps/web/src/components/Explore/Hashtag/index.tsx
index e1c8ca662..e3c9f19b9 100644
--- a/apps/web/src/components/Explore/Hashtag/index.tsx
+++ b/apps/web/src/components/Explore/Hashtag/index.tsx
@@ -1,7 +1,7 @@
-import MetaTags from '@components/Common/MetaTags';
-import Timeline from '@components/Home/Timeline';
-import TimelineShimmer from '@components/Shimmers/TimelineShimmer';
-import { NoDataFound } from '@components/UIElements/NoDataFound';
+import MetaTags from '@components/Common/MetaTags'
+import Timeline from '@components/Home/Timeline'
+import TimelineShimmer from '@components/Shimmers/TimelineShimmer'
+import { NoDataFound } from '@components/UIElements/NoDataFound'
 import {
   ALLOWED_APP_IDS,
   INFINITE_SCROLL_ROOT_MARGIN,
@@ -9,20 +9,20 @@ import {
   LENS_CUSTOM_FILTERS,
   LENSTUBE_BYTES_APP_ID,
   TAPE_APP_ID
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import type {
   PrimaryPublication,
   PublicationSearchRequest
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import {
   LimitType,
   PublicationMetadataMainFocusType,
   useSearchPublicationsQuery
-} from '@dragverse/lens';
-import { Spinner } from '@dragverse/ui';
-import { useRouter } from 'next/router';
-import { useInView } from 'react-cool-inview';
-import Custom404 from 'src/pages/404';
+} from '@dragverse/lens'
+import { Spinner } from '@dragverse/ui'
+import { useRouter } from 'next/router'
+import { useInView } from 'react-cool-inview'
+import Custom404 from 'src/pages/404'
 
 const ExploreHashtag = () => {
   const { query } = useRouter()
diff --git a/apps/web/src/components/Explore/index.tsx b/apps/web/src/components/Explore/index.tsx
index 5ecaac6c7..919209650 100644
--- a/apps/web/src/components/Explore/index.tsx
+++ b/apps/web/src/components/Explore/index.tsx
@@ -1,9 +1,9 @@
-import CategoryFilters from '@components/Common/CategoryFilters';
-import MetaTags from '@components/Common/MetaTags';
-import { EVENTS, Tower } from '@dragverse/generic';
-import { useEffect } from 'react';
+import CategoryFilters from '@components/Common/CategoryFilters'
+import MetaTags from '@components/Common/MetaTags'
+import { EVENTS, Tower } from '@dragverse/generic'
+import { useEffect } from 'react'
 
-import ExploreFeed from './Feed';
+import ExploreFeed from './Feed'
 
 const Explore = () => {
   useEffect(() => {
diff --git a/apps/web/src/components/Feed/index.tsx b/apps/web/src/components/Feed/index.tsx
index 242a2da17..60f0a1ee2 100644
--- a/apps/web/src/components/Feed/index.tsx
+++ b/apps/web/src/components/Feed/index.tsx
@@ -1,27 +1,27 @@
-import CategoryFilters from '@components/Common/CategoryFilters';
-import MetaTags from '@components/Common/MetaTags';
-import VideoCard from '@components/Common/VideoCard';
-import TimelineShimmer from '@components/Shimmers/TimelineShimmer';
-import { NoDataFound } from '@components/UIElements/NoDataFound';
+import CategoryFilters from '@components/Common/CategoryFilters'
+import MetaTags from '@components/Common/MetaTags'
+import VideoCard from '@components/Common/VideoCard'
+import TimelineShimmer from '@components/Shimmers/TimelineShimmer'
+import { NoDataFound } from '@components/UIElements/NoDataFound'
 import {
   INFINITE_SCROLL_ROOT_MARGIN,
   LENSTUBE_APP_ID,
   LENSTUBE_BYTES_APP_ID,
   TAPE_APP_ID
-} from '@dragverse/constants';
-import { EVENTS, Tower } from '@dragverse/generic';
-import type { FeedItem, FeedRequest, PrimaryPublication } from '@dragverse/lens';
+} from '@dragverse/constants'
+import { EVENTS, Tower } from '@dragverse/generic'
+import type { FeedItem, FeedRequest, PrimaryPublication } from '@dragverse/lens'
 import {
   FeedEventItemType,
   PublicationMetadataMainFocusType,
   useFeedQuery
-} from '@dragverse/lens';
-import { Spinner } from '@dragverse/ui';
-import useAppStore from '@lib/store';
-import useProfileStore from '@lib/store/idb/profile';
-import { useEffect } from 'react';
-import { useInView } from 'react-cool-inview';
-import Custom500 from 'src/pages/500';
+} from '@dragverse/lens'
+import { Spinner } from '@dragverse/ui'
+import useAppStore from '@lib/store'
+import useProfileStore from '@lib/store/idb/profile'
+import { useEffect } from 'react'
+import { useInView } from 'react-cool-inview'
+import Custom500 from 'src/pages/500'
 
 const Feed = () => {
   const { activeProfile } = useProfileStore()
diff --git a/apps/web/src/components/Home/Feed.tsx b/apps/web/src/components/Home/Feed.tsx
index 72e3d8956..01d296578 100644
--- a/apps/web/src/components/Home/Feed.tsx
+++ b/apps/web/src/components/Home/Feed.tsx
@@ -1,29 +1,29 @@
-import CategoryFilters from '@components/Common/CategoryFilters';
-import Timeline from '@components/Home/Timeline';
-import TimelineShimmer from '@components/Shimmers/TimelineShimmer';
-import { NoDataFound } from '@components/UIElements/NoDataFound';
+import CategoryFilters from '@components/Common/CategoryFilters'
+import Timeline from '@components/Home/Timeline'
+import TimelineShimmer from '@components/Shimmers/TimelineShimmer'
+import { NoDataFound } from '@components/UIElements/NoDataFound'
 import {
   ALLOWED_APP_IDS,
   INFINITE_SCROLL_ROOT_MARGIN,
   IS_MAINNET,
   LENS_CUSTOM_FILTERS,
   TAPE_APP_ID
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import type {
   ExplorePublicationRequest,
   PrimaryPublication
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import {
-  ExplorePublicationType,
   ExplorePublicationsOrderByType,
+  ExplorePublicationType,
   LimitType,
   PublicationMetadataMainFocusType,
   useExplorePublicationsQuery
-} from '@dragverse/lens';
-import { Spinner } from '@dragverse/ui';
-import { getUnixTimestampForDaysAgo } from '@lib/formatTime';
-import useAppStore from '@lib/store';
-import { useInView } from 'react-cool-inview';
+} from '@dragverse/lens'
+import { Spinner } from '@dragverse/ui'
+import { getUnixTimestampForDaysAgo } from '@lib/formatTime'
+import useAppStore from '@lib/store'
+import { useInView } from 'react-cool-inview'
 
 const since = getUnixTimestampForDaysAgo(30)
 
diff --git a/apps/web/src/components/Home/GitcoinAlert.tsx b/apps/web/src/components/Home/GitcoinAlert.tsx
index 06fd9c7fe..d647d0284 100644
--- a/apps/web/src/components/Home/GitcoinAlert.tsx
+++ b/apps/web/src/components/Home/GitcoinAlert.tsx
@@ -2,9 +2,9 @@ import {
   GITCOIN_LIVE_ROUND,
   SHOW_GITCOIN_BANNER,
   TAPE_APP_NAME
-} from '@dragverse/constants';
-import { Button } from '@dragverse/ui';
-import Link from 'next/link';
+} from '@dragverse/constants'
+import { Button } from '@dragverse/ui'
+import Link from 'next/link'
 
 const GitcoinAlert = () => {
   if (!SHOW_GITCOIN_BANNER) {
diff --git a/apps/web/src/components/Home/JoinWaitlist.tsx b/apps/web/src/components/Home/JoinWaitlist.tsx
index 319604110..4686af10b 100644
--- a/apps/web/src/components/Home/JoinWaitlist.tsx
+++ b/apps/web/src/components/Home/JoinWaitlist.tsx
@@ -1,6 +1,6 @@
-import { STATIC_ASSETS } from '@dragverse/constants';
-import { Button } from '@dragverse/ui';
-import Link from 'next/link';
+import { STATIC_ASSETS } from '@dragverse/constants'
+import { Button } from '@dragverse/ui'
+import Link from 'next/link'
 
 const JoinWaitlist = () => {
   return (
diff --git a/apps/web/src/components/Home/LatestBytes.tsx b/apps/web/src/components/Home/LatestBytes.tsx
index 4f94f9a7a..ae630bb8c 100644
--- a/apps/web/src/components/Home/LatestBytes.tsx
+++ b/apps/web/src/components/Home/LatestBytes.tsx
@@ -1,7 +1,6 @@
 import Badge from '@components/Common/Badge'
 import HoverableProfile from '@components/Common/HoverableProfile'
 import LatestBytesShimmer from '@components/Shimmers/LatestBytesShimmer'
-import { getUnixTimestampForDaysAgo } from '@lib/formatTime'
 import {
   FALLBACK_THUMBNAIL_URL,
   LENS_CUSTOM_FILTERS,
@@ -26,6 +25,7 @@ import {
   PublicationMetadataMainFocusType,
   useExplorePublicationsQuery
 } from '@dragverse/lens'
+import { getUnixTimestampForDaysAgo } from '@lib/formatTime'
 import Link from 'next/link'
 
 const since = getUnixTimestampForDaysAgo(30)
diff --git a/apps/web/src/components/Home/LensManagerAlert.tsx b/apps/web/src/components/Home/LensManagerAlert.tsx
index f6a7e6038..621322e6a 100644
--- a/apps/web/src/components/Home/LensManagerAlert.tsx
+++ b/apps/web/src/components/Home/LensManagerAlert.tsx
@@ -1,12 +1,12 @@
-import ToggleLensManager from '@components/Settings/Manager/LensManager/ToggleLensManager';
-import SignalWaveGraphic from '@components/UIElements/SignalWaveGraphic';
-import { TAPE_APP_NAME } from '@dragverse/constants';
+import ToggleLensManager from '@components/Settings/Manager/LensManager/ToggleLensManager'
+import SignalWaveGraphic from '@components/UIElements/SignalWaveGraphic'
+import { TAPE_APP_NAME } from '@dragverse/constants'
 import {
   checkLensManagerPermissions,
   getIsProfileOwner
-} from '@dragverse/generic';
-import useProfileStore from '@lib/store/idb/profile';
-import { useAccount } from 'wagmi';
+} from '@dragverse/generic'
+import useProfileStore from '@lib/store/idb/profile'
+import { useAccount } from 'wagmi'
 
 const LensManagerAlert = () => {
   const { address } = useAccount()
diff --git a/apps/web/src/components/Home/TopSection.tsx b/apps/web/src/components/Home/TopSection.tsx
index 8563926f8..f92c9a489 100644
--- a/apps/web/src/components/Home/TopSection.tsx
+++ b/apps/web/src/components/Home/TopSection.tsx
@@ -1,11 +1,11 @@
-import HorizontalScroller from '@components/Common/HorizontalScroller';
-import useProfileStore from '@lib/store/idb/profile';
-import { useRef } from 'react';
+import HorizontalScroller from '@components/Common/HorizontalScroller'
+import useProfileStore from '@lib/store/idb/profile'
+import { useRef } from 'react'
 
-import GitcoinAlert from './GitcoinAlert';
-import LatestBytes from './LatestBytes';
-import LensManagerAlert from './LensManagerAlert';
-import WelcomeAlert from './WelcomeAlert';
+import GitcoinAlert from './GitcoinAlert'
+import LatestBytes from './LatestBytes'
+import LensManagerAlert from './LensManagerAlert'
+import WelcomeAlert from './WelcomeAlert'
 
 const TopSection = () => {
   const sectionRef = useRef<HTMLDivElement>(null)
diff --git a/apps/web/src/components/Home/WelcomeAlert.tsx b/apps/web/src/components/Home/WelcomeAlert.tsx
index fc75503d1..d3c450b9f 100644
--- a/apps/web/src/components/Home/WelcomeAlert.tsx
+++ b/apps/web/src/components/Home/WelcomeAlert.tsx
@@ -1,6 +1,6 @@
-import { STATIC_ASSETS, TAPE_APP_NAME } from '@dragverse/constants';
-import { Button } from '@dragverse/ui';
-import Link from 'next/link';
+import { STATIC_ASSETS, TAPE_APP_NAME } from '@dragverse/constants'
+import { Button } from '@dragverse/ui'
+import Link from 'next/link'
 
 const WelcomeAlert = () => {
   return (
diff --git a/apps/web/src/components/Listen/Audio.tsx b/apps/web/src/components/Listen/Audio.tsx
index d85c07c51..c4b3e6c35 100644
--- a/apps/web/src/components/Listen/Audio.tsx
+++ b/apps/web/src/components/Listen/Audio.tsx
@@ -1,4 +1,4 @@
-import HoverableProfile from '@components/Common/HoverableProfile';
+import HoverableProfile from '@components/Common/HoverableProfile'
 import {
   getProfile,
   getProfilePicture,
@@ -6,12 +6,12 @@ import {
   getThumbnailUrl,
   imageCdn,
   sanitizeDStorageUrl
-} from '@dragverse/generic';
-import type { PrimaryPublication } from '@dragverse/lens';
-import { AudioPlayer, PauseOutline, PlayOutline } from '@dragverse/ui';
-import { getReadableTimeFromSeconds } from '@lib/formatTime';
-import type { FC } from 'react';
-import { useState } from 'react';
+} from '@dragverse/generic'
+import type { PrimaryPublication } from '@dragverse/lens'
+import { AudioPlayer, PauseOutline, PlayOutline } from '@dragverse/ui'
+import { getReadableTimeFromSeconds } from '@lib/formatTime'
+import type { FC } from 'react'
+import { useState } from 'react'
 
 type Props = {
   audio: PrimaryPublication
diff --git a/apps/web/src/components/Listen/index.tsx b/apps/web/src/components/Listen/index.tsx
index 80d758250..4480c7a4a 100644
--- a/apps/web/src/components/Listen/index.tsx
+++ b/apps/web/src/components/Listen/index.tsx
@@ -1,22 +1,22 @@
-import MetaTags from '@components/Common/MetaTags';
+import MetaTags from '@components/Common/MetaTags'
 import {
   EVENTS,
   getPublication,
   getPublicationData,
   isListenable,
   Tower
-} from '@dragverse/generic';
-import type { AnyPublication } from '@dragverse/lens';
-import { usePublicationQuery } from '@dragverse/lens';
-import { Spinner } from '@dragverse/ui';
-import { useRouter } from 'next/router';
-import { useEffect } from 'react';
-import Custom404 from 'src/pages/404';
-import Custom500 from 'src/pages/500';
+} from '@dragverse/generic'
+import type { AnyPublication } from '@dragverse/lens'
+import { usePublicationQuery } from '@dragverse/lens'
+import { Spinner } from '@dragverse/ui'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import Custom404 from 'src/pages/404'
+import Custom500 from 'src/pages/500'
 
-import Audio from './Audio';
-import Background from './Background';
-import Details from './Details';
+import Audio from './Audio'
+import Background from './Background'
+import Details from './Details'
 
 const Listen = () => {
   const {
diff --git a/apps/web/src/components/Login/Authenticate.tsx b/apps/web/src/components/Login/Authenticate.tsx
index 40ef8f4ae..5f164f85d 100644
--- a/apps/web/src/components/Login/Authenticate.tsx
+++ b/apps/web/src/components/Login/Authenticate.tsx
@@ -1,36 +1,36 @@
-import ButtonShimmer from '@components/Shimmers/ButtonShimmer';
-import { ERROR_MESSAGE } from '@dragverse/constants';
+import ButtonShimmer from '@components/Shimmers/ButtonShimmer'
+import { ERROR_MESSAGE } from '@dragverse/constants'
 import {
   EVENTS,
-  Tower,
   getProfile,
   getProfilePicture,
   logger,
-  shortenAddress
-} from '@dragverse/generic';
-import type { Profile } from '@dragverse/lens';
+  shortenAddress,
+  Tower
+} from '@dragverse/generic'
+import type { Profile } from '@dragverse/lens'
 import {
   LimitType,
   useAuthenticateMutation,
   useChallengeLazyQuery,
   useProfilesManagedQuery
-} from '@dragverse/lens';
-import { useApolloClient } from '@dragverse/lens/apollo';
+} from '@dragverse/lens'
+import { useApolloClient } from '@dragverse/lens/apollo'
 import {
   Button,
   Callout,
   Select,
   SelectItem,
   WarningOutline
-} from '@dragverse/ui';
-import { signIn, signOut } from '@lib/store/auth';
-import useProfileStore from '@lib/store/idb/profile';
-import { useRouter } from 'next/router';
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import toast from 'react-hot-toast';
-import { useAccount, useSignMessage } from 'wagmi';
-
-import Signup from './Signup';
+} from '@dragverse/ui'
+import { signIn, signOut } from '@lib/store/auth'
+import useProfileStore from '@lib/store/idb/profile'
+import { useRouter } from 'next/router'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import toast from 'react-hot-toast'
+import { useAccount, useSignMessage } from 'wagmi'
+
+import Signup from './Signup'
 
 const Authenticate = () => {
   const {
diff --git a/apps/web/src/components/Login/CardBorders.tsx b/apps/web/src/components/Login/CardBorders.tsx
index 910dff4cd..a18396154 100644
--- a/apps/web/src/components/Login/CardBorders.tsx
+++ b/apps/web/src/components/Login/CardBorders.tsx
@@ -1,4 +1,3 @@
-
 const CardBorders = () => {
   return (
     <>
diff --git a/apps/web/src/components/Login/Connectors.tsx b/apps/web/src/components/Login/Connectors.tsx
index 0f1c82958..d6f2fbd1f 100644
--- a/apps/web/src/components/Login/Connectors.tsx
+++ b/apps/web/src/components/Login/Connectors.tsx
@@ -1,12 +1,12 @@
-import { EVENTS, Tower } from '@dragverse/generic';
-import { Button, Callout, CheckOutline, WarningOutline } from '@dragverse/ui';
-import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork';
-import useProfileStore from '@lib/store/idb/profile';
-import { memo, useMemo } from 'react';
-import type { Connector } from 'wagmi';
-import { useAccount, useConnect } from 'wagmi';
+import { EVENTS, Tower } from '@dragverse/generic'
+import { Button, Callout, CheckOutline, WarningOutline } from '@dragverse/ui'
+import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork'
+import useProfileStore from '@lib/store/idb/profile'
+import { memo, useMemo } from 'react'
+import type { Connector } from 'wagmi'
+import { useAccount, useConnect } from 'wagmi'
 
-import Authenticate from './Authenticate';
+import Authenticate from './Authenticate'
 
 const Connectors = () => {
   const { activeProfile } = useProfileStore()
diff --git a/apps/web/src/components/Login/Signup.tsx b/apps/web/src/components/Login/Signup.tsx
index a0c7ac2b6..117c698b6 100644
--- a/apps/web/src/components/Login/Signup.tsx
+++ b/apps/web/src/components/Login/Signup.tsx
@@ -1,5 +1,5 @@
-import { TAPE_SIGNUP_PROXY_ABI } from '@dragverse/abis';
-import { useDebounce } from '@dragverse/browser';
+import { TAPE_SIGNUP_PROXY_ABI } from '@dragverse/abis'
+import { useDebounce } from '@dragverse/browser'
 import {
   COMMON_REGEX,
   ERROR_MESSAGE,
@@ -8,14 +8,14 @@ import {
   MOONPAY_URL,
   TAPE_SIGNUP_PROXY_ADDRESS,
   ZERO_ADDRESS
-} from '@dragverse/constants';
-import { EVENTS, Tower } from '@dragverse/generic';
+} from '@dragverse/constants'
+import { EVENTS, Tower } from '@dragverse/generic'
 import {
   useGenerateLensApiRelayAddressQuery,
   useHandleToAddressLazyQuery,
   useProfileLazyQuery
-} from '@dragverse/lens';
-import type { CustomErrorWithData } from '@dragverse/lens/custom-types';
+} from '@dragverse/lens'
+import type { CustomErrorWithData } from '@dragverse/lens/custom-types'
 import {
   Button,
   CheckOutline,
@@ -25,25 +25,25 @@ import {
   Spinner,
   TimesOutline,
   Tooltip
-} from '@dragverse/ui';
-import { zodResolver } from '@hookform/resolvers/zod';
-import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork';
-import usePendingTxn from '@hooks/usePendingTxn';
-import Link from 'next/link';
-import Script from 'next/script';
-import type { FC } from 'react';
-import React, { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import toast from 'react-hot-toast';
-import { formatUnits } from 'viem';
+} from '@dragverse/ui'
+import { zodResolver } from '@hookform/resolvers/zod'
+import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork'
+import usePendingTxn from '@hooks/usePendingTxn'
+import Link from 'next/link'
+import Script from 'next/script'
+import type { FC } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import toast from 'react-hot-toast'
+import { formatUnits } from 'viem'
 import {
   useAccount,
   useBalance,
   useReadContract,
   useWriteContract
-} from 'wagmi';
-import type { z } from 'zod';
-import { object, string } from 'zod';
+} from 'wagmi'
+import type { z } from 'zod'
+import { object, string } from 'zod'
 
 declare global {
   interface Window {
diff --git a/apps/web/src/components/Mod/Recents.tsx b/apps/web/src/components/Mod/Recents.tsx
index 1fa749716..af1a93a7f 100644
--- a/apps/web/src/components/Mod/Recents.tsx
+++ b/apps/web/src/components/Mod/Recents.tsx
@@ -1,25 +1,25 @@
-import Timeline from '@components/Home/Timeline';
-import TimelineShimmer from '@components/Shimmers/TimelineShimmer';
-import { NoDataFound } from '@components/UIElements/NoDataFound';
+import Timeline from '@components/Home/Timeline'
+import TimelineShimmer from '@components/Shimmers/TimelineShimmer'
+import { NoDataFound } from '@components/UIElements/NoDataFound'
 import {
   INFINITE_SCROLL_ROOT_MARGIN,
   LENSTUBE_BYTES_APP_ID,
   TAPE_APP_ID
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import type {
   ExplorePublicationRequest,
   PrimaryPublication
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import {
-  ExplorePublicationType,
   ExplorePublicationsOrderByType,
+  ExplorePublicationType,
   LimitType,
   PublicationMetadataMainFocusType,
   useExplorePublicationsQuery
-} from '@dragverse/lens';
-import { Spinner } from '@dragverse/ui';
-import { getUnixTimestampForDaysAgo } from '@lib/formatTime';
-import { useInView } from 'react-cool-inview';
+} from '@dragverse/lens'
+import { Spinner } from '@dragverse/ui'
+import { getUnixTimestampForDaysAgo } from '@lib/formatTime'
+import { useInView } from 'react-cool-inview'
 
 const since = getUnixTimestampForDaysAgo(30)
 
diff --git a/apps/web/src/components/Mod/Signup.tsx b/apps/web/src/components/Mod/Signup.tsx
index 383618380..cedaf3bcc 100644
--- a/apps/web/src/components/Mod/Signup.tsx
+++ b/apps/web/src/components/Mod/Signup.tsx
@@ -1,12 +1,12 @@
 import {
-    LENS_PERMISSIONLESS_CREATOR_ABI,
-    TAPE_SIGNUP_PROXY_ABI
+  LENS_PERMISSIONLESS_CREATOR_ABI,
+  TAPE_SIGNUP_PROXY_ABI
 } from '@dragverse/abis'
 import {
-    LENS_PERMISSIONLESS_CREATOR_ADDRESS,
-    POLYGON_CHAIN_ID,
-    TAPE_SIGNUP_PROXY_ADDRESS,
-    ZERO_ADDRESS
+  LENS_PERMISSIONLESS_CREATOR_ADDRESS,
+  POLYGON_CHAIN_ID,
+  TAPE_SIGNUP_PROXY_ADDRESS,
+  ZERO_ADDRESS
 } from '@dragverse/constants'
 import { useGenerateLensApiRelayAddressQuery } from '@dragverse/lens'
 import { Button, Input } from '@dragverse/ui'
diff --git a/apps/web/src/components/Mod/index.tsx b/apps/web/src/components/Mod/index.tsx
index f195689d1..a7e747e69 100644
--- a/apps/web/src/components/Mod/index.tsx
+++ b/apps/web/src/components/Mod/index.tsx
@@ -1,12 +1,12 @@
-import MetaTags from '@components/Common/MetaTags';
-import { ADMIN_IDS } from '@dragverse/constants';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@dragverse/ui';
-import useProfileStore from '@lib/store/idb/profile';
-import { useState } from 'react';
-import Custom404 from 'src/pages/404';
+import MetaTags from '@components/Common/MetaTags'
+import { ADMIN_IDS } from '@dragverse/constants'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@dragverse/ui'
+import useProfileStore from '@lib/store/idb/profile'
+import { useState } from 'react'
+import Custom404 from 'src/pages/404'
 
-import Recents from './Recents';
-import Signup from './Signup';
+import Recents from './Recents'
+import Signup from './Signup'
 
 const Mod = () => {
   const { activeProfile } = useProfileStore()
diff --git a/apps/web/src/components/Notifications/Acted.tsx b/apps/web/src/components/Notifications/Acted.tsx
index 9c952a375..7a032575a 100644
--- a/apps/web/src/components/Notifications/Acted.tsx
+++ b/apps/web/src/components/Notifications/Acted.tsx
@@ -1,14 +1,14 @@
-import HoverableProfile from '@components/Common/HoverableProfile';
+import HoverableProfile from '@components/Common/HoverableProfile'
 import {
   getProfile,
   getProfilePicture,
   getPublication,
   getPublicationData
-} from '@dragverse/generic';
-import type { ActedNotification, OpenActionProfileActed } from '@dragverse/lens';
-import { CollectOutline } from '@dragverse/ui';
-import Link from 'next/link';
-import type { FC } from 'react';
+} from '@dragverse/generic'
+import type { ActedNotification, OpenActionProfileActed } from '@dragverse/lens'
+import { CollectOutline } from '@dragverse/ui'
+import Link from 'next/link'
+import type { FC } from 'react'
 
 type Props = {
   notification: ActedNotification
diff --git a/apps/web/src/components/Notifications/Commented.tsx b/apps/web/src/components/Notifications/Commented.tsx
index 50970bed5..9a8171b1a 100644
--- a/apps/web/src/components/Notifications/Commented.tsx
+++ b/apps/web/src/components/Notifications/Commented.tsx
@@ -1,14 +1,14 @@
-import HoverableProfile from '@components/Common/HoverableProfile';
+import HoverableProfile from '@components/Common/HoverableProfile'
 import {
   getProfile,
   getProfilePicture,
   getPublicationData
-} from '@dragverse/generic';
-import type { CommentNotification } from '@dragverse/lens';
-import { CommentOutline } from '@dragverse/ui';
-import { getShortHandTime } from '@lib/formatTime';
-import Link from 'next/link';
-import type { FC } from 'react';
+} from '@dragverse/generic'
+import type { CommentNotification } from '@dragverse/lens'
+import { CommentOutline } from '@dragverse/ui'
+import { getShortHandTime } from '@lib/formatTime'
+import Link from 'next/link'
+import type { FC } from 'react'
 
 type Props = {
   notification: CommentNotification
diff --git a/apps/web/src/components/Notifications/Filter.tsx b/apps/web/src/components/Notifications/Filter.tsx
index d31e3928d..6a6d426ea 100644
--- a/apps/web/src/components/Notifications/Filter.tsx
+++ b/apps/web/src/components/Notifications/Filter.tsx
@@ -1,7 +1,7 @@
-import { tw } from '@dragverse/browser';
-import { CustomNotificationsFilterEnum } from '@dragverse/lens/custom-types';
-import { CogOutline, DropdownMenu, DropdownMenuItem } from '@dragverse/ui';
-import usePersistStore from '@lib/store/persist';
+import { tw } from '@dragverse/browser'
+import { CustomNotificationsFilterEnum } from '@dragverse/lens/custom-types'
+import { CogOutline, DropdownMenu, DropdownMenuItem } from '@dragverse/ui'
+import usePersistStore from '@lib/store/persist'
 
 const NotificationsFilter = () => {
   const selectedNotificationsFilter = usePersistStore(
diff --git a/apps/web/src/components/Notifications/Followed.tsx b/apps/web/src/components/Notifications/Followed.tsx
index 1aaa68676..c99808c2d 100644
--- a/apps/web/src/components/Notifications/Followed.tsx
+++ b/apps/web/src/components/Notifications/Followed.tsx
@@ -1,8 +1,8 @@
-import HoverableProfile from '@components/Common/HoverableProfile';
-import { getProfile, getProfilePicture } from '@dragverse/generic';
-import type { FollowNotification, Profile } from '@dragverse/lens';
-import { FollowOutline } from '@dragverse/ui';
-import type { FC } from 'react';
+import HoverableProfile from '@components/Common/HoverableProfile'
+import { getProfile, getProfilePicture } from '@dragverse/generic'
+import type { FollowNotification, Profile } from '@dragverse/lens'
+import { FollowOutline } from '@dragverse/ui'
+import type { FC } from 'react'
 
 type Props = {
   notification: FollowNotification
diff --git a/apps/web/src/components/Notifications/Mentioned.tsx b/apps/web/src/components/Notifications/Mentioned.tsx
index 000c16f2b..33759ecf5 100644
--- a/apps/web/src/components/Notifications/Mentioned.tsx
+++ b/apps/web/src/components/Notifications/Mentioned.tsx
@@ -1,14 +1,14 @@
-import HoverableProfile from '@components/Common/HoverableProfile';
+import HoverableProfile from '@components/Common/HoverableProfile'
 import {
   getProfile,
   getProfilePicture,
   getPublicationData
-} from '@dragverse/generic';
-import type { MentionNotification } from '@dragverse/lens';
-import { MentionOutline } from '@dragverse/ui';
-import { getShortHandTime } from '@lib/formatTime';
-import Link from 'next/link';
-import type { FC } from 'react';
+} from '@dragverse/generic'
+import type { MentionNotification } from '@dragverse/lens'
+import { MentionOutline } from '@dragverse/ui'
+import { getShortHandTime } from '@lib/formatTime'
+import Link from 'next/link'
+import type { FC } from 'react'
 
 type Props = {
   notification: MentionNotification
diff --git a/apps/web/src/components/Notifications/Mirrored.tsx b/apps/web/src/components/Notifications/Mirrored.tsx
index 6eb3f02d3..153658366 100644
--- a/apps/web/src/components/Notifications/Mirrored.tsx
+++ b/apps/web/src/components/Notifications/Mirrored.tsx
@@ -1,13 +1,13 @@
-import HoverableProfile from '@components/Common/HoverableProfile';
+import HoverableProfile from '@components/Common/HoverableProfile'
 import {
   getProfile,
   getProfilePicture,
   getPublicationData
-} from '@dragverse/generic';
-import type { MirrorNotification, ProfileMirrorResult } from '@dragverse/lens';
-import { MirrorOutline } from '@dragverse/ui';
-import Link from 'next/link';
-import type { FC } from 'react';
+} from '@dragverse/generic'
+import type { MirrorNotification, ProfileMirrorResult } from '@dragverse/lens'
+import { MirrorOutline } from '@dragverse/ui'
+import Link from 'next/link'
+import type { FC } from 'react'
 
 type Props = {
   notification: MirrorNotification
diff --git a/apps/web/src/components/Notifications/Quoted.tsx b/apps/web/src/components/Notifications/Quoted.tsx
index 4abeced1c..d02b2c5b7 100644
--- a/apps/web/src/components/Notifications/Quoted.tsx
+++ b/apps/web/src/components/Notifications/Quoted.tsx
@@ -1,14 +1,14 @@
-import HoverableProfile from '@components/Common/HoverableProfile';
+import HoverableProfile from '@components/Common/HoverableProfile'
 import {
   getProfile,
   getProfilePicture,
   getPublicationData
-} from '@dragverse/generic';
-import type { QuoteNotification } from '@dragverse/lens';
-import { QuoteOutline } from '@dragverse/ui';
-import { getShortHandTime } from '@lib/formatTime';
-import Link from 'next/link';
-import type { FC } from 'react';
+} from '@dragverse/generic'
+import type { QuoteNotification } from '@dragverse/lens'
+import { QuoteOutline } from '@dragverse/ui'
+import { getShortHandTime } from '@lib/formatTime'
+import Link from 'next/link'
+import type { FC } from 'react'
 
 type Props = {
   notification: QuoteNotification
diff --git a/apps/web/src/components/Notifications/Reactions.tsx b/apps/web/src/components/Notifications/Reactions.tsx
index 171261523..f2cf8ac20 100644
--- a/apps/web/src/components/Notifications/Reactions.tsx
+++ b/apps/web/src/components/Notifications/Reactions.tsx
@@ -1,13 +1,16 @@
-import HoverableProfile from '@components/Common/HoverableProfile';
+import HoverableProfile from '@components/Common/HoverableProfile'
 import {
   getProfile,
   getProfilePicture,
   getPublicationData
-} from '@dragverse/generic';
-import type { ProfileReactedResult, ReactionNotification } from '@dragverse/lens';
-import { HeartOutline } from '@dragverse/ui';
-import Link from 'next/link';
-import type { FC } from 'react';
+} from '@dragverse/generic'
+import type {
+  ProfileReactedResult,
+  ReactionNotification
+} from '@dragverse/lens'
+import { HeartOutline } from '@dragverse/ui'
+import Link from 'next/link'
+import type { FC } from 'react'
 
 type Props = {
   notification: ReactionNotification
diff --git a/apps/web/src/components/Notifications/index.tsx b/apps/web/src/components/Notifications/index.tsx
index 380cf835f..402702900 100644
--- a/apps/web/src/components/Notifications/index.tsx
+++ b/apps/web/src/components/Notifications/index.tsx
@@ -1,31 +1,31 @@
-import MetaTags from '@components/Common/MetaTags';
-import NotificationsShimmer from '@components/Shimmers/NotificationsShimmer';
-import { NoDataFound } from '@components/UIElements/NoDataFound';
+import MetaTags from '@components/Common/MetaTags'
+import NotificationsShimmer from '@components/Shimmers/NotificationsShimmer'
+import { NoDataFound } from '@components/UIElements/NoDataFound'
 import {
   INFINITE_SCROLL_ROOT_MARGIN,
   LENS_CUSTOM_FILTERS,
   LENSTUBE_APP_ID,
   LENSTUBE_BYTES_APP_ID,
   TAPE_APP_ID
-} from '@dragverse/constants';
-import { EVENTS, Tower } from '@dragverse/generic';
-import type { Notification, NotificationRequest } from '@dragverse/lens';
-import { useNotificationsQuery } from '@dragverse/lens';
-import { CustomNotificationsFilterEnum } from '@dragverse/lens/custom-types';
-import { Spinner } from '@dragverse/ui';
-import useNotificationStore from '@lib/store/notification';
-import usePersistStore from '@lib/store/persist';
-import { useEffect } from 'react';
-import { useInView } from 'react-cool-inview';
+} from '@dragverse/constants'
+import { EVENTS, Tower } from '@dragverse/generic'
+import type { Notification, NotificationRequest } from '@dragverse/lens'
+import { useNotificationsQuery } from '@dragverse/lens'
+import { CustomNotificationsFilterEnum } from '@dragverse/lens/custom-types'
+import { Spinner } from '@dragverse/ui'
+import useNotificationStore from '@lib/store/notification'
+import usePersistStore from '@lib/store/persist'
+import { useEffect } from 'react'
+import { useInView } from 'react-cool-inview'
 
-import Acted from './Acted';
-import Commented from './Commented';
-import NotificationsFilter from './Filter';
-import Followed from './Followed';
-import Mentioned from './Mentioned';
-import Mirrored from './Mirrored';
-import Quoted from './Quoted';
-import Reactions from './Reactions';
+import Acted from './Acted'
+import Commented from './Commented'
+import NotificationsFilter from './Filter'
+import Followed from './Followed'
+import Mentioned from './Mentioned'
+import Mirrored from './Mirrored'
+import Quoted from './Quoted'
+import Reactions from './Reactions'
 
 const Notifications = () => {
   const setHasNewNotification = useNotificationStore(
diff --git a/apps/web/src/components/Profile/BasicInfo/Follow.tsx b/apps/web/src/components/Profile/BasicInfo/Follow.tsx
index af6f1c343..443c0aba4 100644
--- a/apps/web/src/components/Profile/BasicInfo/Follow.tsx
+++ b/apps/web/src/components/Profile/BasicInfo/Follow.tsx
@@ -1,32 +1,32 @@
-import { LENSHUB_PROXY_ABI } from '@dragverse/abis';
+import { LENSHUB_PROXY_ABI } from '@dragverse/abis'
 import {
   ERROR_MESSAGE,
   LENSHUB_PROXY_ADDRESS,
   REQUESTING_SIGNATURE_MESSAGE,
   SIGN_IN_REQUIRED
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import {
-  EVENTS,
-  Tower,
   checkLensManagerPermissions,
+  EVENTS,
   getProfile,
-  getSignature
-} from '@dragverse/generic';
-import type { FollowLensManagerRequest, Profile } from '@dragverse/lens';
+  getSignature,
+  Tower
+} from '@dragverse/generic'
+import type { FollowLensManagerRequest, Profile } from '@dragverse/lens'
 import {
   useBroadcastOnchainMutation,
   useCreateFollowTypedDataMutation,
   useFollowMutation
-} from '@dragverse/lens';
-import type { CustomErrorWithData } from '@dragverse/lens/custom-types';
-import { Button } from '@dragverse/ui';
-import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork';
-import useProfileStore from '@lib/store/idb/profile';
-import useNonceStore from '@lib/store/nonce';
-import type { FC } from 'react';
-import { useState } from 'react';
-import toast from 'react-hot-toast';
-import { useSignTypedData, useWriteContract } from 'wagmi';
+} from '@dragverse/lens'
+import type { CustomErrorWithData } from '@dragverse/lens/custom-types'
+import { Button } from '@dragverse/ui'
+import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork'
+import useProfileStore from '@lib/store/idb/profile'
+import useNonceStore from '@lib/store/nonce'
+import type { FC } from 'react'
+import { useState } from 'react'
+import toast from 'react-hot-toast'
+import { useSignTypedData, useWriteContract } from 'wagmi'
 
 type Props = {
   profile: Profile
diff --git a/apps/web/src/components/Profile/BasicInfo/Stats/Followers.tsx b/apps/web/src/components/Profile/BasicInfo/Stats/Followers.tsx
index 3b1af83f4..633512ab1 100644
--- a/apps/web/src/components/Profile/BasicInfo/Stats/Followers.tsx
+++ b/apps/web/src/components/Profile/BasicInfo/Stats/Followers.tsx
@@ -1,12 +1,12 @@
-import HoverableProfile from '@components/Common/HoverableProfile';
-import { NoDataFound } from '@components/UIElements/NoDataFound';
-import { formatNumber, getProfile, getProfilePicture } from '@dragverse/generic';
-import type { FollowersRequest, Profile, ProfileStats } from '@dragverse/lens';
-import { LimitType, useFollowersQuery } from '@dragverse/lens';
-import { Modal, Spinner } from '@dragverse/ui';
-import type { FC } from 'react';
-import { useState } from 'react';
-import { useInView } from 'react-cool-inview';
+import HoverableProfile from '@components/Common/HoverableProfile'
+import { NoDataFound } from '@components/UIElements/NoDataFound'
+import { formatNumber, getProfile, getProfilePicture } from '@dragverse/generic'
+import type { FollowersRequest, Profile, ProfileStats } from '@dragverse/lens'
+import { LimitType, useFollowersQuery } from '@dragverse/lens'
+import { Modal, Spinner } from '@dragverse/ui'
+import type { FC } from 'react'
+import { useState } from 'react'
+import { useInView } from 'react-cool-inview'
 
 type Props = {
   stats: ProfileStats
diff --git a/apps/web/src/components/Profile/BasicInfo/Stats/Following.tsx b/apps/web/src/components/Profile/BasicInfo/Stats/Following.tsx
index 8ac4d3ec2..9aaefe7d3 100644
--- a/apps/web/src/components/Profile/BasicInfo/Stats/Following.tsx
+++ b/apps/web/src/components/Profile/BasicInfo/Stats/Following.tsx
@@ -1,12 +1,12 @@
-import HoverableProfile from '@components/Common/HoverableProfile';
-import { NoDataFound } from '@components/UIElements/NoDataFound';
-import { formatNumber, getProfile, getProfilePicture } from '@dragverse/generic';
-import type { FollowingRequest, Profile, ProfileStats } from '@dragverse/lens';
-import { LimitType, useFollowingQuery } from '@dragverse/lens';
-import { Modal, Spinner } from '@dragverse/ui';
-import type { FC } from 'react';
-import { useState } from 'react';
-import { useInView } from 'react-cool-inview';
+import HoverableProfile from '@components/Common/HoverableProfile'
+import { NoDataFound } from '@components/UIElements/NoDataFound'
+import { formatNumber, getProfile, getProfilePicture } from '@dragverse/generic'
+import type { FollowingRequest, Profile, ProfileStats } from '@dragverse/lens'
+import { LimitType, useFollowingQuery } from '@dragverse/lens'
+import { Modal, Spinner } from '@dragverse/ui'
+import type { FC } from 'react'
+import { useState } from 'react'
+import { useInView } from 'react-cool-inview'
 
 type Props = {
   stats: ProfileStats
diff --git a/apps/web/src/components/Profile/BasicInfo/Stats/index.tsx b/apps/web/src/components/Profile/BasicInfo/Stats/index.tsx
index e765d2afc..82a021404 100644
--- a/apps/web/src/components/Profile/BasicInfo/Stats/index.tsx
+++ b/apps/web/src/components/Profile/BasicInfo/Stats/index.tsx
@@ -1,8 +1,8 @@
-import type { Profile } from '@dragverse/lens';
-import type { FC } from 'react';
+import type { Profile } from '@dragverse/lens'
+import type { FC } from 'react'
 
-import Followers from './Followers';
-import Following from './Following';
+import Followers from './Followers'
+import Following from './Following'
 
 type Props = {
   profile: Profile
diff --git a/apps/web/src/components/Profile/BasicInfo/SuperFollow.tsx b/apps/web/src/components/Profile/BasicInfo/SuperFollow.tsx
index 6d2387809..894a50f29 100644
--- a/apps/web/src/components/Profile/BasicInfo/SuperFollow.tsx
+++ b/apps/web/src/components/Profile/BasicInfo/SuperFollow.tsx
@@ -1,18 +1,18 @@
-import { LENSHUB_PROXY_ABI } from '@dragverse/abis';
+import { LENSHUB_PROXY_ABI } from '@dragverse/abis'
 import {
   ERROR_MESSAGE,
   LENSHUB_PROXY_ADDRESS,
   REQUESTING_SIGNATURE_MESSAGE,
   SIGN_IN_REQUIRED
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import {
-  EVENTS,
-  Tower,
   checkLensManagerPermissions,
+  EVENTS,
   getProfile,
-  getSignature
-} from '@dragverse/generic';
-import type { FeeFollowModuleSettings, Profile } from '@dragverse/lens';
+  getSignature,
+  Tower
+} from '@dragverse/generic'
+import type { FeeFollowModuleSettings, Profile } from '@dragverse/lens'
 import {
   FollowModuleType,
   useApprovedModuleAllowanceAmountQuery,
@@ -20,20 +20,20 @@ import {
   useCreateFollowTypedDataMutation,
   useGenerateModuleCurrencyApprovalDataLazyQuery,
   useProfileFollowModuleQuery
-} from '@dragverse/lens';
-import type { CustomErrorWithData } from '@dragverse/lens/custom-types';
-import { Button, Modal } from '@dragverse/ui';
-import useProfileStore from '@lib/store/idb/profile';
-import useNonceStore from '@lib/store/nonce';
-import type { FC } from 'react';
-import { useEffect, useState } from 'react';
-import toast from 'react-hot-toast';
+} from '@dragverse/lens'
+import type { CustomErrorWithData } from '@dragverse/lens/custom-types'
+import { Button, Modal } from '@dragverse/ui'
+import useProfileStore from '@lib/store/idb/profile'
+import useNonceStore from '@lib/store/nonce'
+import type { FC } from 'react'
+import { useEffect, useState } from 'react'
+import toast from 'react-hot-toast'
 import {
   useSendTransaction,
   useSignTypedData,
   useWaitForTransactionReceipt,
   useWriteContract
-} from 'wagmi';
+} from 'wagmi'
 
 type Props = {
   profile: Profile
diff --git a/apps/web/src/components/Profile/BasicInfo/UnFollow.tsx b/apps/web/src/components/Profile/BasicInfo/UnFollow.tsx
index d8303c4b8..d4dfa1cac 100644
--- a/apps/web/src/components/Profile/BasicInfo/UnFollow.tsx
+++ b/apps/web/src/components/Profile/BasicInfo/UnFollow.tsx
@@ -1,34 +1,34 @@
-import { LENSHUB_PROXY_ABI } from '@dragverse/abis';
+import { LENSHUB_PROXY_ABI } from '@dragverse/abis'
 import {
   LENSHUB_PROXY_ADDRESS,
   REQUESTING_SIGNATURE_MESSAGE,
   SIGN_IN_REQUIRED
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import {
-  EVENTS,
-  Tower,
   checkLensManagerPermissions,
+  EVENTS,
   getProfile,
-  getSignature
-} from '@dragverse/generic';
+  getSignature,
+  Tower
+} from '@dragverse/generic'
 import type {
   CreateUnfollowBroadcastItemResult,
   Profile
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import {
   useBroadcastOnchainMutation,
   useCreateUnfollowTypedDataMutation,
   useUnfollowMutation
-} from '@dragverse/lens';
-import type { CustomErrorWithData } from '@dragverse/lens/custom-types';
-import { Button } from '@dragverse/ui';
-import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork';
-import useProfileStore from '@lib/store/idb/profile';
-import useNonceStore from '@lib/store/nonce';
-import type { FC } from 'react';
-import { useState } from 'react';
-import toast from 'react-hot-toast';
-import { useSignTypedData, useWriteContract } from 'wagmi';
+} from '@dragverse/lens'
+import type { CustomErrorWithData } from '@dragverse/lens/custom-types'
+import { Button } from '@dragverse/ui'
+import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork'
+import useProfileStore from '@lib/store/idb/profile'
+import useNonceStore from '@lib/store/nonce'
+import type { FC } from 'react'
+import { useState } from 'react'
+import toast from 'react-hot-toast'
+import { useSignTypedData, useWriteContract } from 'wagmi'
 
 type Props = {
   profile: Profile
diff --git a/apps/web/src/components/Profile/BasicInfo/index.tsx b/apps/web/src/components/Profile/BasicInfo/index.tsx
index 5d79149ad..3e8c1b78d 100644
--- a/apps/web/src/components/Profile/BasicInfo/index.tsx
+++ b/apps/web/src/components/Profile/BasicInfo/index.tsx
@@ -1,9 +1,9 @@
-import Badge from '@components/Common/Badge';
-import FollowActions from '@components/Common/FollowActions';
-import InterweaveContent from '@components/Common/InterweaveContent';
-import ReportProfile from '@components/Report/Profile';
-import { LENSHUB_PROXY_ABI } from '@dragverse/abis';
-import { useCopyToClipboard } from '@dragverse/browser';
+import Badge from '@components/Common/Badge'
+import FollowActions from '@components/Common/FollowActions'
+import InterweaveContent from '@components/Common/InterweaveContent'
+import ReportProfile from '@components/Report/Profile'
+import { LENSHUB_PROXY_ABI } from '@dragverse/abis'
+import { useCopyToClipboard } from '@dragverse/browser'
 import {
   ENS_ICON_URL,
   ERROR_MESSAGE,
@@ -12,27 +12,27 @@ import {
   REQUESTING_SIGNATURE_MESSAGE,
   STATIC_ASSETS,
   TAPE_WEBSITE_URL
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import {
   checkLensManagerPermissions,
   getProfile,
   getSignature,
   trimify
-} from '@dragverse/generic';
+} from '@dragverse/generic'
 import type {
   CreateBlockProfilesBroadcastItemResult,
   CreateUnblockProfilesBroadcastItemResult,
   Profile
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import {
   useBlockMutation,
   useBroadcastOnchainMutation,
   useCreateBlockProfilesTypedDataMutation,
   useCreateUnblockProfilesTypedDataMutation,
   useUnblockMutation
-} from '@dragverse/lens';
-import { useApolloClient } from '@dragverse/lens/apollo';
-import type { CustomErrorWithData } from '@dragverse/lens/custom-types';
+} from '@dragverse/lens'
+import { useApolloClient } from '@dragverse/lens/apollo'
+import type { CustomErrorWithData } from '@dragverse/lens/custom-types'
 import {
   Badge as BadgeUI,
   Callout,
@@ -45,16 +45,16 @@ import {
   ThreeDotsOutline,
   Tooltip,
   WarningOutline
-} from '@dragverse/ui';
-import useProfileStore from '@lib/store/idb/profile';
-import useNonceStore from '@lib/store/nonce';
-import type { FC } from 'react';
-import { useState } from 'react';
-import toast from 'react-hot-toast';
-import { useSignTypedData, useWriteContract } from 'wagmi';
+} from '@dragverse/ui'
+import useProfileStore from '@lib/store/idb/profile'
+import useNonceStore from '@lib/store/nonce'
+import type { FC } from 'react'
+import { useState } from 'react'
+import toast from 'react-hot-toast'
+import { useSignTypedData, useWriteContract } from 'wagmi'
 
-import Bubbles from '../Mutual/Bubbles';
-import Stats from './Stats';
+import Bubbles from '../Mutual/Bubbles'
+import Stats from './Stats'
 
 type Props = {
   profile: Profile
diff --git a/apps/web/src/components/Profile/Bookmarks.tsx b/apps/web/src/components/Profile/Bookmarks.tsx
index c8920c8fe..c32a3651a 100644
--- a/apps/web/src/components/Profile/Bookmarks.tsx
+++ b/apps/web/src/components/Profile/Bookmarks.tsx
@@ -1,27 +1,27 @@
-import MetaTags from '@components/Common/MetaTags';
-import Timeline from '@components/Home/Timeline';
-import TimelineShimmer from '@components/Shimmers/TimelineShimmer';
-import { NoDataFound } from '@components/UIElements/NoDataFound';
+import MetaTags from '@components/Common/MetaTags'
+import Timeline from '@components/Home/Timeline'
+import TimelineShimmer from '@components/Shimmers/TimelineShimmer'
+import { NoDataFound } from '@components/UIElements/NoDataFound'
 import {
   ALLOWED_APP_IDS,
   INFINITE_SCROLL_ROOT_MARGIN,
   IS_MAINNET,
   LENSTUBE_BYTES_APP_ID,
   TAPE_APP_ID
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import type {
   AnyPublication,
   PublicationBookmarksRequest
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import {
   LimitType,
   PublicationMetadataMainFocusType,
   usePublicationBookmarksQuery
-} from '@dragverse/lens';
-import { Spinner } from '@dragverse/ui';
-import useProfileStore from '@lib/store/idb/profile';
-import type { FC } from 'react';
-import { useInView } from 'react-cool-inview';
+} from '@dragverse/lens'
+import { Spinner } from '@dragverse/ui'
+import useProfileStore from '@lib/store/idb/profile'
+import type { FC } from 'react'
+import { useInView } from 'react-cool-inview'
 
 const Bookmarks: FC = () => {
   const { activeProfile } = useProfileStore()
diff --git a/apps/web/src/components/Profile/Cover.tsx b/apps/web/src/components/Profile/Cover.tsx
index 761b37f53..25480e837 100644
--- a/apps/web/src/components/Profile/Cover.tsx
+++ b/apps/web/src/components/Profile/Cover.tsx
@@ -1,19 +1,19 @@
-import { TAPE_SIGNUP_PROXY_ABI } from '@dragverse/abis';
-import { STATIC_ASSETS, TAPE_SIGNUP_PROXY_ADDRESS } from '@dragverse/constants';
+import { TAPE_SIGNUP_PROXY_ABI } from '@dragverse/abis'
+import { STATIC_ASSETS, TAPE_SIGNUP_PROXY_ADDRESS } from '@dragverse/constants'
 import {
   getProfile,
   getProfileCoverPicture,
   getProfilePicture,
   imageCdn,
   sanitizeDStorageUrl
-} from '@dragverse/generic';
-import type { Profile } from '@dragverse/lens';
-import { Badge as BadgeUI, Tooltip } from '@dragverse/ui';
-import { getDateString, getRelativeTime } from '@lib/formatTime';
-import type { FC } from 'react';
-import { useReadContract } from 'wagmi';
+} from '@dragverse/generic'
+import type { Profile } from '@dragverse/lens'
+import { Badge as BadgeUI, Tooltip } from '@dragverse/ui'
+import { getDateString, getRelativeTime } from '@lib/formatTime'
+import type { FC } from 'react'
+import { useReadContract } from 'wagmi'
 
-import CoverLinks from './CoverLinks';
+import CoverLinks from './CoverLinks'
 
 type Props = {
   profile: Profile
diff --git a/apps/web/src/components/Profile/CoverLinks.tsx b/apps/web/src/components/Profile/CoverLinks.tsx
index 5bc83aef7..280d37df6 100644
--- a/apps/web/src/components/Profile/CoverLinks.tsx
+++ b/apps/web/src/components/Profile/CoverLinks.tsx
@@ -1,9 +1,9 @@
-import { STATIC_ASSETS } from '@dragverse/constants';
-import { getValueFromKeyInAttributes, imageCdn } from '@dragverse/generic';
-import type { ProfileMetadata } from '@dragverse/lens';
-import { GlobeOutline, LocationOutline } from '@dragverse/ui';
-import { useTheme } from 'next-themes';
-import Link from 'next/link';
+import { STATIC_ASSETS } from '@dragverse/constants'
+import { getValueFromKeyInAttributes, imageCdn } from '@dragverse/generic'
+import type { ProfileMetadata } from '@dragverse/lens'
+import { GlobeOutline, LocationOutline } from '@dragverse/ui'
+import Link from 'next/link'
+import { useTheme } from 'next-themes'
 
 const CoverLinks = ({ metadata }: { metadata: ProfileMetadata }) => {
   const { resolvedTheme } = useTheme()
diff --git a/apps/web/src/components/Profile/Mutual/Bubbles.tsx b/apps/web/src/components/Profile/Mutual/Bubbles.tsx
index 7041b58e6..52433bb15 100644
--- a/apps/web/src/components/Profile/Mutual/Bubbles.tsx
+++ b/apps/web/src/components/Profile/Mutual/Bubbles.tsx
@@ -1,14 +1,14 @@
-import HoverableProfile from '@components/Common/HoverableProfile';
-import BubblesShimmer from '@components/Shimmers/BubblesShimmer';
-import { getProfile, getProfilePicture } from '@dragverse/generic';
-import type { Profile } from '@dragverse/lens';
-import { LimitType, useMutualFollowersQuery } from '@dragverse/lens';
-import { Modal } from '@dragverse/ui';
-import useProfileStore from '@lib/store/idb/profile';
-import type { FC } from 'react';
-import { useState } from 'react';
+import HoverableProfile from '@components/Common/HoverableProfile'
+import BubblesShimmer from '@components/Shimmers/BubblesShimmer'
+import { getProfile, getProfilePicture } from '@dragverse/generic'
+import type { Profile } from '@dragverse/lens'
+import { LimitType, useMutualFollowersQuery } from '@dragverse/lens'
+import { Modal } from '@dragverse/ui'
+import useProfileStore from '@lib/store/idb/profile'
+import type { FC } from 'react'
+import { useState } from 'react'
 
-import MutualFollowers from './MutualFollowers';
+import MutualFollowers from './MutualFollowers'
 
 type Props = {
   viewing: string
diff --git a/apps/web/src/components/Profile/Mutual/MutualFollowers.tsx b/apps/web/src/components/Profile/Mutual/MutualFollowers.tsx
index 4eb3c2a78..8d8690530 100644
--- a/apps/web/src/components/Profile/Mutual/MutualFollowers.tsx
+++ b/apps/web/src/components/Profile/Mutual/MutualFollowers.tsx
@@ -1,12 +1,12 @@
-import HoverableProfile from '@components/Common/HoverableProfile';
-import { NoDataFound } from '@components/UIElements/NoDataFound';
-import { getProfile, getProfilePicture } from '@dragverse/generic';
-import type { MutualFollowersRequest, Profile } from '@dragverse/lens';
-import { LimitType, useMutualFollowersQuery } from '@dragverse/lens';
-import { Spinner } from '@dragverse/ui';
-import useProfileStore from '@lib/store/idb/profile';
-import type { FC } from 'react';
-import { useInView } from 'react-cool-inview';
+import HoverableProfile from '@components/Common/HoverableProfile'
+import { NoDataFound } from '@components/UIElements/NoDataFound'
+import { getProfile, getProfilePicture } from '@dragverse/generic'
+import type { MutualFollowersRequest, Profile } from '@dragverse/lens'
+import { LimitType, useMutualFollowersQuery } from '@dragverse/lens'
+import { Spinner } from '@dragverse/ui'
+import useProfileStore from '@lib/store/idb/profile'
+import type { FC } from 'react'
+import { useInView } from 'react-cool-inview'
 
 type Props = {
   viewing: string
diff --git a/apps/web/src/components/Profile/Tabs/NFTCard.tsx b/apps/web/src/components/Profile/Tabs/NFTCard.tsx
index df4104ad8..efce2bfab 100644
--- a/apps/web/src/components/Profile/Tabs/NFTCard.tsx
+++ b/apps/web/src/components/Profile/Tabs/NFTCard.tsx
@@ -2,13 +2,13 @@ import {
   ETHERSCAN_URL,
   FALLBACK_THUMBNAIL_URL,
   POLYGONSCAN_URL
-} from '@dragverse/constants';
-import { sanitizeDStorageUrl } from '@dragverse/generic';
-import type { CustomNftItemType } from '@dragverse/lens/custom-types';
-import { PlayOutline, StopOutline } from '@dragverse/ui';
-import Link from 'next/link';
-import type { FC } from 'react';
-import { useState } from 'react';
+} from '@dragverse/constants'
+import { sanitizeDStorageUrl } from '@dragverse/generic'
+import type { CustomNftItemType } from '@dragverse/lens/custom-types'
+import { PlayOutline, StopOutline } from '@dragverse/ui'
+import Link from 'next/link'
+import type { FC } from 'react'
+import { useState } from 'react'
 
 type Props = {
   nft: CustomNftItemType
diff --git a/apps/web/src/components/Profile/Tabs/PinnedVideo.tsx b/apps/web/src/components/Profile/Tabs/PinnedVideo.tsx
index a11200241..f5bb7db91 100644
--- a/apps/web/src/components/Profile/Tabs/PinnedVideo.tsx
+++ b/apps/web/src/components/Profile/Tabs/PinnedVideo.tsx
@@ -1,5 +1,5 @@
-import PinnedVideoShimmer from '@components/Shimmers/PinnedVideoShimmer';
-import { LENSHUB_PROXY_ABI } from '@dragverse/abis';
+import PinnedVideoShimmer from '@components/Shimmers/PinnedVideoShimmer'
+import { LENSHUB_PROXY_ABI } from '@dragverse/abis'
 import {
   ERROR_MESSAGE,
   LENSHUB_PROXY_ADDRESS,
@@ -7,11 +7,10 @@ import {
   REQUESTING_SIGNATURE_MESSAGE,
   SIGN_IN_REQUIRED,
   TAPE_APP_ID
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import {
-  EVENTS,
-  Tower,
   checkLensManagerPermissions,
+  EVENTS,
   getIsSensitiveContent,
   getProfileCoverPicture,
   getProfilePictureUri,
@@ -24,33 +23,34 @@ import {
   isWatchable,
   logger,
   sanitizeDStorageUrl,
+  Tower,
   trimify,
   uploadToAr
-} from '@dragverse/generic';
+} from '@dragverse/generic'
 import type {
   AnyPublication,
   OnchainSetProfileMetadataRequest,
   Profile
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import {
   useBroadcastOnchainMutation,
   useCreateOnchainSetProfileMetadataTypedDataMutation,
   usePublicationQuery,
   useSetProfileMetadataMutation
-} from '@dragverse/lens';
-import type { CustomErrorWithData } from '@dragverse/lens/custom-types';
-import { Button, VideoPlayer } from '@dragverse/ui';
-import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork';
-import type { ProfileOptions } from '@lens-protocol/metadata';
-import { MetadataAttributeType, profile } from '@lens-protocol/metadata';
-import { getRelativeTime } from '@lib/formatTime';
-import useProfileStore from '@lib/store/idb/profile';
-import Link from 'next/link';
-import type { FC } from 'react';
-import { memo } from 'react';
-import toast from 'react-hot-toast';
-import { v4 as uuidv4 } from 'uuid';
-import { useSignTypedData, useWriteContract } from 'wagmi';
+} from '@dragverse/lens'
+import type { CustomErrorWithData } from '@dragverse/lens/custom-types'
+import { Button, VideoPlayer } from '@dragverse/ui'
+import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork'
+import type { ProfileOptions } from '@lens-protocol/metadata'
+import { MetadataAttributeType, profile } from '@lens-protocol/metadata'
+import { getRelativeTime } from '@lib/formatTime'
+import useProfileStore from '@lib/store/idb/profile'
+import Link from 'next/link'
+import type { FC } from 'react'
+import { memo } from 'react'
+import toast from 'react-hot-toast'
+import { v4 as uuidv4 } from 'uuid'
+import { useSignTypedData, useWriteContract } from 'wagmi'
 
 type Props = {
   id: string
diff --git a/apps/web/src/components/Profile/Tabs/ProfileAudios.tsx b/apps/web/src/components/Profile/Tabs/ProfileAudios.tsx
index bccfafc92..6f5db2cae 100644
--- a/apps/web/src/components/Profile/Tabs/ProfileAudios.tsx
+++ b/apps/web/src/components/Profile/Tabs/ProfileAudios.tsx
@@ -1,23 +1,23 @@
-import AudioCard from '@components/Common/AudioCard';
-import AudioTimelineShimmer from '@components/Shimmers/AudioTimelineShimmer';
-import { NoDataFound } from '@components/UIElements/NoDataFound';
+import AudioCard from '@components/Common/AudioCard'
+import AudioTimelineShimmer from '@components/Shimmers/AudioTimelineShimmer'
+import { NoDataFound } from '@components/UIElements/NoDataFound'
 import {
   ALLOWED_APP_IDS,
   INFINITE_SCROLL_ROOT_MARGIN,
   IS_MAINNET,
   LENS_CUSTOM_FILTERS,
   TAPE_APP_ID
-} from '@dragverse/constants';
-import type { Post, Profile, PublicationsRequest } from '@dragverse/lens';
+} from '@dragverse/constants'
+import type { Post, Profile, PublicationsRequest } from '@dragverse/lens'
 import {
   LimitType,
   PublicationMetadataMainFocusType,
   PublicationType,
   usePublicationsQuery
-} from '@dragverse/lens';
-import { Spinner } from '@dragverse/ui';
-import type { FC } from 'react';
-import { useInView } from 'react-cool-inview';
+} from '@dragverse/lens'
+import { Spinner } from '@dragverse/ui'
+import type { FC } from 'react'
+import { useInView } from 'react-cool-inview'
 
 type Props = {
   profile: Profile
diff --git a/apps/web/src/components/Profile/Tabs/ProfileBytes.tsx b/apps/web/src/components/Profile/Tabs/ProfileBytes.tsx
index 82264a4e3..96e41ab81 100644
--- a/apps/web/src/components/Profile/Tabs/ProfileBytes.tsx
+++ b/apps/web/src/components/Profile/Tabs/ProfileBytes.tsx
@@ -1,29 +1,29 @@
-import PublicationOptions from '@components/Common/Publication/PublicationOptions';
-import LatestBytesShimmer from '@components/Shimmers/LatestBytesShimmer';
-import { NoDataFound } from '@components/UIElements/NoDataFound';
+import PublicationOptions from '@components/Common/Publication/PublicationOptions'
+import LatestBytesShimmer from '@components/Shimmers/LatestBytesShimmer'
+import { NoDataFound } from '@components/UIElements/NoDataFound'
 import {
   FALLBACK_THUMBNAIL_URL,
   INFINITE_SCROLL_ROOT_MARGIN,
   LENS_CUSTOM_FILTERS,
   LENSTUBE_BYTES_APP_ID,
   TAPE_APP_ID
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import {
   getPublicationData,
   getThumbnailUrl,
   imageCdn
-} from '@dragverse/generic';
-import type { Post, PublicationsRequest } from '@dragverse/lens';
+} from '@dragverse/generic'
+import type { Post, PublicationsRequest } from '@dragverse/lens'
 import {
   LimitType,
   PublicationMetadataMainFocusType,
   PublicationType,
   usePublicationsQuery
-} from '@dragverse/lens';
-import { Spinner } from '@dragverse/ui';
-import Link from 'next/link';
-import type { FC } from 'react';
-import { useInView } from 'react-cool-inview';
+} from '@dragverse/lens'
+import { Spinner } from '@dragverse/ui'
+import Link from 'next/link'
+import type { FC } from 'react'
+import { useInView } from 'react-cool-inview'
 
 type Props = {
   profileId: string
diff --git a/apps/web/src/components/Profile/Tabs/ProfileVideos.tsx b/apps/web/src/components/Profile/Tabs/ProfileVideos.tsx
index bef6cec98..b297b07c7 100644
--- a/apps/web/src/components/Profile/Tabs/ProfileVideos.tsx
+++ b/apps/web/src/components/Profile/Tabs/ProfileVideos.tsx
@@ -1,25 +1,25 @@
-import VideoCard from '@components/Common/VideoCard';
-import QueuedVideo from '@components/Common/VideoCard/QueuedVideo';
-import TimelineShimmer from '@components/Shimmers/TimelineShimmer';
-import { NoDataFound } from '@components/UIElements/NoDataFound';
+import VideoCard from '@components/Common/VideoCard'
+import QueuedVideo from '@components/Common/VideoCard/QueuedVideo'
+import TimelineShimmer from '@components/Shimmers/TimelineShimmer'
+import { NoDataFound } from '@components/UIElements/NoDataFound'
 import {
   ALLOWED_APP_IDS,
   INFINITE_SCROLL_ROOT_MARGIN,
   IS_MAINNET,
   LENS_CUSTOM_FILTERS,
   TAPE_APP_ID
-} from '@dragverse/constants';
-import type { Post, Profile, PublicationsRequest } from '@dragverse/lens';
+} from '@dragverse/constants'
+import type { Post, Profile, PublicationsRequest } from '@dragverse/lens'
 import {
   LimitType,
   PublicationMetadataMainFocusType,
   PublicationType,
   usePublicationsQuery
-} from '@dragverse/lens';
-import { Spinner } from '@dragverse/ui';
-import usePersistStore from '@lib/store/persist';
-import type { FC } from 'react';
-import { useInView } from 'react-cool-inview';
+} from '@dragverse/lens'
+import { Spinner } from '@dragverse/ui'
+import usePersistStore from '@lib/store/persist'
+import type { FC } from 'react'
+import { useInView } from 'react-cool-inview'
 
 type Props = {
   profile: Profile
diff --git a/apps/web/src/components/Profile/Tabs/index.tsx b/apps/web/src/components/Profile/Tabs/index.tsx
index 17f7f0135..08ddbb0cb 100644
--- a/apps/web/src/components/Profile/Tabs/index.tsx
+++ b/apps/web/src/components/Profile/Tabs/index.tsx
@@ -1,12 +1,12 @@
-import { EVENTS, getProfile, Tower } from '@dragverse/generic';
-import type { Profile } from '@dragverse/lens';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@dragverse/ui';
-import { useRouter } from 'next/router';
-import type { FC } from 'react';
+import { EVENTS, getProfile, Tower } from '@dragverse/generic'
+import type { Profile } from '@dragverse/lens'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@dragverse/ui'
+import { useRouter } from 'next/router'
+import type { FC } from 'react'
 
-import OtherProfiles from './OtherProfiles';
-import ProfileBytes from './ProfileBytes';
-import ProfileVideos from './ProfileVideos';
+import OtherProfiles from './OtherProfiles'
+import ProfileBytes from './ProfileBytes'
+import ProfileVideos from './ProfileVideos'
 
 type Props = {
   profile: Profile
diff --git a/apps/web/src/components/Report/Publication.tsx b/apps/web/src/components/Report/Publication.tsx
index 7423faa53..7b27efe9f 100644
--- a/apps/web/src/components/Report/Publication.tsx
+++ b/apps/web/src/components/Report/Publication.tsx
@@ -1,11 +1,11 @@
 import MetaTags from '@components/Common/MetaTags'
 import { ERROR_MESSAGE } from '@dragverse/constants'
 import {
-    EVENTS,
-    getProfile,
-    getPublication,
-    getPublicationData,
-    Tower
+  EVENTS,
+  getProfile,
+  getPublication,
+  getPublicationData,
+  Tower
 } from '@dragverse/generic'
 import type { AnyPublication } from '@dragverse/lens'
 import { useReportPublicationMutation } from '@dragverse/lens'
diff --git a/apps/web/src/components/Settings/Allowance/Modules/index.tsx b/apps/web/src/components/Settings/Allowance/Modules/index.tsx
index def74a667..50015600e 100644
--- a/apps/web/src/components/Settings/Allowance/Modules/index.tsx
+++ b/apps/web/src/components/Settings/Allowance/Modules/index.tsx
@@ -1,21 +1,21 @@
-import { VERIFIED_UNKNOWN_OPEN_ACTION_CONTRACTS } from '@components/Watch/OpenActions/verified-contracts';
-import { POLYGONSCAN_URL, WMATIC_TOKEN_ADDRESS } from '@dragverse/constants';
-import { shortenAddress } from '@dragverse/generic';
-import type { ApprovedAllowanceAmountResult } from '@dragverse/lens';
+import { VERIFIED_UNKNOWN_OPEN_ACTION_CONTRACTS } from '@components/Watch/OpenActions/verified-contracts'
+import { POLYGONSCAN_URL, WMATIC_TOKEN_ADDRESS } from '@dragverse/constants'
+import { shortenAddress } from '@dragverse/generic'
+import type { ApprovedAllowanceAmountResult } from '@dragverse/lens'
 import {
   FollowModuleType,
   OpenActionModuleType,
   useApprovedModuleAllowanceAmountQuery,
   useGenerateModuleCurrencyApprovalDataLazyQuery
-} from '@dragverse/lens';
-import { Button, Select, SelectItem, Spinner } from '@dragverse/ui';
-import { getCollectModuleConfig } from '@lib/getCollectModuleInput';
-import useProfileStore from '@lib/store/idb/profile';
-import useAllowedTokensStore from '@lib/store/idb/tokens';
-import Link from 'next/link';
-import { useEffect, useState } from 'react';
-import toast from 'react-hot-toast';
-import { useSendTransaction, useWaitForTransactionReceipt } from 'wagmi';
+} from '@dragverse/lens'
+import { Button, Select, SelectItem, Spinner } from '@dragverse/ui'
+import { getCollectModuleConfig } from '@lib/getCollectModuleInput'
+import useProfileStore from '@lib/store/idb/profile'
+import useAllowedTokensStore from '@lib/store/idb/tokens'
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import toast from 'react-hot-toast'
+import { useSendTransaction, useWaitForTransactionReceipt } from 'wagmi'
 
 const ModuleItem = ({
   moduleItem,
diff --git a/apps/web/src/components/Settings/BasicInfo.tsx b/apps/web/src/components/Settings/BasicInfo.tsx
index 558794d70..e87e84af6 100644
--- a/apps/web/src/components/Settings/BasicInfo.tsx
+++ b/apps/web/src/components/Settings/BasicInfo.tsx
@@ -1,51 +1,57 @@
-import EmojiPicker from '@components/UIElements/EmojiPicker';
-import { LENSHUB_PROXY_ABI } from '@dragverse/abis';
-import { tw, uploadToIPFS } from '@dragverse/browser';
+import EmojiPicker from '@components/UIElements/EmojiPicker'
+import { LENSHUB_PROXY_ABI } from '@dragverse/abis'
+import { tw, uploadToIPFS } from '@dragverse/browser'
 import {
-    ERROR_MESSAGE,
-    LENSHUB_PROXY_ADDRESS,
-    REQUESTING_SIGNATURE_MESSAGE,
-    TAPE_APP_ID
-} from '@dragverse/constants';
+  ERROR_MESSAGE,
+  LENSHUB_PROXY_ADDRESS,
+  REQUESTING_SIGNATURE_MESSAGE,
+  TAPE_APP_ID
+} from '@dragverse/constants'
 import {
-    EVENTS,
-    Tower,
-    checkLensManagerPermissions,
-    getProfileCoverPicture,
-    getProfilePicture,
-    getSignature,
-    getValueFromKeyInAttributes,
-    imageCdn,
-    logger,
-    sanitizeDStorageUrl,
-    trimify,
-    uploadToAr
-} from '@dragverse/generic';
-import type { OnchainSetProfileMetadataRequest, Profile } from '@dragverse/lens';
+  checkLensManagerPermissions,
+  EVENTS,
+  getProfileCoverPicture,
+  getProfilePicture,
+  getSignature,
+  getValueFromKeyInAttributes,
+  imageCdn,
+  logger,
+  sanitizeDStorageUrl,
+  Tower,
+  trimify,
+  uploadToAr
+} from '@dragverse/generic'
+import type { OnchainSetProfileMetadataRequest, Profile } from '@dragverse/lens'
 import {
-    useBroadcastOnchainMutation,
-    useCreateOnchainSetProfileMetadataTypedDataMutation,
-    useSetProfileMetadataMutation
-} from '@dragverse/lens';
+  useBroadcastOnchainMutation,
+  useCreateOnchainSetProfileMetadataTypedDataMutation,
+  useSetProfileMetadataMutation
+} from '@dragverse/lens'
 import type {
-    CustomErrorWithData,
-    IPFSUploadResult
-} from '@dragverse/lens/custom-types';
-import { AddImageOutline, Button, Input, Spinner, TextArea } from '@dragverse/ui';
-import { zodResolver } from '@hookform/resolvers/zod';
-import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork';
-import type { ProfileOptions } from '@lens-protocol/metadata';
+  CustomErrorWithData,
+  IPFSUploadResult
+} from '@dragverse/lens/custom-types'
 import {
-    MetadataAttributeType,
-    profile as profileMetadata
-} from '@lens-protocol/metadata';
-import { useState } from 'react';
-import { useForm } from 'react-hook-form';
-import toast from 'react-hot-toast';
-import { v4 as uuidv4 } from 'uuid';
-import { useSignTypedData, useWriteContract } from 'wagmi';
-import type { z } from 'zod';
-import { object, string, union } from 'zod';
+  AddImageOutline,
+  Button,
+  Input,
+  Spinner,
+  TextArea
+} from '@dragverse/ui'
+import { zodResolver } from '@hookform/resolvers/zod'
+import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork'
+import type { ProfileOptions } from '@lens-protocol/metadata'
+import {
+  MetadataAttributeType,
+  profile as profileMetadata
+} from '@lens-protocol/metadata'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import toast from 'react-hot-toast'
+import { v4 as uuidv4 } from 'uuid'
+import { useSignTypedData, useWriteContract } from 'wagmi'
+import type { z } from 'zod'
+import { object, string, union } from 'zod'
 
 type Props = {
   profile: Profile
@@ -298,7 +304,7 @@ const BasicInfo = ({ profile }: Props) => {
     <form onSubmit={handleSubmit(onSaveBasicInfo)} className="w-full">
       <div className="relative w-full flex-none">
         {uploading.cover && (
-          <div className="rounded-small absolute z-10 flex h-full w-full items-center justify-center bg-brand-850 opacity-40">
+          <div className="rounded-small bg-brand-850 absolute z-10 flex h-full w-full items-center justify-center opacity-40">
             <Spinner />
           </div>
         )}
@@ -352,7 +358,7 @@ const BasicInfo = ({ profile }: Props) => {
             <label
               htmlFor="choosePfp"
               className={tw(
-                'invisible absolute top-0 grid size-32 cursor-pointer place-items-center rounded-full bg-white bg-opacity-70 backdrop-blur-lg group-hover:visible dark:bg-brand-850',
+                'dark:bg-brand-850 invisible absolute top-0 grid size-32 cursor-pointer place-items-center rounded-full bg-white bg-opacity-70 backdrop-blur-lg group-hover:visible',
                 { visible: uploading.pfp }
               )}
             >
diff --git a/apps/web/src/components/Settings/Blocked/List.tsx b/apps/web/src/components/Settings/Blocked/List.tsx
index 4b7b98afa..7bc73baee 100644
--- a/apps/web/src/components/Settings/Blocked/List.tsx
+++ b/apps/web/src/components/Settings/Blocked/List.tsx
@@ -1,14 +1,14 @@
-import Badge from '@components/Common/Badge';
-import InterweaveContent from '@components/Common/InterweaveContent';
-import { NoDataFound } from '@components/UIElements/NoDataFound';
-import { LENSHUB_PROXY_ABI } from '@dragverse/abis';
+import Badge from '@components/Common/Badge'
+import InterweaveContent from '@components/Common/InterweaveContent'
+import { NoDataFound } from '@components/UIElements/NoDataFound'
+import { LENSHUB_PROXY_ABI } from '@dragverse/abis'
 import {
   ERROR_MESSAGE,
   INFINITE_SCROLL_ROOT_MARGIN,
   LENSHUB_PROXY_ADDRESS,
   REQUESTING_SIGNATURE_MESSAGE,
   SIGN_IN_REQUIRED
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import {
   checkLensManagerPermissions,
   getProfile,
@@ -17,30 +17,30 @@ import {
   getSignature,
   imageCdn,
   sanitizeDStorageUrl
-} from '@dragverse/generic';
+} from '@dragverse/generic'
 import type {
   CreateUnblockProfilesBroadcastItemResult,
   Profile,
   WhoHaveBlockedRequest
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import {
   LimitType,
   useBroadcastOnchainMutation,
   useCreateUnblockProfilesTypedDataMutation,
   useUnblockMutation,
   useWhoHaveBlockedQuery
-} from '@dragverse/lens';
-import { useApolloClient } from '@dragverse/lens/apollo';
-import type { CustomErrorWithData } from '@dragverse/lens/custom-types';
-import { Button, Spinner } from '@dragverse/ui';
-import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork';
-import useProfileStore from '@lib/store/idb/profile';
-import useNonceStore from '@lib/store/nonce';
-import Link from 'next/link';
-import { useState } from 'react';
-import { useInView } from 'react-cool-inview';
-import toast from 'react-hot-toast';
-import { useSignTypedData, useWriteContract } from 'wagmi';
+} from '@dragverse/lens'
+import { useApolloClient } from '@dragverse/lens/apollo'
+import type { CustomErrorWithData } from '@dragverse/lens/custom-types'
+import { Button, Spinner } from '@dragverse/ui'
+import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork'
+import useProfileStore from '@lib/store/idb/profile'
+import useNonceStore from '@lib/store/nonce'
+import Link from 'next/link'
+import { useState } from 'react'
+import { useInView } from 'react-cool-inview'
+import toast from 'react-hot-toast'
+import { useSignTypedData, useWriteContract } from 'wagmi'
 
 const List = () => {
   const [unblockingProfileId, setUnblockingProfileId] = useState('')
diff --git a/apps/web/src/components/Settings/DangerZone/Delete.tsx b/apps/web/src/components/Settings/DangerZone/Delete.tsx
index 196e0e458..62371db50 100644
--- a/apps/web/src/components/Settings/DangerZone/Delete.tsx
+++ b/apps/web/src/components/Settings/DangerZone/Delete.tsx
@@ -1,17 +1,17 @@
-import { LENSHUB_PROXY_ABI } from '@dragverse/abis';
+import { LENSHUB_PROXY_ABI } from '@dragverse/abis'
 import {
   LENSHUB_PROXY_ADDRESS,
   REQUESTING_SIGNATURE_MESSAGE
-} from '@dragverse/constants';
-import type { CustomErrorWithData } from '@dragverse/lens/custom-types';
-import { Button } from '@dragverse/ui';
-import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork';
-import { signOut } from '@lib/store/auth';
-import useProfileStore from '@lib/store/idb/profile';
-import { useEffect, useState } from 'react';
-import toast from 'react-hot-toast';
-import Custom404 from 'src/pages/404';
-import { useWaitForTransactionReceipt, useWriteContract } from 'wagmi';
+} from '@dragverse/constants'
+import type { CustomErrorWithData } from '@dragverse/lens/custom-types'
+import { Button } from '@dragverse/ui'
+import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork'
+import { signOut } from '@lib/store/auth'
+import useProfileStore from '@lib/store/idb/profile'
+import { useEffect, useState } from 'react'
+import toast from 'react-hot-toast'
+import Custom404 from 'src/pages/404'
+import { useWaitForTransactionReceipt, useWriteContract } from 'wagmi'
 
 const Delete = () => {
   const activeProfile = useProfileStore((state) => state.activeProfile)
diff --git a/apps/web/src/components/Settings/DangerZone/Guardian.tsx b/apps/web/src/components/Settings/DangerZone/Guardian.tsx
index 636850d21..a4d46bd43 100644
--- a/apps/web/src/components/Settings/DangerZone/Guardian.tsx
+++ b/apps/web/src/components/Settings/DangerZone/Guardian.tsx
@@ -1,21 +1,21 @@
-import { Countdown } from '@components/UIElements/CountDown';
-import { LENSHUB_PROXY_ABI } from '@dragverse/abis';
-import { tw } from '@dragverse/browser';
+import { Countdown } from '@components/UIElements/CountDown'
+import { LENSHUB_PROXY_ABI } from '@dragverse/abis'
+import { tw } from '@dragverse/browser'
 import {
   ERROR_MESSAGE,
   LENSHUB_PROXY_ADDRESS,
   SIGN_IN_REQUIRED
-} from '@dragverse/constants';
-import type { Profile } from '@dragverse/lens';
-import { useProfileLazyQuery } from '@dragverse/lens';
-import type { CustomErrorWithData } from '@dragverse/lens/custom-types';
-import { Button } from '@dragverse/ui';
-import useProfileStore from '@lib/store/idb/profile';
-import type { FC } from 'react';
-import { useEffect, useState } from 'react';
-import toast from 'react-hot-toast';
-import useHandleWrongNetwork from 'src/hooks/useHandleWrongNetwork';
-import { useWaitForTransactionReceipt, useWriteContract } from 'wagmi';
+} from '@dragverse/constants'
+import type { Profile } from '@dragverse/lens'
+import { useProfileLazyQuery } from '@dragverse/lens'
+import type { CustomErrorWithData } from '@dragverse/lens/custom-types'
+import { Button } from '@dragverse/ui'
+import useProfileStore from '@lib/store/idb/profile'
+import type { FC } from 'react'
+import { useEffect, useState } from 'react'
+import toast from 'react-hot-toast'
+import useHandleWrongNetwork from 'src/hooks/useHandleWrongNetwork'
+import { useWaitForTransactionReceipt, useWriteContract } from 'wagmi'
 
 const Guardian: FC = () => {
   const { activeProfile, setActiveProfile } = useProfileStore()
diff --git a/apps/web/src/components/Settings/DangerZone/index.tsx b/apps/web/src/components/Settings/DangerZone/index.tsx
index 6fed05235..927117b49 100644
--- a/apps/web/src/components/Settings/DangerZone/index.tsx
+++ b/apps/web/src/components/Settings/DangerZone/index.tsx
@@ -1,12 +1,12 @@
-import Badge from '@components/Common/Badge';
-import HoverableProfile from '@components/Common/HoverableProfile';
-import MetaTags from '@components/Common/MetaTags';
-import Stats from '@components/Profile/BasicInfo/Stats';
-import { getProfile, getProfilePicture } from '@dragverse/generic';
-import useProfileStore from '@lib/store/idb/profile';
+import Badge from '@components/Common/Badge'
+import HoverableProfile from '@components/Common/HoverableProfile'
+import MetaTags from '@components/Common/MetaTags'
+import Stats from '@components/Profile/BasicInfo/Stats'
+import { getProfile, getProfilePicture } from '@dragverse/generic'
+import useProfileStore from '@lib/store/idb/profile'
 
-import Delete from './Delete';
-import Guardian from './Guardian';
+import Delete from './Delete'
+import Guardian from './Guardian'
 
 const DangerZone = () => {
   const activeProfile = useProfileStore((state) => state.activeProfile)
diff --git a/apps/web/src/components/Settings/Follow/FeeFollow.tsx b/apps/web/src/components/Settings/Follow/FeeFollow.tsx
index bf67e6a78..7de31472d 100644
--- a/apps/web/src/components/Settings/Follow/FeeFollow.tsx
+++ b/apps/web/src/components/Settings/Follow/FeeFollow.tsx
@@ -1,28 +1,28 @@
-import { LENSHUB_PROXY_ABI } from '@dragverse/abis';
-import { useCopyToClipboard } from '@dragverse/browser';
+import { LENSHUB_PROXY_ABI } from '@dragverse/abis'
+import { useCopyToClipboard } from '@dragverse/browser'
 import {
   ERROR_MESSAGE,
   LENSHUB_PROXY_ADDRESS,
   REQUESTING_SIGNATURE_MESSAGE,
   WMATIC_TOKEN_ADDRESS
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import {
   checkLensManagerPermissions,
   getProfile,
   getSignature,
   shortenAddress
-} from '@dragverse/generic';
+} from '@dragverse/generic'
 import type {
   CreateSetFollowModuleBroadcastItemResult,
   FeeFollowModuleSettings,
   Profile
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import {
   useBroadcastOnchainMutation,
   useCreateSetFollowModuleTypedDataMutation,
   useProfileFollowModuleQuery
-} from '@dragverse/lens';
-import type { CustomErrorWithData } from '@dragverse/lens/custom-types';
+} from '@dragverse/lens'
+import type { CustomErrorWithData } from '@dragverse/lens/custom-types'
 import {
   Button,
   Input,
@@ -30,19 +30,19 @@ import {
   SelectItem,
   Spinner,
   Tooltip
-} from '@dragverse/ui';
-import { zodResolver } from '@hookform/resolvers/zod';
-import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork';
-import usePendingTxn from '@hooks/usePendingTxn';
-import useProfileStore from '@lib/store/idb/profile';
-import useAllowedTokensStore from '@lib/store/idb/tokens';
-import useNonceStore from '@lib/store/nonce';
-import { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import toast from 'react-hot-toast';
-import { useSignTypedData, useWriteContract } from 'wagmi';
-import type { z } from 'zod';
-import { number, object, string } from 'zod';
+} from '@dragverse/ui'
+import { zodResolver } from '@hookform/resolvers/zod'
+import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork'
+import usePendingTxn from '@hooks/usePendingTxn'
+import useProfileStore from '@lib/store/idb/profile'
+import useAllowedTokensStore from '@lib/store/idb/tokens'
+import useNonceStore from '@lib/store/nonce'
+import { useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import toast from 'react-hot-toast'
+import { useSignTypedData, useWriteContract } from 'wagmi'
+import type { z } from 'zod'
+import { number, object, string } from 'zod'
 
 type Props = {
   profile: Profile
diff --git a/apps/web/src/components/Settings/Follow/RevertFollow.tsx b/apps/web/src/components/Settings/Follow/RevertFollow.tsx
index bcec83e66..12d775ff8 100644
--- a/apps/web/src/components/Settings/Follow/RevertFollow.tsx
+++ b/apps/web/src/components/Settings/Follow/RevertFollow.tsx
@@ -1,33 +1,33 @@
-import { LENSHUB_PROXY_ABI } from '@dragverse/abis';
+import { LENSHUB_PROXY_ABI } from '@dragverse/abis'
 import {
   ERROR_MESSAGE,
   LENSHUB_PROXY_ADDRESS,
   REQUESTING_SIGNATURE_MESSAGE
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import {
-  EVENTS,
-  Tower,
   checkLensManagerPermissions,
-  getSignature
-} from '@dragverse/generic';
+  EVENTS,
+  getSignature,
+  Tower
+} from '@dragverse/generic'
 import type {
   CreateSetFollowModuleBroadcastItemResult,
   Profile
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import {
   FollowModuleType,
   useBroadcastOnchainMutation,
   useCreateSetFollowModuleTypedDataMutation
-} from '@dragverse/lens';
-import type { CustomErrorWithData } from '@dragverse/lens/custom-types';
-import { Button, Spinner } from '@dragverse/ui';
-import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork';
-import usePendingTxn from '@hooks/usePendingTxn';
-import useProfileStore from '@lib/store/idb/profile';
-import useNonceStore from '@lib/store/nonce';
-import { useEffect, useState } from 'react';
-import toast from 'react-hot-toast';
-import { useSignTypedData, useWriteContract } from 'wagmi';
+} from '@dragverse/lens'
+import type { CustomErrorWithData } from '@dragverse/lens/custom-types'
+import { Button, Spinner } from '@dragverse/ui'
+import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork'
+import usePendingTxn from '@hooks/usePendingTxn'
+import useProfileStore from '@lib/store/idb/profile'
+import useNonceStore from '@lib/store/nonce'
+import { useEffect, useState } from 'react'
+import toast from 'react-hot-toast'
+import { useSignTypedData, useWriteContract } from 'wagmi'
 
 type Props = {
   profile: Profile
diff --git a/apps/web/src/components/Settings/Handles/List.tsx b/apps/web/src/components/Settings/Handles/List.tsx
index e71f3c0ad..93ed54d7a 100644
--- a/apps/web/src/components/Settings/Handles/List.tsx
+++ b/apps/web/src/components/Settings/Handles/List.tsx
@@ -1,11 +1,11 @@
-import { NoDataFound } from '@components/UIElements/NoDataFound';
-import { INFINITE_SCROLL_ROOT_MARGIN } from '@dragverse/constants';
-import type { HandleInfo, OwnedHandlesRequest } from '@dragverse/lens';
-import { useOwnedHandlesQuery } from '@dragverse/lens';
-import { Spinner } from '@dragverse/ui';
-import Link from 'next/link';
-import { useInView } from 'react-cool-inview';
-import { useAccount } from 'wagmi';
+import { NoDataFound } from '@components/UIElements/NoDataFound'
+import { INFINITE_SCROLL_ROOT_MARGIN } from '@dragverse/constants'
+import type { HandleInfo, OwnedHandlesRequest } from '@dragverse/lens'
+import { useOwnedHandlesQuery } from '@dragverse/lens'
+import { Spinner } from '@dragverse/ui'
+import Link from 'next/link'
+import { useInView } from 'react-cool-inview'
+import { useAccount } from 'wagmi'
 
 const List = () => {
   const { address } = useAccount()
diff --git a/apps/web/src/components/Settings/Manager/LensManager/ToggleLensManager.tsx b/apps/web/src/components/Settings/Manager/LensManager/ToggleLensManager.tsx
index 62f8b8965..fe3d2cd01 100644
--- a/apps/web/src/components/Settings/Manager/LensManager/ToggleLensManager.tsx
+++ b/apps/web/src/components/Settings/Manager/LensManager/ToggleLensManager.tsx
@@ -1,29 +1,29 @@
-import { LENSHUB_PROXY_ABI } from '@dragverse/abis';
+import { LENSHUB_PROXY_ABI } from '@dragverse/abis'
 import {
   ERROR_MESSAGE,
   LENSHUB_PROXY_ADDRESS,
   REQUESTING_SIGNATURE_MESSAGE
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import {
-  EVENTS,
-  Tower,
   checkLensManagerPermissions,
-  getSignature
-} from '@dragverse/generic';
-import type { Profile } from '@dragverse/lens';
+  EVENTS,
+  getSignature,
+  Tower
+} from '@dragverse/generic'
+import type { Profile } from '@dragverse/lens'
 import {
   useBroadcastOnchainMutation,
   useCreateChangeProfileManagersTypedDataMutation
-} from '@dragverse/lens';
-import type { CustomErrorWithData } from '@dragverse/lens/custom-types';
-import { Button } from '@dragverse/ui';
-import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork';
-import usePendingTxn from '@hooks/usePendingTxn';
-import useProfileStore from '@lib/store/idb/profile';
-import useNonceStore from '@lib/store/nonce';
-import { useEffect, useState } from 'react';
-import toast from 'react-hot-toast';
-import { useSignTypedData, useWriteContract } from 'wagmi';
+} from '@dragverse/lens'
+import type { CustomErrorWithData } from '@dragverse/lens/custom-types'
+import { Button } from '@dragverse/ui'
+import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork'
+import usePendingTxn from '@hooks/usePendingTxn'
+import useProfileStore from '@lib/store/idb/profile'
+import useNonceStore from '@lib/store/nonce'
+import { useEffect, useState } from 'react'
+import toast from 'react-hot-toast'
+import { useSignTypedData, useWriteContract } from 'wagmi'
 
 const ToggleLensManager = () => {
   const [loading, setLoading] = useState(false)
diff --git a/apps/web/src/components/Settings/Manager/LensManager/index.tsx b/apps/web/src/components/Settings/Manager/LensManager/index.tsx
index a308430cb..9b8c3b33a 100644
--- a/apps/web/src/components/Settings/Manager/LensManager/index.tsx
+++ b/apps/web/src/components/Settings/Manager/LensManager/index.tsx
@@ -1,7 +1,7 @@
-import { TAPE_APP_NAME } from '@dragverse/constants';
-import useProfileStore from '@lib/store/idb/profile';
+import { TAPE_APP_NAME } from '@dragverse/constants'
+import useProfileStore from '@lib/store/idb/profile'
 
-import ToggleLensManager from './ToggleLensManager';
+import ToggleLensManager from './ToggleLensManager'
 
 const LensManager = () => {
   const activeProfile = useProfileStore((state) => state.activeProfile)
diff --git a/apps/web/src/components/Settings/Manager/Managed.tsx b/apps/web/src/components/Settings/Manager/Managed.tsx
index aec56b1de..32cdf1523 100644
--- a/apps/web/src/components/Settings/Manager/Managed.tsx
+++ b/apps/web/src/components/Settings/Manager/Managed.tsx
@@ -1,6 +1,6 @@
-import Badge from '@components/Common/Badge';
-import { NoDataFound } from '@components/UIElements/NoDataFound';
-import { INFINITE_SCROLL_ROOT_MARGIN } from '@dragverse/constants';
+import Badge from '@components/Common/Badge'
+import { NoDataFound } from '@components/UIElements/NoDataFound'
+import { INFINITE_SCROLL_ROOT_MARGIN } from '@dragverse/constants'
 import {
   formatNumber,
   getProfile,
@@ -8,13 +8,13 @@ import {
   getProfilePicture,
   imageCdn,
   sanitizeDStorageUrl
-} from '@dragverse/generic';
-import type { Profile, ProfilesManagedRequest } from '@dragverse/lens';
-import { useProfilesManagedQuery } from '@dragverse/lens';
-import { Spinner } from '@dragverse/ui';
-import useProfileStore from '@lib/store/idb/profile';
-import Link from 'next/link';
-import { useInView } from 'react-cool-inview';
+} from '@dragverse/generic'
+import type { Profile, ProfilesManagedRequest } from '@dragverse/lens'
+import { useProfilesManagedQuery } from '@dragverse/lens'
+import { Spinner } from '@dragverse/ui'
+import useProfileStore from '@lib/store/idb/profile'
+import Link from 'next/link'
+import { useInView } from 'react-cool-inview'
 
 const Managed = () => {
   const activeProfile = useProfileStore(
diff --git a/apps/web/src/components/Settings/Manager/Managers.tsx b/apps/web/src/components/Settings/Manager/Managers.tsx
index 6a8dc5b8b..dcb428305 100644
--- a/apps/web/src/components/Settings/Manager/Managers.tsx
+++ b/apps/web/src/components/Settings/Manager/Managers.tsx
@@ -1,39 +1,39 @@
-import AddressExplorerLink from '@components/Common/Links/AddressExplorerLink';
-import { NoDataFound } from '@components/UIElements/NoDataFound';
-import { LENSHUB_PROXY_ABI } from '@dragverse/abis';
+import AddressExplorerLink from '@components/Common/Links/AddressExplorerLink'
+import { NoDataFound } from '@components/UIElements/NoDataFound'
+import { LENSHUB_PROXY_ABI } from '@dragverse/abis'
 import {
   ERROR_MESSAGE,
   INFINITE_SCROLL_ROOT_MARGIN,
   LENSHUB_PROXY_ADDRESS,
   REQUESTING_SIGNATURE_MESSAGE
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import {
   checkLensManagerPermissions,
   getSignature,
   shortenAddress
-} from '@dragverse/generic';
-import type { ProfileManagersRequest } from '@dragverse/lens';
+} from '@dragverse/generic'
+import type { ProfileManagersRequest } from '@dragverse/lens'
 import {
   ChangeProfileManagerActionType,
   useBroadcastOnchainMutation,
   useCreateChangeProfileManagersTypedDataMutation,
   useProfileManagersQuery
-} from '@dragverse/lens';
-import type { CustomErrorWithData } from '@dragverse/lens/custom-types';
-import { Button, ExternalOutline, Input, Modal, Spinner } from '@dragverse/ui';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useDid } from '@hooks/useDid';
-import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork';
-import usePendingTxn from '@hooks/usePendingTxn';
-import useProfileStore from '@lib/store/idb/profile';
-import useNonceStore from '@lib/store/nonce';
-import { useEffect, useMemo, useState } from 'react';
-import { useInView } from 'react-cool-inview';
-import { useForm } from 'react-hook-form';
-import toast from 'react-hot-toast';
-import { isAddress } from 'viem';
-import { useSignTypedData, useWriteContract } from 'wagmi';
-import { object, string, type z } from 'zod';
+} from '@dragverse/lens'
+import type { CustomErrorWithData } from '@dragverse/lens/custom-types'
+import { Button, ExternalOutline, Input, Modal, Spinner } from '@dragverse/ui'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useDid } from '@hooks/useDid'
+import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork'
+import usePendingTxn from '@hooks/usePendingTxn'
+import useProfileStore from '@lib/store/idb/profile'
+import useNonceStore from '@lib/store/nonce'
+import { useEffect, useMemo, useState } from 'react'
+import { useInView } from 'react-cool-inview'
+import { useForm } from 'react-hook-form'
+import toast from 'react-hot-toast'
+import { isAddress } from 'viem'
+import { useSignTypedData, useWriteContract } from 'wagmi'
+import { object, string, type z } from 'zod'
 
 const formSchema = object({
   address: string().refine((addr) => isAddress(addr), {
diff --git a/apps/web/src/components/Settings/ProfileInterests/Topics.tsx b/apps/web/src/components/Settings/ProfileInterests/Topics.tsx
index 28f235d47..675bd3f89 100644
--- a/apps/web/src/components/Settings/ProfileInterests/Topics.tsx
+++ b/apps/web/src/components/Settings/ProfileInterests/Topics.tsx
@@ -1,18 +1,18 @@
-import { tw } from '@dragverse/browser';
-import { EVENTS, sanitizeProfileInterests, Tower } from '@dragverse/generic';
+import { tw } from '@dragverse/browser'
+import { EVENTS, sanitizeProfileInterests, Tower } from '@dragverse/generic'
 import type {
   ProfileInterestsRequest,
   ProfileInterestTypes
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import {
   useAddProfileInterestsMutation,
   useProfileInterestsOptionsQuery,
   useRemoveProfileInterestsMutation
-} from '@dragverse/lens';
-import { useApolloClient } from '@dragverse/lens/apollo';
-import { Spinner } from '@dragverse/ui';
-import useProfileStore from '@lib/store/idb/profile';
-import { useEffect } from 'react';
+} from '@dragverse/lens'
+import { useApolloClient } from '@dragverse/lens/apollo'
+import { Spinner } from '@dragverse/ui'
+import useProfileStore from '@lib/store/idb/profile'
+import { useEffect } from 'react'
 
 const MAX_TOPICS_ALLOWED = 12
 
diff --git a/apps/web/src/components/Settings/Sessions/List.tsx b/apps/web/src/components/Settings/Sessions/List.tsx
index 4ea69f680..55d30d7f7 100644
--- a/apps/web/src/components/Settings/Sessions/List.tsx
+++ b/apps/web/src/components/Settings/Sessions/List.tsx
@@ -1,11 +1,11 @@
-import { NoDataFound } from '@components/UIElements/NoDataFound';
-import { INFINITE_SCROLL_ROOT_MARGIN } from '@dragverse/constants';
-import type { ApprovedAuthenticationRequest } from '@dragverse/lens';
+import { NoDataFound } from '@components/UIElements/NoDataFound'
+import { INFINITE_SCROLL_ROOT_MARGIN } from '@dragverse/constants'
+import type { ApprovedAuthenticationRequest } from '@dragverse/lens'
 import {
   LimitType,
   useApprovedAuthenticationsQuery,
   useRevokeAuthenticationMutation
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import {
   Accordion,
   AccordionContent,
@@ -14,12 +14,12 @@ import {
   Button,
   ChevronDownOutline,
   Spinner
-} from '@dragverse/ui';
-import { getDateString } from '@lib/formatTime';
-import useProfileStore from '@lib/store/idb/profile';
-import { useState } from 'react';
-import { useInView } from 'react-cool-inview';
-import toast from 'react-hot-toast';
+} from '@dragverse/ui'
+import { getDateString } from '@lib/formatTime'
+import useProfileStore from '@lib/store/idb/profile'
+import { useState } from 'react'
+import { useInView } from 'react-cool-inview'
+import toast from 'react-hot-toast'
 
 const List = () => {
   const [revokingSessionId, setRevokingSessionId] = useState('')
diff --git a/apps/web/src/components/Settings/SettingsSidebar.tsx b/apps/web/src/components/Settings/SettingsSidebar.tsx
index 06ffe1376..1d2849114 100644
--- a/apps/web/src/components/Settings/SettingsSidebar.tsx
+++ b/apps/web/src/components/Settings/SettingsSidebar.tsx
@@ -1,5 +1,5 @@
-import { tw } from '@dragverse/browser';
-import { getIsProfileOwner } from '@dragverse/generic';
+import { tw } from '@dragverse/browser'
+import { getIsProfileOwner } from '@dragverse/generic'
 import {
   InterestsOutline,
   KeyOutline,
@@ -10,11 +10,11 @@ import {
   SubscribeOutline,
   UserOutline,
   WarningOutline
-} from '@dragverse/ui';
-import useProfileStore from '@lib/store/idb/profile';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import { useAccount } from 'wagmi';
+} from '@dragverse/ui'
+import useProfileStore from '@lib/store/idb/profile'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useAccount } from 'wagmi'
 
 import {
   SETTINGS,
@@ -26,7 +26,7 @@ import {
   SETTINGS_INTERESTS,
   SETTINGS_MANAGER,
   SETTINGS_SESSIONS
-} from '.';
+} from '.'
 
 const SettingsSidebar = () => {
   const router = useRouter()
diff --git a/apps/web/src/components/Settings/index.tsx b/apps/web/src/components/Settings/index.tsx
index 43057bebb..5aef66bd6 100644
--- a/apps/web/src/components/Settings/index.tsx
+++ b/apps/web/src/components/Settings/index.tsx
@@ -1,24 +1,24 @@
-import MetaTags from '@components/Common/MetaTags';
-import SettingsShimmer from '@components/Shimmers/SettingsShimmer';
-import { EVENTS, Tower } from '@dragverse/generic';
-import type { Profile } from '@dragverse/lens';
-import { useProfileQuery } from '@dragverse/lens';
-import useProfileStore from '@lib/store/idb/profile';
-import { useRouter } from 'next/router';
-import { useEffect } from 'react';
-import Custom404 from 'src/pages/404';
-import Custom500 from 'src/pages/500';
+import MetaTags from '@components/Common/MetaTags'
+import SettingsShimmer from '@components/Shimmers/SettingsShimmer'
+import { EVENTS, Tower } from '@dragverse/generic'
+import type { Profile } from '@dragverse/lens'
+import { useProfileQuery } from '@dragverse/lens'
+import useProfileStore from '@lib/store/idb/profile'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import Custom404 from 'src/pages/404'
+import Custom500 from 'src/pages/500'
 
-import Allowance from './Allowance';
-import BasicInfo from './BasicInfo';
-import Blocked from './Blocked';
-import DangerZone from './DangerZone';
-import FollowSettings from './Follow';
-import Handles from './Handles';
-import ProfileManager from './Manager';
-import ProfileInterests from './ProfileInterests';
-import Sessions from './Sessions';
-import SettingsSidebar from './SettingsSidebar';
+import Allowance from './Allowance'
+import BasicInfo from './BasicInfo'
+import Blocked from './Blocked'
+import DangerZone from './DangerZone'
+import FollowSettings from './Follow'
+import Handles from './Handles'
+import ProfileManager from './Manager'
+import ProfileInterests from './ProfileInterests'
+import Sessions from './Sessions'
+import SettingsSidebar from './SettingsSidebar'
 
 export const SETTINGS_FOLLOW = '/settings/follow'
 export const SETTINGS_HANDLES = '/settings/handles'
diff --git a/apps/web/src/components/Shimmers/SettingsShimmer.tsx b/apps/web/src/components/Shimmers/SettingsShimmer.tsx
index ac4241001..0c74ae427 100644
--- a/apps/web/src/components/Shimmers/SettingsShimmer.tsx
+++ b/apps/web/src/components/Shimmers/SettingsShimmer.tsx
@@ -1,4 +1,4 @@
-import { Spinner } from '@dragverse/ui';
+import { Spinner } from '@dragverse/ui'
 
 const SettingsShimmer = () => {
   return (
diff --git a/apps/web/src/components/UIElements/EmojiPicker.tsx b/apps/web/src/components/UIElements/EmojiPicker.tsx
index f6a6ccab6..b575726d6 100644
--- a/apps/web/src/components/UIElements/EmojiPicker.tsx
+++ b/apps/web/src/components/UIElements/EmojiPicker.tsx
@@ -1,15 +1,15 @@
-import { STATIC_ASSETS } from '@dragverse/constants';
+import { STATIC_ASSETS } from '@dragverse/constants'
 import {
   EmojiOutline,
   Popover,
   PopoverContent,
   PopoverTrigger
-} from '@dragverse/ui';
-import Picker from '@emoji-mart/react';
-import axios from 'axios';
-import { useTheme } from 'next-themes';
-import type { FC } from 'react';
-import { useEffect, useState } from 'react';
+} from '@dragverse/ui'
+import Picker from '@emoji-mart/react'
+import axios from 'axios'
+import { useTheme } from 'next-themes'
+import type { FC } from 'react'
+import { useEffect, useState } from 'react'
 
 type EmojiData = {
   aliases: Object
diff --git a/apps/web/src/components/UIElements/InputMentions.tsx b/apps/web/src/components/UIElements/InputMentions.tsx
index d5d368c4e..9d60fd41b 100644
--- a/apps/web/src/components/UIElements/InputMentions.tsx
+++ b/apps/web/src/components/UIElements/InputMentions.tsx
@@ -1,14 +1,14 @@
-import { tw, useDebounce, useOutsideClick } from '@dragverse/browser';
-import { LENS_CUSTOM_FILTERS } from '@dragverse/constants';
-import { getProfile, getProfilePicture } from '@dragverse/generic';
-import type { Profile } from '@dragverse/lens';
-import { LimitType, useSearchProfilesLazyQuery } from '@dragverse/lens';
-import { Spinner, TextArea } from '@dragverse/ui';
-import type { ComponentProps, FC } from 'react';
-import React, { useEffect, useRef, useState } from 'react';
-import getCaretCoordinates from 'textarea-caret';
-
-import ProfileSuggestion from './ProfileSuggestion';
+import { tw, useDebounce, useOutsideClick } from '@dragverse/browser'
+import { LENS_CUSTOM_FILTERS } from '@dragverse/constants'
+import { getProfile, getProfilePicture } from '@dragverse/generic'
+import type { Profile } from '@dragverse/lens'
+import { LimitType, useSearchProfilesLazyQuery } from '@dragverse/lens'
+import { Spinner, TextArea } from '@dragverse/ui'
+import type { ComponentProps, FC } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
+import getCaretCoordinates from 'textarea-caret'
+
+import ProfileSuggestion from './ProfileSuggestion'
 
 interface TextAreaProps extends Omit<ComponentProps<'textarea'>, 'prefix'> {
   label?: string
@@ -147,7 +147,7 @@ const InputMentions: FC<TextAreaProps> = ({
           ref={resultsRef}
           style={dropdownStyle}
           onKeyDown={popoverHandleKeyDown}
-          className="rounded-medium tape-border absolute z-10 mt-10 space-y-1 bg-white p-1.5 dark:bg-brand-850"
+          className="rounded-medium tape-border dark:bg-brand-850 absolute z-10 mt-10 space-y-1 bg-white p-1.5"
         >
           {loading ? (
             <Spinner />
diff --git a/apps/web/src/components/UIElements/NoDataFound.tsx b/apps/web/src/components/UIElements/NoDataFound.tsx
index a49a44dc4..c56684a94 100644
--- a/apps/web/src/components/UIElements/NoDataFound.tsx
+++ b/apps/web/src/components/UIElements/NoDataFound.tsx
@@ -1,5 +1,5 @@
-import { tw } from '@dragverse/browser';
-import { TAPE_LOGO } from '@dragverse/constants';
+import { tw } from '@dragverse/browser'
+import { TAPE_LOGO } from '@dragverse/constants'
 
 export const NoDataFound = ({
   text = 'No Data Found',
diff --git a/apps/web/src/components/UIElements/ProfileSuggestion.tsx b/apps/web/src/components/UIElements/ProfileSuggestion.tsx
index 88ab00434..48a075838 100644
--- a/apps/web/src/components/UIElements/ProfileSuggestion.tsx
+++ b/apps/web/src/components/UIElements/ProfileSuggestion.tsx
@@ -1,7 +1,7 @@
-import Badge from '@components/Common/Badge';
-import { tw } from '@dragverse/browser';
-import { formatNumber } from '@dragverse/generic';
-import type { FC } from 'react';
+import Badge from '@components/Common/Badge'
+import { tw } from '@dragverse/browser'
+import { formatNumber } from '@dragverse/generic'
+import type { FC } from 'react'
 
 type Props = {
   className?: string
diff --git a/apps/web/src/components/Watch/Comments/CommentMedia.tsx b/apps/web/src/components/Watch/Comments/CommentMedia.tsx
index 4f9eea75c..d739c6cba 100644
--- a/apps/web/src/components/Watch/Comments/CommentMedia.tsx
+++ b/apps/web/src/components/Watch/Comments/CommentMedia.tsx
@@ -1,16 +1,16 @@
 import {
-    getPublication,
-    getPublicationMediaUrl,
-    imageCdn,
-    sanitizeDStorageUrl
-} from '@dragverse/generic';
-import type { AnyPublication } from '@dragverse/lens';
-import { Modal } from '@dragverse/ui';
-import type { FC } from 'react';
-import { useState } from 'react';
+  getPublication,
+  getPublicationMediaUrl,
+  imageCdn,
+  sanitizeDStorageUrl
+} from '@dragverse/generic'
+import type { AnyPublication } from '@dragverse/lens'
+import { Modal } from '@dragverse/ui'
+import type { FC } from 'react'
+import { useState } from 'react'
 
-import AudioComment from './AudioComment';
-import VideoComment from './VideoComment';
+import AudioComment from './AudioComment'
+import VideoComment from './VideoComment'
 
 type Props = {
   comment: AnyPublication
@@ -56,7 +56,7 @@ const CommentMedia: FC<Props> = ({ comment }) => {
               }}
             >
               <img
-                className="size-20 rounded-xl bg-white object-cover dark:bg-brand-850"
+                className="dark:bg-brand-850 size-20 rounded-xl bg-white object-cover"
                 src={imageCdn(sanitizeDStorageUrl(uri), 'AVATAR_LG')}
                 alt={'attachment'}
                 draggable={false}
diff --git a/apps/web/src/components/Watch/Comments/CommentOptions.tsx b/apps/web/src/components/Watch/Comments/CommentOptions.tsx
index 93513f7e1..e629b080a 100644
--- a/apps/web/src/components/Watch/Comments/CommentOptions.tsx
+++ b/apps/web/src/components/Watch/Comments/CommentOptions.tsx
@@ -1,9 +1,9 @@
-import ReportPublication from '@components/Report/Publication';
-import Confirm from '@components/UIElements/Confirm';
-import { SIGN_IN_REQUIRED } from '@dragverse/constants';
-import { EVENTS, Tower } from '@dragverse/generic';
-import type { Comment } from '@dragverse/lens';
-import { useHidePublicationMutation } from '@dragverse/lens';
+import ReportPublication from '@components/Report/Publication'
+import Confirm from '@components/UIElements/Confirm'
+import { SIGN_IN_REQUIRED } from '@dragverse/constants'
+import { EVENTS, Tower } from '@dragverse/generic'
+import type { Comment } from '@dragverse/lens'
+import { useHidePublicationMutation } from '@dragverse/lens'
 import {
   DropdownMenu,
   DropdownMenuItem,
@@ -11,12 +11,12 @@ import {
   Modal,
   ThreeDotsOutline,
   TrashOutline
-} from '@dragverse/ui';
-import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork';
-import useProfileStore from '@lib/store/idb/profile';
-import type { FC } from 'react';
-import { useState } from 'react';
-import toast from 'react-hot-toast';
+} from '@dragverse/ui'
+import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork'
+import useProfileStore from '@lib/store/idb/profile'
+import type { FC } from 'react'
+import { useState } from 'react'
+import toast from 'react-hot-toast'
 
 type Props = {
   comment: Comment
diff --git a/apps/web/src/components/Watch/Comments/CommentReplies.tsx b/apps/web/src/components/Watch/Comments/CommentReplies.tsx
index f2d351fe3..a96dad24b 100644
--- a/apps/web/src/components/Watch/Comments/CommentReplies.tsx
+++ b/apps/web/src/components/Watch/Comments/CommentReplies.tsx
@@ -1,34 +1,34 @@
-import Badge from '@components/Common/Badge';
-import InterweaveContent from '@components/Common/InterweaveContent';
-import CommentsShimmer from '@components/Shimmers/CommentsShimmer';
-import { tw } from '@dragverse/browser';
-import { LENS_CUSTOM_FILTERS } from '@dragverse/constants';
+import Badge from '@components/Common/Badge'
+import InterweaveContent from '@components/Common/InterweaveContent'
+import CommentsShimmer from '@components/Shimmers/CommentsShimmer'
+import { tw } from '@dragverse/browser'
+import { LENS_CUSTOM_FILTERS } from '@dragverse/constants'
 import {
   getProfile,
   getProfilePicture,
   getPublicationData
-} from '@dragverse/generic';
+} from '@dragverse/generic'
 import {
+  type Comment,
   CommentRankingFilterType,
   LimitType,
-  usePublicationsQuery,
-  type Comment,
   type Profile,
-  type PublicationsRequest
-} from '@dragverse/lens';
+  type PublicationsRequest,
+  usePublicationsQuery
+} from '@dragverse/lens'
 import {
   ChevronDownOutline,
   ChevronUpOutline,
   ReplyOutline
-} from '@dragverse/ui';
-import { getShortHandTime } from '@lib/formatTime';
-import Link from 'next/link';
-import type { FC } from 'react';
-import { useEffect, useState } from 'react';
+} from '@dragverse/ui'
+import { getShortHandTime } from '@lib/formatTime'
+import Link from 'next/link'
+import type { FC } from 'react'
+import { useEffect, useState } from 'react'
 
-import PublicationReaction from '../../Common/Publication/PublicationReaction';
-import CommentMedia from './CommentMedia';
-import CommentOptions from './CommentOptions';
+import PublicationReaction from '../../Common/Publication/PublicationReaction'
+import CommentMedia from './CommentMedia'
+import CommentOptions from './CommentOptions'
 
 type ReplyContentProps = {
   comment: Comment
diff --git a/apps/web/src/components/Watch/Comments/CommentsFilter.tsx b/apps/web/src/components/Watch/Comments/CommentsFilter.tsx
index 155fe7d82..3b44b58cf 100644
--- a/apps/web/src/components/Watch/Comments/CommentsFilter.tsx
+++ b/apps/web/src/components/Watch/Comments/CommentsFilter.tsx
@@ -1,7 +1,7 @@
-import { tw } from '@dragverse/browser';
-import { CustomCommentsFilterEnum } from '@dragverse/lens/custom-types';
-import { DropdownMenu, DropdownMenuItem, SortOutline } from '@dragverse/ui';
-import useCommentStore from '@lib/store/comment';
+import { tw } from '@dragverse/browser'
+import { CustomCommentsFilterEnum } from '@dragverse/lens/custom-types'
+import { DropdownMenu, DropdownMenuItem, SortOutline } from '@dragverse/ui'
+import useCommentStore from '@lib/store/comment'
 
 const CommentsFilter = () => {
   const { selectedCommentFilter, setSelectedCommentFilter } = useCommentStore()
diff --git a/apps/web/src/components/Watch/Comments/NewComment.tsx b/apps/web/src/components/Watch/Comments/NewComment.tsx
index 7f4b6995a..d9554cb80 100644
--- a/apps/web/src/components/Watch/Comments/NewComment.tsx
+++ b/apps/web/src/components/Watch/Comments/NewComment.tsx
@@ -1,59 +1,59 @@
-import EmojiPicker from '@components/UIElements/EmojiPicker';
-import InputMentions from '@components/UIElements/InputMentions';
-import { LENSHUB_PROXY_ABI } from '@dragverse/abis';
-import { getUserLocale } from '@dragverse/browser';
+import EmojiPicker from '@components/UIElements/EmojiPicker'
+import InputMentions from '@components/UIElements/InputMentions'
+import { LENSHUB_PROXY_ABI } from '@dragverse/abis'
+import { getUserLocale } from '@dragverse/browser'
 import {
   ERROR_MESSAGE,
   LENSHUB_PROXY_ADDRESS,
   REQUESTING_SIGNATURE_MESSAGE,
   TAPE_APP_ID,
   TAPE_WEBSITE_URL
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import {
-  EVENTS,
-  Tower,
   checkLensManagerPermissions,
+  EVENTS,
   getProfile,
   getPublication,
   getPublicationData,
   getSignature,
   logger,
+  Tower,
   trimify,
   uploadToAr
-} from '@dragverse/generic';
+} from '@dragverse/generic'
 import type {
   AnyPublication,
   CreateMomokaCommentEip712TypedData,
   CreateOnchainCommentEip712TypedData
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import {
   PublicationDocument,
-  useBroadcastOnMomokaMutation,
   useBroadcastOnchainMutation,
-  useCommentOnMomokaMutation,
+  useBroadcastOnMomokaMutation,
   useCommentOnchainMutation,
+  useCommentOnMomokaMutation,
   useCreateMomokaCommentTypedDataMutation,
   useCreateOnchainCommentTypedDataMutation,
   usePublicationLazyQuery
-} from '@dragverse/lens';
-import { useApolloClient } from '@dragverse/lens/apollo';
-import type { CustomErrorWithData } from '@dragverse/lens/custom-types';
-import { Button } from '@dragverse/ui';
-import { zodResolver } from '@hookform/resolvers/zod';
-import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork';
-import type { MetadataAttribute } from '@lens-protocol/metadata';
-import { MetadataAttributeType, textOnly } from '@lens-protocol/metadata';
-import useProfileStore from '@lib/store/idb/profile';
-import useNonceStore from '@lib/store/nonce';
-import usePersistStore from '@lib/store/persist';
-import type { FC } from 'react';
-import { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import toast from 'react-hot-toast';
-import { v4 as uuidv4 } from 'uuid';
-import { useSignTypedData, useWriteContract } from 'wagmi';
-import type { z } from 'zod';
-import { object, string } from 'zod';
+} from '@dragverse/lens'
+import { useApolloClient } from '@dragverse/lens/apollo'
+import type { CustomErrorWithData } from '@dragverse/lens/custom-types'
+import { Button } from '@dragverse/ui'
+import { zodResolver } from '@hookform/resolvers/zod'
+import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork'
+import type { MetadataAttribute } from '@lens-protocol/metadata'
+import { MetadataAttributeType, textOnly } from '@lens-protocol/metadata'
+import useProfileStore from '@lib/store/idb/profile'
+import useNonceStore from '@lib/store/nonce'
+import usePersistStore from '@lib/store/persist'
+import type { FC } from 'react'
+import { useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import toast from 'react-hot-toast'
+import { v4 as uuidv4 } from 'uuid'
+import { useSignTypedData, useWriteContract } from 'wagmi'
+import type { z } from 'zod'
+import { object, string } from 'zod'
 
 type Props = {
   video: AnyPublication
diff --git a/apps/web/src/components/Watch/Comments/NonRelevantComments.tsx b/apps/web/src/components/Watch/Comments/NonRelevantComments.tsx
index 65d6e672d..370e9c1b0 100644
--- a/apps/web/src/components/Watch/Comments/NonRelevantComments.tsx
+++ b/apps/web/src/components/Watch/Comments/NonRelevantComments.tsx
@@ -1,25 +1,25 @@
-import CommentsShimmer from '@components/Shimmers/CommentsShimmer';
+import CommentsShimmer from '@components/Shimmers/CommentsShimmer'
 import {
   INFINITE_SCROLL_ROOT_MARGIN,
   LENS_CUSTOM_FILTERS
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import type {
   AnyPublication,
   Comment,
   MirrorablePublication,
   PublicationsRequest
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import {
   CommentRankingFilterType,
   LimitType,
   usePublicationsQuery
-} from '@dragverse/lens';
-import { ChevronDownOutline, ChevronUpOutline, Spinner } from '@dragverse/ui';
-import type { FC } from 'react';
-import { useState } from 'react';
-import { useInView } from 'react-cool-inview';
+} from '@dragverse/lens'
+import { ChevronDownOutline, ChevronUpOutline, Spinner } from '@dragverse/ui'
+import type { FC } from 'react'
+import { useState } from 'react'
+import { useInView } from 'react-cool-inview'
 
-import RenderComment from './RenderComment';
+import RenderComment from './RenderComment'
 
 type Props = {
   video: MirrorablePublication
diff --git a/apps/web/src/components/Watch/Comments/QueuedComment.tsx b/apps/web/src/components/Watch/Comments/QueuedComment.tsx
index 6e4a5f3a7..906700ae9 100644
--- a/apps/web/src/components/Watch/Comments/QueuedComment.tsx
+++ b/apps/web/src/components/Watch/Comments/QueuedComment.tsx
@@ -1,20 +1,20 @@
-import Badge from '@components/Common/Badge';
-import InterweaveContent from '@components/Common/InterweaveContent';
-import { getProfile, getProfilePicture } from '@dragverse/generic';
+import Badge from '@components/Common/Badge'
+import InterweaveContent from '@components/Common/InterweaveContent'
+import { getProfile, getProfilePicture } from '@dragverse/generic'
 import {
   LensTransactionStatusType,
   PublicationDocument,
   useLensTransactionStatusQuery,
   usePublicationLazyQuery,
   useTxIdToTxHashLazyQuery
-} from '@dragverse/lens';
-import { useApolloClient } from '@dragverse/lens/apollo';
-import type { QueuedCommentType } from '@dragverse/lens/custom-types';
-import { Tooltip } from '@dragverse/ui';
-import useProfileStore from '@lib/store/idb/profile';
-import usePersistStore from '@lib/store/persist';
-import Link from 'next/link';
-import type { FC } from 'react';
+} from '@dragverse/lens'
+import { useApolloClient } from '@dragverse/lens/apollo'
+import type { QueuedCommentType } from '@dragverse/lens/custom-types'
+import { Tooltip } from '@dragverse/ui'
+import useProfileStore from '@lib/store/idb/profile'
+import usePersistStore from '@lib/store/persist'
+import Link from 'next/link'
+import type { FC } from 'react'
 
 type Props = {
   queuedComment: QueuedCommentType
diff --git a/apps/web/src/components/Watch/Comments/RenderComment.tsx b/apps/web/src/components/Watch/Comments/RenderComment.tsx
index c145a2b22..d0a078473 100644
--- a/apps/web/src/components/Watch/Comments/RenderComment.tsx
+++ b/apps/web/src/components/Watch/Comments/RenderComment.tsx
@@ -1,15 +1,15 @@
-import Badge from '@components/Common/Badge';
-import HoverableProfile from '@components/Common/HoverableProfile';
-import InterweaveContent from '@components/Common/InterweaveContent';
-import { tw } from '@dragverse/browser';
-import { SIGN_IN_REQUIRED } from '@dragverse/constants';
+import Badge from '@components/Common/Badge'
+import HoverableProfile from '@components/Common/HoverableProfile'
+import InterweaveContent from '@components/Common/InterweaveContent'
+import { tw } from '@dragverse/browser'
+import { SIGN_IN_REQUIRED } from '@dragverse/constants'
 import {
   getProfile,
   getProfilePicture,
   getPublicationData,
   getValueFromKeyInAttributes
-} from '@dragverse/generic';
-import type { Comment } from '@dragverse/lens';
+} from '@dragverse/generic'
+import type { Comment } from '@dragverse/lens'
 import {
   ChevronDownOutline,
   ChevronUpOutline,
@@ -17,22 +17,22 @@ import {
   HeartFilled,
   ReplyOutline,
   Tooltip
-} from '@dragverse/ui';
-import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork';
-import { getShortHandTime } from '@lib/formatTime';
-import useProfileStore from '@lib/store/idb/profile';
-import usePersistStore from '@lib/store/persist';
-import Link from 'next/link';
-import type { FC } from 'react';
-import { useEffect, useState } from 'react';
-import toast from 'react-hot-toast';
+} from '@dragverse/ui'
+import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork'
+import { getShortHandTime } from '@lib/formatTime'
+import useProfileStore from '@lib/store/idb/profile'
+import usePersistStore from '@lib/store/persist'
+import Link from 'next/link'
+import type { FC } from 'react'
+import { useEffect, useState } from 'react'
+import toast from 'react-hot-toast'
 
-import PublicationReaction from '../../Common/Publication/PublicationReaction';
-import CommentMedia from './CommentMedia';
-import CommentOptions from './CommentOptions';
-import CommentReplies from './CommentReplies';
-import NewComment from './NewComment';
-import QueuedComment from './QueuedComment';
+import PublicationReaction from '../../Common/Publication/PublicationReaction'
+import CommentMedia from './CommentMedia'
+import CommentOptions from './CommentOptions'
+import CommentReplies from './CommentReplies'
+import NewComment from './NewComment'
+import QueuedComment from './QueuedComment'
 
 interface Props {
   comment: Comment
diff --git a/apps/web/src/components/Watch/OpenActions/Collect/index.tsx b/apps/web/src/components/Watch/OpenActions/Collect/index.tsx
index ad1c28a11..56037e2d9 100644
--- a/apps/web/src/components/Watch/OpenActions/Collect/index.tsx
+++ b/apps/web/src/components/Watch/OpenActions/Collect/index.tsx
@@ -1,11 +1,11 @@
-import AddressExplorerLink from '@components/Common/Links/AddressExplorerLink';
-import { Countdown } from '@components/UIElements/CountDown';
-import { LENSHUB_PROXY_ABI } from '@dragverse/abis';
+import AddressExplorerLink from '@components/Common/Links/AddressExplorerLink'
+import { Countdown } from '@components/UIElements/CountDown'
+import { LENSHUB_PROXY_ABI } from '@dragverse/abis'
 import {
   ERROR_MESSAGE,
   LENSHUB_PROXY_ADDRESS,
   SIGN_IN_REQUIRED
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import {
   checkLensManagerPermissions,
   formatNumber,
@@ -15,7 +15,7 @@ import {
   getSignature,
   imageCdn,
   shortenAddress
-} from '@dragverse/generic';
+} from '@dragverse/generic'
 import type {
   ActOnOpenActionLensManagerRequest,
   HandleInfo,
@@ -23,7 +23,7 @@ import type {
   PrimaryPublication,
   Profile,
   RecipientDataOutput
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import {
   OpenActionModuleType,
   useActOnOpenActionMutation,
@@ -35,31 +35,31 @@ import {
   useProfilesQuery,
   usePublicationQuery,
   useRevenueFromPublicationQuery
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import type {
   CustomErrorWithData,
   SupportedOpenActionModuleType
-} from '@dragverse/lens/custom-types';
-import { Button, Callout, Spinner, Tooltip, UserOutline } from '@dragverse/ui';
-import Link from 'next/link';
-import type { FC } from 'react';
-import { useEffect, useState } from 'react';
-import toast from 'react-hot-toast';
-import { formatUnits } from 'viem';
+} from '@dragverse/lens/custom-types'
+import { Button, Callout, Spinner, Tooltip, UserOutline } from '@dragverse/ui'
+import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork'
+import { getRelativeTime } from '@lib/formatTime'
+import { getCollectModuleOutput } from '@lib/getCollectModuleOutput'
+import useProfileStore from '@lib/store/idb/profile'
+import useNonceStore from '@lib/store/nonce'
+import Link from 'next/link'
+import type { FC } from 'react'
+import { useEffect, useState } from 'react'
+import toast from 'react-hot-toast'
+import { formatUnits } from 'viem'
 import {
   useAccount,
   useBalance,
   useSignTypedData,
   useWriteContract
-} from 'wagmi';
-
-import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork';
-import { getRelativeTime } from '@lib/formatTime';
-import { getCollectModuleOutput } from '@lib/getCollectModuleOutput';
-import useProfileStore from '@lib/store/idb/profile';
-import useNonceStore from '@lib/store/nonce';
-import BalanceAlert from '../BalanceAlert';
-import PermissionAlert from '../PermissionAlert';
+} from 'wagmi'
+
+import BalanceAlert from '../BalanceAlert'
+import PermissionAlert from '../PermissionAlert'
 
 type Props = {
   action: SupportedOpenActionModuleType
diff --git a/apps/web/src/components/Watch/OpenActions/PermissionAlert.tsx b/apps/web/src/components/Watch/OpenActions/PermissionAlert.tsx
index 983d262a9..ab3a2fa4a 100644
--- a/apps/web/src/components/Watch/OpenActions/PermissionAlert.tsx
+++ b/apps/web/src/components/Watch/OpenActions/PermissionAlert.tsx
@@ -1,15 +1,15 @@
-import type { ApprovedAllowanceAmountResult } from '@dragverse/lens';
+import type { ApprovedAllowanceAmountResult } from '@dragverse/lens'
 import {
   OpenActionModuleType,
   useGenerateModuleCurrencyApprovalDataLazyQuery
-} from '@dragverse/lens';
-import type { CustomErrorWithData } from '@dragverse/lens/custom-types';
-import { Button } from '@dragverse/ui';
-import { getCollectModuleConfig } from '@lib/getCollectModuleInput';
-import type { Dispatch, FC } from 'react';
-import { useEffect } from 'react';
-import toast from 'react-hot-toast';
-import { useSendTransaction, useWaitForTransactionReceipt } from 'wagmi';
+} from '@dragverse/lens'
+import type { CustomErrorWithData } from '@dragverse/lens/custom-types'
+import { Button } from '@dragverse/ui'
+import { getCollectModuleConfig } from '@lib/getCollectModuleInput'
+import type { Dispatch, FC } from 'react'
+import { useEffect } from 'react'
+import toast from 'react-hot-toast'
+import { useSendTransaction, useWaitForTransactionReceipt } from 'wagmi'
 
 type Props = {
   setIsAllowed: Dispatch<boolean>
diff --git a/apps/web/src/components/Watch/OpenActions/Unknown/Tip/index.tsx b/apps/web/src/components/Watch/OpenActions/Unknown/Tip/index.tsx
index a3ebf83e4..a3545fa35 100644
--- a/apps/web/src/components/Watch/OpenActions/Unknown/Tip/index.tsx
+++ b/apps/web/src/components/Watch/OpenActions/Unknown/Tip/index.tsx
@@ -1,15 +1,15 @@
 import { WMATIC_TOKEN_ADDRESS } from '@dragverse/constants'
 import {
-    useApprovedModuleAllowanceAmountQuery,
-    type ModuleMetadata,
-    type UnknownOpenActionModuleSettings
+  type ModuleMetadata,
+  type UnknownOpenActionModuleSettings,
+  useApprovedModuleAllowanceAmountQuery
 } from '@dragverse/lens'
 import {
-    Button,
-    RangeSlider,
-    Select,
-    SelectItem,
-    TipOutline
+  Button,
+  RangeSlider,
+  Select,
+  SelectItem,
+  TipOutline
 } from '@dragverse/ui'
 import { useDid } from '@hooks/useDid'
 import useAllowedTokensStore from '@lib/store/idb/tokens'
@@ -17,10 +17,10 @@ import type { FC } from 'react'
 import { useEffect, useState } from 'react'
 import toast from 'react-hot-toast'
 import {
-    decodeAbiParameters,
-    encodeAbiParameters,
-    formatUnits,
-    parseUnits
+  decodeAbiParameters,
+  encodeAbiParameters,
+  formatUnits,
+  parseUnits
 } from 'viem'
 import { useAccount, useBalance } from 'wagmi'
 
diff --git a/apps/web/src/components/Watch/OpenActions/Unknown/index.tsx b/apps/web/src/components/Watch/OpenActions/Unknown/index.tsx
index 32adb45ac..40af6f1bf 100644
--- a/apps/web/src/components/Watch/OpenActions/Unknown/index.tsx
+++ b/apps/web/src/components/Watch/OpenActions/Unknown/index.tsx
@@ -2,22 +2,22 @@ import { LENSHUB_PROXY_ABI } from '@dragverse/abis'
 import { ERROR_MESSAGE, LENSHUB_PROXY_ADDRESS } from '@dragverse/constants'
 import { checkLensManagerPermissions, getSignature } from '@dragverse/generic'
 import type {
-    ActOnOpenActionLensManagerRequest,
-    ModuleMetadata,
-    UnknownOpenActionModuleSettings
+  ActOnOpenActionLensManagerRequest,
+  ModuleMetadata,
+  UnknownOpenActionModuleSettings
 } from '@dragverse/lens'
 import {
-    useActOnOpenActionMutation,
-    useBroadcastOnchainMutation,
-    useCreateActOnOpenActionTypedDataMutation,
-    useModuleMetadataQuery
+  useActOnOpenActionMutation,
+  useBroadcastOnchainMutation,
+  useCreateActOnOpenActionTypedDataMutation,
+  useModuleMetadataQuery
 } from '@dragverse/lens'
 import type { CustomErrorWithData } from '@dragverse/lens/custom-types'
 import {
-    AccordionContent,
-    AccordionItem,
-    AccordionTrigger,
-    VerifiedSolid
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  VerifiedSolid
 } from '@dragverse/ui'
 import useHandleWrongNetwork from '@hooks/useHandleWrongNetwork'
 import useProfileStore from '@lib/store/idb/profile'
diff --git a/apps/web/src/components/Watch/OpenActions/index.tsx b/apps/web/src/components/Watch/OpenActions/index.tsx
index 7ac9bc8f8..333ad563b 100644
--- a/apps/web/src/components/Watch/OpenActions/index.tsx
+++ b/apps/web/src/components/Watch/OpenActions/index.tsx
@@ -1,6 +1,6 @@
-import { formatNumber, getPublication } from '@dragverse/generic';
-import isOpenActionAllowed from '@dragverse/generic/functions/isOpenActionAllowed';
-import { type AnyPublication, type OpenActionModule } from '@dragverse/lens';
+import { formatNumber, getPublication } from '@dragverse/generic'
+import isOpenActionAllowed from '@dragverse/generic/functions/isOpenActionAllowed'
+import { type AnyPublication, type OpenActionModule } from '@dragverse/lens'
 import {
   Accordion,
   AccordionContent,
@@ -9,13 +9,13 @@ import {
   Button,
   CollectOutline,
   Modal
-} from '@dragverse/ui';
-import { getCollectModuleOutput } from '@lib/getCollectModuleOutput';
-import type { FC, ReactNode } from 'react';
-import { useState } from 'react';
+} from '@dragverse/ui'
+import { getCollectModuleOutput } from '@lib/getCollectModuleOutput'
+import type { FC, ReactNode } from 'react'
+import { useState } from 'react'
 
-import CollectPublication from './Collect';
-import UnknownOpenAction from './Unknown';
+import CollectPublication from './Collect'
+import UnknownOpenAction from './Unknown'
 
 type Props = {
   publication: AnyPublication
diff --git a/apps/web/src/components/Watch/SuggestedVideoCard.tsx b/apps/web/src/components/Watch/SuggestedVideoCard.tsx
index 96974a0a1..85b59a64f 100644
--- a/apps/web/src/components/Watch/SuggestedVideoCard.tsx
+++ b/apps/web/src/components/Watch/SuggestedVideoCard.tsx
@@ -1,24 +1,24 @@
-import HoverableProfile from '@components/Common/HoverableProfile';
-import PublicationOptions from '@components/Common/Publication/PublicationOptions';
-import { tw, useAverageColor } from '@dragverse/browser';
+import HoverableProfile from '@components/Common/HoverableProfile'
+import PublicationOptions from '@components/Common/Publication/PublicationOptions'
+import { tw, useAverageColor } from '@dragverse/browser'
 import {
   FALLBACK_THUMBNAIL_URL,
   LENSTUBE_BYTES_APP_ID,
   STATIC_ASSETS
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import {
   formatNumber,
   getIsSensitiveContent,
   getPublicationData,
   getThumbnailUrl,
   imageCdn
-} from '@dragverse/generic';
-import type { MirrorablePublication } from '@dragverse/lens';
-import { CommentOutline, HeartOutline } from '@dragverse/ui';
-import { getShortHandTime, getTimeFromSeconds } from '@lib/formatTime';
-import Link from 'next/link';
-import type { FC } from 'react';
-import React from 'react';
+} from '@dragverse/generic'
+import type { MirrorablePublication } from '@dragverse/lens'
+import { CommentOutline, HeartOutline } from '@dragverse/ui'
+import { getShortHandTime, getTimeFromSeconds } from '@lib/formatTime'
+import Link from 'next/link'
+import type { FC } from 'react'
+import React from 'react'
 
 type Props = {
   video: MirrorablePublication
diff --git a/apps/web/src/components/Watch/SuggestedVideos.tsx b/apps/web/src/components/Watch/SuggestedVideos.tsx
index 3618d6121..26287c04b 100644
--- a/apps/web/src/components/Watch/SuggestedVideos.tsx
+++ b/apps/web/src/components/Watch/SuggestedVideos.tsx
@@ -1,4 +1,4 @@
-import { SuggestedVideosShimmer } from '@components/Shimmers/WatchShimmer';
+import { SuggestedVideosShimmer } from '@components/Shimmers/WatchShimmer'
 import {
   ALLOWED_APP_IDS,
   INFINITE_SCROLL_ROOT_MARGIN,
@@ -6,26 +6,26 @@ import {
   LENS_CUSTOM_FILTERS,
   LENSTUBE_BYTES_APP_ID,
   TAPE_APP_ID
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import type {
   ExplorePublicationRequest,
   MirrorablePublication
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import {
   ExplorePublicationsOrderByType,
   ExplorePublicationType,
   LimitType,
   PublicationMetadataMainFocusType,
   useExplorePublicationsQuery
-} from '@dragverse/lens';
-import { Spinner } from '@dragverse/ui';
-import { getUnixTimestampForDaysAgo } from '@lib/formatTime';
-import useProfileStore from '@lib/store/idb/profile';
-import { useRouter } from 'next/router';
-import { useEffect } from 'react';
-import { useInView } from 'react-cool-inview';
+} from '@dragverse/lens'
+import { Spinner } from '@dragverse/ui'
+import { getUnixTimestampForDaysAgo } from '@lib/formatTime'
+import useProfileStore from '@lib/store/idb/profile'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { useInView } from 'react-cool-inview'
 
-import SuggestedVideoCard from './SuggestedVideoCard';
+import SuggestedVideoCard from './SuggestedVideoCard'
 
 const since = getUnixTimestampForDaysAgo(30)
 
diff --git a/apps/web/src/components/Watch/TipForm.tsx b/apps/web/src/components/Watch/TipForm.tsx
index 4410ada8b..6856c0106 100644
--- a/apps/web/src/components/Watch/TipForm.tsx
+++ b/apps/web/src/components/Watch/TipForm.tsx
@@ -1,5 +1,5 @@
-import { LENSHUB_PROXY_ABI } from '@dragverse/abis';
-import { getUserLocale } from '@dragverse/browser';
+import { LENSHUB_PROXY_ABI } from '@dragverse/abis'
+import { getUserLocale } from '@dragverse/browser'
 import {
   LENSHUB_PROXY_ADDRESS,
   REQUESTING_SIGNATURE_MESSAGE,
@@ -7,50 +7,50 @@ import {
   TAPE_APP_ID,
   TAPE_LOGO,
   TAPE_WEBSITE_URL
-} from '@dragverse/constants';
+} from '@dragverse/constants'
 import {
-  EVENTS,
-  Tower,
   checkLensManagerPermissions,
+  EVENTS,
   getProfile,
   getPublication,
   getPublicationData,
   getSignature,
   imageCdn,
   logger,
+  Tower,
   uploadToAr
-} from '@dragverse/generic';
+} from '@dragverse/generic'
 import type {
   AnyPublication,
   CreateMomokaCommentEip712TypedData,
   CreateOnchainCommentEip712TypedData
-} from '@dragverse/lens';
+} from '@dragverse/lens'
 import {
   PublicationDocument,
-  useBroadcastOnMomokaMutation,
   useBroadcastOnchainMutation,
-  useCommentOnMomokaMutation,
+  useBroadcastOnMomokaMutation,
   useCommentOnchainMutation,
+  useCommentOnMomokaMutation,
   useCreateMomokaCommentTypedDataMutation,
   useCreateOnchainCommentTypedDataMutation,
   usePublicationLazyQuery
-} from '@dragverse/lens';
-import { useApolloClient } from '@dragverse/lens/apollo';
-import type { CustomErrorWithData } from '@dragverse/lens/custom-types';
-import { Button, Input, TextArea } from '@dragverse/ui';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { MetadataAttributeType, textOnly } from '@lens-protocol/metadata';
-import useProfileStore from '@lib/store/idb/profile';
-import usePersistStore from '@lib/store/persist';
-import type { Dispatch, FC } from 'react';
-import { useState } from 'react';
-import { useForm } from 'react-hook-form';
-import toast from 'react-hot-toast';
-import { v4 as uuidv4 } from 'uuid';
-import { parseEther } from 'viem';
-import { useSendTransaction, useSignTypedData, useWriteContract } from 'wagmi';
-import type { z } from 'zod';
-import { number, object, string } from 'zod';
+} from '@dragverse/lens'
+import { useApolloClient } from '@dragverse/lens/apollo'
+import type { CustomErrorWithData } from '@dragverse/lens/custom-types'
+import { Button, Input, TextArea } from '@dragverse/ui'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { MetadataAttributeType, textOnly } from '@lens-protocol/metadata'
+import useProfileStore from '@lib/store/idb/profile'
+import usePersistStore from '@lib/store/persist'
+import type { Dispatch, FC } from 'react'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import toast from 'react-hot-toast'
+import { v4 as uuidv4 } from 'uuid'
+import { parseEther } from 'viem'
+import { useSendTransaction, useSignTypedData, useWriteContract } from 'wagmi'
+import type { z } from 'zod'
+import { number, object, string } from 'zod'
 
 type Props = {
   video: AnyPublication
diff --git a/apps/web/src/components/Watch/Video.tsx b/apps/web/src/components/Watch/Video.tsx
index 3b70c9d1f..ba20c2ca7 100644
--- a/apps/web/src/components/Watch/Video.tsx
+++ b/apps/web/src/components/Watch/Video.tsx
@@ -1,5 +1,5 @@
-import InterweaveContent from '@components/Common/InterweaveContent';
-import { tw } from '@dragverse/browser';
+import InterweaveContent from '@components/Common/InterweaveContent'
+import { tw } from '@dragverse/browser'
 import {
   getCategoryName,
   getIsSensitiveContent,
@@ -9,22 +9,22 @@ import {
   getThumbnailUrl,
   imageCdn,
   sanitizeDStorageUrl
-} from '@dragverse/generic';
-import type { PrimaryPublication, VideoMetadataV3 } from '@dragverse/lens';
+} from '@dragverse/generic'
+import type { PrimaryPublication, VideoMetadataV3 } from '@dragverse/lens'
 import {
   Badge,
   ChevronDownOutline,
   ChevronUpOutline,
   VideoPlayer
-} from '@dragverse/ui';
-import useAppStore from '@lib/store';
-import useProfileStore from '@lib/store/idb/profile';
-import Link from 'next/link';
-import type { FC } from 'react';
-import { memo, useEffect, useState } from 'react';
+} from '@dragverse/ui'
+import useAppStore from '@lib/store'
+import useProfileStore from '@lib/store/idb/profile'
+import Link from 'next/link'
+import type { FC } from 'react'
+import { memo, useEffect, useState } from 'react'
 
-import PublicationActions from '../Common/Publication/PublicationActions';
-import VideoMeta from './VideoMeta';
+import PublicationActions from '../Common/Publication/PublicationActions'
+import VideoMeta from './VideoMeta'
 
 type Props = {
   video: PrimaryPublication
diff --git a/apps/web/src/components/Watch/VideoMeta.tsx b/apps/web/src/components/Watch/VideoMeta.tsx
index b6de78516..49f8da134 100644
--- a/apps/web/src/components/Watch/VideoMeta.tsx
+++ b/apps/web/src/components/Watch/VideoMeta.tsx
@@ -1,17 +1,17 @@
-import CollectorsList from '@components/Common/CollectorsList';
-import HoverableProfile from '@components/Common/HoverableProfile';
-import MirroredList from '@components/Common/MirroredList';
+import CollectorsList from '@components/Common/CollectorsList'
+import HoverableProfile from '@components/Common/HoverableProfile'
+import MirroredList from '@components/Common/MirroredList'
 import {
   getProfile,
   getProfilePicture,
   getPublicationMediaCid
-} from '@dragverse/generic';
-import type { PrimaryPublication } from '@dragverse/lens';
-import { CollectOutline, MirrorOutline, Modal } from '@dragverse/ui';
-import type { FC } from 'react';
-import { useState } from 'react';
+} from '@dragverse/generic'
+import type { PrimaryPublication } from '@dragverse/lens'
+import { CollectOutline, MirrorOutline, Modal } from '@dragverse/ui'
+import type { FC } from 'react'
+import { useState } from 'react'
 
-import ViewCount from './ViewCount';
+import ViewCount from './ViewCount'
 
 type Props = {
   video: PrimaryPublication
diff --git a/apps/web/src/components/Watch/index.tsx b/apps/web/src/components/Watch/index.tsx
index 851e4a317..4aaca45e3 100644
--- a/apps/web/src/components/Watch/index.tsx
+++ b/apps/web/src/components/Watch/index.tsx
@@ -1,26 +1,26 @@
-import MetaTags from '@components/Common/MetaTags';
-import { WatchShimmer } from '@components/Shimmers/WatchShimmer';
+import MetaTags from '@components/Common/MetaTags'
+import { WatchShimmer } from '@components/Shimmers/WatchShimmer'
 import {
   EVENTS,
   getPublication,
   getPublicationData,
   isWatchable,
   Tower
-} from '@dragverse/generic';
-import type { AnyPublication } from '@dragverse/lens';
-import { usePublicationQuery } from '@dragverse/lens';
-import { CustomCommentsFilterEnum } from '@dragverse/lens/custom-types';
-import useAppStore from '@lib/store';
-import useCommentStore from '@lib/store/comment';
-import { useRouter } from 'next/router';
-import { useEffect } from 'react';
-import Custom404 from 'src/pages/404';
-import Custom500 from 'src/pages/500';
+} from '@dragverse/generic'
+import type { AnyPublication } from '@dragverse/lens'
+import { usePublicationQuery } from '@dragverse/lens'
+import { CustomCommentsFilterEnum } from '@dragverse/lens/custom-types'
+import useAppStore from '@lib/store'
+import useCommentStore from '@lib/store/comment'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import Custom404 from 'src/pages/404'
+import Custom500 from 'src/pages/500'
 
-import PublicationComments from '../Common/Publication/PublicationComments';
-import NonRelevantComments from './Comments/NonRelevantComments';
-import SuggestedVideos from './SuggestedVideos';
-import Video from './Video';
+import PublicationComments from '../Common/Publication/PublicationComments'
+import NonRelevantComments from './Comments/NonRelevantComments'
+import SuggestedVideos from './SuggestedVideos'
+import Video from './Video'
 
 const VideoDetails = () => {
   const {
diff --git a/apps/web/src/hooks/useHandleWrongNetwork.ts b/apps/web/src/hooks/useHandleWrongNetwork.ts
index 4602a1c04..8d136f46b 100644
--- a/apps/web/src/hooks/useHandleWrongNetwork.ts
+++ b/apps/web/src/hooks/useHandleWrongNetwork.ts
@@ -1,6 +1,6 @@
-import { POLYGON_CHAIN_ID } from '@dragverse/constants';
-import { EVENTS, Tower } from '@dragverse/generic';
-import { useConnections, useSwitchChain } from 'wagmi';
+import { POLYGON_CHAIN_ID } from '@dragverse/constants'
+import { EVENTS, Tower } from '@dragverse/generic'
+import { useConnections, useSwitchChain } from 'wagmi'
 
 const useHandleWrongNetwork = () => {
   const activeConnection = useConnections()
diff --git a/apps/web/src/lib/getCollectModuleInput.ts b/apps/web/src/lib/getCollectModuleInput.ts
index 3b88f8904..9c0f5e36b 100644
--- a/apps/web/src/lib/getCollectModuleInput.ts
+++ b/apps/web/src/lib/getCollectModuleInput.ts
@@ -1,13 +1,13 @@
-import { VERIFIED_UNKNOWN_OPEN_ACTION_CONTRACTS } from '@components/Watch/OpenActions/verified-contracts';
+import { VERIFIED_UNKNOWN_OPEN_ACTION_CONTRACTS } from '@components/Watch/OpenActions/verified-contracts'
 import type {
   ApprovedAllowanceAmountResult,
   OpenActionModuleInput,
   RecipientDataInput
-} from '@dragverse/lens';
-import { OpenActionModuleType } from '@dragverse/lens';
-import type { CollectModuleType } from '@dragverse/lens/custom-types';
+} from '@dragverse/lens'
+import { OpenActionModuleType } from '@dragverse/lens'
+import type { CollectModuleType } from '@dragverse/lens/custom-types'
 
-import { getAddedDaysFromToday } from './formatTime';
+import { getAddedDaysFromToday } from './formatTime'
 
 export const getCollectModuleInput = (
   selectedCollectModule: CollectModuleType
diff --git a/apps/web/src/lib/store/auth.ts b/apps/web/src/lib/store/auth.ts
index a5f0ad1a3..06d31ae00 100644
--- a/apps/web/src/lib/store/auth.ts
+++ b/apps/web/src/lib/store/auth.ts
@@ -1,8 +1,8 @@
-import { LocalStore } from '@dragverse/lens/custom-types';
-import Cookies from 'js-cookie';
-import { create } from 'zustand';
+import { LocalStore } from '@dragverse/lens/custom-types'
+import Cookies from 'js-cookie'
+import { create } from 'zustand'
 
-import { setActiveProfile } from './idb/profile';
+import { setActiveProfile } from './idb/profile'
 
 type Tokens = {
   accessToken: string | undefined
diff --git a/apps/web/src/lib/store/idb/profile.ts b/apps/web/src/lib/store/idb/profile.ts
index 18b38536b..4498ea26f 100644
--- a/apps/web/src/lib/store/idb/profile.ts
+++ b/apps/web/src/lib/store/idb/profile.ts
@@ -1,8 +1,8 @@
-import type { Profile } from '@dragverse/lens';
-import { LocalIDBStore } from '@dragverse/lens/custom-types';
-import createIdbStorage from '@lib/createIdbStorage';
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
+import type { Profile } from '@dragverse/lens'
+import { LocalIDBStore } from '@dragverse/lens/custom-types'
+import createIdbStorage from '@lib/createIdbStorage'
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
 
 interface ProfileState {
   activeProfile: Profile | null
diff --git a/apps/web/src/lib/store/index.ts b/apps/web/src/lib/store/index.ts
index 738377960..938beaa02 100644
--- a/apps/web/src/lib/store/index.ts
+++ b/apps/web/src/lib/store/index.ts
@@ -3,14 +3,14 @@ import {
   IRYS_CURRENCY,
   IRYS_NODE_URL,
   WMATIC_TOKEN_ADDRESS
-} from '@dragverse/constants';
-import { logger } from '@dragverse/generic';
-import type { IrysDataState, UploadedMedia } from '@dragverse/lens/custom-types';
-import { WebIrys } from '@irys/sdk';
-import { MetadataLicenseType } from '@lens-protocol/metadata';
-import { viemPublicClient } from '@lib/viemClient';
-import type { WalletClient } from 'viem';
-import { create } from 'zustand';
+} from '@dragverse/constants'
+import { logger } from '@dragverse/generic'
+import type { IrysDataState, UploadedMedia } from '@dragverse/lens/custom-types'
+import { WebIrys } from '@irys/sdk'
+import { MetadataLicenseType } from '@lens-protocol/metadata'
+import { viemPublicClient } from '@lib/viemClient'
+import type { WalletClient } from 'viem'
+import { create } from 'zustand'
 
 export const UPLOADED_VIDEO_IRYS_DEFAULTS = {
   balance: '0',
diff --git a/apps/web/src/lib/viemClient.ts b/apps/web/src/lib/viemClient.ts
index 3c6bbe6c4..b8802ec8b 100644
--- a/apps/web/src/lib/viemClient.ts
+++ b/apps/web/src/lib/viemClient.ts
@@ -1,6 +1,6 @@
-import { IS_MAINNET, POLYGON_RPC_URL } from '@dragverse/constants';
-import { createPublicClient, http } from 'viem';
-import { polygon, polygonMumbai } from 'viem/chains';
+import { IS_MAINNET, POLYGON_RPC_URL } from '@dragverse/constants'
+import { createPublicClient, http } from 'viem'
+import { polygon, polygonMumbai } from 'viem/chains'
 
 export const viemPublicClient = createPublicClient({
   chain: IS_MAINNET ? polygon : polygonMumbai,
diff --git a/apps/web/src/pages/404.tsx b/apps/web/src/pages/404.tsx
index 0f01092d9..5a6709d44 100644
--- a/apps/web/src/pages/404.tsx
+++ b/apps/web/src/pages/404.tsx
@@ -1,7 +1,7 @@
-import MetaTags from '@components/Common/MetaTags';
-import { STATIC_ASSETS, TAPE_APP_NAME } from '@dragverse/constants';
-import { Button } from '@dragverse/ui';
-import Link from 'next/link';
+import MetaTags from '@components/Common/MetaTags'
+import { STATIC_ASSETS, TAPE_APP_NAME } from '@dragverse/constants'
+import { Button } from '@dragverse/ui'
+import Link from 'next/link'
 
 const Custom404 = () => {
   return (
diff --git a/apps/web/src/pages/500.tsx b/apps/web/src/pages/500.tsx
index 1e82239bc..68d6bb338 100644
--- a/apps/web/src/pages/500.tsx
+++ b/apps/web/src/pages/500.tsx
@@ -1,7 +1,7 @@
-import MetaTags from '@components/Common/MetaTags';
-import { STATIC_ASSETS, TAPE_APP_NAME } from '@dragverse/constants';
-import { Button } from '@dragverse/ui';
-import Link from 'next/link';
+import MetaTags from '@components/Common/MetaTags'
+import { STATIC_ASSETS, TAPE_APP_NAME } from '@dragverse/constants'
+import { Button } from '@dragverse/ui'
+import Link from 'next/link'
 
 const Custom500 = () => {
   return (
diff --git a/apps/web/src/pages/_app.tsx b/apps/web/src/pages/_app.tsx
index 1046758cc..e2b4b2edb 100644
--- a/apps/web/src/pages/_app.tsx
+++ b/apps/web/src/pages/_app.tsx
@@ -1,8 +1,8 @@
-import '../styles/index.css';
+import '../styles/index.css'
 
-import Providers from '@components/Common/Providers';
-import { tapeFont } from '@dragverse/browser/font';
-import type { AppProps } from 'next/app';
+import Providers from '@components/Common/Providers'
+import { tapeFont } from '@dragverse/browser/font'
+import type { AppProps } from 'next/app'
 
 const App = ({ Component, pageProps }: AppProps) => {
   return (
diff --git a/apps/web/src/pages/login.tsx b/apps/web/src/pages/login.tsx
index 993051116..89408e302 100644
--- a/apps/web/src/pages/login.tsx
+++ b/apps/web/src/pages/login.tsx
@@ -1,11 +1,11 @@
-import Logo from '@components/Common/Logo';
-import MetaTags from '@components/Common/MetaTags';
-import CardBorders from '@components/Login/CardBorders';
-import Connectors from '@components/Login/Connectors';
-import { EVENTS, Tower } from '@dragverse/generic';
-import dynamic from 'next/dynamic';
-import Link from 'next/link';
-import { useEffect } from 'react';
+import Logo from '@components/Common/Logo'
+import MetaTags from '@components/Common/MetaTags'
+import CardBorders from '@components/Login/CardBorders'
+import Connectors from '@components/Login/Connectors'
+import { EVENTS, Tower } from '@dragverse/generic'
+import dynamic from 'next/dynamic'
+import Link from 'next/link'
+import { useEffect } from 'react'
 
 const BackgroundComets = dynamic(
   () => import('@components/Login/BackgroundComets')
@@ -17,7 +17,7 @@ const Login = () => {
   }, [])
 
   return (
-    <div className="relative flex h-screen w-screen overflow-hidden bg-[#FAFAFA] dark:bg-brand-850">
+    <div className="dark:bg-brand-850 relative flex h-screen w-screen overflow-hidden bg-[#FAFAFA]">
       <MetaTags title="Login" />
       <div className="grid h-full w-full place-items-center">
         <BackgroundComets />
diff --git a/packages/constants/general.ts b/packages/constants/general.ts
index e97b05045..6cfb532ce 100644
--- a/packages/constants/general.ts
+++ b/packages/constants/general.ts
@@ -1,5 +1,5 @@
-import { CustomFiltersType } from '@dragverse/lens';
-import LensEndpoint from '@dragverse/lens/endpoints';
+import { CustomFiltersType } from '@dragverse/lens'
+import LensEndpoint from '@dragverse/lens/endpoints'
 
 export const TAPE_APP_NAME = 'Dragverse'
 export const TAPE_APP_DESCRIPTION =
diff --git a/packages/helpers/generic/functions/getSharableLink.ts b/packages/helpers/generic/functions/getSharableLink.ts
index 1a5328e4f..74e86a6b3 100644
--- a/packages/helpers/generic/functions/getSharableLink.ts
+++ b/packages/helpers/generic/functions/getSharableLink.ts
@@ -4,10 +4,10 @@ import {
   TAPE_WEBSITE_URL,
   TAPE_X_HANDLE,
   TAPEXYZ_WEBSITE_URL
-} from '@dragverse/constants';
-import type { MirrorablePublication } from '@dragverse/lens';
+} from '@dragverse/constants'
+import type { MirrorablePublication } from '@dragverse/lens'
 
-import { getPublicationData } from './getPublicationData';
+import { getPublicationData } from './getPublicationData'
 
 type Link = 'dragverse' | 'tape' | 'hey' | 'x' | 'reddit' | 'linkedin'
 
diff --git a/packages/ui/src/Dropdown.tsx b/packages/ui/src/Dropdown.tsx
index 7fe7ec996..c93e27941 100644
--- a/packages/ui/src/Dropdown.tsx
+++ b/packages/ui/src/Dropdown.tsx
@@ -27,7 +27,7 @@ export const DropdownMenuSubContent = forwardRef<
       sideOffset={5}
       className={tw(
         sizeClasses,
-        'tape-border rounded-md bg-white leading-none data-[disabled]:pointer-events-none data-[highlighted]:bg-gray-200 data-[highlighted]:outline-none dark:bg-brand-850 dark:data-[highlighted]:bg-gray-800',
+        'tape-border dark:bg-brand-850 rounded-md bg-white leading-none data-[disabled]:pointer-events-none data-[highlighted]:bg-gray-200 data-[highlighted]:outline-none dark:data-[highlighted]:bg-gray-800',
         className
       )}
       ref={ref}
@@ -120,7 +120,7 @@ export const DropdownMenu: FC<DropdownMenuProps> = ({
         <DropdownMenuContent
           sideOffset={12}
           align={align}
-          className="tape-border z-10 rounded-xl bg-white p-2 shadow dark:bg-brand-850"
+          className="tape-border dark:bg-brand-850 z-10 rounded-xl bg-white p-2 shadow"
         >
           {children}
         </DropdownMenuContent>
diff --git a/packages/ui/src/Modal.tsx b/packages/ui/src/Modal.tsx
index 34e1556dd..a0972d84b 100644
--- a/packages/ui/src/Modal.tsx
+++ b/packages/ui/src/Modal.tsx
@@ -36,7 +36,7 @@ export const Modal: FC<Props> = ({
           onPointerDownOutside={(e) => (locked ? e.preventDefault() : null)}
           className={tw(
             sizeClasses,
-            'tape-border fixed left-[50%] top-[50%] z-10 max-h-[85vh] w-[90vw] translate-x-[-50%] translate-y-[-50%] space-y-4 rounded-xl bg-white p-5 focus:outline-none dark:bg-brand-850'
+            'tape-border dark:bg-brand-850 fixed left-[50%] top-[50%] z-10 max-h-[85vh] w-[90vw] translate-x-[-50%] translate-y-[-50%] space-y-4 rounded-xl bg-white p-5 focus:outline-none'
           )}
         >
           <div className="space-y-3">
diff --git a/packages/ui/src/RangeSlider.tsx b/packages/ui/src/RangeSlider.tsx
index 9845203da..1aeadd210 100644
--- a/packages/ui/src/RangeSlider.tsx
+++ b/packages/ui/src/RangeSlider.tsx
@@ -25,7 +25,7 @@ export const RangeSlider = forwardRef<
       <SliderPrimitive.Track className="relative h-[3px] grow rounded-full bg-gray-200 dark:bg-gray-800">
         <SliderPrimitive.Range className="absolute h-full rounded-full bg-gray-500" />
       </SliderPrimitive.Track>
-      <SliderPrimitive.Thumb className="block h-4 rounded-sm bg-brand-850 px-1 text-xs font-bold text-white focus:outline-none active:scale-110 dark:bg-white dark:text-black">
+      <SliderPrimitive.Thumb className="bg-brand-850 block h-4 rounded-sm px-1 text-xs font-bold text-white focus:outline-none active:scale-110 dark:bg-white dark:text-black">
         {props.value}
       </SliderPrimitive.Thumb>
     </SliderPrimitive.Root>
diff --git a/packages/ui/src/Select.tsx b/packages/ui/src/Select.tsx
index cbafb79fa..37511bf3b 100644
--- a/packages/ui/src/Select.tsx
+++ b/packages/ui/src/Select.tsx
@@ -73,7 +73,7 @@ export const Select = forwardRef<
         </SelectPrimitive.Icon>
       </SelectPrimitive.Trigger>
       <SelectPrimitive.Portal>
-        <SelectPrimitive.Content className="z-10 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-800 dark:bg-brand-850">
+        <SelectPrimitive.Content className="dark:bg-brand-850 z-10 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-800">
           <SelectPrimitive.ScrollUpButton className="flex justify-center py-2">
             <ChevronUpOutline className="size-3" />
           </SelectPrimitive.ScrollUpButton>
diff --git a/packages/ui/src/Switch.tsx b/packages/ui/src/Switch.tsx
index 41464e80d..7770d4f88 100644
--- a/packages/ui/src/Switch.tsx
+++ b/packages/ui/src/Switch.tsx
@@ -37,7 +37,7 @@ export const Switch = forwardRef<
       <PrimitiveSwitch.Root
         className={tw(
           sizeClasses,
-          'relative cursor-default rounded-full bg-gray-200 outline-none data-[state=checked]:bg-brand-850 dark:bg-gray-800',
+          'data-[state=checked]:bg-brand-850 relative cursor-default rounded-full bg-gray-200 outline-none dark:bg-gray-800',
           className
         )}
         id={id}