diff --git a/service/docker-compose.yml b/service/docker-compose.yml
index 5d1ae42..02c26bf 100644
--- a/service/docker-compose.yml
+++ b/service/docker-compose.yml
@@ -26,12 +26,13 @@ services:
       - .env
     environment:
       DATABASE_HOST: db
+      DATABASE_PORT: 5432
       SERVICE_HOST: service
       SERVICE_PORT: 5000
     ports:
       - "${SERVICE_PORT:-5000}:5000"
     build:
-      context: service
+      context: .
     depends_on:
       - db
     networks:
diff --git a/ui/src/components/Metars/MetarModal.tsx b/ui/src/components/Metars/MetarModal.tsx
index d61fcdd..afd1382 100644
--- a/ui/src/components/Metars/MetarModal.tsx
+++ b/ui/src/components/Metars/MetarModal.tsx
@@ -134,7 +134,14 @@ function MetarInfo({ metar }: { metar: Metar }) {
                         ) : (
                           <></>
                         )}
-                        {metar.wind_dir_degrees && metar.wind_dir_degrees == 'VRB' ? <FaArrowsSpin /> : <></>}
+                        {metar.wind_dir_degrees && metar.wind_dir_degrees == 'VRB' ? (
+                          <>
+                            <FaArrowsSpin />
+                            VRB
+                          </>
+                        ) : (
+                          <></>
+                        )}
                       </Card.Section>
                     </Card>
                   )}
@@ -143,10 +150,10 @@ function MetarInfo({ metar }: { metar: Metar }) {
             </Grid>
           </Grid.Col>
           <Grid.Col className='gutter-row' span={12}>
-            <Grid style={{ padding: '2px' }}>
+            <Grid style={{ paddingTop: '1em', paddingBottom: '1em' }} gutter={48}>
               {metar.wx_string &&
                 metar.wx_string.split(' ').map((wx) => (
-                  <Grid.Col span={4}>
+                  <Grid.Col span={1}>
                     <MetarIcon wx={wx} />
                   </Grid.Col>
                 ))}