diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx
index b4c4193ff36ae..88d820c5e2f5c 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx
@@ -137,7 +137,7 @@ const PolicyTableRowHeader = ({
                 },
               }}
             >
-              <AiIconAnimation className="scale-75 [&>div>div]:border-black dark:[&>div>div]:border-white" />
+              <AiIconAnimation size={16} />
             </ButtonTooltip>
           </div>
         </div>
diff --git a/apps/studio/components/interfaces/BranchManagement/BranchManagement.tsx b/apps/studio/components/interfaces/BranchManagement/BranchManagement.tsx
index 74b5b4919395b..3928bea2096ec 100644
--- a/apps/studio/components/interfaces/BranchManagement/BranchManagement.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/BranchManagement.tsx
@@ -78,25 +78,7 @@ const BranchManagement = () => {
     isLoading: isLoadingBranches,
     isError: isErrorBranches,
     isSuccess: isSuccessBranches,
-  } = useBranchesQuery(
-    { projectRef },
-    {
-      refetchInterval(data) {
-        if (
-          data?.some(
-            (branch) =>
-              branch.status === 'CREATING_PROJECT' ||
-              branch.status === 'RUNNING_MIGRATIONS' ||
-              branch.status === 'MIGRATIONS_FAILED'
-          )
-        ) {
-          return 1000 * 3 // 3 seconds
-        }
-
-        return false
-      },
-    }
-  )
+  } = useBranchesQuery({ projectRef })
   const [[mainBranch], previewBranchesUnsorted] = partition(branches, (branch) => branch.is_default)
   const previewBranches = previewBranchesUnsorted.sort((a, b) =>
     new Date(a.updated_at) < new Date(b.updated_at) ? 1 : -1
diff --git a/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx b/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx
index 609998fd789dc..bc11bf2eccd7c 100644
--- a/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx
+++ b/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx
@@ -149,9 +149,7 @@ const FunctionsList = ({
                       type="default"
                       disabled={!canCreateFunctions}
                       className="px-1 pointer-events-auto"
-                      icon={
-                        <AiIconAnimation className="scale-75 [&>div>div]:border-black dark:[&>div>div]:border-white" />
-                      }
+                      icon={<AiIconAnimation size={16} />}
                       onClick={() =>
                         setAiAssistantPanel({
                           open: true,
diff --git a/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx b/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx
index fd2af38317ebe..bca14055c723e 100644
--- a/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx
+++ b/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx
@@ -131,9 +131,7 @@ const TriggersList = ({
                     type="default"
                     disabled={!canCreateTriggers}
                     className="px-1 pointer-events-auto"
-                    icon={
-                      <AiIconAnimation className="scale-75 [&>div>div]:border-black dark:[&>div>div]:border-white" />
-                    }
+                    icon={<AiIconAnimation size={16} />}
                     onClick={() =>
                       setAiAssistantPanel({
                         open: true,
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet.tsx
index e477d0c146c5a..5d4580608f3ef 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet.tsx
@@ -43,8 +43,8 @@ import {
 } from './CronJobs.utils'
 import { CronJobScheduleSection } from './CronJobScheduleSection'
 import { EdgeFunctionSection } from './EdgeFunctionSection'
+import { HttpBodyFieldSection } from './HttpBodyFieldSection'
 import { HTTPHeaderFieldsSection } from './HttpHeaderFieldsSection'
-import { HTTPParameterFieldsSection } from './HttpParameterFieldsSection'
 import { HttpRequestSection } from './HttpRequestSection'
 import { SqlFunctionSection } from './SqlFunctionSection'
 import { SqlSnippetSection } from './SqlSnippetSection'
@@ -63,7 +63,7 @@ const edgeFunctionSchema = z.object({
   edgeFunctionName: z.string().trim().min(1, 'Please select one of the listed Edge Functions'),
   timeoutMs: z.coerce.number().int().gte(1000).lte(5000).default(1000),
   httpHeaders: z.array(z.object({ name: z.string(), value: z.string() })),
-  httpParameters: z.array(z.object({ name: z.string(), value: z.string() })),
+  httpBody: z.string().trim(),
 })
 
 const httpRequestSchema = z.object({
@@ -77,7 +77,7 @@ const httpRequestSchema = z.object({
     .refine((value) => value.startsWith('http'), 'Please include HTTP/HTTPs to your URL'),
   timeoutMs: z.coerce.number().int().gte(1000).lte(5000).default(1000),
   httpHeaders: z.array(z.object({ name: z.string(), value: z.string() })),
-  httpParameters: z.array(z.object({ name: z.string(), value: z.string() })),
+  httpBody: z.string().trim(),
 })
 
 const sqlFunctionSchema = z.object({
@@ -187,7 +187,7 @@ export const CreateCronJobSheet = ({
         values.method,
         values.edgeFunctionName,
         values.httpHeaders,
-        values.httpParameters,
+        values.httpBody,
         values.timeoutMs
       )
     } else if (values.type === 'http_request') {
@@ -195,7 +195,7 @@ export const CreateCronJobSheet = ({
         values.method,
         values.endpoint,
         values.httpHeaders,
-        values.httpParameters,
+        values.httpBody,
         values.timeoutMs
       )
     } else if (values.type === 'sql_function') {
@@ -367,7 +367,7 @@ export const CreateCronJobSheet = ({
                   <Separator />
                   <HTTPHeaderFieldsSection variant={cronType} />
                   <Separator />
-                  <HTTPParameterFieldsSection variant={cronType} />
+                  <HttpBodyFieldSection form={form} />
                 </>
               )}
               {cronType === 'edge_function' && (
@@ -376,7 +376,7 @@ export const CreateCronJobSheet = ({
                   <Separator />
                   <HTTPHeaderFieldsSection variant={cronType} />
                   <Separator />
-                  <HTTPParameterFieldsSection variant={cronType} />
+                  <HttpBodyFieldSection form={form} />
                 </>
               )}
               {cronType === 'sql_function' && <SqlFunctionSection form={form} />}
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobCard.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobCard.tsx
index d8bbd50102bc8..21f1c65abf8ad 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobCard.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobCard.tsx
@@ -1,13 +1,13 @@
 import { toString as CronToString } from 'cronstrue'
-import { Clock, Loader2, MoreVertical } from 'lucide-react'
+import { Clock, History, Loader2, MoreVertical } from 'lucide-react'
 import Link from 'next/link'
+import { useState } from 'react'
 
 import { useParams } from 'common'
 import { SQLCodeBlock } from 'components/interfaces/Auth/ThirdPartyAuthForm/SqlCodeBlock'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { CronJob } from 'data/database-cron-jobs/database-cron-jobs-query'
 import { useDatabaseCronJobToggleMutation } from 'data/database-cron-jobs/database-cron-jobs-toggle-mutation'
-import { useState } from 'react'
 import {
   Button,
   DropdownMenu,
@@ -68,6 +68,11 @@ export const CronJobCard = ({ job, onEditCronJob, onDeleteCronJob }: CronJobCard
                 checked={job.active}
                 onCheckedChange={() => showToggleConfirmationModal(true)}
               />
+              <Button type="default" icon={<History />}>
+                <Link href={`/project/${ref}/integrations/cron-jobs/cron-jobs/${job.jobname}`}>
+                  History
+                </Link>
+              </Button>
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button type="default" icon={<MoreVertical />} className="px-1.5" />
@@ -76,11 +81,6 @@ export const CronJobCard = ({ job, onEditCronJob, onDeleteCronJob }: CronJobCard
                   <DropdownMenuItem onClick={() => onEditCronJob(job)}>
                     Edit cron job
                   </DropdownMenuItem>
-                  <DropdownMenuItem asChild>
-                    <Link href={`/project/${ref}/integrations/cron-jobs/cron-jobs/${job.jobname}`}>
-                      View previous runs
-                    </Link>
-                  </DropdownMenuItem>
                   <DropdownMenuSeparator />
                   <DropdownMenuItem onClick={() => onDeleteCronJob(job)}>
                     Delete cron job
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobs.utils.test.ts b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobs.utils.test.ts
index ad1dab0ead739..0474694ed282f 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobs.utils.test.ts
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobs.utils.test.ts
@@ -1,14 +1,14 @@
 import { it } from 'vitest'
-import { parseCronJobCommand, secondsPattern, cronPattern } from './CronJobs.utils'
+import { cronPattern, parseCronJobCommand, secondsPattern } from './CronJobs.utils'
 
 describe('parseCronJobCommand', () => {
   it('should return a default object when the command is null', () => {
-    expect(parseCronJobCommand('')).toStrictEqual({ snippet: '', type: 'sql_snippet' })
+    expect(parseCronJobCommand('')).toMatchObject({ snippet: '', type: 'sql_snippet' })
   })
 
   it('should return a default object when the command is random', () => {
     const command = 'some random text'
-    expect(parseCronJobCommand(command)).toStrictEqual({
+    expect(parseCronJobCommand(command)).toMatchObject({
       snippet: 'some random text',
       type: 'sql_snippet',
     })
@@ -16,7 +16,7 @@ describe('parseCronJobCommand', () => {
 
   it('should return a sql function command when the command is CALL auth.jwt ()', () => {
     const command = 'CALL auth.jwt ()'
-    expect(parseCronJobCommand(command)).toStrictEqual({
+    expect(parseCronJobCommand(command)).toMatchObject({
       type: 'sql_function',
       schema: 'auth',
       functionName: 'jwt',
@@ -24,17 +24,65 @@ describe('parseCronJobCommand', () => {
   })
 
   it('should return a edge function config when the command posts to supabase.co', () => {
-    const command = `select net.http_post( url:='https://_.supabase.co/functions/v1/_', headers:=jsonb_build_object(), body:=jsonb_build_object(), timeout_milliseconds:=5000 );`
-    expect(parseCronJobCommand(command)).toStrictEqual({
+    const command = `select net.http_post( url:='https://_.supabase.co/functions/v1/_', headers:=jsonb_build_object(), body:='', timeout_milliseconds:=5000 );`
+    expect(parseCronJobCommand(command)).toMatchObject({
       edgeFunctionName: 'https://_.supabase.co/functions/v1/_',
       method: 'POST',
       httpHeaders: [],
-      httpParameters: [],
+      httpBody: '',
       timeoutMs: 5000,
       type: 'edge_function',
     })
   })
 
+  it('should return a HTTP request config with POST method, empty headers and a body as string', () => {
+    const command = `select net.http_post( url:='https://example.com/api/endpoint', headers:=jsonb_build_object(), body:='hello', timeout_milliseconds:=5000 );`
+    expect(parseCronJobCommand(command)).toMatchObject({
+      endpoint: 'https://example.com/api/endpoint',
+      method: 'POST',
+      httpHeaders: [],
+      httpBody: 'hello',
+      timeoutMs: 5000,
+      type: 'http_request',
+    })
+  })
+
+  it('should return a HTTP request config with POST method, some headers and empty body', () => {
+    const command = `select net.http_post( url:='https://example.com/api/endpoint', headers:=jsonb_build_object('headerche', '2'), body:='', timeout_milliseconds:=1000 );`
+    expect(parseCronJobCommand(command)).toMatchObject({
+      endpoint: 'https://example.com/api/endpoint',
+      method: 'POST',
+      httpHeaders: [{ name: 'headerche', value: '2' }],
+      httpBody: '',
+      timeoutMs: 1000,
+      type: 'http_request',
+    })
+  })
+
+  it('should return a HTTP request config with GET method and empty body', () => {
+    const command = `select net.http_get( url:='https://example.com/api/endpoint', headers:=jsonb_build_object(), timeout_milliseconds:=5000 );`
+    expect(parseCronJobCommand(command)).toMatchObject({
+      endpoint: 'https://example.com/api/endpoint',
+      method: 'GET',
+      httpHeaders: [],
+      httpBody: '',
+      timeoutMs: 5000,
+      type: 'http_request',
+    })
+  })
+
+  it('should return a HTTP request config with POST method and a body as JSON object', () => {
+    const command = `select net.http_post( url:='https://example.com/api/endpoint', headers:=jsonb_build_object(), body:='{"key": "value"}', timeout_milliseconds:=5000 );`
+    expect(parseCronJobCommand(command)).toMatchObject({
+      endpoint: 'https://example.com/api/endpoint',
+      method: 'POST',
+      httpHeaders: [],
+      httpBody: '{"key": "value"}',
+      timeoutMs: 5000,
+      type: 'http_request',
+    })
+  })
+
   // Array of test cases for secondsPattern
   const secondsPatternTests = [
     { description: '10 seconds', command: '10 seconds' },
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobs.utils.ts b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobs.utils.ts
index 4ebe44ebe89bf..45398aa5e9ebd 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobs.utils.ts
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobs.utils.ts
@@ -1,5 +1,5 @@
 import { CronJobType } from './CreateCronJobSheet'
-import { HTTPHeader, HTTPParameter } from './CronJobs.constants'
+import { HTTPHeader } from './CronJobs.constants'
 
 export const buildCronQuery = (name: string, schedule: string, command: string) => {
   return `select cron.schedule('${name}','${schedule}',${command});`
@@ -9,7 +9,7 @@ export const buildHttpRequestCommand = (
   method: 'GET' | 'POST',
   url: string,
   headers: HTTPHeader[],
-  body: HTTPParameter[],
+  body: string,
   timeout: number
 ) => {
   return `$$
@@ -20,10 +20,7 @@ export const buildHttpRequestCommand = (
             .filter((v) => v.name && v.value)
             .map((v) => `'${v.name}', '${v.value}'`)
             .join(', ')}),
-          body:=jsonb_build_object(${body
-            .filter((v) => v.name && v.value)
-            .map((v) => `'${v.name}', '${v.value}'`)
-            .join(', ')}),
+          ${method === 'POST' ? `body:='${body}',` : ''}
           timeout_milliseconds:=${timeout}
       );
     $$`
@@ -32,6 +29,10 @@ export const buildHttpRequestCommand = (
 const DEFAULT_CRONJOB_COMMAND = {
   type: 'sql_snippet',
   snippet: '',
+  // add default values for the other command types. Even though they don't exist in sql_snippet, they'll still work as default values.
+  method: 'POST',
+  timeoutMs: 1000,
+  httpBody: '',
 } as const
 
 export const parseCronJobCommand = (originalCommand: string): CronJobType => {
@@ -40,12 +41,21 @@ export const parseCronJobCommand = (originalCommand: string): CronJobType => {
     .replaceAll(/\n/g, ' ')
     .replaceAll(/\s+/g, ' ')
     .trim()
+
   if (command.toLocaleLowerCase().startsWith('select net.')) {
-    const matches =
+    let matches =
       command.match(
-        /select net\.([^']+)\(\s*url:='([^']+)',\s*headers:=jsonb_build_object\(([^)]*)\),\s*body:=jsonb_build_object\(([^]*)\s*\),\s*timeout_milliseconds:=(\d+) \)/i
+        /select net\.([^']+)\(\s*url:='([^']+)',\s*headers:=jsonb_build_object\(([^)]*)\),(?:\s*body:='(.*)',)?\s*timeout_milliseconds:=(\d+) \)/i
       ) || []
 
+    // if the match has been unsuccesful, the cron may be created with the previous encoding/parsing.
+    if (matches.length === 0) {
+      matches =
+        command.match(
+          /select net\.([^']+)\(\s*url:='([^']+)',\s*headers:=jsonb_build_object\(([^)]*)\),\s*body:=jsonb_build_object\(([^]*)\s*\),\s*timeout_milliseconds:=(\d+) \)/i
+        ) || []
+    }
+
     // convert the header string to array of objects, clean up the values, trim them of spaces and remove the quotation marks at start and end
     const headers = (matches[3] || '').split(',').map((s) => s.trim().replace(/^'|'$/g, ''))
     const headersObjs: { name: string; value: string }[] = []
@@ -55,16 +65,8 @@ export const parseCronJobCommand = (originalCommand: string): CronJobType => {
       }
     }
 
-    // convert the parameter string to array of objects, clean up the values, trim them of spaces and remove the quotation marks at start and end
-    const parameters = (matches[4] || '').split(',').map((s) => s.trim().replace(/^'|'$/g, ''))
-    const parametersObjs: { name: string; value: string }[] = []
-    for (let i = 0; i < parameters.length; i += 2) {
-      if (parameters[i] && parameters[i].length > 0) {
-        parametersObjs.push({ name: parameters[i], value: parameters[i + 1] })
-      }
-    }
-
     const url = matches[2] || ''
+    const body = matches[4] || ''
 
     if (url.includes('.supabase.') && url.includes('/functions/v1/')) {
       return {
@@ -72,7 +74,7 @@ export const parseCronJobCommand = (originalCommand: string): CronJobType => {
         method: matches[1] === 'http_get' ? 'GET' : 'POST',
         edgeFunctionName: url,
         httpHeaders: headersObjs,
-        httpParameters: parametersObjs,
+        httpBody: body,
         timeoutMs: +matches[5] ?? 1000,
       }
     }
@@ -82,7 +84,7 @@ export const parseCronJobCommand = (originalCommand: string): CronJobType => {
       method: matches[1] === 'http_get' ? 'GET' : 'POST',
       endpoint: url,
       httpHeaders: headersObjs,
-      httpParameters: parametersObjs,
+      httpBody: body,
       timeoutMs: +matches[5] ?? 1000,
     }
   }
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.tsx
index 2c103c430251e..8ef51af2e0cef 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.tsx
@@ -4,21 +4,32 @@ import { CreateCronJobSheet } from 'components/interfaces/Integrations/CronJobs/
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
 import { CronJob, useCronJobsQuery } from 'data/database-cron-jobs/database-cron-jobs-query'
+import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query'
 import { Search } from 'lucide-react'
-import { parseAsString, useQueryState } from 'nuqs'
+import { parseAsBoolean, parseAsString, useQueryState } from 'nuqs'
 import { Button, Input, Sheet, SheetContent } from 'ui'
 import { CronJobCard } from '../CronJobs/CronJobCard'
 import DeleteCronJob from '../CronJobs/DeleteCronJob'
-import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query'
+
+const EMPTY_CRON_JOB = {
+  jobname: '',
+  schedule: '',
+  active: true,
+  command: '',
+}
 
 export const CronjobsTab = () => {
   const { project } = useProjectContext()
 
   const [searchQuery, setSearchQuery] = useQueryState('search', parseAsString.withDefault(''))
+  const [createCronJobSheetShown, setCreateCronJobSheetShown] = useQueryState(
+    'dialog-shown',
+    parseAsBoolean.withDefault(false).withOptions({ clearOnDefault: true })
+  )
 
   // used for confirmation prompt in the Create Cron Job Sheet
   const [isClosingCreateCronJobSheet, setIsClosingCreateCronJobSheet] = useState(false)
-  const [createCronJobSheetShown, setCreateCronJobSheetShown] = useState<
+  const [cronJobForEditing, setCronJobForEditing] = useState<
     Pick<CronJob, 'jobname' | 'schedule' | 'active' | 'command'> | undefined
   >()
   const [cronJobForDeletion, setCronJobForDeletion] = useState<CronJob | undefined>()
@@ -57,18 +68,7 @@ export const CronjobsTab = () => {
             }
           >
             <p className="text-sm text-foreground">No cron jobs created yet</p>
-            <Button
-              onClick={() =>
-                setCreateCronJobSheetShown({
-                  jobname: '',
-                  schedule: '',
-                  command: '',
-                  active: true,
-                })
-              }
-            >
-              Add a new cron job
-            </Button>
+            <Button onClick={() => setCreateCronJobSheetShown(true)}>Create job</Button>
           </div>
         ) : (
           <div className="w-full space-y-4">
@@ -82,18 +82,7 @@ export const CronjobsTab = () => {
                 onChange={(e) => setSearchQuery(e.target.value)}
               />
 
-              <Button
-                onClick={() =>
-                  setCreateCronJobSheetShown({
-                    jobname: '',
-                    schedule: '',
-                    command: '',
-                    active: true,
-                  })
-                }
-              >
-                Create a cron job
-              </Button>
+              <Button onClick={() => setCreateCronJobSheetShown(true)}>Create job</Button>
             </div>
             {filteredCronJobs.length === 0 ? (
               <div
@@ -115,7 +104,10 @@ export const CronjobsTab = () => {
                 <CronJobCard
                   key={job.jobid}
                   job={job}
-                  onEditCronJob={(job) => setCreateCronJobSheetShown(job)}
+                  onEditCronJob={(job) => {
+                    setCronJobForEditing(job)
+                    setCreateCronJobSheetShown(true)
+                  }}
                   onDeleteCronJob={(job) => setCronJobForDeletion(job)}
                 />
               ))
@@ -136,11 +128,12 @@ export const CronjobsTab = () => {
       >
         <SheetContent size="default" tabIndex={undefined}>
           <CreateCronJobSheet
-            selectedCronJob={createCronJobSheetShown}
+            selectedCronJob={cronJobForEditing ?? EMPTY_CRON_JOB}
             supportsSeconds={supportsSeconds}
             onClose={() => {
               setIsClosingCreateCronJobSheet(false)
-              setCreateCronJobSheetShown(undefined)
+              setCronJobForEditing(undefined)
+              setCreateCronJobSheetShown(false)
             }}
             isClosing={isClosingCreateCronJobSheet}
             setIsClosing={setIsClosingCreateCronJobSheet}
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/HttpBodyFieldSection.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/HttpBodyFieldSection.tsx
new file mode 100644
index 0000000000000..82798c330a23c
--- /dev/null
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/HttpBodyFieldSection.tsx
@@ -0,0 +1,44 @@
+import { UseFormReturn } from 'react-hook-form'
+
+import {
+  FormControl_Shadcn_,
+  FormDescription_Shadcn_,
+  FormField_Shadcn_,
+  FormItem_Shadcn_,
+  FormLabel_Shadcn_,
+  FormMessage_Shadcn_,
+  SheetSection,
+  TextArea_Shadcn_,
+} from 'ui'
+import { CreateCronJobForm } from './CreateCronJobSheet'
+
+interface HttpBodyFieldSectionProps {
+  form: UseFormReturn<CreateCronJobForm>
+}
+
+export const HttpBodyFieldSection = ({ form }: HttpBodyFieldSectionProps) => {
+  return (
+    <SheetSection>
+      <FormField_Shadcn_
+        control={form.control}
+        name="values.httpBody"
+        render={({ field }) => (
+          <FormItem_Shadcn_ className="gap-1 flex flex-col">
+            <FormLabel_Shadcn_>HTTP Request Body</FormLabel_Shadcn_>
+            <FormControl_Shadcn_>
+              <TextArea_Shadcn_
+                className="h-72 rounded-none px-4 outline-none"
+                value={field.value}
+                onChange={field.onChange}
+              />
+            </FormControl_Shadcn_>
+            <FormDescription_Shadcn_ className="text-foreground-lighter">
+              The content should match the content-type header.
+            </FormDescription_Shadcn_>
+            <FormMessage_Shadcn_ />
+          </FormItem_Shadcn_>
+        )}
+      />
+    </SheetSection>
+  )
+}
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/HttpHeaderFieldsSection.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/HttpHeaderFieldsSection.tsx
index bfd46415d0b14..6a76aac83d752 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/HttpHeaderFieldsSection.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/HttpHeaderFieldsSection.tsx
@@ -15,6 +15,7 @@ import {
   FormControl_Shadcn_,
   FormField_Shadcn_,
   FormItem_Shadcn_,
+  FormLabel_Shadcn_,
   FormMessage_Shadcn_,
   Input_Shadcn_,
   SheetSection,
@@ -38,7 +39,7 @@ export const HTTPHeaderFieldsSection = ({ variant }: HTTPHeaderFieldsSectionProp
 
   return (
     <SheetSection>
-      <FormSectionLabel className="lg:!col-span-4">HTTP Headers</FormSectionLabel>
+      <FormLabel_Shadcn_>HTTP Headers</FormLabel_Shadcn_>
       <div className="space-y-3 mt-1">
         {fields.map((field, index) => (
           <div key={field.id} className="flex items-center space-x-2">
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/HttpParameterFieldsSection.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/HttpParameterFieldsSection.tsx
deleted file mode 100644
index d00cb14571dc2..0000000000000
--- a/apps/studio/components/interfaces/Integrations/CronJobs/HttpParameterFieldsSection.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { Plus, Trash } from 'lucide-react'
-import { useFieldArray } from 'react-hook-form'
-
-import {
-  Button,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormMessage_Shadcn_,
-  Input_Shadcn_,
-  SheetSection,
-} from 'ui'
-import { CreateCronJobForm } from './CreateCronJobSheet'
-
-interface HTTPParameterFieldsSectionProps {
-  variant: 'edge_function' | 'http_request'
-}
-
-export const HTTPParameterFieldsSection = ({ variant }: HTTPParameterFieldsSectionProps) => {
-  // gets the fields through form context
-  const { fields, append, remove } = useFieldArray<CreateCronJobForm>({
-    name: 'values.httpParameters',
-  })
-
-  return (
-    <SheetSection>
-      <span>HTTP Parameters</span>
-      <div className="space-y-2 mt-1">
-        {fields.map((field, index) => (
-          <div key={field.id} className="flex items-center space-x-2">
-            <FormField_Shadcn_
-              name={`values.httpParameters.${index}.name`}
-              render={({ field }) => (
-                <FormItem_Shadcn_ className="flex-1">
-                  <FormControl_Shadcn_>
-                    <Input_Shadcn_
-                      {...field}
-                      size="small"
-                      className="w-full"
-                      placeholder="Parameter name"
-                    />
-                  </FormControl_Shadcn_>
-                  <FormMessage_Shadcn_ />
-                </FormItem_Shadcn_>
-              )}
-            />
-            <FormField_Shadcn_
-              name={`values.httpParameters.${index}.value`}
-              render={({ field }) => (
-                <FormItem_Shadcn_ className="flex-1">
-                  <FormControl_Shadcn_>
-                    <Input_Shadcn_
-                      {...field}
-                      value={field.value}
-                      size="small"
-                      className="w-full"
-                      placeholder="Parameter value"
-                    />
-                  </FormControl_Shadcn_>
-                  <FormMessage_Shadcn_ />
-                </FormItem_Shadcn_>
-              )}
-            />
-
-            <Button
-              type="default"
-              icon={<Trash size={12} />}
-              onClick={() => remove(index)}
-              className="h-[34px] w-[34px]"
-            />
-          </div>
-        ))}
-        <div>
-          <Button
-            type="default"
-            size="tiny"
-            icon={<Plus />}
-            onClick={() => append({ name: '', value: '' })}
-          >
-            Add a new parameter
-          </Button>
-        </div>
-      </div>
-    </SheetSection>
-  )
-}
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/HttpRequestSection.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/HttpRequestSection.tsx
index 13871ab4d7ace..03d522eb6263a 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/HttpRequestSection.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/HttpRequestSection.tsx
@@ -51,7 +51,9 @@ export const HttpRequestSection = ({ form }: HttpRequestSectionProps) => {
         name="values.endpoint"
         render={({ field: { ref, ...rest } }) => (
           <FormItemLayout label="Endpoint URL" className="gap-1">
-            <Input {...rest} placeholder="https://api.example.com/endpoint" />
+            <FormControl_Shadcn_>
+              <Input {...rest} placeholder="https://api.example.com/endpoint" />
+            </FormControl_Shadcn_>
           </FormItemLayout>
         )}
       />
diff --git a/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTab.tsx b/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTab.tsx
index c17d3158abb90..d86dbac261bfb 100644
--- a/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTab.tsx
@@ -59,11 +59,11 @@ export const IntegrationOverviewTab = ({
                 src={`${router.basePath}/img/supabase-logo.svg`}
                 className=" h-2.5 cursor-pointer rounded"
               />
-              <span>Database Extension</span>
+              <span>Postgres Module</span>
             </Badge>
             <Markdown
               className="max-w-full"
-              content={`This integration uses the ${integration.requiredExtensions.map((x) => `\`${x}\``).join(', ')} 
+              content={`This integration uses the ${integration.requiredExtensions.map((x) => `\`${x}\``).join(', ')}
               extension${integration.requiredExtensions.length > 1 ? 's' : ''} directly in your Postgres database.
               ${hasMissingExtensions ? `Install ${integration.requiredExtensions.length > 1 ? 'these' : 'this'} database extension${integration.requiredExtensions.length > 1 ? 's' : ''} to use ${integration.name} in your project.` : ''}
               `}
diff --git a/apps/studio/components/interfaces/Integrations/Landing/AvailableIntegrations.tsx b/apps/studio/components/interfaces/Integrations/Landing/AvailableIntegrations.tsx
index d00fd8f68ffa8..2b4ce16f35467 100644
--- a/apps/studio/components/interfaces/Integrations/Landing/AvailableIntegrations.tsx
+++ b/apps/studio/components/interfaces/Integrations/Landing/AvailableIntegrations.tsx
@@ -10,6 +10,11 @@ import { IntegrationCard, IntegrationLoadingCard } from './IntegrationCard'
 import { useInstalledIntegrations } from './useInstalledIntegrations'
 
 type IntegrationCategory = 'all' | 'wrapper' | 'postgres_extensions' | 'custom'
+const CATEGORIES = [
+  { key: 'all', label: 'All Integrations' },
+  { key: 'wrapper', label: 'Wrappers' },
+  { key: 'postgres_extension', label: 'Postgres Modules' },
+] as const
 
 export const AvailableIntegrations = () => {
   const [selectedCategory, setSelectedCategory] = useQueryState(
@@ -29,10 +34,8 @@ export const AvailableIntegrations = () => {
   // available integrations for install
   const integrationsByCategory =
     selectedCategory === 'all'
-      ? availableIntegrations.filter((i) => !installedIds.includes(i.id))
-      : availableIntegrations.filter(
-          (i) => !installedIds.includes(i.id) && i.type === selectedCategory
-        )
+      ? availableIntegrations
+      : availableIntegrations.filter((i) => i.type === selectedCategory)
   const filteredIntegrations = (
     search.length > 0
       ? integrationsByCategory.filter((i) => i.name.toLowerCase().includes(search.toLowerCase()))
@@ -47,23 +50,21 @@ export const AvailableIntegrations = () => {
         onValueChange={(value) => setSelectedCategory(value as IntegrationCategory)}
       >
         <TabsList_Shadcn_ className="px-10 gap-2 border-b-0 border-t pt-5">
-          {['all', 'wrapper', 'postgres_extension'].map((category) => (
+          {CATEGORIES.map((category) => (
             <TabsTrigger_Shadcn_
-              key={category}
-              value={category}
-              onClick={() => setSelectedCategory(category as IntegrationCategory)}
+              key={category.key}
+              value={category.key}
+              onClick={() => setSelectedCategory(category.key as IntegrationCategory)}
               className={cn(
                 buttonVariants({
                   size: 'tiny',
-                  type: selectedCategory === category ? 'default' : 'outline',
+                  type: selectedCategory === category.key ? 'default' : 'outline',
                 }),
-                selectedCategory === category ? 'text-foreground' : 'text-foreground-lighter',
+                selectedCategory === category.key ? 'text-foreground' : 'text-foreground-lighter',
                 '!rounded-full px-3'
               )}
             >
-              {category === 'all'
-                ? 'All Integrations'
-                : category.replace('_', ' ').replace(/\b\w/g, (char) => char.toUpperCase())}
+              {category.label}
             </TabsTrigger_Shadcn_>
           ))}
           <Input
@@ -98,7 +99,10 @@ export const AvailableIntegrations = () => {
               error={error}
             />
           )}
-          {isSuccess && filteredIntegrations.map((i) => <IntegrationCard key={i.id} {...i} />)}
+          {isSuccess &&
+            filteredIntegrations.map((i) => (
+              <IntegrationCard key={i.id} {...i} isInstalled={installedIds.includes(i.id)} />
+            ))}
           {isSuccess && search.length > 0 && filteredIntegrations.length === 0 && (
             <NoSearchResults
               className="xl:col-span-3 2xl:col-span-4"
diff --git a/apps/studio/components/interfaces/Integrations/Landing/IntegrationCard.tsx b/apps/studio/components/interfaces/Integrations/Landing/IntegrationCard.tsx
index 3134a304c4115..0e21237fc7811 100644
--- a/apps/studio/components/interfaces/Integrations/Landing/IntegrationCard.tsx
+++ b/apps/studio/components/interfaces/Integrations/Landing/IntegrationCard.tsx
@@ -1,11 +1,14 @@
 import Link from 'next/link'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import { Badge, cn } from 'ui'
+import { Badge, cn, TooltipContent_Shadcn_, TooltipTrigger_Shadcn_, Tooltip_Shadcn_ } from 'ui'
 import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
 import { IntegrationDefinition } from './Integrations.constants'
+import { BadgeCheck, Maximize } from 'lucide-react'
 
-type IntegrationCardProps = IntegrationDefinition & {}
+type IntegrationCardProps = IntegrationDefinition & {
+  isInstalled?: boolean
+}
 
 const INTEGRATION_CARD_STYLE = cn(
   'w-full h-full pl-5 pr-6 py-3 bg-surface-100 hover:bg-surface-200 hover:border-strong',
@@ -28,7 +31,14 @@ export const IntegrationLoadingCard = () => {
   )
 }
 
-export const IntegrationCard = ({ id, beta, name, icon, description }: IntegrationCardProps) => {
+export const IntegrationCard = ({
+  id,
+  beta,
+  name,
+  icon,
+  description,
+  isInstalled,
+}: IntegrationCardProps) => {
   const { project } = useProjectContext()
 
   return (
@@ -37,7 +47,7 @@ export const IntegrationCard = ({ id, beta, name, icon, description }: Integrati
         <div className="w-10 h-10 relative bg-white border rounded-md flex items-center justify-center">
           {icon()}
         </div>
-        <div className="grow basis-0 w-full flex flex-col justify-between items-start gap-y-2">
+        <div className="grow basis-0 w-full flex flex-col justify-between items-start gap-y-2 relative">
           <div className="flex-col justify-start items-start gap-y-0.5 flex">
             <div className="flex items-center gap-x-2">
               <p className="text-foreground text-sm">{name}</p>
@@ -49,9 +59,17 @@ export const IntegrationCard = ({ id, beta, name, icon, description }: Integrati
             </div>
             <p className="text-foreground-light text-xs">{description}</p>
           </div>
-          <Badge className="bg-opacity-100 bg-surface-300 flex items-center gap-x-1.5">
-            <span>Official</span>
-          </Badge>
+          <div className="flex items-center gap-x-4">
+            <Badge className="bg-opacity-100 bg-surface-300 flex items-center gap-x-1.5">
+              <span>Official</span>
+            </Badge>
+            {isInstalled && (
+              <div className="flex items-center gap-x-1">
+                <BadgeCheck size={14} className="text-brand-600" />
+                <span className=" text-brand-600 text-xs">Installed</span>
+              </div>
+            )}
+          </div>
         </div>
       </div>
     </Link>
diff --git a/apps/studio/components/interfaces/Integrations/Landing/Integrations.constants.tsx b/apps/studio/components/interfaces/Integrations/Landing/Integrations.constants.tsx
index cad9403f5ea95..f016a84e281ab 100644
--- a/apps/studio/components/interfaces/Integrations/Landing/Integrations.constants.tsx
+++ b/apps/studio/components/interfaces/Integrations/Landing/Integrations.constants.tsx
@@ -113,7 +113,7 @@ const supabaseIntegrations: IntegrationDefinition[] = [
     id: 'cron-jobs',
     type: 'postgres_extension' as const,
     requiredExtensions: ['pg_cron'],
-    name: `Cron Jobs`,
+    name: `Cron`,
     icon: ({ className, ...props } = {}) => (
       <Clock5 className={cn('inset-0 p-2 text-black w-full h-full', className)} {...props} />
     ),
@@ -129,8 +129,8 @@ const supabaseIntegrations: IntegrationDefinition[] = [
         label: 'Overview',
       },
       {
-        route: 'cron-jobs',
-        label: 'Cron Jobs',
+        route: 'jobs',
+        label: 'Jobs',
         hasChild: true,
         childIcon: (
           <Timer size={12} strokeWidth={1.5} className={cn('text-foreground w-full h-full')} />
@@ -157,7 +157,7 @@ const supabaseIntegrations: IntegrationDefinition[] = [
               loading: Loading,
             }
           )
-        case 'cron-jobs':
+        case 'jobs':
           return dynamic(() => import('../CronJobs/CronJobsTab').then((mod) => mod.CronjobsTab), {
             loading: Loading,
           })
@@ -226,8 +226,8 @@ const supabaseIntegrations: IntegrationDefinition[] = [
   },
   {
     id: 'webhooks',
-    type: 'custom' as const,
-    name: `Webhooks`,
+    type: 'postgres_extension' as const,
+    name: `Database Webhooks`,
     icon: ({ className, ...props } = {}) => (
       <Webhook className={cn('inset-0 p-2 text-black w-full h-full', className)} {...props} />
     ),
@@ -276,7 +276,7 @@ const supabaseIntegrations: IntegrationDefinition[] = [
     id: 'graphiql',
     type: 'postgres_extension' as const,
     requiredExtensions: ['pg_graphql'],
-    name: `GraphiQL`,
+    name: `GraphQL`,
     icon: ({ className, ...props } = {}) => (
       <Image
         fill
diff --git a/apps/studio/components/layouts/AppLayout/AssistantButton.tsx b/apps/studio/components/layouts/AppLayout/AssistantButton.tsx
index 7ea54e9a94dc1..c5711c9c02a75 100644
--- a/apps/studio/components/layouts/AppLayout/AssistantButton.tsx
+++ b/apps/studio/components/layouts/AppLayout/AssistantButton.tsx
@@ -7,13 +7,14 @@ const AssistantButton = () => {
   return (
     <Button
       type="text"
+      size="tiny"
       id="assistant-trigger"
-      className="w-6 h-6"
       onClick={() => {
         setAiAssistantPanel({ open: !aiAssistantPanel.open })
       }}
-      icon={<AiIconAnimation allowHoverEffect className="w-4 h-4 text-foreground-light" />}
-    />
+    >
+      <AiIconAnimation allowHoverEffect size={20} />
+    </Button>
   )
 }
 
diff --git a/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx b/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx
index 81f71e9bd35ad..c2a99c0bd76b4 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { AnimatePresence, motion } from 'framer-motion'
 import { last } from 'lodash'
-import { FileText } from 'lucide-react'
+import { FileText, Info } from 'lucide-react'
 import { memo, useEffect, useMemo, useRef, useState } from 'react'
 import { toast } from 'sonner'
 
@@ -43,6 +43,7 @@ import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import AIOnboarding from './AIOnboarding'
 import CollapsibleCodeBlock from './CollapsibleCodeBlock'
 import { Message } from './Message'
+import DotGrid from '../DotGrid'
 
 const MemoizedMessage = memo(
   ({ message, isLoading }: { message: MessageType; isLoading: boolean }) => {
@@ -298,15 +299,6 @@ export const AIAssistant = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, isInSQLEditor, snippetContent])
 
-  if (isLoadingTables) {
-    return (
-      <div className="h-full w-full flex justify-center items-center">
-        {/* [Joshen] We could try play around with a custom loader for the assistant here */}
-        <GenericSkeletonLoader className="w-4/5" />
-      </div>
-    )
-  }
-
   return (
     <>
       <div className={cn('flex flex-col h-full', className)}>
@@ -315,12 +307,24 @@ export const AIAssistant = ({
           className={cn('flex-grow overflow-auto flex flex-col')}
           onScroll={handleScroll}
         >
-          <div className="z-30 bg-background/80 backdrop-blur-md sticky top-0">
-            <div className="border-b  flex items-center gap-x-3 px-5 h-[46px]">
-              <AiIconAnimation loading={false} allowHoverEffect />
+          <div className="z-30 sticky top-0">
+            <div className="border-b flex items-center bg gap-x-3 px-5 h-[46px]">
+              <AiIconAnimation allowHoverEffect />
+
+              <div className="text-sm flex-1">Assistant</div>
+              <div className="flex gap-4 items-center">
+                <Tooltip_Shadcn_ delayDuration={100}>
+                  <TooltipTrigger_Shadcn_ asChild>
+                    <Info size={14} className="text-foreground-light" />
+                  </TooltipTrigger_Shadcn_>
+                  <TooltipContent_Shadcn_ className="w-80">
+                    The Assistant is in Alpha and your prompts might be rate limited.{' '}
+                    {includeSchemaMetadata
+                      ? 'Project metadata is being shared to improve Assistant responses.'
+                      : 'Project metadata is not being shared. Opt in to improve Assistant responses.'}
+                  </TooltipContent_Shadcn_>
+                </Tooltip_Shadcn_>
 
-              <div className="text-sm flex-1">{hasMessages ? 'New chat' : 'Assistant'}</div>
-              <div className="flex gap-2">
                 {(hasMessages || suggestions || sqlSnippets) && (
                   <Button type="default" disabled={isChatLoading} onClick={onResetConversation}>
                     Reset
@@ -351,42 +355,41 @@ export const AIAssistant = ({
               </Admonition>
             )}
           </div>
+          {!hasMessages && (
+            <div className="h-48 flex-0 m-8">
+              <DotGrid rows={10} columns={10} count={33} />
+            </div>
+          )}
           {hasMessages ? (
-            <motion.div className="w-full p-8 flex flex-col">
-              <div className="text-xs text-foreground-lighter text-center mb-5">
-                {new Date(messages[0].createdAt || new Date()).toLocaleDateString('en-US', {
-                  month: 'long',
-                  day: 'numeric',
-                  year: 'numeric',
-                  hour: 'numeric',
-                  minute: 'numeric',
-                })}
-              </div>
+            <motion.div className="w-full p-5">
               {renderedMessages}
               {(last(messages)?.role === 'user' || last(messages)?.content?.length === 0) && (
-                <motion.div className="text-foreground-lighter text-sm flex gap-1.5 items-center">
-                  <span>Thinking</span>
-                  <div className="flex gap-1">
-                    <motion.span
-                      animate={{ opacity: [0, 1, 0] }}
-                      transition={{ duration: 1.5, repeat: Infinity, delay: 0 }}
-                    >
-                      .
-                    </motion.span>
-                    <motion.span
-                      animate={{ opacity: [0, 1, 0] }}
-                      transition={{ duration: 1.5, repeat: Infinity, delay: 0.3 }}
-                    >
-                      .
-                    </motion.span>
-                    <motion.span
-                      animate={{ opacity: [0, 1, 0] }}
-                      transition={{ duration: 1.5, repeat: Infinity, delay: 0.6 }}
-                    >
-                      .
-                    </motion.span>
-                  </div>
-                </motion.div>
+                <div className="flex gap-4 w-auto overflow-hidden">
+                  <AiIconAnimation size={20} className="text-foreground-muted shrink-0" />
+                  <motion.div className="text-foreground-lighter text-sm flex gap-1.5 items-center">
+                    <span>Thinking</span>
+                    <div className="flex gap-1">
+                      <motion.span
+                        animate={{ opacity: [0, 1, 0] }}
+                        transition={{ duration: 1.5, repeat: Infinity, delay: 0 }}
+                      >
+                        .
+                      </motion.span>
+                      <motion.span
+                        animate={{ opacity: [0, 1, 0] }}
+                        transition={{ duration: 1.5, repeat: Infinity, delay: 0.3 }}
+                      >
+                        .
+                      </motion.span>
+                      <motion.span
+                        animate={{ opacity: [0, 1, 0] }}
+                        transition={{ duration: 1.5, repeat: Infinity, delay: 0.6 }}
+                      >
+                        .
+                      </motion.span>
+                    </div>
+                  </motion.div>
+                </div>
               )}
               <div ref={bottomRef} className="h-1" />
             </motion.div>
@@ -417,48 +420,15 @@ export const AIAssistant = ({
                 ))}
               </div>
             </div>
+          ) : isLoadingTables ? (
+            <div className="w-full h-full flex-1 flex flex-col justify-end items-start p-5">
+              {/* [Joshen] We could try play around with a custom loader for the assistant here */}
+              <GenericSkeletonLoader className="w-4/5" />
+            </div>
           ) : (tables ?? [])?.length > 0 ? (
             <AIOnboarding setMessages={setMessages} onSendMessage={sendMessageToAssistant} />
           ) : (
-            <div className="w-full flex flex-col justify-end flex-1 h-full p-8">
-              <div className="flex-1">
-                <div className="shrink-0 h-64 mb-5 w-auto overflow-hidden -mx-8 -mt-8 relative">
-                  <motion.div
-                    initial={{ height: '800%', bottom: 0 }}
-                    animate={{ height: '100%', bottom: 0, transition: { duration: 8 } }}
-                    className="absolute bottom-0 left-0 right-0 z-20 bg-gradient-to-b from-transparent to-background"
-                  />
-                  <div className="h-full w-full relative">
-                    <motion.div
-                      initial={{ x: 350, rotate: -45 }}
-                      animate={{
-                        x: 400,
-                        rotate: -45,
-                        transition: { duration: 5, ease: 'easeInOut' },
-                      }}
-                      className="absolute -inset-full bg-gradient-to-b from-black/[0.05] dark:from-white/[0.08] to-transparent "
-                    />
-                    <motion.div
-                      initial={{ x: 380, rotate: -45 }}
-                      animate={{
-                        x: 500,
-                        rotate: -45,
-                        transition: { duration: 5, ease: 'easeInOut' },
-                      }}
-                      className="absolute -inset-full bg-gradient-to-b from-black/[0.05] dark:from-white/[0.08] to-transparent "
-                    />
-                    <motion.div
-                      initial={{ x: 410, rotate: -45 }}
-                      animate={{
-                        x: 600,
-                        rotate: -45,
-                        transition: { duration: 5, ease: 'easeInOut' },
-                      }}
-                      className="absolute -inset-full bg-gradient-to-b from-black/[0.05] dark:from-white/[0.08] to-transparent "
-                    />
-                  </div>
-                </div>
-              </div>
+            <div className="w-full flex flex-col justify-end flex-1 h-full p-5">
               <h2 className="text-base mb-2">Welcome to Supabase!</h2>
               <p className="text-sm text-foreground-lighter mb-6">
                 This is the Supabase assistant which will help you create, debug and modify tables,
@@ -590,11 +560,6 @@ export const AIAssistant = ({
               }
             }}
           />
-          {!hasMessages && (
-            <p className="text-xs text-foreground-lighter mt-2">
-              The Assistant is in Alpha and your prompts might be rate limited
-            </p>
-          )}
         </div>
       </div>
 
diff --git a/apps/studio/components/ui/AIAssistantPanel/AIOnboarding.tsx b/apps/studio/components/ui/AIAssistantPanel/AIOnboarding.tsx
index 0d330085b60fe..cab0382de7d6e 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AIOnboarding.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/AIOnboarding.tsx
@@ -1,7 +1,6 @@
 import { motion } from 'framer-motion'
 import { FileText, MessageCircleMore, WandSparkles } from 'lucide-react'
 
-import DotGrid from 'components/ui/DotGrid'
 import { Button } from 'ui'
 import {
   InnerSideMenuCollapsible,
@@ -20,10 +19,7 @@ export default function AIOnboarding({ setMessages, onSendMessage }: AIOnboardin
   }
 
   return (
-    <div className="w-full p-8 flex flex-col grow shrink-0 justify-end overflow-auto">
-      <div className="min-h-48 grow shrink-0">
-        <DotGrid rows={10} columns={10} count={33} />
-      </div>
+    <div className="w-full p-5 flex flex-col grow shrink-0 justify-end overflow-auto">
       <div className="shrink-0">
         <motion.div
           initial={{ x: -10, opacity: 0 }}
@@ -43,7 +39,7 @@ export default function AIOnboarding({ setMessages, onSendMessage }: AIOnboardin
             transition={{ delay: 0 }}
           >
             <InnerSideMenuCollapsible className="border-b border-muted py-3">
-              <InnerSideMenuCollapsibleTrigger className="px-0" title="Tables" />
+              <InnerSideMenuCollapsibleTrigger className="px-0 -mx-3" title="Tables" />
               <InnerSideMenuCollapsibleContent>
                 <div className="mt-3 mb-1 space-y-1">
                   <Button
@@ -98,7 +94,7 @@ export default function AIOnboarding({ setMessages, onSendMessage }: AIOnboardin
             transition={{ delay: 0.1 }}
           >
             <InnerSideMenuCollapsible className="border-b border-muted py-3">
-              <InnerSideMenuCollapsibleTrigger className="px-0" title="RLS Policies" />
+              <InnerSideMenuCollapsibleTrigger className="px-0 -mx-3" title="RLS Policies" />
               <InnerSideMenuCollapsibleContent>
                 <div className="mt-3 mb-1 space-y-1">
                   <Button
@@ -147,7 +143,7 @@ export default function AIOnboarding({ setMessages, onSendMessage }: AIOnboardin
             transition={{ delay: 0.2 }}
           >
             <InnerSideMenuCollapsible className="border-b border-muted py-3">
-              <InnerSideMenuCollapsibleTrigger className="px-0" title="Functions" />
+              <InnerSideMenuCollapsibleTrigger className="px-0 -mx-3" title="Functions" />
               <InnerSideMenuCollapsibleContent>
                 <div className="mt-3 mb-1 space-y-1">
                   <Button
@@ -196,7 +192,7 @@ export default function AIOnboarding({ setMessages, onSendMessage }: AIOnboardin
             transition={{ delay: 0.3 }}
           >
             <InnerSideMenuCollapsible className="py-3">
-              <InnerSideMenuCollapsibleTrigger className="px-0" title="Triggers" />
+              <InnerSideMenuCollapsibleTrigger className="px-0 -mx-3" title="Triggers" />
               <InnerSideMenuCollapsibleContent>
                 <div className="mt-3 mb-1 space-y-1">
                   <Button
diff --git a/apps/studio/components/ui/AIAssistantPanel/Message.tsx b/apps/studio/components/ui/AIAssistantPanel/Message.tsx
index 98fd721b7ff05..a4e3852e65d40 100644
--- a/apps/studio/components/ui/AIAssistantPanel/Message.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/Message.tsx
@@ -1,9 +1,10 @@
 import { motion } from 'framer-motion'
+import { User } from 'lucide-react'
 import { PropsWithChildren } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 
-import { cn, markdownComponents, WarningIcon, CodeBlock } from 'ui'
+import { AiIconAnimation, cn, CodeBlock, markdownComponents, WarningIcon } from 'ui'
 import CollapsibleCodeBlock from './CollapsibleCodeBlock'
 import { SqlSnippet } from './SqlSnippet'
 
@@ -36,57 +37,60 @@ export const Message = function Message({
       layout="position"
       initial={{ y: 5, opacity: 0, scale: 0.99 }}
       animate={{ y: 0, opacity: 1, scale: 1 }}
-      className="w-full flex flex-col"
+      className={cn(
+        'mb-5 text-foreground-light text-sm',
+        variant === 'warning' && 'bg-warning-200'
+      )}
     >
       {children}
-      <div
-        className={cn(
-          'text-foreground-light text-sm mb max-w-full mb-6',
-          variant === 'warning' && 'bg-warning-200',
-          isUser ? 'px-5 py-3 rounded-lg bg-background-muted w-fit self-end' : 'mb-6'
-        )}
-      >
-        {variant === 'warning' && <WarningIcon className="w-6 h-6" />}
 
-        {action}
+      {variant === 'warning' && <WarningIcon className="w-6 h-6" />}
+
+      {action}
 
+      <div className="flex gap-4 w-auto overflow-hidden">
+        {isUser ? (
+          <figure className="w-5 h-5 shrink-0 bg-foreground rounded-full flex items-center justify-center">
+            <User size={16} strokeWidth={1.5} className="text-background" />
+          </figure>
+        ) : (
+          <AiIconAnimation size={20} className="text-foreground-muted shrink-0" />
+        )}
         <ReactMarkdown
-          className="gap-x-2.5 gap-y-4 flex flex-col [&>*>code]:text-xs [&>*>*>code]:text-xs"
+          className="space-y-5 flex-1 [&>*>code]:text-xs [&>*>*>code]:text-xs min-w-0 [&_li]:space-y-4"
           remarkPlugins={[remarkGfm]}
           components={{
             ...markdownComponents,
             pre: (props: any) => {
               const language = props.children[0].props.className?.replace('language-', '') || 'sql'
 
-              if (language === 'sql') {
-                return readOnly ? (
-                  <div className="mb-1 -mt-2">
-                    <CollapsibleCodeBlock
-                      value={props.children[0].props.children[0]}
-                      language="sql"
+              return (
+                <div className="w-auto -ml-[36px] overflow-x-hidden">
+                  {language === 'sql' ? (
+                    readOnly ? (
+                      <CollapsibleCodeBlock
+                        value={props.children[0].props.children[0]}
+                        language="sql"
+                        hideLineNumbers
+                      />
+                    ) : (
+                      <SqlSnippet
+                        readOnly={readOnly}
+                        isLoading={isLoading}
+                        sql={props.children[0].props.children}
+                      />
+                    )
+                  ) : (
+                    <CodeBlock
                       hideLineNumbers
+                      value={props.children[0].props.children}
+                      language={language}
+                      className={cn(
+                        'max-h-96 max-w-none block border rounded !bg-transparent !py-3 !px-3.5 prose dark:prose-dark text-foreground',
+                        '[&>code]:m-0 [&>code>span]:flex [&>code>span]:flex-wrap [&>code]:block [&>code>span]:text-foreground'
+                      )}
                     />
-                  </div>
-                ) : (
-                  <SqlSnippet
-                    readOnly={readOnly}
-                    isLoading={isLoading}
-                    sql={props.children[0].props.children}
-                  />
-                )
-              }
-
-              return (
-                <div className="-mx-8">
-                  <CodeBlock
-                    hideLineNumbers
-                    value={props.children[0].props.children}
-                    language={language}
-                    className={cn(
-                      'max-h-96 max-w-none block !bg-transparent !py-3 !px-3.5 prose dark:prose-dark border-0 border-t border-b text-foreground !rounded-none w-full',
-                      '[&>code]:m-0 [&>code>span]:flex [&>code>span]:flex-wrap [&>code]:block [&>code>span]:text-foreground'
-                    )}
-                  />
+                  )}
                 </div>
               )
             },
diff --git a/apps/studio/components/ui/AIAssistantPanel/SqlSnippet.tsx b/apps/studio/components/ui/AIAssistantPanel/SqlSnippet.tsx
index 5cbde110e8bb2..9e162427f3bd8 100644
--- a/apps/studio/components/ui/AIAssistantPanel/SqlSnippet.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/SqlSnippet.tsx
@@ -55,7 +55,7 @@ const SqlSnippetWrapper = ({
   const updatedFormatted = formatted?.replace(/--\s*props:\s*\{[^}]+\}/, '').trim()
 
   return (
-    <div className="-mx-8 my-3 mt-2 border-b overflow-hidden">
+    <div className="overflow-hidden">
       <SqlCard
         sql={updatedFormatted}
         isChart={props.isChart === 'true'}
@@ -167,8 +167,8 @@ export const SqlCard = ({
   }, [sql, readOnly, isLoading])
 
   return (
-    <div className="overflow-hidden">
-      <div className={cn('flex items-center gap-2 border-t', showWarning ? '' : 'px-5 py-2')}>
+    <div className="overflow-hidden rounded border w-auto">
+      <div className={cn('flex items-center gap-2', showWarning ? '' : 'px-3 pr-1 py-1')}>
         {showWarning ? (
           <Admonition type="warning" className="mb-0 rounded-none border-0">
             <p>This query contains write operations. Are you sure you want to execute it?</p>
@@ -223,7 +223,7 @@ export const SqlCard = ({
               size={16}
               strokeWidth={1.5}
             />
-            <h3 className="text-sm font-medium flex-1">{title}</h3>
+            <h3 className="text-xs font-medium flex-1">{title}</h3>
 
             {!readOnly && (
               <div className="flex">
@@ -336,7 +336,7 @@ export const SqlCard = ({
 
       {/* Results Section */}
       {results !== undefined && results.length > 0 && isChart && xAxis && yAxis ? (
-        <div className="p-5 border-t">
+        <div className="p-3 border-t">
           <ChartContainer config={{}} className="aspect-auto h-[250px] w-full">
             <BarChart
               data={results}
diff --git a/apps/studio/components/ui/DotGrid.tsx b/apps/studio/components/ui/DotGrid.tsx
index 906206b9e414e..6e0fdbdccf149 100644
--- a/apps/studio/components/ui/DotGrid.tsx
+++ b/apps/studio/components/ui/DotGrid.tsx
@@ -20,10 +20,6 @@ const DotGrid = ({ rows, columns, count }: DotGridProps) => {
 
   const item = {
     hidden: { opacity: 0 },
-    visible: { opacity: 0.5 },
-  }
-
-  const highlightedVariants = {
     visible: {
       opacity: [1, 0.5, 1],
       transition: {
@@ -60,7 +56,7 @@ const DotGrid = ({ rows, columns, count }: DotGridProps) => {
           return (
             <motion.div
               key={index}
-              variants={isHighlighted ? highlightedVariants : item}
+              variants={item}
               className={`w-[1px] h-[1px] rounded-full bg-foreground`}
             />
           )
diff --git a/apps/studio/data/branches/branch-delete-mutation.ts b/apps/studio/data/branches/branch-delete-mutation.ts
index b6682c4f915e9..5a2a2815fe4ee 100644
--- a/apps/studio/data/branches/branch-delete-mutation.ts
+++ b/apps/studio/data/branches/branch-delete-mutation.ts
@@ -3,6 +3,7 @@ import { toast } from 'sonner'
 
 import { del, handleError } from 'data/fetchers'
 import type { ResponseError } from 'types'
+import { BranchesData } from './branches-query'
 import { branchKeys } from './keys'
 
 export type BranchDeleteVariables = {
@@ -35,7 +36,18 @@ export const useBranchDeleteMutation = ({
     {
       async onSuccess(data, variables, context) {
         const { projectRef } = variables
-        await queryClient.invalidateQueries(branchKeys.list(projectRef))
+        setTimeout(() => {
+          queryClient.invalidateQueries(branchKeys.list(projectRef))
+        }, 5000)
+
+        const branches: BranchesData | undefined = queryClient.getQueryData(
+          branchKeys.list(projectRef)
+        )
+        if (branches) {
+          const updatedBranches = branches.filter((branch) => branch.id !== variables.id)
+          queryClient.setQueryData(branchKeys.list(projectRef), updatedBranches)
+        }
+
         await onSuccess?.(data, variables, context)
       },
       async onError(data, variables, context) {
diff --git a/apps/studio/pages/api/ai/sql/generate-v3.ts b/apps/studio/pages/api/ai/sql/generate-v3.ts
index 917c3d07bf51e..0e4f60b6af7f1 100644
--- a/apps/studio/pages/api/ai/sql/generate-v3.ts
+++ b/apps/studio/pages/api/ai/sql/generate-v3.ts
@@ -76,8 +76,8 @@ async function handlePost(req: NextApiRequest, res: NextApiResponse) {
       - Always use semicolons
       - Output as markdown
       - Always include code snippets if available
-      - If a code snippet is SQL, the first line of the snippet should always be -- props: {"title": "Query title", "isChart": "true", "xAxis": "columnName", "yAxis": "columnName"}
-      - Only set chart to true if the query makes sense as a chart
+      - If a code snippet is SQL, the first line of the snippet should always be -- props: {"title": "Query title", "isChart": "true", "xAxis": "columnOrAlias", "yAxis": "columnOrAlias"}
+      - Only set chart to true if the query makes sense as a chart. xAxis and yAxis need to be columns or aliases returned by the query.
       - Explain what the snippet does in a sentence or two before showing it
       - Use vector(384) data type for any embedding/vector related query
       - When debugging, retrieve sql schema details to ensure sql is correct
diff --git a/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/[childId]/index.tsx b/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/[childId]/index.tsx
index e25dc2980fead..99f17904eb3df 100644
--- a/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/[childId]/index.tsx
+++ b/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/[childId]/index.tsx
@@ -53,7 +53,7 @@ const IntegrationPage: NextPageWithLayout = () => {
     return <div>Integration not found</div>
   }
 
-  if (!Component) return <div>Component not found</div>
+  if (!Component) return <div className="p-10 text-sm">Component not found</div>
 
   return <Component />
 }
diff --git a/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/index.tsx b/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/index.tsx
index e25dc2980fead..99f17904eb3df 100644
--- a/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/index.tsx
+++ b/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/index.tsx
@@ -53,7 +53,7 @@ const IntegrationPage: NextPageWithLayout = () => {
     return <div>Integration not found</div>
   }
 
-  if (!Component) return <div>Component not found</div>
+  if (!Component) return <div className="p-10 text-sm">Component not found</div>
 
   return <Component />
 }
diff --git a/apps/studio/pages/project/[ref]/integrations/[id]/index.tsx b/apps/studio/pages/project/[ref]/integrations/[id]/index.tsx
index e25dc2980fead..99f17904eb3df 100644
--- a/apps/studio/pages/project/[ref]/integrations/[id]/index.tsx
+++ b/apps/studio/pages/project/[ref]/integrations/[id]/index.tsx
@@ -53,7 +53,7 @@ const IntegrationPage: NextPageWithLayout = () => {
     return <div>Integration not found</div>
   }
 
-  if (!Component) return <div>Component not found</div>
+  if (!Component) return <div className="p-10 text-sm">Component not found</div>
 
   return <Component />
 }
diff --git a/apps/studio/static-data/integrations/cron-jobs/overview.md b/apps/studio/static-data/integrations/cron-jobs/overview.md
index b9cfc653dfa2f..dfb3bbbf8336b 100644
--- a/apps/studio/static-data/integrations/cron-jobs/overview.md
+++ b/apps/studio/static-data/integrations/cron-jobs/overview.md
@@ -1 +1 @@
-Cron jobs uses the `pg_cron` Postgres extension, which is a simple cron-based job scheduler for Postgres that runs inside the database. It uses the same syntax as a regular cron, but it allows you to schedule Postgres SQL commands directly from the database.
+Supabase Cron uses the `pg_cron` Postgres extension, which is a simple cron-based job scheduler for Postgres that runs inside the database. It uses the same syntax as a regular cron, but it allows you to schedule Postgres SQL commands directly from the database.
diff --git a/packages/ui/src/layout/ai-icon-animation/ai-icon-animation.tsx b/packages/ui/src/layout/ai-icon-animation/ai-icon-animation.tsx
index 32e2e1fb3bd77..3f838bada84ad 100644
--- a/packages/ui/src/layout/ai-icon-animation/ai-icon-animation.tsx
+++ b/packages/ui/src/layout/ai-icon-animation/ai-icon-animation.tsx
@@ -1,97 +1,124 @@
 'use client'
 
-import styles from './ai-icon-animation-style.module.css'
-import { useEffect, useState } from 'react'
-import { cn } from '../../lib/utils/cn'
+import { motion, useMotionValue, useSpring } from 'framer-motion'
+import { useRef, useState } from 'react'
+import { cn } from '../../lib/utils'
 
-interface Props {
+interface AiIconAnimationProps {
+  size?: number
   loading?: boolean
   className?: string
   allowHoverEffect?: boolean
 }
 
-const AiIconAnimation = ({ loading = false, className, allowHoverEffect = false }: Props) => {
-  const [step, setStep] = useState(1)
-  const [exitStep, setExitStep] = useState(1)
-  const [isAnimating, setIsAnimating] = useState(true)
+export const AiIconAnimation = ({
+  size = 24,
+  loading = false,
+  className,
+  allowHoverEffect = false,
+}: AiIconAnimationProps) => {
+  const strokeWidth = Math.max(1, size / 46) // Ensure minimum stroke width of 1
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [isHovering, setIsHovering] = useState(false)
 
-  useEffect(() => {
-    const interval = setInterval(() => {
-      if (loading) {
-        setIsAnimating(true)
-        setStep((step) => {
-          return (step % 5) + 1
-        })
-        setExitStep((step) => {
-          return (step % 5) + 1
-        })
-      }
-    }, 500)
-    return () => clearInterval(interval)
-  }, [loading])
+  const x = useMotionValue(0)
+  const y = useMotionValue(0)
 
-  useEffect(() => {
-    if (loading === false) {
-      setTimeout(() => {
-        setIsAnimating(false)
-      }, 500)
-      setStep(1)
-    }
-  }, [loading])
+  const springX = useSpring(x, { stiffness: 300, damping: 30 })
+  const springY = useSpring(y, { stiffness: 300, damping: 30 })
+
+  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (!allowHoverEffect) return
+    if (!containerRef.current) return
+
+    const rect = containerRef.current.getBoundingClientRect()
+    const centerX = rect.left + rect.width / 2
+    const centerY = rect.top + rect.height / 2
+
+    const mouseX = event.clientX - centerX
+    const mouseY = event.clientY - centerY
+
+    x.set(mouseX / 5)
+    y.set(mouseY / 5)
+  }
+
+  const outerVariants = {
+    rest: { rotate: 0 },
+    loading: { rotate: 360 },
+    hover: { rotate: 10 },
+  }
+
+  const innerVariants = {
+    rest: { scale: 1, x: 0, y: 0 },
+    loading: { scale: [1, 1.1, 1], x: 0, y: 0 },
+    hover: { scale: 1.1 },
+  }
 
   return (
     <div
-      className={cn(
-        styles['ai-icon__container'],
-        allowHoverEffect && styles['ai-icon__container--allow-hover-effect'],
-        loading && isAnimating && styles['spin-ai-icon-container'],
-        className
-      )}
+      className={cn('text-brand-600 flex justify-center items-center relative', className)}
+      style={{ width: size, height: size, position: 'relative' }}
     >
-      <div className={cn(styles['ai-icon__grid'])}>
-        <div
-          className={cn(
-            styles['ai-icon__grid__square'],
-            loading
-              ? styles[`ai-icon__grid__square--step-${step}`]
-              : isAnimating
-                ? styles[`ai-icon__grid__square--exiting--step-${exitStep}`]
-                : styles[`ai-icon__grid__square--static`]
-          )}
-        ></div>
-        <div
-          className={cn(
-            styles['ai-icon__grid__square'],
-            loading
-              ? styles[`ai-icon__grid__square--step-${step}`]
-              : isAnimating
-                ? styles[`ai-icon__grid__square--exiting--step-${exitStep}`]
-                : styles[`ai-icon__grid__square--static`]
-          )}
-        ></div>
-        <div
-          className={cn(
-            styles['ai-icon__grid__square'],
-            loading
-              ? styles[`ai-icon__grid__square--step-${step}`]
-              : isAnimating
-                ? styles[`ai-icon__grid__square--exiting--step-${exitStep}`]
-                : styles[`ai-icon__grid__square--static`]
-          )}
-        ></div>
-        <div
-          className={cn(
-            styles['ai-icon__grid__square'],
-            loading
-              ? styles[`ai-icon__grid__square--step-${step}`]
-              : isAnimating
-                ? styles[`ai-icon__grid__square--exiting--step-${exitStep}`]
-                : styles[`ai-icon__grid__square--static`]
-          )}
-        ></div>
-      </div>
+      <div
+        ref={containerRef}
+        className="absolute flex items-center justify-center"
+        style={{
+          width: size * 2,
+          height: size * 2,
+          left: -size / 2,
+          top: -size / 2,
+        }}
+        onMouseMove={handleMouseMove}
+        onMouseEnter={() => setIsHovering(true)}
+        onMouseLeave={() => {
+          setIsHovering(false)
+          x.set(0)
+          y.set(0)
+        }}
+      />
+
+      <motion.svg
+        width={size}
+        height={size}
+        viewBox="0 0 46 46"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <motion.path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M23 1.78677L44.2132 23L23 44.2132L1.7868 23L23 1.78677ZM23 0.372559L23.7071 1.07967L44.9203 22.2929L45.6274 23L44.9203 23.7071L23.7071 44.9203L23 45.6274L22.2929 44.9203L1.07969 23.7071L0.372583 23L1.07969 22.2929L22.2929 1.07967L23 0.372559Z"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          animate={loading ? 'loading' : isHovering ? 'hover' : 'rest'}
+          variants={outerVariants}
+          transition={{
+            duration: 2,
+            repeat: loading ? Infinity : 0,
+            ease: 'circInOut',
+            type: 'spring',
+            stiffness: 60,
+            damping: 10,
+          }}
+        />
+        <motion.path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M30 23C30 26.866 26.866 30 23 30C19.134 30 16 26.866 16 23C16 19.134 19.134 16 23 16C26.866 16 30 19.134 30 23ZM31 23C31 27.4183 27.4183 31 23 31C18.5817 31 15 27.4183 15 23C15 18.5817 18.5817 15 23 15C27.4183 15 31 18.5817 31 23Z"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          variants={innerVariants}
+          animate={isHovering ? 'hover' : loading ? 'loading' : 'rest'}
+          style={{ x: springX, y: springY }}
+          transition={{
+            duration: 2,
+            repeat: loading ? Infinity : 0,
+            ease: 'easeInOut',
+          }}
+        />
+      </motion.svg>
     </div>
   )
 }
-
-export { AiIconAnimation }