diff --git a/themes/hugoplate/layouts/shortcodes/card.html b/themes/hugoplate/layouts/shortcodes/card.html
index db46634..cd57a34 100644
--- a/themes/hugoplate/layouts/shortcodes/card.html
+++ b/themes/hugoplate/layouts/shortcodes/card.html
@@ -2,4 +2,17 @@
 <div class="p-10 h-full">
 {{ .Inner }}
 </div>
-</div>
\ No newline at end of file
+</div>
+
+{{/*  
+    
+    This shortcode is a wrapper for a card component. It has a default class of "text-gray-700 bg-white" but can be overridden by passing a class attribute. 
+    Attributes:
+    1. class - The class of the card
+
+    Usage: 
+    {{< card class="text-gray-700 bg-white" >}}
+    This is the content of the card
+    {{< /card >}}
+    
+    */}}
\ No newline at end of file
diff --git a/themes/hugoplate/layouts/shortcodes/columns.html b/themes/hugoplate/layouts/shortcodes/columns.html
index 23ec9ff..ade5f92 100644
--- a/themes/hugoplate/layouts/shortcodes/columns.html
+++ b/themes/hugoplate/layouts/shortcodes/columns.html
@@ -1,8 +1,28 @@
 {{/*  TODO Add To Docs "top"  */}}
-<div class="md:flex {{ if isset .Params "center" }}items-center {{ end }}{{ with .Get "class" }} {{ . }} {{ else }}  mt-6 {{ end }}"> 
-{{ range split .Inner "..column.." }}
-{{ printf "<div class=\" markdown-inner items-center flex-1 px-4 \">"| safeHTML }}
-{{ .  | safeHTML }}
+<div class="md:flex {{ if isset .Params "center" }}items-center {{ end }}{{ with .Get "class" }} {{ . }} {{ else }}  mt-6 {{ end }}">
+{{ range split (trim .Inner " \n") "..column.." }}
+{{ if ne . "" }} <!-- Check if the column content is not empty -->
+{{ printf "<div class=\"markdown-inner items-center flex-1 px-4 \">"| safeHTML }}
+{{ . | safeHTML }}
 {{ printf "</div>" | safeHTML }}
 {{ end }}
-</div>
\ No newline at end of file
+{{ end }}
+</div>
+
+{{/*
+    Adds the ability to create columns in markdown content.  
+    
+    Usage: 
+    {{< columns class="some-class" >}}
+    Content
+    ..column..
+    Content
+    {{< /columns >}}
+
+
+    */}}
+
+
+
+
+    
\ No newline at end of file
diff --git a/themes/hugoplate/layouts/shortcodes/section.html b/themes/hugoplate/layouts/shortcodes/section.html
index 25b1df8..ff64e99 100644
--- a/themes/hugoplate/layouts/shortcodes/section.html
+++ b/themes/hugoplate/layouts/shortcodes/section.html
@@ -3,4 +3,22 @@
 <div class="container items-center py-20" style="{{ with .Get "background-color" }}background-color: {{ . | safeCSS }}{{ end }}" >    
 {{ .Inner }}
 </div>
-</section>
\ No newline at end of file
+</section>   
+
+{{/*  
+
+    This shortcode is a wrapper for a section component. It has a default class of "text-gray-700 bg-white" but can be overridden by passing a class attribute.
+
+    Attributes: 
+    1. title
+    2. background-color
+    3. background-image
+    4. light-text
+    5. fixed
+    6. classes
+
+    Usage:
+    {{< section title="This is a section" background-color="#f5f5f5" background-image="https://source.unsplash.com/random/1920x1080" light-text="true" fixed="true" classes="text-center" >}}
+    This is the content of the section
+    {{< /section >}}
+*/}}