diff --git a/src/App.svelte b/src/App.svelte
index 0ad603f..7f6a09d 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,5 +1,6 @@
 <script>
   import { onMount } from 'svelte';
+  import { fade, fly } from 'svelte/transition';
   import { multiChainStore } from './stores/multichain';
   import { themeStore } from './stores/theme';
   import { currentRoute, navigate } from './utils/router';
@@ -56,15 +57,19 @@
   <Header on:viewChange={handleViewChange} />
   
   <div class="container">
-    {#if currentView === 'explorer'}
-      <Explorer on:viewAddress={handleViewChange} />
-    {:else if currentView === 'claim'}
-      <AddressClaim on:viewChange={handleViewChange} />
-    {:else if currentView === 'address' && selectedAddress}
-      <AddressView address={selectedAddress} ensName={selectedENSName} on:viewChange={handleViewChange} />
-    {:else if currentView === 'admin'}
-      <AdminPanel on:viewChange={handleViewChange} />
-    {/if}
+    {#key currentView}
+      <div in:fly="{{ y: 20, duration: 300, delay: 150 }}" out:fade="{{ duration: 150 }}">
+        {#if currentView === 'explorer'}
+          <Explorer on:viewAddress={handleViewChange} />
+        {:else if currentView === 'claim'}
+          <AddressClaim on:viewChange={handleViewChange} />
+        {:else if currentView === 'address' && selectedAddress}
+          <AddressView address={selectedAddress} ensName={selectedENSName} on:viewChange={handleViewChange} />
+        {:else if currentView === 'admin'}
+          <AdminPanel on:viewChange={handleViewChange} />
+        {/if}
+      </div>
+    {/key}
   </div>
   
   <Toast />
diff --git a/src/components/AddressClaim.svelte b/src/components/AddressClaim.svelte
index 935aaf1..345dec1 100644
--- a/src/components/AddressClaim.svelte
+++ b/src/components/AddressClaim.svelte
@@ -12,6 +12,7 @@
     decodeHandle,
     suggestHandleIndices,
   } from "../utils/wordhandles";
+  import EmojiPicker from './EmojiPicker.svelte';
 
   const dispatch = createEventDispatcher();
 
@@ -409,8 +410,18 @@
       return;
     }
 
-    if (!formData.name) {
-      error = "Name is required";
+    if (!formData.name || formData.name.trim().length === 0) {
+      error = "Name is required and cannot be empty";
+      return;
+    }
+
+    if (formData.name.trim().length < 2) {
+      error = "Name must be at least 2 characters long";
+      return;
+    }
+
+    if (formData.website && !formData.website.match(/^https?:\/\/.+/)) {
+      error = "Website must be a valid URL starting with http:// or https://";
       return;
     }
 
@@ -552,17 +563,35 @@
           bind:value={formData.name}
           placeholder="Your Name or ENS"
           required
+          minlength="2"
+          class:has-value={formData.name && formData.name.length > 0}
         />
+        {#if formData.name && formData.name.trim().length > 0 && formData.name.trim().length < 2}
+          <small class="form-hint error">Name must be at least 2 characters</small>
+        {:else if formData.name && formData.name.trim().length >= 2}
+          <small class="form-hint success">✓ Valid name</small>
+        {/if}
       </div>
 
       <div class="form-group">
         <label for="avatar">Avatar (Emoji or URL)</label>
-        <input
-          id="avatar"
-          type="text"
-          bind:value={formData.avatar}
-          placeholder="😊 or https://..."
-        />
+        <div class="avatar-input-group">
+          <div class="emoji-picker-container">
+            <EmojiPicker
+              selectedEmoji={formData.avatar && !formData.avatar.startsWith('http') ? formData.avatar : ''}
+              on:select={(e) => formData.avatar = e.detail.emoji}
+            />
+          </div>
+          <div class="avatar-text-input">
+            <input
+              id="avatar"
+              type="text"
+              bind:value={formData.avatar}
+              placeholder="😊 or https://image-url.com"
+            />
+          </div>
+        </div>
+        <small class="form-hint">Choose an emoji or paste an image URL</small>
       </div>
 
       <div class="form-group">
@@ -582,7 +611,13 @@
           type="url"
           bind:value={formData.website}
           placeholder="https://yourwebsite.com"
+          class:has-value={formData.website && formData.website.length > 0}
         />
+        {#if formData.website && formData.website.length > 0 && !formData.website.match(/^https?:\/\/.+/)}
+          <small class="form-hint error">URL must start with http:// or https://</small>
+        {:else if formData.website && formData.website.match(/^https?:\/\/.+/)}
+          <small class="form-hint success">✓ Valid URL</small>
+        {/if}
       </div>
 
       <div class="form-row">
@@ -999,6 +1034,25 @@
     gap: 1rem;
   }
 
+  .avatar-input-group {
+    display: grid;
+    grid-template-columns: 120px 1fr;
+    gap: 1rem;
+    align-items: start;
+  }
+
+  .emoji-picker-container {
+    width: 100%;
+  }
+
+  .avatar-text-input {
+    flex: 1;
+  }
+
+  .avatar-text-input input {
+    width: 100%;
+  }
+
   label {
     display: block;
     margin-bottom: 0.5rem;
@@ -1052,12 +1106,41 @@
     margin-top: 0.25rem;
     font-size: 0.875rem;
     color: #64748b;
+    transition: all 0.2s ease;
   }
 
   .claim-container.dark .form-hint {
     color: #94a3b8;
   }
 
+  .form-hint.error {
+    color: #dc2626;
+    font-weight: 500;
+  }
+
+  .claim-container.dark .form-hint.error {
+    color: #fca5a5;
+  }
+
+  .form-hint.success {
+    color: #059669;
+    font-weight: 500;
+  }
+
+  .claim-container.dark .form-hint.success {
+    color: #6ee7b7;
+  }
+
+  input.has-value,
+  textarea.has-value {
+    border-color: #94a3b8;
+  }
+
+  .claim-container.dark input.has-value,
+  .claim-container.dark textarea.has-value {
+    border-color: #64748b;
+  }
+
   .checkbox-group label {
     display: flex;
     align-items: center;
@@ -1118,8 +1201,16 @@
   }
 
   .btn-claim:disabled {
-    opacity: 0.6;
+    opacity: 0.5;
     cursor: not-allowed;
+    background: #94a3b8;
+    transform: none;
+    box-shadow: none;
+  }
+
+  .claim-container.dark .btn-claim:disabled {
+    background: #475569;
+    color: #94a3b8;
   }
 
   .handle-section {
@@ -1295,8 +1386,16 @@
   }
 
   .btn-secondary:disabled {
-    opacity: 0.6;
+    opacity: 0.5;
     cursor: not-allowed;
+    background: #f1f5f9;
+    color: #94a3b8;
+    transform: none;
+  }
+
+  .claim-container.dark .btn-secondary:disabled {
+    background: #1e293b;
+    color: #64748b;
   }
 
   .btn-handle-claim {
@@ -1318,8 +1417,16 @@
   }
 
   .btn-handle-claim:disabled {
-    opacity: 0.6;
+    opacity: 0.5;
     cursor: not-allowed;
+    background: #94a3b8;
+    transform: none;
+    box-shadow: none;
+  }
+
+  .claim-container.dark .btn-handle-claim:disabled {
+    background: #475569;
+    color: #94a3b8;
   }
 
   .btn-release {
@@ -1341,8 +1448,17 @@
   }
 
   .btn-release:disabled {
-    opacity: 0.6;
+    opacity: 0.5;
     cursor: not-allowed;
+    background: #f1f5f9;
+    color: #94a3b8;
+    border-color: #e2e8f0;
+  }
+
+  .claim-container.dark .btn-release:disabled {
+    background: #1e293b;
+    color: #64748b;
+    border-color: #334155;
   }
 
   .info-box {
@@ -1407,5 +1523,27 @@
     .claim-form {
       padding: 1.5rem;
     }
+
+    .avatar-input-group {
+      grid-template-columns: 1fr;
+    }
+
+    .handle-header {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .handle-caption {
+      justify-content: flex-start;
+    }
+
+    .handle-actions {
+      flex-direction: column;
+    }
+
+    .btn-secondary,
+    .btn-handle-claim {
+      width: 100%;
+    }
   }
 </style>
diff --git a/src/components/EmojiPicker.svelte b/src/components/EmojiPicker.svelte
new file mode 100644
index 0000000..ec14ec8
--- /dev/null
+++ b/src/components/EmojiPicker.svelte
@@ -0,0 +1,230 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+  import { themeStore } from '../stores/theme';
+
+  export let selectedEmoji = '';
+
+  const dispatch = createEventDispatcher();
+  let darkMode = false;
+  let showPicker = false;
+
+  themeStore.subscribe(value => {
+    darkMode = value.darkMode;
+  });
+
+  const emojiCategories = {
+    'People': ['😀', '😃', '😄', '😁', '😊', '🙂', '😎', '🤓', '🧐', '🤩', '😇', '🥳', '🤠', '👨', '👩', '🧑', '👦', '👧', '👶', '🧒', '👴', '👵', '🧓', '👨‍💻', '👩‍💻', '🧑‍💻'],
+    'Animals': ['🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯', '🦁', '🐮', '🐷', '🐸', '🐵', '🐔', '🐧', '🐦', '🐤', '🦄', '🐝', '🦋', '🐙', '🦑', '🦞'],
+    'Food': ['🍕', '🍔', '🍟', '🌭', '🍿', '🧂', '🥓', '🥚', '🍳', '🧇', '🥞', '🧈', '🍞', '🥐', '🥖', '🫓', '🥨', '🥯', '🥖', '🍰', '🎂', '🧁', '🍪', '🍩', '🍨'],
+    'Objects': ['💎', '💰', '🔑', '🔒', '🔓', '🎁', '🎈', '🎉', '🎊', '🎯', '🎪', '🎨', '🎬', '🎮', '🎲', '🎯', '📱', '💻', '⌨️', '🖥️', '🖨️', '📷', '📹', '🎥'],
+    'Symbols': ['❤️', '💙', '💚', '💛', '🧡', '💜', '🖤', '🤍', '🤎', '💯', '⭐', '🌟', '✨', '💫', '🔥', '⚡', '💧', '🌈', '☀️', '🌙', '⚙️', '🔧', '🔨', '⚔️', '🛡️']
+  };
+
+  function selectEmoji(emoji) {
+    dispatch('select', { emoji });
+    showPicker = false;
+  }
+
+  function togglePicker() {
+    showPicker = !showPicker;
+  }
+</script>
+
+<div class="emoji-picker-wrapper" class:dark={darkMode}>
+  <div class="emoji-preview" on:click={togglePicker}>
+    {#if selectedEmoji}
+      <span class="selected-emoji">{selectedEmoji}</span>
+    {:else}
+      <span class="placeholder">Choose</span>
+    {/if}
+  </div>
+
+  {#if showPicker}
+    <div class="emoji-picker-panel">
+      {#each Object.entries(emojiCategories) as [category, emojis]}
+        <div class="emoji-category">
+          <div class="category-name">{category}</div>
+          <div class="emoji-grid">
+            {#each emojis as emoji}
+              <button
+                type="button"
+                class="emoji-button"
+                class:selected={emoji === selectedEmoji}
+                on:click={() => selectEmoji(emoji)}
+              >
+                {emoji}
+              </button>
+            {/each}
+          </div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .emoji-picker-wrapper {
+    position: relative;
+    width: 100%;
+  }
+
+  .emoji-preview {
+    background: #f1f5f9;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    padding: 0.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    min-height: 50px;
+  }
+
+  .emoji-picker-wrapper.dark .emoji-preview {
+    background: #1e293b;
+    border-color: #334155;
+  }
+
+  .emoji-preview:hover {
+    border-color: #94a3b8;
+    transform: scale(1.02);
+  }
+
+  .selected-emoji {
+    font-size: 2rem;
+  }
+
+  .placeholder {
+    color: #94a3b8;
+    font-size: 0.9rem;
+  }
+
+  .emoji-picker-wrapper.dark .placeholder {
+    color: #64748b;
+  }
+
+  .emoji-picker-panel {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    margin-top: 0.5rem;
+    background: #ffffff;
+    border: 1px solid #e2e8f0;
+    border-radius: 12px;
+    padding: 1rem;
+    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
+    z-index: 100;
+    max-height: 400px;
+    overflow-y: auto;
+    animation: slideDown 0.2s ease-out;
+  }
+
+  .emoji-picker-wrapper.dark .emoji-picker-panel {
+    background: #1e293b;
+    border-color: #334155;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+  }
+
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .emoji-category {
+    margin-bottom: 1.5rem;
+  }
+
+  .emoji-category:last-child {
+    margin-bottom: 0;
+  }
+
+  .category-name {
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #64748b;
+    margin-bottom: 0.75rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid #e2e8f0;
+  }
+
+  .emoji-picker-wrapper.dark .category-name {
+    color: #94a3b8;
+    border-bottom-color: #334155;
+  }
+
+  .emoji-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
+    gap: 0.375rem;
+  }
+
+  .emoji-button {
+    background: transparent;
+    border: 2px solid transparent;
+    border-radius: 8px;
+    padding: 0.5rem;
+    font-size: 1.5rem;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: 1;
+  }
+
+  .emoji-button:hover {
+    background: #f1f5f9;
+    transform: scale(1.15);
+  }
+
+  .emoji-picker-wrapper.dark .emoji-button:hover {
+    background: #334155;
+  }
+
+  .emoji-button.selected {
+    background: var(--accent-primary-light, #dbeafe);
+    border-color: var(--accent-primary, #3b82f6);
+    transform: scale(1.1);
+  }
+
+  .emoji-picker-wrapper.dark .emoji-button.selected {
+    background: rgba(59, 130, 246, 0.2);
+  }
+
+  /* Scrollbar styling */
+  .emoji-picker-panel::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .emoji-picker-panel::-webkit-scrollbar-track {
+    background: #f1f5f9;
+    border-radius: 4px;
+  }
+
+  .emoji-picker-wrapper.dark .emoji-picker-panel::-webkit-scrollbar-track {
+    background: #0f172a;
+  }
+
+  .emoji-picker-panel::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 4px;
+  }
+
+  .emoji-picker-wrapper.dark .emoji-picker-panel::-webkit-scrollbar-thumb {
+    background: #475569;
+  }
+
+  .emoji-picker-panel::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
+  }
+</style>
diff --git a/src/components/Explorer.svelte b/src/components/Explorer.svelte
index 35f1762..7e63c34 100644
--- a/src/components/Explorer.svelte
+++ b/src/components/Explorer.svelte
@@ -6,6 +6,7 @@
   import { themeStore } from "../stores/theme";
   import { resolveAddressOrENS, isENSName } from "../utils/ens";
   import { parseClaimData } from "../utils/claimParser";
+  import { navigate } from "../utils/router";
   import {
     loadWordlist,
     decodeHandle,
@@ -1333,7 +1334,22 @@
 
   <div class="recent-claims">
     <h3>Recent Claims</h3>
-    {#if recentClaims.length > 0}
+    {#if loadingStats && recentClaims.length === 0}
+      <div class="claims-grid">
+        {#each Array(3) as _, i}
+          <div class="claim-card skeleton">
+            <div class="skeleton-chip"></div>
+            <div class="skeleton-avatar"></div>
+            <div class="claim-info">
+              <div class="skeleton-line" style="width: 60%; height: 20px; margin-bottom: 0.375rem;"></div>
+              <div class="skeleton-line" style="width: 80%; height: 14px; margin-bottom: 0.375rem;"></div>
+              <div class="skeleton-line" style="width: 40%; height: 14px;"></div>
+            </div>
+            <div class="skeleton-badge"></div>
+          </div>
+        {/each}
+      </div>
+    {:else if recentClaims.length > 0}
       <div class="claims-grid">
         {#each recentClaims as claim}
           <div class="claim-card" on:click={() => viewAddress(claim.address)}>
@@ -1359,7 +1375,16 @@
     {:else}
       <div class="empty-state">
         <Icon name="inbox" size="3rem" />
-        <p>No claims found yet. Be the first to claim your address!</p>
+        <h4>No Claims Yet</h4>
+        <p>Be the first to claim your address and join the decentralized identity network!</p>
+        {#if connected && !hasExistingClaim}
+          <button class="btn-empty-state" on:click={() => navigate('/claim')}>
+            <Icon name="id-card" size="1.125rem" />
+            Claim Your Address
+          </button>
+        {:else if !connected}
+          <p class="empty-hint">Connect your wallet to get started</p>
+        {/if}
       </div>
     {/if}
   </div>
@@ -1660,9 +1685,54 @@
     color: #64748b;
   }
 
+  .empty-state h4 {
+    margin: 1rem 0 0.5rem;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #0f172a;
+  }
+
+  .explorer.dark .empty-state h4 {
+    color: #f1f5f9;
+  }
+
   .empty-state p {
-    margin-top: 1rem;
+    margin-top: 0.5rem;
     font-size: 1rem;
+    color: #64748b;
+  }
+
+  .explorer.dark .empty-state p {
+    color: #94a3b8;
+  }
+
+  .empty-hint {
+    font-size: 0.875rem !important;
+    color: #94a3b8 !important;
+    margin-top: 1rem !important;
+  }
+
+  .btn-empty-state {
+    margin-top: 1.5rem;
+    background: var(--accent-primary);
+    color: #ffffff;
+    border: none;
+    padding: 0.875rem 1.75rem;
+    border-radius: 10px;
+    font-weight: 600;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.625rem;
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+  }
+
+  .btn-empty-state:hover {
+    background: var(--accent-primary-hover);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
   }
 
   .claims-grid {
@@ -1938,8 +2008,14 @@
   }
 
   @media (max-width: 768px) {
+    .hero {
+      padding: 2rem 0;
+    }
+
     .hero h2 {
-      font-size: 2rem;
+      font-size: 1.75rem;
+      flex-direction: column;
+      gap: 0.5rem;
     }
 
     .hero p {
@@ -1948,11 +2024,49 @@
 
     .search-bar {
       flex-direction: column;
+      padding: 0.5rem;
+    }
+
+    .search-bar input {
+      padding: 0.875rem;
+    }
+
+    .btn-search {
+      width: 100%;
+      justify-content: center;
+      padding: 0.875rem;
+    }
+
+    .stats {
+      grid-template-columns: 1fr;
+      gap: 1rem;
+    }
+
+    .stat-card {
+      padding: 1.5rem;
     }
 
     .claims-grid {
       grid-template-columns: 1fr;
     }
+
+    .claim-card {
+      flex-direction: column;
+      text-align: center;
+      align-items: center;
+    }
+
+    .claim-info {
+      text-align: center;
+    }
+
+    .chain-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .info-section {
+      grid-template-columns: 1fr;
+    }
   }
   .chain-stats {
     margin: 2rem 0;
@@ -2090,4 +2204,69 @@
     color: #94a3b8;
   }
 
+  /* Skeleton Loading States */
+  .claim-card.skeleton {
+    pointer-events: none;
+    cursor: default;
+  }
+
+  .skeleton-chip,
+  .skeleton-avatar,
+  .skeleton-badge,
+  .skeleton-line {
+    background: linear-gradient(
+      90deg,
+      #e2e8f0 0%,
+      #f1f5f9 50%,
+      #e2e8f0 100%
+    );
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+    border-radius: 8px;
+  }
+
+  .explorer.dark .skeleton-chip,
+  .explorer.dark .skeleton-avatar,
+  .explorer.dark .skeleton-badge,
+  .explorer.dark .skeleton-line {
+    background: linear-gradient(
+      90deg,
+      #1e293b 0%,
+      #334155 50%,
+      #1e293b 100%
+    );
+    background-size: 200% 100%;
+  }
+
+  .skeleton-chip {
+    width: 120px;
+    height: 24px;
+    margin-bottom: 0.5rem;
+  }
+
+  .skeleton-avatar {
+    width: 64px;
+    height: 64px;
+    border-radius: 12px;
+  }
+
+  .skeleton-badge {
+    width: 80px;
+    height: 32px;
+    border-radius: 8px;
+  }
+
+  .skeleton-line {
+    border-radius: 4px;
+  }
+
+  @keyframes shimmer {
+    0% {
+      background-position: -200% 0;
+    }
+    100% {
+      background-position: 200% 0;
+    }
+  }
+
 </style>
diff --git a/src/utils/blockchainExplorer.js b/src/utils/blockchainExplorer.js
index e7457f8..a171170 100644
--- a/src/utils/blockchainExplorer.js
+++ b/src/utils/blockchainExplorer.js
@@ -288,7 +288,7 @@ export async function getTransactions(provider, address, chainId, options = {})
     const allTransactions = [];
     
     // Create batch promises array
-    const batchPromises = [];
+    let batchPromises = [];
     
     for (let block = currentBlock; block >= startBlock; block -= batchSize) {
       const fromBlock = Math.max(startBlock, block - batchSize + 1);