diff --git a/client/package.json b/client/package.json
index efa53ac..8b565c7 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@ocula/client",
     "title": "Ocula",
-    "version": "0.5.1",
+    "version": "1.0.1",
     "main": "./src/index.ts",
     "repository": "https://github.com/andrewcourtice/ocula.git",
     "author": "Andrew Courtice",
diff --git a/client/src/components/charts/trends.vue b/client/src/components/charts/trends.vue
index 2d73d36..8a1a2e2 100644
--- a/client/src/components/charts/trends.vue
+++ b/client/src/components/charts/trends.vue
@@ -4,7 +4,7 @@
             <line-chart class="trends-chart__chart" :data="data" :options="options" />
             <div class="trends-chart__now" layout="column center-left">
                 <span class="trends-chart__now-label">
-                    <slot name="start-label">Now</slot>
+                    <slot name="start-label" :value="data[0]">Now</slot>
                 </span>
             </div>
             <template v-for="value in data.slice(1, -1)" :key="keyBy(value)">
@@ -17,7 +17,7 @@
             </template>
             <div class="trends-chart__later" layout="column center-right">
                 <span class="trends-chart__later-label">
-                    <slot name="end-label">Later</slot>
+                    <slot name="end-label" :value="data[data.length - 1]">Later</slot>
                 </span>
             </div>
         </div>
diff --git a/client/src/components/forecast/tides.vue b/client/src/components/forecast/tides.vue
index ef9cdc2..e945d0b 100644
--- a/client/src/components/forecast/tides.vue
+++ b/client/src/components/forecast/tides.vue
@@ -12,11 +12,11 @@
             </div>
         </div>
         <trends class="forecast-tides__trends" :data="tides.heights" :options="chartOptions" :key-by="entry => entry.dt.raw">
-            <template #start-label>12 AM</template>
+            <template #start-label="data">{{ getTime(data.value) }}</template>
             <template #primary-column="column">
                 <small>{{ getTime(column.value) }}</small>
             </template>
-            <template #end-label>12 AM</template>
+            <template #end-label="data">{{ getTime(data.value) }}</template>
         </trends>
         <div class="forecast-tides__disclaimer">
             <small class="text--meta">All tide measurements are displayed in metres (m)</small>
diff --git a/client/src/routes/settings/about.vue b/client/src/routes/settings/about.vue
index 80ccf84..cb4d751 100644
--- a/client/src/routes/settings/about.vue
+++ b/client/src/routes/settings/about.vue
@@ -1,33 +1,42 @@
 <template>
     <settings-layout class="route settings-about" title="About" :back-route="backRoute">
-        <div class="padding__horizontal--large">
-            <div class="text--centre">
+        <div class="settings-about__body">
+            <div class="settings-about__header">
                 <img class="settings-about__logo" :src="logo" alt="Ocula">
-                <h1>{{ manifest.title }}</h1>
-                <div>{{ manifest.description }}</div>
-            </div>
-            <div class="settings-about__details-grid margin__top--large">
-                <strong>Version</strong>
-                <div>{{ manifest.version }}</div>
-                <strong>Author</strong>
-                <div>{{ manifest.author }}</div>
-                <strong>Licence</strong>
-                <div>{{ manifest.license }}</div>
-                <strong>Source</strong>
-                <a :href="manifest.repository" target="_blank">Github</a>
-            </div>
-            <div class="settings-about__details-grid margin__top--large">
-                <strong>Forecast Data</strong>
-                <a href="https://openweathermap.org" target="_blank">Open Weather Maps</a>
-                <strong>Maps/Geocoding</strong>
-                <a href="https://www.mapbox.com" target="_blank">Mapbox</a>
-                <strong>Map Tiles</strong>
-                <a href="https://www.rainviewer.com" target="_blank">RainViewer</a>
-                <strong>Logo Design</strong>
-                <a href="https://github.com/ethanroxburgh" target="_blank">Ethan Roxburgh</a>
-                <strong>Icons</strong>
-                <a href="https://remixicon.com/" target="_blank">Remix Icons</a>
+                <h1 class="settings-about__title">{{ manifest.title }}</h1>
+                <div class="settings-about__subtitle">{{ manifest.description }}</div>
             </div>
+            <block class="settings-about__block" title="Details">
+                <div class="settings-about__details-grid">
+                    <strong>Version</strong>
+                    <div>{{ manifest.version }}</div>
+                    <strong>Author</strong>
+                    <div>{{ manifest.author }}</div>
+                    <strong>Licence</strong>
+                    <div>{{ manifest.license }}</div>
+                    <strong>Source</strong>
+                    <a :href="manifest.repository" target="_blank">Github</a>
+                </div>
+            </block>
+            <block class="settings-about__block" title="Attribution">
+                <div class="settings-about__details-grid">
+                    <strong>Forecast Data</strong>
+                    <a href="https://openweathermap.org" target="_blank">Open Weather Maps</a>
+                    <strong>Tide Data</strong>
+                    <a href="https://www.worldtides.info" target="_blank">World Tides</a>
+                    <strong>Maps/Geocoding</strong>
+                    <a href="https://www.mapbox.com" target="_blank">Mapbox</a>
+                    <strong>Radar Imagery</strong>
+                    <a href="https://www.rainviewer.com" target="_blank">RainViewer</a>
+                    <strong>Logo Design</strong>
+                    <a href="https://github.com/ethanroxburgh" target="_blank">Ethan Roxburgh</a>
+                    <strong>Icons</strong>
+                    <a href="https://remixicon.com" target="_blank">Remix Icons</a>
+                </div>
+            </block>
+            <block class="settings-about__block" title="Sponsors">
+                <div>Kerry Tarrant</div>
+            </block>
             <div class="margin__top--large text--centre">
                 <small class="text--meta">Psalm 147:8</small>
             </div>
@@ -70,10 +79,35 @@ export default defineComponent({
 
 <style lang="scss">
 
+    .settings-about__body {
+        padding: 0 var(--spacing__small);
+    }
+
+    .settings-about__header {
+        text-align: center;
+        margin-bottom: var(--spacing__large);
+    }
+
+    .settings-about__title {
+        text-transform: uppercase;
+        letter-spacing: 0.2em;
+    }
+
     .settings-about__logo {
         width: 96px;
     }
 
+    .settings-about__block {
+        
+        &:not(:last-of-type) {
+            margin-bottom: var(--spacing__small);
+        }
+
+        & .block__title {
+            color: var(--font__colour--meta);
+        }
+    }
+
     .settings-about__details-grid {
         display: grid;
         grid-template-columns: auto 1fr;
diff --git a/client/src/routes/settings/index.vue b/client/src/routes/settings/index.vue
index 69a4756..aa19225 100644
--- a/client/src/routes/settings/index.vue
+++ b/client/src/routes/settings/index.vue
@@ -1,34 +1,46 @@
 <template>
     <settings-layout class="route settings-index">
-        <div class="settings-index__settings menu">
-            <settings-item class="menu-item" label="Units" :value="unit.label">
-                <select name="units" v-model="units">
-                    <option v-for="(value, key) in unitOptions" :key="key" :value="key">{{ value.label }}</option>
-                </select>
-            </settings-item>
-            <router-link class="link--inherit" :to="routes.locations">
-                <settings-item class="menu-item" label="Locations" :value="locationsLabel"></settings-item>
-            </router-link>
-            <router-link class="link--inherit" :to="routes.sections">
-                <settings-item class="menu-item" label="Sections"></settings-item>
-            </router-link>
-            <settings-item class="menu-item" label="Default Map" :value="map.label">
-                <select name="default-map" v-model="defaultMap">
-                    <option v-for="(value, key) in mapOptions" :key="key" :value="key">{{ value.label }}</option>
-                </select>
-            </settings-item>
-            <router-link class="link--inherit" :to="routes.theme">
-                <settings-item class="menu-item" label="Theme" :value="theme.core.name"></settings-item>
-            </router-link>
-            <settings-item class="menu-item" label="Update" @click.native="updateApplication">
-                <template #value>
-                    <loader v-if="updating"></loader>
-                </template>
-            </settings-item>
-            <settings-item class="menu-item" label="Reset" @click.native="reset"></settings-item>
-            <router-link class="link--inherit" :to="routes.about">
-                <settings-item class="menu-item" label="About"></settings-item>
-            </router-link>
+        <div class="settings-index__body">
+            <block class="settings-index__block" title="Forecast">
+                <div class="menu">
+                    <settings-item class="menu-item" label="Units" :value="unit.label">
+                        <select name="units" v-model="units">
+                            <option v-for="(value, key) in unitOptions" :key="key" :value="key">{{ value.label }}</option>
+                        </select>
+                    </settings-item>
+                    <router-link class="link--inherit" :to="routes.locations">
+                        <settings-item class="menu-item" label="Locations" :value="locationsLabel"></settings-item>
+                    </router-link>
+                    <router-link class="link--inherit" :to="routes.sections">
+                        <settings-item class="menu-item" label="Sections"></settings-item>
+                    </router-link>
+                </div>
+            </block>
+            <block class="settings-index__block" title="Maps">
+                <div class="menu">
+                    <settings-item class="menu-item" label="Default Map" :value="map.label">
+                        <select name="default-map" v-model="defaultMap">
+                            <option v-for="(value, key) in mapOptions" :key="key" :value="key">{{ value.label }}</option>
+                        </select>
+                    </settings-item>
+                </div>
+            </block>
+            <block class="settings-index__block" title="General">
+                <div class="menu">
+                    <router-link class="link--inherit" :to="routes.theme">
+                        <settings-item class="menu-item" label="Theme" :value="theme.core.name"></settings-item>
+                    </router-link>
+                    <settings-item class="menu-item" label="Update" @click.native="updateApplication">
+                        <template #value>
+                            <loader v-if="updating"></loader>
+                        </template>
+                    </settings-item>
+                    <settings-item class="menu-item" label="Reset" @click.native="reset"></settings-item>
+                    <router-link class="link--inherit" :to="routes.about">
+                        <settings-item class="menu-item" label="About"></settings-item>
+                    </router-link>
+                </div>
+            </block>
         </div>
     </settings-layout>
 </template>
@@ -167,8 +179,23 @@ export default defineComponent({
         padding: var(--spacing__large);
     }
 
-    .settings-index__settings {
+    .settings-index__body {
         padding: 0 var(--spacing__small);
     }
 
+    .settings-index__block {
+
+        &:not(:last-of-type) {
+            margin-bottom: var(--spacing__small);
+        }
+
+        & .block__title {
+            color: var(--font__colour--meta);
+        }
+
+        & .block__body {
+            padding: var(--spacing__small) 0;
+        }
+    }
+
 </style>
\ No newline at end of file
diff --git a/package.json b/package.json
index b07665d..561b9d8 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,5 @@
 {
     "name": "@ocula/app",
-    "version": "1.0.0",
-    "main": "index.js",
     "repository": "https://github.com/andrewcourtice/ocula.git",
     "author": "Andrew Courtice",
     "description": "The free and open-source progressive weather app",