diff --git a/package.json b/package.json
index b67d537d..d4cf1fcf 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "git-info": "rm -rf src/generated/ && mkdir src/generated/ && echo export default \"{\\\"commitHash\\\": \\\"$(git rev-parse --short HEAD)\\\", \\\"version\\\": \\\"$(git describe --tags --always)\\\"};\" > src/generated/gitInfo.ts"
   },
   "dependencies": {
-    "@stellar/design-system": "^2.0.0-beta.1",
+    "@stellar/design-system": "^2.0.0-beta.4",
     "immer": "^10.0.3",
     "next": "14.0.4",
     "react": "^18",
diff --git a/src/components/NetworkSelector/index.tsx b/src/components/NetworkSelector/index.tsx
index b9415086..25886ecb 100644
--- a/src/components/NetworkSelector/index.tsx
+++ b/src/components/NetworkSelector/index.tsx
@@ -14,31 +14,33 @@ import { Network, NetworkType } from "@/types/types";
 
 import "./styles.scss";
 
-// TODO: update input
-
 const NetworkOptions: Network[] = [
   {
     id: "futurenet",
     label: "Futurenet",
-    url: "https://horizon-futurenet.stellar.org",
+    horizonUrl: "https://horizon-futurenet.stellar.org",
+    rpcUrl: "https://rpc-futurenet.stellar.org",
     passphrase: "Test SDF Future Network ; October 2022",
   },
   {
     id: "mainnet",
     label: "Mainnet",
-    url: "https://horizon.stellar.org",
+    horizonUrl: "https://horizon.stellar.org",
+    rpcUrl: "",
     passphrase: "Public Global Stellar Network ; September 2015",
   },
   {
     id: "testnet",
     label: "Testnet",
-    url: "https://horizon-testnet.stellar.org",
+    horizonUrl: "https://horizon-testnet.stellar.org",
+    rpcUrl: "https://soroban-testnet.stellar.org",
     passphrase: "Test SDF Network ; September 2015",
   },
   {
     id: "custom",
     label: "Custom",
-    url: "",
+    horizonUrl: "",
+    rpcUrl: "",
     passphrase: "",
   },
 ];
@@ -51,7 +53,8 @@ export const NetworkSelector = () => {
   const [isDropdownVisible, setIsDropdownVisible] = useState(false);
 
   const initialCustomState = {
-    url: network.id === "custom" ? network.url : "",
+    horizonUrl: network.id === "custom" ? network.horizonUrl : "",
+    rpcUrl: network.id === "custom" ? network.rpcUrl : "",
     passphrase: network.id === "custom" ? network.passphrase : "",
   };
 
@@ -62,9 +65,11 @@ export const NetworkSelector = () => {
   const isSameNetwork = () => {
     if (activeNetworkId === "custom") {
       return (
-        network.url &&
+        network.horizonUrl &&
+        network.rpcUrl &&
         network.passphrase &&
-        customNetwork.url === network.url &&
+        customNetwork.horizonUrl === network.horizonUrl &&
+        customNetwork.rpcUrl === network.rpcUrl &&
         customNetwork.passphrase === network.passphrase
       );
     }
@@ -72,13 +77,13 @@ export const NetworkSelector = () => {
     return activeNetworkId === network.id;
   };
 
-  const isNetworkUrlInvalid = () => {
-    if (activeNetworkId !== "custom" || !customNetwork.url) {
+  const isNetworkUrlInvalid = (url: string) => {
+    if (activeNetworkId !== "custom" || !url) {
       return "";
     }
 
     try {
-      new URL(customNetwork.url);
+      new URL(url);
       return "";
     } catch (e) {
       return "Value is not a valid URL";
@@ -88,8 +93,10 @@ export const NetworkSelector = () => {
   const isSubmitDisabled =
     isSameNetwork() ||
     (activeNetworkId === "custom" &&
-      !(customNetwork.url && customNetwork.passphrase)) ||
-    Boolean(customNetwork.url && isNetworkUrlInvalid());
+      !(customNetwork.horizonUrl && customNetwork.passphrase)) ||
+    Boolean(
+      customNetwork.horizonUrl && isNetworkUrlInvalid(customNetwork.horizonUrl),
+    );
 
   const isCustomNetwork = activeNetworkId === "custom";
 
@@ -136,11 +143,12 @@ export const NetworkSelector = () => {
       toggleDropdown(false);
       setActiveNetworkId(network.id);
       setCustomNetwork({
-        url: network.url ?? "",
+        horizonUrl: network.horizonUrl ?? "",
+        rpcUrl: network.rpcUrl ?? "",
         passphrase: network.passphrase ?? "",
       });
     },
-    [network.id, network.passphrase, network.url],
+    [network.id, network.horizonUrl, network.rpcUrl, network.passphrase],
   );
 
   // Close dropdown when clicked outside
@@ -246,28 +254,58 @@ export const NetworkSelector = () => {
                 tabIndex={0}
               >
                 <NetworkIndicator networkId={op.id} networkLabel={op.label} />
-                <div className="NetworkSelector__body__link__url">{op.url}</div>
+                <div className="NetworkSelector__body__link__url">
+                  {op.horizonUrl}
+                </div>
               </div>
             ))}
           </div>
 
           <div className="NetworkSelector__body__inputs">
             <form onSubmit={handleSelectNetwork}>
+              <Input
+                id="rpc-url"
+                fieldSize="sm"
+                label="RPC URL"
+                value={
+                  isCustomNetwork
+                    ? customNetwork.rpcUrl
+                    : getNetworkById(activeNetworkId)?.rpcUrl
+                }
+                disabled={!isCustomNetwork}
+                onChange={(e) =>
+                  setCustomNetwork({
+                    ...customNetwork,
+                    rpcUrl: e.target.value,
+                  })
+                }
+                error={isNetworkUrlInvalid(customNetwork.rpcUrl)}
+                tabIndex={0}
+                copyButton={{
+                  position: "right",
+                }}
+              />
               <Input
                 id="network-url"
                 fieldSize="sm"
                 label="Horizon URL"
                 value={
                   isCustomNetwork
-                    ? customNetwork.url
-                    : getNetworkById(activeNetworkId)?.url
+                    ? customNetwork.horizonUrl
+                    : getNetworkById(activeNetworkId)?.horizonUrl
                 }
                 disabled={!isCustomNetwork}
                 onChange={(e) =>
-                  setCustomNetwork({ ...customNetwork, url: e.target.value })
+                  setCustomNetwork({
+                    ...customNetwork,
+                    horizonUrl: e.target.value,
+                  })
                 }
-                error={isNetworkUrlInvalid()}
+                error={isNetworkUrlInvalid(customNetwork.horizonUrl)}
                 tabIndex={0}
+                copyButton={{
+                  position: "right",
+                }}
               />
               <Input
                 id="network-passphrase"
@@ -286,6 +324,9 @@ export const NetworkSelector = () => {
                   })
                 }
                 tabIndex={0}
+                copyButton={{
+                  position: "right",
+                }}
               />
               <Button
                 size="sm"
diff --git a/src/components/sds/FieldNote/index.tsx b/src/components/sds/FieldNote/index.tsx
deleted file mode 100644
index 464f1e9e..00000000
--- a/src/components/sds/FieldNote/index.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-import "./styles.scss";
-
-interface FieldNoteProps {
-  variant?: "note" | "error";
-  // TODO: remove "xs" once all form fields are updated
-  size: "sm" | "md" | "lg" | "xs";
-  children: string | React.ReactNode;
-}
-
-export const FieldNote: React.FC<FieldNoteProps> = ({
-  variant = "note",
-  size,
-  children,
-}: FieldNoteProps) => (
-  <div className={`FieldNote FieldNote--${variant} FieldNote--${size}`}>
-    {children}
-  </div>
-);
diff --git a/src/components/sds/FieldNote/styles.scss b/src/components/sds/FieldNote/styles.scss
deleted file mode 100644
index 8479647e..00000000
--- a/src/components/sds/FieldNote/styles.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-@use "../utils.scss" as *;
-
-.FieldNote {
-  --FieldNote-font-size: #{pxToRem(12px)};
-  --FiledNote-line-height: #{pxToRem(18px)};
-
-  font-family: var(--sds-ff-base);
-  font-size: var(--FieldNote-font-size);
-  line-height: var(--FiledNote-line-height);
-  color: var(--sds-clr-gray-11);
-  font-weight: var(--sds-fw-regular);
-
-  // Size
-  &--sm {
-    --FieldNote-font-size: #{pxToRem(12px)};
-    --FiledNote-line-height: #{pxToRem(18px)};
-  }
-
-  &--md {
-    --FieldNote-font-size: #{pxToRem(12px)};
-    --FiledNote-line-height: #{pxToRem(18px)};
-  }
-
-  &--lg {
-    --FieldNote-font-size: #{pxToRem(14px)};
-    --FiledNote-line-height: #{pxToRem(20px)};
-  }
-
-  // Variant
-  &--error {
-    color: var(--sds-clr-red-11);
-  }
-}
diff --git a/src/components/sds/Select/index.tsx b/src/components/sds/Select/index.tsx
deleted file mode 100644
index c7521023..00000000
--- a/src/components/sds/Select/index.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-"use client";
-// TODO: move to SDS
-import React, { cloneElement } from "react";
-// TODO: update imports
-import { Label, Icon } from "@stellar/design-system";
-import { FieldNote } from "../FieldNote";
-import "./styles.scss";
-
-/** Including all valid [select attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attributes). */
-export interface SelectProps {
-  /** ID of the select (should be unique) */
-  id: string;
-  // Note: cannot use "size" here because it's input's native property
-  /** Size of the select */
-  fieldSize: "sm" | "md" | "lg";
-  /** Select options or optgroup with options */
-  children: React.ReactNode;
-  /** Label of the select */
-  label?: string | React.ReactNode;
-  /** Note message of the select */
-  note?: string | React.ReactNode;
-  /** Error message of the select */
-  error?: string | string;
-  /** Make label uppercase */
-  isLabelUppercase?: boolean;
-  /** Select error without a message */
-  isError?: boolean;
-  /** Use a specific select rather than a generic HTML select (useful for Formik or otherwise controlled selects) */
-  customSelect?: React.ReactElement;
-}
-
-interface Props
-  extends SelectProps,
-    React.SelectHTMLAttributes<HTMLSelectElement> {
-  id: string;
-  children: React.ReactNode;
-}
-
-/**
- * The `Select` component is a form `select` element that inherits all native HTML `select` element attributes.
- */
-export const Select: React.FC<Props> = ({
-  id,
-  fieldSize,
-  children,
-  label,
-  note,
-  error,
-  isLabelUppercase,
-  isError,
-  customSelect,
-  ...props
-}: Props) => {
-  const additionalClasses = [
-    `Select--${fieldSize}`,
-    ...(props.disabled ? ["Select--disabled"] : []),
-    ...(isError || error ? ["Select--error"] : []),
-  ].join(" ");
-
-  const baseSelectProps = {
-    id,
-    "aria-invalid": !!(isError || error),
-  };
-
-  return (
-    <div className={`Select ${additionalClasses}`}>
-      {label && (
-        <Label htmlFor={id} isUppercase={isLabelUppercase} size={fieldSize}>
-          {label}
-        </Label>
-      )}
-
-      <div className="Select__container">
-        {customSelect ? (
-          cloneElement(customSelect, { ...baseSelectProps, ...props })
-        ) : (
-          <>
-            <select {...baseSelectProps} {...props}>
-              {children}
-            </select>
-            <span className="Select__icon" aria-hidden="true">
-              <Icon.ChevronDown />
-            </span>
-          </>
-        )}
-      </div>
-
-      {note && <FieldNote size={fieldSize}>{note}</FieldNote>}
-      {error && (
-        <FieldNote size={fieldSize} variant="error">
-          {error}
-        </FieldNote>
-      )}
-    </div>
-  );
-};
-
-Select.displayName = "Select";
diff --git a/src/components/sds/Select/styles.scss b/src/components/sds/Select/styles.scss
deleted file mode 100644
index 5588e5ae..00000000
--- a/src/components/sds/Select/styles.scss
+++ /dev/null
@@ -1,155 +0,0 @@
-@use "../utils.scss" as *;
-
-#root {
-  .Select {
-    // Color
-    --Select-color-background: var(--sds-clr-gray-01);
-    --Select-color-background-option: var(--sds-clr-gray-01);
-    --Select-color-border: var(--sds-clr-gray-06);
-    --Select-color-border-hover: var(--sds-clr-gray-06);
-    --Select-color-border-focus: var(--sds-clr-gray-06);
-    --Select-color-text: var(--sds-clr-gray-12);
-    --Select-color-icon: var(--sds-clr-gray-09);
-
-    --Select-box-shadow-size: 0;
-    --Select-box-shadow-color: var(--sds-input-box-shadow-color-default);
-
-    // Size
-    --Select-font-size: #{pxToRem(12px)};
-    --Select-line-height: #{pxToRem(18px)};
-    --Select-padding-vertical: #{pxToRem(4px)};
-    --Select-padding-horizontal: #{pxToRem(10px)};
-    --Select-gap: #{pxToRem(6px)};
-    --Select-border-radius: #{pxToRem(4px)};
-
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: var(--Select-gap);
-
-    &--sm {
-      --Select-font-size: #{pxToRem(12px)};
-      --Select-line-height: #{pxToRem(18px)};
-      --Select-padding-vertical: #{pxToRem(4px)};
-      --Select-padding-horizontal: #{pxToRem(10px)};
-      --Select-gap: #{pxToRem(6px)};
-    }
-
-    &--md {
-      --Select-font-size: #{pxToRem(14px)};
-      --Select-line-height: #{pxToRem(20px)};
-      --Select-padding-vertical: #{pxToRem(6px)};
-      --Select-padding-horizontal: #{pxToRem(12px)};
-      --Select-gap: #{pxToRem(6px)};
-    }
-
-    &--lg {
-      --Select-font-size: #{pxToRem(16px)};
-      --Select-line-height: #{pxToRem(24px)};
-      --Select-padding-vertical: #{pxToRem(8px)};
-      --Select-padding-horizontal: #{pxToRem(14px)};
-      --Select-gap: #{pxToRem(8px)};
-    }
-
-    &__container {
-      position: relative;
-      font-family: var(--sds-ff-base);
-      background-color: var(--Select-color-background);
-      border: 1px solid var(--Select-color-border);
-      color: var(--Select-color-text);
-      border-radius: var(--Select-border-radius);
-      box-shadow: 0 0 0 var(--Select-box-shadow-size)
-        var(--Select-box-shadow-color);
-      transition:
-        border-color var(--sds-anim-transition-default),
-        box-shadow var(--sds-anim-transition-default);
-
-      select {
-        appearance: none;
-        display: block;
-        width: 100%;
-        color: currentColor;
-        border: none;
-        background-color: transparent;
-        overflow: hidden;
-        border-radius: var(--Select-border-radius);
-        padding: var(--Select-padding-vertical) var(--Select-padding-horizontal);
-        font-size: var(--Select-font-size);
-        line-height: var(--Select-line-height);
-        font-weight: var(--sds-fw-regular);
-
-        option {
-          background-color: var(--Select-color-background-option);
-          color: var(--Select-color-text);
-        }
-      }
-
-      &:has(select:focus-visible) {
-        --Select-box-shadow-size: #{pxToRem(4px)};
-      }
-
-      @media (hover: hover) {
-        &:hover {
-          border-color: var(--Select-color-border-hover);
-        }
-      }
-    }
-
-    &__icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: absolute;
-      width: calc(var(--Select-font-size) + pxToRem(4px));
-      height: 100%;
-      top: 0;
-      right: var(--Select-padding-horizontal);
-      pointer-events: none;
-
-      svg {
-        stroke: var(--Select-color-icon);
-        width: 100%;
-        height: 100%;
-      }
-    }
-
-    &--error {
-      --Select-color-background: var(--sds-input-color-background-error);
-      --Select-color-border: var(--sds-input-color-border-error);
-      --Select-color-text: var(--sds-input-color-text-default);
-
-      .Select__container {
-        &:has(select:focus-visible) {
-          --Select-color-border-focus: var(
-            --sds-input-color-border-error-focus
-          );
-          --Select-box-shadow-color: var(--sds-input-box-shadow-color-error);
-        }
-
-        @media (hover: hover) {
-          &:hover {
-            --Select-color-border-hover: var(
-              --sds-input-color-border-error-hover
-            );
-          }
-        }
-      }
-    }
-
-    &--disabled {
-      --Select-color-background: var(--sds-input-color-background-disabled);
-      --Select-color-border: var(--sds-input-color-border-disabled);
-      --Select-color-text: var(--sds-input-color-text-disabled);
-
-      select {
-        cursor: not-allowed;
-
-        @media (hover: hover) {
-          &:hover {
-            border-color: var(--sds-input-color-border-disabled);
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/src/components/sds/utils.scss b/src/components/sds/utils.scss
deleted file mode 100644
index 9486e6b8..00000000
--- a/src/components/sds/utils.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@use "sass:math";
-
-// Convert px to rem
-$base-font-size: 16px;
-
-@function removePxUnit($value) {
-  @return math.div($value, $value * 0 + 1);
-}
-
-@function pxToRem($pxValue) {
-  @return #{math.div(removePxUnit($pxValue), removePxUnit($base-font-size))}rem;
-}
diff --git a/src/types/types.ts b/src/types/types.ts
index c8d73644..8d82b6e4 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -5,6 +5,7 @@ export type NetworkType = "testnet" | "mainnet" | "futurenet" | "custom";
 export type Network = {
   id: NetworkType;
   label: string;
-  url: string;
+  horizonUrl: string;
+  rpcUrl: string;
   passphrase: string;
 };
diff --git a/yarn.lock b/yarn.lock
index 0fb2bea6..9e04f47c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -168,10 +168,10 @@
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.6.1.tgz#9ab8f811930d7af3e3d549183a50884f9eb83f36"
   integrity sha512-UY+FGM/2jjMkzQLn8pxcHGMaVLh9aEitG3zY2CiY7XHdLiz3bZOwa6oDxNqEMv7zZkV+cj5DOdz0cQ1BP5Hjgw==
 
-"@stellar/design-system@^2.0.0-beta.1":
-  version "2.0.0-beta.1"
-  resolved "https://registry.yarnpkg.com/@stellar/design-system/-/design-system-2.0.0-beta.1.tgz#ac4a73459f2bee5fd2b0f5839d02dccf1decd532"
-  integrity sha512-0q4FI2E7BrzyjBxGb3y2KuLVfEyqD+/jcAwDIImkwDyN25fb2pw0AXuZNPbSSU+3hE6Vt89n4lGXnBp/sPEVBw==
+"@stellar/design-system@^2.0.0-beta.4":
+  version "2.0.0-beta.4"
+  resolved "https://registry.yarnpkg.com/@stellar/design-system/-/design-system-2.0.0-beta.4.tgz#29c95cbd9e8641ba1eab2116c198d9a659b0f10e"
+  integrity sha512-HIGo51qj37BAj4AGp4cxs+DENoiepQQFcOtVfT87Mp+x/lwIZcGhYGVAe/DuKwjyMak379qy9iI/lSY4GlTQlQ==
   dependencies:
     "@floating-ui/dom" "^1.5.3"
     bignumber.js "^9.1.1"