diff --git a/packages/ui/@components/v-button.vue b/packages/ui/@components/v-button.vue
index 8534506..97b45e4 100644
--- a/packages/ui/@components/v-button.vue
+++ b/packages/ui/@components/v-button.vue
@@ -1,6 +1,5 @@
 <template>
 	<button class="v-button"
-			  @click="$emit('click', $event)"
 			  :class="{
 			  		'--capsule': !!capsule,
 			  		'--round': !!round,
@@ -11,7 +10,11 @@
 			  		'--bold': !!bold,
 			  		'--italic': !!italic,
 			  		'--uppercase': !!uppercase,
-			  }">
+			  }"
+			  :type="type"
+			  :title="title"
+			  :disabled="disabled"
+			  @click="$emit('click', $event)">
 		<v-loading-spinner class="-loading" v-if="loading"></v-loading-spinner>
 		<i class="-icon material-icons" v-else-if="icon && !loading">{{ icon }}</i>
 		<span class="-text" v-if="text">{{ text }}</span>
@@ -45,11 +48,22 @@ export default {
 			required: false
 		},
 
+		'title': {
+			type: String,
+			required: false
+		},
+
 		'text': {
 			type: String,
 			required: false
 		},
 
+		'type': {
+			type: String,
+			required: false,
+			default: 'button'
+		},
+
 		'capsule': {
 			type: Boolean,
 			required: false,
@@ -109,6 +123,12 @@ export default {
 			default: false
 		},
 
+		'disabled': {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+
 	},
 
 
@@ -150,11 +170,12 @@ export default {
 	--var-padding-v:     var(--v-button--padding-v, 0.6em);
 	--var-padding-h:     var(--v-button--padding-h, 1.3em);
 	--var-bg:            var(--v-button--bg, transparent);
-	--var-bg--hover:     var(--v-button--bg--hover, rgba(0,0,0,0.15));
+	--var-bg--hover:     var(--v-button--bg--hover, rgba(0,0,0,0.08));
 	--var-fg:            var(--v-button--fg, var(--blank-fg--base));
 	--var-fg--hover:     var(--v-button--fg--hover, var(--var-fg));
 	--var-elems-margin:  var(--v-button--elems-margin, 1em);
-	--var-border-radius: var(--v-button--border-radius, 0px);
+	--var-border-radius: var(--v-button--border-radius, 30em);
+	--var-border-color:  var(--v-button--border-color, var(--m-grey-400));
 
 	display: flex;
 	flex-direction: row;
@@ -194,16 +215,15 @@ export default {
 
 	box-shadow: 0 0 0 1pt transparent;
 
-	background-color: var(--var-bg--hover);
-
-	transition: opacity, border, 0.2s ease;
+	transition: opacity, background-color, box-shadow, 0.2s ease;
 }
 .v-button:not(:disabled):hover::after,
 .v-button:not(:disabled):focus::after{
 	opacity: 1;
+	background-color: var(--var-bg--hover);
 }
 .v-button:not(:disabled):focus::after{
-	box-shadow: 0 0 0 1pt var(--m-grey-400);
+	box-shadow: 0 0 0 1pt var(--var-border-color);
 }
 .v-button:disabled{
 	cursor: default;
@@ -239,12 +259,9 @@ export default {
 	--var-border-radius: 50%;
 }
 
-.v-button.--outline{
-	border: 2px solid var(--var-fg);
-}
-.v-button.--outline:focus,
-.v-button.--outline:hover{
-	border: 2px solid var(--var-fg--hover);
+.v-button.--outline::after{
+	opacity: 1;
+	box-shadow: 0 0 0 1pt var(--var-border-color);
 }
 
 
@@ -260,7 +277,7 @@ export default {
 	transition: color 0.2s ease;
 	z-index: 2;
 }
-.v-button:hover > .-icon.material-icons{
+.v-button:not(:disabled):hover > .-icon.material-icons{
 	color: var(--var-fg--hover);
 }
 .v-button.--italic > .-icon.material-icons{
diff --git a/packages/ui/@components/v-text-field.vue b/packages/ui/@components/v-text-field.vue
new file mode 100644
index 0000000..00516a8
--- /dev/null
+++ b/packages/ui/@components/v-text-field.vue
@@ -0,0 +1,291 @@
+<template>
+	<div class="v-text-field"
+			  :class="{
+			  		'--fullwidth': !!fullwidth,
+			  		'--bold': !!bold,
+			  		'--italic': !!italic,
+			  }">
+
+		<v-loading-spinner class="-loading" v-if="loading"></v-loading-spinner>
+
+		<i class="-icon material-icons" v-else-if="icon && !loading">{{ icon }}</i>
+
+		<input
+			class="-input"
+			ref="input"
+			:type="type"
+			:title="title"
+			:autocomplete="autocomplete"
+			:spellcheck="spellcheck"
+			:placeholder="placeholder"
+			:disabled="disabled"
+			:value="value"
+			@blur="$emit('blur', $event)"
+			@focus="$emit('focus', $event)"
+			@input="$emit('input', $event.target.value)"/>
+	</div>
+</template>
+
+
+
+<script>
+import VLoadingSpinner from './v-loading-spinner';
+
+
+
+export default {
+
+	name: 'v-text-field',
+
+
+	components: { VLoadingSpinner },
+
+
+	props: {
+
+		'loading': {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+
+		'disabled': {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+
+		'type': {
+			type: String,
+			required: false,
+			default: 'text'
+		},
+
+		'title': {
+			type: String,
+			required: false,
+			default: null
+		},
+
+		'autocomplete': {
+			type: String,
+			required: false,
+			default: 'nope'
+		},
+
+		'spellcheck': {
+			type: String,
+			required: false,
+			default: 'false'
+		},
+
+		'icon': {
+			type: String,
+			required: false
+		},
+
+		'placeholder': {
+			type: String,
+			required: false
+		},
+
+		'autofocus': {
+			type: Boolean,
+			required: false
+		},
+
+		'autoclear': {
+			type: Boolean,
+			required: false
+		},
+
+		'value': {
+			required: false
+		},
+
+		'fullwidth': {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+
+		'bold': {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+
+		'italic': {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+
+	},
+
+
+	mounted(){
+		if(this.autofocus)
+			this.focus();
+		if(this.autoclear)
+			this.clear();
+	},
+
+
+	methods: {
+		getInput(){
+			return this.$refs.input;
+		},
+
+		isFocus(){
+			return document.activeElement === this.getInput();
+		},
+
+		focus(){
+			this.getInput()?.focus();
+		},
+
+		blur(){
+			this.getInput()?.blur();
+		},
+
+		clear(){
+			if(this.getInput())
+				this.getInput().value = '';
+		},
+
+	}
+
+}
+</script>
+
+
+
+<style>
+.v-text-field{
+	--var-fsize:         var(--v-text-field--fsize, 14px);
+	--var-width:         var(--v-text-field--width, auto);
+	--var-height:        var(--v-text-field--height, auto);
+	--var-padding-v:     var(--v-text-field--padding-v, 0.6em);
+	--var-padding-h:     var(--v-text-field--padding-h, 1.3em);
+	--var-bg:            var(--v-text-field--bg, transparent);
+	--var-bg--hover:     var(--v-text-field--bg--hover, rgba(0,0,0,0.06));
+	--var-fg:            var(--v-text-field--fg, var(--m-grey-800));
+	--var-fg--hover:     var(--v-text-field--fg--hover, var(--var-fg));
+	--var-elems-margin:  var(--v-text-field--elems-margin, 1em);
+	--var-border-radius: var(--v-text-field--border-radius, 30em);
+	--var-border-color:  var(--v-text-field--border-color, var(--m-grey-400));
+
+	cursor: text;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+
+	min-width: var(--var-width);
+	width: var(--var-width);
+	max-width: var(--var-width);
+
+	min-height: var(--var-height);
+	height: var(--var-height);
+	max-height: var(--var-height);
+
+	background: var(--var-bg);
+
+	font-size: var(--var-fsize);
+
+	border-radius: var(--var-border-radius);
+}
+.v-text-field:focus{
+	outline: 1px solid transparent;
+}
+
+.v-text-field::after{
+	content: '';
+	opacity: 1;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+
+	border-radius: var(--var-border-radius);
+
+	box-shadow: 0 0 0 1pt var(--var-border-color);
+
+	transition: opacity, background-color, box-shadow, 0.2s ease;
+}
+.v-text-field:not(:disabled):hover::after,
+.v-text-field:not(:disabled):focus-within::after{
+	opacity: 1;
+	background-color: var(--var-bg--hover);
+}
+.v-text-field:not(:disabled):focus-within::after{
+	box-shadow: 0 0 0 1pt var(--var-border-color);
+}
+.v-text-field:disabled{
+	cursor: default;
+	opacity: 0.5;
+}
+.v-text-field:disabled > .-icon.material-icons,
+.v-text-field:disabled > .-loading{
+	opacity: 0.7;
+}
+
+.v-text-field.--fullwidth{
+	--var-width: 100%;
+}
+
+
+.v-text-field > .-loading{
+	flex: 0 0 auto;
+	width: 1.8em;
+	height: 1.8em;
+}
+
+
+.v-text-field > .-icon.material-icons{
+	flex: 0 0 auto;
+	font-size: 1.4em;
+	color: var(--var-fg);
+	transition: color 0.2s ease;
+	z-index: 2;
+}
+.v-text-field:not(:disabled):hover > .-icon.material-icons{
+	color: var(--var-fg--hover);
+}
+.v-text-field.--italic > .-icon.material-icons{
+	font-style: italic;
+}
+
+.v-text-field > .-input{
+	flex: 1 1 auto;
+	color: var(--var-fg);
+	font-family: 'Roboto', sans-serif;
+	font-size: 1em;
+	letter-spacing: 0.03em;
+
+	padding: var(--var-padding-v) var(--var-padding-h);
+
+	border-radius: var(--var-border-radius);
+
+	transition: color 0.2s ease;
+	z-index: 2;
+}
+.v-text-field.--bold > .-input{
+	font-family: 'Roboto Medium', sans-serif;
+	font-weight: 600;
+}
+.v-text-field.--italic > .-input{
+	font-style: italic;
+}
+.v-text-field > .-loading + .-input,
+.v-text-field > .-icon + .-input{
+	margin-left: var(--var-elems-margin);
+}
+
+.v-text-field:not(:disabled):focus-within > .-input,
+.v-text-field:not(:disabled):hover > .-input{
+	color: var(--var-fg--hover);
+}
+
+</style>
diff --git a/packages/ui/project/settings/v-project-settings.vue b/packages/ui/project/settings/v-project-settings.vue
new file mode 100644
index 0000000..0ad7f0c
--- /dev/null
+++ b/packages/ui/project/settings/v-project-settings.vue
@@ -0,0 +1,217 @@
+<template>
+	<div class="v-project-settings">
+
+		<header class="-header">
+			<span class="-title">Project settings</span>
+		</header>
+
+
+		<div class="-sections">
+
+			<section class="-section">
+				<span class="-title">Project</span>
+				<div class="-configs">
+					<div class="-config">
+						<span class="-label">Project name</span>
+						<v-text-field
+							class="-input"
+							v-model="project.name"
+							placeholder="The name of this project"
+							title="The name of this project">
+						</v-text-field>
+					</div>
+				</div>
+			</section>
+
+			<section class="-section">
+				<span class="-title">Repository</span>
+				<div class="-configs">
+
+					<div class="-config">
+						<span class="-label">Location</span>
+						<v-text-field
+							class="-input"
+							v-model="repository.location"
+							placeholder="Example: C:\path\to\my\repo"
+							title="The path to the local repository">
+						</v-text-field>
+					</div>
+
+					<div class="-config">
+						<span class="-label">Remotes</span>
+<!--						<v-text-field-->
+<!--							class="-input"-->
+<!--							v-model="repository.remotes"-->
+<!--							placeholder="Example: C:\path\to\my\repo"-->
+<!--							title="The path to the local repository">-->
+<!--						</v-text-field>-->
+					</div>
+
+				</div>
+			</section>
+
+		</div>
+
+
+		<div class="-actions">
+
+			<!-- * Cancel * -->
+			<v-button
+				class="-action -cancel"
+				type="button"
+				text="Cancel"
+				title="Cancel settings"
+				uppercase
+				outline>
+			</v-button>
+
+
+			<!-- * Save * -->
+			<v-button
+				class="-action -save"
+				type="button"
+				text="Save"
+				title="Save settings"
+				uppercase
+				outline>
+			</v-button>
+
+		</div>
+
+	</div>
+</template>
+
+
+
+<script>
+import { mapMutations, mapState } from 'vuex';
+import VButton                    from '../../@components/v-button';
+import VTextField                 from '../../@components/v-text-field';
+
+
+
+export default {
+
+	name: 'v-project-settings',
+
+
+	components: { VTextField, VButton },
+
+
+	data(){
+		return {
+			project: {
+				name: null,
+			},
+			repository: {
+				location: null,
+			},
+		}
+	},
+
+
+	computed: {
+		...mapState('project', [ 'project_vos', 'selected_project_vo' ]),
+	},
+
+
+	async beforeMount(){
+		await this.loadCurrentSettings(this.selected_project_vo);
+	},
+
+
+	methods: {
+		async loadCurrentSettings(project_vo){
+			this.project.name = project_vo.project.name;
+			this.repository.location = project_vo.project.details?.location;
+		}
+	},
+
+}
+</script>
+
+
+
+<style>
+.v-project-settings{
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+
+	padding: 0.5em var(--side-margins) 5em var(--side-margins);
+
+	overflow-y: auto;
+}
+
+.v-project-settings > .-header{
+	display: flex;
+	align-items: center;
+
+	margin-bottom: 1.2em;
+}
+.v-project-settings > .-header > .-title{
+	font-size: 18px;
+	font-family: 'Roboto Medium', sans-serif;
+	letter-spacing: 0.03em;
+}
+.v-project-settings > .-sections{
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	padding-bottom: 3em;
+}
+.v-project-settings > .-sections > .-section{
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+}
+.v-project-settings > .-sections > .-section > .-title{
+	padding: 0.4em 0;
+
+	font-size: 16px;
+	font-family: 'Roboto Medium', sans-serif;
+	letter-spacing: 0.03em;
+}
+.v-project-settings > .-sections > .-section > .-title::after{
+	content: '';
+	position: absolute;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	height: 1pt;
+	background-color: rgba(0,0,0,0.08);
+}
+.v-project-settings > .-sections > .-section > .-configs{
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	padding: 1em 0;
+}
+.v-project-settings > .-sections > .-section > .-configs > .-config{
+	display: flex;
+	align-items: baseline;
+}
+.v-project-settings > .-sections > .-section > .-configs > .-config + .-config{
+	margin-top: 1em;
+}
+.v-project-settings > .-sections > .-section > .-configs > .-config > .-label{
+	flex: 0 0 auto;
+	width: 10em;
+	font-size: 14px;
+}
+.v-project-settings > .-sections > .-section > .-configs > .-config > .-input{
+	flex: 1 1 auto;
+
+}
+
+.v-project-settings > .-actions{
+	display: flex;
+	justify-content: flex-end;
+}
+.v-project-settings > .-actions > .-action + .-action{
+	margin-left: 1.5em;
+}
+.v-project-settings > .-actions > .-action.-save{
+	--v-button--border-color: var(--accent-bg--base);
+}
+</style>
diff --git a/packages/ui/project/v-project-home.vue b/packages/ui/project/v-project-home.vue
new file mode 100644
index 0000000..34b4443
--- /dev/null
+++ b/packages/ui/project/v-project-home.vue
@@ -0,0 +1,49 @@
+<template>
+	<div class="v-project-home">
+		<v-log-panel class="-log-panel" v-if="selected_project_vo" :project_vo="selected_project_vo"></v-log-panel>
+		<v-commit-panel class="-diff-panel" v-if="selected_project_vo" :project_vo="selected_project_vo"></v-commit-panel>
+	</div>
+</template>
+
+
+
+<script>
+import VLogPanel    from './v-log-panel';
+import { mapState } from 'vuex';
+import VCommitPanel from './v-commit-panel';
+
+
+
+export default {
+
+	name: 'v-project-home',
+
+
+	components: { VCommitPanel, VLogPanel },
+
+
+	computed: {
+		...mapState('project', [ 'selected_project_vo' ]),
+	},
+
+}
+</script>
+
+
+
+<style>
+.v-project-home{
+	display: flex;
+	padding: 0.5em var(--side-margins) 5em var(--side-margins);
+}
+.v-project-home > .-log-panel + .-diff-panel{
+	margin-left: 2.5em;
+}
+.v-project-home > .-log-panel{
+	flex: 1 1 auto;
+}
+.v-project-home > .-diff-panel{
+	flex: 0 0 auto;
+	width: 40%;
+}
+</style>
diff --git a/packages/ui/project/v-project-view.vue b/packages/ui/project/v-project-view.vue
index 5264a31..5243d63 100644
--- a/packages/ui/project/v-project-view.vue
+++ b/packages/ui/project/v-project-view.vue
@@ -24,6 +24,8 @@
 					class="-action -settings"
 					type="button"
 					icon="settings"
+					:disabled="$route.name == 'project-settings'"
+					@click="$router.push({ name: 'project-settings', params: { _project: selected_project_vo.id } })"
 					title="Project settings">
 				</v-button>
 
@@ -32,10 +34,10 @@
 		</header>
 
 
-		<div class="-content --thin-scroll">
-			<v-log-panel class="-log-panel" v-if="selected_project_vo" :project_vo="selected_project_vo"></v-log-panel>
-			<v-commit-panel class="-diff-panel" v-if="selected_project_vo" :project_vo="selected_project_vo"></v-commit-panel>
-		</div>
+		<router-view class="-route --thin-scroll">
+<!--			<v-log-panel class="-log-panel" v-if="selected_project_vo" :project_vo="selected_project_vo"></v-log-panel>-->
+<!--			<v-commit-panel class="-diff-panel" v-if="selected_project_vo" :project_vo="selected_project_vo"></v-commit-panel>-->
+		</router-view>
 
 	</div>
 </template>
@@ -73,7 +75,7 @@ export default {
 
 				// *Loading the first project, if none were provided or found:
 				if((!_project && this.project_vos?.length) || (!project && this.project_vos?.length)){
-					this.$router.replace({ name: 'project', params: { _project: this.project_vos[0].id } });
+					this.$router.replace({ name: 'project-home', params: { _project: this.project_vos[0].id } });
 					return;
 				}
 
@@ -84,6 +86,14 @@ export default {
 	},
 
 
+	beforeRouteEnter(to, from, next){
+		if(to.name=='project')
+			next({ name: 'project-home' });
+		else
+			next();
+	},
+
+
 	methods: {
 		...mapMutations('project', [ 'setSelectedProjectVO' ]),
 	},
@@ -99,8 +109,6 @@ export default {
 	flex-direction: column;
 	align-items: stretch;
 
-	padding: 2em var(--side-margins) 5em var(--side-margins);
-
 	overflow-y: auto;
 }
 
@@ -108,11 +116,12 @@ export default {
 	display: grid;
 	align-items: center;
 
-	/*padding: 0.8em 0;*/
 	grid-template-columns: auto 1fr auto;
 	grid-template-rows: auto;
 	grid-template-areas:
 		'name-area ... actions';
+
+	padding: 2em var(--side-margins) 0.6em var(--side-margins);
 }
 .v-project-view > .-header > .-name-area{
 	grid-area: name-area;
@@ -162,20 +171,34 @@ export default {
 .v-project-view > .-header > .-actions > .-action + .-action{
 	margin-left: 1.5em;
 }
-
-
-.v-project-view > .-content{
-	display: flex;
-	margin-top: 1.2em;
-}
-.v-project-view > .-content > .-log-panel + .-diff-panel{
-	margin-left: 2.5em;
-}
-.v-project-view > .-content > .-log-panel{
-	flex: 1 1 auto;
-}
-.v-project-view > .-content > .-diff-panel{
-	flex: 0 0 auto;
-	width: 40%;
-}
+/*.v-project-view > .-header > .-actions > .-action::before{*/
+/*	opacity: 0;*/
+/*	content: '';*/
+/*	position: absolute;*/
+/*	left: 0;*/
+/*	bottom: 0;*/
+/*	width: 100%;*/
+/*	height: 3px;*/
+/*	transform: scaleX(0.9);*/
+/*	background-color: var(--accent-bg--base);*/
+/*	transition: opacity 0.15s ease-out;*/
+/*}*/
+/*.v-project-view > .-header > .-actions > .-action.--selected::before{*/
+/*	opacity: 1;*/
+/*}*/
+
+
+/*.v-project-view > .-route{*/
+/*	margin-top: 1.2em;*/
+/*}*/
+/*.v-project-view > .-content > .-log-panel + .-diff-panel{*/
+/*	margin-left: 2.5em;*/
+/*}*/
+/*.v-project-view > .-content > .-log-panel{*/
+/*	flex: 1 1 auto;*/
+/*}*/
+/*.v-project-view > .-content > .-diff-panel{*/
+/*	flex: 0 0 auto;*/
+/*	width: 40%;*/
+/*}*/
 </style>
diff --git a/packages/ui/project/v-projects-page.vue b/packages/ui/project/v-projects-page.vue
index 8c9e39e..652adda 100644
--- a/packages/ui/project/v-projects-page.vue
+++ b/packages/ui/project/v-projects-page.vue
@@ -4,7 +4,7 @@
 			<router-link
 				class="-project"
 				:class="{ '--selected': selected_project_vo && selected_project_vo.id == project_vo.id }"
-				:to="{ name: 'project', params: { _project: project_vo.id } }"
+				:to="{ name: 'project-home', params: { _project: project_vo.id } }"
 				:key="project_vo.id"
 				v-for="project_vo in project_vos"
 				tag="button">
diff --git a/packages/ui/router.mjs b/packages/ui/router.mjs
index 5396f96..3e55d73 100644
--- a/packages/ui/router.mjs
+++ b/packages/ui/router.mjs
@@ -5,8 +5,10 @@ import VueRouter from 'vue-router'
 import AppSection from './v-app-section'
 
 // *Getting the app's pages:
-import ProjectsPage from './project/v-projects-page'
-import ProjectView  from './project/v-project-view'
+import ProjectsPage     from './project/v-projects-page'
+import ProjectView      from './project/v-project-view'
+import ProjectHome      from './project/v-project-home'
+import ProjectSettings  from './project/settings/v-project-settings'
 
 
 
@@ -27,7 +29,15 @@ const router = new VueRouter({
 					path: '/projects',
 					component: ProjectsPage,
 					children: [
-						{ name: 'project', path: '/projects/:_project', component: ProjectView }
+						{
+							name: 'project',
+							path: '/projects/:_project',
+							component: ProjectView,
+							children: [
+								{ name: 'project-settings', path: '/projects/:_project/settings', component: ProjectSettings },
+								{ name: 'project-home', path: '/projects/:_project', component: ProjectHome },
+							]
+						},
 					]
 				},
 			]