diff --git a/src/components/pages/assignmentDetailPage.scss b/src/components/pages/assignmentDetailPage.scss
new file mode 100644
index 0000000..2fa1275
--- /dev/null
+++ b/src/components/pages/assignmentDetailPage.scss
@@ -0,0 +1,55 @@
+@import 'variables';
+
+.header {
+    color: $text-color;
+    display: flex;
+    justify-content: space-between;
+}
+
+.name {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.4rem;
+}
+
+.subText {
+    font-size: 1.1rem;
+    width: 100%;
+  }
+
+.assignmentBox {
+    text-decoration: none;
+
+    background: $list-item-background;
+    border-radius: 0.6rem;
+
+    padding: 1.5rem;
+
+    color: $text-color;
+
+}
+
+.button {
+    display: inline-block;
+    padding: 10px 20px;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    border: none;
+    border-radius: 4px;
+    color: $background;
+    background-color: $green;
+    transition: background-color 0.3s ease;
+    cursor: pointer;
+}
+
+.button:hover {
+    background-color: $green-lighter;
+    color: $text-color;
+  }
+
+@media (max-width: 700px) {
+  .header {
+    display: block;
+  }
+}
diff --git a/src/components/pages/assignmentDetailPage.tsx b/src/components/pages/assignmentDetailPage.tsx
index 775bc56..fd5153a 100644
--- a/src/components/pages/assignmentDetailPage.tsx
+++ b/src/components/pages/assignmentDetailPage.tsx
@@ -1,7 +1,68 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
+import { Assignment } from 'devu-shared-modules'
+import { prettyPrintDate } from 'utils/date.utils'
 
+import LoadingOverlay from 'components/shared/loaders/loadingOverlay'
 import PageWrapper from 'components/shared/layouts/pageWrapper'
+import ErrorPage from './errorPage'
 
-const AssignmentDetailPage = ({}) => <PageWrapper>Assignment Detail</PageWrapper>
+import RequestService from 'services/request.service'
+
+import styles from './assignmentDetailPage.scss'
+
+const AssignmentDetailPage = () => {
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+
+  const [assignment, setAssignment] = useState<Assignment | null>(null)
+
+  useEffect(() => {
+    fetchData()
+  }, [])
+
+  const fetchData = async () => {
+    try {
+      const currentAssignment = await RequestService.get<Assignment>(`/api/assignments/2`)
+      setAssignment(currentAssignment)
+    } catch (error) {
+      setError(error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (loading) return <LoadingOverlay delay={250} />
+  if (error) return <ErrorPage error={error} />
+
+  return (
+    <PageWrapper>
+      <div className={styles.header}>
+        <h1>Assignment Details</h1>
+      </div>
+      <div className={styles.assignmentBox}>
+        {assignment ? (
+          <>
+            <div className={styles.name}>{assignment.name}</div>
+            <div className={styles.subText}>
+              <p>{assignment.description}</p>
+              <p>
+                Due: <b>{prettyPrintDate(assignment.dueDate)}</b>
+              </p>
+              <p>
+                Last day to handin: <b>{prettyPrintDate(assignment.endDate)}</b>
+              </p>
+
+              <button className={styles.button}>SUBMIT</button>
+            </div>
+          </>
+        ) : (
+          <div>Could not find assignment</div>
+        )}
+      </div>
+
+      {/* Add submission history here */}
+    </PageWrapper>
+  )
+}
 
 export default AssignmentDetailPage