diff --git a/src/lib/data-access/broker/broker.tsx b/src/lib/data-access/broker/broker.tsx
index 7a53390bd47ada65387a439a108abb1b367e0f79..dba17982f30d681be0d50dae82cf6afb21a18a22 100644
--- a/src/lib/data-access/broker/broker.tsx
+++ b/src/lib/data-access/broker/broker.tsx
@@ -7,6 +7,7 @@
 import { getEnvVariable } from '@/config';
 import { UseIsAuthorizedState } from '../store/authSlice';
 import { WsMessageBackend2Frontend, WsMessageBody, wsReturnKeyWithML } from 'ts-common';
+import { v4 as uuidv4 } from 'uuid';
 
 export type BrokerCallbackFunction = (data: any, status: string, routingKey?: string) => boolean | void;
 
@@ -197,7 +198,7 @@ export class Broker {
   public sendMessage(message: Omit<WsMessageBody, 'callID'>, callback?: BrokerCallbackFunction): void {
     console.debug('%cSending WS message: ', 'background: #222; color: #bada55', message);
 
-    const uuid = (Date.now() + Math.floor(Math.random() * 100)).toString();
+    const uuid = uuidv4();
     const fullMessage = {
       ...message,
       callID: uuid,
diff --git a/src/lib/data-access/store/visualizationSlice.ts b/src/lib/data-access/store/visualizationSlice.ts
index ed1138497d1a1e82ab9967dd69bda24d0c0b9c38..4bcb31f441964e8fb331f72e6dcdbb2c16769f8c 100644
--- a/src/lib/data-access/store/visualizationSlice.ts
+++ b/src/lib/data-access/store/visualizationSlice.ts
@@ -2,6 +2,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import type { RootState } from './store';
 import { VisualizationSettingsType } from '../../vis/common';
 import { isEqual } from 'lodash-es';
+import { v4 as uuidv4 } from 'uuid';
 
 export type VisStateSettings = VisualizationSettingsType[];
 export type VisState = {
@@ -14,12 +15,6 @@ export const initialState: VisState = {
   activeVisualizationIndex: -1,
   openVisualizationArray: [],
 };
-function generateUUID(): string {
-  if (typeof crypto?.randomUUID === 'function') {
-    return crypto.randomUUID();
-  }
-  return `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
-}
 
 export const visualizationSlice = createSlice({
   name: 'visualization',
@@ -51,7 +46,7 @@ export const visualizationSlice = createSlice({
       if (action.payload.activeVisualizationIndex !== undefined && !isEqual(action.payload, state)) {
         state.openVisualizationArray = (action.payload.openVisualizationArray || []).map(item => ({
           ...item,
-          uuid: item.uuid || generateUUID(),
+          uuid: item.uuid || uuidv4(),
         }));
         state.activeVisualizationIndex = Math.min(action.payload.activeVisualizationIndex, state.openVisualizationArray.length - 1);
       }
@@ -65,7 +60,7 @@ export const visualizationSlice = createSlice({
     addVisualization: (state, action: PayloadAction<VisualizationSettingsType>) => {
       const newItem = {
         ...action.payload,
-        uuid: action.payload.uuid || generateUUID(),
+        uuid: action.payload.uuid || uuidv4(),
       };
       state.openVisualizationArray.push(newItem);