diff --git a/frontend/src/components/Article/ArticleDetail/ArticleDetail.jsx b/frontend/src/components/Article/ArticleDetail/ArticleDetail.jsx
new file mode 100644
index 0000000..bd277ec
--- /dev/null
+++ b/frontend/src/components/Article/ArticleDetail/ArticleDetail.jsx
@@ -0,0 +1,32 @@
+import { Link } from "react-router-dom";
+import styles from './ArticleDetail.module.css'
+import ArticleDetailAnswer from "./ArticleDetailAnswer/ArticleDetailAnswer";
+
+export default function ArticleDetail() {
+
+ const title = '헷갈리는게 있어요';
+ const author = '이재용';
+ const content = 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis sed dolorem vitae?';
+ return (
+ <>
+
+ >
+ )
+}
\ No newline at end of file
diff --git a/frontend/src/components/Article/ArticleDetail/ArticleDetail.module.css b/frontend/src/components/Article/ArticleDetail/ArticleDetail.module.css
new file mode 100644
index 0000000..0ce9d5a
--- /dev/null
+++ b/frontend/src/components/Article/ArticleDetail/ArticleDetail.module.css
@@ -0,0 +1,38 @@
+.articleDetail {
+ width: 100%;
+ background-color: var(--background-default);
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+.articleDetail > * {
+ padding-bottom: 40px;
+}
+
+.backButton {
+ display: flex;
+ color: var(--text-color-secondary);
+ flex-wrap: nowrap;
+ line-height: 1.2;
+ font-weight: 400;
+ font-size: 20px;
+ padding-bottom: 8px;
+}
+
+.backText {
+ padding-left: 4px;
+}
+
+.title {
+ font-size: 32px;
+ line-height: 1.2;
+ font-weight: 800;
+}
+
+.author {
+ font-size: 14px;
+ font-weight: 200;
+ line-height: 1.4;
+ color: var(--text-color-secondary);
+}
\ No newline at end of file