diff --git a/api/src/models/standards-view.ts b/api/src/models/standards-view.ts
new file mode 100644
index 0000000000..b611855b15
--- /dev/null
+++ b/api/src/models/standards-view.ts
@@ -0,0 +1,53 @@
+import { z } from 'zod';
+import {
+  CBQualitativeMeasurementTypeDefinition,
+  CBQuantitativeMeasurementTypeDefinition
+} from '../services/critterbase-service';
+
+const QualitativeMeasurementSchema = z.object({
+  name: z.string(),
+  description: z.string().nullable(),
+  options: z.array(
+    z.object({
+      name: z.string(),
+      description: z.string().nullable()
+    })
+  )
+});
+
+const QuantitativeMeasurementSchema = z.object({
+  name: z.string(),
+  description: z.string().nullable(),
+  unit: z.string().nullable()
+});
+
+const MethodAttributesSchema = z.object({
+  qualitative: z.array(QualitativeMeasurementSchema),
+  quantitative: z.array(QuantitativeMeasurementSchema)
+});
+
+export const EnvironmentStandardsSchema = z.object({
+  qualitative: z.array(QualitativeMeasurementSchema),
+  quantitative: z.array(QuantitativeMeasurementSchema)
+});
+
+export type EnvironmentStandards = z.infer<typeof EnvironmentStandardsSchema>;
+
+export const MethodStandardSchema = z.object({
+  method_lookup_id: z.number(),
+  name: z.string(),
+  description: z.string().nullable(),
+  attributes: MethodAttributesSchema
+});
+
+export type MethodStandard = z.infer<typeof MethodStandardSchema>;
+
+export interface ISpeciesStandards {
+  tsn: number;
+  scientificName: string;
+  measurements: {
+    quantitative: CBQuantitativeMeasurementTypeDefinition[];
+    qualitative: CBQualitativeMeasurementTypeDefinition[];
+  };
+  markingBodyLocations: { id: string; key: string; value: string }[];
+}
diff --git a/api/src/openapi/schemas/standards.ts b/api/src/openapi/schemas/standards.ts
new file mode 100644
index 0000000000..6457fcdba7
--- /dev/null
+++ b/api/src/openapi/schemas/standards.ts
@@ -0,0 +1,137 @@
+import { OpenAPIV3 } from 'openapi-types';
+
+export const EnvironmentStandardsSchema: OpenAPIV3.SchemaObject = {
+  type: 'object',
+  description:
+    'Environment standards response object showing supported environmental variables and associated information',
+  additionalProperties: false,
+  properties: {
+    qualitative: {
+      type: 'array',
+      description: 'Array of qualitative environmental variables',
+      items: {
+        type: 'object',
+        properties: {
+          name: {
+            type: 'string',
+            description: 'Name of the environmental variable'
+          },
+          description: {
+            type: 'string',
+            description: 'Description of the environmental variable',
+            nullable: true
+          },
+          options: {
+            type: 'array',
+            description: 'Array of options for the qualitative variable',
+            items: {
+              type: 'object',
+              properties: {
+                name: {
+                  type: 'string',
+                  description: 'Description of the environmental variable option'
+                },
+                description: {
+                  type: 'string',
+                  description: 'Description of the environmental variable option',
+                  nullable: true
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    quantitative: {
+      type: 'array',
+      description: 'Array of quantitative environmental variables',
+      items: {
+        type: 'object',
+        properties: {
+          name: {
+            type: 'string',
+            description: 'Name of the quantitative environmental variable'
+          },
+          description: {
+            type: 'string',
+            description: 'Description of the quantitative environmental variable',
+            nullable: true
+          },
+          unit: {
+            type: 'string',
+            description: 'Unit of measurement of the quantitative environmental variable',
+            nullable: true
+          }
+        }
+      }
+    }
+  }
+};
+
+export const MethodStandardSchema: OpenAPIV3.SchemaObject = {
+  type: 'array',
+  items: {
+    type: 'object',
+    additionalProperties: false,
+    properties: {
+      method_lookup_id: { type: 'number' },
+      name: { type: 'string' },
+      description: { type: 'string', nullable: true },
+      attributes: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+          qualitative: {
+            type: 'array',
+            items: {
+              type: 'object',
+              additionalProperties: false,
+              properties: {
+                name: {
+                  type: 'string'
+                },
+                description: {
+                  type: 'string',
+                  nullable: true
+                },
+                options: {
+                  type: 'array',
+                  items: {
+                    type: 'object',
+                    additionalProperties: false,
+                    properties: {
+                      name: {
+                        type: 'string'
+                      },
+                      description: {
+                        type: 'string',
+                        nullable: true
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          },
+          quantitative: {
+            type: 'array',
+            items: {
+              type: 'object',
+              additionalProperties: false,
+              properties: {
+                name: {
+                  type: 'string'
+                },
+                description: {
+                  type: 'string',
+                  nullable: true
+                },
+                unit: { type: 'string', nullable: true }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+};
diff --git a/api/src/paths/standards/environment/index.test.ts b/api/src/paths/standards/environment/index.test.ts
new file mode 100644
index 0000000000..2c7a3c0568
--- /dev/null
+++ b/api/src/paths/standards/environment/index.test.ts
@@ -0,0 +1,89 @@
+import chai, { expect } from 'chai';
+import { afterEach, describe, it } from 'mocha';
+import sinon from 'sinon';
+import sinonChai from 'sinon-chai';
+import * as db from '../../../database/db';
+import { HTTPError } from '../../../errors/http-error';
+import { StandardsService } from '../../../services/standards-service';
+import { getMockDBConnection, getRequestHandlerMocks } from '../../../__mocks__/db';
+import { getEnvironmentStandards } from './index'; // Adjust the import path based on your file structure
+
+chai.use(sinonChai);
+
+describe('standards/environment', () => {
+  describe('getEnvironmentStandards', () => {
+    afterEach(() => {
+      sinon.restore();
+    });
+
+    it('should retrieve environment standards successfully', async () => {
+      const mockResponse = {
+        quantitative: [
+          { name: 'Quantitative Standard 1', description: 'Description 1', unit: 'Unit' },
+          { name: 'Quantitative Standard 2', description: 'Description 2', unit: 'Unit' }
+        ],
+        qualitative: [
+          {
+            name: 'Qualitative Standard 1',
+            description: 'Description 1',
+            options: [
+              { name: 'Option 1', description: 'Option 1 Description' },
+              { name: 'Option 2', description: 'Option 2 Description' }
+            ]
+          },
+          {
+            name: 'Qualitative Standard 2',
+            description: 'Description 2',
+            options: [
+              { name: 'Option 3', description: 'Option 3 Description' },
+              { name: 'Option 4', description: 'Option 4 Description' }
+            ]
+          }
+        ]
+      };
+
+      const mockDBConnection = getMockDBConnection();
+
+      sinon.stub(db, 'getAPIUserDBConnection').returns(mockDBConnection);
+
+      sinon.stub(StandardsService.prototype, 'getEnvironmentStandards').resolves(mockResponse);
+
+      const { mockReq, mockRes, mockNext } = getRequestHandlerMocks();
+
+      const requestHandler = getEnvironmentStandards();
+
+      await requestHandler(mockReq, mockRes, mockNext);
+
+      expect(mockRes.status).to.have.been.calledWith(200);
+      expect(mockRes.json).to.have.been.calledWith(mockResponse);
+    });
+
+    it('catches and re-throws error', async () => {
+      const mockDBConnection = getMockDBConnection({
+        open: sinon.stub(),
+        commit: sinon.stub(),
+        rollback: sinon.stub(),
+        release: sinon.stub()
+      });
+
+      sinon.stub(db, 'getAPIUserDBConnection').returns(mockDBConnection);
+
+      sinon
+        .stub(StandardsService.prototype, 'getEnvironmentStandards')
+        .rejects(new Error('Failed to retrieve environment standards'));
+
+      const { mockReq, mockRes, mockNext } = getRequestHandlerMocks();
+
+      try {
+        const requestHandler = getEnvironmentStandards();
+        await requestHandler(mockReq, mockRes, mockNext);
+        expect.fail();
+      } catch (actualError) {
+        expect(mockDBConnection.open).to.have.been.calledOnce;
+        expect(mockDBConnection.rollback).to.have.been.calledOnce;
+        expect(mockDBConnection.release).to.have.been.calledOnce;
+        expect((actualError as HTTPError).message).to.equal('Failed to retrieve environment standards');
+      }
+    });
+  });
+});
diff --git a/api/src/paths/standards/environment/index.ts b/api/src/paths/standards/environment/index.ts
new file mode 100644
index 0000000000..42e2e24176
--- /dev/null
+++ b/api/src/paths/standards/environment/index.ts
@@ -0,0 +1,83 @@
+import { RequestHandler } from 'express';
+import { Operation } from 'express-openapi';
+import { getAPIUserDBConnection } from '../../../database/db';
+import { EnvironmentStandardsSchema } from '../../../openapi/schemas/standards';
+import { StandardsService } from '../../../services/standards-service';
+import { getLogger } from '../../../utils/logger';
+
+const defaultLog = getLogger('paths/projects');
+
+export const GET: Operation = [getEnvironmentStandards()];
+
+GET.apiDoc = {
+  description: 'Gets lookup values for environment variables',
+  tags: ['standards'],
+  parameters: [
+    {
+      in: 'query',
+      name: 'keyword',
+      required: false,
+      schema: {
+        type: 'string',
+        nullable: true
+      }
+    }
+  ],
+  security: [],
+  responses: {
+    200: {
+      description: 'Environment data standards response object.',
+      content: {
+        'application/json': {
+          schema: EnvironmentStandardsSchema
+        }
+      }
+    },
+    400: {
+      $ref: '#/components/responses/400'
+    },
+    401: {
+      $ref: '#/components/responses/401'
+    },
+    403: {
+      $ref: '#/components/responses/403'
+    },
+    500: {
+      $ref: '#/components/responses/500'
+    },
+    default: {
+      $ref: '#/components/responses/default'
+    }
+  }
+};
+
+/**
+ * Get species data standards
+ *
+ * @returns {RequestHandler}
+ */
+export function getEnvironmentStandards(): RequestHandler {
+  return async (req, res) => {
+    const connection = getAPIUserDBConnection();
+
+    try {
+      await connection.open();
+
+      const standardsService = new StandardsService(connection);
+
+      const keyword = (req.query.keyword as string) ?? '';
+
+      const response = await standardsService.getEnvironmentStandards(keyword);
+
+      await connection.commit();
+
+      return res.status(200).json(response);
+    } catch (error) {
+      defaultLog.error({ label: 'getEnvironmentStandards', message: 'error', error });
+      connection.rollback();
+      throw error;
+    } finally {
+      connection.release();
+    }
+  };
+}
diff --git a/api/src/paths/standards/methods/index.test.ts b/api/src/paths/standards/methods/index.test.ts
new file mode 100644
index 0000000000..3a5814a930
--- /dev/null
+++ b/api/src/paths/standards/methods/index.test.ts
@@ -0,0 +1,96 @@
+import chai, { expect } from 'chai';
+import { afterEach, describe, it } from 'mocha';
+import sinon from 'sinon';
+import sinonChai from 'sinon-chai';
+import { getMethodStandards } from '.';
+import * as db from '../../../database/db';
+import { HTTPError } from '../../../errors/http-error';
+import { StandardsService } from '../../../services/standards-service';
+import { getMockDBConnection, getRequestHandlerMocks } from '../../../__mocks__/db';
+
+chai.use(sinonChai);
+
+describe('standards/environment', () => {
+  describe('getMethodStandards', () => {
+    afterEach(() => {
+      sinon.restore();
+    });
+
+    it('should retrieve environment standards successfully', async () => {
+      const mockResponse = [
+        {
+          method_lookup_id: 1,
+          name: 'Name',
+          description: 'Description',
+          attributes: {
+            quantitative: [
+              { name: 'Quantitative Standard 1', description: 'Description 1', unit: 'Unit' },
+              { name: 'Quantitative Standard 2', description: 'Description 2', unit: 'Unit' }
+            ],
+            qualitative: [
+              {
+                name: 'Qualitative Standard 1',
+                description: 'Description 1',
+                options: [
+                  { name: 'Option 1', description: 'Option 1 Description' },
+                  { name: 'Option 2', description: 'Option 2 Description' }
+                ]
+              },
+              {
+                name: 'Qualitative Standard 2',
+                description: 'Description 2',
+                options: [
+                  { name: 'Option 3', description: 'Option 3 Description' },
+                  { name: 'Option 4', description: 'Option 4 Description' }
+                ]
+              }
+            ]
+          }
+        }
+      ];
+
+      const mockDBConnection = getMockDBConnection();
+
+      sinon.stub(db, 'getAPIUserDBConnection').returns(mockDBConnection);
+
+      sinon.stub(StandardsService.prototype, 'getMethodStandards').resolves(mockResponse);
+
+      const { mockReq, mockRes, mockNext } = getRequestHandlerMocks();
+
+      const requestHandler = getMethodStandards();
+
+      await requestHandler(mockReq, mockRes, mockNext);
+
+      expect(mockRes.status).to.have.been.calledWith(200);
+      expect(mockRes.json).to.have.been.calledWith(mockResponse);
+    });
+
+    it('catches and re-throws error', async () => {
+      const mockDBConnection = getMockDBConnection({
+        open: sinon.stub(),
+        commit: sinon.stub(),
+        rollback: sinon.stub(),
+        release: sinon.stub()
+      });
+
+      sinon.stub(db, 'getAPIUserDBConnection').returns(mockDBConnection);
+
+      sinon
+        .stub(StandardsService.prototype, 'getMethodStandards')
+        .rejects(new Error('Failed to retrieve environment standards'));
+
+      const { mockReq, mockRes, mockNext } = getRequestHandlerMocks();
+
+      try {
+        const requestHandler = getMethodStandards();
+        await requestHandler(mockReq, mockRes, mockNext);
+        expect.fail();
+      } catch (actualError) {
+        expect(mockDBConnection.open).to.have.been.calledOnce;
+        expect(mockDBConnection.rollback).to.have.been.calledOnce;
+        expect(mockDBConnection.release).to.have.been.calledOnce;
+        expect((actualError as HTTPError).message).to.equal('Failed to retrieve environment standards');
+      }
+    });
+  });
+});
diff --git a/api/src/paths/standards/methods/index.ts b/api/src/paths/standards/methods/index.ts
new file mode 100644
index 0000000000..f95e4d6bca
--- /dev/null
+++ b/api/src/paths/standards/methods/index.ts
@@ -0,0 +1,83 @@
+import { RequestHandler } from 'express';
+import { Operation } from 'express-openapi';
+import { getAPIUserDBConnection } from '../../../database/db';
+import { MethodStandardSchema } from '../../../openapi/schemas/standards';
+import { StandardsService } from '../../../services/standards-service';
+import { getLogger } from '../../../utils/logger';
+
+const defaultLog = getLogger('paths/standards/methods');
+
+export const GET: Operation = [getMethodStandards()];
+
+GET.apiDoc = {
+  description: 'Gets lookup values for method variables',
+  tags: ['standards'],
+  parameters: [
+    {
+      in: 'query',
+      name: 'keyword',
+      required: false,
+      schema: {
+        type: 'string',
+        nullable: true
+      }
+    }
+  ],
+  security: [],
+  responses: {
+    200: {
+      description: 'Method data standards response object.',
+      content: {
+        'application/json': {
+          schema: MethodStandardSchema
+        }
+      }
+    },
+    400: {
+      $ref: '#/components/responses/400'
+    },
+    401: {
+      $ref: '#/components/responses/401'
+    },
+    403: {
+      $ref: '#/components/responses/403'
+    },
+    500: {
+      $ref: '#/components/responses/500'
+    },
+    default: {
+      $ref: '#/components/responses/default'
+    }
+  }
+};
+
+/**
+ * Get species data standards
+ *
+ * @returns {RequestHandler}
+ */
+export function getMethodStandards(): RequestHandler {
+  return async (req, res) => {
+    const connection = getAPIUserDBConnection();
+
+    try {
+      await connection.open();
+
+      const standardsService = new StandardsService(connection);
+
+      const keyword = (req.query.keyword as string) ?? '';
+
+      const response = await standardsService.getMethodStandards(keyword);
+
+      await connection.commit();
+
+      return res.status(200).json(response);
+    } catch (error) {
+      defaultLog.error({ label: 'getMethodStandards', message: 'error', error });
+      connection.rollback();
+      throw error;
+    } finally {
+      connection.release();
+    }
+  };
+}
diff --git a/api/src/paths/standards/taxon/{tsn}/index.ts b/api/src/paths/standards/taxon/{tsn}/index.ts
index a46bb597a1..483233ae06 100644
--- a/api/src/paths/standards/taxon/{tsn}/index.ts
+++ b/api/src/paths/standards/taxon/{tsn}/index.ts
@@ -1,26 +1,12 @@
 import { RequestHandler } from 'express';
 import { Operation } from 'express-openapi';
-import { SYSTEM_ROLE } from '../../../../constants/roles';
 import { getDBConnection } from '../../../../database/db';
-import { authorizeRequestHandler } from '../../../../request-handlers/security/authorization';
 import { StandardsService } from '../../../../services/standards-service';
 import { getLogger } from '../../../../utils/logger';
 
 const defaultLog = getLogger('paths/projects');
 
-export const GET: Operation = [
-  authorizeRequestHandler(() => {
-    return {
-      and: [
-        {
-          validSystemRoles: [SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR],
-          discriminator: 'SystemRole'
-        }
-      ]
-    };
-  }),
-  getSpeciesStandards()
-];
+export const GET: Operation = [getSpeciesStandards()];
 
 GET.apiDoc = {
   description: 'Gets lookup values for a tsn to describe what information can be uploaded for a given species.',
@@ -35,7 +21,7 @@ GET.apiDoc = {
       required: true
     }
   ],
-  security: [{ Bearer: [] }],
+  security: [],
   responses: {
     200: {
       description: 'Species data standards response object.',
@@ -199,7 +185,8 @@ GET.apiDoc = {
  */
 export function getSpeciesStandards(): RequestHandler {
   return async (req, res) => {
-    // TODO: const connection = getAPIUserDBConnection();
+    // API user DB connection does not work, possible because user does not exist in Critterbase?
+    // const connection = getAPIUserDBConnection();
     const connection = getDBConnection(req.keycloak_token);
 
     try {
@@ -216,6 +203,7 @@ export function getSpeciesStandards(): RequestHandler {
       return res.status(200).json(getSpeciesStandardsResponse);
     } catch (error) {
       defaultLog.error({ label: 'getSpeciesStandards', message: 'error', error });
+      connection.rollback();
       throw error;
     } finally {
       connection.release();
diff --git a/api/src/repositories/standards-repository.test.ts b/api/src/repositories/standards-repository.test.ts
new file mode 100644
index 0000000000..c37c5a0b91
--- /dev/null
+++ b/api/src/repositories/standards-repository.test.ts
@@ -0,0 +1,110 @@
+import chai, { expect } from 'chai';
+import { afterEach, describe, it } from 'mocha';
+import { QueryResult } from 'pg';
+import sinon from 'sinon';
+import sinonChai from 'sinon-chai';
+import { getMockDBConnection } from '../__mocks__/db';
+import { StandardsRepository } from './standards-repository';
+
+chai.use(sinonChai);
+
+describe('StandardsRepository', () => {
+  afterEach(() => {
+    sinon.restore();
+  });
+
+  describe('getEnvironmentStandards', () => {
+    it('should successfully retrieve environment standards', async () => {
+      const mockData = {
+        quantitative: [
+          { name: 'Quantitative Standard 1', description: 'Description 1' },
+          { name: 'Quantitative Standard 2', description: 'Description 2' }
+        ],
+        qualitative: [
+          {
+            name: 'Qualitative Standard 1',
+            description: 'Description 1',
+            options: [
+              { name: 'Option 1', description: 'Option 1 Description' },
+              { name: 'Option 2', description: 'Option 2 Description' }
+            ]
+          },
+          {
+            name: 'Qualitative Standard 2',
+            description: 'Description 2',
+            options: [
+              { name: 'Option 3', description: 'Option 3 Description' },
+              { name: 'Option 4', description: 'Option 4 Description' }
+            ]
+          }
+        ]
+      };
+
+      const mockResponse = {
+        rows: [mockData],
+        rowCount: 1
+      } as any as Promise<QueryResult<any>>;
+
+      const dbConnection = getMockDBConnection({
+        sql: () => mockResponse
+      });
+
+      const repository = new StandardsRepository(dbConnection);
+
+      const result = await repository.getEnvironmentStandards();
+
+      expect(result).to.deep.equal(mockData);
+    });
+  });
+
+  describe('getMethodStandards', () => {
+    it('should successfully retrieve method standards', async () => {
+      const mockData = [
+        {
+          method_lookup_id: 1,
+          name: 'Method 1',
+          description: ' Description 1',
+          attributes: {
+            quantitative: [
+              { name: 'Method Standard 1', description: 'Description 1', unit: 'Unit 1' },
+              { name: 'Method Standard 2', description: 'Description 2', unit: 'Unit 2' }
+            ],
+            qualitative: [
+              {
+                name: 'Qualitative 1',
+                description: 'Description 1',
+                options: [
+                  { name: 'Option 1', description: 'Option 1 Description' },
+                  { name: 'Option 2', description: 'Option 2 Description' }
+                ]
+              },
+              {
+                name: 'Qualitative 2',
+                description: 'Description 2',
+                options: [
+                  { name: 'Option 3', description: 'Option 3 Description' },
+                  { name: 'Option 4', description: 'Option 4 Description' }
+                ]
+              }
+            ]
+          }
+        }
+      ];
+
+      const mockResponse = {
+        rows: mockData,
+        rowCount: 1
+      } as any as Promise<QueryResult<any>>;
+
+      const dbConnection = getMockDBConnection({
+        sql: () => mockResponse
+      });
+
+      const repository = new StandardsRepository(dbConnection);
+
+      const result = await repository.getMethodStandards();
+
+      expect(result).to.deep.equal(mockData);
+    });
+  });
+});
diff --git a/api/src/repositories/standards-repository.ts b/api/src/repositories/standards-repository.ts
new file mode 100644
index 0000000000..6e7893df94
--- /dev/null
+++ b/api/src/repositories/standards-repository.ts
@@ -0,0 +1,145 @@
+import SQL from 'sql-template-strings';
+import {
+  EnvironmentStandards,
+  EnvironmentStandardsSchema,
+  MethodStandard,
+  MethodStandardSchema
+} from '../models/standards-view';
+import { BaseRepository } from './base-repository';
+
+/**
+ * Standards repository
+ *
+ * @export
+ * @class standardsRepository
+ * @extends {BaseRepository}
+ */
+export class StandardsRepository extends BaseRepository {
+  /**
+   * Gets environment standards
+   *
+   * @param {string} keyword - search term for filtering the response based on environmental variable name
+   * @return {*}
+   * @memberof StandardsRepository
+   */
+  async getEnvironmentStandards(keyword?: string): Promise<EnvironmentStandards> {
+    const sql = SQL`
+      WITH 
+        quan AS (
+          SELECT 
+            eq.name AS quant_name,
+            eq.description AS quant_description,
+            eq.unit
+          FROM 
+            environment_quantitative eq
+          WHERE 
+            eq.name ILIKE '%' || ${keyword ?? ''} || '%'
+        ),
+        qual AS (
+          SELECT
+            eq.name AS qual_name,
+            eq.description AS qual_description,
+            json_agg(json_build_object('name', eqo.name, 'description', eqo.description)) as options
+          FROM  
+            environment_qualitative_option eqo
+          LEFT JOIN
+            environment_qualitative eq ON eqo.environment_qualitative_id = eq.environment_qualitative_id
+          WHERE 
+            eq.name ILIKE '%' || ${keyword ?? ''} || '%'
+          GROUP BY
+            eq.name, 
+            eq.description
+        )
+      SELECT 
+        (SELECT json_agg(json_build_object('name', quant_name, 'description', quant_description, 'unit', unit)) FROM quan) as quantitative,
+        (SELECT json_agg(json_build_object('name', qual_name, 'description', qual_description, 'options', options)) FROM qual) as qualitative;
+    `;
+
+    const response = await this.connection.sql(sql, EnvironmentStandardsSchema);
+
+    return response.rows[0];
+  }
+
+  /**
+   * Gets method standards
+   *
+   * @param {string} keyword - search term for filtering the response based on method lookup name
+   * @return {*}
+   * @memberof StandardsRepository
+   */
+  async getMethodStandards(keyword?: string): Promise<MethodStandard[]> {
+    const sql = SQL`
+    WITH 
+      quan AS (
+        SELECT 
+          mlaq.method_lookup_id,
+          tq.name AS quant_name,
+          tq.description AS quant_description,
+          mlaq.unit
+        FROM
+          method_lookup_attribute_quantitative mlaq
+        LEFT JOIN
+          technique_attribute_quantitative tq ON mlaq.technique_attribute_quantitative_id = tq.technique_attribute_quantitative_id
+      ),
+      qual AS (
+        SELECT
+          mlaq.method_lookup_id,
+          taq.name AS qual_name,
+          taq.description AS qual_description,
+          COALESCE(json_agg(
+            json_build_object(
+              'name', mlaqo.name,
+              'description', mlaqo.description
+            ) ORDER BY mlaqo.name
+          ), '[]'::json) AS options
+        FROM  
+          method_lookup_attribute_qualitative_option mlaqo
+        LEFT JOIN
+          method_lookup_attribute_qualitative mlaq ON mlaqo.method_lookup_attribute_qualitative_id = mlaq.method_lookup_attribute_qualitative_id
+        LEFT JOIN
+          technique_attribute_qualitative taq ON mlaq.technique_attribute_qualitative_id = taq.technique_attribute_qualitative_id
+        GROUP BY
+          mlaq.method_lookup_id,
+          taq.name, 
+          taq.description
+      ),
+      method_lookup AS (
+        SELECT 
+          ml.method_lookup_id,
+          ml.name,
+          ml.description,
+          json_build_object(
+            'quantitative', (
+              SELECT COALESCE(json_agg(
+                json_build_object(
+                  'name', quan.quant_name,
+                  'description', quan.quant_description,
+                  'unit', quan.unit
+                ) ORDER BY quan.quant_name
+              ), '[]'::json) FROM quan
+              WHERE quan.method_lookup_id = ml.method_lookup_id
+            ),
+            'qualitative', (
+              SELECT COALESCE(json_agg(
+                json_build_object(
+                  'name', qual.qual_name,
+                  'description', qual.qual_description,
+                  'options', qual.options
+                ) ORDER BY qual.qual_name
+              ), '[]'::json) FROM qual
+              WHERE qual.method_lookup_id = ml.method_lookup_id
+            )
+          ) AS attributes
+        FROM 
+          method_lookup ml
+        WHERE 
+          ml.name ILIKE '%' || ${keyword ?? ''} || '%'
+      )
+    SELECT * FROM method_lookup;
+  `;
+
+    const response = await this.connection.sql(sql, MethodStandardSchema);
+
+    return response.rows;
+  }
+}
diff --git a/api/src/services/standards-service.test.ts b/api/src/services/standards-service.test.ts
index 7bf7f5e487..60a6d4dae1 100644
--- a/api/src/services/standards-service.test.ts
+++ b/api/src/services/standards-service.test.ts
@@ -68,4 +68,73 @@ describe('StandardsService', () => {
       expect(response.measurements.qualitative[0].measurement_desc).to.eql('description');
     });
   });
+
+  describe('getEnvironmentStandards', async () => {
+    const mockData = {
+      qualitative: [{ name: 'name', description: 'name', options: [{ name: 'name', description: 'description' }] }],
+      quantitative: [
+        { name: 'name', description: 'description', unit: 'unit' },
+        { name: 'name', description: 'description', unit: 'unit' }
+      ]
+    };
+    const mockDbConnection = getMockDBConnection();
+
+    const standardsService = new StandardsService(mockDbConnection);
+
+    const getEnvironmentStandardsStub = sinon
+      .stub(standardsService.standardsRepository, 'getEnvironmentStandards')
+      .resolves(mockData);
+
+    const response = await standardsService.getEnvironmentStandards();
+
+    expect(getEnvironmentStandardsStub).to.be.calledOnce;
+    expect(response).to.eql(mockData);
+  });
+
+  describe('getMethodStandards', async () => {
+    const mockData = [
+      {
+        method_lookup_id: 1,
+        name: 'Method 1',
+        description: ' Description 1',
+        attributes: {
+          quantitative: [
+            { name: 'Method Standard 1', description: 'Description 1', unit: 'Unit 1' },
+            { name: 'Method Standard 2', description: 'Description 2', unit: 'Unit 2' }
+          ],
+          qualitative: [
+            {
+              name: 'Qualitative 1',
+              description: 'Description 1',
+              options: [
+                { name: 'Option 1', description: 'Option 1 Description' },
+                { name: 'Option 2', description: 'Option 2 Description' }
+              ]
+            },
+            {
+              name: 'Qualitative 2',
+              description: 'Description 2',
+              options: [
+                { name: 'Option 3', description: 'Option 3 Description' },
+                { name: 'Option 4', description: 'Option 4 Description' }
+              ]
+            }
+          ]
+        }
+      }
+    ];
+
+    const mockDbConnection = getMockDBConnection();
+
+    const standardsService = new StandardsService(mockDbConnection);
+
+    const getMethodStandardsStub = sinon
+      .stub(standardsService.standardsRepository, 'getMethodStandards')
+      .resolves(mockData);
+
+    const response = await standardsService.getMethodStandards();
+
+    expect(getMethodStandardsStub).to.be.calledOnce;
+    expect(response).to.eql(mockData);
+  });
 });
diff --git a/api/src/services/standards-service.ts b/api/src/services/standards-service.ts
index 76bea02f87..eed1217efb 100644
--- a/api/src/services/standards-service.ts
+++ b/api/src/services/standards-service.ts
@@ -1,32 +1,21 @@
 import { IDBConnection } from '../database/db';
-import {
-  CBQualitativeMeasurementTypeDefinition,
-  CBQuantitativeMeasurementTypeDefinition,
-  CritterbaseService
-} from './critterbase-service';
+import { EnvironmentStandards, ISpeciesStandards, MethodStandard } from '../models/standards-view';
+import { StandardsRepository } from '../repositories/standards-repository';
+import { CritterbaseService } from './critterbase-service';
 import { DBService } from './db-service';
 import { PlatformService } from './platform-service';
 
-export interface ISpeciesStandardsResponse {
-  tsn: number;
-  scientificName: string;
-  measurements: {
-    quantitative: CBQuantitativeMeasurementTypeDefinition[];
-    qualitative: CBQualitativeMeasurementTypeDefinition[];
-  };
-  markingBodyLocations: { id: string; key: string; value: string }[];
-}
-
 /**
- * Sample Stratum Repository
+ * Standards Repository
  *
  * @export
- * @class SampleStratumService
+ * @class StandardsService
  * @extends {DBService}
  */
 export class StandardsService extends DBService {
   platformService: PlatformService;
   critterbaseService: CritterbaseService;
+  standardsRepository: StandardsRepository;
 
   constructor(connection: IDBConnection) {
     super(connection);
@@ -35,16 +24,17 @@ export class StandardsService extends DBService {
       keycloak_guid: this.connection.systemUserGUID(),
       username: this.connection.systemUserIdentifier()
     });
+    this.standardsRepository = new StandardsRepository(connection);
   }
 
   /**
-   * Gets all survey Sample Stratums.
+   * Gets species standards
    *
-   * @param {number} surveySampleSiteId
-   * @return {*}  {Promise<standardsRecord[]>}
+   * @param {number} tsn
+   * @return {ISpeciesStandards}
    * @memberof standardsService
    */
-  async getSpeciesStandards(tsn: number): Promise<ISpeciesStandardsResponse> {
+  async getSpeciesStandards(tsn: number): Promise<ISpeciesStandards> {
     // Fetch all measurement type definitions from Critterbase for the unique taxon_measurement_ids
     const response = await Promise.all([
       this.platformService.getTaxonomyByTsns([tsn]),
@@ -59,4 +49,29 @@ export class StandardsService extends DBService {
       measurements: response[2]
     };
   }
+
+  /**
+   * Gets environment standards
+   *
+   * @param {string} keyword - search term for filtering the response based on environemntal variable name
+   * @return {EnvironmentStandard[]}
+   * @memberof standardsService
+   */
+  async getEnvironmentStandards(keyword?: string): Promise<EnvironmentStandards> {
+    const response = await this.standardsRepository.getEnvironmentStandards(keyword);
+
+    return response;
+  }
+
+  /**
+   * Gets standards for method lookups
+   *
+   * @param {string} keyword - search term for filtering the response based on method lookup name
+   * @return {MethodStandards}
+   * @memberof standardsService
+   */
+  async getMethodStandards(keyword?: string): Promise<MethodStandard[]> {
+    const response = await this.standardsRepository.getMethodStandards(keyword);
+    return response;
+  }
 }
diff --git a/app/src/AppRouter.tsx b/app/src/AppRouter.tsx
index 4728f20175..80bbebf558 100644
--- a/app/src/AppRouter.tsx
+++ b/app/src/AppRouter.tsx
@@ -6,7 +6,7 @@ import AdminUsersRouter from 'features/admin/AdminUsersRouter';
 import FundingSourcesRouter from 'features/funding-sources/FundingSourcesRouter';
 import ProjectsRouter from 'features/projects/ProjectsRouter';
 import ResourcesPage from 'features/resources/ResourcesPage';
-import SpeciesStandardsPage from 'features/standards/SpeciesStandardsPage';
+import StandardsPage from 'features/standards/StandardsPage';
 import SummaryRouter from 'features/summary/SummaryRouter';
 import BaseLayout from 'layouts/BaseLayout';
 import AccessDenied from 'pages/403/AccessDenied';
@@ -112,7 +112,7 @@ const AppRouter: React.FC = () => {
 
       <RouteWithTitle path="/standards" title={getTitle('Standards')}>
         <BaseLayout>
-          <SpeciesStandardsPage />
+          <StandardsPage />
         </BaseLayout>
       </RouteWithTitle>
 
diff --git a/app/src/components/layout/Header.tsx b/app/src/components/layout/Header.tsx
index 3366c386fa..0e52a07142 100644
--- a/app/src/components/layout/Header.tsx
+++ b/app/src/components/layout/Header.tsx
@@ -277,11 +277,9 @@ const Header: React.FC = () => {
                     Funding Sources
                   </MenuItem>
                 </SystemRoleGuard>
-                <SystemRoleGuard validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
-                  <MenuItem component={RouterLink} to="/standards" id="menu_standards" onClick={hideMobileMenu}>
-                    Standards
-                  </MenuItem>
-                </SystemRoleGuard>
+                <MenuItem component={RouterLink} to="/standards" id="menu_standards" onClick={hideMobileMenu}>
+                  Standards
+                </MenuItem>
                 <MenuItem component="button" onClick={showSupportDialog} sx={{ width: '100%' }}>
                   Support
                 </MenuItem>
@@ -354,11 +352,9 @@ const Header: React.FC = () => {
                     Funding Sources
                   </RouterLink>
                 </SystemRoleGuard>
-                <SystemRoleGuard validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
-                  <RouterLink to="/standards" id="menu_standards">
-                    Standards
-                  </RouterLink>
-                </SystemRoleGuard>
+                <RouterLink to="/standards" id="menu_standards">
+                  Standards
+                </RouterLink>
                 <Button
                   color="inherit"
                   variant="text"
diff --git a/app/src/components/loading/SkeletonLoaders.tsx b/app/src/components/loading/SkeletonLoaders.tsx
index 366ee941f5..830e8ea62b 100644
--- a/app/src/components/loading/SkeletonLoaders.tsx
+++ b/app/src/components/loading/SkeletonLoaders.tsx
@@ -127,4 +127,4 @@ const SkeletonMap = () => (
   </Box>
 );
 
-export { SkeletonList, SkeletonListStack, SkeletonRow, SkeletonTable, SkeletonMap, SkeletonHorizontalStack };
+export { SkeletonHorizontalStack, SkeletonList, SkeletonListStack, SkeletonMap, SkeletonRow, SkeletonTable };
diff --git a/app/src/features/standards/SpeciesStandardsPage.tsx b/app/src/features/standards/SpeciesStandardsPage.tsx
deleted file mode 100644
index 881d08a1aa..0000000000
--- a/app/src/features/standards/SpeciesStandardsPage.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Box, Container, Paper, Toolbar, Typography } from '@mui/material';
-import PageHeader from 'components/layout/PageHeader';
-import SpeciesAutocompleteField from 'components/species/components/SpeciesAutocompleteField';
-import { useBiohubApi } from 'hooks/useBioHubApi';
-import useDataLoader from 'hooks/useDataLoader';
-import { IPartialTaxonomy } from 'interfaces/useTaxonomyApi.interface';
-import SpeciesStandardsResults from './view/SpeciesStandardsResults';
-
-/**
- * Page to display species standards, which describes what data can be entered and in what structure
- *
- * @return {*}
- */
-const SpeciesStandardsPage = () => {
-  const biohubApi = useBiohubApi();
-  const standardsDataLoader = useDataLoader((species: IPartialTaxonomy) =>
-    biohubApi.standards.getSpeciesStandards(species.tsn)
-  );
-
-  return (
-    <>
-      <PageHeader title="Standards" />
-      <Container maxWidth="xl" sx={{ py: 3 }}>
-        <Paper>
-          <Toolbar style={{ display: 'flex', justifyContent: 'space-between' }}>
-            <Typography variant="h4" component="h2">
-              Discover data standards for species
-            </Typography>
-          </Toolbar>
-          <Box py={2} px={3}>
-            <SpeciesAutocompleteField
-              formikFieldName="tsn"
-              label={''}
-              handleSpecies={(value) => {
-                if (value) {
-                  standardsDataLoader.refresh(value);
-                }
-              }}
-            />
-            <Box my={2}>
-              <SpeciesStandardsResults data={standardsDataLoader.data} isLoading={standardsDataLoader.isLoading} />
-            </Box>
-          </Box>
-        </Paper>
-      </Container>
-    </>
-  );
-};
-
-export default SpeciesStandardsPage;
diff --git a/app/src/features/standards/StandardsPage.tsx b/app/src/features/standards/StandardsPage.tsx
new file mode 100644
index 0000000000..038479645e
--- /dev/null
+++ b/app/src/features/standards/StandardsPage.tsx
@@ -0,0 +1,60 @@
+import { mdiLeaf, mdiPaw, mdiToolbox } from '@mdi/js';
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import PageHeader from 'components/layout/PageHeader';
+import { useState } from 'react';
+import { StandardsToolbar } from './components/StandardsToolbar';
+import { EnvironmentStandards } from './view/environment/EnvironmentStandards';
+import { MethodStandards } from './view/methods/MethodStandards';
+import { SpeciesStandards } from './view/species/SpeciesStandards';
+
+export enum StandardsPageView {
+  SPECIES = 'SPECIES',
+  METHODS = 'METHODS',
+  ENVIRONMENT = 'ENVIRONMENT'
+}
+
+export interface IStandardsPageView {
+  label: string;
+  value: StandardsPageView;
+  icon: string;
+}
+
+const StandardsPage = () => {
+  const [currentView, setCurrentView] = useState(StandardsPageView.SPECIES);
+
+  const views: IStandardsPageView[] = [
+    { label: 'Species', value: StandardsPageView.SPECIES, icon: mdiPaw },
+    { label: 'Sampling Methods', value: StandardsPageView.METHODS, icon: mdiToolbox },
+    { label: 'Environment variables', value: StandardsPageView.ENVIRONMENT, icon: mdiLeaf }
+  ];
+
+  return (
+    <>
+      <PageHeader title="Standards" />
+      <Container maxWidth="xl" sx={{ py: 3 }}>
+        <Stack direction="row" gap={3} component={Paper} sx={{ p: 3 }}>
+          {/* TOOLBAR FOR SWITCHING VIEWS */}
+          <Box width="300px" flexShrink={0}>
+            <StandardsToolbar views={views} currentView={currentView} setCurrentView={setCurrentView} />
+          </Box>
+
+          <Box flex=" 1 1 auto">
+            {/* SPECIES STANDARDS */}
+            {currentView === StandardsPageView.SPECIES && <SpeciesStandards />}
+
+            {/* METHOD STANDARDS */}
+            {currentView === StandardsPageView.METHODS && <MethodStandards />}
+
+            {/* ENVIRONMENT STANDARDS */}
+            {currentView === StandardsPageView.ENVIRONMENT && <EnvironmentStandards />}
+          </Box>
+        </Stack>
+      </Container>
+    </>
+  );
+};
+
+export default StandardsPage;
diff --git a/app/src/features/standards/components/StandardsToolbar.tsx b/app/src/features/standards/components/StandardsToolbar.tsx
new file mode 100644
index 0000000000..44ff76623c
--- /dev/null
+++ b/app/src/features/standards/components/StandardsToolbar.tsx
@@ -0,0 +1,64 @@
+import Icon from '@mdi/react';
+import Button from '@mui/material/Button';
+import ToggleButton from '@mui/material/ToggleButton/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import Typography from '@mui/material/Typography';
+import React, { SetStateAction } from 'react';
+import { IStandardsPageView, StandardsPageView } from '../StandardsPage';
+
+interface IStandardsToolbar {
+  views: IStandardsPageView[];
+  currentView: StandardsPageView;
+  setCurrentView: React.Dispatch<SetStateAction<StandardsPageView>>;
+}
+
+/**
+ * Toolbar for setting the standards page view
+ *
+ * @param props
+ * @returns
+ */
+export const StandardsToolbar = (props: IStandardsToolbar) => {
+  const { views, currentView, setCurrentView } = props;
+
+  return (
+    <>
+      <Typography component="legend">Data types</Typography>
+      <ToggleButtonGroup
+        orientation="vertical"
+        value={currentView}
+        onChange={(_event: React.MouseEvent<HTMLElement>, view: StandardsPageView | null) => {
+          if (view) {
+            setCurrentView(view);
+          }
+        }}
+        exclusive
+        sx={{
+          display: 'flex',
+          gap: 1,
+          '& Button': {
+            py: 1.25,
+            px: 2.5,
+            border: 'none',
+            borderRadius: '4px !important',
+            fontSize: '0.875rem',
+            fontWeight: 700,
+            letterSpacing: '0.02rem',
+            textAlign: 'left',
+            justifyContent: 'flex-start'
+          }
+        }}>
+        {views.map((view) => (
+          <ToggleButton
+            component={Button}
+            startIcon={<Icon path={view.icon} size={1} />}
+            key={view.value}
+            value={view.value}
+            color="primary">
+            {view.label}
+          </ToggleButton>
+        ))}
+      </ToggleButtonGroup>
+    </>
+  );
+};
diff --git a/app/src/features/standards/view/SpeciesStandardsResults.tsx b/app/src/features/standards/view/SpeciesStandardsResults.tsx
deleted file mode 100644
index 520adc80e7..0000000000
--- a/app/src/features/standards/view/SpeciesStandardsResults.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { mdiRuler, mdiTag } from '@mdi/js';
-import { Box, CircularProgress, Divider, Stack, Typography } from '@mui/material';
-import { IGetSpeciesStandardsResponse } from 'interfaces/useStandardsApi.interface';
-import { useState } from 'react';
-import MarkingBodyLocationStandardCard from './components/MarkingBodyLocationStandardCard';
-import MeasurementStandardCard from './components/MeasurementStandardCard';
-import SpeciesStandardsToolbar, { SpeciesStandardsViewEnum } from './components/SpeciesStandardsToolbar';
-
-interface ISpeciesStandardsResultsProps {
-  data?: IGetSpeciesStandardsResponse;
-  isLoading: boolean;
-}
-
-/**
- * Component to display species standards results
- *
- * @return {*}
- */
-const SpeciesStandardsResults = (props: ISpeciesStandardsResultsProps) => {
-  const [activeView, setActiveView] = useState<SpeciesStandardsViewEnum>(SpeciesStandardsViewEnum.MEASUREMENTS);
-
-  if (props.isLoading) {
-    return (
-      <Box display="flex" alignItems="center" justifyContent="center">
-        <CircularProgress size={40} />
-      </Box>
-    );
-  }
-
-  if (!props.data) {
-    return <></>;
-  }
-
-  return (
-    <>
-      <Box justifyContent="space-between" display="flex">
-        <Typography color="textSecondary">
-          Showing results for{' '}
-          {props.data.scientificName.split(' ').length >= 2 ? (
-            <i>{props.data.scientificName}</i>
-          ) : (
-            props.data.scientificName
-          )}
-        </Typography>
-      </Box>
-      <Divider sx={{ my: 2 }} />
-      <Box my={2}>
-        <SpeciesStandardsToolbar
-          views={[
-            {
-              label: `Measurements`,
-              value: SpeciesStandardsViewEnum.MEASUREMENTS,
-              icon: mdiRuler,
-              isLoading: false
-            },
-            {
-              label: `Marking body locations`,
-              value: SpeciesStandardsViewEnum.MARKING_BODY_LOCATIONS,
-              icon: mdiTag,
-              isLoading: false
-            }
-          ]}
-          activeView={activeView}
-          updateDatasetView={setActiveView}
-        />
-      </Box>
-
-      {activeView === 'MEASUREMENTS' && (
-        <Stack gap={2}>
-          {props.data.measurements.qualitative.map((measurement) => (
-            <MeasurementStandardCard
-              label={measurement.measurement_name}
-              description={measurement.measurement_desc ?? ''}
-              options={measurement.options}
-            />
-          ))}
-          {props.data.measurements.quantitative.map((measurement) => (
-            <MeasurementStandardCard
-              label={measurement.measurement_name}
-              description={measurement.measurement_desc ?? ''}
-            />
-          ))}
-        </Stack>
-      )}
-      {activeView === 'MARKING BODY LOCATIONS' && (
-        <Stack gap={2}>
-          {props.data.markingBodyLocations.map((location) => (
-            <MarkingBodyLocationStandardCard label={location.value} />
-          ))}
-        </Stack>
-      )}
-    </>
-  );
-};
-
-export default SpeciesStandardsResults;
diff --git a/app/src/features/standards/view/components/AccordionStandardCard.tsx b/app/src/features/standards/view/components/AccordionStandardCard.tsx
new file mode 100644
index 0000000000..1779b4841a
--- /dev/null
+++ b/app/src/features/standards/view/components/AccordionStandardCard.tsx
@@ -0,0 +1,71 @@
+import { mdiChevronDown, mdiChevronUp } from '@mdi/js';
+import { Icon } from '@mdi/react';
+import { Collapse } from '@mui/material';
+import Box, { BoxProps } from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import { useState } from 'react';
+
+interface IAccordionStandardCardProps extends BoxProps {
+  label: string;
+  subtitle?: string | null;
+  ornament?: JSX.Element;
+  children?: JSX.Element;
+  colour: string;
+  disableCollapse?: boolean;
+}
+
+/**
+ * Returns a collapsible paper component for displaying lookup values
+ * @param props
+ * @returns
+ */
+export const AccordionStandardCard = (props: IAccordionStandardCardProps) => {
+  const { label, subtitle, children, colour, ornament, disableCollapse } = props;
+
+  const [isCollapsed, setIsCollapsed] = useState(true);
+
+  const expandable = (children || subtitle) && !disableCollapse;
+
+  const handleHeaderClick = () => {
+    if (expandable) {
+      setIsCollapsed(!isCollapsed);
+    }
+  };
+
+  return (
+    <Paper sx={{ bgcolor: colour, flex: '1 1 auto' }} elevation={0}>
+      <Box
+        display="flex"
+        justifyContent="space-between"
+        flex="1 1 auto"
+        alignItems="center"
+        sx={{ cursor: expandable ? 'pointer' : 'default', px: 3, py: 2 }}
+        onClick={handleHeaderClick}>
+        <Box display="flex" justifyContent="space-between" flex={0.975}>
+          <Typography
+            variant="h5"
+            sx={{
+              '&::first-letter': {
+                textTransform: 'capitalize'
+              }
+            }}>
+            {label}
+          </Typography>
+          {ornament}
+        </Box>
+        {expandable && <Icon path={isCollapsed ? mdiChevronDown : mdiChevronUp} size={1} />}
+      </Box>
+      <Box sx={{ px: 3 }}>
+        <Collapse in={!isCollapsed || disableCollapse}>
+          {subtitle && (
+            <Typography sx={{ pb: !children ? 2 : 0 }} color="textSecondary">
+              {subtitle}
+            </Typography>
+          )}
+          {children}
+        </Collapse>
+      </Box>
+    </Paper>
+  );
+};
diff --git a/app/src/features/standards/view/components/EnvironmentStandardCard.tsx b/app/src/features/standards/view/components/EnvironmentStandardCard.tsx
deleted file mode 100644
index 036309e7c5..0000000000
--- a/app/src/features/standards/view/components/EnvironmentStandardCard.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { mdiChevronDown, mdiChevronUp } from '@mdi/js';
-import Icon from '@mdi/react';
-import { Box, Card, Collapse, Paper, Stack, Typography } from '@mui/material';
-import { grey } from '@mui/material/colors';
-import { EnvironmentQualitativeOption } from 'interfaces/useReferenceApi.interface';
-import { useState } from 'react';
-
-interface IEnvironmentStandardCard {
-  label: string;
-  description?: string;
-  options?: EnvironmentQualitativeOption[];
-  unit?: string;
-  small?: boolean;
-}
-
-/**
- * Card to display environment information.
- *
- * @return {*}
- */
-const EnvironmentStandardCard = (props: IEnvironmentStandardCard) => {
-  const [isCollapsed, setIsCollapsed] = useState(true);
-  const { small } = props;
-
-  return (
-    <Paper
-      sx={{ bgcolor: grey[100], px: 3, py: 2, cursor: 'pointer', flex: '1 1 auto' }}
-      elevation={0}
-      onClick={() => setIsCollapsed(!isCollapsed)}>
-      <Box display="flex" justifyContent="space-between" flex="1 1 auto" alignItems="center">
-        <Typography
-          variant="h5"
-          sx={{
-            '&::first-letter': {
-              textTransform: 'capitalize'
-            }
-          }}>
-          {props.label}
-        </Typography>
-        <Icon path={isCollapsed ? mdiChevronDown : mdiChevronUp} size={1} />
-      </Box>
-      <Collapse in={!isCollapsed}>
-        <Box my={2}>
-          <Typography variant="body1" color="textSecondary">
-            {props.description ? props.description : 'No description'}
-          </Typography>
-        </Box>
-        <Stack gap={small ? 1 : 2}>
-          {props.options?.map((option) => (
-            <Card
-              sx={{
-                p: small ? 1 : 2,
-                px: 2,
-                bgcolor: grey[200],
-                '&::first-letter': {
-                  textTransform: 'capitalize'
-                }
-              }}
-              elevation={0}
-              key={`qualitative-option-${option.environment_qualitative_option_id}`}>
-              <Typography variant="body1" fontWeight={700}>
-                {option.name}
-              </Typography>
-              <Typography variant="body2" color="textSecondary">
-                {option?.description}
-              </Typography>
-            </Card>
-          ))}
-        </Stack>
-      </Collapse>
-    </Paper>
-  );
-};
-
-export default EnvironmentStandardCard;
diff --git a/app/src/features/standards/view/components/MarkingBodyLocationStandardCard.tsx b/app/src/features/standards/view/components/MarkingBodyLocationStandardCard.tsx
deleted file mode 100644
index d271785418..0000000000
--- a/app/src/features/standards/view/components/MarkingBodyLocationStandardCard.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Paper, Typography } from '@mui/material';
-import { grey } from '@mui/material/colors';
-
-interface IMarkingBodyLocationStandardCard {
-  label: string;
-}
-
-/**
- * Card to display marking body location for species standards
- *
- * @return {*}
- */
-const MarkingBodyLocationStandardCard = (props: IMarkingBodyLocationStandardCard) => {
-  return (
-    <Paper sx={{ bgcolor: grey[100], px: 3, py: 2 }} elevation={0}>
-      <Typography
-        variant="h5"
-        sx={{
-          '&::first-letter': {
-            textTransform: 'capitalize'
-          }
-        }}>
-        {props.label}
-      </Typography>
-    </Paper>
-  );
-};
-
-export default MarkingBodyLocationStandardCard;
diff --git a/app/src/features/standards/view/components/MeasurementStandardCard.tsx b/app/src/features/standards/view/components/MeasurementStandardCard.tsx
deleted file mode 100644
index 095031a323..0000000000
--- a/app/src/features/standards/view/components/MeasurementStandardCard.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { mdiChevronDown, mdiChevronUp } from '@mdi/js';
-import Icon from '@mdi/react';
-import { Box, Card, Collapse, Paper, Stack, Typography } from '@mui/material';
-import { grey } from '@mui/material/colors';
-import { CBQualitativeOption } from 'interfaces/useCritterApi.interface';
-import { useState } from 'react';
-
-interface IMeasurementStandardCard {
-  label: string;
-  description?: string;
-  options?: CBQualitativeOption[];
-  unit?: string;
-  small?: boolean;
-}
-
-/**
- * Card to display measurements information for species standards
- *
- * @return {*}
- */
-const MeasurementStandardCard = (props: IMeasurementStandardCard) => {
-  const [isCollapsed, setIsCollapsed] = useState(true);
-  const { small } = props;
-
-  return (
-    <Paper
-      sx={{ bgcolor: grey[100], px: 3, py: 2, cursor: 'pointer', flex: '1 1 auto' }}
-      elevation={0}
-      onClick={() => setIsCollapsed(!isCollapsed)}>
-      <Box display="flex" justifyContent="space-between" flex="1 1 auto" alignItems="center">
-        <Typography
-          variant="h5"
-          sx={{
-            '&::first-letter': {
-              textTransform: 'capitalize'
-            }
-          }}>
-          {props.label}
-        </Typography>
-        <Icon path={isCollapsed ? mdiChevronDown : mdiChevronUp} size={1} />
-      </Box>
-      <Collapse in={!isCollapsed}>
-        <Box my={2}>
-          <Typography variant="body1" color="textSecondary">
-            {props.description ? props.description : 'No description'}
-          </Typography>
-        </Box>
-        <Stack gap={small ? 1 : 2}>
-          {props.options?.map((option) => (
-            <Card
-              sx={{
-                p: small ? 1 : 2,
-                px: 2,
-                bgcolor: grey[200],
-                '&::first-letter': {
-                  textTransform: 'capitalize'
-                }
-              }}
-              elevation={0}
-              key={option.qualitative_option_id}>
-              <Typography variant="body1" fontWeight={700}>
-                {option.option_label}
-              </Typography>
-              <Typography variant="body2" color="textSecondary">
-                {option?.option_desc}
-              </Typography>
-            </Card>
-          ))}
-        </Stack>
-      </Collapse>
-    </Paper>
-  );
-};
-
-export default MeasurementStandardCard;
diff --git a/app/src/features/standards/view/environment/EnvironmentStandards.tsx b/app/src/features/standards/view/environment/EnvironmentStandards.tsx
new file mode 100644
index 0000000000..a19309e3d9
--- /dev/null
+++ b/app/src/features/standards/view/environment/EnvironmentStandards.tsx
@@ -0,0 +1,63 @@
+import Box from '@mui/material/Box';
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import { useBiohubApi } from 'hooks/useBioHubApi';
+import useDataLoader from 'hooks/useDataLoader';
+import { debounce } from 'lodash-es';
+import { useEffect, useMemo } from 'react';
+import { EnvironmentStandardsResults } from './EnvironmentStandardsResults';
+
+/**
+ * Returns environmental variable lookup values for the standards page
+ *
+ * @returns
+ */
+export const EnvironmentStandards = () => {
+  const biohubApi = useBiohubApi();
+
+  const environmentsDataLoader = useDataLoader((keyword?: string) =>
+    biohubApi.standards.getEnvironmentStandards(keyword)
+  );
+
+  const debouncedRefresh = useMemo(
+    () =>
+      debounce((value: string) => {
+        environmentsDataLoader.refresh(value);
+      }, 500),
+    []
+  );
+
+  useEffect(() => {
+    environmentsDataLoader.load();
+  }, [environmentsDataLoader]);
+
+  return (
+    <>
+      <TextField
+        name="name"
+        label="Environmental variable name"
+        key="environments-name-search"
+        fullWidth
+        onChange={(event) => {
+          const value = event.currentTarget.value;
+          debouncedRefresh(value);
+        }}
+      />
+      <Box my={2}>
+        {environmentsDataLoader.data ? (
+          <EnvironmentStandardsResults data={environmentsDataLoader.data} />
+        ) : (
+          <Stack gap={1}>
+            <Skeleton variant="rectangular" height="60px" />
+            <Skeleton variant="rectangular" height="60px" />
+            <Skeleton variant="rectangular" height="60px" />
+            <Skeleton variant="rectangular" height="60px" />
+            <Skeleton variant="rectangular" height="60px" />
+            <Skeleton variant="rectangular" height="60px" />
+          </Stack>
+        )}
+      </Box>
+    </>
+  );
+};
diff --git a/app/src/features/standards/view/environment/EnvironmentStandardsResults.tsx b/app/src/features/standards/view/environment/EnvironmentStandardsResults.tsx
new file mode 100644
index 0000000000..d4d22d0e57
--- /dev/null
+++ b/app/src/features/standards/view/environment/EnvironmentStandardsResults.tsx
@@ -0,0 +1,38 @@
+import { grey } from '@mui/material/colors';
+import Stack from '@mui/material/Stack';
+import { AccordionStandardCard } from 'features/standards/view/components/AccordionStandardCard';
+import { IEnvironmentStandards } from 'interfaces/useStandardsApi.interface';
+
+interface ISpeciesStandardsResultsProps {
+  data: IEnvironmentStandards;
+}
+
+/**
+ * Component to display environments standards results
+ *
+ * @return {*}
+ */
+export const EnvironmentStandardsResults = (props: ISpeciesStandardsResultsProps) => {
+  const { data } = props;
+
+  return (
+    <Stack gap={2}>
+      {data.quantitative.map((environment) => (
+        <AccordionStandardCard
+          key={environment.name}
+          label={environment.name}
+          subtitle={environment.description}
+          colour={grey[100]}
+        />
+      ))}
+      {data.qualitative.map((environment) => (
+        <AccordionStandardCard
+          key={environment.name}
+          label={environment.name}
+          subtitle={environment.description}
+          colour={grey[100]}
+        />
+      ))}
+    </Stack>
+  );
+};
diff --git a/app/src/features/standards/view/methods/MethodStandards.tsx b/app/src/features/standards/view/methods/MethodStandards.tsx
new file mode 100644
index 0000000000..2d540e13a9
--- /dev/null
+++ b/app/src/features/standards/view/methods/MethodStandards.tsx
@@ -0,0 +1,61 @@
+import { Skeleton, Stack, TextField } from '@mui/material';
+import Box from '@mui/material/Box';
+import { useBiohubApi } from 'hooks/useBioHubApi';
+import useDataLoader from 'hooks/useDataLoader';
+import { debounce } from 'lodash-es';
+import { useEffect, useMemo } from 'react';
+import { MethodStandardsResults } from './MethodStandardsResults';
+
+/**
+ *
+ * Returns information about method lookup options
+ *
+ * @returns
+ */
+export const MethodStandards = () => {
+  const biohubApi = useBiohubApi();
+
+  const methodDataLoader = useDataLoader((keyword?: string) => biohubApi.standards.getMethodStandards(keyword));
+
+  const debouncedRefresh = useMemo(
+    () =>
+      debounce((value: string) => {
+        methodDataLoader.refresh(value);
+      }, 500),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  useEffect(() => {
+    methodDataLoader.load();
+  }, [methodDataLoader]);
+
+  return (
+    <>
+      <TextField
+        name="name"
+        label="Method name"
+        key="method-name-search"
+        fullWidth
+        onChange={(event) => {
+          const value = event.currentTarget.value;
+          debouncedRefresh(value);
+        }}
+      />
+      <Box my={2}>
+        {methodDataLoader.data ? (
+          <MethodStandardsResults data={methodDataLoader.data} />
+        ) : (
+          <Stack gap={1}>
+            <Skeleton variant="rectangular" height="60px" />
+            <Skeleton variant="rectangular" height="60px" />
+            <Skeleton variant="rectangular" height="60px" />
+            <Skeleton variant="rectangular" height="60px" />
+            <Skeleton variant="rectangular" height="60px" />
+            <Skeleton variant="rectangular" height="60px" />
+          </Stack>
+        )}
+      </Box>
+    </>
+  );
+};
diff --git a/app/src/features/standards/view/methods/MethodStandardsResults.tsx b/app/src/features/standards/view/methods/MethodStandardsResults.tsx
new file mode 100644
index 0000000000..001e9bb640
--- /dev/null
+++ b/app/src/features/standards/view/methods/MethodStandardsResults.tsx
@@ -0,0 +1,66 @@
+import { blueGrey, grey } from '@mui/material/colors';
+import Stack from '@mui/material/Stack';
+import ColouredRectangleChip from 'components/chips/ColouredRectangleChip';
+import { IMethodStandard } from 'interfaces/useStandardsApi.interface';
+import { AccordionStandardCard } from '../components/AccordionStandardCard';
+
+interface ISpeciesStandardsResultsProps {
+  data: IMethodStandard[];
+}
+
+/**
+ * Component to display methods standards results
+ *
+ * @return {*}
+ */
+export const MethodStandardsResults = (props: ISpeciesStandardsResultsProps) => {
+  const { data } = props;
+
+  return (
+    <Stack gap={2}>
+      {data.map((method) => (
+        <AccordionStandardCard
+          key={method.method_lookup_id}
+          colour={grey[100]}
+          label={method.name}
+          subtitle={method.description}
+          children={
+            <Stack gap={2} my={2}>
+              {method.attributes.qualitative.map((attribute) => (
+                <AccordionStandardCard
+                  key={attribute.name}
+                  colour={grey[200]}
+                  label={attribute.name}
+                  subtitle={attribute.description}
+                  children={
+                    <Stack gap={2} my={2}>
+                      {attribute.options.map((option) => (
+                        <AccordionStandardCard
+                          key={option.name}
+                          label={option.name}
+                          subtitle={option.description}
+                          colour={grey[300]}
+                        />
+                      ))}
+                    </Stack>
+                  }
+                />
+              ))}
+              {method.attributes.quantitative.map((attribute) => (
+                <AccordionStandardCard
+                  key={attribute.name}
+                  colour={grey[200]}
+                  label={attribute.name}
+                  subtitle={attribute.description}
+                  ornament={<ColouredRectangleChip label={attribute.unit} colour={blueGrey} />}
+                />
+              ))}
+            </Stack>
+          }
+        />
+      ))}
+    </Stack>
+  );
+};
+
+export default MethodStandardsResults;
diff --git a/app/src/features/standards/view/species/SpeciesStandards.tsx b/app/src/features/standards/view/species/SpeciesStandards.tsx
new file mode 100644
index 0000000000..44602950d5
--- /dev/null
+++ b/app/src/features/standards/view/species/SpeciesStandards.tsx
@@ -0,0 +1,63 @@
+import { mdiArrowTopRight } from '@mdi/js';
+import { Skeleton } from '@mui/material';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import { NoDataOverlay } from 'components/overlay/NoDataOverlay';
+import SpeciesAutocompleteField from 'components/species/components/SpeciesAutocompleteField';
+import { useBiohubApi } from 'hooks/useBioHubApi';
+import useDataLoader from 'hooks/useDataLoader';
+import { IPartialTaxonomy } from 'interfaces/useTaxonomyApi.interface';
+import SpeciesStandardsResults from './SpeciesStandardsResults';
+
+/**
+ * Returns species standards page for searching species and viewing lookup values available for selected species.
+ * This component handles the data request, then passes the data to its children components.
+ *
+ * @returns
+ */
+export const SpeciesStandards = () => {
+  const biohubApi = useBiohubApi();
+
+  const standardsDataLoader = useDataLoader((species: IPartialTaxonomy) =>
+    biohubApi.standards.getSpeciesStandards(species.tsn)
+  );
+
+  return (
+    <>
+      <SpeciesAutocompleteField
+        formikFieldName="tsn"
+        label=""
+        handleClear={() => {
+          standardsDataLoader.clearData();
+        }}
+        handleSpecies={(value) => {
+          if (value) {
+            standardsDataLoader.refresh(value);
+          }
+        }}
+      />
+      <Box my={2}>
+        {standardsDataLoader.data && <SpeciesStandardsResults data={standardsDataLoader.data} />}
+        {standardsDataLoader.isLoading ? (
+          <Stack gap={1}>
+            <Skeleton variant="rectangular" height="60px" />
+            <Skeleton variant="rectangular" height="60px" />
+            <Skeleton variant="rectangular" height="60px" />
+            <Skeleton variant="rectangular" height="60px" />
+            <Skeleton variant="rectangular" height="60px" />
+            <Skeleton variant="rectangular" height="60px" />
+            <Skeleton variant="rectangular" height="60px" />
+          </Stack>
+        ) : (
+          <Box minHeight="200px" display="flex" alignItems="center" justifyContent="center">
+            <NoDataOverlay
+              title="Search for a Species"
+              subtitle="Explore supported data types and formatting guidelines for species"
+              icon={mdiArrowTopRight}
+            />
+          </Box>
+        )}
+      </Box>
+    </>
+  );
+};
diff --git a/app/src/features/standards/view/species/SpeciesStandardsResults.tsx b/app/src/features/standards/view/species/SpeciesStandardsResults.tsx
new file mode 100644
index 0000000000..92ca47e97b
--- /dev/null
+++ b/app/src/features/standards/view/species/SpeciesStandardsResults.tsx
@@ -0,0 +1,97 @@
+import { mdiRuler, mdiTag } from '@mdi/js';
+import { Box, Divider, Stack, Typography } from '@mui/material';
+import { grey } from '@mui/material/colors';
+import { AccordionStandardCard } from 'features/standards/view/components/AccordionStandardCard';
+import { ScientificNameTypography } from 'features/surveys/animals/components/ScientificNameTypography';
+import { ISpeciesStandards } from 'interfaces/useStandardsApi.interface';
+import { useState } from 'react';
+import SpeciesStandardsToolbar, { SpeciesStandardsViewEnum } from './components/SpeciesStandardsToolbar';
+
+interface ISpeciesStandardsResultsProps {
+  data: ISpeciesStandards;
+}
+
+/**
+ * Component to display species standards results
+ *
+ * @return {*}
+ */
+const SpeciesStandardsResults = (props: ISpeciesStandardsResultsProps) => {
+  const [activeView, setActiveView] = useState<SpeciesStandardsViewEnum>(SpeciesStandardsViewEnum.MEASUREMENTS);
+
+  return (
+    <>
+      <Box justifyContent="space-between" display="flex">
+        <Typography color="textSecondary">
+          Showing results for&nbsp;
+          <ScientificNameTypography name={props.data.scientificName} component="span" />
+        </Typography>
+      </Box>
+      <Divider sx={{ my: 2 }} />
+      <Box my={2}>
+        <SpeciesStandardsToolbar
+          views={[
+            {
+              label: `Measurements`,
+              value: SpeciesStandardsViewEnum.MEASUREMENTS,
+              icon: mdiRuler,
+              isLoading: false
+            },
+            {
+              label: `Marking body locations`,
+              value: SpeciesStandardsViewEnum.MARKING_BODY_LOCATIONS,
+              icon: mdiTag,
+              isLoading: false
+            }
+          ]}
+          activeView={activeView}
+          updateDatasetView={setActiveView}
+        />
+      </Box>
+      <Stack gap={2}>
+        {activeView === SpeciesStandardsViewEnum.MEASUREMENTS && (
+          <>
+            {props.data.measurements.qualitative.map((measurement) => (
+              <AccordionStandardCard
+                key={measurement.taxon_measurement_id}
+                label={measurement.measurement_name}
+                subtitle={measurement.measurement_desc}
+                colour={grey[100]}
+                children={
+                  <Stack gap={2} my={2}>
+                    {measurement.options.map((option) => (
+                      <AccordionStandardCard
+                        key={option.qualitative_option_id}
+                        label={option.option_label}
+                        subtitle={option.option_desc}
+                        colour={grey[200]}
+                        disableCollapse
+                      />
+                    ))}
+                  </Stack>
+                }
+              />
+            ))}
+            {props.data.measurements.quantitative.map((measurement) => (
+              <AccordionStandardCard
+                key={measurement.taxon_measurement_id}
+                label={measurement.measurement_name}
+                subtitle={measurement.measurement_desc}
+                colour={grey[100]}
+              />
+            ))}
+          </>
+        )}
+        {activeView === SpeciesStandardsViewEnum.MARKING_BODY_LOCATIONS && (
+          <>
+            {props.data.markingBodyLocations.map((location) => (
+              <AccordionStandardCard label={location.value} colour={grey[100]} disableCollapse key={location.id} />
+            ))}
+          </>
+        )}
+      </Stack>
+    </>
+  );
+};
+
+export default SpeciesStandardsResults;
diff --git a/app/src/features/standards/view/components/SpeciesStandardsToolbar.tsx b/app/src/features/standards/view/species/components/SpeciesStandardsToolbar.tsx
similarity index 100%
rename from app/src/features/standards/view/components/SpeciesStandardsToolbar.tsx
rename to app/src/features/standards/view/species/components/SpeciesStandardsToolbar.tsx
diff --git a/app/src/features/summary/list-data/survey/SurveysListContainer.tsx b/app/src/features/summary/list-data/survey/SurveysListContainer.tsx
index 135b955975..5226ea5e04 100644
--- a/app/src/features/summary/list-data/survey/SurveysListContainer.tsx
+++ b/app/src/features/summary/list-data/survey/SurveysListContainer.tsx
@@ -16,6 +16,7 @@ import { getNrmRegionColour, NrmRegionKeys } from 'constants/colours';
 import { DATE_FORMAT } from 'constants/dateTimeFormats';
 import { NRM_REGION_APPENDED_TEXT } from 'constants/regions';
 import dayjs from 'dayjs';
+import { SurveyProgressChip } from 'features/surveys/components/SurveyProgressChip';
 import { useBiohubApi } from 'hooks/useBioHubApi';
 import useDataLoader from 'hooks/useDataLoader';
 import { useDeepCompareEffect } from 'hooks/useDeepCompareEffect';
@@ -25,7 +26,6 @@ import { useState } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { ApiPaginationRequestOptions, StringValues } from 'types/misc';
 import { firstOrNull } from 'utils/Utils';
-import { SurveyProgressChip } from '../../../surveys/components/SurveyProgressChip';
 import SurveysListFilterForm, {
   ISurveyAdvancedFilters,
   SurveyAdvancedFiltersInitialValues
diff --git a/app/src/features/surveys/observations/observations-table/configure-columns/components/environment/ConfigureEnvironmentColumns.tsx b/app/src/features/surveys/observations/observations-table/configure-columns/components/environment/ConfigureEnvironmentColumns.tsx
index 4d4b6a26ae..0bda5089cb 100644
--- a/app/src/features/surveys/observations/observations-table/configure-columns/components/environment/ConfigureEnvironmentColumns.tsx
+++ b/app/src/features/surveys/observations/observations-table/configure-columns/components/environment/ConfigureEnvironmentColumns.tsx
@@ -1,7 +1,9 @@
 import { mdiTrashCanOutline } from '@mdi/js';
 import Icon from '@mdi/react';
 import { Box, IconButton, Stack, Typography } from '@mui/material';
-import EnvironmentStandardCard from 'features/standards/view/components/EnvironmentStandardCard';
+import { blueGrey, grey } from '@mui/material/colors';
+import ColouredRectangleChip from 'components/chips/ColouredRectangleChip';
+import { AccordionStandardCard } from 'features/standards/view/components/AccordionStandardCard';
 import { EnvironmentType, EnvironmentTypeIds } from 'interfaces/useReferenceApi.interface';
 import { EnvironmentsSearch } from './search/EnvironmentsSearch';
 
@@ -60,11 +62,23 @@ export const ConfigureEnvironmentColumns = (props: IConfigureEnvironmentColumnsP
                   display="flex"
                   alignItems="flex-start"
                   key={`qualitative_environment_item_${environment.environment_qualitative_id}`}>
-                  <EnvironmentStandardCard
-                    small
+                  <AccordionStandardCard
                     label={environment.name}
-                    description={environment.description ?? ''}
-                    options={environment.options}
+                    subtitle={environment.description}
+                    colour={grey[100]}
+                    children={
+                      <Stack gap={1} my={2}>
+                        {environment.options.map((option) => (
+                          <AccordionStandardCard
+                            key={option.environment_qualitative_option_id}
+                            label={option.name}
+                            subtitle={option.description}
+                            colour={grey[200]}
+                            disableCollapse
+                          />
+                        ))}
+                      </Stack>
+                    }
                   />
                   <Box ml={1} mt={1}>
                     <IconButton
@@ -86,7 +100,16 @@ export const ConfigureEnvironmentColumns = (props: IConfigureEnvironmentColumnsP
                   display="flex"
                   alignItems="flex-start"
                   key={`quantitative_environment_item_${environment.environment_quantitative_id}`}>
-                  <EnvironmentStandardCard small label={environment.name} description={environment.description ?? ''} />
+                  <AccordionStandardCard
+                    label={environment.name}
+                    subtitle={environment.description}
+                    colour={grey[100]}
+                    ornament={
+                      environment.unit ? (
+                        <ColouredRectangleChip colour={blueGrey} label={environment.unit} />
+                      ) : undefined
+                    }
+                  />
                   <Box ml={1} mt={1}>
                     <IconButton
                       aria-label="Remove environment column"
diff --git a/app/src/features/surveys/observations/observations-table/configure-columns/components/measurements/ConfigureMeasurementColumns.tsx b/app/src/features/surveys/observations/observations-table/configure-columns/components/measurements/ConfigureMeasurementColumns.tsx
index f36b2763e5..44f0ecaaa6 100644
--- a/app/src/features/surveys/observations/observations-table/configure-columns/components/measurements/ConfigureMeasurementColumns.tsx
+++ b/app/src/features/surveys/observations/observations-table/configure-columns/components/measurements/ConfigureMeasurementColumns.tsx
@@ -1,7 +1,9 @@
 import { mdiTrashCanOutline } from '@mdi/js';
 import Icon from '@mdi/react';
 import { Box, IconButton, Stack, Typography } from '@mui/material';
-import MeasurementStandardCard from 'features/standards/view/components/MeasurementStandardCard';
+import { blueGrey, grey } from '@mui/material/colors';
+import ColouredRectangleChip from 'components/chips/ColouredRectangleChip';
+import { AccordionStandardCard } from 'features/standards/view/components/AccordionStandardCard';
 import { CBMeasurementType } from 'interfaces/useCritterApi.interface';
 import { MeasurementsSearch } from './search/MeasurementsSearch';
 
@@ -57,11 +59,29 @@ export const ConfigureMeasurementColumns = (props: IConfigureMeasurementColumnsP
                   display="flex"
                   alignItems="flex-start"
                   key={`measurement_item_${measurement.taxon_measurement_id}`}>
-                  <MeasurementStandardCard
-                    small
+                  <AccordionStandardCard
                     label={measurement.measurement_name}
-                    description={measurement.measurement_desc ?? ''}
-                    options={'options' in measurement ? measurement['options'] : []}
+                    subtitle={measurement.measurement_desc ?? ''}
+                    colour={grey[100]}
+                    children={
+                      'options' in measurement ? (
+                        <Stack gap={1} my={2}>
+                          {measurement.options.map((option) => (
+                            <AccordionStandardCard
+                              key={option.option_label}
+                              label={option.option_label}
+                              subtitle={option.option_desc}
+                              colour={grey[200]}
+                            />
+                          ))}
+                        </Stack>
+                      ) : undefined
+                    }
+                    ornament={
+                      'unit' in measurement && measurement.unit ? (
+                        <ColouredRectangleChip colour={blueGrey} label={measurement.unit} />
+                      ) : undefined
+                    }
                   />
                   <Box ml={1} mt={1}>
                     <IconButton
diff --git a/app/src/hooks/api/useStandardsApi.ts b/app/src/hooks/api/useStandardsApi.ts
index 75ecaf5f15..e27190cdbe 100644
--- a/app/src/hooks/api/useStandardsApi.ts
+++ b/app/src/hooks/api/useStandardsApi.ts
@@ -1,5 +1,6 @@
 import { AxiosInstance } from 'axios';
-import { IGetSpeciesStandardsResponse } from 'interfaces/useStandardsApi.interface';
+import { IEnvironmentStandards, IMethodStandard, ISpeciesStandards } from 'interfaces/useStandardsApi.interface';
+import qs from 'qs';
 
 /**
  * Returns information about what data can be uploaded for a given species,
@@ -12,16 +13,52 @@ const useStandardsApi = (axios: AxiosInstance) => {
   /**
    * Fetch species standards
    *
-   * @return {*}  {Promise<IGetSpeciesStandardsResponse>}
+   * @return {*}  {Promise<ISpeciesStandards>}
    */
-  const getSpeciesStandards = async (tsn: number): Promise<IGetSpeciesStandardsResponse> => {
+  const getSpeciesStandards = async (tsn: number): Promise<ISpeciesStandards> => {
     const { data } = await axios.get(`/api/standards/taxon/${tsn}`);
 
     return data;
   };
 
+  /**
+   * Fetch method standards
+   *
+   * @param {string} keyword
+   * @return {*}  {Promise<IGetMethodsStandardsResponse>}
+   */
+  const getMethodStandards = async (keyword?: string): Promise<IMethodStandard[]> => {
+    const params = { keyword };
+
+    const { data } = await axios.get('/api/standards/methods', {
+      params,
+      paramsSerializer: (params) => qs.stringify(params)
+    });
+
+    return data;
+  };
+
+  /**
+   * Fetch environment standards
+   *
+   * @param {string} keyword
+   * @return {*}  {Promise<IEnvironmentStandards>}
+   */
+  const getEnvironmentStandards = async (keyword?: string): Promise<IEnvironmentStandards> => {
+    const params = { keyword };
+
+    const { data } = await axios.get('/api/standards/environment', {
+      params,
+      paramsSerializer: (params) => qs.stringify(params)
+    });
+
+    return data;
+  };
+
   return {
-    getSpeciesStandards
+    getSpeciesStandards,
+    getEnvironmentStandards,
+    getMethodStandards
   };
 };
 
diff --git a/app/src/interfaces/useStandardsApi.interface.ts b/app/src/interfaces/useStandardsApi.interface.ts
index fc58fd85ab..09069b72c3 100644
--- a/app/src/interfaces/useStandardsApi.interface.ts
+++ b/app/src/interfaces/useStandardsApi.interface.ts
@@ -4,13 +4,26 @@ import {
   ICollectionUnit
 } from './useCritterApi.interface';
 
+interface IStandardNameDescription {
+  name: string;
+  description: string;
+}
+
+interface IQualitativeAttributeStandard extends IStandardNameDescription {
+  options: IStandardNameDescription[];
+}
+
+interface IQuantitativeAttributeStandard extends IStandardNameDescription {
+  unit: string;
+}
+
 /**
  * Data standards for a taxon
  *
  * @export
- * @interface IGetSpeciesStandardsResponse
+ * @interface ISpeciesStandards
  */
-export interface IGetSpeciesStandardsResponse {
+export interface ISpeciesStandards {
   tsn: number;
   scientificName: string;
   measurements: {
@@ -22,5 +35,27 @@ export interface IGetSpeciesStandardsResponse {
     key: string;
     value: string;
   }[];
-  ecological_units: ICollectionUnit[];
+  ecologicalUnits: ICollectionUnit[];
+}
+
+/**
+ * Data standards for methods
+ *
+ * @export
+ * @interface IMethodStandard
+ */
+export interface IMethodStandard extends IStandardNameDescription {
+  method_lookup_id: number;
+  attributes: { qualitative: IQualitativeAttributeStandard[]; quantitative: IQuantitativeAttributeStandard[] };
+}
+
+/**
+ * Data standards for environments
+ *
+ * @export
+ * @interface IEnvironmentStandards
+ */
+export interface IEnvironmentStandards {
+  qualitative: IQualitativeAttributeStandard[];
+  quantitative: IQuantitativeAttributeStandard[];
 }