diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 3f5f2805..8f1dd13e 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -7,7 +7,7 @@ import {
 
 import Home from "./views/home"
 import Repo from "./views/Repo"
-import Deployment from "./views/Deployment"
+import Deployment from "./views/deployment"
 import Settings from "./views/settings"
 import Members from "./views/members"
 
diff --git a/ui/src/components/DeploymentDescriptor/index.tsx b/ui/src/components/DeploymentDescriptor/index.tsx
deleted file mode 100644
index eccc5548..00000000
--- a/ui/src/components/DeploymentDescriptor/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import DeploymentDescriptor from "./DeploymentDescriptor"
-
-export default DeploymentDescriptor
diff --git a/ui/src/components/DeploymentDescriptor/CommitChanges.tsx b/ui/src/views/deployment/CommitChanges.tsx
similarity index 100%
rename from ui/src/components/DeploymentDescriptor/CommitChanges.tsx
rename to ui/src/views/deployment/CommitChanges.tsx
diff --git a/ui/src/components/DeploymentDescriptor/DeploymentDescriptor.tsx b/ui/src/views/deployment/DeploymentDescriptor.tsx
similarity index 69%
rename from ui/src/components/DeploymentDescriptor/DeploymentDescriptor.tsx
rename to ui/src/views/deployment/DeploymentDescriptor.tsx
index 1fb14caa..21dbb7fe 100644
--- a/ui/src/components/DeploymentDescriptor/DeploymentDescriptor.tsx
+++ b/ui/src/views/deployment/DeploymentDescriptor.tsx
@@ -1,22 +1,25 @@
+import { useState } from "react"
 import { Button, Descriptions, Modal, Typography } from "antd"
 import moment from "moment"
 
-import DeploymentStatusBadge from "../DeploymentStatusBadge"
-import UserAvatar from "../UserAvatar"
 import CommitChanges from "./CommitChanges"
+import DeploymentStatusBadge from "../../components/DeploymentStatusBadge"
+import UserAvatar from "../../components/UserAvatar"
 
 import { Commit, Deployment } from "../../models"
 import { getShortRef } from "../../libs"
-import { useState } from "react"
 
 const { Text } = Typography
 
-interface DeploymentDescriptorProps {
+export interface DeploymentDescriptorProps {
     deployment: Deployment
-    commits: Commit[]
+    changes: Commit[]
 }
 
-export default function DeploymentDescriptor(props: DeploymentDescriptorProps): JSX.Element {
+export default function DeploymentDescriptor({
+    deployment, 
+    changes
+}: DeploymentDescriptorProps): JSX.Element {
     const [visible, setVisible] = useState<boolean>(false)
 
     const showModal = () => {
@@ -29,18 +32,20 @@ export default function DeploymentDescriptor(props: DeploymentDescriptorProps):
 
     return (
         <Descriptions title="Information" bordered column={1}>
-            <Descriptions.Item label="Environment">{props.deployment.env}</Descriptions.Item>
+            <Descriptions.Item label="Environment">
+                {deployment.env}
+            </Descriptions.Item>
             <Descriptions.Item label="Ref">
-                <Text className="gitploy-code" code>{getShortRef(props.deployment)}</Text>
+                <Text className="gitploy-code" code>{getShortRef(deployment)}</Text>
             </Descriptions.Item>
             <Descriptions.Item label="Status">
-                <DeploymentStatusBadge deployment={props.deployment}/>
+                <DeploymentStatusBadge deployment={deployment}/>
             </Descriptions.Item>
             <Descriptions.Item label="Deployer">
-                <UserAvatar user={props.deployment.deployer} boldName={false}/>
+                <UserAvatar user={deployment.deployer} boldName={false}/>
             </Descriptions.Item>
             <Descriptions.Item label="Deploy Time">
-                {moment(props.deployment.createdAt).format("YYYY-MM-DD HH:mm:ss")}
+                {moment(deployment.createdAt).format("YYYY-MM-DD HH:mm:ss")}
             </Descriptions.Item>
             <Descriptions.Item label="Changes">
                 <Button 
@@ -59,7 +64,7 @@ export default function DeploymentDescriptor(props: DeploymentDescriptorProps):
                     cancelText="Close"
                     onCancel={hideModal}
                 >
-                    <CommitChanges changes={props.commits}/>
+                    <CommitChanges changes={changes}/>
                 </Modal>
             </Descriptions.Item>
         </Descriptions>
diff --git a/ui/src/components/DeploymentStatusSteps.tsx b/ui/src/views/deployment/DeploymentStatusSteps.tsx
similarity index 91%
rename from ui/src/components/DeploymentStatusSteps.tsx
rename to ui/src/views/deployment/DeploymentStatusSteps.tsx
index ba502bd4..b42289d8 100644
--- a/ui/src/components/DeploymentStatusSteps.tsx
+++ b/ui/src/views/deployment/DeploymentStatusSteps.tsx
@@ -2,11 +2,11 @@ import { Timeline, Typography } from "antd"
 import { ClockCircleOutlined } from "@ant-design/icons"
 import moment from "moment"
 
-import { DeploymentStatus } from "../models"
+import { DeploymentStatus } from "../../models"
 
 const { Text, Link } = Typography
 
-interface DeploymentStatusStepsProps {
+export interface DeploymentStatusStepsProps {
     statuses: DeploymentStatus[]
 }
 
@@ -40,6 +40,6 @@ const getStatusColor = (status: string) => {
         case "failure":
             return "red"
         default:
-            return "#722ed1"
+            return "purple"
     }
 }
\ No newline at end of file
diff --git a/ui/src/views/deployment/HeaderBreadcrumb.tsx b/ui/src/views/deployment/HeaderBreadcrumb.tsx
new file mode 100644
index 00000000..5d1ec03c
--- /dev/null
+++ b/ui/src/views/deployment/HeaderBreadcrumb.tsx
@@ -0,0 +1,34 @@
+import { Breadcrumb } from "antd"
+
+export interface HeaderBreadcrumbProps {
+    namespace: string
+    name: string
+    number: string
+}
+
+export default function HeaderBreadcrumb({
+    namespace,
+    name,
+    number
+}: HeaderBreadcrumbProps): JSX.Element {
+
+    return (
+        <Breadcrumb>
+            <Breadcrumb.Item>
+                <a href="/">Repositories</a>
+            </Breadcrumb.Item>
+            <Breadcrumb.Item>
+                {namespace}
+            </Breadcrumb.Item>
+            <Breadcrumb.Item>
+                <a href={`/${namespace}/${name}`}>{name}</a>
+            </Breadcrumb.Item>
+            <Breadcrumb.Item>
+                Deployments
+            </Breadcrumb.Item>
+            <Breadcrumb.Item>
+                {number}
+            </Breadcrumb.Item>
+        </Breadcrumb>
+    )
+}
\ No newline at end of file
diff --git a/ui/src/components/ReviewModal.tsx b/ui/src/views/deployment/ReviewButton.tsx
similarity index 69%
rename from ui/src/components/ReviewModal.tsx
rename to ui/src/views/deployment/ReviewButton.tsx
index e425fb05..97d470b2 100644
--- a/ui/src/components/ReviewModal.tsx
+++ b/ui/src/views/deployment/ReviewButton.tsx
@@ -1,19 +1,25 @@
 import { useState } from "react"
 import { Button, Modal, Space, Input } from "antd"
 
-import { Review, ReviewStatusEnum } from "../models"
+import { Review, ReviewStatusEnum,  } from "../../models"
 
-const { TextArea } = Input
-
-interface ReviewModalProps {
-    review: Review
+export interface ReviewButtonProps {
+    review?: Review
     onClickApprove(comment: string): void
     onClickApproveAndDeploy(comment: string): void
     onClickReject(comment: string): void
 }
 
-export default function ReviewModal(props: ReviewModalProps): JSX.Element {
-    const [comment, setComment] = useState(props.review.comment)
+export default function ReviewButton(props: ReviewButtonProps): JSX.Element {
+    const { review } = props
+
+    // If no review has been assigned, an empty value is returned.
+    if (!review) {
+        return <></>
+    }
+
+    // Stores the review comment state and passes it as a parameter when updating.
+    const [comment, setComment] = useState(review.comment)
 
     const onChangeComment = (e: any) => {
         setComment(e.target.value)
@@ -24,6 +30,10 @@ export default function ReviewModal(props: ReviewModalProps): JSX.Element {
     const showModal = () => {
         setIsModalVisible(true);
     }
+
+    const onClickCancel = () => {
+        setIsModalVisible(false)
+    }
   
     const onClickApprove = () => {
         props.onClickApprove(comment)
@@ -40,34 +50,30 @@ export default function ReviewModal(props: ReviewModalProps): JSX.Element {
         setIsModalVisible(false)
     }
   
-    const onClickCancel = () => {
-        setIsModalVisible(false)
-    }
-
     return (
         <>
+            {(review.status === ReviewStatusEnum.Pending)? 
+                <Button type="primary" onClick={showModal}>
+                    Review
+                </Button> 
+                :
+                <Button onClick={showModal}>
+                    Reviewed
+                </Button>}
             <Modal 
                 title="Review" 
                 visible={isModalVisible} 
                 onCancel={onClickCancel}
-                footer={
+                footer={(
                     <Space>
                         <Button type="primary" danger onClick={onClickReject}>Reject</Button>
                         <Button type="primary" onClick={onClickApproveAndDeploy}>Approve and Deploy</Button>
                         <Button type="primary" onClick={onClickApprove}>Approve</Button>
                     </Space>
-                }
+                )}
             >
-                <TextArea rows={3} onChange={onChangeComment} value={comment}/>
+                <Input.TextArea rows={3} onChange={onChangeComment} value={comment}/>
             </Modal>
-            {(props.review.status === ReviewStatusEnum.Pending)? 
-                <Button type="primary" onClick={showModal}>
-                    Review
-                </Button> :
-                <Button onClick={showModal}>
-                    Reviewed
-                </Button> 
-            }
         </>
     )
 
diff --git a/ui/src/components/ReviewerList.tsx b/ui/src/views/deployment/ReviewList.tsx
similarity index 76%
rename from ui/src/components/ReviewerList.tsx
rename to ui/src/views/deployment/ReviewList.tsx
index 8364cd5b..20f93a8f 100644
--- a/ui/src/components/ReviewerList.tsx
+++ b/ui/src/views/deployment/ReviewList.tsx
@@ -1,26 +1,29 @@
 import { Popover, Button, Descriptions, Typography } from "antd"
 import { CheckOutlined, CloseOutlined, CommentOutlined, ClockCircleOutlined } from "@ant-design/icons"
 
-import { Review, ReviewStatusEnum } from "../models"
-import UserAvatar from "./UserAvatar"
+import { Review, ReviewStatusEnum } from "../../models"
+import UserAvatar from "../../components/UserAvatar"
 
 const { Text } = Typography
-export interface ReviewerListProps {
+
+export interface ReviewListProps {
     reviews: Review[]
 }
 
-export default function ReviewerList(props: ReviewerListProps): JSX.Element {
-    if (props.reviews.length === 0) {
+export default function ReviewList({ reviews }: ReviewListProps): JSX.Element {
+    if (reviews.length === 0) {
         return (
             <Descriptions title="Reviewers" >
-                <Descriptions.Item><Text type="secondary">No reviewers</Text></Descriptions.Item>
+                <Descriptions.Item>
+                    <Text type="secondary">No reviewers</Text>
+                </Descriptions.Item>
             </Descriptions>
         )
     }
 
     return (
         <Descriptions title="Reviewers" size="small" column={1}>
-            {props.reviews.map((review, idx) => {
+            {reviews.map((review, idx) => {
                 return (
                     <Descriptions.Item key={idx}>
                         <ReviewStatusIcon review={review} />&nbsp;
@@ -50,13 +53,11 @@ function ReviewCommentIcon(props: {review: Review}): JSX.Element {
     const comment = props.review.comment
 
     return (
-        comment? 
+        (comment)? 
             <Popover
                 title="Comment"
                 trigger="click"
-                content={
-                    <div style={{whiteSpace: "pre"}}>{comment}</div>
-                }
+                content={<div style={{whiteSpace: "pre"}}>{comment}</div>}
             >
                 <Button 
                     type="text" 
diff --git a/ui/src/views/Deployment.tsx b/ui/src/views/deployment/index.tsx
similarity index 61%
rename from ui/src/views/Deployment.tsx
rename to ui/src/views/deployment/index.tsx
index 13792ef4..364cacfe 100644
--- a/ui/src/views/Deployment.tsx
+++ b/ui/src/views/deployment/index.tsx
@@ -2,50 +2,51 @@ import { useEffect } from "react"
 import { shallowEqual } from 'react-redux'
 import { useParams } from "react-router-dom"
 import { Helmet } from "react-helmet"
-import { Breadcrumb, Button, PageHeader, Result, Row, Col } from "antd"
+import { Button, PageHeader, Result, Row, Col } from "antd"
 
-import { useAppSelector, useAppDispatch } from "../redux/hooks"
+import { useAppSelector, useAppDispatch } from "../../redux/hooks"
 import { 
     deploymentSlice as slice, 
     fetchDeployment, 
     fetchDeploymentChanges,
     deployToSCM,
     fetchReviews,
+    fetchUserReview,
     approve,
     reject,
-    fetchUserReview,
-} from "../redux/deployment"
+} from "../../redux/deployment"
 import { 
     Deployment, 
     DeploymentStatusEnum, 
     Review,
     ReviewStatusEnum,
     RequestStatus
-} from "../models"
-import { subscribeEvents } from "../apis"
-
-import Main from "./main"
-import ReviewModal from "../components/ReviewModal"
-import Spin from "../components/Spin"
-import DeploymentDescriptor from "../components/DeploymentDescriptor"
-import ReviewerList from "../components/ReviewerList"
-import DeploymentStatusSteps from "../components/DeploymentStatusSteps"
-
-interface Params {
-    namespace: string
-    name: string
-    number: string
-}
+} from "../../models"
+import { subscribeEvents } from "../../apis"
+
+import Main from "../main"
+import HeaderBreadcrumb, { HeaderBreadcrumbProps } from "./HeaderBreadcrumb"
+import ReviewButton, { ReviewButtonProps } from "./ReviewButton"
+import ReviewerList, { ReviewListProps } from "./ReviewList"
+import DeploymentDescriptor, { DeploymentDescriptorProps } from "./DeploymentDescriptor"
+import DeploymentStatusSteps from "./DeploymentStatusSteps"
+import Spin from "../../components/Spin"
+
+// It makes the view by binding the state to the deployment page.
+export default (): JSX.Element => {
+    const { namespace, name, number } = useParams<{
+        namespace: string,
+        name: string,
+        number: string,
+    }>()
 
-export default function DeploymentView(): JSX.Element {
-    const { namespace, name, number } = useParams<Params>()
     const { 
         display,
         deployment, 
         changes,
         deploying,
         reviews,
-        userReview,
+        userReview: review,
     } = useAppSelector(state => state.deployment, shallowEqual )
     const dispatch = useAppDispatch()
 
@@ -71,8 +72,8 @@ export default function DeploymentView(): JSX.Element {
         // eslint-disable-next-line 
     }, [dispatch])
 
-    const onClickDeploy = () => {
-        dispatch(deployToSCM())
+    const onClickApprove = (comment: string) => {
+        dispatch(approve(comment))
     }
 
     const onClickApproveAndDeploy = (comment: string) => {
@@ -85,16 +86,12 @@ export default function DeploymentView(): JSX.Element {
         f()
     }
 
-    const onClickApprove = (comment: string) => {
-       dispatch(approve(comment))
-    }
-
     const onClickReject = (comment: string) => {
         dispatch(reject(comment))
     }
 
-    const onBack = () => {
-        window.location.href = `/${namespace}/${name}`
+    const onClickDeploy = () => {
+        dispatch(deployToSCM())
     }
 
     if (!display) {
@@ -118,18 +115,52 @@ export default function DeploymentView(): JSX.Element {
         )
     }
 
-    const reviewBtn = (userReview)?
-        <ReviewModal 
-            key={0}
-            review={userReview}
-            onClickApproveAndDeploy={onClickApproveAndDeploy}
-            onClickApprove={onClickApprove}
-            onClickReject={onClickReject}
-        />:
-        <></>
-
     return (
         <Main>
+            <DeploymentPage 
+                namespace={namespace}
+                name={name}
+                number={number}
+                deploying={deploying}
+                deployment={deployment}
+                changes={changes}
+                reviews={reviews}
+                review={review}
+                onClickApprove={onClickApprove}
+                onClickApproveAndDeploy={onClickApproveAndDeploy}
+                onClickReject={onClickReject}
+                onClickDeploy={onClickDeploy}
+            />
+        </Main>
+    )
+}
+
+interface DeploymentPageProps extends HeaderBreadcrumbProps, ReviewButtonProps, ReviewListProps, DeploymentDescriptorProps {
+    deploying: RequestStatus
+    onClickDeploy(): void
+}
+
+function DeploymentPage({
+    namespace,
+    name,
+    number,
+    deploying,
+    deployment,
+    changes,
+    reviews,
+    review,
+    onClickApprove,
+    onClickApproveAndDeploy,
+    onClickReject,
+    onClickDeploy,
+}: DeploymentPageProps): JSX.Element {
+
+    const onBack = () => {
+        window.location.href = `/${namespace}/${name}`
+    }
+
+    return (
+        <>
             <Helmet>
                 <title>Deployment #{number} - {namespace}/{name}</title>
             </Helmet>
@@ -137,27 +168,34 @@ export default function DeploymentView(): JSX.Element {
                 <PageHeader
                     title={`Deployment #${number}`}
                     breadcrumb={
-                        <Breadcrumb>
-                            <Breadcrumb.Item>
-                                <a href="/">Repositories</a>
-                            </Breadcrumb.Item>
-                            <Breadcrumb.Item>{namespace}</Breadcrumb.Item>
-                            <Breadcrumb.Item>
-                                <a href={`/${namespace}/${name}`}>{name}</a>
-                            </Breadcrumb.Item>
-                            <Breadcrumb.Item>Deployments</Breadcrumb.Item>
-                            <Breadcrumb.Item>{number}</Breadcrumb.Item>
-                        </Breadcrumb>}
-                    extra={reviewBtn}
+                        <HeaderBreadcrumb 
+                            namespace={namespace} 
+                            name={name} 
+                            number={number} 
+                        />
+                    }
+                    extra={
+                        <ReviewButton 
+                            review={review} 
+                            onClickApprove={onClickApprove}
+                            onClickApproveAndDeploy={onClickApproveAndDeploy}
+                            onClickReject={onClickReject}
+                        />
+                    }
                     onBack={onBack} 
                 />
             </div>
             <Row>
                 <Col  span={23} offset={1} lg={{span: 13, offset: 1}}>
-                    <DeploymentDescriptor commits={changes} deployment={deployment}/>
+                    <DeploymentDescriptor 
+                        changes={changes} 
+                        deployment={deployment}
+                    />
                 </Col>
                 <Col span={23} offset={1}  lg={{span: 6, offset: 2}}>
-                   <ReviewerList reviews={reviews}/> 
+                    <ReviewerList 
+                        reviews={reviews}
+                    /> 
                 </Col>
             </Row>
             <Row style={{marginTop: 40}}>
@@ -187,7 +225,7 @@ export default function DeploymentView(): JSX.Element {
                         </Button>}
                 </Col>
             </Row>
-        </Main>
+        </>
     )
 }