diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index 5a2ddf2a47..c1d2fa7b09 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -345,7 +345,7 @@ class AppComponent {
       solidityumlgen,
       compilationDetails,
       vyperCompilationDetails,
-      // remixGuide,
+      remixGuide,
       contractFlattener,
       solidityScript,
       templates,
diff --git a/apps/remix-ide/src/app/plugins/remixGuide.tsx b/apps/remix-ide/src/app/plugins/remixGuide.tsx
index 037f4f8cf5..0a8b5e13b6 100644
--- a/apps/remix-ide/src/app/plugins/remixGuide.tsx
+++ b/apps/remix-ide/src/app/plugins/remixGuide.tsx
@@ -1,12 +1,12 @@
 
-import React from 'react'
+import React, {useState} from 'react' // eslint-disable-line
 import { ViewPlugin } from '@remixproject/engine-web'
 import { PluginViewWrapper } from '@remix-ui/helper'
 import { RemixAppManager } from '../../remixAppManager'
 import { RemixUIGridView } from '@remix-ui/remix-ui-grid-view'
 import { RemixUIGridSection } from '@remix-ui/remix-ui-grid-section'
 import { RemixUIGridCell } from '@remix-ui/remix-ui-grid-cell'
-import { ThemeKeys, ThemeObject } from '@microlink/react-json-view'
+import * as Data from './remixGuideData.json'
 //@ts-ignore
 const _paq = (window._paq = window._paq || [])
 
@@ -15,7 +15,6 @@ const profile = {
   displayName: 'Remix Guide',
   description: 'Learn remix with videos',
   location: 'mainPanel',
-  methods: ['showDetails'],
   events: []
 }
 
@@ -24,13 +23,22 @@ export class RemixGuidePlugin extends ViewPlugin {
   appManager: RemixAppManager
   element: HTMLDivElement
   payload: any
-  themeStyle: any
-  theme: ThemeKeys | ThemeObject
+  showVideo: boolean
+  videoID: string
+  handleKeyDown: any
+  handleEscape: any
+
+  //sectionToExpandedCell: [string, string][]; // Array of pairs where key is the section name and the second value is the name of the cell
+
   constructor(appManager: RemixAppManager) {
     super(profile)
     this.appManager = appManager
     this.element = document.createElement('div')
     this.element.setAttribute('id', 'remixGuideEl')
+    this.payload = {
+      sectionToExpandedCell: [['', '']],
+      data: {}
+    }
   }
 
   async onActivation() {
@@ -38,24 +46,24 @@ export class RemixGuidePlugin extends ViewPlugin {
     await this.call('tabs', 'focus', 'remixGuide')
     this.renderComponent()
     _paq.push(['trackEvent', 'plugin', 'activated', 'remixGuide'])
+    // Read the data
+    this.payload.data = Data
+    this.handleKeyDown = (event) => {
+      console.log("key down")
+      if (event.key === 'Escape') {
+        this.showVideo = false
+        this.renderComponent()
+      }
+    }
+    document.addEventListener('keydown', this.handleKeyDown);
   }
 
   onDeactivation(): void {
-  }
-
-  async showDetails(sentPayload: any) {
-    const contractName = Object.entries(sentPayload).find(([key, value]) => key)
-    await this.call('tabs', 'focus', 'remixGuide')
-    this.profile.displayName = `${contractName[0]}`
-    this.payload = sentPayload
-    const active = await this.call('theme', 'currentTheme')
-
-    this.renderComponent()
+    document.removeEventListener('keydown', this.handleKeyDown);
   }
 
   private handleThemeChange() {
     this.on('theme', 'themeChanged', (theme: any) => {
-
       this.renderComponent()
     })
   }
@@ -64,6 +72,7 @@ export class RemixGuidePlugin extends ViewPlugin {
     this.dispatch = dispatch
     this.renderComponent()
   }
+
   render() {
     return (
       <div className="bg-dark" id="remixGuide">
@@ -76,168 +85,86 @@ export class RemixGuidePlugin extends ViewPlugin {
     this.dispatch({
       ...this,
       ...this.payload,
-      themeStyle: this.themeStyle,
-      theme: this.theme
+      showVideo: this.showVideo,
+      videoID: this.videoID
     })
   }
 
   updateComponent(state: any) {
     return (
-      <RemixUIGridView
-        plugin={this}
-        styleList={""}
-        logo='/assets/img/YouTubeLogo.webp'
-        enableFilter={true}
-        showUntagged={true}
-        showPin={true}
-        tagList={[
-          ['beginner', 'danger'],
-          ['advanced', 'warning'],
-          ['AI', 'success'],
-          ['plugins', 'secondary'],
-          ['solidity', 'primary'],
-          ['vyper', 'info'],
-          ['L2', 'danger']
-        ]}
-        title='Remix Guide'
-        description="Streamlined access to categorized video tutorials for mastering Remix IDE. From fundamentals to advanced techniques, level up your development skills with ease."
-      //themeStyle={state.themeStyle}
-      >
-        <RemixUIGridSection
+      <div className='d-flex'>
+        <RemixUIGridView
           plugin={this}
-          title='Basics'
-          hScrollable= {true}
+          styleList={""}
+          logo='/assets/img/YouTubeLogo.webp'
+          enableFilter={true}
+          showUntagged={true}
+          showPin={true}
+          tagList={[
+            ['beginner', 'danger'],
+            ['advanced', 'warning'],
+            ['AI', 'success'],
+            ['plugins', 'secondary'],
+            ['solidity', 'primary'],
+            ['vyper', 'info'],
+            ['L2', 'danger']
+          ]}
+          title={Data.title}
+          description={Data.description}
         >
-          <RemixUIGridCell
-            plugin={this}
-            title="first item"
-            tagList={['L2', 'AI']}
-            logo='/assets/img/soliditySurvey2023.webp'
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell>
-          <RemixUIGridCell
-            plugin={this}
-            title="next"
-            pinned={true}
-            tagList={['L2', 'plugins']}
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell> <RemixUIGridCell
-            plugin={this}
-            title="something"
-            pinned={false}
-            tagList={['solidity', 'plugins']}
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell>
-          <RemixUIGridCell
-            plugin={this}
-            title="1"
-            tagList={['solidity']}
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell> <RemixUIGridCell
-            plugin={this}
-            title="1"
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell>
-          <RemixUIGridCell
-            plugin={this}
-            title="Something very very long"
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell> <RemixUIGridCell
-            plugin={this}
-            title="1"
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell>
-          <RemixUIGridCell
-            plugin={this}
-            title="1"
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell>
-          <RemixUIGridCell
-            plugin={this}
-            title="1"
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell>
-          <RemixUIGridCell
-            plugin={this}
-            title="1"
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell>
-        </RemixUIGridSection>
-        <RemixUIGridSection
-          plugin={this}
-          title='Basics not scrollable'
-          hScrollable= {false}
+          { Data.sections.map(section => {
+            return <RemixUIGridSection
+              plugin={this}
+              title={section.title}
+              hScrollable= {true}
+            >
+              { section.cells.map(cell => {
+                return <RemixUIGridCell
+                  plugin={this}
+                  title={cell.title}
+                  tagList={cell.tagList}
+                  expandViewEl={
+                    cell.expandViewElement
+                  }
+                  handleExpand={() => {
+                    this.showVideo = true
+                    this.videoID = cell.expandViewElement.videoID
+                    this.renderComponent()
+                  }}
+                  logo={cell.expandViewElement.logo}
+                >
+                  <img src={"//img.youtube.com/vi/" + this.videoID + "/0.jpg"} style={{ height: '70px', width: '70px' }}></img>
+                </RemixUIGridCell>
+              })}
+            </RemixUIGridSection>
+          })}
+        </RemixUIGridView>
+        { state.showVideo && <div
+          data-id={`EnterModalDialogContainer-react`}
+          data-backdrop="static"
+          data-keyboard="false"
+          className={"modal d-flex"}
+          role="dialog"
+          style={{ justifyContent: "center" }}
         >
-          <RemixUIGridCell
-            plugin={this}
-            title="first item"
-            logo='/assets/img/soliditySurvey2023.webp'
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell>
-          <RemixUIGridCell
-            plugin={this}
-            title="next"
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell> <RemixUIGridCell
-            plugin={this}
-            title="something"
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell>
-          <RemixUIGridCell
-            plugin={this}
-            title="1"
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell> <RemixUIGridCell
-            plugin={this}
-            title="1"
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell>
-          <RemixUIGridCell
-            plugin={this}
-            title="1"
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell> <RemixUIGridCell
-            plugin={this}
-            title="1"
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell>
-          <RemixUIGridCell
-            plugin={this}
-            title="1"
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell>
-          <RemixUIGridCell
-            plugin={this}
-            title="1"
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell>
-          <RemixUIGridCell
-            plugin={this}
-            title="1"
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell>
-        </RemixUIGridSection>
-      </RemixUIGridView>
+          <div className="align-self-center pb-4" role="document">
+            <div
+              tabIndex={-1}
+              className={'modal-content remixModalContent mb-4'}
+            >
+              <div className="text-break remixModalBody d-flex flex-column p-3 justify-content-between" data-id={`EnterModalDialogModalBody-react`}>
+                <iframe style={{ minHeight: "500px", minWidth: "1000px" }} width="1000" height="500" src={"https://www.youtube.com/embed/" + this.videoID + "?si=ZdckOaSPR7VsLj_2"} allowFullScreen></iframe>
+              </div>
+              <div className="modal-footer d-flex flex-column">
+                <button onClick={() => {
+                  this.showVideo = false
+                  this.renderComponent()
+                }}>Close</button>
+              </div>
+            </div>
+          </div>
+        </div>}
+      </div>
     )
   }
 
diff --git a/apps/remix-ide/src/app/plugins/remixGuideData.json b/apps/remix-ide/src/app/plugins/remixGuideData.json
new file mode 100644
index 0000000000..1e03ac8c4c
--- /dev/null
+++ b/apps/remix-ide/src/app/plugins/remixGuideData.json
@@ -0,0 +1,46 @@
+{
+  "logo": "/assets/img/YouTubeLogo.webp",
+  "title": "Remix Guide",
+  "description": "Streamlined access to categorized video tutorials for mastering Remix IDE. From fundamentals to advanced techniques, level up your development skills with ease.",
+  "sections": [
+    {
+      "title": "Basics",
+      "hScrollable": "true",
+      "cells": [
+        {
+          "title": "first item",
+          "tagList": [
+            "L2",
+            "AI" 
+          ],
+          "expandViewElement": {
+            "videoID": "vH8T3In6ZkE",
+            "logo": "https://yt3.ggpht.com/9NFZbC9mkA152sSWJJgNBls6GlBdknsF-9gi6ZVk_xsHjmc82j3q1Pd5a--GCnOKUrP-YtNbHls=s48-c-k-c0x00ffffff-no-rj"
+          }
+        },
+        {
+          "title": "second item",
+          "tagList": [
+            "solidity",
+            "AI" 
+          ],
+          "expandViewElement": {
+            "videoID": "vH8T3In6ZkE",
+            "logo": "https://yt3.ggpht.com/9NFZbC9mkA152sSWJJgNBls6GlBdknsF-9gi6ZVk_xsHjmc82j3q1Pd5a--GCnOKUrP-YtNbHls=s48-c-k-c0x00ffffff-no-rj"
+          }
+        },
+        {
+          "title": "third item",
+          "tagList": [
+            "vyper",
+            "AI" 
+          ],
+          "expandViewElement": {
+            "videoID": "vH8T3In6ZkE",
+            "logo": "https://yt3.ggpht.com/9NFZbC9mkA152sSWJJgNBls6GlBdknsF-9gi6ZVk_xsHjmc82j3q1Pd5a--GCnOKUrP-YtNbHls=s48-c-k-c0x00ffffff-no-rj"
+          }
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/remix-ide/src/remixAppManager.js b/apps/remix-ide/src/remixAppManager.js
index c52b50c081..107dda52a0 100644
--- a/apps/remix-ide/src/remixAppManager.js
+++ b/apps/remix-ide/src/remixAppManager.js
@@ -128,7 +128,7 @@ export function isNative(name) {
     'circuit-compiler',
     'compilationDetails',
     'vyperCompilationDetails',
-    'remixGuide',
+    //'remixGuide',
     'walletconnect'
   ]
   return nativePlugins.includes(name) || requiredModules.includes(name) || isInjectedProvider(name) || isVM(name)
diff --git a/libs/remix-ui/grid-view/src/lib/components/customCheckbox.tsx b/libs/remix-ui/grid-view/src/lib/components/customCheckbox.tsx
index 102b80d72d..01915d99c9 100644
--- a/libs/remix-ui/grid-view/src/lib/components/customCheckbox.tsx
+++ b/libs/remix-ui/grid-view/src/lib/components/customCheckbox.tsx
@@ -16,15 +16,16 @@ export const CustomCheckbox = (props: CustomCheckboxProps) => {
   if (!textColor || textColor == '') textColor = filterCon.keyValueMap[props.label].color
 
   return (
-    <div id={textColor + props.label} className="h-80 mx-1 align-items-center custom-control custom-checkbox" style={{ minWidth: '4rem' }}>
+    <div id={textColor + props.label}
+      className="h-80 mx-1 align-items-center custom-control custom-checkbox"
+      style={{ minWidth: '4rem' }}
+    >
       <input
         className="custom-control-input"
         id={"GVCheckbox" + props.label}
         defaultChecked={defChecked}
         onChange={e => {
-          if (props.label == 'no tag')
-            filterCon.showUntagged = ! filterCon.showUntagged
-          else filterCon.updateValue(props.label, e.target.checked, textColor)}}
+          filterCon.updateValue(props.label, e.target.checked, textColor)}}
         type="checkbox"
       />
       <label
diff --git a/libs/remix-ui/grid-view/src/lib/filtersContext.tsx b/libs/remix-ui/grid-view/src/lib/filtersContext.tsx
index 0fe075b0f6..84ee6efa53 100644
--- a/libs/remix-ui/grid-view/src/lib/filtersContext.tsx
+++ b/libs/remix-ui/grid-view/src/lib/filtersContext.tsx
@@ -3,9 +3,10 @@ import React, { createContext, useState, useContext } from 'react';
 interface FilterContextType {
   showUntagged: boolean
   showPin: boolean
-  keyValueMap: Record<string, { enabled: boolean; color: string; }>;
+  keyValueMap: Record<string, { enabled: boolean; color: string; }>
   updateValue: (key: string, enabled: boolean, color: string) => void
   addValue: (key: string, enabled: boolean, color: string) => void
+  filter: string
 }
 const FiltersContext = createContext<FilterContextType>({
   showUntagged: false,
@@ -13,6 +14,7 @@ const FiltersContext = createContext<FilterContextType>({
   keyValueMap: {},
   updateValue: () => {},
   addValue: () => {},
+  filter: ""
 });
 
 export default FiltersContext
diff --git a/libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.tsx b/libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.tsx
index d9e06e30a5..1da66f0146 100644
--- a/libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.tsx
+++ b/libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.tsx
@@ -1,4 +1,4 @@
-import React, {useState, useEffect, useContext, useRef, ReactNode} from 'react' // eslint-disable-line
+import React, {useState, useEffect, useContext, useRef, ReactNode, ReactHTMLElement} from 'react' // eslint-disable-line
 
 import './remix-ui-grid-cell.css'
 import FiltersContext from "./filtersContext"
@@ -16,67 +16,95 @@ interface RemixUIGridCellProps {
   pinned?: boolean
   pinStateCallback?: any
   logo?: string
-  title?: string
+  title: string
   tagList?: string[] // max 8, others will be ignored
   classList?: string
   styleList?: any
   children?: ReactNode
+  expandViewEl?: any
+  handleExpand?: any
 }
 
 export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
   const filterCon = useContext(FiltersContext)
   const [anyEnabled, setAnyEnabled] = useState(false)
+  const [expand, setExpand] = useState(false)
   const [pinned, setPinned] = useState<boolean>(props.pinned)
 
   useEffect(() => {
     if (props.tagList) setAnyEnabled(props.tagList.some((key) => filterCon.keyValueMap[key]?.enabled))
-    else setAnyEnabled(filterCon.showUntagged)
+    else setAnyEnabled(filterCon?.keyValueMap['no tag']?.enabled)
+    if (filterCon.filter != '') setAnyEnabled(anyEnabled && props.title.toLowerCase().includes(filterCon.filter))
   }, [filterCon, props.tagList])
 
+  /*const listenOnExpand = (key) => {
+    if (key === props.key) setExpand(props.toggleExpandView)
+    console.log('expand ----> ', key)
+  }
+
+  // The expanded widged should go to the grid-segment and be updated based on the expandedItem state variable of the plugin. 
+  // The state var will work like theme dispattching is working.
+
+  useEffect(() => {
+    // TODO should be refactored to update based on state of plugin.
+    props.plugin.on(props.plugin.name, 'expandGridCell', listenOnExpand)
+  }, [])
+  */
+
   return (
-    <div className='mr-2 mt-3'>
-      { anyEnabled && <div className='d-flex flex-grid'>
-        <div className={"d-flex mx-0 p-2 bg-light border border-secondary remixui_grid_cell_container " + props.classList || ''} data-id={"remixUIGS" + props.title}>
-          <div className="d-flex remixui_grid_cell flex-column">
-            <div className='d-flex flex-row pb-1 align-items-end' style={{ width: '8rem', height: '1rem' }}>
-              { props.logo && <img className='remixui_grid_view_logo mr-1' src={props.logo} style={{ width: '1rem', height: '1rem' }}/> }
-              { props.title && <label
-                className='m-0 p-0 align-items-left'
-                style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontSize: 'xx-small' }}
-              >
-                { props.title }
-              </label> }
+    <div className='mr-2 mt-3' onClick={() => {
+      if (props.expandViewEl)
+        props.handleExpand(!expand)
+      else return
+    }}>
+      { anyEnabled && <div className='d-flex flex-column'>
+        <div className='d-flex flex-grid'>
+          <div className={"d-flex mx-0 p-2 bg-light border border-secondary remixui_grid_cell_container " + props.classList || ''} data-id={"remixUIGS" + props.title}>
+            <div className="d-flex remixui_grid_cell flex-column">
+              <div className='d-flex flex-row pb-1 align-items-end' style={{width: '8rem', height: '1rem'}}>
+                { props.logo && <img className='remixui_grid_view_logo mr-1' src={props.logo} style={{ width: '1rem', height: '1rem'  }}/> }
+                { props.title && <label
+                  className='m-0 p-0 align-items-left'
+                  style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontSize: 'xx-small'}}
+                >
+                  { props.title }
+                </label> }
+              </div>
+              { props.children }
             </div>
-            { props.children }
           </div>
-        </div>
-        { filterCon.showPin && <button
-          className={`${pinned ? 'fa-duotone' : 'fa-light'}` + ` fa-map-pin text-info border-0 mb-0 remixui_grid_cell_pin`}
-          onClick={() => {
-            setPinned(!pinned)
-            props.pinStateCallback()
-          }}
-        ></button>}
-        { props.tagList && <div className='d-flex flex-column align-items-begin remixui_grid_cell_tags'>
-          { Object.keys(props.tagList).map((key) => (
-            filterCon.keyValueMap[props.tagList[key]].enabled && (
-              <CustomTooltip
-                placement="right"
-                tooltipId="pluginManagerInactiveTitleLinkToDoc"
-                tooltipClasses="text-nowrap"
-                tooltipText={props.tagList[key]}
-              >
-                <span key={props.tagList[key]}
-                  className={'remixui_grid_cell_tag bg-' + filterCon.keyValueMap[props.tagList[key]].color}
+          { filterCon.showPin && <button
+            className={`${pinned ? 'fa-duotone' : 'fa-light'}` + ` fa-map-pin text-info border-0 mb-0 remixui_grid_cell_pin`}
+            onClick={() => {
+              setPinned(!pinned)
+              props.pinStateCallback()
+            }}
+          ></button>}
+          { props.tagList && <div className='d-flex flex-column align-items-begin remixui_grid_cell_tags'>
+            { Object.keys(props.tagList).map((key) => (
+              filterCon.keyValueMap[props.tagList[key]].enabled && (
+                <CustomTooltip
+                  placement="right"
+                  tooltipId="pluginManagerInactiveTitleLinkToDoc"
+                  tooltipClasses="text-nowrap"
+                  tooltipText={props.tagList[key]}
                 >
-                </span>
-              </CustomTooltip>
-            )
-          )) }
-        </div> }
-        { !props.tagList && <span
-          className={'remixui_grid_cell_tags'}>
-        </span> }
+                  <span key={props.tagList[key]}
+                    className={'remixui_grid_cell_tag bg-' + filterCon.keyValueMap[props.tagList[key]].color}
+                  >
+                  </span>
+                </CustomTooltip>
+              )
+            )) }
+          </div> }
+          { !props.tagList && <span
+            className={'remixui_grid_cell_tags'}>
+          </span> }
+        </div>
+        { expand && <div>
+          { props.expandViewEl }
+        </div>
+        }
       </div> }
     </div>
   )
diff --git a/libs/remix-ui/grid-view/src/lib/remix-ui-grid-section.tsx b/libs/remix-ui/grid-view/src/lib/remix-ui-grid-section.tsx
index c1b332bc01..ca391c7685 100644
--- a/libs/remix-ui/grid-view/src/lib/remix-ui-grid-section.tsx
+++ b/libs/remix-ui/grid-view/src/lib/remix-ui-grid-section.tsx
@@ -16,6 +16,7 @@ interface RemixUIGridSectionProps {
   classList?: string
   styleList?: any
   children?: ReactNode
+  expandedCell?: any
 }
 
 export const RemixUIGridSection = (props: RemixUIGridSectionProps) => {
@@ -30,6 +31,10 @@ export const RemixUIGridSection = (props: RemixUIGridSectionProps) => {
         <div className={(props.hScrollable) ? `d-flex flex-row pb-2  overflow-auto` : `d-flex flex-wrap`}>
           { props.children }
         </div>
+        { props.expandedCell && <div>
+          { props.expandedCell }
+        </div>
+        }
       </div>
     </div>
   )
diff --git a/libs/remix-ui/grid-view/src/lib/remix-ui-grid-view.tsx b/libs/remix-ui/grid-view/src/lib/remix-ui-grid-view.tsx
index 4184de4967..6c6cc27bbd 100644
--- a/libs/remix-ui/grid-view/src/lib/remix-ui-grid-view.tsx
+++ b/libs/remix-ui/grid-view/src/lib/remix-ui-grid-view.tsx
@@ -1,7 +1,6 @@
 import React, {useState, useEffect, useContext, useRef, ReactNode} from 'react' // eslint-disable-line
 
 import './remix-ui-grid-view.css'
-import { ThemeContext, themes } from './themeContext'
 import CustomCheckbox from './components/customCheckbox'
 import FiltersContext from "./filtersContext"
 
@@ -28,7 +27,7 @@ interface RemixUIGridViewProps {
 
 export const RemixUIGridView = (props: RemixUIGridViewProps) => {
   const [keyValueMap, setKeyValueMap] = useState<Record<string, { enabled: boolean; color: string; }>>({});
-
+  const [filter, setFilter] = useState("")
   const showUntagged = props.showUntagged || false
   const showPin = props.showPin || false
   const updateValue = (key: string, enabled: boolean, color?: string) => {
@@ -39,6 +38,30 @@ export const RemixUIGridView = (props: RemixUIGridViewProps) => {
     }))
   }
 
+  const [state, setState] = useState<{
+    searchDisable: boolean
+  }>({
+    searchDisable: true
+  })
+  const searchInputRef = useRef(null)
+
+  const handleSearchKeyDown = (e: KeyboardEvent) => {
+    if (e.target !== searchInputRef.current) return
+    if (e.key === 'Enter') {
+      searchInputRef.current.value = ''
+    } else {
+      setState((prevState) => {
+        console.log("update filter", searchInputRef.current.value)
+        return {
+          ...prevState,
+          searchDisable: searchInputRef.current.value === '',
+          filter: searchInputRef.current.value
+        }
+      })
+      setFilter(searchInputRef.current.value)
+    }
+  }
+
   const addValue = (key: string, enabled: boolean, color: string) => {
     // Check if the key already exists, if so, do not add
     if (key in keyValueMap) {
@@ -52,17 +75,10 @@ export const RemixUIGridView = (props: RemixUIGridViewProps) => {
     }))
   }
 
-  const { plugin } = props.plugin
-  const searchInputRef = useRef(null)
-
-  const [state, setState] = useState<{
-    themeQuality: {filter: string; name: string}
-  }>({
-    themeQuality: themes.light
-  })
-
   // Initialize filters context with data from props
   useEffect(() => {
+    document.addEventListener('keyup', (e) => handleSearchKeyDown(e))
+
     if (props.tagList && Array.isArray(props.tagList)) {
       const initialKeyValueMap: Record<string, { enabled: boolean; color: string; }> = {};
 
@@ -74,71 +90,52 @@ export const RemixUIGridView = (props: RemixUIGridViewProps) => {
       if (showUntagged) initialKeyValueMap['no tag'] = { enabled: true, color: 'primary' }
       setKeyValueMap(initialKeyValueMap)
     }
+    return () => {
+      document.removeEventListener('keyup', handleSearchKeyDown)
+    }
   }, [])
 
-  useEffect(() => {
-    plugin?.call('theme', 'currentTheme').then((theme) => {
-      // update theme quality. To be used for for images
-      setState((prevState) => {
-        return {
-          ...prevState,
-          themeQuality: theme.quality === 'dark' ? themes.dark : themes.light
-        }
-      })
-    })
-    plugin?.on('theme', 'themeChanged', (theme) => {
-      // update theme quality. To be used for for images
-      setState((prevState) => {
-        return {
-          ...prevState,
-          themeQuality: theme.quality === 'dark' ? themes.dark : themes.light
-        }
-      })
-    })
-  }, [plugin])
-
   return (
-    <FiltersContext.Provider value={{ showUntagged, showPin, keyValueMap, updateValue, addValue }}>
+    <FiltersContext.Provider value={{ showUntagged, showPin, keyValueMap, updateValue, addValue, filter }}>
       <div className={"d-flex flex-column bg-dark w-100 h-100 remixui_grid_view_container " + props.classList || ''} data-id="remixUIGV">
-        <ThemeContext.Provider value={state.themeQuality}>
-          <div className="d-flex flex-column w-100 remixui_grid_view">
-            <div className='d-flex p-4 bg-light flex-column  remixui_grid_view_titlebar'>
-              <div className='d-flex flex-row align-items-center mb-2'>
-                { props.logo && <img className='remixui_grid_view_logo mr-2' src={props.logo} /> }
-                { props.title && <h3 className='mb-0'>{ props.title }</h3> }
-              </div>
-              { props.description && <div className='pb-3 remixui_grid_view_title'>{ props.description }</div> }
-              { props.enableFilter && <div className='d-flex flex-row'>
-                <div className="d-flex flex-row pr-2 pb-1 align-items-center justify-content-between">
-                  <div className='d-flex' id="GVFilter">
-                    <button
-                      className="remixui_grid_view_btn text-secondary form-control bg-light border d-flex align-items-center p-2 justify-content-center fas fa-filter bg-light"
-                      onClick={(e) => {
-                        _paq.push(['trackEvent', 'GridView' + props.title ? props.title : '', 'filter', searchInputRef.current.value])
-                        //setstate
-                      }}
-                    ></button>
-                    <input
-                      ref={searchInputRef}
-                      type="text"
-                      style={{ minWidth: '100px' }}
-                      className="border form-control border-right-0 mr-4"
-                      id="GVFilterInput"
-                      placeholder={"Filter the list"}
-                      data-id="RemixGVFilterInput"
-                    />
-                  </div>
-                  <div className='d-flex flex-row'>
-                    { Object.keys(keyValueMap).map((key) => (
-                      <CustomCheckbox label={key} />
-                    )) }
-                  </div>
-                </div>
-              </div> }
+        <div className="d-flex flex-column w-100 remixui_grid_view">
+          <div className='d-flex p-4 bg-light flex-column  remixui_grid_view_titlebar'>
+            <div className='d-flex flex-row align-items-center mb-2'>
+              { props.logo && <img className='remixui_grid_view_logo mr-2' src={props.logo} /> }
+              { props.title && <h3 className='mb-0'>{ props.title }</h3> }
             </div>
-            { props.children }
+            { props.description && <div className='pb-3 remixui_grid_view_title'>{ props.description }</div> }
+            { props.enableFilter && <div className='d-flex flex-row'>
+              <div className="d-flex flex-row pr-2 pb-1 align-items-center justify-content-between">
+                <div className='d-flex' id="GVFilter">
+                  <button
+                    disabled={state.searchDisable}
+                    className="remixui_grid_view_btn text-secondary form-control bg-light border d-flex align-items-center p-2 justify-content-center fas fa-filter bg-light"
+                    onClick={(e) => {
+                      setFilter(searchInputRef.current.value)
+                      _paq.push(['trackEvent', 'GridView' + props.title ? props.title : '', 'filter', searchInputRef.current.value])
+                    }}
+                  ></button>
+                  <input
+                    ref={searchInputRef}
+                    type="text"
+                    style={{ minWidth: '100px' }}
+                    className="border form-control border-right-0 mr-4"
+                    id="GVFilterInput"
+                    placeholder={"Filter the list"}
+                    data-id="RemixGVFilterInput"
+                  />
+                </div>
+                <div className='d-flex flex-row'>
+                  { Object.keys(keyValueMap).map((key) => (
+                    <CustomCheckbox label={key} />
+                  )) }
+                </div>
+              </div>
+            </div> }
           </div>
-        </ThemeContext.Provider>
+          { props.children }
+        </div>
       </div>
     </FiltersContext.Provider>
   )
diff --git a/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx b/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
index fbeaafe439..3f1c9a2788 100644
--- a/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
+++ b/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
@@ -47,6 +47,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
   }
 
   const modalKeyEvent = (keyCode) => {
+    console.log("modal key", keyCode)
     if (keyCode === 27) {
       // Esc
       if (props.cancelFn) props.cancelFn()