diff --git a/src/renderer/App.css b/src/renderer/App.css
index b8b074f..450abdd 100644
--- a/src/renderer/App.css
+++ b/src/renderer/App.css
@@ -24,6 +24,7 @@ body {
   align-items: center;
   padding: 0;
   margin: 0;
+  user-select: none;
 }
 
 p {
diff --git a/src/renderer/components/CapeCard.tsx b/src/renderer/components/CapeCard.tsx
index d03dd3c..cee0c2b 100644
--- a/src/renderer/components/CapeCard.tsx
+++ b/src/renderer/components/CapeCard.tsx
@@ -11,7 +11,7 @@ import {
   Box,
   Chip,
 } from '@mui/material';
-
+import CustomTooltip from './CustomTooltip';
 // Тип для плаща с необязательными полями для обоих вариантов использования
 export interface CapeCardProps {
   cape: {
@@ -60,7 +60,7 @@ export default function CapeCard({
   const capeDescription = cape.cape_description || cape.description || '';
 
   return (
-    <Tooltip arrow title={capeDescription}>
+    <CustomTooltip arrow title={capeDescription}>
       <Card
         sx={{
           bgcolor: 'rgba(255, 255, 255, 0.05)',
@@ -122,6 +122,6 @@ export default function CapeCard({
           </Button>
         </CardActions>
       </Card>
-    </Tooltip>
+    </CustomTooltip>
   );
 }
diff --git a/src/renderer/components/CustomTooltip.tsx b/src/renderer/components/CustomTooltip.tsx
new file mode 100644
index 0000000..5e0e070
--- /dev/null
+++ b/src/renderer/components/CustomTooltip.tsx
@@ -0,0 +1,38 @@
+/* eslint-disable react/jsx-props-no-spreading */
+
+import { styled } from '@mui/material/styles';
+import Tooltip, { tooltipClasses, TooltipProps } from '@mui/material/Tooltip';
+
+// Создаем кастомный стилизованный Tooltip с правильной типизацией
+const CustomTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: 'rgba(0, 0, 0, 1)',
+    color: 'white',
+    maxWidth: 300,
+    fontSize: '0.9vw',
+    border: '1px solid rgba(255, 77, 77, 0.5)',
+    borderRadius: '1vw',
+    padding: '1vw',
+    boxShadow:
+      '0 0 1vw rgba(255, 77, 77, 0.3), inset 0.8vw -0.8vw 2vw rgba(255, 77, 77, 0.15)',
+    fontFamily: 'Benzin-Bold',
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderRadius: '1vw',
+      // background: 'linear-gradient(45deg, rgba(255, 77, 77, 0.1), transparent)',
+      zIndex: -1,
+    },
+  },
+  [`& .${tooltipClasses.arrow}`]: {
+    color: 'rgba(255, 77, 77, 0.5)',
+  },
+}));
+
+export default CustomTooltip;
diff --git a/src/renderer/components/TopBar.tsx b/src/renderer/components/TopBar.tsx
index f583d79..91560ea 100644
--- a/src/renderer/components/TopBar.tsx
+++ b/src/renderer/components/TopBar.tsx
@@ -5,7 +5,7 @@ import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import { useEffect, useState } from 'react';
 import { Tooltip } from '@mui/material';
 import { fetchCoins } from '../api';
-
+import CustomTooltip from './CustomTooltip';
 declare global {
   interface Window {
     electron: {
@@ -276,9 +276,11 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
       >
         {/* Кнопка регистрации, если на странице логина */}
         {username && (
-          <Tooltip
+          <CustomTooltip
             title="Попы — внутриигровая валюта, начисляемая за время игры на серверах."
             arrow
+            placement="bottom"
+            TransitionProps={{ timeout: 300 }}
           >
             <Box
               sx={{
@@ -313,7 +315,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
                 {coins}
               </Typography>
             </Box>
-          </Tooltip>
+          </CustomTooltip>
         )}
         {isLoginPage && (
           <Button
diff --git a/src/renderer/pages/Marketplace.tsx b/src/renderer/pages/Marketplace.tsx
index 5ab13bb..a750f93 100644
--- a/src/renderer/pages/Marketplace.tsx
+++ b/src/renderer/pages/Marketplace.tsx
@@ -317,6 +317,21 @@ export default function Marketplace() {
               transition: 'all 0.3s ease',
             }}
           />
+          <Tab
+            label="Мои товары"
+            disableRipple={true}
+            sx={{
+              fontFamily: 'Benzin-Bold',
+              color: 'white',
+              '&.Mui-selected': {
+                color: 'rgba(255, 77, 77, 1)',
+              },
+              '&:hover': {
+                color: 'rgba(255, 77, 77, 1)',
+              },
+              transition: 'all 0.3s ease',
+            }}
+          />
         </Tabs>
       </Box>
 
diff --git a/src/renderer/pages/Profile.tsx b/src/renderer/pages/Profile.tsx
index c505be7..4d9af2c 100644
--- a/src/renderer/pages/Profile.tsx
+++ b/src/renderer/pages/Profile.tsx
@@ -41,6 +41,9 @@ export default function Profile() {
   const [uuid, setUuid] = useState<string>('');
   const [loading, setLoading] = useState<boolean>(false);
 
+  const [viewerWidth, setViewerWidth] = useState(500);
+  const [viewerHeight, setViewerHeight] = useState(600);
+
   useEffect(() => {
     const savedConfig = localStorage.getItem('launcher_config');
     if (savedConfig) {
@@ -54,6 +57,25 @@ export default function Profile() {
     }
   }, []);
 
+  useEffect(() => {
+    // Функция для обновления размеров
+    const updateDimensions = () => {
+      setViewerWidth(window.innerWidth * 0.4); // 25vw
+      setViewerHeight(window.innerWidth * 0.5); // 30vw
+    };
+
+    // Вызываем один раз при монтировании
+    updateDimensions();
+
+    // Добавляем слушатель изменения размера окна
+    window.addEventListener('resize', updateDimensions);
+
+    // Очистка при размонтировании
+    return () => {
+      window.removeEventListener('resize', updateDimensions);
+    };
+  }, []);
+
   const loadPlayerData = async (uuid: string) => {
     try {
       setLoading(true);
@@ -182,7 +204,6 @@ export default function Profile() {
               p: 0,
               borderRadius: 2,
               overflow: 'hidden',
-              mb: 4,
               bgcolor: 'transparent',
             }}
           >
@@ -193,17 +214,20 @@ export default function Profile() {
                 alignSelf: 'center',
                 justifySelf: 'center',
                 textAlign: 'center',
-                width: '100%',
-                mb: '5vw',
+                mb: '2vw',
                 fontSize: '3vw',
                 color: 'white',
+                borderRadius: '3vw',
+                p: '0.5vw 5vw',
+                bgcolor: 'rgb(255, 77, 77)',
+                boxShadow: '0 0 1vw 0 rgba(0, 0, 0, 0.5)',
               }}
             >
               {username}
             </Typography>
             <SkinViewer
-              width={300}
-              height={400}
+              width={viewerWidth}
+              height={viewerHeight}
               skinUrl={skin}
               capeUrl={cape}
               walkingSpeed={walkingSpeed}
@@ -215,25 +239,26 @@ export default function Profile() {
             sx={{
               display: 'flex',
               flexDirection: 'column',
-              gap: 2,
+              gap: '1vw',
             }}
           >
             <Box
               sx={{
-                width: '100%',
-                maxWidth: '500px',
+                width: '40vw',
+                maxWidth: '40vw',
                 bgcolor: 'rgba(255, 255, 255, 0.05)',
                 padding: '3vw',
                 borderRadius: '1vw',
+                flexShrink: 0,
               }}
             >
               <Box
                 sx={{
                   border: '2px dashed',
                   borderColor: isDragOver ? 'primary.main' : 'grey.400',
-                  borderRadius: 2,
-                  p: 3,
-                  mb: 2,
+                  borderRadius: '1vw',
+                  p: '1.5vw',
+                  mb: '1vw',
                   textAlign: 'center',
                   cursor: 'pointer',
                   bgcolor: isDragOver
@@ -266,24 +291,83 @@ export default function Profile() {
               <FormControl
                 color="primary"
                 fullWidth
-                sx={{ mb: 2, color: 'white' }}
+                sx={{
+                  mb: '1vw',
+                  color: 'white',
+                  '&:hover .MuiInputLabel-root': {
+                    color: 'rgb(255, 77, 77)',
+                    transition: 'all 0.3s ease-in-out',
+                  },
+                }}
               >
-                <InputLabel sx={{ color: 'white' }}>Модель скина</InputLabel>
+                <InputLabel
+                  sx={{
+                    fontFamily: 'Benzin-Bold',
+                    color: 'white',
+                    '&.Mui-focused': {
+                      color: 'rgb(255, 77, 77)',
+                      transition: 'all 0.3s ease-in-out',
+                    },
+                    transform: 'translate(14px, -9px) scale(0.75)',
+                    '&.MuiInputLabel-shrink': {
+                      transform: 'translate(14px, -9px) scale(0.75)',
+                      transition: 'all 0.3s ease-in-out',
+                    },
+                  }}
+                >
+                  Модель скина
+                </InputLabel>
                 <Select
                   value={skinModel}
                   label="Модель скина"
                   onChange={(e) => setSkinModel(e.target.value)}
+                  displayEmpty
                   sx={{
-                    color: 'white',
-                    borderColor: 'white',
-                    '& .MuiInputBase-input': {
-                      border: '1px solid white',
-                      transition: 'unset',
+                    border: 'none',
+                    '& .MuiSelect-select': {
+                      fontFamily: 'Benzin-Bold',
+                      color: 'white',
+                      paddingTop: '1vw',
+                      paddingBottom: '1vw',
+                      transition: 'all 0.3s ease-in-out',
                     },
-                    '&:focus': {
-                      borderRadius: 4,
-                      borderColor: '#80bdff',
-                      boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
+                    '&:hover': {
+                      '& .MuiSelect-select': {
+                        color: 'rgb(255, 77, 77)',
+                        transition: 'all 0.3s ease-in-out',
+                      },
+                    },
+                    '&.Mui-focused': {
+                      '& .MuiSelect-select': {
+                        color: 'rgb(255, 77, 77)',
+                        transition: 'all 0.3s ease-in-out',
+                      },
+                    },
+                    '& .MuiOutlinedInput-notchedOutline': {
+                      borderRadius: '5vw',
+                      borderColor: 'rgb(255, 255, 255)',
+                      transition: 'all 0.3s ease-in-out',
+                    },
+                    '&:hover .MuiOutlinedInput-notchedOutline': {
+                      borderColor: 'rgb(255, 77, 77)',
+                      transition: 'all 0.3s ease-in-out',
+                    },
+                    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                      borderColor: 'rgb(255, 77, 77)',
+                      borderWidth: '2px',
+                      transition: 'all 0.3s ease-in-out',
+                    },
+                    '& .MuiSelect-icon': {
+                      color: 'white',
+                      transition: 'all 0.3s ease-in-out',
+                    },
+                    '&:hover .MuiSelect-icon': {
+                      color: 'rgb(255, 77, 77)',
+                      transition: 'all 0.3s ease-in-out',
+                    },
+                    '&.Mui-focused .MuiSelect-icon': {
+                      color: 'rgb(255, 77, 77)',
+                      transition: 'all 0.3s ease-in-out',
                     },
                   }}
                 >
diff --git a/src/renderer/pages/VersionsExplorer.tsx b/src/renderer/pages/VersionsExplorer.tsx
index 793627a..a233ec8 100644
--- a/src/renderer/pages/VersionsExplorer.tsx
+++ b/src/renderer/pages/VersionsExplorer.tsx
@@ -25,14 +25,20 @@ interface VersionCardProps {
   imageUrl: string;
   version: string;
   onSelect: (id: string) => void;
+  isHovered: boolean;
+  onHover: (id: string | null) => void;
+  hoveredCardId: string | null;
 }
 
-const VersionCard: React.FC<VersionCardProps> = ({
+export const VersionCard: React.FC<VersionCardProps> = ({
   id,
   name,
   imageUrl,
   version,
   onSelect,
+  isHovered,
+  onHover,
+  hoveredCardId,
 }) => {
   return (
     <Card
@@ -47,11 +53,19 @@ const VersionCard: React.FC<VersionCardProps> = ({
         flexDirection: 'column',
         borderRadius: '16px',
         boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
-        transition: 'transform 0.3s, box-shadow 0.3s',
+        transition: 'transform 0.3s, box-shadow 0.3s, filter 0.3s',
         overflow: 'hidden',
         cursor: 'pointer',
+        filter: hoveredCardId && !isHovered ? 'blur(5px)' : 'blur(0px)',
+        transform: isHovered ? 'scale(1.03)' : 'scale(1)',
+        zIndex: isHovered ? 10 : 1,
+        '&:hover': {
+          boxShadow: '0 12px 40px rgba(0, 0, 0, 0.5)',
+        },
       }}
       onClick={() => onSelect(id)}
+      onMouseEnter={() => onHover(id)}
+      onMouseLeave={() => onHover(null)}
     >
       <CardContent
         sx={{
@@ -125,6 +139,7 @@ export const VersionsExplorer = () => {
   const [loading, setLoading] = useState(true);
   const [modalOpen, setModalOpen] = useState(false);
   const [downloadLoading, setDownloadLoading] = useState<string | null>(null);
+  const [hoveredCardId, setHoveredCardId] = useState<string | null>(null);
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -220,13 +235,21 @@ export const VersionsExplorer = () => {
         flexDirection: 'column',
         borderRadius: '16px',
         boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
-        transition: 'transform 0.3s, box-shadow 0.3s',
+        transition: 'transform 0.3s, box-shadow 0.3s, filter 0.3s',
         overflow: 'hidden',
         justifyContent: 'center',
         alignItems: 'center',
         cursor: 'pointer',
+        filter: hoveredCardId && hoveredCardId !== 'add' ? 'blur(5px)' : 'blur(0)',
+        transform: hoveredCardId === 'add' ? 'scale(1.03)' : 'scale(1)',
+        zIndex: hoveredCardId === 'add' ? 10 : 1,
+        '&:hover': {
+          boxShadow: '0 12px 40px rgba(0, 0, 0, 0.5)',
+        },
       }}
       onClick={handleAddVersion}
+      onMouseEnter={() => setHoveredCardId('add')}
+      onMouseLeave={() => setHoveredCardId(null)}
     >
       <AddIcon sx={{ fontSize: 60, color: '#fff' }} />
       <Typography
@@ -256,8 +279,24 @@ export const VersionsExplorer = () => {
         alignItems: 'center',
         paddingLeft: '5vw',
         paddingRight: '5vw',
+        position: 'relative',
       }}
     >
+      {/* Глобальный фоновый слой для размытия всего интерфейса */}
+      <Box
+        sx={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backdropFilter: hoveredCardId ? 'blur(10px)' : 'blur(0)',
+          transition: 'backdrop-filter 0.3s ease-in-out',
+          zIndex: 5,
+          pointerEvents: 'none',
+        }}
+      />
+
       {loading ? (
         <Box display="flex" justifyContent="center" my={5}>
           <CircularProgress />
@@ -270,6 +309,8 @@ export const VersionsExplorer = () => {
             width: '100%',
             overflowY: 'auto',
             justifyContent: 'center',
+            position: 'relative',
+            zIndex: 6, // Выше чем фоновый слой размытия
           }}
         >
           {/* Показываем установленные версии или дефолтную, если она есть */}
@@ -288,6 +329,9 @@ export const VersionsExplorer = () => {
                   }
                   version={version.version}
                   onSelect={() => handleSelectVersion(version)}
+                  isHovered={hoveredCardId === version.id}
+                  onHover={setHoveredCardId}
+                  hoveredCardId={hoveredCardId}
                 />
               </Grid>
             ))