diff --git a/desktop/src/pages/_app.tsx b/desktop/src/pages/_app.tsx
index d7e240d..ae3ddef 100644
--- a/desktop/src/pages/_app.tsx
+++ b/desktop/src/pages/_app.tsx
@@ -4,7 +4,7 @@ import SystemInfoStore from "@/store/sys-info";
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
 import WifiStatus from "@/store/wifi-status";
-
+import "remixicon/fonts/remixicon.css";
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
diff --git a/desktop/src/pages/connection/desktop.tsx b/desktop/src/pages/connection/desktop.tsx
new file mode 100644
index 0000000..c537300
--- /dev/null
+++ b/desktop/src/pages/connection/desktop.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import Heading from "@/components/Heading";
+import Text from "@/components/Text";
+import View from "@/components/View";
+import PageLayout from "@/components/layout/PageLayout";
+import { SystemInformationContext } from "@/store/sys-info";
+import { useContext } from "react";
+import { writeText } from "@tauri-apps/api/clipboard";
+import { message } from "@tauri-apps/api/dialog";
+
+export default function ConnectionPage() {
+  const { port } = useContext(SystemInformationContext);
+
+  const copyToClipboard = async () => {
+    writeText(port.toString())
+      .then(async () => {
+        message("Text Copied", { title: "Tauri", type: "info" });
+      })
+      .then(() => {
+        console.log("here goes nothing");
+      });
+  };
+  return (
+    <>
+      <PageLayout pageTitle={"Connect Device"} includeSearchBar={false}>
+        <View
+          className=" text-center flex flex-col justify-center items-center"
+          style={{ height: "500px" }}
+        >
+          <View>
+            <Heading className="mt-8 text-3xl text-gray-700">
+              Connect Device
+            </Heading>
+            <Text className="mb-8 leading-5">
+              Provide the client id in the peer device
+            </Text>
+
+            <View className="flex items-center justify-center">
+              <span className="text-5xl" onClick={copyToClipboard}>
+                #{port}
+              </span>
+              <i className="ri-file-copy-line text-4xl ml-3 cursor-pointer hover:text-app"></i>
+            </View>
+          </View>
+        </View>
+      </PageLayout>
+    </>
+  );
+}
diff --git a/desktop/src/pages/connection/hotspot.tsx b/desktop/src/pages/connection/hotspot.tsx
new file mode 100644
index 0000000..c55b5b1
--- /dev/null
+++ b/desktop/src/pages/connection/hotspot.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import Heading from "@/components/Heading";
+import View from "@/components/View";
+import PageLayout from "@/components/layout/PageLayout";
+import { Text } from "@filesync/components";
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  RadioIcon,
+  WifiIcon,
+} from "@heroicons/react/24/outline";
+
+export default function ConnectionPage() {
+  return (
+    <>
+      <PageLayout pageTitle={"Connect Device"} includeSearchBar={false}>
+        <View className=" text-center flex flex-col justify-center items-center h-[500px]">
+          <View>
+            <WifiIcon className="w-6 h-6 mb-4 text-center" />
+            <Heading className=" text-gray-700 text-2xl">
+              Network Configuration
+            </Heading>
+            <Text> Connect to the network on peer device</Text>
+            <View className="flex flex-col justify-between items-center mt-8">
+          
+            </View>
+          </View>
+        </View>
+      </PageLayout>
+    </>
+  );
+}
diff --git a/desktop/src/pages/connection/index.tsx b/desktop/src/pages/connection/index.tsx
new file mode 100644
index 0000000..5460e73
--- /dev/null
+++ b/desktop/src/pages/connection/index.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import Heading from "@/components/Heading";
+import View from "@/components/View";
+import PageLayout from "@/components/layout/PageLayout";
+import { Text } from "@filesync/components";
+import { ArrowDownIcon, ArrowUpIcon } from "@heroicons/react/24/outline";
+
+export default function ConnectionPage() {
+  return (
+    <>
+      <PageLayout pageTitle={"Connect Device"} includeSearchBar={false}>
+        <View className=" text-center flex flex-col justify-center items-center h-[500px]">
+          <View>
+            <Heading className=" text-gray-700  text-2xl">
+              What would you like to do?
+            </Heading>
+            <Text>some lorem text blablabla</Text>
+
+            <View className="flex justify-between items-center mt-8">
+              <a
+                href="/connection/hotspot"
+                className="flex flex-col items-center "
+              >
+                <ArrowUpIcon className=" bg-gray-200 hover:bg-app-50 hover:text-app transition-all duration-200  p-4 rounded-xl shadow hover:shadow-none cursor-pointer"></ArrowUpIcon>
+                <Text className="mt-2">Send File</Text>
+              </a>
+              <a
+                href="/connection/peer"
+                className="flex flex-col items-center "
+              >
+                <ArrowDownIcon className="bg-gray-200 hover:bg-app-50 hover:text-app transition-all duration-200 p-4 rounded-xl shadow hover:shadow-none cursor-pointer w-[70px] h-[70px]"></ArrowDownIcon>
+                <Text className="mt-2">Recieve File</Text>
+              </a>
+            </View>
+          </View>
+        </View>
+      </PageLayout>
+    </>
+  );
+}
diff --git a/desktop/src/pages/connection.tsx b/desktop/src/pages/connection/mobile.tsx
similarity index 75%
rename from desktop/src/pages/connection.tsx
rename to desktop/src/pages/connection/mobile.tsx
index 2234f7a..05da42d 100644
--- a/desktop/src/pages/connection.tsx
+++ b/desktop/src/pages/connection/mobile.tsx
@@ -1,12 +1,12 @@
 "use client";
 
+import Heading from "@/components/Heading";
 import Text from "@/components/Text";
 import View from "@/components/View";
 import PageLayout from "@/components/layout/PageLayout";
-import QRCode from "react-qr-code";
-import { useContext } from "react";
 import { SystemInformationContext } from "@/store/sys-info";
-import Heading from "@/components/Heading";
+import { useContext } from "react";
+import QRCode from "react-qr-code";
 
 export default function ConnectionPage() {
   const { serverBaseUrl } = useContext(SystemInformationContext);
@@ -18,17 +18,18 @@ export default function ConnectionPage() {
           className=" text-center flex flex-col justify-center items-center"
           style={{ height: "600px" }}
         >
-          
           <QRCode
-            value={serverBaseUrl? serverBaseUrl : " "}
-            size={256}
-            fgColor="#111827"
+            value={serverBaseUrl ? serverBaseUrl : " "}
+            size={200}
+            fgColor="#101010"
           />
 
           <View>
-            <Heading className="mt-8 text-gray-700">Connect Device</Heading>
+            <Heading className="mt-8 text-3xl text-gray-700">
+              Connect Device
+            </Heading>
             <Text className="mb-8 leading-5">
-              Scan the QR code below to connect your device
+              Scan the QR code to connect your device
             </Text>
           </View>
         </View>
diff --git a/desktop/src/pages/connection/peer.tsx b/desktop/src/pages/connection/peer.tsx
new file mode 100644
index 0000000..551e4e4
--- /dev/null
+++ b/desktop/src/pages/connection/peer.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import Heading from "@/components/Heading";
+import Text from "@/components/Text";
+import View from "@/components/View";
+import PageLayout from "@/components/layout/PageLayout";
+import { LinuxOutlined } from "@ant-design/icons";
+
+export default function ConnectionPage() {
+  return (
+    <>
+      <PageLayout pageTitle={"Connect Device"} includeSearchBar={false}>
+        <View className=" text-center flex flex-col justify-center items-center h-[500px]">
+          <View>
+            <Heading className=" text-gray-700 text-2xl">
+              Select Device
+            </Heading>
+            <Text className="mb-8 mt-1  leading-1">
+              Select device type to begin
+            </Text>
+          </View>
+
+          <View className="flex items-center gap-6 justify-center text-4xl font-thin">
+            <a
+              href="/connection/desktop"
+              className="  bg-gray-200 hover:bg-app-50 hover:text-app transition-all duration-200  p-8 box-border rounded-full shadow hover:shadow-none cursor-pointer w-[70px] h-[70px] flex justify-center items-center"
+            >
+              <LinuxOutlined />
+            </a>
+            <a
+              href="/connection/mobile"
+              className="ri-android-fill  bg-gray-200 hover:bg-app-50 hover:text-app transition-all duration-200  box-border p-8 rounded-full shadow hover:shadow-none cursor-pointer w-[70px] h-[70px] flex justify-center items-center"
+            ></a>
+            <a
+              href="/connection/desktop"
+              className="ri-windows-fill  bg-gray-200 hover:bg-app-50 hover:text-app transition-all duration-200  p-8 rounded-full shadow hover:shadow-none cursor-pointer w-[70px] h-[70px] flex justify-center items-center"
+            ></a>
+            <a
+              href="/connection/desktop"
+              className="ri-apple-fill  bg-gray-200 hover:bg-app-50 hover:text-app transition-all duration-200  p-8 rounded-full shadow hover:shadow-none cursor-pointer w-[70px] h-[70px] flex justify-center items-center"
+            ></a>
+          </View>
+        </View>
+      </PageLayout>
+    </>
+  );
+}