diff --git a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesDrawer.tsx b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesDrawer.tsx
index 19e58c8d9b4..70bc6ed890c 100644
--- a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesDrawer.tsx
+++ b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesDrawer.tsx
@@ -65,7 +65,8 @@ export const AddRepositoriesDrawer = ({
   orgData: AddRepositoryData;
 }) => {
   const classes = useStyles();
-  const { values } = useFormikContext<AddRepositoriesFormValues>();
+  const { values, status, setStatus } =
+    useFormikContext<AddRepositoriesFormValues>();
   const [searchString, setSearchString] = useState<string>('');
   const [selectedRepos, setSelectedRepos] = useState<AddedRepositories>({});
 
@@ -75,6 +76,13 @@ export const AddRepositoriesDrawer = ({
 
   const handleSelectRepoFromDrawer = (selected: AddedRepositories) => {
     onSelect(selected, orgData?.orgName || '');
+    const newStatus = { ...(status?.errors || {}) };
+    Object.keys(newStatus).forEach(s => {
+      if (!Object.keys(selected).find(sel => sel === s)) {
+        delete newStatus[s];
+      }
+    });
+    setStatus({ ...status, errors: newStatus });
     onClose();
   };
 
diff --git a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesForm.tsx b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesForm.tsx
index 4e800601d70..fec7bb3c6ba 100644
--- a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesForm.tsx
+++ b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesForm.tsx
@@ -4,7 +4,12 @@ import { WarningPanel } from '@backstage/core-components';
 
 import { makeStyles } from '@material-ui/core';
 import FormControl from '@mui/material/FormControl';
+import { useFormikContext } from 'formik';
 
+import { useDrawer } from '@janus-idp/shared-react';
+
+import { AddRepositoriesFormValues, PullRequestPreviewData } from '../../types';
+import { PreviewFileSidebar } from '../PreviewFile/PreviewFile';
 // import HelpIcon from '@mui/icons-material/HelpOutline';
 // import FormControlLabel from '@mui/material/FormControlLabel';
 // import Radio from '@mui/material/Radio';
@@ -47,6 +52,23 @@ export const AddRepositoriesForm = ({
   error: { message: string; title: string } | null;
 }) => {
   const styles = useStyles();
+  const { openDrawer, setOpenDrawer, drawerData } = useDrawer();
+  const { setFieldValue, values } =
+    useFormikContext<AddRepositoriesFormValues>();
+
+  const closeDrawer = () => {
+    setOpenDrawer(false);
+  };
+
+  const handleSave = (pullRequest: PullRequestPreviewData, _event: any) => {
+    Object.keys(pullRequest).forEach(pr => {
+      setFieldValue(
+        `repositories.${pr}.catalogInfoYaml.prTemplate`,
+        pullRequest[pr],
+      );
+    });
+    setOpenDrawer(false);
+  };
 
   return (
     <>
@@ -99,6 +121,15 @@ export const AddRepositoriesForm = ({
         <br />
       </FormControl>
       <AddRepositoriesFormFooter />
+      {openDrawer && (
+        <PreviewFileSidebar
+          open={openDrawer}
+          onClose={closeDrawer}
+          data={drawerData}
+          repositoryType={values.repositoryType}
+          handleSave={handleSave}
+        />
+      )}
     </>
   );
 };
diff --git a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesFormFooter.tsx b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesFormFooter.tsx
index dc2953b19ec..1d47d75a434 100644
--- a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesFormFooter.tsx
+++ b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesFormFooter.tsx
@@ -2,8 +2,7 @@ import React from 'react';
 
 import { Link } from '@backstage/core-components';
 
-import { makeStyles } from '@material-ui/core';
-import Button from '@mui/material/Button';
+import { Button, makeStyles } from '@material-ui/core';
 import CircularProgress from '@mui/material/CircularProgress';
 import Tooltip from '@mui/material/Tooltip';
 import { useFormikContext } from 'formik';
@@ -36,7 +35,7 @@ const useStyles = makeStyles(theme => ({
     paddingTop: '24px',
     paddingBottom: '24px',
     paddingLeft: '24px',
-    backgroundColor: theme.palette.background.paper,
+    backgroundColor: theme.palette.background.default,
     width: '100%',
     borderTopStyle: 'groove',
     border: theme.palette.divider,
@@ -68,6 +67,7 @@ export const AddRepositoriesFormFooter = () => {
   const submitButton = (
     <Button
       variant="contained"
+      color="primary"
       onClick={handleSubmit as any}
       className={styles.createButton}
       disabled={disableCreate || isSubmitting}
diff --git a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesPage.tsx b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesPage.tsx
index 4360660002b..d9d659085ec 100644
--- a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesPage.tsx
+++ b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesPage.tsx
@@ -4,15 +4,20 @@ import { useNavigate } from 'react-router-dom';
 import { Content, Header, Page } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 
-import { useTheme } from '@material-ui/core';
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  makeStyles,
+  useTheme,
+} from '@material-ui/core';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import Accordion from '@mui/material/Accordion';
-import AccordionDetails from '@mui/material/AccordionDetails';
-import AccordionSummary from '@mui/material/AccordionSummary';
 import Typography from '@mui/material/Typography';
 import { Formik, FormikHelpers } from 'formik';
 import { get } from 'lodash';
 
+import { DrawerContextProvider } from '@janus-idp/shared-react';
+
 import { bulkImportApiRef } from '../../api/BulkImportBackendClient';
 import {
   AddRepositoriesFormValues,
@@ -27,8 +32,18 @@ import {
 import { AddRepositoriesForm } from './AddRepositoriesForm';
 import { Illustrations } from './Illustrations';
 
+const useStyles = makeStyles(() => ({
+  accordionDetails: {
+    flexDirection: 'row',
+    display: 'flex',
+    justifyContent: 'space-around',
+    overflow: 'auto',
+  },
+}));
+
 export const AddRepositoriesPage = () => {
   const theme = useTheme();
+  const classes = useStyles();
   const navigate = useNavigate();
   const [generalSubmitError, setGeneralSubmitError] = React.useState<{
     message: string;
@@ -107,14 +122,7 @@ export const AddRepositoriesPage = () => {
                 Add repositories to Red Hat Developer Hub in 4 steps
               </Typography>
             </AccordionSummary>
-            <AccordionDetails
-              sx={{
-                flexDirection: 'row',
-                display: 'flex',
-                justifyContent: 'space-around',
-                overflow: 'auto',
-              }}
-            >
+            <AccordionDetails className={classes.accordionDetails}>
               {/* <Illustrations
                 iconClassname={
                   theme.palette.type === 'dark'
@@ -158,13 +166,15 @@ export const AddRepositoriesPage = () => {
             </AccordionDetails>
           </Accordion>
         </div>
-        <Formik
-          initialValues={initialValues}
-          enableReinitialize
-          onSubmit={handleSubmit}
-        >
-          <AddRepositoriesForm error={generalSubmitError} />
-        </Formik>
+        <DrawerContextProvider>
+          <Formik
+            initialValues={initialValues}
+            enableReinitialize
+            onSubmit={handleSubmit}
+          >
+            <AddRepositoriesForm error={generalSubmitError} />
+          </Formik>
+        </DrawerContextProvider>
       </Content>
     </Page>
   );
diff --git a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesSearchBar.tsx b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesSearchBar.tsx
index 2aa26ce1707..95f80a367c2 100644
--- a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesSearchBar.tsx
+++ b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesSearchBar.tsx
@@ -1,12 +1,14 @@
 import React from 'react';
 
-import { makeStyles } from '@material-ui/core';
-import Clear from '@mui/icons-material/Clear';
-import Search from '@mui/icons-material/Search';
-import FormControl from '@mui/material/FormControl';
-import IconButton from '@mui/material/IconButton';
-import Input from '@mui/material/Input';
-import InputAdornment from '@mui/material/InputAdornment';
+import {
+  FormControl,
+  IconButton,
+  Input,
+  InputAdornment,
+  makeStyles,
+} from '@material-ui/core';
+import Clear from '@material-ui/icons/Clear';
+import Search from '@material-ui/icons/Search';
 
 const useStyles = makeStyles({
   formControl: {
@@ -37,7 +39,6 @@ export const RepositoriesSearchBar = ({
         autoComplete="off"
         onChange={event => onChange(event.target.value)}
         value={value}
-        size="medium"
         startAdornment={
           <InputAdornment position="start">
             <Search />
diff --git a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTable.test.tsx b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTable.test.tsx
index 86b12c93bb0..4c017191ea2 100644
--- a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTable.test.tsx
+++ b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTable.test.tsx
@@ -8,12 +8,14 @@ import { TestApiProvider } from '@backstage/test-utils';
 import { render } from '@testing-library/react';
 import { useFormikContext } from 'formik';
 
+import { bulkImportApiRef } from '../../api/BulkImportBackendClient';
 import { useRepositories } from '../../hooks';
 import {
+  mockGetImportJobs,
   mockGetOrganizations,
   mockGetRepositories,
 } from '../../mocks/mockData';
-import { RepositorySelection } from '../../types';
+import { ImportJobStatus, RepositorySelection } from '../../types';
 import { AddRepositoriesTable } from './AddRepositoriesTable';
 
 jest.mock('formik', () => ({
@@ -21,24 +23,39 @@ jest.mock('formik', () => ({
   useFormikContext: jest.fn(),
 }));
 
+jest.mock('@backstage/core-plugin-api', () => ({
+  ...jest.requireActual('@backstage/core-plugin-api'),
+  useApi: jest.fn().mockReturnValue({
+    getImportAction: jest.fn(),
+  }),
+}));
+
 jest.mock('react-use', () => ({
   ...jest.requireActual('react-use'),
   useAsync: jest.fn().mockReturnValue({ loading: false }),
 }));
 
-jest.mock('@backstage/core-plugin-api', () => ({
-  ...jest.requireActual('@backstage/core-plugin-api'),
-  useApi: jest.fn(),
-}));
-
 jest.mock('../../hooks', () => ({
   useRepositories: jest.fn(),
 }));
 
+class MockBulkImportApi {
+  async getImportAction(
+    repo: string,
+    _defaultBranch: string,
+  ): Promise<ImportJobStatus | Response> {
+    return mockGetImportJobs.find(
+      i => i.repository.url === repo,
+    ) as ImportJobStatus;
+  }
+}
+
 const mockUseRepositories = useRepositories as jest.MockedFunction<
   typeof useRepositories
 >;
 
+const mockBulkImportApi = new MockBulkImportApi();
+
 describe('Add Repositories Table', () => {
   const mockIdentityApi = {
     getBackstageIdentity: jest.fn(),
@@ -107,7 +124,12 @@ describe('Add Repositories Table', () => {
       error: undefined,
     });
     const { getByText, getByTestId } = render(
-      <TestApiProvider apis={[[identityApiRef, mockIdentityApi]]}>
+      <TestApiProvider
+        apis={[
+          [identityApiRef, mockIdentityApi],
+          [bulkImportApiRef, mockBulkImportApi],
+        ]}
+      >
         <BrowserRouter>
           <AddRepositoriesTable title="Selected repositories" />
         </BrowserRouter>
@@ -139,7 +161,12 @@ describe('Add Repositories Table', () => {
       error: undefined,
     });
     const { getByText, getByTestId } = render(
-      <TestApiProvider apis={[[identityApiRef, mockIdentityApi]]}>
+      <TestApiProvider
+        apis={[
+          [identityApiRef, mockIdentityApi],
+          [bulkImportApiRef, mockBulkImportApi],
+        ]}
+      >
         <BrowserRouter>
           <AddRepositoriesTable title="Selected repositories" />
         </BrowserRouter>
diff --git a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTable.tsx b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTable.tsx
index cdb5510056a..22e007f66b0 100644
--- a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTable.tsx
+++ b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTable.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
+import { Box, Paper } from '@material-ui/core';
 import { useFormikContext } from 'formik';
 
 import { AddRepositoriesFormValues, RepositorySelection } from '../../types';
@@ -15,7 +14,7 @@ export const AddRepositoriesTable = ({ title }: { title: string }) => {
 
   return (
     <Box sx={{ width: '100%' }}>
-      <Paper sx={{ width: '100%', mb: 7 }}>
+      <Paper style={{ width: '100%' }}>
         <AddRepositoriesTableToolbar
           title={title}
           setSearchString={setSearchString}
diff --git a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTableToolbar.tsx b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTableToolbar.tsx
index f91adcd1325..52e37021ba6 100644
--- a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTableToolbar.tsx
+++ b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTableToolbar.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
 
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
-import Toolbar from '@mui/material/Toolbar';
+import { makeStyles, Toolbar } from '@material-ui/core';
+import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
 import Typography from '@mui/material/Typography';
 import { useFormikContext } from 'formik';
 
@@ -13,6 +12,13 @@ import {
 } from '../../types';
 import { RepositoriesSearchBar } from './AddRepositoriesSearchBar';
 
+const useStyles = makeStyles(() => ({
+  toolbar: {
+    paddingTop: '14px',
+    paddingBottom: '14px',
+  },
+}));
+
 export const AddRepositoriesTableToolbar = ({
   title,
   setSearchString,
@@ -32,6 +38,7 @@ export const AddRepositoriesTableToolbar = ({
     RepositorySelection.Repository,
   );
   const [search, setSearch] = React.useState<string>('');
+  const classes = useStyles();
   const [selectedReposNumber, setSelectedReposNumber] = React.useState(0);
   const handleToggle = (
     _event: React.MouseEvent<HTMLElement>,
@@ -63,14 +70,7 @@ export const AddRepositoriesTableToolbar = ({
   }, [selectedReposFromDrawer, values.repositories, activeOrganization]);
 
   return (
-    <Toolbar
-      sx={{
-        pl: { sm: 2 },
-        pr: { xs: 1, sm: 1, lg: 3, md: 3 },
-        pt: '14px',
-        pb: '14px',
-      }}
-    >
+    <Toolbar className={classes.toolbar}>
       <Typography sx={{ flex: '1 1 100%' }} variant="h5" id={title}>
         {`${title} (${selectedReposNumber})`}
       </Typography>
diff --git a/plugins/bulk-import/src/components/AddRepositories/CatalogInfoStatus.tsx b/plugins/bulk-import/src/components/AddRepositories/CatalogInfoStatus.tsx
index 337f209d1e7..7c88a080459 100644
--- a/plugins/bulk-import/src/components/AddRepositories/CatalogInfoStatus.tsx
+++ b/plugins/bulk-import/src/components/AddRepositories/CatalogInfoStatus.tsx
@@ -58,7 +58,7 @@ export const CatalogInfoStatus = ({
     (isSelected ||
       (data?.totalReposInOrg && data.totalReposInOrg > 0 && allSelected))
   ) {
-    return <PreviewFile data={data} repositoryType={values.repositoryType} />;
+    return <PreviewFile data={data} />;
   }
 
   if (!isDrawer && isLoading) {
@@ -73,12 +73,7 @@ export const CatalogInfoStatus = ({
     );
   }
 
-  if (
-    (!isDrawer && importStatus) ||
-    (isDrawer &&
-      importStatus &&
-      importStatus !== RepositoryStatus.WAIT_PR_APPROVAL)
-  ) {
+  if (importStatus) {
     return (
       <span style={{ color: '#6A6E73' }}>{getImportStatus(importStatus)}</span>
     );
diff --git a/plugins/bulk-import/src/components/AddRepositories/Illustrations.tsx b/plugins/bulk-import/src/components/AddRepositories/Illustrations.tsx
index adc4a7da7ec..294417da038 100644
--- a/plugins/bulk-import/src/components/AddRepositories/Illustrations.tsx
+++ b/plugins/bulk-import/src/components/AddRepositories/Illustrations.tsx
@@ -7,6 +7,7 @@ import { getImageForIconClass } from '../../utils/icons';
 const useStyles = makeStyles(() => ({
   text: {
     maxWidth: '150px',
+    textAlign: 'center',
   },
 }));
 
diff --git a/plugins/bulk-import/src/components/AddRepositories/RepositoriesHeader.tsx b/plugins/bulk-import/src/components/AddRepositories/RepositoriesHeader.tsx
index bb6d44949ab..72d4dfc489c 100644
--- a/plugins/bulk-import/src/components/AddRepositories/RepositoriesHeader.tsx
+++ b/plugins/bulk-import/src/components/AddRepositories/RepositoriesHeader.tsx
@@ -1,10 +1,12 @@
 import * as React from 'react';
 
-import Checkbox from '@mui/material/Checkbox';
-import TableCell from '@mui/material/TableCell';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import TableSortLabel from '@mui/material/TableSortLabel';
+import {
+  Checkbox,
+  TableCell,
+  TableHead,
+  TableRow,
+  TableSortLabel,
+} from '@material-ui/core';
 
 import { Order } from '../../types';
 import { OrganizationsColumnHeader } from './OrganizationsColumnHeader';
@@ -47,13 +49,6 @@ export const RepositoriesHeader = ({
     return RepositoriesColumnHeader;
   };
 
-  const tableCellStyle = {
-    lineHeight: '1.5rem',
-    fontSize: '0.875rem',
-    padding: showOrganizations ? '15px 16px 15px 24px' : '15px 16px 15px 6px',
-    fontWeight: '700',
-  };
-
   return (
     <TableHead>
       <TableRow>
@@ -62,7 +57,14 @@ export const RepositoriesHeader = ({
             key={headCell.id as string}
             align="left"
             padding="normal"
-            sx={tableCellStyle}
+            style={{
+              lineHeight: '1.5rem',
+              fontSize: '0.875rem',
+              padding: showOrganizations
+                ? '15px 16px 15px 24px'
+                : '15px 16px 15px 6px',
+              fontWeight: '700',
+            }}
             sortDirection={orderBy === headCell.field ? order : 'asc'}
           >
             {index === 0 && !showOrganizations && (
diff --git a/plugins/bulk-import/src/components/AddRepositories/RepositoriesTable.tsx b/plugins/bulk-import/src/components/AddRepositories/RepositoriesTable.tsx
index e2179360564..96c2668acb0 100644
--- a/plugins/bulk-import/src/components/AddRepositories/RepositoriesTable.tsx
+++ b/plugins/bulk-import/src/components/AddRepositories/RepositoriesTable.tsx
@@ -2,9 +2,7 @@ import * as React from 'react';
 
 import { WarningPanel } from '@backstage/core-components';
 
-import Table from '@mui/material/Table';
-import TableContainer from '@mui/material/TableContainer';
-import TablePagination from '@mui/material/TablePagination';
+import { Table, TableContainer, TablePagination } from '@material-ui/core';
 import { useFormikContext } from 'formik';
 
 import { useRepositories } from '../../hooks';
@@ -55,7 +53,7 @@ export const RepositoriesTable = ({
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const [activeOrganization, setActiveOrganization] =
     React.useState<AddRepositoryData | null>();
-  const [localPage, setLocalPage] = React.useState(page || 0);
+  const [localPage, setLocalPage] = React.useState(0);
   const [drawerPage, setDrawerPage] = React.useState(0);
 
   const { loading, data, error } = useRepositories({
@@ -75,10 +73,10 @@ export const RepositoriesTable = ({
   React.useEffect(() => {
     if (drawerOrganization) {
       setDrawerPage(0);
-    } else if (setPage) {
-      setPage(localPage);
+    } else {
+      setLocalPage(page || 0);
     }
-  }, [drawerOrganization, localPage, setPage]);
+  }, [drawerOrganization, localPage, page]);
 
   React.useEffect(() => {
     if (drawerOrganization) {
@@ -361,7 +359,7 @@ export const RepositoriesTable = ({
 
   return (
     <>
-      <TableContainer sx={{ padding: '0 24px' }}>
+      <TableContainer style={{ padding: '0 24px' }}>
         {error && Object.keys(error).length > 0 ? (
           <div style={{ paddingBottom: '16px' }}>
             <WarningPanel
@@ -376,7 +374,11 @@ export const RepositoriesTable = ({
             />
           </div>
         ) : (
-          <Table sx={{ minWidth: 750 }} size="small" data-testid={ariaLabel()}>
+          <Table
+            style={{ minWidth: 750 }}
+            size="small"
+            data-testid={ariaLabel()}
+          >
             <RepositoriesHeader
               numSelected={
                 drawerOrganization
diff --git a/plugins/bulk-import/src/components/AddRepositories/RepositoriesTableBody.tsx b/plugins/bulk-import/src/components/AddRepositories/RepositoriesTableBody.tsx
index 326d7d3be1a..a46729543ea 100644
--- a/plugins/bulk-import/src/components/AddRepositories/RepositoriesTableBody.tsx
+++ b/plugins/bulk-import/src/components/AddRepositories/RepositoriesTableBody.tsx
@@ -1,10 +1,7 @@
 import * as React from 'react';
 
-import { makeStyles } from '@material-ui/core';
+import { makeStyles, TableBody, TableCell, TableRow } from '@material-ui/core';
 import CircularProgress from '@mui/material/CircularProgress';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableRow from '@mui/material/TableRow';
 
 import { AddedRepositories, AddRepositoryData } from '../../types';
 import { OrganizationTableRow } from './OrganizationTableRow';
diff --git a/plugins/bulk-import/src/components/AddRepositories/RepositoryTableRow.tsx b/plugins/bulk-import/src/components/AddRepositories/RepositoryTableRow.tsx
index bc89d3becda..ffe6d5e5aa9 100644
--- a/plugins/bulk-import/src/components/AddRepositories/RepositoryTableRow.tsx
+++ b/plugins/bulk-import/src/components/AddRepositories/RepositoryTableRow.tsx
@@ -4,16 +4,22 @@ import { useAsync } from 'react-use';
 import { Link } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 
+import { Checkbox, makeStyles, TableCell, TableRow } from '@material-ui/core';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-import Checkbox from '@mui/material/Checkbox';
-import TableCell from '@mui/material/TableCell';
-import TableRow from '@mui/material/TableRow';
 
 import { bulkImportApiRef } from '../../api/BulkImportBackendClient';
 import { AddRepositoryData, RepositoryStatus } from '../../types';
 import { urlHelper } from '../../utils/repository-utils';
 import { CatalogInfoStatus } from './CatalogInfoStatus';
 
+const useStyles = makeStyles(() => ({
+  tableCellStyle: {
+    lineHeight: '1.5rem',
+    fontSize: '0.875rem',
+    padding: '15px 16px 15px 6px',
+  },
+}));
+
 export const RepositoryTableRow = ({
   handleClick,
   isItemSelected,
@@ -25,11 +31,7 @@ export const RepositoryTableRow = ({
   data: AddRepositoryData;
   isDrawer?: boolean;
 }) => {
-  const tableCellStyle = {
-    lineHeight: '1.5rem',
-    fontSize: '0.875rem',
-    padding: '15px 16px 15px 6px',
-  };
+  const classes = useStyles();
   const bulkImportApi = useApi(bulkImportApiRef);
   const { value, loading } = useAsync(async () => {
     const result = await bulkImportApi.getImportAction(
@@ -47,7 +49,12 @@ export const RepositoryTableRow = ({
       key={data.id}
       selected={isItemSelected}
     >
-      <TableCell component="th" scope="row" padding="none" sx={tableCellStyle}>
+      <TableCell
+        component="th"
+        scope="row"
+        padding="none"
+        className={classes.tableCellStyle}
+      >
         <Checkbox
           disableRipple
           color="primary"
@@ -60,7 +67,7 @@ export const RepositoryTableRow = ({
         />
         {data.repoName}
       </TableCell>
-      <TableCell align="left" sx={tableCellStyle}>
+      <TableCell align="left" className={classes.tableCellStyle}>
         <Link to={data.repoUrl || ''}>
           <>
             {urlHelper(data?.repoUrl || '')}
@@ -71,7 +78,7 @@ export const RepositoryTableRow = ({
         </Link>
       </TableCell>
       {!isDrawer && (
-        <TableCell align="left" sx={tableCellStyle}>
+        <TableCell align="left" className={classes.tableCellStyle}>
           <Link to={data?.organizationUrl || ''}>
             <>
               {urlHelper(data?.organizationUrl || '')}
@@ -83,7 +90,7 @@ export const RepositoryTableRow = ({
         </TableCell>
       )}
 
-      <TableCell align="left" sx={tableCellStyle}>
+      <TableCell align="left" className={classes.tableCellStyle}>
         <CatalogInfoStatus
           data={data}
           importStatus={value?.status as string}
diff --git a/plugins/bulk-import/src/components/BulkImportPage.test.tsx b/plugins/bulk-import/src/components/BulkImportPage.test.tsx
index b153979ed6a..675a2865b2d 100644
--- a/plugins/bulk-import/src/components/BulkImportPage.test.tsx
+++ b/plugins/bulk-import/src/components/BulkImportPage.test.tsx
@@ -51,7 +51,11 @@ describe('BulkImport Page', () => {
     mockUsePermission.mockReturnValue({ loading: false, allowed: false });
 
     await renderInTestApp(<BulkImportPage />);
-    expect(screen.getByText('Not Found')).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'To view the added repositories, contact your administrator to give you the `bulk.import` permission.',
+      ),
+    ).toBeInTheDocument();
     expect(screen.queryByText('Added repositories')).not.toBeInTheDocument();
   });
 });
diff --git a/plugins/bulk-import/src/components/BulkImportPage.tsx b/plugins/bulk-import/src/components/BulkImportPage.tsx
index 21acd6c0c4f..d7e2f3e9919 100644
--- a/plugins/bulk-import/src/components/BulkImportPage.tsx
+++ b/plugins/bulk-import/src/components/BulkImportPage.tsx
@@ -1,19 +1,23 @@
 import React from 'react';
 
-import { Header, Page, TabbedLayout } from '@backstage/core-components';
-import { RequirePermission } from '@backstage/plugin-permission-react';
+import { Content, Header, Page } from '@backstage/core-components';
+import { usePermission } from '@backstage/plugin-permission-react';
 
+import { Alert, AlertTitle } from '@material-ui/lab';
 import FormControl from '@mui/material/FormControl';
 import { Formik } from 'formik';
 
 import { bulkImportPermission } from '@janus-idp/backstage-plugin-bulk-import-common';
+import {
+  DeleteDialogContextProvider,
+  DrawerContextProvider,
+} from '@janus-idp/shared-react';
 
 import {
   AddRepositoriesFormValues,
   ApprovalTool,
   RepositorySelection,
 } from '../types';
-import { DeleteDialogContextProvider } from './DeleteDialogContext';
 import { RepositoriesList } from './Repositories/RepositoriesList';
 
 export const BulkImportPage = () => {
@@ -24,29 +28,39 @@ export const BulkImportPage = () => {
     approvalTool: ApprovalTool.Git,
   };
 
+  const bulkImportViewPermissionResult = usePermission({
+    permission: bulkImportPermission,
+    resourceRef: bulkImportPermission.resourceType,
+  });
+
   return (
-    <RequirePermission
-      permission={bulkImportPermission}
-      resourceRef={bulkImportPermission.resourceType}
-    >
-      <Page themeId="tool">
-        <Header title="Bulk import" />
+    <Page themeId="tool">
+      <Header title="Bulk import" />
+      <DrawerContextProvider>
         <DeleteDialogContextProvider>
-          <TabbedLayout>
-            <TabbedLayout.Route path="/" title="Repositories">
-              <Formik
-                initialValues={initialValues}
-                enableReinitialize
-                onSubmit={async (_values: AddRepositoriesFormValues) => {}}
-              >
-                <FormControl fullWidth>
-                  <RepositoriesList />
-                </FormControl>
-              </Formik>
-            </TabbedLayout.Route>
-          </TabbedLayout>
+          <Content noPadding>
+            <div style={{ padding: '24px' }}>
+              {bulkImportViewPermissionResult.allowed ? (
+                <Formik
+                  initialValues={initialValues}
+                  enableReinitialize
+                  onSubmit={async (_values: AddRepositoriesFormValues) => {}}
+                >
+                  <FormControl fullWidth>
+                    <RepositoriesList />
+                  </FormControl>
+                </Formik>
+              ) : (
+                <Alert severity="warning" data-testid="no-permission-alert">
+                  <AlertTitle>Permission required</AlertTitle>
+                  To view the added repositories, contact your administrator to
+                  give you the `bulk.import` permission.
+                </Alert>
+              )}
+            </div>
+          </Content>
         </DeleteDialogContextProvider>
-      </Page>
-    </RequirePermission>
+      </DrawerContextProvider>
+    </Page>
   );
 };
diff --git a/plugins/bulk-import/src/components/PreviewFile/PreviewFile.test.tsx b/plugins/bulk-import/src/components/PreviewFile/PreviewFile.test.tsx
index 9aa8e06b4c7..b236ac89d98 100644
--- a/plugins/bulk-import/src/components/PreviewFile/PreviewFile.test.tsx
+++ b/plugins/bulk-import/src/components/PreviewFile/PreviewFile.test.tsx
@@ -1,14 +1,20 @@
 import React, { useState } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 
+import { TestApiProvider } from '@backstage/test-utils';
+
 import { fireEvent, render } from '@testing-library/react';
 import { useFormikContext } from 'formik';
 
+import { useDrawer } from '@janus-idp/shared-react';
+
+import { bulkImportApiRef } from '../../api/BulkImportBackendClient';
 import {
+  mockGetImportJobs,
   mockGetOrganizations,
   mockGetRepositories,
 } from '../../mocks/mockData';
-import { RepositorySelection } from '../../types';
+import { ImportJobStatus, RepositorySelection } from '../../types';
 import { PreviewFile } from './PreviewFile';
 
 jest.mock('react', () => ({
@@ -16,6 +22,11 @@ jest.mock('react', () => ({
   useState: jest.fn(),
 }));
 
+jest.mock('@janus-idp/shared-react', () => ({
+  ...jest.requireActual('@janus-idp/shared-react'),
+  useDrawer: jest.fn(),
+}));
+
 jest.mock('@material-ui/core', () => ({
   ...jest.requireActual('@material-ui/core'),
   makeStyles: () => () => {
@@ -29,45 +40,66 @@ jest.mock('@material-ui/core', () => ({
   },
 }));
 
+class MockBulkImportApi {
+  async getImportAction(
+    repo: string,
+    _defaultBranch: string,
+  ): Promise<ImportJobStatus | Response> {
+    return mockGetImportJobs.find(
+      i => i.repository.url === repo,
+    ) as ImportJobStatus;
+  }
+}
+
 jest.mock('formik', () => ({
   ...jest.requireActual('formik'),
   useFormikContext: jest.fn(),
 }));
 const setState = jest.fn();
+const setOpenDrawer = jest.fn();
+const setDrawerData = jest.fn();
 
 beforeEach(() => {
   (useState as jest.Mock).mockImplementation(initial => [initial, setState]);
+  (useDrawer as jest.Mock).mockImplementation(initial => ({
+    initial,
+    setOpenDrawer,
+    setDrawerData,
+  }));
 });
 
+const mockBulkImportApi = new MockBulkImportApi();
+
 describe('Preview File', () => {
   it('should render pull request preview for the selected repository', async () => {
     (useFormikContext as jest.Mock).mockReturnValue({
       errors: {},
       values: {
+        repositoryType: RepositorySelection.Repository,
         repositories: {
           'org/dessert/Cupcake': mockGetRepositories.repositories[0],
         },
       },
     });
     const { queryByTestId, getByText } = render(
-      <BrowserRouter>
-        <PreviewFile
-          data={mockGetRepositories.repositories[0]}
-          repositoryType={RepositorySelection.Repository}
-        />
-      </BrowserRouter>,
+      <TestApiProvider apis={[[bulkImportApiRef, mockBulkImportApi]]}>
+        <BrowserRouter>
+          <PreviewFile data={mockGetRepositories.repositories[0]} />
+        </BrowserRouter>
+      </TestApiProvider>,
     );
     expect(getByText(/Preview File/i)).toBeInTheDocument();
     expect(queryByTestId('preview-file')).toBeInTheDocument();
     const previewButton = getByText(/Preview File/i);
     fireEvent.click(previewButton);
-    expect(setState).toHaveBeenCalledWith(true);
+    expect(setOpenDrawer).toHaveBeenCalledWith(true);
   });
 
   it('should render pull requests preview for the selected repositories in the organization view', async () => {
     (useFormikContext as jest.Mock).mockReturnValue({
       errors: {},
       values: {
+        repositoryType: RepositorySelection.Organization,
         repositories: {
           'org/dessert/Cupcake': mockGetRepositories.repositories[0],
           'org/dessert/Donut': mockGetRepositories.repositories[1],
@@ -75,30 +107,32 @@ describe('Preview File', () => {
       },
     });
     const { queryByTestId, getByText } = render(
-      <BrowserRouter>
-        <PreviewFile
-          data={{
-            ...mockGetOrganizations.organizations[0],
-            selectedRepositories: {
-              'org/dessert/cupcake': mockGetRepositories.repositories[0],
-              'org/dessert/donut': mockGetRepositories.repositories[1],
-            },
-          }}
-          repositoryType={RepositorySelection.Organization}
-        />
-      </BrowserRouter>,
+      <TestApiProvider apis={[[bulkImportApiRef, mockBulkImportApi]]}>
+        <BrowserRouter>
+          <PreviewFile
+            data={{
+              ...mockGetOrganizations.organizations[0],
+              selectedRepositories: {
+                'org/dessert/cupcake': mockGetRepositories.repositories[0],
+                'org/dessert/donut': mockGetRepositories.repositories[1],
+              },
+            }}
+          />
+        </BrowserRouter>
+      </TestApiProvider>,
     );
     expect(getByText(/Preview files/i)).toBeInTheDocument();
     expect(queryByTestId('preview-files')).toBeInTheDocument();
     const previewButton = getByText(/Preview files/i);
     fireEvent.click(previewButton);
-    expect(setState).toHaveBeenCalledWith(true);
+    expect(setOpenDrawer).toHaveBeenCalledWith(true);
   });
 
   it('should show the status of the catalog-info', async () => {
     (useFormikContext as jest.Mock).mockReturnValue({
       errors: {},
       values: {
+        repositoryType: RepositorySelection.Organization,
         repositories: {
           'org/dessert/cupcake': mockGetRepositories.repositories[0],
           'org/dessert/donut': mockGetRepositories.repositories[1],
@@ -119,23 +153,24 @@ describe('Preview File', () => {
       },
     });
     const { queryByTestId, getByText } = render(
-      <BrowserRouter>
-        <PreviewFile
-          data={{
-            ...mockGetOrganizations.organizations[0],
-            selectedRepositories: {
-              'org/dessert/cupcake': mockGetRepositories.repositories[0],
-              'org/dessert/donut': mockGetRepositories.repositories[1],
-            },
-          }}
-          repositoryType={RepositorySelection.Organization}
-        />
-      </BrowserRouter>,
+      <TestApiProvider apis={[[bulkImportApiRef, mockBulkImportApi]]}>
+        <BrowserRouter>
+          <PreviewFile
+            data={{
+              ...mockGetOrganizations.organizations[0],
+              selectedRepositories: {
+                'org/dessert/cupcake': mockGetRepositories.repositories[0],
+                'org/dessert/donut': mockGetRepositories.repositories[1],
+              },
+            }}
+          />
+        </BrowserRouter>
+      </TestApiProvider>,
     );
     expect(getByText(/Failed to create PR/i)).toBeInTheDocument();
     expect(queryByTestId('failed')).toBeInTheDocument();
     const editButton = getByText(/Edit/i);
     fireEvent.click(editButton);
-    expect(setState).toHaveBeenCalledWith(true);
+    expect(setOpenDrawer).toHaveBeenCalledWith(true);
   });
 });
diff --git a/plugins/bulk-import/src/components/PreviewFile/PreviewFile.tsx b/plugins/bulk-import/src/components/PreviewFile/PreviewFile.tsx
index 6399f112f3e..b3348675f69 100644
--- a/plugins/bulk-import/src/components/PreviewFile/PreviewFile.tsx
+++ b/plugins/bulk-import/src/components/PreviewFile/PreviewFile.tsx
@@ -1,42 +1,52 @@
 import * as React from 'react';
 
 import { Link } from '@backstage/core-components';
+import { useApi } from '@backstage/core-plugin-api';
 
-import { makeStyles } from '@material-ui/core';
+import { Button, Drawer, makeStyles } from '@material-ui/core';
+import { Skeleton } from '@material-ui/lab';
 import ReadyIcon from '@mui/icons-material/CheckOutlined';
 import CloseIcon from '@mui/icons-material/Close';
 import FailIcon from '@mui/icons-material/ErrorOutline';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
-import Drawer from '@mui/material/Drawer';
 import IconButton from '@mui/material/IconButton';
+import Stack from '@mui/material/Stack';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { useFormikContext } from 'formik';
 
+import { useDrawer } from '@janus-idp/shared-react';
+
+import { bulkImportApiRef } from '../../api/BulkImportBackendClient';
 import {
   AddRepositoriesFormValues,
   AddRepositoryData,
   ErrorType,
+  ImportJobStatus,
+  PullRequestPreview,
   PullRequestPreviewData,
   RepositorySelection,
   RepositoryStatus,
   RepositoryType,
 } from '../../types';
 import {
+  evaluatePRTemplate,
   getCustomisedErrorMessage,
   urlHelper,
 } from '../../utils/repository-utils';
 import { PreviewPullRequest } from './PreviewPullRequest';
 import { PreviewPullRequests } from './PreviewPullRequests';
 
-const useDrawerStyles = makeStyles(() => ({
+const useDrawerStyles = makeStyles(theme => ({
   paper: {
     width: '40%',
     gap: '3%',
   },
+  body: {
+    padding: theme.spacing(2.5),
+  },
 }));
 
 const useDrawerContentStyles = makeStyles(theme => ({
@@ -80,8 +90,6 @@ export const PreviewFileSidebar = ({
   onClose,
   repositoryType,
   data,
-  formErrors,
-  setFormErrors,
   handleSave,
   isSubmitting,
 }: {
@@ -89,46 +97,104 @@ export const PreviewFileSidebar = ({
   data: AddRepositoryData;
   repositoryType: RepositoryType;
   onClose: () => void;
-  formErrors: PullRequestPreviewData;
   isSubmitting?: boolean;
-  setFormErrors: (formErr: PullRequestPreviewData) => void;
   handleSave: (pullRequest: PullRequestPreviewData, _event: any) => void;
 }) => {
   const classes = useDrawerStyles();
+  const bulkImportApi = useApi(bulkImportApiRef);
+  const [formErrors, setFormErrors] = React.useState<PullRequestPreviewData>();
+  const [isLoading, setIsLoading] = React.useState(true);
   const [pullRequest, setPullRequest] = React.useState<PullRequestPreviewData>(
     {},
   );
   const [isInitialized, setIsInitialized] = React.useState(false);
 
   const contentClasses = useDrawerContentStyles();
-  const initializePullRequest = React.useCallback(() => {
+  const initializePullRequest = React.useCallback(async () => {
     const newPullRequestData: PullRequestPreviewData = {};
 
     if (Object.keys(data?.selectedRepositories || [])?.length > 0) {
-      Object.values(data?.selectedRepositories || []).forEach(repo => {
-        if (repo.catalogInfoYaml?.prTemplate) {
-          newPullRequestData[repo.id] = repo.catalogInfoYaml.prTemplate;
+      setIsLoading(true);
+      Object.values(data?.selectedRepositories || []).forEach(async repo => {
+        const result = await bulkImportApi.getImportAction(
+          repo.repoUrl || '',
+          repo.defaultBranch || 'main',
+        );
+        if (
+          (result as ImportJobStatus)?.status ===
+          RepositoryStatus.WAIT_PR_APPROVAL
+        ) {
+          const prTemplate = evaluatePRTemplate(result as ImportJobStatus);
+          newPullRequestData[repo.id] = prTemplate;
+        } else {
+          newPullRequestData[repo.id] = repo.catalogInfoYaml
+            ?.prTemplate as PullRequestPreview;
         }
       });
-    } else if (data.catalogInfoYaml?.prTemplate) {
-      newPullRequestData[data.id] = data.catalogInfoYaml?.prTemplate;
+    } else {
+      setIsLoading(true);
+      const result = await bulkImportApi.getImportAction(
+        data.repoUrl || '',
+        data.defaultBranch || 'main',
+      );
+      if (
+        (result as ImportJobStatus)?.status ===
+        RepositoryStatus.WAIT_PR_APPROVAL
+      ) {
+        const prTemplate = evaluatePRTemplate(result as ImportJobStatus);
+        newPullRequestData[data.id] = prTemplate;
+      } else {
+        newPullRequestData[data.id] = data.catalogInfoYaml
+          ?.prTemplate as PullRequestPreview;
+      }
     }
 
     setPullRequest(newPullRequestData);
     setIsInitialized(true);
-  }, [data]);
+    setIsLoading(false);
+  }, [data, bulkImportApi]);
 
   React.useEffect(() => {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    if (!isInitialized) {
+    if (!isInitialized && data?.id) {
       initializePullRequest();
     }
-  }, [isInitialized, initializePullRequest]);
+  }, [isInitialized, data, initializePullRequest]);
 
   const handleCancel = (_event: any) => {
     initializePullRequest();
     onClose();
   };
+  if (isLoading) {
+    return (
+      <Box>
+        <Drawer
+          anchor="right"
+          open={open}
+          onClose={onClose}
+          data-testid="preview-pullrequest-sidebar-loading"
+          classes={{
+            paper: classes.paper,
+          }}
+        >
+          <Stack spacing={5} className={classes.body}>
+            <span style={{ display: 'flex' }}>
+              <Skeleton variant="rect" width="100%" height="100%" />
+              <IconButton
+                key="dismiss"
+                title="Close the drawer"
+                onClick={onClose}
+                color="inherit"
+              >
+                <CloseIcon fontSize="small" />
+              </IconButton>
+            </span>
+            <Skeleton variant="rect" width="100%" height={800} />
+            <Skeleton variant="rect" width="100%" height="20%" />
+          </Stack>
+        </Drawer>
+      </Box>
+    );
+  }
 
   return (
     <Drawer
@@ -183,9 +249,10 @@ export const PreviewFileSidebar = ({
             <PreviewPullRequest
               repoId={data.id}
               repoUrl={data.repoUrl || ''}
+              repoBranch={data.defaultBranch || 'main'}
               pullRequest={pullRequest}
               setPullRequest={setPullRequest}
-              formErrors={formErrors}
+              formErrors={formErrors as PullRequestPreviewData}
               setFormErrors={setFormErrors}
             />
           )}
@@ -195,7 +262,7 @@ export const PreviewFileSidebar = ({
                 Object.values(data?.selectedRepositories || []) || []
               }
               pullRequest={pullRequest}
-              formErrors={formErrors}
+              formErrors={formErrors as PullRequestPreviewData}
               setFormErrors={setFormErrors}
               setPullRequest={setPullRequest}
             />
@@ -205,6 +272,7 @@ export const PreviewFileSidebar = ({
       <div className={contentClasses.footer}>
         <Button
           variant="contained"
+          color="primary"
           onClick={e => handleSave(pullRequest, e)}
           className={contentClasses.createButton}
           disabled={
@@ -229,95 +297,85 @@ export const PreviewFileSidebar = ({
   );
 };
 
-export const PreviewFile = ({
-  data,
-  repositoryType,
-}: {
-  data: AddRepositoryData;
-  repositoryType: RepositoryType;
-}) => {
-  const [sidebarOpen, setSidebarOpen] = React.useState<boolean>(false);
-  const { setFieldValue, status } =
-    useFormikContext<AddRepositoriesFormValues>();
-  const [formErrors, setFormErrors] = React.useState<PullRequestPreviewData>();
-  const handleSave = (pullRequest: PullRequestPreviewData, _event: any) => {
-    Object.keys(pullRequest).forEach(pr => {
-      setFieldValue(
-        `repositories.${pr}.catalogInfoYaml.prTemplate`,
-        pullRequest[pr],
-      );
-    });
-    setSidebarOpen(false);
+export const PreviewFile = ({ data }: { data: AddRepositoryData }) => {
+  const { status, values } = useFormikContext<AddRepositoriesFormValues>();
+  const { setOpenDrawer, setDrawerData } = useDrawer();
+  const statusErrors = (status?.errors as ErrorType) || {};
+
+  const errorMessage = getCustomisedErrorMessage(
+    Object.values(statusErrors).find(s => s?.repository?.name === data.repoName)
+      ?.error.message,
+  );
+
+  const openDrawer = (dd: AddRepositoryData) => {
+    setDrawerData(dd);
+    setOpenDrawer(true);
   };
 
   return (
     <>
-      <span>
-        {Object.keys(status?.errors || {}).length > 0 &&
-        Object.values(status.errors as ErrorType).find(
-          s =>
-            s?.repository?.name === data.repoName ||
-            (repositoryType === RepositorySelection.Organization &&
-              s?.repository?.organization === data.orgName),
-        ) ? (
-          <>
-            <Tooltip
-              title={
-                repositoryType === RepositorySelection.Repository
-                  ? getCustomisedErrorMessage(
-                      Object.values(status.errors as ErrorType).find(
-                        s => s?.repository?.name === data.repoName,
-                      )?.error.message || null,
-                    )
-                  : 'PR creation was unsuccessful for some repositories. Click on `Edit` to see the reason.'
-              }
-            >
-              <FailIcon
-                color="error"
-                style={{ verticalAlign: 'sub', paddingTop: '7px' }}
-              />
-            </Tooltip>
-            <span data-testid="failed"> Failed to create PR </span>
-            <Link
-              to=""
-              onClick={() => setSidebarOpen(true)}
-              data-testid="edit-pull-request"
-            >
-              Edit
-            </Link>
-          </>
-        ) : (
-          <>
-            <ReadyIcon
-              color="success"
+      {Object.keys(statusErrors).length > 0 &&
+      Object.values(statusErrors).find(
+        s =>
+          s?.repository?.name === data.repoName ||
+          (values.repositoryType === RepositorySelection.Organization &&
+            s?.repository?.organization === data.orgName),
+      ) ? (
+        <>
+          <Tooltip
+            title={
+              values.repositoryType === RepositorySelection.Repository
+                ? errorMessage.message
+                : 'PR creation was unsuccessful for some repositories. Click on `Edit` to see the reason.'
+            }
+          >
+            <FailIcon
+              color="error"
               style={{ verticalAlign: 'sub', paddingTop: '7px' }}
             />
-            {RepositoryStatus.Ready}{' '}
-            <Link
-              to=""
-              onClick={() => setSidebarOpen(true)}
-              data-testid={
-                Object.keys(data?.selectedRepositories || []).length > 1
-                  ? 'preview-files'
-                  : 'preview-file'
-              }
-            >
-              {Object.keys(data?.selectedRepositories || []).length > 1
-                ? 'Preview files'
-                : 'Preview file'}
-            </Link>
-          </>
-        )}
-      </span>
-      <PreviewFileSidebar
-        open={sidebarOpen}
-        onClose={() => setSidebarOpen(false)}
-        data={data}
-        formErrors={formErrors as PullRequestPreviewData}
-        setFormErrors={setFormErrors}
-        repositoryType={repositoryType}
-        handleSave={handleSave}
-      />
+          </Tooltip>
+          <span data-testid="failed"> Failed to create PR </span>
+          <Link
+            to={errorMessage.showRepositoryLink ? data.repoUrl || '' : ''}
+            onClick={() =>
+              errorMessage.showRepositoryLink ? null : setOpenDrawer(true)
+            }
+            data-testid="edit-pull-request"
+          >
+            {errorMessage.showRepositoryLink ? (
+              <>
+                View repository{' '}
+                <OpenInNewIcon
+                  style={{ verticalAlign: 'sub', paddingTop: '7px' }}
+                />{' '}
+              </>
+            ) : (
+              'Edit'
+            )}
+          </Link>
+        </>
+      ) : (
+        <>
+          <ReadyIcon
+            color="success"
+            style={{ verticalAlign: 'sub', paddingTop: '7px' }}
+          />
+          {RepositoryStatus.Ready}{' '}
+          <Link
+            to=""
+            onClick={() => openDrawer(data)}
+            data-testid={
+              Object.keys(data?.selectedRepositories || []).length > 1
+                ? 'preview-files'
+                : 'preview-file'
+            }
+          >
+            {Object.keys(data?.selectedRepositories || []).length > 1
+              ? 'Preview files'
+              : 'Preview file'}
+          </Link>
+        </>
+      )}
     </>
   );
 };
diff --git a/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequest.test.tsx b/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequest.test.tsx
index 1018be5d442..6ecf2538fe7 100644
--- a/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequest.test.tsx
+++ b/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequest.test.tsx
@@ -7,9 +7,10 @@ import { MockConfigApi, TestApiProvider } from '@backstage/test-utils';
 import { fireEvent, render } from '@testing-library/react';
 import { useFormikContext } from 'formik';
 
-import { mockGetRepositories } from '../../mocks/mockData';
+import { bulkImportApiRef } from '../../api/BulkImportBackendClient';
+import { mockGetImportJobs, mockGetRepositories } from '../../mocks/mockData';
 import { mockEntities } from '../../mocks/mockEntities';
-import { ApprovalTool, RepositoryStatus } from '../../types';
+import { ApprovalTool, ImportJobStatus, RepositoryStatus } from '../../types';
 import { getPRTemplate } from '../../utils/repository-utils';
 import { PreviewPullRequest } from './PreviewPullRequest';
 
@@ -38,12 +39,25 @@ jest.mock('react-use', () => ({
   useAsync: jest.fn().mockReturnValue({ loading: false }),
 }));
 
-const seState = jest.fn();
+class MockBulkImportApi {
+  async getImportAction(
+    repo: string,
+    _defaultBranch: string,
+  ): Promise<ImportJobStatus | Response> {
+    return mockGetImportJobs.find(
+      i => i.repository.url === repo,
+    ) as ImportJobStatus;
+  }
+}
+
+const setState = jest.fn();
 
 beforeEach(() => {
-  (useState as jest.Mock).mockImplementation(initial => [initial, seState]);
+  (useState as jest.Mock).mockImplementation(initial => [initial, setState]);
 });
 
+const mockBulkImportApi = new MockBulkImportApi();
+
 const mockCatalogApi: Partial<CatalogApi> = {
   getEntities: jest.fn().mockReturnValue(mockEntities),
 };
@@ -74,16 +88,20 @@ describe('Preview Pull Request', () => {
             }),
           ],
           [catalogApiRef, mockCatalogApi],
+          [bulkImportApiRef, mockBulkImportApi],
         ]}
       >
         <PreviewPullRequest
           repoId="org/dessert/cupcake"
           repoUrl="https://github.com/org/dessert/cupcake"
+          repoBranch="main"
           pullRequest={{
             'org/dessert/cupcake': getPRTemplate(
               'org/dessert/cupcake',
               'org/dessert',
               'user:default/guest',
+              'https://localhost:3001',
+              'https://github.com/org/dessert/cupcake',
             ),
           }}
           setFormErrors={() => jest.fn()}
@@ -125,16 +143,20 @@ describe('Preview Pull Request', () => {
             }),
           ],
           [catalogApiRef, mockCatalogApi],
+          [bulkImportApiRef, mockBulkImportApi],
         ]}
       >
         <PreviewPullRequest
           repoId="org/dessert/cupcake"
           repoUrl="https://github.com/org/dessert/cupcake"
+          repoBranch="main"
           pullRequest={{
             cupcake: getPRTemplate(
               'org/dessert/cupcake',
               'org/dessert',
               'user:default/guest',
+              'https://localhost:3001',
+              'https://github.com/org/dessert/cupcake',
             ),
           }}
           setFormErrors={() => jest.fn()}
@@ -176,16 +198,20 @@ describe('Preview Pull Request', () => {
             }),
           ],
           [catalogApiRef, mockCatalogApi],
+          [bulkImportApiRef, mockBulkImportApi],
         ]}
       >
         <PreviewPullRequest
           repoId="org/dessert/cupcake"
           repoUrl="https://github.com/org/dessert/cupcake"
+          repoBranch="main"
           pullRequest={{
             'org/dessert/cupcake': getPRTemplate(
               'org/dessert/cupcake',
               'org/dessert',
               'user:default/guest',
+              'https://localhost:3001',
+              'https://github.com/org/dessert/cupcake',
             ),
           }}
           setFormErrors={setFormErrors}
@@ -252,16 +278,20 @@ describe('Preview Pull Request', () => {
             }),
           ],
           [catalogApiRef, mockCatalogApi],
+          [bulkImportApiRef, mockBulkImportApi],
         ]}
       >
         <PreviewPullRequest
           repoId="org/dessert/cupcake"
           repoUrl="https://github.com/org/dessert/cupcake"
+          repoBranch="main"
           pullRequest={{
             'org/dessert/cupcake': getPRTemplate(
               'org/dessert/cupcake',
               'org/dessert',
               'user:default/guest',
+              'https://localhost:3001',
+              'https://github.com/org/dessert/cupcake',
             ),
           }}
           setFormErrors={() => jest.fn()}
@@ -317,16 +347,20 @@ describe('Preview Pull Request', () => {
             }),
           ],
           [catalogApiRef, mockCatalogApi],
+          [bulkImportApiRef, mockBulkImportApi],
         ]}
       >
         <PreviewPullRequest
           repoId="org/dessert/cupcake"
           repoUrl="https://github.com/org/dessert/cupcake"
+          repoBranch="main"
           pullRequest={{
             'org/dessert/cupcake': getPRTemplate(
               'org/dessert/cupcake',
               'org/dessert',
               'user:default/guest',
+              'https://localhost:3001',
+              'https://github.com/org/dessert/cupcake',
             ),
           }}
           setFormErrors={() => jest.fn()}
diff --git a/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequest.tsx b/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequest.tsx
index 4a160ffe9ab..98bedfee1cb 100644
--- a/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequest.tsx
+++ b/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequest.tsx
@@ -1,56 +1,26 @@
 import * as React from 'react';
 import { useAsync } from 'react-use';
 
-import { Entity, EntityMeta } from '@backstage/catalog-model';
-import { WarningPanel } from '@backstage/core-components';
+import { Link, WarningPanel } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
-import {
-  PreviewCatalogInfoComponent,
-  PreviewPullRequestComponent,
-} from '@backstage/plugin-catalog-import';
-import {
-  catalogApiRef,
-  humanizeEntityRef,
-} from '@backstage/plugin-catalog-react';
 
-import { makeStyles } from '@material-ui/core';
-import TextField from '@material-ui/core/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import Box from '@mui/material/Box';
-import Checkbox from '@mui/material/Checkbox';
-import CircularProgress from '@mui/material/CircularProgress';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormHelperText from '@mui/material/FormHelperText';
-import Typography from '@mui/material/Typography';
 import { useFormikContext } from 'formik';
 
+import { bulkImportApiRef } from '../../api/BulkImportBackendClient';
 import {
   AddRepositoriesFormValues,
-  PullRequestPreview,
+  ImportJobStatus,
   PullRequestPreviewData,
 } from '../../types';
-import {
-  convertKeyValuePairsToString,
-  getCustomisedErrorMessage,
-  getYamlKeyValuePairs,
-} from '../../utils/repository-utils';
-import KeyValueTextField from './KeyValueTextField';
-
-const useDrawerContentStyles = makeStyles(theme => ({
-  previewCard: {
-    marginTop: theme.spacing(1),
-  },
-  previewCardContent: {
-    paddingTop: 0,
-  },
-}));
-
-const componentNameRegex =
-  /^([a-zA-Z0-9]+[-_.])*[a-zA-Z0-9]+$|^[a-zA-Z0-9]{1,63}$/;
+import { getCustomisedErrorMessage } from '../../utils/repository-utils';
+import { PreviewPullRequestForm } from './PreviewPullRequestForm';
 
 export const PreviewPullRequest = ({
   repoId,
   repoUrl,
+  repoBranch,
   pullRequest,
   setPullRequest,
   formErrors,
@@ -59,6 +29,7 @@ export const PreviewPullRequest = ({
 }: {
   repoId: string;
   repoUrl: string;
+  repoBranch: string;
   pullRequest: PullRequestPreviewData;
   formErrors: PullRequestPreviewData;
   others?: {
@@ -67,245 +38,17 @@ export const PreviewPullRequest = ({
   setPullRequest: (pullRequest: PullRequestPreviewData) => void;
   setFormErrors: (pullRequest: PullRequestPreviewData) => void;
 }) => {
-  const contentClasses = useDrawerContentStyles();
-  const { values, status } = useFormikContext<AddRepositoriesFormValues>();
-  const catalogApi = useApi(catalogApiRef);
-  const approvalTool =
-    values.approvalTool === 'git' ? 'Pull request' : 'ServiceNow ticket';
-
-  const [entityOwner, setEntityOwner] = React.useState<string>();
-  const { loading: entitiesLoading, value: entities } = useAsync(async () => {
-    const allEntities = await catalogApi.getEntities({
-      filter: {
-        kind: ['group', 'user'],
-      },
-    });
-
-    return allEntities.items
-      .map(e => humanizeEntityRef(e, { defaultNamespace: 'true' }))
-      .sort((a, b) => a.localeCompare(b));
+  const { status } = useFormikContext<AddRepositoriesFormValues>();
+  const bulkImportApi = useApi(bulkImportApiRef);
+  const { value: repoStatus } = useAsync(async () => {
+    const result = await bulkImportApi.getImportAction(
+      repoUrl || '',
+      repoBranch || 'main',
+    );
+    return result;
   });
-  React.useEffect(() => {
-    const newFormErrors = {
-      ...formErrors,
-      [repoId]: {
-        ...formErrors?.[repoId],
-        entityOwner: 'Entity owner is missing',
-      },
-    };
-
-    if (
-      !pullRequest[repoId]?.entityOwner &&
-      !pullRequest[repoId]?.useCodeOwnersFile
-    ) {
-      if (JSON.stringify(formErrors) !== JSON.stringify(newFormErrors)) {
-        setFormErrors(newFormErrors);
-      }
-    } else {
-      setEntityOwner(pullRequest[repoId]?.entityOwner);
-    }
-  }, [
-    entityOwner,
-    pullRequest,
-    setFormErrors,
-    setEntityOwner,
-    formErrors,
-    repoId,
-  ]);
-
-  const updatePullRequestKeyValuePairFields = (
-    field: string,
-    value: string,
-    yamlKey: string,
-  ) => {
-    const yamlUpdate: Entity = { ...pullRequest[repoId]?.yaml };
 
-    if (value.length === 0) {
-      if (yamlKey.includes('.')) {
-        // annotations or labels
-        const [key, subKey] = yamlKey.split('.');
-        if ((yamlUpdate[key as keyof Entity] as EntityMeta)?.[subKey]) {
-          delete (yamlUpdate[key as keyof Entity] as EntityMeta)[subKey];
-        }
-      } else {
-        // specs
-        delete yamlUpdate[yamlKey as keyof Entity];
-      }
-    } else if (yamlKey.includes('.')) {
-      const [key, subKey] = yamlKey.split('.');
-      (yamlUpdate[key as keyof Entity] as EntityMeta)[subKey] =
-        getYamlKeyValuePairs(value);
-    } else {
-      yamlUpdate.spec = getYamlKeyValuePairs(value);
-    }
-
-    setPullRequest({
-      ...pullRequest,
-      [repoId]: {
-        ...pullRequest[repoId],
-        [field]: value,
-        yaml: yamlUpdate,
-      },
-    });
-  };
-
-  const updateFieldAndErrors = (
-    field: string,
-    value: string,
-    errorMessage: string,
-  ) => {
-    setPullRequest({
-      ...pullRequest,
-      [repoId]: {
-        ...pullRequest[repoId],
-        [field]: value,
-        ...(field === 'componentName'
-          ? {
-              yaml: {
-                ...pullRequest[repoId]?.yaml,
-                metadata: {
-                  ...pullRequest[repoId]?.yaml.metadata,
-                  name: value,
-                },
-              },
-            }
-          : {}),
-      },
-    });
-
-    if (!value) {
-      setFormErrors({
-        ...formErrors,
-        [repoId]: {
-          ...formErrors?.[repoId],
-          [field]: errorMessage,
-        },
-      });
-    } else if (field === 'componentName' && !componentNameRegex.exec(value)) {
-      setFormErrors({
-        ...formErrors,
-        [repoId]: {
-          ...formErrors?.[repoId],
-          [field]: `"${value}" is not valid; expected a string that is sequences of [a-zA-Z0-9] separated by any of [-_.], at most 63 characters in total. To learn more about catalog file format, visit: https://github.com/backstage/backstage/blob/master/docs/architecture-decisions/adr002-default-catalog-file-format.md`,
-        },
-      });
-    } else {
-      const err = { ...formErrors };
-      delete err[repoId]?.[field as keyof PullRequestPreview];
-      setFormErrors(err);
-    }
-  };
-
-  const handleChange = (
-    event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,
-  ) => {
-    const targetName = event.target.name
-      .split('.')
-      .find(s =>
-        [
-          'prTitle',
-          'prDescription',
-          'componentName',
-          'prAnnotations',
-          'prLabels',
-          'prSpec',
-          'entityOwner',
-        ].includes(s),
-      );
-
-    if (!targetName) return;
-
-    const inputValue = event.target.value;
-    switch (targetName) {
-      case 'prTitle':
-        updateFieldAndErrors(
-          'prTitle',
-          inputValue,
-          `${approvalTool} title is missing`,
-        );
-        break;
-      case 'prDescription':
-        updateFieldAndErrors(
-          'prDescription',
-          inputValue,
-          `${approvalTool} description is missing`,
-        );
-        break;
-      case 'entityOwner':
-        setPullRequest({
-          ...pullRequest,
-          [repoId]: {
-            ...pullRequest[repoId],
-            entityOwner: inputValue,
-            yaml: {
-              ...pullRequest[repoId]?.yaml,
-              spec: {
-                ...pullRequest[repoId]?.yaml.spec,
-                ...(inputValue ? { owner: inputValue } : {}),
-              },
-            },
-          },
-        });
-        break;
-      case 'componentName':
-        updateFieldAndErrors(
-          'componentName',
-          inputValue,
-          'Component name is missing',
-        );
-
-        break;
-      case 'prAnnotations':
-        updatePullRequestKeyValuePairFields(
-          'prAnnotations',
-          inputValue,
-          'metadata.annotations',
-        );
-        break;
-      case 'prLabels':
-        updatePullRequestKeyValuePairFields(
-          'prLabels',
-          inputValue,
-          'metadata.labels',
-        );
-        break;
-      case 'prSpec':
-        updatePullRequestKeyValuePairFields('prSpec', inputValue, 'spec');
-        break;
-      default:
-        break;
-    }
-  };
-
-  const keyValueTextFields = [
-    {
-      label: 'Annotations',
-      name: 'prAnnotations',
-      value:
-        pullRequest?.[repoId]?.prAnnotations ??
-        convertKeyValuePairsToString(
-          pullRequest?.[repoId]?.yaml?.metadata?.annotations,
-        ),
-    },
-    {
-      label: 'Labels',
-      name: 'prLabels',
-      value:
-        pullRequest?.[repoId]?.prLabels ??
-        convertKeyValuePairsToString(
-          pullRequest?.[repoId]?.yaml?.metadata?.labels,
-        ),
-    },
-    {
-      label: 'Spec',
-      name: 'prSpec',
-      value:
-        pullRequest?.[repoId]?.prSpec ??
-        convertKeyValuePairsToString(
-          pullRequest?.[repoId]?.yaml?.spec as Record<string, string>,
-        ),
-    },
-  ];
+  const [entityOwner, setEntityOwner] = React.useState<string>('');
 
   const error = status?.errors?.[repoId];
   const info = status?.infos?.[repoId];
@@ -316,7 +59,7 @@ export const PreviewPullRequest = ({
         <WarningPanel
           severity="info"
           title="Important message for your repository"
-          message={getCustomisedErrorMessage(info.error.message)}
+          message={getCustomisedErrorMessage(info.error.message).message}
         />
       </Box>
     );
@@ -329,199 +72,50 @@ export const PreviewPullRequest = ({
           <WarningPanel
             severity="error"
             title="Failed to create PR"
-            message={getCustomisedErrorMessage(error.error.message)}
+            message={
+              <>
+                {getCustomisedErrorMessage(error.error.message).message}{' '}
+                <Link
+                  to={`https://github.com/${error.repository.organization}/${error.repository.name}`}
+                >
+                  View repository
+                  <OpenInNewIcon
+                    style={{ verticalAlign: 'sub', paddingTop: '7px' }}
+                  />
+                </Link>
+              </>
+            }
           />
         </Box>
       )}
-      <Box marginTop={2}>
-        <Typography variant="h6">{`${approvalTool} details`}</Typography>
-      </Box>
-
-      <TextField
-        label={`${approvalTool} title`}
-        placeholder="Add Backstage catalog entity descriptor files"
-        variant="outlined"
-        margin="normal"
-        fullWidth
-        name={`repositories.${pullRequest[repoId]?.componentName}.prTitle`}
-        value={pullRequest?.[repoId]?.prTitle}
-        onChange={handleChange}
-        error={!!formErrors?.[repoId]?.prTitle}
-        required
-      />
-
-      <TextField
-        label={`${approvalTool} body`}
-        placeholder="A describing text with Markdown support"
-        margin="normal"
-        variant="outlined"
-        fullWidth
-        onChange={handleChange}
-        name={`repositories.${pullRequest[repoId]?.componentName}.prDescription`}
-        value={pullRequest?.[repoId]?.prDescription}
-        error={!!formErrors?.[repoId]?.prDescription}
-        multiline
-        required
-      />
-
-      <Box marginTop={2}>
-        <Typography variant="h6">Entity configuration</Typography>
-      </Box>
-
-      <TextField
-        label="Name of the created component"
-        placeholder="Component Name"
-        margin="normal"
-        variant="outlined"
-        onChange={handleChange}
-        value={pullRequest?.[repoId]?.componentName}
-        name={`repositories.${pullRequest[repoId]?.componentName}.componentName`}
-        error={!!formErrors?.[repoId]?.componentName}
-        helperText={
-          formErrors?.[repoId]?.componentName
-            ? formErrors?.[repoId]?.componentName
-            : ''
-        }
-        fullWidth
-        required
-      />
-      <br />
-      <br />
-
-      {!pullRequest?.[repoId]?.useCodeOwnersFile && (
-        <Autocomplete
-          options={entities || []}
-          value={entityOwner || ''}
-          loading={entitiesLoading}
-          loadingText="Loading groups and users"
-          onChange={(_event: React.ChangeEvent<{}>, value: string | null) => {
-            setEntityOwner(value || '');
-            handleChange({
-              target: { name: 'entityOwner', value },
-            } as any);
-          }}
-          onInputChange={(_e, newSearch: string) => {
-            setEntityOwner(newSearch || '');
-            handleChange({
-              target: { name: 'entityOwner', value: newSearch },
-            } as any);
-            if (!newSearch && !pullRequest?.[repoId]?.useCodeOwnersFile) {
-              setFormErrors({
-                ...formErrors,
-                [repoId]: {
-                  ...formErrors?.[repoId],
-                  entityOwner: 'Entity Owner is required',
-                },
-              });
-            } else {
-              const err = { ...formErrors };
-              delete err[repoId]?.entityOwner;
-              setFormErrors(err);
+      {(repoStatus as ImportJobStatus)?.github?.pullRequest?.url && (
+        <Box marginTop={others?.addPaddingTop ? 2 : 0}>
+          <WarningPanel
+            severity="info"
+            title=""
+            message={
+              <>
+                The{' '}
+                <Link
+                  to={(repoStatus as ImportJobStatus).github.pullRequest.url}
+                >
+                  pull request
+                </Link>{' '}
+                is pending approval
+              </>
             }
-          }}
-          renderInput={params => (
-            <TextField
-              {...params}
-              variant="outlined"
-              error={!!formErrors?.[repoId]?.entityOwner}
-              label="Entity owner"
-              placeholder="groups and users"
-              helperText={
-                formErrors?.[repoId]?.entityOwner &&
-                !pullRequest?.[repoId]?.useCodeOwnersFile
-                  ? 'Entity owner is required'
-                  : 'Select an owner from the list or enter a reference to a Group or a User'
-              }
-              InputProps={{
-                ...params.InputProps,
-                endAdornment: (
-                  <>
-                    {entitiesLoading ? (
-                      <CircularProgress color="inherit" size="1em" />
-                    ) : null}
-                    {params.InputProps.endAdornment}
-                  </>
-                ),
-              }}
-              required
-            />
-          )}
-        />
-      )}
-
-      <FormControlLabel
-        control={
-          <Checkbox
-            checked={pullRequest?.[repoId]?.useCodeOwnersFile}
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-              const pr = {
-                ...pullRequest,
-                [repoId]: {
-                  ...pullRequest[repoId],
-                  useCodeOwnersFile: event.target.checked,
-                },
-              };
-
-              delete pr[repoId]?.entityOwner;
-              delete pr[repoId]?.yaml?.spec?.owner;
-
-              setPullRequest(pr);
-              if (event.target.checked) {
-                const err = { ...formErrors };
-                delete err[repoId]?.entityOwner;
-                setFormErrors(err);
-              }
-            }}
           />
-        }
-        label={
-          <>
-            Use <em>CODEOWNERS</em> file as Entity Owner
-          </>
-        }
-      />
-      <FormHelperText>
-        WARNING: This may fail if no CODEOWNERS file is found at the target
-        location.
-      </FormHelperText>
-      {keyValueTextFields.map(field => (
-        <KeyValueTextField
-          key={field.name}
-          label={field.label}
-          name={`repositories.${pullRequest[repoId]?.componentName}.${field.name}`}
-          value={field.value ?? ''}
-          onChange={handleChange}
-          setFormErrors={setFormErrors}
-          formErrors={formErrors}
-          repoId={repoId}
-        />
-      ))}
-      <Box marginTop={2}>
-        <Typography variant="h6">
-          Preview {`${approvalTool.toLowerCase()}`}
-        </Typography>
-      </Box>
-
-      <PreviewPullRequestComponent
-        title={pullRequest?.[repoId]?.prTitle ?? ''}
-        description={pullRequest?.[repoId]?.prDescription ?? ''}
-        classes={{
-          card: contentClasses.previewCard,
-          cardContent: contentClasses.previewCardContent,
-        }}
-      />
-
-      <Box marginTop={2} marginBottom={1}>
-        <Typography variant="h6">Preview entities</Typography>
-      </Box>
-
-      <PreviewCatalogInfoComponent
-        entities={[pullRequest?.[repoId]?.yaml]}
-        repositoryUrl={repoUrl}
-        classes={{
-          card: contentClasses.previewCard,
-          cardContent: contentClasses.previewCardContent,
-        }}
+        </Box>
+      )}
+      <PreviewPullRequestForm
+        entityOwner={entityOwner}
+        setEntityOwner={setEntityOwner}
+        repoId={repoId}
+        repoUrl={repoUrl}
+        pullRequest={pullRequest}
+        setPullRequest={setPullRequest}
+        formErrors={formErrors}
+        setFormErrors={setFormErrors}
       />
     </>
   );
diff --git a/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequestForm.tsx b/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequestForm.tsx
new file mode 100644
index 00000000000..5c1dce584ef
--- /dev/null
+++ b/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequestForm.tsx
@@ -0,0 +1,495 @@
+import * as React from 'react';
+import { useAsync } from 'react-use';
+
+import { Entity, EntityMeta } from '@backstage/catalog-model';
+import { useApi } from '@backstage/core-plugin-api';
+import {
+  PreviewCatalogInfoComponent,
+  PreviewPullRequestComponent,
+} from '@backstage/plugin-catalog-import';
+import {
+  catalogApiRef,
+  humanizeEntityRef,
+} from '@backstage/plugin-catalog-react';
+
+import { Checkbox, FormHelperText, makeStyles } from '@material-ui/core';
+import TextField from '@material-ui/core/TextField';
+import Autocomplete from '@mui/material/Autocomplete';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Typography from '@mui/material/Typography';
+import { useFormikContext } from 'formik';
+
+import {
+  AddRepositoriesFormValues,
+  PullRequestPreview,
+  PullRequestPreviewData,
+} from '../../types';
+import {
+  convertKeyValuePairsToString,
+  getYamlKeyValuePairs,
+} from '../../utils/repository-utils';
+import KeyValueTextField from './KeyValueTextField';
+
+const useDrawerContentStyles = makeStyles(theme => ({
+  previewCard: {
+    marginTop: theme.spacing(1),
+  },
+  previewCardContent: {
+    paddingTop: 0,
+  },
+}));
+
+const componentNameRegex =
+  /^([a-zA-Z0-9]+[-_.])*[a-zA-Z0-9]+$|^[a-zA-Z0-9]{1,63}$/;
+
+export const PreviewPullRequestForm = ({
+  repoId,
+  repoUrl,
+  pullRequest,
+  setPullRequest,
+  formErrors,
+  setFormErrors,
+  entityOwner,
+  setEntityOwner,
+}: {
+  repoId: string;
+  repoUrl: string;
+  pullRequest: PullRequestPreviewData;
+  formErrors: PullRequestPreviewData;
+  entityOwner: string;
+  setEntityOwner: (name: string) => void;
+  setPullRequest: (pullRequest: PullRequestPreviewData) => void;
+  setFormErrors: (pullRequest: PullRequestPreviewData) => void;
+}) => {
+  const contentClasses = useDrawerContentStyles();
+  const { values } = useFormikContext<AddRepositoriesFormValues>();
+  const catalogApi = useApi(catalogApiRef);
+
+  const approvalTool =
+    values.approvalTool === 'git' ? 'Pull request' : 'ServiceNow ticket';
+
+  const { loading: entitiesLoading, value: entities } = useAsync(async () => {
+    const allEntities = await catalogApi.getEntities({
+      filter: {
+        kind: ['group', 'user'],
+      },
+    });
+
+    return allEntities.items
+      .map(e => humanizeEntityRef(e, { defaultNamespace: 'true' }))
+      .sort((a, b) => a.localeCompare(b));
+  });
+
+  React.useEffect(() => {
+    const newFormErrors = {
+      ...formErrors,
+      [repoId]: {
+        ...formErrors?.[repoId],
+        entityOwner: 'Entity owner is missing',
+      },
+    };
+
+    if (
+      Object.keys(pullRequest || {}).length > 0 &&
+      !pullRequest[repoId]?.entityOwner &&
+      !pullRequest[repoId]?.useCodeOwnersFile
+    ) {
+      if (JSON.stringify(formErrors) !== JSON.stringify(newFormErrors)) {
+        setFormErrors(newFormErrors);
+      }
+    } else if (pullRequest[repoId]?.entityOwner) {
+      setEntityOwner(pullRequest[repoId].entityOwner);
+    }
+  }, [setFormErrors, setEntityOwner, formErrors, repoId, pullRequest]);
+
+  const updatePullRequestKeyValuePairFields = (
+    field: string,
+    value: string,
+    yamlKey: string,
+  ) => {
+    const yamlUpdate: Entity = { ...pullRequest[repoId]?.yaml };
+
+    if (value.length === 0) {
+      if (yamlKey.includes('.')) {
+        // annotations or labels
+        const [key, subKey] = yamlKey.split('.');
+        if ((yamlUpdate[key as keyof Entity] as EntityMeta)?.[subKey]) {
+          delete (yamlUpdate[key as keyof Entity] as EntityMeta)[subKey];
+        }
+      } else {
+        // specs
+        delete yamlUpdate[yamlKey as keyof Entity];
+      }
+    } else if (yamlKey.includes('.')) {
+      const [key, subKey] = yamlKey.split('.');
+      (yamlUpdate[key as keyof Entity] as EntityMeta)[subKey] =
+        getYamlKeyValuePairs(value);
+    } else {
+      yamlUpdate.spec = getYamlKeyValuePairs(value);
+    }
+
+    setPullRequest({
+      ...pullRequest,
+      [repoId]: {
+        ...pullRequest[repoId],
+        [field]: value,
+        yaml: yamlUpdate,
+      },
+    });
+  };
+
+  const updateFieldAndErrors = (
+    field: string,
+    value: string,
+    errorMessage: string,
+  ) => {
+    setPullRequest({
+      ...pullRequest,
+      [repoId]: {
+        ...pullRequest[repoId],
+        [field]: value,
+        ...(field === 'componentName'
+          ? {
+              yaml: {
+                ...pullRequest[repoId]?.yaml,
+                metadata: {
+                  ...pullRequest[repoId]?.yaml.metadata,
+                  name: value,
+                },
+              },
+            }
+          : {}),
+      },
+    });
+
+    if (!value) {
+      setFormErrors({
+        ...formErrors,
+        [repoId]: {
+          ...formErrors?.[repoId],
+          [field]: errorMessage,
+        },
+      });
+    } else if (field === 'componentName' && !componentNameRegex.exec(value)) {
+      setFormErrors({
+        ...formErrors,
+        [repoId]: {
+          ...formErrors?.[repoId],
+          [field]: `"${value}" is not valid; expected a string that is sequences of [a-zA-Z0-9] separated by any of [-_.], at most 63 characters in total. To learn more about catalog file format, visit: https://github.com/backstage/backstage/blob/master/docs/architecture-decisions/adr002-default-catalog-file-format.md`,
+        },
+      });
+    } else {
+      const err = { ...formErrors };
+      delete err[repoId]?.[field as keyof PullRequestPreview];
+      setFormErrors(err);
+    }
+  };
+
+  const handleChange = (
+    event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,
+  ) => {
+    const targetName = event.target.name
+      .split('.')
+      .find(s =>
+        [
+          'prTitle',
+          'prDescription',
+          'componentName',
+          'prAnnotations',
+          'prLabels',
+          'prSpec',
+          'entityOwner',
+        ].includes(s),
+      );
+
+    if (!targetName) return;
+
+    const inputValue = event.target.value;
+    switch (targetName) {
+      case 'prTitle':
+        updateFieldAndErrors(
+          'prTitle',
+          inputValue,
+          `${approvalTool} title is missing`,
+        );
+        break;
+      case 'prDescription':
+        updateFieldAndErrors(
+          'prDescription',
+          inputValue,
+          `${approvalTool} description is missing`,
+        );
+        break;
+      case 'entityOwner':
+        setPullRequest({
+          ...pullRequest,
+          [repoId]: {
+            ...pullRequest[repoId],
+            entityOwner: inputValue,
+            yaml: {
+              ...pullRequest[repoId]?.yaml,
+              spec: {
+                ...pullRequest[repoId]?.yaml.spec,
+                ...(inputValue ? { owner: inputValue } : {}),
+              },
+            },
+          },
+        });
+        break;
+      case 'componentName':
+        updateFieldAndErrors(
+          'componentName',
+          inputValue,
+          'Component name is missing',
+        );
+
+        break;
+      case 'prAnnotations':
+        updatePullRequestKeyValuePairFields(
+          'prAnnotations',
+          inputValue,
+          'metadata.annotations',
+        );
+        break;
+      case 'prLabels':
+        updatePullRequestKeyValuePairFields(
+          'prLabels',
+          inputValue,
+          'metadata.labels',
+        );
+        break;
+      case 'prSpec':
+        updatePullRequestKeyValuePairFields('prSpec', inputValue, 'spec');
+        break;
+      default:
+        break;
+    }
+  };
+
+  const keyValueTextFields = [
+    {
+      label: 'Annotations',
+      name: 'prAnnotations',
+      value:
+        pullRequest[repoId]?.prAnnotations ??
+        convertKeyValuePairsToString(
+          pullRequest[repoId]?.yaml?.metadata?.annotations,
+        ),
+    },
+    {
+      label: 'Labels',
+      name: 'prLabels',
+      value:
+        pullRequest[repoId]?.prLabels ??
+        convertKeyValuePairsToString(
+          pullRequest[repoId]?.yaml?.metadata?.labels,
+        ),
+    },
+    {
+      label: 'Spec',
+      name: 'prSpec',
+      value:
+        pullRequest[repoId]?.prSpec ??
+        convertKeyValuePairsToString(
+          pullRequest[repoId]?.yaml?.spec as Record<string, string>,
+        ),
+    },
+  ];
+
+  return (
+    <>
+      <Box marginTop={2}>
+        <Typography variant="h6">{`${approvalTool} details`}</Typography>
+      </Box>
+
+      <TextField
+        label={`${approvalTool} title`}
+        placeholder="Add Backstage catalog entity descriptor files"
+        variant="outlined"
+        margin="normal"
+        fullWidth
+        name={`repositories.${pullRequest[repoId]?.componentName}.prTitle`}
+        value={pullRequest[repoId]?.prTitle}
+        onChange={handleChange}
+        error={!!formErrors?.[repoId]?.prTitle}
+        required
+      />
+
+      <TextField
+        label={`${approvalTool} body`}
+        placeholder="A describing text with Markdown support"
+        margin="normal"
+        variant="outlined"
+        fullWidth
+        onChange={handleChange}
+        name={`repositories.${pullRequest[repoId]?.componentName}.prDescription`}
+        value={pullRequest[repoId]?.prDescription}
+        error={!!formErrors?.[repoId]?.prDescription}
+        multiline
+        required
+      />
+
+      <Box marginTop={2}>
+        <Typography variant="h6">Entity configuration</Typography>
+      </Box>
+
+      <TextField
+        label="Name of the created component"
+        placeholder="Component Name"
+        margin="normal"
+        variant="outlined"
+        onChange={handleChange}
+        value={pullRequest[repoId]?.componentName}
+        name={`repositories.${pullRequest[repoId]?.componentName}.componentName`}
+        error={!!formErrors?.[repoId]?.componentName}
+        helperText={
+          formErrors?.[repoId]?.componentName
+            ? formErrors?.[repoId]?.componentName
+            : ''
+        }
+        fullWidth
+        required
+      />
+      <br />
+      <br />
+
+      {!pullRequest[repoId]?.useCodeOwnersFile && (
+        <Autocomplete
+          options={entities || []}
+          value={entityOwner || pullRequest[repoId]?.entityOwner || ''}
+          loading={entitiesLoading}
+          loadingText="Loading groups and users"
+          onChange={(_event: React.ChangeEvent<{}>, value: string | null) => {
+            setEntityOwner(value || '');
+            handleChange({
+              target: { name: 'entityOwner', value },
+            } as any);
+          }}
+          onInputChange={(_e, newSearch: string) => {
+            setEntityOwner(newSearch || '');
+            handleChange({
+              target: { name: 'entityOwner', value: newSearch },
+            } as any);
+            if (!newSearch && !pullRequest[repoId]?.useCodeOwnersFile) {
+              setFormErrors({
+                ...formErrors,
+                [repoId]: {
+                  ...formErrors?.[repoId],
+                  entityOwner: 'Entity Owner is required',
+                },
+              });
+            } else {
+              const err = { ...formErrors };
+              delete err[repoId]?.entityOwner;
+              setFormErrors(err);
+            }
+          }}
+          renderInput={params => (
+            <TextField
+              {...params}
+              variant="outlined"
+              error={!!formErrors?.[repoId]?.entityOwner}
+              label="Entity owner"
+              placeholder="groups and users"
+              helperText={
+                formErrors?.[repoId]?.entityOwner &&
+                !pullRequest[repoId]?.useCodeOwnersFile
+                  ? 'Entity owner is required'
+                  : 'Select an owner from the list or enter a reference to a Group or a User'
+              }
+              InputProps={{
+                ...params.InputProps,
+                endAdornment: (
+                  <>
+                    {entitiesLoading ? (
+                      <CircularProgress color="inherit" size="1em" />
+                    ) : null}
+                    {params.InputProps.endAdornment}
+                  </>
+                ),
+              }}
+              required
+            />
+          )}
+        />
+      )}
+
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={pullRequest[repoId]?.useCodeOwnersFile}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+              const pr = {
+                ...pullRequest,
+                [repoId]: {
+                  ...pullRequest[repoId],
+                  useCodeOwnersFile: event.target.checked,
+                },
+              };
+
+              delete pr[repoId]?.entityOwner;
+              delete pr[repoId]?.yaml?.spec?.owner;
+
+              setPullRequest(pr);
+              if (event.target.checked) {
+                const err = { ...formErrors };
+                delete err[repoId]?.entityOwner;
+                setFormErrors(err);
+              }
+            }}
+          />
+        }
+        label={
+          <>
+            Use <em>CODEOWNERS</em> file as Entity Owner
+          </>
+        }
+      />
+      <FormHelperText>
+        WARNING: This may fail if no CODEOWNERS file is found at the target
+        location.
+      </FormHelperText>
+      {keyValueTextFields.map(field => (
+        <KeyValueTextField
+          key={field.name}
+          label={field.label}
+          name={`repositories.${pullRequest[repoId]?.componentName}.${field.name}`}
+          value={field.value ?? ''}
+          onChange={handleChange}
+          setFormErrors={setFormErrors}
+          formErrors={formErrors}
+          repoId={repoId}
+        />
+      ))}
+      <Box marginTop={2}>
+        <Typography variant="h6">
+          Preview {`${approvalTool.toLowerCase()}`}
+        </Typography>
+      </Box>
+
+      <PreviewPullRequestComponent
+        title={pullRequest[repoId]?.prTitle ?? ''}
+        description={pullRequest[repoId]?.prDescription ?? ''}
+        classes={{
+          card: contentClasses.previewCard,
+          cardContent: contentClasses.previewCardContent,
+        }}
+      />
+
+      <Box marginTop={2} marginBottom={1}>
+        <Typography variant="h6">Preview entities</Typography>
+      </Box>
+
+      <PreviewCatalogInfoComponent
+        entities={[pullRequest[repoId]?.yaml]}
+        repositoryUrl={repoUrl}
+        classes={{
+          card: contentClasses.previewCard,
+          cardContent: contentClasses.previewCardContent,
+        }}
+      />
+    </>
+  );
+};
diff --git a/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequests.test.tsx b/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequests.test.tsx
index 9ab1f980022..d0b400031fd 100644
--- a/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequests.test.tsx
+++ b/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequests.test.tsx
@@ -7,9 +7,10 @@ import { MockConfigApi, TestApiProvider } from '@backstage/test-utils';
 import { render } from '@testing-library/react';
 import { useFormikContext } from 'formik';
 
-import { mockGetRepositories } from '../../mocks/mockData';
+import { bulkImportApiRef } from '../../api/BulkImportBackendClient';
+import { mockGetImportJobs, mockGetRepositories } from '../../mocks/mockData';
 import { mockEntities } from '../../mocks/mockEntities';
-import { ApprovalTool, RepositoryStatus } from '../../types';
+import { ApprovalTool, ImportJobStatus, RepositoryStatus } from '../../types';
 import { getPRTemplate } from '../../utils/repository-utils';
 import { PreviewPullRequests } from './PreviewPullRequests';
 
@@ -38,16 +39,29 @@ jest.mock('react-use', () => ({
   useAsync: jest.fn().mockReturnValue({ loading: false }),
 }));
 
-const seState = jest.fn();
+class MockBulkImportApi {
+  async getImportAction(
+    repo: string,
+    _defaultBranch: string,
+  ): Promise<ImportJobStatus | Response> {
+    return mockGetImportJobs.find(
+      i => i.repository.url === repo,
+    ) as ImportJobStatus;
+  }
+}
+
+const setState = jest.fn();
 
 beforeEach(() => {
-  (useState as jest.Mock).mockImplementation(initial => [initial, seState]);
+  (useState as jest.Mock).mockImplementation(initial => [initial, setState]);
 });
 
 const mockCatalogApi: Partial<CatalogApi> = {
   getEntities: jest.fn().mockReturnValue(mockEntities),
 };
 
+const mockBulkImportApi = new MockBulkImportApi();
+
 describe('Preview Pull Requests', () => {
   it('should render the pull request preview without the tab view when only one repository from the an org is selected', async () => {
     (useFormikContext as jest.Mock).mockReturnValue({
@@ -63,6 +77,7 @@ describe('Preview Pull Requests', () => {
     const { getByText, getByPlaceholderText, queryByRole } = render(
       <TestApiProvider
         apis={[
+          [bulkImportApiRef, mockBulkImportApi],
           [
             configApiRef,
             new MockConfigApi({
@@ -79,10 +94,12 @@ describe('Preview Pull Requests', () => {
         <PreviewPullRequests
           repositories={[mockGetRepositories.repositories[0]]}
           pullRequest={{
-            'org/dessert/Cupcake': getPRTemplate(
-              'org/dessert/Cupcake',
+            'org/dessert/cupcake': getPRTemplate(
+              'org/dessert/cupcake',
               'org/dessert',
               'user:default/guest',
+              'https://localhost:3001',
+              'https://github.com/org/dessert/cupcake',
             ),
           }}
           setFormErrors={() => jest.fn()}
@@ -113,6 +130,7 @@ describe('Preview Pull Requests', () => {
     const { getByText, getByPlaceholderText, getByRole } = render(
       <TestApiProvider
         apis={[
+          [bulkImportApiRef, mockBulkImportApi],
           [
             configApiRef,
             new MockConfigApi({
@@ -136,11 +154,15 @@ describe('Preview Pull Requests', () => {
               'org/dessert/cupcake',
               'org/dessert',
               'user:default/guest',
+              'https://localhost:3001',
+              'https://github.com/org/dessert/cupcake',
             ),
             'org/dessert/donut': getPRTemplate(
               'org/dessert/donut',
               'org/dessert',
               'user:default/guest',
+              'https://localhost:3001',
+              'https://github.com/org/dessert/donut',
             ),
           }}
           setFormErrors={() => jest.fn()}
@@ -199,6 +221,7 @@ describe('Preview Pull Requests', () => {
     const { getByTestId } = render(
       <TestApiProvider
         apis={[
+          [bulkImportApiRef, mockBulkImportApi],
           [
             configApiRef,
             new MockConfigApi({
@@ -222,11 +245,15 @@ describe('Preview Pull Requests', () => {
               'org/dessert/cupcake',
               'org/dessert',
               'user:default/guest',
+              'https://localhost:3001',
+              'https://github.com/org/dessert/cupcake',
             ),
             'org/dessert/donut': getPRTemplate(
               'org/dessert/donut',
               'org/dessert',
               'user:default/guest',
+              'https://localhost:3001',
+              'https://github.com/org/dessert/donut',
             ),
           }}
           setFormErrors={() => jest.fn()}
diff --git a/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequests.tsx b/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequests.tsx
index 108861136ff..18d31059fe9 100644
--- a/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequests.tsx
+++ b/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequests.tsx
@@ -87,6 +87,7 @@ export const PreviewPullRequests = ({
       <PreviewPullRequest
         repoId={Object.values(repositories)[0].id || ''}
         repoUrl={Object.values(repositories)[0].repoUrl || ''}
+        repoBranch={Object.values(repositories)[0].defaultBranch || 'main'}
         pullRequest={pullRequest}
         setPullRequest={setPullRequest}
         formErrors={formErrors}
@@ -122,6 +123,7 @@ export const PreviewPullRequests = ({
             <PreviewPullRequest
               repoId={repo.id || ''}
               repoUrl={repo.repoUrl || ''}
+              repoBranch={repo.defaultBranch || 'main'}
               pullRequest={pullRequest}
               setPullRequest={setPullRequest}
               formErrors={formErrors}
diff --git a/plugins/bulk-import/src/components/Repositories/CatalogInfoAction.tsx b/plugins/bulk-import/src/components/Repositories/CatalogInfoAction.tsx
index e1486f3cfad..1e088a33ad2 100644
--- a/plugins/bulk-import/src/components/Repositories/CatalogInfoAction.tsx
+++ b/plugins/bulk-import/src/components/Repositories/CatalogInfoAction.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import React from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { useAsync } from 'react-use';
 
 import { useApi } from '@backstage/core-plugin-api';
@@ -9,6 +10,7 @@ import EditIcon from '@material-ui/icons/Edit';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 
 import { bulkImportPermission } from '@janus-idp/backstage-plugin-bulk-import-common';
+import { useDrawer } from '@janus-idp/shared-react';
 
 import { bulkImportApiRef } from '../../api/BulkImportBackendClient';
 import {
@@ -16,10 +18,12 @@ import {
   ImportJobStatus,
   RepositoryStatus,
 } from '../../types';
-import EditCatalogInfo from './EditCatalogInfo';
 
 const CatalogInfoAction = ({ data }: { data: AddRepositoryData }) => {
-  const [drawerOpen, setDrawerOpen] = useState(false);
+  const { setDrawerData, setOpenDrawer, drawerData } = useDrawer();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
   const bulkImportApi = useApi(bulkImportApiRef);
 
   const { allowed } = usePermission({
@@ -32,69 +36,77 @@ const CatalogInfoAction = ({ data }: { data: AddRepositoryData }) => {
         data?.repoUrl || '',
         data?.defaultBranch || 'main',
       ),
+    [setOpenDrawer],
   );
 
-  const importStatus: ImportJobStatus = { ...(value as ImportJobStatus) };
-
-  const handleClick = () => {
-    setDrawerOpen(true);
+  const openDrawer = (status: ImportJobStatus) => {
+    searchParams.set('repository', data.repoUrl || '');
+    navigate({
+      pathname: location.pathname,
+      search: `?${searchParams.toString()}`,
+    });
+    setOpenDrawer(true);
+    setDrawerData(status);
   };
 
   const hasPermissionToEdit =
     allowed &&
     data?.catalogInfoYaml?.status === RepositoryStatus.WAIT_PR_APPROVAL;
 
+  React.useEffect(() => {
+    console.log('!!!!vlaue ', value);
+    const shouldOpenPanel = searchParams.get('repository');
+    if (shouldOpenPanel) {
+      setOpenDrawer(true);
+      if (Object.keys(drawerData || {}).length === 0) {
+        setDrawerData(value as ImportJobStatus);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
   return (
-    <>
-      <Tooltip
-        title={
-          hasPermissionToEdit
-            ? 'Edit catalog-info.yaml pull request'
-            : 'View catalog-info.yaml file'
+    <Tooltip
+      title={
+        hasPermissionToEdit
+          ? 'Edit catalog-info.yaml pull request'
+          : 'View catalog-info.yaml file'
+      }
+    >
+      <span
+        data-testid={
+          hasPermissionToEdit ? 'edit-catalog-info' : 'view-catalog-info'
         }
       >
-        <span
-          data-testid={
-            hasPermissionToEdit ? 'edit-catalog-info' : 'view-catalog-info'
-          }
-        >
-          {hasPermissionToEdit ? (
-            <IconButton
-              color="inherit"
-              aria-label="Update"
-              data-testid="update"
-              onClick={() => handleClick()}
-            >
-              <EditIcon />
-            </IconButton>
-          ) : (
-            <IconButton
-              target="_blank"
-              href={
-                data?.catalogInfoYaml?.status === RepositoryStatus.ADDED
-                  ? data?.repoUrl || ''
-                  : data?.catalogInfoYaml?.pullRequest || ''
-              }
-              color="inherit"
-              aria-label={
-                data?.catalogInfoYaml?.status === RepositoryStatus.ADDED
-                  ? 'View'
-                  : 'View PR'
-              }
-            >
-              <OpenInNewIcon />
-            </IconButton>
-          )}
-        </span>
-      </Tooltip>
-      {hasPermissionToEdit && drawerOpen && (
-        <EditCatalogInfo
-          open={drawerOpen}
-          importStatus={importStatus}
-          onClose={() => setDrawerOpen(false)}
-        />
-      )}
-    </>
+        {hasPermissionToEdit ? (
+          <IconButton
+            color="inherit"
+            aria-label="Update"
+            data-testid="update"
+            onClick={() => openDrawer(value as ImportJobStatus)}
+          >
+            <EditIcon />
+          </IconButton>
+        ) : (
+          <IconButton
+            target="_blank"
+            href={
+              data?.catalogInfoYaml?.status === RepositoryStatus.ADDED
+                ? data?.repoUrl || ''
+                : data?.catalogInfoYaml?.pullRequestUrl || ''
+            }
+            color="inherit"
+            aria-label={
+              data?.catalogInfoYaml?.status === RepositoryStatus.ADDED
+                ? 'View'
+                : 'View PR'
+            }
+          >
+            <OpenInNewIcon />
+          </IconButton>
+        )}
+      </span>
+    </Tooltip>
   );
 };
 
diff --git a/plugins/bulk-import/src/components/Repositories/DeleteRepository.tsx b/plugins/bulk-import/src/components/Repositories/DeleteRepository.tsx
index 7e074102744..11186c36953 100644
--- a/plugins/bulk-import/src/components/Repositories/DeleteRepository.tsx
+++ b/plugins/bulk-import/src/components/Repositories/DeleteRepository.tsx
@@ -4,8 +4,9 @@ import Delete from '@mui/icons-material/Delete';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 
+import { useDeleteDialog } from '@janus-idp/shared-react';
+
 import { AddRepositoryData } from '../../types';
-import { useDeleteDialog } from '../DeleteDialogContext';
 
 const DeleteRepository = ({ data }: { data: AddRepositoryData }) => {
   const { setDeleteComponent, setOpenDialog } = useDeleteDialog();
diff --git a/plugins/bulk-import/src/components/Repositories/EditCatalogInfo.tsx b/plugins/bulk-import/src/components/Repositories/EditCatalogInfo.tsx
index c8039ae17e2..211271b5146 100644
--- a/plugins/bulk-import/src/components/Repositories/EditCatalogInfo.tsx
+++ b/plugins/bulk-import/src/components/Repositories/EditCatalogInfo.tsx
@@ -34,16 +34,15 @@ const EditCatalogInfo = ({
   const bulkImportApi = useApi(bulkImportApiRef);
   const { setSubmitting, setStatus, isSubmitting } =
     useFormikContext<AddRepositoriesFormValues>();
-  const [formErrors, setFormErrors] = React.useState<PullRequestPreviewData>();
 
   const yamlContent = yaml.load(
     importStatus?.github?.pullRequest?.catalogInfoContent,
   ) as Entity;
-  const catalogEntityName = yamlContent.metadata.name;
+  const catalogEntityName = yamlContent.metadata?.name;
   const entityOwner = yamlContent.spec?.owner as string;
 
   const previewData: AddRepositoryData = {
-    id: importStatus?.repository.id,
+    id: importStatus?.repository?.id,
     repoUrl: importStatus?.repository?.url,
     repoName: importStatus?.repository?.name,
     orgName: importStatus?.repository?.organization,
@@ -144,8 +143,6 @@ const EditCatalogInfo = ({
       repositoryType={RepositorySelection.Repository}
       onClose={onClose}
       handleSave={handleSave}
-      formErrors={formErrors as PullRequestPreviewData}
-      setFormErrors={setFormErrors}
     />
   );
 };
diff --git a/plugins/bulk-import/src/components/Repositories/RepositoriesList.tsx b/plugins/bulk-import/src/components/Repositories/RepositoriesList.tsx
index e07de0e55e2..9ecef6de7bf 100644
--- a/plugins/bulk-import/src/components/Repositories/RepositoriesList.tsx
+++ b/plugins/bulk-import/src/components/Repositories/RepositoriesList.tsx
@@ -1,13 +1,16 @@
 import React from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import { ErrorPage, Table } from '@backstage/core-components';
 
 import { makeStyles } from '@material-ui/core';
 
+import { useDeleteDialog, useDrawer } from '@janus-idp/shared-react';
+
 import { useAddedRepositories } from '../../hooks/useAddedRepositories';
 import { AddRepositoryData } from '../../types';
-import { useDeleteDialog } from '../DeleteDialogContext';
 import DeleteRepositoryDialog from './DeleteRepositoryDialog';
+import EditCatalogInfo from './EditCatalogInfo';
 import { columns } from './RepositoriesListColumns';
 import { RepositoriesListToolbar } from './RepositoriesListToolbar';
 
@@ -20,7 +23,11 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export const RepositoriesList = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
   const { openDialog, setOpenDialog, deleteComponent } = useDeleteDialog();
+  const { openDrawer, setOpenDrawer, drawerData } = useDrawer();
   const [pageNumber, setPageNumber] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(5);
   const [isMounted, setIsMounted] = React.useState(false);
@@ -38,6 +45,15 @@ export const RepositoriesList = () => {
     retry();
   };
 
+  const closeDrawer = () => {
+    searchParams.delete('repository');
+    navigate({
+      pathname: location.pathname,
+      search: `?${searchParams.toString()}`,
+    });
+    setOpenDrawer(false);
+  };
+
   React.useEffect(() => {
     if (!isMounted && !loadingJobs) {
       setIsMounted(true);
@@ -77,6 +93,13 @@ export const RepositoriesList = () => {
           </div>
         }
       />
+      {openDrawer && (
+        <EditCatalogInfo
+          open={openDrawer}
+          onClose={closeDrawer}
+          importStatus={drawerData}
+        />
+      )}
       {openDialog && (
         <DeleteRepositoryDialog
           open={openDialog}
diff --git a/plugins/bulk-import/src/hooks/useAddedRepositories.ts b/plugins/bulk-import/src/hooks/useAddedRepositories.ts
index fb13e3b6e3c..fda8b4e174f 100644
--- a/plugins/bulk-import/src/hooks/useAddedRepositories.ts
+++ b/plugins/bulk-import/src/hooks/useAddedRepositories.ts
@@ -1,7 +1,11 @@
 import React from 'react';
 import { useAsync, useAsyncRetry, useInterval } from 'react-use';
 
-import { identityApiRef, useApi } from '@backstage/core-plugin-api';
+import {
+  configApiRef,
+  identityApiRef,
+  useApi,
+} from '@backstage/core-plugin-api';
 
 import { bulkImportApiRef } from '../api/BulkImportBackendClient';
 import { AddRepositoryData, ImportJobStatus, RepositoryStatus } from '../types';
@@ -21,11 +25,17 @@ export const useAddedRepositories = (
     AddRepositoryData[]
   >([]);
   const identityApi = useApi(identityApiRef);
+  const configApi = useApi(configApiRef);
   const { value: user } = useAsync(async () => {
     const identityRef = await identityApi.getBackstageIdentity();
     return identityRef.userEntityRef;
   });
 
+  const { value: baseUrl } = useAsync(async () => {
+    const url = configApi.getString('app.baseUrl');
+    return url;
+  });
+
   const bulkImportApi = useApi(bulkImportApiRef);
   const {
     value: addedRepositories,
@@ -34,6 +44,7 @@ export const useAddedRepositories = (
     retry,
   } = useAsyncRetry(
     async () => await bulkImportApi.getImportJobs(page, rowsPerPage),
+    [page, rowsPerPage],
   );
 
   React.useEffect(() => {
@@ -60,6 +71,8 @@ export const useAddedRepositories = (
                 val.repository.name || '',
                 val.repository.organization || '',
                 user as string,
+                baseUrl as string,
+                val.repository.url as string,
               ),
               pullRequest: val?.github?.pullRequest?.url || '',
               lastUpdated: val.lastUpdate,
@@ -69,7 +82,7 @@ export const useAddedRepositories = (
       }
     };
     prepareDataForAddedRepositories();
-  }, [addedRepositories, user]);
+  }, [addedRepositories, user, baseUrl]);
 
   useInterval(
     () => {
diff --git a/plugins/bulk-import/src/hooks/useRepositories.ts b/plugins/bulk-import/src/hooks/useRepositories.ts
index fa2552860f3..cfe211d0c34 100644
--- a/plugins/bulk-import/src/hooks/useRepositories.ts
+++ b/plugins/bulk-import/src/hooks/useRepositories.ts
@@ -1,7 +1,11 @@
 import React from 'react';
 import { useAsync } from 'react-use';
 
-import { identityApiRef, useApi } from '@backstage/core-plugin-api';
+import {
+  configApiRef,
+  identityApiRef,
+  useApi,
+} from '@backstage/core-plugin-api';
 
 import { bulkImportApiRef } from '../api/BulkImportBackendClient';
 import { AddRepositoryData, RepositoriesError, Repository } from '../types';
@@ -29,12 +33,18 @@ export const useRepositories = (options: {
     AddRepositoryData[]
   >([]);
   const identityApi = useApi(identityApiRef);
+  const configApi = useApi(configApiRef);
 
   const { value: user } = useAsync(async () => {
     const identityRef = await identityApi.getBackstageIdentity();
     return identityRef.userEntityRef;
   });
 
+  const { value: baseUrl } = useAsync(async () => {
+    const url = configApi.getString('app.baseUrl');
+    return url;
+  });
+
   const bulkImportApi = useApi(bulkImportApiRef);
   const {
     value,
@@ -79,6 +89,8 @@ export const useRepositories = (options: {
               val.name || '',
               val.organization || '',
               user as string,
+              baseUrl as string,
+              val.url as string,
             ),
           },
         })) || [];
@@ -89,7 +101,7 @@ export const useRepositories = (options: {
         value?.organizations?.map((val: Repository) => ({
           id: val.id,
           orgName: val.name,
-          organizationUrl: val?.url?.replace('api.', ''),
+          organizationUrl: `https://github.com/${val?.name}`,
           totalReposInOrg: val.totalRepoCount,
         })) || [];
       setOrganizationsData(orgData);
@@ -99,7 +111,7 @@ export const useRepositories = (options: {
     } else {
       prepareDataForRepositories();
     }
-  }, [value, user, options?.showOrganizations]);
+  }, [value, user, options?.showOrganizations, baseUrl]);
 
   return {
     loading: dataLoading,
diff --git a/plugins/bulk-import/src/types/types.ts b/plugins/bulk-import/src/types/types.ts
index 447592b6bc8..5dfedb2d8a3 100644
--- a/plugins/bulk-import/src/types/types.ts
+++ b/plugins/bulk-import/src/types/types.ts
@@ -47,7 +47,7 @@ export type AddRepositoryData = {
   catalogInfoYaml?: {
     status?: ImportStatus;
     prTemplate?: PullRequestPreview;
-    pullRequest?: string;
+    pullRequestUrl?: string;
     lastUpdated?: string;
   };
   lastUpdated?: string;
diff --git a/plugins/bulk-import/src/utils/repository-utils.tsx b/plugins/bulk-import/src/utils/repository-utils.tsx
index 73b4b31a465..dc24cba0041 100644
--- a/plugins/bulk-import/src/utils/repository-utils.tsx
+++ b/plugins/bulk-import/src/utils/repository-utils.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react';
 
+import { Entity } from '@backstage/catalog-model';
 import { StatusOK, StatusPending } from '@backstage/core-components';
 
+import * as jsyaml from 'js-yaml';
 import { get } from 'lodash';
 import * as yaml from 'yaml';
 
@@ -14,6 +16,7 @@ import {
   CreateImportJobRepository,
   ErrorType,
   ImportJobResponse,
+  ImportJobStatus,
   ImportStatus,
   JobErrors,
   Order,
@@ -85,13 +88,17 @@ export const getPRTemplate = (
   componentName: string,
   orgName: string,
   entityOwner: string,
+  baseUrl: string,
+  repositoryUrl: string,
 ) => {
+  const importJobUrl = repositoryUrl
+    ? `${baseUrl}/bulk-import/repositories?repository=${repositoryUrl}`
+    : `${baseUrl}/bulk-import/repositories`;
   return {
     componentName,
     entityOwner,
     prTitle: 'Add catalog-info.yaml config file',
-    prDescription:
-      'This pull request adds a **Backstage entity metadata file**\nto this repository so that the component can\nbe added to the [software catalog](http://localhost:3000).\nAfter this pull request is merged, the component will become available.\nFor more information, read an [overview of the Backstage software catalog](https://backstage.io/docs/features/software-catalog/).',
+    prDescription: `This pull request adds a **Backstage entity metadata file**\nto this repository so that the component can\nbe added to the [software catalog](${baseUrl}/catalog).\nAfter this pull request is merged, the component will become available.\nFor more information, read an [overview of the Backstage software catalog](https://backstage.io/docs/features/software-catalog/).\nView your import job in your app [here](${importJobUrl}).`,
     useCodeOwnersFile: false,
     yaml: defaultCatalogInfoYaml(componentName, orgName, entityOwner),
   };
@@ -377,9 +384,7 @@ export const prepareDataForSubmission = (
             title:
               repo.catalogInfoYaml?.prTemplate?.prTitle ||
               'Add catalog-info.yaml config file',
-            body:
-              repo.catalogInfoYaml?.prTemplate?.prDescription ||
-              'This pull request adds a **Backstage entity metadata file**\nto this repository so that the component can\nbe added to the [software catalog](http://localhost:3000).\nAfter this pull request is merged, the component will become available.\nFor more information, read an [overview of the Backstage software catalog](https://backstage.io/docs/features/software-catalog/).',
+            body: repo.catalogInfoYaml?.prTemplate?.prDescription || '',
           },
         },
       });
@@ -407,15 +412,17 @@ export const getApi = (
 };
 
 export const getCustomisedErrorMessage = (
-  status: RepositoryStatus[] | null,
+  status: RepositoryStatus[] | undefined,
 ) => {
   let message = '';
+  let showRepositoryLink = false;
   status?.forEach(s => {
     if (s === RepositoryStatus.PR_ERROR) {
       message = message.concat(
         "Couldn't create a new PR due to insufficient permissions. Contact your administrator.",
         '\n',
       );
+      showRepositoryLink = true;
     }
 
     if (s === RepositoryStatus.CATALOG_INFO_FILE_EXISTS_IN_REPO) {
@@ -427,7 +434,7 @@ export const getCustomisedErrorMessage = (
 
     if (s === RepositoryStatus.CATALOG_ENTITY_CONFLICT) {
       message = message.concat(
-        "Couldn't create a new PR because of a conflict.",
+        "Couldn't create a new PR because of catalog entity conflict.",
         '\n',
       );
     }
@@ -446,7 +453,7 @@ export const getCustomisedErrorMessage = (
       );
     }
   });
-  return message;
+  return { message, showRepositoryLink };
 };
 
 export const calculateLastUpdated = (dateString: string) => {
@@ -477,3 +484,20 @@ export const calculateLastUpdated = (dateString: string) => {
   }
   return `${diffInSeconds} ${diffInSeconds > 1 ? 'seconds' : 'second'} ago`;
 };
+
+export const evaluatePRTemplate = (repositoryStatus: ImportJobStatus) => {
+  const entity = jsyaml.load(
+    repositoryStatus.github.pullRequest.catalogInfoContent,
+  ) as Entity;
+  return {
+    prTitle: repositoryStatus.github.pullRequest.title,
+    prDescription: repositoryStatus.github.pullRequest.body,
+    prAnnotations: convertKeyValuePairsToString(entity.metadata.annotations),
+    prLabels: convertKeyValuePairsToString(entity.metadata.labels),
+    prSpec: convertKeyValuePairsToString(entity.spec as Record<string, string>),
+    componentName: entity.metadata.name,
+    entityOwner: entity.spec?.owner as string,
+    useCodeOwnersFile: !entity.spec?.owner,
+    yaml: entity,
+  };
+};
diff --git a/plugins/bulk-import/tests/bulkImport.spec.ts b/plugins/bulk-import/tests/bulkImport.spec.ts
index fee49e2aa82..2e3ca022676 100644
--- a/plugins/bulk-import/tests/bulkImport.spec.ts
+++ b/plugins/bulk-import/tests/bulkImport.spec.ts
@@ -23,7 +23,7 @@ test.describe('Bulk import plugin', () => {
     await browser.close();
   });
 
-  test('Repositories tab is shown', async () => {
+  test('Repositories list is shown', async () => {
     await expect(page.getByText('Added repositories (4)')).toBeVisible();
     const columns = [
       'Name',
diff --git a/plugins/rbac/src/components/RbacPage.tsx b/plugins/rbac/src/components/RbacPage.tsx
index 79cc6b56c5a..1effc22a066 100644
--- a/plugins/rbac/src/components/RbacPage.tsx
+++ b/plugins/rbac/src/components/RbacPage.tsx
@@ -4,8 +4,8 @@ import { Content, Header, Page } from '@backstage/core-components';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 
 import { policyEntityReadPermission } from '@janus-idp/backstage-plugin-rbac-common';
+import { DeleteDialogContextProvider } from '@janus-idp/shared-react';
 
-import { DeleteDialogContextProvider } from './RolesList/DeleteDialogContext';
 import { RolesList } from './RolesList/RolesList';
 
 export const RbacPage = ({ useHeader = true }: { useHeader?: boolean }) => (
diff --git a/plugins/rbac/src/components/RolesList/DeleteDialogContext.tsx b/plugins/rbac/src/components/RolesList/DeleteDialogContext.tsx
deleted file mode 100644
index 28eda5f8ed3..00000000000
--- a/plugins/rbac/src/components/RolesList/DeleteDialogContext.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { createContext, useContext } from 'react';
-
-type DeleteDialogContextType = {
-  deleteRoleName: string;
-  setDeleteRoleName: (name: string) => void;
-  openDialog: boolean;
-  setOpenDialog: (open: boolean) => void;
-};
-
-export const DeleteDialogContext = createContext<DeleteDialogContextType>({
-  deleteRoleName: '',
-  setDeleteRoleName: () => {},
-  openDialog: false,
-  setOpenDialog: () => {},
-});
-
-export const DeleteDialogContextProvider = (props: any) => {
-  const [openDialog, setOpenDialog] = React.useState(false);
-  const [deleteRoleName, setDeleteRoleName] = React.useState('');
-
-  const deleteDialogContextProviderValue = React.useMemo(
-    () => ({ openDialog, setOpenDialog, deleteRoleName, setDeleteRoleName }),
-    [openDialog, setOpenDialog, deleteRoleName, setDeleteRoleName],
-  );
-  return (
-    <DeleteDialogContext.Provider value={deleteDialogContextProviderValue}>
-      {props.children}
-    </DeleteDialogContext.Provider>
-  );
-};
-export const useDeleteDialog = () => useContext(DeleteDialogContext);
diff --git a/plugins/rbac/src/components/RolesList/DeleteRole.test.tsx b/plugins/rbac/src/components/RolesList/DeleteRole.test.tsx
index cad5b6af7b9..c277352f648 100644
--- a/plugins/rbac/src/components/RolesList/DeleteRole.test.tsx
+++ b/plugins/rbac/src/components/RolesList/DeleteRole.test.tsx
@@ -2,13 +2,14 @@ import React from 'react';
 
 import { fireEvent, render, screen } from '@testing-library/react';
 
-import * as DeleteDialogContext from './DeleteDialogContext';
+import * as DeleteDialogContext from '@janus-idp/shared-react';
+
 import DeleteRole from './DeleteRole';
 
-jest.mock('./DeleteDialogContext', () => ({
+jest.mock('@janus-idp/shared-react', () => ({
   useDeleteDialog: jest.fn().mockReturnValue({
-    deleteRoleName: '',
-    setDeleteRoleName: jest.fn(),
+    deleteComponent: '',
+    setDeleteComponent: jest.fn(),
     openDialog: false,
     setOpenDialog: jest.fn(),
   }),
@@ -46,9 +47,9 @@ describe('DeleteRole', () => {
 
     fireEvent.click(screen.getByRole('button'));
 
-    const { setDeleteRoleName, setOpenDialog } =
+    const { setDeleteComponent, setOpenDialog } =
       DeleteDialogContext.useDeleteDialog();
-    expect(setDeleteRoleName).toHaveBeenCalledWith('Admin');
+    expect(setDeleteComponent).toHaveBeenCalledWith({ roleName: 'Admin' });
     expect(setOpenDialog).toHaveBeenCalledWith(true);
   });
 
diff --git a/plugins/rbac/src/components/RolesList/DeleteRole.tsx b/plugins/rbac/src/components/RolesList/DeleteRole.tsx
index 0b415fc2a94..77c0793a2a9 100644
--- a/plugins/rbac/src/components/RolesList/DeleteRole.tsx
+++ b/plugins/rbac/src/components/RolesList/DeleteRole.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { IconButton, Tooltip } from '@material-ui/core';
 import Delete from '@mui/icons-material/Delete';
 
-import { useDeleteDialog } from './DeleteDialogContext';
+import { useDeleteDialog } from '@janus-idp/shared-react';
 
 type DeleteRoleProps = {
   roleName: string;
@@ -18,10 +18,10 @@ const DeleteRole = ({
   disable,
   dataTestId,
 }: DeleteRoleProps) => {
-  const { setDeleteRoleName, setOpenDialog } = useDeleteDialog();
+  const { setDeleteComponent, setOpenDialog } = useDeleteDialog();
 
   const openDialog = (name: string) => {
-    setDeleteRoleName(name);
+    setDeleteComponent({ roleName: name });
     setOpenDialog(true);
   };
 
diff --git a/plugins/rbac/src/components/RolesList/RolesList.tsx b/plugins/rbac/src/components/RolesList/RolesList.tsx
index cdb783400e4..870f3b4d13c 100644
--- a/plugins/rbac/src/components/RolesList/RolesList.tsx
+++ b/plugins/rbac/src/components/RolesList/RolesList.tsx
@@ -4,6 +4,8 @@ import { Progress, Table, WarningPanel } from '@backstage/core-components';
 
 import { makeStyles } from '@material-ui/core';
 
+import { useDeleteDialog } from '@janus-idp/shared-react';
+
 import { useCheckIfLicensePluginEnabled } from '../../hooks/useCheckIfLicensePluginEnabled';
 import { useLocationToast } from '../../hooks/useLocationToast';
 import { useRoles } from '../../hooks/useRoles';
@@ -11,7 +13,6 @@ import { RolesData } from '../../types';
 import DownloadCSVLink from '../DownloadUserStatistics';
 import { SnackbarAlert } from '../SnackbarAlert';
 import { useToast } from '../ToastContext';
-import { useDeleteDialog } from './DeleteDialogContext';
 import DeleteRoleDialog from './DeleteRoleDialog';
 import { columns } from './RolesListColumns';
 import { RolesListToolbar } from './RolesListToolbar';
@@ -26,7 +27,7 @@ const useStyles = makeStyles(theme => ({
 
 export const RolesList = () => {
   const { toastMessage, setToastMessage } = useToast();
-  const { openDialog, setOpenDialog, deleteRoleName } = useDeleteDialog();
+  const { openDialog, setOpenDialog, deleteComponent } = useDeleteDialog();
   useLocationToast(setToastMessage);
   const [roles, setRoles] = React.useState<number | undefined>();
   const classes = useStyles();
@@ -113,12 +114,14 @@ export const RolesList = () => {
         <DeleteRoleDialog
           open={openDialog}
           closeDialog={closeDialog}
-          roleName={deleteRoleName}
+          roleName={deleteComponent.roleName}
           propOptions={{
             memberRefs:
-              data.find(d => d.name === deleteRoleName)?.members || [],
+              data.find(d => d.name === deleteComponent.roleName)?.members ||
+              [],
             permissions:
-              data.find(d => d.name === deleteRoleName)?.permissions || 0,
+              data.find(d => d.name === deleteComponent.roleName)
+                ?.permissions || 0,
           }}
         />
       )}
diff --git a/plugins/bulk-import/src/components/DeleteDialogContext.tsx b/plugins/shared-react/src/components/common/DeleteDialogContext.tsx
similarity index 94%
rename from plugins/bulk-import/src/components/DeleteDialogContext.tsx
rename to plugins/shared-react/src/components/common/DeleteDialogContext.tsx
index 637fcdf434f..5a89ab2e3fe 100644
--- a/plugins/bulk-import/src/components/DeleteDialogContext.tsx
+++ b/plugins/shared-react/src/components/common/DeleteDialogContext.tsx
@@ -1,5 +1,3 @@
-// Move this component to shared-react package RHIDP-3607
-
 import React, { createContext, useContext } from 'react';
 
 type DeleteDialogContextType = {
diff --git a/plugins/shared-react/src/components/common/DrawerContext.tsx b/plugins/shared-react/src/components/common/DrawerContext.tsx
new file mode 100644
index 00000000000..c9651aeaa9a
--- /dev/null
+++ b/plugins/shared-react/src/components/common/DrawerContext.tsx
@@ -0,0 +1,36 @@
+import React, { createContext, useContext } from 'react';
+
+type DrawerContextType = {
+  drawerData: any;
+  setDrawerData: (data: any) => void;
+  openDrawer: boolean;
+  setOpenDrawer: (open: boolean) => void;
+};
+
+export const DrawerContext = createContext<DrawerContextType>({
+  drawerData: {},
+  setDrawerData: () => {},
+  openDrawer: false,
+  setOpenDrawer: () => {},
+});
+
+export const DrawerContextProvider = (props: any) => {
+  const [openDrawer, setOpenDrawer] = React.useState(false);
+  const [drawerData, setDrawerData] = React.useState({});
+
+  const drawerContextProviderValue = React.useMemo(
+    () => ({
+      openDrawer,
+      setOpenDrawer,
+      drawerData,
+      setDrawerData,
+    }),
+    [openDrawer, setOpenDrawer, drawerData, setDrawerData],
+  );
+  return (
+    <DrawerContext.Provider value={drawerContextProviderValue}>
+      {props.children}
+    </DrawerContext.Provider>
+  );
+};
+export const useDrawer = () => useContext(DrawerContext);
diff --git a/plugins/shared-react/src/components/index.ts b/plugins/shared-react/src/components/index.ts
index 51205d74f6d..86e1ec2ed61 100644
--- a/plugins/shared-react/src/components/index.ts
+++ b/plugins/shared-react/src/components/index.ts
@@ -2,3 +2,13 @@ export { HorizontalStackedBars } from './pipeline/HorizontalStackedBars';
 export { CamelCaseWrap } from './common/CamelCaseWrap';
 export { TaskStatusTooltip } from './pipeline/TaskStatusTooltip';
 export { StatusIconAndText } from './common/StatusIconAndText';
+export {
+  DeleteDialogContextProvider,
+  DeleteDialogContext,
+  useDeleteDialog,
+} from './common/DeleteDialogContext';
+export {
+  DrawerContextProvider,
+  DrawerContext,
+  useDrawer,
+} from './common/DrawerContext';