diff --git a/src/components/CellList.tsx b/src/components/CellList.tsx
index c31d4f4..ad151de 100644
--- a/src/components/CellList.tsx
+++ b/src/components/CellList.tsx
@@ -29,7 +29,9 @@ import { Cell } from '@/types/forum';
 import { usePending } from '@/hooks/usePending';
 
 // Empty State Component
-const EmptyState: React.FC<{ canCreateCell: boolean }> = ({ canCreateCell }) => {
+const EmptyState: React.FC<{ canCreateCell: boolean }> = ({
+  canCreateCell,
+}) => {
   return (
     <div className="col-span-2 flex flex-col items-center justify-center py-16 px-4">
       {/* Visual Element */}
@@ -76,10 +78,7 @@ const CellItem: React.FC<{ cell: Cell }> = ({ cell }) => {
   const pending = usePending(cell.id);
 
   return (
-    <Link
-      to={`/cell/${cell.id}`}
-      className="group block board-card"
-    >
+    <Link to={`/cell/${cell.id}`} className="group block board-card">
       <div className="flex items-start gap-4">
         <CypherImage
           src={cell.icon}
@@ -162,64 +161,72 @@ const CellList = () => {
       <div className="page-header">
         <div className="flex justify-between items-center">
           <div>
-            <h1 className="page-title">
-              Decentralized Cells
-            </h1>
+            <h1 className="page-title">Decentralized Cells</h1>
             <p className="page-subtitle">
               Discover communities built on Bitcoin Ordinals
             </p>
           </div>
 
-        {/* Only show controls when cells exist */}
-        {hasCells && (
-          <div className="flex items-center gap-4">
-            <ModerationToggle />
+          {/* Only show controls when cells exist */}
+          {hasCells && (
+            <div className="flex items-center gap-4">
+              <ModerationToggle />
 
-            <Select
-              value={sortOption}
-              onValueChange={(value: SortOption) => setSortOption(value)}
-            >
-              <SelectTrigger className="w-40 bg-cyber-muted/50 border-cyber-muted text-cyber-light">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent className="bg-cyber-dark border-cyber-muted/30">
-                <SelectItem value="relevance" className="text-cyber-light hover:bg-cyber-muted/30">
-                  <TrendingUp className="w-4 h-4 mr-2 inline" />
-                  Relevance
-                </SelectItem>
-                <SelectItem value="activity" className="text-cyber-light hover:bg-cyber-muted/30">
-                  <MessageSquare className="w-4 h-4 mr-2 inline" />
-                  Activity
-                </SelectItem>
-                <SelectItem value="newest" className="text-cyber-light hover:bg-cyber-muted/30">
-                  <Clock className="w-4 h-4 mr-2 inline" />
-                  Newest
-                </SelectItem>
-                <SelectItem value="alphabetical" className="text-cyber-light hover:bg-cyber-muted/30">
-                  <Layout className="w-4 h-4 mr-2 inline" />
-                  A-Z
-                </SelectItem>
-              </SelectContent>
-            </Select>
+              <Select
+                value={sortOption}
+                onValueChange={(value: SortOption) => setSortOption(value)}
+              >
+                <SelectTrigger className="w-40 bg-cyber-muted/50 border-cyber-muted text-cyber-light">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent className="bg-cyber-dark border-cyber-muted/30">
+                  <SelectItem
+                    value="relevance"
+                    className="text-cyber-light hover:bg-cyber-muted/30"
+                  >
+                    <TrendingUp className="w-4 h-4 mr-2 inline" />
+                    Relevance
+                  </SelectItem>
+                  <SelectItem
+                    value="activity"
+                    className="text-cyber-light hover:bg-cyber-muted/30"
+                  >
+                    <MessageSquare className="w-4 h-4 mr-2 inline" />
+                    Activity
+                  </SelectItem>
+                  <SelectItem
+                    value="newest"
+                    className="text-cyber-light hover:bg-cyber-muted/30"
+                  >
+                    <Clock className="w-4 h-4 mr-2 inline" />
+                    Newest
+                  </SelectItem>
+                  <SelectItem
+                    value="alphabetical"
+                    className="text-cyber-light hover:bg-cyber-muted/30"
+                  >
+                    <Layout className="w-4 h-4 mr-2 inline" />
+                    A-Z
+                  </SelectItem>
+                </SelectContent>
+              </Select>
 
-            <Button
-              variant="outline"
-              size="icon"
-              onClick={refreshData}
-              disabled={isInitialLoading}
-              title="Refresh data"
-              className="px-3 border-cyber-muted/30 text-cyber-neutral hover:bg-cyber-muted/30"
-            >
-              <RefreshCw
-                className={`w-4 h-4 ${isInitialLoading ? 'animate-spin' : ''}`}
-              />
-            </Button>
-            
-            {canCreateCell && (
-              <CreateCellDialog />
-            )}
-          </div>
-        )}
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={refreshData}
+                disabled={isInitialLoading}
+                title="Refresh data"
+                className="px-3 border-cyber-muted/30 text-cyber-neutral hover:bg-cyber-muted/30"
+              >
+                <RefreshCw
+                  className={`w-4 h-4 ${isInitialLoading ? 'animate-spin' : ''}`}
+                />
+              </Button>
+
+              {canCreateCell && <CreateCellDialog />}
+            </div>
+          )}
         </div>
       </div>
 
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index f608d6a..74fa191 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -122,7 +122,6 @@ const Header = () => {
     });
   };
 
-
   const getStatusIcon = () => {
     if (!isConnected) return <CircleSlash className="w-4 h-4" />;
 
@@ -191,24 +190,29 @@ const Header = () => {
               {isConnected ? (
                 <div className="flex items-center space-x-2">
                   {/* Status Badge */}
-                  <Badge 
-                    variant="outline" 
+                  <Badge
+                    variant="outline"
                     className={`font-mono text-xs border-0 ${
-                      verificationStatus === EVerificationStatus.ENS_ORDINAL_VERIFIED && delegationInfo?.isValid
+                      verificationStatus ===
+                        EVerificationStatus.ENS_ORDINAL_VERIFIED &&
+                      delegationInfo?.isValid
                         ? 'bg-green-500/20 text-green-400 border-green-500/30'
-                        : verificationStatus === EVerificationStatus.ENS_ORDINAL_VERIFIED
-                        ? 'bg-orange-500/20 text-orange-400 border-orange-500/30'
-                        : 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30'
+                        : verificationStatus ===
+                            EVerificationStatus.ENS_ORDINAL_VERIFIED
+                          ? 'bg-orange-500/20 text-orange-400 border-orange-500/30'
+                          : 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30'
                     }`}
                   >
                     {getStatusIcon()}
                     <span className="ml-1">
-                      {verificationStatus === EVerificationStatus.ENS_ORDINAL_VERIFIED && delegationInfo?.isValid
+                      {verificationStatus ===
+                        EVerificationStatus.ENS_ORDINAL_VERIFIED &&
+                      delegationInfo?.isValid
                         ? 'READY'
-                        : verificationStatus === EVerificationStatus.ENS_ORDINAL_VERIFIED
-                        ? 'EXPIRED'
-                        : 'VERIFY'
-                      }
+                        : verificationStatus ===
+                            EVerificationStatus.ENS_ORDINAL_VERIFIED
+                          ? 'EXPIRED'
+                          : 'VERIFY'}
                     </span>
                   </Badge>
 
@@ -224,37 +228,53 @@ const Header = () => {
                         <Settings className="w-4 h-4" />
                       </Button>
                     </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end" className="w-56 bg-black/95 border-cyber-muted/30">
+                    <DropdownMenuContent
+                      align="end"
+                      className="w-56 bg-black/95 border-cyber-muted/30"
+                    >
                       <div className="px-3 py-2 border-b border-cyber-muted/30">
-                        <div className="text-sm font-medium text-white">{displayName}</div>
-                        <div className="text-xs text-cyber-neutral">{address?.slice(0, 8)}...{address?.slice(-4)}</div>
+                        <div className="text-sm font-medium text-white">
+                          {displayName}
+                        </div>
+                        <div className="text-xs text-cyber-neutral">
+                          {address?.slice(0, 8)}...{address?.slice(-4)}
+                        </div>
                       </div>
-                      
+
                       <DropdownMenuItem asChild>
-                        <Link to="/profile" className="flex items-center space-x-2">
+                        <Link
+                          to="/profile"
+                          className="flex items-center space-x-2"
+                        >
                           <User className="w-4 h-4" />
                           <span>Profile</span>
                         </Link>
                       </DropdownMenuItem>
-                      
+
                       <DropdownMenuItem asChild>
-                        <Link to="/bookmarks" className="flex items-center space-x-2">
+                        <Link
+                          to="/bookmarks"
+                          className="flex items-center space-x-2"
+                        >
                           <Bookmark className="w-4 h-4" />
                           <span>Bookmarks</span>
                         </Link>
                       </DropdownMenuItem>
-                      
+
                       <DropdownMenuSeparator className="bg-cyber-muted/30" />
-                      
-                      <DropdownMenuItem onClick={handleOpenWizard} className="flex items-center space-x-2">
+
+                      <DropdownMenuItem
+                        onClick={handleOpenWizard}
+                        className="flex items-center space-x-2"
+                      >
                         <Settings className="w-4 h-4" />
                         <span>Setup Wizard</span>
                       </DropdownMenuItem>
-                      
+
                       <DropdownMenuSeparator className="bg-cyber-muted/30" />
-                      
-                      <DropdownMenuItem 
-                        onClick={handleDisconnect} 
+
+                      <DropdownMenuItem
+                        onClick={handleDisconnect}
                         className="flex items-center space-x-2 text-red-400 focus:text-red-400"
                       >
                         <LogOut className="w-4 h-4" />
@@ -279,7 +299,11 @@ const Header = () => {
                 onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                 className="md:hidden text-white hover:bg-cyber-muted/30"
               >
-                {mobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+                {mobileMenuOpen ? (
+                  <X className="w-5 h-5" />
+                ) : (
+                  <Menu className="w-5 h-5" />
+                )}
               </Button>
             </div>
           </div>
@@ -395,7 +419,7 @@ const Header = () => {
                   </>
                 )}
               </nav>
-              
+
               {/* Mobile Network Status */}
               <div className="px-4 py-3 border-t border-cyber-muted/20">
                 <div className="flex items-center space-x-2 text-xs text-cyber-neutral">
diff --git a/src/components/PostList.tsx b/src/components/PostList.tsx
index 01ebbe9..a613efc 100644
--- a/src/components/PostList.tsx
+++ b/src/components/PostList.tsx
@@ -267,10 +267,7 @@ const PostList = () => {
           </div>
         ) : (
           visiblePosts.map(post => (
-            <div
-              key={post.id}
-              className="thread-card"
-            >
+            <div key={post.id} className="thread-card">
               <div className="flex gap-4">
                 <div className="flex flex-col items-center">
                   <button
diff --git a/src/components/ui/wallet-wizard.tsx b/src/components/ui/wallet-wizard.tsx
index 231c226..f1b29a7 100644
--- a/src/components/ui/wallet-wizard.tsx
+++ b/src/components/ui/wallet-wizard.tsx
@@ -66,10 +66,9 @@ export function WalletWizard({
     }
   };
 
-
   const renderStepIcon = (step: WizardStep) => {
     const status = getStepStatus(step);
-    
+
     // Check if step is actually completed based on auth state
     const isActuallyComplete = (step: WizardStep): boolean => {
       switch (step) {
@@ -126,10 +125,12 @@ export function WalletWizard({
                   className={`text-sm ${
                     getStepStatus(step as WizardStep) === 'current'
                       ? 'text-blue-500 font-medium'
-                      : (getStepStatus(step as WizardStep) === 'complete' || 
-                         (step === 1 && isAuthenticated) ||
-                         (step === 2 && verificationStatus !== EVerificationStatus.WALLET_UNCONNECTED) ||
-                         (step === 3 && delegationStatus.isValid))
+                      : getStepStatus(step as WizardStep) === 'complete' ||
+                          (step === 1 && isAuthenticated) ||
+                          (step === 2 &&
+                            verificationStatus !==
+                              EVerificationStatus.WALLET_UNCONNECTED) ||
+                          (step === 3 && delegationStatus.isValid)
                         ? 'text-green-500'
                         : 'text-gray-400'
                   }`}
@@ -142,7 +143,9 @@ export function WalletWizard({
                   className={`w-8 h-px mx-2 ${
                     getStepStatus(step as WizardStep) === 'complete' ||
                     (step === 1 && isAuthenticated) ||
-                    (step === 2 && verificationStatus !== EVerificationStatus.WALLET_UNCONNECTED)
+                    (step === 2 &&
+                      verificationStatus !==
+                        EVerificationStatus.WALLET_UNCONNECTED)
                       ? 'bg-green-500'
                       : 'bg-gray-600'
                   }`}
diff --git a/src/lib/waku/constants.ts b/src/lib/waku/constants.ts
index 72dbcf1..a96a10c 100644
--- a/src/lib/waku/constants.ts
+++ b/src/lib/waku/constants.ts
@@ -14,4 +14,4 @@ export const BOOTSTRAP_NODES = {
     '/dns4/node-01.do-ams3.waku.sandbox.status.im/tcp/30303/p2p/16Uiu2HAmNaeL4p3WEYzC9mgXBmBWSgWjPHRvatZTXnp8Jgv3iKsb',
     '/dns4/vps-aaa00d52.vps.ovh.ca/tcp/8000/wss/p2p/16Uiu2HAm9PftGgHZwWE3wzdMde4m3kT2eYJFXLZfGoSED3gysofk',
   ],
-};
\ No newline at end of file
+};
diff --git a/src/pages/BookmarksPage.tsx b/src/pages/BookmarksPage.tsx
index 6cc47d5..e86da8d 100644
--- a/src/pages/BookmarksPage.tsx
+++ b/src/pages/BookmarksPage.tsx
@@ -129,44 +129,42 @@ const BookmarksPage = () => {
             <div className="flex items-center justify-between mb-4">
               <div className="flex items-center gap-3">
                 <BookmarkIcon className="text-cyber-accent" size={32} />
-                <h1 className="page-title">
-                  My Bookmarks
-                </h1>
+                <h1 className="page-title">My Bookmarks</h1>
               </div>
 
-            {bookmarks.length > 0 && (
-              <AlertDialog>
-                <AlertDialogTrigger asChild>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="text-red-400 border-red-400/30 hover:bg-red-400/10"
-                  >
-                    <Trash2 size={16} className="mr-2" />
-                    Clear All
-                  </Button>
-                </AlertDialogTrigger>
-                <AlertDialogContent>
-                  <AlertDialogHeader>
-                    <AlertDialogTitle>Clear All Bookmarks</AlertDialogTitle>
-                    <AlertDialogDescription>
-                      Are you sure you want to remove all your bookmarks? This
-                      action cannot be undone.
-                    </AlertDialogDescription>
-                  </AlertDialogHeader>
-                  <AlertDialogFooter>
-                    <AlertDialogCancel>Cancel</AlertDialogCancel>
-                    <AlertDialogAction
-                      onClick={handleClearAll}
-                      className="bg-red-600 hover:bg-red-700"
+              {bookmarks.length > 0 && (
+                <AlertDialog>
+                  <AlertDialogTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="text-red-400 border-red-400/30 hover:bg-red-400/10"
                     >
+                      <Trash2 size={16} className="mr-2" />
                       Clear All
-                    </AlertDialogAction>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialog>
-            )}
-          </div>
+                    </Button>
+                  </AlertDialogTrigger>
+                  <AlertDialogContent>
+                    <AlertDialogHeader>
+                      <AlertDialogTitle>Clear All Bookmarks</AlertDialogTitle>
+                      <AlertDialogDescription>
+                        Are you sure you want to remove all your bookmarks? This
+                        action cannot be undone.
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>Cancel</AlertDialogCancel>
+                      <AlertDialogAction
+                        onClick={handleClearAll}
+                        className="bg-red-600 hover:bg-red-700"
+                      >
+                        Clear All
+                      </AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
+              )}
+            </div>
 
             <p className="page-subtitle">
               Your saved posts and comments. Bookmarks are stored locally and
@@ -174,83 +172,83 @@ const BookmarksPage = () => {
             </p>
           </div>
 
-        {/* Stats */}
-        {bookmarks.length > 0 && (
-          <div className="flex gap-4 mb-6">
-            <Badge
-              variant="outline"
-              className="border-cyber-accent/30 text-cyber-accent"
-            >
-              <FileText size={14} className="mr-1" />
-              {postBookmarks.length} Posts
-            </Badge>
-            <Badge
-              variant="outline"
-              className="border-cyber-accent/30 text-cyber-accent"
-            >
-              <MessageSquare size={14} className="mr-1" />
-              {commentBookmarks.length} Comments
-            </Badge>
-            <Badge
-              variant="outline"
-              className="border-cyber-accent/30 text-cyber-accent"
-            >
-              <BookmarkIcon size={14} className="mr-1" />
-              {bookmarks.length} Total
-            </Badge>
-          </div>
-        )}
+          {/* Stats */}
+          {bookmarks.length > 0 && (
+            <div className="flex gap-4 mb-6">
+              <Badge
+                variant="outline"
+                className="border-cyber-accent/30 text-cyber-accent"
+              >
+                <FileText size={14} className="mr-1" />
+                {postBookmarks.length} Posts
+              </Badge>
+              <Badge
+                variant="outline"
+                className="border-cyber-accent/30 text-cyber-accent"
+              >
+                <MessageSquare size={14} className="mr-1" />
+                {commentBookmarks.length} Comments
+              </Badge>
+              <Badge
+                variant="outline"
+                className="border-cyber-accent/30 text-cyber-accent"
+              >
+                <BookmarkIcon size={14} className="mr-1" />
+                {bookmarks.length} Total
+              </Badge>
+            </div>
+          )}
 
-        {/* Tabs */}
-        <Tabs
-          value={activeTab}
-          onValueChange={value =>
-            setActiveTab(value as 'all' | 'posts' | 'comments')
-          }
-          className="w-full"
-        >
-          <TabsList className="grid w-full grid-cols-3 mb-6">
-            <TabsTrigger value="all" className="flex items-center gap-2">
-              <BookmarkIcon size={16} />
-              All ({bookmarks.length})
-            </TabsTrigger>
-            <TabsTrigger value="posts" className="flex items-center gap-2">
-              <FileText size={16} />
-              Posts ({postBookmarks.length})
-            </TabsTrigger>
-            <TabsTrigger value="comments" className="flex items-center gap-2">
-              <MessageSquare size={16} />
-              Comments ({commentBookmarks.length})
-            </TabsTrigger>
-          </TabsList>
+          {/* Tabs */}
+          <Tabs
+            value={activeTab}
+            onValueChange={value =>
+              setActiveTab(value as 'all' | 'posts' | 'comments')
+            }
+            className="w-full"
+          >
+            <TabsList className="grid w-full grid-cols-3 mb-6">
+              <TabsTrigger value="all" className="flex items-center gap-2">
+                <BookmarkIcon size={16} />
+                All ({bookmarks.length})
+              </TabsTrigger>
+              <TabsTrigger value="posts" className="flex items-center gap-2">
+                <FileText size={16} />
+                Posts ({postBookmarks.length})
+              </TabsTrigger>
+              <TabsTrigger value="comments" className="flex items-center gap-2">
+                <MessageSquare size={16} />
+                Comments ({commentBookmarks.length})
+              </TabsTrigger>
+            </TabsList>
 
-          <TabsContent value="all">
-            <BookmarkList
-              bookmarks={getFilteredBookmarks()}
-              onRemove={removeBookmark}
-              onNavigate={handleNavigate}
-              emptyMessage="No bookmarks yet"
-            />
-          </TabsContent>
+            <TabsContent value="all">
+              <BookmarkList
+                bookmarks={getFilteredBookmarks()}
+                onRemove={removeBookmark}
+                onNavigate={handleNavigate}
+                emptyMessage="No bookmarks yet"
+              />
+            </TabsContent>
 
-          <TabsContent value="posts">
-            <BookmarkList
-              bookmarks={getFilteredBookmarks()}
-              onRemove={removeBookmark}
-              onNavigate={handleNavigate}
-              emptyMessage="No bookmarked posts yet"
-            />
-          </TabsContent>
+            <TabsContent value="posts">
+              <BookmarkList
+                bookmarks={getFilteredBookmarks()}
+                onRemove={removeBookmark}
+                onNavigate={handleNavigate}
+                emptyMessage="No bookmarked posts yet"
+              />
+            </TabsContent>
 
-          <TabsContent value="comments">
-            <BookmarkList
-              bookmarks={getFilteredBookmarks()}
-              onRemove={removeBookmark}
-              onNavigate={handleNavigate}
-              emptyMessage="No bookmarked comments yet"
-            />
-          </TabsContent>
-        </Tabs>
+            <TabsContent value="comments">
+              <BookmarkList
+                bookmarks={getFilteredBookmarks()}
+                onRemove={removeBookmark}
+                onNavigate={handleNavigate}
+                emptyMessage="No bookmarked comments yet"
+              />
+            </TabsContent>
+          </Tabs>
         </div>
       </main>
 
diff --git a/src/pages/FeedPage.tsx b/src/pages/FeedPage.tsx
index 3560954..14a3094 100644
--- a/src/pages/FeedPage.tsx
+++ b/src/pages/FeedPage.tsx
@@ -105,49 +105,47 @@ const FeedPage: React.FC = () => {
               <h1 className="page-title text-glow text-cyber-accent">
                 Popular Posts
               </h1>
-              <p className="page-subtitle">
-                Latest posts from all cells
-              </p>
+              <p className="page-subtitle">Latest posts from all cells</p>
             </div>
-          <div className="flex items-center space-x-2">
-            <ModerationToggle />
+            <div className="flex items-center space-x-2">
+              <ModerationToggle />
 
-            <Select
-              value={sortOption}
-              onValueChange={(value: SortOption) => setSortOption(value)}
-            >
-              <SelectTrigger className="w-40">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="relevance">
-                  <div className="flex items-center gap-2">
-                    <TrendingUp className="w-4 h-4" />
-                    <span>Relevance</span>
-                  </div>
-                </SelectItem>
-                <SelectItem value="time">
-                  <div className="flex items-center gap-2">
-                    <Clock className="w-4 h-4" />
-                    <span>Newest</span>
-                  </div>
-                </SelectItem>
-              </SelectContent>
-            </Select>
+              <Select
+                value={sortOption}
+                onValueChange={(value: SortOption) => setSortOption(value)}
+              >
+                <SelectTrigger className="w-40">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="relevance">
+                    <div className="flex items-center gap-2">
+                      <TrendingUp className="w-4 h-4" />
+                      <span>Relevance</span>
+                    </div>
+                  </SelectItem>
+                  <SelectItem value="time">
+                    <div className="flex items-center gap-2">
+                      <Clock className="w-4 h-4" />
+                      <span>Newest</span>
+                    </div>
+                  </SelectItem>
+                </SelectContent>
+              </Select>
 
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={refreshData}
-              disabled={isRefreshing}
-              className="flex items-center space-x-2"
-            >
-              <RefreshCw
-                className={`w-4 h-4 ${isRefreshing ? 'animate-spin' : ''}`}
-              />
-              <span>Refresh</span>
-            </Button>
-          </div>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={refreshData}
+                disabled={isRefreshing}
+                className="flex items-center space-x-2"
+              >
+                <RefreshCw
+                  className={`w-4 h-4 ${isRefreshing ? 'animate-spin' : ''}`}
+                />
+                <span>Refresh</span>
+              </Button>
+            </div>
           </div>
         </div>
 
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index c8b70be..5939f39 100644
--- a/src/pages/ProfilePage.tsx
+++ b/src/pages/ProfilePage.tsx
@@ -58,21 +58,21 @@ export default function ProfilePage() {
 
   const [isEditing, setIsEditing] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [callSign, setCallSign] = useState(currentUser?.callSign || '');
-  const [displayPreference, setDisplayPreference] = useState(
-    currentUser?.displayPreference || EDisplayPreference.WALLET_ADDRESS
-  );
+  const [callSign, setCallSign] = useState('');
+  const [displayPreference, setDisplayPreference] = useState(EDisplayPreference.WALLET_ADDRESS);
   const [walletWizardOpen, setWalletWizardOpen] = useState(false);
 
-  // Update local state when user data changes
+  // Initialize and update local state when user data changes
   useEffect(() => {
     if (currentUser) {
-      setCallSign(currentUser.callSign || '');
-      setDisplayPreference(
-        currentUser.displayPreference || EDisplayPreference.WALLET_ADDRESS
-      );
+      // Use the same data source as the display (userInfo) for consistency
+      const currentCallSign = userInfo.callSign || currentUser.callSign || '';
+      const currentDisplayPreference = userInfo.displayPreference || currentUser.displayPreference || EDisplayPreference.WALLET_ADDRESS;
+      
+      setCallSign(currentCallSign);
+      setDisplayPreference(currentDisplayPreference);
     }
-  }, [currentUser]);
+  }, [currentUser, userInfo.callSign, userInfo.displayPreference]);
 
   // Copy to clipboard function
   const copyToClipboard = async (text: string, label: string) => {
@@ -100,8 +100,12 @@ export default function ProfilePage() {
             <CardContent className="pt-6">
               <div className="text-center text-cyber-neutral">
                 <User className="w-12 h-12 mx-auto mb-4 text-cyber-accent" />
-                <h2 className="text-xl font-mono font-bold mb-2">Connect Required</h2>
-                <p className="text-sm">Please connect your wallet to view your profile.</p>
+                <h2 className="text-xl font-mono font-bold mb-2">
+                  Connect Required
+                </h2>
+                <p className="text-sm">
+                  Please connect your wallet to view your profile.
+                </p>
               </div>
             </CardContent>
           </Card>
@@ -168,8 +172,12 @@ export default function ProfilePage() {
   };
 
   const handleCancel = () => {
-    setCallSign(currentUser.callSign || '');
-    setDisplayPreference(currentUser.displayPreference);
+    // Reset to the same data source as display for consistency
+    const currentCallSign = userInfo.callSign || currentUser.callSign || '';
+    const currentDisplayPreference = userInfo.displayPreference || currentUser.displayPreference || EDisplayPreference.WALLET_ADDRESS;
+    
+    setCallSign(currentCallSign);
+    setDisplayPreference(currentDisplayPreference);
     setIsEditing(false);
   };
 
@@ -220,7 +228,9 @@ export default function ProfilePage() {
           {/* Page Header */}
           <div className="page-header">
             <h1 className="page-title">Profile</h1>
-            <p className="page-subtitle">Manage your account settings and preferences</p>
+            <p className="page-subtitle">
+              Manage your account settings and preferences
+            </p>
           </div>
 
           {/* Two-Card Layout: User Profile + Security Status */}
@@ -283,12 +293,15 @@ export default function ProfilePage() {
                         </Label>
                         <div className="flex items-center gap-2">
                           <div className="flex-1 font-mono text-sm bg-cyber-dark/50 border border-cyber-muted/30 px-3 py-2 rounded-md text-cyber-light">
-                            {currentUser.address.slice(0, 8)}...{currentUser.address.slice(-6)}
+                            {currentUser.address.slice(0, 8)}...
+                            {currentUser.address.slice(-6)}
                           </div>
                           <Button
                             variant="outline"
                             size="sm"
-                            onClick={() => copyToClipboard(currentUser.address, 'Address')}
+                            onClick={() =>
+                              copyToClipboard(currentUser.address, 'Address')
+                            }
                             className="border-cyber-muted/30 text-cyber-neutral hover:bg-cyber-muted/30"
                           >
                             <Copy className="w-4 h-4" />
@@ -301,7 +314,10 @@ export default function ProfilePage() {
                         </Label>
                         <div className="flex items-center gap-2">
                           <Globe className="w-4 h-4 text-cyber-neutral" />
-                          <Badge variant="outline" className="capitalize bg-cyber-accent/20 text-cyber-accent border-cyber-accent/30">
+                          <Badge
+                            variant="outline"
+                            className="capitalize bg-cyber-accent/20 text-cyber-accent border-cyber-accent/30"
+                          >
                             {currentUser.walletType}
                           </Badge>
                         </div>
@@ -316,7 +332,10 @@ export default function ProfilePage() {
                     </h3>
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                       <div className="space-y-2">
-                        <Label htmlFor="callSign" className="text-sm font-medium text-cyber-neutral">
+                        <Label
+                          htmlFor="callSign"
+                          className="text-sm font-medium text-cyber-neutral"
+                        >
                           Call Sign
                         </Label>
                         {isEditing ? (
@@ -330,16 +349,22 @@ export default function ProfilePage() {
                           />
                         ) : (
                           <div className="text-sm bg-cyber-dark/50 border border-cyber-muted/30 px-3 py-2 rounded-md text-cyber-light">
-                            {userInfo.callSign || currentUser.callSign || 'Not set'}
+                            {userInfo.callSign ||
+                              currentUser.callSign ||
+                              'Not set'}
                           </div>
                         )}
                         <p className="text-xs text-cyber-neutral">
-                          3-20 characters, letters, numbers, underscores, and hyphens only
+                          3-20 characters, letters, numbers, underscores, and
+                          hyphens only
                         </p>
                       </div>
 
                       <div className="space-y-2">
-                        <Label htmlFor="displayPreference" className="text-sm font-medium text-cyber-neutral">
+                        <Label
+                          htmlFor="displayPreference"
+                          className="text-sm font-medium text-cyber-neutral"
+                        >
                           Display Preference
                         </Label>
                         {isEditing ? (
@@ -354,17 +379,24 @@ export default function ProfilePage() {
                               <SelectValue />
                             </SelectTrigger>
                             <SelectContent className="bg-cyber-dark border-cyber-muted/30">
-                              <SelectItem value={EDisplayPreference.CALL_SIGN} className="text-cyber-light hover:bg-cyber-muted/30">
+                              <SelectItem
+                                value={EDisplayPreference.CALL_SIGN}
+                                className="text-cyber-light hover:bg-cyber-muted/30"
+                              >
                                 Call Sign (when available)
                               </SelectItem>
-                              <SelectItem value={EDisplayPreference.WALLET_ADDRESS} className="text-cyber-light hover:bg-cyber-muted/30">
+                              <SelectItem
+                                value={EDisplayPreference.WALLET_ADDRESS}
+                                className="text-cyber-light hover:bg-cyber-muted/30"
+                              >
                                 Wallet Address
                               </SelectItem>
                             </SelectContent>
                           </Select>
                         ) : (
                           <div className="text-sm bg-cyber-dark/50 border border-cyber-muted/30 px-3 py-2 rounded-md text-cyber-light">
-                            {(userInfo.displayPreference || displayPreference) ===
+                            {(userInfo.displayPreference ||
+                              displayPreference) ===
                             EDisplayPreference.CALL_SIGN
                               ? 'Call Sign (when available)'
                               : 'Wallet Address'}
@@ -386,8 +418,8 @@ export default function ProfilePage() {
                         <X className="w-4 h-4 mr-2" />
                         Cancel
                       </Button>
-                      <Button 
-                        onClick={handleSave} 
+                      <Button
+                        onClick={handleSave}
                         disabled={isSubmitting}
                         className="bg-cyber-accent hover:bg-cyber-accent/80 text-black font-mono"
                       >
@@ -413,7 +445,8 @@ export default function ProfilePage() {
                       <Shield className="h-5 w-5 text-cyber-accent" />
                       Security
                     </div>
-                    {(delegationStatus.hasDelegation || delegationInfo?.hasDelegation) && (
+                    {(delegationStatus.hasDelegation ||
+                      delegationInfo?.hasDelegation) && (
                       <Button
                         variant="outline"
                         size="sm"
@@ -421,7 +454,9 @@ export default function ProfilePage() {
                         className="border-cyber-muted/30 text-cyber-neutral hover:bg-cyber-muted/30"
                       >
                         <Settings className="w-4 h-4 mr-2" />
-                        {(delegationStatus.isValid || delegationInfo?.isValid) ? 'Renew' : 'Setup'}
+                        {delegationStatus.isValid || delegationInfo?.isValid
+                          ? 'Renew'
+                          : 'Setup'}
                       </Button>
                     )}
                   </CardTitle>
@@ -430,41 +465,61 @@ export default function ProfilePage() {
                   {/* Delegation Status */}
                   <div className="space-y-3">
                     <div className="flex items-center justify-between">
-                      <span className="text-sm font-medium text-cyber-neutral">Delegation</span>
+                      <span className="text-sm font-medium text-cyber-neutral">
+                        Delegation
+                      </span>
                       <Badge
-                        variant={(delegationStatus.isValid || delegationInfo?.isValid) ? 'default' : 'secondary'}
+                        variant={
+                          delegationStatus.isValid || delegationInfo?.isValid
+                            ? 'default'
+                            : 'secondary'
+                        }
                         className={
-                          (delegationStatus.isValid || delegationInfo?.isValid)
+                          delegationStatus.isValid || delegationInfo?.isValid
                             ? 'bg-green-500/20 text-green-400 border-green-500/30'
                             : 'bg-red-500/20 text-red-400 border-red-500/30'
                         }
                       >
-                        {(delegationStatus.isValid || delegationInfo?.isValid) ? 'Active' : 'Inactive'}
+                        {delegationStatus.isValid || delegationInfo?.isValid
+                          ? 'Active'
+                          : 'Inactive'}
                       </Badge>
                     </div>
 
                     {/* Expiry Date */}
-                    {(delegationStatus.expiresAt || currentUser.delegationExpiry) && (
+                    {(delegationStatus.expiresAt ||
+                      currentUser.delegationExpiry) && (
                       <div className="space-y-1">
-                        <span className="text-xs text-cyber-neutral">Valid until</span>
+                        <span className="text-xs text-cyber-neutral">
+                          Valid until
+                        </span>
                         <div className="text-sm font-mono text-cyber-light">
-                          {(delegationStatus.expiresAt || new Date(currentUser.delegationExpiry!)).toLocaleDateString()}
+                          {(
+                            delegationStatus.expiresAt ||
+                            new Date(currentUser.delegationExpiry!)
+                          ).toLocaleDateString()}
                         </div>
                       </div>
                     )}
 
                     {/* Signature Status */}
                     <div className="flex items-center justify-between">
-                      <span className="text-sm font-medium text-cyber-neutral">Signature</span>
+                      <span className="text-sm font-medium text-cyber-neutral">
+                        Signature
+                      </span>
                       <Badge
                         variant="outline"
                         className={
-                          (delegationStatus.isValid || currentUser.delegationSignature === 'valid')
+                          delegationStatus.isValid ||
+                          currentUser.delegationSignature === 'valid'
                             ? 'text-green-400 border-green-500/30 bg-green-500/10'
                             : 'text-red-400 border-red-500/30 bg-red-500/10'
                         }
                       >
-                        {(delegationStatus.isValid || currentUser.delegationSignature === 'valid') ? 'Valid' : 'Not signed'}
+                        {delegationStatus.isValid ||
+                        currentUser.delegationSignature === 'valid'
+                          ? 'Valid'
+                          : 'Not signed'}
                       </Badge>
                     </div>
                   </div>
@@ -476,15 +531,22 @@ export default function ProfilePage() {
                     </Label>
                     <div className="flex items-center gap-2">
                       <div className="flex-1 font-mono text-xs bg-cyber-dark/50 border border-cyber-muted/30 px-2 py-1 rounded text-cyber-light">
-                        {(delegationStatus.publicKey || currentUser.browserPubKey)
+                        {delegationStatus.publicKey || currentUser.browserPubKey
                           ? `${(delegationStatus.publicKey || currentUser.browserPubKey!).slice(0, 12)}...${(delegationStatus.publicKey || currentUser.browserPubKey!).slice(-8)}`
                           : 'Not delegated'}
                       </div>
-                      {(delegationStatus.publicKey || currentUser.browserPubKey) && (
+                      {(delegationStatus.publicKey ||
+                        currentUser.browserPubKey) && (
                         <Button
                           variant="outline"
                           size="sm"
-                          onClick={() => copyToClipboard(delegationStatus.publicKey || currentUser.browserPubKey!, 'Public Key')}
+                          onClick={() =>
+                            copyToClipboard(
+                              delegationStatus.publicKey ||
+                                currentUser.browserPubKey!,
+                              'Public Key'
+                            )
+                          }
                           className="border-cyber-muted/30 text-cyber-neutral hover:bg-cyber-muted/30"
                         >
                           <Copy className="w-3 h-3" />
@@ -494,21 +556,24 @@ export default function ProfilePage() {
                   </div>
 
                   {/* Warning for expired delegation */}
-                  {(!delegationStatus.isValid && delegationStatus.hasDelegation) || (!delegationInfo?.isValid && delegationInfo?.hasDelegation) && (
-                    <div className="p-3 bg-orange-500/10 border border-orange-500/30 rounded-md">
-                      <div className="flex items-center gap-2 text-orange-400">
-                        <AlertTriangle className="w-4 h-4" />
-                        <span className="text-xs font-medium">
-                          Delegation expired. Renew to continue using your browser key.
-                        </span>
-                      </div>
-                    </div>
-                  )}
+                  {(!delegationStatus.isValid &&
+                    delegationStatus.hasDelegation) ||
+                    (!delegationInfo?.isValid &&
+                      delegationInfo?.hasDelegation && (
+                        <div className="p-3 bg-orange-500/10 border border-orange-500/30 rounded-md">
+                          <div className="flex items-center gap-2 text-orange-400">
+                            <AlertTriangle className="w-4 h-4" />
+                            <span className="text-xs font-medium">
+                              Delegation expired. Renew to continue using your
+                              browser key.
+                            </span>
+                          </div>
+                        </div>
+                      ))}
                 </CardContent>
               </Card>
             </div>
           </div>
-
         </div>
       </main>