diff --git a/apps/react-world/src/pages/settings.tsx b/apps/react-world/src/pages/settings.tsx
new file mode 100644
index 00000000..bc2ab484
--- /dev/null
+++ b/apps/react-world/src/pages/settings.tsx
@@ -0,0 +1,104 @@
+export const SettingsPage = () => {
+  return (
+    <>
+      <nav className="navbar navbar-light">
+        <div className="container">
+          <a className="navbar-brand" href="/">
+            conduit
+          </a>
+          <ul className="nav navbar-nav pull-xs-right">
+            <li className="nav-item">
+              <a className="nav-link active" href="/">
+                Home
+              </a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link" href="/login">
+                Sign in
+              </a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link" href="/register">
+                Sign up
+              </a>
+            </li>
+          </ul>
+        </div>
+      </nav>
+
+      <div className="settings-page">
+        <div className="container page">
+          <div className="row">
+            <div className="col-md-6 offset-md-3 col-xs-12">
+              <h1 className="text-xs-center">Your Settings</h1>
+
+              <ul className="error-messages">
+                <li>That name is required</li>
+              </ul>
+
+              <form>
+                <fieldset>
+                  <fieldset className="form-group">
+                    <input
+                      className="form-control"
+                      type="text"
+                      placeholder="URL of profile picture"
+                    />
+                  </fieldset>
+                  <fieldset className="form-group">
+                    <input
+                      className="form-control form-control-lg"
+                      type="text"
+                      placeholder="Your Name"
+                    />
+                  </fieldset>
+                  <fieldset className="form-group">
+                    <textarea
+                      className="form-control form-control-lg"
+                      rows="8"
+                      placeholder="Short bio about you"
+                    ></textarea>
+                  </fieldset>
+                  <fieldset className="form-group">
+                    <input
+                      className="form-control form-control-lg"
+                      type="text"
+                      placeholder="Email"
+                    />
+                  </fieldset>
+                  <fieldset className="form-group">
+                    <input
+                      className="form-control form-control-lg"
+                      type="password"
+                      placeholder="New Password"
+                    />
+                  </fieldset>
+                  <button className="btn btn-lg btn-primary pull-xs-right">
+                    Update Settings
+                  </button>
+                </fieldset>
+              </form>
+              <hr />
+              <button className="btn btn-outline-danger">
+                Or click here to logout.
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <footer>
+        <div className="container">
+          <a href="/" className="logo-font">
+            conduit
+          </a>
+          <span className="attribution">
+            An interactive learning project from{' '}
+            <a href="https://thinkster.io">Thinkster</a>. Code &amp; design
+            licensed under MIT.
+          </span>
+        </div>
+      </footer>
+    </>
+  );
+};
diff --git a/apps/react-world/src/routes/Routes.tsx b/apps/react-world/src/routes/Routes.tsx
index 6ff4a866..2e1fa9a7 100644
--- a/apps/react-world/src/routes/Routes.tsx
+++ b/apps/react-world/src/routes/Routes.tsx
@@ -4,6 +4,7 @@ import { LoginPage } from '../pages/login';
 import { RegisterPage } from '../pages/register';
 import { ArticlePage } from '../pages/article';
 import { EditorPage } from '../pages/editor';
+import { SettingsPage } from '../pages/settings';
 
 const router = createBrowserRouter([
   {
@@ -26,6 +27,10 @@ const router = createBrowserRouter([
     path: '/article/:slug',
     element: <ArticlePage />,
   },
+  {
+    path: '/settings',
+    element: <SettingsPage />,
+  },
 ]);
 
 export const Routes = () => {
diff --git a/templates/settings.html b/templates/settings.html
deleted file mode 100644
index d6acca9e..00000000
--- a/templates/settings.html
+++ /dev/null
@@ -1,94 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="favicon" href="/assets/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link
-      href="/styles/ionicons.min.css"
-      rel="stylesheet"
-      type="text/css"
-    />
-    <link
-      href="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic"
-      rel="stylesheet"
-      type="text/css"
-    />
-    <link rel="stylesheet" href="/styles/main.css" />
-    <title>Conduit</title>
-  </head>
-  <body>
-    <nav class="navbar navbar-light">
-      <div class="container">
-        <a class="navbar-brand" href="/">conduit</a>
-        <ul class="nav navbar-nav pull-xs-right">
-          <li class="nav-item">
-            <!-- Add "active" class when you're on that page" -->
-            <a class="nav-link active" href="/">Home</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="/login">Sign in</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="/register">Sign up</a>
-          </li>
-        </ul>
-      </div>
-    </nav>
-    
-    <div class="settings-page">
-      <div class="container page">
-        <div class="row">
-          <div class="col-md-6 offset-md-3 col-xs-12">
-            <h1 class="text-xs-center">Your Settings</h1>
-    
-            <ul class="error-messages">
-              <li>That name is required</li>
-            </ul>
-    
-            <form>
-              <fieldset>
-                <fieldset class="form-group">
-                  <input class="form-control" type="text" placeholder="URL of profile picture" />
-                </fieldset>
-                <fieldset class="form-group">
-                  <input class="form-control form-control-lg" type="text" placeholder="Your Name" />
-                </fieldset>
-                <fieldset class="form-group">
-                  <textarea
-                    class="form-control form-control-lg"
-                    rows="8"
-                    placeholder="Short bio about you"
-                  ></textarea>
-                </fieldset>
-                <fieldset class="form-group">
-                  <input class="form-control form-control-lg" type="text" placeholder="Email" />
-                </fieldset>
-                <fieldset class="form-group">
-                  <input
-                    class="form-control form-control-lg"
-                    type="password"
-                    placeholder="New Password"
-                  />
-                </fieldset>
-                <button class="btn btn-lg btn-primary pull-xs-right">Update Settings</button>
-              </fieldset>
-            </form>
-            <hr />
-            <button class="btn btn-outline-danger">Or click here to logout.</button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <footer>
-      <div class="container">
-        <a href="/" class="logo-font">conduit</a>
-        <span class="attribution">
-          An interactive learning project from <a href="https://thinkster.io">Thinkster</a>. Code &amp;
-          design licensed under MIT.
-        </span>
-      </div>
-    </footer>
-  </body>
-</html>
\ No newline at end of file