diff --git a/src/components/AccessControlEdit.tsx b/src/components/AccessControlEdit.tsx
index d62ca417..37d9db81 100644
--- a/src/components/AccessControlEdit.tsx
+++ b/src/components/AccessControlEdit.tsx
@@ -457,11 +457,7 @@ const AccessControlEdit = () => {
               },
             ]}
           />
-          <Card
-            bordered={true}
-            // title={setupKey.name}
-            style={{ marginBottom: "7px" }}
-          >
+          <Card bordered={true} style={{ marginBottom: "7px" }}>
             <div style={{ maxWidth: "550px" }}>
               <Form
                 layout="vertical"
@@ -508,7 +504,6 @@ const AccessControlEdit = () => {
                               <Form.Item
                                 name="name"
                                 label=""
-                                style={{ margin: "0" }}
                                 rules={[
                                   {
                                     required: true,
@@ -532,7 +527,7 @@ const AccessControlEdit = () => {
                           {!editDescription ? (
                             <div
                               style={{
-                                margin: "12px 0 30px",
+                                margin: "0 0 39px",
                                 lineHeight: "22px",
                                 cursor: "pointer",
                               }}
@@ -551,7 +546,7 @@ const AccessControlEdit = () => {
                             <Form.Item
                               name="description"
                               label="Description"
-                              style={{ marginTop: 24, fontWeight: "500" }}
+                              style={{ marginTop: 10, fontWeight: "500" }}
                             >
                               <Input
                                 placeholder="Add description..."
@@ -568,7 +563,7 @@ const AccessControlEdit = () => {
                       </Row>
                     </Header>
                   </Col>
-                  <Col span={24}>
+                  <Col span={24} style={{ marginBottom: "15px" }}>
                     <Form.Item name="enabled" label="">
                       <div
                         style={{
@@ -579,6 +574,7 @@ const AccessControlEdit = () => {
                         <Switch
                           onChange={handleChangeDisabled}
                           defaultChecked={policy.enabled}
+                          size="small"
                         />
                         <div>
                           <label
@@ -784,7 +780,7 @@ const AccessControlEdit = () => {
                       </Col>
                     </Row>
                   </Col>
-                  <Col span={24}>
+                  <Col span={24} style={{ marginBottom: "15px" }}>
                     <Paragraph
                       type={"secondary"}
                       style={{ marginTop: "-15px", marginBottom: "30px" }}
@@ -793,7 +789,7 @@ const AccessControlEdit = () => {
                       protocol below
                     </Paragraph>
                   </Col>
-                  <Col span={24}>
+                  <Col span={24} style={{ marginBottom: "15px" }}>
                     <Row>
                       <Col span={10}>
                         <Form.Item
@@ -830,7 +826,14 @@ const AccessControlEdit = () => {
                                 maxWidth: "260px",
                                 fontWeight: "500",
                               }}
-                              placeholder={<div color={"rgba(0,0,0,0.25)"} className="arimo-font">Select ports</div>}
+                              placeholder={
+                                <div
+                                  color={"rgba(0,0,0,0.25)"}
+                                  className="arimo-font"
+                                >
+                                  Select ports
+                                </div>
+                              }
                               className="menlo-font"
                               value={formPolicyCopy}
                               disabled={true}
@@ -862,7 +865,14 @@ const AccessControlEdit = () => {
                                 maxWidth: "260px",
                                 fontWeight: "500",
                               }}
-                              placeholder={<div color={"rgba(0,0,0,0.25)"} className="arimo-font">Select ports</div>}
+                              placeholder={
+                                <div
+                                  color={"rgba(0,0,0,0.25)"}
+                                  className="arimo-font"
+                                >
+                                  Select ports
+                                </div>
+                              }
                               tagRender={grayTagRender}
                               onChange={handleChangePorts}
                               className="menlo-font"
@@ -890,7 +900,7 @@ const AccessControlEdit = () => {
                 justifyContent: "start",
                 padding: 0,
                 gap: "10px",
-                marginTop: "30px",
+                marginTop: "12px",
               }}
               key={0}
             >
diff --git a/src/components/AccessControlNew.tsx b/src/components/AccessControlNew.tsx
index 9e3ec0c9..8306d71f 100644
--- a/src/components/AccessControlNew.tsx
+++ b/src/components/AccessControlNew.tsx
@@ -456,18 +456,20 @@ const AccessControlNew = () => {
                       textAlign: "start",
                       whiteSpace: "pre-line",
                       fontSize: "18px",
-                      margin: "0px",
                       fontWeight: "500",
                     }}
                   >
-                    Create Rule
+                    Create rule
                   </Paragraph>
                   <Paragraph
                     type={"secondary"}
                     style={{
                       textAlign: "start",
                       whiteSpace: "pre-line",
-                      paddingBottom: "15px",
+                      marginTop: "-20px",
+                      fontSize: "14px",
+                      paddingBottom: "25px",
+                      marginBottom: "4px",
                     }}
                   >
                     Use this rule to restrict access to groups of resources
@@ -767,6 +769,8 @@ const AccessControlNew = () => {
                       color: "rgba(0, 0, 0, 0.88)",
                       fontSize: "14px",
                       fontWeight: "500",
+                      padding: "0 0 2px",
+                      display: "inline-block",
                     }}
                   >
                     Ports
@@ -828,9 +832,16 @@ const AccessControlNew = () => {
                       className="menlo-font"
                       placeholder={
                         formPolicy.protocol === "all" ||
-                        formPolicy.protocol === "icmp"
-                          ? "All"
-                          : (<div color={"rgba(0,0,0,0.25)"} className="arimo-font">Select ports</div>)
+                        formPolicy.protocol === "icmp" ? (
+                          "All"
+                        ) : (
+                          <div
+                            color={"rgba(0,0,0,0.25)"}
+                            className="arimo-font"
+                          >
+                            Select ports
+                          </div>
+                        )
                       }
                       tagRender={grayTagRender}
                       onChange={handleChangePorts}
@@ -859,6 +870,7 @@ const AccessControlNew = () => {
                     }}
                   >
                     <Switch
+                      size="small"
                       onChange={handleChangeDisabled}
                       defaultChecked={true}
                     />
@@ -890,7 +902,7 @@ const AccessControlNew = () => {
               </Col>
               <Col
                 span={24}
-                style={{ marginTop: "20px", marginBottom: "25px" }}
+                style={{ marginTop: "10px", marginBottom: "24px" }}
               >
                 <Text type={"secondary"}>
                   Learn more about
@@ -900,7 +912,7 @@ const AccessControlNew = () => {
                     href="https://docs.netbird.io/how-to/manage-network-access"
                   >
                     {" "}
-                    Access Controls
+                    access controls
                   </a>
                 </Text>
               </Col>
diff --git a/src/components/NameServerGroupAdd.tsx b/src/components/NameServerGroupAdd.tsx
index d7edf45e..e605d6bb 100644
--- a/src/components/NameServerGroupAdd.tsx
+++ b/src/components/NameServerGroupAdd.tsx
@@ -331,121 +331,117 @@ const NameServerGroupAdd = () => {
     { add, remove }: any,
     { errors }: any
   ) => (
-    <Col>
-      <div style={{ width: "100%", maxWidth: "360px" }}>
-        <label
-          style={{
-            color: "rgba(0, 0, 0, 0.88)",
-            fontSize: "14px",
-            fontWeight: "500",
-            marginBottom: "10px",
-            display: "block",
-          }}
-        >
-          Nameservers
-        </label>
-
-        {!!fields.length && (
-          <Row align="middle">
+    <div style={{ width: "100%", maxWidth: "360px" }}>
+      <label
+        style={{
+          color: "rgba(0, 0, 0, 0.88)",
+          fontSize: "14px",
+          fontWeight: "500",
+          marginBottom: "10px",
+          display: "block",
+        }}
+      >
+        Nameservers
+      </label>
+
+      {!!fields.length && (
+        <Row align="middle">
+          <Col span={4} style={{ textAlign: "left" }}>
+            <Typography.Text
+              style={{ color: "#818183", paddingLeft: "5px" }}
+            ></Typography.Text>
+          </Col>
+          <Col span={10} style={{ textAlign: "left" }}>
+            <Typography.Text style={{ color: "#818183", paddingLeft: "5px" }}>
+              Nameserver IP
+            </Typography.Text>
+          </Col>
+          <Col span={4} style={{ textAlign: "left" }}>
+            <Typography.Text style={{ color: "#818183", paddingLeft: "5px" }}>
+              Port
+            </Typography.Text>
+          </Col>
+          <Col span={4} />
+        </Row>
+      )}
+      {fields.map((field, index) => {
+        return (
+          <Row key={index}>
             <Col span={4} style={{ textAlign: "left" }}>
-              <Typography.Text
-                style={{ color: "#818183", paddingLeft: "5px" }}
-              ></Typography.Text>
+              <Form.Item
+                style={{ margin: "3px" }}
+                name={[field.name, "ns_type"]}
+                rules={[{ required: true, message: "Missing first protocol" }]}
+                initialValue={"udp"}
+              >
+                <Select
+                  disabled
+                  style={{ width: "100%" }}
+                  className="style-like-text"
+                >
+                  <Option value="udp">UDP</Option>
+                </Select>
+              </Form.Item>
             </Col>
-            <Col span={10} style={{ textAlign: "left" }}>
-              <Typography.Text style={{ color: "#818183", paddingLeft: "5px" }}>
-                Nameserver IP
-              </Typography.Text>
+            <Col span={10} style={{ margin: "1px" }}>
+              <Form.Item
+                style={{ margin: "1px" }}
+                name={[field.name, "ip"]}
+                rules={[{ validator: ipValidator }]}
+              >
+                <Input
+                  placeholder="e.g. X.X.X.X"
+                  style={{ width: "100%" }}
+                  autoComplete="off"
+                />
+              </Form.Item>
             </Col>
-            <Col span={4} style={{ textAlign: "left" }}>
-              <Typography.Text style={{ color: "#818183", paddingLeft: "5px" }}>
-                Port
-              </Typography.Text>
+            <Col span={4} style={{ textAlign: "center" }}>
+              <Form.Item
+                style={{ margin: "1px" }}
+                name={[field.name, "port"]}
+                rules={[{ required: true, message: "Missing port" }]}
+                initialValue={53}
+              >
+                <InputNumber placeholder="Port" style={{ width: "100%" }} />
+              </Form.Item>
+            </Col>
+            <Col
+              span={2}
+              style={{
+                textAlign: "center",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <MinusCircleOutlined onClick={() => remove(field.name)} />
             </Col>
-            <Col span={4} />
           </Row>
-        )}
-        {fields.map((field, index) => {
-          return (
-            <Row key={index}>
-              <Col span={4} style={{ textAlign: "left" }}>
-                <Form.Item
-                  style={{ margin: "3px" }}
-                  name={[field.name, "ns_type"]}
-                  rules={[
-                    { required: true, message: "Missing first protocol" },
-                  ]}
-                  initialValue={"udp"}
-                >
-                  <Select
-                    disabled
-                    style={{ width: "100%" }}
-                    className="style-like-text"
-                  >
-                    <Option value="udp">UDP</Option>
-                  </Select>
-                </Form.Item>
-              </Col>
-              <Col span={10} style={{ margin: "1px" }}>
-                <Form.Item
-                  style={{ margin: "1px" }}
-                  name={[field.name, "ip"]}
-                  rules={[{ validator: ipValidator }]}
-                >
-                  <Input
-                    placeholder="e.g. X.X.X.X"
-                    style={{ width: "100%" }}
-                    autoComplete="off"
-                  />
-                </Form.Item>
-              </Col>
-              <Col span={4} style={{ textAlign: "center" }}>
-                <Form.Item
-                  style={{ margin: "1px" }}
-                  name={[field.name, "port"]}
-                  rules={[{ required: true, message: "Missing port" }]}
-                  initialValue={53}
-                >
-                  <InputNumber placeholder="Port" style={{ width: "100%" }} />
-                </Form.Item>
-              </Col>
-              <Col
-                span={2}
-                style={{
-                  textAlign: "center",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                }}
-              >
-                <MinusCircleOutlined onClick={() => remove(field.name)} />
-              </Col>
-            </Row>
-          );
-        })}
-
-        <Row>
-          <Col span={20}>
-            <Form.Item>
-              <Button
-                type="dashed"
-                onClick={() => add()}
-                block
-                style={{
-                  maxWidth: "270px",
-                  marginTop: "5px",
-                }}
-                disabled={fields.length > 1}
-                icon={<PlusOutlined />}
-              >
-                Add Nameserver
-              </Button>
-              <Form.ErrorList errors={errors} />
-            </Form.Item>
-          </Col>
-        </Row>
-      </div>
-    </Col>
+        );
+      })}
+
+      <Row>
+        <Col span={20}>
+          <Form.Item>
+            <Button
+              type="dashed"
+              onClick={() => add()}
+              block
+              style={{
+                maxWidth: "270px",
+                marginTop: "5px",
+              }}
+              disabled={fields.length > 1}
+              icon={<PlusOutlined />}
+            >
+              Add nameserver
+            </Button>
+            <Form.ErrorList errors={errors} />
+          </Form.Item>
+        </Col>
+      </Row>
+    </div>
   );
 
   // @ts-ignore
@@ -470,9 +466,9 @@ const NameServerGroupAdd = () => {
             <Paragraph
               type={"secondary"}
               style={{
-                marginTop: "-2",
+                marginTop: "-4px",
                 fontWeight: "400",
-                marginBottom: "0",
+                marginBottom: "4px",
               }}
             >
               Add domain if you want to have a specific one
@@ -556,18 +552,20 @@ const NameServerGroupAdd = () => {
                   textAlign: "start",
                   whiteSpace: "pre-line",
                   fontSize: "18px",
-                  margin: "0px",
                   fontWeight: "500",
                 }}
               >
-                Add Nameserver
+                Add nameserver
               </Paragraph>
               <Paragraph
                 type={"secondary"}
                 style={{
                   textAlign: "start",
                   whiteSpace: "pre-line",
-                  paddingBottom: "0",
+                  marginTop: "-20px",
+                  fontSize: "14px",
+                  paddingBottom: "25px",
+                  marginBottom: "4px",
                 }}
               >
                 Use this nameserver to resolve domains in your network
@@ -706,7 +704,7 @@ const NameServerGroupAdd = () => {
                     </Row>
                   </Header>
                 </Col>
-                <Col span={24} flex="auto">
+                <Col span={24}>
                   <Form.List
                     name="nameservers"
                     rules={[{ validator: formListValidator }]}
@@ -714,7 +712,7 @@ const NameServerGroupAdd = () => {
                     {renderNSList}
                   </Form.List>
                 </Col>
-                <Col span={24} flex="auto">
+                <Col span={24}>
                   <Form.List name="domains">{renderDomains}</Form.List>
                 </Col>
                 <Col span={24}>
@@ -730,9 +728,9 @@ const NameServerGroupAdd = () => {
                   <Paragraph
                     type={"secondary"}
                     style={{
-                      marginTop: "-2",
+                      marginTop: "-4px",
                       fontWeight: "400",
-                      marginBottom: "0",
+                      marginBottom: "4px",
                     }}
                   >
                     Advertise this route to peers that belong to the following
@@ -787,8 +785,9 @@ const NameServerGroupAdd = () => {
                             marginBottom: "0",
                           }}
                         >
-                          Disable this server if you don't want it to apply
-                          immediately
+                          {formNSGroup.enabled
+                            ? "Disable this server if you don't want it to apply immediately"
+                            : " Enable this server if you want it to apply immediately"}
                         </Paragraph>
                       </div>
                     </div>
@@ -796,7 +795,7 @@ const NameServerGroupAdd = () => {
                 </Col>
                 <Col
                   span={24}
-                  style={{ marginTop: "10px", marginBottom: "20px" }}
+                  style={{ marginTop: "10px", marginBottom: "24px" }}
                 >
                   <Text type={"secondary"}>
                     Learn more about
@@ -830,7 +829,7 @@ const NameServerGroupAdd = () => {
                       onClick={handleFormSubmit}
                       disabled={savedNSGroup.loading}
                     >
-                      Create Nameserver
+                      Create nameserver
                     </Button>
                   </Space>
                 </Col>
diff --git a/src/components/NameServerGroupUpdate.tsx b/src/components/NameServerGroupUpdate.tsx
index 7b3b6e16..95b25be3 100644
--- a/src/components/NameServerGroupUpdate.tsx
+++ b/src/components/NameServerGroupUpdate.tsx
@@ -313,117 +313,121 @@ const NameServerGroupUpdate = () => {
     { add, remove }: any,
     { errors }: any
   ) => (
-    <Col>
-      <div style={{ width: "100%", maxWidth: "360px" }}>
-        <label
-          style={{
-            color: "rgba(0, 0, 0, 0.88)",
-            fontSize: "14px",
-            fontWeight: "500",
-            marginBottom: "10px",
-            display: "block",
-          }}
-        >
-          Nameservers
-        </label>
-
-        {!!fields.length && (
-          <Row align="middle">
-            <Col span={4} style={{ textAlign: "left" }}>
-              <Text style={{ color: "#818183", paddingLeft: "5px" }}></Text>
-            </Col>
-            <Col span={10} style={{ textAlign: "left" }}>
-              <Text style={{ color: "#818183", paddingLeft: "5px" }}>
-                Nameserver IP
-              </Text>
-            </Col>
-            <Col span={4} style={{ textAlign: "left" }}>
-              <Text style={{ color: "#818183", paddingLeft: "5px" }}>Port</Text>
-            </Col>
-            <Col span={4} />
-          </Row>
-        )}
-        {fields.map((field, index) => {
-          return (
-            <Row key={index}>
+    <Row>
+      <Col>
+        <div style={{ width: "100%", maxWidth: "360px" }}>
+          <label
+            style={{
+              color: "rgba(0, 0, 0, 0.88)",
+              fontSize: "14px",
+              fontWeight: "500",
+              marginBottom: "10px",
+              display: "block",
+            }}
+          >
+            Nameservers
+          </label>
+
+          {!!fields.length && (
+            <Row align="middle">
               <Col span={4} style={{ textAlign: "left" }}>
-                <Form.Item
-                  style={{ margin: "3px" }}
-                  name={[field.name, "ns_type"]}
-                  rules={[
-                    { required: true, message: "Missing first protocol" },
-                  ]}
-                  initialValue={"udp"}
-                >
-                  <Select
-                    disabled
-                    style={{ width: "100%" }}
-                    className="style-like-text"
-                  >
-                    <Option value="udp">UDP</Option>
-                  </Select>
-                </Form.Item>
+                <Text style={{ color: "#818183", paddingLeft: "5px" }}></Text>
               </Col>
-              <Col span={10} style={{ margin: "1px" }}>
-                <Form.Item
-                  style={{ margin: "1px" }}
-                  name={[field.name, "ip"]}
-                  rules={[{ validator: ipValidator }]}
-                >
-                  <Input
-                    placeholder="e.g. X.X.X.X"
-                    style={{ width: "100%" }}
-                    autoComplete="off"
-                  />
-                </Form.Item>
-              </Col>
-              <Col span={4} style={{ textAlign: "center" }}>
-                <Form.Item
-                  style={{ margin: "1px" }}
-                  name={[field.name, "port"]}
-                  rules={[{ required: true, message: "Missing port" }]}
-                  initialValue={53}
-                >
-                  <InputNumber placeholder="Port" style={{ width: "100%" }} />
-                </Form.Item>
+              <Col span={10} style={{ textAlign: "left" }}>
+                <Text style={{ color: "#818183", paddingLeft: "5px" }}>
+                  Nameserver IP
+                </Text>
               </Col>
-              <Col
-                span={2}
-                style={{
-                  textAlign: "center",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                }}
-              >
-                <MinusCircleOutlined onClick={() => remove(field.name)} />
+              <Col span={4} style={{ textAlign: "left" }}>
+                <Text style={{ color: "#818183", paddingLeft: "5px" }}>
+                  Port
+                </Text>
               </Col>
+              <Col span={4} />
             </Row>
-          );
-        })}
-
-        <Row>
-          <Col span={20}>
-            <Form.Item>
-              <Button
-                type="dashed"
-                onClick={() => add()}
-                block
-                style={{
-                  maxWidth: "270px",
-                  marginTop: "5px",
-                }}
-                disabled={fields.length > 1}
-                icon={<PlusOutlined />}
-              >
-                Add Nameserver
-              </Button>
-              <Form.ErrorList errors={errors} />
-            </Form.Item>
-          </Col>
-        </Row>
-      </div>
-    </Col>
+          )}
+          {fields.map((field, index) => {
+            return (
+              <Row key={index}>
+                <Col span={4} style={{ textAlign: "left" }}>
+                  <Form.Item
+                    style={{ margin: "3px" }}
+                    name={[field.name, "ns_type"]}
+                    rules={[
+                      { required: true, message: "Missing first protocol" },
+                    ]}
+                    initialValue={"udp"}
+                  >
+                    <Select
+                      disabled
+                      style={{ width: "100%" }}
+                      className="style-like-text"
+                    >
+                      <Option value="udp">UDP</Option>
+                    </Select>
+                  </Form.Item>
+                </Col>
+                <Col span={10} style={{ margin: "1px" }}>
+                  <Form.Item
+                    style={{ margin: "1px" }}
+                    name={[field.name, "ip"]}
+                    rules={[{ validator: ipValidator }]}
+                  >
+                    <Input
+                      placeholder="e.g. X.X.X.X"
+                      style={{ width: "100%" }}
+                      autoComplete="off"
+                    />
+                  </Form.Item>
+                </Col>
+                <Col span={4} style={{ textAlign: "center" }}>
+                  <Form.Item
+                    style={{ margin: "1px" }}
+                    name={[field.name, "port"]}
+                    rules={[{ required: true, message: "Missing port" }]}
+                    initialValue={53}
+                  >
+                    <InputNumber placeholder="Port" style={{ width: "100%" }} />
+                  </Form.Item>
+                </Col>
+                <Col
+                  span={2}
+                  style={{
+                    textAlign: "center",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  <MinusCircleOutlined onClick={() => remove(field.name)} />
+                </Col>
+              </Row>
+            );
+          })}
+
+          <Row>
+            <Col span={20}>
+              <Form.Item>
+                <Button
+                  type="dashed"
+                  onClick={() => add()}
+                  block
+                  style={{
+                    maxWidth: "270px",
+                    marginTop: "5px",
+                  }}
+                  disabled={fields.length > 1}
+                  icon={<PlusOutlined />}
+                >
+                  Add Nameserver
+                </Button>
+                <Form.ErrorList errors={errors} />
+              </Form.Item>
+            </Col>
+          </Row>
+        </div>
+      </Col>
+    </Row>
   );
 
   // @ts-ignore
@@ -448,24 +452,13 @@ const NameServerGroupUpdate = () => {
             <Paragraph
               type={"secondary"}
               style={{
-                marginTop: "-2",
                 fontWeight: "400",
-                marginBottom: "0",
+                marginBottom: "10px",
               }}
             >
               Add domain if you want to have a specific one
             </Paragraph>
           </Col>
-          {/* <Col>
-            <Tooltip
-              title="Only queries to domains specified here will be resolved by these nameservers."
-              className={"ant-form-item-tooltip"}
-            >
-              <QuestionCircleOutlined
-                style={{ color: "rgba(0, 0, 0, 0.45)", cursor: "help" }}
-              />
-            </Tooltip>
-          </Col> */}
         </Space>
       </Row>
       {fields.map((field, index) => {
@@ -631,7 +624,7 @@ const NameServerGroupUpdate = () => {
                           className={
                             "access-control input-text ant-drawer-subtitle"
                           }
-                          style={{ marginTop: "0" }}
+                          style={{ margin: "0 0 39px 0px" }}
                           onClick={() => toggleEditDescription(true)}
                         >
                           {formNSGroup.description &&
@@ -641,7 +634,7 @@ const NameServerGroupUpdate = () => {
                         </div>
                       ) : (
                         <Row>
-                          <Col span={8}>
+                          <Col span={8} style={{ marginBottom: "15px" }}>
                             <div
                               style={{ lineHeight: "15px", marginTop: "24px" }}
                             >
@@ -676,46 +669,8 @@ const NameServerGroupUpdate = () => {
                   </Row>
                 </Header>
               </Col>
-              <Col span={24}>
-                <Form.Item name="enabled" label="">
-                  <div
-                    style={{
-                      display: "flex",
-                      gap: "15px",
-                    }}
-                  >
-                    <Switch
-                      onChange={handleChangeDisabled}
-                      defaultChecked={formNSGroup.enabled}
-                      size="small"
-                      checked={formNSGroup.enabled}
-                    />
-                    <div>
-                      <label
-                        style={{
-                          color: "rgba(0, 0, 0, 0.88)",
-                          fontSize: "14px",
-                          fontWeight: "500",
-                        }}
-                      >
-                        Enabled
-                      </label>
-                      <Paragraph
-                        type={"secondary"}
-                        style={{
-                          marginTop: "-2",
-                          fontWeight: "400",
-                          marginBottom: "0",
-                        }}
-                      >
-                        Disable this server if you don't want it to apply
-                        immediately
-                      </Paragraph>
-                    </div>
-                  </div>
-                </Form.Item>
-              </Col>
-              <Col span={24}>
+
+              <Col span={24} style={{ marginBottom: "15px" }}>
                 <Form.List
                   name="nameservers"
                   rules={[{ validator: formListValidator }]}
@@ -724,15 +679,17 @@ const NameServerGroupUpdate = () => {
                 </Form.List>
               </Col>
 
-              <Col span={24}>
+              <Col span={24} style={{ marginBottom: "15px" }}>
                 <Form.List name="domains">{renderDomains}</Form.List>
               </Col>
-              <Col span={24}>
+              <Col span={24} style={{ marginBottom: "15px" }}>
                 <label
                   style={{
                     color: "rgba(0, 0, 0, 0.88)",
                     fontSize: "14px",
                     fontWeight: "500",
+                    marginBottom: "5px",
+                    display: "block",
                   }}
                 >
                   Distribution groups
@@ -756,6 +713,46 @@ const NameServerGroupUpdate = () => {
                   </Select>
                 </Form.Item>
               </Col>
+              <Col span={24} style={{ marginBottom: "15px" }}>
+                <Form.Item name="enabled" label="">
+                  <div
+                    style={{
+                      display: "flex",
+                      gap: "15px",
+                    }}
+                  >
+                    <Switch
+                      onChange={handleChangeDisabled}
+                      defaultChecked={formNSGroup.enabled}
+                      size="small"
+                      checked={formNSGroup.enabled}
+                    />
+                    <div>
+                      <label
+                        style={{
+                          color: "rgba(0, 0, 0, 0.88)",
+                          fontSize: "14px",
+                          fontWeight: "500",
+                        }}
+                      >
+                        Enabled
+                      </label>
+                      <Paragraph
+                        type={"secondary"}
+                        style={{
+                          marginTop: "-2",
+                          fontWeight: "400",
+                          marginBottom: "0",
+                        }}
+                      >
+                        {formNSGroup.enabled
+                          ? "Disable this server if you don't want it to apply immediately"
+                          : " Enable this server if you want it to apply immediately"}
+                      </Paragraph>
+                    </div>
+                  </div>
+                </Form.Item>
+              </Col>
               <Col
                 style={{
                   width: "100%",
diff --git a/src/components/RouteAddNew.tsx b/src/components/RouteAddNew.tsx
index 226b48c3..1d16de35 100644
--- a/src/components/RouteAddNew.tsx
+++ b/src/components/RouteAddNew.tsx
@@ -426,7 +426,7 @@ const RouteAddNew = (selectedPeer: any) => {
                 disabled={savedRoute.loading}
                 onClick={handleFormSubmit}
               >
-                Add Route
+                Add route
               </Button>
             </Space>
           }
@@ -455,7 +455,7 @@ const RouteAddNew = (selectedPeer: any) => {
                       marginBottom: "25px",
                     }}
                   >
-                    Add Route
+                    Add route
                   </Paragraph>
 
                   {!!selectedPeer.selectedPeer && (
@@ -887,7 +887,7 @@ const RouteAddNew = (selectedPeer: any) => {
               </Col>
               <Col
                 span={24}
-                style={{ marginTop: "20px", marginBottom: "25px" }}
+                style={{ marginTop: "24px", marginBottom: "12px" }}
               >
                 <Text type={"secondary"}>
                   Learn more about
@@ -897,7 +897,7 @@ const RouteAddNew = (selectedPeer: any) => {
                     href="https://docs.netbird.io/how-to/routing-traffic-to-private-networks"
                   >
                     {" "}
-                    Network Routes
+                    network routes
                   </a>
                 </Text>
               </Col>
diff --git a/src/components/RoutePeerUpdate.tsx b/src/components/RoutePeerUpdate.tsx
index a7608fa8..74257d80 100644
--- a/src/components/RoutePeerUpdate.tsx
+++ b/src/components/RoutePeerUpdate.tsx
@@ -291,7 +291,7 @@ const RoutePeerUpdate = () => {
               requiredMark={false}
               onValuesChange={onChange}
               style={{ width: "100%", maxWidth: "600px" }}
-              className="route-form"
+              className="route-form  edit-form-wrapper"
             >
               <Row gutter={16}>
                 <Col span={24}>
diff --git a/src/components/RouteUpdate.tsx b/src/components/RouteUpdate.tsx
index ca900e38..c6169eec 100644
--- a/src/components/RouteUpdate.tsx
+++ b/src/components/RouteUpdate.tsx
@@ -310,7 +310,7 @@ const RouteAddNew = () => {
                 disabled={savedRoute.loading}
                 onClick={handleFormSubmit}
               >
-                Add Route
+                Add route
               </Button>
             </Space>
           }
@@ -334,9 +334,7 @@ const RouteAddNew = () => {
                       textAlign: "start",
                       whiteSpace: "pre-line",
                       fontSize: "18px",
-                      margin: "0px",
                       fontWeight: 500,
-                      marginBottom: "0",
                     }}
                   >
                     Add new routing peer
@@ -344,9 +342,12 @@ const RouteAddNew = () => {
                   <Paragraph
                     type={"secondary"}
                     style={{
-                      marginTop: "-2",
-                      fontWeight: "400",
-                      marginBottom: "25px",
+                      textAlign: "start",
+                      whiteSpace: "pre-line",
+                      marginTop: "-23px",
+                      fontSize: "14px",
+                      paddingBottom: "25px",
+                      marginBottom: "4px",
                     }}
                   >
                     When you add multiple routing peers, NetBird enables high
diff --git a/src/components/SetupKeyEdit.tsx b/src/components/SetupKeyEdit.tsx
index a0e67f84..547daa01 100644
--- a/src/components/SetupKeyEdit.tsx
+++ b/src/components/SetupKeyEdit.tsx
@@ -275,7 +275,13 @@ const SetupKeyNew = () => {
       />
       <Card bordered={true} style={{ marginBottom: "7px", border: "none" }}>
         <div style={{ maxWidth: "800px" }}>
-          <h3 style={{ fontSize: "22px", fontWeight: "500",marginBottom:"30px" }}>
+          <h3
+            style={{
+              fontSize: "22px",
+              fontWeight: "500",
+              marginBottom: "30px",
+            }}
+          >
             {setupKey.name}
           </h3>
           <Form
@@ -361,7 +367,7 @@ const SetupKeyNew = () => {
               </Col>
             </Row>
 
-            <Row style={{ marginTop: "30px" }}>
+            <Row style={{ marginTop: "39px" }}>
               <Col
                 xs={24}
                 sm={24}
@@ -419,20 +425,6 @@ const SetupKeyNew = () => {
                 </Row>
               </Col>
             </Row>
-
-            <Row style={{ marginTop: "40px", marginBottom: "28px" }}>
-              <Text type={"secondary"}>
-                Learn more about
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  href="https://docs.netbird.io/how-to/register-machines-using-setup-keys"
-                >
-                  {" "}
-                  Setup Keys
-                </a>
-              </Text>
-            </Row>
           </Form>
         </div>
         <Container
@@ -442,6 +434,7 @@ const SetupKeyNew = () => {
             justifyContent: "start",
             padding: 0,
             gap: "10px",
+            marginTop: "24px",
           }}
           key={0}
         >
diff --git a/src/components/SetupKeyNew.tsx b/src/components/SetupKeyNew.tsx
index 03493cb9..566eaa7d 100644
--- a/src/components/SetupKeyNew.tsx
+++ b/src/components/SetupKeyNew.tsx
@@ -31,7 +31,7 @@ import { Container } from "./Container";
 import Paragraph from "antd/es/typography/Paragraph";
 import { CheckOutlined, CopyOutlined } from "@ant-design/icons";
 import { copyToClipboard } from "../utils/common";
-import {useGetGroupTagHelpers} from "../utils/groups";
+import { useGetGroupTagHelpers } from "../utils/groups";
 
 const { Option } = Select;
 const { Text } = Typography;
@@ -105,7 +105,7 @@ const SetupKeyNew = () => {
       (s) => !allGroupsNames.includes(s)
     );
 
-    const expiresIn = formSetupKey.expires_in * 24 * 3600 // the api expects seconds we have days
+    const expiresIn = formSetupKey.expires_in * 24 * 3600; // the api expects seconds we have days
     return {
       id: formSetupKey.id,
       name: formSetupKey.name,
@@ -345,8 +345,7 @@ const SetupKeyNew = () => {
             textAlign: "start",
             whiteSpace: "pre-line",
             fontSize: "18px",
-            margin: "0px",
-            fontWeight:"500"
+            fontWeight: "500",
           }}
         >
           {showPlainToken
@@ -358,6 +357,10 @@ const SetupKeyNew = () => {
           style={{
             textAlign: "start",
             whiteSpace: "pre-line",
+            marginTop: "-20px",
+            fontSize: "14px",
+            paddingBottom: "25px",
+            marginBottom: "4px",
           }}
         >
           {showPlainToken
@@ -398,7 +401,7 @@ const SetupKeyNew = () => {
               </Col>
             </Row>
 
-            <Row style={{ marginTop: "20px" }} justify={"space-between"}>
+            <Row style={{ marginTop: "24px" }} justify={"space-between"}>
               <Col span={18}>
                 <Paragraph
                   style={{
@@ -420,6 +423,7 @@ const SetupKeyNew = () => {
                 <Row justify={"end"}>
                   <Form.Item name="reusable" valuePropName="checked">
                     <Switch
+                      size="small"
                       onChange={(checked) => {
                         setFormSetupKey({
                           ...formSetupKey,
@@ -432,7 +436,7 @@ const SetupKeyNew = () => {
               </Col>
             </Row>
 
-            <Row style={{ marginTop: "10px" }}>
+            <Row style={{ marginTop: "16px" }}>
               <Col span={24}>
                 <Paragraph
                   style={{
@@ -470,7 +474,7 @@ const SetupKeyNew = () => {
               </Col>
             </Row>
 
-            <Row style={{ marginTop: "20px" }}>
+            <Row style={{ marginTop: "24px" }}>
               <Col span={24}>
                 <Paragraph
                   style={{
@@ -505,7 +509,7 @@ const SetupKeyNew = () => {
               </Col>
             </Row>
 
-            <Row style={{ marginTop: "20px" }}>
+            <Row style={{ marginTop: "24px" }}>
               <Col span={24}>
                 <Paragraph
                   style={{
@@ -529,7 +533,7 @@ const SetupKeyNew = () => {
                 >
                   <Select
                     mode="tags"
-                    style={{ width: "100%"}}
+                    style={{ width: "100%" }}
                     placeholder="Associate groups with the key"
                     tagRender={blueTagRender}
                     dropdownRender={dropDownRender}
@@ -543,7 +547,7 @@ const SetupKeyNew = () => {
                 </Form.Item>
               </Col>
             </Row>
-            <Row style={{ marginTop: "40px", marginBottom: "28px" }}>
+            <Row style={{ marginTop: "24px", marginBottom: "24px" }}>
               <Text type={"secondary"}>
                 Learn more about
                 <a
diff --git a/src/index.css b/src/index.css
index f3bb4a5f..789fe964 100644
--- a/src/index.css
+++ b/src/index.css
@@ -433,7 +433,7 @@ ul.ant-list-items {
 }
 
 .route-form .ant-form-item {
-  margin-bottom: 20px;
+  margin-bottom: 24px;
 }
 
 .nb-code {
@@ -472,4 +472,8 @@ ul.ant-list-items {
 
 .ant-spin-nested-loading .ant-spin-spinning {
   min-height: 300px;
+}
+
+.route-form.edit-form-wrapper .ant-form-item{
+      margin-bottom: 39px;
 }
\ No newline at end of file
diff --git a/src/views/AccessControl.tsx b/src/views/AccessControl.tsx
index 6b8ae994..8a74acf7 100644
--- a/src/views/AccessControl.tsx
+++ b/src/views/AccessControl.tsx
@@ -644,7 +644,7 @@ export const AccessControl = () => {
                               disabled={savedPolicy.loading}
                               onClick={onClickAddNewPolicy}
                             >
-                              Add Rule
+                              Add rule
                             </Button>
                           </Col>
                         </Row>
diff --git a/src/views/Nameservers.tsx b/src/views/Nameservers.tsx
index fd5167bd..9a856a0c 100644
--- a/src/views/Nameservers.tsx
+++ b/src/views/Nameservers.tsx
@@ -523,7 +523,7 @@ export const Nameservers = () => {
                     onClick={onClickAddNewNSGroup}
                     disabled={savedNSGroup.loading}
                   >
-                    Add Nameserver
+                    Add nameserver
                   </Button>
                 )}
               </Col>
diff --git a/src/views/Peers.tsx b/src/views/Peers.tsx
index baa03c64..57720250 100644
--- a/src/views/Peers.tsx
+++ b/src/views/Peers.tsx
@@ -641,7 +641,7 @@ export const Peers = () => {
                               type="primary"
                               onClick={() => setAddPeerModalOpen(true)}
                             >
-                              Add Peer
+                              Add peer
                             </Button>
                           )}
                         </Col>
diff --git a/src/views/Routes.tsx b/src/views/Routes.tsx
index d993a7a5..f378ef8c 100644
--- a/src/views/Routes.tsx
+++ b/src/views/Routes.tsx
@@ -644,7 +644,7 @@ export const Routes = () => {
                               disabled={savedRoute.loading}
                               onClick={onClickAddNewRoute}
                             >
-                              Add Route
+                              Add route
                             </Button>
                           </Col>
                         </Row>
diff --git a/src/views/SetupKeys.tsx b/src/views/SetupKeys.tsx
index a162ec5e..bc104ce1 100644
--- a/src/views/SetupKeys.tsx
+++ b/src/views/SetupKeys.tsx
@@ -445,7 +445,7 @@ export const SetupKeys = () => {
                             type="primary"
                             onClick={onClickAddNewSetupKey}
                           >
-                            Add Key
+                            Add key
                           </Button>
                         </Col>
                       </Row>