diff --git a/src/renderer/src/components/MariaDbDatabaseManager.tsx b/src/renderer/src/components/MariaDbDatabaseManager.tsx
index 1ebb8c6..9c6f9ba 100644
--- a/src/renderer/src/components/MariaDbDatabaseManager.tsx
+++ b/src/renderer/src/components/MariaDbDatabaseManager.tsx
@@ -174,7 +174,7 @@ const MariaDbDatabaseManager: React.FC<MariaDbDatabaseManagerProps> = ({ version
 
     return (
         <Box>
-            <Paper sx={{ p: 3, mb: 3, bgcolor: 'rgba(255, 255, 255, 0.03)', borderRadius: 2 }}>
+            <Paper sx={{ p: 3, mb: 3, bgcolor: 'var(--color-bg-soft)', border: '1px solid var(--color-border-soft)', borderRadius: 'var(--radius-lg)' }}>
                 <Stack direction="row" spacing={2} alignItems="center" justifyContent="space-between" sx={{ mb: 3 }}>
                     <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
                         <DbIcon color="primary" />
@@ -211,20 +211,20 @@ const MariaDbDatabaseManager: React.FC<MariaDbDatabaseManagerProps> = ({ version
                         {/* Databases Section */}
                         <Box>
                             <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1.5 }}>
-                                <Typography variant="subtitle2" sx={{ color: 'primary.light' }} className="font-black text-md">
+                                <Typography variant="subtitle2" sx={{ color: 'var(--color-primary)' }} className="font-black text-md">
                                     {t('mariadb_manager.databases_title')}
                                 </Typography>
                                 <Button variant="outlined" size="small" startIcon={<AddIcon sx={{ fontSize: 'var(--font-size-base)' }} />} onClick={handleCreateDb} sx={{ height: 28 }} className="text-xs rounded-md">
                                     {t('mariadb_manager.create_db_btn')}
                                 </Button>
                             </Box>
-                            <TableContainer component={Paper} variant="outlined" sx={{ bgcolor: 'rgba(0,0,0,0.2)', maxHeight: 300, borderRadius: 2 }}>
+                            <TableContainer component={Paper} variant="outlined" sx={{ bgcolor: 'var(--color-bg-medium)', maxHeight: 300, borderRadius: 'var(--radius-md)', border: '1px solid var(--color-border-soft)' }}>
                                 <Table stickyHeader size="small">
                                     <TableHead>
                                         <TableRow>
-                                            <TableCell sx={{ bgcolor: '#1a1d21', py: 1 }} className="font-black text-xs">{t('mariadb_manager.db_name')}</TableCell>
-                                            <TableCell sx={{ bgcolor: '#1a1d21', py: 1 }} className="font-black text-xs">{t('mariadb_manager.db_size')}</TableCell>
-                                            <TableCell sx={{ bgcolor: '#1a1d21', py: 1, textAlign: 'right' }} className="font-black text-xs">{t('common.actions')}</TableCell>
+                                            <TableCell sx={{ bgcolor: 'var(--color-bg-dark)', borderBottom: '1px solid var(--color-border-medium)', py: 1 }} className="font-black text-xs">{t('mariadb_manager.db_name')}</TableCell>
+                                            <TableCell sx={{ bgcolor: 'var(--color-bg-dark)', borderBottom: '1px solid var(--color-border-medium)', py: 1 }} className="font-black text-xs">{t('mariadb_manager.db_size')}</TableCell>
+                                            <TableCell sx={{ bgcolor: 'var(--color-bg-dark)', borderBottom: '1px solid var(--color-border-medium)', py: 1, textAlign: 'right' }} className="font-black text-xs">{t('common.actions')}</TableCell>
                                         </TableRow>
                                     </TableHead>
                                     <TableBody>
@@ -255,7 +255,7 @@ const MariaDbDatabaseManager: React.FC<MariaDbDatabaseManagerProps> = ({ version
                         {/* Users Section */}
                         <Box>
                             <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1.5 }}>
-                                <Typography variant="subtitle2" className="font-black text-sm" sx={{ color: 'secondary.light' }}>
+                                <Typography variant="subtitle2" className="font-black text-sm" sx={{ color: 'var(--color-secondary)' }}>
                                     {t('mariadb_manager.users_title')}
                                 </Typography>
                                 <Button variant="outlined" color="secondary" size="small" startIcon={<AddIcon sx={{ fontSize: 'var(--font-size-base)' }} />} onClick={handleCreateUser} sx={{ height: 28 }} className="text-xs rounded-md">
@@ -266,9 +266,9 @@ const MariaDbDatabaseManager: React.FC<MariaDbDatabaseManagerProps> = ({ version
                                 <Table stickyHeader size="small">
                                     <TableHead>
                                         <TableRow>
-                                            <TableCell sx={{ bgcolor: '#1a1d21', py: 1 }} className="font-black text-xs">{t('mariadb_manager.user_label')}</TableCell>
-                                            <TableCell sx={{ bgcolor: '#1a1d21', py: 1 }} className="font-black text-xs">Host</TableCell>
-                                            <TableCell sx={{ bgcolor: '#1a1d21', py: 1, textAlign: 'right' }} className="font-black text-xs">{t('common.actions')}</TableCell>
+                                            <TableCell sx={{ bgcolor: 'var(--color-bg-dark)', borderBottom: '1px solid var(--color-border-medium)', py: 1 }} className="font-black text-xs">{t('mariadb_manager.user_label')}</TableCell>
+                                            <TableCell sx={{ bgcolor: 'var(--color-bg-dark)', borderBottom: '1px solid var(--color-border-medium)', py: 1 }} className="font-black text-xs">Host</TableCell>
+                                            <TableCell sx={{ bgcolor: 'var(--color-bg-dark)', borderBottom: '1px solid var(--color-border-medium)', py: 1, textAlign: 'right' }} className="font-black text-xs">{t('common.actions')}</TableCell>
                                         </TableRow>
                                     </TableHead>
                                     <TableBody>
diff --git a/src/renderer/src/components/ProjectManager/ProjectSidebar.tsx b/src/renderer/src/components/ProjectManager/ProjectSidebar.tsx
index a6dd1a0..4ef0c22 100644
--- a/src/renderer/src/components/ProjectManager/ProjectSidebar.tsx
+++ b/src/renderer/src/components/ProjectManager/ProjectSidebar.tsx
@@ -59,13 +59,13 @@ export default function ProjectSidebar({
             bgcolor: 'var(--color-bg-sidebar)',
             height: '100%'
         }}>
-            <Box sx={{ p: 2, borderBottom: '1px solid rgba(255, 255, 255, 0.05)' }}>
+            <Box sx={{ p: 2, borderBottom: '1px solid var(--color-border-soft)' }}>
                 <Box sx={{ display: 'flex', gap: 1, mb: 2, alignItems: 'center' }}>
                     <Typography variant="h6" className="font-bold text-lg" sx={{ flexGrow: 1 }}>
                         {t('projects.title')}
                     </Typography>
                     <Tooltip title={t('projects.add_new')}>
-                        <IconButton size="small" color="primary" onClick={onAddProject} sx={{ bgcolor: 'rgba(57, 167, 255, 0.1)' }}>
+                        <IconButton size="small" color="primary" onClick={onAddProject} sx={{ bgcolor: 'var(--color-primary-soft)' }}>
                             <AddIcon fontSize="small" />
                         </IconButton>
                     </Tooltip>
@@ -83,20 +83,20 @@ export default function ProjectSidebar({
                             </InputAdornment>
                         ),
                         className: 'text-sm',
-                        sx: { bgcolor: 'rgba(0,0,0,0.2)' }
+                        sx: { bgcolor: 'var(--color-bg-medium)' }
                     }}
                 />
             </Box>
 
             <Box sx={{ flexGrow: 1, overflowY: 'auto', p: 1 }}>
                 {filtered.length === 0 ? (
-                    <Box sx={{ p: 4, textAlign: 'center', color: 'rgba(255,255,255,0.2)' }}>
+                    <Box sx={{ p: 4, textAlign: 'center', color: 'var(--color-text-muted)' }}>
                         <Typography variant="body2">{t('projects.empty')}</Typography>
                     </Box>
                 ) : (
                     Object.entries(grouped).sort().map(([version, projs]: [string, any]) => (
                         <Box key={version} sx={{ mb: 2 }}>
-                            <Typography variant="overline" className="font-black" sx={{ px: 1.5, color: 'primary.main', letterSpacing: 1 }}>
+                            <Typography variant="overline" className="font-black" sx={{ px: 1.5, color: 'var(--color-primary)', letterSpacing: 1 }}>
                                 {version}
                             </Typography>
                             <List dense disablePadding>
@@ -115,8 +115,8 @@ export default function ProjectSidebar({
                                             onClick={() => setSelectedProjectId(p.id)}
                                             sx={{ 
                                                 mb: 0.5,
-                                                border: selectedProjectId === p.id ? '1px solid rgba(57, 167, 255, 0.3)' : '1px solid transparent',
-                                                '&.Mui-selected': { bgcolor: 'rgba(57, 167, 255, 0.08)' }
+                                                border: selectedProjectId === p.id ? '1px solid var(--color-primary)' : '1px solid transparent',
+                                                '&.Mui-selected': { bgcolor: 'var(--color-primary-soft)' }
                                             }}
                                             className="rounded-md"
                                         >
@@ -126,8 +126,8 @@ export default function ProjectSidebar({
                                                         width: 8, 
                                                         height: 8, 
                                                         borderRadius: '50%', 
-                                                        bgcolor: isRunning ? 'success.main' : 'error.main',
-                                                        boxShadow: isRunning ? '0 0 8px rgba(76, 175, 80, 0.5)' : 'none'
+                                                        bgcolor: isRunning ? 'var(--color-success)' : 'var(--color-error)',
+                                                        boxShadow: isRunning ? '0 0 8px var(--color-success-soft)' : 'none'
                                                     }} />
                                                     <Typography variant="body2" noWrap className="font-semibold" sx={{ flexGrow: 1 }}>
                                                         {p.name}
@@ -138,7 +138,7 @@ export default function ProjectSidebar({
                                                         {(p.serverType || '').toUpperCase()} • {p.host}
                                                     </Typography>
                                                     {isRunning && (
-                                                        <Typography variant="caption" className="text-sm font-bold" sx={{ color: 'primary.light' }}>
+                                                        <Typography variant="caption" className="text-sm font-bold" sx={{ color: 'var(--color-primary)' }}>
                                                             {Math.round((serverStats?.cpu || 0) + (phpStats?.cpu || 0))}% CPU
                                                         </Typography>
                                                     )}
diff --git a/src/renderer/src/components/ServerTuning.tsx b/src/renderer/src/components/ServerTuning.tsx
index 9a1d579..2fe5bb3 100644
--- a/src/renderer/src/components/ServerTuning.tsx
+++ b/src/renderer/src/components/ServerTuning.tsx
@@ -258,10 +258,10 @@ export default function ServerTuning() {
     return (
         <Box>
             <Box sx={{ mb: 4 }}>
-                <Typography variant="h4" color="primary.light" className="font-black text-3xl" sx={{ mb: 1 }}>
+                <Typography variant="h4" sx={{ color: 'var(--color-primary)', mb: 1 }} className="font-black text-3xl">
                     {t('tuning.title')}
                 </Typography>
-                <Typography variant="body1" className="text-secondary">
+                <Typography variant="body1" sx={{ color: 'var(--color-text-secondary)' }}>
                     {t('tuning.desc')}
                 </Typography>
             </Box>
@@ -271,8 +271,8 @@ export default function ServerTuning() {
                 <Grid item xs={12} md={6}>
                     <Paper sx={{ p: 3, height: '100%', bgcolor: 'var(--color-bg-soft)', border: '1px solid var(--color-border-soft)' }} className="rounded-xl">
                         <Box sx={{ display: 'flex', alignItems: 'center', mb: 3, gap: 2 }}>
-                            <Box sx={{ p: 1.5, borderRadius: 2, bgcolor: 'primary.main', display: 'flex' }}>
-                                <PhpIcon className="text-white" />
+                            <Box sx={{ p: 1.5, borderRadius: 'var(--radius-md)', bgcolor: 'var(--color-primary)', display: 'flex' }}>
+                                <PhpIcon sx={{ color: 'white' }} />
                             </Box>
                             <Typography variant="h6" className="font-bold">PHP Tuning</Typography>
                             <Chip label={phpVersions.length} size="small" variant="outlined" />
@@ -302,8 +302,8 @@ export default function ServerTuning() {
                 <Grid item xs={12} md={6}>
                     <Paper sx={{ p: 3, height: '100%', bgcolor: 'var(--color-bg-soft)', border: '1px solid var(--color-border-soft)' }} className="rounded-xl">
                         <Box sx={{ display: 'flex', alignItems: 'center', mb: 3, gap: 2 }}>
-                            <Box sx={{ p: 1.5, borderRadius: 2, bgcolor: 'secondary.main', display: 'flex' }}>
-                                <DbIcon className="text-white" />
+                            <Box sx={{ p: 1.5, borderRadius: 'var(--radius-md)', bgcolor: 'var(--color-secondary)', display: 'flex' }}>
+                                <DbIcon sx={{ color: 'white' }} />
                             </Box>
                             <Typography variant="h6" className="font-bold">MariaDB Tuning</Typography>
                             <Chip label={mariaDbVersions.length} size="small" variant="outlined" />
@@ -347,13 +347,13 @@ export default function ServerTuning() {
                             {selectedVersion?.type === 'php' ? `PHP ${selectedVersion?.version}` : `MariaDB ${selectedVersion?.version}`} Tuning
                         </Typography>
                     </Box>
-                    <IconButton onClick={() => setIsModalOpen(false)} className="text-secondary">
+                    <IconButton onClick={() => setIsModalOpen(false)} sx={{ color: 'var(--color-text-tertiary)' }}>
                         <CloseIcon />
                     </IconButton>
                 </DialogTitle>
                 <DialogContent>
                     <Box sx={{ pt: 2 }}>
-                        <Alert severity="info" sx={{ mb: 4, bgcolor: 'rgba(2, 136, 209, 0.1)', color: 'info.light', border: '1px solid rgba(2, 136, 209, 0.2)' }}>
+                        <Alert severity="info" sx={{ mb: 4, bgcolor: 'var(--color-primary-soft)', color: 'var(--color-primary)', border: '1px solid var(--color-border-soft)' }}>
                             {t('tuning.restart_notice')}
                         </Alert>
 
@@ -364,7 +364,7 @@ export default function ServerTuning() {
                                         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                                             <Typography variant="subtitle2" className="font-bold">{p.label}</Typography>
                                             <Tooltip title={t(p.description)}>
-                                                <InfoIcon className="text-secondary" sx={{ fontSize: 'var(--font-size-md)', cursor: 'help' }} />
+                                                <InfoIcon sx={{ color: 'var(--color-text-tertiary)', fontSize: 'var(--font-size-md)', cursor: 'help' }} />
                                             </Tooltip>
                                         </Box>
                                         <TextField
@@ -372,7 +372,7 @@ export default function ServerTuning() {
                                             value={tuningValues[p.key]}
                                             onChange={(e) => setTuningValues({ ...tuningValues, [p.key]: parseInt(e.target.value) || p.min })}
                                             InputProps={{
-                                                endAdornment: <Typography variant="caption" sx={{ ml: 1 }} className="text-secondary">{p.unit}</Typography>
+                                                endAdornment: <Typography variant="caption" sx={{ ml: 1, color: 'var(--color-text-tertiary)' }}>{p.unit}</Typography>
                                             } as any}
                                             sx={{ width: 120, '& .MuiOutlinedInput-root': { height: 32 } }}
                                         />
diff --git a/src/renderer/src/locales/tr.json b/src/renderer/src/locales/tr.json
index 2fafc48..daa5f37 100644
--- a/src/renderer/src/locales/tr.json
+++ b/src/renderer/src/locales/tr.json
@@ -7,6 +7,7 @@
         "restart": "Yeniden Başlat",
         "settings": "Ayarlar",
         "tools": "Araçlar",
+        "open": "Aç",
         "close": "Kapat",
         "quit": "Çıkış",
         "save": "Kaydet",
@@ -75,6 +76,7 @@
     },
     "projects": {
         "title": "Projelerim",
+        "site_name": "Site Adı",
         "add_new": "Yeni Proje Ekle",
         "search": "Proje veya host ara...",
         "edit": "Proje Düzenle",