diff --git a/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte b/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte
new file mode 100644
index 0000000000..720cd78f42
--- /dev/null
+++ b/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte
@@ -0,0 +1,41 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import { DropdownMenu, TextButton as Button, Icon } from "@budibase/bbui"
+  import AttachmentList from "../../attachments/AttachmentList.svelte"
+  //   import Modal from "./Modal.svelte"
+
+  const dispatch = createEventDispatcher()
+
+  let anchor
+  let dropdown
+
+  export let files
+</script>
+
+<div bind:this={anchor}>
+  <Button text small on:click={dropdown.show}>
+    <Icon name="edit" />
+  </Button>
+  <AttachmentList {files} />
+</div>
+<DropdownMenu bind:this={dropdown} {anchor} align="left">
+  <h5>Edit Attachment(s)</h5>
+  <!-- <Modal
+        {_bb}
+        {model}
+        onClosed={dropdown.hide}
+        on:newRecord={() => dispatch('newRecord')} /> -->
+</DropdownMenu>
+
+<style>
+  div {
+    display: grid;
+    grid-template-columns: auto auto;
+    place-items: start center;
+  }
+  h5 {
+    padding: var(--spacing-xl) 0 0 var(--spacing-xl);
+    margin: 0;
+    font-weight: 500;
+  }
+</style>
diff --git a/packages/standard-components/src/DataGrid/AttachmentCell/Modal.svelte b/packages/standard-components/src/DataGrid/AttachmentCell/Modal.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index f1ce5e6446..4ab465bfbc 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -31,6 +31,7 @@
     const jsonModel = await _bb.api.get(`/api/models/${datasource.modelId}`)
     model = await jsonModel.json()
     const { schema } = model
+    console.log(schema)
     if (!isEmpty(datasource)) {
       data = await fetchData(datasource)
       columnDefs = Object.keys(schema).map((key, i) => {
@@ -43,7 +44,7 @@
           hide: shouldHideField(key),
           sortable: true,
           editable:
-            schema[key].type !== "boolean" || schema[key].type !== "attachment",
+            schema[key].type !== "boolean" && schema[key].type !== "attachment",
           cellRenderer: renderers.get(schema[key].type),
           autoHeight: schema[key].type === "attachment",
         }
diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js
index 301817f0c4..3d5966aeb0 100644
--- a/packages/standard-components/src/DataGrid/customRenderer.js
+++ b/packages/standard-components/src/DataGrid/customRenderer.js
@@ -1,7 +1,7 @@
 // Custom renderers to handle special types
 // https://www.ag-grid.com/javascript-grid-cell-rendering-components/
 
-import AttachmentList from '../attachments/AttachmentList.svelte'
+import AttachmentCell from './AttachmentCell/Button.svelte'
 
 export const booleanRenderer = (params) => {
     const toggle = (e) => {
@@ -18,11 +18,9 @@ export const booleanRenderer = (params) => {
 export const attachmentRenderer = (params) => {
     let container = document.createElement("div")
 
-    const app = new AttachmentList({
+    const attachment = new AttachmentCell({
         target: container,
         props: {
-            // assuming App.svelte contains something like
-            // `export let answer`:
             files: params.value || [],
         }
     });
diff --git a/packages/standard-components/src/attachments/AttachmentList.svelte b/packages/standard-components/src/attachments/AttachmentList.svelte
index b116070ed7..eca7fbc582 100644
--- a/packages/standard-components/src/attachments/AttachmentList.svelte
+++ b/packages/standard-components/src/attachments/AttachmentList.svelte
@@ -1,18 +1,12 @@
 <script>
-  import { cssVars } from "../cssVars.js"
   import { FILE_TYPES } from "./fileTypes"
 
   export let files
-  export let height = 70
-  export let width = 70
-
-  $: cssVariables = {
-    width,
-    height,
-  }
+  export let height
+  export let width
 </script>
 
-<div class="file-list" use:cssVars={cssVariables}>
+<div class="file-list">
   {#each files as file}
     <a href={file.url} target="_blank">
       <div class="file">
@@ -63,7 +57,7 @@
   }
 
   span {
-    width: 75px;
+    width: 200px;
     overflow: hidden;
     text-overflow: ellipsis;
   }