diff --git a/src/apps/treasury/assets/arrow.svg b/src/apps/treasury/assets/arrow.svg
new file mode 100644
index 0000000..0bf25db
--- /dev/null
+++ b/src/apps/treasury/assets/arrow.svg
@@ -0,0 +1,5 @@
+<svg data-bbox="1.333 3.334 13.333 9.333" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16" data-type="shape">
+    <g>
+        <path d="m10 3.334-.94.94 3.053 3.06H1.333v1.333h10.78l-3.06 3.06.947.94 4.666-4.666L10 3.334Z"></path>
+    </g>
+</svg>
diff --git a/src/apps/treasury/assets/custom.css b/src/apps/treasury/assets/custom.css
index 6ebe3ed..fd540ae 100644
--- a/src/apps/treasury/assets/custom.css
+++ b/src/apps/treasury/assets/custom.css
@@ -11,6 +11,14 @@
   font-family: 'Poppins-SemiBold';
   src: url('Poppins/Poppins-SemiBold.ttf') format('truetype');
 }
+@font-face {
+  font-family: 'Poppins-Bold';
+  src: url('Poppins/Poppins-Bold.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Poppins-ExtraBold';
+  src: url('Poppins/Poppins-ExtraBold.ttf') format('truetype');
+}
 /* Set the default font to Poppins regular*/
 *{
   font-family: 'Poppins', sans-serif;
@@ -67,4 +75,14 @@ body{
 
 .btn {
   background-color: #00cc33;
+  border: 0px;
+  border-radius: 500px;
+  color: #000;
+  padding-left: 50px;
+  padding-right: 50px;
+  font-family: 'Poppins-SemiBold';
+}
+
+a {
+  color: #00cc33;
 }
diff --git a/src/apps/treasury/pages/hud.py b/src/apps/treasury/pages/hud.py
index 9139109..3243fdd 100644
--- a/src/apps/treasury/pages/hud.py
+++ b/src/apps/treasury/pages/hud.py
@@ -8,7 +8,7 @@
 import plotly.graph_objects as go
 import plotly.express as px
 
-from src.apps.treasury.util.constants import BCT_ERC20_CONTRACT
+from src.apps.treasury.util.constants import BCT_ERC20_CONTRACT, KLIMA_GREEN
 from src.apps.treasury.data.protocol_metrics import \
     sg, last_metric, get_last_asset_price_by_address
 
@@ -26,14 +26,16 @@
     go.Indicator(
         mode="number",
         value=sg.query([last_metric.marketCap]),
-        number={"prefix": "$", "valueformat": ".2s"},
+        number={"prefix": "$", "valueformat": ".2s", "font": {"family": "Poppins-ExtraBold"}},
         title={
             "text":
-            ("KLIMA <a title='KLIMA supply multiplied by current price' href="
+            ("KLIMA<br><b><a title='KLIMA supply multiplied by current price' href="
              "'https://www.coinbase.com/learn/crypto-basics/what-is-market-cap'>"
-             "Market Cap</a>")
+             "Market Cap</a></b>"),
+            'align': 'left',
+            "font": {"family": "Poppins-Bold", 'size': 30}
         },
-        domain={'y': [0, 0.5], 'x': [0.25, 0.75]},
+        domain={'y': [0, 0.35], 'x': [0.25, 0.75]},
     )
 )
 
@@ -42,12 +44,14 @@
     go.Indicator(
         mode="number",
         value=sg.query([last_metric.treasuryMarketValue]),
-        number={"prefix": "$", "valueformat": ".2s"},
+        number={"prefix": "$", "valueformat": ".2s", "font": {"family": "Poppins-ExtraBold"}},
         title={
             "text":
-            "Treasury <a href='https://en.wikipedia.org/wiki/Market_value'>Market Value</a>"
+            "Treasury<br><b><a href='https://en.wikipedia.org/wiki/Market_value'>Market Value</a></b>",
+            'align': 'left',
+            "font": {"family": "Poppins-Bold", 'size': 30}
         },
-        domain={'y': [0.5, 1], 'x': [0.25, 0.75]},
+        domain={'y': [0.65, 1], 'x': [0.25, 0.75]},
     )
 )
 
@@ -131,73 +135,78 @@
 
 
 # TODO: style holdings as $xx.yy[m/k] (i.e. human-formatted like indicators)
-# TODO: visualize targets in some way
+# TODO: visualize targets in a better way on single chart
 # TODO: load targets from Google Sheet for ease of maintenance
+color_map = {
+    'Op Ex': '#f2ae00',
+    'Carbon Forwards': '#6fff93',
+    'Carbon Backing': KLIMA_GREEN,
+    'Treasury Holdings': '#ddf641'
+}
+
 green_ratio_fig = px.pie(
     green_ratio_df, values="value",
     names="bucket", hole=.3, color="bucket",
-    color_discrete_map={
-        'Op Ex': '#f2ae00',
-        'Carbon Forwards': '#6fff93',
-        'Carbon Backing': '#00cc33',
-        'Treasury Holdings': '#ddf641'
-    },
+    color_discrete_map=color_map,
     category_orders={'bucket': order},
-    title="Green Ratio: Current",
+    title="Green Ratio:<br><b>Current</b>",
 )
 green_ratio_fig.update_layout(
-    title_x=0.5,
+    title_x=0.1,
+    title_font_size=30,
+    title_font_family='Poppins-Bold',
     legend=dict(
         yanchor='bottom',
-        y=-.5,
-        xanchor='auto',
-        x=.5
+        y=0,
+        xanchor='left',
+        x=1.25
     )
 )
 
 green_ratio_target_fig = px.pie(
     green_ratio_df, values="target",
     names="bucket", hole=.3, color="bucket",
-    color_discrete_map={
-        'Op Ex': '#f2ae00',
-        'Carbon Forwards': '#6fff93',
-        'Carbon Backing': '#00cc33',
-        'Treasury Holdings': '#ddf641'
-    },
+    color_discrete_map=color_map,
     category_orders={'bucket': order},
-    title="<a href='https://forum.klimadao.finance/d/285-rfc-green-ratio'>Green Ratio: Target</a>",
+    title="<a href='https://forum.klimadao.finance/d/285-rfc-green-ratio'>Green Ratio:<br><b>Target</b></a>",
 )
 green_ratio_target_fig.update_layout(
-    title_x=0.5,
+    title_x=0.1,
+    title_font_size=30,
+    title_font_family='Poppins-Bold',
     legend=dict(
         yanchor='bottom',
-        y=-.5,
-        xanchor='auto',
-        x=.5
+        y=0,
+        xanchor='left',
+        x=1.25
     )
 )
 
-layout = dbc.Container([
-    html.Div([
-        dbc.Row([
-            dbc.Col([
-                dcc.Graph(figure=metric_fig)
-            ], xs=12, sm=12, md=12, lg=4, xl=4),
-            dbc.Col([
-                dcc.Graph(figure=green_ratio_fig)
-            ], xs=12, sm=6, md=6, lg=4, xl=4),
-            dbc.Col([
-                dcc.Graph(figure=green_ratio_target_fig)
-            ], xs=12, sm=6, md=6, lg=4, xl=4)
-        ]),
-        dbc.Row([
-            dbc.Col([
-                dbc.Button(
-                    'Learn more',
-                    size='lg',
-                    href='https://dune.com/klimadao/klima'
-                )
-            ], xs=12, sm=12, md=12, lg=12, xl=12)
-        ])
-    ], className='center')
-], id='page_content_hud', fluid=True)
+layout = dbc.Container(
+    [
+        html.Div([
+            dbc.Row([
+                dbc.Col([
+                    dcc.Graph(figure=metric_fig)
+                ], xs=12, sm=12, md=12, lg=4, xl=4),
+                dbc.Col([
+                    dcc.Graph(figure=green_ratio_fig)
+                ], xs=12, sm=6, md=6, lg=4, xl=4),
+                dbc.Col([
+                    dcc.Graph(figure=green_ratio_target_fig)
+                ], xs=12, sm=6, md=6, lg=4, xl=4)
+            ]),
+            dbc.Row([
+                dbc.Col([
+                    dbc.Button(
+                        ['LEARN MORE   ', html.Img(src='./assets/arrow.svg')],
+                        size='lg',
+                        href='https://dune.com/klimadao/klima'
+                    )
+                ], xs=12, sm=12, md=12, lg=12, xl=12)
+            ])
+        ], className='center')
+    ],
+    id='page_content_hud', fluid=True,
+    style={'border': f'4px solid {KLIMA_GREEN}', 'border-radius': '30px', 'padding': '20px', 'margin': '10px'}
+)
diff --git a/src/apps/treasury/util/constants.py b/src/apps/treasury/util/constants.py
index 3d38046..9d6ca69 100644
--- a/src/apps/treasury/util/constants.py
+++ b/src/apps/treasury/util/constants.py
@@ -13,3 +13,6 @@
 BCT_USDC_PAIR = '0x1E67124681b402064CD0ABE8ed1B5c79D2e02f64'
 KLIMA_MCO2_PAIR = '0x64a3b8ca5a7e406a78e660ae10c7563d9153a739'
 KLIMA_USDC_PAIR = '0x5786b267d35f9d011c4750e0b0ba584e1fdbead1'
+
+# Colors
+KLIMA_GREEN = '#00cc33'