diff --git a/RelayClient/MainPage.xaml.cs b/RelayClient/MainPage.xaml.cs
index 7d548af..a236d66 100644
--- a/RelayClient/MainPage.xaml.cs
+++ b/RelayClient/MainPage.xaml.cs
@@ -352,7 +352,22 @@ public partial class MainPage : ContentPage
             ViewSwapped.Text = "Swap to Message View";
         }
     }
-    
+
+    public void JoinRtcChannel()
+    {
+        //TODO: get bool value for if channel ID has an active call
+        //TODO: Join RTC using current channel ID
+    }
+
+    public void WriteRtcOffer(string json)
+    {
+        RTCOffer? offer = JsonSerializer.Deserialize<RTCOffer>(json);
+    }
+    private class RTCOffer
+    {
+        private string type { get; set; }
+        private string sdp { get; set; }
+    }
     private void OnSendMessageButtonClicked(object sender, EventArgs e)
     {
         hybridWebView.SendRawMessage($"Hello from C#!");
diff --git a/RelayClient/Resources/Raw/test.css b/RelayClient/Resources/Raw/test.css
index 097b69a..dd8d42e 100644
--- a/RelayClient/Resources/Raw/test.css
+++ b/RelayClient/Resources/Raw/test.css
@@ -1,12 +1,13 @@
-@import url('https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro');
 
 body {
-  font-family: 'Syne Mono', monospace;
+  font-family: 'Anonymous Pro', monospace;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
   margin: 80px 10px;
+  background-color: #666666;
 }
 
 video {
diff --git a/RelayClient/Resources/Raw/wwwroot/index.js b/RelayClient/Resources/Raw/wwwroot/index.js
index 83dfcbe..f10133b 100644
--- a/RelayClient/Resources/Raw/wwwroot/index.js
+++ b/RelayClient/Resources/Raw/wwwroot/index.js
@@ -4,6 +4,17 @@ let currentUsername = null;
 let currentChannelId = null;
 let availableCameras = [];
 let availableMics = [];
+const configuration = {
+    iceServers:[
+        {
+            urls:[
+                'stun:stun1.l.google.com:19302',
+                'stun:stun2.l.google.com:19302',
+            ],
+        },
+    ],
+    iceCandidatePoolSize: 10,
+}
 
 window.setUsername = function(name) {
     currentUsername = name;
@@ -86,7 +97,6 @@ async function ensurePeerConnection() {
         LogMessage("ICE gathering state: " + peerConnection.iceGatheringState);
     };
 }
-
 async function ensureLocalMedia() {
     if (localStream) return;
 
@@ -157,8 +167,7 @@ async function joinChannelCall() {
     LogMessage("Current username: " + currentUsername);
     LogMessage("Current channel: " + currentChannelId);
     //TODO: Update Server DB to hold bool if channel has an active call
-    //TODO: First check if channel already has an active offer, if it does join with an answer, otherwise make a new offer
-    
+    //TODO: First check if channel already has an active offer, if it does join with an answer, otherwise make a new offer    
     try {
         if (!currentChannelId) {
             LogMessage("No current channel set.");
@@ -183,9 +192,34 @@ async function joinChannelCall() {
     }
 }
 
-async function channelCallJoin()
+
+async function ensurePeerConnection2()
 {
-    const activeCall = true; //TODO: Read Surreal DB with channel id for active call
+    if (peerConnection) return;
+    peerConnection = new RTCPeerConnection(configuration);
+
+    peerConnection.addEventListener('icegatheringstatechange', () => {
+        console.log(
+            `ICE gathering state changed: ${peerConnection.iceGatheringState}`);
+    });
+
+    peerConnection.addEventListener('connectionstatechange', () => {
+        console.log(`Connection state change: ${peerConnection.connectionState}`);
+    });
+
+    peerConnection.addEventListener('signalingstatechange', () => {
+        console.log(`Signaling state change: ${peerConnection.signalingState}`);
+    });
+
+    peerConnection.addEventListener('iceconnectionstatechange ', () => {
+        console.log(
+            `ICE connection state change: ${peerConnection.iceConnectionState}`);
+    });
+
+}
+async function channelCallJoin(activeCall, channelId)
+{
+    await ensurePeerConnection2();
     
     if (activeCall)
     {
@@ -214,8 +248,8 @@ async function channelCallJoin()
             }
         }
         
-        const roomRef = "id"; //TODO: Add offer to SurrealDB on server
-        const roomId = roomRef.id;
+        await window.HybridWebView.InvokeDotNet("WriteRtcOffer", [JSON.stringify(offer)]);
+        
         //TODO: Write roomId to surreal DB with channel id as active call
         
         //TODO: Add callback function for when call is answered to replace following code block
@@ -227,6 +261,20 @@ async function channelCallJoin()
                 const answer = new RTCSessionDescription(data.answer)
                 await peerConnection.setRemoteDescription(answer);
             }
+        }); 
+        
+        localStream.getTracks().forEach(track => {
+            peerConnection.addTrack(track, localStream);
+        });
+        
+        //TODO: collect ICE candidates
+        
+        peerConnection.addEventListener('track', event => {
+           LogMessage("Received track: " + event.streams[0]);
+            event.streams[0].getTracks().forEach(track => {
+                LogMessage(`Add a track to the remoteStream: ${track}`);
+                remoteStream.addTrack(track);
+            });
         });
     }