diff --git a/apps/graphpolaris/src/app/app.tsx b/apps/graphpolaris/src/app/app.tsx
index c1255e7dd85f949fff1a5c8b4ff2c522d86e24b9..6bb0f1c796695db2ce185a8860712db4ae9ac632 100644
--- a/apps/graphpolaris/src/app/app.tsx
+++ b/apps/graphpolaris/src/app/app.tsx
@@ -2,45 +2,10 @@
 import {
   assignNewGraphQueryResult,
   useAppDispatch,
-  useGraphQueryResult,
 } from '@graphpolaris/shared/data-access/store';
-import React, { useEffect } from 'react';
-import ReactJSONView from 'react-json-view';
 import GridLayout from 'react-grid-layout';
 import Panel from '../web/components/panels/Panel';
-
-const RawJSONVis = React.memo(() => {
-  const graphQueryResult = useGraphQueryResult();
-  console.log('update rawjson');
-
-  useEffect(() => {
-    console.log('update rawjson useEffect');
-  }, [graphQueryResult]);
-
-  useEffect(() => {
-    return () => {
-      console.log('unloaded RawJSONVis');
-    };
-  }, []);
-
-  return (
-    <div style={{ overflowY: 'auto' }}>
-      <div
-        style={{
-          marginTop: '40px',
-          paddingLeft: '30px',
-        }}
-      >
-        <ReactJSONView
-          src={graphQueryResult}
-          collapsed={1}
-          quotesOnKeys={false}
-          displayDataTypes={false}
-        />
-      </div>
-    </div>
-  );
-});
+import { RawJSONVis } from './raw-jsonvis/raw-jsonvis';
 
 export function App() {
   const dispatch = useAppDispatch();
diff --git a/apps/graphpolaris/src/app/raw-jsonvis/raw-jsonvis.module.scss b/apps/graphpolaris/src/app/raw-jsonvis/raw-jsonvis.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/apps/graphpolaris/src/app/raw-jsonvis/raw-jsonvis.spec.tsx b/apps/graphpolaris/src/app/raw-jsonvis/raw-jsonvis.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ec4c0a8e85966a245b9ff5c8ae0fe6d06e42ed92
--- /dev/null
+++ b/apps/graphpolaris/src/app/raw-jsonvis/raw-jsonvis.spec.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import RawJSONVis from './raw-jsonvis';
+
+describe('RawJSONVis', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<RawJSONVis />);
+    expect(baseElement).toBeTruthy();
+  });
+});
diff --git a/apps/graphpolaris/src/app/raw-jsonvis/raw-jsonvis.tsx b/apps/graphpolaris/src/app/raw-jsonvis/raw-jsonvis.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2a87441e8fdc71d567c1a9bc4f82b02989f9685f
--- /dev/null
+++ b/apps/graphpolaris/src/app/raw-jsonvis/raw-jsonvis.tsx
@@ -0,0 +1,40 @@
+import { useGraphQueryResult } from '@graphpolaris/shared/data-access/store';
+import React, { useEffect } from 'react';
+import ReactJSONView from 'react-json-view';
+import './raw-jsonvis.module.scss';
+
+/* eslint-disable-next-line */
+export interface RawJSONVisProps {}
+
+export const RawJSONVis = React.memo((props: RawJSONVisProps) => {
+  const graphQueryResult = useGraphQueryResult();
+  console.log('update rawjson');
+
+  useEffect(() => {
+    console.log('update rawjson useEffect');
+  }, [graphQueryResult]);
+
+  useEffect(() => {
+    return () => {
+      console.log('unloaded RawJSONVis');
+    };
+  }, []);
+
+  return (
+    <div style={{ overflowY: 'auto' }}>
+      <div
+        style={{
+          marginTop: '40px',
+          paddingLeft: '30px',
+        }}
+      >
+        <ReactJSONView
+          src={graphQueryResult}
+          collapsed={1}
+          quotesOnKeys={false}
+          displayDataTypes={false}
+        />
+      </div>
+    </div>
+  );
+});