Index: reactapp/src/Components/Styled/Main.style.js
===================================================================
--- reactapp/src/Components/Styled/Main.style.js	(revision 3e98cea08277dd29ff57070f4333ef753eec4306)
+++ reactapp/src/Components/Styled/Main.style.js	(revision 702ca779afcdb48bcc15202ffc07dfb4be2efebd)
@@ -6,4 +6,5 @@
   margin: auto;
   margin-top: 20px;
+  margin-bottom: 20px;
   padding-left: 50px;
   padding-right: 50px;
Index: reactapp/src/Components/Styled/Modal.style.js
===================================================================
--- reactapp/src/Components/Styled/Modal.style.js	(revision 702ca779afcdb48bcc15202ffc07dfb4be2efebd)
+++ reactapp/src/Components/Styled/Modal.style.js	(revision 702ca779afcdb48bcc15202ffc07dfb4be2efebd)
@@ -0,0 +1,111 @@
+import styled, { keyframes } from "styled-components";
+
+export const AddOpinionButton = styled.button`
+  font-family: "Roboto Mono", monospace;
+  background-color: #0066cc;
+  border: none;
+  color: white;
+  padding: 8px 16px;
+  text-align: center;
+  font-size: 16px;
+  opacity: 0.6;
+  transition: 0.3s;
+  text-decoration: none;
+  cursor: pointer;
+  &:hover {
+    opacity: 1;
+  }
+  float: right;
+  font-weight: bold;
+`;
+
+export const Modal = styled.div`
+  display: ${(props) => props.display};
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0, 0, 0);
+  background-color: rgba(0, 0, 0, 0.4);
+`;
+
+const animatetop = keyframes`
+  from {
+    top: -300px;
+    opacity: 0;
+  }
+  to {
+    top: 0;
+    opacity: 1;
+  }
+`;
+
+export const ModalContent = styled.div`
+  background-color: #fefefe;
+  margin: 15% auto;
+  padding: 0;
+  border: 1px solid #888;
+  width: 80%;
+  animation: ${animatetop} 0.4s;
+`;
+
+export const ModalClose = styled.span`
+  color: white;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+  transition: 0.4s;
+  &:hover,
+  :focus {
+    background-color: black;
+    text-decoration: none;
+    cursor: pointer;
+  }
+`;
+
+export const ModalHeader = styled.div`
+  padding: 2px 16px;
+  background-color: rgba(0, 102, 204, 0.6);
+  color: white;
+  height: 40px;
+  margin-bottom: 10px;
+`;
+
+export const ModalFooter = styled.div`
+  padding: 2px 16px;
+  background-color: rgba(0, 102, 204, 1);
+  opacity: 0.6;
+  color: white;
+  height: 40px;
+  margin-top: 10px;
+  transition: 0.4s;
+  &:hover {
+    opacity: 1;
+    cursor: pointer;
+  }
+`;
+
+export const ModalBody = styled.div`
+  padding: 2px 16px;
+`;
+
+export const ModalInput = styled.input`
+  margin-top: 5px;
+  margin-bottom: 5px;
+  display: block;
+  height: 30px;
+  width: 372px;
+  padding: 12px 16px;
+  border: 1px solid #ccc;
+`;
+
+export const ModalTextarea = styled.textarea`
+  margin-top: 5px;
+  margin-bottom: 5px;
+  display: block;
+  padding: 12px 16px;
+  border: 1px solid #ccc;
+`;
Index: reactapp/src/Components/Styled/Search.style.js
===================================================================
--- reactapp/src/Components/Styled/Search.style.js	(revision 3e98cea08277dd29ff57070f4333ef753eec4306)
+++ reactapp/src/Components/Styled/Search.style.js	(revision 702ca779afcdb48bcc15202ffc07dfb4be2efebd)
@@ -30,6 +30,6 @@
   &:hover {
     background-color: papayawhip;
-    border: 1px solid blue;
-    text-decoration: underline 1px blue;
+    border: 1px solid #0066cc;
+    text-decoration: underline 1px #0066cc;
   }
   padding: 10px;
Index: reactapp/src/Components/Styled/UserDetails.style.js
===================================================================
--- reactapp/src/Components/Styled/UserDetails.style.js	(revision 702ca779afcdb48bcc15202ffc07dfb4be2efebd)
+++ reactapp/src/Components/Styled/UserDetails.style.js	(revision 702ca779afcdb48bcc15202ffc07dfb4be2efebd)
@@ -0,0 +1,31 @@
+import styled from "styled-components";
+
+export const UserDetailsCard = styled.div`
+  width: auto;
+  padding: 10px;
+  margin-top: 20px;
+  margin-bottom: 30px;
+`;
+
+export const UserDetailsCardContent = styled.p`
+  padding-top: 7px;
+  padding-bottom: 7px;
+`;
+
+export const LogoutButton = styled.button`
+  font-family: "Roboto Mono", monospace;
+  background-color: tan;
+  border: none;
+  color: white;
+  padding: 4px 8px;
+  text-align: center;
+  font-size: 16px;
+  opacity: 0.6;
+  transition: 0.3s;
+  display: inline-block;
+  text-decoration: none;
+  cursor: pointer;
+  &:hover {
+    opacity: 1;
+  }
+`;
