diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss
index fe1e941e..40efda84 100644
--- a/styles/components/_portfolio_layout.scss
+++ b/styles/components/_portfolio_layout.scss
@@ -20,6 +20,41 @@
}
}
+.portfolio-header {
+ margin: 2 * $gap 0;
+
+ .portfolio-header__name {
+ @include h1;
+ }
+
+ .portfolio-header__budget {
+ font-size: $small-font-size;
+ align-items: center;
+
+ button {
+ margin: 0;
+ padding: 0;
+ }
+
+ .portfolio-header__budget--dollars {
+ font-size: $h2-font-size;
+ font-weight: bold;
+ }
+ }
+
+ .links {
+ font-size: $small-font-size;
+
+ .link--icon {
+ text-align: center;
+ }
+
+ .icon {
+ @include icon-size(20);
+ }
+ }
+}
+
.portfolio-navigation {
@include panel-margin;
margin-bottom: $gap * 4;
diff --git a/templates/portfolios/header.html b/templates/portfolios/header.html
index cc8894de..f5d8d2bf 100644
--- a/templates/portfolios/header.html
+++ b/templates/portfolios/header.html
@@ -1 +1,44 @@
-{{ portfolio.name }}
+{% from "components/icon.html" import Icon %}
+
+{% macro Link(icon, text, url, active=False) %}
+
+