diff --git a/test-footer-shadcn.html b/test-footer-shadcn.html
new file mode 100644
index 0000000..aea47d1
--- /dev/null
+++ b/test-footer-shadcn.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Footer Component - shadcn Style</title>
+    <script type="module" src="./dist_bundle/bundle.js"></script>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: #fafafa;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+        @media (prefers-color-scheme: dark) {
+            body {
+                background: #09090b;
+            }
+        }
+        main {
+            flex: 1;
+            padding: 40px;
+            text-align: center;
+            color: #6b7280;
+        }
+        @media (prefers-color-scheme: dark) {
+            main {
+                color: #a1a1aa;
+            }
+        }
+        .demo-section {
+            margin-top: auto;
+        }
+        h1 {
+            margin-bottom: 20px;
+            color: #0a0a0a;
+        }
+        @media (prefers-color-scheme: dark) {
+            h1 {
+                color: #fafafa;
+            }
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>Footer Component with Full shadcn Styling</h1>
+        <p>The footer below has been fully updated to embrace shadcn design principles:</p>
+        <ul style="text-align: left; max-width: 600px; margin: 20px auto;">
+            <li>Minimal design with subtle borders</li>
+            <li>Consistent spacing and typography</li>
+            <li>No transform effects, only color transitions</li>
+            <li>Flat design with no gradients</li>
+            <li>Proper muted colors for secondary text</li>
+            <li>Clean hover states</li>
+            <li>Simplified social icons in square containers</li>
+            <li>Native-looking form controls</li>
+        </ul>
+    </main>
+
+    <div class="demo-section">
+        <upl-statuspage-footer
+            id="footer1"
+            company-name="Example Corp"
+            legal-url="https://example.com/legal"
+            support-email="support@example.com"
+            status-page-url="https://status.example.com"
+            show-powered-by="true"
+            enable-subscribe="true"
+            show-api-link="true"
+            rss-feed-url="https://status.example.com/rss"
+            api-status-url="https://api.example.com/status"
+            enable-language-selector="true"
+            enable-theme-toggle="true"
+            subscriber-count="1234"
+        ></upl-statuspage-footer>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const footer = document.getElementById('footer1');
+            
+            // Set social links
+            footer.socialLinks = [
+                { platform: 'twitter', url: 'https://twitter.com/example' },
+                { platform: 'github', url: 'https://github.com/example' },
+                { platform: 'linkedin', url: 'https://linkedin.com/company/example' },
+                { platform: 'youtube', url: 'https://youtube.com/example' }
+            ];
+            
+            // Set additional links
+            footer.additionalLinks = [
+                { label: 'API Documentation', url: 'https://docs.example.com' },
+                { label: 'Privacy Policy', url: 'https://example.com/privacy' },
+                { label: 'Terms of Service', url: 'https://example.com/terms' }
+            ];
+            
+            // Set supported languages
+            footer.supportedLanguages = [
+                { code: 'en', name: 'English' },
+                { code: 'de', name: 'Deutsch' },
+                { code: 'fr', name: 'Français' },
+                { code: 'es', name: 'Español' }
+            ];
+            
+            footer.currentLanguage = 'en';
+            footer.lastUpdated = Date.now();
+            footer.currentYear = new Date().getFullYear();
+            
+            // Event listeners
+            footer.addEventListener('subscribeClick', () => {
+                alert('Subscribe clicked - would open subscription form');
+            });
+            
+            footer.addEventListener('reportIssueClick', () => {
+                alert('Report issue clicked - would open issue form');
+            });
+            
+            footer.addEventListener('languageChange', (e) => {
+                console.log('Language changed to:', e.detail.language);
+            });
+            
+            footer.addEventListener('themeToggle', () => {
+                console.log('Theme toggle clicked');
+            });
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/ts_web/elements/upl-statuspage-footer.ts b/ts_web/elements/upl-statuspage-footer.ts
index 63236f7..0346f3d 100644
--- a/ts_web/elements/upl-statuspage-footer.ts
+++ b/ts_web/elements/upl-statuspage-footer.ts
@@ -118,10 +118,10 @@ export class UplStatuspageFooter extends DeesElement {
       }
       
       .footer-main {
-        display: grid;
-        grid-template-columns: 1fr auto;
-        gap: ${unsafeCSS(spacing['2xl'])};
+        display: flex;
+        justify-content: space-between;
         align-items: start;
+        gap: ${unsafeCSS(spacing['2xl'])};
       }
       
       .company-info {
@@ -131,9 +131,10 @@ export class UplStatuspageFooter extends DeesElement {
       }
       
       .company-name {
-        font-size: 20px;
-        font-weight: 600;
+        font-size: 16px;
+        font-weight: 500;
         color: ${colors.text.primary};
+        letter-spacing: -0.01em;
       }
       
       .company-links {
@@ -143,15 +144,15 @@ export class UplStatuspageFooter extends DeesElement {
       }
       
       .footer-link {
-        color: ${colors.text.secondary};
+        color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
         text-decoration: none;
-        transition: color 0.2s ease;
-        font-size: 14px;
+        transition: color 0.15s ease;
+        font-size: 13px;
+        font-weight: 400;
       }
       
       .footer-link:hover {
         color: ${colors.text.primary};
-        text-decoration: underline;
       }
       
       .footer-actions {
@@ -161,37 +162,36 @@ export class UplStatuspageFooter extends DeesElement {
       }
       
       .action-button {
-        padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.md)};
-        border: 1px solid ${colors.border.default};
-        background: transparent;
-        border-radius: ${unsafeCSS(borderRadius.base)};
+        padding: 8px 16px;
+        height: 36px;
+        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
+        border-radius: 6px;
         cursor: pointer;
         text-align: center;
-        transition: all 0.2s ease;
+        transition: all 0.15s ease;
         white-space: nowrap;
-        font-size: 14px;
-        font-weight: 500;
+        font-size: 13px;
+        font-weight: 400;
         color: ${colors.text.primary};
         font-family: ${unsafeCSS(fonts.base)};
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
       }
       
       .action-button:hover {
-        background: ${colors.background.secondary};
-        border-color: ${colors.border.muted};
-        transform: translateY(-1px);
-      }
-      
-      .action-button:active {
-        transform: translateY(0);
+        background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
+        border-color: ${cssManager.bdTheme('#d1d5db', '#3f3f46')};
       }
       
       .footer-bottom {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding-top: ${unsafeCSS(spacing.xl)};
-        margin-top: ${unsafeCSS(spacing.xl)};
-        border-top: 1px solid ${colors.border.default};
+        padding-top: ${unsafeCSS(spacing.lg)};
+        margin-top: ${unsafeCSS(spacing.lg)};
+        border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
       }
       
       .footer-meta {
@@ -208,60 +208,62 @@ export class UplStatuspageFooter extends DeesElement {
       }
       
       .social-link {
-        display: inline-block;
-        width: 20px;
-        height: 20px;
-        opacity: 0.7;
-        transition: all 0.2s ease;
-        color: ${colors.text.secondary};
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        border-radius: 6px;
+        transition: all 0.15s ease;
+        color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
       }
       
       .social-link:hover {
-        opacity: 1;
         color: ${colors.text.primary};
-        transform: translateY(-1px);
+        background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
       }
       
       .social-link svg {
-        width: 100%;
-        height: 100%;
+        width: 16px;
+        height: 16px;
         fill: currentColor;
       }
       
       .copyright {
-        font-size: 14px;
-        color: ${colors.text.secondary};
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
       }
       
       .last-updated {
-        font-size: 13px;
-        color: ${colors.text.muted};
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
       }
       
       .powered-by {
-        font-size: 13px;
-        color: ${colors.text.muted};
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
         text-align: right;
       }
       
       .powered-by a {
-        color: ${colors.text.secondary};
+        color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
         text-decoration: none;
-        transition: color 0.2s ease;
+        transition: color 0.15s ease;
       }
       
       .powered-by a:hover {
         color: ${colors.text.primary};
-        text-decoration: underline;
       }
       
       .status-update {
-        padding: ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.lg)};
-        background: ${colors.background.muted};
-        border-radius: ${unsafeCSS(borderRadius.base)};
-        font-size: 14px;
+        padding: 12px 16px;
+        background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
+        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        border-radius: 6px;
+        font-size: 13px;
         margin-bottom: ${unsafeCSS(spacing.lg)};
-        line-height: 1.6;
+        line-height: 1.5;
+        color: ${cssManager.bdTheme('#4b5563', '#d1d5db')};
       }
       
       .language-selector {
@@ -348,25 +350,24 @@ export class UplStatuspageFooter extends DeesElement {
       }
       
       .additional-link {
-        font-size: 14px;
-        color: ${colors.text.secondary};
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
         text-decoration: none;
-        transition: color 0.2s ease;
+        transition: color 0.15s ease;
       }
       
       .additional-link:hover {
         color: ${colors.text.primary};
-        text-decoration: underline;
       }
       
       @media (max-width: 640px) {
         .container {
-          padding: ${unsafeCSS(spacing.xl)} ${unsafeCSS(spacing.md)};
+          padding: ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.md)};
         }
         
         .footer-main {
-          grid-template-columns: 1fr;
-          gap: ${unsafeCSS(spacing.xl)};
+          flex-direction: column;
+          gap: ${unsafeCSS(spacing.lg)};
         }
         
         .footer-bottom {
@@ -411,13 +412,16 @@ export class UplStatuspageFooter extends DeesElement {
           
           ${this.offline ? html`
             <div class="offline-indicator">
-              <span>⚠</span> You are currently offline
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M6 2V6M6 10H6.01M11 6C11 8.76142 8.76142 11 6 11C3.23858 11 1 8.76142 1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              You are currently offline
             </div>
           ` : ''}
           
           ${this.latestStatusUpdate ? html`
             <div class="status-update">
-              <strong>Latest Update:</strong> ${this.latestStatusUpdate}
+              Latest Update: ${this.latestStatusUpdate}
             </div>
           ` : ''}
           
