diff --git a/src/App.tsx b/src/App.tsx
index 4e3b2f8..909e800 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,12 +2,14 @@ import React from "react"
 import FileBrowser from "./components/FileBrowser"
 import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom"
 import NotFound from "./components/NotFound"
+import Login from "./components/Login"
   
 const App: React.FC = () => {
 	return (
-		<div>
+		<div className="dark:text-gray-300">
 			<Router>
 				<Switch>
+					<Route path="/login" exact component={Login} />
 					<Route path="/f/" component={FileBrowser}/>
 					<Redirect from="/" exact to="/f/" />
 					<Route path="*" component={NotFound} />
diff --git a/src/components/CreateDirButton.tsx b/src/components/CreateDirButton.tsx
index de51ec9..e8dddbf 100644
--- a/src/components/CreateDirButton.tsx
+++ b/src/components/CreateDirButton.tsx
@@ -38,7 +38,7 @@ const CreateDirButton: React.FC<Props> = (props) => {
 					}}>
 
 					<input
-						className="bg-transparent dark:text-gray-300 outline-none mx-1 border-b"
+						className="mx-1 text-input"
 						type="text"
 						onChange={(e)=>setName(e.target.value)}
 						value={name}
diff --git a/src/components/FileBrowser.tsx b/src/components/FileBrowser.tsx
index 792e745..cf0e032 100644
--- a/src/components/FileBrowser.tsx
+++ b/src/components/FileBrowser.tsx
@@ -111,7 +111,7 @@ const FileBrowser: React.FC<RouteComponentProps> = (props) => {
 	}
 
 	return (
-		<div className="dark:text-gray-300">
+		<div>
 			<FileBrowserContextMenu
 				onSelect={onContextSelect}
 				pasteActive={!!srcID}
diff --git a/src/components/Login.tsx b/src/components/Login.tsx
new file mode 100644
index 0000000..cb9ef86
--- /dev/null
+++ b/src/components/Login.tsx
@@ -0,0 +1,25 @@
+import React from "react"
+
+const Login: React.FC = () => {
+	return (
+		<div className="flex justify-center h-screen items-center">
+			<div>
+				<form onSubmit={(e)=>{
+					e.preventDefault()
+				}} >
+					<input type="text" placeholder="Username"
+						className="block my-2 text-input"
+						required
+					/>
+					<input type="password" placeholder="Password" 
+						className="block my-2 text-input"
+						required
+					/>
+					<button className="block my-2 w-full" >Login</button>
+				</form>
+			</div>
+		</div>
+	)
+}
+
+export default Login
diff --git a/src/index.scss b/src/index.scss
index b5c61c9..6e6244c 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Commonly used classes*/
+
+.text-input{
+    @apply bg-transparent border-gray-900 dark:border-gray-300 dark:text-gray-300 outline-none border-b
+}