diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md
index 8fa2db74..7bccb643 100644
--- a/exampleSite/content/docs/shortcodes/index.md
+++ b/exampleSite/content/docs/shortcodes/index.md
@@ -377,6 +377,39 @@ Check out the [mathematical notation samples]({{< ref "mathematical-notation" >}
 
 <br/><br/><br/>
 
+
+## Keyword
+
+
+The `keyword` component can be used to visually highlight certain important words or phrases, e.g. professional skills etc. The `keywordList` shortcode can be used to group together multiple `keyword` items. Each item can have the following properties.
+
+
+<!-- prettier-ignore-start -->
+| Parameter   | Description                                  |
+| ----------- | -------------------------------------------- |
+| `icon`      | Optional icon to be used in the keyword      |
+<!-- prettier-ignore-end -->
+
+The input is written in Markdown so you can format it however you please.
+
+**Example:**
+
+```md
+{{</* keywordList */>}}
+{{</* keyword icon="github" */>}} Lorem ipsum dolor. {{</* /keyword */>}}
+{{</* keyword icon="code" */>}} **Important** skill {{</* /keyword */>}}
+{{</* /keywordList */>}}
+{{</* keyword */>}} *Standalone* skill {{</* /keyword */>}}
+```
+
+{{< keywordList >}}
+{{< keyword icon="github" >}} Lorem ipsum dolor {{< /keyword >}}
+{{< keyword icon="code" >}} **Important** skill {{< /keyword >}}
+{{< /keywordList >}}
+{{< keyword >}} *Standalone* skill {{< /keyword >}}
+
+<br/><br/><br/>
+
 ## Lead
 
 `lead` is used to bring emphasis to the start of an article. It can be used to style an introduction, or to call out an important piece of information. Simply wrap any Markdown content in the `lead` shortcode.
@@ -393,7 +426,7 @@ When life gives you lemons, make lemonade.
 When life gives you lemons, make lemonade.
 {{< /lead >}}
 
-<br/><br/><br/>
+<br/><br/><br/> 
 
 ## List
 
diff --git a/layouts/shortcodes/keyword.html b/layouts/shortcodes/keyword.html
new file mode 100644
index 00000000..d8847679
--- /dev/null
+++ b/layouts/shortcodes/keyword.html
@@ -0,0 +1,13 @@
+{{ $icon := .Get "icon"}}
+<div class="flex mt-2">
+<span
+  class="rounded-full bg-primary-500 dark:bg-primary-300 text-neutral-50 dark:text-neutral-700 px-1.5 py-[1px] text-xs font-normal"
+>
+  <span class="flex flex-row items-center">
+    {{if $icon}}
+    <span class="mr-1">{{ partial "icon" $icon }}</span>
+    {{ end }}
+    <span> {{- .Inner | markdownify -}} </span>
+  </span>
+</span>
+</div>
\ No newline at end of file
diff --git a/layouts/shortcodes/keywordList.html b/layouts/shortcodes/keywordList.html
new file mode 100644
index 00000000..22d89c60
--- /dev/null
+++ b/layouts/shortcodes/keywordList.html
@@ -0,0 +1 @@
+<div class="flex flex-row flex-wrap items-center space-x-2">{{- .Inner -}}</div>