diff --git a/packages/web/components/templates/integrations/Readwise.tsx b/packages/web/components/templates/integrations/Readwise.tsx
index b58e75baf..3a64b0f56 100644
--- a/packages/web/components/templates/integrations/Readwise.tsx
+++ b/packages/web/components/templates/integrations/Readwise.tsx
@@ -10,8 +10,9 @@ import { FormInput } from '../../elements/FormElements'
 
 import { setIntegrationMutation } from '../../../lib/networking/mutations/setIntegrationMutation'
 import { Integration, useGetIntegrationsQuery } from '../../../lib/networking/queries/useGetIntegrationsQuery'
-import { Router, useRouter } from 'next/router'
-import { showSuccessToast } from '../../../lib/toastHelpers'
+import { useRouter } from 'next/router'
+import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
+import { deleteIntegrationMutation } from '../../../lib/networking/mutations/deleteIntegrationMutation'
 
 // Styles
 const Header = styled(Box, {
@@ -21,24 +22,10 @@ const Header = styled(Box, {
 })
 
 export function Readwise(): JSX.Element {
-  const router = useRouter()
-  const [token, setToken] = useState<string>('')
-  const [errorMessage, setErrorMessage] =
-    useState<string | undefined>(undefined)
-
-  const setReadwiseToken = useCallback(async () => {
-    try {
-      const result = await setIntegrationMutation({
-        token,
-        type: 'READWISE',
-        enabled: true,
-      })
-      router.push(`/settings/integrations`)
-      showSuccessToast('Your Readwise API token has been set.')
-    } catch (err) {
-      setErrorMessage('Error: ' + err)
-    }
-  }, [token])
+  const { integrations, isValidating, revalidate } = useGetIntegrationsQuery()
+  const readwiseIntegration = useMemo(() => {
+    return integrations.find((i) => i.type == 'READWISE')
+  }, [integrations])
 
   return (
     <VStack
@@ -69,60 +56,140 @@ export function Readwise(): JSX.Element {
         <Header>Readwise</Header>
       </HStack>
 
-      <HStack
-        css={{
-          fontSize: '18px',
-          color: '$utilityTextDefault',
-          m: '20px',
-          whiteSpace: 'pre-wrap'
-        }}
-      >
-        <SpanBox>Enter your API key from Readwise below. You can get your token{' '}
-        <Link
-          style={{ color: '$utilityTextDefault' }}
-          href="https://readwise.io/access_token"
-        >
-          here
-        </Link>.</SpanBox>
-      </HStack>
+      {!isValidating && readwiseIntegration && (
+        <RemoveReadwiseForm integration={readwiseIntegration} revalidate={revalidate} />
+      )}
+
+      {!isValidating && !readwiseIntegration && (
+        <AddReadwiseForm />
+      )}
 
-      <FormInput
-        type="token"
-        key="token"
-        value={token}
-        placeholder={'Readwise Token'}
-        onChange={(e) => {
-          e.preventDefault()
-          setToken(e.target.value)
-        }}
-        disabled={false}
-        hidden={false}
-        required={true}
-        css={{
-          border: '1px solid $textNonessential',
-          borderRadius: '8px',
-          width: '80%',
-          bg: 'transparent',
-          fontSize: '16px',
-          textIndent: '8px',
-          margin: '20px',
-          height: '38px',
-          color: '$grayTextContrast',
-          '&:focus': {
-            outline: 'none',
-            boxShadow: '0px 0px 2px 2px rgba(255, 234, 159, 0.56)',
-          },
-        }}
-        min={200}
-      />
-      {errorMessage && <StyledText style="error">{errorMessage}</StyledText>}
-      <Button
-        style="ctaDarkYellow"
-        css={{ my: '$2', margin: '20px' }}
-        onClick={setReadwiseToken}
-      >
-        Set Token
-      </Button>
     </VStack>
   )
 }
+
+
+function AddReadwiseForm(): JSX.Element {
+  const router = useRouter()
+
+  const [errorMessage, setErrorMessage] =
+  useState<string | undefined>(undefined)
+  const [token, setToken] = useState<string>('')
+
+  const setReadwiseToken = useCallback(async () => {
+    try {
+      const result = await setIntegrationMutation({
+        token,
+        type: 'READWISE',
+        enabled: true,
+      })
+      if (result) {
+        router.push(`/settings/integrations`)
+        showSuccessToast('Your Readwise API token has been set.')
+      } else {
+        setErrorMessage('There was an error connecting to Readwise.')
+      }
+    } catch (err) {
+      setErrorMessage('Error: ' + err)
+    }
+  }, [token, router])
+
+  return (<>
+    <HStack
+      css={{
+        fontSize: '18px',
+        color: '$utilityTextDefault',
+        my: '20px',
+        whiteSpace: 'pre-wrap'
+      }}
+    >
+      <SpanBox>Enter your API key from Readwise below. You can get your token{' '}
+      <Link
+        style={{ color: '$utilityTextDefault' }}
+        href="https://readwise.io/access_token"
+        target="_blank"
+      >
+        here
+      </Link>.</SpanBox>
+    </HStack>
+
+    <FormInput
+      type="token"
+      key="token"
+      value={token}
+      placeholder={'Readwise Token'}
+      onChange={(e) => {
+        e.preventDefault()
+        setToken(e.target.value)
+      }}
+      disabled={false}
+      hidden={false}
+      required={true}
+      css={{
+        border: '1px solid $textNonessential',
+        borderRadius: '8px',
+        width: '80%',
+        bg: 'transparent',
+        fontSize: '16px',
+        textIndent: '8px',
+        my: '20px',
+        height: '38px',
+        color: '$grayTextContrast',
+        '&:focus': {
+          outline: 'none',
+          boxShadow: '0px 0px 2px 2px rgba(255, 234, 159, 0.56)',
+        },
+      }}
+      min={200}
+    />
+    {errorMessage && <StyledText style="error">{errorMessage}</StyledText>}
+    <Button
+      style="ctaDarkYellow"
+      css={{  }}
+      onClick={setReadwiseToken}
+    >
+      Set Token
+    </Button>
+    </>
+  )
+}
+
+type RemoveReadwiseFormProps = {
+  integration: Integration
+  revalidate: () => void
+}
+
+function RemoveReadwiseForm(props: RemoveReadwiseFormProps): JSX.Element {
+  const deleteIntegration = useCallback(async () => {
+    try {
+      if (props.integration.id) {
+        const result = await deleteIntegrationMutation(props.integration.id)
+        if (result) {
+          props.revalidate()
+          showSuccessToast('Integration Removed')
+        } else {
+          showErrorToast('Error removing Readwise integration.')
+        }
+      }
+    } catch (err) {
+      showErrorToast('Error: ' + err)
+    }
+  }, [props])
+
+  return (
+  <>
+    <HStack
+      css={{
+        fontSize: '18px',
+        color: '$utilityTextDefault',
+        my: '20px',
+        whiteSpace: 'pre-wrap'
+      }}
+    >
+      <SpanBox>Omnivore is configured to send all your highlights to Readwise.</SpanBox>
+    </HStack>
+
+    <Button style="ctaDarkYellow" onClick={deleteIntegration}>Remove Readwise Integration</Button>
+  </>
+  )
+}
\ No newline at end of file