diff --git a/src/components/DocsLayout/index.tsx b/src/components/DocsLayout/index.tsx
index 1eba5b7..59c635d 100644
--- a/src/components/DocsLayout/index.tsx
+++ b/src/components/DocsLayout/index.tsx
@@ -9,7 +9,7 @@ import React, { PropsWithChildren } from "react"
 import { useStaticQuery, graphql } from "gatsby"
 
 import DocsSidebar from "../DocsSidebar"
-import { Main, MainContent } from "./styles"
+import * as SC from "./styles"
 
 const DocsLayout = ({ children }: PropsWithChildren<{}>) => {
   const data = useStaticQuery(graphql`
@@ -24,13 +24,13 @@ const DocsLayout = ({ children }: PropsWithChildren<{}>) => {
 
   return (
     <div>
-      <Main>
+      <SC.Main>
         <DocsSidebar />
-        <MainContent>
+        <SC.MainContent>
           <h1>{data.site.siteMetadata.title}</h1>
           {children}
-        </MainContent>
-      </Main>
+        </SC.MainContent>
+      </SC.Main>
       <footer>
         © {new Date().getFullYear()}, Built with
         {` `}
diff --git a/src/components/DocsSidebarSection/index.tsx b/src/components/DocsSidebarSection/index.tsx
index e04e899..9f7b12b 100644
--- a/src/components/DocsSidebarSection/index.tsx
+++ b/src/components/DocsSidebarSection/index.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { SidebarTitle } from "./style"
+import * as SC from "./styles"
 
 export interface DocsSidebarSectionProps {
   readonly title: string
@@ -11,7 +11,7 @@ const DocsSidebarSection = ({
 }: React.PropsWithChildren<DocsSidebarSectionProps>) => {
   return (
     <div>
-      <SidebarTitle>{title}</SidebarTitle>
+      <SC.SidebarTitle>{title}</SC.SidebarTitle>
       {children}
     </div>
   )
diff --git a/src/components/DocsSidebarSection/style.tsx b/src/components/DocsSidebarSection/styles.tsx
similarity index 100%
rename from src/components/DocsSidebarSection/style.tsx
rename to src/components/DocsSidebarSection/styles.tsx
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index a234d0b..9914645 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -11,7 +11,7 @@ import { useStaticQuery, graphql } from "gatsby"
 import Container from "../Container"
 import Sidebar from "../Sidebar"
 import "./layout.scss"
-import { Main, MainContent } from "./styles"
+import * as SC from "./styles"
 import Scrollbar from "react-perfect-scrollbar"
 import "react-perfect-scrollbar/dist/css/styles.css"
 
@@ -29,13 +29,13 @@ const Layout = ({ children }: PropsWithChildren<{}>) => {
   return (
     <Scrollbar>
       <Container>
-        <Main>
+        <SC.Main>
           <Sidebar />
-          <MainContent>
+          <SC.MainContent>
             <h1>{data.site.siteMetadata.title}</h1>
             {children}
-          </MainContent>
-        </Main>
+          </SC.MainContent>
+        </SC.Main>
       </Container>
       <footer>
         <Container>