diff --git a/cotton_daisy/templates/hero.html b/cotton_daisy/templates/hero.html
new file mode 100644
index 0000000..e78e8e0
--- /dev/null
+++ b/cotton_daisy/templates/hero.html
@@ -0,0 +1,47 @@
+<c-vars bg title center min_h_screen="True" overlay image_src image_alt="Image alternative text" bg_opacity="60"
+        center="True" reverse="False"/>
+
+{% if overlay and image_src %}
+    <div
+            class="hero{% if min_h_screen %} min-h-screen{% endif %}"
+            style="background-image: url({{ image_src }});"
+            {{ attrs }}
+    >
+        <div class="hero-overlay bg-opacity-{{ bg_opacity }}"></div>
+        <div class="hero-content text-neutral-content text-center">
+            <div class="max-w-md">
+                {% if title %}
+                    <h1 class="mb-5 text-5xl font-bold">{{ title }}</h1>
+                {% endif %}
+                {{ slot }}
+            </div>
+        </div>
+    </div>
+{% else %}
+    <div class="hero bg-{{ bg }}{% if min_h_screen %} min-h-screen{% endif %}" {{ attrs }}>
+    {% if center is True %}
+        <div class="hero-content text-center">
+    {% else %}
+        {% if reverse %}
+            <div class="hero-content flex-col lg:flex-row-reverse">
+        {% else %}
+            <div class="hero-content flex-col lg:flex-row">
+        {% endif %}
+
+        {% if image_src %}
+            <img
+                    src="{{ image_src }}"
+                    class="max-w-sm rounded-lg shadow-2xl"
+                    alt="{{ image_alt }}"
+            />
+        {% endif %}
+    {% endif %}
+<div class="{% if center is True%}max-w-md{% endif %}">
+    {% if title %}
+        <h1 class="text-5xl font-bold">{{ title }}</h1>
+    {% endif %}
+    {{ slot }}
+</div>
+</div>
+</div>
+{% endif %}
diff --git a/cotton_daisy/templates/menu.html b/cotton_daisy/templates/menu.html
index 720ce6a..8a40ebe 100644
--- a/cotton_daisy/templates/menu.html
+++ b/cotton_daisy/templates/menu.html
@@ -1,6 +1,6 @@
 <c-vars bg="base-200" w="56" size title responsive horizontal/>
 
-<ul class="menu{% if responsive is True %} menu-vertical lg:menu-horizontal{% endif %}{% if horizontal %} menu-horizontal{% if endif %} %} bg-{{ bg }} rounded-box w-{{ w }}{% if size %} menu-{{ size }}{% endif %}" {{ attrs }}>
+<ul class="menu{% if responsive is True %} menu-vertical lg:menu-horizontal{% endif %}{% if horizontal %} menu-horizontal{% endif %} bg-{{ bg }} rounded-box w-{{ w }}{% if size %} menu-{{ size }}{% endif %}" {{ attrs }}>
 {% if title %}
     <li>
         <h2 class="menu-title">{{ title }}</h2>
diff --git a/cotton_daisy/templates/skeleton.html b/cotton_daisy/templates/skeleton.html
index b9f38d8..2f38771 100644
--- a/cotton_daisy/templates/skeleton.html
+++ b/cotton_daisy/templates/skeleton.html
@@ -1,3 +1,3 @@
 <c-vars h="32" w="32" rounded shrink/>
 
-<div class="skeleton h-32 w-32{% if rounded %} rounded-{{ rounded }}{% endif %}{% if shrink %} shrink-{{ shrink }}{% endif %}"></div>
\ No newline at end of file
+<div class="skeleton h-{{ h }} w-{{ w }}{% if rounded %} rounded-{{ rounded }}{% endif %}{% if shrink %} shrink-{{ shrink }}{% endif %}"></div>
\ No newline at end of file
diff --git a/cotton_daisy/templates/toast.html b/cotton_daisy/templates/toast.html
index 25657ea..7a5fb89 100644
--- a/cotton_daisy/templates/toast.html
+++ b/cotton_daisy/templates/toast.html
@@ -1,5 +1,5 @@
 <c-vars type title description position align/>
 
-<div class="toas{% if position %} toast-{{ position }}{% endif %}{% if align %} toast-align{% endif %}">
+<div class="toas{% if position %} toast-{{ position }}{% endif %}{% if align %} toast-{{ align }}{% endif %}" {{ attrs }}>
     <c-alert type="{{ type }}" title="{{ title }}" description="{{ description }}"/>
 </div>