diff --git a/client/src/components/App/App.tsx b/client/src/components/App/App.tsx
index e77059783..4cba8cc75 100644
--- a/client/src/components/App/App.tsx
+++ b/client/src/components/App/App.tsx
@@ -56,10 +56,6 @@ const App: FC<unknown> = () => {
     }
   };
 
-  if (!testSuites || testSuites.length === 0) {
-    return <></>;
-  }
-
   return (
     <SnackbarProvider
       dense
diff --git a/client/src/components/App/Router.tsx b/client/src/components/App/Router.tsx
index 5002e368d..7b51fa4e3 100644
--- a/client/src/components/App/Router.tsx
+++ b/client/src/components/App/Router.tsx
@@ -1,20 +1,23 @@
 import React from 'react';
 import { createBrowserRouter } from 'react-router-dom';
+import Page from '~/components/App/Page';
 import LandingPage from '~/components/LandingPage';
 import SuiteOptionsPage from '~/components/SuiteOptionsPage';
 import TestSessionWrapper from '~/components/TestSuite/TestSessionWrapper';
+import LandingPageSkeleton from '~/components/Skeletons/LandingPageSkeleton';
+import SuiteOptionsPageSkeleton from '~/components/Skeletons/SuiteOptionsPageSkeleton';
 import { basePath } from '~/api/infernoApiService';
-import Page from '~/components/App/Page';
 import { TestSuite } from '~/models/testSuiteModels';
 
 export const router = (testSuites: TestSuite[]) => {
+  const testSuitesExist = !!testSuites && testSuites.length > 0;
   return createBrowserRouter(
     [
       {
         path: '/',
         element: (
           <Page title={`Inferno Test Suites`}>
-            <LandingPage testSuites={testSuites} />
+            {testSuitesExist ? <LandingPage testSuites={testSuites} /> : <LandingPageSkeleton />}
           </Page>
         ),
       },
@@ -22,10 +25,10 @@ export const router = (testSuites: TestSuite[]) => {
         path: ':test_suite_id',
         element: <Page title="Options" />,
         loader: ({ params }) => {
-          if (testSuites.length === 0) return <></>;
+          if (!testSuitesExist) return <SuiteOptionsPageSkeleton />;
           const suiteId: string = params.test_suite_id || '';
           const suite = testSuites.find((suite) => suite.id === suiteId);
-          return <SuiteOptionsPage testSuite={suite} />;
+          return suite ? <SuiteOptionsPage testSuite={suite} /> : <SuiteOptionsPageSkeleton />;
         },
       },
       {
diff --git a/client/src/components/LandingPage/LandingPage.tsx b/client/src/components/LandingPage/LandingPage.tsx
index 3d3435d7b..265611e28 100644
--- a/client/src/components/LandingPage/LandingPage.tsx
+++ b/client/src/components/LandingPage/LandingPage.tsx
@@ -15,6 +15,7 @@ import infernoLogo from '~/images/inferno_logo.png';
 import SelectionPanel from '~/components/_common/SelectionPanel/SelectionPanel';
 import lightTheme from '~/styles/theme';
 import useStyles from './styles';
+import SelectionSkeleton from '../Skeletons/SelectionSkeletion';
 
 export interface LandingPageProps {
   testSuites: TestSuite[] | undefined;
@@ -128,17 +129,24 @@ const LandingPage: FC<LandingPageProps> = ({ testSuites }) => {
         py={4}
         sx={{ backgroundColor: lightTheme.palette.common.grayLightest }}
       >
-        <SelectionPanel
-          title="Test Suites"
-          options={(testSuites || []).sort((testSuite1: TestSuite, testSuite2: TestSuite): number =>
-            testSuite1.title.localeCompare(testSuite2.title)
-          )}
-          setSelection={setSelected}
-          submitAction={() =>
-            startTestingClick(testSuites?.find((suite: TestSuite) => suite.id === testSuiteChosen))
-          }
-          submitText="Select Suite"
-        />
+        {testSuites ? (
+          <SelectionPanel
+            title="Test Suites"
+            options={(testSuites || []).sort(
+              (testSuite1: TestSuite, testSuite2: TestSuite): number =>
+                testSuite1.title.localeCompare(testSuite2.title)
+            )}
+            setSelection={setSelected}
+            submitAction={() =>
+              startTestingClick(
+                testSuites?.find((suite: TestSuite) => suite.id === testSuiteChosen)
+              )
+            }
+            submitText="Select Suite"
+          />
+        ) : (
+          <SelectionSkeleton />
+        )}
       </Box>
     </Container>
   );
diff --git a/client/src/components/Skeletons/AppSkeleton.tsx b/client/src/components/Skeletons/AppSkeleton.tsx
index 1c853761d..104b7d1f1 100644
--- a/client/src/components/Skeletons/AppSkeleton.tsx
+++ b/client/src/components/Skeletons/AppSkeleton.tsx
@@ -11,7 +11,7 @@ const AppSkeleton: FC<Record<string, never>> = () => {
   const windowIsSmall = useAppStore((state) => state.windowIsSmall);
 
   return (
-    <Box className={classes.testSuiteMain}>
+    <Box className={classes.testSuiteMain} data-testid="appSkeleton">
       <DrawerSkeleton />
       <main
         style={{
diff --git a/client/src/components/Skeletons/DrawerSkeleton.tsx b/client/src/components/Skeletons/DrawerSkeleton.tsx
index 52549b0b5..a9b4b8a62 100644
--- a/client/src/components/Skeletons/DrawerSkeleton.tsx
+++ b/client/src/components/Skeletons/DrawerSkeleton.tsx
@@ -33,7 +33,12 @@ const DrawerSkeleton: FC<Record<string, never>> = () => {
   return windowIsSmall ? (
     <></>
   ) : (
-    <Drawer variant="permanent" anchor="left" classes={{ paper: drawerClasses.drawerPaper }}>
+    <Drawer
+      variant="permanent"
+      anchor="left"
+      classes={{ paper: drawerClasses.drawerPaper }}
+      data-testid="drawerSkeleton"
+    >
       <Skeleton variant="rounded" height={32} sx={{ m: 2 }} />
       <Divider />
       <Box className={treeClasses.testSuiteTreePanel} py={1}>
diff --git a/client/src/components/Skeletons/FooterSkeleton.tsx b/client/src/components/Skeletons/FooterSkeleton.tsx
index bc90e6056..c4b4f67fd 100644
--- a/client/src/components/Skeletons/FooterSkeleton.tsx
+++ b/client/src/components/Skeletons/FooterSkeleton.tsx
@@ -16,6 +16,7 @@ const FooterSkeleton: FC<Record<string, never>> = () => {
         maxHeight: `${footerHeight}px`,
         backgroundColor: 'white',
       }}
+      data-testid="footerSkeleton"
     >
       <Box display="flex" flexDirection="row" justifyContent="space-between" width="100%">
         <Box display="flex" alignItems="center" px={2}>
diff --git a/client/src/components/Skeletons/HeaderSkeleton.tsx b/client/src/components/Skeletons/HeaderSkeleton.tsx
index 75598cfef..3328c717f 100644
--- a/client/src/components/Skeletons/HeaderSkeleton.tsx
+++ b/client/src/components/Skeletons/HeaderSkeleton.tsx
@@ -16,6 +16,7 @@ const HeaderSkeleton: FC<Record<string, never>> = () => {
         minHeight: `${headerHeight}px`, // For responsive screens
         maxHeight: `${headerHeight}px`, // For responsive screens
       }}
+      data-testid="headerSkeleton"
     >
       <Toolbar className={classes.toolbar}>
         {/* Home button */}
diff --git a/client/src/components/Skeletons/LandingPageSkeleton.tsx b/client/src/components/Skeletons/LandingPageSkeleton.tsx
new file mode 100644
index 000000000..1229b2ab9
--- /dev/null
+++ b/client/src/components/Skeletons/LandingPageSkeleton.tsx
@@ -0,0 +1,65 @@
+import React, { FC } from 'react';
+import { Box, Container, Skeleton } from '@mui/material';
+import { useAppStore } from '~/store/app';
+import SelectionSkeleton from '~/components/Skeletons/SelectionSkeletion';
+import useStyles from '~/components/LandingPage/styles';
+import lightTheme from '~/styles/theme';
+
+const LandingPageSkeleton: FC<Record<string, never>> = () => {
+  const { classes } = useStyles();
+  const windowIsSmall = useAppStore((state) => state.windowIsSmall);
+
+  return (
+    <Container className={classes.main} data-testid="landingPageSkeleton">
+      <Box
+        display="flex"
+        flexDirection="column"
+        justifyContent={windowIsSmall ? 'center' : 'flex-end'}
+        alignItems="center"
+        px={2}
+      >
+        <Box
+          display="flex"
+          flexDirection="column"
+          my={2}
+          alignItems="center"
+          justifyContent="center"
+        >
+          <Skeleton variant="rounded" height={70} width={250} style={{ margin: '32px' }} />
+          <Skeleton
+            variant="rounded"
+            height={40}
+            width={windowIsSmall ? 200 : 400}
+            style={{ margin: '8px' }}
+          />
+        </Box>
+        <Box mb={2} alignItems="center">
+          <Skeleton
+            variant="rounded"
+            height={20}
+            width={windowIsSmall ? 250 : 500}
+            style={{ margin: '8px' }}
+          />
+          <Skeleton
+            variant="rounded"
+            height={20}
+            width={windowIsSmall ? 250 : 500}
+            style={{ margin: '8px' }}
+          />
+        </Box>
+      </Box>
+      <Box
+        display="flex"
+        flexDirection="column"
+        alignItems="center"
+        width="100%"
+        py={4}
+        sx={{ backgroundColor: lightTheme.palette.common.grayLightest }}
+      >
+        <SelectionSkeleton />
+      </Box>
+    </Container>
+  );
+};
+
+export default LandingPageSkeleton;
diff --git a/client/src/components/Skeletons/SelectionSkeletion.tsx b/client/src/components/Skeletons/SelectionSkeletion.tsx
new file mode 100644
index 000000000..60d441afe
--- /dev/null
+++ b/client/src/components/Skeletons/SelectionSkeletion.tsx
@@ -0,0 +1,48 @@
+import React, { FC } from 'react';
+import { Box, Paper, Skeleton } from '@mui/material';
+import { useAppStore } from '~/store/app';
+import useStyles from '~/components/_common/SelectionPanel/styles';
+
+const SelectionSkeleton: FC<Record<string, never>> = () => {
+  const { classes } = useStyles();
+  const windowIsSmall = useAppStore((state) => state.windowIsSmall);
+  const optionCount = 3;
+
+  const optionSkeleton = (
+    <Skeleton
+      variant="rounded"
+      height={10}
+      width={windowIsSmall ? 200 : 300}
+      style={{ margin: '32px' }}
+    />
+  );
+
+  const skeletonList = [];
+  for (let index = 0; index < optionCount; index++) {
+    skeletonList.push(<div key={index}>{optionSkeleton}</div>);
+  }
+
+  return (
+    <Box display="flex" data-testid="selectionSkeleton">
+      <Paper
+        elevation={0}
+        className={classes.optionsList}
+        sx={{ width: windowIsSmall ? 'auto' : '400px', maxWidth: '400px' }}
+      >
+        <Box display="flex" alignItems="center" justifyContent={'center'} mx={1}>
+          <Skeleton variant="rounded" height={30} width={150} style={{ marginTop: '16px' }} />
+        </Box>
+
+        <Box px={2} pb={2}>
+          {skeletonList}
+        </Box>
+
+        <Box px={2}>
+          <Skeleton variant="rounded" height={40} />
+        </Box>
+      </Paper>
+    </Box>
+  );
+};
+
+export default SelectionSkeleton;
diff --git a/client/src/components/Skeletons/SuiteOptionsPageSkeleton.tsx b/client/src/components/Skeletons/SuiteOptionsPageSkeleton.tsx
new file mode 100644
index 000000000..fa2229b16
--- /dev/null
+++ b/client/src/components/Skeletons/SuiteOptionsPageSkeleton.tsx
@@ -0,0 +1,64 @@
+import React, { FC } from 'react';
+import { Box, Container, Skeleton } from '@mui/material';
+import { useAppStore } from '~/store/app';
+import SelectionSkeleton from '~/components/Skeletons/SelectionSkeletion';
+import useStyles from '~/components/SuiteOptionsPage/styles';
+import lightTheme from '~/styles/theme';
+
+const SuiteOptionsPageSkeleton: FC<Record<string, never>> = () => {
+  const { classes } = useStyles();
+  const windowIsSmall = useAppStore((state) => state.windowIsSmall);
+  const textLineCount = 10;
+
+  const textLineSkeleton = (
+    <Skeleton
+      variant="rounded"
+      height={10}
+      width={windowIsSmall ? 300 : 400}
+      style={{ margin: '8px' }}
+    />
+  );
+
+  const skeletonList = [];
+  for (let index = 0; index < textLineCount; index++) {
+    skeletonList.push(<div key={index}>{textLineSkeleton}</div>);
+  }
+
+  return (
+    <Container
+      className={classes.main}
+      sx={{ flexDirection: windowIsSmall ? '' : 'column' }}
+      data-testid="suiteOptionsPageSkeleton"
+    >
+      <Box
+        display="flex"
+        flexDirection="column"
+        justifyContent="center"
+        alignItems="center"
+        px={windowIsSmall ? 0 : 8}
+        my={3}
+      >
+        <Box display="flex" alignItems="center" m={4}>
+          <Skeleton variant="rounded" height={40} width={windowIsSmall ? 200 : 350} />
+        </Box>
+        <Box display="flex" flexDirection="column" justifyContent="center" px={2} mb={3}>
+          {skeletonList}
+        </Box>
+      </Box>
+      <Box
+        display="flex"
+        height={windowIsSmall ? 'none' : '100%'}
+        width={windowIsSmall ? '100%' : 'none'}
+        justifyContent="center"
+        alignItems="center"
+        sx={{ backgroundColor: lightTheme.palette.common.grayLightest }}
+      >
+        <Box display="flex" justifyContent="center" m={3}>
+          <SelectionSkeleton />
+        </Box>
+      </Box>
+    </Container>
+  );
+};
+
+export default SuiteOptionsPageSkeleton;
diff --git a/client/src/components/Skeletons/TestSessionSkeleton.tsx b/client/src/components/Skeletons/TestSessionSkeleton.tsx
index caee8e665..a83cc4ad9 100644
--- a/client/src/components/Skeletons/TestSessionSkeleton.tsx
+++ b/client/src/components/Skeletons/TestSessionSkeleton.tsx
@@ -34,7 +34,7 @@ const TestSessionSkeleton: FC<Record<string, never>> = () => {
   }
 
   return (
-    <Card variant="outlined" sx={{ mb: 3 }}>
+    <Card variant="outlined" sx={{ mb: 3 }} data-testid="testSessionSkeleton">
       <Box className={classes.testGroupCardHeader}>
         <Skeleton variant="circular" height={24} width={24} />
         <span className={classes.testGroupCardHeaderText}>
diff --git a/client/src/components/Skeletons/__tests__/Skeletons.test.tsx b/client/src/components/Skeletons/__tests__/Skeletons.test.tsx
index f19f38be1..5452dda99 100644
--- a/client/src/components/Skeletons/__tests__/Skeletons.test.tsx
+++ b/client/src/components/Skeletons/__tests__/Skeletons.test.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { SnackbarProvider } from 'notistack';
 import ThemeProvider from 'components/ThemeProvider';
 import AppSkeleton from 'components/Skeletons/AppSkeleton';
 import DrawerSkeleton from 'components/Skeletons/DrawerSkeleton';
 import FooterSkeleton from 'components/Skeletons/FooterSkeleton';
 import HeaderSkeleton from 'components/Skeletons/HeaderSkeleton';
+import LandingPageSkeleton from 'components/Skeletons/LandingPageSkeleton';
+import SelectionSkeleton from 'components/Skeletons/SelectionSkeletion';
+import SuiteOptionsPageSkeleton from 'components/Skeletons/SuiteOptionsPageSkeleton';
 import TestSessionSkeleton from 'components/Skeletons/TestSessionSkeleton';
 
 describe('Skeleton Components', () => {
@@ -20,6 +23,39 @@ describe('Skeleton Components', () => {
         </ThemeProvider>
       </MemoryRouter>
     );
+
+    const skeletonElement = screen.getByTestId('appSkeleton');
+    expect(skeletonElement).toBeInTheDocument();
+  });
+
+  it('renders Landing Page Skeleton', () => {
+    render(
+      <MemoryRouter>
+        <ThemeProvider>
+          <SnackbarProvider>
+            <LandingPageSkeleton />
+          </SnackbarProvider>
+        </ThemeProvider>
+      </MemoryRouter>
+    );
+
+    const skeletonElement = screen.getByTestId('landingPageSkeleton');
+    expect(skeletonElement).toBeInTheDocument();
+  });
+
+  it('renders Suite Options Page Skeleton', () => {
+    render(
+      <MemoryRouter>
+        <ThemeProvider>
+          <SnackbarProvider>
+            <SuiteOptionsPageSkeleton />
+          </SnackbarProvider>
+        </ThemeProvider>
+      </MemoryRouter>
+    );
+
+    const skeletonElement = screen.getByTestId('suiteOptionsPageSkeleton');
+    expect(skeletonElement).toBeInTheDocument();
   });
 
   it('renders Drawer Skeleton', () => {
@@ -32,6 +68,9 @@ describe('Skeleton Components', () => {
         </ThemeProvider>
       </MemoryRouter>
     );
+
+    const skeletonElement = screen.getByTestId('drawerSkeleton');
+    expect(skeletonElement).toBeInTheDocument();
   });
 
   it('renders Footer Skeleton', () => {
@@ -44,6 +83,9 @@ describe('Skeleton Components', () => {
         </ThemeProvider>
       </MemoryRouter>
     );
+
+    const skeletonElement = screen.getByTestId('footerSkeleton');
+    expect(skeletonElement).toBeInTheDocument();
   });
 
   it('renders Header Skeleton', () => {
@@ -56,6 +98,9 @@ describe('Skeleton Components', () => {
         </ThemeProvider>
       </MemoryRouter>
     );
+
+    const skeletonElement = screen.getByTestId('headerSkeleton');
+    expect(skeletonElement).toBeInTheDocument();
   });
 
   it('renders TestSessionSkeleton Skeleton', () => {
@@ -68,5 +113,23 @@ describe('Skeleton Components', () => {
         </ThemeProvider>
       </MemoryRouter>
     );
+
+    const skeletonElement = screen.getByTestId('testSessionSkeleton');
+    expect(skeletonElement).toBeInTheDocument();
+  });
+
+  it('renders Selection Skeleton', () => {
+    render(
+      <MemoryRouter>
+        <ThemeProvider>
+          <SnackbarProvider>
+            <SelectionSkeleton />
+          </SnackbarProvider>
+        </ThemeProvider>
+      </MemoryRouter>
+    );
+
+    const skeletonElement = screen.getByTestId('selectionSkeleton');
+    expect(skeletonElement).toBeInTheDocument();
   });
 });
diff --git a/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx b/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx
index 67564763e..37bdf2daf 100644
--- a/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx
+++ b/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx
@@ -16,6 +16,7 @@ import SelectionPanel from '~/components/_common/SelectionPanel/SelectionPanel';
 import useStyles from './styles';
 import { basePath } from '~/api/infernoApiService';
 import remarkGfm from 'remark-gfm';
+import SelectionSkeleton from '~/components/Skeletons/SelectionSkeletion';
 
 export interface SuiteOptionsPageProps {
   testSuite?: TestSuite;
@@ -180,15 +181,19 @@ const SuiteOptionsPage: FC<SuiteOptionsPageProps> = ({ testSuite }) => {
         sx={{ backgroundColor: lightTheme.palette.common.grayLightest }}
       >
         <Box display="flex" ref={selectionPanel} justifyContent="center" maxHeight="100%" m={3}>
-          <SelectionPanel
-            title="Options"
-            options={testSuite?.suite_options || []}
-            setSelection={setSelected}
-            showBackButton={true}
-            backTooltipText="Back to Suites"
-            submitAction={() => createTestSession(selectedSuiteOptions)}
-            submitText="Start Testing"
-          />
+          {testSuite?.suite_options ? (
+            <SelectionPanel
+              title="Options"
+              options={testSuite?.suite_options || []}
+              setSelection={setSelected}
+              showBackButton={true}
+              backTooltipText="Back to Suites"
+              submitAction={() => createTestSession(selectedSuiteOptions)}
+              submitText="Start Testing"
+            />
+          ) : (
+            <SelectionSkeleton />
+          )}
         </Box>
       </Box>
     </Container>