diff --git a/package.json b/package.json
index fc8332f..65441ab 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,6 @@
 		"prepare": "husky install",
 		"generate": "python scripts/generate.py",
 		"g": "python scripts/generate.py",
-		"todo": "python scripts/todo.py",
 		"comment:check": "python scripts/check_comment.py",
 		"backend:check": "python scripts/check_backend.py",
 		"backend:create": "npm run backend:create:tables",
diff --git a/src/components/DocBaseOverview/DocBaseOverview.tsx b/src/components/DocBaseOverview/DocBaseOverview.tsx
index 2e54735..c84a5e8 100644
--- a/src/components/DocBaseOverview/DocBaseOverview.tsx
+++ b/src/components/DocBaseOverview/DocBaseOverview.tsx
@@ -5,7 +5,10 @@ import './DocBaseOverview.scss';
 import APIService from '../../utils/ApiService';
 import MyDocument from '../../types/MyDocument';
 import { Link } from 'react-router-dom';
-import { useLoadDocbaseTask } from '../../providers/DocBaseTaskProvider';
+import {
+	useLoadDocbaseTask,
+	useStartInteractiveTablePopulation,
+} from '../../providers/DocBaseTaskProvider';
 import {
 	useShowChoiceNotification,
 	useShowNotification,
@@ -29,6 +32,8 @@ function DocBaseOverview({ organizationProp }: Props) {
 	const showNotification = useShowNotification();
 	const getOrganizations = useGetOrganizations();
 	const loadDocbaseTask = useLoadDocbaseTask();
+	const startDocBaseInteractiveTablePopulation =
+		useStartInteractiveTablePopulation();
 
 	useEffect(() => {
 		APIService.getOrganizationNames().then((orgs) => {
@@ -66,6 +71,10 @@ function DocBaseOverview({ organizationProp }: Props) {
 		loadDocbaseTask(selectedOrgID, document.name);
 	};
 
+	const startInteractiveTablePopulation = (document: MyDocument) => {
+		startDocBaseInteractiveTablePopulation(selectedOrgID, document.name);
+	};
+
 	const removeDocument = (document: MyDocument) => {
 		showChoiceNotification(
 			'Delete DocBase',
@@ -168,6 +177,14 @@ function DocBaseOverview({ organizationProp }: Props) {
 							>
 								View DocBase
 							</Icon>
+							<Icon
+								cls="bi bi-check-square icon"
+								onClicked={() => {
+									startInteractiveTablePopulation(docBase);
+								}}
+							>
+								Start interactive table population
+							</Icon>
 							<Icon
 								cls="bi bi-x-circle"
 								onClicked={() => {
diff --git a/src/components/DocbaseViewer/DocbaseViewer.tsx b/src/components/DocbaseViewer/DocbaseViewer.tsx
index 3dd8aac..71b0ff6 100644
--- a/src/components/DocbaseViewer/DocbaseViewer.tsx
+++ b/src/components/DocbaseViewer/DocbaseViewer.tsx
@@ -47,18 +47,15 @@ function DocbaseViewer({ docBase, onClose }: Props) {
 						onClose();
 					}}
 				></AttributeAdder>
-				{/* <ul className="ver">
-					{docBase.attributes.map((attribute, index) => {
-						return (
-							<li key={index}>
-								<b>{attribute}</b>
-							</li>
-						);
-					})}
-				</ul> */}
 				<h2>Documents</h2>
 				{docBase.docs.map((doc, index) => {
-					return <NuggetDocumentViewer key={index} doc={doc} />;
+					return (
+						<NuggetDocumentViewer
+							key={index}
+							doc={doc}
+							docBase={docBase}
+						/>
+					);
 				})}
 				<button className="btn mb ml mt" onClick={onClose}>
 					Close
diff --git a/src/components/InteractiveDocBaseViewer/InteractiveDocBaseViewer.scss b/src/components/InteractiveDocBaseViewer/InteractiveDocBaseViewer.scss
new file mode 100644
index 0000000..452155b
--- /dev/null
+++ b/src/components/InteractiveDocBaseViewer/InteractiveDocBaseViewer.scss
@@ -0,0 +1,53 @@
+.InteractiveDocBaseViewer {
+	width: 90%;
+	height: 80%;
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	background-color: var(--bg-color);
+	overflow-y: scroll;
+	border-radius: 15px;
+	border: 2px solid var(--text-color);
+	z-index: 999;
+	padding: 40px;
+	.buffer {
+		height: 150px;
+		width: 10px;
+	}
+}
+
+.closeBtn {
+	position: fixed;
+	top: 9%;
+	right: 5%;
+	cursor: pointer;
+	z-index: 1000;
+	font-size: 30px;
+	cursor: pointer;
+	color: var(--text-color);
+	font-weight: bold;
+	&:hover {
+		scale: 1.15;
+	}
+}
+
+.infobar {
+	position: fixed;
+	left: 50%;
+	top: 85%;
+
+	transform: translateX(-50%);
+	background-color: var(--btn-color);
+	z-index: 1000;
+	width: 90%;
+	border-radius: 15px;
+	border: 2px solid var(--text-color);
+	padding-left: 20px;
+	padding-right: 20px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	box-shadow: 0px 0px 10px 10px #00000079;
+	font-size: 20px;
+}
diff --git a/src/components/InteractiveDocBaseViewer/InteractiveDocBaseViewer.tsx b/src/components/InteractiveDocBaseViewer/InteractiveDocBaseViewer.tsx
new file mode 100644
index 0000000..3c9f06e
--- /dev/null
+++ b/src/components/InteractiveDocBaseViewer/InteractiveDocBaseViewer.tsx
@@ -0,0 +1,51 @@
+import DocBase from '../../types/DocBase';
+import NuggetDocumentViewer from '../NuggetViewer/NuggetDocumentViewer';
+import './InteractiveDocBaseViewer.scss';
+
+interface Props {
+	docBase: DocBase;
+	onClose: () => void;
+}
+
+/**
+ * A popup that displays a DocBases
+ * @param docBase The docbase to view
+ */
+function InteractiveDocBaseViewer({ docBase }: Props) {
+	return (
+		<>
+			<div
+				className="background"
+				style={{
+					zIndex: 100,
+				}}
+			></div>
+
+			<div className="InteractiveDocBaseViewer">
+				<h1>Interactive Table Population Editor</h1>
+				<h2>
+					DocBase: <i>{docBase.name}</i>
+				</h2>
+
+				<h2>Documents</h2>
+				{docBase.docs.map((doc, index) => {
+					return (
+						<NuggetDocumentViewer
+							key={index}
+							doc={doc}
+							interactive={true}
+							docBase={docBase}
+						/>
+					);
+				})}
+				<div className="buffer"></div>
+			</div>
+			<div className="infobar">
+				<p>
+					<i>Attribute</i>: <b>{docBase.attributes.join(', ')}</b>
+				</p>
+			</div>
+		</>
+	);
+}
+export default InteractiveDocBaseViewer;
diff --git a/src/components/NuggetText/NuggetText.scss b/src/components/NuggetText/NuggetText.scss
index f0d67d6..7b2d6a5 100644
--- a/src/components/NuggetText/NuggetText.scss
+++ b/src/components/NuggetText/NuggetText.scss
@@ -5,7 +5,7 @@
 }
 
 .highlighted-unselected {
-	background-color: rgba(255, 255, 0, 0.4);
+	background-color: rgba(255, 255, 0, 0.2);
 	color: black;
 	border-radius: 5px;
 }
@@ -14,7 +14,7 @@
 	overflow-x: scroll;
 }
 .nugget {
-	background-color: rgba(255, 255, 0, 0.4);
+	background-color: rgba(255, 255, 0, 0.2);
 	color: black;
 	border-radius: 5px;
 	padding: 5px;
@@ -30,8 +30,21 @@
 	background-color: rgb(255, 255, 0);
 }
 
+.attribute-label {
+	order: 1;
+	font-size: 0.8rem;
+	font-weight: bold;
+	background-color: red;
+}
+
+.ghf {
+	order: 2;
+	align-self: baseline; // Add this line
+}
+
 pre {
-	font-size: 1rem;
+	font-size: 1.2rem;
+	line-height: 2;
 	padding-left: 20px;
 	padding-right: 20px;
 	padding-top: 10px;
diff --git a/src/components/NuggetText/NuggetText.tsx b/src/components/NuggetText/NuggetText.tsx
index 47df475..84c84be 100644
--- a/src/components/NuggetText/NuggetText.tsx
+++ b/src/components/NuggetText/NuggetText.tsx
@@ -2,9 +2,12 @@ import React from 'react';
 import NuggetDocument from '../../types/NuggetDocument';
 import './NuggetText.scss';
 import Nugget from '../../types/Nugget';
+import Icon from '../Icon/Icon';
+import Logger from '../../utils/Logger';
 
 interface Props {
 	doc: NuggetDocument;
+	interactive?: boolean;
 }
 
 /**
@@ -12,7 +15,7 @@ interface Props {
  * @param param0 The nuggget document to display
  * @returns
  */
-function NuggetText({ doc }: Props) {
+function NuggetText({ doc, interactive = false }: Props) {
 	const [selectedNugget, setSelectedNugget] = React.useState<
 		Nugget | undefined
 	>(undefined);
@@ -44,17 +47,53 @@ function NuggetText({ doc }: Props) {
 					index > 0 ? normalizedIntervals[index - 1].end : 0,
 					start
 				)}
-				<span
-					className={
-						selectedNugget === undefined
-							? 'highlighted'
-							: selectedNugget.startChar == start &&
-							    selectedNugget.endChar == end
-							  ? 'highlighted'
-							  : 'highlighted-unselected'
-					}
-				>
-					{text.substring(start, end)}
+				<span className="box">
+					{/* 					<span className="attribute-label">att</span>
+					 */}
+					<span
+						className={
+							selectedNugget === undefined
+								? 'ghf highlighted'
+								: selectedNugget.startChar == start &&
+								    selectedNugget.endChar == end
+								  ? 'ghf highlighted'
+								  : 'ghf highlighted-unselected'
+						}
+					>
+						<span>{text.substring(start, end)}</span>
+						{interactive && (
+							<>
+								<Icon
+									style={{
+										color: 'black',
+										fontSize: '1.2rem',
+										marginRight: '5px',
+										paddingRight: '10px',
+									}}
+									cls="bi bi-hand-thumbs-up icon ml"
+									onClicked={() => {
+										Logger.log('Confirm Nugget');
+										alert('Not implemented');
+									}}
+								>
+									Confirm Nugget
+								</Icon>
+								{/* <Icon
+									style={{
+										color: 'black',
+										fontSize: '1.2rem',
+										paddingRight: '10px',
+									}}
+									cls="bi bi-hand-thumbs-down icon"
+									onClicked={() => {
+										Logger.log('Decline Nugget');
+									}}
+								>
+									Decline Nugget
+								</Icon> */}
+							</>
+						)}
+					</span>
 				</span>
 			</React.Fragment>
 		))
diff --git a/src/components/NuggetViewer/NuggetDocumentViewer.tsx b/src/components/NuggetViewer/NuggetDocumentViewer.tsx
index 0bb9dcc..b9a51ae 100644
--- a/src/components/NuggetViewer/NuggetDocumentViewer.tsx
+++ b/src/components/NuggetViewer/NuggetDocumentViewer.tsx
@@ -1,24 +1,50 @@
 import NuggetDocument from '../../types/NuggetDocument';
+import Icon from '../Icon/Icon';
 import NuggetText from '../NuggetText/NuggetText';
 import './NuggetDocumentViewer.scss';
+import { useGetOrderedNuggets } from '../../providers/DocBaseTaskProvider';
+import DocBase from '../../types/DocBase';
 
 interface Props {
+	docBase: DocBase;
 	doc: NuggetDocument;
+	interactive?: boolean;
 }
 
 /**
  * This displays a NuggetDocument
  * @param doc The NuggetDocument to display
  */
-function NuggetDocumentViewer({ doc }: Props) {
+function NuggetDocumentViewer({ docBase, doc, interactive = false }: Props) {
+	const getOrderedNuggets = useGetOrderedNuggets();
+
 	return (
 		<div className="ver">
 			<p>
 				<b>
 					Document: <i>{doc.name}</i>
 				</b>
+				{!interactive && (
+					<Icon
+						cls="bi bi-info-circle ml"
+						style={{
+							//TODO
+							display: 'none',
+						}}
+						onClicked={() => {
+							getOrderedNuggets(
+								docBase.organizationId,
+								docBase.name,
+								doc.name,
+								doc.content
+							);
+						}}
+					>
+						Get more information about this document
+					</Icon>
+				)}
 			</p>
-			<NuggetText doc={doc} />
+			<NuggetText doc={doc} interactive={interactive} />
 		</div>
 	);
 }
diff --git a/src/providers/DocBaseTaskProvider.tsx b/src/providers/DocBaseTaskProvider.tsx
index ef1b5ec..10f2015 100644
--- a/src/providers/DocBaseTaskProvider.tsx
+++ b/src/providers/DocBaseTaskProvider.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useEffect } from 'react';
 import DocbaseViewer from '../components/DocbaseViewer/DocbaseViewer';
 import DocBase from '../types/DocBase';
 import {
@@ -10,6 +10,7 @@ import APIService from '../utils/ApiService';
 import { useShowNotification } from './NotificationProvider';
 import Logger from '../utils/Logger';
 import { MyAudio, usePlayAudio } from './AudioProvider';
+import InteractiveDocBaseViewer from '../components/InteractiveDocBaseViewer/InteractiveDocBaseViewer';
 
 const DocBaseTaskContext = React.createContext({
 	isDocbaseTaskRunning: (): boolean => {
@@ -27,6 +28,16 @@ const DocBaseTaskContext = React.createContext({
 		_attributes: string[]
 	) => {},
 	loadDocbaseTask: (_organizationId: number, _baseName: string) => {},
+	startInteractiveTablePopulation: (
+		_organizationId: number,
+		_baseName: string
+	) => {},
+	getOrderedNuggets: (
+		_organizationId: number,
+		_baseName: string,
+		_documentName: string,
+		_documentContent: string
+	) => {},
 });
 
 // eslint-disable-next-line react-refresh/only-export-components
@@ -73,6 +84,28 @@ export function useLoadDocbaseTask() {
 	return context.loadDocbaseTask;
 }
 
+// eslint-disable-next-line react-refresh/only-export-components
+export function useStartInteractiveTablePopulation() {
+	const context = React.useContext(DocBaseTaskContext);
+	if (!context) {
+		throw new Error(
+			'useStartInteractiveTablePopulation must be used within a DocBaseTaskProvider'
+		);
+	}
+	return context.startInteractiveTablePopulation;
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function useGetOrderedNuggets() {
+	const context = React.useContext(DocBaseTaskContext);
+	if (!context) {
+		throw new Error(
+			'useGetOrderedNuggets must be used within a DocBaseTaskProvider'
+		);
+	}
+	return context.getOrderedNuggets;
+}
+
 interface Props {
 	children: ReactNode;
 }
@@ -89,10 +122,30 @@ export function DocBaseTaskProvider({ children }: Props) {
 	const intervalTime = 1000;
 
 	const [isRunning, setIsRunning] = React.useState(false);
+	const [useInteractiveViewer, setUseInteractiveViewer] =
+		React.useState(false);
 	const [docBase, setDocBase] = React.useState<DocBase | undefined>(
 		undefined
 	);
 
+	useEffect(() => {
+		Logger.log('DocBaseTaskProvider mounted');
+		const type = sessionStorage.getItem('docbasetask-type');
+		const taskId = sessionStorage.getItem('docbaseId');
+		if (
+			type === 'interactiveTablePopulation' &&
+			taskId !== null &&
+			!isRunning
+		) {
+			const organizationId = parseInt(
+				sessionStorage.getItem('organizationId') || '0'
+			);
+			const baseName = sessionStorage.getItem('docbaseName') || '';
+			startInteractiveTablePopulation(organizationId, baseName, taskId);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
 	const createDocbaseTask = async (
 		organizationId: number,
 		baseName: string,
@@ -134,7 +187,6 @@ export function DocBaseTaskProvider({ children }: Props) {
 		setIsRunning(true);
 
 		const updateInterval = setInterval(() => {
-			// TODO use type
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any
 			APIService.getTaskStatus(taskId).then((res): any => {
 				Logger.log(res);
@@ -152,6 +204,8 @@ export function DocBaseTaskProvider({ children }: Props) {
 					);
 					sessionStorage.removeItem('docbaseId');
 					setDocBase(undefined);
+					setUseInteractiveViewer(false);
+
 					setIsRunning(false);
 					clearInterval(updateInterval);
 					return;
@@ -167,24 +221,31 @@ export function DocBaseTaskProvider({ children }: Props) {
 						organizationId,
 						attributes
 					);
-					for (const nugget of res.meta.document_base_to_ui.msg
-						.nuggets) {
-						try {
+					try {
+						const nuggets =
+							res.meta.document_base_to_ui.msg.nuggets ||
+							res.meta.document_base_to_ui.nuggets;
+
+						for (const nugget of nuggets) {
 							docBase.addNugget(
 								nugget.document.name,
 								nugget.document.text,
 								nugget.start_char,
 								nugget.end_char
 							);
-						} catch (error) {
-							showNotification(
-								'Error',
-								'Something went wrong translating the nuggets.'
-							);
 						}
+					} catch (error) {
+						Logger.error(error);
+
+						showNotification(
+							'Error',
+							'Something went wrong transforming the nuggets.'
+						);
 					}
 					sessionStorage.removeItem('docbaseId');
 					setDocBase(docBase);
+					setUseInteractiveViewer(false);
+
 					setIsRunning(false);
 					clearInterval(updateInterval);
 					return;
@@ -192,7 +253,7 @@ export function DocBaseTaskProvider({ children }: Props) {
 
 				let info = res.state;
 
-				if (res.meta.status !== undefined) {
+				if (res.meta.status !== undefined && res.meta.status !== '') {
 					info = res.meta.status;
 				}
 
@@ -267,6 +328,8 @@ export function DocBaseTaskProvider({ children }: Props) {
 					);
 					sessionStorage.removeItem('docbaseId');
 					setDocBase(undefined);
+					setUseInteractiveViewer(false);
+
 					setIsRunning(false);
 					clearInterval(updateInterval);
 					return;
@@ -300,6 +363,8 @@ export function DocBaseTaskProvider({ children }: Props) {
 					}
 					sessionStorage.removeItem('docbaseId');
 					setDocBase(docBase);
+					setUseInteractiveViewer(false);
+
 					setIsRunning(false);
 					clearInterval(updateInterval);
 					return;
@@ -379,6 +444,8 @@ export function DocBaseTaskProvider({ children }: Props) {
 					);
 					sessionStorage.removeItem('docbaseId');
 					setDocBase(undefined);
+					setUseInteractiveViewer(false);
+
 					setIsRunning(false);
 					clearInterval(updateInterval);
 					return;
@@ -387,30 +454,35 @@ export function DocBaseTaskProvider({ children }: Props) {
 				if (res.state === 'SUCCESS') {
 					setLoadingScreenLock(false);
 					setLoadingScreen(false);
+					Logger.log(res);
 
 					const docBase = new DocBase(
 						baseName,
 						organizationId,
 						res.meta.document_base_to_ui.msg.attributes ?? []
 					);
-					for (const nugget of res.meta.document_base_to_ui.msg
-						.nuggets) {
-						try {
+					try {
+						Logger.log(res.meta.document_base_to_ui.msg.nuggets);
+						for (const nugget of res.meta.document_base_to_ui.msg
+							.nuggets) {
 							docBase.addNugget(
 								nugget.document.name,
 								nugget.document.text,
 								nugget.start_char,
 								nugget.end_char
 							);
-						} catch (error) {
-							showNotification(
-								'Error',
-								'Something went wrong translating the nuggets.'
-							);
 						}
+					} catch (error) {
+						Logger.error(error);
+						showNotification(
+							'Error',
+							'Something went wrong translating the nuggets.'
+						);
 					}
 					sessionStorage.removeItem('docbaseId');
 					setDocBase(docBase);
+					setUseInteractiveViewer(false);
+
 					setIsRunning(false);
 					clearInterval(updateInterval);
 					return;
@@ -438,6 +510,264 @@ export function DocBaseTaskProvider({ children }: Props) {
 		const updateInterval = setInterval(updateBody, intervalTime);
 	};
 
+	const startInteractiveTablePopulation = async (
+		organizationId: number,
+		baseName: string,
+		providedTaskId: string | undefined = undefined
+	) => {
+		if (isRunning) {
+			Logger.warn(
+				'Docbase task is already running, cannot start another'
+			);
+			return;
+		}
+
+		let taskId: string | undefined;
+		if (providedTaskId !== undefined) {
+			taskId = providedTaskId;
+		} else {
+			// start the task
+			taskId = await APIService.interactiveTablePopulation(
+				organizationId,
+				baseName
+			);
+		}
+
+		if (taskId == undefined) {
+			showNotification('Error', 'Failed to load Docbase ' + baseName);
+			return;
+		}
+
+		Logger.log('Task: Start interactive table population ' + baseName);
+		Logger.log('Task ID: ' + taskId);
+
+		sessionStorage.setItem(
+			'docbasetask-type',
+			'interactiveTablePopulation'
+		);
+		sessionStorage.setItem('docbaseId', taskId);
+		sessionStorage.setItem('docbaseName', baseName);
+		sessionStorage.setItem('organizationId', organizationId.toString());
+		setLoadingScreen(
+			true,
+			'Loading Docbase ' + baseName + '...',
+			'Please wait...',
+			taskId
+		);
+
+		setLoadingScreenLock(true);
+		setIsRunning(true);
+
+		const updateBody = () => {
+			if (taskId == undefined) {
+				return;
+			}
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			APIService.getTaskStatus(taskId).then((res): any => {
+				Logger.log(res);
+				if (
+					res == undefined ||
+					res.state.toUpperCase().trim() === 'FAILURE'
+				) {
+					setLoadingScreenLock(false);
+					setLoadingScreen(false);
+					playAudio(MyAudio.ERROR);
+
+					showNotification(
+						'Session Expired',
+						'Your session has expired. You can rerun the task.'
+					);
+					sessionStorage.removeItem('docbaseId');
+					setDocBase(undefined);
+					setUseInteractiveViewer(false);
+
+					setIsRunning(false);
+					clearInterval(updateInterval);
+					return;
+				} else if (
+					res.meta.feedback_request_to_ui !== undefined &&
+					res.meta.feedback_request_to_ui.attribute !== undefined
+				) {
+					setLoadingScreenLock(false);
+					setLoadingScreen(false);
+					Logger.log(res);
+
+					const att = res.meta.feedback_request_to_ui.attribute.name;
+					let attList: string[] = [];
+					if (att) {
+						attList = [att];
+					}
+
+					const docBase = new DocBase(
+						baseName,
+						organizationId,
+						attList
+					);
+					try {
+						Logger.log(res.meta.document_base_to_ui.msg.nuggets);
+						for (const nugget of res.meta.document_base_to_ui.msg
+							.nuggets) {
+							docBase.addNugget(
+								nugget.document.name,
+								nugget.document.text,
+								nugget.start_char,
+								nugget.end_char
+							);
+						}
+					} catch (error) {
+						Logger.error(error);
+						showNotification(
+							'Error',
+							'Something went wrong translating the nuggets.'
+						);
+					}
+					//sessionStorage.removeItem('docbaseId');
+					setDocBase(docBase);
+					setUseInteractiveViewer(true);
+					//setIsRunning(false);
+					//clearInterval(updateInterval);
+					//return;
+				} else {
+					let info = res.state;
+
+					if (
+						res.meta.status !== undefined &&
+						res.meta.status !== ''
+					) {
+						info = res.meta.status;
+					}
+
+					info += info.endsWith('...') ? '' : '...';
+
+					// update loading screen
+					setLoadingScreen(
+						true,
+						'Start Interactive Table Population...',
+						info,
+						taskId,
+						true
+					);
+				}
+			});
+		};
+		updateBody();
+		const updateInterval = setInterval(updateBody, intervalTime);
+	};
+
+	const getOrderedNuggets = async (
+		organizationId: number,
+		baseName: string,
+		documentName: string,
+		documentContent: string
+	) => {
+		if (isRunning) {
+			Logger.warn(
+				'Docbase task is already running, cannot start another'
+			);
+			return;
+		}
+
+		const taskId = await APIService.getOrderedNuggets(
+			organizationId,
+			baseName,
+			documentName,
+			documentContent
+		);
+
+		if (taskId == undefined) {
+			showNotification(
+				'Error',
+				'Could not get ordered nuggets for ' + documentName
+			);
+			return;
+		}
+
+		Logger.log('Task: Get ordered nuggets ' + baseName);
+		Logger.log('Task ID: ' + taskId);
+
+		sessionStorage.setItem('docbaseId', taskId);
+		/* setLoadingScreen(
+			true,
+			'Loading Docbase ' + baseName + '...',
+			'Please wait...',
+			taskId
+		); */
+
+		//setLoadingScreenLock(true);
+		setIsRunning(true);
+
+		const updateBody = () => {
+			if (taskId == undefined) {
+				return;
+			}
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			APIService.getTaskStatus(taskId).then((res): any => {
+				Logger.log(res);
+
+				if (
+					res == undefined ||
+					res.state.toUpperCase().trim() === 'FAILURE'
+				) {
+					setLoadingScreenLock(false);
+					setLoadingScreen(false);
+					playAudio(MyAudio.ERROR);
+
+					showNotification(
+						'Error',
+						'Something went wrong getting ordered nuggets.'
+					);
+					sessionStorage.removeItem('docbaseId');
+
+					setIsRunning(false);
+					clearInterval(updateInterval);
+					return;
+				} else if (res.state.toUpperCase().trim() === 'SUCCESS') {
+					setLoadingScreenLock(false);
+					setLoadingScreen(false);
+					Logger.log(res);
+					Logger.log(JSON.stringify(res));
+
+					/* const att = res.meta.feedback_request_to_ui.attribute.name;
+					let attList: string[] = [];
+					if (att) {
+						attList = [att];
+					}
+
+					const docBase = new DocBase(
+						baseName,
+						organizationId,
+						attList
+					);
+					try {
+						Logger.log(res.meta.document_base_to_ui.msg.nuggets);
+						for (const nugget of res.meta.document_base_to_ui.msg
+							.nuggets) {
+							docBase.addNugget(
+								nugget.document.name,
+								nugget.document.text,
+								nugget.start_char,
+								nugget.end_char
+							);
+						}
+					} catch (error) {
+						Logger.error(error);
+						showNotification(
+							'Error',
+							'Something went wrong translating the nuggets.'
+						);
+					} */
+					sessionStorage.removeItem('docbaseId');
+					//setDocBase(docBase);
+					setIsRunning(false);
+					clearInterval(updateInterval);
+					return;
+				}
+			});
+		};
+		updateBody();
+		const updateInterval = setInterval(updateBody, intervalTime);
+	};
+
 	const isDocbaseTaskRunning = () => {
 		return isRunning;
 	};
@@ -453,9 +783,17 @@ export function DocBaseTaskProvider({ children }: Props) {
 				createDocbaseTask: createDocbaseTask,
 				loadDocbaseTask: loadDocbaseTask,
 				updateDocbaseAttributesTask: updateDocbaseAttributesTask,
+				startInteractiveTablePopulation:
+					startInteractiveTablePopulation,
+				getOrderedNuggets: getOrderedNuggets,
 			}}
 		>
-			{docBase && <DocbaseViewer docBase={docBase} onClose={onClose} />}
+			{docBase && !useInteractiveViewer && (
+				<DocbaseViewer docBase={docBase} onClose={onClose} />
+			)}
+			{docBase && useInteractiveViewer && (
+				<InteractiveDocBaseViewer docBase={docBase} onClose={onClose} />
+			)}
 			{children}
 		</DocBaseTaskContext.Provider>
 	);
diff --git a/src/utils/ApiService.ts b/src/utils/ApiService.ts
index be253a1..dc5340f 100644
--- a/src/utils/ApiService.ts
+++ b/src/utils/ApiService.ts
@@ -103,9 +103,6 @@ class APIService {
 			}
 			return false;
 		} catch (err) {
-			//Logger.error(err);
-			console.log('hallo000');
-
 			return false;
 		}
 	}
@@ -523,9 +520,6 @@ class APIService {
 		documentIDs: number[],
 		attributes: string[]
 	): Promise<string | undefined> {
-		// kannste erstmal ignorieren
-		// NILS MACH MA TEST
-
 		try {
 			const url = `${this.host}/core/document_base`;
 
@@ -555,9 +549,6 @@ class APIService {
 		baseName: string,
 		newAttributes: string[]
 	): Promise<string | undefined> {
-		// kannste erstmal ignorieren
-		// NILS MACH MA TEST
-
 		try {
 			const url = `${this.host}/core/document_base/attributes/update`;
 
@@ -586,9 +577,6 @@ class APIService {
 		organizationId: number,
 		baseName: string
 	): Promise<string | undefined> {
-		// kannste erstmal ignorieren
-		// NILS MACH MA TEST
-
 		try {
 			const url = `${this.host}/core/document_base/load`;
 
@@ -604,6 +592,62 @@ class APIService {
 		}
 	}
 
+	/**
+	 * Start the interactive table population task
+	 * @param organizationId The ID of the organization
+	 * @param baseName The name of the docbase
+	 * @returns The task ID
+	 */
+	static async interactiveTablePopulation(
+		organizationId: number,
+		baseName: string
+	): Promise<string | undefined> {
+		try {
+			const url = `${this.host}/core/document_base/interactive`;
+
+			const body = new FormData();
+			body.append('organisationId', organizationId.toString());
+			body.append('baseName', baseName);
+			body.append('authorization', this.getUserToken());
+			const resp = await axios.post(url, body).catch(this.handleCatch);
+			return resp.data.task_id;
+		} catch (err) {
+			Logger.error(err);
+			return undefined;
+		}
+	}
+
+	/**
+	 * Start the task to get order the nuggets
+	 * @param organizationId The ID of the organization
+	 * @param baseName The name of the docbase
+	 * @param documentName The name of the document
+	 * @param documentContent The content of the document
+	 * @returns The task ID
+	 */
+	static async getOrderedNuggets(
+		organizationId: number,
+		baseName: string,
+		documentName: string,
+		documentContent: string
+	): Promise<string | undefined> {
+		try {
+			const url = `${this.host}/core/document_base/order/nugget`;
+
+			const body = new FormData();
+			body.append('authorization', this.getUserToken());
+			body.append('organisationId', organizationId.toString());
+			body.append('baseName', baseName);
+			body.append('documentName', documentName);
+			body.append('documentContent', documentContent);
+			const resp = await axios.post(url, body).catch(this.handleCatch);
+			return resp.data.task_id;
+		} catch (err) {
+			Logger.error(err);
+			return undefined;
+		}
+	}
+
 	/**
 	 * Get the status of a task.
 	 * @param taskId The ID for the task
@@ -612,9 +656,6 @@ class APIService {
 	// TODO replace any with correct type
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	static async getTaskStatus(taskId: string): Promise<any> {
-		// kannste erstmal ignorieren
-		// NILS MACH MA TEST
-
 		try {
 			const url = `${
 				this.host
diff --git a/src/views/OrgPage/OrgPage.tsx b/src/views/OrgPage/OrgPage.tsx
index ee4e8d2..c56db75 100644
--- a/src/views/OrgPage/OrgPage.tsx
+++ b/src/views/OrgPage/OrgPage.tsx
@@ -13,6 +13,7 @@ import { useSetLoadingScreen } from '../../providers/LoadingScreenProvider';
 import FileUpload from '../../components/FileUpload/FileUpload';
 import DocBaseOverview from '../../components/DocBaseOverview/DocBaseOverview';
 import Icon from '../../components/Icon/Icon';
+import Logger from '../../utils/Logger';
 
 /**
  * A page that displays information about an organization.
@@ -53,7 +54,7 @@ function OrgPage() {
 			// Get members
 			APIService.getMembersForOrganization(org.id).then((members) => {
 				if (!members) {
-					console.error('Failed to get members for org ' + org.id);
+					Logger.error('Failed to get members for org ' + org.id);
 					return;
 				}
 				setMembers(members);
diff --git a/todos.md b/todos.md
deleted file mode 100644
index 1121e4b..0000000
--- a/todos.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# TODOS wannadbFrontend
-
-<!-- - [ ] This is an TODO example -->
-
--   [x] let user register _(2023-11-29 cophilot)_
--   [x] let user manage collections _(2023-11-29 cophilot)_
--   [x] let user add files to collection _(2023-11-29 cophilot)_
--   [ ] show name on symbol hover _(2023-12-27 CodeXShady)_