diff --git a/search/grounded-generation-playground/package-lock.json b/search/grounded-generation-playground/package-lock.json
index 658ef60e8b9..cfd4562fd80 100644
--- a/search/grounded-generation-playground/package-lock.json
+++ b/search/grounded-generation-playground/package-lock.json
@@ -20,6 +20,7 @@
         "@radix-ui/react-switch": "^1.1.0",
         "@radix-ui/react-tabs": "^1.1.0",
         "@radix-ui/react-tooltip": "^1.1.2",
+        "@types/react-helmet": "^6.1.11",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "gaxios": "^6.7.1",
@@ -3107,6 +3108,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-helmet": {
+      "version": "6.1.11",
+      "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.11.tgz",
+      "integrity": "sha512-0QcdGLddTERotCXo3VFlUSWO3ztraw8nZ6e3zJSgG7apwV5xt+pJUS8ewPBqT4NYB1optGLprNQzFleIY84u/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/stack-utils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
diff --git a/search/grounded-generation-playground/package.json b/search/grounded-generation-playground/package.json
index 43c6bfface1..98bb7ca8084 100644
--- a/search/grounded-generation-playground/package.json
+++ b/search/grounded-generation-playground/package.json
@@ -26,6 +26,7 @@
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
+    "@types/react-helmet": "^6.1.11",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "gaxios": "^6.7.1",
diff --git a/search/grounded-generation-playground/src/components/ui/about-page-content.tsx b/search/grounded-generation-playground/src/components/ui/about-page-content.tsx
index 3828c6dd555..b55ef62e6f4 100644
--- a/search/grounded-generation-playground/src/components/ui/about-page-content.tsx
+++ b/search/grounded-generation-playground/src/components/ui/about-page-content.tsx
@@ -63,7 +63,7 @@ const AboutPageContent: React.FC<AboutPageContentProps> = ({
           value="javascript"
           className="data-[state=active]:bg-zinc-700 data-[state=active]:text-white text-white"
         >
-          Javascript
+          JavaScript
         </TabsTrigger>
         <TabsTrigger
           value="python"
@@ -177,6 +177,7 @@ ${requestStr}
 });`;
 };
 
+// TODO: abhishekbhgwt@: Update to client library when available
 const makePython = (requestObj: RequestObject): string => {
   const PROJECT_NUMBER = process.env.PROJECT_NUMBER;
   const API_ENDPOINT = `https://discoveryengine.googleapis.com/v1alpha/projects/${PROJECT_NUMBER}/locations/global:streamGenerateGroundedContent`;
diff --git a/search/grounded-generation-playground/src/components/ui/icons.tsx b/search/grounded-generation-playground/src/components/ui/icons.tsx
index f78e2c3cf7e..2091fefb3e8 100644
--- a/search/grounded-generation-playground/src/components/ui/icons.tsx
+++ b/search/grounded-generation-playground/src/components/ui/icons.tsx
@@ -79,42 +79,62 @@ const IconGemini = ({ className, ...props }: React.ComponentProps<'svg'>) => {
 const IconVertexAi = ({ className, ...props }: React.ComponentProps<'svg'>) => {
   return (
     <svg
+      id="Standard_product_Icon"
+      data-name="Standard product Icon"
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 32 32"
-      fill="currentColor"
       version="1.1"
+      viewBox="0 0 512 512"
       className={cn('h-4 w-4', className)}
       {...props}
     >
+      <defs>
+        <style>
+          {`
+          .cls-1 {
+            fill: none;
+          }
+          .cls-1, .cls-2, .cls-3, .cls-4, .cls-5 {
+            stroke-width: 0px;
+          }
+          .cls-2 {
+            fill: #34a853;
+          }
+          .cls-3 {
+            fill: #4285f4;
+          }
+          .cls-4 {
+            fill: #ea4335;
+          }
+          .cls-5 {
+            fill: #fbbc04;
+          }
+          `}
+        </style>
+      </defs>
       <g id="bounding_box" data-name="bounding box">
-        <rect width="32" height="32" fill="none" strokeWidth="0" />
+        <rect id="bounding_box-2" data-name="bounding box-2" className="cls-1" width="512" height="512"/>
       </g>
       <g id="art_layer" data-name="art layer">
-        <path
-          d="M9,19c-.6,0-1-.5-1-1V4c0-.5.4-1,1-1s1,.5,1,1v14c0,.5-.4,1-1,1Z"
-          fill="#ea4335"
-          strokeWidth="0"
-        />
-        <path
-          d="M23,19c-.5,0-1-.5-1-1V4c0-.5.5-1,1-1s1,.5,1,1v14c0,.5-.5,1-1,1Z"
-          fill="#4285f4"
-          strokeWidth="0"
-        />
-        <path
-          d="M16,29c-.2,0-.4,0-.5-.2l-11-7c-.5-.3-.6-.9-.3-1.4.3-.5.9-.6,1.4-.3l10.5,6.7,10.5-6.7c.5-.3,1.1-.2,1.4.3s.2,1.1-.3,1.4l-11,7c-.2.1-.4.2-.5.2h-.2Z"
-          fill="#fbbc04"
-          strokeWidth="0"
-        />
-        <path
-          d="M16,23c-.6,0-1-.5-1-1v-14c0-.6.4-1,1-1s1,.4,1,1v14c0,.5-.5,1-1,1Z"
-          fill="#34a853"
-          strokeWidth="0"
-        />
+        <path className="cls-4" d="M128,249c-8.8,0-16-7.2-16-16v-105c0-8.8,7.2-16,16-16s16,7.2,16,16v105c0,8.8-7.2,16-16,16Z"/>
+        <path className="cls-5" d="M256,464c-3,0-6-.8-8.6-2.5l-176-112c-7.5-4.7-9.7-14.6-4.9-22.1,4.8-7.5,14.6-9.6,22.1-4.9l167.4,106.5,167.4-106.5c7.5-4.7,17.3-2.5,22.1,4.9,4.7,7.5,2.5,17.3-4.9,22.1l-176,112c-2.6,1.7-5.6,2.5-8.6,2.5h0Z"/>
+        <path className="cls-2" d="M256,394c-8.8,0-16-7.2-16-16v-73.1c0-8.8,7.2-16,16-16s16,7.2,16,16v73.1c0,8.8-7.2,16-16,16Z"/>
+        <circle className="cls-4" cx="128" cy="64" r="16"/>
+        <circle className="cls-4" cx="128" cy="297" r="16"/>
+        <path className="cls-3" d="M384.2,314c-8.8,0-16-7.1-16-16l-.2-106c0-8.8,7.1-16,16-16h0c8.8,0,16,7.1,16,16l.2,106c0,8.8-7.1,16-16,16h0Z"/>
+        <circle className="cls-3" cx="384" cy="64" r="16"/>
+        <circle className="cls-3" cx="384" cy="128" r="16"/>
+        <path className="cls-5" d="M320,225c-8.8,0-16-7.2-16-16v-103c0-8.8,7.2-16,16-16s16,7.2,16,16v103c0,8.8-7.2,16-16,16Z"/>
+        <circle className="cls-2" cx="256" cy="177" r="16"/>
+        <circle className="cls-2" cx="256" cy="241" r="16"/>
+        <circle className="cls-5" cx="320" cy="273" r="16"/>
+        <circle className="cls-5" cx="320" cy="337" r="16"/>
+        <path className="cls-5" d="M192,225c-8.8,0-16-7.2-16-16v-103c0-8.8,7.2-16,16-16s16,7.2,16,16v103c0,8.8-7.2,16-16,16Z"/>
+        <circle className="cls-5" cx="192" cy="273" r="16"/>
+        <circle className="cls-5" cx="192" cy="337" r="16"/>
       </g>
     </svg>
   );
 };
-
 const IconElastic = ({ className, ...props }: React.ComponentProps<'svg'>) => {
   return (
     <svg
diff --git a/search/grounded-generation-playground/src/components/ui/page-header.tsx b/search/grounded-generation-playground/src/components/ui/page-header.tsx
index 5ac3c04eb39..b961e9a76f4 100644
--- a/search/grounded-generation-playground/src/components/ui/page-header.tsx
+++ b/search/grounded-generation-playground/src/components/ui/page-header.tsx
@@ -1,22 +1,7 @@
-/**
- * Copyright 2024 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
 import React from 'react';
 import { Button } from '@/components/ui/button';
 import { Menu } from 'lucide-react';
+import { Helmet } from 'react-helmet';
 
 interface PageHeaderProps {
   toggleSidebar: () => void;
@@ -24,30 +9,46 @@ interface PageHeaderProps {
 
 const PageHeader: React.FC<PageHeaderProps> = ({ toggleSidebar }) => {
   return (
-    <header className="bg-zinc-900 shadow-md border-b border-zinc-800">
-      <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
-        <div className="flex items-center justify-between">
-          <h1
-            className="text-2xl font-semibold text-transparent bg-clip-text"
-            style={{
-              backgroundImage:
-                'linear-gradient(72.83deg, #4285F4 11.63%, #9b72cb 40.43%, #d96570 68.07%)',
-            }}
-          >
-            Vertex AI Search Grounded Generation Playground
-          </h1>
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={toggleSidebar}
-            className="lg:hidden text-white"
-          >
-            <Menu className="h-6 w-6" />
-          </Button>
+    <>
+      <Helmet>
+        <style>
+          {`
+            @import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');
+
+            .google-sans-header {
+              font-family: "Google Sans", sans-serif;
+              font-optical-sizing: auto;
+              font-weight: 500;
+              font-style: normal;
+              font-variation-settings: "GRAD" 0;
+            }
+          `}
+        </style>
+      </Helmet>
+      <header className="bg-zinc-900 shadow-md border-b border-zinc-800">
+        <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
+          <div className="flex items-center justify-between">
+            <h1
+              className="text-2xl google-sans-header text-transparent bg-clip-text"
+              style={{
+                backgroundImage: 'linear-gradient(72.83deg, #4285F4 11.63%, #9b72cb 40.43%, #d96570 68.07%)',
+              }}
+            >
+              Vertex AI Search Grounded Generation Playground
+            </h1>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={toggleSidebar}
+              className="lg:hidden text-white"
+            >
+              <Menu className="h-6 w-6" />
+            </Button>
+          </div>
         </div>
-      </div>
-    </header>
+      </header>
+    </>
   );
 };
 
-export default PageHeader;
+export default PageHeader;
\ No newline at end of file