+ {!hasNoPositions && (
+
+ {isClosedTab && (
+
+ )}
+
+
+ )}
+ {shouldShowEmptyMessage ? (
+
+ ) : (
+ shouldShowContractCards && (
+
+ {shouldShowTakeProfit && (
+
+ )}
+ {contractCards}
+
+ )
+ )}
+
+ );
+});
+
+export default PositionsContent;
diff --git a/packages/trader/src/AppV2/Containers/Positions/positions.scss b/packages/trader/src/AppV2/Containers/Positions/positions.scss
index e69de29bb2d1..43f460db88bf 100644
--- a/packages/trader/src/AppV2/Containers/Positions/positions.scss
+++ b/packages/trader/src/AppV2/Containers/Positions/positions.scss
@@ -0,0 +1,63 @@
+$TABS_HEIGHT: var(--core-size-2400);
+
+.positions-page {
+ height: 100%;
+ background-color: var(--core-color-solid-slate-75);
+ position: relative;
+
+ .tab-list--container {
+ display: block;
+ justify-content: unset;
+ background-color: var(--core-color-solid-slate-50);
+
+ button {
+ width: 50%;
+ }
+ }
+ &__tabs {
+ height: 100%;
+
+ &-content {
+ height: calc(100% - $TABS_HEIGHT);
+ overflow-y: hidden;
+
+ & > div {
+ height: 100%;
+
+ .positions-page {
+ &__open,
+ &__closed {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ overflow-y: scroll;
+ }
+ }
+ }
+ }
+ }
+ &__filter {
+ &__wrapper {
+ padding: var(--core-spacing-400);
+ display: flex;
+ gap: var(--core-spacing-400);
+ overflow-x: auto;
+ min-height: var(--core-spacing-2400);
+ white-space: nowrap;
+
+ -ms-overflow-style: none; /* Internet Explorer 10+ */
+ scrollbar-width: none; /* Firefox */
+
+ &::-webkit-scrollbar {
+ display: none; /* Safari and Chrome */
+ }
+
+ .quill-chip {
+ display: inline-flex;
+ }
+ }
+ }
+ .initial-loader {
+ height: 100%;
+ }
+}
diff --git a/packages/trader/src/AppV2/Containers/Positions/positions.tsx b/packages/trader/src/AppV2/Containers/Positions/positions.tsx
index 815cf0156296..3fa9b81c5ff9 100644
--- a/packages/trader/src/AppV2/Containers/Positions/positions.tsx
+++ b/packages/trader/src/AppV2/Containers/Positions/positions.tsx
@@ -1,8 +1,40 @@
import React from 'react';
-import { Text } from '@deriv-com/quill-ui';
+import { Localize } from '@deriv/translations';
+import { Tab } from '@deriv-com/quill-ui';
+import PositionsContent from './positions-content';
const Positions = () => {
- return