diff --git a/apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx b/apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx
index d8b70d5557..6e024880d6 100644
--- a/apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx
+++ b/apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx
@@ -151,13 +151,14 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
         description="Select a template to create a workspace or to add it to current workspace"
       >
         {
-          templates(window._intl).map(template => {
+          templates(window._intl, this).map(template => {
             return <RemixUIGridSection
               plugin={this}
               key={template.name}
               title={template.name}
+              tooltipTitle={template.tooltip}
+              onClickTitle={template.onClick}
               hScrollable={false}
-              header={template.source === 'plugin' ? <button className="btn border" onClick={() => { this.call('manager', 'activatePlugin', template.payload.pluginName)  }}>Open Cookbook to load more contracts</button> : ''}
             >              
               {template.items.map(item => {
                 return <RemixUIGridCell
diff --git a/apps/remix-ide/src/app/plugins/templates-selection/templates.ts b/apps/remix-ide/src/app/plugins/templates-selection/templates.ts
index 2e7ad74fa5..1419bb7e50 100644
--- a/apps/remix-ide/src/app/plugins/templates-selection/templates.ts
+++ b/apps/remix-ide/src/app/plugins/templates-selection/templates.ts
@@ -1,5 +1,4 @@
-
-export const templates = (intl) => {
+export const templates = (intl, plugin) => {
   return [
     {
       name: "Generic",
@@ -260,9 +259,9 @@ export const templates = (intl) => {
     },
     {
       name: "Cookbook",
-      source: "plugin",
-      payload: {
-        pluginName: 'cookbookdev'
+      tooltip: "Cookbook is a smart contract search tool. Click here to open cookbook and browse contracts.",
+      onClick: () => {
+        plugin.call('manager', 'activatePlugin', 'cookbookdev')
       },
       items: [
         { value: "token-sale", displayName: 'Token Sale' },
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 d6d861f3b9..d2a9da36e5 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
@@ -1,4 +1,5 @@
 import React, {useState, useEffect, useContext, useRef, ReactNode} from 'react' // eslint-disable-line
+import { CustomTooltip } from "@remix-ui/helper";
 
 import './remix-ui-grid-section.css'
 import FiltersContext from "./filtersContext"
@@ -13,6 +14,8 @@ const _paq = window._paq = window._paq || []
 interface RemixUIGridSectionProps {
   plugin: any
   title?: string
+  onClickTitle?: () => void
+  tooltipTitle?: string
   hScrollable: boolean
   classList?: string
   styleList?: any