diff --git a/src/atoms/paragraph/Paragraph.css b/src/atoms/paragraph/Paragraph.css
new file mode 100644
index 000000000..0f39b7cbb
--- /dev/null
+++ b/src/atoms/paragraph/Paragraph.css
@@ -0,0 +1,4 @@
+.a-paragraph {
+  @apply mb-4;
+  @apply text-primary leading-loose;
+}
diff --git a/src/atoms/paragraph/Paragraph.scss b/src/atoms/paragraph/Paragraph.scss
deleted file mode 100644
index f15115f99..000000000
--- a/src/atoms/paragraph/Paragraph.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.a-paragraph {
-  @apply text-primary leading-loose mb-4;
-}
diff --git a/src/atoms/paragraph/Paragraph.stories.js b/src/atoms/paragraph/Paragraph.stories.js
index aa7f94741..f24de99fe 100644
--- a/src/atoms/paragraph/Paragraph.stories.js
+++ b/src/atoms/paragraph/Paragraph.stories.js
@@ -1,38 +1,41 @@
-import { storiesOf } from '@storybook/vue'
 import { text } from '@storybook/addon-knobs'
 
 import AParagraph from './Paragraph.vue'
 
 const sampleParagraphText = 'Velit proident fugiat pariatur irure sint non ut non. Adipisicing aliqua consectetur nisi aliquip velit. Nisi pariatur est consectetur culpa occaecat enim nulla laborum ex. Consectetur incididunt minim cupidatat ad aliquip. Ea non ipsum ut consequat sit adipisicing eiusmod do. Officia incididunt cillum incididunt aliquip sit labore laboris do cillum commodo occaecat voluptate ea aliqua.'
 
-storiesOf('Atoms/Paragraph', module)
-  .addParameters({ info: true })
-  .add('Default', () => ({
-    components: { AParagraph },
-    props: {
-      textKnob: {
-        default: text('Paragraph text', sampleParagraphText)
-      }
-    },
-    template: `
-      <a-paragraph>
-        {{ textKnob }}
-      </a-paragraph>
-    `
-  }))
-  .add('Custom tag', () => ({
-    components: { AParagraph },
-    props: {
-      textKnob: {
-        default: text('Paragraph text', sampleParagraphText)
-      },
-      tagKnob: {
-        default: text('Html tag', 'div')
-      }
+export default {
+  title: 'Atoms/Paragraph',
+  component: AParagraph
+}
+
+export const Default = () => ({
+  components: { AParagraph },
+  props: {
+    textKnob: {
+      default: text('Paragraph text', sampleParagraphText)
+    }
+  },
+  template: `
+    <a-paragraph>
+      {{ textKnob }}
+    </a-paragraph>
+  `
+})
+
+export const CustomTag = () => ({
+  components: { AParagraph },
+  props: {
+    textKnob: {
+      default: text('Paragraph text', sampleParagraphText)
     },
-    template: `
-      <a-paragraph :tag="tagKnob">
-        {{ textKnob }}
-      </a-paragraph>
-    `
-  }))
+    tagKnob: {
+      default: text('Html tag', 'div')
+    }
+  },
+  template: `
+    <a-paragraph :tag="tagKnob">
+      {{ textKnob }}
+    </a-paragraph>
+  `
+})
diff --git a/src/atoms/paragraph/Paragraph.vue b/src/atoms/paragraph/Paragraph.vue
index 754d94063..3361b30f5 100644
--- a/src/atoms/paragraph/Paragraph.vue
+++ b/src/atoms/paragraph/Paragraph.vue
@@ -10,4 +10,4 @@ export default {
 }
 </script>
 
-<style lang="scss" src="./Paragraph.scss" />
+<style lang="css" src="./Paragraph.css" />