diff --git a/api/src/main/java/datawave/webservice/results/datadictionary/DefaultDataDictionary.java b/api/src/main/java/datawave/webservice/results/datadictionary/DefaultDataDictionary.java
index 222a4bb..8721458 100644
--- a/api/src/main/java/datawave/webservice/results/datadictionary/DefaultDataDictionary.java
+++ b/api/src/main/java/datawave/webservice/results/datadictionary/DefaultDataDictionary.java
@@ -18,6 +18,8 @@
 import javax.xml.bind.annotation.XmlTransient;
 
 import com.google.common.collect.Lists;
+import com.google.gson.Gson;
+import com.google.gson.JsonObject;
 import datawave.webservice.HtmlProvider;
 import datawave.webservice.query.result.metadata.DefaultMetadataField;
 import datawave.webservice.result.TotalResultsAware;
@@ -26,6 +28,7 @@
 import io.protostuff.Message;
 import io.protostuff.Output;
 import io.protostuff.Schema;
+import org.apache.avro.data.Json;
 
 @XmlRootElement(name = "DefaultDataDictionary")
 @XmlAccessorType(XmlAccessType.NONE)
@@ -42,9 +45,14 @@ public class DefaultDataDictionary extends DataDictionaryBase<DefaultDataDiction
      * Pagination on the table is turned off, we do an ascending sort on the 2nd column (field name) and a cookie is saved in the browser that will leave the
      * last sort in place upon revisit of the page.
      */
-    private static final String DATA_TABLES_TEMPLATE = "<script type=''text/javascript'' src=''{0}jquery.min.js''></script>\n"
-                    + "<script type=''text/javascript'' src=''{1}jquery.dataTables.min.js''></script>\n" + "<script type=''text/javascript''>\n"
-                    + "$(document).ready(function() '{' $(''#myTable'').dataTable('{'\"bPaginate\": false, \"aaSorting\": [[0, \"asc\"]], \"bStateSave\": true'}') '}')\n"
+    private static final String AG_GRID_TEMPLATE = "<script type=''text/javascript'' src=''{0}jquery.min.js''></script>\n"
+                    + "<script type=''text/javascript'' src=''{1}24.0.0/dist/ag-grid-community.min.js''></script>\n" + "<script type=''text/javascript''>\n"
+                    + "var columnDefs = [\n" + "  " + " '{'headerName: \"FieldName\", field: \"fieldname\"'}',\n"
+                    + " '{'headerName: \"Internal FieldName\", field: \"internalFieldName\"'}',\n" + " '{'headerName: \"Data Type\", field: \"datatype\"'}',\n"
+                    + " '{'headerName: \"Index Only\", field: \"indexOnly\"'}',\n" + " '{'headerName: \"Forward Indexed\", field: \"forwardIndexed\"'}',\n"
+                    + " '{'headerName: \"Reverse Indexed\", field: \"reverseIndexed\"'}',\n" + " '{'headerName: \"Normalized\", field: \"normalized\"'}',\n"
+                    + " '{'headerName: \"Types\", field: \"types\"'}',\n" + " '{'headerName: \"Tokenized\", field: \"tokenized\"'}',\n"
+                    + " '{'headerName: \"Description\", field: \"description\"'}',\n" + " '{'headerName: \"Last Updated\", field: \"lastUpdated\"'}'\n" + "];\n"
                     + "</script>\n";
     
     private final String dataTablesHeader;
@@ -57,11 +65,11 @@ public class DefaultDataDictionary extends DataDictionaryBase<DefaultDataDiction
     private Long totalResults = null;
     
     public DefaultDataDictionary() {
-        this("/webjars/jquery/", "/webjars/datatables/");
+        this("/webjars/jquery/", "/webjars/ag-grid-community/");
     }
     
     public DefaultDataDictionary(String jqueryUri, String datatablesUri) {
-        this.dataTablesHeader = MessageFormat.format(DATA_TABLES_TEMPLATE, jqueryUri, datatablesUri);
+        this.dataTablesHeader = MessageFormat.format(AG_GRID_TEMPLATE, jqueryUri, datatablesUri);
     }
     
     public DefaultDataDictionary(Collection<DefaultMetadataField> fields) {
@@ -205,16 +213,24 @@ public String getMainContent() {
         builder.append("query terms will be treated (e.g. text, number, IPv4 address, etc). The same applies for the reverse index types with ");
         builder.append("the caveat that you can also query these fields using leading wildcards. Fields that are marked as 'Index only' will not ");
         builder.append("appear in a result set unless explicitly queried on. Index only fields are typically composite fields, derived from actual data, ");
-        builder.append("created by the software to make querying easier.</p>");
-        builder.append("</div>");
-        builder.append("<table id=\"myTable\">\n");
+        builder.append("created by the software to make querying easier.</p><input type=\"text\" id=\"filter-text-box\" placeholder=\"Filter...\" oninput=\"onFilterTextBoxChanged()\"/>");
         
-        builder.append("<thead><tr><th>FieldName</th><th>Internal FieldName</th><th>DataType</th>");
-        builder.append("<th>Index only</th><th>Forward Indexed</th><th>Reverse Indexed</th><th>Normalized</th><th>Types</th><th>Tokenized</th><th>Description</th><th>LastUpdated</th></tr></thead>");
+        builder.append("</div><div id=\"myGrid\" style=\"margin-left: auto;\n" + "        margin-right: auto;" + "        min-width: 60%;"
+                        + "        max-width: 95%;" + "        border: 1px #333333 solid;" + "        border-spacing-top: 0;"
+                        + "        border-spacing-bottom: 0;" + "        border: 1px #333333 solid;"
+                        + "        border: 1px #333333 solid;\" class=\"ag-theme-alpine\"></div>");
         
-        builder.append("<tbody>");
+        builder.append("<script type=''text/javascript''>\n var rowData = [");
+        boolean first = true;
+        Gson gson = new Gson();
         for (DefaultMetadataField f : this.getFields()) {
-            builder.append("<tr>");
+            if (!first) {
+                builder.append(",");
+            } else {
+                first = false;
+            }
+            
+            JsonObject jsonObject = new JsonObject();
             
             String fieldName = (null == f.getFieldName()) ? EMPTY_STR : f.getFieldName();
             String internalFieldName = (null == f.getInternalFieldName()) ? EMPTY_STR : f.getInternalFieldName();
@@ -230,32 +246,39 @@ public String getMainContent() {
                 }
             }
             
-            builder.append("<td>").append(fieldName).append("</td>");
-            builder.append("<td>").append(internalFieldName).append("</td>");
-            builder.append("<td>").append(datatype).append("</td>");
-            builder.append("<td>").append(f.isIndexOnly()).append("</td>");
-            builder.append("<td>").append(f.isForwardIndexed() ? true : "").append("</td>");
-            builder.append("<td>").append(f.isReverseIndexed() ? true : "").append("</td>");
-            builder.append("<td>").append(f.getTypes() != null && f.getTypes().size() > 0 ? "true" : "false").append("</td>");
-            builder.append("<td>").append(types).append("</td>");
-            builder.append("<td>").append(f.isTokenized() ? true : "").append("</td>");
-            builder.append("<td>");
+            jsonObject.addProperty("fieldname", fieldName);
+            jsonObject.addProperty("internalFieldName", internalFieldName);
+            jsonObject.addProperty("datatype", datatype);
+            jsonObject.addProperty("indexOnly", f.isIndexOnly());
+            jsonObject.addProperty("forwardIndexed", f.isForwardIndexed() ? "true" : "");
+            jsonObject.addProperty("reverseIndexed", f.isReverseIndexed() ? "true" : "");
+            jsonObject.addProperty("normalized", f.getTypes() != null && f.getTypes().size() > 0 ? "true" : "false");
+            jsonObject.addProperty("types", types.toString());
+            jsonObject.addProperty("tokenized", f.isTokenized() ? "true" : "");
             
-            boolean first = true;
+            boolean firstDesc = true;
+            StringBuilder descriptionBuilder = new StringBuilder();
             for (DescriptionBase desc : f.getDescriptions()) {
-                if (!first) {
+                if (!firstDesc) {
                     builder.append(", ");
                 }
-                builder.append(desc.getMarkings()).append(" ").append(desc.getDescription());
-                first = false;
+                descriptionBuilder.append(desc.getMarkings()).append(" ").append(desc.getDescription());
+                firstDesc = false;
             }
             
-            builder.append("</td>");
-            builder.append("<td>").append(f.getLastUpdated()).append("</td>").append("</tr>");
+            jsonObject.addProperty("description", descriptionBuilder.toString());
+            jsonObject.addProperty("lastUpdated", f.getLastUpdated());
+            builder.append(gson.toJson(jsonObject));
         }
-        builder.append("</tbody>");
-        
-        builder.append("</table>\n");
+        builder.append("];\n");
+        builder.append("    \n" + "// specify the data\n" + "// let the grid know which columns and what data to use\n" + "var gridOptions = {\n"
+                        + "  columnDefs: columnDefs,\n"
+                        + "  rowData: rowData,paginationAutoPageSize: true, pagination: true,\ndefaultColDef: { resizable: true, sortable: true, filter: true\n"
+                        + "  }," + "};\n" + "\n" + "// setup the grid after the page has finished loading\n" + "\n"
+                        + "    new agGrid.Grid($('#myGrid').get(0), gridOptions);\n" + "\n" + "function onFilterTextBoxChanged() {\n"
+                        + "    gridOptions.api.setQuickFilter(document.getElementById('filter-text-box').value);\n"
+                        + "    gridOptions.api.autoSizeAllColumns(true); }");
+        builder.append("</script>\n");
         
         return builder.toString();
     }
diff --git a/service/pom.xml b/service/pom.xml
index 9072f2a..d8fbe20 100644
--- a/service/pom.xml
+++ b/service/pom.xml
@@ -21,7 +21,7 @@
         <start-class>datawave.microservice.dictionary.DictionaryService</start-class>
         <version.microservice.dictionary-api>1.2-SNAPSHOT</version.microservice.dictionary-api>
         <version.microservice.starter>1.6.3</version.microservice.starter>
-        <version.webjars.datatables>1.10.19</version.webjars.datatables>
+        <version.webjars.ag-grid-community>24.0.0</version.webjars.ag-grid-community>
         <version.webjars.jquery>3.3.1-2</version.webjars.jquery>
     </properties>
     <dependencyManagement>
@@ -36,16 +36,16 @@
                 <artifactId>spring-boot-starter-datawave</artifactId>
                 <version>${version.microservice.starter}</version>
             </dependency>
-            <dependency>
-                <groupId>org.webjars</groupId>
-                <artifactId>datatables</artifactId>
-                <version>${version.webjars.datatables}</version>
-            </dependency>
             <dependency>
                 <groupId>org.webjars</groupId>
                 <artifactId>jquery</artifactId>
                 <version>${version.webjars.jquery}</version>
             </dependency>
+            <dependency>
+                <groupId>org.webjars.npm</groupId>
+                <artifactId>ag-grid-community</artifactId>
+                <version>${version.webjars.ag-grid-community}</version>
+            </dependency>
             <dependency>
                 <groupId>gov.nsa.datawave.microservice</groupId>
                 <artifactId>spring-boot-starter-datawave</artifactId>
@@ -76,10 +76,6 @@
             <groupId>org.apache.accumulo</groupId>
             <artifactId>accumulo-core</artifactId>
         </dependency>
-        <dependency>
-            <groupId>org.webjars</groupId>
-            <artifactId>datatables</artifactId>
-        </dependency>
         <dependency>
             <groupId>org.webjars</groupId>
             <artifactId>jquery</artifactId>
@@ -88,6 +84,10 @@
             <groupId>org.webjars</groupId>
             <artifactId>webjars-locator-core</artifactId>
         </dependency>
+        <dependency>
+            <groupId>org.webjars.npm</groupId>
+            <artifactId>ag-grid-community</artifactId>
+        </dependency>
         <dependency>
             <groupId>gov.nsa.datawave.contrib</groupId>
             <artifactId>datawave-in-memory-accumulo</artifactId>
diff --git a/service/src/main/java/datawave/microservice/dictionary/config/DictionaryServiceConfiguration.java b/service/src/main/java/datawave/microservice/dictionary/config/DictionaryServiceConfiguration.java
index 65d446a..1d20395 100644
--- a/service/src/main/java/datawave/microservice/dictionary/config/DictionaryServiceConfiguration.java
+++ b/service/src/main/java/datawave/microservice/dictionary/config/DictionaryServiceConfiguration.java
@@ -71,7 +71,7 @@ public ResponseObjectFactory<DefaultDescription,DefaultDataDictionary,DefaultMet
             @Override
             public DefaultDataDictionary getDataDictionary() {
                 return new DefaultDataDictionary(datawaveServerProperties.getCdnUri() + "webjars/jquery/",
-                                datawaveServerProperties.getCdnUri() + "webjars/datatables/js/");
+                                datawaveServerProperties.getCdnUri() + "webjars/ag-grid-community/");
             }
             
             @Override