diff --git a/src/people/WorkSpacePlanner/WorkspacePlannerHeader/index.tsx b/src/people/WorkSpacePlanner/WorkspacePlannerHeader/index.tsx
new file mode 100644
index 00000000..eec3ae04
--- /dev/null
+++ b/src/people/WorkSpacePlanner/WorkspacePlannerHeader/index.tsx
@@ -0,0 +1,152 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { EuiText } from '@elastic/eui';
+import MaterialIcon from '@material/react-material-icon';
+import { Workspace } from 'store/interface';
+import { useStores } from '../../../store';
+import { userCanManageBounty } from '../../../helpers';
+import { PostModal } from '../../widgetViews/postBounty/PostModal';
+import { colors } from '../../../config';
+import {
+ FillContainer,
+ ImageContainer,
+ CompanyNameAndLink,
+ CompanyLabel,
+ UrlButtonContainer,
+ UrlButton,
+ RightHeader,
+ CompanyDescription,
+ Button,
+ Filters,
+ FiltersRight,
+ NewStatusContainer,
+ StatusContainer,
+ InnerContainer
+} from '../../../pages/tickets/workspace/workspaceHeader/WorkspaceHeaderStyles';
+
+import { Header, Leftheader } from '../../../pages/tickets/style';
+import addBounty from '../../../pages/tickets/workspace/workspaceHeader/Icons/addBounty.svg';
+import websiteIcon from '../../../pages/tickets/workspace/workspaceHeader/Icons/websiteIcon.svg';
+import githubIcon from '../../../pages/tickets/workspace/workspaceHeader/Icons/githubIcon.svg';
+
+const color = colors['light'];
+
+interface WorkspacePlannerHeaderProps {
+ workspace_uuid: string;
+ workspaceData: Workspace;
+}
+
+export const WorkspacePlannerHeader = ({
+ workspace_uuid,
+ workspaceData
+}: WorkspacePlannerHeaderProps) => {
+ const { main, ui } = useStores();
+ const [isPostBountyModalOpen, setIsPostBountyModalOpen] = useState(false);
+ const [canPostBounty, setCanPostBounty] = useState(false);
+
+ const checkUserPermissions = useCallback(async () => {
+ const hasPermission = await userCanManageBounty(workspace_uuid, ui.meInfo?.pubkey, main);
+ setCanPostBounty(hasPermission);
+ }, [workspace_uuid, ui.meInfo, main]);
+
+ useEffect(() => {
+ checkUserPermissions();
+ }, [checkUserPermissions]);
+
+ const handlePostBountyClick = () => {
+ setIsPostBountyModalOpen(true);
+ };
+
+ const handleWebsiteButton = (websiteUrl: string) => {
+ window.open(websiteUrl, '_blank');
+ };
+
+ const handleGithubButton = (githubUrl: string) => {
+ window.open(githubUrl, '_blank');
+ };
+
+ const { name, img, description, website, github } = workspaceData || {};
+ const selectedWidget = 'bounties';
+
+ return (
+ <>
+
+
+
+
+
+ {name}
+
+ {website && (
+ handleWebsiteButton(website)}>
+ 
+ Website
+
+ )}
+ {github && (
+ handleGithubButton(github)}>
+ 
+ Github
+
+ )}
+
+
+
+
+ {description}
+ {canPostBounty && (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ Feature
+
+
+
+
+
+
+
+
+
+
+ Phase
+
+
+
+
+
+
+
+
+
+
+ Status
+
+
+
+
+
+
+
+
+
+
+ setIsPostBountyModalOpen(false)}
+ />
+
+ );
+};
diff --git a/src/people/WorkSpacePlanner/index.tsx b/src/people/WorkSpacePlanner/index.tsx
index d14a02c2..01d43067 100644
--- a/src/people/WorkSpacePlanner/index.tsx
+++ b/src/people/WorkSpacePlanner/index.tsx
@@ -1,9 +1,62 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { useParams } from 'react-router-dom';
+import { EuiLoadingSpinner } from '@elastic/eui';
+import styled from 'styled-components';
+import { useStores } from '../../store';
+import { colors } from '../../config';
+import { WorkspacePlannerHeader } from './WorkspacePlannerHeader';
-const WorkspacePlanner = () => (
-
-
Welcome to the new Workspace Planner
-
-);
+const PlannerContainer = styled.div`
+ padding: 0;
+ height: calc(100vh - 65px);
+ background: ${colors.light.grayish.G950};
+ overflow-y: auto;
+`;
-export default WorkspacePlanner;
+const ContentArea = styled.div`
+ width: 90%;
+ margin: 20px auto;
+ background: white;
+ border-radius: 8px;
+ min-height: 500px;
+ text-align: center;
+ padding: 20px;
+`;
+
+const WorkspacePlanner = () => {
+ const { uuid } = useParams<{ uuid: string }>();
+ const { main } = useStores();
+ const [loading, setLoading] = useState(true);
+ const [workspaceData, setWorkspaceData] = useState(null);
+
+ useEffect(() => {
+ const fetchWorkspaceData = async () => {
+ if (!uuid) return;
+ const data = await main.getUserWorkspaceByUuid(uuid);
+ setWorkspaceData(data);
+ setLoading(false);
+ };
+
+ fetchWorkspaceData();
+ }, [main, uuid]);
+
+ if (loading) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ Welcome to the new Workspace Planner
+
+
+ );
+};
+
+export default observer(WorkspacePlanner);