diff --git a/package-lock.json b/package-lock.json
index e45212f..1bedea6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "react-router-dom": "^6.4.5",
         "react-scripts": "5.0.1",
         "typescript": "^4.9.4",
+        "use-fit-text": "^2.4.0",
         "web-vitals": "^2.1.4"
       }
     },
@@ -14328,6 +14329,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -15876,6 +15882,17 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-fit-text": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/use-fit-text/-/use-fit-text-2.4.0.tgz",
+      "integrity": "sha512-Iy4LMrXcdxWlyZ5phntMpJMgyXGB1p3tV73y2r0QrZ6f/thPh+/QU3ie6RCXmjF8tHMs20FKMPskXeDYIla/Ww==",
+      "dependencies": {
+        "resize-observer-polyfill": "^1.5.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index 937b91f..ab80eed 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "react-router-dom": "^6.4.5",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.4",
+    "use-fit-text": "^2.4.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 3b195fa..67b5bc5 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,10 +1,13 @@
 import React, { useContext } from 'react'
 import './Header.css';
 import {Axios, UserCtx, UserCtxT} from '../context/UserContext';
+import { useNavigate } from 'react-router-dom';
 
 
 function Header() {
     const {setUser} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
+    const navigate = useNavigate();
+
     const logOut = () =>
     {
         Axios.post('logout.php')
@@ -15,6 +18,8 @@ function Header() {
         .catch((err) => console.error(err));
 
         setUser(null);
+        
+        navigate('/'); // login      
     }
     
     return (
diff --git a/src/components/Login.tsx b/src/components/Login.tsx
index 927b441..f07fa88 100644
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@@ -1,9 +1,10 @@
 import {useState,useContext} from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import {UserCtx, UserCtxT} from '../context/UserContext';
 import './Login.css'
 
-const Login = () => {
+const Login = () => 
+{
     const {loginUser, wait, getUser, user} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
     const [redirect, setRedirect] = useState("false");
     const [errMsg, setErrMsg] = useState("false");
@@ -11,6 +12,7 @@ const Login = () => {
         email:'',
         password:''
     });
+    const navigate = useNavigate();
 
     const onChangeInput = (e: React.FormEvent<HTMLInputElement>) => 
     {
@@ -23,7 +25,8 @@ const Login = () => {
         }
     }
 
-    const submitForm = async (e: React.FormEvent<HTMLFormElement>) => {
+    const submitForm = async (e: React.FormEvent<HTMLFormElement>) => 
+    {
         e.preventDefault();
 
         if(!Object.values(formData).every(val => val.trim() !== ''))
@@ -38,7 +41,7 @@ const Login = () => {
             setRedirect('Redirecting...');
             setErrMsg(data.message);
             await getUser();
-            e?.currentTarget?.reset();
+            navigate('/profil');
             return;
         }
         setErrMsg(data.message);
diff --git a/src/components/Qr.css b/src/components/Qr.css
index caa67ef..a5caab7 100644
--- a/src/components/Qr.css
+++ b/src/components/Qr.css
@@ -14,6 +14,7 @@ img
     background: #fff;
     width: 2.4cm;
 }
+
 .qrCodeBackFront
 {
     display: flex;
@@ -36,6 +37,7 @@ img
     background: #fff;
     width: 2.4cm;
 }
+
 .frame
 {
     border-style: solid;
diff --git a/src/components/Qr.tsx b/src/components/Qr.tsx
index d9413f7..9e8714c 100644
--- a/src/components/Qr.tsx
+++ b/src/components/Qr.tsx
@@ -9,6 +9,21 @@ export default function Qr()
 {
     const { user } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
     const [dog, setDog] = useState<DogT | any>({}); // local dog not the dog in UserContext
+    const [fontSize, setFontSize] = useState(100);
+    function incrementFontSize()  
+    {
+        if(fontSize < 200)
+        {
+            setFontSize(fontSize + 1);
+        }
+    }
+    function decrementFontSize() 
+    {
+        if(fontSize > 1)
+        {
+            setFontSize(fontSize - 1);
+        }
+    }
 
     if(user && dog.success === undefined)
     {
@@ -30,6 +45,15 @@ export default function Qr()
                 <h1>Qr-Code Druck</h1>
                 <Link to={"/profil"}>Zurück zum Profil</Link>
 
+                <div> 
+                <button onClick={incrementFontSize}>up</button>
+                <div>{fontSize}</div>
+                <button onClick={decrementFontSize}>down</button>
+                </div>
+
+
+
+
                 {/* <div>Logged in als:</div>
                 <div>{user?.email}</div>
                 <div>{user?.qr_id}</div>
@@ -41,7 +65,7 @@ export default function Qr()
                         <div className='qrCode__'>SCAN ME</div>
                         <Img pth={dog.data.qr_code}/>
                     </div>
-                    <div className='qrCodeVert frame'>
+                    <div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
                         <div className='vertFont'>{dog.data.name}</div>
                         <div className='vertFont'>{dog.data.phone}</div>
                         <div className='vertFont'>{dog.data.email}</div>
@@ -54,7 +78,7 @@ export default function Qr()
                         <div className='qrCode__'>SCAN ME</div>
                         <Img pth={dog.data.qr_code}/>
                     </div>
-                    <div className='qrCodeVert frame'>
+                    <div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
                         <div className='vertFont order2'>{dog.data.name}</div>
                         <div className='vertFont order3'>{dog.data.phone}</div>
                         <div className='vertFont order1'>{dog.data.email}</div>
@@ -65,7 +89,7 @@ export default function Qr()
                         <div className='qrCode__'>SCAN ME</div>
                         <Img pth={dog.data.qr_code}/>
                     </div>
-                    <div className='qrCodeVert frame'>
+                    <div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
                         <div className='vertFont'>{dog.data.name}</div>
                         <div className='vertFont'>{dog.data.phone}</div>
                         <div className='vertFont'>{dog.data.email}</div>
@@ -78,7 +102,7 @@ export default function Qr()
                         <div className='qrCode__'>SCAN ME</div>
                         <Img pth={dog.data.qr_code}/>
                     </div>
-                    <div className='qrCodeVert frame'>
+                    <div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
                         <div className='vertFont'>{dog.data.name}</div>
                         <div className='vertFont'>{dog.data.phone}</div>
                         <div className='vertFont'>{dog.data.email}</div>
@@ -89,7 +113,7 @@ export default function Qr()
                         <div className='qrCode__'>SCAN ME</div>
                         <Img pth={dog.data.qr_code}/>
                     </div>
-                    <div className='qrCodeVert frame'>
+                    <div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
                         <div className='vertFont'>{dog.data.name}</div>
                         <div className='vertFont'>{dog.data.phone}</div>
                         <div className='vertFont'>{dog.data.email}</div>
@@ -102,7 +126,7 @@ export default function Qr()
                         <div className='qrCode__'>SCAN ME</div>
                         <Img pth={dog.data.qr_code}/>
                     </div>
-                    <div className='qrCodeVert frame'>
+                    <div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
                         <div className='vertFont'>{dog.data.name}</div>
                         <div className='vertFont'>{dog.data.phone}</div>
                         <div className='vertFont'>{dog.data.email}</div>