5 files changed, 75 insertions, 13 deletions
diff --git a/views/list/index.php b/views/list/index.php
index 9047fb3..9bc348d 100644
--- a/views/list/index.php
+++ b/views/list/index.php
@@ -15,11 +15,12 @@
         <p><?= $list->Description ?></p>
         <p><?= $author->Username ?></p>
     </section>
-    <?php foreach($list->allItems() as $webpage): ?>
-        <section>
-            <?= $webpage->URL ?>
-        </section>
-    <?php endforeach; ?>
+    <?php
+        foreach ($list->allItems() as $page) {
+            include $VIEWS_DIR . '/archive/item.php';
+        }
+        include_once $VIEWS_DIR . '/archive/item_show.php';
+    ?>
 
 <?php else: ?>
     <p>
diff --git a/views/list/item.php b/views/list/item.php
new file mode 100644
index 0000000..6316669
--- /dev/null
+++ b/views/list/item.php
@@ -0,0 +1,19 @@
+<section class="list" onclick="window.location.href = '/list/<?= $list->LID ?>'">
+    <section>
+        <div class="heading">
+            <h2>
+                <?= $list->Name ?>
+            </h2>
+            <a href="<?= '/profile/' . $user->Username ?>" class="float-right">
+                <?= $user->Username ?>
+            </a>
+        </div>
+        <p>
+            <?= $list->Description ?>
+        </p>
+    </section>
+    <section name="itemButton" hidden>
+        <span><!-- Edit button --></span>
+        <span><!-- Delete button --></span>
+    </section>
+</section>
diff --git a/views/list/item_show.php b/views/list/item_show.php
new file mode 100644
index 0000000..1a31f4b
--- /dev/null
+++ b/views/list/item_show.php
@@ -0,0 +1,8 @@
+<script type="text/javascript">
+    function showButtons() {
+        for (buttonset of document.getElementsByName('itemButton')) {
+            buttonset.hidden = false;
+        }
+    }
+    authenticated(showButtons);
+</script>
diff --git a/views/profile/index.php b/views/profile/index.php
index a0ef2e7..c1e067d 100644
--- a/views/profile/index.php
+++ b/views/profile/index.php
@@ -29,12 +29,12 @@
     </section>
 
     <section id="userLists" hidden>
-    <?php foreach($user->archiveLists() as $list): ?>
-        <section>
-            <?= $list->Name ?>
-            <?= $list->Description ?>
-        </section>
-    <?php endforeach; ?>
+    <?php
+        foreach ($user->archiveLists() as $list) {
+            include $VIEWS_DIR . '/list/item.php';
+        }
+        include_once $VIEWS_DIR . '/list/item_show.php';
+    ?>
     </section>
 
     <script type="text/javascript">
diff --git a/views/styles.css b/views/styles.css
index 142b530..440da4e 100644
--- a/views/styles.css
+++ b/views/styles.css
@@ -6,6 +6,7 @@
 
   --dark-green: #526962;
   --dark-purple: #9084ae;
+  --dark-cherry: #ae6773;
 
 
   --blue: #add8e6;
@@ -224,6 +225,7 @@ hr.new-section {
 
 }
 
+/* Preview card */
 .card {
   display: flex;
   flex-direction: column;
@@ -274,7 +276,8 @@ hr.new-section {
   height: var(--card-expand-with);
 }
 
-.item {
+/* Webpage item */
+.item, .list {
   background-image: url(/paper.jpg);
   background-repeat: repeat;
 
@@ -293,7 +296,8 @@ hr.new-section {
   border-bottom: none;
 }
 
-.item > :first-child {
+.item > :first-child,
+.list > :first-child {
   flex: 1;
 }
 
@@ -342,6 +346,36 @@ hr.new-section {
   color: var(--cherry);
 }
 
+/* List item */
+.list {
+  border-color: var(--dark-cherry);
+}
+
+.list:hover {
+  cursor: pointer;
+}
+
+.list > :first-child > * {
+  padding-left: 0.25em;
+  padding-right: 0.25em;
+}
+
+.list .heading {
+  border-bottom: 3px dotted #909090;
+  padding-bottom: 0.5em;
+}
+
+.list h2 {
+  margin: 0;
+  font-size: 1.7em;
+  display: inline-block;
+}
+
+.list h2 + .float-right {
+  line-height: 1.7em;
+  text-align: center;
+}
+
 /* User */
 .user-icon {
   height: 7em;