diff --git a/src/components/landing-page/create-production.tsx b/src/components/landing-page/create-production.tsx
index d1c6f8d4..0ba41c3c 100644
--- a/src/components/landing-page/create-production.tsx
+++ b/src/components/landing-page/create-production.tsx
@@ -9,7 +9,8 @@ import {
   FormInput,
   FormLabel,
   StyledWarningMessage,
-  ActionButton,
+  PrimaryButton,
+  SecondaryButton,
 } from "./form-elements.tsx";
 import { API } from "../../api/api.ts";
 import { useGlobalState } from "../../global-state/context-provider.tsx";
@@ -40,6 +41,10 @@ const ListItemWrapper = styled.div`
   position: relative;
 `;
 
+const ButtonWrapper = styled.div`
+  margin: 2rem 0 2rem 0;
+`;
+
 const ProductionConfirmation = styled.div`
   background: #91fa8c;
   padding: 1rem;
@@ -170,18 +175,21 @@ export const CreateProduction = () => {
           />
         </div>
       ))}
-      <ActionButton type="button" onClick={() => append({ name: "" })}>
-        Add Line
-      </ActionButton>
-
-      <ActionButton
-        type="submit"
-        className={loading ? "with-loader" : ""}
-        onClick={handleSubmit(onSubmit)}
-      >
-        Create Production
-        {loading && <Spinner className="create-production" />}
-      </ActionButton>
+      <ButtonWrapper>
+        <SecondaryButton type="button" onClick={() => append({ name: "" })}>
+          Add Line
+        </SecondaryButton>
+      </ButtonWrapper>
+      <ButtonWrapper>
+        <PrimaryButton
+          type="submit"
+          className={loading ? "with-loader" : ""}
+          onClick={handleSubmit(onSubmit)}
+        >
+          Create Production
+          {loading && <Spinner className="create-production" />}
+        </PrimaryButton>
+      </ButtonWrapper>
       {createdProductionId !== null && (
         <ProductionConfirmation>
           The production ID is: {createdProductionId.toString()}
diff --git a/src/components/landing-page/form-elements.tsx b/src/components/landing-page/form-elements.tsx
index 67cd3a31..bcbb61c6 100644
--- a/src/components/landing-page/form-elements.tsx
+++ b/src/components/landing-page/form-elements.tsx
@@ -39,51 +39,167 @@ export const DecorativeLabel = styled.span`
   padding: 0 1rem 1rem 0;
 `;
 
-export const ActionButton = styled.button`
-  background: rgba(255, 255, 255, 0.78);
-  border: 0.1rem solid rgba(255, 255, 255, 0.68);
-  border-right: 0.1rem solid #000;
-  border-bottom: 0.1rem solid #000;
-  color: #1a1a1a;
-  font-weight: bold;
-  border-radius: 0.5rem;
+export const StyledWarningMessage = styled.div`
+  padding: 0.5rem;
   font-size: 1.6rem;
-  padding: 1rem;
-  display: block;
-  margin: 0 0 2rem 0;
+  background: #ebca6a;
+  border-radius: 0.5rem;
+  color: #1a1a1a;
+  margin: 0 0 1rem;
+  border: 1px solid #ebca6a;
+  display: flex;
+  align-items: center;
 
-  &:hover {
-    cursor: pointer;
+  &.with-loader {
+    min-width: 27rem;
   }
+`;
 
-  &:active {
-    background: rgba(255, 255, 255, 0.62);
-    box-shadow: inset 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.2);
+const ActionButton = styled.button`
+  background-color: transparent;
+  background-image: linear-gradient(to bottom, #fff, #f8eedb);
+  border: 0 solid #e5e7eb;
+  border-radius: 0.5rem;
+  box-sizing: border-box;
+  color: #482307;
+  column-gap: 1rem;
+  cursor: pointer;
+  display: flex;
+  font-size: 100%;
+  font-weight: 700;
+  line-height: 2.4rem;
+  margin: 0;
+  outline: 0.2rem solid transparent;
+  padding: 1rem 1.5rem;
+  text-align: center;
+  text-transform: none;
+  transform: translateZ(0) scale(1);
+  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  box-shadow:
+    -0.6rem 0.8rem 1rem rgba(81, 41, 10, 0.1),
+    0 0.2rem 0.2rem rgba(81, 41, 10, 0.2);
+
+  &:disabled {
+    background: #c9c6c0;
+    cursor: not-allowed;
   }
 
   &.with-loader {
     position: relative;
     color: rgba(255, 255, 255, 0);
   }
+`;
 
-  &:disabled {
-    background: rgba(255, 255, 255, 0.5);
-    cursor: not-allowed;
+export const PrimaryButton = styled(ActionButton)`
+  &:active:enabled {
+    background-color: #f3f4f6;
+    box-shadow:
+      -0.1rem 0.2rem 0.5rem rgba(81, 41, 10, 0.15),
+      0 0.1rem 0.1rem rgba(81, 41, 10, 0.15);
+    transform: translateY(0.125rem);
+  }
+
+  &:focus {
+    box-shadow:
+      rgba(72, 35, 7, 0.46) 0 0 0 0.4rem,
+      -0.6rem 0.8rem 1rem rgba(81, 41, 10, 0.1),
+      0 0.2rem 0.2rem rgba(81, 41, 10, 0.2);
+  }
+
+  &:not(:disabled):hover {
+    transform: scale(1.05);
+  }
+
+  &:not(:disabled):hover:active {
+    transform: scale(1.05) translateY(0.125rem);
+  }
+
+  &:focus {
+    outline: 0 solid transparent;
+  }
+
+  &:focus:before {
+    content: "";
+    left: calc(-1 * 0.375rem);
+    pointer-events: none;
+    position: absolute;
+    top: calc(-1 * 0.375rem);
+    transition: border-radius;
+    user-select: none;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: 0 solid transparent;
+  }
+
+  &:focus:not(:focus-visible):before {
+    border-width: 0;
+  }
+
+  &:not(:disabled):active {
+    transform: translateY(0.125rem);
   }
 `;
 
-export const StyledWarningMessage = styled.div`
-  padding: 0.5rem;
-  font-size: 1.6rem;
-  background: #ebca6a;
-  border-radius: 0.5rem;
-  color: #1a1a1a;
-  margin: 0 0 1rem;
-  border: 1px solid #ebca6a;
-  display: flex;
-  align-items: center;
+export const SecondaryButton = styled(ActionButton)`
+  &:before,
+  &:after {
+    border-radius: 0.5rem;
+  }
 
-  &.with-loader {
-    min-width: 27rem;
+  &:before {
+    background-color: rgba(72, 54, 42, 0.32);
+    content: "";
+    display: block;
+    height: 100%;
+    left: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: -2;
+  }
+
+  &:after {
+    background-color: initial;
+    background-image: linear-gradient(to bottom, #fff, #f5ead6);
+    content: "";
+    display: block;
+    overflow: hidden;
+    position: absolute;
+    right: 0.4rem;
+    top: 0.4rem;
+    left: 0.4rem;
+    bottom: 0.4rem;
+    transition: all 100ms ease-out;
+    z-index: -1;
+  }
+
+  &:hover:not(:disabled):after {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+    transition-timing-function: ease-in;
+  }
+
+  &:active:not(:disabled) {
+    color: #ccc;
+  }
+
+  &:active:not(:disabled):after {
+    background-image: linear-gradient(
+        0deg,
+        rgba(0, 0, 0, 0.2),
+        rgba(0, 0, 0, 0.2)
+      ),
+      linear-gradient(92.83deg, #fff, #f8eedb, 100%);
+    bottom: 0.4rem;
+    left: 0.4rem;
+    right: 0.4rem;
+    top: 0.4rem;
   }
 `;
diff --git a/src/components/landing-page/join-production.tsx b/src/components/landing-page/join-production.tsx
index 1a2d031e..32cd4364 100644
--- a/src/components/landing-page/join-production.tsx
+++ b/src/components/landing-page/join-production.tsx
@@ -9,7 +9,7 @@ import {
   FormContainer,
   FormInput,
   FormSelect,
-  ActionButton,
+  PrimaryButton,
   StyledWarningMessage,
 } from "./form-elements.tsx";
 import { useGlobalState } from "../../global-state/context-provider.tsx";
@@ -28,6 +28,10 @@ const FetchErrorMessage = styled.div`
   margin: 1rem 0;
 `;
 
+const ButtonWrapper = styled.div`
+  margin: 2rem 0 2rem 0;
+`;
+
 type TProps = {
   preSelected?: {
     preSelectedProductionId: string;
@@ -241,14 +245,15 @@ export const JoinProduction = ({ preSelected }: TProps) => {
               )}
             </FormLabel>
           )}
-
-          <ActionButton
-            type="submit"
-            disabled={!isValid}
-            onClick={handleSubmit(onSubmit)}
-          >
-            Join
-          </ActionButton>
+          <ButtonWrapper>
+            <PrimaryButton
+              type="submit"
+              disabled={!isValid}
+              onClick={handleSubmit(onSubmit)}
+            >
+              Join
+            </PrimaryButton>
+          </ButtonWrapper>
         </>
       )}
     </FormContainer>
diff --git a/src/components/landing-page/manage-production-button.tsx b/src/components/landing-page/manage-production-button.tsx
index c85d0c84..ae4e2768 100644
--- a/src/components/landing-page/manage-production-button.tsx
+++ b/src/components/landing-page/manage-production-button.tsx
@@ -1,6 +1,6 @@
 import { useNavigate } from "react-router-dom";
 import styled from "@emotion/styled";
-import { ActionButton } from "./form-elements";
+import { PrimaryButton } from "./form-elements";
 
 const ButtonWrapper = styled.div`
   display: flex;
@@ -13,12 +13,12 @@ export const ManageProductionButton = () => {
 
   return (
     <ButtonWrapper>
-      <ActionButton
+      <PrimaryButton
         type="button"
         onClick={() => navigate("/manage-productions")}
       >
         Manage Productions
-      </ActionButton>
+      </PrimaryButton>
     </ButtonWrapper>
   );
 };
diff --git a/src/components/loader/loader.tsx b/src/components/loader/loader.tsx
index a51b4183..4fc9c97c 100644
--- a/src/components/loader/loader.tsx
+++ b/src/components/loader/loader.tsx
@@ -13,7 +13,13 @@ const Loading = styled.div`
   &.create-production {
     position: absolute;
     top: 0.5rem;
-    left: 6rem;
+    left: 40%;
+  }
+
+  &.manage-production {
+    position: absolute;
+    top: 0.5rem;
+    left: 30%;
   }
 
   &.join-production {
diff --git a/src/components/manage-productions/manage-productions.tsx b/src/components/manage-productions/manage-productions.tsx
index 6d2b2903..f0a704bc 100644
--- a/src/components/manage-productions/manage-productions.tsx
+++ b/src/components/manage-productions/manage-productions.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import styled from "@emotion/styled";
 import { DisplayContainerHeader } from "../landing-page/display-container-header";
 import {
-  ActionButton,
+  PrimaryButton,
   DecorativeLabel,
   FormInput,
   FormLabel,
@@ -41,7 +41,7 @@ const FetchErrorMessage = styled.div`
 `;
 
 const VerifyBtnWrapper = styled.div`
-  padding: 1rem 0 0 2rem;
+  margin: 3rem 0 2rem 2rem;
 `;
 
 const VerifyButtons = styled.div`
@@ -49,7 +49,7 @@ const VerifyButtons = styled.div`
   padding: 1rem 0 0 0;
 `;
 
-const Button = styled(ActionButton)`
+const Button = styled(PrimaryButton)`
   margin: 0 1rem 0 0;
 `;
 
@@ -57,6 +57,10 @@ const StyledBackBtnIcon = styled.div`
   margin: 0 0 3rem 0;
 `;
 
+const ButtonWrapper = styled.div`
+  margin: 2rem 0 2rem 0;
+`;
+
 export const ManageProductions = () => {
   const [showDeleteDoneMessage, setShowDeleteDoneMessage] =
     useState<boolean>(false);
@@ -154,14 +158,16 @@ export const ManageProductions = () => {
         <>
           <DecorativeLabel>Production name: {production.name}</DecorativeLabel>
           {!verifyRemove && (
-            <ActionButton
-              type="submit"
-              className={deleteLoader ? "submit" : ""}
-              onClick={() => setVerifyRemove(true)}
-            >
-              Remove
-              {deleteLoader && <Spinner className="create-production" />}
-            </ActionButton>
+            <ButtonWrapper>
+              <PrimaryButton
+                type="submit"
+                className={deleteLoader ? "submit" : ""}
+                onClick={() => setVerifyRemove(true)}
+              >
+                Remove
+                {deleteLoader && <Spinner className="manage-production" />}
+              </PrimaryButton>
+            </ButtonWrapper>
           )}
           {verifyRemove && (
             <VerifyBtnWrapper>
@@ -174,7 +180,7 @@ export const ManageProductions = () => {
                   onClick={handleSubmit(onSubmit)}
                 >
                   Yes
-                  {deleteLoader && <Spinner className="create-production" />}
+                  {deleteLoader && <Spinner className="manage-production" />}
                 </Button>
                 <Button
                   type="submit"
@@ -187,7 +193,7 @@ export const ManageProductions = () => {
                   }}
                 >
                   Go back
-                  {deleteLoader && <Spinner className="create-production" />}
+                  {deleteLoader && <Spinner className="manage-production" />}
                 </Button>
               </VerifyButtons>
             </VerifyBtnWrapper>
diff --git a/src/components/navigate-to-root-button/navigate-to-root-button.tsx b/src/components/navigate-to-root-button/navigate-to-root-button.tsx
index 5bd1930a..fbfecf0b 100644
--- a/src/components/navigate-to-root-button/navigate-to-root-button.tsx
+++ b/src/components/navigate-to-root-button/navigate-to-root-button.tsx
@@ -1,9 +1,9 @@
 import styled from "@emotion/styled";
 import { useNavigate } from "react-router-dom";
 import { BackArrow } from "../../assets/icons/icon";
-import { ActionButton } from "../landing-page/form-elements";
+import { PrimaryButton } from "../landing-page/form-elements";
 
-const StyledBackBtn = styled(ActionButton)`
+const StyledBackBtn = styled(PrimaryButton)`
   padding: 0;
   margin: 0;
   width: 4rem;
diff --git a/src/components/production-line/long-press-to-talk-button.tsx b/src/components/production-line/long-press-to-talk-button.tsx
index 5526d010..66b9ce1c 100644
--- a/src/components/production-line/long-press-to-talk-button.tsx
+++ b/src/components/production-line/long-press-to-talk-button.tsx
@@ -1,13 +1,13 @@
 import { useEffect, useState } from "react";
 import styled from "@emotion/styled";
-import { ActionButton } from "../landing-page/form-elements";
+import { PrimaryButton } from "../landing-page/form-elements";
 import { isMobile } from "../../bowser";
 
 type TLongPressToTalkButton = {
   setMicMute: (input: boolean) => void;
 };
 
-const Button = styled(ActionButton)`
+const Button = styled(PrimaryButton)`
   position: relative;
 
   &.active-btn {
diff --git a/src/components/production-line/production-line.tsx b/src/components/production-line/production-line.tsx
index 054f3110..456b7711 100644
--- a/src/components/production-line/production-line.tsx
+++ b/src/components/production-line/production-line.tsx
@@ -5,7 +5,7 @@ import { useGlobalState } from "../../global-state/context-provider.tsx";
 import { useAudioInput } from "./use-audio-input.ts";
 import { useRtcConnection } from "./use-rtc-connection.ts";
 import { useEstablishSession } from "./use-establish-session.ts";
-import { ActionButton } from "../landing-page/form-elements.tsx";
+import { PrimaryButton } from "../landing-page/form-elements.tsx";
 import { UserList } from "./user-list.tsx";
 import {
   MicMuted,
@@ -49,12 +49,16 @@ const ButtonIcon = styled.div`
   margin: 0 0.5rem 0 0;
 `;
 
-const UserControlBtn = styled(ActionButton)`
+const UserControlBtn = styled(PrimaryButton)`
   line-height: 2;
   min-width: 12rem;
   text-align: left;
 `;
 
+const LongPressWrapper = styled.div`
+  margin: 2rem 0 2rem 0;
+`;
+
 const ButtonWrapper = styled.span`
   margin: 0 2rem 0 0;
 `;
@@ -213,9 +217,11 @@ export const ProductionLine: FC = () => {
                     </ButtonIcon>
                     {isInputMuted ? "Muted" : "Unmuted"}
                   </UserControlBtn>
-                  <LongPressToTalkButton
-                    setMicMute={(input: boolean) => setIsInputMuted(input)}
-                  />
+                  <LongPressWrapper>
+                    <LongPressToTalkButton
+                      setMicMute={(input: boolean) => setIsInputMuted(input)}
+                    />
+                  </LongPressWrapper>
                 </TempDiv>
               )}