diff --git a/backend/src/users/users.controller.ts b/backend/src/users/users.controller.ts
index b29b314..2be07e7 100644
--- a/backend/src/users/users.controller.ts
+++ b/backend/src/users/users.controller.ts
@@ -1,173 +1,173 @@
-import {
-  Controller,
-  Get,
-  Patch,
-  Delete,
-  Body,
-  UseGuards,
-  Request,
-  HttpCode,
-  HttpStatus,
-  UseInterceptors,
-  ClassSerializerInterceptor,
-  Post,
-  Param,
-  UploadedFile,
-} from '@nestjs/common';
-import { FileInterceptor } from '@nestjs/platform-express';
-import { ApiTags, ApiOperation, ApiResponse, ApiBearerAuth } from '@nestjs/swagger';
-import { UserProfileResponseDto } from '../users/dto/user-profile-response.dto';
-import { VerifyWalletDto } from '../users/dto/verify-wallet.dto';
-import { UpdateProfileDto } from './dto/update-profile.dto';
-import { plainToInstance } from 'class-transformer';
-import { JwtAuthGuard } from '../common/guards/jwt-auth.guard';
-import { UserService } from './users.service';
-import { WalletService } from './wallet.service';
-import { DeleteAccountDto } from './dto/delete-account.dto';
-import { RolesGuard } from '../common/guards/roles.guard';
-
-@ApiTags('Users')
-@ApiBearerAuth('access-token')
-@Controller('users')
-@UseGuards(JwtAuthGuard)
-@UseInterceptors(ClassSerializerInterceptor)
-export class UsersController {
-  constructor(
-    private readonly userService: UserService,
-    private readonly walletService: WalletService,
-  ) { }
-
-  @Get('me')
-  @ApiOperation({ summary: 'Get current user profile' })
-  @ApiResponse({ status: 200, description: 'User profile retrieved successfully', type: UserProfileResponseDto })
-  @ApiResponse({ status: 401, description: 'Unauthorized' })
-  async getMyProfile(@Request() req): Promise<UserProfileResponseDto> {
-    const user = await this.userService.getMyProfile(req.user.id as string);
-    return plainToInstance(UserProfileResponseDto, user);
-  }
-
-  @Get('admin')
-  @UseGuards(JwtAuthGuard, RolesGuard)
-  @ApiOperation({ summary: 'Get admin user data (admin only)' })
-  @ApiResponse({ status: 200, description: 'Admin data retrieved' })
-  @ApiResponse({ status: 401, description: 'Unauthorized' })
-  @ApiResponse({ status: 403, description: 'Forbidden - admin access required' })
-  async getAdminData(@Request() req) {
-    return { message: 'Admin data access' };
-  }
-
-  @Post('me/avatar')
-  @UseInterceptors(FileInterceptor('avatar'))
-  @ApiOperation({ summary: 'Upload user avatar' })
-  @ApiResponse({ status: 200, description: 'Avatar uploaded successfully' })
-  async uploadMyAvatar(@Request() req, @UploadedFile() file: Express.Multer.File) {
-    return this.userService.uploadAvatar(req.user.id as string, file);
-  }
-
-  @Post('me/wallet/challenge')
-  @HttpCode(HttpStatus.OK)
-  @ApiOperation({ summary: 'Generate wallet verification challenge' })
-  @ApiResponse({ status: 200, description: 'Challenge generated successfully' })
-  @ApiResponse({ status: 401, description: 'Unauthorized' })
-  async generateWalletChallenge(
-    @Request() req,
-  ): Promise<{ challenge: string }> {
-    return this.walletService.generateChallenge(req.user.id as string);
-  }
-
-  @Post('me/wallet/verify')
-  @HttpCode(HttpStatus.OK)
-  @ApiOperation({ summary: 'Verify and link wallet to user account' })
-  @ApiResponse({ status: 200, description: 'Wallet linked successfully' })
-  @ApiResponse({ status: 400, description: 'Bad request - invalid signature' })
-  @ApiResponse({ status: 401, description: 'Unauthorized' })
-  async verifyAndLinkWallet(
-    @Request() req,
-    @Body() dto: VerifyWalletDto,
-  ): Promise<{ walletAddress: string }> {
-    return this.walletService.verifyAndLink(
-      req.user.id as string,
-      dto.walletAddress,
-      dto.signature,
-    );
-  }
-
-  @Get('me/wallet')
-  @ApiOperation({ summary: 'Get wallet connection status' })
-  @ApiResponse({ status: 200, description: 'Wallet status retrieved' })
-  @ApiResponse({ status: 401, description: 'Unauthorized' })
-  async getWalletStatus(
-    @Request() req,
-  ): Promise<{ linked: boolean; walletAddress?: string }> {
-    return this.walletService.getStatus(req.user.id as string);
-  }
-
-  @Delete('me/wallet')
-  @HttpCode(HttpStatus.NO_CONTENT)
-  @ApiOperation({ summary: 'Unlink wallet from user account' })
-  @ApiResponse({ status: 204, description: 'Wallet unlinked successfully' })
-  @ApiResponse({ status: 401, description: 'Unauthorized' })
-  async unlinkWallet(@Request() req): Promise<void> {
-    return this.walletService.unlink(req.user.id as string);
-  }
-
-  @Patch('me')
-  @ApiOperation({ summary: 'Update user profile' })
-  @ApiResponse({ status: 200, description: 'Profile updated successfully', type: UserProfileResponseDto })
-  @ApiResponse({ status: 400, description: 'Bad request - validation error' })
-  @ApiResponse({ status: 401, description: 'Unauthorized' })
-  async updateMyProfile(
-    @Request() req,
-    @Body() dto: UpdateProfileDto,
-  ): Promise<UserProfileResponseDto> {
-    await this.userService.updateProfile(req.user.id as string, dto);
-    const user = await this.userService.getMyProfile(req.user.id as string);
-    return plainToInstance(UserProfileResponseDto, user);
-  }
-
-  @Delete('me')
-  @HttpCode(HttpStatus.NO_CONTENT)
-  @ApiOperation({ summary: 'Delete user account' })
-  @ApiResponse({ status: 204, description: 'Account deleted successfully' })
-  @ApiResponse({ status: 401, description: 'Unauthorized' })
-  async deleteProfile(
-    @Request() req,
-    @Body() dto: DeleteAccountDto,
-  ): Promise<void> {
-    await this.userService.deleteProfile(req.user.id, dto.password);
-  }
-
-  @Get('me/stats')
-  @ApiOperation({ summary: 'Get user statistics and achievements' })
-  @ApiResponse({ status: 200, description: 'User stats retrieved successfully' })
-  @ApiResponse({ status: 401, description: 'Unauthorized' })
-  async getMyStats(@Request() req): Promise<{
-    courseCount: number;
-    completedCourseCount: number;
-    certificateCount: number;
-    xp: number;
-    streak: number;
-    longestStreak: number;
-    lastActiveAt: Date | null;
-    badgesCount: number;
-    rank: number;
-  }> {
-    return this.userService.getMyStats(req.user.id as string);
-  }
-
-  @Get(':id/public')
-  @ApiOperation({ summary: 'Get public user profile by ID' })
-  @ApiResponse({ status: 200, description: 'Public profile retrieved successfully' })
-  @ApiResponse({ status: 404, description: 'User not found' })
-  async getPublicProfile(@Param('id') id: string): Promise<{
-    id: string;
-    username: string | null;
-    xp: number;
-    badgesCount: number;
-    coursesCompleted: number;
-    avatarUrl: string | null;
-    bio: string | null;
-  }> {
-    return this.userService.getPublicProfile(id);
-  }
-}
\ No newline at end of file
+import {
+  Controller,
+  Get,
+  Patch,
+  Delete,
+  Body,
+  UseGuards,
+  Request,
+  HttpCode,
+  HttpStatus,
+  UseInterceptors,
+  ClassSerializerInterceptor,
+  Post,
+  Param,
+  UploadedFile,
+} from '@nestjs/common';
+import { FileInterceptor } from '@nestjs/platform-express';
+import { ApiTags, ApiOperation, ApiResponse, ApiBearerAuth } from '@nestjs/swagger';
+import { UserProfileResponseDto } from '../users/dto/user-profile-response.dto';
+import { VerifyWalletDto } from '../users/dto/verify-wallet.dto';
+import { UpdateProfileDto } from './dto/update-profile.dto';
+import { plainToInstance } from 'class-transformer';
+import { JwtAuthGuard } from '../common/guards/jwt-auth.guard';
+import { UserService } from './users.service';
+import { WalletService } from './wallet.service';
+import { DeleteAccountDto } from './dto/delete-account.dto';
+import { RolesGuard } from '../common/guards/roles.guard';
+
+@ApiTags('Users')
+@ApiBearerAuth('access-token')
+@Controller('users')
+@UseGuards(JwtAuthGuard)
+@UseInterceptors(ClassSerializerInterceptor)
+export class UsersController {
+  constructor(
+    private readonly userService: UserService,
+    private readonly walletService: WalletService,
+  ) { }
+
+  @Get('me')
+  @ApiOperation({ summary: 'Get current user profile' })
+  @ApiResponse({ status: 200, description: 'User profile retrieved successfully', type: UserProfileResponseDto })
+  @ApiResponse({ status: 401, description: 'Unauthorized' })
+  async getMyProfile(@Request() req): Promise<UserProfileResponseDto> {
+    const user = await this.userService.getMyProfile(req.user.id as string);
+    return plainToInstance(UserProfileResponseDto, user);
+  }
+
+  @Get('admin')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @ApiOperation({ summary: 'Get admin user data (admin only)' })
+  @ApiResponse({ status: 200, description: 'Admin data retrieved' })
+  @ApiResponse({ status: 401, description: 'Unauthorized' })
+  @ApiResponse({ status: 403, description: 'Forbidden - admin access required' })
+  async getAdminData(@Request() req) {
+    return { message: 'Admin data access' };
+  }
+
+  @Post('me/avatar')
+  @UseInterceptors(FileInterceptor('avatar'))
+  @ApiOperation({ summary: 'Upload user avatar' })
+  @ApiResponse({ status: 200, description: 'Avatar uploaded successfully' })
+  async uploadMyAvatar(@Request() req, @UploadedFile() file: Express.Multer.File) {
+    return this.userService.uploadAvatar(req.user.id as string, file);
+  }
+
+  @Post('me/wallet/challenge')
+  @HttpCode(HttpStatus.OK)
+  @ApiOperation({ summary: 'Generate wallet verification challenge' })
+  @ApiResponse({ status: 200, description: 'Challenge generated successfully' })
+  @ApiResponse({ status: 401, description: 'Unauthorized' })
+  async generateWalletChallenge(
+    @Request() req,
+  ): Promise<{ challenge: string }> {
+    return this.walletService.generateChallenge(req.user.id as string);
+  }
+
+  @Post('me/wallet/verify')
+  @HttpCode(HttpStatus.OK)
+  @ApiOperation({ summary: 'Verify and link wallet to user account' })
+  @ApiResponse({ status: 200, description: 'Wallet linked successfully' })
+  @ApiResponse({ status: 400, description: 'Bad request - invalid signature' })
+  @ApiResponse({ status: 401, description: 'Unauthorized' })
+  async verifyAndLinkWallet(
+    @Request() req,
+    @Body() dto: VerifyWalletDto,
+  ): Promise<{ walletAddress: string }> {
+    return this.walletService.verifyAndLink(
+      req.user.id as string,
+      dto.walletAddress,
+      dto.signature,
+    );
+  }
+
+  @Get('me/wallet')
+  @ApiOperation({ summary: 'Get wallet connection status' })
+  @ApiResponse({ status: 200, description: 'Wallet status retrieved' })
+  @ApiResponse({ status: 401, description: 'Unauthorized' })
+  async getWalletStatus(
+    @Request() req,
+  ): Promise<{ linked: boolean; walletAddress?: string }> {
+    return this.walletService.getStatus(req.user.id as string);
+  }
+
+  @Delete('me/wallet')
+  @HttpCode(HttpStatus.NO_CONTENT)
+  @ApiOperation({ summary: 'Unlink wallet from user account' })
+  @ApiResponse({ status: 204, description: 'Wallet unlinked successfully' })
+  @ApiResponse({ status: 401, description: 'Unauthorized' })
+  async unlinkWallet(@Request() req): Promise<void> {
+    return this.walletService.unlink(req.user.id as string);
+  }
+
+  @Patch('me')
+  @ApiOperation({ summary: 'Update user profile' })
+  @ApiResponse({ status: 200, description: 'Profile updated successfully', type: UserProfileResponseDto })
+  @ApiResponse({ status: 400, description: 'Bad request - validation error' })
+  @ApiResponse({ status: 401, description: 'Unauthorized' })
+  async updateMyProfile(
+    @Request() req,
+    @Body() dto: UpdateProfileDto,
+  ): Promise<UserProfileResponseDto> {
+    await this.userService.updateProfile(req.user.id as string, dto);
+    const user = await this.userService.getMyProfile(req.user.id as string);
+    return plainToInstance(UserProfileResponseDto, user);
+  }
+
+  @Delete('me')
+  @HttpCode(HttpStatus.NO_CONTENT)
+  @ApiOperation({ summary: 'Delete user account' })
+  @ApiResponse({ status: 204, description: 'Account deleted successfully' })
+  @ApiResponse({ status: 401, description: 'Unauthorized' })
+  async deleteProfile(
+    @Request() req,
+    @Body() dto: DeleteAccountDto,
+  ): Promise<void> {
+    await this.userService.deleteProfile(req.user.id, dto.password);
+  }
+
+  @Get('me/stats')
+  @ApiOperation({ summary: 'Get user statistics and achievements' })
+  @ApiResponse({ status: 200, description: 'User stats retrieved successfully' })
+  @ApiResponse({ status: 401, description: 'Unauthorized' })
+  async getMyStats(@Request() req): Promise<{
+    courseCount: number;
+    completedCourseCount: number;
+    certificateCount: number;
+    xp: number;
+    streak: number;
+    longestStreak: number;
+    lastActiveAt: Date | null;
+    badgesCount: number;
+    rank: number;
+  }> {
+    return this.userService.getMyStats(req.user.id as string);
+  }
+
+  @Get(':id/public')
+  @ApiOperation({ summary: 'Get public user profile by ID' })
+  @ApiResponse({ status: 200, description: 'Public profile retrieved successfully' })
+  @ApiResponse({ status: 404, description: 'User not found' })
+  async getPublicProfile(@Param('id') id: string): Promise<{
+    id: string;
+    username: string | null;
+    xp: number;
+    badgesCount: number;
+    coursesCompleted: number;
+    avatarUrl: string | null;
+    bio: string | null;
+  }> {
+    return this.userService.getPublicProfile(id);
+  }
+}
diff --git a/frontend/app/certificates/page.tsx b/frontend/app/certificates/page.tsx
index 58762d3..32fcdd6 100644
--- a/frontend/app/certificates/page.tsx
+++ b/frontend/app/certificates/page.tsx
@@ -5,38 +5,105 @@ import { Button } from "@/components/ui/button";
 import { useAuth } from "@/contexts/auth-context";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
-import { ArrowLeft } from "lucide-react";
+import { ArrowLeft, ShieldCheck, Award, AlertTriangle, Loader2 } from "lucide-react";
 import Link from "next/link";
-import { MyCertificatesPageContent } from "@/components/MyCertificatesPage/page";
+import { useCertificates } from "@/hooks/use-certificates";
+import { CertificateCard } from "@/components/certificates/certificate-card";
 
 export default function MyCertificatesPage() {
-  const { isAuthenticated } = useAuth();
+  const { isAuthenticated, isLoading: authLoading } = useAuth();
   const router = useRouter();
+  const { data: certificates, isLoading: certsLoading, isError, refetch } = useCertificates();
 
   useEffect(() => {
-    if (!isAuthenticated) {
+    if (!authLoading && !isAuthenticated) {
       router.push("/");
     }
-  }, [isAuthenticated, router]);
+  }, [isAuthenticated, authLoading, router]);
+  }, [isAuthenticated, authLoading, router]);
 
-  if (!isAuthenticated) return null;
+  if (authLoading || !isAuthenticated) {
+    return (
+      <div className="min-h-screen bg-[#0a0a0a] flex items-center justify-center">
+        <Loader2 className="w-8 h-8 text-green-500 animate-spin" />
+      </div>
+    );
+  }
 
   return (
     <div className="min-h-screen bg-[#0a0a0a] text-white">
       <Header />
-      <main className="container mx-auto px-6 py-12 max-w-4xl">
+      <main className="container mx-auto px-6 py-12 max-w-5xl">
         <div className="mb-8">
           <Link href="/dashboard">
-            <Button variant="ghost" className="gap-2 text-gray-400 hover:text-white">
+            <Button variant="ghost" className="gap-2 text-gray-400 hover:text-white hover:bg-white/5">
               <ArrowLeft className="w-4 h-4" />
               Back to Dashboard
             </Button>
           </Link>
         </div>
 
-        <div className="mb-10">
-          <MyCertificatesPageContent />
+        <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12">
+          <div className="space-y-2">
+            <h1 className="text-4xl md:text-5xl font-black tracking-tight">
+              My <span className="text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-emerald-600">Certificates</span>
+            </h1>
+            <p className="text-gray-400 text-lg max-w-xl">
+              Showcase your achievements. All certificates are cryptographically signed and verifiable on-chain.
+            </p>
+          </div>
+          <div className="flex items-center gap-3 px-4 py-2 rounded-2xl bg-green-500/5 border border-green-500/10 text-green-400 text-sm font-bold uppercase tracking-wider">
+             <ShieldCheck className="w-5 h-5" />
+             Secured by ByteChain
+          </div>
         </div>
+
+        {certsLoading ? (
+          <div className="grid gap-6">
+            {[1, 2].map((i) => (
+              <div key={i} className="h-32 rounded-xl bg-white/5 animate-pulse border border-white/10" />
+            ))}
+          </div>
+        ) : isError ? (
+          <div className="flex flex-col items-center justify-center py-20 text-center space-y-4 bg-white/[0.02] rounded-3xl border border-white/5">
+            <div className="w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center border border-red-500/20">
+              <AlertTriangle className="w-8 h-8 text-red-500" />
+            </div>
+            <div className="space-y-1">
+               <h3 className="text-xl font-bold">Failed to load certificates</h3>
+               <p className="text-gray-400">There was an error connecting to the verification server.</p>
+            </div>
+            <Button 
+              onClick={() => void refetch()}
+              className="bg-white/10 hover:bg-white/20 text-white border-white/10"
+            >
+              Try Again
+            </Button>
+          </div>
+        ) : !certificates || certificates.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-24 text-center space-y-6 bg-white/[0.02] rounded-3xl border border-white/5">
+            <div className="w-20 h-20 rounded-2xl bg-white/5 flex items-center justify-center border border-white/10 opacity-50">
+              <Award className="w-10 h-10 text-gray-400" />
+            </div>
+            <div className="space-y-2">
+               <h3 className="text-2xl font-bold">No certificates yet</h3>
+               <p className="text-gray-400 max-w-xs mx-auto">
+                 Complete courses and pass quizzes to earn your blockchain certifications.
+               </p>
+            </div>
+            <Link href="/courses">
+              <Button className="bg-green-500 hover:bg-green-400 text-[#002E20] font-black px-8 h-12 rounded-xl transition-all hover:scale-105">
+                Explore Courses
+              </Button>
+            </Link>
+          </div>
+        ) : (
+          <div className="grid gap-6">
+            {certificates.map((cert) => (
+              <CertificateCard key={cert.id} certificate={cert} />
+            ))}
+          </div>
+        )}
       </main>
     </div>
   );
diff --git a/frontend/app/profile/page.tsx b/frontend/app/profile/page.tsx
index c7007fe..2660f6e 100644
--- a/frontend/app/profile/page.tsx
+++ b/frontend/app/profile/page.tsx
@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 import { Header } from "@/components/header";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { useAuth } from "@/contexts/auth-context";
 import { useUser } from "@/contexts/user-context";
@@ -16,12 +16,17 @@ import {
   Mail,
   Shield,
   Settings,
-  User,
+  User as UserIcon,
+  Loader2,
+  ExternalLink,
+  Calendar,
+  MapPin,
+  Sparkles
 } from "lucide-react";
 import Link from "next/link";
 
 export default function ProfilePage() {
-  const { isAuthenticated } = useAuth();
+  const { isAuthenticated, isLoading: authLoading } = useAuth();
   const { user, stats, userStats, loadUserData, updateProfile } = useUser();
   const router = useRouter();
 
@@ -30,107 +35,129 @@ export default function ProfilePage() {
   }, [loadUserData]);
 
   useEffect(() => {
-    if (!isAuthenticated) {
+    if (!authLoading && !isAuthenticated) {
       router.push("/");
     }
-  }, [isAuthenticated, router]);
+  }, [isAuthenticated, authLoading, router]);
 
-  if (!isAuthenticated || !user) {
+  if (authLoading || !isAuthenticated || !user) {
     return (
-      <div className="min-h-screen bg-[#0a0a0a] text-white">
-        <Header />
-        <main className="container mx-auto px-6 py-12 text-center">
-          <div className="animate-pulse">
-            <div className="h-8 w-48 bg-gray-800 rounded mx-auto mb-4"></div>
-            <div className="h-4 w-64 bg-gray-800 rounded mx-auto"></div>
-          </div>
-        </main>
+      <div className="min-h-screen bg-[#0a0a0a] flex items-center justify-center">
+        <Loader2 className="w-8 h-8 text-green-500 animate-spin" />
       </div>
     );
   }
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-white">
+    <div className="min-h-screen bg-[#0a0a0a] text-white selection:bg-green-500/30">
       <Header />
-      <main className="container mx-auto px-6 py-12 max-w-4xl">
-        <div className="mb-8">
-          <Link href="/dashboard">
-            <Button
-              variant="ghost"
-              className="gap-2 text-gray-400 hover:text-white"
-            >
-              <ArrowLeft className="w-4 h-4" />
-              Back to Dashboard
-            </Button>
-          </Link>
-        </div>
-
-        <div className="mb-10">
-          <h1 className="text-3xl md:text-4xl font-bold">My Profile</h1>
-          <p className="text-gray-400 mt-2">View and manage your account details and progress.</p>
-        </div>
-
-        <Card className="mb-8 border-white/10 bg-[#080e22]">
-          <CardHeader>
-            <CardTitle className="text-xl font-semibold">Account Information</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-6">
-            <AvatarUpload
-              currentAvatar={user.avatar}
-              fallbackName={user.fullName}
-              onUploadSuccess={(avatarUrl) => {
-                void updateProfile({ avatar: avatarUrl });
-              }}
-            />
+      
+      {/* Premium Profile Header Background */}
+      <div className="relative h-64 w-full bg-[#0d0d0d] overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-b from-green-500/10 via-transparent to-[#0a0a0a]" />
+        <div className="absolute top-0 right-0 w-96 h-96 bg-green-500/5 blur-[120px] rounded-full -mr-32 -mt-32" />
+        <div className="absolute bottom-0 left-0 w-96 h-96 bg-emerald-500/5 blur-[120px] rounded-full -ml-32 -mb-32" />
+      </div>
 
-            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
-              <div className="flex items-center gap-3 p-4 rounded-lg bg-[#0b1327] border border-white/10">
-                <User className="w-4 h-4 text-[#00ff88]" />
-                <div>
-                  <p className="text-xs text-gray-500 uppercase tracking-wider">Username</p>
-                  <p className="text-white font-medium">{user.fullName}</p>
+      <main className="container mx-auto px-6 -mt-32 pb-20 max-w-6xl relative z-10">
+        <div className="flex flex-col lg:flex-row gap-8">
+          
+          {/* Left Column: Avatar & Basic Info */}
+          <div className="lg:w-1/3 space-y-6">
+            <Card className="border-white/10 bg-[#0d0d0d]/80 backdrop-blur-xl shadow-2xl rounded-3xl overflow-hidden">
+              <CardContent className="p-8 space-y-8">
+                <div className="flex flex-col items-center text-center space-y-4">
+                  <AvatarUpload
+                    currentAvatar={user.avatar}
+                    fallbackName={user.fullName}
+                    onUploadSuccess={(avatarUrl) => {
+                      void updateProfile({ avatar: avatarUrl });
+                    }}
+                  />
+                  <div className="space-y-1">
+                    <h1 className="text-3xl font-black tracking-tight text-white">{user.fullName}</h1>
+                    <div className="flex items-center justify-center gap-2 text-green-500 text-xs font-bold uppercase tracking-widest">
+                      <Sparkles className="w-3 h-3" />
+                      {user.role}
+                    </div>
+                  </div>
                 </div>
-              </div>
-              <div className="flex items-center gap-3 p-4 rounded-lg bg-[#0b1327] border border-white/10">
-                <Mail className="w-4 h-4 text-[#00ff88]" />
-                <div>
-                  <p className="text-xs text-gray-500 uppercase tracking-wider">Email</p>
-                  <p className="text-white font-medium truncate">{user.email}</p>
+
+                <div className="space-y-4 pt-4 border-t border-white/5">
+                  <div className="flex items-center gap-3 text-gray-400 group hover:text-white transition-colors cursor-default">
+                    <Mail className="w-4 h-4 text-gray-600 group-hover:text-green-500" />
+                    <span className="text-sm truncate">{user.email}</span>
+                  </div>
+                  <div className="flex items-center gap-3 text-gray-400 cursor-default">
+                    <Calendar className="w-4 h-4 text-gray-600" />
+                    <span className="text-sm">Joined {new Date().toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}</span>
+                  </div>
                 </div>
-              </div>
-              <div className="flex items-center gap-3 p-4 rounded-lg bg-[#0b1327] border border-white/10">
-                <Shield className="w-4 h-4 text-[#00ff88]" />
-                <div>
-                  <p className="text-xs text-gray-500 uppercase tracking-wider">Role</p>
-                  <p className="text-white font-medium">{user.role}</p>
+
+                <div className="pt-4">
+                  <Link href="/settings" className="block w-full">
+                    <Button variant="outline" className="w-full bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20 text-white gap-2 h-11 rounded-xl">
+                      <Settings className="w-4 h-4" />
+                      Settings
+                    </Button>
+                  </Link>
                 </div>
+              </CardContent>
+            </Card>
+
+            {/* Quick Links / Badges Preview */}
+            <div className="p-6 rounded-3xl bg-green-500/5 border border-green-500/10 space-y-4">
+               <div className="flex items-center justify-between">
+                  <h3 className="text-[10px] font-black uppercase tracking-widest text-green-500/60">Academy Standing</h3>
+                  <Shield className="w-4 h-4 text-green-500/20" />
+               </div>
+               <div className="flex items-center gap-4">
+                  <div className="flex-1 h-2 bg-white/5 rounded-full overflow-hidden">
+                    <div className="h-full bg-green-500" style={{ width: '65%' }} />
+                  </div>
+                  <span className="text-xs font-bold text-white">Lvl 4</span>
+               </div>
+               <p className="text-[10px] text-gray-500 leading-relaxed font-medium">
+                  Complete 2 more modules to reach **Level 5** and unlock the Advanced Smart Contracts certification.
+               </p>
+            </div>
+          </div>
+
+          {/* Right Column: Stats & Tabs */}
+          <div className="lg:w-2/3 space-y-8">
+            <div className="flex items-center justify-between">
+               <Link href="/dashboard">
+                <Button variant="ghost" className="gap-2 text-gray-500 hover:text-white hover:bg-white/5 rounded-xl">
+                  <ArrowLeft className="w-4 h-4" />
+                  Dashboard
+                </Button>
+              </Link>
+              <div className="text-xs font-bold uppercase tracking-widest text-gray-600">
+                Member ID: <span className="text-gray-400 font-mono">#{user.id.substring(0, 8)}</span>
               </div>
             </div>
 
-            <Link href="/settings">
-              <Button variant="outline" className="gap-2">
-                <Settings className="w-4 h-4" />
-                Edit Profile Settings
-              </Button>
-            </Link>
-          </CardContent>
-        </Card>
+            <StatsSummary
+              xp={stats.experiencePoints}
+              streak={stats.streakDays}
+              badgesCount={stats.badgesCount}
+              certificatesCount={stats.certificatesCount}
+              completedCourses={userStats?.completedCourseCount ?? 0}
+            />
 
-        <div className="mb-8">
-          <StatsSummary
-            xp={stats.experiencePoints}
-            streak={stats.streakDays}
-            badgesCount={stats.badgesCount}
-            certificatesCount={stats.certificatesCount}
-            completedCourses={userStats?.completedCourseCount ?? 0}
-          />
+            <div className="relative group">
+               <div className="absolute -inset-1 bg-gradient-to-r from-green-500/10 to-emerald-500/10 rounded-[2rem] blur opacity-25" />
+               <div className="relative">
+                  <ProfileTabs
+                    badgesCount={userStats?.badgesCount ?? stats.badgesCount}
+                    lastActiveAt={userStats?.lastActiveAt ?? null}
+                  />
+               </div>
+            </div>
+          </div>
         </div>
-
-        <ProfileTabs
-          badgesCount={userStats?.badgesCount ?? stats.badgesCount}
-          lastActiveAt={userStats?.lastActiveAt ?? null}
-        />
       </main>
     </div>
   );
 }
+
diff --git a/frontend/app/verify-certificate/page.tsx b/frontend/app/verify-certificate/page.tsx
index 034a02d..1696ce5 100644
--- a/frontend/app/verify-certificate/page.tsx
+++ b/frontend/app/verify-certificate/page.tsx
@@ -1,166 +1,138 @@
 "use client";
 
 import { Header } from "@/components/header";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { useAuth } from "@/contexts/auth-context";
-import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import { ArrowLeft, FileCheck, CheckCircle2, XCircle } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useState, Suspense } from "react";
+import { useCertificateVerification } from "@/hooks/use-certificates";
+import { 
+  ShieldCheck, 
+  Search, 
+  ArrowRight,
+  Loader2,
+  Sparkles
+} from "lucide-react";
 import Link from "next/link";
-import { api } from "@/lib/api";
+import { VerificationResultView } from "@/components/certificates/verification-result";
 
-interface VerificationResult {
-  isValid: boolean;
-  message: string;
-  certificate?: {
-    recipientName: string;
-    recipientEmail: string;
-    courseOrProgram: string;
-    issuedAt: string;
-    expiresAt: string | null;
-    isValid: boolean;
-  };
-}
+function VerifyCertificateContent() {
+  const searchParams = useSearchParams();
+  const [inputValue, setInputValue] = useState(searchParams.get("hash") || "");
+  const [activeHash, setActiveHash] = useState(searchParams.get("hash") || "");
+  
+  const { data: result, isLoading: loading, isError, refetch } = useCertificateVerification(activeHash);
 
-export default function VerifyCertificatePage() {
-  const { isAuthenticated } = useAuth();
-  const router = useRouter();
-  const [hash, setHash] = useState("");
-  const [result, setResult] = useState<VerificationResult | null>(null);
-  const [loading, setLoading] = useState(false);
+  const handleVerify = (e?: React.FormEvent) => {
+    if (e) e.preventDefault();
+    if (!inputValue.trim()) return;
+    setActiveHash(inputValue.trim());
+  };
 
   useEffect(() => {
-    if (!isAuthenticated) {
-      router.push("/");
+    const autoHash = searchParams.get("hash");
+    if (autoHash) {
+      setInputValue(autoHash);
+      setActiveHash(autoHash);
     }
-  }, [isAuthenticated, router]);
-
-  const handleVerify = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!hash.trim()) return;
-    setLoading(true);
-    setResult(null);
-    try {
-      const data = await api.post<VerificationResult>("/certificates/verify", {
-        certificateHash: hash.trim(),
-      });
-      setResult(data);
-    } catch (err) {
-      setResult({
-        isValid: false,
-        message: err instanceof Error ? err.message : "Verification failed",
-      });
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  if (!isAuthenticated) return null;
+  }, [searchParams]);
 
   return (
-    <div className="min-h-screen bg-[#0a0a0a] text-white">
-      <Header />
-      <main className="container mx-auto px-6 py-12 max-w-2xl">
-        <div className="mb-8">
-          <Link href="/dashboard">
-            <Button variant="ghost" className="gap-2 text-gray-400 hover:text-white">
-              <ArrowLeft className="w-4 h-4" />
-              Back to Dashboard
-            </Button>
-          </Link>
-        </div>
-
-        <div className="mb-10">
-          <div className="flex items-center gap-3 mb-4">
-            <div className="p-2 rounded-lg bg-[#00ff88]/10 border border-[#00ff88]/20">
-              <FileCheck className="w-5 h-5 text-[#00ff88]" />
-            </div>
-            <h1 className="text-3xl md:text-4xl font-bold">Verify Certificate</h1>
-          </div>
-          <p className="text-gray-400">
-            Enter the certificate hash to verify its authenticity
-          </p>
+    <div className="max-w-4xl mx-auto space-y-12">
+      <div className="text-center space-y-6">
+        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-green-500/10 border border-green-500/20 text-green-400 text-xs font-bold uppercase tracking-widest mb-2">
+           <Sparkles className="w-3 h-3" />
+           Trustless Verification
         </div>
+        <h1 className="text-5xl md:text-6xl font-black tracking-tighter text-white">
+          Verify <span className="text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-emerald-600">Authenticity</span>
+        </h1>
+        <p className="text-gray-400 text-xl max-w-2xl mx-auto leading-relaxed">
+          Verify the integrity of certificates issued by ByteChain Academy. Enter a certificate hash to check its on-chain status.
+        </p>
+      </div>
 
-        <Card className="border-[#00ff88]/20 bg-gradient-to-br from-[#080e22] to-[#0a0a0a] mb-8">
-          <CardHeader>
-            <CardTitle>Certificate Hash</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <form onSubmit={handleVerify} className="space-y-4">
-              <Input
-                placeholder="Paste certificate hash (e.g. abc123...)"
-                value={hash}
-                onChange={(e) => setHash(e.target.value)}
-                className="font-mono text-sm"
-                disabled={loading}
-              />
-              <Button
-                type="submit"
-                disabled={!hash.trim() || loading}
-                className="gap-2 bg-gradient-to-r from-[#00ff88] to-[#00d88b] text-[#002E20]"
+      <div className="relative group">
+        <div className="absolute -inset-1 bg-gradient-to-r from-green-500/20 to-emerald-500/20 rounded-3xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
+        <Card className="relative border-white/10 bg-[#0d0d0d] shadow-2xl overflow-hidden rounded-2xl">
+          <CardContent className="p-2">
+            <form onSubmit={handleVerify} className="flex flex-col sm:flex-row gap-2">
+              <div className="relative flex-1">
+                <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
+                <Input
+                  placeholder="Enter certificate hash (e.g. 0x...)"
+                  value={inputValue}
+                  onChange={(e) => setInputValue(e.target.value)}
+                  className="pl-12 h-14 bg-transparent border-none text-white text-lg focus-visible:ring-0 placeholder:text-gray-600"
+                />
+              </div>
+              <Button 
+                type="submit" 
+                disabled={loading || !inputValue.trim()}
+                className="h-14 sm:h-auto sm:px-10 bg-green-500 hover:bg-green-400 text-[#002E20] font-black text-lg transition-all rounded-xl"
               >
                 {loading ? (
-                  <>
-                    <div className="w-4 h-4 border-2 border-[#002E20]/30 border-t-[#002E20] rounded-full animate-spin" />
-                    Verifying...
-                  </>
+                  <Loader2 className="w-6 h-6 animate-spin" />
                 ) : (
-                  <>
-                    <FileCheck className="w-4 h-4" />
-                    Verify
-                  </>
+                  "Verify Now"
                 )}
               </Button>
             </form>
           </CardContent>
         </Card>
+      </div>
 
-        {result && (
-          <Card
-            className={`border-2 ${
-              result.isValid ? "border-green-500/50" : "border-red-500/50"
-            } bg-gradient-to-br from-[#080e22] to-[#0a0a0a]`}
-          >
-            <CardContent className="pt-6">
-              <div className="flex items-start gap-4">
-                {result.isValid ? (
-                  <CheckCircle2 className="w-10 h-10 text-green-500 flex-shrink-0" />
-                ) : (
-                  <XCircle className="w-10 h-10 text-red-500 flex-shrink-0" />
-                )}
-                <div>
-                  <h3
-                    className={`font-semibold text-lg ${
-                      result.isValid ? "text-green-400" : "text-red-400"
-                    }`}
-                  >
-                    {result.isValid ? "Certificate Valid" : "Certificate Invalid"}
-                  </h3>
-                  <p className="text-gray-400 mt-2">{result.message}</p>
-                  {result.certificate && (
-                    <div className="mt-4 p-4 rounded-lg bg-white/5 space-y-2">
-                      <p>
-                        <span className="text-gray-500">Recipient:</span>{" "}
-                        {result.certificate.recipientName}
-                      </p>
-                      <p>
-                        <span className="text-gray-500">Course:</span>{" "}
-                        {result.certificate.courseOrProgram}
-                      </p>
-                      <p>
-                        <span className="text-gray-500">Issued:</span>{" "}
-                        {new Date(result.certificate.issuedAt).toLocaleDateString()}
-                      </p>
-                    </div>
-                  )}
-                </div>
+      {loading ? (
+        <div className="flex flex-col items-center justify-center py-20 space-y-4">
+           <div className="relative">
+              <div className="w-16 h-16 rounded-full border-t-2 border-green-500 animate-spin" />
+              <ShieldCheck className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-6 h-6 text-green-500/50" />
+           </div>
+           <p className="text-gray-500 font-medium animate-pulse uppercase tracking-[0.3em] text-xs">Querying Blockchain...</p>
+        </div>
+      ) : activeHash && result ? (
+        <VerificationResultView result={result} hash={activeHash} />
+      ) : null}
+
+      {!activeHash && (
+         <div className="grid grid-cols-1 md:grid-cols-3 gap-6 pt-8">
+            {[
+              { title: "Immutable", desc: "Forged on-chain, impossible to alter or counterfeit.", icon: ShieldCheck },
+              { title: "Public", desc: "Open to anyone with the hash. No account required.", icon: Search },
+              { title: "Instant", desc: "Zero-latency verification against our decentralized registry.", icon: Sparkles }
+            ].map((feature, i) => (
+              <div key={i} className="p-6 rounded-2xl bg-white/[0.02] border border-white/5 space-y-3">
+                 <feature.icon className="w-8 h-8 text-green-500/40" />
+                 <h4 className="font-bold text-white uppercase text-xs tracking-widest">{feature.title}</h4>
+                 <p className="text-gray-500 text-sm leading-relaxed">{feature.desc}</p>
               </div>
-            </CardContent>
-          </Card>
-        )}
+            ))}
+         </div>
+      )}
+
+      <div className="text-center pt-8">
+        <Link href="/dashboard" className="group text-gray-500 hover:text-white text-sm font-bold uppercase tracking-widest inline-flex items-center gap-2 transition-all">
+          Return to Dashboard
+          <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export default function VerifyCertificatePage() {
+  return (
+    <div className="min-h-screen bg-[#0a0a0a] text-white selection:bg-green-500/30">
+      <Header />
+      <main className="container mx-auto px-6 py-20">
+        <Suspense fallback={
+          <div className="flex items-center justify-center py-40">
+            <Loader2 className="w-10 h-10 text-green-500 animate-spin" />
+          </div>
+        }>
+          <VerifyCertificateContent />
+        </Suspense>
       </main>
     </div>
   );
diff --git a/frontend/components/certificates/certificate-card.tsx b/frontend/components/certificates/certificate-card.tsx
new file mode 100644
index 0000000..0b1d437
--- /dev/null
+++ b/frontend/components/certificates/certificate-card.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import { useState } from "react";
+import { 
+  ShieldCheck, 
+  Download, 
+  Share2, 
+  Check, 
+  ExternalLink,
+  Loader2,
+  Calendar,
+  Award
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { toast } from "sonner";
+import { Certificate } from "@/hooks/use-certificates";
+import { api } from "@/lib/api";
+
+interface CertificateCardProps {
+  certificate: Certificate;
+}
+
+export function CertificateCard({ certificate }: CertificateCardProps) {
+  const [isDownloading, setIsDownloading] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString("en-US", {
+      month: "long",
+      day: "numeric",
+      year: "numeric",
+    });
+  };
+
+  const handleDownload = async () => {
+    setIsDownloading(true);
+    try {
+      // Use the API base for downloading
+      const baseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";
+      const token = localStorage.getItem("auth_token");
+      
+      const res = await fetch(`${baseUrl}/api/v1/certificates/${certificate.id}/download`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (!res.ok) throw new Error("Failed to download certificate");
+
+      const blob = await res.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `Certificate-${certificate.courseName.replace(/\s+/g, "-")}.pdf`;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+      
+      toast.success("Certificate downloaded successfully!");
+    } catch (error) {
+      console.error("Download error:", error);
+      toast.error("Failed to download certificate. Please try again.");
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  const handleShare = () => {
+    const verificationUrl = `${window.location.origin}/verify-certificate?hash=${certificate.certificateHash}`;
+    navigator.clipboard.writeText(verificationUrl);
+    setCopied(true);
+    toast.success("Verification link copied to clipboard!");
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const isRevoked = certificate.status === "revoked";
+
+  return (
+    <Card className={`overflow-hidden border-white/10 bg-[#0d0d0d] transition-all hover:border-green-500/30 ${isRevoked ? 'opacity-75 grayscale' : ''}`}>
+      <div className="absolute top-0 left-0 w-1 h-full bg-gradient-to-b from-green-500 to-emerald-700" />
+      <CardContent className="p-6">
+        <div className="flex flex-col md:flex-row justify-between gap-6">
+          <div className="flex gap-4">
+            <div className="flex-shrink-0 w-12 h-12 rounded-xl bg-green-500/10 flex items-center justify-center border border-green-500/20">
+              <Award className="w-6 h-6 text-green-400" />
+            </div>
+            <div className="space-y-1">
+              <h3 className="text-xl font-bold text-white group-hover:text-green-400 transition-colors">
+                {certificate.courseName}
+              </h3>
+              <div className="flex flex-wrap items-center gap-4 text-sm text-gray-400">
+                <div className="flex items-center gap-1.5">
+                  <Calendar className="w-4 h-4" />
+                  {formatDate(certificate.issuedAt)}
+                </div>
+                <div className="flex items-center gap-1.5 font-mono text-xs bg-white/5 px-2 py-0.5 rounded border border-white/5">
+                  <span className="text-gray-500 uppercase">Hash:</span>
+                  <span className="text-green-400/80">{certificate.certificateHash.substring(0, 10)}...</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-wrap items-center gap-3 md:self-center">
+            <Button
+              variant="outline"
+              size="sm"
+              className="bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20 text-gray-300 gap-2"
+              onClick={handleShare}
+            >
+              {copied ? <Check className="w-4 h-4" /> : <Share2 className="w-4 h-4" />}
+              {copied ? "Copied" : "Share"}
+            </Button>
+            
+            <Button
+              variant="outline"
+              size="sm"
+              className="bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20 text-gray-300 gap-2"
+              onClick={handleDownload}
+              disabled={isDownloading || isRevoked}
+            >
+              {isDownloading ? (
+                <Loader2 className="w-4 h-4 animate-spin" />
+              ) : (
+                <Download className="w-4 h-4" />
+              )}
+              Download
+            </Button>
+
+            <Button
+              size="sm"
+              className="bg-green-500 hover:bg-green-400 text-[#002E20] font-bold gap-2"
+              asChild
+            >
+              <a href={`/verify-certificate?hash=${certificate.certificateHash}`}>
+                <ShieldCheck className="w-4 h-4" />
+                Verify
+              </a>
+            </Button>
+          </div>
+        </div>
+        
+        {isRevoked && (
+          <div className="mt-4 p-2 rounded bg-red-500/10 border border-red-500/20 text-red-400 text-xs font-bold uppercase tracking-wider text-center">
+            This certificate has been revoked
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/components/certificates/verification-result.tsx b/frontend/components/certificates/verification-result.tsx
new file mode 100644
index 0000000..60b09f6
--- /dev/null
+++ b/frontend/components/certificates/verification-result.tsx
@@ -0,0 +1,142 @@
+"use client";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { 
+  ShieldCheck, 
+  AlertTriangle, 
+  User, 
+  BookOpen, 
+  Calendar,
+  ExternalLink,
+  Award,
+  CheckCircle2
+} from "lucide-react";
+import { VerificationResult } from "@/hooks/use-certificates";
+
+interface VerificationResultViewProps {
+  result: VerificationResult;
+  hash: string;
+}
+
+export function VerificationResultView({ result, hash }: VerificationResultViewProps) {
+  if (!result.valid) {
+    return (
+      <Card className="border-red-500/30 bg-red-500/5 animate-in fade-in slide-in-from-top-4 duration-500">
+        <CardContent className="p-10 text-center space-y-6">
+          <div className="w-20 h-20 rounded-full bg-red-500/10 flex items-center justify-center mx-auto border border-red-500/20">
+            <AlertTriangle className="w-10 h-10 text-red-500" />
+          </div>
+          <div className="space-y-2">
+            <h3 className="text-2xl font-bold text-white">Certificate Not Found</h3>
+            <p className="text-gray-400 max-w-sm mx-auto leading-relaxed">
+              We couldn't find a valid certificate with the hash provided. This could mean the hash is incorrect or the certificate has not been issued yet.
+            </p>
+          </div>
+          <div className="pt-4 font-mono text-xs text-red-400/60 break-all">
+            Hash: {hash}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const isRevoked = result.revoked === true;
+
+  return (
+    <Card className={`relative overflow-hidden border-green-500/30 bg-[#0d0d0d] shadow-2xl shadow-green-500/10 animate-in fade-in zoom-in duration-500 ${isRevoked ? 'border-yellow-500/30 shadow-yellow-500/5' : ''}`}>
+      {/* Decorative Background Elements */}
+      <div className="absolute top-0 right-0 w-64 h-64 bg-green-500/5 blur-3xl rounded-full -mr-32 -mt-32" />
+      <div className="absolute bottom-0 left-0 w-64 h-64 bg-emerald-500/5 blur-3xl rounded-full -ml-32 -mb-32" />
+      
+      <div className={`px-6 py-4 flex items-center justify-between border-b ${isRevoked ? 'bg-yellow-500/10 border-yellow-500/20' : 'bg-green-500/10 border-green-500/20'}`}>
+        <div className={`flex items-center gap-2 font-bold uppercase tracking-widest text-xs ${isRevoked ? 'text-yellow-400' : 'text-green-400'}`}>
+          <ShieldCheck className="w-4 h-4" />
+          {isRevoked ? 'Revoked Certificate' : 'Authentic Certificate'}
+        </div>
+        <div className={`flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black uppercase ${isRevoked ? 'bg-yellow-500 text-black' : 'bg-green-500 text-[#002E20]'}`}>
+          {isRevoked ? 'Invalidated' : 'Verified ✓'}
+        </div>
+      </div>
+
+      <CardContent className="p-8 md:p-12 space-y-10 relative z-10">
+        <div className="flex flex-col items-center text-center space-y-4 mb-8">
+           <div className={`w-24 h-24 rounded-2xl flex items-center justify-center border-2 rotate-3 transform transition-transform hover:rotate-0 duration-300 ${isRevoked ? 'bg-yellow-500/5 border-yellow-500/20' : 'bg-green-500/5 border-green-500/20'}`}>
+              <Award className={`w-12 h-12 ${isRevoked ? 'text-yellow-500' : 'text-green-500'}`} />
+           </div>
+           <h2 className="text-3xl md:text-4xl font-black text-white tracking-tight">
+              Certificate of Completion
+           </h2>
+        </div>
+
+        <div className="grid gap-8 md:grid-cols-2">
+          <div className="space-y-2">
+            <div className="flex items-center gap-2 text-gray-500 text-[10px] uppercase tracking-[0.2em] font-bold">
+              <User className="w-3 h-3" />
+              Recipient Name
+            </div>
+            <p className="text-2xl font-bold text-white tracking-tight">
+              {result.recipientName || "Anonymous Learner"}
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex items-center gap-2 text-gray-500 text-[10px] uppercase tracking-[0.2em] font-bold">
+              <BookOpen className="w-3 h-3" />
+              Course Completed
+            </div>
+            <p className="text-2xl font-bold text-white tracking-tight">
+              {result.courseOrProgram || "Blockchain Specialization"}
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex items-center gap-2 text-gray-500 text-[10px] uppercase tracking-[0.2em] font-bold">
+              <Calendar className="w-3 h-3" />
+              Issue Date
+            </div>
+            <p className="text-xl font-semibold text-gray-200">
+              {result.issuedAt ? new Date(result.issuedAt).toLocaleDateString('en-US', {
+                month: 'long',
+                day: 'numeric',
+                year: 'numeric'
+              }) : "Unknown"}
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex items-center gap-2 text-gray-500 text-[10px] uppercase tracking-[0.2em] font-bold">
+              <CheckCircle2 className="w-3 h-3" />
+              Status
+            </div>
+            <p className={`text-xl font-bold ${isRevoked ? 'text-yellow-400' : 'text-green-400'}`}>
+              {isRevoked ? 'Revoked' : 'Active & Valid'}
+            </p>
+          </div>
+        </div>
+
+        <div className="pt-10 border-t border-white/5">
+          <div className="p-5 rounded-2xl bg-white/[0.02] border border-white/5 space-y-3">
+            <div className="flex items-center justify-between">
+              <span className="text-[10px] text-gray-500 uppercase tracking-widest font-bold">Blockchain Verification Hash</span>
+              <ShieldCheck className="w-4 h-4 text-green-500/20" />
+            </div>
+            <p className="text-xs font-mono text-gray-400 break-all leading-relaxed bg-black/20 p-3 rounded-lg border border-white/5">
+              {hash}
+            </p>
+            <div className="flex justify-end pt-2">
+               <a 
+                 href={`https://explorer.solana.com/address/${hash}`} 
+                 target="_blank" 
+                 rel="noopener noreferrer"
+                 className="flex items-center gap-1 text-[10px] text-green-500/60 hover:text-green-400 transition-colors font-bold uppercase tracking-tighter"
+               >
+                 View on Solana Explorer
+                 <ExternalLink className="w-3 h-3" />
+               </a>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/components/profile/my-certificates-content.tsx b/frontend/components/profile/my-certificates-content.tsx
index 7231c01..325dea6 100644
--- a/frontend/components/profile/my-certificates-content.tsx
+++ b/frontend/components/profile/my-certificates-content.tsx
@@ -1,94 +1,64 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { AlertTriangle } from "lucide-react";
-import { apiFetch } from "@/lib/api";
-import {
-  CertificateCard,
-  type Certificate,
-} from "@/components/MyCertificatesPage/Certificatecard";
-import { CertificateCardSkeleton } from "@/components/MyCertificatesPage/Certificatecardskeleton";
-import { CertificatesEmptyState } from "@/components/MyCertificatesPage/Certificatesemptystate";
-
-type FetchState = "loading" | "success" | "error";
-
-function getAuthToken(): string {
-  if (typeof window === "undefined") return "";
-  return localStorage.getItem("auth_token") ?? "";
-}
+import { AlertTriangle, Loader2, Award } from "lucide-react";
+import { CertificateCard } from "@/components/certificates/certificate-card";
+import { useCertificates } from "@/hooks/use-certificates";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
 
 export function MyCertificatesContent() {
-  const [fetchState, setFetchState] = useState<FetchState>("loading");
-  const [certificates, setCertificates] = useState<Certificate[]>([]);
-  const token = typeof window !== "undefined" ? localStorage.getItem("auth_token") ?? "" : "";
-
-  const fetchCertificates = async () => {
-    setFetchState("loading");
-    try {
-      // Try the primary endpoint
-      const data = await api.get<any[]>('/certificates/my');
-
-      if (!Array.isArray(data)) {
-        throw new Error("Invalid response format");
-      }
-
-      const mapped: Certificate[] = data.map((item) => ({
-        id: item.id || Math.random().toString(),
-        courseName: item.courseOrProgram || item.courseTitle || "Unknown Course",
-        issuedAt: item.issuedAt || new Date().toISOString(),
-        verificationCode: item.certificateHash || item.hash || "",
-        status: 'active',
-      }));
+  const { data: certificates, isLoading, isError, refetch } = useCertificates();
 
-      mapped.sort(
-        (a, b) =>
-          new Date(b.issuedAt).getTime() - new Date(a.issuedAt).getTime(),
-      );
-      setCertificates(mapped);
-      setFetchState("success");
-    } catch (err) {
-      console.error("Failed to fetch certificates:", err);
-      setFetchState("error");
-      setCertificates([]);
-    }
-  };
-
-  useEffect(() => {
-    void fetchCertificates();
-  }, []);
-
-  if (fetchState === "loading") {
+  if (isLoading) {
     return (
       <div className="flex flex-col gap-4">
-        <CertificateCardSkeleton />
-        <CertificateCardSkeleton />
+        {[1, 2].map((i) => (
+          <div key={i} className="h-32 rounded-xl bg-white/5 animate-pulse border border-white/10" />
+        ))}
       </div>
     );
   }
 
-  if (fetchState === "error") {
+  if (isError) {
     return (
-      <div className="flex flex-col items-center justify-center gap-4 py-16 text-center">
-        <AlertTriangle className="w-10 h-10 text-yellow-400" />
-        <p className="text-white font-semibold">Could not load your certificates.</p>
-        <button
-          onClick={() => void fetchCertificates()}
-          className="px-5 py-2 rounded-lg bg-green-500 hover:bg-green-400 text-white font-semibold text-sm transition-colors duration-150"
+      <div className="flex flex-col items-center justify-center gap-4 py-12 text-center bg-red-500/5 rounded-2xl border border-red-500/10">
+        <AlertTriangle className="w-10 h-10 text-red-500" />
+        <div className="space-y-1">
+          <p className="text-white font-bold">Could not load certificates</p>
+          <p className="text-gray-400 text-sm">Verify your connection and try again.</p>
+        </div>
+        <Button
+          onClick={() => void refetch()}
+          variant="outline"
+          className="border-white/10 hover:bg-white/5"
         >
           Try again
-        </button>
+        </Button>
       </div>
     );
   }
 
-  if (certificates.length === 0) {
-    return <CertificatesEmptyState />;
+  if (!certificates || certificates.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-center space-y-4 bg-white/5 rounded-2xl border border-white/5">
+        <Award className="w-12 h-12 text-gray-600" />
+        <div className="space-y-1">
+          <p className="text-white font-semibold">No certificates earned yet</p>
+          <p className="text-gray-500 text-sm">Complete courses to see them here.</p>
+        </div>
+        <Link href="/courses">
+          <Button variant="default" className="text-green-500 hover:text-green-400">
+            Browse Courses
+          </Button>
+        </Link>
+      </div>
+    );
   }
 
   return (
     <div className="flex flex-col gap-4">
       {certificates.map((cert) => (
-        <CertificateCard key={cert.id} certificate={cert} token={token} />
+        <CertificateCard key={cert.id} certificate={cert} />
       ))}
     </div>
   );
diff --git a/frontend/components/profile/profile-tabs.tsx b/frontend/components/profile/profile-tabs.tsx
index 85f2e69..21fe34d 100644
--- a/frontend/components/profile/profile-tabs.tsx
+++ b/frontend/components/profile/profile-tabs.tsx
@@ -1,9 +1,16 @@
 "use client";
 
 import { useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
 import { MyCertificatesContent } from "@/components/profile/my-certificates-content";
+import { 
+  Award, 
+  Activity, 
+  FileCheck, 
+  ChevronRight,
+  ShieldCheck,
+  Calendar
+} from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
 
 type TabKey = "certificates" | "badges" | "activity";
 
@@ -15,54 +22,94 @@ interface ProfileTabsProps {
 export function ProfileTabs({ badgesCount, lastActiveAt }: ProfileTabsProps) {
   const [activeTab, setActiveTab] = useState<TabKey>("certificates");
 
+  const tabs = [
+    { id: "certificates", label: "Certificates", icon: FileCheck },
+    { id: "badges", label: "Badges", icon: Award },
+    { id: "activity", label: "Activity", icon: Activity },
+  ] as const;
+
   return (
-    <Card className="border-white/10 bg-[#080e22]">
+    <Card className="border-white/10 bg-[#0d0d0d] rounded-3xl overflow-hidden shadow-2xl">
       <CardContent className="p-0">
-        <div className="border-b border-white/10 p-2 flex flex-wrap gap-2">
-          <Button
-            type="button"
-            size="sm"
-            variant={activeTab === "certificates" ? "default" : "ghost"}
-            onClick={() => setActiveTab("certificates")}
-          >
-            My Certificates
-          </Button>
-          <Button
-            type="button"
-            size="sm"
-            variant={activeTab === "badges" ? "default" : "ghost"}
-            onClick={() => setActiveTab("badges")}
-          >
-            My Badges
-          </Button>
-          <Button
-            type="button"
-            size="sm"
-            variant={activeTab === "activity" ? "default" : "ghost"}
-            onClick={() => setActiveTab("activity")}
-          >
-            Activity
-          </Button>
+        <div className="flex border-b border-white/5 p-1 bg-white/[0.02]">
+          {tabs.map((tab) => {
+            const Icon = tab.icon;
+            const isActive = activeTab === tab.id;
+            return (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={`flex-1 flex items-center justify-center gap-2 py-4 px-4 text-xs font-black uppercase tracking-widest transition-all relative ${
+                  isActive ? "text-green-500" : "text-gray-500 hover:text-gray-300"
+                }`}
+              >
+                <Icon className={`w-4 h-4 ${isActive ? "text-green-500" : "text-gray-600"}`} />
+                <span className="hidden sm:inline">{tab.label}</span>
+                {isActive && (
+                  <div className="absolute bottom-0 left-0 w-full h-0.5 bg-green-500 shadow-[0_0_10px_rgba(34,197,94,0.5)]" />
+                )}
+              </button>
+            );
+          })}
         </div>
 
-        <div className="p-6">
-          {activeTab === "certificates" && <MyCertificatesContent />}
+        <div className="p-6 md:p-8">
+          {activeTab === "certificates" && (
+             <div className="animate-in fade-in slide-in-from-bottom-2 duration-500">
+                <MyCertificatesContent />
+             </div>
+          )}
 
           {activeTab === "badges" && (
-            <div className="rounded-lg border border-white/10 bg-[#0b1327] p-5">
-              <p className="text-white font-medium mb-1">Badges earned</p>
-              <p className="text-gray-400 text-sm">You currently have {badgesCount} badges.</p>
+            <div className="animate-in fade-in slide-in-from-bottom-2 duration-500 space-y-6">
+              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
+                 {/* Mock Badges for Visual Excellence */}
+                 {[
+                   { name: "First Steps", color: "text-blue-400", bg: "bg-blue-400/10" },
+                   { name: "Quiz Master", color: "text-yellow-400", bg: "bg-yellow-400/10" },
+                   { name: "Code Ninja", color: "text-purple-400", bg: "bg-purple-400/10" },
+                   { name: "Explorer", color: "text-emerald-400", bg: "bg-emerald-400/10" },
+                 ].slice(0, Math.max(1, badgesCount)).map((badge, i) => (
+                    <div key={i} className="flex flex-col items-center gap-3 p-4 rounded-2xl bg-white/[0.02] border border-white/5 hover:border-white/10 transition-all group">
+                       <div className={`w-12 h-12 rounded-xl ${badge.bg} flex items-center justify-center border border-white/5 group-hover:scale-110 transition-transform`}>
+                          <Award className={`w-6 h-6 ${badge.color}`} />
+                       </div>
+                       <span className="text-[10px] font-bold text-gray-400 uppercase tracking-tighter text-center">{badge.name}</span>
+                    </div>
+                 ))}
+                 
+                 {badgesCount === 0 && (
+                   <div className="col-span-full py-12 text-center space-y-3">
+                      <Award className="w-12 h-12 text-gray-800 mx-auto" />
+                      <p className="text-gray-500 text-sm font-medium">No badges earned yet.</p>
+                   </div>
+                 )}
+              </div>
             </div>
           )}
 
           {activeTab === "activity" && (
-            <div className="rounded-lg border border-white/10 bg-[#0b1327] p-5">
-              <p className="text-white font-medium mb-1">Recent activity</p>
-              <p className="text-gray-400 text-sm">
-                {lastActiveAt
-                  ? `Last active on ${new Date(lastActiveAt).toLocaleString()}`
-                  : "No recent activity available yet."}
-              </p>
+            <div className="animate-in fade-in slide-in-from-bottom-2 duration-500 space-y-4">
+               {lastActiveAt ? (
+                 <div className="flex items-center gap-4 p-5 rounded-2xl bg-white/[0.02] border border-white/5 group hover:bg-white/[0.04] transition-all">
+                    <div className="w-10 h-10 rounded-full bg-green-500/10 flex items-center justify-center border border-green-500/20">
+                       <Activity className="w-5 h-5 text-green-500" />
+                    </div>
+                    <div className="flex-1">
+                       <p className="text-sm font-bold text-white uppercase tracking-tight">Last Session Active</p>
+                       <div className="flex items-center gap-2 text-xs text-gray-500 mt-1 font-medium">
+                          <Calendar className="w-3 h-3" />
+                          {new Date(lastActiveAt).toLocaleString()}
+                       </div>
+                    </div>
+                    <ChevronRight className="w-4 h-4 text-gray-700 group-hover:text-green-500 transition-colors" />
+                 </div>
+               ) : (
+                 <div className="py-12 text-center space-y-3">
+                    <ShieldCheck className="w-12 h-12 text-gray-800 mx-auto" />
+                    <p className="text-gray-500 text-sm font-medium">No recent activity detected.</p>
+                 </div>
+               )}
             </div>
           )}
         </div>
diff --git a/frontend/components/profile/stats-summary.tsx b/frontend/components/profile/stats-summary.tsx
index a0237d6..2b111be 100644
--- a/frontend/components/profile/stats-summary.tsx
+++ b/frontend/components/profile/stats-summary.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Card, CardContent } from "@/components/ui/card";
-import { Award, Flame, GraduationCap, Trophy, Zap } from "lucide-react";
+import { Award, Flame, GraduationCap, Trophy, Zap, Sparkles } from "lucide-react";
 
 interface StatsSummaryProps {
   xp: number;
@@ -20,59 +20,59 @@ export function StatsSummary({
 }: StatsSummaryProps) {
   const cards = [
     {
-      label: "XP",
+      label: "Experience",
       value: xp.toLocaleString(),
+      subValue: "XP Earned",
       icon: Zap,
-      valueClassName: "text-[#00ff88]",
-      iconClassName: "text-[#00ff88]",
-      borderClassName: "border-[#00ff88]/20",
+      color: "from-green-500 to-emerald-700",
+      iconColor: "text-green-400",
     },
     {
-      label: "Streak",
+      label: "Daily Streak",
       value: String(streak),
+      subValue: "Days Active",
       icon: Flame,
-      valueClassName: "text-orange-400",
-      iconClassName: "text-orange-400",
-      borderClassName: "border-orange-400/20",
+      color: "from-orange-500 to-red-600",
+      iconColor: "text-orange-400",
     },
     {
-      label: "Badges",
-      value: String(badgesCount),
-      icon: Award,
-      valueClassName: "text-white",
-      iconClassName: "text-[#00ff88]",
-      borderClassName: "border-white/10",
-    },
-    {
-      label: "Certificates",
+      label: "Certifications",
       value: String(certificatesCount),
+      subValue: "Verifiable",
       icon: GraduationCap,
-      valueClassName: "text-white",
-      iconClassName: "text-[#00ff88]",
-      borderClassName: "border-white/10",
+      color: "from-blue-500 to-indigo-600",
+      iconColor: "text-blue-400",
     },
     {
-      label: "Completed Courses",
-      value: String(completedCourses),
-      icon: Trophy,
-      valueClassName: "text-white",
-      iconClassName: "text-[#00ff88]",
-      borderClassName: "border-white/10",
-    },
+      label: "Achievements",
+      value: String(badgesCount),
+      subValue: "Badges",
+      icon: Award,
+      color: "from-purple-500 to-pink-600",
+      iconColor: "text-purple-400",
+    }
   ];
 
   return (
-    <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
       {cards.map((item) => {
         const Icon = item.icon;
         return (
-          <Card key={item.label} className={`bg-[#080e22] ${item.borderClassName}`}>
-            <CardContent className="p-4">
-              <div className="flex items-center justify-between mb-2">
-                <p className="text-xs text-gray-400 uppercase tracking-wider">{item.label}</p>
-                <Icon className={`w-4 h-4 ${item.iconClassName}`} />
+          <Card key={item.label} className="relative overflow-hidden border-white/5 bg-[#0d0d0d] transition-all hover:border-white/10 group">
+            <div className={`absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r ${item.color} opacity-30 group-hover:opacity-100 transition-opacity`} />
+            <CardContent className="p-5">
+              <div className="flex items-start justify-between">
+                <div className="space-y-1">
+                  <p className="text-[10px] text-gray-500 uppercase tracking-[0.2em] font-black">{item.label}</p>
+                  <div className="flex items-baseline gap-1">
+                    <p className="text-3xl font-black text-white tracking-tighter">{item.value}</p>
+                  </div>
+                  <p className="text-[10px] text-gray-600 font-bold uppercase">{item.subValue}</p>
+                </div>
+                <div className={`p-2.5 rounded-xl bg-white/5 border border-white/5 ${item.iconColor}`}>
+                  <Icon className="w-5 h-5" />
+                </div>
               </div>
-              <p className={`text-2xl font-bold ${item.valueClassName}`}>{item.value}</p>
             </CardContent>
           </Card>
         );
diff --git a/frontend/hooks/use-certificates.ts b/frontend/hooks/use-certificates.ts
new file mode 100644
index 0000000..aa56ed0
--- /dev/null
+++ b/frontend/hooks/use-certificates.ts
@@ -0,0 +1,62 @@
+import { useQuery } from "@tanstack/react-query";
+import { api } from "@/lib/api";
+
+export interface Certificate {
+  id: string;
+  courseName: string;
+  issuedAt: string;
+  certificateHash: string;
+  status: "active" | "revoked";
+}
+
+export function useCertificates() {
+  return useQuery({
+    queryKey: ["certificates", "my"],
+    queryFn: async () => {
+      const data = await api.get<any[]>("/certificates/my");
+      if (!Array.isArray(data)) throw new Error("Invalid response format");
+      
+      return data.map((cert) => ({
+        id: cert.id,
+        courseName: cert.courseOrProgram || "Unknown Course",
+        issuedAt: cert.issuedAt || cert.createdAt,
+        certificateHash: cert.certificateHash || "",
+        status: (cert.isValid === false ? "revoked" : "active") as "active" | "revoked",
+      })) as Certificate[];
+    },
+    retry: 1,
+  });
+}
+
+export interface VerificationResult {
+  valid: boolean;
+  recipientName?: string;
+  courseOrProgram?: string;
+  issuedAt?: string;
+  revoked?: boolean;
+}
+
+export function useCertificateVerification(hash: string) {
+  return useQuery({
+    queryKey: ["certificates", "verify", hash],
+    queryFn: async () => {
+      if (!hash) return null;
+      try {
+        const res = await api.get<any>(`/certificates/verify/${hash}`);
+        // Map backend CertificateVerificationResultDto to our VerificationResult
+        return {
+          valid: res.isValid,
+          recipientName: res.certificate?.recipientName,
+          courseOrProgram: res.certificate?.courseOrProgram,
+          issuedAt: res.certificate?.issuedAt,
+          revoked: res.certificate?.status === 'revoked'
+        } as VerificationResult;
+      } catch (err) {
+        console.error("Verification error:", err);
+        return { valid: false } as VerificationResult;
+      }
+    },
+    enabled: !!hash,
+    retry: false,
+  });
+}