diff --git a/app/client/src/assets/icons/ads/arrow-left-1.svg b/app/client/src/assets/icons/ads/arrow-left-1.svg
new file mode 100644
index 000000000000..5cc8c171ee56
--- /dev/null
+++ b/app/client/src/assets/icons/ads/arrow-left-1.svg
@@ -0,0 +1,3 @@
+
diff --git a/app/client/src/assets/icons/ads/git-merge.svg b/app/client/src/assets/icons/ads/git-merge.svg
new file mode 100644
index 000000000000..62d54cc1d7c8
--- /dev/null
+++ b/app/client/src/assets/icons/ads/git-merge.svg
@@ -0,0 +1,3 @@
+
diff --git a/app/client/src/components/ads/Dropdown.tsx b/app/client/src/components/ads/Dropdown.tsx
index 1b882a8737c7..08a797a1a6c3 100644
--- a/app/client/src/components/ads/Dropdown.tsx
+++ b/app/client/src/components/ads/Dropdown.tsx
@@ -285,6 +285,14 @@ const HeaderWrapper = styled.div`
const SelectedDropDownHolder = styled.div`
display: flex;
align-items: center;
+ min-width: 0;
+ overflow: hidden;
+
+ & ${Text} {
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
`;
const SelectedIcon = styled(Icon)`
diff --git a/app/client/src/constants/messages.ts b/app/client/src/constants/messages.ts
index 472828d37587..50d7a316d0ec 100644
--- a/app/client/src/constants/messages.ts
+++ b/app/client/src/constants/messages.ts
@@ -450,3 +450,5 @@ export const DEPLOY_WITHOUT_GIT = () =>
export const DEPLOY_YOUR_APPLICATION = () => "Deploy your application";
export const COMMIT = () => "COMMIT";
export const PUSH = () => "PUSH";
+export const MERGE_CHANGES = () => "Merge Changes";
+export const SELECT_BRANCH_TO_MERGE = () => "Select branch to merge";
diff --git a/app/client/src/pages/Editor/gitSync/GitSyncModal.tsx b/app/client/src/pages/Editor/gitSync/GitSyncModal.tsx
index 5bd008c5bfd8..f62b3158fd40 100644
--- a/app/client/src/pages/Editor/gitSync/GitSyncModal.tsx
+++ b/app/client/src/pages/Editor/gitSync/GitSyncModal.tsx
@@ -9,6 +9,7 @@ import Menu from "./Menu";
import { MENU_ITEM, MENU_ITEMS } from "./constants";
import GitConnection from "./GitConnection";
import Deploy from "./Deploy/Deploy";
+import Merge from "./Merge";
import Icon from "components/ads/Icon";
import { Colors } from "constants/Colors";
import { Classes } from "./constants";
@@ -56,7 +57,7 @@ function NoopComponent() {
const ComponentsByTab = {
[MENU_ITEM.GIT_CONNECTION]: GitConnection,
[MENU_ITEM.DEPLOY]: Deploy,
- [MENU_ITEM.MERGE]: NoopComponent,
+ [MENU_ITEM.MERGE]: Merge,
[MENU_ITEM.SHARE_APPLICATION]: NoopComponent,
[MENU_ITEM.SETTINGS]: NoopComponent,
};
diff --git a/app/client/src/pages/Editor/gitSync/Merge.tsx b/app/client/src/pages/Editor/gitSync/Merge.tsx
new file mode 100644
index 000000000000..24b1c1b19bb1
--- /dev/null
+++ b/app/client/src/pages/Editor/gitSync/Merge.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+import { Title, Caption, Space } from "./components/StyledComponents";
+import Dropdown from "components/ads/Dropdown";
+
+import {
+ createMessage,
+ MERGE_CHANGES,
+ SELECT_BRANCH_TO_MERGE,
+} from "constants/messages";
+import { ReactComponent as MergeIcon } from "assets/icons/ads/git-merge.svg";
+import { ReactComponent as LeftArrow } from "assets/icons/ads/arrow-left-1.svg";
+
+import styled from "styled-components";
+import * as log from "loglevel";
+import Button, { Size } from "components/ads/Button";
+
+const Row = styled.div`
+ display: flex;
+ align-items: center;
+`;
+
+// mock data
+const options = [
+ { label: "Master", value: "master" },
+ {
+ label: "Feature/new",
+ value: "Feature/new",
+ },
+];
+
+export default function Merge() {
+ return (
+ <>
+ {createMessage(MERGE_CHANGES)}
+ {createMessage(SELECT_BRANCH_TO_MERGE)}
+
+
+
+
+ {
+ log.debug("selected");
+ }}
+ options={options}
+ selected={{ label: "Master", value: "master" }}
+ showLabelOnly
+ width={"220px"}
+ />
+
+
+
+ {
+ log.debug("selected");
+ }}
+ options={options}
+ selected={{
+ label: "Feature/new-feature",
+ value: "Feature/new-feature",
+ }}
+ showLabelOnly
+ width={"220px"}
+ />
+
+
+
+
+ );
+}