diff --git a/src/app/supplies/create-suppliers/page.tsx b/src/app/supplies/create-suppliers/page.tsx
index c262f01..d3b8b7a 100644
--- a/src/app/supplies/create-suppliers/page.tsx
+++ b/src/app/supplies/create-suppliers/page.tsx
@@ -1,5 +1,5 @@
 import { AuthGuard } from '@/components/auth-guard'
-import { CreateSuppliersSupplyPage } from '@/components/supplies/create-suppliers-supply-page'
+import { CreateSuppliersSupplyPage } from '@/components/supplies/create-suppliers'
 
 export default function CreateSuppliersSupplyPageRoute() {
   return (
diff --git a/src/components/supplies/create-suppliers/index.tsx b/src/components/supplies/create-suppliers/index.tsx
new file mode 100644
index 0000000..fe7952e
--- /dev/null
+++ b/src/components/supplies/create-suppliers/index.tsx
@@ -0,0 +1,241 @@
+/**
+ * СОЗДАНИЕ ПОСТАВОК ПОСТАВЩИКОВ - НОВАЯ МОДУЛЬНАЯ АРХИТЕКТУРА
+ *
+ * Рефакторинг create-suppliers-supply-page.tsx
+ * Композиция из блок-компонентов с использованием custom hooks
+ */
+
+'use client'
+
+import { ArrowLeft } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+
+import { Sidebar } from '@/components/dashboard/sidebar'
+import { Button } from '@/components/ui/button'
+import { useAuth } from '@/hooks/useAuth'
+import { useSidebar } from '@/hooks/useSidebar'
+
+import { CartBlock } from './blocks/CartBlock'
+import { DetailedCatalogBlock } from './blocks/DetailedCatalogBlock'
+import { ProductCardsBlock } from './blocks/ProductCardsBlock'
+import { SuppliersBlock } from './blocks/SuppliersBlock'
+import { useProductCatalog } from './hooks/useProductCatalog'
+import { useRecipeBuilder } from './hooks/useRecipeBuilder'
+import { useSupplierSelection } from './hooks/useSupplierSelection'
+import { useSupplyCart } from './hooks/useSupplyCart'
+import type { GoodsSupplier, GoodsProduct, ProductRecipe } from './types/supply-creation.types'
+
+export function CreateSuppliersSupplyPage() {
+  const router = useRouter()
+  const { user: _user } = useAuth()
+  const { getSidebarMargin } = useSidebar()
+
+  // 1. ХУКА ВЫБОРА ПОСТАВЩИКОВ
+  const {
+    selectedSupplier,
+    setSelectedSupplier,
+    searchQuery,
+    setSearchQuery,
+    suppliers,
+    allCounterparties,
+    loading: suppliersLoading,
+    error: suppliersError,
+  } = useSupplierSelection()
+
+  // 2. ХУКА КАТАЛОГА ТОВАРОВ
+  const {
+    products,
+    allSelectedProducts,
+    setAllSelectedProducts,
+    productQuantities: _productQuantities,
+    loading: _productsLoading,
+    getProductQuantity,
+    addProductToSelected,
+    updateSelectedProductQuantity,
+    removeProductFromSelected,
+  } = useProductCatalog({ selectedSupplier })
+
+  // 4. ХУКА КОРЗИНЫ ПОСТАВОК (сначала, чтобы получить selectedFulfillment)
+  const {
+    selectedGoods,
+    setSelectedGoods,
+    deliveryDate,
+    setDeliveryDate,
+    selectedLogistics,
+    setSelectedLogistics,
+    selectedFulfillment,
+    setSelectedFulfillment,
+    isCreatingSupply,
+    totalGoodsAmount,
+    isFormValid,
+    addToCart,
+    removeFromCart,
+    handleCreateSupply,
+  } = useSupplyCart({
+    selectedSupplier,
+    allCounterparties,
+    productRecipes: {}, // Изначально пустые рецепты
+  })
+
+  // 3. ХУКА ПОСТРОЕНИЯ РЕЦЕПТУР (получает selectedFulfillment из корзины)
+  const {
+    productRecipes,
+    setProductRecipes,
+    fulfillmentServices,
+    fulfillmentConsumables,
+    sellerConsumables,
+    initializeProductRecipe,
+    getProductRecipe: _getProductRecipe,
+  } = useRecipeBuilder({ selectedFulfillment })
+
+  // Обработчики событий для блоков
+  const handleSupplierSelect = (supplier: GoodsSupplier) => {
+    setSelectedSupplier(supplier)
+    // Сбрасываем выбранные товары при смене поставщика
+    setAllSelectedProducts([])
+    setSelectedGoods([])
+  }
+
+  const handleProductAdd = (product: GoodsProduct) => {
+    const quantity = getProductQuantity(product.id) || 1
+    addProductToSelected(product, quantity)
+    initializeProductRecipe(product.id)
+
+    // Добавляем в корзину
+    addToCart(product, quantity)
+  }
+
+  const handleQuantityChange = (productId: string, quantity: number) => {
+    updateSelectedProductQuantity(productId, quantity)
+
+    // Синхронизируем с корзиной
+    const product = allSelectedProducts.find((p) => p.id === productId)
+    if (product && quantity > 0) {
+      addToCart(product, quantity)
+    } else if (quantity === 0) {
+      removeFromCart(productId)
+      removeProductFromSelected(productId)
+    }
+  }
+
+  const handleRecipeChange = (productId: string, recipe: ProductRecipe) => {
+    setProductRecipes((prev) => ({
+      ...prev,
+      [productId]: recipe,
+    }))
+  }
+
+  // Обработчик ошибок
+  if (suppliersError) {
+    return (
+      <div className="h-screen flex overflow-hidden">
+        <Sidebar />
+        <main className={`flex-1 ${getSidebarMargin()} overflow-hidden transition-all duration-300`}>
+          <div className="h-full flex items-center justify-center">
+            <div className="text-center">
+              <div className="text-red-400 text-lg font-semibold mb-2">Ошибка загрузки данных</div>
+              <div className="text-white/60 text-sm mb-4">Не удалось загрузить список поставщиков</div>
+              <Button onClick={() => router.push('/supplies')} variant="outline" className="text-white border-white/20">
+                Вернуться к поставкам
+              </Button>
+            </div>
+          </div>
+        </main>
+      </div>
+    )
+  }
+
+  return (
+    <div className="h-screen flex overflow-hidden">
+      <Sidebar />
+      <main className={`flex-1 ${getSidebarMargin()} overflow-hidden transition-all duration-300`}>
+        <div className="h-full flex flex-col">
+          {/* ЗАГОЛОВОК И НАВИГАЦИЯ */}
+          <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-4 mb-2">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <Button
+                  onClick={() => router.push('/supplies')}
+                  variant="ghost"
+                  size="sm"
+                  className="text-white/70 hover:text-white hover:bg-white/10"
+                >
+                  <ArrowLeft className="h-4 w-4 mr-2" />
+                  Назад к поставкам
+                </Button>
+                <div className="h-4 w-px bg-white/20"></div>
+                <h1 className="text-white font-semibold text-lg">Создание поставки от поставщика</h1>
+              </div>
+              {selectedSupplier && (
+                <div className="text-white/60 text-sm">
+                  Поставщик: {selectedSupplier.name || selectedSupplier.fullName}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* ОСНОВНОЙ КОНТЕНТ - 4 БЛОКА */}
+          <div className="flex-1 flex gap-2 min-h-0">
+            {/* ЛЕВАЯ КОЛОНКА - 3 блока */}
+            <div className="flex-1 flex flex-col gap-2 min-h-0">
+              {/* БЛОК 1: ВЫБОР ПОСТАВЩИКОВ */}
+              <SuppliersBlock
+                suppliers={suppliers}
+                selectedSupplier={selectedSupplier}
+                searchQuery={searchQuery}
+                loading={suppliersLoading}
+                onSupplierSelect={handleSupplierSelect}
+                onSearchChange={setSearchQuery}
+              />
+
+              {/* БЛОК 2: КАРТОЧКИ ТОВАРОВ (МИНИ-ПРЕВЬЮ) */}
+              <ProductCardsBlock
+                products={products}
+                selectedSupplier={selectedSupplier}
+                onProductAdd={handleProductAdd}
+              />
+
+              {/* БЛОК 3: ДЕТАЛЬНЫЙ КАТАЛОГ С РЕЦЕПТУРОЙ */}
+              <div className="flex-1 min-h-0">
+                <DetailedCatalogBlock
+                  allSelectedProducts={allSelectedProducts}
+                  productRecipes={productRecipes}
+                  fulfillmentServices={fulfillmentServices}
+                  fulfillmentConsumables={fulfillmentConsumables}
+                  sellerConsumables={sellerConsumables}
+                  deliveryDate={deliveryDate}
+                  selectedFulfillment={selectedFulfillment}
+                  allCounterparties={allCounterparties}
+                  onQuantityChange={handleQuantityChange}
+                  onRecipeChange={handleRecipeChange}
+                  onDeliveryDateChange={setDeliveryDate}
+                  onFulfillmentChange={setSelectedFulfillment}
+                  onProductRemove={(productId) => {
+                    removeFromCart(productId)
+                    removeProductFromSelected(productId)
+                  }}
+                />
+              </div>
+            </div>
+
+            {/* ПРАВАЯ КОЛОНКА - БЛОК 4: КОРЗИНА */}
+            <CartBlock
+              selectedGoods={selectedGoods}
+              selectedSupplier={selectedSupplier}
+              deliveryDate={deliveryDate}
+              selectedFulfillment={selectedFulfillment}
+              selectedLogistics={selectedLogistics}
+              allCounterparties={allCounterparties}
+              totalAmount={totalGoodsAmount}
+              isFormValid={isFormValid}
+              isCreatingSupply={isCreatingSupply}
+              onLogisticsChange={setSelectedLogistics}
+              onCreateSupply={handleCreateSupply}
+              onItemRemove={removeFromCart}
+            />
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}