diff --git a/src/components/ProjectCreationWizard.jsx b/src/components/ProjectCreationWizard.jsx
deleted file mode 100644
index a41799ce..00000000
--- a/src/components/ProjectCreationWizard.jsx
+++ /dev/null
@@ -1,874 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { X, FolderPlus, GitBranch, Key, ChevronRight, ChevronLeft, Check, Loader2, AlertCircle, FolderOpen, Eye, EyeOff, Plus } from 'lucide-react';
-import { Button, Input } from '../shared/view/ui';
-import { api } from '../utils/api';
-import { useTranslation } from 'react-i18next';
-
-const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
-  const { t } = useTranslation();
-  // Wizard state
-  const [step, setStep] = useState(1); // 1: Choose type, 2: Configure, 3: Confirm
-  const [workspaceType, setWorkspaceType] = useState('existing'); // 'existing' or 'new' - default to 'existing'
-
-  // Form state
-  const [workspacePath, setWorkspacePath] = useState('');
-  const [githubUrl, setGithubUrl] = useState('');
-  const [selectedGithubToken, setSelectedGithubToken] = useState('');
-  const [tokenMode, setTokenMode] = useState('stored'); // 'stored' | 'new' | 'none'
-  const [newGithubToken, setNewGithubToken] = useState('');
-
-  // UI state
-  const [isCreating, setIsCreating] = useState(false);
-  const [error, setError] = useState(null);
-  const [availableTokens, setAvailableTokens] = useState([]);
-  const [loadingTokens, setLoadingTokens] = useState(false);
-  const [pathSuggestions, setPathSuggestions] = useState([]);
-  const [showPathDropdown, setShowPathDropdown] = useState(false);
-  const [showFolderBrowser, setShowFolderBrowser] = useState(false);
-  const [browserCurrentPath, setBrowserCurrentPath] = useState('~');
-  const [browserFolders, setBrowserFolders] = useState([]);
-  const [loadingFolders, setLoadingFolders] = useState(false);
-  const [showHiddenFolders, setShowHiddenFolders] = useState(false);
-  const [showNewFolderInput, setShowNewFolderInput] = useState(false);
-  const [newFolderName, setNewFolderName] = useState('');
-  const [creatingFolder, setCreatingFolder] = useState(false);
-  const [cloneProgress, setCloneProgress] = useState('');
-
-  // Load available GitHub tokens when needed
-  useEffect(() => {
-    if (step === 2 && workspaceType === 'new' && githubUrl) {
-      loadGithubTokens();
-    }
-  }, [step, workspaceType, githubUrl]);
-
-  // Load path suggestions
-  useEffect(() => {
-    if (workspacePath.length > 2) {
-      loadPathSuggestions(workspacePath);
-    } else {
-      setPathSuggestions([]);
-      setShowPathDropdown(false);
-    }
-  }, [workspacePath]);
-
-  const loadGithubTokens = async () => {
-    try {
-      setLoadingTokens(true);
-      const response = await api.get('/settings/credentials?type=github_token');
-      const data = await response.json();
-
-      const activeTokens = (data.credentials || []).filter(t => t.is_active);
-      setAvailableTokens(activeTokens);
-
-      // Auto-select first token if available
-      if (activeTokens.length > 0 && !selectedGithubToken) {
-        setSelectedGithubToken(activeTokens[0].id.toString());
-      }
-    } catch (error) {
-      console.error('Error loading GitHub tokens:', error);
-    } finally {
-      setLoadingTokens(false);
-    }
-  };
-
-  const loadPathSuggestions = async (inputPath) => {
-    try {
-      // Extract the directory to browse (parent of input)
-      const lastSlash = inputPath.lastIndexOf('/');
-      const dirPath = lastSlash > 0 ? inputPath.substring(0, lastSlash) : '~';
-
-      const response = await api.browseFilesystem(dirPath);
-      const data = await response.json();
-
-      if (data.suggestions) {
-        // Filter suggestions based on the input, excluding exact match
-        const filtered = data.suggestions.filter(s =>
-          s.path.toLowerCase().startsWith(inputPath.toLowerCase()) &&
-          s.path.toLowerCase() !== inputPath.toLowerCase()
-        );
-        setPathSuggestions(filtered.slice(0, 5));
-        setShowPathDropdown(filtered.length > 0);
-      }
-    } catch (error) {
-      console.error('Error loading path suggestions:', error);
-    }
-  };
-
-  const handleNext = () => {
-    setError(null);
-
-    if (step === 1) {
-      if (!workspaceType) {
-        setError(t('projectWizard.errors.selectType'));
-        return;
-      }
-      setStep(2);
-    } else if (step === 2) {
-      if (!workspacePath.trim()) {
-        setError(t('projectWizard.errors.providePath'));
-        return;
-      }
-
-      // No validation for GitHub token - it's optional (only needed for private repos)
-      setStep(3);
-    }
-  };
-
-  const handleBack = () => {
-    setError(null);
-    setStep(step - 1);
-  };
-
-  const handleCreate = async () => {
-    setIsCreating(true);
-    setError(null);
-    setCloneProgress('');
-
-    try {
-      if (workspaceType === 'new' && githubUrl) {
-        const params = new URLSearchParams({
-          path: workspacePath.trim(),
-          githubUrl: githubUrl.trim(),
-        });
-
-        if (tokenMode === 'stored' && selectedGithubToken) {
-          params.append('githubTokenId', selectedGithubToken);
-        } else if (tokenMode === 'new' && newGithubToken) {
-          params.append('newGithubToken', newGithubToken.trim());
-        }
-
-        const token = localStorage.getItem('auth-token');
-        const url = `/api/projects/clone-progress?${params}${token ? `&token=${token}` : ''}`;
-
-        await new Promise((resolve, reject) => {
-          const eventSource = new EventSource(url);
-
-          eventSource.onmessage = (event) => {
-            try {
-              const data = JSON.parse(event.data);
-
-              if (data.type === 'progress') {
-                setCloneProgress(data.message);
-              } else if (data.type === 'complete') {
-                eventSource.close();
-                if (onProjectCreated) {
-                  onProjectCreated(data.project);
-                }
-                onClose();
-                resolve();
-              } else if (data.type === 'error') {
-                eventSource.close();
-                reject(new Error(data.message));
-              }
-            } catch (e) {
-              console.error('Error parsing SSE event:', e);
-            }
-          };
-
-          eventSource.onerror = () => {
-            eventSource.close();
-            reject(new Error('Connection lost during clone'));
-          };
-        });
-        return;
-      }
-
-      const payload = {
-        workspaceType,
-        path: workspacePath.trim(),
-      };
-
-      const response = await api.createWorkspace(payload);
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.details || data.error || t('projectWizard.errors.failedToCreate'));
-      }
-
-      if (onProjectCreated) {
-        onProjectCreated(data.project);
-      }
-
-      onClose();
-    } catch (error) {
-      console.error('Error creating workspace:', error);
-      setError(error.message || t('projectWizard.errors.failedToCreate'));
-    } finally {
-      setIsCreating(false);
-    }
-  };
-
-  const selectPathSuggestion = (suggestion) => {
-    setWorkspacePath(suggestion.path);
-    setShowPathDropdown(false);
-  };
-
-  const openFolderBrowser = async () => {
-    setShowFolderBrowser(true);
-    await loadBrowserFolders('~');
-  };
-
-  const loadBrowserFolders = async (path) => {
-    try {
-      setLoadingFolders(true);
-      const response = await api.browseFilesystem(path);
-      const data = await response.json();
-      setBrowserCurrentPath(data.path || path);
-      setBrowserFolders(data.suggestions || []);
-    } catch (error) {
-      console.error('Error loading folders:', error);
-    } finally {
-      setLoadingFolders(false);
-    }
-  };
-
-  const selectFolder = (folderPath, advanceToConfirm = false) => {
-    setWorkspacePath(folderPath);
-    setShowFolderBrowser(false);
-    if (advanceToConfirm) {
-      setStep(3);
-    }
-  };
-
-  const navigateToFolder = async (folderPath) => {
-    await loadBrowserFolders(folderPath);
-  };
-
-  const createNewFolder = async () => {
-    if (!newFolderName.trim()) return;
-    setCreatingFolder(true);
-    setError(null);
-    try {
-      const separator = browserCurrentPath.includes('\\') ? '\\' : '/';
-      const folderPath = `${browserCurrentPath}${separator}${newFolderName.trim()}`;
-      const response = await api.createFolder(folderPath);
-      const data = await response.json();
-      if (!response.ok) {
-        throw new Error(data.error || t('projectWizard.errors.failedToCreateFolder', 'Failed to create folder'));
-      }
-      setNewFolderName('');
-      setShowNewFolderInput(false);
-      await loadBrowserFolders(data.path || folderPath);
-    } catch (error) {
-      console.error('Error creating folder:', error);
-      setError(error.message || t('projectWizard.errors.failedToCreateFolder', 'Failed to create folder'));
-    } finally {
-      setCreatingFolder(false);
-    }
-  };
-
-  return (
-    <div className="fixed top-0 left-0 right-0 bottom-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[60] p-0 sm:p-4">
-      <div className="bg-white dark:bg-gray-800 rounded-none sm:rounded-lg shadow-xl w-full h-full sm:h-auto sm:max-w-2xl border-0 sm:border border-gray-200 dark:border-gray-700 overflow-y-auto">
-        {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
-          <div className="flex items-center gap-3">
-            <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center">
-              <FolderPlus className="w-4 h-4 text-blue-600 dark:text-blue-400" />
-            </div>
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-              {t('projectWizard.title')}
-            </h3>
-          </div>
-          <button
-            onClick={onClose}
-            className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
-            disabled={isCreating}
-          >
-            <X className="w-5 h-5" />
-          </button>
-        </div>
-
-        {/* Progress Indicator */}
-        <div className="px-6 pt-4 pb-2">
-          <div className="flex items-center justify-between">
-            {[1, 2, 3].map((s) => (
-              <React.Fragment key={s}>
-                <div className="flex items-center gap-2">
-                  <div
-                    className={`w-8 h-8 rounded-full flex items-center justify-center font-medium text-sm ${
-                      s < step
-                        ? 'bg-green-500 text-white'
-                        : s === step
-                        ? 'bg-blue-500 text-white'
-                        : 'bg-gray-200 dark:bg-gray-700 text-gray-500'
-                    }`}
-                  >
-                    {s < step ? <Check className="w-4 h-4" /> : s}
-                  </div>
-                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300 hidden sm:inline">
-                    {s === 1 ? t('projectWizard.steps.type') : s === 2 ? t('projectWizard.steps.configure') : t('projectWizard.steps.confirm')}
-                  </span>
-                </div>
-                {s < 3 && (
-                  <div
-                    className={`flex-1 h-1 mx-2 rounded ${
-                      s < step ? 'bg-green-500' : 'bg-gray-200 dark:bg-gray-700'
-                    }`}
-                  />
-                )}
-              </React.Fragment>
-            ))}
-          </div>
-        </div>
-
-        {/* Content */}
-        <div className="p-6 space-y-6 min-h-[300px]">
-          {/* Error Display */}
-          {error && (
-            <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 flex items-start gap-3">
-              <AlertCircle className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
-              <div className="flex-1">
-                <p className="text-sm text-red-800 dark:text-red-200">{error}</p>
-              </div>
-            </div>
-          )}
-
-          {/* Step 1: Choose workspace type */}
-          {step === 1 && (
-            <div className="space-y-4">
-              <div>
-                <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
-                  {t('projectWizard.step1.question')}
-                </h4>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  {/* Existing Workspace */}
-                  <button
-                    onClick={() => setWorkspaceType('existing')}
-                    className={`p-4 border-2 rounded-lg text-left transition-all ${
-                      workspaceType === 'existing'
-                        ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
-                        : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
-                    }`}
-                  >
-                    <div className="flex items-start gap-3">
-                      <div className="w-10 h-10 bg-green-100 dark:bg-green-900/50 rounded-lg flex items-center justify-center flex-shrink-0">
-                        <FolderPlus className="w-5 h-5 text-green-600 dark:text-green-400" />
-                      </div>
-                      <div className="flex-1">
-                        <h5 className="font-semibold text-gray-900 dark:text-white mb-1">
-                          {t('projectWizard.step1.existing.title')}
-                        </h5>
-                        <p className="text-sm text-gray-600 dark:text-gray-400">
-                          {t('projectWizard.step1.existing.description')}
-                        </p>
-                      </div>
-                    </div>
-                  </button>
-
-                  {/* New Workspace */}
-                  <button
-                    onClick={() => setWorkspaceType('new')}
-                    className={`p-4 border-2 rounded-lg text-left transition-all ${
-                      workspaceType === 'new'
-                        ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
-                        : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
-                    }`}
-                  >
-                    <div className="flex items-start gap-3">
-                      <div className="w-10 h-10 bg-purple-100 dark:bg-purple-900/50 rounded-lg flex items-center justify-center flex-shrink-0">
-                        <GitBranch className="w-5 h-5 text-purple-600 dark:text-purple-400" />
-                      </div>
-                      <div className="flex-1">
-                        <h5 className="font-semibold text-gray-900 dark:text-white mb-1">
-                          {t('projectWizard.step1.new.title')}
-                        </h5>
-                        <p className="text-sm text-gray-600 dark:text-gray-400">
-                          {t('projectWizard.step1.new.description')}
-                        </p>
-                      </div>
-                    </div>
-                  </button>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Step 2: Configure workspace */}
-          {step === 2 && (
-            <div className="space-y-4">
-              {/* Workspace Path */}
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                  {workspaceType === 'existing' ? t('projectWizard.step2.existingPath') : t('projectWizard.step2.newPath')}
-                </label>
-                <div className="relative flex gap-2">
-                  <div className="flex-1 relative">
-                    <Input
-                      type="text"
-                      value={workspacePath}
-                      onChange={(e) => setWorkspacePath(e.target.value)}
-                      placeholder={workspaceType === 'existing' ? '/path/to/existing/workspace' : '/path/to/new/workspace'}
-                      className="w-full"
-                    />
-                    {showPathDropdown && pathSuggestions.length > 0 && (
-                      <div className="absolute z-10 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg max-h-60 overflow-y-auto">
-                        {pathSuggestions.map((suggestion, index) => (
-                          <button
-                            key={index}
-                            onClick={() => selectPathSuggestion(suggestion)}
-                            className="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700 text-sm"
-                          >
-                            <div className="font-medium text-gray-900 dark:text-white">{suggestion.name}</div>
-                            <div className="text-xs text-gray-500 dark:text-gray-400">{suggestion.path}</div>
-                          </button>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={openFolderBrowser}
-                    className="px-3"
-                    title="Browse folders"
-                  >
-                    <FolderOpen className="w-4 h-4" />
-                  </Button>
-                </div>
-                <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                  {workspaceType === 'existing'
-                    ? t('projectWizard.step2.existingHelp')
-                    : t('projectWizard.step2.newHelp')}
-                </p>
-              </div>
-
-              {/* GitHub URL (only for new workspace) */}
-              {workspaceType === 'new' && (
-                <>
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                      {t('projectWizard.step2.githubUrl')}
-                    </label>
-                    <Input
-                      type="text"
-                      value={githubUrl}
-                      onChange={(e) => setGithubUrl(e.target.value)}
-                      placeholder="https://github.com/username/repository"
-                      className="w-full"
-                    />
-                    <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                      {t('projectWizard.step2.githubHelp')}
-                    </p>
-                  </div>
-
-                  {/* GitHub Token (only for HTTPS URLs - SSH uses SSH keys) */}
-                  {githubUrl && !githubUrl.startsWith('git@') && !githubUrl.startsWith('ssh://') && (
-                    <div className="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
-                      <div className="flex items-start gap-3 mb-4">
-                        <Key className="w-5 h-5 text-gray-600 dark:text-gray-400 flex-shrink-0 mt-0.5" />
-                        <div className="flex-1">
-                          <h5 className="font-medium text-gray-900 dark:text-white mb-1">
-                            {t('projectWizard.step2.githubAuth')}
-                          </h5>
-                          <p className="text-sm text-gray-600 dark:text-gray-400">
-                            {t('projectWizard.step2.githubAuthHelp')}
-                          </p>
-                        </div>
-                      </div>
-
-                      {loadingTokens ? (
-                        <div className="flex items-center gap-2 text-sm text-gray-500">
-                          <Loader2 className="w-4 h-4 animate-spin" />
-                          {t('projectWizard.step2.loadingTokens')}
-                        </div>
-                      ) : availableTokens.length > 0 ? (
-                        <>
-                          {/* Token Selection Tabs */}
-                          <div className="grid grid-cols-3 gap-2 mb-4">
-                            <button
-                              onClick={() => setTokenMode('stored')}
-                              className={`px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
-                                tokenMode === 'stored'
-                                  ? 'bg-blue-500 text-white'
-                                  : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
-                              }`}
-                            >
-                              {t('projectWizard.step2.storedToken')}
-                            </button>
-                            <button
-                              onClick={() => setTokenMode('new')}
-                              className={`px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
-                                tokenMode === 'new'
-                                  ? 'bg-blue-500 text-white'
-                                  : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
-                              }`}
-                            >
-                              {t('projectWizard.step2.newToken')}
-                            </button>
-                            <button
-                              onClick={() => {
-                                setTokenMode('none');
-                                setSelectedGithubToken('');
-                                setNewGithubToken('');
-                              }}
-                              className={`px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
-                                tokenMode === 'none'
-                                  ? 'bg-green-500 text-white'
-                                  : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
-                              }`}
-                            >
-                              {t('projectWizard.step2.nonePublic')}
-                            </button>
-                          </div>
-
-                          {tokenMode === 'stored' ? (
-                            <div>
-                              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                                {t('projectWizard.step2.selectToken')}
-                              </label>
-                              <select
-                                value={selectedGithubToken}
-                                onChange={(e) => setSelectedGithubToken(e.target.value)}
-                                className="w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-sm"
-                              >
-                                <option value="">{t('projectWizard.step2.selectTokenPlaceholder')}</option>
-                                {availableTokens.map((token) => (
-                                  <option key={token.id} value={token.id}>
-                                    {token.credential_name}
-                                  </option>
-                                ))}
-                              </select>
-                            </div>
-                          ) : tokenMode === 'new' ? (
-                            <div>
-                              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                                {t('projectWizard.step2.newToken')}
-                              </label>
-                              <Input
-                                type="password"
-                                value={newGithubToken}
-                                onChange={(e) => setNewGithubToken(e.target.value)}
-                                placeholder="ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
-                                className="w-full"
-                              />
-                              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                                {t('projectWizard.step2.tokenHelp')}
-                              </p>
-                            </div>
-                          ) : null}
-                        </>
-                      ) : (
-                        <div className="space-y-4">
-                          <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-3 border border-blue-200 dark:border-blue-800">
-                            <p className="text-sm text-blue-800 dark:text-blue-200">
-                              {t('projectWizard.step2.publicRepoInfo')}
-                            </p>
-                          </div>
-
-                          <div>
-                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                              {t('projectWizard.step2.optionalTokenPublic')}
-                            </label>
-                            <Input
-                              type="password"
-                              value={newGithubToken}
-                              onChange={(e) => setNewGithubToken(e.target.value)}
-                              placeholder={t('projectWizard.step2.tokenPublicPlaceholder')}
-                              className="w-full"
-                            />
-                            <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                              {t('projectWizard.step2.noTokensHelp')}
-                            </p>
-                          </div>
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </>
-              )}
-            </div>
-          )}
-
-          {/* Step 3: Confirm */}
-          {step === 3 && (
-            <div className="space-y-4">
-              <div className="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
-                <h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-3">
-                  {t('projectWizard.step3.reviewConfig')}
-                </h4>
-                <div className="space-y-2">
-                  <div className="flex justify-between text-sm">
-                    <span className="text-gray-600 dark:text-gray-400">{t('projectWizard.step3.workspaceType')}</span>
-                    <span className="font-medium text-gray-900 dark:text-white">
-                      {workspaceType === 'existing' ? t('projectWizard.step3.existingWorkspace') : t('projectWizard.step3.newWorkspace')}
-                    </span>
-                  </div>
-                  <div className="flex justify-between text-sm">
-                    <span className="text-gray-600 dark:text-gray-400">{t('projectWizard.step3.path')}</span>
-                    <span className="font-mono text-xs text-gray-900 dark:text-white break-all">
-                      {workspacePath}
-                    </span>
-                  </div>
-                  {workspaceType === 'new' && githubUrl && (
-                    <>
-                      <div className="flex justify-between text-sm">
-                        <span className="text-gray-600 dark:text-gray-400">{t('projectWizard.step3.cloneFrom')}</span>
-                        <span className="font-mono text-xs text-gray-900 dark:text-white break-all">
-                          {githubUrl}
-                        </span>
-                      </div>
-                      <div className="flex justify-between text-sm">
-                        <span className="text-gray-600 dark:text-gray-400">{t('projectWizard.step3.authentication')}</span>
-                        <span className="text-xs text-gray-900 dark:text-white">
-                          {tokenMode === 'stored' && selectedGithubToken
-                            ? `${t('projectWizard.step3.usingStoredToken')} ${availableTokens.find(t => t.id.toString() === selectedGithubToken)?.credential_name || 'Unknown'}`
-                            : tokenMode === 'new' && newGithubToken
-                            ? t('projectWizard.step3.usingProvidedToken')
-                            : (githubUrl.startsWith('git@') || githubUrl.startsWith('ssh://'))
-                            ? t('projectWizard.step3.sshKey', 'SSH Key')
-                            : t('projectWizard.step3.noAuthentication')}
-                        </span>
-                      </div>
-                    </>
-                  )}
-                </div>
-              </div>
-
-              <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 border border-blue-200 dark:border-blue-800">
-                {isCreating && cloneProgress ? (
-                  <div className="space-y-2">
-                    <p className="text-sm font-medium text-blue-800 dark:text-blue-200">{t('projectWizard.step3.cloningRepository', 'Cloning repository...')}</p>
-                    <code className="block text-xs font-mono text-blue-700 dark:text-blue-300 whitespace-pre-wrap break-all">
-                      {cloneProgress}
-                    </code>
-                  </div>
-                ) : (
-                  <p className="text-sm text-blue-800 dark:text-blue-200">
-                    {workspaceType === 'existing'
-                      ? t('projectWizard.step3.existingInfo')
-                      : githubUrl
-                      ? t('projectWizard.step3.newWithClone')
-                      : t('projectWizard.step3.newEmpty')}
-                  </p>
-                )}
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Footer */}
-        <div className="flex items-center justify-between p-6 border-t border-gray-200 dark:border-gray-700">
-          <Button
-            variant="outline"
-            onClick={step === 1 ? onClose : handleBack}
-            disabled={isCreating}
-          >
-            {step === 1 ? (
-              t('projectWizard.buttons.cancel')
-            ) : (
-              <>
-                <ChevronLeft className="w-4 h-4 mr-1" />
-                {t('projectWizard.buttons.back')}
-              </>
-            )}
-          </Button>
-
-          <Button
-            onClick={step === 3 ? handleCreate : handleNext}
-            disabled={isCreating || (step === 1 && !workspaceType)}
-          >
-            {isCreating ? (
-              <>
-                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                {githubUrl ? t('projectWizard.buttons.cloning', 'Cloning...') : t('projectWizard.buttons.creating')}
-              </>
-            ) : step === 3 ? (
-              <>
-                <Check className="w-4 h-4 mr-1" />
-                {t('projectWizard.buttons.createProject')}
-              </>
-            ) : (
-              <>
-                {t('projectWizard.buttons.next')}
-                <ChevronRight className="w-4 h-4 ml-1" />
-              </>
-            )}
-          </Button>
-        </div>
-      </div>
-
-      {/* Folder Browser Modal */}
-      {showFolderBrowser && (
-        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[70] p-4">
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] border border-gray-200 dark:border-gray-700 flex flex-col">
-            {/* Browser Header */}
-            <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
-              <div className="flex items-center gap-3">
-                <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center">
-                  <FolderOpen className="w-4 h-4 text-blue-600 dark:text-blue-400" />
-                </div>
-                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-                  Select Folder
-                </h3>
-              </div>
-              <div className="flex items-center gap-2">
-                <button
-                  onClick={() => setShowHiddenFolders(!showHiddenFolders)}
-                  className={`p-2 rounded-md transition-colors ${
-                    showHiddenFolders
-                      ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30'
-                      : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
-                  }`}
-                  title={showHiddenFolders ? 'Hide hidden folders' : 'Show hidden folders'}
-                >
-                  {showHiddenFolders ? <Eye className="w-5 h-5" /> : <EyeOff className="w-5 h-5" />}
-                </button>
-                <button
-                  onClick={() => setShowNewFolderInput(!showNewFolderInput)}
-                  className={`p-2 rounded-md transition-colors ${
-                    showNewFolderInput
-                      ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30'
-                      : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
-                  }`}
-                  title="Create new folder"
-                >
-                  <Plus className="w-5 h-5" />
-                </button>
-                <button
-                  onClick={() => setShowFolderBrowser(false)}
-                  className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
-                >
-                  <X className="w-5 h-5" />
-                </button>
-              </div>
-            </div>
-
-            {/* New Folder Input */}
-            {showNewFolderInput && (
-              <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-blue-50 dark:bg-blue-900/20">
-                <div className="flex items-center gap-2">
-                  <Input
-                    type="text"
-                    value={newFolderName}
-                    onChange={(e) => setNewFolderName(e.target.value)}
-                    placeholder="New folder name"
-                    className="flex-1"
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter') createNewFolder();
-                      if (e.key === 'Escape') {
-                        setShowNewFolderInput(false);
-                        setNewFolderName('');
-                      }
-                    }}
-                    autoFocus
-                  />
-                  <Button
-                    size="sm"
-                    onClick={createNewFolder}
-                    disabled={!newFolderName.trim() || creatingFolder}
-                  >
-                    {creatingFolder ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Create'}
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    onClick={() => {
-                      setShowNewFolderInput(false);
-                      setNewFolderName('');
-                    }}
-                  >
-                    Cancel
-                  </Button>
-                </div>
-              </div>
-            )}
-
-            {/* Folder List */}
-            <div className="flex-1 overflow-y-auto p-4">
-              {loadingFolders ? (
-                <div className="flex items-center justify-center py-8">
-                  <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
-                </div>
-              ) : (
-                <div className="space-y-1">
-                  {/* Parent Directory - check for Windows root (e.g., C:\) and Unix root */}
-                  {browserCurrentPath !== '~' && browserCurrentPath !== '/' && !/^[A-Za-z]:\\?$/.test(browserCurrentPath) && (
-                    <button
-                      onClick={() => {
-                        const lastSlash = Math.max(browserCurrentPath.lastIndexOf('/'), browserCurrentPath.lastIndexOf('\\'));
-                        let parentPath;
-                        if (lastSlash <= 0) {
-                          parentPath = '/';
-                        } else if (lastSlash === 2 && /^[A-Za-z]:/.test(browserCurrentPath)) {
-                          parentPath = browserCurrentPath.substring(0, 3);
-                        } else {
-                          parentPath = browserCurrentPath.substring(0, lastSlash);
-                        }
-                        navigateToFolder(parentPath);
-                      }}
-                      className="w-full px-4 py-3 text-left hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg flex items-center gap-3"
-                    >
-                      <FolderOpen className="w-5 h-5 text-gray-400" />
-                      <span className="font-medium text-gray-700 dark:text-gray-300">..</span>
-                    </button>
-                  )}
-
-                  {/* Folders */}
-                  {browserFolders.length === 0 ? (
-                    <div className="text-center py-8 text-gray-500 dark:text-gray-400">
-                      No subfolders found
-                    </div>
-                  ) : (
-                    browserFolders
-                      .filter(folder => showHiddenFolders || !folder.name.startsWith('.'))
-                      .sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))
-                      .map((folder, index) => (
-                      <div key={index} className="flex items-center gap-2">
-                        <button
-                          onClick={() => navigateToFolder(folder.path)}
-                          className="flex-1 px-4 py-3 text-left hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg flex items-center gap-3"
-                        >
-                          <FolderPlus className="w-5 h-5 text-blue-500" />
-                          <span className="font-medium text-gray-900 dark:text-white">{folder.name}</span>
-                        </button>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => selectFolder(folder.path, workspaceType === 'existing')}
-                          className="text-xs px-3"
-                        >
-                          Select
-                        </Button>
-                      </div>
-                    ))
-                  )}
-                </div>
-              )}
-            </div>
-
-            {/* Browser Footer with Current Path */}
-            <div className="border-t border-gray-200 dark:border-gray-700">
-              <div className="px-4 py-3 bg-gray-50 dark:bg-gray-900/50 flex items-center gap-2">
-                <span className="text-sm text-gray-600 dark:text-gray-400">Path:</span>
-                <code className="text-sm font-mono text-gray-900 dark:text-white flex-1 truncate">
-                  {browserCurrentPath}
-                </code>
-              </div>
-              <div className="flex items-center justify-end gap-2 p-4">
-                <Button
-                  variant="outline"
-                  onClick={() => {
-                    setShowFolderBrowser(false);
-                    setShowNewFolderInput(false);
-                    setNewFolderName('');
-                  }}
-                >
-                  Cancel
-                </Button>
-                <Button
-                  variant="outline"
-                  onClick={() => selectFolder(browserCurrentPath, workspaceType === 'existing')}
-                >
-                  Use this folder
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ProjectCreationWizard;
diff --git a/src/components/project-creation-wizard/ProjectCreationWizard.tsx b/src/components/project-creation-wizard/ProjectCreationWizard.tsx
new file mode 100644
index 00000000..ce490482
--- /dev/null
+++ b/src/components/project-creation-wizard/ProjectCreationWizard.tsx
@@ -0,0 +1,229 @@
+import { useCallback, useMemo, useState } from 'react';
+import { FolderPlus, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import ErrorBanner from './components/ErrorBanner';
+import StepConfiguration from './components/StepConfiguration';
+import StepReview from './components/StepReview';
+import StepTypeSelection from './components/StepTypeSelection';
+import WizardFooter from './components/WizardFooter';
+import WizardProgress from './components/WizardProgress';
+import { useGithubTokens } from './hooks/useGithubTokens';
+import { cloneWorkspaceWithProgress, createWorkspaceRequest } from './data/workspaceApi';
+import { isCloneWorkflow, shouldShowGithubAuthentication } from './utils/pathUtils';
+import type { TokenMode, WizardFormState, WizardStep, WorkspaceType } from './types';
+
+type ProjectCreationWizardProps = {
+  onClose: () => void;
+  onProjectCreated?: (project?: Record<string, unknown>) => void;
+};
+
+const initialFormState: WizardFormState = {
+  workspaceType: 'existing',
+  workspacePath: '',
+  githubUrl: '',
+  tokenMode: 'stored',
+  selectedGithubToken: '',
+  newGithubToken: '',
+};
+
+export default function ProjectCreationWizard({
+  onClose,
+  onProjectCreated,
+}: ProjectCreationWizardProps) {
+  const { t } = useTranslation();
+  const [step, setStep] = useState<WizardStep>(1);
+  const [formState, setFormState] = useState<WizardFormState>(initialFormState);
+  const [isCreating, setIsCreating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [cloneProgress, setCloneProgress] = useState('');
+
+  const shouldLoadTokens =
+    step === 2 && shouldShowGithubAuthentication(formState.workspaceType, formState.githubUrl);
+
+  const autoSelectToken = useCallback((tokenId: string) => {
+    setFormState((previous) => ({ ...previous, selectedGithubToken: tokenId }));
+  }, []);
+
+  const {
+    tokens: availableTokens,
+    loading: loadingTokens,
+    loadError: tokenLoadError,
+    selectedTokenName,
+  } = useGithubTokens({
+    shouldLoad: shouldLoadTokens,
+    selectedTokenId: formState.selectedGithubToken,
+    onAutoSelectToken: autoSelectToken,
+  });
+
+  // Keep cross-step values in this component; local UI state lives in child components.
+  const updateField = useCallback(<K extends keyof WizardFormState>(key: K, value: WizardFormState[K]) => {
+    setFormState((previous) => ({ ...previous, [key]: value }));
+  }, []);
+
+  const updateWorkspaceType = useCallback(
+    (workspaceType: WorkspaceType) => updateField('workspaceType', workspaceType),
+    [updateField],
+  );
+
+  const updateTokenMode = useCallback(
+    (tokenMode: TokenMode) => updateField('tokenMode', tokenMode),
+    [updateField],
+  );
+
+  const handleNext = useCallback(() => {
+    setError(null);
+
+    if (step === 1) {
+      if (!formState.workspaceType) {
+        setError(t('projectWizard.errors.selectType'));
+        return;
+      }
+      setStep(2);
+      return;
+    }
+
+    if (step === 2) {
+      if (!formState.workspacePath.trim()) {
+        setError(t('projectWizard.errors.providePath'));
+        return;
+      }
+      setStep(3);
+    }
+  }, [formState.workspacePath, formState.workspaceType, step, t]);
+
+  const handleBack = useCallback(() => {
+    setError(null);
+    setStep((previousStep) => (previousStep > 1 ? ((previousStep - 1) as WizardStep) : previousStep));
+  }, []);
+
+  const handleCreate = useCallback(async () => {
+    setIsCreating(true);
+    setError(null);
+    setCloneProgress('');
+
+    try {
+      const shouldCloneRepository = isCloneWorkflow(formState.workspaceType, formState.githubUrl);
+
+      if (shouldCloneRepository) {
+        const project = await cloneWorkspaceWithProgress(
+          {
+            workspacePath: formState.workspacePath,
+            githubUrl: formState.githubUrl,
+            tokenMode: formState.tokenMode,
+            selectedGithubToken: formState.selectedGithubToken,
+            newGithubToken: formState.newGithubToken,
+          },
+          {
+            onProgress: setCloneProgress,
+          },
+        );
+
+        onProjectCreated?.(project);
+        onClose();
+        return;
+      }
+
+      const project = await createWorkspaceRequest({
+        workspaceType: formState.workspaceType,
+        path: formState.workspacePath.trim(),
+      });
+
+      onProjectCreated?.(project);
+      onClose();
+    } catch (createError) {
+      const errorMessage =
+        createError instanceof Error
+          ? createError.message
+          : t('projectWizard.errors.failedToCreate');
+      setError(errorMessage);
+    } finally {
+      setIsCreating(false);
+    }
+  }, [formState, onClose, onProjectCreated, t]);
+
+  const shouldCloneRepository = useMemo(
+    () => isCloneWorkflow(formState.workspaceType, formState.githubUrl),
+    [formState.githubUrl, formState.workspaceType],
+  );
+
+  return (
+    <div className="fixed top-0 left-0 right-0 bottom-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[60] p-0 sm:p-4">
+      <div className="bg-white dark:bg-gray-800 rounded-none sm:rounded-lg shadow-xl w-full h-full sm:h-auto sm:max-w-2xl border-0 sm:border border-gray-200 dark:border-gray-700 overflow-y-auto">
+        <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center">
+              <FolderPlus className="w-4 h-4 text-blue-600 dark:text-blue-400" />
+            </div>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+              {t('projectWizard.title')}
+            </h3>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
+            disabled={isCreating}
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <WizardProgress step={step} />
+
+        <div className="p-6 space-y-6 min-h-[300px]">
+          {error && <ErrorBanner message={error} />}
+
+          {step === 1 && (
+            <StepTypeSelection
+              workspaceType={formState.workspaceType}
+              onWorkspaceTypeChange={updateWorkspaceType}
+            />
+          )}
+
+          {step === 2 && (
+            <StepConfiguration
+              workspaceType={formState.workspaceType}
+              workspacePath={formState.workspacePath}
+              githubUrl={formState.githubUrl}
+              tokenMode={formState.tokenMode}
+              selectedGithubToken={formState.selectedGithubToken}
+              newGithubToken={formState.newGithubToken}
+              availableTokens={availableTokens}
+              loadingTokens={loadingTokens}
+              tokenLoadError={tokenLoadError}
+              isCreating={isCreating}
+              onWorkspacePathChange={(workspacePath) => updateField('workspacePath', workspacePath)}
+              onGithubUrlChange={(githubUrl) => updateField('githubUrl', githubUrl)}
+              onTokenModeChange={updateTokenMode}
+              onSelectedGithubTokenChange={(selectedGithubToken) =>
+                updateField('selectedGithubToken', selectedGithubToken)
+              }
+              onNewGithubTokenChange={(newGithubToken) =>
+                updateField('newGithubToken', newGithubToken)
+              }
+              onAdvanceToConfirm={() => setStep(3)}
+            />
+          )}
+
+          {step === 3 && (
+            <StepReview
+              formState={formState}
+              selectedTokenName={selectedTokenName}
+              isCreating={isCreating}
+              cloneProgress={cloneProgress}
+            />
+          )}
+        </div>
+
+        <WizardFooter
+          step={step}
+          isCreating={isCreating}
+          isCloneWorkflow={shouldCloneRepository}
+          onClose={onClose}
+          onBack={handleBack}
+          onNext={handleNext}
+          onCreate={handleCreate}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/project-creation-wizard/components/ErrorBanner.tsx b/src/components/project-creation-wizard/components/ErrorBanner.tsx
new file mode 100644
index 00000000..3843cb21
--- /dev/null
+++ b/src/components/project-creation-wizard/components/ErrorBanner.tsx
@@ -0,0 +1,14 @@
+import { AlertCircle } from 'lucide-react';
+
+type ErrorBannerProps = {
+  message: string;
+};
+
+export default function ErrorBanner({ message }: ErrorBannerProps) {
+  return (
+    <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 flex items-start gap-3">
+      <AlertCircle className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
+      <p className="text-sm text-red-800 dark:text-red-200">{message}</p>
+    </div>
+  );
+}
diff --git a/src/components/project-creation-wizard/components/FolderBrowserModal.tsx b/src/components/project-creation-wizard/components/FolderBrowserModal.tsx
new file mode 100644
index 00000000..52448afa
--- /dev/null
+++ b/src/components/project-creation-wizard/components/FolderBrowserModal.tsx
@@ -0,0 +1,251 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Eye, EyeOff, FolderOpen, FolderPlus, Loader2, Plus, X } from 'lucide-react';
+import { Button, Input } from '../../../shared/view/ui';
+import { browseFilesystemFolders, createFolderInFilesystem } from '../data/workspaceApi';
+import { getParentPath, joinFolderPath } from '../utils/pathUtils';
+import type { FolderSuggestion } from '../types';
+
+type FolderBrowserModalProps = {
+  isOpen: boolean;
+  autoAdvanceOnSelect: boolean;
+  onClose: () => void;
+  onFolderSelected: (folderPath: string, advanceToConfirm: boolean) => void;
+};
+
+export default function FolderBrowserModal({
+  isOpen,
+  autoAdvanceOnSelect,
+  onClose,
+  onFolderSelected,
+}: FolderBrowserModalProps) {
+  const [currentPath, setCurrentPath] = useState('~');
+  const [folders, setFolders] = useState<FolderSuggestion[]>([]);
+  const [loadingFolders, setLoadingFolders] = useState(false);
+  const [showHiddenFolders, setShowHiddenFolders] = useState(false);
+  const [showNewFolderInput, setShowNewFolderInput] = useState(false);
+  const [newFolderName, setNewFolderName] = useState('');
+  const [creatingFolder, setCreatingFolder] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadFolders = useCallback(async (pathToLoad: string) => {
+    setLoadingFolders(true);
+    setError(null);
+
+    try {
+      const result = await browseFilesystemFolders(pathToLoad);
+      setCurrentPath(result.path);
+      setFolders(result.suggestions);
+    } catch (loadError) {
+      setError(loadError instanceof Error ? loadError.message : 'Failed to load folders');
+    } finally {
+      setLoadingFolders(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    loadFolders('~');
+  }, [isOpen, loadFolders]);
+
+  const visibleFolders = useMemo(
+    () =>
+      folders
+        .filter((folder) => showHiddenFolders || !folder.name.startsWith('.'))
+        .sort((firstFolder, secondFolder) =>
+          firstFolder.name.toLowerCase().localeCompare(secondFolder.name.toLowerCase()),
+        ),
+    [folders, showHiddenFolders],
+  );
+
+  const resetNewFolderState = () => {
+    setShowNewFolderInput(false);
+    setNewFolderName('');
+  };
+
+  const handleClose = () => {
+    setError(null);
+    resetNewFolderState();
+    onClose();
+  };
+
+  const handleCreateFolder = useCallback(async () => {
+    if (!newFolderName.trim()) {
+      return;
+    }
+
+    setCreatingFolder(true);
+    setError(null);
+
+    try {
+      const folderPath = joinFolderPath(currentPath, newFolderName);
+      const createdPath = await createFolderInFilesystem(folderPath);
+      resetNewFolderState();
+      await loadFolders(createdPath);
+    } catch (createError) {
+      setError(createError instanceof Error ? createError.message : 'Failed to create folder');
+    } finally {
+      setCreatingFolder(false);
+    }
+  }, [currentPath, loadFolders, newFolderName]);
+
+  const parentPath = getParentPath(currentPath);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[70] p-4">
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] border border-gray-200 dark:border-gray-700 flex flex-col">
+        <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center">
+              <FolderOpen className="w-4 h-4 text-blue-600 dark:text-blue-400" />
+            </div>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Select Folder</h3>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => setShowHiddenFolders((previous) => !previous)}
+              className={`p-2 rounded-md transition-colors ${
+                showHiddenFolders
+                  ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30'
+                  : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
+              }`}
+              title={showHiddenFolders ? 'Hide hidden folders' : 'Show hidden folders'}
+            >
+              {showHiddenFolders ? <Eye className="w-5 h-5" /> : <EyeOff className="w-5 h-5" />}
+            </button>
+            <button
+              onClick={() => setShowNewFolderInput((previous) => !previous)}
+              className={`p-2 rounded-md transition-colors ${
+                showNewFolderInput
+                  ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30'
+                  : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
+              }`}
+              title="Create new folder"
+            >
+              <Plus className="w-5 h-5" />
+            </button>
+            <button
+              onClick={handleClose}
+              className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
+            >
+              <X className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+
+        {showNewFolderInput && (
+          <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-blue-50 dark:bg-blue-900/20">
+            <div className="flex items-center gap-2">
+              <Input
+                type="text"
+                value={newFolderName}
+                onChange={(event) => setNewFolderName(event.target.value)}
+                placeholder="New folder name"
+                className="flex-1"
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter') {
+                    handleCreateFolder();
+                  }
+                  if (event.key === 'Escape') {
+                    resetNewFolderState();
+                  }
+                }}
+                autoFocus
+              />
+              <Button
+                size="sm"
+                onClick={handleCreateFolder}
+                disabled={!newFolderName.trim() || creatingFolder}
+              >
+                {creatingFolder ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Create'}
+              </Button>
+              <Button size="sm" variant="ghost" onClick={resetNewFolderState}>
+                Cancel
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {error && (
+          <div className="px-4 pt-3">
+            <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+          </div>
+        )}
+
+        <div className="flex-1 overflow-y-auto p-4">
+          {loadingFolders ? (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
+            </div>
+          ) : (
+            <div className="space-y-1">
+              {parentPath && (
+                <button
+                  onClick={() => loadFolders(parentPath)}
+                  className="w-full px-4 py-3 text-left hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg flex items-center gap-3"
+                >
+                  <FolderOpen className="w-5 h-5 text-gray-400" />
+                  <span className="font-medium text-gray-700 dark:text-gray-300">..</span>
+                </button>
+              )}
+
+              {visibleFolders.length === 0 ? (
+                <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+                  No subfolders found
+                </div>
+              ) : (
+                visibleFolders.map((folder) => (
+                  <div key={folder.path} className="flex items-center gap-2">
+                    <button
+                      onClick={() => loadFolders(folder.path)}
+                      className="flex-1 px-4 py-3 text-left hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg flex items-center gap-3"
+                    >
+                      <FolderPlus className="w-5 h-5 text-blue-500" />
+                      <span className="font-medium text-gray-900 dark:text-white">
+                        {folder.name}
+                      </span>
+                    </button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onFolderSelected(folder.path, autoAdvanceOnSelect)}
+                      className="text-xs px-3"
+                    >
+                      Select
+                    </Button>
+                  </div>
+                ))
+              )}
+            </div>
+          )}
+        </div>
+
+        <div className="border-t border-gray-200 dark:border-gray-700">
+          <div className="px-4 py-3 bg-gray-50 dark:bg-gray-900/50 flex items-center gap-2">
+            <span className="text-sm text-gray-600 dark:text-gray-400">Path:</span>
+            <code className="text-sm font-mono text-gray-900 dark:text-white flex-1 truncate">
+              {currentPath}
+            </code>
+          </div>
+          <div className="flex items-center justify-end gap-2 p-4">
+            <Button variant="outline" onClick={handleClose}>
+              Cancel
+            </Button>
+            <Button
+              variant="outline"
+              onClick={() => onFolderSelected(currentPath, autoAdvanceOnSelect)}
+            >
+              Use this folder
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/project-creation-wizard/components/GithubAuthenticationCard.tsx b/src/components/project-creation-wizard/components/GithubAuthenticationCard.tsx
new file mode 100644
index 00000000..7ce53a26
--- /dev/null
+++ b/src/components/project-creation-wizard/components/GithubAuthenticationCard.tsx
@@ -0,0 +1,161 @@
+import { Key, Loader2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Input } from '../../../shared/view/ui';
+import type { GithubTokenCredential, TokenMode } from '../types';
+
+type GithubAuthenticationCardProps = {
+  tokenMode: TokenMode;
+  selectedGithubToken: string;
+  newGithubToken: string;
+  availableTokens: GithubTokenCredential[];
+  loadingTokens: boolean;
+  tokenLoadError: string | null;
+  onTokenModeChange: (tokenMode: TokenMode) => void;
+  onSelectedGithubTokenChange: (tokenId: string) => void;
+  onNewGithubTokenChange: (tokenValue: string) => void;
+};
+
+const getModeClassName = (mode: TokenMode, selectedMode: TokenMode) =>
+  `px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
+    mode === selectedMode
+      ? mode === 'none'
+        ? 'bg-green-500 text-white'
+        : 'bg-blue-500 text-white'
+      : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
+  }`;
+
+export default function GithubAuthenticationCard({
+  tokenMode,
+  selectedGithubToken,
+  newGithubToken,
+  availableTokens,
+  loadingTokens,
+  tokenLoadError,
+  onTokenModeChange,
+  onSelectedGithubTokenChange,
+  onNewGithubTokenChange,
+}: GithubAuthenticationCardProps) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
+      <div className="flex items-start gap-3 mb-4">
+        <Key className="w-5 h-5 text-gray-600 dark:text-gray-400 flex-shrink-0 mt-0.5" />
+        <div className="flex-1">
+          <h5 className="font-medium text-gray-900 dark:text-white mb-1">
+            {t('projectWizard.step2.githubAuth')}
+          </h5>
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            {t('projectWizard.step2.githubAuthHelp')}
+          </p>
+        </div>
+      </div>
+
+      {loadingTokens && (
+        <div className="flex items-center gap-2 text-sm text-gray-500">
+          <Loader2 className="w-4 h-4 animate-spin" />
+          {t('projectWizard.step2.loadingTokens')}
+        </div>
+      )}
+
+      {!loadingTokens && tokenLoadError && (
+        <p className="text-sm text-red-600 dark:text-red-400 mb-3">{tokenLoadError}</p>
+      )}
+
+      {!loadingTokens && availableTokens.length > 0 && (
+        <>
+          <div className="grid grid-cols-3 gap-2 mb-4">
+            <button
+              onClick={() => onTokenModeChange('stored')}
+              className={getModeClassName(tokenMode, 'stored')}
+            >
+              {t('projectWizard.step2.storedToken')}
+            </button>
+            <button
+              onClick={() => onTokenModeChange('new')}
+              className={getModeClassName(tokenMode, 'new')}
+            >
+              {t('projectWizard.step2.newToken')}
+            </button>
+            <button
+              onClick={() => {
+                onTokenModeChange('none');
+                onSelectedGithubTokenChange('');
+                onNewGithubTokenChange('');
+              }}
+              className={getModeClassName(tokenMode, 'none')}
+            >
+              {t('projectWizard.step2.nonePublic')}
+            </button>
+          </div>
+
+          {tokenMode === 'stored' ? (
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                {t('projectWizard.step2.selectToken')}
+              </label>
+              <select
+                value={selectedGithubToken}
+                onChange={(event) => onSelectedGithubTokenChange(event.target.value)}
+                className="w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-sm"
+              >
+                <option value="">{t('projectWizard.step2.selectTokenPlaceholder')}</option>
+                {availableTokens.map((token) => (
+                  <option key={token.id} value={String(token.id)}>
+                    {token.credential_name}
+                  </option>
+                ))}
+              </select>
+            </div>
+          ) : tokenMode === 'new' ? (
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                {t('projectWizard.step2.newToken')}
+              </label>
+              <Input
+                type="password"
+                value={newGithubToken}
+                onChange={(event) => onNewGithubTokenChange(event.target.value)}
+                placeholder="ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+                className="w-full"
+              />
+              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                {t('projectWizard.step2.tokenHelp')}
+              </p>
+            </div>
+          ) : null}
+        </>
+      )}
+
+      {!loadingTokens && availableTokens.length === 0 && (
+        <div className="space-y-4">
+          <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-3 border border-blue-200 dark:border-blue-800">
+            <p className="text-sm text-blue-800 dark:text-blue-200">
+              {t('projectWizard.step2.publicRepoInfo')}
+            </p>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+              {t('projectWizard.step2.optionalTokenPublic')}
+            </label>
+            <Input
+              type="password"
+              value={newGithubToken}
+              onChange={(event) => {
+                const tokenValue = event.target.value;
+                onNewGithubTokenChange(tokenValue);
+                onTokenModeChange(tokenValue.trim() ? 'new' : 'none');
+              }}
+              placeholder={t('projectWizard.step2.tokenPublicPlaceholder')}
+              className="w-full"
+            />
+            <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              {t('projectWizard.step2.noTokensHelp')}
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/project-creation-wizard/components/StepConfiguration.tsx b/src/components/project-creation-wizard/components/StepConfiguration.tsx
new file mode 100644
index 00000000..33234cdb
--- /dev/null
+++ b/src/components/project-creation-wizard/components/StepConfiguration.tsx
@@ -0,0 +1,108 @@
+import { useTranslation } from 'react-i18next';
+import { Input } from '../../../shared/view/ui';
+import GithubAuthenticationCard from './GithubAuthenticationCard';
+import WorkspacePathField from './WorkspacePathField';
+import { shouldShowGithubAuthentication } from '../utils/pathUtils';
+import type { GithubTokenCredential, TokenMode, WorkspaceType } from '../types';
+
+type StepConfigurationProps = {
+  workspaceType: WorkspaceType;
+  workspacePath: string;
+  githubUrl: string;
+  tokenMode: TokenMode;
+  selectedGithubToken: string;
+  newGithubToken: string;
+  availableTokens: GithubTokenCredential[];
+  loadingTokens: boolean;
+  tokenLoadError: string | null;
+  isCreating: boolean;
+  onWorkspacePathChange: (workspacePath: string) => void;
+  onGithubUrlChange: (githubUrl: string) => void;
+  onTokenModeChange: (tokenMode: TokenMode) => void;
+  onSelectedGithubTokenChange: (tokenId: string) => void;
+  onNewGithubTokenChange: (tokenValue: string) => void;
+  onAdvanceToConfirm: () => void;
+};
+
+export default function StepConfiguration({
+  workspaceType,
+  workspacePath,
+  githubUrl,
+  tokenMode,
+  selectedGithubToken,
+  newGithubToken,
+  availableTokens,
+  loadingTokens,
+  tokenLoadError,
+  isCreating,
+  onWorkspacePathChange,
+  onGithubUrlChange,
+  onTokenModeChange,
+  onSelectedGithubTokenChange,
+  onNewGithubTokenChange,
+  onAdvanceToConfirm,
+}: StepConfigurationProps) {
+  const { t } = useTranslation();
+  const showGithubAuth = shouldShowGithubAuthentication(workspaceType, githubUrl);
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+          {workspaceType === 'existing'
+            ? t('projectWizard.step2.existingPath')
+            : t('projectWizard.step2.newPath')}
+        </label>
+
+        <WorkspacePathField
+          workspaceType={workspaceType}
+          value={workspacePath}
+          disabled={isCreating}
+          onChange={onWorkspacePathChange}
+          onAdvanceToConfirm={onAdvanceToConfirm}
+        />
+
+        <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+          {workspaceType === 'existing'
+            ? t('projectWizard.step2.existingHelp')
+            : t('projectWizard.step2.newHelp')}
+        </p>
+      </div>
+
+      {workspaceType === 'new' && (
+        <>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+              {t('projectWizard.step2.githubUrl')}
+            </label>
+            <Input
+              type="text"
+              value={githubUrl}
+              onChange={(event) => onGithubUrlChange(event.target.value)}
+              placeholder="https://github.com/username/repository"
+              className="w-full"
+              disabled={isCreating}
+            />
+            <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              {t('projectWizard.step2.githubHelp')}
+            </p>
+          </div>
+
+          {showGithubAuth && (
+            <GithubAuthenticationCard
+              tokenMode={tokenMode}
+              selectedGithubToken={selectedGithubToken}
+              newGithubToken={newGithubToken}
+              availableTokens={availableTokens}
+              loadingTokens={loadingTokens}
+              tokenLoadError={tokenLoadError}
+              onTokenModeChange={onTokenModeChange}
+              onSelectedGithubTokenChange={onSelectedGithubTokenChange}
+              onNewGithubTokenChange={onNewGithubTokenChange}
+            />
+          )}
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/project-creation-wizard/components/StepReview.tsx b/src/components/project-creation-wizard/components/StepReview.tsx
new file mode 100644
index 00000000..17201ac1
--- /dev/null
+++ b/src/components/project-creation-wizard/components/StepReview.tsx
@@ -0,0 +1,107 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { isSshGitUrl } from '../utils/pathUtils';
+import type { WizardFormState } from '../types';
+
+type StepReviewProps = {
+  formState: WizardFormState;
+  selectedTokenName: string | null;
+  isCreating: boolean;
+  cloneProgress: string;
+};
+
+export default function StepReview({
+  formState,
+  selectedTokenName,
+  isCreating,
+  cloneProgress,
+}: StepReviewProps) {
+  const { t } = useTranslation();
+
+  const authenticationLabel = useMemo(() => {
+    if (formState.tokenMode === 'stored' && formState.selectedGithubToken) {
+      return `${t('projectWizard.step3.usingStoredToken')} ${selectedTokenName || 'Unknown'}`;
+    }
+
+    if (formState.tokenMode === 'new' && formState.newGithubToken.trim()) {
+      return t('projectWizard.step3.usingProvidedToken');
+    }
+
+    if (isSshGitUrl(formState.githubUrl)) {
+      return t('projectWizard.step3.sshKey', { defaultValue: 'SSH Key' });
+    }
+
+    return t('projectWizard.step3.noAuthentication');
+  }, [formState, selectedTokenName, t]);
+
+  return (
+    <div className="space-y-4">
+      <div className="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
+        <h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-3">
+          {t('projectWizard.step3.reviewConfig')}
+        </h4>
+
+        <div className="space-y-2">
+          <div className="flex justify-between text-sm">
+            <span className="text-gray-600 dark:text-gray-400">
+              {t('projectWizard.step3.workspaceType')}
+            </span>
+            <span className="font-medium text-gray-900 dark:text-white">
+              {formState.workspaceType === 'existing'
+                ? t('projectWizard.step3.existingWorkspace')
+                : t('projectWizard.step3.newWorkspace')}
+            </span>
+          </div>
+
+          <div className="flex justify-between text-sm">
+            <span className="text-gray-600 dark:text-gray-400">{t('projectWizard.step3.path')}</span>
+            <span className="font-mono text-xs text-gray-900 dark:text-white break-all">
+              {formState.workspacePath}
+            </span>
+          </div>
+
+          {formState.workspaceType === 'new' && formState.githubUrl && (
+            <>
+              <div className="flex justify-between text-sm">
+                <span className="text-gray-600 dark:text-gray-400">
+                  {t('projectWizard.step3.cloneFrom')}
+                </span>
+                <span className="font-mono text-xs text-gray-900 dark:text-white break-all">
+                  {formState.githubUrl}
+                </span>
+              </div>
+
+              <div className="flex justify-between text-sm">
+                <span className="text-gray-600 dark:text-gray-400">
+                  {t('projectWizard.step3.authentication')}
+                </span>
+                <span className="text-xs text-gray-900 dark:text-white">{authenticationLabel}</span>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 border border-blue-200 dark:border-blue-800">
+        {isCreating && cloneProgress ? (
+          <div className="space-y-2">
+            <p className="text-sm font-medium text-blue-800 dark:text-blue-200">
+              {t('projectWizard.step3.cloningRepository', { defaultValue: 'Cloning repository...' })}
+            </p>
+            <code className="block text-xs font-mono text-blue-700 dark:text-blue-300 whitespace-pre-wrap break-all">
+              {cloneProgress}
+            </code>
+          </div>
+        ) : (
+          <p className="text-sm text-blue-800 dark:text-blue-200">
+            {formState.workspaceType === 'existing'
+              ? t('projectWizard.step3.existingInfo')
+              : formState.githubUrl
+                ? t('projectWizard.step3.newWithClone')
+                : t('projectWizard.step3.newEmpty')}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/project-creation-wizard/components/StepTypeSelection.tsx b/src/components/project-creation-wizard/components/StepTypeSelection.tsx
new file mode 100644
index 00000000..830aa270
--- /dev/null
+++ b/src/components/project-creation-wizard/components/StepTypeSelection.tsx
@@ -0,0 +1,71 @@
+import { FolderPlus, GitBranch } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import type { WorkspaceType } from '../types';
+
+type StepTypeSelectionProps = {
+  workspaceType: WorkspaceType;
+  onWorkspaceTypeChange: (workspaceType: WorkspaceType) => void;
+};
+
+export default function StepTypeSelection({
+  workspaceType,
+  onWorkspaceTypeChange,
+}: StepTypeSelectionProps) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="space-y-4">
+      <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
+        {t('projectWizard.step1.question')}
+      </h4>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <button
+          onClick={() => onWorkspaceTypeChange('existing')}
+          className={`p-4 border-2 rounded-lg text-left transition-all ${
+            workspaceType === 'existing'
+              ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
+              : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
+          }`}
+        >
+          <div className="flex items-start gap-3">
+            <div className="w-10 h-10 bg-green-100 dark:bg-green-900/50 rounded-lg flex items-center justify-center flex-shrink-0">
+              <FolderPlus className="w-5 h-5 text-green-600 dark:text-green-400" />
+            </div>
+            <div className="flex-1">
+              <h5 className="font-semibold text-gray-900 dark:text-white mb-1">
+                {t('projectWizard.step1.existing.title')}
+              </h5>
+              <p className="text-sm text-gray-600 dark:text-gray-400">
+                {t('projectWizard.step1.existing.description')}
+              </p>
+            </div>
+          </div>
+        </button>
+
+        <button
+          onClick={() => onWorkspaceTypeChange('new')}
+          className={`p-4 border-2 rounded-lg text-left transition-all ${
+            workspaceType === 'new'
+              ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
+              : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
+          }`}
+        >
+          <div className="flex items-start gap-3">
+            <div className="w-10 h-10 bg-purple-100 dark:bg-purple-900/50 rounded-lg flex items-center justify-center flex-shrink-0">
+              <GitBranch className="w-5 h-5 text-purple-600 dark:text-purple-400" />
+            </div>
+            <div className="flex-1">
+              <h5 className="font-semibold text-gray-900 dark:text-white mb-1">
+                {t('projectWizard.step1.new.title')}
+              </h5>
+              <p className="text-sm text-gray-600 dark:text-gray-400">
+                {t('projectWizard.step1.new.description')}
+              </p>
+            </div>
+          </div>
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/project-creation-wizard/components/WizardFooter.tsx b/src/components/project-creation-wizard/components/WizardFooter.tsx
new file mode 100644
index 00000000..689d1ea2
--- /dev/null
+++ b/src/components/project-creation-wizard/components/WizardFooter.tsx
@@ -0,0 +1,62 @@
+import { Check, ChevronLeft, ChevronRight, Loader2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '../../../shared/view/ui';
+import type { WizardStep } from '../types';
+
+type WizardFooterProps = {
+  step: WizardStep;
+  isCreating: boolean;
+  isCloneWorkflow: boolean;
+  onClose: () => void;
+  onBack: () => void;
+  onNext: () => void;
+  onCreate: () => void;
+};
+
+export default function WizardFooter({
+  step,
+  isCreating,
+  isCloneWorkflow,
+  onClose,
+  onBack,
+  onNext,
+  onCreate,
+}: WizardFooterProps) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex items-center justify-between p-6 border-t border-gray-200 dark:border-gray-700">
+      <Button variant="outline" onClick={step === 1 ? onClose : onBack} disabled={isCreating}>
+        {step === 1 ? (
+          t('projectWizard.buttons.cancel')
+        ) : (
+          <>
+            <ChevronLeft className="w-4 h-4 mr-1" />
+            {t('projectWizard.buttons.back')}
+          </>
+        )}
+      </Button>
+
+      <Button onClick={step === 3 ? onCreate : onNext} disabled={isCreating}>
+        {isCreating ? (
+          <>
+            <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+            {isCloneWorkflow
+              ? t('projectWizard.buttons.cloning', { defaultValue: 'Cloning...' })
+              : t('projectWizard.buttons.creating')}
+          </>
+        ) : step === 3 ? (
+          <>
+            <Check className="w-4 h-4 mr-1" />
+            {t('projectWizard.buttons.createProject')}
+          </>
+        ) : (
+          <>
+            {t('projectWizard.buttons.next')}
+            <ChevronRight className="w-4 h-4 ml-1" />
+          </>
+        )}
+      </Button>
+    </div>
+  );
+}
diff --git a/src/components/project-creation-wizard/components/WizardProgress.tsx b/src/components/project-creation-wizard/components/WizardProgress.tsx
new file mode 100644
index 00000000..2615962c
--- /dev/null
+++ b/src/components/project-creation-wizard/components/WizardProgress.tsx
@@ -0,0 +1,52 @@
+import { Fragment } from 'react';
+import { Check } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import type { WizardStep } from '../types';
+
+type WizardProgressProps = {
+  step: WizardStep;
+};
+
+export default function WizardProgress({ step }: WizardProgressProps) {
+  const { t } = useTranslation();
+  const steps: WizardStep[] = [1, 2, 3];
+
+  return (
+    <div className="px-6 pt-4 pb-2">
+      <div className="flex items-center justify-between">
+        {steps.map((currentStep) => (
+          <Fragment key={currentStep}>
+            <div className="flex items-center gap-2">
+              <div
+                className={`w-8 h-8 rounded-full flex items-center justify-center font-medium text-sm ${
+                  currentStep < step
+                    ? 'bg-green-500 text-white'
+                    : currentStep === step
+                      ? 'bg-blue-500 text-white'
+                      : 'bg-gray-200 dark:bg-gray-700 text-gray-500'
+                }`}
+              >
+                {currentStep < step ? <Check className="w-4 h-4" /> : currentStep}
+              </div>
+              <span className="text-sm font-medium text-gray-700 dark:text-gray-300 hidden sm:inline">
+                {currentStep === 1
+                  ? t('projectWizard.steps.type')
+                  : currentStep === 2
+                    ? t('projectWizard.steps.configure')
+                    : t('projectWizard.steps.confirm')}
+              </span>
+            </div>
+
+            {currentStep < 3 && (
+              <div
+                className={`flex-1 h-1 mx-2 rounded ${
+                  currentStep < step ? 'bg-green-500' : 'bg-gray-200 dark:bg-gray-700'
+                }`}
+              />
+            )}
+          </Fragment>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/project-creation-wizard/components/WorkspacePathField.tsx b/src/components/project-creation-wizard/components/WorkspacePathField.tsx
new file mode 100644
index 00000000..711bad57
--- /dev/null
+++ b/src/components/project-creation-wizard/components/WorkspacePathField.tsx
@@ -0,0 +1,136 @@
+import { useCallback, useEffect, useState } from 'react';
+import { FolderOpen } from 'lucide-react';
+import { Button, Input } from '../../../shared/view/ui';
+import FolderBrowserModal from './FolderBrowserModal';
+import { browseFilesystemFolders } from '../data/workspaceApi';
+import { getSuggestionRootPath } from '../utils/pathUtils';
+import type { FolderSuggestion, WorkspaceType } from '../types';
+
+type WorkspacePathFieldProps = {
+  workspaceType: WorkspaceType;
+  value: string;
+  disabled?: boolean;
+  onChange: (path: string) => void;
+  onAdvanceToConfirm: () => void;
+};
+
+export default function WorkspacePathField({
+  workspaceType,
+  value,
+  disabled = false,
+  onChange,
+  onAdvanceToConfirm,
+}: WorkspacePathFieldProps) {
+  const [pathSuggestions, setPathSuggestions] = useState<FolderSuggestion[]>([]);
+  const [showPathDropdown, setShowPathDropdown] = useState(false);
+  const [showFolderBrowser, setShowFolderBrowser] = useState(false);
+
+  useEffect(() => {
+    if (value.trim().length <= 2) {
+      setPathSuggestions([]);
+      setShowPathDropdown(false);
+      return;
+    }
+
+    // Debounce path lookup to avoid firing a request for every keystroke.
+    const timerId = window.setTimeout(async () => {
+      try {
+        const directoryPath = getSuggestionRootPath(value);
+        const result = await browseFilesystemFolders(directoryPath);
+        const normalizedInput = value.toLowerCase();
+
+        const matchingSuggestions = result.suggestions
+          .filter((suggestion) => {
+            const normalizedSuggestion = suggestion.path.toLowerCase();
+            return (
+              normalizedSuggestion.startsWith(normalizedInput) &&
+              normalizedSuggestion !== normalizedInput
+            );
+          })
+          .slice(0, 5);
+
+        setPathSuggestions(matchingSuggestions);
+        setShowPathDropdown(matchingSuggestions.length > 0);
+      } catch (error) {
+        console.error('Failed to load path suggestions:', error);
+      }
+    }, 200);
+
+    return () => {
+      window.clearTimeout(timerId);
+    };
+  }, [value]);
+
+  const handleSuggestionSelect = useCallback(
+    (suggestion: FolderSuggestion) => {
+      onChange(suggestion.path);
+      setShowPathDropdown(false);
+    },
+    [onChange],
+  );
+
+  const handleFolderSelected = useCallback(
+    (selectedPath: string, advanceToConfirm: boolean) => {
+      onChange(selectedPath);
+      setShowFolderBrowser(false);
+      if (advanceToConfirm) {
+        onAdvanceToConfirm();
+      }
+    },
+    [onAdvanceToConfirm, onChange],
+  );
+
+  return (
+    <>
+      <div className="relative flex gap-2">
+        <div className="flex-1 relative">
+          <Input
+            type="text"
+            value={value}
+            onChange={(event) => onChange(event.target.value)}
+            placeholder={
+              workspaceType === 'existing'
+                ? '/path/to/existing/workspace'
+                : '/path/to/new/workspace'
+            }
+            className="w-full"
+            disabled={disabled}
+          />
+
+          {showPathDropdown && pathSuggestions.length > 0 && (
+            <div className="absolute z-10 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg max-h-60 overflow-y-auto">
+              {pathSuggestions.map((suggestion) => (
+                <button
+                  key={suggestion.path}
+                  onClick={() => handleSuggestionSelect(suggestion)}
+                  className="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700 text-sm"
+                >
+                  <div className="font-medium text-gray-900 dark:text-white">{suggestion.name}</div>
+                  <div className="text-xs text-gray-500 dark:text-gray-400">{suggestion.path}</div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => setShowFolderBrowser(true)}
+          className="px-3"
+          title="Browse folders"
+          disabled={disabled}
+        >
+          <FolderOpen className="w-4 h-4" />
+        </Button>
+      </div>
+
+      <FolderBrowserModal
+        isOpen={showFolderBrowser}
+        autoAdvanceOnSelect={workspaceType === 'existing'}
+        onClose={() => setShowFolderBrowser(false)}
+        onFolderSelected={handleFolderSelected}
+      />
+    </>
+  );
+}
diff --git a/src/components/project-creation-wizard/data/workspaceApi.ts b/src/components/project-creation-wizard/data/workspaceApi.ts
new file mode 100644
index 00000000..f4ca3baf
--- /dev/null
+++ b/src/components/project-creation-wizard/data/workspaceApi.ts
@@ -0,0 +1,150 @@
+import { api } from '../../../utils/api';
+import type {
+  BrowseFilesystemResponse,
+  CloneProgressEvent,
+  CreateFolderResponse,
+  CreateWorkspacePayload,
+  CreateWorkspaceResponse,
+  CredentialsResponse,
+  FolderSuggestion,
+  TokenMode,
+} from '../types';
+
+type CloneWorkspaceParams = {
+  workspacePath: string;
+  githubUrl: string;
+  tokenMode: TokenMode;
+  selectedGithubToken: string;
+  newGithubToken: string;
+};
+
+type CloneProgressHandlers = {
+  onProgress: (message: string) => void;
+};
+
+const parseJson = async <T>(response: Response): Promise<T> => {
+  const data = (await response.json()) as T;
+  return data;
+};
+
+export const fetchGithubTokenCredentials = async () => {
+  const response = await api.get('/settings/credentials?type=github_token');
+  const data = await parseJson<CredentialsResponse>(response);
+
+  if (!response.ok) {
+    throw new Error(data.error || 'Failed to load GitHub tokens');
+  }
+
+  return (data.credentials || []).filter((credential) => credential.is_active);
+};
+
+export const browseFilesystemFolders = async (pathToBrowse: string) => {
+  const endpoint = `/browse-filesystem?path=${encodeURIComponent(pathToBrowse)}`;
+  const response = await api.get(endpoint);
+  const data = await parseJson<BrowseFilesystemResponse>(response);
+
+  if (!response.ok) {
+    throw new Error(data.error || 'Failed to browse filesystem');
+  }
+
+  return {
+    path: data.path || pathToBrowse,
+    suggestions: (data.suggestions || []) as FolderSuggestion[],
+  };
+};
+
+export const createFolderInFilesystem = async (folderPath: string) => {
+  const response = await api.createFolder(folderPath);
+  const data = await parseJson<CreateFolderResponse>(response);
+
+  if (!response.ok) {
+    throw new Error(data.error || 'Failed to create folder');
+  }
+
+  return data.path || folderPath;
+};
+
+export const createWorkspaceRequest = async (payload: CreateWorkspacePayload) => {
+  const response = await api.createWorkspace(payload);
+  const data = await parseJson<CreateWorkspaceResponse>(response);
+
+  if (!response.ok) {
+    throw new Error(data.details || data.error || 'Failed to create workspace');
+  }
+
+  return data.project;
+};
+
+const buildCloneProgressQuery = ({
+  workspacePath,
+  githubUrl,
+  tokenMode,
+  selectedGithubToken,
+  newGithubToken,
+}: CloneWorkspaceParams) => {
+  const query = new URLSearchParams({
+    path: workspacePath.trim(),
+    githubUrl: githubUrl.trim(),
+  });
+
+  if (tokenMode === 'stored' && selectedGithubToken) {
+    query.set('githubTokenId', selectedGithubToken);
+  }
+
+  if (tokenMode === 'new' && newGithubToken.trim()) {
+    query.set('newGithubToken', newGithubToken.trim());
+  }
+
+  // EventSource cannot send custom headers, so the auth token is passed as query.
+  const authToken = localStorage.getItem('auth-token');
+  if (authToken) {
+    query.set('token', authToken);
+  }
+
+  return query.toString();
+};
+
+export const cloneWorkspaceWithProgress = (
+  params: CloneWorkspaceParams,
+  handlers: CloneProgressHandlers,
+) =>
+  new Promise<Record<string, unknown> | undefined>((resolve, reject) => {
+    const query = buildCloneProgressQuery(params);
+    const eventSource = new EventSource(`/api/projects/clone-progress?${query}`);
+    let settled = false;
+
+    const settle = (callback: () => void) => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      eventSource.close();
+      callback();
+    };
+
+    eventSource.onmessage = (event) => {
+      try {
+        const payload = JSON.parse(event.data) as CloneProgressEvent;
+
+        if (payload.type === 'progress' && payload.message) {
+          handlers.onProgress(payload.message);
+          return;
+        }
+
+        if (payload.type === 'complete') {
+          settle(() => resolve(payload.project));
+          return;
+        }
+
+        if (payload.type === 'error') {
+          settle(() => reject(new Error(payload.message || 'Failed to clone repository')));
+        }
+      } catch (error) {
+        console.error('Error parsing clone progress event:', error);
+      }
+    };
+
+    eventSource.onerror = () => {
+      settle(() => reject(new Error('Connection lost during clone')));
+    };
+  });
diff --git a/src/components/project-creation-wizard/hooks/useGithubTokens.ts b/src/components/project-creation-wizard/hooks/useGithubTokens.ts
new file mode 100644
index 00000000..c1e2b4cf
--- /dev/null
+++ b/src/components/project-creation-wizard/hooks/useGithubTokens.ts
@@ -0,0 +1,73 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { fetchGithubTokenCredentials } from '../data/workspaceApi';
+import type { GithubTokenCredential } from '../types';
+
+type UseGithubTokensParams = {
+  shouldLoad: boolean;
+  selectedTokenId: string;
+  onAutoSelectToken: (tokenId: string) => void;
+};
+
+export const useGithubTokens = ({
+  shouldLoad,
+  selectedTokenId,
+  onAutoSelectToken,
+}: UseGithubTokensParams) => {
+  const [tokens, setTokens] = useState<GithubTokenCredential[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const hasLoadedRef = useRef(false);
+
+  useEffect(() => {
+    if (!shouldLoad || hasLoadedRef.current) {
+      return;
+    }
+
+    let isDisposed = false;
+
+    const loadTokens = async () => {
+      setLoading(true);
+      setLoadError(null);
+
+      try {
+        const activeTokens = await fetchGithubTokenCredentials();
+        if (isDisposed) {
+          return;
+        }
+
+        setTokens(activeTokens);
+        hasLoadedRef.current = true;
+
+        if (activeTokens.length > 0 && !selectedTokenId) {
+          onAutoSelectToken(String(activeTokens[0].id));
+        }
+      } catch (error) {
+        if (!isDisposed) {
+          setLoadError(error instanceof Error ? error.message : 'Failed to load GitHub tokens');
+        }
+      } finally {
+        if (!isDisposed) {
+          setLoading(false);
+        }
+      }
+    };
+
+    loadTokens();
+
+    return () => {
+      isDisposed = true;
+    };
+  }, [onAutoSelectToken, selectedTokenId, shouldLoad]);
+
+  const selectedTokenName = useMemo(
+    () => tokens.find((token) => String(token.id) === selectedTokenId)?.credential_name || null,
+    [selectedTokenId, tokens],
+  );
+
+  return {
+    tokens,
+    loading,
+    loadError,
+    selectedTokenName,
+  };
+};
diff --git a/src/components/project-creation-wizard/index.ts b/src/components/project-creation-wizard/index.ts
new file mode 100644
index 00000000..58d5b82e
--- /dev/null
+++ b/src/components/project-creation-wizard/index.ts
@@ -0,0 +1 @@
+export { default } from './ProjectCreationWizard';
diff --git a/src/components/project-creation-wizard/types.ts b/src/components/project-creation-wizard/types.ts
new file mode 100644
index 00000000..4b156303
--- /dev/null
+++ b/src/components/project-creation-wizard/types.ts
@@ -0,0 +1,62 @@
+export type WizardStep = 1 | 2 | 3;
+
+export type WorkspaceType = 'existing' | 'new';
+
+export type TokenMode = 'stored' | 'new' | 'none';
+
+export type FolderSuggestion = {
+  name: string;
+  path: string;
+  type?: string;
+};
+
+export type GithubTokenCredential = {
+  id: number;
+  credential_name: string;
+  is_active: boolean;
+};
+
+export type CredentialsResponse = {
+  credentials?: GithubTokenCredential[];
+  error?: string;
+};
+
+export type BrowseFilesystemResponse = {
+  path?: string;
+  suggestions?: FolderSuggestion[];
+  error?: string;
+};
+
+export type CreateFolderResponse = {
+  success?: boolean;
+  path?: string;
+  error?: string;
+  details?: string;
+};
+
+export type CreateWorkspacePayload = {
+  workspaceType: WorkspaceType;
+  path: string;
+};
+
+export type CreateWorkspaceResponse = {
+  success?: boolean;
+  project?: Record<string, unknown>;
+  error?: string;
+  details?: string;
+};
+
+export type CloneProgressEvent = {
+  type?: string;
+  message?: string;
+  project?: Record<string, unknown>;
+};
+
+export type WizardFormState = {
+  workspaceType: WorkspaceType;
+  workspacePath: string;
+  githubUrl: string;
+  tokenMode: TokenMode;
+  selectedGithubToken: string;
+  newGithubToken: string;
+};
diff --git a/src/components/project-creation-wizard/utils/pathUtils.ts b/src/components/project-creation-wizard/utils/pathUtils.ts
new file mode 100644
index 00000000..6799c3c1
--- /dev/null
+++ b/src/components/project-creation-wizard/utils/pathUtils.ts
@@ -0,0 +1,52 @@
+import type { WorkspaceType } from '../types';
+
+const SSH_PREFIXES = ['git@', 'ssh://'];
+const WINDOWS_DRIVE_PATTERN = /^[A-Za-z]:\\?$/;
+
+export const isSshGitUrl = (url: string): boolean => {
+  const trimmedUrl = url.trim();
+  return SSH_PREFIXES.some((prefix) => trimmedUrl.startsWith(prefix));
+};
+
+export const shouldShowGithubAuthentication = (
+  workspaceType: WorkspaceType,
+  githubUrl: string,
+): boolean => workspaceType === 'new' && githubUrl.trim().length > 0 && !isSshGitUrl(githubUrl);
+
+export const isCloneWorkflow = (workspaceType: WorkspaceType, githubUrl: string): boolean =>
+  workspaceType === 'new' && githubUrl.trim().length > 0;
+
+export const getSuggestionRootPath = (inputPath: string): string => {
+  const trimmedPath = inputPath.trim();
+  const lastSeparatorIndex = Math.max(trimmedPath.lastIndexOf('/'), trimmedPath.lastIndexOf('\\'));
+  if (lastSeparatorIndex === 2 && /^[A-Za-z]:/.test(trimmedPath)) {
+    return `${trimmedPath.slice(0, 2)}\\`;
+  }
+
+  return lastSeparatorIndex > 0 ? trimmedPath.slice(0, lastSeparatorIndex) : '~';
+};
+
+// Handles root edge cases for Unix-like and Windows paths.
+export const getParentPath = (currentPath: string): string | null => {
+  if (currentPath === '~' || currentPath === '/' || WINDOWS_DRIVE_PATTERN.test(currentPath)) {
+    return null;
+  }
+
+  const lastSeparatorIndex = Math.max(currentPath.lastIndexOf('/'), currentPath.lastIndexOf('\\'));
+  if (lastSeparatorIndex <= 0) {
+    return '/';
+  }
+
+  if (lastSeparatorIndex === 2 && /^[A-Za-z]:/.test(currentPath)) {
+    return `${currentPath.slice(0, 2)}\\`;
+  }
+
+  return currentPath.slice(0, lastSeparatorIndex);
+};
+
+export const joinFolderPath = (basePath: string, folderName: string): string => {
+  const normalizedBasePath = basePath.trim().replace(/[\\/]+$/, '');
+  const separator =
+    normalizedBasePath.includes('\\') && !normalizedBasePath.includes('/') ? '\\' : '/';
+  return `${normalizedBasePath}${separator}${folderName.trim()}`;
+};
diff --git a/src/components/sidebar/view/subcomponents/SidebarModals.tsx b/src/components/sidebar/view/subcomponents/SidebarModals.tsx
index e5bec6be..b12f9266 100644
--- a/src/components/sidebar/view/subcomponents/SidebarModals.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarModals.tsx
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import { AlertTriangle, Trash2 } from 'lucide-react';
 import type { TFunction } from 'i18next';
 import { Button } from '../../../../shared/view/ui';
-import ProjectCreationWizard from '../../../ProjectCreationWizard';
+
 import Settings from '../../../settings/view/Settings';
 import VersionUpgradeModal from '../../../version-upgrade/view';
 import type { Project } from '../../../../types/app';
@@ -11,6 +11,7 @@ import type { ReleaseInfo } from '../../../../types/sharedTypes';
 import type { InstallMode } from '../../../../hooks/useVersionCheck';
 import { normalizeProjectForSettings } from '../../utils/utils';
 import type { DeleteProjectConfirmation, SessionDeleteConfirmation, SettingsProject } from '../../types/types';
+import ProjectCreationWizard from '../../../project-creation-wizard';
 
 type SidebarModalsProps = {
   projects: Project[];