diff --git a/components/TheWelcome.vue b/components/TheWelcome.vue
index 3618868..f35b478 100644
--- a/components/TheWelcome.vue
+++ b/components/TheWelcome.vue
@@ -36,11 +36,11 @@ const parsedHealthCheckData = computed(() => {
 </script>
 
 <template>
-  <div class="flex h-screen items-center justify-center">
+  <div class="TheWelcome">
     <Head>
       <Title>sidebase</Title>
     </Head>
-    <div class="flex w-4/6 max-w-lg flex-col">
+    <div class="container">
       <h1 class="text-4xl">
         Welcome to <a href="https://github.com/sidebase/sidebase" target="_blank" class="GradientText">sidebase</a>!
       </h1>
@@ -48,12 +48,12 @@ const parsedHealthCheckData = computed(() => {
       <p class="my-4">
         The data you see below is fetched from an API that is connected to a running database.
       </p>
-      <ol v-if="parsedHealthCheckData" class="border-l border-gray-300">
+      <ol v-if="parsedHealthCheckData" class="TimeLine">
         <TimelineItem border-color="border-green-500" :title="`Server v${parsedHealthCheckData.nuxtAppVersion} initialized`" />
         <TimelineItem border-color="border-green-500" :title="`Started at ${parsedHealthCheckData.startupTime.toLocaleString()}`" />
         <TimelineItem border-color="border-blue-500" title="Healthy" :content="`Last checked at ${parsedHealthCheckData.time.toLocaleString()}`" />
       </ol>
-      <ol v-else class="border-l border-gray-300">
+      <ol v-else class="TimeLine">
         <TimelineItem
           border-color="border-red-500"
           title="Server initialization failed"
@@ -71,6 +71,36 @@ const parsedHealthCheckData = computed(() => {
 </template>
 
 <style>
+.TheWelcome {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 66.666667%;
+  max-width: 32rem;
+}
+
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.TimeLine {
+  border-left-width: 1px;
+  border-color: #D1D5DB;
+
+}
+
 .GradientText {
   background: linear-gradient(to right, #5eaa95 10%, #12a87b 40%, #0FCF97 60%, #5eaa95 90%);
   background-size: 200% auto;
diff --git a/components/TimelineItem.vue b/components/TimelineItem.vue
index 9ed598f..74c06f7 100644
--- a/components/TimelineItem.vue
+++ b/components/TimelineItem.vue
@@ -17,12 +17,54 @@ defineProps({
 
 <template>
   <li>
-    <div class="flex flex-start items-center pt-3">
-      <div :class="borderColor" class="-ml-2 mr-3 h-4 w-4 rounded-full border-2 bg-white"></div>
-      <h4 class="mb-[1px] font-semibold text-gray-800">{{ title }}</h4>
+    <div class="top">
+      <div :class="borderColor" class="icon" />
+      <h4 class="title">{{ title }}</h4>
     </div>
-    <div v-if="content" class="ml-[21px]">
-      <p class="text-gray-500 text-sm">{{ content }}</p>
+    <div v-if="content" style="margin-left: 21px">
+      <p class="content">{{ content }}</p>
     </div>
   </li>
 </template>
+
+<style scoped>
+.top {
+  display: flex;
+  padding-top: 0.75rem;
+  align-items: center;
+}
+
+.icon {
+  margin-right: 0.75rem;
+  margin-left: -0.5rem;
+  background-color: #ffffff;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 9999px;
+  border-width: 2px;
+}
+
+.border-blue-500 {
+  border-color: #3B82F6;
+}
+
+.border-green-500 {
+  border-color: #10B981;
+}
+
+.border-red-500 {
+  border-color: #EF4444;
+}
+
+.title {
+  color: #1F2937;
+  font-weight: 600;
+  margin-bottom: 1px;
+}
+
+.content {
+  color: #6B7280;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+</style>
