diff --git a/src/components/Signin.css b/src/components/Signin.css
index d6c1acb..aee274e 100644
--- a/src/components/Signin.css
+++ b/src/components/Signin.css
@@ -10,7 +10,7 @@
   }
 }
 
-#signin {
+.signin {
   min-height: 30vh;
   max-height: 200px;
   background-color: var(--darker-color);
@@ -27,7 +27,7 @@
   animation-timing-function: ease;
 }
 
-#signin-container {
+.signin-container {
   display: flex;
   justify-content: center;
   gap: 20px;
@@ -43,7 +43,7 @@
   border: 3px solid var(--highlight-color);
 }
 
-#signin-exit {
+.signin-exit {
   position: absolute;
   top: 1em;
   right: 1em;
diff --git a/src/components/Signin.tsx b/src/components/Signin.tsx
index c52801c..77c60de 100644
--- a/src/components/Signin.tsx
+++ b/src/components/Signin.tsx
@@ -48,9 +48,9 @@ function Signin({ showSignin, setShowSignin }: Props) {
 
   return (
     showSignin && (
-      <div id="signin">
+      <div className="signin">
         <button
-          id="signin-exit"
+          className="signin-exit"
           onClick={() => {
             setShowSignin(false);
           }}
@@ -62,7 +62,7 @@ function Signin({ showSignin, setShowSignin }: Props) {
         ) : (
           <h3>Sign in to comment</h3>
         )}
-        <div id="signin-container">
+        <div className="signin-container">
           <img
             src="/google_logo.png"
             alt="google sign-on"