diff --git a/future2021.php b/future2021.php
index 92680ee..3a25ae0 100644
--- a/future2021.php
+++ b/future2021.php
@@ -34,6 +34,11 @@ class Future2021 extends Theme
         }
     }
 
+    public function onShortcodeHandlers()
+    {
+        $this->grav['shortcode']->registerAllShortcodes(__DIR__ . '/shortcodes');
+    }
+
     // Add images to twig template paths to allow inclusion of SVG files
     public function onTwigLoader()
     {
diff --git a/shortcodes/BoxShortcode.php b/shortcodes/BoxShortcode.php
new file mode 100644
index 0000000..91d9566
--- /dev/null
+++ b/shortcodes/BoxShortcode.php
@@ -0,0 +1,29 @@
+<?php
+
+/**
+* @author Pedro Moreno https://pmdesign.dev
+* @license Public Domain
+* @url https://github.com/pmoreno-rodriguez/grav-theme-future2021
+*/
+
+namespace Grav\Plugin\Shortcodes;
+
+use Thunder\Shortcode\Shortcode\ShortcodeInterface;
+
+class BoxShortcode extends Shortcode
+{
+    public function init()
+    {
+        $this->shortcode->getHandlers()->add('sc-box', function (ShortcodeInterface $sc) {
+
+            $output = $this->grav['twig']->processTemplate(
+                'partials/shortcodes/box.html.twig',
+                [
+                    'shortcode' => $sc,
+                ]
+            );
+
+            return $output;
+        });
+    }
+}
\ No newline at end of file
diff --git a/shortcodes/ButtonsShortcode.php b/shortcodes/ButtonsShortcode.php
new file mode 100644
index 0000000..55e337d
--- /dev/null
+++ b/shortcodes/ButtonsShortcode.php
@@ -0,0 +1,72 @@
+<?php
+
+/**
+* @author Pedro Moreno https://pmdesign.dev
+* @license Public Domain
+* @url https://github.com/pmoreno-rodriguez/grav-theme-future2021
+*/
+
+namespace Grav\Plugin\Shortcodes;
+
+use Thunder\Shortcode\Shortcode\ShortcodeInterface;
+
+class ButtonsShortcode extends Shortcode
+{
+    public function init()
+    {
+        $this->shortcode->getHandlers()->add('sc-buttons', function (ShortcodeInterface $sc) {
+            $content = $sc->getContent();
+            $buttons = $this->parseContent($content);
+            $ulclass= $sc->getParameter('ulclass', $sc->getBbCode());
+
+            $output = '<ul class="actions '.$ulclass.'">';
+            foreach ($buttons as $button) {
+                $text = $button['content'] ?? 'Button'; // Get the button content
+                $class = $button['class'] ?? '';
+                $type = $button['type'] ?? 'default';
+                $size = $button['size'] ?? '';
+                $target = $button['target'] ?? '_self';
+                $url = $button['url'] ?? '#';
+
+                $buttonClass = 'button ' . $type . ' ' . $size . ' ' . $class;
+                $output .= '<li><a class="' . $buttonClass . '" href="' . $url . '" target="' . $target . '">' . $text . '</a></li>';
+            }
+            $output .= '</ul>';
+
+            return $output;
+        });
+    }
+
+    private function parseContent($content)
+    {
+        $buttons = [];
+
+        preg_match_all('/\[sc-button(.*?)\](.*?)\[\/sc-button\]/s', $content, $matches, PREG_SET_ORDER);
+
+        foreach ($matches as $match) {
+            $buttonParams = $this->parseButtonParams($match[1]);
+            $buttonParams['content'] = $match[2]; // Save the content in the parameters array
+            $buttons[] = $buttonParams;
+        }
+
+        return $buttons;
+    }
+
+    private function parseButtonParams($paramsString)
+    {
+        $params = [];
+
+        if (is_string($paramsString)) {
+            $matches = [];
+            preg_match_all('/(\w+)\s*=\s*(?:"([^"]*)"|\'([^\']*)\'|(\S+))/', $paramsString, $matches, PREG_SET_ORDER);
+
+            foreach ($matches as $match) {
+                $key = $match[1];
+                $value = $match[2] ?? $match[3] ?? $match[4];
+                $params[$key] = $value;
+            }
+        }
+
+        return $params;
+    }
+}
diff --git a/shortcodes/FlexShortcode.php b/shortcodes/FlexShortcode.php
new file mode 100644
index 0000000..ba593eb
--- /dev/null
+++ b/shortcodes/FlexShortcode.php
@@ -0,0 +1,43 @@
+<?php
+
+/**
+* @author Pedro Moreno https://pmdesign.dev
+* @license Public Domain
+* @url https://github.com/pmoreno-rodriguez/grav-theme-future2021
+*/
+
+namespace Grav\Plugin\Shortcodes;
+
+use Thunder\Shortcode\Shortcode\ShortcodeInterface;
+
+class FlexShortcode extends Shortcode
+{
+    public function init()
+    {
+        $this->shortcode->getHandlers()->add('sc-flex', function (ShortcodeInterface $sc) {
+
+            $hash = $this->shortcode->getId($sc);
+
+            $output = $this->twig->processTemplate(
+                'partials/shortcodes/flex.html.twig', // Twig template for shortcode
+                [
+                    'hash' => $hash,
+                    'section_id' => $sc->getParameter('id','features'), // ID for Section, 'features' is default
+                    'row_class' => 'row gtr-uniform' . $sc->getParameter('class', ''), // Concatenate 'row' with user-provided class
+                    'row_styles' => $sc->getParameter('style',''), // Define inline styles
+                    'columns' => $this->shortcode->getStates($hash),
+                ]
+            );
+
+            return $output;
+        });
+
+        $this->shortcode->getHandlers()->add('column', function (ShortcodeInterface $sc) {
+            // Add column to layout state using parent layout id
+            $hash = $this->shortcode->getId($sc->getParent());
+            $this->shortcode->setStates($hash, $sc);
+
+            return '';
+        });
+    }
+}
\ No newline at end of file
diff --git a/templates/partials/shortcodes/box.html.twig b/templates/partials/shortcodes/box.html.twig
new file mode 100644
index 0000000..ff59168
--- /dev/null
+++ b/templates/partials/shortcodes/box.html.twig
@@ -0,0 +1,35 @@
+{#{% set boxStyle = shortcode.getParameter('style', '') %}#}
+{% set boxHeading = shortcode.getParameter('heading', shortcode.getBbCode()) %}
+{% set boxLevel = shortcode.getParameter('level', '3') %}
+{% set boxImage = shortcode.getParameter('image', '') %}
+{% set boxImageAlt = shortcode.getParameter('alt', '') %}
+{% set boxImageTitle = shortcode.getParameter('title', '') %}
+
+{# Options for button in box #}
+{% set buttonLabel = shortcode.getParameter('button-label', '') %}
+{% set buttonUrl = shortcode.getParameter('button-url', '') %}
+{% set buttonTarget = shortcode.getParameter('button-target', 'self') %}
+{% set buttonClasses = shortcode.getParameter('button-classes', '') %}
+
+{# Get the relative path to the current page #}
+{% set pagePath = uri.route(true) %}
+{% set imagePath = pagePath ~ '/' ~ boxImage %}
+
+<article class="box">
+    {% if boxImage %}
+        <span class="image fit">
+            <img src="{{ imagePath }}" alt="{{ boxImageAlt }}" title="{{ boxImageTitle }}"/>
+        </span>
+    {% endif %}
+    <header>
+        {% if boxHeading %}
+            <h{{ boxLevel }}>{{ boxHeading|raw }}</h{{ boxLevel }}>
+        {% endif %}
+            {{ shortcode.content|raw }}
+        {% if buttonLabel and buttonUrl %}
+            <p>
+                <a href="{{ buttonUrl }}" class="button {{ buttonClasses }}" target="_{{ buttonTarget }}">{{ buttonLabel }}</a>
+            </p>
+        {% endif %}
+    </header>
+</article>
\ No newline at end of file
diff --git a/templates/partials/shortcodes/flex.html.twig b/templates/partials/shortcodes/flex.html.twig
new file mode 100644
index 0000000..a5c044c
--- /dev/null
+++ b/templates/partials/shortcodes/flex.html.twig
@@ -0,0 +1,9 @@
+<section {% if section_id %} id="{{ section_id }}" {% endif %}>
+    <div class="{{ row_class }}" {% if row_styles %}style="{{ row_styles }}"{% endif %}>
+        {% for key, column in columns %}
+            <div class="{{ column.getParameter('class', 'col-4 col-6-medium col-12-small') }}">
+                {{ column.getContent()|raw }}
+            </div>
+        {% endfor %}
+    </div>
+</section>
\ No newline at end of file