diff --git a/styles/card.css b/styles/card.css
index 3e0d00d..43932f4 100644
--- a/styles/card.css
+++ b/styles/card.css
@@ -6,6 +6,7 @@
   height: 10rem;
   width: 20rem;
   padding: 3em;
+  margin: 1.7rem; /* for better display */
   border: 0.3em solid black;
   border-radius: 2em;
   background-color: white;
@@ -13,8 +14,6 @@
 
 .item {
   margin: 1rem;
-  /* height: calc(10rem - 6em);
-  width: calc(20rem - 6em); */
 }
 
 #main {
diff --git a/views/cards.html b/views/cards.html
index 351e787..2dc5a14 100644
--- a/views/cards.html
+++ b/views/cards.html
@@ -77,7 +77,7 @@
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
         <use href="#triangle" fill="#0000FF" mask="url(#mask-stripe)"></use>
-        <use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18"></use>
+        <use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18" "></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
@@ -105,8 +105,8 @@
 
     <div class="card">
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#star" fill="#FFA500" mask="url(#mask-stripe)"></use>
-        <use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use>
+        <use href="#diamond" fill="#ff0000" mask="url(#mask-stripe)"></use>
+        <use href="#diamond" stroke="#ff0000" fill="none" stroke-width="18"></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
@@ -115,24 +115,22 @@
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
-        <use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
+        <use href="#diamond" fill="#ff0000" mask="url(#mask-stripe)"></use>
+        <use href="#diamond" stroke="#ff0000" fill="none" stroke-width="18"></use>
       </svg>
     </div>
 
     <div class="card">
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#diamond" fill="#ff0101" mask="url(#mask-stripe)"></use>
-        <use href="#diamond" stroke="#ff0101" fill="none" stroke-width="18"></use>
+        <use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
+        <use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#diamond" fill="#ff0101" mask="url(#mask-stripe)"></use>
-        <use href="#diamond" stroke="#ff0101" fill="none" stroke-width="18"></use>
+        <use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
+        <use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
       </svg>
-    </div>
 
-    <div class="card">
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
         <use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
         <use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>