diff --git a/src/components/AppBar/index.css b/src/components/AppBar/index.css
new file mode 100644
index 0000000..e0e8f31
--- /dev/null
+++ b/src/components/AppBar/index.css
@@ -0,0 +1,5 @@
+#appbar {
+  #title {
+    flex-grow: 1;
+  }
+}
\ No newline at end of file
diff --git a/src/components/AppBar/index.tsx b/src/components/AppBar/index.tsx
index cd10c18..34e3158 100644
--- a/src/components/AppBar/index.tsx
+++ b/src/components/AppBar/index.tsx
@@ -6,14 +6,7 @@ import Typography from "@mui/material/Typography";
 
 import Login from "../Login";
 
-
-const PREFIX = 'index';
-
-const classes = {
-  appBar: `${PREFIX}-appBar`,
-  title: `${PREFIX}-title`,
-  toolbarIcon: `${PREFIX}-toolbarIcon`
-};
+import './index.css';
 
 type AppBarProps = {
   setDrawerOpen: Function,
@@ -21,7 +14,7 @@ type AppBarProps = {
 
 export default function AppBar(props: AppBarProps) {
   return (
-    <MuiAppBar position="static" className={classes.appBar}>
+    <MuiAppBar id="appbar" position="static">
       <Toolbar>
         <IconButton
           edge="start"
@@ -35,11 +28,11 @@ export default function AppBar(props: AppBarProps) {
           <MenuIcon />
         </IconButton>
         <Typography
+          id="title"
           component="h1"
           variant="h6"
           color="inherit"
           noWrap
-          className={classes.title}
         >
           <a
             href="/"