diff --git a/assets/src/dashboard/parts/connected/settings/Menu.js b/assets/src/dashboard/parts/connected/settings/Menu.js
index c688113d..90ebf8b3 100644
--- a/assets/src/dashboard/parts/connected/settings/Menu.js
+++ b/assets/src/dashboard/parts/connected/settings/Menu.js
@@ -28,6 +28,10 @@ const menuItems = [
label: strings.advanced_settings_menu_item,
value: 'compression',
children: [
+ {
+ label: strings.settings_watermark_menu_item,
+ value: 'watermark'
+ },
{
label: strings.settings_compression_menu_item,
value: 'compression'
diff --git a/assets/src/dashboard/parts/connected/settings/Watermark.js b/assets/src/dashboard/parts/connected/settings/Watermark.js
new file mode 100644
index 00000000..6b27a2dd
--- /dev/null
+++ b/assets/src/dashboard/parts/connected/settings/Watermark.js
@@ -0,0 +1,79 @@
+/**
+ * WordPress dependencies.
+ */
+import {
+ BaseControl,
+ Button
+} from '@wordpress/components';
+
+import { Icon, external } from '@wordpress/icons';
+
+const Watermark = () => {
+ const { options_strings } = optimoleDashboardApp.strings;
+
+ const containerStyle = {
+ border: '2px solid #DCDCDC',
+ borderRadius: '8px',
+ padding: '16px'
+ };
+
+ return (
+ <>
+
+
+ {options_strings.watermark_media_title}
+
+
+ {options_strings.watermark_media_desc}
+
+
+
+
+
+
+
+
{options_strings.watermark_info_1}
+
+
+
+
{options_strings.watermark_info_2}
+
+
+
+
{options_strings.watermark_info_3}
+
+
+
+
+
+
+
+
+ {options_strings.watermark_footer}
+
+
+ >
+ );
+};
+
+export default Watermark;
diff --git a/assets/src/dashboard/parts/connected/settings/index.js b/assets/src/dashboard/parts/connected/settings/index.js
index 4bda66ec..14b80250 100644
--- a/assets/src/dashboard/parts/connected/settings/index.js
+++ b/assets/src/dashboard/parts/connected/settings/index.js
@@ -10,6 +10,7 @@ import Lazyload from './Lazyload';
import Exclusions from './Exclusions';
import OffloadMedia from './OffloadMedia';
import CloudLibrary from './CloudLibrary';
+import Watermark from './Watermark';
import { saveSettings } from '../../../utils/api';
import { toggleDamSidebarLink } from '../../../utils/helpers';
@@ -129,16 +130,23 @@ const Settings = ({
/>
) }
+ { 'watermark' === tab && (
+
+ ) }
+
-
+ { 'watermark' !== tab && (
+
+ ) }
{ ( 'disabled' === settings.autoquality && 'compression' === tab ) && (