diff --git a/projects/ucap-webmessenger-app/src/assets/images/theme/theme-default.png b/projects/ucap-webmessenger-app/src/assets/images/theme/theme-default.png
new file mode 100644
index 00000000..2353d3da
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/images/theme/theme-default.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/images/theme/theme-lgRed.png b/projects/ucap-webmessenger-app/src/assets/images/theme/theme-lgRed.png
new file mode 100644
index 00000000..d227a5ff
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/images/theme/theme-lgRed.png differ
diff --git a/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html b/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html
index c9f2ca2d..9d243fa9 100644
--- a/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html
+++ b/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html
@@ -1,6 +1,12 @@
 <div>
   <mat-list>
     <h1 mat-subheader>테마</h1>
+
+    <ul  class="theme-list">
+      <li class="theme-box default on"></li>
+      <li class="theme-box lgRed"></li>
+    </ul>
+
     <mat-list-item>
       <span>기본값</span>
       <span>어둡게</span>
diff --git a/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.scss b/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.scss
index e69de29b..a0121a63 100644
--- a/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.scss
+++ b/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.scss
@@ -0,0 +1,28 @@
+.theme-list {
+  position: relative;
+  display: flex;
+  flex-flow: row;
+  margin: 10px;
+  height: 120px;
+
+  .theme-box{
+    width: 140px;
+    height:98px;
+    margin-right:10px;
+    border: 1px solid #dddddd;
+    background-size:100% auto;
+    background-repeat: no-repeat;
+    opacity: 0.7;
+    &.default{
+      background-image: url("../../../../ucap-webmessenger-app/src/assets/images/theme/theme-default.png");
+    }
+    &.lgRed{
+     background-image: url("../../../../ucap-webmessenger-app/src/assets/images/theme/theme-lgRed.png");
+     }
+    &.on{
+      border:1px solid #333333;
+       opacity: 1;
+    }
+  }
+
+}