diff --git a/src/app/analysis/[id]/page.js b/src/app/analysis/[id]/page.js
new file mode 100644
index 0000000000000000000000000000000000000000..7058e3f756878690c7557f6b4e6ef6b4c50268b0
--- /dev/null
+++ b/src/app/analysis/[id]/page.js
@@ -0,0 +1,35 @@
+import { AnalysisMetadata, SampleMetadata } from "@/components/analysis/metadata";
+import ActivityTimeline from "@/components/analysis/activity-timeline";
+import RedirectButton from "@/components/redirect-button";
+import "@/styles/analysis/page.css";
+
+export default function Analysis({ params: { id } }) {
+ return (
+ <div>
+ <div className="pagerow">
+ <AnalysisMetadata
+ status="running"
+ id="5e6c83bf-44b3-4f9e-bd45-683585439eed"
+ driver="1.3.8"
+ template="9011"
+ start="08/10/24 11:00:10 -03"
+ end="08/10/24 11:07:39 -03"
+ />
+ <SampleMetadata
+ filename="MALWARE2.exe"
+ extension=".exe"
+ mimetype="application/octet-stream"
+ size="2.7 MiB"
+ lastmod="08/10/24 11:00:10 -03"
+ md5="6cb20b4c787c4ea918e301310b2667f5"
+ sha1="5b5d921d69336d06837422438cd0c5225fc78a74"
+ sha256="83121822f08691834102f7652c673133deb98a134110a0fea22a27b2ccd5d966"
+ />
+ </div>
+ <div className="pagerow">
+ <ActivityTimeline />
+ </div>
+ <RedirectButton name="go back" href="/" />
+ </div>
+ );
+}
diff --git a/src/components/.gitkeep b/src/components/.gitkeep
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/components/analysis/activity-timeline.js b/src/components/analysis/activity-timeline.js
new file mode 100644
index 0000000000000000000000000000000000000000..121ab056e2c5eb1ffbacc4cc458f76b48fcd9273
--- /dev/null
+++ b/src/components/analysis/activity-timeline.js
@@ -0,0 +1,9 @@
+import "@/styles/analysis/activity-timeline.css";
+
+export default function ActivityTimeline() {
+ return (
+ <div className="activity-timeline">
+ <div className="at-title">ACTIVITY TIMELINE</div>
+ </div>
+ );
+}
diff --git a/src/components/analysis/metadata.js b/src/components/analysis/metadata.js
new file mode 100644
index 0000000000000000000000000000000000000000..4aacd3473659bb0c4e40166fbb28f898cc5c22fb
--- /dev/null
+++ b/src/components/analysis/metadata.js
@@ -0,0 +1,87 @@
+import "@/styles/analysis/metadata.css"
+
+export function AnalysisMetadata(props) {
+ return (
+ <table>
+ <thead>
+ <tr>
+ <th className="table-title" colSpan="2">ANALYSIS</th>
+ </tr>
+ </thead>
+
+ <tbody>
+ <tr>
+ <th>Status</th>
+ <td>{props.status}</td>
+ </tr>
+ <tr>
+ <th>ID</th>
+ <td>{props.id}</td>
+ </tr>
+ <tr>
+ <th>Driver version</th>
+ <td>{props.driver}</td>
+ </tr>
+ <tr>
+ <th>Template ID</th>
+ <td>{props.template}</td>
+ </tr>
+ <tr>
+ <th>Start time</th>
+ <td>{props.start}</td>
+ </tr>
+ <tr>
+ <th>End time</th>
+ <td>{props.end}</td>
+ </tr>
+ </tbody>
+ </table>
+ );
+}
+
+export function SampleMetadata(props) {
+ return (
+ <table>
+ <thead>
+ <tr>
+ <th className="table-title" colSpan="2">SAMPLE</th>
+ </tr>
+ </thead>
+
+ <tbody>
+ <tr>
+ <th>Filename</th>
+ <td>{props.filename}</td>
+ </tr>
+ <tr>
+ <th>Extension</th>
+ <td>{props.extension}</td>
+ </tr>
+ <tr>
+ <th>MIME type</th>
+ <td>{props.mimetype}</td>
+ </tr>
+ <tr>
+ <th>Size</th>
+ <td>{props.size}</td>
+ </tr>
+ <tr>
+ <th>Last modified</th>
+ <td>{props.lastmod}</td>
+ </tr>
+ <tr>
+ <th>MD5 sum</th>
+ <td>{props.md5}</td>
+ </tr>
+ <tr>
+ <th>SHA1 sum</th>
+ <td>{props.sha1}</td>
+ </tr>
+ <tr>
+ <th>SHA256 sum</th>
+ <td>{props.sha256}</td>
+ </tr>
+ </tbody>
+ </table>
+ );
+}
diff --git a/src/components/redirect-button.js b/src/components/redirect-button.js
new file mode 100644
index 0000000000000000000000000000000000000000..8e7f327ae9dcdb36217d7e2dd4f079cc5b85579f
--- /dev/null
+++ b/src/components/redirect-button.js
@@ -0,0 +1,8 @@
+'use client'
+import "@/styles/redirect-button.css"
+
+export default function RedirectButton({ name, href }) {
+ const redirect = () => window.location.href = href;
+
+ return <button className="redirect-button" onClick={redirect}>{name}</button>;
+}
diff --git a/src/styles/analysis/activity-timeline.css b/src/styles/analysis/activity-timeline.css
new file mode 100644
index 0000000000000000000000000000000000000000..6d481f7f8363f2c1bc382fc3d86ac59075597ad4
--- /dev/null
+++ b/src/styles/analysis/activity-timeline.css
@@ -0,0 +1,23 @@
+.activity-timeline {
+ margin: 1em;
+ height: 100%;
+ min-width: 398.266px;
+ max-width: 75%;
+ font-family: monospace;
+ font-size: 1em;
+ flex: 1;
+ overflow: auto;
+ padding: 0.5em;
+ word-wrap: break-word;
+ white-space: pre-wrap;
+ border: 1px solid #1F1C1A;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
+}
+
+.at-title {
+ padding: 8px;
+ font-family: Bitstream Vera Sans, Tahoma, sans-serif;
+ font-weight: bold;
+ text-align: center;
+ border-bottom: 1px solid #1F1C1A;
+}
diff --git a/src/styles/analysis/metadata.css b/src/styles/analysis/metadata.css
new file mode 100644
index 0000000000000000000000000000000000000000..8057d4206496c043c4ed457ea24063d78e377e21
--- /dev/null
+++ b/src/styles/analysis/metadata.css
@@ -0,0 +1,21 @@
+table {
+ min-height: 348.484px;
+ min-width: 398.266px;
+ border-collapse: collapse;
+ text-align: left;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
+ margin: 1em;
+}
+
+td, th {
+ border: 1px solid #1F1C1A;
+ padding: 8px;
+}
+
+.table-title {
+ text-align: center;
+}
+
+tr:nth-child(even) {
+ background-color: #221f1d;
+}
diff --git a/src/styles/analysis/page.css b/src/styles/analysis/page.css
new file mode 100644
index 0000000000000000000000000000000000000000..01ade261cc4062dbab8f88235a4808e11b7208d1
--- /dev/null
+++ b/src/styles/analysis/page.css
@@ -0,0 +1,7 @@
+.pagerow {
+ display: flex;
+ justify-content: space-around;
+ width: 100%;
+ min-width: max-content;
+ margin-bottom: 1em;
+}
diff --git a/src/styles/redirect-button.css b/src/styles/redirect-button.css
new file mode 100644
index 0000000000000000000000000000000000000000..163a521acc292580d906667bcff835f18092cdd0
--- /dev/null
+++ b/src/styles/redirect-button.css
@@ -0,0 +1,31 @@
+.redirect-button {
+ background-color: #434240;
+ border: 1px solid transparent;
+ border-radius: 3px;
+ box-shadow: rgba(255, 255, 255, .4) 0 1px 0 0 inset;
+ box-sizing: border-box;
+ display: inline-block;
+ font-size: 13px;
+ line-height: 1.15385;
+ margin: 0;
+ outline: none;
+ padding: 8px .8em;
+ position: relative;
+ text-align: center;
+ text-decoration: none;
+ user-select: none;
+ -webkit-user-select: none;
+ touch-action: manipulation;
+ vertical-align: baseline;
+ white-space: nowrap;
+}
+
+.redirect-button:hover,
+.redirect-button:focus {
+ background-color: #07c;
+}
+
+.redirect-button:active {
+ background-color: #0064bd;
+ box-shadow: none;
+}