diff --git a/web/src/components/dashboards/perses/PersesWrapper.tsx b/web/src/components/dashboards/perses/PersesWrapper.tsx
index 6371d873..42639dda 100644
--- a/web/src/components/dashboards/perses/PersesWrapper.tsx
+++ b/web/src/components/dashboards/perses/PersesWrapper.tsx
@@ -195,7 +195,8 @@ function InnerWrapper({ children, project, dashboardName }) {
     >
       <VariableProviderWithQueryParams
         builtinVariableDefinitions={builtinVariables}
-        initialVariableDefinitions={persesDashboard?.spec?.variables}
+        initialVariableDefinitions={clearedDashboardResource?.spec?.variables}
+        key={clearedDashboardResource?.metadata.name}
       >
         <PersesPrometheusDatasourceWrapper
           queries={[]}
diff --git a/web/src/components/dashboards/shared/dashboard-skeleton.tsx b/web/src/components/dashboards/shared/dashboard-skeleton.tsx
index 3c2c7362..c7485c6d 100644
--- a/web/src/components/dashboards/shared/dashboard-skeleton.tsx
+++ b/web/src/components/dashboards/shared/dashboard-skeleton.tsx
@@ -19,7 +19,11 @@ import {
   Title,
 } from '@patternfly/react-core';
 import { TimeRangeControls } from '@perses-dev/plugin-system';
-import { DashboardStickyToolbar, useDashboardActions } from '@perses-dev/dashboards';
+import {
+  DashboardStickyToolbar,
+  useDashboardActions,
+  useVariableDefinitions,
+} from '@perses-dev/dashboards';
 
 const HeaderTop: React.FC = React.memo(() => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
@@ -54,12 +58,16 @@ const DashboardSkeleton: React.FC<MonitoringDashboardsPageProps> = React.memo(
 
     const { perspective } = usePerspective();
     const { setDashboard } = useDashboardActions();
+    const variables = useVariableDefinitions();
 
     const onChangeBoard = (selectedDashboard: string) => {
       changeBoard(selectedDashboard);
 
       if (isPerses) {
-        const selectedBoard = boardItems.find((item) => item.name === selectedDashboard);
+        const selectedBoard = boardItems.find(
+          (item) => item.name.toLowerCase() === selectedDashboard.toLowerCase(),
+        );
+
         if (selectedBoard) {
           setDashboard(selectedBoard.persesDashboard);
         }
@@ -86,10 +94,12 @@ const DashboardSkeleton: React.FC<MonitoringDashboardsPageProps> = React.memo(
               </StackItem>
             )}
             {isPerses ? (
-              <StackItem>
-                <b> {t('Dashboard Variables')} </b>
-                <DashboardStickyToolbar initialVariableIsSticky={false} />
-              </StackItem>
+              variables.length > 0 ? (
+                <StackItem>
+                  <b> {t('Dashboard Variables')} </b>
+                  <DashboardStickyToolbar initialVariableIsSticky={false} key={dashboardName} />
+                </StackItem>
+              ) : null
             ) : (
               <StackItem>
                 <LegacyDashboardsAllVariableDropdowns key={dashboardName} />