diff --git a/keep-ui/app/runbooks/runbook-table.tsx b/keep-ui/app/runbooks/runbook-table.tsx
index 7a83746fd..e95a9f22a 100644
--- a/keep-ui/app/runbooks/runbook-table.tsx
+++ b/keep-ui/app/runbooks/runbook-table.tsx
@@ -10,6 +10,7 @@ import {
   TextInput,
   Title,
   Card,
+  Callout,
 } from "@tremor/react";
 import {
   createColumnHelper,
@@ -27,6 +28,7 @@ import { fetcher } from "@/utils/fetcher";
 import { useSession } from "next-auth/react";
 import RunbookActions from "./runbook-actions";
 import { RunbookDto, RunbookResponse } from "./models";
+import { ExclamationCircleIcon } from "@heroicons/react/20/solid";
 
 const customStyles = {
   content: {
@@ -123,7 +125,7 @@ function SettingsPage() {
     handleSubmit: submitHandler,
     provider,
     fileData,
-  } = useRunBookTriggers(getValues(), refresh);
+  } = useRunBookTriggers(getValues(), refresh, setIsModalOpen);
 
   const selectedProviderId = watch(
     "providerId",
@@ -269,7 +271,7 @@ function RunbookIncidentTable() {
 
   let shouldFetch = session?.accessToken ? true : false;
 
-  const { data: runbooksData, error } = useSWR<RunbookResponse>(
+  const { data: runbooksData, error, isLoading } = useSWR<RunbookResponse>(
     shouldFetch
       ? `${getApiURL()}/runbooks?limit=${limit}&offset=${offset}`
       : null,
@@ -301,13 +303,13 @@ function RunbookIncidentTable() {
   };
 
   return (
-    <div className="flex flex-col h-full gap-4">
-      <div className="flex justify-between items-center h-[10%]">
+    <div className="flex flex-col gap-4">
+      <div className="flex justify-between items-center">
         <Title>Runbook</Title>
         <SettingsPage />
       </div>
-      <Card className="flex-1 overflow-auto">
-        {!!total_count && (
+      <Card className="flex-grow">
+        {!isLoading && !error && (
           <GenericTable<RunbookDto>
             data={runbooks}
             columns={columnsv2}
@@ -322,6 +324,12 @@ function RunbookIncidentTable() {
             isRowSelectable={true}
           />
         )}
+        {error && (
+          <Callout title={""}>
+            <ExclamationCircleIcon className="h-6 w-6 text-red-600" />
+            Something went wrong. please try again or reach out support team.
+          </Callout>
+        )}
       </Card>
     </div>
   );
diff --git a/keep-ui/components/table/GenericTable.tsx b/keep-ui/components/table/GenericTable.tsx
index 7970ea230..7692897df 100644
--- a/keep-ui/components/table/GenericTable.tsx
+++ b/keep-ui/components/table/GenericTable.tsx
@@ -143,7 +143,7 @@ export function GenericTable<T>({
 
     return (
         <div className="flex flex-col w-full h-full max-h-full">
-            <div className="overflow-auto h-1/2">
+            <div className="overflow-auto h-[85%]">
             {!!selectedRowIds.length  && getActions && <div className="mb-2">{getActions(table, selectedRowIds)}</div>}
                 <TremorTable className="w-full rounded border border-tremor-border dark:border-dark-tremor-border">
                     <TableHead>
@@ -183,7 +183,7 @@ export function GenericTable<T>({
                     </TableBody>
                 </TremorTable>
             </div>
-            <div className="mt-4">
+            <div className="mt-4 h-[15%]">
                 {pagination&&<Pagination
                     table={table}
                     isRefreshAllowed={false}
diff --git a/keep-ui/utils/hooks/useRunbook.ts b/keep-ui/utils/hooks/useRunbook.ts
index e7ba057ba..467068787 100644
--- a/keep-ui/utils/hooks/useRunbook.ts
+++ b/keep-ui/utils/hooks/useRunbook.ts
@@ -8,15 +8,13 @@ import { debounce } from "lodash";
 import { useSession } from "next-auth/react";
 import { toast } from "react-toastify";
 
-export const useRunBookTriggers = (values: any, refresh: number) => {
+export const useRunBookTriggers = (values: any, refresh: number, setIsModalOpen:  React.Dispatch<React.SetStateAction<boolean>>) => {
   const providersData = useProviders();
-  const [error, setError] = useState("");
-  const [synced, setSynced] = useState(false);
   const [fileData, setFileData] = useState<any>({});
   const [reposData, setRepoData] = useState<any>([]);
-  const { pathToMdFile, repoName, userName, providerId, domain } = values || {};
+  const { providerId } = values || {};
   const { data: session } = useSession();
-  const { installed_providers, providers } = (providersData?.data ||
+  const { installed_providers } = (providersData?.data ||
     {}) as ProvidersResponse;
   const runBookInstalledProviders =
     installed_providers?.filter((provider) =>
@@ -41,6 +39,7 @@ export const useRunBookTriggers = (values: any, refresh: number) => {
         setRepoData(data);
       } catch (err) {
         console.log("error occurred while fetching data");
+        toast.error("Failed to fetch repositories. Please check the provider settings.");
         setRepoData([]);
       }
     };
@@ -83,20 +82,23 @@ export const useRunBookTriggers = (values: any, refresh: number) => {
       });
 
       if (!response) {
-        return setError("Something went wrong. try agian after some time");
+        toast.error("Failed to create runbook. Something went wrong, please try again later.");
+        return;
       }
 
       if(!response.ok) {
-        return setError("Something went wrong. try agian after some time");
+        toast.error("Failed to create runbook. Something went wrong, please try again later.");
+        return;
 
       }
       const result = await response.json();
       setFileData(result);
-      setSynced(false);
+      setIsModalOpen(false);
+      toast.success("Runbook created successfully");
     } catch (err) {
-      return setError("Something went wrong. try agian after some time");
+      return;
     } finally {
-      setSynced(true);
+      
     }
   };