diff --git a/components/ExtraSummons/index.tsx b/components/ExtraSummons/index.tsx
index 4ef55272..ea3f7993 100644
--- a/components/ExtraSummons/index.tsx
+++ b/components/ExtraSummons/index.tsx
@@ -11,6 +11,7 @@ interface Props {
   exists: boolean
   found?: boolean
   offset: number
+  removeSummon: (id: string) => void
   updateObject: (object: SearchableObject, position: number) => void
   updateUncap: (id: string, position: number, uncap: number) => void
 }
@@ -31,6 +32,7 @@ const ExtraSummons = (props: Props) => {
                 editable={props.editable}
                 position={props.offset + i}
                 unitType={1}
+                removeSummon={props.removeSummon}
                 gridSummon={props.grid[props.offset + i]}
                 updateObject={props.updateObject}
                 updateUncap={props.updateUncap}
diff --git a/components/SummonGrid/index.tsx b/components/SummonGrid/index.tsx
index de1847bb..23500bff 100644
--- a/components/SummonGrid/index.tsx
+++ b/components/SummonGrid/index.tsx
@@ -209,6 +209,23 @@ const SummonGrid = (props: Props) => {
     setPreviousUncapValues(newPreviousValues)
   }
 
+  async function removeSummon(id: string) {
+    try {
+      const response = await api.endpoints.grid_summons.destroy({ id: id })
+      const data = response.data
+
+      if (data.position === -1) {
+        appState.grid.summons.mainSummon = undefined
+      } else if (data.position === 6) {
+        appState.grid.summons.friendSummon = undefined
+      } else {
+        appState.grid.summons.allSummons[response.data.position] = undefined
+      }
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
   // Render: JSX components
   const mainSummonElement = (
     <div className="LabeledUnit">
@@ -219,6 +236,7 @@ const SummonGrid = (props: Props) => {
         key="grid_main_summon"
         position={-1}
         unitType={0}
+        removeSummon={removeSummon}
         updateObject={receiveSummonFromSearch}
         updateUncap={initiateUncapUpdate}
       />
@@ -251,6 +269,7 @@ const SummonGrid = (props: Props) => {
                 editable={party.editable}
                 position={i}
                 unitType={1}
+                removeSummon={removeSummon}
                 updateObject={receiveSummonFromSearch}
                 updateUncap={initiateUncapUpdate}
               />
@@ -266,6 +285,7 @@ const SummonGrid = (props: Props) => {
       editable={party.editable}
       exists={false}
       offset={numSummons}
+      removeSummon={removeSummon}
       updateObject={receiveSummonFromSearch}
       updateUncap={initiateUncapUpdate}
     />
diff --git a/utils/api.tsx b/utils/api.tsx
index 5fe6d589..0acb1d40 100644
--- a/utils/api.tsx
+++ b/utils/api.tsx
@@ -154,6 +154,7 @@ api.createEntity({ name: 'users' })
 api.createEntity({ name: 'parties' })
 api.createEntity({ name: 'grid_characters' })
 api.createEntity({ name: 'grid_weapons' })
+api.createEntity({ name: 'grid_summons' })
 api.createEntity({ name: 'characters' })
 api.createEntity({ name: 'weapons' })
 api.createEntity({ name: 'summons' })