diff --git a/documentation/components/images.md b/documentation/components/images.md
new file mode 100644
index 0000000000000000000000000000000000000000..1bf9c39053cc55edf3c1cebbffd6acc24a50854a
--- /dev/null
+++ b/documentation/components/images.md
@@ -0,0 +1,54 @@
+---
+layout: default
+title: Images
+parent: Components
+nav_order: 5
+permalink: /components/images
+---
+
+# Images
+
+## Squared Image
+<div>
+    <img src= "https://media-exp1.licdn.com/dms/image/C560BAQE4IgSJqTsoQg/company-logo_200_200/0/1582757051905?e=2147483647&v=beta&t=WbtV_w-20z8o_N9dMZ6GAb7gEruJwvt5t_LYKkN5E-E" alt="The GNOME Logo">
+</div>
+
+~~~html
+<div>
+    <img src="https://media-exp1.licdn.com/dms/image/C560BAQE4IgSJqTsoQg/company-logo_200_200/0/1582757051905?e=2147483647&v=beta&t=WbtV_w-20z8o_N9dMZ6GAb7gEruJwvt5t_LYKkN5E-E" alt="The GNOME Logo">
+</div>
+~~~
+
+## Rounded Corners 
+<div class="container">
+    <img src="https://media-exp1.licdn.com/dms/image/C560BAQE4IgSJqTsoQg/company-logo_200_200/0/1582757051905?e=2147483647&v=beta&t=WbtV_w-20z8o_N9dMZ6GAb7gEruJwvt5t_LYKkN5E-E" class="round-corners"
+     alt="The GNOME Logo">
+</div>
+~~~html
+<div class="container">
+    <img src="https://media-exp1.licdn.com/dms/image/C560BAQE4IgSJqTsoQg/company-logo_200_200/0/1582757051905?e=2147483647&v=beta&t=WbtV_w-20z8o_N9dMZ6GAb7gEruJwvt5t_LYKkN5E-E" class="round-corners"
+     alt="The GNOME Logo">
+</div>
+~~~
+
+## Circle Image 
+<div class="container">
+    <img src="https://media-exp1.licdn.com/dms/image/C560BAQE4IgSJqTsoQg/company-logo_200_200/0/1582757051905?e=2147483647&v=beta&t=WbtV_w-20z8o_N9dMZ6GAb7gEruJwvt5t_LYKkN5E-E" class="circle-image"
+     alt="The GNOME Logo">
+</div>
+~~~html
+<div class="container">
+    <img src="https://media-exp1.licdn.com/dms/image/C560BAQE4IgSJqTsoQg/company-logo_200_200/0/1582757051905?e=2147483647&v=beta&t=WbtV_w-20z8o_N9dMZ6GAb7gEruJwvt5t_LYKkN5E-E" class="circle-image"
+     alt="The GNOME Logo">
+</div>
+~~~
+
+## Hover Effects
+<div class="container">
+    <img src="https://media-exp1.licdn.com/dms/image/C560BAQE4IgSJqTsoQg/company-logo_200_200/0/1582757051905?e=2147483647&v=beta&t=WbtV_w-20z8o_N9dMZ6GAb7gEruJwvt5t_LYKkN5E-E" class="hover:scale-105" alt="The GNOME Logo">
+</div>
+~~~html
+<div class="container">
+    <img src="https://media-exp1.licdn.com/dms/image/C560BAQE4IgSJqTsoQg/company-logo_200_200/0/1582757051905?e=2147483647&v=beta&t=WbtV_w-20z8o_N9dMZ6GAb7gEruJwvt5t_LYKkN5E-E" class="hover:scale-105" alt="The GNOME Logo">
+</div>
+~~~
\ No newline at end of file
diff --git a/src/components.pcss b/src/components.pcss
index 477c9552b3da6aa1afe6c5f0602e4546a0ee9a08..dda0aff4cb71c85bd7d6c653f7f2528d7e173a23 100644
--- a/src/components.pcss
+++ b/src/components.pcss
@@ -1,4 +1,5 @@
 @import "components/button.pcss";
 @import "components/input.pcss";
 @import "components/lists.pcss";
-@import "components/links.pcss"
\ No newline at end of file
+@import "components/links.pcss";
+@import "components/images.pcss";
\ No newline at end of file
diff --git a/src/components/images.pcss b/src/components/images.pcss
new file mode 100644
index 0000000000000000000000000000000000000000..f61577fd7dcbe2a1eb4a02dfa8f2e72ebfc7c513
--- /dev/null
+++ b/src/components/images.pcss
@@ -0,0 +1,15 @@
+img {
+    @apply max-w-full m-2;
+
+    &.round-corners {
+        @apply rounded-xl; 
+    }
+
+    &.circle-image {
+        @apply rounded-full; 
+    }
+}
+  
+img[alt] {
+    @apply text-sm font-regular;
+}
\ No newline at end of file