diff --git a/ui/components/Loading.js b/ui/components/Loading.js
new file mode 100644
index 0000000..40acb93
--- /dev/null
+++ b/ui/components/Loading.js
@@ -0,0 +1,37 @@
+import React from "react";
+import { Flex, Spinner, useColorMode } from "@chakra-ui/core";
+
+const Loading = () => {
+    const { colorMode } = useColorMode();
+    const bg = { light: "white", dark: "black" };
+    const color = { light: "black", dark: "white" };
+    return (
+        <Flex
+            flexDirection="column"
+            minHeight="100vh"
+            w="100%"
+            bg={bg[colorMode]}
+            color={color[colorMode]}
+        >
+            <Flex
+                as="main"
+                w="100%"
+                flexGrow={1}
+                flexShrink={1}
+                flexBasis="auto"
+                alignItems="center"
+                justifyContent="start"
+                textAlign="center"
+                flexDirection="column"
+                px={2}
+                py={0}
+                mt={["50%", "50%", "50%", "25%"]}
+            >
+                <Spinner color="primary.500" w="6rem" h="6rem" />
+            </Flex>
+        </Flex>
+    );
+};
+
+Loading.displayName = "Loading";
+export default Loading;
diff --git a/ui/components/MarkDown.js b/ui/components/MarkDown.js
index 0889357..63ef400 100644
--- a/ui/components/MarkDown.js
+++ b/ui/components/MarkDown.js
@@ -1,4 +1,5 @@
 import React from "react";
+import dynamic from "next/dynamic";
 import {
     Checkbox as ChakraCheckbox,
     Divider,
@@ -7,12 +8,15 @@ import {
     Link as ChakraLink,
     List as ChakraList,
     ListItem as ChakraListItem,
+    Spinner,
     Text as ChakraText
 } from "@chakra-ui/core";
-import ReactMarkdown from "react-markdown";
 import CustomCodeBlock from "~/components/CodeBlock";
 import { TableCell, TableHeader, Table } from "~/components/Table";
 
+// Dynaimc Imports
+const ReactMarkdown = dynamic(() => import("react-markdown"), { loading: Spinner });
+
 const Checkbox = ({ checked, children }) => (
     <ChakraCheckbox isChecked={checked}>{children}</ChakraCheckbox>
 );
diff --git a/ui/components/PreConfig.js b/ui/components/PreConfig.js
deleted file mode 100644
index c63af2b..0000000
--- a/ui/components/PreConfig.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from "react";
-import {
-    Button,
-    ColorModeProvider,
-    CSSReset,
-    Flex,
-    Heading,
-    Spinner,
-    ThemeProvider,
-    useTheme,
-    useColorMode
-} from "@chakra-ui/core";
-import { defaultTheme } from "~/theme";
-
-const PreConfig = ({ loading, error, refresh }) => {
-    const theme = useTheme();
-    const { colorMode } = useColorMode();
-    const bg = { light: theme.colors.white, dark: theme.colors.dark };
-    const color = { light: theme.colors.dark, dark: theme.colors.white };
-    return (
-        <Flex
-            flexDirection="column"
-            minHeight="100vh"
-            w="100%"
-            bg={bg[colorMode]}
-            color={color[colorMode]}
-        >
-            <Flex
-                as="main"
-                w="100%"
-                flexGrow={1}
-                flexShrink={1}
-                flexBasis="auto"
-                alignItems="center"
-                justifyContent="start"
-                textAlign="center"
-                flexDirection="column"
-                px={2}
-                py={0}
-                mt={["50%", "50%", "50%", "25%"]}
-            >
-                {loading && <Spinner color="primary.500" w="6rem" h="6rem" />}
-                {!loading && error && (
-                    <>
-                        <Heading mb={4} color="danger.500" as="h1" fontSize="2xl">
-                            {error.response?.data?.output || error.message || "An Error Occurred"}
-                        </Heading>
-                        <Button variant="outline" variantColor="danger" onClick={refresh}>
-                            Retry
-                        </Button>
-                    </>
-                )}
-            </Flex>
-        </Flex>
-    );
-};
-
-export default ({ loading, error, refresh }) => {
-    return (
-        <ThemeProvider theme={defaultTheme}>
-            <ColorModeProvider>
-                <CSSReset />
-                <PreConfig loading={loading} error={error} refresh={refresh} />
-            </ColorModeProvider>
-        </ThemeProvider>
-    );
-};
diff --git a/ui/pages/index.js b/ui/pages/index.js
index fafd86a..c19ceae 100644
--- a/ui/pages/index.js
+++ b/ui/pages/index.js
@@ -1,33 +1,7 @@
 import React from "react";
-import Layout from "~/components/Layout";
-
-// const Index = () => {
-//     // const [{ data, loading, error }, refetch] = useAxios({
-//     //     url: "/config",
-//     //     method: "get"
-//     // });
-//     // const data = undefined;
-//     // const loading = false;
-//     // const error = { message: "Shit broke" };
-//     // const refetch = () => alert("refetched");
-//     const userTheme = data && makeTheme(data.branding);
-//     const theme = data ? userTheme : defaultTheme;
-//     const Component = data ? <Layout /> : <PreConfig />;
-//     return (
-//         <ThemeProvider theme={theme}>
-//             <ColorModeProvider>
-//                 <CSSReset />
-//                 <MediaProvider theme={theme}>
-//                     <ConfigProvider>
-//                         <Component />
-//                     </ConfigProvider>
-//                 </MediaProvider>
-//             </ColorModeProvider>
-//         </ThemeProvider>
-//     );
-// };
-
-// Index.displayName = "Hyperglass";
+import dynamic from "next/dynamic";
+import Loading from "~/components/Loading";
+const Layout = dynamic(() => import("~/components/Layout"), { loading: Loading });
 
 const Index = () => <Layout />;