diff --git a/src/App.css b/src/App.css
index 70e8f87..f1452e2 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,7 +3,7 @@
 }
 
 .App-logo {
-  height: 40vmin;
+  height: 3cm;
   pointer-events: none;
 }
 
@@ -19,7 +19,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
+  font-size: xx-large;
   color: white;
 }
 
diff --git a/src/App.js b/src/App.js
index 8653aec..3aa2b36 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,22 +1,55 @@
-import logo from './logo.svg';
-import './App.css';
+import logo from "./logo.svg";
+import "./App.css";
+import { useState } from "react";
 
 function App() {
+  let [count1, setCount] = useState(0);
+  let [count2, badCount] = useState(0);
+
   return (
     <div className="App">
-      <header className="App-header bg-wed">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p className="text-wed-dark">
-          Welcome to <code>WED</code> Community.
+      <header className="App-header bg-pastel-green">
+        <img
+          src="https://png.pngtree.com/png-vector/20240525/ourlarge/pngtree-person-a-logo-with-a-person-in-it-vector-png-image_6930827.png"
+          className="App-logo"
+          alt="logo"
+        />
+        <p className="text-pastel-purple underline">
+          <code>WED</code> Communityへようこそ
         </p>
         <a
-          className="text-wed-dark underline"
+          className="text-pastel-red underline "
           href="https://wed.company/"
           target="_blank"
           rel="noopener noreferrer"
         >
-          Learn WED
+          WEDについて→
+        </a>
+        <a href="/newpage" className="text-pastel-red underline">
+          コミュニティーページ
         </a>
+        <p
+          className="text-pastel-red text-2xl bg-pastel-purple p-1 m-2 rounded-lg hover:text-4xl"
+          onClick={() => {
+            setCount(count1 + 1);
+          }}
+        >
+          👍{count1}
+        </p>
+        <p
+          className="text-pastel-red text-2xl bg-pastel-purple p-1 m-2 rounded-lg hover:text-4xl"
+          onClick={() => {
+            badCount(count2 + 1);
+          }}
+        >
+          👎{count2}
+        </p>
+        <p
+          className="text-pastel-red text-2xl bg-pastel-purple"
+          onclick={() => {}}
+        >
+          ボタンを押した回数:{count1 + count2}
+        </p>
       </header>
     </div>
   );
diff --git a/src/NewPage.js b/src/NewPage.js
new file mode 100644
index 0000000..86c8c56
--- /dev/null
+++ b/src/NewPage.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+function NewPage() {
+  return (
+    <div className="NewPage">
+      <h1>コミュニティーページ</h1>
+      <a>10月のイベントについて</a>
+    </div>
+  );
+}
+export default NewPage;
diff --git a/src/index.js b/src/index.js
index f059a20..d308bc5 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,16 +1,17 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import NewPage from "./NewPage";
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<App />} />
+        <Route path="/newpage" element={<NewPage />} />
       </Routes>
     </BrowserRouter>
   </React.StrictMode>
diff --git a/tailwind.config.js b/tailwind.config.js
index 7780c81..472dadc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,16 +1,15 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./src/**/*.{js,jsx}",
-  ],
+  content: ["./src/**/*.{js,jsx}"],
   theme: {
     colors: {
-      wed: '#D2D2C6',
-      'wed-dark': '#6D695D',
-    },
-    extend: {
+      wed: "#D2D2C6",
+      "wed-dark": "#6D695D",
+      "pastel-red": "#ff8484",
+      "pastel-purple": "#9966ff",
+      "pastel-green": "#008000",
     },
+    extend: {},
   },
   plugins: [],
-}
-
+};