diff --git a/src/Elements/BodyComponents/MjSocial.php b/src/Elements/BodyComponents/MjSocial.php
new file mode 100644
index 0000000..eb6eebb
--- /dev/null
+++ b/src/Elements/BodyComponents/MjSocial.php
@@ -0,0 +1,63 @@
+<?php
+
+declare(strict_types=1);
+
+namespace MadeByDenis\PhpMjmlRenderer\Elements\BodyComponents;
+
+use MadeByDenis\PhpMjmlRenderer\Elements\AbstractElement;
+
+class MjSocial extends AbstractElement
+{
+	public const string TAG_NAME = 'mj-social';
+	public const bool ENDING_TAG = false;
+
+	protected array $allowedAttributes = [
+		'align' => ['unit' => 'string', 'type' => 'alignment', 'default_value' => 'center'],
+		'border-radius' => ['unit' => 'px', 'type' => 'string', 'default_value' => '3px'],
+		'color' => ['unit' => 'color', 'type' => 'color', 'default_value' => '#333333'],
+		'font-family' => [
+			'unit' => 'string',
+			'type' => 'string',
+			'default_value' => 'Ubuntu, Helvetica, Arial, sans-serif',
+		],
+		'font-size' => ['unit' => 'px', 'type' => 'string', 'default_value' => '13px'],
+		'icon-size' => ['unit' => 'px', 'type' => 'string', 'default_value' => '20px'],
+		'mode' => ['unit' => 'string', 'type' => 'string', 'default_value' => 'horizontal'],
+		'padding' => ['unit' => 'px', 'type' => 'string', 'default_value' => '10px 25px'],
+	];
+
+	protected array $defaultAttributes = [
+		'align' => 'center',
+		'border-radius' => '3px',
+		'color' => '#333333',
+		'font-size' => '13px',
+		'icon-size' => '20px',
+		'mode' => 'horizontal',
+		'padding' => '10px 25px',
+	];
+
+	public function render(): string
+	{
+		$children = $this->getChildren() ?? [];
+		$content = $this->renderChildren($children, []);
+		$divAttributes = $this->getHtmlAttributes(['style' => 'div']);
+		return "<div $divAttributes>$content</div>";
+	}
+
+	public function getChildContext(): array
+	{
+		return [
+			...$this->context,
+			'border-radius' => $this->getAttribute('border-radius'),
+			'color' => $this->getAttribute('color'),
+			'font-family' => $this->getAttribute('font-family'),
+			'font-size' => $this->getAttribute('font-size'),
+			'icon-size' => $this->getAttribute('icon-size'),
+		];
+	}
+
+	public function getStyles(): array
+	{
+		return ['div' => ['text-align' => $this->getAttribute('align')]];
+	}
+}
diff --git a/src/Elements/BodyComponents/MjSocialElement.php b/src/Elements/BodyComponents/MjSocialElement.php
new file mode 100644
index 0000000..621609a
--- /dev/null
+++ b/src/Elements/BodyComponents/MjSocialElement.php
@@ -0,0 +1,62 @@
+<?php
+
+declare(strict_types=1);
+
+namespace MadeByDenis\PhpMjmlRenderer\Elements\BodyComponents;
+
+use MadeByDenis\PhpMjmlRenderer\Elements\AbstractElement;
+
+class MjSocialElement extends AbstractElement
+{
+	public const string TAG_NAME = 'mj-social-element';
+	public const bool ENDING_TAG = true;
+
+	protected array $allowedAttributes = [
+		'align' => ['unit' => 'string', 'type' => 'alignment', 'default_value' => 'left'],
+		'background-color' => ['unit' => 'color', 'type' => 'color', 'default_value' => ''],
+		'border-radius' => ['unit' => 'px', 'type' => 'string', 'default_value' => ''],
+		'color' => ['unit' => 'color', 'type' => 'color', 'default_value' => ''],
+		'font-family' => ['unit' => 'string', 'type' => 'string', 'default_value' => ''],
+		'font-size' => ['unit' => 'px', 'type' => 'string', 'default_value' => ''],
+		'href' => ['unit' => 'string', 'type' => 'string', 'default_value' => ''],
+		'icon-size' => ['unit' => 'px', 'type' => 'string', 'default_value' => ''],
+		'name' => ['unit' => 'string', 'type' => 'string', 'default_value' => ''],
+		'padding' => ['unit' => 'px', 'type' => 'string', 'default_value' => '4px'],
+		'src' => ['unit' => 'string', 'type' => 'string', 'default_value' => ''],
+		'target' => ['unit' => 'string', 'type' => 'string', 'default_value' => '_blank'],
+	];
+
+	protected array $defaultAttributes = [
+		'align' => 'left',
+		'padding' => '4px',
+		'target' => '_blank',
+	];
+
+	public function render(): string
+	{
+		$href = $this->getAttribute('href');
+		$target = $this->getAttribute('target');
+		$src = $this->getAttribute('src');
+		$iconSize = $this->getAttribute('icon-size') ?: $this->context['icon-size'] ?? '20px';
+		$content = $this->getContent();
+
+		$aAttributes = $this->getHtmlAttributes(['style' => 'a']);
+		$icon = $src ? "<img src='$src' width='$iconSize' height='$iconSize' />" : '';
+
+		return "<a href='$href' target='$target' $aAttributes>$icon $content</a>";
+	}
+
+	public function getStyles(): array
+	{
+		$color = $this->getAttribute('color') ?: $this->context['color'] ?? '#333333';
+		$fontFamily = $this->getAttribute('font-family') ?:
+			$this->context['font-family'] ?? 'Ubuntu, Helvetica, Arial, sans-serif';
+
+		return ['a' => [
+			'color' => $color,
+			'font-family' => $fontFamily,
+			'padding' => $this->getAttribute('padding'),
+			'text-decoration' => 'none',
+		]];
+	}
+}
diff --git a/src/Elements/HeadComponents/MjAttributes.php b/src/Elements/HeadComponents/MjAttributes.php
new file mode 100644
index 0000000..f062560
--- /dev/null
+++ b/src/Elements/HeadComponents/MjAttributes.php
@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+namespace MadeByDenis\PhpMjmlRenderer\Elements\HeadComponents;
+
+use MadeByDenis\PhpMjmlRenderer\Elements\AbstractElement;
+
+class MjAttributes extends AbstractElement
+{
+	public const string TAG_NAME = 'mj-attributes';
+	public const bool ENDING_TAG = false;
+
+	protected array $allowedAttributes = [];
+	protected array $defaultAttributes = [];
+
+	public function render(): string
+	{
+		return '';
+	}
+
+	public function getStyles(): array
+	{
+		return [];
+	}
+}
diff --git a/src/Elements/HeadComponents/MjBreakpoint.php b/src/Elements/HeadComponents/MjBreakpoint.php
index a3ea601..4167148 100644
--- a/src/Elements/HeadComponents/MjBreakpoint.php
+++ b/src/Elements/HeadComponents/MjBreakpoint.php
@@ -1,44 +1,18 @@
 <?php
 
-/**
- * PHP MJML Renderer library
- *
- * @package MadeByDenis\PhpMjmlRenderer
- * @link    https://github.com/dingo-d/php-mjml-renderer
- * @license https://opensource.org/licenses/MIT MIT
- */
-
 declare(strict_types=1);
 
 namespace MadeByDenis\PhpMjmlRenderer\Elements\HeadComponents;
 
 use MadeByDenis\PhpMjmlRenderer\Elements\AbstractElement;
 
-/**
- * Mjml Breakpoint Element
- *
- * @link https://documentation.mjml.io/#mj-breakpoint
- *
- * @since 1.0.0
- */
 class MjBreakpoint extends AbstractElement
 {
 	public const string TAG_NAME = 'mj-breakpoint';
-
 	public const bool ENDING_TAG = false;
 
-	/**
-	 * List of allowed attributes on the element
-	 *
-	 * @var array<string, array<string, string>>
-	 */
 	protected array $allowedAttributes = [
-		'width' => [
-			'unit' => 'px',
-			'type' => 'measure',
-			'description' => 'breakpoint width',
-			'default_value' => '480px',
-		],
+		'width' => ['unit' => 'px', 'type' => 'string', 'default_value' => '480px'],
 	];
 
 	protected array $defaultAttributes = [
@@ -47,14 +21,9 @@ class MjBreakpoint extends AbstractElement
 
 	public function render(): string
 	{
-		// mj-breakpoint doesn't render any HTML
-		// It's processed by mj-head to set responsive breakpoint
 		return '';
 	}
 
-	/**
-	 * @return array<string, array<string, string>>
-	 */
 	public function getStyles(): array
 	{
 		return [];
diff --git a/src/Elements/HeadComponents/MjFont.php b/src/Elements/HeadComponents/MjFont.php
index 713ce37..a33077c 100644
--- a/src/Elements/HeadComponents/MjFont.php
+++ b/src/Elements/HeadComponents/MjFont.php
@@ -1,70 +1,35 @@
 <?php
 
-/**
- * PHP MJML Renderer library
- *
- * @package MadeByDenis\PhpMjmlRenderer
- * @link    https://github.com/dingo-d/php-mjml-renderer
- * @license https://opensource.org/licenses/MIT MIT
- */
-
 declare(strict_types=1);
 
 namespace MadeByDenis\PhpMjmlRenderer\Elements\HeadComponents;
 
 use MadeByDenis\PhpMjmlRenderer\Elements\AbstractElement;
 
-/**
- * Mjml Font Element
- *
- * @link https://documentation.mjml.io/#mj-font
- *
- * @since 1.0.0
- */
 class MjFont extends AbstractElement
 {
 	public const string TAG_NAME = 'mj-font';
-
 	public const bool ENDING_TAG = false;
 
-	/**
-	 * List of allowed attributes on the element
-	 *
-	 * @var array<string, array<string, string>>
-	 */
 	protected array $allowedAttributes = [
-		'name' => [
-			'unit' => 'string',
-			'type' => 'string',
-			'description' => 'font name',
-			'default_value' => '',
-		],
-		'href' => [
-			'unit' => 'string',
-			'type' => 'string',
-			'description' => 'font url',
-			'default_value' => '',
-		],
+		'name' => ['unit' => 'string', 'type' => 'string', 'default_value' => ''],
+		'href' => ['unit' => 'string', 'type' => 'string', 'default_value' => ''],
 	];
 
 	protected array $defaultAttributes = [];
 
 	public function render(): string
 	{
-		$name = $this->getAttribute('name');
 		$href = $this->getAttribute('href');
+		$name = $this->getAttribute('name');
 
 		if (!$href) {
 			return '';
 		}
 
-		// Render as a link tag for non-MSO clients
-		return "<!--[if !mso]><!--><link href=\"$href\" rel=\"stylesheet\" type=\"text/css\"><!--<![endif]-->";
+		return "<link href='$href' rel='stylesheet' type='text/css'>";
 	}
 
-	/**
-	 * @return array<string, array<string, string>>
-	 */
 	public function getStyles(): array
 	{
 		return [];
diff --git a/src/Elements/HeadComponents/MjHead.php b/src/Elements/HeadComponents/MjHead.php
index 7f7426d..9268c0f 100644
--- a/src/Elements/HeadComponents/MjHead.php
+++ b/src/Elements/HeadComponents/MjHead.php
@@ -1,153 +1,25 @@
 <?php
 
-/**
- * PHP MJML Renderer library
- *
- * @package MadeByDenis\PhpMjmlRenderer
- * @link    https://github.com/dingo-d/php-mjml-renderer
- * @license https://opensource.org/licenses/MIT MIT
- */
-
 declare(strict_types=1);
 
 namespace MadeByDenis\PhpMjmlRenderer\Elements\HeadComponents;
 
 use MadeByDenis\PhpMjmlRenderer\Elements\AbstractElement;
-use MadeByDenis\PhpMjmlRenderer\Elements\ElementFactory;
 
-/**
- * Mjml Head Element
- *
- * @link https://documentation.mjml.io/#mj-head
- *
- * @since 1.0.0
- */
 class MjHead extends AbstractElement
 {
 	public const string TAG_NAME = 'mj-head';
-
 	public const bool ENDING_TAG = false;
 
-	/**
-	 * List of allowed attributes on the element
-	 *
-	 * @var array<string, array<string, string>>
-	 */
 	protected array $allowedAttributes = [];
-
 	protected array $defaultAttributes = [];
 
 	public function render(): string
 	{
 		$children = $this->getChildren() ?? [];
-
-		$title = '';
-		$preview = '';
-		$styles = '';
-		$fonts = [];
-		$breakpoint = '480px';
-
-		// Process head components
-		foreach ($children as $child) {
-			$tag = $child->getTag();
-			$element = ElementFactory::create($child);
-
-			match ($tag) {
-				'mj-title' => $title = $element->render(),
-				'mj-preview' => $preview = $element->render(),
-				'mj-style' => $styles .= $element->render(),
-				'mj-font' => $fonts[] = $element->render(),
-				'mj-breakpoint' => $breakpoint = $child->getAttributeValue('width') ?: '480px',
-				default => null,
-			};
-		}
-
-		// Build head content
-		$head = '<head>';
-		$head .= $title ?: '<title></title>';
-		$head .= '<!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->';
-		$head .= '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">';
-		$head .= '<meta name="viewport" content="width=device-width,initial-scale=1">';
-		$head .= $this->renderBaseStyles();
-		$head .= $this->renderMsoStyles();
-		$head .= $this->renderOutlookStyles();
-
-		// Add fonts
-		foreach ($fonts as $font) {
-			$head .= $font;
-		}
-
-		// Add responsive styles
-		$head .= $this->renderResponsiveStyles($breakpoint);
-
-		// Add custom styles
-		$head .= $styles;
-
-		// Add preview
-		$head .= $preview;
-
-		$head .= '</head>';
-
-		return $head;
-	}
-
-	private function renderBaseStyles(): string
-	{
-		$styles = '<style type="text/css">#outlook a { padding:0; }' . "\n";
-		$styles .= '          body { margin:0;padding:0;';
-		$styles .= '-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }' . "\n";
-		$styles .= '          table, td { border-collapse:collapse;';
-		$styles .= 'mso-table-lspace:0pt;mso-table-rspace:0pt; }' . "\n";
-		$styles .= '          img { border:0;height:auto;line-height:100%; outline:none;';
-		$styles .= 'text-decoration:none;-ms-interpolation-mode:bicubic; }' . "\n";
-		$styles .= '          p { display:block;margin:13px 0; }</style>';
-
-		return $styles;
-	}
-
-	private function renderMsoStyles(): string
-	{
-		$msoStyles = '<!--[if mso]>';
-		$msoStyles .= '<noscript><xml><o:OfficeDocumentSettings>';
-		$msoStyles .= '<o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch>';
-		$msoStyles .= '</o:OfficeDocumentSettings></xml></noscript>';
-		$msoStyles .= '<![endif]-->';
-
-		return $msoStyles;
-	}
-
-	private function renderOutlookStyles(): string
-	{
-		return '<!--[if lte mso 11]>
-        <style type="text/css">
-          .mj-outlook-group-fix { width:100% !important; }
-        </style>
-        <![endif]-->';
-	}
-
-	private function renderResponsiveStyles(string $breakpoint): string
-	{
-		$minWidth = $breakpoint;
-
-		$styles = '<!--[if !mso]><!-->';
-		$styles .= '<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" ';
-		$styles .= 'rel="stylesheet" type="text/css">';
-		$styles .= '<style type="text/css">';
-		$styles .= '@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);';
-		$styles .= '</style><!--<![endif]-->';
-		$styles .= "<style type=\"text/css\">@media only screen and (min-width:$minWidth) {";
-		$styles .= ' .mj-column-per-100 { width:100% !important; max-width: 100%; }';
-		$styles .= ' }</style>';
-		$styles .= "<style media=\"screen and (min-width:$minWidth)\">";
-		$styles .= '.moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }';
-		$styles .= '</style><style type="text/css"></style>';
-
-		return $styles;
+		return $this->renderChildren($children, []);
 	}
 
-	/**
-	 * @return array<string, array<string, string>>
-	 */
 	public function getStyles(): array
 	{
 		return [];
diff --git a/src/Elements/HeadComponents/MjHtmlAttributes.php b/src/Elements/HeadComponents/MjHtmlAttributes.php
new file mode 100644
index 0000000..2324ba1
--- /dev/null
+++ b/src/Elements/HeadComponents/MjHtmlAttributes.php
@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+namespace MadeByDenis\PhpMjmlRenderer\Elements\HeadComponents;
+
+use MadeByDenis\PhpMjmlRenderer\Elements\AbstractElement;
+
+class MjHtmlAttributes extends AbstractElement
+{
+	public const string TAG_NAME = 'mj-html-attributes';
+	public const bool ENDING_TAG = false;
+
+	protected array $allowedAttributes = [];
+	protected array $defaultAttributes = [];
+
+	public function render(): string
+	{
+		return '';
+	}
+
+	public function getStyles(): array
+	{
+		return [];
+	}
+}
diff --git a/src/Elements/HeadComponents/MjPreview.php b/src/Elements/HeadComponents/MjPreview.php
index 7a869da..c912d88 100644
--- a/src/Elements/HeadComponents/MjPreview.php
+++ b/src/Elements/HeadComponents/MjPreview.php
@@ -1,55 +1,25 @@
 <?php
 
-/**
- * PHP MJML Renderer library
- *
- * @package MadeByDenis\PhpMjmlRenderer
- * @link    https://github.com/dingo-d/php-mjml-renderer
- * @license https://opensource.org/licenses/MIT MIT
- */
-
 declare(strict_types=1);
 
 namespace MadeByDenis\PhpMjmlRenderer\Elements\HeadComponents;
 
 use MadeByDenis\PhpMjmlRenderer\Elements\AbstractElement;
 
-/**
- * Mjml Preview Element
- *
- * @link https://documentation.mjml.io/#mj-preview
- *
- * @since 1.0.0
- */
 class MjPreview extends AbstractElement
 {
 	public const string TAG_NAME = 'mj-preview';
-
 	public const bool ENDING_TAG = true;
 
-	/**
-	 * List of allowed attributes on the element
-	 *
-	 * @var array<string, array<string, string>>
-	 */
 	protected array $allowedAttributes = [];
-
 	protected array $defaultAttributes = [];
 
 	public function render(): string
 	{
 		$content = $this->getContent();
-
-		// Preview text is hidden but available for email clients
-		$previewStyle = 'display:none;font-size:1px;color:#ffffff;line-height:1px;';
-		$previewStyle .= 'max-height:0px;max-width:0px;opacity:0;overflow:hidden;';
-
-		return "<div style=\"$previewStyle\">$content</div>";
+		return "<div style='display:none;max-height:0px;overflow:hidden;'>$content</div>";
 	}
 
-	/**
-	 * @return array<string, array<string, string>>
-	 */
 	public function getStyles(): array
 	{
 		return [];
diff --git a/src/Elements/HeadComponents/MjStyle.php b/src/Elements/HeadComponents/MjStyle.php
index 9ba34c7..7339644 100644
--- a/src/Elements/HeadComponents/MjStyle.php
+++ b/src/Elements/HeadComponents/MjStyle.php
@@ -1,44 +1,18 @@
 <?php
 
-/**
- * PHP MJML Renderer library
- *
- * @package MadeByDenis\PhpMjmlRenderer
- * @link    https://github.com/dingo-d/php-mjml-renderer
- * @license https://opensource.org/licenses/MIT MIT
- */
-
 declare(strict_types=1);
 
 namespace MadeByDenis\PhpMjmlRenderer\Elements\HeadComponents;
 
 use MadeByDenis\PhpMjmlRenderer\Elements\AbstractElement;
 
-/**
- * Mjml Style Element
- *
- * @link https://documentation.mjml.io/#mj-style
- *
- * @since 1.0.0
- */
 class MjStyle extends AbstractElement
 {
 	public const string TAG_NAME = 'mj-style';
-
 	public const bool ENDING_TAG = true;
 
-	/**
-	 * List of allowed attributes on the element
-	 *
-	 * @var array<string, array<string, string>>
-	 */
 	protected array $allowedAttributes = [
-		'inline' => [
-			'unit' => 'string',
-			'type' => 'string',
-			'description' => 'whether styles should be inlined',
-			'default_value' => '',
-		],
+		'inline' => ['unit' => 'string', 'type' => 'string', 'default_value' => ''],
 	];
 
 	protected array $defaultAttributes = [];
@@ -48,14 +22,13 @@ public function render(): string
 		$content = $this->getContent();
 		$inline = $this->getAttribute('inline');
 
-		// For now, we'll always render as a style tag in head
-		// Inline styles would require processing during body rendering
-		return "<style type=\"text/css\">$content</style>";
+		if ($inline === 'inline') {
+			return $content;
+		}
+
+		return "<style type='text/css'>$content</style>";
 	}
 
-	/**
-	 * @return array<string, array<string, string>>
-	 */
 	public function getStyles(): array
 	{
 		return [];
diff --git a/src/Elements/HeadComponents/MjTitle.php b/src/Elements/HeadComponents/MjTitle.php
index a00220d..640623a 100644
--- a/src/Elements/HeadComponents/MjTitle.php
+++ b/src/Elements/HeadComponents/MjTitle.php
@@ -1,51 +1,24 @@
 <?php
 
-/**
- * PHP MJML Renderer library
- *
- * @package MadeByDenis\PhpMjmlRenderer
- * @link    https://github.com/dingo-d/php-mjml-renderer
- * @license https://opensource.org/licenses/MIT MIT
- */
-
 declare(strict_types=1);
 
 namespace MadeByDenis\PhpMjmlRenderer\Elements\HeadComponents;
 
 use MadeByDenis\PhpMjmlRenderer\Elements\AbstractElement;
 
-/**
- * Mjml Title Element
- *
- * @link https://documentation.mjml.io/#mj-title
- *
- * @since 1.0.0
- */
 class MjTitle extends AbstractElement
 {
 	public const string TAG_NAME = 'mj-title';
-
 	public const bool ENDING_TAG = true;
 
-	/**
-	 * List of allowed attributes on the element
-	 *
-	 * @var array<string, array<string, string>>
-	 */
 	protected array $allowedAttributes = [];
-
 	protected array $defaultAttributes = [];
 
 	public function render(): string
 	{
-		$content = $this->getContent();
-
-		return "<title>$content</title>";
+		return '<title>' . $this->getContent() . '</title>';
 	}
 
-	/**
-	 * @return array<string, array<string, string>>
-	 */
 	public function getStyles(): array
 	{
 		return [];
diff --git a/src/Elements/Utilities/MjInclude.php b/src/Elements/Utilities/MjInclude.php
new file mode 100644
index 0000000..485b6a5
--- /dev/null
+++ b/src/Elements/Utilities/MjInclude.php
@@ -0,0 +1,53 @@
+<?php
+
+declare(strict_types=1);
+
+namespace MadeByDenis\PhpMjmlRenderer\Elements\Utilities;
+
+use MadeByDenis\PhpMjmlRenderer\Elements\AbstractElement;
+
+class MjInclude extends AbstractElement
+{
+	public const string TAG_NAME = 'mj-include';
+	public const bool ENDING_TAG = false;
+
+	protected array $allowedAttributes = [
+		'path' => ['unit' => 'string', 'type' => 'string', 'default_value' => ''],
+		'type' => ['unit' => 'string', 'type' => 'string', 'default_value' => 'mjml'],
+	];
+
+	protected array $defaultAttributes = [
+		'type' => 'mjml',
+	];
+
+	public function render(): string
+	{
+		$path = $this->getAttribute('path');
+		$type = $this->getAttribute('type');
+
+		if (!$path || !file_exists($path)) {
+			return '';
+		}
+
+		$content = file_get_contents($path);
+
+		if ($content === false) {
+			return '';
+		}
+
+		if ($type === 'css') {
+			return "<style>$content</style>";
+		}
+
+		if ($type === 'html') {
+			return $content;
+		}
+
+		return $content;
+	}
+
+	public function getStyles(): array
+	{
+		return [];
+	}
+}
diff --git a/tests/Unit/Elements/BodyComponents/MjSocialTest.php b/tests/Unit/Elements/BodyComponents/MjSocialTest.php
new file mode 100644
index 0000000..dfac8bd
--- /dev/null
+++ b/tests/Unit/Elements/BodyComponents/MjSocialTest.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace MadeByDenis\PhpMjmlRenderer\Tests\Unit\Elements\BodyComponents;
+
+use MadeByDenis\PhpMjmlRenderer\Elements\BodyComponents\MjSocial;
+use MadeByDenis\PhpMjmlRenderer\Elements\BodyComponents\MjSocialElement;
+
+it('MjSocial has correct tag name', fn() => expect((new MjSocial())->getTagName())->toBe('mj-social'));
+it('MjSocial has correct defaults', fn() => expect((new MjSocial())->getAttribute('mode'))->toBe('horizontal'));
+
+it('MjSocialElement has correct tag name', function () {
+	expect((new MjSocialElement())->getTagName())->toBe('mj-social-element');
+});
+
+it('MjSocialElement renders', function () {
+	$element = new MjSocialElement(['href' => 'https://facebook.com'], 'Facebook');
+	$out = $element->render();
+	expect($out)->toContain('<a')->toContain('https://facebook.com')->toContain('Facebook');
+});
diff --git a/tests/Unit/Elements/HeadComponents/MjHeadComponentsTest.php b/tests/Unit/Elements/HeadComponents/MjHeadComponentsTest.php
new file mode 100644
index 0000000..3bafde7
--- /dev/null
+++ b/tests/Unit/Elements/HeadComponents/MjHeadComponentsTest.php
@@ -0,0 +1,101 @@
+<?php
+
+namespace MadeByDenis\PhpMjmlRenderer\Tests\Unit\Elements\HeadComponents;
+
+use MadeByDenis\PhpMjmlRenderer\Elements\HeadComponents\MjHead;
+use MadeByDenis\PhpMjmlRenderer\Elements\HeadComponents\MjTitle;
+use MadeByDenis\PhpMjmlRenderer\Elements\HeadComponents\MjPreview;
+use MadeByDenis\PhpMjmlRenderer\Elements\HeadComponents\MjFont;
+use MadeByDenis\PhpMjmlRenderer\Elements\HeadComponents\MjStyle;
+use MadeByDenis\PhpMjmlRenderer\Elements\HeadComponents\MjBreakpoint;
+use MadeByDenis\PhpMjmlRenderer\Elements\HeadComponents\MjAttributes;
+use MadeByDenis\PhpMjmlRenderer\Elements\HeadComponents\MjHtmlAttributes;
+
+describe('MjHead', function () {
+	it('has correct tag name', fn() => expect((new MjHead())->getTagName())->toBe('mj-head'));
+	it('is not ending tag', fn() => expect((new MjHead())->isEndingTag())->toBe(false));
+});
+
+describe('MjTitle', function () {
+	it('has correct tag name', fn() => expect((new MjTitle())->getTagName())->toBe('mj-title'));
+	it('is ending tag', fn() => expect((new MjTitle())->isEndingTag())->toBe(true));
+	
+	it('renders title correctly', function () {
+		$element = new MjTitle([], 'My Email Title');
+		expect($element->render())->toBe('<title>My Email Title</title>');
+	});
+});
+
+describe('MjPreview', function () {
+	it('has correct tag name', fn() => expect((new MjPreview())->getTagName())->toBe('mj-preview'));
+	it('is ending tag', fn() => expect((new MjPreview())->isEndingTag())->toBe(true));
+	
+	it('renders preview text as hidden div', function () {
+		$element = new MjPreview([], 'Preview text here');
+		$out = $element->render();
+		expect($out)->toContain('display:none');
+		expect($out)->toContain('Preview text here');
+	});
+});
+
+describe('MjFont', function () {
+	it('has correct tag name', fn() => expect((new MjFont())->getTagName())->toBe('mj-font'));
+	
+	it('renders font link correctly', function () {
+		$element = new MjFont([
+			'name' => 'Roboto',
+			'href' => 'https://fonts.googleapis.com/css?family=Roboto',
+		]);
+		$out = $element->render();
+		expect($out)->toContain('<link');
+		expect($out)->toContain('https://fonts.googleapis.com/css?family=Roboto');
+		expect($out)->toContain("rel='stylesheet'");
+	});
+
+	it('returns empty string when no href', function () {
+		$element = new MjFont(['name' => 'Roboto']);
+		expect($element->render())->toBe('');
+	});
+});
+
+describe('MjStyle', function () {
+	it('has correct tag name', fn() => expect((new MjStyle())->getTagName())->toBe('mj-style'));
+	
+	it('renders style tag by default', function () {
+		$element = new MjStyle([], '.test { color: red; }');
+		$out = $element->render();
+		expect($out)->toContain('<style');
+		expect($out)->toContain('.test { color: red; }');
+	});
+
+	it('renders inline when inline attribute is set', function () {
+		$element = new MjStyle(['inline' => 'inline'], '.test { color: blue; }');
+		expect($element->render())->toBe('.test { color: blue; }');
+	});
+});
+
+describe('MjBreakpoint', function () {
+	it('has correct tag name', fn() => expect((new MjBreakpoint())->getTagName())->toBe('mj-breakpoint'));
+	
+	it('has default width', function () {
+		$element = new MjBreakpoint();
+		expect($element->getAttribute('width'))->toBe('480px');
+	});
+
+	it('can set custom width', function () {
+		$element = new MjBreakpoint(['width' => '600px']);
+		expect($element->getAttribute('width'))->toBe('600px');
+	});
+});
+
+describe('MjAttributes', function () {
+	it('has correct tag name', fn() => expect((new MjAttributes())->getTagName())->toBe('mj-attributes'));
+	it('renders empty', fn() => expect((new MjAttributes())->render())->toBe(''));
+});
+
+describe('MjHtmlAttributes', function () {
+	it('has correct tag name', function () {
+		expect((new MjHtmlAttributes())->getTagName())->toBe('mj-html-attributes');
+	});
+	it('renders empty', fn() => expect((new MjHtmlAttributes())->render())->toBe(''));
+});
diff --git a/tests/Unit/Elements/Utilities/MjIncludeTest.php b/tests/Unit/Elements/Utilities/MjIncludeTest.php
new file mode 100644
index 0000000..8a3fd65
--- /dev/null
+++ b/tests/Unit/Elements/Utilities/MjIncludeTest.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace MadeByDenis\PhpMjmlRenderer\Tests\Unit\Elements\Utilities;
+
+use MadeByDenis\PhpMjmlRenderer\Elements\Utilities\MjInclude;
+
+describe('MjInclude', function () {
+	it('has correct tag name', fn() => expect((new MjInclude())->getTagName())->toBe('mj-include'));
+	
+	it('has default type mjml', function () {
+		$element = new MjInclude();
+		expect($element->getAttribute('type'))->toBe('mjml');
+	});
+
+	it('returns empty string for non-existent file', function () {
+		$element = new MjInclude(['path' => '/non/existent/file.mjml']);
+		expect($element->render())->toBe('');
+	});
+});