diff --git a/src/components/app/MessageTemplate.vue b/src/components/app/MessageTemplate.vue
index 476ffe2..b77ce07 100644
--- a/src/components/app/MessageTemplate.vue
+++ b/src/components/app/MessageTemplate.vue
@@ -249,10 +249,11 @@ export default {
       return file;
     },
     getDate() {
-      return friendlyDate(this.$props.date);
+
+      return friendlyDate(this.$props.date, this.apperance && this.apperance['12h_time'] ? '12h' : false);
     },
     getEditedDate() {
-      return friendlyDate(this.timeEdited);
+      return friendlyDate(this.timeEdited, this.apperance && this.apperance['12h_time'] ? '12h' : false);
     },
     userAvatar() {
       return config.domain + "/avatars/" + this.$props.avatar;
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue b/src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue
index 1bb7028..fc5b6c3 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue
@@ -33,15 +33,20 @@
         Options
       </div>  
       <div class="switches">
-        <div
-          class="checkbox"
-          @click="toggleAppearance"
-        >
+        <div class="checkbox"
+          @click="toggleAppearance">
           <div :class="`checkbox-box ${apperance && apperance.own_message_right && apperance.own_message_right === true ? 'selected' : '' }`" />
           <div class="checkbox-name">
             Show my messages on the right side.
           </div>
         </div>
+        <div class="checkbox"
+          @click="toggleTime">
+          <div :class="`checkbox-box ${apperance && apperance['12h_time'] && apperance['12h_time'] === true ? 'selected' : '' }`" />
+          <div class="checkbox-name">
+            Show time in 12 hour.
+          </div>
+        </div>
       </div>
     </div>
     <div class="title">
@@ -74,6 +79,14 @@ export default {
     }
   },
   methods: {
+    toggleTime() {
+      if (!this.apperance || !this.apperance['12h_time'] || this.apperance['12h_time'] === false) {
+        this.$store.dispatch('settingsModule/setApperance', {"12h_time": true})
+        return SettingsService.setApperance("12h_time", true)
+      }
+      this.$store.dispatch('settingsModule/setApperance', {"12h_time": false})
+      SettingsService.setApperance("12h_time", false)
+    },
     toggleAppearance() {
       if (!this.apperance || !this.apperance.own_message_right || this.apperance.own_message_right === false) {
         this.$store.dispatch('settingsModule/setApperance', {"own_message_right": true})
@@ -93,6 +106,7 @@ export default {
   margin: 20px;
   user-select: none;
   flex-shrink: 0;
+  flex-wrap: wrap;
 }
 
 .checkbox {
@@ -106,6 +120,7 @@ export default {
   margin: auto;
   margin-right: 10px;
   transition: 0.3s;
+  flex-shrink: 0;
 }
 
 .checkbox-box.selected {
@@ -121,6 +136,8 @@ export default {
 }
 .checkbox-name {
   max-width: 200px;
+  display: flex;
+  align-items: center;
 }
 
 .message-example{
diff --git a/src/utils/date.js b/src/utils/date.js
index 2c73510..e46b436 100644
--- a/src/utils/date.js
+++ b/src/utils/date.js
@@ -1,14 +1,14 @@
-export default (miliseconds) => {
+export default (miliseconds, type) => {
     let friendlyDate = "";
     const now = new Date();
     const messageDate = new Date(miliseconds);
     
     if (sameDay(now, messageDate)) {
-        friendlyDate = `Today at ${getFullTime(messageDate)}`
+        friendlyDate = `Today at ${getFullTime(messageDate, type)}`
     } else if (yesterDay(now, messageDate)) {
-        friendlyDate = `Yesterday at ${getFullTime(messageDate)}`
+        friendlyDate = `Yesterday at ${getFullTime(messageDate, type)}`
     } else {
-        friendlyDate = getFullDateWithTime(messageDate)
+        friendlyDate = getFullDateWithTime(messageDate, type)
     }
     return friendlyDate;
 }
@@ -24,7 +24,10 @@ function yesterDay(d1, d2) {
     (d1.getDate() - d2.getDate()) == 1
 }
 
-function getFullTime(date){
+function getFullTime(date, type){
+    if (type === "12h") {
+        return formatAMPM(date);
+    }
     let finalTime = ""
     let hours = date.getHours();
     let minutes = date.getMinutes()
@@ -43,11 +46,22 @@ function getFullTime(date){
     return finalTime;
 }
 
-function getFullDateWithTime(date) {
+function getFullDateWithTime(date, type) {
     const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
     const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
     const dayName = days[date.getDay()];
     const monthName = months[date.getMonth()];
-    return `${dayName} ${date.getDate()} ${monthName} ${date.getFullYear()} at ${getFullTime(date)}`
+    return `${dayName} ${date.getDate()} ${monthName} ${date.getFullYear()} at ${getFullTime(date, type)}`
     
-}
\ No newline at end of file
+}
+
+function formatAMPM(date) {
+    var hours = date.getHours();
+    var minutes = date.getMinutes();
+    var ampm = hours >= 12 ? 'PM' : 'AM';
+    hours = hours % 12;
+    hours = hours ? hours : 12; // the hour '0' should be '12'
+    minutes = minutes < 10 ? '0'+minutes : minutes;
+    var strTime = hours + ':' + minutes + ' ' + ampm;
+    return strTime;
+  }
\ No newline at end of file