diff --git a/web/ui/react-app/src/utils/index.ts b/web/ui/react-app/src/utils/index.ts
index 08111b1580..441431e3a9 100644
--- a/web/ui/react-app/src/utils/index.ts
+++ b/web/ui/react-app/src/utils/index.ts
@@ -270,7 +270,7 @@ export const getQueryParam = (key: string): string => {
 export const createExpressionLink = (expr: string): string => {
   return `../graph?g0.expr=${encodeURIComponent(expr)}&g0.tab=1&g0.display_mode=${
     GraphDisplayMode.Lines
-  }&g0.show_exemplars=0.g0.range_input=1h.`;
+  }&g0.show_exemplars=0&g0.range_input=1h`;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any,
diff --git a/web/ui/react-app/src/utils/utils.test.ts b/web/ui/react-app/src/utils/utils.test.ts
index 4b14465816..93174df87b 100644
--- a/web/ui/react-app/src/utils/utils.test.ts
+++ b/web/ui/react-app/src/utils/utils.test.ts
@@ -15,6 +15,7 @@ import {
   parseOption,
   decodePanelOptionsFromQueryString,
   parsePrometheusFloat,
+  createExpressionLink,
 } from '.';
 import { GraphDisplayMode, PanelType } from '../pages/graph/Panel';
 
@@ -332,5 +333,17 @@ describe('Utils', () => {
         expect(parsePrometheusFloat('-1.7e+01')).toEqual(-17);
       });
     });
+    describe('createExpressionLink',()=>{
+      it('<....>builds link',()=>{
+        expect(createExpressionLink('up')).toEqual(
+          `../graph?g0.expr=up&g0.tab=1&g0.display_mode=${GraphDisplayMode.Lines}&g0.show_exemplars=0&g0.range_input=1h`
+        );
+      });
+      it('url-encodes PromQL',() =>{
+        expect(createExpressionLink('ALERTS{alertname="HighCPU"}')).toEqual(
+          `../graph?g0.expr=ALERTS%7Balertname%3D%22High%20CPU%22%7D&g0.tab=1&g0.display_mode=${GraphDisplayMode.Lines}&g0.show_exemplars=0&g0.range_input=1h`
+        );
+      });
+    });
   });
 });