diff --git a/README.md b/README.md
index 2d61f76..5203a80 100644
--- a/README.md
+++ b/README.md
@@ -57,14 +57,13 @@ To run the tests, run this command:
 ./vendor/bin/phpunit --verbose src/tests/DescopeSDKTest.php
 ```
 
-## Other Code Samples
+## Running the PHP Sample App
 
-1. [PHP Sample App](https://github.com/descope/php-sdk/sample/)
-2. [WordPress Plugin](https://github.com/descope-sample-apps/wordpress-plugin)
+In the `sample/static/descope.js`, replace the **projectId** with your Descope Project ID, which you can find in the [Descope Console](https://app.descope.com/settings/project).
 
-## Running the PHP Sample App
+If you haven't already, make sure you run the composer command listed above, to install the necessary SDK packages.
 
-Run this command, from the root directory, to install the necessary dependencies and start the sample app:
+Then, run this command from the root directory, to start the sample app:
 
 ```
 php -S localhost:3000 -t sample/
@@ -72,6 +71,12 @@ php -S localhost:3000 -t sample/
 
 The app should now be accessible at http://localhost:3000/ from your web browser.
 
+This sample app showcases a Descope Flow using the WebJS SDK and PHP sessions to retain user information across multiple pages. It also showcases initializing the SDK and using it to validate the session token from formData sent from `login.php`.
+
+## Other Code Samples
+
+1. [WordPress Plugin](https://github.com/descope-sample-apps/wordpress-plugin)
+
 ## Feedback
 
 ### Contributing
diff --git a/sample/login.php b/sample/login.php
index 533bbb8..fb9ef99 100644
--- a/sample/login.php
+++ b/sample/login.php
@@ -12,48 +12,60 @@
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
     <div id="container"></div>
     <script>
-        sdk.refresh()
-        const container = document.getElementById("container")
+        function sendFormData(sessionToken, userDetails) {
+            var formData = new FormData();
+            formData.append("sessionToken", sessionToken);
+            formData.append("userDetails", JSON.stringify(userDetails));
+
+            var xmlHttp = new XMLHttpRequest();
+            let getUrl = window.location;
+            let baseUrl = getUrl.protocol + "//" + getUrl.host;
+
+            xmlHttp.onreadystatechange = function () {
+                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
+                    window.location = `${baseUrl}/dashboard.php`;
+                }
+            };
+                
+            xmlHttp.open("post", `${baseUrl}/callback.php`);
+            xmlHttp.send(formData);
+        }
+
+        async function getUserDetails() {
+            const user = await sdk.me();
+            return user;
+        }
         
-        container.innerHTML = '<descope-wc project-id="' + projectId + '" flow-id="sign-up-or-in"></descope-wc>';
-        const wcElement = document.getElementsByTagName('descope-wc')[0]
+        const refreshToken = sdk.getRefreshToken();
+        const validRefreshToken = refreshToken && !sdk.isJwtExpired(refreshToken);
 
-        const onSuccess = (e) => {
-            sdk.refresh()
-            
+        if (validRefreshToken) {
+            console.log("Valid refresh token found. Logging in...");
+            sdk.refresh();
             const user = getUserDetails().then((user) => {
-                var formData = new FormData();
                 const sessionToken = sdk.getSessionToken();
+                sendFormData(sessionToken, user.data);
+            });
+        } else {
+            const container = document.getElementById("container")
+            container.innerHTML = '<descope-wc project-id="' + projectId + '" flow-id="sign-up-or-in"></descope-wc>';
+            const wcElement = document.getElementsByTagName('descope-wc')[0]
 
-                formData.append("sessionToken", sessionToken);
-                formData.append("projectId", e.target.getAttribute("project-id"));
-                formData.append("userDetails", JSON.stringify(user.data));
-
-                var xmlHttp = new XMLHttpRequest();
-                let getUrl = window.location;
-                let baseUrl = getUrl.protocol + "//" + getUrl.host;
-
-                xmlHttp.onreadystatechange = function () {
-                    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
-                        window.location = `${baseUrl}/dashboard.php`;
-                    }
-                };
+            const onSuccess = (e) => {
+                sdk.refresh()
                 
-                xmlHttp.open("post", `${baseUrl}/callback.php`);
-                xmlHttp.send(formData);
-            })
-
-            async function getUserDetails() {
-                const user = await sdk.me();
-                return user;
+                const user = getUserDetails().then((user) => {
+                    const sessionToken = sdk.getSessionToken();
+                    sendFormData(sessionToken, user.data);
+                });
             }
-        }
 
-        const onError = (err) => console.log(err);
+            const onError = (err) => console.log(err);
 
-        if (wcElement) {
-            wcElement.addEventListener('success', onSuccess)
-            wcElement.addEventListener('error', onError)
+            if (wcElement) {
+                wcElement.addEventListener('success', onSuccess)
+                wcElement.addEventListener('error', onError)
+            }
         }
     </script>
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
diff --git a/sample/logout.php b/sample/logout.php
index d30a396..444b1b1 100644
--- a/sample/logout.php
+++ b/sample/logout.php
@@ -1,6 +1,25 @@
 <?php
 session_start();
 session_destroy();
+?>
 
-// Redirect back to home page
-header('Location: /index.php');
\ No newline at end of file
+<!DOCTYPE html>
+<html>
+<head>
+    <script src="https://unpkg.com/@descope/web-component@latest/dist/index.js"></script>
+    <script src="https://unpkg.com/@descope/web-js-sdk@latest/dist/index.umd.js"></script>
+    <script type="text/javascript" src="../static/descope.js"></script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+    <script>
+        logout().then((resp) => {
+            // Redirect back to home page
+            window.location = "/index.php";
+        });
+
+        async function logout() {
+            const resp = await sdk.logout();
+        }
+    </script>
+</body>
+</html>
diff --git a/sample/styles.css b/sample/styles.css
new file mode 100644
index 0000000..708dce2
--- /dev/null
+++ b/sample/styles.css
@@ -0,0 +1,43 @@
+body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  background-color: #f2f2f2; /* Light grey background */
+}
+h1 {
+  margin-bottom: 30px;
+}
+.dashboard-button {
+  padding: 10px 20px;
+  font-size: 1.2em;
+  background-color: #008cba; /* Blue background */
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.dashboard-button:hover {
+  background-color: #007b9e; /* Darken background */
+}
+.container {
+  text-align: center;
+}
+.session-token-container {
+  background-color: #333;
+  color: #fff;
+  padding: 10px;
+  border-radius: 5px;
+  width: 80%;
+  word-wrap: break-word;
+  margin: 0 auto;
+}
+#container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+}