diff --git a/web/pages/components/config/defaults.ts b/web/pages/components/config/defaults.ts
new file mode 100644
index 000000000..678193934
--- /dev/null
+++ b/web/pages/components/config/defaults.ts
@@ -0,0 +1,5 @@
+// DEFAULT VALUES
+
+export const DEFAULT_NAME = 'Owncast User';
+export const DEFAULT_TITLE = 'Owncast Server';
+export const DEFAULT_SUMMARY = '';
diff --git a/web/pages/components/config/form-textfield.tsx b/web/pages/components/config/form-textfield.tsx
new file mode 100644
index 000000000..146be9713
--- /dev/null
+++ b/web/pages/components/config/form-textfield.tsx
@@ -0,0 +1,25 @@
+/*
+- auto saves ,ajax call
+- set default text
+- show error state/confirm states
+- show info
+- label
+- min/max length
+
+- populate with curren val (from local sstate)
+
+load page, 
+get all config vals, 
+save to local state/context.
+read vals from there.
+update vals to state, andthru api.
+
+
+*/
+import React, { useContext } from 'react';
+import { ServerStatusContext } from '../../../utils/server-status-context';
+
+
+
+Server Name
+<Input placeholder="Owncast" value={name} />
\ No newline at end of file
diff --git a/web/pages/components/config/public-facing-details.tsx b/web/pages/components/config/public-facing-details.tsx
new file mode 100644
index 000000000..3d1ee6f8f
--- /dev/null
+++ b/web/pages/components/config/public-facing-details.tsx
@@ -0,0 +1,37 @@
+import React, { useContext } from 'react';
+import { Typography, Input } from 'antd';
+
+
+import { ServerStatusContext } from '../../../utils/server-status-context';
+
+const { Title } = Typography;
+
+export default function PublicFacingDetails() {
+  const serverStatusData = useContext(ServerStatusContext);
+  const { serverConfig, setConfigField } = serverStatusData || {};
+
+  const { instanceDetails = {},  } = serverConfig;
+
+  const { name, summary, title } = instanceDetails;
+
+  return (
+    <>
+      <Title level={2}>Edit your public facing instance details</Title>
+      <div className="config-public-details-container">
+        <div className="text-fields" role="form">
+            Server Name
+            <Input placeholder="Owncast" value={name} />
+
+
+        </div>
+        <div className="misc-optionals">
+          add social handles
+          <br/>
+          add tags 
+          
+        </div>
+      </div>      
+    </>
+  ); 
+}
+
diff --git a/web/styles/config.scss b/web/styles/config.scss
new file mode 100644
index 000000000..f2f0e0f0f
--- /dev/null
+++ b/web/styles/config.scss
@@ -0,0 +1,7 @@
+
+
+.config-public-details-container {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
diff --git a/web/utils/server-status-context.tsx b/web/utils/server-status-context.tsx
index 84ff1d3a5..5465e136c 100644
--- a/web/utils/server-status-context.tsx
+++ b/web/utils/server-status-context.tsx
@@ -5,6 +5,7 @@ import { STATUS, fetchData, FETCH_INTERVAL, SERVER_CONFIG } from './apis';
 
 export const initialServerConfigState = {
   streamKey: '',
+  instanceDetails: {},
   yp: {
     enabled: false,
   },
@@ -36,6 +37,8 @@ const initialServerStatusState = {
 export const ServerStatusContext = React.createContext({
   ...initialServerStatusState,
   serverConfig: initialServerConfigState,
+
+  setConfigField: () => {},
 });
 
 const ServerStatusProvider = ({ children }) => {
@@ -60,6 +63,14 @@ const ServerStatusProvider = ({ children }) => {
     }
   };
 
+  const setConfigField = ({ fieldName, value }) => {
+    const updatedConfig = {
+      ...config,
+      [fieldName]: value,
+    };
+    setConfig(updatedConfig);
+  }
+
   
   useEffect(() => {
     let getStatusIntervalId = null;
@@ -78,6 +89,8 @@ const ServerStatusProvider = ({ children }) => {
   const providerValue = {
       ...status,
       serverConfig: config,
+
+      setConfigField,
   };
   return (
     <ServerStatusContext.Provider value={providerValue}>