diff --git a/frontends/etiquette_flask/static/css/cards.css b/frontends/etiquette_flask/static/css/cards.css
index 0a776cc..32e9b6d 100644
--- a/frontends/etiquette_flask/static/css/cards.css
+++ b/frontends/etiquette_flask/static/css/cards.css
@@ -77,6 +77,59 @@
 /* ########################################################################## */
 /* ########################################################################## */
 
+.bookmark_card
+{
+    position: relative;
+    display: inline-grid;
+    grid-template:
+        "title" auto
+        "url" auto
+        "toolbox" auto
+        /1fr;
+
+    padding: 8px;
+    margin: 8px;
+    max-width: 500px;
+
+    border-radius: 8px;
+
+    background-color: var(--color_secondary);
+}
+
+.bookmark_card:hover
+{
+    box-shadow: 2px 2px 5px 0px var(--color_dropshadow);
+}
+
+.bookmark_card .bookmark_title
+{
+    grid-area: "title";
+}
+
+.bookmark_card .bookmark_url
+{
+    grid-area: "url";
+}
+
+.bookmark_card .bookmark_toolbox
+{
+    grid-area: "toolbox";
+}
+
+.bookmark_card input
+{
+    width: 100%;
+}
+
+.bookmark_card .bookmark_url
+{
+    color: #aaa;
+}
+
+/* ########################################################################## */
+/* ########################################################################## */
+/* ########################################################################## */
+
 .photo_card
 {
     background-color: var(--color_secondary);
diff --git a/frontends/etiquette_flask/templates/bookmark_card.html b/frontends/etiquette_flask/templates/bookmark_card.html
new file mode 100644
index 0000000..2396f5b
--- /dev/null
+++ b/frontends/etiquette_flask/templates/bookmark_card.html
@@ -0,0 +1,20 @@
+{% macro create_bookmark_card(bookmark, add_delete_button=False) %}
+<div class="bookmark_card" data-id="{{bookmark.id}}">
+    <a href="{{bookmark.url}}" class="bookmark_title">{{bookmark.display_name}}</a>
+
+    <a href="{{bookmark.url}}" class="bookmark_url">{{bookmark.url}}</a>
+
+    <div class="bookmark_toolbox">
+        {% if add_delete_button %}
+        <button
+        class="red_button button_with_confirm"
+        data-onclick="return delete_bookmark_form(event);"
+        data-prompt="Delete Bookmark?"
+        data-cancel-class="gray_button"
+        >
+            Delete
+        </button>
+        {% endif %}
+    </div>
+</div>
+{% endmacro %}
diff --git a/frontends/etiquette_flask/templates/bookmarks.html b/frontends/etiquette_flask/templates/bookmarks.html
index 6d5aa53..cf0a97a 100644
--- a/frontends/etiquette_flask/templates/bookmarks.html
+++ b/frontends/etiquette_flask/templates/bookmarks.html
@@ -1,12 +1,14 @@
 <!DOCTYPE html5>
 <html>
 <head>
+    {% import "bookmark_card.html" as bookmark_card %}
     {% import "header.html" as header %}
     <title>Bookmarks</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="stylesheet" href="/static/css/common.css">
     <link rel="stylesheet" href="/static/css/etiquette.css">
+    <link rel="stylesheet" href="/static/css/cards.css">
     {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>
@@ -20,36 +22,6 @@
     flex: 0 0 auto;
     flex-direction: column;
 }
-
-.bookmark_card,
-.new_bookmark_card
-{
-    display: inline-flex;
-    flex: 0 0 auto;
-    flex-direction: column;
-    align-items: baseline;
-
-    padding: 8px;
-    margin: 8px;
-    max-width: 500px;
-
-    border-radius: 8px;
-    box-shadow: 2px 2px 5px 0px var(--color_dropshadow);
-
-    background-color: var(--color_secondary);
-}
-
-.bookmark_card input,
-.new_bookmark_card input
-{
-    width: 100%;
-}
-
-.bookmark_card .bookmark_url
-{
-    color: #aaa;
-}
-
 </style>
 </head>
 
@@ -59,36 +31,15 @@
         <div id="bookmark_list">
             <h2>Bookmarks</h2>
             {% for bookmark in bookmarks %}
-            <div class="bookmark_card" data-id="{{bookmark.id}}">
-                <a
-                href="{{bookmark.url}}"
-                class="bookmark_title"
-                >
-                    {{-bookmark.display_name-}}
-                </a>
-
-                <a
-                href="{{bookmark.url}}"
-                class="bookmark_url"
-                >
-                    {{-bookmark.url-}}
-                </a>
-
-                <button
-                class="red_button button_with_confirm"
-                data-onclick="return delete_bookmark_form(event);"
-                data-prompt="Delete Bookmark?"
-                data-cancel-class="gray_button"
-                >
-                    Delete
-                </button>
-            </div>
+            {{bookmark_card.create_bookmark_card(bookmark, add_delete_button=True)}}
             {% endfor %}
 
-            <div class="new_bookmark_card">
+            <div class="bookmark_card new_bookmark_card">
                 <input id="new_bookmark_title" type="text" placeholder="title (optional)">
                 <input id="new_bookmark_url" type="text" placeholder="url">
-                <button id="new_bookmark_button" class="green_button" onclick="return create_bookmark_form();">Create</button>
+                <div class="bookmark_toolbox">
+                    <button id="new_bookmark_button" class="green_button" onclick="return create_bookmark_form();">Create</button>
+                </div>
             </div>
         </div>
     </div>
@@ -156,6 +107,10 @@ function create_editors()
     const cards = document.getElementsByClassName("bookmark_card");
     for (const card of cards)
     {
+        if (card.classList.contains("new_bookmark_card"))
+        {
+            continue;
+        }
         const ed_elements = [
             {
                 "id": "title",
