diff --git a/packages/common/assets/src/styles/components.css b/packages/common/assets/src/styles/components.css
new file mode 100644
index 000000000..c1eb79210
--- /dev/null
+++ b/packages/common/assets/src/styles/components.css
@@ -0,0 +1,87 @@
+.card {
+  position: relative;
+  margin: 0.6rem;
+  box-sizing: border-box;
+  min-height: 2rem;
+  border-radius: 0.5rem;
+  padding: 0.6rem;
+  font-size: 1.3rem;
+  color: #666;
+}
+
+.card_width10 {width:calc(10% - 12px);}
+
+.card_width20 {width:calc(20% - 12px);}
+
+.card_width25 {width:calc(25% - 12px);}
+
+.card_width30 {width:calc(30% - 12px);}
+
+.card_width33 {width:calc(33.333% - 12px);}
+
+.card_width40 {width:calc(40% - 12px);}
+
+.card_width45 {width:calc(45% - 12px);}
+
+.card_width50 {width:calc(50% - 12px);}
+
+.card_width60 {width:calc(60% - 12px);}
+
+.card_width66 {width:calc(66.666% - 12px);}
+
+.card_width70 {width:calc(70% - 12px);}
+
+.card_width75 {width:calc(75% - 12px);}
+
+.card_width80 {width:calc(80% - 12px);}
+
+.card_width90 {width:calc(90% - 12px);}
+
+.card_width100 {width:calc(100% - 12px);}
+
+.card_nopadding {padding:0 !important;}
+
+.card_nomargin {width:100%;margin:0 !important;padding:0 !important;}
+
+.topline {border-top: 1px solid #ccc;}
+
+.bottomline {border-bottom: 1px solid #e6eef3;background: #fff;}
+
+.card-border {
+  border: 1px solid #dbe2e6;
+  background-color: rgba(255, 255, 255, 0.6);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  margin-left: -0.6rem;
+  margin-right: -0.6rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #e1e7eb;
+  padding: 1rem;
+}
+
+.card-footer {
+  margin-left: -0.6rem;
+  margin-right: -0.6rem;
+  margin-top: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top: 1px solid #e1e7eb;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+/* 블랙 테마 */
+[data-theme="black"] {
+  .card-border {
+    border-color: #3f4042;
+    background-color: rgba(255, 255, 255, 0.065);
+  }
+  .card-header {
+    border-bottom-color: #3f4042;
+  }
+}
diff --git a/packages/common/assets/src/styles/index.ts b/packages/common/assets/src/styles/index.ts
index 807e81006..8b6116d95 100644
--- a/packages/common/assets/src/styles/index.ts
+++ b/packages/common/assets/src/styles/index.ts
@@ -2,6 +2,7 @@ export const styles = {
   base: require("./base.css"),
   diveicon: require("./diveicon.css"),
   grid: require("./grid.css"),
+  components: require("./components.css"),
 } as const;
 
 export type StyleType = keyof typeof styles;
diff --git a/packages/common/assets/tsup.config.ts b/packages/common/assets/tsup.config.ts
index 450a1b173..59c4afaeb 100644
--- a/packages/common/assets/tsup.config.ts
+++ b/packages/common/assets/tsup.config.ts
@@ -6,6 +6,7 @@ export default defineConfig({
     "src/styles/base.css",
     "src/styles/diveicon.css",
     "src/styles/grid.css",
+    "src/styles/components.css",
   ],
   format: ["cjs", "esm"],
   dts: true,