diff --git a/web/pgadmin/static/css/overrides.css b/web/pgadmin/static/css/overrides.css
index fdefc74..2f178cb 100755
--- a/web/pgadmin/static/css/overrides.css
+++ b/web/pgadmin/static/css/overrides.css
@@ -798,4 +798,42 @@ td.edit-cell.editable.sortable.renderable.editor {
 .backgrid .textarea-cell.editor textarea {
     width: 100%;
     height: auto;
-}
\ No newline at end of file
+}
+
+/* CSS for SqlField control */
+.sql_field_layout {
+    border: 1px solid rgba(204, 204, 204, 0.16) !important;
+}
+
+/*
+ * Remove border right from "CodeMirror-gutters"
+ * class becuase its height doesn't increase
+ * with every new line added, instead add border
+ * right to ".CodeMirror-linenumber" class which
+ * adds a new div for every new line added
+ */
+.sql_field_layout .CodeMirror-gutters {
+    border-right: none;
+}
+
+.sql_field_layout .CodeMirror-linenumber {
+    border-right: 1px solid #ddd;
+    background-color: #f7f7f7;
+}
+
+/* Define custom height for use in SqlField control */
+.sql_field_height_100 {
+    height: 100px;
+}
+
+.sql_field_height_200 {
+    height: 200px;
+}
+
+.sql_field_height_300 {
+    height: 300px;
+}
+
+.sql_field_height_400 {
+    height: 400px;
+}
diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js
index 39e3233..1a1b5f0 100644
--- a/web/pgadmin/static/js/backform.pgadmin.js
+++ b/web/pgadmin/static/js/backform.pgadmin.js
@@ -1728,12 +1728,27 @@
 
     defaults: {
       label: "",
-      extraClasses: [],
+      extraClasses: ['sql_field_height_300'], // Add default control height
       helpMessage: null,
       maxlength: 4096,
       rows: undefined
     },
 
+    // Customize template to add new styles
+    template: _.template([
+      '<label class="<%=Backform.controlLabelClassName%>"><%=label%></label>',
+      '<div class="<%=Backform.controlsClassName%> sql_field_layout <%=extraClasses.join(\' \')%>">',
+      '  <textarea ',
+      '    class="<%=Backform.controlClassName%> " name="<%=name%>"',
+      '    maxlength="<%=maxlength%>" placeholder="<%-placeholder%>" <%=disabled ? "disabled" : ""%>',
+      '    rows=<%=rows%>',
+      '    <%=required ? "required" : ""%>><%-value%></textarea>',
+      '  <% if (helpMessage && helpMessage.length) { %>',
+      '    <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
+      '  <% } %>',
+      '</div>'
+    ].join("\n")),
+
     /*
      * Initialize the SQL Field control properly
      */