diff --git a/Cargo.lock b/Cargo.lock
index 561cd1ebb9aa0..9a4749a9a7859 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1870,6 +1870,16 @@ version = "0.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3a4f925191b4367301851c6d99b09890311d74b0d43f274c0b34c86d308a3663"
 
+[[package]]
+name = "cargo_toml"
+version = "0.15.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "599aa35200ffff8f04c1925aa1acc92fa2e08874379ef42e210a80e527e60838"
+dependencies = [
+ "serde",
+ "toml 0.7.6",
+]
+
 [[package]]
 name = "cassowary"
 version = "0.3.0"
@@ -9948,6 +9958,7 @@ dependencies = [
 name = "vector-vrl-web-playground"
 version = "0.1.0"
 dependencies = [
+ "cargo_toml",
  "enrichment",
  "getrandom 0.2.10",
  "gloo-utils",
diff --git a/lib/vector-vrl/web-playground/Cargo.toml b/lib/vector-vrl/web-playground/Cargo.toml
index d250fe905d37e..9bf8aa8e68baa 100644
--- a/lib/vector-vrl/web-playground/Cargo.toml
+++ b/lib/vector-vrl/web-playground/Cargo.toml
@@ -18,4 +18,5 @@ getrandom = { version = "0.2", features = ["js"] }
 vector-vrl-functions = { path = "../functions" }
 enrichment = { path = "../../enrichment" }
 
-
+[build-dependencies]
+cargo_toml = "0.15.3"
diff --git a/lib/vector-vrl/web-playground/build.rs b/lib/vector-vrl/web-playground/build.rs
new file mode 100644
index 0000000000000..2162a604467ab
--- /dev/null
+++ b/lib/vector-vrl/web-playground/build.rs
@@ -0,0 +1,57 @@
+use cargo_toml::Manifest;
+use std::fs::File;
+use std::io::Write;
+use std::path::{Path, PathBuf};
+use std::{env, fs, io};
+
+fn get_vector_toml_path() -> PathBuf {
+    let path = fs::canonicalize(env::var("CARGO_MANIFEST_DIR").unwrap()).unwrap();
+
+    // Remove the "lib/vector-vrl/web-playground" suffix
+    let parent_path = path
+        .parent()
+        .and_then(|p| p.parent())
+        .and_then(|p| p.parent());
+    parent_path
+        .expect("Failed to find vector repo root")
+        .join("Cargo.toml")
+        .to_path_buf()
+}
+
+fn write_build_constants(manifest: &Manifest, dest_path: &Path) -> io::Result<()> {
+    let mut output_file = File::create(dest_path)?;
+    output_file.write_all(
+        "// AUTOGENERATED CONSTANTS. SEE BUILD.RS AT REPOSITORY ROOT. DO NOT MODIFY.\n".as_ref(),
+    )?;
+
+    let create_const_statement =
+        |name, value| format!("pub const {}: &str = \"{}\";\n", name, value);
+    // TODO: For releases, we should use the manifest.package().version().
+    // https://github.com/vectordotdev/vector/issues/18425
+    let vector_version_const = create_const_statement("VECTOR_VERSION", "master");
+    output_file
+        .write_all(vector_version_const.as_bytes())
+        .expect("Failed to write Vector version constant");
+
+    let vrl_version = &manifest
+        .dependencies
+        .get("vrl")
+        .unwrap()
+        .detail()
+        .unwrap()
+        .version
+        .clone()
+        .unwrap();
+    let vrl_version_const = create_const_statement("VRL_VERSION", vrl_version);
+    output_file
+        .write_all(vrl_version_const.as_bytes())
+        .expect("Failed to write Vector version constant");
+    Ok(())
+}
+
+fn main() {
+    let manifest =
+        Manifest::from_path(get_vector_toml_path()).expect("Failed to load Vector Cargo.toml");
+    let dst = Path::new(&env::var("OUT_DIR").unwrap()).join("built.rs");
+    write_build_constants(&manifest, &dst).expect("Failed to write constants");
+}
diff --git a/lib/vector-vrl/web-playground/public/index.css b/lib/vector-vrl/web-playground/public/index.css
index 02eecc7c28338..bc3b1e7a3e491 100644
--- a/lib/vector-vrl/web-playground/public/index.css
+++ b/lib/vector-vrl/web-playground/public/index.css
@@ -3,62 +3,84 @@ body {
     margin-left: 2vw;
 }
 
-div#App {
-    display: grid;
-    width: 100%;
-    height: 100%;
-    /* the app will have two columns, one for input
-  one for output, left and right */
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: 15vh 1vh 75vh;
-    grid-gap: 1rem;
-  }
+.headers-grid {
+  display: grid;
+  grid-template-columns: 3fr 2fr 7fr;
+  grid-template-rows: 90px;
+  gap: 10px;
+  font-family: "Helvetica Neue", serif;
+  width: 100%;
+  height: 100%;
+  margin: auto;
+}
 
-  div#summary-section {
-    display: grid;
-    grid-row: 1;
-    grid-template-rows: 35% 65%;
-    width: 100%;
-    font-size: 1vw;
-    grid-gap: 1vw;
-  }
+.headers-grid-item {
+  background-color: #dfd8ec;
+  padding: 5px 10px;
+  border-radius: 4px;
+  border: none;
+  display: grid;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
 
-  div#summary-section p{
-    font-size: .9vw;
-  }
+#description-cell {
+  grid-column: 3;
+  display: grid;
+}
 
-  div#toolbar-section {
-    display: grid;
-    grid-row: 2;
-    grid-column: 1 / span 2;
-    grid-template-columns: repeat(8, 1fr);
-  }
+div#App {
+  padding-top: 5px;
+  display: grid;
+  width: 100%;
+  height: 100%;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: 1fr 18fr;
+  grid-gap: 1rem;
+  resize: both;
+  overflow: hidden;
+}
+
+div#toolbar-section {
+  padding-top: 30px;
+  display: grid;
+  grid-row: 1;
+  grid-column: 1 / span 2;
+  grid-template-columns: 2fr 2fr 6fr;
+  grid-gap: 1rem;
+  align-items: center;
+}
 
   #toolbar-section #run-code-btn {
     grid-column: 1;
+    height: 40px;
   }
 
   #toolbar-section #share-code-btn {
-    grid-column: 3;
+    grid-column: 2;
+    height: 40px;
   }
 
   /* input pane */
   div#input-section {
     display: grid;
     grid-column: 1;
-    grid-row: 3;
+    grid-row: 2;
     overflow: hidden;
   }
 
   #input-section #cell {
     display: grid;
-    grid-template-rows: 6% 94%;
+    grid-template-rows: 4% 96%;
     overflow: hidden;
   }
 
   #input-section #cell #input-cell-title {
     height: 100%;
     grid-row: 1;
+    font-weight: bold;
+    font-family: "Helvetica Neue", serif;
   }
 
   #input-section #cell #container-program {
@@ -69,9 +91,8 @@ div#App {
   div#output-section {
     display: grid;
     grid-column: 2;
-    grid-row: 3;
-    grid-template-rows: 50% 50%;
-    overflow: hidden;
+    grid-row: 2;
+    grid-template-rows: 30% 60%;
   }
 
   /* event pane */
@@ -87,6 +108,8 @@ div#App {
   #output-section #event-cell #event-cell-title {
     display: grid;
     grid-row: 1;
+    font-weight: bold;
+    font-family: "Helvetica Neue", serif;
   }
 
   #output-section #event-cell #container-event {
@@ -98,7 +121,7 @@ div#App {
   /* output pane */
   #output-section #output-cell {
     display: grid;
-    grid-template-rows: 12% 88%;
+    grid-template-rows: 6% 94%;
     grid-row: 2;
     height: 100%;
   }
@@ -106,6 +129,9 @@ div#App {
   #output-section #output-cell #output-cell-title {
     display: grid;
     grid-row: 1;
+    font-weight: bold;
+    font-family: "Helvetica Neue", serif;
+    height: 50px;
   }
 
   #output-section #output-cell #container-output {
@@ -120,39 +146,41 @@ div#App {
       Segoe UI Symbol, Noto Color Emoji;
   }
 
-  .btn-primary {
-    display: inline-block;
-    outline: 0;
-    border: none;
-    cursor: pointer;
-    border-radius: 4px;
-    font-size: 13px;
-    height: 30px;
-    background-color: #9147ff;
-    color: white;
-    padding: 0 20px;
-  }
+/*  BUTTONS */
+.btn {
+  display: inline-block;
+  outline: 0;
+  border: none;
+  cursor: pointer;
+  border-radius: 8px;
+  font-size: 13px;
+  height: 30px;
+  padding: 0 20px;
+}
 
-  .btn-primary:hover {
-    background-color: #772ce8;
-  }
+.btn:active {
+  box-shadow: 0 4px #666;
+  transform: translateY(2px);
+}
 
-  .btn-secondary {
-    display: inline-block;
-    outline: 0;
-    border: none;
-    cursor: pointer;
-    border-radius: 4px;
-    font-size: 13px;
-    height: 30px;
-    background-color: #0000001a;
-    color: #000000;
-    padding: 0 20px;
-  }
+.btn-primary {
+  background-color: #9147ff;
+  color: white;
+}
 
-  .btn-secondary:hover {
-    background-color: #dcdcdc;
-  }
+.btn-primary:hover {
+  background-color: #6a1ae1;
+}
+
+.btn-secondary {
+  background-color: #0000001a;
+  color: #000000;
+}
+
+.btn-secondary:hover {
+  background-color: #c0bdbd;
+}
+/* END OF BUTTONS */
 
 /* Portrait and Landscape */
 @media only screen
@@ -164,27 +192,13 @@ div#App {
         height: 100%;
         /* the app will have multiple rows
         stacking each section on top of each other */
-        grid-template-rows: 20vh 25vh 10vh 50vh;
+        grid-template-rows: 20vh 10vh 50vh;
         grid-template-columns: 100%;
       }
 
-      div#summary-section {
-        display: grid;
-        grid-row: 1;
-        grid-template-rows: 20% 80%;
-        width: 100%;
-        font-size: 1.5vh;
-        grid-gap: 2vw;
-      }
-
-      div#summary-section p {
-        grid-row: 2;
-        font-size: 2vh;
-      }
-
       div#toolbar-section {
         display: grid;
-        grid-row: 3;
+        grid-row: 1;
         grid-column: 1;
         grid-template-columns: 100%;
         grid-template-rows: repeat(2, 1fr);
diff --git a/lib/vector-vrl/web-playground/public/index.html b/lib/vector-vrl/web-playground/public/index.html
index 78ee8ea1dab84..614c18c496daf 100644
--- a/lib/vector-vrl/web-playground/public/index.html
+++ b/lib/vector-vrl/web-playground/public/index.html
@@ -22,19 +22,27 @@
   </head>
 
   <body>
-    <div id="App">
-      <div id="summary-section">
-        <h1>VRL Playground</h1>
-        <p>
-          <a href="https://vector.dev/docs/reference/vrl/functions/">Vector Remap Language (VRL)</a> is an expression-oriented language designed for transforming
-          observability data. This playground lets you write a program, run it against an event or
-          events, share it, and see how the events are transformed.
-        </p>
+    <div class="headers-grid">
+      <div class="headers-grid-item">
+        <h2>VRL Playground</h2>
+      </div>
+      <div class="headers-grid-item">
+        <h4 id="versions-header"></h4>
+      </div>
+      <div class="headers-grid-item" id="description-cell">
+          <p id="description-paragraph" >
+            <a href="https://vector.dev/docs/reference/vrl/functions/">Vector Remap Language (VRL)</a> is an expression-oriented language designed for transforming
+            observability data. This playground lets you write a program, run it against an event or
+            events, share it, and see how the events are transformed.
+          </p>
       </div>
+    </div>
+    <div id="App">
+
 
       <div id="toolbar-section">
-        <button id="run-code-btn" class="btn-primary" onClick="vrlPlayground.handleRunCode()">run code</button>
-        <button id="share-code-btn" class="btn-secondary" onClick="vrlPlayground.handleShareCode()">share code</button>
+        <button id="run-code-btn" class="btn btn-primary" onClick="vrlPlayground.handleRunCode()">Run program</button>
+        <button id="share-code-btn" class="btn btn-secondary" onClick="vrlPlayground.handleShareCode()">Share program</button>
       </div>
 
       <div id="input-section">
diff --git a/lib/vector-vrl/web-playground/public/index.js b/lib/vector-vrl/web-playground/public/index.js
index 9ffa959c7de5c..f2cc69dbd1504 100644
--- a/lib/vector-vrl/web-playground/public/index.js
+++ b/lib/vector-vrl/web-playground/public/index.js
@@ -1,4 +1,4 @@
-import init, { run_vrl } from "./pkg/vector_vrl_web_playground.js";
+import init, { run_vrl, vrl_version, vector_version } from "./pkg/vector_vrl_web_playground.js";
 import { vrlLanguageDefinition, vrlThemeDefinition } from "./vrl-highlighter.js";
 
 const PROGRAM_EDITOR_DEFAULT_VALUE = `# Remove some fields
@@ -38,6 +38,9 @@ export class VrlWebPlayground {
     constructor() {
         let temp = init().then(() => {
             this.run_vrl = run_vrl;
+            this.vector_version = vector_version();
+            this.vrl_version = vrl_version();
+
             // require is provided by loader.min.js.
             require.config({
                 paths: { vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs" },
@@ -80,6 +83,9 @@ export class VrlWebPlayground {
                         this.outputEditor.setValue(`Error reading the shared URL\n${e}`);
                     }
                 }
+
+                document.getElementById('versions-header').innerText =
+                        "Vector Version: " + vector_version() + "\nVRL Version: " + vrl_version();
             });
         });
     }
diff --git a/lib/vector-vrl/web-playground/public/package.json b/lib/vector-vrl/web-playground/public/package.json
deleted file mode 100644
index fc6889020fde3..0000000000000
--- a/lib/vector-vrl/web-playground/public/package.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "vector-vrl-web-playground",
-  "version": "0.1.0",
-  "files": [
-    "vector_vrl_web_playground_bg.wasm",
-    "vector_vrl_web_playground.js",
-    "vector_vrl_web_playground.d.ts"
-  ],
-  "module": "vector_vrl_web_playground.js",
-  "types": "vector_vrl_web_playground.d.ts",
-  "sideEffects": false
-}
diff --git a/lib/vector-vrl/web-playground/src/lib.rs b/lib/vector-vrl/web-playground/src/lib.rs
index f7f8a5aa8ce60..51a23cacfbd9b 100644
--- a/lib/vector-vrl/web-playground/src/lib.rs
+++ b/lib/vector-vrl/web-playground/src/lib.rs
@@ -10,6 +10,10 @@ use vrl::value::Secrets;
 use vrl::value::Value;
 use wasm_bindgen::prelude::*;
 
+pub mod built_info {
+    include!(concat!(env!("OUT_DIR"), "/built.rs"));
+}
+
 #[derive(Serialize, Deserialize)]
 pub struct Input {
     pub program: String,
@@ -110,3 +114,13 @@ pub fn run_vrl(incoming: &JsValue) -> JsValue {
         Err(err) => JsValue::from_serde(&err).unwrap(),
     }
 }
+
+#[wasm_bindgen]
+pub fn vector_version() -> String {
+    built_info::VECTOR_VERSION.to_string()
+}
+
+#[wasm_bindgen]
+pub fn vrl_version() -> String {
+    built_info::VRL_VERSION.to_string()
+}