diff --git a/frontend/react-app/src/css/ViewTask.css b/frontend/react-app/src/css/ViewTask.css
index 4bb4a9f..0cf204d 100644
--- a/frontend/react-app/src/css/ViewTask.css
+++ b/frontend/react-app/src/css/ViewTask.css
@@ -24,8 +24,9 @@ div.header{
     height: auto;
 }
 strong.nameOfTask{
-    color: #fefcfd;
+    color: black;
     font-size: 30px;
+    font-weight: 900;
 }
 div.priority{
     background-color: #3b3355;
@@ -93,3 +94,72 @@ input.submit-comment{
     cursor: pointer;
 }
 
+.rowFlexbox {
+    /* background-color: red; */
+}
+
+.viewFlexbox {
+
+}
+
+.viewpageBody {
+    width: 40%;
+    margin: auto;
+    margin-top: 5%;
+    margin-bottom: 100px;
+    background-color: #e6e4f7;
+    padding: 5%;
+    border-radius: 15px;
+}
+
+#viewDelete {
+    background-color: red;
+    margin: 1% 0% 3% 0%;
+    color: white;
+    border: none;
+}
+
+#viewDelete:hover {
+    background-color: #8c002d;
+}
+
+#viewEdit {
+    background-color: darkgreen;
+    margin: 3% 0% 1% 0%;
+    color: white;
+    border: none;
+}
+
+#viewEdit:hover {
+    background-color: #004f07;
+}
+
+#viewPriority {
+    color: white;
+    width: 100px;
+    height: 35px;
+    text-align: center;
+    margin: 2% 0%;
+    border: none;
+}
+
+.viewFlexBox {
+    display: flex;
+  flex-direction: column;
+  background-color: red;
+  align-content: center;
+  justify-content: center;
+  width: 50%;
+  padding-top: 10%;
+  padding-bottom: 10%;
+}
+
+#newStatus {
+    background-color: white;
+    width: 50%;
+    border: none;
+}
+
+.description {
+    margin-left: 1%;
+}
\ No newline at end of file
diff --git a/frontend/react-app/src/index.css b/frontend/react-app/src/index.css
index 32e513e..3882b34 100644
--- a/frontend/react-app/src/index.css
+++ b/frontend/react-app/src/index.css
@@ -101,3 +101,16 @@ li.logo a{
   background-color: #3f5d8b;
   cursor: pointer;
 }
+
+.flexbox {
+  display: flex;
+  flex-direction: column;
+  /* background-color: red; */
+  background-color: white;
+  /* align-content: center;
+  justify-content: center;
+  width: 50%;
+  padding-top: 10%;
+  padding-bottom: 10%; */
+  width: 50%;
+}
\ No newline at end of file
diff --git a/frontend/react-app/src/pages/ViewTask.jsx b/frontend/react-app/src/pages/ViewTask.jsx
index 5fbc66e..f07564c 100644
--- a/frontend/react-app/src/pages/ViewTask.jsx
+++ b/frontend/react-app/src/pages/ViewTask.jsx
@@ -43,14 +43,15 @@ function ViewTask(){
         <div className='pageContainer'>
             <Header/>
             <div className='pageBody'>
-                <div className="flexbox">
+            <div className='viewpageBody'>
+                <div className="viewFlexbox">
                 <strong class ="nameOfTask">{taskToSee.title + "\n"}</strong>
-                    <div className="rowFlexbox" style={{justifyContent:'space-between', marginBottom: '15px'}}>
-                        <div className="header"style={{ whiteSpace: 'pre-line' }}>
-                         Assigned to:{teamMembers}
+                    <div>
+                        <div className="header">
+                         Assigned to: {teamMembers}
                         </div>
                         {/* Place holder for when we get our database we will get the prority DB*/}
-                        <div className="priority">
+                        <div className="priority" id="viewPriority">
                             Priority: {taskToSee.priority}
                         </div>
                     </div>
@@ -75,22 +76,24 @@ function ViewTask(){
                         </form>
                     </div>*/}
                     {!taskToSee.isLocked &&(
-                    <div className="update-class rowFlexbox" style={{justifyContent:'space-between'}}>
+                    <div className="update-class">
                         <div>
                             <select name="update status" id="newStatus" className = "updateSelector" defaultValue={taskToSee.status} onChange={changeStatus}>
                                 <option value="notStarted">Not Started</option>
                                 <option value="InProgress">In Progress</option>
                                 <option value="Done">Done</option>
                             </select>
+                            <br/>
                             <Link to = {'/edit-task'} state={{taskToEdit: taskToSee}}>
-                                <button class="fotterbutton">EDIT TASK</button>
+                                <button class="fotterbutton" id="viewEdit">EDIT TASK</button>
                                 </Link>
                         </div>
-                        <input type="button" value="DELETE TASK" className="fotterbutton" onClick={deleteThisTask}/>
+                        <input type="button" id="viewDelete" value="DELETE TASK" className="fotterbutton" onClick={deleteThisTask}/>
 
                     </div>)}
                 </div>
             </div>
+            </div>
         </div>
     )
 }