diff --git a/apps/remix-ide/src/app/plugins/viewReactPlugin.ts b/apps/remix-ide/src/app/plugins/viewReactPlugin.ts
new file mode 100644
index 0000000000..da2f108de9
--- /dev/null
+++ b/apps/remix-ide/src/app/plugins/viewReactPlugin.ts
@@ -0,0 +1,27 @@
+import type { Profile, LocationProfile } from '@remixproject/plugin-utils'
+import { Plugin } from '@remixproject/engine'
+
+
+export function isView<P extends Profile>(profile: Profile): profile is (ViewProfile & P) {
+  return !!profile['location']
+}
+
+export type ViewProfile = Profile & LocationProfile
+
+export abstract class ViewReactPlugin extends Plugin {
+  abstract render(): any
+
+  constructor(public profile: ViewProfile) {
+    super(profile)
+  }
+
+  async activate() {
+    await this.call(this.profile.location, 'addView', this.profile, this.render())
+    super.activate()
+  }
+
+  deactivate() {
+    this.call(this.profile.location, 'removeView', this.profile)
+    super.deactivate()
+  }
+}
\ No newline at end of file
diff --git a/apps/remix-ide/src/app/tabs/settings-tab.tsx b/apps/remix-ide/src/app/tabs/settings-tab.tsx
index 442e3e1256..0213123d9f 100644
--- a/apps/remix-ide/src/app/tabs/settings-tab.tsx
+++ b/apps/remix-ide/src/app/tabs/settings-tab.tsx
@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom'
 import * as packageJson from '../../../../../package.json'
 import { RemixUiSettings } from '@remix-ui/settings' //eslint-disable-line
 import Registry from '../state/registry'
+import { ViewReactPlugin } from '../plugins/viewReactPlugin'
 
 const profile = {
   name: 'settings',
@@ -19,7 +20,7 @@ const profile = {
   permission: true
 }
 
-module.exports = class SettingsTab extends ViewPlugin {
+module.exports = class SettingsTab extends ViewReactPlugin {
   config: any = {}
   editor: any
   private _deps: {
diff --git a/apps/remix-ide/src/app/ui/landing-page/landing-page.js b/apps/remix-ide/src/app/ui/landing-page/landing-page.js
index efdb5031fb..7c9268f11c 100644
--- a/apps/remix-ide/src/app/ui/landing-page/landing-page.js
+++ b/apps/remix-ide/src/app/ui/landing-page/landing-page.js
@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom'
 import * as packageJson from '../../../../../../package.json'
 import { ViewPlugin } from '@remixproject/engine-web'
 import { RemixUiHomeTab } from '@remix-ui/home-tab' // eslint-disable-line
+import { ViewReactPlugin } from '../../plugins/viewReactPlugin'
 
 const profile = {
   name: 'home',
@@ -15,7 +16,7 @@ const profile = {
   location: 'mainPanel',
   version: packageJson.version
 }
-export class LandingPage extends ViewPlugin {
+export class LandingPage extends ViewReactPlugin {
   constructor (appManager, verticalIcons, fileManager, filePanel, contentImport) {
     super(profile)
     this.profile = profile
@@ -35,5 +36,5 @@ export class LandingPage extends ViewPlugin {
     plugin={this}
   /></div>
   }
-  
+
 }
diff --git a/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx b/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx
index 7611b175d0..af826ead04 100644
--- a/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx
+++ b/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx
@@ -14,9 +14,9 @@ const RemixUIPanelPlugin = (props: panelPLuginProps, panelRef: any) => {
     const ref:any = panelRef || localRef
     if (ref.current) {
       if(React.isValidElement(props.pluginRecord.view)) {
-        console.log('is REACT element', props.pluginRecord.profile.name)
+        // console.log('is REACT element', props.pluginRecord.profile.name)
       }else{
-        console.log('is HTML element', props.pluginRecord.profile.name)
+        console.info('is HTML element', props.pluginRecord.profile.name)
       }
       if (props.pluginRecord.view) {
         if (React.isValidElement(props.pluginRecord.view)) {