diff --git a/DirectReport/browserview/dashboard/routes.py b/DirectReport/browserview/dashboard/routes.py
index 7ee46931..5d74c28c 100644
--- a/DirectReport/browserview/dashboard/routes.py
+++ b/DirectReport/browserview/dashboard/routes.py
@@ -37,7 +37,7 @@ def dashboard_reports_saved():
     :return: Rendered HTML template for the list page.
     """
 
-    results = requests.get('/api/reports/list')
+    results = requests.get('http://127.0.0.1:5000/api/reports/list')
     return render_template('list.html', title='List', data=results)
 
 
@@ -76,6 +76,7 @@ def dashboard_reports_update():
         repo_data.append(repo["name"])
     raw_data = team_summary_from_shortlog(prompt)["choices"][0]["message"]["content"]
     response_data = json.loads(raw_data)
+    print(response_data)
     response_data["commit_nums"] = {
         "15 days": 4,
         "30 days": (commits_last_month / 10),
@@ -92,6 +93,7 @@ def dashboard_reports_update():
         "1 year": 30,
     }
     response_data["repos"] = repo_data
+    print(repo_data)
     ReportBuilder.new(response_data, prompt, current_user.id, current_user.github_repo)
     return response_data, 201
 
@@ -101,7 +103,22 @@ def dashboard_reports_update():
 def dashboard_saved_report(uid=None):
     reports = ReportBuilder.get_reports_for_user_id(current_user.id)
     report = list(filter(lambda report: report["uuid"] == uid, reports))[0]
-    json_data = json.dumps(report)
+    print(report)
+    report["commit_nums"] = {
+        "15 days": 4,
+        "30 days": (8 / 10),
+        "60 days": (10 / 10),
+        "90 days": (12 / 10),
+        "120 days": 3,
+    }
+    report["pull_requests"] = {
+        "30 days": 4,
+        "60 days": 6,
+        "90 days": 8,
+        "120 days": 10,
+        "150 days": 10,
+        "1 year": 30,
+    }
     return render_template(
-        'team/teamreport.html', title='Team Report', data=json_data, report=json_data, raw_input=report['raw_input']
+        'archived_report.html', title='Team Report', data=report, raw_input={"raw_input": report["raw_input"]}, report=report["report"]
     )
diff --git a/DirectReport/browserview/main/routes.py b/DirectReport/browserview/main/routes.py
index 3e07f2ef..e247717e 100644
--- a/DirectReport/browserview/main/routes.py
+++ b/DirectReport/browserview/main/routes.py
@@ -72,6 +72,7 @@ def reponame():
         'X-GitHub-Api-Version': '2022-11-28',
     }
     response_data = requests.get(url=repo_name, headers=headers, auth=(client_id, client_secret))
+    print(response_data)
     if response_data.status_code == 200:
         json_response_data = json.loads(response_data.content)
         res_json = {"json_array": json_response_data}
diff --git a/DirectReport/browserview/static/js/archived_report.js b/DirectReport/browserview/static/js/archived_report.js
new file mode 100644
index 00000000..1bc3b7a5
--- /dev/null
+++ b/DirectReport/browserview/static/js/archived_report.js
@@ -0,0 +1,80 @@
+const {useState, useEffect} = React;
+const ArchivedReport = (reportDataElems) => {
+
+    const [teamData, setTeamData] = useState([]);
+    const [repos, setRepos] = useState([]);
+    const [reportData, setReportData] = useState({});
+    const [commits, setCommits] = useState([]);
+    const [pullRequests, setPullRequests] = useState({});
+    const [broadCategories, setBroadCategories] = useState({});
+    const [commitNums, setCommitNums] = useState({});
+    const [rawInputText, setRawInputText] = useState("");
+    const [commentText, setCommentText] = useState("");
+
+
+    const openRepoPopover = () => {
+        console.log("open repo popover");
+        // setRepoSelected(true);
+    }
+
+    useEffect(() => {
+        const results = reportDataElems;
+        printData({results})
+    }, [reportDataElems]);
+
+    function printData(reportDataElems) {
+        var obj = JSON.parse(JSON.stringify(reportDataElems));
+        // var objb = JSON.parse(JSON.stringify(obj));
+        var test_data = JSON.parse(JSON.stringify(obj.results.data))
+        setCommitNums(test_data.commit_nums);
+        setPullRequests(test_data.pull_requests);
+        var test_data2 = JSON.parse(JSON.stringify(obj.results.raw_input_elem))
+        setRawInputText(test_data2.raw_input);
+        var new_data = obj.results.reportDataElems.replace(/\'/g, "\"");
+        var test1 = JSON.parse(new_data);
+        Object.entries(test1).forEach((entry) => {
+            const [key, value] = entry;
+            var obj_new = JSON.parse(JSON.stringify(value));
+            if (key === "team") {
+                setTeamData({
+                     teamData:obj_new,
+                 });
+            } else if (key === "report") {
+                setReportData(obj_new);
+            } else if (key === "commits") {
+                setCommits({
+                     commits:obj_new,
+                 });
+            } else if (key === "broad_categories") {
+                setBroadCategories(obj_new);
+            } else if (key === "repos") {
+                 setRepos({
+                     repos:obj_new,
+                 });
+            } else if (key == "commit_nums") {
+                setCommitNums(obj_new);
+            } else if (key == "pull_requests") {
+                setPullRequests(obj_new);
+            }
+        })
+    }
+
+    return (
+        <div>
+            <h1 id="h1content" className="self-center text-center text-2xl text-blue-800 text-center font-bold font-mono pt-5 mb-8 pt-8 mx-30 px-20">
+                Archived Team Report
+            </h1>
+            <div id="topRow" className="grid grid-cols-3 gap-10 rounded-3xl mx-20 mt-6">
+                {EditArchiveSummaryElem({
+                    "repos": repos,
+                    "commits": commits,
+                    "raw_text": rawInputText
+                }, {reportData}, openRepoPopover)}
+                {ArchivedSummarySection(commentText, reportData)}
+                {ShowArchivedTeamSection({teamData}, closePopover)}
+                {showAllGraphics({"commit_nums": commitNums, "pull_requests": pullRequests, "broad_categories": broadCategories}, '#map-container', '#map-container2', '#map-container3')}
+            </div>
+            <GraphicsUI/>
+        </div>
+    )
+}
diff --git a/DirectReport/browserview/static/js/archived_report_components.js b/DirectReport/browserview/static/js/archived_report_components.js
new file mode 100644
index 00000000..d24ce27f
--- /dev/null
+++ b/DirectReport/browserview/static/js/archived_report_components.js
@@ -0,0 +1,129 @@
+const EditArchiveSummaryElem = (props, state, openRepoPopover) => {
+    let raw_text = props['raw_text'];
+    return (
+        <div className="lg:col-span-1 sm:col-span-3 justify-center" id="edit_summary_div">
+            <div className="pb-6 pt-2 bg-blue-600 rounded-3xl px-6 shadow-[1.0px_1.0px_2.0px_1.0px_rgba(0,0,0,0.58)]">
+                <h1 id="title_element" className="self-center text-center text-white text-xl text-center font-bold font-mono mb-1 mt-3 py-2">Github Data</h1>
+                <div className="h-30 px-2 pt-2 pb-1">
+                    <div className="overflow-y-scroll h-80 rounded-3xl tracking-wide bg-white shadow-[1.0px_1.0px_6.0px_0.0px_rgba(0,0,0,0.58)]">
+                        {ArchivedEntry(raw_text)}
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    )
+}
+
+
+const ShowArchivedSummary = (report) => {
+    return (
+        <p id="show_summary" className="w-97 sm:w-97 overflow-y-auto break-words">
+            {report &&
+                <div className="px-2 mb-1 text-xs text-blue-700 px-2 pt-2 pb-3">
+                    {report.summary}
+                </div>
+            }
+        </p>
+    );
+};
+
+const ArchivedEntry = (raw_input) => {
+    return (
+        <div className="px-2">
+            <p className="text-xs font-regular break-words text-blue-600 px-4 py-2 pb-4">{raw_input}</p>
+        </div>
+    )
+}
+
+
+const ShowArchivedHighlights = (report) => {
+    if (!(report !== undefined)) {
+        return (
+            <div className="h-30">
+                <ul className="px-2 pt-2 pb-3">
+                </ul>
+            </div>
+        )
+    } else {
+        return (
+            <div>
+                <div className="h-30">
+                    <ul className="px-2 pt-2 pb-3">
+                        {/* Check if 'highlights' in report is not undefined */}
+                        {report["highlights"] !== undefined ?
+                            // Map each highlight to an HTML structure
+                            report["highlights"].map(high_light =>
+                                <li className="mt-1 mb-3">
+                                    <h3 className="font-bold text-xs mb-1 mt-1 text-blue-700">
+                                        {high_light.title}
+                                    </h3>
+                                    <p className="w-90 sm:w-90 overflow-y-auto text-xs font-sm break-words tracking-wide text-blue-600">
+                                        {high_light.description}
+                                    </p>
+                                </li>
+                            ) : null // Render nothing if 'highlights' is undefined
+                        }
+                    </ul>
+                </div>
+            </div>
+        )
+    }
+
+}
+
+
+const ArchivedSummarySection = (commentText, reportData) => {
+    console.log("ArchivedSummarySection")
+    console.log(reportData);
+    return (
+        <div id="show_summmary_div" className="lg:col-span-1 sm:col-span-3 justify-center">
+            <div className="pb-6 pt-2 bg-blue-600 rounded-3xl px-30 shadow-[1.0px_1.0px_5.0px_0.0px_rgba(0,0,0,0.58)]">
+                <h1 className="self-center text-center text-xl text-white text-center font-bold font-mono mb-1 mt-3 py-2 mt-2 mx-20 px-20">Summary</h1>
+                <div id="summary" className="px-4 mx-0 mb-1 mt-1">
+                    <div id="summary-container" className="ml-3 mr-3 bg-slate-100 shadow-[1.0px_1.0px_6.0px_0.0px_rgba(0,0,0,0.58)] overflow-y-scroll h-80 rounded-3xl tracking-wide text-gray-500 md:text-gl dark:text-gray-400 mt-3 px-3">
+                        {ShowArchivedSummary(reportData)}
+                        {ShowArchivedHighlights(reportData)}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+
+const ShowArchivedTeamSection = (teamData, closePopover) => {
+    console.log(teamData["teamData"]);
+    return (
+        <div id="team_member_to_select" className="lg:col-span-1 sm:col-span-3 justify-center">
+            <div className="pb-6 pt-2 bg-blue-600 rounded-3xl px-4 mb-2 shadow-[1.0px_1.0px_5.0px_0.0px_rgba(0,0,0,0.58)]">
+                <h1 className="self-center text-center text-xl text-white text-center font-bold font-mono mb-1 mt-3 py-2 mx-20 px-20">Team</h1>
+                {PopoverUI(closePopover)}
+                <div
+                    className="content-center py-2 h-90 rounded-3xl mb-1 bg-slate-100 shadow-[1.0px_1.0px_6.0px_0.0px_rgba(0,0,0,0.58)] mx-1 mt-3 px-3">
+                    {ShowArchivedTeamList(teamData["teamData"])}
+                </div>
+            </div>
+        </div>
+    )
+}
+const ShowArchivedTeamList = (team) => {
+
+    if (!(team !== undefined)) {
+        return (
+            null
+        )
+    } else {
+        return (
+            <div class="items-center pt-1 select-none">
+                {team.teamData !== undefined && team.teamData.length > 0?
+                    team.teamData.map(team_member =>
+                        <button class="bg-blue-600 py-1 px-2 pb-1 pt-1 mr-0.5 my-0.5 no-underline rounded-full text-white font-sans border-2 border-gray text-xs btn-primary hover:text-white hover:bg-indigo-700 focus:outline-none active:shadow-none" onClick={(event) => openPopover(event, team_member)}>{
+                            team_member.name}
+                        </button>
+                    ) : null
+                }
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/DirectReport/browserview/static/js/chart_helper.js b/DirectReport/browserview/static/js/chart_helper.js
index 0d1a122b..5c9257f8 100644
--- a/DirectReport/browserview/static/js/chart_helper.js
+++ b/DirectReport/browserview/static/js/chart_helper.js
@@ -60,13 +60,13 @@ function showGraphics(data, divtag) {
             }
         })
         .attr('y', function (value, index) {
-            return (chartHeight - 30) - (value[1] * 5)
+            return (chartHeight - 30) - (value[1] * 8)
         })
         .attr("width", function (value, index) {
             return (chartWidth / data.length) - padding
         })
         .attr("height", function (value, index) {
-            return value[1] * 5
+            return value[1] * 8
         })
         .attr("fill", "blueviolet");
 
@@ -86,7 +86,6 @@ function showGraphics(data, divtag) {
         .style("font-size", "10px")
         .style("text-anchor", "center")
         .text(function (value, index) {
-            print(value[0].split("_")[0].slice(0, 8))
             return value[0].split("_")[0].slice(0, 8)
         })
 }
@@ -128,14 +127,14 @@ function showGraphics2(data, divtag) {
             }
         })
         .attr('y', function (value, index) {
-            return (chartHeight - 30) - (value[1] * 10)
+            return (chartHeight - 30) - (value[1] * 18)
         })
         .attr("width", function (value, index) {
             return (chartWidth / data.length) - padding
         })
         .attr("height", function (value, index) {
             // console.log(value[1] * 20)
-            return (value[1] * 10) - 5
+            return (value[1] * 18) - 5
         })
         .attr("fill", "steelblue");
 
@@ -204,13 +203,13 @@ function showGraphics3(data, divtag) {
             }
         })
         .attr('y', function (value, index) {
-            return (chartHeight - 30) - (value[1] * 10)
+            return (chartHeight - 30) - (value[1] * 17)
         })
         .attr("width", function (value, index) {
             return (chartWidth / data.length) - padding
         })
         .attr("height", function (value, index) {
-            return value[1] * 10
+            return value[1] * 17
         })
         .attr("fill", "teal");
 
@@ -230,7 +229,7 @@ function showGraphics3(data, divtag) {
         .style("font-size", "8px")
         .style("text-anchor", "center")
         .text(function (value, index) {
-            return value[0].split("_")[0].slice(0, 6) + ' ' + value[0].split("_")[1]
+            return value[0].split("_")[0]
         }).call(wrap, 5);
 
 }
diff --git a/DirectReport/browserview/static/js/teamreport/teamreport.js b/DirectReport/browserview/static/js/teamreport/teamreport.js
index 99987519..36482943 100644
--- a/DirectReport/browserview/static/js/teamreport/teamreport.js
+++ b/DirectReport/browserview/static/js/teamreport/teamreport.js
@@ -62,7 +62,7 @@ class TeamReport extends React.Component {
     }
 
     handleSubmit() {
-        const payload = {"prompt": this.state.commentText};
+        const payload = {"prompt": this.state.commentText}
         axios({
             method: 'post',
             url: '/dashboard/reports/update',
@@ -72,6 +72,7 @@ class TeamReport extends React.Component {
                 "Content-Type": "application/json"
             }
         }).then(result => {
+            console.log(result.data);
             this.handleTeamDataChange(result.data["team"]);
             this.handleReportDataChange(result.data["report"]);
             showAllGraphics(result.data, '#map-container', '#map-container2', '#map-container3');
@@ -154,7 +155,7 @@ class TeamReport extends React.Component {
                 {spinnerUI()}
                 <div id="topRow" className="grid grid-cols-3 gap-10 rounded-3xl mx-20 mt-6">
                     {EditSummaryElem({"repos": this.state.repos, "commits": this.state.commits}, this.state, this.openRepoPopover)}
-                    {SummarySection(this.state.teamData, this.state.reportData)}
+                    {SummarySection(this.state.reportData)}
                     {TeamSection(this.state.teamData, this.closePopover)}
                 </div>
                 {this.state.teamData.length <= 0 && (
diff --git a/DirectReport/browserview/static/js/teamreport/teamreport_components.js b/DirectReport/browserview/static/js/teamreport/teamreport_components.js
index dcfb646f..af5611d0 100644
--- a/DirectReport/browserview/static/js/teamreport/teamreport_components.js
+++ b/DirectReport/browserview/static/js/teamreport/teamreport_components.js
@@ -1,10 +1,9 @@
 const { useState, useEffect } = React;
 
 // Define a functional component named 'ShowSummary'
-const ShowSummary = ({ report }) => {
+const ShowSummary = (report) => {
     return (
         <p id="show_summary" className="w-97 sm:w-97 overflow-y-auto break-words">
-            {/* Check if 'report' and 'report.summary' are not null or undefined */}
             {report && report.summary &&
                 <div className="px-2 mb-1 text-xs text-blue-700">
                     {report.summary}
@@ -17,8 +16,10 @@ const ShowSummary = ({ report }) => {
 
 // Define a functional component named 'ShowHighlights'
 const ShowHighlights = (report) => {
+    console.log(report);
     return (
         <div className="h-30">
+            {/*<p>{report}</p>*/}
             <ul className="px-2 pt-2 pb-3">
                 {/* Check if 'highlights' in report is not undefined */}
                 {report["highlights"] !== undefined ?
@@ -41,10 +42,9 @@ const ShowHighlights = (report) => {
 
 
 const ShowTeamList = (team) => {
-    console.log(team);
     return (
         <div class="items-center pt-1 select-none">
-            {team !== undefined ?
+            {team !== undefined && team.length > 0?
                 team.map(team_member =>
                     <button class="bg-blue-600 py-1 px-2 pb-1 pt-1 mr-0.5 my-0.5 no-underline rounded-full text-white font-sans border-2 border-gray text-xs btn-primary hover:text-white hover:bg-indigo-700 focus:outline-none active:shadow-none" onClick={(event) => openPopover(event, team_member)}>{
                         team_member.name}
@@ -91,17 +91,21 @@ const repoPopoverUI = () => {
     )
 }
 
-const SummarySection = (teamData, reportData) => {
+const SummarySection = (reportData) => {
+    console.log("SummarySection");
+    console.log(reportData);
+    // var report = reportData["report"];
     return (
-
         <div id="show_summmary_div" className="lg:col-span-1 sm:col-span-3 justify-center">
             <div className="pb-6 pt-2 bg-blue-600 rounded-3xl px-30 shadow-[1.0px_1.0px_5.0px_0.0px_rgba(0,0,0,0.58)]">
                 <h1 className="self-center text-center text-xl text-white text-center font-bold font-mono mb-1 mt-3 py-2 mt-2 mx-20 px-20">Summary</h1>
                 <div id="summary" className="px-4 mx-0 mb-1 mt-1">
-                    {teamData.length > 0 && (
+                    {reportData && reportData["highlights"] !== undefined && (
                         <div id="summary-container" className="ml-3 mr-3 bg-slate-100 shadow-[1.0px_1.0px_6.0px_0.0px_rgba(0,0,0,0.58)] overflow-y-scroll h-100 rounded-3xl tracking-wide text-gray-500 md:text-gl dark:text-gray-400 mt-3 px-3">
-                            {ShowSummary(reportData)}
-                            {ShowHighlights(reportData)}
+                            <div>
+                                {ShowSummary(reportData)}
+                                {ShowHighlights(reportData)}
+                            </div>
                         </div>
                     )}
                 </div>
@@ -112,13 +116,14 @@ const SummarySection = (teamData, reportData) => {
 
 const TeamSection = (teamData, closePopover) => {
     return (
-
         <div id="team_member_to_select" className="lg:col-span-1 sm:col-span-3 justify-center">
-            <div className="pb-6 pt-2 bg-blue-600 rounded-3xl px-4 mb-2 shadow-[1.0px_1.0px_5.0px_0.0px_rgba(0,0,0,0.58)]">
+            <div
+                className="pb-6 pt-2 bg-blue-600 rounded-3xl px-4 mb-2 shadow-[1.0px_1.0px_5.0px_0.0px_rgba(0,0,0,0.58)]">
                 <h1 className="self-center text-center text-xl text-white text-center font-bold font-mono mb-1 mt-3 py-2 mx-20 px-20">Team</h1>
                 {PopoverUI(closePopover)}
                 {teamData.length > 0 && (
-                    <div className="content-center py-2 h-90 rounded-3xl mb-1 bg-slate-100 shadow-[1.0px_1.0px_6.0px_0.0px_rgba(0,0,0,0.58)] mx-1 mt-3 px-3">
+                    <div
+                        className="content-center py-2 h-90 rounded-3xl mb-1 bg-slate-100 shadow-[1.0px_1.0px_6.0px_0.0px_rgba(0,0,0,0.58)] mx-1 mt-3 px-3">
                         {ShowTeamList(teamData)}
                     </div>
                 )}
@@ -142,7 +147,7 @@ const GithubButtonElement = (repos, openRepoPopover, state) => {
     return (
         <div className="self-center mb-1 mt-1">
             <div className="mx-0 min-w-full flex flex-col items-center">
-                {repos.length > 0 && (
+                {repos && (
                     <button className="bg-white hover:bg-slate-100 self-center text-blue-600 font-mono tracking-wide shadow-[1.5px_2px_1.0px_0.5px_rgba(0,0,0,0.48)] hover:white hover:text-blue-500 hover:border-gray-200 text-md font-bold py-3 px-12 rounded-3xl mt-2 mb-3" onClick={(e) => openRepoPopover({repos}, {state})} type="button">
                         <svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-6 inline-block ml-10" fill="currentColor" viewBox="0 0 24 24">
                             <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
@@ -158,10 +163,9 @@ const GithubButtonElement = (repos, openRepoPopover, state) => {
 }
 
 const GithubEntryElement = (commits) => {
-    console.log(commits);
     return (
         <div>
-            {commits.length > 0 && (
+            {commits && (
                 <div className="bg-white px-6 rounded-3xl h-80 overflow-y-auto mb-4 mt-4 pt-2">
                     {commits.map((commit) => {
                         return (
@@ -228,13 +232,10 @@ const spinnerUI = () => {
 const EditSummaryElem = (props, state, openRepoPopover) => {
     let repos = props['repos'];
     let commits = props['commits'];
-    console.log(repos);
-    console.log({repos});
     return (
         <div className="lg:col-span-1 sm:col-span-3 justify-center" id="edit_summary_div">
             <div className="pb-6 pt-2 bg-blue-600 rounded-3xl px-6 shadow-[1.0px_1.0px_2.0px_1.0px_rgba(0,0,0,0.58)]">
-                <h1 id="title_element"
-                    className="self-center text-center text-white text-xl text-center font-bold font-mono mb-1 mt-3 py-2">
+                <h1 id="title_element" className="self-center text-center text-white text-xl text-center font-bold font-mono mb-1 mt-3 py-2">
                     Github Data
                 </h1>
                 {GithubEntryElement(commits)}
@@ -253,6 +254,9 @@ const closePopover = () => {
 }
 
 const GraphElement = (title, id, mapcontainer_id) => {
+    console.log(title);
+    console.log(id);
+    console.log(mapcontainer_id);
     return (
         <div>
             <h1 id="title_element" className="self-center text-center text-white text-lg text-center font-bold font-mono mb-1 mt-3 py-2">{title}</h1>
@@ -266,21 +270,19 @@ const GraphElement = (title, id, mapcontainer_id) => {
 }
 
 
-class GraphDiv extends React.Component {
-    render() {
-        return (
-            <div className="grid grid-cols-3 gap-10 mt-5 mx-20 bg-blue-600 shadow-[1.0px_1.0px_5.0px_0.0px_rgba(0,0,0,0.58)] rounded-3xl px-5 py-3">
-                {GraphElement("Number of Pull Requests", "dd", "map-container")}
-                {GraphElement("Commits Over Times", "dd", "map-container2")}
-                {GraphElement("Broad Areas of Work", "dd", "map-container3")}
-            </div>
-        )
-    }
+const GraphDiv = () => {
+    return (
+        <div className="grid grid-cols-3 gap-10 mt-5 mx-20 bg-blue-600 shadow-[1.0px_1.0px_5.0px_0.0px_rgba(0,0,0,0.58)] rounded-3xl px-5 py-3">
+            {GraphElement("Number of Pull Requests", "dd", "map-container")}
+            {GraphElement("Commits Over Times", "dd", "map-container2")}
+            {GraphElement("Broad Areas of Work", "dd", "map-container3")}
+        </div>
+    )
 }
 
 const GraphicsUI = () => {
     return (
-        <div className="">
+        <div>
             <h3 className="text-xl text-blue-800 font-mono font-semibold mt-10 mb-8 mx-10 px-12">Graphic Data</h3>
             <GraphDiv/>
         </div>
diff --git a/DirectReport/browserview/templates/archived_report.html b/DirectReport/browserview/templates/archived_report.html
new file mode 100644
index 00000000..75c8822e
--- /dev/null
+++ b/DirectReport/browserview/templates/archived_report.html
@@ -0,0 +1,22 @@
+{% extends "base.html" %}
+
+{% block header %}
+    {% block title %}{% endblock %}
+{% endblock %}
+
+{% block content %}
+    <main className="">
+        <div id="root" class='bg-slate-200 mx-50 pb-[140px]'></div>
+        <script type="text/babel" src="{{url_for('static', filename='js/archived_report_components.js')}}"></script>
+        <script type="text/babel" src="{{url_for('static', filename='js/teamreport/teamreport_components.js')}}"></script>
+        <script type="text/babel" src="{{url_for('static', filename='js/chart_helper.js')}}"></script>
+        <script type="text/babel" src="{{url_for('static', filename='js/archived_report.js')}}"></script>
+        <script type="text/babel">
+            var data = {{data|tojson|safe}}
+            var report = {{report|tojson|safe}};
+            var raw_input = {{raw_input|tojson|safe}};
+            const domContainer = document.querySelector('#root');
+            ReactDOM.render(<ArchivedReport reportDataElems={report} data={data}  raw_input_elem={raw_input} commentText={"This is text"}/>, domContainer);
+        </script>
+    </main>
+{% endblock %}
\ No newline at end of file
diff --git a/DirectReport/browserview/templates/team/teamreport.html b/DirectReport/browserview/templates/team/teamreport.html
index fe79c19b..2e57b4df 100644
--- a/DirectReport/browserview/templates/team/teamreport.html
+++ b/DirectReport/browserview/templates/team/teamreport.html
@@ -14,9 +14,8 @@
         <script type="text/babel" src="{{url_for('static', filename='js/chart_helper.js')}}"></script>
         <script type="text/babel" src="{{url_for('static', filename='js/teamreport/teamreport.js')}}"></script>
         <script type="text/babel">
-            console.log(data);
             const domContainer = document.querySelector('#root');
-            ReactDOM.render(<TeamReport repos={data} commit={[]}/>, domContainer);
+            ReactDOM.render(<TeamReport/>, domContainer);
         </script>
     </main>
 {% endblock %}
\ No newline at end of file
diff --git a/DirectReport/models/Report/report_builder.py b/DirectReport/models/Report/report_builder.py
index 41dada26..d3749122 100644
--- a/DirectReport/models/Report/report_builder.py
+++ b/DirectReport/models/Report/report_builder.py
@@ -27,9 +27,11 @@ def new(report, raw_input, user_id, repo_name):
         storage.create_table()
         if report is None or report == '':
             report = "Entry for work on " + str(today)
+
         new_report = Report(
             str(uuid.uuid1()), user_id, raw_input, report, repo_name, datetime.datetime.now().timestamp()
         )
+        print(new_report)
         storage.add_report(new_report)
 
     @staticmethod