diff --git a/doc/source/_static/images/dark/ansible.svg b/doc/source/_static/images/dark/ansible.svg
new file mode 100644
index 0000000..b8196d5
--- /dev/null
+++ b/doc/source/_static/images/dark/ansible.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<title>Ansible-Mark-RGB</title>
+<path d="M259.8,152.9c0,59-47.8,106.8-106.8,106.8c-59,0-106.8-47.8-106.8-106.8S94,46.1,153,46.1c0,0,0,0,0,0  C212,46.1,259.8,93.9,259.8,152.9C259.8,152.9,259.8,152.9,259.8,152.9"/>
+<path class="st0" d="M154.8,112.9l27.6,68.2l-41.7-32.9L154.8,112.9z M203.9,196.8L161.4,94.5c-1-2.8-3.7-4.6-6.6-4.5  c-3-0.1-5.7,1.7-6.8,4.5l-46.7,112.2h16l18.5-46.3l55.1,44.5c2.2,1.8,3.8,2.6,5.9,2.6c4.2,0.1,7.7-3.2,7.8-7.4c0-0.1,0-0.1,0-0.2  C204.6,198.9,204.3,197.8,203.9,196.8"/>
+</svg>
\ No newline at end of file
diff --git a/doc/source/_static/images/light/ansible.svg b/doc/source/_static/images/light/ansible.svg
new file mode 100644
index 0000000..b8196d5
--- /dev/null
+++ b/doc/source/_static/images/light/ansible.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<title>Ansible-Mark-RGB</title>
+<path d="M259.8,152.9c0,59-47.8,106.8-106.8,106.8c-59,0-106.8-47.8-106.8-106.8S94,46.1,153,46.1c0,0,0,0,0,0  C212,46.1,259.8,93.9,259.8,152.9C259.8,152.9,259.8,152.9,259.8,152.9"/>
+<path class="st0" d="M154.8,112.9l27.6,68.2l-41.7-32.9L154.8,112.9z M203.9,196.8L161.4,94.5c-1-2.8-3.7-4.6-6.6-4.5  c-3-0.1-5.7,1.7-6.8,4.5l-46.7,112.2h16l18.5-46.3l55.1,44.5c2.2,1.8,3.8,2.6,5.9,2.6c4.2,0.1,7.7-3.2,7.8-7.4c0-0.1,0-0.1,0-0.2  C204.6,198.9,204.3,197.8,203.9,196.8"/>
+</svg>
\ No newline at end of file
diff --git a/doc/source/examples/card_item.rst b/doc/source/examples/card_item.rst
index 7fcd7e3..3119a05 100644
--- a/doc/source/examples/card_item.rst
+++ b/doc/source/examples/card_item.rst
@@ -6,7 +6,7 @@ Card Item Test
 
    .. card_item::
       :title: Ansible
-      :image: ../_static/images/ansible.svg
+      :image: ansible.svg
       :description: Ansible is a suite of software tools that enables infrastructure as code. It is open-source and the suite includes software provisioning, configuration management, and application deployment functionality.
 
       - OTC Ansible Collection|https://docs.otc-service.com/ansible-collection-cloud
@@ -15,35 +15,35 @@ Card Item Test
 
    .. card_item::
       :title: Ansible
-      :image: ../_static/images/ansible.svg
+      :image: ansible.svg
       :description: Ansible is a suite of software tools that enables infrastructure as code. It is open-source and the suite includes software provisioning, configuration management, and application deployment functionality.
 
       - Ansible Collection|https://docs.otc-service.com/ansible-collection-cloud
 
    .. card_item::
       :title: Ansible
-      :image: ../_static/images/ansible.svg
+      :image: ansible.svg
       :description: Ansible is a suite of software tools that enables infrastructure as code. It is open-source and the suite includes software provisioning, configuration management, and application deployment functionality.
 
       - Ansible Collection|https://docs.otc-service.com/ansible-collection-cloud
 
    .. card_item::
       :title: Ansible
-      :image: ../_static/images/ansible.svg
+      :image: ansible.svg
       :description: Ansible is a suite of software tools that enables infrastructure as code. It is open-source and the suite includes software provisioning, configuration management, and application deployment functionality.
 
       - Ansible Collection|https://docs.otc-service.com/ansible-collection-cloud
 
    .. card_item::
       :title: Ansible
-      :image: ../_static/images/ansible.svg
+      :image: ansible.svg
       :description: Ansible is a suite of software tools that enables infrastructure as code. It is open-source and the suite includes software provisioning, configuration management, and application deployment functionality.
 
       - Ansible Collection|https://docs.otc-service.com/ansible-collection-cloud
 
    .. card_item::
       :title: Ansible
-      :image: ../_static/images/ansible.svg
+      :image: ansible.svg
       :description: Ansible is a suite of software tools that enables infrastructure as code. It is open-source and the suite includes software provisioning, configuration management, and application deployment functionality.
 
       - Ansible Collection|https://docs.otc-service.com/ansible-collection-cloud
diff --git a/otc_sphinx_directives/card_item.py b/otc_sphinx_directives/card_item.py
index ee02a5c..529760a 100644
--- a/otc_sphinx_directives/card_item.py
+++ b/otc_sphinx_directives/card_item.py
@@ -83,11 +83,10 @@ def card_item_html(self, node):
     data = f'''
     <div class="card-item">
         <div>
-            <img
-                class="card-item-img"
-                src="{node['image']}"
-                alt="{node['title']}"
-            </img>
+            <picture>
+                <source alt="{node['title']}" srcSet="/_static/images/dark/{node['image']}" media="(prefers-color-scheme: dark)" />
+                <img class="card-item-img" alt="{node['title']}" src="/_static/images/light/{node['image']}">
+            </picture>
             <div class="card-item-content">
                 <h4 style="margin: 0px 0 1rem 0; font: var(--telekom-text-style-heading-4);">{node['title']}</h4>
                 <div style="padding-bottom: 1rem;">
diff --git a/otc_sphinx_directives/directive_wrapper.py b/otc_sphinx_directives/directive_wrapper.py
index f9a2242..04b654f 100644
--- a/otc_sphinx_directives/directive_wrapper.py
+++ b/otc_sphinx_directives/directive_wrapper.py
@@ -63,7 +63,6 @@ def run(self):
         node['id'] = self.options.get('id', '')
         node['wrapper_type'] = self.options.get('wrapper_type', 'div')
         node['style'] = self.options.get('style', '')
-        print(self.options)
         self.state.nested_parse(self.content, self.content_offset, node)
         return [node]