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 3e98cea08277dd29ff57070f4333ef753eec4306)
@@ -0,0 +1,21 @@
+import styled from "styled-components";
+
+export const MainWrapper = styled.div`
+  font-family: "Roboto Mono", monospace;
+  background-color: ivory;
+  margin: auto;
+  margin-top: 20px;
+  padding-left: 50px;
+  padding-right: 50px;
+  padding-top: 30px;
+  padding-bottom: 30px;
+  width: 80%;
+`;
+
+export const MainTitle = styled.h1`
+  font-size: 36pt;
+  text-decoration: underline 3px;
+  width: fit-content;
+  float: left;
+  color: black;
+`;
Index: reactapp/src/Components/Styled/OpinionCard.style.js
===================================================================
--- reactapp/src/Components/Styled/OpinionCard.style.js	(revision 3e98cea08277dd29ff57070f4333ef753eec4306)
+++ reactapp/src/Components/Styled/OpinionCard.style.js	(revision 3e98cea08277dd29ff57070f4333ef753eec4306)
@@ -0,0 +1,64 @@
+import styled from "styled-components";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+export const OpinionCard = styled.div`
+  background-color: papayawhip;
+  width: auto;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  padding: 10px;
+  border: 1px solid black;
+`;
+
+export const OpinionCardContent = styled.div`
+  padding: 5px;
+  transition: 0.5s;
+  &:hover {
+    background-color: seashell;
+  }
+  position: relative;
+`;
+
+export const OpinionCardContentTitle = styled.p`
+  font-weight: bold;
+`;
+
+export const OpinionCardContentTime = styled.p`
+  font-size: small;
+  font-style: italic;
+`;
+
+export const OpinionReplyCard = styled.div`
+  background-color: papayawhip;
+  width: auto;
+  margin-left: ${(props) => props.indent};
+  padding: 10px;
+  border-left: thick solid tan;
+`;
+
+export const OpinionReplyCardContent = styled.div`
+  padding: 5px;
+  transition: 0.5s;
+  &:hover {
+    background-color: seashell;
+  }
+  position: relative;
+`;
+
+export const OpinionReplyCardContentTime = styled.p`
+  font-size: small;
+  font-style: italic;
+`;
+
+export const StyledFontAwesomeIcon = styled(FontAwesomeIcon)`
+  color: darkgrey;
+  display: block;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: ${(props) => props.right};
+  transition: 0.5s;
+  &:hover {
+    color: ${(props) => props.color};
+  }
+`;
Index: reactapp/src/Components/Styled/ProfessorCard.style.js
===================================================================
--- reactapp/src/Components/Styled/ProfessorCard.style.js	(revision 3e98cea08277dd29ff57070f4333ef753eec4306)
+++ reactapp/src/Components/Styled/ProfessorCard.style.js	(revision 3e98cea08277dd29ff57070f4333ef753eec4306)
@@ -0,0 +1,24 @@
+import styled from "styled-components";
+
+export const ProfessorCard = styled.div`
+  background-color: papayawhip;
+  width: auto;
+  padding: 10px;
+  margin-bottom: 30px;
+  margin-top: 140px;
+`;
+
+export const ProfessorCardName = styled.h2`
+  margin-bottom: 10px; ;
+`;
+
+export const ProfessorCardSeparator = styled.hr`
+  color: darkslategray;
+  margin: 0;
+`;
+
+export const ProfessorCardDetails = styled.h3`
+  font-size: ${(props) => props.fontSize};
+  color: black;
+  opacity: 0.6;
+`;
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 3e98cea08277dd29ff57070f4333ef753eec4306)
@@ -0,0 +1,52 @@
+import styled from "styled-components";
+import searchicon from "../../searchicon.png";
+
+export const SearchBox = styled.input`
+  width: 350px;
+  box-sizing: border-box;
+  border: 2px solid #ccc;
+  font-size: 16px;
+  background-color: #f9f9f9;
+  background-image: url(${searchicon});
+  background-position: 10px 10px;
+  background-repeat: no-repeat;
+  padding: 12px 20px 12px 40px;
+  margin-top: 10px;
+`;
+
+export const SearchDropdown = styled.div`
+  display: ${(props) => props.display};
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  padding: 12px 16px;
+  z-index: 1;
+  width: 350px;
+  padding: 0;
+`;
+
+export const SearchResult = styled.div`
+  &:hover {
+    background-color: papayawhip;
+    border: 1px solid blue;
+    text-decoration: underline 1px blue;
+  }
+  padding: 10px;
+  border: 1px solid transparent;
+  margin: ${(props) => props.margin};
+`;
+
+export const SearchResultLink = styled.a`
+  text-decoration: none;
+  color: black;
+`;
+
+export const SearchResultText = styled.p`
+  font-weight: ${(props) => props.weight};
+  font-size: ${(props) => props.size};
+`;
+
+export const SearchResultsWrapper = styled.div`
+  margin-top: 140px;
+`;
