diff --git a/.gitignore b/.gitignore
index fde323a..8f4f27a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -113,7 +113,7 @@ releases/
build/
dist/
out/
-site/
+/site/
*.map
*.css.map
*.js.map
diff --git a/src/html/layouts/mokoonyx/social-icons.php b/src/html/layouts/mokoonyx/social-icons.php
new file mode 100644
index 0000000..174beba
--- /dev/null
+++ b/src/html/layouts/mokoonyx/social-icons.php
@@ -0,0 +1,91 @@
+
+
+ This file is part of a Moko Consulting project.
+
+ SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+defined('_JEXEC') or die;
+
+use Joomla\CMS\Language\Text;
+
+/**
+ * Social icons layout — rendered by index.php in topbar and/or footer.
+ *
+ * Expected $displayData keys:
+ * 'params' => Joomla\Registry\Registry (template params)
+ * 'position' => string ('topbar' | 'footer')
+ */
+
+$params = $displayData['params'];
+$position = $displayData['position'] ?? 'footer';
+
+// Platform definitions: key => [FA icon class, language key for aria-label]
+$platforms = [
+ 'facebook' => ['fa-brands fa-facebook-f', 'TPL_MOKOONYX_SOCIAL_FACEBOOK'],
+ 'twitter' => ['fa-brands fa-x-twitter', 'TPL_MOKOONYX_SOCIAL_TWITTER'],
+ 'instagram' => ['fa-brands fa-instagram', 'TPL_MOKOONYX_SOCIAL_INSTAGRAM'],
+ 'linkedin' => ['fa-brands fa-linkedin-in', 'TPL_MOKOONYX_SOCIAL_LINKEDIN'],
+ 'youtube' => ['fa-brands fa-youtube', 'TPL_MOKOONYX_SOCIAL_YOUTUBE'],
+ 'github' => ['fa-brands fa-github', 'TPL_MOKOONYX_SOCIAL_GITHUB'],
+ 'bluesky' => ['fa-brands fa-bluesky', 'TPL_MOKOONYX_SOCIAL_BLUESKY'],
+ 'threads' => ['fa-brands fa-threads', 'TPL_MOKOONYX_SOCIAL_THREADS'],
+ 'discord' => ['fa-brands fa-discord', 'TPL_MOKOONYX_SOCIAL_DISCORD'],
+ 'tiktok' => ['fa-brands fa-tiktok', 'TPL_MOKOONYX_SOCIAL_TIKTOK'],
+ 'reddit' => ['fa-brands fa-reddit-alien', 'TPL_MOKOONYX_SOCIAL_REDDIT'],
+ 'pinterest' => ['fa-brands fa-pinterest-p', 'TPL_MOKOONYX_SOCIAL_PINTEREST'],
+ 'snapchat' => ['fa-brands fa-snapchat', 'TPL_MOKOONYX_SOCIAL_SNAPCHAT'],
+ 'telegram' => ['fa-brands fa-telegram', 'TPL_MOKOONYX_SOCIAL_TELEGRAM'],
+ 'whatsapp' => ['fa-brands fa-whatsapp', 'TPL_MOKOONYX_SOCIAL_WHATSAPP'],
+ 'tumblr' => ['fa-brands fa-tumblr', 'TPL_MOKOONYX_SOCIAL_TUMBLR'],
+ 'twitch' => ['fa-brands fa-twitch', 'TPL_MOKOONYX_SOCIAL_TWITCH'],
+ 'spotify' => ['fa-brands fa-spotify', 'TPL_MOKOONYX_SOCIAL_SPOTIFY'],
+ 'soundcloud' => ['fa-brands fa-soundcloud', 'TPL_MOKOONYX_SOCIAL_SOUNDCLOUD'],
+ 'flickr' => ['fa-brands fa-flickr', 'TPL_MOKOONYX_SOCIAL_FLICKR'],
+ 'vimeo' => ['fa-brands fa-vimeo-v', 'TPL_MOKOONYX_SOCIAL_VIMEO'],
+ 'linktree' => ['fa-solid fa-link', 'TPL_MOKOONYX_SOCIAL_LINKTREE'],
+ 'mail' => ['fa-solid fa-envelope', 'TPL_MOKOONYX_SOCIAL_MAIL'],
+];
+
+// Collect enabled platforms (those with a non-empty URL)
+$active = [];
+foreach ($platforms as $key => [$iconClass, $langKey]) {
+ $url = trim((string) $params->get('social_' . $key . '_url', ''));
+ if ($url !== '' && preg_match('#^(https?://|mailto:|/)#i', $url)) {
+ $active[] = [
+ 'url' => $url,
+ 'iconClass' => $iconClass,
+ 'label' => Text::_($langKey),
+ ];
+ }
+}
+
+if (empty($active)) {
+ return;
+}
+
+$style = in_array($params->get('social_icon_style'), ['plain', 'circle', 'rounded'], true)
+ ? $params->get('social_icon_style') : 'plain';
+$size = in_array($params->get('social_icon_size'), ['sm', 'md', 'lg'], true)
+ ? $params->get('social_icon_size') : 'md';
+
+$listClass = 'moko-social-icons';
+$listClass .= ' moko-social-icons--' . htmlspecialchars($style, ENT_QUOTES, 'UTF-8');
+$listClass .= ' moko-social-icons--' . htmlspecialchars($size, ENT_QUOTES, 'UTF-8');
+$listClass .= ' moko-social-icons--' . htmlspecialchars($position, ENT_QUOTES, 'UTF-8');
+?>
+
diff --git a/src/index.php b/src/index.php
index 925803c..e5cd63c 100644
--- a/src/index.php
+++ b/src/index.php
@@ -436,9 +436,12 @@ $wa->useScript('user.js'); // js/user.js