diff --git a/packages/front/public/discussion.png b/packages/front/public/discussion.png
new file mode 100644
index 0000000..f109c80
Binary files /dev/null and b/packages/front/public/discussion.png differ
diff --git a/packages/front/public/ellipse.svg b/packages/front/public/ellipse.svg
new file mode 100644
index 0000000..e85d3f9
--- /dev/null
+++ b/packages/front/public/ellipse.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 500 500"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" id="blobSvg">
+    <path id="blob" d="M416.5,343.5Q358,437,255.5,427.5Q153,418,112.5,334Q72,250,99,143Q126,36,240.5,52.5Q355,69,415,159.5Q475,250,416.5,343.5Z" fill="#faf096"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/front/public/icons/g-logo.png b/packages/front/public/icons/g-logo.png
new file mode 100644
index 0000000..3f52a66
Binary files /dev/null and b/packages/front/public/icons/g-logo.png differ
diff --git a/packages/front/public/logo_black.png b/packages/front/public/logo_black.png
new file mode 100644
index 0000000..c9d0a3a
Binary files /dev/null and b/packages/front/public/logo_black.png differ
diff --git a/packages/front/src/pages/login.tsx b/packages/front/src/pages/login.tsx
index 01e33eb..f74bcf9 100644
--- a/packages/front/src/pages/login.tsx
+++ b/packages/front/src/pages/login.tsx
@@ -1,8 +1,14 @@
 import React, { useEffect, FC, useReducer } from "react"
 import { useRouter } from "next/router"
+// import Image from "next/image"
 import authReducer from "@reducers/authReducer"
 import { useAuth } from "@hooks/useAuth"
 import { authUseCase } from "@useCase"
+import { useWindowSize } from "@hooks/useWindowSize"
+import dynamic from "next/dynamic"
+const Image = dynamic(() => import("next/image"), {
+  ssr: false,
+})
 
 const Login: FC = () => {
   const router = useRouter()
@@ -11,6 +17,7 @@ const Login: FC = () => {
     authReducer.initialState,
   )
   const user = useAuth()
+  const { width, height } = useWindowSize()
 
   useEffect(() => {
     user && router.push("/dashboard")
@@ -26,14 +33,69 @@ const Login: FC = () => {
   }
 
   return (
-    <div>
-      <button
-        onClick={logIn}
-        className="px-4 py-2 text-center text-black border-2 border-gray-400 border-opacity-25 rounded bg-blue-50 hover:bg-gray-200"
-      >
-        googleアカウントでログイン
-      </button>
-    </div>
+    <>
+      <div className="fixed z-0 -top-52 -left-40">
+        <Image
+          src="/ellipse.svg"
+          width={width * 0.4}
+          height={width * 0.35}
+          className="z-0 w-full object-fit"
+        />
+      </div>
+      <div className="fixed z-0 transform rotate-90 -bottom-52 -left-40">
+        <Image
+          src="/ellipse.svg"
+          width={width * 0.4}
+          height={width * 0.35}
+          className="z-0 w-full object-fit"
+        />
+      </div>
+      <div className="fixed z-0 transform rotate-90 top-1/4 -right-44">
+        <Image
+          src="/ellipse.svg"
+          width={width * 0.4}
+          height={width * 0.35}
+          className="z-0 w-full object-fit"
+        />
+      </div>
+      <div className="relative flex-col h-screen px-10">
+        <div className="z-10 h-2/5">
+          <h1 className="pt-24 text-4xl font-medium text-gray-600 pl-28 font-monob">
+            あなたの音声を付箋に。
+          </h1>
+          <div className="relative z-10 pl-72">
+            <Image
+              src="/logo_black.png"
+              width={400}
+              height={160}
+              className="w-full object-fit"
+            />
+          </div>
+        </div>
+        <div className="relative h-3/5" style={{ width: "70%" }}>
+          <Image
+            src="/discussion.png"
+            width={width * 0.7}
+            height={height * 0.6}
+            className="w-full object-fit"
+          />
+        </div>
+        <button
+          onClick={logIn}
+          className="absolute py-2 pl-3 pr-8 text-center text-blue-500 bg-white border-2 border-blue-400 rounded-full hover:bg-gray-200 border-opacity-15 top-1/2 right-32"
+        >
+          <div className="flex items-center">
+            <Image
+              src="/icons/g-logo.png"
+              width={30}
+              height={30}
+              className="w-full object-fit"
+            />
+            <p className="pl-2">Googleアカウントでログイン</p>
+          </div>
+        </button>
+      </div>
+    </>
   )
 }