2 files changed, 34 insertions, 3 deletions
diff --git a/client/src/App.css b/client/src/App.css
index f565e3b..9f86207 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -219,4 +219,31 @@ input[type="number"] {
 #form-ka-button {
     padding-left: 78%;
     margin-right: 0;
-}
\ No newline at end of file
+}
+.apneReports{
+    padding-left: 30px;
+}
+details {
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    padding: .5em .5em 0;
+}
+
+summary {
+    font-weight: bold;
+    margin: -.5em -.5em 0;
+    padding: .5em;
+}
+
+details[open] {
+    padding: .5em;
+}
+
+details[open] summary {
+    border-bottom: 1px solid #aaa;
+    margin-bottom: .5em;
+}
+.apneReports{
+    padding-top: 10px;
+    line-height: 1.5;
+}
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 7bd37ba..56b7ded 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -170,9 +170,13 @@ const App = () => {
                  <div className="apneReports">
                    <details>
                      <summary>
-                     {JSON.parse(storage.records[idx]).date}
+                      {JSON.parse(storage.records[idx]).date}
                      </summary>
-                     {JSON.parse(storage.records[idx]).name}
+                     Name: {JSON.parse(storage.records[idx]).name}<br></br>
+                     Age: {JSON.parse(storage.records[idx]).age}<br></br>
+                     Height: {JSON.parse(storage.records[idx]).height}<br></br>
+                     Weight: {JSON.parse(storage.records[idx]).weight}<br></br>
+                     Prescription: {JSON.parse(storage.records[idx]).prescription}<br></br>
                     </details>
                    </div>)}