diff --git a/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx b/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
index 8963330..3a39f04 100644
--- a/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
+++ b/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
@@ -276,6 +276,8 @@ export default function EditTemplate() {
     const heroGradientEnd = settings.hero_gradient_end || '#764ba2';
     const heroTextColor = settings.hero_text_color || '#ffffff';
     const buttonTextColor = settings.button_text_color || '#ffffff';
+    const bodyBgColor = settings.body_bg_color || '#f8f8f8';
+    const socialIconColor = settings.social_icon_color || 'white';
     const logoUrl = settings.logo_url || '';
     const headerText = settings.header_text || 'My WordPress Store';
     const footerText = settings.footer_text || `© ${new Date().getFullYear()} My WordPress Store. All rights reserved.`;
@@ -284,12 +286,13 @@ export default function EditTemplate() {
     // Replace {current_year} in footer
     const processedFooter = footerText.replace('{current_year}', new Date().getFullYear().toString());
     
-    // Generate social icons HTML
+    // Generate social icons HTML with PNG images
+    const pluginUrl = (window as any).woonoowData?.pluginUrl || '';
     const socialIconsHtml = socialLinks.length > 0 ? `
       <div style="margin-top: 16px;">
         ${socialLinks.map((link: any) => `
           <a href="${link.url}" style="display: inline-block; margin: 0 8px; text-decoration: none;">
-            <span style="font-size: 24px;">${getSocialIcon(link.platform)}</span>
+            <img src="${pluginUrl}assets/icons/mage--${link.platform}-${socialIconColor}.png" alt="${link.platform}" style="width: 24px; height: 24px;" />
           </a>
         `).join('')}
       </div>
@@ -300,7 +303,7 @@ export default function EditTemplate() {
       <html>
       <head>
         <style>
-          body { font-family: 'Inter', Arial, sans-serif; background: #f8f8f8; margin: 0; padding: 20px; }
+          body { font-family: 'Inter', Arial, sans-serif; background: ${bodyBgColor}; margin: 0; padding: 20px; }
           .container { max-width: 600px; margin: 0 auto; }
           .header { padding: 32px; text-align: center; background: #f8f8f8; }
           .card-gutter { padding: 0 16px; }
diff --git a/admin-spa/src/routes/Settings/Notifications/EmailCustomization.tsx b/admin-spa/src/routes/Settings/Notifications/EmailCustomization.tsx
index 84af504..7d9ce69 100644
--- a/admin-spa/src/routes/Settings/Notifications/EmailCustomization.tsx
+++ b/admin-spa/src/routes/Settings/Notifications/EmailCustomization.tsx
@@ -8,7 +8,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { __ } from '@/lib/i18n';
-import { ArrowLeft, RefreshCw, Upload, Plus, Trash2, Facebook, Twitter, Instagram, Linkedin, Youtube, Globe } from 'lucide-react';
+import { ArrowLeft, RefreshCw, Upload, Plus, Trash2, Facebook, Twitter, Instagram, Linkedin, Youtube, Globe, MessageCircle, Music, Send, AtSign } from 'lucide-react';
 import { toast } from 'sonner';
 import { openWPMediaLogo } from '@/lib/wp-media';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -25,6 +25,8 @@ interface EmailSettings {
   hero_gradient_end: string;
   hero_text_color: string;
   button_text_color: string;
+  body_bg_color: string;
+  social_icon_color: string;
   logo_url: string;
   header_text: string;
   footer_text: string;
@@ -46,6 +48,8 @@ export default function EmailCustomization() {
       hero_gradient_end: '#764ba2',
       hero_text_color: '#ffffff',
       button_text_color: '#ffffff',
+      body_bg_color: '#f8f8f8',
+      social_icon_color: 'white',
       logo_url: '',
       header_text: '',
       footer_text: '',
@@ -60,6 +64,8 @@ export default function EmailCustomization() {
     hero_gradient_end: '#764ba2',
     hero_text_color: '#ffffff',
     button_text_color: '#ffffff',
+    body_bg_color: '#f8f8f8',
+    social_icon_color: 'white',
     logo_url: '',
     header_text: '',
     footer_text: '',
@@ -151,10 +157,15 @@ export default function EmailCustomization() {
   const getSocialIcon = (platform: string) => {
     const icons: Record<string, any> = {
       facebook: Facebook,
-      twitter: Twitter,
+      x: AtSign,
       instagram: Instagram,
       linkedin: Linkedin,
       youtube: Youtube,
+      discord: MessageCircle,
+      spotify: Music,
+      telegram: Send,
+      whatsapp: MessageCircle,
+      threads: AtSign,
       website: Globe,
     };
     const Icon = icons[platform] || Globe;
@@ -334,11 +345,10 @@ export default function EmailCustomization() {
 
           {/* Preview */}
           <div className="mt-4 p-6 rounded-lg text-center" style={{
-            background: `linear-gradient(135deg, ${formData.hero_gradient_start} 0%, ${formData.hero_gradient_end} 100%)`,
-            color: formData.hero_text_color
+            background: `linear-gradient(135deg, ${formData.hero_gradient_start} 0%, ${formData.hero_gradient_end} 100%)`
           }}>
-            <h3 className="text-xl font-bold mb-2">{__('Preview')}</h3>
-            <p className="text-sm opacity-90">{__('This is how your hero cards will look')}</p>
+            <h3 className="text-xl font-bold mb-2" style={{ color: formData.hero_text_color }}>{__('Preview')}</h3>
+            <p className="text-sm opacity-90" style={{ color: formData.hero_text_color }}>{__('This is how your hero cards will look')}</p>
           </div>
         </SettingsCard>
 
@@ -396,6 +406,56 @@ export default function EmailCustomization() {
           </div>
         </SettingsCard>
 
+        {/* Email Background & Social Icons */}
+        <SettingsCard
+          title={__('Email Background & Social Icons')}
+          description={__('Customize email background and social icon colors')}
+        >
+          <div className="grid gap-6 sm:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="body_bg_color">{__('Email Background Color')}</Label>
+              <div className="flex gap-2">
+                <Input
+                  id="body_bg_color"
+                  type="color"
+                  value={formData.body_bg_color}
+                  onChange={(e) => handleChange('body_bg_color', e.target.value)}
+                  className="w-20 h-10 p-1 cursor-pointer"
+                />
+                <Input
+                  type="text"
+                  value={formData.body_bg_color}
+                  onChange={(e) => handleChange('body_bg_color', e.target.value)}
+                  placeholder="#f8f8f8"
+                  className="flex-1"
+                />
+              </div>
+              <p className="text-xs text-muted-foreground">
+                {__('Background color for the email body')}
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="social_icon_color">{__('Social Icon Color')}</Label>
+              <Select
+                value={formData.social_icon_color}
+                onValueChange={(value) => handleChange('social_icon_color', value)}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="white">{__('White Icons')}</SelectItem>
+                  <SelectItem value="black">{__('Black Icons')}</SelectItem>
+                </SelectContent>
+              </Select>
+              <p className="text-xs text-muted-foreground">
+                {__('Choose white icons for dark backgrounds, black for light backgrounds')}
+              </p>
+            </div>
+          </div>
+        </SettingsCard>
+
         {/* Logo & Branding */}
         <SettingsCard
           title={__('Logo & Branding')}
@@ -505,10 +565,10 @@ export default function EmailCustomization() {
                                   Facebook
                                 </div>
                               </SelectItem>
-                              <SelectItem value="twitter">
+                              <SelectItem value="x">
                                 <div className="flex items-center gap-2">
-                                  <Twitter className="h-4 w-4" />
-                                  Twitter
+                                  <AtSign className="h-4 w-4" />
+                                  X (Twitter)
                                 </div>
                               </SelectItem>
                               <SelectItem value="instagram">
@@ -529,6 +589,36 @@ export default function EmailCustomization() {
                                   YouTube
                                 </div>
                               </SelectItem>
+                              <SelectItem value="discord">
+                                <div className="flex items-center gap-2">
+                                  <MessageCircle className="h-4 w-4" />
+                                  Discord
+                                </div>
+                              </SelectItem>
+                              <SelectItem value="spotify">
+                                <div className="flex items-center gap-2">
+                                  <Music className="h-4 w-4" />
+                                  Spotify
+                                </div>
+                              </SelectItem>
+                              <SelectItem value="telegram">
+                                <div className="flex items-center gap-2">
+                                  <Send className="h-4 w-4" />
+                                  Telegram
+                                </div>
+                              </SelectItem>
+                              <SelectItem value="whatsapp">
+                                <div className="flex items-center gap-2">
+                                  <MessageCircle className="h-4 w-4" />
+                                  WhatsApp
+                                </div>
+                              </SelectItem>
+                              <SelectItem value="threads">
+                                <div className="flex items-center gap-2">
+                                  <AtSign className="h-4 w-4" />
+                                  Threads
+                                </div>
+                              </SelectItem>
                               <SelectItem value="website">
                                 <div className="flex items-center gap-2">
                                   <Globe className="h-4 w-4" />
diff --git a/assets/icons/mage--discord-black.png b/assets/icons/mage--discord-black.png
new file mode 100644
index 0000000..a3dadb9
Binary files /dev/null and b/assets/icons/mage--discord-black.png differ
diff --git a/assets/icons/mage--discord-white.png b/assets/icons/mage--discord-white.png
new file mode 100644
index 0000000..724fd90
Binary files /dev/null and b/assets/icons/mage--discord-white.png differ
diff --git a/assets/icons/mage--earth-black.png b/assets/icons/mage--earth-black.png
new file mode 100644
index 0000000..6dfa539
Binary files /dev/null and b/assets/icons/mage--earth-black.png differ
diff --git a/assets/icons/mage--earth-white.png b/assets/icons/mage--earth-white.png
new file mode 100644
index 0000000..613e58b
Binary files /dev/null and b/assets/icons/mage--earth-white.png differ
diff --git a/assets/icons/mage--facebook-black.png b/assets/icons/mage--facebook-black.png
new file mode 100644
index 0000000..ff4c760
Binary files /dev/null and b/assets/icons/mage--facebook-black.png differ
diff --git a/assets/icons/mage--facebook-white.png b/assets/icons/mage--facebook-white.png
new file mode 100644
index 0000000..974a92a
Binary files /dev/null and b/assets/icons/mage--facebook-white.png differ
diff --git a/assets/icons/mage--instagram-black.png b/assets/icons/mage--instagram-black.png
new file mode 100644
index 0000000..e2b359a
Binary files /dev/null and b/assets/icons/mage--instagram-black.png differ
diff --git a/assets/icons/mage--instagram-white.png b/assets/icons/mage--instagram-white.png
new file mode 100644
index 0000000..3064e7e
Binary files /dev/null and b/assets/icons/mage--instagram-white.png differ
diff --git a/assets/icons/mage--linkedin-black.png b/assets/icons/mage--linkedin-black.png
new file mode 100644
index 0000000..906c976
Binary files /dev/null and b/assets/icons/mage--linkedin-black.png differ
diff --git a/assets/icons/mage--linkedin-white.png b/assets/icons/mage--linkedin-white.png
new file mode 100644
index 0000000..b52494b
Binary files /dev/null and b/assets/icons/mage--linkedin-white.png differ
diff --git a/assets/icons/mage--spotify-black.png b/assets/icons/mage--spotify-black.png
new file mode 100644
index 0000000..538c46c
Binary files /dev/null and b/assets/icons/mage--spotify-black.png differ
diff --git a/assets/icons/mage--spotify-white.png b/assets/icons/mage--spotify-white.png
new file mode 100644
index 0000000..e261201
Binary files /dev/null and b/assets/icons/mage--spotify-white.png differ
diff --git a/assets/icons/mage--telegram-black.png b/assets/icons/mage--telegram-black.png
new file mode 100644
index 0000000..6146b38
Binary files /dev/null and b/assets/icons/mage--telegram-black.png differ
diff --git a/assets/icons/mage--telegram-white.png b/assets/icons/mage--telegram-white.png
new file mode 100644
index 0000000..8eb62c0
Binary files /dev/null and b/assets/icons/mage--telegram-white.png differ
diff --git a/assets/icons/mage--threads-black.png b/assets/icons/mage--threads-black.png
new file mode 100644
index 0000000..f7a47b9
Binary files /dev/null and b/assets/icons/mage--threads-black.png differ
diff --git a/assets/icons/mage--threads-white.png b/assets/icons/mage--threads-white.png
new file mode 100644
index 0000000..496f07d
Binary files /dev/null and b/assets/icons/mage--threads-white.png differ
diff --git a/assets/icons/mage--whatsapp-black.png b/assets/icons/mage--whatsapp-black.png
new file mode 100644
index 0000000..d248e00
Binary files /dev/null and b/assets/icons/mage--whatsapp-black.png differ
diff --git a/assets/icons/mage--whatsapp-white.png b/assets/icons/mage--whatsapp-white.png
new file mode 100644
index 0000000..31d5a58
Binary files /dev/null and b/assets/icons/mage--whatsapp-white.png differ
diff --git a/assets/icons/mage--x-black.png b/assets/icons/mage--x-black.png
new file mode 100644
index 0000000..c39757c
Binary files /dev/null and b/assets/icons/mage--x-black.png differ
diff --git a/assets/icons/mage--x-white.png b/assets/icons/mage--x-white.png
new file mode 100644
index 0000000..84f38dc
Binary files /dev/null and b/assets/icons/mage--x-white.png differ
diff --git a/assets/icons/mage--youtube-black.png b/assets/icons/mage--youtube-black.png
new file mode 100644
index 0000000..ff18afa
Binary files /dev/null and b/assets/icons/mage--youtube-black.png differ
diff --git a/assets/icons/mage--youtube-white.png b/assets/icons/mage--youtube-white.png
new file mode 100644
index 0000000..c0592fd
Binary files /dev/null and b/assets/icons/mage--youtube-white.png differ
diff --git a/includes/Api/NotificationsController.php b/includes/Api/NotificationsController.php
index 790ae47..d813e1a 100644
--- a/includes/Api/NotificationsController.php
+++ b/includes/Api/NotificationsController.php
@@ -854,6 +854,8 @@ class NotificationsController {
 			'hero_gradient_end' => '#764ba2',
 			'hero_text_color' => '#ffffff',
 			'button_text_color' => '#ffffff',
+			'body_bg_color' => '#f8f8f8',
+			'social_icon_color' => 'white',
 			'logo_url' => '',
 			'header_text' => '',
 			'footer_text' => '',
@@ -886,6 +888,8 @@ class NotificationsController {
 			'hero_gradient_end' => sanitize_hex_color($data['hero_gradient_end'] ?? '#764ba2'),
 			'hero_text_color' => sanitize_hex_color($data['hero_text_color'] ?? '#ffffff'),
 			'button_text_color' => sanitize_hex_color($data['button_text_color'] ?? '#ffffff'),
+			'body_bg_color' => sanitize_hex_color($data['body_bg_color'] ?? '#f8f8f8'),
+			'social_icon_color' => in_array($data['social_icon_color'] ?? 'white', ['white', 'black']) ? $data['social_icon_color'] : 'white',
 			'logo_url' => esc_url_raw($data['logo_url'] ?? ''),
 			'header_text' => sanitize_text_field($data['header_text'] ?? ''),
 			'footer_text' => sanitize_text_field($data['footer_text'] ?? ''),
@@ -922,7 +926,7 @@ class NotificationsController {
 		}
 		
 		$sanitized = [];
-		$allowed_platforms = ['facebook', 'twitter', 'instagram', 'linkedin', 'youtube', 'website'];
+		$allowed_platforms = ['facebook', 'x', 'instagram', 'linkedin', 'youtube', 'discord', 'spotify', 'telegram', 'whatsapp', 'threads', 'website'];
 		
 		foreach ($links as $link) {
 			if (!is_array($link) || !isset($link['platform']) || !isset($link['url'])) {
diff --git a/includes/Core/Notifications/EmailRenderer.php b/includes/Core/Notifications/EmailRenderer.php
index 578ad02..a7a8a05 100644
--- a/includes/Core/Notifications/EmailRenderer.php
+++ b/includes/Core/Notifications/EmailRenderer.php
@@ -416,16 +416,18 @@ class EmailRenderer {
 		// Replace {current_year} with actual year
 		$footer_text = str_replace('{current_year}', date('Y'), $footer_text);
 		
-		// Social icons
+		// Social icons with PNG images
 		$social_html = '';
 		if (!empty($email_settings['social_links']) && is_array($email_settings['social_links'])) {
+			$icon_color = !empty($email_settings['social_icon_color']) ? $email_settings['social_icon_color'] : 'white';
 			$social_html = '<div class="social-icons" style="margin-top: 16px; text-align: center;">';
 			foreach ($email_settings['social_links'] as $link) {
 				if (!empty($link['url']) && !empty($link['platform'])) {
+					$icon_url = $this->get_social_icon_url($link['platform'], $icon_color);
 					$social_html .= sprintf(
 						'<a href="%s" style="display: inline-block; margin: 0 8px;"><img src="%s" alt="%s" style="width: 24px; height: 24px;"></a>',
 						esc_url($link['url']),
-						$this->get_social_icon_url($link['platform']),
+						esc_url($icon_url),
 						esc_attr(ucfirst($link['platform']))
 					);
 				}
@@ -461,17 +463,13 @@ class EmailRenderer {
 	 * Get social icon URL
 	 * 
 	 * @param string $platform
+	 * @param string $color 'white' or 'black'
 	 * @return string
 	 */
-	private function get_social_icon_url($platform) {
-		// You can host these icons or use a CDN
-		$icons = [
-			'facebook' => 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/facebook.svg',
-			'instagram' => 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/instagram.svg',
-			'twitter' => 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/twitter.svg',
-			'linkedin' => 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/linkedin.svg',
-		];
-		
-		return $icons[$platform] ?? '';
+	private function get_social_icon_url($platform, $color = 'white') {
+		// Use local PNG icons
+		$plugin_url = plugin_dir_url(dirname(dirname(dirname(__FILE__))));
+		$filename = sprintf('mage--%s-%s.png', $platform, $color);
+		return $plugin_url . 'assets/icons/' . $filename;
 	}
 }
