diff --git a/apps/app/components/views/delete-view-modal.tsx b/apps/app/components/views/delete-view-modal.tsx
new file mode 100644
index 000000000..a9688b4f5
--- /dev/null
+++ b/apps/app/components/views/delete-view-modal.tsx
@@ -0,0 +1,152 @@
+import React, { useRef, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import viewsService from "services/views.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button } from "components/ui";
+// icons
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+// types
+import type { IView } from "types";
+// fetch-keys
+import { VIEWS_LIST } from "constants/fetch-keys";
+
+type Props = {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  data?: IView;
+};
+
+export const DeleteViewModal: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const cancelButtonRef = useRef(null);
+
+  const handleClose = () => {
+    setIsOpen(false);
+    setIsDeleteLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    setIsDeleteLoading(true);
+
+    if (!workspaceSlug || !data) return;
+    await viewsService
+      .deleteView(projectId as string, data.id)
+      .then(() => {
+        mutate(VIEWS_LIST(projectId as string));
+        router.push(`/${workspaceSlug}/projects/${projectId}/issues`);
+        handleClose();
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "View deleted successfully.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "View could not be deleted. Please try again.",
+        });
+        setIsDeleteLoading(false);
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog
+        as="div"
+        className="relative z-20"
+        initialFocus={cancelButtonRef}
+        onClose={handleClose}
+      >
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+                <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="sm:flex sm:items-start">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                      <ExclamationTriangleIcon
+                        className="h-6 w-6 text-red-600"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
+                        Delete View
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <p className="text-sm text-gray-500">
+                          Are you sure you want to delete view - {`"`}
+                          <span className="italic">{data?.name}</span>
+                          {`?"`} All of the data related to the view will be permanently removed.
+                          This action cannot be undone.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+                  <Button
+                    type="button"
+                    onClick={handleDeletion}
+                    theme="danger"
+                    disabled={isDeleteLoading}
+                    className="inline-flex sm:ml-3"
+                  >
+                    {isDeleteLoading ? "Deleting..." : "Delete"}
+                  </Button>
+                  <Button
+                    type="button"
+                    theme="secondary"
+                    className="inline-flex sm:ml-3"
+                    onClick={handleClose}
+                    ref={cancelButtonRef}
+                  >
+                    Cancel
+                  </Button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/apps/app/components/views/form.tsx b/apps/app/components/views/form.tsx
new file mode 100644
index 000000000..d331b17c3
--- /dev/null
+++ b/apps/app/components/views/form.tsx
@@ -0,0 +1,101 @@
+import { useEffect } from "react";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// ui
+import { Button, Input, TextArea } from "components/ui";
+// types
+import { IView } from "types";
+
+type Props = {
+  handleFormSubmit: (values: IView) => Promise<void>;
+  handleClose: () => void;
+  status: boolean;
+  data?: IView;
+};
+
+const defaultValues: Partial<IView> = {
+  name: "",
+  description: "",
+};
+
+export const ViewForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status, data }) => {
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+  } = useForm<IView>({
+    defaultValues,
+  });
+
+  const handleCreateUpdateView = async (formData: IView) => {
+    await handleFormSubmit(formData);
+
+    reset({
+      ...defaultValues,
+    });
+  };
+
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...data,
+    });
+  }, [data, reset]);
+
+  return (
+    <form onSubmit={handleSubmit(handleCreateUpdateView)}>
+      <div className="space-y-5">
+        <h3 className="text-lg font-medium leading-6 text-gray-900">
+          {status ? "Update" : "Create"} View
+        </h3>
+        <div className="space-y-3">
+          <div>
+            <Input
+              id="name"
+              label="Name"
+              name="name"
+              type="name"
+              placeholder="Enter name"
+              autoComplete="off"
+              error={errors.name}
+              register={register}
+              validations={{
+                required: "Name is required",
+                maxLength: {
+                  value: 255,
+                  message: "Name should be less than 255 characters",
+                },
+              }}
+            />
+          </div>
+          <div>
+            <TextArea
+              id="description"
+              name="description"
+              label="Description"
+              placeholder="Enter description"
+              error={errors.description}
+              register={register}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="mt-5 flex justify-end gap-2">
+        <Button theme="secondary" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button type="submit" disabled={isSubmitting}>
+          {status
+            ? isSubmitting
+              ? "Updating View..."
+              : "Update View"
+            : isSubmitting
+            ? "Creating View..."
+            : "Create View"}
+        </Button>
+      </div>
+    </form>
+  );
+};
diff --git a/apps/app/components/views/index.ts b/apps/app/components/views/index.ts
new file mode 100644
index 000000000..9a2c56a4e
--- /dev/null
+++ b/apps/app/components/views/index.ts
@@ -0,0 +1,3 @@
+export * from "./delete-view-modal";
+export * from "./form";
+export * from "./modal";
diff --git a/apps/app/components/views/modal.tsx b/apps/app/components/views/modal.tsx
new file mode 100644
index 000000000..d3b49c6d7
--- /dev/null
+++ b/apps/app/components/views/modal.tsx
@@ -0,0 +1,148 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import viewsService from "services/views.service";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { ViewForm } from "components/views";
+// types
+import { IView } from "types";
+// fetch-keys
+import { VIEWS_LIST } from "constants/fetch-keys";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  data?: IView;
+};
+
+const defaultValues: Partial<IView> = {
+  name: "",
+  description: "",
+};
+
+export const CreateUpdateViewModal: React.FC<Props> = ({ isOpen, handleClose, data }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const onClose = () => {
+    handleClose();
+    reset(defaultValues);
+  };
+
+  const { reset } = useForm<IView>({
+    defaultValues,
+  });
+
+  const createView = async (payload: IView) => {
+    await viewsService
+      .createView(workspaceSlug as string, projectId as string, payload)
+      .then(() => {
+        mutate(VIEWS_LIST(projectId as string));
+        handleClose();
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "View created successfully.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "View could not be created. Please try again.",
+        });
+      });
+  };
+
+  const updateView = async (payload: IView) => {
+    await viewsService
+      .updateView(workspaceSlug as string, projectId as string, data?.id ?? "", payload)
+      .then((res) => {
+        mutate<IView[]>(
+          VIEWS_LIST(projectId as string),
+          (prevData) =>
+            prevData?.map((p) => {
+              if (p.id === res.id) return { ...p, ...payload };
+
+              return p;
+            }),
+          false
+        );
+        onClose();
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "View updated successfully.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "View could not be updated. Please try again.",
+        });
+      });
+  };
+
+  const handleFormSubmit = async (formData: IView) => {
+    if (!workspaceSlug || !projectId) return;
+
+    if (!data) await createView(formData);
+    else await updateView(formData);
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <ViewForm
+                  handleFormSubmit={handleFormSubmit}
+                  handleClose={handleClose}
+                  status={data ? true : false}
+                  data={data}
+                />
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/apps/app/constants/fetch-keys.ts b/apps/app/constants/fetch-keys.ts
index cb34ac92f..a7903c1cb 100644
--- a/apps/app/constants/fetch-keys.ts
+++ b/apps/app/constants/fetch-keys.ts
@@ -36,21 +36,25 @@ export const PROJECT_GITHUB_REPOSITORY = (projectId: string) =>
 
 export const CYCLE_LIST = (projectId: string) => `CYCLE_LIST_${projectId}`;
 export const CYCLE_ISSUES = (cycleId: string) => `CYCLE_ISSUES_${cycleId}`;
-export const CYCLE_DETAILS = (cycleId: string) => `CYCLE_DETAIL_${cycleId}`;
+export const CYCLE_DETAILS = (cycleId: string) => `CYCLE_DETAILS_${cycleId}`;
 export const CYCLE_CURRENT_AND_UPCOMING_LIST = (projectId: string) =>
   `CYCLE_CURRENT_AND_UPCOMING_LIST_${projectId}`;
 export const CYCLE_DRAFT_LIST = (projectId: string) => `CYCLE_DRAFT_LIST_${projectId}`;
 export const CYCLE_COMPLETE_LIST = (projectId: string) => `CYCLE_COMPLETE_LIST_${projectId}`;
 
 export const STATE_LIST = (projectId: string) => `STATE_LIST_${projectId}`;
-export const STATE_DETAIL = "STATE_DETAIL";
+export const STATE_DETAIL = "STATE_DETAILS";
 
 export const USER_ISSUE = (workspaceSlug: string) => `USER_ISSUE_${workspaceSlug}`;
 export const USER_PROJECT_VIEW = (projectId: string) => `USER_PROJECT_VIEW_${projectId}`;
 
 export const MODULE_LIST = (projectId: string) => `MODULE_LIST_${projectId}`;
 export const MODULE_ISSUES = (moduleId: string) => `MODULE_ISSUES_${moduleId}`;
-export const MODULE_DETAILS = (moduleId: string) => `MODULE_DETAIL_${moduleId}`;
+export const MODULE_DETAILS = (moduleId: string) => `MODULE_DETAILS_${moduleId}`;
+
+export const VIEWS_LIST = (projectId: string) => `VIEWS_LIST_${projectId}`;
+export const VIEW_ISSUES = (viewId: string) => `VIEW_ISSUES_${viewId}`;
+export const VIEW_DETAILS = (viewId: string) => `VIEW_DETAILS_${viewId}`;
 
 // Issues
 export const ISSUE_DETAILS = (issueId: string) => `ISSUE_DETAILS_${issueId}`;
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
new file mode 100644
index 000000000..a3ab9b22b
--- /dev/null
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
@@ -0,0 +1,98 @@
+import { useRouter } from "next/router";
+import { GetServerSidePropsContext } from "next";
+
+import useSWR from "swr";
+
+// lib
+import { requiredAdmin, requiredAuth } from "lib/auth";
+// services
+import projectService from "services/project.service";
+import viewsService from "services/views.service";
+// layouts
+import AppLayout from "layouts/app-layout";
+// components
+import { CreateUpdateViewModal, DeleteViewModal } from "components/views";
+// ui
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// types
+import { UserAuth } from "types";
+// fetch-keys
+import { PROJECT_DETAILS, VIEW_DETAILS, VIEW_ISSUES } from "constants/fetch-keys";
+
+const SingleView: React.FC<UserAuth> = (props) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, viewId } = router.query;
+
+  const { data: activeProject } = useSWR(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: viewDetails } = useSWR(
+    workspaceSlug && projectId && viewId ? VIEW_DETAILS(viewId as string) : null,
+    workspaceSlug && projectId && viewId
+      ? () =>
+          viewsService.getViewDetails(
+            workspaceSlug as string,
+            projectId as string,
+            viewId as string
+          )
+      : null
+  );
+
+  const { data: viewIssues } = useSWR(
+    workspaceSlug && projectId && viewId ? VIEW_ISSUES(viewId as string) : null,
+    workspaceSlug && projectId && viewId
+      ? () =>
+          viewsService.getViewIssues(workspaceSlug as string, projectId as string, viewId as string)
+      : null
+  );
+
+  return (
+    <AppLayout
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem
+            title={`${activeProject?.name ?? "Project"} Views`}
+            link={`/${workspaceSlug}/projects/${activeProject?.id}/cycles`}
+          />
+        </Breadcrumbs>
+      }
+    >
+      Content here
+    </AppLayout>
+  );
+};
+
+export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
+  const user = await requiredAuth(ctx.req?.headers.cookie);
+
+  const redirectAfterSignIn = ctx.resolvedUrl;
+
+  if (!user) {
+    return {
+      redirect: {
+        destination: `/signin?next=${redirectAfterSignIn}`,
+        permanent: false,
+      },
+    };
+  }
+
+  const projectId = ctx.query.projectId as string;
+  const workspaceSlug = ctx.query.workspaceSlug as string;
+
+  const memberDetail = await requiredAdmin(workspaceSlug, projectId, ctx.req?.headers.cookie);
+
+  return {
+    props: {
+      isOwner: memberDetail?.role === 20,
+      isMember: memberDetail?.role === 15,
+      isViewer: memberDetail?.role === 10,
+      isGuest: memberDetail?.role === 5,
+    },
+  };
+};
+
+export default SingleView;
diff --git a/apps/app/services/views.service.ts b/apps/app/services/views.service.ts
new file mode 100644
index 000000000..77b2e82e8
--- /dev/null
+++ b/apps/app/services/views.service.ts
@@ -0,0 +1,85 @@
+// services
+import APIService from "services/api.service";
+// types
+import { IView } from "types/views";
+
+const { NEXT_PUBLIC_API_BASE_URL } = process.env;
+
+class ViewServices extends APIService {
+  constructor() {
+    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  async createView(workspaceSlug: string, projectId: string, data: IView): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateView(
+    workspaceSlug: string,
+    projectId: string,
+    viewId: string,
+    data: IView
+  ): Promise<any> {
+    return this.put(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchView(
+    workspaceSlug: string,
+    projectId: string,
+    viewId: string,
+    data: Partial<IView>
+  ): Promise<any> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteView(projectId: string, viewId: string): Promise<any> {
+    return this.delete(`/api/projects/${projectId}/views/${viewId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getViews(workspaceSlug: string, projectId: string): Promise<IView[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getViewDetails(workspaceSlug: string, projectId: string, viewId: string): Promise<IView> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getViewIssues(workspaceSlug: string, projectId: string, viewId: string): Promise<any> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/issues/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+export default new ViewServices();
diff --git a/apps/app/types/index.d.ts b/apps/app/types/index.d.ts
index 018861fce..324f35d1c 100644
--- a/apps/app/types/index.d.ts
+++ b/apps/app/types/index.d.ts
@@ -6,6 +6,7 @@ export * from "./state";
 export * from "./invitation";
 export * from "./issues";
 export * from "./modules";
+export * from "./views";
 
 export type NestedKeyOf<ObjectType extends object> = {
   [Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object
diff --git a/apps/app/types/views.d.ts b/apps/app/types/views.d.ts
new file mode 100644
index 000000000..2c7a3c89f
--- /dev/null
+++ b/apps/app/types/views.d.ts
@@ -0,0 +1,35 @@
+export interface IView {
+  id: string;
+  access: string;
+  created_at: Date;
+  updated_at: Date;
+  created_by: string;
+  updated_by: string;
+  name: string;
+  description: string;
+  query: {
+    state: string[] | null;
+    parent: string[] | null;
+    labels: string[] | null;
+    assignees: string[] | null;
+    created_by: string[] | null;
+    name: string | null;
+    created_at: [
+      {
+        datetime: string;
+        timeline: "before";
+      },
+      {
+        datetime: string;
+        timeline: "after";
+      }
+    ];
+    updated_at: string[] | null;
+    start_date: string[] | null;
+    target_date: string[] | null;
+    completed_at: string[] | null;
+    type: string;
+  };
+  project: string;
+  workspace: string;
+}