diff --git a/src/index.html b/src/index.html
index 32edc7f..eb8751c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -260,7 +260,7 @@
             <div class="content">
                 <!-- VODs Tab -->
                 <div class="tab-content active" id="vodsTab">
-                    <div id="streamerProfileHeader" class="streamer-profile-header" style="display:none;"></div>
+                    <div id="streamerProfileHeader" class="streamer-profile-header is-hidden"></div>
                     <div class="vod-filter-row">
                         <input type="text" id="vodFilterInput" class="filter-input" placeholder="Filter VODs..." oninput="onVodFilterInput()">
                         <button type="button" id="vodFilterClearBtn" class="btn-close is-hidden" onclick="clearVodFilter()" title="Clear filter">x</button>
diff --git a/src/renderer-profile.ts b/src/renderer-profile.ts
index a019c26..572b0e0 100644
--- a/src/renderer-profile.ts
+++ b/src/renderer-profile.ts
@@ -30,16 +30,15 @@ function formatLastStreamAgo(iso: string | null): string {
 function hideStreamerProfileHeader(): void {
     const el = document.getElementById('streamerProfileHeader');
     if (!el) return;
-    el.style.display = 'none';
+    el.classList.add('is-hidden');
     applyHtml(el, '');
 }
 
 function renderStreamerProfileSkeleton(login: string): void {
     const el = document.getElementById('streamerProfileHeader');
     if (!el) return;
-    el.classList.remove('is-live');
+    el.classList.remove('is-live', 'is-hidden');
     el.classList.add('streamer-profile-skeleton');
-    el.style.display = 'flex';
     applyHtml(el, `
         <div class="streamer-profile-skel-block avatar"></div>
         <div class="streamer-profile-body">
@@ -60,9 +59,8 @@ function renderStreamerProfileSkeleton(login: string): void {
 function renderStreamerProfileCard(p: StreamerProfile): void {
     const el = document.getElementById('streamerProfileHeader');
     if (!el) return;
-    el.classList.remove('streamer-profile-skeleton');
+    el.classList.remove('streamer-profile-skeleton', 'is-hidden');
     if (p.isLive) el.classList.add('is-live'); else el.classList.remove('is-live');
-    el.style.display = 'block';
 
     const safeLogin = p.login.replace(/'/g, "\\'");
     const safeUrl = p.twitchUrl.replace(/'/g, "\\'");
diff --git a/src/styles.css b/src/styles.css
index 253ea91..95655e6 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -4257,7 +4257,14 @@ input[type="number"]::-webkit-outer-spin-button {
     box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 4px rgba(145, 70, 255, 0.55);
 }
 
-/* Skeleton loading state */
+/* Skeleton loading state — switches the profile-header from its
+   regular block layout to a flex row so the avatar + body sit
+   side-by-side. The element itself was previously flipped via inline
+   .style.display='flex' in renderStreamerProfileSkeleton(). */
+.streamer-profile-skeleton {
+    display: flex;
+}
+
 .streamer-profile-skeleton .streamer-profile-skel-block {
     background: linear-gradient(90deg, var(--bg-elevated) 0%, rgba(255,255,255,0.06) 50%, var(--bg-elevated) 100%);
     background-size: 200% 100%;