diff --git a/src/style/main.scss b/src/style/main.scss
new file mode 100644
index 000000000..b10b6ba43
--- /dev/null
+++ b/src/style/main.scss
@@ -0,0 +1,159 @@
+.v-application .overflow-auto {
+    overflow: auto !important;
+}
+.overflow-hidden {
+    overflow: hidden !important;
+}
+.overflow-visible {
+    overflow: visible !important;
+}
+.overflow-x-auto {
+    overflow-x: auto !important;
+}
+.overflow-x-hidden {
+    overflow-x: hidden !important;
+}
+.overflow-y-auto {
+    overflow-y: auto !important;
+}
+.overflow-y-hidden {
+    overflow-y: hidden !important;
+}
+.d-none {
+    display: none !important;
+}
+.d-inline {
+    display: inline !important;
+}
+.d-inline-block {
+    display: inline-block !important;
+}
+.d-block {
+    display: block !important;
+}
+.d-table {
+    display: table !important;
+}
+.d-table-row {
+    display: table-row !important;
+}
+.d-table-cell {
+    display: table-cell !important;
+}
+.d-flex {
+    display: flex !important;
+}
+.d-inline-flex {
+    display: inline-flex !important;
+}
+.float-none {
+    float: none !important;
+}
+.float-left {
+    float: left !important;
+}
+.float-right {
+    float: right !important;
+}
+.flex-fill {
+    flex: 1 1 auto !important;
+}
+.flex-row {
+    flex-direction: row !important;
+}
+.flex-column {
+    flex-direction: column !important;
+}
+.flex-row-reverse {
+    flex-direction: row-reverse !important;
+}
+.flex-column-reverse {
+    flex-direction: column-reverse !important;
+}
+.flex-grow-0 {
+    flex-grow: 0 !important;
+}
+.flex-grow-1 {
+    flex-grow: 1 !important;
+}
+.flex-shrink-0 {
+    flex-shrink: 0 !important;
+}
+.flex-shrink-1 {
+    flex-shrink: 1 !important;
+}
+.flex-wrap {
+    flex-wrap: wrap !important;
+}
+.flex-nowrap {
+    flex-wrap: nowrap !important;
+}
+.flex-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
+}
+.justify-start {
+    justify-content: flex-start !important;
+}
+.justify-end {
+    justify-content: flex-end !important;
+}
+.justify-center {
+    justify-content: center !important;
+}
+.justify-space-between {
+    justify-content: space-between !important;
+}
+.justify-space-around {
+    justify-content: space-around !important;
+}
+.align-start {
+    align-items: flex-start !important;
+}
+.align-end {
+    align-items: flex-end !important;
+}
+.align-center {
+    align-items: center !important;
+}
+.align-baseline {
+    align-items: baseline !important;
+}
+.align-stretch {
+    align-items: stretch !important;
+}
+.align-content-start {
+    align-content: flex-start !important;
+}
+.align-content-end {
+    align-content: flex-end !important;
+}
+.align-content-center {
+    align-content: center !important;
+}
+.align-content-space-between {
+    align-content: space-between !important;
+}
+.align-content-space-around {
+    align-content: space-around !important;
+}
+.align-content-stretch {
+    align-content: stretch !important;
+}
+.align-self-auto {
+    align-self: auto !important;
+}
+.align-self-start {
+    align-self: flex-start !important;
+}
+.align-self-end {
+    align-self: flex-end !important;
+}
+.align-self-center {
+    align-self: center !important;
+}
+.align-self-baseline {
+    align-self: baseline !important;
+}
+.align-self-stretch {
+    align-self: stretch !important;
+}
\ No newline at end of file
diff --git a/src/style/readme.md b/src/style/readme.md
new file mode 100644
index 000000000..eae46b5fc
--- /dev/null
+++ b/src/style/readme.md
@@ -0,0 +1,137 @@
+# System design
+
+<p>First solve the problem then write the code<p>
+
+<br>
+
+## Table of content 
+<br>
+<ul>
+  <li><a href="#Diplay">Diplay</a></li>
+  <li><a href="#Flex">Flex</a></li>
+  <ul>
+    <li><a href="#Enabling-flexbox">Enabling flexbox</a></li>
+    <li><a href="#Flex-direction">Flex direction</a></li>
+    <li><a href="#Flex-justify">Flex justify</a></li>
+    <li><a href="#Flex-align">Flex align</a></li>
+    <li><a href="#Flex-align-self">Flex align self</a></li>
+    <li><a href="#Flex-wrap">Flex wrap</a></li>
+  </ul>
+  <li><a href="#Float">Float</a></li>
+  <ul>
+    <li><a href="#Float-direction">Float direction</a></li>
+</ul>
+<br>
+
+
+<hr>
+<br>
+<br>
+
+
+##  <span id="Diplay">Diplay</span>
+<br>
+<section>
+
+  <div >
+    <p>Specify the elements <code>display</code> property. These classes can be applied using the following format <code>d-{display}</code>.
+    </p>
+  </div>
+  <div >
+    <ul>
+      <li><code>d-inline-flex</code> - sets the element display property to <code>inline-flex</code></li>
+      <li><code>d-flex</code> - sets the element display property to <code>flex</code></li>
+      <li><code>d-inline-block</code> - sets the element display property to <code>inline-block</code></li>
+      <li><code>d-block</code> - sets the element display property to <code>block</code></li>
+      <li><code>d-inline</code> - sets the element display property to <code>inline</code></li>
+      <li><code>d-none</code> - sets the element display property to <code>none</code></li>
+    </ul>
+  </div>
+</section>
+
+
+<hr>
+<br>
+<br>
+
+## <span id="Flex">Flex</span>
+<br>
+<p>Control the layout of flex containers with alignment, justification and more with responsive flexbox utilities.</p>
+
+<p>You can also customize flex utilities to apply based upon various breakpoints.</p>
+
+
+<br>
+<br>
+
+### <span id="Enabling-flexbox">Enabling flexbox</span>
+<ul>
+  <li><strong>.d-flex</strong></li> 
+  <li><strong>.d-inline-flex</strong></li> 
+</ul>
+
+
+<br>
+<br>
+
+### <span id="Flex-direction">Flex direction</span>
+<br>
+<ul>
+  <li><strong>.flex-row</strong></li> 
+  <li><strong>.flex-row-reverse</strong></li> 
+  <li><strong>.flex-column</strong></li> 
+  <li><strong>.flex-column-reverse</strong></li> 
+</ul>
+
+<br>
+<br>
+
+###  <span id="Flex-justify">Flex-justify</span>
+<br>
+
+<ul><li><strong>.justify-start</strong></li> <li><strong>.justify-end</strong></li> <li><strong>.justify-center</strong></li> <li><strong>.justify-space-between</strong></li> <li><strong>.justify-space-around</strong></li></ul>
+
+
+<br>
+<br>
+
+### <span id="Flex-align">Flex align</span>
+<br>
+<ul><li><strong>.align-start</strong></li> <li><strong>.align-end</strong></li> <li><strong>.align-center</strong></li> <li><strong>.align-baseline</strong></li> <li><strong>.align-stretch</strong></li></ul>
+
+
+<br>
+<br>
+
+###  <span id="Flex-align-self">Flex align self</span>
+<br>
+
+<ul><li><strong>.align-start</strong></li> <li><strong>.align-end</strong></li> <li><strong>.align-center</strong></li> <li><strong>.align-baseline</strong></li> <li><strong>.align-stretch</strong></li></ul>
+
+<br>
+<br>
+
+###  <span id="Flex-wrap">Flex wrap</span>
+<br>
+<ul>
+  <li><strong>.flex-nowrap</strong></li> <li><strong>.flex-wrap</strong></li> <li><strong>.flex-wrap-reverse</strong></li> 
+</ul>
+
+<hr>
+<br>
+<br>
+
+## <span id="Float">Float</span>
+<br>
+<p>Float utility classes.</p>
+
+<p>You can also customize flex utilities to apply based upon</p>
+
+<br>
+<br>
+
+### <span id="Float-direction">Float direction</span>
+<br>
+<ul>
+  <li><strong>.float-left</strong></li> <li><strong>.float-right</strong></li> 
+</ul>
\ No newline at end of file