diff --git a/src/app/utils/fakeData.ts b/src/app/utils/fakeData.ts
index 9f6cec002..f7e294bdb 100644
--- a/src/app/utils/fakeData.ts
+++ b/src/app/utils/fakeData.ts
@@ -117,6 +117,7 @@ export const fakeAARecording: ActiveRecording = {
   toDisk: false,
   maxSize: 1048576,
   maxAge: 0,
+  remoteId: 567567,
 };
 
 export const fakeEvaluations: AnalysisResult[] = [
@@ -306,7 +307,7 @@ class FakeApiService extends ApiService {
     return of(true);
   }
 
-  uploadActiveRecordingToGrafana(_recordingName: string): Observable<boolean> {
+  uploadActiveRecordingToGrafana(_remoteId: number): Observable<boolean> {
     return of(true);
   }
 
@@ -379,7 +380,7 @@ class FakeApiService extends ApiService {
     });
   }
 
-  deleteRecording(_recordingName: string): Observable<boolean> {
+  deleteRecording(_remoteId: number): Observable<boolean> {
     return of(true);
   }
 }
diff --git a/src/mirage/index.ts b/src/mirage/index.ts
index d136146d5..a92485ce4 100644
--- a/src/mirage/index.ts
+++ b/src/mirage/index.ts
@@ -81,14 +81,7 @@ export const startMirage = ({ environment = 'development' } = {}) => {
           200,
           {},
           {
-            meta: {
-              status: 'OK',
-            },
-            data: {
-              result: {
-                username: environment,
-              },
-            },
+            username: environment,
           },
         );
       });
@@ -119,11 +112,7 @@ export const startMirage = ({ environment = 'development' } = {}) => {
             message: { event: { serviceRef: target, kind: 'FOUND' } },
           }),
         );
-        return {
-          data: {
-            result: target,
-          },
-        };
+        return target;
       });
       this.get('api/v4/targets', (schema) => schema.all(Resource.TARGET).models);
       this.get('api/v4/discovery', (schema) => {
@@ -191,12 +180,11 @@ export const startMirage = ({ environment = 'development' } = {}) => {
         // Note: MirageJS will fake serialize FormData (i.e. FormData object is returned when accessing request.requestBody)
         const attrs = request.requestBody as any;
 
+        const remoteId = Math.floor(Math.random() * 1000000);
         const recording = schema.create(Resource.RECORDING, {
           // id will generated by Mirage (i.e. increment integers)
           downloadUrl: '',
-          reportUrl: `api/beta/reports/${encodeURIComponent(request.params.targetId)}/${encodeURIComponent(
-            attrs.get('recordingName'),
-          )}`,
+          reportUrl: `api/v4/targets/${request.params.targetId}/reports/${remoteId}`,
           name: attrs.get('recordingName'),
           state: 'RUNNING',
           startTime: +Date.now(),
@@ -218,6 +206,7 @@ export const startMirage = ({ environment = 'development' } = {}) => {
               },
             ],
           },
+          remoteId,
         });
         websocket.send(
           JSON.stringify({
@@ -234,9 +223,8 @@ export const startMirage = ({ environment = 'development' } = {}) => {
         return recording;
       });
       this.get('api/v4/targets/:targetId/recordings', (schema) => schema.all(Resource.RECORDING).models);
-      this.delete('api/v4/targets/:targetId/recordings/:recordingName', (schema, request) => {
-        const recordingName = request.params.recordingName;
-        const recording = schema.findBy(Resource.RECORDING, { name: recordingName });
+      this.delete('api/v4/targets/:targetId/recordings/:remoteId', (schema, request) => {
+        const recording = schema.findBy(Resource.RECORDING, { remoteId: request.params.remoteId });
 
         if (!recording) {
           return new Response(404);
@@ -258,11 +246,10 @@ export const startMirage = ({ environment = 'development' } = {}) => {
         websocket.send(JSON.stringify(msg));
         return new Response(200);
       });
-      this.patch('api/v4/targets/:targetId/recordings/:recordingName', (schema, request) => {
+      this.patch('api/v4/targets/:targetId/recordings/:remoteId', (schema, request) => {
         const body = request.requestBody;
-        const recordingName = request.params.recordingName;
-        const target = schema.findBy(Resource.TARGET, { connectUrl: request.params.targetId });
-        const recording = schema.findBy(Resource.RECORDING, { name: recordingName });
+        const target = schema.findBy(Resource.TARGET, { id: request.params.targetId });
+        const recording = schema.findBy(Resource.RECORDING, { remoteId: request.params.remoteId });
 
         if (!recording || !target) {
           return new Response(404);
@@ -312,7 +299,49 @@ export const startMirage = ({ environment = 'development' } = {}) => {
         }
         return new Response(200);
       });
-      this.get('api/beta/reports/:targetId/:recordingName', () => {
+      this.post('api/v4/targets/:targetId/snapshot', (schema, request) => {
+        const remoteId = Math.floor(Math.random() * 1000000);
+        const recording = schema.create(Resource.RECORDING, {
+          // id will generated by Mirage (i.e. increment integers)
+          downloadUrl: '',
+          reportUrl: `api/v4/targets/${request.params.targetId}/reports/${remoteId}`,
+          name: `snapshot-${remoteId}`,
+          state: 'STOPPED',
+          startTime: +Date.now(),
+          duration: Math.floor(Math.random() * 1000),
+          continuous: false,
+          toDisk: true,
+          maxSize: 0,
+          maxAge: 0,
+          metadata: {
+            labels: [
+              {
+                key: 'template.type',
+                value: 'TARGET',
+              },
+              {
+                key: 'template.name',
+                value: 'Demo_Template',
+              },
+            ],
+          },
+          remoteId,
+        });
+        websocket.send(
+          JSON.stringify({
+            meta: {
+              category: 'ActiveRecordingCreated',
+              type: { type: 'application', subType: 'json' },
+            },
+            message: {
+              target: request.params.targetId,
+              recording,
+            },
+          }),
+        );
+        return recording;
+      });
+      this.get('api/v4/targets/:targetId/reports/:remoteId', () => {
         return new Response(
           200,
           {},
@@ -388,7 +417,7 @@ export const startMirage = ({ environment = 'development' } = {}) => {
           description: 'The configuration of the garbage collected heap',
         },
       ]);
-      this.get('api/v4/targets/:targetId/templates', () => [
+      this.get('api/v4/targets/:targetId/event_templates', () => [
         {
           name: 'Demo Template',
           provider: 'Demo',
@@ -397,17 +426,14 @@ export const startMirage = ({ environment = 'development' } = {}) => {
         },
       ]);
       this.get('api/v4/probes', () => []);
-      this.post('api/beta/matchExpressions', (_, request) => {
+      this.get('api/v4/targets/:targetId/probes', () => []);
+      this.post('api/v4/matchExpressions', (_, request) => {
         const attr = JSON.parse(request.requestBody);
         if (!attr.matchExpression || !attr.targets) {
           return new Response(400);
         }
         return {
-          data: {
-            result: {
-              targets: attr.targets,
-            },
-          },
+          targets: attr.targets,
         };
       });
       this.post('api/v4/rules', (schema, request) => {
@@ -421,15 +447,9 @@ export const startMirage = ({ environment = 'development' } = {}) => {
           message: rule,
         };
         websocket.send(JSON.stringify(msg));
-        return {
-          data: {
-            result: rule,
-          },
-        };
+        return rule;
       });
-      this.get('api/v4/rules', (schema) => ({
-        data: { result: schema.all(Resource.RULE).models },
-      }));
+      this.get('api/v4/rules', (schema) => schema.all(Resource.RULE).models);
       this.patch('api/v4/rules/:ruleName', (schema, request) => {
         const ruleName = request.params.ruleName;
         const patch = JSON.parse(request.requestBody);
@@ -488,8 +508,8 @@ export const startMirage = ({ environment = 'development' } = {}) => {
         );
         return new Response(201);
       });
-      this.get('api/v4/credentials', (schema) => ({ data: { result: schema.all(Resource.CREDENTIAL).models } }));
-      this.get('api/v4/credentials/:id', () => ({ data: { result: { matchExpression: '', targets: [] } } }));
+      this.get('api/v4/credentials', (schema) => schema.all(Resource.CREDENTIAL).models);
+      this.get('api/v4/credentials/:id', () => ({ matchExpression: '', targets: [] }));
       this.post('api/v4/graphql', (schema, request) => {
         const body = JSON.parse(request.requestBody);
         const query = body.query.trim();