diff --git a/frontends/ol-components/src/components/Button/Button.stories.tsx b/frontends/ol-components/src/components/Button/Button.stories.tsx
index 7d2872c4bb..da21b11e90 100644
--- a/frontends/ol-components/src/components/Button/Button.stories.tsx
+++ b/frontends/ol-components/src/components/Button/Button.stories.tsx
@@ -42,7 +42,7 @@ const meta: Meta<typeof Button> = {
       control: { type: "select" },
     },
     edge: {
-      options: ["circular", "rounded", "none"],
+      options: ["circular", "rounded"],
       control: { type: "select" },
     },
     startIcon: {
@@ -247,29 +247,40 @@ export const LinkStory: Story = {
 }
 export const ButtonsShowcase: Story = {
   render: (args) => (
-    <Grid container rowGap={2} sx={{ maxWidth: "500px" }}>
+    <Grid container rowGap={2} sx={{ maxWidth: "600px" }}>
       {VARIANTS.flatMap((variant) =>
         EDGES.flatMap((edge) =>
           EXTRA_PROPS.map((extraProps, i) => {
-            return SIZES.map((size) => (
-              <Grid
-                item
-                xs={4}
-                display="flex"
-                alignItems="center"
-                key={`${variant}-${edge}-${size}-${i}`}
-              >
-                <Button
-                  {...args}
-                  variant={variant}
-                  edge={edge}
-                  size={size}
-                  {...extraProps}
-                >
-                  {args.children}
-                </Button>
-              </Grid>
-            ))
+            return (
+              <React.Fragment key={`${variant}-${edge}-${i}`}>
+                <Grid xs={3}>
+                  <pre>
+                    variant={variant}
+                    <br />
+                    edge={edge}
+                  </pre>
+                </Grid>
+                {SIZES.map((size) => (
+                  <Grid
+                    item
+                    xs={3}
+                    display="flex"
+                    alignItems="center"
+                    key={`${size}`}
+                  >
+                    <Button
+                      {...args}
+                      variant={variant}
+                      edge={edge}
+                      size={size}
+                      {...extraProps}
+                    >
+                      {args.children}
+                    </Button>
+                  </Grid>
+                ))}
+              </React.Fragment>
+            )
           }),
         ),
       )}
@@ -321,6 +332,11 @@ export const ActionButtonsShowcase: Story = {
             alignItems="center"
             sx={{ my: 2 }}
           >
+            <pre>
+              variant={variant}
+              <br />
+              edge={edge}
+            </pre>
             {SIZES.map((size) => (
               <React.Fragment key={size}>
                 {ICONS.map((icon) => (
diff --git a/frontends/ol-components/src/components/Button/Button.tsx b/frontends/ol-components/src/components/Button/Button.tsx
index 245987c87e..a4e3f7f124 100644
--- a/frontends/ol-components/src/components/Button/Button.tsx
+++ b/frontends/ol-components/src/components/Button/Button.tsx
@@ -77,7 +77,7 @@ const ButtonStyled = styled.button<ButtonStyleProps>((props) => {
     ...props,
   }
   const { colors } = theme.custom
-  const hasBorder = variant === "secondary" || variant === "text"
+  const hasBorder = variant === "secondary"
 
   return [
     {
@@ -110,17 +110,22 @@ const ButtonStyled = styled.button<ButtonStyleProps>((props) => {
       backgroundColor: colors.mitRed,
       color: colors.white,
       border: "none",
+      /* Shadow/04dp */
+      boxShadow:
+        "0px 2px 4px 0px rgba(37, 38, 43, 0.10), 0px 3px 8px 0px rgba(37, 38, 43, 0.12)",
       ":hover:not(:disabled)": {
         backgroundColor: colors.red,
+        boxShadow: "none",
       },
       ":disabled": {
         backgroundColor: colors.silverGray,
+        boxShadow: "none",
       },
     },
     hasBorder && {
       backgroundColor: "transparent",
       borderColor: "currentcolor",
-      borderStyle: variant === "secondary" ? "solid" : "none",
+      borderStyle: "solid",
     },
     variant === "secondary" && {
       color: colors.red,
@@ -132,6 +137,8 @@ const ButtonStyled = styled.button<ButtonStyleProps>((props) => {
       },
     },
     variant === "text" && {
+      backgroundColor: "transparent",
+      borderStyle: "none",
       color: colors.darkGray2,
       ":hover:not(:disabled)": {
         backgroundColor: tinycolor(colors.darkGray1).setAlpha(0.06).toString(),
@@ -177,14 +184,6 @@ const ButtonStyled = styled.button<ButtonStyleProps>((props) => {
       // Pill-shaped buttons... Overlapping border radius get clipped to pill.
       borderRadius: "100vh",
     },
-    edge === "none" && {
-      border: "none",
-      ":hover:not(:disabled)": {
-        "&&": {
-          backgroundColor: "inherit",
-        },
-      },
-    },
     // color
     color === "secondary" && {
       color: theme.custom.colors.silverGray,