diff --git a/src/app/watchlist/page.tsx b/src/app/watchlist/page.tsx
index 5c622fea..ecfae4d0 100644
--- a/src/app/watchlist/page.tsx
+++ b/src/app/watchlist/page.tsx
@@ -6,6 +6,7 @@ import { PropertyCard } from '@/components/PropertyCard';
 import { useFavoritesStore } from '@/store/favoritesStore';
 import { WalletConnector } from '@/components/WalletConnector';
 import { Heart, ArrowLeft } from 'lucide-react';
+import { EmptyState } from '@/components/ui/EmptyState';
 
 function WatchlistContent() {
   const { favorites, clearFavorites } = useFavoritesStore();
@@ -60,22 +61,15 @@ function WatchlistContent() {
 
         {/* Content */}
         {favorites.length === 0 ? (
-          /* Empty State */
-          <div className="text-center py-16">
-            <Heart className="w-16 h-16 text-gray-300 mx-auto mb-4" />
-            <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-2">
-              Your watchlist is empty
-            </h2>
-            <p className="text-gray-600 dark:text-gray-400 mb-6 max-w-md mx-auto">
-              Start exploring properties and add them to your watchlist to keep track of the ones you're interested in.
-            </p>
-            <Link
-              href="/properties"
-              className="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-medium px-6 py-3 rounded-lg transition-colors"
-            >
-              Browse Properties
-            </Link>
-          </div>
+          <EmptyState
+            title="Your watchlist is empty"
+            description="Start exploring properties and add them to your watchlist to keep track of the ones you're interested in."
+            icon={Heart}
+            action={{
+              label: "Browse Properties",
+              href: "/properties"
+            }}
+          />
         ) : (
           /* Properties Grid */
           <>
diff --git a/src/components/ClientProviders.tsx b/src/components/ClientProviders.tsx
index 811b5928..49a18b0d 100644
--- a/src/components/ClientProviders.tsx
+++ b/src/components/ClientProviders.tsx
@@ -11,6 +11,10 @@ import { LoadingProgressBar } from "@/components/LoadingProgressBar";
 import "@/lib/i18n";
 import dynamic from "next/dynamic";
 
+import { useOnboardingStore } from "@/store/onboardingStore";
+import { DomainWarningBanner } from "@/components/DomainWarningBanner";
+import { useEffect } from "react";
+
 interface ClientProvidersProps {
   children: React.ReactNode;
 }
@@ -35,31 +39,41 @@ const MobileBottomNavigation = dynamic(
   () => import("@/components/MobileBottomNavigation").then((m) => m.MobileBottomNavigation),
   { ssr: false }
 );
+const OnboardingTour = dynamic(
+  () => import("@/components/OnboardingTour").then((m) => m.OnboardingTour),
+  { ssr: false }
+);
 
 export function ClientProviders({ children }: ClientProvidersProps) {
+  const { startOnboarding, hasCompletedOnboarding } = useOnboardingStore();
+
+  useEffect(() => {
+    // Automatically start onboarding for new users after a short delay
+    const timer = setTimeout(() => {
+      if (!hasCompletedOnboarding) {
+        startOnboarding();
+      }
+    }, 2000);
+
+    return () => clearTimeout(timer);
+  }, [hasCompletedOnboarding, startOnboarding]);
+
   return (
     <WagmiProvider config={config}>
-      <ChainAwareProvider>
-        <LoadingProgressBar />
-        <PerformanceMonitor />
-        {children}
-        <TransactionMonitor />
-        <NotificationSystem />
-        <Toaster />
-        <FloatingComparisonBar />
-        <MobileBottomNavigation />
-      </ChainAwareProvider>
       <QueryProvider>
         <ChainAwareProvider>
           <LoadingProgressBar />
           <PerformanceMonitor />
           <ServiceWorkerRegistration />
           <OfflineIndicator />
+          <DomainWarningBanner />
           {children}
           <TransactionMonitor />
           <NotificationSystem />
           <Toaster />
+          <FloatingComparisonBar />
           <MobileBottomNavigation />
+          <OnboardingTour />
         </ChainAwareProvider>
       </QueryProvider>
     </WagmiProvider>
diff --git a/src/components/DomainWarningBanner.tsx b/src/components/DomainWarningBanner.tsx
new file mode 100644
index 00000000..c88a669c
--- /dev/null
+++ b/src/components/DomainWarningBanner.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import React, { useEffect, useState } from 'react';
+import { AlertTriangle, ShieldAlert, X } from 'lucide-react';
+import { PhishingProtection } from '@/utils/security/phishingProtection';
+import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+export const DomainWarningBanner = () => {
+  const [warning, setWarning] = useState<{
+    show: boolean;
+    type: 'phishing' | 'unofficial';
+    message: string;
+    riskScore: number;
+  }>({
+    show: false,
+    type: 'unofficial',
+    message: '',
+    riskScore: 0,
+  });
+
+  const [isDismissed, setIsDismissed] = useState(false);
+
+  useEffect(() => {
+    const checkDomain = async () => {
+      if (typeof window === 'undefined') return;
+
+      const url = window.location.href;
+      const domain = window.location.hostname;
+      const result = PhishingProtection.detectPhishing(url);
+
+      if (result.isPhishing) {
+        setWarning({
+          show: true,
+          type: 'phishing',
+          message: 'This domain is flagged as a known phishing site. Your funds may be at risk.',
+          riskScore: result.riskScore,
+        });
+        // Auto-report phishing domains
+        PhishingProtection.reportSuspiciousDomain(domain, 'Known phishing domain');
+      } else if (result.warnings.includes('Unofficial domain detected')) {
+        setWarning({
+          show: true,
+          type: 'unofficial',
+          message: 'You are accessing PropChain from an unofficial domain. Please ensure you are on propchain.io.',
+          riskScore: result.riskScore,
+        });
+        // Report unofficial domains for investigation
+        PhishingProtection.reportSuspiciousDomain(domain, 'Unofficial domain');
+      }
+    };
+
+    checkDomain();
+  }, []);
+
+  if (!warning.show || isDismissed) return null;
+
+  const isPhishing = warning.type === 'phishing';
+
+  return (
+    <div className={cn(
+      "fixed top-0 left-0 right-0 z-[100] p-4 animate-in fade-in slide-in-from-top-4 duration-500",
+      isPhishing ? "bg-red-600/10 backdrop-blur-md" : "bg-yellow-600/10 backdrop-blur-md"
+    )}>
+      <div className="max-w-5xl mx-auto">
+        <Alert variant={isPhishing ? "destructive" : "default"} className={cn(
+          "border-2 shadow-2xl",
+          isPhishing ? "border-red-500 bg-red-50 dark:bg-red-950/50" : "border-yellow-500 bg-yellow-50 dark:bg-yellow-950/50"
+        )}>
+          {isPhishing ? (
+            <ShieldAlert className="h-5 w-5 text-red-600 dark:text-red-400" />
+          ) : (
+            <AlertTriangle className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />
+          )}
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pr-8">
+            <div>
+              <AlertTitle className={cn(
+                "text-lg font-bold",
+                isPhishing ? "text-red-800 dark:text-red-200" : "text-yellow-800 dark:text-yellow-200"
+              )}>
+                {isPhishing ? "Security Alert: Phishing Detected" : "Security Warning: Unofficial Domain"}
+              </AlertTitle>
+              <AlertDescription className={cn(
+                "mt-1 font-medium",
+                isPhishing ? "text-red-700 dark:text-red-300" : "text-yellow-700 dark:text-yellow-300"
+              )}>
+                {warning.message}
+              </AlertDescription>
+            </div>
+            <div className="flex items-center gap-3">
+              <Button 
+                variant="outline" 
+                size="sm"
+                onClick={() => window.location.href = 'https://propchain.io'}
+                className={cn(
+                  "font-bold transition-all hover:scale-105",
+                  isPhishing 
+                    ? "border-red-600 text-red-600 hover:bg-red-600 hover:text-white" 
+                    : "border-yellow-600 text-yellow-600 hover:bg-yellow-600 hover:text-white"
+                )}
+              >
+                Go to Official Site
+              </Button>
+              {!isPhishing && (
+                <Button 
+                  variant="ghost" 
+                  size="sm"
+                  onClick={() => setIsDismissed(true)}
+                  className="text-yellow-800 dark:text-yellow-200 hover:bg-yellow-200/50 dark:hover:bg-yellow-800/50"
+                >
+                  Ignore
+                </Button>
+              )}
+            </div>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="absolute right-2 top-2 h-8 w-8 opacity-70 hover:opacity-100"
+            onClick={() => setIsDismissed(true)}
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </Alert>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/MobileBottomNavigation.tsx b/src/components/MobileBottomNavigation.tsx
index 6b453acc..9cebdc72 100644
--- a/src/components/MobileBottomNavigation.tsx
+++ b/src/components/MobileBottomNavigation.tsx
@@ -73,6 +73,7 @@ export const MobileBottomNavigation: React.FC = () => {
               <Link
                 key={item.id}
                 href={item.href}
+                data-tour={item.id === 'portfolio' ? 'portfolio-link' : undefined}
                 className={cn(
                   'flex flex-col items-center justify-center py-2 px-3 rounded-lg transition-all duration-200 min-w-0 flex-1',
                   isActive
diff --git a/src/components/MultiChainPortfolio.tsx b/src/components/MultiChainPortfolio.tsx
index 339edcf1..9c0acbd8 100644
--- a/src/components/MultiChainPortfolio.tsx
+++ b/src/components/MultiChainPortfolio.tsx
@@ -1,12 +1,13 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import { RefreshCw, TrendingUp, AlertTriangle, ExternalLink, Filter } from 'lucide-react';
+import { RefreshCw, TrendingUp, AlertTriangle, ExternalLink, Filter, Wallet, Briefcase } from 'lucide-react';
 import { usePortfolioStore } from '@/store/portfolioStore';
 import { useWalletStore } from '@/store/walletStore';
 import { CHAIN_CONFIG, type ChainId } from '@/config/chains';
 import { formatPrice } from '@/utils/searchUtils';
 import type { ChainPortfolio, BridgeSuggestion } from '@/types/portfolio';
+import { EmptyState } from '@/components/ui/EmptyState';
 
 export const MultiChainPortfolio: React.FC = () => {
   const { 
@@ -45,12 +46,19 @@ export const MultiChainPortfolio: React.FC = () => {
 
   if (!isConnected) {
     return (
-      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 text-center">
-        <div className="text-gray-500 dark:text-gray-400 mb-4">
-          <AlertTriangle className="w-12 h-12 mx-auto mb-4" />
-          <p>Connect your wallet to view your portfolio</p>
-        </div>
-      </div>
+      <EmptyState
+        title="Connect Wallet"
+        description="Please connect your wallet to view your multi-chain portfolio holdings."
+        icon={Wallet}
+        action={{
+          label: "Connect Wallet",
+          onClick: () => {
+            // This would typically trigger the wallet connection modal
+            // but for now we just show the requirement
+          }
+        }}
+        className="bg-white dark:bg-gray-800 rounded-xl shadow-lg"
+      />
     );
   }
 
@@ -65,18 +73,33 @@ export const MultiChainPortfolio: React.FC = () => {
 
   if (error || !portfolio) {
     return (
-      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 text-center">
-        <AlertTriangle className="w-12 h-12 text-red-500 mx-auto mb-4" />
-        <p className="text-red-600 dark:text-red-400 mb-4">
-          {error || 'Failed to load portfolio'}
-        </p>
-        <button
-          onClick={handleRefresh}
-          className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
-        >
-          Try Again
-        </button>
-      </div>
+      <EmptyState
+        title="Failed to load portfolio"
+        description={error || "Something went wrong while fetching your portfolio data."}
+        icon={AlertTriangle}
+        action={{
+          label: "Try Again",
+          onClick: handleRefresh
+        }}
+        className="bg-white dark:bg-gray-800 rounded-xl shadow-lg"
+      />
+    );
+  }
+
+  const totalHoldings = portfolio.chains.reduce((sum, chain) => sum + chain.holdings.length, 0);
+
+  if (totalHoldings === 0) {
+    return (
+      <EmptyState
+        title="No investments found"
+        description="You don't have any property investments yet. Start browsing properties to build your portfolio."
+        icon={Briefcase}
+        action={{
+          label: "Browse Properties",
+          href: "/properties"
+        }}
+        className="bg-white dark:bg-gray-800 rounded-xl shadow-lg"
+      />
     );
   }
 
diff --git a/src/components/NotificationCenter.tsx b/src/components/NotificationCenter.tsx
index ea901dc9..ebba20b8 100644
--- a/src/components/NotificationCenter.tsx
+++ b/src/components/NotificationCenter.tsx
@@ -1,12 +1,11 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { Separator } from '@/components/ui/separator';
 import { PropertyAlert } from '@/types/property';
 import { formatDistanceToNow } from 'date-fns';
 import { 
@@ -19,6 +18,7 @@ import {
   AlertCircle,
   TrendingUp
 } from 'lucide-react';
+import { EmptyState } from '@/components/ui/EmptyState';
 
 interface NotificationCenterProps {
   alerts: PropertyAlert[];
@@ -27,14 +27,14 @@ interface NotificationCenterProps {
   onClearAlert: (alertId: string) => void;
 }
 
-export const NotificationCenter: React.FC<NotificationCenterProps> = ({
+export const NotificationCenter = ({
   alerts,
   onMarkAsRead,
   onMarkAllAsRead,
   onClearAlert,
-}) => {
+}: NotificationCenterProps) => {
   const [isOpen, setIsOpen] = useState(false);
-  const unreadCount = alerts.filter(alert => !alert.isRead).length;
+  const unreadCount = alerts.filter((alert: PropertyAlert) => !alert.isRead).length;
 
   const handleMarkAsRead = (alertId: string) => {
     onMarkAsRead(alertId);
@@ -103,15 +103,12 @@ export const NotificationCenter: React.FC<NotificationCenterProps> = ({
 
         <ScrollArea className="h-[calc(100vh-180px)] mt-6">
           {alerts.length === 0 ? (
-            <div className="text-center py-12">
-              <Bell className="w-12 h-12 text-gray-400 mx-auto mb-4" />
-              <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
-                No alerts yet
-              </h3>
-              <p className="text-sm text-gray-600 dark:text-gray-400">
-                Save property searches to receive notifications about new listings.
-              </p>
-            </div>
+            <EmptyState
+              title="No alerts yet"
+              description="Save property searches to receive notifications about new listings."
+              icon={Bell}
+              className="py-12"
+            />
           ) : (
             <div className="space-y-4">
               {alerts.map((alert) => (
diff --git a/src/components/OnboardingTour.tsx b/src/components/OnboardingTour.tsx
new file mode 100644
index 00000000..6fe34763
--- /dev/null
+++ b/src/components/OnboardingTour.tsx
@@ -0,0 +1,208 @@
+'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useOnboardingStore } from '@/store/onboardingStore';
+import { Button } from '@/components/ui/button';
+import { X, ChevronRight, ChevronLeft, Building2, Wallet, Search, BarChart3, Info } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface Step {
+  id: string;
+  title: string;
+  description: string;
+  target?: string;
+  icon: React.ReactNode;
+}
+
+const steps: Step[] = [
+  {
+    id: 'welcome',
+    title: 'Welcome to PropChain',
+    description: 'Invest in real estate with the ease of crypto. Let us show you around!',
+    icon: <Building2 className="w-6 h-6 text-blue-600" />,
+  },
+  {
+    id: 'wallet',
+    title: 'Connect Your Wallet',
+    description: 'Connect your crypto wallet to start browsing and investing in properties.',
+    target: '[data-tour="wallet-connector"]',
+    icon: <Wallet className="w-6 h-6 text-blue-600" />,
+  },
+  {
+    id: 'browse',
+    title: 'Browse Properties',
+    description: 'Explore high-yield real estate opportunities across multiple chains.',
+    target: '[data-tour="browse-properties"]',
+    icon: <Search className="w-6 h-6 text-blue-600" />,
+  },
+  {
+    id: 'purchase',
+    title: 'Purchase Tokens',
+    description: 'Buy fractional tokens of real estate assets and start earning yield immediately.',
+    target: '[data-tour="purchase-form"]',
+    icon: <Building2 className="w-6 h-6 text-blue-600" />,
+  },
+  {
+    id: 'portfolio',
+    title: 'Track Your Portfolio',
+    description: 'Monitor your investments, earnings, and yield in one place.',
+    target: '[data-tour="portfolio-link"]',
+    icon: <BarChart3 className="w-6 h-6 text-blue-600" />,
+  },
+];
+
+export const OnboardingTour: React.FC = () => {
+  const { 
+    isActive, 
+    currentStep, 
+    nextStep, 
+    prevStep, 
+    stopOnboarding, 
+    completeOnboarding 
+  } = useOnboardingStore();
+
+  const [targetRect, setTargetRect] = useState<DOMRect | null>(null);
+  const portalRef = useRef<HTMLDivElement>(null);
+
+  const step = steps[currentStep];
+
+  useEffect(() => {
+    if (!isActive || !step.target) {
+      setTargetRect(null);
+      return;
+    }
+
+    const updateRect = () => {
+      const element = document.querySelector(step.target!);
+      if (element) {
+        setTargetRect(element.getBoundingClientRect());
+        element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      } else {
+        setTargetRect(null);
+      }
+    };
+
+    updateRect();
+    window.addEventListener('resize', updateRect);
+    window.addEventListener('scroll', updateRect);
+
+    return () => {
+      window.removeEventListener('resize', updateRect);
+      window.removeEventListener('scroll', updateRect);
+    };
+  }, [isActive, step]);
+
+  if (!isActive) return null;
+
+  const isLastStep = currentStep === steps.length - 1;
+
+  return (
+    <div className="fixed inset-0 z-[100] pointer-events-none overflow-hidden">
+      {/* Backdrop with hole */}
+      <AnimatePresence>
+        {isActive && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="absolute inset-0 bg-black/60 pointer-events-auto"
+            style={{
+              clipPath: targetRect 
+                ? `polygon(0% 0%, 0% 100%, ${targetRect.left}px 100%, ${targetRect.left}px ${targetRect.top}px, ${targetRect.right}px ${targetRect.top}px, ${targetRect.right}px ${targetRect.bottom}px, ${targetRect.left}px ${targetRect.bottom}px, ${targetRect.left}px 100%, 100% 100%, 100% 0%)`
+                : 'none'
+            }}
+            onClick={stopOnboarding}
+          />
+        )}
+      </AnimatePresence>
+
+      {/* Tour Card */}
+      <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+        <motion.div
+          layout
+          initial={{ opacity: 0, scale: 0.9, y: 20 }}
+          animate={{ opacity: 1, scale: 1, y: 0 }}
+          exit={{ opacity: 0, scale: 0.9, y: 20 }}
+          className={cn(
+            "pointer-events-auto w-full max-w-sm bg-white dark:bg-gray-900 rounded-2xl shadow-2xl border border-gray-200 dark:border-gray-800 p-6 m-4",
+            targetRect ? "absolute" : "relative"
+          )}
+          style={targetRect ? {
+            top: targetRect.bottom + 20 > window.innerHeight - 200 ? 'auto' : targetRect.bottom + 20,
+            bottom: targetRect.bottom + 20 > window.innerHeight - 200 ? window.innerHeight - targetRect.top + 20 : 'auto',
+            left: Math.max(20, Math.min(window.innerWidth - 380, targetRect.left + (targetRect.width / 2) - 192)),
+          } : {}}
+        >
+          <button 
+            onClick={stopOnboarding}
+            className="absolute top-4 right-4 p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
+          >
+            <X className="w-4 h-4" />
+          </button>
+
+          <div className="flex items-start gap-4 mb-4">
+            <div className="p-3 bg-blue-50 dark:bg-blue-900/30 rounded-xl">
+              {step.icon}
+            </div>
+            <div>
+              <h3 className="text-lg font-bold text-gray-900 dark:text-white leading-tight">
+                {step.title}
+              </h3>
+              <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                Step {currentStep + 1} of {steps.length}
+              </p>
+            </div>
+          </div>
+
+          <p className="text-gray-600 dark:text-gray-300 mb-6">
+            {step.description}
+          </p>
+
+          <div className="flex items-center justify-between gap-3">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={stopOnboarding}
+              className="text-gray-500"
+            >
+              Skip
+            </Button>
+            
+            <div className="flex items-center gap-2">
+              {currentStep > 0 && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={prevStep}
+                  className="gap-1"
+                >
+                  <ChevronLeft className="w-4 h-4" />
+                  Back
+                </Button>
+              )}
+              
+              <Button
+                size="sm"
+                onClick={isLastStep ? completeOnboarding : nextStep}
+                className="gap-1 bg-blue-600 hover:bg-blue-700"
+              >
+                {isLastStep ? 'Finish' : 'Next'}
+                {!isLastStep && <ChevronRight className="w-4 h-4" />}
+              </Button>
+            </div>
+          </div>
+
+          {/* Progress bar */}
+          <div className="absolute bottom-0 left-0 h-1 bg-gray-100 dark:bg-gray-800 w-full overflow-hidden rounded-b-2xl">
+            <motion.div 
+              className="h-full bg-blue-600"
+              initial={{ width: 0 }}
+              animate={{ width: `${((currentStep + 1) / steps.length) * 100}%` }}
+            />
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/PropertySearch.tsx b/src/components/PropertySearch.tsx
index c2e5e4f3..01483d6c 100644
--- a/src/components/PropertySearch.tsx
+++ b/src/components/PropertySearch.tsx
@@ -14,11 +14,11 @@ interface PropertySearchProps {
   placeholder?: string;
 }
 
-export const PropertySearch: React.FC<PropertySearchProps> = ({
+export const PropertySearch = ({
   value,
   onChange,
   placeholder = 'Search properties, locations...',
-}) => {
+}: PropertySearchProps) => {
   const [isFocused, setIsFocused] = useState(false);
   const [selectedIndex, setSelectedIndex] = useState(-1);
   const [showHistory, setShowHistory] = useState(false);
@@ -83,14 +83,14 @@ export const PropertySearch: React.FC<PropertySearchProps> = ({
     switch (e.key) {
       case 'ArrowDown':
         e.preventDefault();
-        setSelectedIndex(prev => 
+        setSelectedIndex((prev: number) => 
           prev < suggestions.length - 1 ? prev + 1 : prev
         );
         break;
       
       case 'ArrowUp':
         e.preventDefault();
-        setSelectedIndex(prev => (prev > 0 ? prev - 1 : -1));
+        setSelectedIndex((prev: number) => (prev > 0 ? prev - 1 : -1));
         break;
       
       case 'Enter':
@@ -141,6 +141,7 @@ export const PropertySearch: React.FC<PropertySearchProps> = ({
           onFocus={handleFocus}
           onKeyDown={handleKeyDown}
           placeholder={placeholder}
+          data-tour="browse-properties"
           className="w-full pl-12 pr-12 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500"
         />
 
diff --git a/src/components/SearchResults.tsx b/src/components/SearchResults.tsx
index f950e79f..2e16a82f 100644
--- a/src/components/SearchResults.tsx
+++ b/src/components/SearchResults.tsx
@@ -8,6 +8,8 @@ import type { Property, ViewMode, SortOption, SearchFilters } from '@/types/prop
 import { SORT_LABELS } from '@/types/property';
 import { Skeleton } from '@/components/ui/skeleton';
 import { ComparisonBar } from './ComparisonBar';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { Search } from 'lucide-react';
 
 interface SearchResultsProps {
   properties: Property[];
@@ -170,17 +172,11 @@ export const SearchResults: React.FC<SearchResultsProps> = ({
 
       {/* Empty State */}
       {!isLoading && properties.length === 0 && (
-        <div className="flex flex-col items-center justify-center py-20">
-          <svg className="w-24 h-24 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
-          </svg>
-          <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-            No properties found
-          </h3>
-          <p className="text-gray-600 dark:text-gray-400 text-center max-w-md">
-            Try adjusting your filters or search criteria to find more properties.
-          </p>
-        </div>
+        <EmptyState
+          title="No properties found"
+          description="Try adjusting your filters or search criteria to find more properties."
+          icon={Search}
+        />
       )}
 
       {/* Results Grid/List */}
diff --git a/src/components/TransactionHistory.tsx b/src/components/TransactionHistory.tsx
index ad5a20de..59beba0a 100644
--- a/src/components/TransactionHistory.tsx
+++ b/src/components/TransactionHistory.tsx
@@ -17,6 +17,8 @@ import * as XLSX from 'xlsx';
 import { saveAs } from 'file-saver';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { History } from 'lucide-react';
 
 const TRANSACTION_TYPES: TransactionType[] = ['purchase', 'transfer', 'management', 'other'];
 const TRANSACTION_STATUSES: TransactionStatus[] = ['pending', 'processing', 'confirmed', 'failed', 'cancelled'];
@@ -312,10 +314,17 @@ export const TransactionHistory: React.FC = () => {
                 ))
               ) : rowsToRender.length === 0 ? (
                 <TableRow>
-                  <TableCell colSpan={6} className="text-center py-10 text-muted-foreground">
-                    {searchTerm || typeFilter !== 'all' || statusFilter !== 'all'
-                      ? 'No transactions match your filters'
-                      : 'No transactions found'}
+                  <TableCell colSpan={6} className="p-0">
+                    <EmptyState
+                      title={searchTerm || typeFilter !== 'all' || statusFilter !== 'all'
+                        ? 'No transactions match your filters'
+                        : 'No transactions found'}
+                      description={searchTerm || typeFilter !== 'all' || statusFilter !== 'all'
+                        ? 'Try adjusting your search or filters to see more results.'
+                        : 'Your transaction history will appear here once you start using the platform.'}
+                      icon={History}
+                      className="py-12"
+                    />
                   </TableCell>
                 </TableRow>
               ) : (
diff --git a/src/components/WalletConnector.tsx b/src/components/WalletConnector.tsx
index d615895f..5898f86b 100644
--- a/src/components/WalletConnector.tsx
+++ b/src/components/WalletConnector.tsx
@@ -126,6 +126,7 @@ export const WalletConnector: React.FC = () => {
       <button
         onClick={() => setIsModalOpen(true)}
         disabled={isConnecting}
+        data-tour="wallet-connector"
         className="px-6 py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-medium rounded-lg transition-colors flex items-center gap-2"
       >
         {isConnecting ? (
diff --git a/src/components/dashboard/DraggablePropertiesList.tsx b/src/components/dashboard/DraggablePropertiesList.tsx
index 2e38b8d7..8ad197d6 100644
--- a/src/components/dashboard/DraggablePropertiesList.tsx
+++ b/src/components/dashboard/DraggablePropertiesList.tsx
@@ -2,9 +2,10 @@
 
 import { motion } from "framer-motion";
 import { useState, useEffect, useCallback, memo } from "react";
-import { GripVertical, RotateCcw } from "lucide-react";
+import { GripVertical, RotateCcw, Briefcase } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { PropertyCard } from "./PropertyCard";
+import { EmptyState } from "@/components/ui/EmptyState";
 
 interface Property {
   id: string;
@@ -214,48 +215,61 @@ export const DraggablePropertiesList = memo(() => {
         </div>
       </div>
 
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
-        {properties.map((property, index) => (
-          <motion.div
-            key={property.id}
-            layout
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.3 }}
-            className={`relative group ${
-              dragOverIndex === index ? 'scale-105' : ''
-            }`}
-          >
-            {/* Drag Handle */}
-            <div
-              className="absolute top-2 left-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity cursor-move bg-white/90 dark:bg-gray-800/90 rounded-md p-1.5 shadow-md"
-              draggable
-              onDragStart={(e) => handleDragStart(e, property)}
-              onDragEnd={handleDragEnd}
+      {properties.length === 0 ? (
+        <EmptyState
+          title="No investments yet"
+          description="You haven't invested in any properties yet. Start browsing to find your first investment opportunity."
+          icon={Briefcase}
+          action={{
+            label: "Explore Properties",
+            href: "/properties"
+          }}
+          className="bg-white/50 dark:bg-gray-800/50 rounded-2xl border border-dashed border-gray-200 dark:border-gray-700"
+        />
+      ) : (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
+          {properties.map((property, index) => (
+            <motion.div
+              key={property.id}
+              layout
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.3 }}
+              className={`relative group ${
+                dragOverIndex === index ? 'scale-105' : ''
+              }`}
             >
-              <GripVertical className="w-4 h-4 text-gray-500" />
-            </div>
+              {/* Drag Handle */}
+              <div
+                className="absolute top-2 left-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity cursor-move bg-white/90 dark:bg-gray-800/90 rounded-md p-1.5 shadow-md"
+                draggable
+                onDragStart={(e) => handleDragStart(e, property)}
+                onDragEnd={handleDragEnd}
+              >
+                <GripVertical className="w-4 h-4 text-gray-500" />
+              </div>
 
-            {/* Draggable Property Card */}
-            <div
-              draggable
-              onDragStart={(e) => handleDragStart(e, property)}
-              onDragOver={(e) => handleDragOver(e, index)}
-              onDragLeave={handleDragLeave}
-              onDrop={(e) => handleDrop(e, index)}
-              onDragEnd={handleDragEnd}
-              onKeyDown={(e) => handleKeyDown(e, index)}
-              tabIndex={0}
-              role="button"
-              aria-label={`Property ${property.name}, press arrow keys to reorder`}
-              className="cursor-move focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded-xl"
-            >
-              <PropertyCard property={property} index={index} />
-            </div>
-          </motion.div>
-        ))}
-      </div>
+              {/* Draggable Property Card */}
+              <div
+                draggable
+                onDragStart={(e) => handleDragStart(e, property)}
+                onDragOver={(e) => handleDragOver(e, index)}
+                onDragLeave={handleDragLeave}
+                onDrop={(e) => handleDrop(e, index)}
+                onDragEnd={handleDragEnd}
+                onKeyDown={(e) => handleKeyDown(e, index)}
+                tabIndex={0}
+                role="button"
+                aria-label={`Property ${property.name}, press arrow keys to reorder`}
+                className="cursor-move focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded-xl"
+              >
+                <PropertyCard property={property} index={index} />
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      )}
     </motion.div>
   );
-};
+});
diff --git a/src/components/dashboard/PortfolioOverview.tsx b/src/components/dashboard/PortfolioOverview.tsx
index 68c3718f..f2b68de4 100644
--- a/src/components/dashboard/PortfolioOverview.tsx
+++ b/src/components/dashboard/PortfolioOverview.tsx
@@ -8,11 +8,13 @@ import {
   Building2,
   DollarSign,
   Percent,
+  Briefcase,
 } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { useI18nFormatting } from "@/utils/i18nFormatting";
 import { useWalletStore } from "@/store/walletStore";
 import { usePortfolioOverview } from "@/hooks/usePortfolioQuery";
+import { EmptyState } from "@/components/ui/EmptyState";
 
 interface MetricCardProps {
   title: string;
@@ -176,6 +178,27 @@ export const PortfolioOverview = () => {
 
   const metrics = calculateMetrics();
 
+  // If there's no portfolio or no properties, show an empty state for the whole overview
+  const totalProperties = portfolio?.chains.reduce(
+    (total, chain) => total + chain.holdings.length, 
+    0
+  ) || 0;
+
+  if (!portfolio || totalProperties === 0) {
+    return (
+      <EmptyState
+        title={t("dashboard.noInvestmentsTitle", "No investments yet")}
+        description={t("dashboard.noInvestmentsDesc", "Connect your wallet and start investing in real estate tokens to see your portfolio overview here.")}
+        icon={Briefcase}
+        action={{
+          label: t("dashboard.exploreProperties", "Explore Properties"),
+          href: "/properties"
+        }}
+        className="glass-card rounded-2xl border-dashed py-12"
+      />
+    );
+  }
+
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4 md:gap-6">
       {metrics.map((metric, index) => (
diff --git a/src/components/forms/PurchaseTokenForm.tsx b/src/components/forms/PurchaseTokenForm.tsx
index d2d67451..8a328365 100644
--- a/src/components/forms/PurchaseTokenForm.tsx
+++ b/src/components/forms/PurchaseTokenForm.tsx
@@ -35,7 +35,11 @@ export function PurchaseTokenForm({ propertyId, propertyName, onSubmit }: Purcha
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 rounded-3xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900">
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        data-tour="purchase-form"
+        className="space-y-6 rounded-3xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900"
+      >
         <div>
           <h2 className="text-xl font-semibold text-gray-900 dark:text-white">Purchase Tokens</h2>
           <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Purchase tokens for {propertyName} with on-chain validation and an enforced approval step.</p>
diff --git a/src/components/homepage/HeroSection.tsx b/src/components/homepage/HeroSection.tsx
index dd32f45a..cdb7ef62 100644
--- a/src/components/homepage/HeroSection.tsx
+++ b/src/components/homepage/HeroSection.tsx
@@ -16,6 +16,7 @@ export function HeroSection() {
       </p>
       <a
         href="/properties"
+        data-tour="browse-properties"
         className="inline-flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors"
       >
         <svg
diff --git a/src/components/ui/EmptyState.tsx b/src/components/ui/EmptyState.tsx
new file mode 100644
index 00000000..72dd280b
--- /dev/null
+++ b/src/components/ui/EmptyState.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+import { Button } from './button';
+import Link from 'next/link';
+import { cn } from '@/lib/utils';
+
+interface EmptyStateProps {
+  title: string;
+  description: string;
+  icon?: LucideIcon;
+  action?: {
+    label: string;
+    onClick?: () => void;
+    href?: string;
+  };
+  className?: string;
+}
+
+export const EmptyState = ({
+  title,
+  description,
+  icon: Icon,
+  action,
+  className,
+}: EmptyStateProps) => {
+  return (
+    <div className={cn(
+      "flex flex-col items-center justify-center py-16 px-4 text-center",
+      className
+    )}>
+      <div className="relative mb-6">
+        {/* Background Decorative Circles */}
+        <div className="absolute inset-0 -m-4 bg-blue-50 dark:bg-blue-900/20 rounded-full blur-2xl opacity-50" />
+        <div className="relative flex items-center justify-center w-24 h-24 rounded-2xl bg-white dark:bg-gray-800 shadow-xl border border-gray-100 dark:border-gray-700">
+          {Icon ? (
+            <Icon className="w-12 h-12 text-blue-600 dark:text-blue-400" />
+          ) : (
+            <div className="w-12 h-12 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse" />
+          )}
+        </div>
+      </div>
+
+      <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+        {title}
+      </h3>
+      <p className="text-gray-600 dark:text-gray-400 mb-8 max-w-sm mx-auto leading-relaxed">
+        {description}
+      </p>
+
+      {action && (
+        action.href ? (
+          <Link href={action.href}>
+            <Button className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-6 rounded-xl text-lg font-semibold transition-all hover:shadow-lg active:scale-95">
+              {action.label}
+            </Button>
+          </Link>
+        ) : (
+          <Button 
+            onClick={action.onClick}
+            className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-6 rounded-xl text-lg font-semibold transition-all hover:shadow-lg active:scale-95"
+          >
+            {action.label}
+          </Button>
+        )
+      )}
+    </div>
+  );
+};
diff --git a/src/store/onboardingStore.ts b/src/store/onboardingStore.ts
new file mode 100644
index 00000000..2913dcfc
--- /dev/null
+++ b/src/store/onboardingStore.ts
@@ -0,0 +1,51 @@
+import { createBaseStore, type BaseState, type BaseActions } from './base';
+
+export interface OnboardingState extends BaseState {
+  isActive: boolean;
+  currentStep: number;
+  hasCompletedOnboarding: boolean;
+}
+
+export interface OnboardingActions extends BaseActions {
+  startOnboarding: () => void;
+  stopOnboarding: () => void;
+  nextStep: () => void;
+  prevStep: () => void;
+  completeOnboarding: () => void;
+  resetOnboarding: () => void;
+}
+
+const initialState: OnboardingState = {
+  isActive: false,
+  currentStep: 0,
+  hasCompletedOnboarding: false,
+  isLoading: false,
+  error: null,
+  lastUpdated: null,
+};
+
+export const useOnboardingStore = createBaseStore<OnboardingState, OnboardingActions>(
+  initialState,
+  (set, get) => ({
+    setLoading: (loading) => set({ isLoading: loading }),
+    setError: (error) => set({ error }),
+    clearError: () => set({ error: null }),
+    setLastUpdated: (timestamp) => set({ lastUpdated: timestamp }),
+    reset: () => set(initialState),
+
+    startOnboarding: () => {
+      if (!get().hasCompletedOnboarding) {
+        set({ isActive: true, currentStep: 0 });
+      }
+    },
+    stopOnboarding: () => set({ isActive: false }),
+    nextStep: () => set((state: OnboardingState) => ({ currentStep: state.currentStep + 1 })),
+    prevStep: () => set((state: OnboardingState) => ({ currentStep: Math.max(0, state.currentStep - 1) })),
+    completeOnboarding: () => set({ isActive: false, hasCompletedOnboarding: true, currentStep: 0 }),
+    resetOnboarding: () => set({ hasCompletedOnboarding: false, currentStep: 0 }),
+  }),
+  {
+    persist: true,
+    name: 'propchain-onboarding',
+  }
+);
diff --git a/src/utils/security/phishingProtection.ts b/src/utils/security/phishingProtection.ts
index 48f135cb..f3e90b96 100644
--- a/src/utils/security/phishingProtection.ts
+++ b/src/utils/security/phishingProtection.ts
@@ -34,6 +34,14 @@ export class PhishingProtection {
     // Add more suspicious method signatures
   ];
 
+  private static readonly OFFICIAL_DOMAINS = [
+    'propchain.io',
+    'localhost',
+    '127.0.0.1',
+    '0.0.0.0',
+    // Add more official domains here
+  ];
+
   /**
    * Detects phishing attempts based on domain and content analysis
    */
@@ -58,6 +66,12 @@ export class PhishingProtection {
         riskScore += 70;
       }
 
+      // Whitelist check: warn if not on an official domain
+      if (!this.isOfficialDomain(domain)) {
+        warnings.push('Unofficial domain detected');
+        riskScore += 20;
+      }
+
       // Pattern-based heuristics: URL shorteners, IP addresses, long random strings
       if (this.hasSuspiciousUrlPatterns(url)) {
         warnings.push('Suspicious URL patterns detected');
@@ -217,6 +231,36 @@ export class PhishingProtection {
     };
   }
 
+  /**
+   * Reports a suspicious domain to the security team
+   */
+  static async reportSuspiciousDomain(domain: string, reason: string): Promise<boolean> {
+    try {
+      // In a real implementation, this would send data to a security API
+      console.warn(`[Security] Reporting suspicious domain: ${domain}. Reason: ${reason}`);
+      
+      // Placeholder for actual API call
+      // await fetch('https://api.propchain.io/security/report', {
+      //   method: 'POST',
+      //   body: JSON.stringify({ domain, reason, timestamp: Date.now() })
+      // });
+      
+      return true;
+    } catch (error) {
+      console.error('Failed to report suspicious domain:', error);
+      return false;
+    }
+  }
+
+  /**
+   * Checks if a domain is an official PropChain domain
+   */
+  private static isOfficialDomain(domain: string): boolean {
+    return this.OFFICIAL_DOMAINS.some(officialDomain =>
+      domain === officialDomain || domain.endsWith(`.${officialDomain}`)
+    );
+  }
+
   /**
    * Checks if a domain is known for phishing
    */