diff --git a/src/components/Search.jsx b/src/components/Search.jsx
index f38657e81cee236018a8db5d2ee8a00e651d2dd1..edaaf4c37dd5996166bc50d23ffba874a270842f 100644
--- a/src/components/Search.jsx
+++ b/src/components/Search.jsx
@@ -42,7 +42,9 @@ export default function Search(props) {
       </h1>
       <ThreadList thread={threads} />
       {totalItems == 0 && (
-        <p>No threads with keyword "{searchParam}" found.</p>
+        <div className="noThreadsMessage">
+          <p>No threads with keyword "{searchParam}" found.</p>
+        </div>
       )}
       {totalItems != 0 && (
         <div className="paginationContainer">
diff --git a/src/components/profile/Profile.jsx b/src/components/profile/Profile.jsx
index bd234645388b789a833d0ae8061233bf08064d17..a2a49453e6e12439ff1acce75f8b4e4a4a9ae524 100644
--- a/src/components/profile/Profile.jsx
+++ b/src/components/profile/Profile.jsx
@@ -54,7 +54,7 @@ export default function Profile(props) {
           <b>Profile</b>
         </h1>
       </div>
-      <div className="profile_section">
+      <div className="profileSection">
         <div className="userIcon">
           {user.picture == 'None' ? (
             <i className="far fa-user-circle" />
@@ -69,8 +69,8 @@ export default function Profile(props) {
           <Button text="Edit Profile" color="orange" url="profile/update" />
         )}
       </div>
-      <div className="my_threads_section">
-        <div className="sub_header_my_threads">
+      <div className="myThreadsSection">
+        <div className="subHeaderMyThreads">
           <h3>
             <b>{isUser ? 'Your' : user.username}'s threads</b>
           </h3>
diff --git a/src/components/profile/UpdateProfileForm.jsx b/src/components/profile/UpdateProfileForm.jsx
index 2c61ff0602a6a3c764d30d8976b3d29a4b94a2bb..f3a8702d88fd21baab5ea1dbc2585645de592cf7 100644
--- a/src/components/profile/UpdateProfileForm.jsx
+++ b/src/components/profile/UpdateProfileForm.jsx
@@ -44,7 +44,7 @@ export default function FormCreateThread(props) {
   };
 
   return (
-    <div className="formContainer">
+    <div className="formComponentContainer">
       <div className="back" onClick={back}>
         <i className="fas fa-angle-left"></i>
         <h5>Back</h5>
@@ -62,7 +62,7 @@ export default function FormCreateThread(props) {
         </div>
       )}
       <form onSubmit={handleSubmit}>
-        <div className="form_container">
+        <div className="formContainer">
           <label htmlFor="title">Username</label>
           <input
             type="text"
diff --git a/src/components/thread/CommentList.jsx b/src/components/thread/CommentList.jsx
index ff1726765e6f448142b0bb52f96f6eb1a0a52eb6..2d27a1da467cbf579b5beafd1a78bb8aa42c380f 100644
--- a/src/components/thread/CommentList.jsx
+++ b/src/components/thread/CommentList.jsx
@@ -4,7 +4,7 @@ export default function CommentList(props) {
   return (
     <div>
       {props.comment.map((value) => (
-        <div id="threadComment">
+        <div className="threadComment">
           <Post type="comment" content={value} />
         </div>
       ))}
diff --git a/src/components/thread/CreateThread.jsx b/src/components/thread/CreateThread.jsx
index 32735912f9dfc01b43fde63971bd70161180d506..11870d537a3fbc3446acef80772f7d9a36ff028c 100644
--- a/src/components/thread/CreateThread.jsx
+++ b/src/components/thread/CreateThread.jsx
@@ -62,7 +62,7 @@ export default function ListThreads(props) {
   };
 
   return (
-    <div className="formContainer">
+    <div className="formComponentContainer">
       <div className="back" onClick={back}>
         <i className="fas fa-angle-left"></i>
         <h5>Back</h5>
@@ -72,7 +72,7 @@ export default function ListThreads(props) {
           <b>Create a Thread</b>
         </h1>
       </div>
-      <div className="form_section">
+      <div className="formSection">
         <div>
           {message && (
             <div>
@@ -82,7 +82,7 @@ export default function ListThreads(props) {
             </div>
           )}
           <form onSubmit={handleSubmit}>
-            <div className="form_container">
+            <div className="formContainer">
               <label for="title">Title</label>
               <input
                 type="text"
diff --git a/src/components/thread/EditComment.jsx b/src/components/thread/EditComment.jsx
index 7672d49e938b712f75244ea53c958bfacb8c7f8b..5c60fba0f8660596b03e5993ce4379ebf8a01eec 100644
--- a/src/components/thread/EditComment.jsx
+++ b/src/components/thread/EditComment.jsx
@@ -61,7 +61,7 @@ export default function EditComment(props) {
   };
 
   return (
-    <div className="formContainer">
+    <div className="formComponentContainer">
       <div className="back" onClick={back}>
         <i className="fas fa-angle-left"></i>
         <h5>Back</h5>
@@ -71,7 +71,7 @@ export default function EditComment(props) {
           <b>Edit a Comment</b>
         </h1>
       </div>
-      <div className="form_section">
+      <div className="formSection">
         <div>
           {message && (
             <div>
@@ -81,7 +81,7 @@ export default function EditComment(props) {
             </div>
           )}
           <form onSubmit={handleSubmit}>
-            <div className="form_container">
+            <div className="formContainer">
               <label for="body">Body</label>
               <textarea
                 className="body"
diff --git a/src/components/thread/EditThread.jsx b/src/components/thread/EditThread.jsx
index 2b8d6082d9254bcb995844e817688e344ab9dd7e..93725bd1140f2067be07eac02856c14154d65de2 100644
--- a/src/components/thread/EditThread.jsx
+++ b/src/components/thread/EditThread.jsx
@@ -89,7 +89,7 @@ export default function EditThread(props) {
   };
 
   return (
-    <div className="formContainer">
+    <div className="formComponentContainer">
       <div className="back" onClick={back}>
         <i className="fas fa-angle-left"></i>
         <h5>Back</h5>
@@ -99,7 +99,7 @@ export default function EditThread(props) {
           <b>Edit a Thread</b>
         </h1>
       </div>
-      <div className="form_section">
+      <div className="formSection">
         <div>
           {message && (
             <div>
@@ -109,7 +109,7 @@ export default function EditThread(props) {
             </div>
           )}
           <form onSubmit={handleSubmit}>
-            <div className="form_container">
+            <div className="formContainer">
               <label for="title">Title</label>
               <input
                 type="text"
diff --git a/src/components/thread/ListThreads.jsx b/src/components/thread/ListThreads.jsx
index 1a42add65d011ab04f2f61e5c7185a89f5cbd45a..665c5ef7c3e7e6d6574e20a7676bdc143618b99e 100644
--- a/src/components/thread/ListThreads.jsx
+++ b/src/components/thread/ListThreads.jsx
@@ -16,8 +16,8 @@ export default function ListThreads(props) {
       </div>
 
       {props.isRecent ? (
-        <div className="list_threads_section">
-          <div className="sub_header_list_threads">
+        <div className="listThreadsSection">
+          <div className="subHeaderListThreads">
             <div className="tab">
               <Link to="/page/1" style={{ textDecoration: 'none' }}>
                 <h3 className="active">Recent</h3>
@@ -36,8 +36,8 @@ export default function ListThreads(props) {
           />
         </div>
       ) : (
-        <div className="list_threads_section">
-          <div className="sub_header_list_threads">
+        <div className="listThreadsSection">
+          <div className="subHeaderListThreads">
             <div className="tab">
               <Link to="/page/1" style={{ textDecoration: 'none' }}>
                 <h3>Recent</h3>
diff --git a/src/components/thread/Post.jsx b/src/components/thread/Post.jsx
index 4fef77907ce5bf8052d1e13465c134e3c4f6fc71..b8e8d0e983ada8f4a2f6260ae9a53f3ccca6a2aa 100644
--- a/src/components/thread/Post.jsx
+++ b/src/components/thread/Post.jsx
@@ -85,9 +85,9 @@ export default function Post(props) {
   const time = translate(content.inserted_at);
 
   return (
-    <div id="post">
-      <div id="postHeader">
-        <div id="headerData">
+    <div className="post">
+      <div className="postHeader">
+        <div className="headerData">
           <div className="userImage">
             {user.picture == 'None' ? (
               <i className="far fa-user-circle" />
@@ -112,49 +112,38 @@ export default function Post(props) {
 
         
             {content.user_id == AuthService.getCurrentUserId() && (
-              <div id="headerButton">
-                <div className="buttonContainer">
+              <div className="headerButton">
+                <div className="postButtonContainer">
                   {checkType == 'threads' && (
-                    <div className="threadButtons">
                       <Button
                         type="button"
                         text="Edit"
                         color="none-green"
                         url={`thread/edit/${content.id}`}
                       />
-                      <button
-                        type="button"
-                        className="deleteButton"
-                        onClick={() => deletePost(user.username)}
-                      >
-                        Delete
-                      </button>
-                    </div>
                   )}
                   {checkType == 'post' && (
-                    <div classname="commentDeleteButton">
                       <Button
                         type="button"
                         text="Edit"
                         color="none-green"
                         url={`comment/edit/${content.id}`}
                       />
-                      <button
-                        type="button"
-                        className="deleteButton"
-                        onClick={() => deletePost(user.username)}
-                      >
-                        Delete
-                      </button>
-                    </div>
                   )}
+                  <button
+                    type="button"
+                    className="deleteButton"
+                    onClick={() => deletePost(user.username)}
+                  >
+                    Delete
+                  </button>
                 </div>
             </div>
             )}
       </div>
-      <div id="postContent">
-        {props.type == 'thread' && <h1 id="judul">{content.title}</h1>}
-        <p id="isi">{contents}</p>
+      <div className="postContent">
+        {props.type == 'thread' && <h1 className="postTitle">{content.title}</h1>}
+        <p className="postBody">{contents}</p>
         <div className="likeSection">
           {loggedIn && (
             <button className="likeButton" onClick={handleLike}>
diff --git a/src/components/thread/PreviewThread.jsx b/src/components/thread/PreviewThread.jsx
index 81da8badf361926a9a370b933cd1d3c70b0de5a0..7891c1a477b054d18f59baad33a189eefb70b623 100644
--- a/src/components/thread/PreviewThread.jsx
+++ b/src/components/thread/PreviewThread.jsx
@@ -6,14 +6,14 @@ export default function PreviewThread(props) {
   const { content } = props;
   const time = translate(content.inserted_at);
   return (
-    <div id="threadCard">
-      <div id="threadCardHeader">
-        <h2 id="judul">
+    <div className="threadCard">
+      <div className="threadCardHeader">
+        <h2 className="previewThreadTitle">
           <b>{content.title}</b>
         </h2>
       </div>
-      <p id="topic">{content.topic_name}</p>
-      <div id="threadCardContent">
+      <p className="previewThreadTopic">{content.topic_name}</p>
+      <div className="threadCardContent">
         <p>
           By{' '}
           <Link to={`/profile/${content.username}/1`}>{content.username}</Link>{' '}
diff --git a/src/components/thread/RecentThreads.jsx b/src/components/thread/RecentThreads.jsx
index afb89257e5467e0e2053f85381e9bf14b4cc5c70..ea47f67c793f39d2002605140d9ce1d2874b9081 100644
--- a/src/components/thread/RecentThreads.jsx
+++ b/src/components/thread/RecentThreads.jsx
@@ -35,7 +35,9 @@ export default function RecentThreads(props) {
   return (
     <div className="recentThreads">
       {totalItems == 0 ? (
-        <p>There is no threads yet.</p>
+        <div className="noThreadsMessage">
+          <p>There is no threads yet.</p>
+        </div>
       ) : (
         <Fragment>
           <ThreadList thread={threads} />
diff --git a/src/components/thread/Thread.jsx b/src/components/thread/Thread.jsx
index b22a2ecd88d471d3eaf4e63b7c78427c4b903d16..d80aa12adf172aa39aae04f91170988b889acb26 100644
--- a/src/components/thread/Thread.jsx
+++ b/src/components/thread/Thread.jsx
@@ -109,10 +109,10 @@ export default function Thread(props) {
       </div>
 
       {loggedIn && (
-        <div id="addCommentSection">
+        <div className="addCommentSection">
           <h3>Write a Comment</h3>
           <form onSubmit={handleSubmit}>
-            <div className="commentFormContainer">
+            <div className="commentformComponentContainer">
               <textarea
                 className="commentBox"
                 placeholder="Write your comment here"
@@ -121,8 +121,7 @@ export default function Thread(props) {
               />
               <div>
                 <button
-                  className="submitComment"
-                  id="addCommentButton"
+                  className="submitComment addCommentButton"
                   type="submit"
                 >
                   Post Comment
@@ -142,8 +141,8 @@ export default function Thread(props) {
         <div>
           <CommentList
             comment={comment}
-            thread_id={threadParm}
-            topic_id={topicParm}
+            thread_className={threadParm}
+            topic_className={topicParm}
           />
           <div className="paginationContainer">
             <Pagination
diff --git a/src/components/thread/TopThreads.jsx b/src/components/thread/TopThreads.jsx
index d86336c73733f301241908a0049e60b0ffedaeb4..c33b302b7f3d80641bda3b7b990f0045ca806107 100644
--- a/src/components/thread/TopThreads.jsx
+++ b/src/components/thread/TopThreads.jsx
@@ -34,7 +34,9 @@ export default function TopThreads(props) {
   return (
     <div className="topThreads">
       {totalItems == 0 ? (
-        <p>There is no threads yet.</p>
+        <div className="noThreadsMessage">
+          <p>There is no threads yet.</p>
+        </div>
       ) : (
         <Fragment>
           <ThreadList thread={threads} />
diff --git a/src/components/topic/CreateTopicForm.jsx b/src/components/topic/CreateTopicForm.jsx
index c10f3c47d8dbddd1d919b9b8d4b63196ad1ca34b..05cd452d83ab22918138ed5089b8d485061746df 100644
--- a/src/components/topic/CreateTopicForm.jsx
+++ b/src/components/topic/CreateTopicForm.jsx
@@ -40,7 +40,7 @@ export default function CreateTopicForm(props) {
   };
 
   return (
-    <div className="formContainer">
+    <div className="formComponentContainer">
       <div className="back" onClick={back}>
         <i className="fas fa-angle-left"></i>
         <h5>Back</h5>
@@ -58,7 +58,7 @@ export default function CreateTopicForm(props) {
         </div>
       )}
       <form onSubmit={handleSubmit}>
-        <div className="form_container">
+        <div className="formContainer">
           <label for="title">Topic Name</label>
           <input
             type="text"
diff --git a/src/components/topic/Topic.jsx b/src/components/topic/Topic.jsx
index 0103558f8fda743cd262ed0b6b6c2a124df0ee6f..32f3b67bebfe8439514a2de8c609c6989f74740b 100644
--- a/src/components/topic/Topic.jsx
+++ b/src/components/topic/Topic.jsx
@@ -70,7 +70,7 @@ export default function Topic(props) {
           </button>
         )}
       </div>
-      <div className="list_threads_section">
+      <div className="listThreadsSection">
         {totalItems == 0 ? (
           <p>There are no threads with this topic yet.</p>
         ) : (
diff --git a/src/components/topic/TopicList.jsx b/src/components/topic/TopicList.jsx
index d4b6708fd1d7345ddcbd6581f09c76d54239e845..f2df028d8b9f7ab84d7415704bf0dfcc19038c9e 100644
--- a/src/components/topic/TopicList.jsx
+++ b/src/components/topic/TopicList.jsx
@@ -20,7 +20,7 @@ export default function TopicList(props) {
 
   return (
     <div className="topicContainer">
-      <div className="headerTopic">
+      <div className="topicHeader">
         <h1>Topic List</h1>
         {loggedIn && isAdmin && (
           <Button text="Create Topic" color="orange" url="create/topic" />
@@ -42,7 +42,7 @@ export default function TopicList(props) {
                 >
                   <div className="topicCard">
                     <div className="topicCardHeader">
-                      <h2 id="judul">{value.name}</h2>
+                      <h2 className="topicTitle">{value.name}</h2>
                     </div>
                   </div>
                 </Link>
diff --git a/src/components/utility/Footer.jsx b/src/components/utility/Footer.jsx
index 64f10ad5b40810dab4b01053e83d85160b75e3fd..38b9b48d5e32c291f85f6e9ec766f7159a159c72 100644
--- a/src/components/utility/Footer.jsx
+++ b/src/components/utility/Footer.jsx
@@ -6,8 +6,8 @@ import '../../styles/utility/Footer.css';
 
 function Footer() {
   return (
-    <div id="footerContainer">
-      <div id="footer">
+    <div>
+      <div id="footerContainer">
         <div id="fasilkomLogo">
           <p>
             <b>Developed under</b>
diff --git a/src/styles/App.css b/src/styles/App.css
index 4ee9ec78163e4f4ab28f6a942ae26533438ff973..f2be0d1ca6502da1a4e72b5543ee9cf75e42d547 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -4,8 +4,34 @@ body {
     overflow-wrap: break-word;
 }
 
+.header {
+    margin-top: 36px;
+}
+
+.header h1 {
+    font-family: "DM Sans";
+    font-size: 36px;
+    color: #003F5A;
+    margin-bottom: 24px;
+}
+
 @media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
     p {
         font-size: 14px;
     }
-}
\ No newline at end of file
+
+    .header {
+        margin-top: 18px;
+        text-align: center;
+    }
+
+    .header h1 {
+        font-size: 28px;
+    }
+}
+
+@media only screen and (max-device-width : 320px) {
+    .header {
+        text-align: center;
+    }
+}
diff --git a/src/styles/LoginForm.css b/src/styles/LoginForm.css
index 1b81325377eeeaaba34662114af38e9441ae8b16..e4049ef404ab7e4837599c0406410aa35c955a1d 100644
--- a/src/styles/LoginForm.css
+++ b/src/styles/LoginForm.css
@@ -1,4 +1,4 @@
-.loginFormContainer {
+.loginformComponentContainer {
     margin-top: 36px;
     margin-left: 72px;
     margin-right: 72px;
@@ -11,20 +11,20 @@
     margin-bottom: 72px;
 }
 
-.loginFormContainer h1{
+.loginformComponentContainer h1{
     margin-bottom: 40px;
     text-align: center;
 }
 
-@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
-    .loginFormContainer {
+@media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
+    .loginformComponentContainer {
         margin-top: 24px;
         margin-left: 36px;
         margin-right: 36px;
         margin-bottom: 184px;
     }
 
-    .loginFormContainer h1{
+    .loginformComponentContainer h1{
         font-size: 28px;
         text-align: center;
     }
diff --git a/src/styles/Search.css b/src/styles/Search.css
index ab5180b04982a06f3c4f7aef95d3936e69d953d3..3a87a59d09d7add6f420f4ff3da67ecf81c12fae 100644
--- a/src/styles/Search.css
+++ b/src/styles/Search.css
@@ -22,7 +22,7 @@
         text-align: center;
     }
 
-    .searchResultContainer p{
+    .noThreadsMessage p{
         text-align: center;
     }
 }
\ No newline at end of file
diff --git a/src/styles/profile/Profile.css b/src/styles/profile/Profile.css
index e8db3e72d60bb19e88f7d0d96c7a7cbb01644897..83e9912c764e274573779c5d42f5aa41a0e9d4ea 100644
--- a/src/styles/profile/Profile.css
+++ b/src/styles/profile/Profile.css
@@ -6,27 +6,27 @@
     margin-bottom: 72px;
 }
 
-.profile_section {
+.profileSection {
     display: flex;
     flex-direction: column;
     margin-top: 36px;
     align-items: center;
 }
 
-.profile_section h2 {
+.profileSection h2 {
     font-family: "DM Sans";
     font-size: 20px;
     color: #000000;
     margin-top: 8px;
 }
 
-.my_threads_section {
+.myThreadsSection {
     display: flex;
     flex-direction: column;
     margin-top: 56px;
 }
 
-.sub_header_my_threads {
+.subHeaderMyThreads {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -37,7 +37,7 @@
     word-wrap: break-word;
 }
 
-.sub_header_my_threads h3 {
+.subHeaderMyThreads h3 {
     font-family: "DM Sans";
     font-size: 20px;
     color: #DE6600;
@@ -71,41 +71,33 @@
         margin-right: 36px;
     }
 
-    .profile_section h2 {
+    .profileSection h2 {
         font-size: 16px;
         margin-top: 8px;
     }
 
-    .profile_section {
+    .profileSection {
         margin-top: 36px;
     }
 
-    .sub_header_my_threads h3 {
+    .subHeaderMyThreads h3 {
         font-size: 18px;
         text-align: center;
     }
 
-    p {
-        font-size: 14px;
-    }
-
-    .sub_header_my_threads {
+    .subHeaderMyThreads {
         flex-wrap: wrap;
         justify-content: center;
         flex-direction: column;
     }
 
-    .my_threads_section p {
-        text-align: center;
-    }
-
-    .sub_header_my_threads h3 {
+    .subHeaderMyThreads h3 {
         max-width: 72vw;
     }
 }
 
 @media only screen and (min-device-width : 540px) and (max-device-width : 600px){
-    .sub_header_my_threads h3 {
+    .subHeaderMyThreads h3 {
         max-width: 40vw;
     }
 }
\ No newline at end of file
diff --git a/src/styles/thread/Form.css b/src/styles/thread/Form.css
index 7d4b792874d65265693b2e658cc071d3dfa5cc6a..a8909a541cee929f13d38b3d3f01e5ed16c42623 100644
--- a/src/styles/thread/Form.css
+++ b/src/styles/thread/Form.css
@@ -1,4 +1,4 @@
-.formContainer {
+.formComponentContainer {
     margin: 36px 72px;
     min-height: 100vh;
     margin-bottom: 72px;
@@ -26,21 +26,11 @@
     cursor: pointer;
 }
 
-.header {
-    margin-top: 36px;
-}
-
-.header h1 {
-    font-family: "DM Sans";
-    font-size: 36px;
-    color: #003F5A;
-}
-
-.form_section {
+.formSection {
     margin-top: 60px;
 }
 
-.form_container {
+.formContainer {
     display: flex;
     flex-direction: column; 
 }
@@ -122,7 +112,7 @@ textarea:focus, input:focus, select:focus{
 }
 
 @media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
-    .formContainer {
+    .formComponentContainer {
         margin: 18px 36px;
     }
 
@@ -131,11 +121,6 @@ textarea:focus, input:focus, select:focus{
         margin-bottom: 12px;
     }   
 
-    .header {
-        margin-top: 18px;
-        text-align: center;
-    }
-
     label {
         font-size: 14px;
         margin-bottom: 12px;
@@ -150,14 +135,10 @@ textarea:focus, input:focus, select:focus{
         margin-right: 2px;
     }
 
-    .form_section {
+    .formSection {
         margin-top: 36px;
     }
 
-    .header h1 {
-        font-size: 28px;
-    }
-
     .title {
         min-width: 248px;
         max-width: 468px;
diff --git a/src/styles/thread/ListThreads.css b/src/styles/thread/ListThreads.css
index e080ce9a625ccac11ac24624f8d44b0b744e6d64..7d2fdf11954e1e3149c3d0b3fff456407f562087 100644
--- a/src/styles/thread/ListThreads.css
+++ b/src/styles/thread/ListThreads.css
@@ -1,19 +1,15 @@
-.header h1 {
-    font-family: "DM Sans";
-    font-size: 2.25rem;
-    color: #007A7A;
-}
-
-.list_threads_section {
+.listThreadsSection {
     display: flex;
     flex-direction: column;
     justify-content: center;
+    margin-top: 56px;
 }
 
-.sub_header_list_threads {
+.subHeaderListThreads {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    margin-bottom: 28px;
 }
 
 .tab {
@@ -44,46 +40,6 @@
     margin-bottom: 72px;
 }
 
-.header h1 {
-    font-family: "DM Sans";
-    font-size: 36px;
-    color: #007A7A;
-}
-
-.list_threads_section {
-    display: flex;
-    flex-direction: column;
-    margin-top: 56px;
-    justify-content: center;
-}
-
-.sub_header_list_threads {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 28px;
-}
-
-.tab {
-    display: flex;
-    align-items: center;
-}
-
-.tab h3 {
-    font-family: "DM Sans";
-    font-size: 18px;
-    color: #000000;
-    margin-right: 24px;
-    margin-top: 4px;
-    opacity: 0.5;
-}
-
-.tab .active {
-    color: #DE6600 !important;
-    font-weight: bold;
-    opacity: 1!important;
-}
-
 @media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
     .listThreadsContainer {
         margin-top: 24px;
@@ -91,15 +47,11 @@
         margin-right: 36px;
     }
     
-    .header h1 {
-        font-size: 36px;
-    }
-    
-    .list_threads_section {
+    .listThreadsSection {
         margin-top: 36px;
     }
     
-    .sub_header_list_threads {
+    .subHeaderListThreads {
         margin-bottom: 28px;
         flex-wrap: wrap;
         justify-content: center;
@@ -107,12 +59,6 @@
         justify-content: center;
     }
     
-    .tab h3 {
-        font-size: 16px;
-        margin-right: 20px;
-        margin-top: 4px;
-    }
-    
     .tab .active {
         color: #DE6600 !important;
         font-weight: bold;
@@ -126,7 +72,7 @@
         margin-top: 4px;
     }
 
-    .recentThreads p, .topThreads p {
+    .noThreadsMessage p{
         text-align: center;
     }
 }
diff --git a/src/styles/thread/Post.css b/src/styles/thread/Post.css
index 837252f9cf9abf26611a8dd9a628bbf0e0f98d9a..93e19996a1a7d2e984274cc8743b4a2c38b2c35d 100644
--- a/src/styles/thread/Post.css
+++ b/src/styles/thread/Post.css
@@ -1,15 +1,15 @@
-#post {
+.post {
     min-width: 303px;
     max-width: 3696px;
     margin-bottom: 20px;
     font-family: "DM Sans";
 }
 
-#headerData {
+.headerData {
     display: flex;
 }
 
-#postHeader {
+.postHeader {
     height: 84px;
     box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
     border-radius: 8px 8px 0px 0px;
@@ -30,7 +30,7 @@
     margin: 0px;
 }
 
-#headerButton {
+.headerButton {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -47,20 +47,20 @@
     background-color: transparent!important;
 }
 
-#postContent {
+.postContent {
     padding: 32px;
     box-shadow: 0px 4px 8px 1px rgba(0,0,0,0.25);
     border-radius: 0px 0px 8px 8px;
     font-family: "DM Sans"
 }
 
-#postContent #judul {
+.postContent .postTitle {
     font-size: 32px;
     font-weight: bold;
     margin-bottom: 24px;
 }
 
-#postContent #isi {
+.postContent .postBody {
     font-size: 16px;
     white-space: pre-line;
 }
@@ -120,40 +120,44 @@ button:focus {
     align-items: center;
 }
 
+.postButtonContainer button {
+    margin-top: 0px;
+}
+
 @media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
-    #post {
+    .post {
         min-width: 248px;
         max-width: 468px;
         margin-bottom: 20px;
     }
 
-    #postHeader {
+    .postHeader {
         height: auto;
         padding: 16px 16px;
         flex-direction: column;
     }
 
-    #headerButton {
+    .headerButton {
         margin-top: 24px;
     }
 
-    .threadButtons{
+    .postButtonContainer{
         display: flex;
         justify-content: space-between;
         width: 160px;
     }
 
-    #postContent {
+    .postContent {
         padding: 16px;
     }
     
-    #postContent #judul {
+    .postContent .postTitle {
         font-size: 24px;
         font-weight: bold;
         margin-bottom: 24px;
     }
     
-    #postContent #isi {
+    .postContent .postBody {
         font-size: 14px;
     }   
 
diff --git a/src/styles/thread/PreviewThread.css b/src/styles/thread/PreviewThread.css
index c6ef9e26270ef057948bb52735f30c44b0d9afd6..d3e6d5c9509ace15e1b7bb6e61e94d261dde9e24 100644
--- a/src/styles/thread/PreviewThread.css
+++ b/src/styles/thread/PreviewThread.css
@@ -1,4 +1,4 @@
-#threadCard {
+.threadCard {
     min-width: 303px;
     max-width: 3696px;
     margin-bottom: 20px;
@@ -8,7 +8,7 @@
     font-family: "DM Sans";
 }
 
-#topic {
+.previewThreadTopic {
     background: #DE6600;
     color:#ffffff;
     padding: 4px;
@@ -29,32 +29,29 @@
     color: #DE6600;
 }
 
-p {
-    color: #000000;
-}
-
-#judul {
+.previewThreadTitle {
     font-size: 24px;
     color: #000000;
 }
 
-#threadCardContent {
+.threadCardContent {
     margin-top: 8px;
 }
 
-#threadCardContent p{
+.threadCardContent p{
     margin-bottom: 0px;
+    color: #000000;
 }
 
 @media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
-    #threadCard {
+    .threadCard {
         min-width: 248px;
         max-width: 468px;
         margin-bottom: 20px;
         padding: 16px;
     }
     
-    #topic {
+    .previewThreadTopic {
         font-size: 14px;
     }
     
@@ -63,20 +60,20 @@ p {
         margin-left: 20px;
     }
     
-    #judul {
+    .previewThreadTitle {
         font-size: 24px;
         color: #000000;
     }
     
-    #threadCardContent {
+    .threadCardContent {
         margin-top: 8px;
     }
     
-    #threadCardContent p{
+    .threadCardContent p{
         margin-bottom: 0px;
     }
 
-    #threadCardContent p{
+    .threadCardContent p{
         text-align: left;
     }
 }
\ No newline at end of file
diff --git a/src/styles/thread/Thread.css b/src/styles/thread/Thread.css
index 852f2e3d3f07e821b5cd3e7867df1d6bd3b489ed..5bbda74342045cb841ddb02b7ca5f1a826082379 100644
--- a/src/styles/thread/Thread.css
+++ b/src/styles/thread/Thread.css
@@ -9,21 +9,6 @@
     margin-bottom: 72px;
 }
 
-.back {
-    margin-top: 32px;
-    margin-bottom: 36px;
-    color: #007A7A;
-}
-
-.back h5 {
-    font-family: 'DM Sans';
-    font-size: 18px;
-}
-
-.back:hover {
-    cursor: pointer;
-}
-
 .commentText {
     color: #FEA02F;
     font-size: 24px;
@@ -31,21 +16,21 @@
     margin-bottom: 12px;
 }
 
-#addCommentSection {
+.addCommentSection {
     margin-top: 40px;
     display: flex;
     flex-direction: column;
     margin-top: 20px;
 }
 
-#addCommentSection h3 {
+.addCommentSection h3 {
     color: #FEA02F;
     font-size: 24px;
     font-weight: bold;
     margin-bottom: 12px;
 }
 
-#addCommentButton {
+.addCommentButton {
     margin-top: 20px;
     margin-left: auto;
     margin-right: auto;
@@ -63,10 +48,6 @@
     box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
 }
 
-textarea:focus {
-    outline: none;
-}
-
 .submitComment {
     border-radius: 4px;
     border-width: 0px;
@@ -83,7 +64,7 @@ textarea:focus {
     margin-bottom: 0px;
 }
 
-.commentFormContainer {
+.commentformComponentContainer {
     display: flex;
     flex-direction: column;
 }
@@ -96,12 +77,12 @@ textarea:focus {
         margin-right: 36px;
     }
 
-    #addCommentSection h3 {
+    .addCommentSection h3 {
         font-size: 18px;
         text-align: center;
     }
 
-    #addCommentSection div {
+    .addCommentSection div {
         display: flex;
         justify-content: center;
     }
diff --git a/src/styles/topic/Topic.css b/src/styles/topic/Topic.css
index d6d3e9ebfe6a2bdbd48da5edcc384ce3e8991750..3b3d4e6f34e3a9aaeea199844bb20389f9959944 100644
--- a/src/styles/topic/Topic.css
+++ b/src/styles/topic/Topic.css
@@ -6,14 +6,7 @@
     margin-bottom: 72px;
 }
 
-.header h1 {
-    font-family: "DM Sans";
-    font-size: 36px;
-    color: #007A7A;
-    margin-bottom: 24px;
-}
-
-.list_threads_section {
+.listThreadsSection {
     display: flex;
     flex-direction: column;
     margin-top: 56px;
@@ -21,33 +14,6 @@
     font-family: "DM Sans";
 }
 
-.sub_header_list_threads {
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-    margin-bottom: 28px;
-}
-
-.tab {
-    display: flex;
-    align-items: center;
-}
-
-.tab h3 {
-    font-family: "DM Sans";
-    font-size: 18px;
-    color: #000000;
-    margin-right: 24px;
-    margin-top: 4px;
-    opacity: 0.5;
-}
-
-.tab .active {
-    color: #DE6600 !important;
-    font-weight: bold;
-    opacity: 1!important;
-}
-
 .deleteTopicButton {
     border: 1px solid #D7443E;
     border-radius: 4px;
@@ -65,10 +31,6 @@
         margin-left: 36px;
         margin-right: 36px;
     }
-
-    .header h1 {
-        margin-bottom: 36px;
-    }
 }
 
 @media only screen and (max-device-width : 320px) {
diff --git a/src/styles/topic/TopicList.css b/src/styles/topic/TopicList.css
index e3005d8af3ee1d1ae2033bbee6554faf3bd565c6..0bc169c55c7b78cd552fab25bac0f74efab06e10 100644
--- a/src/styles/topic/TopicList.css
+++ b/src/styles/topic/TopicList.css
@@ -33,7 +33,7 @@
     margin: 0px;
 }
 
-.headerTopic {
+.topicHeader {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -45,22 +45,18 @@
     margin-bottom: 8px;
 }
 
-.topicCardHeader #judul{
+.topicCardHeader .topicTitle{
     max-width: 192px;
     word-wrap: break-word;
 }
 
 @media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
-    .button {
-        font-size: 16px;
-    }
-
     .topicCard {
         width: 200px;
         min-height: 108px;
     }
 
-    .topicCardHeader #judul{
+    .topicCardHeader .topicTitle{
         max-width: 152px;
         word-wrap: break-word;
     }
@@ -82,20 +78,20 @@
         justify-content: center;
     }
 
-    .headerTopic {
+    .topicHeader {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 24px;
     }
 
-    .headerTopic {
+    .topicHeader {
         display: flex;
         flex-direction: column;
         align-items: center;
     }
 
-    .headerTopic h1 {
+    .topicHeader h1 {
         margin-bottom: 24px;
     }
 }
diff --git a/src/styles/utility/Footer.css b/src/styles/utility/Footer.css
index 21ed5e8be44098f15984920af8d5465093da52ae..c8c30fd23236a838aac54a2f97c35da2e5908b8f 100644
--- a/src/styles/utility/Footer.css
+++ b/src/styles/utility/Footer.css
@@ -1,4 +1,4 @@
-#footer {
+#footerContainer {
     background-color: #003F5A;
     display: flex;
     justify-content: space-between;
@@ -39,8 +39,8 @@
     font-size: 16px;
 }
 
-@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
-    #footer {
+@media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
+    #footerContainer {
         padding: 24px 36px;
         margin-top: 40px;
         flex-direction: column;
diff --git a/src/styles/utility/Navbar.css b/src/styles/utility/Navbar.css
index 26db33fecec3c5c4cf5316606b0c8b9386d17425..ea7df9c94a9c26894b375f8023f05bdfeaaf96da 100644
--- a/src/styles/utility/Navbar.css
+++ b/src/styles/utility/Navbar.css
@@ -58,7 +58,7 @@
     color: #DE6600!important;
 }
 
-@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+@media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
     .form-control {
         min-width: 180px;
         max-width: 240px;