diff --git a/src/components/manageProjects/Card.styled.ts b/src/components/manageProjects/Card.styled.ts
index 5a8c66b1..c04279b2 100644
--- a/src/components/manageProjects/Card.styled.ts
+++ b/src/components/manageProjects/Card.styled.ts
@@ -54,7 +54,7 @@ export const CardTitle = styled.h3`
 export const RecruitmentDate = styled.small`
   font-size: ${({ theme }) => theme.heading.small.fontSize};
   font-weight: 400;
-  color: ${({ theme }) => theme.color.deepgrey};
+  color: ${({ theme }) => theme.color.deepGrey};
   margin-bottom: 0.25rem;
 
   @media ${({ theme }) => theme.mediaQuery.tablet} {
@@ -66,7 +66,7 @@ export const RecruitmentDate = styled.small`
 export const TotalMember = styled.small`
   font-size: ${({ theme }) => theme.heading.small.fontSize};
   font-weight: 400;
-  color: ${({ theme }) => theme.color.deepgrey};
+  color: ${({ theme }) => theme.color.deepGrey};
   margin-bottom: 1.125rem;
 
   @media ${({ theme }) => theme.mediaQuery.tablet} {
diff --git a/src/components/manageProjects/RecruitmentDate.styled.ts b/src/components/manageProjects/RecruitmentDate.styled.ts
index 5ecdcb21..0b3e8f70 100644
--- a/src/components/manageProjects/RecruitmentDate.styled.ts
+++ b/src/components/manageProjects/RecruitmentDate.styled.ts
@@ -32,7 +32,7 @@ export const DateTag = styled.span`
 export const Period = styled.small`
   font-size: ${({ theme }) => theme.heading.small.fontSize};
   font-weight: 500;
-  color: ${({ theme }) => theme.color.deepgrey};
+  color: ${({ theme }) => theme.color.deepGrey};
 
   @media ${({ theme }) => theme.mediaQuery.tablet} {
     font-size: ${({ theme }) => theme.heading.small.tabletFontSize};
diff --git a/src/pages/apply/Apply.styled.ts b/src/pages/apply/Apply.styled.ts
index 4ee5ff3d..1d946a60 100644
--- a/src/pages/apply/Apply.styled.ts
+++ b/src/pages/apply/Apply.styled.ts
@@ -58,7 +58,7 @@ export const Section = styled.div`
 export const Label = styled.label`
   font-size: 1.2rem;
   font-weight: bold;
-  color: ${({ theme }) => theme.color.black};
+  color: ${({ theme }) => theme.color.primary};
 
   @media ${({ theme }) => theme.mediaQuery.tablet} {
     font-size: 1.1rem;
diff --git a/src/pages/apply/ApplyStep.styled.ts b/src/pages/apply/ApplyStep.styled.ts
index a50fc64e..b98e37e2 100644
--- a/src/pages/apply/ApplyStep.styled.ts
+++ b/src/pages/apply/ApplyStep.styled.ts
@@ -52,7 +52,7 @@ export const StepButton = styled.div`
 export const StepLabel = styled.div`
   font-size: 1rem;
   font-weight: bold;
-  color: ${({ theme }) => theme.color.black};
+  color: ${({ theme }) => theme.color.primary};
   margin-bottom: 10px;
 
   @media ${({ theme }) => theme.mediaQuery.tablet} {
diff --git a/src/style/theme.ts b/src/style/theme.ts
index 71a98261..3ddd23b1 100644
--- a/src/style/theme.ts
+++ b/src/style/theme.ts
@@ -30,7 +30,7 @@ export type BorderRadiusSize = 'primary' | 'large' | 'small';
 
 export type MediaQuery = 'mobile' | 'tablet' | 'desktop';
 
-interface Theme {
+export interface Theme {
   color: Record<ColorKey, string>;
   heading: {
     [key in HeadingSize]: {
diff --git a/src/styled.d.ts b/src/styled.d.ts
new file mode 100644
index 00000000..17df07de
--- /dev/null
+++ b/src/styled.d.ts
@@ -0,0 +1,6 @@
+import 'styled-components';
+import { Theme } from './style/theme';
+
+declare module 'styled-components' {
+  export interface DefaultTheme extends Theme {}
+}
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 358ca9ba..0baa32fc 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -22,5 +22,5 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["src"]
+  "include": ["src", "src/styled.d.ts"]
 }