diff --git a/src/components/Cart/OrderBtn/OrderBtn.styled.ts b/src/components/Cart/OrderBtn/OrderBtn.styled.ts
new file mode 100644
index 0000000..b202ea9
--- /dev/null
+++ b/src/components/Cart/OrderBtn/OrderBtn.styled.ts
@@ -0,0 +1,23 @@
+import styled from "@emotion/styled";
+import theme from "@styles/theme";
+
+export const StyledBtn = styled.button`
+  background-color: ${theme.colors.purple50};
+  border-radius: 10px;
+  color: white;
+  ${theme.fonts.body2_b_14};
+  width: 25rem;
+  height: 5.6rem;
+  transition: 
+    background-color 0.3s ease, 
+    color 0.3s ease, 
+    width 0.3s ease, 
+    height 0.3s ease; 
+
+  &:active {
+    background-color: ${theme.colors.purple60};
+    color: ${theme.colors.purple40};
+    width: 23.6rem; 
+    height: 5.2rem;
+  }
+`;
diff --git a/src/components/Cart/OrderBtn/OrderBtn.tsx b/src/components/Cart/OrderBtn/OrderBtn.tsx
new file mode 100644
index 0000000..0801bb0
--- /dev/null
+++ b/src/components/Cart/OrderBtn/OrderBtn.tsx
@@ -0,0 +1,16 @@
+import * as S from "./OrderBtn.styled"
+
+interface OrderBtnProps {
+  totalItems: number;
+  totalPrice: number;
+}
+
+const OrderBtn = ({ totalItems, totalPrice } : OrderBtnProps) => {
+  return (
+    <S.StyledBtn>
+      {`${totalPrice.toLocaleString()}원 (${totalItems}) 주문하기`}
+    </S.StyledBtn>
+  ); 
+};
+
+export default OrderBtn;