diff --git a/apps/remixdocgen/src/app/App.tsx b/apps/remixdocgen/src/app/App.tsx
index 2df11ab040..94896b410e 100644
--- a/apps/remixdocgen/src/app/App.tsx
+++ b/apps/remixdocgen/src/app/App.tsx
@@ -1,105 +1,43 @@
-import React, { useState, useEffect, useRef } from "react";
-
-import { PluginClient } from "@remixproject/plugin";
-import { createClient } from "@remixproject/plugin-webview";
+import React, { useState, useEffect, useMemo } from 'react'
 import {
-  CompilationFileSources,
   CompilationResult,
-} from "@remixproject/plugin-api/";
-import { Status } from "@remixproject/plugin-utils";
-
-import { AppContext } from "./AppContext";
-import { Routes } from "./routes";
-import { useLocalStorage } from "./hooks/useLocalStorage"
+} from '@remixproject/plugin-api/'
 
-
-import "./App.css";
-import { ContractName, Documentation } from "../types";
+import './App.css'
+import { DocGenClient } from './docgen-client'
 
 export const getNewContractNames = (compilationResult: CompilationResult) => {
-  const compiledContracts = compilationResult.contracts;
-  let result: string[] = [];
+  const compiledContracts = compilationResult.contracts
+  let result: string[] = []
 
   for (const file of Object.keys(compiledContracts)) {
-    const newContractNames = Object.keys(compiledContracts[file]);
-    result = [...result, ...newContractNames];
+    const newContractNames = Object.keys(compiledContracts[file])
+    result = [...result, ...newContractNames]
   }
-
-  return result;
-};
-
-const sampleMap = new Map<ContractName, Documentation>();
+  return result
+}
 
 const App = () => {
-  const [clientInstance, setClientInstance] = useState(undefined as any);
-  const [contracts, setContracts] = useState(sampleMap);
-  const [sites, setSites] = useLocalStorage("sites", []);
-  const clientInstanceRef = useRef(clientInstance);
-  clientInstanceRef.current = clientInstance;
-  const contractsRef = useRef(contracts);
-  contractsRef.current = contracts;
-  const [themeType, setThemeType] = useState<string>("dark");
+  const client = useMemo(() => new DocGenClient(), [])
+  const [themeType, setThemeType] = useState<string>('dark');
 
   useEffect(() => {
-    console.log("Remix EthDoc loading...");
-    const client = createClient(new PluginClient())
-    const loadClient = async () => {
-      await client.onload();
-      setClientInstance(client);
-      console.log("Remix EthDoc Plugin has been loaded");
+    const watchThemeSwitch = async () => {
       //await client.call("manager" as any, "activatePlugin", "ethdoc-viewer");
-      client.solidity.on(
-        "compilationFinished",
-        (
-          fileName: string,
-          source: CompilationFileSources,
-          languageVersion: string,
-          data: CompilationResult
-        ) => {
-          console.log("New compilation received");
-
-          const existingMap = contractsRef.current;
-          const newMap = new Map([
-            ...existingMap,
-          ]);
-
-          const status: Status = {
-            key: "succeed",
-            type: "success",
-            title: "New documentation ready",
-          };
-          clientInstanceRef.current.emit("statusChanged", status);
-          setContracts(new Map());
-        }
-      );
 
-      const currentTheme = await client.call("theme", "currentTheme");
-      console.log("Current theme", currentTheme);
+      const currentTheme = await client.call('theme', 'currentTheme');
 
       setThemeType(currentTheme.brightness || currentTheme.quality);
 
       client.on("theme", "themeChanged", (theme: any) => {
-        console.log("themeChanged");
         setThemeType(theme.quality);
       });
     };
 
-    loadClient();
-  }, []);
+    watchThemeSwitch();
+  }, [client]);
 
   return (
-    // <AppContext.Provider
-    //   value={{
-    //     clientInstance,
-    //     contracts,
-    //     setContracts,
-    //     sites,
-    //     setSites,
-    //     themeType,
-    //   }}
-    // >
-    //   <Routes />
-    // </AppContext.Provider>
     <div>
       <h1>Remix Docgen</h1>
     </div>
diff --git a/apps/remixdocgen/src/app/docgen-client.ts b/apps/remixdocgen/src/app/docgen-client.ts
index e56f326019..10df133d24 100644
--- a/apps/remixdocgen/src/app/docgen-client.ts
+++ b/apps/remixdocgen/src/app/docgen-client.ts
@@ -1,25 +1,25 @@
 import { PluginClient } from '@remixproject/plugin'
 import { createClient } from '@remixproject/plugin-webview'
+import { DocGen } from './plugins/docgen'
 
 export class DocGenClient extends PluginClient {
   private client
+  private docgen
   
   constructor() {
     super()
     this.client = createClient(this)
+    // this.docgen = new DocGen()
     this.methods = ['generateDocs', 'publishDocs']
-
-    this.client.onload(async () => {
-    })
   }
-
+  loadClient() {
+    this.client.onload()
+  }
   async generateDocs() {
     console.log('docgen client generateDocs')
-    // await this.client.call('docgen', 'docgen', [])
   }
 
   async publishDocs() {
     console.log('docgen client publishDocs')
-    // await this.client.call('docgen', 'docgen', [])
   }
 }
\ No newline at end of file