diff --git a/src/AgreementHtml.tsx b/src/AgreementHtml.tsx
index 1a593f9..bdcdffb 100644
--- a/src/AgreementHtml.tsx
+++ b/src/AgreementHtml.tsx
@@ -1,12 +1,49 @@
-import useAppStore from './store';
+import { Spin } from "antd";
+import useAppStore from "./store";
 
-function AgreementHtml() {
-  const agreementHtml = useAppStore((state) => state.agreementHtml)
-  return <div className="column">
-    <h2>Preview Ouput</h2>
-    <p>The result of merging the JSON data with the template. This is AgreementMark converted to HTML.</p>
-    <div className="agreement" dangerouslySetInnerHTML={{ __html: agreementHtml }}/>
-  </div>;
+function AgreementHtml({ loading }: { loading: any }) {
+  const agreementHtml = useAppStore((state) => state.agreementHtml);
+
+  return (
+    <div
+      className="column"
+      style={{
+        border: "1px solid #d9d9d9",
+        borderRadius: "8px",
+        padding: "16px",
+        height: "calc(100vh - 64px)",
+        overflowY: "auto",
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <div style={{ textAlign: "center" }}>
+        <h2>Preview Output</h2>
+        <p>
+          The result of merging the JSON data with the template. This is
+          AgreementMark converted to HTML.
+        </p>
+      </div>
+      {loading ? (
+        <div
+          style={{
+            flex: 1,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <Spin tip="Loading..." size="large" />
+        </div>
+      ) : (
+        <div
+          className="agreement"
+          dangerouslySetInnerHTML={{ __html: agreementHtml }}
+          style={{ flex: 1 }}
+        />
+      )}
+    </div>
+  );
 }
 
 export default AgreementHtml;
diff --git a/src/App.tsx b/src/App.tsx
index 440ae2a..e289b75 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,9 +13,11 @@ import useAppStore from "./store";
 import SampleDropdown from "./SampleDropdown";
 
 const { Content } = Layout;
+
 const App = () => {
   const init = useAppStore((state) => state.init);
   const [activePanel, setActivePanel] = useState<string | string[]>();
+  const [loading, setLoading] = useState(true);
 
   const scrollToExplore = () => {
     const exploreContent = document.getElementById("explore");
@@ -33,7 +35,11 @@ const App = () => {
   };
 
   useEffect(() => {
-    void init();
+    const initializeApp = async () => {
+      await init();
+      setLoading(false);
+    };
+    initializeApp();
   }, [init]);
 
   const panels = [
@@ -56,50 +62,48 @@ const App = () => {
 
   return (
     <AntdApp>
-      <Layout>
-        <Layout>
-          <Navbar scrollToExplore={scrollToExplore} />
-          <Content>
+      <Layout style={{ minHeight: "100vh" }}>
+        <Navbar scrollToExplore={scrollToExplore} />
+        <Content>
+          <div
+            style={{
+              padding: 24,
+              paddingBottom: 150,
+              minHeight: 360,
+              background: colorBgContainer,
+            }}
+          >
+            <Row id="explore">
+              <Col span={4}>
+                <SampleDropdown setLoading={setLoading} />
+              </Col>
+              <Col span={18}>
+                <Errors />
+              </Col>
+            </Row>
             <div
               style={{
                 padding: 24,
-                paddingBottom: 100,
                 minHeight: 360,
                 background: colorBgContainer,
               }}
             >
-              <Row id="explore">
-                <Col span={4}>
-                  <SampleDropdown />
+              <Row gutter={24}>
+                <Col span={16}>
+                  <Collapse
+                    defaultActiveKey={activePanel}
+                    onChange={onChange}
+                    items={panels}
+                  />
                 </Col>
-                <Col span={18}>
-                  <Errors />
+                <Col span={8}>
+                  <AgreementHtml loading={loading} />{" "}
                 </Col>
               </Row>
-              <div
-                style={{
-                  padding: 24,
-                  minHeight: 360,
-                  background: colorBgContainer,
-                }}
-              >
-                <Row gutter={24}>
-                  <Col span={16}>
-                    <Collapse
-                      defaultActiveKey={activePanel}
-                      onChange={onChange}
-                      items={panels}
-                    />
-                  </Col>
-                  <Col span={8}>
-                    <AgreementHtml />
-                  </Col>
-                </Row>
-              </div>
             </div>
-          </Content>
-          <Footer />
-        </Layout>
+          </div>
+        </Content>
+        <Footer />
       </Layout>
     </AntdApp>
   );
diff --git a/src/SampleDropdown.tsx b/src/SampleDropdown.tsx
index ba7e4e0..f57dfa7 100644
--- a/src/SampleDropdown.tsx
+++ b/src/SampleDropdown.tsx
@@ -1,12 +1,9 @@
-import { useState } from "react";
 import { Button, Dropdown, Space, message } from "antd";
 import { DownOutlined } from "@ant-design/icons";
 
 import useAppStore from "./store";
 
-function SampleDropdown() {
-  const [loading, setLoading] = useState(false);
-
+function SampleDropdown({ setLoading }: { setLoading: any }) {
   const samples = useAppStore((state) => state.samples);
   const loadSample = useAppStore((state) => state.loadSample);
 
@@ -37,7 +34,7 @@ function SampleDropdown() {
   return (
     <Space>
       <Dropdown menu={menuProps} trigger={["click"]}>
-        <Button loading={loading}>
+        <Button>
           Load Sample <DownOutlined />
         </Button>
       </Dropdown>
diff --git a/src/index.css b/src/index.css
index a42448e..9566cb5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,6 @@
-body,
-html {
+html,
+body {
+  height: 100vh;
   margin: 0;
   padding: 0;
 }