diff --git a/src/App.css b/src/App.css
index e20be2d57e..60ed460f1f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,7 +3,6 @@ body {
 }
 
 #ethdoc .active {
-  color: #212529;
   background-color: #e9ecef;
   border-color: #e9ecef;
 }
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 25f6a4ec93..8749512066 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -38,6 +38,7 @@ const App = () => {
   clientInstanceRef.current = clientInstance;
   const contractsRef = useRef(contracts);
   contractsRef.current = contracts;
+  const [themeType, setThemeType] = useState<string>("dark")
 
   useEffect(() => {
     console.log("Remix EthDoc loading...");
@@ -76,6 +77,17 @@ const App = () => {
           setContracts(newMap);
         }
       );
+
+      const currentTheme = await client.call("theme", "currentTheme")
+      console.log("Current theme", currentTheme)
+
+      setThemeType(currentTheme.brightness || currentTheme.quality)
+
+      client.on("theme", "themeChanged", (theme: any) => {
+        console.log("themeChanged")
+        setThemeType(theme.quality)
+      })
+
     };
 
     loadClient();
@@ -89,6 +101,7 @@ const App = () => {
         setContracts,
         sites,
         setSites,
+        themeType
       }}
     >
       <Routes />
diff --git a/src/AppContext.tsx b/src/AppContext.tsx
index 9a53ccd10c..2d9685d694 100644
--- a/src/AppContext.tsx
+++ b/src/AppContext.tsx
@@ -16,4 +16,5 @@ export const AppContext = React.createContext({
   setSites: (sites: PublishedSite[]) => {
     console.log("Calling Set Sites");
   },
+  themeType: "dark"
 });
diff --git a/src/utils/template.ts b/src/utils/template.ts
index 59e156049b..2aa7dcdeba 100644
--- a/src/utils/template.ts
+++ b/src/utils/template.ts
@@ -53,17 +53,16 @@ export const template = (
 
     <div id="ethdoc-viewer">
     
-        ${
-          functions.length === 0
-            ? "No contract to display"
-            : renderHeader(name, contractDoc)
-        }
+        ${functions.length === 0
+    ? "No contract to display"
+    : renderHeader(name, contractDoc)
+  }
 
         ${functions
-          .map(
-            (item) => `
+    .map(
+      (item) => `
           <hr>
-            <h6>${item.name} - ${item.type} </h6>
+            <h6>${item.name}</h6>
 
             ${getMethodDetails(item.devdoc)}
 
@@ -73,8 +72,8 @@ export const template = (
            
             ${renderParameterDocumentation(item.outputs)}
             `
-          )
-          .join("\n")}
+    )
+    .join("\n")}
     
     </div>
 `;
@@ -92,23 +91,22 @@ export const renderHeader = (
   name: string,
   contractDoc: ContractDocumentation
 ) => `
-    <h3>${name} ${
-  contractDoc.title ? `<small>: ${contractDoc.title}</small>` : ""
-}</h3>
+    <h3>${name} ${contractDoc.title ? `<small>: ${contractDoc.title}</small>` : ""
+  }</h3>
 
     ${contractDoc.notice ? `<p class="lead">${contractDoc.notice}</p>` : ""}
 
     ${contractDoc.author ? `<p>Author: ${contractDoc.author}</p>` : ""}
 
+    <br />
     <p><strong>Functions</strong></p>
 `;
 
 export const renderParameterDocumentation = (
   parameters: ParameterDocumentation[]
 ) =>
-  `${
-    parameters.length > 0
-      ? `<table class="table table-sm table-bordered table-striped">
+  `${parameters.length > 0
+    ? `<table class="table table-sm table-bordered table-striped">
                 <thead>
                     <tr>
                         <th>Name</th>
@@ -128,25 +126,25 @@ export const renderParameterDocumentation = (
       .join("")}
               </tbody>
       </table>`
-      : "<p>No parameters</p>"
+    : "<p>No parameters</p>"
   }`;
 
 export const getMethodDetails = (devMethod?: Partial<MethodDoc>) => {
   const finalResult = !devMethod
     ? "<p><strong>**Add Documentation for the method here**</strong></p>"
     : Object.keys(devMethod)
-        .filter((key) => key !== "params")
-        .map((key) => {
-          const funcToGetTemplate = (devMethodDocTemplate as any)[key];
+      .filter((key) => key !== "params")
+      .map((key) => {
+        const funcToGetTemplate = (devMethodDocTemplate as any)[key];
 
-          if (!funcToGetTemplate) {
-            return "";
-          }
-          const funcParameter = (devMethod as any)[key];
-          const result = funcToGetTemplate(funcParameter);
-          return result;
-        })
-        .join("\n");
+        if (!funcToGetTemplate) {
+          return "";
+        }
+        const funcParameter = (devMethod as any)[key];
+        const result = funcToGetTemplate(funcParameter);
+        return result;
+      })
+      .join("\n");
 
   console.log("finalResult", finalResult);
   return finalResult;
diff --git a/src/views/HomeView.tsx b/src/views/HomeView.tsx
index 98fdaf597f..9d57f0237f 100644
--- a/src/views/HomeView.tsx
+++ b/src/views/HomeView.tsx
@@ -63,8 +63,8 @@ export const HomeView: React.FC = () => {
 
   return (
     <AppContext.Consumer>
-      {({ clientInstance, contracts, setContracts }) => (
-        <div id="ethdoc">
+      {({ clientInstance, contracts, setContracts, themeType }) => (
+        <div id="ethdoc" style={{ color: themeType === "dark" ? "white" : "black" }}>
           {[...contracts.keys()].length === 0 && (
             <p>Compile a contract with Solidity Compiler</p>
           )}