diff --git a/src/App.tsx b/src/App.tsx
index 1949e72..2655f8f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -40,7 +40,18 @@ function App() {
       <Channels />
 
       <VisitorCounter />
-      <VisitorComment id="['VisitorComment', 'akar-icons:comment-add']" />
+      <VisitorComment
+        id="['VisitorComment', 'akar-icons:comment-add']"
+        inputBackgroundColor="red"
+        inputFontColor="white"
+        inputPlacehoderColor="white"
+        buttonColor="white"
+        listBackgroundColor="red"
+        commentColor="white"
+        listNicknameColor="white"
+        listDateColor="white"
+        theme="vertical"
+      />
 
       <CardWrap id="['CardWrap','bi:card-list']">
         <Card width="20vw" height="20vw" hover="down" redirectURL="/1">
@@ -70,7 +81,13 @@ function App() {
       <TechStackList id="['TechStackList', 'vscode-icons:file-type-reactjs']" />
       <TechStackInput />
 
-      <Experience id="['Experience', 'ic:outline-work-history']" />
+      <Experience
+        id="['Experience', 'ic:outline-work-history']"
+        historyTitleColor="red"
+        headerTitleColor="red"
+        dateColor="red"
+        descriptionColor="red"
+      />
 
       <Gallery id="['Gallery', 'clarity:image-gallery-line']" theme="mint-chocolate">
         <Item
diff --git a/src/lib/common/types/ComponentTypes/ExperienceType.ts b/src/lib/common/types/ComponentTypes/ExperienceType.ts
index 9891982..9173437 100644
--- a/src/lib/common/types/ComponentTypes/ExperienceType.ts
+++ b/src/lib/common/types/ComponentTypes/ExperienceType.ts
@@ -19,9 +19,16 @@ export interface ExperiencePropsType extends ExperienceVerticalOptionType {
    * You can decorate your experience with a variety of theme such as 'basic', 'box', 'vertical'.	(default: basic)
    */
   theme?: ExperienceThemeType;
+    /**
+   * color of title specially used in 'vertical' theme
+   */
+  historyTitleColor?: string;
+  headerTitleColor?: string;
+  dateColor?: string;
+  descriptionColor ?: string;
 }
 
-export interface ExperienceHistoryListType {
+export interface ExperienceHistoryListType extends ExperienceStyledPropsType{
   /**
    * Date when you started that kind experience
    */
@@ -41,17 +48,13 @@ export interface ExperienceHistoryListType {
 }
 
 export interface ExperienceVerticalOptionType {
-  /**
-   * color of title specially used in 'vertical' theme
-   */
-  titleColor?: string;
   /**
    * shape of card specially used in 'vertical' theme ('square' | 'round-square')
    */
   shape?: ExperienceShapeType;
 }
 
-export interface VerticalPropsType extends ExperienceHistoryListType, ExperienceVerticalOptionType {}
+export interface VerticalPropsType extends ExperienceHistoryListType, ExperienceVerticalOptionType, ExperienceStyledPropsType {}
 
 export interface IndexPropsType extends ExperienceHistoryListType, ExperienceVerticalOptionType {
   /**
@@ -66,10 +69,17 @@ type ExperienceShapeType = 'square' | 'round-square';
 /* For Styles */
 
 export interface ExperienceStyledPropsType {
+   /**
+   * color of title specially used in 'vertical' theme
+   */
+  historyTitleColor?: string;
   /**
    * Experience Text align (default: left)
    */
   textAlign?: string;
+  headerTitleColor?: string;
+  dateColor?: string;
+  descriptionColor ?: string;
 }
 
 export interface ExperienceChildStyledPropsType {
diff --git a/src/lib/common/types/ComponentTypes/VisitorCommentType.ts b/src/lib/common/types/ComponentTypes/VisitorCommentType.ts
index fad7f7d..fe94195 100644
--- a/src/lib/common/types/ComponentTypes/VisitorCommentType.ts
+++ b/src/lib/common/types/ComponentTypes/VisitorCommentType.ts
@@ -64,9 +64,15 @@ export interface VisitorCommentPropsType {
   comment?: string;
   nickname?: string;
   password?: string;
+  listBackgroundColor?: string;
+  commentColor?: string;
+  inputFontColor?: string;
+  inputPlacehoderColor?: string;
+  listNicknameColor?: string;
+  listDateColor?: string;
 }
 
-export interface VisitorCommentListType {
+export interface VisitorCommentListType extends VisitorCommentStyledPropsType {
   /**
    * Description of your comment
    */
@@ -110,4 +116,10 @@ export interface VisitorCommentStyledPropsType {
   userInputLineColor?: string;
   scrollDownIconColor?: string;
   isOverflow?: boolean;
-}
\ No newline at end of file
+  listBackgroundColor?: string;
+  commentColor?: string;
+  inputFontColor?: string;
+  inputPlacehoderColor?: string;
+  listNicknameColor?: string;
+  listDateColor?: string;
+}
diff --git a/src/lib/components/Experience/Experience.tsx b/src/lib/components/Experience/Experience.tsx
index c1a1b3d..0d9a994 100644
--- a/src/lib/components/Experience/Experience.tsx
+++ b/src/lib/components/Experience/Experience.tsx
@@ -12,7 +12,7 @@ import {
  * @props title: Main title text of Experience Component	(default: Experience)
  * @props textAlign: Experience Text align (default: left)
  * @props theme: You can decorate your experience with a variety of theme such as 'basic', 'box', 'vertical'.	(default: basic)
- * @props titleColor: color of title specially used in 'vertical' theme
+ * @props historyTitleColor: color of title at historyList 
  * @props shape: shape of card specially used in 'vertical' theme ('square' | 'round-square')
  * @props historyList: You can add your history data such as date, title, description, etc.	({@link https://github.com/modern-agile-team/dev-portfolio/blob/master/app/src/lib/common/types/ComponentTypes/ExperienceType.ts#:~:text=export%20interface-,ExperienceHistoryListType,-%7B "See More about Experience's Props"})
  * @historyList startData: Date when you started that kind experience
@@ -21,15 +21,15 @@ import {
  * @historyList des: Describe about your experience
  */
 const Experience = (props: ExperiencePropsType) => {
-  const { id, historyList, title, textAlign, theme, titleColor, shape } = props;
+  const { id, historyList, title, textAlign, theme, historyTitleColor, shape, headerTitleColor, dateColor, descriptionColor } = props;
 
   return (
-    <Wrap id={id} textAlign={textAlign}>
+    <Wrap id={id} textAlign={textAlign} headerTitleColor={headerTitleColor}>
       <div className="title">{title}</div>
       <hr />
       <ChildWrap theme={theme}>
         {historyList?.map((elements, idx) => (
-          <History key={idx} {...elements} theme={theme} titleColor={titleColor} shape={shape} />
+          <History key={idx} {...elements} theme={theme} historyTitleColor={historyTitleColor} shape={shape} dateColor={dateColor} descriptionColor={descriptionColor} />
         ))}
       </ChildWrap>
     </Wrap>
@@ -69,6 +69,7 @@ const Wrap = styled.div<ExperienceStyledPropsType>`
     padding: 10px 10px 20px 10px;
     font-size: 33px;
     font-weight: 800;
+    color: ${({ headerTitleColor }) => headerTitleColor ?? 'black'};
   }
   hr {
     border: 0;
diff --git a/src/lib/components/Experience/History/Basic.tsx b/src/lib/components/Experience/History/Basic.tsx
index 61a6a16..1c9be41 100644
--- a/src/lib/components/Experience/History/Basic.tsx
+++ b/src/lib/components/Experience/History/Basic.tsx
@@ -1,12 +1,12 @@
 import styled from 'styled-components';
-import { ExperienceHistoryListType } from '../../../common/types/ComponentTypes/ExperienceType';
+import { ExperienceHistoryListType, ExperienceStyledPropsType } from '../../../common/types/ComponentTypes/ExperienceType';
 
 const Basic = (props: ExperienceHistoryListType) => {
-  const { startDate, endDate, title, des } = props;
+  const { startDate, endDate, title, des, historyTitleColor, dateColor, descriptionColor } = props;
 
   return (
     <div>
-      <Wrap>
+      <Wrap historyTitleColor={historyTitleColor} dateColor={dateColor} descriptionColor={descriptionColor}>
         <div className="date">
           <span className="start-date">{startDate}</span>
           <span className="end-date">{endDate}</span>
@@ -19,7 +19,7 @@ const Basic = (props: ExperienceHistoryListType) => {
 };
 export default Basic;
 
-const Wrap = styled.div`
+const Wrap = styled.div<ExperienceStyledPropsType>`
   margin: 0 auto;
   padding: 0em 4vw;
   display: flex;
@@ -28,6 +28,7 @@ const Wrap = styled.div`
   flex-wrap: wrap;
   border-bottom: 0.2px solid #b4b4b4a2;
   .date {
+    color: ${({ dateColor }) => dateColor ?? 'black'};
     width: 15%;
     padding: 2em;
     flex-grow: 1;
@@ -46,6 +47,7 @@ const Wrap = styled.div`
     }
   }
   .child-title {
+    color: ${({ historyTitleColor }) => historyTitleColor ?? 'black'};
     width: 15%;
     flex-grow: 1;
     font-size: 22px;
@@ -57,6 +59,7 @@ const Wrap = styled.div`
     }
   }
   .des {
+    color: ${({ descriptionColor }) => descriptionColor ?? 'black'};
     padding: 2em;
     flex-grow: 2;
     width: 30%;
diff --git a/src/lib/components/Experience/History/Box.tsx b/src/lib/components/Experience/History/Box.tsx
index e0d5f72..94d357a 100644
--- a/src/lib/components/Experience/History/Box.tsx
+++ b/src/lib/components/Experience/History/Box.tsx
@@ -1,12 +1,12 @@
 import styled from 'styled-components';
-import { ExperienceHistoryListType } from '../../../common/types/ComponentTypes/ExperienceType';
+import { ExperienceHistoryListType, ExperienceStyledPropsType } from '../../../common/types/ComponentTypes/ExperienceType';
 
 const Box = (props: ExperienceHistoryListType) => {
-  const { startDate, endDate, title, des } = props;
+  const { startDate, endDate, title, des, historyTitleColor, dateColor, descriptionColor } = props;
 
   return (
     <div>
-      <Wrap>
+      <Wrap historyTitleColor={historyTitleColor} dateColor={dateColor} descriptionColor={descriptionColor}>
         <div className="date">
           <span className="start-date">{startDate}</span>
           <span className="end-date">{endDate}</span>
@@ -19,7 +19,7 @@ const Box = (props: ExperienceHistoryListType) => {
 };
 export default Box;
 
-const Wrap = styled.div`
+const Wrap = styled.div<ExperienceStyledPropsType>`
   margin: 10px;
   padding: 0em 4vw;
   display: flex;
@@ -32,6 +32,7 @@ const Wrap = styled.div`
     width: 15%;
     padding: 2em;
     flex-grow: 1;
+    color: ${({ dateColor }) => dateColor ?? 'black'};
     @media screen and (max-width: 800px) {
       width: 100%;
       text-align: center;
@@ -47,6 +48,7 @@ const Wrap = styled.div`
     }
   }
   .child-title {
+    color: ${({ historyTitleColor }) => historyTitleColor ?? 'black'};
     width: 15%;
     flex-grow: 1;
     font-size: 22px;
@@ -59,6 +61,7 @@ const Wrap = styled.div`
     }
   }
   .des {
+    color: ${({ descriptionColor }) => descriptionColor ?? 'black'};
     padding: 2em;
     flex-grow: 2;
     width: 30%;
diff --git a/src/lib/components/Experience/History/Vertical.tsx b/src/lib/components/Experience/History/Vertical.tsx
index 165bff2..eedb662 100644
--- a/src/lib/components/Experience/History/Vertical.tsx
+++ b/src/lib/components/Experience/History/Vertical.tsx
@@ -1,11 +1,11 @@
 import styled, { css } from 'styled-components';
-import { VerticalPropsType, ExperienceVerticalOptionType } from '../../../common/types/ComponentTypes/ExperienceType';
+import { VerticalPropsType, ExperiencePropsType } from '../../../common/types/ComponentTypes/ExperienceType';
 
 const Vertical = (props: VerticalPropsType) => {
-  const { startDate, endDate, title, des, shape, titleColor } = props;
+  const { startDate, endDate, title, des, shape, historyTitleColor, dateColor, descriptionColor } = props;
 
   return (
-    <Wrap shape={shape} titleColor={titleColor}>
+    <Wrap shape={shape} historyTitleColor={historyTitleColor} dateColor={dateColor} descriptionColor={descriptionColor}>
       <div className="intro">
         <div className="date">
           <span className="start-date">{startDate}</span>
@@ -22,10 +22,10 @@ export default Vertical;
 
 Vertical.defaultProps = {
   shape: 'square',
-  titleColor: 'black',
+  historyTitleColor: 'black',
 };
 
-const Wrap = styled.div<ExperienceVerticalOptionType>`
+const Wrap = styled.div<ExperiencePropsType>`
   width: 25em;
   padding: 10px 2em 1.2em 2em;
   margin: 1em auto;
@@ -47,6 +47,7 @@ const Wrap = styled.div<ExperienceVerticalOptionType>`
   .intro {
     margin: 10px;
     .date {
+      color: ${({ dateColor }) => dateColor ?? 'black'};
       margin: 15px 0px 10px 0px;
       font-size: 13px;
       .start-date {
@@ -60,11 +61,14 @@ const Wrap = styled.div<ExperienceVerticalOptionType>`
       }
     }
     .child-title {
-      color: ${({ titleColor }) => titleColor ?? 'black'};
+      color: ${({ historyTitleColor }) => historyTitleColor ?? 'black'};
       font-size: 25px;
       font-weight: 600;
       padding: 7px;
       border-bottom: 1px solid #b4b4b4a2;
     }
+    .des {
+      color: ${({ descriptionColor }) => descriptionColor ?? 'black'};
+    }
   }
 `;
diff --git a/src/lib/components/VisitorComment/CommentInput.tsx b/src/lib/components/VisitorComment/CommentInput.tsx
index 18a07d2..f8f744b 100644
--- a/src/lib/components/VisitorComment/CommentInput.tsx
+++ b/src/lib/components/VisitorComment/CommentInput.tsx
@@ -21,6 +21,8 @@ const CommentInput = (props: VisitorCommentPropsType) => {
     comment,
     nickname,
     password,
+    inputFontColor,
+    inputPlacehoderColor,
   } = props;
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -33,7 +35,13 @@ const CommentInput = (props: VisitorCommentPropsType) => {
   };
 
   return (
-    <Wrap theme={theme} inputBackgroundColor={inputBackgroundColor} userInputLineColor={userInputLineColor}>
+    <Wrap
+      theme={theme}
+      inputBackgroundColor={inputBackgroundColor}
+      userInputLineColor={userInputLineColor}
+      inputFontColor={inputFontColor}
+      inputPlacehoderColor={inputPlacehoderColor}
+    >
       <textarea
         ref={textareaRef}
         onKeyDown={onKeyDown}
@@ -43,7 +51,7 @@ const CommentInput = (props: VisitorCommentPropsType) => {
         value={comment}
       />
       <InfoWrap>
-        <UserInfo>
+        <UserInfo inputPlacehoderColor={inputPlacehoderColor}>
           <input
             className="nickname"
             type="text"
@@ -83,6 +91,7 @@ const Wrap = styled.div<VisitorCommentStyledPropsType>`
   border: ${({ inputBackgroundColor }) => inputBackgroundColor ?? '0.2px solid #b4b4b4a2'};
   box-shadow: ${({ theme }) => (theme === 'box' ? '0px 0px 5px 0px rgba(83, 83, 83, 0.14)' : 'none')};
   textarea {
+    color: ${({ inputFontColor }) => inputFontColor ?? 'black'};
     background-color: ${({ inputBackgroundColor }) => inputBackgroundColor ?? 'white'};
     outline: none;
     border: none;
@@ -93,6 +102,9 @@ const Wrap = styled.div<VisitorCommentStyledPropsType>`
     align-items: center;
     font-size: 16px;
     overflow: hidden;
+    ::placeholder {
+      color: ${({ inputPlacehoderColor }) => inputPlacehoderColor ?? 'black'};
+    }
     :focus::-webkit-input-placeholder {
       opacity: 0;
     }
@@ -106,6 +118,7 @@ const Wrap = styled.div<VisitorCommentStyledPropsType>`
   }
   input {
     background-color: ${({ inputBackgroundColor }) => inputBackgroundColor ?? 'white'};
+    color: ${({ inputFontColor }) => inputFontColor ?? 'black'};
     outline: none;
     border: none;
     padding: 0;
@@ -128,12 +141,17 @@ const Wrap = styled.div<VisitorCommentStyledPropsType>`
   }
 `;
 
-const UserInfo = styled.div`
+const UserInfo = styled.div<VisitorCommentStyledPropsType>`
   flex-grow: 3;
   display: flex;
   font-size: 14px;
   color: #959595;
   gap: 30px;
+  input {
+    ::placeholder {
+      color: ${({ inputPlacehoderColor }) => inputPlacehoderColor ?? 'black'};
+    }
+  }
   @media screen and (max-width: 500px) {
     flex-direction: row;
     width: 100%;
@@ -166,4 +184,4 @@ const SubmitBtn = styled.button<VisitorCommentStyledPropsType>`
 const InfoWrap = styled.div`
   display: flex;
   align-items: center;
-`;
\ No newline at end of file
+`;
diff --git a/src/lib/components/VisitorComment/CommentList/Basic.tsx b/src/lib/components/VisitorComment/CommentList/Basic.tsx
index fed8b80..bd55e8b 100644
--- a/src/lib/components/VisitorComment/CommentList/Basic.tsx
+++ b/src/lib/components/VisitorComment/CommentList/Basic.tsx
@@ -1,11 +1,14 @@
 import styled from 'styled-components';
-import { VisitorCommentListType } from '../../../common/types/ComponentTypes/VisitorCommentType';
+import {
+  VisitorCommentListType,
+  VisitorCommentStyledPropsType,
+} from '../../../common/types/ComponentTypes/VisitorCommentType';
 
 const Basic = (props: VisitorCommentListType) => {
-  const { description, nickname, date } = props;
+  const { description, nickname, date, listBackgroundColor, listNicknameColor, listDateColor } = props;
 
   return (
-    <Wrap>
+    <Wrap listBackgroundColor={listBackgroundColor} listNicknameColor={listNicknameColor} listDateColor={listDateColor}>
       <span className="des">{description}</span>
       <div className="info">
         <span className="nickname">{nickname}</span>
@@ -16,11 +19,11 @@ const Basic = (props: VisitorCommentListType) => {
 };
 export default Basic;
 
-const Wrap = styled.div`
+const Wrap = styled.div<VisitorCommentStyledPropsType>`
   display: flex;
   align-items: center;
   border-bottom: 0.2px solid #b4b4b4a2;
-  background-color: white;
+  background-color: ${({ listBackgroundColor }) => listBackgroundColor ?? 'white'};
   padding: 1em 5em;
   height: 80px;
   .des {
@@ -38,6 +41,10 @@ const Wrap = styled.div`
     color: #959595;
     .nickname {
       font-weight: bold;
+      color: ${({ listNicknameColor }) => listNicknameColor ?? '#959595'};
+    }
+    .date {
+      color: ${({ listDateColor }) => listDateColor ?? '#959595'};
     }
   }
   @media screen and (max-width: 768px) {
diff --git a/src/lib/components/VisitorComment/CommentList/Box.tsx b/src/lib/components/VisitorComment/CommentList/Box.tsx
index c42cfa5..a74e2f7 100644
--- a/src/lib/components/VisitorComment/CommentList/Box.tsx
+++ b/src/lib/components/VisitorComment/CommentList/Box.tsx
@@ -1,11 +1,14 @@
 import styled from 'styled-components';
-import { VisitorCommentListType } from '../../../common/types/ComponentTypes/VisitorCommentType';
+import {
+  VisitorCommentListType,
+  VisitorCommentStyledPropsType,
+} from '../../../common/types/ComponentTypes/VisitorCommentType';
 
 const Box = (props: VisitorCommentListType) => {
-  const { description, nickname, date } = props;
+  const { description, nickname, date, listBackgroundColor, listNicknameColor, listDateColor } = props;
 
   return (
-    <Wrap>
+    <Wrap listBackgroundColor={listBackgroundColor} listNicknameColor={listNicknameColor} listDateColor={listDateColor}>
       <span className="des">{description}</span>
       <div className="info">
         <span className="nickname">{nickname}</span>
@@ -16,10 +19,10 @@ const Box = (props: VisitorCommentListType) => {
 };
 export default Box;
 
-const Wrap = styled.div`
+const Wrap = styled.div<VisitorCommentStyledPropsType>`
   margin: 15px 5px;
   box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.14);
-  background-color: white;
+  background-color: ${({ listBackgroundColor }) => listBackgroundColor ?? 'white'};
   border-radius: 5px;
   display: flex;
   align-items: center;
@@ -39,6 +42,10 @@ const Wrap = styled.div`
     color: #959595;
     .nickname {
       font-weight: bold;
+      color: ${({ listNicknameColor }) => listNicknameColor ?? '#959595'};
+    }
+    .date {
+      color: ${({ listDateColor }) => listDateColor ?? '#959595'};
     }
   }
   @media screen and (max-width: 768px) {
diff --git a/src/lib/components/VisitorComment/CommentList/Vertical.tsx b/src/lib/components/VisitorComment/CommentList/Vertical.tsx
index 693bb0d..6b6e00e 100644
--- a/src/lib/components/VisitorComment/CommentList/Vertical.tsx
+++ b/src/lib/components/VisitorComment/CommentList/Vertical.tsx
@@ -1,11 +1,14 @@
 import styled from 'styled-components';
-import { VisitorCommentListType } from '../../../common/types/ComponentTypes/VisitorCommentType';
+import {
+  VisitorCommentListType,
+  VisitorCommentStyledPropsType,
+} from '../../../common/types/ComponentTypes/VisitorCommentType';
 
 const Vertical = (props: VisitorCommentListType) => {
-  const { description, nickname, date } = props;
+  const { description, nickname, date, listBackgroundColor, listNicknameColor, listDateColor } = props;
 
   return (
-    <Wrap>
+    <Wrap listBackgroundColor={listBackgroundColor} listNicknameColor={listNicknameColor} listDateColor={listDateColor}>
       <span className="des">{description}</span>
       <span className="nickname">{nickname}</span>
       <span className="date">{date}</span>
@@ -20,7 +23,7 @@ Vertical.defaultProps = {
   titleColor: 'black',
 };
 
-const Wrap = styled.div`
+const Wrap = styled.div<VisitorCommentStyledPropsType>`
   width: 20vw;
   min-height: 10em;
   max-height: 50%;
@@ -30,7 +33,7 @@ const Wrap = styled.div`
   flex-direction: column;
   border: 1px solid #b4b4b4a2;
   box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.04);
-  background-color: white;
+  background-color: ${({ listBackgroundColor }) => listBackgroundColor ?? 'white'};
   text-align: center;
   justify-content: center;
   gap: 10px;
@@ -41,12 +44,12 @@ const Wrap = styled.div`
   .nickname {
     padding: 5px;
     font-size: 14px;
-    color: #959595;
     font-weight: bold;
+    color: ${({ listNicknameColor }) => listNicknameColor ?? '#959595'};
   }
   .date {
     font-size: 14px;
-    color: #959595;
+    color: ${({ listDateColor }) => listDateColor ?? '#959595'};
   }
   @media screen and (max-width: 550px) {
     width: 50vw;
diff --git a/src/lib/components/VisitorComment/VisitorComment.tsx b/src/lib/components/VisitorComment/VisitorComment.tsx
index 0821e3e..14ce975 100644
--- a/src/lib/components/VisitorComment/VisitorComment.tsx
+++ b/src/lib/components/VisitorComment/VisitorComment.tsx
@@ -52,6 +52,12 @@ const VisitorComment = (props: VisitorCommentPropsType) => {
     handleChangeDescription,
     handleChangeNickname,
     handleChangePassword,
+    listBackgroundColor,
+    commentColor,
+    inputFontColor,
+    inputPlacehoderColor,
+    listNicknameColor,
+    listDateColor,
   } = props;
 
   //make progressbar in commentList scroll-y
@@ -94,6 +100,8 @@ const VisitorComment = (props: VisitorCommentPropsType) => {
         comment={comment}
         nickname={nickname}
         password={password}
+        inputFontColor={inputFontColor}
+        inputPlacehoderColor={inputPlacehoderColor}
       />
       {isOverflow && (
         <ProgressBar
@@ -102,14 +110,22 @@ const VisitorComment = (props: VisitorCommentPropsType) => {
           height="3px"
           colorFrom={progressbarColor}
           colorTo={progressbarColor}
+          animationType="none"
         />
       )}
-      <ChildWrap ref={ref} onScroll={scrollHandler} theme={theme}>
+      <ChildWrap ref={ref} onScroll={scrollHandler} theme={theme} commentColor={commentColor}>
         {commentList
           ?.slice(0)
           .reverse()
           .map((elements, idx) => (
-            <CommentList key={idx} {...elements} theme={theme} />
+            <CommentList
+              key={idx}
+              {...elements}
+              theme={theme}
+              listBackgroundColor={listBackgroundColor}
+              listNicknameColor={listNicknameColor}
+              listDateColor={listDateColor}
+            />
           ))}
       </ChildWrap>
     </Wrap>
@@ -175,6 +191,7 @@ const Wrap = styled.div<VisitorCommentStyledPropsType>`
 `;
 
 const ChildWrap = styled.div<VisitorCommentStyledPropsType>`
+  color: ${({ commentColor }) => commentColor ?? 'black'};
   margin-top: 3px;
   height: ${({ theme }) => (theme === 'vertical' ? '580px' : '400px')};
   overflow-y: scroll;