diff --git a/web-integrations/google-secure-signals/client-server/public/stylesheets/app.css b/web-integrations/google-secure-signals/client-server/public/stylesheets/app.css
index 45f944fc..6c81d2a4 100644
--- a/web-integrations/google-secure-signals/client-server/public/stylesheets/app.css
+++ b/web-integrations/google-secure-signals/client-server/public/stylesheets/app.css
@@ -128,13 +128,26 @@ h2 {
   border-bottom: 3px solid var(--primary-orange);
 }
 
+/* Teal section header for Google Secure Signals */
+h2.section-teal {
+  border-bottom: 3px solid var(--accent-teal);
+}
+
 p {
   font-size: 0.95rem;
-  color: var(--text-gray);
+  color: var(--text-dark);
   margin-bottom: 2rem;
   line-height: 1.8;
 }
 
+/* Section summary - same styling as intro but gray */
+p.section-summary {
+  font-size: 0.95rem;
+  color: var(--text-gray);
+  margin-bottom: 1rem;
+  line-height: 1.8;
+}
+
 a {
   color: var(--link-color);
   text-decoration: underline;
@@ -146,32 +159,36 @@ a:hover {
   opacity: 0.8;
 }
 
-/* State Table */
-#uid_state {
+/* State Tables */
+#uid_state,
+#secure_signals_state {
   width: 100%;
   border-collapse: collapse;
-  margin: 2rem 0;
+  margin: 1rem 0 2rem 0;
   font-size: 0.875rem;
   border: 1px solid var(--border-color);
   border-radius: 8px;
-  overflow: hidden;
-  position: relative;
   overflow: visible;
+  position: relative;
 }
 
-#uid_state tr {
+#uid_state tr,
+#secure_signals_state tr {
   border-bottom: 1px solid var(--border-color);
 }
 
-#uid_state tr:nth-child(even) {
+#uid_state tr:nth-child(even),
+#secure_signals_state tr:nth-child(even) {
   background-color: var(--bg-light);
 }
 
-#uid_state tr:last-child {
+#uid_state tr:last-child,
+#secure_signals_state tr:last-child {
   border-bottom: none;
 }
 
-#uid_state td {
+#uid_state td,
+#secure_signals_state td {
   padding: 1rem;
   vertical-align: top;
 }
@@ -200,6 +217,11 @@ a:hover {
   margin-top: 2rem;
 }
 
+.form.top-form {
+  margin-top: 0;
+  margin-bottom: 2rem;
+}
+
 .form-inline {
   display: flex;
   gap: 0;
@@ -260,6 +282,21 @@ a:hover {
   border-radius: 8px;
 }
 
+/* Opt-out banner */
+.optout-banner {
+  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0.05) 100%);
+  border-left: 4px solid var(--accent-yellow);
+  padding: 1rem 1.25rem;
+  margin: 1rem 0 2rem 0;
+  border-radius: 6px;
+}
+
+.optout-banner p {
+  margin: 0;
+  color: var(--text-dark);
+  font-weight: 500;
+}
+
 /* Tooltip Styles - Matching Self-Serve Portal */
 .tooltip-wrapper {
   display: inline-flex;
@@ -339,7 +376,7 @@ a:hover {
   .page-wrapper {
     flex-direction: column;
   }
-  
+
   .sidebar {
     position: static;
     max-height: none;
@@ -361,7 +398,7 @@ a:hover {
     border-right: 2px solid var(--border-color);
     border-bottom: none;
   }
-  
+
   .button {
     width: 100%;
   }
diff --git a/web-integrations/google-secure-signals/client-server/public/stylesheets/style.css b/web-integrations/google-secure-signals/client-server/public/stylesheets/style.css
index e116a79d..34956628 100644
--- a/web-integrations/google-secure-signals/client-server/public/stylesheets/style.css
+++ b/web-integrations/google-secure-signals/client-server/public/stylesheets/style.css
@@ -20,19 +20,19 @@
 }
 
 #playButton {
-  margin-top: 10px;
-  vertical-align: top;
-  width: 350px;
-  height: 60px;
-  padding: 0;
-  font-size: 22px;
+  width: 100px;
+  height: 36px;
+  margin-top: 0.5rem;
+  background: var(--button-navy, rgba(2, 10, 64, 1));
   color: white;
-  text-align: center;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
-  background: #2c3e50;
-  border: 0;
-  border-bottom: 2px solid #22303f;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  font-weight: 600;
   cursor: pointer;
-  -webkit-box-shadow: inset 0 -2px #22303f;
-  box-shadow: inset 0 -2px #22303f;
+  transition: all 0.2s ease;
+}
+
+#playButton:hover {
+  background: var(--button-navy-hover, rgba(2, 10, 64, 0.9));
 }
diff --git a/web-integrations/google-secure-signals/client-server/views/index.html b/web-integrations/google-secure-signals/client-server/views/index.html
index e3c26608..b1fbf0f2 100644
--- a/web-integrations/google-secure-signals/client-server/views/index.html
+++ b/web-integrations/google-secure-signals/client-server/views/index.html
@@ -138,20 +138,35 @@
       <div class="main-content">
         <%- include('intro.html'); -%>
 
-        <div id="googleAdContainer" style="display: none">
-          <div id="mainContainer">
-            <div id="content">
-              <video id="contentElement">
-                <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
-              </video>
+        <!-- Generate/Clear buttons at the top for easy access -->
+        <div id="login_form" style="display: none" class="form top-form">
+          <form action="/login" method="POST">
+            <div class="form-inline">
+              <input
+                type="text"
+                id="email"
+                name="email"
+                placeholder="Enter an email address"
+                class="email-input"
+              />
+              <input type="submit" value="Generate <%- identityName %>" class="button" />
             </div>
-            <div id="adContainer"></div>
-          </div>
-          <button id="playButton">Play</button>
-          <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
-          <script type="text/javascript" src="ads.js"></script>
+          </form>
         </div>
 
+        <div id="logout_form" style="display: none" class="form top-form">
+          <button type="button" class="button" id="logout">Clear <%- identityName %></button>
+        </div>
+
+        <div id="optout_form" style="display: none" class="form top-form">
+          <button type="button" class="button" id="try_another">Try Another Email</button>
+        </div>
+
+        <div id="optout_banner" style="display: none" class="optout-banner">
+          <p>The email address you entered has opted out of <%- identityName %>.</p>
+        </div>
+
+        <!-- UID2 Integration Status Section -->
         <h2><%- identityName %> Integration Status</h2>
 
         <table id="uid_state">
@@ -211,6 +226,13 @@ <h2><%- identityName %> Integration Status</h2>
             </td>
             <td class="value"><pre id="identity_state"></pre></td>
           </tr>
+        </table>
+
+        <!-- Google Secure Signals Section -->
+        <h2 class="section-teal">Google Secure Signals Status</h2>
+        <p class="section-summary">Secure Signals automatically reads the token from storage and shares it with Google Ad Manager.</p>
+
+        <table id="secure_signals_state">
           <tr>
             <td class="label">
               <div class="tooltip-wrapper">
@@ -241,31 +263,19 @@ <h2><%- identityName %> Integration Status</h2>
           </tr>
         </table>
 
-        <div id="optout_banner" style="display: none" class="optout-banner">
-          <p>The email address you entered has opted out of <%- identityName %>.</p>
-        </div>
-
-        <div id="login_form" style="display: none" class="form">
-          <form action="/login" method="POST">
-            <div class="form-inline">
-              <input
-                type="text"
-                id="email"
-                name="email"
-                placeholder="Enter an email address"
-                class="email-input"
-              />
-              <input type="submit" value="Generate <%- identityName %>" class="button" />
+        <!-- Video Ad Container - at the bottom -->
+        <div id="googleAdContainer" style="display: none">
+          <div id="mainContainer">
+            <div id="content">
+              <video id="contentElement">
+                <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
+              </video>
             </div>
-          </form>
-        </div>
-
-        <div id="logout_form" style="display: none" class="form">
-          <button type="button" class="button" id="logout">Clear <%- identityName %></button>
-        </div>
-
-        <div id="optout_form" style="display: none" class="form">
-          <button type="button" class="button" id="try_another">Try Another Email</button>
+            <div id="adContainer"></div>
+          </div>
+          <button id="playButton">Play</button>
+          <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
+          <script type="text/javascript" src="ads.js"></script>
         </div>
       </div>
 
diff --git a/web-integrations/google-secure-signals/client-side/html/index.html b/web-integrations/google-secure-signals/client-side/html/index.html
index 320f91ed..31f06fe1 100644
--- a/web-integrations/google-secure-signals/client-side/html/index.html
+++ b/web-integrations/google-secure-signals/client-side/html/index.html
@@ -7,9 +7,6 @@
     <link rel="stylesheet" type="text/css" href="/styles/app.css" />
     <link rel="shortcut icon" href="images/favicon.png" />
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-    <script>
-
-    </script>
   </head>
   <body>
     <div class="page-wrapper">
@@ -17,9 +14,26 @@
       <div class="main-content">
         <h1>Client-Side ${IDENTITY_NAME} Integration with Google Secure Signals</h1>
         <p class="intro">
-          This example demonstrates how a content publisher can integrate ${IDENTITY_NAME} with <strong>Google Secure Signals</strong> for Google Ad Manager, using client-side token generation. For documentation, see the <a href="${DOCS_BASE_URL}/guides/integration-javascript-client-side">Client-Side Integration Guide for JavaScript</a> and <a href="${DOCS_BASE_URL}/guides/integration-google-ss">Google Ad Manager Secure Signals Integration Guide</a>.
+          This example demonstrates how a content publisher can integrate ${IDENTITY_NAME} with <strong>Google Secure Signals</strong> for Google Ad Manager, using client-side token generation. For documentation, see the <a href="${DOCS_BASE_URL}/guides/integration-javascript-client-side">Client-Side Integration Guide for JavaScript</a> and <a href="${DOCS_BASE_URL}/guides/integration-google-ss">Google Ad Manager Secure Signals Integration Guide</a>. [<a href="https://github.com/IABTechLab/uid2-examples/tree/main/web-integrations/google-secure-signals/client-side">Source Code</a>]
         </p>
 
+        <!-- Generate/Clear buttons at the top for easy access -->
+        <div id="login_form" style="display: none" class="form" style="margin-top: 0; margin-bottom: 2rem;">
+          <div class="email_prompt">
+            <input
+              type="text"
+              id="email"
+              name="email"
+              placeholder="Enter an email address"
+            />
+            <button type="button" class="button" id="login">Generate ${IDENTITY_NAME}</button>
+          </div>
+        </div>
+        <div id="logout_form" style="display: none" class="form top-form">
+          <button type="button" class="button" id="logout">Clear ${IDENTITY_NAME}</button>
+        </div>
+
+        <!-- UID2 Integration Status Section -->
         <h2>${IDENTITY_NAME} Integration Status</h2>
 
         <table id="uid_state">
@@ -93,6 +107,13 @@ <h2>${IDENTITY_NAME} Integration Status</h2>
             </td>
             <td class="value"><pre id="identity_state"></pre></td>
           </tr>
+        </table>
+
+        <!-- Google Secure Signals Section -->
+        <h2 class="section-teal">Google Secure Signals Status</h2>
+        <p class="section-summary">Secure Signals automatically reads the token from storage and shares it with Google Ad Manager.</p>
+
+        <table id="secure_signals_state">
           <tr>
             <td class="label">
               <div class="tooltip-wrapper">
@@ -123,6 +144,7 @@ <h2>${IDENTITY_NAME} Integration Status</h2>
           </tr>
         </table>
 
+        <!-- Video Ad Container - at the bottom -->
         <div id="page-content">
           <div id="video-container">
             <video id="video-element">
@@ -133,21 +155,6 @@ <h2>${IDENTITY_NAME} Integration Status</h2>
           </div>
           <button id="play-button">Play</button>
         </div>
-
-        <div id="login_form" style="display: none" class="form">
-          <div class="email_prompt">
-            <input
-              type="text"
-              id="email"
-              name="email"
-              placeholder="Enter an email address"
-            />
-            <button type="button" class="button" id="login">Generate ${IDENTITY_NAME}</button>
-          </div>
-        </div>
-        <div id="logout_form" style="display: none" class="form">
-          <button type="button" class="button" id="logout">Clear ${IDENTITY_NAME}</button>
-        </div>
       </div>
 
       <!-- Sidebar for Instructions -->
diff --git a/web-integrations/google-secure-signals/client-side/html/styles/app.css b/web-integrations/google-secure-signals/client-side/html/styles/app.css
index 7c9ace9d..5e13b7d1 100644
--- a/web-integrations/google-secure-signals/client-side/html/styles/app.css
+++ b/web-integrations/google-secure-signals/client-side/html/styles/app.css
@@ -143,13 +143,26 @@ h2 {
   border-bottom: 3px solid var(--primary-orange);
 }
 
+/* Teal section header for Google Secure Signals */
+h2.section-teal {
+  border-bottom: 3px solid var(--accent-teal);
+}
+
 p {
   font-size: 0.95rem;
-  color: var(--text-gray);
+  color: var(--text-dark);
   margin-bottom: 2rem;
   line-height: 1.8;
 }
 
+/* Section summary - same styling as intro but gray */
+p.section-summary {
+  font-size: 0.95rem;
+  color: var(--text-gray);
+  margin-bottom: 1rem;
+  line-height: 1.8;
+}
+
 a {
   color: var(--link-color);
   text-decoration: underline;
@@ -161,33 +174,37 @@ a:hover {
   opacity: 0.8;
 }
 
-/* State Table */
-#uid_state {
+/* State Tables */
+#uid_state,
+#secure_signals_state {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
-  margin: 2rem 0;
+  margin: 1rem 0 2rem 0;
   border: 2px solid var(--border-color);
   border-radius: 8px;
-  overflow: hidden;
+  overflow: visible;
   font-size: 0.875rem;
   position: relative;
-  overflow: visible;
 }
 
-#uid_state tr {
+#uid_state tr,
+#secure_signals_state tr {
   border-bottom: 1px solid var(--border-color);
 }
 
-#uid_state tr:last-child {
+#uid_state tr:last-child,
+#secure_signals_state tr:last-child {
   border-bottom: none;
 }
 
-#uid_state tr:nth-child(even) {
+#uid_state tr:nth-child(even),
+#secure_signals_state tr:nth-child(even) {
   background-color: var(--bg-light);
 }
 
-#uid_state td {
+#uid_state td,
+#secure_signals_state td {
   padding: 1rem;
   vertical-align: top;
 }
@@ -217,6 +234,11 @@ a:hover {
   margin-top: 2rem;
 }
 
+.form.top-form {
+  margin-top: 0;
+  margin-bottom: 2rem;
+}
+
 .email_prompt {
   display: flex;
   gap: 0;
@@ -277,7 +299,6 @@ a:hover {
   border-radius: 8px;
 }
 
-/* Opt-out Banner */
 /* Success Message */
 .message {
   background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%);
@@ -365,6 +386,39 @@ a:hover {
   opacity: 1;
 }
 
+/* Video Container Styling */
+#page-content {
+  margin-top: 2rem;
+}
+
+#video-container {
+  position: relative;
+  max-width: 600px;
+}
+
+#video-element {
+  width: 100%;
+  border-radius: 8px;
+}
+
+#play-button {
+  width: 100px;
+  height: 36px;
+  margin-top: 0.5rem;
+  background: var(--button-navy);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+#play-button:hover {
+  background: var(--button-navy-hover);
+}
+
 /* Responsive Design */
 @media (max-width: 1024px) {
   .page-wrapper {
diff --git a/web-integrations/google-secure-signals/react-client-side/src/SecureSignalsApp.tsx b/web-integrations/google-secure-signals/react-client-side/src/SecureSignalsApp.tsx
index 61829c5b..24bae32c 100644
--- a/web-integrations/google-secure-signals/react-client-side/src/SecureSignalsApp.tsx
+++ b/web-integrations/google-secure-signals/react-client-side/src/SecureSignalsApp.tsx
@@ -383,71 +383,86 @@ const SecureSignalsApp = () => {
 
   return (
     <div className="page-wrapper">
+      {/* Main Content Area */}
       <div className="main-content">
-        <h1>
-          React Client-Side {IDENTITY_NAME} SDK Integration Example with Google Secure Signals
-        </h1>
-        <p>
-          This example demonstrates how a content publisher can integrate {IDENTITY_NAME} with Google Secure Signals using client-side token generation with React, where the SDK generates tokens directly in the browser. For documentation, see the{' '}
-          <a href={`${DOCS_BASE_URL}/guides/integration-javascript-client-side`}>
-            Client-Side Integration Guide for JavaScript
-          </a>{' '}
-          and{' '}
-          <a href={`${DOCS_BASE_URL}/guides/integration-google-ss`}>
-            Google Ad Manager Secure Signals Integration Guide
-          </a>.
+        <h1>React Client-Side {IDENTITY_NAME} Integration with Google Secure Signals</h1>
+        <p className="intro">
+          This example demonstrates how a content publisher can integrate {IDENTITY_NAME} with <strong>Google Secure Signals</strong> for Google Ad Manager, using client-side token generation. For documentation, see the{' '}
+          <a href={`${DOCS_BASE_URL}/guides/integration-javascript-client-side`}>Client-Side Integration Guide for JavaScript</a> and{' '}
+          <a href={`${DOCS_BASE_URL}/guides/integration-google-ss`}>Google Ad Manager Secure Signals Integration Guide</a>.
         </p>
 
-        <div id='page-content'>
-          <div id='video-container'>
-            <video id='video-element' ref={videoElementRef} onClick={handlePlay}>
-              <source src='https://storage.googleapis.com/interactive-media-ads/media/android.mp4' />
-              <source src='https://storage.googleapis.com/interactive-media-ads/media/android.webm' />
-            </video>
-            <div id='ad-container' ref={adContainerRef} onClick={handleAdContainerClick}></div>
+        {/* Generate/Clear buttons at the top for easy access */}
+        {isOptedOut ? (
+          <>
+            <div id="optout_banner" className="optout-banner">
+              <p>The email address you entered has opted out of {IDENTITY_NAME}.</p>
+            </div>
+            <div id="optout_form" className="form top-form">
+              <button type="button" className="button" onClick={handleTryAnother}>
+                Try Another Email
+              </button>
+            </div>
+          </>
+        ) : !isLoggedIn ? (
+          <div id="login_form" className="form top-form">
+            <div className="email_prompt">
+              <input
+                type="text"
+                id="email"
+                name="email"
+                placeholder="Enter an email address"
+                value={email}
+                onChange={handleEmailChange}
+              />
+              <button type="button" className="button" onClick={handleLogin}>
+                Generate {IDENTITY_NAME}
+              </button>
+            </div>
           </div>
-          <button id='play-button' onClick={handlePlay}>
-            Play
-          </button>
-        </div>
+        ) : (
+          <div id="logout_form" className="form top-form">
+            <button type="button" className="button" onClick={handleLogout}>
+              Clear {IDENTITY_NAME}
+            </button>
+          </div>
+        )}
 
+        {/* UID2 Integration Status Section */}
         <h2>{IDENTITY_NAME} Integration Status</h2>
-        <table id='uid_state'>
+
+        <table id="uid_state">
           <tbody>
             <tr>
-              <td className='label'>
+              <td className="label">
                 <div className="tooltip-wrapper">
                   Ready for Targeted Advertising:
                   <div className="tooltip">
                     <span className="tooltip-trigger">?</span>
                     <div className="tooltip-content">
-                      Indicates whether a valid {IDENTITY_NAME} token is present and can be passed to Google Secure Signals for targeted advertising.
+                      Indicates whether a valid {IDENTITY_NAME} token is present and can be used for personalized ad targeting.
                     </div>
                   </div>
                 </div>
               </td>
-              <td className='value'>
-                <pre>{targetedAdvertisingReady ? 'yes' : 'no'}</pre>
-              </td>
+              <td className="value"><pre>{targetedAdvertisingReady ? 'yes' : 'no'}</pre></td>
             </tr>
             <tr>
-              <td className='label'>
+              <td className="label">
                 <div className="tooltip-wrapper">
                   Advertising Token:
                   <div className="tooltip">
                     <span className="tooltip-trigger">?</span>
                     <div className="tooltip-content">
-                      The encrypted {IDENTITY_NAME} token passed to Google Secure Signals for advertising. It is automatically refreshed by the SDK in the background when expired.
+                      The encrypted {IDENTITY_NAME} token passed to Google Ad Manager for advertising. It is automatically refreshed by the SDK in the background when expired.
                     </div>
                   </div>
                 </div>
               </td>
-              <td className='value'>
-                <pre>{advertisingToken}</pre>
-              </td>
+              <td className="value"><pre>{advertisingToken}</pre></td>
             </tr>
             <tr>
-              <td className='label'>
+              <td className="label">
                 <div className="tooltip-wrapper">
                   Is Login Required?
                   <div className="tooltip">
@@ -458,14 +473,12 @@ const SecureSignalsApp = () => {
                   </div>
                 </div>
               </td>
-              <td className='value'>
-                <pre>{loginRequired ? 'yes' : 'no'}</pre>
-              </td>
+              <td className="value"><pre>{loginRequired ? 'yes' : 'no'}</pre></td>
             </tr>
             <tr>
-              <td className='label'>
+              <td className="label">
                 <div className="tooltip-wrapper">
-                  Has opted out?
+                  Has Opted Out?
                   <div className="tooltip">
                     <span className="tooltip-trigger">?</span>
                     <div className="tooltip-content">
@@ -474,12 +487,10 @@ const SecureSignalsApp = () => {
                   </div>
                 </div>
               </td>
-              <td className='value'>
-                <pre>{isOptedOut ? 'yes' : 'no'}</pre>
-              </td>
+              <td className="value"><pre>{isOptedOut ? 'yes' : 'no'}</pre></td>
             </tr>
             <tr>
-              <td className='label'>
+              <td className="label">
                 <div className="tooltip-wrapper">
                   Identity Callback State:
                   <div className="tooltip">
@@ -490,81 +501,64 @@ const SecureSignalsApp = () => {
                   </div>
                 </div>
               </td>
-              <td className='value'>
-                <pre>{identityState}</pre>
-              </td>
+              <td className="value"><pre>{identityState}</pre></td>
             </tr>
+          </tbody>
+        </table>
+
+        {/* Google Secure Signals Section */}
+        <h2 className="section-teal">Google Secure Signals Status</h2>
+        <p className="section-summary">Secure Signals automatically reads the token from storage and shares it with Google Ad Manager.</p>
+
+        <table id="secure_signals_state">
+          <tbody>
             <tr>
-              <td className='label'>
+              <td className="label">
                 <div className="tooltip-wrapper">
                   Secure Signals Loaded?
                   <div className="tooltip">
                     <span className="tooltip-trigger">?</span>
                     <div className="tooltip-content">
-                      Indicates whether Google Secure Signals has successfully loaded and cached the {IDENTITY_NAME} token.
+                      Indicates whether Google Secure Signals has successfully loaded and stored the {IDENTITY_NAME} token. Returns "yes" when signals are available in localStorage.
                     </div>
                   </div>
                 </div>
               </td>
-              <td className='value'>
-                <pre>{secureSignalsLoaded ? 'yes' : 'no'}</pre>
-              </td>
+              <td className="value"><pre>{secureSignalsLoaded ? 'yes' : 'no'}</pre></td>
             </tr>
             <tr>
-              <td className='label'>
+              <td className="label">
                 <div className="tooltip-wrapper">
                   Secure Signals Value:
                   <div className="tooltip">
                     <span className="tooltip-trigger">?</span>
                     <div className="tooltip-content">
-                      The {IDENTITY_NAME} data stored by Google Secure Signals in local storage for use in ad requests.
+                      The encrypted {IDENTITY_NAME} signals stored by Google in localStorage under the key '{SECURE_SIGNALS_STORAGE_KEY}'. These signals are shared with Google Ad Manager.
                     </div>
                   </div>
                 </div>
               </td>
-              <td className='value'>
-                <pre>{secureSignalsValue}</pre>
-              </td>
+              <td className="value"><pre>{secureSignalsValue}</pre></td>
             </tr>
           </tbody>
         </table>
 
-        {isOptedOut ? (
-          <>
-            <div id='optout_banner' style={{ border: '3px solid #ffc107', padding: '15px', margin: '20px 0' }}>
-              <p style={{ margin: 0 }}>The email address you entered has opted out of {IDENTITY_NAME}.</p>
-            </div>
-            <div id='optout_message' className='form'>
-              <button type='button' className='button' onClick={handleTryAnother}>
-                Try Another Email
-              </button>
-            </div>
-          </>
-        ) : !isLoggedIn ? (
-          <div id='login_form' className='form'>
-            <div className='email_prompt'>
-              <input
-                type='text'
-                id='email'
-                name='email'
-                placeholder='Enter an email address'
-                value={email}
-                onChange={handleEmailChange}
-              />
-              <button type='button' className='button' onClick={handleLogin}>
-                Generate {IDENTITY_NAME}
-              </button>
-            </div>
-          </div>
-        ) : (
-          <div id='logout_form' className='form'>
-            <button type='button' className='button' onClick={handleLogout}>
-              Clear {IDENTITY_NAME}
-            </button>
+        {/* Video Ad Container - at the bottom */}
+        <div id="page-content">
+          <div id="video-container">
+            <video id="video-element" ref={videoElementRef} onClick={handlePlay}>
+              <source src="https://storage.googleapis.com/interactive-media-ads/media/android.mp4" />
+              <source src="https://storage.googleapis.com/interactive-media-ads/media/android.webm" />
+            </video>
+            <div id="ad-container" ref={adContainerRef} onClick={handleAdContainerClick}></div>
           </div>
-        )}
+          <button id="play-button" onClick={handlePlay}>
+            Play
+          </button>
+        </div>
       </div>
 
+      {/* Sidebar for Instructions */}
       <aside className="sidebar">
         <h3>📋 How to Test</h3>
         
@@ -573,43 +567,45 @@ const SecureSignalsApp = () => {
           <ul>
             <li>Enter an email address in the input field</li>
             <li>Click "Generate {IDENTITY_NAME}" button</li>
-            <li>The SDK will initialize and request a token</li>
+            <li>Wait for the SDK to initialize the token</li>
           </ul>
         </div>
 
         <div className="section">
-          <h4>Step 2: View Video Ad</h4>
+          <h4>Step 2: Observe Integration</h4>
           <ul>
-            <li>Click the "Play" button to start the video</li>
-            <li>Google Secure Signals will use the {IDENTITY_NAME} token</li>
-            <li>Observe ad targeting with {IDENTITY_NAME}</li>
+            <li>Check "Integration Status" table for token values</li>
+            <li>Verify Secure Signals data appears</li>
+            <li>Note: Reload the page to update Secure Signals in localStorage</li>
           </ul>
         </div>
 
         <div className="section">
-          <h4>Step 3: Verify Secure Signals</h4>
+          <h4>Step 3: View Video Ad</h4>
           <ul>
-            <li>Check "Secure Signals Loaded?" changes to "yes"</li>
-            <li>View the Secure Signals value in the table</li>
-            <li>Token is stored in localStorage for ad requests</li>
+            <li>Video player appears after successful token generation</li>
+            <li>Click "Play" to watch the ad</li>
+            <li>Ad request includes {IDENTITY_NAME} token via Secure Signals</li>
           </ul>
         </div>
 
         <div className="section">
           <h4>Step 4: Test Opt-Out</h4>
           <ul>
-            <li>Clear {IDENTITY_NAME}, then try: <strong>test@example.com</strong></li>
+            <li>Try the special email: <strong>test@example.com</strong></li>
             <li>Observe "Has opted out?" changes to "yes"</li>
-            <li>No advertising token or Secure Signals are generated</li>
+            <li>No advertising token is generated</li>
           </ul>
         </div>
 
         <div className="section">
           <h4>What's Happening?</h4>
           <ul>
-            <li><strong>Client-Side Token Generation:</strong> The SDK generates tokens directly in the browser using your public credentials</li>
-            <li><strong>Secure Signals Integration:</strong> Google Secure Signals automatically retrieves and caches the {IDENTITY_NAME} token</li>
-            <li><strong>Local Storage:</strong> Both SDK identity and Secure Signals data are stored in localStorage for persistence</li>
+            <li><strong>Client-Side Token Generation:</strong> The SDK generates tokens directly in the browser</li>
+            <li><strong>Auto-Refresh:</strong> Tokens are automatically refreshed by the SDK in the background when expired</li>
+            <li><strong>Local Storage:</strong> The SDK stores identity in localStorage (__uid2_advertising_token or __euid_advertising_token) for persistence across page loads</li>
+            <li><strong>Google Secure Signals:</strong> Encrypted tokens are stored in localStorage under {SECURE_SIGNALS_STORAGE_KEY} and shared with Google Ad Manager</li>
+            <li><strong>IMA SDK:</strong> Displays video ads with {IDENTITY_NAME} targeting</li>
           </ul>
         </div>
 
diff --git a/web-integrations/google-secure-signals/react-client-side/src/styles/app.css b/web-integrations/google-secure-signals/react-client-side/src/styles/app.css
index 3146620a..6ee9430d 100644
--- a/web-integrations/google-secure-signals/react-client-side/src/styles/app.css
+++ b/web-integrations/google-secure-signals/react-client-side/src/styles/app.css
@@ -80,16 +80,16 @@ body {
   height: fit-content;
   max-height: calc(100vh - 4rem);
   overflow-y: auto;
-  }
-  
+}
+
 .sidebar h3 {
   color: var(--primary-dark);
   font-size: 1.1rem;
   margin-bottom: 1rem;
   padding-bottom: 0.5rem;
   border-bottom: 2px solid var(--primary-orange);
-  }
-  
+}
+
 .sidebar .section {
   margin-bottom: 1.5rem;
 }
@@ -143,13 +143,26 @@ h2 {
   border-bottom: 3px solid var(--primary-orange);
 }
 
+/* Teal section header for Google Secure Signals */
+h2.section-teal {
+  border-bottom: 3px solid var(--accent-teal);
+}
+
 p {
   font-size: 0.95rem;
-  color: var(--text-gray);
+  color: var(--text-dark);
   margin-bottom: 2rem;
   line-height: 1.8;
 }
 
+/* Section summary - same styling as intro but gray */
+p.section-summary {
+  font-size: 0.95rem;
+  color: var(--text-gray);
+  margin-bottom: 1rem;
+  line-height: 1.8;
+}
+
 a {
   color: var(--link-color);
   text-decoration: underline;
@@ -161,30 +174,37 @@ a:hover {
   opacity: 0.8;
 }
 
-/* State Table */
-#uid_state {
+/* State Tables */
+#uid_state,
+#secure_signals_state {
   width: 100%;
-  border-collapse: collapse;
-  margin: 2rem 0;
-  font-size: 0.875rem;
-  border: 1px solid var(--border-color);
+  border-collapse: separate;
+  border-spacing: 0;
+  margin: 1rem 0 2rem 0;
+  border: 2px solid var(--border-color);
   border-radius: 8px;
-  overflow: hidden;
+  overflow: visible;
+  font-size: 0.875rem;
+  position: relative;
 }
 
-#uid_state tr {
+#uid_state tr,
+#secure_signals_state tr {
   border-bottom: 1px solid var(--border-color);
 }
 
-#uid_state tr:nth-child(even) {
-  background-color: var(--bg-light);
+#uid_state tr:last-child,
+#secure_signals_state tr:last-child {
+  border-bottom: none;
 }
 
-#uid_state tr:last-child {
-  border-bottom: none;
+#uid_state tr:nth-child(even),
+#secure_signals_state tr:nth-child(even) {
+  background-color: var(--bg-light);
 }
 
-#uid_state td {
+#uid_state td,
+#secure_signals_state td {
   padding: 1rem;
   vertical-align: top;
 }
@@ -194,26 +214,32 @@ a:hover {
   color: var(--text-dark);
   white-space: nowrap;
   padding-right: 2rem;
-  width: 15em;
+  width: 280px;
 }
 
 .value {
   color: var(--text-gray);
-  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+  word-break: break-all;
 }
 
 .value pre {
   white-space: pre-wrap;
   word-break: break-all;
-    margin: 0;
-  }
-  
+  margin: 0;
+}
+
 /* Forms */
-  .form {
+.form {
   margin-top: 2rem;
-  }
-  
-  .email_prompt {
+}
+
+.form.top-form {
+  margin-top: 0;
+  margin-bottom: 2rem;
+}
+
+.email_prompt {
   display: flex;
   gap: 0;
   max-width: 600px;
@@ -231,6 +257,7 @@ a:hover {
   color: var(--text-dark);
   outline: none;
   transition: border-color 0.2s ease;
+  background: white;
 }
 
 #email:focus {
@@ -253,6 +280,9 @@ a:hover {
   transition: all 0.2s ease;
   white-space: nowrap;
   box-shadow: var(--shadow);
+  position: static;
+  width: auto;
+  height: auto;
 }
 
 .button:hover {
@@ -265,13 +295,29 @@ a:hover {
   transform: translateY(0);
 }
 
-/* Full width button for logout */
-#logout_form .button {
+/* Full width buttons for logout/optout */
+#logout_form .button,
+#optout_form .button {
   width: 100%;
   max-width: 600px;
   border-radius: 8px;
 }
 
+/* Opt-out banner */
+.optout-banner {
+  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0.05) 100%);
+  border-left: 4px solid var(--accent-yellow);
+  padding: 1rem 1.25rem;
+  margin: 0 0 2rem 0;
+  border-radius: 6px;
+}
+
+.optout-banner p {
+  margin: 0;
+  color: var(--text-dark);
+  font-weight: 500;
+}
+
 /* Success Message */
 .message {
   background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%);
@@ -284,23 +330,16 @@ a:hover {
   border-radius: 6px;
 }
 
-.product-tables {
-  display: flex;
-  flex-direction: row;
-  gap: 2rem;
-  margin-top: 2rem;
-}
-
 /* Tooltip Styles - Matching Self-Serve Portal */
 .tooltip-wrapper {
   display: inline-flex;
-    align-items: center;
+  align-items: center;
   gap: 0.5rem;
 }
 
 .tooltip {
   position: relative;
-    display: inline-flex;
+  display: inline-flex;
   align-items: center;
   cursor: help;
 }
@@ -319,7 +358,7 @@ a:hover {
   justify-content: center;
   cursor: help;
   transition: all 0.2s ease;
-    flex-shrink: 0;
+  flex-shrink: 0;
 }
 
 .tooltip-trigger:hover {
@@ -331,7 +370,7 @@ a:hover {
   visibility: hidden;
   opacity: 0;
   position: absolute;
-  bottom: calc(100% + 8px); /* Position above with gap */
+  bottom: calc(100% + 8px);
   left: 50%;
   transform: translateX(-50%);
   background-color: var(--tooltip-bg);
@@ -339,11 +378,11 @@ a:hover {
   padding: 10px;
   border-radius: 4px;
   font-size: 0.75rem;
-  line-height: 1.125; 
-  min-width: 300px; 
-  max-width: 570px; 
+  line-height: 1.125;
+  min-width: 300px;
+  max-width: 570px;
   white-space: normal;
-  z-index: 10000; 
+  z-index: 10000;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   transition: opacity 0.2s ease, visibility 0.2s ease;
   font-weight: 400;
@@ -351,14 +390,14 @@ a:hover {
 }
 
 .tooltip-content::after {
-  content: '';
+  content: "";
   position: absolute;
   top: 100%;
   left: 50%;
-  transform: translateX(-50%);
-  border-width: 6px;
+  margin-left: -5px;
+  border-width: 5px;
   border-style: solid;
-  border-color: #1F2937 transparent transparent transparent;
+  border-color: var(--tooltip-bg) transparent transparent transparent;
 }
 
 .tooltip:hover .tooltip-content {
@@ -366,12 +405,40 @@ a:hover {
   opacity: 1;
 }
 
-/* Ensure table doesn't clip tooltips */
-#uid_state {
-    position: relative;
-  overflow: visible;
-  }
-  
+/* Video Container Styling */
+#page-content {
+  margin-top: 2rem;
+}
+
+#video-container {
+  position: relative;
+  max-width: 600px;
+}
+
+#video-element {
+  width: 100%;
+  border-radius: 8px;
+}
+
+#play-button {
+  width: 100px;
+  height: 36px;
+  margin-top: 0.5rem;
+  background: var(--button-navy);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+#play-button:hover {
+  background: var(--button-navy-hover);
+}
+
+/* Responsive Design */
 @media (max-width: 1024px) {
   .page-wrapper {
     flex-direction: column;
@@ -390,6 +457,10 @@ a:hover {
     padding: 1.5rem;
   }
   
+  h2 {
+    font-size: 1.25rem;
+  }
+  
   .email_prompt {
     flex-direction: column;
   }
@@ -402,5 +473,4 @@ a:hover {
   .button {
     width: 100%;
   }
-  }
-  
\ No newline at end of file
+}
diff --git a/web-integrations/google-secure-signals/server-side/public/stylesheets/app.css b/web-integrations/google-secure-signals/server-side/public/stylesheets/app.css
index e44bf8cd..5260fb61 100644
--- a/web-integrations/google-secure-signals/server-side/public/stylesheets/app.css
+++ b/web-integrations/google-secure-signals/server-side/public/stylesheets/app.css
@@ -1,102 +1,389 @@
+/* Centralized UID2 Examples Color Variables - Inlined */
+:root {
+  --primary-orange: #FF6B35;
+  --primary-dark: #2D3748;
+  --accent-teal: #0D9488;
+  --accent-yellow: #FBBF24;
+  --text-dark: #1A202C;
+  --text-gray: #718096;
+  --bg-white: #FFFFFF;
+  --bg-light: #F7FAFC;
+  --sidebar-bg: #FFF7ED;
+  --border-color: #E2E8F0;
+  --button-navy: rgba(2, 10, 64, 1);
+  --button-navy-hover: rgba(2, 10, 64, 0.9);
+  --link-color: #06B6D4;
+  --link-hover: #06B6D4;
+  --tooltip-bg: #1F2937;
+  --tooltip-trigger: #3B82F6;
+  --tooltip-trigger-hover: #2563EB;
+  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
 body {
-  padding: 50px;
-  font:
-    14px 'Lucida Grande',
-    Helvetica,
-    Arial,
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
+  background: var(--bg-light);
+  color: var(--text-dark);
+  line-height: 1.6;
+  padding: 2rem;
+}
+
+/* Two Column Layout */
+.page-wrapper {
+  display: flex;
+  gap: 2rem;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+/* Main Content Area (75%) */
+.main-content {
+  flex: 3;
+  background: var(--bg-white);
+  border-radius: 12px;
+  padding: 2.5rem;
+  box-shadow: var(--shadow-md);
+}
+
+/* Sidebar (25%) */
+.sidebar {
+  flex: 1;
+  background: var(--sidebar-bg);
+  border-radius: 12px;
+  padding: 2rem;
+  box-shadow: var(--shadow);
+  border-left: 4px solid var(--primary-orange);
+  position: sticky;
+  top: 2rem;
+  height: fit-content;
+  max-height: calc(100vh - 4rem);
+  overflow-y: auto;
+}
+
+.sidebar h3 {
+  color: var(--primary-dark);
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid var(--primary-orange);
+}
+
+.sidebar .section {
+  margin-bottom: 1.5rem;
+}
+
+.sidebar .section h4 {
+  color: var(--accent-teal);
+  font-size: 0.9rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.sidebar ul {
+  margin-left: 1.25rem;
+  font-size: 0.875rem;
+  color: var(--text-gray);
+}
+
+.sidebar li {
+  margin-bottom: 0.5rem;
+  line-height: 1.6;
+}
+
+.sidebar .note {
+  background: rgba(255, 107, 53, 0.1);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--text-dark);
+  margin-top: 1rem;
+}
+
+.sidebar .note strong {
+  color: var(--primary-orange);
+}
+
+/* Header */
+h1 {
+  font-size: 2rem;
+  font-weight: 800;
+  color: var(--primary-dark);
+  margin-bottom: 0.75rem;
+  line-height: 1.3;
+}
+
+h2 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--primary-dark);
+  margin: 2rem 0 1rem 0;
+  padding-bottom: 0.5rem;
+  border-bottom: 3px solid var(--primary-orange);
+}
+
+h2.section-teal {
+  border-bottom-color: var(--accent-teal);
+}
+
+p {
+  font-size: 0.95rem;
+  color: var(--text-dark);
+  margin-bottom: 2rem;
+  line-height: 1.8;
+}
+
+/* Section summary - same styling as intro but gray */
+p.section-summary {
+  font-size: 0.95rem;
+  color: var(--text-gray);
+  margin-bottom: 1rem;
+  line-height: 1.8;
 }
 
 a {
-  color: #00b7ff;
+  color: var(--link-color);
+  text-decoration: underline;
+  font-weight: 500;
+  transition: opacity 0.2s ease;
+}
+
+a:hover {
+  opacity: 0.8;
+}
+
+/* State Tables */
+#uid_state,
+#secure_signals_state {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1rem 0 2rem 0;
+  font-size: 0.875rem;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  overflow: visible;
+  position: relative;
+}
+
+#uid_state tr,
+#secure_signals_state tr {
+  border-bottom: 1px solid var(--border-color);
+}
+
+#uid_state tr:nth-child(even),
+#secure_signals_state tr:nth-child(even) {
+  background-color: var(--bg-light);
+}
+
+#uid_state tr:last-child,
+#secure_signals_state tr:last-child {
+  border-bottom: none;
+}
+
+#uid_state td,
+#secure_signals_state td {
+  padding: 1rem;
+  vertical-align: top;
+}
+
+.label {
+  font-weight: 600;
+  color: var(--text-dark);
+  white-space: nowrap;
+  padding-right: 2rem;
+  width: 15em;
 }
 
+.value {
+  color: var(--text-gray);
+  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+}
+
+.value pre {
+  white-space: pre-wrap;
+  word-break: break-all;
+  margin: 0;
+}
+
+/* Forms */
+.form {
+  margin-top: 2rem;
+}
+
+.form-inline {
+  display: flex;
+  gap: 0;
+  max-width: 600px;
+  box-shadow: var(--shadow);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.email-input {
+  flex: 1;
+  padding: 0.875rem 1.25rem;
+  border: 2px solid var(--border-color);
+  border-right: none;
+  font-size: 0.95rem;
+  color: var(--text-dark);
+  outline: none;
+  transition: border-color 0.2s ease;
+}
+
+.email-input:focus {
+  border-color: var(--primary-orange);
+}
+
+.email-input::placeholder {
+  color: var(--text-gray);
+}
+
+/* Buttons */
 .button {
-  border-style: none;
-  cursor: pointer;
-  align-items: center;
-  height: 40px;
-  width: 401px;
-  text-align: center;
-  position: absolute;
-  letter-spacing: 0.28px;
-  box-sizing: border-box;
+  padding: 0.875rem 2rem;
+  background: var(--button-navy);
   color: white;
-  font-family: 'Raleway', Helvetica, Arial, serif;
-  font-size: 14px;
-  font-style: normal;
+  border: none;
+  font-size: 0.95rem;
   font-weight: 700;
-  text-transform: none;
-  text-indent: 0px;
-  text-shadow: none;
-  margin: 0em;
-  padding: 1px 6px;
-  background-color: rgba(2, 10, 64, 1);
-  border-image: initial;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  box-shadow: var(--shadow);
 }
 
-.form {
-  margin-top: 40px;
+.button:hover {
+  background: var(--button-navy-hover);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 12px rgba(2, 10, 64, 0.3);
 }
 
-.email_prompt {
-  align-items: center;
-  align-self: center;
-  background-color: white;
-  border: 1px solid rgba(2, 10, 64, 1);
-  border-radius: 2px;
-  box-sizing: border-box;
+.button:active {
+  transform: translateY(0);
+}
+
+/* Full width button for logout and optout */
+#logout_form .button,
+#optout_form .button {
+  width: 100%;
+  max-width: 600px;
+  border-radius: 8px;
+}
+
+/* Tooltip Styles - Matching Self-Serve Portal */
+.tooltip-wrapper {
   display: inline-flex;
-  flex-direction: row;
-  flex-shrink: 0;
-  height: 40px;
-  justify-content: flex-start;
-  margin-right: 1px;
-  margin-bottom: 20px;
-  min-width: 399px;
-  padding: 0 16px;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.tooltip {
   position: relative;
-  width: auto;
+  display: inline-flex;
+  align-items: center;
+  cursor: help;
 }
 
-#email {
-  background-color: white;
+.tooltip-trigger {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: var(--tooltip-trigger);
+  color: white;
+  border: none;
+  font-size: 0.7rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: help;
+  transition: all 0.2s ease;
   flex-shrink: 0;
-  height: auto;
-  letter-spacing: 0.12px;
-  line-height: 16px;
-  min-height: 16px;
-  position: relative;
-  text-align: left;
-  white-space: nowrap;
-  width: 351px;
-  color: rgba(2, 10, 64, 1);
-  font-family: 'Raleway', Helvetica, Arial, serif;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 500;
-  padding: 1px 2px;
-  outline: none;
 }
 
-h1 {
-  padding-bottom: 20px;
+.tooltip-trigger:hover {
+  background-color: var(--tooltip-trigger-hover);
+  transform: scale(1.05);
 }
 
-#uid2_state .label {
-  white-space: nowrap;
-  padding-right: 20px;
+.tooltip-content {
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: var(--tooltip-bg);
+  color: white;
+  padding: 10px;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  line-height: 1.125; 
+  min-width: 300px; 
+  max-width: 570px; 
+  white-space: normal;
+  z-index: 10000; 
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+  font-weight: 400;
+  pointer-events: none;
 }
-#uid2_state tr {
-  margin-top: 10px;
+
+.tooltip-content::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 6px;
+  border-style: solid;
+  border-color: #1F2937 transparent transparent transparent;
 }
 
-.message {
-  color: green;
-  padding: 20px;
-  margin-left: -22px;
-  font-size: 16px;
-  font-weight: 500;
-  border: 2px solid green;
-  border-radius: 5px;
+.tooltip:hover .tooltip-content {
+  visibility: visible;
+  opacity: 1;
+}
+
+/* Video Container Styling */
+#googleAdContainer {
+  margin-top: 2rem;
+}
+
+@media (max-width: 1024px) {
+  .page-wrapper {
+    flex-direction: column;
+  }
+  
+  .sidebar {
+    position: static;
+    max-height: none;
+  }
+  
+  body {
+    padding: 1rem;
+  }
+  
+  .main-content {
+    padding: 1.5rem;
+  }
+  
+  .form-inline {
+    flex-direction: column;
+  }
+  
+  .email-input {
+    border-right: 2px solid var(--border-color);
+    border-bottom: none;
+  }
+  
+  .button {
+    width: 100%;
+  }
 }
diff --git a/web-integrations/google-secure-signals/server-side/public/stylesheets/style.css b/web-integrations/google-secure-signals/server-side/public/stylesheets/style.css
index e116a79d..51b7df13 100644
--- a/web-integrations/google-secure-signals/server-side/public/stylesheets/style.css
+++ b/web-integrations/google-secure-signals/server-side/public/stylesheets/style.css
@@ -22,17 +22,15 @@
 #playButton {
   margin-top: 10px;
   vertical-align: top;
-  width: 350px;
-  height: 60px;
-  padding: 0;
-  font-size: 22px;
+  width: 100px;
+  height: 36px;
+  padding: 0 16px;
+  font-size: 14px;
+  font-weight: 600;
   color: white;
   text-align: center;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
   background: #2c3e50;
   border: 0;
-  border-bottom: 2px solid #22303f;
+  border-radius: 6px;
   cursor: pointer;
-  -webkit-box-shadow: inset 0 -2px #22303f;
-  box-shadow: inset 0 -2px #22303f;
 }
diff --git a/web-integrations/google-secure-signals/server-side/server.js b/web-integrations/google-secure-signals/server-side/server.js
index e1216a82..ee6209c0 100644
--- a/web-integrations/google-secure-signals/server-side/server.js
+++ b/web-integrations/google-secure-signals/server-side/server.js
@@ -16,6 +16,7 @@ const uidClientSecret = process.env.UID_CLIENT_SECRET;
 
 // Secure Signals configuration
 const secureSignalsSdkUrl = process.env.UID_SECURE_SIGNALS_SDK_URL || 'https://cdn.integ.uidapi.com/uid2SecureSignal.js';
+const secureSignalsStorageKey = process.env.UID_SECURE_SIGNALS_STORAGE_KEY || '_GESPSK-uidapi.com';
 
 // UI/Display configuration
 const identityName = process.env.IDENTITY_NAME;
@@ -66,9 +67,6 @@ function decrypt(base64Response, base64Key, isRefreshResponse, nonceInRequest) {
 
   let payload;
   if (!isRefreshResponse) {
-    //The following code shows how we could consume timestamp if needed.
-    //const timestamp = new DataView(decrypted.subarray(0, timestampLength)).getBigInt64(0);
-    //const _date = new Date(Number(timestamp));
     const nonceInResponse = decrypted.subarray(timestampLength, timestampLength + nonceLength);
     if (!isEqual(nonceInRequest, new Uint8Array(nonceInResponse))) {
       throw new Error('Nonce in request does not match nonce in response');
@@ -140,13 +138,12 @@ async function refreshIdentity(identity) {
       uidBaseUrl + '/v2/token/refresh',
       identity.refresh_token,
       headers
-    ); //if HTTP response code is not 200, this throws and is caught in the catch handler below.
+    );
 
     let response;
     if (identity.refresh_response_key) {
       response = decrypt(encryptedResponse.data, identity.refresh_response_key, true);
     } else {
-      //If refresh_response_key doesn't exist, assume refresh_token came from a v1/token/generate query. In that scenario, /v2/token/refresh will return an unencrypted response.
       response = encryptedResponse.data;
     }
 
@@ -166,9 +163,10 @@ async function refreshIdentity(identity) {
     return Date.now() >= identity.identity_expires ? undefined : identity;
   }
 }
-async function verifyIdentity(req) {
+
+async function getValidIdentity(req) {
   if (!isRefreshableIdentity(req.session.identity)) {
-    return false;
+    return null;
   }
 
   if (
@@ -178,98 +176,35 @@ async function verifyIdentity(req) {
     req.session.identity = await refreshIdentity(req.session.identity);
   }
 
-  return !!req.session.identity;
-}
-async function protect(req, res, next) {
-  if (await verifyIdentity(req)) {
-    next();
-  } else {
-    req.session = null;
-    res.redirect('/login');
-  }
+  return req.session.identity;
 }
 
-app.get('/', protect, (req, res) => {
+// Main page - shows login form or identity state
+app.get('/', async (req, res) => {
+  const identity = await getValidIdentity(req);
+  
   res.render('index', {
-    identity: req.session.identity,
+    identity: identity,
+    isOptout: false,
     secureSignalsSdkUrl,
+    secureSignalsStorageKey,
     identityName,
     docsBaseUrl
   });
 });
 
-app.get('/getFreshToken', protect, async (req, res) => {
-  if (
-    Date.now() >= req.session.identity.refresh_from ||
-    Date.now() >= req.session.identity.identity_expires
-  ) {
-    req.session.identity = await refreshIdentity(req.session.identity);
-    res.cookie('identity', JSON.stringify(req.session.identity));
-  }
-  res.json(req.session.identity);
-});
-
-app.get('/login', async (req, res) => {
-  if (await verifyIdentity(req)) {
-    res.redirect('/');
+app.get('/getFreshToken', async (req, res) => {
+  const identity = await getValidIdentity(req);
+  
+  if (identity) {
+    res.cookie('identity', JSON.stringify(identity));
+    res.json(identity);
   } else {
-    req.session = null;
-    res.render('login', {
-      secureSignalsSdkUrl,
-      identityName,
-      docsBaseUrl
-    });
-  }
-});
-
-function _GenerateTokenV1(req, res) {
-  axios
-    .get(uidBaseUrl + '/v1/token/generate?email=' + encodeURIComponent(req.body.email), {
-      headers: { Authorization: 'Bearer ' + uidApiKey },
-    })
-    .then((response) => {
-      if (response.data.status === 'optout') {
-        res.render('optout', {
-          secureSignalsSdkUrl,
-          identityName,
-          docsBaseUrl
-        });
-      } else if (response.data.status !== 'success') {
-        res.render('error', {
-          error: 'Got unexpected token generate status: ' + response.data.status,
-          response,
-          secureSignalsSdkUrl,
-          identityName,
-          docsBaseUrl
-        });
-      } else if (typeof response.data.body !== 'object') {
-        res.render('error', {
-          error: 'Unexpected token generate response format: ' + response.data,
-          response,
-          secureSignalsSdkUrl,
-          identityName,
-          docsBaseUrl
-        });
-      } else {
-        req.session.identity = response.data.body;
-        res.redirect('/');
+    res.status(401).json({ error: 'No valid identity' });
       }
-    })
-    .catch((error) => {
-      res.render('error', {
-        error,
-        response: error.response,
-        secureSignalsSdkUrl,
-        identityName,
-        docsBaseUrl
-      });
-    });
-}
+});
 
 app.post('/login', async (req, res) => {
-  //Uncomment the following line to test that stored v1 sessions will still work when we upgrade to /v2/token/refresh.
-  //_GenerateTokenV1(req, res); return;
-
   const jsonEmail = JSON.stringify({ email: req.body.email });
   const { envelope, nonce } = createEnvelope(jsonEmail);
 
@@ -282,40 +217,62 @@ app.post('/login', async (req, res) => {
       uidBaseUrl + '/v2/token/generate',
       envelope,
       headers
-    ); //if HTTP response code is not 200, this throws and is caught in the catch handler below.
+    );
     const response = decrypt(encryptedResponse.data, uidClientSecret, false, nonce);
 
     if (response.status === 'optout') {
-      res.render('optout', {
+      // User has opted out - show optout state
+      req.session.identity = null;
+      res.render('index', {
+        identity: null,
+        isOptout: true,
         secureSignalsSdkUrl,
+        secureSignalsStorageKey,
         identityName,
         docsBaseUrl
       });
     } else if (response.status !== 'success') {
-      res.render('error', {
-        error: 'Got unexpected token generate status in decrypted response: ' + response.status,
-        response,
+      // Error - show error state
+      res.render('index', {
+        identity: null,
+        isOptout: false,
+        error: 'Got unexpected token generate status: ' + response.status,
         secureSignalsSdkUrl,
+        secureSignalsStorageKey,
         identityName,
         docsBaseUrl
       });
     } else if (typeof response.body !== 'object') {
-      res.render('error', {
-        error: 'Unexpected token generate response format in decrypted response: ' + response,
-        response,
+      // Error - show error state
+      res.render('index', {
+        identity: null,
+        isOptout: false,
+        error: 'Unexpected token generate response format',
         secureSignalsSdkUrl,
+        secureSignalsStorageKey,
         identityName,
         docsBaseUrl
       });
     } else {
+      // Success - store identity and show logged in state
       req.session.identity = response.body;
-      res.redirect('/');
+      res.render('index', {
+        identity: response.body,
+        isOptout: false,
+        secureSignalsSdkUrl,
+        secureSignalsStorageKey,
+        identityName,
+        docsBaseUrl
+      });
     }
   } catch (error) {
-    res.render('error', {
-      error,
-      response: error.response,
+    console.error('Token generation failed:', error);
+    res.render('index', {
+      identity: null,
+      isOptout: false,
+      error: 'Token generation failed: ' + error.message,
       secureSignalsSdkUrl,
+      secureSignalsStorageKey,
       identityName,
       docsBaseUrl
     });
@@ -324,7 +281,7 @@ app.post('/login', async (req, res) => {
 
 app.get('/logout', (req, res) => {
   req.session = null;
-  res.redirect('/login');
+  res.redirect('/');
 });
 
 app.listen(port, () => {
diff --git a/web-integrations/google-secure-signals/server-side/views/ads.html b/web-integrations/google-secure-signals/server-side/views/ads.html
deleted file mode 100644
index f4323531..00000000
--- a/web-integrations/google-secure-signals/server-side/views/ads.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<html>
-  <head>
-    <title>Video Ad - Server-Side UID2 Integration Example with Google Secure Signals</title>
-    <link rel="stylesheet" type="text/css" href="stylesheets/style.css">
-  </head>
-
-  <body>
-    <div id="mainContainer">
-      <div id="content">
-        <video id="contentElement">
-          <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
-        </video>
-      </div>
-      <div id="adContainer"></div>
-    </div>
-    <button id="playButton">Play</button>
-    <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
-    <script type="text/javascript" src="ads.js"></script>
-  </body>
-</html>
diff --git a/web-integrations/google-secure-signals/server-side/views/error.html b/web-integrations/google-secure-signals/server-side/views/error.html
deleted file mode 100644
index f8b33c1d..00000000
--- a/web-integrations/google-secure-signals/server-side/views/error.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<%- include('header.html'); -%>
-<p>Something went wrong:</p>
-<pre><%= error %></pre>
-<p>Response from the <%- identityName %> operator:</p>
-<pre><%= response ? JSON.stringify(response.data) : '' %></pre>
-<p>HTTP error:</p>
-<pre><%= response ? (response.status + ' ' + response.statusText) : '' %></pre>
-<p><a href="/">Back to the main page</a></p>
-<%- include('footer.html'); -%>
diff --git a/web-integrations/google-secure-signals/server-side/views/footer.html b/web-integrations/google-secure-signals/server-side/views/footer.html
deleted file mode 100644
index 1fd5f4f2..00000000
--- a/web-integrations/google-secure-signals/server-side/views/footer.html
+++ /dev/null
@@ -1,2 +0,0 @@
-  </body>
-</html>
\ No newline at end of file
diff --git a/web-integrations/google-secure-signals/server-side/views/header.html b/web-integrations/google-secure-signals/server-side/views/header.html
deleted file mode 100644
index 65380c47..00000000
--- a/web-integrations/google-secure-signals/server-side/views/header.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <title>Server-Side <%- identityName %> Integration Example with Google Secure Signals</title>
-    <link rel="stylesheet" type="text/css" href="/stylesheets/app.css" />
-    <link rel="shortcut icon" href="/images/favicon.png" />
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-    <script async src="<%- secureSignalsSdkUrl %>"></script>
-    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
-
-    <script type="text/javascript">
-      const getAdvertisingToken = async () => {
-        const response = await fetch('/getFreshToken');
-        const result = await response.json();
-        console.log(result);
-        return result.advertising_token;
-      };
-
-      window.getAdvertisingToken = getAdvertisingToken;
-
-      // If secureSignalProvider is initialized before getAdvertisingToken is assigned, call registerSecureSignalProvider
-      const providerName = '__' + '<%- identityName %>'.toLowerCase() + 'SecureSignalProvider';
-      if (window[providerName]) {
-        window[providerName].registerSecureSignalProvider();
-      }
-    </script>
-  </head>
-  <body>
-    <h1>Server-Side <%- identityName %> Integration Example with Google Secure Signals</h1>
-    <p class="intro">
-      This example demonstrates how a content publisher can use the <%- identityName %> services with Secure Signals to implement
-      <a href="<%- docsBaseUrl %>/guides/integration-google-ss#server-side-integration">Server-Side Integration</a>. [<a
-        href="https://github.com/IABTechLab/uid2-examples/tree/main/web-integrations/google-secure-signals/server-side"
-        >Source Code</a
-      >]
-      <br />
-      <br />
-      This assumes that the publisher has implemented <%- identityName %> 
-      <a href="<%- docsBaseUrl %>/guides/integration-publisher-server-side">Server-Side Integration</a>
-      on the back end and can pass the resulting <%- identityName %> identity response to the front end.
-    </p>
-  </body>
-</html>
diff --git a/web-integrations/google-secure-signals/server-side/views/identity.html b/web-integrations/google-secure-signals/server-side/views/identity.html
deleted file mode 100644
index dfeca933..00000000
--- a/web-integrations/google-secure-signals/server-side/views/identity.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<pre><%= JSON.stringify(identity, null, 2) %></pre>
-<div
-  id="logout_form"
-  class="form"
-  onsubmit="return window.googletag.secureSignalProviders.clearAllCache()"
->
-  <form action="/logout" method="GET">
-    <input type="submit" value="Clear <%- identityName %>" class="button" />
-  </form>
-</div>
diff --git a/web-integrations/google-secure-signals/server-side/views/index.html b/web-integrations/google-secure-signals/server-side/views/index.html
index 026df1f0..a9a3e561 100644
--- a/web-integrations/google-secure-signals/server-side/views/index.html
+++ b/web-integrations/google-secure-signals/server-side/views/index.html
@@ -1,3 +1,295 @@
-<%- include('header.html'); -%> <%- include('ads.html'); -%>
-<p>Current UID2 Identity:</p>
-<%- include('identity.html'); -%> <%- include('footer.html'); -%>
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Server-Side <%- identityName %> Integration Example with Google Secure Signals</title>
+    <link rel="stylesheet" type="text/css" href="/stylesheets/app.css" />
+    <link rel="stylesheet" type="text/css" href="/stylesheets/style.css" />
+    <link rel="shortcut icon" href="/images/favicon.png" />
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script async src="<%- secureSignalsSdkUrl %>"></script>
+    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
+
+    <script type="text/javascript">
+      const getUid2AdvertisingToken = async () => {
+        const response = await fetch('/getFreshToken');
+        const result = await response.json();
+        console.log(result);
+        return result.advertising_token;
+      };
+
+      window.getUid2AdvertisingToken = getUid2AdvertisingToken;
+
+      // If uid2SecureSignalProvider is initialized before getUid2AdvertisingToken is assigned, call registerSecureSignalProvider
+      if (window.__uid2SecureSignalProvider) {
+        window.__uid2SecureSignalProvider.registerSecureSignalProvider();
+      }
+    </script>
+    <script>
+      $(document).ready(() => {
+        const secureSignalsStorageKey = '<%- secureSignalsStorageKey %>';
+        
+        function updateSecureSignals() {
+          try {
+            const secureSignalsStorage = localStorage[secureSignalsStorageKey];
+            const secureSignalsStorageJson = secureSignalsStorage && JSON.parse(secureSignalsStorage);
+            
+            if (secureSignalsStorageJson && secureSignalsStorageJson[1]) {
+              $("#secure_signals_loaded").html("yes");
+              $("#secure_signals_value").html(JSON.stringify(secureSignalsStorageJson, null, 2));
+            } else {
+              $("#secure_signals_loaded").html("no");
+              $("#secure_signals_value").html("undefined");
+            }
+          } catch (e) {
+            console.log("Secure signals not yet available", e);
+            $("#secure_signals_loaded").html("no");
+            $("#secure_signals_value").html("undefined");
+          }
+        }
+        
+        // Update Secure Signals display after SDK has time to load and fetch token
+        setTimeout(updateSecureSignals, 1000);
+        
+        $('#logout').click(() => {
+          if (window.googletag && window.googletag.secureSignalProviders) {
+            window.googletag.secureSignalProviders.clearAllCache();
+          }
+          localStorage.removeItem(secureSignalsStorageKey);
+          window.location.href = '/logout';
+        });
+
+        $('#try_another').click(() => {
+          if (window.googletag && window.googletag.secureSignalProviders) {
+            window.googletag.secureSignalProviders.clearAllCache();
+          }
+          localStorage.removeItem(secureSignalsStorageKey);
+          window.location.href = '/logout';
+        });
+      });
+    </script>
+  </head>
+  <body>
+    <div class="page-wrapper">
+      <div class="main-content">
+        <h1>Server-Side <%- identityName %> Integration Example with Google Secure Signals</h1>
+        <p>
+          This example demonstrates how a content publisher can use the <%- identityName %> services with Secure Signals to implement
+          <a href="<%- docsBaseUrl %>/guides/integration-google-ss#server-side-integration">Server-Side Integration</a>.
+          [<a href="https://github.com/IABTechLab/uid2-examples/tree/main/web-integrations/google-secure-signals/server-side">Source Code</a>]
+        </p>
+
+        <!-- Generate/Clear buttons at the top for easy access -->
+        <% if (!identity && !isOptout) { %>
+        <div id="login_form" class="form" style="margin-top: 0; margin-bottom: 2rem;">
+          <form action="/login" method="POST">
+            <div class="form-inline">
+              <input
+                type="text"
+                id="email"
+                name="email"
+                placeholder="Enter an email address"
+                class="email-input"
+              />
+              <input type="submit" value="Generate <%- identityName %>" class="button" />
+            </div>
+          </form>
+        </div>
+        <% } else if (isOptout) { %>
+        <div id="optout_form" class="form" style="margin-top: 0; margin-bottom: 2rem;">
+          <button type="button" class="button" id="try_another">Try Another Email</button>
+        </div>
+        <% } else { %>
+        <div id="logout_form" class="form" style="margin-top: 0; margin-bottom: 2rem;">
+          <button type="button" class="button" id="logout">Clear <%- identityName %></button>
+        </div>
+        <% } %>
+
+        <!-- UID2 Integration Status Section -->
+        <h2><%- identityName %> Integration Status</h2>
+
+        <table id="uid_state">
+          <tr>
+            <td class="label">
+              <div class="tooltip-wrapper">
+                Ready for Targeted Advertising:
+                <div class="tooltip">
+                  <span class="tooltip-trigger">?</span>
+                  <div class="tooltip-content">
+                    Indicates whether a valid <%- identityName %> token is present and can be used for personalized ad targeting.
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td class="value"><pre><%= identity && identity.advertising_token ? 'yes' : 'no' %></pre></td>
+          </tr>
+          <tr>
+            <td class="label">
+              <div class="tooltip-wrapper">
+                Advertising Token:
+                <div class="tooltip">
+                  <span class="tooltip-trigger">?</span>
+                  <div class="tooltip-content">
+                    The encrypted <%- identityName %> token that is passed to ad systems without exposing raw user identity. It is automatically refreshed by the server when expired.
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td class="value"><pre><%= identity ? identity.advertising_token : 'undefined' %></pre></td>
+          </tr>
+          <tr>
+            <td class="label">
+              <div class="tooltip-wrapper">
+                Is Login Required?
+                <div class="tooltip">
+                  <span class="tooltip-trigger">?</span>
+                  <div class="tooltip-content">
+                    Indicates whether a new <%- identityName %> token needs to be generated. Returns "yes" when no valid identity exists or the current identity has expired.
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td class="value"><pre><%= identity ? 'no' : 'yes' %></pre></td>
+          </tr>
+          <tr>
+            <td class="label">
+              <div class="tooltip-wrapper">
+                Has Opted Out?
+                <div class="tooltip">
+                  <span class="tooltip-trigger">?</span>
+                  <div class="tooltip-content">
+                    Shows whether the user has exercised opt-out, in which case no advertising token may be generated or used.
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td class="value"><pre><%= isOptout ? 'yes' : 'no' %></pre></td>
+          </tr>
+          <tr>
+            <td class="label">
+              <div class="tooltip-wrapper">
+                Identity State:
+                <div class="tooltip">
+                  <span class="tooltip-trigger">?</span>
+                  <div class="tooltip-content">
+                    The complete identity object from the server. Contains the full <%- identityName %> identity data including refresh tokens and metadata.
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td class="value"><pre><%= identity ? JSON.stringify(identity, null, 2) : 'null' %></pre></td>
+          </tr>
+        </table>
+
+        <!-- Google Secure Signals Section -->
+        <h2 class="section-teal">Google Secure Signals Status</h2>
+        <p class="section-summary">Secure Signals automatically reads the server-generated token and shares it with Google Ad Manager.</p>
+
+        <table id="secure_signals_state">
+          <tr>
+            <td class="label">
+              <div class="tooltip-wrapper">
+                Secure Signals Loaded?
+                <div class="tooltip">
+                  <span class="tooltip-trigger">?</span>
+                  <div class="tooltip-content">
+                    Indicates whether Google Secure Signals has successfully loaded and stored the <%- identityName %> token. Returns "yes" when signals are available in localStorage.
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td class="value"><pre id="secure_signals_loaded">no</pre></td>
+          </tr>
+          <tr>
+            <td class="label">
+              <div class="tooltip-wrapper">
+                Secure Signals Value:
+                <div class="tooltip">
+                  <span class="tooltip-trigger">?</span>
+                  <div class="tooltip-content">
+                    The encrypted <%- identityName %> signals stored by Google in localStorage under the key '<%- secureSignalsStorageKey %>'. These signals are shared with Google Ad Manager.
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td class="value"><pre id="secure_signals_value">undefined</pre></td>
+          </tr>
+        </table>
+
+        <!-- Video Ad Container - at the bottom -->
+        <% if (identity) { %>
+        <div id="googleAdContainer">
+          <div id="mainContainer">
+            <div id="content">
+              <video id="contentElement">
+                <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
+              </video>
+            </div>
+            <div id="adContainer"></div>
+          </div>
+          <button id="playButton">Play</button>
+          <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
+          <script type="text/javascript" src="ads.js"></script>
+        </div>
+        <% } %>
+      </div>
+
+      <!-- Sidebar for Instructions -->
+      <aside class="sidebar">
+        <h3>📋 How to Test</h3>
+        
+        <div class="section">
+          <h4>Step 1: Generate <%- identityName %></h4>
+          <ul>
+            <li>Enter an email address in the input field</li>
+            <li>Click "Generate <%- identityName %>" button</li>
+            <li>The server generates a token using your API key</li>
+          </ul>
+        </div>
+
+        <div class="section">
+          <h4>Step 2: View Video Ad</h4>
+          <ul>
+            <li>Video player appears after successful token generation</li>
+            <li>Click "Play" to watch the ad</li>
+            <li>Ad request includes <%- identityName %> token via Secure Signals</li>
+          </ul>
+        </div>
+
+        <div class="section">
+          <h4>Step 3: Check Secure Signals</h4>
+          <ul>
+            <li>Verify "Secure Signals Loaded?" shows "yes"</li>
+            <li>Check "Secure Signals Value" displays encrypted token data</li>
+            <li>This confirms integration with Google Ad Manager</li>
+          </ul>
+        </div>
+
+        <div class="section">
+          <h4>Step 4: Test Opt-Out</h4>
+          <ul>
+            <li>Clear your current identity with the button</li>
+            <li>Try the special email: <strong>test@example.com</strong></li>
+            <li>Observe that "Has Opted Out?" shows "yes"</li>
+            <li>No token or Secure Signals are generated</li>
+          </ul>
+        </div>
+
+        <div class="section">
+          <h4>What's Happening?</h4>
+          <ul>
+            <li><strong>Server-Side Token Generation:</strong> The server generates <%- identityName %> tokens using your private API key and client secret</li>
+            <li><strong>Session Storage:</strong> Tokens are stored in server-side sessions for security</li>
+            <li><strong>Auto-Refresh:</strong> Tokens are automatically refreshed by the server when expired</li>
+            <li><strong>Google Secure Signals:</strong> Encrypted tokens are stored in localStorage under <%- secureSignalsStorageKey %> and shared with Google Ad Manager</li>
+            <li><strong>IMA SDK:</strong> Displays video ads with <%- identityName %> targeting</li>
+          </ul>
+        </div>
+
+        <div class="note">
+          <strong>Note:</strong> This is a test-only environment. Do not use real user data.
+        </div>
+      </aside>
+    </div>
+  </body>
+</html>
diff --git a/web-integrations/google-secure-signals/server-side/views/login.html b/web-integrations/google-secure-signals/server-side/views/login.html
deleted file mode 100644
index 49d729e0..00000000
--- a/web-integrations/google-secure-signals/server-side/views/login.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<%- include('header.html'); -%>
-<form action="/login" method="POST">
-  <div class="email_prompt">
-    <input
-      type="text"
-      id="email"
-      name="email"
-      placeholder="Enter an email address"
-      style="border-style: none"
-    />
-  </div>
-  <div><input type="submit" value="Generate <%- identityName %>" class="button" /></div>
-</form>
-<%- include('footer.html'); -%>
diff --git a/web-integrations/google-secure-signals/server-side/views/optout.html b/web-integrations/google-secure-signals/server-side/views/optout.html
deleted file mode 100644
index a635c6c0..00000000
--- a/web-integrations/google-secure-signals/server-side/views/optout.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<%- include('header.html'); -%>
-<%- include('ads.html'); -%>
-<div class="optout-message">
-  <h2>This email has opted out</h2>
-  <p>
-    The email address you entered has opted out of <%- identityName %>. No <%- identityName %> token can be generated for this
-    email.
-  </p>
-</div>
-<div class="form">
-  <form action="/login" method="GET">
-    <input type="submit" value="Try Another Email" class="button" />
-  </form>
-</div>
-<%- include('footer.html'); -%>
-
diff --git a/web-integrations/javascript-sdk/client-side/html/index.html b/web-integrations/javascript-sdk/client-side/html/index.html
index ff2ae503..d3d96221 100644
--- a/web-integrations/javascript-sdk/client-side/html/index.html
+++ b/web-integrations/javascript-sdk/client-side/html/index.html
@@ -84,98 +84,101 @@
       <!-- Main Content Area -->
       <div class="main-content">
         <h1>Client-Side ${IDENTITY_NAME} Integration Example using JavaScript SDK</h1>
-        <p>
+        <p class="intro">
           This example demonstrates how a content publisher can integrate ${IDENTITY_NAME} using client-side token generation, where the SDK generates tokens directly in the browser using public credentials. For documentation, see the
-          <a href="${DOCS_BASE_URL}/guides/integration-javascript-client-side"
-            >Client-Side Integration Guide for JavaScript</a>.
+          <a href="${DOCS_BASE_URL}/guides/integration-javascript-client-side">Client-Side Integration Guide for JavaScript</a>. [<a href="https://github.com/IABTechLab/uid2-examples/tree/main/web-integrations/javascript-sdk/client-side">Source Code</a>]
         </p>
+
+        <!-- Generate/Clear buttons at the top for easy access -->
+        <div id="login_form" style="display: none" class="form top-form">
+          <div class="email_prompt">
+            <input
+              type="text"
+              id="email"
+              name="email"
+              placeholder="Enter an email address"
+            />
+            <button type="button" class="button" id="login">Generate ${IDENTITY_NAME}</button>
+          </div>
+        </div>
+        <div id="logout_form" style="display: none" class="form top-form">
+          <button type="button" class="button" id="logout">Clear ${IDENTITY_NAME}</button>
+        </div>
+
         <h2>${IDENTITY_NAME} Integration Status</h2>
+
         <table id="uid_state">
-      <tr>
-        <td class="label">
-          <div class="tooltip-wrapper">
-            Ready for Targeted Advertising:
-            <div class="tooltip">
-              <span class="tooltip-trigger">?</span>
-              <div class="tooltip-content">
-                Indicates whether a valid ${IDENTITY_NAME} token is present and can be used for personalized ad targeting.
+          <tr>
+            <td class="label">
+              <div class="tooltip-wrapper">
+                Ready for Targeted Advertising:
+                <div class="tooltip">
+                  <span class="tooltip-trigger">?</span>
+                  <div class="tooltip-content">
+                    Indicates whether a valid ${IDENTITY_NAME} token is present and can be used for personalized ad targeting.
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-        </td>
-        <td class="value"><pre id="targeted_advertising_ready"></pre></td>
-      </tr>
-      <tr>
-        <td class="label">
-          <div class="tooltip-wrapper">
-            Advertising Token:
-            <div class="tooltip">
-              <span class="tooltip-trigger">?</span>
-              <div class="tooltip-content">
-                The encrypted ${IDENTITY_NAME} token that is passed to ad systems without exposing raw user identity. It is automatically refreshed by the SDK in the background when expired.
+            </td>
+            <td class="value"><pre id="targeted_advertising_ready"></pre></td>
+          </tr>
+          <tr>
+            <td class="label">
+              <div class="tooltip-wrapper">
+                Advertising Token:
+                <div class="tooltip">
+                  <span class="tooltip-trigger">?</span>
+                  <div class="tooltip-content">
+                    The encrypted ${IDENTITY_NAME} token that is passed to ad systems without exposing raw user identity. It is automatically refreshed by the SDK in the background when expired.
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-        </td>
-        <td class="value"><pre id="advertising_token"></pre></td>
-      </tr>
-      <tr>
-        <td class="label">
-          <div class="tooltip-wrapper">
-            Is Login Required?
-            <div class="tooltip">
-              <span class="tooltip-trigger">?</span>
-              <div class="tooltip-content">
-                Indicates whether a new ${IDENTITY_NAME} token needs to be generated. Returns "yes" when no valid identity exists or the current identity has expired.
+            </td>
+            <td class="value"><pre id="advertising_token"></pre></td>
+          </tr>
+          <tr>
+            <td class="label">
+              <div class="tooltip-wrapper">
+                Is Login Required?
+                <div class="tooltip">
+                  <span class="tooltip-trigger">?</span>
+                  <div class="tooltip-content">
+                    Indicates whether a new ${IDENTITY_NAME} token needs to be generated. Returns "yes" when no valid identity exists or the current identity has expired.
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-        </td>
-        <td class="value"><pre id="login_required"></pre></td>
-      </tr>
-      <tr>
-        <td class="label">
-          <div class="tooltip-wrapper">
-            Has opted out?
-            <div class="tooltip">
-              <span class="tooltip-trigger">?</span>
-              <div class="tooltip-content">
-                Shows whether the user has exercised opt-out, in which case no advertising token may be generated or used.
+            </td>
+            <td class="value"><pre id="login_required"></pre></td>
+          </tr>
+          <tr>
+            <td class="label">
+              <div class="tooltip-wrapper">
+                Has opted out?
+                <div class="tooltip">
+                  <span class="tooltip-trigger">?</span>
+                  <div class="tooltip-content">
+                    Shows whether the user has exercised opt-out, in which case no advertising token may be generated or used.
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-        </td>
-        <td class="value"><pre id="has_opted_out"></pre></td>
-      </tr>
-      <tr>
-        <td class="label">
-          <div class="tooltip-wrapper">
-            Identity Callback State:
-            <div class="tooltip">
-              <span class="tooltip-trigger">?</span>
-              <div class="tooltip-content">
-                The complete identity object returned by the SDK. Contains the full ${IDENTITY_NAME} identity data including refresh tokens and metadata.
+            </td>
+            <td class="value"><pre id="has_opted_out"></pre></td>
+          </tr>
+          <tr>
+            <td class="label">
+              <div class="tooltip-wrapper">
+                Identity Callback State:
+                <div class="tooltip">
+                  <span class="tooltip-trigger">?</span>
+                  <div class="tooltip-content">
+                    The complete identity object returned by the SDK. Contains the full ${IDENTITY_NAME} identity data including refresh tokens and metadata.
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-        </td>
-        <td class="value"><pre id="identity_state"></pre></td>
-      </tr>
-    </table>
-    <div id="login_form" style="display: none" class="form">
-      <div class="email_prompt">
-        <input
-          type="text"
-          id="email"
-          name="email"
-          placeholder="Enter an email address"
-        />
-        <button type="button" class="button" id="login">Generate ${IDENTITY_NAME}</button>
-      </div>
-    </div>
-    <div id="logout_form" style="display: none" class="form">
-      <button type="button" class="button" id="logout">Clear ${IDENTITY_NAME}</button>
-    </div>
+            </td>
+            <td class="value"><pre id="identity_state"></pre></td>
+          </tr>
+        </table>
       </div>
 
       <!-- Sidebar for Instructions -->
diff --git a/web-integrations/javascript-sdk/client-side/html/stylesheets/app.css b/web-integrations/javascript-sdk/client-side/html/stylesheets/app.css
index 3ef2298b..8df0b9c1 100644
--- a/web-integrations/javascript-sdk/client-side/html/stylesheets/app.css
+++ b/web-integrations/javascript-sdk/client-side/html/stylesheets/app.css
@@ -145,11 +145,19 @@ h2 {
 
 p {
   font-size: 0.95rem;
-  color: var(--text-gray);
+  color: var(--text-dark);
   margin-bottom: 2rem;
   line-height: 1.8;
 }
 
+/* Section summary - same styling as intro but gray */
+p.section-summary {
+  font-size: 0.95rem;
+  color: var(--text-gray);
+  margin-bottom: 1rem;
+  line-height: 1.8;
+}
+
 a {
   color: var(--link-color);
   text-decoration: underline;
@@ -213,6 +221,11 @@ a:hover {
   margin-top: 2rem;
 }
 
+.form.top-form {
+  margin-top: 0;
+  margin-bottom: 2rem;
+}
+
 .email_prompt {
   display: flex;
   gap: 0;
diff --git a/web-integrations/prebid-integrations/client-server/public/app.css b/web-integrations/prebid-integrations/client-server/public/app.css
index ae4089b1..8add631a 100644
--- a/web-integrations/prebid-integrations/client-server/public/app.css
+++ b/web-integrations/prebid-integrations/client-server/public/app.css
@@ -128,6 +128,11 @@ h2 {
   border-bottom: 3px solid var(--primary-orange);
 }
 
+/* Teal section header for Prebid */
+h2.section-teal {
+  border-bottom: 3px solid var(--accent-teal);
+}
+
 p {
   font-size: 0.95rem;
   color: var(--text-gray);
@@ -135,6 +140,14 @@ p {
   line-height: 1.8;
 }
 
+/* Section summary - same styling as intro but gray */
+p.section-summary {
+  font-size: 0.95rem;
+  color: var(--text-gray);
+  margin-bottom: 1rem;
+  line-height: 1.8;
+}
+
 a {
   color: var(--link-color);
   text-decoration: underline;
@@ -146,7 +159,7 @@ a:hover {
   opacity: 0.8;
 }
 
-/* State Table */
+/* State Tables */
 #uid_state {
   width: 100%;
   border-collapse: collapse;
@@ -154,24 +167,38 @@ a:hover {
   font-size: 0.875rem;
   border: 1px solid var(--border-color);
   border-radius: 8px;
-  overflow: hidden;
+  overflow: visible;
   position: relative;
+}
+
+#prebid_state {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1rem 0 2rem 0;
+  font-size: 0.875rem;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
   overflow: visible;
+  position: relative;
 }
 
-#uid_state tr {
+#uid_state tr,
+#prebid_state tr {
   border-bottom: 1px solid var(--border-color);
 }
 
-#uid_state tr:nth-child(even) {
+#uid_state tr:nth-child(even),
+#prebid_state tr:nth-child(even) {
   background-color: var(--bg-light);
 }
 
-#uid_state tr:last-child {
+#uid_state tr:last-child,
+#prebid_state tr:last-child {
   border-bottom: none;
 }
 
-#uid_state td {
+#uid_state td,
+#prebid_state td {
   padding: 1rem;
   vertical-align: top;
 }
@@ -200,6 +227,11 @@ a:hover {
   margin-top: 2rem;
 }
 
+.form.top-form {
+  margin-top: 0;
+  margin-bottom: 2rem;
+}
+
 .form-inline {
   display: flex;
   gap: 0;
@@ -339,8 +371,8 @@ a:hover {
 @media (max-width: 1024px) {
   .page-wrapper {
     flex-direction: column;
-  }
-  
+}
+
   .sidebar {
     position: static;
     max-height: none;
@@ -365,5 +397,5 @@ a:hover {
   
   .button {
     width: 100%;
-  }
+}
 }
diff --git a/web-integrations/prebid-integrations/client-server/public/index.html b/web-integrations/prebid-integrations/client-server/public/index.html
index 8831d7ed..48a9195b 100644
--- a/web-integrations/prebid-integrations/client-server/public/index.html
+++ b/web-integrations/prebid-integrations/client-server/public/index.html
@@ -63,7 +63,7 @@
             console.log('Could not parse stored token');
           }
         }
-        
+
         // Update table values
         $('#targeted_advertising_ready').text(currentIdentity && currentIdentity.advertising_token ? 'yes' : 'no');
         $('#login_required').text(currentIdentity && currentIdentity.advertising_token ? 'no' : 'yes');
@@ -189,11 +189,28 @@
   <body>
     <div class="page-wrapper">
       <div class="main-content">
-        <h1>Client-Server <%- identityName %> SDK Integration Example with Prebid.js</h1>
-        <p class="intro">
-          This example demonstrates how a content publisher can integrate with <%- identityName %> and Prebid.js using the <a href="<%- docsBaseUrl %>/guides/integration-prebid-client-server"><%- identityName %> Client-Server Integration Guide for Prebid.js</a>, where tokens are generated on the server and passed to Prebid.js on the client side.
+    <h1>Client-Server <%- identityName %> SDK Integration Example with Prebid.js</h1>
+    <p class="intro">
+      This example demonstrates how a content publisher can integrate with <%- identityName %> and Prebid.js using the <a href="<%- docsBaseUrl %>/guides/integration-prebid-client-server"><%- identityName %> Client-Server Integration Guide for Prebid.js</a>, where tokens are generated on the server and passed to Prebid.js on the client side.
         </p>
 
+        <!-- Generate/Clear buttons at the top for easy access -->
+        <div id="login_form" style="display: none" class="form top-form">
+          <div class="form-inline">
+            <input
+              type="text"
+              id="email"
+              name="email"
+              placeholder="Enter an email address"
+              class="email-input"
+            />
+            <button type="button" class="button" id="login">Generate <%- identityName %></button>
+          </div>
+        </div>
+        <div id="clear_storage_form" style="display: none" class="form top-form">
+          <button type="button" class="button" id="clear_storage">Clear <%- identityName %></button>
+        </div>
+
         <h2><%- identityName %> Integration Status</h2>
 
         <table id="uid_state">
@@ -239,6 +256,13 @@ <h2><%- identityName %> Integration Status</h2>
             </td>
             <td class="value"><pre id="login_required"></pre></td>
           </tr>
+        </table>
+
+        <!-- Prebid Integration Status Section -->
+        <h2 class="section-teal">Prebid Integration Status</h2>
+        <p class="section-summary">Prebid.js is configured to store and refresh tokens generated by the server.</p>
+
+        <table id="prebid_state">
           <tr>
             <td class="label">
               <div class="tooltip-wrapper">
@@ -255,22 +279,6 @@ <h2><%- identityName %> Integration Status</h2>
           </tr>
         </table>
 
-        <div id="login_form" style="display: none" class="form">
-          <div class="form-inline">
-            <input
-              type="text"
-              id="email"
-              name="email"
-              placeholder="Enter an email address"
-              class="email-input"
-            />
-            <button type="button" class="button" id="login">Generate <%- identityName %></button>
-          </div>
-        </div>
-
-        <div id="clear_storage_form" style="display: none" class="form">
-          <button type="button" class="button" id="clear_storage">Clear <%- identityName %></button>
-        </div>
       </div>
 
       <!-- Sidebar for Instructions -->
@@ -317,7 +325,7 @@ <h4>What's Happening?</h4>
 
         <div class="note">
           <strong>Note:</strong> This is a test-only environment. Do not use real user data.
-        </div>
+    </div>
       </aside>
     </div>
   </body>
diff --git a/web-integrations/prebid-integrations/client-side/app.css b/web-integrations/prebid-integrations/client-side/app.css
index 76f92670..f20fca84 100644
--- a/web-integrations/prebid-integrations/client-side/app.css
+++ b/web-integrations/prebid-integrations/client-side/app.css
@@ -143,13 +143,26 @@ h2 {
   border-bottom: 3px solid var(--primary-orange);
 }
 
+/* Teal section header for Prebid/GSS */
+h2.section-teal {
+  border-bottom: 3px solid var(--accent-teal);
+}
+
 p {
   font-size: 0.95rem;
-  color: var(--text-gray);
+  color: var(--text-dark);
   margin-bottom: 2rem;
   line-height: 1.8;
 }
 
+/* Section summary - same styling as intro but gray */
+p.section-summary {
+  font-size: 0.95rem;
+  color: var(--text-gray);
+  margin-bottom: 1rem;
+  line-height: 1.8;
+}
+
 a {
   color: var(--link-color);
   text-decoration: underline;
@@ -161,33 +174,37 @@ a:hover {
   opacity: 0.8;
 }
 
-/* State Table */
-#uid_state {
+/* State Tables */
+#uid_state,
+#prebid_state {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
-  margin: 2rem 0;
+  margin: 1rem 0 2rem 0;
   border: 2px solid var(--border-color);
   border-radius: 8px;
-  overflow: hidden;
+  overflow: visible;
   font-size: 0.875rem;
   position: relative;
-  overflow: visible;
 }
 
-#uid_state tr {
+#uid_state tr,
+#prebid_state tr {
   border-bottom: 1px solid var(--border-color);
 }
 
-#uid_state tr:last-child {
+#uid_state tr:last-child,
+#prebid_state tr:last-child {
   border-bottom: none;
 }
 
-#uid_state tr:nth-child(even) {
+#uid_state tr:nth-child(even),
+#prebid_state tr:nth-child(even) {
   background-color: var(--bg-light);
 }
 
-#uid_state td {
+#uid_state td,
+#prebid_state td {
   padding: 1rem;
   vertical-align: top;
 }
@@ -217,6 +234,11 @@ a:hover {
   margin-top: 2rem;
 }
 
+.form.top-form {
+  margin-top: 0;
+  margin-bottom: 2rem;
+}
+
 .email_prompt {
   display: flex;
   gap: 0;
diff --git a/web-integrations/prebid-integrations/client-side/index.html b/web-integrations/prebid-integrations/client-side/index.html
index b9786004..895be0f9 100644
--- a/web-integrations/prebid-integrations/client-side/index.html
+++ b/web-integrations/prebid-integrations/client-side/index.html
@@ -16,21 +16,32 @@
 
       function updateGuiElements() {
         console.log('Updating displayed values.');
-        const identity = pbjs.getUserIds()[userIdName];
         
+        // Try to get identity from Prebid first, then fall back to localStorage
+        let identity = pbjs.getUserIds ? pbjs.getUserIds()[userIdName] : null;
+        let advertisingToken = identity ? identity.id : null;
+        
+        // Check localStorage for token data
         let isOptedOut = false;
         const storedToken = localStorage.getItem('${UID_STORAGE_KEY}');
         if (storedToken) {
           try {
             const tokenData = JSON.parse(storedToken);
             isOptedOut = tokenData.latestToken === 'optout';
+            // If Prebid didn't return the identity, get token from localStorage
+            if (!advertisingToken && tokenData.latestToken && tokenData.latestToken.advertising_token) {
+              advertisingToken = tokenData.latestToken.advertising_token;
+            }
           } catch (e) {
             console.log('Could not parse stored token');
           }
         }
         
-        $('#targeted_advertising_ready').text(identity ? 'yes' : 'no');
-        $('#login_required').text(identity ? 'no' : 'yes');
+        const hasValidToken = !!advertisingToken;
+        
+        $('#targeted_advertising_ready').text(hasValidToken ? 'yes' : 'no');
+        $('#login_required').text(hasValidToken ? 'no' : 'yes');
+        $('#has_opted_out').text(isOptedOut ? 'yes' : 'no');
         
         if (isOptedOut) {
           $('#advertising_token').text('This email has opted out.');
@@ -38,7 +49,7 @@
           $('#login_form').hide();
           $('#clear_storage_form').show();
         } else {
-          $('#advertising_token').text(identity ? String(identity.id) : 'undefined');
+          $('#advertising_token').text(advertisingToken ? String(advertisingToken) : 'undefined');
           
           // Show localStorage content with formatted structure
           const localStorageValue = localStorage.getItem('${UID_STORAGE_KEY}');
@@ -57,7 +68,7 @@
             $('#prebid_storage').text('No token stored yet.');
           }
           
-          if (!identity) {
+          if (!hasValidToken) {
             $('#login_form').show();
             $('#clear_storage_form').hide();
           } else {
@@ -201,10 +212,27 @@
       <!-- Main Content Area -->
       <div class="main-content">
         <h1>Client-Side ${IDENTITY_NAME} Integration with Prebid.js</h1>
-    <p class="intro">
-          This example demonstrates how a content publisher can integrate ${IDENTITY_NAME} with <strong>Prebid.js</strong> for header bidding, using client-side token generation. For documentation, see the <a href="${DOCS_BASE_URL}/guides/integration-prebid-client-side">${IDENTITY_NAME} Client-Side Integration Guide for Prebid.js</a>.
+        <p class="intro">
+          This example demonstrates how a content publisher can integrate ${IDENTITY_NAME} with <strong>Prebid.js</strong> for header bidding, using client-side token generation. For documentation, see the <a href="${DOCS_BASE_URL}/guides/integration-prebid-client-side">${IDENTITY_NAME} Client-Side Integration Guide for Prebid.js</a>. [<a href="https://github.com/IABTechLab/uid2-examples/tree/main/web-integrations/prebid-integrations/client-side">Source Code</a>]
         </p>
 
+        <!-- Generate/Clear buttons at the top for easy access -->
+        <div id="login_form" style="display: none" class="form top-form">
+          <div class="email_prompt">
+            <input
+              type="text"
+              id="email"
+              name="email"
+              placeholder="Enter an email address"
+            />
+            <button type="button" class="button" id="login">Generate ${IDENTITY_NAME}</button>
+          </div>
+        </div>
+        <div id="clear_storage_form" style="display: none" class="form top-form">
+          <button type="button" class="button" id="clear_storage">Clear ${IDENTITY_NAME}</button>
+        </div>
+
+        <!-- UID2 Integration Status Section -->
         <h2>${IDENTITY_NAME} Integration Status</h2>
 
         <table id="uid_state">
@@ -216,25 +244,26 @@ <h2>${IDENTITY_NAME} Integration Status</h2>
                   <span class="tooltip-trigger">?</span>
                   <div class="tooltip-content">
                     Indicates whether a valid ${IDENTITY_NAME} token is present and can be used for personalized ad targeting.
+                  </div>
                 </div>
               </div>
             </td>
-        <td class="value"><pre id="targeted_advertising_ready"></pre></td>
-      </tr>
-      <tr>
+            <td class="value"><pre id="targeted_advertising_ready"></pre></td>
+          </tr>
+          <tr>
             <td class="label">
               <div class="tooltip-wrapper">
                 Advertising Token:
                 <div class="tooltip">
                   <span class="tooltip-trigger">?</span>
                   <div class="tooltip-content">
-                    The encrypted ${IDENTITY_NAME} token that is passed to ad systems without exposing raw user identity. It is automatically refreshed by the SDK in the background when expired.
+                    The encrypted ${IDENTITY_NAME} token that is passed to ad systems without exposing raw user identity.
                   </div>
                 </div>
               </div>
             </td>
-        <td class="value"><pre id="advertising_token"></pre></td>
-      </tr>
+            <td class="value"><pre id="advertising_token"></pre></td>
+          </tr>
           <tr>
             <td class="label">
               <div class="tooltip-wrapper">
@@ -249,6 +278,27 @@ <h2>${IDENTITY_NAME} Integration Status</h2>
             </td>
             <td class="value"><pre id="login_required"></pre></td>
           </tr>
+          <tr>
+            <td class="label">
+              <div class="tooltip-wrapper">
+                Has Opted Out?
+                <div class="tooltip">
+                  <span class="tooltip-trigger">?</span>
+                  <div class="tooltip-content">
+                    Shows whether the user has exercised opt-out, in which case no advertising token may be generated or used.
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td class="value"><pre id="has_opted_out"></pre></td>
+          </tr>
+        </table>
+
+        <!-- Prebid Integration Status Section -->
+        <h2 class="section-teal">Prebid Integration Status</h2>
+        <p class="section-summary">Prebid.js is configured to handle the entire token lifecycle—generation, storage, and automatic refresh.</p>
+
+        <table id="prebid_state">
           <tr>
             <td class="label">
               <div class="tooltip-wrapper">
@@ -263,22 +313,7 @@ <h2>${IDENTITY_NAME} Integration Status</h2>
             </td>
             <td class="value"><pre id="prebid_storage"></pre></td>
           </tr>
-    </table>
-
-    <div id="login_form" style="display: none" class="form">
-      <div class="email_prompt">
-        <input
-          type="text"
-          id="email"
-          name="email"
-          placeholder="Enter an email address"
-        />
-            <button type="button" class="button" id="login">Generate ${IDENTITY_NAME}</button>
-      </div>
-    </div>
-    <div id="clear_storage_form" style="display: none" class="form">
-        <button type="button" class="button" id="clear_storage">Clear ${IDENTITY_NAME}</button>
-        </div>
+        </table>
       </div>
 
       <!-- Sidebar for Instructions -->
@@ -317,14 +352,14 @@ <h4>What's Happening?</h4>
           <ul>
             <li><strong>Configuration:</strong> Prebid's ${IDENTITY_NAME} module is configured with your public credentials (subscription ID and server public key)</li>
             <li><strong>Token Management:</strong> Prebid generates, stores, and automatically refreshes ${IDENTITY_NAME} tokens in the background when expired</li>
-            <li><strong>Local Storage:</strong> Prebid stores tokens in localStorage (__uid2_advertising_token or __euid_advertising_token) for persistence</li>
+            <li><strong>Local Storage:</strong> Prebid stores tokens in localStorage (${UID_STORAGE_KEY}) for persistence</li>
             <li><strong>Header Bidding:</strong> Prebid shares ${IDENTITY_NAME} tokens with bidders automatically</li>
           </ul>
         </div>
 
         <div class="note">
           <strong>Note:</strong> This is a test-only environment. Do not use real user data.
-    </div>
+        </div>
       </aside>
     </div>
   </body>
diff --git a/web-integrations/prebid-secure-signals/client-side/app.css b/web-integrations/prebid-secure-signals/client-side/app.css
index 70cb838f..dcaf5bcf 100644
--- a/web-integrations/prebid-secure-signals/client-side/app.css
+++ b/web-integrations/prebid-secure-signals/client-side/app.css
@@ -143,13 +143,26 @@ h2 {
   border-bottom: 3px solid var(--primary-orange);
 }
 
+/* Teal section header for Prebid/GSS */
+h2.section-teal {
+  border-bottom: 3px solid var(--accent-teal);
+}
+
 .intro {
   font-size: 0.95rem;
-  color: var(--text-gray);
+  color: var(--text-dark);
   margin-bottom: 2rem;
   line-height: 1.8;
 }
 
+/* Section summary - same styling as intro but gray */
+p.section-summary {
+  font-size: 0.95rem;
+  color: var(--text-gray);
+  margin-bottom: 1rem;
+  line-height: 1.8;
+}
+
 a {
   color: var(--link-color);
   text-decoration: underline;
@@ -161,35 +174,42 @@ a:hover {
   opacity: 0.8;
 }
 
-/* Video Container - Styles are in ads.css */
-
-/* Integration State Table */
-#uid_state {
+/* State Tables */
+#uid_state,
+#prebid_state,
+#secure_signals_state {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
-  margin: 2rem 0;
+  margin: 1rem 0 2rem 0;
   border: 2px solid var(--border-color);
   border-radius: 8px;
-  overflow: hidden;
+  overflow: visible;
   font-size: 0.875rem;
   position: relative;
-  overflow: visible;
 }
 
-#uid_state tr {
+#uid_state tr,
+#prebid_state tr,
+#secure_signals_state tr {
   border-bottom: 1px solid var(--border-color);
 }
 
-#uid_state tr:last-child {
+#uid_state tr:last-child,
+#prebid_state tr:last-child,
+#secure_signals_state tr:last-child {
   border-bottom: none;
 }
 
-#uid_state tr:nth-child(even) {
+#uid_state tr:nth-child(even),
+#prebid_state tr:nth-child(even),
+#secure_signals_state tr:nth-child(even) {
   background-color: var(--bg-light);
 }
 
-#uid_state td {
+#uid_state td,
+#prebid_state td,
+#secure_signals_state td {
   padding: 1rem;
   vertical-align: top;
 }
@@ -293,6 +313,11 @@ a:hover {
   margin-top: 2rem;
 }
 
+.form.top-form {
+  margin-top: 0;
+  margin-bottom: 2rem;
+}
+
 .email_prompt {
   display: flex;
   gap: 0;
@@ -364,6 +389,39 @@ a:hover {
   color: var(--text-dark);
 }
 
+/* Video Container Styling */
+#page-content {
+  margin-top: 2rem;
+}
+
+#video-container {
+  position: relative;
+  max-width: 600px;
+}
+
+#video-element {
+  width: 100%;
+  border-radius: 8px;
+}
+
+#play-button {
+  width: 100px;
+  height: 36px;
+  margin-top: 0.5rem;
+  background: var(--button-navy);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+#play-button:hover {
+  background: var(--button-navy-hover);
+}
+
 /* Success Message */
 .message {
   background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%);
diff --git a/web-integrations/prebid-secure-signals/client-side/index.html b/web-integrations/prebid-secure-signals/client-side/index.html
index fce1ab70..b1067bab 100644
--- a/web-integrations/prebid-secure-signals/client-side/index.html
+++ b/web-integrations/prebid-secure-signals/client-side/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <title>Client-Side ${IDENTITY_NAME} Integration with Prebid.js and Google Secure Signals</title>
+    <title>Client-Side ${IDENTITY_NAME} Integration with Prebid.js (with Google Secure Signals)</title>
     <link rel="stylesheet" type="text/css" href="./app.css" />
     <link rel="stylesheet" type="text/css" href="./ads.css" />
     <link rel="shortcut icon" href="/img/favicon.ico" />
@@ -21,21 +21,32 @@
 
       function updateGuiElements() {
         console.log('Updating displayed values.');
-        const identity = pbjs.getUserIds()[userIdName];
         
+        // Try to get identity from Prebid first, then fall back to localStorage
+        let identity = pbjs.getUserIds ? pbjs.getUserIds()[userIdName] : null;
+        let advertisingToken = identity ? identity.id : null;
+        
+        // Check localStorage for token data
         let isOptedOut = false;
         const storedToken = localStorage.getItem(storageKey);
         if (storedToken) {
           try {
             const tokenData = JSON.parse(storedToken);
             isOptedOut = tokenData.latestToken === 'optout';
+            // If Prebid didn't return the identity, get token from localStorage
+            if (!advertisingToken && tokenData.latestToken && tokenData.latestToken.advertising_token) {
+              advertisingToken = tokenData.latestToken.advertising_token;
+            }
           } catch (e) {
             console.log('Could not parse stored token');
           }
         }
         
-        $('#targeted_advertising_ready').text(identity ? 'yes' : 'no');
-        $('#login_required').text(identity ? 'no' : 'yes');
+        const hasValidToken = !!advertisingToken;
+        
+        $('#targeted_advertising_ready').text(hasValidToken ? 'yes' : 'no');
+        $('#login_required').text(hasValidToken ? 'no' : 'yes');
+        $('#has_opted_out').text(isOptedOut ? 'yes' : 'no');
         
         if (isOptedOut) {
           $('#advertising_token').text('This email has opted out.');
@@ -46,7 +57,7 @@
           $('#verification_instructions').hide();
         } else {
           // Show "undefined" if no token, otherwise show the token
-          $('#advertising_token').text(identity ? String(identity.id) : 'undefined');
+          $('#advertising_token').text(advertisingToken ? String(advertisingToken) : 'undefined');
           
           // Show localStorage content with formatted structure
           const localStorageValue = localStorage.getItem(storageKey);
@@ -67,7 +78,7 @@
             $('#prebid_storage').text('No token stored yet.');
           }
           
-          if (!identity) {
+          if (!hasValidToken) {
             $('#login_form').show();
             $('#clear_storage_form').hide();
             $('#page-content').hide();
@@ -86,10 +97,16 @@
         // Check if user is opted out first
         const storedToken = localStorage.getItem(storageKey);
         let isOptedOut = false;
+        let hasTokenInStorage = false;
+        
         if (storedToken) {
           try {
             const tokenData = JSON.parse(storedToken);
             isOptedOut = tokenData.latestToken === 'optout';
+            // Check if there's a valid token in storage
+            if (tokenData.latestToken && tokenData.latestToken.advertising_token) {
+              hasTokenInStorage = true;
+            }
           } catch (e) {
             // Ignore parse errors
           }
@@ -102,9 +119,9 @@
           return;
         }
         
-        // Check if Prebid has the token and encryptedSignalSources is configured
-        const prebidUserIds = pbjs.getUserIds();
-        const uidToken = prebidUserIds[userIdName];
+        // Check if Prebid has the token (either from getUserIds or localStorage)
+        const prebidUserIds = pbjs.getUserIds ? pbjs.getUserIds() : {};
+        const uidToken = prebidUserIds[userIdName] || hasTokenInStorage;
         
         // Check if encryptedSignalSources is configured
         const prebidConfig = pbjs.getConfig('encryptedSignalSources');
@@ -280,117 +297,148 @@
     <div class="page-wrapper">
       <!-- Main Content Area -->
       <div class="main-content">
-        <h1>Client-Side ${IDENTITY_NAME} Integration with Prebid.js and Google Secure Signals</h1>
-    <p class="intro">
-      This example demonstrates how a content publisher can integrate ${IDENTITY_NAME} with both 
-      <strong>Prebid.js</strong> (for header bidding) and <strong>Google Secure Signals</strong> 
-      (for Google Ad Manager), using client-side token generation. Prebid manages the ${IDENTITY_NAME} token, 
-      and Google Secure Signals reads from Prebid's storage automatically. For documentation, see <a href="${DOCS_BASE_URL}/guides/integration-prebid-client-side">${IDENTITY_NAME} Client-Side Integration Guide for Prebid.js</a>
-      and <a href="${DOCS_BASE_URL}/guides/integration-google-ss">Google Ad Manager Secure Signals Integration Guide</a> for more details.
-    </p>
+        <h1>Client-Side ${IDENTITY_NAME} Integration with Prebid.js (with Google Secure Signals)</h1>
+        <p class="intro">
+          This example demonstrates how a content publisher can integrate ${IDENTITY_NAME} with both 
+          <strong>Prebid.js</strong> (for header bidding) and <strong>Google Secure Signals</strong> 
+          (for Google Ad Manager), using client-side token generation. Prebid manages the ${IDENTITY_NAME} token, 
+          and Google Secure Signals reads from Prebid's storage automatically. For documentation, see <a href="${DOCS_BASE_URL}/guides/integration-prebid-client-side">${IDENTITY_NAME} Client-Side Integration Guide for Prebid.js</a>
+          and <a href="${DOCS_BASE_URL}/guides/integration-google-ss">Google Ad Manager Secure Signals Integration Guide</a>. [<a href="https://github.com/IABTechLab/uid2-examples/tree/main/web-integrations/prebid-secure-signals/client-side">Source Code</a>]
+        </p>
 
-    <h2>${IDENTITY_NAME} Integration Status</h2>
+        <!-- Generate/Clear buttons at the top for easy access -->
+        <div id="login_form" style="display: none" class="form top-form">
+          <div class="email_prompt">
+            <input
+              type="text"
+              id="email"
+              name="email"
+              placeholder="Enter an email address"
+            />
+            <button type="button" class="button" id="login">Generate ${IDENTITY_NAME}</button>
+          </div>
+        </div>
+        <div id="clear_storage_form" style="display: none" class="form top-form">
+          <button type="button" class="button" id="clear_storage">Clear ${IDENTITY_NAME}</button>
+        </div>
+
+        <!-- UID2 Integration Status Section -->
+        <h2>${IDENTITY_NAME} Integration Status</h2>
 
-    <table id="uid_state">
-      <tr>
-        <td class="label">
-          <div class="tooltip-wrapper">
-            Ready for Targeted Advertising:
-            <div class="tooltip">
-              <span class="tooltip-trigger">?</span>
-              <div class="tooltip-content">
-                Indicates whether a valid ${IDENTITY_NAME} token is present and can be used for personalized ad targeting.
+        <table id="uid_state">
+          <tr>
+            <td class="label">
+              <div class="tooltip-wrapper">
+                Ready for Targeted Advertising:
+                <div class="tooltip">
+                  <span class="tooltip-trigger">?</span>
+                  <div class="tooltip-content">
+                    Indicates whether a valid ${IDENTITY_NAME} token is present and can be used for personalized ad targeting.
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-        </td>
-        <td class="value"><pre id="targeted_advertising_ready"></pre></td>
-      </tr>
-      <tr>
-        <td class="label">
-          <div class="tooltip-wrapper">
-            Advertising Token:
-            <div class="tooltip">
-              <span class="tooltip-trigger">?</span>
-              <div class="tooltip-content">
-                The encrypted ${IDENTITY_NAME} token that is passed to ad systems without exposing raw user identity. It is automatically refreshed by the SDK in the background when expired.
+            </td>
+            <td class="value"><pre id="targeted_advertising_ready"></pre></td>
+          </tr>
+          <tr>
+            <td class="label">
+              <div class="tooltip-wrapper">
+                Advertising Token:
+                <div class="tooltip">
+                  <span class="tooltip-trigger">?</span>
+                  <div class="tooltip-content">
+                    The encrypted ${IDENTITY_NAME} token that is passed to ad systems without exposing raw user identity.
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-        </td>
-        <td class="value"><pre id="advertising_token"></pre></td>
-      </tr>
-      <tr>
-        <td class="label">
-          <div class="tooltip-wrapper">
-            Is Login Required?
-            <div class="tooltip">
-              <span class="tooltip-trigger">?</span>
-              <div class="tooltip-content">
-                Indicates whether a new ${IDENTITY_NAME} token needs to be generated. Returns "yes" when no valid identity exists or the current identity has expired.
+            </td>
+            <td class="value"><pre id="advertising_token"></pre></td>
+          </tr>
+          <tr>
+            <td class="label">
+              <div class="tooltip-wrapper">
+                Is Login Required?
+                <div class="tooltip">
+                  <span class="tooltip-trigger">?</span>
+                  <div class="tooltip-content">
+                    Indicates whether a new ${IDENTITY_NAME} token needs to be generated. Returns "yes" when no valid identity exists or the current identity has expired.
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-        </td>
-        <td class="value"><pre id="login_required"></pre></td>
-      </tr>
-      <tr>
-        <td class="label">
-          <div class="tooltip-wrapper">
-            Prebid Token Storage:
-            <div class="tooltip">
-              <span class="tooltip-trigger">?</span>
-              <div class="tooltip-content">
-                Shows the ${IDENTITY_NAME} token stored by Prebid in localStorage under the key '${UID_STORAGE_KEY}'. This storage is shared between Prebid and Google Secure Signals.
+            </td>
+            <td class="value"><pre id="login_required"></pre></td>
+          </tr>
+          <tr>
+            <td class="label">
+              <div class="tooltip-wrapper">
+                Has Opted Out?
+                <div class="tooltip">
+                  <span class="tooltip-trigger">?</span>
+                  <div class="tooltip-content">
+                    Shows whether the user has exercised opt-out, in which case no advertising token may be generated or used.
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-        </td>
-        <td class="value"><pre id="prebid_storage"></pre></td>
-      </tr>
-      <tr>
-        <td class="label">
-          <div class="tooltip-wrapper">
-            Secure Signals Configured?
-            <div class="tooltip">
-              <span class="tooltip-trigger">?</span>
-              <div class="tooltip-content">
-                Indicates whether Google Secure Signals integration is properly configured in Prebid. When "yes", encrypted ${IDENTITY_NAME} signals are sent to Google Ad Manager.
+            </td>
+            <td class="value"><pre id="has_opted_out"></pre></td>
+          </tr>
+        </table>
+
+        <!-- Prebid Integration Status Section -->
+        <h2 class="section-teal">Prebid Integration Status</h2>
+        <p class="section-summary">Prebid.js is configured to handle the entire token lifecycle—generation, storage, and automatic refresh.</p>
+
+        <table id="prebid_state">
+          <tr>
+            <td class="label">
+              <div class="tooltip-wrapper">
+                Prebid Token Storage:
+                <div class="tooltip">
+                  <span class="tooltip-trigger">?</span>
+                  <div class="tooltip-content">
+                    Shows the ${IDENTITY_NAME} token stored by Prebid in localStorage under the key '${UID_STORAGE_KEY}'. This storage is shared between Prebid and Google Secure Signals.
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-        </td>
-        <td class="value"><pre id="secure_signals_configured"></pre></td>
-      </tr>
-    </table>
+            </td>
+            <td class="value"><pre id="prebid_storage"></pre></td>
+          </tr>
+        </table>
 
-    <div id="verification_instructions"></div>
+        <!-- Google Secure Signals Section -->
+        <h2 class="section-teal">Google Secure Signals Status</h2>
+        <p class="section-summary">Prebid's encryptedSignalSources config enables automatic sharing of encrypted ${IDENTITY_NAME} tokens with Google Ad Manager.</p>
 
-    <div id="page-content" style="display: none;">
-      <div id="video-container">
-        <video id="video-element">
-          <source src="https://storage.googleapis.com/interactive-media-ads/media/android.mp4">
-          <source src="https://storage.googleapis.com/interactive-media-ads/media/android.webm">
-        </video>
-        <div id="ad-container"></div>
-      </div>
-      <button id="play-button">Play</button>
-    </div>
+        <table id="secure_signals_state">
+          <tr>
+            <td class="label">
+              <div class="tooltip-wrapper">
+                Secure Signals Configured?
+                <div class="tooltip">
+                  <span class="tooltip-trigger">?</span>
+                  <div class="tooltip-content">
+                    Indicates whether Google Secure Signals integration is properly configured in Prebid. When "yes", encrypted ${IDENTITY_NAME} signals are sent to Google Ad Manager.
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td class="value"><pre id="secure_signals_configured"></pre></td>
+          </tr>
+        </table>
 
-    <div id="login_form" style="display: none" class="form">
-      <div class="email_prompt">
-        <input
-          type="text"
-          id="email"
-          name="email"
-          placeholder="Enter an email address"
-        />
-        <button type="button" class="button" id="login">Generate ${IDENTITY_NAME}</button>
-      </div>
-    </div>
-    <div id="clear_storage_form" style="display: none" class="form">
-      <button type="button" class="button" id="clear_storage">Clear ${IDENTITY_NAME}</button>
-    </div>
+        <div id="verification_instructions"></div>
+
+        <!-- Video Ad Container - at the bottom -->
+        <div id="page-content" style="display: none;">
+          <div id="video-container">
+            <video id="video-element">
+              <source src="https://storage.googleapis.com/interactive-media-ads/media/android.mp4">
+              <source src="https://storage.googleapis.com/interactive-media-ads/media/android.webm">
+            </video>
+            <div id="ad-container"></div>
+          </div>
+          <button id="play-button">Play</button>
+        </div>
       </div>
 
       <!-- Sidebar for Instructions -->
@@ -439,7 +487,7 @@ <h4>What's Happening?</h4>
             <li><strong>Configuration:</strong> Prebid's ${IDENTITY_NAME} module is configured with your public credentials (subscription ID and server public key) and encryptedSignalSources for Secure Signals</li>
             <li><strong>Token Management:</strong> Prebid generates, stores, and automatically refreshes ${IDENTITY_NAME} tokens in the background when expired</li>
             <li><strong>Secure Signals Integration:</strong> Prebid passes ${IDENTITY_NAME} tokens to Google Secure Signals for encrypted sharing with Google Ad Manager</li>
-            <li><strong>Local Storage:</strong> Prebid stores tokens in localStorage (__uid2_advertising_token or __euid_advertising_token) for persistence</li>
+            <li><strong>Local Storage:</strong> Prebid stores tokens in localStorage (${UID_STORAGE_KEY}) for persistence</li>
             <li><strong>IMA SDK:</strong> Displays video ads with ${IDENTITY_NAME} targeting</li>
           </ul>
         </div>
@@ -453,4 +501,3 @@ <h4>What's Happening?</h4>
     <script type="text/javascript" src="./ads.js"></script>
   </body>
 </html>
-
diff --git a/web-integrations/server-side/public/stylesheets/app.css b/web-integrations/server-side/public/stylesheets/app.css
index 0b99a629..77cf84ff 100644
--- a/web-integrations/server-side/public/stylesheets/app.css
+++ b/web-integrations/server-side/public/stylesheets/app.css
@@ -1,98 +1,375 @@
+/* Centralized UID2 Examples Color Variables - Inlined */
+:root {
+  --primary-orange: #FF6B35;
+  --primary-dark: #2D3748;
+  --accent-teal: #0D9488;
+  --accent-yellow: #FBBF24;
+  --text-dark: #1A202C;
+  --text-gray: #718096;
+  --bg-white: #FFFFFF;
+  --bg-light: #F7FAFC;
+  --sidebar-bg: #FFF7ED;
+  --border-color: #E2E8F0;
+  --button-navy: rgba(2, 10, 64, 1);
+  --button-navy-hover: rgba(2, 10, 64, 0.9);
+  --link-color: #06B6D4;
+  --link-hover: #06B6D4;
+  --tooltip-bg: #1F2937;
+  --tooltip-trigger: #3B82F6;
+  --tooltip-trigger-hover: #2563EB;
+  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
 body {
-  padding: 50px;
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
+  background: var(--bg-light);
+  color: var(--text-dark);
+  line-height: 1.6;
+  padding: 2rem;
+}
+
+/* Two Column Layout */
+.page-wrapper {
+  display: flex;
+  gap: 2rem;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+/* Main Content Area (75%) */
+.main-content {
+  flex: 3;
+  background: var(--bg-white);
+  border-radius: 12px;
+  padding: 2.5rem;
+  box-shadow: var(--shadow-md);
+}
+
+/* Sidebar (25%) */
+.sidebar {
+  flex: 1;
+  background: var(--sidebar-bg);
+  border-radius: 12px;
+  padding: 2rem;
+  box-shadow: var(--shadow);
+  border-left: 4px solid var(--primary-orange);
+  position: sticky;
+  top: 2rem;
+  height: fit-content;
+  max-height: calc(100vh - 4rem);
+  overflow-y: auto;
+}
+
+.sidebar h3 {
+  color: var(--primary-dark);
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid var(--primary-orange);
+}
+
+.sidebar .section {
+  margin-bottom: 1.5rem;
+}
+
+.sidebar .section h4 {
+  color: var(--accent-teal);
+  font-size: 0.9rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.sidebar ul {
+  margin-left: 1.25rem;
+  font-size: 0.875rem;
+  color: var(--text-gray);
+}
+
+.sidebar li {
+  margin-bottom: 0.5rem;
+  line-height: 1.6;
+}
+
+.sidebar .note {
+  background: rgba(255, 107, 53, 0.1);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--text-dark);
+  margin-top: 1rem;
+}
+
+.sidebar .note strong {
+  color: var(--primary-orange);
+}
+
+/* Header */
+h1 {
+  font-size: 2rem;
+  font-weight: 800;
+  color: var(--primary-dark);
+  margin-bottom: 0.75rem;
+  line-height: 1.3;
+}
+
+h2 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--primary-dark);
+  margin: 2rem 0 1rem 0;
+  padding-bottom: 0.5rem;
+  border-bottom: 3px solid var(--primary-orange);
+}
+
+p {
+  font-size: 0.95rem;
+  color: var(--text-dark);
+  margin-bottom: 2rem;
+  line-height: 1.8;
+}
+
+/* Section summary - same styling as intro but gray */
+p.section-summary {
+  font-size: 0.95rem;
+  color: var(--text-gray);
+  margin-bottom: 1rem;
+  line-height: 1.8;
 }
 
 a {
-  color: #00B7FF;
+  color: var(--link-color);
+  text-decoration: underline;
+  font-weight: 500;
+  transition: opacity 0.2s ease;
+}
+
+a:hover {
+  opacity: 0.8;
+}
+
+/* State Table */
+#uid_state {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 2rem 0;
+  font-size: 0.875rem;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  overflow: visible;
+  position: relative;
+}
+
+#uid_state tr {
+  border-bottom: 1px solid var(--border-color);
+}
+
+#uid_state tr:nth-child(even) {
+  background-color: var(--bg-light);
+}
+
+#uid_state tr:last-child {
+  border-bottom: none;
 }
 
+#uid_state td {
+  padding: 1rem;
+  vertical-align: top;
+}
+
+.label {
+  font-weight: 600;
+  color: var(--text-dark);
+  white-space: nowrap;
+  padding-right: 2rem;
+  width: 15em;
+}
+
+.value {
+  color: var(--text-gray);
+  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+}
+
+.value pre {
+  white-space: pre-wrap;
+  word-break: break-all;
+  margin: 0;
+}
+
+/* Forms */
+.form {
+  margin-top: 2rem;
+}
+
+.form-inline {
+  display: flex;
+  gap: 0;
+  max-width: 600px;
+  box-shadow: var(--shadow);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.email-input {
+  flex: 1;
+  padding: 0.875rem 1.25rem;
+  border: 2px solid var(--border-color);
+  border-right: none;
+  font-size: 0.95rem;
+  color: var(--text-dark);
+  outline: none;
+  transition: border-color 0.2s ease;
+}
+
+.email-input:focus {
+  border-color: var(--primary-orange);
+}
+
+.email-input::placeholder {
+  color: var(--text-gray);
+}
+
+/* Buttons */
 .button {
-  border-style: none;
-  cursor: pointer;
-  align-items: center;
-  height: 40px;
-  width: 401px;
-  text-align: center;
-  position: absolute;
-  letter-spacing: 0.28px;
-  box-sizing: border-box;
+  padding: 0.875rem 2rem;
+  background: var(--button-navy);
   color: white;
-  font-family: 'Raleway', Helvetica, Arial, serif;
-  font-size: 14px;
-  font-style: normal;
+  border: none;
+  font-size: 0.95rem;
   font-weight: 700;
-  text-transform: none;
-  text-indent: 0px;
-  text-shadow: none;
-  margin: 0em;
-  padding: 1px 6px;
-  background-color: rgba(2,10,64,1.0);
-  border-image: initial
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  box-shadow: var(--shadow);
 }
 
-.form {
-  margin-top: 40px;
+.button:hover {
+  background: var(--button-navy-hover);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 12px rgba(2, 10, 64, 0.3);
 }
 
-.email_prompt {
-  align-items: center;
-  align-self: center;
-  background-color: white;
-  border: 1px solid rgba(2,10,64,1.0);
-  border-radius: 2px;
-  box-sizing: border-box;
+.button:active {
+  transform: translateY(0);
+}
+
+/* Full width button for logout and optout */
+#logout_form .button,
+#optout_form .button {
+  width: 100%;
+  max-width: 600px;
+  border-radius: 8px;
+}
+
+/* Tooltip Styles - Matching Self-Serve Portal */
+.tooltip-wrapper {
   display: inline-flex;
-  flex-direction: row;
-  flex-shrink: 0;
-  height: 40px;
-  justify-content: flex-start;
-  margin-right: 1.0px;
-  margin-bottom: 20px;
-  min-width: 399px;
-  padding: 0 16.0px;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.tooltip {
   position: relative;
-  width: auto;
+  display: inline-flex;
+  align-items: center;
+  cursor: help;
 }
 
-#email {
-  background-color: white;
+.tooltip-trigger {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: var(--tooltip-trigger);
+  color: white;
+  border: none;
+  font-size: 0.7rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: help;
+  transition: all 0.2s ease;
   flex-shrink: 0;
-  height: auto;
-  letter-spacing: 0.12px;
-  line-height: 16px;
-  min-height: 16px;
-  position: relative;
-  text-align: left;
-  white-space: nowrap;
-  width: 351px;
-  color: rgba(2,10,64,1.0);
-  font-family: 'Raleway', Helvetica, Arial, serif;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 500;
-  padding: 1px 2px;
-  outline: none;
 }
 
-h1 {
-  padding-bottom: 20px;
+.tooltip-trigger:hover {
+  background-color: var(--tooltip-trigger-hover);
+  transform: scale(1.05);
 }
 
-#uid2_state .label {
-  white-space: nowrap;
-  padding-right: 20px;
+.tooltip-content {
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: var(--tooltip-bg);
+  color: white;
+  padding: 10px;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  line-height: 1.125; 
+  min-width: 300px; 
+  max-width: 570px; 
+  white-space: normal;
+  z-index: 10000; 
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+  font-weight: 400;
+  pointer-events: none;
 }
-#uid2_state tr {
-  margin-top: 10px;
+
+.tooltip-content::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 6px;
+  border-style: solid;
+  border-color: #1F2937 transparent transparent transparent;
 }
 
-.message {
-  color: green;
-  padding: 20px;
-  margin-left: -22px;
-  font-size: 16px;
-  font-weight: 500;
-  border: 2px solid green;
-  border-radius: 5px;
+.tooltip:hover .tooltip-content {
+  visibility: visible;
+  opacity: 1;
+}
+
+@media (max-width: 1024px) {
+  .page-wrapper {
+    flex-direction: column;
+}
+
+  .sidebar {
+    position: static;
+    max-height: none;
+  }
+  
+  body {
+    padding: 1rem;
+  }
+  
+  .main-content {
+    padding: 1.5rem;
+  }
+  
+  .form-inline {
+    flex-direction: column;
+  }
+  
+  .email-input {
+    border-right: 2px solid var(--border-color);
+    border-bottom: none;
+  }
+  
+  .button {
+    width: 100%;
+  }
 }
diff --git a/web-integrations/server-side/server.js b/web-integrations/server-side/server.js
index 3331897e..abecfbc7 100644
--- a/web-integrations/server-side/server.js
+++ b/web-integrations/server-side/server.js
@@ -129,12 +129,12 @@ async function refreshIdentity(identity) {
   };
 
   try {
-    const encryptedResponse = await axios.post(uidBaseUrl + '/v2/token/refresh', identity.refresh_token, headers); //if HTTP response code is not 200, this throws and is caught in the catch handler below.
+    const encryptedResponse = await axios.post(uidBaseUrl + '/v2/token/refresh', identity.refresh_token, headers);
 
     let response;
     if (identity.refresh_response_key) {
       response = decrypt(encryptedResponse.data, identity.refresh_response_key, true);
-    } else { //If refresh_response_key doesn't exist, assume refresh_token came from a v1/token/generate query. In that scenario, /v2/token/refresh will return an unencrypted response.
+    } else {
       response = encryptedResponse.data;
     }
 
@@ -151,98 +151,32 @@ async function refreshIdentity(identity) {
     return Date.now() >= identity.identity_expires ? undefined : identity;
   }
 }
-async function verifyIdentity(req) {
+
+async function getValidIdentity(req) {
   if (!isRefreshableIdentity(req.session.identity)) {
-    return false;
+    return null;
   }
 
   if (Date.now() >= req.session.identity.refresh_from || Date.now() >= req.session.identity.identity_expires) {
     req.session.identity = await refreshIdentity(req.session.identity);
   }
 
-  return !!req.session.identity;
-}
-async function protect(req, res, next){
-  if (await verifyIdentity(req)) {
-    next();
-  } else {
-    req.session = null;
-    res.redirect('/login');
-  }
+  return req.session.identity;
 }
 
-app.get('/', protect, (req, res) => {
+// Main page - shows login form or identity state
+app.get('/', async (req, res) => {
+  const identity = await getValidIdentity(req);
+  
   res.render('index', { 
-    identity: req.session.identity,
+    identity: identity,
+    isOptout: false,
     identityName,
     docsBaseUrl
   });
 });
-app.get('/content1', protect, (req, res) => {
-  res.render('content', { 
-    identity: req.session.identity, 
-    content: 'First Sample Content',
-    identityName,
-    docsBaseUrl
-  });
-});
-app.get('/content2', protect, (req, res) => {
-  res.render('content', { 
-    identity: req.session.identity, 
-    content: 'Second Sample Content',
-    identityName,
-    docsBaseUrl
-  });
-});
-app.get('/login', async (req, res) => {
-  if (await verifyIdentity(req)) {
-    res.redirect('/');
-  } else {
-    req.session = null;
-    res.render('login', {
-      identityName,
-      docsBaseUrl
-    });
-  }
-});
-
-
-function _GenerateTokenV1(req, res) {
-  axios.get(uidBaseUrl + '/v1/token/generate?email=' + encodeURIComponent(req.body.email), { headers: { 'Authorization': 'Bearer ' + uidApiKey } })
-      .then((response) => {
-        if (response.data.status !== 'success') {
-          res.render('error', { 
-            error: 'Got unexpected token generate status: ' + response.data.status, 
-            response,
-            identityName,
-            docsBaseUrl
-          });
-        } else if (typeof response.data.body !== 'object') {
-          res.render('error', { 
-            error: 'Unexpected token generate response format: ' + response.data, 
-            response,
-            identityName,
-            docsBaseUrl
-          });
-        } else {
-          req.session.identity = response.data.body;
-          res.redirect('/');
-        }
-      })
-      .catch((error) => {
-        res.render('error', { 
-          error, 
-          response: error.response,
-          identityName,
-          docsBaseUrl
-        });
-      });
-}
 
 app.post('/login', async (req, res) => {
-  //Uncomment the following line to test that stored v1 sessions will still work when we upgrade to /v2/token/refresh.
-  //_GenerateTokenV1(req, res); return;
-
   const jsonEmail = JSON.stringify({ 'email': req.body.email });
   const { envelope, nonce } = createEnvelope(jsonEmail);
 
@@ -251,41 +185,61 @@ app.post('/login', async (req, res) => {
   };
 
   try {
-    const encryptedResponse = await axios.post(uidBaseUrl + '/v2/token/generate', envelope, headers); //if HTTP response code is not 200, this throws and is caught in the catch handler below.
+    const encryptedResponse = await axios.post(uidBaseUrl + '/v2/token/generate', envelope, headers);
     const response = decrypt(encryptedResponse.data, uidClientSecret, false, nonce);
 
-        if (response.status !== 'success') {
-      res.render('error', { 
-        error: 'Got unexpected token generate status in decrypted response: ' + response.status, 
-        response,
+    if (response.status === 'optout') {
+      // User has opted out - show optout state
+      req.session.identity = null;
+      res.render('index', { 
+        identity: null,
+        isOptout: true,
+        identityName,
+        docsBaseUrl
+      });
+    } else if (response.status !== 'success') {
+      // Error - show error state
+      res.render('index', { 
+        identity: null,
+        isOptout: false,
+        error: 'Got unexpected token generate status: ' + response.status,
         identityName,
         docsBaseUrl
       });
     } else if (typeof response.body !== 'object') {
-      res.render('error', { 
-        error: 'Unexpected token generate response format in decrypted response: ' + response, 
-        response,
+      // Error - show error state
+      res.render('index', { 
+        identity: null,
+        isOptout: false,
+        error: 'Unexpected token generate response format',
         identityName,
         docsBaseUrl
       });
     } else {
+      // Success - store identity and show logged in state
       req.session.identity = response.body;
-      res.redirect('/');
+      res.render('index', { 
+        identity: response.body,
+        isOptout: false,
+        identityName,
+        docsBaseUrl
+      });
     }
   } catch (error) {
-    res.render('error', { 
-      error, 
-      response: error.response,
+    console.error('Token generation failed:', error);
+    res.render('index', { 
+      identity: null,
+      isOptout: false,
+      error: 'Token generation failed: ' + error.message,
       identityName,
       docsBaseUrl
     });
   }
-
 });
 
 app.get('/logout', (req, res) => {
   req.session = null;
-  res.redirect('/login');
+  res.redirect('/');
 });
 
 app.listen(port, () => {
diff --git a/web-integrations/server-side/views/content.html b/web-integrations/server-side/views/content.html
deleted file mode 100644
index 710c7e02..00000000
--- a/web-integrations/server-side/views/content.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<%- include('header.html'); -%>
-<p>Protected Content &mdash; accessible only with a valid <%- identityName %> identity:</p>
-<pre><%= content %></pre>
-<p><a href="/">Back to the main page</a></p>
-<%- include('identity.html'); -%>
-<%- include('footer.html'); -%>
diff --git a/web-integrations/server-side/views/error.html b/web-integrations/server-side/views/error.html
deleted file mode 100644
index f8b33c1d..00000000
--- a/web-integrations/server-side/views/error.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<%- include('header.html'); -%>
-<p>Something went wrong:</p>
-<pre><%= error %></pre>
-<p>Response from the <%- identityName %> operator:</p>
-<pre><%= response ? JSON.stringify(response.data) : '' %></pre>
-<p>HTTP error:</p>
-<pre><%= response ? (response.status + ' ' + response.statusText) : '' %></pre>
-<p><a href="/">Back to the main page</a></p>
-<%- include('footer.html'); -%>
diff --git a/web-integrations/server-side/views/footer.html b/web-integrations/server-side/views/footer.html
deleted file mode 100644
index 1fd5f4f2..00000000
--- a/web-integrations/server-side/views/footer.html
+++ /dev/null
@@ -1,2 +0,0 @@
-  </body>
-</html>
\ No newline at end of file
diff --git a/web-integrations/server-side/views/header.html b/web-integrations/server-side/views/header.html
deleted file mode 100644
index f436e9a0..00000000
--- a/web-integrations/server-side/views/header.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8" />
-  <title>Server-Side <%- identityName %> Integration Example</title>
-  <link rel="stylesheet" type="text/css" href="/stylesheets/app.css" />
-  <link rel="shortcut icon" href="/images/favicon.png" />
-</head>
-<body>
-  <h1>Server-Side <%- identityName %> Integration Example</h1>
-  <p class="intro">This example demonstrates how a content publisher can use <%- identityName %> services to implement the
-    <a href="<%- docsBaseUrl %>/guides/integration-publisher-server-side">server-side <%- identityName %> integration workflow</a>.
-    [<a href="https://github.com/IABTechLab/uid2-examples/tree/main/web-integrations/server-side">Source Code</a>]</p>
diff --git a/web-integrations/server-side/views/identity.html b/web-integrations/server-side/views/identity.html
deleted file mode 100644
index 4cec983d..00000000
--- a/web-integrations/server-side/views/identity.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<pre><%= JSON.stringify(identity, null, 2) %></pre>
-<div id="logout_form" class="form"><form action="/logout" method="GET">
-    <input type="submit" value="Log Out" class="button">
-</form></div>
diff --git a/web-integrations/server-side/views/index.html b/web-integrations/server-side/views/index.html
index 2b2b47b7..73706163 100644
--- a/web-integrations/server-side/views/index.html
+++ b/web-integrations/server-side/views/index.html
@@ -1,9 +1,179 @@
-<%- include('header.html'); -%>
-<p>Protected Content &mdash; accessible only with a valid <%- identityName %> identity:</p>
-<ul>
-  <li><a href="/content1">Sample Page 1</a></li>
-  <li><a href="/content2">Sample Page 2</a></li>
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Server-Side <%- identityName %> Integration Example</title>
+    <link rel="stylesheet" type="text/css" href="/stylesheets/app.css" />
+    <link rel="shortcut icon" href="/images/favicon.png" />
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script>
+      $(document).ready(() => {
+        $('#logout').click(() => {
+          window.location.href = '/logout';
+        });
+
+        $('#try_another').click(() => {
+          window.location.href = '/logout';
+        });
+      });
+    </script>
+  </head>
+  <body>
+    <div class="page-wrapper">
+      <div class="main-content">
+        <h1>Server-Side <%- identityName %> Integration Example</h1>
+        <p>
+          This example demonstrates how a content publisher can use <%- identityName %> services to implement the
+          <a href="<%- docsBaseUrl %>/guides/integration-publisher-server-side">server-side <%- identityName %> integration workflow</a>.
+          [<a href="https://github.com/IABTechLab/uid2-examples/tree/main/web-integrations/server-side">Source Code</a>]
+        </p>
+
+        <h2><%- identityName %> Integration Status</h2>
+
+        <table id="uid_state">
+          <tr>
+            <td class="label">
+              <div class="tooltip-wrapper">
+                Ready for Targeted Advertising:
+                <div class="tooltip">
+                  <span class="tooltip-trigger">?</span>
+                  <div class="tooltip-content">
+                    Indicates whether a valid <%- identityName %> token is present and can be used for personalized ad targeting.
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td class="value"><pre><%= identity && identity.advertising_token ? 'yes' : 'no' %></pre></td>
+          </tr>
+          <tr>
+            <td class="label">
+              <div class="tooltip-wrapper">
+                Advertising Token:
+                <div class="tooltip">
+                  <span class="tooltip-trigger">?</span>
+                  <div class="tooltip-content">
+                    The encrypted <%- identityName %> token that is passed to ad systems without exposing raw user identity. It is automatically refreshed by the server when expired.
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td class="value"><pre><%= identity ? identity.advertising_token : 'undefined' %></pre></td>
+          </tr>
+          <tr>
+            <td class="label">
+              <div class="tooltip-wrapper">
+                Is Login Required?
+                <div class="tooltip">
+                  <span class="tooltip-trigger">?</span>
+                  <div class="tooltip-content">
+                    Indicates whether a new <%- identityName %> token needs to be generated. Returns "yes" when no valid identity exists or the current identity has expired.
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td class="value"><pre><%= identity ? 'no' : 'yes' %></pre></td>
+          </tr>
+          <tr>
+            <td class="label">
+              <div class="tooltip-wrapper">
+                Has Opted Out?
+                <div class="tooltip">
+                  <span class="tooltip-trigger">?</span>
+                  <div class="tooltip-content">
+                    Indicates if the user has opted out of <%- identityName %>. When true, no advertising token is generated or stored.
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td class="value"><pre><%= isOptout ? 'yes' : 'no' %></pre></td>
+          </tr>
+          <tr>
+            <td class="label">
+              <div class="tooltip-wrapper">
+                Identity State:
+                <div class="tooltip">
+                  <span class="tooltip-trigger">?</span>
+                  <div class="tooltip-content">
+                    The complete identity object from the server. Contains the full <%- identityName %> identity data including refresh tokens and metadata.
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td class="value"><pre><%= identity ? JSON.stringify(identity, null, 2) : 'null' %></pre></td>
+          </tr>
+        </table>
+
+        <% if (!identity && !isOptout) { %>
+        <div id="login_form" class="form">
+          <form action="/login" method="POST">
+            <div class="form-inline">
+              <input
+                type="text"
+                id="email"
+                name="email"
+                placeholder="Enter an email address"
+                class="email-input"
+              />
+              <input type="submit" value="Generate <%- identityName %>" class="button" />
+            </div>
+          </form>
+        </div>
+        <% } else if (isOptout) { %>
+        <div id="optout_form" class="form">
+          <button type="button" class="button" id="try_another">Try Another Email</button>
+        </div>
+        <% } else { %>
+        <div id="logout_form" class="form">
+          <button type="button" class="button" id="logout">Clear <%- identityName %></button>
+        </div>
+        <% } %>
+      </div>
+
+      <!-- Sidebar for Instructions -->
+      <aside class="sidebar">
+        <h3>📋 How to Test</h3>
+        
+        <div class="section">
+          <h4>Step 1: Generate <%- identityName %></h4>
+          <ul>
+            <li>Enter an email address in the input field</li>
+            <li>Click "Generate <%- identityName %>" button</li>
+            <li>The server generates a token using your API key</li>
+          </ul>
+        </div>
+
+        <div class="section">
+          <h4>Step 2: Observe Token State</h4>
+          <ul>
+            <li>Watch "Ready for Targeted Advertising" change to "yes"</li>
+            <li>Check the advertising token appears in the table</li>
+            <li>Note "Is Login Required?" becomes "no"</li>
+          </ul>
+        </div>
+
+        <div class="section">
+          <h4>Step 3: Test Opt-Out</h4>
+          <ul>
+            <li>Clear your current identity if needed</li>
+            <li>Enter the test opt-out email: <strong>test@example.com</strong></li>
+            <li>Click "Generate <%- identityName %>"</li>
+            <li>Observe that "Has Opted Out?" shows "yes" and no token is generated</li>
+          </ul>
+        </div>
+
+        <div class="section">
+          <h4>What's Happening?</h4>
+          <ul>
+            <li><strong>Server-Side Token Generation:</strong> The server generates <%- identityName %> tokens using your private API key and client secret</li>
+            <li><strong>Session Storage:</strong> Tokens are stored in server-side sessions for security</li>
+            <li><strong>Auto-Refresh:</strong> Tokens are automatically refreshed by the server when expired</li>
 </ul>
-<p>Current <%- identityName %> Identity:</p>
-<%- include('identity.html'); -%>
-<%- include('footer.html'); -%>
+        </div>
+
+        <div class="note">
+          <strong>Note:</strong> This is a test-only environment. Do not use real user data.
+        </div>
+      </aside>
+    </div>
+  </body>
+</html>
diff --git a/web-integrations/server-side/views/login.html b/web-integrations/server-side/views/login.html
deleted file mode 100644
index ab2d51b7..00000000
--- a/web-integrations/server-side/views/login.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<%- include('header.html'); -%>
-  <div id="login_form" class="form"><form action="/login" method="POST">
-    <div class="email_prompt"><input type="text" id="email" name="email" placeholder="Enter an email address" style="border-style: none;"></div>
-    <div><input type="submit" value="Log In" class="button"></div>
-  </form></div>
-<%- include('footer.html'); -%>