diff --git a/src/app/Resources/Resources.tsx b/src/app/Resources/Resources.tsx
new file mode 100644
index 00000000..db009693
--- /dev/null
+++ b/src/app/Resources/Resources.tsx
@@ -0,0 +1,654 @@
+import React from 'react';
+import {
+  Badge,
+  Button,
+  Card,
+  CardHeader,
+  CardBody,
+  CardTitle,
+  Divider,
+  Drawer,
+  DrawerActions,
+  DrawerPanelBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerHead,
+  DrawerPanelContent,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  Flex,
+  FlexItem,
+  Gallery,
+  MenuToggle,
+  MenuToggleCheckbox,
+  PageSection,
+  PageSectionVariants,
+  Pagination,
+  Progress,
+  Select,
+  SelectList,
+  SelectOption,
+  TextContent,
+  Text,
+  Title,
+  Toolbar,
+  ToolbarFilter,
+  ToolbarItem,
+  ToolbarContent,
+  MenuToggleElement,
+} from '@patternfly/react-core';
+import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
+import pfIcon from '../../assets/pf-logo-small.svg';
+import activeMQIcon from '../../assets/activemq-core_200x150.png';
+import avroIcon from '../../assets/camel-avro_200x150.png';
+import dropBoxIcon from '../../assets/camel-dropbox_200x150.png';
+import infinispanIcon from '../../assets/camel-infinispan_200x150.png';
+import saxonIcon from '../../assets/camel-saxon_200x150.png';
+import sparkIcon from '../../assets/camel-spark_200x150.png';
+import swaggerIcon from '../../assets/camel-swagger-java_200x150.png';
+import azureIcon from '../../assets/FuseConnector_Icons_AzureServices.png';
+import restIcon from '../../assets/FuseConnector_Icons_REST.png';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
+
+export const PrimaryDetailCardView: React.FunctionComponent = () => {
+  const [totalItemCount, setTotalItemCount] = React.useState(10);
+  const [cardData, setCardData] = React.useState(data);
+  const [isChecked, setIsChecked] = React.useState(false);
+  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
+  const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
+  const [areAllSelected, setAreAllSelected] = React.useState<boolean>(false);
+  const [splitButtonDropdownIsOpen, setSplitButtonDropdownIsOpen] = React.useState(false);
+  const [isLowerToolbarDropdownOpen, setIsLowerToolbarDropdownOpen] = React.useState(false);
+  const [isLowerToolbarKebabDropdownOpen, setIsLowerToolbarKebabDropdownOpen] = React.useState(false);
+  const [page, setPage] = React.useState(1);
+  const [perPage, setPerPage] = React.useState(10);
+  const [filters, setFilters] = React.useState<Record<string, string[]>>({ products: [] });
+  const [state, setState] = React.useState({});
+  const [activeCard, setActiveCard] = React.useState(-1);
+
+  interface ProductType {
+    id: number;
+    name: string;
+    icon: string;
+    description: string;
+  }
+
+  const onToolbarDropdownToggle = () => {
+    setIsLowerToolbarDropdownOpen(!isLowerToolbarDropdownOpen);
+  };
+
+  const onToolbarKebabDropdownToggle = () => {
+    setIsLowerToolbarKebabDropdownOpen(!isLowerToolbarKebabDropdownOpen);
+  };
+
+  const onToolbarKebabDropdownSelect = () => {
+    setIsLowerToolbarKebabDropdownOpen(!isLowerToolbarKebabDropdownOpen);
+  };
+
+  const onCardKebabDropdownToggle = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.MouseEvent<HTMLDivElement, MouseEvent>,
+    key: string,
+  ) => {
+    setState({
+      [key]: !state[key as keyof Object],
+    });
+  };
+
+  const checkAllSelected = (selected: number, total: number) => {
+    if (selected && selected < total) {
+      return null;
+    }
+    return selected === total;
+  };
+
+  const onNameSelect = (event: any, selection = '') => {
+    const checked = event.target.checked;
+    const prevSelections = filters.products;
+
+    setFilters({
+      ...filters,
+      products: checked ? [...prevSelections, selection] : prevSelections.filter((value) => value !== selection),
+    });
+  };
+
+  const onDelete = (type = '', _id = '') => {
+    if (type) {
+      setFilters(filters);
+    } else {
+      setFilters({ products: [] });
+    }
+  };
+
+  const deleteItem = (item: ProductType) => {
+    const filter = (getter) => (val) => getter(val) !== item.id;
+
+    setCardData(cardData.filter(filter(({ id }) => id)));
+
+    setSelectedItems(selectedItems.filter(filter((id) => id)));
+
+    setTotalItemCount(totalItemCount - 1);
+    setIsDrawerExpanded(false);
+    setActiveCard(-1);
+  };
+
+  const onSetPage = (_event: any, pageNumber: number) => {
+    setPage(pageNumber);
+  };
+
+  const onPerPageSelect = (_event: any, perPage: number) => {
+    setPerPage(perPage);
+    setPage(1);
+  };
+
+  const onSplitButtonToggle = () => {
+    setSplitButtonDropdownIsOpen(!splitButtonDropdownIsOpen);
+  };
+
+  const onSplitButtonSelect = () => {
+    setSplitButtonDropdownIsOpen(false);
+    setIsDrawerExpanded(false);
+    setActiveCard(-1);
+  };
+
+  const onCloseDrawerClick = () => {
+    setActiveCard(-1);
+    setIsDrawerExpanded(false);
+  };
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    const name = event.currentTarget.name;
+    const productId = Number(name.charAt(name.length - 1));
+
+    if (selectedItems.includes(productId * 1)) {
+      setSelectedItems(selectedItems.filter((id) => productId * 1 !== id));
+
+      const checkAll = checkAllSelected(selectedItems.length - 1, totalItemCount);
+      setAreAllSelected(!!checkAll);
+    } else {
+      setSelectedItems([...selectedItems, productId * 1]);
+      const checkAll = checkAllSelected(selectedItems.length + 1, totalItemCount);
+      setAreAllSelected(!!checkAll);
+    }
+  };
+
+  const onCardClick = (productId) => {
+    if (productId === activeCard) {
+      setIsDrawerExpanded(!isDrawerExpanded);
+      setActiveCard(-1);
+    } else {
+      setActiveCard(productId);
+      setIsDrawerExpanded(true);
+    }
+  };
+
+  const selectPage = (e: { target: { checked: any } }) => {
+    const { checked } = e.target;
+    let collection: number[] = [];
+
+    collection = getAllItems();
+
+    setSelectedItems(collection);
+    setIsChecked(checked);
+    setAreAllSelected(totalItemCount === perPage ? true : false);
+
+    updateSelected();
+  };
+
+  const selectAll = () => {
+    let collection: number[] = [];
+    for (let i = 0; i <= 9; i++) {
+      collection = [...collection, i];
+    }
+
+    setSelectedItems(collection);
+    setIsChecked(true);
+    setAreAllSelected(true);
+
+    updateSelected();
+  };
+
+  const selectNone = () => {
+    setSelectedItems([]);
+    setIsChecked(false);
+    setAreAllSelected(false);
+    setIsDrawerExpanded(false);
+    setActiveCard(-1);
+
+    updateSelected();
+  };
+
+  const updateSelected = () => {
+    const rows = cardData.map((post) => {
+      post.selected = selectedItems.includes(post.id);
+      return post;
+    });
+
+    setCardData(rows);
+  };
+
+  const getAllItems = () => {
+    const collection: number[] = [];
+    for (const items of cardData) {
+      collection.push(items.id);
+    }
+
+    return collection;
+  };
+
+  const splitCheckboxSelectAll = (e: any) => {
+    let collection: number[] = [];
+
+    if (e.target.checked) {
+      for (let i = 0; i <= 9; i++) {
+        collection = [...collection, i];
+      }
+    }
+
+    setSelectedItems(collection);
+    setIsChecked(isChecked);
+    setAreAllSelected(e.target.checked);
+    setIsDrawerExpanded(false);
+    setActiveCard(-1);
+
+    updateSelected();
+  };
+
+  const renderPagination = () => {
+    const defaultPerPageOptions = [
+      {
+        title: '1',
+        value: 1,
+      },
+      {
+        title: '5',
+        value: 5,
+      },
+      {
+        title: '10',
+        value: 10,
+      },
+    ];
+
+    return (
+      <Pagination
+        itemCount={totalItemCount}
+        page={page}
+        perPage={perPage}
+        perPageOptions={defaultPerPageOptions}
+        onSetPage={onSetPage}
+        onPerPageSelect={onPerPageSelect}
+        variant="top"
+        isCompact
+      />
+    );
+  };
+
+  const buildSelectDropdown = () => {
+    const numSelected = selectedItems.length;
+    const anySelected = numSelected > 0;
+    const splitButtonDropdownItems = (
+      <>
+        <DropdownItem key="item-1" onClick={selectNone}>
+          Select none (0 items)
+        </DropdownItem>
+        <DropdownItem key="item-2" onClick={selectPage}>
+          Select page ({perPage} items)
+        </DropdownItem>
+        <DropdownItem key="item-3" onClick={selectAll}>
+          Select all ({totalItemCount} items)
+        </DropdownItem>
+      </>
+    );
+
+    return (
+      <Dropdown
+        onSelect={onSplitButtonSelect}
+        isOpen={splitButtonDropdownIsOpen}
+        onOpenChange={(isOpen) => setSplitButtonDropdownIsOpen(isOpen)}
+        toggle={(toggleRef) => (
+          <MenuToggle
+            ref={toggleRef}
+            isExpanded={splitButtonDropdownIsOpen}
+            onClick={onSplitButtonToggle}
+            aria-label="Select cards"
+            splitButtonOptions={{
+              items: [
+                <MenuToggleCheckbox
+                  id="split-dropdown-checkbox"
+                  key="split-dropdown-checkbox"
+                  aria-label={anySelected ? 'Deselect all cards' : 'Select all cards'}
+                  isChecked={areAllSelected}
+                  onClick={splitCheckboxSelectAll.bind(this)}
+                >
+                  {numSelected !== 0 && `${numSelected} selected`}
+                </MenuToggleCheckbox>,
+              ],
+            }}
+          ></MenuToggle>
+        )}
+      >
+        <DropdownList>{splitButtonDropdownItems}</DropdownList>
+      </Dropdown>
+    );
+  };
+
+  const buildFilterDropdown = () => {
+    const filterDropdownItems = (
+      <SelectList>
+        <SelectOption
+          hasCheckbox
+          key="patternfly"
+          value="PatternFly"
+          isSelected={filters.products.includes('PatternFly')}
+        >
+          PatternFly
+        </SelectOption>
+        <SelectOption hasCheckbox key="activemq" value="ActiveMQ" isSelected={filters.products.includes('ActiveMQ')}>
+          ActiveMQ
+        </SelectOption>
+        <SelectOption
+          hasCheckbox
+          key="apachespark"
+          value="Apache Spark"
+          isSelected={filters.products.includes('Apache Spark')}
+        >
+          Apache Spark
+        </SelectOption>
+        <SelectOption hasCheckbox key="avro" value="Avro" isSelected={filters.products.includes('Avro')}>
+          Avro
+        </SelectOption>
+        <SelectOption
+          hasCheckbox
+          key="azureservices"
+          value="Azure Services"
+          isSelected={filters.products.includes('Azure Services')}
+        >
+          Azure Services
+        </SelectOption>
+        <SelectOption hasCheckbox key="crypto" value="Crypto" isSelected={filters.products.includes('Crypto')}>
+          Crypto
+        </SelectOption>
+        <SelectOption hasCheckbox key="dropbox" value="DropBox" isSelected={filters.products.includes('DropBox')}>
+          DropBox
+        </SelectOption>
+        <SelectOption
+          hasCheckbox
+          key="jbossdatagrid"
+          value="JBoss Data Grid"
+          isSelected={filters.products.includes('JBoss Data Grid')}
+        >
+          JBoss Data Grid
+        </SelectOption>
+        <SelectOption hasCheckbox key="rest" value="REST" isSelected={filters.products.includes('REST')}>
+          REST
+        </SelectOption>
+        <SelectOption hasCheckbox key="swagger" value="SWAGGER" isSelected={filters.products.includes('SWAGGER')}>
+          SWAGGER
+        </SelectOption>
+      </SelectList>
+    );
+
+    return (
+      <ToolbarFilter
+        categoryName="Products"
+        chips={filters.products}
+        deleteChip={(type, id) => onDelete(type as string, id as string)}
+      >
+        <Select
+          aria-label="Products"
+          role="menu"
+          toggle={(toggleRef) => (
+            <MenuToggle ref={toggleRef} onClick={onToolbarDropdownToggle} isExpanded={isLowerToolbarDropdownOpen}>
+              Filter by creator name
+              {filters.products.length > 0 && <Badge isRead>{filters.products.length}</Badge>}
+            </MenuToggle>
+          )}
+          onSelect={(event, selection) => onNameSelect(event, selection?.toString())}
+          onOpenChange={(isOpen) => {
+            setIsLowerToolbarDropdownOpen(isOpen);
+          }}
+          selected={filters.products}
+          isOpen={isLowerToolbarDropdownOpen}
+        >
+          {filterDropdownItems}
+        </Select>
+      </ToolbarFilter>
+    );
+  };
+
+  const toolbarKebabDropdownItems = (
+    <>
+      <DropdownItem value={0} key="action">
+        Action
+      </DropdownItem>
+      <DropdownItem
+        value={1}
+        key="link"
+        to="#default-link2"
+        // Prevent the default onClick functionality for example purposes
+        onClick={(ev) => ev.preventDefault()}
+      >
+        Link
+      </DropdownItem>
+      <DropdownItem value={2} isDisabled key="disabled action">
+        Disabled Action
+      </DropdownItem>
+      <DropdownItem value={3} isDisabled key="disabled link" to="#default-link4">
+        Disabled Link
+      </DropdownItem>
+      <Divider component="li" key="separator" />
+      <DropdownItem value={4} key="separated action">
+        Separated Action
+      </DropdownItem>
+      <DropdownItem value={5} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
+        Separated Link
+      </DropdownItem>
+    </>
+  );
+  const toolbarItems = (
+    <React.Fragment>
+      <ToolbarItem>{buildSelectDropdown()}</ToolbarItem>
+      <ToolbarItem>{buildFilterDropdown()}</ToolbarItem>
+      <ToolbarItem>
+        <Button variant="primary">Create instance</Button>
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button variant="secondary">Action</Button>
+      </ToolbarItem>
+      <ToolbarItem>
+        <Dropdown
+          onSelect={onToolbarKebabDropdownSelect}
+          isOpen={isLowerToolbarKebabDropdownOpen}
+          onOpenChange={(isOpen) => setIsLowerToolbarKebabDropdownOpen(isOpen)}
+          toggle={(toggleRef) => (
+            <MenuToggle
+              ref={toggleRef}
+              isExpanded={isLowerToolbarKebabDropdownOpen}
+              variant="plain"
+              onClick={onToolbarKebabDropdownToggle}
+              aria-label="Toolbar actions"
+            >
+              <EllipsisVIcon aria-hidden="true" />
+            </MenuToggle>
+          )}
+        >
+          <DropdownList>{toolbarKebabDropdownItems}</DropdownList>
+        </Dropdown>
+      </ToolbarItem>
+      <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
+        {renderPagination()}
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  const filtered =
+    filters.products.length > 0
+      ? data.filter((card: { name: string }) => filters.products.length === 0 || filters.products.includes(card.name))
+      : cardData.slice((page - 1) * perPage, perPage === 1 ? page * perPage : page * perPage - 1);
+
+  const icons = {
+    pfIcon,
+    activeMQIcon,
+    sparkIcon,
+    avroIcon,
+    azureIcon,
+    saxonIcon,
+    dropBoxIcon,
+    infinispanIcon,
+    restIcon,
+    swaggerIcon,
+  };
+
+  const drawerContent = (
+    <Gallery hasGutter role="region" aria-label="Selectable card container">
+      {filtered.map((product, key) => (
+        <Card
+          key={product.name}
+          id={'card-view-' + key}
+          isClickable
+          isSelectable
+          isSelected={activeCard === product.id}
+        >
+          <CardHeader
+            actions={{
+              actions: (
+                <>
+                  <Dropdown
+                    isOpen={!!state[key] ?? false}
+                    onOpenChange={(isOpen) => setState({ [key]: isOpen })}
+                    popperProps={{ position: 'right' }}
+                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                      <MenuToggle
+                        ref={toggleRef}
+                        aria-label={`${product.name} actions`}
+                        variant="plain"
+                        onClick={(e) => {
+                          onCardKebabDropdownToggle(e, key.toString());
+                        }}
+                        isExpanded={!!state[key]}
+                      >
+                        <EllipsisVIcon />
+                      </MenuToggle>
+                    )}
+                  >
+                    <DropdownList>
+                      <DropdownItem
+                        key="trash"
+                        onClick={() => {
+                          deleteItem(product);
+                        }}
+                      >
+                        <TrashIcon />
+                        Delete
+                      </DropdownItem>
+                    </DropdownList>
+                  </Dropdown>
+                </>
+              ),
+            }}
+            selectableActions={{
+              isChecked: selectedItems.includes(product.id),
+              selectableActionId: `selectable-actions-item-${product.id}`,
+              selectableActionAriaLabelledby: `${'card-view-' + key}`,
+              name: `check-${product.id}`,
+              onChange,
+            }}
+          >
+            <img src={icons[product.icon]} alt={`${product.name} icon`} style={{ height: '50px' }} />
+          </CardHeader>
+          <CardTitle>
+            <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
+              <FlexItem>
+                <Button
+                  variant="link"
+                  isInline
+                  onClick={() => onCardClick(product.id)}
+                  aria-expanded={activeCard === product.id}
+                >
+                  {product.name}
+                </Button>
+              </FlexItem>
+              <FlexItem>
+                <TextContent>
+                  <Text component="small" className="pf-v5-u-color-200 pf-v5-u-font-family-text">
+                    Provided by Red Hat
+                  </Text>
+                </TextContent>
+              </FlexItem>
+            </Flex>
+          </CardTitle>
+
+          <CardBody>{product.description}</CardBody>
+        </Card>
+      ))}
+    </Gallery>
+  );
+
+  const panelContent = (
+    <DrawerPanelContent>
+      <DrawerHead>
+        <Title headingLevel="h2" size="xl">
+          node-{activeCard}
+        </Title>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseDrawerClick} />
+        </DrawerActions>
+      </DrawerHead>
+      <DrawerPanelBody>
+        <Flex spaceItems={{ default: 'spaceItemsLg' }} direction={{ default: 'column' }}>
+          <FlexItem>
+            <p>
+              The content of the drawer really is up to you. It could have form fields, definition lists, text lists,
+              labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and
+              can also make the drawer scrollable.
+            </p>
+          </FlexItem>
+          <FlexItem>
+            <Progress value={activeCard * 10} title="Title" />
+          </FlexItem>
+          <FlexItem>
+            <Progress value={activeCard * 5} title="Title" />
+          </FlexItem>
+        </Flex>
+      </DrawerPanelBody>
+    </DrawerPanelContent>
+  );
+
+  return (
+    <DashboardWrapper mainContainerId="main-content-card-view-default-nav" breadcrumb={null}>
+      <PageSection variant={PageSectionVariants.light}>
+        <TextContent>
+          <Text component="h1">Projects</Text>
+          <Text component="p">This is a demo that showcases Patternfly Cards.</Text>
+        </TextContent>
+      </PageSection>
+      <PageSection isFilled padding={{ default: 'noPadding' }}>
+        <Toolbar id="card-view-data-toolbar-group-types" usePageInsets clearAllFilters={onDelete}>
+          <ToolbarContent>{toolbarItems}</ToolbarContent>
+        </Toolbar>
+        <Divider component="div" />
+      </PageSection>
+      <PageSection isFilled padding={{ default: 'noPadding' }}>
+        <Drawer isExpanded={isDrawerExpanded} className={'pf-m-inline-on-2xl'}>
+          <DrawerContent panelContent={panelContent} colorVariant="no-background">
+            <DrawerContentBody hasPadding>{drawerContent}</DrawerContentBody>
+          </DrawerContent>
+        </Drawer>
+      </PageSection>
+      <PageSection isFilled={false} stickyOnBreakpoint={{ default: 'bottom' }} padding={{ default: 'noPadding' }}>
+        <Pagination
+          itemCount={filtered.length}
+          page={page}
+          perPage={perPage}
+          onPerPageSelect={onPerPageSelect}
+          onSetPage={onSetPage}
+          variant="bottom"
+        />
+      </PageSection>
+    </DashboardWrapper>
+  );
+};
diff --git a/src/app/Support/Support.tsx b/src/app/Support/Support.tsx
deleted file mode 100644
index a966d53e..00000000
--- a/src/app/Support/Support.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from 'react';
-import { CubesIcon } from '@patternfly/react-icons';
-import {
-  Button,
-  EmptyState,
-  EmptyStateActions,
-  EmptyStateBody,
-  EmptyStateFooter,
-  EmptyStateVariant,
-  PageSection,
-  Text,
-  TextContent,
-  TextVariants,
-} from '@patternfly/react-core';
-
-export interface ISupportProps {
-  sampleProp?: string;
-}
-
-// eslint-disable-next-line prefer-const
-let Support: React.FunctionComponent<ISupportProps> = () => (
-  <PageSection>
-    <EmptyState variant={EmptyStateVariant.full} titleText="Empty State (Stub Support Module)" icon={CubesIcon} >
-      <EmptyStateBody>
-        <TextContent>
-          <Text component="p">
-            This represents an the empty state pattern in Patternfly 4. Hopefully it&apos;s simple enough to use but
-            flexible enough to meet a variety of needs.
-          </Text>
-          <Text component={TextVariants.small}>
-            This text has overridden a css component variable to demonstrate how to apply customizations using
-            PatternFly&apos;s global variable API.
-          </Text>
-        </TextContent>
-      </EmptyStateBody><EmptyStateFooter>
-      <Button variant="primary">Primary Action</Button>
-      <EmptyStateActions>
-        <Button variant="link">Multiple</Button>
-        <Button variant="link">Action Buttons</Button>
-        <Button variant="link">Can</Button>
-        <Button variant="link">Go here</Button>
-        <Button variant="link">In the secondary</Button>
-        <Button variant="link">Action area</Button>
-      </EmptyStateActions>
-    </EmptyStateFooter></EmptyState>
-  </PageSection>
-);
-
-export { Support };
diff --git a/src/app/routes.tsx b/src/app/routes.tsx
index 4acb14ef..0a3c54b4 100644
--- a/src/app/routes.tsx
+++ b/src/app/routes.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Route, RouteComponentProps, Switch, useLocation } from 'react-router-dom';
 import { Dashboard } from '@app/Dashboard/Dashboard';
-import { Support } from '@app/Support/Support';
+import { PrimaryDetailCardView as Resources } from '@app/Resources/Resources';
 import { GeneralSettings } from '@app/Settings/General/GeneralSettings';
 import { ProfileSettings } from '@app/Settings/Profile/ProfileSettings';
 import { NotFound } from '@app/NotFound/NotFound';
@@ -35,11 +35,11 @@ const routes: AppRouteConfig[] = [
     title: 'PatternFly Seed | Main Dashboard',
   },
   {
-    component: Support,
+    component: Resources,
     exact: true,
-    label: 'Support',
-    path: '/support',
-    title: 'PatternFly Seed | Support Page',
+    label: 'Resources',
+    path: '/resources',
+    title: 'PatternFly Seed | Resources Page',
   },
   {
     label: 'Settings',
@@ -99,7 +99,7 @@ const PageNotFound = ({ title }: { title: string }) => {
 
 const flattenedRoutes: IAppRoute[] = routes.reduce(
   (flattened, route) => [...flattened, ...(route.routes ? route.routes : [route])],
-  [] as IAppRoute[]
+  [] as IAppRoute[],
 );
 
 const AppRoutes = (): React.ReactElement => (
diff --git a/src/assets/FuseConnector_Icons_AzureServices.png b/src/assets/FuseConnector_Icons_AzureServices.png
new file mode 100644
index 00000000..2b901285
Binary files /dev/null and b/src/assets/FuseConnector_Icons_AzureServices.png differ
diff --git a/src/assets/FuseConnector_Icons_REST.png b/src/assets/FuseConnector_Icons_REST.png
new file mode 100644
index 00000000..c37c95b5
Binary files /dev/null and b/src/assets/FuseConnector_Icons_REST.png differ
diff --git a/src/assets/activemq-core_200x150.png b/src/assets/activemq-core_200x150.png
new file mode 100644
index 00000000..b022627b
Binary files /dev/null and b/src/assets/activemq-core_200x150.png differ
diff --git a/src/assets/camel-avro_200x150.png b/src/assets/camel-avro_200x150.png
new file mode 100644
index 00000000..4114648d
Binary files /dev/null and b/src/assets/camel-avro_200x150.png differ
diff --git a/src/assets/camel-dropbox_200x150.png b/src/assets/camel-dropbox_200x150.png
new file mode 100644
index 00000000..4c623751
Binary files /dev/null and b/src/assets/camel-dropbox_200x150.png differ
diff --git a/src/assets/camel-infinispan_200x150.png b/src/assets/camel-infinispan_200x150.png
new file mode 100644
index 00000000..ad48236b
Binary files /dev/null and b/src/assets/camel-infinispan_200x150.png differ
diff --git a/src/assets/camel-saxon_200x150.png b/src/assets/camel-saxon_200x150.png
new file mode 100644
index 00000000..6b3110f7
Binary files /dev/null and b/src/assets/camel-saxon_200x150.png differ
diff --git a/src/assets/camel-spark_200x150.png b/src/assets/camel-spark_200x150.png
new file mode 100644
index 00000000..44ba1945
Binary files /dev/null and b/src/assets/camel-spark_200x150.png differ
diff --git a/src/assets/camel-swagger-java_200x150.png b/src/assets/camel-swagger-java_200x150.png
new file mode 100644
index 00000000..2134e75e
Binary files /dev/null and b/src/assets/camel-swagger-java_200x150.png differ
diff --git a/src/assets/index.d.ts b/src/assets/index.d.ts
new file mode 100644
index 00000000..cdb2b1a9
--- /dev/null
+++ b/src/assets/index.d.ts
@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
diff --git a/src/assets/pf-logo-small.svg b/src/assets/pf-logo-small.svg
new file mode 100644
index 00000000..44c09243
--- /dev/null
+++ b/src/assets/pf-logo-small.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="27px" viewBox="0 0 30 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 54 (76480) - https://sketchapp.com -->
+    <title>Group 12</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#7DC3E8" stop-opacity="0.600169362" offset="0%"></stop>
+            <stop stop-color="#007BBA" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Toolbar" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Toolbar-in-Card-View-w-Pagination-Example" transform="translate(-351.000000, -422.000000)" fill="url(#linearGradient-1)" fill-rule="nonzero">
+            <g id="Group-22" transform="translate(322.000000, 395.000000)">
+                <g id="Group-12" transform="translate(29.000000, 27.000000)">
+                    <g id="PF3-logomark-bold">
+                        <path d="M29.3047523,13.6067281 L14.8028311,0.0924998513 L14.6960566,0 L14.5601618,0.0924998513 L0.0873609707,13.6067281 L0,13.689978 L0.0679474216,13.7824778 L5.82406471,21.5709653 L5.88230536,21.6449652 L5.9793731,21.6449652 L10.2794742,20.7199667 L14.5601618,26.4364575 L14.6766431,26.5937073 L14.7931244,26.4364575 L19.0932255,20.6829668 L23.3836198,21.6079653 L23.4806876,21.6079653 L23.5389282,21.5339654 L29.3047523,13.7454779 L29.3726997,13.6529781 L29.3047523,13.6067281 Z M20.9957533,15.1699756 L21.5005056,16.2522239 L18.7826087,19.878218 L17.5789687,19.6192185 L20.9957533,15.1699756 Z M21.1607685,13.7454779 L16.0841254,2.77499554 L23.2186047,11.0999822 L21.1607685,13.7454779 Z M22.3255814,16.4002236 L22.3741153,16.3354737 L22.3741153,16.2614739 L21.5587462,14.5039767 L24.1116279,11.0999822 L24.1698686,11.0999822 L24.1019211,11.0167323 L18.9573306,5.01349194 L28.411729,13.8194778 L26.4703741,16.4002236 L23.1506572,20.8864664 L19.5494439,20.1002177 L22.3255814,16.4002236 Z M12.269363,20.2482175 L14.6669363,23.3747124 L14.7931244,23.5412122 L14.9096057,23.3747124 L17.1227503,20.2482175 L18.3166835,20.516467 L14.6960566,25.3634592 L11.0754297,20.516467 L12.269363,20.2482175 Z M12.871183,19.8227181 L14.6960566,2.88599536 L16.5015167,19.8227181 L14.7542973,22.2924642 L12.871183,19.8227181 Z M13.8418605,3.34849462 L12.1237614,18.8144698 L8.73609707,14.4207268 L13.8418605,3.34849462 Z M6.17350859,11.0999822 L13.3176946,2.77499554 L8.23134479,13.7454779 L6.17350859,11.0999822 Z M10.4347826,4.99499197 L5.29019211,10.9982323 L5.22224469,11.0999822 L5.29019211,11.183232 L7.88190091,14.5502266 L7.06653185,16.3077238 L7.06653185,16.3817237 L7.06653185,16.4464736 L9.79413549,20.1002177 L6.20262892,20.8864664 L0.970677452,13.7732279 L10.4347826,4.99499197 Z M11.8131446,19.6469684 L10.6095046,19.905968 L7.90131446,16.2522239 L8.39635996,15.1699756 L11.8131446,19.6469684 Z M15.5308392,3.34849462 L20.6463094,14.4484768 L17.2683519,18.8422197 L15.5308392,3.34849462 Z" id="Shape"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/stories/Support.stories.tsx b/stories/Support.stories.tsx
index bef4ae66..2c41bb7b 100644
--- a/stories/Support.stories.tsx
+++ b/stories/Support.stories.tsx
@@ -1,5 +1,5 @@
 import React, { ComponentProps } from 'react';
-import { Support } from '@app/Support/Support';
+import { Support } from '@app/Resources/Resources';
 import { Story } from '@storybook/react';
 
 //👇 This default export determines where your story goes in the story list