diff --git a/src/app/globals.css b/src/app/globals.css
index ae0c3bb..297d0a5 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -380,3 +380,14 @@
       0 0 40px rgba(192, 132, 252, 0.25);
   }
 }
+
+/* Убираем стрелки у input[type="number"] */
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
diff --git a/src/components/supplies/create-supply-page.tsx b/src/components/supplies/create-supply-page.tsx
index 631bbe4..684edca 100644
--- a/src/components/supplies/create-supply-page.tsx
+++ b/src/components/supplies/create-supply-page.tsx
@@ -403,7 +403,7 @@ export function CreateSupplyPage() {
               </Card>
             )}
 
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
               {mockProducts.map((product) => {
                 const selectedQuantity = getSelectedQuantity(product.id)
                 const discountedPrice = product.discount 
@@ -419,34 +419,22 @@ export function CreateSupplyPage() {
                         className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                       />
                       
-                      {/* Badges в верхних углах */}
-                      <div className="absolute top-3 left-3 flex flex-col space-y-2">
-                        {product.isNew && (
-                          <Badge className="bg-blue-500 text-white border-0 font-medium">
-                            <Zap className="h-3 w-3 mr-1" />
-                            NEW
-                          </Badge>
-                        )}
-                        {product.isBestseller && (
-                          <Badge className="bg-orange-500 text-white border-0 font-medium">
-                            <Star className="h-3 w-3 mr-1" />
-                            ХИТ
-                          </Badge>
-                        )}
-                        {product.discount && (
-                          <Badge className="bg-red-500 text-white border-0 font-bold">
-                            -{product.discount}%
-                          </Badge>
-                        )}
-                      </div>
-
                       {/* Количество в наличии */}
-                      <div className="absolute top-3 right-3">
-                        <Badge className={`${product.quantity > 50 ? 'bg-green-500/80' : product.quantity > 10 ? 'bg-yellow-500/80' : 'bg-red-500/80'} text-white border-0 backdrop-blur`}>
-                          {product.quantity} шт
+                      <div className="absolute top-2 right-2">
+                        <Badge className={`${product.quantity > 50 ? 'bg-green-500/80' : product.quantity > 10 ? 'bg-yellow-500/80' : 'bg-red-500/80'} text-white border-0 backdrop-blur text-xs`}>
+                          {product.quantity}
                         </Badge>
                       </div>
 
+                      {/* Discount badge */}
+                      {product.discount && (
+                        <div className="absolute top-2 left-2">
+                          <Badge className="bg-red-500 text-white border-0 font-bold text-xs">
+                            -{product.discount}%
+                          </Badge>
+                        </div>
+                      )}
+
                       {/* Overlay с кнопками */}
                       <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                         <div className="flex space-x-2">
@@ -460,123 +448,102 @@ export function CreateSupplyPage() {
                       </div>
                     </div>
                     
-                    <div className="p-5 space-y-4">
+                    <div className="p-3 space-y-3">
                       {/* Заголовок и бренд */}
                       <div>
-                        <div className="flex items-center justify-between mb-2">
+                        <div className="flex items-center justify-between mb-1">
                           {product.brand && (
                             <Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30 text-xs">
                               {product.brand}
                             </Badge>
                           )}
-                          <Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs">
-                            {product.category}
-                          </Badge>
+                          {product.isNew && (
+                            <Badge className="bg-blue-500 text-white border-0 text-xs">
+                              NEW
+                            </Badge>
+                          )}
+                          {product.isBestseller && (
+                            <Badge className="bg-orange-500 text-white border-0 text-xs">
+                              ХИТ
+                            </Badge>
+                          )}
                         </div>
-                        <h3 className="text-white font-semibold text-lg mb-1 line-clamp-2 leading-tight">
+                        <h3 className="text-white font-semibold text-sm mb-1 line-clamp-2 leading-tight">
                           {product.name}
                         </h3>
-                        <p className="text-white/60 text-xs mb-2">
-                          Артикул: {product.article}
-                        </p>
                       </div>
 
-                      {/* Описание */}
-                      <p className="text-white/70 text-sm line-clamp-2 leading-relaxed">
-                        {product.description}
-                      </p>
-
-                      {/* Характеристики */}
-                      <div className="space-y-2">
-                        {product.color && (
-                          <div className="text-white/60 text-xs flex items-center">
-                            <div className="w-3 h-3 rounded-full bg-gray-400 mr-2"></div>
-                            Цвет: <span className="text-white ml-1">{product.color}</span>
-                          </div>
-                        )}
-                        {product.size && (
-                          <div className="text-white/60 text-xs">
-                            Размер: <span className="text-white">{product.size}</span>
-                          </div>
-                        )}
-                        {product.weight && (
-                          <div className="text-white/60 text-xs">
-                            Вес: <span className="text-white">{product.weight} г</span>
-                          </div>
-                        )}
+                      {/* Основная характеристика */}
+                      <div className="text-white/60 text-xs">
+                        {product.color && <span className="text-white">{product.color}</span>}
+                        {product.size && <span className="text-white ml-2">{product.size}</span>}
                       </div>
 
                       {/* Цена */}
-                      <div className="flex items-center justify-between pt-3 border-t border-white/10">
-                        <div>
-                          <div className="flex items-center space-x-2">
-                            <div className="text-white font-bold text-xl">
-                              {formatCurrency(discountedPrice)}
-                            </div>
-                            {product.discount && (
-                              <div className="text-white/40 text-sm line-through">
-                                {formatCurrency(product.price)}
-                              </div>
-                            )}
+                      <div className="pt-2 border-t border-white/10">
+                        <div className="flex items-center space-x-2">
+                          <div className="text-white font-bold text-lg">
+                            {formatCurrency(discountedPrice)}
                           </div>
-                          <div className="text-white/60 text-xs">за штуку</div>
+                          {product.discount && (
+                            <div className="text-white/40 text-xs line-through">
+                              {formatCurrency(product.price)}
+                            </div>
+                          )}
                         </div>
                       </div>
 
                       {/* Управление количеством */}
-                      <div className="flex items-center justify-between space-x-3">
-                        <div className="flex items-center space-x-2 flex-1">
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => updateProductQuantity(product.id, Math.max(0, selectedQuantity - 1))}
-                            disabled={selectedQuantity === 0}
-                            className="h-9 w-9 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
-                          >
-                            <Minus className="h-4 w-4" />
-                          </Button>
-                          <Input
-                            type="number"
-                            value={selectedQuantity}
-                            onChange={(e) => {
-                              const value = Math.max(0, Math.min(product.quantity, parseInt(e.target.value) || 0))
-                              updateProductQuantity(product.id, value)
-                            }}
-                            className="h-9 w-16 text-center bg-white/10 border-white/20 text-white text-sm"
-                            min={0}
-                            max={product.quantity}
-                          />
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => updateProductQuantity(product.id, Math.min(product.quantity, selectedQuantity + 1))}
-                            disabled={selectedQuantity >= product.quantity}
-                            className="h-9 w-9 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
-                          >
-                            <Plus className="h-4 w-4" />
-                          </Button>
-                        </div>
+                      <div className="flex items-center space-x-2">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => updateProductQuantity(product.id, Math.max(0, selectedQuantity - 1))}
+                          disabled={selectedQuantity === 0}
+                          className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
+                        >
+                          <Minus className="h-3 w-3" />
+                        </Button>
+                        <input
+                          type="text"
+                          inputMode="numeric"
+                          pattern="[0-9]*"
+                          value={selectedQuantity}
+                          onChange={(e) => {
+                            const value = e.target.value.replace(/[^0-9]/g, '')
+                            const numValue = Math.max(0, Math.min(product.quantity, parseInt(value) || 0))
+                            updateProductQuantity(product.id, numValue)
+                          }}
+                          onFocus={(e) => e.target.select()}
+                          className="h-8 w-12 text-center bg-white/10 border border-white/20 text-white text-sm rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                        />
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => updateProductQuantity(product.id, Math.min(product.quantity, selectedQuantity + 1))}
+                          disabled={selectedQuantity >= product.quantity}
+                          className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
+                        >
+                          <Plus className="h-3 w-3" />
+                        </Button>
                         
                         {selectedQuantity > 0 && (
-                          <Button
-                            size="sm"
-                            className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white flex-shrink-0"
-                          >
-                            <ShoppingCart className="h-4 w-4 mr-1" />
+                          <Badge className="bg-gradient-to-r from-purple-500 to-pink-500 text-white border-0 text-xs ml-auto">
+                            <ShoppingCart className="h-3 w-3 mr-1" />
                             {selectedQuantity}
-                          </Button>
+                          </Badge>
                         )}
                       </div>
 
                       {/* Сумма для выбранного товара */}
                       {selectedQuantity > 0 && (
-                        <div className="bg-gradient-to-r from-green-500/20 to-emerald-500/20 border border-green-500/30 rounded-lg p-3">
-                          <div className="text-green-300 text-sm font-medium text-center">
-                            Сумма: {formatCurrency(discountedPrice * selectedQuantity)}
+                        <div className="bg-gradient-to-r from-green-500/20 to-emerald-500/20 border border-green-500/30 rounded p-2">
+                          <div className="text-green-300 text-xs font-medium text-center">
+                            {formatCurrency(discountedPrice * selectedQuantity)}
                             {product.discount && (
-                              <span className="text-green-200 text-xs ml-2">
-                                (экономия {formatCurrency((product.price - discountedPrice) * selectedQuantity)})
-                              </span>
+                              <div className="text-green-200 text-xs">
+                                экономия {formatCurrency((product.price - discountedPrice) * selectedQuantity)}
+                              </div>
                             )}
                           </div>
                         </div>