diff --git a/components/BadgeSnippet.jsx b/components/BadgeSnippet.jsx
index 21c60c4..64146d8 100644
--- a/components/BadgeSnippet.jsx
+++ b/components/BadgeSnippet.jsx
@@ -10,7 +10,7 @@ const STAT_OPTIONS = [
   { value: 'stars', label: 'Stars' },
 ];
 
-export default function BadgeSnippet({ login, siteUrl }) {
+export default function BadgeSnippet({ login, siteUrl, compact = false }) {
   const [stat, setStat] = useState('globalRank');
   const [format, setFormat] = useState('markdown');
   const [copied, setCopied] = useState(false);
@@ -36,7 +36,7 @@ export default function BadgeSnippet({ login, siteUrl }) {
   }
 
   return (
-    <section className="badge-card" id="get-your-badge">
+    <section className={`badge-card${compact ? ' badge-card--compact' : ''}`} id="get-your-badge">
       <span className="badge-card__eyebrow">Embeddable badge</span>
       <h2 className="badge-card__title">Get your badge</h2>
       <p className="badge-card__subtitle">
@@ -79,4 +79,4 @@ export default function BadgeSnippet({ login, siteUrl }) {
       </div>
     </section>
   );
-}
+}
\ No newline at end of file
diff --git a/components/DetailPanel.jsx b/components/DetailPanel.jsx
index 3f5951d..fab2f08 100644
--- a/components/DetailPanel.jsx
+++ b/components/DetailPanel.jsx
@@ -5,10 +5,11 @@ import { track } from '@vercel/analytics';
 import * as d3 from 'd3';
 import { formatNum, formatRelativeTime, isStaleData } from '../lib/format.js';
 import { DIMENSIONS, SCORE_METHODOLOGY } from '../lib/scoring.js';
-import { SOCIAL_PREVIEW_VERSION } from '../lib/site.js';
+import { SOCIAL_PREVIEW_VERSION, getSiteUrl } from '../lib/site.js';
 import { classifyAgent } from '../lib/agent-class.js';
 import { AI_TOOLS } from '../lib/ai-profile.js';
 import SpecialTags from './SpecialTags.jsx';
+import BadgeSnippet from './BadgeSnippet.jsx';
 
 export default function DetailPanel({ dev, onClose, onCardGenerated, claimedLogins, openCardOnMount = false, claimSuccess = false }) {
   const [fullData, setFullData] = useState(null);
@@ -133,8 +134,8 @@ export default function DetailPanel({ dev, onClose, onCardGenerated, claimedLogi
               {merged.soUserId && (
                 <a href={`https://stackoverflow.com/users/${merged.soUserId}`} target="_blank" rel="noreferrer">StackOverflow ↗</a>
               )}
-                <a href={`/share/${encodeURIComponent(dev.login)}#get-your-badge`} target="_blank" rel="noopener noreferrer">Get Badge ↗</a>
-                <button
+              <a href={`/share/${encodeURIComponent(dev.login)}#get-your-badge`} target="_blank" rel="noopener noreferrer">Get Badge ↗</a>
+              <button
                 className="btn btn--share"
                 onClick={handleGenerateCard}
               >
@@ -674,7 +675,9 @@ function CardModal({ dev, claimSuccess, onClose }) {
           </a>
           {linkedinCopied && <span className="card-modal__share-status" role="status">Caption and tags copied. Paste them into your LinkedIn post.</span>}
         </div>
+
+        <BadgeSnippet login={login} siteUrl={getSiteUrl()} compact />
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/styles/main.css b/styles/main.css
index ee2e010..aaa8147 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -3932,6 +3932,25 @@ body {
   overflow-y: auto;
   box-shadow: var(--shadow-strong);
   animation: fadeIn 0.2s ease;
+  scrollbar-width: thin;
+  scrollbar-color: var(--text-muted) transparent;
+}
+
+.card-modal::-webkit-scrollbar {
+  width: 8px;
+}
+
+.card-modal::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.card-modal::-webkit-scrollbar-thumb {
+  background: var(--text-muted);
+  border-radius: 4px;
+}
+
+.card-modal::-webkit-scrollbar-thumb:hover {
+  background: var(--text-secondary);
 }
 
 .card-modal__close {
@@ -3994,46 +4013,46 @@ body {
   margin-bottom: 14px;
 }
 
-.card-modal__rank-strip > div {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  padding: 10px 14px;
-  border: 1px solid rgba(8, 145, 178, 0.25);
-  border-radius: 8px;
-  background: rgba(8, 145, 178, 0.08);
+.badge-card--compact {
+  margin: 20px auto 0;
+  padding: 18px 18px 16px;
+  max-width: 100%;
 }
 
-.card-modal__rank-strip strong {
-  color: #0891b2;
-  font-size: 20px;
+.badge-card--compact .badge-card__title {
+  margin: 10px 0 4px;
+  font-size: 16px;
 }
 
-.card-modal__rank-strip span {
-  color: var(--text-secondary);
+.badge-card--compact .badge-card__subtitle {
+  margin: 0 0 14px;
   font-size: 12px;
 }
 
-.card-modal__preview {
-  position: relative;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  overflow: hidden;
-  margin-bottom: 20px;
-  min-height: 200px;
+.badge-card--compact .badge-card__stats {
+  margin-bottom: 14px;
+}
+
+.badge-card--compact .badge-card__preview {
+  margin-bottom: 14px;
+  padding: 10px;
+}
+
+.badge-card__preview {
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
+  min-height: 44px;
+  margin-bottom: 20px;
+  padding: 14px;
+  border: 1px dashed rgba(255, 255, 255, 0.12);
+  border-radius: 10px;
+  background: #060911;
 }
 
-.card-modal__image {
-  width: 100%;
-  height: auto;
-  display: block;
-  border-radius: 12px;
+.badge-card__preview img {
+  height: 20px;
 }
-
 .card-modal__loading,
 .card-modal__error {
   padding: 40px;
@@ -4314,9 +4333,7 @@ body {
   background: linear-gradient(135deg, #1d4ed8, #0a1f44);
   color: #f8fafc;
   box-shadow: 0 4px 14px rgba(29, 78, 216, 0.35);
-}
-
-.badge-card__preview {
+}.badge-card__preview {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -4371,7 +4388,7 @@ body {
   flex: 1;
   min-width: 0;
   overflow-wrap: anywhere;
-  white-space: normal;   
+  white-space: normal;
   color: #a8c5ff;
   font-size: 11.5px;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
@@ -4393,6 +4410,31 @@ body {
 .badge-card__copy:active {
   transform: translateY(1px);
 }
+
+.badge-card--compact {
+  margin: 20px auto 0;
+  padding: 18px 18px 16px;
+  max-width: 100%;
+}
+
+.badge-card--compact .badge-card__title {
+  margin: 10px 0 4px;
+  font-size: 16px;
+}
+
+.badge-card--compact .badge-card__subtitle {
+  margin: 0 0 14px;
+  font-size: 12px;
+}
+
+.badge-card--compact .badge-card__stats {
+  margin-bottom: 14px;
+}
+
+.badge-card--compact .badge-card__preview {
+  margin-bottom: 14px;
+  padding: 10px;
+}
 @media (max-width: 520px) {
   .quick-tour {
     left: 12px;
@@ -4519,6 +4561,8 @@ body {
   font-size: 11px;
 }
 
+}
+
 @media (prefers-reduced-motion: reduce) {
   .global-activity__item--new { animation: none; }
 }
@@ -4533,4 +4577,4 @@ body {
   color: #b42318;
   font-size: 12px;
   line-height: 1.4;
-}
+}
\ No newline at end of file