diff --git a/showcase/src/assets/button.svg b/showcase/src/assets/button.svg
new file mode 100644
index 000000000..a0c7c1287
--- /dev/null
+++ b/showcase/src/assets/button.svg
@@ -0,0 +1,3 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M91 34H9C7.34315 34 6 35.3431 6 37V63C6 64.6569 7.34315 66 9 66H91C92.6569 66 94 64.6569 94 63V37C94 35.3431 92.6569 34 91 34Z" fill="#D8D8D8"/>
+</svg>
diff --git a/showcase/src/assets/buttonselect.svg b/showcase/src/assets/buttonselect.svg
new file mode 100644
index 000000000..e3d83b32f
--- /dev/null
+++ b/showcase/src/assets/buttonselect.svg
@@ -0,0 +1,12 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M34 40H66V60H34V40Z" fill="#D8D8D8"/>
+<path d="M-2 40H30V60H-2V40Z" fill="#CCCCCC"/>
+<path d="M70 40H102V60H70V40Z" fill="#D8D8D8"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="100" height="100" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/showcase/src/assets/checkbox.svg b/showcase/src/assets/checkbox.svg
new file mode 100644
index 000000000..be9b02cca
--- /dev/null
+++ b/showcase/src/assets/checkbox.svg
@@ -0,0 +1,8 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M95.5 46H32.5V55H95.5V46Z" stroke="#D8D8D8"/>
+<path d="M95.5 24H32.5V33H95.5V24Z" stroke="#D8D8D8"/>
+<path d="M95.5 68H32.5V77H95.5V68Z" stroke="#D8D8D8"/>
+<path d="M14 45.5H4V55.5H14V45.5Z" fill="#D8D8D8"/>
+<path d="M13.5 24H4.5V33H13.5V24Z" stroke="#D8D8D8"/>
+<path d="M13.5 68H4.5V77H13.5V68Z" stroke="#D8D8D8"/>
+</svg>
diff --git a/showcase/src/assets/input.svg b/showcase/src/assets/input.svg
new file mode 100644
index 000000000..1da840274
--- /dev/null
+++ b/showcase/src/assets/input.svg
@@ -0,0 +1,3 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M90.5 35H8.5C7.11929 35 6 36.1193 6 37.5V63.5C6 64.8807 7.11929 66 8.5 66H90.5C91.8807 66 93 64.8807 93 63.5V37.5C93 36.1193 91.8807 35 90.5 35Z" stroke="#D8D8D8"/>
+</svg>
diff --git a/showcase/src/assets/progress.svg b/showcase/src/assets/progress.svg
new file mode 100644
index 000000000..c4b0e7e6a
--- /dev/null
+++ b/showcase/src/assets/progress.svg
@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M89 45.5H11C8.51472 45.5 6.5 47.5147 6.5 50C6.5 52.4853 8.51472 54.5 11 54.5H89C91.4853 54.5 93.5 52.4853 93.5 50C93.5 47.5147 91.4853 45.5 89 45.5Z" stroke="#D8D8D8"/>
+<path d="M6 50C6 47.2386 8.23858 45 11 45H40.4667V55H11C8.23858 55 6 52.7614 6 50Z" fill="#D8D8D8"/>
+</svg>
diff --git a/showcase/src/assets/radio.svg b/showcase/src/assets/radio.svg
new file mode 100644
index 000000000..485daeac5
--- /dev/null
+++ b/showcase/src/assets/radio.svg
@@ -0,0 +1,8 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M94.5 24H31.5V33H94.5V24Z" stroke="#D8D8D8"/>
+<path d="M94.5 46H31.5V55H94.5V46Z" stroke="#D8D8D8"/>
+<path d="M94.5 68H31.5V77H94.5V68Z" stroke="#D8D8D8"/>
+<path d="M10 33C12.4853 33 14.5 30.9853 14.5 28.5C14.5 26.0147 12.4853 24 10 24C7.51472 24 5.5 26.0147 5.5 28.5C5.5 30.9853 7.51472 33 10 33Z" stroke="#D8D8D8"/>
+<path d="M10 55.5C12.7614 55.5 15 53.2614 15 50.5C15 47.7386 12.7614 45.5 10 45.5C7.23858 45.5 5 47.7386 5 50.5C5 53.2614 7.23858 55.5 10 55.5Z" fill="#CCCCCC"/>
+<path d="M10 77C12.4853 77 14.5 74.9853 14.5 72.5C14.5 70.0147 12.4853 68 10 68C7.51472 68 5.5 70.0147 5.5 72.5C5.5 74.9853 7.51472 77 10 77Z" stroke="#D8D8D8"/>
+</svg>
diff --git a/showcase/src/assets/select.svg b/showcase/src/assets/select.svg
new file mode 100644
index 000000000..c30af4ec0
--- /dev/null
+++ b/showcase/src/assets/select.svg
@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M81.5 55.5L77.1699 48H85.8301L81.5 55.5Z" fill="#C4C4C4"/>
+<path d="M91.5 35H9.5C8.11929 35 7 36.1193 7 37.5V63.5C7 64.8807 8.11929 66 9.5 66H91.5C92.8807 66 94 64.8807 94 63.5V37.5C94 36.1193 92.8807 35 91.5 35Z" stroke="#D8D8D8"/>
+</svg>
diff --git a/showcase/src/assets/textarea.svg b/showcase/src/assets/textarea.svg
new file mode 100644
index 000000000..39de3fda3
--- /dev/null
+++ b/showcase/src/assets/textarea.svg
@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M91.5 15H9.5C8.11929 15 7 16.1193 7 17.5V83.5C7 84.8807 8.11929 86 9.5 86H91.5C92.8807 86 94 84.8807 94 83.5V17.5C94 16.1193 92.8807 15 91.5 15Z" stroke="#D8D8D8"/>
+<path d="M89.8536 74.8536L82.8536 81.8536" stroke="#D8D8D8"/>
+</svg>
diff --git a/showcase/src/views/InputCards.vue b/showcase/src/views/InputCards.vue
index 9346334f9..9c9d1858f 100644
--- a/showcase/src/views/InputCards.vue
+++ b/showcase/src/views/InputCards.vue
@@ -12,15 +12,7 @@
             <h6>Button</h6>
           </header>
           <a href="#buttons" :class="$style.cardbody">
-            <svg
-              width="88"
-              height="32"
-              viewBox="0 0 88 32"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <rect width="88" height="32" rx="3" fill="#D8D8D8" />
-            </svg>
+            <ButtonSVG />
           </a>
         </Card>
       </FlexCol>
@@ -30,15 +22,7 @@
             <h6>Input</h6>
           </header>
           <a href="#" :class="$style.cardbody">
-            <svg
-              width="88"
-              height="32"
-              viewBox="0 0 88 32"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <rect x="0.5" y="0.5" width="87" height="31" rx="2.5" stroke="#D8D8D8" />
-            </svg>
+            <InputSVG />
           </a>
         </Card>
       </FlexCol>
@@ -48,16 +32,7 @@
             <h6>Textarea</h6>
           </header>
           <a href="#" :class="$style.cardbody">
-            <svg
-              width="88"
-              height="72"
-              viewBox="0 0 88 72"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <rect x="0.5" y="0.5" width="87" height="71" rx="2.5" stroke="#D8D8D8" />
-              <line x1="83.3536" y1="60.3536" x2="76.3536" y2="67.3536" stroke="#D8D8D8" />
-            </svg>
+            <TextareaSVG />
           </a>
         </Card>
       </FlexCol>
@@ -67,16 +42,7 @@
             <h6>Select</h6>
           </header>
           <a href="#" :class="$style.cardbody">
-            <svg
-              width="88"
-              height="32"
-              viewBox="0 0 88 32"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path d="M75 21L70.6699 13.5L79.3301 13.5L75 21Z" fill="#C4C4C4" />
-              <rect x="0.5" y="0.5" width="87" height="31" rx="2.5" stroke="#D8D8D8" />
-            </svg>
+            <SelectSVG />
           </a>
         </Card>
       </FlexCol>
@@ -88,19 +54,7 @@
             <h6>Progress</h6>
           </header>
           <a href="#" :class="$style.cardbody">
-            <svg
-              width="88"
-              height="10"
-              viewBox="0 0 88 10"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <rect x="0.5" y="0.5" width="87" height="9" rx="4.5" stroke="#D8D8D8" />
-              <path
-                d="M0 5C0 2.23858 2.23858 0 5 0H34.4667V10H5C2.23858 10 0 7.76142 0 5Z"
-                fill="#D8D8D8"
-              />
-            </svg>
+            <ProgressSVG />
           </a>
         </Card>
       </FlexCol>
@@ -110,20 +64,7 @@
             <h6>Checkbox</h6>
           </header>
           <a href="#" :class="$style.cardbody">
-            <svg
-              width="92"
-              height="54"
-              viewBox="0 0 92 54"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <rect x="28.5" y="22.5" width="63" height="9" stroke="#D8D8D8" />
-              <rect x="28.5" y="0.5" width="63" height="9" stroke="#D8D8D8" />
-              <rect x="28.5" y="44.5" width="63" height="9" stroke="#D8D8D8" />
-              <rect y="22" width="10" height="10" fill="#D8D8D8" />
-              <rect x="0.5" y="0.5" width="9" height="9" stroke="#D8D8D8" />
-              <rect x="0.5" y="44.5" width="9" height="9" stroke="#D8D8D8" />
-            </svg>
+            <CheckboxSVG />
           </a>
         </Card>
       </FlexCol>
@@ -133,20 +74,7 @@
             <h6>Radio</h6>
           </header>
           <a href="#" :class="$style.cardbody">
-            <svg
-              width="90"
-              height="54"
-              viewBox="0 0 90 54"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <rect x="26.5" y="0.5" width="63" height="9" stroke="#D8D8D8" />
-              <rect x="26.5" y="22.5" width="63" height="9" stroke="#D8D8D8" />
-              <rect x="26.5" y="44.5" width="63" height="9" stroke="#D8D8D8" />
-              <circle cx="5" cy="5" r="4.5" stroke="#D8D8D8" />
-              <circle cx="5" cy="27" r="5" fill="#CCCCCC" />
-              <circle cx="5" cy="49" r="4.5" stroke="#D8D8D8" />
-            </svg>
+            <RadioSVG />
           </a>
         </Card>
       </FlexCol>
@@ -156,17 +84,7 @@
             <h6>Button Select</h6>
           </header>
           <a href="#" :class="$style.cardbody">
-            <svg
-              width="104"
-              height="20"
-              viewBox="0 0 104 20"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path d="M36 0H68V20H36V0Z" fill="#D8D8D8" />
-              <path d="M0 0H32V20H0V0Z" fill="#CCCCCC" />
-              <path d="M72 0H104V20H72V0Z" fill="#D8D8D8" />
-            </svg>
+            <ButtonSelectSVG />
           </a>
         </Card>
       </FlexCol>
@@ -179,6 +97,14 @@ import Card from "agnosticui/Card.vue";
 import FlexGrid from "agnosticui/FlexGrid/FlexGrid";
 import FlexRow from "agnosticui/FlexGrid/FlexRow";
 import FlexCol from "agnosticui/FlexGrid/FlexCol";
+import ButtonSVG from "../assets/button.svg";
+import InputSVG from "../assets/input.svg";
+import TextareaSVG from "../assets/textarea.svg";
+import SelectSVG from "../assets/select.svg";
+import ProgressSVG from "../assets/progress.svg";
+import CheckboxSVG from "../assets/checkbox.svg";
+import RadioSVG from "../assets/radio.svg";
+import ButtonSelectSVG from "../assets/buttonselect.svg";
 
 export default {
   name: "InputCards",
@@ -187,6 +113,14 @@ export default {
     FlexCol,
     FlexGrid,
     FlexRow,
+    ButtonSVG,
+    InputSVG,
+    TextareaSVG,
+    SelectSVG,
+    ProgressSVG,
+    CheckboxSVG,
+    RadioSVG,
+    ButtonSelectSVG,
   },
 };
 </script>
diff --git a/showcase/src/views/SystemCards.vue b/showcase/src/views/SystemCards.vue
index 067fe769c..ee00b7a28 100644
--- a/showcase/src/views/SystemCards.vue
+++ b/showcase/src/views/SystemCards.vue
@@ -31,7 +31,9 @@
           <header :class="$style.cardheader">
             <h6>Spacing</h6>
           </header>
-          <a href="#spacing" :class="$style.cardbody"></a>
+          <a href="#spacing" :class="$style.cardbody">
+            <SpacingSVG />
+          </a>
         </Card>
       </FlexCol>
       <FlexCol v-bind:xs="12" auto>
@@ -56,6 +58,8 @@ import FlexCol from "agnosticui/FlexGrid/FlexCol";
 import ColorSVG from "../assets/color2.svg";
 import GridSVG from "../assets/grid.svg";
 import TypographySVG from "../assets/typography.svg";
+import SpacingSVG from "../assets/spacing.svg";
+
 export default {
   name: "SystemCards",
   components: {
@@ -66,6 +70,7 @@ export default {
     ColorSVG,
     TypographySVG,
     GridSVG,
+    SpacingSVG,
   },
 };
 </script>