diff --git a/index.html b/index.html
index ceed5b3..27e7d6c 100644
--- a/index.html
+++ b/index.html
@@ -3,8 +3,13 @@
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>physphile</title>
+		<title>Калькулятор стипендии</title>
+
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
 	</head>
+
 	<body>
 		<div id="app"></div>
 		<script type="module" src="/src/main.ts"></script>
diff --git a/package.json b/package.json
index 2debb1f..a7a7bb8 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,10 @@
 {
-	"name": "personal-budget",
+	"name": "calculator-ui",
 	"private": true,
 	"version": "0.0.0",
 	"type": "module",
 	"scripts": {
-		"dev": "vite",
+		"dev": "vite --host",
 		"build": "vue-tsc && vite build",
 		"preview": "vite preview",
 		"lint": "eslint --ext .ts,.vue . --fix",
diff --git a/src/components/IrdomTooltip.vue b/src/components/IrdomTooltip.vue
new file mode 100644
index 0000000..c353327
--- /dev/null
+++ b/src/components/IrdomTooltip.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+defineProps<{ text: string }>();
+</script>
+
+<template>
+	<v-tooltip :text="text" open-on-click open-on-focus>
+		<template #activator="{ props }">
+			<v-btn v-bind="props" variant="tonal" icon="" size="x-small" style="font-size: medium"> ? </v-btn>
+		</template>
+		<slot />
+	</v-tooltip>
+</template>
diff --git a/src/pages/PageMain.vue b/src/pages/PageMain.vue
index a20c82e..125ed01 100644
--- a/src/pages/PageMain.vue
+++ b/src/pages/PageMain.vue
@@ -1,17 +1,22 @@
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue';
+import { computed, reactive, ref, watch } from 'vue';
 import IrdomSection from '../components/IrdomSection.vue';
 import { Stipend, TAX } from '../constants';
+import IrdomTooltip from '../components/IrdomTooltip.vue';
 
-const lz = (n: number) => `0${n}`.slice(-2);
+const lz = (number: number, digits: number) => `${'0'.repeat(digits)}${number}`.slice(-digits);
 
-const data = reactive({
-	course: '1',
-	member: true,
-	retake: false,
-	marks: [] as number[],
-	pgas: false,
-	gss: false,
+interface Data {
+	course?: string;
+	member?: boolean;
+	retake?: boolean;
+	marks: number[];
+	pgas?: boolean;
+	gss?: boolean;
+}
+
+const data = reactive<Data>({
+	marks: [],
 });
 
 const junior = computed(() => data.course === '1' || data.course === '2');
@@ -21,18 +26,29 @@ const nomarks = ref(false);
 const nomarksHandler = (val: boolean) => {
 	if (val) {
 		data.marks = [];
+		data.retake = false;
+	} else {
+		data.retake = undefined;
 	}
 };
 
+const allDef = computed(() => {
+	const every = ['course', 'member', 'retake', 'gss'].every(key => data[key as keyof Data] !== undefined);
+	const pgas = !gasCondition.value || data.pgas !== undefined;
+	const marks = nomarks.value || data.marks.length;
+	return every && pgas && marks;
+});
+
+const gasCondition = computed(() => data.retake === false && !data.marks.includes(3));
+
 const stipend = computed(() => {
 	let sum = 0;
 
-	const gasCondition = data.retake === false && !data.marks.includes(3);
-	const pgasCondition = data.pgas === true && data.retake === false;
+	const pgasCondition = gasCondition.value && data.pgas === true;
 	const gssCondition = data.gss === true;
 	const pgssCondition = gssCondition && junior.value && data.marks.length && !data.marks.includes(3);
 
-	if (gasCondition) {
+	if (gasCondition.value) {
 		if (!data.marks.length) sum += Stipend.gas.miss;
 		else if (data.marks.includes(4) && data.marks.includes(5)) sum += Stipend.gas.with4and5;
 		else if (data.marks.includes(4)) sum += Stipend.gas.only4;
@@ -55,8 +71,8 @@ const formattedStipend = computed(() => {
 	const rest = Math.floor(stipend.value % 1000);
 	const float = Math.round((stipend.value % 1) * 100);
 
-	if (thousands) return `${thousands} ${rest},${lz(float)} ₽`;
-	return `${rest},${lz(float)} ₽`;
+	if (thousands) return `${thousands} ${lz(rest, 3)},${lz(float, 2)} ₽`;
+	return `${rest},${lz(float, 2)} ₽`;
 });
 
 const updateCourseHandler = () => {
@@ -64,96 +80,156 @@ const updateCourseHandler = () => {
 		nomarks.value = false;
 	}
 };
+
+watch(gasCondition, val => {
+	if (val) {
+		data.pgas = undefined;
+	} else {
+		data.pgas = false;
+	}
+});
 </script>
 
 <template>
-	<div class="bg-grey-lighten-4 pa-6 rounded">
-		<IrdomSection title="Курс обучения">
-			<v-btn-toggle
-				v-model="data.course"
-				mandatory
-				style="flex-wrap: wrap; height: auto"
-				@update:model-value="updateCourseHandler"
-			>
-				<v-btn value="1" style="height: 48px">1</v-btn>
-				<v-btn value="2" style="height: 48px">2</v-btn>
-				<v-btn value="3" style="height: 48px">3</v-btn>
-				<v-btn value="4" style="height: 48px">4</v-btn>
-				<br />
-				<v-btn value="5" style="height: 48px">5</v-btn>
-				<v-btn value="6" style="height: 48px">6</v-btn>
-				<v-btn value="1М" style="height: 48px">1М</v-btn>
-				<v-btn value="2М" style="height: 48px">2М</v-btn>
-			</v-btn-toggle>
-		</IrdomSection>
-
-		<IrdomSection title="Членство в Профсоюзе">
-			<v-btn-toggle v-model="data.member" mandatory>
-				<v-btn :value="true">Состою</v-btn>
-				<v-btn :value="false">Не состою</v-btn>
-			</v-btn-toggle>
-		</IrdomSection>
-
-		<IrdomSection title="Пересдачи за последнюю сессию">
-			<v-btn-toggle v-model="data.retake" mandatory>
-				<v-btn :value="true">Были</v-btn>
-				<v-btn :value="false">Не были</v-btn>
-			</v-btn-toggle>
-		</IrdomSection>
-
-		<IrdomSection title="Оценки за последнюю сессию">
-			<v-btn-toggle v-model="data.marks" multiple :disabled="nomarks">
-				<v-btn :value="3">3</v-btn>
-				<v-btn :value="4">4</v-btn>
-				<v-btn :value="5">5</v-btn>
-			</v-btn-toggle>
-			<v-checkbox
-				v-if="isNomarksCouse"
-				v-model="nomarks"
-				label="Оценок нет"
-				hide-details="auto"
-				style="margin-bottom: -23px"
-				@update:model-value="nomarksHandler"
-			></v-checkbox>
-		</IrdomSection>
-
-		<IrdomSection title="ПГАС">
-			<v-btn-toggle v-model="data.pgas" mandatory>
-				<v-btn :value="true">Получаю</v-btn>
-				<v-btn :value="false">Не получаю</v-btn>
-			</v-btn-toggle>
-		</IrdomSection>
-
-		<IrdomSection title="ГСС">
-			<v-btn-toggle v-model="data.gss" mandatory>
-				<v-btn :value="true">Получаю</v-btn>
-				<v-btn :value="false">Не получаю</v-btn>
-			</v-btn-toggle>
-		</IrdomSection>
-	</div>
-	<div class="d-flex">
-		<div class="your">Ожидаемая сумма:</div>
-		<div class="stipend">{{ formattedStipend }}</div>
+	<div class="container">
+		<div class="rounded calc">
+			<IrdomSection title="Курс обучения">
+				<v-btn-toggle v-model="data.course" class="course" mandatory @update:model-value="updateCourseHandler">
+					<v-btn value="1" style="height: 48px">1</v-btn>
+					<v-btn value="2" style="height: 48px">2</v-btn>
+					<v-btn value="3" style="height: 48px">3</v-btn>
+					<v-btn value="4" style="height: 48px">4</v-btn>
+					<v-btn value="5" style="height: 48px">5</v-btn>
+					<v-btn value="6" style="height: 48px">6</v-btn>
+					<v-btn value="1М" style="height: 48px">1М</v-btn>
+					<v-btn value="2М" style="height: 48px">2М</v-btn>
+				</v-btn-toggle>
+			</IrdomSection>
+
+			<IrdomSection title="Оценки за последнюю сессию">
+				<v-btn-toggle v-model="data.marks" multiple divided :disabled="nomarks">
+					<v-btn :value="3">3</v-btn>
+					<v-btn :value="4">4</v-btn>
+					<v-btn :value="5">5</v-btn>
+				</v-btn-toggle>
+				<v-checkbox
+					v-if="isNomarksCouse"
+					v-model="nomarks"
+					label="Оценок нет"
+					hide-details="auto"
+					style="margin-bottom: -23px"
+					@update:model-value="nomarksHandler"
+				></v-checkbox>
+			</IrdomSection>
+
+			<IrdomSection v-if="!nomarks" title="Пересдачи за последнюю сессию">
+				<v-btn-toggle v-model="data.retake" mandatory divided>
+					<v-btn :value="true">Были</v-btn>
+					<v-btn :value="false">Не были</v-btn>
+				</v-btn-toggle>
+			</IrdomSection>
+
+			<IrdomSection v-if="gasCondition" title="ПГАС">
+				<v-btn-toggle v-model="data.pgas" mandatory divided>
+					<v-btn :value="true">Получаю</v-btn>
+					<v-btn :value="false">Не получаю</v-btn>
+				</v-btn-toggle>
+			</IrdomSection>
+
+			<IrdomSection title="ГСС">
+				<v-btn-toggle v-model="data.gss" mandatory divided>
+					<v-btn :value="true">Получаю</v-btn>
+					<v-btn :value="false">Не получаю</v-btn>
+				</v-btn-toggle>
+			</IrdomSection>
+
+			<IrdomSection title="Членство в Профсоюзе">
+				<v-btn-toggle v-model="data.member" mandatory divided>
+					<v-btn :value="true">Состою</v-btn>
+					<v-btn :value="false">Не состою</v-btn>
+				</v-btn-toggle>
+			</IrdomSection>
+		</div>
+		<div class="d-flex elevation-10" :class="{ show: allDef }">
+			<div class="your">
+				<span>ИТОГО: </span>
+				<IrdomTooltip text="">
+					Получение этой суммы не гарантировано.<br />
+					С вопросами обращайтесь в Профком.
+				</IrdomTooltip>
+			</div>
+			<div class="stipend">{{ allDef ? formattedStipend : '?' }}</div>
+		</div>
 	</div>
 </template>
 
 <style scoped>
 .stipend {
+	height: 54px;
+	display: flex;
+	align-items: center;
 	font-size: 30px;
 	background: rgb(0, 1, 76);
 	color: white;
 	border-radius: 999px;
-	padding: 4px 16px;
+	padding: 0 16px;
+	min-width: max(54px, fit-content);
+	justify-content: center;
 }
 
 .your {
-	font-size: 20px;
+	font-size: 18px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: flex;
+	align-items: center;
+	gap: 8px;
 }
 
 .d-flex {
+	height: 80px;
+	background: white;
+	position: absolute;
+	left: 16px;
+	bottom: 16px;
+	right: 16px;
+	z-index: 1;
 	align-items: center;
 	gap: 8px;
-	flex-wrap: wrap;
-	padding: 24px;
+	justify-content: space-between;
+	padding: 0 13px 0 43px;
+	border-radius: 43px;
+	white-space: nowrap;
+	transform: translateY(112px);
+	opacity: 0;
+	transition: all 300ms ease-in-out;
+}
+
+.show {
+	opacity: 1;
+	transform: translateY(0);
+}
+
+.calc {
+	overflow-y: auto;
+	height: 100%;
+	padding: 24px 24px 112px;
+}
+.container {
+	position: relative;
+	height: 100vh;
+	overflow: hidden;
+}
+
+.course {
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	background: rgb(0 0 0 / 12%);
+	gap: 1.2px;
+	height: auto !important;
+}
+
+.course > button {
+	border-radius: 0 !important;
 }
 </style>
diff --git a/src/vuetify.ts b/src/vuetify.ts
index c86d0cd..97c4100 100644
--- a/src/vuetify.ts
+++ b/src/vuetify.ts
@@ -11,10 +11,11 @@ export const vuetify = createVuetify({
 	},
 	defaults: {
 		VBtnToggle: {
-			color: 'rgb(255, 139, 0)',
+			color: 'rgb(0, 1, 76)',
+			elevation: 1,
 		},
 		VCheckbox: {
-			color: 'rgb(255, 139, 0)',
+			color: 'rgb(0, 1, 76)',
 		},
 	},
 });
