diff --git a/src/components/atoms/Text.tsx b/src/components/atoms/Text.tsx
index 4a64d16..9bbc57d 100644
--- a/src/components/atoms/Text.tsx
+++ b/src/components/atoms/Text.tsx
@@ -1,5 +1,6 @@
 import type { ParentComponent } from 'solid-js';
 import { styled } from 'solid-styled-components';
+import type { Style } from '@/types';
 
 interface PositionSelector {
     [key: string]: string;
@@ -16,7 +17,7 @@ const positionSelector: PositionSelector = {
 
 type ComponentType = keyof HTMLElementTagNameMap;
 
-interface Props {
+interface Props extends Style {
     color?: string;
     fontSize?: string;
     textAlign?: 'start' | 'center' | 'end' | 'justify';
@@ -24,6 +25,13 @@ interface Props {
     component?: ComponentType;
 }
 
+/**
+ * @param {string} color - color
+ * @param {string} fontSize - font-size
+ * @param {'start' | 'center' | 'end' | 'justify'} textAlign - text-align
+ * @param {'left' | 'center' | 'right'} position - position
+ */
+
 export const Text: ParentComponent<Props> = ({
     component = 'span',
     children,
@@ -31,15 +39,18 @@ export const Text: ParentComponent<Props> = ({
     fontSize,
     textAlign,
     position,
+    sx,
 }) => {
     const TextComponent = styled(component ?? 'h1')`
         display: flex;
+        display: inline-block;
         ${color ? `color: ${color};` : ''}
         ${textAlign ? `text-align: ${textAlign};` : ''}
         ${position ? `justify-content: ${positionSelector[position]};` : ''}
-
+    
         white-space: pre-line;
         font-size: ${fontSize || '16px'};
+        ${sx || ''}
     `;
 
     return <TextComponent>{children}</TextComponent>;