diff --git a/web/app/query_results/views.py b/web/app/query_results/views.py
index 1f17a873..463840e9 100644
--- a/web/app/query_results/views.py
+++ b/web/app/query_results/views.py
@@ -90,7 +90,7 @@ def query_result(query_result_id):
 @login_required
 def inspect_query_result(query_result_id):
     '''
-    View to inspect one importe result file in a corpus analysis like interface
+    View to inspect imported result file in a corpus analysis like interface
     '''
     query_result = QueryResult.query.get_or_404(query_result_id)
     query_metadata = query_result.query_metadata
diff --git a/web/app/static/js/modules/corpus_analysis/client/callbacks.js b/web/app/static/js/modules/corpus_analysis/client/callbacks.js
index c936d4e7..bf42fecd 100644
--- a/web/app/static/js/modules/corpus_analysis/client/callbacks.js
+++ b/web/app/static/js/modules/corpus_analysis/client/callbacks.js
@@ -28,7 +28,7 @@ function prepareQueryData() {
 /**
  * This callbacks saves the incoming query data chunks into the model results.
  */
-function saveQueryData(args) {
+function saveQueryData() {
   let [payload, client, results, rest] = arguments;
   // get data matches length before new chun kdata is being inserted
   let dataLength = results.data.matches.length;
@@ -51,14 +51,14 @@ function saveQueryData(args) {
   }
 }
 
-function getResultsData(args) {
+function getResultsData() {
   let [resultsType, dataIndexes, client, results, rest] = arguments;
   client.isBusy = true;
   client.notifyView('results-data-recieving');
   client.getResultsData(resultsType, dataIndexes, results);
 }
 
-function saveResultsData(args) {
+function saveResultsData() {
   let [payload, type, client, results, rest] = arguments;
   let objectKey = '';
   if (type === 'full-results') {
diff --git a/web/app/static/js/modules/corpus_analysis/client/listeners.js b/web/app/static/js/modules/corpus_analysis/client/listeners.js
index 0edbdde2..32aefce0 100644
--- a/web/app/static/js/modules/corpus_analysis/client/listeners.js
+++ b/web/app/static/js/modules/corpus_analysis/client/listeners.js
@@ -75,11 +75,11 @@ function recieveMetaData(type, client) {
  * Also prepares the result.jsList for the incoming data.
  */
 function recieveQueryStatus(type, client) {
+  /**
+   * Check if request for session was OK.
+   * If OK execute registered callbacks and notify View.
+   */
   client.socket.on(type, (response) => {
-    /**
-     * Check if request for session was OK.
-     * If OK execute registered callbacks and notify View.
-     */
     if (response.code === 200) {
       console.group('corpus_analysis_query: Client recieving query process',
       'status via socket.on');
@@ -90,7 +90,7 @@ function recieveQueryStatus(type, client) {
       console.groupEnd();
     } else {
       console.group('corpus_analysis_query: Client failed recieving',
-                    'query process status via socket.on');
+      'query process status via socket.on');
       let errorText = `Error ${response.payload.code} - ${response.payload.msg}`;
       if (response.payload.code == 1281) {
         errorText += ' - Invalid Query';
@@ -109,8 +109,7 @@ function recieveQueryData(type, client) {
    * Check if request for session was OK.
    * If OK execute registered callbacks and notify View.
    */
-  if (client.dynamicMode) {
-    client.socket.on(type, (response) => {
+  client.socket.on(type, (response) => {
     if (response.code === 200) {
       console.group('corpus_analysis_query_results: Recieveing query data')
       console.info('Client recieving query data via socket.on');
@@ -128,14 +127,7 @@ function recieveQueryData(type, client) {
       console.error(`corpus_analysis_query: ${errorText}`);
       console.groupEnd();
     }
-    });
-  } else {
-    console.group('corpus_analysis_query_results: Loading query data.');
-    console.info('Client loading imported query data from database.');
-    // executing the registered callbacks
-    client.eventListeners[type].executeCallbacks();
-    console.groupEnd();
-  }
+  });
 }
 
 /**
diff --git a/web/app/templates/query_results/inspect.html.j2 b/web/app/templates/query_results/inspect.html.j2
index 1042cf12..92a75393 100644
--- a/web/app/templates/query_results/inspect.html.j2
+++ b/web/app/templates/query_results/inspect.html.j2
@@ -57,166 +57,82 @@
 <script type="module">
 /**
  * First Phase:
- * document content is loaded and scripts are being imported and executed
+ * Document content is loaded and scripts are being imported and executed.
  */
- import {
-   CorpusAnalysisClient,
-   CorpusAnalysisDisplay,
-   SocketEventListener,
-   ListenerCallback,
- } from '../../static/js/modules/nopaque.CorpusAnalysisClient.js';
- import {
-   recieveSession,
-   recieveQueryStatus,
-   recieveQueryData,
- } from '../../static/js/modules/nopaque.listenerFunctions.js';
- import {
-   querySetup,
-   queryRenderResults,
- } from '../../static/js/modules/nopaque.listenerCallbacks.js'
- import {
-   Results,
-   Data,
-   MetaData,
- } from '../../static/js/nopaque.Results.js';
- import {
-   ResultsList,
- } from '../../static/js/nopaque.lists.js';
- import {
-   scrollToTop,
- } from '../../static/js/modules/nopaque.scrollToTop.js';
 
+// Import Client classes. Client handles the server client communication.
+import {
+  Client,
+  ClientEventListener,
+  ListenerCallback,
+} from '../../static/js/modules/corpus_analysis/client/Client.js';
+/**
+ * Import Client listener functions which will listen for defined socket or
+ * javascript events.
+ */
+import {
+  recieveQueryStatus,
+  recieveQueryData,
+} from '../../static/js/modules/corpus_analysis/client/listeners.js';
+// Import client listener callbacks so they can be registered to the listeners.
+import {
+  prepareQueryData,
+  saveQueryData,
+} from '../../static/js/modules/corpus_analysis/client/callbacks.js';
+// Import Results class which will be used to save results data of a query etc.
+import {
+  Results,
+} from '../../static/js/modules/corpus_analysis/model/Results.js';
+/**
+ * Import the ResultsList which can be understood as a View class that handles
+ * how the data from Results is represented to the user. The ViewEventListener
+ * is used to register listener functions which listen for events emitred by
+ * the Client.
+ */
+import {
+  ResultsList,
+  ViewEventListener,
+} from '../../static/js/modules/corpus_analysis/view/ResultsView.js';
+import {
+  scrollToTop,
+} from '../../static/js/modules/corpus_analysis/view/scrollToTop.js'
 /**
  * Second Phase:
- * Asynchronus and event driven code
+ * Asynchronus and event driven code.
  */
 document.addEventListener("DOMContentLoaded", () => {
-  // Initialize the CorpusAnalysisClient with dynamicMode as false
-  const client = new CorpusAnalysisClient({'logging': true,
-                                           'dynamicMode': false});
-  console.info("CorpusAnalysisClient created as client:", client);
-  // Set up display elements which hare show depending on the client status
-  client.getHTMLElements(['#query-display']);
-  const queryDisplay = new CorpusAnalysisDisplay(client.queryDisplay);
-  // Register those display elements to client
-  client.setDisplay("query", queryDisplay);
+  // Initialize the client with dynamicMode set to false.
+  const client = new Client({'logging': true,
+                             'dynamicMode': false});
   /**
-   * Initializing the results object holding all the data of a query.
-   * Also holds the metadata of one query.
-   * Lastly it contains the object ResultsList which is a list.js
-   * subclass which handles the visual representation of the query data.
+   * Initializing the results object as a model holding all the data of a
+   * query. Also holds the metadata of one query and results data.
+   * After that initialize the ResultsList object as the View handeling the
+   * representation of the data for the user.
    */
-   let displayOptionsData = ResultsList.getDisplayOptions('display-options-form');
-   ResultsList.options.page = displayOptionsData["resultsPerPage"];
-   let data = new Data();
-   let resultsList = new ResultsList("result-list", ResultsList.options);
-   let resultsMetaData = new MetaData();
-   let results = new Results(data, resultsList, resultsMetaData);
-   // make results part of the client
-   client.results = results;
-   // inits some object keys and values
-   client.results.clearAll();
-   console.info('Initialized the Results object.')
-   // init some modals
-   let deleteOverlay = () => {
-     let overlay = document.getElementsByClassName("modal-overlay")[0];
-     overlay.remove();
-   };
-   client.getHTMLElements(['#meta-data-modal'])
-   client.metaDataModal = M.Modal.init(client.metaDataModal,
-                                {'preventScrolling': false,
-                                 'opacity': 0.0,
-                                 'dismissible': false,
-                                 'onOpenEnd': deleteOverlay});
-  // saving imported data into client object
-  const payload = {{ query_result_file_content|tojson|safe }};
+  let results = new Results();
+  let resultsList = new ResultsList('result-list', ResultsList.options);
+  // Import results data from json file.
+  const resultsJson = {{ query_result_file_content|tojson|safe }};
   /**
-   * Register listeners and their callbacks. Because we are using the client
-   * not in dynamic mode we will not load the listeners. We just call the
-   * callbacks of the listeners manually. This is done to keep the setup of
-   * the client in dynamic or not dynamic mode similarish.
+   * Register needed listeners and their callbacks. But we will
+   * just call the attached callbacks manually. Because dynamicMode is false.
    */
-   const listenForQueryStatus = new SocketEventListener('corpus_analysis_query',
-                                                        recieveQueryStatus);
-   const queryStatusCallback = new ListenerCallback('corpus_analysis_query',
-                                                    querySetup);
-   listenForQueryStatus.setCallbacks([queryStatusCallback]);
-   const listenForQueryData = new SocketEventListener('corpus_analysis_query_results',
-                                                   recieveQueryData);
-   const queryDataCallback = new ListenerCallback('corpus_analysis_query_results',
-                                                  queryRenderResults);
-   listenForQueryData.setCallbacks([queryDataCallback]);
-
-//
-//   // Initialization of interactionElemnts
-//   // An interactionElement is an object identifing a switch or button via
-//   // htmlID. Callbacks are set for these elements which will be triggered on
-//   // a pagination interaction by the user or if the status of the element has
-//   // been altered. (Like the switche has ben turned on or off).
-//   interactionElements = new InteractionElements();
-//   let expertModeInteraction = new InteractionElement("display-options-form-expert_mode");
-//   expertModeInteraction.setCallback("on",
-//                                     results.jsList.expertModeOn,
-//                                     results.jsList,
-//                                     ["query-display"])
-//   expertModeInteraction.setCallback("off",
-//                                     results.jsList.expertModeOff,
-//                                     results.jsList,
-//                                     ["query-display"])
-//
-//   let activateInspectInteraction = new InteractionElement("inspect",
-//                                                           false);
-//   activateInspectInteraction.setCallback("noCheck",
-//                                           results.jsList.activateInspect,
-//                                           results.jsList);
-//
-//   let changeContextInteraction = new InteractionElement("display-options-form-results_per_page",
-//                                                         false);
-//   changeContextInteraction.setCallback("noCheck",
-//                                       results.jsList.changeContext,
-//                                       results.jsList)
-//   interactionElements.addInteractions([expertModeInteraction, activateInspectInteraction, changeContextInteraction]);
-//
-//   // checks if a change for every interactionElement happens and executes
-//   // the callbacks accordingly
-//   interactionElements.onChangeExecute();
-//
-//   // eventListener if pagination is used to apply new context size to new page
-//   // and also activate inspect match if progress is 100
-//   // also adds more interaction buttons like add to sub results
-//   for (let element of paginationElements) {
-//     element.addEventListener("click", (event) => {
-//       results.jsList.pageChangeEventInteractionHandler(interactionElements);
-//     });
-//   }
-//
-  // render results directly with callbacks because we are not in dynamic mode
-  listenForQueryStatus.listenerCallbacks['corpus_analysis_query'].callbackFunction(payload, client);
-  listenForQueryData.listenerCallbacks['corpus_analysis_query_results'].callbackFunction(payload, client);
-//   // ### Show corpus Metadata
-//   showMetaDataButton.onclick = () => {
-//     metaDataModal.open();
-//   };
-//
-//   // live update of hits per page if hits per page value is changed
-//   let changeHitsPerPageBind = results.jsList.changeHitsPerPage.bind(results.jsList);
-//   hitsPerPageInputElement.onchange = changeHitsPerPageBind;
-//
-//   // live update of lr context per item if context value is changed
-//   contextPerItemElement.onchange = results.jsList.changeContext;
-//
-//   // new insepct event listener makeing use of javascript bubbleing
-//   let resultsTable = document.getElementById("query-results");
-//   resultsTable.addEventListener("click", (event) => {
-//     if (event.target.classList.contains("inspect-btn")) {
-//       const dataIndex = event.target.closest("tr").dataset.index;
-//       const fakeResponse = results.jsList.createFakeResponse();
-//       results.jsList.showMatchContext(fakeResponse);
-//     }
-//   });
-//
-  // Add scrollToTop functionality
-  scrollToTop();
+  const listenForQueryStatus = new ClientEventListener('corpus_analysis_query',
+                                                       recieveQueryStatus);
+  const queryStatusCallback = new ListenerCallback('corpus_analysis_query',
+                                                   prepareQueryData,
+                                                   [client, results]);
+  listenForQueryStatus.setCallbacks([queryStatusCallback]);
+  const listenForQueryData = new ClientEventListener('corpus_analysis_query_results',
+                                                     recieveQueryData);
+  const queryDataCallback = new ListenerCallback('corpus_analysis_query_results',
+                                                 saveQueryData,
+                                                 [client, results]);
+  listenForQueryData.setCallbacks([queryDataCallback]);
+  // TODO: execute callbacks manually with right input
+  // Enable scroll to Top functionality.
+  scrollToTop('#headline', '#menu-scroll-to-top-div');
 });
 </script>
 {% endblock %}