diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/rules/static/js/rule.js b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/rules/static/js/rule.js
index 334898a09..48f055b41 100644
--- a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/rules/static/js/rule.js
+++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/rules/static/js/rule.js
@@ -6,6 +6,8 @@
 // This software is released under the PostgreSQL Licence
 //
 //////////////////////////////////////////////////////////////
+import RuleSchema from './rule.ui';
+
 
 define('pgadmin.node.rule', [
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore',
@@ -112,7 +114,14 @@ define('pgadmin.node.rule', [
         },
         ]);
       },
-
+      getSchema: function(treeNodeInfo, itemNodeData) {
+        return new RuleSchema(
+          {
+            nodeInfo: treeNodeInfo,
+            nodeData: itemNodeData
+          }
+        );
+      },
       /**
         Define model for the rule node and specify the node
         properties of the model in schema.
@@ -136,59 +145,6 @@ define('pgadmin.node.rule', [
           id: 'oid', label: gettext('OID'),
           type: 'text', mode: ['properties'],
         },
-        {
-          id: 'schema', label:'',
-          type: 'text', visible: false, disabled: function(m) {
-            // It is used while generating sql
-            m.set('schema', m.node_info.schema.label);
-          },
-        },
-        {
-          id: 'view', label:'',
-          type: 'text', visible: false, disabled: function(m){
-
-            // It is used while generating sql
-            m.set('view', this.node_data.label);
-          },
-        },
-        {
-          id: 'event', label: gettext('Event'), control: 'select2',
-          group: gettext('Definition'), type: 'text',
-          select2: {
-            width: '100%',
-            allowClear: false,
-          },
-          options:[
-            {label: 'SELECT', value: 'SELECT'},
-            {label: 'INSERT', value: 'INSERT'},
-            {label: 'UPDATE', value: 'UPDATE'},
-            {label: 'DELETE', value: 'DELETE'},
-          ],
-        },
-        {
-          id: 'do_instead', label: gettext('Do instead?'), group: gettext('Definition'),
-          type: 'switch',
-        },
-        {
-          id: 'condition', label: gettext('Condition'),
-          type: 'text', group: gettext('Condition'),
-          tabPanelCodeClass: 'sql-code-control',
-          control: Backform.SqlCodeControl,
-        },
-        {
-          id: 'statements', label: gettext('Commands'),
-          type: 'text', group: gettext('Commands'),
-          tabPanelCodeClass: 'sql-code-control',
-          control: Backform.SqlCodeControl,
-        },
-        {
-          id: 'system_rule', label: gettext('System rule?'),
-          type: 'switch', mode: ['properties'],
-        },
-        {
-          id: 'enabled', label: gettext('Enabled?'),
-          type: 'switch', mode: ['properties'],
-        },
         {
           id: 'comment', label: gettext('Comment'), cell: 'string', type: 'multiline',
         },
diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/rules/static/js/rule.ui.js b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/rules/static/js/rule.ui.js
new file mode 100644
index 000000000..777de8b17
--- /dev/null
+++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/rules/static/js/rule.ui.js
@@ -0,0 +1,106 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2021, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import gettext from 'sources/gettext';
+import BaseUISchema from 'sources/SchemaView/base_schema.ui';
+
+
+export default class RuleSchema extends BaseUISchema {
+  constructor(fieldOptions={}) {
+    super({
+      oid: undefined,
+      name: undefined,
+      schema: undefined
+    });
+
+    this.fieldOptions = {
+      nodeInfo: undefined,
+      nodeData: undefined,
+      ...fieldOptions,
+    };
+
+  }
+
+  get idAttribute() {
+    return 'oid';
+  }
+
+
+  get baseFields() {
+    let obj = this;
+    return [
+      {
+        id: 'name', label: gettext('Name'),
+        type: 'text', disabled: (state) => {
+          // disable name field it it is system rule
+          if (state.name == '_RETURN') {
+            return true;
+          }
+          if (obj.isNew(state) || obj.fieldOptions.nodeInfo.server.version >= 90400) {
+            return false;
+          }
+          return true;
+        }, noEmpty: true
+      },
+      {
+        id: 'oid', label: gettext('OID'),
+        type: 'text', mode: ['properties'],
+      },
+      {
+        id: 'schema', label:'',
+        type: 'text', visible: false, disabled: (state) => {
+          // It is used while generating sql
+          state.schema = obj.fieldOptions.nodeInfo.schema.label;
+        },
+      },
+      {
+        id: 'view', label:'',
+        type: 'text', visible: false, disabled: (state) => {
+          // It is used while generating sql
+          state.view = obj.fieldOptions.nodeData.label;
+        },
+      },
+      {
+        id: 'event', label: gettext('Event'), control: 'select2',
+        group: gettext('Definition'), type: 'select',
+        controlProps: { allowClear: false },
+        options:[
+          {label: 'SELECT', value: 'SELECT'},
+          {label: 'INSERT', value: 'INSERT'},
+          {label: 'UPDATE', value: 'UPDATE'},
+          {label: 'DELETE', value: 'DELETE'},
+        ],
+      },
+      {
+        id: 'do_instead', label: gettext('Do instead?'), group: gettext('Definition'),
+        type: 'switch',
+      },
+      {
+        id: 'condition', label: gettext('Condition'),
+        type: 'sql', isFullTab: true, group: gettext('Condition'),
+
+      },
+      {
+        id: 'statements', label: gettext('Commands'),
+        type: 'sql', isFullTab: true, group: gettext('Commands'),
+      },
+      {
+        id: 'system_rule', label: gettext('System rule?'),
+        type: 'switch', mode: ['properties'],
+      },
+      {
+        id: 'enabled', label: gettext('Enabled?'),
+        type: 'switch', mode: ['properties'],
+      },
+      {
+        id: 'comment', label: gettext('Comment'), cell: 'text', type: 'multiline',
+      },
+    ];
+  }
+}
diff --git a/web/regression/javascript/schema_ui_files/rule.ui.spec.js b/web/regression/javascript/schema_ui_files/rule.ui.spec.js
new file mode 100644
index 000000000..ed2d4d30a
--- /dev/null
+++ b/web/regression/javascript/schema_ui_files/rule.ui.spec.js
@@ -0,0 +1,98 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2021, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import jasmineEnzyme from 'jasmine-enzyme';
+import React from 'react';
+import '../helper/enzyme.helper';
+import { createMount } from '@material-ui/core/test-utils';
+import pgAdmin from 'sources/pgadmin';
+import {messages} from '../fake_messages';
+import SchemaView from '../../../pgadmin/static/js/SchemaView';
+import RuleSchema from '../../../pgadmin/browser/server_groups/servers/databases/schemas/tables/rules/static/js/rule.ui';
+
+
+describe('RuleSchema', ()=>{
+  let mount;
+  let schemaObj = new RuleSchema(
+    {
+      nodeInfo: {schema: {label: 'public'}, server: {version: 90400}},
+      nodeData: {label: 'Test'}
+    },
+  );
+  let getInitData = ()=>Promise.resolve({});
+
+  /* Use createMount so that material ui components gets the required context */
+  /* https://material-ui.com/guides/testing/#api */
+  beforeAll(()=>{
+    mount = createMount();
+  });
+
+  afterAll(() => {
+    mount.cleanUp();
+  });
+
+  beforeEach(()=>{
+    jasmineEnzyme();
+    /* messages used by validators */
+    pgAdmin.Browser = pgAdmin.Browser || {};
+    pgAdmin.Browser.messages = pgAdmin.Browser.messages || messages;
+    pgAdmin.Browser.utils = pgAdmin.Browser.utils || {};
+  });
+
+  it('create', ()=>{
+    mount(<SchemaView
+      formType='dialog'
+      schema={schemaObj}
+      viewHelperProps={{
+        mode: 'create',
+      }}
+      onSave={()=>{}}
+      onClose={()=>{}}
+      onHelp={()=>{}}
+      onEdit={()=>{}}
+      onDataChange={()=>{}}
+      confirmOnCloseReset={false}
+      hasSQL={false}
+      disableSqlHelp={false}
+    />);
+  });
+
+  it('edit', ()=>{
+    mount(<SchemaView
+      formType='dialog'
+      schema={schemaObj}
+      getInitData={getInitData}
+      viewHelperProps={{
+        mode: 'edit',
+      }}
+      onSave={()=>{}}
+      onClose={()=>{}}
+      onHelp={()=>{}}
+      onEdit={()=>{}}
+      onDataChange={()=>{}}
+      confirmOnCloseReset={false}
+      hasSQL={false}
+      disableSqlHelp={false}
+    />);
+  });
+
+  it('properties', ()=>{
+    mount(<SchemaView
+      formType='tab'
+      schema={schemaObj}
+      getInitData={getInitData}
+      viewHelperProps={{
+        mode: 'properties',
+      }}
+      onHelp={()=>{}}
+      onEdit={()=>{}}
+    />);
+  });
+});
+
