diff --git a/src/components/dt-base.js b/src/components/dt-base.js
index 5f30338..85fc39c 100644
--- a/src/components/dt-base.js
+++ b/src/components/dt-base.js
@@ -18,6 +18,7 @@ export default class DtBase extends LitElement {
       `,
     ];
   }
+
   static get properties() {
     return {
       /**
diff --git a/src/components/form/dt-church-health-circle/dt-church-health-circle.js b/src/components/form/dt-church-health-circle/dt-church-health-circle.js
index 91a432f..5e29863 100644
--- a/src/components/form/dt-church-health-circle/dt-church-health-circle.js
+++ b/src/components/form/dt-church-health-circle/dt-church-health-circle.js
@@ -5,6 +5,7 @@ import { DtMultiSelect } from '../dt-multi-select/dt-multi-select.js';
 import './dt-church-health-circle-icon.js';
 import '../dt-toggle/dt-toggle.js';
 
+
 export class DtChurchHealthCircle extends DtMultiSelect {
   static get styles() {
     return [
@@ -63,6 +64,9 @@ export class DtChurchHealthCircle extends DtMultiSelect {
         .health-circle--disabled dt-church-health-icon {
           cursor: not-allowed;
         }
+        .health-circle--readonly dt-church-health-icon {
+          cursor: not-allowed;
+        }
 
         dt-church-health-icon {
           position: absolute;
@@ -81,6 +85,12 @@ export class DtChurchHealthCircle extends DtMultiSelect {
           transform: rotate(var(--az)) translate(var(--radius))
             rotate(calc(-1 * var(--az)));
         }
+
+        .corner-button{
+          position: absolute; 
+          top: 0;
+          right: 0;
+        }
       `,
       css`
         dt-toggle::part(root) {
@@ -170,6 +180,7 @@ export class DtChurchHealthCircle extends DtMultiSelect {
               'health-circle': true,
               'health-circle--committed': this.isCommited,
               'health-circle--disabled': this.disabled,
+              'health-circle--readonly': this.readonly,
             })}
           >
             <div class="health-circle__grid">
@@ -181,7 +192,7 @@ export class DtChurchHealthCircle extends DtMultiSelect {
                     .active=${(this.value || []).indexOf(key) !== -1}
                     .style="--i: ${index + 1}"
                     .missingIcon="${this.missingIcon}"
-                    ?disabled=${this.disabled}
+                    ?disabled=${this.disabled || this.readonly}
                     data-value="${key}"
                     @change="${this.handleIconClick}"
                   >
@@ -191,7 +202,9 @@ export class DtChurchHealthCircle extends DtMultiSelect {
             ${this.renderIconLoading()} ${this.renderIconSaved()}
           </div>
         </div>
-
+        
+        ${!this.readonly
+          ? html`
         <dt-toggle
           name="church_commitment"
           label="${this.options?.church_commitment?.label}"
@@ -200,9 +213,26 @@ export class DtChurchHealthCircle extends DtMultiSelect {
           ?checked=${this.isCommited}
           data-value="church_commitment"
         >
-        </dt-toggle>
+        </dt-toggle>`
+            : 
+          null}
         ${this.renderError()}
       </div>
+      ${this.readonly && !this.disabled
+          ? html`
+            <div class="corner-button">
+              <button
+                @click="${this.switchReadOnly}"
+                @keydown="${this._inputKeyDown}"
+                @blur="${this._handleButtonBlur}"
+                class="readonly-btn"
+                id="add-item"
+                type="button"
+                tabindex="1"
+              >
+                <dt-icon icon="mdi:pencil"></dt-icon>
+              </button>
+            </div>`:null}
     `;
   }
 
diff --git a/src/components/form/dt-church-health-circle/dt-church-health-circle.stories.js b/src/components/form/dt-church-health-circle/dt-church-health-circle.stories.js
index 778dffe..c7e5ae6 100644
--- a/src/components/form/dt-church-health-circle/dt-church-health-circle.stories.js
+++ b/src/components/form/dt-church-health-circle/dt-church-health-circle.stories.js
@@ -156,8 +156,7 @@ export default {
     error: '',
     onChange: action('on-change'),
   },
-  render: args => {
-    return html`
+  render: args => html`
       <div style="width: ${ifDefined(args.width)}px;">
         <dt-church-health-circle
           name="${ifDefined(args.name)}"
@@ -165,6 +164,7 @@ export default {
           .options="${args.options}"
           missingIcon="${ifDefined(args.missingIcon)}"
           ?disabled=${args.disabled}
+          ?readonly=${args.readonly}
           ?loading="${args.loading}"
           ?saved="${args.saved}"
           error="${ifDefined(args.error)}"
@@ -173,8 +173,7 @@ export default {
           ${args.slot}
         </dt-church-health-circle>
       </div>
-    `;
-  },
+    `,
 };
 
 export const Empty = {};
@@ -222,6 +221,21 @@ export const Disabled = {
   },
 };
 
+export const ReadOnly = {
+  args: {
+    value: ['church_bible'],
+    readonly: true,
+  },
+};
+
+export const ReadOnlyDisabled = {
+  args: {
+    value: ['church_bible'],
+    readonly: true,
+    disabled: true,
+  },
+};
+
 export const PrivateField = {
   args: {
     private: true,
@@ -288,11 +302,11 @@ export const ApiSettings = {
     ],
     settings: null,
   },
-};*/
+}; */
 /*
 export const ApiGroup = {
   args: {
     groupId: 3,
     group: null,
   },
-};*/
+}; */
diff --git a/src/components/form/dt-connection/dt-connection.js b/src/components/form/dt-connection/dt-connection.js
index 2e3c12f..1058b26 100644
--- a/src/components/form/dt-connection/dt-connection.js
+++ b/src/components/form/dt-connection/dt-connection.js
@@ -217,6 +217,8 @@ export class DtConnection extends DtTags {
       .filter(i => !i.delete)
       .map(
         opt => html`
+        ${!this.readonly
+            ? html`
           <div
             class="selected-option"
             @click="${this._handleItemClick}"
@@ -239,8 +241,14 @@ export class DtConnection extends DtTags {
             >
               x
             </button>
-          </div>
-        `,
+          </div>`
+            : 
+          html`<div>
+            ${opt.link
+                ? html`<a href="${opt.link}">${opt.label}</a>`
+                : html`<div>${opt.label}</div>`}
+          </div>`}
+      `,
       );
   }
 
@@ -281,10 +289,12 @@ export class DtConnection extends DtTags {
   }
 
   render() {
-    const optionListStyles = this.optionListStyles;
+    const {optionListStyles} = this;
     return html`
       ${this.labelTemplate()}
 
+      ${!this.readonly
+          ? html`
       <div
         class="input-group ${this.disabled ? 'disabled' : ''} ${this.allowAdd
           ? 'allowAdd'
@@ -319,7 +329,11 @@ export class DtConnection extends DtTags {
           ${this._renderOptions()}
         </ul>
         ${this.renderIcons()}
-      </div>
+      </div>`
+            : 
+          html`<div class="readonly-options">
+              ${this._renderSelectedOptions()}
+          </div>`}
     `;
   }
 }
diff --git a/src/components/form/dt-connection/dt-connection.stories.js b/src/components/form/dt-connection/dt-connection.stories.js
index dba9610..78cb707 100644
--- a/src/components/form/dt-connection/dt-connection.stories.js
+++ b/src/components/form/dt-connection/dt-connection.stories.js
@@ -135,6 +135,7 @@ export default {
       placeholder,
       value,
       disabled,
+      readonly,
       required,
       requiredMessage,
       icon,
@@ -160,6 +161,7 @@ export default {
         .options="${options}"
         .value="${value}"
         ?disabled=${disabled}
+        ?readonly=${readonly}
         ?required=${required}
         requiredMessage="${ifDefined(requiredMessage)}"
         icon="${ifDefined(icon)}"
@@ -277,6 +279,31 @@ export const Disabled = {
     disabled: true,
   },
 };
+export const ReadOnly = {
+  args: {
+    value: [basicOptions[1],
+      {
+        id: 2,
+        label: 'test',
+      }],
+    options: basicOptions,
+    readonly: true,
+  },
+};
+
+export const ReadOnlyDisabled = {
+  args: {
+    value: [basicOptions[1],
+      {
+        id: 2,
+        label: 'test',
+      }],
+    options: basicOptions,
+    readonly: true,
+    disabled: true,
+  },
+};
+
 export const PrivateField = {
   args: {
     private: true,
diff --git a/src/components/form/dt-date/dt-date.js b/src/components/form/dt-date/dt-date.js
index 028e215..ac3f55f 100644
--- a/src/components/form/dt-date/dt-date.js
+++ b/src/components/form/dt-date/dt-date.js
@@ -218,6 +218,7 @@ export class DtDate extends DtFormBase {
     };
     return classes;
   }
+
   get fieldContainerClasses() {
     return {
       'field-container': true,
@@ -232,9 +233,17 @@ export class DtDate extends DtFormBase {
       this.timestamp = new Date(this.value).getTime();
     }
 
+    let readonlyValue = this.value;
+    if (this.value) {
+        const [y, m, d] = this.value.split('-');
+        readonlyValue = `${m}/${d}/${y}`;
+    }
+
     return html`
       ${this.labelTemplate()}
 
+      ${!this.readonly
+          ? html`
       <div class="input-group">
         <div class="${classMap(this.fieldContainerClasses)}">
           <input
@@ -265,7 +274,11 @@ export class DtDate extends DtFormBase {
         </div>
 
         ${this.renderIcons()}
-      </div>
+      </div>`
+            : 
+          html`<div class="readonly-options">
+              ${readonlyValue}
+          </div>`}
     `;
   }
 
diff --git a/src/components/form/dt-date/dt-date.stories.js b/src/components/form/dt-date/dt-date.stories.js
index 95d47c0..478e95d 100644
--- a/src/components/form/dt-date/dt-date.stories.js
+++ b/src/components/form/dt-date/dt-date.stories.js
@@ -45,6 +45,7 @@ export default {
       value = '',
       timestamp,
       disabled = false,
+      readonly = false,
       required = false,
       requiredMessage,
       icon = 'https://cdn-icons-png.flaticon.com/512/1077/1077114.png',
@@ -64,6 +65,7 @@ export default {
         value=${ifDefined(value)}
         timestamp=${ifDefined(timestamp)}
         ?disabled=${disabled}
+        ?readonly=${readonly}
         ?required=${required}
         requiredMessage=${ifDefined(requiredMessage)}
         icon=${ifDefined(icon)}
@@ -121,6 +123,21 @@ export const Disabled = {
   },
 };
 
+export const ReadOnly = {
+  args: {
+    value: '2020-01-01',
+    readonly: true,
+  },
+};
+
+export const ReadOnlyDisabled = {
+  args: {
+    value: '2020-01-01',
+    readonly: true,
+    disabled: true,
+  },
+};
+
 export const PrivateField = {
   args: {
     private: true,
diff --git a/src/components/form/dt-datetime/dt-datetime.js b/src/components/form/dt-datetime/dt-datetime.js
index a7070f4..5014a09 100644
--- a/src/components/form/dt-datetime/dt-datetime.js
+++ b/src/components/form/dt-datetime/dt-datetime.js
@@ -35,9 +35,24 @@ export class DtDatetime extends DtDate {
       this.timestamp = new Date(this.value).getTime();
     }
 
+    let readonlyValue = this.value;
+    if (this.value) {
+      const dateObj = new Date(this.value);
+      readonlyValue = new Intl.DateTimeFormat('en-US', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit',
+          hour12: true
+      }).format(dateObj);
+    }
+
     return html`
       ${this.labelTemplate()}
 
+      ${!this.readonly
+          ? html`
       <div class="input-group">
         <div class="${classMap(this.fieldContainerClasses)}">
           <input
@@ -68,7 +83,11 @@ export class DtDatetime extends DtDate {
         </div>
 
         ${this.renderIcons()}
-      </div>
+      </div>`
+            : 
+          html`<div class="readonly-options">
+              ${readonlyValue}
+          </div>`}
     `;
   }
 }
diff --git a/src/components/form/dt-datetime/dt-datetime.stories.js b/src/components/form/dt-datetime/dt-datetime.stories.js
index ba859bd..7bce445 100644
--- a/src/components/form/dt-datetime/dt-datetime.stories.js
+++ b/src/components/form/dt-datetime/dt-datetime.stories.js
@@ -45,6 +45,7 @@ export default {
       value = '',
       timestamp,
       disabled = false,
+      readonly = false,
       required = false,
       requiredMessage,
       icon = 'https://cdn-icons-png.flaticon.com/512/1077/1077114.png',
@@ -64,6 +65,7 @@ export default {
         value=${ifDefined(value)}
         timestamp=${ifDefined(timestamp)}
         ?disabled=${disabled}
+        ?readonly=${readonly}
         ?required=${required}
         requiredMessage=${ifDefined(requiredMessage)}
         icon=${ifDefined(icon)}
@@ -121,6 +123,21 @@ export const Disabled = {
   },
 };
 
+export const ReadOnly = {
+  args: {
+    value: '2023-07-21T17:00',
+    readonly: true,
+  },
+};
+
+export const ReadOnlyDisabled = {
+  args: {
+    value: '2023-07-21T17:00',
+    readonly: true,
+    disabled: true,
+  },
+};
+
 export const PrivateField = {
   args: {
     private: true,
diff --git a/src/components/form/dt-file-upload/dt-file-upload.js b/src/components/form/dt-file-upload/dt-file-upload.js
index 40677c6..6ec3109 100644
--- a/src/components/form/dt-file-upload/dt-file-upload.js
+++ b/src/components/form/dt-file-upload/dt-file-upload.js
@@ -721,7 +721,7 @@ export class DtFileUpload extends DtFormBase {
     if (file.name) {
       const parts = file.name.split('.');
       if (parts.length > 1) {
-        const ext = '.' + parts.pop().toLowerCase();
+        const ext = `.${  parts.pop().toLowerCase()}`;
         if (mapping[ext]) {
           return mapping[ext];
         }
@@ -1258,7 +1258,7 @@ export class DtFileUpload extends DtFormBase {
 
     if (this._isStandaloneMode()) {
       // Standalone mode: use direct URL if available
-      const url = file.url;
+      const {url} = file;
       if (!url) return;
       const fileKey = file.key || file;
       const fileName =
@@ -1278,8 +1278,8 @@ export class DtFileUpload extends DtFormBase {
         new CustomEvent('dt:download-file', {
           bubbles: true,
           detail: {
-            fileKey: fileKey,
-            fileName: fileName,
+            fileKey,
+            fileName,
             metaKey: this.metaKey || '',
           },
         }),
@@ -1298,8 +1298,8 @@ export class DtFileUpload extends DtFormBase {
     const event = new CustomEvent('dt:download-file', {
       bubbles: true,
       detail: {
-        fileKey: fileKey,
-        fileName: fileName,
+        fileKey,
+        fileName,
         metaKey: this.metaKey,
         onSuccess: () => {
           // Download triggered successfully
@@ -1372,6 +1372,21 @@ export class DtFileUpload extends DtFormBase {
           ? html`<span slot="icon-start">${iconContent}</span>`
           : html`<slot name="icon-start" slot="icon-start"></slot>`}
         ${this.label}
+        ${this.readonly && !this.disabled
+          ? html`
+            <slot name="icon-end" slot="icon-end">
+              <button
+                @click="${this.switchReadOnly}"
+                @keydown="${this._inputKeyDown}"
+                @blur="${this._handleButtonBlur}"
+                class="readonly-btn"
+                id="add-item"
+                type="button"
+                tabindex="1"
+              >
+                <dt-icon icon="mdi:pencil"></dt-icon>
+              </button>
+            </slot>`:null}
       </dt-label>
     `;
   }
@@ -1384,6 +1399,8 @@ export class DtFileUpload extends DtFormBase {
     return html`
       <div class="input-group">
         ${this.labelTemplate()}
+          ${!this.readonly
+            ? html`
         <div
           class="upload-zone ${classMap({
             compact: !this._uploadZoneExpanded,
@@ -1418,7 +1435,8 @@ export class DtFileUpload extends DtFormBase {
                 : ''}</span
             >
           </div>
-        </div>
+        </div>`
+            : null}
 
         ${when(
           this.stagedFiles.length > 0 && !this.autoUpload,
@@ -1484,7 +1502,7 @@ export class DtFileUpload extends DtFormBase {
                     const name =
                       file.name ||
                       (typeof key === 'string' ? key.split('/').pop() : '');
-                    const size = file.size;
+                    const {size} = file;
                     const previewUrl = this._getFilePreviewUrl(file);
                     const isImage = this._isImage(file);
                     const isEditing = this._editingFileKey === key;
@@ -1633,7 +1651,7 @@ export class DtFileUpload extends DtFormBase {
                             `,
                           )}
                           ${when(
-                            this.deleteEnabled && !this.disabled,
+                            this.deleteEnabled && !this.disabled && !this.readonly,
                             () => html`
                               <button
                                 class="delete"
diff --git a/src/components/form/dt-file-upload/dt-file-upload.stories.js b/src/components/form/dt-file-upload/dt-file-upload.stories.js
index ed9912d..dc50755 100644
--- a/src/components/form/dt-file-upload/dt-file-upload.stories.js
+++ b/src/components/form/dt-file-upload/dt-file-upload.stories.js
@@ -53,6 +53,7 @@ export default {
     postId: { control: 'text' },
     metaKey: { control: 'text' },
     disabled: { control: 'boolean' },
+    readonly: { control: 'boolean' },
     loading: { control: 'boolean' },
     saved: { control: 'boolean' },
     ...argTypes,
@@ -85,6 +86,7 @@ function Template(args) {
     postId = '',
     metaKey = '',
     disabled = false,
+    readonly = false,
     required = false,
     requiredMessage,
     icon = 'mdi:cloud-upload',
@@ -129,6 +131,7 @@ function Template(args) {
       postId=${postId}
       meta-key=${metaKey}
       ?disabled=${disabled}
+      ?readonly=${readonly}
       ?required=${required}
       requiredMessage=${ifDefined(requiredMessage)}
       icon="${icon}"
@@ -340,6 +343,45 @@ Disabled.args = {
   ],
 };
 
+export const ReadOnly = Template.bind({});
+ReadOnly.args = {
+  readonly: true,
+  value: [
+    {
+      key: 'site_id/prefix_randomstring1.jpg',
+      name: 'photo1.jpg',
+      type: 'image/jpeg',
+      size: 123456,
+      thumbnail_url: SAMPLE_THUMBNAIL_URL,
+      url: SAMPLE_IMAGE_URL,
+    },
+  ],
+};
+
+export const ReadOnlyListLayout = Template.bind({});
+ReadOnlyListLayout.args = {
+  displayLayout: 'list',
+  readonly: true,
+  value: [
+    {
+      key: 'site_id/prefix_randomstring1.jpg',
+      name: 'photo1.jpg',
+      type: 'image/jpeg',
+      size: 123456,
+      thumbnail_key: 'site_id/prefix_randomstring1_thumbnail.jpg',
+      thumbnail_url: SAMPLE_THUMBNAIL_URL,
+      url: SAMPLE_IMAGE_URL,
+    },
+    {
+      key: 'site_id/prefix_randomstring2.pdf',
+      name: 'document.pdf',
+      type: 'application/pdf',
+      size: 456789,
+      url: SAMPLE_PDF_URL,
+    },
+  ],
+};
+
 export const Loading = Template.bind({});
 Loading.args = {
   loading: true,
diff --git a/src/components/form/dt-form-base.js b/src/components/form/dt-form-base.js
index 9c2c59c..c81cbf2 100644
--- a/src/components/form/dt-form-base.js
+++ b/src/components/form/dt-form-base.js
@@ -25,6 +25,16 @@ export default class DtFormBase extends DtBase {
     return [
       ...super.styles,
       css`
+        .readonly-btn {
+          background-color: transparent;
+          border: none;
+          cursor: pointer;
+          height: 0.9em;
+          padding: 0;
+          color: var(--primary-color, #cc4b37);
+          transform: scale(1.5);
+        }
+        
         .input-group {
           position: relative;
         }
@@ -54,6 +64,22 @@ export default class DtFormBase extends DtBase {
           color: var(--success-color);
           width: 1.4rem;
         }
+
+        .readonly-options {
+          margin-top: .5rem;
+          margin-left: 1.2rem;
+          line-height: 1.6;
+          font-family: var(--font-family);
+        }
+
+        .readonly-options a {
+          color: var(--primary-color, #0a84ff);
+        }
+        .readonly-options dt-icon {
+          color: var(--primary-color, #0a84ff);
+          line-height: 0;
+          vertical-align: middle;
+        }
       `,
       css`
         @keyframes fadeOut {
@@ -125,6 +151,8 @@ export default class DtFormBase extends DtBase {
       privateLabel: { type: String },
       /** Disables field. */
       disabled: { type: Boolean },
+      /** Shows data without the form input field. */
+      readonly: { type: Boolean },
       /** Validates that field is not empty when form is submitted and displays error if not. */
       required: { type: Boolean },
       /** Error message to be displayed for required field validation. */
@@ -319,10 +347,29 @@ export default class DtFormBase extends DtBase {
           ? html`<slot name="icon-start" slot="icon-start"></slot>`
           : null}
         ${this.label}
+        ${this.readonly && !this.disabled
+          ? html`
+            <slot name="icon-end" slot="icon-end">
+              <button
+                @click="${this.switchReadOnly}"
+                @keydown="${this._inputKeyDown}"
+                @blur="${this._handleButtonBlur}"
+                class="readonly-btn"
+                id="add-item"
+                type="button"
+                tabindex="1"
+              >
+                <dt-icon icon="mdi:pencil"></dt-icon>
+              </button>
+            </slot>`:null}
       </dt-label>
     `;
   }
 
+  switchReadOnly() {
+    this.readonly = false;
+  }
+
   _errorClasses() {
     return {
       'error-container': true,
diff --git a/src/components/form/dt-location-map/dt-location-map-item.js b/src/components/form/dt-location-map/dt-location-map-item.js
index ec388d3..6cb44ba 100644
--- a/src/components/form/dt-location-map/dt-location-map-item.js
+++ b/src/components/form/dt-location-map/dt-location-map-item.js
@@ -17,6 +17,7 @@ export default class DtLocationMapItem extends DtBase {
       googleToken: { type: String, attribute: 'google-token' },
       metadata: { type: Object },
       disabled: { type: Boolean },
+      readonly: { type: Boolean },
       open: {
         type: Boolean,
         state: true,
@@ -237,6 +238,26 @@ export default class DtLocationMapItem extends DtBase {
           color: var(--dt-text-placeholder-color, #999);
           cursor: not-allowed;
         }
+
+        button.link-style {
+          background: none;
+          border: none;
+          padding: 0;
+          color: var(--primary-color, #0a84ff);
+          text-decoration: underline;
+          cursor: pointer;
+          font: inherit;
+        }
+
+        .location-item-wrapper {
+          display: inline-flex;
+          align-items: center;
+        }
+        .location-item-wrapper dt-icon {
+          color: var(--primary-color, #0a84ff);
+          line-height: 0;
+          vertical-align: middle;
+          padding-left: .5rem;
       `,
       css`
         /* === Inline Icons === */
@@ -726,6 +747,8 @@ export default class DtLocationMapItem extends DtBase {
     const existingValue = !!this.metadata?.label;
     const hasGeometry = this.metadata?.lat && this.metadata?.lng;
     return html`
+      ${!this.readonly
+          ? html`
       <div class="input-group">
         <div class="${classMap(this.classes)}">
           <input
@@ -786,7 +809,15 @@ export default class DtLocationMapItem extends DtBase {
             ></dt-spinner>`
           : null}
         ${this.renderIconSaved(hasGeometry)}
-      </div>
+      </div>`
+            : 
+            html`${existingValue ?
+          html`<div class="location-item-wrapper">
+            <button class="link-style" @click="${this._openMapModal}">${this.metadata?.label}</button>
+            <dt-icon icon="mdi:map-search"></dt-icon>
+          </div>` : null}
+        `}
+
 
       <dt-map-modal
         .metadata=${this.metadata}
diff --git a/src/components/form/dt-location-map/dt-location-map.js b/src/components/form/dt-location-map/dt-location-map.js
index 3518aec..6f1623d 100644
--- a/src/components/form/dt-location-map/dt-location-map.js
+++ b/src/components/form/dt-location-map/dt-location-map.js
@@ -262,7 +262,22 @@ export class DtLocationMap extends DtFormBase {
           ? html`<slot name="icon-start" slot="icon-start"></slot>`
           : null}
         ${this.label}
-        ${!this.open && (this.limit == 0 || this.locations.length < this.limit)
+        ${this.readonly && !this.disabled
+          ? html`
+            <slot name="icon-end" slot="icon-end">
+              <button
+                @click="${this.switchReadOnly}"
+                @keydown="${this._inputKeyDown}"
+                @blur="${this._handleButtonBlur}"
+                class="readonly-btn"
+                id="add-item"
+                type="button"
+                tabindex="1"
+              >
+                <dt-icon icon="mdi:pencil"></dt-icon>
+              </button>
+            </slot>`:null}
+        ${!this.readonly && !this.open && (this.limit == 0 || this.locations.length < this.limit)
           ? html`
               <slot name="icon-end" slot="icon-end">
                 <button
@@ -297,6 +312,7 @@ export class DtLocationMap extends DtFormBase {
         @delete=${this.deleteItem}
         @select=${this.selectLocation}
         ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
         ?invalid=${this.invalid && this.touched}
         ?loading=${showStatus ? this.loading : false}
         ?saved=${showStatus ? this.saved : false}
@@ -311,7 +327,7 @@ export class DtLocationMap extends DtFormBase {
     });
     return html`
       ${this.labelTemplate()}
-      <div class="input-group">
+      <div class=${this.readonly ? 'readonly-options' : 'input-group'}>
         ${repeat(
           this.locations || [],
           opt => opt.id,
diff --git a/src/components/form/dt-location-map/dt-location-map.stories.js b/src/components/form/dt-location-map/dt-location-map.stories.js
index f4b8425..c4f77a0 100644
--- a/src/components/form/dt-location-map/dt-location-map.stories.js
+++ b/src/components/form/dt-location-map/dt-location-map.stories.js
@@ -116,6 +116,7 @@ export default {
       placeholder,
       value,
       disabled = false,
+      readonly = false,
       required = false,
       requiredMessage,
       icon = 'https://cdn-icons-png.flaticon.com/512/1077/1077114.png',
@@ -140,6 +141,7 @@ export default {
         placeholder="${ifDefined(args.placeholder)}"
         .value="${args.value}"
         ?disabled=${args.disabled}
+        ?readonly=${args.readonly}
         ?required=${args.required}
         requiredMessage="${ifDefined(args.requiredMessage)}"
         icon="${ifDefined(args.icon)}"
@@ -216,6 +218,21 @@ export const Disabled = {
   },
 };
 
+export const ReadOnly = {
+  args: {
+    value: [basicOptions[0], basicOptions[1], basicOptions[2]],
+    readonly: true,
+  },
+};
+
+export const ReadOnlyDisabled = {
+  args: {
+    value: [basicOptions[0], basicOptions[1], basicOptions[2]],
+    readonly: true,
+    disabled: true,
+  },
+};
+
 export const PrivateField = {
   args: {
     value: [basicOptions[0]],
diff --git a/src/components/form/dt-location/dt-location.js b/src/components/form/dt-location/dt-location.js
index 67b26de..4416e62 100644
--- a/src/components/form/dt-location/dt-location.js
+++ b/src/components/form/dt-location/dt-location.js
@@ -201,6 +201,9 @@ export class DtLocation extends DtTags {
       .filter(i => !i.delete)
       .map(
         opt => html`
+      
+        ${!this.readonly
+            ? html`
           <div class="selected-option">
             <a
               href="${opt.link}"
@@ -215,16 +218,22 @@ export class DtLocation extends DtTags {
             >
               x
             </button>
-          </div>
+          </div>`
+            : 
+          html`<div>
+              ${opt.label}
+          </div>`}
         `,
       );
   }
 
   render() {
-    const optionListStyles = this.optionListStyles;
+    const {optionListStyles} = this;
     return html`
       ${this.labelTemplate()}
 
+      ${!this.readonly
+          ? html`
       <div class="input-group ${this.disabled ? 'disabled' : ''}">
         <div
           class="field-container"
@@ -258,7 +267,11 @@ export class DtLocation extends DtTags {
           ${this._renderOptions()}
         </ul>
         ${this.renderIconInvalid()} ${this.renderError()}
-      </div>
+      </div>`
+            : 
+          html`<div class="readonly-options">
+              ${this._renderSelectedOptions()}
+          </div>`}
     `;
   }
 }
diff --git a/src/components/form/dt-location/dt-location.stories.js b/src/components/form/dt-location/dt-location.stories.js
index e199398..61486d1 100644
--- a/src/components/form/dt-location/dt-location.stories.js
+++ b/src/components/form/dt-location/dt-location.stories.js
@@ -124,6 +124,7 @@ export default {
       placeholder,
       value,
       disabled,
+      readonly,
       required,
       requiredMessage,
       icon,
@@ -148,6 +149,7 @@ export default {
         .filters="${filters}"
         .value="${value}"
         ?disabled=${disabled}
+        ?readonly=${readonly}
         ?required=${required}
         requiredMessage="${ifDefined(requiredMessage)}"
         icon="${ifDefined(icon)}"
@@ -231,6 +233,24 @@ export const Disabled = {
     disabled: true,
   },
 };
+
+export const ReadOnly = {
+  args: {
+    value: [basicOptions[1]],
+    options: basicOptions,
+    readonly: true,
+  },
+};
+
+export const ReadOnlyDisabled = {
+  args: {
+    value: [basicOptions[1]],
+    options: basicOptions,
+    readonly: true,
+    disabled: true,
+  },
+};
+
 export const PrivateField = {
   args: {
     private: true,
diff --git a/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.js b/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.js
index 50d3c52..1785310 100644
--- a/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.js
+++ b/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.js
@@ -73,6 +73,14 @@ export class DtMultiSelectButtonGroup extends DtFormBase {
         .invalid ~ .error-container {
           border-top-width: 1px;
         }
+
+        .item-wrapper {
+          display: flex;
+          align-items: center;
+        }
+        .item-wrapper .icon {
+          margin-left: .5rem;
+        }
       `,
     ];
   }
@@ -168,7 +176,7 @@ export class DtMultiSelectButtonGroup extends DtFormBase {
         context=${context}
         .value=${opt.id}
         @click="${this._clickOption}"
-        ?disabled="${this.disabled}"
+        ?disabled="${this.disabled || this.readonly}"
         ?outline="${outline}"
         role="button"
         value="${opt.id}"
@@ -216,6 +224,8 @@ export class DtMultiSelectButtonGroup extends DtFormBase {
   render() {
     return html`
       ${this.labelTemplate()}
+      ${!this.readonly
+          ? html`
       <div
         class="input-group ${this.disabled ? 'disabled' : ''}"
         part="input-group"
@@ -228,8 +238,24 @@ export class DtMultiSelectButtonGroup extends DtFormBase {
           )}
         </div>
         ${this.renderIcons()}
-      </div>
-    `;
+      </div>`
+            :
+            html`<div class="readonly-options">
+            ${this.options
+              .filter(opt => (this.value ?? [])
+              .includes(opt.id))
+              .map(
+                opt => html`
+                  <div class="item-wrapper">
+                    <span>${opt.label}</span>
+                    ${opt.icon
+                      ? html`<span class="icon"
+                          ><img src="${opt.icon}" alt="${this.iconAltText}"
+                        /></span>`
+                      : null}
+                  </div>`)}
+            </div>`
+        }`
   }
 }
 
diff --git a/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.stories.js b/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.stories.js
index e6c1b52..a6fed59 100644
--- a/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.stories.js
+++ b/src/components/form/dt-multi-select-button-group/dt-multi-select-button-group.stories.js
@@ -85,6 +85,7 @@ export default {
       options,
       value = [],
       disabled = false,
+      readonly = false,
       required = false,
       requiredMessage,
       icon = 'https://cdn-icons-png.flaticon.com/512/1077/1077114.png',
@@ -104,6 +105,7 @@ export default {
         .options=${options}
         .value=${value}
         ?disabled=${disabled}
+        ?readonly=${readonly}
         ?required=${required}
         requiredMessage=${ifDefined(requiredMessage)}
         icon=${ifDefined(icon)}
@@ -158,6 +160,23 @@ export const Disabled = {
   },
 };
 
+export const ReadOnly = {
+  args: {
+    value: ['opt1', 'opt2', 'opt7'],
+    options: basicOptions,
+    readonly: true,
+  },
+};
+
+export const ReadOnlyDisabled = {
+  args: {
+    value: ['opt2'],
+    options: basicOptions,
+    readonly: true,
+    disabled: true,
+  },
+};
+
 export const PrivateField = {
   args: {
     private: true,
diff --git a/src/components/form/dt-multi-select/dt-multi-select.js b/src/components/form/dt-multi-select/dt-multi-select.js
index 6e83d1f..a7670e8 100644
--- a/src/components/form/dt-multi-select/dt-multi-select.js
+++ b/src/components/form/dt-multi-select/dt-multi-select.js
@@ -408,6 +408,8 @@ export class DtMultiSelect extends HasOptionsList(DtFormBase) {
         .filter(val => val.charAt(0) !== '-')
         .map(
           val => html`
+          ${!this.readonly
+              ? html`
             <div
               class="selected-option"
               @click="${this._handleItemClick}"
@@ -425,7 +427,11 @@ export class DtMultiSelect extends HasOptionsList(DtFormBase) {
               >
                 x
               </button>
-            </div>
+          </div>`
+            : 
+          html`<div>
+              ${this.options.find(option => option.id === val).label}
+          </div>`}
           `,
         )
     );
@@ -461,10 +467,12 @@ export class DtMultiSelect extends HasOptionsList(DtFormBase) {
   }
 
   render() {
-    const optionListStyles = this.optionListStyles;
+    const {optionListStyles} = this;
     return html`
       ${this.labelTemplate()}
 
+      ${!this.readonly
+          ? html`
       <div
         class="input-group ${this.disabled ? 'disabled' : ''}"
         @click="${this._handleDivClick}"
@@ -501,7 +509,11 @@ export class DtMultiSelect extends HasOptionsList(DtFormBase) {
         </ul>
 
         ${this.renderIcons()}
-      </div>
+      </div>`
+            : 
+          html`<div class="readonly-options">
+              ${this._renderSelectedOptions()}
+          </div>`}
     `;
   }
 }
diff --git a/src/components/form/dt-multi-select/dt-multi-select.stories.js b/src/components/form/dt-multi-select/dt-multi-select.stories.js
index 9e31180..a605e80 100644
--- a/src/components/form/dt-multi-select/dt-multi-select.stories.js
+++ b/src/components/form/dt-multi-select/dt-multi-select.stories.js
@@ -84,6 +84,7 @@ export default {
       placeholder = 'Select Options',
       value = [],
       disabled = false,
+      readonly = false,
       required = false,
       requiredMessage,
       icon = 'https://cdn-icons-png.flaticon.com/512/1077/1077114.png',
@@ -105,6 +106,7 @@ export default {
         .options=${options}
         .value=${value}
         ?disabled=${disabled}
+        ?readonly=${readonly}
         ?required=${required}
         requiredMessage=${ifDefined(requiredMessage)}
         icon=${ifDefined(icon)}
@@ -203,6 +205,23 @@ export const Disabled = {
   },
 };
 
+export const ReadOnly = {
+  args: {
+    value: ['opt1', 'opt2'],
+    options: basicOptions,
+    readonly: true,
+  },
+};
+
+export const ReadOnlyDisabled = {
+  args: {
+    value: ['opt2'],
+    options: basicOptions,
+    readonly: true,
+    disabled: true,
+  },
+};
+
 export const PrivateField = {
   args: {
     private: true,
diff --git a/src/components/form/dt-multi-text-groups/dt-multi-text-groups.js b/src/components/form/dt-multi-text-groups/dt-multi-text-groups.js
index d05be02..f839583 100644
--- a/src/components/form/dt-multi-text-groups/dt-multi-text-groups.js
+++ b/src/components/form/dt-multi-text-groups/dt-multi-text-groups.js
@@ -138,9 +138,9 @@ export class DtMultiTextGroups extends DtMultiText {
       verified: false,
       value: '',
       tempKey: Date.now().toString(),
-      type: group.id,
+      group: group.id,
     };
-    if (this.value[0]?.type) {
+    if (this.value[0]?.group) {
       this.value = [...this.value, newValue];
 
     } else {
@@ -161,6 +161,7 @@ export class DtMultiTextGroups extends DtMultiText {
 
   _removeItem(e) {
     const keyToRemove = e.currentTarget.dataset.key;
+    console.log(e.currentTarget);
     if (keyToRemove) {
       const event = new CustomEvent('change', {
         bubbles: true,
@@ -178,9 +179,9 @@ export class DtMultiTextGroups extends DtMultiText {
         .map(x => {
           const item = { ...x };
           // add `delete` prop to clicked item
-          if (x.meta_id === keyToRemove || x.tempKey === keyToRemove) {
+          if (x.key === keyToRemove || x.tempKey === keyToRemove) {
             item.delete = true;
-            this.activeGroup = item.type;
+            this.activeGroup = item.group;
           }
           return item;
         });
@@ -208,8 +209,8 @@ export class DtMultiTextGroups extends DtMultiText {
 
       // update this item's value in the list
       this.value = this.value.map(x => {
-        if (x.meta_id === key || x.tempKey === key) {
-          this.activeGroup = x.type;
+        if (x.key === key || x.tempKey === key) {
+          this.activeGroup = x.group;
 
           return {
             ...x,
@@ -330,7 +331,7 @@ export class DtMultiTextGroups extends DtMultiText {
     return html`
       <div class="field-container">
         <input
-          data-key="${item.meta_id ?? item.tempKey}"
+          data-key="${item.key ?? item.tempKey}"
           tabindex="1"
           name="${this.name}"
           aria-label="${this.label}"
@@ -345,13 +346,13 @@ export class DtMultiTextGroups extends DtMultiText {
         />
 
         ${when(
-          (this.value[0]?.type) || (!this.groups && itemCount > 1),
+          (this.value[0]?.group) || (!this.groups && itemCount > 1),
           () => html`
             <button
               class="input-addon btn-remove"
               tabindex="1"
               @click=${this._removeItem}
-              data-key="${item.meta_id ?? item.tempKey}"
+              data-key="${item.key ?? item.tempKey}"
               ?disabled=${this.disabled}
             >
               <dt-icon icon="mdi:close"></dt-icon>
@@ -396,10 +397,10 @@ export class DtMultiTextGroups extends DtMultiText {
     for (const [i, item] of (this.value || []).entries()) {
       if (item.delete && !this.isDeleting) {
         this.isDeleting = true;
-        this.activeGroup = item.type;
+        this.activeGroup = item.group;
       }
     }
-    const remainingItemsPerGroup = this.groups.map(group => (this.value || []).filter(item => item.type === group.id && !item.delete).length);
+    const remainingItemsPerGroup = this.groups.map(group => (this.value || []).filter(item => item.group === group.id && !item.delete).length);
     let itemsAbove = 0;
     let itemsBelow = 0;
     for (let i = remainingItemsPerGroup.length-1; i > groupIndex; i-=1) {
@@ -423,14 +424,14 @@ export class DtMultiTextGroups extends DtMultiText {
       let itemCount = 0;
       if (i > groupIndex) {
         // add padding for each item, every item if we are deleting (icon shows at top element)
-        itemCount = (this.value || []).filter(item => item.type === group.id && !item.delete).length;
+        itemCount = (this.value || []).filter(item => item.group === group.id && !item.delete).length;
 
         // if at least 1 item in group, we add for the group title as well, only if it's below our group
         if (itemCount > 0) {
           titleCount += 1;
         }
       } else if (i === groupIndex) {
-        itemCount = (this.value || []).filter(item => item.type === group.id && !item.delete).length-1;
+        itemCount = (this.value || []).filter(item => item.group === group.id && !item.delete).length-1;
         if (this.isDeleting && itemCount === 0){
           if (itemsAbove > 0) {
             itemCount = itemsAbove-1;
@@ -438,7 +439,7 @@ export class DtMultiTextGroups extends DtMultiText {
             titleCount -= 1;
           }
         } else {
-          itemCount = (this.value || []).filter(item => item.type === group.id && !item.delete).length-1;
+          itemCount = (this.value || []).filter(item => item.group === group.id && !item.delete).length-1;
         }
       }
       pad += itemCount;
@@ -469,10 +470,10 @@ export class DtMultiTextGroups extends DtMultiText {
     }
 
     const firstIndex = this.value[0];
-    if (this.groups && (firstIndex && firstIndex.type)) {
+    if (this.groups && (firstIndex && firstIndex.group)) {
       return this.groups.map(group => {
         const groupItems = (this.value ?? []).filter(
-          x => !x.delete && x.type === group.id
+          x => !x.delete && x.group === group.id
         );
 
         if (groupItems.length > 0) {
@@ -485,6 +486,7 @@ export class DtMultiTextGroups extends DtMultiText {
           )}
         `;
         }
+        return null;
       });
     }
 
@@ -531,7 +533,22 @@ export class DtMultiTextGroups extends DtMultiText {
           ? html`<slot name="icon-start" slot="icon-start"></slot>`
           : null}
         ${this.label}
-        <slot name="icon-end" slot="icon-end">
+        ${this.readonly && !this.disabled
+          ? html`
+            <slot name="icon-end" slot="icon-end">
+              <button
+                @click="${this.switchReadOnly}"
+                @keydown="${this._inputKeyDown}"
+                @blur="${this._handleButtonBlur}"
+                class="readonly-btn"
+                id="add-item"
+                type="button"
+                tabindex="1"
+              >
+                <dt-icon icon="mdi:pencil"></dt-icon>
+              </button>
+            </slot>`:
+        html`<slot name="icon-end" slot="icon-end">
           <button
             @click="${this.handleClick}"
             @keydown="${this._inputKeyDown}"
@@ -550,10 +567,39 @@ export class DtMultiTextGroups extends DtMultiText {
             </ul>
           </div>
           ` : ''}
-        </slot>
+        </slot>`}
       </dt-label>
     `;
   }
+
+  render() {
+      return html`
+        ${this.labelTemplate()}
+  
+        ${!this.readonly
+            ? html`
+        <div class="input-group">
+          ${this._renderInputFields()} ${this.renderIcons()}
+        </div>`
+              : 
+            html`
+
+            ${this.value ? repeat(this.groups, group => html`<h3 class="heading">${group.label}</h3>
+
+              <div class="readonly-options">
+                ${repeat(
+                  (this.value || []).filter(item => item.group === group.id),
+                  item => html`<div class="group-item">${item.value}</div>`
+                )}
+              </div>`
+            ) : html`
+            <div class="groups-no-value">
+              No items to show.
+            </div>
+            `}`
+          }
+      `;
+    }
 }
 
 window.customElements.define('dt-multi-text-groups', DtMultiTextGroups);
diff --git a/src/components/form/dt-multi-text-groups/dt-multi-text-groups.stories.js b/src/components/form/dt-multi-text-groups/dt-multi-text-groups.stories.js
index 25147b2..deb0683 100644
--- a/src/components/form/dt-multi-text-groups/dt-multi-text-groups.stories.js
+++ b/src/components/form/dt-multi-text-groups/dt-multi-text-groups.stories.js
@@ -44,6 +44,7 @@ export default {
     value = '',
     placeholder,
     disabled = false,
+    readonly = false,
     required = false,
     requiredMessage,
     icon = 'https://cdn-icons-png.flaticon.com/512/1077/1077114.png',
@@ -66,6 +67,7 @@ export default {
       placeholder=${placeholder}
       type=${type}
       ?disabled=${disabled}
+      ?readonly=${readonly}
       ?required=${required}
       requiredMessage=${requiredMessage}
       icon="${icon}"
@@ -168,6 +170,61 @@ export const Disabled = {
   }
 }
 
+export const ReadOnly = {
+  args: {
+    groups: [
+      { id: 'one', label: 'Group 1' }, 
+      { id: 'two', label: 'Group 2' }
+    ],
+    readonly: true,
+    value: [
+      {
+        value: 'Lorem Ipsum',
+        key: 'comm_channel_1',
+        group: 'one'
+      },
+      {
+        value: 'Lorem Ipsu2',
+        key: 'comm_channel_2',
+        group: 'two'
+      },
+      {
+        value: 'Lorem Ipsum',
+        key: 'comm_channel_3',
+        group: 'two'
+      }
+    ],
+  }
+}
+
+export const ReadOnlyDisabled = {
+  args: {
+    groups: [
+      { id: 'one', label: 'Group 1' }, 
+      { id: 'two', label: 'Group 2' }
+    ],
+    readonly: true,
+    disabled: true,
+    value: [
+      {
+        value: 'Lorem Ipsum',
+        key: 'comm_channel_1',
+        group: 'one'
+      },
+      {
+        value: 'Lorem Ipsum',
+        key: 'comm_channel_2',
+        group: 'two'
+      },
+      {
+        value: 'Lorem Ipsum2',
+        key: 'comm_channel_3',
+        group: 'two'
+      }
+    ],
+  }
+}
+
 export const privateField = {
   args: {
     groups: [
diff --git a/src/components/form/dt-multi-text-groups/dt-multi-text-groups.test.js b/src/components/form/dt-multi-text-groups/dt-multi-text-groups.test.js
index c92225e..8dfdfb9 100644
--- a/src/components/form/dt-multi-text-groups/dt-multi-text-groups.test.js
+++ b/src/components/form/dt-multi-text-groups/dt-multi-text-groups.test.js
@@ -9,7 +9,7 @@ describe('DtMultiTextGroups', () => {
     const el = await fixture(
       html`<dt-multi-text-groups 
         placeholder="Custom Placeholder"
-        .value=${[{ tempKey: 'new-key', type: 'default', value: '' }]}
+        .value=${[{ tempKey: 'new-key', group: 'default', value: '' }]}
         .groups=${[{ id: 'default', label: 'Default Group' }]}
       ></dt-multi-text-groups>`
     );
@@ -22,13 +22,13 @@ describe('DtMultiTextGroups', () => {
     const el = await fixture(
       html`<dt-multi-text-groups
         value="${JSON.stringify([{
-          meta_id: 'cc01',
+          key: 'cc01',
           value: 'Value 1',
-          type: 'one',
+          group: 'one',
         }, {
-          meta_id: 'cc02',
+          key: 'cc02',
           value: 'Value 2',
-          type: 'two',
+          group: 'two',
         }])}"
         groups="${JSON.stringify([{
           id: 'one',
@@ -56,11 +56,11 @@ describe('DtMultiTextGroups', () => {
         value="${JSON.stringify([{
           meta_id: 'cc01',
           value: 'Value 1',
-          type: 'one',
+          group: 'one',
         }, {
           meta_id: 'cc02',
           value: 'Value 2',
-          type: 'two',
+          group: 'two',
         }])}"
         groups="${JSON.stringify([{
           id: 'one',
@@ -89,13 +89,13 @@ describe('DtMultiTextGroups', () => {
     const el = await fixture(
       html`<dt-multi-text-groups
         value="${JSON.stringify([{
-          meta_id: 'cc01',
+          key: 'cc01',
           value: 'Value 1',
-          type: 'one',
+          group: 'one',
         }, {
-          meta_id: 'cc02',
+          key: 'cc02',
           value: 'Value 2',
-          type: 'two',
+          group: 'two',
         }])}"
         groups="${JSON.stringify([{
           id: 'one',
@@ -118,16 +118,16 @@ describe('DtMultiTextGroups', () => {
     expect(el.value.length).to.equal(2);
     
     expect(el.value).to.deep.include({
-      meta_id: 'cc01',
+      key: 'cc01',
       value: 'Value 1',
-      type: 'one',
+      group: 'one',
       delete: true,
     });
     
     expect(el.value).to.deep.include({
-      meta_id: 'cc02',
+      key: 'cc02',
       value: 'Value 2',
-      type: 'two',
+      group: 'two',
     });
 
     // not rendered in DOM
@@ -139,7 +139,7 @@ describe('DtMultiTextGroups', () => {
       html`<dt-multi-text-groups
         value="${JSON.stringify([{ 
           tempKey: 'new-key',
-          type: 'default', 
+          group: 'default', 
           value: '' 
         }])}"
         groups="${JSON.stringify([{
@@ -174,13 +174,13 @@ describe('DtMultiTextGroups', () => {
     const el = await fixture(
       html`<dt-multi-text-groups
         value="${JSON.stringify([{
-          meta_id: 'cc01',
+          key: 'cc01',
           value: 'Value 1',
-          type: 'one',
+          group: 'one',
         }, {
-          meta_id: 'cc02',
+          key: 'cc02',
           value: 'Value 2',
-          type: 'two',
+          group: 'two',
         }])}"
         groups="${JSON.stringify([{
           id: 'one',
diff --git a/src/components/form/dt-multi-text/dt-multi-text.js b/src/components/form/dt-multi-text/dt-multi-text.js
index 62d0158..ab5e593 100644
--- a/src/components/form/dt-multi-text/dt-multi-text.js
+++ b/src/components/form/dt-multi-text/dt-multi-text.js
@@ -437,7 +437,22 @@ export class DtMultiText extends DtText {
           ? html`<slot name="icon-start" slot="icon-start"></slot>`
           : null}
         ${this.label}
-        <slot name="icon-end" slot="icon-end">
+        ${this.readonly && !this.disabled
+          ? html`
+            <slot name="icon-end" slot="icon-end">
+              <button
+                @click="${this.switchReadOnly}"
+                @keydown="${this._inputKeyDown}"
+                @blur="${this._handleButtonBlur}"
+                class="readonly-btn"
+                id="add-item"
+                type="button"
+                tabindex="1"
+              >
+                <dt-icon icon="mdi:pencil"></dt-icon>
+              </button>
+            </slot>`:
+        html`<slot name="icon-end" slot="icon-end">
           <button
             @click="${this._addItem}"
             @keydown="${this._inputKeyDown}"
@@ -450,7 +465,7 @@ export class DtMultiText extends DtText {
           >
             <dt-icon icon="mdi:plus-thick"></dt-icon>
           </button>
-        </slot>
+        </slot>`}
       </dt-label>
     `;
   }
@@ -458,9 +473,34 @@ export class DtMultiText extends DtText {
   render() {
     return html`
       ${this.labelTemplate()}
+
+      ${!this.readonly
+          ? html`
       <div class="input-group">
         ${this._renderInputFields()} ${this.renderIcons()}
-      </div>
+      </div>`
+            : 
+          html`<div class="readonly-options">
+              ${repeat(
+                this.value || [],
+                opt => 
+                {
+                  if (this.type === 'email') {
+                    return html`<div>
+                      <a href="mailto:${opt.value}">${opt.value}</a>
+                      <dt-icon icon="mdi:email-arrow-right"></dt-icon>
+                    </div>`;
+                  }
+                  if (this.type === 'tel') {
+                    return html`<div>
+                      <a href="tel:${opt.value.replace(/[^\d+]/g, '')}">${opt.value}</a>
+                      <dt-icon icon="mdi:phone-outgoing"></dt-icon>
+                    </div>`;
+                  }
+                  return html`<div>${opt.value}</div>`;
+                }
+              )}
+          </div>`}
     `;
   }
 }
diff --git a/src/components/form/dt-multi-text/dt-multi-text.stories.js b/src/components/form/dt-multi-text/dt-multi-text.stories.js
index 43672d8..717d2aa 100644
--- a/src/components/form/dt-multi-text/dt-multi-text.stories.js
+++ b/src/components/form/dt-multi-text/dt-multi-text.stories.js
@@ -65,6 +65,7 @@ export default {
       placeholder,
       type,
       disabled,
+      readonly,
       required,
       requiredMessage,
       icon,
@@ -86,6 +87,7 @@ export default {
         placeholder="${ifDefined(placeholder)}"
         type="${ifDefined(type)}"
         ?disabled=${disabled}
+        ?readonly=${readonly}
         ?required=${required}
         requiredMessage="${ifDefined(requiredMessage)}"
         icon="${ifDefined(icon)}"
@@ -157,6 +159,41 @@ export const Disabled = {
   },
 };
 
+export const ReadOnly = {
+  args: {
+    readonly: true,
+    value: [
+      {
+        value: 'email@test.com',
+        key: 'comm_channel_1',
+      },
+      {
+        value: 'example@example.com',
+        key: 'comm_channel_2',
+      }
+    ],
+    type: 'email',
+  },
+};
+
+export const ReadOnlyDisabled = {
+  args: {
+    readonly: true,
+    disabled: true,
+    value: [
+      {
+        value: '+5-987-654-3210',
+        key: 'comm_channel_1',
+      },
+      {
+        value: '+1 123 456 7890',
+        key: 'comm_channel_2',
+      }
+    ],
+    type: 'tel',
+  },
+};
+
 export const PrivateField = {
   args: {
     private: true,
diff --git a/src/components/form/dt-number/dt-number.js b/src/components/form/dt-number/dt-number.js
index c18fede..37d68cd 100644
--- a/src/components/form/dt-number/dt-number.js
+++ b/src/components/form/dt-number/dt-number.js
@@ -167,6 +167,8 @@ export class DtNumberField extends DtFormBase {
     return html`
       ${this.labelTemplate()}
 
+      ${!this.readonly
+          ? html`
       <div class="input-group">
         <input
           id="${this.id}"
@@ -187,7 +189,11 @@ export class DtNumberField extends DtFormBase {
         />
 
         ${this.renderIcons()}
-      </div>
+      </div>`
+            : 
+          html`<div class="readonly-options">
+              ${this.value}
+          </div>`}
     `;
   }
 }
diff --git a/src/components/form/dt-number/dt-number.stories.js b/src/components/form/dt-number/dt-number.stories.js
index 4944ea3..6617592 100644
--- a/src/components/form/dt-number/dt-number.stories.js
+++ b/src/components/form/dt-number/dt-number.stories.js
@@ -47,6 +47,7 @@ export default {
       min,
       max,
       disabled = false,
+      readonly = false,
       required = false,
       requiredMessage,
       icon = 'https://cdn-icons-png.flaticon.com/512/1077/1077114.png',
@@ -67,6 +68,7 @@ export default {
         min=${ifDefined(min)}
         max=${ifDefined(max)}
         ?disabled=${disabled}
+        ?readonly=${readonly}
         ?required=${required}
         requiredMessage=${ifDefined(requiredMessage)}
         icon="${ifDefined(icon)}"
@@ -112,6 +114,21 @@ export const Disabled = {
   },
 };
 
+export const ReadOnly = {
+  args: {
+    readonly: true,
+    value: 42,
+  },
+};
+
+export const ReadOnlyDisabled = {
+  args: {
+    readonly: true,
+    disabled: true,
+    value: 42,
+  },
+};
+
 export const PrivateField = {
   args: {
     private: true,
diff --git a/src/components/form/dt-single-select/dt-single-select.js b/src/components/form/dt-single-select/dt-single-select.js
index 4d3ad74..193b81b 100644
--- a/src/components/form/dt-single-select/dt-single-select.js
+++ b/src/components/form/dt-single-select/dt-single-select.js
@@ -224,6 +224,8 @@ export class DtSingleSelect extends DtFormBase {
     return html`
       ${this.labelTemplate()}
 
+      ${!this.readonly
+          ? html`
       <div
         class="input-group ${this.disabled ? 'disabled' : ''}"
         dir="${this.RTL ? 'rtl' : 'ltr'}"
@@ -233,7 +235,7 @@ export class DtSingleSelect extends DtFormBase {
           aria-label="${this.name}"
           @change="${this._change}"
           class="${classMap(this.classes)}"
-          style="${this.color ? 'background-color: ' + this.color + ';' : ''}"
+          style="${this.color ? `background-color: ${  this.color  };` : ''}"
           ?disabled="${this.disabled}"
           ?required=${this.required}
           part="select"
@@ -251,7 +253,11 @@ export class DtSingleSelect extends DtFormBase {
         </select>
 
         ${this.renderIcons()}
-      </div>
+      </div>`
+            : 
+          html`<div class="readonly-options">
+              ${(this.options || []).find(i => i.id === this.value)?.label || ''}
+          </div>`}
     `;
   }
 }
diff --git a/src/components/form/dt-single-select/dt-single-select.stories.js b/src/components/form/dt-single-select/dt-single-select.stories.js
index 268e78c..95ae587 100644
--- a/src/components/form/dt-single-select/dt-single-select.stories.js
+++ b/src/components/form/dt-single-select/dt-single-select.stories.js
@@ -85,6 +85,7 @@ export default {
       placeholder = 'Select Option',
       value,
       disabled = false,
+      readonly = false,
       required = false,
       requiredMessage,
       icon = 'https://cdn-icons-png.flaticon.com/512/1077/1077114.png',
@@ -105,6 +106,7 @@ export default {
         .options=${options}
         value=${ifDefined(value)}
         ?disabled=${disabled}
+        ?readonly=${readonly}
         ?required=${required}
         requiredMessage=${ifDefined(requiredMessage)}
         icon=${ifDefined(icon)}
@@ -178,6 +180,23 @@ export const Disabled = {
   },
 };
 
+export const ReadOnly = {
+  args: {
+    value: 'opt2',
+    options: basicOptions,
+    readonly: true,
+  },
+};
+
+export const ReadOnlyDisabled = {
+  args: {
+    value: 'opt2',
+    options: basicOptions,
+    readonly: true,
+    disabled: true,
+  },
+};
+
 export const PrivateField = {
   args: {
     private: true,
diff --git a/src/components/form/dt-tags/dt-tags.js b/src/components/form/dt-tags/dt-tags.js
index a6b0699..07f00e2 100644
--- a/src/components/form/dt-tags/dt-tags.js
+++ b/src/components/form/dt-tags/dt-tags.js
@@ -263,6 +263,8 @@ export class DtTags extends DtMultiSelect {
           );
         }
         return html`
+          ${!this.readonly
+            ? html`
           <div
             class="selected-option"
             @click="${this._handleItemClick}"
@@ -278,16 +280,22 @@ export class DtTags extends DtMultiSelect {
             >
               x
             </button>
-          </div>
+          </div>`
+            : 
+          html`<div>
+              ${label}
+          </div>`}
         `;
       });
   }
 
   render() {
-    const optionListStyles = this.optionListStyles;
+    const {optionListStyles} = this;
     return html`
       ${this.labelTemplate()}
 
+      ${!this.readonly
+          ? html`
       <div
         class="input-group ${this.disabled ? 'disabled' : ''} ${this.allowAdd
           ? 'allowAdd'
@@ -322,7 +330,11 @@ export class DtTags extends DtMultiSelect {
           ${this._renderOptions()}
         </ul>
         ${this.renderIcons()}
-      </div>
+      </div>`
+            : 
+          html`<div class="readonly-options">
+              ${this._renderSelectedOptions()}
+          </div>`}
     `;
   }
 }
diff --git a/src/components/form/dt-tags/dt-tags.stories.js b/src/components/form/dt-tags/dt-tags.stories.js
index 2477b3d..f8cf75e 100644
--- a/src/components/form/dt-tags/dt-tags.stories.js
+++ b/src/components/form/dt-tags/dt-tags.stories.js
@@ -113,6 +113,7 @@ export default {
       placeholder,
       value,
       disabled,
+      readonly,
       required,
       requiredMessage,
       icon,
@@ -137,6 +138,7 @@ export default {
         .options="${options}"
         .value="${value}"
         ?disabled="${disabled}"
+        ?readonly="${readonly}"
         ?required="${required}"
         requiredMessage="${requiredMessage}"
         icon="${icon}"
@@ -254,6 +256,23 @@ export const Disabled = {
   },
 };
 
+export const ReadOnly = {
+  args: {
+    value: ['qui est esse', 'opt8'],
+    options: basicOptions,
+    readonly: true,
+  },
+};
+
+export const ReadOnlyDisabled = {
+  args: {
+    value: ['qui est esse', 'opt8'],
+    options: basicOptions,
+    readonly: true,
+    disabled: true,
+  },
+};
+
 export const PrivateField = {
   args: {
     private: true,
diff --git a/src/components/form/dt-text/dt-text.js b/src/components/form/dt-text/dt-text.js
index 5f0be74..d267f3e 100644
--- a/src/components/form/dt-text/dt-text.js
+++ b/src/components/form/dt-text/dt-text.js
@@ -159,6 +159,8 @@ export class DtText extends DtFormBase {
     return html`
       ${this.labelTemplate()}
 
+      ${!this.readonly
+          ? html`
       <div class="input-group">
         <input
           id="${this.id}"
@@ -178,7 +180,11 @@ export class DtText extends DtFormBase {
         />
 
         ${this.renderIcons()}
-      </div>
+      </div>`
+          : 
+        html`<div class="readonly-options">
+            ${this.value || ''}
+        </div>`}
     `;
   }
 }
diff --git a/src/components/form/dt-text/dt-text.stories.js b/src/components/form/dt-text/dt-text.stories.js
index d087e73..a744b24 100644
--- a/src/components/form/dt-text/dt-text.stories.js
+++ b/src/components/form/dt-text/dt-text.stories.js
@@ -47,6 +47,7 @@ export default {
       label = 'Field Name',
       value,
       disabled = false,
+      readonly = false,
       required = false,
       requiredMessage,
       icon = 'https://cdn-icons-png.flaticon.com/512/1077/1077114.png',
@@ -67,6 +68,7 @@ export default {
         value=${ifDefined(value)}
         type=${ifDefined(type)}
         ?disabled=${disabled}
+        ?readonly=${readonly}
         ?required=${required}
         requiredMessage=${ifDefined(requiredMessage)}
         icon="${ifDefined(icon)}"
@@ -112,6 +114,21 @@ export const Disabled = {
   },
 };
 
+export const ReadOnly = {
+  args: {
+    readonly: true,
+    value: 'Lorem Ipsum',
+  },
+};
+
+export const ReadOnlyDisabled = {
+  args: {
+    readonly: true,
+    disabled: true,
+    value: 'Lorem Ipsum',
+  },
+};
+
 export const PrivateField = {
   args: {
     private: true,
diff --git a/src/components/form/dt-textarea/dt-textarea.js b/src/components/form/dt-textarea/dt-textarea.js
index 06e8b52..cd589ad 100644
--- a/src/components/form/dt-textarea/dt-textarea.js
+++ b/src/components/form/dt-textarea/dt-textarea.js
@@ -144,6 +144,8 @@ export class DtTextArea extends DtFormBase {
     return html`
       ${this.labelTemplate()}
 
+      ${!this.readonly
+          ? html`
       <div class="input-group">
         <textarea
           id="${this.id}"
@@ -159,7 +161,11 @@ export class DtTextArea extends DtFormBase {
         ></textarea>
 
         ${this.renderIcons()}
-      </div>
+      </div>`
+          : 
+        html`<div class="readonly-options">
+            ${this.value || ''}
+        </div>`}
     `;
   }
 }
diff --git a/src/components/form/dt-textarea/dt-textarea.stories.js b/src/components/form/dt-textarea/dt-textarea.stories.js
index 8fc807a..a8e2394 100644
--- a/src/components/form/dt-textarea/dt-textarea.stories.js
+++ b/src/components/form/dt-textarea/dt-textarea.stories.js
@@ -43,6 +43,7 @@ export default {
       label = 'Field Name',
       value,
       disabled = false,
+      readonly = false,
       required = false,
       requiredMessage,
       icon = 'https://cdn-icons-png.flaticon.com/512/1077/1077114.png',
@@ -61,6 +62,7 @@ export default {
         label=${ifDefined(label)}
         value=${ifDefined(value)}
         ?disabled=${disabled}
+        ?readonly=${readonly}
         ?required=${required}
         requiredMessage=${ifDefined(requiredMessage)}
         icon="${ifDefined(icon)}"
@@ -106,6 +108,21 @@ export const Disabled = {
   },
 };
 
+export const ReadOnly = {
+  args: {
+    readonly: true,
+    value: 'Lorem Ipsum',
+  },
+};
+
+export const ReadOnlyDisabled = {
+  args: {
+    readonly: true,
+    disabled: true,
+    value: 'Lorem Ipsum',
+  },
+};
+
 export const PrivateField = {
   args: {
     private: true,
diff --git a/src/components/form/dt-toggle/dt-toggle.js b/src/components/form/dt-toggle/dt-toggle.js
index de909f2..8eff6e6 100644
--- a/src/components/form/dt-toggle/dt-toggle.js
+++ b/src/components/form/dt-toggle/dt-toggle.js
@@ -229,7 +229,7 @@ export class DtToggle extends DtFormBase {
               class="toggle-input"
               .checked=${this.checked || 0}
               @click=${this.onChange}
-              ?disabled=${this.disabled}
+              ?disabled=${this.disabled || this.readonly}
             />
             <span class="toggle-display" @click=${this.onClickToggle}>
               ${this.icons ? html` ${check} ${cross} ` : html``}
diff --git a/src/components/form/dt-toggle/dt-toggle.stories.js b/src/components/form/dt-toggle/dt-toggle.stories.js
index 82d5a89..551275a 100644
--- a/src/components/form/dt-toggle/dt-toggle.stories.js
+++ b/src/components/form/dt-toggle/dt-toggle.stories.js
@@ -43,6 +43,7 @@ export default {
       name = 'field-name',
       label = 'Field Name',
       disabled = false,
+      readonly = false,
       checked = false,
       icons = false,
       required = false,
@@ -64,6 +65,7 @@ export default {
         ?checked=${checked}
         ?icons=${icons}
         ?disabled=${disabled}
+        ?readonly=${readonly}
         ?required=${required}
         requiredMessage=${ifDefined(requiredMessage)}
         icon="${ifDefined(icon)}"
@@ -115,6 +117,21 @@ export const Disabled = {
   },
 };
 
+export const ReadOnly = {
+  args: {
+    checked: false,
+    readonly: true,
+  },
+};
+
+export const ReadOnlyDisabled = {
+  args: {
+    checked: false,
+    readonly: true,
+    disabled: true,
+  },
+};
+
 export const DisabledOn = {
   args: {
     checked: true,
diff --git a/src/components/form/dt-users-connection/dt-users-connection.js b/src/components/form/dt-users-connection/dt-users-connection.js
index 5e962c9..628e303 100644
--- a/src/components/form/dt-users-connection/dt-users-connection.js
+++ b/src/components/form/dt-users-connection/dt-users-connection.js
@@ -238,6 +238,8 @@ export class DtUsersConnection extends DtTags {
       .filter(i => !i.delete)
       .map(
         opt => html`
+        ${!this.readonly
+            ? html`
           <div class="selected-option">
             <a
               href="${opt.link}"
@@ -253,7 +255,13 @@ export class DtUsersConnection extends DtTags {
             >
               x
             </button>
-          </div>
+          </div>`
+            : 
+          html`<div>
+            ${opt.link
+                ? html`<a href="${opt.link}">${opt.label}</a>`
+                : html`<div>${opt.label}</div>`}
+          </div>`}
         `,
       );
   }
diff --git a/src/components/form/dt-users-connection/dt-users-connection.stories.js b/src/components/form/dt-users-connection/dt-users-connection.stories.js
index afb42c6..b789fed 100644
--- a/src/components/form/dt-users-connection/dt-users-connection.stories.js
+++ b/src/components/form/dt-users-connection/dt-users-connection.stories.js
@@ -109,6 +109,7 @@ export default {
       value,
       open,
       disabled,
+      readonly,
       required,
       requiredMessage,
       icon,
@@ -135,6 +136,7 @@ export default {
         .value="${value}"
         .open="${open}"
         ?disabled=${disabled}
+        ?readonly=${readonly}
         ?required=${required}
         requiredMessage="${ifDefined(requiredMessage)}"
         icon="${ifDefined(icon)}"
@@ -229,6 +231,32 @@ export const Disabled = {
     disabled: true,
   },
 };
+
+export const ReadOnly = {
+  args: {
+    value: [basicOptions[1], {
+      id: 2,
+      label: 'test',
+      link: '/#opt2',
+    }],
+    options: basicOptions,
+    readonly: true,
+  },
+};
+
+export const ReadOnlyDisabled = {
+  args: {
+    value: [basicOptions[1], {
+      id: 2,
+      label: 'test',
+      link: '/#opt2',
+    }],
+    options: basicOptions,
+    readonly: true,
+    disabled: true,
+  },
+};
+
 export const PrivateField = {
   args: {
     private: true,
diff --git a/src/components/kitchen-sink.stories.js b/src/components/kitchen-sink.stories.js
index 5571a74..c09e92c 100644
--- a/src/components/kitchen-sink.stories.js
+++ b/src/components/kitchen-sink.stories.js
@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { argTypes } from '../stories-theme.js';
+import sampleImage from '../../assets/dt-caret.png';
 
 import './layout/dt-tile/dt-tile.js';
 import './form/dt-label/dt-label.js';
@@ -22,10 +23,15 @@ import './form/dt-connection/dt-connection.js';
 import './form/dt-users-connection/dt-users-connection.js';
 import './form/dt-file-upload/dt-file-upload.js';
 
+// Sample image used for Storybook previews (local asset).
+const SAMPLE_IMAGE_URL = sampleImage;
+const SAMPLE_THUMBNAIL_URL = sampleImage;
+
 const options = [
   {
     id: 'opt1',
     label: 'Option 1',
+    icon: 'https://cdn-icons-png.flaticon.com/512/1077/1077114.png',
   },
   {
     id: 'opt2',
@@ -111,42 +117,76 @@ export default {
       <dt-text
         id='textField'
         name='textField'
-        value=''
+        value='Lorem Ipsum'
         label="Text Field"
         ?disabled=${args.disabled}
+        ?readonly=${args.readonly}
         error="${ifDefined(args.error)}"
       ></dt-text>
 
       <dt-textarea
         id='textareaField'
         name='textareaField'
-        value=''
+        value='Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, at condimentum nisl.'
         label="Textarea Field"
         ?disabled=${args.disabled}
+        ?readonly=${args.readonly}
         error="${ifDefined(args.error)}"
       ></dt-textarea>
 
       <dt-number
         id='numberField'
         name='numberField'
+        value=42
         label="Number Field"
         ?disabled=${args.disabled}
+        ?readonly=${args.readonly}
         error="${ifDefined(args.error)}"
       ></dt-number>
 
       <dt-multi-text
         id="multiTextField"
         name="multiTextField"
+        value="${JSON.stringify([
+          {
+            value: 'email@test.com',
+            key: 'comm_channel_1',
+          },
+          {
+            value: 'example@example.com',
+            key: 'comm_channel_2',
+          },
+        ])}"
+        type="email"
         label="MultiText Field"
         ?disabled=${args.disabled}
+        ?readonly=${args.readonly}
         error="${ifDefined(args.error)}"
       ></dt-multi-text>
 
       <dt-multi-text-groups
         id="multiTextGroupsField"
         name="multiTextGroupsField"
+        value="${JSON.stringify([
+          {
+            value: 'Lorem Ipsum',
+            key: 'comm_channel_1',
+            group: 'one'
+          },
+          {
+            value: 'Lorem Ipsum',
+            key: 'comm_channel_2',
+            group: 'two'
+          },
+          {
+            value: 'Lorem Ipsum2',
+            key: 'comm_channel_3',
+            group: 'two'
+          }
+        ])}"
         label="MultiText Groups Field"
         ?disabled=${args.disabled}
+        ?readonly=${args.readonly}
         error="${ifDefined(args.error)}"
         .groups=${groups}
       ></dt-multi-text-groups>
@@ -154,16 +194,20 @@ export default {
       <dt-date
         id="dateField"
         name="dateField"
+        value="2020-01-01"
         label="Date Field"
         ?disabled=${args.disabled}
+        ?readonly=${args.readonly}
         error="${ifDefined(args.error)}"
       ></dt-date>
 
       <dt-datetime
         id="dateTimeField"
         name="dateTimeField"
+        value="2023-07-21T17:00"
         label="Date Time Field"
         ?disabled=${args.disabled}
+        ?readonly=${args.readonly}
         error="${ifDefined(args.error)}"
       ></dt-datetime>
 
@@ -172,6 +216,7 @@ export default {
         name="toggleField"
         label="Boolean Field"
         ?disabled=${args.disabled}
+        ?readonly=${args.readonly}
         error="${ifDefined(args.error)}"
       ></dt-toggle>
 
@@ -181,6 +226,7 @@ export default {
         value="opt1"
         options="${JSON.stringify(options)}"
         ?disabled=${args.disabled}
+        ?readonly=${args.readonly}
         error="${ifDefined(args.error)}"
       ></dt-single-select>
 
@@ -190,6 +236,7 @@ export default {
         value="${JSON.stringify(options.slice(0, 2).map(o => o.id))}"
         options="${JSON.stringify(options)}"
         ?disabled=${args.disabled}
+        ?readonly=${args.readonly}
         error="${ifDefined(args.error)}"
       ></dt-multi-select>
 
@@ -199,6 +246,7 @@ export default {
         value="${JSON.stringify(options.slice(0, 2).map(o => o.id))}"
         options="${JSON.stringify(options)}"
         ?disabled=${args.disabled}
+        ?readonly=${args.readonly}
         error="${ifDefined(args.error)}"
       ></dt-multi-select-button-group>
 
@@ -207,35 +255,81 @@ export default {
         value="${JSON.stringify(['personal'])}"
         options="${JSON.stringify(tags)}"
         ?disabled=${args.disabled}
+        ?readonly=${args.readonly}
         error="${ifDefined(args.error)}"
       ></dt-tags>
 
       <dt-connection
         label="Connection Field"
         options="${JSON.stringify(posts)}"
+        value="${JSON.stringify([
+          {
+            id: 2,
+            label: 'User 2',
+            link: '/#opt2',
+            user: true,
+            status: {
+              key: 'assigned',
+              label: 'Waiting to be accepted',
+              color: '#FF9800'
+            }
+          },
+          {
+            id: 2,
+            label: 'test'
+          }
+        ])}"
         ?disabled=${args.disabled}
+        ?readonly=${args.readonly}
         error="${ifDefined(args.error)}"
       ></dt-connection>
 
       <dt-location
         label="Location Field"
         options="${JSON.stringify(posts)}"
+        value="${JSON.stringify([{
+          id: '1',
+          label: 'John Doe',
+        }])}"
         filters="${JSON.stringify(locationFilters)}"
         ?disabled=${args.disabled}
+        ?readonly=${args.readonly}
         error="${ifDefined(args.error)}"
       ></dt-location>
 
       <dt-location-map
         label="Location Meta Field"
         options="${JSON.stringify(posts)}"
+        value="${JSON.stringify([{
+          grid_meta_id: '65',
+          post_id: '43',
+          post_type: 'contacts',
+          postmeta_id_location_grid: '1671',
+          grid_id: '100366112',
+          lng: '-73.9866',
+          lat: '40.7306',
+          level: 'place',
+          source: 'user',
+          label: 'New York, New York, United States',
+        }])}"
         ?disabled=${args.disabled}
+        ?readonly=${args.readonly}
         error="${ifDefined(args.error)}"
       ></dt-location-map>
 
       <dt-file-upload
         label="File Upload Field"
         name="fileUploadField"
+        value=${JSON.stringify([{
+          key: 'site_id/prefix_randomstring1.jpg',
+          name: 'photo1.jpg',
+          type: 'image/jpeg',
+          size: 123456,
+          thumbnail_url: SAMPLE_THUMBNAIL_URL,
+          url: SAMPLE_IMAGE_URL,
+        }])}
         ?disabled=${args.disabled}
+        ?readonly=${args.readonly}
         error="${ifDefined(args.error)}"
       ></dt-file-upload>
 
@@ -245,6 +339,7 @@ export default {
          label="Button"
          context="primary"
          ?disabled=${args.disabled}
+         ?readonly=${args.readonly}
          error="${ifDefined(args.error)}"
        >Click Me</dt-button>
     </dt-tile>
@@ -259,6 +354,12 @@ export const Disabled = {
   },
 };
 
+export const ReadOnly = {
+  args: {
+    readonly: true,
+  },
+};
+
 export const Error = {
   args: {
     error: 'Custom error message',
diff --git a/src/services/componentService.js b/src/services/componentService.js
index 5330a86..9e5b97b 100644
--- a/src/services/componentService.js
+++ b/src/services/componentService.js
@@ -302,9 +302,9 @@ export default class ComponentService {
                 new CustomEvent('dt:post:update', {
                   detail: {
                     response: apiResponse,
-                    field: field,
+                    field,
                     value: apiValue,
-                    component: component,
+                    component,
                   },
                 }),
               );
@@ -355,9 +355,9 @@ export default class ComponentService {
             new CustomEvent('dt:post:update', {
               detail: {
                 response: apiResponse,
-                field: field,
+                field,
                 value: apiValue,
-                component: component,
+                component,
               },
             }),
           );
@@ -855,10 +855,10 @@ export default class ComponentService {
     }
 
     // Handle object arrays
-    const getObjectKey = obj => {
+    const getObjectKey = obj => 
       // Use stringified object as key to ensure uniqueness
-      return JSON.stringify(obj);
-    };
+       JSON.stringify(obj)
+    ;
 
     const value1Map = new Map(value1.map(item => [getObjectKey(item), item]));
     const value2Map = new Map(value2.map(item => [getObjectKey(item), item]));
diff --git a/src/services/googleGeocodeService.js b/src/services/googleGeocodeService.js
index 2458eed..eb7b13a 100644
--- a/src/services/googleGeocodeService.js
+++ b/src/services/googleGeocodeService.js
@@ -9,6 +9,7 @@ export default class GoogleGeocodeService {
       document.body.appendChild(script);
     }
   }
+
   /**
    * Search places via Mapbox API
    * @param query
@@ -71,8 +72,8 @@ export default class GoogleGeocodeService {
   async _getPlaceSuggestionsRest(query, language = 'en') {
     // Legacy failed; fallback to Places v1 REST
     const url =
-      'https://places.googleapis.com/v1/places:autocomplete?key=' +
-      encodeURIComponent(this.token);
+      `https://places.googleapis.com/v1/places:autocomplete?key=${ 
+      encodeURIComponent(this.token)}`;
     const body = {
       input: query,
       // language,