update overal typography

src/app/auth/components/user.tsx

@@ -20,10 +20,10 @@ export default function User({ pubkey }: { pubkey: string }) {
 				/>
 			</div>
 			<div className="flex w-full flex-1 flex-col items-start text-start">
-				<span className="truncate font-medium leading-tight text-zinc-200">
+				<span className="truncate font-medium leading-tight text-white">
 					{user?.display_name || user?.name}
 				</span>
-				<span className="text-sm leading-tight text-zinc-400">
+				<span className="text-base leading-tight text-zinc-400">
 					{user?.nip05?.toLowerCase() || shortenKey(pubkey)}
 				</span>
 			</div>

src/app/auth/pages/create/index.page.tsx

@@ -35,25 +35,25 @@ export function Page() {
 		<div className="flex h-full w-full items-center justify-center">
 			<div className="mx-auto w-full max-w-md">
 				<div className="mb-8 text-center">
-					<h1 className="text-2xl font-semibold text-zinc-200">
+					<h1 className="text-xl font-semibold text-white">
 						Lume is auto-generated key for you
 					</h1>
 				</div>
 				<div className="flex flex-col gap-4">
 					<div className="flex flex-col gap-1">
-						<label className="text-sm font-semibold text-zinc-400">
+						<label className="text-base font-semibold text-zinc-400">
 							Public Key
 						</label>
 						<div className="relative shrink-0 before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-blue-500 before:opacity-0 before:ring-2 before:ring-blue-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-blue-500/100 dark:focus-within:after:shadow-blue-500/20">
 							<input
 								readOnly
 								value={npub}
-								className="relative w-full rounded-lg border border-black/5 px-3.5 py-2.5 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-600"
+								className="relative w-full rounded-lg border border-black/5 px-3.5 py-2.5 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-600"
 							/>
 						</div>
 					</div>
 					<div className="flex flex-col gap-1">
-						<label className="text-sm font-semibold text-zinc-400">
+						<label className="text-base font-semibold text-zinc-400">
 							Private Key
 						</label>
 						<div className="relative shrink-0 before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-blue-500 before:opacity-0 before:ring-2 before:ring-blue-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-blue-500/100 dark:focus-within:after:shadow-blue-500/20">
@@ -61,7 +61,7 @@ export function Page() {
 								readOnly
 								type={type}
 								value={nsec}
-								className="relative w-full rounded-lg border border-black/5 py-2.5 pl-3.5 pr-11 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-600"
+								className="relative w-full rounded-lg border border-black/5 py-2.5 pl-3.5 pr-11 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-600"
 							/>
 							<button
 								type="button"
@@ -72,13 +72,13 @@ export function Page() {
 									<EyeOffIcon
 										width={20}
 										height={20}
-										className="text-zinc-500 group-hover:text-zinc-200"
+										className="text-zinc-500 group-hover:text-white"
 									/>
 								) : (
 									<EyeOnIcon
 										width={20}
 										height={20}
-										className="text-zinc-500 group-hover:text-zinc-200"
+										className="text-zinc-500 group-hover:text-white"
 									/>
 								)}
 							</button>

src/app/auth/pages/create/step-2/index.page.tsx

@@ -43,7 +43,7 @@ export function Page() {
 		<div className="flex h-full w-full items-center justify-center">
 			<div className="mx-auto w-full max-w-md">
 				<div className="mb-8 text-center">
-					<h1 className="text-2xl font-semibold text-zinc-200">
+					<h1 className="text-xl font-semibold text-white">
 						Create your profile
 					</h1>
 				</div>
@@ -56,10 +56,10 @@ export function Page() {
 							type={"hidden"}
 							{...register("picture")}
 							value={image}
-							className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
+							className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
 						/>
 						<div className="flex flex-col gap-1">
-							<label className="text-xs font-semibold uppercase tracking-wider text-zinc-400">
+							<label className="text-base font-semibold uppercase tracking-wider text-zinc-400">
 								Avatar
 							</label>
 							<div className="relative inline-flex h-36 w-full items-center justify-center overflow-hidden rounded-lg border border-zinc-900 bg-zinc-950">
@@ -74,7 +74,7 @@ export function Page() {
 							</div>
 						</div>
 						<div className="flex flex-col gap-1">
-							<label className="text-xs font-semibold uppercase tracking-wider text-zinc-400">
+							<label className="text-base font-semibold uppercase tracking-wider text-zinc-400">
 								Display Name *
 							</label>
 							<div className="relative w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
@@ -85,19 +85,19 @@ export function Page() {
 										minLength: 4,
 									})}
 									spellCheck={false}
-									className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
+									className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
 								/>
 							</div>
 						</div>
 						<div className="flex flex-col gap-1">
-							<label className="text-xs font-semibold uppercase tracking-wider text-zinc-400">
+							<label className="text-base font-semibold uppercase tracking-wider text-zinc-400">
 								About
 							</label>
 							<div className="relative h-20 w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
 								<textarea
 									{...register("about")}
 									spellCheck={false}
-									className="relative h-20 w-full resize-none rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
+									className="relative h-20 w-full resize-none rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
 								/>
 							</div>
 						</div>

src/app/auth/pages/create/step-3/index.page.tsx

@@ -197,13 +197,13 @@ export function Page() {
 		<div className="flex h-full w-full items-center justify-center">
 			<div className="mx-auto w-full max-w-md">
 				<div className="mb-8 text-center">
-					<h1 className="text-2xl font-semibold text-zinc-200">
+					<h1 className="text-xl font-semibold text-white">
 						Personalized your newsfeed
 					</h1>
 				</div>
 				<div className="flex flex-col gap-4">
 					<div className="w-full rounded-lg border border-zinc-800 bg-zinc-900">
-						<div className="inline-flex h-10 w-full items-center gap-1 border-b border-zinc-800 px-4 text-sm font-medium text-zinc-400">
+						<div className="inline-flex h-10 w-full items-center gap-1 border-b border-zinc-800 px-4 text-base font-medium text-zinc-400">
 							Follow at least
 							<span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text font-bold text-transparent">
 								{follows.length}/10

src/app/auth/pages/import/index.page.tsx

@@ -57,9 +57,7 @@ export function Page() {
 		<div className="flex h-full w-full items-center justify-center">
 			<div className="mx-auto w-full max-w-md">
 				<div className="mb-8 text-center">
-					<h1 className="text-2xl font-semibold text-zinc-200">
+					<h1 className="text-xl font-semibold text-white">Import your key</h1>
-						Import your key
-					</h1>
 				</div>
 				<div className="flex flex-col gap-4">
 					<div>
@@ -67,7 +65,7 @@ export function Page() {
 							type="button"
 							className="inline-flex w-full transform items-center justify-center gap-1.5 rounded-lg bg-zinc-900 ring-1 ring-zinc-800 px-3.5 py-2.5 font-medium text-zinc-400 active:translate-y-1"
 						>
-							<div className="inline-flex items-center rounded-md bg-zinc-400/10 px-2 py-0.5 text-xs font-medium ring-1 ring-inset ring-zinc-400/20">
+							<div className="inline-flex items-center rounded-md bg-zinc-400/10 px-2 py-0.5 text-base font-medium ring-1 ring-inset ring-zinc-400/20">
 								<span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-transparent">
 									Coming soon
 								</span>
@@ -80,7 +78,9 @@ export function Page() {
 							<div className="w-full border-t border-zinc-800" />
 						</div>
 						<div className="relative flex justify-center">
-							<span className="bg-zinc-950 px-2 text-sm text-zinc-500">or</span>
+							<span className="bg-zinc-950 px-2 text-base text-zinc-500">
+								or
+							</span>
 						</div>
 					</div>
 					<form
@@ -93,10 +93,10 @@ export function Page() {
 									{...register("key", { required: true, minLength: 32 })}
 									type={"password"}
 									placeholder="Paste private key here..."
-									className="relative w-full rounded-lg border border-black/5 px-3.5 py-2.5 text-center shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
+									className="relative w-full rounded-lg border border-black/5 px-3.5 py-2.5 text-center shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
 								/>
 							</div>
-							<span className="text-xs text-red-400">
+							<span className="text-base text-red-400">
 								{errors.key && <p>{errors.key.message}</p>}
 							</span>
 						</div>

src/app/auth/pages/import/step-2/index.page.tsx

@@ -86,7 +86,7 @@ export function Page() {
 		<div className="flex h-full w-full items-center justify-center">
 			<div className="mx-auto w-full max-w-md">
 				<div className="mb-8 text-center">
-					<h1 className="text-2xl font-semibold">
+					<h1 className="text-xl font-semibold">
 						{loading ? "Creating..." : "Continue with"}
 					</h1>
 				</div>
@@ -111,10 +111,10 @@ export function Page() {
 									alt={pubkey}
 								/>
 								<div>
-									<h3 className="font-medium leading-none text-zinc-200">
+									<h3 className="font-medium leading-none text-white">
 										{data.display_name || data.name}
 									</h3>
-									<p className="text-sm text-zinc-400">
+									<p className="text-base text-zinc-400">
 										{data.nip05 || shortenKey(pubkey)}
 									</p>
 								</div>

src/app/channel/components/blacklist.tsx

@@ -20,7 +20,7 @@ export default function ChannelBlackList({ blacklist }: { blacklist: any }) {
 						<MuteIcon
 							width={16}
 							height={16}
-							className="text-zinc-400 group-hover:text-zinc-200"
+							className="text-zinc-400 group-hover:text-white"
 						/>
 					</Popover.Button>
 					<Transition
@@ -39,7 +39,7 @@ export default function ChannelBlackList({ blacklist }: { blacklist: any }) {
 										<h3 className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text font-semibold leading-none text-transparent">
 											Your muted list
 										</h3>
-										<p className="text-xs leading-tight text-zinc-400">
+										<p className="text-base leading-tight text-zinc-400">
 											Currently, unmute only affect locally, when you move to
 											new client, muted list will loaded again
 										</p>

src/app/channel/components/createModal.tsx

@@ -126,7 +126,7 @@ export default function ChannelCreateModal() {
 										<div className="flex items-center justify-between">
 											<Dialog.Title
 												as="h3"
-												className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-2xl font-semibold leading-none text-transparent"
+												className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-xl font-semibold leading-none text-transparent"
 											>
 												Create channel
 											</Dialog.Title>
@@ -157,10 +157,10 @@ export default function ChannelCreateModal() {
 											type={"hidden"}
 											{...register("picture")}
 											value={image}
-											className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
+											className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
 										/>
 										<div className="flex flex-col gap-1">
-											<label className="text-xs font-semibold uppercase tracking-wider text-zinc-400">
+											<label className="text-base font-semibold uppercase tracking-wider text-zinc-400">
 												Picture
 											</label>
 											<div className="relative inline-flex h-36 w-full items-center justify-center overflow-hidden rounded-lg border border-zinc-900 bg-zinc-950">
@@ -175,7 +175,7 @@ export default function ChannelCreateModal() {
 											</div>
 										</div>
 										<div className="flex flex-col gap-1">
-											<label className="text-xs font-semibold uppercase tracking-wider text-zinc-400">
+											<label className="text-base font-semibold uppercase tracking-wider text-zinc-400">
 												Channel name *
 											</label>
 											<div className="relative w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
@@ -186,35 +186,35 @@ export default function ChannelCreateModal() {
 														minLength: 4,
 													})}
 													spellCheck={false}
-													className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
+													className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
 												/>
 											</div>
 										</div>
 										<div className="flex flex-col gap-1">
-											<label className="text-xs font-semibold uppercase tracking-wider text-zinc-400">
+											<label className="text-base font-semibold uppercase tracking-wider text-zinc-400">
 												Description
 											</label>
 											<div className="relative h-20 w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
 												<textarea
 													{...register("about")}
 													spellCheck={false}
-													className="relative h-20 w-full resize-none rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
+													className="relative h-20 w-full resize-none rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
 												/>
 											</div>
 										</div>
 										<div className="flex h-14 items-center justify-between gap-1 rounded-lg bg-zinc-800 px-4 py-2">
 											<div className="flex flex-col gap-0.5">
 												<div className="inline-flex items-center gap-1">
-													<span className="text-sm font-bold leading-none text-zinc-200">
+													<span className="text-base font-bold leading-none text-white">
 														Make Private
 													</span>
-													<div className="inline-flex items-center rounded-md bg-zinc-400/10 px-2 py-0.5 text-xs font-medium ring-1 ring-inset ring-zinc-400/20">
+													<div className="inline-flex items-center rounded-md bg-zinc-400/10 px-2 py-0.5 text-base font-medium ring-1 ring-inset ring-zinc-400/20">
 														<span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-transparent">
 															Coming soon
 														</span>
 													</div>
 												</div>
-												<p className="text-sm leading-none text-zinc-400">
+												<p className="text-base leading-none text-zinc-400">
 													Private channels can only be viewed by member
 												</p>
 											</div>

src/app/channel/components/item.tsx

@@ -17,7 +17,7 @@ export default function ChannelsListItem({ data }: { data: any }) {
 			className={twMerge(
 				"group inline-flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:bg-zinc-900",
 				pageID === data.event_id
-					? "dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
+					? "dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
 					: "",
 			)}
 		>
@@ -29,12 +29,10 @@ export default function ChannelsListItem({ data }: { data: any }) {
 						: "",
 				)}
 			>
-				<span className="text-xs text-zinc-200">#</span>
+				<span className="text-base text-white">#</span>
 			</div>
 			<div>
-				<h5 className="truncate text-[13px] font-semibold text-zinc-400">
+				<h5 className="truncate font-medium text-zinc-400">{channel?.name}</h5>
-					{channel?.name}
-				</h5>
 			</div>
 		</a>
 	);

src/app/channel/components/members.tsx

@@ -24,7 +24,7 @@ export default function ChannelMembers() {
 				))}
 				{totalMembers ? (
 					<div className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-900 ring-2 ring-zinc-950 transition-all duration-150 ease-in-out group-hover:bg-zinc-800">
-						<span className="text-xs font-medium text-zinc-400 group-hover:text-zinc-200">
+						<span className="text-base font-medium text-zinc-400 group-hover:text-white">
 							{totalMembers}
 						</span>
 					</div>
@@ -32,7 +32,7 @@ export default function ChannelMembers() {
 					<div>
 						<button
 							type="button"
-							className="inline-flex h-8 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-sm text-white shadow-button"
+							className="inline-flex h-8 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-base text-white shadow-button"
 						>
 							Invite
 						</button>

src/app/channel/components/messageList.tsx

@@ -43,7 +43,7 @@ export default function ChannelMessageList() {
 								<div className="w-full border-t border-zinc-800" />
 							</div>
 							<div className="relative flex justify-center">
-								<div className="inline-flex items-center gap-x-1.5 rounded-full bg-zinc-900 px-3 py-1.5 text-xs font-medium text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-800">
+								<div className="inline-flex items-center gap-x-1.5 rounded-full bg-zinc-900 px-3 py-1.5 text-base font-medium text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-800">
 									{getHourAgo(24, now.current).toLocaleDateString("en-US", {
 										weekday: "long",
 										year: "numeric",
@@ -56,10 +56,10 @@ export default function ChannelMessageList() {
 					),
 					EmptyPlaceholder: () => (
 						<div className="flex flex-col gap-1 text-center">
-							<h3 className="text-sm font-semibold leading-none text-zinc-200">
+							<h3 className="text-base font-semibold leading-none text-white">
 								Nothing to see here yet
 							</h3>
-							<p className="text-sm leading-none text-zinc-400">
+							<p className="text-base leading-none text-zinc-400">
 								Be the first to share a message in this channel.
 							</p>
 						</div>

src/app/channel/components/messages/form.tsx

@@ -86,7 +86,7 @@ export default function ChannelMessageForm({
 						<div className="flex w-full flex-col">
 							<UserReply pubkey={channelReply.pubkey} />
 							<div className="-mt-3.5 pl-[32px]">
-								<div className="text-xs text-zinc-200">
+								<div className="text-base text-white">
 									{channelReply.content}
 								</div>
 							</div>
@@ -96,7 +96,7 @@ export default function ChannelMessageForm({
 							onClick={() => stopReply()}
 							className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800"
 						>
-							<CancelIcon width={12} height={12} className="text-zinc-100" />
+							<CancelIcon width={12} height={12} className="text-white" />
 						</button>
 					</div>
 				</div>
@@ -109,7 +109,7 @@ export default function ChannelMessageForm({
 				placeholder="Message"
 				className={`relative ${
 					channelReply.id ? "h-36 pt-16" : "h-24 pt-3"
-				} w-full resize-none rounded-lg border border-black/5 px-3.5 pb-3 text-sm shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500`}
+				} w-full resize-none rounded-lg border border-black/5 px-3.5 pb-3 text-base shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500`}
 			/>
 			<div className="absolute bottom-2 w-full px-2">
 				<div className="flex w-full items-center justify-between bg-zinc-800">
@@ -122,7 +122,7 @@ export default function ChannelMessageForm({
 							type="button"
 							onClick={() => submitEvent()}
 							disabled={value.length === 0 ? true : false}
-							className="inline-flex h-8 w-16 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-sm font-medium shadow-button hover:bg-fuchsia-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+							className="inline-flex h-8 w-16 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-base font-medium shadow-button hover:bg-fuchsia-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
 						>
 							Send
 						</button>

src/app/channel/components/messages/hideButton.tsx

@@ -66,7 +66,7 @@ export default function MessageHideButton({ id }: { id: string }) {
 					onClick={openModal}
 					className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-zinc-800"
 				>
-					<HideIcon width={16} height={16} className="text-zinc-200" />
+					<HideIcon width={16} height={16} className="text-white" />
 				</button>
 			</Tooltip>
 			<Transition appear show={isOpen} as={Fragment}>
@@ -98,7 +98,7 @@ export default function MessageHideButton({ id }: { id: string }) {
 										<div className="flex items-center justify-between">
 											<Dialog.Title
 												as="h3"
-												className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-2xl font-semibold leading-none text-transparent"
+												className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-xl font-semibold leading-none text-transparent"
 											>
 												Are you sure!
 											</Dialog.Title>
@@ -124,14 +124,14 @@ export default function MessageHideButton({ id }: { id: string }) {
 										<button
 											type="button"
 											onClick={closeModal}
-											className="inline-flex h-9 items-center justify-center rounded-md px-2 text-sm font-medium text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200"
+											className="inline-flex h-9 items-center justify-center rounded-md px-2 text-base font-medium text-zinc-400 hover:bg-zinc-800 hover:text-white"
 										>
 											Cancel
 										</button>
 										<button
 											type="button"
 											onClick={() => hideMessage()}
-											className="inline-flex h-9 items-center justify-center rounded-md bg-red-500 px-2 text-sm font-medium text-zinc-100 hover:bg-red-600"
+											className="inline-flex h-9 items-center justify-center rounded-md bg-red-500 px-2 text-base font-medium text-white hover:bg-red-600"
 										>
 											Confirm
 										</button>

src/app/channel/components/messages/item.tsx

@@ -16,7 +16,7 @@ export default function ChannelMessageItem({ data }: { data: any }) {
 				<ChannelMessageUser pubkey={data.pubkey} time={data.created_at} />
 				<div className="-mt-[17px] pl-[48px]">
 					<div className="flex flex-col gap-2">
-						<div className="whitespace-pre-line break-words text-sm leading-tight">
+						<div className="whitespace-pre-line break-words text-base leading-tight">
 							{data.hide ? (
 								<span className="italic text-zinc-400">[hided message]</span>
 							) : (

src/app/channel/components/messages/muteButton.tsx

@@ -65,7 +65,7 @@ export default function MessageMuteButton({ pubkey }: { pubkey: string }) {
 					onClick={() => openModal()}
 					className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-zinc-800"
 				>
-					<MuteIcon width={16} height={16} className="text-zinc-200" />
+					<MuteIcon width={16} height={16} className="text-white" />
 				</button>
 			</Tooltip>
 			<Transition appear show={isOpen} as={Fragment}>
@@ -97,7 +97,7 @@ export default function MessageMuteButton({ pubkey }: { pubkey: string }) {
 										<div className="flex items-center justify-between">
 											<Dialog.Title
 												as="h3"
-												className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-2xl font-semibold leading-none text-transparent"
+												className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-xl font-semibold leading-none text-transparent"
 											>
 												Are you sure!
 											</Dialog.Title>
@@ -123,14 +123,14 @@ export default function MessageMuteButton({ pubkey }: { pubkey: string }) {
 										<button
 											type="button"
 											onClick={closeModal}
-											className="inline-flex h-9 items-center justify-center rounded-md px-2 text-sm font-medium text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200"
+											className="inline-flex h-9 items-center justify-center rounded-md px-2 text-base font-medium text-zinc-400 hover:bg-zinc-800 hover:text-white"
 										>
 											Cancel
 										</button>
 										<button
 											type="button"
 											onClick={() => muteUser()}
-											className="inline-flex h-9 items-center justify-center rounded-md bg-red-500 px-2 text-sm font-medium text-zinc-100 hover:bg-red-600"
+											className="inline-flex h-9 items-center justify-center rounded-md bg-red-500 px-2 text-base font-medium text-white hover:bg-red-600"
 										>
 											Confirm
 										</button>

src/app/channel/components/messages/replyButton.tsx

@@ -24,7 +24,7 @@ export default function MessageReplyButton({
 				onClick={() => createReply()}
 				className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-zinc-800"
 			>
-				<ReplyMessageIcon width={16} height={16} className="text-zinc-200" />
+				<ReplyMessageIcon width={16} height={16} className="text-white" />
 			</button>
 		</Tooltip>
 	);

src/app/channel/components/messages/user.tsx

@@ -22,7 +22,7 @@ export default function ChannelMessageUser({
 				<>
 					<div className="relative h-9 w-9 shrink animate-pulse rounded-md bg-zinc-800" />
 					<div className="flex w-full flex-1 items-start justify-between">
-						<div className="flex items-baseline gap-2 text-sm">
+						<div className="flex items-baseline gap-2 text-base">
 							<div className="h-4 w-20 animate-pulse rounded bg-zinc-800" />
 						</div>
 					</div>
@@ -39,8 +39,8 @@ export default function ChannelMessageUser({
 						/>
 					</div>
 					<div className="flex w-full flex-1 items-start justify-between">
-						<div className="flex items-baseline gap-2 text-sm">
+						<div className="flex items-baseline gap-2 text-base">
-							<span className="font-semibold leading-none text-zinc-200 group-hover:underline">
+							<span className="font-semibold leading-none text-white group-hover:underline">
 								{user?.display_name || user?.name || shortenKey(pubkey)}
 							</span>
 							<span className="leading-none text-zinc-500">·</span>

src/app/channel/components/messages/userReply.tsx

@@ -13,7 +13,7 @@ export default function UserReply({ pubkey }: { pubkey: string }) {
 			{isError || isLoading ? (
 				<>
 					<div className="relative h-7 w-7 shrink animate-pulse overflow-hidden rounded bg-zinc-800" />
-					<span className="h-2 w-10 animate-pulse rounded bg-zinc-800 text-xs font-medium leading-none text-zinc-500" />
+					<span className="h-2 w-10 animate-pulse rounded bg-zinc-800 text-base font-medium leading-none text-zinc-500" />
 				</>
 			) : (
 				<>
@@ -26,7 +26,7 @@ export default function UserReply({ pubkey }: { pubkey: string }) {
 							className="h-7 w-7 rounded object-cover"
 						/>
 					</div>
-					<span className="text-xs font-medium leading-none text-zinc-500">
+					<span className="text-base font-medium leading-none text-zinc-500">
 						Replying to {user?.name || shortenKey(pubkey)}
 					</span>
 				</>

src/app/channel/components/metadata.tsx

@@ -33,14 +33,14 @@ export default function ChannelMetadata({
 			</div>
 			<div className="flex flex-col gap-1">
 				<div className="flex items-center gap-1">
-					<h5 className="truncate text-sm font-medium leading-none text-zinc-100">
+					<h5 className="truncate text-base font-medium leading-none text-white">
 						{metadata?.name}
 					</h5>
 					<button type="button" onClick={() => copyNoteID()}>
 						<CopyIcon width={14} height={14} className="text-zinc-400" />
 					</button>
 				</div>
-				<p className="text-xs leading-none text-zinc-400">
+				<p className="text-base leading-none text-zinc-400">
 					{metadata?.about || (noteID && `${noteID.substring(0, 24)}...`)}
 				</p>
 			</div>

src/app/channel/components/mutedItem.tsx

@@ -50,10 +50,10 @@ export default function MutedItem({ data }: { data: any }) {
 							/>
 						</div>
 						<div className="flex w-full flex-1 flex-col items-start gap-0.5 text-start">
-							<span className="truncate text-sm font-medium leading-none text-zinc-200">
+							<span className="truncate text-base font-medium leading-none text-white">
 								{user?.display_name || user?.name || "Pleb"}
 							</span>
-							<span className="text-xs leading-none text-zinc-400">
+							<span className="text-base leading-none text-zinc-400">
 								{shortenKey(data.content)}
 							</span>
 						</div>
@@ -63,7 +63,7 @@ export default function MutedItem({ data }: { data: any }) {
 							<button
 								type="button"
 								onClick={() => unmute()}
-								className="inline-flex h-6 w-min items-center justify-center rounded px-1.5 text-xs font-medium leading-none text-zinc-400 hover:bg-zinc-800 hover:text-fuchsia-500"
+								className="inline-flex h-6 w-min items-center justify-center rounded px-1.5 text-base font-medium leading-none text-zinc-400 hover:bg-zinc-800 hover:text-fuchsia-500"
 							>
 								Unmute
 							</button>
@@ -71,7 +71,7 @@ export default function MutedItem({ data }: { data: any }) {
 							<button
 								type="button"
 								onClick={() => mute()}
-								className="inline-flex h-6 w-min items-center justify-center rounded px-1.5 text-xs font-medium leading-none text-zinc-400 hover:bg-zinc-800 hover:text-fuchsia-500"
+								className="inline-flex h-6 w-min items-center justify-center rounded px-1.5 text-base font-medium leading-none text-zinc-400 hover:bg-zinc-800 hover:text-fuchsia-500"
 							>
 								Mute
 							</button>

src/app/channel/components/updateModal.tsx

@@ -89,7 +89,7 @@ export default function ChannelUpdateModal({ id }: { id: string }) {
 				<EditIcon
 					width={16}
 					height={16}
-					className="text-zinc-400 group-hover:text-zinc-200"
+					className="text-zinc-400 group-hover:text-white"
 				/>
 			</button>
 			<Transition appear show={isOpen} as={Fragment}>
@@ -121,7 +121,7 @@ export default function ChannelUpdateModal({ id }: { id: string }) {
 										<div className="flex items-center justify-between">
 											<Dialog.Title
 												as="h3"
-												className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-2xl font-semibold leading-none text-transparent"
+												className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-xl font-semibold leading-none text-transparent"
 											>
 												Update channel
 											</Dialog.Title>
@@ -152,10 +152,10 @@ export default function ChannelUpdateModal({ id }: { id: string }) {
 											type={"hidden"}
 											{...register("picture")}
 											value={image}
-											className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
+											className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
 										/>
 										<div className="flex flex-col gap-1">
-											<label className="text-xs font-semibold uppercase tracking-wider text-zinc-400">
+											<label className="text-base font-semibold uppercase tracking-wider text-zinc-400">
 												Picture
 											</label>
 											<div className="relative inline-flex h-36 w-full items-center justify-center overflow-hidden rounded-lg border border-zinc-900 bg-zinc-950">
@@ -170,7 +170,7 @@ export default function ChannelUpdateModal({ id }: { id: string }) {
 											</div>
 										</div>
 										<div className="flex flex-col gap-1">
-											<label className="text-xs font-semibold uppercase tracking-wider text-zinc-400">
+											<label className="text-base font-semibold uppercase tracking-wider text-zinc-400">
 												Channel name *
 											</label>
 											<div className="relative w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
@@ -181,35 +181,35 @@ export default function ChannelUpdateModal({ id }: { id: string }) {
 														minLength: 4,
 													})}
 													spellCheck={false}
-													className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
+													className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
 												/>
 											</div>
 										</div>
 										<div className="flex flex-col gap-1">
-											<label className="text-xs font-semibold uppercase tracking-wider text-zinc-400">
+											<label className="text-base font-semibold uppercase tracking-wider text-zinc-400">
 												Description
 											</label>
 											<div className="relative h-20 w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
 												<textarea
 													{...register("about")}
 													spellCheck={false}
-													className="relative h-20 w-full resize-none rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
+													className="relative h-20 w-full resize-none rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
 												/>
 											</div>
 										</div>
 										<div className="flex h-14 items-center justify-between gap-1 rounded-lg bg-zinc-800 px-4 py-2">
 											<div className="flex flex-col gap-0.5">
 												<div className="inline-flex items-center gap-1">
-													<span className="text-sm font-bold leading-none text-zinc-200">
+													<span className="text-base font-bold leading-none text-white">
 														Make Private
 													</span>
-													<div className="inline-flex items-center rounded-md bg-zinc-400/10 px-2 py-0.5 text-xs font-medium ring-1 ring-inset ring-zinc-400/20">
+													<div className="inline-flex items-center rounded-md bg-zinc-400/10 px-2 py-0.5 text-base font-medium ring-1 ring-inset ring-zinc-400/20">
 														<span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-transparent">
 															Coming soon
 														</span>
 													</div>
 												</div>
-												<p className="text-sm leading-none text-zinc-400">
+												<p className="text-base leading-none text-zinc-400">
 													Private channels can only be viewed by member
 												</p>
 											</div>

src/app/chat/components/item.tsx

@@ -23,7 +23,7 @@ export default function ChatsListItem({ pubkey }: { pubkey: string }) {
 				<div className="inline-flex h-8 items-center gap-2.5 rounded-md px-2.5">
 					<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
 					<div>
-						<div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-sm font-medium" />
+						<div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-base font-medium" />
 					</div>
 				</div>
 			) : (
@@ -32,7 +32,7 @@ export default function ChatsListItem({ pubkey }: { pubkey: string }) {
 					className={twMerge(
 						"group inline-flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:bg-zinc-900",
 						pagePubkey === pubkey
-							? "dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
+							? "dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
 							: "",
 					)}
 				>
@@ -44,8 +44,8 @@ export default function ChatsListItem({ pubkey }: { pubkey: string }) {
 						/>
 					</div>
 					<div>
-						<h5 className="truncate text-[13px] font-semibold text-zinc-400 group-hover:text-zinc-200">
+						<h5 className="truncate font-medium text-zinc-400 group-hover:text-white">
-							{user.display_name || user.name || shortenKey(pubkey)}
+							{user.nip05 || user.name || shortenKey(pubkey)}
 						</h5>
 					</div>
 				</a>

src/app/chat/components/messages/form.tsx

@@ -66,7 +66,7 @@ export default function ChatMessageForm({
 					onKeyDown={handleEnterPress}
 					spellCheck={false}
 					placeholder="Message"
-					className="relative h-24 w-full resize-none rounded-lg border border-black/5 px-3.5 py-3 text-sm shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
+					className="relative h-24 w-full resize-none rounded-lg border border-black/5 px-3.5 py-3 text-base shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
 				/>
 			</div>
 			<div className="absolute bottom-2 w-full px-2">
@@ -80,7 +80,7 @@ export default function ChatMessageForm({
 							type="button"
 							onClick={() => submitEvent()}
 							disabled={value.length === 0 ? true : false}
-							className="inline-flex h-8 w-16 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-sm font-medium shadow-button hover:bg-fuchsia-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+							className="inline-flex h-8 w-16 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-base font-medium shadow-button hover:bg-fuchsia-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
 						>
 							Send
 						</button>

src/app/chat/components/messages/item.tsx

@@ -29,7 +29,7 @@ export const ChatMessageItem = memo(function MessageListItem({
 			<div className="flex flex-col">
 				<ChatMessageUser pubkey={data.pubkey} time={data.created_at} />
 				<div className="-mt-[17px] pl-[48px]">
-					<div className="whitespace-pre-line break-words text-sm leading-tight">
+					<div className="whitespace-pre-line break-words text-base leading-tight">
 						{content.parsed}
 					</div>
 					{Array.isArray(content.images) && content.images.length ? (

src/app/chat/components/messages/user.tsx

@@ -22,7 +22,7 @@ export default function ChatMessageUser({
 				<>
 					<div className="relative h-9 w-9 shrink animate-pulse rounded-md bg-zinc-800" />
 					<div className="flex w-full flex-1 items-start justify-between">
-						<div className="flex items-baseline gap-2 text-sm">
+						<div className="flex items-baseline gap-2 text-base">
 							<div className="h-4 w-20 animate-pulse rounded bg-zinc-800" />
 						</div>
 					</div>
@@ -39,8 +39,8 @@ export default function ChatMessageUser({
 						/>
 					</div>
 					<div className="flex w-full flex-1 items-start justify-between">
-						<div className="flex items-baseline gap-2 text-sm">
+						<div className="flex items-baseline gap-2 text-base">
-							<span className="font-semibold leading-none text-zinc-200 group-hover:underline">
+							<span className="font-semibold leading-none text-white group-hover:underline">
 								{user?.display_name || user?.name || shortenKey(pubkey)}
 							</span>
 							<span className="leading-none text-zinc-500">·</span>

src/app/chat/components/self.tsx

@@ -24,7 +24,7 @@ export default function ChatsListSelfItem() {
 				<div className="inline-flex h-8 items-center gap-2.5 rounded-md px-2.5">
 					<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
 					<div>
-						<div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-sm font-medium" />
+						<div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-base font-medium" />
 					</div>
 				</div>
 			) : (
@@ -33,7 +33,7 @@ export default function ChatsListSelfItem() {
 					className={twMerge(
 						"inline-flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:bg-zinc-900",
 						pagePubkey === account.pubkey
-							? "dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
+							? "dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
 							: "",
 					)}
 				>
@@ -45,11 +45,9 @@ export default function ChatsListSelfItem() {
 						/>
 					</div>
 					<div>
-						<h5 className="truncate text-[13px] font-semibold text-zinc-400">
+						<h5 className="truncate font-medium text-zinc-400">
-							{profile?.display_name ||
+							{profile?.nip05 || profile?.name || shortenKey(account.pubkey)}{" "}
-								profile?.name ||
+							<span className="text-zinc-600">(you)</span>
-								shortenKey(account.pubkey)}{" "}
-							<span className="text-zinc-500">(you)</span>
 						</h5>
 					</div>
 				</a>

src/app/index/pages/index.page.tsx

@@ -21,6 +21,6 @@ export function Page() {
 	}
 
 	return (
-		<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-zinc-100" />
+		<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white" />
 	);
 }

src/app/inital-data/pages/index.page.tsx

@@ -220,7 +220,7 @@ export function Page() {
 					<div className="flex flex-col items-center gap-2">
 						<LumeIcon className="h-16 w-16 text-black dark:text-white" />
 						<div className="text-center">
-							<h3 className="text-lg font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
+							<h3 className="text-lg font-semibold leading-tight text-zinc-900 dark:text-white">
 								Here&apos;s an interesting fact:
 							</h3>
 							<p className="font-medium text-zinc-300 dark:text-zinc-600">

src/app/note/components/metadata/like.tsx

@@ -60,7 +60,7 @@ export default function NoteLike({
 				height={16}
 				className="text-zinc-400 group-hover:text-rose-400"
 			/>
-			<span className="text-sm leading-none text-zinc-400 group-hover:text-zinc-200">
+			<span className="text-base leading-none text-zinc-400 group-hover:text-white">
 				{count}
 			</span>
 		</button>

src/app/note/components/metadata/reply.tsx

@@ -72,7 +72,7 @@ export default function NoteReply({
 					height={16}
 					className="text-zinc-400 group-hover:text-green-400"
 				/>
-				<span className="text-sm leading-none text-zinc-400 group-hover:text-zinc-200">
+				<span className="text-base leading-none text-zinc-400 group-hover:text-white">
 					{compactNumber.format(count)}
 				</span>
 			</button>
@@ -118,7 +118,7 @@ export default function NoteReply({
 												name="content"
 												onChange={(e) => setValue(e.target.value)}
 												placeholder="Send your comment"
-												className="relative h-24 w-full resize-none rounded-md border border-black/5 px-3.5 py-3 text-sm shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
+												className="relative h-24 w-full resize-none rounded-md border border-black/5 px-3.5 py-3 text-base shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
 												spellCheck={false}
 											/>
 										</div>
@@ -132,7 +132,7 @@ export default function NoteReply({
 														type="button"
 														onClick={() => submitEvent()}
 														disabled={value.length === 0 ? true : false}
-														className="inline-flex h-8 w-16 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-sm font-medium shadow-md shadow-fuchsia-900/50 hover:bg-fuchsia-600"
+														className="inline-flex h-8 w-16 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-base font-medium shadow-md shadow-fuchsia-900/50 hover:bg-fuchsia-600"
 													>
 														<span className="text-white drop-shadow">Send</span>
 													</button>

src/app/note/components/metadata/repost.tsx

@@ -61,7 +61,7 @@ export default function NoteRepost({
 				height={16}
 				className="text-zinc-400 group-hover:text-blue-400"
 			/>
-			<span className="text-sm leading-none text-zinc-400 group-hover:text-zinc-200">
+			<span className="text-base leading-none text-zinc-400 group-hover:text-white">
 				{compactNumber.format(count)}
 			</span>
 		</button>

src/app/note/components/metadata/zap.tsx

@@ -16,7 +16,7 @@ export default function NoteZap({ zaps }: { zaps: number }) {
 				height={16}
 				className="text-zinc-400 group-hover:text-orange-400"
 			/>
-			<span className="text-sm leading-none text-zinc-400 group-hover:text-zinc-200">
+			<span className="text-base leading-none text-zinc-400 group-hover:text-white">
 				{compactNumber.format(count)} sats
 			</span>
 		</button>

src/app/note/components/replies/form.tsx

@@ -54,7 +54,7 @@ export default function NoteReplyForm({ id }: { id: string }) {
 						name="content"
 						onChange={(e) => setValue(e.target.value)}
 						placeholder="Reply to this thread..."
-						className="relative h-24 w-full resize-none rounded-md border border-black/5 px-3.5 py-3 text-sm shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
+						className="relative h-24 w-full resize-none rounded-md border border-black/5 px-3.5 py-3 text-base shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
 						spellCheck={false}
 					/>
 				</div>
@@ -66,7 +66,7 @@ export default function NoteReplyForm({ id }: { id: string }) {
 								type="button"
 								onClick={() => submitEvent()}
 								disabled={value.length === 0 ? true : false}
-								className="inline-flex h-8 w-16 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-sm font-medium shadow-button hover:bg-fuchsia-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+								className="inline-flex h-8 w-16 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-base font-medium shadow-button hover:bg-fuchsia-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
 							>
 								Reply
 							</button>

src/app/note/components/replies/list.tsx

@@ -51,7 +51,7 @@ export default function RepliesList({ id }: { id: string }) {
 						<div className="flex gap-2 px-3 py-4">
 							<div className="relative h-9 w-9 shrink animate-pulse rounded-md bg-zinc-800" />
 							<div className="flex w-full flex-1 flex-col justify-center gap-1">
-								<div className="flex items-baseline gap-2 text-sm">
+								<div className="flex items-baseline gap-2 text-base">
 									<div className="h-2.5 w-20 animate-pulse rounded-sm bg-zinc-800" />
 								</div>
 								<div className="h-4 w-44 animate-pulse rounded-sm bg-zinc-800" />

src/app/note/components/user/default.tsx

@@ -31,12 +31,12 @@ export function NoteDefaultUser({
 			</Popover.Button>
 			<div className="flex w-full flex-1 items-start justify-between">
 				<div className="flex flex-col gap-0.5">
-					<h5 className="text-sm font-semibold leading-none">
+					<h5 className="text-base font-semibold leading-none">
 						{user?.display_name || user?.name || (
 							<div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700" />
 						)}
 					</h5>
-					<div className="flex items-baseline gap-1.5 text-sm leading-none text-zinc-500">
+					<div className="flex items-baseline gap-1.5 text-base leading-none text-zinc-500">
 						<span>{user?.nip05 || shortenKey(pubkey)}</span>
 						<span>•</span>
 						<span>{dayjs().to(dayjs.unix(time), true)}</span>
@@ -68,17 +68,17 @@ export function NoteDefaultUser({
 							/>
 							<div className="flex w-full flex-1 flex-col gap-2">
 								<div className="inline-flex w-2/3 flex-col gap-0.5">
-									<h5 className="text-sm font-semibold leading-none">
+									<h5 className="text-base font-semibold leading-none">
 										{user?.display_name || user?.name || (
 											<div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700" />
 										)}
 									</h5>
-									<span className="truncate text-sm leading-none text-zinc-500">
+									<span className="truncate text-base leading-none text-zinc-500">
 										{user?.nip05 || shortenKey(pubkey)}
 									</span>
 								</div>
 								<div>
-									<p className="line-clamp-3 text-sm leading-tight text-zinc-100">
+									<p className="line-clamp-3 text-base leading-tight text-white">
 										{user?.about}
 									</p>
 								</div>
@@ -87,13 +87,13 @@ export function NoteDefaultUser({
 						<div className="flex items-center gap-2 px-3 py-3">
 							<a
 								href={`/app/user?pubkey=${pubkey}`}
-								className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-800 text-sm font-medium"
+								className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-800 text-base font-medium"
 							>
 								View full profile
 							</a>
 							<a
 								href={`/app/chat?pubkey=${pubkey}`}
-								className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-800 text-sm font-medium"
+								className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-800 text-base font-medium"
 							>
 								Message
 							</a>

src/app/note/components/user/reply.tsx

@@ -28,8 +28,8 @@ export default function NoteReplyUser({
 				/>
 			</div>
 			<div className="flex w-full flex-1 items-start justify-between">
-				<div className="flex items-baseline gap-2 text-sm">
+				<div className="flex items-baseline gap-2 text-base">
-					<span className="font-semibold leading-none text-zinc-200 group-hover:underline">
+					<span className="font-semibold leading-none text-white group-hover:underline">
 						{user?.display_name || user?.name || shortenKey(pubkey)}
 					</span>
 					<span className="leading-none text-zinc-500">·</span>

src/app/note/components/user/repost.tsx

@@ -29,7 +29,7 @@ export function NoteRepostUser({
 					className="h-9 w-9 rounded-md object-cover"
 				/>
 			</Popover.Button>
-			<div className="flex items-baseline gap-1.5 text-sm">
+			<div className="flex items-baseline gap-1.5 text-base">
 				<h5 className="font-semibold leading-tight group-hover:underline">
 					{user?.display_name || user?.name || (
 						<div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700" />
@@ -69,17 +69,17 @@ export function NoteRepostUser({
 							/>
 							<div className="flex w-full flex-1 flex-col gap-2">
 								<div className="inline-flex w-2/3 flex-col gap-0.5">
-									<h5 className="text-sm font-semibold leading-none">
+									<h5 className="text-base font-semibold leading-none">
 										{user?.display_name || user?.name || (
 											<div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700" />
 										)}
 									</h5>
-									<span className="truncate text-sm leading-none text-zinc-500">
+									<span className="truncate text-base leading-none text-zinc-500">
 										{user?.nip05 || shortenKey(pubkey)}
 									</span>
 								</div>
 								<div>
-									<p className="line-clamp-3 text-sm leading-tight text-zinc-100">
+									<p className="line-clamp-3 text-base leading-tight text-white">
 										{user?.about}
 									</p>
 								</div>
@@ -88,13 +88,13 @@ export function NoteRepostUser({
 						<div className="flex items-center gap-2 px-3 py-3">
 							<a
 								href={`/app/user?pubkey=${pubkey}`}
-								className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-800 text-sm font-medium"
+								className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-800 text-base font-medium"
 							>
 								View full profile
 							</a>
 							<a
 								href={`/app/chat?pubkey=${pubkey}`}
-								className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-800 text-sm font-medium"
+								className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-800 text-base font-medium"
 							>
 								Message
 							</a>

src/app/note/pages/index.page.tsx

@@ -54,7 +54,7 @@ export function Page() {
 								<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-700" />
 								<div className="flex w-full flex-1 items-start justify-between">
 									<div className="flex w-full items-center justify-between">
-										<div className="flex items-center gap-2 text-sm">
+										<div className="flex items-center gap-2 text-base">
 											<div className="h-4 w-16 rounded bg-zinc-700" />
 										</div>
 									</div>

src/app/space/components/header.tsx

@@ -7,7 +7,7 @@ export function Header() {
 				type="button"
 				className="from-zinc-90 inline-flex h-11 items-center overflow-hidden border-b border-fuchsia-500 hover:bg-zinc-900"
 			>
-				<span className="px-2 text-sm font-semibold text-zinc-300">
+				<span className="px-2 text-base font-semibold text-zinc-300">
 					Following
 				</span>
 			</button>

src/app/space/components/views/createModal.tsx

@@ -22,7 +22,7 @@ export function CreateViewModal() {
 				onClick={openModal}
 				className="inline-flex h-11 items-center overflow-hidden border-b border-transparent hover:bg-zinc-900"
 			>
-				<span className="inline-flex items-center gap-1 px-2 text-sm font-medium text-zinc-500">
+				<span className="inline-flex items-center gap-1 px-2 text-base font-medium text-zinc-500">
 					<PlusIcon width={14} height={14} />
 					View
 				</span>
@@ -56,7 +56,7 @@ export function CreateViewModal() {
 										<div className="flex items-center justify-between">
 											<Dialog.Title
 												as="h3"
-												className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-xl font-semibold leading-none text-transparent"
+												className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-lg font-semibold leading-none text-transparent"
 											>
 												Create a view
 											</Dialog.Title>
@@ -72,7 +72,7 @@ export function CreateViewModal() {
 												/>
 											</button>
 										</div>
-										<Dialog.Description className="text-sm leading-tight text-zinc-400">
+										<Dialog.Description className="text-base leading-tight text-zinc-400">
 											View is specific feature help you pin who you want to see
 											in your feed. You can add maximum 5 people in a view.
 										</Dialog.Description>

src/app/threads/components/author.tsx

@@ -23,12 +23,12 @@ export function ThreadAuthor({
 			</div>
 			<div className="flex w-full flex-1 items-start justify-between">
 				<div className="flex flex-col gap-0.5">
-					<h5 className="text-sm font-semibold leading-none">
+					<h5 className="text-base font-semibold leading-none">
 						{user?.display_name || user?.name || (
 							<div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700" />
 						)}
 					</h5>
-					<div className="flex items-baseline gap-1.5 text-sm leading-none text-zinc-500">
+					<div className="flex items-baseline gap-1.5 text-base leading-none text-zinc-500">
 						<span>{user?.nip05 || shortenKey(pubkey)}</span>
 						<span>•</span>
 						<span>{dayjs().to(dayjs.unix(time), true)}</span>

src/app/threads/components/base.tsx

@@ -17,7 +17,7 @@ export function ThreadBase({ event }: { event: any }) {
 				<div className="px-3 py-3">
 					<div className="flex flex-row gap-2">
 						<div className="flex-1">
-							<h3 className="text-zinc-100 text-xl font-semibold">{title}</h3>
+							<h3 className="text-white text-lg font-semibold">{title}</h3>
 							<div className="mt-2 prose prose-zinc max-w-none select-text break-words dark:prose-invert prose-p:text-[15px] prose-p:leading-tight prose-a:text-[15px] prose-a:font-normal prose-a:leading-tight prose-a:text-fuchsia-500 prose-a:no-underline hover:prose-a:text-fuchsia-600 hover:prose-a:underline prose-ol:mb-1 prose-ul:mb-1 prose-li:text-[15px] prose-li:leading-tight">
 								<p>{summary}</p>
 							</div>

src/renderer/index.css

@@ -2,11 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Fixed webkit bug: https://bugs.webkit.org/show_bug.cgi?id=243601 */
+html {
-@supports (font: -apple-system-body) and (-webkit-appearance: none) {
+  font-size: 14px;
-  img[loading='lazy'] {
-    clip-path: inset(0.6px);
-  }
 }
 
 a {

src/shared/avatarUploader.tsx

@@ -54,7 +54,7 @@ export function AvatarUploader({ valueState }: { valueState: any }) {
 		<button
 			onClick={() => openFileDialog()}
 			type="button"
-			className="inline-flex h-6 items-center justify-center rounded bg-zinc-900 px-3 text-xs font-medium text-zinc-200 ring-1 ring-zinc-800 hover:bg-zinc-700"
+			className="inline-flex h-6 items-center justify-center rounded bg-zinc-900 px-3 text-base font-medium text-white ring-1 ring-zinc-800 hover:bg-zinc-700"
 		>
 			{loading ? (
 				<svg

src/shared/composer/modal.tsx

@@ -33,7 +33,7 @@ export function ComposerModal() {
 			<button
 				type="button"
 				onClick={() => openModal()}
-				className="inline-flex h-7 w-max items-center justify-center gap-1 rounded-md bg-fuchsia-500 px-2.5 text-xs font-medium text-zinc-200 shadow-button hover:bg-fuchsia-600 focus:outline-none"
+				className="inline-flex h-8 w-max items-center justify-center gap-1 rounded-md bg-fuchsia-500 px-2.5 text-sm font-medium text-white shadow-button hover:bg-fuchsia-600 focus:outline-none"
 			>
 				<ComposeIcon width={14} height={14} />
 				Compose
@@ -76,7 +76,7 @@ export function ComposerModal() {
 												className="text-zinc-500"
 											/>
 										</span>
-										<div className="inline-flex h-6 w-max items-center justify-center gap-0.5 rounded bg-zinc-800 pl-3 pr-1.5 text-xs font-medium text-zinc-400 shadow-mini-button">
+										<div className="inline-flex h-6 w-max items-center justify-center gap-0.5 rounded bg-zinc-800 pl-3 pr-1.5 text-base font-medium text-zinc-400 shadow-mini-button">
 											New Post
 											<ChevronDownIcon width={14} height={14} />
 										</div>

src/shared/composer/types/post.tsx

@@ -48,9 +48,9 @@ const ImagePreview = ({
 				<button
 					type="button"
 					onClick={() => Transforms.removeNodes(editor, { at: path })}
-					className="absolute right-2 top-2 inline-flex h-7 w-7 items-center justify-center gap-0.5 rounded bg-zinc-800 text-xs font-medium text-zinc-400 shadow-mini-button hover:bg-zinc-700"
+					className="absolute right-2 top-2 inline-flex h-7 w-7 items-center justify-center gap-0.5 rounded bg-zinc-800 text-base font-medium text-zinc-400 shadow-mini-button hover:bg-zinc-700"
 				>
-					<TrashIcon width={14} height={14} className="text-zinc-100" />
+					<TrashIcon width={14} height={14} className="text-white" />
 				</button>
 			</div>
 		</figure>
@@ -130,7 +130,7 @@ export function Post({ pubkey, privkey }: { pubkey: string; privkey: string }) {
 					<button
 						type="button"
 						onClick={submit}
-						className="inline-flex h-7 w-max items-center justify-center gap-1 rounded-md bg-fuchsia-500 px-3.5 text-xs font-medium text-zinc-200 shadow-button hover:bg-fuchsia-600"
+						className="inline-flex h-7 w-max items-center justify-center gap-1 rounded-md bg-fuchsia-500 px-3.5 text-base font-medium text-white shadow-button hover:bg-fuchsia-600"
 					>
 						Post
 					</button>

src/shared/composer/user.tsx

@@ -17,7 +17,7 @@ export function User({ data }: { data: any }) {
 					loading="auto"
 				/>
 			</div>
-			<h5 className="text-sm font-semibold leading-none text-zinc-100">
+			<h5 className="text-base font-semibold leading-none text-white">
 				{metadata?.display_name || metadata?.name || (
 					<div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700" />
 				)}

src/shared/eventCollector.tsx

@@ -136,7 +136,7 @@ export default function EventCollector() {
 	);
 
 	return (
-		<div className="inline-flex h-6 w-6 items-center justify-center rounded text-zinc-400 hover:bg-zinc-900 hover:text-zinc-200">
+		<div className="inline-flex h-6 w-6 items-center justify-center rounded text-zinc-400 hover:bg-zinc-900 hover:text-white">
 			<HeartBeatIcon width={14} height={14} />
 		</div>
 	);

src/shared/image.tsx

@@ -8,7 +8,6 @@ export function Image(props) {
 	return (
 		<img
 			{...props}
-			loading="lazy"
 			decoding="async"
 			onError={addImageFallback}
 			alt="lume default img"

src/shared/multiAccounts.tsx

@@ -36,7 +36,7 @@ export default function MultiAccounts() {
 							<BellIcon
 								width={16}
 								height={16}
-								className="text-zinc-400 group-hover:text-zinc-200"
+								className="text-zinc-400 group-hover:text-white"
 							/>
 						</button>
 					</div>
@@ -61,16 +61,16 @@ export default function MultiAccounts() {
 						<PlusIcon
 							width={16}
 							height={16}
-							className="text-zinc-400 group-hover:text-zinc-200"
+							className="text-zinc-400 group-hover:text-white"
 						/>
 					</button>
 				</div>
 			</div>
 			<div className="flex flex-col gap-0.5 text-center">
-				<span className="text-sm font-black uppercase leading-tight text-zinc-600">
+				<span className="text-base font-black uppercase leading-tight text-zinc-600">
 					Lume
 				</span>
-				<span className="text-xs font-medium text-zinc-700">
+				<span className="text-base font-medium text-zinc-700">
 					v{APP_VERSION}
 				</span>
 			</div>

src/shared/navigation.tsx

@@ -29,23 +29,23 @@ export default function Navigation() {
 				<div className="flex flex-col text-zinc-400">
 					<ActiveLink
 						href="/app/space"
-						className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-[13px] font-semibold hover:text-zinc-200"
+						className="flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:text-white"
 						activeClassName="bg-zinc-900/50 hover:bg-zinc-900"
 					>
 						<span className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">
-							<WorldIcon width={12} height={12} className="text-zinc-200" />
+							<WorldIcon width={12} height={12} className="text-white" />
 						</span>
-						<span>Space</span>
+						<span className="font-medium">Space</span>
 					</ActiveLink>
 					<ActiveLink
 						href="/app/threads"
-						className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-[13px] font-semibold hover:text-zinc-200"
+						className="flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:text-white"
 						activeClassName=""
 					>
 						<span className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">
-							<ThreadsIcon width={12} height={12} className="text-zinc-200" />
+							<ThreadsIcon width={12} height={12} className="text-white" />
 						</span>
-						<span>Threads</span>
+						<span className="font-medium">Threads</span>
 					</ActiveLink>
 				</div>
 			</div>

src/shared/networkStatusIndicator.tsx

@@ -17,7 +17,7 @@ export function NetworkStatusIndicator() {
 					}`}
 				/>
 			</div>
-			<p className="text-xs font-medium text-zinc-500">
+			<p className="text-base font-medium text-zinc-500">
 				{isOnline ? "Online" : "Offline"}
 			</p>
 		</div>

src/shared/profile/metadata.tsx

@@ -44,10 +44,10 @@ export default function ProfileMetadata({ id }: { id: string }) {
 			<div className="-mt-4 mb-8 px-4">
 				<div>
 					<div className="mb-3 flex flex-col">
-						<h3 className="text-lg font-semibold leading-tight text-zinc-100">
+						<h3 className="text-lg font-semibold leading-tight text-white">
 							{profile?.display_name || profile?.name}
 						</h3>
-						<span className="text-sm leading-tight text-zinc-500">
+						<span className="text-base leading-tight text-zinc-500">
 							{profile?.username || (id && shortenKey(id))}
 						</span>
 					</div>

src/shared/tooltip.tsx

@@ -42,7 +42,7 @@ export function Tooltip({
 			{isOpen && (
 				<div
 					ref={refs.setFloating}
-					className="w-max select-none rounded-md bg-zinc-800 px-4 py-2 text-xs font-medium leading-none text-zinc-100"
+					className="w-max select-none rounded-md bg-zinc-800 px-4 py-2 text-base font-medium leading-none text-white"
 					style={{
 						position: strategy,
 						top: y ?? 0,