diff --git a/src/assets/colors.scss b/src/assets/colors.scss
index 68cd8205..bfc1170f 100644
--- a/src/assets/colors.scss
+++ b/src/assets/colors.scss
@@ -8,8 +8,8 @@ $gradient-gray: rgba(247, 249, 253, 0.1);
$color-active-button: #989ba3;
$bg-main-color: white;
$gray-light: #dfe1e1;
-$color-pink: #ffd0d7;
-$color-green: #c4eacd;
-$color-yellow: #f2f4be;
-$color-purple: #e4b8d6;
+$color-pink: #ffecf0;
+$color-green: #e7f7eb;
+$color-yellow: #fafbe5;
+$color-purple: #f4e3ee;
$black-80: #333;
diff --git a/src/features/Dashboard/DashboardPage/_test_/index.test.jsx b/src/features/Dashboard/DashboardPage/_test_/index.test.jsx
new file mode 100644
index 00000000..30241c3f
--- /dev/null
+++ b/src/features/Dashboard/DashboardPage/_test_/index.test.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DashboardPage from 'features/Dashboard/DashboardPage';
+import { InstitutionContext } from 'features/Main/institutionContext';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('DashboardPage component', () => {
+ test('renders components', () => {
+ const { getByText } = render(
+
+
+ ,
+ );
+
+ expect(getByText('This week')).toBeInTheDocument();
+ expect(getByText('Next week')).toBeInTheDocument();
+ expect(getByText('Next month')).toBeInTheDocument();
+ expect(getByText('New students registered')).toBeInTheDocument();
+ expect(getByText('Classes scheduled')).toBeInTheDocument();
+ expect(getByText('Welcome to Institution Name')).toBeInTheDocument();
+ });
+});
diff --git a/src/features/Dashboard/DashboardPage/index.jsx b/src/features/Dashboard/DashboardPage/index.jsx
new file mode 100644
index 00000000..e465101b
--- /dev/null
+++ b/src/features/Dashboard/DashboardPage/index.jsx
@@ -0,0 +1,17 @@
+import React, { useContext } from 'react';
+import { Container } from '@edx/paragon';
+import StudentsMetrics from 'features/Students/StudentsMetrics';
+import { InstitutionContext } from 'features/Main/institutionContext';
+
+const DashboardPage = () => {
+ const dataInstitution = useContext(InstitutionContext);
+
+ return (
+
+ {dataInstitution.length === 1 ? `Welcome to ${dataInstitution[0].name}` : 'Select an institution'}
+
+
+ );
+};
+
+export default DashboardPage;
diff --git a/src/features/Main/Sidebar/index.jsx b/src/features/Main/Sidebar/index.jsx
index a5bfbc82..1b12964e 100644
--- a/src/features/Main/Sidebar/index.jsx
+++ b/src/features/Main/Sidebar/index.jsx
@@ -7,7 +7,7 @@ import { faUsers, faUser, faBook } from '@fortawesome/free-solid-svg-icons';
import './index.scss';
export const Sidebar = () => {
- const [activeTab, setActiveTab] = useState('students');
+ const [activeTab, setActiveTab] = useState('dashboard');
const history = useHistory();
const handleTabClick = (tabName) => {
@@ -26,6 +26,17 @@ export const Sidebar = () => {