diff --git a/src/components/account-info.tsx b/src/components/account-info.tsx
index c314f1b..140abb1 100644
--- a/src/components/account-info.tsx
+++ b/src/components/account-info.tsx
@@ -13,16 +13,46 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import type { IUserData } from "@/interfaces/userdata.interface";
 
-import { Landmark, Unplug, User, Wallet } from "lucide-react";
+import { CopyButton } from "@/components/ui/copy-button";
+import { doDisconnect } from "@/services/account.handler";
+import { Bitcoin, Fingerprint, Key, Landmark, Unplug, User, Wallet } from "lucide-react";
+import Link from "next/link";
 import type React from "react";
 
 export function AccountInfo({
 	userData,
 	setUserData,
+	isDisconnected,
 }: {
 	userData: IUserData;
 	setUserData: React.Dispatch<React.SetStateAction<IUserData | undefined>>;
+	isDisconnected: boolean;
 }) {
+	if (isDisconnected) {
+		return (
+			<div className={"flex flex-col justify-center items-center h-10 p-2 text-xs mt-2"}>
+				<div
+					className={
+						"flex flex-row justify-center items-center gap-1 text-destructive to-red-900 animate-pulse"
+					}
+				>
+					<Unplug className={"w-4"} />
+					<p>Disconnected</p>
+				</div>
+				<div>
+					<Link
+						href={"/auth"}
+						className={
+							"hover:text-primary flex justify-evenly items-center gap-1 p-1 text-nowrap"
+						}
+					>
+						<Key className={"w-3"} /> Link account
+					</Link>
+				</div>
+			</div>
+		);
+	}
+
 	return (
 		<Dialog>
 			<DialogTrigger asChild>
@@ -37,12 +67,49 @@ export function AccountInfo({
 					<DialogDescription>{userData.city}</DialogDescription>
 				</DialogHeader>
 				<div className={"flex flex-col items-center justify-center w-full"}>
-					<div className={"flex flex-row justify-evenly items-center"}>
-						<div className={"flex flex-row gap-1 justify-center items-center mx-auto"}>
-							<Landmark />
-							<p>{userData.dollarAvailables} $</p>
+					<div className={"flex flex-col justify-evenly items-center gap-2"}>
+						<div
+							className={
+								"flex flex-col md:flex-row gap-2 justify-center md:justify-evenly items-start md:items-center w-full"
+							}
+						>
+							<div
+								className={
+									"flex gap-1 justify-start md:justify-center items-center mx-auto w-full md:w-fit"
+								}
+							>
+								<Landmark />
+								<p className={"rounded bg-accent text-accent-foreground p-1"}>
+									{userData.dollarAvailables} $
+								</p>
+							</div>
+							<div
+								className={
+									"flex gap-1 justify-start md:justify-center items-center mx-auto w-full md:w-fit"
+								}
+							>
+								<Bitcoin />
+								<p className={"rounded bg-accent text-accent-foreground p-1"}>
+									You dont have cryptos.
+								</p>
+							</div>
+						</div>
+						<div
+							className={"flex flex-col gap-3 justify-center items-start mx-auto mt-4"}
+						>
+							<div className={"flex flex-row text-nowrap flex-nowrap gap-1 text-primary"}>
+								<Fingerprint />
+								<h2>Your identity</h2>
+							</div>
+							<div
+								className={
+									"font-light text-xs md:text-sm flex flex-row items-center justify-start gap-1 bg-accent p-2 rounded"
+								}
+							>
+								<p>{userData.id}</p>
+								<CopyButton value={userData.id} />
+							</div>
 						</div>
-						<div></div>
 					</div>
 				</div>
 				<DialogFooter>
@@ -50,7 +117,11 @@ export function AccountInfo({
 						<Wallet />
 						<p>My wallet</p>
 					</Button>
-					<Button variant={"destructive"} className={"gap-2 px-2"}>
+					<Button
+						variant={"destructive"}
+						className={"gap-2 px-2"}
+						onClick={() => doDisconnect()}
+					>
 						<Unplug />
 						<p>Disconnect</p>
 					</Button>