diff --git a/frontend/index.html b/frontend/index.html
index 6127731..966d182 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
       rel="stylesheet"
     />
     <title>Pyramids</title>
diff --git a/frontend/src/Button/Button.tsx b/frontend/src/Button/Button.tsx
index 0cffa60..c97f450 100644
--- a/frontend/src/Button/Button.tsx
+++ b/frontend/src/Button/Button.tsx
@@ -14,7 +14,7 @@ type ButtonProps = {
   icon?: ButtonIcons;
   variant?: ButtonVariants;
   className?: string;
-  type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
+  type: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];
 };
 
 function Button(props: ButtonProps) {
diff --git a/frontend/src/EventDetails/EventDetails.tsx b/frontend/src/EventDetails/EventDetails.tsx
index 55ddfb9..aea0895 100644
--- a/frontend/src/EventDetails/EventDetails.tsx
+++ b/frontend/src/EventDetails/EventDetails.tsx
@@ -10,7 +10,6 @@ import {
   UserIcon,
 } from "@heroicons/react/24/outline";
 import Keyword from "../Keyword/Keyword";
-import { KeywordOptions } from "../Keyword/KeywordTypes";
 
 type EventDetailsProps = {
   image: string;
@@ -99,7 +98,7 @@ function EventDetails(props: EventDetailsProps) {
           {props.keywords && (
             <section className={classes.keywords}>
               {props.keywords?.map((keyword) => (
-                <Keyword type={KeywordOptions.None}>{keyword}</Keyword>
+                <Keyword>{keyword}</Keyword>
               ))}
             </section>
           )}
diff --git a/frontend/src/Keyword/Keyword.module.css b/frontend/src/Keyword/Keyword.module.css
index 31f76de..94ce666 100644
--- a/frontend/src/Keyword/Keyword.module.css
+++ b/frontend/src/Keyword/Keyword.module.css
@@ -9,16 +9,17 @@
   height: 24px;
 }
 
-.DeleteKeyword {
+.keywordDelete {
   background: hsl(0, 3%, 93%);
+  color: hsl(0, 0%, 25%);
 }
 
-.AddKeyword {
+.keywordAdd {
   background: hsl(209, 100%, 96%);
   color: hsl(202, 15%, 25%);
 }
 
-.NoneKeyword {
+.keywordNone {
   background: hsl(0, 3%, 93%);
   border-radius: 8px;
   margin: 0;
@@ -44,12 +45,12 @@
 }
 
 .deleteButtonIcon {
-  color: hsl(0, 0%, 54%);
+  color: hsl(0, 0%, 44%);
   width: 22px;
   height: 22px;
   margin-top: 1px;
 }
 
 .addButtonIcon {
-  color: hsl(202, 15%, 25%);
+  color: hsl(202, 14%, 31%);
 }
diff --git a/frontend/src/Keyword/Keyword.tsx b/frontend/src/Keyword/Keyword.tsx
index a84dfdb..02f59f8 100644
--- a/frontend/src/Keyword/Keyword.tsx
+++ b/frontend/src/Keyword/Keyword.tsx
@@ -4,30 +4,25 @@ import { KeywordOptions } from "./KeywordTypes";
 
 type KeywordProps = {
   children: string;
-  type: KeywordOptions;
+  type?: KeywordOptions;
 };
 
 export default function Keyword(props: KeywordProps) {
   return (
     <div
       className={`${classes.keyword} ${
-        props.type === KeywordOptions.Delete && classes.DeleteKeyword
-      }
-        ${props.type === KeywordOptions.Add && classes.AddKeyword}
-        ${props.type === KeywordOptions.None && classes.NoneKeyword}`}
+        props.type && props.type === KeywordOptions.Add
+          ? classes.keywordAdd
+          : classes.keywordDelete
+      } ${!props.type && classes.keywordNone}`}
     >
       <div className={classes.keywordText}>{props.children}</div>
-      {props.type !== KeywordOptions.None && (
+      {props.type && (
         <button className={classes.button}>
-          {props.type === KeywordOptions.Delete && (
-            <XMarkIcon
-              className={`${classes.deleteButtonIcon} ${classes.icon}`}
-            />
-          )}
-          {props.type === KeywordOptions.Add && (
-            <PlusIcon
-              className={`${classes.deleteButtonIcon} ${classes.icon}`}
-            />
+          {props.type === KeywordOptions.Add ? (
+            <PlusIcon className={`${classes.addButtonIcon} ${classes.icon}`} />
+          ) : (
+            <XMarkIcon className={`${classes.deleteButtonIcon} ${classes.icon}`} />
           )}
         </button>
       )}
diff --git a/frontend/src/Keyword/KeywordTypes.tsx b/frontend/src/Keyword/KeywordTypes.tsx
index c24b3e5..63fce2c 100644
--- a/frontend/src/Keyword/KeywordTypes.tsx
+++ b/frontend/src/Keyword/KeywordTypes.tsx
@@ -1,5 +1,4 @@
 export enum KeywordOptions {
-  Delete,
-  Add,
-  None,
+  Delete = "delete",
+  Add = "add",
 }