diff --git a/src/Routes.tsx b/src/Routes.tsx
index 85b7708..3d54750 100644
--- a/src/Routes.tsx
+++ b/src/Routes.tsx
@@ -8,6 +8,7 @@ import Profile from './views/Profile/Profile';
 import OrgPage from './views/OrgPage/OrgPage';
 import Settings from './views/Settings/Settings';
 import About from './views/About/About';
+import NewDocBase from './views/NewDocBase/NewDocBase';
 
 /**
  * All of our routes are defined here.
@@ -21,6 +22,10 @@ function Routes() {
 				<Route path="/register" Component={Register} />
 				<Route path="/organization/create" Component={CreateOrg} />
 				<Route path="/organization/add/:id" Component={AddToOrg} />
+				<Route
+					path="/organization/:id/docbase/new"
+					Component={NewDocBase}
+				/>
 				<Route path="/organization/:id" Component={OrgPage} />
 				<Route path="/settings" Component={Settings} />
 				<Route path="/about" Component={About} />
diff --git a/src/components/AttributeAdder/AttributeAdder.tsx b/src/components/AttributeAdder/AttributeAdder.tsx
index 9e17bd2..89e74bb 100644
--- a/src/components/AttributeAdder/AttributeAdder.tsx
+++ b/src/components/AttributeAdder/AttributeAdder.tsx
@@ -3,12 +3,13 @@ import './AttributeAdder.scss';
 
 interface Props {
 	populateAble: boolean;
+	onListChange: (list: string[]) => void;
 }
 
 /**
  * A component that allows the user to add attributes to there document base
  */
-function AttributeAdder({ populateAble = true }: Props) {
+function AttributeAdder({ populateAble = true, onListChange }: Props) {
 	const [attList, setAttList] = useState<string[]>([]);
 	const [inputvalue, setInputValue] = useState<string>('');
 
@@ -16,11 +17,16 @@ function AttributeAdder({ populateAble = true }: Props) {
 		if (attList.includes(att) || att.trim() === '') {
 			return;
 		}
-		setAttList([...attList, att]);
+		setAttributeList([...attList, att]);
 	};
 
 	const deleteAttribute = (att: string) => {
-		setAttList(attList.filter((a) => a !== att));
+		setAttributeList(attList.filter((a) => a !== att));
+	};
+
+	const setAttributeList = (list: string[]) => {
+		onListChange(list);
+		setAttList(list);
 	};
 
 	const handlekeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
diff --git a/src/index.scss b/src/index.scss
index 4d2146e..b95eb31 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -9,7 +9,9 @@ body {
 a {
 	color: var(--text-color);
 }
-
+input {
+	font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+}
 .content {
 	margin-top: 150px;
 	margin-left: 50px;
@@ -41,6 +43,22 @@ a {
 	}
 }
 
+.ipt {
+	margin: 0;
+	height: 40px;
+	background-color: var(--btn-color);
+	border: 2px solid var(--text-color);
+	border-radius: 5px;
+	color: var(--text-color);
+	padding: 0 10px;
+	font-size: 1.2rem;
+	margin-right: 10px;
+	width: 300px;
+	&:focus {
+		outline: none;
+	}
+}
+
 .hor {
 	display: flex;
 	flex-direction: row;
@@ -66,6 +84,7 @@ a {
 	width: 100%;
 	height: 100%;
 	background-color: rgba(0, 0, 0, 0.5);
+	backdrop-filter: blur(5px);
 }
 
 .mb {
diff --git a/src/utils/ApiService.test.ts b/src/utils/ApiService.test.ts
index 9d9c1bb..82067e3 100644
--- a/src/utils/ApiService.test.ts
+++ b/src/utils/ApiService.test.ts
@@ -178,7 +178,9 @@ describe('APIService', () => {
 		expect(await APIService.leaveOrganization(eaterID as number)).toBe(
 			false
 		);
-		expect(await APIService.getOrganizationNames()).toBe(undefined);
+		//TODO does this make sense?
+		//expect(await APIService.getOrganizationNames()).toStrictEqual([]);
+		expect(await APIService.getOrganizationNames()).toBeUndefined();
 		await APIService.login(salt, salt);
 	});
 
diff --git a/src/views/CreateOrg/CreateOrg.tsx b/src/views/CreateOrg/CreateOrg.tsx
index 5467a5e..379900f 100644
--- a/src/views/CreateOrg/CreateOrg.tsx
+++ b/src/views/CreateOrg/CreateOrg.tsx
@@ -29,9 +29,9 @@ function CreateOrg() {
 			setErrorMessage('Organization name cannot be empty');
 			return;
 		}
-		if (name.length > 20) {
+		if (name.length > 30) {
 			setErrorMessage(
-				'Organization name cannot be longer than 20 characters'
+				'Organization name cannot be longer than 30 characters'
 			);
 			return;
 		}
diff --git a/src/views/Home/Home.tsx b/src/views/Home/Home.tsx
index e55155f..90a4ff3 100644
--- a/src/views/Home/Home.tsx
+++ b/src/views/Home/Home.tsx
@@ -70,6 +70,7 @@ function Home() {
 						className="btn"
 						style={{ width: '100px' }}
 					>
+						<i className="bi bi-box-arrow-in-right mr icon"></i>
 						Login
 					</Link>
 				</div>
diff --git a/src/views/NewDocBase/NewDocBase.scss b/src/views/NewDocBase/NewDocBase.scss
new file mode 100644
index 0000000..fbf8a5e
--- /dev/null
+++ b/src/views/NewDocBase/NewDocBase.scss
@@ -0,0 +1,2 @@
+.NewDocBase {
+}
diff --git a/src/views/NewDocBase/NewDocBase.tsx b/src/views/NewDocBase/NewDocBase.tsx
new file mode 100644
index 0000000..a8568f6
--- /dev/null
+++ b/src/views/NewDocBase/NewDocBase.tsx
@@ -0,0 +1,98 @@
+import { useEffect, useState } from 'react';
+import './NewDocBase.scss';
+import Navbar from '../../components/Navbar/Navbar';
+import AttributeAdder from '../../components/AttributeAdder/AttributeAdder';
+
+/**
+ * A page for creating a new Docbase
+ */
+function NewDocBase() {
+	//const navigate = useNavigate();
+	//const isLoggedIn = useLoggedIn();
+	//const setLoadingScreen = useSetLoadingScreen();
+
+	const [name, setName] = useState<string>('');
+	const [errorMsg, setErrorMsg] = useState<string>('');
+	const [attList, setAttList] = useState<string[]>([]);
+
+	const onRun = () => {
+		if (name.trim() === '') {
+			setErrorMsg('Please enter a name');
+			return;
+		}
+		if (attList.length === 0) {
+			setErrorMsg('Please add at least one attribute');
+			return;
+		}
+		setErrorMsg('');
+	};
+
+	useEffect(() => {
+		/* if (!isLoggedIn || !id) {
+			navigate('/');
+		}
+		setLoadingScreen(true, 'Loading organization...');
+		updateOrganizations().then((orgs) => {
+			const org = id
+				? orgs.find((org) => org.id === parseInt(id))
+				: undefined;
+			if (!org) {
+				navigate('/');
+				return;
+			}
+			setOrganization(org);
+
+			// Get members
+			APIService.getMembersForOrganization(org.id).then((members) => {
+				if (!members) {
+					console.error('Failed to get members for org ' + org.id);
+					return;
+				}
+				setMembers(members);
+			});
+			APIService.getDocumentForOrganization(org.id).then((docs) => {
+				setDocuments(docs);
+				setLoadingScreen(false);
+			});
+		}); */
+	});
+
+	return (
+		<div className="NewDocBase">
+			<Navbar />
+			<div className="content">
+				<h1>
+					Create new Docbase in Organization <i>ORGNAME</i>
+				</h1>
+				<h2>Name</h2>
+				<input
+					type="text"
+					className="ipt"
+					placeholder="Enter a name for the Docbase"
+					onChange={(e) => setName(e.target.value)}
+				/>
+				<h2>Attributes</h2>
+				<AttributeAdder
+					populateAble={false}
+					onListChange={(list) => {
+						setAttList(list);
+					}}
+				></AttributeAdder>
+				<p
+					className="mt"
+					style={{
+						color: 'red',
+						minHeight: '20px',
+					}}
+				>
+					{errorMsg}
+				</p>
+				<button className="btn" onClick={onRun}>
+					<i className="bi bi-play-fill icon mr"></i>Run
+				</button>
+			</div>
+		</div>
+	);
+}
+
+export default NewDocBase;
diff --git a/templates/ContentPage/$$name$$.tsx b/templates/ContentPage/$$name$$.tsx
index 824e5fe..e82b330 100644
--- a/templates/ContentPage/$$name$$.tsx
+++ b/templates/ContentPage/$$name$$.tsx
@@ -1,4 +1,4 @@
-import Navbar from '../Navbar/Navbar';
+import Navbar from '../../components/Navbar/Navbar';
 import './$$name$$.scss';
 
 function $$name$$() {
diff --git a/templates/UserContentPage/$$name$$.tsx b/templates/UserContentPage/$$name$$.tsx
index 1da67b3..0bef27e 100644
--- a/templates/UserContentPage/$$name$$.tsx
+++ b/templates/UserContentPage/$$name$$.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import Navbar from '../Navbar/Navbar';
+import Navbar from '../../components/Navbar/Navbar';
 import { useLoggedIn } from '../../providers/UserProvider';
 import './$$name$$.scss';