diff --git a/frontend/src/app/App.tsx b/frontend/src/app/App.tsx
index cc380ded..9f1369e8 100644
--- a/frontend/src/app/App.tsx
+++ b/frontend/src/app/App.tsx
@@ -87,6 +87,14 @@ const App: FC = () => {
             </ContentWrapper>
           }
         />
+        <Route
+          path={`/`}
+          element={
+            <ContentWrapper>
+              <DocumentPreview />
+            </ContentWrapper>
+          }
+        />
         {documentTypes.map((docType) => (
           <Route
             key={docType.id}
diff --git a/frontend/src/app/content/display/Provisions.tsx b/frontend/src/app/content/display/Provisions.tsx
index 5c8e0826..bcdad40b 100644
--- a/frontend/src/app/content/display/Provisions.tsx
+++ b/frontend/src/app/content/display/Provisions.tsx
@@ -88,7 +88,7 @@ const Provisions: FC<ProvisionsProps> = ({
 
   return (
     <>
-      <div>
+      {/* <div>
         <label htmlFor="provisionGroupSelect" style={{ marginRight: '10px' }}>
           Select A Group
         </label>
@@ -109,7 +109,7 @@ const Provisions: FC<ProvisionsProps> = ({
             </option>
           ))}
         </select>
-      </div>
+      </div> */}
       <ProvisionsTable
         dtid={dtid}
         docType={documentType}
diff --git a/frontend/src/app/content/pages/documentpreview/CustomCollapsible.tsx b/frontend/src/app/content/pages/documentpreview/CustomCollapsible.tsx
index 4e28f623..bb25d6d9 100644
--- a/frontend/src/app/content/pages/documentpreview/CustomCollapsible.tsx
+++ b/frontend/src/app/content/pages/documentpreview/CustomCollapsible.tsx
@@ -45,7 +45,7 @@ const CustomCollapsible: FC<CustomCollapsibleProps> = ({ title, children, isOpen
             <div className="mb-2 d-flex align-items-center" >
                 <FontAwesomeIcon icon={icon as IconProp} className="inlineDiv collapsibleTitle" onClick={toggleCollapsibleOnClick} />
                 <div className="ml-2 inlineDiv collapsibleTitle boldText" onClick={toggleCollapsibleOnClick}>{title}</div>
-                {isSpanRequired ? <div className="group-select-container">
+                {(isSpanRequired && isOpenonClick) ? <div className="group-select-container d-flex">
                     <label htmlFor="groupSelect" className="group-select-label">Select a Group:</label>
                     <select id="groupSelect" className="group-select"
                         onClick={handleClick}
diff --git a/frontend/src/app/content/pages/documentpreview/DocumentPreview.scss b/frontend/src/app/content/pages/documentpreview/DocumentPreview.scss
index 1483ee22..11d0fff7 100644
--- a/frontend/src/app/content/pages/documentpreview/DocumentPreview.scss
+++ b/frontend/src/app/content/pages/documentpreview/DocumentPreview.scss
@@ -41,6 +41,8 @@
     .max-group-text {
         margin-left: 20px;
         font-size: 12px;
+        font-weight: bold;
+        margin-top: 10px;
     }
 }
 
@@ -197,3 +199,6 @@ input[type="text"] {
 .help--algin{
   margin-right: 10px;
 }
+.dtid-text{
+  margin-left: 7rem !important;
+}
diff --git a/frontend/src/app/content/pages/documentpreview/DocumentPreview.tsx b/frontend/src/app/content/pages/documentpreview/DocumentPreview.tsx
index f4307ffe..7ce39f83 100644
--- a/frontend/src/app/content/pages/documentpreview/DocumentPreview.tsx
+++ b/frontend/src/app/content/pages/documentpreview/DocumentPreview.tsx
@@ -1,233 +1,330 @@
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
+  generateReport,
   getDisplayData,
   getDocumentProvisionsByDocTypeIdDtid,
+  getDocumentTypes,
   getDocumentVariablesByDocTypeIdDtid,
+  getGroupMaxByDocTypeId,
+  getMandatoryProvisionsByDocTypeId,
+  saveDocument,
 } from '../../../common/report';
-import DocumentPreviewForm from './DocumentPreviewForm';
-import ContactInfoDisplay from './ContactInfoDisplay';
-import LicenseDetailDisplay from './LicenseDetailDisplay';
-import InterestedPartiesDisplay from './InterestedPartiesDisplay';
-import GroupSelectionAndProvisions from './GroupSelectionAndProvisions';
-import ProvisionsTable from './ProvisionsTable';
 import './DocumentPreview.scss';
+import { DTRDisplayObject, DocType, ProvisionGroup } from '../../../types/types';
+import Skeleton from 'react-loading-skeleton';
+import { Button } from 'react-bootstrap';
 import CustomCollapsible from './CustomCollapsible';
+import DtidDetails from '../../display/DtidDetails';
+import TenureDetails from '../../display/TenureDetails';
+import InterestedParties from '../../display/InterestedParties';
+import Provisions, { ProvisionData } from '../../display/Provisions';
+import { ProvisionJson, SaveProvisionData } from '../../../components/table/reports/SelectedProvisionsTable';
+import Variables from '../../display/Variables';
+import { SaveVariableData, VariableJson } from '../../../components/table/reports/VariablesTable';
+
 
-interface DocumentPreviewResponse {
-  dtid: number;
-  fileNum: string;
-  primaryContactName: string;
-  contactName: string;
-  orgUnit: string;
-  primaryContactEmail: string;
-  primaryContactPhone: string;
-  contactEmail: string;
-  contactPhoneNumber: string;
-  incorporationNum: string;
-  inspectionDate: string;
-  type: string;
-  subType: string;
-  purpose: string;
-  subPurpose: string;
-  mailingAddress1: string;
-  mailingAddress2: string;
-  mailingAddress3: string;
-  locLand: string;
-  areaList: Array<{
-    areaInHectares: number;
-    legalDescription: string;
-  }>;
-  interestedParties: Array<{
-    clientName: string;
-    address: string;
-  }>;
-}
-
-interface Provision {
-  type: string;
-  provision: string;
-  freeText: string;
-  category: string;
-  included: boolean;
-}
-
-type ProvisionType = {
-  id: number;
-  name: string;
-  freeText: string;
-  category: string;
-  included: boolean;
-};
 
 const DocumentPreview: React.FC = () => {
+  const [data, setData] = useState<DTRDisplayObject | null>(null);
   const [tenureFileNumber, setTenureFileNumber] = useState('');
   const [dtid, setDtid] = useState(''); //928437
-  const [documentPreviewResponse, setDocumentPreviewResponse] = useState<DocumentPreviewResponse | null>(null);
-  const [primaryContactName, setPrimaryContactName] = useState('');
-  const [selectedGroup, setSelectedGroup] = useState('110');
+  const [isOpen, setIsOpen] = useState(false);
+  const [documentTypes, setDocumentTypes] = useState<DocType[]>([]);
+  const [documentType, setDocumentType] = useState<DocType>();
+  const [provisionGroups, setProvisionGroups] = useState<ProvisionGroup[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [allProvisions, setAllProvisions] = useState<ProvisionData[]>([]);
+  const [mandatoryProvisionIds, setMandatoryProvisionIds] = useState<number[]>([]);
+  const [selectedProvisionIds, setSelectedProvisionIds] = useState<number[]>([]);
+  const [provisionArray, setProvisionArray] = useState<SaveProvisionData[]>([]);
+  const [provisionJsonArray, setProvisionJsonArray] = useState<ProvisionJson[]>([]);
+  const [variableArray, setVariableArray] = useState<SaveVariableData[]>([]);
+  const [variableJsonArray, setVariableJsonArray] = useState<VariableJson[]>([]);
+  const [dtidNumber, setdtidNumber] = useState<number>(-1);
 
-  const [variableName, setVariableName] = useState('');
-  const [helpText, setHelpText] = useState('');
+  const [errors, setErrors] = useState<{ [key: string]: string }>({
+    tenureFileNumber: '',
+    dtid: '',
+  });
+  let newErrors = { tenureFileNumber: '', dtid: '' };
 
-  const handleSaveForLater = () => {
-    // Implement save for later logic
-    console.log('Saved for later:');
-  };
 
-  const handleGenerateDocument = () => {
-    console.log('Generate document with:');
-  };
 
-  const provisionsDummy: ProvisionType[] = [
-    { id: 1, name: 'STANDARD LICENCE PROVISION 1', freeText: 'Lorem ipsum...', category: '', included: true },
-    { id: 2, name: 'STANDARD LICENCE PROVISION 2', freeText: 'Lorem ipsum...', category: '', included: true },
-    { id: 3, name: 'STANDARD LICENCE PROVISION 3', freeText: 'Lorem ipsum...', category: '', included: false },
-  ];
+  useEffect(() => {
+    const fetchData = async () => {
+      if (dtidNumber === -1) return;
+      try {
+        setLoading(true);
+        // Fetch any existing documentData
+        const displayData: DTRDisplayObject = await getDisplayData(dtidNumber);
+        if (!displayData) {
+          newErrors.dtid = 'Data not found.';
+          setErrors(newErrors);
+          return;
+        }
+        setData(displayData);
+        if (!documentType) return;
+        // provisions, will be validated against
+        const fetchProvisions: { provisions: ProvisionData[]; provisionIds: number[] } =
+          await getDocumentProvisionsByDocTypeIdDtid(documentType.id, dtidNumber);
+        setAllProvisions(fetchProvisions.provisions);
+        const activeProvisionIDs = new Set(
+          fetchProvisions.provisions
+            .filter((provision) => provision.active_flag && !provision.is_deleted)
+            .map((provision) => provision.provision_group.id)
+        );
+        // mandatory provisions, will be validated against
+        const mpIds: number[] = await getMandatoryProvisionsByDocTypeId(documentType.id);
+        setMandatoryProvisionIds(mpIds);
+        // get provision groups and filter out the empty ones
+        const provisionGroupsObject: ProvisionGroup[] = await getGroupMaxByDocTypeId(documentType.id);
+        const activeProvisionGroups = provisionGroupsObject.filter((group) => activeProvisionIDs.has(group.id));
+        setProvisionGroups(activeProvisionGroups);
+        setIsOpen(true);
+      } catch (error) {
+        console.error('Failed to fetch data', error);
+        setData(null);
+        newErrors.dtid = 'Data not found.';
+        setErrors(newErrors);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [dtidNumber, documentType]);
+
+  const toggleCollapsible = () => setIsOpen(!isOpen);
+
+  const validateFields = (): boolean => {
+    newErrors.dtid = '';
+    if (!dtid) {
+      newErrors.dtid = 'DTID is required.';
+    }
+    setErrors(newErrors);
+    return !Object.values(newErrors).some(error => error !== '');
+  };
 
+  const handleRetrieveClick = () => {
+    if (validateFields())
+      setdtidNumber(parseInt(dtid, 10))
+  };
   const handleClear = () => {
     setTenureFileNumber('');
     setDtid('');
+    setData(null);
     setIsOpen(false);
-    setDocumentPreviewResponse(null);
+    newErrors.dtid = '';
+    setErrors(newErrors);
+    setdtidNumber(-1)
   };
 
-  const [provisions, setProvisions] = useState<Provision[]>([
-    { type: 'STANDARD LICENSE PROVISION 1', freeText: '', category: '', included: false, provision: 'Lorem ipsum...' },
-    { type: 'STANDARD LICENSE PROVISION 2', freeText: '', category: '', included: false, provision: 'Lorem ipsum...' },
-    { type: 'STANDARD LICENSE PROVISION 3', freeText: '', category: '', included: false, provision: 'Lorem ipsum...' },
-  ]);
+  useEffect(() => {
+    const getDocTypes = async () => {
+      const docTypes = await getDocumentTypes();
+      setDocumentTypes(docTypes || []);
+      setDocumentType(docTypes[0] || [])
+    };
+    getDocTypes();
+  }, []);
+
+  const updateProvisionArray = useCallback((provisionJsonData: ProvisionJson[]) => {
+    // used for saving
+    setProvisionArray(
+      provisionJsonData.map((provision) => {
+        return { provision_id: provision.provision_id, free_text: provision.free_text };
+      })
+    );
+    // used to generate document
+    setProvisionJsonArray(provisionJsonData);
+  }, []);
+
+  const updateSelectedProvisionIds = useCallback((selectedProvisionIds: number[]) => {
+    setSelectedProvisionIds(selectedProvisionIds);
+  }, []);
 
-  const [documentType, setDocumentType] = useState('STANDARD_LICENSE');
+  const updateVariableArray = useCallback((variableJsonData: VariableJson[]) => {
+    console.log('variableJsonData');
+    console.log(variableJsonData);
+    // used for saving
+    setVariableArray(
+      variableJsonData.map((variable) => {
+        return {
+          provision_id: variable.provision_id,
+          variable_id: variable.variable_id,
+          variable_value: variable.variable_value,
+        };
+      })
+    );
+    // used to generate document
+    setVariableJsonArray(variableJsonData);
+  }, []);
 
-  const handleCheckboxChange = (index: number) => {
-    provisions[index].included = !provisions[index].included;
+  const handleDocumentSave = () => {
+    console.log('saving...');
+    console.log('variableArray');
+    console.log(variableArray);
+    const saveData = async () => {
+      if (dtidNumber && documentType) {
+        try {
+          setLoading(true);
+          await saveDocument(dtidNumber, documentType.id, provisionArray, variableArray);
+        } catch (err) {
+          console.log('Error saving Document Data');
+          console.log(err);
+        } finally {
+          setLoading(false);
+        }
+      } else {
+        console.log('No DTID was found.');
+      }
+    };
+    saveData();
   };
 
-  const fetchData = async () => {
-    const nfrData = (await getDisplayData(parseInt(dtid))) as DocumentPreviewResponse;
-    if (nfrData) {
-      setDocumentPreviewResponse(nfrData);
-      const dataProvisions = await getDocumentProvisionsByDocTypeIdDtid(1, 928437);
-      const dataVariables = await getDocumentVariablesByDocTypeIdDtid(1, 928437);
-      setIsOpen(true);
+  const validateProvisions = (): string | null => {
+    const unselectedMandatoryIds = mandatoryProvisionIds.filter(
+      (mandatoryId) => !selectedProvisionIds.includes(mandatoryId)
+    );
+    const matchingProvisions = allProvisions.filter((provision) => unselectedMandatoryIds.includes(provision.id));
+    const matchingGroupNumbers = [...new Set(matchingProvisions.map((provision) => provision.provision_group))];
+    if (matchingGroupNumbers.length > 0) {
+      return `There are unselected mandatory provisions the following groups: ${matchingGroupNumbers.join(', ')}`;
+    } else {
+      return null;
     }
   };
 
-  const handleRetrieve = () => {
-    if (tenureFileNumber !== '' && dtid !== '') {
-      fetchData();
+  const handleGenerateReport = () => {
+    if (dtidNumber && documentType) {
+      const errorMessage = validateProvisions();
+      if (!errorMessage) {
+        if (data) {
+          generateReport(dtidNumber, data!.fileNum, documentType.id, provisionJsonArray, variableJsonArray);
+        }
+      } else {
+        alert(errorMessage);
+      }
     }
   };
-  const [isOpen, setIsOpen] = useState(false);
 
-  const toggleCollapsible = () => setIsOpen(!isOpen);
+  const handleDocumentTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setDocumentType(documentTypes.find(i => i.id == parseInt(e.target.value)))
+  };
 
   return (
-    <div>
-      <DocumentPreviewForm
-        tenureFileNumber={tenureFileNumber}
-        dtid={dtid}
-        primaryContactName={documentPreviewResponse !== null ? documentPreviewResponse.primaryContactName : ''}
-        onValidatedRetrieve={handleRetrieve}
-        setTenureFileNumber={setTenureFileNumber}
-        setDtid={setDtid}
-        handleClear={handleClear}
-      />
+    <>
+      <div className="h1">Document Preview</div>
+      <hr className="document-preview__divider" />
+      <div className="mb-3 mt-3 d-flex">
+        <div className="font-weight-bold mr-5">Tenure File Number:</div>
+        <div className="mr-6">
+          {/* {data?.dtid || <Skeleton />} */}
+          <input
+            id="tenureFileNumber"
+            type="text"
+            className="form-control"
+            value={data ? data.fileNum : ''}
+            onChange={(e) => setTenureFileNumber(e.target.value)}
+          />
+        </div>
+        <div className="mr-3 ml-5">
+          <Button variant="success" onClick={handleRetrieveClick}>Retrieve</Button>
+        </div>
+        <div>
+          <Button variant="outline-primary" style={{ backgroundColor: 'transparent', color: 'black' }} onClick={handleClear}>Clear</Button>
+        </div>
+      </div>
+      <div className="mb-3 d-flex">
+        <div className="font-weight-bold inlineDiv mr-5">DTID:</div>
+        <div className="inlineDiv dtid-text" id="tfn">
+          {/* {data?.fileNum || <Skeleton />} */}
+          <input
+            id="dtid"
+            type="number"
+            className="form-control"
+            value={dtid}
+            onChange={(e) => setDtid(e.target.value)}
 
+          />
+          {errors.dtid && <div style={{ color: 'red', marginTop: '0.25rem' }}>{errors.dtid}</div>}
+        </div>
+      </div>
+      <div className="mb-3">
+        <div className="font-weight-bold inlineDiv mr-1">Primary Contact Name:</div>
+        <div className="inlineDiv">{data?.primaryContactName}</div>
+      </div>
       <CustomCollapsible
         title="Disposition Transaction ID Details"
         isOpen={isOpen}
         toggleCollapsible={toggleCollapsible}
         isSpanRequired={false}
       >
-        {documentPreviewResponse !== null ? (
-          <ContactInfoDisplay
-            contactName={documentPreviewResponse.contactName}
-            organizationUnit={documentPreviewResponse.orgUnit}
-            incorporationNumber={documentPreviewResponse.incorporationNum}
-            emailAddress={documentPreviewResponse.contactEmail}
-            dateInspected={documentPreviewResponse.inspectionDate}
-          />
-        ) : (
-          ''
-        )}
+        {data ? <DtidDetails data={data!} /> : <Skeleton />}
       </CustomCollapsible>
-
       <CustomCollapsible
         title="Tenure Details"
         isOpen={isOpen}
         toggleCollapsible={toggleCollapsible}
         isSpanRequired={false}
       >
-        {documentPreviewResponse !== null ? (
-          <LicenseDetailDisplay
-            type={documentPreviewResponse.type}
-            subtype={documentPreviewResponse.subType}
-            purpose={documentPreviewResponse.purpose}
-            subpurpose={documentPreviewResponse.subPurpose}
-            locationOfLand={documentPreviewResponse.locLand}
-            mailingAddress1={documentPreviewResponse.mailingAddress1}
-            mailingAddress2={documentPreviewResponse.mailingAddress2}
-            mailingAddress3={documentPreviewResponse.mailingAddress3}
-          />
-        ) : (
-          ''
-        )}
+        {data ? <TenureDetails data={data!} /> : <Skeleton />}
       </CustomCollapsible>
-
       <CustomCollapsible
         title="Interested Parties"
         isOpen={isOpen}
         toggleCollapsible={toggleCollapsible}
         isSpanRequired={false}
       >
-        {documentPreviewResponse !== null ? (
-          <InterestedPartiesDisplay interestedParties={documentPreviewResponse.interestedParties} />
-        ) : (
-          ''
-        )}
+        {data ? <InterestedParties data={data!} /> : <Skeleton />}
       </CustomCollapsible>
 
       <div style={{ margin: '20px 0' }}>
         <h3 style={{ marginBottom: '10px' }}>Create Document</h3>
         <hr />
-        <div>
+        <div className='d-flex'>
           <label htmlFor="documentType" className="createDocument">
             Document Type :
           </label>
           <select
             id="documentType"
-            value={documentType}
-            onChange={(e) => setDocumentType(e.target.value)}
+
+            onChange={handleDocumentTypeChange}
             className="select"
           >
-            <option value="STANDARD_LICENSE">STANDARD LICENSE</option>
-            <option value="Assignment Assumption">Assignment Assumption</option>
+            {documentTypes.map((docType) => (
+              <option key={docType.id} value={docType.id}>{docType.name}</option>
+            ))}
           </select>
         </div>
       </div>
       <CustomCollapsible title="Provisions" isOpen={isOpen} toggleCollapsible={toggleCollapsible} isSpanRequired={true}>
-        <GroupSelectionAndProvisions
-          selectedGroup={selectedGroup}
-          setSelectedGroup={setSelectedGroup}
-          provisions={provisions}
-          handleCheckboxChange={handleCheckboxChange}
-        />
+        {(dtidNumber && documentType) ? <Provisions
+          dtid={dtidNumber!}
+          documentType={documentType}
+          provisionGroups={provisionGroups}
+          updateHandler={updateProvisionArray}
+          updateSelectedProvisionIds={updateSelectedProvisionIds} /> : <Skeleton />}
       </CustomCollapsible>
-
       <CustomCollapsible title="Variables" isOpen={isOpen} toggleCollapsible={toggleCollapsible} isSpanRequired={false}>
-        <ProvisionsTable provisions={provisions} />
+        {(dtidNumber && documentType) ? <Variables
+          dtid={dtidNumber!}
+          documentType={documentType}
+          updateHandler={updateVariableArray}
+          selectedProvisionIds={selectedProvisionIds}
+        /> : <Skeleton />}
       </CustomCollapsible>
-
-      <div className="button-container">
-        <button className="button button--save" onClick={handleSaveForLater}>
-          Save For Later
-        </button>
-        <button className="button button--generate" onClick={handleGenerateDocument}>
-          Generate Document
-        </button>
+      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px' }}>
+        <>
+          <Button onClick={handleDocumentSave} variant="success" disabled={loading}>
+            Save for later
+          </Button>
+          <Button onClick={handleGenerateReport} disabled={loading}>
+            Create
+          </Button>
+        </>
       </div>
-    </div>
+    </>
   );
 };