diff --git a/apps/web/src/components/navbar/DatabaseManagement/forms/settings.tsx b/apps/web/src/components/navbar/DatabaseManagement/forms/settings.tsx
index eef51b9ed6db2de71a7e463ce97a1a9cd4feca93..233899f095f55b60ee2ab7c426d041f499910a6d 100644
--- a/apps/web/src/components/navbar/DatabaseManagement/forms/settings.tsx
+++ b/apps/web/src/components/navbar/DatabaseManagement/forms/settings.tsx
@@ -114,7 +114,7 @@ export const SettingsForm = (props: { onClose(): void; open: 'add' | 'update'; s
   return (
     <Dialog open={!!props.open} onClose={props.onClose} className="lg:min-w-[50rem]">
       <div className="flex justify-between align-center">
-        <h1 className="text-xl font-bold">{formTitle} Database Connection</h1>
+        <h2 className="text-xl font-bold">{formTitle} Database Connection</h2>
         <div>
           {sampleDataPanel === true ? (
             <Button variant="outline" label="Go back" onClick={() => setSampleDataPanel(false)} />
diff --git a/libs/shared/lib/components/Dialog.tsx b/libs/shared/lib/components/Dialog.tsx
index 0aecd77ccbf688a545fa9f106041ac9ed1df7c3d..75781e135187155ae552d737041d0b0aa9609768 100644
--- a/libs/shared/lib/components/Dialog.tsx
+++ b/libs/shared/lib/components/Dialog.tsx
@@ -16,13 +16,10 @@ export const Dialog = (props: DialogProps) => {
   }, [props.open]);
 
   return (
-    <dialog className={'fixed inset-0 z-10 overflow-y-auto rounded p-4'} ref={ref} onClose={() => props.onClose()}>
+    <dialog className={'fixed inset-0 z-10 overflow-y-auto rounded p-4 bg-light border'} ref={ref} onClose={() => props.onClose()}>
       <form method="dialog" className={'flex flex-col gap-4 ' + (props?.className ? props?.className : '')}>
         {props.children}
       </form>
-      {/* <form method="dialog" className=""> */}
-      {/* <button>close</button> */}
-      {/* </form> */}
     </dialog>
   );
 };
diff --git a/libs/shared/lib/schema/schema-utils/flow-utils.ts b/libs/shared/lib/schema/schema-utils/flow-utils.ts
index 3c72a06ab8e358a0419e774c3bc06838fe76a513..c7ff67e34ac05fbddb69bd004b03be9b8b86e833 100644
--- a/libs/shared/lib/schema/schema-utils/flow-utils.ts
+++ b/libs/shared/lib/schema/schema-utils/flow-utils.ts
@@ -4,7 +4,7 @@
  * © Copyright Utrecht University (Department of Information and Computing Sciences)
  */
 import { Position } from 'reactflow';
-import { BoundingBox } from '../../vis/common/Types'; // TODO: MOVE ELSEWHERE
+import { BoundingBox } from '../../vis/common'; // TODO: MOVE ELSEWHERE
 
 /** This is the interface to get the center of an edge */
 export interface GetCenterParams {
diff --git a/libs/shared/lib/vis/common/index.ts b/libs/shared/lib/vis/common/index.ts
index 4e326e2b47f4d80f252fa35beb9650051f6db6b7..fcb073fefcd6bebc8afd726f830e66828ebc5e90 100644
--- a/libs/shared/lib/vis/common/index.ts
+++ b/libs/shared/lib/vis/common/index.ts
@@ -1 +1 @@
-export type { VisualizationConfiguration, VISComponentType, VisualizationPropTypes } from './types';
+export * from './types';
diff --git a/libs/shared/lib/vis/common/types.ts b/libs/shared/lib/vis/common/types.ts
index 0a2de554bb2c2d523e071533a9d0724058e7f9ef..52e1513b2d4204b568e2486b652c0d2389fe2160 100644
--- a/libs/shared/lib/vis/common/types.ts
+++ b/libs/shared/lib/vis/common/types.ts
@@ -4,6 +4,7 @@ import { SchemaGraph } from '../../schema';
 import type { AppDispatch } from '../../data-access';
 import { FC } from 'react';
 import { Visualizations } from '../hooks';
+import { Edge, Node } from 'reactflow';
 
 export type VisualizationConfiguration = { [id: string]: any };
 
@@ -23,3 +24,76 @@ export type VisualizationPropTypes = {
   handleHover: (val: any) => void;
   handleSelect: (val: any) => void;
 };
+
+export type SchemaElements = {
+  nodes: Node[];
+  edges: Edge[];
+  selfEdges: Edge[];
+};
+
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface BoundingBox {
+  topLeft: Point;
+  bottomRight: Point;
+}
+
+export interface NodeQualityDataForEntities {
+  nodeCount: number;
+  attributeNullCount: number;
+  notConnectedNodeCount: number;
+  isAttributeDataIn: boolean; // is true when the data to display has arrived
+  onClickCloseButton: () => void;
+}
+
+export interface NodeQualityDataForRelations {
+  nodeCount: number;
+  attributeNullCount: number;
+  fromRatio: number; // the ratio of from-entity nodes to nodes that have this relation
+  toRatio: number; // the ratio of to-entity nodes to nodes that have this relation
+  isAttributeDataIn: boolean; // is true when the data to display has arrived
+  onClickCloseButton: () => void;
+}
+
+export interface NodeQualityPopupNode extends Node {
+  data: NodeQualityDataForEntities | NodeQualityDataForRelations;
+  nodeID: string; //ID of the node for which the popup is
+}
+
+export interface AttributeAnalyticsData {
+  nodeType: NodeType;
+  nodeID: string;
+  attributes: AttributeWithData[];
+  isAttributeDataIn: boolean; // is true when the data to display has arrived
+  onClickCloseButton: () => void;
+  onClickPlaceInQueryBuilderButton: (name: string, type: string) => void;
+  searchForAttributes: (id: string, searchbarValue: string) => void;
+  resetAttributeFilters: (id: string) => void;
+  applyAttributeFilters: (id: string, category: AttributeCategory, predicate: string, percentage: number) => void;
+}
+
+export enum AttributeCategory {
+  categorical = 'Categorical',
+  numerical = 'Numerical',
+  other = 'Other',
+  undefined = 'undefined',
+}
+
+export enum NodeType {
+  entity = 'entity',
+  relation = 'relation',
+}
+
+export interface AttributeAnalyticsPopupMenuNode extends Node {
+  nodeID: string; //ID of the node for which the popup is
+  data: AttributeAnalyticsData;
+}
+
+export type AttributeWithData = {
+  attribute: any;
+  category: AttributeCategory;
+  nullAmount: number;
+};
diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLMachineLearning.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLMachineLearning.tsx
index f180fe776c7d40ec3ab036c512aabbcfd3ae11c4..6ac50ebe2f9a0021e1b73f8b772b5aa66223464e 100644
--- a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLMachineLearning.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLMachineLearning.tsx
@@ -1,6 +1,4 @@
 import { useState } from 'react';
-import { AttributeData, NodeAttributeData } from '../../../common/InputDataTypes';
-import { AttributeCategory } from '../../../common/Types';
 import { GraphType, LinkType, NodeType } from '../types';
 import { ML } from '../../../../data-access/store/mlSlice';