diff --git a/packages/guide/tile/location-tile/guide-location-tile.web.stories.page.mdx b/packages/guide/tile/location-tile/guide-location-tile.web.stories.page.mdx
new file mode 100644
index 0000000000..56d274c9ac
--- /dev/null
+++ b/packages/guide/tile/location-tile/guide-location-tile.web.stories.page.mdx
@@ -0,0 +1,3 @@
+# `How to make a location tile`
+
+* [See Location Tile Documentation](/story/ui-components-tile-location-tile-deprecated-atom-remplacement--page)
diff --git a/packages/guide/tile/location-tile/guide-location-tile.web.stories.ts b/packages/guide/tile/location-tile/guide-location-tile.web.stories.ts
new file mode 100644
index 0000000000..84b8a4d082
--- /dev/null
+++ b/packages/guide/tile/location-tile/guide-location-tile.web.stories.ts
@@ -0,0 +1,139 @@
+import { html } from 'lit-html';
+import { defineCustomElements } from '@ovhcloud/ods-stencil-content-addon/loader';
+import { defineCustomElements as tileCustomElements } from '@ovhcloud/ods-stencil-tile/loader';
+import { OdsThemeColorIntentList } from '@ovhcloud/ods-theming';
+
+defineCustomElements();
+tileCustomElements();
+
+/* story parameters  */
+export const storyParams = {
+  color: {
+    category: 'General',
+    options: OdsThemeColorIntentList,
+    defaultValue: 'default',
+    control: { type: 'select' },
+  },
+  variant: {
+    category: 'General',
+    options: ['horizontal', 'vertical'],
+    defaultValue: 'vertical',
+    control: { type: 'select' },
+  },
+  city: {
+    category: 'Content',
+    defaultValue: 'City'
+  },
+  country: {
+    category: 'Content',
+    defaultValue: 'Country'
+  },
+  info: {
+    category: 'Content',
+    defaultValue: 'Info'
+  },
+  iso: {
+    category: 'Content',
+    defaultValue: 'fr'
+  },
+};
+
+const Template = (args: any) => html`
+  <style>
+  .location__content-vertical {
+    display: grid;
+    gap: 1em 0;
+    grid-auto-flow: row;
+    grid-auto-rows: 1fr;
+    grid-template-areas:
+            "location__flag-wrapper"
+            "location__text-wrapper";
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+    height: 100%;
+    text-align: center;
+    width: 100%;
+  }
+
+  .location__content-horizontal {
+      display: grid;
+      gap: 0 1em;    
+      grid-auto-flow: row;
+      grid-auto-rows: 1fr;
+      grid-template-areas:
+              "location__flag-wrapper location__text-wrapper";
+      grid-template-columns: auto 1fr;
+      grid-template-rows: 1fr;
+      text-align: left;
+      height: 100%;
+      width: 100%;
+  }
+
+  .location__flag-wrapper {
+      display: block;
+      font-size: 0;
+      grid-area: location__flag-wrapper;
+      justify-self: center;
+      align-self: center;
+      min-width: var(--ods-size-02);
+      max-width: 4rem;
+      width: var(--ods-size-11);
+  }
+
+  .location__text-wrapper {
+      display: grid;
+      gap: 0;
+      grid-area: location__text-wrapper;
+      grid-auto-flow: row;
+      grid-template-areas:
+              "country"
+              "city"
+              "info";
+      grid-template-columns: 1fr;
+      grid-template-rows: auto;
+      place-content: center;
+      
+  }
+
+  .location__text-country, .location__text-city {
+      font-family: var(--ods-typography-heading-300-font-family);
+      font-size: var(--ods-typography-heading-300-font-size);
+      font-style: var(--ods-typography-heading-300-font-style);
+      font-weight: var(--ods-typography-heading-300-font-weight);
+      letter-spacing: var(--ods-typography-heading-300-letter-spacing);
+      line-height: var(--ods-typography-heading-300-line-height);
+  }
+
+  .location__text-info {
+      font-family: var(--ods-typography-heading-200-font-family);
+      font-size: var(--ods-typography-heading-200-font-size);
+      font-style: var(--ods-typography-heading-200-font-style);
+      font-weight: var(--ods-typography-heading-200-font-weight);
+      letter-spacing: var(--ods-typography-heading-200-letter-spacing);
+      line-height: var(--ods-typography-heading-200-line-height);
+  }
+  .location__text-country {
+      color: var(--ods-color-primary-800);
+  }
+
+  .location__text-city, .location__text-info {
+      color: var(--ods-color-text-500);
+  }
+
+  </style>
+
+  <osds-tile color="${args.color}">
+    <div class="location__content-${args.variant}">
+        <div class="location__flag-wrapper">
+            <osds-flag iso="${args.iso}"></osds-flag>
+        </div>
+        <div class="location__text-wrapper">
+            <span class="location__text-country">${args.country}</span>
+            <span class="location__text-city">${args.city}</span>
+            <span class="location__text-info">${args.info}</span>
+        </div>
+    </div>
+  </osds-tile>
+`;
+
+export const LocationTileStory = Template.bind({});
diff --git a/packages/tools/storybook/stories/components/guides/tile/location-tile/location-tile.web.stories.page.mdx b/packages/tools/storybook/stories/components/guides/tile/location-tile/location-tile.web.stories.page.mdx
new file mode 100644
index 0000000000..4572b683f6
--- /dev/null
+++ b/packages/tools/storybook/stories/components/guides/tile/location-tile/location-tile.web.stories.page.mdx
@@ -0,0 +1,6 @@
+import { Canvas, Description, Meta, DocsContainer } from '@storybook/addon-docs';
+import Page from '@ovhcloud/ods-guide/tile/location-tile/guide-location-tile.web.stories.page.mdx';
+
+<Meta title="Code/Stencil/Guides/Tile/location" />
+
+<Page />
diff --git a/packages/tools/storybook/stories/components/guides/tile/location-tile/location-tile.web.stories.ts b/packages/tools/storybook/stories/components/guides/tile/location-tile/location-tile.web.stories.ts
new file mode 100644
index 0000000000..6560e427e7
--- /dev/null
+++ b/packages/tools/storybook/stories/components/guides/tile/location-tile/location-tile.web.stories.ts
@@ -0,0 +1,19 @@
+import { storyParams, LocationTileStory } from '@ovhcloud/ods-guide/tile/location-tile/guide-location-tile.web.stories';
+import { extractArgTypes, extractStoryParams } from '../../../../../core/componentHTMLUtils';
+import page from './location-tile.web.stories.page.mdx';
+
+export default {
+  title: 'Code/Stencil/Guides/Tiles/Location',
+  parameters: {
+    docs: { page },
+  },
+};
+
+LocationTileStory.args = {
+  ...LocationTileStory.args,
+  ...extractStoryParams(storyParams),
+};
+LocationTileStory.argTypes = extractArgTypes(storyParams);
+
+export const Web = LocationTileStory;
+
diff --git a/packages/tools/storybook/stories/components/location-tile/location-tile.replacement.css b/packages/tools/storybook/stories/components/location-tile/location-tile.replacement.css
new file mode 100644
index 0000000000..398d9eadec
--- /dev/null
+++ b/packages/tools/storybook/stories/components/location-tile/location-tile.replacement.css
@@ -0,0 +1,79 @@
+.location__content-vertical {
+    display: grid;
+    gap: 1em 0;
+    grid-auto-flow: row;
+    grid-auto-rows: 1fr;
+    grid-template-areas:
+            "location__flag-wrapper"
+            "location__text-wrapper";
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+    height: 100%;
+    text-align: center;
+    width: 100%;
+}
+
+.location__content-horizontal {
+    display: grid;
+    gap: 0 1em;    
+    grid-auto-flow: row;
+    grid-auto-rows: 1fr;
+    grid-template-areas:
+            "location__flag-wrapper location__text-wrapper";
+    grid-template-columns: auto 1fr;
+    grid-template-rows: 1fr;
+    text-align: left;
+    height: 100%;
+    width: 100%;
+}
+
+.location__flag-wrapper {
+    display: block;
+    font-size: 0;
+    grid-area: location__flag-wrapper;
+    justify-self: center;
+    align-self: center;
+    min-width: var(--ods-size-02);
+    max-width: 4rem;
+    width: var(--ods-size-11);
+}
+
+.location__text-wrapper {
+    display: grid;
+    gap: 0;
+    grid-area: location__text-wrapper;
+    grid-auto-flow: row;
+    grid-template-areas:
+            "country"
+            "city"
+            "info";
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    place-content: center;
+    
+}
+
+.location__text-country, .location__text-city {
+    font-family: var(--ods-typography-heading-300-font-family);
+    font-size: var(--ods-typography-heading-300-font-size);
+    font-style: var(--ods-typography-heading-300-font-style);
+    font-weight: var(--ods-typography-heading-300-font-weight);
+    letter-spacing: var(--ods-typography-heading-300-letter-spacing);
+    line-height: var(--ods-typography-heading-300-line-height);
+}
+
+.location__text-info {
+    font-family: var(--ods-typography-heading-200-font-family);
+    font-size: var(--ods-typography-heading-200-font-size);
+    font-style: var(--ods-typography-heading-200-font-style);
+    font-weight: var(--ods-typography-heading-200-font-weight);
+    letter-spacing: var(--ods-typography-heading-200-letter-spacing);
+    line-height: var(--ods-typography-heading-200-line-height);
+}
+.location__text-country {
+    color: var(--ods-color-primary-800);
+}
+
+.location__text-city, .location__text-info {
+    color: var(--ods-color-text-500);
+}
diff --git a/packages/tools/storybook/stories/components/location-tile/location-tile.replacement.stories.mdx b/packages/tools/storybook/stories/components/location-tile/location-tile.replacement.stories.mdx
new file mode 100644
index 0000000000..39eae26733
--- /dev/null
+++ b/packages/tools/storybook/stories/components/location-tile/location-tile.replacement.stories.mdx
@@ -0,0 +1,181 @@
+import { Meta } from '@storybook/addon-docs';
+import Notes from '../notes.mdx';
+import './location-tile.replacement.css';
+
+<Meta title="UI Components/Tile/Location Tile [deprecated]/Remplacement" />
+
+# Location tile - Deprecated
+----
+
+## How replace it
+
+### Vertical
+
+<osds-tile color="default">
+    <div class="location__content-vertical">
+        <div class="location__flag-wrapper">
+            <osds-flag iso="fr"></osds-flag>
+        </div>
+        <div class="location__text-wrapper">
+            <span class="location__text-country">Country</span>
+            <span class="location__text-city">City</span>
+            <span class="location__text-info">Info</span>
+        </div>
+    </div>
+</osds-tile>
+
+----
+
+<span style={{ display: "grid", "grid-template-columns": "1fr 1fr" }}>
+  <span>Html
+
+```html 
+<osds-tile color="default">
+    <div class="location__content-vertical">
+        <div class="location__flag-wrapper">
+            <osds-flag iso="fr"></osds-flag>
+        </div>
+        <div class="location__text-wrapper">
+            <span class="location__text-country">Country</span>
+            <span class="location__text-city">City</span>
+            <span class="location__text-info">Info</span>
+        </div>
+    </div>
+</osds-tile>
+```
+
+  </span>
+  <span>
+    CSS
+
+```css 
+.location__content-vertical {
+    display: grid;
+    gap: 1em 0;
+    grid-auto-flow: row;
+    grid-auto-rows: 1fr;
+    grid-template-areas:
+            "location__flag-wrapper"
+            "location__text-wrapper";
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+    height: 100%;
+    text-align: center;
+    width: 100%;
+}
+
+.location__flag-wrapper {
+    display: block;
+    font-size: 0;
+    grid-area: location__flag-wrapper;
+    justify-self: center;
+    align-self: center;
+    min-width: var(--ods-size-02);
+    max-width: 4rem;
+    width: var(--ods-size-11);
+}
+
+.location__text-wrapper {
+    display: grid;
+    gap: 0;
+    grid-area: location__text-wrapper;
+    grid-auto-flow: row;
+    grid-template-areas:
+            "country"
+            "city"
+            "info";
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    place-content: center;
+    
+}
+
+.location__text-country, .location__text-city {
+    font-family: var(--ods-typography-heading-300-font-family);
+    font-size: var(--ods-typography-heading-300-font-size);
+    font-style: var(--ods-typography-heading-300-font-style);
+    font-weight: var(--ods-typography-heading-300-font-weight);
+    letter-spacing: var(--ods-typography-heading-300-letter-spacing);
+    line-height: var(--ods-typography-heading-300-line-height);
+}
+
+.location__text-info {
+    font-family: var(--ods-typography-heading-200-font-family);
+    font-size: var(--ods-typography-heading-200-font-size);
+    font-style: var(--ods-typography-heading-200-font-style);
+    font-weight: var(--ods-typography-heading-200-font-weight);
+    letter-spacing: var(--ods-typography-heading-200-letter-spacing);
+    line-height: var(--ods-typography-heading-200-line-height);
+}
+.location__text-country {
+    color: var(--ods-color-primary-800);
+}
+
+.location__text-city, .location__text-info {
+    color: var(--ods-color-text-500);
+}
+
+```
+
+  </span>
+</span>
+
+--- 
+
+### Horizontal
+
+<osds-tile color="default">
+    <div class="location__content-horizontal">
+        <div class="location__flag-wrapper">
+            <osds-flag iso="fr"></osds-flag>
+        </div>
+        <div class="location__text-wrapper">
+            <span class="location__text-country">Country</span>
+            <span class="location__text-city">City</span>
+            <span class="location__text-info">Info</span>
+        </div>
+    </div>
+</osds-tile>
+
+--- 
+
+<span style={{ display: "grid", "grid-template-columns": "1fr 1fr" }}>
+  <span>Html
+
+```html 
+<osds-tile color="default">
+    <div class="location__content-horizontal">
+        <div class="location__flag-wrapper">
+            <osds-flag iso="fr"></osds-flag>
+        </div>
+        <div class="location__text-wrapper">
+            <span class="location__text-country">Country</span>
+            <span class="location__text-city">City</span>
+            <span class="location__text-info">Info</span>
+        </div>
+    </div>
+</osds-tile>
+```
+
+  </span>
+  <span>
+    CSS
+
+```css 
+.location__content-horizontal {
+    display: grid;
+    gap: 0 1em;    
+    grid-auto-flow: row;
+    grid-auto-rows: 1fr;
+    grid-template-areas:
+            "location__flag-wrapper location__text-wrapper";
+    grid-template-columns: auto 1fr;
+    grid-template-rows: 1fr;
+    text-align: left;
+    height: 100%;
+    width: 100%;
+}
+```
+
+  </span>
+</span>
\ No newline at end of file
diff --git a/packages/tools/storybook/stories/components/location-tile/location-tile.specifications.stories.mdx b/packages/tools/storybook/stories/components/location-tile/location-tile.specifications.stories.mdx
index bf0a72cb5a..c6d9fd9a51 100644
--- a/packages/tools/storybook/stories/components/location-tile/location-tile.specifications.stories.mdx
+++ b/packages/tools/storybook/stories/components/location-tile/location-tile.specifications.stories.mdx
@@ -2,9 +2,12 @@ import { Meta } from '@storybook/addon-docs';
 import SpecificationsLocationTile from '@ovhcloud/ods-specifications/components/location-tile/specifications-location-tile.mdx';
 import Notes from '../notes.mdx';
 
-<Meta title="UI Components/Tile/Location Tile [atom]/Specifications" />
+<Meta title="UI Components/Tile/Location Tile [deprecated]/Specifications" />
 
-# Location tile - Technical Specification
+# Location tile Deprecated- Technical Specification
 ----
+<h2 style={{ color: 'red' }}>
+⚠ Warning this component is deprecated and will be remove soon
+</h2>
 
 <SpecificationsLocationTile />
diff --git a/packages/tools/storybook/stories/components/location-tile/location-tile.web-component.stories.page.mdx b/packages/tools/storybook/stories/components/location-tile/location-tile.web-component.stories.page.mdx
index 7d3435a07a..dcacf18b24 100644
--- a/packages/tools/storybook/stories/components/location-tile/location-tile.web-component.stories.page.mdx
+++ b/packages/tools/storybook/stories/components/location-tile/location-tile.web-component.stories.page.mdx
@@ -3,7 +3,11 @@ import { Canvas, Description, Meta, DocsContainer } from '@storybook/addon-docs'
 import Usage from '@ovhcloud/ods-stencil-location-tile/src/docs/osds-location-tile/usage.mdx';
 import APITable from '@ovhcloud/ods-stencil-location-tile/dist/docs/components/osds-location-tile/readme.md';
 
-<Meta title="UI Components/Tile/️Location Tile [atom]/Web Component" />
+<Meta title="UI Components/Tile/️Location Tile [deprecated]/Web Component" />
+
+<h2 style={{ color: 'red' }}>
+⚠ Warning this component is deprecated and will be remove soon
+</h2>
 
 # `<osds-location-tile>`
 
diff --git a/packages/tools/storybook/stories/components/location-tile/location-tile.web-components.stories.ts b/packages/tools/storybook/stories/components/location-tile/location-tile.web-components.stories.ts
index 00fe3e17d3..c942f7c746 100644
--- a/packages/tools/storybook/stories/components/location-tile/location-tile.web-components.stories.ts
+++ b/packages/tools/storybook/stories/components/location-tile/location-tile.web-components.stories.ts
@@ -84,7 +84,7 @@ const storyParams = {
 };
 
 export default {
-  title: 'UI Components/Tile/Location Tile [atom]/Web Component',
+  title: 'UI Components/Tile/Location Tile [deprecated]/Web Component',
   parameters: {
     notes: {
       API: iframe('/stencil-location-tile/modules/index.html'),
@@ -104,6 +104,9 @@ const TemplateDefault = (args: any) => {
     delete args.flex;
   }
   return html`
+    <h2 style='color:red'>
+      ⚠ Warning this component is deprecated and will be remove soon
+    </h2>
     <div class='tile-container'>
       <osds-location-tile ...=${getTagAttributes(args)}>
         <span slot='country'>${unsafeHTML(args.country || 'Country')}</span>