diff --git a/platform/ui/src/assets/icons/chevron-left.svg b/platform/ui/src/assets/icons/chevron-left.svg
index ea9cf51a1..26b5ca33b 100644
--- a/platform/ui/src/assets/icons/chevron-left.svg
+++ b/platform/ui/src/assets/icons/chevron-left.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
     <path fill="currentColor" fill-rule="evenodd" d="M10 13L5 7.737 5.7 7 10 11.526 14.3 7 15 7.737z" transform="rotate(90 10 10)"/>
 </svg>
diff --git a/platform/ui/src/assets/icons/tool-more-menu.svg b/platform/ui/src/assets/icons/tool-more-menu.svg
index 3429b6c1e..4ae8ca694 100644
--- a/platform/ui/src/assets/icons/tool-more-menu.svg
+++ b/platform/ui/src/assets/icons/tool-more-menu.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="6" viewBox="0 0 20 6">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 6">
     <g fill="none" fill-rule="evenodd">
         <path d="M0 0L29 0 29 29 0 29z" transform="translate(-4.5 -11.5)"/>
         <path fill="currentColor" fill-rule="nonzero" d="M7.25 12.083c-1.33 0-2.417 1.088-2.417 2.417 0 1.33 1.088 2.417 2.417 2.417 1.33 0 2.417-1.088 2.417-2.417 0-1.33-1.088-2.417-2.417-2.417zm14.5 0c-1.33 0-2.417 1.088-2.417 2.417 0 1.33 1.088 2.417 2.417 2.417 1.33 0 2.417-1.088 2.417-2.417 0-1.33-1.088-2.417-2.417-2.417zm-7.25 0c-1.33 0-2.417 1.088-2.417 2.417 0 1.33 1.088 2.417 2.417 2.417 1.33 0 2.417-1.088 2.417-2.417 0-1.33-1.088-2.417-2.417-2.417z" transform="translate(-4.5 -11.5)"/>
diff --git a/platform/ui/src/views/ToolbarHeader/ToolbarHeader.mdx b/platform/ui/src/views/ToolbarHeader/ToolbarHeader.mdx
index 1cf7c46b7..fe01f99e3 100644
--- a/platform/ui/src/views/ToolbarHeader/ToolbarHeader.mdx
+++ b/platform/ui/src/views/ToolbarHeader/ToolbarHeader.mdx
@@ -19,7 +19,7 @@ components.
 <Playground>
   {() => {
     const [activeTool, setActiveTool] = useState('Zoom');
-    const [showTooltip, setShowTooltip] = useState(null);
+    const [showTooltip, setShowTooltip] = useState('Zoom');
     const tools = [
       {
         id: 'Zoom',
@@ -67,7 +67,7 @@ components.
         const isActive = activeTool === tool.id;
         const shouldShowTooltip = showTooltip === tool.id;
         return (
-          <div className="relative flex justify-center">
+          <div className="relative flex justify-center" key={tool.id}>
             <IconButton
               variant={isActive ? 'contained' : 'text'}
               className={classnames('mx-1', {
@@ -85,13 +85,13 @@ components.
             </IconButton>
             {shouldShowTooltip && (
               <div
-                class={classnames(
+                className={classnames(
                   'tooltip absolute bg-primary-dark border border-secondary-main text-white text-base rounded py-1 px-4 inset-x-auto top-full mt-2 w-max-content'
                 )}
               >
                 {tool.label}
                 <svg
-                  class="absolute text-primary-dark w-full h-4 left-0 stroke-secondary-main"
+                  className="absolute text-primary-dark w-full h-4 left-0 stroke-secondary-main"
                   style={{ top: -15 }}
                   xmlns="http://www.w3.org/2000/svg"
                   width="24"