diff --git a/custom_cards/custom_card_imswel_medias/README.md b/custom_cards/custom_card_imswel_medias/README.md
new file mode 100644
index 000000000..6e137338b
--- /dev/null
+++ b/custom_cards/custom_card_imswel_medias/README.md
@@ -0,0 +1,81 @@
+---
+title: Custom Card Media
+hide:
+ - toc
+---
+
+
+
+# Custom Card "Media"
+
+These are some `custom-card` for your plex, radarr and sonarr media libraries.
+
+
+
+
+
+## Credits
+
+- Author: imswel - 2023
+- Version: 1.0.0
+
+## Changelog
+
+
+1.0.0
+Initial release
+
+
+## Requirements
+
+This card needs the following to function correctly:
+| Component | Required |
+| ----------------------------------------------------------------------------------------- | ---------------------------------- |
+|[Plex Recently Added](https://github.com/NemesisRE/sensor.plex_recently_added) | Yes for **`Media Library Card`** |
+|[Radarr Upcoming Media](https://github.com/custom-components/sensor.radarr_upcoming_media) | Yes for **`Media Upcoming Card`** |
+|[Sonarr Upcoming Media](https://github.com/custom-components/sensor.sonarr_upcoming_media) | Yes for **`Media Upcoming Card`** |
+
+## Usage
+
+**Media Library Card** for [Plex Recently Added](https://github.com/NemesisRE/sensor.plex_recently_added) :
+
+
+| Variable | Default | Required | Notes |
+| ----------------------------- | ------- | -------- | ----------------------------------------------------------------------- |
+| ulm_custom_card_imswel_medias_index | 1 | Yes | The index of the item in your **Plex library** to show. |
+
+```yaml
+- type: custom:button-card
+ template: "custom_card_imswel_medias_library"
+ entity: sensor.plex_recently_added
+ variables:
+ ulm_custom_card_imswel_medias_index: 1
+```
+
+
+
+**Media Upcoming Card** for [Radarr Upcoming Media](https://github.com/custom-components/sensor.radarr_upcoming_media) & [Sonarr Upcoming Media](https://github.com/custom-components/sensor.sonarr_upcoming_media) :
+
+
+
+| Variable | Default | Required | Notes |
+| ----------------------------- | ------- | -------- | -------------------------------------------------------------------------------------------------------- |
+| ulm_custom_card_imswel_medias_index | 1 | Yes | The index of the item in your **Radarr/Sonarr library** to show. |
+| ulm_custom_card_imswel_medias_platform| radarr | Yes | The platform to choose depending on the selected entity.
Can be: **`radarr`** or **`sonarr`**.
|
+
+```yaml
+- type: custom:button-card
+ template: "custom_card_imswel_medias_upcoming"
+ entity: sensor.sonarr_upcoming_media
+ variables:
+ ulm_custom_card_imswel_medias_index: 1
+ ulm_custom_card_imswel_medias_platform: "sonarr"
+```
+
+## Template code
+
+??? note "Template Code"
+
+ ```yaml title="custom_card_imswel_medias.yaml"
+ --8<-- "custom_cards/custom_card_imswel_medias/custom_card_imswel_medias.yaml"
+ ```
diff --git a/custom_cards/custom_card_imswel_medias/custom_card_imswel_medias.yaml b/custom_cards/custom_card_imswel_medias/custom_card_imswel_medias.yaml
new file mode 100644
index 000000000..18ef50eca
--- /dev/null
+++ b/custom_cards/custom_card_imswel_medias/custom_card_imswel_medias.yaml
@@ -0,0 +1,223 @@
+---
+custom_card_imswel_medias:
+ show_icon: false
+ show_label: true
+ show_name: true
+ show_state: false
+ styles:
+ label:
+ - z-index: 2
+ - color: "white"
+ - font-weight: "bold"
+ - font-size: "12px"
+ - filter: "opacity(60%)"
+ name:
+ - z-index: 2
+ - color: "white"
+ - font-weight: "bold"
+ - font-size: "14px"
+ card:
+ - z-index: 0
+ - border-radius: "var(--border-radius)"
+ - box-shadow: "var(--box-shadow)"
+ - background-size: "cover"
+ - background-position: "center center"
+ - text-shadow: >
+ [[[
+ return entity == "undefined" ? "none" : "1px 1px 5px rgba(18, 22, 23, 0.9)";
+ ]]]
+
+custom_card_imswel_medias_library:
+ template:
+ - "custom_card_imswel_medias"
+ - "ulm_translation_engine"
+ - "custom_card_imswel_medias_language_variables"
+ variables:
+ ulm_custom_card_imswel_medias_index: 1
+ triggers_update: "[[[ return entity.entity_id; ]]]"
+ aspect_ratio: "5/2"
+ label: >
+ [[[
+ if (entity.state == "unavailable" || entity.state == "undefined"){
+ return variables.ulm_translation_unavailable;
+ } else{
+ var data = entity.attributes.data;
+ if (data[variables.ulm_custom_card_imswel_medias_index].number == undefined){
+ var number = '(' + data[variables.ulm_custom_card_imswel_medias_index].aired.split('-')[0] + ')';
+ } else{
+ var number = data[variables.ulm_custom_card_imswel_medias_index].number;
+ }
+ return `${data[variables.ulm_custom_card_imswel_medias_index].title} ${number}`;
+ }
+ ]]]
+ name: "[[[ return variables.ulm_custom_card_imswel_recentlyadded ]]]"
+ styles:
+ label:
+ - align-self: "start"
+ - justify-self: "start"
+ - margin-left: "12px"
+ name:
+ - align-self: "end"
+ - justify-self: "start"
+ - margin-left: "12px"
+ grid:
+ - grid-template-areas: "'icon .' 'n n' 'l l' '. .'"
+ - grid-template-rows: "auto repeat(2, min-content) 12px"
+ card:
+ - padding: "0px"
+ - background-image: >
+ [[[
+ return entity === undefined || `url(${states[entity.entity_id].attributes.data[variables.ulm_custom_card_imswel_medias_index].fanart})`;
+ ]]]
+ - border: "none"
+ custom_fields:
+ icon:
+ - z-index: 2
+ - align-self: "start"
+ - justify-self: "start"
+ - height: "24px"
+ - width: "24px"
+ - margin-left: "12px"
+ - margin-top: "12px"
+ blur:
+ - z-index: 1
+ - position: "absolute"
+ - top: 0
+ - left: 0
+ - height: "100%"
+ - width: "100%"
+ - border-radius: "var(--border-radius)"
+ - background: "linear-gradient(rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%)"
+ custom_fields:
+ icon: >
+
+ blur: >
+ [[[ return entity === undefined ? null : ""; ]]]
+
+custom_card_imswel_medias_upcoming:
+ template:
+ - "custom_card_imswel_medias"
+ - "ulm_translation_engine"
+ - "custom_card_imswel_medias_language_variables"
+ variables:
+ ulm_custom_card_imswel_medias_index: 1
+ ulm_custom_card_imswel_medias_platform: >
+ [[[
+ if (entity.entity_id.includes("sonarr")){
+ return "sonarr";
+ } else if(entity.entity_id.includes("plex")){
+ return "plex";
+ } else{
+ return "radarr";
+ }
+ ]]]
+ triggers_update: "all"
+ aspect_ratio: "3/4"
+ label: >
+ [[[
+ var data = entity.attributes?.data;
+ var platform = variables.ulm_custom_card_imswel_medias_platform;
+ var airdate = new Date(data[variables.ulm_custom_card_imswel_medias_index].airdate);
+
+ Date.prototype.addDays = function (days) {
+ const date = new Date(this.valueOf());
+ date.setDate(date.getDate() + days);
+ return date;
+ }
+
+ function formatRelease(release){
+ if(release.includes("Available")){
+ return ""
+ } else if (release.includes("In Theaters")){
+ return "au cinéma"
+ }
+ }
+
+ function formatDate(date){
+ var weekday = variables.ulm_custom_card_imswel_weekday;
+ var now = new Date();
+ var tomorrow = now.addDays(1);
+
+ var time = date - now;
+ var secs = parseInt((time / 1000), 10);
+ var days = Math.floor(secs / (3600*24));
+
+ if (days < 6){
+ if (weekday[date.getDay()] == weekday[now.getDay()]){
+ return variables.ulm_custom_card_imswel_today;
+ } else if (weekday[date.getDay()] == weekday[tomorrow.getDay()]){
+ return variables.ulm_custom_card_imswel_tommorow;
+ } else{
+ return weekday[date.getDay()];
+ }
+ } else{
+ return date.toLocaleDateString(variables.ulm_custom_card_imswel_locale);
+ }
+ }
+
+ if(platform == "radarr"){
+ var release = data[variables.ulm_custom_card_imswel_medias_index].release;
+ return formatDate(airdate) + " " + formatRelease(release);
+ } else if(platform == "sonarr"){
+ return formatDate(airdate);
+ }
+ ]]]
+ name: >
+ [[[
+ if (entity.state == "unavailable" || entity.state == "undefined"){
+ return variables.ulm_translation_unavailable;
+ } else{
+ var data = entity.attributes?.data;
+ var platform = variables.ulm_custom_card_imswel_medias_platform;
+
+ if(platform == "radarr"){
+ return `${data[variables.ulm_custom_card_imswel_medias_index].title}`;
+ } else if(platform =="sonarr"){
+ var number = data[variables.ulm_custom_card_imswel_medias_index].number;
+ return `${data[variables.ulm_custom_card_imswel_medias_index].title} - ${number}`;
+ }
+ }
+ ]]]
+ styles:
+ icon:
+ label:
+ - align-self: "start"
+ - justify-self: "center"
+ name:
+ - align-self: "end"
+ - justify-self: "center"
+ state:
+ img_cell:
+ grid:
+ - grid-template-areas: "'. . .' '. n .' '. l .' '. . .'"
+ - grid-template-columns: "8px 1fr 8px"
+ - grid-template-rows: "auto repeat(2, min-content) 8px"
+ card:
+ - background-image: >
+ [[[
+ return entity === undefined || `url(${states[entity.entity_id].attributes.data[variables.ulm_custom_card_imswel_medias_index].poster})`;
+ ]]]
+ - border: "none"
+ custom_fields:
+ overlay:
+ - z-index: 1
+ - position: "absolute"
+ - top: 0
+ - left: 0
+ - height: "100%"
+ - width: "100%"
+ - border-radius: "var(--border-radius)"
+ - background: "linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.8) 100%)"
+ extra_styles: >
+ .ellipsis:not(#overlay){
+ white-space: normal !important;
+ word-wrap: break-all;
+ max-height: 2.4em;
+ line-height: 1.2em;
+ }
+ custom_fields:
+ overlay: >
+ [[[ return entity === undefined ? null : ""; ]]]
diff --git a/custom_cards/custom_card_imswel_medias/languages/EN.yaml b/custom_cards/custom_card_imswel_medias/languages/EN.yaml
new file mode 100644
index 000000000..55da51024
--- /dev/null
+++ b/custom_cards/custom_card_imswel_medias/languages/EN.yaml
@@ -0,0 +1,13 @@
+---
+# EN.yaml for custom_card_imswel_medias
+custom_card_imswel_medias_language_variables:
+ variables:
+ ulm_custom_card_imswel_recentlyadded: "Recently added"
+ ulm_custom_card_imswel_in_theaters: "in theathers"
+ ulm_custom_card_imswel_weekday: >
+ [[[
+ return ["Sunday","Monday","Thuesday","Wednesday","Thursday","Friday","Saturday"];
+ ]]]
+ ulm_custom_card_imswel_today: "Today"
+ ulm_custom_card_imswel_tommorow: "Tommorow"
+ ulm_custom_card_imswel_locale: "en-US"
diff --git a/custom_cards/custom_card_imswel_medias/languages/FR.yaml b/custom_cards/custom_card_imswel_medias/languages/FR.yaml
new file mode 100644
index 000000000..3d984af34
--- /dev/null
+++ b/custom_cards/custom_card_imswel_medias/languages/FR.yaml
@@ -0,0 +1,13 @@
+---
+# FR.yaml for custom_card_imswel_medias
+custom_card_imswel_medias_language_variables:
+ variables:
+ ulm_custom_card_imswel_recentlyadded: "Récemment ajouté"
+ ulm_custom_card_imswel_in_theaters: "au cinéma"
+ ulm_custom_card_imswel_weekday: >
+ [[[
+ return ["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"];
+ ]]]
+ ulm_custom_card_imswel_today: "Aujourd'hui"
+ ulm_custom_card_imswel_tommorow: "Demain"
+ ulm_custom_card_imswel_locale: "fr-FR"
diff --git a/docs/assets/img/custom_card_imswel_medias/medias_library_plex.png b/docs/assets/img/custom_card_imswel_medias/medias_library_plex.png
new file mode 100644
index 000000000..d8bc10a81
Binary files /dev/null and b/docs/assets/img/custom_card_imswel_medias/medias_library_plex.png differ
diff --git a/docs/assets/img/custom_card_imswel_medias/medias_upcoming_radarr.png b/docs/assets/img/custom_card_imswel_medias/medias_upcoming_radarr.png
new file mode 100644
index 000000000..9a9195dc4
Binary files /dev/null and b/docs/assets/img/custom_card_imswel_medias/medias_upcoming_radarr.png differ
diff --git a/docs/assets/img/custom_card_imswel_medias/medias_upcoming_sonarr.png b/docs/assets/img/custom_card_imswel_medias/medias_upcoming_sonarr.png
new file mode 100644
index 000000000..ad3cdf8af
Binary files /dev/null and b/docs/assets/img/custom_card_imswel_medias/medias_upcoming_sonarr.png differ