diff --git a/keep-ui/app/loading.tsx b/keep-ui/app/loading.tsx
index 93f2097785..950ca419ad 100644
--- a/keep-ui/app/loading.tsx
+++ b/keep-ui/app/loading.tsx
@@ -1,22 +1,27 @@
 import { Subtitle, Title } from "@tremor/react";
 import Image from "next/image";
+import { clsx } from "clsx";
 
 export default function Loading({
   includeMinHeight = true,
   slowLoading = false,
   loadingText = "Just a second, getting your data 🚨",
-  extraLoadingText = ""
+  extraLoadingText = "",
+  className,
 }: {
   includeMinHeight?: boolean;
   slowLoading?: boolean;
   loadingText?: string;
   extraLoadingText?: string;
-}) { 
+  className?: string;
+}) {
   return (
     <main
-      className={`flex flex-col items-center justify-center ${
-        includeMinHeight ? "min-h-screen-minus-200" : ""
-      }`}
+      className={clsx(
+        "flex flex-col items-center justify-center",
+        includeMinHeight && "min-h-screen-minus-200",
+        className
+      )}
     >
       <Image
         className="animate-bounce"
@@ -26,11 +31,9 @@ export default function Loading({
         height={200}
       />
       <Title>{loadingText}</Title>
-      
-      {extraLoadingText && (
-        <Subtitle>{extraLoadingText}</Subtitle>
-      )}
-      
+
+      {extraLoadingText && <Subtitle>{extraLoadingText}</Subtitle>}
+
       {slowLoading && (
         <Subtitle>
           This is taking a bit longer then usual, please wait...
diff --git a/keep-ui/app/rules/AIGenRules.tsx b/keep-ui/app/rules/AIGenRules.tsx
index 3ba436e11c..abf10d9bd3 100644
--- a/keep-ui/app/rules/AIGenRules.tsx
+++ b/keep-ui/app/rules/AIGenRules.tsx
@@ -1,5 +1,13 @@
-import React, { useState, useEffect } from 'react';
-import { Icon, Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from "@tremor/react";
+import React, { useState, useEffect } from "react";
+import {
+  Icon,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+} from "@tremor/react";
 import {
   createColumnHelper,
   getCoreRowModel,
@@ -8,18 +16,31 @@ import {
   getSortedRowModel,
   SortingState,
   flexRender,
-  Header
+  Header,
 } from "@tanstack/react-table";
-import { useRulePusherUpdates, AIGeneratedRule, useGenRules } from "utils/hooks/useRules";
-import { FaArrowDown, FaArrowRight, FaArrowUp, FaPlus, FaSpinner, FaSync } from "react-icons/fa";
-import { InformationCircleIcon, ExclamationTriangleIcon, QuestionMarkCircleIcon } from "@heroicons/react/24/solid";
+import {
+  useRulePusherUpdates,
+  AIGeneratedRule,
+  useGenRules,
+} from "utils/hooks/useRules";
+import {
+  FaArrowDown,
+  FaArrowRight,
+  FaArrowUp,
+  FaPlus,
+  FaSpinner,
+  FaSync,
+} from "react-icons/fa";
+import {
+  InformationCircleIcon,
+  ExclamationTriangleIcon,
+  QuestionMarkCircleIcon,
+} from "@heroicons/react/24/solid";
 import { useSession } from "next-auth/react";
 import { getApiURL } from "utils/apiUrl";
 import useSWR, { mutate } from "swr";
 import Loading from "app/loading";
 
-
-
 const columnHelper = createColumnHelper<AIGeneratedRule>();
 
 interface SortableHeaderCellProps {
@@ -56,14 +77,16 @@ const SortableHeaderCell: React.FC<SortableHeaderCellProps> = ({
                 column.getNextSortingOrder() === "asc"
                   ? "Sort ascending"
                   : column.getNextSortingOrder() === "desc"
-                  ? "Sort descending"
-                  : "Clear sort"
+                    ? "Sort descending"
+                    : "Clear sort"
+              }
+              icon={
+                column.getIsSorted()
+                  ? column.getIsSorted() === "asc"
+                    ? FaArrowDown
+                    : FaArrowUp
+                  : FaArrowRight
               }
-              icon={column.getIsSorted() ? (
-                column.getIsSorted() === "asc" ? FaArrowDown : FaArrowUp
-              ) : (
-                FaArrowRight
-              )}
             />
           </>
         )}
@@ -73,28 +96,32 @@ const SortableHeaderCell: React.FC<SortableHeaderCellProps> = ({
 };
 
 export const AIGenRules: React.FC = () => {
-  const {triggerGenRules } = useGenRules();
+  const { triggerGenRules } = useGenRules();
   const { data: session } = useSession();
   const [sorting, setSorting] = React.useState<SortingState>([]);
 
   const [isLoadingRules, setIsLoadingRules] = useState(true);
   const [generatedRules, setGeneratedRules] = useState<any>([]);
 
-  const [loadingRows, setLoadingRows] = useState<{ [key: string]: boolean }>({});
-  const [successRows, setSuccessRows] = useState<{ [key: string]: boolean }>({});
+  const [loadingRows, setLoadingRows] = useState<{ [key: string]: boolean }>(
+    {}
+  );
+  const [successRows, setSuccessRows] = useState<{ [key: string]: boolean }>(
+    {}
+  );
 
   const mutateAIGeneratedRules = (rules: AIGeneratedRule[]) => {
     setGeneratedRules(rules);
     setIsLoadingRules(false);
   };
 
-  const { data:serverGenRules } = useRulePusherUpdates();
+  const { data: serverGenRules } = useRulePusherUpdates();
 
   useEffect(() => {
-    if (Array.isArray(serverGenRules) && (0 === serverGenRules.length)) {
+    if (Array.isArray(serverGenRules) && 0 === serverGenRules.length) {
       return;
     }
-    
+
     mutateAIGeneratedRules(serverGenRules);
   }, [serverGenRules]);
 
@@ -108,17 +135,20 @@ export const AIGenRules: React.FC = () => {
     setLoadingRows((prev) => ({ ...prev, [ruleKey]: true }));
     try {
       const temp = {
-        method: 'POST',
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${session?.accessToken}`,
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${session?.accessToken}`,
         },
         body: JSON.stringify({
           ruleName: rule.ShortRuleName,
-          sqlQuery: { sql: '{new-version-not-adding-this}', params: ['no-params'] },
+          sqlQuery: {
+            sql: "{new-version-not-adding-this}",
+            params: ["no-params"],
+          },
           celQuery: rule.CELRule,
           timeframeInSeconds: rule.Timeframe,
-          timeUnit: 'minutes',
+          timeUnit: "minutes",
           groupingCriteria: rule.GroupBy,
           groupDescription: rule.ChainOfThought,
           requireApprove: false,
@@ -133,10 +163,10 @@ export const AIGenRules: React.FC = () => {
         mutate(`${apiUrl}/rules`); // Refresh the rules list
       } else {
         const result = await response.json();
-        console.error('Failed to add rule:', result);
+        console.error("Failed to add rule:", result);
       }
     } catch (error) {
-      console.error('Error adding rule:', error);
+      console.error("Error adding rule:", error);
     } finally {
       setLoadingRows((prev) => {
         const newLoadingRows = { ...prev };
@@ -146,83 +176,87 @@ export const AIGenRules: React.FC = () => {
     }
   };
 
-  const columns = React.useMemo(() => [
-    columnHelper.accessor("ShortRuleName", {
-      header: "Short Rule Name",
-    }),
-    columnHelper.accessor("Score", {
-      header: "Score",
-    }),
-    columnHelper.accessor("CELRule", {
-      header: "CEL Rule",
-      cell: (info) => <div className="text-wrap">{info.getValue()}</div>,
-    }),
-    columnHelper.accessor("Timeframe", {
-      header: "Timeframe",
-    }),
-    columnHelper.accessor("GroupBy", {
-      header: "Group By",
-      cell: (info) => info.getValue().join(", "),
-    }),
-    columnHelper.accessor("ChainOfThought", {
-      header: "Explanations",
-      cell: (info) => {
-        const rule = info.row.original;
-        return (
-          <div className="flex space-x-2">
-            <Icon
-              icon={InformationCircleIcon}
-              tooltip={`Thinking behind the rule: ${rule.ChainOfThought}`}
-              size="xs"
-              color="gray"
-              className="ml-1"
-              variant="solid"
-            />
-            <Icon
-              icon={ExclamationTriangleIcon}
-              tooltip={`Why this rule is too general: ${rule.WhyTooGeneral}`}
-              size="xs"
-              color="gray"
-              className="ml-1"
-              variant="solid"
-            />
-            <Icon
-              icon={QuestionMarkCircleIcon}
-              tooltip={`Why this rule is too specific: ${rule.WhyTooSpecific}`}
-              size="xs"
-              color="gray"
-              className="ml-1"
-              variant="solid"
-            />
-          </div>
-        );
-      },
-    }),
-    columnHelper.display({
-      id: 'add',
-      header: 'Add',
-      cell: (info) => {
-        const rule = info.row.original;
-        const ruleKey = rule.ShortRuleName;
-        return (
-          <div className="flex justify-center items-center">
-            {loadingRows[ruleKey] ? (
-              <FaSpinner className="animate-spin text-gray-500" />
-            ) : successRows[ruleKey] ? (
-              <div className="text-green-500">Added!</div>
-            ) : (
-              <button
-                onClick={() => handleAddRule(rule)}
-                className="text-blue-500 hover:text-blue-700"
-              >
-                <FaPlus /> 
-              </button>
-            )}
-          </div>
-        );
-      },
-    }),
-  ] as ColumnDef<AIGeneratedRule>[], [loadingRows, successRows]);
+  const columns = React.useMemo(
+    () =>
+      [
+        columnHelper.accessor("ShortRuleName", {
+          header: "Short Rule Name",
+        }),
+        columnHelper.accessor("Score", {
+          header: "Score",
+        }),
+        columnHelper.accessor("CELRule", {
+          header: "CEL Rule",
+          cell: (info) => <div className="text-wrap">{info.getValue()}</div>,
+        }),
+        columnHelper.accessor("Timeframe", {
+          header: "Timeframe",
+        }),
+        columnHelper.accessor("GroupBy", {
+          header: "Group By",
+          cell: (info) => info.getValue().join(", "),
+        }),
+        columnHelper.accessor("ChainOfThought", {
+          header: "Explanations",
+          cell: (info) => {
+            const rule = info.row.original;
+            return (
+              <div className="flex space-x-2">
+                <Icon
+                  icon={InformationCircleIcon}
+                  tooltip={`Thinking behind the rule: ${rule.ChainOfThought}`}
+                  size="xs"
+                  color="gray"
+                  className="ml-1"
+                  variant="solid"
+                />
+                <Icon
+                  icon={ExclamationTriangleIcon}
+                  tooltip={`Why this rule is too general: ${rule.WhyTooGeneral}`}
+                  size="xs"
+                  color="gray"
+                  className="ml-1"
+                  variant="solid"
+                />
+                <Icon
+                  icon={QuestionMarkCircleIcon}
+                  tooltip={`Why this rule is too specific: ${rule.WhyTooSpecific}`}
+                  size="xs"
+                  color="gray"
+                  className="ml-1"
+                  variant="solid"
+                />
+              </div>
+            );
+          },
+        }),
+        columnHelper.display({
+          id: "add",
+          header: "Add",
+          cell: (info) => {
+            const rule = info.row.original;
+            const ruleKey = rule.ShortRuleName;
+            return (
+              <div className="flex justify-center items-center">
+                {loadingRows[ruleKey] ? (
+                  <FaSpinner className="animate-spin text-gray-500" />
+                ) : successRows[ruleKey] ? (
+                  <div className="text-green-500">Added!</div>
+                ) : (
+                  <button
+                    onClick={() => handleAddRule(rule)}
+                    className="text-blue-500 hover:text-blue-700"
+                  >
+                    <FaPlus />
+                  </button>
+                )}
+              </div>
+            );
+          },
+        }),
+      ] as ColumnDef<AIGeneratedRule>[],
+    [loadingRows, successRows]
+  );
 
   const table = useReactTable({
     columns,
@@ -236,21 +270,29 @@ export const AIGenRules: React.FC = () => {
   });
 
   if (isLoadingRules) {
-    return <Loading loadingText="Generating AI recommendations..." extraLoadingText="This might take a handfull of minutes" />;
+    return (
+      <Loading
+        className="m-auto"
+        includeMinHeight={false}
+        loadingText="Generating AI recommendations..."
+        extraLoadingText="This might take a handfull of minutes"
+      />
+    );
   }
 
   if (generatedRules.error) {
     return (
       <div className="flex justify-center items-center h-64">
         <div className="text-center">
-          <p className="text-lg font-semibold text-red-600">{generatedRules.error}</p>
+          <p className="text-lg font-semibold text-red-600">
+            {generatedRules.error}
+          </p>
           <p className="text-sm text-gray-500">Please try again later</p>
         </div>
       </div>
     );
   }
 
-  
   return (
     <div className="space-y-4">
       <div className="flex flex-col items-start">
@@ -260,7 +302,9 @@ export const AIGenRules: React.FC = () => {
         >
           Generate more rules
         </button>
-        <h2 className="text-xl font-semibold mt-4 self-center">AI Generated Rules</h2>
+        <h2 className="text-xl font-semibold mt-4 self-center">
+          AI Generated Rules
+        </h2>
       </div>
       <p className="text-center">{generatedRules.summery}</p>
       <Table>
@@ -271,10 +315,7 @@ export const AIGenRules: React.FC = () => {
               key={headerGroup.id}
             >
               {headerGroup.headers.map((header) => (
-                <SortableHeaderCell
-                  header={header}
-                  key={header.id}
-                >
+                <SortableHeaderCell header={header} key={header.id}>
                   {flexRender(
                     header.column.columnDef.header,
                     header.getContext()
@@ -292,8 +333,8 @@ export const AIGenRules: React.FC = () => {
               <TableRow
                 className={`${
                   successRows[ruleKey]
-                    ? 'bg-green-100'
-                    : 'even:bg-tremor-background-muted even:dark:bg-dark-tremor-background-muted hover:bg-slate-100'
+                    ? "bg-green-100"
+                    : "even:bg-tremor-background-muted even:dark:bg-dark-tremor-background-muted hover:bg-slate-100"
                 } cursor-pointer`}
                 key={row.id}
               >
@@ -312,5 +353,3 @@ export const AIGenRules: React.FC = () => {
 };
 
 export default AIGenRules;
-
-
diff --git a/keep-ui/app/rules/CorrelationPlaceholder.tsx b/keep-ui/app/rules/CorrelationPlaceholder.tsx
index 81fdfa4bd7..59f8a3ce6b 100644
--- a/keep-ui/app/rules/CorrelationPlaceholder.tsx
+++ b/keep-ui/app/rules/CorrelationPlaceholder.tsx
@@ -1,31 +1,17 @@
-import { Fragment, useState } from "react";
-import { Button, Card, Subtitle, Title } from "@tremor/react";
-import { CorrelationSidebar } from "./CorrelationSidebar";
+import { Card, Subtitle, Title } from "@tremor/react";
 import { PlaceholderSankey } from "./PlaceholderSankey";
 
 export const CorrelationPlaceholder = () => {
-  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
-
-  const onCorrelationClick = () => {
-    setIsSidebarOpen(true);
-  };
-
   return (
-    <Fragment>
-      <Card className="flex flex-col items-center justify-center gap-y-8 h-full">
-        <div className="text-center space-y-3">
-          <Title className="text-2xl">No Correlations Yet</Title>
-          <Subtitle className="text-gray-400">
-            Start building correlation and get all relevant alerts in one
-            dedicated place
-          </Subtitle>
-        </div>
-        <PlaceholderSankey className="max-w-full" />
-      </Card>
-      <CorrelationSidebar
-        isOpen={isSidebarOpen}
-        toggle={() => setIsSidebarOpen(!isSidebarOpen)}
-      />
-    </Fragment>
+    <Card className="flex flex-col items-center justify-center gap-y-8 h-full">
+      <div className="text-center space-y-3">
+        <Title className="text-2xl">No Correlations Yet</Title>
+        <Subtitle className="text-gray-400">
+          Start building correlation and get all relevant alerts in one
+          dedicated place
+        </Subtitle>
+      </div>
+      <PlaceholderSankey className="max-w-full" />
+    </Card>
   );
 };
diff --git a/keep-ui/app/rules/CorrelationTable.tsx b/keep-ui/app/rules/CorrelationTable.tsx
index 027aa0fa02..c3fd1ec3bb 100644
--- a/keep-ui/app/rules/CorrelationTable.tsx
+++ b/keep-ui/app/rules/CorrelationTable.tsx
@@ -1,7 +1,8 @@
 import {
   Badge,
   Button,
-  Card, Icon,
+  Card,
+  Icon,
   Subtitle,
   Table,
   TableBody,
@@ -28,24 +29,22 @@ import {
 } from "@tanstack/react-table";
 import { DefaultRuleGroupType, parseCEL } from "react-querybuilder";
 import { useRouter, useSearchParams } from "next/navigation";
-import { FormattedQueryCell } from "./FormattedQueryCell";
 import { DeleteRuleCell } from "./CorrelationSidebar/DeleteRule";
-import {PlusIcon} from "@radix-ui/react-icons";
+import { PlusIcon } from "@radix-ui/react-icons";
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@tremor/react";
 import { BoltIcon, SparklesIcon } from "@heroicons/react/24/outline";
-import { AIGenRules } from './AIGenRules'; // Add this import at the top of the file
+import { AIGenRules } from "./AIGenRules";
 import { FaArrowDown, FaArrowRight, FaArrowUp } from "react-icons/fa";
-import { Header } from "@tanstack/react-table"; // Ensure this import is present
-
+import { Header } from "@tanstack/react-table";
+import "./CorrelationTabs.css";
 
 import { CorrelationPlaceholder } from "./CorrelationPlaceholder";
 
-
-const TIMEFRAME_UNITS_FROM_SECONDS= {
+const TIMEFRAME_UNITS_FROM_SECONDS = {
   seconds: (amount: number) => amount,
   minutes: (amount: number) => amount / 60,
   hours: (amount: number) => amount / 3600,
-  days: (amount: number) => amount  / 86400,
+  days: (amount: number) => amount / 86400,
 } as const;
 
 const columnHelper = createColumnHelper<Rule>();
@@ -87,14 +86,16 @@ const SortableHeaderCell: React.FC<SortableHeaderCellProps> = ({
                 column.getNextSortingOrder() === "asc"
                   ? "Sort ascending"
                   : column.getNextSortingOrder() === "desc"
-                  ? "Sort descending"
-                  : "Clear sort"
+                    ? "Sort descending"
+                    : "Clear sort"
+              }
+              icon={
+                column.getIsSorted()
+                  ? column.getIsSorted() === "asc"
+                    ? FaArrowDown
+                    : FaArrowUp
+                  : FaArrowRight
               }
-              icon={column.getIsSorted() ? (
-                column.getIsSorted() === "asc" ? FaArrowDown : FaArrowUp
-              ) : (
-                FaArrowRight
-              )}
             />
           </>
         )}
@@ -131,7 +132,9 @@ export const CorrelationTable = ({ rules }: CorrelationTableProps) => {
       return {
         name: selectedRule.name,
         description: selectedRule.group_description ?? "",
-        timeAmount: TIMEFRAME_UNITS_FROM_SECONDS[timeunit](selectedRule.timeframe),
+        timeAmount: TIMEFRAME_UNITS_FROM_SECONDS[timeunit](
+          selectedRule.timeframe
+        ),
         timeUnit: timeunit,
         groupedAttributes: selectedRule.grouping_criteria,
         requireApprove: selectedRule.require_approve,
@@ -176,27 +179,26 @@ export const CorrelationTable = ({ rules }: CorrelationTableProps) => {
       }),
       columnHelper.accessor("grouping_criteria", {
         header: "Grouped by",
-        cell: (context) => (
-          context.getValue().map((group, index) =>
+        cell: (context) =>
+          context.getValue().map((group, index) => (
             <>
-              <Badge color="orange" key={group}>{group}</Badge>
+              <Badge color="orange" key={group}>
+                {group}
+              </Badge>
               {context.getValue().length !== index + 1 && (
-              <Icon  icon={PlusIcon} size="xs" color="slate" />
-            )}
+                <Icon icon={PlusIcon} size="xs" color="slate" />
+              )}
             </>
-          )
-        ),
+          )),
       }),
       columnHelper.accessor("incidents", {
         header: "Incidents",
-        cell: (context) => (
-          context.getValue()
-        ),
+        cell: (context) => context.getValue(),
       }),
       columnHelper.display({
-        id: 'delete',
+        id: "delete",
         header: "",
-        cell: (context) => (<DeleteRuleCell ruleId={context.row.original.id} />),
+        cell: (context) => <DeleteRuleCell ruleId={context.row.original.id} />,
         enableSorting: false,
       }),
     ],
@@ -229,8 +231,8 @@ export const CorrelationTable = ({ rules }: CorrelationTableProps) => {
           Create Correlation
         </Button>
       </div>
-      <TabGroup className="mt-6">
-        <TabList color="orange">
+      <TabGroup className="Correlation-Tabs mt-6">
+        <TabList color="orange" className="mb-2">
           <Tab icon={BoltIcon} onClick={() => setSelectedTab("existing")}>
             Existing Correlations
           </Tab>
@@ -246,56 +248,53 @@ export const CorrelationTable = ({ rules }: CorrelationTableProps) => {
         </TabList>
         <TabPanels>
           <TabPanel>
-          {rules.length === 0 ? (
-            <CorrelationPlaceholder />
-          ) : (
-            
-            <Card className="mt-4">
-              <Table>
-                <TableHead>
-                  {table.getHeaderGroups().map((headerGroup) => (
-                    <TableRow
-                      className="border-b border-tremor-border dark:border-dark-tremor-border"
-                      key={headerGroup.id}
-                    >
-                      {headerGroup.headers.map((header) => (
-                        <SortableHeaderCell
-                          header={header}
-                          key={header.id}
-                        >
-                          {flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
-                        </SortableHeaderCell>
-                      ))}
-                    </TableRow>
-                  ))}
-                </TableHead>
-                <TableBody>
-                  {table.getRowModel().rows.map((row) => (
-                    <TableRow
-                      key={row.id}
-                      className="cursor-pointer even:bg-tremor-background-muted even:dark:bg-dark-tremor-background-muted hover:bg-slate-100"
-                      onClick={() => router.push(`?id=${row.original.id}`)}
-                    >
-                      {row.getVisibleCells().map((cell) => (
-                        <TableCell key={cell.id}>
-                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                        </TableCell>
-                      ))}
-                    </TableRow>
-                  ))}
-                </TableBody>
+            {rules.length === 0 ? (
+              <CorrelationPlaceholder />
+            ) : (
+              <Card>
+                <Table>
+                  <TableHead>
+                    {table.getHeaderGroups().map((headerGroup) => (
+                      <TableRow
+                        className="border-b border-tremor-border dark:border-dark-tremor-border"
+                        key={headerGroup.id}
+                      >
+                        {headerGroup.headers.map((header) => (
+                          <SortableHeaderCell header={header} key={header.id}>
+                            {flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
+                          </SortableHeaderCell>
+                        ))}
+                      </TableRow>
+                    ))}
+                  </TableHead>
+                  <TableBody>
+                    {table.getRowModel().rows.map((row) => (
+                      <TableRow
+                        key={row.id}
+                        className="cursor-pointer even:bg-tremor-background-muted even:dark:bg-dark-tremor-background-muted hover:bg-slate-100"
+                        onClick={() => router.push(`?id=${row.original.id}`)}
+                      >
+                        {row.getVisibleCells().map((cell) => (
+                          <TableCell key={cell.id}>
+                            {flexRender(
+                              cell.column.columnDef.cell,
+                              cell.getContext()
+                            )}
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                    ))}
+                  </TableBody>
                 </Table>
               </Card>
-          )}
-            </TabPanel>
+            )}
+          </TabPanel>
           <TabPanel>
-            <Card className="mt-4">
-              <div className="p-4 text-center text-gray-500">
-                {isAIGenRulesLoaded ? <AIGenRules /> : null}
-              </div>
+            <Card className="flex-1 flex flex-col">
+              {isAIGenRulesLoaded ? <AIGenRules /> : null}
             </Card>
           </TabPanel>
         </TabPanels>
diff --git a/keep-ui/app/rules/CorrelationTabs.css b/keep-ui/app/rules/CorrelationTabs.css
new file mode 100644
index 0000000000..94440d400a
--- /dev/null
+++ b/keep-ui/app/rules/CorrelationTabs.css
@@ -0,0 +1,5 @@
+.Correlation-Tabs {
+    &.tremor-TabGroup-root, .tremor-TabPanels-root, .tremor-TabPanel-root:not(.hidden) {
+        @apply flex flex-col flex-1;
+    }
+}