diff --git a/public/index.html b/public/index.html
index dd6b2b8..6c65024 100644
--- a/public/index.html
+++ b/public/index.html
@@ -211,11 +211,14 @@ <h2 class="widgetTitle">Get started with a Widget</h2>
 						<option value="pt-br">PT-BR</option>
 					</select>
 					<h5 class="widgetSubTitle" style="margin-bottom: 20px;">Customization Options (Optional): </h2>
+						<input type="text" class="form-control" onblur="changeAttribute('treeMap',this.value,'forestname')"
+							placeholder="Forest Name"><br />
 						<select class="form-select" onchange="changeAttribute('treeMap',this.value,'theme')"
 							aria-label="Default select example">
-							<option value="light" selected>Select Theme</option>
+							<option value="light">Select Theme</option>
 							<option value="light">Light</option>
 							<option value="dark">Dark</option>
+							<option value="forest" selected>Forest</option>
 						</select>
 						<div class="form-check form-switch">
 							<input class="form-check-input"
@@ -253,6 +256,15 @@ <h5 class="widgetSubTitle" style="margin-bottom: 20px;">Customization Options (O
 						<option value="pt-br">PT-BR</option>
 					</select>
 					<h5 class="widgetSubTitle" style="margin-bottom: 20px;">Customization Options (Optional): </h2>
+						<input type="text" class="form-control" onblur="changeAttribute('treeProfile',this.value,'forestname')"
+							placeholder="Forest Name"><br />
+						<select class="form-select" onchange="changeAttribute('treeProfile',this.value,'theme')"
+							aria-label="Default select example">
+							<option value="light">Select Theme</option>
+							<option value="light">Light</option>
+							<option value="dark">Dark</option>
+							<option value="forest" selected>Forest</option>
+						</select>
 						<div class="form-check form-switch">
 							<input class="form-check-input"
 								onclick="changeAttribute('treeProfile',this.checked,'community')" type="checkbox"
@@ -260,13 +272,6 @@ <h5 class="widgetSubTitle" style="margin-bottom: 20px;">Customization Options (O
 							<label class="form-check-label" for="treeMap-community-switch">Show community</label>
 						</div>
 
-						<select class="form-select" onchange="changeAttribute('treeProfile',this.value,'theme')"
-							aria-label="Default select example">
-							<option value="light" selected>Select Theme</option>
-							<option value="light">Light</option>
-							<option value="dark">Dark</option>
-						</select>
-
 						<div class="input-group">
 							<label for="primaryColor">Primary Color:</label>
 							<input class="colorPicker" type="color" id="primaryColor" name="primaryColor"
@@ -344,7 +349,7 @@ <h5 class="widgetSubTitle" style="margin-bottom: 20px;">Customization Options (O
 		<div class="col-lg-12 col-xl-8 widgetContainer">
 			<div id="treeMapWidget">
 				<div id="treeMapComponent">
-					<tree-map user='sagar-aryal' tenantkey="ten_I9TW3ncG" id="treeMap">
+					<tree-map user='sagar-aryal' tenantkey="ten_I9TW3ncG" theme="forest" id="treeMap">
 					</tree-map>
 				</div>
 				<div id="treeMapCode" class="code-container"></div>
@@ -355,7 +360,7 @@ <h5 class="widgetSubTitle" style="margin-bottom: 20px;">Customization Options (O
 			</div>
 			<div id="treeProfileWidget">
 				<div id="treeProfileComponent">
-					<tree-profile user='sagar-aryal' tenantkey="ten_I9TW3ncG" id="treeProfile">
+					<tree-profile user='sagar-aryal' tenantkey="ten_I9TW3ncG" theme="forest" id="treeProfile">
 					</tree-profile>
 				</div>
 				<div id="treeProfileCode" class="code-container"></div>
diff --git a/src/TreeMap/App.svelte b/src/TreeMap/App.svelte
index adc44eb..bcff005 100644
--- a/src/TreeMap/App.svelte
+++ b/src/TreeMap/App.svelte
@@ -17,6 +17,7 @@
   import ptBRLocale from "./../../public/data/locales/pt-BR.json";
   import { onMount } from "svelte";
   import getTenantConfig from "../../utils/tenantsConfig";
+  import TcBackground from '../common/themes/leniKlum/TcBackground.svelte';
   let w;
   // Props that can be passed
   export let user;
@@ -27,6 +28,8 @@
   export let locale = "en";
   export let refresh = "none";
   export let tenantkey = "ten_I9TW3ncG";
+  export let forestname;
+
   $: primarycolor = primarycolor;
   $: counterbgcolor = circlebgcolor
     ? circlebgcolor
@@ -84,7 +87,7 @@
   // https://svelte.school/tutorials/introduction-to-actions
   const createMap = async (domNode) => {
     fetchTiles(
-      theme === "light" ? mapStyleLight : mapStyleDark,
+      theme === "light" || "forest" ? mapStyleLight : mapStyleDark,
       "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer"
     ).then((style) => {
       if (style) {
@@ -202,10 +205,16 @@
 <div
   class={`treemap ${w > 640 ? "landscape" : "portrait"}`}
   bind:clientWidth={w}
-  style="--widgetWidth:{w};--primary-color: {primarycolor};--counter-background-color: {counterbgcolor}; --background-color: {theme ===
-  'light'
-    ? '#fff'
-    : '#2f3336'}; --link-color: {theme === 'light' ? '#6daff0' : '#fff'}"
+  style="--widgetWidth:{w};--primary-color: {primarycolor};
+        --counter-background-color: {theme === 'forest'
+          ? 'transparent'
+          : counterbgcolor}; 
+        --background-color: {theme === 'light'
+          ? '#fff'
+          : theme === 'dark'
+          ? '#2f3336'
+          : '#fff'};
+        --link-color: {theme === 'light' || "forest" ? '#6daff0' : '#fff'}"
 >
   {#await promise}
     <UserProfileLoader />
@@ -213,31 +222,46 @@
     <div class={`treeCounterContainer ${w > 640 ? "w40" : "w100"}`}>
       <div class="mainContainer">
         <div class="treeCounterComponent">
-          <div class="treeCounter">
+          {#if theme === "forest"}
+            <div class={"customBackground"}>
+              <TcBackground />
+            </div>
+          {/if}
+        <div class="treeCounter">
+          <div class="textContainer">
+            <p class={`treecount ${theme === "dark" ? "planted" : ""}`}>
+              {community === "true"
+                ? localizedAbbreviatedNumber(
+                    locale,
+                    data.score.personal + data.score.received,
+                    1
+                  )
+                : localizedAbbreviatedNumber(locale, data.score.personal, 1)}
+            </p>
+          </div>
+        {#if forestname}
             <div class="textContainer">
-              <p class={`treecount ${theme === "dark" ? "planted" : ""}`}>
-                {community === "true"
-                  ? localizedAbbreviatedNumber(
-                      locale,
-                      data.score.personal + data.score.received,
-                      1
-                    )
-                  : localizedAbbreviatedNumber(locale, data.score.personal, 1)}
+              <p class={`treecountLabel ${theme === "dark" ? "planted" : ""}`}>
+                {language[locale].trees}.
               </p>
               <p class={`treecountLabel ${theme === "dark" ? "planted" : ""}`}>
-                {language[locale].treesPlanted}
+                {language[locale].the} {forestname} {language[locale].forestGrows}
               </p>
             </div>
-            {#if data.score.target != 0}
-              <div class="textContainer">
-                <p class="treecount">
-                  {localizedAbbreviatedNumber(locale, data.score.target, 1)}
-                </p>
-                <p class="treecountLabel">{language[locale].target}</p>
-              </div>
-            {/if}
-          </div>
-
+        {:else}
+            <div class="textContainer">
+              <p class={`treecountLabel ${theme === "dark" ? "planted" : ""}`}>
+                    {language[locale].treesPlanted}
+                  </p>
+                {#if data.score.target != 0}
+                    <p class="treecount">
+                      {localizedAbbreviatedNumber(locale, data.score.target, 1)}
+                    </p>
+                    <p class="treecountLabel">{language[locale].target}</p>
+                {/if}
+            </div>
+        {/if}
+        </div>
           <svg
             style={`width:${size * 2}px; height:${
               size * 2
@@ -473,6 +497,12 @@
     padding-right: 10px;
     padding-left: 10px;
   }
+
+  .customBackground {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
   .treeCounterComponent {
     height: 295px;
     width: 295px;
@@ -493,6 +523,7 @@
     justify-content: center;
     align-items: center;
     text-align: center;
+    z-index: 1;
   }
   .treecount {
     font-size: 48px;
@@ -508,6 +539,8 @@
     text-align: center;
     color: white;
     margin: 0px;
+    max-width: 220px;
+    word-wrap: break-word;
   }
   .planted {
     color: var(--primary-color);
diff --git a/src/TreeProfile/App.svelte b/src/TreeProfile/App.svelte
index 44c7098..db5fe90 100644
--- a/src/TreeProfile/App.svelte
+++ b/src/TreeProfile/App.svelte
@@ -13,7 +13,7 @@
   import ptBRLocale from "./../../public/data/locales/pt-BR.json";
   import { onMount } from "svelte";
   import getTenantConfig from "../../utils/tenantsConfig";
-
+  import TcBackground from '../common/themes/leniKlum/TcBackground.svelte'
   // Props that can be passed
   export let user;
   export let primarycolor = "#68b030";
@@ -23,6 +23,8 @@
   export let locale = "en";
   export let refresh = "none";
   export let tenantkey = "ten_I9TW3ncG";
+  export let forestname;
+
   $: primarycolor = primarycolor;
   $: counterbgcolor = circlebgcolor
     ? circlebgcolor
@@ -67,20 +69,29 @@
 </script>
 
 <div
-  class="treecounter"
+  class="treeProfile"
   style="--primary-color: {primarycolor};
-    --counter-background-color: {counterbgcolor};
+    --counter-background-color: {theme === 'forest'
+    ? 'transparent'
+    : counterbgcolor};
     --background-color: {theme ===
   'light'
     ? '#fff'
-    : '#2f3336'};
-    --link-color: {theme === 'light' ? '#6daff0' : '#fff'}"
+    : theme === "dark" ?
+    '#2f3336' :
+    '#fff'};
+    --link-color: {theme === 'light'|| "forest" ? '#6daff0' : '#fff'}"
 >
   {#await promise}
     <UserProfileLoader />
   {:then data}
     <div class="treeCounterContainer">
       <div class="treeCounterComponent">
+        {#if theme === "forest"}
+          <div class={"customBackground"}>
+            <TcBackground />
+          </div>
+        {/if}
         <div class="treeCounter">
           <div class="textContainer">
             <p class={`treecount ${theme === "dark" ? "planted" : ""}`}>
@@ -92,24 +103,30 @@
                   )
                 : localizedAbbreviatedNumber(locale, data.score.personal, 1)}
             </p>
-            <p class={`treecountLabel ${theme === "dark" ? "planted" : ""}`}>
-              {language[locale].treesPlanted}
-            </p>
           </div>
-          {#if data.score.target != 0}
+            {#if forestname}
             <div class="textContainer">
-              <p class="treecount">
-                {localizedAbbreviatedNumber(
-                  locale,
-                  Number(data.score.target),
-                  1
-                )}
+              <p class={`treecountLabel ${theme === "dark" ? "planted" : ""}`}>
+                {language[locale].trees}.
+              </p>
+              <p class={`treecountLabel ${theme === "dark" ? "planted" : ""}`}>
+                {language[locale].the} {forestname} {language[locale].forestGrows}
               </p>
-              <p class="treecountLabel">{language[locale].target}</p>
             </div>
-          {/if}
+        {:else}
+            <div class="textContainer">
+              <p class={`treecountLabel ${theme === "dark" ? "planted" : ""}`}>
+                    {language[locale].treesPlanted}
+                  </p>
+                {#if data.score.target != 0}
+                    <p class="treecount">
+                      {localizedAbbreviatedNumber(locale, data.score.target, 1)}
+                    </p>
+                    <p class="treecountLabel">{language[locale].target}</p>
+                {/if}
+            </div>
+        {/if}
         </div>
-
         <svg
           style={`width:${size * 2}px; height:${size * 2}px;position:absolute;`}
         >
@@ -250,7 +267,7 @@
     all: initial;
   }
 
-  .treecounter {
+  .treeProfile {
     width: 100%;
     max-width: 420px;
     border-radius: 10px;
@@ -304,6 +321,12 @@
     justify-content: center;
     align-items: center;
     text-align: center;
+    z-index: 1;
+  }
+  .customBackground {
+    width: 100%;
+    height: 100%;
+    position: absolute;
   }
   .treecount {
     font-size: 48px;
@@ -320,6 +343,8 @@
     color: white;
     margin: 0px;
     margin-top: 6px;
+    max-width: 195px;
+    word-wrap: break-word;
   }
   .primaryButton {
     color: white;
diff --git a/src/TreeTenantCounter/App.svelte b/src/TreeTenantCounter/App.svelte
index 176066b..6f2ae5d 100644
--- a/src/TreeTenantCounter/App.svelte
+++ b/src/TreeTenantCounter/App.svelte
@@ -75,40 +75,37 @@
             <TcBackground />
           </div>
         {/if}
-        {#if forestname}
         <div class="treeCounter">
           <div class="textContainer">
             <p class={`treecount ${theme === "dark" ? "planted" : ""}`}>
               {localizedAbbreviatedNumber(locale, Number(data.total), 1)}
             </p>
-            <p class={`treecountLabel ${theme === "dark" ? "planted" : ""}`}>
-              {language[locale].trees}.
-            </p>
-            <p class={`treecountLabel ${theme === "dark" ? "planted" : ""}`}>
-              {language[locale].the} {forestname} {language[locale].forestGrows}
-            </p>
           </div>
-        </div>
-        {:else}
-        <div class="treeCounter">
-          <div class="textContainer">
-            <p class={`treecount ${theme === "dark" ? "planted" : ""}`}>
-              {localizedAbbreviatedNumber(locale, Number(data.total), 1)}
-            </p>
-            <p class={`treecountLabel ${theme === "dark" ? "planted" : ""}`}>
-              {language[locale].treesPlanted}
-            </p>
-          </div>
-          {#if goal && goal != "" && goal != 0}
+          {#if forestname}
             <div class="textContainer">
-              <p class="treecount">
-                {localizedAbbreviatedNumber(locale, Number(goal), 1)}
+              <p class={`treecountLabel ${theme === "dark" ? "planted" : ""}`}>
+                {language[locale].trees}.
+              </p>
+              <p class={`treecountLabel ${theme === "dark" ? "planted" : ""}`}>
+                {language[locale].the} {forestname} {language[locale].forestGrows}
               </p>
-              <p class="treecountLabel">{language[locale].target}</p>
+            </div>
+          {:else}
+            <div class="textContainer">
+              <p class={`treecountLabel ${theme === "dark" ? "planted" : ""}`}>
+                {language[locale].treesPlanted}
+              </p>
+              {#if goal && goal != "" && goal != 0}
+                <div class="textContainer">
+                  <p class="treecount">
+                    {localizedAbbreviatedNumber(locale, Number(goal), 1)}
+                  </p>
+                  <p class="treecountLabel">{language[locale].target}</p>
+                </div>
+              {/if}
             </div>
           {/if}
         </div>
-        {/if}
         {#if goal && goal != "" && goal != 0}
         <svg
           style={`width:${size * 2}px; height:${size * 2}px;position:absolute;`}
@@ -231,6 +228,7 @@
     margin: 0px;
     margin-top: 6px;
     max-width: 220px;
+    word-wrap: break-word;
   }
 
   @media screen and (min-width: 640px) {