diff --git a/src/renderer/api/commands.ts b/src/renderer/api/commands.ts
new file mode 100644
index 0000000..2f74c53
--- /dev/null
+++ b/src/renderer/api/commands.ts
@@ -0,0 +1,59 @@
+import { API_BASE_URL } from '../api';
+
+export interface PrankCommand {
+  id: string;
+  name: string;
+  description: string;
+  price: number;
+  command_template: string;
+  server_ids: string[]; // ["*"] или конкретные id
+  targetDescription: string;
+  globalDescription: string;
+}
+
+export interface PrankServer {
+  id: string;
+  name: string;
+  ip: string;
+  online_players: number;
+  max_players: number;
+}
+
+export const fetchPrankCommands = async (): Promise<PrankCommand[]> => {
+  const res = await fetch(`${API_BASE_URL}/api/pranks/commands`);
+  if (!res.ok) throw new Error('Failed to load prank commands');
+  return res.json();
+};
+
+export const fetchPrankServers = async (): Promise<PrankServer[]> => {
+  const res = await fetch(`${API_BASE_URL}/api/pranks/servers`);
+  if (!res.ok) throw new Error('Failed to load prank servers');
+  return res.json();
+};
+
+export const executePrank = async (
+  username: string,
+  commandId: string,
+  targetPlayer: string,
+  serverId: string,
+) => {
+  const res = await fetch(
+    `${API_BASE_URL}/api/pranks/execute?username=${username}`,
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        command_id: commandId,
+        target_player: targetPlayer,
+        server_id: serverId,
+      }),
+    },
+  );
+
+  if (!res.ok) {
+    const err = await res.text();
+    throw new Error(err);
+  }
+
+  return res.json();
+};
diff --git a/src/renderer/pages/Shop.tsx b/src/renderer/pages/Shop.tsx
index c7038a8..b03061c 100644
--- a/src/renderer/pages/Shop.tsx
+++ b/src/renderer/pages/Shop.tsx
@@ -1,6 +1,19 @@
 import {
-  Box, Typography, Button, Grid,
-  FormControl, Select, MenuItem, InputLabel
+  Box,
+  Typography,
+  Button,
+  Grid,
+  FormControl,
+  Select,
+  MenuItem,
+  InputLabel,
+  Tabs,
+  Tab,
+  TextField,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
 } from '@mui/material';
 import {
   Cape,
@@ -32,9 +45,36 @@ import ShopItem from '../components/ShopItem';
 import { playBuySound, primeSounds } from '../utils/sounds';
 import CustomNotification from '../components/Notifications/CustomNotification';
 import type { NotificationPosition } from '../components/Notifications/CustomNotification';
-import { isNotificationsEnabled, getNotifPositionFromSettings } from '../utils/notifications';
+import {
+  executePrank,
+  fetchPrankCommands,
+  fetchPrankServers,
+  PrankCommand,
+  PrankServer,
+} from '../api/commands';
+
+import {
+  isNotificationsEnabled,
+  getNotifPositionFromSettings,
+} from '../utils/notifications';
 import { translateServer } from '../utils/serverTranslator';
 
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div role="tabpanel" hidden={value !== index} {...other}>
+      {value === index && <Box sx={{ pt: '1.4vw' }}>{children}</Box>}
+    </div>
+  );
+}
+
 function getRarityByWeight(
   weight?: number,
 ): 'common' | 'rare' | 'epic' | 'legendary' {
@@ -64,6 +104,15 @@ function getRarityColor(weight?: number): string {
 const GRADIENT =
   'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)';
 
+const GLASS_DIALOG_SX = {
+  borderRadius: '1.4vw',
+  background:
+    'radial-gradient(circle at 10% 10%, rgba(242,113,33,0.16), transparent 55%), rgba(10,10,20,0.92)',
+  border: '1px solid rgba(255,255,255,0.10)',
+  boxShadow: '0 1.6vw 4vw rgba(0,0,0,0.6)',
+  backdropFilter: 'blur(16px)',
+};
+
 export default function Shop() {
   const [storeCapes, setStoreCapes] = useState<StoreCape[]>([]);
   const [userCapes, setUserCapes] = useState<Cape[]>([]);
@@ -112,6 +161,33 @@ export default function Shop() {
   const [rouletteCaseItems, setRouletteCaseItems] = useState<CaseItem[]>([]);
   const [rouletteReward, setRouletteReward] = useState<CaseItem | null>(null);
 
+  // TABS
+  const [tabValue, setTabValue] = useState<number>(0);
+
+  const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
+    setTabValue(newValue);
+  };
+
+  //команды
+
+  const [prankCommands, setPrankCommands] = useState<PrankCommand[]>([]);
+  const [prankServers, setPrankServers] = useState<PrankServer[]>([]);
+
+  const [pranksLoading, setPranksLoading] = useState(false);
+
+  const [selectedPrankServer, setSelectedPrankServer] = useState<string>('');
+  const [targetPlayer, setTargetPlayer] = useState<string>('');
+  const [processingCommandId, setProcessingCommandId] = useState<string | null>(
+    null,
+  );
+
+  const [prankDialogOpen, setPrankDialogOpen] = useState(false);
+  const [selectedPrank, setSelectedPrank] = useState<PrankCommand | null>(null);
+
+  const [prankTarget, setPrankTarget] = useState('');
+  const [prankServerId, setPrankServerId] = useState<string>('');
+  const [prankProcessing, setPrankProcessing] = useState(false);
+
   // Уведомления
   const [notification, setNotification] = useState<{
     open: boolean;
@@ -148,7 +224,7 @@ export default function Shop() {
       console.error('Ошибка при получении прокачек:', error);
 
       if (!isNotificationsEnabled()) return;
-      showNotification('Ошибка при загрузке прокачки!', 'error')
+      showNotification('Ошибка при загрузке прокачки!', 'error');
     } finally {
       setBonusesLoading(false);
     }
@@ -175,6 +251,31 @@ export default function Shop() {
     }
   };
 
+  // Загрузка команд
+  useEffect(() => {
+    if (tabValue !== 3) return;
+
+    const load = async () => {
+      try {
+        setPranksLoading(true);
+        const [commands, servers] = await Promise.all([
+          fetchPrankCommands(),
+          fetchPrankServers(),
+        ]);
+        setPrankCommands(commands);
+        setPrankServers(servers);
+        if (servers.length) setSelectedPrankServer(servers[0].id);
+      } catch (e) {
+        console.error(e);
+        showNotification('Ошибка загрузки пакостей', 'error');
+      } finally {
+        setPranksLoading(false);
+      }
+    };
+
+    load();
+  }, [tabValue]);
+
   // Функция для загрузки плащей пользователя
   const loadUserCapes = async (username: string) => {
     try {
@@ -194,12 +295,12 @@ export default function Shop() {
       playBuySound();
 
       if (!isNotificationsEnabled()) return;
-      showNotification('Плащ успешно куплен!', 'success')
+      showNotification('Плащ успешно куплен!', 'success');
     } catch (error) {
       console.error('Ошибка при покупке плаща:', error);
 
       if (!isNotificationsEnabled()) return;
-      showNotification('Ошибка при покупке плаща!', 'error')
+      showNotification('Ошибка при покупке плаща!', 'error');
     }
   };
 
@@ -279,9 +380,11 @@ export default function Shop() {
 
   const handlePurchaseBonus = async (bonusTypeId: string) => {
     if (!username) {
-
       if (!isNotificationsEnabled()) return;
-      showNotification('Не найдено имя игрока. Авторизируйтесь в лаунчере!', 'error')
+      showNotification(
+        'Не найдено имя игрока. Авторизируйтесь в лаунчере!',
+        'error',
+      );
       return;
     }
 
@@ -294,12 +397,12 @@ export default function Shop() {
         await loadBonuses(username);
 
         if (!isNotificationsEnabled()) return;
-        showNotification('Прокачка успешно куплена!', 'success')
+        showNotification('Прокачка успешно куплена!', 'success');
       } catch (error) {
         console.error('Ошибка при покупке прокачки:', error);
 
         if (!isNotificationsEnabled()) return;
-        showNotification('Ошибка при прокачке!', 'error')
+        showNotification('Ошибка при прокачке!', 'error');
       }
     });
   };
@@ -314,12 +417,12 @@ export default function Shop() {
         await loadBonuses(username);
 
         if (!isNotificationsEnabled()) return;
-        showNotification('Бонус улучшен!', 'success')
+        showNotification('Бонус улучшен!', 'success');
       } catch (error) {
         console.error('Ошибка при улучшении бонуса:', error);
 
         if (!isNotificationsEnabled()) return;
-        showNotification('Ошибка при улучшении бонуса!', 'error')
+        showNotification('Ошибка при улучшении бонуса!', 'error');
       }
     });
   };
@@ -334,39 +437,35 @@ export default function Shop() {
       } catch (error) {
         console.error('Ошибка при переключении бонуса:', error);
         if (!isNotificationsEnabled()) return;
-        showNotification('Ошибка при переключении бонуса!', 'error')
+        showNotification('Ошибка при переключении бонуса!', 'error');
       }
     });
   };
 
   const caseServers = Array.from(
-  new Set(
-    (cases || [])
-      .flatMap((c) => c.server_ips || [])
-      .filter(Boolean),
-  ),
-);
+    new Set((cases || []).flatMap((c) => c.server_ips || []).filter(Boolean)),
+  );
 
-useEffect(() => {
-  if (caseServers.length > 0) {
-    // если игрок онлайн — по умолчанию его сервер, если он есть в кейсах
-    const preferred =
-      playerServer?.ip && caseServers.includes(playerServer.ip)
-        ? playerServer.ip
-        : caseServers[0];
+  useEffect(() => {
+    if (caseServers.length > 0) {
+      // если игрок онлайн — по умолчанию его сервер, если он есть в кейсах
+      const preferred =
+        playerServer?.ip && caseServers.includes(playerServer.ip)
+          ? playerServer.ip
+          : caseServers[0];
 
-    setSelectedCaseServerIp(preferred);
-  }
-}, [caseServers.length, playerServer?.ip]);
+      setSelectedCaseServerIp(preferred);
+    }
+  }, [caseServers.length, playerServer?.ip]);
 
-const filteredCases = (cases || []).filter((c) => {
-  const allowed = c.server_ips || [];
-  // если список пуст — значит кейс доступен везде
-  if (allowed.length === 0) return true;
+  const filteredCases = (cases || []).filter((c) => {
+    const allowed = c.server_ips || [];
+    // если список пуст — значит кейс доступен везде
+    if (allowed.length === 0) return true;
 
-  // иначе — показываем только те, где выбранный сервер разрешён
-  return !!selectedCaseServerIp && allowed.includes(selectedCaseServerIp);
-});
+    // иначе — показываем только те, где выбранный сервер разрешён
+    return !!selectedCaseServerIp && allowed.includes(selectedCaseServerIp);
+  });
 
   // Фильтруем плащи, которые уже куплены пользователем
   const availableCapes = storeCapes.filter(
@@ -375,55 +474,70 @@ const filteredCases = (cases || []).filter((c) => {
   );
 
   const handleOpenCase = async (caseData: Case) => {
-  if (!username) {
-    if (!isNotificationsEnabled()) return;
-    showNotification('Не найдено имя игрока. Авторизуйтесь в лаунчере!', 'error')
-    return;
-  }
+    if (!username) {
+      if (!isNotificationsEnabled()) return;
+      showNotification(
+        'Не найдено имя игрока. Авторизуйтесь в лаунчере!',
+        'error',
+      );
+      return;
+    }
 
-  if (!selectedCaseServerIp) {
-    if (!isNotificationsEnabled()) return;
-    showNotification('Выберите сервер для открытия кейса!', 'warning')
-    return;
-  }
+    if (!selectedCaseServerIp) {
+      if (!isNotificationsEnabled()) return;
+      showNotification('Выберите сервер для открытия кейса!', 'warning');
+      return;
+    }
 
-  const allowedIps = caseData.server_ips || [];
-  if (allowedIps.length > 0 && !allowedIps.includes(selectedCaseServerIp)) {
-    if (!isNotificationsEnabled()) return;
-    showNotification(`Этот кейс доступен на: ${allowedIps
-        .map((ip) => translateServer(`Server ${ip}`))
-        .join(', ')}`, 'warning')
-    return;
-  }
+    const allowedIps = caseData.server_ips || [];
+    if (allowedIps.length > 0 && !allowedIps.includes(selectedCaseServerIp)) {
+      if (!isNotificationsEnabled()) return;
+      showNotification(
+        `Этот кейс доступен на: ${allowedIps
+          .map((ip) => translateServer(`Server ${ip}`))
+          .join(', ')}`,
+        'warning',
+      );
+      return;
+    }
 
-  if (isOpening) return;
+    if (isOpening) return;
 
-  try {
-    setIsOpening(true);
+    try {
+      setIsOpening(true);
 
-    const fullCase = await fetchCase(caseData.id);
-    const caseItems: CaseItem[] = fullCase.items || [];
-    setSelectedCase(fullCase);
+      const fullCase = await fetchCase(caseData.id);
+      const caseItems: CaseItem[] = fullCase.items || [];
+      setSelectedCase(fullCase);
 
-    // ✅ открываем на выбранном сервере (даже если игрок не на сервере)
-    const result = await openCase(fullCase.id, username, selectedCaseServerIp);
+      // ✅ открываем на выбранном сервере (даже если игрок не на сервере)
+      const result = await openCase(
+        fullCase.id,
+        username,
+        selectedCaseServerIp,
+      );
 
-    setRouletteCaseItems(caseItems);
-    setRouletteReward(result.reward);
-    setRouletteOpen(true);
-    playBuySound();
+      setRouletteCaseItems(caseItems);
+      setRouletteReward(result.reward);
+      setRouletteOpen(true);
+      playBuySound();
 
-    if (!isNotificationsEnabled()) return;
-    showNotification('Кейс открыт!', 'success')
-  } catch (error) {
-    console.error('Ошибка при открытии кейса:', error);
+      if (!isNotificationsEnabled()) return;
+      showNotification('Кейс открыт!', 'success');
+    } catch (error) {
+      console.error('Ошибка при открытии кейса:', error);
 
-    if (!isNotificationsEnabled()) return;
-    showNotification((String(error instanceof Error ? error.message : 'Ошибка при открытии кейса!')), 'error')
-  } finally {
-    setIsOpening(false);
-  }
-};
+      if (!isNotificationsEnabled()) return;
+      showNotification(
+        String(
+          error instanceof Error ? error.message : 'Ошибка при открытии кейса!',
+        ),
+        'error',
+      );
+    } finally {
+      setIsOpening(false);
+    }
+  };
 
   const handleCloseNotification = () => {
     setNotification((prev) => ({ ...prev, open: false }));
@@ -470,110 +584,55 @@ const filteredCases = (cases || []).filter((c) => {
             paddingRight: '1.5vw',
           }}
         >
-          {/* Блок прокачки */}
-          <Box
+          <Tabs
+            value={tabValue}
+            onChange={handleTabChange}
+            disableRipple
             sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 2,
-              mt: '2vh'
+              minHeight: '3vw',
+              mb: '1.2vw',
+              '& .MuiTabs-indicator': {
+                height: '0.35vw',
+                borderRadius: '999px',
+                background: GRADIENT,
+              },
             }}
           >
-            <Typography
-              variant="h6"
+            {['Прокачка', 'Кейсы', 'Плащи', 'Предметы/пакости'].map((label) => (
+              <Tab
+                key={label}
+                label={label}
+                disableRipple
+                sx={{
+                  minHeight: '3vw',
+                  fontFamily: 'Benzin-Bold',
+                  color: 'rgba(255,255,255,0.85)',
+                  textTransform: 'uppercase',
+                  letterSpacing: 0.4,
+                  borderRadius: '999px',
+                  mx: '0.2vw',
+                  '&.Mui-selected': {
+                    color: '#fff',
+                  },
+                  '&:hover': {
+                    color: '#fff',
+                    background: 'rgba(255,255,255,0.06)',
+                  },
+                  transition: 'all 0.18s ease',
+                }}
+              />
+            ))}
+          </Tabs>
+          <TabPanel value={tabValue} index={0}>
+            {/* Блок прокачки */}
+            <Box
               sx={{
-                fontFamily: 'Benzin-Bold',
-                backgroundImage:
-                  'linear-gradient(136deg, rgb(242,113,33), rgb(233,64,87), rgb(138,35,135))',
-                WebkitBackgroundClip: 'text',
-                WebkitTextFillColor: 'transparent',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 2,
+                mt: '2vh',
               }}
             >
-              Прокачка
-            </Typography>
-
-            {bonusesLoading ? (
-              <FullScreenLoader
-                fullScreen={false}
-                message="Загрузка прокачки..."
-              />
-            ) : bonusTypes.length > 0 ? (
-              <Grid container spacing={2} sx={{ mb: 4 }}>
-                {bonusTypes.map((bt) => {
-                  const userBonus = userBonuses.find(
-                    (ub) => ub.bonus_type_id === bt.id,
-                  );
-                  const owned = !!userBonus;
-
-                  const level = owned ? userBonus!.level : 0;
-                  const effectValue = owned
-                    ? userBonus!.effect_value
-                    : bt.base_effect_value;
-                  const nextEffectValue =
-                    owned && userBonus!.can_upgrade
-                      ? bt.base_effect_value +
-                        userBonus!.level * bt.effect_increment
-                      : undefined;
-
-                  const isActive = owned ? userBonus!.is_active : false;
-                  const isPermanent = owned
-                    ? userBonus!.is_permanent
-                    : bt.duration === 0;
-
-                  const cardId = owned ? userBonus!.id : bt.id;
-                  const processing = processingBonusIds.includes(cardId);
-
-                  return (
-                    <Grid item xs={12} sm={6} md={4} lg={3} key={bt.id}>
-                      <BonusShopItem
-                        id={cardId}
-                        name={bt.name}
-                        description={bt.description}
-                        imageUrl={bt.image_url}
-                        level={level}
-                        effectValue={effectValue}
-                        nextEffectValue={nextEffectValue}
-                        price={bt.price}
-                        upgradePrice={bt.upgrade_price}
-                        canUpgrade={userBonus?.can_upgrade ?? false}
-                        mode={owned ? 'upgrade' : 'buy'}
-                        isActive={isActive}
-                        isPermanent={isPermanent}
-                        disabled={processing}
-                        onBuy={
-                          !owned ? () => handlePurchaseBonus(bt.id) : undefined
-                        }
-                        onUpgrade={
-                          owned
-                            ? () => handleUpgradeBonus(userBonus!.id)
-                            : undefined
-                        }
-                        onToggleActive={
-                          owned
-                            ? () => handleToggleBonusActivation(userBonus!.id)
-                            : undefined
-                        }
-                      />
-                    </Grid>
-                  );
-                })}
-              </Grid>
-            ) : (
-              <Typography>Прокачка временно недоступна.</Typography>
-            )}
-          </Box>
-
-          {/* Блок кейсов */}
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'flex-start',
-              gap: 2,
-              mb: 1,
-              flexDirection: 'column',
-            }}
-          >
-            <Box sx={{ display: 'flex', gap: 2 }}>
               <Typography
                 variant="h6"
                 sx={{
@@ -584,250 +643,516 @@ const filteredCases = (cases || []).filter((c) => {
                   WebkitTextFillColor: 'transparent',
                 }}
               >
-                Кейсы
+                Прокачка
               </Typography>
 
-              {caseServers.length > 0 && (
-                <FormControl
-                size="small"
-                sx={{
-                  // textTransform: 'uppercase',
-                  // чтобы по ширине вел себя как бейдж
-                  // minWidth: '18vw',
-                  // maxWidth: '28vw',
+              {bonusesLoading ? (
+                <FullScreenLoader
+                  fullScreen={false}
+                  message="Загрузка прокачки..."
+                />
+              ) : bonusTypes.length > 0 ? (
+                <Grid container spacing={2} sx={{ mb: 4 }}>
+                  {bonusTypes.map((bt) => {
+                    const userBonus = userBonuses.find(
+                      (ub) => ub.bonus_type_id === bt.id,
+                    );
+                    const owned = !!userBonus;
 
-                  '& .MuiInputLabel-root': { display: 'none' },
+                    const level = owned ? userBonus!.level : 0;
+                    const effectValue = owned
+                      ? userBonus!.effect_value
+                      : bt.base_effect_value;
+                    const nextEffectValue =
+                      owned && userBonus!.can_upgrade
+                        ? bt.base_effect_value +
+                          userBonus!.level * bt.effect_increment
+                        : undefined;
 
-                  '& .MuiOutlinedInput-root': {
-                    borderRadius: '3vw',
-                    position: 'relative',
-                    px: '1.2vw',
-                    py: '0.5vw',
+                    const isActive = owned ? userBonus!.is_active : false;
+                    const isPermanent = owned
+                      ? userBonus!.is_permanent
+                      : bt.duration === 0;
 
-                    color: 'rgba(255,255,255,0.95)',
-                    background:
-                      'radial-gradient(circle at 10% 10%, rgba(242,113,33,0.20), transparent 55%), radial-gradient(circle at 90% 20%, rgba(233,64,205,0.16), transparent 55%), rgba(10,10,20,0.92)',
-                    border: '1px solid rgba(255,255,255,0.10)',
-                    boxShadow: '0 1.4vw 3.8vw rgba(0,0,0,0.55)',
-                    backdropFilter: 'blur(14px)',
-                    overflow: 'hidden',
+                    const cardId = owned ? userBonus!.id : bt.id;
+                    const processing = processingBonusIds.includes(cardId);
 
-                    transition: 'transform 0.18s ease, filter 0.18s ease',
-                    '&:hover': {
-                      transform: 'scale(1.02)',
-                      // filter: 'brightness(1.03)',
-                    },
-
-                    '& .MuiOutlinedInput-notchedOutline': {
-                      border: 'none',
-                    },
-
-                    // нижняя градиентная полоска как у username
-                    '&:after': {
-                      content: '""',
-                      position: 'absolute',
-                      left: '0%',
-                      right: '0%',
-                      bottom: 0,
-                      height: '0.15vw',
-                      borderRadius: '999px',
-                      background: GRADIENT,
-                      opacity: 0.9,
-                      pointerEvents: 'none',
-                      width: '100%',
-                    },
-                  },
-
-                  '& .MuiSelect-select': {
-                    // стиль текста как у плашки username
-                    fontFamily: 'Benzin-Bold',
-                    fontSize: '1.9vw',
-                    lineHeight: 1.1,
-                    textAlign: 'center',
-
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-
-                    // убираем “инпутный” паддинг
-                    padding: 0,
-                    minHeight: 'unset',
-
-                    // чтобы длинные названия не ломали
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                  },
-                }}
-              >
-                <Select
-                  labelId="cases-server-label"
-                  label="Сервер"
-                  value={selectedCaseServerIp}
-                  onChange={(e) => setSelectedCaseServerIp(String(e.target.value))}
-                  MenuProps={{
-                    PaperProps: {
-                      sx: {
-                        mt: 1,
-                        bgcolor: 'rgba(10,10,20,0.96)',
-                        border: '1px solid rgba(255,255,255,0.10)',
-                        borderRadius: '1vw',
-                        backdropFilter: 'blur(14px)',
-
-                        '& .MuiMenuItem-root': {
-                          color: 'rgba(255,255,255,0.9)',
-                          fontFamily: 'Benzin-Bold',
-                          fontSize: '1.1vw',
-                        },
-                        '& .MuiMenuItem-root.Mui-selected': {
-                          backgroundColor: 'rgba(242,113,33,0.18)',
-                        },
-                        '& .MuiMenuItem-root:hover': {
-                          backgroundColor: 'rgba(233,64,205,0.14)',
-                        },
-                      },
-                    },
-                  }}
-                >
-                  {caseServers.map((ip) => (
-                    <MenuItem key={ip} value={ip}>
-                      {translateServer(`Server ${ip}`)}
-                    </MenuItem>
-                  ))}
-                </Select>
-              </FormControl>
-
-            //   <FormControl size="small" sx={{ minWidth: 220 }}>
-            //   <InputLabel id="cases-server-label" sx={{ fontFamily: 'Benzin-Bold', color: 'rgba(255,255,255,0.75)' }}>
-            //     Сервер
-            //   </InputLabel>
-            //   <Select
-            //     labelId="cases-server-label"
-            //     label="Сервер"
-            //     value={selectedCaseServerIp}
-            //     onChange={(e) => setSelectedCaseServerIp(String(e.target.value))}
-            //     MenuProps={{
-            //         PaperProps: {
-            //           sx: {
-            //             bgcolor: 'rgba(10,10,20,0.96)',
-            //             border: '1px solid rgba(255,255,255,0.10)',
-            //             borderRadius: '1vw',
-            //             backdropFilter: 'blur(14px)',
-            //             '& .MuiMenuItem-root': {
-            //               color: 'rgba(255,255,255,0.9)',
-            //               fontFamily: 'Benzin-Bold',
-            //             },
-            //             '& .MuiMenuItem-root.Mui-selected': {
-            //               backgroundColor: 'rgba(242,113,33,0.16)',
-            //             },
-            //             '& .MuiMenuItem-root:hover': {
-            //               backgroundColor: 'rgba(233,64,205,0.14)',
-            //             },
-            //           },
-            //         },
-            //       }}
-            //       sx={{
-            //         borderRadius: '999px',
-            //         bgcolor: 'rgba(255,255,255,0.04)',
-            //         color: 'rgba(255,255,255,0.92)',
-            //         fontFamily: 'Benzin-Bold',
-            //         '& .MuiSelect-select': {
-            //           py: '0.9vw',
-            //           px: '1.2vw',
-            //         },
-            //         '& .MuiOutlinedInput-notchedOutline': {
-            //           borderColor: 'rgba(255,255,255,0.14)',
-            //         },
-            //         '&:hover .MuiOutlinedInput-notchedOutline': {
-            //           borderColor: 'rgba(242,113,33,0.55)',
-            //         },
-            //         '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-            //           borderColor: 'rgba(233,64,205,0.65)',
-            //           borderWidth: '2px',
-            //         },
-            //         '& .MuiSelect-icon': {
-            //           color: 'rgba(255,255,255,0.75)',
-            //         },
-            //       }}
-            //   >
-            //     {caseServers.map((ip) => (
-            //       <MenuItem key={ip} value={ip}>
-            //         {translateServer(`Server ${ip}`)}
-            //       </MenuItem>
-            //     ))}
-            //   </Select>
-            // </FormControl>
-            )}
+                    return (
+                      <Grid item xs={12} sm={6} md={4} lg={3} key={bt.id}>
+                        <BonusShopItem
+                          id={cardId}
+                          name={bt.name}
+                          description={bt.description}
+                          imageUrl={bt.image_url}
+                          level={level}
+                          effectValue={effectValue}
+                          nextEffectValue={nextEffectValue}
+                          price={bt.price}
+                          upgradePrice={bt.upgrade_price}
+                          canUpgrade={userBonus?.can_upgrade ?? false}
+                          mode={owned ? 'upgrade' : 'buy'}
+                          isActive={isActive}
+                          isPermanent={isPermanent}
+                          disabled={processing}
+                          onBuy={
+                            !owned
+                              ? () => handlePurchaseBonus(bt.id)
+                              : undefined
+                          }
+                          onUpgrade={
+                            owned
+                              ? () => handleUpgradeBonus(userBonus!.id)
+                              : undefined
+                          }
+                          onToggleActive={
+                            owned
+                              ? () => handleToggleBonusActivation(userBonus!.id)
+                              : undefined
+                          }
+                        />
+                      </Grid>
+                    );
+                  })}
+                </Grid>
+              ) : (
+                <Typography>Прокачка временно недоступна.</Typography>
+              )}
             </Box>
+          </TabPanel>
 
-            {casesLoading ? (
-              <FullScreenLoader fullScreen={false} message="Загрузка кейсов..." />
-            ) : cases.length > 0 ? (
-              <Grid container spacing={2} sx={{ mb: 4 }}>
-                {filteredCases.map((c) => (
-                  <Grid item xs={12} sm={6} md={4} lg={3} key={c.id}>
-                    <ShopItem
-                      type="case"
-                      id={c.id}
-                      name={c.name}
-                      description={c.description}
-                      imageUrl={c.image_url}
-                      price={c.price}
-                      itemsCount={c.items_count}
-                      isOpening={isOpening && selectedCase?.id === c.id}
-                      disabled={isOpening || !selectedCaseServerIp}
-                      onClick={() => handleOpenCase(c)}
-                    />
-                  </Grid>
-                ))}
-              </Grid>
-            ) : (
-              <Typography>Кейсы временно недоступны.</Typography>
-            )}
-          </Box>
-
-          {/* Блок плащей (как был) */}
-
-          {/* Блок плащей */}
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-            <Typography
-              variant="h6"
+          <TabPanel value={tabValue} index={1}>
+            {/* Блок кейсов */}
+            <Box
               sx={{
-                fontFamily: 'Benzin-Bold',
-                backgroundImage:
-                  'linear-gradient(136deg, rgb(242,113,33), rgb(233,64,87), rgb(138,35,135))',
-                WebkitBackgroundClip: 'text',
-                WebkitTextFillColor: 'transparent',
+                display: 'flex',
+                alignItems: 'flex-start',
+                gap: 2,
+                mb: 1,
+                flexDirection: 'column',
               }}
             >
-              Плащи
-            </Typography>
+              <Box sx={{ display: 'flex', gap: 2 }}>
+                <Typography
+                  variant="h6"
+                  sx={{
+                    fontFamily: 'Benzin-Bold',
+                    backgroundImage:
+                      'linear-gradient(136deg, rgb(242,113,33), rgb(233,64,87), rgb(138,35,135))',
+                    WebkitBackgroundClip: 'text',
+                    WebkitTextFillColor: 'transparent',
+                  }}
+                >
+                  Кейсы
+                </Typography>
 
-            {availableCapes.length > 0 ? (
-              <Grid container spacing={2}>
-                {availableCapes.map((cape) => (
-                  <Grid item xs={12} sm={6} md={4} lg={3} key={cape.id}>
-                    <ShopItem
-                      type="cape"
-                      id={cape.id}
-                      name={cape.name}
-                      description={cape.description}
-                      imageUrl={cape.image_url}
-                      price={cape.price}
-                      disabled={false}
-                      playerSkinUrl={playerSkinUrl}
-                      onClick={() => handlePurchaseCape(cape.id)}
-                    />
-                  </Grid>
-                ))}
-              </Grid>
-            ) : (
-              <Typography>У вас уже есть все доступные плащи!</Typography>
-            )}
-          </Box>
+                {caseServers.length > 0 && (
+                  <FormControl
+                    size="small"
+                    sx={{
+                      // textTransform: 'uppercase',
+                      // чтобы по ширине вел себя как бейдж
+                      // minWidth: '18vw',
+                      // maxWidth: '28vw',
+
+                      '& .MuiInputLabel-root': { display: 'none' },
+
+                      '& .MuiOutlinedInput-root': {
+                        borderRadius: '3vw',
+                        position: 'relative',
+                        px: '1.2vw',
+                        py: '0.5vw',
+
+                        color: 'rgba(255,255,255,0.95)',
+                        background:
+                          'radial-gradient(circle at 10% 10%, rgba(242,113,33,0.20), transparent 55%), radial-gradient(circle at 90% 20%, rgba(233,64,205,0.16), transparent 55%), rgba(10,10,20,0.92)',
+                        border: '1px solid rgba(255,255,255,0.10)',
+                        boxShadow: '0 1.4vw 3.8vw rgba(0,0,0,0.55)',
+                        backdropFilter: 'blur(14px)',
+                        overflow: 'hidden',
+
+                        transition: 'transform 0.18s ease, filter 0.18s ease',
+                        '&:hover': {
+                          transform: 'scale(1.02)',
+                          // filter: 'brightness(1.03)',
+                        },
+
+                        '& .MuiOutlinedInput-notchedOutline': {
+                          border: 'none',
+                        },
+
+                        // нижняя градиентная полоска как у username
+                        '&:after': {
+                          content: '""',
+                          position: 'absolute',
+                          left: '0%',
+                          right: '0%',
+                          bottom: 0,
+                          height: '0.15vw',
+                          borderRadius: '999px',
+                          background: GRADIENT,
+                          opacity: 0.9,
+                          pointerEvents: 'none',
+                          width: '100%',
+                        },
+                      },
+
+                      '& .MuiSelect-select': {
+                        // стиль текста как у плашки username
+                        fontFamily: 'Benzin-Bold',
+                        fontSize: '1.9vw',
+                        lineHeight: 1.1,
+                        textAlign: 'center',
+
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+
+                        // убираем “инпутный” паддинг
+                        padding: 0,
+                        minHeight: 'unset',
+
+                        // чтобы длинные названия не ломали
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                      },
+                    }}
+                  >
+                    <Select
+                      labelId="cases-server-label"
+                      label="Сервер"
+                      value={selectedCaseServerIp}
+                      onChange={(e) =>
+                        setSelectedCaseServerIp(String(e.target.value))
+                      }
+                      MenuProps={{
+                        PaperProps: {
+                          sx: {
+                            mt: 1,
+                            bgcolor: 'rgba(10,10,20,0.96)',
+                            border: '1px solid rgba(255,255,255,0.10)',
+                            borderRadius: '1vw',
+                            backdropFilter: 'blur(14px)',
+
+                            '& .MuiMenuItem-root': {
+                              color: 'rgba(255,255,255,0.9)',
+                              fontFamily: 'Benzin-Bold',
+                              fontSize: '1.1vw',
+                            },
+                            '& .MuiMenuItem-root.Mui-selected': {
+                              backgroundColor: 'rgba(242,113,33,0.18)',
+                            },
+                            '& .MuiMenuItem-root:hover': {
+                              backgroundColor: 'rgba(233,64,205,0.14)',
+                            },
+                          },
+                        },
+                      }}
+                    >
+                      {caseServers.map((ip) => (
+                        <MenuItem key={ip} value={ip}>
+                          {translateServer(`Server ${ip}`)}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+
+                  //   <FormControl size="small" sx={{ minWidth: 220 }}>
+                  //   <InputLabel id="cases-server-label" sx={{ fontFamily: 'Benzin-Bold', color: 'rgba(255,255,255,0.75)' }}>
+                  //     Сервер
+                  //   </InputLabel>
+                  //   <Select
+                  //     labelId="cases-server-label"
+                  //     label="Сервер"
+                  //     value={selectedCaseServerIp}
+                  //     onChange={(e) => setSelectedCaseServerIp(String(e.target.value))}
+                  //     MenuProps={{
+                  //         PaperProps: {
+                  //           sx: {
+                  //             bgcolor: 'rgba(10,10,20,0.96)',
+                  //             border: '1px solid rgba(255,255,255,0.10)',
+                  //             borderRadius: '1vw',
+                  //             backdropFilter: 'blur(14px)',
+                  //             '& .MuiMenuItem-root': {
+                  //               color: 'rgba(255,255,255,0.9)',
+                  //               fontFamily: 'Benzin-Bold',
+                  //             },
+                  //             '& .MuiMenuItem-root.Mui-selected': {
+                  //               backgroundColor: 'rgba(242,113,33,0.16)',
+                  //             },
+                  //             '& .MuiMenuItem-root:hover': {
+                  //               backgroundColor: 'rgba(233,64,205,0.14)',
+                  //             },
+                  //           },
+                  //         },
+                  //       }}
+                  //       sx={{
+                  //         borderRadius: '999px',
+                  //         bgcolor: 'rgba(255,255,255,0.04)',
+                  //         color: 'rgba(255,255,255,0.92)',
+                  //         fontFamily: 'Benzin-Bold',
+                  //         '& .MuiSelect-select': {
+                  //           py: '0.9vw',
+                  //           px: '1.2vw',
+                  //         },
+                  //         '& .MuiOutlinedInput-notchedOutline': {
+                  //           borderColor: 'rgba(255,255,255,0.14)',
+                  //         },
+                  //         '&:hover .MuiOutlinedInput-notchedOutline': {
+                  //           borderColor: 'rgba(242,113,33,0.55)',
+                  //         },
+                  //         '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                  //           borderColor: 'rgba(233,64,205,0.65)',
+                  //           borderWidth: '2px',
+                  //         },
+                  //         '& .MuiSelect-icon': {
+                  //           color: 'rgba(255,255,255,0.75)',
+                  //         },
+                  //       }}
+                  //   >
+                  //     {caseServers.map((ip) => (
+                  //       <MenuItem key={ip} value={ip}>
+                  //         {translateServer(`Server ${ip}`)}
+                  //       </MenuItem>
+                  //     ))}
+                  //   </Select>
+                  // </FormControl>
+                )}
+              </Box>
+
+              {casesLoading ? (
+                <FullScreenLoader
+                  fullScreen={false}
+                  message="Загрузка кейсов..."
+                />
+              ) : cases.length > 0 ? (
+                <Grid container spacing={2} sx={{ mb: 4 }}>
+                  {filteredCases.map((c) => (
+                    <Grid item xs={12} sm={6} md={4} lg={3} key={c.id}>
+                      <ShopItem
+                        type="case"
+                        id={c.id}
+                        name={c.name}
+                        description={c.description}
+                        imageUrl={c.image_url}
+                        price={c.price}
+                        itemsCount={c.items_count}
+                        isOpening={isOpening && selectedCase?.id === c.id}
+                        disabled={isOpening || !selectedCaseServerIp}
+                        onClick={() => handleOpenCase(c)}
+                      />
+                    </Grid>
+                  ))}
+                </Grid>
+              ) : (
+                <Typography>Кейсы временно недоступны.</Typography>
+              )}
+            </Box>
+          </TabPanel>
+
+          <TabPanel value={tabValue} index={2}>
+            {/* Блок плащей */}
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+              <Typography
+                variant="h6"
+                sx={{
+                  fontFamily: 'Benzin-Bold',
+                  backgroundImage:
+                    'linear-gradient(136deg, rgb(242,113,33), rgb(233,64,87), rgb(138,35,135))',
+                  WebkitBackgroundClip: 'text',
+                  WebkitTextFillColor: 'transparent',
+                }}
+              >
+                Плащи
+              </Typography>
+
+              {availableCapes.length > 0 ? (
+                <Grid container spacing={2}>
+                  {availableCapes.map((cape) => (
+                    <Grid item xs={12} sm={6} md={4} lg={3} key={cape.id}>
+                      <ShopItem
+                        type="cape"
+                        id={cape.id}
+                        name={cape.name}
+                        description={cape.description}
+                        imageUrl={cape.image_url}
+                        price={cape.price}
+                        disabled={false}
+                        playerSkinUrl={playerSkinUrl}
+                        onClick={() => handlePurchaseCape(cape.id)}
+                      />
+                    </Grid>
+                  ))}
+                </Grid>
+              ) : (
+                <Typography>У вас уже есть все доступные плащи!</Typography>
+              )}
+            </Box>
+          </TabPanel>
+
+          <TabPanel value={tabValue} index={3}>
+            <Grid container spacing={2}>
+              {prankCommands.map((cmd) => (
+                <Grid item xs={12} sm={6} md={4} lg={3} key={cmd.id}>
+                  <Box
+                    sx={{
+                      p: '1.4vw',
+                      borderRadius: '1.4vw',
+                      background:
+                        'radial-gradient(circle at 10% 10%, rgba(242,113,33,0.14), transparent 55%), rgba(10,10,20,0.88)',
+                      border: '1px solid rgba(255,255,255,0.10)',
+                      boxShadow: '0 1.2vw 3.2vw rgba(0,0,0,0.55)',
+                      backdropFilter: 'blur(14px)',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      gap: '0.8vw',
+                    }}
+                  >
+                    <Typography
+                      sx={{
+                        fontFamily: 'Benzin-Bold',
+                        fontSize: '1.1vw',
+                        background: GRADIENT,
+                        WebkitBackgroundClip: 'text',
+                        WebkitTextFillColor: 'transparent',
+                      }}
+                    >
+                      {cmd.name}
+                    </Typography>
+
+                    <Typography
+                      sx={{ color: 'rgba(255,255,255,0.75)', fontWeight: 700 }}
+                    >
+                      {cmd.description}
+                    </Typography>
+
+                    <Typography sx={{ fontWeight: 900 }}>
+                      Цена: {cmd.price} монет
+                    </Typography>
+
+                    <Button
+                      disableRipple
+                      onClick={() => {
+                        setSelectedPrank(cmd);
+                        setPrankTarget('');
+                        setPrankDialogOpen(true);
+                      }}
+                      sx={{
+                        mt: '0.6vw',
+                        borderRadius: '999px',
+                        fontFamily: 'Benzin-Bold',
+                        color: '#fff',
+                        background: GRADIENT,
+                        py: '0.6vw',
+                        '&:hover': { filter: 'brightness(1.05)' },
+                      }}
+                    >
+                      Выполнить
+                    </Button>
+                  </Box>
+                </Grid>
+              ))}
+            </Grid>
+          </TabPanel>
         </Box>
       )}
 
+      <Dialog
+        open={prankDialogOpen}
+        onClose={() => setPrankDialogOpen(false)}
+        fullWidth
+        maxWidth="xs"
+        PaperProps={{ sx: GLASS_DIALOG_SX }}
+      >
+        <DialogTitle sx={{ fontFamily: 'Benzin-Bold' }}>
+          {selectedPrank?.name}
+        </DialogTitle>
+
+        <DialogContent dividers sx={{ borderColor: 'rgba(255,255,255,0.10)' }}>
+          <Typography sx={{ opacity: 0.75, mb: 2 }}>
+            {selectedPrank?.description}
+          </Typography>
+
+          {/* сервер */}
+          <FormControl fullWidth sx={{ mb: 2 }}>
+            <Select
+              value={prankServerId}
+              onChange={(e) => setPrankServerId(String(e.target.value))}
+              displayEmpty
+            >
+              <MenuItem disabled value="">
+                Выберите сервер
+              </MenuItem>
+              {prankServers.map((s) => (
+                <MenuItem key={s.id} value={s.id}>
+                  {translateServer(s.name)} ({s.online_players}/{s.max_players})
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+
+          {/* цель */}
+          <TextField
+            fullWidth
+            label="Ник игрока"
+            value={prankTarget}
+            onChange={(e) => setPrankTarget(e.target.value)}
+          />
+        </DialogContent>
+
+        <DialogActions sx={{ p: '1.2vw' }}>
+          <Button
+            onClick={() => setPrankDialogOpen(false)}
+            sx={{ color: 'rgba(255,255,255,0.75)', fontFamily: 'Benzin-Bold' }}
+          >
+            Отмена
+          </Button>
+
+          <Button
+            disabled={!prankTarget || !prankServerId || prankProcessing}
+            onClick={async () => {
+              if (!selectedPrank) return;
+
+              try {
+                setPrankProcessing(true);
+                await executePrank(
+                  username,
+                  selectedPrank.id,
+                  prankTarget,
+                  prankServerId,
+                );
+
+                playBuySound();
+                showNotification(
+                  selectedPrank.globalDescription
+                    .replace('{username}', username)
+                    .replace('{targetPlayer}', prankTarget),
+                  'success',
+                );
+
+                setPrankDialogOpen(false);
+              } catch (e) {
+                showNotification(
+                  e instanceof Error ? e.message : 'Ошибка выполнения',
+                  'error',
+                );
+              } finally {
+                setPrankProcessing(false);
+              }
+            }}
+            sx={{
+              fontFamily: 'Benzin-Bold',
+              color: '#fff',
+              background: GRADIENT,
+              borderRadius: '999px',
+              px: '1.6vw',
+            }}
+          >
+            Подтвердить
+          </Button>
+        </DialogActions>
+      </Dialog>
+
       {/* Компонент с анимацией рулетки */}
       <CaseRoulette
         open={rouletteOpen}