diff --git a/components/templates/styleguide/_foo_bar.tsx b/components/templates/styleguide/_foo_bar.tsx
new file mode 100644
index 00000000..e22e30ad
--- /dev/null
+++ b/components/templates/styleguide/_foo_bar.tsx
@@ -0,0 +1,22 @@
+import styled, { css } from 'styled-components'
+import { StyledTag4 } from './_styled_tag4'
+
+const fooBar = css`
+  font-size: 200%;
+`
+
+export const FooBar = () => (
+  <StyledFooBar css={ fooBar }>This is FooBar</StyledFooBar>
+)
+
+export const FooBarTag4 = () => (
+  <StyledFooBarTag4>This is FooBarTag4</StyledFooBarTag4>
+)
+
+const StyledFooBar = styled.div`
+  color: red;
+`
+
+const StyledFooBarTag4 = styled(StyledTag4)`
+  font-weight: bold;
+`
diff --git a/components/templates/styleguide/_styled_tag4.ts b/components/templates/styleguide/_styled_tag4.ts
index 8b89d448..b6a03811 100644
--- a/components/templates/styleguide/_styled_tag4.ts
+++ b/components/templates/styleguide/_styled_tag4.ts
@@ -1,3 +1,3 @@
 import styled from 'styled-components'
 
-export const Tag4 = styled.div`border: 4px solid black;`
+export const StyledTag4 = styled.div`border: 4px solid black;`
diff --git a/components/templates/styleguide/foo_bar.tsx b/components/templates/styleguide/foo_bar.tsx
deleted file mode 100644
index 63363bbc..00000000
--- a/components/templates/styleguide/foo_bar.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as Styled from './styled_foo_bar'
-
-export const FooBar = () => <Styled.FooBar css={ Styled.fooBar }>This is FooBar</Styled.FooBar>
-
-export const FooBarTag4 = () => <Styled.FooBarTag4>This is FooBarTag4</Styled.FooBarTag4>
diff --git a/components/templates/styleguide/index.tsx b/components/templates/styleguide/index.tsx
index 1ea3336e..69ca4ed6 100644
--- a/components/templates/styleguide/index.tsx
+++ b/components/templates/styleguide/index.tsx
@@ -1,6 +1,20 @@
 import { Index2 } from './index2'
-import { FooBar, FooBarTag4 } from './foo_bar'
-import * as Styled from './styled'
+import { FooBar, FooBarTag4 } from './_foo_bar'
+import styled, { css, keyframes, Keyframes } from 'styled-components'
+import { StyledTag4 } from './_styled_tag4'
+
+const hover = css`
+  &:hover {
+    color: ${({ theme }) => theme.colors.primary};
+    border-color: aqua;
+    box-shadow: -15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;
+  }
+`
+
+const prop = css`
+  font-size: 200%;
+  color: indigo;
+`
 
 const Styleguide = () => {
   return (
@@ -8,17 +22,72 @@ const Styleguide = () => {
       <Index2 />
       <FooBar />
       <FooBarTag4 />
-      <Styled.Title>Styleguide</Styled.Title>
-      <div css={ Styled.prop }>This is css prop</div>
-      <Styled.Tag1>Cool Styles</Styled.Tag1>
-      <Styled.Tag2>
+      <StyledTitle>Styleguide</StyledTitle>
+      <div css={ prop }>This is css prop</div>
+      <StyledTag1>Cool Styles</StyledTag1>
+      <StyledTag2>
         With <code>:hover</code>.
-      </Styled.Tag2>
-      <Styled.Tag3 animation={ Styled.bounce }>Let's bounce.</Styled.Tag3>
-      <Styled.Tag3 animation={ Styled.shake }>Let's shake.</Styled.Tag3>
-      <Styled.Tag4>This is Styled.Tag4</Styled.Tag4>
+      </StyledTag2>
+      <StyledTag3 animation={ bounce }>Let&apos;s bounce.</StyledTag3>
+      <StyledTag3 animation={ shake }>Let&apos;s shake.</StyledTag3>
+      <StyledTag4>This is Styled.Tag4</StyledTag4>
     </>
   )
 }
 
 export default Styleguide
+
+const StyledTitle = styled.h1`
+  font-size: 4rem;
+  margin: 0;
+  color: ${({ theme }) => theme.colors.primary};
+`
+
+const base = css`
+  background-color: white;
+  color: cornflowerblue;
+  border: 1px solid lightgreen;
+  border-right: none;
+  border-bottom: none;
+  box-shadow: 5px 5px 0 0 lightgreen, 10px 10px 0 0 lightyellow;
+  transition: all 0.1s linear;
+  margin: 0 3rem 3rem;
+  padding: 1rem 0.5rem;
+`
+
+const bounce = keyframes`
+  from {
+    transform: scale(1.01);
+  }
+  to {
+    transform: scale(0.99);
+  }
+`
+
+const shake = keyframes`
+  10%, 90% { transform: translateY(-1px); }
+  20%, 80% { transform: translateY(2px); }
+  30%, 50%, 70% { transform: translateY(-4px); }
+  40%, 60% { transform: translateY(4px); }
+`
+
+const StyledTag1 = styled.div`
+  ${base};
+`
+
+const StyledTag2 = styled.div`
+  ${base};
+  ${hover};
+  & code {
+    background-color: linen;
+  }
+`
+
+const StyledTag3 = styled.div<{ animation: Keyframes }>`
+  ${base};
+  ${hover};
+  & code {
+    background-color: linen;
+  }
+  animation: ${({ animation }) => animation} 0.2s infinite ease-in-out alternate;
+`
diff --git a/components/templates/styleguide/styled.ts b/components/templates/styleguide/styled.ts
deleted file mode 100644
index e3695810..00000000
--- a/components/templates/styleguide/styled.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import styled, { css, keyframes, Keyframes } from 'styled-components'
-
-export * from './_styled_tag4'
-
-export const Title = styled.h1`
-  font-size: 4rem;
-  margin: 0;
-  color: ${({ theme }) => theme.colors.primary};
-`
-
-const base = css`
-  background-color: white;
-  color: cornflowerblue;
-  border: 1px solid lightgreen;
-  border-right: none;
-  border-bottom: none;
-  box-shadow: 5px 5px 0 0 lightgreen, 10px 10px 0 0 lightyellow;
-  transition: all 0.1s linear;
-  margin: 0 3rem 3rem;
-  padding: 1rem 0.5rem;
-`
-
-const hover = css`
-  &:hover {
-    color: ${({ theme }) => theme.colors.primary};
-    border-color: aqua;
-    box-shadow: -15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;
-  }
-`
-
-export const prop = css`
-  font-size: 200%;
-  color: indigo;
-`
-
-export const bounce = keyframes`
-  from {
-    transform: scale(1.01);
-  }
-  to {
-    transform: scale(0.99);
-  }
-`
-
-export const shake = keyframes`
-  10%, 90% { transform: translateY(-1px); }
-  20%, 80% { transform: translateY(2px); }
-  30%, 50%, 70% { transform: translateY(-4px); }
-  40%, 60% { transform: translateY(4px); }
-`
-
-export const Tag1 = styled.div`
-  ${base};
-`
-
-export const Tag2 = styled.div`
-  ${base};
-  ${hover};
-  & code {
-    background-color: linen;
-  }
-`
-
-export const Tag3 = styled.div<{ animation: Keyframes }>`
-  ${base};
-  ${hover};
-  & code {
-    background-color: linen;
-  }
-  animation: ${({ animation }) => animation} 0.2s infinite ease-in-out alternate;
-`
diff --git a/components/templates/styleguide/styled_foo_bar.ts b/components/templates/styleguide/styled_foo_bar.ts
deleted file mode 100644
index f7ee9d78..00000000
--- a/components/templates/styleguide/styled_foo_bar.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import styled, { css } from 'styled-components'
-import * as Styled from './_styled_tag4'
-
-export const FooBar = styled.div`
-  color: red;
-`
-
-export const FooBarTag4 = styled(Styled.Tag4)`
-  font-weight: bold;
-`
-
-export const fooBar = css`
-  font-size: 200%;
-`