diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue
index 03875ae..f73c42b 100644
--- a/src/components/LoginPage.vue
+++ b/src/components/LoginPage.vue
@@ -42,8 +42,34 @@ button {
     display: flex;
     justify-content: center;
     align-items: center;
+
+    /* Add a shadow to make the buttons look like they are floating */
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
 
+/* Some nice flat nuetral shades for the user buttons */
+
+li:nth-child(1) > button {
+    background-color: #3939ff;
+    color: white;
+}
+
+li:nth-child(2) > button {
+    background-color: #156a14;
+    color: white;
+}
+
+li:nth-child(3) > button {
+    background-color: #325293;
+    color: white;
+}
+
+li:nth-child(4) > button {
+    background-color: #9a1f1f;
+    color: white;
+}
+
+
 </style>
 
 <script>