diff --git a/client/src/pages/About.js b/client/src/pages/About.js
index bca8458..8f80e1a 100644
--- a/client/src/pages/About.js
+++ b/client/src/pages/About.js
@@ -20,7 +20,7 @@ import {
 import { useTranslation } from 'react-i18next';
 import { motion } from 'framer-motion';
 import { Helmet } from 'react-helmet-async';
-import api from '../utils/api'; // ✅ بدل staticData
+import api from '../utils/api'; 
 
 const API_BASE = process.env.REACT_APP_API_URL || 'http://localhost:5080';
 const toMediaUrl = (url) => {
@@ -30,14 +30,13 @@ const toMediaUrl = (url) => {
     return url;
   }
   if (url.startsWith('/uploads/')) return `${API_BASE}${url}`;
-  return url; // /images/... stays on client
+  return url; 
 };
 
 const unwrapContent = (res) => {
   return res?.data?.data?.content || res?.data?.data || res?.data || null;
 };
 
-// ✅ remove HTML tags مثل <p>..</p>
 const stripHtml = (html = '') => String(html).replace(/<[^>]*>/g, '').trim();
 
 const About = () => {
@@ -47,7 +46,6 @@ const About = () => {
   const [loading, setLoading] = useState(true);
   const currentLanguage = i18n.language;
 
-  // ✅ Fetch about page content from API بدل static data
   useEffect(() => {
     let mounted = true;
 
@@ -138,7 +136,6 @@ const About = () => {
   // Use translations for non-English languages, API content for English
   const useTranslations = currentLanguage !== 'en';
 
-  // ✅ stripHtml only for content coming from dashboard (English)
   const heroTitle = useTranslations ? t('about.heroTitle') : stripHtml(content?.hero?.title || t('about.heroTitle'));
   const heroSubtitle = useTranslations ? t('about.heroSubtitle') : stripHtml(content?.hero?.subtitle || t('about.heroSubtitle'));
   const heroDescription = useTranslations ? '' : stripHtml(content?.hero?.description || '');
@@ -167,7 +164,6 @@ const About = () => {
     ...valuesSectionStatic,
     title: stripHtml(valuesSectionStatic.title || ''),
     content: stripHtml(valuesSectionStatic.content || ''),
-    // items (إذا موجودة) نتركها كما هي بدون تغيير
   };
 
   return (
@@ -319,54 +315,58 @@ const About = () => {
               </Typography>
             )}
             
-            <Grid container spacing={4}>
-              {(valuesSection.items && valuesSection.items.length > 0 ? valuesSection.items : values).map((value, index) => (
-                <Grid item xs={12} sm={6} md={3} key={index}>
-                  <motion.div
-                    initial={{ opacity: 0, y: 20 }}
-                    whileInView={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.6, delay: index * 0.1 }}
-                    viewport={{ once: true }}
+      <Grid container spacing={4}>
+        {(valuesSection.items && valuesSection.items.length > 0 ? valuesSection.items : values).map((value, index) => (
+          <Grid item xs={12} sm={6} md={3} key={index} sx={{ display: 'flex' }}>
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: index * 0.1 }}
+              viewport={{ once: true }}
+              style={{ height: '100%', width: '100%', display: 'flex' }}
+            >
+              <Card
+                sx={{
+                  height: '100%',
+                  flex: 1,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  textAlign: 'center',
+                  p: 3,
+                  '&:hover': {
+                    transform: 'translateY(-8px)',
+                    boxShadow: 6,
+                  },
+                  transition: 'all 0.3s ease',
+                }}
+              >
+                {value.icon && (
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      justifyContent: 'center',
+                      mb: 3,
+                      color: 'primary.main',
+                    }}
                   >
-                    <Card
-                      sx={{
-                        height: '100%',
-                        textAlign: 'center',
-                        p: 3,
-                        '&:hover': {
-                          transform: 'translateY(-8px)',
-                          boxShadow: 6,
-                        },
-                        transition: 'all 0.3s ease',
-                      }}
-                    >
-                      {value.icon && (
-                        <Box
-                          sx={{
-                            display: 'flex',
-                            justifyContent: 'center',
-                            mb: 3,
-                            color: 'primary.main',
-                          }}
-                        >
-                          {value.icon}
-                        </Box>
-                      )}
-                      <Typography
-                        variant="h6"
-                        component="h3"
-                        sx={{ mb: 2, fontWeight: 600 }}
-                      >
-                        {value.title}
-                      </Typography>
-                      <Typography variant="body2" color="text.secondary" sx={{ lineHeight: 1.6 }}>
-                        {value.description}
-                      </Typography>
-                    </Card>
-                  </motion.div>
-                </Grid>
-              ))}
-            </Grid>
+                    {value.icon}
+                  </Box>
+                )}
+                <Typography
+                  variant="h6"
+                  component="h3"
+                  sx={{ mb: 2, fontWeight: 600 }}
+                >
+                  {value.title}
+                </Typography>
+                <Typography variant="body2" color="text.secondary" sx={{ lineHeight: 1.6 }}>
+                  {value.description}
+                </Typography>
+              </Card>
+            </motion.div>
+          </Grid>
+        ))}
+      </Grid>
           </motion.div>
         </Container>
       </Box>