diff --git a/src/App.jsx b/src/App.jsx
index 7895b55..f9a349a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,6 +4,7 @@ import { InlineStyle } from './components/InlineStyle';
 import { CssModules } from './components/CssModules';
 import { StyledJsx } from './components/StyledJsx';
 import { StyledComponents } from './components/StyledComponents';
+import { Emotion } from './components/Emotion';
 
 export const App = () => {
   return (
@@ -12,6 +13,7 @@ export const App = () => {
       <CssModules />
       <StyledJsx />
       <StyledComponents />
+      <Emotion />
     </div>
   );
 }
diff --git a/src/components/Emotion.jsx b/src/components/Emotion.jsx
new file mode 100644
index 0000000..73e69d5
--- /dev/null
+++ b/src/components/Emotion.jsx
@@ -0,0 +1,39 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx, css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+export const Emotion = () => {
+  const container = css`
+    align-items: center;
+    border: solid 2px;
+    border-radius: 20px;
+    display: flex;
+    justify-content: space-around;
+    margin: 8px;
+    padding: 8px;
+  `;
+
+  const title = css({
+    color: '#3d84d8',
+    margin: '0'
+  });
+
+  return (
+    <div css={container}>
+      <p css={title}>- Emotion -</p>
+      <SButton>FIGHT!!</SButton>
+    </div>
+  );
+}
+
+const SButton = styled.button`
+  background-color: #abedd8;
+  border: none;
+  border-radius: 8px;
+  padding: 8px;
+  &:hover {
+    background-color: #46cdcf;
+    color: #fff;
+  }
+`;