diff --git a/src/app/Pages/ImageDetails.tsx b/src/app/Pages/ImageDetails.tsx
index 4edc03f..997e44f 100644
--- a/src/app/Pages/ImageDetails.tsx
+++ b/src/app/Pages/ImageDetails.tsx
@@ -1,16 +1,16 @@
 import * as React from 'react'
 import {
-   PageSection, Bullseye, Text, TextContent, TextVariants,
+  PageSection, Bullseye, Text, TextContent, TextVariants,
   Card, CardTitle, CardBody, CardFooter
 } from '@patternfly/react-core'
 import { useDocumentTitle } from '@app/utils/useDocumentTitle'
 import Footer from '@app/components/Footer'
-import DetailsView from '@app/components/DetailsView'
+import { DetailsView } from '@app/components/DetailsView'
 import { useState, useEffect } from 'react'
 import { useParams } from 'react-router-dom'
 import fetch from 'cross-fetch'
 
-const ImageDetails: React.FunctionComponent<{title: string}> = ({title}) => {
+const ImageDetails: React.FunctionComponent<{ title: string }> = ({ title }) => {
   const [details, setDetails] = useState({})
   const { provider, region, imageName } = useParams()
   useDocumentTitle(title)
@@ -19,24 +19,24 @@ const ImageDetails: React.FunctionComponent<{title: string}> = ({title}) => {
     fetch(`https://imagedirectory.cloud/images/v1/${provider}/${region}/${imageName}`, {
       method: 'get',
     })
-    .then(res => res.json())
-    .then(details => setDetails(details))
+      .then(res => res.json())
+      .then(details => setDetails(details))
   }, [provider, region, imageName])
 
   return (
     <div>
       <PageSection isFilled={true}>
-      <Bullseye>
-        <Card
-          style={{
-            width: 800,
-            display: 'flex',
-            justifyContent: 'center',
-          }}>
-          <CardBody isFilled={false}>
-            {details['imageId'] ? <DetailsView details={{...details, provider: provider}} /> : <div>Loading....</div>}
-          </CardBody>
-        </Card>
+        <Bullseye>
+          <Card
+            style={{
+              width: 800,
+              display: 'flex',
+              justifyContent: 'center',
+            }}>
+            <CardBody isFilled={false}>
+              {details['imageId'] ? <DetailsView details={{ ...details, provider: provider }} /> : <div>Loading....</div>}
+            </CardBody>
+          </Card>
         </Bullseye>
       </PageSection>
       <Footer />
diff --git a/src/app/components/DetailsDrawer.tsx b/src/app/components/DetailsDrawer.tsx
new file mode 100644
index 0000000..aa052ca
--- /dev/null
+++ b/src/app/components/DetailsDrawer.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import {
+  DrawerPanelContent,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  Title,
+  Flex,
+  FlexItem,
+  Stack,
+  StackItem
+} from '@patternfly/react-core';
+import { MouseEventHandler } from 'react';
+import { DetailsView } from './DetailsView';
+
+export const DetailsDrawer: React.FunctionComponent<{
+  onCloseClick: MouseEventHandler,
+  isExpanded: Boolean,
+  drawerRef: any,
+  details: object,
+}> = ({ onCloseClick, isExpanded, drawerRef, details }) => {
+  return (
+    <React.Fragment>
+      <DrawerPanelContent minSize='33%'>
+        <DrawerHead>
+          <Stack hasGutter>
+            <StackItem>
+              <Flex alignItems={{
+                default: 'alignItemsCenter'
+              }}>
+                <FlexItem>
+                  <Title headingLevel='h1'>
+                    {details['name']}
+                  </Title>
+                </FlexItem>
+                <FlexItem align={{ default: 'alignRight' }}>
+                  <DrawerCloseButton onClick={onCloseClick} />
+                </FlexItem>
+              </Flex>
+            </StackItem>
+            <StackItem tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
+              <DetailsView details={details} />
+            </StackItem>
+          </Stack>
+        </DrawerHead>
+      </DrawerPanelContent>
+    </React.Fragment>
+  );
+};
diff --git a/src/app/components/DetailsView.tsx b/src/app/components/DetailsView.tsx
index 22ca644..281d05f 100644
--- a/src/app/components/DetailsView.tsx
+++ b/src/app/components/DetailsView.tsx
@@ -5,192 +5,219 @@ import {
   CodeBlock,
   CodeBlockAction,
   CodeBlockCode,
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription,
   TextContent,
-  TextList,
-  TextListItem,
+  Tabs,
+  Tab,
+  TabTitleText,
+  Title,
+  Stack,
+  StackItem
 } from '@patternfly/react-core';
 import { PlayIcon } from '@patternfly/react-icons';
 
-interface IImageModalProps {
-  details: object;
-}
+export const DetailsView: React.FunctionComponent<{ details: object }> = ({ details }) => {
+  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [copied, setCopied] = React.useState<boolean>(false);
 
-interface IImageModalState {
-  copied: boolean;
-}
+  const handleTabClick = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
 
-export default class DetailsView extends React.Component<IImageModalProps, IImageModalState> {
-  constructor(props) {
-    super(props);
 
-    this.state = {
-      copied: false,
-    };
+  const copyButton = (data: string) => {
+    return (
+      <React.Fragment>
+        <ClipboardCopyButton
+          id="basic-copy-button"
+          textId="code-content"
+          aria-label="Copy to clipboard"
+          onClick={() => {
+            navigator.clipboard.writeText(data);
+            setCopied(true)
+          }}
+          exitDelay={600}
+          maxWidth="110px"
+          variant="plain"
+        >
+          {copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'}
+        </ClipboardCopyButton>
+      </React.Fragment>
+    )
   }
 
-  render() {
-    const { copied } = this.state;
-
-    const { details } = this.props;
-
-    let cliCommand;
-    let shellUrl;
-    let displayItems = [
-      {
-        Title: 'Name',
-        Data: details['name'],
-      },
-      {
-        Title: 'Release Date',
-        Data: details['date'],
-      },
-      {
-        Title: 'Version',
-        Data: details['version'],
-      },
-      {
-        Title: 'Architecture',
-        Data: details['arch'],
-      },
-    ];
-    // Conditionally configure the content of the image details view
-    switch (details['provider']) {
-      case 'aws':
-        const instanceType: string = details['arch'] === 'x86_64' ? 't3.medium' : 't4g.medium';
-        cliCommand = `aws ec2 run-instances \\
+  let cliCommand;
+  let shellUrl;
+  let displayItems = [
+    {
+      Title: 'Cloud Provider',
+      Data: details['provider'],
+    },
+    {
+      Title: 'RHEL Version',
+      Data: details['version'],
+    },
+    {
+      Title: 'Release Date',
+      Data: new Date(details['date']).toDateString(),
+    },
+    {
+      Title: 'Architecture',
+      Data: details['arch'],
+    },
+  ];
+  // Conditionally configure the content of the image details view
+  switch (details['provider']) {
+    case 'aws':
+      const instanceType: string = details['arch'] === 'x86_64' ? 't3.medium' : 't4g.medium';
+      cliCommand = `aws ec2 run-instances \\
         --image-id ${details['imageId']} \\
         --count 1 \\
         --instance-type ${instanceType} \\
         --key-name <MyKeyPair> \\
         --security-group-ids <MySecurityGroupID>`;
-        shellUrl = 'https://console.aws.amazon.com/cloudshell/home';
-        displayItems.push(
-          {
-            Title: 'Image ID',
-            Data: details['imageId'],
-          },
-          {
-            Title: 'Region',
-            Data: details['region'],
-          }
-        );
-        break;
+      shellUrl = 'https://console.aws.amazon.com/cloudshell/home';
+      displayItems.push(
+        {
+          Title: 'Region',
+          Data: details['region'],
+        },
+        {
+          Title: 'Image ID',
+          Data: <span>{details['imageId']} {copyButton(details['imageId'])}</span>,
+        }
+      );
+      break;
 
-      case 'azure':
-        const urnParts = details['imageId'].split(':');
-        const offer = urnParts[1];
-        const sku = urnParts[2];
-        cliCommand = `az vm create -n <MachineName> -g <ResourceGroup> --image ${details['imageId']}`;
-        shellUrl = 'https://portal.azure.com/';
-        displayItems.push(
-          {
-            Title: 'Urn',
-            Data: details['imageId'],
-          },
-          {
-            Title: 'Offer',
-            Data: offer,
-          },
-          {
-            Title: 'Sku',
-            Data: sku,
-          }
-        );
-        break;
+    case 'azure':
+      const urnParts = details['imageId'].split(':');
+      const offer = urnParts[1];
+      const sku = urnParts[2];
+      cliCommand = `az vm create -n <MachineName> -g <ResourceGroup> --image ${details['imageId']}`;
+      shellUrl = 'https://portal.azure.com/';
+      displayItems.push(
+        {
+          Title: 'Urn',
+          Data: <span>{details['imageId']} {copyButton(details['imageId'])}</span>,
+        },
+        {
+          Title: 'Offer',
+          Data: offer,
+        },
+        {
+          Title: 'Sku',
+          Data: sku,
+        }
+      );
+      break;
 
-      case 'google':
-        const image_path = details['selflink'].split('projects')[1];
-        cliCommand = `gcloud beta compute instances create <MachineName> \\
+    case 'google':
+      cliCommand = `gcloud beta compute instances create <MachineName> \\
         --machine-typei=e2-medium \\
         --subnet=default \\
-        --image="https://www.googleapis.com/compute/v1/projects${image_path}" \\
-        --boot-disk-device-name=<MachineName> \\
-        --project <ProjectName>`;
-        shellUrl = 'https://shell.cloud.google.com/?show=terminal';
-        displayItems.push({
-          Title: 'Image ID',
-          Data: details['imageId'],
-        });
-        break;
+        ---image="${details['imageId']}" \\
+        ---boot-disk-device-name=<MachineName> \\
+        ---project <ProjectName>`;
+      shellUrl = 'https://shell.cloud.google.com/?show=terminal';
+      displayItems.push({
+        Title: 'Image ID',
+        Data: <span>{details['imageId']} {copyButton(details['imageId'])}</span>,
+      });
+      break;
 
-      default:
-        break;
-    }
-
-    return (
-      <React.Fragment>
-        <TextContent id="test1" className="pf-u-py-xl">
-          <h1>Image Details</h1>
-        </TextContent>
-        <TextContent id="test2" className="pf-u-py-xl">
-          <TextList component="dl">
-            {displayItems.map((item, index) => {
-              return (
-                <div key={`menu-details-${item.Title}-${index}`}>
-                  <TextListItem key={`menu-title-${item.Title}-${index}`} component="dt">
-                    {item.Title}
-                  </TextListItem>
-                  <TextListItem key={`menu-data-${item.Title}-${index}`} component="dd">
-                    {item.Data}
-                  </TextListItem>
-                </div>
-              );
-            })}
-          </TextList>
-          {details['provider'] != 'azure' && (
-            <Button component="a" href={details['selflink']} target="_blank" rel="noreferrer" variant="danger">
-              Launch now
-            </Button>
-          )}
-        </TextContent>
+    default:
+      break;
+  }
 
-        <TextContent id="test1" className="pf-u-py-xl">
-          <br></br>
-        </TextContent>
-        <TextContent id="test1" className="pf-u-py-xl">
-          <h1>Optional: Launch from CLI</h1>
-        </TextContent>
-        <TextContent id="test1" className="pf-u-py-xl">
-          <br></br>
-        </TextContent>
-        <CodeBlock
-          actions={
-            <>
-              <CodeBlockAction>
-                <ClipboardCopyButton
-                  id="basic-copy-button"
-                  textId="code-content"
-                  aria-label="Copy to clipboard"
-                  onClick={() => {
-                    navigator.clipboard.writeText(cliCommand);
-                  }}
-                  exitDelay={600}
-                  maxWidth="110px"
-                  variant="plain"
-                >
-                  {copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'}
-                </ClipboardCopyButton>
-              </CodeBlockAction>
-              <CodeBlockAction>
-                <Button
-                  variant="plain"
-                  aria-label="Play icon"
-                  component="a"
-                  href={shellUrl}
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  <PlayIcon />
+  return (
+    <React.Fragment>
+      <Tabs
+        isFilled
+        activeKey={activeTabKey}
+        onSelect={handleTabClick}
+        isBox={true}
+        aria-label="Cloud image details view"
+        role="region"
+      >
+        <Tab eventKey={0} title={<TabTitleText>Image Details</TabTitleText>} aria-label="Show RHEL cloud image details">
+          <Stack hasGutter>
+            <StackItem>
+              <Title headingLevel='h3'>
+                {'Image Details'}
+              </Title>
+            </StackItem>
+            <StackItem>
+              <DescriptionList columnModifier={{
+                sm: '1Col',
+                lg: '2Col',
+                xl: '2Col'
+              }}>
+                {displayItems.map((item, index) => {
+                  return (
+                    <DescriptionListGroup key={`description-list-group-${item.Title}-${index}`}>
+                      <DescriptionListTerm key={`description-list-term-${item.Title}-${index}`}>{item.Title}</DescriptionListTerm>
+                      <DescriptionListDescription>{item.Data}</DescriptionListDescription>
+                    </DescriptionListGroup>
+                  );
+                })}
+              </DescriptionList>
+            </StackItem>
+            <StackItem>
+              {details['provider'] != 'azure' && (
+                <Button component="a" href={details['selflink']} target="_blank" rel="noreferrer" style={{
+                  color: 'pf-color-blue-400'
+                }} isLarge>
+                  Launch now
                 </Button>
-              </CodeBlockAction>
-            </>
-          }
-        >
-          <CodeBlockCode id="code-content">
-            <TextContent>{cliCommand}</TextContent>
-          </CodeBlockCode>
-        </CodeBlock>
-      </React.Fragment>
-    );
-  }
+              )}
+            </StackItem>
+          </Stack>
+        </Tab>
+
+        <Tab eventKey={1} title={<TabTitleText>Launch from CLI</TabTitleText>} aria-label={`Run RHEL cloud image on ${details['provider']}`}>
+          <Stack hasGutter>
+            <StackItem>
+              <Title headingLevel='h3'>
+                {'Example CLI Command'}
+              </Title>
+            </StackItem>
+            <StackItem>
+              <CodeBlock
+                actions={
+                  <>
+                    <CodeBlockAction>
+                      {copyButton(cliCommand)}
+                    </CodeBlockAction>
+                    <CodeBlockAction>
+                      <Button
+                        variant="plain"
+                        aria-label="Play icon"
+                        component="a"
+                        href={shellUrl}
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        <PlayIcon />
+                      </Button>
+                    </CodeBlockAction>
+                  </>
+                }
+              >
+                <CodeBlockCode id="code-content">
+                  <TextContent>{cliCommand}</TextContent>
+                </CodeBlockCode>
+              </CodeBlock>
+            </StackItem>
+          </Stack>
+        </Tab>
+      </Tabs>
+    </React.Fragment >
+  );
+
 }
diff --git a/src/app/components/ImageTable.tsx b/src/app/components/ImageTable.tsx
index ebc84df..edd8e49 100644
--- a/src/app/components/ImageTable.tsx
+++ b/src/app/components/ImageTable.tsx
@@ -1,8 +1,19 @@
 import React, { useEffect } from 'react';
-import { SearchInput, Title, Toolbar, ToolbarContent, ToolbarItem, Pagination } from '@patternfly/react-core';
+import {
+  SearchInput,
+  Title,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
+  Pagination,
+  Drawer,
+  DrawerContent,
+  DrawerContentBody,
+  Button
+} from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, ThProps, Tbody, Td } from '@patternfly/react-table';
 import { fetch } from 'cross-fetch'
-
+import { DetailsDrawer } from './DetailsDrawer';
 interface ImageData {
   name: string;
   version: string;
@@ -22,6 +33,23 @@ export const ImageTable: React.FunctionComponent = () => {
   const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | undefined>(undefined);
   const [page, setPage] = React.useState(1);
   const [perPage, setPerPage] = React.useState(20);
+  const [isDrawerExpanded, setIsExpanded] = React.useState(false);
+  const [selectedImage, setSelectedImage] = React.useState({});
+  const drawerRef = React.useRef<HTMLDivElement>();
+
+  const onDrawerExpand = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
+
+  const onDrawerOpenClick = (details: object) => {
+    setIsExpanded(true);
+    setSelectedImage(details)
+  };
+
+  const onDrawerCloseClick = () => {
+    setIsExpanded(false);
+  };
+
   const columnNames = {
     name: 'Name',
     provider: 'Provider',
@@ -45,6 +73,7 @@ export const ImageTable: React.FunctionComponent = () => {
   }
 
   const handleSearch = (event) => {
+    setIsExpanded(false);
     setSearch(event.target.value);
     setPage(1);
   };
@@ -67,6 +96,7 @@ export const ImageTable: React.FunctionComponent = () => {
   };
 
   const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
+    setIsExpanded(false);
     setPage(newPage);
   };
 
@@ -105,6 +135,15 @@ export const ImageTable: React.FunctionComponent = () => {
       }
     });
   }
+
+  const panelContent = (
+    <DetailsDrawer
+      onCloseClick={onDrawerCloseClick}
+      drawerRef={drawerRef}
+      isExpanded={isDrawerExpanded}
+      details={selectedImage} />
+  );
+
   return (
     <React.Fragment>
       <Title headingLevel='h1'>Browse Images</Title>
@@ -132,33 +171,50 @@ export const ImageTable: React.FunctionComponent = () => {
           </ToolbarItem>
         </ToolbarContent>
       </Toolbar>
-      <Table
-        aria-label="RHEL Cloud Images"
-        variant={'compact'}
-      >
-        <Thead>
-          <Tr>
-            <Th sort={getSortParams(0)}>{columnNames.name}</Th>
-            <Th sort={getSortParams(1)}>{columnNames.provider}</Th>
-            <Th sort={getSortParams(2)}>{columnNames.region}</Th>
-            <Th sort={getSortParams(3)}>{columnNames.arch}</Th>
-            <Th sort={getSortParams(4)}>{columnNames.date}</Th>
-            <Th></Th>
-          </Tr>
-        </Thead>
-        <Tbody>
-          {sortedImageData.map((image: ImageData) => (
-            <Tr key={image.name}>
-              <Td dataLabel={columnNames.name}>{image.name}</Td>
-              <Td dataLabel={columnNames.provider}>{image.provider}</Td>
-              <Td dataLabel={columnNames.region}>{image.region}</Td>
-              <Td dataLabel={columnNames.arch}>{image.arch}</Td>
-              <Td dataLabel={columnNames.date}><p>{new Date(image.date).toDateString()}</p></Td>
-              <Td>{<a href=''>Launch now</a>}</Td>
-            </Tr>
-          ))}
-        </Tbody>
-      </Table>
+
+      <Drawer isExpanded={isDrawerExpanded} position="right" onExpand={onDrawerExpand}>
+        <DrawerContent panelContent={panelContent}>
+          <DrawerContentBody>
+
+            <Table
+              aria-label="RHEL Cloud Images"
+              variant={'compact'}
+            >
+              <Thead>
+                <Tr>
+                  <Th sort={getSortParams(0)}>{columnNames.name}</Th>
+                  <Th sort={getSortParams(1)}>{columnNames.provider}</Th>
+                  <Th sort={getSortParams(2)}>{columnNames.region}</Th>
+                  <Th sort={getSortParams(3)}>{columnNames.arch}</Th>
+                  <Th sort={getSortParams(4)}>{columnNames.date}</Th>
+                  <Th></Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {sortedImageData.map((image: ImageData) => (
+                  <Tr key={image.name}>
+                    <Td dataLabel={columnNames.name}>{image.name}</Td>
+                    <Td dataLabel={columnNames.provider}>{image.provider}</Td>
+                    <Td dataLabel={columnNames.region}>{image.region}</Td>
+                    <Td dataLabel={columnNames.arch}>{image.arch}</Td>
+                    <Td dataLabel={columnNames.date}><p>{new Date(image.date).toDateString()}</p></Td>
+                    <Td>
+                      <Button
+                        aria-expanded={isDrawerExpanded}
+                        onClick={e => onDrawerOpenClick(image)}
+                        variant='link'
+                        isInline>
+                        Launch now
+                      </Button>
+                    </Td>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
+          </DrawerContentBody>
+        </DrawerContent>
+      </Drawer>
+
       <Toolbar id="toolbar-bottom">
         <ToolbarContent>
           <ToolbarItem alignment={{