diff --git a/e2e/playground.spec.ts b/e2e/playground.spec.ts
index 253988e1..4f09adc0 100644
--- a/e2e/playground.spec.ts
+++ b/e2e/playground.spec.ts
@@ -40,7 +40,7 @@ test.beforeEach(async ({ page }) => {
 test.describe('Playground page', () => {
   test('Page renders basic skeleton elements', async ({ page }) => {
     await page.getByText('Fingerprint Pro Playground', { exact: true }).waitFor();
-    await page.getByText('Welcome, this is your visitor ID').waitFor();
+    await page.getByText('Your Visitor ID is').waitFor();
     await page.getByTestId(TEST_ID.refreshButton).first().waitFor();
 
     await page.getByText('Identification', { exact: true }).waitFor();
diff --git a/src/app/playground/Playground.tsx b/src/app/playground/Playground.tsx
index 86bff3dc..ab0cf690 100644
--- a/src/app/playground/Playground.tsx
+++ b/src/app/playground/Playground.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { FunctionComponent } from 'react';
+import { FunctionComponent, useEffect, ReactNode } from 'react';
 import { CollapsibleJsonViewer } from '../../client/components/common/CodeSnippet/CodeSnippet';
 import dynamic from 'next/dynamic';
 import SignalTable, { TableCellData } from './components/SignalTable';
@@ -32,6 +32,7 @@ import {
 } from '../../client/components/common/Collapsible/Collapsible';
 import { ChevronSvg } from '../../client/img/chevronSvg';
 import { pluralize } from '../../shared/utils';
+import { motion } from 'framer-motion';
 
 const PLAYGROUND_COPY = {
   androidOnly: 'Applicable only to Android devices',
@@ -63,6 +64,17 @@ const DocsLink: FunctionComponent<{ children: string; href: string; style?: Reac
 // Map cannot be server-side rendered
 const Map = dynamic(() => import('./components/Map'), { ssr: false });
 
+const TableTitle = ({ children }: { children: ReactNode }) => (
+  <motion.h3
+    initial={{ opacity: 0 }}
+    animate={{ opacity: 1 }}
+    transition={{ duration: 0.3 }}
+    className={styles.tableTitle}
+  >
+    {children}
+  </motion.h3>
+);
+
 function Playground() {
   const {
     agentResponse,
@@ -75,6 +87,13 @@ function Playground() {
     serverError,
   } = usePlaygroundSignals();
 
+  /**
+   * Prevent restoring scroll position on page refresh since there is nothing to scroll to while the data is being loaded
+   */
+  useEffect(() => {
+    window.history.scrollRestoration = 'manual';
+  }, []);
+
   if (agentError) {
     return <Alert severity={'error'}>JavaScript Agent Error: {agentError.message}.</Alert>;
   }
@@ -147,14 +166,14 @@ function Playground() {
         content: (
           <>
             {latitude && longitude && (
-              <div>
+              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.25 }}>
                 <Map
                   key={[latitude, longitude].toString()}
                   position={[latitude, longitude]}
                   zoom={zoom}
                   height='95px'
                 />
-              </div>
+              </motion.div>
             )}
           </>
         ),
@@ -448,120 +467,126 @@ function Playground() {
         </h1>
         <p>Analyze your browser with Fingerprint Pro and see all the available signals.</p>
       </Container>
-      {agentResponse && (
-        <Container size='large'>
-          <div className={styles.visitorIdBox}>
-            <p>Welcome, this is your visitor ID</p>
-            <h2 className={styles.visitorId}>{agentResponse?.visitorId}</h2>
-          </div>
-        </Container>
-      )}
-      {!cachedEvent ? (
-        <Container size='large'>
-          <div className={styles.runningIntelligence}>
-            <Spinner size={64} />
+      <Container size='large'>
+        <div className={styles.runningIntelligence}>
+          {!cachedEvent ? (
             <h2>
               Running Device Intelligence<span className={styles.blink}>_</span>
             </h2>
-          </div>
-        </Container>
-      ) : (
-        <>
-          <Container size='large'>
+          ) : (
             <RefreshButton
               loading={isLoadingAgentResponse || isLoadingServerResponse}
               getAgentData={getAgentData}
               className={styles.reloadButton}
             />
-
-            <div className={styles.tablesContainer}>
+          )}
+        </div>
+      </Container>
+      <>
+        <Container size='large'>
+          <div className={styles.tablesContainer}>
+            {agentResponse ? (
               <MyCollapsible defaultOpen>
-                <h3 className={styles.tableTitle}>
+                <TableTitle>
                   Identification{' '}
                   <MyCollapsibleTrigger>
                     <ChevronSvg />
                   </MyCollapsibleTrigger>
-                </h3>
+                </TableTitle>
                 <MyCollapsibleContent>
-                  <SignalTable data={identificationSignals} />
-                </MyCollapsibleContent>
-              </MyCollapsible>
+                  <div className={styles.visitorIdBox}>
+                    <p>Your Visitor ID is </p>
+                    <h2 className={styles.visitorId}>{agentResponse?.visitorId}</h2>
+                  </div>
 
-              <MyCollapsible defaultOpen>
-                <h3 className={styles.tableTitle}>
-                  Smart signals{' '}
-                  <MyCollapsibleTrigger>
-                    <ChevronSvg />
-                  </MyCollapsibleTrigger>
-                </h3>
-                <MyCollapsibleContent>
-                  <SignalTable data={smartSignals} />
-                </MyCollapsibleContent>
-              </MyCollapsible>
-              <MyCollapsible defaultOpen>
-                <h3 className={styles.tableTitle}>
-                  Mobile Smart signals{' '}
-                  <MyCollapsibleTrigger>
-                    <ChevronSvg />
-                  </MyCollapsibleTrigger>
-                </h3>
-                <MyCollapsibleContent>
-                  <SignalTable data={mobileSmartSignals} />
+                  <SignalTable data={identificationSignals} />
                 </MyCollapsibleContent>
               </MyCollapsible>
-            </div>
-          </Container>
-
-          <Container size='large' className={styles.isSection}>
-            <h2 className={styles.sectionTitle}>How to use this demo</h2>
-            <HowToUseThisPlayground />
-          </Container>
-          <Container size='large' className={classnames(styles.isSection, styles.jsonSection)}>
-            <div className={styles.jsonContainer}>
-              <div>
-                <h4 className={styles.jsonTitle}>
-                  JavaScript Agent Response {isLoadingAgentResponse && <Spinner size={16} />}
-                </h4>
-                <CollapsibleJsonViewer
-                  dataTestId={TEST_IDS.playground.agentResponseJSON}
-                  json={displayedAgentResponse ?? {}}
-                />
-              </div>
-              <div>
-                <h4 className={styles.jsonTitle}>
-                  Server API Response {isLoadingServerResponse && <Spinner size={16} />}
-                </h4>
-                <CollapsibleJsonViewer
-                  dataTestId={TEST_IDS.playground.serverResponseJSON}
-                  json={usedIdentificationEvent ?? {}}
-                />
+            ) : (
+              // Spacer element to push footer down when no data is ready
+              <div style={{ height: '800px' }} />
+            )}
+            {cachedEvent ? (
+              <>
+                <MyCollapsible defaultOpen>
+                  <TableTitle>
+                    Smart signals{' '}
+                    <MyCollapsibleTrigger>
+                      <ChevronSvg />
+                    </MyCollapsibleTrigger>
+                  </TableTitle>
+                  <MyCollapsibleContent>
+                    <SignalTable data={smartSignals} />
+                  </MyCollapsibleContent>
+                </MyCollapsible>
+                <MyCollapsible defaultOpen>
+                  <TableTitle>
+                    Mobile Smart signals{' '}
+                    <MyCollapsibleTrigger>
+                      <ChevronSvg />
+                    </MyCollapsibleTrigger>
+                  </TableTitle>
+                  <MyCollapsibleContent>
+                    <SignalTable data={mobileSmartSignals} />
+                  </MyCollapsibleContent>
+                </MyCollapsible>
+              </>
+            ) : null}
+          </div>
+        </Container>
+        {cachedEvent ? (
+          <>
+            <Container size='large' className={styles.isSection}>
+              <h2 className={styles.sectionTitle}>How to use this demo</h2>
+              <HowToUseThisPlayground />
+            </Container>
+            <Container size='large' className={classnames(styles.isSection, styles.jsonSection)}>
+              <div className={styles.jsonContainer}>
+                <div>
+                  <h4 className={styles.jsonTitle}>
+                    JavaScript Agent Response {isLoadingAgentResponse && <Spinner size={16} />}
+                  </h4>
+                  <CollapsibleJsonViewer
+                    dataTestId={TEST_IDS.playground.agentResponseJSON}
+                    json={displayedAgentResponse ?? {}}
+                  />
+                </div>
+                <div>
+                  <h4 className={styles.jsonTitle}>
+                    Server API Response {isLoadingServerResponse && <Spinner size={16} />}
+                  </h4>
+                  <CollapsibleJsonViewer
+                    dataTestId={TEST_IDS.playground.serverResponseJSON}
+                    json={usedIdentificationEvent ?? {}}
+                  />
+                </div>
               </div>
-            </div>
-          </Container>
-          <Container size='large' className={styles.learnMoreSection}>
-            <h2 className={styles.sectionTitle}>Learn more</h2>
-          </Container>
-          <ResourceLinks
-            resources={[
-              {
-                title: 'Quick Start Guide',
-                url: 'https://dev.fingerprint.com/docs/quick-start-guide',
-                type: 'Article',
-              },
-              {
-                title: 'What is Fingerprint',
-                url: 'https://dev.fingerprint.com/docs/what-is-fingerprint',
-                type: 'Article',
-              },
-              {
-                title: 'Intro to Device Intelligence Webinar',
-                url: 'https://www.youtube.com/watch?v=YTRmWUeQWyY',
-                type: 'Webinar',
-              },
-            ]}
-          />
-        </>
-      )}
+            </Container>
+            <Container size='large' className={styles.learnMoreSection}>
+              <h2 className={styles.sectionTitle}>Learn more</h2>
+            </Container>
+            <ResourceLinks
+              resources={[
+                {
+                  title: 'Quick Start Guide',
+                  url: 'https://dev.fingerprint.com/docs/quick-start-guide',
+                  type: 'Article',
+                },
+                {
+                  title: 'What is Fingerprint',
+                  url: 'https://dev.fingerprint.com/docs/what-is-fingerprint',
+                  type: 'Article',
+                },
+                {
+                  title: 'Intro to Device Intelligence Webinar',
+                  url: 'https://www.youtube.com/watch?v=YTRmWUeQWyY',
+                  type: 'Webinar',
+                },
+              ]}
+            />
+          </>
+        ) : null}
+      </>
     </>
   );
 }
diff --git a/src/app/playground/components/RefreshButton.module.scss b/src/app/playground/components/RefreshButton.module.scss
index bc91e48e..bc5a9356 100644
--- a/src/app/playground/components/RefreshButton.module.scss
+++ b/src/app/playground/components/RefreshButton.module.scss
@@ -1,16 +1,12 @@
 .refreshButton.refreshButton {
   display: flex;
-  padding: rem(12px) rem(24px);
+  padding: 16px;
   font-weight: 500;
   font-size: 16px;
-  font-weight: 500;
+  font-weight: 400;
   line-height: 150%; /* 24px */
   white-space: unset;
 
-  @include media('<=phoneLandscape') {
-    font-size: 14px;
-  }
-
   img {
     transition: scale 0.2s ease;
     margin-left: rem(4px);
diff --git a/src/app/playground/components/SignalTable.tsx b/src/app/playground/components/SignalTable.tsx
index 8d48c83b..f0f71a5c 100644
--- a/src/app/playground/components/SignalTable.tsx
+++ b/src/app/playground/components/SignalTable.tsx
@@ -1,5 +1,6 @@
 import { ReactNode, FunctionComponent } from 'react';
 import styles from './SignalTable.module.scss';
+import { motion } from 'framer-motion';
 
 export type TableCellData = {
   content: ReactNode | ReactNode[];
@@ -10,14 +11,19 @@ const SignalTable: FunctionComponent<{ data: TableCellData[][] }> = ({ data }) =
   return (
     <table className={styles.signalTable}>
       <tbody>
-        {data.map((row, i) => (
-          <tr key={i}>
+        {data.map((row, rowIndex) => (
+          <motion.tr
+            key={rowIndex}
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.25, delay: rowIndex * 0.1 }}
+          >
             {row.map((cell, j) => (
               <td key={j} className={cell.className}>
                 {cell.content}
               </td>
             ))}
-          </tr>
+          </motion.tr>
         ))}
       </tbody>
     </table>
diff --git a/src/app/playground/playground.module.scss b/src/app/playground/playground.module.scss
index e588fc0b..c49dcb35 100644
--- a/src/app/playground/playground.module.scss
+++ b/src/app/playground/playground.module.scss
@@ -1,13 +1,11 @@
 .hero {
   padding-top: rem(64px);
-  padding-bottom: rem(40px);
   display: flex;
   flex-direction: column;
   gap: rem(8px);
 
   @include media('<=tabletWide') {
     padding-top: rem(40px);
-    padding-bottom: rem(32px);
   }
 
   h1 {
@@ -54,13 +52,11 @@
 
 .visitorIdBox {
   border: 1px dashed v('orange-gradient');
-
   background-color: v('soft-orange-background');
-  padding: rem(32px) rem(20px);
-  border-radius: rem(12px);
-  display: flex;
-  flex-direction: column;
+  padding: rem(16px) rem(12px);
+  border-radius: rem(8px);
   gap: rem(8px);
+  margin-bottom: rem(8px);
 
   @include media('<=tabletWide') {
     padding: rem(20px);
@@ -68,12 +64,13 @@
   }
 
   p {
+    display: inline;
     color: v('dark-gray');
     text-align: center;
     font-family: Inter;
-    font-size: rem(20px);
+    font-size: rem(18px);
     line-height: 160%;
-    font-weight: 400;
+    font-weight: 600;
     margin: 0;
 
     @include media('<=tabletWide') {
@@ -85,10 +82,11 @@
     color: v('orange-gradient');
     text-align: center;
     font-family: 'JetBrains Mono';
-    font-size: 30px;
-    font-weight: 500;
+    font-size: 18px;
+    font-weight: 800;
     line-height: 130%;
     margin: 0;
+    display: inline;
 
     @include media('<=tabletWide') {
       font-size: rem(23px);
@@ -172,15 +170,13 @@ h2.sectionTitle {
 
 .runningIntelligence {
   display: flex;
-  flex-direction: column;
-  gap: 40px;
-  align-items: center;
-  min-height: 60vh;
-  padding-top: rem(32px);
+  justify-content: center;
+  padding-bottom: rem(24px);
+  font-weight: 500;
 
-  @include media('<=tabletWide') {
-    padding-top: rem(24px);
-    gap: rem(20px);
+  @include media('<=phoneLandscape') {
+    justify-content: left;
+    text-align: left;
   }
 
   h2 {
@@ -190,9 +186,13 @@ h2.sectionTitle {
     font-size: 16px;
     font-weight: 400;
     line-height: 160%;
-
+    padding: rem(16px) 0;
     animation: reveal 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
     display: inline-block;
+
+    @include media('<=phoneLandscape') {
+      text-align: left;
+    }
   }
 
   .blink {
@@ -237,14 +237,10 @@ h2.sectionTitle {
   letter-spacing: 0.13px;
 }
 
-.reloadButton {
-  margin: rem(16px) auto rem(32px) auto;
-
+.reloadButton.reloadButton {
   @include media('<=phoneLandscape') {
-    &.reloadButton {
-      margin: rem(16px) 0 rem(32px) 0;
-      padding: 0px;
-    }
+    padding-left: 0px;
+    text-align: left;
   }
 }
 
diff --git a/src/styles/global-styles.scss b/src/styles/global-styles.scss
index aa3b9eba..03112249 100755
--- a/src/styles/global-styles.scss
+++ b/src/styles/global-styles.scss
@@ -167,3 +167,17 @@ button {
 img {
   vertical-align: middle;
 }
+
+/**
+ * Leaflet used high z-indexes by default, causing z-index issues, enforce low z-index for it
+ */
+.leaflet-control.leaflet-control {
+  z-index: 0;
+}
+.leaflet-pane.leaflet-pane {
+  z-index: 0;
+}
+.leaflet-top.leaflet-top,
+.leaflet-bottom.leaflet-bottom {
+  z-index: 0;
+}