diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx
index 9f3bf1942..d9b5d1230 100644
--- a/web/pages/_app.tsx
+++ b/web/pages/_app.tsx
@@ -2,7 +2,6 @@ import 'antd/dist/antd.css';
 import '../styles/colors.scss';
 import '../styles/globals.scss';
 
-// GW: I can't override ant design styles through components using NextJS's built-in CSS modules. So I'll just import styles here for now and figure out enabling SASS modules later.
 import '../styles/home.scss';
 import '../styles/chat.scss';
 import '../styles/config.scss';
diff --git a/web/pages/components/config/constants.tsx b/web/pages/components/config/constants.tsx
index ddb09a52d..48e950594 100644
--- a/web/pages/components/config/constants.tsx
+++ b/web/pages/components/config/constants.tsx
@@ -24,7 +24,6 @@ export const SUCCESS_STATES = {
 };
 
 
-
 export async function postConfigUpdateToAPI(args: ApiPostArgs) {
   const {
     apiPath,
@@ -38,9 +37,9 @@ export async function postConfigUpdateToAPI(args: ApiPostArgs) {
     auth: true,
   });
   if (result.success && onSuccess) {
-    onSuccess();
+    onSuccess(result.message);
   } else if (onError) {
-    onError();
+    onError(result.message);
   }
 }
 
@@ -96,7 +95,7 @@ export const TEXTFIELD_DEFAULTS = {
       maxLength: 255,
       placeholder: '/img/mylogo.png',
       label: 'Logo',
-      tip: 'Path to your logo from website root',
+      tip: 'Path to your logo from website root. We recommend that you use a square image that is at least 256x256. (upload functionality coming soon)',
     },
   
     extraPageContent: {
@@ -113,8 +112,6 @@ export const TEXTFIELD_DEFAULTS = {
       tip: "Turn this ON if you plan to steam explicit or adult content. You may want to respectfully set this flag so that unexpecting eyes won't accidentally see it from the Directory.",
     },  
 
-
-    // 
     tags: {
       apiPath: '/tags',
       defaultValue: '',
diff --git a/web/pages/components/config/edit-directory.tsx b/web/pages/components/config/edit-directory.tsx
index e7d530903..797253114 100644
--- a/web/pages/components/config/edit-directory.tsx
+++ b/web/pages/components/config/edit-directory.tsx
@@ -42,7 +42,7 @@ export default function EditYPDetails() {
       
       <p>Would you like to appear in the <a href="https://directory.owncast.online" target="_blank" rel="noreferrer"><strong>Owncast Directory</strong></a>?</p>
 
-      <p><em>NOTE: You will need to have a URL specified in the <code>Instance URL</code> field to be able to use this.</em></p>
+      <p style={{ backgroundColor: 'black', fontSize: '.75rem', padding: '5px' }}><em>NOTE: You will need to have a URL specified in the <code>Instance URL</code> field to be able to use this.</em></p>
 
       <div className="config-yp-container">
         <Form
diff --git a/web/pages/components/config/edit-tags.tsx b/web/pages/components/config/edit-tags.tsx
index 568eadf79..5e5be2f70 100644
--- a/web/pages/components/config/edit-tags.tsx
+++ b/web/pages/components/config/edit-tags.tsx
@@ -12,7 +12,7 @@ export default function EditInstanceTags() {
   const [submitStatus, setSubmitStatus] = useState(null);
   const [submitStatusMessage, setSubmitStatusMessage] = useState('');
   const serverStatusData = useContext(ServerStatusContext);
-  const { serverConfig, setConfigField } = serverStatusData || {};
+  const { serverConfig, setFieldInConfigState } = serverStatusData || {};
 
   const { instanceDetails } = serverConfig;
   const { tags = [] } = instanceDetails;
@@ -47,7 +47,7 @@ export default function EditInstanceTags() {
       apiPath,
       data: { value: postValue },
       onSuccess: () => {
-        setConfigField({ fieldName: 'tags', value: postValue, path: configPath });
+        setFieldInConfigState({ fieldName: 'tags', value: postValue, path: configPath });
         setSubmitStatus('success');
         setSubmitStatusMessage('Tags updated.');
         setNewTagInput('');
diff --git a/web/pages/components/config/form-textfield.tsx b/web/pages/components/config/form-textfield.tsx
index 30f2992db..fcdaf7efa 100644
--- a/web/pages/components/config/form-textfield.tsx
+++ b/web/pages/components/config/form-textfield.tsx
@@ -17,15 +17,14 @@ update vals to state, andthru api.
 
 */
 import React, { useState, useContext } from 'react';
-import { Button, Form, Input, InputNumber, Tooltip } from 'antd';
+import { Button, Form, Input, InputNumber } from 'antd';
 import { FormItemProps } from 'antd/es/form';
 
-import { InfoCircleOutlined } from '@ant-design/icons';
-
 import { TEXTFIELD_DEFAULTS, TEXT_MAXLENGTH, RESET_TIMEOUT, postConfigUpdateToAPI } from './constants';
 
 import { TextFieldProps } from '../../../types/config-section';
 import { ServerStatusContext } from '../../../utils/server-status-context';
+import InfoTip from '../info-tip';
 
 export const TEXTFIELD_TYPE_TEXT = 'default';
 export const TEXTFIELD_TYPE_PASSWORD = 'password'; // Input.Password
@@ -42,7 +41,7 @@ export default function TextField(props: TextFieldProps) {
   let resetTimer = null;
 
   const serverStatusData = useContext(ServerStatusContext);
-  const { setConfigField } = serverStatusData || {};
+  const { setFieldInConfigState } = serverStatusData || {};
   
   const {
     configPath = '',
@@ -107,7 +106,7 @@ export default function TextField(props: TextFieldProps) {
         apiPath,
         data: { value: fieldValueForSubmit },
         onSuccess: () => {
-          setConfigField({ fieldName, value: fieldValueForSubmit, path: configPath });
+          setFieldInConfigState({ fieldName, value: fieldValueForSubmit, path: configPath });
           setSubmitStatus('success');
         },
         onError: (message: string) => {
@@ -144,11 +143,7 @@ export default function TextField(props: TextFieldProps) {
    return (
     <div className="textfield-container">
       <div className="textfield">
-       <span className="info">
-          <Tooltip title={tip}>
-            <InfoCircleOutlined />
-          </Tooltip>
-        </span>
+       <InfoTip tip={tip} />
         <Form.Item
           label={label}
           name={fieldName}
diff --git a/web/pages/components/config/form-toggleswitch.tsx b/web/pages/components/config/form-toggleswitch.tsx
index 003a7e5d2..bd2928d7b 100644
--- a/web/pages/components/config/form-toggleswitch.tsx
+++ b/web/pages/components/config/form-toggleswitch.tsx
@@ -1,13 +1,12 @@
 import React, { useState, useContext } from 'react';
-import { Form, Switch, Tooltip } from 'antd';
+import { Form, Switch } from 'antd';
 import { FormItemProps } from 'antd/es/form';
 
-import { InfoCircleOutlined } from '@ant-design/icons';
-
 import { TEXTFIELD_DEFAULTS, RESET_TIMEOUT, SUCCESS_STATES, postConfigUpdateToAPI } from './constants';
 
 import { ToggleSwitchProps } from '../../../types/config-section';
 import { ServerStatusContext } from '../../../utils/server-status-context';
+import InfoTip from '../info-tip';
 
 export const TEXTFIELD_TYPE_TEXT = 'default';
 export const TEXTFIELD_TYPE_PASSWORD = 'password'; // Input.Password
@@ -22,7 +21,7 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
   let resetTimer = null;
 
   const serverStatusData = useContext(ServerStatusContext);
-  const { setConfigField } = serverStatusData || {};
+  const { setFieldInConfigState } = serverStatusData || {};
   
   const {
     fieldName,
@@ -53,7 +52,7 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
       apiPath,
       data: { value: checked },
       onSuccess: () => {
-        setConfigField({ fieldName, value: checked, path: configPath });
+        setFieldInConfigState({ fieldName, value: checked, path: configPath });
         setSubmitStatus('success');
       },
       onError: (message: string) => {
@@ -69,14 +68,6 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
     message: newStatusMessage = '',
   } = SUCCESS_STATES[submitStatus] || {};
 
-  const tipComponent = tip ? (
-    <span className="info">
-      <Tooltip title={tip}>
-        <InfoCircleOutlined />
-      </Tooltip>
-    </span>
-  ) : null;
- 
   return (
     <div className="toggleswitch-container">
       <div className="toggleswitch">
@@ -95,8 +86,8 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
           />
         </Form.Item>
 
-        <span className="label">{label}</span>
-        {tipComponent}
+        <span className="label">{label} <InfoTip tip={tip} /></span>
+        
       </div>
       <div className={`status-message ${submitStatus || ''}`}>
         {newStatusIcon} {newStatusMessage} {submitStatusMessage}
diff --git a/web/pages/components/info-tip.tsx b/web/pages/components/info-tip.tsx
new file mode 100644
index 000000000..28b02e48d
--- /dev/null
+++ b/web/pages/components/info-tip.tsx
@@ -0,0 +1,20 @@
+import { InfoCircleOutlined } from "@ant-design/icons";
+import { Tooltip } from "antd";
+
+interface InfoTipProps {
+  tip: string | null;
+}
+
+export default function InfoTip({ tip }: InfoTipProps) {
+  if (tip === '' || tip === null) {
+    return null;
+  }
+
+  return (
+    <span className="info-tip">
+      <Tooltip title={tip}>
+        <InfoCircleOutlined />
+      </Tooltip>
+    </span>
+  );
+}
diff --git a/web/pages/config-public-details.tsx b/web/pages/config-public-details.tsx
index e19d1ec77..47b91e8cb 100644
--- a/web/pages/config-public-details.tsx
+++ b/web/pages/config-public-details.tsx
@@ -88,7 +88,7 @@ export default function PublicFacingDetails() {
           <br/>
           add tags comp */}
           <EditInstanceTags />
-          <br/><br/>
+
           <EditDirectoryDetails />          
         </div>
       </div>      
diff --git a/web/styles/config.scss b/web/styles/config.scss
index 6c79c2165..acf8f1044 100644
--- a/web/styles/config.scss
+++ b/web/styles/config.scss
@@ -7,17 +7,22 @@
   .text-fields {
     margin-right: 2rem;
   }
-
   .misc-fields {
-    // border: 1px solid var(--owncast-purple);
-    padding: 2em;
+    width: 25em;
+  }
+  .tag-editor-container,
+  .config-directory-details-form {
+    border-radius: 1em;
+    background-color: rgba(128,0,255,.15);
+    padding: 1.5em;
+    margin-bottom: 1em;
   }
 }
 
 
 .status-message {
   margin: 1rem 0;
-  min-height: 1.25em;
+  min-height: 1.4em;
   font-size: .75rem;
   &.success {
     color: var(--ant-success);
@@ -46,7 +51,7 @@
     width: 18rem;
 
   }
-  .info {
+  .info-tip {
     margin-right: .75rem;
   }
   .ant-form-item {
@@ -86,7 +91,12 @@
     font-weight: bold;
     color: var(--owncast-purple);
   }
-  .info { margin-left: .5rem }
+  .info-tip {
+    margin-left: .5rem;
+    svg {
+      fill: white;
+    }
+  }
   .ant-form-item {
     margin: 0 .75rem 0 0;
   }
diff --git a/web/styles/globals.scss b/web/styles/globals.scss
index d74d17bb6..305b5f488 100644
--- a/web/styles/globals.scss
+++ b/web/styles/globals.scss
@@ -25,17 +25,41 @@ pre {
   margin: .5rem 0;
   background-color: #eee;
 }
+code {
+  color: var(--owncast-purple);
+}
 
 .owncast-layout .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected {
   background-color: $owncast-purple;
 }
 
 
+
+@media (prefers-color-scheme: dark) {
+  @import "~antd/dist/antd.dark";
+  pre {
+    background-color: rgb(44, 44, 44);
+    color:lightgrey;
+  }
+}
+
+
 // GENERAL ANT FORM OVERRIDES
 // GENERAL ANT FORM OVERRIDES
 .ant-card {
   border-radius: .5em;
 }
+.ant-input-affix-wrapper {
+  border-radius: 5px;
+  background-color: rgba(0,0,0,.1);
+  @media (prefers-color-scheme: dark) {
+    border-radius: 5px;
+    background-color: rgba(255,255,255,.1);
+  }
+  textarea {
+    border-radius: 5px;
+  }
+}
 .ant-btn-primary:hover, .ant-btn-primary:focus {
   background-color: white;
   color: #40a9ff;
@@ -51,12 +75,3 @@ pre {
   transition-delay: 0s;
   transition-duration: 0.15s;
 }
-
-
-@media (prefers-color-scheme: dark) {
-  @import "~antd/dist/antd.dark";
-  pre {
-    background-color: rgb(44, 44, 44);
-    color:lightgrey;
-  }
-}
diff --git a/web/utils/server-status-context.tsx b/web/utils/server-status-context.tsx
index afc3798ee..8d9449961 100644
--- a/web/utils/server-status-context.tsx
+++ b/web/utils/server-status-context.tsx
@@ -53,7 +53,7 @@ export const ServerStatusContext = React.createContext({
   ...initialServerStatusState,
   serverConfig: initialServerConfigState,
 
-  setConfigField: any,
+  setFieldInConfigState: any,
 });
 
 const ServerStatusProvider = ({ children }) => {
@@ -78,7 +78,7 @@ const ServerStatusProvider = ({ children }) => {
     }
   };
 
-  const setConfigField = ({ fieldName, value, path }: UpdateArgs) => {
+  const setFieldInConfigState = ({ fieldName, value, path }: UpdateArgs) => {
     const updatedConfig = path ? 
     {
       ...config,
@@ -114,7 +114,7 @@ const ServerStatusProvider = ({ children }) => {
       ...status,
       serverConfig: config,
 
-      setConfigField,
+      setFieldInConfigState,
   };
   return (
     <ServerStatusContext.Provider value={providerValue}>