diff --git a/components/crowdfunding/CampaignStatusBanner.tsx b/components/crowdfunding/CampaignStatusBanner.tsx
index ac7dd356..b90cd2c3 100644
--- a/components/crowdfunding/CampaignStatusBanner.tsx
+++ b/components/crowdfunding/CampaignStatusBanner.tsx
@@ -16,6 +16,7 @@ import {
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { toast } from 'sonner';
+import { extractApiErrorMessage } from '@/lib/api/api';
 import {
   useWithdrawSubmission,
   usePublishCampaign,
@@ -193,11 +194,9 @@ export function CampaignStatusBanner({ campaign, onStatusChange }: Props) {
         setLaunchOpen(false);
         onStatusChange?.();
       },
-      onError: err =>
+      onError: (err: unknown) =>
         toast.error(
-          err instanceof Error
-            ? err.message
-            : 'Failed to launch. Please try again.'
+          extractApiErrorMessage(err, 'Failed to launch. Please try again.')
         ),
     });
   };
@@ -286,8 +285,13 @@ export function CampaignStatusBanner({ campaign, onStatusChange }: Props) {
                   toast.success('Submission withdrawn.');
                   onStatusChange?.();
                 },
-                onError: () =>
-                  toast.error('Something went wrong. Please try again.'),
+                onError: (err: unknown) =>
+                  toast.error(
+                    extractApiErrorMessage(
+                      err,
+                      'Something went wrong. Please try again.'
+                    )
+                  ),
               })
             }
             className='text-zinc-400 hover:text-white'
diff --git a/components/crowdfunding/ContributeSheet.tsx b/components/crowdfunding/ContributeSheet.tsx
index 2af235fb..1558d9fb 100644
--- a/components/crowdfunding/ContributeSheet.tsx
+++ b/components/crowdfunding/ContributeSheet.tsx
@@ -16,6 +16,7 @@ import { Switch } from '@/components/ui/switch';
 import { Loader2, Wallet, Zap, CheckCircle2 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { toast } from 'sonner';
+import { extractApiErrorMessage } from '@/lib/api/api';
 import { useQueryClient } from '@tanstack/react-query';
 import {
   contributeV2,
@@ -118,9 +119,7 @@ export function ContributeSheet({
       setDone(true);
     } catch (err) {
       toast.error(
-        err instanceof Error
-          ? err.message
-          : 'Contribution failed. Please try again.'
+        extractApiErrorMessage(err, 'Contribution failed. Please try again.')
       );
     } finally {
       setSubmitting(false);
diff --git a/components/crowdfunding/VotePanel.tsx b/components/crowdfunding/VotePanel.tsx
index 92ea7446..177c7fac 100644
--- a/components/crowdfunding/VotePanel.tsx
+++ b/components/crowdfunding/VotePanel.tsx
@@ -2,6 +2,7 @@
 
 import { ThumbsUp, ThumbsDown } from 'lucide-react';
 import { toast } from 'sonner';
+import { extractApiErrorMessage } from '@/lib/api/api';
 
 import { useCastVote, useMyVote } from '@/features/crowdfunding';
 import type { Crowdfunding } from '@/features/projects/types';
@@ -31,11 +32,12 @@ export function VotePanel({ campaign }: { campaign: Crowdfunding }) {
           toast.success(
             choice === 'UP' ? 'Thanks, your vote is in.' : 'Your vote is in.'
           ),
-        onError: err =>
+        onError: (err: unknown) =>
           toast.error(
-            err instanceof Error
-              ? err.message
-              : 'Could not record your vote. Make sure you are signed in.'
+            extractApiErrorMessage(
+              err,
+              'Could not record your vote. Make sure you are signed in.'
+            )
           ),
       }
     );
diff --git a/components/crowdfunding/new/NewCampaignSidebar.tsx b/components/crowdfunding/new/NewCampaignSidebar.tsx
index d16db567..54faf52a 100644
--- a/components/crowdfunding/new/NewCampaignSidebar.tsx
+++ b/components/crowdfunding/new/NewCampaignSidebar.tsx
@@ -12,14 +12,20 @@ interface NewCampaignSidebarProps {
   activeStep: number;
   completedSteps: Set<number>;
   campaignId?: string;
+  onStepClick?: (step: number) => void;
 }
 
 interface SidebarContentProps {
   activeStep: number;
   completedSteps: Set<number>;
+  onStepClick?: (step: number) => void;
 }
 
-function SidebarContent({ activeStep, completedSteps }: SidebarContentProps) {
+function SidebarContent({
+  activeStep,
+  completedSteps,
+  onStepClick,
+}: SidebarContentProps) {
   return (
     <nav className='flex h-full flex-col overflow-y-auto px-4 py-6'>
       <div className='mb-8'>
@@ -45,6 +51,9 @@ function SidebarContent({ activeStep, completedSteps }: SidebarContentProps) {
           return (
             <div
               key={step.key}
+              onClick={() => {
+                if (!isLocked && !isActive) onStepClick?.(stepNumber);
+              }}
               className={cn(
                 'group relative flex items-center gap-3 rounded-xl px-3 py-3 text-sm font-medium transition-all',
                 isActive
@@ -136,6 +145,7 @@ function SidebarContent({ activeStep, completedSteps }: SidebarContentProps) {
 export default function NewCampaignSidebar({
   activeStep,
   completedSteps,
+  onStepClick,
 }: NewCampaignSidebarProps) {
   const { height } = useWindowSize();
   const headerHeight = 64;
@@ -157,6 +167,7 @@ export default function NewCampaignSidebar({
             <SidebarContent
               activeStep={activeStep}
               completedSteps={completedSteps}
+              onStepClick={onStepClick}
             />
           </SheetContent>
         </Sheet>
diff --git a/components/crowdfunding/new/NewCampaignWizard.tsx b/components/crowdfunding/new/NewCampaignWizard.tsx
index a4891c12..d68c49a2 100644
--- a/components/crowdfunding/new/NewCampaignWizard.tsx
+++ b/components/crowdfunding/new/NewCampaignWizard.tsx
@@ -23,6 +23,7 @@ import {
   updateCrowdfundingProject,
   submitCampaignForReview,
 } from '@/features/projects/api';
+import { extractApiErrorMessage } from '@/lib/api/api';
 
 export interface WizardMilestone {
   title: string;
@@ -83,14 +84,14 @@ function validateStep(step: number, d: CampaignWizardData): string | null {
     case 1:
       if (!d.title.trim() || d.title.length < 3)
         return 'Campaign title is required (min 3 characters)';
-      if (!d.tagline.trim() || d.tagline.length < 10)
-        return 'Tagline is required (min 10 characters)';
       if (!d.category) return 'Please select a category';
       if (!d.logoUrl) return 'Please upload a campaign logo before continuing';
       return null;
     case 2:
+      if (!d.tagline.trim() || d.tagline.length < 10)
+        return 'Vision is required (min 10 characters)';
       if (!d.vision.trim() || d.vision.length < 50)
-        return 'Project story must be at least 50 characters';
+        return 'Project description must be at least 50 characters';
       return null;
     case 3:
       if (!d.fundingGoal || d.fundingGoal < 1)
@@ -144,13 +145,18 @@ function buildDraftPayload(data: CampaignWizardData): Record<string, unknown> {
   if (data.fundingGoal >= 1) payload.fundingAmount = data.fundingGoal;
   if (data.githubUrl) payload.githubUrl = data.githubUrl;
   if (data.gitlabUrl) payload.gitlabUrl = data.gitlabUrl;
-  if (data.websiteUrl) {
-    payload.websiteUrl = data.websiteUrl;
-    payload.projectWebsite = data.websiteUrl;
-  }
+  if (data.websiteUrl) payload.projectWebsite = data.websiteUrl;
   if (data.demoVideoUrl) payload.demoVideo = data.demoVideoUrl;
 
-  const socialLinks = data.socialLinks.filter(s => s.platform && s.url);
+  // Deduplicate by platform so @ArrayUnique never fires.
+  const seen = new Set<string>();
+  const socialLinks = data.socialLinks
+    .filter(s => s.platform && s.url)
+    .filter(s => {
+      if (seen.has(s.platform)) return false;
+      seen.add(s.platform);
+      return true;
+    });
   if (socialLinks.length) payload.socialLinks = socialLinks;
 
   const team = data.teamMembers
@@ -305,8 +311,13 @@ export default function NewCampaignWizard() {
         setCompletedSteps(done);
         setActiveStep(landing);
       })
-      .catch(() =>
-        toast.error('Could not load your draft. Starting a fresh form.')
+      .catch((err: unknown) =>
+        toast.error(
+          extractApiErrorMessage(
+            err,
+            'Could not load your draft. Starting a fresh form.'
+          )
+        )
       )
       .finally(() => setIsHydrating(false));
   }, []);
@@ -359,8 +370,13 @@ export default function NewCampaignWizard() {
       await persistDraft(data);
       markStepDone(activeStep);
       setActiveStep(s => s + 1);
-    } catch {
-      toast.error('Could not save your progress. Please try again.');
+    } catch (err) {
+      toast.error(
+        extractApiErrorMessage(
+          err,
+          'Could not save your progress. Please try again.'
+        )
+      );
     } finally {
       setIsSaving(false);
     }
@@ -384,8 +400,13 @@ export default function NewCampaignWizard() {
         toast.success('Campaign submitted for review!');
       }
       router.push(`/me/crowdfunding/${id}`);
-    } catch {
-      toast.error('Failed to submit for review. Please try again.');
+    } catch (err) {
+      toast.error(
+        extractApiErrorMessage(
+          err,
+          'Failed to submit for review. Please try again.'
+        )
+      );
     } finally {
       setIsSubmitting(false);
     }
@@ -440,6 +461,7 @@ export default function NewCampaignWizard() {
         activeStep={activeStep}
         completedSteps={completedSteps}
         campaignId={campaignId}
+        onStepClick={setActiveStep}
       />
 
       <WizardHelpButton activeStep={activeStep} />
diff --git a/components/crowdfunding/new/steps/BasicsStep.tsx b/components/crowdfunding/new/steps/BasicsStep.tsx
index fb942ee0..4dd2c43b 100644
--- a/components/crowdfunding/new/steps/BasicsStep.tsx
+++ b/components/crowdfunding/new/steps/BasicsStep.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import {
@@ -10,19 +10,20 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { Upload, X } from 'lucide-react';
+import { Upload, X, Loader2, ImageIcon, LayoutTemplate } from 'lucide-react';
 import { uploadService } from '@/lib/api/upload';
 import { toast } from 'sonner';
 import type { CampaignWizardData } from '../NewCampaignWizard';
 
 const CATEGORIES = [
   'DeFi',
+  'Payments',
   'Infrastructure',
+  'Developer Tooling',
   'NFT',
   'Gaming',
   'DAO',
   'Social',
-  'Developer Tooling',
   'Education',
   'Identity',
   'Other',
@@ -36,19 +37,23 @@ interface Props {
 function ImageUploadField({
   label,
   hint,
+  required,
   value,
   onChange,
   aspectClass,
 }: {
   label: string;
   hint: string;
+  required?: boolean;
   value: string;
   onChange: (url: string) => void;
   aspectClass: string;
 }) {
   const inputRef = useRef<HTMLInputElement>(null);
+  const [isUploading, setIsUploading] = useState(false);
 
   const handleFile = async (file: File) => {
+    setIsUploading(true);
     try {
       const res = await uploadService.uploadSingle(file, {
         folder: 'campaigns',
@@ -56,19 +61,32 @@ function ImageUploadField({
       onChange(res.data.secure_url);
     } catch {
       toast.error('Upload failed. Please try again.');
+    } finally {
+      setIsUploading(false);
     }
   };
 
   return (
     <div className='space-y-1.5'>
-      <Label className='text-sm font-medium text-zinc-300'>{label}</Label>
-      <p className='text-xs text-zinc-600'>{hint}</p>
+      <Label className='text-sm font-medium text-zinc-300'>
+        {label}
+        {required && <span className='ml-0.5 text-red-400'>*</span>}
+      </Label>
+      <p className='text-xs text-zinc-500'>{hint}</p>
 
       <div
-        className={`relative flex cursor-pointer items-center justify-center overflow-hidden rounded-xl border-2 border-dashed border-zinc-800 bg-zinc-950 transition hover:border-zinc-600 ${aspectClass}`}
-        onClick={() => inputRef.current?.click()}
+        className={`relative flex cursor-pointer items-center justify-center overflow-hidden rounded-xl border-2 border-dashed transition ${
+          isUploading
+            ? 'border-primary/40 bg-primary/5 cursor-not-allowed'
+            : value
+              ? 'border-zinc-700 bg-zinc-950 hover:border-zinc-500'
+              : 'border-zinc-800 bg-zinc-950 hover:border-zinc-600'
+        } ${aspectClass}`}
+        onClick={() => {
+          if (!isUploading) inputRef.current?.click();
+        }}
       >
-        {value ? (
+        {value && !isUploading ? (
           <>
             <img
               src={value}
@@ -81,13 +99,18 @@ function ImageUploadField({
                 e.stopPropagation();
                 onChange('');
               }}
-              className='absolute top-2 right-2 rounded-full bg-black/60 p-1 text-white hover:bg-black'
+              className='absolute top-2 right-2 rounded-full bg-black/70 p-1 text-white transition hover:bg-black'
             >
               <X className='h-3.5 w-3.5' />
             </button>
           </>
+        ) : isUploading ? (
+          <div className='text-primary flex flex-col items-center gap-2'>
+            <Loader2 className='h-6 w-6 animate-spin' />
+            <span className='text-xs font-medium'>Uploading...</span>
+          </div>
         ) : (
-          <div className='flex flex-col items-center gap-2 text-zinc-600'>
+          <div className='flex flex-col items-center gap-2 text-zinc-500'>
             <Upload className='h-6 w-6' />
             <span className='text-xs'>Click to upload</span>
           </div>
@@ -102,6 +125,7 @@ function ImageUploadField({
         onChange={e => {
           const file = e.target.files?.[0];
           if (file) handleFile(file);
+          e.target.value = '';
         }}
       />
     </div>
@@ -110,73 +134,80 @@ function ImageUploadField({
 
 export default function BasicsStep({ data, onChange }: Props) {
   return (
-    <div className='space-y-6'>
-      <div className='space-y-1.5'>
-        <Label htmlFor='title' className='text-sm font-medium text-zinc-300'>
-          Campaign title <span className='text-red-400'>*</span>
-        </Label>
-        <Input
-          id='title'
-          placeholder='Give your campaign a clear, memorable name'
-          value={data.title}
-          onChange={e => onChange({ title: e.target.value })}
-          className='border-zinc-800 bg-zinc-950 text-white placeholder:text-zinc-600'
-        />
-      </div>
+    <div className='space-y-8'>
+      {/* Identity */}
+      <section className='space-y-5'>
+        <div className='flex items-center gap-2 border-b border-zinc-800/60 pb-3'>
+          <LayoutTemplate className='h-4 w-4 text-zinc-500' />
+          <span className='text-xs font-semibold tracking-wider text-zinc-500 uppercase'>
+            Identity
+          </span>
+        </div>
 
-      <div className='space-y-1.5'>
-        <Label htmlFor='tagline' className='text-sm font-medium text-zinc-300'>
-          Tagline
-        </Label>
-        <Input
-          id='tagline'
-          placeholder='One sentence that captures your project (max 120 chars)'
-          maxLength={120}
-          value={data.tagline}
-          onChange={e => onChange({ tagline: e.target.value })}
-          className='border-zinc-800 bg-zinc-950 text-white placeholder:text-zinc-600'
-        />
-        <p className='text-right text-xs text-zinc-600'>
-          {data.tagline.length}/120
-        </p>
-      </div>
+        <div className='space-y-1.5'>
+          <Label htmlFor='title' className='text-sm font-medium text-zinc-300'>
+            Campaign title <span className='text-red-400'>*</span>
+          </Label>
+          <Input
+            id='title'
+            placeholder='Give your campaign a clear, memorable name'
+            value={data.title}
+            onChange={e => onChange({ title: e.target.value })}
+            className='focus:border-primary/50 border-zinc-800 bg-zinc-950 text-white placeholder:text-zinc-600'
+          />
+          <p className='text-xs text-zinc-600'>Min 3 characters</p>
+        </div>
 
-      <div className='space-y-1.5'>
-        <Label className='text-sm font-medium text-zinc-300'>
-          Category <span className='text-red-400'>*</span>
-        </Label>
-        <Select
-          value={data.category}
-          onValueChange={v => onChange({ category: v })}
-        >
-          <SelectTrigger className='border-zinc-800 bg-zinc-950 text-white'>
-            <SelectValue placeholder='Select a category' />
-          </SelectTrigger>
-          <SelectContent className='border-zinc-800 bg-zinc-950 text-white'>
-            {CATEGORIES.map(c => (
-              <SelectItem key={c} value={c}>
-                {c}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
+        <div className='space-y-1.5'>
+          <Label className='text-sm font-medium text-zinc-300'>
+            Category <span className='text-red-400'>*</span>
+          </Label>
+          <Select
+            value={data.category}
+            onValueChange={v => onChange({ category: v })}
+          >
+            <SelectTrigger className='border-zinc-800 bg-zinc-950 text-white'>
+              <SelectValue placeholder='Select a category' />
+            </SelectTrigger>
+            <SelectContent className='border-zinc-800 bg-zinc-950 text-white'>
+              {CATEGORIES.map(c => (
+                <SelectItem key={c} value={c}>
+                  {c}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </section>
 
-      <ImageUploadField
-        label='Logo'
-        hint='Square image, min 200×200px. Shown in campaign cards.'
-        value={data.logoUrl}
-        onChange={url => onChange({ logoUrl: url })}
-        aspectClass='h-32 w-32'
-      />
+      {/* Media */}
+      <section className='space-y-5'>
+        <div className='flex items-center gap-2 border-b border-zinc-800/60 pb-3'>
+          <ImageIcon className='h-4 w-4 text-zinc-500' />
+          <span className='text-xs font-semibold tracking-wider text-zinc-500 uppercase'>
+            Media
+          </span>
+        </div>
 
-      <ImageUploadField
-        label='Banner'
-        hint='Wide image, min 1200×400px. Shown at the top of your campaign page.'
-        value={data.bannerUrl}
-        onChange={url => onChange({ bannerUrl: url })}
-        aspectClass='h-40 w-full'
-      />
+        <div className='grid grid-cols-1 gap-6 sm:grid-cols-[auto_1fr]'>
+          <ImageUploadField
+            label='Logo'
+            required
+            hint='Square, min 200×200px'
+            value={data.logoUrl}
+            onChange={url => onChange({ logoUrl: url })}
+            aspectClass='h-32 w-32'
+          />
+
+          <ImageUploadField
+            label='Banner'
+            hint='Wide image, min 1200×400px (optional)'
+            value={data.bannerUrl}
+            onChange={url => onChange({ bannerUrl: url })}
+            aspectClass='h-32 w-full'
+          />
+        </div>
+      </section>
     </div>
   );
 }
diff --git a/components/crowdfunding/new/steps/LinksStep.tsx b/components/crowdfunding/new/steps/LinksStep.tsx
index 307e1e0b..2af24b7a 100644
--- a/components/crowdfunding/new/steps/LinksStep.tsx
+++ b/components/crowdfunding/new/steps/LinksStep.tsx
@@ -3,9 +3,47 @@
 import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
-import { Plus, Trash2, Github, Globe, Video, Twitter } from 'lucide-react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Plus,
+  Trash2,
+  Github,
+  Globe,
+  Video,
+  Twitter,
+  Link2,
+  Share2,
+  MessageCircle,
+  Send,
+  Code2,
+} from 'lucide-react';
 import type { CampaignWizardData } from '../NewCampaignWizard';
 
+const SOCIAL_PLATFORMS = [
+  { value: 'twitter', label: 'Twitter / X', Icon: Twitter },
+  { value: 'linkedin', label: 'LinkedIn', Icon: Share2 },
+  { value: 'discord', label: 'Discord', Icon: MessageCircle },
+  { value: 'telegram', label: 'Telegram', Icon: Send },
+  { value: 'youtube', label: 'YouTube', Icon: Video },
+  { value: 'facebook', label: 'Facebook', Icon: Globe },
+  { value: 'instagram', label: 'Instagram', Icon: Globe },
+  { value: 'other', label: 'Other', Icon: Link2 },
+] as const;
+
+type Platform = (typeof SOCIAL_PLATFORMS)[number]['value'];
+
+function platformIcon(platform: string) {
+  const found = SOCIAL_PLATFORMS.find(p => p.value === platform);
+  const Icon = found?.Icon ?? Link2;
+  return <Icon className='h-4 w-4 text-zinc-500' />;
+}
+
 interface Props {
   data: CampaignWizardData;
   onChange: (patch: Partial<CampaignWizardData>) => void;
@@ -35,11 +73,11 @@ function UrlField({
         <Icon className='absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-zinc-500' />
         <Input
           id={id}
-          type='url'
+          type='text'
           placeholder={placeholder}
           value={value}
           onChange={e => onChange(e.target.value)}
-          className='border-zinc-800 bg-zinc-950 pl-9 text-white placeholder:text-zinc-600'
+          className='focus:border-primary/50 border-zinc-800 bg-zinc-950 pl-9 text-white placeholder:text-zinc-600'
         />
       </div>
     </div>
@@ -48,9 +86,13 @@ function UrlField({
 
 export default function LinksStep({ data, onChange }: Props) {
   const social = data.socialLinks;
+  const usedPlatforms = new Set(social.map(s => s.platform));
 
   const addSocial = () => {
-    onChange({ socialLinks: [...social, { platform: 'twitter', url: '' }] });
+    const nextPlatform =
+      (SOCIAL_PLATFORMS.find(p => !usedPlatforms.has(p.value))
+        ?.value as Platform) ?? 'other';
+    onChange({ socialLinks: [...social, { platform: nextPlatform, url: '' }] });
   };
 
   const removeSocial = (idx: number) => {
@@ -67,85 +109,154 @@ export default function LinksStep({ data, onChange }: Props) {
   };
 
   return (
-    <div className='space-y-6'>
-      <UrlField
-        id='githubUrl'
-        label='GitHub / repository'
-        placeholder='https://github.com/yourorg/yourrepo'
-        value={data.githubUrl}
-        onChange={v => onChange({ githubUrl: v })}
-        icon={Github}
-      />
-
-      <UrlField
-        id='gitlabUrl'
-        label='GitLab (optional)'
-        placeholder='https://gitlab.com/...'
-        value={data.gitlabUrl}
-        onChange={v => onChange({ gitlabUrl: v })}
-        icon={Github}
-      />
-
-      <UrlField
-        id='websiteUrl'
-        label='Website'
-        placeholder='https://yourproject.xyz'
-        value={data.websiteUrl}
-        onChange={v => onChange({ websiteUrl: v })}
-        icon={Globe}
-      />
-
-      <UrlField
-        id='demoVideoUrl'
-        label='Demo video URL'
-        placeholder='https://youtube.com/...'
-        value={data.demoVideoUrl}
-        onChange={v => onChange({ demoVideoUrl: v })}
-        icon={Video}
-      />
-
-      <div className='space-y-3 border-t border-zinc-800/50 pt-6'>
-        <div className='flex items-center justify-between'>
-          <div>
-            <p className='text-sm font-medium text-zinc-300'>Social links</p>
-            <p className='text-xs text-zinc-600'>Twitter/X, Discord, etc.</p>
-          </div>
-          <Button
+    <div className='space-y-8'>
+      {/* Project links */}
+      <section className='space-y-5'>
+        <div className='flex items-center gap-2 border-b border-zinc-800/60 pb-3'>
+          <Code2 className='h-4 w-4 text-zinc-500' />
+          <span className='text-xs font-semibold tracking-wider text-zinc-500 uppercase'>
+            Project links
+          </span>
+          <span className='ml-auto text-xs text-zinc-600'>All optional</span>
+        </div>
+
+        <UrlField
+          id='githubUrl'
+          label='GitHub repository'
+          placeholder='https://github.com/yourorg/yourrepo'
+          value={data.githubUrl}
+          onChange={v => onChange({ githubUrl: v })}
+          icon={Github}
+        />
+
+        <UrlField
+          id='gitlabUrl'
+          label='GitLab'
+          placeholder='https://gitlab.com/...'
+          value={data.gitlabUrl}
+          onChange={v => onChange({ gitlabUrl: v })}
+          icon={Github}
+        />
+
+        <UrlField
+          id='websiteUrl'
+          label='Project website'
+          placeholder='https://yourproject.xyz'
+          value={data.websiteUrl}
+          onChange={v => onChange({ websiteUrl: v })}
+          icon={Globe}
+        />
+
+        <UrlField
+          id='demoVideoUrl'
+          label='Demo video'
+          placeholder='https://youtube.com/watch?v=...'
+          value={data.demoVideoUrl}
+          onChange={v => onChange({ demoVideoUrl: v })}
+          icon={Video}
+        />
+      </section>
+
+      {/* Social links */}
+      <section className='space-y-4'>
+        <div className='flex items-center gap-2 border-b border-zinc-800/60 pb-3'>
+          <Share2 className='h-4 w-4 text-zinc-500' />
+          <span className='text-xs font-semibold tracking-wider text-zinc-500 uppercase'>
+            Social links
+          </span>
+          <span className='ml-auto text-xs text-zinc-600'>Optional</span>
+        </div>
+
+        {social.length === 0 ? (
+          <button
             type='button'
-            variant='outline'
-            size='sm'
             onClick={addSocial}
-            className='gap-2 border-zinc-700 text-zinc-300 hover:bg-zinc-800 hover:text-white'
+            className='group hover:border-primary/40 flex w-full flex-col items-center gap-2 rounded-xl border border-dashed border-zinc-800 bg-zinc-950/40 py-6 text-center transition hover:bg-zinc-900/30'
           >
-            <Plus className='h-3.5 w-3.5' />
-            Add
-          </Button>
-        </div>
-
-        {social.map((s, idx) => (
-          <div key={idx} className='flex items-center gap-2'>
-            <div className='relative flex-1'>
-              <Twitter className='absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-zinc-500' />
-              <Input
-                type='url'
-                placeholder='https://twitter.com/...'
-                value={s.url}
-                onChange={e => updateSocial(idx, { url: e.target.value })}
-                className='border-zinc-800 bg-zinc-950 pl-9 text-white placeholder:text-zinc-600'
-              />
+            <div className='group-hover:bg-primary/10 group-hover:text-primary flex h-9 w-9 items-center justify-center rounded-full bg-zinc-900 text-zinc-500 transition'>
+              <Plus className='h-4 w-4' />
             </div>
-            <Button
-              type='button'
-              variant='ghost'
-              size='icon'
-              onClick={() => removeSocial(idx)}
-              className='h-9 w-9 text-zinc-600 hover:text-red-400'
-            >
-              <Trash2 className='h-4 w-4' />
-            </Button>
+            <span className='text-sm text-zinc-400'>Add social link</span>
+            <span className='text-xs text-zinc-600'>
+              Twitter/X, Discord, LinkedIn, etc.
+            </span>
+          </button>
+        ) : (
+          <div className='space-y-3'>
+            {social.map((s, idx) => {
+              const isDuplicate =
+                social.findIndex(x => x.platform === s.platform) !== idx;
+              return (
+                <div key={idx} className='space-y-1'>
+                  <div className='flex items-center gap-2'>
+                    <Select
+                      value={s.platform}
+                      onValueChange={v => updateSocial(idx, { platform: v })}
+                    >
+                      <SelectTrigger className='w-[155px] flex-shrink-0 border-zinc-800 bg-zinc-950 text-white'>
+                        <SelectValue placeholder='Platform' />
+                      </SelectTrigger>
+                      <SelectContent className='border-zinc-800 bg-zinc-950 text-white'>
+                        {SOCIAL_PLATFORMS.map(p => (
+                          <SelectItem key={p.value} value={p.value}>
+                            <div className='flex items-center gap-2'>
+                              <p.Icon className='h-3.5 w-3.5 text-zinc-400' />
+                              <span>{p.label}</span>
+                            </div>
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+
+                    <div className='relative flex-1'>
+                      <span className='absolute top-1/2 left-3 -translate-y-1/2'>
+                        {platformIcon(s.platform)}
+                      </span>
+                      <Input
+                        type='text'
+                        placeholder='https://...'
+                        value={s.url}
+                        onChange={e =>
+                          updateSocial(idx, { url: e.target.value })
+                        }
+                        className='focus:border-primary/50 border-zinc-800 bg-zinc-950 pl-9 text-white placeholder:text-zinc-600'
+                      />
+                    </div>
+
+                    <Button
+                      type='button'
+                      variant='ghost'
+                      size='icon'
+                      onClick={() => removeSocial(idx)}
+                      className='h-9 w-9 flex-shrink-0 text-zinc-600 hover:text-red-400'
+                    >
+                      <Trash2 className='h-4 w-4' />
+                    </Button>
+                  </div>
+                  {isDuplicate && (
+                    <p className='pl-1 text-xs text-amber-400'>
+                      Duplicate platform — only the first entry will be saved.
+                    </p>
+                  )}
+                </div>
+              );
+            })}
+
+            {social.length < SOCIAL_PLATFORMS.length && (
+              <Button
+                type='button'
+                variant='outline'
+                size='sm'
+                onClick={addSocial}
+                className='gap-2 border-zinc-700 text-zinc-300 hover:bg-zinc-800 hover:text-white'
+              >
+                <Plus className='h-3.5 w-3.5' />
+                Add another
+              </Button>
+            )}
           </div>
-        ))}
-      </div>
+        )}
+      </section>
     </div>
   );
 }
diff --git a/components/crowdfunding/new/steps/StoryStep.tsx b/components/crowdfunding/new/steps/StoryStep.tsx
index ee4fdc5c..6fe261bc 100644
--- a/components/crowdfunding/new/steps/StoryStep.tsx
+++ b/components/crowdfunding/new/steps/StoryStep.tsx
@@ -1,7 +1,9 @@
 'use client';
 
 import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
+import { Lightbulb, AlignLeft } from 'lucide-react';
 import type { CampaignWizardData } from '../NewCampaignWizard';
 
 interface Props {
@@ -11,28 +13,77 @@ interface Props {
 
 export default function StoryStep({ data, onChange }: Props) {
   return (
-    <div className='space-y-6'>
-      <div className='rounded-xl border border-zinc-800/60 bg-zinc-950/60 p-4 text-sm text-zinc-400'>
-        Tell potential backers why this project matters. What are you building,
-        why now, and what will the world look like when you succeed?
-      </div>
+    <div className='space-y-8'>
+      {/* Vision */}
+      <section className='space-y-5'>
+        <div className='flex items-center gap-2 border-b border-zinc-800/60 pb-3'>
+          <Lightbulb className='h-4 w-4 text-zinc-500' />
+          <span className='text-xs font-semibold tracking-wider text-zinc-500 uppercase'>
+            Vision
+          </span>
+        </div>
 
-      <div className='space-y-1.5'>
-        <Label htmlFor='vision' className='text-sm font-medium text-zinc-300'>
-          Project story <span className='text-red-400'>*</span>
-        </Label>
-        <Textarea
-          id='vision'
-          placeholder='Share your vision, the problem you are solving, your approach, and what success looks like...'
-          value={data.vision}
-          onChange={e => onChange({ vision: e.target.value })}
-          rows={16}
-          className='resize-none border-zinc-800 bg-zinc-950 text-white placeholder:text-zinc-600'
-        />
-        <p className='text-right text-xs text-zinc-600'>
-          {data.vision.length} characters
-        </p>
-      </div>
+        <div className='space-y-1.5'>
+          <Label
+            htmlFor='tagline'
+            className='text-sm font-medium text-zinc-300'
+          >
+            Vision statement <span className='text-red-400'>*</span>
+          </Label>
+          <p className='text-xs text-zinc-500'>
+            One sentence that captures what you are building and why it matters.
+          </p>
+          <Input
+            id='tagline'
+            placeholder='e.g. The payment layer that lets any business accept and settle money across every chain'
+            maxLength={120}
+            value={data.tagline}
+            onChange={e => onChange({ tagline: e.target.value })}
+            className='focus:border-primary/50 border-zinc-800 bg-zinc-950 text-white placeholder:text-zinc-600'
+          />
+          <p className='text-right text-xs text-zinc-600'>
+            {data.tagline.length}/120
+          </p>
+        </div>
+      </section>
+
+      {/* Description */}
+      <section className='space-y-5'>
+        <div className='flex items-center gap-2 border-b border-zinc-800/60 pb-3'>
+          <AlignLeft className='h-4 w-4 text-zinc-500' />
+          <span className='text-xs font-semibold tracking-wider text-zinc-500 uppercase'>
+            Description
+          </span>
+        </div>
+
+        <div className='rounded-xl border border-zinc-800/60 bg-zinc-900/30 p-4 text-sm text-zinc-400'>
+          Tell potential backers why this project matters. Cover the problem you
+          are solving, your approach, the tech, and what success looks like.
+          Markdown formatting is supported.
+        </div>
+
+        <div className='space-y-1.5'>
+          <Label htmlFor='vision' className='text-sm font-medium text-zinc-300'>
+            Project description <span className='text-red-400'>*</span>
+          </Label>
+          <Textarea
+            id='vision'
+            placeholder='Share your vision, the problem you are solving, your approach, and what success looks like...'
+            value={data.vision}
+            onChange={e => onChange({ vision: e.target.value })}
+            rows={16}
+            className='focus:border-primary/50 resize-none border-zinc-800 bg-zinc-950 text-white placeholder:text-zinc-600'
+          />
+          <div className='flex justify-between text-xs text-zinc-600'>
+            <span>
+              {data.vision.length < 50
+                ? `${50 - data.vision.length} more characters needed`
+                : ''}
+            </span>
+            <span>{data.vision.length} characters</span>
+          </div>
+        </div>
+      </section>
     </div>
   );
 }
diff --git a/lib/api/api.ts b/lib/api/api.ts
index df4b6f9a..d03d2ce1 100644
--- a/lib/api/api.ts
+++ b/lib/api/api.ts
@@ -45,31 +45,35 @@ export interface ApiError {
  * backend message on `.message` directly. Plain `Error` instances and raw
  * axios errors are also handled as fallbacks.
  */
+const normalizeMessage = (raw: unknown): string | null => {
+  if (Array.isArray(raw)) {
+    const joined = raw
+      .filter(s => typeof s === 'string' && s.trim())
+      .join('. ');
+    return joined || null;
+  }
+  if (typeof raw === 'string' && raw.trim()) return raw;
+  return null;
+};
+
 export const extractApiErrorMessage = (
   err: unknown,
   fallback = 'Something went wrong. Please try again.'
 ): string => {
   if (!err) return fallback;
 
-  // ApiError or any object with a non-empty `message` string (most common path)
-  if (
-    typeof err === 'object' &&
-    'message' in err &&
-    typeof (err as { message: unknown }).message === 'string' &&
-    (err as { message: string }).message.trim().length > 0
-  ) {
-    return (err as { message: string }).message;
+  // ApiError or any object with a `message` field (string or string[])
+  if (typeof err === 'object' && 'message' in err) {
+    const msg = normalizeMessage((err as { message: unknown }).message);
+    if (msg) return msg;
   }
 
   // Raw axios error fallback (in case it ever bypasses the interceptor)
-  if (
-    typeof err === 'object' &&
-    'response' in err &&
-    (err as { response?: { data?: { message?: string } } }).response?.data
-      ?.message
-  ) {
-    return (err as { response: { data: { message: string } } }).response.data
-      .message;
+  if (typeof err === 'object' && 'response' in err) {
+    const raw = (err as { response?: { data?: { message?: unknown } } })
+      .response?.data?.message;
+    const msg = normalizeMessage(raw);
+    if (msg) return msg;
   }
 
   if (typeof err === 'string' && err.trim().length > 0) return err;
@@ -222,11 +226,15 @@ const createClientApi = (): AxiosInstance => {
       // Handle other errors
       if (error.response) {
         const errorData = error.response.data as
-          | { message?: string; code?: string; errors?: ApiErrorField[] }
+          | {
+              message?: string | string[];
+              code?: string;
+              errors?: ApiErrorField[];
+            }
           | undefined;
         const customError: ApiError = {
           message:
-            errorData?.message ||
+            normalizeMessage(errorData?.message) ||
             `HTTP error! status: ${error.response.status}`,
           status: error.response.status,
           code: errorData?.code,