diff --git a/src/components/snippets/TsSupport.tsx b/src/components/snippets/TsSupport.tsx
index 2f16f68..bb90a58 100644
--- a/src/components/snippets/TsSupport.tsx
+++ b/src/components/snippets/TsSupport.tsx
@@ -24,8 +24,10 @@ export {};`;
 			<h3>{__('TypeScript support', 'mr-feature-flags')}</h3>
 			<p>
 				Create a file named{' '}
-				<span className="mr-feature-flags-slug">flags.d.ts</span> at the
-				root of the plugin / theme and add below declaration.
+				<span className="mr-feature-flags-filename">flags.d.ts</span> at
+				the entrypoint of TS code of plugin / theme ( usually{' '}
+				<span className="mr-feature-flags-slug">src</span> directory )
+				and add below declaration.
 			</p>
 			<Clipboard
 				text={tsSnippet}
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 450f83c..83c132b 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -22,9 +22,15 @@
 	margin-top: 20px;
 }
 
-.mr-feature-flags-slug {
+.mr-feature-flags-filename {
 	background-color: #007cba;
 	border-radius: 6px;
 	padding: 3px;
 	color: #fff;
 }
+
+.mr-feature-flags-slug {
+	background-color: #d7d8d9;
+	border-radius: 6px;
+	padding: 2px;
+}