diff --git a/services/frontend/src/components/Modal/Service/Labels.tsx b/services/frontend/src/components/Modal/Service/Labels.tsx
index 7ae6d92..a0a2fa8 100644
--- a/services/frontend/src/components/Modal/Service/Labels.tsx
+++ b/services/frontend/src/components/Modal/Service/Labels.tsx
@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 import { PlusIcon } from "@heroicons/react/outline";
-import { styled } from "@mui/joy";
+import { Button, styled } from "@mui/joy";
 import { useFormikContext } from "formik";
 import Record from "../../Record";
 import { IService } from "../../../types";
@@ -8,6 +8,7 @@ import { IService } from "../../../types";
 const Root = styled("div")`
   display: flex;
   flex-direction: column;
+  align-items: center;
 `;
 
 const Records = styled("div")`
@@ -16,6 +17,17 @@ const Records = styled("div")`
   row-gap: ${({ theme }) => theme.spacing(1)};
 `;
 
+const AddButton = styled(Button)`
+  width: 140px;
+  margin-top: ${({ theme }) => theme.spacing(2)};
+`;
+
+const Description = styled("p")`
+  margin-top: ${({ theme }) => theme.spacing(2)};
+  text-align: center;
+  color: #7a7a7a;
+`;
+
 const Labels = () => {
   const formik = useFormikContext<{
     serviceConfig: IService;
@@ -42,44 +54,42 @@ const Labels = () => {
   const emptyLabels = labels && labels.length === 0 ? true : false;
 
   return (
-    <>
-      <Root sx={{ alignItems: emptyLabels ? "center" : "flex-start" }}>
-        {!emptyLabels && (
-          <Records>
-            {labels.map((_: unknown, index: number) => (
-              <Record
-                key={index}
-                index={index}
-                formik={formik}
-                fields={[
-                  {
-                    name: `serviceConfig.labels[${index}].key`,
-                    placeholder: "Key"
-                  },
-                  {
-                    name: `serviceConfig.labels[${index}].value`,
-                    placeholder: "Value"
-                  }
-                ]}
-                onRemove={handleRemoveLabel}
-              />
-            ))}
-          </Records>
-        )}
-        {emptyLabels && (
-          <p className="mt-4 text-md text-gray-500 dark:text-gray-400 text-center">
-            add labels
-          </p>
-        )}
-      </Root>
+    <Root>
+      {!emptyLabels && (
+        <Records>
+          {labels.map((_: unknown, index: number) => (
+            <Record
+              key={index}
+              index={index}
+              formik={formik}
+              fields={[
+                {
+                  name: `serviceConfig.labels[${index}].key`,
+                  placeholder: "Key"
+                },
+                {
+                  name: `serviceConfig.labels[${index}].value`,
+                  placeholder: "Value"
+                }
+              ]}
+              onRemove={handleRemoveLabel}
+            />
+          ))}
+        </Records>
+      )}
+      {emptyLabels && (
+        <Description>
+          This service does not have any labels.
+          <br />
+          Click "+ New label" to add a new label.
+        </Description>
+      )}
 
-      <div className="flex justify-end pt-2">
-        <button className="btn-util" onClick={handleNewLabel}>
-          <PlusIcon className="h-4 w-4 mr-1" />
-          New Labels
-        </button>
-      </div>
-    </>
+      <AddButton size="sm" variant="plain" onClick={handleNewLabel}>
+        <PlusIcon className="h-4 w-4 mr-2" />
+        New label
+      </AddButton>
+    </Root>
   );
 };