diff --git a/packages/client/src/entities/posts/ui/Post.tsx b/packages/client/src/entities/posts/ui/Post.tsx
index 646549e..83e5db9 100644
--- a/packages/client/src/entities/posts/ui/Post.tsx
+++ b/packages/client/src/entities/posts/ui/Post.tsx
@@ -6,7 +6,6 @@ import { useEffect, useRef, useState } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { StarType } from 'shared/lib';
 import { useCameraStore, useViewStore } from 'shared/store';
-import { theme } from 'shared/styles';
 import * as THREE from 'three';
 
 interface PropsType {
@@ -90,9 +89,9 @@ const Label = styled.div`
 	width: fit-content;
 	max-width: 200px; // TODO: 수정 예정
 	text-align: center;
-	background-color: ${theme.colors.background.bdp01_80};
-	border: 1px solid ${theme.colors.stroke.sc};
-	color: ${theme.colors.text.secondary};
+	background-color: ${({ theme: { colors } }) => colors.background.bdp01_80};
+	border: ${({ theme: { colors } }) => colors.stroke.sc};
+	color: ${({ theme: { colors } }) => colors.text.secondary};
 	transform: translate3d(calc(-50%), calc(-250%), 0); // TODO: 수정 예정
 
 	overflow: hidden;
diff --git a/packages/client/src/features/coachMarker/CoachButton.tsx b/packages/client/src/features/coachMarker/CoachButton.tsx
index 47d5629..728474e 100644
--- a/packages/client/src/features/coachMarker/CoachButton.tsx
+++ b/packages/client/src/features/coachMarker/CoachButton.tsx
@@ -14,6 +14,6 @@ export default function CoachButton() {
 }
 
 const HelpCircleButton = styled(HelpCircleIcon)`
-	color: ${({ theme }) => theme.colors.text.secondary};
+	color: ${({ theme: { colors } }) => colors.text.secondary};
 	cursor: pointer;
 `;
diff --git a/packages/client/src/shared/ui/inputBar/InputBar.tsx b/packages/client/src/shared/ui/inputBar/InputBar.tsx
index e675c4b..6073a4f 100644
--- a/packages/client/src/shared/ui/inputBar/InputBar.tsx
+++ b/packages/client/src/shared/ui/inputBar/InputBar.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { Body02ME, Body03ME, theme } from 'shared/styles';
+import { Body02ME, Body03ME } from 'shared/styles';
 
 interface PropsType extends React.InputHTMLAttributes<HTMLInputElement> {
 	label?: string;
@@ -41,19 +41,19 @@ const Input = styled.input`
 	height: 100%;
 	padding: 12px;
 	border-radius: 4px;
-	background-color: ${theme.colors.background.bdp03};
-	border: 1px solid ${theme.colors.stroke.default};
-	color: ${theme.colors.text.third};
+	background-color: ${({ theme: { colors } }) => colors.background.bdp03};
+	border: 1px solid ${({ theme: { colors } }) => colors.stroke.default};
+	color: ${({ theme: { colors } }) => colors.text.third};
 	${Body03ME}
 
 	&:hover {
-		border: 1px solid ${theme.colors.stroke.sc};
+		border: 1px solid ${({ theme: { colors } }) => colors.stroke.sc};
 	}
 
 	&:focus {
 		outline: none;
-		border: 1px solid ${theme.colors.stroke.focus};
-		color: ${theme.colors.text.secondary};
+		border: 1px solid ${({ theme: { colors } }) => colors.stroke.focus};
+		color: ${({ theme: { colors } }) => colors.text.secondary};
 	}
 `;
 
@@ -62,7 +62,7 @@ const LabelContainer = styled.div`
 `;
 
 const LabelText = styled.label`
-	color: ${theme.colors.text.secondary};
+	color: ${({ theme: { colors } }) => colors.text.secondary};
 	${Body02ME}
 `;
 
diff --git a/packages/client/src/shared/ui/textArea/TextArea.tsx b/packages/client/src/shared/ui/textArea/TextArea.tsx
index 61872bc..089b3f7 100644
--- a/packages/client/src/shared/ui/textArea/TextArea.tsx
+++ b/packages/client/src/shared/ui/textArea/TextArea.tsx
@@ -76,8 +76,8 @@ const Section = styled.section<{ width: string; height: string }>`
 	${Body04Me}
 	width: ${({ width }) => width};
 	height: ${({ height }) => height};
-	background-color: ${theme.colors.background.bdp03};
-	color: ${theme.colors.text.third};
+	background-color: ${({ theme: { colors } }) => colors.background.bdp03};
+	color: ${({ theme: { colors } }) => colors.text.third};
 	border-radius: 4px;
 	display: flex;
 	padding: 16px;
@@ -92,7 +92,7 @@ const Tabs = styled.ul`
 	align-items: center;
 
 	.selected {
-		color: ${theme.colors.text.primary};
+		color: ${({ theme: { colors } }) => colors.text.primary};
 		font-size: large;
 	}
 `;
@@ -104,14 +104,14 @@ const Tab = styled.div`
 const TextInput = styled.textarea<{ css: SerializedStyles }>`
 	${({ css }) => css}
 	resize: none;
-	background-color: ${theme.colors.background.bdp03};
-	color: ${theme.colors.text.third};
+	background-color: ${({ theme: { colors } }) => colors.background.bdp03};
+	color: ${({ theme: { colors } }) => colors.text.third};
 	border: none;
 	height: 100%;
 
 	&:focus {
 		outline: none;
-		color: ${theme.colors.text.secondary};
+		color: ${({ theme: { colors } }) => colors.text.secondary};
 	}
 `;
 
@@ -124,18 +124,18 @@ const LimitSpan = styled.span`
 const Container = styled.div`
 	display: flex;
 	flex-direction: column;
-	border: 1px solid ${theme.colors.stroke.default};
+	border: 1px solid ${({ theme: { colors } }) => colors.stroke.default};
 	border-radius: 4px;
 	padding: 8px;
 	height: 100%;
 	overflow: auto;
 
 	&:focus-within {
-		border: 1px solid ${theme.colors.stroke.focus};
+		border: 1px solid ${({ theme: { colors } }) => colors.stroke.focus};
 	}
 
 	&:hover {
-		border: 1px solid ${theme.colors.stroke.focus};
+		border: 1px solid ${({ theme: { colors } }) => colors.stroke.focus};
 	}
 `;
 
@@ -147,7 +147,7 @@ const Wrapper = styled.div<{ css: SerializedStyles }>`
 	padding: 8px;
 	margin-top: 9px;
 	margin-right: 9px;
-	color: ${theme.colors.text.secondary};
+	color: ${({ theme: { colors } }) => colors.text.secondary};
 	word-break: break-all;
 
 	& ol {