--- a/web_resources/style/feed-preview.css	Tue Nov 27 16:05:14 2018 +0100
+++ b/web_resources/style/feed-preview.css	Fri Dec 07 23:00:41 2018 +0100
@@ -9,9 +9,21 @@
 @import url("common.css");
 
 :root {
+  --blue-50-a30: rgba(10, 132, 255, 0.3);
   --default-background: var(--grey-10);
   --entry-background: var(--white-100);
+  --primary-color: var(--grey-90);
   --secondary-color: var(--grey-50);
+  --button-focus-shadow: 0 0 0 1px var(--blue-50) inset,
+      0 0 0 1px var(--blue-50), 0 0 0 4px var(--blue-50-a30);
+  --primary-button-color: var(--white-100);
+  --primary-button-background-color: var(--blue-60);
+  --primary-button-hover-background-color: var(--blue-70);
+  --primary-button-active-background-color: var(--blue-80);
+  --secondary-button-color: var(--primary-color);
+  --secondary-button-background-color: var(--grey-90-a10);
+  --secondary-button-hover-background-color: var(--grey-90-a20);
+  --secondary-button-active-background-color: var(--grey-90-a30);
   --entry-content-border: 1px solid var(--grey-90-a10);
   --font-family-default: "Segoe UI", "San Fancisco", "Ubuntu", sans-serif;
   --font-display-20: 300 36px var(--font-family-default);
@@ -57,12 +69,95 @@
   }
 }
 
+#feed-subscription {
+  width: 100%;
+  max-width: 80ch;
+  margin: 0 auto 32px auto;
+  padding: 0 16px;
+  white-space: nowrap;
+}
+
+#feed-subscription fieldset[name="main"] {
+  display: flex;
+  align-items: baseline;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+#feed-subscription fieldset[name="main"] > * + * {
+  margin-left: 8px;
+}
+
+#feed-reader-selection {
+  -moz-appearance: none;
+  appearance: none;
+  border: none;
+  border-radius: 2px;
+  padding: 0 28px 0 8px;
+  height: 32px;
+  min-width: 20ch;
+  color: var(--secondary-button-color);
+  background-color: var(--secondary-button-background-color);
+  background-image: url('../images/arrow.svg');
+  background-repeat: no-repeat;
+  background-position: center right 8px;
+  background-size: 12px;
+  flex-grow: 1;
+  flex-shrink: 1;
+  text-overflow: ellipsis;
+}
+
+#feed-reader-selection:not(:disabled):hover {
+  background-color: var(--secondary-button-hover-background-color);
+}
+
+#feed-reader-selection:not(:disabled):active {
+  background-color: var(--secondary-button-active-background-color);
+}
+
+#feed-reader-selection option:hover,
+#feed-reader-selection option:active,
+#feed-reader-selection option:focus {
+  background-color: red;
+}
+
+#subscribe {
+  color: var(--primary-button-color);
+  background-color: var(--primary-button-background-color);
+  border-radius: 2px;
+  padding: 0 8px;
+  height: 32px;
+  min-width: 132px;
+  text-align: center;
+  border: none;
+}
+
+#subscribe:not(:disabled):hover {
+  background-color: var(--primary-button-hover-background-color);
+}
+
+#feed-reader-selection:not(:disabled):focus,
+#subscribe:not(:disabled):focus {
+  box-shadow: var(--button-focus-shadow);
+}
+
+#subscribe:not(:disabled):active {
+  background-color: var(--primary-button-active-background-color);
+}
+
+#feed-reader-selection:disabled,
+#subscribe:disabled {
+  opacity: .4;
+}
+
 #feed-header {
   width: 100%;
   max-width: 80ch;
   min-width: 40ch;
   padding: 16px;
   margin: 0 auto;
+  border-top: 1px solid var(--grey-90-a10);
 }
 
 #feed-logo {
@@ -136,6 +231,7 @@
   width: 16px;
   height: 16px;
   flex: 0 0 16px;
+  transform: rotate(-90deg);
   transition: 100ms;
 }
 
@@ -144,7 +240,7 @@
 }
 
 details.entry[open] > summary::before {
-  transform: rotate(90deg);
+  transform: rotate(0deg);
   transition: 100ms;
 }