diff --git a/themes/lumbung-theme/layouts/_default/list.html b/themes/lumbung-theme/layouts/_default/list.html
index 9562f4d..30c0bff 100644
--- a/themes/lumbung-theme/layouts/_default/list.html
+++ b/themes/lumbung-theme/layouts/_default/list.html
@@ -19,6 +19,10 @@
           {{ else if in .Params.categories "shouts" }}
 
             {{- partial "shout_card.html" . -}}
+
+          {{ else if in .Params.categories "pen" }}
+
+            {{- partial "pen_card.html" . -}}
           
           {{ else if in .Params.categories "page" }}
 
diff --git a/themes/lumbung-theme/layouts/index.html b/themes/lumbung-theme/layouts/index.html
index b2b92d1..0fd84e9 100644
--- a/themes/lumbung-theme/layouts/index.html
+++ b/themes/lumbung-theme/layouts/index.html
@@ -16,6 +16,10 @@
 
             {{- partial "network_card.html" . -}}
 
+          {{ else if in .Params.categories "pen" }}
+
+            {{- partial "pen_card.html" . -}}
+
           {{ else if in .Params.categories "shouts" }}
 
             {{- partial "shout_card.html" . -}}
diff --git a/themes/lumbung-theme/layouts/partials/pen_card.html b/themes/lumbung-theme/layouts/partials/pen_card.html
new file mode 100644
index 0000000..ef2b213
--- /dev/null
+++ b/themes/lumbung-theme/layouts/partials/pen_card.html
@@ -0,0 +1,36 @@
+    <div class='pen card {{ .Params.feed_name }}'>
+      <article class="h-entry pen">
+        <header>
+        <div class="pen-source"><span class="from p-author">From {{ if .Params.author }}<b>{{.Params.author}}</b> at {{ end }}<a href="{{ "/categories/" | relLangURL }}{{ .Params.feed_name | urlize }}">{{ .Params.feed_name }}</a></span></div>
+          
+          {{ $postPermalink := .Permalink}}
+          <time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time>
+          <h2 class="p-name"><a href="{{ .Permalink }}" class="u-url">{{ .Title }}</a></h2>
+          
+        </header>
+        
+        {{ with (index (.Resources.ByType "image") 0) }}
+        {{ $height := add .Height 0.0}}
+        {{ $ratio := div $height .Width}}
+        {{ $thumb := .Fit "540x540 q80 webp"}}
+        <div class="p-summary{{if gt $ratio 1 }} portrait {{else}} landscape {{end}}">
+          <div class="summary-image {{if gt $ratio 1 }} portrait {{else}} landscape {{end}}"> 
+            <a href="{{ $postPermalink }}"><img src="{{ $thumb.Permalink }}"  alt="{{ .Title }}"> </a>
+          </div>
+          {{ else }}
+          <div class="p-summary">
+            {{ end }}
+            <div class="summary-text">
+              {{ .Summary }}
+            </div>
+          </div>
+          
+          <footer class='post-footer'>
+            <a href="{{ .RelPermalink }}">
+              <svg width="11" height="11" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
+                <path d="M10.2172 3.892C9.86979 3.02585 9.33722 2.34509 8.61023 1.77874C8.23826 1.49028 7.72957 1.04191 7.21547 0.839212C7.21382 0.703503 7.14487 0.575079 6.97767 0.503871C5.42624 -0.162284 3.69503 0.311299 2.52647 1.51482C1.94635 2.11223 1.51951 2.8478 1.21108 3.62501C0.914861 4.3676 0.507572 5.32483 0.948415 6.07996C1.00646 6.17836 1.09356 6.24193 1.1908 6.27306C1.2735 7.35573 1.57765 8.46801 2.37847 9.21874C3.2325 10.0162 4.43613 10.3053 5.5673 10.1773C6.72371 10.0468 7.96432 9.57061 8.8816 8.82474C9.01086 8.71974 9.1274 8.60844 9.23337 8.49296C9.27968 8.4924 9.32805 8.4875 9.37839 8.4718C11.3643 7.82491 10.8101 5.37347 10.2172 3.892Z" />
+              </svg>
+            </a>
+          </footer>            
+        </article>
+      </div>
diff --git a/themes/lumbung-theme/static/css/main.css b/themes/lumbung-theme/static/css/main.css
index 3134b60..fb3980a 100644
--- a/themes/lumbung-theme/static/css/main.css
+++ b/themes/lumbung-theme/static/css/main.css
@@ -507,6 +507,128 @@ div.network-source {
     padding: 0.5em 1.2em 0.5em 1.2em;
 }
 
+/* pen cards */
+.card.pen {
+    border: 2px solid var(--pen-dark);
+    background-color: var(--pen-light);
+    max-width: min-content;
+    margin-bottom: 2em;
+    flex: auto;
+    margin: 0 3em 3em 0;
+    align-self: start;
+    color: var(--shouts-dark);
+}
+
+.h-entry.pen header {
+    display: flex;
+    flex-direction: column;
+}
+
+.h-entry.pen header h2 {
+    padding: 0.2em 0.5em 0.5em 0.5em;
+    margin: 0;
+    border: none;
+}
+
+.h-entry.pen header h2:hover {
+    cursor: pointer;
+}
+
+.h-entry.pen header h2 a {
+    text-decoration: none;
+    color: var(--pen-dark);
+}
+
+.h-entry.pen header time {
+    text-align: right;
+    padding: 0.6em 0.8em;
+    padding-top: 0;
+    font-size: 1rem;
+}
+
+.pen .header-metadata {
+    align-items: center;
+}
+
+.pen .header-metadata .dt-published {
+    border-bottom: 2px solid var(--pen-dark);
+}
+
+.pen .filler {
+    min-height: 1rem;
+}
+
+.pen .author.p-author {
+    border-color: var(--pen-dark);
+    padding: 0.5em 1.2em 0.5em 1.2em;
+}
+
+.pen .p-summary {
+    display: flex;
+}
+
+.pen .p-summary.portrait {
+    flex-direction: row;
+}
+
+.pen .p-summary.landscape {
+    flex-direction: column;
+}
+
+.pen .summary-image > img {
+    display: inherit;
+}
+
+.pen .summary-text {
+    font-size: 18px;
+}
+
+div.pen-source {
+    padding: 1em;
+    font-size: 14px;
+    display: flex;
+    justify-content: space-between;
+    background-color: var(--pen-dark);
+    color: white;
+    margin: auto;
+    position: relative;
+    bottom: 21px;
+    transform:  rotate(1deg);
+}
+
+
+.pen-source a {
+    font-weight: bold;
+    color: white;
+}
+
+.pen .footer-filler {
+    border-left: 2px solid var(--pen-dark);
+    border-top: none;
+}
+
+.pen footer.post-footer {
+    border-top: 2px solid var(--pen-dark);
+    flex-flow: row;
+    font-size: 0.9rem;
+    background-color: var(--pen-light);
+    color: var(--pen-dark);
+    padding: 0.25em 0.5em;
+}
+
+.pen footer svg {
+    fill: var(--pen-dark)
+}
+
+.pen .read-more {
+    border: none;
+    border-left: 2px solid var(--pen-dark);
+    padding: 0.5em 1.2em 0.5em 1.2em;
+}
+
+.pen .footer-metadata {
+    padding: 0.5em 1.2em 0.5em 1.2em;
+}
 
 /* shouts cards */