diff --git a/CHANGELOG b/CHANGELOG
index a378eb5..8e909c4 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -5,9 +5,25 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased]
+## [Released]
 
-## [0.3.0] - 2023-03-27
+## [0.4.0] - 2023-04-29
+
+### Changed
+
+- Generalized button states
+
+### Added
+
+- Buttons in system colors
+- Progress bars
+  - Default color
+  - Primary color
+  - Accent color
+  - System colors
+  - Sizes: XS, S, M, L, XL
+
+## [0.3.0] - 2023-04-27
 
 ### Changed
 
diff --git a/css/components/buttons.css b/css/components/buttons.css
index 8ed54b5..3bd9927 100644
--- a/css/components/buttons.css
+++ b/css/components/buttons.css
@@ -10,8 +10,11 @@ button {
     transition: var(--transition-duration);
 }
 
-button:hover {
-    cursor: pointer;
+button:hover { cursor: pointer;}
+button:disabled { cursor: not-allowed;}
+button:focus {
+    outline-color: transparent;
+    outline-style: solid;
 }
 
 /* Button sizes */
@@ -43,18 +46,9 @@ button:hover {
 .button-primary { background-color: var(--primary);}
 .button-primary:hover { background-color: var(--primary-60);}
 .button-primary:active { background-color: var(--primary-40);}
-.button-primary:focus {
-    box-shadow: 0 0 0 3px var(--primary-80);
-    outline-color: transparent;
-    outline-style: solid;
-}
-.button-primary:disabled {
-    background-color: var(--primary-80);
-}
-.button-primary:disabled:hover {
-    background-color: var(--primary-80);
-    cursor: not-allowed;
-}
+.button-primary:focus { box-shadow: 0 0 0 3px var(--primary-80);}
+.button-primary:disabled { background-color: var(--primary-80);}
+.button-primary:disabled:hover { background-color: var(--primary-80);}
 
 /* secondary button */
 .button-secondary { 
@@ -63,34 +57,56 @@ button:hover {
     background-color: transparent;
     color: var(--primary);
 }
-.button-secondary:hover { background-color: var(--primary-60);}
-.button-secondary:active { background-color: var(--primary-40);}
-.button-secondary:focus {
-    box-shadow: 0 0 0 3px var(--primary-80);
-    outline-color: transparent;
-    outline-style: solid;
-}
-.button-secondary:disabled {
-    background-color: var(--primary-80);
+
+.button-secondary:hover { 
+    color: var(--text-button);
+    background-color: var(--primary-60);
+    border: 3px solid var(--primary-60);
 }
-.button-secondary:disabled:hover {
-    background-color: var(--primary-l-80);
-    cursor: not-allowed;
+.button-secondary:active { background-color: var(--primary-40);}
+.button-secondary:focus { box-shadow: 0 0 0 3px var(--primary-80);}
+.button-secondary:disabled { 
+    border: 3px solid var(--primary-80);
+    color: var(--primary-80);
 }
+.button-secondary:disabled:hover { background-color: var(--primary-80);}
 
 /* CTA button */
-.button-cta { background-color: var(--accent-50);}
+.button-cta { background-color: var(--accent);}
 .button-cta:hover { background-color: var(--accent-60);}
 .button-cta:active { background-color: var(--accent-40);}
-.button-cta:focus {
-    box-shadow: 0 0 0 3px var(--accent-80);
-    outline-color: transparent;
-    outline-style: solid;
-}
-.button-cta:disabled {
-    background-color: var(--accent-80);
-}
-.button-cta:disabled:hover {
-    background-color: var(--accent-80);
-    cursor: not-allowed;
-}
\ No newline at end of file
+.button-cta:focus { box-shadow: 0 0 0 3px var(--accent-80);}
+.button-cta:disabled { background-color: var(--accent-80);}
+.button-cta:disabled:hover { background-color: var(--accent-80);}
+
+/* Information button */
+.button-info { background-color: var(--info);}
+.button-info:hover { background-color: var(--info-60);}
+.button-info:active { background-color: var(--info-40);}
+.button-info:focus { box-shadow: 0 0 0 3px var(--info-80);}
+.button-info:disabled { background-color: var(--info-80);}
+.button-info:disabled:hover { background-color: var(--info-80);}
+
+/* Success button */
+.button-success { background-color: var(--success);}
+.button-success:hover { background-color: var(--success-60);}
+.button-success:active { background-color: var(--success-40);}
+.button-success:focus { box-shadow: 0 0 0 3px var(--success-80);}
+.button-success:disabled { background-color: var(--success-80);}
+.button-success:disabled:hover { background-color: var(--success-80);}
+
+/* Warning button */
+.button-warning { background-color: var(--warning);}
+.button-warning:hover { background-color: var(--warning-60);}
+.button-warning:active { background-color: var(--warning-40);}
+.button-warning:focus { box-shadow: 0 0 0 3px var(--warning-80);}
+.button-warning:disabled { background-color: var(--warning-80);}
+.button-warning:disabled:hover {background-color: var(--warning-80);}
+
+/* Error button */
+.button-error { background-color: var(--error);}
+.button-error:hover { background-color: var(--error-60);}
+.button-error:active { background-color: var(--error-40);}
+.button-error:focus { box-shadow: 0 0 0 3px var(--error-80);}
+.button-error:disabled { background-color: var(--error-80);}
+.button-error:disabled:hover { background-color: var(--error-80);}
\ No newline at end of file
diff --git a/css/components/buttons.min.css b/css/components/buttons.min.css
index 8e1a310..d739d53 100644
--- a/css/components/buttons.min.css
+++ b/css/components/buttons.min.css
@@ -1 +1 @@
-button{position:relative;box-sizing:border-box;border-radius:var(--rounded-m);border:none;color:var(--text-button);max-width:450px;position:relative;transition:var(--transition-duration)}button:hover{cursor:pointer}.button-s{font-size:14px;font-weight:500;line-height:24px;min-width:96px;padding:8px 20px}.button-m{font-size:16px;font-weight:500;line-height:24px;min-width:128px;padding:10px 26px}.button-l{font-size:20px;font-weight:500;line-height:24px;min-width:128px;padding:12px 32px}.button-primary{background-color:var(--primary)}.button-primary:hover{background-color:var(--primary-60)}.button-primary:active{background-color:var(--primary-40)}.button-primary:focus{box-shadow:0 0 0 3px var(--primary-80);outline-color:transparent;outline-style:solid}.button-primary:disabled{background-color:var(--primary-80)}.button-primary:disabled:hover{background-color:var(--primary-80);cursor:not-allowed}.button-secondary{box-sizing:border-box;border:3px solid var(--primary);background-color:transparent;color:var(--primary)}.button-secondary:hover{background-color:var(--primary-60)}.button-secondary:active{background-color:var(--primary-40)}.button-secondary:focus{box-shadow:0 0 0 3px var(--primary-80);outline-color:transparent;outline-style:solid}.button-secondary:disabled{background-color:var(--primary-80)}.button-secondary:disabled:hover{background-color:var(--primary-l-80);cursor:not-allowed}.button-cta{background-color:var(--accent-50)}.button-cta:hover{background-color:var(--accent-60)}.button-cta:active{background-color:var(--accent-40)}.button-cta:focus{box-shadow:0 0 0 3px var(--accent-80);outline-color:transparent;outline-style:solid}.button-cta:disabled{background-color:var(--accent-80)}.button-cta:disabled:hover{background-color:var(--accent-80);cursor:not-allowed}
\ No newline at end of file
+button{position:relative;box-sizing:border-box;border-radius:var(--rounded-m);border:none;color:var(--text-button);max-width:450px;position:relative;transition:var(--transition-duration)}button:hover{cursor:pointer}button:disabled{cursor:not-allowed}button:focus{outline-color:transparent;outline-style:solid}.button-s{font-size:14px;font-weight:500;line-height:24px;min-width:96px;padding:8px 20px}.button-m{font-size:16px;font-weight:500;line-height:24px;min-width:128px;padding:10px 26px}.button-l{font-size:20px;font-weight:500;line-height:24px;min-width:128px;padding:12px 32px}.button-primary{background-color:var(--primary)}.button-primary:hover{background-color:var(--primary-60)}.button-primary:active{background-color:var(--primary-40)}.button-primary:focus{box-shadow:0 0 0 3px var(--primary-80)}.button-primary:disabled{background-color:var(--primary-80)}.button-primary:disabled:hover{background-color:var(--primary-80)}.button-secondary{box-sizing:border-box;border:3px solid var(--primary);background-color:transparent;color:var(--primary)}.button-secondary:hover{color:var(--text-button);background-color:var(--primary-60);border:3px solid var(--primary-60)}.button-secondary:active{background-color:var(--primary-40)}.button-secondary:focus{box-shadow:0 0 0 3px var(--primary-80)}.button-secondary:disabled{border:3px solid var(--primary-80);color:var(--primary-80)}.button-secondary:disabled:hover{background-color:var(--primary-80)}.button-cta{background-color:var(--accent)}.button-cta:hover{background-color:var(--accent-60)}.button-cta:active{background-color:var(--accent-40)}.button-cta:focus{box-shadow:0 0 0 3px var(--accent-80)}.button-cta:disabled{background-color:var(--accent-80)}.button-cta:disabled:hover{background-color:var(--accent-80)}.button-info{background-color:var(--info)}.button-info:hover{background-color:var(--info-60)}.button-info:active{background-color:var(--info-40)}.button-info:focus{box-shadow:0 0 0 3px var(--info-80)}.button-info:disabled{background-color:var(--info-80)}.button-info:disabled:hover{background-color:var(--info-80)}.button-success{background-color:var(--success)}.button-success:hover{background-color:var(--success-60)}.button-success:active{background-color:var(--success-40)}.button-success:focus{box-shadow:0 0 0 3px var(--success-80)}.button-success:disabled{background-color:var(--success-80)}.button-success:disabled:hover{background-color:var(--success-80)}.button-warning{background-color:var(--warning)}.button-warning:hover{background-color:var(--warning-60)}.button-warning:active{background-color:var(--warning-40)}.button-warning:focus{box-shadow:0 0 0 3px var(--warning-80)}.button-warning:disabled{background-color:var(--warning-80)}.button-warning:disabled:hover{background-color:var(--warning-80)}.button-error{background-color:var(--error)}.button-error:hover{background-color:var(--error-60)}.button-error:active{background-color:var(--error-40)}.button-error:focus{box-shadow:0 0 0 3px var(--error-80)}.button-error:disabled{background-color:var(--error-80)}.button-error:disabled:hover{background-color:var(--error-80)}
\ No newline at end of file
diff --git a/css/components/progress.css b/css/components/progress.css
new file mode 100644
index 0000000..2a15154
--- /dev/null
+++ b/css/components/progress.css
@@ -0,0 +1,58 @@
+/* Default progress bar */
+.progress {
+    position: relative;
+    width: 25rem;
+    height: 3rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border: 1px solid var(--background);
+    border-radius: var(--rounded-m);
+    background-color: var(--background-light);
+}
+
+.progress .progress-bar {
+    position: absolute;
+    left: 0;
+    width: 0;
+    height: 100%;
+    border-radius: var(--rounded-m);
+    background-color: var(--background);
+    z-index: 200;
+}
+
+/* Colors */
+/* Primary */
+.progress-primary > .progress-bar { background-color: var(--primary);}
+
+/* Accent */
+.progress-accent > .progress-bar { background-color: var(--accent);}
+
+/* Information */
+.progress-info > .progress-bar { background-color: var(--info);}
+
+/* Success */
+.progress-success > .progress-bar { background-color: var(--success);}
+
+/* Warning */
+.progress-warning > .progress-bar { background-color: var(--warning);}
+
+/* Error */
+.progress-error > .progress-bar { background-color: var(--error);}
+
+/* Sizes */
+/* Progress bar XS */
+.progress-xs { height: .5rem;}
+
+/* Progress bar S */
+.progress-s { height: 1rem;}
+
+/* Progress bar M */
+.progress-m { height: 2rem;}
+
+/* Progress bar L */
+.progress-l { height: 2.5rem;}
+
+/* Progress bar XL */
+.progress-xl { height: 3rem;}
\ No newline at end of file
diff --git a/examamples/components/example_badges.html b/examamples/components/example_badges.html
index 1c5d6ac..63c740b 100644
--- a/examamples/components/example_badges.html
+++ b/examamples/components/example_badges.html
@@ -15,50 +15,52 @@
         <title>Badges | Neptune examples</title>
     </head>
     <body>
-        <h3 class="example-title">Default badges</h3>
+        <h1 class="main-headline">Badges</h1>
+
         <div class="example-box">
+            <h3 class="example-title">Default badges</h3>
             <span class="badge badge-s">Default S</span>
             <span class="badge badge-m">Default M</span>
             <span class="badge badge-l">Default L</span>
         </div>
 
-        <h3 class="example-title">Primary badges</h3>
         <div class="example-box">
+            <h3 class="example-title">Primary badges</h3>
             <span class="badge badge-primary badge-s">Primary S</span>
             <span class="badge badge-primary badge-m">Primary M</span>
             <span class="badge badge-primary badge-l">Primary L</span>
         </div>
 
-        <h3 class="example-title">Accent badges</h3>
         <div class="example-box">
+            <h3 class="example-title">Accent badges</h3>
             <span class="badge badge-accent badge-s">Accent S</span>
             <span class="badge badge-accent badge-m">Accent M</span>
             <span class="badge badge-accent badge-l">Accent L</span>
         </div>
 
-        <h3 class="example-title">Information badges</h3>
         <div class="example-box">
+            <h3 class="example-title">Information badges</h3>
             <span class="badge badge-info badge-s">Information S</span>
             <span class="badge badge-info badge-m">Information M</span>
             <span class="badge badge-info badge-l">Information L</span>
         </div>
 
-        <h3 class="example-title">Success badges</h3>
         <div class="example-box">
+            <h3 class="example-title">Success badges</h3>
             <span class="badge badge-success badge-s">Sucess S</span>
             <span class="badge badge-success badge-m">Sucess M</span>
             <span class="badge badge-success badge-l">Sucess L</span>
         </div>
 
-        <h3 class="example-title">Warning badges</h3>
         <div class="example-box">
+            <h3 class="example-title">Warning badges</h3>
             <span class="badge badge-warning badge-s">Warning S</span>
             <span class="badge badge-warning badge-m">Warning M</span>
             <span class="badge badge-warning badge-l">Warning L</span>
         </div>
 
-        <h3 class="example-title">Error badges</h3>
         <div class="example-box">
+            <h3 class="example-title">Error badges</h3>
             <span class="badge badge-error badge-s">Error S</span>
             <span class="badge badge-error badge-m">Error M</span>
             <span class="badge badge-error badge-l">Error L</span>
diff --git a/examamples/components/example_buttons.html b/examamples/components/example_buttons.html
index 102dfa5..9a00dbf 100644
--- a/examamples/components/example_buttons.html
+++ b/examamples/components/example_buttons.html
@@ -15,27 +15,62 @@
         <title>Buttons | Neptune examples</title>
     </head>
     <body id="body" data-scrollbar>
-        <h3 class="example-title">Primary button</h3>
         <div class="example-box">
+            <h3 class="example-title">Default button</h3>
+            <button class="button button-l">Default L</button>
+            <button class="button button-m">Default M</button>
+            <button class="button button-s">Default S</button>
+        </div>
+
+        <div class="example-box">
+            <h3 class="example-title">Primary button</h3>
             <button class="button-primary button-l">Primary L</button>
             <button class="button-primary button-m">Primary M</button>
             <button class="button-primary button-s">Primary S</button>
         </div>
 
-        <h3 class="example-title">Secondary button</h3>
         <div class="example-box">
+            <h3 class="example-title">Secondary button</h3>
             <button class="button-secondary button-l">Secondary L</button>
             <button class="button-secondary button-m">Secondary M</button>
             <button class="button-secondary button-s">Secondary S</button>
         </div>
 
-        <h3 class="example-title">CTA button</h3>
         <div class="example-box">
+            <h3 class="example-title">CTA button</h3>
             <button class="button-cta button-l">CTA L</button>
             <button class="button-cta button-m">CTA M</button>
             <button class="button-cta button-s">CTA S</button>
         </div>
 
+        <div class="example-box">
+            <h3 class="example-title">Information button</h3>
+            <button class="button-info button-l">Info L</button>
+            <button class="button-info button-m">Info M</button>
+            <button class="button-info button-s">Info S</button>
+        </div>
+
+        <div class="example-box">
+            <h3 class="example-title">Success button</h3>
+            <button class="button-success button-l">Success L</button>
+            <button class="button-success button-m">Success M</button>
+            <button class="button-success button-s">Success S</button>
+        </div>
+
+        <div class="example-box">
+            <h3 class="example-title">Warning button</h3>
+            <button class="button-warning button-l">Warning L</button>
+            <button class="button-warning button-m">Warning M</button>
+            <button class="button-warning button-s">Warning S</button>
+        </div>
+
+        <div class="example-box">
+            <h3 class="example-title">Error button</h3>
+            <button class="button-error button-l">Error L</button>
+            <button class="button-error button-m">Error M</button>
+            <button class="button-error button-s">Error S</button>
+        </div>
+
         <!-- Init scrollbar -->
         <script src="/node_modules/smooth-scrollbar/dist/smooth-scrollbar.js"></script>
         <div id="scrollbar"></div>
diff --git a/examamples/components/example_progress.html b/examamples/components/example_progress.html
new file mode 100644
index 0000000..ba5cba8
--- /dev/null
+++ b/examamples/components/example_progress.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <!-- Import example style -->
+        <link rel="stylesheet" href="/examamples/example_style.min.css">
+
+        <!-- Import neptune ui -->
+        <link rel="stylesheet" href="/neptune.css">
+
+        <style>
+            .progress-bar { width: 40% !important;}
+        </style>
+
+        <link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
+        <title>Progress bar | Neptune examples</title>
+    </head>
+    <body>
+        <h1 class="main-headline">Progress bar</h2>
+
+        <h2 class="secondary-headline">Colors</h2>
+        <div class="example-box">
+            <h3 class="example-title">Default bar</h3>
+            <div class="progress progress-m">
+                <div class="progress-bar"></div>
+            </div>
+        </div>
+
+        <div class="example-box">
+            <h3 class="example-title">Primary bar</h3>
+            <div class="progress progress-primary progress-m">
+                <div class="progress-bar"></div>
+            </div>
+        </div>
+
+        <div class="example-box">
+            <h3 class="example-title">Accent bar</h3>
+            <div class="progress progress-accent progress-m">
+                <div class="progress-bar"></div>
+            </div>
+        </div>
+
+        <div class="example-box">
+            <h3 class="example-title">Information bar</h3>
+            <div class="progress progress-info progress-m">
+                <div class="progress-bar"></div>
+            </div>
+        </div>
+
+        <div class="example-box">
+            <h3 class="example-title">Success bar</h3>
+            <div class="progress progress-success progress-m">
+                <div class="progress-bar"></div>
+            </div>
+        </div>
+
+        <div class="example-box">
+            <h3 class="example-title">Warning bar</h3>
+            <div class="progress progress-warning progress-m">
+                <div class="progress-bar"></div>
+            </div>
+        </div>
+
+        <div class="example-box">
+            <h3 class="example-title">Error bar</h3>
+            <div class="progress progress-error progress-m">
+                <div class="progress-bar"></div>
+            </div>
+        </div>
+
+        <h2 class="secondary-headline">Sizes</h2>
+        <div class="example-box">
+            <h3 class="example-title">Progress bar XS</h3>
+            <div class="progress progress-xs">
+                <div class="progress-bar"></div>
+            </div>
+        </div>
+
+        <div class="example-box">
+            <h3 class="example-title">Progress bar S</h3>
+            <div class="progress progress-s">
+                <div class="progress-bar"></div>
+            </div>
+        </div>
+
+        <div class="example-box">
+            <h3 class="example-title">Progress bar M</h3>
+            <div class="progress progress-m">
+                <div class="progress-bar"></div>
+            </div>
+        </div>
+
+        <div class="example-box">
+            <h3 class="example-title">Progress bar L</h3>
+            <div class="progress progress-l">
+                <div class="progress-bar"></div>
+            </div>
+        </div>
+
+        <div class="example-box">
+            <h3 class="example-title">Progress bar L</h3>
+            <div class="progress progress-xl">
+                <div class="progress-bar"></div>
+            </div>
+        </div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/examamples/components/example_toasts.html b/examamples/components/example_toasts.html
index bb70818..6be90e7 100644
--- a/examamples/components/example_toasts.html
+++ b/examamples/components/example_toasts.html
@@ -17,9 +17,8 @@
         <title>Toasts | Neptune examples</title>
     </head>
     <body>
-
-        <h3 class="example-title">Default toast</h3>
         <div class="example-box">
+            <h3 class="example-title">Default toast</h3>
             <div class="toast">
                 <span class="toast-icon">
                     <i class="bi bi-bell-fill"></i>
@@ -30,8 +29,8 @@ <h3 class="example-title">Default toast</h3>
             </div>
         </div>
 
-        <h3 class="example-title">Primary toast</h3>
         <div class="example-box">
+            <h3 class="example-title">Primary toast</h3>
             <div class="toast toast-primary">
                 <span class="toast-icon">
                     <i class="bi bi-chat-left-fill"></i>
@@ -42,8 +41,8 @@ <h3 class="example-title">Primary toast</h3>
             </div>
         </div>
 
-        <h3 class="example-title">Accent toast</h3>
         <div class="example-box">
+            <h3 class="example-title">Accent toast</h3>
             <div class="toast toast-accent">
                 <span class="toast-icon">
                     <i class="bi bi-chat-left-fill"></i>
@@ -54,8 +53,8 @@ <h3 class="example-title">Accent toast</h3>
             </div>
         </div>
 
-        <h3 class="example-title">Information toast</h3>
         <div class="example-box">
+            <h3 class="example-title">Information toast</h3>
             <div class="toast toast-info">
                 <span class="toast-icon">
                     <i class="bi bi-info-circle-fill"></i>
@@ -66,8 +65,8 @@ <h3 class="example-title">Information toast</h3>
             </div>
         </div>
 
-        <h3 class="example-title">Success toast</h3>
         <div class="example-box">
+            <h3 class="example-title">Success toast</h3>
             <div class="toast toast-success">
                 <span class="toast-icon">
                     <i class="bi bi-check-circle-fill"></i>
@@ -78,8 +77,8 @@ <h3 class="example-title">Success toast</h3>
             </div>
         </div>
 
-        <h3 class="example-title">Warning toast</h3>
         <div class="example-box">
+            <h3 class="example-title">Warning toast</h3>
             <div class="toast toast-warning">
                 <span class="toast-icon">
                     <i class="bi bi-exclamation-triangle-fill"></i>
@@ -90,8 +89,8 @@ <h3 class="example-title">Warning toast</h3>
             </div>
         </div>
 
-        <h3 class="example-title">Error toast</h3>
         <div class="example-box">
+            <h3 class="example-title">Error toast</h3>
             <div class="toast toast-error">
                 <span class="toast-icon">
                     <i class="bi bi-exclamation-circle-fill"></i>
diff --git a/examamples/example_style.css b/examamples/example_style.css
index c6f3c62..61d17e3 100644
--- a/examamples/example_style.css
+++ b/examamples/example_style.css
@@ -4,7 +4,8 @@
 }
 
 body {
-    height: 100vh;
+    min-height: 100vh;
+    height: auto;
     display: flex;
     flex-direction: column;
     align-items: start;
@@ -36,11 +37,18 @@ body {
     color: hsl(190, 100%, 45%);
 }
 
-.example-title {
+.main-headline {
+    position: relative;
+    margin-left: 1rem;
+    font-size: 44px;
+    font-weight: 900;
+}
+
+.secondary-headline {
     position: relative;
-    margin-top: 1rem;
     margin-left: 1rem;
-    margin-bottom: -2rem;
+    font-size: 36px;
+    font-weight: 900;
 }
 
 .example-box {
@@ -53,7 +61,13 @@ body {
     width: 100%;
     max-width: 800px;
     display: flex;
+    flex-direction: column;
     gap: 1rem !important;
-    align-items: center;
+    align-items: start;
+}
 
+.example-box .example-title {
+    position: relative;
+    margin-top: 1rem;
+    margin-bottom: .5rem;
 }
\ No newline at end of file
diff --git a/examamples/example_style.min.css b/examamples/example_style.min.css
index 8368e4f..48f817b 100644
--- a/examamples/example_style.min.css
+++ b/examamples/example_style.min.css
@@ -1 +1 @@
-*{margin:0;padding:0}body{height:100vh;display:flex;flex-direction:column;align-items:start;justify-content:start;gap:1rem;font-family:'Open Sans',sans-serif;background-color:var(--background-light)}.neptuneLogo{position:relative;max-width:35rem;height:auto;display:flex;align-items:center;justify-content:center;gap:1rem}.logoImage{position:relative;height:6rem}.logoText{position:relative;font-family:Poppins,sans-serif;font-size:4rem;color:#00bfe5}.example-title{position:relative;margin-top:1rem;margin-left:1rem;margin-bottom:-2rem}.example-box{position:relative;padding:2rem 1rem;min-height:3rem;height:auto;max-height:60vh;min-width:250px;width:100%;max-width:800px;display:flex;gap:1rem!important;align-items:center}
\ No newline at end of file
+*{margin:0;padding:0}body{min-height:100vh;height:auto;display:flex;flex-direction:column;align-items:start;justify-content:start;gap:1rem;font-family:'Open Sans',sans-serif;background-color:var(--background-light)}.neptuneLogo{position:relative;max-width:35rem;height:auto;display:flex;align-items:center;justify-content:center;gap:1rem}.logoImage{position:relative;height:6rem}.logoText{position:relative;font-family:Poppins,sans-serif;font-size:4rem;color:#00bfe5}.main-headline{position:relative;margin-left:1rem;font-size:44px;font-weight:900}.secondary-headline{position:relative;margin-left:1rem;font-size:36px;font-weight:900}.example-box{position:relative;padding:2rem 1rem;min-height:3rem;height:auto;max-height:60vh;min-width:250px;width:100%;max-width:800px;display:flex;flex-direction:column;gap:1rem!important;align-items:start}.example-box .example-title{position:relative;margin-top:1rem;margin-bottom:.5rem}
\ No newline at end of file
diff --git a/examamples/example_template.html b/examamples/example_template.html
index 9c5f84a..0d7ab43 100644
--- a/examamples/example_template.html
+++ b/examamples/example_template.html
@@ -15,9 +15,14 @@
         <title>Buttons | Neptune examples</title>
     </head>
     <body>
-        <div class="neptuneLogo">
+        <!-- <div class="neptuneLogo">
             <img class="logoImage" src="/assets/logo.png" alt="Neptune logo">
             <h1 class="logoText">Neptune</h1>
+        </div> -->
+
+        <div class="example-box">
+            <h3 class="example-title">Example box</h3>
+            <!-- Exammple content -->
         </div>
     </body>
 </html>
\ No newline at end of file
diff --git a/neptune.css b/neptune.css
index f2b28cf..211cb55 100644
--- a/neptune.css
+++ b/neptune.css
@@ -7,6 +7,7 @@
 /* Import components */
 @import url('/css/components/badges.css');
 @import url('/css/components/buttons.min.css');
+@import url('/css/components/progress.css');
 @import url('/css/components/toasts.min.css');
 
 * {
diff --git a/package.json b/package.json
index 1ec3cf0..5bdf939 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "neptune",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "A lightweight CSS framework.",
   "main": "/neptune.css",
   "style": "/neptune.css",