Fixed

frontend/src/app/components/buttons/primarybutton/styles.module.css

@@ -5,7 +5,6 @@
   align-items: center;
   gap: 10px;
   border-radius: 6px;
-  border-radius: 6px;
   border: 0.5px solid #8187ff;
   background: rgba(83, 89, 242, 0.25);
   color: white;

frontend/src/app/components/buttons/secondaryButton/SecondaryButton.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import styles from "./styles.module.css";
+const SecondaryButton = (props) => {
+  return (
+    <button className={styles.button} {...props}>
+      <p>{props.text}</p>
+    </button>
+  );
+};
+
+export default SecondaryButton;

frontend/src/app/components/buttons/secondaryButton/styles.module.css

@@ -0,0 +1,25 @@
+.button {
+  display: flex;
+  height: 36px;
+  padding: 9px 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 6px;
+  border: 0.5px solid #4e537e;
+  cursor: pointer;
+  color: #d2d3e1;
+  font-size: 16px;
+
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 0.16px;
+  cursor: pointer;
+  background: transparent;
+}
+.button:hover {
+  border-radius: 6px;
+  border: 1px solid #8e98e7;
+  background: linear-gradient(180deg, #8e98e6 0%, #4d537e 100%);
+}